/*
  THEME — change colors here and every screen (idle, loading, winner, admin, login) follows.
  The four --line/--accent/--fill/--details tokens also drive the heart⇄phone loader.
*/
:root {
  --bg: #0b1b3d;          /* page background */
  --surface: #12285a;     /* cards, inputs */
  --border: #26407f;      /* card and input borders */
  --text: #ffffff;        /* main text */
  --muted: #9ccbff;       /* secondary text */

  --line: #9ccbff;        /* loader outline */
  --accent: #ffffff;      /* loader moving highlight */
  --fill: #9ccbff;        /* loader inner fill */
  --details: #9ccbff;     /* loader phone pill + home bar */

  --button-bg: #9ccbff;   /* primary buttons */
  --button-text: #0b1b3d;
  --danger: #ff6b6b;
  --success: #6be3a0;

  --confetti-1: #9ccbff;
  --confetti-2: #ffffff;
  --confetti-3: #5b8def;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* wiring into the loader component — no need to edit */
  --hpl-line: var(--line);
  --hpl-accent: var(--accent);
  --hpl-fill: var(--fill);
  --hpl-details: var(--details);
}

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

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
}