/*
 * Design system: Scoreboard (v0 design addendum), Daylight surfaces.
 * Every colour, gradient and shadow in the app is a token on :root below.
 * test/design/tokens_test.rb fails the build if one appears anywhere else.
 */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/bricolage-grotesque-latin-wght-normal-3084aa15.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/ibm-plex-mono-latin-500-normal-3f7bbac1.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * Daylight: a light, warm-to-cool page with two pale glows, white cards floating on it,
 * and a dark score bar as the one strong anchor. Colour has one job each: blue is you,
 * amber is them and "late", green is perfect, red is too early, and the charged move
 * wears its type's colour, as in the game.
 */
:root {
  /* Surfaces */
  --page-a: #FFF4E8; /* warm */
  --page-b: #E9EEFB; /* cool */
  --bg: linear-gradient(160deg, var(--page-a) 0%, var(--page-b) 100%);
  --glow-warm: rgba(255, 190, 134, 0.38);
  --glow-cool: rgba(170, 188, 255, 0.32); /* kept light enough that blue links stay AA on top of it */
  --card: #FFFFFF;
  --card-soft: #F2F4F8;
  --score-bar: #151B24;

  /* Content and accent */
  --ink: #141A21;
  --muted: #4A5464;
  --on-dark: #FFFFFF;
  --on-dark-muted: #B9C3D0;
  --you: #1F5FBF;
  --them: #C9731F; /* amber: small marks only (pulses, dots, borders), never large fills */
  --good: #1FA86A;
  --good-bg: #E8F6EE;
  --bad: #C0392B;
  --line: #E3E8EF;
  --them-bg: color-mix(in srgb, var(--them) 12%, var(--card));
  --bad-bg: color-mix(in srgb, var(--bad) 9%, var(--card));
  --dot-empty: rgba(255, 255, 255, 0.22); /* rep dots not yet played, on the score bar */
  --score-bar-border: rgba(255, 255, 255, 0.08);
  --streak: linear-gradient(135deg, #FFE39A, #FFD27A);
  --lane-fill: linear-gradient(90deg, color-mix(in srgb, var(--you) 4%, var(--card-soft)), color-mix(in srgb, var(--you) 12%, var(--card-soft)));

  /* Type colours: the charged-move button wears its move's type, as in the game. Each is
     darkened only as far as white text needs (4.5:1 or better; test/design/tokens_test.rb). */
  --type-normal: #6F767C;
  --type-fire: #A66537;
  --type-water: #4078B1;
  --type-grass: #44813F;
  --type-electric: #867320;
  --type-ice: #477E75;
  --type-fighting: #CE4069;
  --type-poison: #965DB0;
  --type-ground: #AE5F38;
  --type-flying: #637498;
  --type-psychic: #BB5558;
  --type-bug: #5F7F1D;
  --type-rock: #7D7358;
  --type-ghost: #5269AC;
  --type-dragon: #0A6DC4;
  --type-dark: #5A5366;
  --type-steel: #4D7A8A;
  --type-fairy: #9C5E98;

  /* Elevation: the only two shadows, both gentle */
  --shadow-card: 0 12px 32px rgba(20, 30, 50, 0.10);
  --shadow-bar: 0 10px 24px rgba(20, 26, 33, 0.18);

  /* Type */
  --font-text: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --text-13: 13px;
  --text-15: 15px;
  --text-17: 17px;
  --text-19: 19px;
  --text-25: 25px;
  --text-46: 46px; /* the score */
  --text-70: 70px; /* the live count */

  /* Shape */
  --radius-control: 12px;
  --radius-panel: 14px;
  --radius-bar: 18px;
  --radius-card: 20px;
  --radius-pill: 999px;

  /* Space: 4px base */
  --space-4: 4px;
  --space-10: 10px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-36: 36px;
  --page-pad: 20px;

  /* Targets */
  --target: 48px;
  --target-drill: 54px;
  --target-tap: 76px;

  /* Turn lane */
  --lane-height: 54px;
  --lane-tick: 26px;

  --column: 520px;

  color-scheme: light;
}

@media (min-width: 760px) {
  :root { --page-pad: 36px; }
}

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

/* The base colour lives on <html> (painted beneath everything). <body> has no background:
   one would be painted over the backdrop's negative layer and hide it. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--page-b);
}

body {
  position: relative;
  min-height: 100dvh;
  margin: 0;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--text-15);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* The page backdrop: one gradient and two pale blurred glows, painted once and never
   animated (so reduced motion keeps them). Low power: a flat colour instead. */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--bg);
  pointer-events: none;
}

.backdrop__glow {
  position: absolute;
  width: 60vmax;
  height: 60vmax;
  border-radius: 50%;
  filter: blur(70px);
}

.backdrop__glow--cool {
  bottom: -22vmax;
  left: -20vmax;
  background: var(--glow-cool);
}

.backdrop__glow--warm {
  top: -20vmax;
  right: -18vmax;
  background: var(--glow-warm);
}

html.low-power .backdrop {
  background: var(--page-b);
}

html.low-power .backdrop__glow {
  display: none;
}


h1, h2, h3, h4, p, ul, ol, table, figure {
  margin: 0;
}

h1 { font-size: var(--text-25); line-height: 1.15; font-weight: 800; }
h2 { font-size: var(--text-19); line-height: 1.25; font-weight: 600; }
h3 { font-size: var(--text-17); line-height: 1.3; font-weight: 600; }

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--you);
  outline-offset: 2px;
}

/* Every number that changes is mono and tabular. */
.num,
code,
kbd,
samp {
  font-family: var(--font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.muted { color: var(--muted); }

.t-13 { font-size: var(--text-13); }
.t-15 { font-size: var(--text-15); }
.t-17 { font-size: var(--text-17); }
.t-19 { font-size: var(--text-19); }
.t-25 { font-size: var(--text-25); }
.t-46 { font-size: var(--text-46); line-height: 1; }
.t-70 { font-size: var(--text-70); line-height: 1; }

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Mobile portrait first; desktop is a centred column. */
.column {
  width: 100%;
  min-width: 0;
  max-width: var(--column);
  margin: 0 auto;
  padding: var(--space-16) var(--page-pad);
}

/* App bar: the one global navigation element, on the page. Home left, actions right. */
.appbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-14);
  max-width: var(--column);
  min-height: 64px;
  margin: 0 auto;
  padding: var(--space-10) var(--page-pad) 0;
}

.appbar__brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  color: var(--ink);
  font-weight: 800;
  font-size: var(--text-17);
  text-decoration: none;
}

.appbar__actions {
  display: flex;
  gap: var(--space-10);
}

.footer {
  display: grid;
  gap: var(--space-10);
  max-width: var(--column);
  margin: 0 auto;
  padding: var(--space-36) var(--page-pad) var(--space-20);
  font-size: var(--text-13);
  color: var(--muted);
}

.footer a {
  color: var(--muted);
}

.footer__links {
  display: flex;
  gap: var(--space-16);
}

.footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  color: var(--ink);
}