/* ---------- Rainbow World: shared styles ---------- */

/* The two fonts live in the site's own fonts folder (Fredoka and Nunito, both under the free Open Font
   License), so nothing is fetched from anywhere else and the writing does not jump as a page opens. */
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("../fonts/fredoka-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("../fonts/fredoka-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 600 800; font-display: swap; src: url("../fonts/nunito-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 600 800; font-display: swap; src: url("../fonts/nunito-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Lets the rainbow borders spin smoothly. */
@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* Soft slide-and-pop when moving between pages. */
@view-transition { navigation: auto; }

:root {
  --red: oklch(70% 0.2 15);
  --orange: oklch(78% 0.17 60);
  --yellow: oklch(89% 0.17 98);
  --green: oklch(78% 0.19 152);
  --blue: oklch(72% 0.15 245);
  --purple: oklch(66% 0.2 295);
  --pink: oklch(75% 0.19 350);
  --ink: oklch(33% 0.09 300);
  --soft: oklch(52% 0.07 300);
  --paper: oklch(100% 0 0);
  --shade: black; /* what a color is mixed with to make readable writing in that color */
  /* The page background: a base color, four soft blobs of color in the corners, and the dots. */
  --bg: oklch(97% 0.03 300);
  --bg-1: oklch(91% 0.09 350);
  --bg-2: oklch(92% 0.08 230);
  --bg-3: oklch(95% 0.11 100);
  --bg-4: oklch(93% 0.09 160);
  --bg-dot: oklch(100% 0 0 / .8);

  --radius: 30px;
  --display: "Fredoka", ui-rounded, system-ui, sans-serif;
  --body: "Nunito", ui-rounded, system-ui, sans-serif;
  --rainbow-ring: conic-gradient(from var(--angle),
    var(--pink), var(--yellow), var(--green), var(--blue), var(--purple), var(--pink));
  /* A bouncy spring for anything that moves. */
  --spring: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121,
    1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%,
    0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1.004 83.8%, 1);

  accent-color: var(--purple);
  scrollbar-color: var(--pink) transparent;
}

/* ---------- Color themes ----------
   Picked in the "Select who's playing" box. Each one swaps the colors above; nothing else changes.
   The first theme, Rainbow, is the colors above as they are. */
[data-theme="ocean"] {
  --red: oklch(70% 0.14 200); --orange: oklch(76% 0.13 185); --yellow: oklch(88% 0.12 190); --green: oklch(74% 0.15 170);
  --blue: oklch(66% 0.16 245); --purple: oklch(58% 0.17 265); --pink: oklch(72% 0.13 225);
  --ink: oklch(30% 0.08 250); --soft: oklch(50% 0.07 240);
  --bg: oklch(96% 0.03 220); --bg-1: oklch(90% 0.08 200); --bg-2: oklch(88% 0.09 240); --bg-3: oklch(93% 0.07 180); --bg-4: oklch(91% 0.08 215);
}
[data-theme="forest"] {
  --red: oklch(62% 0.14 40); --orange: oklch(72% 0.14 75); --yellow: oklch(86% 0.14 105); --green: oklch(68% 0.17 145);
  --blue: oklch(62% 0.11 190); --purple: oklch(52% 0.13 150); --pink: oklch(70% 0.13 125);
  --ink: oklch(30% 0.07 150); --soft: oklch(48% 0.06 145);
  --bg: oklch(96% 0.03 120); --bg-1: oklch(90% 0.09 140); --bg-2: oklch(92% 0.08 100); --bg-3: oklch(93% 0.06 80); --bg-4: oklch(89% 0.08 165);
}
[data-theme="sunset"] {
  --red: oklch(66% 0.21 25); --orange: oklch(76% 0.17 55); --yellow: oklch(88% 0.16 90); --green: oklch(76% 0.15 75);
  --blue: oklch(66% 0.17 330); --purple: oklch(56% 0.2 345); --pink: oklch(72% 0.19 5);
  --ink: oklch(32% 0.1 20); --soft: oklch(52% 0.09 30);
  --bg: oklch(96% 0.04 60); --bg-1: oklch(88% 0.11 30); --bg-2: oklch(90% 0.11 70); --bg-3: oklch(93% 0.1 95); --bg-4: oklch(88% 0.1 350);
}
[data-theme="candy"] {
  --red: oklch(72% 0.19 355); --orange: oklch(80% 0.13 20); --yellow: oklch(90% 0.11 85); --green: oklch(84% 0.12 175);
  --blue: oklch(76% 0.12 235); --purple: oklch(68% 0.18 310); --pink: oklch(76% 0.18 340);
  --ink: oklch(36% 0.12 330); --soft: oklch(55% 0.1 330);
  --bg: oklch(97% 0.03 340); --bg-1: oklch(90% 0.1 340); --bg-2: oklch(91% 0.08 300); --bg-3: oklch(94% 0.07 190); --bg-4: oklch(93% 0.08 20);
}
/* Night sky is the dark one: dark paper, light ink. */
[data-theme="night"] {
  --red: oklch(72% 0.19 15); --orange: oklch(80% 0.16 60); --yellow: oklch(88% 0.16 98); --green: oklch(80% 0.18 152);
  --blue: oklch(74% 0.15 245); --purple: oklch(72% 0.17 295); --pink: oklch(78% 0.17 350);
  --ink: oklch(94% 0.03 280); --soft: oklch(78% 0.05 280); --paper: oklch(27% 0.06 280);
  --bg: oklch(18% 0.05 275); --bg-1: oklch(30% 0.12 300); --bg-2: oklch(28% 0.1 250); --bg-3: oklch(26% 0.08 220); --bg-4: oklch(30% 0.11 330);
  --bg-dot: oklch(100% 0 0 / .35);
  --shade: white;
  color-scheme: dark;
}
/* Night sky and Candy use bright or pastel colors, where white writing is hard to read.
   So in those two, anything filled with a color gets dark writing instead. */
[data-theme="night"] { --on-color: oklch(22% 0.06 280); }
[data-theme="candy"] { --on-color: oklch(30% 0.11 330); }
:is([data-theme="night"], [data-theme="candy"]) :is(.btn, .book-flags button[aria-pressed="true"], .who-kid.current, .kid-tab[aria-pressed="true"], .seg button[aria-pressed="true"], .menu-toggle, .parent-card h3, .parent-card h3 span,
  .kid-more-head, .kid-more-head .link-btn, .kid-tag, .site-nav a[aria-current="page"], .family-table tr:first-child th, .zoo-pick.on, .zoo-pick.on span, .zoo-pick.on select,
  .key:not(.black), .drum-pad, .wild-pads button, .chip[aria-pressed="true"], .tile[aria-pressed="true"], .tile[aria-pressed="true"] small, .pad-btn, .track-pick[aria-pressed="true"],
  .answers .btn, .letter, .flip-front, .zoo-x, .zoo-ear) { color: var(--on-color); text-shadow: none; }
[data-theme="night"] .key.black { color: white; }
[data-theme="night"] .badge { background: oklch(38% 0.03 280); color: oklch(75% 0.03 280); }
[data-theme="night"] .badge.earned { color: oklch(25% 0.06 60); }

/* The six theme buttons in the "Select who's playing" box. */
/* It sits in its own band, with a dashed line and clear space between it and the button above. */
.theme-row {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .6rem;
  margin-block-start: 1.3rem; padding-block: 1.1rem .2rem;
  border-block-start: 3px dashed color-mix(in oklch, var(--purple) 25%, var(--paper));
}
.theme-row > span { flex: 1 1 100%; font-family: var(--display); font-weight: 600; margin-block-end: .1rem; }
.theme-dot {
  inline-size: 2.3rem; block-size: 2.3rem; padding: 0; border: 3px solid var(--paper); border-radius: 50%; cursor: pointer;
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--ink) 25%, transparent); font-size: 1.05rem; line-height: 1;
  &[aria-pressed="true"] { box-shadow: 0 0 0 4px var(--purple); scale: 1.12; }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
::selection { background: var(--yellow); color: var(--ink); }

body {
  margin: 0;
  min-block-size: 100dvh;
  font-family: var(--body);
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--ink);
  overflow-x: clip;
  background: var(--bg);
}
/* The colorful backdrop is its own layer that stays put behind the page. (It used to be a background
   pinned to the window, which some computers redraw on every scroll step, so it flickered and the
   colors shifted. A layer that never moves is drawn once.) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(var(--bg-dot) 2px, transparent 3px) 0 0 / 30px 30px,
    radial-gradient(circle at 10% 6%, var(--bg-1), transparent 42%),
    radial-gradient(circle at 90% 10%, var(--bg-2), transparent 44%),
    radial-gradient(circle at 85% 88%, var(--bg-3), transparent 42%),
    radial-gradient(circle at 12% 92%, var(--bg-4), transparent 44%),
    var(--bg);
}
html.full body::before { display: none; }

h1, h2, h3 { font-family: var(--display); line-height: 1.15; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 7.5vw, 4.2rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2.1rem); }
p { margin: 0 0 1em; text-wrap: pretty; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
:focus-visible { outline: 4px solid var(--purple); outline-offset: 4px; border-radius: 12px; }

main { max-inline-size: 1050px; margin-inline: auto; padding: 1.5rem 16px 3rem; }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky; inset-block-start: 10px; z-index: 50;
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  max-inline-size: 1050px; margin: 10px auto 0; padding: .5rem 1rem;
  inline-size: calc(100% - 20px);
  border: 5px solid transparent; border-radius: 34px;
  background: linear-gradient(var(--paper), var(--paper)) padding-box, var(--rainbow-ring) border-box;
  box-shadow: 0 10px 30px oklch(60% 0.15 300 / .25);
  animation: spin 6s linear infinite;
  view-transition-name: site-header;
}
@keyframes spin { to { --angle: 360deg; } }

.logo {
  display: flex; align-items: center; gap: .4rem; margin-inline-end: auto;
  font-family: var(--display); font-weight: 700; font-size: 1.5rem; text-decoration: none;
}
.logo-icon { display: inline-block; animation: wobble 3s ease-in-out infinite; }

.site-nav {
  display: flex; flex-wrap: wrap; gap: .4rem;

  a {
    --c: var(--blue);
    padding: .35rem .85rem; border-radius: 999px;
    background: color-mix(in oklch, var(--c) 18%, var(--paper));
    font-family: var(--display); font-weight: 600; font-size: 1rem;
    color: var(--ink); text-decoration: none; white-space: nowrap;
    transition: translate .5s var(--spring), rotate .5s var(--spring), background .2s;

    &:hover { translate: 0 -4px; rotate: -3deg; background: color-mix(in oklch, var(--c) 40%, var(--paper)); }
    &[aria-current="page"] {
      background: var(--c); color: var(--paper);
      text-shadow: 0 1px 0 oklch(0% 0 0 / .25);
      box-shadow: 0 4px 0 color-mix(in oklch, var(--c) 70%, black);
    }
  }
}

.sound-toggle {
  inline-size: 2.6rem; aspect-ratio: 1; border: 0; border-radius: 50%; padding: 0; font-size: 1.2rem;
  background: color-mix(in oklch, var(--purple) 18%, var(--paper));
  transition: scale .5s var(--spring);
  &:hover { scale: 1.2; }
  &:active { scale: .85; }
}

/* Top line: the site name on the left, the sign-in badge and sound button on the right.
   The menu always has the line below to itself, and wraps onto more lines if it needs to. */
.header-tools { display: flex; align-items: center; gap: .5rem; order: 2; }
.site-nav { order: 3; inline-size: 100%; }
/* On phones the menu scrolls away with the page so it doesn't hog the screen. */
@media (width < 720px) {
  .site-header { position: static; }
}

.site-footer { text-align: center; padding: 1.5rem 16px 2.5rem; color: var(--soft); font-family: var(--display); }
.home-tip {
  max-inline-size: 30rem; margin: .8rem auto 0; font-family: var(--body); font-size: .95rem;
  summary { cursor: pointer; font-family: var(--display); color: var(--purple); }
  p { margin: .5rem 0; }
}

/* ---------- Rainbow letters ---------- */
/* Rainbow titles wrap the plain way. The "balanced" wrapping used for other headings can wrongly
   stack a short title onto two lines in Safari while the letters and font are still loading. */
[data-rainbow] { text-wrap: wrap; }
.rb-word { display: inline-block; white-space: nowrap; }
.rb-letter { display: inline-block; animation: wave 1.8s ease-in-out infinite; }
@keyframes wave { 50% { translate: 0 -.14em; } }

/* Big titles look like puffy stickers. */
h1 .rb-letter {
  -webkit-text-stroke: .16em var(--paper);
  paint-order: stroke fill;
  filter: drop-shadow(0 .06em 0 oklch(60% 0.12 300 / .35));
}

/* ---------- Buttons, chips, panels ---------- */
.btn {
  --c: var(--purple);
  --deep: color-mix(in oklch, var(--c) 68%, black);
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .6rem 1.3rem; border: 0; border-radius: 999px;
  background: linear-gradient(color-mix(in oklch, var(--c) 78%, white), var(--c) 60%);
  color: var(--paper);
  font-family: var(--display); font-weight: 600; font-size: 1.15rem;
  text-shadow: 0 1px 0 oklch(0% 0 0 / .25); text-decoration: none;
  box-shadow: 0 6px 0 var(--deep), inset 0 2px 0 oklch(100% 0 0 / .45);
  transition: translate .45s var(--spring), scale .45s var(--spring), box-shadow .1s;

  &:hover { translate: 0 -3px; scale: 1.04; box-shadow: 0 9px 0 var(--deep), inset 0 2px 0 oklch(100% 0 0 / .45); }
  &:active { translate: 0 5px; scale: .97; box-shadow: 0 1px 0 var(--deep), inset 0 2px 0 oklch(100% 0 0 / .45); transition-duration: .05s; }
  &.small { font-size: 1rem; padding: .4rem 1rem; }
}

.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-end: 1rem; }
.chip {
  --c: var(--blue);
  padding: .4rem .95rem; border: 0; border-radius: 999px;
  background: color-mix(in oklch, var(--c) 16%, var(--paper));
  box-shadow: inset 0 0 0 3px color-mix(in oklch, var(--c) 55%, var(--paper));
  font-family: var(--display); font-weight: 500;
  transition: scale .5s var(--spring), rotate .5s var(--spring), background .2s;

  &:hover { scale: 1.08; rotate: -2deg; }
  &[aria-pressed="true"] {
    background: var(--c); color: var(--paper); scale: 1.06;
    box-shadow: 0 4px 0 color-mix(in oklch, var(--c) 68%, black);
    text-shadow: 0 1px 0 oklch(0% 0 0 / .25);
  }
}

.panel {
  --c: var(--purple);
  position: relative;
  padding: clamp(1.1rem, 3vw, 2rem); margin-block-end: 2.2rem;
  border: 5px solid var(--c); border-radius: var(--radius);
  background: linear-gradient(160deg, var(--paper) 55%, color-mix(in oklch, var(--c) 14%, var(--paper)));
  box-shadow: 0 10px 0 color-mix(in oklch, var(--c) 45%, transparent), 0 24px 40px color-mix(in oklch, var(--c) 22%, transparent);

  > h2 { color: color-mix(in oklch, var(--c) 68%, var(--shade)); }
}
.row { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; }
.label { font-family: var(--display); font-weight: 600; margin: 0 0 .4rem; }
.hint { color: var(--soft); font-size: 1rem; }
.score { font-family: var(--display); font-weight: 600; font-size: 1.2rem; font-variant-numeric: tabular-nums; }

.page-title {
  text-align: center; margin-block: 1.5rem 2rem;
  p { font-size: 1.25rem; color: var(--soft); }
  .big {
    display: inline-block; font-size: clamp(3rem, 10vw, 5rem);
    filter: drop-shadow(0 8px 6px oklch(60% 0.15 300 / .25));
    animation: bob 2.4s ease-in-out infinite;
  }
}

/* ---------- Effects ---------- */
.fx-layer, .bg-layer { position: fixed; inset: 0; pointer-events: none; overflow: clip; }
.fx-layer { z-index: 100; }
.bg-layer { z-index: -1; }
.confetti { position: absolute; inset-block-start: 0; inline-size: 10px; block-size: 16px; border-radius: 4px; }
.spark { position: absolute; font-size: 1.3rem; margin: -.65rem; }
.floater { position: absolute; inset-block-end: -4rem; opacity: .5; animation: floatUp linear infinite; }

@keyframes floatUp {
  from { translate: 0 0; rotate: -12deg; }
  50% { translate: 30px -60vh; rotate: 12deg; }
  to { translate: 0 -120vh; rotate: -12deg; }
}
@keyframes bob { 50% { translate: 0 -10px; } }
@keyframes wobble { from, to { rotate: -8deg; } 50% { rotate: 8deg; } }
@keyframes jump {
  40% { translate: 0 -38px; scale: 1.25; rotate: 12deg; }
  70% { translate: 0 0; scale: .9 1.1; }
}
@keyframes shake { 20%, 60% { translate: -7px 0; } 40%, 80% { translate: 7px 0; } }
@keyframes popIn { from { scale: 0; } }
@keyframes riseIn { from { opacity: 0; scale: .92; translate: 0 50px; } }
.jump { animation: jump .6s ease !important; }
.shake { animation: shake .4s ease; }

/* Panels and cards pop into place the first time they scroll into view, and then stay put.
   (They used to be tied to the scroll position, so a box at the edge of the screen faded out again
   whenever you scrolled back, which looked like it was greying out and vanishing.)
   main.js adds "wait" to boxes that start below the screen and swaps it for "rise" when they arrive. */
@media (prefers-reduced-motion: no-preference) {
  .wait { opacity: 0; }
  .rise { animation: riseIn .5s ease-out both; }
}

/* ---------- Home ---------- */
.hero {
  text-align: center; padding-block: 1rem 2rem;
  p { font-size: 1.3rem; color: var(--soft); }
}
.sky-rainbow {
  position: relative; inline-size: min(460px, 86vw); aspect-ratio: 2 / 1; margin: 0 auto 1.4rem;
  background: radial-gradient(circle farthest-side at 50% 100%,
    transparent 0 44%, #8a5cf6 44% 55%, #1e90ff 55% 66%, #22b85a 66% 77%,
    #ffd23f 77% 88%, #ff4fb8 88% 99%, transparent 100%); /* the same in every theme: pink, yellow, green, blue, purple */
  filter: drop-shadow(0 0 22px oklch(90% 0.12 90 / .9));
  transform-origin: 50% 100%;
  animation: popIn 1.2s var(--spring);

  span {
    position: absolute; inset-block-end: -1.2rem; font-size: clamp(3rem, 12vw, 5rem);
    animation: bob 3s ease-in-out infinite;
    &:first-child { inset-inline-start: -8%; }
    &:last-child { inset-inline-end: -8%; animation-delay: -1.5s; }
  }
}

.parade {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem;

  button {
    border: 0; background: none; padding: .1rem .3rem;
    font-size: clamp(2.4rem, 8vw, 3.6rem);
    filter: drop-shadow(0 8px 5px oklch(60% 0.15 300 / .25));
    animation: bob 2s ease-in-out infinite;
    transition: scale .5s var(--spring);
    &:hover { scale: 1.25; }
  }
}
.bubble-says {
  display: inline-block; min-block-size: 2.8rem; margin: 0 auto 1rem; padding: .45rem 1.2rem;
  border: 4px solid transparent; border-radius: 999px;
  background: linear-gradient(var(--paper), var(--paper)) padding-box, var(--rainbow-ring) border-box;
  font-family: var(--display); font-weight: 600;
  animation: spin 5s linear infinite;
}

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.4rem; margin-block: 2rem; }
.card {
  --c: var(--blue);
  display: block; padding: 1.3rem 1rem; text-align: center; text-decoration: none; color: var(--ink);
  border: 5px solid var(--c); border-radius: var(--radius);
  background: linear-gradient(170deg, var(--paper) 50%, color-mix(in oklch, var(--c) 22%, var(--paper)));
  box-shadow: 0 9px 0 color-mix(in oklch, var(--c) 68%, black), 0 22px 30px color-mix(in oklch, var(--c) 25%, transparent);
  transition: translate .6s var(--spring), rotate .6s var(--spring);

  &:hover { translate: 0 -8px; rotate: -2deg; }
  &:nth-child(even):hover { rotate: 2deg; }
  &:hover .card-icon { animation: jump .6s ease; }
  &:active { translate: 0 4px; transition-duration: .05s; }

  h3 { font-size: 1.4rem; color: color-mix(in oklch, var(--c) 68%, var(--shade)); margin: .5rem 0 .2rem; }
  p { margin: 0; font-size: 1rem; color: var(--soft); }
}
.card-icon {
  display: grid; place-items: center; inline-size: 5.4rem; aspect-ratio: 1; margin-inline: auto;
  border-radius: 46% 54% 52% 48% / 55% 45% 55% 45%;
  background: color-mix(in oklch, var(--c) 28%, var(--paper));
  font-size: 3.2rem;
}

.joke {
  font-family: var(--display); font-size: 1.35rem; min-block-size: 4.2rem;
  strong { display: block; color: var(--red); animation: popIn .6s var(--spring); }
}

/* ---------- Reading ---------- */
.story {
  min-block-size: 7rem; padding: 1rem 1.2rem; margin-block-start: 1rem; font-size: 1.25rem;
  background: color-mix(in oklch, var(--yellow) 22%, var(--paper));
  border: 3px dashed var(--orange); border-radius: 22px;
}
.results { display: grid; gap: .6rem; margin-block: .9rem; }
.result {
  display: grid; grid-template-columns: auto 54px minmax(0, 1fr) auto; align-items: center; gap: .9rem; padding: .5rem .7rem; overflow-wrap: anywhere;
  border-radius: 18px; background: color-mix(in oklch, var(--green) 10%, var(--paper));
  animation: riseIn .4s ease backwards;
  strong, small { display: block; }
  small { color: var(--soft); }
}
.cover {
  --c: var(--blue);
  position: relative; display: grid; place-items: center; inline-size: 100%; aspect-ratio: 2 / 3; overflow: clip;
  border-radius: 6px 12px 12px 6px; padding: .4rem;
  background: linear-gradient(90deg, color-mix(in oklch, var(--c) 70%, black) 0 8%, var(--c) 8%, color-mix(in oklch, var(--c) 75%, white));
  box-shadow: 0 5px 0 color-mix(in oklch, var(--c) 55%, black), 0 10px 16px oklch(40% 0.1 300 / .2);
  color: var(--paper); font-family: var(--display); font-weight: 600; font-size: .85rem; line-height: 1.15; text-align: center;
  text-shadow: 0 1px 0 oklch(0% 0 0 / .3); overflow-wrap: anywhere;
  img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
}
.result .cover { font-size: 0; padding: 0; }
.bookcase {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 150px)); justify-content: center; gap: 1.2rem 1rem; align-items: start;
  margin-block: 1rem 1.4rem; padding: 1.2rem 1rem; border-radius: 22px;
  border-block-end: 16px solid oklch(68% 0.1 60);
  background: linear-gradient(oklch(97% 0.03 80), oklch(93% 0.06 75));
  > .hint { grid-column: 1 / -1; margin: 0; }
  /* The shelf is always light wood, so its writing is always dark, whatever the colour theme. */
  color: oklch(30% 0.08 300);
  .book-card strong { color: oklch(30% 0.08 300); }
  .book-card small, > .hint { color: oklch(45% 0.06 300); }
}
.book-card {
  display: grid; gap: .35rem; padding: 0; border: 0; background: none; text-align: center;
  font-family: var(--display); line-height: 1.2;
  transition: translate .5s var(--spring), rotate .5s var(--spring);
  animation: popIn .5s var(--spring) backwards;
  &:hover { translate: 0 -6px; rotate: -2deg; }
  &[aria-pressed="true"] { translate: 0 -8px; .cover { outline: 5px solid var(--purple); outline-offset: 3px; } }
  strong { font-weight: 600; font-size: .95rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-clamp: 2; overflow: hidden; }
  small { font-family: var(--body); font-size: .8rem; color: var(--soft); }
}
.book-detail {
  display: grid; grid-template-columns: 130px 1fr; gap: 1.2rem; align-items: start;
  margin-block-start: 1rem; padding: 1rem; border-radius: 22px;
  background: color-mix(in oklch, var(--purple) 10%, var(--paper));
  box-shadow: inset 0 0 0 3px color-mix(in oklch, var(--purple) 35%, var(--paper));
  animation: riseIn .4s ease;
  @media (width < 520px) { grid-template-columns: 1fr; #book-cover { max-inline-size: 130px; } }
}
.book-fields {
  display: grid; gap: .7rem; justify-items: start;
  .text-input { inline-size: 100%; }
  label { display: grid; gap: .2rem; inline-size: 100%; font-family: var(--display); font-weight: 600; }
  .hint { margin: 0; }
}
.fold {
  margin-block-start: 1rem;
  summary { display: inline-block; cursor: pointer; padding: .35rem .9rem; border-radius: 999px; font-family: var(--display); font-weight: 600; background: color-mix(in oklch, var(--c) 16%, var(--paper)); }
  &[open] summary { margin-block-end: .9rem; }
}
.text-input {
  flex: 1 1 220px; padding: .6rem 1.1rem; border: 4px solid var(--green); border-radius: 999px; background: var(--paper);
  transition: box-shadow .2s;
  &::placeholder { color: var(--soft); opacity: .7; }
  &:focus { outline: 0; box-shadow: 0 0 0 6px color-mix(in oklch, var(--green) 35%, transparent); }
}
.badges { display: flex; flex-wrap: wrap; gap: .6rem; }
.badge {
  padding: .3rem .85rem; border-radius: 999px; background: oklch(93% 0 0); color: oklch(65% 0 0);
  font-family: var(--display); font-weight: 600; filter: grayscale(1);

  &.earned {
    background: linear-gradient(120deg, var(--yellow), var(--orange)); color: var(--ink); filter: none;
    box-shadow: 0 4px 0 color-mix(in oklch, var(--orange) 70%, black);
    animation: popIn .6s var(--spring);
  }
}
.word { font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 7vw, 3.2rem); margin-block-end: .2em; }

/* ---------- Music ---------- */
/* On a narrow screen the keyboard keeps its size and slides sideways instead of squashing. */
.piano-scroll { overflow-x: auto; padding-block-end: 14px; }
.piano { position: relative; display: flex; gap: 6px; block-size: 230px; min-inline-size: 540px; touch-action: pan-x; user-select: none; }
.key {
  --deep: color-mix(in oklch, var(--c) 65%, black);
  flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: .2rem;
  padding-block-end: .8rem; border: 0; border-radius: 12px 12px 22px 22px;
  background: linear-gradient(color-mix(in oklch, var(--c) 70%, white), var(--c) 45%);
  color: var(--paper); font-family: var(--display); font-weight: 700; font-size: 1.2rem;
  text-shadow: 0 1px 0 oklch(0% 0 0 / .3);
  box-shadow: 0 8px 0 var(--deep), inset 0 3px 0 oklch(100% 0 0 / .45);
  transition: translate .08s, box-shadow .08s, filter .08s;

  small { font-size: .8rem; opacity: .85; }
  &.playing { translate: 0 7px; box-shadow: 0 1px 0 var(--deep), inset 0 3px 0 oklch(100% 0 0 / .45); filter: brightness(1.2) saturate(1.2); }
}
.band {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 1rem;

  button {
    --c: var(--pink);
    padding: .7rem .6rem; border: 0; border-radius: 26px;
    background: color-mix(in oklch, var(--c) 20%, var(--paper));
    box-shadow: 0 6px 0 color-mix(in oklch, var(--c) 60%, var(--paper));
    font-family: var(--display); font-weight: 600;
    transition: scale .5s var(--spring);
    &:hover { scale: 1.06; }
    span { display: block; font-size: 3rem; }
  }
}

/* ---------- Lab ---------- */
.question { font-family: var(--display); font-weight: 700; font-size: clamp(2.6rem, 10vw, 4.5rem); text-align: center; margin-block: .5rem; }
.answers {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 1rem; margin-block: 1rem 1.4rem;
  .btn { justify-content: center; font-size: 1.8rem; border-radius: 24px; animation: popIn .5s var(--spring) backwards; }
  .btn:nth-child(2) { animation-delay: .06s; }
  .btn:nth-child(3) { animation-delay: .12s; }
  .btn:nth-child(4) { animation-delay: .18s; }
  .btn.shake { animation: shake .4s ease; }
  .btn:disabled { opacity: .35; cursor: default; }
}

.mixer { display: flex; flex-wrap: wrap; align-items: center; gap: 2rem; }
.beaker {
  position: relative; inline-size: 150px; block-size: 190px; flex: none; overflow: clip;
  border: 6px solid oklch(84% 0.03 250); border-block-start: 0; border-radius: 6px 6px 44px 44px;
  background: oklch(98% 0.01 250);
  box-shadow: 0 0 40px var(--mix, transparent);
  transition: box-shadow .3s;
}
.liquid {
  position: absolute; inset: auto 0 0; block-size: 72%;
  background: linear-gradient(oklch(100% 0 0 / .35), transparent 30%), var(--mix, gray);
  border-radius: 40% 60% 0 0 / 12px 16px 0 0;
  transition: background .2s;

  i {
    position: absolute; inset-block-end: 0; inline-size: 14px; aspect-ratio: 1; border-radius: 50%;
    background: oklch(100% 0 0 / .6); animation: bubbleUp 2.4s ease-in infinite;
    &:nth-child(1) { inset-inline-start: 18%; }
    &:nth-child(2) { inset-inline-start: 48%; animation-delay: -.8s; inline-size: 9px; }
    &:nth-child(3) { inset-inline-start: 74%; animation-delay: -1.6s; }
  }
}
@keyframes bubbleUp { to { translate: 0 -130px; opacity: 0; } }

/* My colors: the saved mixes under the beaker. */
.my-colors { margin-block-start: 1.4rem; padding-block-start: 1rem; border-block-start: 3px dashed color-mix(in oklch, var(--purple) 30%, var(--paper)); }
.my-colors .row { justify-content: space-between; }
.my-colors .hint { min-block-size: 1.4em; margin-block: .5rem; }
.color-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .6rem; margin: 0; padding: 0; list-style: none;
  li {
    display: flex; align-items: center; gap: .7rem; padding: .5rem .6rem; border-radius: 18px;
    background: color-mix(in oklch, var(--purple) 8%, var(--paper));
  }
}
.color-swatch {
  inline-size: 3rem; aspect-ratio: 1; flex: none; padding: 0; border-radius: 50%; cursor: pointer;
  border: 4px solid var(--paper); box-shadow: 0 0 0 2px color-mix(in oklch, var(--ink) 20%, transparent);
  transition: scale .3s var(--spring);
  &:hover { scale: 1.1; }
}
.color-info {
  display: grid; flex: 1; min-inline-size: 0; line-height: 1.3;
  strong { font-family: var(--display); text-transform: capitalize; }
  code { font-size: .85rem; opacity: .8; }
}
.color-amounts {
  display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: .9rem; margin-block: .15rem;
  > span { display: grid; font-size: .9rem; font-variant-numeric: tabular-nums; }
  small { font-size: .75rem; opacity: .75; padding-inline-start: 1.45em; }
}
.color-remove {
  flex: none; inline-size: 2rem; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: color-mix(in oklch, var(--red) 18%, var(--paper)); color: var(--ink); font-weight: 700;
}

.sliders {
  flex: 1 1 260px;
  label { display: flex; align-items: center; gap: .7rem; font-family: var(--display); font-weight: 600; margin-block-end: .9rem; }
  output { inline-size: 2.6rem; text-align: end; font-variant-numeric: tabular-nums; }

  input {
    flex: 1; appearance: none; block-size: 1.1rem; border-radius: 999px;
    background: linear-gradient(90deg, oklch(25% 0.02 300), var(--c));
    box-shadow: 0 0 0 4px color-mix(in oklch, var(--c) 25%, var(--paper));

    &::-webkit-slider-thumb {
      appearance: none; inline-size: 2.1rem; aspect-ratio: 1; border-radius: 50%;
      background: var(--paper); border: 7px solid var(--c);
      box-shadow: 0 4px 0 oklch(0% 0 0 / .18); cursor: grab;
    }
    &::-moz-range-thumb {
      inline-size: 1.3rem; block-size: 1.3rem; border-radius: 50%;
      background: var(--paper); border: 7px solid var(--c);
      box-shadow: 0 4px 0 oklch(0% 0 0 / .18); cursor: grab;
    }
  }
}

/* ---------- Flip cards (facts + memory game) ---------- */
.flip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.1rem; }
.flip {
  position: relative; border: 0; background: none; padding: 0; perspective: 700px;
  transition: scale .5s var(--spring), rotate .5s var(--spring);
  &:hover { scale: 1.05; rotate: -1.5deg; }
  &.flipped .flip-inner { transform: rotateY(180deg); }
}
.flip-inner { position: absolute; inset: 0; transition: transform .7s var(--spring); transform-style: preserve-3d; }
.flip-face {
  position: absolute; inset: 0; display: grid; place-items: center; padding: .7rem;
  border-radius: 24px; backface-visibility: hidden;
}
.flip-front {
  background: radial-gradient(circle at 30% 25%, color-mix(in oklch, var(--c) 55%, white), var(--c) 70%);
  box-shadow: 0 6px 0 color-mix(in oklch, var(--c) 65%, black);
  color: var(--paper); font-size: 3.2rem;
}
.flip-back {
  background: color-mix(in oklch, var(--c) 12%, var(--paper));
  box-shadow: inset 0 0 0 4px var(--c);
  transform: rotateY(180deg);
}
.fact {
  block-size: 180px;
  .flip-back { font-size: .98rem; font-weight: 800; line-height: 1.3; text-wrap: balance; }
}

/* ---------- Games ---------- */
.memory {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; max-inline-size: 480px; margin: 1rem auto;

  .flip { aspect-ratio: 1; }
  .flip-front {
    background: conic-gradient(from 45deg, var(--pink), var(--purple), var(--blue), var(--purple), var(--pink));
    font-size: 1.8rem;
  }
  .flip-back { font-size: clamp(1.8rem, 8vw, 3rem); }
  .matched .flip-back {
    background: color-mix(in oklch, var(--green) 25%, var(--paper));
    box-shadow: inset 0 0 0 4px var(--green), 0 0 22px var(--green);
  }
}
.arena {
  position: relative; block-size: 360px; overflow: clip; margin-block-start: 1rem;
  border-radius: 26px; user-select: none;
  background: linear-gradient(oklch(88% 0.08 230), oklch(96% 0.04 200));
  box-shadow: inset 0 0 0 4px oklch(100% 0 0 / .7);
}
.arena-msg { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; font-family: var(--display); font-size: 1.5rem; padding: 1rem; }
.pop-bubble {
  position: absolute; inset-block-end: -80px; inline-size: 72px; aspect-ratio: 1; padding: 0;
  border: 3px solid oklch(100% 0 0 / .9); border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, oklch(100% 0 0), oklch(100% 0 0 / .25) 40%, color-mix(in oklch, var(--purple) 35%, transparent));
  box-shadow: inset -6px -8px 14px color-mix(in oklch, var(--pink) 45%, transparent);
  font-size: 2rem;

  span { display: block; transition: scale .18s, opacity .18s; }
  &.popped {
    border-color: transparent; background: none; box-shadow: none;
    span { scale: 2; opacity: 0; }
  }
}

/* ---------- Story Machine ---------- */
.text-input.mini {
  --c: var(--green);
  flex: 1 1 240px; padding: .35rem .9rem; font-size: 1rem; border-width: 3px; border-style: dashed;
  border-color: color-mix(in oklch, var(--c) 60%, var(--paper));
  &:focus { border-style: solid; box-shadow: 0 0 0 5px color-mix(in oklch, var(--c) 30%, transparent); }
}
.story {
  h3 { font-size: 1.5rem; color: color-mix(in oklch, var(--orange) 60%, var(--shade)); }
  p { margin-block-end: .9em; animation: riseIn .6s ease backwards; }
  p:last-child { margin-block-end: 0; }
  .chapter {
    margin-block: 1.2em .3em; font-family: var(--display); font-weight: 600; font-size: 1rem;
    letter-spacing: .08em; text-transform: uppercase; color: var(--soft);
  }
}
#story-tools { margin-block-start: 1rem; }
.saved { display: grid; gap: .6rem; }
.saved-row { display: flex; align-items: center; gap: .5rem; .chip { text-align: start; } }
.icon-btn {
  inline-size: 2.4rem; aspect-ratio: 1; flex: none; border: 0; border-radius: 50%; padding: 0;
  background: color-mix(in oklch, var(--red) 15%, var(--paper));
  transition: scale .5s var(--spring);
  &:hover { scale: 1.2; }
}
.word-example { font-style: italic; color: var(--soft); }

/* ---------- Math Zone, quiz and word games ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .9rem; margin-block-end: 1.2rem; }
.tile {
  --c: var(--blue);
  display: grid; justify-items: center; gap: .1rem; padding: .8rem .5rem; border: 0; border-radius: 24px;
  background: color-mix(in oklch, var(--c) 16%, var(--paper));
  box-shadow: inset 0 0 0 3px color-mix(in oklch, var(--c) 50%, var(--paper)), 0 5px 0 color-mix(in oklch, var(--c) 45%, var(--paper));
  font-family: var(--display); line-height: 1.2;
  transition: translate .5s var(--spring), rotate .5s var(--spring), background .2s;

  &:hover { translate: 0 -4px; rotate: -1.5deg; }
  strong { font-weight: 600; font-size: 1.1rem; }
  small { font-family: var(--body); font-size: .85rem; color: var(--soft); text-wrap: balance; }
  &[aria-pressed="true"] {
    background: var(--c); color: var(--paper); text-shadow: 0 1px 0 oklch(0% 0 0 / .25);
    box-shadow: 0 6px 0 color-mix(in oklch, var(--c) 65%, black);
    small { color: inherit; opacity: .92; }
  }
}
.tile-icon { font-size: 2.2rem; text-shadow: none; }
.tip {
  padding: .7rem 1rem; border-radius: 18px; font-size: 1rem;
  background: color-mix(in oklch, var(--yellow) 30%, var(--paper));
  border-inline-start: 6px solid var(--orange);
}
.play {
  margin-block-start: 1.2rem; padding: clamp(1rem, 3vw, 1.6rem); border-radius: 26px; text-align: center;
  background: color-mix(in oklch, var(--c) 9%, var(--paper));
  box-shadow: inset 0 0 0 3px color-mix(in oklch, var(--c) 30%, var(--paper));
}
.lead { margin: 0; font-family: var(--display); font-weight: 600; color: var(--soft); }
.word-problem { max-inline-size: 34em; margin: .6rem auto 0; font-size: 1.25rem; }
.question {
  &.long { font-size: clamp(1.8rem, 6.5vw, 3.2rem); }
  &.text { font-size: clamp(1.3rem, 4vw, 1.8rem); font-weight: 600; }
  .sub { display: block; margin-block-start: .4em; font-size: .55em; color: var(--soft); }
}
.frac {
  display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle;
  margin-inline: .12em; font-size: .72em; line-height: 1.12;
  span:first-child { padding-inline: .22em; border-block-end: .09em solid currentColor; }
}
.slot {
  display: inline-block; min-inline-size: 1.3em; padding: 0 .22em; border-radius: .25em; vertical-align: middle;
  border: .07em dashed var(--purple); color: var(--purple);
  background: color-mix(in oklch, var(--purple) 10%, var(--paper));
  &.filled { border-style: solid; }
  &.right {
    border: .07em solid var(--green); color: color-mix(in oklch, var(--green) 55%, var(--shade));
    background: color-mix(in oklch, var(--green) 20%, var(--paper));
    animation: popIn .5s var(--spring);
  }
}
.shape {
  inline-size: 2.6em; vertical-align: middle; overflow: visible;
  path, rect { stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
  &.bar { inline-size: min(5.5em, 80%); }
}
.type-row {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem;
  .text-input { flex: 0 1 260px; border-color: var(--purple); font-size: 1.5rem; text-align: center; }
}
.answers .btn .frac { font-size: .8em; }

.letters { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; min-block-size: 3.4rem; margin-block: .8rem; }
.letter {
  --c: var(--blue);
  inline-size: 2.9rem; aspect-ratio: 1; padding: 0; border: 0; border-radius: 14px;
  background: var(--c); color: var(--paper);
  font-family: var(--display); font-weight: 700; font-size: 1.5rem; text-transform: uppercase;
  box-shadow: 0 5px 0 color-mix(in oklch, var(--c) 65%, black);
  transition: scale .4s var(--spring), opacity .2s;
  animation: popIn .4s var(--spring) backwards;
  &:hover { scale: 1.12; }
  &:disabled { opacity: .18; cursor: default; scale: 1; }
}
.letters.built {
  padding: .5rem; border-radius: 18px; border: 3px dashed color-mix(in oklch, var(--purple) 45%, var(--paper));
  .letter { --c: var(--purple); }
  .letter:disabled { --c: var(--green); opacity: 1; }
}

.answers.wide {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  .btn { font-size: 1.1rem; line-height: 1.25; padding-block: .8rem; text-align: center; }
}
.answers .btn.correct { opacity: 1; outline: 5px solid var(--green); outline-offset: 3px; }
.pads { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; }

/* ---------- Game menu and new games ---------- */
#hub-groups h2 { margin-block: 1.6rem .8rem; }
a.tile { text-decoration: none; color: var(--ink); text-align: center; }
.tiles.big { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); .tile { padding-block: 1.1rem; } .tile-icon { font-size: 2.8rem; } }
.game .back { margin-block-end: 1rem; }
.reset-bar { text-align: center; margin-block-start: 1rem; opacity: .85; }

.type-box {
  display: block; inline-size: min(300px, 100%); margin: 1rem auto 0; text-align: center; font-size: 1.3rem;
  border-color: var(--c);
  &.wide { inline-size: 100%; text-align: start; }
}
.pop-bubble.letter-bubble {
  display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 2rem; color: var(--ink);
}
.arena.sea {
  background:
    radial-gradient(circle at 20% 110%, oklch(80% 0.12 150 / .7) 0 12%, transparent 13%),
    radial-gradient(circle at 70% 112%, oklch(78% 0.13 160 / .7) 0 14%, transparent 15%),
    linear-gradient(oklch(86% 0.08 215), oklch(68% 0.12 245));
}
.fish {
  position: absolute; inset-inline-start: 100%; display: flex; align-items: center; gap: .15rem; white-space: nowrap;
  transition: opacity .3s, scale .3s;
  &.caught { opacity: 0; scale: 1.5; }
  &.aimed .fish-word { box-shadow: 0 0 0 4px var(--yellow), 0 4px 0 oklch(0% 0 0 / .15); }
}
.fish-emoji { font-size: 2.6rem; }
.fish-word {
  padding: .1rem .7rem; border-radius: 999px; background: var(--paper);
  font-family: var(--display); font-weight: 600; font-size: 1.35rem; letter-spacing: .03em;
  box-shadow: 0 4px 0 oklch(0% 0 0 / .15);
  b { color: color-mix(in oklch, var(--green) 60%, var(--shade)); }
}
/* Book Nook: the three list tabs, and the list switches on an open book. */
.shelf-tabs { display: flex; flex-wrap: wrap; inline-size: fit-content; max-inline-size: 100%; border-radius: 24px; margin-block: .2rem 1rem; }
.book-flags {
  display: flex; flex-wrap: wrap; gap: .4rem; margin-block: .3rem;
  button {
    padding: .35rem .8rem; border: 0; border-radius: 999px; cursor: pointer; font-family: var(--display); font-weight: 600;
    background: color-mix(in oklch, var(--green) 12%, var(--paper)); color: var(--soft); box-shadow: inset 0 0 0 2px color-mix(in oklch, var(--green) 35%, var(--paper));
    &[aria-pressed="true"] { background: var(--green); color: var(--paper); box-shadow: none; }
  }
}

/* Quick picks under every book and on every search result: 📖 read, 🏠 own, ⭐ wish list. */
.book-item {
  /* Each book and its three buttons sit together on one little card, so the buttons clearly belong
     to the book above them, not the one below. */
  display: grid; justify-items: center; gap: .45rem; align-self: stretch; grid-template-rows: 1fr auto;
  padding: .55rem .45rem .5rem; border-radius: 18px;
  background: oklch(100% 0 0 / .55); box-shadow: 0 3px 0 oklch(60% 0.08 60 / .35), inset 0 0 0 2px oklch(100% 0 0 / .7);
}
.book-item .book-card { inline-size: 100%; }
.book-item .quick-flags { padding-block-start: .45rem; border-block-start: 2px dashed oklch(70% 0.08 60 / .6); inline-size: 100%; justify-content: center; }
.quick-flags {
  display: flex; gap: .3rem;
  button {
    inline-size: 2.2rem; block-size: 2.2rem; padding: 0; border: 0; border-radius: 50%; cursor: pointer; font-size: 1.05rem; line-height: 1;
    background: var(--paper); box-shadow: inset 0 0 0 2px color-mix(in oklch, var(--ink) 18%, transparent); filter: grayscale(1); opacity: .6;
    transition: scale .2s var(--spring), opacity .15s;
    &:hover { opacity: .9; scale: 1.1; }
    &[aria-pressed="true"] { filter: none; opacity: 1; background: color-mix(in oklch, var(--yellow) 45%, var(--paper)); box-shadow: inset 0 0 0 2px var(--orange); }
  }
}

/* Book search: picking several books, and the page buttons. */
.pick-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-block: .8rem .5rem; }
.pager { display: flex; align-items: center; justify-content: center; gap: .8rem; margin-block-start: .8rem; }
.pick-box { inline-size: 1.4rem; block-size: 1.4rem; flex: none; accent-color: var(--green); cursor: pointer; }
.result { cursor: pointer; }
/* On a phone the quick picks drop under the title, so nothing is squeezed. */
@media (width < 480px) {
  .result { grid-template-columns: auto 44px minmax(0, 1fr); gap: .5rem .7rem; }
  .result .quick-flags { grid-column: 3; }
}
.results.settled .result { animation: none; } /* no pop-in again when a box is ticked */
.result.picked { box-shadow: inset 0 0 0 3px var(--green); }

/* The warning under a story box when a word is not allowed. */
.word-warning { margin: .3rem 0 0; padding: .35rem .8rem; border-radius: 14px; font-weight: 800; background: color-mix(in oklch, var(--red) 16%, var(--paper)); box-shadow: inset 0 0 0 2px var(--red); }
.text-input.flagged { border-color: var(--red); box-shadow: 0 0 0 4px color-mix(in oklch, var(--red) 30%, transparent); }

/* Speed Words: one big word at a time. */
.speed-word {
  margin: .6rem 0 .2rem; font-family: var(--display); font-weight: 700; font-size: clamp(2.2rem, 9vw, 4rem); letter-spacing: .04em; line-height: 1.1; overflow-wrap: anywhere;
  .ok { color: color-mix(in oklch, var(--green) 70%, var(--shade)); }
  .bad { color: var(--red); text-decoration: underline wavy; }
  .now { border-block-end: 4px solid var(--orange); }
}
textarea.type-box { resize: none; border-radius: 22px; line-height: 1.4; font-family: var(--body); }
.sprint-text {
  font-family: var(--display); font-weight: 500; font-size: clamp(1.3rem, 3.6vw, 1.9rem); line-height: 1.7;
  text-align: start; white-space: pre-wrap; cursor: text;
  .ok { color: color-mix(in oklch, var(--green) 55%, var(--shade)); }
  .bad { background: color-mix(in oklch, var(--red) 35%, var(--paper)); border-radius: 5px; }
  .now { box-shadow: inset 0 -.16em 0 var(--purple); }
}

.lives {
  display: flex; justify-content: center; gap: .35rem; margin-block: .8rem;
  span { inline-size: 1.7rem; aspect-ratio: 1; border-radius: 50%; background: var(--c); transition: opacity .4s, scale .4s var(--spring); }
  .lost { opacity: .15; scale: .7; }
}
.mystery-word {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin-block: 1rem;
  font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 5.5vw, 2.6rem); text-transform: uppercase;
  span { inline-size: 1.15em; block-size: 1.4em; border-block-end: .12em solid var(--ink); text-align: center; line-height: 1.3; }
  .missed { color: var(--red); }
}
.keys {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; max-inline-size: 560px; margin: 1rem auto 0;
  .letter { inline-size: 2.5rem; font-size: 1.25rem; animation: none; }
  .letter.hit { --c: var(--green); opacity: 1; }
  .letter.miss { --c: oklch(75% 0 0); opacity: .5; }
}

/* The board is a fixed square and its squares share the space, so nothing can spill out of it. */
.board { display: grid; grid-auto-rows: 1fr; gap: 8px; aspect-ratio: 1; max-inline-size: 360px; margin: 1rem auto 1.4rem; }
.cell {
  --c: var(--blue);
  min-inline-size: 0; min-block-size: 0; padding: 0; border: 0; border-radius: 18px; background: var(--paper);
  box-shadow: inset 0 0 0 3px color-mix(in oklch, var(--c) 45%, var(--paper)), 0 4px 0 color-mix(in oklch, var(--c) 35%, var(--paper));
  font-family: var(--display); font-weight: 700; font-size: clamp(1.6rem, 8vw, 2.8rem); color: var(--ink);
  transition: scale .4s var(--spring);
  &:not(:disabled):hover { scale: 1.06; }
  &.win { background: color-mix(in oklch, var(--green) 30%, var(--paper)); box-shadow: inset 0 0 0 4px var(--green); }
}
.slide .cell {
  background: var(--c); color: var(--paper); text-shadow: 0 1px 0 oklch(0% 0 0 / .3);
  box-shadow: 0 5px 0 color-mix(in oklch, var(--c) 65%, black);
  &.blank { visibility: hidden; }
  &.win { background: var(--green); box-shadow: 0 5px 0 color-mix(in oklch, var(--green) 65%, black); }
}
.sudoku {
  gap: 5px; max-inline-size: 400px;
  .cell { border-radius: 10px; font-size: clamp(1.2rem, 5vw, 1.7rem); color: var(--purple); box-shadow: inset 0 0 0 2px color-mix(in oklch, var(--blue) 35%, var(--paper)); }
  .alt { background: color-mix(in oklch, var(--yellow) 30%, var(--paper)); box-shadow: inset 0 0 0 2px color-mix(in oklch, var(--orange) 40%, var(--paper)); }
  .given { color: var(--ink); }
  .sel { outline: 4px solid var(--purple); outline-offset: 1px; z-index: 1; }
  .bad { background: color-mix(in oklch, var(--red) 30%, var(--paper)); color: color-mix(in oklch, var(--red) 60%, var(--shade)); }
  .win { background: color-mix(in oklch, var(--green) 30%, var(--paper)); }
}

/* ---------- Synth, recorder and metronome ---------- */
.key.black {
  position: absolute; inset-block-start: 0; z-index: 2; flex: none;
  inline-size: 6.4%; block-size: 58%; translate: -50% 0; padding-block-end: .5rem;
  border-radius: 0 0 12px 12px; font-size: .85rem;
  background: linear-gradient(oklch(40% 0.06 300), oklch(22% 0.05 300));
  box-shadow: 0 6px 0 oklch(12% 0.03 300), inset 0 2px 0 oklch(100% 0 0 / .25);
  small { font-size: .7rem; }
  &.playing { translate: -50% 5px; box-shadow: 0 1px 0 oklch(12% 0.03 300); filter: brightness(1.6); }
}
.key { padding-inline: 0; min-inline-size: 0; }
.studio { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1rem; margin-block-start: 1.6rem; }
.studio-box {
  padding: 1rem 1.1rem; border-radius: 24px;
  background: color-mix(in oklch, var(--c) 9%, var(--paper));
  box-shadow: inset 0 0 0 3px color-mix(in oklch, var(--c) 30%, var(--paper));
  .score { margin-block: .6rem 0; font-size: 1.05rem; }
  .hint { margin-block: .5rem 0; }
  .btn:disabled { opacity: .4; cursor: default; }
}
.rec-bar {
  block-size: .8rem; margin-block-start: .9rem; border-radius: 999px; overflow: clip;
  background: color-mix(in oklch, var(--red) 15%, var(--paper));
  i { display: block; block-size: 100%; border-radius: inherit; background: var(--red); transform: scaleX(0); transform-origin: 0 50%; transition: transform .1s linear; }
}
.btn.live { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { scale: 1.08; filter: brightness(1.2); } }
.beats {
  display: flex; gap: .6rem; margin-block-end: .8rem;
  i { inline-size: 1.6rem; aspect-ratio: 1; border-radius: 50%; background: color-mix(in oklch, var(--c) 22%, var(--paper)); transition: scale .25s var(--spring); }
  i.on { background: var(--c); scale: 1.35; box-shadow: 0 0 14px var(--c); }
  i:first-child.on { background: var(--pink); box-shadow: 0 0 14px var(--pink); }
}
.check { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--display); font-weight: 600; cursor: pointer; input { inline-size: 1.3rem; block-size: 1.3rem; } }
.sliders.speed { flex: none; max-inline-size: 420px; margin-block-end: .8rem; }

/* ---------- Arcade ---------- */
.arcade-screen {
  display: block; inline-size: 100%; margin: 1rem auto 0; border-radius: 22px; touch-action: none; user-select: none;
  box-shadow: 0 0 0 5px color-mix(in oklch, var(--c) 55%, var(--paper)), 0 10px 0 color-mix(in oklch, var(--c) 45%, transparent);
}
.arcade-pad { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-block-start: 1.4rem; }
.pad-btn {
  min-inline-size: 4rem; block-size: 4rem; padding-inline: 1rem; border: 0; border-radius: 22px;
  background: color-mix(in oklch, var(--c) 22%, var(--paper));
  box-shadow: 0 6px 0 color-mix(in oklch, var(--c) 55%, var(--paper));
  font-family: var(--display); font-weight: 600; font-size: 1.5rem; touch-action: none; user-select: none;
  &:active { translate: 0 5px; box-shadow: 0 1px 0 color-mix(in oklch, var(--c) 55%, var(--paper)); }
}

/* ---------- Profile and leaderboard ---------- */
.who:empty { display: none; }
.who {
  padding: .3rem .8rem; border-radius: 999px; white-space: nowrap; max-inline-size: 11rem; overflow: hidden; text-overflow: ellipsis;
  background: color-mix(in oklch, var(--blue) 20%, var(--paper));
  font-family: var(--display); font-weight: 600; font-size: 1rem; color: var(--ink); text-decoration: none;
  transition: scale .5s var(--spring);
  &:hover { scale: 1.08; }
}
.score-table h3, #boards h3 { margin-block: 1.4rem .5rem; font-size: 1.25rem; }
.score-row {
  display: grid; grid-template-columns: 1fr auto 7.5rem; align-items: center; gap: .8rem; padding: .45rem .8rem; border-radius: 14px;
  font-family: var(--display);
  &:nth-child(odd) { background: color-mix(in oklch, var(--purple) 8%, var(--paper)); }
  .score-place { text-align: end; color: var(--soft); font-size: .95rem; }
}
.champions { display: flex; flex-wrap: wrap; gap: .6rem; margin-block-end: .5rem; }
.board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 1rem; }
.board-card {
  --c: var(--blue);
  padding: .8rem 1rem; border-radius: 22px;
  background: color-mix(in oklch, var(--c) 10%, var(--paper));
  box-shadow: inset 0 0 0 3px color-mix(in oklch, var(--c) 40%, var(--paper));
  h4 { margin: 0 0 .5rem; font-family: var(--display); font-size: 1.1rem; }
  ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
  li { display: flex; justify-content: space-between; gap: .6rem; padding: .15rem .5rem; border-radius: 10px; font-family: var(--display); }
  li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  li.me { background: var(--yellow); color: oklch(30% 0.08 80); }
  .hint { margin: .4rem 0 0; font-size: .85rem; }
}
#board-refresh { margin-block-start: 1.2rem; }

/* ---------- "Are you sure?" screen ---------- */
.ask {
  inline-size: min(460px, calc(100% - 32px)); padding: 0; border: 6px solid var(--red); border-radius: var(--radius);
  background: var(--paper); color: var(--ink);
  box-shadow: 0 20px 60px oklch(30% 0.1 300 / .45);
  animation: popIn .4s var(--spring);
  &::backdrop { background: oklch(30% 0.1 300 / .55); backdrop-filter: blur(4px); }
  form { display: grid; gap: .9rem; padding: 1.4rem; }
  h2 { margin: 0; color: color-mix(in oklch, var(--red) 70%, var(--shade)); }
  p { margin: 0; font-size: 1.15rem; }
  label { display: grid; gap: .4rem; font-family: var(--display); font-weight: 600; }
  .row { justify-content: space-between; margin-block-start: .4rem; }
  .btn:disabled { opacity: .35; cursor: default; }
}

/* ---------- Reminder boxes ---------- */
.notice {
  display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem;
  margin-block: 1rem; padding: .9rem 1.1rem; border-radius: 20px;
  background: color-mix(in oklch, var(--yellow) 35%, var(--paper));
  box-shadow: inset 0 0 0 3px var(--orange);
  p { flex: 1 1 280px; margin: 0; }
}

.link-btn {
  border: 0; background: none; padding: .3rem .2rem; font-family: var(--display); font-weight: 600;
  color: color-mix(in oklch, var(--blue) 70%, var(--shade)); text-decoration: underline; text-underline-offset: .2em;
}

select.text-input { appearance: auto; font-family: var(--display); font-weight: 500; cursor: pointer; }

.admin-list { display: grid; gap: .5rem; }
.admin-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; padding: .5rem .8rem; border-radius: 16px;
  background: color-mix(in oklch, var(--red) 7%, var(--paper));
  strong { font-family: var(--display); font-weight: 600; }
  .hint { margin: 0 auto 0 0; }
}

/* ---------- Word Quest ---------- */
.wq-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; max-inline-size: 300px; margin: 0 auto 1rem; }
.wq-tile {
  display: grid; place-items: center; aspect-ratio: 1; border-radius: 12px;
  background: var(--paper); box-shadow: inset 0 0 0 3px color-mix(in oklch, var(--ink) 18%, var(--paper));
  font-family: var(--display); font-weight: 700; font-size: 1.8rem; text-transform: uppercase;
  &.typed { box-shadow: inset 0 0 0 3px var(--purple); animation: popIn .25s var(--spring); }
  &.right, &.near, &.miss { color: var(--paper); box-shadow: none; text-shadow: 0 1px 0 oklch(0% 0 0 / .25); animation: flipIn .5s ease backwards; }
  &.right { background: oklch(66% 0.19 150); }
  &.near { background: oklch(76% 0.17 80); }
  &.miss { background: oklch(62% 0.02 300); }
}
@keyframes flipIn { from { transform: rotateX(90deg); background: var(--paper); } }
.wq-keys {
  display: grid; gap: 6px; justify-items: center; touch-action: manipulation;
  div { display: flex; gap: 5px; justify-content: center; inline-size: 100%; }
}
.wq-key {
  flex: 1 1 0; max-inline-size: 2.7rem; min-inline-size: 0; block-size: 3.1rem; padding: 0; border: 0; border-radius: 10px;
  background: color-mix(in oklch, var(--purple) 18%, var(--paper));
  font-family: var(--display); font-weight: 600; font-size: 1.1rem; text-transform: uppercase; color: var(--ink);
  &.wide { flex: 1.6 1 0; max-inline-size: 4.4rem; font-size: .85rem; text-transform: none; }
  &.right { background: oklch(66% 0.19 150); color: var(--paper); }
  &.near { background: oklch(76% 0.17 80); color: var(--paper); }
  &.miss { background: oklch(72% 0.02 300); color: var(--paper); opacity: .7; }
  &:active { scale: .92; }
}

/* ---------- Card games ---------- */
.card-table {
  container-type: inline-size; max-inline-size: 720px; margin: 1rem auto 0; padding: clamp(.6rem, 2vw, 1.1rem);
  border-radius: 24px; background: linear-gradient(160deg, oklch(88% 0.09 160), oklch(80% 0.11 175));
  box-shadow: inset 0 0 0 4px oklch(100% 0 0 / .55);
  user-select: none; touch-action: manipulation;
}
.pcard {
  position: relative; display: block; inline-size: var(--cw); aspect-ratio: 5 / 7; padding: 0; flex: none;
  border: 0; border-radius: calc(var(--cw) * .11); background: var(--paper); color: var(--ink);
  box-shadow: 0 0 0 1px oklch(40% 0.05 300 / .35), 0 2px 4px oklch(30% 0.05 300 / .25);
  font-family: var(--display); font-weight: 700; line-height: 1;
  &.red { color: oklch(58% 0.22 25); }
  &.down {
    background: repeating-linear-gradient(45deg, var(--pink) 0 6px, var(--purple) 6px 12px);
    box-shadow: inset 0 0 0 calc(var(--cw) * .06) var(--paper), 0 0 0 1px oklch(40% 0.05 300 / .35), 0 2px 4px oklch(30% 0.05 300 / .25);
  }
  &.spot {
    display: grid; place-items: center; background: oklch(100% 0 0 / .25); box-shadow: inset 0 0 0 2px oklch(100% 0 0 / .7);
    color: oklch(100% 0 0 / .9); font-size: calc(var(--cw) * .5);
  }
  &.covered { filter: brightness(.93); }
  &.picked { outline: 4px solid var(--yellow); outline-offset: 2px; translate: 0 -8%; z-index: 3; }
  &.can-play { box-shadow: 0 0 0 3px var(--green), 0 4px 6px oklch(30% 0.05 300 / .3); }
}
button.pcard { cursor: pointer; transition: translate .15s; }
/* A card you point at lifts up and comes to the very front, above every other card on the table. */
button.pcard:not(.spot):hover, button.pcard:not(.spot):focus-visible { translate: 0 -6%; z-index: 50; }
/* In a solitaire column the cards must stay in their stacked order, so there a card glows instead of lifting. */
.cs-col button.pcard:not(.spot):hover, .cs-col button.pcard:not(.spot):focus-visible {
  translate: none; z-index: auto; filter: brightness(1.08);
  box-shadow: 0 0 0 3px var(--yellow), 0 2px 4px oklch(30% 0.05 300 / .25);
}
.pc-corner { position: absolute; inset-block-start: 6%; inset-inline-start: 9%; font-size: calc(var(--cw) * .27); text-align: center; }
.pc-big { position: absolute; inset: 0; display: grid; place-items: center; padding-block-start: 18%; font-size: calc(var(--cw) * .5); }

/* Classic Solitaire: seven columns, each card peeking out from under the next */
.cs-top, .cs-cols { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1.4cqw; --cw: calc((100cqw - 8.4cqw) / 7); }
.cs-top { margin-block-end: 2.5cqw; }
.cs-col { min-block-size: calc(var(--cw) * 1.4); }
.cs-col .pcard + .pcard { margin-block-start: -100%; }
.cs-col .pcard.down + .pcard { margin-block-start: -120%; }

/* Pyramid and Tri Peaks: cards placed by row and position, overlapping the row above */
.fan {
  position: relative; --cw: calc(100cqw / var(--cols) - 1cqw);
  block-size: calc(var(--cw) * 1.4 * (1 + (var(--rows) - 1) * .5));
  .pcard { position: absolute; inset-inline-start: calc(var(--x) * 100% / var(--cols) + .5cqw); inset-block-start: calc(var(--y) * var(--cw) * .7); z-index: var(--y); }
}
.pile-row { display: flex; align-items: center; justify-content: center; gap: 2.5cqw; margin-block: 3cqw 1cqw; --cw: clamp(46px, 13cqw, 84px); }
.hand { display: flex; flex-wrap: wrap; justify-content: center; gap: 1cqw; --cw: clamp(42px, 11.5cqw, 76px); }
.hand.small { --cw: clamp(24px, 6cqw, 40px); gap: 0; .pcard + .pcard { margin-inline-start: calc(var(--cw) * -.45); } }
.hand-label { margin-block: 1.2cqw .8cqw; text-align: center; font-family: var(--display); font-weight: 600; }
.suit-now { font-family: var(--display); font-weight: 700; font-size: 1.2rem; &.red { color: oklch(52% 0.22 25); } }
.suit-pick { justify-content: center; margin-block: 2cqw; .btn { font-size: 1.6rem; } .red-suit { --c: oklch(58% 0.22 25); } .black-suit { --c: var(--ink); } }
.clash { display: flex; align-items: flex-end; justify-content: center; gap: 3cqw; --cw: clamp(38px, 16cqw, 108px); padding-block-start: 56px; }
.clash-side { display: grid; justify-items: center; gap: .4rem; }
/* The Flip button stands to the left of your deck, level with the cards. */
.clash-flip { align-self: center; margin-inline-end: 1cqw; .btn { white-space: nowrap; font-size: clamp(.95rem, 4cqw, 1.3rem); padding-inline: clamp(.6rem, 3cqw, 1.3rem); } }
.clash-cards { display: flex; align-items: flex-end; gap: 2.5cqw; }
/* A player's remaining cards, drawn as a pile that gets taller or shorter as they win and lose. */
.deck-stack {
  position: relative; inline-size: var(--cw); aspect-ratio: 5 / 7; flex: none;
  .pcard { position: absolute; inset: 0; inline-size: 100%; translate: calc(var(--i) * -.15px) calc(var(--i) * -.95px); transition: translate .3s var(--spring); }
  .deck-count {
    position: absolute; inset: 0; z-index: 2; display: grid; place-items: center;
    translate: calc(var(--top) * -.15px) calc(var(--top) * -.95px); transition: translate .3s var(--spring);
    font-family: var(--display); font-weight: 700; font-size: calc(var(--cw) * .34); color: var(--paper);
    text-shadow: 0 2px 0 oklch(30% 0.1 300 / .6), 0 0 6px oklch(30% 0.1 300 / .7);
  }
}
.clash-vs { align-self: center; font-family: var(--display); font-weight: 700; font-size: 1.4rem; color: oklch(100% 0 0 / .9); }

/* ---------- Five-track recorder and drum pads ---------- */
.studio-box.wide { grid-column: 1 / -1; }
.tracks { display: grid; grid-template-columns: minmax(0, 1fr); gap: .45rem; }
.track {
  --c: var(--blue);
  display: flex; align-items: center; gap: .6rem; padding: .35rem .5rem; border-radius: 16px;
  background: color-mix(in oklch, var(--c) 12%, var(--paper));
  box-shadow: inset 0 0 0 2px color-mix(in oklch, var(--c) 40%, var(--paper));
  &.armed { box-shadow: inset 0 0 0 4px var(--c); }
  &.muted .track-info { opacity: .45; text-decoration: line-through; }
  .icon-btn { inline-size: 2.2rem; background: var(--paper); }
  .icon-btn:disabled { opacity: .35; cursor: default; }
}
.track-pick {
  flex: none; padding: .3rem .8rem; border: 0; border-radius: 999px;
  background: var(--paper); box-shadow: inset 0 0 0 3px var(--c);
  font-family: var(--display); font-weight: 600; color: var(--ink);
  &[aria-pressed="true"] { background: var(--c); color: var(--paper); text-shadow: 0 1px 0 oklch(0% 0 0 / .25); }
  &:disabled { cursor: default; }
}
.track-info { flex: 1 1 auto; min-inline-size: 0; font-family: var(--display); font-size: .98rem; color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drum-pads { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; touch-action: manipulation; user-select: none; }
@media (width < 520px) { .drum-pads { grid-template-columns: repeat(2, 1fr); } }
.drum-pad {
  --c: var(--orange);
  position: relative; padding: .9rem .4rem; border: 0; border-radius: 24px;
  background: linear-gradient(color-mix(in oklch, var(--c) 70%, white), var(--c) 55%); color: var(--paper);
  box-shadow: 0 7px 0 color-mix(in oklch, var(--c) 65%, black), inset 0 3px 0 oklch(100% 0 0 / .45);
  font-family: var(--display); font-weight: 600; font-size: 1.05rem; text-shadow: 0 1px 0 oklch(0% 0 0 / .3);
  span { display: block; font-size: 2.2rem; text-shadow: none; }
  small { position: absolute; inset-block-start: .4rem; inset-inline-end: .7rem; font-size: .8rem; opacity: .85; }
  &:active, &.playing { translate: 0 6px; box-shadow: 0 1px 0 color-mix(in oklch, var(--c) 65%, black); }
}

/* ---------- Who's playing, and the Parent area ---------- */
/* The "Select who's playing" box covers the page. */
.who-plays {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1rem;
  overflow-y: auto; background: oklch(30% 0.1 300 / .6);
}
.who-plays-box {
  inline-size: 100%; max-inline-size: 440px; margin: auto; padding: 1.4rem 1.4rem 1.2rem; border-radius: 32px; text-align: center;
  background: var(--paper); box-shadow: 0 20px 60px oklch(0% 0 0 / .3);
  h2 { margin-block: 0 1rem; }
}
.who-list { display: grid; gap: .7rem; margin-block-end: .9rem; }
.who-kid {
  --c: var(--purple);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .8rem 1.2rem; border: 4px solid var(--c); border-radius: 22px; cursor: pointer;
  background: color-mix(in oklch, var(--c) 12%, var(--paper)); color: var(--ink); text-align: start;
  transition: translate .15s, box-shadow .15s;
  &:hover, &:focus-visible { translate: 0 -2px; box-shadow: 0 6px 0 color-mix(in oklch, var(--c) 60%, black); }
  &.current { background: var(--c); color: var(--paper); }
  &:disabled { opacity: .6; cursor: wait; }
}
.who-kid-name { font-family: var(--display); font-weight: 700; font-size: 1.5rem; }
.who-kid-tag { font-size: .9rem; font-weight: 800; white-space: nowrap; }
.who-msg { min-block-size: 1.4em; margin-block: 0 .6rem; font-weight: 800; color: var(--purple); }
.who-add {
  display: grid; gap: .7rem; margin-block-start: .4rem; padding: 1rem; border-radius: 22px; text-align: start;
  background: color-mix(in oklch, var(--green) 12%, var(--paper));
  box-shadow: inset 0 0 0 3px color-mix(in oklch, var(--green) 45%, var(--paper));
  .hint { margin: 0; }
  label { display: grid; gap: .25rem; font-weight: 800; }
}
.who-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin-block-start: 1.1rem; padding-block-start: .9rem;
  border-block-start: 3px dashed color-mix(in oklch, var(--purple) 25%, var(--paper));
}

/* "Playing as Maple  [Switch player] [Sign out]" */
.player-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem; margin-block: .2rem 1rem; padding: .7rem 1rem; border-radius: 20px;
  background: color-mix(in oklch, var(--blue) 12%, var(--paper));
  box-shadow: inset 0 0 0 3px color-mix(in oklch, var(--blue) 35%, var(--paper));
  span { margin-inline-end: auto; font-size: 1.1rem; }
  strong { font-family: var(--display); font-weight: 700; font-size: 1.3rem; }
}

/* The Parent area: a locked strip, then cards that each have a solid colored header. */
.parent-lock {
  padding: 1rem 1.2rem; border-radius: 22px;
  background: repeating-linear-gradient(-45deg, color-mix(in oklch, var(--blue) 14%, var(--paper)) 0 14px, color-mix(in oklch, var(--blue) 6%, var(--paper)) 14px 28px);
  box-shadow: inset 0 0 0 3px color-mix(in oklch, var(--blue) 40%, var(--paper));
  p { margin-block: 0 .7rem; }
}
.parent-card {
  margin-block: 1.2rem; border-radius: 22px; overflow: clip; background: var(--paper);
  box-shadow: 0 0 0 3px var(--c);
  h3 { margin: 0; padding: .6rem 1.1rem; background: var(--c); color: var(--paper); font-size: 1.25rem; text-shadow: 0 1px 0 oklch(0% 0 0 / .25); }
  h3 span { font-family: var(--body); font-size: .95rem; font-weight: 800; opacity: .95; }
}
.parent-body { padding: 1rem 1.1rem; }
.kid-list { display: grid; gap: .6rem; margin-block-end: 1rem; }
.kid-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: .7rem .9rem; border-radius: 16px;
  background: color-mix(in oklch, var(--green) 8%, var(--paper));
  &:nth-child(even) { background: color-mix(in oklch, var(--green) 18%, var(--paper)); }
}
.kid-who {
  display: flex; align-items: center; gap: .6rem; margin-inline-end: auto;
  strong { font-family: var(--display); font-weight: 700; font-size: 1.3rem; }
}
.kid-tag { padding: .1rem .6rem; border-radius: 999px; background: var(--green); color: var(--paper); font-size: .85rem; font-weight: 800; white-space: nowrap; }
.kid-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
/* Tabs that open a section under the kid's row. The open one is solid; the others are plain. */
.kid-tabs { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 3px color-mix(in oklch, var(--purple) 35%, var(--paper)); }
.kid-tab {
  padding: .4rem .9rem; border: 0; border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer;
  font-family: var(--display); font-weight: 600; white-space: nowrap;
  &:hover { background: color-mix(in oklch, var(--purple) 14%, var(--paper)); }
  &[aria-pressed="true"] { background: var(--purple); color: var(--paper); box-shadow: 0 3px 0 color-mix(in oklch, var(--purple) 60%, black); }
}
.kid-row.is-open { box-shadow: inset 0 0 0 3px var(--purple); }
.kid-more-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex: 1 1 100%;
  margin: -.8rem -.9rem .8rem; padding: .5rem .9rem; border-radius: 12px 12px 0 0; background: var(--purple); color: var(--paper);
  strong { font-family: var(--display); font-weight: 700; font-size: 1.1rem; }
  .link-btn { color: var(--paper); }
}
.kid-more {
  flex: 1 1 100%; padding: .8rem .9rem; border-radius: 14px; background: var(--paper);
  box-shadow: 0 0 0 3px var(--purple);
  .hint { margin-block: 0 .6rem; }
}

/* An on/off pair: the pressed side is solid, the other side is plain. */
.seg {
  display: inline-flex; margin-block: .2rem 1rem; padding: 4px; border-radius: 999px;
  background: color-mix(in oklch, var(--purple) 14%, var(--paper));
  box-shadow: inset 0 0 0 3px color-mix(in oklch, var(--purple) 35%, var(--paper));
  button {
    padding: .45rem 1.2rem; border: 0; border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer;
    font-family: var(--display); font-weight: 600; font-size: 1.05rem;
    &[aria-pressed="true"] { background: var(--purple); color: var(--paper); box-shadow: 0 3px 0 color-mix(in oklch, var(--purple) 60%, black); }
  }
}

/* Family scores: one column per kid and one for the whole family. Slides sideways on a small screen. */
.family-scroll { overflow-x: auto; }
.family-table {
  inline-size: 100%; border-collapse: separate; border-spacing: 0; font-family: var(--display);
  th, td { padding: .5rem .8rem; text-align: center; white-space: nowrap; }
  th:first-child { text-align: start; font-weight: 500; }
  tr:first-child th { font-weight: 700; font-size: 1.1rem; background: var(--purple); color: var(--paper); }
  tr:first-child th:first-child { border-start-start-radius: 16px; }
  tr:first-child th:last-child { border-start-end-radius: 16px; }
  tr:first-child th.fam { background: var(--orange); }
  tr:first-child th.me { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }
  tr:nth-child(even) td, tr:nth-child(even) th { background: color-mix(in oklch, var(--purple) 7%, var(--paper)); }
  .band th { padding-block: .9rem .3rem; background: none !important; font-weight: 700; font-size: 1.15rem; }
  td.fam { background: color-mix(in oklch, var(--orange) 22%, var(--paper)) !important; font-weight: 700; }
  td.me { font-weight: 700; }
  small { display: block; font-family: var(--body); font-size: .75rem; font-weight: 800; color: var(--soft); }
}

/* The cover for "play time is over" and "this part is switched off". */
.wall { z-index: 190; background: oklch(30% 0.1 300 / .92); }
.wall-icon { font-size: 4rem; line-height: 1; margin-block-end: .4rem; }
html.walled { overflow: hidden; }

/* Limits for one kid, in the Parent area. */
.limit-grid { display: grid; gap: .4rem; margin-block: .6rem; }
.limit-day {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; padding: .35rem .7rem; border-radius: 12px;
  background: color-mix(in oklch, var(--blue) 8%, var(--paper));
  label { display: inline-flex; align-items: center; gap: .4rem; min-inline-size: 8.5rem; font-family: var(--display); font-weight: 600; }
  input[type="time"] { padding: .25rem .5rem; border: 3px solid var(--blue); border-radius: 12px; background: var(--paper); }
  input[type="checkbox"] { inline-size: 1.3rem; block-size: 1.3rem; }
  &.off { opacity: .6; }
}
.limit-parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .3rem .9rem; margin-block: .5rem 1rem; }
.limit-parts label { display: flex; align-items: center; gap: .45rem; input { inline-size: 1.2rem; block-size: 1.2rem; flex: none; } }
.limit-title { margin-block: 1rem .3rem; font-family: var(--display); font-weight: 700; font-size: 1.1rem; }
.kid-row.is-off .kid-who strong { text-decoration: line-through; opacity: .6; }
.kid-tag.off { background: var(--red); }
.tz-pick { padding: .3rem .6rem; border: 3px solid var(--blue); border-radius: 12px; background: var(--paper); max-inline-size: 100%; }

/* ---------- Phones and tablets ---------- */
.menu-toggle {
  display: none; padding: .4rem .9rem; border: 0; border-radius: 999px; background: var(--purple); color: var(--paper);
  font-family: var(--display); font-weight: 600; font-size: 1rem;
}
/* The bar across the top of an open game. */
.game-bar {
  display: flex; align-items: center; gap: .5rem; margin-block-end: .8rem;
  .back { margin: 0 auto 0 0; }
  .icon-btn { inline-size: 2.4rem; }
}
html.playing { overscroll-behavior: contain; }
html.playing .site-footer { display: none; }
@media (width < 720px) {
  /* One slim line: name, sign-in badge, sound, Menu. The menu opens underneath when asked for. */
  .site-header { padding: .3rem .7rem; border-width: 4px; border-radius: 26px; gap: .3rem .6rem; margin-block-start: 6px; }
  .logo { font-size: 1.15rem; }
  .menu-toggle { display: inline-block; }
  .site-nav { display: none; }
  .site-header.open .site-nav { display: flex; padding-block: .3rem .2rem; }
  .site-nav a { flex: 1 1 40%; text-align: center; padding-block: .55rem; }
  .sound-toggle { inline-size: 2.2rem; font-size: 1rem; }
  .who { font-size: .9rem; max-inline-size: 9.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .logo { min-inline-size: 0; flex: 1 1 auto; white-space: nowrap; }
  .logo [data-rainbow] { display: flex; flex-wrap: nowrap; gap: .25em; } /* "Maple Rue" stays on one line */
  .header-tools { flex: none; gap: .35rem; }
  .menu-toggle { padding: .4rem .7rem; }
}
@media (width < 480px) {
  .menu-toggle span { display: none; }
  .who { max-inline-size: 7.5rem; }
  main { padding: 1rem 10px 2.5rem; }
  .page-title .big { font-size: 3rem; }
}
/* While a game is open on a phone or tablet (or any short screen), the game gets the whole screen. */
@media (width < 1000px), (height < 760px) {
  html.playing .site-header, html.playing .bg-layer { display: none; }
  html.playing main { padding: 6px 6px 1rem; max-inline-size: none; }
  html.playing .game.panel { margin: 0; padding: .7rem .7rem 1rem; border-width: 3px; border-radius: 20px; box-shadow: none; }
  html.playing .game.panel > h2 { font-size: 1.3rem; margin-block-end: .3rem; }
  html.playing .game.panel > .hint { font-size: .9rem; margin-block-end: .5rem; }
  html.playing .arcade-screen { margin-block-start: .5rem; border-radius: 14px; }
  html.playing .arcade-pad { margin-block-start: .9rem; gap: .5rem; }
}
/* In full screen the same, on any size of screen. */
html.full.playing .site-header, html.full.playing .bg-layer { display: none; }
html.full.playing main { padding: 8px 8px 1rem; max-inline-size: none; }
html.full.playing .game.panel { margin: 0; border-radius: 20px; box-shadow: none; }
html.full { background: var(--paper); }
/* Fingers need bigger targets than a mouse does. */
@media (pointer: coarse) {
  .pad-btn { min-inline-size: 4.6rem; block-size: 4.6rem; }
  .chip, .btn.small { min-block-size: 2.6rem; }
}
/* Leave room for the notch and the home bar on newer phones. */
@supports (padding: env(safe-area-inset-bottom)) {
  main { padding-block-end: calc(3rem + env(safe-area-inset-bottom)); }
  html.playing main { padding-inline: max(6px, env(safe-area-inset-left)) max(6px, env(safe-area-inset-right)); }
}

/* ---------- Animal Explorer ---------- */
.page-title.compact { padding-block: .4rem .6rem; h1 { font-size: clamp(1.8rem, 5vw, 2.8rem); margin: 0; } }
.zoo.panel { padding: clamp(.8rem, 2vw, 1.3rem); }
.zoo-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.zoo-pick {
  display: flex; align-items: center; gap: .4rem; padding: .2rem .3rem .2rem .9rem; border-radius: 999px;
  background: var(--paper); box-shadow: inset 0 0 0 3px color-mix(in oklch, var(--green) 40%, var(--paper));
  span { font-family: var(--display); font-weight: 600; font-size: .9rem; color: var(--soft); }
  select { border: 0; background: transparent; font: inherit; font-family: var(--display); font-weight: 600; color: var(--ink); padding: .35rem .3rem; max-inline-size: 11.5rem; cursor: pointer; }
  &.on { background: var(--green); box-shadow: none; span, select { color: var(--paper); } option { color: var(--ink); } }
}
.zoo-search {
  flex: 1 1 150px; min-inline-size: 0; padding: .5rem 1rem; border: 0; border-radius: 999px; background: var(--paper);
  box-shadow: inset 0 0 0 3px color-mix(in oklch, var(--green) 40%, var(--paper)); font: inherit;
}
.zoo-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-block-end: .6rem; }
.zoo-count { margin: 0 .2rem; font-family: var(--display); font-weight: 600; color: var(--soft); }
#zoo-clear:disabled { opacity: .45; cursor: default; }
.zoo-bar { margin-block-end: .8rem; }
.zoo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.zoo-tile {
  position: relative; padding: 0; border: 0; border-radius: 16px; overflow: hidden; background: color-mix(in oklch, var(--green) 20%, var(--paper));
  aspect-ratio: 1; cursor: pointer; transition: scale .25s var(--spring), box-shadow .2s;
  img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
  &:hover, &:focus-visible { scale: 1.05; z-index: 1; box-shadow: 0 8px 20px oklch(0% 0 0 / .3); }
}
.zoo-name {
  position: absolute; inset-inline: 0; inset-block-end: 0; padding: 1.1rem .4rem .35rem; color: white; text-align: center;
  font-family: var(--display); font-weight: 600; font-size: .82rem; line-height: 1.15;
  background: linear-gradient(transparent, oklch(0% 0 0 / .75));
}
.zoo-ear { position: absolute; inset-block-start: 5px; inset-inline-end: 5px; inline-size: 1.6rem; block-size: 1.6rem; display: grid; place-items: center; border-radius: 50%; background: oklch(100% 0 0 / .92); font-size: .9rem; box-shadow: 0 1px 4px oklch(0% 0 0 / .4); }
.zoo-credit { margin: .9rem 0 0; font-size: .85rem; text-align: center; }
.zoo-veil { z-index: 180; }
.zoo-card {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); inline-size: 100%; max-inline-size: 860px; max-block-size: 94vh; margin: auto;
  border-radius: 28px; overflow: hidden; background: var(--paper); box-shadow: 0 20px 60px oklch(0% 0 0 / .4);
}
.zoo-photo { position: relative; background: oklch(20% 0.02 300); min-block-size: 220px; img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; } }
.zoo-x {
  position: absolute; inset-block-start: 10px; inset-inline-start: 10px; inline-size: 2.4rem; block-size: 2.4rem; border: 0; border-radius: 50%;
  background: oklch(100% 0 0 / .9); font-size: 1.1rem; font-weight: 800;
}
.zoo-words { padding: 1.1rem 1.3rem 1rem; overflow-y: auto; h2 { margin: 0; } }
.zoo-science { margin: .1rem 0 .7rem; font-style: italic; color: var(--soft); }
.zoo-tags {
  display: flex; flex-wrap: wrap; gap: .3rem; margin-block-end: .8rem;
  span { padding: .15rem .6rem; border-radius: 999px; background: color-mix(in oklch, var(--blue) 14%, var(--paper)); font-size: .85rem; font-weight: 800; }
  .doing.ok { background: color-mix(in oklch, var(--green) 30%, var(--paper)); }
  .doing.watch { background: color-mix(in oklch, var(--yellow) 45%, var(--paper)); }
  .doing.danger { background: color-mix(in oklch, var(--red) 30%, var(--paper)); }
}
.zoo-facts { display: grid; grid-template-columns: auto 1fr; gap: .25rem .8rem; margin: 0 0 .7rem; dt { font-family: var(--display); font-weight: 600; white-space: nowrap; } dd { margin: 0; } }
.zoo-list { margin: 0 0 1rem; padding-inline-start: 1.2rem; li { margin-block-end: .4rem; } li::marker { content: "⭐ "; } }
.zoo-row { display: flex; align-items: center; gap: .5rem; }
.zoo-at { margin-inline: auto; font-family: var(--display); color: var(--soft); font-size: .9rem; }
@media (width < 640px) {
  .zoo-card { grid-template-columns: 1fr; grid-template-rows: minmax(150px, 34vh) 1fr; border-radius: 22px; }
  .zoo-pick { flex: 1 1 100%; select { flex: 1; max-inline-size: none; } }
  .zoo-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
}

/* The way in from the Science page. */
.zoo-door { display: block; max-inline-size: 420px; margin: 0 auto 2rem; }

/* The top of the synth: sound pickers on the left, the metronome in the top right corner. */
.synth-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, 290px); gap: 1rem 1.4rem; align-items: start; }
.metro-box {
  padding: .8rem 1rem; margin-block-end: 1rem;
  .label { margin-block-start: 0; }
  .beats { margin-block: .3rem; }
  .score { margin-block: .3rem; font-size: 1rem; }
  .metro-note { margin: .5rem 0 0; font-size: .85rem; }
}
@media (width < 760px) { .synth-top { grid-template-columns: 1fr; } }

/* The Wild Sounds board in the Music Room. */
.wild-pads { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .6rem; }
.wild-pads button {
  --c: var(--green);
  padding: .6rem .4rem; border: 0; border-radius: 18px; color: var(--paper); cursor: pointer;
  background: linear-gradient(color-mix(in oklch, var(--c) 70%, white), var(--c) 55%);
  box-shadow: 0 5px 0 color-mix(in oklch, var(--c) 65%, black); font-family: var(--display); font-weight: 600; text-shadow: 0 1px 0 oklch(0% 0 0 / .3);
  span { display: block; font-size: 1.7rem; text-shadow: none; }
  &:active, &.playing { translate: 0 4px; box-shadow: 0 1px 0 color-mix(in oklch, var(--c) 65%, black); }
}

/* ---------- Games shown in a frame (5 Dice Roll 3D, Kings in the Corner, Last Card) ---------- */
.game.framed { padding: clamp(.6rem, 1.5vw, 1rem); }
.game-frame { display: block; inline-size: 100%; block-size: max(440px, calc(100vh - 250px)); block-size: max(440px, calc(100dvh - 250px)); border: 0; border-radius: 18px; background: #0a0c11; }
/* Back to Games and Main Menu sit together on the left; full screen and the X are on the right. */
.game.framed .game-bar .back { margin-inline-end: 0; }
.game-bar .game-menu { margin-inline-end: auto; }
.game.framed .game-bar .btn { white-space: nowrap; }
@media (width < 520px) {
  .game.framed .game-bar { gap: .25rem; }
  .game.framed .game-bar .btn { padding: .45rem .5rem; font-size: .74rem; min-block-size: 2.4rem; }
  .game.framed .game-bar .icon-btn { inline-size: 2.1rem; flex: none; }
}
.game-bar .game-x { margin-inline-start: .2rem; background: color-mix(in oklch, var(--red) 22%, var(--paper)); font-weight: 800; }
@media (width < 1000px), (height < 760px) {
  html.playing .game-frame { block-size: calc(100vh - 86px); block-size: calc(100dvh - 86px); min-block-size: 0; border-radius: 12px; }
  html.playing .game.framed.panel { padding: .5rem; }
}
html.full.playing .game-frame { block-size: calc(100vh - 96px); }

/* ---------- Board games ---------- */
.four-board {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; max-inline-size: 460px; margin: .6rem auto 0; padding: 10px; border-radius: 22px;
  background: var(--blue); box-shadow: 0 8px 0 color-mix(in oklch, var(--blue) 60%, black);
}
.four-cell {
  aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: var(--paper); cursor: pointer;
  box-shadow: inset 0 4px 0 oklch(0% 0 0 / .18);
  &.p1 { background: var(--red); }
  &.p2 { background: var(--yellow); }
  &.win { outline: 4px solid var(--paper); outline-offset: -1px; animation: pulse 1s ease-in-out infinite; }
}

.dots-board {
  display: grid; grid-template-columns: repeat(4, 16px 1fr) 16px; grid-template-rows: repeat(4, 16px 1fr) 16px;
  inline-size: min(100%, 400px); aspect-ratio: 1; margin: .6rem auto 0;
  .dot { background: var(--ink); border-radius: 50%; }
  .line { padding: 0; border: 0; border-radius: 8px; background: color-mix(in oklch, var(--green) 14%, var(--paper)); cursor: pointer; margin: 2px; }
  .line:hover { background: color-mix(in oklch, var(--green) 45%, var(--paper)); }
  .line.on { background: var(--ink); cursor: default; }
  .box { display: grid; place-items: center; border-radius: 10px; font-size: clamp(1.2rem, 5vw, 2rem); }
  .box.p1 { background: color-mix(in oklch, var(--orange) 35%, var(--paper)); }
  .box.p2 { background: color-mix(in oklch, var(--blue) 30%, var(--paper)); }
}

.man-board {
  display: grid; grid-template-columns: 1.1fr repeat(6, 1fr) 1.1fr; grid-template-rows: 1fr 1fr; gap: 8px; max-inline-size: 640px; margin: .6rem auto 0; padding: 12px;
  border-radius: 30px; background: color-mix(in oklch, var(--orange) 55%, oklch(45% 0.1 60)); box-shadow: 0 8px 0 oklch(40% 0.09 60);
}
.man-pit {
  display: grid; place-items: center; align-content: center; min-block-size: 78px; padding: .2rem; border: 0; border-radius: 22px; color: var(--ink);
  background: color-mix(in oklch, var(--orange) 18%, white); box-shadow: inset 0 4px 0 oklch(0% 0 0 / .2); font-family: var(--display);
  b { font-size: 1.2rem; }
  &.store { grid-row: 1 / 3; border-radius: 28px; }
  &.store.theirs { grid-column: 1; }
  &.store.yours { grid-column: 8; background: color-mix(in oklch, var(--green) 30%, white); }
  &.yours:not(.store) { cursor: pointer; background: color-mix(in oklch, var(--green) 22%, white); }
  &.yours:not(.store):hover:not(:disabled) { translate: 0 -3px; }
  &:disabled { cursor: default; opacity: .75; }
}
.man-stones { font-size: .7rem; line-height: .8; letter-spacing: 1px; color: oklch(45% 0.12 300); word-break: break-all; text-align: center; max-inline-size: 3.2rem; }

.lad-board { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; inline-size: min(100%, 560px); margin: .6rem auto 0; }
.lad-cell {
  position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: color-mix(in oklch, var(--pink) 12%, var(--paper));
  small { position: absolute; inset-block-start: 1px; inset-inline-start: 3px; font-size: .6rem; font-weight: 800; color: var(--soft); }
  &.ladder { background: color-mix(in oklch, var(--green) 35%, var(--paper)); }
  &.slide { background: color-mix(in oklch, var(--red) 28%, var(--paper)); }
  &.goal { background: var(--yellow); }
}
.lad-jump { position: absolute; inset-block-end: 1px; inset-inline: 0; text-align: center; font-size: clamp(.5rem, 1.7vw, .75rem); font-weight: 800; white-space: nowrap; }
.lad-token { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(.9rem, 3.4vw, 1.5rem); filter: drop-shadow(0 1px 2px oklch(0% 0 0 / .5)); }

/* ---------- Page-to-page transitions ---------- */
@keyframes pageOut { to { opacity: 0; scale: .96; translate: 0 -20px; } }
@keyframes pageIn { from { opacity: 0; scale: .96; translate: 0 30px; } }
::view-transition-old(root) { animation: pageOut .25s ease-in both; }
::view-transition-new(root) { animation: pageIn .5s var(--spring) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01s !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}