@import url('../fonts/local-fonts.css?v=20260625');
/* ═══════════════════════════════════════════════════════════
   W1 视觉重构 2026-07-04 · 唯一规范源 _dev/DESIGN.md
   精修复古像素：卡带面板（羊皮纸内芯+厚边框）
   字号红线：正文≥13 按钮≥14 HUD数值≥16(桌面18) 小标签≥12
   色彩纪律：金=收益/克制/选中；试剂蓝=信息；浅底禁亮金(用--gold-dk)
   ═══════════════════════════════════════════════════════════ */
:root{
  /* 字体（本地 fonts/local-fonts.css，禁外链） */
  --px:'Press Start 2P',monospace;   /* 仅 ≥14px 纯英文/数字装饰 */
  --tx:'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  --sr:'Noto Serif SC','Songti SC',serif;
  --mo:'JetBrains Mono',monospace;
  /* 调色板（DESIGN.md §1） */
  --gold:#e8c94a;--gold-hi:#f7e08a;--gold-dk:#8a6d1f;
  --frame:#241a10;--frame2:#3a2c1a;
  --paper:#f2e6c8;--paper-dk:#e5d5ae;
  --ink:#2b2118;--ink-2nd:#7a5c33;
  --night:#0e1a3c;--ice:#c8dcff;
  --ok:#3f9e5c;--bad:#c9463c;
  --rgt:#4a8fd4;--rgt-ink:#1d5a96;
  --lava:#e07a2e;--iron:#8d97a8;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{width:100%;height:100%;overflow:hidden;background:#000;font-family:var(--tx);user-select:none;-webkit-user-select:none;touch-action:manipulation;}
#wrap{width:100vw;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;padding:8px 10px 10px;background:radial-gradient(ellipse at 50% 30%,#1a1a3a 0%,#080810 100%);position:relative;}
/* 中间战场区：撑满 hud 与 tpanel 之间的剩余空间，画布在其中居中 */
#stage{flex:1 1 auto;width:100%;min-height:0;display:flex;align-items:center;justify-content:center;position:relative;}
canvas{image-rendering:pixelated;image-rendering:crisp-edges;display:block;}
/* 主画布 = 插在卡带机里的屏幕：直角+厚边框 */
#cv{
  cursor:pointer;border-radius:0;
  border:3px solid var(--frame);
  box-shadow:0 0 0 2px var(--gold-dk),0 0 0 4px var(--frame2),0 8px 0 rgba(0,0,0,0.35),0 12px 40px rgba(0,0,0,0.6);
  background:#000;
}
/* ═══ 通用卡带面板配方（DESIGN §3） ═══ */
.cart-panel{
  background:linear-gradient(180deg,var(--paper),var(--paper-dk));
  border:3px solid var(--frame);
  border-radius:8px;
  box-shadow:
    0 0 0 2px var(--gold),
    0 0 0 4px var(--frame2),
    0 6px 0 rgba(0,0,0,0.35),
    inset 0 2px 0 rgba(255,255,255,0.5),
    inset 0 -3px 0 rgba(90,60,30,0.25);
  color:var(--ink);
  position:relative;
}
.cart-panel::after{ /* 四角铆钉 */
  content:'';position:absolute;inset:4px;pointer-events:none;border-radius:5px;
  background-image:
    radial-gradient(circle at 3px 3px,var(--gold-dk) 0 1.6px,rgba(0,0,0,0.28) 2.2px,transparent 3px),
    radial-gradient(circle at 3px 3px,var(--gold-dk) 0 1.6px,rgba(0,0,0,0.28) 2.2px,transparent 3px),
    radial-gradient(circle at 3px 3px,var(--gold-dk) 0 1.6px,rgba(0,0,0,0.28) 2.2px,transparent 3px),
    radial-gradient(circle at 3px 3px,var(--gold-dk) 0 1.6px,rgba(0,0,0,0.28) 2.2px,transparent 3px);
  background-size:6px 6px;background-repeat:no-repeat;
  background-position:0 0,100% 0,0 100%,100% 100%;
}
/* 纸面按钮物理感（tut/ibtn/ubtn 共用） */
.tut-btn,.ibtn,.ubtn{
  font-family:var(--tx);font-weight:700;font-size:14px;color:var(--ink);
  background:linear-gradient(180deg,#fdf6e0,var(--paper-dk));
  border:2px solid var(--frame);border-radius:6px;
  padding:8px 14px;cursor:pointer;
  box-shadow:0 2px 0 rgba(0,0,0,0.35),inset 0 1px 0 rgba(255,255,255,0.6);
  transition:filter .15s;
}
.tut-btn:hover,.ibtn:hover,.ubtn:hover{filter:brightness(1.05);}
.tut-btn:active,.ibtn:active,.ubtn:active{transform:translateY(2px);box-shadow:none;}
.ibtn.gold,.ubtn.primary{background:linear-gradient(180deg,var(--gold-hi),var(--gold));border-color:var(--frame);color:var(--frame);}
.ibtn.gold:hover,.ubtn.primary:hover{background:linear-gradient(180deg,#fff0b0,var(--gold-hi));filter:none;}
.ibtn.red{background:transparent;border-color:var(--bad);color:var(--bad);}
.ibtn.red:hover{background:rgba(201,70,60,0.08);}
/* ═══ HUD 栏（§4.1）：夜幕蓝底+计量槽 ═══ */
#hud{
  width:100%;max-width:960px;height:56px;flex:0 0 auto;
  background:linear-gradient(180deg,#152450,var(--night));
  border:3px solid var(--frame);
  border-radius:10px;
  box-shadow:inset 0 0 0 1px rgba(232,201,74,0.55),0 4px 0 rgba(0,0,0,0.3),0 8px 24px rgba(0,0,0,0.4);
  display:flex;align-items:center;padding:0 12px;gap:12px;
  font-family:var(--tx);color:var(--ice);
}
.hud-res{display:flex;align-items:center;gap:8px;flex:0 0 auto;}
.hud-ctrl{display:flex;align-items:center;gap:7px;flex:0 0 auto;}
.hud-i{
  display:flex;align-items:center;gap:6px;padding:4px 10px;
  background:rgba(0,0,0,0.4);border:1px solid var(--frame2);border-radius:6px;
  box-shadow:inset 0 2px 4px rgba(0,0,0,0.5),inset 0 -1px 0 rgba(255,255,255,0.06);
}
.hud-ic{font-size:14px;line-height:1;font-style:normal;}
.hud-gold .hud-ic{color:var(--gold);}
.hud-lives .hud-ic{color:var(--ice);}
.hud-wave .hud-ic{color:var(--rgt);}
.hud-lb{font-size:12px;font-weight:500;color:rgba(200,220,255,0.75);}
.hud-i .v{display:inline-block;font-family:var(--mo);font-weight:700;font-size:18px;color:var(--gold);min-width:2ch;text-align:center;}
.hud-lives .v{color:var(--ice);}
.hud-lives.low .v{color:#ff7a6e;animation:lowPulse 0.9s ease-in-out infinite;}
.hud-i.shake{animation:hudShake .3s;}
.v.bump{animation:vBump .12s ease-out;}
@keyframes vBump{0%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes lowPulse{0%,100%{opacity:1}50%{opacity:0.45}}
@keyframes hudShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
#hud-msg{flex:1;text-align:center;font-size:14px;font-weight:500;color:var(--gold);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hbtn{
  font-family:var(--tx);font-weight:700;font-size:14px;color:var(--ice);
  background:linear-gradient(180deg,#1c2f60,#101c42);
  border:2px solid var(--frame2);border-radius:6px;
  box-shadow:0 2px 0 rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.1);
  padding:7px 12px;cursor:pointer;white-space:nowrap;transition:filter .15s;
}
.hbtn:hover{filter:brightness(1.25);}
.hbtn:active{transform:translateY(2px);box-shadow:none;}
.hbtn.active{color:var(--gold);border-color:var(--gold-dk);}
#btnWave{ /* 主按钮：出击 */
  background:linear-gradient(180deg,var(--gold-hi),var(--gold));
  color:var(--frame);border-color:var(--frame);
  box-shadow:0 2px 0 rgba(0,0,0,0.4),0 0 12px rgba(232,201,74,0.35),inset 0 1px 0 rgba(255,255,255,0.6);
}
#btnWave:hover{filter:brightness(1.06);}
.glowPulse{animation:glowP 0.7s ease-in-out 2;}
@keyframes glowP{50%{box-shadow:0 0 16px 4px rgba(232,201,74,0.85);border-color:var(--gold);}}
/* ═══ 暂停遮罩 ═══ */
#pauseOverlay{
  position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,0.45);z-index:10;pointer-events:none;
}
#pauseOverlay.open{display:flex;}
.pause-text{
  font-family:var(--px);font-size:clamp(14px,3vw,22px);
  color:var(--ice);text-shadow:2px 2px 0 #000,0 0 20px rgba(200,220,255,0.5);
  animation:pauseBlink 1.2s ease-in-out infinite;letter-spacing:4px;
}
@keyframes pauseBlink{0%,100%{opacity:1}50%{opacity:0.4}}
/* ═══ 教程气泡（羊皮纸） ═══ */
#tut{position:fixed;z-index:55;display:none;pointer-events:none;}
#tut.open{display:block;}
.tut-box{
  position:fixed;padding:12px 16px;max-width:min(360px,88vw);width:max-content;
  background:linear-gradient(180deg,var(--paper),var(--paper-dk));
  border:3px solid var(--frame);border-radius:8px;
  box-shadow:0 0 0 2px var(--gold),0 6px 0 rgba(0,0,0,0.35),inset 0 2px 0 rgba(255,255,255,0.5);
  color:var(--ink);pointer-events:auto;animation:tutPop 0.35s ease-out;
}
@keyframes tutPop{0%{transform:scale(0.85);opacity:0}100%{transform:scale(1);opacity:1}}
.tut-speaker{font-family:var(--tx);font-weight:700;font-size:13px;color:var(--gold-dk);margin-bottom:4px;}
.tut-text{font-family:var(--tx);font-size:13px;color:var(--ink);line-height:1.7;}
.tut-text b{color:var(--gold-dk);}
.tut-text i{color:var(--rgt-ink);font-style:normal;}
.tut-btn{margin-top:10px;display:inline-block;pointer-events:auto;}
.tut-ring{
  position:fixed;border:3px solid var(--gold);border-radius:10px;
  pointer-events:none;animation:ringPulse 1.2s ease-in-out infinite;
  box-shadow:0 0 16px rgba(232,201,74,0.45),inset 0 0 10px rgba(232,201,74,0.15);
}
@keyframes ringPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.5;transform:scale(1.06)}}
.tut-mask{position:fixed;inset:0;background:rgba(0,0,0,0.45);pointer-events:none;z-index:54;display:none;}
.tut-mask.open{display:block;}
/* 教程框内的跳过链接：纸面浅底须用墨色（.skip-link 默认浅字是给暗底标题屏的） */
.tut-box .tut-skip{margin-top:6px;font-size:11px;color:rgba(60,50,30,0.6);}
.tut-box .tut-skip:hover{color:var(--gold-dk);}
/* ═══ 塔选择工具腰带（§4.2） ═══ */
#tpanel{ /* 底部部署栏：与顶部 HUD 同族的夜幕蓝深色条，贴底不遮挡战场 */
  position:static;flex:0 0 auto;margin:0 auto;
  background:linear-gradient(180deg,#152450,var(--night));
  border:3px solid var(--frame);border-radius:12px;
  box-shadow:inset 0 0 0 1px rgba(232,201,74,0.4),0 4px 0 rgba(0,0,0,0.3),0 6px 20px rgba(0,0,0,0.45);
  padding:9px 12px;display:none;gap:8px;z-index:20;
  flex-wrap:nowrap;justify-content:center;max-width:100%;
}
#tpanel.open{display:flex;}
.tp-item{ /* 部署卡：紧凑竖卡，顶部费用角标+中央塔像+底部名 */
  width:72px;min-height:76px;flex:0 0 auto;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  padding:15px 4px 5px;cursor:pointer;gap:1px;border-radius:8px;position:relative;
  background:linear-gradient(180deg,#243250,#141d38);
  border:2px solid var(--frame2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.07),0 2px 0 rgba(0,0,0,0.4);
  transition:transform .12s,border-color .12s,box-shadow .12s;
}
.tp-item:hover{transform:translateY(-3px);border-color:var(--gold-dk);}
.tp-item.selected{
  border:2px solid var(--gold);transform:translateY(-5px);
  background:linear-gradient(180deg,#2e4068,#182338);
  box-shadow:0 0 0 1px var(--gold),0 0 14px rgba(232,201,74,0.4),0 4px 0 rgba(0,0,0,0.4);
}
.tp-item canvas{width:40px!important;height:40px!important;image-rendering:pixelated;filter:drop-shadow(0 2px 3px rgba(0,0,0,0.5));}
.tp-nm{font-family:var(--tx);font-weight:600;font-size:12px;color:#ece4cc;text-align:center;line-height:1.25;}
.tp-cost{ /* 顶部费用角标（明日方舟部署费感） */
  position:absolute;top:-2px;left:50%;transform:translateX(-50%);
  font-family:var(--mo);font-weight:700;font-size:12px;color:var(--frame);
  background:linear-gradient(180deg,var(--gold-hi),var(--gold));
  padding:1px 9px 2px;border-radius:0 0 7px 7px;letter-spacing:0.3px;
  box-shadow:0 1px 3px rgba(0,0,0,0.45);
}
.tp-cost::before{content:'✦';margin-right:2px;font-size:10px;}
.tp-item.cant{filter:saturate(0.65) brightness(0.82);}
.tp-item.cant .tp-cost{background:linear-gradient(180deg,#e79484,#c8564a);color:#2a0e0a;}
.tp-item.locked{filter:grayscale(1) brightness(0.78);cursor:default;pointer-events:none;}
.tp-item.locked::after{
  content:'未解锁';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:11px;font-weight:700;color:#f0e6cc;background:rgba(0,0,0,0.74);
  padding:2px 6px;border-radius:4px;white-space:nowrap;
}
.tp-item.locked .tp-nm{color:#cfc9bb;}
/* ═══ 塔信息面板（§4.3） ═══ */
#info{
  position:fixed;right:10px;top:50%;transform:translateY(-50%);
  width:220px;padding:14px;display:none;z-index:20;
  background:linear-gradient(180deg,var(--paper),var(--paper-dk));
  border:3px solid var(--frame);border-radius:8px;
  box-shadow:0 0 0 2px var(--gold),0 0 0 4px var(--frame2),0 6px 0 rgba(0,0,0,0.35),inset 0 2px 0 rgba(255,255,255,0.5);
  font-family:var(--tx);font-size:13px;color:var(--ink);line-height:1.7;
}
#info.open{display:block;animation:slideIn 0.25s ease-out;}
@keyframes slideIn{from{opacity:0;transform:translateY(-50%) translateX(20px)}to{opacity:1;transform:translateY(-50%) translateX(0)}}
#info .it{font-family:var(--tx);font-weight:700;font-size:15px;color:var(--ink);margin-bottom:6px;padding-bottom:6px;border-bottom:2px solid var(--frame2);}
#info .id{font-family:var(--tx);font-size:13px;color:var(--ink);line-height:1.85;margin:6px 0;}
.ibtn{padding:7px 10px;margin:3px 2px;}
/* ═══ 升级弹窗（§4.4） ═══ */
#upgrade{
  position:fixed;inset:0;background:rgba(8,6,2,0.72);
  display:none;align-items:center;justify-content:center;z-index:50;
}
#upgrade.open{display:flex;}
.upg-card{
  background:linear-gradient(180deg,var(--paper),var(--paper-dk));
  border:3px solid var(--frame);border-radius:8px;position:relative;
  box-shadow:0 0 0 2px var(--gold),0 0 0 4px var(--frame2),0 6px 0 rgba(0,0,0,0.35),inset 0 2px 0 rgba(255,255,255,0.5);
  padding:22px 24px 18px;max-width:560px;width:92%;color:var(--ink);
  max-height:90vh;overflow-y:auto;
  animation:modalPop 0.3s ease-out;
}
.upg-card::before{ /* 顶部金-棕-金装饰条 */
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--gold) 0 22%,var(--frame2) 30% 70%,var(--gold) 78% 100%);
}
@keyframes modalPop{from{opacity:0;transform:scale(0.92)}to{opacity:1;transform:scale(1)}}
.upg-card.flash{animation:cardFlash .8s;}
@keyframes cardFlash{0%,30%,60%,100%{outline:4px solid transparent}12%,42%,72%{outline:4px solid var(--gold)}}
.upg-card.shake{animation:cardShake .32s;}
@keyframes cardShake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
.upg-t{font-family:var(--tx);font-weight:700;font-size:15px;color:var(--ink);margin-bottom:8px;text-align:center;letter-spacing:1px;}
.upg-desc{font-family:var(--tx);font-size:13px;color:var(--ink-2nd);line-height:1.7;margin-bottom:12px;text-align:center;}
/* 方程式搭建区 */
.eq-zone{display:flex;align-items:center;justify-content:center;gap:6px;margin:12px 0;flex-wrap:wrap;min-height:56px;}
.eq-label{font-family:var(--tx);font-weight:600;font-size:13px;color:var(--ink-2nd);}
.eq-slot{
  min-width:56px;min-height:52px;padding:6px 8px;
  border:2px dashed #a5854f;border-radius:6px;
  display:flex;align-items:center;justify-content:center;gap:4px;
  cursor:pointer;position:relative;transition:border-color .2s,background .2s;
  background:rgba(255,255,255,0.35);
}
.eq-slot:hover{border-color:var(--gold-dk);background:rgba(232,201,74,0.12);}
.eq-slot.filled{border-style:solid;border-color:var(--gold-dk);background:rgba(232,201,74,0.18);}
.eq-slot .coef{
  font-family:var(--mo);font-weight:700;font-size:16px;color:var(--ink);
  width:28px;height:26px;text-align:center;
  background:#fff;border:2px solid var(--frame2);border-radius:4px;
  outline:none;cursor:text;
}
.eq-slot .coef::-webkit-inner-spin-button,.eq-slot .coef::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
.eq-slot .coef:focus{border-color:var(--gold-dk);box-shadow:0 0 0 2px rgba(232,201,74,0.4);}
.eq-slot .formula{font-family:var(--tx);font-size:16px;color:var(--ink);font-weight:600;}
.eq-arrow{font-family:var(--mo);font-weight:700;font-size:16px;color:var(--ink);}
.eq-plus{font-family:var(--tx);font-size:15px;color:var(--ink-2nd);}
.eq-avail{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:10px 0;}
.eq-chip{ /* 白底字母块 */
  font-family:var(--tx);font-size:14px;font-weight:600;color:var(--ink);
  background:#fff;border:2px solid var(--frame2);border-radius:6px;
  padding:8px 14px;cursor:pointer;
  box-shadow:0 2px 0 rgba(0,0,0,0.25);
  transition:transform .15s,opacity .2s;
}
.eq-chip:hover{border-color:var(--gold-dk);transform:translateY(-1px);}
.eq-chip.used{opacity:0.45;pointer-events:none;transform:scaleY(0.9);background:var(--paper-dk);box-shadow:none;}
.eq-hint{font-family:var(--tx);font-size:13px;color:var(--ink-2nd);text-align:center;margin:6px 0;line-height:1.7;}
.eq-fb{font-family:var(--tx);font-weight:700;font-size:14px;text-align:center;min-height:22px;margin:6px 0;}
/* 印章反馈 */
.fx-stamp{
  position:absolute;top:46%;right:12%;width:64px;height:64px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--sr);font-weight:900;font-size:34px;line-height:1;
  pointer-events:none;z-index:5;transform:rotate(-12deg);
  animation:stampIn .18s ease-out;
}
.fx-stamp.ok{color:var(--ok);border:4px solid var(--ok);background:rgba(226,242,228,0.92);box-shadow:0 0 0 2px rgba(63,158,92,0.3);}
.fx-stamp.no{color:var(--bad);border:4px solid var(--bad);background:rgba(247,223,219,0.92);}
@keyframes stampIn{0%{opacity:0;transform:rotate(-12deg) scale(1.6)}100%{opacity:1;transform:rotate(-12deg) scale(1)}}
/* 场景题 */
.sq-q{font-family:var(--tx);font-size:14px;color:var(--ink);line-height:1.9;margin:12px 0;text-align:center;}
.sq-opts{display:flex;flex-direction:column;gap:8px;margin:10px 0;}
.sq-opt{
  font-family:var(--tx);font-size:14px;color:var(--ink);
  border:2px solid var(--frame2);border-radius:8px;padding:12px 16px;
  cursor:pointer;transition:border-color .2s,background .2s;text-align:center;
  background:#fff;box-shadow:0 2px 0 rgba(0,0,0,0.18);
}
.sq-opt:hover{border-color:var(--gold-dk);background:#fdf6e0;}
.sq-opt.ok{border-color:var(--ok);background:#e2f2e4;color:#1e6b38;font-weight:700;}
.sq-opt.no{border-color:var(--bad);background:#f7dfdb;color:#96291f;}
.upg-btns{display:flex;gap:10px;justify-content:center;margin-top:14px;}
.ubtn{padding:9px 18px;}
/* ═══ 标题/胜负 覆盖屏（§4.5/§4.6） ═══ */
.overlay{
  position:fixed;inset:0;display:none;align-items:center;justify-content:center;
  flex-direction:column;z-index:60;overflow:hidden;
  background:radial-gradient(ellipse at 50% 40%,rgba(14,26,60,0.96) 0%,rgba(2,4,10,0.97) 100%);
}
.overlay.open{display:flex;}
#titleCv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:none;box-shadow:none;border-radius:0;cursor:default;}
.title-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px;}
.title-en{font-family:var(--px);font-size:clamp(14px,2.2vw,16px);color:var(--gold);letter-spacing:4px;text-shadow:2px 2px 0 #000;}
.title-cn{
  font-family:var(--sr);font-weight:900;font-size:clamp(22px,4.5vw,30px);color:#fff;letter-spacing:6px;
  text-shadow:2px 0 0 var(--frame),-2px 0 0 var(--frame),0 2px 0 var(--frame),0 -2px 0 var(--frame),0 5px 0 rgba(0,0,0,0.55);
}
.title-sub{font-family:var(--tx);font-size:13px;color:var(--ice);letter-spacing:2px;text-shadow:0 1px 2px #000;}
.title-mob{position:absolute;z-index:2;width:48px;height:48px;image-rendering:pixelated;border:none;box-shadow:none;cursor:default;animation:floatY 3.4s ease-in-out infinite;filter:drop-shadow(0 3px 4px rgba(0,0,0,0.6));}
#tMob1{left:9%;bottom:26%;}
#tMob2{right:9%;top:24%;animation-delay:1.4s;}
.title-badges{display:flex;gap:18px;margin-top:14px;}
.badge{display:flex;align-items:center;gap:6px;font-family:var(--tx);font-size:12px;color:var(--ice);}
.badge i{width:14px;height:14px;border-radius:50% 50% 46% 46%;border:2px solid var(--frame2);display:inline-block;box-shadow:0 2px 0 rgba(0,0,0,0.4);}
.badge.b1 i{background:var(--rgt);}
.badge.b2 i{background:var(--lava);}
.badge.b3 i{background:var(--iron);}
.ov-en{font-family:var(--px);font-size:clamp(16px,3vw,20px);letter-spacing:3px;margin-bottom:10px;text-shadow:2px 2px 0 #000;}
.ov-en.win{color:var(--gold);}
.ov-en.lose{color:#ff6f61;}
.ov-t{
  font-family:var(--sr);font-weight:900;font-size:clamp(20px,4vw,26px);color:#fff;
  text-shadow:2px 0 0 var(--frame),-2px 0 0 var(--frame),0 2px 0 var(--frame),0 -2px 0 var(--frame),0 4px 0 rgba(0,0,0,0.5);
  margin-bottom:8px;text-align:center;line-height:1.7;letter-spacing:2px;
  animation:floatY 3s ease-in-out infinite;position:relative;z-index:2;
}
.ov-d{font-family:var(--tx);font-size:14px;color:var(--ice);text-align:center;line-height:2;max-width:440px;margin-bottom:12px;position:relative;z-index:2;}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.ov-stats{
  background:linear-gradient(180deg,var(--paper),var(--paper-dk));
  border:3px solid var(--frame);border-radius:8px;
  box-shadow:0 0 0 2px var(--gold),0 5px 0 rgba(0,0,0,0.35),inset 0 2px 0 rgba(255,255,255,0.5);
  padding:14px 24px;margin:6px 0 12px;display:none;flex-direction:column;gap:8px;min-width:270px;
  position:relative;z-index:2;
}
.ov-stats.show{display:flex;}
.ov-stats .row{display:flex;justify-content:space-between;gap:28px;align-items:baseline;}
.ov-stats .lb{font-family:var(--tx);font-size:13px;color:var(--ink-2nd);}
.ov-stats .num{font-family:var(--mo);font-weight:700;font-size:18px;color:var(--ink);}
.ov-caps{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-width:480px;margin:2px 0 10px;position:relative;z-index:2;}
.ov-cap{
  font-family:var(--tx);font-size:14px;font-weight:600;color:#fff;
  background:var(--ok);border:2px solid #2c7a45;border-radius:999px;
  padding:4px 13px;cursor:pointer;box-shadow:0 2px 0 rgba(0,0,0,0.35);
}
.ov-cap:hover{filter:brightness(1.12);}
.ov-hint{font-family:var(--tx);font-size:13px;color:var(--ice);max-width:430px;text-align:center;line-height:1.8;margin-bottom:8px;position:relative;z-index:2;}
.ov-btn{ /* 大号卡带主按钮 */
  font-family:var(--tx);font-weight:700;font-size:16px;color:var(--frame);
  background:linear-gradient(180deg,var(--gold-hi),var(--gold));
  border:3px solid var(--frame);border-radius:8px;
  padding:13px 36px;cursor:pointer;position:relative;z-index:2;
  box-shadow:0 6px 0 rgba(0,0,0,0.4),inset 0 2px 0 rgba(255,255,255,0.55);
  animation:btnBreath 2.5s ease-in-out infinite;transition:filter .15s;
}
.ov-btn:hover{filter:brightness(1.06);}
.ov-btn:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(0,0,0,0.4);}
@keyframes btnBreath{0%,100%{box-shadow:0 6px 0 rgba(0,0,0,0.4),inset 0 2px 0 rgba(255,255,255,0.55),0 0 8px rgba(232,201,74,0.2)}50%{box-shadow:0 6px 0 rgba(0,0,0,0.4),inset 0 2px 0 rgba(255,255,255,0.55),0 0 24px rgba(232,201,74,0.5)}}
.skip-link{
  background:none;border:none;cursor:pointer;margin-top:8px;position:relative;z-index:2;
  font-family:var(--tx);font-size:13px;color:rgba(200,220,255,0.85);
  text-decoration:underline dotted;text-underline-offset:3px;
}
.skip-link:hover{color:var(--gold);}
.confetti{position:absolute;top:-14px;width:8px;height:8px;z-index:1;animation:confFall linear forwards;}
@keyframes confFall{to{transform:translateY(110vh) rotate(540deg);}}
/* ═══ T1.1 世界地图 overlay：篇章分组选关 ═══ */
#ovWorld{background:radial-gradient(ellipse at 50% 30%,rgba(14,26,60,0.97) 0%,rgba(2,4,10,0.98) 100%);
  justify-content:flex-start;padding:0;}
.wm-head{flex:0 0 auto;width:100%;text-align:center;padding:18px 16px 10px;position:relative;z-index:2;}
.wm-title{font-family:var(--sr);font-weight:900;font-size:clamp(20px,4vw,26px);color:#fff;letter-spacing:4px;
  text-shadow:2px 0 0 var(--frame),-2px 0 0 var(--frame),0 2px 0 var(--frame),0 -2px 0 var(--frame),0 4px 0 rgba(0,0,0,0.5);}
.wm-sub{font-family:var(--tx);font-size:13px;color:var(--ice);letter-spacing:2px;margin-top:8px;}
.wm-prog{font-family:var(--mo);font-weight:700;font-size:14px;color:var(--gold);margin-left:8px;}
.wm-scroll{flex:1 1 auto;width:100%;max-width:960px;margin:0 auto;overflow-y:auto;overflow-x:hidden;
  padding:6px 18px 18px;position:relative;z-index:2;-webkit-overflow-scrolling:touch;}
.wm-chapter{margin:14px 0 4px;}
.wm-ch-hd{display:flex;align-items:center;gap:9px;margin-bottom:10px;padding-bottom:6px;
  border-bottom:2px solid rgba(255,255,255,0.12);}
.wm-ch-dot{width:15px;height:15px;border-radius:50%;flex:0 0 auto;border:2px solid rgba(0,0,0,0.4);
  box-shadow:0 0 8px currentColor;}
.wm-ch-nm{font-family:var(--sr);font-weight:900;font-size:16px;color:#fff;letter-spacing:2px;}
.wm-ch-meta{font-family:var(--tx);font-size:12px;color:var(--ice);opacity:0.75;margin-left:auto;}
.wm-nodes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;}
.wm-node{position:relative;border:3px solid var(--frame);border-radius:9px;padding:12px 12px 11px;min-height:96px;
  display:flex;flex-direction:column;gap:5px;text-align:left;
  background:linear-gradient(180deg,var(--paper),var(--paper-dk));
  box-shadow:0 4px 0 rgba(0,0,0,0.35),inset 0 2px 0 rgba(255,255,255,0.5);
  transition:filter .15s,transform .1s;}
.wm-node.unlocked{cursor:pointer;}
.wm-node.unlocked:hover{filter:brightness(1.05);transform:translateY(-2px);}
.wm-node.unlocked:active{transform:translateY(1px);box-shadow:0 2px 0 rgba(0,0,0,0.35),inset 0 2px 0 rgba(255,255,255,0.5);}
.wm-node.cleared{box-shadow:0 0 0 2px var(--gold),0 4px 0 rgba(0,0,0,0.35),inset 0 2px 0 rgba(255,255,255,0.5);}
.wm-node.locked{background:linear-gradient(180deg,#3a3a42,#2c2c34);border-color:#1a1a20;opacity:0.9;cursor:not-allowed;}
.wm-nd-top{display:flex;align-items:center;gap:6px;}
.wm-nd-tag{width:11px;height:11px;border-radius:50%;flex:0 0 auto;border:1.5px solid rgba(0,0,0,0.35);}
.wm-nd-nm{font-family:var(--sr);font-weight:900;font-size:15px;line-height:1.25;color:var(--ink);}
.wm-node.locked .wm-nd-nm{color:#c0c0cc;}
.wm-nd-ch{font-family:var(--tx);font-size:12px;color:var(--ink-2nd);}
.wm-node.locked .wm-nd-ch{color:#9a9aa6;}
.wm-nd-status{font-family:var(--tx);font-size:12px;font-weight:700;margin-top:auto;display:flex;align-items:center;gap:4px;}
.wm-nd-status.s-cleared{color:#2c7a45;}
.wm-nd-status.s-open{color:var(--rgt-ink);}
.wm-nd-status.s-lock{color:#9a9aa6;}
.wm-nd-badge{position:absolute;top:-9px;right:-9px;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:#fff;
  background:var(--ok);border:2px solid #2c7a45;box-shadow:0 2px 0 rgba(0,0,0,0.4);}
.wm-foot{flex:0 0 auto;width:100%;text-align:center;padding:8px 16px 16px;position:relative;z-index:2;}
.wm-back{font-family:var(--tx);font-weight:700;font-size:14px;color:var(--ice);
  background:rgba(255,255,255,0.08);border:2px solid var(--frame2);border-radius:8px;
  padding:9px 26px;cursor:pointer;transition:filter .15s;}
.wm-back:hover{filter:brightness(1.3);color:var(--gold);}
@media(max-width:600px){
  .wm-scroll{padding:6px 12px 14px;}
  .wm-nodes{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;}
  .wm-node{min-height:88px;padding:11px 10px;}
  .wm-ch-nm{font-size:15px;}
  .wm-ch-meta{display:none;}
}
@media(max-width:380px){
  .wm-nodes{grid-template-columns:1fr 1fr;}
}
/* ═══ 反应图鉴 = 实验记录手册（§4.7） ═══ */
#book{
  position:fixed;inset:0;background:rgba(8,6,2,0.78);
  display:none;align-items:center;justify-content:center;z-index:55;
}
#book.open{display:flex;}
.book-card{
  background:linear-gradient(180deg,var(--paper),var(--paper-dk));
  border:3px solid var(--frame);border-radius:8px;
  box-shadow:0 0 0 2px var(--gold),0 0 0 4px var(--frame2),0 6px 0 rgba(0,0,0,0.35),inset 0 2px 0 rgba(255,255,255,0.5);
  width:92%;max-width:560px;max-height:85vh;color:var(--ink);
  display:flex;flex-direction:column;
  animation:modalPop 0.3s ease-out;
}
.book-hd{ /* 书签形金底标题牌 */
  padding:11px 16px;border-bottom:3px solid var(--frame);
  display:flex;justify-content:space-between;align-items:center;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold));
  border-radius:5px 5px 0 0;
}
.book-t{font-family:var(--tx);font-weight:700;font-size:15px;color:var(--frame);}
#bookProg{font-family:var(--mo);font-weight:700;font-size:14px;color:var(--frame);margin-left:8px;}
.book-x{font-size:20px;color:var(--frame);cursor:pointer;background:none;border:none;line-height:1;padding:2px 8px;transition:transform .15s;}
.book-x:hover{transform:scale(1.2);}
.book-bd{flex:1;overflow-y:auto;padding:12px 14px;}
.book-bd::-webkit-scrollbar{width:8px;}
.book-bd::-webkit-scrollbar-thumb{background:var(--frame2);border-radius:4px;}
.book-bd::-webkit-scrollbar-track{background:var(--paper-dk);}
/* 图鉴分组标题（ui.js renderBook 已换用 .bk-group，旧 !important 兜底已删） */
.bk-group{
  font-family:var(--tx);font-size:14px;font-weight:700;color:var(--gold-dk);
  padding:8px 0 4px;border-bottom:2px solid var(--frame2);margin:6px 0 4px;
}
.bk-entry.bk-ch1{border-left-color:var(--rgt);}
.bk-entry.bk-ch2{border-left-color:var(--lava);}
.bk-entry.bk-ch3{border-left-color:var(--iron);}
.bk-entry.bk-ch4{border-left-color:#8a5cc8;} /* redox 电子转移战区 紫罗兰 */
.bk-entry.bk-ch5{border-left-color:#2a9aa8;} /* ion 共存战区 青绿 */
.bk-entry.bk-ch6{border-left-color:#3a9a4a;} /* organic 官能团战区 有机绿 */
.bk-entry.bk-ch7{border-left-color:#a0c020;} /* halogen 卤素战区 黄绿 */
.bk-entry.bk-ch8{border-left-color:#d8a828;} /* sulfur 硫黄战区 硫黄 */
.bk-entry.bk-ch9{border-left-color:#2ab0c8;} /* aqua 水溶液战区 水青蓝 */
.bk-entry.bk-ch10{border-left-color:#3a7ad0;} /* nitrogen 氮蓝战区 氮蓝 */
.bk-entry.bk-ch11{border-left-color:#7a5cc0;} /* periodic 周期律战区 靛蓝紫 */
.bk-entry.bk-ch12{border-left-color:#2898b0;} /* electro 电化学战区 电解青蓝 */
.bk-entry.bk-ch13{border-left-color:#9a4cc0;} /* equilibrium 可逆之域 平衡紫罗兰 */
.bk-entry.bk-ch14{border-left-color:#e05820;} /* thermo 热焓熔炉战区 熔炉橙红 */
.bk-entry.bk-locked{ /* 未收录：？？？占位卡（集卡欲） */
  border-style:dashed;border-left-style:solid;background:rgba(255,255,255,0.25);
}
.bk-entry.bk-locked .bk-nm{color:var(--ink-2nd);letter-spacing:2px;}
.bk-entry.bk-locked .bk-ph{font-size:13px;color:var(--ink-2nd);}
/* 塔信息两列属性表（ui.js selectTower 已启用） */
.it-stats{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:6px 0;align-items:baseline;}
.it-lb{font-size:12px;color:var(--ink-2nd);}
.it-v{font-family:var(--mo);font-weight:700;font-size:14px;color:var(--ink);}
.it-v.hot{color:var(--gold-dk);} /* 克制倍率高亮 */
.it-warn{font-size:12px;color:var(--bad);} /* 答错涨价提示 */
.bk-entry{ /* 索引卡 */
  border:2px solid var(--frame2);border-left:6px solid var(--rgt);
  border-radius:8px;padding:10px 12px;margin-bottom:8px;
  background:rgba(255,255,255,0.5);transition:border-color 0.2s;
}
.bk-entry:hover{border-color:var(--gold-dk);}
.bk-nm{font-family:var(--tx);font-weight:700;font-size:13px;color:var(--ink);margin-bottom:4px;}
.bk-fm{font-size:14px;color:var(--ink);font-weight:600;}
.bk-eq{font-size:15px;color:var(--ink);margin-top:2px;line-height:1.7;}
.bk-ion{font-size:13px;color:var(--rgt-ink);margin-top:3px;line-height:1.7;}
.bk-ph{font-size:13px;color:var(--ink-2nd);margin-top:3px;line-height:1.6;}
.bk-empty{font-family:var(--tx);font-size:13px;color:var(--ink-2nd);text-align:center;padding:30px 10px;line-height:2.2;}
/* ═══ 特效 DOM 层：波次横幅 / 收录 toast ═══ */
#fxBanner{
  position:fixed;top:13%;left:50%;transform:translateX(-50%) scaleX(0.1);z-index:45;
  pointer-events:none;opacity:0;
  background:rgba(10,8,4,0.78);
  border-top:2px solid var(--gold);border-bottom:2px solid var(--gold);
  color:#fff;font-family:var(--sr);font-weight:900;font-size:18px;letter-spacing:6px;
  padding:10px 46px;white-space:nowrap;
}
#fxBanner.show{animation:bannerIn 1.6s ease-out forwards;}
@keyframes bannerIn{0%{opacity:0;transform:translateX(-50%) scaleX(0.1)}18%{opacity:1;transform:translateX(-50%) scaleX(1)}78%{opacity:1;transform:translateX(-50%) scaleX(1)}100%{opacity:0;transform:translateX(-50%) scaleX(1)}}
#fxToast{ /* 迷你索引卡 */
  position:fixed;top:74px;right:-380px;z-index:56;max-width:330px;
  background:linear-gradient(180deg,var(--paper),var(--paper-dk));
  border:2px solid var(--frame);border-left:6px solid var(--gold);border-radius:6px;
  box-shadow:0 4px 0 rgba(0,0,0,0.35);
  padding:10px 14px;font-family:var(--tx);font-size:13px;font-weight:600;color:var(--ink);
  transition:right .35s ease;
}
#fxToast.show{right:12px;}
/* ═══ W2 动态组件正式皮肤（id/class 由 ui.js 动态创建勿改名。
   ui.js 内联只剩结构性属性（定位/显隐/横滚/flex基准），视觉全归此处。 ═══ */
.hbtn-speed{min-width:48px;font-variant-numeric:tabular-nums;}
@media(pointer:coarse){.hbtn{min-height:44px;}}
.intel-bar{
  align-items:center;gap:8px;padding:6px 10px;
  background:linear-gradient(180deg,#152450,var(--night));
  border:2px solid var(--frame);border-radius:8px;
  box-shadow:inset 0 0 0 1px rgba(232,201,74,0.45),0 4px 0 rgba(0,0,0,0.3),0 6px 16px rgba(0,0,0,0.35);
  font-family:var(--tx);font-size:13px;color:var(--ice);
}
.intel-label{color:var(--gold);font-size:12px;font-weight:600;}
.intel-chip{
  font-family:var(--tx);font-size:13px;font-weight:600;color:var(--ice);
  background:rgba(0,0,0,0.4);border:1px solid var(--frame2);
  border-radius:6px;padding:5px 10px;cursor:pointer;
  box-shadow:inset 0 1px 3px rgba(0,0,0,0.5);transition:border-color .15s;
}
.intel-chip:hover{border-color:var(--gold-dk);color:var(--gold);}
@media(pointer:coarse){.intel-chip{min-height:38px;padding:8px 12px;}}
.intel-tip{
  background:linear-gradient(180deg,var(--paper),var(--paper-dk));
  border:2px solid var(--frame);border-radius:8px;
  box-shadow:0 0 0 2px var(--gold),0 4px 0 rgba(0,0,0,0.35);
  font-family:var(--tx);font-size:13px;line-height:1.6;color:var(--ink);
  padding:8px 12px;
}
/* 唯一保留的 !important：showIntelTip 的 innerHTML 内联 <b style="color:var(--gold)">，
   亮金上羊皮纸违反对比度红线（DESIGN 纪律2），须压过。W2 若删该内联色即可去掉。 */
.intel-tip b{color:var(--gold-dk);}
/* ═══ 存档面板 ═══ */
#save-panel{display:none;position:fixed;inset:0;background:rgba(8,6,2,0.72);z-index:9999;align-items:center;justify-content:center;}
.sv-card{
  background:linear-gradient(180deg,var(--paper),var(--paper-dk));
  border:3px solid var(--frame);border-radius:8px;
  box-shadow:0 0 0 2px var(--gold),0 6px 0 rgba(0,0,0,0.35),inset 0 2px 0 rgba(255,255,255,0.5);
  padding:22px 24px;width:300px;max-width:90vw;text-align:center;color:var(--ink);
}
.sv-t{font-family:var(--tx);font-weight:700;font-size:15px;color:var(--ink);margin:0 0 14px;}
.sv-col{display:flex;flex-direction:column;gap:10px;}
.sv-btn{
  font-family:var(--tx);font-weight:700;font-size:14px;color:var(--ink);
  background:linear-gradient(180deg,#fdf6e0,var(--paper-dk));
  border:2px solid var(--frame);border-radius:6px;padding:10px;cursor:pointer;
  box-shadow:0 2px 0 rgba(0,0,0,0.35),inset 0 1px 0 rgba(255,255,255,0.6);
}
.sv-btn:active{transform:translateY(2px);box-shadow:none;}
.sv-btn.save{background:linear-gradient(180deg,var(--gold-hi),var(--gold));color:var(--frame);}
.sv-cloud{border-top:2px solid var(--frame2);padding-top:10px;margin-top:5px;}
.sv-cloud-lb{font-size:13px;color:var(--ink-2nd);margin-bottom:8px;}
.sv-row{display:flex;gap:8px;}
.sv-row .sv-btn{flex:1;font-size:13px;padding:8px;}
.sv-close{margin-top:15px;padding:8px 20px;background:none;border:2px solid var(--frame2);color:var(--ink-2nd);border-radius:6px;cursor:pointer;font-size:13px;font-family:var(--tx);font-weight:600;}
/* ═══ 移动端（≤600px，DESIGN §7） ═══ */
@media(max-width:600px){
  #wrap{padding:4px 4px 6px;gap:5px;}
  /* 信息面板 → 底部抽屉（浮在部署栏之上） */
  #info{
    position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;transform:none;
    border-radius:12px 12px 0 0;max-height:40vh;overflow-y:auto;z-index:30;
    padding-bottom:calc(env(safe-area-inset-bottom,0px) + 12px);
  }
  #info.open{animation:drawerUp 0.25s ease-out;}
  @keyframes drawerUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
  /* 部署栏 → 贴底横向滚动，卡片不缩到红线以下 */
  #tpanel{
    width:100%;align-self:stretch;max-width:100%;
    flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
    padding:8px 10px calc(env(safe-area-inset-bottom,0px) + 8px);
    scrollbar-width:none;
  }
  #tpanel::-webkit-scrollbar{display:none;}
  .tp-item{width:64px;min-height:72px;}
  /* HUD 分组在窄屏可换行 */
  .hud-res,.hud-ctrl{flex-wrap:wrap;justify-content:center;}
  /* HUD 压缩：只留图标+数值、消息折到第二行，字号不缩 */
  #hud{height:auto;min-height:56px;flex-wrap:wrap;gap:6px;row-gap:5px;padding:6px 8px;justify-content:center;}
  .hud-lb{display:none;}
  .hud-i{padding:4px 7px;}
  .hud-i .v{font-size:16px;}
  #hud-msg{order:9;flex-basis:100%;font-size:13px;}
  .hbtn{padding:7px 9px;}
  /* 弹窗 */
  .upg-card{width:96%;padding:18px 14px 14px;max-height:88dvh;}
  .eq-zone{gap:5px;}
  .eq-arrow{flex-basis:100%;text-align:center;}
  .eq-slot .coef{width:32px;height:32px;}
  .eq-chip{padding:10px 14px;}
  #fxToast{max-width:78vw;}
  .title-mob{display:none;}
}
/* ═══ reduced-motion：只关持续装饰动效，保留教学/反馈动画（DESIGN 全局纪律3） ═══ */
@media(prefers-reduced-motion:reduce){
  .ov-t,.ov-btn,.title-mob{animation:none;}
  .pause-text{animation:none;opacity:1;}
  .tut-ring{animation:none;opacity:1;}
  .hud-lives.low .v{animation:none;}
  .confetti{display:none;}
  /* 保留：vBump/cardFlash/cardShake/stampIn/bannerIn/toast —— 均为一次性教学反馈 */
}
/* chem-format stacked sub/sup (charge above subscript) */
.cf-sub{font-size:.72em;line-height:1;vertical-align:-0.32em}
.cf-sup{font-size:.72em;line-height:1;vertical-align:0.5em}
.cf-ss{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;vertical-align:-0.28em;font-size:.72em;line-height:1.02;text-align:center}
.cf-ss .cf-sup,.cf-ss .cf-sub{display:block;font-size:1em;vertical-align:baseline;line-height:1.02}