/* ══════════════════════════════════════════════════════════════════════
   潮汐场 TIDAL ARENA — HUD
   设计语言：深空玻璃 + 香槟金细线 + 青蓝数据色；等宽数字；小写字距标签
   字体：Oswald / JetBrains Mono 本地 woff2（vendor/fonts），中文走系统栈
   ══════════════════════════════════════════════════════════════════════ */
@font-face{font-family:Oswald;src:url("./vendor/fonts/oswald-300.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:Oswald;src:url("./vendor/fonts/oswald-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Oswald;src:url("./vendor/fonts/oswald-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("./vendor/fonts/jetbrains-mono-400.woff2") format("woff2");font-weight:400;font-display:swap}

:root{
  --ink:#05070b;
  --panel:rgba(10,15,22,.74);
  --panel-solid:rgba(9,13,19,.96);
  --panel2:rgba(16,22,31,.9);
  --line:rgba(200,214,232,.13);
  --line2:rgba(200,214,232,.26);
  --gold:#e8c07a;
  --gold2:#f4e2bd;
  --gold-dim:rgba(232,192,122,.42);
  --cyan:#6fd3e0;
  --red:#e2603f;
  --green:#5fbf8a;
  --amber:#e0a94b;
  --tx:#eef3f8;
  --tx2:#9fb0c2;
  --tx3:#6b7a8a;
  --r:3px;
  --blur:blur(20px) saturate(1.18);
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --disp:Oswald,"Bahnschrift SemiCondensed","Arial Narrow",Impact,sans-serif;
  --cjk:"PingFang SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei","Noto Sans CJK SC","Source Han Sans SC",sans-serif;
  --rail:56px;
  --dcol:clamp(272px,20.5vw,318px);
  --top:60px;
  --bot:52px;
  --gap:10px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:var(--ink)}
body{
  font-family:var(--cjk);
  color:var(--tx);font-size:12px;line-height:1.4;
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overscroll-behavior:none;
}
button{font-family:inherit;color:inherit}
canvas#gl{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
#grain,#vignette{position:fixed;inset:0;pointer-events:none;z-index:2}
#grain{
  opacity:.045;mix-blend-mode:overlay;
  background-image: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='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
#vignette{background:radial-gradient(124% 92% at 50% 44%,transparent 40%,rgba(0,0,0,.46) 100%)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── 焦点环（无障碍） ── */
:where(button,[tabindex],input,[role="switch"]):focus-visible{
  outline:2px solid var(--gold2);
  outline-offset:2px;
  border-radius:2px;
}
.sheet :where(button):focus-visible{outline-color:var(--gold2)}

/* ══════════ HUD 布局（显式分区：任何 overlay 都不能挤压主布局） ══════════ */
#hud{
  position:fixed;inset:0;z-index:10;pointer-events:none;
  opacity:0;transition:opacity .7s ease;
}
#hud.on{opacity:1}
#hud>.top,#hud>.left,#hud>.right,#hud>.bottom,#hud>.mmwrap,#hud>.guide,
#hud>.mobbar,#hud>.slotbar{pointer-events:auto}
#hud>.top,#hud>.left,#hud>.right,#hud>.bottom,
#hud>.mmwrap,#hud>.guide,#hud>.photoslot{
  position:absolute;
  max-height:calc(100% - var(--top) - var(--bot) - var(--gap) * 3);
  max-width:calc(100vw - 24px);
}
#hud>.photoslot:empty{display:none}
#hud.on{opacity:1}

/* ── 各分区绝对定位（桌面 / 平板） ── */
.top{left:var(--gap);right:var(--gap);top:var(--gap);height:var(--top)}
.left{
  left:var(--gap);top:calc(var(--top) + var(--gap) * 2);
  bottom:calc(var(--bot) + var(--gap) * 2);
  width:calc(var(--rail) + var(--gap) + var(--dcol));
}
.right{
  right:var(--gap);top:calc(var(--top) + var(--gap) * 2);
  bottom:calc(var(--bot) + var(--gap) * 2);
  width:calc(var(--rail) + var(--gap) + var(--dcol));
}
.bottom{left:var(--gap);right:var(--gap);bottom:var(--gap);height:var(--bot)}
.mmwrap{right:var(--gap);bottom:calc(var(--bot) + var(--gap) * 2)}
.guide{
  right:calc(var(--gap) + var(--mmw) + 8px);
  bottom:calc(var(--bot) + var(--gap) * 2 + var(--mmh) - 44px);
}

/* ══════════ 顶栏 ══════════ */
.top{
  display:flex;align-items:center;gap:12px;
  min-width:0;
}
.brand{
  display:flex;align-items:center;gap:9px;flex:0 0 auto;
  height:100%;padding:0 14px 0 12px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  backdrop-filter:var(--blur);
}
.brand .mark{
  color:var(--gold);display:grid;place-items:center;width:28px;height:28px;
  border:1px solid var(--gold-dim);border-radius:50%;
}
.brand .name{font-size:14px;font-weight:600;letter-spacing:.14em;line-height:1.05;white-space:nowrap}
.brand .name em{
  display:block;font-style:normal;font-family:var(--disp);font-weight:400;
  font-size:8.5px;letter-spacing:.32em;color:var(--tx3);margin-top:2px;
}

.readout{
  display:flex;flex:1 1 auto;min-width:0;height:100%;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  backdrop-filter:var(--blur);
  overflow:hidden;
}
.ro{
  flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:0 8px;border-right:1px solid var(--line);position:relative;
}
.ro:last-child{border-right:0}
.ro span{
  font-size:8.5px;letter-spacing:.2em;color:var(--tx3);white-space:nowrap;
  margin-bottom:2px;
}
.ro b{
  font-family:var(--mono);font-size:13px;font-weight:400;color:var(--tx);
  font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:0;
}
.ro b.hot{color:var(--gold2)}
.ro b.warn{color:var(--amber)}
.ro b.bad{color:var(--red)}

.topright{display:flex;gap:6px;flex:0 0 auto;height:100%}
.chip{
  display:flex;align-items:center;gap:7px;height:100%;min-width:36px;padding:0 12px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  color:var(--tx2);font-size:11px;letter-spacing:.08em;
  cursor:pointer;backdrop-filter:var(--blur);transition:background .2s,color .2s,border-color .2s;
}
.chip:hover{color:var(--tx);border-color:var(--line2);background:var(--panel2)}
.chip.icon{padding:0;justify-content:center}
.chip .dot{
  width:6px;height:6px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 9px var(--gold);transition:.3s;
}
.chip .dot.day{background:#8fd0ff;box-shadow:0 0 9px #8fd0ff}
.chip .dot.dusk{background:#ff9d63;box-shadow:0 0 9px #ff9d63}
.chip.on{color:var(--gold2);border-color:var(--gold-dim);background:rgba(46,36,20,.78)}
.chip[aria-pressed="true"] .sndwave{opacity:1}

/* ══════════ 侧栏（图标轨道 + 面板列） ══════════ */
.left{display:flex;align-items:flex-start;gap:var(--gap);min-height:0}
.right{
  display:flex;flex-direction:row-reverse;align-items:flex-start;
  gap:var(--gap);min-height:0;height:100%;
}
#railRight{display:none}
.rail{
  display:none;flex-direction:column;gap:4px;flex:0 0 auto;
  width:var(--rail);padding:5px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  backdrop-filter:var(--blur);
}
.ritem{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;height:46px;width:100%;border:1px solid transparent;border-radius:2px;
  background:transparent;color:var(--tx3);cursor:pointer;transition:.18s;
}
.ritem em{font-style:normal;font-size:9px;letter-spacing:.08em}
.ritem:hover{color:var(--tx);background:rgba(255,255,255,.05)}
.ritem.active{color:var(--gold2);background:rgba(232,192,122,.12);border-color:var(--gold-dim)}

.col{
  display:flex;flex-direction:column;gap:var(--gap);
  min-width:0;width:100%;height:100%;
  overflow:hidden auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:rgba(200,214,232,.18) transparent;
  padding-bottom:2px;
}
.col::-webkit-scrollbar{width:5px}
.col::-webkit-scrollbar-thumb{background:rgba(200,214,232,.16);border-radius:3px}
.col::-webkit-scrollbar-track{background:transparent}

/* ══════════ 面板 ══════════ */
.panel{
  position:relative;
  background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r);
  backdrop-filter:var(--blur);
  flex:0 0 auto;
  box-shadow:0 10px 30px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.045);
}
.panel::before{
  content:"";position:absolute;left:0;top:8px;bottom:8px;width:1px;
  background:linear-gradient(180deg,transparent,var(--gold-dim),transparent);pointer-events:none;
}
.ph{
  all:unset;box-sizing:border-box;
  display:flex;align-items:center;gap:8px;width:100%;
  padding:9px 11px 8px 12px;cursor:pointer;border-bottom:1px solid transparent;
  transition:border-color .25s,background .2s;
}
.ph:hover{background:rgba(255,255,255,.028)}
.ph h3{
  font-size:9.5px;font-weight:500;letter-spacing:.26em;color:var(--tx2);
  text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-family:var(--cjk);
}
.ph .pct{
  margin-left:auto;font-family:var(--mono);font-size:9px;letter-spacing:.04em;
  color:var(--gold);white-space:nowrap;text-transform:none;flex:0 0 auto;
}
.ph .ic{width:4px;height:4px;border-radius:50%;background:var(--gold);flex:0 0 auto}
.ph .ic.ic-g{background:var(--green)}
.ph .ic.ic-c{background:var(--cyan)}
.ph .ic.ic-f{background:var(--red)}
.ph .ic.ic-v{background:#a3b8cf}
.ph .ic.ic-l{background:#8e7fb8}
.ph .ic.ic-b{background:var(--amber)}
.ph .chev{color:var(--tx3);flex:0 0 auto;transition:transform .25s}
.panel[data-open="0"] .ph .chev{transform:rotate(-90deg)}
.panel[data-open="1"] .ph{border-bottom-color:var(--line)}
.panel[data-open="0"] .pb{display:none}
.pb{padding:10px 12px 12px;min-width:0}
.panel.compact .pb{padding-top:8px}

/* ══════════ 任务 ══════════ */
.questhead{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.ring{position:relative;width:46px;height:46px;flex:0 0 auto;display:grid;place-items:center}
.ring svg{position:absolute;inset:0}
.ring b{
  position:relative;font-family:var(--mono);font-size:12px;font-weight:400;color:var(--gold2);
  font-variant-numeric:tabular-nums;
}
.ring b em{font-style:normal;font-size:8px;color:var(--tx3);margin-left:1px}
.qsum{min-width:0}
.qsum b{display:block;font-size:13px;font-weight:600;color:var(--tx);letter-spacing:.04em}
.qsum b em{font-style:normal;font-size:9.5px;color:var(--tx3);font-weight:400;margin-left:4px;letter-spacing:.06em}
.qsum span{
  display:block;font-size:10px;color:var(--tx3);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.quest{display:flex;flex-direction:column;gap:3px;margin-bottom:9px}
.q{
  display:flex;align-items:center;gap:8px;padding:5px 7px;
  border:1px solid transparent;border-radius:2px;
  background:rgba(255,255,255,.022);transition:background .2s,border-color .2s;
  cursor:default;min-width:0;
}
.q:hover{background:rgba(255,255,255,.05)}
.q .bx{
  width:14px;height:14px;flex:0 0 auto;border:1px solid var(--line2);border-radius:2px;
  display:grid;place-items:center;font-size:8px;color:transparent;transition:.25s;
}
.q .tx{flex:1 1 auto;min-width:0;font-size:11px;color:var(--tx2);line-height:1.32;transition:color .25s}
.q .rl{font-family:var(--mono);font-size:8.5px;color:var(--tx3);letter-spacing:.02em;flex:0 0 auto}
.q.done{opacity:.6}
.q.done .bx{background:var(--green);border-color:var(--green);color:#05070b}
.q.done .tx{text-decoration:line-through;color:var(--tx3)}
.q.active{border-color:var(--gold-dim);background:rgba(232,192,122,.07)}
.q.active .tx{color:var(--tx)}
.q.active .bx{animation:qpulse 2.2s infinite}
@keyframes qpulse{0%,100%{box-shadow:0 0 0 0 rgba(232,192,122,.4)}55%{box-shadow:0 0 0 4px rgba(232,192,122,0)}}
.scorebar{
  display:flex;align-items:center;gap:10px;padding-top:9px;border-top:1px solid var(--line);
}
.lv{display:flex;align-items:baseline;gap:1px;flex:0 0 auto}
.lv b{font-family:var(--disp);font-weight:300;font-size:24px;color:var(--gold2);line-height:.9}
.lv em{font-style:normal;font-size:8.5px;color:var(--tx3);letter-spacing:.08em}
.xpwrap{flex:1 1 auto;min-width:0}
.xp{height:3px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden}
.xp i{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--gold),var(--gold2));
  box-shadow:0 0 8px rgba(232,192,122,.45);
  transition:width .65s cubic-bezier(.2,.8,.2,1);
}
.xplab{
  display:flex;justify-content:space-between;gap:6px;margin-top:5px;
  font-family:var(--mono);font-size:8.5px;color:var(--tx3);letter-spacing:.02em;
}
.xplab i{font-style:normal;color:var(--tx2)}
.badgerow{display:flex;gap:5px;margin-top:9px}
.badgerow i{
  flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.09);
  transition:.4s;position:relative;
}
.badgerow i.on{background:var(--gold);box-shadow:0 0 8px rgba(232,192,122,.5)}

/* ══════════ 容量 ══════════ */
.caphero{text-align:center;padding:0 0 9px;border-bottom:1px solid var(--line);margin-bottom:9px}
.capnum{display:flex;align-items:baseline;justify-content:center;gap:5px}
.capnum span{
  font-family:var(--disp);font-weight:300;font-size:clamp(28px,2.6vw,38px);
  letter-spacing:.01em;color:var(--gold2);line-height:.94;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum";
}
.capnum em{font-style:normal;font-size:10px;color:var(--tx3);letter-spacing:.2em}
.capsub{font-size:9.5px;color:var(--tx3);margin-top:5px;letter-spacing:.1em}
.tierbars{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.tb{
  display:flex;align-items:center;gap:8px;cursor:pointer;
  background:none;border:1px solid transparent;border-radius:2px;padding:2px 4px;
  transition:.18s;text-align:left;width:100%;
}
.tb:hover{background:rgba(255,255,255,.05);border-color:var(--line)}
.tb .nm{width:54px;flex:0 0 auto;font-size:10px;color:var(--tx2);white-space:nowrap}
.tb .bar{flex:1 1 auto;height:6px;background:rgba(255,255,255,.06);border-radius:1px;overflow:hidden;min-width:20px}
.tb .bar i{display:block;height:100%;width:0;transition:width .85s cubic-bezier(.2,.8,.2,1)}
.tb .vl{
  flex:0 0 auto;width:48px;text-align:right;font-family:var(--mono);font-size:9.5px;
  color:var(--tx);letter-spacing:0;
}
.tb:hover .nm{color:var(--tx)}
.czhead{
  display:flex;align-items:center;justify-content:space-between;gap:6px;
  font-size:9px;color:var(--tx3);letter-spacing:.12em;margin-bottom:6px;
}
.czhead .cztip{letter-spacing:.04em;color:rgba(107,122,138,.85);font-size:8.5px}
.czgrid{display:grid;grid-template-columns:repeat(10,1fr);gap:3px}
.cz{
  aspect-ratio:1;border-radius:1px;cursor:pointer;position:relative;
  border:1px solid transparent;background:rgba(232,192,122,.16);padding:0;
  transition:transform .15s,border-color .15s,box-shadow .15s;
}
.cz:hover{transform:scale(1.16);border-color:var(--gold)}
.cz.on{border-color:var(--gold2);box-shadow:0 0 0 1px var(--gold2),0 0 10px rgba(232,192,122,.55)}
.capextra{
  display:flex;gap:1px;margin-top:10px;border-top:1px solid var(--line);padding-top:8px;
}
.cx{flex:1;text-align:center;min-width:0}
.cx b{display:block;font-family:var(--mono);font-size:12px;font-weight:400;color:var(--tx)}
.cx span{font-size:8.5px;color:var(--tx3);letter-spacing:.08em;white-space:nowrap}
.rowtable{margin-top:8px}
.rt-scroll{max-height:190px;overflow:auto;border:1px solid var(--line);border-radius:2px}
.rt-table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:9px}
.rt-table th,.rt-table td{padding:3px 5px;text-align:right;white-space:nowrap;border-bottom:1px solid rgba(255,255,255,.05)}
.rt-table th{position:sticky;top:0;background:var(--panel-solid);color:var(--tx3);font-weight:400;letter-spacing:.06em;z-index:1}
.rt-table td:first-child,.rt-table th:first-child{text-align:left;color:var(--tx2)}
.rt-table tr.tierhead td{
  background:rgba(232,192,122,.08);color:var(--gold2);letter-spacing:.14em;font-family:var(--cjk);
  font-size:9px;padding-top:5px;
}
.rt-table tr:hover td{background:rgba(255,255,255,.045)}
.rt-table td.ai{color:var(--amber)}

/* ══════════ 疏散 ══════════ */
.flowrow,.flowrow2{display:flex;gap:5px;margin-bottom:8px}
.flowrow .btn{flex:1}
.flowrow2 .btn{flex:1}
.flowstats{display:flex;gap:1px;margin-bottom:8px}
.flowstats>div{flex:1 1 0;text-align:center;min-width:0}
.flowstats b{
  display:block;font-family:var(--mono);font-size:13px;font-weight:400;color:var(--tx);
  font-variant-numeric:tabular-nums;
}
.flowstats span{font-size:8.5px;color:var(--tx3);letter-spacing:.08em}
.flowbar{
  height:3px;background:rgba(255,255,255,.07);border-radius:2px;overflow:hidden;margin-bottom:8px;
}
.flowbar i{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--red),var(--amber),var(--green));
  transition:width .3s linear;
}
.flowlegend{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.flowlegend span{display:flex;align-items:center;gap:4px;font-size:8.5px;color:var(--tx3);letter-spacing:.06em}
.flowlegend i{width:6px;height:6px;border-radius:1px}
#flScore{margin-left:auto;font-family:var(--mono);color:var(--gold);letter-spacing:.02em}

/* ══════════ 分段 / 网格按钮 / 滑块 ══════════ */
.seg{
  display:flex;background:rgba(255,255,255,.045);border-radius:2px;padding:2px;gap:2px;
}
.seg button{
  flex:1 1 0;padding:6px 0;background:none;border:0;color:var(--tx3);
  font-size:10.5px;letter-spacing:.08em;cursor:pointer;border-radius:1px;transition:.18s;
  min-width:0;white-space:nowrap;
}
.seg button:hover{color:var(--tx2)}
.seg button.on{
  background:rgba(232,192,122,.16);color:var(--gold2);
  box-shadow:inset 0 0 0 1px rgba(232,192,122,.32);
}
#pViewBody>.seg{margin-bottom:10px}
.seglab{font-size:9px;color:var(--tx3);letter-spacing:.18em;margin:0 0 6px 1px}
.grid4{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-bottom:10px}
.grid4 button{
  padding:7px 0;background:rgba(255,255,255,.04);border:1px solid transparent;
  color:var(--tx2);font-size:10.5px;letter-spacing:.04em;cursor:pointer;
  border-radius:2px;transition:.16s;min-width:0;
}
.grid4 button:hover{background:rgba(255,255,255,.085);color:var(--tx)}
.grid4 button.on{background:rgba(111,211,224,.14);border-color:rgba(111,211,224,.42);color:#c2eef4}

.sliderrow{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.sliderrow label{font-size:10px;color:var(--tx2);width:56px;flex:0 0 auto;white-space:nowrap}
.sliderrow b{
  font-family:var(--mono);font-size:9.5px;color:var(--gold);width:36px;text-align:right;flex:0 0 auto;
}
input[type=range]{
  -webkit-appearance:none;appearance:none;flex:1 1 auto;min-width:30px;
  height:18px;background:transparent;outline:0;cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{
  height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold-dim),rgba(255,255,255,.12));
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:12px;height:12px;border-radius:50%;margin-top:-5px;
  background:var(--gold);cursor:pointer;box-shadow:0 0 0 3px rgba(232,192,122,.18),0 0 10px rgba(232,192,122,.35);
  transition:box-shadow .2s;
}
input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 0 0 5px rgba(232,192,122,.26)}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 5px rgba(244,226,189,.5)}
input[type=range]::-moz-range-track{height:2px;border-radius:2px;background:rgba(255,255,255,.14)}
input[type=range]::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:var(--gold)}

/* ══════════ 按钮 ══════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:32px;padding:0 13px;min-width:0;
  background:var(--panel);border:1px solid var(--line);border-radius:2px;
  color:var(--tx2);font-size:11px;letter-spacing:.08em;cursor:pointer;
  backdrop-filter:var(--blur);transition:.18s;white-space:nowrap;
}
.btn:hover{color:var(--tx);border-color:var(--line2);background:var(--panel2)}
.btn.on,.btn[aria-pressed="true"]{
  color:#0a0f16;background:var(--gold);border-color:var(--gold);font-weight:600;
}
.btn.on:hover,.btn[aria-pressed="true"]:hover{background:var(--gold2);color:#0a0f16}
.btn.xs{height:25px;padding:0 9px;font-size:10px;letter-spacing:.05em}
.btn.sm{height:27px;padding:0 10px;font-size:10.5px}
.btn.wide{width:100%}
.btn.ghost{background:rgba(255,255,255,.035)}
.btn.ghost:hover{background:rgba(255,255,255,.075)}
.btn:disabled{opacity:.36;cursor:not-allowed}

/* ══════════ 图层 ══════════ */
.layers{display:flex;flex-direction:column;gap:1px}
.ly{
  display:flex;align-items:center;gap:8px;padding:4px 5px;border-radius:2px;
  cursor:pointer;transition:.15s;user-select:none;border:1px solid transparent;
  background:none;width:100%;text-align:left;
}
.ly:hover{background:rgba(255,255,255,.055)}
.ly .sw{width:3px;height:13px;border-radius:1px;flex:0 0 auto;opacity:.95}
.ly .nm{
  flex:1 1 auto;min-width:0;font-size:10.5px;color:var(--tx2);letter-spacing:.03em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ly .eyes{
  position:relative;width:22px;height:12px;flex:0 0 auto;border-radius:6px;
  background:rgba(255,255,255,.1);transition:.2s;
}
.ly .eyes::after{
  content:"";position:absolute;top:2px;left:2px;width:8px;height:8px;border-radius:50%;
  background:var(--tx3);transition:.2s;
}
.ly.on .eyes{background:rgba(232,192,122,.34)}
.ly.on .eyes::after{left:12px;background:var(--gold2)}
.ly.on .nm{color:var(--tx)}
.ly.off{opacity:.45}
.ly.solo{background:rgba(232,192,122,.11);border-color:rgba(232,192,122,.34)}
.hint{font-size:9px;color:var(--tx3);letter-spacing:.06em;margin-top:8px;text-align:center}

/* ══════════ 建造时间轴 ══════════ */
.buildstage{display:flex;gap:3px;margin-bottom:9px}
.buildstage button{
  flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:5px 0 4px;background:rgba(255,255,255,.04);border:1px solid transparent;
  border-radius:2px;color:var(--tx3);cursor:pointer;transition:.16s;
}
.buildstage button b{font-family:var(--mono);font-size:9px;font-weight:400;letter-spacing:0}
.buildstage button span{font-size:9px;letter-spacing:.02em;white-space:nowrap}
.buildstage button:hover{background:rgba(255,255,255,.08);color:var(--tx2)}
.buildstage button.on{background:rgba(232,192,122,.16);border-color:var(--gold-dim);color:var(--gold2)}
.builddesc{
  font-size:9.5px;color:var(--tx3);letter-spacing:.03em;margin-bottom:8px;min-height:14px;
  line-height:1.45;
}

/* ══════════ 底部 ══════════ */
.bottom{
  display:flex;align-items:center;gap:10px;
  min-width:0;height:var(--bot);
}
.shots{
  display:flex;gap:5px;flex:1 1 auto;min-width:0;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  padding-bottom:1px;
}
.shots::-webkit-scrollbar{height:0}
.sh{
  flex:0 0 auto;display:flex;align-items:center;gap:6px;
  height:32px;padding:0 11px;
  background:var(--panel);border:1px solid var(--line);border-radius:99px;
  color:var(--tx3);font-size:10.5px;letter-spacing:.05em;cursor:pointer;
  backdrop-filter:var(--blur);transition:.18s;white-space:nowrap;
}
.sh b{font-family:var(--mono);font-size:8.5px;font-weight:400;opacity:.65}
.sh:hover{color:var(--tx2);border-color:var(--line2)}
.sh.on{color:var(--gold2);border-color:var(--gold-dim);background:rgba(46,36,20,.8)}
.sh.on b{color:var(--gold);opacity:1}
.modes{display:flex;gap:5px;flex:0 0 auto}
.modes .btn{height:32px;padding:0 12px}
.modes .btn em{font-style:normal}

/* ══════════ 小地图 / 罗盘 ══════════ */
.mmwrap{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  backdrop-filter:var(--blur);
  padding:7px;margin:0 0 2px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.mm-head{
  display:flex;align-items:center;justify-content:space-between;
  font-size:8.5px;letter-spacing:.2em;color:var(--tx3);margin-bottom:5px;padding:0 1px;
}
.mm-head b{font-family:var(--mono);font-weight:400;color:var(--gold);letter-spacing:.06em}
.mm-body{display:flex;align-items:flex-start;gap:8px}
.mmwrap canvas{display:block;width:132px;height:132px;border-radius:2px;
  background:radial-gradient(circle at 50% 50%,rgba(20,32,44,.55),rgba(6,10,15,.72))}
.compass{width:34px;flex:0 0 auto;display:grid;place-items:center}
.compass-dial{
  position:relative;width:32px;height:32px;border-radius:50%;
  border:1px solid rgba(200,214,232,.22);
  display:grid;place-items:center;transition:transform .2s linear;
}
.compass-dial b{
  position:absolute;font-family:var(--mono);font-size:6.5px;font-weight:400;color:var(--tx3);
}
.compass-dial b:nth-child(1){top:1px;color:var(--red)}
.compass-dial b:nth-child(2){right:2px}
.compass-dial b:nth-child(3){bottom:1px}
.compass-dial b:nth-child(4){left:2px}
.compass-dial .needle{
  width:2px;height:10px;background:linear-gradient(180deg,var(--gold) 50%,rgba(255,255,255,.3) 50%);
  border-radius:1px;
}
.mm-foot{
  display:flex;justify-content:space-between;gap:6px;margin-top:5px;
  font-family:var(--mono);font-size:8px;color:var(--tx3);letter-spacing:.02em;
}
.guide{
  display:flex;align-items:center;gap:9px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:6px 11px;backdrop-filter:var(--blur);
  pointer-events:none;
}
.garrow{
  color:var(--gold);width:36px;height:36px;display:grid;place-items:center;flex:0 0 auto;
  transition:transform .18s cubic-bezier(.2,.8,.2,1);
}
.garrow svg{width:20px;height:20px;filter:drop-shadow(0 0 6px rgba(232,192,122,.5))}
.gtxt{line-height:1.3;min-width:0}
.gtxt b{display:block;font-size:10.5px;font-weight:500;color:var(--tx);letter-spacing:.04em;white-space:nowrap}
.gtxt span{font-family:var(--mono);font-size:9px;color:var(--gold);letter-spacing:.02em}

/* ══════════ 构件信息卡 ══════════ */
.hintcard{
  position:fixed;z-index:22;width:264px;
  background:var(--panel-solid);border:1px solid var(--line2);border-radius:var(--r);
  backdrop-filter:blur(22px);
  box-shadow:0 18px 50px rgba(0,0,0,.6);
  animation:hcin .22s cubic-bezier(.2,.8,.2,1);
}
@keyframes hcin{from{opacity:0;transform:translateY(6px) scale(.985)}to{opacity:1;transform:none}}
.hintcard header{display:flex;align-items:center;gap:7px;padding:9px 10px 7px}
.hintcard .hk{
  width:4px;height:14px;border-radius:1px;background:var(--gold);
  box-shadow:0 0 10px rgba(232,192,122,.6);flex:0 0 auto;
}
.hintcard header b{
  flex:1 1 auto;min-width:0;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--gold2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hintcard .xc{
  background:none;border:0;color:var(--tx3);font-size:13px;cursor:pointer;
  padding:2px 4px;line-height:1;transition:.2s;flex:0 0 auto;border-radius:2px;
}
.hintcard .xc:hover{color:var(--tx)}
.hc-spec{
  font-size:10.5px;color:var(--tx2);line-height:1.5;padding:0 10px 8px;
  border-bottom:1px solid var(--line);
}
.hc-data{
  display:grid;grid-template-columns:1fr 1fr;gap:2px 8px;padding:8px 10px;
  font-family:var(--mono);font-size:9px;color:var(--tx3);
}
.hc-data i{font-style:normal;color:var(--tx2)}
.hc-btns{display:flex;gap:4px;padding:0 10px 10px}
.hc-btns .btn{flex:1 1 0;padding:0 6px}

/* ══════════ 照片模式 ══════════ */
/* hidden 属性必须压过 display:flex，否则照片模式控制条会常驻显示 */
.photobar[hidden]{display:none}
.photobar{
  position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:26;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;
  max-width:calc(100vw - 28px);  padding:10px 14px;
  background:var(--panel-solid);border:1px solid var(--line2);border-radius:var(--r);
  backdrop-filter:blur(22px);box-shadow:0 18px 50px rgba(0,0,0,.6);
}
.pbrand{
  display:flex;align-items:center;gap:7px;font-size:11px;letter-spacing:.12em;color:var(--gold2);
  flex:0 0 auto;
}
.pbrand i{width:5px;height:5px;border-radius:50%;background:var(--red);box-shadow:0 0 9px var(--red);
  animation:rec 1.4s infinite}
@keyframes rec{50%{opacity:.25}}
.pbrand em{font-style:normal;font-family:var(--disp);font-size:8px;letter-spacing:.3em;color:var(--tx3)}
.pslider{display:flex;align-items:center;gap:7px;flex:0 1 190px;min-width:130px}
.pslider label{font-size:9.5px;color:var(--tx3);letter-spacing:.1em;flex:0 0 auto}
.pslider b{font-family:var(--mono);font-size:9px;color:var(--gold);width:38px;text-align:right;flex:0 0 auto}
.pfilters{display:flex;gap:2px;background:rgba(255,255,255,.045);padding:2px;border-radius:2px}
.pfilters button{
  padding:5px 9px;background:none;border:0;border-radius:1px;color:var(--tx3);
  font-size:10px;letter-spacing:.05em;cursor:pointer;transition:.16s;white-space:nowrap;
}
.pfilters button:hover{color:var(--tx2)}
.pfilters button.on{background:rgba(232,192,122,.17);color:var(--gold2)}
.pacts{display:flex;gap:5px;flex:0 0 auto}
/* 照片模式滤镜（作用于 WebGL 画布） */
body.photo-filter-warm canvas#gl{filter:saturate(1.12) sepia(.14) brightness(1.04)}
body.photo-filter-mono canvas#gl{filter:grayscale(1) contrast(1.1)}
body.photo-filter-cyan canvas#gl{filter:hue-rotate(-12deg) saturate(1.15) brightness(1.02)}
body.photo #hud .left,body.photo #hud .right,body.photo #hud .bottom,
body.photo #hud .top .readout,body.photo #hud .top .brand{opacity:0!important;pointer-events:none!important}
body.photo #grain{opacity:.02}
body.photo-hide #hud .left,body.photo-hide #hud .right,body.photo-hide #hud .bottom,
body.photo-hide #hud .top,body.photo-hide .mmwrap,body.photo-hide .guide,
body.photo-hide .photobar{opacity:0!important;pointer-events:none!important}

/* ══════════ 漫游虚拟摇杆 ══════════ */
.joy{position:fixed;left:18px;bottom:76px;z-index:24;width:112px;height:112px;touch-action:none}
.joy-base{
  position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle,rgba(10,16,24,.7),rgba(10,16,24,.35));
  border:1px solid var(--line2);backdrop-filter:blur(10px);
}
.joy-knob{
  position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;
  border-radius:50%;background:radial-gradient(circle at 35% 32%,var(--gold2),var(--gold));
  box-shadow:0 4px 18px rgba(0,0,0,.5),0 0 22px rgba(232,192,122,.4);
  transition:transform .06s linear;
}
.touchlook{position:fixed;inset:0;z-index:3}
.touchlook[hidden],.joy[hidden]{display:none}

/* ══════════ 手机底部栏 ══════════ */
.mobbar{display:none}

/* ══════════ Toast ══════════ */
#toastWrap{
  position:fixed;right:var(--gap);top:calc(var(--top) + var(--gap) * 2);z-index:28;
  display:flex;flex-direction:column;gap:6px;align-items:flex-end;
  pointer-events:none;max-width:min(320px,calc(100vw - 24px));
}
.toast{
  display:flex;align-items:center;gap:9px;
  background:linear-gradient(98deg,rgba(32,25,13,.95),rgba(13,18,25,.95));
  border:1px solid rgba(232,192,122,.42);border-left:2px solid var(--gold);
  border-radius:2px;padding:8px 13px;backdrop-filter:blur(18px);
  animation:tin .4s cubic-bezier(.2,.8,.2,1);max-width:100%;
  box-shadow:0 10px 34px rgba(0,0,0,.5);
}
.toast.out{animation:tout .38s forwards}
@keyframes tin{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
@keyframes tout{to{opacity:0;transform:translateX(20px)}}
.toast .ti{font-size:15px;flex:0 0 auto;line-height:1}
.toast .tt{min-width:0}
.toast .tt b{display:block;font-size:11px;color:var(--gold2);letter-spacing:.05em;margin-bottom:1px}
.toast .tt span{font-size:10px;color:var(--tx2);line-height:1.4;display:block}
.toast.plain{border-color:var(--line2);border-left-color:var(--cyan)}
.toast.plain .tt b{color:#c2eef4}
.toast.plain .ti{color:var(--cyan)}
.toast.gold .ti{color:var(--gold2)}
.toast.green{border-color:rgba(95,191,138,.45);border-left-color:var(--green)}
.toast.green .tt b{color:#a9e8c6}
.toast.red{border-color:rgba(226,96,63,.45);border-left-color:var(--red)}
.toast.red .tt b{color:#ffc2b2}

/* ══════════ 升级动画 ══════════ */
.levelup{
  position:fixed;left:50%;top:34%;transform:translate(-50%,-50%) scale(.86);
  z-index:32;pointer-events:none;text-align:center;opacity:0;transition:opacity .4s,transform .5s cubic-bezier(.2,.8,.2,1);
}
.levelup.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.levelup b{
  display:block;font-family:var(--disp);font-weight:300;font-size:44px;letter-spacing:.16em;
  color:var(--gold2);text-shadow:0 0 30px rgba(232,192,122,.6),0 2px 20px rgba(0,0,0,.7);
}
.levelup em{
  display:block;font-style:normal;font-size:11px;letter-spacing:.4em;color:var(--gold);
  margin-top:4px;text-shadow:0 2px 14px rgba(0,0,0,.8);
}
.lu-ring{
  position:absolute;left:50%;top:50%;width:190px;height:190px;margin:-95px 0 0 -95px;
  border-radius:50%;border:1px solid rgba(232,192,122,.5);
  animation:luring 1.6s ease-out;
}
@keyframes luring{from{transform:scale(.5);opacity:.9}to{transform:scale(1.5);opacity:0}}

/* ══════════ 悬浮提示 / 漫游提示 ══════════ */
#hoverTip{
  position:fixed;z-index:20;pointer-events:none;opacity:0;transition:opacity .14s;
  background:rgba(6,10,15,.94);border:1px solid var(--line2);border-radius:2px;
  padding:5px 9px;backdrop-filter:blur(10px);max-width:240px;
}
#hoverTip.on{opacity:1}
#hoverTip b{display:block;font-size:10.5px;color:var(--gold2);letter-spacing:.05em;margin-bottom:1px}
#hoverTip span{font-size:9.5px;color:var(--tx2);line-height:1.4}
#walkHint{
  position:fixed;left:50%;bottom:calc(var(--bot) + 24px);transform:translateX(-50%);z-index:24;
  background:rgba(6,10,15,.86);border:1px solid var(--line);border-radius:2px;
  padding:7px 15px;font-size:10.5px;color:var(--tx2);letter-spacing:.06em;
  backdrop-filter:blur(14px);transition:.35s;white-space:nowrap;max-width:calc(100vw - 24px);
  overflow:hidden;text-overflow:ellipsis;
}
#walkHint b{color:var(--gold2);font-family:var(--mono);font-weight:400}
#walkHint.hidden{opacity:0;transform:translateX(-50%) translateY(10px);pointer-events:none}

/* ══════════ 浮层（帮助 / 设置） ══════════ */
.sheet{
  position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:20px;
  background:rgba(3,5,8,.8);backdrop-filter:blur(10px);
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.sheet.on{opacity:1;pointer-events:auto}
.sheet-in{
  width:min(780px,100%);max-height:min(88vh,760px);overflow:auto;
  background:linear-gradient(160deg,rgba(17,23,32,.985),rgba(8,12,17,.985));
  border:1px solid var(--line2);border-radius:3px;padding:20px 24px;
  box-shadow:0 30px 80px rgba(0,0,0,.65);transform:translateY(12px);transition:transform .3s;
  scrollbar-width:thin;
}
.sheet-in.narrow{width:min(420px,100%)}
.sheet.on .sheet-in{transform:none}
.sheet-in header{
  display:flex;align-items:center;margin-bottom:16px;padding-bottom:12px;
  border-bottom:1px solid var(--line);
}
.sheet-in h2{font-size:13px;font-weight:500;letter-spacing:.24em;color:var(--gold2)}
.sheet-in .x{
  margin-left:auto;background:none;border:1px solid transparent;border-radius:2px;
  color:var(--tx3);font-size:14px;cursor:pointer;padding:3px 8px;transition:.2s;
}
.sheet-in .x:hover{color:var(--tx)}
.helpgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:20px}
.helpgrid h4{
  font-size:9.5px;letter-spacing:.24em;color:var(--gold);margin-bottom:8px;
  text-transform:uppercase;font-weight:500;
}
.helpgrid ul{list-style:none;display:flex;flex-direction:column;gap:5px}
.helpgrid li{
  font-size:10.5px;color:var(--tx2);line-height:1.5;display:flex;
  align-items:baseline;gap:6px;letter-spacing:.01em;
}
.helpgrid ul.about li{display:block;padding-left:9px;position:relative}
.helpgrid ul.about li::before{
  content:"";position:absolute;left:0;top:7px;width:3px;height:3px;background:var(--gold);border-radius:50%;
}
kbd{
  font-family:var(--mono);font-size:9.5px;padding:1px 5px;white-space:nowrap;
  background:rgba(255,255,255,.07);border:1px solid var(--line2);border-radius:2px;color:var(--tx);
}
.setrow{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:10px 0;border-bottom:1px solid var(--line);
}
.setrow>label{font-size:11.5px;color:var(--tx2);letter-spacing:.06em}
.setrow .seg{width:186px;flex:0 0 auto}
.switch{
  position:relative;width:42px;height:22px;flex:0 0 auto;border-radius:11px;
  background:rgba(255,255,255,.12);border:1px solid var(--line2);cursor:pointer;transition:.24s;
}
.switch i{
  position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:var(--tx3);transition:.24s;
}
.switch.on{background:rgba(232,192,122,.3);border-color:var(--gold-dim)}
.switch.on i{left:22px;background:var(--gold2)}
.setnote{font-size:10px;color:var(--tx3);line-height:1.6;margin-top:12px;letter-spacing:.02em}
.setnote b{color:var(--tx2);font-weight:500}

/* ══════════ 载入 ══════════ */
#loader{
  position:fixed;inset:0;z-index:60;display:grid;place-items:center;
  background:#05070b;transition:opacity .9s ease,visibility .9s;
}
#loader.off{opacity:0;visibility:hidden}
.ld-inner{text-align:center;width:min(340px,80vw)}
.ld-mark{color:var(--gold);margin-bottom:16px;animation:breathe 3.4s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.55;transform:scale(.98)}50%{opacity:1;transform:scale(1)}}
.ld-title{font-size:20px;letter-spacing:.32em;font-weight:300;color:var(--tx)}
.ld-title span{
  display:block;font-family:var(--disp);font-size:8.5px;letter-spacing:.42em;color:var(--tx3);margin-top:7px;
}
.ld-sub{font-size:10px;color:var(--tx3);letter-spacing:.14em;margin-top:14px}
.ld-bar{height:1px;background:rgba(255,255,255,.1);margin:20px 0 12px;overflow:hidden}
.ld-bar i{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--gold),var(--gold2));
  transition:width .5s cubic-bezier(.2,.8,.2,1);box-shadow:0 0 12px var(--gold);
}
.ld-step{
  font-family:var(--mono);font-size:9px;color:var(--tx3);letter-spacing:.08em;height:12px;
}

/* ══════════════════════════════════════════════════════════════════════
   响应式三档
   ① ≥1280：三栏（图标轨道 + 左栏 + 右栏）
   ② 768–1280：侧栏收成图标轨道，点开展开为抽屉
   ③ <768：移动端：底部胶囊 sheet + 抽屉 + 虚拟摇杆
   ══════════════════════════════════════════════════════════════════════ */

/* ① / ② 图标轨道常显 */
@media (min-width:1280px){
  .rail{display:flex}
}
@media (max-width:1279.98px){
  :root{--rail:52px;--bot:50px}
  #hud{
    grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:
      "top top"
      "lrail mid"
      "bot bot";
  }
  .rail{display:flex}
  /* 面板列变成悬浮抽屉 */
  .left,.right{position:static;display:contents}
  #colLeft,#colRight{
    position:fixed;top:calc(var(--top) + var(--gap) * 2);bottom:calc(var(--bot) + var(--gap) * 2);
    width:min(320px,86vw);z-index:36;
    padding:0;gap:8px;
    background:transparent;
    transition:transform .34s cubic-bezier(.2,.8,.2,1),opacity .28s;
    opacity:0;pointer-events:none;
  }
  #colLeft{left:calc(var(--rail) + var(--gap) * 2)}
  #colRight{right:var(--gap)}
  #colLeft.open,#colRight.open{opacity:1;pointer-events:auto;transform:none}
  #colLeft{transform:translateX(calc(-100% - 24px))}
  #colRight{transform:translateX(calc(100% + 24px))}
  .mmwrap{margin-bottom:calc(var(--gap) + 2px)}
  .guide{display:none}
  #toastWrap{right:var(--gap);top:calc(var(--top) + var(--gap) * 2)}
  .ro{flex:1 1 0;padding:0 6px}
  .ro:nth-child(4){display:none}
  .bottom{gap:8px}
}

/* ② 中小屏：侧栏收成图标轨道（左右轨道合并成一条竖条） */
@media (max-width:1279.98px) and (min-width:768px){
  .left{position:relative;z-index:12}
  .right{display:contents}
  #railLeft{display:flex}
  #railRight{
    display:flex;position:fixed;left:var(--gap);top:calc(var(--top) + var(--gap) * 2 + 240px);
    width:var(--rail);z-index:12;
  }
}

/* ③ 移动端 */
@media (max-width:767.98px){
  :root{--gap:8px;--top:52px;--bot:0px;--rail:0px;--dcol:0px}
  #hud{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:var(--top) minmax(0,1fr);
    grid-template-areas:"top" "mid";
    padding:8px;
  }
  .top{gap:6px}
  .brand{padding:0 9px;gap:6px}
  .brand .mark{width:22px;height:22px}
  .brand .name{font-size:12px;letter-spacing:.1em}
  .brand .name em{display:none}
  .readout{display:none}
  .chip{min-width:32px;height:32px;padding:0 9px;font-size:10px;align-self:center}
  .topright{gap:4px;height:32px;margin-left:auto}
  .chip.icon{width:32px;padding:0}
  .left,.right{display:contents}
  #railLeft,#railRight{display:none!important}
  #colLeft,#colRight{
    position:fixed;left:0;right:0;bottom:0;top:auto;
    width:100%;height:auto;max-height:74vh;
    transform:translateY(102%);
    z-index:42;
    padding:0 8px calc(66px + env(safe-area-inset-bottom));
    gap:8px;
    background:linear-gradient(180deg,rgba(6,10,15,0),rgba(4,7,11,.94) 16%);
    backdrop-filter:blur(4px);
    transition:transform .34s cubic-bezier(.2,.8,.2,1);
    opacity:1;pointer-events:none;
    overflow-y:auto;overscroll-behavior:contain;
  }
  #colLeft.open,#colRight.open{transform:none;pointer-events:auto}
  #colLeft::before,#colRight::before{
    content:"";display:block;flex:0 0 auto;width:38px;height:4px;border-radius:2px;
    background:rgba(200,214,232,.3);margin:6px auto 0;
  }
  .pmask{
    position:fixed;inset:0;z-index:41;background:rgba(2,4,7,.62);
    opacity:0;pointer-events:none;transition:opacity .3s;
  }
  .pmask.on{opacity:1;pointer-events:auto}
  .panel{background:rgba(11,16,23,.97)}
  .mmwrap{
    position:fixed;right:8px;top:calc(var(--top) + 8px);margin:0;z-index:11;
    padding:6px;
  }
  .mmwrap canvas{width:96px;height:96px}
  .mm-head{display:none}
  .mm-foot{display:none}
  .compass{display:none}
  .guide{display:none}
  #toastWrap{
    position:fixed;left:8px;right:8px;top:calc(var(--top) + 8px);
    align-items:stretch;max-width:none;z-index:30;
  }
  #toastWrap .toast{max-width:none}
  .bottom{display:none}
  .mobbar{
    position:fixed;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));
    z-index:45;display:flex;gap:4px;
    padding:5px;border-radius:14px;
    background:var(--panel-solid);border:1px solid var(--line2);
    backdrop-filter:blur(20px);box-shadow:0 12px 40px rgba(0,0,0,.55);
  }
  .mbtn{
    flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:2px;height:46px;border:0;border-radius:9px;background:none;color:var(--tx2);
    cursor:pointer;transition:.18s;
  }
  .mbtn em{font-style:normal;font-size:8.5px;letter-spacing:.02em}
  .mbtn:active,.mbtn.on{background:rgba(232,192,122,.16);color:var(--gold2)}
  /* 移动端机位 sheet */
  .shotsheet{
    position:fixed;left:8px;right:8px;bottom:calc(64px + env(safe-area-inset-bottom));z-index:44;
    display:flex;flex-wrap:wrap;gap:5px;justify-content:center;
    padding:10px;border-radius:14px;
    background:var(--panel-solid);border:1px solid var(--line2);
    backdrop-filter:blur(20px);box-shadow:0 16px 44px rgba(0,0,0,.6);
    transform:translateY(calc(100% + 90px));opacity:0;pointer-events:none;
    transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .25s;
  }
  .shotsheet.on{transform:none;opacity:1;pointer-events:auto}
  .shotsheet .sh{height:34px;padding:0 12px}
  .shotsheet .modes{margin-top:4px;width:100%;display:flex;gap:5px}
  .shotsheet .modes .btn{flex:1 1 0;justify-content:center;height:34px}
  /* 移动端：漫游摇杆 */
  .joy{width:104px;height:104px;left:12px;bottom:calc(72px + env(safe-area-inset-bottom))}
  .joy-knob{width:42px;height:42px;margin:-21px 0 0 -21px}
  .photobar{
    left:8px;right:8px;bottom:calc(64px + env(safe-area-inset-bottom));
    transform:none;max-width:none;gap:8px;padding:10px;justify-content:flex-start;
  }
  .pslider{flex:0 1 44%}
  .pfilters{order:4}
  .pacts{order:5;width:100%;display:flex;gap:5px}
  .pacts .btn{flex:1 1 0}
  .hintcard{width:min(300px,calc(100vw - 16px))}
  .sheet{padding:10px}
  .sheet-in{padding:16px;max-height:88vh}
  .helpgrid{grid-template-columns:1fr 1fr;gap:14px}
  .setrow .seg{width:150px}
  #walkHint{
    bottom:calc(72px + env(safe-area-inset-bottom));font-size:9.5px;padding:6px 10px;
    white-space:normal;text-align:center;max-width:calc(100vw - 140px);left:auto;right:12px;transform:none;
  }
  #walkHint.hidden{transform:translateY(10px)}
  .levelup b{font-size:34px}
}

/* 极矮屏幕：隐藏低价值模块 */
@media (max-height:680px) and (min-width:768px){
  .badgerow{display:none}
  .capsub{display:none}
}

/* ── 减少动态（系统偏好或设置开关） ── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
}
body.reduce-motion *,body.reduce-motion *::before,body.reduce-motion *::after{
  animation-duration:.001ms!important;animation-iteration-count:1!important;
  transition-duration:.001ms!important;
}
body.reduce-motion #grain{display:none}
body.reduce-motion .ld-mark{animation:none}


/* ═══════════════════════════════════════════════════════════════════════
   开场任务简报（briefing）
   ═══════════════════════════════════════════════════════════════════════ */
.brief{
  position:fixed;inset:0;z-index:120;
  display:grid;place-items:center;
  padding:24px;
  background:radial-gradient(120% 90% at 50% 40%,rgba(5,7,11,.46),rgba(5,7,11,.90));
  animation:brFade .4s ease both;
}
.brief[hidden]{display:none}
@keyframes brFade{from{opacity:0}to{opacity:1}}
.brief-in{
  width:min(560px,100%);
  max-height:calc(100vh - 48px);
  overflow:auto;
  padding:26px 28px 22px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:linear-gradient(180deg,rgba(12,18,26,.94),rgba(8,12,18,.96));
  box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(232,192,122,.07) inset;
  position:relative;
  animation:brRise .45s cubic-bezier(.2,.8,.25,1) both .05s;
}
@keyframes brRise{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.brief-in::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-dim),var(--cyan),transparent);
  opacity:.7;
}
.brief-mark{color:var(--gold);opacity:.9;margin-bottom:6px;line-height:0}
.brief h2{
  font-family:var(--disp);font-weight:600;letter-spacing:.04em;
  font-size:30px;line-height:1.05;margin:0 0 2px;color:var(--tx);
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
}
.brief h2 span{
  font-family:var(--mono);font-size:12px;letter-spacing:.34em;
  color:var(--gold);font-weight:400;
}
.brief-sub{margin:0 0 18px;color:var(--tx2);font-size:12.5px;letter-spacing:.06em}
.brief-steps{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:9px}
.brief-steps li{
  display:grid;grid-template-columns:78px 1fr;gap:12px;align-items:baseline;
  padding:9px 11px;border:1px solid var(--line);border-radius:var(--r);
  background:rgba(255,255,255,.018);
}
.brief-steps b{
  font-family:var(--disp);font-weight:400;font-size:14px;letter-spacing:.12em;
  color:var(--gold2);
}
.brief-steps span{font-size:12.5px;line-height:1.55;color:var(--tx2)}
.brief-obj{
  display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:center;
  padding:11px 13px;margin-bottom:16px;
  border:1px solid rgba(111,211,224,.26);border-radius:var(--r);
  background:linear-gradient(90deg,rgba(111,211,224,.09),rgba(111,211,224,0) 70%);
}
.brief-obj .bo-tag{
  grid-row:1/3;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;
  color:var(--cyan);opacity:.9;
}
.brief-obj b{font-size:15px;color:var(--tx);font-weight:600}
.brief-obj i{grid-column:2;font-style:normal;font-size:12px;color:var(--tx2)}
.brief-btns{display:flex;gap:10px;flex-wrap:wrap}
.brief-foot{
  margin:14px 0 0;font-family:var(--mono);font-size:10.5px;
  color:var(--tx3);letter-spacing:.04em;
}
.brief kbd{
  font-family:var(--mono);font-size:10px;padding:1px 5px;border-radius:2px;
  border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--tx2);
}
@media (max-width:520px){
  .brief-in{padding:20px 18px 18px}
  .brief h2{font-size:24px}
  .brief-steps li{grid-template-columns:1fr;gap:3px}
  .brief-obj{grid-template-columns:1fr}
  .brief-obj .bo-tag{grid-row:auto}
  .brief-obj i{grid-column:1}
}
@media (prefers-reduced-motion:reduce){
  .brief,.brief-in{animation:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   潮汐调度台（疏散策略面板）
   ═══════════════════════════════════════════════════════════════════════ */
.disp{
  margin-top:11px;padding:10px 10px 9px;
  border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(180deg,rgba(111,211,224,.055),rgba(255,255,255,.012));
}
.disp-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.disp-head .dl{
  font-family:var(--disp);font-size:12px;letter-spacing:.18em;color:var(--cyan);
}
.teams{
  position:relative;display:flex;align-items:center;gap:6px;
  min-width:86px;height:18px;padding:0 7px;
  border:1px solid var(--line);border-radius:9px;overflow:hidden;
  background:rgba(0,0,0,.3);
}
.teams i{
  position:absolute;left:0;top:0;bottom:0;width:66%;
  background:linear-gradient(90deg,rgba(111,211,224,.55),rgba(111,211,224,.28));
  transition:width .25s ease;
}
.teams b{
  position:relative;font-family:var(--mono);font-size:10.5px;
  color:var(--tx);letter-spacing:.04em;
}
.teams.full i{background:linear-gradient(90deg,rgba(224,169,75,.5),rgba(224,169,75,.24))}
.disp-hint{
  margin:0 0 8px;font-size:10.5px;line-height:1.5;color:var(--tx3);
}
.exits{
  display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:8px;
}
.xbtn{
  position:relative;display:grid;gap:1px;
  padding:5px 4px 4px;border-radius:2px;cursor:pointer;
  border:1px solid var(--line);background:rgba(255,255,255,.028);
  color:var(--tx2);text-align:left;transition:.16s;
}
.xbtn:hover{border-color:var(--gold-dim);background:rgba(232,192,122,.08)}
.xbtn .xn{font-size:10.5px;letter-spacing:.04em;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xbtn .xs{font-family:var(--mono);font-size:8.5px;color:var(--tx3);letter-spacing:.02em}
.xbtn .xd{
  position:absolute;right:3px;top:3px;width:6px;height:6px;border-radius:50%;
  background:#6b7785;box-shadow:none;transition:.2s;
}
.xbtn.on{border-color:rgba(95,191,138,.5);background:rgba(95,191,138,.10);color:var(--tx)}
.xbtn.on .xd{background:#5fbf8a;box-shadow:0 0 7px #5fbf8a}
.xbtn.hot{border-color:rgba(226,96,63,.6);background:rgba(226,96,63,.12)}
.xbtn.hot .xd{background:#e2603f;box-shadow:0 0 7px #e2603f}
.xbtn.swap{border-color:rgba(224,169,75,.6);background:rgba(224,169,75,.12)}
.xbtn.swap .xd{background:#e0a94b;box-shadow:0 0 7px #e0a94b}
.xbtn.main .xn{color:var(--gold2)}
.xbtn[disabled]{opacity:.42;cursor:not-allowed}
.quads{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:8px}
.quad{display:grid;gap:3px}
.quad .ql{font-size:9.5px;color:var(--tx3);letter-spacing:.08em}
.quad .qb{height:4px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden}
.quad .qb i{display:block;height:100%;width:0;background:#5fbf8a;transition:width .2s ease,background .2s}
.flowrow2 .grade{
  font-family:var(--disp);font-size:12px;letter-spacing:.12em;color:var(--gold);
  margin-left:auto;
}
.flowrow2 .fin{font-size:10px;color:var(--tx3);margin-left:6px}
@media (max-width:420px){
  .exits{grid-template-columns:repeat(3,1fr)}
}

/* ═══════════════════════════════════════════════════════════════════════
   照片模式 · 构图评分
   ═══════════════════════════════════════════════════════════════════════ */
.pscore{
  display:flex;align-items:center;gap:8px;
  padding:4px 10px;border:1px solid var(--line);border-radius:var(--r);
  background:rgba(0,0,0,.28);
}
.pscore .psg{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--tx3)}
.pscore b{font-family:var(--disp);font-size:17px;letter-spacing:.04em;color:var(--gold2);min-width:26px;text-align:center}
.pscore .psb{font-family:var(--mono);font-size:9.5px;color:var(--tx3)}
/* ═══════════════════════════════════════════════════════════════════════
   建筑洞察图鉴
   ═══════════════════════════════════════════════════════════════════════ */
.codex{
  margin-top:10px;padding:9px 9px 8px;
  border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(180deg,rgba(167,120,214,.07),rgba(255,255,255,.012));
}
.codex.locked{opacity:.72}
.cx-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;
  font-family:var(--disp);font-size:11.5px;letter-spacing:.14em;color:#c6a8ee;
}
.cx-head b{font-family:var(--mono);font-size:10.5px;color:var(--tx2);letter-spacing:.02em}
.cx-list{display:grid;gap:3px;max-height:214px;overflow:auto}
.cxi{
  display:grid;grid-template-columns:14px 1fr;gap:7px;align-items:start;
  padding:5px 7px;border-radius:2px;
  border:1px solid transparent;background:rgba(255,255,255,.02);
  cursor:default;transition:.16s;
}
.cxi:hover{background:rgba(255,255,255,.05)}
.cxi .n{
  font-family:var(--mono);font-size:9px;color:var(--tx3);
  text-align:center;line-height:1.5;
}
.cxi .b{min-width:0}
.cxi .t{font-size:11.5px;color:var(--tx2);line-height:1.35;display:flex;gap:6px;align-items:baseline}
.cxi .t em{font-style:normal;font-size:9.5px;color:var(--tx3)}
.cxi .f{font-size:10.5px;line-height:1.5;color:var(--tx3);margin-top:2px;display:none}
.cxi.got{border-color:rgba(198,168,238,.28);background:rgba(198,168,238,.07)}
.cxi.got .t{color:var(--tx)}
.cxi.got .f{display:block}
.cxi.got .n{color:#c6a8ee}
.cxi.found{border-color:rgba(95,191,138,.26);background:rgba(95,191,138,.05)}
.cxi.found .n{color:var(--green)}
.cx-lock{margin:7px 0 0;font-size:10.5px;color:var(--tx3);line-height:1.5}
.codex:not(.locked) .cx-lock{display:none}
@media (max-width:420px){ .cx-list{max-height:170px} }

/* ══════════════════════════════════════════════════════════════
   v4 新增：比赛日时段 / 疏散工况 / 每日挑战 / 三表 / 印章
   ══════════════════════════════════════════════════════════════ */
/* 顶栏比赛日徽标：颜色随时段变化，开赛时轻微呼吸 */
.chip#btnMatch{--match-accent:#e8c07a;border-color:rgba(255,255,255,.16)}
.chip#btnMatch .dot{width:7px;height:7px;border-radius:50%;background:var(--match-accent);margin-right:6px}
.chip#btnMatch em{font-style:normal;font-size:9.5px;letter-spacing:.1em;color:var(--tx3);margin-left:7px}
.chip#btnMatch.live{box-shadow:0 0 0 1px rgba(111,211,224,.45),0 0 18px rgba(111,211,224,.28)}
@media (prefers-reduced-motion:no-preference){
  body:not(.reduce-motion) .chip#btnMatch.live .dot{animation:matchPulse 2.2s ease-in-out infinite}
}
@keyframes matchPulse{0%,100%{opacity:.55;transform:scale(.9)}50%{opacity:1;transform:scale(1.15)}}

/* 疏散工况 */
.scenrow{display:flex;align-items:center;gap:8px;margin:9px 0 0}
.scenlabel{font-size:9.5px;letter-spacing:.12em;color:var(--tx3);text-transform:uppercase}
.scenchips{display:flex;gap:5px;flex-wrap:wrap}
.scenchip{border:1px solid var(--line);background:transparent;color:var(--tx2);font:inherit;font-size:10.5px;
  padding:3px 9px;border-radius:999px;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.scenchip:hover{border-color:var(--line2);color:var(--tx)}
.scenchip[aria-pressed="true"]{border-color:var(--scen-accent,#6fd3e0);color:var(--ink);background:var(--scen-accent,#6fd3e0)}
.scenbrief{font-size:10.5px;line-height:1.55;color:var(--tx3);margin-top:6px;min-height:2.8em}
.flowmeta{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px;font-size:10px;color:var(--tx3)}
.flowmeta b{display:block;font-size:12.5px;color:var(--tx);font-weight:600;letter-spacing:.01em}
@media (max-width:420px){ .scenbrief{min-height:0} }

/* 每日挑战 */
.dailytop{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px}
.dailydate{font-size:10px;letter-spacing:.1em;color:var(--tx3);text-transform:uppercase}
.dailypct{font-size:12px;color:var(--gold);font-weight:600}
.dailyitems{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:5px}
.dailyitem{display:flex;gap:8px;align-items:flex-start;font-size:11px;line-height:1.45;color:var(--tx2);
  padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.015)}
.dailyitem i{font-style:normal;font-size:10px;color:var(--tx3);flex:0 0 auto;line-height:1.5}
.dailyitem.done{border-color:rgba(95,191,138,.3);background:rgba(95,191,138,.07);color:var(--tx)}
.dailyitem.done i{color:var(--green)}

/* 三表 */
.medalrow{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:4px 0 10px}
.medal{border:1px solid var(--line);border-radius:9px;padding:7px 8px;text-align:center;background:rgba(255,255,255,.015)}
.medal b{display:block;font-size:10px;letter-spacing:.08em;color:var(--tx3);font-weight:500;margin-bottom:3px}
.medal em{font-style:normal;font-size:12px;color:var(--tx2)}
.medal.got{border-color:rgba(232,192,122,.42);background:rgba(232,192,122,.08)}
.medal.got em{color:var(--gold)}
.medal span{display:block;font-size:9px;color:var(--tx3);margin-top:3px;line-height:1.35}

/* 印章 */
.stampgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:2px 0 8px}
.stamp{position:relative;aspect-ratio:1;border:1px dashed var(--line);border-radius:9px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:rgba(255,255,255,.012);color:var(--tx3);font-size:9px;text-align:center;padding:3px}
.stamp b{font-size:10.5px;letter-spacing:.06em;color:var(--tx3);font-weight:600}
.stamp.got{border-style:solid;border-color:rgba(232,192,122,.4);color:var(--tx2);background:rgba(232,192,122,.07)}
.stamp.got b{color:var(--gold)}
.stamp .en{font-size:8px;letter-spacing:.08em;opacity:.6}
.pbnote{font-size:10px;color:var(--tx3);line-height:1.5;margin-top:2px}