* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
  :root {
    --bg:#15110c; --paper:#f3ece0; --paper2:#e9dfca; --panel:#f7f1e6; --panel2:#ece2cf;
    --line:#bdae8e; --ink:#2b2620; --ink2:#5a4f40; --sub:#897a5e;
    --vermilion:#b3402f; --vermilion-d:#8f2c22; --gold:#a9801f; --gold-l:#c9a23a; --jade:#3f7d5a;
    --red:var(--vermilion); --txt:var(--ink); --gold-soft:#c9a23a;
    --mtn:rgba(44,38,32,.14);
    --q0:#8a8070; --q1:#3f7d5a; --q2:#3a5a78; --q3:#6b4a7a; --q4:#a8631e;
  }
  html,body { height:100%; }
  body {
    background:
      radial-gradient(circle at 20% 12%, rgba(179,64,47,.05), transparent 42%),
      radial-gradient(circle at 82% 86%, rgba(63,125,90,.05), transparent 46%),
      radial-gradient(circle at 50% 50%, rgba(44,38,32,.015), transparent 60%),
      var(--paper);
    color:var(--ink); font-family:"STKaiti","KaiTi","Kaiti SC","STSong","Songti SC","SimSun","PingFang SC",serif;
    font-size:15px; overflow:hidden; user-select:none; -webkit-font-smoothing:antialiased; touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  }
  #app { max-width:480px; margin:0 auto; height:100%; display:flex; flex-direction:column; padding:env(safe-area-inset-top) calc(env(safe-area-inset-right) + 8px) calc(env(safe-area-inset-bottom) + 10px) calc(env(safe-area-inset-left) + 8px); gap:8px; position:relative; }
  #detailBox { background:linear-gradient(180deg,var(--panel),var(--paper2)); border:1px solid var(--line); border-radius:12px; padding:10px 12px; box-shadow:0 2px 10px rgba(44,38,32,.12), inset 0 0 0 1px rgba(255,255,255,.35); }
  .realm-row { display:flex; justify-content:space-between; align-items:baseline; }
  .realm-name { font-family:"STXingkai","华文行楷","Xingkai SC","STKaiti","KaiTi",cursive; font-size:36px; font-weight:700; color:var(--gold); letter-spacing:3px; text-shadow:0 1px 0 rgba(255,255,255,.4); }
  .map-name { font-size:13px; color:var(--sub); }
  .attr-name { font-family:"STKaiti","KaiTi","楷体","Kaiti SC",serif; font-size:16px; font-weight:700; color:var(--ink2); }
  .sub-info { font-family:"Songti SC","SimSun","宋体",serif; font-size:12px; color:var(--sub); }
  .bar { height:10px; border-radius:6px; background:var(--panel2); overflow:hidden; margin-top:6px; border:1px solid var(--line); box-shadow:inset 0 1px 2px rgba(44,38,32,.15); }
  .bar > i { display:block; height:100%; transition:width .35s ease; }
  .exp-fill { background:linear-gradient(90deg,var(--gold),var(--gold-l)); box-shadow:0 0 8px rgba(184,134,11,.5); }
  .hp-fill { background:linear-gradient(90deg,var(--vermilion-d),var(--vermilion)); box-shadow:0 0 8px rgba(178,58,46,.5); }
  .gfill { background:linear-gradient(90deg,#7a4b9e,#b07bc0); }
  .bar-label { font-size:11px; color:var(--sub); margin-top:4px; display:flex; justify-content:space-between; }
  #app > * { position:relative; z-index:1; }
  #app::before, #app::after { content:''; position:absolute; left:0; top:0; right:0; bottom:0; pointer-events:none; z-index:0; }
   #app::before { content:""; position:absolute; inset:0; pointer-events:none; z-index:0; background:radial-gradient(circle at 16% 12%, rgba(179,64,47,.07), transparent 42%), radial-gradient(circle at 86% 90%, rgba(63,125,90,.07), transparent 46%), url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27140%27 height=%27140%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.85%27 numOctaves=%272%27 stitchTiles=%27stitch%27/%3E%3C/filter%3E%3Crect width=%27140%27 height=%27140%27 filter=%27url(%23n)%27 opacity=%270.05%27/%3E%3C/svg%3E"); background-size:auto,auto,140px 140px; opacity:.6; mix-blend-mode:multiply; }
   #app::after { content:""; position:absolute; inset:0; pointer-events:none; z-index:0; background:radial-gradient(ellipse at 50% 0%, rgba(169,128,31,.12), transparent 55%), radial-gradient(ellipse at 50% 100%, rgba(44,38,32,.20), transparent 62%); opacity:.7; -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 50%,transparent 92%); mask-image:linear-gradient(180deg,#000 0%,#000 50%,transparent 92%); }
  .stats { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:8px; }
  .collapsed { display:none; }
  /* ---- 三层级面板：顶栏极简 + 底坞图标功能 ---- */
  #topBar { display:flex; align-items:center; justify-content:space-between; gap:8px; background:linear-gradient(180deg,var(--panel),var(--paper2)); border:1px solid var(--line); border-radius:12px; padding:7px 12px; box-shadow:0 2px 10px rgba(44,38,32,.12); flex:0 0 auto; }
  #topInfo { display:flex; align-items:center; gap:6px; flex:1; min-width:0; overflow:hidden; white-space:nowrap; font-size:12px; color:var(--ink2); }
  #topInfo .ti-realm { font-family:"STXingkai","华文行楷","Xingkai SC","STKaiti",cursive; font-size:17px; font-weight:700; color:var(--vermilion); letter-spacing:1px; flex:0 0 auto; text-shadow:0 0 1px rgba(143,44,34,.35); }
  #topInfo .ti-sep { color:var(--sub); flex:0 0 auto; }
  #topInfo span:not(.ti-realm):not(.ti-sep) { overflow:hidden; text-overflow:ellipsis; }
  .top-right { display:flex; align-items:center; gap:8px; flex:0 0 auto; }
  .stone-top { font-size:12px; color:var(--ink2); white-space:nowrap; }
  .stone-top b { color:var(--gold); }
  #detailToggle { font-size:12px; padding:4px 10px; border-radius:8px; border:1px solid var(--line); background:var(--panel2); color:var(--sub); font-family:inherit; cursor:pointer; min-height:0; flex:0 0 auto; }
  #detailBox.collapsed { display:none; }
  #foeBar { flex:0 0 auto; margin-top:6px; }
  #foeBar:empty { display:none; }
  #dock { display:flex; flex-direction:column; gap:6px; flex:0 0 auto; }
  .dock-top { display:flex; align-items:center; gap:8px; }
  .dock-top .speed-bar { flex:1 1 auto; }
  #dockBtns { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
  #dockBtns .btn { min-height:40px; font-size:12px; }
  #dock #bottomBar { display:flex; align-items:center; justify-content:flex-end; gap:10px; border:none; box-shadow:none; padding:4px 8px; background:transparent; font-size:12px; flex:0 0 auto; }
  #bottomBar b { color:var(--gold); }
  .stat { background:var(--panel2); border:1px solid var(--line); border-radius:8px; padding:6px 4px; text-align:center; box-shadow:inset 0 0 0 1px rgba(255,255,255,.3); }
  .stat b { display:block; font-size:15px; font-weight:700; color:var(--ink2); }
  .stat span { font-size:11px; color:var(--sub); }
  .kill-row { font-size:12px; color:var(--sub); margin-top:8px; display:flex; justify-content:space-between; align-items:center; }
  .reward-row { font-size:12px; color:var(--gold); margin-top:6px; display:flex; gap:14px; }
  #log { flex:1; background:linear-gradient(180deg,var(--panel),var(--paper2)); border:1px solid var(--line); border-radius:12px; padding:8px 10px; overflow-y:auto; line-height:1.6; font-size:13px; box-shadow:inset 0 2px 8px rgba(44,38,32,.08); -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
  .log-tabs { display:flex; gap:6px; }
  .log-tabs .tab { flex:0 0 auto; padding:4px 14px; border-radius:8px; border:1px solid var(--line); background:var(--panel2); font-size:13px; cursor:pointer; color:var(--sub); }
  .log-tabs .tab.on { background:linear-gradient(135deg,var(--vermilion-d),var(--vermilion)); color:#f6ecd8; border:none; }
  #log .ln-combat { display:none; }
  #log.show-combat .ln-combat { display:block; }
  #log.show-combat .ln-main { display:none; }
  #log .ln { margin:2px 0; word-break:break-all; animation:lnIn .25s ease; }
  #log .t { color:var(--sub); } #log .g { color:var(--gold); } #log .r { color:var(--vermilion); }
  #log .b { color:#2f6f9f; } #log .p { color:#7a4b9e; } #log .o { color:var(--q4); font-weight:700; }
  #controls { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
  #mtnTop { flex:0 0 auto; height:14px; }
  .btn { position:relative; overflow:hidden; min-height:52px; border-radius:12px; font-size:14px; font-weight:600; color:var(--ink);
    background:linear-gradient(180deg,var(--panel),var(--paper2)); border:1px solid var(--line); cursor:pointer; transition:transform 0.08s, box-shadow 0.08s; will-change:transform; box-shadow:0 2px 6px rgba(44,38,32,.12); font-family:inherit; }
  .btn:active { transform:scale(.96); box-shadow:0 1px 3px rgba(44,38,32,.2); }
  .btn::after { content:''; position:absolute; left:50%; top:50%; width:6px; height:6px; background:rgba(178,58,46,.35); border-radius:50%; transform:translate(-50%,-50%) scale(0); opacity:0; }
  .btn:active::after { animation:ripple .5s ease-out; }
  .btn.primary { background:linear-gradient(135deg,var(--vermilion-d),var(--vermilion)); color:#f6ecd8; border:none; box-shadow:0 3px 10px rgba(178,58,46,.35); }
  .btn.boss { background:linear-gradient(135deg,var(--gold),var(--gold-l)); color:#3a2a06; border:none; box-shadow:0 3px 10px rgba(184,134,11,.35); }
  .btn:disabled { opacity:.5; }
  button { font-size:14px; min-height:52px; }
  @media (max-width:520px){ html,body{font-size:15px;} .btn,.tab,.card .acts button{min-height:52px;} }
  .badge { display:inline-block; min-width:18px; padding:0 5px; border-radius:9px; background:var(--vermilion); color:#f6ecd8; font-size:11px; font-weight:700; margin-left:4px; }
  .modal { position:fixed; inset:0; background:rgba(21,17,12,.6); backdrop-filter:blur(2px); display:none; align-items:flex-end; justify-content:center; z-index:50; }
  .modal.show { display:flex; }
  .sheet { width:100%; max-width:480px; max-height:86%; background:linear-gradient(180deg,var(--panel),var(--paper2)); border-radius:16px 16px 0 0; border:1px solid var(--line); border-bottom:none; display:flex; flex-direction:column; animation:rise .28s cubic-bezier(.2,.8,.3,1); box-shadow:0 -8px 30px rgba(44,38,32,.35); }
  @keyframes rise { from{transform:translateY(40px);opacity:0;} to{transform:translateY(0);opacity:1;} }
  .sheet h3 { padding:14px; font-size:17px; color:var(--ink); border-bottom:2px solid var(--vermilion); display:flex; justify-content:space-between; align-items:center; letter-spacing:1px; flex:0 0 auto; }
  .sheet .close { background:none; border:none; color:var(--sub); font-size:24px; min-width:40px; min-height:40px; }
  .sheet .body { padding:12px; overflow-y:auto; flex:1 1 auto; min-height:0; overscroll-behavior:contain; }
  .tabs { display:flex; gap:6px; padding:0 12px; }
  .tab { flex:1; min-height:40px; background:var(--panel2); border:1px solid var(--line); color:var(--sub); border-radius:8px 8px 0 0; font-family:inherit; }
  .tab.on { color:var(--vermilion); border-color:var(--vermilion); background:var(--panel); font-weight:700; }
  .card { background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:8px; margin-bottom:6px; box-shadow:0 1px 4px rgba(44,38,32,.08), inset 0 0 0 1px rgba(255,255,255,.35); }
  .card .top { display:flex; justify-content:space-between; align-items:center; }
  .card .nm { font-weight:700; color:var(--ink); font-size:13px; }
  .card .meta { font-size:10.5px; color:var(--sub); margin-top:3px; line-height:1.45; }
  .card .acts { display:flex; gap:5px; margin-top:6px; }
  .card .acts button { flex:1; min-height:32px; font-size:12px; border-radius:8px; border:1px solid var(--line); background:var(--panel); color:var(--ink); font-family:inherit; }
  .card .acts button.go { background:linear-gradient(135deg,var(--vermilion-d),var(--vermilion)); color:#f6ecd8; border:none; font-weight:700; }
  .pet-card { display:flex; gap:10px; align-items:flex-start; }
  .pet-ava { width:54px; height:54px; border-radius:10px; border:2px solid var(--line); object-fit:cover; flex:0 0 auto; background:var(--paper2); box-shadow:0 1px 3px rgba(44,38,32,.15); }
  .pet-info { flex:1; min-width:0; }
   .ink-divider { height:14px; flex:0 0 auto; margin:2px 0; background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27240%27 height=%2714%27%3E%3Cpath d=%27M0 8 Q 30 2 60 8 T 120 8 T 180 8 T 240 8%27 stroke=%27%23bdae8e%27 stroke-width=%271.4%27 fill=%27none%27 opacity=%270.5%27/%3E%3C/svg%3E") repeat-x center/240px 14px; opacity:.6; }
  .equip-grid { display:grid; grid-template-columns:1fr; gap:6px; margin-bottom:8px; }
  .equip-slot { aspect-ratio:1; border:1px dashed var(--line); border-radius:10px; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:11px; color:var(--sub); background:var(--panel); }
  .equip-slot b { color:var(--ink); font-size:12px; }
  /* 背包已装备格：横向紧凑，压扁高度（不波及功法弹窗） */
  .equip-grid .equip-slot { aspect-ratio:auto; border-radius:10px; padding:7px 10px; flex-direction:row; align-items:center; gap:10px; font-size:11px; }
  .equip-grid .equip-slot .slot-ava { width:40px; height:40px; margin:0; flex:0 0 auto; border-radius:8px; }
  .equip-grid .equip-slot .es-l { flex:1; min-width:0; display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; gap:3px 8px; }
  .equip-grid .equip-slot b { font-size:13px; }
  .equip-grid .equip-slot .es-slot { display:inline-block; opacity:.7; font-size:10px; background:var(--paper2); padding:1px 6px; border-radius:6px; }
  .equip-grid .equip-slot button { flex:0 0 auto; min-width:70px; align-self:stretch; padding:0 12px; font-size:12px; border-radius:8px; border:1px solid var(--line); background:var(--panel); color:var(--ink); font-family:inherit; cursor:pointer; }
  .equip-grid .equip-slot .theme-tag { align-self:center; }
  .toast { position:fixed; left:50%; top:18%; transform:translateX(-50%); background:rgba(44,38,32,.92); color:#f6ecd8; padding:10px 16px; border-radius:20px; font-size:13px; z-index:99; opacity:0; transition:.3s; pointer-events:none; border:1px solid var(--line); box-shadow:0 4px 16px rgba(44,38,32,.4); }
  .toast.show { opacity:1; }
  .q0{color:var(--q0);} .q1{color:var(--q1);} .q2{color:var(--q2);} .q3{color:var(--q3);} .q4{color:var(--q4);}
  .ach-done{color:var(--jade);} .ach-todo{color:var(--sub);}
  .theme-tag{font-size:10px;padding:1px 6px;border-radius:6px;background:var(--ink2);color:var(--gold-l);margin-left:4px;}
  .pas{font-size:11px;color:var(--jade);margin-top:2px;}
  /* 开始界面（水墨） */
  #startScreen { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; overflow:hidden;
    background:radial-gradient(circle at 50% 38%, #2a2018 0%, var(--bg) 70%); }
  #startScreen.hide { display:none; }
  #startScreen .enso { position:absolute; top:50%; left:50%; width:280px; height:280px; transform:translate(-50%,-58%);
    border:14px solid rgba(232,225,205,.10); border-radius:50%; box-shadow:0 0 60px rgba(178,58,46,.12) inset; animation:spin 40s linear infinite; }
  #startScreen .enso::after { content:''; position:absolute; right:6%; top:2%; width:36px; height:36px; border:14px solid rgba(232,225,205,.10); border-radius:50%; }
  #startScreen .petal { position:absolute; top:-20px; width:9px; height:9px; background:var(--vermilion); border-radius:60% 0 60% 0; opacity:.5; animation:fall linear infinite; }
  .start-inner { position:relative; z-index:2; text-align:center; padding:24px; animation:inkIn .9s ease; }
  .start-inner h1 { font-size:38px; color:var(--gold-l); letter-spacing:10px; text-shadow:0 2px 18px rgba(184,134,11,.5); font-family:"STKaiti","KaiTi","Kaiti SC",serif; }
  .start-inner .seal { display:inline-block; margin-top:14px; padding:6px 10px; border:2px solid var(--vermilion); color:var(--vermilion); border-radius:8px; font-size:13px; letter-spacing:3px; transform:rotate(-4deg); box-shadow:0 0 0 2px rgba(178,58,46,.15); }
  .start-inner .sub { color:var(--paper2); margin-top:10px; font-size:14px; letter-spacing:3px; }
  .start-inner #startInfo { color:var(--paper); margin:26px 0 18px; font-size:13px; line-height:1.9; }
  .start-inner .btn { width:82%; max-width:300px; margin:8px auto; display:block; font-size:16px; }
  .start-inner .btn.primary { min-height:54px; }
  /* 当前对手血条 */
  .foe { margin-top:8px; background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:8px 10px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.3); }
  .foe .ft { display:flex; justify-content:space-between; font-size:13px; align-items:center; }
  .foe .ft b { color:var(--vermilion); }
  .foe .tag { font-size:11px; padding:1px 7px; border-radius:6px; margin-left:6px; }
  .foe .tag.elite { background:rgba(194,112,26,.18); color:var(--q4); border:1px solid var(--q4); }
  .foe .tag.norm { background:var(--panel); color:var(--sub); border:1px solid var(--line); }
  .foe .tag.boss { background:linear-gradient(135deg,var(--vermilion-d),var(--vermilion)); color:#f6ecd8; }
  /* 装备战力徽标与对比 */
  .power-badge { display:inline-block; font-size:11px; color:#3a2a06; background:linear-gradient(135deg,var(--gold),var(--gold-l)); border-radius:8px; padding:0 6px; font-weight:700; margin-left:4px; box-shadow:0 1px 3px rgba(184,134,11,.4); }
  .pw { display:inline-block; font-size:11px; font-weight:700; margin-left:4px; }
  .cmp { font-size:11px; margin-top:4px; line-height:1.5; }
  .cmp.up { color:var(--jade); } .cmp.down { color:var(--vermilion); }
  /* 突破契机（紧凑单行条，不挤占战斗区） */
  .break-banner { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; padding:6px 10px; border:1px solid var(--vermilion); border-radius:10px; background:linear-gradient(135deg,rgba(178,58,46,.10),rgba(184,134,11,.10)); animation:glowPulse 1.6s ease-in-out infinite; }
  .break-banner .bt { font-size:12px; font-weight:600; color:var(--vermilion); letter-spacing:.5px; white-space:nowrap; }
  .break-banner .bt b { color:var(--jade); font-size:13px; }
  .break-banner .btn.sm { flex:0 0 auto; min-height:0; padding:5px 12px; font-size:12px; }
  .break-banner #btnBreak { width:auto; }
  .bb-sub { margin-top:6px; padding:6px 10px; font-size:12px; color:var(--vermilion); background:rgba(178,58,46,.08); border:1px dashed var(--vermilion); border-radius:8px; line-height:1.6; }

  /* ===== 特效层 ===== */
  @keyframes lnIn { from{opacity:0; transform:translateX(-6px);} to{opacity:1; transform:translateX(0);} }
  @keyframes ripple { from{transform:translate(-50%,-50%) scale(0); opacity:.5;} to{transform:translate(-50%,-50%) scale(22); opacity:0;} }
  @keyframes spin { from{transform:translate(-50%,-58%) rotate(0);} to{transform:translate(-50%,-58%) rotate(360deg);} }
  @keyframes inkIn { from{opacity:0; filter:blur(8px); transform:scale(.96);} to{opacity:1; filter:blur(0); transform:scale(1);} }
  @keyframes fall { 0%{transform:translateY(0) rotate(0);} 100%{transform:translateY(105vh) rotate(360deg);} }
  @keyframes glowPulse { 0%,100%{box-shadow:0 0 0 rgba(178,58,46,0);} 50%{box-shadow:0 0 16px rgba(178,58,46,.35);} }
  @keyframes floatUp { 0%{opacity:0; transform:translate(-50%,0) scale(.8);} 15%{opacity:1;} 100%{opacity:0; transform:translate(-50%,-70px) scale(1.1);} }
  @keyframes inkBurst { 0%{opacity:0; transform:scale(.2);} 20%{opacity:.9;} 100%{opacity:0; transform:scale(2.4);} }
  @keyframes shake { 0%,100%{transform:translate(0,0);} 20%{transform:translate(-6px,3px);} 40%{transform:translate(5px,-3px);} 60%{transform:translate(-4px,2px);} 80%{transform:translate(3px,-2px);} }

  #fxLayer { position:fixed; inset:0; pointer-events:none; z-index:150; }
  .fx-float { position:absolute; left:50%; top:42%; font-size:22px; font-weight:700; letter-spacing:1px;
    text-shadow:0 2px 8px rgba(0,0,0,.4); animation:floatUp 1.0s ease-out forwards; white-space:nowrap; will-change:transform,opacity; }
  .fx-float.gold { color:var(--gold-l); }
  .fx-float.red { color:var(--vermilion); }
  .fx-float.jade { color:var(--jade); }

  #fxBurst { position:fixed; inset:0; pointer-events:none; z-index:160; display:flex; align-items:center; justify-content:center; }
  #fxBurst .ring { width:160px; height:160px; border-radius:50%; will-change:transform,opacity; }
  #fxBurst.gold .ring { background:radial-gradient(circle, rgba(212,164,55,.65) 0%, rgba(184,134,11,.25) 40%, transparent 70%); animation:inkBurst .6s ease-out forwards; }
  #fxBurst.red .ring { background:radial-gradient(circle, rgba(178,58,46,.6) 0%, rgba(140,44,34,.22) 40%, transparent 70%); animation:inkBurst .6s ease-out forwards; }

  #app.shake { animation:shake .5s ease; }
  .ink-char { position:absolute; left:50%; top:38%; transform:translate(-50%,-50%); font-family:"STKaiti","KaiTi","Kaiti SC",serif; font-size:108px; font-weight:700; pointer-events:none; opacity:0; text-shadow:0 0 34px currentColor; will-change:transform,opacity; }
  .ink-char.gold { color:var(--gold-l); }
  .ink-char.red { color:var(--vermilion); filter:drop-shadow(0 0 18px rgba(178,58,46,.55)); }
  .ink-char.jade { color:var(--jade); }
  .ink-burst-red { position:absolute; left:50%; top:38%; width:170px; height:170px; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle, rgba(178,58,46,.6) 0%, rgba(140,44,34,.22) 40%, transparent 70%); animation:inkBurst .6s ease-out forwards; pointer-events:none; }
  @keyframes inkChar { 0%{opacity:0; transform:translate(-50%,-50%) scale(.3); filter:blur(12px);} 22%{opacity:1; filter:blur(0);} 100%{opacity:0; transform:translate(-50%,-50%) scale(2.8) rotate(6deg); filter:blur(3px);} }
  /* 卷轴弹窗（奇遇/成就的仪式感演出） */
  #modalScroll .sheet { position:relative; max-width:420px; border-radius:14px; }
  #modalScroll .sheet::before, #modalScroll .sheet::after { content:''; position:absolute; left:-5px; right:-5px; height:9px; background:linear-gradient(180deg,var(--gold-l),var(--gold)); border-radius:6px; box-shadow:0 1px 4px rgba(44,38,32,.35); }
  #modalScroll .sheet::before { top:-4px; } #modalScroll .sheet::after { bottom:-4px; }
  #modalScroll .sheet h3 { justify-content:center; border-bottom:2px solid var(--vermilion); letter-spacing:3px; }
  #modalScroll .scroll-body { text-align:center; font-size:15px; line-height:1.95; padding:20px 18px; color:var(--ink); }
  #modalScroll .acts { padding:0 12px 14px; }
  /* 留白与题跋字韵 */
  .lot-result { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:12px; }
  .lot-item { display:inline-block; padding:7px 11px; border:1px solid var(--line); border-radius:10px; background:var(--panel2); font-weight:600; font-size:13px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.3); }
  .card .meta { letter-spacing:.5px; }
  .card .nm { letter-spacing:1px; }
  .speed-bar { display:flex; align-items:center; gap:4px; padding:3px 6px; background:linear-gradient(180deg,var(--panel),var(--paper2)); border:1px solid var(--line); border-radius:8px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.3), 0 1px 3px rgba(44,38,32,.08); }
  .spd-label { font-size:10px; color:var(--sub); margin-right:1px; white-space:nowrap; }
  .spd { flex:1; min-height:22px; border-radius:6px; border:1px solid var(--line); background:var(--panel2); color:var(--ink2); font-family:inherit; font-size:12px; font-weight:600; cursor:pointer; transition:.15s; }
  .spd.on { background:linear-gradient(135deg,var(--vermilion-d),var(--vermilion)); color:#f6ecd8; border:none; box-shadow:0 2px 8px rgba(178,58,46,.3); }
  .spd:active { transform:scale(.95); }

  /* v2 agnes 水墨素材样式 */
  .item-ava { float:left; width:46px; height:46px; border-radius:8px; margin:1px 8px 2px 0; border:1px solid var(--line); object-fit:cover; background:var(--paper2); box-shadow:0 1px 3px rgba(44,38,32,.15); }
  .slot-ava { width:30px; height:30px; border-radius:6px; margin-bottom:3px; border:1px solid var(--line); object-fit:cover; }
  .gong-slot-ava { width:26px; height:26px; border-radius:6px; margin-right:6px; border:1px solid var(--line); object-fit:cover; flex:0 0 auto; }
  .dock-ico { width:18px; height:18px; object-fit:contain; vertical-align:middle; margin-right:2px; }
  .start-hero { display:block; width:148px; height:148px; object-fit:contain; margin:0 auto 8px; filter:drop-shadow(0 4px 12px rgba(0,0,0,.45)); }
  #startScreen { background:radial-gradient(circle at 50% 36%, rgba(40,30,20,.25), rgba(12,10,7,.92)); }
/* ===== Boss 独立战斗层 ===== */
.overlay{position:fixed;inset:0;background:rgba(8,6,4,.84);display:flex;align-items:center;justify-content:center;z-index:1300;}
.overlay.hidden{display:none;}
.boss-card{width:min(440px,92vw);background:linear-gradient(180deg,#1d150d,#0d0906);border:2px solid var(--gold);border-radius:14px;padding:18px;box-shadow:0 0 40px rgba(0,0,0,.7),0 0 20px rgba(169,128,31,.35);text-align:center;color:#f3e9d2;}
.boss-ava{width:200px;height:200px;margin:0 auto 10px;border-radius:12px;overflow:hidden;border:2px solid var(--vermilion);background:#0b0805;box-shadow:0 0 18px rgba(179,64,47,.4);}
.boss-ava img{width:100%;height:100%;object-fit:cover;display:block;}
.boss-name{font:700 20px/1.4 "PingFang SC","Microsoft YaHei",serif;color:var(--gold);margin-bottom:12px;}
.bar-row{display:flex;align-items:center;gap:8px;margin:6px 0;}
.bl{width:36px;text-align:right;font-size:13px;color:#d8c9a8;}
.bar.boss,.bar.you{flex:1;height:16px;border-radius:8px;background:#2a1f15;overflow:hidden;border:1px solid #4a3a26;}
.bar.boss i{display:block;height:100%;background:linear-gradient(90deg,#b3261e,#e0533f);transition:width .15s;}
.bar.you i{display:block;height:100%;background:linear-gradient(90deg,#2e7d32,#4caf50);transition:width .15s;}
.boss-round{font-size:13px;color:#cdbf9c;margin:10px 0;}
.boss-log{height:128px;overflow-y:auto;background:#0b0805;border:1px solid #3a2c1d;border-radius:8px;padding:8px;text-align:left;font-size:12px;color:#cdbf9c;margin-bottom:10px;}
.boss-log .ln{margin:2px 0;line-height:1.5;}
.boss-retreat{width:100%;}
.btn-mini{font-size:12px;padding:3px 10px;margin-left:8px;border-radius:6px;border:1px solid var(--gold);background:rgba(169,128,31,.18);color:var(--gold);cursor:pointer;}
.btn-mini:hover{background:rgba(169,128,31,.34);}
.filter-bar{display:flex;flex-wrap:wrap;gap:6px;padding:8px 0 6px;margin-bottom:4px;border-bottom:1px solid rgba(169,128,31,.25);}
.filter-tab{font-size:12px;padding:3px 11px;border:1px solid var(--gold);border-radius:13px;cursor:pointer;background:rgba(169,128,31,.12);color:var(--gold);white-space:nowrap;}
.filter-tab:hover{background:rgba(169,128,31,.3);}
.filter-tab.on{background:linear-gradient(135deg,var(--gold),var(--gold-l));color:#1a1207;font-weight:700;border-color:var(--gold-l);}

/* ===== 技能图标 / 装备详情 / Boss面板 / 系统面板 ===== */
.skill-ava{width:40px;height:40px;border-radius:8px;float:left;margin:1px 8px 2px 0;border:1px solid var(--line);object-fit:cover;background:var(--paper2);}
.equip-detail{padding:6px;}
.equip-big{width:72px;height:72px;border-radius:10px;float:left;margin:0 10px 6px 0;border:1px solid var(--line);object-fit:cover;}
.ed-top{font-weight:700;margin-bottom:6px;}
.boss-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
.boss-cell{width:calc(33.3% - 6px);border:1px solid var(--line);border-radius:10px;padding:6px;text-align:center;cursor:pointer;background:var(--panel2);}
.boss-cell img{width:100%;height:84px;object-fit:cover;border-radius:6px;}
.boss-cell span{display:block;font-size:12px;margin-top:3px;color:var(--ink);}
.boss-cell.disabled{opacity:.45;cursor:not-allowed;}
.sys-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px;}
.sys-btn{padding:18px 10px;border:1px solid var(--gold);border-radius:10px;background:rgba(169,128,31,.16);color:var(--gold);font-size:15px;font-weight:700;cursor:pointer;}
.sys-btn:hover{background:rgba(169,128,31,.34);}
.sys-btn.danger{border-color:var(--vermilion);color:var(--vermilion);background:rgba(179,64,47,.16);}
  /* ============================================================
     v3 美术 / UI 综合提质（1234 全做）—— 纯增量，叠加强化，不破坏既有布局
     ============================================================ */

  /* —— 1) 面板质感：描边 / 内高光 / 分层阴影 / 轻毛玻璃 —— */
  .sheet{
    border-radius:18px 18px 0 0;
    border-top:2px solid var(--gold-l);
    background:linear-gradient(180deg,#fbf6ec,var(--paper2));
    box-shadow:0 -10px 40px rgba(44,38,32,.45),
               inset 0 1px 0 rgba(255,255,255,.55),
               inset 0 0 0 1px rgba(169,128,31,.18);
  }
  .sheet h3{ background:linear-gradient(180deg,rgba(169,128,31,.10),transparent); }
  .card{
    border:1px solid var(--line);
    border-left:3px solid var(--gold);
    box-shadow:0 2px 8px rgba(44,38,32,.10), inset 0 0 0 1px rgba(255,255,255,.35);
    transition:transform .18s ease, box-shadow .18s ease;
  }
  .card:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(44,38,32,.18); }
  #detailBox{
    box-shadow:0 2px 10px rgba(44,38,32,.12),
               inset 0 0 0 1px rgba(255,255,255,.35),
               inset 3px 0 0 rgba(169,128,31,.30);
  }
  #topBar{
    border-radius:14px;
    border-top:1px solid rgba(169,128,31,.35);
    box-shadow:0 3px 14px rgba(44,38,32,.16), inset 0 1px 0 rgba(255,255,255,.5);
  }
  .foe{
    border-left:3px solid var(--vermilion);
    box-shadow:0 2px 8px rgba(44,38,32,.12), inset 0 0 0 1px rgba(255,255,255,.3);
  }
  .lot-item{ border-radius:12px; background:linear-gradient(180deg,var(--panel),var(--panel2)); }
  .boss-cell{ border:1px solid var(--line); border-radius:12px; background:linear-gradient(180deg,var(--panel),var(--panel2)); transition:transform .15s ease, box-shadow .15s ease; }
  .boss-cell:not(.disabled):hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(44,38,32,.18); }

  /* —— 2) 按钮动效与按压反馈 —— */
  .btn{
    transition:transform .12s cubic-bezier(.2,.8,.3,1), box-shadow .12s ease, filter .12s ease;
    box-shadow:0 3px 8px rgba(44,38,32,.18), inset 0 1px 0 rgba(255,255,255,.45);
  }
  .btn:hover{ transform:translateY(-1px); filter:brightness(1.04); }
  .btn:active{ transform:scale(.92); box-shadow:0 1px 3px rgba(44,38,32,.25), inset 0 2px 6px rgba(0,0,0,.18); transition-duration:.06s; }
  .btn.primary{ box-shadow:0 4px 14px rgba(178,58,46,.40), inset 0 1px 0 rgba(255,255,255,.35); }
  .btn.boss{ box-shadow:0 4px 14px rgba(184,134,11,.40), inset 0 1px 0 rgba(255,255,255,.40); }
  .btn::before{
    content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
    transform:skewX(-18deg); transition:left .55s ease; pointer-events:none;
  }
  .btn:hover::before{ left:130%; }
  .dock-ico{ filter:drop-shadow(0 1px 1px rgba(0,0,0,.28)); transition:transform .15s ease; }
  .btn:active .dock-ico{ transform:scale(.84); }
  .badge{ box-shadow:0 0 0 1px rgba(255,255,255,.25), 0 1px 3px rgba(178,58,46,.4); }

  /* —— 3) 进度条流光 / 突破横幅强化 —— */
  .bar > i{ position:relative; }
  .exp-fill::after, .hp-fill::after{
    content:''; position:absolute; inset:0;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
    background-size:60px 100%;
    animation:sheen 1.8s linear infinite;
  }
  @keyframes sheen{ 0%{background-position:-60px 0;} 100%{background-position:240px 0;} }
  .break-banner{
    border-radius:12px; border-left:3px solid var(--gold);
    box-shadow:0 0 0 1px rgba(169,128,31,.40), 0 0 18px rgba(184,134,11,.22);
  }

  /* —— 4) 卷轴弹窗更精致 + 朱砂印 —— */
  #modalScroll .sheet{ border-radius:14px; border-top:2px solid var(--vermilion); }
  #modalScroll .sheet h3{ position:relative; background:linear-gradient(180deg,rgba(178,58,46,.07),transparent); }
  #modalScroll .sheet h3::after{
    content:'印'; position:absolute; right:10px; top:50%;
    transform:translateY(-50%) rotate(-7deg);
    width:26px; height:26px; line-height:24px; text-align:center;
    font-size:12px; font-weight:700; color:#f6ecd8; background:var(--vermilion);
    border-radius:5px; box-shadow:0 0 0 2px rgba(178,58,46,.25), inset 0 0 0 1px rgba(255,255,255,.3);
  }
  #modalScroll .scroll-body{ background:linear-gradient(180deg,rgba(255,255,255,.30),transparent); border-radius:0 0 12px 12px; }

  /* —— 5) 四角云纹（modal / boss 覆层） —— */
  .modal::before, .modal::after, .overlay::before, .overlay::after{
    content:''; position:fixed; width:48px; height:48px; pointer-events:none; z-index:51;
    opacity:.42; background-size:contain; background-repeat:no-repeat;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 2 h6 a4 4 0 0 1 0 8 H2 Z' fill='none' stroke='%23a9801f' stroke-width='1.4'/%3E%3Cpath d='M2 2 v6 a4 4 0 0 0 8 0 V2' fill='none' stroke='%23a9801f' stroke-width='1.4'/%3E%3C/svg%3E");
  }
  .modal::before, .overlay::before{ left:12px; top:12px; }
  .modal::after, .overlay::after{ right:12px; bottom:12px; transform:scale(-1,-1); }

  /* —— 6) 图标 / 插画强化（境界名 / Boss 墨迹 / 资源芯片） —— */
  .realm-name{ text-shadow:0 0 1px rgba(143,44,34,.35), 0 1px 8px rgba(184,134,11,.30); }
  .stone-top{
    display:inline-flex; align-items:center; gap:3px; padding:2px 9px;
    background:var(--panel2); border:1px solid var(--line); border-radius:20px;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);
  }
  #bottomBar{ gap:6px; }
  #bottomBar span{
    display:inline-flex; align-items:center; gap:3px; padding:2px 9px;
    background:var(--panel2); border:1px solid var(--line); border-radius:20px;
    font-size:12px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);
  }
  .boss-card{
    border:2px solid var(--gold);
    box-shadow:0 0 50px rgba(0,0,0,.7), 0 0 26px rgba(169,128,31,.45), inset 0 0 0 1px rgba(255,255,255,.06);
  }
  .boss-ava{
    box-shadow:0 0 16px rgba(179,64,47,.40), 0 0 0 1px var(--vermilion);
    animation:bossGlow 2.4s ease-in-out infinite;
  }
  @keyframes bossGlow{
    0%,100%{ box-shadow:0 0 16px rgba(179,64,47,.35), 0 0 0 1px var(--vermilion); }
    50%{ box-shadow:0 0 28px rgba(179,64,47,.60), 0 0 0 2px var(--vermilion); }
  }
  .boss-name{ text-shadow:0 0 12px rgba(184,134,11,.5); letter-spacing:2px; }

  /* —— 7) 移动端 / 可读性再优化 —— */
  @media (max-width:520px){
    .dock-ico{ width:20px; height:20px; }
    .realm-name{ font-size:32px; }
    #topInfo{ font-size:12px; }
    .card .acts button{ min-height:34px; }
  }
  @media (max-width:360px){
    body{ font-size:14px; }
    .start-inner h1{ font-size:32px; letter-spacing:6px; }
    .btn{ font-size:13px; }
    .realm-name{ font-size:28px; }
  }

  /* —— 8) 打击感：战斗闪光 / 墨迹爆发 / 大字 / 数字跳动 / 震屏 —— */
  #fxFlash{ position:fixed; inset:0; z-index:155; pointer-events:none; opacity:0; }
  #fxFlash.on{ animation:flashHit .22s ease-out; }
  @keyframes flashHit{
    0%{ opacity:0; }
    14%{ opacity:.6; background:radial-gradient(circle at 50% 45%, rgba(255,246,222,.55), rgba(179,64,47,.45)); }
    100%{ opacity:0; }
  }
  #fxBurst .ring{ width:200px; height:200px; }
  #fxBurst .ring::after{
    content:''; position:absolute; inset:0; border-radius:50%;
    animation:inkBurst .6s ease-out forwards;
  }
  #fxBurst.gold .ring::after{ background:radial-gradient(circle, rgba(212,164,55,.5) 0%, transparent 65%); }
  #fxBurst.red .ring::after{ background:radial-gradient(circle, rgba(178,58,46,.5) 0%, transparent 65%); }
  .ink-char{ font:800 64px/1 "STXingkai","华文行楷","STKaiti",serif; text-shadow:0 0 24px rgba(184,134,11,.6), 0 2px 0 rgba(0,0,0,.25); }
  .ink-char.red{ color:var(--vermilion); text-shadow:0 0 24px rgba(178,58,46,.6); }
  #fxLayer .fx-float{
    animation:floatBump 1.05s cubic-bezier(.2,.8,.3,1) forwards;
    font-weight:800; letter-spacing:1px;
    text-shadow:0 2px 10px rgba(0,0,0,.45), 0 0 14px rgba(184,134,11,.3);
  }
  @keyframes floatBump{
    0%{ opacity:0; transform:translate(-50%,0) scale(.6); }
    18%{ opacity:1; transform:translate(-50%,-8px) scale(1.18); }
    35%{ opacity:1; transform:translate(-50%,-14px) scale(1); }
    100%{ opacity:0; transform:translate(-50%,-70px) scale(1.05); }
  }
  @keyframes shake{
    0%,100%{ transform:translateX(0); }
    10%{ transform:translateX(-6px) rotate(-.4deg); }
    25%{ transform:translateX(6px) rotate(.4deg); }
    40%{ transform:translateX(-5px); }
    55%{ transform:translateX(5px); }
    70%{ transform:translateX(-3px); }
    85%{ transform:translateX(3px); }
  }
  .shake{ animation:shake .5s; will-change:transform; }
  /* === 美术增强：微交互与层次（克制增量） === */
  .card{ transition:transform .18s ease, box-shadow .18s ease; }
  .card:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(20,14,8,.30); }
  .btn, .go{ transition:transform .12s ease, box-shadow .18s ease, background .2s ease; }
  .btn:active, .go:active{ transform:scale(.96); }
  #modalMask{ backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); background:rgba(28,22,16,.55); }
  .top .realm-name{ letter-spacing:.5px; }
  .chip{ box-shadow:inset 0 1px 4px rgba(0,0,0,.18), 0 1px 0 rgba(255,255,255,.15); }
  .item-ava, .pet-ava, .skill-ava, .gong-slot-ava, .ava{ background:linear-gradient(135deg,#ece2c8,#ddd0ad); }
  .ink-divider{ filter:drop-shadow(0 1px 0 rgba(255,255,255,.12)); }
  .bar::after{ filter:brightness(1.08); }


/* ===== v9 跃迁：主战场 / 道途 / QoL ===== */
#arena{
  flex:0 0 auto;
  background:linear-gradient(180deg,var(--panel),var(--paper2));
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 12px;
  box-shadow:0 2px 12px rgba(44,38,32,.14), inset 0 0 0 1px rgba(255,255,255,.35), inset 3px 0 0 rgba(169,128,31,.28);
  position:relative;
  overflow:hidden;
  min-height:132px;
}
#arena::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.35;
  background:radial-gradient(ellipse at 50% 40%, rgba(179,64,47,.06), transparent 60%);
}
.arena-row{ display:flex; align-items:stretch; gap:8px; position:relative; z-index:1; }
.arena-side{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.arena-side.you{ text-align:left; }
.arena-side.foe{ text-align:right; }
.arena-mid{ flex:0 0 56px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; }
.arena-vs{
  font-family:"STXingkai","华文行楷","STKaiti",cursive;
  font-size:22px; color:var(--vermilion); font-weight:700;
  text-shadow:0 0 12px rgba(178,58,46,.35);
}
.arena-name{ font-size:13px; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.arena-meta{ font-size:11px; color:var(--sub); }
.arena-bar{ height:12px; border-radius:6px; background:var(--panel2); border:1px solid var(--line); overflow:hidden; box-shadow:inset 0 1px 2px rgba(44,38,32,.12); }
.arena-bar > i{ display:block; height:100%; transition:width .18s ease; position:relative; }
.arena-bar .hp-fill::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  background-size:50px 100%; animation:sheen 1.8s linear infinite;
}
.arena-debuffs{ display:flex; gap:3px; flex-wrap:wrap; min-height:16px; }
.arena-debuffs .db{
  font-size:10px; padding:0 5px; border-radius:6px;
  background:rgba(122,75,158,.12); color:#7a4b9e; border:1px solid rgba(122,75,158,.3);
}
.arena-debuffs .db.bleed{ background:rgba(179,64,47,.12); color:var(--vermilion); border-color:rgba(179,64,47,.35); }
.arena-debuffs .db.frost{ background:rgba(58,90,120,.12); color:#3a5a78; border-color:rgba(58,90,120,.35); }
.arena-diff{
  font-size:10px; padding:1px 7px; border-radius:8px; font-weight:700;
  background:var(--panel2); border:1px solid var(--line); color:var(--ink2);
}
.arena-diff.crush{ color:var(--jade); border-color:var(--jade); }
.arena-diff.adv{ color:#3a5a78; border-color:#3a5a78; }
.arena-diff.even{ color:var(--gold); border-color:var(--gold); }
.arena-diff.dis{ color:var(--q4); border-color:var(--q4); }
.arena-diff.danger{ color:var(--vermilion); border-color:var(--vermilion); }
.arena-feed{
  margin-top:6px; font-size:11px; color:var(--sub); min-height:16px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; position:relative; z-index:1;
}
.arena-feed b{ color:var(--ink2); }
.arena-progress{
  display:flex; gap:8px; margin-top:6px; position:relative; z-index:1;
}
.arena-progress .ap{
  flex:1; font-size:10px; color:var(--sub);
}
.arena-progress .ap .bar{ height:6px; margin-top:2px; }
.arena-progress .ap .bar > i{ background:linear-gradient(90deg,var(--gold),var(--gold-l)); }
.arena-progress .ap.boss-ready .bar > i{ background:linear-gradient(90deg,var(--vermilion-d),var(--vermilion)); }
.arena-empty{ text-align:center; color:var(--sub); font-size:13px; padding:18px 8px; letter-spacing:1px; }

#log{ flex:1; min-height:80px; max-height:none; }
#logTabs{ flex:0 0 auto; }

.btn.ready{
  box-shadow:0 0 0 1px rgba(169,128,31,.5), 0 0 16px rgba(184,134,11,.35), 0 4px 14px rgba(184,134,11,.25);
  animation:glowPulse 1.8s ease-in-out infinite;
}
.milestone{
  font-size:12px; color:var(--ink2); margin-top:6px; padding:5px 8px;
  background:rgba(169,128,31,.08); border:1px dashed var(--line); border-radius:8px;
}
.milestone b{ color:var(--vermilion); }

.quest-card .q-done{ color:var(--jade); }
.quest-card .q-todo{ color:var(--sub); }
.quest-card .q-claim{ background:linear-gradient(135deg,var(--vermilion-d),var(--vermilion)); color:#f6ecd8; border:none; font-weight:700; }

.offline-sum{ text-align:left; line-height:1.8; }
.offline-sum .big{ font-size:22px; font-weight:700; color:var(--gold); }

.set-progress{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; padding:6px; }
.set-pill{
  font-size:11px; padding:3px 8px; border-radius:10px;
  background:var(--panel); border:1px solid var(--line); color:var(--ink2);
}
.set-pill.on{ border-color:var(--gold); color:var(--gold); background:rgba(169,128,31,.12); font-weight:700; }

#dockBtns{ grid-template-columns:repeat(3,1fr); }
#arena .milestone{ margin-top:6px; position:relative; z-index:1; }
#log{ flex:0.85 1 90px; }
@media (max-width:360px){
  .arena-mid{ flex:0 0 42px; }
  .arena-vs{ font-size:18px; }
  #arena{ min-height:118px; padding:8px; }
}

/* 云存档 / 强制登录 */
.cloud-panel{
  margin-bottom:12px; padding:12px; border:1px solid var(--line); border-radius:12px;
  background:linear-gradient(180deg,rgba(169,128,31,.08),var(--panel2));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);
}
.cloud-panel h4{
  margin:0 0 8px; font-size:15px; color:var(--gold); letter-spacing:1px;
  border-bottom:1px solid rgba(169,128,31,.25); padding-bottom:6px;
}
.cloud-panel .cloud-status{ font-size:12px; color:var(--ink2); margin-bottom:8px; line-height:1.5; }
.cloud-panel .cloud-hint{ font-size:11px; color:var(--sub); margin-top:6px; line-height:1.45; }

.sync-chip{
  flex:0 0 auto; max-width:42vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:11px; padding:3px 9px; border-radius:20px; border:1px solid var(--line);
  background:var(--panel2); color:var(--ink2); font-family:inherit; cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);
}
.sync-chip.ok{ border-color:var(--jade); color:var(--jade); }
.sync-chip.syncing{ border-color:var(--gold); color:var(--gold); }
.sync-chip.err{ border-color:var(--vermilion); color:var(--vermilion); }
.sync-chip.offline{ border-color:#6b7280; color:#9ca3af; background:rgba(0,0,0,.06); }
.sync-chip.pending{ border-color:var(--q4); color:var(--q4); }
.sync-chip.guest{ display:none !important; }

/* 登录门：完全盖住游戏，不透顶栏 */
#authGate{
  position:fixed; inset:0; z-index:400; display:flex; align-items:center; justify-content:center;
  overflow:hidden; padding:env(safe-area-inset-top) 12px env(safe-area-inset-bottom);
  background:
    radial-gradient(ellipse at 50% 18%, rgba(169,128,31,.18), transparent 48%),
    radial-gradient(ellipse at 20% 80%, rgba(179,64,47,.12), transparent 42%),
    radial-gradient(ellipse at 80% 70%, rgba(63,125,90,.10), transparent 40%),
    linear-gradient(180deg, #1a1410 0%, #0c0a07 55%, #15110c 100%);
}
#authGate.hide{ display:none; }
#authGate::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.35;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
  background-size:140px 140px; mix-blend-mode:overlay;
}
#authGate .enso{
  position:absolute; top:42%; left:50%; width:min(300px,70vw); height:min(300px,70vw);
  transform:translate(-50%,-58%);
  border:12px solid rgba(232,225,205,.08); border-radius:50%;
  box-shadow:0 0 80px rgba(178,58,46,.14) inset, 0 0 40px rgba(169,128,31,.12);
  animation:spin 48s linear infinite; opacity:.9;
}
#authGate .petal{
  position:absolute; top:-20px; width:8px; height:8px; background:var(--vermilion);
  border-radius:60% 0 60% 0; opacity:.45; animation:fall linear infinite;
}
.auth-inner{
  position:relative; z-index:2; text-align:center; padding:12px 8px 28px;
  width:min(400px,100%); animation:inkIn .75s ease;
}
.auth-inner .start-hero{
  width:112px; height:112px; margin:0 auto 6px;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.5));
}
.auth-inner h1{
  font-size:clamp(28px,7vw,36px); color:var(--gold-l); letter-spacing:0.2em;
  text-shadow:0 2px 20px rgba(184,134,11,.55); font-family:"STKaiti","KaiTi","Kaiti SC",serif;
  margin:0;
}
.auth-inner .seal{
  display:inline-block; margin-top:10px; padding:5px 12px; border:2px solid var(--vermilion);
  color:var(--vermilion); border-radius:8px; font-size:12px; letter-spacing:3px;
  transform:rotate(-3deg); background:rgba(179,64,47,.08);
  box-shadow:0 0 0 2px rgba(178,58,46,.12);
}
.auth-inner .sub{
  color:rgba(243,233,210,.78); margin:12px 0 0; font-size:13px; letter-spacing:0.28em;
}
.auth-card{
  margin-top:18px; padding:18px 16px 16px; border-radius:16px;
  border:1px solid rgba(189,174,142,.55);
  border-top:2px solid var(--gold-l);
  background:linear-gradient(180deg,#fbf7ee 0%, #efe4cf 100%);
  box-shadow:
    0 16px 40px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 0 0 1px rgba(169,128,31,.12);
  display:flex; flex-direction:column; gap:11px; text-align:left;
}
.auth-card .auth-label{
  font-size:11px; color:var(--sub); letter-spacing:1px; margin:0 0 -4px 2px;
}
.auth-card input{
  width:100%; box-sizing:border-box; padding:12px 14px; border-radius:10px;
  border:1px solid var(--line); background:#fffdf8; color:var(--ink);
  font-family:inherit; font-size:15px; min-height:48px;
  box-shadow:inset 0 1px 2px rgba(44,38,32,.06);
  transition:border-color .15s, box-shadow .15s;
}
.auth-card input:focus{
  outline:none; border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(169,128,31,.18), inset 0 1px 2px rgba(44,38,32,.06);
}
.auth-card .btn{
  width:100%; margin:0; display:block; min-height:50px; font-size:16px; letter-spacing:2px;
}
.auth-card .btn.primary{ margin-top:4px; }
.auth-card .btn:not(.primary){
  background:linear-gradient(180deg,#f7f1e6,#e9dfca); color:var(--ink2);
}
.auth-hint{
  font-size:11.5px; color:var(--sub); line-height:1.6; margin:4px 0 0; text-align:center;
}
.auth-err{
  min-height:18px; margin:0; font-size:13px; color:var(--vermilion);
  text-align:center; font-weight:700;
}
.auth-loading{
  margin:22px auto 0; color:rgba(246,236,216,.9); font-size:14px; letter-spacing:3px;
  padding:14px 18px; border:1px dashed rgba(232,225,205,.35); border-radius:12px;
  background:rgba(0,0,0,.2); max-width:280px;
}
.auth-loading.hide,.hide{ display:none !important; }

/* 未登录：主界面完全不渲染，避免顶栏「未登录」露馅 */
#app.gated{
  display:none !important;
  visibility:hidden;
  pointer-events:none;
}
#dockBtns{ grid-template-columns:repeat(3,1fr); }
#topBar{ gap:6px; }
#topInfo .ti-user{ color:var(--gold); font-weight:700; margin-left:4px; }

@media (max-width:360px){
  .auth-inner h1{ font-size:26px; letter-spacing:0.12em; }
  .auth-inner .start-hero{ width:96px; height:96px; }
  .auth-card{ padding:14px 12px; }
  .sync-chip{ max-width:36vw; font-size:10px; padding:2px 7px; }
}