/* ============================================================================
 * LODESTAR // style.css
 * STOLENCOW — Star Sudoku. Act I: Charting. M0 prototype.
 *
 * Aesthetic: deep-space nav-bay. A living starfield + milky-way nebula burns
 * behind a glass chart. Nine star-cores, each its own shape/glyph/color. Blade
 * Runner saturation, calm A-minor bloom. Built on segfault's HUD DNA (eyebrows,
 * segmented bars, tabular numerals, oklch engine, JetBrains Mono / Saira) and
 * pushed past it — real depth, real light, a chart that feels machined.
 *
 * Token NAMES follow 05_STYLE_SPEC.md (--color-bg, --color-primary, ...).
 * Token VALUES are unique to Lodestar.
 * ========================================================================== */

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

:root {
  /* ── Backgrounds ─────────────────────────────────────────── */
  --color-bg:            #04060e;   /* the void */
  --color-bg-secondary:  #070b18;
  --color-panel:         #0a1122;   /* nav-bay chrome */
  --color-panel-deep:    #060912;

  /* ── Brand — lodestar teal→azure, the nav readout light ──── */
  --color-primary:       oklch(0.84 0.15 205);   /* lodestar cyan */
  --color-primary-mid:   oklch(0.62 0.13 210);
  --color-primary-dark:  oklch(0.40 0.09 212);
  --color-secondary:     oklch(0.72 0.17 285);   /* nebula violet */
  --color-accent:        oklch(0.86 0.15 90);    /* signal gold */
  --color-accent-2:      oklch(0.74 0.18 330);   /* magenta drift */
  --color-success:       oklch(0.80 0.16 155);   /* unit-stabilize green */
  --color-success-dim:   oklch(0.52 0.10 155);
  --color-danger:        oklch(0.65 0.23 22);    /* conflict red */

  /* ── Text ────────────────────────────────────────────────── */
  --color-text:          oklch(0.93 0.02 210);
  --color-text-dim:      oklch(0.74 0.03 212);   /* bumped 0.66→0.74 to clear WCAG AA (4.5:1) on the dark panels */
  --color-text-dark:     oklch(0.56 0.04 214);   /* bumped 0.44→0.56 for the smallest labels (deck counter, sub-labels) */
  --color-bright:        oklch(0.99 0.02 205);

  /* ── Structure ───────────────────────────────────────────── */
  --color-border:        oklch(0.34 0.06 208);
  --color-border-dim:    oklch(0.22 0.04 210);
  --color-ui-bg:         oklch(0.11 0.02 214);

  /* ── Typography ──────────────────────────────────────────── */
  --font-primary:  'JetBrains Mono', ui-monospace, 'Courier New', monospace;
  --font-display:  'Saira Condensed', 'Helvetica Neue', sans-serif;
  --font-size-xs:   9px;
  --font-size-sm:   11px;
  --font-size-base: 13px;
  --font-size-lg:   18px;
  --font-size-xl:   28px;
  --font-size-xxl:  64px;
  --line-height:      1.6;
  --letter-spacing:      0.04em;
  --letter-spacing-wide: 0.28em;

  /* ── Spacing ─────────────────────────────────────────────── */
  --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px;

  /* ── UI Chrome ───────────────────────────────────────────── */
  --border-width: 1px;
  --border-style: solid;
  --border-radius: 0px;         /* machined, not rounded */
  --hud-height:  100%;
  --hud-padding: 20px;
  --hud-font-size: 11px;

  /* ── Animation ───────────────────────────────────────────── */
  --anim-fast:   0.12s;
  --anim-normal: 0.28s;
  --anim-slow:   0.6s;
  --anim-easing: cubic-bezier(0.22, 1, 0.36, 1);

  /* ── Canvas ──────────────────────────────────────────────── */
  --canvas-width:  820px;
  --canvas-height: 820px;
  --canvas-border: 1px solid var(--color-border-dim);
  --canvas-bg:     var(--color-bg);

  /* ── Effects ─────────────────────────────────────────────── */
  --glow-color:  rgba(70, 220, 255, 0.55);
  --glow-radius: 18px;
  --glow-strong: 0 0 24px var(--glow-color), 0 0 4px rgba(120,235,255,0.9);
  --glow-soft:   0 0 12px rgba(70,220,255,0.28);
  --glow-accent: 0 0 16px rgba(255,205,90,0.5);

  /* ── The nine gem cores — hyper-saturated, segfault DNA ───── */
  --core-1: #ff2d55;   /* ruby     */
  --core-2: #ff7a18;   /* spinel   */
  --core-3: #ffd400;   /* citrine  */
  --core-4: #00ff9d;   /* emerald  */
  --core-5: #00e0ff;   /* cyan     */
  --core-6: #2f6bff;   /* sapphire */
  --core-7: #9b4dff;   /* amethyst */
  --core-8: #ff20a0;   /* magenta  */
  --core-9: #d8f6ff;   /* diamond  */

  /* solved-unit flood — a standout stabilize tint on completed row/col/sector */
  --color-stabilize: #00ff9d;
  --stabilize-fill: rgba(0, 255, 157, 0.16);
}

/* global keyboard focus ring — visible on every interactive control (a11y: never remove focus indication).
   Mouse users don't see it (:focus-visible only fires for keyboard/AT). */
:focus-visible {
  outline: 2px solid var(--color-primary, #40dcff);
  outline-offset: 2px;
  border-radius: 2px;
}
html, body {
  min-height: 100%;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  letter-spacing: var(--letter-spacing);
  -webkit-font-smoothing: antialiased;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 0;
  overflow: hidden;
}
/* faint drifting star-dust grid under everything */
body {
  background-image: radial-gradient(rgba(80, 200, 255, 0.02) 1px, transparent 1px);
  background-size: 26px 26px;
}
/* global scanline veil */
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, 0.045) 3px, rgba(0, 0, 0, 0.045) 4px);
  mix-blend-mode: multiply;
}

/* ════════════════════════════════════════════════════════════════════════
 * COCKPIT — topbar / [left HUD | chart | right HUD] / bottombar.
 * Top & bottom bars + HUD show only in-game.
 * ════════════════════════════════════════════════════════════════════════ */
.game-wrapper { display: flex; align-items: center; justify-content: center; max-width: 100vw; }
.cockpit { display: flex; flex-direction: column; align-items: stretch; flex-shrink: 0; max-width: 100vw; }
.game-container {
  display: flex; flex-direction: row; align-items: stretch; justify-content: center; flex-shrink: 0;
  position: relative; max-width: 100vw;
}

/* ── cockpit bars: hidden until in-game (title/over are full-bleed) ── */
.topbar, .bottombar, .tray-dock-mobile { display: none; }
.cockpit.in-game .topbar,
.cockpit.in-game .bottombar { display: flex; }

/* ── TOP BAR ── */
.topbar {
  height: 46px; align-items: center; justify-content: space-between;
  padding: 0 16px; gap: 16px;
  background: linear-gradient(180deg, var(--color-panel), var(--color-panel-deep));
  border: 1px solid var(--color-border-dim); border-bottom: none;
  font-family: var(--font-primary); font-size: 10px; letter-spacing: 0.2em;
  color: var(--color-text-dim); overflow: hidden;
}
.tb-seg { display: flex; align-items: center; gap: 12px; }
.tb-bracket { color: var(--color-primary-mid); font-size: 14px; }
.tb-mark { font-family: var(--font-display); font-weight: 900; font-size: 15px;
  letter-spacing: 0.24em; color: var(--color-bright); text-shadow: var(--glow-soft); }
.tb-sub { color: var(--color-text-dark); letter-spacing: 0.26em; }
.tb-center { flex: 1; justify-content: center; overflow: hidden; }
.tb-dot { width: 6px; height: 6px; background: var(--color-success);
  box-shadow: 0 0 8px var(--color-success); animation: pulse 2.4s ease-in-out infinite; flex: 0 0 auto; }
.tb-status { color: var(--color-primary); letter-spacing: 0.3em; white-space: nowrap; }
.tb-ticker { color: var(--color-text-dark); letter-spacing: 0.22em; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 340px; }
.tb-readout { display: flex; align-items: baseline; gap: 6px; }
.tb-k { color: var(--color-text-dark); font-size: 9px; }
.tb-v { color: var(--color-primary); font-variant-numeric: tabular-nums; }

/* ── BOTTOM BAR ── */
.bottombar {
  height: 42px; align-items: center; justify-content: space-between;
  padding: 0 16px; gap: 16px;
  background: linear-gradient(0deg, var(--color-panel), var(--color-panel-deep));
  border: 1px solid var(--color-border-dim); border-top: none;
  font-family: var(--font-primary); font-size: 10px; letter-spacing: 0.2em;
  color: var(--color-text-dim);
}
.bb-seg { display: flex; align-items: center; gap: 10px; }
.bb-bracket { color: var(--color-primary-mid); font-size: 13px; }
.bb-k { color: var(--color-text-dark); font-size: 9px; letter-spacing: 0.24em; }
.bb-v { color: var(--color-text); font-variant-numeric: tabular-nums; }
.bb-div { width: 1px; height: 14px; background: var(--color-border-dim); }
.bb-center { flex: 1; justify-content: center; }
.bb-chip { display: flex; align-items: center; gap: 8px; color: var(--color-success);
  font-size: 9px; letter-spacing: 0.24em; }
.bb-chip-dot { width: 5px; height: 5px; background: var(--color-success); box-shadow: 0 0 6px var(--color-success); }
.bb-meter { display: flex; gap: 3px; }
.bb-meter > i { width: 5px; height: 12px; background: var(--color-border-dim); }
.bb-meter > i.lit { background: var(--color-primary); box-shadow: 0 0 5px var(--glow-color); }

/* the frame loses its double top/bottom border when framed by bars in-game */
.cockpit.in-game .frame { border-top-color: var(--color-border-dim); }
.hud { display: none; }
.cockpit.in-game .hud { display: flex; }

/* ── The chart frame (canvas stack) ─────────────────────────── */
.frame {
  position: relative; flex-shrink: 0;
  width: var(--canvas-width); height: var(--canvas-height);
  border: var(--canvas-border);
  background: var(--canvas-bg);
  overflow: hidden;
  box-shadow: 0 0 60px rgba(0,0,0,0.8), inset 0 0 120px rgba(0,0,0,0.6);
}
/* stacked canvases: starfield (drifting) behind, chart (interactive) in front */
.frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#stars { z-index: 1; }
#chart { z-index: 2; }
.scanlines {
  position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px,
              rgba(0, 0, 0, 0.06) 2px, rgba(0, 0, 0, 0.06) 4px);
}
/* vignette to seat the chart in deep space */
.frame::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: radial-gradient(120% 120% at 50% 44%, transparent 52%, rgba(2,4,10,0.72) 100%);
}

/* ════════════════════════════════════════════════════════════════════════
 * SCREEN OVERLAYS — title / game-over, full-bleed over the chart frame.
 * ════════════════════════════════════════════════════════════════════════ */
.overlay {
  position: absolute; inset: 0; z-index: 20; font-family: var(--font-primary);
  animation: overlayIn var(--anim-slow) var(--anim-easing);
}
.overlay.hidden { display: none; }
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }

.keycap {
  border: 1px solid currentColor; padding: 3px 9px;
  font-family: var(--font-primary); font-size: 11px; letter-spacing: 0.12em;
  box-shadow: inset 0 0 8px rgba(70, 220, 255, 0.14);
}
.tabular { font-variant-numeric: tabular-nums; }

/* ── TITLE — LEFT-ALIGNED story beat (reads like the intro card, not a splash) ──
   Nothing is centered. A single flush-left column, vertically centered in the frame,
   that scrolls if a short viewport can't hold it. Staggered load-in. */
.overlay-title {
  background:
    radial-gradient(120% 90% at 12% 30%, rgba(0,224,255,0.06), transparent 60%),
    radial-gradient(130% 120% at 100% 100%, rgba(255,150,40,0.05), transparent 55%),
    linear-gradient(180deg, rgba(4,8,18,0.92), rgba(2,4,10,0.985));
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  padding: clamp(28px, 6vh, 72px) clamp(28px, 7vw, 96px);
  overflow: hidden;                                   /* content is sized to fit the frame → no phantom scrollbar */
}
.title-inner {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: clamp(14px, 2.4vh, 26px); width: 100%; max-width: 680px;
  /* centering is handled by the parent's justify-content:center — no redundant auto-margins (they caused sub-pixel overflow → scrollbar) */
}
.title-inner > * { animation: titleRise var(--anim-slow, .5s) var(--anim-easing, cubic-bezier(.2,.7,.2,1)) both; }
.title-inner > *:nth-child(1){ animation-delay:.02s } .title-inner > *:nth-child(2){ animation-delay:.08s }
.title-inner > *:nth-child(3){ animation-delay:.14s } .title-inner > *:nth-child(4){ animation-delay:.20s }
.title-inner > *:nth-child(5){ animation-delay:.26s } .title-inner > *:nth-child(6){ animation-delay:.34s }
.title-inner > *:nth-child(7){ animation-delay:.42s }
@keyframes titleRise { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform:none; } }

/* eyebrow — studio · act, small caps, like the intro-card eyebrow */
.title-eyebrow { display: flex; align-items: center; gap: 12px;
  font-size: 10px; letter-spacing: 0.36em; }
.te-studio { color: var(--color-text-dark); }
.te-dot { width: 4px; height: 4px; background: var(--color-primary-mid); box-shadow: 0 0 6px var(--glow-color); }
.te-act { color: var(--color-primary-mid); }

/* wordmark — sized to FIT (clamped so it never clips desktop), left-flush */
.overlay-title .overlay-title-word,
.title-word {
  margin: 0; font-family: var(--font-display); font-weight: 900;
  font-size: clamp(52px, 8.5vw, 104px); line-height: 0.86; letter-spacing: 0.005em; color: #eef6fb;
  text-shadow: 0 0 34px rgba(70,220,255,0.4), 0 0 6px rgba(140,240,255,0.7);
}
.title-tag { display: flex; align-items: center; gap: 14px; margin-top: -2px; }
.tag-rule  { width: 46px; height: 1px; background: var(--color-primary-mid); }
.tag-text  { font-family: var(--font-display); font-weight: 300; font-size: 15px;
             letter-spacing: 0.42em; color: var(--color-primary); white-space: nowrap; }

/* nine-key core ribbon — left-flush */
.title-cores { display: flex; justify-content: flex-start; gap: 10px; flex-wrap: wrap; }
.title-core { width: 24px; height: 24px; border-radius: 3px; position: relative;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, rgba(0,224,255,0.22), rgba(0,224,255,0.06));
  border: 1px solid rgba(0,224,255,0.4);
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  color: var(--color-primary); text-shadow: 0 0 8px var(--glow-color);
  box-shadow: 0 0 10px rgba(0,224,255,0.3);
  animation: coreBreathe 3.2s ease-in-out infinite; }
@keyframes coreBreathe { 0%,100% { opacity: 0.62; transform: translateY(0); }
                         50% { opacity: 1; transform: translateY(-3px); } }

/* setup copy (GDD §1) — the premise, LEFT-aligned like a nav log */
.title-setup {
  display: flex; flex-direction: column; align-items: flex-start; gap: 11px;
  width: 100%; text-align: left;
  border-left: 1px solid var(--color-border-dim); padding-left: 18px;   /* log-entry rule */
}
.title-setup p {
  margin: 0; font-family: var(--font-primary); font-size: 13px; line-height: 1.72;
  letter-spacing: 0.015em; color: var(--color-text-dim); max-width: 60ch;
}
.title-setup .ship {
  font-family: var(--font-display); font-weight: 700; letter-spacing: 0.05em;
  font-style: italic; color: var(--color-bright); text-shadow: var(--glow-soft);
}
.title-setup .setup-turn {
  margin-top: 2px; font-family: var(--font-display); font-weight: 700; font-size: 15px;
  letter-spacing: 0.14em; color: var(--color-accent); text-shadow: var(--glow-accent);
}

/* actions — a ROW of pill CTAs (reuses .overlay-cta from the level-end overlay) */
.title-menu {
  display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: center;
  gap: 12px; width: 100%; margin-top: 4px;
}
.title-menu .menu-item { font-size: 11px; }          /* inherit .overlay-cta look; keep label scale in system */
.menu-item[aria-disabled="true"] { opacity: 0.36; cursor: not-allowed; }
.menu-item.is-active {                                /* keyboard cursor — glows like a primary CTA */
  border-color: var(--color-primary); color: var(--color-bright);
  box-shadow: var(--glow-soft); transform: translateY(-2px);
}

/* stamp — left-flush footer line: status · rule · keyboard prompt */
.title-stamp {
  display: flex; align-items: center; gap: 16px; width: 100%; margin-top: 6px;
  font-size: 10px; letter-spacing: 0.2em; color: var(--color-text-dark);
}
.stamp-rule { flex: 1; height: 1px; background: var(--color-border-dim); }
.stamp-status { display: flex; align-items: center; gap: 8px; color: var(--color-success); }
.stamp-dot { width: 6px; height: 6px; background: var(--color-success);
             box-shadow: 0 0 6px var(--color-success); animation: pulse 2.4s ease-in-out infinite; }
.title-prompt { display: flex; align-items: center; gap: 8px; color: var(--color-primary-mid); white-space: nowrap; }
.title-prompt .keycap { color: var(--color-bright); border-color: var(--color-primary-mid); }
@keyframes pulse { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }

/* ── GAME OVER / CHART COMPLETE ─────────────────────────────── */
.overlay-gameover {
  background: radial-gradient(130% 100% at 50% 36%, rgba(3,9,8,0.965), rgba(0,1,4,0.998));
}
.go-head { position: absolute; top: 96px; left: 0; right: 0; text-align: center; }
.go-eyebrow { font-size: 10px; letter-spacing: 0.42em; color: var(--color-success-dim); }
.overlay-gameover .overlay-title,
.go-title {
  margin: 18px 0 0; font-family: var(--font-display); font-weight: 900;
  font-size: 90px; line-height: 0.86; letter-spacing: 0.02em; color: #dff5ea;
  text-shadow: 0 0 30px rgba(80,235,170,0.4);
}
.go-sub { margin-top: 16px; font-family: var(--font-display); font-weight: 300;
          font-size: 19px; letter-spacing: 0.34em; color: var(--color-success); }

/* stat readout grid */
.go-panel {
  position: absolute; top: 312px; left: 60px; right: 60px;   /* score box up 30px */
  border: 1px solid var(--color-border-dim);
  background: rgba(8,20,16,0.5); padding: 4px;
}
.go-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.go-cell { padding: 20px 22px; border-right: 1px solid var(--color-border-dim); }
.go-cell:last-child { border-right: 0; }
.go-cell-lbl { font-size: 9px; letter-spacing: 0.32em; color: var(--color-text-dim); }
.go-cell-val { margin-top: 12px; font-family: var(--font-display); font-weight: 700;
               font-size: 46px; line-height: 0.9; color: var(--color-bright); }
.go-bonus { text-align: center; padding: 12px 0 4px; font-size: 12px; letter-spacing: 0.26em;
  color: var(--color-accent); text-shadow: var(--glow-accent); min-height: 14px; }
/* Act I ending copy (GDD §7) — shown only on level-9 close, below the stat panel */
.go-ending { display: none; position: absolute; left: 60px; right: 60px; top: 470px; text-align: center; }
.go-ending p { margin: 8px 0; font-family: var(--font-display); font-weight: 300;
  font-size: 22px; letter-spacing: 0.16em; color: var(--color-primary);
  text-shadow: 0 0 18px rgba(70,220,255,0.3); }

.go-actions {
  position: absolute; bottom: 40px; left: 0; right: 0;
  display: flex; justify-content: center; align-items: center; gap: 16px;
}
.overlay-cta, .go-action {
  display: flex; align-items: center; gap: 12px; padding: 14px 26px;
  border: 1px solid var(--color-border);
  background: var(--color-ui-bg); color: var(--color-text-dim);
  font-family: var(--font-primary); font-size: 11px; letter-spacing: 0.24em;
  cursor: pointer;
  transition: transform var(--anim-fast), border-color var(--anim-fast), box-shadow var(--anim-fast), color var(--anim-fast);
}
.overlay-cta:hover, .go-action:hover {
  transform: translateY(-2px); color: var(--color-bright);
  border-color: var(--color-primary-mid); box-shadow: var(--glow-soft);
}
.overlay-cta.primary, .go-action.primary {
  border-color: var(--color-primary); color: var(--color-bright);
  box-shadow: var(--glow-soft);
}
.overlay-cta .keycap, .go-action .keycap {
  font-size: 11px; padding: 2px 8px; color: var(--color-bright);
  border-color: var(--color-primary-mid); box-shadow: none;
}

/* ── INTRO CARD (GDD §8) — level name · story beat · objective ──
   Copy reads as a left-aligned BLOCK (not centered). Near-opaque backdrop. */
.overlay-intro {
  background: radial-gradient(130% 100% at 50% 42%, rgba(3,7,15,0.96), rgba(1,2,6,0.995));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(18px, 3vh, 34px); padding: 48px; cursor: pointer;
  animation: overlayIn var(--anim-slow) var(--anim-easing);
}
.intro-head { display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  width: min(600px, 82%); margin-left: 30px; }   /* copy block shifted 30px right */
.intro-eyebrow { font-size: 10px; letter-spacing: 0.42em; color: var(--color-primary-mid); }
.intro-level { font-family: var(--font-display); font-weight: 900; font-size: 22px;
  letter-spacing: 0.26em; color: var(--color-primary); text-shadow: var(--glow-soft); }
.intro-body { display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  width: min(600px, 82%); text-align: left; margin-left: 30px; }   /* copy block shifted 30px right */
.intro-name { margin: 0; font-family: var(--font-display); font-weight: 900;
  font-size: clamp(40px, 7vw, 66px); line-height: 0.92; letter-spacing: 0.01em;
  color: var(--color-bright); text-shadow: 0 0 28px rgba(70,220,255,0.4); }
.intro-beat { margin: 0; font-family: var(--font-primary); font-size: 14px; line-height: 1.75;
  letter-spacing: 0.03em; color: var(--color-text-dim); max-width: 52ch; }
.intro-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 8px;
  padding-top: 16px; border-top: 1px solid var(--color-border-dim);
  width: fit-content; max-width: 100%; }   /* rule spans only as wide as its text — no dead-space overhang */
.intro-obj { font-size: 11px; letter-spacing: 0.06em; color: var(--color-text); }
.intro-stats { font-size: 11px; letter-spacing: 0.14em; color: var(--color-primary);
  font-variant-numeric: tabular-nums; }
.intro-k { color: var(--color-text-dark); }
.intro-cta { display: flex; align-items: center; gap: 16px; margin-top: 14px;
  width: min(600px, 82%); margin-left: 30px; }   /* copy block shifted 30px right */
/* BEGIN button — the primary launch affordance. Whole card stays clickable;
   this is the visible "next action" cue. Amber/action accent, breathing glow. */
.intro-begin {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 13px 26px 13px 20px;
  font-family: var(--font-primary); font-size: 12px; letter-spacing: 0.26em;
  color: var(--color-bright); cursor: pointer;
  background: linear-gradient(180deg, rgba(255,150,40,0.10), rgba(255,150,40,0.03));
  border: 1px solid rgba(255,150,40,0.55);
  box-shadow: 0 0 0 rgba(255,150,40,0);
  transition: transform var(--anim-fast), border-color var(--anim-fast), box-shadow var(--anim-fast), background var(--anim-fast);
  animation: introBeginPulse 2.4s ease-in-out infinite; }
.intro-begin .keycap { color: var(--color-accent); border-color: rgba(255,150,40,0.5);
  box-shadow: none; animation: none; }
.intro-begin-label { position: relative; top: 0.5px; }
.intro-begin:hover {
  transform: translateY(-2px);
  border-color: var(--color-accent);
  background: linear-gradient(180deg, rgba(255,150,40,0.18), rgba(255,150,40,0.06));
  box-shadow: 0 0 22px rgba(255,150,40,0.32), inset 0 0 14px rgba(255,150,40,0.06);
  animation: none; }
.intro-begin:active { transform: translateY(0) scale(0.98); }
.intro-tap-hint { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--color-text-dark); }
@keyframes introBeginPulse {
  0%,100% { box-shadow: 0 0 0 rgba(255,150,40,0); border-color: rgba(255,150,40,0.45); }
  50%     { box-shadow: 0 0 18px rgba(255,150,40,0.22); border-color: rgba(255,150,40,0.7); } }
@media (prefers-reduced-motion: reduce) { .intro-begin { animation: none; } }

/* ── PAUSE overlay — stop-the-world; as dark as game-complete ── */
.overlay-pause {
  background: radial-gradient(130% 100% at 50% 42%, rgba(3,7,15,0.965), rgba(0,1,4,0.998));
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.pause-box { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.pause-word { font-family: var(--font-display); font-weight: 900; font-size: 76px;
  letter-spacing: 0.2em; color: var(--color-primary); text-shadow: 0 0 30px var(--glow-color); }
.pause-hint { font-size: 11px; letter-spacing: 0.28em; color: var(--color-text-dim); }
.pause-cta { display: flex; align-items: center; gap: 10px; margin-top: 6px;
  font-size: 11px; letter-spacing: 0.26em; color: var(--color-primary); }
.pause-cta .keycap { color: var(--color-bright); border-color: var(--color-primary-mid); }

/* ── CLEAR SAVES confirm modal — destructive purge warning, cockpit-themed ── */
.overlay-confirm {
  z-index: 60;                                     /* above title menu + HUD */
  background: radial-gradient(120% 100% at 50% 45%, rgba(20,4,6,0.82), rgba(2,3,8,0.95));
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  animation: overlayIn var(--anim-normal) var(--anim-easing);
}
.confirm-box {
  position: relative; overflow: hidden;
  width: min(460px, 88vw); padding: 34px 34px 28px;
  background: linear-gradient(180deg, rgba(16,10,14,0.98), rgba(8,6,12,0.99));
  border: 1px solid var(--color-danger);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.6), 0 24px 60px rgba(0,0,0,0.6),
              0 0 40px rgba(220,70,70,0.18), inset 0 0 30px rgba(220,70,70,0.05);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  animation: confirmRise var(--anim-normal) var(--anim-easing);
}
/* thin scan sweep across the top edge */
.confirm-scan { position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,90,90,0.9), transparent);
  animation: confirmScan 2.6s linear infinite; }
.confirm-eyebrow { display: inline-flex; align-items: center; gap: 8px;
  font-size: 10px; letter-spacing: 0.32em; color: #ff8a8a; text-transform: uppercase; }
.confirm-dot { width: 7px; height: 7px; background: var(--color-danger);
  box-shadow: 0 0 10px rgba(255,80,80,0.9); animation: confirmPulse 1.4s ease-in-out infinite; }
.confirm-title { margin: 14px 0 0; font-family: var(--font-display); font-weight: 900;
  font-size: 40px; letter-spacing: 0.01em; color: var(--color-bright);
  text-shadow: 0 0 24px rgba(255,90,90,0.28); }
.confirm-body { margin: 12px 0 26px; font-size: 12px; line-height: 1.65;
  color: var(--color-text-dim); text-wrap: pretty; max-width: 40ch; }
.confirm-actions { display: flex; gap: 12px; }
.confirm-btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px;
  font-family: var(--font-primary); font-size: 11px; letter-spacing: 0.2em; cursor: pointer;
  border: 1px solid var(--color-border); background: var(--color-ui-bg); color: var(--color-text-dim);
  transition: transform var(--anim-fast), border-color var(--anim-fast), box-shadow var(--anim-fast), color var(--anim-fast), background var(--anim-fast); }
.confirm-btn .keycap { font-size: 10px; padding: 2px 7px; }
/* KEEP LOG — the safe default, cyan */
.confirm-btn.cancel { flex: 1; justify-content: center; }
.confirm-btn.cancel:hover, .confirm-btn.cancel:focus-visible {
  transform: translateY(-2px); color: var(--color-bright);
  border-color: var(--color-primary-mid); box-shadow: var(--glow-soft); }
/* WIPE EVERYTHING — destructive, red */
.confirm-btn.danger { color: #ff9a9a; border-color: rgba(255,80,80,0.5);
  background: linear-gradient(180deg, rgba(255,70,70,0.10), rgba(255,70,70,0.03)); }
.confirm-btn.danger:hover, .confirm-btn.danger:focus-visible {
  transform: translateY(-2px); color: #fff;
  border-color: var(--color-danger);
  background: linear-gradient(180deg, rgba(255,70,70,0.22), rgba(255,70,70,0.08));
  box-shadow: 0 0 22px rgba(255,70,70,0.36), inset 0 0 14px rgba(255,70,70,0.08); }
.confirm-btn:active { transform: translateY(0) scale(0.98); }
@keyframes confirmRise { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes confirmScan { 0% { transform: translateX(-40%); opacity: 0; } 20%,80% { opacity: 1; } 100% { transform: translateX(40%); opacity: 0; } }
@keyframes confirmPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .confirm-scan, .confirm-dot, .confirm-box { animation: none; } }
@media (max-width: 640px) {
  .confirm-title { font-size: 32px; }
  .confirm-actions { flex-direction: column-reverse; }
  .confirm-btn { justify-content: center; }
}

/* ── SHARED CARD-PICKER overlay (shop · Recur · Foresight) ── */
.overlay-cardpick { z-index: 55; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 100% at 50% 40%, rgba(6,14,22,0.9), rgba(2,4,10,0.97));
  backdrop-filter: blur(3px); animation: overlayIn var(--anim-normal) var(--anim-easing); }
.cardpick-box { position: relative; overflow: hidden; width: min(760px, 92vw); padding: 30px 30px 24px;
  background: linear-gradient(180deg, rgba(10,20,30,0.98), rgba(6,10,18,0.99));
  border: 1px solid var(--color-primary-mid);
  box-shadow: 0 24px 60px rgba(0,0,0,0.6), 0 0 40px rgba(0,224,255,0.12), inset 0 0 30px rgba(0,224,255,0.04);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  animation: confirmRise var(--anim-normal) var(--anim-easing); }
.cardpick-eyebrow { display: inline-block; font-size: 10px; letter-spacing: 0.32em; color: var(--color-accent); text-transform: uppercase; }
.cardpick-title { margin: 10px 0 0; font-family: var(--font-display); font-weight: 900; font-size: 34px;
  letter-spacing: 0.01em; color: var(--color-bright); text-shadow: 0 0 22px rgba(0,224,255,0.2); }
.cardpick-sub { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--color-text-dim); }
.cardpick-fuel { margin: 12px 0 4px; font-size: 11px; letter-spacing: 0.2em; color: var(--color-accent); }
.cardpick-fuel b { font-family: var(--font-display); font-size: 16px; text-shadow: var(--glow-accent); }
.cardpick-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 14px 0 22px; }
.pick-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 8px;
  min-height: 120px; padding: 14px 14px 14px 18px; text-align: left; cursor: pointer;
  border: 1px solid var(--color-border); background: linear-gradient(180deg, rgba(14,26,40,0.9), rgba(8,14,24,0.95));
  transition: transform var(--anim-fast), border-color var(--anim-fast), box-shadow var(--anim-fast); }
.pick-card .card-spine { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--color-primary); box-shadow: 0 0 10px var(--glow-color); }
.pick-card .card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.pick-card .card-name { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: 0.04em; color: var(--color-bright); }
.pick-card .card-cost { flex-shrink: 0; padding: 3px 6px; font-size: 8px; letter-spacing: 0.12em; color: var(--color-accent);
  border: 1px solid rgba(255,150,40,0.4); background: rgba(255,150,40,0.08); }
.pick-card .card-cost b { font-family: var(--font-display); font-size: 14px; }
.pick-card .card-cost.free { color: var(--color-primary); border-color: rgba(0,224,255,0.4); background: rgba(0,224,255,0.08); }
.pick-card .card-blurb { font-size: 11px; line-height: 1.5; color: var(--color-text-dim); text-wrap: pretty; }
.pick-card:hover:not(.locked) { transform: translateY(-3px); border-color: var(--color-primary); box-shadow: var(--glow-soft); }
.pick-card.locked { opacity: 0.4; cursor: not-allowed; }
.pick-card.ordered { border-color: var(--color-accent); box-shadow: 0 0 14px rgba(255,205,90,0.3); }
.pick-order { position: absolute; right: 8px; bottom: 6px; font-family: var(--font-display); font-weight: 900;
  font-size: 22px; color: var(--color-accent); text-shadow: var(--glow-accent); }
/* rarity — pip dots + a label row on shop cards. Colors avoid cyan(=playable)/red(=broke)/amber(=cost). */
.pick-rarity { display: flex; align-items: center; gap: 6px; margin-top: 2px;
  font-size: 8px; letter-spacing: 0.24em; color: var(--color-text-dark); }
.card-rarity { letter-spacing: 2px; font-size: 8px; }
.card-rarity.r1 { color: #8a9bb0; }                    /* common — slate */
.card-rarity.r2 { color: #59d6a8; }                    /* uncommon — teal-green */
.card-rarity.r3 { color: #b98cff; text-shadow: 0 0 8px rgba(150,110,255,0.6); }  /* rare — nebula violet */
.pick-rarity.r1 { color: #8a9bb0; } .pick-rarity.r2 { color: #59d6a8; } .pick-rarity.r3 { color: #b98cff; }
.pick-card.r3 { border-color: rgba(150,110,255,0.5); box-shadow: 0 0 16px rgba(150,110,255,0.14); }
.pick-card.r3 .card-spine { background: #b98cff; box-shadow: 0 0 10px rgba(150,110,255,0.7); }
.pick-card.r2 .card-spine { background: #59d6a8; box-shadow: 0 0 10px rgba(89,214,168,0.6); }
.pick-card.r3:hover:not(.locked) { border-color: #b98cff; box-shadow: 0 0 20px rgba(150,110,255,0.35); }
/* hand card: rarity pips inline, right after the card title (before the cost chip) */
.card .card-head { align-items: center; }
.card .card-name { margin-right: 6px; }
.card .card-rarity { margin-right: auto; position: static; align-self: center; }  /* pushes cost chip to the right */
/* card SPENT — blur + fade the played card in place (easeOutQuad .5s), then the hand redraws */
.card.card-spent { animation: cardSpent 0.5s cubic-bezier(0.25,0.46,0.45,0.94) forwards; pointer-events: none; }
@keyframes cardSpent {
  0% { opacity: 1; filter: blur(0); transform: none; }
  100% { opacity: 0; filter: blur(6px); transform: scale(0.97); }
}
@media (prefers-reduced-motion: reduce) { .card.card-spent { animation: none; opacity: 0; } }
.cardpick-actions { display: flex; justify-content: center; gap: 14px; }
/* burn-to-ash — a consumed card chars + dissolves */
.card.burning, .pick-card.burning { animation: burnToAsh 380ms ease-in forwards; pointer-events: none; }
@keyframes burnToAsh {
  0% { opacity: 1; filter: none; transform: none; }
  40% { filter: brightness(1.6) sepia(0.6) hue-rotate(-20deg); box-shadow: 0 0 24px rgba(255,140,40,0.7); }
  100% { opacity: 0; filter: brightness(0.4) sepia(1); transform: translateY(-8px) scale(0.94); }
}
@media (prefers-reduced-motion: reduce) { .overlay-cardpick, .cardpick-box, .card.burning, .pick-card.burning { animation: none; } }
@media (max-width: 720px) { .cardpick-cards { grid-template-columns: 1fr; } }

/* ── CONTROLS widget (right HUD) — segfault pattern, Lodestar tokens ── */
.ctrl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.ctrl-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.ctrl-btn.disabled { opacity: 0.35; pointer-events: none; }
.ctrl-btn { display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer;
  border: 1px solid var(--color-border); background: var(--color-ui-bg);
  font-family: var(--font-primary); font-size: 10px; letter-spacing: 0.18em; color: var(--color-text-dim);
  transition: border-color var(--anim-fast), color var(--anim-fast), box-shadow var(--anim-fast); }
.ctrl-btn:hover { border-color: var(--color-primary); color: var(--color-bright); box-shadow: var(--glow-soft); }
.ctrl-btn.active { border-color: var(--color-primary); color: var(--color-primary); box-shadow: var(--glow-soft); }
.ctrl-btn .kc { border: 1px solid var(--color-primary-mid); padding: 1px 6px; color: var(--color-bright);
  font-size: 10px; letter-spacing: 0.1em; }

/* ════════════════════════════════════════════════════════════════════════
 * IN-GAME HUD — left (nav diag + cores placed) | right (level + score)
 * ════════════════════════════════════════════════════════════════════════ */
.hud {
  width: 250px; flex: 0 0 250px; height: var(--canvas-height);
  padding: var(--hud-padding); box-sizing: border-box;
  background: linear-gradient(180deg, var(--color-panel), var(--color-panel-deep));
  flex-direction: column; gap: 18px;
  font-family: var(--font-primary); color: var(--color-text); font-size: var(--hud-font-size);
  overflow-y: auto; overflow-x: hidden;              /* Act III: card shelf + tray can exceed the square HUD height → scroll internally instead of clipping past the frame */
  scrollbar-width: thin; scrollbar-color: var(--color-border-dim) transparent;
}
.hud::-webkit-scrollbar { width: 6px; }
.hud::-webkit-scrollbar-thumb { background: var(--color-border-dim); border-radius: 3px; }
.hud::-webkit-scrollbar-track { background: transparent; }
.hud-left  { border: 1px solid var(--color-border-dim); border-right: none; }
.hud-right { border: 1px solid var(--color-border-dim); border-left: none; }

.hud-block { display: flex; flex-direction: column; }
.hud-spacer { flex: 1; }
.hud-divider { height: 1px; background: var(--color-border-dim); }
.hud-row { display: flex; justify-content: space-between; align-items: baseline; }
.hud-eyebrow { font-size: 9px; letter-spacing: 0.24em; color: var(--color-text-dark); }
.hud-field { display: flex; flex-direction: column; gap: 6px; }
.hud-label { font-size: 9px; letter-spacing: 0.32em; color: var(--color-text-dim); }
.hud-value { font-family: var(--font-display); font-weight: 700; color: var(--color-bright);
             font-variant-numeric: tabular-nums; }

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

/* nav-readout flavor panel (cosmetic per GDD §3) */
.nav-readout { font-size: 10px; line-height: 1.7; color: var(--color-text-dim); }
.nav-readout .k { color: var(--color-text-dark); letter-spacing: 0.14em; }
.nav-readout .v { color: var(--color-primary); float: right; font-variant-numeric: tabular-nums; }

/* SECTOR / LEVEL */
.sector-row { display: flex; align-items: baseline; gap: 12px; margin-top: 6px; }
.sector-num { font-family: var(--font-display); font-weight: 900; font-size: 42px; line-height: 0.85;
              color: var(--color-primary); text-shadow: 0 0 14px var(--glow-color); }
.sector-name { font-family: var(--font-display); font-weight: 500; font-size: 17px;
               letter-spacing: 0.12em; color: var(--color-text); }
.beat-name { margin-top: 10px; font-family: var(--font-display); font-weight: 500;
             font-size: 16px; letter-spacing: 0.06em; color: var(--color-bright); }
.beat-line { margin-top: 8px; font-size: 10px; line-height: 1.7; color: var(--color-text-dim);
             letter-spacing: 0.03em; }

/* level tick-bar (9 levels in the act) */
.tick-bar { display: flex; gap: 3px; margin-top: 10px; }
.tick-bar > i { flex: 1; height: 5px; display: block; background: var(--color-border-dim); }
.tick-bar > i.lit { background: var(--color-primary); box-shadow: 0 0 6px var(--glow-color); }

/* SCORE / TIMER */
.score-val { font-family: var(--font-display); font-weight: 700; font-size: 40px; line-height: 0.9;
             color: var(--color-bright); font-variant-numeric: tabular-nums; margin-top: 6px; }
.timer-val { font-family: var(--font-display); font-weight: 500; font-size: 26px;
             color: var(--color-text); font-variant-numeric: tabular-nums; margin-top: 4px; }

/* chart-fill — CIRCULAR ring meter, sized to the widget width, label under (#6) */
.fill-wrap { display: flex; justify-content: center; margin-top: 10px; }
.fill-ring { --fill: 0deg; width: 118px; height: 118px; border-radius: 50%; position: relative;
  background: conic-gradient(var(--color-primary) var(--fill), var(--color-panel-deep) 0);
  box-shadow: 0 0 18px rgba(0,224,255,0.18); transition: background var(--anim-normal) var(--anim-easing); }
.fill-core { position: absolute; inset: 9px; background: var(--color-panel); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; gap: 2px;
  font-family: var(--font-display); font-weight: 700; font-size: 34px; line-height: 1;
  color: var(--color-primary); font-variant-numeric: tabular-nums; }
.fill-core > span:first-child { display: inline-block; }   /* the number */
.fill-pct-sym { font-size: 15px; color: var(--color-primary-mid); }
.fill-hint { font-size: 10px; line-height: 1.6; color: var(--color-text-dim); letter-spacing: 0.04em;
  margin-top: 8px; text-align: center; }
.controls-block { margin-top: 50px; }               /* nudge the 2x3 grid down (#2) */
/* TEST result copy — green good / red conflicts, under the 2x3 grid */
.test-out { margin-top: 10px; font-size: 10px; letter-spacing: 0.16em; min-height: 14px;
  font-variant-numeric: tabular-nums; }
.test-out.good { color: var(--color-success); text-shadow: 0 0 8px rgba(0,255,157,0.4); }
.test-out.bad  { color: var(--color-danger);  text-shadow: 0 0 8px rgba(255,60,90,0.4); }
/* card/status line UNDER the card tray (Act II) — CASCADE +N fuel, MOMENTUM, SIPHON, etc. */
.card-status { margin-top: 10px; padding: 8px 10px; font-size: 10px; letter-spacing: 0.14em; line-height: 1.5;
  min-height: 14px; border-left: 2px solid var(--color-border); color: var(--color-text-dim);
  background: linear-gradient(90deg, rgba(0,224,255,0.05), transparent 70%); }
.card-status.ok  { border-left-color: var(--color-accent); color: var(--color-accent); }
.card-status.bad { border-left-color: var(--color-danger); color: #ff8a8a; }
.card-status.dim { border-left-color: var(--color-border); color: var(--color-text-dark); }

/* ════════════════════════════════════════════════════════════════════════
 * CORE TRAY — nine gems to arm & place. Lives in the RIGHT HUD as a 3x3 widget
 * on desktop; relocates to a dock UNDER the field on the mobile breakpoint.
 * ════════════════════════════════════════════════════════════════════════ */
.tray-widget { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; }
.tray-core {
  position: relative; aspect-ratio: 1; cursor: pointer;
  border: 1px solid var(--color-border-dim);
  background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01) 40%, transparent);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--anim-fast) var(--anim-easing), border-color var(--anim-fast), box-shadow var(--anim-fast);
}
.key-num { font-family: var(--font-display); font-weight: 700; font-size: 26px;
  color: var(--color-primary); text-shadow: 0 0 10px var(--glow-color); line-height: 1;
  font-variant-numeric: tabular-nums; transition: color var(--anim-fast), text-shadow var(--anim-fast); }
.tray-core:hover { transform: translateY(-3px); border-color: var(--color-primary);
  box-shadow: 0 0 16px var(--glow-color); }
.tray-core:hover .key-num { color: var(--color-bright); }
.tray-core.armed {
  transform: translateY(-3px); border-color: var(--color-primary);
  box-shadow: 0 0 24px var(--glow-color), inset 0 0 18px rgba(0,224,255,0.12);
}
.tray-core.armed .key-num { color: var(--color-bright); text-shadow: 0 0 14px var(--glow-color); }
.tray-core.armed::after {
  content: ''; position: absolute; inset: -1px; border: 1px solid var(--color-primary);
  animation: armPulse 1.2s ease-in-out infinite;
}
@keyframes armPulse { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }
/* remaining-count pip — +50% larger (#11) */
.tray-count { position: absolute; bottom: -1px; right: -1px;
  font-family: var(--font-primary); font-size: 13.5px; line-height: 1.25; padding: 0 6px;
  background: var(--color-panel-deep); color: var(--color-text-dim);
  border-top: 1px solid var(--color-border-dim); border-left: 1px solid var(--color-border-dim);
  font-variant-numeric: tabular-nums; }
.tray-core.exhausted { opacity: 0.3; pointer-events: none; }
.tray-core.exhausted .tray-count { color: var(--color-success); }
/* TRAY LOCK-OUT — while a targeting card is pending, placement is suspended: the whole tray
   greys/desaturates and stops responding until the card resolves or is cancelled. */
.tray.tray-locked { opacity: 0.4; filter: grayscale(0.8); pointer-events: none;
  position: relative; transition: opacity var(--anim-fast), filter var(--anim-fast); }
.tray.tray-locked::after { content: '⊘ LOCKED'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-primary); font-size: 11px; letter-spacing: 0.24em; color: #ff8a8a;
  text-shadow: 0 0 10px rgba(255,80,80,0.5); background: rgba(20,4,6,0.35); }

/* ── DRAFT (Act II / P2, §5a) — its own band BELOW the score panel, with reading room ── */
.go-draft { position: absolute; left: 60px; right: 60px; top: 500px; display: flex; flex-direction: column; gap: 16px; }
.go-draft-head { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.go-draft-head .draft-title { font-family: var(--font-display); font-weight: 700; font-size: 18px;
  letter-spacing: 0.28em; color: var(--color-accent); text-shadow: var(--glow-accent); }
.go-draft-head .draft-sub { font-size: 11px; letter-spacing: 0.2em; color: var(--color-text-dim); }
.go-draft-cards { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.draft-card { display: flex; flex-direction: column; gap: 8px; width: 200px; min-height: 116px; padding: 16px 16px;
  text-align: left; cursor: pointer; background: linear-gradient(180deg, rgba(10,26,40,0.92), rgba(6,14,24,0.92));
  border: 1px solid var(--color-border-dim); border-top: 2px solid var(--color-accent); color: var(--color-text);
  transition: transform var(--anim-fast, .12s) ease, border-color .12s ease, box-shadow .12s ease, opacity .12s ease; }
.draft-card .card-name { font-size: 17px; }
.draft-card .card-blurb { font-size: 11px; line-height: 1.5; flex: 1; }
.draft-card .card-cost { font-size: 12px; }
.draft-card:hover { transform: translateY(-5px); border-color: var(--color-accent); box-shadow: 0 0 20px var(--glow-accent); }
.draft-card.locked { cursor: not-allowed; pointer-events: none; }
.draft-card.locked:not(.chosen) { animation: draftReject 1s cubic-bezier(.25,.8,.3,1) forwards; }   /* others drop + fade */
.draft-card.chosen { animation: draftChoose 2s cubic-bezier(.25,.8,.3,1) forwards; }                 /* rise · pulse · fade */
@keyframes draftReject { 0%{opacity:1;transform:translateY(0);} 100%{opacity:0;transform:translateY(10px);} }
@keyframes draftChoose { 0%{opacity:1;transform:translateY(0);box-shadow:0 0 18px var(--glow-accent);}
  25%{transform:translateY(-10px);box-shadow:0 0 34px #ffd98a;}
  50%{transform:translateY(-10px);box-shadow:0 0 44px #ffe9b0;border-color:#ffe9b0;}
  100%{opacity:0;transform:translateY(-10px);box-shadow:0 0 10px transparent;} }
@media (max-width: 620px){ .go-draft { position: static; left:auto; right:auto; top:auto; width:100%; } .draft-card { width: 46%; min-height: 100px; } }

/* ── FUEL meter (Act II / P2, §5a) ── */
.fuel-track { height: 8px; margin-top: 8px; background: var(--color-panel-deep);
  border: 1px solid var(--color-border-dim); overflow: hidden; }
.fuel-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--color-accent), #ffcf66);
  box-shadow: 0 0 10px var(--glow-accent); transition: width var(--anim-normal, .25s) ease; }
.fuel-bar.overflow { animation: fuelShimmer 1.6s ease-in-out infinite; }
@keyframes fuelShimmer { 0%,100% { box-shadow: 0 0 10px var(--glow-accent); } 50% { box-shadow: 0 0 20px #ffd98a; } }
.mhud-fuel-track { display: inline-block; width: 42px; height: 6px; margin-left: 6px; vertical-align: middle;
  background: var(--color-panel-deep); border: 1px solid var(--color-border-dim); }
.mhud-fuel-bar { display: block; height: 100%; width: 0; background: var(--color-accent); box-shadow: 0 0 6px var(--glow-accent); }

/* ── CARD HAND (Act II) — lives in the right-HUD tray slot; swaps with the palette ── */
#hand-home, #tray-home { transition: opacity var(--anim-normal, .28s) ease; }
#tray-home { position: relative; }                     /* anchor for the targeting overlay */
.swap-hidden { display: none; }                        /* one of hand/palette shown at a time */
/* targeting prompt — OVERLAYS the locked tray (absolute, so the cards below don't shift) */
.target-prompt { position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 12px; border: 1px dashed var(--color-primary-mid);
  background: linear-gradient(180deg, rgba(4,10,18,0.86), rgba(4,10,18,0.78));
  font-size: 11px; line-height: 1.5; letter-spacing: 0.06em; color: var(--color-primary);
  text-wrap: pretty; animation: targetPromptPulse 1.8s ease-in-out infinite; }
.target-prompt.swap-hidden { display: none; }         /* beat .target-prompt's display:flex when hidden */
@keyframes targetPromptPulse { 0%,100% { border-color: var(--color-primary-dark); opacity: 0.85; }
  50% { border-color: var(--color-primary); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .target-prompt { animation: none; } }
.hand { display: none; }
.hand.active { display: flex; flex-direction: column; gap: 7px; margin-top: 6px; }
/* REROLL button — machined pill under the 3-card shelf, shows its escalating fuel cost */
.reroll-btn { display: none; width: 100%; margin-top: 8px; padding: 9px 12px;
  align-items: center; justify-content: space-between; cursor: pointer;
  border: 1px solid var(--color-border); background: var(--color-ui-bg);
  color: var(--color-text-dim); font-family: var(--font-primary); font-size: 10px; letter-spacing: 0.22em;
  transition: transform var(--anim-fast), border-color var(--anim-fast), box-shadow var(--anim-fast), color var(--anim-fast); }
.hand-block .reroll-btn { display: flex; }
.reroll-btn .rr-cost { color: var(--color-accent); letter-spacing: 0.12em; }
.reroll-btn:hover { transform: translateY(-1px); color: var(--color-bright);
  border-color: var(--color-primary-mid); box-shadow: var(--glow-soft); }
.reroll-btn:active { transform: translateY(0) scale(0.99); }
.reroll-btn.broke { opacity: 0.45; cursor: not-allowed; }
.reroll-btn.broke .rr-cost { color: #ff8a8a; }
/* CARD = full-size (original proportions): vert bar left, header row (name + fuel chip,
   no overlap), blurb underneath full-width. */
.card {
  --spine: var(--color-primary);
  display: flex; flex-direction: column; gap: 5px; position: relative; min-height: 84px;
  padding: 9px 11px 10px 15px; text-align: left; cursor: pointer;
  background:
    linear-gradient(90deg, rgba(0,224,255,0.06), transparent 42%),
    linear-gradient(180deg, rgba(12,28,44,0.95), rgba(6,13,22,0.95));
  border: 1px solid var(--color-border-dim); color: var(--color-text);
  transition: transform var(--anim-fast, .12s) ease, border-color .12s, box-shadow .12s, background .12s;
}
/* empty slot placeholder — holds the exact footprint of a card so top/mid/bottom slots never
   shift when a card is spent. Recessed, inert, no content. */
.card-hole { cursor: default; pointer-events: none; border-style: dashed;
  border-color: rgba(90,130,170,0.14); background: rgba(6,13,22,0.35); box-shadow: none; }
/* only a genuinely-NEW card slides in (the replacement). Existing cards do NOT re-animate,
   so playing one card is a single-slot replace — the tray no longer animates as a whole. */
.card.dealt { animation: cardDeal .34s var(--anim-easing, cubic-bezier(.2,.7,.2,1)) both; }
@keyframes cardDeal { from { opacity:0; transform: translateX(14px); } to { opacity:1; transform:none; } }
.card-spine { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--spine);
  box-shadow: 0 0 8px var(--spine); z-index: 2; }
/* header — name left, fuel chip right; they never overlap */
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.card-name { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.1em;
  color: var(--color-bright); text-shadow: var(--glow-soft); line-height: 1; }
.card-blurb { margin-top: 7px; font-size: 12px; line-height: 1.5; letter-spacing: 0.005em; color: var(--color-text-dim);
  text-wrap: pretty; }   /* pretty = avoids single-word orphan last lines where supported */
/* fuel chip — top-right, compact */
.card-cost { flex-shrink: 0; display: flex; align-items: baseline; gap: 3px; padding: 3px 6px;
  border: 1px solid rgba(255,150,40,0.4); background: rgba(255,150,40,0.08);
  color: var(--color-accent); font-size: 7.5px; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; }
.card-cost b { font-family: var(--font-display); font-weight: 700; font-size: 15px; line-height: 1; text-shadow: var(--glow-accent); }
.card-cost.free { border-color: rgba(0,224,255,0.4); background: rgba(0,224,255,0.08); color: var(--color-primary);
  font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.1em; padding: 4px 7px; }
/* HOVER — slide out + spine ignites */
.card:hover { transform: translateX(4px); border-color: var(--color-primary-mid);
  box-shadow: -6px 0 18px rgba(0,224,255,0.28), inset 0 0 20px rgba(0,224,255,0.06);
  background: linear-gradient(90deg, rgba(0,224,255,0.12), transparent 45%), linear-gradient(180deg, rgba(14,34,52,0.98), rgba(7,15,26,0.98)); }
.card:active { transform: translateX(2px) scale(0.985); }
/* DEAD — powered down; tap discards for a draw */
.card.dead { --spine: var(--color-text-dark); opacity: 0.72; }
.card.dead .card-name { color: var(--color-text-dim); text-shadow: none; }
.card.dead .card-cost { opacity: 0.5; }
.card.dead::after { content: 'RECYCLE'; position: absolute; right: 10px; bottom: 4px; font-size: 7px;
  letter-spacing: 0.18em; color: var(--color-text-dark); z-index: 3; }
.card.dead:hover { box-shadow: -6px 0 14px rgba(120,140,160,0.18); border-color: var(--color-border); }
/* BROKE — can't afford the fuel cost; play is blocked until you earn more */
.card.broke { --spine: rgba(255,80,80,0.6); opacity: 0.6; cursor: not-allowed; pointer-events: none; }
.card.broke .card-name { color: var(--color-text-dim); text-shadow: none; }
.card.broke:hover { transform: none; border-color: rgba(255,80,80,0.4);
  box-shadow: -6px 0 14px rgba(255,80,80,0.14); background: linear-gradient(180deg, rgba(26,14,14,0.98), rgba(20,8,10,0.98)); }
.card.broke:active { transform: none; }
.card-cost.broke { border-color: rgba(255,80,80,0.6); background: rgba(255,80,80,0.12); color: #ff8a8a; }
.card-cost.broke b { text-shadow: 0 0 8px rgba(255,80,80,0.5); }
/* palette pulse when it appears for a placement */
#tray-home:not(.swap-hidden) .tray-widget { animation: paletteWake .4s ease; }
@keyframes paletteWake { from { box-shadow: 0 0 0 rgba(0,224,255,0); } 50% { box-shadow: 0 0 18px rgba(0,224,255,0.5); } to { box-shadow: none; } }

/* mobile dock — the tray relocates here (a horizontal strip under the field) */
.tray-dock-mobile {
  padding: 10px 8px; gap: 6px;
  background: linear-gradient(180deg, var(--color-panel-deep), var(--color-bg));
  border: 1px solid var(--color-border-dim); border-top: none;
  justify-content: center; flex-wrap: wrap;
}
.cockpit.in-game .tray-dock-mobile.active { display: flex; }
/* the #tray node itself becomes a horizontal wrap strip when docked (relocateTray
   strips .tray-widget; without this the cores block-stack into a vertical column). */
.tray-dock-mobile > .tray {
  display: flex; flex-flow: row wrap; justify-content: center; align-items: center;
  gap: 8px; width: 100%; margin-top: 0;
}
.tray-dock-mobile .tray-core { width: 46px; height: 46px; aspect-ratio: auto; }
/* mobile: shrink the remaining-count badge (number + check) 30% (13.5px → 9.45px) */
.tray-dock-mobile .tray-count { font-size: 9.45px; padding: 0 4px; }

/* ── MOBILE HUD — surfaces score/timer/controls/test/armed when side-HUDs collapse.
     Hidden on desktop; game.js adds .active + relocates the controls at ≤1040px. ── */
.mhud { display: none; }
.cockpit.in-game .mhud.active {
  display: flex; flex-direction: column; gap: 10px;
  padding: 10px 12px 14px; max-width: 100vw; box-sizing: border-box;
  background: linear-gradient(180deg, var(--color-panel-deep), var(--color-bg));
  border: 1px solid var(--color-border-dim); border-top: none;
}
.mhud-stats { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.mhud-stat { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1 1 auto; min-width: 0; }
.mhud-k { font-size: 9px; letter-spacing: 0.22em; color: var(--color-text-dim); }
.mhud-v { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1;
  color: var(--color-bright); font-variant-numeric: tabular-nums; }
.mhud-armed { font-size: 10px; letter-spacing: 0.06em; color: var(--color-text-dim);
  text-align: center; min-height: 12px; }
/* the relocated .controls-block: keep its 2x3 grid but center it and drop the desktop nudge */
.mhud-controls .controls-block { margin-top: 0; width: 100%; }
.mhud-controls .ctrl-grid { grid-template-columns: repeat(3, 1fr); }
.mhud-controls .hud-row { display: none; }        /* drop the "CONTROLS / CLICK-KEY" label row on mobile */
.mhud-controls .test-out { display: none; }       /* the mobile bar has its own #m-test-out */
.mhud #m-test-out:empty { display: none; }

/* ── reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── responsive ──────────────────────────────────────────────── */
@media (max-width: 1380px) {
  :root { --canvas-width: 620px; --canvas-height: 620px; }
  .hud { width: 220px; flex-basis: 220px; }
  .tb-ticker { max-width: 220px; }
}
/* tablet/phone: HUD panels collapse; game.js relocates the tray to the
   mobile dock UNDER the field so it stays playable. */
@media (max-width: 1040px) {
  :root { --canvas-width: min(560px, 94vw); --canvas-height: min(560px, 94vw); }
  .hud { display: none !important; }
  .tb-ticker, .tb-sub { display: none; }
  .bb-center { display: none; }
  .title-word { font-size: 84px; }
  /* segments must be allowed to shrink so the bars never force the cockpit wider than the viewport */
  .tb-seg, .bb-seg { min-width: 0; }
  .tb-center { min-width: 0; }
}
@media (max-width: 620px) {
  :root { --canvas-width: 100vw; --canvas-height: 100vw; }
  body { padding: 0; overflow-x: hidden; }
  /* drop the wide flavor readouts on phones — keep only mark + status + clock so
     the bars fit 100vw without clipping. */
  .tb-right .tb-readout { display: none; }
  .tb-right .tb-readout:last-of-type { display: flex; }   /* keep the CLK readout only */
  .tb-bracket, .bb-bracket { display: none; }
  .bb-right, .bb-left .bb-div, .bb-left .bb-k { display: none; }   /* trim bottombar to NODE/STRM value */
  .topbar, .bottombar { padding: 0 10px; gap: 8px; letter-spacing: 0.12em; }
  .tb-center { flex: 1 1 auto; }
  /* TITLE / INTRO / GAME-OVER overlays escape the square canvas frame on phones —
     the frame is only 100vw tall (≈390px) but these overlays hold a wordmark + copy + CTAs
     (≈700px). Pin them to the VIEWPORT (fixed, 100dvh) so the CTAs are never trapped below
     the frame's fold, and scroll within the full screen if the copy still overflows. */
  .overlay-title, .overlay-intro, .overlay-gameover {
    position: fixed; inset: 0; height: 100dvh; max-height: 100dvh; overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .overlay-title { padding: 18px 16px; justify-content: flex-start; }
  .title-inner { gap: 10px; max-width: none; margin: 0; }
  .title-eyebrow { font-size: 9px; letter-spacing: 0.28em; }
  .title-word { font-size: clamp(38px, 13vw, 56px); }
  .title-tag { margin-top: 0; }
  .tag-text { font-size: 13px; letter-spacing: 0.34em; }
  .title-cores { gap: 5px; }
  .title-core { width: 19px; height: 19px; font-size: 11px; }
  .title-setup { padding-left: 12px; gap: 7px; }
  .title-setup p { font-size: 11px; line-height: 1.5; }
  .title-setup .setup-turn { font-size: 12.5px; }
  .title-menu { gap: 8px; }
  .title-menu .menu-item { flex: 1 1 40%; justify-content: center; padding: 12px 12px; font-size: 10.5px; }
  .title-stamp { display: none; }               /* footer status/prompt: reclaim vertical space on phone */
  .tray-dock-mobile .tray-core { width: 40px; height: 40px; }
}
/* very narrow phones — strip the topbar to the essentials */
@media (max-width: 420px) {
  .tb-status { letter-spacing: 0.16em; font-size: 9px; }
  .tb-mark { font-size: 13px; }
  .tb-readout .tb-k { display: none; }
}
/* intro/story-beat overlay: the desktop 30px right-shift + fixed widths would
   overflow a phone — reflow to full-width, no shift, on small screens. */
@media (max-width: 620px) {
  .overlay-intro { padding: 28px 18px; }
  .intro-head, .intro-body, .intro-cta { margin-left: 0; width: 100%; }
  .intro-name { font-size: clamp(34px, 12vw, 52px); }
  .intro-beat { max-width: none; }

  /* game-over / chart-complete: the desktop absolute px offsets (top:342/470…)
     collide on a small square canvas — reflow to a centered column. */
  .overlay-gameover { display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 18px; padding: 24px 16px; overflow-y: auto; }
  .go-head, .go-panel, .go-ending, .go-actions {
    position: static; left: auto; right: auto; top: auto; bottom: auto; width: 100%; }
  .go-title, .overlay-gameover .overlay-title { font-size: clamp(46px, 16vw, 72px); }
  .go-panel { max-width: 420px; }
  .go-cell { padding: 12px 10px; }
  .go-cell-val { font-size: clamp(26px, 8vw, 40px); }
  .go-ending p { font-size: 18px; }
  .go-actions { flex-wrap: wrap; }
}