/* ============================================================
   钢穹突围 · IRON VEIL
   Visual system / arcade frame / HUD / terminal overlays
   ============================================================ */

:root{
  --bg:#03070a;
  --panel:#071016;
  --panel-2:#0a161d;
  --line:rgba(126,211,220,.16);
  --line-hot:rgba(111,245,227,.55);
  --ink:#dcecee;
  --muted:#718d96;
  --dim:#425b63;
  --cyan:#6ff5e3;
  --cyan-deep:#1ea7b7;
  --amber:#ffb85e;
  --red:#ff5a45;
  --screen-w:540;
  --font-ui:"Bahnschrift","DIN Alternate","Segoe UI","Microsoft YaHei",sans-serif;
  --font-cn:"Microsoft YaHei","PingFang SC","Noto Sans SC","Source Han Sans SC",sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:
    radial-gradient(ellipse at 50% 42%,rgba(16,53,63,.36),transparent 48%),
    radial-gradient(ellipse at 16% 80%,rgba(97,61,21,.12),transparent 35%),
    radial-gradient(ellipse at 86% 20%,rgba(25,82,96,.14),transparent 38%),
    linear-gradient(180deg,#03080c 0%,#040b0f 48%,#020507 100%);
  color:var(--ink);
  font-family:var(--font-ui);
  overflow:hidden;
  -webkit-user-select:none;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
button:focus-visible{outline:1px solid var(--cyan);outline-offset:4px}
kbd{
  font-family:var(--font-ui);
  font-size:.8em;
  font-weight:600;
  letter-spacing:.06em;
  padding:.22em .55em;
  border:1px solid rgba(156,208,216,.24);
  border-bottom-color:rgba(156,208,216,.4);
  background:rgba(8,20,26,.8);
  color:#a9c9ce;
  border-radius:2px;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset;
}
.hidden{display:none!important}

/* ---------------- Ambient world ---------------- */
#ambient{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;opacity:.85;
}
.backdrop-grid{
  position:fixed;inset:-20%;z-index:0;pointer-events:none;opacity:.24;
  background-image:
    linear-gradient(rgba(105,197,206,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(105,197,206,.08) 1px,transparent 1px);
  background-size:76px 76px;
  transform:perspective(700px) rotateX(58deg) translateY(18%);
  transform-origin:50% 50%;
  mask-image:radial-gradient(ellipse at 50% 50%,#000 0%,transparent 68%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000 0%,transparent 68%);
}
.backdrop-glow{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 54%,rgba(24,137,146,.13),transparent 34%),
    radial-gradient(ellipse at 50% 54%,rgba(3,12,16,.1),rgba(1,3,5,.72) 74%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:100;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.016) 0 1px,transparent 1px 4px);
  opacity:.38;mix-blend-mode:overlay;
}

/* ---------------- Layout ---------------- */
.app{
  position:relative;z-index:2;
  width:100%;height:100dvh;
  display:grid;
  grid-template-columns:minmax(210px,260px) auto minmax(210px,260px);
  align-items:center;justify-content:center;
  gap:clamp(24px,3.6vw,58px);
  padding:18px 34px;
}
.rail{
  align-self:center;
  width:100%;
  max-width:260px;
  color:var(--muted);
  font-size:11px;
  letter-spacing:.09em;
}
.rail-head{
  display:flex;align-items:center;gap:8px;
  font-size:9px;letter-spacing:.19em;color:#597781;
  text-transform:uppercase;
  padding-bottom:12px;
  border-bottom:1px solid var(--line);
}
.rail-code{margin-left:auto;color:#3d5b64;font-size:8px}
.live-dot{
  display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 8px rgba(111,245,227,.8);
  animation:livePulse 2.2s ease-in-out infinite;
  flex:none;
}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:.28}}

.rail-left .unit-mark{
  position:relative;width:116px;height:116px;margin:30px 0 24px;
  display:grid;place-items:center;
}
.unit-ring{
  position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(108,220,220,.28);
  background:
    conic-gradient(from 20deg,transparent 0 28%,rgba(111,245,227,.55) 28.5% 29%,transparent 29.5% 58%,rgba(255,184,94,.4) 58.5% 59%,transparent 59.5% 100%);
  mask-image:radial-gradient(circle,transparent 60%,#000 61%);
  -webkit-mask-image:radial-gradient(circle,transparent 60%,#000 61%);
  animation:ringRotate 16s linear infinite;
}
.unit-ring::after{
  content:"";position:absolute;inset:13px;border-radius:50%;
  border:1px dashed rgba(111,245,227,.2);
}
@keyframes ringRotate{to{transform:rotate(360deg)}}
.unit-num{
  font-family:var(--font-ui);
  font-size:58px;font-weight:300;line-height:1;
  letter-spacing:-.06em;
  color:#dff8f5;
  text-shadow:0 0 24px rgba(111,245,227,.28);
}
.unit-label{
  position:absolute;bottom:2px;font-size:8px;letter-spacing:.42em;
  color:var(--amber);text-indent:.42em;
}
.rail-desc{
  margin:0 0 30px;color:#6d8992;font-family:var(--font-cn);
  font-size:11px;line-height:2;letter-spacing:.08em;
}
.rail-label{
  display:flex;align-items:center;gap:8px;
  font-size:8px;letter-spacing:.2em;color:#4f6e78;
  padding-bottom:10px;
}
.rail-label::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,var(--line),transparent)}
.rail-label b{font-weight:400;color:var(--cyan);letter-spacing:.08em}
.archive{padding-top:2px}
.mission-item{
  position:relative;
  display:flex;align-items:center;gap:10px;
  padding:9px 0 9px 9px;
  border-bottom:1px solid rgba(126,211,220,.07);
  transition:background .3s,color .3s;
}
.mission-item::before{
  content:"";position:absolute;left:0;top:12px;bottom:12px;width:1px;
  background:transparent;transition:background .3s;
}
.mission-item.active{background:linear-gradient(90deg,rgba(111,245,227,.06),transparent)}
.mission-item.active::before{background:var(--cyan);box-shadow:0 0 8px rgba(111,245,227,.7)}
.mission-item.cleared .mi-state{color:var(--cyan);letter-spacing:.12em}
.mi-index{font-size:8px;color:#45616a;letter-spacing:.1em}
.mi-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.mi-body b{font-family:var(--font-cn);font-weight:500;font-size:11px;color:#8da8ae;letter-spacing:.1em}
.mi-body i{font-style:normal;font-size:7px;color:#3e5962;letter-spacing:.14em}
.mi-state{margin-left:auto;font-size:7px;color:#38515a;letter-spacing:.12em;white-space:nowrap}
.mission-item.active .mi-body b{color:#d9f4f1}
.mission-item.active .mi-state{color:var(--amber)}

.rail-foot{margin-top:26px;padding-top:14px;border-top:1px solid var(--line);font-size:8px;letter-spacing:.12em;color:#435d66}
.rail-foot>div:first-child{display:flex;justify-content:space-between;color:#5b7881}
.rail-foot>div:first-child b{font-weight:500;color:var(--cyan)}
.sync-bars{display:flex;gap:3px;margin:9px 0 14px}
.sync-bars i{height:3px;flex:1;background:#12272f}
.sync-bars i:nth-child(-n+9){background:linear-gradient(90deg,#1c7f86,var(--cyan))}
.rail-coords{color:#314a52;letter-spacing:.15em}

/* Right rail */
.pilot-card{
  display:flex;align-items:center;gap:13px;margin:26px 0 28px;
  padding:12px;border:1px solid var(--line);
  background:linear-gradient(130deg,rgba(13,31,38,.78),rgba(6,15,20,.28));
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
}
.pilot-avatar{
  width:48px;height:48px;flex:none;display:grid;place-items:center;
  border:1px solid rgba(111,245,227,.35);
  background:
    linear-gradient(135deg,rgba(111,245,227,.16),transparent 54%),
    repeating-linear-gradient(45deg,rgba(111,245,227,.05) 0 1px,transparent 1px 5px);
  color:#dff8f5;font-size:17px;letter-spacing:-.05em;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.pilot-info{display:flex;flex-direction:column;gap:4px;min-width:0}
.pilot-info b{font-family:var(--font-cn);font-size:13px;font-weight:600;letter-spacing:.12em;color:#e0f2f2}
.pilot-info span{font-size:7px;letter-spacing:.12em;color:#4f6c74}
.pilot-info em{font-style:normal;font-size:8px;color:#58767e;letter-spacing:.06em}
.pilot-info em i{font-style:normal;color:var(--cyan)}
.controls{margin-bottom:26px}
.ctrl-row{
  display:flex;align-items:center;gap:10px;
  padding:6px 0;font-family:var(--font-cn);
  font-size:10px;color:#6f8b92;letter-spacing:.08em;
}
.ctrl-row kbd{min-width:76px;text-align:center;font-size:8px}
.ctrl-row span{margin-left:auto;text-align:right}
.tip-card{
  position:relative;padding:14px 14px 12px;
  border-top:1px solid rgba(255,184,94,.28);
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,184,94,.045),transparent);
}
.tip-head{font-size:8px;letter-spacing:.16em;color:var(--amber);margin-bottom:9px}
.tip-head span{font-size:8px;margin-right:3px}
.tip-card p{
  margin:0 0 7px;font-family:var(--font-cn);font-size:9.5px;line-height:1.8;
  color:#5f7b82;letter-spacing:.04em;
}
.tip-card p:last-child{margin-bottom:0}
.tip-card p b{color:#c4dce0;font-weight:500}

/* ---------------- Arcade frame ---------------- */
.arcade-column{
  width:min(540px,calc((100dvh - 126px) * .5625));
  min-width:270px;
  display:flex;flex-direction:column;
  filter:drop-shadow(0 28px 70px rgba(0,0,0,.72));
}
.frame-top,.frame-bottom{
  position:relative;z-index:3;
  height:34px;display:flex;align-items:center;gap:14px;
  padding:0 13px;
  background:linear-gradient(180deg,#0b171d,#060e12);
  border:1px solid rgba(126,211,220,.17);
  font-size:8px;letter-spacing:.13em;color:#4e6c75;
}
.frame-top{border-bottom:0;clip-path:polygon(0 0,100% 0,100% 100%,13px 100%,0 calc(100% - 13px))}
.frame-bottom{border-top:0;clip-path:polygon(0 0,calc(100% - 13px) 0,100% 13px,100% 100%,0 100%);height:32px}
.frame-id{display:flex;align-items:center;gap:7px;color:#a4c6ca;font-size:9px;letter-spacing:.14em}
.frame-id em{font-style:normal;color:#3d5c64;font-size:7px}
.frame-mid{margin:0 auto;color:#39545d;font-size:7px;letter-spacing:.15em;white-space:nowrap}
.frame-mid span{color:#55737c;margin-left:8px}
.frame-actions{display:flex;gap:5px;margin-left:auto}
.chrome-btn{
  padding:4px 8px;border:1px solid rgba(126,211,220,.16);
  background:rgba(9,24,30,.6);color:#55747d;
  font-size:7px;letter-spacing:.12em;transition:.2s;
}
.chrome-btn:hover{color:var(--cyan);border-color:rgba(111,245,227,.45);background:rgba(111,245,227,.06)}
.chrome-btn.muted{color:#7b5a36;border-color:rgba(255,184,94,.22);text-decoration:line-through}
.frame-bottom .status-light{display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--cyan);margin-right:5px;box-shadow:0 0 7px var(--cyan)}
.frame-bottom .fb-center{position:absolute;left:50%;transform:translateX(-50%);color:#426069;letter-spacing:.28em;font-family:var(--font-cn);font-size:8px}
.frame-bottom>span:last-child{margin-left:auto;color:#2e474f;font-size:7px}
.arcade{position:relative;width:100%;isolation:isolate}
.frame-corner{
  position:absolute;width:15px;height:15px;z-index:6;pointer-events:none;
  border-color:rgba(111,245,227,.55);
}
.frame-corner.tl{top:-3px;left:-3px;border-top:1px solid;border-left:1px solid}
.frame-corner.tr{top:-3px;right:-3px;border-top:1px solid;border-right:1px solid}
.frame-corner.bl{bottom:-3px;left:-3px;border-bottom:1px solid;border-left:1px solid}
.frame-corner.br{bottom:-3px;right:-3px;border-bottom:1px solid;border-right:1px solid}

.screen{
  position:relative;width:100%;aspect-ratio:9/16;
  overflow:hidden;background:#03080c;
  border:1px solid rgba(126,211,220,.23);
  container-type:inline-size;
  touch-action:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.8),0 0 60px rgba(22,103,112,.12);
}
#game{position:absolute;inset:0;width:100%;height:100%;display:block}
.screen-grain{
  position:absolute;inset:0;z-index:7;pointer-events:none;opacity:.07;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.screen-glare{
  position:absolute;inset:0;z-index:6;pointer-events:none;
  background:
    linear-gradient(114deg,rgba(255,255,255,.055),transparent 22%,transparent 76%,rgba(111,245,227,.025)),
    radial-gradient(ellipse at 50% -10%,rgba(130,240,230,.07),transparent 45%);
}
.screen-edge{
  position:absolute;inset:0;z-index:8;pointer-events:none;
  box-shadow:inset 0 0 42px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.03);
  background:radial-gradient(ellipse at 50% 50%,transparent 58%,rgba(0,7,9,.48) 100%);
}

/* ---------------- HUD ---------------- */
.hud{
  position:absolute;inset:0;z-index:10;pointer-events:none;
  color:var(--ink);
  opacity:1;transition:opacity .4s;
}
.hud.is-off{opacity:0}
.hud-top{
  display:flex;justify-content:space-between;align-items:flex-start;
  padding:3.6cqw 4cqw 0;
  text-shadow:0 1px 4px #000,0 0 12px rgba(0,0,0,.7);
}
.hud-cluster{display:flex;align-items:center;gap:2.1cqw;min-height:4cqw}
.hud-cluster.hud-right{gap:2.8cqw}
.hud-label{
  font-size:1.9cqw;letter-spacing:.18em;color:rgba(139,190,196,.72);
  font-weight:500;white-space:nowrap;
}
.hud-label b{font-weight:500;color:var(--cyan);margin-left:.35em}
.hull-pips{display:flex;gap:1.1cqw;align-items:center}
.hull-pips i{
  width:1.9cqw;height:1.9cqw;display:block;
  transform:rotate(45deg);
  border:1px solid rgba(111,245,227,.55);
  background:linear-gradient(135deg,rgba(111,245,227,.95),rgba(37,140,151,.65));
  box-shadow:0 0 8px rgba(111,245,227,.28);
  transition:.3s;
}
.hull-pips i.off{border-color:rgba(120,150,156,.27);background:rgba(16,35,42,.5);box-shadow:none}
.shield-chip{
  display:none;align-items:center;gap:.6cqw;
  font-size:1.5cqw;letter-spacing:.12em;color:#79dfff;
  border:1px solid rgba(93,199,238,.4);padding:.5cqw .9cqw;
  background:rgba(25,104,132,.15);
}
.shield-chip.on{display:flex}
.shield-chip i{width:1.2cqw;height:1.2cqw;border-radius:50%;border:1px solid #8ae6ff;box-shadow:0 0 6px #55d4ff inset}
.score{
  font-size:4.2cqw;line-height:1;font-weight:500;letter-spacing:.08em;
  color:#e6fbf8;font-variant-numeric:tabular-nums;
  text-shadow:0 0 10px rgba(111,245,227,.3),0 2px 8px #000;
}
.boss-meter{
  position:absolute;top:10.4cqw;left:14%;width:72%;
  opacity:0;transform:translateY(-6px);transition:opacity .35s,transform .35s;
}
.boss-meter.active{opacity:1;transform:none}
.boss-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:.8cqw;font-size:1.6cqw;letter-spacing:.1em;color:#9fbac1;text-shadow:0 1px 5px #000}
.boss-head span:first-child{display:flex;align-items:center;gap:.7cqw;min-width:0}
.boss-head i{font-style:normal;color:var(--red);font-size:1.7cqw}
.boss-head b{font-weight:500;color:#dceff1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.14em}
.boss-head span:last-child{color:var(--red);font-variant-numeric:tabular-nums}
.boss-track{position:relative;height:1.5cqw;border:1px solid rgba(255,90,69,.28);background:rgba(13,6,7,.7);overflow:hidden}
.boss-fill{height:100%;width:100%;background:linear-gradient(90deg,#ff3c27,#ff8b53);box-shadow:0 0 12px rgba(255,90,69,.6);transition:width .12s linear}
.boss-ticks{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(20% - 1px),rgba(4,7,10,.65) calc(20% - 1px) 20%)}
.combo{
  position:absolute;right:4cqw;top:31%;
  display:flex;flex-direction:column;align-items:flex-end;
  opacity:0;transform:translateX(8px);transition:opacity .2s,transform .2s;
  text-shadow:0 2px 10px #000;
}
.combo.on{opacity:1;transform:none}
.combo b{font-size:7cqw;line-height:.92;font-weight:600;color:var(--amber);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.combo span{font-size:1.5cqw;letter-spacing:.2em;color:rgba(255,184,94,.66);margin-top:.6cqw}
.combo.pop b{animation:comboPop .24s ease-out}
@keyframes comboPop{0%{transform:scale(1.22)}100%{transform:scale(1)}}
.hud-bottom{
  position:absolute;left:4cqw;right:4cqw;bottom:3.4cqw;
  display:flex;align-items:flex-end;justify-content:space-between;gap:5cqw;
  text-shadow:0 1px 4px #000;
}
.power-meter{display:flex;align-items:center;gap:1.6cqw}
.power-pips{display:flex;gap:.55cqw;align-items:flex-end}
.power-pips i{width:1.5cqw;height:2.5cqw;background:rgba(27,51,58,.75);border:1px solid rgba(111,245,227,.18);transition:.25s;transform:skewX(-12deg)}
.power-pips i.on{background:linear-gradient(180deg,var(--cyan),#188b94);border-color:rgba(111,245,227,.7);box-shadow:0 0 8px rgba(111,245,227,.35)}
.od-meter{display:flex;align-items:center;gap:1.2cqw;flex:1;max-width:48%;justify-content:flex-end}
.od-track{width:clamp(90px,32cqw,220px);height:1.5cqw;border:1px solid rgba(255,184,94,.28);background:rgba(14,15,13,.75);position:relative;overflow:hidden}
.od-fill{height:100%;width:0%;background:linear-gradient(90deg,#ff8f3d,#ffe09d);box-shadow:0 0 10px rgba(255,184,94,.45);transition:width .15s linear}
.od-meter.ready .od-fill{animation:odReady 1s ease-in-out infinite}
.od-meter.active .od-fill{background:linear-gradient(90deg,#ff4d2e,#ffdf7e);box-shadow:0 0 16px rgba(255,137,61,.9)}
.od-meter.ready .hud-label,.od-meter.ready .od-key{color:var(--amber)}
.od-key{
  font-size:1.5cqw;border:1px solid rgba(255,184,94,.3);padding:.35cqw .65cqw;
  color:#806746;line-height:1;
}
.od-meter.active .od-key{color:#ffecbf;border-color:rgba(255,184,94,.8)}
@keyframes odReady{0%,100%{filter:brightness(1)}50%{filter:brightness(1.55)}}

/* ---------------- In-screen story cards ---------------- */
.mission-banner,.warning,.sector-clear{
  position:absolute;z-index:12;left:0;right:0;top:50%;
  transform:translateY(-50%) scale(.97);
  display:flex;flex-direction:column;align-items:center;text-align:center;
  pointer-events:none;opacity:0;visibility:hidden;
  transition:opacity .45s,transform .6s cubic-bezier(.18,.85,.2,1),visibility .45s;
  text-shadow:0 2px 18px rgba(0,0,0,.75);
}
.mission-banner::before,.warning::before,.sector-clear::before{
  content:"";position:absolute;left:-30%;right:-30%;top:-30%;bottom:-30%;z-index:-1;
  background:linear-gradient(90deg,transparent,rgba(2,9,13,.82) 24%,rgba(2,9,13,.82) 76%,transparent);
}
.mission-banner.show,.warning.show,.sector-clear.show{opacity:1;visibility:visible;transform:translateY(-50%) scale(1)}
.mb-kicker{font-size:2cqw;letter-spacing:.4em;color:var(--cyan);margin-bottom:2.4cqw;text-indent:.4em}
.mb-title{font-family:var(--font-cn);font-size:11cqw;font-weight:800;letter-spacing:.12em;line-height:1;color:#effffb;text-indent:.12em;text-shadow:0 0 35px rgba(111,245,227,.32),0 4px 24px #000}
.mb-en{font-size:2.2cqw;letter-spacing:.48em;color:#74a5ad;margin-top:1.7cqw;text-indent:.48em}
.mb-rule{width:18cqw;height:1px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);margin:3.3cqw 0 2.4cqw;box-shadow:0 0 8px rgba(111,245,227,.5)}
.mb-sub{font-family:var(--font-cn);font-size:2.3cqw;color:#8aa8ae;letter-spacing:.12em}
.mb-brief{
  max-width:66cqw;margin-top:1.9cqw;padding-top:1.7cqw;
  border-top:1px solid rgba(111,245,227,.18);
  font-family:var(--font-cn);font-size:1.85cqw;line-height:1.85;letter-spacing:.1em;
  color:#6d9198;
}
.mb-brief.is-empty{display:none}
.warning{color:#ff6c51}
.warning-rule{width:60cqw;height:1px;background:repeating-linear-gradient(90deg,#ff5a45 0 12px,transparent 12px 20px);opacity:.55;margin:2.3cqw 0}
.warning-word{font-size:12cqw;line-height:.9;font-weight:700;letter-spacing:.1em;text-indent:.1em;color:#ff5a45;text-shadow:0 0 30px rgba(255,50,30,.55),0 4px 20px #000;animation:warnFlicker 1.1s steps(2) infinite}
.warning-cn{font-family:var(--font-cn);font-size:3.2cqw;letter-spacing:.5em;color:#ffb3a2;margin-top:1.6cqw;text-indent:.5em}
.warning-sub{font-size:1.6cqw;letter-spacing:.26em;color:#975e53;margin-top:1.1cqw}
@keyframes warnFlicker{0%,100%{opacity:1}48%{opacity:.48}52%{opacity:1}}
.sector-clear .sc-kicker{font-size:2.1cqw;letter-spacing:.44em;color:var(--cyan);text-indent:.44em}
.sector-clear .sc-title{font-family:var(--font-cn);font-size:11cqw;font-weight:800;letter-spacing:.18em;line-height:1.1;color:#f0fffc;text-indent:.18em;text-shadow:0 0 40px rgba(111,245,227,.36);margin-top:2cqw}
.sc-rule{width:40cqw;height:1px;background:linear-gradient(90deg,transparent,rgba(111,245,227,.8),transparent);margin:3cqw 0 2.2cqw}
.sc-score{font-family:var(--font-cn);font-size:2.2cqw;letter-spacing:.18em;color:#8ba7ad}
.sc-score b{color:var(--amber);font-family:var(--font-ui);font-size:2.8cqw;letter-spacing:.08em;margin-left:.5em}
.sc-next{font-size:1.8cqw;letter-spacing:.3em;color:#4e727a;margin-top:3.4cqw}

/* ---------------- Title overlay ---------------- */
.overlay{
  position:absolute;inset:0;z-index:30;
  display:flex;flex-direction:column;
  pointer-events:auto;
}
.title-overlay{
  padding:6.4cqw 6cqw 5.4cqw;
  justify-content:space-between;
  background:
    linear-gradient(180deg,rgba(2,8,11,.92) 0%,rgba(2,8,11,.55) 26%,rgba(2,8,11,.02) 47%,rgba(2,8,11,.1) 58%,rgba(2,8,11,.9) 84%,rgba(2,8,11,.97) 100%);
  transition:opacity .5s,visibility .5s;
}
.title-overlay.leaving{opacity:0;visibility:hidden}
.title-top{position:relative}
.title-kicker{
  display:flex;align-items:center;gap:1.5cqw;
  font-size:1.55cqw;letter-spacing:.22em;color:#648b93;margin-bottom:4cqw;
}
.title-kicker span{width:4cqw;height:1px;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
.title-logo{position:relative;width:100%;height:40cqw}
.tl-cn{
  position:absolute;font-family:var(--font-cn);font-weight:900;
  font-size:18.5cqw;line-height:.86;letter-spacing:-.045em;
  color:#f1fffc;text-shadow:0 2px 0 rgba(17,55,61,.9),0 0 34px rgba(111,245,227,.25);
}
.tl-cn:first-child{top:0;left:0}
.tl-cn.tl-accent{
  top:13cqw;right:0;
  color:transparent;
  background:linear-gradient(180deg,#eafffb 0%,#7df8e7 48%,#1a99a5 100%);
  -webkit-background-clip:text;background-clip:text;
  text-shadow:none;filter:drop-shadow(0 0 20px rgba(111,245,227,.3));
}
.tl-cn.tl-accent::after{
  content:"突围";position:absolute;inset:0;
  color:transparent;background:linear-gradient(180deg,transparent 68%,rgba(255,255,255,.48));
  -webkit-background-clip:text;background-clip:text;
  transform:translateX(-.36cqw);
}
.tl-en{
  position:absolute;left:.9cqw;bottom:-1cqw;
  font-family:var(--font-ui);font-weight:300;font-size:3.4cqw;
  letter-spacing:.5em;color:#87a7ad;text-indent:.5em;
}
.tl-en::before{content:"";position:absolute;left:0;top:-1.8cqw;width:8cqw;height:1px;background:var(--amber);box-shadow:0 0 8px rgba(255,184,94,.5)}
.title-sub{
  margin-top:2.6cqw;font-family:var(--font-cn);font-size:2.55cqw;
  letter-spacing:.22em;color:#8ba9af;text-indent:.22em;
}
.title-reticle{
  position:absolute;left:50%;top:52%;width:44cqw;height:44cqw;
  transform:translate(-50%,-50%);opacity:.26;pointer-events:none;
}
.title-reticle::before,.title-reticle::after{
  content:"";position:absolute;border-radius:50%;
  border:1px solid rgba(111,245,227,.45);
}
.title-reticle::before{inset:0;border-style:dashed;animation:ringRotate 32s linear infinite}
.title-reticle::after{inset:19%;border-color:rgba(255,184,94,.32)}
.title-reticle i{position:absolute;background:rgba(111,245,227,.55)}
.title-reticle i:nth-child(1){left:50%;top:-3%;width:1px;height:18%}
.title-reticle i:nth-child(2){left:50%;bottom:-3%;width:1px;height:18%}
.title-reticle b{
  position:absolute;left:50%;top:100%;transform:translateX(-50%);
  margin-top:1.8cqw;font-size:1.3cqw;letter-spacing:.35em;color:#62888f;
  font-weight:400;text-indent:.35em;
}
.title-bottom{position:relative}
.title-status{
  display:flex;gap:3.2cqw;align-items:center;
  font-size:1.35cqw;letter-spacing:.12em;color:#4f7179;margin-bottom:2.2cqw;
}
.title-status span{display:flex;align-items:center;gap:.9cqw}
.launch-btn{
  position:relative;width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:2.7cqw 3.4cqw;overflow:hidden;
  background:linear-gradient(90deg,rgba(111,245,227,.96),rgba(77,214,206,.9));
  color:#031013;
  clip-path:polygon(0 0,calc(100% - 1.8cqw) 0,100% 1.8cqw,100% 100%,1.8cqw 100%,0 calc(100% - 1.8cqw));
  transition:filter .2s,transform .2s;
  box-shadow:0 0 30px rgba(111,245,227,.18);
}
.launch-btn::before{
  content:"";position:absolute;top:0;left:-40%;width:30%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);transition:left .55s;
}
.launch-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
.launch-btn:hover::before{left:120%}
.launch-btn:active{transform:translateY(1px)}
.lb-copy{display:flex;flex-direction:column;align-items:flex-start;gap:.6cqw}
.lb-copy b{font-family:var(--font-cn);font-size:4.2cqw;font-weight:800;letter-spacing:.2em;line-height:1}
.lb-copy i{font-style:normal;font-size:1.35cqw;letter-spacing:.3em;color:rgba(3,16,19,.6);font-weight:600}
.lb-key{font-size:1.4cqw;letter-spacing:.15em;font-weight:600;border:1px solid rgba(3,16,19,.3);padding:.7cqw 1.1cqw;color:rgba(3,16,19,.72)}
.diff-row{display:flex;gap:1.1cqw;margin-bottom:2.1cqw}
.diff-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:.55cqw;
  padding:1.45cqw .5cqw;border:1px solid rgba(126,211,220,.15);
  background:rgba(8,21,27,.55);color:#5f7f86;cursor:pointer;
  font-family:var(--font-cn);font-size:2.05cqw;letter-spacing:.14em;
  clip-path:polygon(0 0,calc(100% - .9cqw) 0,100% .9cqw,100% 100%,.9cqw 100%,0 calc(100% - .9cqw));
  transition:color .2s,border-color .2s,background .2s,box-shadow .2s;
}
.diff-btn i{font-style:normal;font-family:var(--font-ui);font-size:1.15cqw;letter-spacing:.2em;color:#3f5a61}
.diff-btn:hover{border-color:rgba(111,245,227,.42);color:#b9dfe2}
.diff-btn.active{border-color:rgba(111,245,227,.72);background:rgba(111,245,227,.1);color:#dffffb;box-shadow:0 0 18px rgba(111,245,227,.14)}
.diff-btn.active i{color:var(--cyan)}
.title-meta{
  display:flex;justify-content:space-between;gap:2cqw;
  padding:2.5cqw 0 2.4cqw;
  border-bottom:1px solid rgba(126,211,220,.14);
}
.title-meta>div{display:flex;flex-direction:column;gap:.8cqw;min-width:0}
.title-meta span{font-family:var(--font-cn);font-size:1.45cqw;letter-spacing:.14em;color:#56747c}
.title-meta b{font-size:2.15cqw;font-weight:500;letter-spacing:.08em;color:#cfe7e9;font-variant-numeric:tabular-nums;white-space:nowrap}
.title-meta b.meta-ok{color:var(--cyan);font-size:1.8cqw}
.title-keys{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.2cqw 2.2cqw;
  padding-top:2.2cqw;font-family:var(--font-cn);font-size:1.35cqw;color:#4b676f;letter-spacing:.05em;
}
.title-keys span{display:flex;align-items:center;gap:.7cqw;white-space:nowrap}
.title-keys kbd{font-size:1.15cqw;padding:.3cqw .6cqw}
.touch-hint{display:none;justify-content:space-between;gap:2cqw;padding-top:2.2cqw;font-family:var(--font-cn);font-size:2.2cqw;color:#6e8b91;letter-spacing:.08em}
.touch-hint span{display:flex;align-items:center;gap:1cqw}
.touch-hint i{font-style:normal;color:var(--cyan);font-size:2.1cqw}

/* ---------------- Modal overlays ---------------- */
.modal-overlay{
  align-items:center;justify-content:center;
  padding:7cqw;
  background:rgba(2,7,10,.72);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}
.modal-overlay.hidden{display:none}
.modal{
  position:relative;width:100%;
  padding:6.5cqw 5.4cqw 5cqw;
  border:1px solid rgba(126,211,220,.24);
  background:
    linear-gradient(145deg,rgba(15,37,44,.92),rgba(4,12,16,.96) 64%),
    repeating-linear-gradient(45deg,rgba(111,245,227,.025) 0 1px,transparent 1px 8px);
  clip-path:polygon(0 0,calc(100% - 3cqw) 0,100% 3cqw,100% 100%,3cqw 100%,0 calc(100% - 3cqw));
  box-shadow:0 0 60px rgba(0,0,0,.65);
}
.modal::before{
  content:"";position:absolute;left:0;top:0;width:38%;height:1px;
  background:var(--cyan);box-shadow:0 0 12px var(--cyan);
}
.modal-danger::before{background:var(--red);box-shadow:0 0 12px var(--red)}
.modal-victory::before{background:var(--amber);box-shadow:0 0 12px var(--amber)}
.modal-kicker{font-size:1.55cqw;letter-spacing:.22em;color:#6e939a;margin-bottom:2.2cqw}
.modal-danger .modal-kicker{color:#b56356}
.modal-victory .modal-kicker{color:#a98756}
.modal h2{
  margin:0;font-family:var(--font-cn);font-size:10.6cqw;font-weight:800;
  letter-spacing:.12em;line-height:1.05;color:#eafcfa;text-indent:.12em;
  text-shadow:0 0 30px rgba(111,245,227,.16);
}
.modal-danger h2{color:#ffe9e3;text-shadow:0 0 30px rgba(255,90,69,.2)}
.modal-rule{width:100%;height:1px;background:linear-gradient(90deg,rgba(111,245,227,.55),rgba(111,245,227,.05));margin:3cqw 0 2.6cqw}
.modal-danger .modal-rule{background:linear-gradient(90deg,rgba(255,90,69,.6),rgba(255,90,69,.05))}
.modal p{margin:0 0 3.2cqw;font-family:var(--font-cn);font-size:2.05cqw;line-height:1.9;letter-spacing:.08em;color:#7f9ca2}
.modal-stats{display:flex;gap:2.6cqw;margin-bottom:3.8cqw}
.modal-stats>div{flex:1;padding:1.7cqw 0;border-top:1px solid rgba(126,211,220,.12);border-bottom:1px solid rgba(126,211,220,.12)}
.modal-stats span{display:block;font-size:1.3cqw;letter-spacing:.16em;color:#4e6c74;margin-bottom:.7cqw}
.modal-stats b{font-size:2.8cqw;font-weight:500;letter-spacing:.06em;color:#d8eff0;font-variant-numeric:tabular-nums}
.modal-log{display:flex;justify-content:space-between;gap:2cqw;margin:-2.3cqw 0 3.4cqw;font-family:var(--font-cn);font-size:1.45cqw;letter-spacing:.12em;color:#5c7c83}
.modal-log b{font-family:var(--font-ui);font-weight:600;letter-spacing:.04em;color:#9dc3c8;font-variant-numeric:tabular-nums;margin-left:.25cqw}
.modal-primary{
  width:100%;display:flex;align-items:center;justify-content:center;gap:2cqw;
  padding:2.5cqw;background:var(--cyan);color:#031114;
  font-family:var(--font-cn);font-size:2.5cqw;font-weight:700;letter-spacing:.16em;
  clip-path:polygon(0 0,calc(100% - 1.3cqw) 0,100% 1.3cqw,100% 100%,1.3cqw 100%,0 calc(100% - 1.3cqw));
  transition:filter .2s;
}
.modal-primary:hover{filter:brightness(1.1)}
.modal-primary kbd{background:rgba(3,17,20,.15);border-color:rgba(3,17,20,.25);color:rgba(3,17,20,.7);font-size:.7em}
.modal-primary.danger{background:#ff5a45;color:#1a0503}
.modal-ghost{
  width:100%;padding:1.9cqw;margin-top:1cqw;
  border:1px solid rgba(126,211,220,.15);
  font-family:var(--font-cn);font-size:1.8cqw;letter-spacing:.14em;color:#64838a;
  transition:.2s;
}
.modal-ghost:hover{color:#cce8e9;border-color:rgba(111,245,227,.4);background:rgba(111,245,227,.04)}

/* ---------------- Touch ---------------- */
.touch-ui{display:none}
.touch-bomb{
  position:absolute;right:5cqw;bottom:11cqw;z-index:14;
  width:12cqw;height:12cqw;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:1px solid rgba(255,184,94,.38);
  background:radial-gradient(circle at 50% 42%,rgba(255,184,94,.18),rgba(6,15,18,.65));
  color:#d8b16e;font-size:2cqw;letter-spacing:.08em;
  box-shadow:0 0 0 5px rgba(255,184,94,.035);
  pointer-events:auto;
}
.touch-bomb b{font-size:3.2cqw;line-height:1;color:#ffe0a2}
.touch-bomb i{font-style:normal;font-size:1.9cqw;color:#a58b5e;margin-top:.2cqw}
.touch-bomb.ready{border-color:rgba(255,184,94,.8);box-shadow:0 0 24px rgba(255,137,61,.28),0 0 0 5px rgba(255,184,94,.06);animation:odReady 1s infinite}
.touch-bomb:active{transform:scale(.94)}

/* ---------------- Responsive ---------------- */
@media (max-width:1180px){
  .app{grid-template-columns:auto;gap:0;padding:10px 16px}
  .rail{display:none}
  .arcade-column{width:min(540px,calc((100dvh - 120px) * .5625))}
}
@media (max-width:700px){
  .app{padding:4px 6px}
  .arcade-column{width:min(calc(100vw - 12px),calc((100dvh - 70px) * .5625))}
  .frame-top{height:28px;padding:0 9px}
  .frame-bottom{height:25px;padding:0 9px}
  .frame-mid,.frame-bottom>span:last-child{display:none}
  .frame-id em{display:none}
  .frame-actions .chrome-btn{padding:3px 6px}
  .title-overlay{padding:7cqw 5.5cqw 5.5cqw}
  .title-logo{height:43cqw}
  .tl-cn{font-size:20cqw}
  .tl-cn.tl-accent{top:14cqw}
  .title-reticle{top:48%}
}
@media (pointer:coarse){
  .touch-ui{display:block}
  .hud-bottom{right:16cqw}
  .od-track{width:27cqw}
  .title-keys{display:none}
  .title-status{display:none}
  .touch-hint{display:flex}
  .launch-btn{padding:3.4cqw 3.8cqw}
  .lb-copy b{font-size:4.8cqw}
  .lb-key{display:none}
  .chrome-btn{padding:5px 8px}
}
@media (max-height:760px) and (min-width:1181px){
  .app{gap:26px;padding:8px 26px}
  .rail-desc{display:none}
  .unit-mark{width:82px;height:82px;margin:18px 0}
  .unit-num{font-size:42px}
  .archive .mission-item{padding:6px 0 6px 8px}
  .pilot-card{margin:16px 0 18px}
  .controls{margin-bottom:14px}
  .ctrl-row{padding:3px 0}
}
@media (max-height:620px){
  .arcade-column{width:min(540px,calc((100dvh - 90px) * .5625))}
  .frame-top,.frame-bottom{height:24px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}