/* One Lester's Arcade interface across the three original cabinets.
   Load after the cabinet sheet. Layout, safe areas, visibility, canvas and
   control ownership stay in those sheets; this layer owns visual roles only. */
@import url("./design-tokens.css");

:root {
  --arcade-page: var(--navy-950);
  --arcade-panel: #0d1526;
  --arcade-well: #111f35;
  --arcade-raised: #182c48;
  --arcade-ink: var(--silver-050);
  --arcade-muted: var(--silver-300);
  --arcade-blue: var(--litecoin-blue);
  --arcade-blue-light: var(--litecoin-blue-bright);
  --arcade-gold: #f0c965;
  --arcade-edge: #475b7c;
  --arcade-focus: var(--crypto-cyan);
  --arcade-font-display: var(--font-mono);
  --arcade-font-body: var(--font-ui);
  --arcade-radius: 6px;
  --arcade-rim: inset 0 1px 0 #d6e4ff24, inset 0 -2px 0 #02040a80;
  --arcade-button-shadow: var(--arcade-rim), 2px 3px 0 #02040a;
  --arcade-panel-shadow: var(--arcade-rim), inset 0 -1px 0 #ff3df226, 0 10px 30px #0006;
}

/* Compatibility aliases are local to game documents, not website chrome. */
html.arcade-game-document {
  --bg: var(--arcade-page);
  --panel: var(--arcade-panel);
  --well: var(--arcade-well);
  --line: var(--arcade-edge);
  --line-soft: #344664;
  --ink: var(--arcade-ink);
  --muted: var(--arcade-muted);
  --dim: var(--arcade-muted);
  --accent: var(--arcade-blue-light);
  --accent-ink: var(--arcade-ink);
  --focus: var(--arcade-focus);
  --glow: var(--arcade-blue-light);
  --cyan: var(--arcade-blue-light);
  --cyan-strong: var(--arcade-blue-light);
  --gold: var(--arcade-gold);
  --ink-muted: var(--arcade-muted);
  --glass: #0d1526e8;
  --glass-edge: var(--arcade-edge);
  font-family: var(--arcade-font-body);
  color: var(--arcade-ink);
  background: var(--arcade-page);
}

html.arcade-game-document body,
.hmh-reboot-shell, .game-shell, .game-shell[data-mode="ranked"] {
  font-family: var(--arcade-font-body);
  color: var(--arcade-ink);
  --accent: var(--arcade-blue-light);
}
html.arcade-stacked-document body, .game-shell, .game-shell[data-mode="ranked"] {
  background: var(--arcade-page);
}

/* Shared lettering: silver titles, gold numeric emphasis, blue active state.
   Game-specific type sizes remain responsive in each cabinet's layout. */
:is(.hmh-startup-card, .hmh-menu-panel, .hmh-upgrade-panel, .hmh-death-panel,
    .game-shell .overlay, #gameOverlay .panel, .game-header) :is(h1, h2),
.hmh-profile-panel > strong, .arcade-music-now strong,
.ranked-results .rr-section-title, .mode-card strong {
  font-family: var(--arcade-font-display);
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--arcade-ink);
  background: none;
  -webkit-text-fill-color: currentColor;
  text-shadow: 2px 3px 0 #02040a;
}
#startOverlay h1, #startOverlay h1 em, .game-shell .overlay h2 {
  font-family: var(--arcade-font-display);
  color: var(--arcade-ink);
  text-shadow: 2px 3px 0 #02040a;
}
.hmh-panel-kicker, .hmh-startup-card .hmh-panel-kicker,
.game-shell .overlay .eyebrow, #gameOverlay .eyebrow, .game-header .eyebrow,
.arcade-music-kicker, .ranked-results .rr-eyebrow {
  font-family: var(--arcade-font-display);
  color: var(--arcade-gold);
  border-color: var(--arcade-gold);
  background: none;
  text-shadow: none;
}
.hmh-startup-card .hmh-panel-kicker span, .hmh-startup-entry strong,
.hmh-startup-number, .hmh-startup-guide, .hmh-startup-guide span {
  color: var(--arcade-gold);
}
.hmh-startup-story, .hmh-startup-brief dd, .hmh-startup-tips article,
.hmh-startup-modes, .game-shell .overlay > p:not(.eyebrow),
.game-shell .overlay small, .ranked-help, .ranked-help summary span,
#gameOverlay .panel p, #gameOverlay .pref-sub, #gameOverlay .pref-note,
#gameOverlay #visualPreferences .fine-print, .hmh-death-note, .hmh-death-sources {
  color: var(--arcade-muted);
  font-family: var(--arcade-font-body);
}
.hmh-startup-brief dt, .hmh-startup-route, .hmh-startup-entry,
.hmh-hud-health-head span, .hmh-profile-panel dt, .hmh-death-stats dt,
.stat-grid dt, .tile-hint, .session-info, .mode-pill {
  color: var(--arcade-muted);
  font-family: var(--arcade-font-display);
}
.hud-cluster strong, .hud-secondary strong, #gameOverlay .score-hero strong,
#gameShell #resultScore, .hmh-death-grade strong, .hmh-death-stats dd,
.hmh-profile-panel dd, .hmh-hud-health-head strong, .hmh-hud-ammo-line,
.hmh-hud-utility-label b, .stat-grid dd, .ranked-results .rr-score,
.ranked-results .rr-stat dd, .arcade-music-time, .arcade-music-duration-label {
  font-family: var(--arcade-font-display);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--arcade-gold);
  text-shadow: none;
}

/* Navy metal panels share a modest silver rim, inset depth and square corners. */
.hmh-glass-panel, .hmh-death-panel, #gameOverlay .panel,
.hmh-hud-cluster, .hmh-reboot-status-card, .game-shell .hud-cluster,
#gameOverlay .result-stats, .game-shell .result-stats span,
.arcade-music-player, .arcade-music-expanded-panel, .ranked-results {
  color: var(--arcade-ink);
  border-color: var(--arcade-edge);
  border-radius: var(--arcade-radius);
  background: var(--arcade-panel);
  box-shadow: var(--arcade-panel-shadow);
}
.hmh-modal-layer, .hmh-death-recap, #gameOverlay,
#pauseOverlay, #resultOverlay {
  background: linear-gradient(180deg, #05070f9c, #05070fe8);
}
.hmh-startup {
  color: var(--arcade-ink);
  background: radial-gradient(ellipse at 75% 0, #182c48, var(--arcade-page) 75%);
}
#startOverlay {
  background: linear-gradient(90deg, #05070f00, #05070fb8);
}
.hmh-pause-grid > section, #gameOverlay .pref-group,
.hmh-death-grade, .mode-card, #gameOverlay .tile {
  border-color: var(--arcade-edge);
  border-radius: var(--arcade-radius);
  background: var(--arcade-well);
  box-shadow: var(--arcade-rim);
}
.hmh-startup-tips, .hmh-startup-modes, .hmh-profile-panel dl div,
.hmh-upgrade-details, .stat-grid div, .game-header, .session-info,
.ranked-help summary, #gameOverlay .panel summary {
  border-color: var(--arcade-edge);
}
.hmh-startup-route i, .hmh-startup-progress { background: var(--arcade-edge); }
.hmh-startup-progress span { background: var(--arcade-blue-light); }
.game-header, #touchControls { background: var(--arcade-panel); }
.hmh-hud-crest[data-hero] {
  color: var(--arcade-ink);
  background: var(--arcade-blue);
  border-color: var(--arcade-gold);
  box-shadow: var(--arcade-rim);
}

/* One action treatment across all existing command/menu controls. No sizing,
   display, position, pointer-events or enabled-state changes are introduced. */
.hmh-command-button, .hmh-menu-actions button, .hmh-death-panel button,
.game-shell .primary-button, .game-shell .secondary-button,
.game-shell .hud-actions button, #gameOverlay button, .header-actions button,
#touchControls button, .share-row .share-button, .arcade-music-button,
.ranked-results button, .mode-card {
  font-family: var(--arcade-font-display);
  font-weight: 700;
  letter-spacing: .015em;
  color: var(--arcade-ink);
  border-color: var(--arcade-edge);
  border-radius: var(--arcade-radius);
  background: var(--arcade-well);
  box-shadow: var(--arcade-button-shadow);
  text-shadow: none;
}
.hmh-startup-enter, #hmhDeathRestart, .hmh-menu-actions #hmhResumeButton,
.game-shell .primary-button, #gameOverlay .result-actions .primary,
.arcade-music-button.primary {
  color: var(--arcade-ink);
  border-color: var(--arcade-blue-light);
  background: var(--arcade-blue);
}
:is(.hmh-command-button, .hmh-menu-actions button, .hmh-death-panel button,
    .game-shell .primary-button, .game-shell .secondary-button,
    .game-shell .hud-actions button, #gameOverlay button, .header-actions button,
    #touchControls button, .share-row .share-button, .arcade-music-button,
    .ranked-results button, .mode-card):hover:not(:disabled) {
  color: var(--arcade-ink);
  border-color: var(--arcade-blue-light);
  background: var(--arcade-raised);
  box-shadow: var(--arcade-button-shadow);
  transform: none;
}
#gameOverlay .tile[aria-current="true"],
#gameOverlay .tile[aria-expanded="true"], .arcade-music-button.active,
.arcade-music-player[data-shuffle="true"] #arcadeMusicShuffleButton {
  color: var(--arcade-ink);
  border-color: var(--arcade-blue-light);
  background: var(--arcade-blue);
  box-shadow: var(--arcade-button-shadow);
}
#gameOverlay .tile svg { stroke: var(--arcade-blue-light); }
#gameOverlay .tile[aria-current="true"] svg { stroke: var(--arcade-ink); }
#gameOverlay .tile[aria-current="true"] .tile-hint { color: var(--arcade-ink); }
.hmh-pause-grid h2, .hmh-upgrade-choice__branch,
.game-shell .ranked-help summary, #gameOverlay .pref-group legend {
  font-family: var(--arcade-font-display);
  color: var(--arcade-blue-light);
}
.game-shell .ranked-help a, #gameOverlay .ranked-hint a,
#gameOverlay .ranked-help a, .ranked-results .rr-link {
  color: var(--arcade-blue-light);
}
.game-shell .sfx-volume, #gameOverlay .panel .result-cause,
#gameOverlay .panel .practice-best {
  color: var(--arcade-muted);
  border-color: var(--arcade-edge);
  background: var(--arcade-well);
  border-radius: var(--arcade-radius);
}
.game-shell input, #gameOverlay input, .hmh-glass-panel input {
  accent-color: var(--arcade-blue-light);
}
.game-shell select, #gameOverlay select, .hmh-glass-panel select, kbd {
  color: var(--arcade-ink);
  border-color: var(--arcade-edge);
  background: var(--arcade-well);
  font-family: var(--arcade-font-display);
}
#gameOverlay .segment span {
  color: var(--arcade-ink);
  border-color: var(--arcade-edge);
  border-radius: var(--arcade-radius);
  background: var(--arcade-well);
  font-family: var(--arcade-font-display);
  box-shadow: var(--arcade-rim);
}
#gameOverlay .segment input:checked + span {
  color: var(--arcade-ink);
  border-color: var(--arcade-blue-light);
  background: var(--arcade-blue);
  box-shadow: var(--arcade-rim);
}
#gameOverlay .segment input:focus-visible + span {
  outline: 2px solid var(--arcade-focus);
  outline-offset: 3px;
}
.hmh-touch-button { font-family: var(--arcade-font-display); }
.hmh-touch-button::before { border-color: var(--arcade-blue-light); background: #0d152680; }
.hmh-touch-button--power::before { border-color: var(--danger); }

/* Focus is cyan everywhere. Gold and magenta remain restrained brand detail. */
:is(.hmh-reboot-shell, .game-shell, #gameOverlay, .game-header, #touchControls,
    .arcade-music-player, .ranked-results)
  :is(button, a, input, select, summary, [tabindex]):focus-visible,
.mode-card:focus-visible {
  outline: 2px solid var(--arcade-focus);
  outline-offset: 3px;
  box-shadow: var(--arcade-button-shadow);
}
.arcade-music-progress-fill { background: var(--arcade-blue-light); }
.arcade-music-player .arcade-music-now strong { text-shadow: none; }
.arcade-music-player[data-surface="pause-menu"] { border-color: var(--arcade-gold); }
.arcade-music-player .arcade-music-kicker::after { color: var(--arcade-gold); }

/* Existing portal discovery rules carry two IDs. Match only the game-menu
   scope so those older palette/font choices cannot override the shared skin. */
#officialApp #officialModeSelect { background: var(--arcade-page) !important; }
#officialApp #officialModeSelect .mode-card {
  font-family: var(--arcade-font-display);
  font-weight: 700;
  letter-spacing: .015em;
  color: var(--arcade-ink);
  border-color: var(--arcade-edge);
  border-radius: var(--arcade-radius);
  background: var(--arcade-well);
  box-shadow: var(--arcade-button-shadow);
}
#officialApp #officialModeSelect .mode-card strong,
#officialApp #officialModeSelect #officialModeTitle {
  color: var(--arcade-ink);
  font-family: var(--arcade-font-display);
  text-shadow: 2px 3px 0 #02040a;
}
#officialApp #officialModeSelect .mode-card > span {
  color: var(--arcade-muted);
  font-family: var(--arcade-font-body);
}
#officialApp #officialModeSelect #officialModeEyebrow { color: var(--arcade-gold); }
#officialApp #officialModeSelect .mode-card:hover:not(:disabled) {
  color: var(--arcade-ink);
  border-color: var(--arcade-blue-light);
  background: var(--arcade-raised);
  box-shadow: var(--arcade-button-shadow);
  transform: none;
}
#officialApp #officialModeSelect .mode-card:focus-visible {
  outline: 2px solid var(--arcade-focus);
  outline-offset: 3px;
  box-shadow: var(--arcade-button-shadow);
}
#officialApp #officialModeSelect .ranked-tooltip {
  color: var(--arcade-muted);
  border-color: var(--arcade-edge);
  border-radius: var(--arcade-radius);
  background: var(--arcade-panel);
  box-shadow: var(--arcade-rim);
}

@media (orientation: portrait) {
  #startOverlay { background: linear-gradient(180deg, #05070f00 35%, #05070fd9); }
}
@media (prefers-reduced-motion: reduce) {
  :is(.hmh-command-button, .game-shell .primary-button,
      .game-shell .secondary-button, #gameOverlay button, .arcade-music-button) {
    transition: none;
  }
}
@media (forced-colors: active) {
  .hmh-glass-panel, .hmh-death-panel, #gameOverlay .panel,
  .game-shell .hud-cluster, .arcade-music-player, .ranked-results {
    border-color: CanvasText;
  }
}

/* Reserve the phone music control beside STACKED pause copy. The shared
   parent jukebox remains reachable without covering the actual text. */
@media (max-width: 600px) {
  html.arcade-stacked-document #gameOverlay .hero-copy { padding-inline-end: 56px; }
}

/* Finished-run readouts use the same label/value hierarchy in each cabinet. */
.arcade-run-stats dt { color:var(--arcade-muted);font:600 11px/1.45 var(--arcade-font-display);letter-spacing:.04em; }
.arcade-run-stats dd { color:var(--arcade-gold);font-family:var(--arcade-font-display);font-variant-numeric:tabular-nums;overflow-wrap:anywhere; }
/* Start at the scroll origin: centred tall content otherwise clips its score
   above the reachable area on landscape and narrow phones. */
.game-shell #resultOverlay { justify-content:flex-start;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;padding:24px max(16px,env(safe-area-inset-right)) 32px max(16px,env(safe-area-inset-left)); }
.game-shell #resultOverlay > * { flex-shrink:0;max-width:680px; }
.game-shell #resultOverlay > .eyebrow { margin:0 0 12px;font-size:11px; }
.game-shell #resultOverlay .arcade-result-score { display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:8px 12px;font-size:clamp(42px,8vw,72px);line-height:1.1;letter-spacing:-.02em; }
.game-shell #resultOverlay .arcade-result-unit { color:var(--arcade-muted);font:600 11px/1.4 var(--arcade-font-display);letter-spacing:.12em; }
.game-shell #resultOverlay > p:not(.eyebrow) { display:block;font:400 13px/1.5 var(--arcade-font-body);margin:12px 0;width:100%; }
.game-shell #resultOverlay .arcade-run-stats { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;width:100%;margin:8px 0 16px;padding:12px 16px;border:1px solid var(--arcade-edge);border-radius:var(--arcade-radius);background:var(--arcade-panel);text-align:left; }
.game-shell #resultOverlay .arcade-run-stats div { min-width:0;padding:8px;border-bottom:1px solid var(--arcade-edge); }
.game-shell #resultOverlay .arcade-run-stats dd { margin:4px 0 0;font-size:18px;line-height:1.35; }
.game-shell #resultOverlay .result-actions { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%; }
.game-shell #resultOverlay .result-actions button { min-width:0;min-height:44px;padding:10px 8px;font-size:12px;letter-spacing:.02em;white-space:normal; }
.game-shell #resultOverlay .replay-timeline { width:100%;height:32px;margin:8px 0; }
.game-shell #resultOverlay .replay-readout { position:static;flex-direction:row;flex-wrap:wrap;width:100%;font-size:12px;margin:0 0 16px; }
.game-shell #resultOverlay .replay-readout label { font-size:12px; }
.game-shell #resultOverlay:not(.is-replaying) { background:linear-gradient(135deg,#0d1526f5,#05070fed); }
.game-shell #resultOverlay.is-replaying { justify-content:flex-end;background:linear-gradient(180deg,#05070f00 35%,#05070fe8); }
.game-shell #resultOverlay.is-replaying > :is(.eyebrow,.arcade-result-score,#resultCopy,#resultStats,#runObjectives,#shareRow,#rankedHint) { display:none; }
@media(max-width:600px){
 .game-shell #resultOverlay .arcade-run-stats { grid-template-columns:repeat(2,minmax(0,1fr));padding:8px; }
 .game-shell #resultOverlay .result-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-height:460px){
 .game-shell #resultOverlay { padding-block:12px; }
 .game-shell #resultOverlay.is-replaying { justify-content:flex-start; }
}

.game-shell #resultOverlay .result-actions [hidden] { display:none; }