/* ═══════════════════════════════════════════════
   持械入宋 · 清河烽火 —— 宣纸 / 墨线 / 朱批
   ═══════════════════════════════════════════════ */
:root{
  --paper:#F4EEE0;
  --paper-2:#EAE1CD;
  --paper-3:#DED2B6;
  --ink:#28241D;
  --ink-2:#5B5344;
  --ink-3:#8B816C;
  --hair:rgba(40,36,29,.16);
  --hair-2:rgba(40,36,29,.28);
  --zhu:#A32E22;
  --zhu-2:#C4483A;
  --gold:#A1854A;
  --dai:#3C4A5A;
  --ok:#4E6B3A;
  --warn:#9A6B21;
  --shadow:0 2px 10px rgba(40,36,29,.10), 0 12px 34px rgba(40,36,29,.10);
  --serif:"Songti SC","STSong","SimSun","Noto Serif CJK SC","Source Han Serif SC",serif;
  --sans:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",system-ui,sans-serif;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:var(--paper-2);color:var(--ink);
  font-family:var(--serif);-webkit-font-smoothing:antialiased;
  /* 沙盘是拖拽操作，绝不能让拖拽顺手把界面文字涂蓝 */
  -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
/* 输入框仍要能选字、能粘贴局号 */
input,textarea,select{-webkit-user-select:text;-moz-user-select:text;user-select:text}
button{font-family:inherit;cursor:pointer}
kbd{font-family:var(--sans);font-size:10px;padding:1px 4px;border:1px solid var(--hair-2);
  border-radius:3px;margin-left:5px;opacity:.6}

#stage{position:fixed;inset:0;z-index:0}
#stage canvas{display:block;touch-action:none;cursor:grab}

/* 拖动视图期间：整页禁选、光标改成抓手，选中高亮若已存在也一并抹掉 */
body.dragging,body.dragging *{cursor:grabbing !important;
  -webkit-user-select:none !important;-moz-user-select:none !important;user-select:none !important}
body.dragging ::selection{background:transparent}
body.dragging ::-moz-selection{background:transparent}

/* 纸纹与暗角 */
#grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.34;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.42'/></svg>")}
#vignette{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%,rgba(255,255,255,0) 42%,rgba(74,58,38,.16) 100%)}
body.real #grain{opacity:.12}
body.real #vignette{background:radial-gradient(120% 90% at 50% 45%,rgba(0,0,0,0) 40%,rgba(30,24,16,.30) 100%)}

/* 城名标签 */
#labels{position:fixed;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.lbl{position:absolute;transform:translate(-50%,-100%);text-align:center;white-space:nowrap;
  font-size:12.5px;letter-spacing:.08em;color:#2A2419;pointer-events:auto;cursor:pointer;
  text-shadow:0 1px 0 rgba(255,252,244,.92),0 0 6px rgba(255,252,244,.8);transition:opacity .2s}
.lbl small{display:block;font-size:9.5px;letter-spacing:.04em;color:#6C624F;opacity:.9;margin-top:1px;
  text-shadow:0 1px 0 rgba(255,252,244,.9)}
.lbl.fan{color:#2C3E50}
.lbl.fan small{color:#4A5A6C}
.lbl.hold{color:var(--zhu);font-weight:700}
.lbl.sel{color:var(--zhu);font-weight:700;transform:translate(-50%,-100%) scale(1.1)}
.lbl .dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--zhu);
  margin-right:4px;vertical-align:middle;opacity:.8}
.lbl.fan .dot{background:var(--dai)}

/* ═══ 顶栏 ═══ */
#topbar{position:fixed;left:0;right:0;top:0;height:58px;z-index:10;
  display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 14px;
  background:linear-gradient(180deg,rgba(244,238,224,.96),rgba(244,238,224,.80));
  border-bottom:1px solid var(--hair);backdrop-filter:blur(9px)}

.tb-left{display:flex;align-items:center;gap:10px;min-width:0}
.crest{width:32px;height:32px;flex:none;display:grid;place-items:center;
  background:var(--zhu);color:#F7EFDA;font-size:17px;border-radius:4px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 2px 6px rgba(163,46,34,.34)}
.tb-name{font-size:15.5px;letter-spacing:.14em;font-weight:700;line-height:1.2}
.tb-sub{font-size:10.5px;color:var(--ink-3);letter-spacing:.08em;margin-top:1px}

.tb-mid{display:flex;align-items:center;gap:4px}
.stat{display:flex;align-items:baseline;gap:5px;padding:3px 10px;border-left:1px solid var(--hair)}
.stat:first-child{border-left:0}
.stat-k{font-size:10.5px;color:var(--ink-3);letter-spacing:.1em}
.stat-v{font-size:15px;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.stat-v i{font-style:normal;font-size:10.5px;color:var(--ink-3);margin-left:1px}
.stat.flash .stat-v{color:var(--zhu);animation:pop .5s}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.22)}100%{transform:scale(1)}}

.tb-right{display:flex;align-items:center;gap:7px}
.tbtn{height:29px;padding:0 11px;border:1px solid var(--hair-2);background:rgba(255,252,244,.6);
  color:var(--ink);font-size:12px;letter-spacing:.06em;border-radius:3px;transition:.16s}
.tbtn:hover{background:#fff;border-color:var(--zhu);color:var(--zhu)}
.tbtn:disabled{opacity:.35;cursor:not-allowed}
.tbtn.wide{width:100%;margin-top:6px}
#btnEnd{background:var(--zhu);color:#F7EFDA;border-color:var(--zhu);padding:0 15px;
  box-shadow:0 2px 8px rgba(163,46,34,.28)}
#btnEnd:hover{background:#8C2519;color:#fff}
#btnEnd.busy{opacity:.6;pointer-events:none}

.speed{display:flex;border:1px solid var(--hair-2);border-radius:3px;overflow:hidden}
.speed button{height:27px;padding:0 9px;border:0;border-left:1px solid var(--hair);
  background:rgba(255,252,244,.5);font-size:11.5px;color:var(--ink-2)}
.speed button:first-child{border-left:0}
.speed button.on{background:var(--ink);color:#F4EEE0}
.speed button:hover{background:var(--paper-3)}

/* ═══ 侧栏 ═══ */
#left,#right{position:fixed;top:70px;bottom:126px;z-index:9;width:232px;
  display:flex;flex-direction:column;gap:10px;pointer-events:none}
#left{left:14px}
#right{right:14px;width:262px}
#left>*,#right>*{pointer-events:auto}

.panel{background:linear-gradient(180deg,rgba(247,241,228,.93),rgba(240,233,216,.90));
  border:1px solid var(--hair);border-radius:5px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;overflow:hidden;backdrop-filter:blur(6px)}
.panel.tall{flex:1;min-height:0}
.ph{display:flex;align-items:center;justify-content:space-between;padding:8px 11px 7px;
  border-bottom:1px solid var(--hair);background:rgba(222,210,182,.30)}
.ph span{font-size:12px;letter-spacing:.22em;color:var(--ink)}
.ph em{font-style:normal;font-size:10px;color:var(--ink-3);letter-spacing:.06em}

#orders{padding:9px 11px 11px;display:flex;flex-direction:column;gap:9px}
.oitem{font-size:11.5px;line-height:1.55;color:var(--ink-2)}
.oitem .oh{display:flex;justify-content:space-between;align-items:baseline;gap:6px;margin-bottom:4px}
.oitem b{font-weight:600;color:var(--ink);font-size:12px;letter-spacing:.04em}
.oitem .pct{font-size:10.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.bar{height:4px;background:rgba(40,36,29,.10);border-radius:2px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--zhu);border-radius:2px;transition:width .5s ease}
.bar.gold i{background:var(--gold)}
.bar.warn i{background:var(--warn)}
.oitem.done b{color:var(--ok)}
.oitem.fail b{color:var(--zhu)}
.alert{margin-top:2px;padding:6px 8px;border-left:2px solid var(--zhu);background:rgba(163,46,34,.07);
  font-size:11px;line-height:1.5;color:#7A2C24;border-radius:0 3px 3px 0}

#heroes{padding:9px 9px 10px;display:flex;flex-direction:column;gap:6px}
.hero{display:flex;align-items:center;gap:8px;padding:5px 7px;border-radius:4px;
  border:1px solid transparent;transition:.15s;cursor:pointer}
.hero:hover{background:rgba(255,252,244,.8);border-color:var(--hair)}
.hero.away{opacity:.75}
.hglyph{width:26px;height:26px;flex:none;display:grid;place-items:center;border-radius:3px;
  background:var(--ink);color:#F2E7CE;font-size:13px}
.hero[data-hero="captain"] .hglyph{background:#3E4E3A}
.hero[data-hero="sniper"] .hglyph{background:#4A3A2E}
.hero[data-hero="armorer"] .hglyph{background:#3C3F4A}
.hero[data-hero="signaler"] .hglyph{background:#394A52}
.hero[data-hero="medic"] .hglyph{background:#4A3E3A}
.hinfo{min-width:0;flex:1}
.hname{font-size:11.5px;letter-spacing:.06em;line-height:1.3}
.hname em{font-style:normal;font-size:9.5px;color:var(--ink-3);margin-left:4px;letter-spacing:0}
.hloc{font-size:10px;color:var(--ink-3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hloc.at{color:var(--zhu)}

#log{flex:1;overflow-y:auto;padding:8px 11px 12px;display:flex;flex-direction:column;gap:5px;
  scrollbar-width:thin;scrollbar-color:rgba(40,36,29,.22) transparent}
#log::-webkit-scrollbar{width:5px}
#log::-webkit-scrollbar-thumb{background:rgba(40,36,29,.2);border-radius:3px}
.le{font-size:11.5px;line-height:1.62;color:var(--ink-2);padding-left:9px;position:relative;
  animation:slideIn .28s ease}
.le::before{content:'';position:absolute;left:0;top:7px;width:3px;height:3px;border-radius:50%;
  background:var(--ink-3)}
.le b{color:var(--ink);font-weight:600}
.le.good{color:#3D5A2C}.le.good::before{background:var(--ok)}
.le.bad{color:#8A2A20}.le.bad::before{background:var(--zhu)}
.le.warn{color:#7C5A1C}.le.warn::before{background:var(--warn)}
.le.sys{color:var(--ink);border-top:1px dashed var(--hair);padding-top:6px;margin-top:3px;
  font-size:11.5px;letter-spacing:.03em}
.le.sys:first-child{border-top:0;margin-top:0;padding-top:0}
.le.new{background:linear-gradient(90deg,rgba(163,46,34,.09),transparent 70%)}
@keyframes slideIn{from{opacity:0;transform:translateX(6px)}to{opacity:1;transform:none}}

/* ═══ 底部城池坞 ═══ */
#dock{position:fixed;left:50%;transform:translateX(-50%);bottom:12px;z-index:9;
  width:min(760px,calc(100% - 520px));pointer-events:none}
#dockInner{pointer-events:auto;background:linear-gradient(180deg,rgba(247,241,228,.95),rgba(238,230,211,.94));
  border:1px solid var(--hair);border-radius:6px;box-shadow:var(--shadow);backdrop-filter:blur(8px)}
.dock-empty{padding:13px 16px;font-size:11.5px;color:var(--ink-3);letter-spacing:.04em;text-align:center}
.dock-empty b{color:var(--ink-2);font-weight:600}

#cityCard{padding:11px 14px 12px}
.cc-head{display:flex;align-items:baseline;gap:9px;margin-bottom:8px}
.cc-name{font-size:16px;letter-spacing:.1em;font-weight:700}
.cc-tier{font-size:10px;padding:1px 6px;border:1px solid var(--hair-2);border-radius:2px;color:var(--ink-3)}
.cc-side{font-size:10.5px;letter-spacing:.08em;padding:1px 7px;border-radius:2px}
.cc-side.song{background:rgba(163,46,34,.12);color:var(--zhu)}
.cc-side.fan{background:rgba(44,62,80,.12);color:var(--dai)}
.cc-hero{margin-left:auto;font-size:10.5px;color:var(--ink-3)}

.cc-stats{display:flex;gap:0;margin-bottom:10px}
.cs{flex:1;padding:0 10px;border-left:1px solid var(--hair);min-width:0}
.cs:first-child{border-left:0;padding-left:0}
.cs-k{font-size:9.5px;color:var(--ink-3);letter-spacing:.1em}
.cs-v{font-size:13px;font-variant-numeric:tabular-nums;margin-top:1px}
.cs-v i{font-style:normal;font-size:9.5px;color:var(--ink-3)}
.cs-v.low{color:var(--zhu)}

.cc-meta{display:flex;gap:8px;align-items:center;font-size:10.5px;color:var(--ink-3);
  margin-bottom:9px;padding-bottom:8px;border-bottom:1px solid var(--hair)}
.tag{font-size:9.5px;padding:1px 6px;border-radius:2px;background:rgba(40,36,29,.07);letter-spacing:.06em}
.tag.cut{background:rgba(163,46,34,.13);color:var(--zhu)}
.tag.mark{background:rgba(163,46,34,.15);color:var(--zhu);font-weight:600}

.cc-acts{display:flex;gap:6px;flex-wrap:wrap}
.act{height:28px;padding:0 12px;border:1px solid var(--hair-2);background:rgba(255,252,244,.7);
  border-radius:3px;font-size:11.5px;color:var(--ink);letter-spacing:.06em;transition:.15s}
.act:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.act:disabled{opacity:.32;cursor:not-allowed;background:transparent}
.act.pri{background:var(--zhu);color:#F7EFDA;border-color:var(--zhu)}
.act.pri:hover{background:#8C2519}
.act small{font-size:9.5px;opacity:.7;margin-left:3px}

.cc-targets{margin-top:9px;padding-top:9px;border-top:1px dashed var(--hair)}
.tg-hint{font-size:10.5px;color:var(--ink-3);margin-bottom:6px;letter-spacing:.05em}
.tg-row{display:flex;gap:6px;flex-wrap:wrap}
.tg{height:27px;padding:0 11px;border:1px solid var(--hair-2);border-radius:3px;background:rgba(255,252,244,.7);
  font-size:11.5px}
.tg:hover{background:var(--zhu);color:#fff;border-color:var(--zhu)}
.tg em{font-style:normal;font-size:9.5px;opacity:.65;margin-left:4px}

.ratio-row{display:flex;gap:6px;margin-top:8px;align-items:center}
.ratio-row span{font-size:10.5px;color:var(--ink-3);letter-spacing:.05em}
.ratio-row .tg.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ═══ 开场 ═══ */
.screen{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:24px;
  background:radial-gradient(120% 100% at 50% 0%,rgba(248,243,231,.96),rgba(226,215,193,.97));
  backdrop-filter:blur(3px);overflow-y:auto}
.screen.hide{display:none}
#intro{background:linear-gradient(180deg,rgba(245,239,226,.93) 0%,rgba(233,223,203,.96) 100%)}

.intro-inner{width:min(980px,100%);margin:auto}
.intro-head{text-align:center;margin-bottom:26px}
.intro-seal{width:52px;height:52px;margin:0 auto 12px;display:grid;place-items:center;
  background:var(--zhu);color:#F7EFDA;font-size:26px;border-radius:5px;transform:rotate(-2deg);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),0 5px 18px rgba(163,46,34,.30)}
.intro-head h1{font-size:40px;letter-spacing:.20em;margin:0 0 12px;font-weight:700;text-indent:.2em}
.intro-head h1 span{color:var(--zhu);margin:0 .1em}
.intro-lead{font-size:13px;line-height:2;color:var(--ink-2);letter-spacing:.05em;margin:0}

.scen-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px}
.scard{position:relative;padding:14px 13px 13px;border:1px solid var(--hair);border-radius:5px;
  background:linear-gradient(180deg,rgba(251,247,237,.92),rgba(240,233,215,.86));
  text-align:left;transition:.18s;overflow:hidden}
.scard::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--acc,#A32E22);
  opacity:.5;transition:.18s}
.scard:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(40,36,29,.13);border-color:var(--hair-2)}
.scard.on{border-color:var(--acc,#A32E22);box-shadow:0 0 0 1px var(--acc,#A32E22),0 10px 26px rgba(40,36,29,.14)}
.scard.on::before{opacity:1;width:4px}
.sc-name{font-size:16px;letter-spacing:.1em;font-weight:700;margin-bottom:3px}
.sc-sub{font-size:10px;color:var(--ink-3);letter-spacing:.08em;margin-bottom:8px}
.sc-brief{font-size:10.5px;line-height:1.75;color:var(--ink-2);letter-spacing:.02em}

.intro-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center;
  padding:14px 16px;border:1px solid var(--hair);border-radius:5px;background:rgba(251,247,237,.7)}
.seg{display:flex;align-items:center;gap:8px}
.seg-k{font-size:10.5px;color:var(--ink-3);letter-spacing:.14em}
.seg-btns{display:flex;border:1px solid var(--hair-2);border-radius:3px;overflow:hidden}
.seg-btns button{border:0;border-left:1px solid var(--hair);background:transparent;
  padding:5px 11px;font-size:11.5px;color:var(--ink-2);letter-spacing:.06em;line-height:1.3}
.seg-btns button:first-child{border-left:0}
.seg-btns button em{display:block;font-style:normal;font-size:9px;color:var(--ink-3);margin-top:1px}
.seg-btns button.on{background:var(--ink);color:var(--paper)}
.seg-btns button.on em{color:rgba(244,238,224,.6)}
#seedInput{width:78px;height:29px;border:1px solid var(--hair-2);border-radius:3px;
  background:rgba(255,252,244,.8);padding:0 8px;font-family:var(--sans);font-size:12px;
  letter-spacing:.08em;text-align:center}
.mini{height:29px;padding:0 9px;border:1px solid var(--hair-2);border-radius:3px;
  background:transparent;font-size:11px;color:var(--ink-2)}
.mini:hover{background:var(--paper-3)}
.start{height:38px;padding:0 34px;border:1px solid var(--zhu);background:var(--zhu);color:#F7EFDA;
  font-size:14px;letter-spacing:.28em;border-radius:3px;text-indent:.28em;
  box-shadow:0 3px 12px rgba(163,46,34,.30);transition:.18s}
.start:hover{background:#8C2519;transform:translateY(-1px)}
.intro-note{text-align:center;font-size:10px;line-height:1.9;color:var(--ink-3);
  letter-spacing:.04em;margin-top:18px}

/* ═══ 事件弹窗 ═══ */
#modal{background:rgba(38,32,24,.42);z-index:50}
.modal-card{width:min(560px,100%);padding:26px 28px 22px;background:linear-gradient(180deg,#FBF7ED,#F0E8D6);
  border:1px solid var(--hair-2);border-radius:6px;box-shadow:0 24px 70px rgba(30,24,16,.35);
  position:relative;animation:rise .3s ease}
@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.modal-card::before{content:'';position:absolute;inset:7px;border:1px solid rgba(163,46,34,.22);
  border-radius:3px;pointer-events:none}
.mc-tag{display:inline-block;font-size:9.5px;letter-spacing:.24em;color:var(--zhu);
  padding:2px 8px;border:1px solid rgba(163,46,34,.34);border-radius:2px;margin-bottom:11px}
.modal-card h2{font-size:23px;letter-spacing:.16em;margin:0 0 12px;font-weight:700}
.modal-card p{font-size:12.5px;line-height:2.05;color:var(--ink-2);letter-spacing:.03em;
  margin:0 0 18px;white-space:pre-line}
.mc-opts{display:flex;gap:9px}
.mc-opt{flex:1;text-align:left;padding:11px 13px;border:1px solid var(--hair-2);border-radius:4px;
  background:rgba(255,252,244,.8);transition:.16s}
.mc-opt:hover{border-color:var(--zhu);background:#fff;transform:translateY(-1px)}
.mc-opt b{display:block;font-size:13px;letter-spacing:.1em;margin-bottom:4px}
.mc-opt span{font-size:10.5px;line-height:1.6;color:var(--ink-3)}

/* ═══ 结算 ═══ */
#result{background:radial-gradient(120% 100% at 50% 0%,rgba(248,243,231,.96),rgba(226,215,193,.98));z-index:60}
.result-card{text-align:center;width:min(480px,100%);padding:8px 0}
.rc-grade{font-size:78px;line-height:1;letter-spacing:.1em;color:var(--zhu);font-weight:700;
  text-shadow:0 4px 24px rgba(163,46,34,.24);margin-bottom:6px}
.rc-grade.lose{color:var(--dai);text-shadow:0 4px 24px rgba(44,62,80,.22)}
.result-card h2{font-size:26px;letter-spacing:.2em;margin:0 0 14px;font-weight:700}
.result-card p{font-size:12.5px;line-height:2;color:var(--ink-2);letter-spacing:.04em;margin:0 0 20px}
.rc-stats{display:flex;justify-content:center;gap:0;margin-bottom:22px}
.rc-stats div{padding:0 18px;border-left:1px solid var(--hair);font-size:11px;color:var(--ink-3)}
.rc-stats div:first-child{border-left:0}
.rc-stats b{display:block;font-size:19px;color:var(--ink);margin-top:3px;font-variant-numeric:tabular-nums}
.rc-btns{display:flex;gap:10px;justify-content:center}

/* ═══ 存档 ═══ */
#savePanel.hide{display:none}
#savePanel{position:fixed;right:14px;top:62px;z-index:20;width:262px;padding:12px;
  background:linear-gradient(180deg,#FBF7ED,#F0E8D6);border:1px solid var(--hair-2);
  border-radius:5px;box-shadow:0 16px 44px rgba(30,24,16,.24)}
.sp-head{font-size:12px;letter-spacing:.16em;margin-bottom:9px;display:flex;justify-content:space-between}
.sp-head em{font-style:normal;font-size:10px;color:var(--ink-3);letter-spacing:.05em}
.slot{display:flex;align-items:center;gap:8px;padding:7px 8px;border:1px solid var(--hair);
  border-radius:3px;margin-bottom:6px;font-size:11px}
.slot .sn{flex:1;min-width:0}
.slot .sn b{display:block;font-size:11.5px;letter-spacing:.06em}
.slot .sn span{font-size:9.5px;color:var(--ink-3)}
.slot button{height:24px;padding:0 8px;border:1px solid var(--hair-2);border-radius:3px;
  background:transparent;font-size:10.5px}
.slot button:hover{background:var(--ink);color:var(--paper)}

/* ═══ 浮字 ═══ */
#toast{position:fixed;left:50%;top:72px;transform:translate(-50%,-14px);z-index:30;
  padding:8px 18px;background:rgba(40,36,29,.90);color:#F2E9D6;font-size:12px;letter-spacing:.08em;
  border-radius:3px;opacity:0;pointer-events:none;transition:.22s}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* ═══ 结算动画 ═══ */
.shake{animation:shk .38s ease}
@keyframes shk{0%,100%{transform:none}20%{transform:translate(-3px,1px)}
  45%{transform:translate(3px,-1px)}70%{transform:translate(-2px,1px)}}

/* ═══ 响应式 ═══ */
@media (max-width:1180px){
  #left{width:200px}#right{width:224px}
  #dock{width:min(700px,calc(100% - 462px))}
}
@media (max-width:960px){
  #left,#right{display:none}
  #dock{width:calc(100% - 28px)}
  .tb-mid .stat:nth-child(4){display:none}
  .scen-row{grid-template-columns:repeat(2,1fr)}
  .intro-head h1{font-size:30px}
}
@media (max-width:640px){
  #topbar{height:52px;padding:0 9px}
  .tb-sub{display:none}
  .tb-mid .stat:nth-child(2),.tb-mid .stat:nth-child(4){display:none}
  .tbtn{padding:0 8px;font-size:11px}
  #btnEnd kbd{display:none}
  .scen-row{grid-template-columns:1fr}
  .intro-head h1{font-size:24px;letter-spacing:.12em}
  #dock{bottom:8px}
  .cc-acts .act{padding:0 9px;font-size:11px}
}