/* ==========================================================================
   SPLASH Arcade — design tokens, v1 ("The Pool")
   Only what the three arcade screens use. Plain CSS custom properties;
   no framework. Load as a stylesheet file (CSP: no inline styles).
   The canvas board "System — The Pool" shows every value below.
   ========================================================================== */

/* One self-hosted font file, one weight. Everything else is the phone's own type.
   Rubik ExtraBold (SIL Open Font Licence), Latin subset: ~19 KB woff2,
   less if subset to the characters the screens actually use. */
@font-face {
  font-family: "Splash Display";
  src: url("../fonts/splash-display-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Ground and depth ------------------------------------------------ */
  --splash-deck: #0F2335;          /* page background ("night deck") */
  --splash-deck-deep: #0B1C2B;     /* proof band, the YOU strip */
  --splash-deck-raised: #0A1A28;   /* tab track, inputs */
  --splash-wall: #0B2E45;          /* pool wall above the water */
  --splash-tile-line: rgba(255, 255, 255, .06); /* 22px tile grid */
  --splash-divider: #1E3E55;

  /* ---- Water ----------------------------------------------------------- */
  --splash-water-surface: #44DDEB; /* top of the water / waterline fill */
  --splash-water: #23C2D8;         /* ticket-money layer */
  --splash-water-deep: #0B6F8F;    /* coin-flip-money layer */
  --splash-foam: #DDFCFF;          /* waterline highlight, ripples */
  --splash-coping: #DCE8E9;        /* pool edge; carries the sponsor plaque */
  --splash-coping-joint: #C3D5D7;
  --splash-coping-ink: #1D4E63;

  /* ---- Brand and game modes ------------------------------------------- */
  --splash-cyan: #35D3E6;          /* primary action */
  --splash-cyan-press: #1A8798;    /* the 5px "press edge" under primary buttons */
  --splash-cyan-text: #7FE6F2;     /* cyan when used as text on the deck */
  --mode-weekly: var(--splash-cyan);
  --mode-duel: #FF8C73;            /* call-outs and Duel actions */
  --mode-duel-press: #C2553F;
  --mode-hourly: #C8F26A;          /* Hourly pace */
  --mode-hourly-press: #7FA526;

  /* ---- Text -------------------------------------------------------------- */
  --splash-ink: #05283C;           /* on water, cyan, coping and light sheets */
  --splash-text: #EEF8FA;          /* on the deck */
  --splash-text-2: #A9C9D6;        /* secondary on the deck (≥ 7:1) */
  --splash-text-3: #8FB2C0;        /* footer / meta on the deck */

  /* ---- States ------------------------------------------------------------ */
  --splash-rehearsal: #FFC24A;     /* REHEARSAL chip */
  --splash-rehearsal-bg: #3A2E0E;
  --splash-rehearsal-text: #FFE3A3;
  --splash-win: #74EBB0;
  --splash-loss: #9DB1BD;          /* deliberately quiet; the word "Lost" carries it */

  /* ---- Type -------------------------------------------------------------- */
  --font-display: "Splash Display", ui-rounded, system-ui, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-proof: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --type-prize: 800 clamp(104px, 30.8vw, 208px)/1 var(--font-display);   /* 120px at 390 */
  --type-countdown: 800 clamp(34px, 8.7vw, 48px)/1.05 var(--font-display);
  --type-stat: 800 42px/1 var(--font-display);       /* your chance */
  --type-title: 800 22px/1.2 var(--font-display);    /* screen + section headings */
  --type-figure: 800 20px/1.1 var(--font-display);   /* amounts in lists, totals */
  --type-button: 800 18px/1 var(--font-display);
  --type-body: 400 15px/1.5 var(--font-body);
  --type-small: 400 13px/1.5 var(--font-body);
  --type-label: 700 11px/1 var(--font-body);         /* uppercase, see --track-label */
  --type-proof: 500 12px/1.5 var(--font-proof);      /* blocks, rounds, addresses */
  --track-label: .16em;
  --track-prize: -.02em;

  /* ---- Spacing ----------------------------------------------------------- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --gutter: 16px;                  /* 24px from 600px, 40px from 1024px */
  --tap: 44px;                     /* minimum touch target */

  /* ---- Shape (no cards: the pool, the deck and lane ropes do the grouping) */
  --radius-pill: 999px;            /* buttons, tabs, steppers */
  --radius-note: 12px;             /* rehearsal note, inputs */
  --press-primary: 0 5px 0 var(--splash-cyan-press);

  /* ---- The pool ---------------------------------------------------------- */
  --pool-height: 330px;            /* 380px from 600px, 440px from 1024px */
  --pool-tile: 22px;
  /* Water level: top of the pool = 1.35 x the biggest pot of the last four
     weeks (or this week's, if bigger), so a record week fills about three
     quarters of the pool. Past weeks are drawn as dashed lines. */

  /* ---- Motion ------------------------------------------------------------ */
  --ease-water: cubic-bezier(.3, .7, .4, 1);
  --ease-drop: cubic-bezier(.5, 0, .9, .4);
  --dur-sway: 4.5s;                /* waterline drift, loops */
  --dur-drop: 700ms;               /* coin falls into the pool */
  --dur-ripple: 900ms;
  --dur-rise: 1200ms;              /* water level eases to the new pot */
  --dur-drain: 1600ms;             /* draw resolves */
  --dur-tumble: 1400ms;            /* Duel coin */
}

@media (min-width: 600px) {
  :root { --gutter: 24px; --pool-height: 380px; }
}
@media (min-width: 1024px) {
  :root { --gutter: 40px; --pool-height: 440px; }
}

/* Reduced motion: every number and state still updates; nothing moves. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-sway: 0s; --dur-drop: 0s; --dur-ripple: 0s;
    --dur-rise: 0s; --dur-drain: 0s; --dur-tumble: 0s;
  }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}