/* =====================================================================
   TOKENS — colour, spacing, radius, motion

   Tuned to the Enodo design system (see /page.css):
     - cream is the ground; white signals raised, actionable paper
     - marker strokes are reserved for emphasis and annotation
     - marks are sharp, controls are soft, paper is hand-cut
     - Space Grotesk for words, Space Mono for labels and numbers

   The twelve wheel colours in src/theory.js are deliberately left as they
   are: each key needs its own identity and "never repeat a wedge" is the
   whole puzzle. What changed here is the interface language around them —
   the glowing cyan/violet accent this game arrived with has been replaced
   by Enodo's ink red, gold and green on cream.
   ===================================================================== */
:root{
  /* --- surfaces (from page.css) --- */
  --page:#F1EDE2;                     /* cream ground */
  --pageTint1:rgba(199,0,26,.05);     /* the faintest warmth, not a glow */
  --pageTint2:rgba(141,89,26,.05);
  --panel:#FFFFFF;                    /* raised: cards, fields, the board */
  --panel2:#E7E2D3;                   /* recessed: wells, callouts */
  --control:#FFFFFF;
  --text:#1A1916;--body:#55524A;--muted:#696458;
  --border:#DBD5C4;--borderStrong:#C4BCA6;

  /* --- the marker ---
     Red is the annotation colour and the primary action, exactly as
     .home-primary-cta uses it. No gradients: a marker has one ink. */
  --accent:#C7001A;                   /* where it carries words */
  --accentBright:#FF0021;             /* display strokes only */
  --accent2:#8D591A;                  /* the warm centre of the strokes */
  --accentText:#FFFFFF;
  --accentGrad:var(--accent);         /* kept as a token so nothing needs rewriting */
  --accentGlow:0 1px 2px rgba(60,50,25,.05), 0 6px 18px rgba(60,50,25,.06);
  --gold:#8D591A;--goldBright:#B8791F;
  --good:#1F7A52;--bad:#C7001A;
  --chaos:#34459B;                    /* the one cool ink on the page */
  --complete:#DBD5C4;                 /* a claimed wedge greys back to paper */

  /* --- depth: matte, warm, low opacity --- */
  --shadow:0 1px 2px rgba(60,50,25,.05), 0 6px 18px rgba(60,50,25,.06);
  --shadowLg:0 2px 4px rgba(60,50,25,.06), 0 14px 36px rgba(60,50,25,.09);
  --shadowGlow:none;

  /* --- wheel, piano and cards --- */
  --window:#FFFFFF;--windowText:#1A1916;
  --cardTop:#FFFFFF;--cardBottom:#F6F2E7;--cardSurfTop:#FFFFFF;--cardSurfBottom:#F1EDE2;
  --cardOutline:#DBD5C4;--cardFooter:#E7E2D3;--cardFooterText:#1A1916;--cardFooterMuted:#696458;
  --wheelRing:#C4BCA6;--wheelDot:#C4BCA6;--wheelCenter:#FFFFFF;
  --pianoWhite:#FFFFFF;--pianoWhiteText:#55524A;--pianoBlack:#1A1916;--pianoBlackText:#F1EDE2;
  --pianoBorder:#C4BCA6;

  /* --- spacing --- */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;

  /* --- corners: marks sharp, controls soft, paper hand-cut --- */
  --radius-sm:5px;                    /* --r-ctl-sm */
  --radius-md:9px;                    /* --r-ctl-lg */
  --radius-lg:4px 16px 4px 16px;      /* --r-sheet */
  --radius-xl:4px 16px 4px 16px;

  /* --- type --- */
  --font-sans:'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono:'Space Mono', ui-monospace, Menlo, monospace;

  /* --- motion ---
     Every transition and animation duration references one of these, so the
     reduced-motion block at the bottom of this file can flatten the lot. */
  --t-fast:.12s;--t-mid:.18s;--t-slow:.32s;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-pop:cubic-bezier(.2,1.35,.35,1);
}

/* Dark mode follows the site's own switch (body.note-game-dark, set by the
   shared toggle) as well as this game's data-theme attribute, so the two can
   never disagree about which theme is on. */
html[data-theme="dark"],
html.note-game-dark-root,
body.note-game-dark{
  --page:#171714;
  --pageTint1:rgba(255,0,33,.07);
  --pageTint2:rgba(141,89,26,.09);
  --panel:#211F1B;--panel2:#272722;--control:#211F1B;
  --text:#F7F3E9;--body:#CFC8B8;--muted:#BDB6A7;
  --border:#34332E;--borderStrong:#5B584F;

  --accent:#FF3348;
  --accentBright:#FF6172;
  --accent2:#C08A3A;
  --accentText:#171714;
  --accentGrad:var(--accent);
  --accentGlow:0 2px 6px rgba(0,0,0,.4);
  --gold:#C08A3A;--goldBright:#E0A84C;
  --good:#4FB183;--bad:#FF6172;
  --chaos:#7C8BE0;
  --complete:#4A473F;

  --shadow:0 1px 2px rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.32);
  --shadowLg:0 2px 4px rgba(0,0,0,.34), 0 14px 36px rgba(0,0,0,.44);

  --window:#272722;--windowText:#F7F3E9;
  --cardTop:#2B2925;--cardBottom:#211F1B;--cardSurfTop:#302E29;--cardSurfBottom:#242219;
  --cardOutline:#43413A;--cardFooter:#211F1B;--cardFooterText:#F7F3E9;--cardFooterMuted:#BDB6A7;
  --wheelRing:#5B584F;--wheelDot:#5B584F;--wheelCenter:#211F1B;
  --pianoWhite:#E9E4D6;--pianoWhiteText:#1A1916;--pianoBlack:#0E0E0C;--pianoBlackText:#E9E4D6;
  --pianoBorder:#0E0E0C;
}

/* page.css pins the cream ground with `background: var(--bg) !important` on both html
   and body, so redefining --page alone darkens the game and leaves the page around it
   cream. The Note Trainer solves it the same way. */
html.note-game-dark-root,
body.note-game-dark{
  background:var(--page) !important;
  color:var(--body) !important;
  color-scheme:dark;
}

/* ---------- reset / base ----------
   page.css already styles html and body for the site shell, so this file only
   claims what belongs to the game itself. */
*{box-sizing:border-box}
/* class rules like .board{display:grid} out-specify the UA [hidden] rule, so make the
   hidden attribute authoritative — several panels are toggled with it. */
[hidden]{display:none !important}

.cof-app{
  font-family:var(--font-sans);
  color:var(--text);
  line-height:1.4;
  -webkit-font-smoothing:antialiased;
}
/* :where() so this contributes no extra specificity — as a plain `.cof-app button`
   rule the `font` shorthand outranked .btn and every control silently lost its
   Space Mono label. */
.cof-app :where(button,select){font:inherit}
.cof-app button:focus-visible,
.cof-app .choice-card:focus-visible,
.cof-app .move-card:focus-visible,
.cof-app [tabindex]:focus-visible{
  outline:3px solid var(--accent);outline-offset:2px;border-radius:2px}
.app{width:min(1360px,100%);margin:0 auto;padding:0}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- reclaiming the elements page.css owns ----------
   The shared stylesheet styles h1/h2/h3/p/.eyebrow/section with `!important`, which
   is right for prose pages and wrong inside an application surface — a 12px uppercase
   mono <h3> with a 30px top margin is a section heading, not a modal title.

   Against an `!important` declaration the only thing that wins is another `!important`
   one, and then ordinary specificity decides. So each rule below states the value the
   game actually wants rather than trying to blanket-neutralise the element: a generic
   `font-size:inherit !important` here would beat the game's own headings too, which is
   how the hero title ended up at 16px.

   The prose block at the foot of the menu is deliberately NOT reclaimed — it is
   ordinary page copy and should read exactly like the rest of the site. */
.cof-app section{margin:0 !important}

/* headings inside the application surface */
#screen-menu h1{
  font-size:clamp(1.9rem,5.4vw,3rem) !important;
  line-height:1.02 !important;letter-spacing:-.02em !important;
  margin:0 !important;color:var(--text) !important;
}
.cof-app .eyebrow{
  font-family:var(--font-mono) !important;font-size:11px !important;font-weight:700 !important;
  letter-spacing:.16em !important;text-transform:uppercase !important;
  color:var(--accent) !important;margin:0 0 14px !important;
}
#lockOverlay h3,#endOverlay h3{
  font-family:var(--font-sans) !important;font-size:19px !important;font-weight:700 !important;
  letter-spacing:-.01em !important;text-transform:none !important;
  margin:0 !important;color:var(--text) !important;
}
#endOverlay h3{font-size:24px !important;margin:0 0 8px !important}
#lockOverlay h4{
  font-family:var(--font-sans) !important;font-size:14px !important;font-weight:700 !important;
  text-transform:none !important;letter-spacing:normal !important;margin:0 0 6px !important;
  color:var(--text) !important;
}
/* .wiz-title is an <h3>, which page.css turns into a 12px uppercase mono section
   label — correct for an article, wrong for the question at the top of a wizard step. */
.cof-app .menu-section h2,.cof-app .wiz-title{
  font-family:var(--font-sans) !important;
  font-size:clamp(1.15rem,2.6vw,1.5rem) !important;font-weight:700 !important;
  letter-spacing:-.01em !important;text-transform:none !important;
  color:var(--text) !important;margin:0 !important;
}

/* paragraphs inside the application surface size themselves */
.cof-app .lede{font-size:16px !important;line-height:1.6 !important;margin:12px 0 0 !important}
.cof-app .wiz-sub{font-size:15px !important;line-height:1.55 !important;margin:6px 0 0 !important}
.cof-app .tv-hint{font-size:14px !important;line-height:1.5 !important;margin:0 !important;color:var(--muted) !important}
#lockOverlay .lock-prompt{
  font-size:clamp(16px,2.6vw,18px) !important;line-height:1.4 !important;font-weight:700 !important;
  color:var(--text) !important;margin:0 0 var(--sp-3) !important;
}
#lockOverlay p,#endOverlay p{margin:0 0 var(--sp-3) !important;color:var(--body) !important}
#endOverlay .end-card p{margin:0 0 16px !important;line-height:1.5 !important}
#lockOverlay .caller-line{font-size:14px !important;line-height:1.5 !important;color:var(--body) !important;
  margin:var(--sp-3) 0 0 !important}
#lockOverlay .caller-q{font-size:15px !important;font-weight:700 !important;line-height:1.4 !important;
  color:var(--text) !important;margin:var(--sp-3) 0 4px !important}
#lockOverlay .quit-confirm p{font-size:13px !important;line-height:1.45 !important;
  margin:0 0 var(--sp-3) !important}

/* ---------- shared keyframes ----------
   Named once here so several components can share one motion vocabulary. */
@keyframes riseIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes popIn{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:scale(1)}}
@keyframes softPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@keyframes ringPing{0%{transform:scale(.6);opacity:.75}100%{transform:scale(2.1);opacity:0}}
@keyframes shimmer{from{background-position:-160% 0}to{background-position:260% 0}}

/* ---------- reduced motion ----------
   One authoritative override. Anything decorative stops; anything that carries
   meaning (a timer emptying, a bar filling) keeps its width/height transition
   because removing it would hide information rather than calm the page. */
@media(prefers-reduced-motion:reduce){
  :root{--t-fast:.01ms;--t-mid:.01ms;--t-slow:.01ms}
  .cof-app *,.cof-app *::before,.cof-app *::after,
  #lockOverlay *,#endOverlay *,#cofOnboard,#cofOnboard *{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
  }
  .tv-bar,.caller-timer,.beatbar .seg{transition-duration:.2s !important}
}