/* Fonts for the home, Warrior Cats and article pages, declared once (the files are fetched only when a page uses them). */
@font-face { font-family:'Lilita One'; src:url('/shared/fonts/lilita-one-latin-400-normal.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Cinzel'; font-weight:700; src:url('/shared/fonts/cinzel-latin-700-normal.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Lora'; font-weight:400; src:url('/shared/fonts/lora-latin-400-normal.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Lora'; font-weight:400; font-style:italic; src:url('/shared/fonts/lora-latin-400-italic.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Lora'; font-weight:600 700; src:url('/shared/fonts/lora-latin-600-normal.woff2') format('woff2'); font-display:swap; }
/* Shared by every page: tokens, base components, celebrations. Page-specific rules live in each folder's style.css. */
  /* Tokens. Dark only, bright accents. Each activity sets its own accent through a .t-* class on its <main>. Radii: cards 20, controls 14, pills 999. */
  :root {
    color-scheme: dark;
    --bg:#140a3c; --surface:#26176b; --ink:#ffffff; --muted:#dcd6ff; --line:#5a45c8; --track:#37268a; --dot:#7a66e0;
    --accent:#2ec4ff; --on-accent:#04121f; --accent-bg:#0b2f6b; --accent-line:#2f86e0; --focus:#7dd3fc;
    --good:#4ade80; --good-bg:#0d3b25; --bad:#ff6b8b; --bad-bg:#47102a;
    --streak:#ffd23f; --streak-bg:#3d3000; --streak-line:#9a7b00;
    --star-fill:#ffc61a; --star-stroke:#3a2a00; --off-fill:#33336b; --off-stroke:#4d4d94;
    --blk-red:#ff3d5e; --blk-white:#ffffff; --blk-edge:#140a3c;
    --r-card:20px; --r-ctl:14px; --r-pill:999px;
  }
  .t-balance { --accent:#2ec4ff; --on-accent:#04121f; --accent-bg:#0b2f6b; --accent-line:#2f86e0; --focus:#8fdcff; }
  .t-block   { --accent:#ff4f9a; --on-accent:#2a0212; --accent-bg:#40102a; --accent-line:#a02a5c; --focus:#ff9cbc; }
  .t-matrix  { --accent:#b894ff; --on-accent:#140b33; --accent-bg:#2a1b57; --accent-line:#6d52c4; --focus:#c4b5fd; }
  .t-seq     { --accent:#ff9f1c; --on-accent:#2a1100; --accent-bg:#46230a; --accent-line:#b4590f; --focus:#fdba74; }
  .t-digits  { --accent:#ffe14d; --on-accent:#261c00; --accent-bg:#3d3300; --accent-line:#a38a00; --focus:#fde047; }
  .t-words   { --accent:#9dff3c; --on-accent:#14210a; --accent-bg:#26380f; --accent-line:#5f8a1a; --focus:#bef264; }
  .t-puzzle  { --accent:#ff6a5c; --on-accent:#2a0805; --accent-bg:#4a1812; --accent-line:#b9402f; --focus:#ffa59b; }
  .t-pairs   { --accent:#e879f9; --on-accent:#2a0630; --accent-bg:#4a1456; --accent-line:#a43fb8; --focus:#f0abfc; }
  .t-coding  { --accent:#7b93ff; --on-accent:#0a1030; --accent-bg:#1d2a6b; --accent-line:#4a62d6; --focus:#aab8ff; }
  .t-search  { --accent:#34d36f; --on-accent:#04200f; --accent-bg:#0d3b22; --accent-line:#1f9a50; --focus:#86efac; }
  .t-cancel  { --accent:#ff8fa3; --on-accent:#2a0610; --accent-bg:#4a1624; --accent-line:#b8475f; --focus:#ffc0cc; }
  .t-spatial { --accent:#5ee6ff; --on-accent:#031f27; --accent-bg:#0b3a47; --accent-line:#1f9ab5; --focus:#a5f3fc; }
  .t-letters { --accent:#ff8a5b; --on-accent:#2a0f04; --accent-bg:#4a2010; --accent-line:#b9532c; --focus:#ffb597; }
  .t-cats    { --accent:#ffb347; --on-accent:#2a1500; --accent-bg:#4a2c08; --accent-line:#b8751f; --focus:#ffd199; }
  .t-essay   { --accent:#5fc79b; --on-accent:#04201a; --accent-bg:#12392c; --accent-line:#2c8a68; --focus:#a5f5d8; }
  .t-grid    { --accent:#1de9c4; --on-accent:#031f1b; --accent-bg:#0b3a37; --accent-line:#168a7f; --focus:#7de8d9; }
  * { box-sizing: border-box; }
  body { margin:0; min-height:100vh; color:var(--ink); font:17px/1.45 system-ui, sans-serif; background: radial-gradient(900px 520px at 0% 0%, #8b3dff66, transparent 60%), radial-gradient(900px 520px at 100% 0%, #18c8ff55, transparent 60%), radial-gradient(900px 600px at 50% 100%, #ff3d9a44, transparent 60%), var(--bg); background-attachment: fixed; }
  main { max-width: 760px; margin: 0 auto; padding: 20px 16px 60px; }
  h1 { font-size: 30px; line-height:1.15; margin: 8px 0 4px; color:var(--accent); }
  .back { display:inline-block; font-size:14px; font-weight:600; color:var(--accent); text-decoration:none; padding:6px 0; }
  .back:hover { text-decoration:underline; }
  .sub { color: var(--muted); font-size: 15px; margin: 0 0 18px; }
  .card { background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--accent); border-radius:var(--r-card); padding:18px; box-shadow:0 18px 50px -24px #000; }
  fieldset { border:0; padding:0; margin:0 0 16px; }
  legend { font-weight:600; font-size:15px; margin-bottom:6px; padding:0; }
  .choices { display:flex; flex-wrap:wrap; gap:8px; }
  .choices label { display:flex; align-items:center; min-height:44px; font-size:16px; border:1px solid var(--line); border-radius:var(--r-ctl); padding:8px 14px; cursor:pointer; background:var(--surface); }
  .choices input { margin-right:8px; }
  .choices label:has(input:checked) { border-color:var(--accent); background:var(--accent-bg); }
  .choices label:focus-within { outline:3px solid var(--focus); }
  button { font:700 17px system-ui, sans-serif; box-shadow:0 4px 0 color-mix(in srgb, var(--accent) 45%, #000); transition:transform .08s, box-shadow .08s; min-height:44px; padding:10px 20px; border-radius:var(--r-ctl); border:1px solid transparent; background:linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #ffffff)); color:var(--on-accent); cursor:pointer; }
  button:active:not(:disabled) { transform:translateY(3px); box-shadow:0 1px 0 color-mix(in srgb, var(--accent) 45%, #000); }
  button:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
  button.secondary { background:var(--surface); color:var(--accent); border-color:var(--accent-line); }
  button:disabled { opacity:.45; cursor:not-allowed; }
  #finalTitle { margin-top:0; }
  .note { font-size:14px; line-height:1.5; color:var(--muted); margin-top:16px; }
  .badge { font:600 13px system-ui, sans-serif; background:var(--accent-bg); color:var(--accent); border:1px solid var(--accent-line); border-radius:var(--r-pill); padding:2px 10px; margin-left:6px; display:inline-block; }
  .meta { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:6px 12px; font-weight:600; font-size:15px; margin:0 0 6px; }
  .q { font-weight:600; font-size:17px; margin:12px 0; }
  .q:focus { outline:none; }
  .hintbox:empty { display:none; }
  .hintbox p { margin:10px 0 0; padding:10px 12px; border-radius:var(--r-ctl); background:var(--accent-bg); border:1px solid var(--accent-line); font-size:15px; line-height:1.5; }
  .hintbox svg, .steps svg { vertical-align:middle; max-width:100%; height:auto; }
  .actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:16px; }
  .fb { margin-top:16px; border-radius:var(--r-ctl); padding:12px 14px; font-size:15px; line-height:1.5; }
  .fb.ok { background:var(--good-bg); border:1px solid var(--good); }
  .fb.no { background:var(--bad-bg); border:1px solid var(--bad); }
  .fb b.head { display:block; font-size:17px; margin-bottom:4px; }
  .big { font-weight:700; font-size:44px; margin:6px 0; }
  .sr { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
  .top { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
  .chip { display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:14px; background:var(--surface); color:var(--muted); border:1px solid var(--line); border-radius:var(--r-pill); padding:6px 14px; white-space:nowrap; flex-shrink:0; }
  .chip[aria-pressed="true"] { color:var(--accent); border-color:var(--accent-line); background:var(--accent-bg); }
  .dots { display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 2px; min-height:20px; align-items:center; }
  .dots i { width:16px; height:16px; border-radius:50%; background:var(--surface); border:2px solid var(--dot); transition:transform .2s, background .2s; }
  .dots i.cur { border-color:var(--accent); transform:scale(1.25); }
  .dots i.ok { width:20px; height:20px; border:0; border-radius:0; background:var(--star-fill); clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
  .dots i.ok.fresh { animation: starpop .5s cubic-bezier(.3,1.6,.5,1); }
  .dots i.no { background:var(--dot); border-color:var(--dot); }
  .streak { font-weight:700; font-size:13px; color:var(--streak); background:var(--streak-bg); border:1px solid var(--streak-line); border-radius:var(--r-pill); padding:2px 10px; margin-right:8px; }
  .streak.pop { animation: starpop .45s cubic-bezier(.3,1.6,.5,1); }
  .stars { display:flex; gap:8px; margin:6px 0 2px; }
  .stars svg { width:56px; height:56px; opacity:0; animation: starpop .6s cubic-bezier(.3,1.6,.5,1) forwards; animation-delay: calc(var(--i) * .25s + .1s); }
  h1 .ch { display:inline-block; }
  .star-p { fill:var(--star-fill); stroke:var(--star-stroke); }
  .stars svg.off { --star-fill:var(--off-fill); --star-stroke:var(--off-stroke); }
  #fx { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:50; }
  .fb { animation: rise .35s ease-out; }
  @keyframes starpop { 0%{opacity:0; transform:scale(.2) rotate(-25deg)} 100%{opacity:1; transform:none} }
  @keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(5px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(2px)} }
  @keyframes glow { 0%{box-shadow:0 0 0 0 rgba(74,222,128,.6)} 100%{box-shadow:0 0 0 14px rgba(74,222,128,0)} }
  @keyframes rise { from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .stars svg { opacity:1 !important; } }
  [hidden] { display:none !important; }
  h1 .ch { display:inline-block; }
  .star-p { fill:var(--star-fill); stroke:var(--star-stroke); }
  .stars svg.off { --star-fill:var(--off-fill); --star-stroke:var(--off-stroke); }
  /* celebrations: confetti canvas, staggered wave over a board, pulsing glow, perfect badge */
  @keyframes pop { 0%{transform:scale(.6); opacity:0} 100%{transform:none; opacity:1} }
  @keyframes wave { 0%{transform:scale(1)} 40%{transform:scale(1.16) rotate(-4deg)} 100%{transform:scale(1)} }
  .wave > * { animation: wave .55s ease-out both; animation-delay: calc(var(--i) * 70ms); }
  .glow { animation: glow .9s ease-out; }
  .perfect { display:inline-block; font:700 13px system-ui, sans-serif; color:var(--streak); background:var(--streak-bg); border:1px solid var(--streak-line); border-radius:var(--r-pill); padding:2px 10px; margin-left:8px; animation: starpop .5s cubic-bezier(.3,1.6,.5,1); }
  /* choice cards (matrix-reasoning, pattern-sequences) and the rules list in the feedback box */
  /* One --cell size per page: a piece in a choice is drawn at exactly the same size as a piece on the board, so they compare 1 to 1. */
  /* cqw is a share of the game card's own width (it is a size container), so pieces scale with the card on any screen; the rem bounds follow the font size. */
  .cells-3 { --cell: clamp(4.5rem, 29cqw, 7rem); }
  .cells-6 { --cell: clamp(2.2rem, 14cqw, 6.5rem); }
  .cells-3 #play, .cells-6 #play { container-type: inline-size; }
  .pieces { display:grid; grid-template-columns:repeat(auto-fit,minmax(calc(var(--cell, 88px) + 24px),1fr)); gap:10px; margin-top:6px; }
  .piece { display:flex; flex-direction:column; align-items:center; gap:4px; border:2px solid var(--line); border-radius:var(--r-ctl); padding:8px; cursor:pointer; background:var(--surface); transition:transform .12s, box-shadow .12s, border-color .12s, background .12s; }
  .piece .ltr { font-weight:600; font-size:16px; }
  .piece .pic { width:var(--cell, 88px); height:var(--cell, 88px); outline:1px solid var(--line); outline-offset:-1px; }
  .piece:has(input:checked) { border-color:var(--accent); background:var(--accent-bg); }
  .piece:has(input:disabled) { cursor:default; }
  .piece:focus-within { outline:3px solid var(--focus); }
  .piece.correct:has(input) { border-color:var(--good); background:var(--good-bg); animation:glow .9s ease-out; }
  .piece.wrong:has(input) { border-color:var(--bad); background:var(--bad-bg); animation:shake .45s; }
  @media (hover: hover) { .piece:not(:has(input:disabled)):hover { transform:translateY(-2px); box-shadow:0 4px 10px rgba(0,0,0,.5); } }
  .fb ul { margin:6px 0 0; padding-left:20px; }
  .fb li { margin:4px 0; }
  .piece svg { display:block; width:100%; height:100%; }
  .qm { font:700 56px system-ui, sans-serif; fill:var(--accent); }

  h1:focus { outline:none; }
  /* with GSAP running (class set by motion.js) these CSS-only animations step aside */
  .gsap .stars svg { animation:none; opacity:1; }
  .gsap .perfect, .gsap .streak.pop, .gsap .wave > * { animation:none; }
  /* piece figures (pieces.js / figures.js): body tinted by --mx, ink pointer and mark */
  .fg-body { fill:color-mix(in srgb, var(--mx, var(--accent)) 92%, var(--bg)); stroke:var(--ink); stroke-width:3; stroke-linejoin:round; }
  .fg-ps { fill:var(--ink); stroke:var(--ink); stroke-width:2; stroke-linejoin:round; }
  .fg-po { fill:var(--surface); stroke:var(--ink); stroke-width:3; stroke-linejoin:round; stroke-linecap:round; }
  .fg-po.fg-fo { fill:none; }
  .fg-mo { fill:var(--surface); stroke:var(--ink); stroke-width:3; stroke-linejoin:round; }
  .fg-mf { fill:var(--ink); stroke:var(--ink); stroke-width:3; stroke-linejoin:round; }
  /* the 3x3 puzzle grid (matrix-reasoning, pattern-grid); pieces are drawn in --mx */
  /* The puzzle grid: shapes are drawn in --mx, set per puzzle. */
  .mgrid { display:grid; grid-template-columns:repeat(3, var(--cell, 110px)); width:max-content; margin:6px auto 4px; border:2px solid var(--ink); background:var(--surface); }
  .mgrid > div { width:var(--cell, 110px); height:var(--cell, 110px); outline:1px solid var(--line); outline-offset:-1px; display:flex; }
  .mgrid svg { display:block; width:100%; height:100%; }
  .mgrid .miss { background:var(--accent-bg); }
  .mgrid .filled svg { animation:pop .35s cubic-bezier(.3,1.5,.5,1); }
  a { color:var(--accent); }

  /* countdown shared by the timed games (shared/clock.js) */
  .clock { font-weight:800; font-variant-numeric:tabular-nums; }
  .timebar { height:10px; border-radius:var(--r-pill); background:var(--track); overflow:hidden; margin:8px 0 12px; }
  .timebar i { display:block; height:100%; width:calc(var(--left, 1) * 100%); background:var(--accent); border-radius:inherit; }
  .timebar.low i { background:var(--bad); }
  .gl { display:block; width:100%; height:100%; color:var(--ink); }