/* Game theme: g-system reskinned as late-90s console UI, scoped to [data-skin="game"].
   Written so it could move into g-system as a theme: tokens first (every colour is one), then
   g-system's aliases pointed at them, then the few game components (panel, key cap, pad glyph,
   menu row) built from those tokens only. Layout for this game stays in index.html.
   Where this departs from g-system, and why, is listed in the root CLAUDE.md. */

@font-face {
  font-family: "Press Start 2P";
  src: url("../fonts/PressStart2P-Regular.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "VT323";
  src: url("../fonts/VT323-subset.woff2") format("woff2");
  font-display: swap;
}

:root[data-skin="game"] {
  /* the sunset sky (sky.js TIMES.sunset), zenith down to the sun, plus blue hour for the ink */
  --menu-bg: #000;
  --sunset-ink: #0e1333;       /* blue hour zenith */
  --sunset-night: #1a2352;
  --sunset-dusk: #38528f;      /* sunset zenith */
  --sunset-mauve: #a8859a;     /* sunset horizon */
  --sunset-rose: #d68a7a;      /* the low fog */
  --sunset-ember: #ff8f4d;     /* horizon toward the sun */
  --sunset-gold: #ffd98a;      /* the sun disc */
  --sunset-cream: #fbe7cf;
  --siren-red: #ff4d5e;
  --siren-blue: #5b86ff;
  /* the four face buttons in their printed colours */
  --glyph-cross: #8fb4ff;
  --glyph-circle: #ff6f6f;
  --glyph-square: #f39bd6;
  --glyph-triangle: #4fe0b0;
  --ink-shade: rgb(14 19 51 / 0.6);
  --ink-veil: rgb(14 19 51 / 0.72);
  --ink-glass: rgb(14 19 51 / 0.86);

  /* g-system aliases, pointed at the sunset */
  --bg: var(--sunset-ink);
  --surface-1: var(--ink-glass);
  --surface-2: var(--sunset-night);
  --card-bg: var(--ink-glass);
  --text-primary: var(--sunset-cream);
  --text-secondary: var(--sunset-mauve);
  --text-muted: var(--sunset-mauve);
  --border: var(--sunset-dusk);
  --border-strong: var(--sunset-ember);
  --accent-fill: var(--sunset-ember);
  --accent-fill-hover: var(--sunset-gold);
  --accent-fg: var(--sunset-ink);
  --accent-edge: var(--sunset-gold);
  --danger-fill: var(--siren-red);
  --danger-edge: var(--siren-red);
  --danger-text: var(--siren-red);
  --ok-text: var(--glyph-triangle);
  --focus-ring: var(--sunset-gold);
  --font-ui: "VT323", ui-monospace, monospace;
  --font-display: "Press Start 2P", ui-monospace, monospace;
  --radius-sm: 0;
  --radius: 0;
  --radius-card: 0;

  /* game-only: the chunky frame, and the scale TV mode turns up */
  --frame: 4px;
  --hud-scale: 1;
  --edge-x: var(--sp-6);
  --edge-y: var(--sp-6);
}

/* TV mode (menu.js): couch distance, and inside the overscan a TV may crop (about 5%, snapped
   to the 4 px grid where the browser can round). */
:root[data-skin="game"].tv {
  --hud-scale: 1.5;
  --edge-x: 5vw;
  --edge-y: 5vh;
}
@supports (width: round(nearest, 5vw, 4px)) {
  :root[data-skin="game"].tv { --edge-x: round(nearest, 5vw, 4px); --edge-y: round(nearest, 5vh, 4px); }
}
:root[data-skin="game"].tv, :root[data-skin="game"].tv * { cursor: none !important; }

[data-skin="game"] body { font-family: var(--font-ui); font-size: calc(24px * var(--hud-scale)); line-height: calc(24px * var(--hud-scale)); }

/* a window: stepped dusk-to-ink bands under a 2 px dither, a cream frame, a hard ink drop */
[data-skin="game"] .panel {
  color: var(--text-primary);
  background:
    repeating-conic-gradient(var(--ink-shade) 0 25%, transparent 0 50%) 0 0 / 4px 4px,
    linear-gradient(var(--sunset-night) 0 33%, var(--sunset-ink) 33% 100%);
  border: var(--frame) solid var(--sunset-cream);
  box-shadow: 0 0 0 var(--frame) var(--sunset-ink), var(--sp-2) var(--sp-2) 0 var(--frame) var(--ink-shade);
}
[data-skin="game"] .panel-slim {
  background: var(--ink-glass);
  border: var(--frame) solid var(--sunset-dusk);
  box-shadow: var(--sp-1) var(--sp-1) 0 0 var(--ink-shade);
}

/* key caps and pad glyphs: prompts carry both and the input in use picks (data-input on html) */
[data-skin="game"] .key {
  display: inline-block; min-width: calc(24px * var(--hud-scale)); padding: 0 var(--sp-1);
  font-family: var(--font-ui); line-height: calc(20px * var(--hud-scale)); text-align: center;
  color: var(--sunset-ink); background: var(--sunset-cream);
  border-bottom: var(--sp-1) solid var(--sunset-mauve);
}
[data-skin="game"] .glyph { display: inline-block; vertical-align: middle; width: calc(24px * var(--hud-scale)); height: calc(24px * var(--hud-scale)); }
[data-skin="game"] .glyph-text {
  display: inline-block; padding: 0 var(--sp-1); line-height: calc(20px * var(--hud-scale));
  color: var(--sunset-cream); background: var(--sunset-dusk); border: 2px solid var(--sunset-cream);
}
[data-skin="game"] .for-pad { display: none; }
[data-skin="game"][data-input="pad"] .for-pad { display: inline; }
[data-skin="game"][data-input="pad"] .for-keys { display: none; }
[data-skin="game"] .for-touch { display: none; }
[data-skin="game"][data-input="touch"] .for-touch { display: inline; }
[data-skin="game"][data-input="touch"] .for-keys { display: none; }

/* a menu row: a cursor block marks the selection, the value sits right between arrows */
[data-skin="game"] .menu-list { list-style: none; margin: 0; padding: 0; }
[data-skin="game"] .menu-row {
  display: flex; align-items: center; gap: var(--sp-4); min-height: calc(40px * var(--hud-scale));
  padding: 0 var(--sp-3) 0 var(--sp-6); position: relative; cursor: pointer;
  font-size: calc(32px * var(--hud-scale)); line-height: calc(32px * var(--hud-scale));
}
[data-skin="game"] .menu-row::before {
  content: ""; position: absolute; left: var(--sp-2); top: 50%; width: var(--sp-3); height: var(--sp-4); margin-top: calc(-1 * var(--sp-2));
  background: var(--sunset-ember); clip-path: polygon(0 0, 100% 50%, 0 100%); visibility: hidden;
}
[data-skin="game"] .menu-row.is-on { background: var(--sunset-ember); color: var(--sunset-ink); }
[data-skin="game"] .menu-row.is-on::before { visibility: visible; background: var(--sunset-ink); }
[data-skin="game"] .menu-row .value { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); color: var(--sunset-gold); }
[data-skin="game"] .menu-row.is-on .value { color: var(--sunset-ink); }
[data-skin="game"] .menu-row .arrow { padding: 0 var(--sp-1); color: inherit; opacity: 0.8; }

/* g-system's toasts, in the game's clothes, across the top */
[data-skin="game"] .toaster {
  left: 50%; right: auto; bottom: auto; top: calc(var(--edge-y) + var(--sp-8)); transform: translateX(-50%);
  width: min(calc(360px * var(--hud-scale)), calc(100vw - 2 * var(--sp-4)));
}
[data-skin="game"] .toast {
  top: 0; bottom: auto; align-items: center; justify-content: center;
  font-family: var(--font-ui); font-size: calc(24px * var(--hud-scale)); line-height: calc(24px * var(--hud-scale));
  color: var(--text-primary); background: var(--ink-glass); border: var(--frame) solid var(--sunset-cream);
  border-radius: 0; box-shadow: var(--sp-1) var(--sp-1) 0 0 var(--ink-shade);
}
[data-skin="game"] .toast b { font-weight: 400; line-height: calc(24px * var(--hud-scale)); }

@media (prefers-reduced-motion: reduce) {
  [data-skin="game"] .blink { animation: none !important; }
}

/* pad glyph colours */
[data-skin="game"] .glyph-disc { fill: var(--sunset-ink); stroke: var(--sunset-cream); stroke-width: 1.5; }
[data-skin="game"] .glyph-cross { color: var(--glyph-cross); }
[data-skin="game"] .glyph-circle { color: var(--glyph-circle); }
[data-skin="game"] .glyph-square { color: var(--glyph-square); }
[data-skin="game"] .glyph-triangle { color: var(--glyph-triangle); }
[data-skin="game"] .glyph-dpad path { fill: var(--sunset-dusk); stroke: var(--sunset-cream); stroke-width: 1; }
[data-skin="game"] .glyph-dpad path.is-lit { fill: var(--sunset-gold); }
[data-skin="game"] .toast .t-body { text-align: center; }
[data-skin="game"] .toast > svg { width: calc(24px * var(--hud-scale)); height: calc(24px * var(--hud-scale)); margin-top: 0; }