/* fotbol: design tokens, layout, components, pitch board.
   Tokens first: change the look here. Light is the default; dark applies with the system
   setting (unless the user picked light) or when the user picks dark in Settings. */

:root {
  color-scheme: light;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* surfaces and text */
  --bg: #f3f6f1;
  --surface: #ffffff;
  --surface-2: #edf2eb;
  --surface-3: #e0e8de;
  --text: #122018;
  --text-muted: #4f6157;
  --border: #d3dcd2;
  --accent: #0e7440;
  --accent-strong: #0a5c32;
  --accent-ink: #ffffff;
  --accent-soft: #dcf1e4;
  --seg-on: #ffffff;
  --focus: #1b64d8;
  --good: #0e7440;
  --bad: #b4271b;
  --bad-ink: #ffffff; /* text on a --bad fill */
  --bad-soft: #fde8e5;
  --shadow-sm: 0 1px 2px rgb(16 24 20 / 0.06);
  --shadow: 0 1px 2px rgb(16 24 20 / 0.06), 0 8px 24px rgb(16 24 20 / 0.08);
  --shadow-lg: 0 12px 40px rgb(16 24 20 / 0.18);
  --radius: 14px;
  --radius-sm: 10px;
  --header-h: 60px;
  --gutter: 16px;
  --move-ms: 220ms;

  /* pitch */
  --grass-surround: #2c6d37;
  --grass-a: #3a8a45;
  --grass-b: #347f3f;
  --pitch-line: rgb(255 255 255 / 0.9);
  --pitch-goal: rgb(255 255 255 / 0.22);
  --overlay-line: rgb(255 255 255 / 0.6);

  /* kits: ours light and warm, theirs dark and cool (they differ in lightness AND hue) */
  --kit-us: #fff3c9;
  --kit-us-edge: #6b5600;
  --kit-us-ink: #2a2200;
  --kit-them: #27307c;
  --kit-them-edge: #d5dbff;
  --kit-them-ink: #f2f4ff;
  --learner: #ffa91a;
  --learner-edge: #ffffff;
  --learner-ink: #2b1900;
  --learner-glow: rgb(255 169 26 / 0.5);
  --ball: #ffffff;
  --ball-edge: #151515;
  --token-focus: #ffffff;

  /* pitch annotations */
  --ideal: #5fe2ff; /* ghost, zone, heatmap hue, fix arrows */
  --cue: #ff70b3;
  --mk-bad: #ff8a66;
  --offside: #ff9d42;
  --backline: #fff3c9;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0b110e;
    --surface: #121a16;
    --surface-2: #19231e;
    --surface-3: #223029;
    --text: #e6eee8;
    --text-muted: #9fb2a7;
    --border: #2a3831;
    --accent: #3ccf80;
    --accent-strong: #71e0a4;
    --accent-ink: #052012;
    --accent-soft: #163525;
    --seg-on: #2b3b33;
    --focus: #86b8ff;
    --good: #3ccf80;
    --bad: #ff8a7a;
    --bad-ink: #2a0905;
    --bad-soft: #3a1c18;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3);
    --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px rgb(0 0 0 / 0.35);
    --shadow-lg: 0 12px 40px rgb(0 0 0 / 0.55);
    --grass-surround: #12321d;
    --grass-a: #1c4a29;
    --grass-b: #194325;
    --pitch-line: rgb(228 240 232 / 0.66);
    --pitch-goal: rgb(228 240 232 / 0.14);
    --overlay-line: rgb(228 240 232 / 0.5);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b110e;
  --surface: #121a16;
  --surface-2: #19231e;
  --surface-3: #223029;
  --text: #e6eee8;
  --text-muted: #9fb2a7;
  --border: #2a3831;
  --accent: #3ccf80;
  --accent-strong: #71e0a4;
  --accent-ink: #052012;
  --accent-soft: #163525;
  --seg-on: #2b3b33;
  --focus: #86b8ff;
  --good: #3ccf80;
  --bad: #ff8a7a;
  --bad-ink: #2a0905;
  --bad-soft: #3a1c18;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3);
  --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px rgb(0 0 0 / 0.35);
  --shadow-lg: 0 12px 40px rgb(0 0 0 / 0.55);
  --grass-surround: #12321d;
  --grass-a: #1c4a29;
  --grass-b: #194325;
  --pitch-line: rgb(228 240 232 / 0.66);
  --pitch-goal: rgb(228 240 232 / 0.14);
  --overlay-line: rgb(228 240 232 / 0.5);
}

/* ------------------------------------------------------------------ base */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 var(--font);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 0.5em; letter-spacing: -0.01em; }
p { margin: 0 0 0.75em; }
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-strong); }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
code, kbd { font-family: var(--font-mono); font-size: 0.9em; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute; left: 8px; top: -48px; z-index: 100;
  background: var(--accent); color: var(--accent-ink);
  padding: 8px 14px; border-radius: var(--radius-sm); text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: 8px; color: var(--accent-ink); }

.muted { color: var(--text-muted); }
.icon { flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------------ header */

.app-header {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  padding: 8px var(--gutter);
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
  min-height: 60px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border);
}
.wordmark {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 800; font-size: 1.35rem; letter-spacing: -0.03em;
  color: var(--text); text-decoration: none;
}
.wordmark:hover { color: var(--text); }
.wordmark-mark { width: 26px; height: 26px; flex: none; }

.main-nav { flex: 1; min-width: 0; }
.main-nav ul { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; justify-content: center; }
.main-nav a {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: 999px;
  color: var(--text-muted); text-decoration: none; font-weight: 600; font-size: 0.95rem;
  white-space: nowrap;
}
.main-nav a:hover { color: var(--text); background: var(--surface-2); }
.main-nav a[aria-current="page"] { color: var(--accent-ink); background: var(--accent); }

.settings { position: relative; flex: none; }
.settings-menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  width: min(320px, calc(100vw - 2 * var(--gutter)));
  padding: 16px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  display: grid; gap: 14px;
}
.settings-menu[hidden] { display: none; }
.menu-title { font-size: 1rem; margin: 0; }
.menu-note { font-size: 0.85rem; color: var(--text-muted); margin: 0; }
.menu-links { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.9rem; border-top: 1px solid var(--border); padding-top: 12px; }

@media (max-width: 719.98px) {
  .app-header { flex-wrap: wrap; row-gap: 4px; padding-top: 6px; padding-bottom: 6px; }
  .wordmark { flex: 1; }
  .main-nav { order: 3; flex-basis: 100%; }
  .main-nav ul { justify-content: space-between; gap: 2px; }
  .main-nav li { flex: 1; }
  .main-nav a { justify-content: center; padding: 7px 4px; font-size: 0.875rem; }
  .main-nav .icon { display: none; }
}

/* ------------------------------------------------------------------ main + views */

main { display: block; }
main:focus { outline: none; }
.view { min-height: calc(100dvh - var(--header-h)); }
.page { max-width: 1120px; margin: 0 auto; padding: 24px var(--gutter) 56px; }
.boot { padding: 48px var(--gutter); text-align: center; color: var(--text-muted); }

/* ------------------------------------------------------------------ buttons + controls */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px;
  border: 1px solid transparent; border-radius: 999px;
  font-weight: 650; font-size: 0.975rem; line-height: 1.1;
  text-decoration: none; cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
/* Player mode: buttons are body text, 16 px or more (KID_REDESIGN §5, R6); Coach mode keeps the size above. :where()
   adds no weight, so a Player screen's own button sizes (player.css, play.css, pass.css) still win. */
:where(.view--player) .btn { font-size: 1rem; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: var(--accent-strong); color: var(--accent-ink); }
.btn--secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn--secondary:hover { background: var(--surface-2); color: var(--text); }
.btn--ghost { background: transparent; color: var(--text); }
.btn--ghost:hover { background: var(--surface-2); color: var(--text); }
.btn--icon { padding: 0; width: 44px; min-width: 44px; }

.segmented { border: 0; margin: 0; padding: 0; min-width: 0; }
.segmented-legend { font-size: 0.8rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; padding: 0; margin-bottom: 6px; }
.segmented-options { display: flex; padding: 3px; gap: 3px; background: var(--surface-2); border-radius: 999px; }
.segmented-option { flex: 1; position: relative; }
.segmented-option input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.segmented-option span {
  display: block; text-align: center; padding: 7px 10px; border-radius: 999px;
  font-weight: 600; font-size: 0.9rem; color: var(--text-muted);
}
.segmented-option input:checked + span { background: var(--seg-on); color: var(--text); box-shadow: var(--shadow-sm); }
.segmented-option input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 1px; }

.switch { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track {
  flex: none; position: relative; width: 42px; height: 26px; margin-top: 1px;
  border-radius: 999px; background: var(--surface-3); transition: background-color 0.15s;
}
.switch-track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform 0.15s;
}
.switch input:checked + .switch-track { background: var(--accent); }
.switch input:checked + .switch-track::after { transform: translateX(16px); }
.switch input:focus-visible + .switch-track { outline: 3px solid var(--focus); outline-offset: 2px; }
.switch-label { display: grid; font-weight: 600; font-size: 0.95rem; }
.switch-hint { font-weight: 400; font-size: 0.8rem; color: var(--text-muted); }

.field { display: grid; gap: 4px; }
.field-label { font-size: 0.8rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.field-select {
  min-height: 40px; padding: 6px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
}

/* ------------------------------------------------------------------ cards, notices, toasts, modal */

.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--shadow-sm);
}
.card-title { font-size: 1.1rem; }
.card-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

.notice {
  max-width: 560px; margin: 48px auto; padding: 28px var(--gutter);
  text-align: center;
}
.notice-title { font-size: 1.4rem; }
.notice p { color: var(--text-muted); }
.notice .card-actions { justify-content: center; }
.notice--bad .notice-title { color: var(--bad); }

.toasts {
  position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 60;
  transform: translateX(-50%);
  display: grid; gap: 8px; width: min(420px, calc(100vw - 2 * var(--gutter)));
  pointer-events: none;
}
.toast {
  padding: 12px 16px; border-radius: var(--radius-sm);
  background: var(--text); color: var(--bg); box-shadow: var(--shadow-lg);
  font-weight: 600; animation: toast-in 0.2s ease-out;
}
.toast--good { background: var(--good); color: var(--accent-ink); }
.toast--bad { background: var(--bad); color: var(--bad-ink); }
.toast.is-leaving { opacity: 0; transition: opacity 0.2s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

.modal {
  width: min(520px, calc(100vw - 2 * var(--gutter)));
  max-height: calc(100dvh - 48px);
  padding: 0; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg);
}
.modal::backdrop { background: rgb(5 12 8 / 0.55); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 12px 0 20px; }
.modal-title { font-size: 1.15rem; margin: 0; }
.modal-body { padding: 12px 20px; }
.modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding: 0 20px 20px; }
.modal-actions:empty { display: none; }

/* ------------------------------------------------------------------ stage: board + side panel / bottom sheet */

.stage { --sheet-peek: 140px; }
.stage-board { position: relative; min-width: 0; min-height: 0; display: flex; overflow: clip; }
.stage-board > .board { flex: 1; }
.stage-panel { background: var(--surface); color: var(--text); display: flex; flex-direction: column; min-height: 0; }
.panel-head:empty, .panel-actions:empty, .panel-feedback:empty { display: none; }
.panel-head { padding: 4px 20px 0; }
.panel-head h1, .panel-head h2 { font-size: 1.2rem; margin-bottom: 4px; }
.panel-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 20px; }
.panel-scroll { overflow-y: auto; overscroll-behavior: contain; padding: 0 20px 20px; }
.panel-feedback { padding: 12px 0; }

.sheet-handle {
  display: flex; justify-content: center; align-items: center;
  width: 100%; height: 28px; border: 0; background: transparent; cursor: pointer; touch-action: none;
  border-radius: 18px 18px 0 0;
}
.sheet-grip { width: 44px; height: 5px; border-radius: 999px; background: var(--surface-3); }

@media (min-width: 900px) {
  .stage {
    display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 30vw, 400px); gap: var(--gutter);
    height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h));
    padding: var(--gutter);
  }
  .stage-panel { border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding-top: 16px; overflow: hidden; }
  .sheet-handle { display: none; }
  .panel-head { order: 0; }
  .panel-scroll { order: 1; flex: 1; }
  .panel-actions { order: 2; border-top: 1px solid var(--border); }
  .panel-actions:empty { display: none; }
}

@media (max-width: 899.98px) {
  .view:has(> .stage) { min-height: 0; }
  .stage-board {
    height: calc(100vh - var(--header-h) - var(--sheet-peek));
    height: calc(100dvh - var(--header-h) - var(--sheet-peek));
    min-height: 240px;
    padding: 6px 8px 8px;
  }
  .stage-panel {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
    max-height: 82vh; max-height: 82dvh;
    border-radius: 18px 18px 0 0; border-top: 1px solid var(--border); box-shadow: var(--shadow-lg);
    padding-bottom: env(safe-area-inset-bottom);
    transform: translateY(max(0px, calc(100% - var(--sheet-peek))));
    transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  .stage-panel.is-expanded { transform: none; }
  .panel-actions > .btn { flex: 1 1 auto; }
}

/* ------------------------------------------------------------------ pitch board */

.board {
  position: relative; width: 100%; height: 100%; min-height: 0;
  display: flex; align-items: center; justify-content: center;
}
.board.is-measuring { position: absolute !important; inset: 0; }
.board-svg {
  display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%;
  overflow: visible; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--font);
  touch-action: manipulation; /* no double-tap zoom on the pitch, ever (watch, freeze, reveal) */
}
.board.is-drag-enabled .board-svg,
.board.has-targets .board-svg { touch-action: none; } /* a touch on the pitch is a drag or a tap, never a pan: no pointercancel eating taps */
.board.is-armed .board-svg { cursor: crosshair; }

.pitch-surround { fill: var(--grass-surround); }
.pitch-stripe--a { fill: var(--grass-a); }
.pitch-stripe--b { fill: var(--grass-b); }
.pitch-line { fill: none; stroke: var(--pitch-line); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.pitch-spot { fill: var(--pitch-line); }
.pitch-goal { fill: var(--pitch-goal); stroke: var(--pitch-line); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }

.board-heat, .board-overlays, .board-markers, .board-zone, .board-ghost, .board-overlay-labels, .board-marker-labels { pointer-events: none; }
.board-heatmap { image-rendering: auto; }

.ov-line { stroke: var(--overlay-line); stroke-width: 1.25px; vector-effect: non-scaling-stroke; stroke-dasharray: 5 5; }
.ov-zone14 { fill: rgb(95 226 255 / 0.14); stroke: rgb(95 226 255 / 0.75); stroke-width: 1.25px; vector-effect: non-scaling-stroke; }
.ov-offside { stroke: var(--offside); stroke-width: 2.5px; vector-effect: non-scaling-stroke; stroke-dasharray: 8 5; }
.ov-backline { stroke: var(--backline); stroke-width: 2.5px; vector-effect: non-scaling-stroke; stroke-dasharray: 3 4; }
.ov-label {
  font-size: calc(1.5px * var(--board-label-k, 1)); font-weight: 700; fill: rgb(255 255 255 / 0.9);
  paint-order: stroke; stroke: rgb(0 0 0 / 0.4); stroke-width: 0.35px; stroke-linejoin: round;
}
.ov-label--offside { fill: var(--offside); }
.ov-label--backline { fill: var(--backline); }
.ov-label--zone14 { fill: var(--ideal); }

.board-zone { fill: rgb(95 226 255 / 0.2); stroke: var(--ideal); stroke-width: 0.25; stroke-dasharray: 0.9 0.55; }
.board-ghost { transition: transform var(--move-ms) ease-out; }
.ghost-ring { fill: rgb(95 226 255 / 0.12); stroke: var(--ideal); stroke-width: 0.35; stroke-dasharray: 0.95 0.6; }
.ghost-dot { fill: var(--ideal); }

/* tokens */
.token { transition: transform var(--move-ms) cubic-bezier(0.2, 0.7, 0.3, 1), opacity 0.2s; }
.board.is-live .token, .board.no-anim .token, .token.is-dragging { transition: opacity 0.2s; }
.token:focus { outline: none; }
.token-body { stroke-width: 0.26; }
.team-us .token-body { fill: var(--kit-us); stroke: var(--kit-us-edge); }
.team-them .token-body { fill: var(--kit-them); stroke: var(--kit-them-edge); }
/* Shirt labels fill the token: tokens grow on small boards (board.js tokenScale), so these stay readable on a phone. */
.token-code { font-size: 1.45px; font-weight: 800; letter-spacing: -0.02px; pointer-events: none; }
.token-code--one { font-size: 1.65px; }
.token-code--long { font-size: 1.2px; letter-spacing: -0.06px; }
.team-us .token-code { fill: var(--kit-us-ink); }
.team-them .token-code { fill: var(--kit-them-ink); }
.board.no-labels .token-code { display: none; }

.token-glow { fill: var(--learner-glow); opacity: 0; }
.token-ring { fill: none; stroke: var(--cue); stroke-width: 0.38; opacity: 0; }
.token-carrier { fill: none; stroke: var(--ball); stroke-width: 0.2; stroke-dasharray: 0.55 0.45; opacity: 0; }
.token-focus { fill: none; stroke: var(--token-focus); stroke-width: 0.4; opacity: 0; }
.token-you { display: none; pointer-events: none; }
.token-you rect { fill: var(--learner); stroke: var(--learner-edge); stroke-width: 0.18; }
.token-you text { font-size: 1.15px; font-weight: 800; fill: var(--learner-ink); letter-spacing: 0.05px; }

.token.is-learner .token-body { fill: var(--learner); stroke: var(--learner-edge); stroke-width: 0.4; }
.token.is-learner .token-code { fill: var(--learner-ink); }
.token.is-learner .token-glow { opacity: 1; animation: glow 2.4s ease-in-out infinite; }
.token.is-learner .token-you { display: inline; }
.token.is-highlight .token-ring { opacity: 1; }
.token.is-carrier .token-carrier { opacity: 0.95; }
.token.is-dim { opacity: 0.35; }
.token.is-draggable { cursor: grab; }
.token.is-dragging, .board.is-dragging .board-svg { cursor: grabbing; }
.token.is-armed .token-ring { opacity: 1; stroke: var(--ideal); stroke-dasharray: 0.7 0.45; animation: spin 6s linear infinite; transform-box: fill-box; transform-origin: center; }
.token:focus-visible .token-focus { opacity: 1; }

.ball-body { fill: var(--ball); stroke: var(--ball-edge); stroke-width: 0.16; }
.ball-patch { fill: var(--ball-edge); }
.token-ball .token-ring { stroke: var(--cue); }

@keyframes glow { 50% { opacity: 0.35; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* markers: tone sets --mk */
.mk { --mk: var(--cue); }
.tone-fix, .tone-good { --mk: var(--ideal); }
.tone-cue { --mk: var(--cue); }
.tone-bad { --mk: var(--mk-bad); }
.tone-info { --mk: #ffffff; }
.mk-arrow line { stroke: var(--mk); stroke-width: 0.5; stroke-linecap: round; }
.mk-arrow polygon { fill: var(--mk); }
.mk-segment { stroke: var(--mk); stroke-width: 0.35; stroke-linecap: round; }
.mk-dashed { stroke-dasharray: 1 0.7; }
.mk-ring { fill: none; stroke: var(--mk); stroke-width: 0.4; }
.mk-pulse { animation: glow 1.6s ease-in-out infinite; }
.mk-label {
  font-size: calc(1.5px * var(--board-label-k, 1)); font-weight: 800; fill: var(--mk, #fff);
  paint-order: stroke; stroke: rgb(0 0 0 / 0.55); stroke-width: 0.4px; stroke-linejoin: round;
}
.mk-label.tone-fix, .mk-label.tone-good { --mk: var(--ideal); }
.mk-label.tone-cue { --mk: var(--cue); }
.mk-label.tone-bad { --mk: var(--mk-bad); }
.mk-label.tone-info { --mk: #ffffff; }

/* ------------------------------------------------------------------ home */

.home { max-width: 1120px; margin: 0 auto; padding: 28px var(--gutter) 64px; }
.hero { display: grid; gap: 8px; margin-bottom: 28px; max-width: 760px; }
.hero-kicker { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin: 0; }
.hero h1 { font-size: clamp(2rem, 6vw, 3.1rem); letter-spacing: -0.035em; margin: 0; }
.hero-lead { font-size: clamp(1.02rem, 2.4vw, 1.2rem); color: var(--text-muted); margin: 0; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }

.picker {
  display: grid; gap: 20px; align-items: start;
  background: var(--surface); border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px);
  padding: 20px; box-shadow: var(--shadow-sm); margin-bottom: 28px;
}
.picker-head h2 { font-size: 1.3rem; margin-bottom: 4px; }
.picker-head p { color: var(--text-muted); margin: 0; }
.picker-pitch { width: 100%; max-width: 300px; justify-self: center; }
.picker-pitch svg { display: block; width: 100%; height: auto; border-radius: 12px; overflow: hidden; }
.picker-pitch .token { cursor: pointer; transition: none; }
.picker-pitch .token:hover .token-ring { opacity: 1; stroke: var(--ideal); }
.picker-pitch .team-us.is-disabled { opacity: 0.55; cursor: default; }
.picker-groups { display: grid; gap: 14px; border: 0; margin: 0; padding: 0; min-width: 0; }
.picker-family h3 { font-size: 0.8rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 6px; }
.picker-family-desc { font-size: 0.875rem; color: var(--text-muted); margin: -2px 0 8px; }
.role-options { display: flex; flex-wrap: wrap; gap: 8px; }
.role-option { position: relative; }
.role-option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.role-option span {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 8px 14px 8px 8px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); font-weight: 600; font-size: 0.95rem;
}
.role-option b {
  display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 4px; border-radius: 999px;
  background: var(--kit-us); color: var(--kit-us-ink); border: 1px solid var(--kit-us-edge); font-size: 0.75rem;
}
.role-option input:checked + span { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.role-option input:checked + span b { background: var(--learner); color: var(--learner-ink); border-color: var(--learner-ink); }
.role-option input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.role-option:hover span { background: var(--surface-2); }
.picker-chosen { font-weight: 600; margin: 0; }

@media (min-width: 760px) {
  .picker { grid-template-columns: minmax(220px, 300px) 1fr; grid-template-rows: auto auto 1fr; grid-template-areas: "head head" "pitch groups" "pitch chosen"; column-gap: 32px; }
  .picker-head { grid-area: head; }
  .picker-pitch { grid-area: pitch; }
  .picker-chosen { grid-area: chosen; }
  .picker-groups { grid-area: groups; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
}

.modes-title { font-size: 1.3rem; }
.modes { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); margin: 0; padding: 0; list-style: none; }
.mode-card {
  position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: 6px; height: 100%;
  padding: 18px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  color: var(--text); text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.mode-card:hover { color: var(--text); transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--accent); }
.mode-card .icon { width: 28px; height: 28px; color: var(--accent); }
.mode-card h3 { font-size: 1.1rem; margin: 4px 0 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mode-card p { margin: 0; color: var(--text-muted); font-size: 0.95rem; }
.mode-card--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.mode-card--primary:hover { color: var(--accent-ink); }
.mode-card--primary .icon, .mode-card--primary p { color: var(--accent-ink); }
.mode-card--primary p { opacity: 0.9; }
.mode-extra { justify-self: start; margin-top: 6px; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); color: var(--text-muted); font-size: 0.8rem; font-weight: 700; }
.mode-card--primary .mode-extra { background: rgb(255 255 255 / 0.18); color: var(--accent-ink); }
.home-foot { margin-top: 36px; font-size: 0.875rem; color: var(--text-muted); }

/* ------------------------------------------------------------------ dev playground */

.dev-controls { display: grid; gap: 16px; }
.dev-group { display: grid; gap: 10px; border: 0; margin: 0; padding: 0; min-width: 0; }
.dev-group > legend { font-size: 0.8rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; padding: 0; margin-bottom: 6px; }
.dev-switches { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.dev-readout {
  font-family: var(--font-mono); font-size: 0.85rem; line-height: 1.45;
  background: var(--surface-2); border-radius: var(--radius-sm); padding: 10px 12px; margin: 0;
  white-space: pre-wrap; word-break: break-word;
}
.dev-note { font-size: 0.85rem; color: var(--text-muted); margin: 0; }
.dev-score { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px; flex-wrap: wrap; }
.dev-score-num { font-size: 2.2rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.dev-grade { font-weight: 800; padding: 2px 10px; border-radius: 999px; background: var(--surface-2); }
.dev-grade--S, .dev-grade--A { background: var(--accent-soft); color: var(--accent-strong); }
.dev-grade--D, .dev-grade--F { background: var(--bad-soft); color: var(--bad); }
.dev-headline { font-weight: 700; }
.dev-reasons { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 0.92rem; }
.dev-reasons .dev-fix, .dev-reasons .dev-cue, .dev-reasons .dev-praise { color: var(--text-muted); }

/* ------------------------------------------------------------------ motion */

/* (reduced motion is resolved once in JS: main.js applySettings writes data-reduced-motion from the setting OR the
   OS query, so the attribute selector alone is the rule; the doubled @media blocks went with the 2026-10-01 audit) */
:root[data-reduced-motion="true"] *, :root[data-reduced-motion="true"] *::before, :root[data-reduced-motion="true"] *::after {
  animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important; scroll-behavior: auto !important;
}

/* === reveal === (js/ui/reveal.js: live hot/cold readout and the two-beat feedback panel) */

:root {
  --rv-cold-bg: #dde8fa; --rv-cold-ink: #1c4a8e;
  --rv-warm-bg: #fbeecb; --rv-warm-ink: #6e4d00;
  --rv-hot-bg: #ffe1cc; --rv-hot-ink: #983700;
  --rv-fire-bg: #ff6b3d; --rv-fire-ink: #1d0b00; /* dark ink: white on this orange is only 2.8:1 */
  --rv-fix-ink: #086a80;
  --rv-star-off: #cfd8cf; --rv-star-on: #f2ae00;
  --rv-grade-ink: #10170f;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --rv-cold-bg: #182a45; --rv-cold-ink: #a4c6ff;
    --rv-warm-bg: #372d12; --rv-warm-ink: #f1cf78;
    --rv-hot-bg: #43250f; --rv-hot-ink: #ffb27d;
    --rv-fire-bg: #ff7a4d; --rv-fire-ink: #1d0b00;
    --rv-fix-ink: var(--ideal);
    --rv-star-off: #34443b; --rv-star-on: #ffc53d;
  }
}
:root[data-theme="dark"] {
  --rv-cold-bg: #182a45; --rv-cold-ink: #a4c6ff;
  --rv-warm-bg: #372d12; --rv-warm-ink: #f1cf78;
  --rv-hot-bg: #43250f; --rv-hot-ink: #ffb27d;
  --rv-fire-bg: #ff7a4d; --rv-fire-ink: #1d0b00;
  --rv-fix-ink: var(--ideal);
  --rv-star-off: #34443b; --rv-star-on: #ffc53d;
}

.rv { display: grid; gap: 10px; min-width: 0; }
.rv[data-state="empty"] { display: none; }
.rv-grade, .rv-badge { background: var(--grade, var(--surface-3)); color: var(--rv-grade-ink); font-weight: 900; }

/* live readout */
.rv-live { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rv-live[hidden] { display: none; }
.rv-live-score { display: flex; align-items: center; gap: 8px; flex: none; }
.rv-live-num { font-size: 2.1rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; min-width: 2.1ch; text-align: right; }
.rv-grade { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 9px; font-size: 1.05rem; }
.rv-live-main { flex: 1; min-width: 0; display: grid; gap: 5px; }
.rv-live-top { display: flex; align-items: center; gap: 10px; }
.rv-heat {
  flex: none; padding: 2px 9px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--rv-cold-bg); color: var(--rv-cold-ink);
  transition: background-color 0.2s, color 0.2s;
}
.rv-heat[data-heat="warm"] { background: var(--rv-warm-bg); color: var(--rv-warm-ink); }
.rv-heat[data-heat="hot"] { background: var(--rv-hot-bg); color: var(--rv-hot-ink); }
.rv-heat[data-heat="on-fire"] { background: var(--rv-fire-bg); color: var(--rv-fire-ink); }
.rv-meter { flex: 1; height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.rv-meter-fill { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--grade, var(--accent)); transition: width 0.12s ease-out, background-color 0.2s; }
.rv-live-line {
  margin: 0; font-size: 0.9rem; line-height: 1.35; color: var(--text-muted);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}

/* beat 1: the cue question */
.rv-cue {
  display: grid; gap: 8px; padding: 14px 16px; border-radius: var(--radius);
  background: color-mix(in srgb, var(--cue) 11%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--cue) 45%, var(--border));
  animation: rv-in 0.25s ease-out;
}
.rv-kicker { margin: 0; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.rv-question { margin: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.35; }

/* beat 2: the full reveal */
.rv-full { display: grid; gap: 14px; animation: rv-in 0.25s ease-out; }
.rv-result { display: flex; align-items: center; gap: 14px; }
.rv-badge-wrap { position: relative; flex: none; display: grid; }
.rv-badge {
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px;
  font-size: 2.2rem; line-height: 1;
  box-shadow: inset 0 -4px 0 rgb(0 0 0 / 0.14), var(--shadow-sm);
  animation: rv-pop 0.45s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}
.rv-result-text { min-width: 0; }
.rv-score { margin: 0; font-weight: 800; line-height: 1; display: flex; align-items: baseline; gap: 3px; }
.rv-num { font-size: 2.4rem; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.rv-outof { font-size: 1rem; color: var(--text-muted); }
.rv-headline { font-size: 1.2rem; margin: 6px 0 0; }
.rv-section { display: grid; gap: 8px; }
.rv-label { margin: 0; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.rv-reasons { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rv-reasons li { display: grid; gap: 8px; justify-items: start; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); }
.rv-reasons li.is-critical { background: var(--bad-soft); }
.rv-reasons p { margin: 0; }
.rv-flag {
  display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: 999px; vertical-align: 1px;
  background: var(--bad); color: var(--bad-ink); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
}
.rv-chip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 30px; max-width: 100%;
  padding: 3px 11px 3px 4px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  font-size: 0.84rem; font-weight: 650; line-height: 1.2; text-decoration: none;
}
.rv-chip b {
  flex: none; display: inline-grid; place-items: center; min-width: 28px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-strong); font-size: 0.74rem; font-weight: 800;
}
.rv-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.rv-chip:hover { border-color: var(--accent); color: var(--text); background: var(--surface-2); }
.rv-fix {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--ideal) 10%, var(--surface));
  border: 1px dashed color-mix(in srgb, var(--ideal) 65%, var(--border));
}
.rv-fix .icon { color: var(--rv-fix-ink); margin-top: 2px; }
.rv-fix p { margin: 0; }
.rv-praise { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rv-praise li { display: flex; gap: 8px; align-items: flex-start; }
.rv-praise .icon { color: var(--good); margin-top: 3px; }
.rv-note { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); border-left: 4px solid var(--accent); }
.rv-note strong { display: block; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 2px; }
.rv-note p { margin: 0; }
.rv-note--misconception { border-left-color: var(--bad); }
.rv-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.rv-actions .btn { flex: 1 1 auto; }

/* S grade: the badge shines and a small burst of confetti (JS skips the burst under reduced motion) */
.rv-full.is-celebrating .rv-badge { animation: rv-pop 0.55s cubic-bezier(0.2, 1.6, 0.4, 1) both, rv-shine 1.6s ease-out 0.3s both; }
.rv-flourish { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.rv-flourish i {
  position: absolute; left: -3px; top: -6px; width: 6px; height: 12px; border-radius: 2px; opacity: 0;
  background: #2fd07f; transform: rotate(var(--a)) translateY(0);
  animation: rv-burst 0.95s cubic-bezier(0.15, 0.7, 0.3, 1) forwards;
}
.rv-flourish i:nth-child(4n+2) { background: #f2ae00; width: 7px; height: 7px; border-radius: 50%; }
.rv-flourish i:nth-child(4n+3) { background: var(--ideal); }
.rv-flourish i:nth-child(4n+4) { background: var(--cue); height: 9px; }

/* stars (mastery) */
.rv-stars { display: inline-flex; gap: 1px; vertical-align: -3px; }
.rv-star path { fill: var(--rv-star-off); }
.rv-star.is-on path { fill: var(--rv-star-on); }

@keyframes rv-in { from { opacity: 0; transform: translateY(4px); } }
@keyframes rv-pop { from { transform: scale(0.4); opacity: 0; } }
@keyframes rv-shine { 0% { box-shadow: inset 0 -4px 0 rgb(0 0 0 / 0.14), 0 0 0 0 rgb(47 208 127 / 0.7); } 100% { box-shadow: inset 0 -4px 0 rgb(0 0 0 / 0.14), 0 0 0 18px rgb(47 208 127 / 0); } }
@keyframes rv-burst {
  0% { opacity: 1; transform: rotate(var(--a)) translateY(-10px) scale(0.5); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(-1 * var(--d))) rotate(140deg) scale(1); }
}

/* === explore === (js/ui/modes/explore.js) */

.ex .panel-head { display: grid; gap: 10px; padding-bottom: 4px; }
.ex-titlebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ex-title { margin: 0; font-size: 1.2rem; }
.ex-lead { margin: -4px 0 0; font-size: 0.92rem; color: var(--text-muted); }
.ex-lead[hidden] { display: none; }
.ex-streak {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 7px; border-radius: 999px;
  background: var(--surface-2); color: var(--text); font-weight: 800; font-size: 0.95rem; font-variant-numeric: tabular-nums;
}
.ex-streak-star path { fill: var(--rv-star-on, #f2ae00); }
.ex-streak-label { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.ex-streak.is-bump { animation: ex-bump 0.5s cubic-bezier(0.2, 1.6, 0.4, 1); }
.ex-status { display: grid; gap: 6px; }
.ex-job { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; margin: 0; font-size: 0.92rem; }
.ex-job-label { color: var(--text-muted); font-weight: 600; }
.ex-job strong { font-weight: 800; }
.ex-job-who { font-size: 0.8rem; color: var(--text-muted); }
.ex-job-who::before { content: "· "; }
.ex-change {
  display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 8px 10px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--cue) 12%, var(--surface)); font-size: 0.9rem; font-weight: 650;
}
.ex-change[hidden] { display: none; }
.ex-change .icon { color: var(--cue); margin-top: 2px; }
.ex-change.is-fresh { animation: ex-flash 0.9s ease-out; }

.ex-toolbar { display: grid; gap: 10px 12px; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
.ex-tool { min-width: 0; display: grid; gap: 4px; }
.ex-tool--possession, .ex-tool--ideal { grid-column: 1 / -1; }
.ex-tool--possession { order: -2; }
.ex-tool--ideal { order: -1; }
.ex-toolbar .field-label {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.ex-role-select { width: 100%; min-height: 40px; }
.ex-newball { width: 100%; min-height: 44px; padding: 8px 12px; font-size: 0.9rem; }
.ex-newball .icon { display: none; }
.ex-tool--ideal .switch { align-items: center; gap: 10px; }
.ex-tool--ideal .switch-label { font-size: 0.88rem; line-height: 1.25; }
.ex-reveal:has(.rv[data-state="empty"]) { display: none; }
.ex-reveal { margin-bottom: 16px; }

.ex-h2 { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 8px; }
.ex-why { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ex-why-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius-sm); background: var(--surface-2); }
.ex-why-mark { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-3); color: var(--text-muted); }
.ex-why-item.is-ok .ex-why-mark { background: var(--accent); color: var(--accent-ink); }
.ex-why-item.is-near .ex-why-mark { background: var(--rv-warm-bg, #fbeecb); color: var(--rv-warm-ink, #6e4d00); }
.ex-why-item.is-miss .ex-why-mark { background: var(--bad-soft); color: var(--bad); }
.ex-why-item.is-near .ex-why-mark .icon { transform: rotate(90deg); }
.ex-why-name { font-size: 0.92rem; font-weight: 600; }
.ex-why-chip { min-height: 26px; padding-right: 4px; }
.ex-why-chip span { display: none; }
.ex-why-empty { font-size: 0.9rem; color: var(--text-muted); }

.ex-overlays { border: 0; margin: 0 0 18px; padding: 0; min-width: 0; }
.ex-overlays > legend { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); padding: 0; margin-bottom: 8px; }
.ex-overlay-switches { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.ex-how ol { margin: 0 0 10px; padding-left: 20px; display: grid; gap: 6px; }
.ex-how p { font-size: 0.92rem; color: var(--text-muted); }
.ex-keys { font-size: 0.85rem; }

/* the hot/cold ring round your token: thicker when you are on fire */
.view--explore .board-markers .mk-ring.tone-good { stroke-width: 0.5; }
.view--explore .board-markers .mk-ring.tone-good.mk-pulse { stroke-width: 0.75; }
.view--explore .board-markers .mk-ring.tone-bad { stroke-dasharray: 0.8 0.6; }

@media (max-width: 899.98px) {
  .ex .panel-head { gap: 8px; }
  .ex-lead { font-size: 0.85rem; }
  .ex-toolbar { gap: 10px; }
  .ex-tool--possession, .ex-tool--ideal { grid-column: auto; order: 0; }
  .ex-toolbar .segmented-legend, .ex-toolbar .field-label, .ex-toolbar .switch-hint {
    position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .ex-toolbar .segmented-option span { padding: 9px 4px; font-size: 0.85rem; }
  .ex-tool--ideal .switch-label { font-size: 0.85rem; line-height: 1.25; }
  .ex-newball { padding: 8px 10px; font-size: 0.875rem; }
  .ex .rv-live-num { font-size: 1.8rem; }
}

@media (min-width: 900px) {
  .ex .panel-head { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
}
@media (max-width: 899.98px) {
  .ex .panel-head, .ex .sheet-handle, .ex .panel-actions { flex-shrink: 0; }
  .ex .stage-panel:not(.is-expanded) .panel-head { max-height: calc(45vh - 170px); max-height: calc(45dvh - 170px); overflow-y: auto; overscroll-behavior: contain; }
}

@keyframes ex-bump { 40% { transform: scale(1.25); } }
@keyframes ex-flash { from { background: color-mix(in srgb, var(--cue) 38%, var(--surface)); } }

/* === learn === (js/ui/modes/learn.js: tutorial, principle library, principle pages, reading list) */

.ln-h2 { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 8px; }
.ln-kicker { margin: 0; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent); }

/* tutorial panel */
.ln-tut .panel-head { display: grid; gap: 10px; padding-bottom: 4px; }
.ln-title { margin: 0; font-size: 1.3rem; }
.ln-title:focus { outline: none; }
.ln-text { margin: 0; font-size: 0.97rem; color: var(--text); }
.ln-meta { margin: 0; font-size: 0.9rem; color: var(--text-muted); }
.ln-steprow { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ln-dots { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ln-dot {
  position: relative; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 50%;
}
.ln-dot::before {
  content: ""; position: absolute; inset: 7px; border-radius: 50%;
  background: var(--surface-3); box-shadow: inset 0 0 0 1.5px var(--border); transition: transform 0.15s, background-color 0.15s;
}
.ln-dot.is-done::before { background: var(--accent); box-shadow: none; }
.ln-dot.is-current::before { inset: 5px; background: var(--learner); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--learner); }
.ln-dot:hover::before { transform: scale(1.2); }

.ln-task {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius);
  background: var(--surface-2); border: 1px solid var(--border);
  transition: background-color 0.2s, border-color 0.2s;
}
.ln-task:focus { outline: none; }
.ln-task:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ln-task-mark { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--learner); color: var(--learner-ink); }
.ln-task-body { min-width: 0; display: grid; gap: 4px; }
.ln-task-body p { margin: 0; }
.ln-task-label { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.ln-task-text { font-weight: 700; line-height: 1.35; }
.ln-task-msg { font-weight: 650; color: var(--bad); }
.ln-task-hint { font-size: 0.92rem; color: var(--text-muted); }
.ln-task[data-state="miss"] { border-color: color-mix(in srgb, var(--bad) 45%, var(--border)); }
.ln-task[data-state="done"] { background: var(--accent-soft); border-color: var(--accent); animation: ln-done 0.5s cubic-bezier(0.2, 1.4, 0.4, 1); }
.ln-task[data-state="done"] .ln-task-mark { background: var(--accent); color: var(--accent-ink); }
.ln-task[data-state="done"] .ln-task-text { font-weight: 650; }

.ln-taplist summary { cursor: pointer; font-weight: 650; font-size: 0.92rem; color: var(--accent); padding: 4px 0; }
.ln-taplist-options { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ln-tapopt { min-height: 40px; padding: 8px 14px; font-size: 0.9rem; }
.ln-tapopt.is-wrong { border-color: var(--bad); color: var(--bad); }

.ln-finish { display: flex; align-items: center; gap: 12px; }
.ln-finish-mark { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--surface-2); color: var(--text-muted); }
.ln-finish.is-done .ln-finish-mark { background: var(--accent); color: var(--accent-ink); animation: rv-pop 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
.ln-learned ul { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 6px; }
.ln-learned li { display: flex; gap: 8px; align-items: center; color: var(--text-muted); }
.ln-learned li.is-done { color: var(--text); }
.ln-learned li.is-done .icon { color: var(--good); }
.ln-plinks { margin: 4px 0 18px; }
.ln-plinks ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ln-keys { font-size: 0.85rem; color: var(--text-muted); }
.ln-more ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-weight: 650; }
.ln-tut .panel-feedback:empty { display: none; }
.ln-tut .panel-actions { align-items: center; }
.ln-backbtn .icon { transform: rotate(180deg); }
.ln-tut .panel-actions > .ln-next, .ln-tut .panel-actions > .ln-skip { margin-left: auto; }
.ln-tut .panel-actions > .btn:not(.ln-backbtn) { flex: 0 1 auto; padding-left: 16px; padding-right: 16px; }

/* Learn pages */
.ln-page { display: grid; gap: 20px; align-content: start; }
.ln-tabs ul { display: flex; gap: 4px; margin: 0; padding: 4px; list-style: none; background: var(--surface-2); border-radius: 999px; width: max-content; max-width: 100%; overflow-x: auto; }
.ln-tabs a {
  display: block; padding: 8px 16px; border-radius: 999px; white-space: nowrap;
  font-weight: 650; font-size: 0.92rem; color: var(--text-muted); text-decoration: none;
}
.ln-tabs a:hover { color: var(--text); }
.ln-tabs a[aria-current="page"] { background: var(--seg-on); color: var(--text); box-shadow: var(--shadow-sm); }
.ln-header h1 { font-size: clamp(1.7rem, 5vw, 2.4rem); letter-spacing: -0.03em; margin: 0 0 8px; }
.ln-lead { font-size: 1.05rem; color: var(--text-muted); max-width: 720px; margin: 0 0 6px; }
.ln-psection-note { font-size: 0.9rem; color: var(--text-muted); margin: 0 0 12px; }

.ln-filters {
  display: grid; gap: 12px; align-items: end;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  padding: 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.ln-searchbox { position: relative; grid-column: 1 / -1; }
.ln-search {
  width: 100%; min-height: 48px; padding: 10px 14px 10px 42px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 1rem;
}
.ln-search:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; background: var(--surface); }
.ln-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.ln-field .field-select { width: 100%; min-height: 44px; }
.ln-mine { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; font-size: 0.92rem; cursor: pointer; }
.ln-mine input { width: 20px; height: 20px; accent-color: var(--accent); flex: none; }
.ln-count { margin: -6px 0 -8px; font-weight: 700; color: var(--text-muted); }
.ln-results { display: grid; gap: 28px; }
.ln-pgrid { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.ln-pcard {
  display: grid; gap: 8px; align-content: start; height: 100%; padding: 16px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); color: var(--text); text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.ln-pcard:hover { color: var(--text); transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--accent); }
.ln-pcard.is-later { background: var(--surface-2); box-shadow: none; }
.ln-pcard-top { display: flex; align-items: center; gap: 8px; }
.ln-pcard-top .rv-stars { margin-left: auto; }
.ln-pid {
  display: inline-grid; place-items: center; min-width: 34px; height: 26px; padding: 0 8px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-strong); font-weight: 800; font-size: 0.82rem;
}
.ln-pid--lg { min-width: 46px; height: 34px; font-size: 1rem; }
.ln-pcard.is-later .ln-pid { background: var(--surface-3); color: var(--text-muted); }
.ln-pcat { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.ln-pname { font-weight: 750; font-size: 1.02rem; line-height: 1.3; }
.ln-psum { font-size: 0.92rem; color: var(--text-muted); }
.ln-pmeta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.ln-badge {
  display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px;
  background: var(--surface-2); color: var(--text-muted); font-size: 0.76rem; font-weight: 700;
}
.ln-pcard.is-later .ln-badge { background: var(--surface-3); }
.ln-badge--now { background: var(--accent-soft); color: var(--accent-strong); }
.ln-badge--later { background: var(--rv-warm-bg, #fbeecb); color: var(--rv-warm-ink, #6e4d00); }
.ln-badge--free { background: var(--accent-soft); color: var(--accent-strong); }
.ln-badge--paid { background: var(--rv-hot-bg, #ffe1cc); color: var(--rv-hot-ink, #983700); }
.ln-badge--plain { background: transparent; box-shadow: inset 0 0 0 1px var(--border); }
.ln-empty { padding: 32px 16px; text-align: center; color: var(--text-muted); border: 1px dashed var(--border); border-radius: var(--radius); }

/* principle page */
.ln-back { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; text-decoration: none; justify-self: start; min-height: 32px; }
.ln-back-icon { transform: rotate(180deg); }
.ln-dhead { display: grid; gap: 10px; max-width: 780px; }
.ln-dtags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ln-dtitle { font-size: clamp(1.6rem, 5vw, 2.3rem); letter-spacing: -0.03em; margin: 0; }
.ln-dstars { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 0.9rem; color: var(--text-muted); font-weight: 600; }
.ln-dstars .rv-stars svg { width: 20px; height: 20px; }
.ln-dsummary { font-size: 1.15rem; line-height: 1.5; margin: 0; }
.ln-dactions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.ln-dgrid { display: grid; gap: 16px; }
.ln-dmain, .ln-dside { display: grid; gap: 16px; align-content: start; }
.ln-block { padding: 16px 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.ln-block p { margin: 0; }
.ln-block > .ln-h2 { margin-bottom: 6px; }
.ln-block--mistake { border-left: 4px solid var(--bad); }
.ln-block--rule { background: var(--surface-2); }
.ln-details summary { cursor: pointer; font-weight: 700; }
.ln-details p { margin-top: 8px; }
.ln-rules, .ln-families, .ln-modlinks, .ln-extlinks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ln-rules li { display: flex; gap: 8px; align-items: center; }
.ln-rules .icon { color: var(--good); }
.ln-families { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ln-families li { padding: 2px 10px; border-radius: 999px; background: var(--surface-2); font-size: 0.85rem; font-weight: 600; }
.ln-modlinks a, .ln-extlinks a { font-weight: 650; }
.ln-ext { display: inline; vertical-align: -2px; margin-left: 4px; transform: rotate(-45deg); }
.ln-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.ln-pager a {
  display: grid; gap: 2px; padding: 12px 16px; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--surface); text-decoration: none; color: var(--text); font-weight: 650; font-size: 0.95rem;
}
.ln-pager a:hover { border-color: var(--accent); color: var(--text); }
.ln-pager small { font-size: 0.75rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.ln-pager-next { text-align: right; }

@media (min-width: 860px) {
  .ln-dgrid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
}

/* reading list */
.ln-rsection { display: grid; gap: 4px; }
.ln-rgrid { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.ln-rcard { display: grid; gap: 8px; align-content: start; padding: 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.ln-rcard.is-start { border-color: var(--accent); box-shadow: inset 0 3px 0 var(--accent), var(--shadow-sm); }
.ln-rtitle { font-size: 1.02rem; margin: 0; line-height: 1.35; }
.ln-rtitle a { text-decoration: none; }
.ln-rtitle a:hover { text-decoration: underline; }
.ln-rbadges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.ln-rwhy { margin: 0; font-size: 0.93rem; color: var(--text-muted); }
.ln-rnote { margin: 0; font-size: 0.85rem; color: var(--text-muted); font-style: italic; }

@media (max-width: 899.98px) {
  .ln-tut .panel-head { gap: 8px; }
  .ln-title { font-size: 1.15rem; }
  .ln-text { font-size: 0.92rem; }
  .ln-task { padding: 10px 12px; gap: 10px; }
  .ln-task-mark { width: 28px; height: 28px; }
  /* What to do comes first on a phone: the step's explanation follows the task box (and the tap list), so the
     collapsed sheet always shows the task, its "not quite" message and the hint. */
  .ln-tut .ln-explain { order: 1; }
}
/* The icon-only Back button keeps its size instead of stretching across the action row. */
.ln-tut .panel-actions > .ln-backbtn { flex: 0 0 auto; }
@media (max-width: 520px) {
  .ln-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; }
  .ln-mine { grid-column: 1 / -1; min-height: 36px; }
  .ln-pager { grid-template-columns: 1fr; }
  .ln-pager-next { text-align: left; }
}

/* keep the actions reachable: a tall head scrolls instead of pushing them out of the panel or the collapsed sheet */
@media (min-width: 900px) {
  .ln-tut .panel-head { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 8px; }
}
@media (max-width: 899.98px) {
  .ln-tut .panel-head, .ln-tut .sheet-handle, .ln-tut .panel-actions { flex-shrink: 0; }
  .ln-tut .stage-panel:not(.is-expanded) .panel-head {
    max-height: calc(45vh - 46px - var(--ln-actions-h, 68px)); max-height: calc(45dvh - 46px - var(--ln-actions-h, 68px));
    overflow-y: auto; overscroll-behavior: contain;
  }
}

@keyframes ln-done { 40% { transform: scale(1.02); } }

/* === drill === (js/ui/modes/drill.js: freeze-frame drills and the session summary) */

.view--drill .panel-head { display: grid; gap: 10px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 6px; }
.view--drill .stage-panel .panel-head { flex: 0 1 auto; }
@media (max-width: 899.98px) {
  .view--drill .stage-panel:not(.is-expanded) .panel-head { max-height: 30dvh; }
  .view--drill .panel-head { gap: 6px; }
  .view--drill .panel-actions { padding-top: 8px; padding-bottom: 10px; }
  .dr-title, .dr-question { font-size: 1.05rem; }
  .dr-brief, .dr-hint { font-size: 0.9rem; }
  .dr-dot { width: 14px; height: 14px; border-radius: 5px; font-size: 0.56rem; }
  .dr-conf-btn { min-height: 34px; padding: 5px 12px; }
}

.dr-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; }
.dr-where { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); min-width: 0; }
.dr-dots { display: flex; gap: 5px; margin: 0; padding: 0; list-style: none; }
.dr-dot {
  display: grid; place-items: center; width: 18px; height: 18px; border-radius: 6px;
  background: var(--surface-3); color: var(--rv-grade-ink, #10170f); font-size: 0.66rem; font-weight: 900; line-height: 1;
}
.dr-dot.is-done { background: var(--grade); animation: dr-pop 0.4s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
.dr-dot.is-current { box-shadow: inset 0 0 0 2px var(--accent); background: var(--surface); }
.dr-streak {
  display: inline-flex; align-items: center; gap: 3px; margin-left: auto; padding: 2px 9px 2px 6px; border-radius: 999px;
  background: color-mix(in srgb, #ff7a1a 16%, var(--surface)); color: var(--text); font-weight: 800; font-size: 0.9rem; font-variant-numeric: tabular-nums;
  animation: dr-pop 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
.dr-flame { flex: none; }
.dr-flame path { fill: #ff7a1a; }
.dr-flame .dr-flame-core { fill: #ffc53d; }

.dr-title { margin: 0; font-size: 1.25rem; }
.dr-lead { display: grid; gap: 8px; }
.dr-lead:empty, .dr-after:empty { display: none; }
.dr-brief { margin: 0; color: var(--text-muted); }
.dr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dr-role {
  display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 3px 11px 3px 4px; border-radius: 999px;
  background: color-mix(in srgb, var(--learner) 16%, var(--surface)); border: 1px solid color-mix(in srgb, var(--learner) 55%, var(--border));
  font-size: 0.84rem; font-weight: 650;
}
.dr-role b {
  display: inline-grid; place-items: center; min-width: 28px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--learner); color: var(--learner-ink); font-size: 0.74rem; font-weight: 800;
}
.dr-note { margin: 0; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--surface-2); font-size: 0.9rem; }
.dr-note--sure { background: color-mix(in srgb, var(--cue) 12%, var(--surface)); font-weight: 650; }

.dr-progress { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.dr-progress-fill { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent); }

.dr-question { margin: 0; font-size: 1.2rem; font-weight: 750; line-height: 1.3; }
.dr-hint { margin: 0; font-size: 0.9rem; color: var(--text-muted); }

.dr-conf-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.dr-conf-label { font-size: 0.85rem; font-weight: 650; color: var(--text-muted); }
.dr-conf { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; background: var(--surface-2); }
.dr-conf-btn {
  min-height: 38px; padding: 6px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--text-muted);
  font-weight: 650; font-size: 0.9rem; cursor: pointer;
}
.dr-conf-btn:hover { color: var(--text); }
.dr-conf-btn.is-on { background: var(--seg-on); color: var(--text); box-shadow: var(--shadow-sm); }
.dr-speed { min-width: 110px; }
.dr-speed .segmented-option span { padding: 9px 10px; }
.panel-actions .dr-main { flex: 1 1 140px; }

.dr-after { display: grid; gap: 8px; }
.dr-legend { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 0.82rem; color: var(--text-muted); }
.dr-legend-ring { flex: none; width: 14px; height: 14px; margin-top: 2px; border-radius: 50%; border: 2px dashed var(--rv-fix-ink, var(--ideal)); }

.dr-body { display: grid; gap: 16px; padding-top: 4px; }
.dr-keys { margin: 0; font-size: 0.85rem; color: var(--text-muted); }
.dr-h { margin: 0 0 8px; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.dr-switch-list { display: grid; gap: 6px; }
.dr-switch {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 12px 6px 6px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); color: var(--text); text-decoration: none; font-weight: 600; font-size: 0.92rem;
}
.dr-switch b { display: inline-grid; place-items: center; min-width: 34px; height: 28px; border-radius: 8px; background: var(--surface-2); font-size: 0.8rem; }
.dr-switch:hover { background: var(--surface-2); color: var(--text); }
.dr-switch.is-current { border-color: var(--accent); background: var(--accent-soft); }

/* the brief's "you" ring on the pitch is calmer than a cue */
.view--drill .board-markers .mk-ring.tone-info { stroke: var(--learner); stroke-width: 0.35; }

/* summary */
.dr-summary { max-width: 760px; display: grid; gap: 20px; }
.dr-sum-head h1 { margin: 0; font-size: clamp(1.7rem, 5vw, 2.3rem); letter-spacing: -0.03em; }
.dr-sum-kicker { margin: 0 0 4px; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.dr-badge {
  display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px;
  background: var(--grade, var(--surface-3)); color: var(--rv-grade-ink, #10170f); font-weight: 900; font-size: 1.05rem;
  box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.14);
  animation: dr-pop 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) both; animation-delay: calc(var(--i, 0) * 110ms + 150ms);
}
.dr-badge--big { width: 88px; height: 88px; border-radius: 24px; font-size: 3rem; box-shadow: inset 0 -5px 0 rgb(0 0 0 / 0.14), var(--shadow); animation-delay: 0s; }
.dr-sum-score { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 18px; }
.dr-sum-label { margin: 0; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.dr-sum-num { margin: 2px 0 0; font-weight: 850; line-height: 1; display: flex; align-items: baseline; gap: 4px; }
.dr-sum-num span:first-child { font-size: 2.8rem; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.dr-sum-outof { font-size: 1.05rem; color: var(--text-muted); }
.dr-sum-verdict { margin: 6px 0 0; font-weight: 700; font-size: 1.1rem; }
.dr-sum-streaks { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.dr-sum-streaks:empty { display: none; }
.dr-sum-streak { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 750; }
.dr-sum-streak .dr-flame { animation: dr-flicker 1.4s ease-in-out infinite alternate; transform-origin: 50% 90%; }
.dr-sum-streak--days .icon { color: var(--good); }
.dr-sum-run { margin: 0; color: var(--text-muted); font-weight: 600; }
.dr-sum-section h2 { font-size: 1.05rem; margin-bottom: 10px; }
.dr-sum-reps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dr-sum-reps li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 8px 14px 8px 8px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border);
}
.dr-sum-rep-title { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-sum-rep-score { font-weight: 800; font-variant-numeric: tabular-nums; }
.dr-sum-ps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dr-sum-p {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px;
  padding: 10px 14px; border-radius: var(--radius-sm); background: var(--surface-2);
}
.dr-sum-p-name { font-weight: 600; min-width: 0; }
.dr-sum-p-name b { color: var(--accent-strong); margin-right: 2px; }
.dr-sum-p-stars { display: inline-flex; align-items: center; gap: 8px; }
.dr-arrow { color: var(--text-muted); }
.dr-newstar {
  padding: 2px 9px; border-radius: 999px; background: var(--rv-star-on, #f2ae00); color: #1d1400; font-size: 0.72rem; font-weight: 850;
  letter-spacing: 0.04em; text-transform: uppercase; animation: dr-pop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) 0.6s both;
}
.dr-sum-p.is-up { background: color-mix(in srgb, var(--rv-star-on, #f2ae00) 12%, var(--surface)); }
.dr-sum-cta { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 520px) {
  .dr-sum-cta .btn { flex: 1 1 100%; }
  .dr-badge--big { width: 72px; height: 72px; font-size: 2.4rem; }
}

@keyframes dr-pop { from { transform: scale(0.3); opacity: 0; } }
@keyframes dr-flicker { from { transform: scale(1) rotate(-3deg); } to { transform: scale(1.12) rotate(3deg); } }
:root[data-reduced-motion="true"] .dr-summary *, :root[data-reduced-motion="true"] .dr-kicker * { animation-delay: 0s !important; }

/* === end author === */

/* === credits === */
/* Credits, licences and privacy (#/credits). */

.credits { max-width: 980px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
.cr-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; max-width: 720px; }
.cr-kicker { margin: 0; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.cr-hero h1 { margin: 0; font-size: clamp(1.9rem, 5.5vw, 2.8rem); letter-spacing: -0.03em; }
.cr-lead { margin: 0; font-size: clamp(1rem, 2.3vw, 1.15rem); color: var(--text-muted); }

.cr-privacy {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 22px;
  border-radius: calc(var(--radius) + 4px); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  background: linear-gradient(135deg, var(--accent-soft), var(--surface) 70%);
  box-shadow: var(--shadow-sm);
}
.cr-privacy h2 { margin: 0; font-size: 1.3rem; }
.cr-promises { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px 28px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.cr-promises li { display: flex; gap: 12px; align-items: flex-start; }
.cr-promises strong { display: block; margin-bottom: 2px; }
.cr-promises p { margin: 0; color: var(--text-muted); font-size: 0.95rem; }
.cr-tick { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); }
.cr-saving { margin: 0; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); font-size: 0.9rem; font-weight: 600; justify-self: start; }
.cr-saving.is-off { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 40%, transparent); }

.cr-section { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.cr-section > h2 { margin: 0; font-size: 1.3rem; }
.cr-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); grid-auto-flow: dense; align-items: stretch; }
.cr-card--wide { grid-column: 1 / -1; }
.cr-notes { display: grid; gap: 10px 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.cr-card {
  display: flex; flex-direction: column; gap: 10px; padding: 18px; min-width: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.cr-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.cr-card-head h3 { margin: 0; font-size: 1.05rem; }
.cr-licence { flex: none; padding: 2px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.03em; }
.cr-what { margin: 0; }
.cr-copy { margin: 0; font-size: 0.85rem; color: var(--text-muted); font-family: var(--font-mono); overflow-wrap: anywhere; }
.cr-attribution { margin: 0; padding: 8px 12px; border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.cr-attribution p { margin: 0; font-size: 0.875rem; overflow-wrap: anywhere; }
.cr-note { margin: 0; font-size: 0.9rem; color: var(--text-muted); }
.cr-links { margin: auto 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 0.92rem; font-weight: 600; }
.cr-links a, .cr-source-group a { overflow-wrap: anywhere; }
.cr-text summary { cursor: pointer; font-size: 0.875rem; font-weight: 700; color: var(--text-muted); min-height: 32px; display: flex; align-items: center; }
.cr-text pre {
  margin: 8px 0 0; max-height: 260px; overflow: auto; padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--surface-2); font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.5; white-space: pre-wrap;
}

.cr-research-lead { margin: 0; max-width: 720px; color: var(--text-muted); }
.cr-sources { display: grid; gap: 18px 32px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); max-width: 900px; }
.cr-source-group h3 { margin: 0 0 6px; font-size: 0.8rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.cr-source-group ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 0.95rem; }
.cr-cta { margin: 4px 0 0; }

.cr-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding-top: 18px; border-top: 1px solid var(--border); color: var(--text-muted); }
.cr-foot p { margin: 0; }
/* === end credits === */

/* === home modules === (js/ui/modes/home.js: your path, continue, learn links) */

.hm-path { margin-bottom: 32px; }
.hm-path-head p { color: var(--text-muted); margin: -2px 0 14px; }
.hm-modules { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); counter-reset: none; }
.hm-card {
  position: relative; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 6px; height: 100%;
  padding: 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  color: var(--text); text-decoration: none; transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.hm-card:hover { color: var(--text); transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--accent); }
.hm-card.is-next { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), var(--shadow); }
.hm-card.is-locked { background: var(--surface-2); box-shadow: none; }
.hm-card.is-locked .hm-title, .hm-card.is-locked .hm-desc { color: var(--text-muted); }
.hm-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hm-num { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent); }
.hm-card.is-locked .hm-num { color: var(--text-muted); }
.hm-status {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px;
  font-size: 0.74rem; font-weight: 800; background: var(--surface-2); color: var(--text-muted);
}
.hm-status--done { background: var(--accent); color: var(--accent-ink); }
.hm-status--next { background: var(--learner); color: var(--learner-ink); }
.hm-status--open { background: var(--accent-soft); color: var(--accent-strong); }
.hm-status--locked { padding: 3px; background: var(--surface-3); }
.hm-title { font-size: 1.1rem; font-weight: 800; line-height: 1.25; }
.hm-sub { font-size: 0.85rem; font-weight: 650; color: var(--text-muted); }
.hm-desc { font-size: 0.92rem; color: var(--text-muted); margin-top: 2px; }
.hm-foot { display: grid; gap: 8px; margin-top: 8px; }
.hm-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; font-size: 0.82rem; font-weight: 700; color: var(--text-muted); }
.hm-stars { display: inline-flex; align-items: center; gap: 4px; }
.hm-star path { fill: var(--rv-star-on, #f2ae00); }
.hm-bar { display: block; height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.hm-bar span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width 0.4s ease-out; }
.hm-lock { font-size: 0.85rem; font-weight: 600; color: var(--text-muted); padding-top: 8px; border-top: 1px dashed var(--border); margin-top: 4px; }

.hm-learn { margin-top: 32px; }
.hm-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.hm-link {
  display: flex; align-items: center; gap: 14px; height: 100%; padding: 16px 18px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border); color: var(--text); text-decoration: none;
  transition: border-color 0.15s, background-color 0.15s;
}
.hm-link:hover { color: var(--text); border-color: var(--accent); background: var(--surface-2); }
.hm-link > .icon:first-child { color: var(--accent); }
.hm-link > span { display: grid; gap: 2px; flex: 1; min-width: 0; }
.hm-link strong { font-size: 1rem; }
.hm-link span span { font-size: 0.9rem; color: var(--text-muted); }
.hm-link-arrow { color: var(--text-muted); }

/* === live === (js/ui/modes/live.js: continuous play, the live meter, the end screen) */

.view--live .panel-head { display: grid; gap: 10px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 6px; }
.view--live .stage-panel .panel-head { flex: 0 1 auto; }
@media (max-width: 899.98px) {
  .view--live .stage-panel:not(.is-expanded) .panel-head { max-height: 30dvh; }
  .view--live .panel-head { gap: 6px; }
  .view--live .panel-actions { padding-top: 8px; padding-bottom: 10px; }
  .lv-title { font-size: 1.05rem; }
  .lv-lead { font-size: 0.9rem; }
}
.lv-top, .lv-main, .lv-after { display: grid; gap: 8px; min-width: 0; }
.lv-main:empty, .lv-after:empty { display: none; }
.lv-kicker { margin: 0; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.lv-title { margin: 0; font-size: 1.25rem; }
.lv-lead { margin: 0; color: var(--text-muted); }
.lv-best { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 650; font-size: 0.92rem; }
.lv-best .icon { color: var(--accent); }
.lv-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lv-opts .segmented-option span { padding: 7px 4px; }
.lv-keys { margin: 0; font-size: 0.85rem; color: var(--text-muted); }
.lv-body { display: grid; gap: 8px; padding-top: 4px; }
.panel-actions .lv-main-btn { flex: 1 1 140px; }
.lv-note { margin: 0; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--surface-2); font-size: 0.9rem; }

/* the heads-up display while playing */
.lv-hud { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.lv-avg { display: inline-flex; align-items: center; gap: 8px; }
.lv-avg-label { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.lv-avg-num {
  display: inline-grid; place-items: center; min-width: 42px; height: 30px; padding: 0 8px; border-radius: 9px;
  background: var(--grade, var(--surface-3)); color: var(--rv-grade-ink, #10170f); font-weight: 900; font-variant-numeric: tabular-nums;
  transition: background-color 0.3s;
}
.lv-state { font-size: 0.8rem; font-weight: 700; color: var(--text-muted); min-width: 0; }
.lv-tag { padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--ideal) 22%, var(--surface)); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.lv-left { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; }
.lv-time { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.lv-time-fill { display: block; height: 100%; width: 0; background: var(--accent); border-radius: inherit; }

/* 3, 2, 1 over the pitch */
.lv-countdown { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 2; }
.lv-countdown[hidden] { display: none; }
.lv-count {
  display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%;
  background: rgb(0 0 0 / 0.45); color: #fff; font-size: 3.4rem; font-weight: 900;
  animation: lv-count 0.8s ease-out both;
}
@keyframes lv-count { from { transform: scale(1.6); opacity: 0; } 30% { opacity: 1; } to { transform: scale(0.9); opacity: 0.9; } }

/* the hot/cold ring round your token: solid and thick when you are in place, dashed when you are not */
.view--live .board-markers .mk-ring.tone-good { stroke-width: 0.55; }
.view--live .board-markers .mk-ring.tone-good.mk-pulse { stroke-width: 0.8; }
.view--live .board-markers .mk-ring.tone-bad { stroke-dasharray: 0.8 0.6; stroke-width: 0.5; }
.view--live .board-markers .mk-ring.tone-info { stroke: rgb(255 255 255 / 0.7); stroke-dasharray: 0.4 0.5; }

/* end screen */
.lv-result { display: flex; align-items: center; gap: 14px; }
.lv-badge {
  display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 18px;
  background: var(--grade); color: var(--rv-grade-ink, #10170f); font-size: 2.2rem; font-weight: 900;
  box-shadow: inset 0 -4px 0 rgb(0 0 0 / 0.14), var(--shadow-sm);
  animation: dr-pop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
.lv-result-label { margin: 0; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.lv-result-num { margin: 2px 0 0; display: flex; align-items: baseline; gap: 3px; font-weight: 850; line-height: 1; }
.lv-result-num span:first-child { font-size: 2.4rem; letter-spacing: -0.02em; }
.lv-outof { color: var(--text-muted); font-size: 1rem; }
.lv-verdict { margin: 0; font-weight: 700; }
.lv-pb {
  display: inline-flex; align-items: center; gap: 6px; justify-self: start; margin: 0; padding: 4px 12px; border-radius: 999px;
  background: var(--rv-star-on, #f2ae00); color: #1d1400; font-weight: 850; animation: dr-pop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) 0.3s both;
}
.lv-stats { margin: 0; padding-left: 18px; display: grid; gap: 2px; font-size: 0.92rem; }
.lv-h, .panel-head .lv-h { margin: 0 0 6px; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.lv-chart { margin: 0; }
.lv-chart-box { position: relative; }
.lv-chart-svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.lv-grid { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lv-axis { stroke: var(--text-muted); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0.6; }
.lv-tick { font-size: 10px; fill: var(--text-muted); font-variant-numeric: tabular-nums; }
.lv-grace { fill: var(--surface-3); opacity: 0.55; }
.lv-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.lv-mark { fill: var(--text); stroke: var(--surface); stroke-width: 2; vector-effect: non-scaling-stroke; }
.lv-mark-n { font-size: 7px; font-weight: 900; fill: var(--surface); pointer-events: none; }
.lv-cross { stroke: var(--text-muted); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lv-cross-dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; vector-effect: non-scaling-stroke; }
.lv-tip {
  position: absolute; top: -6px; transform: translate(-50%, -100%); padding: 3px 8px; border-radius: 8px; white-space: nowrap;
  background: var(--text); color: var(--bg); font-size: 0.8rem; font-weight: 700; pointer-events: none;
}
.lv-tip[hidden] { display: none; }
.lv-table { margin-top: 6px; font-size: 0.85rem; }
.lv-table summary { cursor: pointer; color: var(--accent); font-weight: 650; }
.lv-table table { border-collapse: collapse; margin-top: 6px; }
.lv-table th, .lv-table td { padding: 2px 12px 2px 0; text-align: left; font-variant-numeric: tabular-nums; }
.lv-worst ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lv-worst li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 6px 6px 10px; border-radius: var(--radius-sm); background: var(--surface-2); }
.lv-worst-n { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--text); color: var(--surface); font-size: 0.75rem; font-weight: 900; }
.lv-worst-text { font-weight: 650; font-variant-numeric: tabular-nums; }
.lv-worst-btn { min-height: 40px; padding: 6px 12px; font-size: 0.88rem; }
.lv-legend { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 0.82rem; color: var(--text-muted); }
.lv-legend-ring { flex: none; width: 14px; height: 14px; margin-top: 2px; border-radius: 50%; border: 2px dashed var(--rv-fix-ink, var(--ideal)); }

/* === progress === (js/ui/modes/progress.js: level, stars, history, data controls) */

.pg { max-width: 980px; display: grid; gap: 24px; }
.pg-head h1 { margin: 0 0 8px; font-size: clamp(1.7rem, 5vw, 2.3rem); letter-spacing: -0.03em; }
.pg-role { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 8px; }
.pg-role-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 3px 12px 3px 4px; border-radius: 999px;
  background: color-mix(in srgb, var(--learner) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--learner) 50%, var(--border)); font-weight: 650;
}
.pg-role-chip b { display: inline-grid; place-items: center; min-width: 30px; height: 26px; padding: 0 6px; border-radius: 999px; background: var(--learner); color: var(--learner-ink); font-size: 0.78rem; }
.pg-privacy { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--text-muted); font-size: 0.92rem; }
.pg-privacy .icon { color: var(--good); margin-top: 3px; }
.pg-warn { margin: 8px 0 0; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--bad-soft); color: var(--text); font-size: 0.9rem; }
.pg-empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.pg-empty p { margin: 0; font-weight: 600; }
.pg-muted { color: var(--text-muted); }
.pg-lead { margin: 0 0 12px; color: var(--text-muted); font-size: 0.92rem; }

.pg-tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.pg-tile { display: grid; align-content: start; gap: 4px; padding: 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); min-width: 0; }
.pg-tile-label { margin: 0; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.pg-tile-value { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1.9rem; font-weight: 800; line-height: 1.1; }
.pg-tile-extra { margin: 0; font-size: 0.85rem; color: var(--text-muted); }
.pg-tile--level { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.pg-level-n { display: inline-grid; place-items: center; min-width: 44px; height: 44px; border-radius: 12px; background: var(--accent); color: var(--accent-ink); font-size: 1.5rem; }
.pg-level-name { font-size: 1.15rem; font-weight: 800; }
.pg-meter { height: 8px; margin-top: 6px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 18%, var(--surface)); overflow: hidden; }
.pg-meter span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.pg-tile--streak .dr-flame { flex: none; }
.pg-tile-value .pg-muted { font-size: 1rem; font-weight: 650; }
.pg-badge {
  display: inline-grid; place-items: center; flex: none; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 9px;
  background: var(--grade, var(--surface-3)); color: var(--rv-grade-ink, #10170f); font-size: 0.95rem; font-weight: 900;
}

.pg-section h2 { font-size: 1.2rem; margin-bottom: 12px; }
.pg-section-body { display: grid; gap: 12px; }

.pg-curve-wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; max-width: 680px; }
.pg-ticks { position: relative; width: 20px; height: 120px; }
.pg-tick { position: absolute; right: 0; transform: translateY(-50%); font-size: 0.72rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pg-curve-box { position: relative; height: 120px; padding-right: 34px; }
.pg-curve { display: block; width: 100%; height: 100%; overflow: visible; }
.pg-grid { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pg-base { stroke: var(--text-muted); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0.5; }
.pg-dot { stroke: color-mix(in srgb, var(--accent) 40%, var(--surface)); stroke-width: 7; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pg-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pg-end { stroke: var(--accent); stroke-width: 10; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pg-curve-end { position: absolute; right: 0; transform: translateY(-50%); font-weight: 800; font-size: 0.95rem; }
.pg-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: 0.85rem; color: var(--text-muted); }
.pg-key { display: inline-block; flex: none; }
.pg-key--dot { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 40%, var(--surface)); }
.pg-key--line { width: 16px; height: 2px; border-radius: 2px; background: var(--accent); margin-left: 8px; }

.pg-module { padding: 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); display: grid; gap: 12px; }
.pg-module.is-finished { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.pg-module-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pg-module-head h3 { margin: 0 0 2px; font-size: 1.05rem; }
.pg-module-head h3 b { color: var(--accent-strong); }
.pg-module-head p { margin: 0; font-size: 0.88rem; }
.pg-status { flex: none; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); font-size: 0.75rem; font-weight: 800; color: var(--text-muted); }
.pg-status.is-finished { background: var(--accent); color: var(--accent-ink); }
.pg-module-bar { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.pg-module-bar span { display: block; height: 100%; border-radius: inherit; background: var(--rv-star-on, #f2ae00); }
.pg-principles { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pg-principles li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 4px 14px;
  padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface-2);
}
.pg-p-name { font-weight: 600; font-size: 0.92rem; min-width: 0; }
.pg-p-name b { color: var(--accent-strong); margin-right: 2px; }
.pg-p-meta { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8rem; }
.pg-p-links { display: inline-flex; gap: 12px; font-size: 0.88rem; font-weight: 650; }
.pg-p-links a { display: inline-flex; align-items: center; min-height: 32px; }
.pg-p-links .pg-muted { font-size: 0.8rem; font-weight: 500; }
.pg-module-cta { display: flex; }

.pg-roles { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pg-roles li { display: grid; grid-template-columns: minmax(150px, 220px) minmax(80px, 1fr); align-items: center; gap: 4px 14px; }
.pg-role-name { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; }
.pg-role-name b { display: inline-grid; place-items: center; min-width: 30px; height: 24px; padding: 0 5px; border-radius: 999px; background: var(--kit-us); color: var(--kit-us-ink); border: 1px solid var(--kit-us-edge); font-size: 0.72rem; }
.pg-role-bar { height: 10px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.pg-role-bar span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.pg-role-line { grid-column: 2; font-size: 0.82rem; }

.pg-history { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pg-history li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); }
.pg-h-main { display: grid; min-width: 0; }
.pg-h-main > a, .pg-h-main > span:first-child { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-h-meta { font-size: 0.8rem; }
.pg-h-score { font-weight: 800; font-variant-numeric: tabular-nums; }

.pg-data { display: flex; flex-wrap: wrap; gap: 10px; }
.pg-reset { color: var(--bad); }
.pg-reset:hover { color: var(--bad); background: var(--bad-soft); }
.pg-reset-confirm { background: var(--bad); color: var(--bad-ink); }
.pg-reset-confirm:hover { background: var(--bad); color: var(--bad-ink); filter: brightness(0.95); }

@media (max-width: 560px) {
  .pg-principles li { grid-template-columns: minmax(0, 1fr) auto; }
  .pg-p-links { grid-column: 1 / -1; }
  .pg-roles li { grid-template-columns: 1fr; }
  .pg-role-line { grid-column: 1; }
  .pg-tile-value { font-size: 1.6rem; }
}

/* === rewards === (js/ui/celebrate.js, js/ui/modes/trophies.js: the level pill, stars and XP, the player card,
   the celebrations and the level-up screen, the session card and the trophy room). Visual first: big numbers,
   stars, icons and short labels. Frames: bronze, silver and gold sticker cards. */

:root {
  --rw-bronze: #c27a3e;
  --rw-silver: #98a4b4;
  --rw-gold: #e0a800;
  --rw-glow: rgb(255 197 61 / 0.55);
}

/* header: the level pill (a 44 px tap target round a compact pill) */
.rw-pill { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; color: var(--text); text-decoration: none; }
.rw-pill-in {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px 5px 8px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border); font-weight: 800; font-size: 0.9rem; line-height: 1.2; white-space: nowrap;
}
.rw-pill-icon { font-size: 1.05rem; line-height: 1; }
.rw-pill:hover { color: var(--text); }
.rw-pill:hover .rw-pill-in { border-color: var(--accent); }
.rw-pill[aria-current="page"] .rw-pill-in { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.rw-pill.is-bumped .rw-pill-in { animation: rw-bump 0.7s cubic-bezier(0.2, 1.6, 0.4, 1); }

/* stars: an empty outline, and the lit star popping in over it */
.rw-stars { display: inline-flex; gap: 2px; vertical-align: middle; }
.rw-star-slot { position: relative; display: inline-grid; }
.rw-star path { fill: var(--rv-star-off); }
.rw-star.is-on path { fill: var(--rv-star-on); }
.rw-star-slot > .rw-star.is-on { position: absolute; inset: 0; filter: drop-shadow(0 1px 0 rgb(0 0 0 / 0.18)); }
.rw-stars.is-animated .rw-star-slot > .rw-star.is-on { animation: rw-star-pop 0.5s cubic-bezier(0.2, 1.7, 0.4, 1) var(--d, 0ms) both; }

/* one celebration: stars and "+70 XP", then a short headline, a tag and the chips */
.rw-row { display: grid; gap: 8px; min-width: 0; }
.rw-row-main { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.rw-row-icon { font-size: 1.6rem; line-height: 1; }
.rw-xp { font-size: 1.6rem; font-weight: 900; line-height: 1; letter-spacing: -0.02em; color: var(--accent-strong); font-variant-numeric: tabular-nums; }
.rw-row-words { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; }
.rw-headline { font-size: 1.15rem; font-weight: 850; }
.rw-tag {
  display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--rv-star-on); color: #1d1400;
  font-size: 0.75rem; font-weight: 850; letter-spacing: 0.04em; text-transform: uppercase;
}
.rw-row.is-kid .rw-xp { font-size: 2rem; }
.rw-row.is-kid .rw-headline { font-size: 1.3rem; }
.rw-row.is-animated .rw-xp { animation: rw-pop 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) var(--d, 0ms) both; }
.rw-row.is-animated .rw-row-words, .rw-row.is-animated .rw-row-chips { animation: rw-rise 0.3s ease-out var(--d, 0ms) both; }

.rw-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rw-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; max-width: 100%; padding: 3px 12px 3px 6px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border); font-size: 0.84rem; font-weight: 700; line-height: 1.2;
}
.rw-chip-icon { flex: none; font-size: 1.2rem; line-height: 1; }
.rw-chip-id {
  flex: none; display: inline-grid; place-items: center; min-width: 26px; height: 20px; padding: 0 5px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-strong); font-size: 0.72rem; font-weight: 850;
}
.rw-chip-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* the row inside a reveal (drill, explore), under the grade */
.rv-reward {
  padding: 10px 12px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--rv-star-on) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--rv-star-on) 42%, var(--border));
}
.rv-reward:has(> :empty) { display: none; }
@media (max-width: 899.98px) {
  .rv-reward .rw-star-slot svg { width: 24px; height: 24px; }
  .rv-reward .rw-xp { font-size: 1.4rem; }
  .rv-reward .rw-row.is-kid .rw-xp { font-size: 1.7rem; }
}

/* a floating celebration (Live, the tutorial): one at a time under the header; only the card takes the pointer */
.cb {
  position: fixed; z-index: 58; left: 50%; top: calc(var(--header-h) + 10px); transform: translateX(-50%);
  width: min(400px, calc(100vw - 2 * var(--gutter))); pointer-events: none;
}
.cb-stack { display: grid; gap: 8px; }
.cb-card {
  pointer-events: auto; display: flex; align-items: flex-start; gap: 6px; padding: 12px 6px 12px 16px;
  border-radius: var(--radius); background: var(--surface); color: var(--text);
  border: 2px solid color-mix(in srgb, var(--rv-star-on) 55%, var(--border)); box-shadow: var(--shadow-lg);
  animation: cb-in 0.35s cubic-bezier(0.2, 1.3, 0.4, 1);
}
.cb-card > .rw-row { flex: 1; padding-top: 4px; }
.cb-card.is-leaving { opacity: 0; transform: translateY(-8px); transition: opacity 0.2s, transform 0.2s; }
.cb-close { flex: none; }

/* confetti (skipped under reduced motion) */
.cb-confetti { position: fixed; inset: 0; z-index: 70; pointer-events: none; overflow: hidden; }
.cb-confetti i { position: absolute; display: block; border-radius: 2px; will-change: transform, opacity; }
.cb-confetti i.is-round { border-radius: 50%; }

/* the level-up screen: the level, big; the rank; one button */
.modal.cb-levelup { width: min(360px, calc(100vw - 2 * var(--gutter))); text-align: center; overflow: visible; }
.cb-levelup .modal-head { position: relative; justify-content: center; padding: 22px 52px 0; }
.cb-levelup .modal-head .btn { position: absolute; top: 6px; right: 6px; }
.cb-levelup .modal-title { font-size: 1.05rem; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-strong); }
.cb-levelup .modal-body { padding: 10px 20px 16px; }
.cb-levelup .modal-actions { justify-content: center; padding-bottom: 24px; }
.cb-lu { display: grid; justify-items: center; gap: 10px; }
.cb-lu-num {
  display: grid; place-items: center; align-content: center; width: 132px; height: 132px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe28a, var(--rv-star-on) 60%, #d18a00);
  color: #2b1a00; box-shadow: 0 0 0 6px color-mix(in srgb, var(--rv-star-on) 30%, transparent), 0 10px 30px var(--rw-glow);
  animation: rw-pop 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
.cb-lu-num small { font-size: 0.85rem; font-weight: 850; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1; }
.cb-lu-num b { font-size: 4rem; font-weight: 900; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.cb-lu-ribbon {
  margin: 0; padding: 4px 14px; border-radius: 999px; background: var(--accent); color: var(--accent-ink);
  font-size: 0.8rem; font-weight: 850; letter-spacing: 0.06em; text-transform: uppercase; animation: rw-rise 0.4s ease-out 0.35s both;
}
.cb-lu-kit { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-weight: 800; }
.cb-lu-go { min-width: 60%; }

/* a player token in a kit (the tag is the one the board shows over you) */
.rw-token { display: block; overflow: visible; }
.rw-token-body { fill: var(--tk-shirt, var(--kit-us)); stroke: var(--tk-edge, var(--kit-us-edge)); stroke-width: 1.3; }
.rw-token-num { fill: var(--tk-ink, var(--kit-us-ink)); font-family: var(--font); font-weight: 850; }
.rw-token-tag rect { fill: var(--learner); stroke: var(--learner-edge); stroke-width: 0.8; }
.rw-token-tag text { fill: var(--learner-ink); font-family: var(--font); font-size: 4.8px; font-weight: 800; letter-spacing: 0.2px; }

/* the level bar */
.rw-level { display: grid; grid-template-columns: auto minmax(48px, 1fr) auto; align-items: center; gap: 10px; min-width: 0; }
.rw-level--compact { grid-template-columns: auto minmax(48px, 1fr); }
.rw-level-n { display: inline-flex; align-items: baseline; gap: 3px; font-size: 1.2rem; font-weight: 900; line-height: 1; }
.rw-level-n small { font-size: 0.7rem; font-weight: 850; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.rw-level-bar { height: 12px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.rw-level-bar > span {
  display: block; height: 100%; min-width: 6px; border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 45%, var(--rv-star-on)));
}
.rw-level-xp { font-size: 0.8rem; font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* the player card (home, trophy room) */
.rw-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 18px;
  padding: 16px 18px; border-radius: calc(var(--radius) + 4px); background: var(--surface);
  border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.rw-card-token { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--grass-a); box-shadow: inset 0 0 0 3px var(--grass-b); }
.rw-card-main { display: grid; gap: 6px; min-width: 0; }
.rw-card-name { margin: 0; font-size: 1.25rem; font-weight: 900; letter-spacing: 0.02em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rw-card-side { display: grid; justify-items: end; gap: 8px; }
.rw-card-stars { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-size: 1.4rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.hm-player { margin-bottom: 28px; max-width: 760px; }
@media (max-width: 559.98px) {
  .rw-card { grid-template-columns: auto minmax(0, 1fr); padding: 14px; }
  .rw-card-side { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; }
  .rw-card-btn { flex: 0 1 auto; }
}

/* the drill summary's rewards */
.rw-session { display: grid; gap: 14px; }
.rw-session-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.rw-session-xp { display: flex; align-items: baseline; gap: 6px; margin: 0; }
.rw-session-xp-n { font-size: 2.6rem; font-weight: 900; line-height: 1; letter-spacing: -0.03em; color: var(--accent-strong); font-variant-numeric: tabular-nums; animation: rw-pop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) 0.2s both; }
.rw-session-xp-unit { font-size: 1.1rem; font-weight: 850; color: var(--text-muted); }
.rw-session-stars { display: inline-flex; align-items: baseline; gap: 6px; margin: 0; font-size: 1.8rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.rw-session-stars svg { align-self: center; }
.rw-session-stars small { font-size: 1rem; font-weight: 750; color: var(--text-muted); }
.rw-session-link { display: inline-flex; align-items: center; gap: 6px; justify-self: start; min-height: 44px; font-weight: 750; }

/* progress: the way into the trophy room */
a.pg-tile--trophies { color: var(--text); text-decoration: none; transition: border-color 0.15s, transform 0.15s; }
a.pg-tile--trophies:hover { color: var(--text); border-color: var(--accent); transform: translateY(-1px); }
.pg-tile--trophies .pg-tile-extra { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-weight: 700; }

/* the trophy room */
.tr { max-width: 980px; display: grid; gap: 18px; }
.tr-title { margin: 0; font-size: clamp(1.7rem, 5vw, 2.3rem); letter-spacing: -0.03em; }
.tr-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 4px; border-radius: 999px; background: var(--surface-2); }
.tr-tab {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 4px 8px; border-radius: 999px;
  color: var(--text-muted); text-decoration: none; font-weight: 750; font-size: 0.95rem; white-space: nowrap;
}
.tr-tab-icon { font-size: 1.15rem; line-height: 1; }
.tr-tab:hover { color: var(--text); background: var(--surface); }
.tr-tab[aria-current="page"] { color: var(--accent-ink); background: var(--accent); }
@media (max-width: 479.98px) {
  .tr-tabs { border-radius: var(--radius); }
  .tr-tab { flex-direction: column; gap: 2px; min-height: 54px; font-size: 0.78rem; border-radius: var(--radius-sm); }
  .tr-tab-icon { font-size: 1.3rem; }
}
.tr-body { min-width: 0; }

.tr-tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.tr-tile {
  display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 160px; padding: 18px 14px; text-align: center;
  border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  color: var(--text); text-decoration: none; transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.tr-tile:hover { color: var(--text); border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); }
.tr-tile-visual { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 56px; }
.tr-tile-emoji { font-size: 2.2rem; line-height: 1; }
.tr-tile-medal { display: inline-flex; flex-direction: column; align-items: center; font-size: 1.9rem; line-height: 1; }
.tr-tile-medal small { font-size: 0.85rem; font-weight: 850; margin-top: 2px; }
.tr-tile .is-dim { filter: grayscale(1); opacity: 0.45; }
.tr-tile-count { font-size: 1.5rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.tr-tile-label { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }

.tr-badges { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.tr-badge {
  display: grid; justify-items: center; align-content: start; gap: 4px; padding: 14px 10px 12px; text-align: center;
  border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border);
}
.tr-badge-icon { font-size: 2.4rem; line-height: 1.15; }
.tr-badge-name { font-size: 0.95rem; font-weight: 850; line-height: 1.2; }
.tr-badge-desc { font-size: 0.8rem; line-height: 1.3; color: var(--text-muted); }
.tr-badge-when { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 0.78rem; font-weight: 800; color: var(--good); }
.tr-badge.is-earned { background: color-mix(in srgb, var(--rv-star-on) 10%, var(--surface)); border-color: color-mix(in srgb, var(--rv-star-on) 50%, var(--border)); }
.tr-badge.is-locked .tr-badge-icon { filter: grayscale(1); opacity: 0.4; }
.tr-badge.is-locked .tr-badge-name { color: var(--text-muted); }
.tr-badge-progress { display: grid; justify-items: center; gap: 3px; width: 100%; margin-top: 4px; }
.tr-badge-progress small { font-size: 0.75rem; font-weight: 750; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.tr-bar { display: block; width: 100%; max-width: 110px; height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.tr-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }

.tr-album { display: grid; gap: 18px; }
.tr-count { display: inline-flex; align-items: baseline; gap: 6px; margin: 0; font-size: 1.1rem; font-weight: 750; color: var(--text-muted); }
.tr-count b { font-size: 2rem; font-weight: 900; color: var(--text); }
.tr-album-module { display: grid; gap: 10px; }
.tr-h { margin: 0; font-size: 0.95rem; font-weight: 800; color: var(--text-muted); }
.tr-h b { color: var(--accent-strong); margin-right: 4px; }
.tr-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.tr-card {
  --rw-frame: var(--border);
  position: relative; display: grid; justify-items: center; align-content: center; gap: 4px; aspect-ratio: 3 / 4; min-height: 128px;
  padding: 10px 8px; border-radius: 14px; text-align: center; text-decoration: none; color: var(--text);
  border: 3px solid var(--rw-frame);
  background: linear-gradient(160deg, color-mix(in srgb, var(--rw-frame) 26%, var(--surface)), var(--surface) 70%);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--rw-frame) 30%, transparent), var(--shadow-sm);
  transition: transform 0.15s;
}
.tr-card:hover { color: var(--text); transform: translateY(-2px) rotate(-1deg); }
.tr-card.tier-1 { --rw-frame: var(--rw-bronze); }
.tr-card.tier-2 { --rw-frame: var(--rw-silver); }
.tr-card.tier-3 { --rw-frame: var(--rw-gold); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--rw-gold) 40%, transparent), 0 4px 16px var(--rw-glow); }
.tr-card-medal { position: absolute; top: 6px; right: 6px; font-size: 1.2rem; line-height: 1; }
.tr-card-id { font-size: 1.6rem; font-weight: 900; letter-spacing: -0.02em; line-height: 1; }
.tr-card-name { font-size: 0.78rem; font-weight: 750; line-height: 1.25; }
.tr-card.is-mystery { border-style: dashed; border-color: var(--border); background: var(--surface-2); box-shadow: none; color: var(--text-muted); }
.tr-card.is-mystery:hover { border-color: var(--accent); }
.tr-card-q { font-size: 2.4rem; font-weight: 900; line-height: 1; color: var(--surface-3); -webkit-text-stroke: 1.5px var(--text-muted); }
.tr-card.is-mystery .tr-card-id { font-size: 1rem; }

.tr-kit { display: grid; gap: 20px; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); align-items: start; }
.tr-kit-preview {
  display: grid; place-items: center; min-height: 220px; padding: 20px; border-radius: var(--radius);
  background: repeating-linear-gradient(90deg, var(--grass-a) 0 28px, var(--grass-b) 28px 56px);
  box-shadow: inset 0 0 0 2px var(--pitch-line);
}
.tr-kit-form { display: grid; gap: 16px; min-width: 0; }
.tr-swatches { border: 0; margin: 0; padding: 0; min-width: 0; }
.tr-legend, .tr-field label { padding: 0; margin-bottom: 8px; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.tr-swatch-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
.tr-swatch { position: relative; }
.tr-swatch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tr-swatch input:disabled { cursor: not-allowed; }
.tr-swatch-box {
  display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 88px; padding: 8px 6px; border-radius: 12px;
  background: var(--surface); border: 2px solid var(--border); text-align: center; transition: border-color 0.15s, background-color 0.15s;
}
.tr-swatch-name { font-size: 0.78rem; font-weight: 750; line-height: 1.2; }
.tr-swatch-lock { display: inline-flex; align-items: center; gap: 3px; font-size: 0.78rem; font-weight: 800; color: var(--text-muted); }
.tr-swatch:hover .tr-swatch-box { background: var(--surface-2); }
.tr-swatch input:checked + .tr-swatch-box { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.tr-swatch input:focus-visible + .tr-swatch-box { outline: 3px solid var(--focus); outline-offset: 2px; }
.tr-swatch.is-locked .tr-swatch-box { background: var(--surface-2); border-style: dashed; }
.tr-swatch.is-locked .rw-token { opacity: 0.4; }
.tr-fields { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; }
.tr-field { display: grid; min-width: 0; }
.tr-input {
  width: 100%; min-height: 48px; padding: 8px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 1.1rem; font-weight: 700;
}
.tr-input::placeholder { color: var(--text-muted); font-weight: 500; }
.tr-hint { margin: -6px 0 0; font-size: 0.82rem; color: var(--text-muted); }
.tr-kit-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.tr-save { min-width: 140px; }
.tr-saved { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 800; color: var(--good); }
.tr-saved[hidden] { display: none; }
@media (max-width: 639.98px) {
  .tr-kit { grid-template-columns: minmax(0, 1fr); }
  .tr-kit-preview { min-height: 180px; }
  .tr-save { flex: 1 1 auto; }
}

@keyframes rw-star-pop { 0% { transform: scale(0.2) rotate(-40deg); opacity: 0; } 60% { transform: scale(1.3) rotate(8deg); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes rw-pop { from { transform: scale(0.4); opacity: 0; } }
@keyframes rw-rise { from { transform: translateY(6px); opacity: 0; } }
@keyframes rw-bump { 30% { transform: scale(1.22); } }
@keyframes rw-shine { 0% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--rv-star-on) 30%, transparent), 0 0 0 0 var(--rw-glow); } 100% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--rv-star-on) 30%, transparent), 0 0 0 34px rgb(255 197 61 / 0); } }
@keyframes cb-in { from { opacity: 0; transform: translateY(-12px) scale(0.96); } }

/* reduced motion: everything shows at once (the JS also skips the confetti and the pops) */
:root[data-reduced-motion="true"] :is(.rw-row *, .rw-stars *, .cb-card, .cb-lu *, .rw-pill *, .rw-session *) { animation: none !important; }