:root {
  color-scheme: dark;
  --ink:#e8f4fc;
  --muted:#b0c4d9;
  --pale:#89e8f0;
  --hot:#ffc086;
  --line:#729db449;
  --paper:#0d1c2e;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html,body { width:100%; height:100%; margin:0; overflow:hidden; overscroll-behavior:none; }
body { background:radial-gradient(ellipse at 50% 15%, #1f3950, #101e31 43%, #080f1d 83%); color:var(--ink); }
button { color:inherit; font:inherit; border:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
button:focus-visible { outline:2px solid #fff; outline-offset:3px; }
button:disabled { cursor:default; }
.cabinet-ui {
  position:relative; height:100vh; height:100dvh; margin:auto;
  padding:max(7px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(7px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));
  display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:7px;
  max-width:1420px; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
}
.top { display:flex; justify-content:space-between; align-items:center; padding:0 6px; min-height:44px; z-index:3; position:relative; }
.identity { display:flex; align-items:center; gap:12px; }
.identity img { width:32px;height:32px; }
h1 { margin:0; font-size:clamp(.87rem,2vw,1.18rem); letter-spacing:.14em; font-weight:850; }
h1 span { color:var(--pale); }
:lang(zh-CN) h1 { letter-spacing:.11em; }
.top-buttons { display:flex; gap:5px; align-items:center; }
.top-buttons .icon,.cabinet-ui .top-buttons .game-seo-info summary {
  padding:0; width:44px; height:44px; display:grid; place-items:center;
  color:var(--ink); border:1px solid var(--line); border-radius:8px; background:#122137;
}
.top-buttons .game-seo-info { position:static!important; inset:auto!important; }
.top-buttons .game-seo-info .game-info-content { touch-action:pan-y; overscroll-behavior:contain; }
.cabinet-ui:has(.game-seo-info[open]) { touch-action:auto; }
.top-buttons .icon:hover, .cabinet-ui .top-buttons .game-seo-info summary:hover { background:#20364e; }
.top-buttons svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.machine { min-height:0; position:relative; display:grid; grid-template-columns:minmax(135px,210px) minmax(0,1fr) minmax(160px,220px); gap:12px; }
.stage { position:relative; min-height:0; min-width:0; }
#playfield { display:block; width:100%; height:100%; touch-action:none; }
.telemetry,.mission { align-self:start; margin-top:clamp(10px,12vh,120px); }
.telemetry { padding:16px 9px 16px 15px; box-shadow:inset 2px 0 #6ed9e4; background:linear-gradient(90deg,#172b42d1,#13233a09); }
.telemetry > div+div { margin-top:18px; }
.telemetry span,.mission-head,#mode { color:var(--muted); font-size:.69rem; letter-spacing:.15em; font-weight:750; }
.telemetry output { display:block; margin-top:3px; font-variant-numeric:tabular-nums; font-size:1.28rem; font-weight:700; }
.scorebox output { font-size:clamp(1.35rem,2.7vw,2.1rem); color:var(--pale); }
.mission { background:linear-gradient(270deg,#172b42d1,#13233a10); border-right:2px solid #e9a366; padding:15px 14px 16px 9px; }
.mission-head { display:flex; gap:10px; align-items:center; justify-content:space-between; margin-bottom:8px; }
#mode { color:var(--hot); }
#multiplier { font-size:.89rem;color:var(--pale); padding:2px 6px; background:#3d718344; border-radius:3px; }
.mission h2 { margin:0; font-size:1.12rem; }
.mission p { margin:7px 0 3px; font-size:.88rem; color:var(--muted); line-height:1.43; }
.mission-progress { display:flex; gap:4px; margin-top:10px; }
.mission-progress i { width:19px; height:4px; border-radius:3px; background:#91b3cf46; }
.mission-progress i.on { background:var(--hot); }
.signal, .save-light {
  position:absolute; pointer-events:none; width:max-content; max-width:94%; left:50%; transform:translateX(-50%);
  background:#0a1527e8; color:var(--pale); padding:8px 13px; border:1px solid var(--line); border-radius:6px;
  font-size:clamp(.66rem,1.8vw,.82rem); font-weight:750; white-space:nowrap;
}
.signal { top:7%; }
.signal.warn { color:#ffbd84; border-color:#eb8b61; }
.save-light { bottom:3%; color:var(--hot); padding:4px 8px; font-size:.65rem; }
.keyboard { display:flex; justify-content:center; align-items:center; gap:18px; color:var(--muted); font-size:.73rem; min-height:25px; }
kbd { background:#17283b; border:1px solid var(--line); padding:1px 5px; border-radius:3px; font-size:.72rem; }
.inputs { display:none; justify-content:center; position:relative; gap:6px; }
.inputs button { touch-action:none; }
.inputs .bat,.inputs .nudge,.inputs .fire {
  background:#162b42; border:1px solid #527b99; border-radius:8px; min-height:44px; font-weight:730;
}
.inputs .bat { color:var(--pale); position:relative; }
.inputs .bat.left { color:var(--hot); }
.inputs button.engaged { border-color:currentColor; background:#254d65; color:white; }
.inputs .nudge { color:var(--muted); display:flex; align-items:center; justify-content:center; gap:6px; min-width:44px; }
.inputs .nudge span { color:var(--pale); font-size:1.18rem; }
.inputs .nudge small { font-size:.59rem; letter-spacing:.025em; }
.inputs .nudge:disabled { opacity:.38; }
.inputs .fire { color:var(--hot); padding:0 10px; position:relative; overflow:hidden; font-size:.72rem; letter-spacing:.06em; }
.fire i { position:absolute; inset:auto auto 0 0; height:4px; width:var(--power,0%); background:var(--hot); }
.overlay { position:absolute; z-index:2; inset:57px 0 0; display:grid; place-items:center; pointer-events:none; padding:10px; }
.overlay::before { content:""; position:absolute; inset:0; background:radial-gradient(ellipse at center,#070d1c62,#070d1c06); }
.sheet {
  pointer-events:auto; position:relative; width:min(390px,100%); max-height:100%; overflow:auto; overscroll-behavior:contain; touch-action:pan-y;
  padding:30px; background:linear-gradient(145deg,#162d45f5,#0c1626fd 77%); border:1px solid #6c9dba94;
  border-radius:13px; box-shadow:0 24px 72px #050812ab, inset 0 2px #86ecf288;
}
.cabinet-ui:has(.overlay:not([hidden])) { touch-action:auto; }
.sheet h2 { margin:0 0 9px; font-size:clamp(1.52rem,4vw,2.7rem); font-weight:900; letter-spacing:-.05em; line-height:.99; color:#f0f7ff; }
.sheet p { color:var(--muted); font-size:.87rem; line-height:1.45; margin:0 0 18px; }
.sheet-actions { display:grid; gap:7px; }
.sheet-actions button { text-align:left; min-height:44px; padding:8px 13px; background:#19334b; border:1px solid #759fbd6b; border-radius:7px; font-weight:720; }
.sheet-actions button:hover { background:#24455e; }
.sheet-actions button.primary { background:#9ceaf0; color:#0a2339; border-color:transparent; }
.sheet-actions button.primary:hover { background:#c2faff; }
@media (pointer:fine) and (min-width:800px) {
  .overlay { justify-items:start; padding-left:clamp(22px,6vw,99px); }
  .overlay .sheet { width:min(365px,31vw); }
}
@media (any-pointer:coarse), (max-width:720px) {
  .cabinet-ui { grid-template-rows:auto minmax(0,1fr); }
  .machine { grid-template-rows:auto minmax(0,1fr) auto; grid-template-columns:minmax(0,1fr) auto; gap:3px 9px; }
  .telemetry,.mission { margin:0; padding:2px 3px; border:0; box-shadow:none; background:none; align-self:start; }
  .telemetry { display:flex; gap:10px; align-items:baseline; }
  .telemetry span,.mission-head,#mode { font-size:.56rem; letter-spacing:.055em; }
  .telemetry output { font-size:.9rem; margin-top:1px; }
  .telemetry > div+div { margin:0; }
  .telemetry .recordbox { display:none; }
  .mission-head { margin:0; gap:4px; }
  #mode { display:none; }
  .mission-copy { max-width:190px; text-align:right; }
  .mission { display:flex; flex-direction:row-reverse; gap:6px; align-items:flex-start; }
  .mission h2 { display:none; }
  .mission p { margin:0; font-size:.68rem; line-height:1.22; }
  .mission-progress { margin:3px 0 0; justify-content:flex-end; }
  .mission-progress i { width:12px; height:3px; }
  .stage { grid-area:2 / 1 / 3 / -1; }
  .keyboard { display:none; }
  .inputs { display:grid; grid-area:3 / 1 / 4 / -1; grid-template-columns:minmax(48px,1fr) minmax(60px,.62fr) minmax(48px,1fr); grid-template-rows:44px 52px; }
  .left { grid-area:2 / 1; } .right { grid-area:2 / 3; }
  .push-left { grid-area:1 / 1; justify-self:end; width:min(100%,100px); }
  .push-right { grid-area:1 / 3; justify-self:start; width:min(100%,100px); }
  .fire { grid-area:1 / 2 / 3 / 3; align-self:end; }
  .sheet { padding:22px; }
}
@media (any-pointer:coarse) and (orientation:landscape) {
  .machine { grid-template-columns:minmax(85px,1fr) minmax(0,2.9fr) minmax(85px,1fr); grid-template-rows:minmax(0,1fr); }
  .stage { grid-area:1 / 2; }
  .telemetry { grid-area:1 / 1; padding-top:7px; flex-wrap:wrap; }
  .mission { grid-area:1 / 3; padding-top:7px; }
  .inputs { position:absolute; inset:auto 0 0; display:grid; grid-template-columns: minmax(86px,22%) 1fr minmax(86px,22%); pointer-events:none; }
  .inputs button { pointer-events:auto; }
  .fire { justify-self:center; align-self:end; }
  .overlay { inset:50px 0 0; }
  .sheet { padding:16px; }
}
@media (max-height:450px) and (orientation:landscape) {
  .top,.top-buttons .icon,.cabinet-ui .top-buttons .game-seo-info summary { min-height:36px; height:36px; }
  .overlay { inset:43px 0 0; }
  .sheet h2 { font-size:1.65rem; }
}

@media (pointer:fine) and (min-width:721px) {
  .inputs { display:grid; position:absolute; left:50%; bottom:3%; translate:-50% 0; }
  .inputs .bat,.inputs .nudge { display:none; }
  .inputs .fire { padding:0 20px; background:#13273eec; }
}
.fire::after {
  content:""; position:absolute; height:4px; inset:auto 28% 0 58%;
  border-inline:1px solid #fff8; background:#c4f0f752; pointer-events:none;
}