/* ============================================================================
 * SEGFAULT // style.css
 * M0.5: canvas grown to the Claude design 800x1200; design TOKENS + FONTS remapped
 * to the Claude Design source (VISUAL_DIRECTION.md §1, oklch cyan + JetBrains Mono
 * / Saira Condensed). The POC's CSS variable NAMES are kept (so the existing
 * header/frame/footer chrome rules keep working) but their VALUES now point at the
 * Claude tokens. Nothing in the canvas/game logic is scaled — only more voxels.
 * ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Claude design tokens (VISUAL_DIRECTION §1), mapped onto the POC var names */
  --bg: #000000; --panel: #0a0d12; --panel2: oklch(0.09 0.015 220); --panel3: #06080b;
  --border: oklch(0.30 0.06 215); --border2: oklch(0.20 0.04 215);
  --cyan: oklch(0.82 0.16 215); --cdim: oklch(0.35 0.09 215);
  --green: oklch(0.78 0.16 155); --yellow: oklch(0.80 0.17 70); --red: oklch(0.65 0.22 25);
  --orange: oklch(0.72 0.19 50);
  --text: oklch(0.92 0.02 215); --text2: oklch(0.62 0.03 215);
  --text3: oklch(0.40 0.04 215); --bright: oklch(0.98 0.04 215);
  --mono: 'JetBrains Mono', ui-monospace, 'Courier New', monospace;
  --display: 'Saira Condensed', 'Helvetica Neue', sans-serif;
  /* canvas size token (Claude design) */
  --canvas-w: 800px; --canvas-h: 1000px;
}
html, body {
  min-height: 100%; background: var(--bg); color: var(--text); font-family: var(--mono);
  display: flex; align-items: center; justify-content: center; padding: 20px 0;
  background-image: radial-gradient(rgba(0, 200, 255, .016) 1px, transparent 1px);
  background-size: 24px 24px;
}
body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0, 0, 0, .04) 3px, rgba(0, 0, 0, .04) 4px);
}

/* Shell is a row: 260 HUD | 800 canvas | 260 HUD (Screen 01 layout).
   HUD panels show ONLY in-game; title/game-over are full-bleed (panels hidden,
   shell collapses to just the canvas). */
.shell { display: flex; flex-direction: row; align-items: stretch; flex-shrink: 0; }
.hud { display: none; }                       /* hidden until in-game */
.shell.in-game .hud { display: flex; }

/* CANVAS FRAME — full-bleed 800x1000, 1px border (design: no header/footer bars,
   no corner brackets) */
.frame {
  position: relative; border: 1px solid var(--border2);
  overflow: hidden; background: var(--bg); flex-shrink: 0; width: var(--canvas-w); height: var(--canvas-h);
}
.scanlines {
  position: absolute; inset: 0; pointer-events: none; z-index: 4;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, .07) 2px, rgba(0, 0, 0, .07) 4px);
}
#c { width: 100%; height: 100%; display: block; }

/* ════════════════════════════════════════════════════════════════════════
 * SCREEN OVERLAYS — reproduced from the Claude design source (SEGFAULT Visual
 * Direction .dc.html screens 02 Title + 05 Game Over), adapted to the 800x1000
 * canvas. These are DOM overlays over the canvas (which draws the dim substrate
 * behind). Positions scaled from the 1200-tall mock to 1000.
 * ════════════════════════════════════════════════════════════════════════ */
.screen {
  position: absolute; inset: 0; z-index: 20;
  font-family: var(--mono);
}
.screen.hidden { display: none; }
.keycap {
  border: 1px solid currentColor; padding: 3px 9px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  box-shadow: inset 0 0 8px rgba(0, 224, 255, 0.14);
}

/* ── SCREEN 02 — TITLE (sector 1 cyan) ─────────────────────────────────── */
.screen-title { background: radial-gradient(120% 90% at 50% 40%, rgba(3,8,16,.55), rgba(0,0,0,.92)); }

.title-studio {
  position: absolute; top: 92px; left: 0; right: 0;
  display: flex; flex-direction: column; align-items: center;
}
.studio-mark { font-size: 11px; letter-spacing: 0.42em; color: oklch(0.55 0.08 215); }
.studio-rule { width: 64px; height: 1px; margin-top: 12px; background: oklch(0.45 0.08 215); }
.studio-presents { margin-top: 12px; font-size: 9px; letter-spacing: 0.4em; color: oklch(0.40 0.06 215); }

.title-plate { position: absolute; top: 232px; left: 0; right: 0; text-align: center; }
.title-word {
  margin: 0; font-family: var(--display); font-weight: 900;
  font-size: 116px; line-height: 0.86; letter-spacing: -0.012em; color: #f1f7fb;
  text-shadow: 0 0 24px rgba(0,224,255,0.4), 0 0 4px rgba(0,224,255,0.85);
}
.title-tag { margin-top: 26px; display: flex; align-items: center; justify-content: center; gap: 18px; }
.tag-rule { width: 70px; height: 1px; background: oklch(0.55 0.13 215); }
.tag-text { font-family: var(--display); font-weight: 300; font-size: 18px; letter-spacing: 0.46em; color: oklch(0.78 0.12 215); }

.title-menu {
  position: absolute; top: 600px; left: 0; right: 0;
  display: flex; flex-direction: column; align-items: center;
}
.menu-item {
  display: flex; align-items: center; justify-content: center; gap: 22px;
  min-width: 460px; padding: 16px 34px; cursor: pointer;
  background: linear-gradient(90deg, transparent, oklch(0.30 0.12 215 / 0.35), transparent);
  border: 0; border-top: 1px solid oklch(0.55 0.13 215 / 0.6); border-bottom: 1px solid oklch(0.55 0.13 215 / 0.6);
  font-family: var(--display); font-weight: 700; font-size: 26px; letter-spacing: 0.32em;
  color: oklch(0.95 0.04 215); text-shadow: 0 0 14px rgba(0,224,255,0.6);
}
.chev { width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent;
  filter: drop-shadow(0 0 6px rgba(0,224,255,.7)); animation: chevBreathe 2s ease-in-out infinite; }
.chev-l { border-right: 8px solid oklch(0.82 0.16 215); }
.chev-r { border-left: 8px solid oklch(0.82 0.16 215); }
@keyframes chevBreathe { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } }
.menu-secondary { margin-top: 20px; font-family: var(--display); font-weight: 500; font-size: 18px; letter-spacing: 0.36em; color: oklch(0.62 0.08 215); }
.title-prompt { margin-top: 48px; display: flex; align-items: center; justify-content: center; gap: 14px; }
.prompt-text { font-size: 11px; letter-spacing: 0.28em; color: oklch(0.70 0.10 215); }
.title-prompt .keycap { color: oklch(0.95 0.04 215); border-color: oklch(0.70 0.10 215); }

.title-stamp {
  position: absolute; bottom: 20px; left: 22px; right: 22px;
  display: flex; align-items: center; gap: 18px;
  font-size: 10px; letter-spacing: 0.22em; color: oklch(0.50 0.08 215);
}
.stamp-rule { flex: 1; height: 1px; background: oklch(0.25 0.05 215); }
.stamp-status { display: flex; align-items: center; gap: 8px; color: var(--green); }
.stamp-dot { width: 6px; height: 6px; background: var(--green); box-shadow: 0 0 6px var(--green); }

/* ── SCREEN 05 — GAME OVER (sector 3 oxide red, hue 35) ────────────────── */
.screen-gameover { background: radial-gradient(120% 90% at 50% 35%, rgba(8,0,0,.5), rgba(0,0,0,.94)); }

.go-head { position: absolute; top: 74px; left: 56px; right: 56px; }
.go-eyebrow { display: flex; align-items: baseline; gap: 18px; font-size: 10px; letter-spacing: 0.40em; color: oklch(0.55 0.10 35); }
.go-rule { flex: 1; height: 1px; background: oklch(0.30 0.10 35); }
.go-sub { margin-top: 44px; font-family: var(--display); font-weight: 300; font-size: 21px; letter-spacing: 0.38em; color: oklch(0.65 0.15 35); }
.go-title { margin: 12px 0 0; font-family: var(--display); font-weight: 900; font-size: 104px; line-height: 0.86; letter-spacing: -0.012em; color: #f5d5c8; }
.go-cursor { animation: blink 1s step-end infinite; color: oklch(0.72 0.22 35); }
@keyframes blink { 50% { opacity: 0; } }

.go-panel { position: absolute; top: 520px; left: 56px; right: 56px; border: 1px solid oklch(0.30 0.10 35); padding: 22px 26px; background: oklch(0.06 0.018 35); }
.go-panel-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 20px; font-size: 10px; letter-spacing: 0.36em; color: oklch(0.55 0.10 35); }
.go-rank { color: oklch(0.72 0.22 35); text-shadow: 0 0 6px rgba(255,110,50,.5); }
.go-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; border: 1px solid oklch(0.20 0.06 35); }
.go-cell { padding: 16px 20px; border-right: 1px solid oklch(0.20 0.06 35); }
.go-cell:last-child { border-right: 0; }
.go-cell-lbl { font-size: 9px; letter-spacing: 0.36em; color: oklch(0.55 0.10 35); }
.go-cell-val { margin-top: 10px; font-family: var(--display); font-weight: 700; font-size: 50px; line-height: 0.9; color: #f5d5c8; letter-spacing: 0.02em; }
.go-cell-of { font-size: 20px; color: oklch(0.55 0.10 35); }
.go-cell-sub { margin-top: 8px; font-size: 9px; letter-spacing: 0.24em; color: oklch(0.55 0.10 35); }
.go-telemetry { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 16px; }
.go-tel-lbl { font-size: 8px; letter-spacing: 0.28em; color: oklch(0.45 0.10 35); }
.go-tel-val { margin-top: 4px; font-size: 16px; color: #f5d5c8; }

.go-actions { position: absolute; bottom: 30px; left: 56px; right: 56px; display: flex; justify-content: center; align-items: center; gap: 14px; }
.go-action { display: flex; align-items: center; gap: 10px; padding: 13px 20px; border: 1px solid oklch(0.30 0.08 35); background: oklch(0.05 0.012 35); font-size: 11px; letter-spacing: 0.22em; color: oklch(0.65 0.08 35); cursor: pointer; font-family: var(--mono); transition: transform 0.08s ease, border-color 0.08s ease, box-shadow 0.08s ease; }
.go-action:hover { transform: translateY(-2px); border-color: oklch(0.55 0.13 35); box-shadow: 0 0 14px oklch(0.45 0.12 35 / 0.4); }
.go-action .keycap { font-size: 11px; padding: 2px 8px; color: oklch(0.75 0.08 35); border-color: oklch(0.40 0.10 35); box-shadow: none; }
.go-action.primary { border-color: oklch(0.55 0.13 35); background: oklch(0.07 0.02 35); color: oklch(0.85 0.10 35); cursor: pointer; }
.go-action.primary .keycap { color: oklch(0.95 0.05 35); border-color: oklch(0.55 0.13 35); }

/* ════════════════════════════════════════════════════════════════════════
 * IN-GAME HUD PANELS — Screen 01 left + right (260px each), reproduced from
 * the design source, fit to the 1000-tall canvas. Sector 1 cyan tokens.
 * ════════════════════════════════════════════════════════════════════════ */
.hud {
  width: var(--segfault-panel-width, 260px); flex: 0 0 260px;
  height: var(--canvas-h);
  padding: 18px; box-sizing: border-box;
  background: var(--panel);
  flex-direction: column; gap: 16px;
  font-family: var(--mono); color: var(--text); font-size: 11px;
}
.hud-left  { border: 1px solid var(--border2); border-right: none; }
.hud-right { border: 1px solid var(--border2); border-left: none; }
.frame { border-left: 1px solid var(--border2); border-right: 1px solid var(--border2); }

.hud-block { display: flex; flex-direction: column; }
.hud-stack { gap: 16px; }
.hud-spacer { flex: 1; }
.hud-divider { height: 1px; background: oklch(0.18 0.04 215); }
.hud-row { display: flex; justify-content: space-between; align-items: baseline; }
.hud-eyebrow { font-size: 9px; letter-spacing: 0.22em; color: var(--text3); }
.hud-lbl { font-size: 9px; letter-spacing: 0.32em; color: var(--text2); }
.hud-num { font-size: 10px; letter-spacing: 0.1em; color: var(--text); }
.hud-tag { font-size: 9px; letter-spacing: 0.2em; }
.hud-tag.amber { color: var(--yellow); }
.hud-tag.ok { color: var(--green); }
.bright { color: var(--bright); } .dim { color: var(--text3); }
.kc, .hud .kc { border: 1px solid var(--border); padding: 1px 5px; color: var(--bright); }

/* DIAG online */
.hud-online { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.dot { width: 6px; height: 6px; }
.dot-ok { background: var(--green); box-shadow: 0 0 6px var(--green); }
.online-txt { font-size: 10px; letter-spacing: 0.22em; color: var(--green); }
.hud-div-line { flex: 1; height: 1px; background: oklch(0.18 0.04 215); }

/* GUN HEAT */
.heat-num { display: flex; align-items: baseline; gap: 6px; margin-top: 12px; }
.heat-val { font-family: var(--display); font-weight: 700; font-size: 72px; line-height: 0.82; color: var(--bright); letter-spacing: -0.02em; }
.heat-val.warn { color: var(--orange); text-shadow: 0 0 18px rgba(255,150,32,0.4); }
.heat-val.crit { color: var(--red); text-shadow: 0 0 20px rgba(255,64,72,0.5); }
.heat-pct { font-size: 18px; color: var(--text2); letter-spacing: 0.06em; }
.seg-bar { margin-top: 14px; display: flex; gap: 3px; }
.seg-bar > i { flex: 1; height: 10px; display: block; background: var(--border); }
.seg-bar > i.lit { background: var(--cyan); }
.seg-bar > i.lit.glow { box-shadow: 0 0 6px var(--cyan); }
.seg-bar > i.warn { background: var(--border); border-top: 1px solid var(--orange); border-bottom: 1px solid var(--orange); }
.seg-bar > i.warn.on { background: var(--orange); box-shadow: 0 0 6px var(--orange); }
.seg-bar > i.crit { background: oklch(0.20 0.04 215); border: 1px solid var(--red); }
.seg-bar > i.crit.on { background: var(--red); box-shadow: 0 0 8px var(--red); }
.seg-cap { font-size: 8px; letter-spacing: 0.22em; color: var(--text3); margin-top: 6px; }
.seg-cap.amber { color: var(--yellow); }

/* VENT */
.vent-row { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.vent-ring { --vent-fill: 360deg; width: 38px; height: 38px; border-radius: 50%; position: relative;
  background: conic-gradient(var(--green) 0deg, var(--green) var(--vent-fill), var(--panel3) var(--vent-fill), var(--panel3) 360deg); }
.vent-ring.charging { background: conic-gradient(var(--orange) 0deg, var(--orange) var(--vent-fill), var(--panel3) var(--vent-fill), var(--panel3) 360deg); }
.vent-core { position: absolute; inset: 4px; background: var(--panel); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 9px; color: var(--green); letter-spacing: 0.1em; }
.vent-ring.charging .vent-core { color: var(--orange); }
.vent-hint { flex: 1; font-size: 10px; color: var(--text2); line-height: 1.6; letter-spacing: 0.04em; }

/* SHIELD / INTEGRITY blocks */
.seg-blocks { display: flex; gap: 4px; margin-top: 8px; }
.seg-blocks > i { flex: 1; height: 10px; display: block; }
.seg-blocks.shield > i { background: var(--cyan); }
.seg-blocks.shield > i:first-child { box-shadow: 0 0 6px var(--cyan); }
.seg-blocks.shield > i.off { background: oklch(0.20 0.04 215); box-shadow: none; }
.seg-blocks.integ > i { background: var(--text); }
.seg-blocks.integ > i.off { background: oklch(0.20 0.04 215); }

/* EVENT LOG */
.event-log { font-family: var(--mono); font-size: 10px; line-height: 1.65; color: var(--text2); margin-top: 8px; }
.event-log > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event-log .ts { color: var(--text3); }
.event-log .new { color: var(--bright); }
.event-log .new .ts { color: var(--cyan); }

/* RIGHT — SECTOR + LEVEL */
.sector-row { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; }
.sector-num { font-family: var(--display); font-weight: 900; font-size: 42px; line-height: 0.85; color: var(--cyan); text-shadow: 0 0 12px var(--cyan); }
.sector-name { font-family: var(--display); font-weight: 500; font-size: 18px; letter-spacing: 0.14em; color: var(--text); }
.level-block { margin-top: 14px; }
.tick-bar { display: flex; gap: 2px; margin-top: 6px; }
.tick-bar > i { flex: 1; height: 6px; display: block; background: var(--border); }
.tick-bar > i.lit { background: var(--cyan); }
.tick-bar > i.lit.glow { box-shadow: 0 0 6px var(--cyan); }
/* per-sector tick colors: S1 cyan / S2 magenta / S3 oxide-rust */
.tick-bar > i.s1.lit { background: var(--cyan); }       .tick-bar > i.s1.lit.glow { box-shadow: 0 0 6px var(--cyan); }
.tick-bar > i.s2.lit { background: oklch(0.72 0.19 330); } .tick-bar > i.s2.lit.glow { box-shadow: 0 0 6px oklch(0.72 0.19 330); }
.tick-bar > i.s3.lit { background: oklch(0.62 0.17 35); }  .tick-bar > i.s3.lit.glow { box-shadow: 0 0 6px oklch(0.62 0.17 35); }
.tick-bar > i.future { background: var(--border); }
.tick-bar > i.future { background: oklch(0.20 0.04 215); }

/* SCORE / CASH */
.score-val { font-family: var(--display); font-weight: 700; font-size: 38px; line-height: 0.9; color: var(--bright); letter-spacing: 0.02em; margin-top: 6px; }
.cash-row { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; }
.cash-sym { font-family: var(--display); font-weight: 500; font-size: 14px; color: var(--cyan); letter-spacing: 0.1em; }
.cash-val { font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 0.9; color: var(--text); letter-spacing: 0.02em; }

/* CONTINUES */
.continues { display: flex; gap: 6px; margin-top: 10px; }
.continues > i { flex: 1; height: 28px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--cyan); background: oklch(0.18 0.04 215); box-shadow: 0 0 6px var(--cyan); }
.continues > i::before { content: ''; width: 8px; height: 8px; background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }
.continues > i.spent { border-color: var(--border); background: var(--panel3); box-shadow: none; }
.continues > i.spent::before { background: var(--border); box-shadow: none; }

/* ACTIVE upgrades */
.upgrade-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 10px; }
.up-slot { aspect-ratio: 1; }
.up-slot.empty { border: 1px dashed var(--border2); background: oklch(0.08 0.012 215); }
.up-list { margin-top: 8px; font-size: 9px; color: var(--text3); letter-spacing: 0.16em; line-height: 1.6; }
/* EMP PULSE widget — called out: big charge number + token meter */
.emp-widget { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.emp-num-wrap { display: flex; flex-direction: column; align-items: center; min-width: 68px;
  border: 1px solid var(--orange); background: color-mix(in oklch, var(--orange) 10%, #05070c);
  padding: 6px 4px; box-shadow: 0 0 14px rgba(255,150,32,0.25), inset 0 0 18px rgba(255,150,32,0.06); }
.emp-num { font-family: var(--display); font-weight: 900; font-size: 44px; line-height: 0.8; color: var(--orange); text-shadow: 0 0 16px rgba(255,150,32,0.55); }
.emp-num.zero { color: var(--text3); text-shadow: none; }
.emp-num-lbl { font-size: 8px; letter-spacing: 0.28em; color: var(--text2); margin-top: 3px; }
.emp-side { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.emp-tokens { display: flex; gap: 4px; flex-wrap: wrap; }
.emp-tokens > i { width: 12px; height: 12px; border: 1px solid var(--orange); background: var(--orange); box-shadow: 0 0 6px rgba(255,150,32,0.5); }
.emp-tokens > i.empty { background: transparent; border-color: oklch(0.35 0.06 50); box-shadow: none; }
.emp-fire { font-size: 10px; letter-spacing: 0.14em; color: var(--text2); }
#emp-ready.ready { color: var(--orange); }
/* filled upgrade slot (icon plate) — mirrors the design source icon plates */
.up-slot.filled { border: 1px solid var(--cyan); background: oklch(0.12 0.025 215); position: relative; }
.up-slot .up-tier { position: absolute; bottom: -1px; right: -1px; background: var(--cyan); color: var(--bg); font-size: 7px; padding: 0 3px; letter-spacing: 0.06em; line-height: 1.4; }
.up-ic { position: absolute; inset: 0; }

/* TELEMETRY */
.tel-head { margin-bottom: 10px; }
.tel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; font-size: 10px; }
.tel-lbl { font-size: 8px; color: var(--text3); letter-spacing: 0.2em; }
.tel-val { color: var(--text); margin-top: 2px; }

/* ── SCREEN 04 — CONTINUE (sector 2 magenta, hue 330, glitched) ─────────── */
.screen-continue { background: radial-gradient(120% 90% at 50% 38%, rgba(8,0,8,.5), rgba(0,0,0,.94)); }
.dot-danger { width: 10px; height: 10px; background: var(--red); box-shadow: 0 0 10px var(--red); }

.cn-banner { position: absolute; top: 58px; left: 56px; right: 56px; display: flex; align-items: center; gap: 14px; }
.cn-err { font-size: 10px; letter-spacing: 0.46em; color: oklch(0.85 0.20 25); }
.cn-rule { flex: 1; height: 1px; background: oklch(0.40 0.15 25); }
.cn-fatal { font-size: 10px; letter-spacing: 0.30em; color: oklch(0.65 0.12 25); }

/* glitched chromatic-split SEGFAULT */
.cn-title-wrap { position: absolute; top: 168px; left: 0; right: 0; text-align: center; }
.glitch-word { position: relative; display: inline-block; font-family: var(--display); font-weight: 900; font-size: 84px; line-height: 0.85; letter-spacing: -0.012em; }
.glitch-word .g { display: block; }
.glitch-word .g-base { position: relative; color: #f1f7fb; }
.glitch-word .g-mag  { position: absolute; left: 0; right: 0; color: #ff20a0; transform: translate(-7px, 3px); opacity: 0.85; animation: cnSweep 700ms steps(2) infinite; }
.glitch-word .g-cyan { position: absolute; left: 0; right: 0; color: #00ffd0; transform: translate(7px, -3px); opacity: 0.85; animation: cnSweep 700ms steps(2) infinite reverse; }
@keyframes cnSweep { 0%,100% { transform: translate(-7px,3px); } 50% { transform: translate(-5px,2px); } }
.cn-prompt { margin-top: 24px; font-family: var(--display); font-weight: 300; font-size: 19px; letter-spacing: 0.42em; color: oklch(0.85 0.20 25); }

/* huge countdown */
.cn-count-wrap { position: absolute; top: 400px; left: 0; right: 0; text-align: center; }
.cn-count-lbl { font-size: 10px; letter-spacing: 0.42em; color: oklch(0.65 0.10 330); margin-bottom: 12px; }
.glitch-num { position: relative; display: inline-block; }
.glitch-num .g { font-family: var(--display); font-weight: 900; font-size: 190px; line-height: 0.85; }
.glitch-num .g-base { position: relative; color: #fff; }
.glitch-num .g-mag  { position: absolute; inset: 0; color: #ff20a0; opacity: 0.7; transform: translate(-9px, 4px); }
.glitch-num .g-cyan { position: absolute; inset: 0; color: #00ffd0; opacity: 0.7; transform: translate(9px, -4px); }
.cn-count-sub { margin-top: 4px; font-size: 11px; letter-spacing: 0.36em; color: oklch(0.55 0.08 330); }

/* continues remaining */
.cn-remaining { position: absolute; top: 690px; left: 0; right: 0; text-align: center; }
.cn-remaining-lbl { font-size: 10px; letter-spacing: 0.42em; color: oklch(0.65 0.10 330); margin-bottom: 14px; }
.cn-remaining-num { font-family: var(--display); font-weight: 900; font-size: 80px; line-height: 0.9; color: oklch(0.95 0.05 330); letter-spacing: 0.02em; text-shadow: 0 0 24px rgba(255,80,220,0.55); }

/* actions */
.cn-actions { position: absolute; bottom: 48px; left: 0; right: 0; }
.cn-choice { display: flex; justify-content: center; gap: 28px; }
.cn-yes { border: 0; cursor: pointer; padding: 20px 44px; background: oklch(0.78 0.22 330); color: #110013; font-family: var(--display); font-weight: 700; box-shadow: 0 0 24px rgba(255,80,220,0.55); }
.cn-yes-main { font-size: 24px; letter-spacing: 0.22em; line-height: 1; }
.cn-yes-sub { margin-top: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em; opacity: 0.8; }
.cn-no { padding: 20px 44px; border: 1px solid oklch(0.55 0.08 330); color: oklch(0.85 0.06 330); font-family: var(--display); background: transparent; cursor: pointer; text-align: center; transition: transform 0.08s ease, box-shadow 0.08s ease, border-color 0.08s ease; }
.cn-no:hover { transform: translateY(-2px); border-color: oklch(0.78 0.16 330); box-shadow: 0 0 18px rgba(255,80,220,0.3); }
.cn-no-main { font-size: 24px; letter-spacing: 0.22em; line-height: 1; font-weight: 500; }
.cn-no-sub { margin-top: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em; color: oklch(0.55 0.08 330); }
.cn-footer { margin-top: 28px; display: flex; justify-content: center; gap: 38px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; color: oklch(0.42 0.06 330); }

/* ── SCREEN 03 — SHOP / ARMORY (sector 1 cyan) ─────────────────────────── */
.screen-shop { background: radial-gradient(120% 90% at 50% 30%, rgba(3,8,16,.5), rgba(0,0,0,.94)); }
.sh-head { position: absolute; top: 0; left: 0; right: 0; padding: 22px 26px 0; }
.sh-eyebrow { display: flex; align-items: center; gap: 14px; font-size: 10px; letter-spacing: 0.42em; color: oklch(0.55 0.08 215); }
.sh-rule-sm { width: 28px; height: 1px; background: oklch(0.45 0.08 215); }
.sh-rule { flex: 1; height: 1px; background: oklch(0.25 0.05 215); }
.sh-title { margin-top: 16px; display: flex; align-items: baseline; gap: 22px; }
.sh-title-main { font-family: var(--display); font-weight: 900; font-size: 60px; letter-spacing: -0.01em; color: #f1f7fb; line-height: 0.9; }
.sh-title-sub { font-family: var(--display); font-weight: 300; font-size: 25px; letter-spacing: 0.14em; color: oklch(0.65 0.10 215); }
.sh-blurb { margin-top: 12px; font-size: 11px; line-height: 1.7; color: oklch(0.60 0.06 215); max-width: 600px; letter-spacing: 0.04em; }
.sh-stats { margin-top: 20px; display: flex; align-items: stretch; border: 1px solid var(--border); }
.sh-stat { flex: 1; padding: 14px 18px; background: oklch(0.07 0.012 215); }
.sh-stat-cash { background: oklch(0.09 0.018 215); }
.sh-stat-reroll { flex: 0.7; display: flex; flex-direction: column; align-items: flex-start; }
.sh-stat-div { width: 1px; background: var(--border2); }
.sh-stat-lbl { font-size: 9px; letter-spacing: 0.32em; color: oklch(0.55 0.08 215); }
.sh-stat-cash-row { margin-top: 8px; display: flex; align-items: baseline; gap: 8px; }
.sh-sym { font-family: var(--display); font-weight: 500; font-size: 22px; color: var(--cyan); letter-spacing: 0.08em; }
.sh-cash-val { font-family: var(--display); font-weight: 700; font-size: 38px; color: #f1f7fb; line-height: 0.9; }
.sh-stat-score { margin-top: 8px; font-family: var(--display); font-weight: 700; font-size: 30px; color: oklch(0.92 0.04 215); line-height: 1; }
.sh-reroll-cost { margin-top: 8px; font-family: var(--display); font-weight: 500; font-size: 18px; color: oklch(0.75 0.08 215); }
.sh-reroll-left { margin-top: 6px; font-size: 9px; color: oklch(0.40 0.06 215); letter-spacing: 0.16em; }
/* Compact catalog grid: 3 columns x 4 rows = 12 cards (Sector-Defense density).
   Icon floats top-left; title + copy flow around it; cost pinned bottom. */
.sh-cards { position: absolute; top: 287px; left: 26px; right: 26px; bottom: 129px;
  display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 10px; }
.sh-card { padding: 10px 12px 8px; position: relative; overflow: hidden;
  display: flex; flex-direction: column; }
/* unaffordable -> dulled/locked (Sector-Defense style) */
.sh-card.locked { opacity: 0.38; filter: saturate(0.35); }
.sh-card.locked .sh-cost-val { color: oklch(0.45 0.20 25) !important; text-shadow: none !important; }
.sh-card .sh-insufficient { display: none; }
.sh-card.locked .sh-insufficient { display: block; }
/* per-row shop card outline colors: row0 cyan / row1 magenta / row2 red / row3 orange */
.sh-row0 { --rowc: var(--cyan);              --rowg: rgba(0,224,255,0.35); }
.sh-row1 { --rowc: oklch(0.72 0.19 330);     --rowg: rgba(255,80,220,0.35); }
.sh-row2 { --rowc: oklch(0.62 0.22 25);      --rowg: rgba(255,64,72,0.35); }
.sh-row3 { --rowc: var(--orange);            --rowg: rgba(255,150,32,0.35); }
.sh-card.sh-row0, .sh-card.sh-row1, .sh-card.sh-row2, .sh-card.sh-row3 {
  border: 1px solid var(--rowc); background: color-mix(in oklch, var(--rowc) 8%, #05070c); }
/* mouse: affordable cards are clickable + hover-lift; the count sits top-right */
.sh-card.buyable { cursor: pointer; transition: box-shadow .12s, transform .12s; }
.sh-card.buyable:hover { box-shadow: 0 0 14px var(--rowg), inset 0 0 18px var(--rowg); transform: translateY(-1px); }
.sh-own { position: absolute; top: 8px; right: 10px; font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.14em; color: var(--rowc); }
/* icon: small box floated top-left, copy wraps around it */
.sh-icon { float: left; width: 40px; height: 40px; margin: 0 10px 4px 0; position: relative;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid oklch(0.50 0.10 215); background: oklch(0.05 0.01 215); }
.hb { position: absolute; height: 2px; }
.hb1 { left: 22%; right: 22%; top: 28%; background: var(--cyan); box-shadow: 0 0 4px var(--cyan); }
.hb2 { left: 30%; right: 30%; top: 46%; background: oklch(0.72 0.13 215); }
.hb3 { left: 38%; right: 38%; top: 64%; background: oklch(0.62 0.10 215); }
.hb4 { left: 46%; right: 46%; top: 80%; background: oklch(0.50 0.08 215); }
.pa { position: absolute; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 9px solid var(--cyan); }
.pa1 { top: 16%; filter: drop-shadow(0 0 3px rgba(0,224,255,0.6)); }
.pa2 { top: 42%; }
.pa3 { top: 66%; border-bottom-color: oklch(0.72 0.13 215); }
.sh-funnel { width: 70%; height: 70%; }
.sh-card-icon { float: left; width: 34px; height: 34px; margin: 0 10px 4px 0; border: 1px solid var(--rowc); background: color-mix(in oklch, var(--rowc) 12%, #05070c); position: relative; }
.sh-card-title { font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: 0.03em; color: #f1f7fb; line-height: 1.05; padding-right: 42px; }
.sh-card-copy { font-size: 9px; line-height: 1.4; color: oklch(0.75 0.06 215); letter-spacing: 0.02em; margin-top: 3px; }
.sh-card-copy.am2 { color: oklch(0.75 0.07 70); }
.cy { color: var(--cyan); } .br { color: oklch(0.95 0.04 215); }
.am { color: oklch(0.80 0.17 70); } .am2 { color: oklch(0.65 0.07 70); } .am3 { color: oklch(0.55 0.07 70); }
.am-br { color: oklch(0.95 0.05 70); }
.sh-card-stats { display: flex; flex-direction: column; gap: 5px; font-size: 10px; }
.sh-stat-row { display: flex; justify-content: space-between; color: oklch(0.55 0.06 215); }
.sh-stat-row span:first-child { letter-spacing: 0.18em; }
.sh-stat-row .ok { color: var(--green); }
.sh-card-cost { clear: both; margin-top: auto; padding-top: 6px; display: flex; justify-content: flex-end; align-items: baseline; }
.sh-cost-val { font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: 0.04em; }
.sh-cost-val.ok { color: var(--green); }
.sh-cost-val.br { color: #f1f7fb; }
.sh-cost-val.glow { text-shadow: 0 0 8px rgba(0,224,255,0.6); }
.sh-cost-val.am { color: oklch(0.80 0.17 70); }
.sh-insufficient { clear: both; font-size: 8px; color: oklch(0.55 0.22 25); letter-spacing: 0.18em; text-align: right; margin-top: 2px; }
.sh-footer { position: absolute; bottom: 24px; left: 26px; right: 26px; display: flex; align-items: stretch; justify-content: space-between; gap: 18px; }
.sh-footer-left { display: flex; gap: 18px; }
.sh-fbtn { display: flex; align-items: center; gap: 10px; padding: 13px 20px; border: 1px solid oklch(0.30 0.06 215); background: oklch(0.07 0.012 215); font-size: 11px; letter-spacing: 0.22em; color: oklch(0.70 0.08 215); }
.sh-fbtn .kc { font-size: 11px; padding: 2px 8px; color: oklch(0.95 0.04 215); border-color: oklch(0.55 0.10 215); box-shadow: none; }
.sh-confirm { display: flex; align-items: center; gap: 12px; padding: 13px 26px; border: 0; cursor: pointer; background: var(--cyan); color: #000; font-family: var(--mono); box-shadow: 0 0 18px rgba(0,224,255,0.45); font-size: 12px; letter-spacing: 0.22em; font-weight: 700; }
.kc-dark { font-size: 11px; border: 1px solid #000; padding: 2px 8px; letter-spacing: 0.1em; font-weight: 700; }

/* ── PAUSE overlay ── */
.screen-pause { background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; }
.pause-box { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.pause-word { font-family: var(--display); font-weight: 900; font-size: 72px; letter-spacing: 0.2em; color: var(--cyan); text-shadow: 0 0 28px rgba(0,224,255,0.5); }
.pause-hint { font-size: 11px; letter-spacing: 0.22em; color: var(--text2); }

/* boss title card + level-clear card (brief freeze overlays before a wipe) */
.screen-bosscard, .screen-levelclear { background: rgba(0,0,0,0.62); display: flex; align-items: center; justify-content: center; }
.card-box { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.card-eyebrow { font-size: 12px; letter-spacing: 0.34em; color: var(--text2); }
.card-title { font-family: var(--display); font-weight: 900; font-size: 84px; line-height: 0.92; letter-spacing: 0.08em; color: var(--cyan); text-shadow: 0 0 32px rgba(0,224,255,0.55); }
.card-sub { font-size: 11px; letter-spacing: 0.26em; color: var(--text2); }
.screen-bosscard .card-title { color: #ff5050; text-shadow: 0 0 32px rgba(255,64,64,0.6); }
.screen-bosscard .card-sub { color: #ff8a8a; }

/* ── HUD CONTROLS buttons (right panel, above telemetry) ── */
.ctrl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.ctrl-btn { display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer;
  border: 1px solid var(--border); background: oklch(0.09 0.018 215);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; color: var(--text2);
  transition: all .12s; }
.ctrl-btn:hover { border-color: var(--cyan); color: var(--bright); box-shadow: 0 0 10px rgba(0,224,255,0.15); }
.ctrl-btn .kc { font-size: 10px; padding: 1px 6px; color: var(--bright); border-color: var(--cyan); box-shadow: none; }
.ctrl-btn.active { border-color: var(--cyan); color: var(--cyan); }