/* ===================================================================
 * Flanigan Games — THEMES
 * -------------------------------------------------------------------
 * "Classic" is the BASE theme. Its values live in :root inside
 * templates/base.html, so there is no classic block here — selecting
 * Classic simply falls back to those defaults.
 *
 * To ADD A NEW THEME (two steps):
 *   1. Copy the [data-theme="arcade"] block below, rename the key, and
 *      override any variables you want. Anything you omit inherits the
 *      Classic default, so you only set what changes.
 *   2. Register it in static/theme.js (add one line to the THEMES list)
 *      so it appears in the top-right theme picker.
 * =================================================================== */


/* === ARCADE =========================================================
 * 8-bit display type, neon arcade colors on near-black, CRT scanlines.
 * Display face: "Press Start 2P".  Body face: "VT323" (readable retro).
 * =================================================================== */
html[data-theme="arcade"]{
  /* palette */
  --bg:#0b0b1a;
  --bg2:#15152e;
  --panel:#14142b;
  --line:#33336b;
  --gold:#00eaff;            /* primary neon (cyan) */
  --gold-deep:#ff2d95;       /* secondary neon (magenta) — used for borders */
  --cream:#f3f2ff;           /* near-white text */
  --muted:#8f8fd0;
  --input-bg:#0e0e22;
  --on-accent:#001016;       /* dark text sitting on the neon buttons */
  --body-bg:
     radial-gradient(120% 80% at 50% -10%, #2a1160 0%, rgba(42,17,96,0) 55%),
     radial-gradient(100% 70% at 100% 0%, #07303a 0%, rgba(7,48,58,0) 50%),
     #0b0b1a;
  --statusbar:#0b0b1a;

  /* type */
  --font-display:"Press Start 2P", monospace;
  --font-body:"VT323", monospace;
  --font-ui:"Press Start 2P", monospace;
  --body-size:1.25rem;       /* VT323 runs small per-em, so size up */
  --body-lh:1.35;
  --letter:.01em;
  --brand-size:.9rem;        /* Press Start 2P is wide — keep these small */
  --nav-size:.6rem;
  --h1-size:clamp(1.1rem,3.4vw,1.7rem);
  --h2-size:1rem;
  --eyebrow-size:.6rem;
  --btn-size:.72rem;
  --tilename-size:.78rem;

  /* shape + effects */
  --radius:8px;
  --radius-sm:4px;
  --btn-radius:6px;
  --tile-icon-radius:8px;
  --display-shadow:0 0 3px rgba(0,234,255,.55), 0 0 1px rgba(0,234,255,.9);
  --tile-hover-shadow:0 0 0 1px var(--gold), 0 0 9px rgba(0,234,255,.35);
  --btn-shadow:4px 4px 0 var(--gold-deep);  /* hard pixel drop-shadow */
  --btn-press:4px;                           /* button "sinks" when tapped */
  --scanlines:repeating-linear-gradient(
     to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px,
     rgba(0,0,0,.16) 3px, rgba(0,0,0,0) 4px);
}

/* Arcade buttons read better square + uppercase */
html[data-theme="arcade"] .btn{text-transform:uppercase;letter-spacing:.04em;border:2px solid var(--gold)}
html[data-theme="arcade"] .btn.ghost{border-color:var(--gold-deep)}
html[data-theme="arcade"] .pill{border-width:2px}
html[data-theme="arcade"] h1,
html[data-theme="arcade"] .brand{text-transform:uppercase}