/* ============================================================
   ZERO DAM — 零号大坝
   视觉语言：明日方舟·终末地 —— 干净未来工业风
     高调米白底 · 炭黑细描边 · 琥珀黄 accent · 危险斜纹
     角括号 · 等宽数字 · 大量 FUI 悬浮文字
   ============================================================ */

:root{
  --paper:#EDEAE4; --paper-2:#E3DFD7; --paper-3:#D6D1C7;
  --ink:#24262A; --ink-2:#3D4045; --ink-3:#6E7178;
  --amber:#F2B705; --amber-dk:#C08E00;
  --teal:#00A896; --teal-lt:#3FD0C9;
  --alert:#D9482B; --ok:#4E9A3E;
  --line:rgba(36,38,42,.22); --line-2:rgba(36,38,42,.10);
  --glass:rgba(237,234,228,.88); --glass-dark:rgba(28,30,33,.80);
  --shadow:0 2px 10px rgba(20,22,26,.14),0 1px 2px rgba(20,22,26,.10);
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Consolas,monospace;
  --sans:"Inter","Segoe UI",-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
[hidden]{ display:none !important; }
.hidden{ display:none !important; }

html,body{
  height:100%; overflow:hidden; background:#0E0F11; color:var(--ink);
  font-family:var(--sans); -webkit-font-smoothing:antialiased;
  overscroll-behavior:none; -webkit-tap-highlight-color:transparent; user-select:none;
}
#app{ position:fixed; inset:0; }
#view{ position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; }

/* ===================== FUI 投影层 ===================== */
#fui-layer{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:20; }
.fui{
  position:absolute; left:0; top:0; will-change:transform;
  font:600 10.5px/1.25 var(--mono); letter-spacing:.09em;
  color:#fff; white-space:nowrap; text-transform:uppercase;
  text-shadow:0 0 10px rgba(0,0,0,.85),0 1px 3px rgba(0,0,0,.95);
  transform-origin:0 0; transition:opacity .18s linear;
}
.fui .fui-k{ color:var(--amber); }
.fui .fui-d{ color:rgba(255,255,255,.62); font-weight:500; }
.fui .fui-ln{
  position:absolute; left:100%; top:50%; width:var(--ln,26px); height:1px; margin-left:5px;
  background:linear-gradient(90deg,rgba(255,255,255,.85),rgba(255,255,255,0));
}
.fui .fui-ln::after{
  content:""; position:absolute; right:0; top:-2px; width:4px; height:4px;
  border:1px solid rgba(255,255,255,.85); transform:rotate(45deg);
}
.fui.hostile,.fui.hostile .fui-k{ color:#FF6A4D; }
/* 警戒状态：未察觉（灰白）→ 搜索中（琥珀）→ 交战中（红）
   颜色是玩家最先读到的信息，所以差异要够大。 */
.fui.alert-idle,.fui.alert-idle .fui-k{ color:#C6CCD2; }
.fui.alert-hunt,.fui.alert-hunt .fui-k{ color:var(--amber); }
.fui.alert-fight,.fui.alert-fight .fui-k{ color:#FF4B32; }
/* 刚刚发现玩家：加一圈扩散的光晕，持续约 1.8s */
.fui.spotted .fui-k{ text-shadow:0 0 10px currentColor, 0 0 22px currentColor; }
.fui.spotted::after{
  content:''; position:absolute; left:-8px; top:-6px; right:-8px; bottom:-6px;
  border:1px solid currentColor; border-radius:2px;
  animation:fuiSpotted .9s ease-out infinite;
  pointer-events:none;
}
@keyframes fuiSpotted{
  from{ transform:scale(.86); opacity:.95 }
  to  { transform:scale(1.25); opacity:0 }
}

/* ============================================================
   撤离倒计时
   ------------------------------------------------------------
   长按撤离的 8 秒是全局最紧张的时刻，需要明确的视觉压迫：
   环形进度 + 大号读秒 + 随进度加快的脉冲。
   ============================================================ */
#extract-hud{
  position:absolute; left:50%; bottom:16%; transform:translateX(-50%);
  width:132px; height:132px; pointer-events:none; opacity:0;
  transition:opacity .18s ease;
}
#extract-hud:not(.hidden){ opacity:1; }
#extract-hud svg{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
#extract-hud .ex-bg{
  fill:none; stroke:rgba(255,255,255,.16); stroke-width:5;
}
#extract-hud .ex-fg{
  fill:none; stroke:var(--amber); stroke-width:5; stroke-linecap:round;
  /* 2πr，r=52 → 326.7 */
  stroke-dasharray:326.7; stroke-dashoffset:326.7;
  transition:stroke-dashoffset .08s linear, stroke .3s ease;
  filter:drop-shadow(0 0 6px rgba(242,183,5,.55));
}
#extract-hud .ex-num{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font:700 40px/1 var(--mono, monospace); color:var(--paper);
  text-shadow:0 0 12px rgba(0,0,0,.75);
}
#extract-hud .ex-label{
  position:absolute; left:0; right:0; bottom:-20px; text-align:center;
  font:600 10px/1 var(--mono, monospace); letter-spacing:.28em;
  color:var(--amber); text-shadow:0 0 8px rgba(0,0,0,.8);
}
#extract-hud .ex-name{
  position:absolute; left:0; right:0; bottom:-36px; text-align:center;
  font:500 11px/1 var(--mono, monospace); letter-spacing:.06em;
  color:rgba(255,255,255,.72); text-shadow:0 0 8px rgba(0,0,0,.8);
}
/* 最后两秒：转为告警红并加快脉冲 */
#extract-hud.urgent .ex-fg{ stroke:var(--alert); filter:drop-shadow(0 0 9px rgba(217,72,43,.75)); }
#extract-hud.urgent .ex-num{ color:#FFD9CE; }
#extract-hud.urgent{ animation:exPulse .34s ease-in-out infinite; }
@keyframes exPulse{
  0%,100%{ transform:translateX(-50%) scale(1) }
  50%    { transform:translateX(-50%) scale(1.045) }
}
.fui.extract .fui-k{ color:var(--teal-lt); }
.fui.dim{ opacity:.42; }
.fui-box{
  position:absolute; left:0; top:0; pointer-events:none;
  border:1px solid rgba(255,255,255,.55); will-change:transform;
}
.fui-box.searched{ border-color:rgba(255,255,255,.2); border-style:dashed; }
.fui-box .c{ position:absolute; width:7px; height:7px; border:1.5px solid var(--amber); }
.fui-box .c1{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.fui-box .c2{ top:-1px; right:-1px; border-left:0; border-bottom:0; }
.fui-box .c3{ bottom:-1px; left:-1px; border-right:0; border-top:0; }
.fui-box .c4{ bottom:-1px; right:-1px; border-left:0; border-top:0; }

/* ===================== HUD ===================== */
#hud{ position:absolute; inset:0; pointer-events:none; z-index:30; }
#hud > *{ pointer-events:none; }

.panel{
  position:absolute; background:var(--glass); border:1px solid var(--ink);
  box-shadow:var(--shadow); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
}
.panel-hd{
  display:flex; align-items:center; gap:6px; font:700 9.5px/1 var(--mono);
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink); padding:6px 9px;
  border-bottom:1px solid var(--line); background:rgba(36,38,42,.05);
}
.panel-hd .dot{ width:5px; height:5px; background:var(--amber); display:block; }

#compass{
  position:absolute; top:12px; left:50%; transform:translateX(-50%);
  width:min(560px,52vw); height:34px; overflow:hidden; background:var(--glass);
  border:1px solid var(--ink); box-shadow:var(--shadow); backdrop-filter:blur(9px);
}
#compass-track{ position:absolute; inset:0; }
#compass-track i{ position:absolute; top:0; height:100%; width:1px; background:var(--line); }
#compass-track b{
  position:absolute; top:50%; transform:translate(-50%,-50%);
  font:700 10px/1 var(--mono); letter-spacing:.1em; color:var(--ink);
}
#compass-track b.card{ font-size:12px; }
#compass-track b.tick{ color:var(--ink-3); font-weight:500; font-size:9px; }
#compass-needle{
  position:absolute; top:0; bottom:0; left:50%; width:2px; background:var(--amber);
  transform:translateX(-50%); box-shadow:0 0 8px rgba(242,183,5,.9);
}
#compass-readout{
  position:absolute; left:50%; bottom:-19px; transform:translateX(-50%);
  display:flex; align-items:baseline; font:700 12px/1 var(--mono); color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.9); white-space:nowrap;
}
#compass-readout i{ font-style:normal; opacity:.7; font-size:9px; }
#compass-readout em{
  font-style:normal; font-size:9px; letter-spacing:.2em; margin-left:9px;
  color:var(--amber); text-transform:uppercase;
}

#squad-panel{ top:12px; left:12px; width:196px; }
#squad-list{ padding:5px; display:flex; flex-direction:column; gap:3px; }
.sq-row{ display:flex; align-items:center; gap:7px; padding:5px 6px; border:1px solid var(--line-2); }
.sq-row.me{ border-color:var(--ink); background:rgba(242,183,5,.16); }
.sq-av{ width:20px; height:20px; border:1px solid var(--ink); display:grid; place-items:center;
  font:800 9px/1 var(--mono); background:var(--paper-3); flex:none; }
.sq-meta{ flex:1; min-width:0; }
.sq-nm{ font:700 11px/1.2 var(--sans); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sq-st{ font:500 8.5px/1.3 var(--mono); letter-spacing:.1em; color:var(--ink-3); text-transform:uppercase; }
.sq-hp{ width:34px; height:4px; background:rgba(36,38,42,.16); flex:none; }
.sq-hp i{ display:block; height:100%; background:var(--ok); }

#radar-panel{ top:12px; right:12px; width:174px; }
#radar{ display:block; width:174px; height:174px; background:rgba(36,38,42,.06); }
#raid-timer{ display:flex; align-items:center; justify-content:space-between;
  padding:6px 9px; border-top:1px solid var(--line); }
#raid-timer .lbl{ font:700 8.5px/1 var(--mono); letter-spacing:.16em; color:var(--ink-3); text-transform:uppercase; }
#raid-timer b{ font:800 15px/1 var(--mono); }
#raid-timer.urgent b{ color:var(--alert); animation:blink 1s steps(2) infinite; }
@keyframes blink{ 50%{ opacity:.3 } }

#crosshair{ position:absolute; left:50%; top:50%; width:0; height:0; }
#crosshair i{ position:absolute; background:#fff; box-shadow:0 0 4px rgba(0,0,0,.95);
  transition:transform .06s linear; }
#crosshair .ch-t,#crosshair .ch-b{ width:1.5px; height:7px; left:-.75px; }
#crosshair .ch-l,#crosshair .ch-r{ width:7px; height:1.5px; top:-.75px; }
#crosshair .ch-t{ bottom:var(--gap,6px); }
#crosshair .ch-b{ top:var(--gap,6px); }
#crosshair .ch-l{ right:var(--gap,6px); }
#crosshair .ch-r{ left:var(--gap,6px); }
#ch-dot{ position:absolute; left:-1.5px; top:-1.5px; width:3px; height:3px; background:var(--amber);
  border-radius:50%; opacity:0; transition:opacity .1s; }
#crosshair.ads #ch-dot{ opacity:1; }

#hitmarker{ position:absolute; left:50%; top:50%; width:0; height:0; opacity:0; }
#hitmarker.on{ opacity:1; animation:hm .22s ease-out; }
#hitmarker i{ position:absolute; width:8px; height:1.5px; background:#fff; box-shadow:0 0 4px rgba(0,0,0,.9); }
#hitmarker i:nth-child(1){ transform:rotate(45deg) translate(9px,0); }
#hitmarker i:nth-child(2){ transform:rotate(-45deg) translate(9px,0); }
#hitmarker i:nth-child(3){ transform:rotate(135deg) translate(9px,0); }
#hitmarker i:nth-child(4){ transform:rotate(-135deg) translate(9px,0); }
#hitmarker.kill i{ background:var(--alert); height:2px; width:11px; }
/* 爆头：琥珀金 + 更长的射线，和普通命中一眼分得开 */
#hitmarker.head i{ background:var(--amber); height:2px; width:13px;
  box-shadow:0 0 6px rgba(232,176,30,.85), 0 0 4px rgba(0,0,0,.9); }
#hitmarker.head.kill i{ background:var(--alert); }
#hitmarker.head.on{ animation:hm .32s cubic-bezier(.2,1.4,.4,1); }
@keyframes hm{ from{ transform:scale(.55) } to{ transform:scale(1.15) } }

#vitals{ position:absolute; left:12px; bottom:12px; width:250px; background:var(--glass);
  border:1px solid var(--ink); box-shadow:var(--shadow); backdrop-filter:blur(9px); padding:9px 10px 8px; }
.vital-row{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.vital-row:last-of-type{ margin-bottom:0; }
.vital-lbl{ font:800 9px/1 var(--mono); letter-spacing:.14em; color:var(--ink-3); width:18px; flex:none; }
.vital-bar{ flex:1; height:9px; background:rgba(36,38,42,.14); position:relative;
  overflow:hidden; border:1px solid var(--line); }
.vital-bar.sm{ height:5px; }
.vital-fill{ position:absolute; inset:0 auto 0 0; width:100%; transition:width .16s cubic-bezier(.2,.8,.3,1); }
.vital-fill.hp{ background:linear-gradient(90deg,var(--ok),#6FBF5B); }
.vital-fill.ar{ background:linear-gradient(90deg,#2E7FB8,#59B7E8); }
.vital-fill.st{ background:linear-gradient(90deg,var(--amber-dk),var(--amber)); }
.vital-ghost{ position:absolute; inset:0 auto 0 0; width:100%; background:rgba(217,72,43,.55);
  transition:width .55s ease .18s; }
.vital-row b{ font:800 13px/1 var(--mono); width:32px; text-align:right; flex:none;
  font-variant-numeric:tabular-nums; }
#status-chips{ display:flex; gap:4px; flex-wrap:wrap; margin-top:7px; }
.chip{ font:700 8.5px/1 var(--mono); letter-spacing:.1em; padding:3px 6px; border:1px solid var(--ink);
  background:rgba(242,183,5,.28); text-transform:uppercase; }
.chip.bad{ background:rgba(217,72,43,.3); border-color:var(--alert); color:#7a2314; }

#weapon-widget{ position:absolute; right:12px; bottom:12px; width:214px; background:var(--glass);
  border:1px solid var(--ink); box-shadow:var(--shadow); backdrop-filter:blur(9px); padding:8px 10px 10px; }
.wp-name{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:3px; }
.wp-name span{ font:800 15px/1 var(--sans); }
.wp-name em{ font:700 8.5px/1 var(--mono); font-style:normal; letter-spacing:.14em; color:var(--ink-3); }
.wp-ammo{ display:flex; align-items:baseline; gap:3px; }
.wp-ammo b{ font:800 30px/1 var(--mono); font-variant-numeric:tabular-nums; }
.wp-ammo b.low{ color:var(--alert); }
.wp-ammo span,.wp-ammo i{ font:600 13px/1 var(--mono); color:var(--ink-3); font-style:normal; }
.wp-attach{ display:flex; gap:3px; flex-wrap:wrap; margin-top:6px; }
.wp-attach i{ font:600 8px/1 var(--mono); font-style:normal; letter-spacing:.08em; padding:2.5px 5px;
  border:1px solid var(--line); color:var(--ink-3); text-transform:uppercase; }
.wp-reload{ height:2px; background:rgba(36,38,42,.15); margin-top:7px; overflow:hidden; }
.wp-reload i{ display:block; height:100%; width:0; background:var(--amber); }

#abilities{ position:absolute; left:50%; bottom:12px; transform:translateX(-50%);
  display:flex; gap:10px; align-items:flex-end; }
.ab{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.ab-ring{ position:relative; width:44px; height:44px; background:var(--glass); border:1px solid var(--ink);
  box-shadow:var(--shadow); display:grid; place-items:center; backdrop-filter:blur(9px); }
.ab-ring svg{ position:absolute; inset:-1px; width:46px; height:46px; transform:rotate(-90deg); }
.ab-ring svg circle{ fill:none; stroke-width:3; }
.ab-ring .tr{ stroke:rgba(36,38,42,.14); }
.ab-ring .pr{ stroke:var(--amber); stroke-dasharray:119.4; stroke-dashoffset:0;
  transition:stroke-dashoffset .1s linear; }
.ab-ring span{ font:800 13px/1 var(--mono); color:var(--ink); position:relative; z-index:1; }
.ab.ready .ab-ring{ background:var(--amber); border-color:var(--amber-dk); }
.ab.core .ab-ring{ width:52px; height:52px; }
.ab.core .ab-ring svg{ width:54px; height:54px; }
.ab-name{ font:700 8px/1 var(--mono); letter-spacing:.12em; color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.9); text-transform:uppercase; }

#killfeed{ position:absolute; right:12px; top:262px; width:250px; display:flex;
  flex-direction:column; gap:3px; align-items:flex-end; }
.kf{ display:flex; align-items:center; gap:6px; padding:4px 8px; background:var(--glass);
  border:1px solid var(--ink); border-right-width:3px; font:700 10px/1 var(--mono);
  box-shadow:var(--shadow); animation:kfIn .2s ease-out; }
.kf.mine{ border-right-color:var(--amber); }
.kf.victim{ border-right-color:var(--alert); }
.kf .kf-w{ color:var(--ink-3); font-weight:500; }
@keyframes kfIn{ from{ opacity:0; transform:translateX(14px) } }

#prompt{ position:absolute; left:50%; top:calc(50% + 58px); transform:translateX(-50%);
  display:flex; align-items:center; gap:9px; padding:7px 12px; background:var(--glass);
  border:1px solid var(--ink); box-shadow:var(--shadow); backdrop-filter:blur(9px); min-width:210px; }
.prompt-key{ width:26px; height:26px; display:grid; place-items:center; flex:none; border:1px solid var(--ink);
  background:var(--paper-3); font:800 12px/1 var(--mono); }
.prompt-txt{ flex:1; min-width:0; }
.prompt-txt b{ display:block; font:700 12px/1.2 var(--sans); }
.prompt-txt span{ display:block; font:600 8.5px/1.3 var(--mono); letter-spacing:.1em;
  color:var(--ink-3); text-transform:uppercase; }
.prompt-prog{ position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:rgba(36,38,42,.15); overflow:hidden; }
.prompt-prog i{ display:block; height:100%; width:0; background:var(--amber); }

#banner{ position:absolute; left:50%; top:23%; transform:translateX(-50%); display:flex;
  flex-direction:column; align-items:center; gap:5px; }
.bn{ padding:7px 20px; background:var(--glass-dark); border-left:3px solid var(--amber); color:#fff;
  font:700 13px/1.2 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  animation:bnIn .28s cubic-bezier(.2,.8,.3,1); backdrop-filter:blur(9px); }
.bn.warn{ border-left-color:var(--alert); }
.bn.good{ border-left-color:var(--teal-lt); }
.bn small{ display:block; font:600 9.5px/1.5 var(--mono); letter-spacing:.1em;
  color:rgba(255,255,255,.66); text-transform:none; margin-top:2px; }
@keyframes bnIn{ from{ opacity:0; transform:translateY(-8px) } }

#dmg-dirs{ position:absolute; left:50%; top:50%; width:0; height:0; }
.dmg-dir{ position:absolute; left:-36px; top:-36px; width:72px; height:72px;
  border:3px solid transparent; border-top-color:rgba(217,72,43,.9); border-radius:50%;
  animation:dmgOut .8s ease-out forwards; }
@keyframes dmgOut{ from{ opacity:1 } to{ opacity:0 } }

/* ===================== 全屏界面 ===================== */
.screen{ position:absolute; inset:0; z-index:60; display:none; background:var(--paper);
  color:var(--ink); overflow:auto; }
.screen.active{ display:flex; flex-direction:column; }
.screen::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:
    linear-gradient(90deg,rgba(36,38,42,.045) 1px,transparent 1px) 0 0/56px 56px,
    linear-gradient(0deg,rgba(36,38,42,.045) 1px,transparent 1px) 0 0/56px 56px;
}

#scr-boot{ align-items:center; justify-content:center; }
.boot-wrap{ text-align:center; position:relative; z-index:1; }
.boot-logo{ width:96px; height:96px; margin:0 auto 18px; color:var(--ink); }
.boot-logo svg{ width:100%; height:100%; }
.boot-title{ font:900 46px/1 var(--sans); letter-spacing:.3em; margin-left:.3em; }
.boot-sub{ font:600 12px/1 var(--mono); letter-spacing:.7em; margin-left:.7em; color:var(--ink-3); margin-top:11px; }
.boot-bar{ width:300px; height:3px; background:rgba(36,38,42,.14); margin:30px auto 12px; overflow:hidden; }
.boot-bar i{ display:block; height:100%; width:0; background:var(--amber); transition:width .25s ease; }
.boot-status{ font:600 10px/1 var(--mono); letter-spacing:.18em; color:var(--ink-3); text-transform:uppercase; }

#scr-prep{ padding:0; }
.scr-hd{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  padding:18px 22px 14px; border-bottom:1px solid var(--line); position:relative; z-index:1;
  background:linear-gradient(180deg,rgba(242,183,5,.10),transparent); }
.scr-hd.compact{ padding:14px 18px 11px; }
.scr-hd-l .tag{ display:inline-block; font:700 9px/1 var(--mono); letter-spacing:.24em;
  padding:4px 8px; background:var(--ink); color:var(--paper); text-transform:uppercase; }
.scr-hd-l h2{ font:800 24px/1.15 var(--sans); margin-top:9px; }
.scr-hd-r{ display:flex; gap:9px; }
.stat-chip{ border:1px solid var(--ink); padding:6px 11px; background:var(--paper-2); min-width:96px; }
.stat-chip span{ display:block; font:700 8px/1 var(--mono); letter-spacing:.18em; color:var(--ink-3); text-transform:uppercase; }
.stat-chip b{ display:block; font:800 17px/1.25 var(--mono); font-variant-numeric:tabular-nums; }

.prep-grid{ flex:1; display:grid; grid-template-columns:250px 1fr 288px; min-height:0; position:relative; z-index:1; }
.prep-col{ border-right:1px solid var(--line); padding:14px; overflow:auto; min-height:0; }
.prep-col:last-child{ border-right:0; }
.col-hd{ display:flex; align-items:center; gap:7px; font:700 9.5px/1 var(--mono);
  letter-spacing:.2em; color:var(--ink-3); text-transform:uppercase; margin-bottom:9px; }
.col-hd i{ width:12px; height:2px; background:var(--amber); display:block; }
.col-hd.mt{ margin-top:18px; }

.op-list{ display:flex; flex-direction:column; gap:6px; }
.op-card{ display:flex; gap:10px; padding:9px; border:1px solid var(--line); background:var(--paper-2);
  cursor:pointer; transition:.13s; align-items:center; }
.op-card:hover{ border-color:var(--ink); background:var(--paper-3); }
.op-card.sel{ border-color:var(--ink); background:var(--paper); box-shadow:inset 3px 0 0 var(--amber); }
.op-portrait{ width:42px; height:42px; flex:none; border:1px solid var(--ink); display:grid;
  place-items:center; font:900 15px/1 var(--mono); background:var(--paper-3); }
.op-info{ min-width:0; flex:1; }
.op-info b{ display:block; font:800 13px/1.2 var(--sans); }
.op-info span{ display:block; font:600 8.5px/1.35 var(--mono); letter-spacing:.1em;
  color:var(--ink-3); text-transform:uppercase; }

.op-detail{ font-size:12px; }
.op-hero{ border:1px solid var(--ink); padding:12px; background:var(--paper-2); margin-bottom:12px; }
.op-hero h3{ font:800 19px/1.1 var(--sans); }
.op-hero .en{ font:700 9px/1 var(--mono); letter-spacing:.2em; color:var(--ink-3);
  text-transform:uppercase; margin-top:4px; }
.op-hero p{ font:500 11.5px/1.6 var(--sans); margin-top:9px; color:var(--ink-2); }
.skill{ border:1px solid var(--line); border-left:3px solid var(--amber); padding:9px 10px;
  margin-bottom:7px; background:var(--paper-2); }
.skill b{ display:block; font:700 12px/1.2 var(--sans); }
.skill .k{ font:700 8.5px/1 var(--mono); letter-spacing:.14em; color:var(--ink-3);
  text-transform:uppercase; margin-bottom:4px; }
.skill p{ font:500 11px/1.55 var(--sans); color:var(--ink-2); }
.skill.ult{ border-left-color:var(--alert); }
.skill.passive{ border-left-color:var(--teal); }
.stat-mini{ display:flex; gap:8px; margin-top:9px; }
.stat-mini div{ flex:1; border:1px solid var(--line); padding:5px 7px; text-align:center; background:var(--paper-2); }
.stat-mini span{ display:block; font:700 7.5px/1 var(--mono); letter-spacing:.14em; color:var(--ink-3); text-transform:uppercase; }
.stat-mini b{ display:block; font:800 14px/1.3 var(--mono); }

.loadout{ display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.slot{ border:1px solid var(--line); background:var(--paper-2); padding:8px 9px; min-height:56px;
  cursor:pointer; transition:.13s; position:relative; }
.slot:hover{ border-color:var(--ink); }
.slot.filled{ border-color:var(--ink); background:var(--paper); }
.slot .sl-k{ font:700 8px/1 var(--mono); letter-spacing:.18em; color:var(--ink-3); text-transform:uppercase; }
.slot .sl-v{ font:700 12.5px/1.3 var(--sans); margin-top:4px; }
.slot .sl-s{ font:600 9px/1.3 var(--mono); color:var(--ink-3); margin-top:2px; }
.slot .sl-x{ position:absolute; top:5px; right:6px; font:700 12px/1 var(--mono); color:var(--ink-3); }
.slot .sl-x:hover{ color:var(--alert); }
.slot.empty .sl-v{ color:var(--ink-3); font-weight:500; font-style:italic; }

.grid-inv{ display:grid; grid-template-columns:repeat(auto-fill,minmax(74px,1fr)); gap:5px; }
.cell{ aspect-ratio:1; border:1px solid var(--line); background:var(--paper-2); cursor:pointer;
  position:relative; padding:5px; display:flex; flex-direction:column; justify-content:space-between;
  transition:.11s; overflow:hidden; }
.cell:hover{ border-color:var(--ink); transform:translateY(-1px); }
.cell.r1{ border-left:3px solid var(--ink-3); }
.cell.r2{ border-left:3px solid #3E7CB1; }
.cell.r3{ border-left:3px solid #7A54B8; }
.cell.r4{ border-left:3px solid var(--amber); }
.cell.r5{ border-left:3px solid var(--alert); }
.cell .cl-n{ font:700 10px/1.25 var(--sans); }
.cell .cl-v{ font:700 10px/1 var(--mono); color:var(--ink-3); font-variant-numeric:tabular-nums; }
.cell .cl-q{ position:absolute; top:4px; right:5px; font:800 10px/1 var(--mono); }
.cell.empty{ background:repeating-linear-gradient(45deg,rgba(36,38,42,.03) 0 4px,transparent 4px 8px); }

.item-detail{ border:1px solid var(--line); background:var(--paper-2); padding:12px; min-height:180px; }
.item-detail h4{ font:800 15px/1.2 var(--sans); }
.item-detail .rar{ font:700 9px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; margin-top:5px; }
.item-detail .desc{ font:500 11.5px/1.65 var(--sans); color:var(--ink-2); margin-top:10px; }
.item-detail dl{ margin-top:10px; display:grid; grid-template-columns:auto 1fr; gap:3px 10px;
  font:600 11px/1.5 var(--mono); }
.item-detail dt{ color:var(--ink-3); }
.item-detail dd{ text-align:right; font-variant-numeric:tabular-nums; }

.scr-ft{ display:flex; align-items:center; gap:12px; padding:13px 22px; border-top:1px solid var(--line);
  background:var(--paper-2); position:relative; z-index:1; }
.scr-ft .spacer{ flex:1; }
.cost-readout{ font:700 11px/1 var(--mono); letter-spacing:.15em; color:var(--ink-3); text-transform:uppercase; }
.cost-readout b{ color:var(--ink); font-size:15px; margin-left:5px; }

.btn{ font:800 12px/1 var(--sans); letter-spacing:.1em; padding:11px 24px; border:1px solid var(--ink);
  background:var(--paper); color:var(--ink); cursor:pointer; transition:.13s; text-transform:uppercase; }
.btn:hover{ background:var(--paper-3); }
.btn.primary{ background:var(--ink); color:var(--paper); }
.btn.primary:hover{ background:var(--amber); color:var(--ink); border-color:var(--amber-dk); }
.btn.ghost{ background:transparent; }
.btn:disabled{ opacity:.38; cursor:not-allowed; }

#scr-result{ align-items:center; justify-content:center; }
.result-wrap{ width:min(760px,92vw); padding:26px; position:relative; z-index:1; }
.result-badge{ display:inline-block; font:800 11px/1 var(--mono); letter-spacing:.28em; padding:7px 15px;
  background:var(--ok); color:#fff; text-transform:uppercase; }
.result-badge.fail{ background:var(--alert); }
.result-wrap h2{ font:900 38px/1.1 var(--sans); margin-top:16px; }
.result-sub{ font:500 13px/1.5 var(--sans); color:var(--ink-3); margin-top:7px; }
.result-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(108px,1fr)); gap:9px; margin:22px 0; }
.rs{ border:1px solid var(--line); background:var(--paper-2); padding:10px; }
.rs span{ display:block; font:700 8px/1 var(--mono); letter-spacing:.16em; color:var(--ink-3); text-transform:uppercase; }
.rs b{ display:block; font:800 22px/1.25 var(--mono); font-variant-numeric:tabular-nums; }
.rs b.amber{ color:var(--amber-dk); }
.result-actions{ display:flex; gap:10px; margin-top:24px; }

#pause{ background:rgba(14,15,17,.55); backdrop-filter:blur(11px); align-items:center; justify-content:center; }
.pause-box{ background:var(--paper); border:1px solid var(--ink); padding:30px 34px; width:min(560px,92vw);
  box-shadow:0 20px 60px rgba(0,0,0,.4); }
.pause-box h2{ font:900 27px/1 var(--sans); letter-spacing:.05em; }
.pause-box .dim{ font:500 12px/1.5 var(--sans); color:var(--ink-3); margin-top:7px; }
.pause-actions{ display:flex; gap:10px; margin:20px 0; }
.pause-help{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px 14px; border-top:1px solid var(--line); padding-top:15px; }
.pause-help div{ font:500 11px/1.5 var(--sans); color:var(--ink-2); }
.pause-help kbd{ display:inline-block; font:700 9.5px/1 var(--mono); padding:3px 6px; border:1px solid var(--ink);
  background:var(--paper-2); margin-right:5px; }

#inventory{ background:rgba(14,15,17,.55); backdrop-filter:blur(11px); align-items:center; justify-content:center; }
.inv-wrap{ width:min(900px,94vw); max-height:88vh; display:flex; flex-direction:column; background:var(--paper);
  border:1px solid var(--ink); box-shadow:0 20px 60px rgba(0,0,0,.4); }
.inv-body{ flex:1; display:grid; grid-template-columns:1fr 254px; min-height:0; }
.inv-body > div{ padding:14px; overflow:auto; min-height:0; }
.inv-side{ border-left:1px solid var(--line); }
.dim{ color:var(--ink-3); font-size:12px; }

#fatal{ position:absolute; inset:0; z-index:200; background:rgba(14,15,17,.94); display:grid; place-items:center; }
.fatal-box{ background:var(--paper); border:1px solid var(--alert); padding:24px; max-width:min(700px,90vw); }
.fatal-box h2{ font:900 19px/1 var(--sans); color:var(--alert); margin-bottom:12px; }
.fatal-box pre{ font:500 11px/1.6 var(--mono); white-space:pre-wrap; word-break:break-word;
  max-height:46vh; overflow:auto; }

::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background:rgba(36,38,42,.06); }
::-webkit-scrollbar-thumb{ background:rgba(36,38,42,.3); }

@media (max-width:1180px){
  .prep-grid{ grid-template-columns:1fr; }
  .prep-col{ border-right:0; border-bottom:1px solid var(--line); }
}