/* Sophie's Reading Adventure: stylesheet */

/* The fonts ship with the game (fonts/, SIL Open Font License: fonts/OFL-*.txt), so no page asks
   another server for them: a child's visit reaches nobody but this site. */
@font-face { font-family: 'Baloo 2'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/Baloo2.woff2') format('woff2'); }
@font-face { font-family: 'Andika'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/Andika-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Andika'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/Andika-Bold.woff2') format('woff2'); }

:root {
  --bg: #F2FAF7;
  --card: #FFFFFF;
  --ink: #2E2A47;
  --muted: #7B7691;
  --line: #EDE7F6;
  --shadow-soft: 0 8px 24px rgba(46, 42, 71, 0.08);
  --tile-shadow: #DCD4EE;

  --accent: #13A391;  --accent-d: #0D7F71;  /* teal green: buttons, highlights, vowels */
  --danger: #E2506A;  --danger-d: #C23A54;  /* warnings, removing, the recording dot */
  --sky: #4CC9F0;     --sky-d: #2FA8CF;
  --teal: #2BB5A0;    --teal-d: #1F9482;
  --grape: #9B5DE5;   --grape-d: #7F44C8;
  --sun: #FFC93C;     --sun-d: #E0AA1A;
  --lime: #8CCB4D;    --lime-d: #6BAA30;
  --green: #5FD068;   --green-d: #3FB549;
  --rose: #FF8FAB;    --rose-d: #E86F8F;

  --radius: 22px;
  --tile: clamp(50px, 12vw, 72px);
  --font-ui: 'Baloo 2', 'Nunito', 'Trebuchet MS', system-ui, sans-serif;
  --font-read: 'Andika', 'Comic Sans MS', 'Trebuchet MS', system-ui, sans-serif;
}

/* c-coral and c-orange are older names still used in the data (and by Math Mountain's cards): they
   show teal green and lime, since nothing in the game is orange. */
.c-accent, .c-coral { --c: var(--accent); --c-d: var(--accent-d); }
.c-sky    { --c: var(--sky);    --c-d: var(--sky-d); }
.c-teal   { --c: var(--teal);   --c-d: var(--teal-d); }
.c-grape  { --c: var(--grape);  --c-d: var(--grape-d); }
.c-sun    { --c: var(--sun);    --c-d: var(--sun-d); }
.c-lime, .c-orange { --c: var(--lime); --c-d: var(--lime-d); }
.c-green  { --c: var(--green);  --c-d: var(--green-d); }
.c-rose   { --c: var(--rose);   --c-d: var(--rose-d); }
.c-pink   { --c: #F15BB5;       --c-d: #C93E96; }
.c-violet { --c: #6C63FF;       --c-d: #5149D9; }

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  min-height: 100dvh;
  background: var(--bg) linear-gradient(180deg, #F6FCFA 0%, #E1F4EE 100%) fixed;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 18px;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

button { font-family: inherit; color: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }

.app {
  max-width: 720px;
  margin: 0 auto;
  padding: max(12px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.screen { display: flex; flex-direction: column; flex: 1; animation: fade-in 0.25s ease; }
/* room at the end of a page for the feedback button in the corner (.report-tab); screens that fill the phone exactly keep their height */
.screen:not(#screen-reader):not(#screen-arcade):not(#screen-tendrop) { padding-bottom: 44px; }
.screen[hidden] { display: none; }

@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- shared bits ---------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0 14px;
}
.topbar h2 { margin: 0; font-size: 24px; font-weight: 800; flex: 1; text-align: center; }

.icon-btn {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 0;
  background: var(--card);
  box-shadow: 0 4px 0 var(--tile-shadow), var(--shadow-soft);
  font-size: 24px;
  display: grid; place-items: center;
  transition: transform 0.08s;
  flex: none;
}
.icon-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--tile-shadow); }

.stars-pill {
  background: var(--card);
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 800;
  font-size: 18px;
  box-shadow: var(--shadow-soft);
  white-space: nowrap;
  transition: transform 0.15s;
}
.stars-pill.bump { animation: bump 0.45s; }
/* The star count opens the sticker book (outside a round) */
button.stars-pill { border: 0; font-family: inherit; color: inherit; cursor: pointer; }
button.stars-pill:active { transform: scale(0.95); }
@keyframes bump { 40% { transform: scale(1.25) rotate(-4deg); } }

.btn {
  font: 800 20px/1.1 var(--font-ui);
  padding: 15px 28px;
  border-radius: 999px;
  border: 0;
  background: var(--c, var(--accent));
  color: #fff;
  box-shadow: 0 5px 0 var(--c-d, var(--accent-d));
  transition: transform 0.08s, box-shadow 0.08s;
  min-height: 56px;
}
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--c-d, var(--accent-d)); }
.btn.ghost { background: var(--card); color: var(--ink); box-shadow: 0 5px 0 var(--tile-shadow); }
.btn.ghost:active { box-shadow: 0 2px 0 var(--tile-shadow); }
.btn.danger { background: #fff; color: var(--danger-d); box-shadow: 0 5px 0 #F4C4CE; border: 2px solid #F4C4CE; }
.btn.small { font-size: 16px; padding: 10px 18px; min-height: 44px; }

.link-btn {
  background: none; border: 0;
  color: var(--muted);
  font-weight: 700;
  font-size: 16px;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 12px;
}

.actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 20px; }

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

.hero { position: relative; text-align: center; padding: 18px 8px 8px; }
.site-back { position: absolute; left: 0; top: 4px; display: inline-flex; align-items: center; gap: 4px; padding: 7px 14px 7px 10px; border-radius: 999px;
  background: var(--card); box-shadow: var(--shadow-soft); color: var(--muted); font: 800 14px/1 var(--font-ui); text-decoration: none; }
.site-back[hidden] { display: none; }
.site-back span { font-size: 20px; line-height: 0.6; }
@media (max-width: 400px) { .hero.with-back { padding-top: 46px; } } /* small phones: the book picture sits below the link */
.hero-art { font-size: 64px; line-height: 1; }
.hero h1 {
  margin: 8px 0 4px;
  font-size: clamp(30px, 8.5vw, 46px);
  line-height: 1.05;
  font-weight: 800;
}
.hero .sub { margin: 0 0 12px; color: var(--muted); font-weight: 700; }
.hero .stars-pill { display: inline-block; }

.menu {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.menu-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 10px 16px;
  border-radius: var(--radius);
  background: var(--card);
  border: 0;
  font: 800 21px/1.1 var(--font-ui);
  color: var(--ink);
  box-shadow: 0 6px 0 var(--c-d), var(--shadow-soft);
  transition: transform 0.08s, box-shadow 0.08s;
}
.menu-card:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--c-d); }
.menu-card .big {
  width: 84px; height: 84px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 20%, white);
  display: grid; place-items: center;
  font-size: 46px; line-height: 1;
}
.menu-card .big { position: relative; overflow: hidden; }
/* A painted icon from home/<id>.webp when there is one; the emoji shows until it loads or if there is none. */
.menu-card .big-img { position: absolute; inset: 7%; width: 86%; height: 86%; object-fit: contain; }
.menu-card .big-img + .big-emoji { visibility: hidden; }
.menu-card small { font-weight: 700; color: var(--muted); font-size: 14px; }
a.menu-card { text-decoration: none; }
.menu-card.wide {
  grid-column: 1 / -1;
  flex-direction: row;
  justify-content: center;
  gap: 18px;
  padding: 14px 18px;
}
.menu-card.wide .big { width: 64px; height: 64px; font-size: 36px; }
.menu-card.wide .txt { display: flex; flex-direction: column; align-items: flex-start; }

.home-foot { text-align: center; margin-top: auto; padding-top: 18px; }

@media (min-width: 560px) {
  .menu { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .menu-card.wide { grid-column: 1 / -1; }
}

/* ---------- level & set pickers ---------- */

.levels { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.level-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--card);
  border-radius: var(--radius);
  border: 0;
  text-align: left;
  box-shadow: 0 5px 0 var(--c-d), var(--shadow-soft);
  transition: transform 0.08s, box-shadow 0.08s;
  width: 100%;
}
.level-card:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--c-d); }
.level-card.locked { opacity: 0.62; filter: grayscale(0.7); cursor: not-allowed; }
.level-card.locked:active { transform: none; }
.level-card.locked .lv-stars { font-size: 13px; color: var(--muted); white-space: normal; max-width: 8.5em; text-align: right; }
.level-card .badge {
  width: 64px; height: 64px; flex: none;
  border-radius: 20px;
  background: color-mix(in srgb, var(--c) 22%, white);
  font-size: 34px; line-height: 1;
  display: grid; place-items: center;
}
.level-card .txt { flex: 1; min-width: 0; }
.level-card h3 { margin: 0; font-size: 21px; font-weight: 800; }
.level-card p { margin: 2px 0 0; color: var(--muted); font-family: var(--font-read); font-size: 16px; }
.level-card .lv-stars { font-weight: 800; color: var(--muted); white-space: nowrap; font-size: 16px; }
@media (max-width: 380px) {
  /* small phones: a smaller badge and a stat that wraps, so the level name keeps its room */
  .level-card { gap: 10px; padding: 12px; }
  .level-card .badge { width: 52px; height: 52px; font-size: 28px; border-radius: 16px; }
  .level-card .lv-stars { white-space: normal; text-align: right; max-width: 5.5em; font-size: 14px; }
}

/* ---------- game ---------- */

.trail { display: flex; gap: 3px; flex-wrap: nowrap; justify-content: center; flex: 1; min-width: 0; }
.trail-row { margin: -4px 0 12px; }
.step {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  border: 2px dashed #D9CFF0; box-sizing: border-box;
  display: grid; place-items: center;
  font-size: 15px; line-height: 1;
  transition: background 0.2s;
}
.step.done { border: 0; background: #FFF1B8; box-shadow: 0 2px 0 #F0D98A; animation: pop 0.5s; }
.step.now { border: 0; background: #D7F3EC; box-shadow: 0 2px 0 #9FDCCD; font-size: 13px; animation: trail-bob 1.1s ease-in-out infinite; }
@media (max-width: 420px) { .step { width: 20px; height: 20px; font-size: 12px; } .step.now { font-size: 11px; } .trail { gap: 2px; } }
.trail.many .step { width: 18px; height: 18px; font-size: 11px; }
.trail.many .step.now { font-size: 10px; }
@keyframes trail-bob { 0%, 100% { transform: scale(1.2) translateY(0); } 50% { transform: scale(1.2) translateY(-3px); } }

/* The star trail: an outline star per question, filled when it is answered (gold right first time,
   then sky, lilac and pink for later tries). Gold stars in a row glow (s2), sparkle (s3, s4) and
   shimmer through the rainbow (s5). */
.step.star { border: 0; border-radius: 0; background: none; box-shadow: none; position: relative; overflow: visible; }
.step.star svg { width: 100%; height: 100%; display: block; overflow: visible; }
.step.star path { fill: #FFFFFF; stroke: #D9CFF0; stroke-width: 1.8; stroke-linejoin: round; }
.step.star.now { animation: trail-bob 1.1s ease-in-out infinite; }
.step.star.now path { fill: #FFF3C4; stroke: #F2C14E; }
.step.star.got path { stroke-width: 1.3; }
.step.star.gold path { fill: #FFC93C; stroke: #D9A900; }
.step.star.t1 path { fill: #7CCBF5; stroke: #3A9DD4; }
.step.star.t2 path { fill: #C4A3F5; stroke: #8C63D9; }
.step.star.t3 path { fill: #F7A8C4; stroke: #D96D96; }
.step.star.fresh { animation: star-in 0.6s cubic-bezier(0.2, 1.6, 0.4, 1); }
.step.star.s2 svg { filter: drop-shadow(0 0 2px rgba(255, 196, 40, 0.95)); }
.step.star.s3 svg { filter: drop-shadow(0 0 2px #FFD04D) drop-shadow(0 0 5px rgba(255, 205, 60, 0.85)); }
.step.star.s4 svg, .step.star.s5 svg { filter: drop-shadow(0 0 3px #FFD45C) drop-shadow(0 0 8px rgba(255, 205, 60, 0.9)); }
.step.star.s5 path { animation: star-rainbow 2.4s linear infinite; }
.step.star.s3::after, .step.star.s4::after, .step.star.s5::after {
  content: '✦'; position: absolute; top: -7px; right: -5px; font-size: 12px; line-height: 1; color: #F2C200;
  pointer-events: none; animation: twinkle 1.4s ease-in-out infinite;
}
.step.star.s4::before, .step.star.s5::before {
  content: '✦'; position: absolute; bottom: -4px; left: -6px; font-size: 10px; line-height: 1; color: #FF8DB7;
  pointer-events: none; animation: twinkle 1.4s ease-in-out 0.7s infinite;
}
.step.star.s5::after { color: #FFFFFF; text-shadow: 0 0 4px #FFC93C, 0 0 8px #FF8DB7; }
@keyframes star-in { 0% { transform: scale(0.2) rotate(-40deg); } 60% { transform: scale(1.5) rotate(8deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes star-rainbow {
  0%, 100% { fill: #FFC93C; } 20% { fill: #FF9EC7; } 40% { fill: #C4A3F5; } 60% { fill: #7CCBF5; } 80% { fill: #8FE3B0; }
}
@keyframes twinkle { 0%, 100% { opacity: 0.45; transform: scale(0.7) rotate(0); } 50% { opacity: 1; transform: scale(1.25) rotate(45deg); } }
.cele-stars { flex: none; flex-wrap: wrap; gap: 6px; }
.cele-stars .step.star { width: 30px; height: 30px; }
.star-key { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 10px; margin: 4px 0 0; font-size: 13px; font-weight: 700; color: var(--muted); }
.star-key .step.star { width: 16px; height: 16px; display: inline-block; vertical-align: -3px; margin-right: 2px; }


.instruction {
  margin: 0 0 6px;
  text-align: center;
  color: var(--muted);
  font-weight: 700;
  font-size: 17px;
}

.stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 8px 0;
  width: 100%;
}

.picture {
  font-size: clamp(88px, 26vw, 136px);
  line-height: 1.1;
  filter: drop-shadow(0 8px 14px rgba(46, 42, 71, 0.14));
}

.word-big {
  font: 700 clamp(46px, 15vw, 88px)/1.1 var(--font-read);
  letter-spacing: 0.04em;
  color: var(--ink);
  background: var(--card);
  padding: 8px 26px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  border: 0;
}
.word-big .g { display: inline-block; transition: color 0.15s, transform 0.15s; }
.word-big .g.hi { color: var(--accent); transform: translateY(-6px) scale(1.12); }

.slots, .tray { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; width: 100%; }
.tray { gap: 10px; padding: 6px 0; min-height: calc(var(--tile) * 1.15 + 12px); }

.slot {
  width: var(--tile); height: calc(var(--tile) * 1.15);
  border-radius: 16px;
  border: 3px dashed #D9D1EA;
  background: rgba(255, 255, 255, 0.55);
  display: grid; place-items: center;
  padding: 0;
  font: 700 calc(var(--tile) * 0.52) var(--font-read);
  color: var(--ink);
  transition: background 0.15s, border-color 0.15s;
}
.slot.filled { border-style: solid; border-color: transparent; background: var(--card); box-shadow: 0 4px 0 var(--tile-shadow); }
.slot.filled.vowel { color: var(--accent); }
.slot.good { background: #E8FBEA; box-shadow: 0 4px 0 var(--green-d); }
.slot.bad { background: #FFECEC; box-shadow: 0 4px 0 #F0B4B4; }
.slot.hi { border-color: var(--accent); background: #E4F6F1; transform: translateY(-4px); }

.tile {
  width: var(--tile); height: calc(var(--tile) * 1.15);
  border-radius: 16px;
  border: 0;
  padding: 0;
  background: var(--card);
  box-shadow: 0 4px 0 var(--tile-shadow), 0 6px 14px rgba(46, 42, 71, 0.08);
  font: 700 calc(var(--tile) * 0.52) var(--font-read);
  color: var(--ink);
  display: grid; place-items: center;
  transition: transform 0.1s, opacity 0.2s;
}
.tile.vowel { color: var(--accent); }
.tile:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--tile-shadow); }
.tile.used { opacity: 0; pointer-events: none; transform: scale(0.6); }
button.picture.tap-hear { border: 0; background: none; padding: 0; font-family: inherit; cursor: pointer; }
button.picture.tap-hear:active { transform: scale(1.08); }
/* the whole alphabet as a keyboard */
.tray.abc { gap: 6px; max-width: 560px; }
.tray.abc .tile { width: calc(var(--tile) * 0.72); height: calc(var(--tile) * 0.8); border-radius: 12px; font-size: calc(var(--tile) * 0.42); }
.tray.abc .tile.pop { animation: pop 0.3s; }

.choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}
.choice {
  aspect-ratio: 1;
  border-radius: var(--radius);
  background: var(--card);
  border: 0;
  box-shadow: 0 5px 0 var(--tile-shadow), var(--shadow-soft);
  font-size: clamp(44px, 14vw, 76px);
  line-height: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px;
  padding: 6px;
  transition: transform 0.1s, box-shadow 0.1s, background 0.2s;
}
.choice:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--tile-shadow); }
.choice .lbl { font: 700 clamp(17px, 5vw, 26px)/1 var(--font-read); color: var(--ink); }
.choice.right { background: #E8FBEA; box-shadow: 0 5px 0 var(--green-d); }
.choice.wrong { background: #FFECEC; box-shadow: 0 5px 0 #F0B4B4; opacity: 0.65; }
.choice.with-label { aspect-ratio: auto; padding: 14px 6px; font-size: clamp(40px, 12vw, 64px); }
.choice.veiled { background: #F6F2FC; border: 3px dashed #D9D1EA; box-shadow: none; color: #C9BFE0; cursor: default; }
.choice.veiled:active { transform: none; }
.reveal-btn { background: var(--grape); box-shadow: 0 5px 0 var(--grape-d); }
.reveal-btn:active { box-shadow: 0 2px 0 var(--grape-d); }

.target {
  display: flex; align-items: center; gap: 14px;
  background: var(--card);
  padding: 10px 24px 10px 16px;
  border-radius: 999px;
  border: 0;
  box-shadow: 0 5px 0 var(--tile-shadow), var(--shadow-soft);
}
.target .picture { font-size: 56px; filter: none; }
.target .lbl { font: 700 34px/1 var(--font-read); }

.prompt { margin: 0; text-align: center; font-size: 22px; font-weight: 800; }
.prompt b { color: var(--accent-d); font-family: var(--font-read); }

.cloud {
  background: var(--card);
  border-radius: 999px;
  border: 0;
  padding: 14px 28px;
  box-shadow: 0 5px 0 var(--tile-shadow), var(--shadow-soft);
  font: 700 30px/1 var(--font-read);
  display: flex; align-items: center; gap: 12px;
  min-height: 64px;
}
.cloud .spk { font-size: 28px; }

.bubbles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
  max-width: 420px;
  container-type: inline-size;
}
.bubble {
  aspect-ratio: 1;
  border-radius: 50%;
  border: 0;
  background: radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.98), rgba(190, 230, 255, 0.8) 52%, rgba(120, 190, 240, 0.9));
  box-shadow: inset -6px -8px 18px rgba(0, 80, 160, 0.14), 0 10px 22px rgba(60, 120, 200, 0.2);
  font: 700 clamp(26px, 8vw, 42px)/1 var(--font-read);
  font-size: min(clamp(26px, 8vw, 42px), calc(58cqi / var(--len, 5))); /* cqi: the .bubbles grid; a bubble is about half of it */
  padding: 0 8%;
  white-space: nowrap;
  color: var(--ink);
  animation: bob 3.2s ease-in-out infinite;
  transition: transform 0.1s;
}
.bubble:nth-child(2) { animation-delay: -0.8s; animation-duration: 3.6s; }
.bubble:nth-child(3) { animation-delay: -1.7s; animation-duration: 2.9s; }
.bubble:nth-child(4) { animation-delay: -2.4s; animation-duration: 3.4s; }
.bubble.popped { animation: popout 0.4s forwards; pointer-events: none; }
.bubble.wrong { opacity: 0.55; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes popout { to { transform: scale(1.6); opacity: 0; } }

.tools { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; padding: 10px 0 4px; min-height: 60px; }
.tool {
  border: 0;
  background: var(--card);
  border-radius: 999px;
  padding: 9px 14px;
  font: 800 16px var(--font-ui);
  white-space: nowrap;
  box-shadow: 0 4px 0 var(--tile-shadow), var(--shadow-soft);
  display: flex; align-items: center; gap: 8px;
  min-height: 48px;
  transition: transform 0.08s, box-shadow 0.08s;
}
.tool:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--tile-shadow); }
.tool .ico { font-size: 22px; }

.shake { animation: shake 0.5s; }
@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}
.pop { animation: pop 0.5s; }
@keyframes pop { 40% { transform: scale(1.22); } }

.cheer {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  pointer-events: none;
  font-size: clamp(110px, 30vw, 180px);
  opacity: 0;
  z-index: 40;
}
.cheer.show { animation: cheer 1s ease-out; }
@keyframes cheer {
  0% { opacity: 0; transform: scale(0.4) rotate(-10deg); }
  30% { opacity: 1; transform: scale(1.1) rotate(4deg); }
  70% { opacity: 1; transform: scale(1) rotate(0); }
  100% { opacity: 0; transform: scale(1.2) translateY(-30px); }
}

#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 50; width: 100%; height: 100%; }

.notice {
  background: #E4F6F1;
  border: 2px solid #A8E3D6;
  border-radius: 16px;
  padding: 10px 14px;
  font-size: 15px;
  font-weight: 700;
  color: #0B6B5F;
  text-align: center;
}

/* ---------- celebrate ---------- */

.celebrate { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; }
.celebrate .big-emoji { font-size: 96px; line-height: 1; animation: pop 0.8s; }
.celebrate h1 { margin: 0; font-size: clamp(30px, 9vw, 44px); font-weight: 800; }
.celebrate .earned { margin: 0; font-size: 28px; font-weight: 800; color: var(--accent-d); }
/* The round's numbers: three even tiles, a big number over a small capital label, never wrapping */
.celebrate .cele-stats { display: flex; justify-content: center; gap: 10px; width: 100%; max-width: 420px; margin: 6px auto 4px; }
.cele-stat { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px 10px; background: var(--card); border-radius: 18px; box-shadow: var(--shadow-soft); }
.cele-stat b { display: flex; align-items: center; gap: 3px; font-size: 30px; line-height: 1; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cele-stat.won b { color: var(--accent-d); }
.cele-stat .cs-star { display: block; width: 24px; height: 24px; }
.cele-stat .cs-star svg { width: 100%; height: 100%; display: block; }
.cele-stat .cs-star path { fill: #FFC93C; stroke: #E0A800; stroke-width: 1.5; stroke-linejoin: round; }
.cele-stat small { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
@media (max-width: 360px) { .cele-stat b { font-size: 25px; } .cele-stat small { font-size: 10px; letter-spacing: 0.04em; } }
.sticker-reveal {
  margin-top: 8px;
  background: var(--card);
  border-radius: var(--radius);
  padding: 14px 28px;
  box-shadow: var(--shadow-soft);
  display: flex; flex-direction: column; align-items: center;
  animation: pop 0.9s;
}
.sticker-reveal[hidden] { display: none; }
.sticker-reveal .st { font-size: 96px; line-height: 1.1; }
.cele-extra { display: grid; gap: 6px; justify-items: center; width: min(100%, 320px); }
.cele-trail { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; font-size: 26px; line-height: 1; }
.cele-trail span { animation: pop 0.6s; }
.cele-next { margin: 4px 0 0; font-weight: 800; color: var(--muted); }
.cele-next b { color: var(--accent-d); font-size: 20px; }
.progress-bar.small { height: 10px; width: 100%; }
.sticker-reveal .cap { font-weight: 800; color: var(--grape-d); font-size: 20px; }
.book-sticker { border: 0; font: inherit; color: inherit; cursor: pointer; }
.book-sticker .st { width: 100px; height: 100px; font-size: 80px; }
.book-sticker .cap::after { content: ' ›'; color: var(--muted); }

/* ---------- Take Away: number blocks ---------- */
.eq { display: flex; align-items: center; gap: 10px; font: 800 clamp(34px, 10vw, 54px)/1 var(--font-ui); color: var(--ink); background: var(--card); padding: 6px 22px; border-radius: var(--radius); box-shadow: var(--shadow-soft); }
.eq .op { color: var(--muted); font-weight: 700; }
.eq .q { color: var(--grape-d); min-width: 1.1em; text-align: center; }
.eq.done .q { color: var(--green-d); animation: pop 0.5s; }
.blocks { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 20px; width: 100%; min-height: 140px; }
.towers { display: flex; align-items: flex-end; justify-content: center; gap: 8px; --blk: 30px; --gap: 3px; }
.towers[hidden] { display: none; }
.towers[data-size="mid"] { --blk: 20px; --gap: 3px; gap: 5px; }
.towers[data-size="small"] { --blk: 15px; --gap: 2px; gap: 4px; }
.towers .group { display: flex; align-items: flex-end; gap: inherit; }
.towers .join { font: 800 32px/1 var(--font-ui); color: var(--muted); align-self: center; padding: 0 4px; }
.blocks.div .towers { flex-direction: column; align-items: center; gap: 12px; }
.blocks.div .row { display: flex; align-items: flex-end; justify-content: center; gap: 6px; }
.blocks.div .row.plates { padding-top: 8px; border-top: 2px dashed #E3DCF5; }
.col.plate { min-height: calc(var(--blk) + 14px); }
.col.plate .dish { display: block; width: calc(var(--blk) + 12px); height: 7px; border-radius: 50%; background: #D5C8F5; margin: 3px -6px 0; }
.col .tally { position: absolute; top: -24px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff; font: 800 13px/1 var(--font-ui); padding: 4px 7px; border-radius: 999px; box-shadow: 0 2px 0 var(--accent-d); z-index: 2; }
.col.counted .blk { box-shadow: inset 0 calc(var(--blk) * -0.12) 0 rgba(0, 0, 0, 0.14), 0 0 0 2px var(--accent); }
@keyframes snap { 0% { transform: scale(1.18); filter: brightness(1.35); } 60% { transform: scale(0.96); } 100% { transform: none; filter: none; } }
.col.snap { animation: snap 0.5s; }
.col { display: flex; flex-direction: column-reverse; gap: var(--gap); border: 0; background: none; padding: 6px 3px; margin: 0; position: relative; cursor: pointer; border-radius: 10px; touch-action: manipulation; }
.col:disabled { cursor: default; }
.col:not(:disabled):active { transform: translateY(2px); }
.blk { width: var(--blk); height: var(--blk); border-radius: 22%; background-color: var(--blk-c, #D9D4E8); box-shadow: inset 0 calc(var(--blk) * -0.12) 0 rgba(0, 0, 0, 0.14), 0 2px 0 rgba(46, 42, 71, 0.12); position: relative; display: block; }
.col.ten .seg { width: var(--blk); height: var(--blk); border-radius: 22%; background: #F3D36B; box-shadow: inset 0 0 0 2px #D9B21E, 0 1px 0 rgba(46, 42, 71, 0.12); display: block; } /* a ten is a gold rod: one solid block of ten */
.col.ten .ten-lbl { position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); background: var(--grape); color: #fff; font: 800 12px/1 var(--font-ui); padding: 3px 5px; border-radius: 999px; pointer-events: none; }
@keyframes crack { 0% { transform: scale(1); } 30% { transform: scale(1.08) rotate(-3deg); } 60% { transform: scale(0.97) rotate(3deg); } 100% { transform: none; } }
.col.crack { animation: crack 0.4s; }
@keyframes hop { 0% { opacity: 1; transform: none; } 35% { transform: translate(30px, -46px) rotate(18deg); opacity: 1; } 100% { transform: translate(110px, 30px) rotate(70deg); opacity: 0; } }
.hop { animation: hop 0.65s ease-in forwards; z-index: 3; }
.col.none { align-items: center; justify-content: center; min-height: calc(var(--blk) * 2); }
.col.none .zero { width: calc(var(--blk) * 1.6); height: calc(var(--blk) * 1.6); border: 3px dashed #D5C8F5; border-radius: 22%; display: grid; place-items: center; font: 800 calc(var(--blk) * 0.9)/1 var(--font-ui); color: var(--muted); }
.bubble-say { position: absolute; top: -36px; left: 50%; transform: translateX(-50%); background: var(--card); color: var(--grape-d); font: 800 15px/1 var(--font-ui); padding: 7px 10px; border-radius: 999px; white-space: nowrap; box-shadow: var(--shadow-soft); animation: pop 0.5s; z-index: 2; }
.bubble-say::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: var(--card); transform: translateX(-50%) rotate(45deg); }
.taken { display: flex; flex-direction: column; align-items: center; gap: 6px; font-weight: 800; color: var(--muted); font-size: 15px; align-self: flex-end; padding-bottom: 8px; }
.taken[hidden] { display: none; }
.taken b { color: var(--accent-d); font-size: 20px; }
.pile { display: grid; grid-template-columns: repeat(5, 9px); gap: 2px; }
.pile .mini { width: 9px; height: 9px; border-radius: 2px; background: #CFC8E6; }
.choices.nums .choice.num { aspect-ratio: auto; padding: 16px 6px; font: 800 clamp(34px, 11vw, 56px)/1 var(--font-ui); color: var(--ink); }

/* ---------- starter letter games (beginners) ---------- */
.menu-card[hidden], .menu-title[hidden] { display: none; }
.menu-title { margin: 20px 4px -6px; font-size: 20px; font-weight: 800; color: var(--ink); }
.starter .menu { margin-top: 14px; }
.hear-btn { border: 0; background: var(--card); border-radius: 50%; width: 132px; height: 132px; box-shadow: 0 5px 0 var(--tile-shadow), var(--shadow-soft); display: grid; place-items: center; align-content: center; gap: 2px; cursor: pointer; }
.hear-btn .hear-ico { font-size: 58px; line-height: 1; }
.hear-btn small { font: 800 13px/1 var(--font-ui); color: var(--muted); }
.hear-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--tile-shadow); }
.hear-reveal { display: flex; align-items: center; gap: 10px; background: var(--card); border-radius: 999px; padding: 6px 18px; box-shadow: var(--shadow-soft); }
.hear-reveal[hidden] { display: none; }
.hear-reveal .hr-pic { font-size: 40px; line-height: 1; }
.hear-reveal .hr-word { font: 700 30px/1 var(--font-read); color: var(--ink); }
.hear-reveal .hr-word b { color: var(--accent-d); }
.choices.letters3 .choice.letter { aspect-ratio: auto; padding: 18px 6px; }
.choice.letter .lbl { font-size: 26px; }
/* Big & Little */
.case-prompt { position: relative; display: grid; place-items: center; min-width: 150px; padding: 26px 34px 14px; background: var(--card); border-radius: 28px; box-shadow: 0 5px 0 var(--tile-shadow), var(--shadow-soft); }
.case-shown { font: 700 clamp(96px, 30vw, 150px)/1 var(--font-read); color: var(--grape-d); }
.case-prompt.up .case-shown { color: var(--sky-d); }
.case-tag { position: absolute; top: 8px; left: 12px; font: 800 14px/1 var(--font-ui); color: var(--muted); }
.case-ask { margin: 0; font: 800 18px/1.2 var(--font-ui); color: var(--ink); }
.choice.case-choice { justify-content: center; }
.case-choice .case-ch { font-size: clamp(48px, 14vw, 72px); line-height: 1; }
.abc-tile { position: relative; }
.abc-tile.known::after { content: '⭐'; position: absolute; top: 3px; right: 5px; font-size: 13px; line-height: 1; }
.beginner-tog { flex-basis: 100%; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--muted); }
.beginner-tog input { width: 20px; height: 20px; accent-color: var(--accent); }
.sound-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.sg { position: relative; aspect-ratio: 1; border-radius: 10px; display: grid; place-items: center; font: 700 20px/1 var(--font-read); }
.sg.known { background: #2a78d6; color: #fff; }
.sg.started { background: #cde2fb; color: var(--ink); }
.sg.new { background: #F3F0F8; color: var(--muted); }
.sg i { position: absolute; top: 2px; right: 4px; font-size: 10px; font-style: normal; }
.sg-key { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; font-weight: 700; color: var(--muted); }
.sg-key span { display: inline-flex; align-items: center; gap: 6px; }
.sg-sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.sg-sw.known { background: #2a78d6; } .sg-sw.started { background: #cde2fb; } .sg-sw.new { background: #F3F0F8; box-shadow: inset 0 0 0 1px #DCD4EE; }

/* ---------- play clock and dashboard ---------- */
.play-clock { position: fixed; left: calc(max(6px, env(safe-area-inset-left)) + 52px); bottom: max(12px, calc(env(safe-area-inset-bottom) + 6px)); z-index: 20; background: rgba(255, 255, 255, 0.92); color: var(--muted); font: 800 14px/1 var(--font-ui); padding: 7px 11px; border-radius: 999px; box-shadow: var(--shadow-soft); font-variant-numeric: tabular-nums; pointer-events: none; }
.play-clock[hidden] { display: none; }
#dash-body { display: grid; gap: 14px; padding-bottom: 24px; }
.dash-filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; }
.chip { border: 0; background: var(--card); border-radius: 999px; padding: 8px 12px; font: 800 14px/1 var(--font-ui); color: var(--muted); box-shadow: var(--shadow-soft); cursor: pointer; }
.chip.on { background: #2a78d6; color: #fff; }
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kpi { background: var(--card); border-radius: 16px; padding: 12px 14px; box-shadow: var(--shadow-soft); display: grid; gap: 4px; align-content: start; }
.kpi.hero { grid-column: 1 / -1; }
.kpi-label { font-size: 13px; font-weight: 700; color: var(--muted); }
.kpi-value { font-size: 26px; font-weight: 800; color: var(--ink); line-height: 1.1; }
.kpi.hero .kpi-value { font-size: 48px; }
.kpi-sub { font-size: 12px; font-weight: 600; color: var(--muted); }
.chart-card { background: var(--card); border-radius: var(--radius); padding: 14px 14px 10px; box-shadow: var(--shadow-soft); display: grid; gap: 8px; }
.chart-card h3 { margin: 0; font-size: 17px; font-weight: 800; }
.chart-card .hint { margin: 0; font-size: 13px; color: var(--muted); font-weight: 600; }
.chart-card small { color: var(--muted); }
.viz { display: block; font-family: var(--font-ui); overflow: visible; }
.viz .mark { outline: none; cursor: default; }
.viz .mark .xh, .viz .mark .pt { opacity: 0; }
.viz .mark.on .xh, .viz .mark.on .pt { opacity: 1; }
.viz .mark.on path { filter: brightness(1.12); }
.viz-tip { position: absolute; z-index: 50; background: #2E2A47; color: #fff; font: 700 13px/1.3 var(--font-ui); padding: 7px 10px; border-radius: 10px; pointer-events: none; max-width: 240px; box-shadow: var(--shadow-soft); }
.viz-tip[hidden] { display: none; }
.table-view summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--muted); }
.table-view .report { margin-top: 6px; font-size: 13px; }
@media (min-width: 720px) { .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kpi.hero { grid-column: span 1; } }

.panel.account .hint b { color: var(--ink); }

/* ---------- sticker book ---------- */

.progress { background: var(--card); border-radius: var(--radius); padding: 14px 18px; box-shadow: var(--shadow-soft); margin-bottom: 16px; }
.progress .row { display: flex; justify-content: space-between; font-weight: 800; margin-bottom: 8px; }
.progress-bar { height: 16px; background: #EFE9F8; border-radius: 999px; overflow: hidden; }
.progress-bar > i { display: block; height: 100%; background: linear-gradient(90deg, #7FDCC9, var(--accent)); border-radius: 999px; transition: width 0.5s; }

.stickers { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
/* the book is sheets of twenty */
.sheet { margin-bottom: 18px; }
.sheet h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 4px 8px; font-size: 19px; font-weight: 800; color: var(--grape-d); }
.sheet h3 small { font-size: 15px; font-weight: 800; color: var(--muted); white-space: nowrap; }
.sheet.full h3 small { color: var(--green-d, #2f8f5b); }
.sheet.folded { background: var(--card); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow-soft); opacity: 0.75; }
.sheet.folded h3 { margin: 0; }
/*
 * Die-cut stickers: each one is its own shape with a white vinyl edge and a soft shadow, stuck at a slight
 * tilt on the page, not a square tile. The page is the paper they sit on.
 */
:root { --die-cut: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 4px 4px rgba(46, 42, 71, 0.28)); }
.sheet:not(.folded) .stickers { position: relative; padding: 12px; border-radius: 22px; background: var(--card); box-shadow: var(--shadow-soft); }
.sticker {
  aspect-ratio: 1;
  border-radius: 50%;
  background: none;
  border: 0;
  padding: 0;
  display: grid; place-items: center;
  font-size: clamp(30px, 9vw, 46px);
  line-height: 1;
  transform: rotate(var(--tilt, 0deg));
  transition: transform 0.15s;
}
.sticker:nth-child(3n + 1) { --tilt: -6deg; }
.sticker:nth-child(3n + 2) { --tilt: 4deg; }
.sticker:nth-child(4n) { --tilt: -2deg; }
.sticker:not(.locked):active { transform: rotate(var(--tilt, 0deg)) scale(1.15); }
.sticker { position: relative; }
.sticker .st-img, .sticker-reveal .st-img { position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; }
.sticker .st-img { filter: var(--die-cut); }
.sticker .st-emoji { text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff, 0 4px 5px rgba(46, 42, 71, 0.28); }
.sticker-reveal .st { position: relative; width: 120px; height: 120px; display: grid; place-items: center; }
.sticker-reveal .st .st-img { inset: 0; width: 100%; height: 100%; }
/* a full page's star sticker plays its clip in a round gold-edged frame; the picture shows if the clip is missing */
.st-anim { position: absolute; inset: 3%; width: 94%; height: 94%; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 0 0 3px var(--sun), 0 4px 10px rgba(46, 42, 71, 0.3); z-index: 1; }
.st-anim { opacity: 0; }
.st-anim.ready { opacity: 1; }
.st-anim.ready + .st-img { visibility: hidden; } /* the picture shows until the clip has really loaded */
/* the emoji stands in only when a sticker has no picture (the picture removes itself if it fails to load) */
.st-img + .st-emoji { visibility: hidden; }
/* an empty spot is a dashed outline waiting for its sticker */
.sticker.locked { width: 78%; margin: auto; border: 3px dashed #DCD2F0; background: #FBF9FE; font-size: 22px; color: #C6BCE0; cursor: default; transform: none; }
.sticker.new { animation: pop 0.9s; }
.sticker.new, .sticker.latest { background: radial-gradient(circle, #FFE79A 0%, rgba(255, 231, 154, 0.55) 45%, rgba(255, 231, 154, 0) 70%); }

/* ---------- grown-ups ---------- */

.panel { background: var(--card); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-soft); display: grid; gap: 16px; margin-bottom: 16px; }
.panel h3 { margin: 0; font-size: 20px; font-weight: 800; }
.panel .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.panel label { font-weight: 700; }
.panel .hint { margin: 0; color: var(--muted); font-size: 15px; font-weight: 600; }
.panel input[type="text"],
.panel input[type="email"] {
  font: 700 18px var(--font-ui);
  padding: 10px 14px;
  border-radius: 12px;
  border: 2px solid var(--line);
  width: 100%;
  max-width: 240px;
  color: var(--ink);
  background: #fff;
}
.panel input[type="range"] { width: 160px; accent-color: var(--teal); }

.switch { position: relative; display: inline-block; width: 56px; height: 32px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch span { position: absolute; inset: 0; background: #DDD5EE; border-radius: 999px; transition: 0.2s; cursor: pointer; }
.switch span::before { content: ''; position: absolute; width: 26px; height: 26px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: 0.2s; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }
.switch input:checked + span { background: var(--teal); }
.switch input:checked + span::before { transform: translateX(24px); }

.report { width: 100%; border-collapse: collapse; font-size: 15px; }
.report th, .report td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); }
.report th { color: var(--muted); font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; }
.report td.num { text-align: right; font-variant-numeric: tabular-nums; }
.report th.num { text-align: right; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* Grown-ups: a card per child (tap for her stats), and the reset that asks first */
.kid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.kid-card { display: flex; align-items: center; gap: 12px; text-align: left; font: inherit; color: var(--ink); background: #F3FBF9; border: 2px solid #CFEDE6; border-radius: 18px; padding: 12px 14px; cursor: pointer; box-shadow: 0 4px 0 #CFEDE6; }
.kid-card:active { transform: translateY(3px); box-shadow: 0 1px 0 #CFEDE6; }
.kid-avatar { font-size: 40px; line-height: 1; flex: none; }
.kid-info { display: grid; gap: 2px; flex: 1; min-width: 0; }
.kid-info b { font-size: 20px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kid-info span { font-weight: 700; font-size: 15px; }
.kid-info small { color: var(--muted); font-weight: 600; font-size: 13px; }
.kid-go { flex: none; font-weight: 800; color: var(--accent-d); white-space: nowrap; }
.reset-panel > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
.reset-panel > summary::-webkit-details-marker { display: none; }
.reset-panel > summary::after { content: '▸'; color: var(--muted); }
.reset-panel[open] > summary::after { content: '▾'; }
.reset-panel > summary h3 { font-size: 17px; color: var(--muted); }
.reset-panel:not([open]) { gap: 0; }
.reset-confirm { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: #FDEEF1; border: 2px solid #F4C4CE; }
.reset-confirm p { margin: 0; font-weight: 600; }
.reset-confirm .row { justify-content: flex-start; }
.btn.danger:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------- family accounts and the site admin page ---------- */

.legal-links { margin: 10px 0 0; font-size: 13px; font-weight: 700; color: var(--muted); text-align: center; }
.legal-links a { color: var(--accent-d); }
.panel .legal-links { margin: 0; text-align: left; }
.panel .row.wrap { justify-content: flex-start; }
.account-step select { font: 700 18px var(--font-ui); padding: 10px 14px; border-radius: 12px; border: 2px solid var(--line); background: #fff; color: var(--ink); min-width: 140px; }
.account .ok-note { margin: 0 0 8px; padding: 8px 12px; border-radius: 12px; background: #E3F6F1; color: var(--accent-d); font-weight: 800; }
/* Feedback: the form in Grown-ups, and the cards on the admin page */
.report-box textarea { width: 100%; box-sizing: border-box; font: 600 17px/1.4 var(--font-ui); padding: 10px 14px; border-radius: 12px; border: 2px solid var(--line); color: var(--ink); resize: vertical; }
.fb-kinds { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.fb-kind { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #F2FAF7; font-weight: 700; cursor: pointer; }
.fb-label { display: block; margin: 10px 0 4px; font-weight: 700; }
/* Grown-ups in a family: who shares it, invitations waiting, inviting someone */
.account .members { list-style: none; margin: 6px 0 10px; padding: 0; display: grid; gap: 6px; }
.account .members li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; overflow-wrap: anywhere; }
.account .members .tag { font-size: 12px; font-weight: 800; color: var(--accent-d); background: #E3F6F2; border-radius: 999px; padding: 1px 8px; }
.account .share { margin-top: 14px; padding-top: 12px; border-top: 2px solid var(--line); }
.account .share h4 { margin: 0 0 4px; font-size: 17px; }
.account .share .row input[type="email"] { flex: 1 1 180px; min-width: 0; }
.account .invites { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; }
.account .invites li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.account .invites li > span:first-child { font-weight: 700; overflow-wrap: anywhere; }
.consent .consent-list { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 15px; line-height: 1.4; }
.consent-check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.35; }
.consent-check input { width: 20px; height: 20px; flex: none; margin-top: 1px; accent-color: var(--accent); }
.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 16px; }
.admin-stat { background: var(--card); border-radius: 16px; padding: 12px; box-shadow: var(--shadow-soft); display: grid; gap: 2px; }
.admin-stat b { font-size: 28px; line-height: 1; color: var(--accent-d); }
.admin-stat span { font-size: 13px; font-weight: 700; color: var(--muted); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.admin-table td small { color: var(--muted); font-weight: 600; }
.admin-table input { width: 20px; height: 20px; accent-color: var(--accent); }

.chip { background: #E1F4EE; border-radius: 999px; padding: 6px 12px; font: 700 17px var(--font-read); }
.chip small { font-family: var(--font-ui); color: var(--muted); font-weight: 700; }

.gate { text-align: center; display: grid; gap: 14px; justify-items: center; padding-top: 20px; }
.gate .q { font-size: 30px; font-weight: 800; margin: 0; }
.gate .opts { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ---------- players ---------- */

.hero-row { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; }
.player-chip {
  background: var(--card);
  border: 0;
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 800;
  font-size: 18px;
  box-shadow: var(--shadow-soft);
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px;
}
.player-chip .chev { color: var(--muted); font-size: 14px; }
/* Save progress: a guest's way to a family account, any time; "Saved" once signed in */
.save-chip {
  border: 0; border-radius: 999px; padding: 8px 16px; min-height: 44px;
  font: inherit; font-weight: 800; font-size: 17px; cursor: pointer;
  background: var(--accent); color: #fff; box-shadow: 0 4px 0 var(--accent-d);
}
.save-chip:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--accent-d); }
.save-chip.saved { background: var(--card); color: var(--accent-d); box-shadow: var(--shadow-soft); font-size: 16px; }

.players { display: grid; gap: 12px; }
.player-card {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  background: var(--card);
  border: 3px solid transparent;
  border-radius: var(--radius);
  text-align: left;
  box-shadow: 0 5px 0 var(--tile-shadow), var(--shadow-soft);
  transition: transform 0.08s, box-shadow 0.08s;
  width: 100%;
}
.player-card:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--tile-shadow); }
.player-card.current { border-color: var(--sun); }
.player-card .avatar {
  width: 64px; height: 64px; flex: none;
  border-radius: 50%;
  background: #E1F4EE;
  font-size: 36px; line-height: 1;
  display: grid; place-items: center;
}
.player-card .txt { flex: 1; display: flex; flex-direction: column; }
.player-card .nm { font-size: 24px; font-weight: 800; }
.player-card small { color: var(--muted); font-weight: 700; font-size: 15px; }
.player-card .tick { color: var(--green-d); font-size: 28px; font-weight: 800; }

.hint.center { text-align: center; color: var(--muted); font-weight: 600; font-size: 15px; margin-top: 18px; }

.player-rows { display: grid; gap: 10px; }
.player-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 10px;
  border-radius: 16px;
  background: #FAF7FF;
}
.player-row.current { background: #E8F7F2; }
.avatar-btn {
  width: 48px; height: 48px; flex: none;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: #fff;
  font-size: 26px; line-height: 1;
  display: grid; place-items: center;
  padding: 0;
}
.player-row .player-name { flex: 1; min-width: 120px; max-width: none; }
.player-row .tag { font-weight: 800; color: var(--accent-d); font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; }
.player-row .link-btn { padding: 8px; font-size: 14px; color: var(--danger-d); }

/* ---------- leaderboard ---------- */

.collection { display: grid; gap: 16px; }
.col-hero { display: flex; align-items: center; gap: 14px; background: var(--card); border-radius: var(--radius); padding: 14px 18px; box-shadow: var(--shadow-soft); }
.col-hero h3 { margin: 0; font-size: 24px; font-weight: 800; }
.col-hero .hint { margin: 2px 0 0; color: var(--muted); font-weight: 700; font-size: 15px; }
.col-avatar { font-size: 46px; line-height: 1; width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; background: #FFF6D6; flex: none; }
.col-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.col-card {
  --c: var(--sun); --c-d: var(--sun-d);
  background: var(--card);
  border: 0; border-radius: 20px;
  padding: 12px 6px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  box-shadow: 0 4px 0 var(--c-d), var(--shadow-soft);
  font: inherit; color: var(--ink); text-align: center;
  min-width: 0;
}
button.col-card:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--c-d); }
.col-emoji { font-size: 30px; line-height: 1; width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 24%, white); }
.col-num { font-size: 26px; font-weight: 800; line-height: 1.1; margin-top: 4px; }
.col-num small { font-size: 14px; color: var(--muted); font-weight: 800; }
.col-label { font-size: 13px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.02em; }
.col-sub { font-size: 12px; font-weight: 700; color: var(--grape-d); }
.col-go { font-size: 12px; font-weight: 800; color: var(--c-d); margin-top: 2px; }

/* Speed Records: the fastest perfect round on each level, every player side by side */
.records { display: grid; gap: 14px; }
.rec-holders { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.rec-holder { background: var(--card); border-radius: 999px; padding: 8px 14px; font-weight: 800; box-shadow: var(--shadow-soft); }
.rec-holder.me { outline: 3px solid var(--grape); }
.rec-holder b { color: var(--grape-d); }
.rec-game { background: var(--card); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow-soft); display: grid; gap: 10px; }
.rec-game h3 { margin: 0; font-size: 20px; }
.rec-level { display: grid; gap: 4px; }
.rec-level > b { font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.02em; }
.rec-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rec-rows li { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 8px; min-height: 44px; padding: 4px 12px; border-radius: 12px; background: color-mix(in srgb, var(--sun) 16%, white); font-weight: 700; }
.rec-rows li.me { background: color-mix(in srgb, var(--grape) 16%, white); }
.rec-rows li b { font-size: 18px; }
.race-reveal { background: color-mix(in srgb, var(--rose, var(--grape)) 18%, white); border-color: var(--rose-d, var(--grape-d)); }
.race-reveal .medal-ico { border-color: var(--rose-d, var(--grape-d)); }
@media (max-width: 360px) { .col-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- rhyme (words only) ---------- */

.target-word { color: var(--grape-d); }
/* Rhyme Time reading checks */
.rhyme-top { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.check {
  border: 0; border-radius: 999px; background: var(--card); color: var(--green-d);
  box-shadow: 0 4px 0 var(--tile-shadow), var(--shadow-soft);
  width: 74px; height: 74px; display: grid; place-items: center; align-content: center; gap: 1px;
  font-family: var(--font-ui); cursor: pointer; transition: transform 0.1s, background 0.2s; flex: none;
}
.check .tick { font-size: 30px; font-weight: 800; line-height: 1; }
.check small { font-size: 11px; font-weight: 800; color: var(--muted); line-height: 1; }
.check:active { transform: scale(1.08); }
.check.done { background: var(--green); color: #fff; box-shadow: 0 4px 0 var(--green-d); cursor: default; animation: pop 0.5s; }
.check.done small { color: #fff; }
.check.double { width: auto; padding: 0 16px; }
/* Rhyme Time: a check's stars are held (pale) until the rhyme is picked. */
.check { position: relative; }
.check .held { position: absolute; top: -9px; right: -8px; font-style: normal; font-size: 15px; line-height: 1; filter: grayscale(1); opacity: 0.55; transition: opacity 0.3s, transform 0.3s, filter 0.3s; }
.check .held.paid { filter: none; opacity: 1; animation: pop 0.6s; }
.check .held.lost { opacity: 0; transform: translateY(8px) scale(0.6); }
.rhyme-sentence {
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  width: 100%; box-sizing: border-box; background: var(--card); border-radius: var(--radius); padding: 10px 16px; box-shadow: var(--shadow-soft);
}
.rhyme-sentence.show { animation: pop 0.5s; }
.rhyme-sentence[hidden] { display: none; }
.rhyme-line { margin: 0; font: 400 clamp(24px, 6vw, 34px)/1.4 var(--font-read); color: var(--ink); text-align: center; }
.rhyme-line b { color: var(--grape-d); font-weight: 700; }
.choice.word { font: 700 clamp(22px, 7vw, 34px)/1.1 var(--font-read); aspect-ratio: auto; padding: 20px 6px; }

/* ---------- little books ---------- */

.books { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.book-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 10px 14px;
  border-radius: var(--radius);
  background: var(--card);
  border: 0;
  box-shadow: 0 6px 0 var(--c-d), var(--shadow-soft);
  transition: transform 0.08s, box-shadow 0.08s;
  color: var(--ink);
}
.book-card:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--c-d); }
.book-cover {
  width: 100%; aspect-ratio: 1;
  border-radius: 18px;
  background: color-mix(in srgb, var(--c) 22%, white);
  display: grid; place-items: center;
  position: relative; overflow: hidden;
}
.book-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.book-cover img + .book-emoji { display: none; }
.book-emoji { font-size: clamp(48px, 16vw, 80px); line-height: 1; }
.book-title { font: 800 19px/1.15 var(--font-ui); text-align: center; }
.book-meta { font-weight: 700; color: var(--muted); font-size: 13px; text-align: center; }
.book-read { font: 800 13px var(--font-ui); color: var(--green-d); text-align: center; }
.book-read.new { color: var(--muted); font-weight: 700; opacity: 0.7; }
/* the READ seal: an ink stamp in the cover's corner, double ring like the stamp book, a little askew */
.book-seal {
  position: absolute; top: 5%; right: 5%;
  width: 34%; max-width: 92px; aspect-ratio: 1; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: rgba(255, 255, 255, 0.94);
  border: 4px double var(--green-d);
  color: var(--green-d);
  font: 900 clamp(11px, 2.6vw, 14px)/1 var(--font-ui);
  text-transform: uppercase; letter-spacing: 0.06em;
  transform: rotate(10deg);
  box-shadow: 0 3px 8px rgba(46, 42, 71, 0.22);
}
.book-seal b { font-size: 1.5em; line-height: 1; }
.book-seal i { font-style: normal; font-size: 0.85em; letter-spacing: 0; }
.book-card.read .book-cover::after { content: ''; position: absolute; inset: 0; border: 4px solid var(--green); border-radius: inherit; pointer-events: none; }

.reader { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; }
/* The picture is as big a square as fits: the full width, or the height the words and buttons leave. */
.reader-pic { width: 100%; display: grid; place-items: center; }
.reader-frame {
  width: min(100%, 560px); aspect-ratio: 1;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-soft);
  display: grid; place-items: center;
  position: relative; overflow: hidden;
}
/* A book page fills the phone exactly, so ◀ ▶ never fall under the browser's toolbar. */
.app:has(#screen-reader.paging:not([hidden])) { height: 100dvh; min-height: 0; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
#screen-reader.paging { min-height: 0; }
#screen-reader.paging .reader { min-height: 0; gap: 10px; }
#screen-reader.paging .reader-pic { flex: 1 1 0; min-height: 150px; container-type: size; }
#screen-reader.paging .reader-frame { width: min(100cqmin, 560px); }
#screen-reader .topbar { padding: 0 0 4px; }
#screen-reader .topbar .icon-btn { width: 44px; height: 44px; }
#screen-reader .topbar h2 { font-size: 21px; }
#screen-reader .trail-row { margin: 0 0 8px; flex: none; }
#screen-reader.paging .read-bar { height: 8px; flex: none; }
#screen-reader.paging .read-stats { font-size: 13px; gap: 10px; }
#screen-reader.paging .read-stats b { font-size: 15px; }
#screen-reader.paging .reader-nav { padding-top: 0; }
@media (max-height: 760px) { #screen-reader.paging .reader-text { font-size: clamp(26px, 7vw, 34px); line-height: 1.38; } #screen-reader.paging .reader-text.long { font-size: clamp(22px, 5.8vw, 30px); } }
.reader-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reader-img + .reader-scene { display: none; }
.reader-scene { font-size: clamp(64px, 20vw, 120px); line-height: 1.1; letter-spacing: 0.08em; text-align: center; padding: 10px; }
.reader-text {
  margin: 0;
  font: 400 clamp(28px, 7.5vw, 42px)/1.5 var(--font-read);
  text-align: center;
  color: var(--ink);
  max-width: 560px;
}
/* the chapter-length books: a long sentence a size smaller so the page still fits */
.reader-text.long { font-size: clamp(24px, 6.2vw, 36px); line-height: 1.45; }
.rw { background: none; border: 0; padding: 0 2px; font: inherit; color: inherit; border-radius: 8px; }
.rw.hi { background: #FFF1B8; color: var(--accent-d); }
.reader-nav { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 10px; width: 100%; justify-content: center; }
/* the smallest phones: ◀ and ▶ clear of the mute and feedback buttons in the corners */
@media (max-width: 359px) { .reader-nav { padding: 10px 44px 0; gap: 8px; } .reader-nav .nav-btn { min-width: 0; padding-left: 16px; padding-right: 16px; } }
.nav-btn { min-width: 96px; font-size: 24px; }
.nav-btn:disabled { opacity: 0.35; }
.reader-count { font-weight: 800; color: var(--muted); }
.book-end { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.book-end .big-emoji { font-size: 84px; line-height: 1; animation: pop 0.8s; }
.book-end h2 { margin: 0; font-size: 34px; font-weight: 800; }
.book-end .book-sum { margin: 0; font-size: 20px; font-weight: 700; color: var(--muted); }
.book-end .book-sum b { color: var(--ink); font-size: 24px; }
.book-end .earned { margin: 6px 0 0; font-size: 22px; font-weight: 800; color: var(--accent-d); }
/* the Detective question at the end of a book */
.book-end .btn small { font-size: 13px; font-weight: 800; opacity: 0.85; margin-left: 4px; }
.detective .case-badge { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; font-size: 46px; background: color-mix(in srgb, var(--sky) 18%, white); border: 4px double var(--sky-d); animation: pop 0.8s; }
.detective h2 { font-size: 28px; }
.detective .hint { margin: 0; max-width: 420px; }
.q-row { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; background: var(--card); border-radius: var(--radius); padding: 12px 16px; box-shadow: var(--shadow-soft); box-sizing: border-box; }
.q-row .q-text { flex: 1; text-align: left; font: 700 clamp(22px, 5.6vw, 30px)/1.3 var(--font-read); color: var(--ink); }
.detective .choices[hidden] { display: none; }
.detective .choices { grid-template-columns: 1fr; gap: 10px; width: 100%; }
.detective .choice.word { aspect-ratio: auto; min-height: 0; padding: 14px 18px; font-size: clamp(22px, 5.6vw, 30px); line-height: 1.25; }
.badge-reveal { display: flex; align-items: center; gap: 12px; margin-top: 4px; padding: 10px 18px 10px 10px; border-radius: 999px; background: color-mix(in srgb, var(--sky) 16%, white); border: 3px solid var(--sky-d); color: var(--ink); animation: stamp-in 0.7s cubic-bezier(0.2, 1.4, 0.4, 1); transform: rotate(-3deg); }
.badge-reveal .badge-ico { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; background: #fff; border: 3px double var(--sky-d); }
.badge-reveal b { display: block; font-size: 20px; }
.badge-reveal small { display: block; font-size: 13px; font-weight: 700; color: var(--muted); }
.stamp { position: relative; }
.stamp-badge { position: absolute; top: 2%; right: 2%; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; background: #fff; border: 3px double var(--sky-d); transform: rotate(6deg); box-shadow: 0 2px 6px rgba(46, 42, 71, 0.15); }

/* ---------- letter sounds ---------- */

.abc-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.abc-tile {
  aspect-ratio: 1;
  border-radius: 18px;
  border: 0;
  background: var(--card);
  box-shadow: var(--rings, 0 0 transparent), 0 4px 0 var(--tile-shadow), var(--shadow-soft);
  display: flex; align-items: baseline; justify-content: center; gap: 4px;
  font-family: var(--font-read);
  font-weight: 700;
  color: var(--ink);
  transition: transform 0.08s;
}
.abc-tile:active { transform: translateY(3px); box-shadow: var(--rings, 0 0 transparent), 0 1px 0 var(--tile-shadow); }
.abc-tile.vowel { color: var(--accent); }
.abc-upper { font-size: clamp(26px, 8vw, 36px); }
.abc-lower { font-size: clamp(20px, 6vw, 28px); }

.letter-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow-soft);
  margin-bottom: 16px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  animation: fade-in 0.25s;
}
.letter-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
.letter-big, .letter-prompt {
  font-family: var(--font-read);
  font-weight: 700;
  display: flex; align-items: baseline; justify-content: center; gap: 12px;
  color: var(--ink);
}
.letter-big.vowel { color: var(--accent); }
.letter-big .lp-upper, .letter-prompt .lp-upper { font-size: clamp(72px, 22vw, 120px); line-height: 1; }
.letter-big .lp-lower, .letter-prompt .lp-lower { font-size: clamp(56px, 17vw, 92px); line-height: 1; }
.letter-words { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; }
.letter-word {
  border: 0;
  background: #F2FAF7;
  border-radius: 18px;
  padding: 12px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  box-shadow: var(--rings, 0 0 transparent), 0 4px 0 var(--tile-shadow);
  position: relative;
  transition: box-shadow 0.3s;
}
.letter-word:active { transform: translateY(3px); box-shadow: var(--rings, 0 0 transparent), 0 1px 0 var(--tile-shadow); }
/* Each tap rings the box in the next colour of the rainbow; a star floats up for the first three. */
.letter-big .letter-sound { padding: 6px 18px; border-radius: 26px; box-shadow: var(--rings, 0 0 transparent); position: relative; transition: box-shadow 0.3s; }
.tap-star { position: absolute; top: 4px; right: 6px; font-style: normal; font-size: 22px; line-height: 1; pointer-events: none; animation: tap-star 0.9s ease-out forwards; }
@keyframes tap-star { 0% { transform: scale(0.4); opacity: 0; } 25% { transform: scale(1.3); opacity: 1; } 100% { transform: translateY(-34px) scale(0.9); opacity: 0; } }
.lw-pic { font-size: clamp(40px, 12vw, 60px); line-height: 1.1; }
.lw-txt { font: 700 clamp(16px, 4.5vw, 22px) var(--font-read); color: var(--ink); }
.lw-txt b { color: var(--accent-d); }
.choice.letter { font-family: var(--font-read); font-weight: 700; display: flex; flex-direction: row; align-items: baseline; gap: 8px; }
.choice.letter .lp-upper { font-size: clamp(40px, 12vw, 64px); }
.choice.letter .lp-lower { font-size: clamp(30px, 9vw, 48px); }
.choice .lbl.letter-lbl { font-size: 18px; }

/* ---------- reader: tapped-word help ---------- */

.letter-sound { background: none; border: 0; padding: 0; font: inherit; color: inherit; display: inline-flex; align-items: baseline; gap: 4px; border-radius: 16px; cursor: pointer; }
.letter-sound:active { transform: scale(1.06); }
.rl {
  width: 44px; height: 52px;
  border-radius: 12px;
  background: var(--card);
  box-shadow: 0 4px 0 var(--tile-shadow);
  display: grid; place-items: center;
  font: 700 28px var(--font-read);
  color: var(--ink);
}
.rl.vowel { color: var(--accent); }

/* ---------- reader: tap-as-you-read ---------- */

.read-bar { width: min(100%, 560px); height: 14px; background: #EFE9F8; border-radius: 999px; overflow: hidden; box-shadow: inset 0 1px 3px rgba(0,0,0,0.06); }
.read-bar > i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--teal), var(--sun)); transition: width 0.35s ease; }
.rw { border-bottom: 4px solid transparent; }
.rw.next { border-bottom-color: var(--sun); background: #FFF8DF; }
.rw.read { color: var(--green-d); }
.rw.nudge { animation: nudge 0.5s; }
@keyframes nudge { 30% { transform: translateY(-8px); } 60% { transform: translateY(0); } 80% { transform: translateY(-4px); } }
.read-stats { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; font-weight: 700; color: var(--muted); font-size: 15px; }
.read-stats b { color: var(--ink); font-size: 18px; }
.read-stats.totals { background: var(--card); border-radius: var(--radius); padding: 12px 16px; box-shadow: var(--shadow-soft); margin-bottom: 16px; }
.nav-btn:disabled { opacity: 0.35; }
.sparkle {
  position: fixed; z-index: 45; pointer-events: none;
  font-size: 26px;
  animation: sparkle 1.3s ease-out forwards;
}
@keyframes sparkle { 0% { opacity: 0; transform: scale(0.3) translateY(0); } 30% { opacity: 1; transform: scale(1.2) translateY(-10px); } 100% { opacity: 0; transform: scale(0.6) translateY(-46px) rotate(20deg); } }

/* ---------- stamps ---------- */

.stamps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.stamp {
  aspect-ratio: 1;
  border-radius: 50%;
  border: 5px double var(--c-d);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  text-align: center;
  padding: 12px;
  color: var(--c-d);
  background: color-mix(in srgb, var(--c) 12%, white);
  transform: rotate(-6deg);
}
.stamp.inked { box-shadow: 0 6px 16px rgba(46, 42, 71, 0.12); }
.stamp.empty { border-style: dashed; border-width: 3px; color: #C9BFE0; background: #FAF7FF; opacity: 0.8; transform: none; }
.stamp-emoji { font-size: clamp(40px, 12vw, 64px); line-height: 1.1; }
.stamp-title { font: 800 15px/1.1 var(--font-ui); text-transform: uppercase; letter-spacing: 0.04em; }
.stamp-date { font: 700 12px var(--font-ui); opacity: 0.8; }
.big-stamp { width: min(64vw, 260px); margin: 0 auto 6px; animation: stamp-in 0.7s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes stamp-in { 0% { transform: scale(3) rotate(-20deg); opacity: 0; } 60% { transform: scale(0.95) rotate(-6deg); opacity: 1; } 100% { transform: scale(1) rotate(-6deg); } }

/* ---------- word cards ---------- */

.flashcard {
  width: 100%; max-width: 480px;
  min-height: 200px;
  background: var(--card);
  border-radius: 28px;
  box-shadow: 0 8px 0 var(--tile-shadow), var(--shadow-soft);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 24px;
  transition: background 0.25s;
}
.flashcard { border: 0; font: inherit; color: inherit; cursor: pointer; flex: 1 1 300px; }
.flashcard .fc-face { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.flashcard .fc-back, .flashcard.flipped .fc-front { display: none; }
.flashcard.flipped .fc-back { display: flex; }
.flashcard.flipped { background: #F1ECFF; }
.fc-tap { font-weight: 700; font-size: 14px; color: var(--muted); opacity: 0.85; }
.fc-tap .snd-ico { font-size: 24px; }
.flashcard.tricky { background: #F2FAF7; }
.flashcard.flipping { animation: card-flip 0.4s ease-in-out; }
@keyframes card-flip { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(0); } }
.flashcard.fed { transition: transform 0.48s ease-in, opacity 0.48s ease-in; transform: translate(var(--dx, 0), var(--dy, 0)) scale(0.12) rotate(25deg); opacity: 0.3; pointer-events: none; }
.fc-hint { font-weight: 700; font-size: 16px; color: var(--muted); }
.card-zone { display: flex; align-items: center; justify-content: center; gap: 18px; width: 100%; max-width: 680px; flex-wrap: wrap; }
.monster { position: relative; width: 140px; flex: 0 0 140px; display: flex; flex-direction: column; align-items: center; transform: scale(var(--grow, 1)); transition: transform 0.35s cubic-bezier(0.2, 1.4, 0.4, 1); }
.monster .m-art svg { width: 120px; height: 120px; display: block; }
.monster .m-mouth { transform-box: view-box; transform-origin: 60px 80px; transition: transform 0.15s; }
.monster.open .m-mouth { transform: scale(1.25, 4); }
.monster.open .m-pupil { transform: translateY(-2px); }
.monster.chomp .m-art svg { animation: chomp 0.5s; }
@keyframes chomp { 0%, 100% { transform: scale(1); } 25% { transform: scale(1.12, 0.88); } 50% { transform: scale(0.94, 1.08); } 75% { transform: scale(1.05, 0.95); } }
.m-bubble { background: #fff; border-radius: 14px; padding: 5px 10px; font-weight: 800; font-size: 14px; color: var(--grape-d); box-shadow: var(--shadow-soft); margin-bottom: 4px; white-space: nowrap; }
.m-count { font-weight: 800; color: var(--muted); font-size: 15px; }
.m-count b { color: var(--ink); font-size: 18px; }
.m-streak { font-weight: 800; color: #E2572B; font-size: 15px; }
.m-streak[hidden] { display: none; }
/* The monster's body, its egg beside it and the friends hatched from eggs (js/monster.js) */
.m-body { position: relative; display: block; }
.m-art { display: block; }
.monster .m-art.grew svg { animation: m-grew 0.7s ease-out; }
@keyframes m-grew { 0% { transform: scale(1); filter: brightness(1); } 35% { transform: scale(1.25) rotate(-4deg); filter: brightness(1.4) drop-shadow(0 0 10px #FFC93C); } 100% { transform: scale(1); filter: brightness(1); } }
.monster .m-wing { transform-box: fill-box; animation: m-flap 1.4s ease-in-out infinite; }
.monster .m-wing.l { transform-origin: 100% 60%; }
.monster .m-wing.r { transform-origin: 0% 60%; }
@keyframes m-flap { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-12deg); } }
.monster .m-wing.r { animation-name: m-flap-r; }
@keyframes m-flap-r { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(12deg); } }
.m-egg { position: absolute; right: -30px; bottom: 0; width: 38px; }
.m-egg svg, .monster .m-egg svg { width: 38px; height: 44px; }
.m-egg.wobble { animation: m-wobble 0.6s ease-in-out; }
@keyframes m-wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
.m-egg.hatching { animation: m-hatch 0.45s ease-in forwards; }
@keyframes m-hatch { 0% { transform: scale(1); } 40% { transform: scale(1.3) rotate(-10deg); } 100% { transform: scale(0); opacity: 0; } }
.m-friends { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; max-width: 150px; margin: 2px 0; }
.m-friends[hidden] { display: none; }
.m-friend { display: block; width: 26px; height: 26px; }
.m-friend svg, .monster .m-friend svg { width: 26px; height: 26px; }
.monster.chomp .m-friend svg { animation: m-hop 0.5s; }
.m-friend:nth-child(even) svg { animation-delay: 0.08s; }
@keyframes m-hop { 50% { transform: translateY(-6px); } }
.m-friend.born svg { animation: m-born 0.8s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes m-born { 0% { transform: scale(0) translateY(10px); } 100% { transform: scale(1); } }
.m-more { font-weight: 800; color: var(--muted); font-size: 13px; align-self: center; }
.egg-reveal .medal-ico svg { width: 44px; height: 52px; }
@media (max-width: 600px) { .monster { flex-basis: 120px; width: 120px; } .monster .m-art svg { width: 96px; height: 96px; } .m-egg { right: -24px; } }
@media (prefers-reduced-motion: reduce) { .flashcard.fed, .monster { transition: none; } .flashcard.flipping, .monster.chomp svg, .monster .m-wing, .m-art.grew svg, .m-egg.wobble, .m-friend.born svg { animation: none; } }
.flash-word { font: 700 clamp(48px, 16vw, 96px)/1.1 var(--font-read); color: var(--ink); }
.flash-letters { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.card-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; width: 100%; }
.big-choice { font-size: 22px; padding: 16px 28px; min-width: 150px; }
.btn.c-green { background: var(--green); box-shadow: 0 5px 0 var(--green-d); }
.btn.c-sun { background: var(--sun); box-shadow: 0 5px 0 var(--sun-d); color: var(--ink); }
.btn.c-grape { background: var(--grape); box-shadow: 0 5px 0 var(--grape-d); }

/* ---------- sight word hundreds ---------- */

.mastery { display: block; height: 8px; background: #EFE9F8; border-radius: 999px; overflow: hidden; margin-top: 8px; }
.mastery > i { display: block; height: 100%; background: linear-gradient(90deg, #7FDCC9, var(--accent)); border-radius: 999px; }
.level-card.locked { opacity: 0.6; }

/* ---------- letter sound recorder ---------- */

.note { margin: -4px 0 12px; font-size: 15px; }
.note .link-btn { font-size: 15px; }
.hint.warn { color: var(--danger-d); }
.record { display: grid; gap: 14px; }
.record code { background: #F3EEFB; border-radius: 6px; padding: 1px 6px; font-size: 14px; }
.rec-stage { background: var(--card); border-radius: var(--radius); padding: 18px 16px; box-shadow: var(--shadow-soft); text-align: center; display: grid; gap: 10px; justify-items: center; }
.rec-letter { font-family: var(--font-read); font-weight: 700; display: flex; align-items: baseline; justify-content: center; gap: 12px; color: var(--ink); }
.rec-letter.vowel { color: var(--accent); }
.rec-letter .lp-upper { font-size: clamp(64px, 20vw, 108px); line-height: 1; }
.rec-letter .lp-lower { font-size: clamp(48px, 15vw, 84px); line-height: 1; }
.rec-word { font: 700 20px var(--font-ui); color: var(--muted); align-self: center; margin-left: 10px; }
.rec-status { margin: 0; font-weight: 700; color: var(--muted); min-height: 24px; display: flex; align-items: center; gap: 8px; justify-content: center; }
.rec-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--danger); display: inline-block; animation: rec-pulse 1s ease-in-out infinite; }
@keyframes rec-pulse { 50% { transform: scale(1.5); opacity: 0.5; } }
.row-actions { flex-direction: row; flex-wrap: wrap; justify-content: center; }
.rec-grid .rec-tile { position: relative; }
.rec-tile.has::after { content: '✓'; position: absolute; top: 4px; right: 6px; font: 800 14px var(--font-ui); color: var(--green-d); }
.rec-tile.current { outline: 4px solid var(--sun); outline-offset: -4px; }
.rec-tile:not(.has) { opacity: 0.55; }
.rec-tile.current:not(.has) { opacity: 1; }
label.btn input[type="file"] { display: none; }

/* ---------- Sophie's handwriting (fonts/handwriting.woff2 or .ttf, see fonts/README.md) ---------- */

body.handwriting h1, body.handwriting .topbar h2, body.handwriting .col-hero h3, body.handwriting .book-end h2,
body.handwriting .stamp-title, body.handwriting .cap, body.handwriting .earned { font-family: 'Handwriting', var(--font-ui); }
body.handwriting.hand-read .reader-text, body.handwriting.hand-read .rhyme-line, body.handwriting.hand-read .flash-word, body.handwriting.hand-read #word,
body.handwriting.hand-read .bubble, body.handwriting.hand-read .choice.word, body.handwriting.hand-read .tile,
body.handwriting.hand-read .slot, body.handwriting.hand-read .lbl { font-family: 'Handwriting', var(--font-read); }

/* ---------- sentences recorded in Word Cards ---------- */
.card-rec { display: grid; gap: 8px; justify-items: center; margin-top: 14px; width: 100%; }
.card-rec .rec-status { font-size: 16px; }
.card-rec-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.sent-list { display: grid; gap: 10px; }
.sent-row { display: flex; align-items: center; gap: 12px; background: var(--card); border-radius: var(--radius); padding: 10px 14px; box-shadow: var(--shadow-soft); }
.sent-word { font: 700 24px var(--font-read); flex: 1; }
.sent-date { color: var(--muted); font-weight: 700; font-size: 13px; }

/* ---------- trophies ---------- */
.trophy-hint { margin-top: 6px; }
.trophy-veil { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; background: rgba(46, 42, 71, 0.45); backdrop-filter: blur(3px); }
.trophy-veil[hidden] { display: none; }
/* Feedback for grown-ups: a small round bug button in the bottom right corner of every screen. It opens
   on a press and hold (js/hold.js); a tap only shows the hint above it, so there is little in it for a child. */
.report-tab { position: fixed; right: max(6px, env(safe-area-inset-right)); bottom: max(6px, env(safe-area-inset-bottom)); z-index: 50;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--card); box-shadow: var(--shadow-soft);
  font-size: 21px; line-height: 44px; text-align: center; cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.report-tab { color: #77737F; } /* a plain grey line drawing of a bug, like Eyewire II's toolbar icons: nothing in it to tempt a child */
.report-tab svg { display: block; margin: 11px auto; }
.report-tab.holding { background: #2E2A47; color: #fff; transition: background-color 1s linear, color 1s linear; }
.report-tab[hidden] { display: none; }
.report-tab::before { content: attr(data-hint); position: absolute; right: 0; bottom: calc(100% + 8px); white-space: nowrap; padding: 6px 10px; border-radius: 10px;
  background: var(--ink); color: #fff; font: 700 13px/1.2 var(--font-ui); opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.report-tab.hinting::before { opacity: 1; }
/* Mute: a small round 🔊 in the bottom left corner of every screen (🔇 while muted); the play clock sits beside it */
.mute-btn { position: fixed; left: max(6px, env(safe-area-inset-left)); bottom: max(6px, env(safe-area-inset-bottom)); z-index: 50;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--card); box-shadow: var(--shadow-soft);
  font-size: 28px; line-height: 44px; text-align: center; cursor: pointer; touch-action: manipulation; }
.mute-btn.on { background: var(--card); opacity: 0.8; } /* muted looks quiet, not like a button begging to be pressed */
.mute-btn[hidden] { display: none; }
.mute-btn:active { transform: scale(0.94); }
/* The box it opens over the screen: a back arrow at the top left of every step */
.report-head { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; width: 100%; }
.report-box .report-head h2 { margin: 0; font-size: 22px; line-height: 1.15; }
.account-step .age-year { width: 7.5em; padding: 12px 14px; border: 2px solid var(--line); border-radius: 14px; font: 800 24px/1 var(--font-ui); text-align: center; letter-spacing: 0.12em; color: var(--ink); background: var(--card); }
.report-box .fb-info { margin: 2px 0 6px; padding: 10px 12px; border-radius: 12px; background: #F2FAF7; color: var(--muted); font-size: 14px; line-height: 1.4; }
.report-box .fb-q { margin: 6px 0 2px; font: 800 26px/1.2 var(--font-ui); text-align: center; }
.report-box .opts.fb-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.report-back.icon-btn { width: 44px; height: 44px; color: var(--ink); }
.fb-choices { display: grid; gap: 10px; width: 100%; }
.fb-choice { display: flex; align-items: center; justify-content: flex-start; gap: 12px; font-size: 19px; padding: 14px 18px; width: 100%; text-align: left; }
.fb-choice span { font-size: 26px; }
.trophy-box.report-box { border-color: var(--line); box-shadow: 0 10px 0 var(--tile-shadow), 0 24px 60px rgba(46, 42, 71, 0.35); text-align: left; justify-items: stretch; max-height: calc(100vh - 40px); overflow-y: auto; }
.report-box h2 { font-size: 24px; text-align: center; }
.report-box .opts { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.report-box textarea, .report-box input[type="email"] { width: 100%; box-sizing: border-box; }
.report-box .fb-shot { width: 100%; max-height: 220px; object-fit: contain; border: 2px solid var(--line); border-radius: 12px; background: var(--bg); }
.report-box .row { justify-content: center; }
.trophy-box { background: var(--card); border-radius: 28px; padding: 22px 22px 24px; width: min(100%, 380px); text-align: center; display: grid; gap: 8px; justify-items: center; box-shadow: 0 10px 0 var(--sun-d), 0 24px 60px rgba(46, 42, 71, 0.35); border: 4px solid var(--sun); }
.trophy-cup { font-size: 96px; line-height: 1; animation: trophy-shine 1.6s ease-in-out infinite; }
@keyframes trophy-shine { 0%, 100% { transform: scale(1) rotate(-4deg); } 50% { transform: scale(1.12) rotate(4deg); } }
.trophy-emoji { font-size: 40px; line-height: 1; margin-top: -10px; }
.trophy-box h2 { margin: 0; font-size: 30px; font-weight: 800; }
.trophy-how { margin: 0; color: var(--muted); font-weight: 700; }
.trophy-box .earned { margin: 0; font-size: 24px; font-weight: 800; color: var(--accent-d); }
.trophy-panel h3 small { color: var(--muted); font-size: 14px; margin-left: 6px; }
.trophy-shelf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.trophy-tile { display: grid; justify-items: center; gap: 2px; text-align: center; padding: 10px 6px; border-radius: 16px; background: #F3EEFB; color: var(--muted); }
.trophy-tile.won { background: linear-gradient(135deg, #FFF6D6, #FFFFFF); color: var(--ink); box-shadow: 0 3px 0 var(--sun-d); }
.tt-emoji { font-size: 30px; line-height: 1; }
.tt-name { font-size: 13px; font-weight: 800; line-height: 1.2; }
.tt-how { font-size: 11px; font-weight: 700; color: var(--muted); line-height: 1.2; }

/* ---------- Math Mountain ---------- */
.mountain { display: grid; gap: 18px; width: 100%; }
.camp { background: color-mix(in srgb, var(--c) 9%, white); border-radius: var(--radius); padding: 14px 14px 12px; box-shadow: var(--shadow-soft); }
.camp > h3 { margin: 0; font-size: 21px; font-weight: 800; color: var(--ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.camp-no { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: #fff; background: var(--c-d); border-radius: 999px; padding: 4px 9px; }
.camp > .hint { margin: 4px 0 10px; }
.camp .coming { margin: 10px 2px 0; font-size: 14px; }
.level-card .tag { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: #fff; background: var(--sun-d); border-radius: 999px; padding: 2px 8px; vertical-align: middle; margin-left: 4px; }
.level-card .after { color: var(--muted); font-size: 14px; }
.level-card.climbed .badge { background: #E8FBEA; }
.level-card.next-up { outline: 3px solid var(--sun); outline-offset: 2px; }
.unit { display: grid; gap: 12px; width: 100%; justify-items: center; }
.unit-camp { margin: 0; font-size: 14px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; text-align: center; }
.unit-intro { margin: 0; font: 400 clamp(18px, 4.8vw, 21px)/1.45 var(--font-read); color: var(--ink); text-align: center; max-width: 560px; }
.formula { display: inline-block; font: 700 clamp(22px, 6vw, 28px)/1.2 var(--font-read); color: var(--grape-d); background: var(--card); padding: 8px 20px; border-radius: 999px; box-shadow: var(--shadow-soft); }
.unit-demo { width: 100%; max-width: 560px; background: var(--card); border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow-soft); display: grid; gap: 10px; box-sizing: border-box; }
.unit-demo .mv, .tk-viz .mv { border-radius: 14px; }
.mv-note { margin: 0; font: 400 16px/1.4 var(--font-read); color: var(--muted); text-align: center; }
.mv-slider { display: grid; grid-template-columns: minmax(70px, auto) minmax(60px, 1fr) 58px; align-items: center; gap: 10px; font: 700 16px/1.4 var(--font-ui); color: var(--ink); }
.mv-slider input[type="range"] { width: 100%; height: 36px; margin: 0; accent-color: var(--grape); }
.mv-slider-value { text-align: right; font-family: var(--font-read); color: var(--grape-d); font-weight: 700; }
.mv-buttons { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.mv-buttons .btn.on { background: var(--grape); color: #fff; box-shadow: 0 4px 0 var(--grape-d); }
.mv-readout { font: 700 clamp(17px, 4.6vw, 20px)/1.35 var(--font-read); text-align: center; color: var(--ink); }
.mv-readout b { color: var(--grape-d); }
.mv-readout small { color: var(--ink); font-size: 0.875rem; line-height: 1.4; font-weight: 700; }
.unit-demo .mv-readout:not(.experiment-results) { padding: 12px; border: 2px solid #dacbea; border-radius: 14px; background: #faf6ff; line-height: 1.5; }
.unit-demo .mv-readout:not(.experiment-results)::before { content: 'Picture & numbers'; display: block; font: 700 14px/1.4 var(--font-ui); margin-bottom: 8px; color: #563476; }
.chance-experiment { display: grid; gap: 10px; min-width: 0; }
.chance-wheel { max-width: 260px; margin: 0 auto; }
.chance-rule { margin: 0; text-align: center; font: 400 16px/1.5 var(--font-read); }
.chance-rule b { display: block; font-size: 24px; color: #654086; }
.experiment-status { margin: 0; padding: 12px; border: 2px solid #b997d5; border-radius: 14px; background: #f7f0ff; color: #302943; font: 700 18px/1.4 var(--font-read); text-align: center; }
.experiment-status[data-state='complete'] { background: #eaf7ef; border-color: #247953; }
.experiment-status[data-state='running'] { background: #fff2c2; border-color: #956c12; }
.experiment-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.experiment-metrics > div { padding: 10px; background: #f6f1fb; border: 1px solid #ded2e9; border-radius: 12px; }
.experiment-metrics span { display: block; font: 700 14px/1.4 var(--font-ui); }
.experiment-metrics strong { display: block; font: 700 26px/1.4 var(--font-read); color: #563476; }
.experiment-caption { font: 400 14px/1.5 var(--font-read); margin: 8px 0 0; }
.chance-experiment .mv-buttons .btn { font-size: 16px; min-height: 44px; }
.chance-experiment .mv-buttons .primary { background: #654086; color: white; box-shadow: 0 4px 0 #cbb7e5; }
.experiment-result-group { display: grid; gap: 10px; }
.mv-note { color: var(--ink); }
.mv-law { display: grid; gap: 2px; text-align: left; padding: 6px 12px; margin: 4px 0; border-radius: 12px; font: 400 15px/1.35 var(--font-read); color: var(--muted); border: 1.5px solid transparent; }
.mv-law b { font-family: var(--font-read); color: var(--ink); }
.mv-law.lit { background: rgba(255, 221, 112, 0.28); border-color: var(--sun, #ffd166); color: var(--ink); }
.camp-story { font-size: 1rem; line-height: 1.5; margin: 12px 0; color: var(--ink); }
.camp-story summary { cursor: pointer; padding: 12px 0; font-weight: 700; }
#screen-mountain .hint, #screen-unit .hint, #screen-unit .unit-camp { color: #51465e; }
.camp-progress-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.camp-progress-list article { padding: 16px; background: #f5f0fc; border-radius: 16px; }
.camp-progress-list h4 { font-size: 1.125rem; margin: 0 0 8px; }
.camp-progress-list p { font-size: 1rem; line-height: 1.5; margin: 8px 0; color: var(--ink); }
.camp-progress-list progress { width: 100%; height: 20px; accent-color: #7040aa; }
.mountain-dialog { width: min(640px, calc(100% - 32px)); max-height: calc(100dvh - 32px); box-sizing: border-box; overflow-y: auto; padding: 24px; border: 2px solid #7040aa; border-radius: 24px; color: var(--ink); background: #fffaf2; font: 400 1rem/1.5 var(--font-ui); }
.mountain-dialog::backdrop { background: rgb(35 25 55 / 55%); }
.mountain-dialog h2, .mountain-dialog h3 { font-size: clamp(1.375rem, 4vw, 1.75rem); line-height: 1.35; }
.mountain-dialog p, .mountain-dialog select { font-size: 1rem; line-height: 1.5; }
.mountain-dialog select { width: 100%; min-height: 48px; margin: 12px 0; }
.mountain-dialog .btn { margin: 8px 8px 8px 0; font-size: 1rem; }
.mountain-certificate { padding: 20px; border: 3px solid #7040aa; text-align: center; background: white; }
.certificate-symbol { font-size: 2.5rem !important; }
.mountain-certificate.summit { border-color: #c04b35; }
.summit-camps { font-size: 0.9rem !important; line-height: 1.6 !important; }
.summit-guides { font-size: 1.6rem !important; letter-spacing: 4px; }
.narration-list article { padding: 12px 0; border-bottom: 1px solid #c6b5dd; }
@media print {
  body:has(.printing-certificate) > :not(.printing-certificate) { display: none !important; }
  .mountain-dialog.printing-certificate { position: static; width: 100%; max-height: none; border: 0; overflow: visible; }
  .printing-certificate > h2, .printing-certificate button { display: none !important; }
}
@media (max-width: 420px) {
  .mv-slider { grid-template-columns: minmax(0, 1fr) 58px; }
  .mv-slider-name { grid-column: 1 / -1; }
}
.mv-handle:focus { outline: none; }
.mv-handle:focus-visible circle:last-of-type { stroke: var(--sun); }
.tk-prompt { font-size: clamp(19px, 5.2vw, 25px); line-height: 1.3; }
.tk-viz { width: 100%; max-width: 560px; background: var(--card); border-radius: var(--radius); padding: 8px; box-shadow: var(--shadow-soft); display: grid; gap: 8px; box-sizing: border-box; }
.tk-viz[hidden] { display: none; }
.tk-answer { width: 100%; max-width: 560px; }
.choices.tk-choices { grid-template-columns: 1fr; gap: 10px; }
.tk-choices .choice.word { aspect-ratio: auto; min-height: 0; padding: 12px 16px; font-size: clamp(19px, 5vw, 26px); line-height: 1.25; }
.tk-num { display: flex; gap: 10px; width: 100%; }
.tk-num input { flex: 1; min-width: 0; font: 700 clamp(22px, 6.5vw, 30px)/1.2 var(--font-read); color: var(--ink); padding: 8px 14px; border-radius: 16px; border: 3px solid var(--line); background: var(--card); text-align: center; outline: none; }
.tk-num input:focus { border-color: var(--grape); }
.tk-num input.right { border-color: var(--green-d); background: #E8FBEA; }
.tk-num input.shake { animation: shake 0.4s; }
.tk-unit { margin: 4px 0 0; text-align: center; }
.tk-actions { display: flex; justify-content: center; }
.tk-result { width: 100%; max-width: 560px; display: grid; gap: 10px; justify-items: center; }
.tk-result[hidden] { display: none; }
.tk-result.show { animation: tk-in 0.35s ease-out; }
@keyframes tk-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tk-explain { margin: 0; font: 400 clamp(16px, 4.4vw, 19px)/1.4 var(--font-read); color: var(--ink); background: #E8FBEA; border-radius: 16px; padding: 10px 14px; width: 100%; box-sizing: border-box; text-align: center; }
.tk-hint { margin: 0; font: 400 clamp(16px, 4.4vw, 19px)/1.4 var(--font-read); color: var(--ink); background: #FFF8DF; border-radius: 16px; padding: 10px 14px; width: 100%; box-sizing: border-box; text-align: center; }
.climb-line { font-weight: 800; color: var(--teal-d); }
.tk-method { background: #EEF6FF; }
.tk-num input.revealed { border-color: var(--sky-d); background: #EEF6FF; }
.tk-worked { background: #EEF6FF; }
.coach-note { background: var(--card); border-radius: 16px; padding: 8px 14px; box-shadow: var(--shadow-soft); display: grid; gap: 2px; text-align: left; }
.coach-note p { margin: 0; font: 400 16px/1.4 var(--font-read); color: var(--ink); }
.coach-last { margin: 0; font: 400 16px/1.4 var(--font-read); color: var(--ink); text-align: center; }

/* Gold medal: a perfect round on a level */
.medal-reveal { display: inline-flex; align-items: center; gap: 12px; margin: 4px auto 8px; padding: 10px 18px 10px 10px; border-radius: 999px; background: color-mix(in srgb, var(--sun) 22%, white); border: 3px solid var(--sun-d); color: var(--ink); text-align: left; }
.medal-reveal.fresh { animation: stamp-in 0.7s cubic-bezier(0.2, 1.4, 0.4, 1); transform: rotate(-2deg); }
.medal-reveal .medal-ico { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 32px; background: #fff; border: 3px double var(--sun-d); flex: none; }
.medal-reveal b { display: block; font-size: 20px; }
.medal-reveal small { display: block; font-size: 13px; font-weight: 700; color: var(--muted); }
#cele-next-btn small, .book-end .btn small, #q-result .btn small { display: block; font-size: 12px; font-weight: 700; opacity: 0.9; }
.practice-card p { margin: 8px 0; line-height: 1.9; }
.practice-card .tag { display: inline-block; font-size: 14px; font-weight: 700; padding: 1px 9px; border-radius: 999px; background: #F3EFFF; color: var(--ink); margin: 0 2px; }

/* Lightning mode (Add Up and Take Away): numbers only, then the blocks fly in, combine and burst into the answer */
.blocks.zap { min-height: 170px; align-items: center; }
@keyframes fly-in { 0% { opacity: 0; transform: translateY(-120px) scale(0.6) rotate(-12deg); } 70% { opacity: 1; transform: translateY(8px) scale(1.04); } 100% { opacity: 1; transform: none; } }
.towers.fly-in .col, .towers.fly-in .join, .towers.fly-in .group { animation: fly-in 0.5s cubic-bezier(0.2, 1.3, 0.4, 1) both; }
.towers.fly-in .group.right, .towers.fly-in > .col:nth-child(2) { animation-delay: 0.12s; }
.towers.fly-in .join, .towers.fly-in > .col:nth-child(3) { animation-delay: 0.06s; }
.towers.morph { animation: morph-out 0.55s ease-in forwards; }
@keyframes morph-out { 0% { transform: none; filter: none; opacity: 1; } 60% { transform: scale(0.75) rotate(4deg); filter: blur(1px) brightness(1.6); opacity: 0.9; } 100% { transform: scale(0.15); filter: blur(6px) brightness(2.4); opacity: 0; } }
.num-burst { position: absolute; inset: -20px 0; display: grid; place-items: center; pointer-events: none; z-index: 5; }
.num-burst .burst-rays, .num-burst .burst-img { grid-area: 1 / 1; width: 220px; height: 220px; border-radius: 50%; animation: burst-in 0.6s 0.2s cubic-bezier(0.2, 1.4, 0.4, 1) both, burst-spin 6s linear infinite; }
.num-burst .burst-rays { background: radial-gradient(circle, #FFFBEA 0 30%, transparent 62%), repeating-conic-gradient(from 0deg, rgba(255, 201, 60, 0.85) 0 10deg, rgba(19, 163, 145, 0) 10deg 22.5deg); -webkit-mask: radial-gradient(circle, #000 55%, transparent 71%); mask: radial-gradient(circle, #000 55%, transparent 71%); }
.num-burst .burst-img { object-fit: contain; border-radius: 0; }
.num-burst .burst-img + .burst-rays { display: none; }
.num-burst .burst-num { grid-area: 1 / 1; font: 900 92px/1 var(--font-ui); color: var(--grape-d); -webkit-text-stroke: 4px #fff; paint-order: stroke fill; text-shadow: 0 6px 0 rgba(46, 42, 71, 0.15); animation: num-pop 0.65s 0.3s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.num-burst .spark { grid-area: 1 / 1; font-style: normal; font-size: 26px; color: var(--sun-d); opacity: 0; animation: spark-out 0.9s 0.35s ease-out both; }
.num-burst .s1 { --dx: -110px; --dy: -60px; } .num-burst .s2 { --dx: 105px; --dy: -70px; font-size: 32px; }
.num-burst .s3 { --dx: -95px; --dy: 60px; } .num-burst .s4 { --dx: 100px; --dy: 55px; } .num-burst .s5 { --dx: 0; --dy: -105px; }
@keyframes burst-in { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes burst-spin { to { rotate: 360deg; } }
@keyframes num-pop { 0% { transform: scale(0) rotate(-20deg); } 70% { transform: scale(1.25) rotate(4deg); } 100% { transform: scale(1); } }
@keyframes spark-out { 0% { opacity: 0; transform: translate(0, 0) scale(0.4); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.2) rotate(90deg); } }
.zap-reveal { background: color-mix(in srgb, var(--sun) 30%, white); }
.zap-reveal .medal-ico img { width: 44px; height: 44px; object-fit: contain; }
.zap-reveal .medal-ico img + em { display: none; }
.zap-reveal .medal-ico em { font-style: normal; }
.zap-left { font-size: 15px; }
.blocks.bursting .taken { opacity: 0; transition: opacity 0.3s; }
@media (prefers-reduced-motion: reduce) { .towers.fly-in .col, .towers.morph, .num-burst * { animation-duration: 0.01s !important; animation-iteration-count: 1 !important; } }

/* Ten Drop (js/tendrop.js): a well ten blocks wide, rows falling, number keys below */
.tendrop { position: relative; width: 100%; display: grid; justify-items: center; padding: 0 12px 24px; }
.td-wrap { --cell: min(34px, 8.6vw, calc((100svh - 330px) / 12)); display: grid; justify-items: center; gap: 8px; width: 100%; }
.td-hud { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; font: 700 14px var(--font-ui); color: var(--muted); }
.td-hud b { color: var(--ink); font-size: 17px; }
.td-well { position: relative; width: calc(var(--cell) * var(--cols, 10)); height: calc(var(--cell) * var(--rows, 12)); border-radius: 14px; overflow: hidden; background-color: #FBF8FF; background-image: linear-gradient(90deg, rgba(110, 90, 170, 0.08) 1px, transparent 1px), linear-gradient(rgba(110, 90, 170, 0.08) 1px, transparent 1px); background-size: var(--cell) var(--cell); box-shadow: inset 0 0 0 3px #E3DCF5, var(--shadow-soft); touch-action: manipulation; }
.td-row { position: absolute; left: 0; top: 0; width: 100%; height: var(--cell); will-change: transform; }
.td-row > span { position: absolute; top: 0; height: 100%; box-sizing: border-box; }
.td-blk { background: var(--c); border-radius: 5px; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.14), inset 0 0 0 1.5px rgba(255, 255, 255, 0.5); }
.td-hole { border: 2px dashed rgba(110, 90, 170, 0.35); border-radius: 5px; transform: scale(0.86); }
.td-bar { background: var(--c); border-radius: 8px; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.14); display: grid; place-items: center; }
.td-bar b, .td-gap b, .td-fill b { font: 900 calc(var(--cell) * 0.55)/1 var(--font-ui); color: var(--ink); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7); }
.td-gap { border: 2.5px dashed rgba(110, 90, 170, 0.45); border-radius: 8px; display: grid; place-items: center; }
.td-gap b { color: var(--grape-d); opacity: 0.7; }
.td-row.falling { filter: drop-shadow(0 4px 6px rgba(46, 42, 71, 0.18)); }
.td-row.landed { opacity: 0.85; }
.td-needed { right: 4px; display: grid; place-items: center; padding: 0 6px; font: 800 calc(var(--cell) * 0.34)/1 var(--font-ui); color: var(--danger-d); background: rgba(255, 255, 255, 0.85); border-radius: 6px; margin: 4px 0; height: calc(100% - 8px) !important; animation: pop 0.4s; }
.td-fill { background: linear-gradient(180deg, #FFE27A, #FFC93C); border-radius: 8px; display: grid; place-items: center; animation: td-shoot 0.22s ease-out both; box-shadow: inset 0 -4px 0 rgba(224, 170, 26, 0.6); z-index: 2; }
.td-fill.bad { background: #FFB4AE; box-shadow: inset 0 -4px 0 rgba(217, 83, 79, 0.45); animation: td-shoot 0.18s ease-out both, td-bounce 0.42s 0.18s ease-in both; }
@keyframes td-shoot { from { transform: translateX(calc(var(--cell) * 12)); } to { transform: none; } }
@keyframes td-bounce { 0% { transform: none; opacity: 1; } 30% { transform: translateX(-6px); } 100% { transform: translateX(calc(var(--cell) * 12)); opacity: 0; } }
.td-row.clear { animation: td-clear 0.42s ease-in forwards; }
@keyframes td-clear { 0% { filter: brightness(1); } 35% { filter: brightness(1.8) saturate(1.4); transform: var(--t, none); } 100% { opacity: 0; filter: brightness(2.2); } }
.td-pop { left: 50%; top: -60% !important; height: auto !important; transform: translateX(-50%); font: 900 calc(var(--cell) * 0.8)/1 var(--font-ui); color: var(--grape-d); -webkit-text-stroke: 3px #fff; paint-order: stroke fill; animation: td-pop 0.65s ease-out both; z-index: 3; }
@keyframes td-pop { 0% { opacity: 0; translate: 0 10px; scale: 0.4; } 30% { opacity: 1; scale: 1.2; } 100% { opacity: 0; translate: 0 -30px; scale: 1; } }
.td-row.blast { animation: td-blast 0.5s ease-in forwards; }
@keyframes td-blast { 0% { opacity: 1; } 40% { filter: brightness(2.5); } 100% { opacity: 0; filter: blur(4px) brightness(3); } }
.td-msg { min-height: 1.4em; margin: 0; font: 800 17px var(--font-ui); color: var(--grape-d); }
.td-keys { display: grid; grid-template-columns: repeat(9, 1fr); gap: 5px; width: min(100%, 460px); }
.td-key { border: 0; border-radius: 12px; background: var(--card); box-shadow: 0 4px 0 #DCD3F0; font: 900 clamp(17px, 5vw, 24px)/1 var(--font-ui); color: var(--ink); padding: 12px 0; cursor: pointer; touch-action: manipulation; }
.td-hundred .td-key { font-size: clamp(14px, 4vw, 20px); }
.td-key:active { transform: translateY(3px); box-shadow: 0 1px 0 #DCD3F0; }
.td-key.right { animation: td-key-right 0.4s; }
.td-key.wrong { animation: shake 0.4s; }
@keyframes td-key-right { 50% { background: #C7F0CF; transform: scale(1.08); } }
.td-wrap.over .td-well { filter: saturate(0.5) brightness(0.95); }
.td-over { position: absolute; inset: 0; display: grid; place-items: start center; padding-top: 40px; background: rgba(246, 252, 250, 0.6); backdrop-filter: blur(2px); z-index: 10; }
.td-over-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-soft); padding: 18px 20px; width: min(92%, 420px); text-align: center; display: grid; gap: 6px; justify-items: center; animation: pop 0.45s; }
.td-over-card h2 { margin: 0; font: 900 28px/1.1 var(--font-ui); }
.td-over-card .actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.td-over-card .btn small { display: block; font-size: 12px; font-weight: 700; opacity: 0.9; }
@media (prefers-reduced-motion: reduce) { .td-fill, .td-row.clear, .td-row.blast, .td-pop { animation-duration: 0.01s !important; } }
.td-over-card .big-emoji { font-size: 56px; line-height: 1; }

.circle-lab { display: grid; gap: 16px; min-width: 0; }
.circle-lab h3 { margin: 0; font-size: clamp(1.2rem, 4vw, 1.5rem); line-height: 1.4; text-align: center; }
.circle-controls { display: grid; gap: 16px; }
.circle-tabs .btn { font-size: 1rem; padding: 12px; flex: 1 1 110px; }
.circle-tabs [aria-pressed="true"] { background: #e6dafb; color: #382554; box-shadow: 0 3px 0 #8864b4; }
.circle-controls [hidden] { display: none; }
.mv-flow { list-style: none; padding: 0; margin: 12px 0; display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,140px),1fr)); gap: 12px; }
.mv-flow li { min-width: 0; border: 2px solid; border-top-width: 6px; border-radius: 14px; padding: 12px; background: #fff; display: grid; align-content: start; gap: 8px; text-align: center; color: #2e2a47; }
.mv-flow-label, .mv-flow-why { font-size: .875rem; line-height: 1.5; }
.mv-flow strong { font-size: 1.125rem; line-height: 1.4; overflow-wrap: anywhere; }
@media(max-width:420px) { .mv-flow { grid-template-columns: 1fr; } .mv-flow li { grid-template-columns: 1fr 1fr; text-align: left; } .mv-flow-why { grid-column: 1 / -1; } }

.unit-discovery { max-width: 48rem; margin: 1.2rem auto; padding: 1rem 1.25rem; border: 2px solid #d9c8ee; border-radius: 1.2rem; background: #faf5ff; color: #302946; text-align: left; font-size: 1rem; line-height: 1.5; }
.unit-discovery strong { font-size: 1.125rem; }
.unit-discovery p { margin: .4rem 0 0; }
/* Trail notes (js/track/notes.js): the guide's bridge, where you meet the idea, and the next unit */
.trail-guide { display: flex; gap: 12px; align-items: flex-start; width: 100%; max-width: 560px; background: var(--card); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow-soft); box-sizing: border-box; text-align: left; }
.trail-face { font-size: 40px; line-height: 1; flex: none; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--sun) 28%, white); }
.trail-guide b { font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--grape-d); }
.trail-guide p { margin: 4px 0 0; font: 400 17px/1.45 var(--font-read); color: var(--ink); }
.trail-world { width: 100%; max-width: 560px; display: grid; gap: 8px; }
.trail-h { margin: 0; font-size: 18px; font-weight: 800; text-align: left; }
.trail-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.trail-card { background: var(--card); border-radius: 18px; padding: 12px; box-shadow: var(--shadow-soft); display: grid; gap: 4px; justify-items: start; text-align: left; min-width: 0; }
.trail-emoji { font-size: 34px; line-height: 1; }
.trail-card b { font-size: 15px; }
.trail-card p { margin: 0; font-size: 14px; line-height: 1.4; color: var(--ink); }
.trail-next { max-width: 560px; margin: 0; padding: 10px 14px; border-radius: 999px; background: color-mix(in srgb, var(--teal) 16%, white); font-size: 15px; text-align: center; }
.camp-guide { font-weight: 700; color: var(--grape-d); margin: 0 0 6px; }
.mv-slider[hidden] { display: none; }
.td-w5 { --cell: min(60px, 15vw, calc((100svh - 330px) / 10)); }
.td-w5 .td-keys { grid-template-columns: repeat(4, 1fr); width: min(100%, 340px); gap: 8px; }
.td-w5 .td-key { font-size: clamp(22px, 7vw, 30px); padding: 16px 0; }
.td-levelup { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 4px; z-index: 6; pointer-events: none; background: radial-gradient(circle, rgba(255, 255, 255, 0.85) 0 40%, transparent 72%); animation: td-level 1.5s ease-out both; }
.td-levelup b { font: 900 calc(var(--cell) * 1.25)/1 var(--font-ui); color: var(--grape-d); -webkit-text-stroke: 4px #fff; paint-order: stroke fill; }
.td-levelup small { font: 800 14px var(--font-ui); color: var(--ink); }
@keyframes td-level { 0% { opacity: 0; transform: scale(0.4) rotate(-8deg); } 20% { opacity: 1; transform: scale(1.12) rotate(2deg); } 35% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-20px); } }
.td-reached { margin: 0; font: 800 16px var(--font-ui); color: var(--grape-d); }
/* Ten Drop worlds: the well changes colour every five levels (td-world-N on .td-wrap). */
.td-hud i { font-style: normal; }
.td-world-1 .td-well { background-color: #F6FBF0; }
.td-world-2 .td-well { background-color: #E6F5FF; box-shadow: inset 0 0 0 3px #B9E1FA, var(--shadow-soft); }
.td-world-3 .td-well { background-color: #E5F7F2; box-shadow: inset 0 0 0 3px #9FDCCD, var(--shadow-soft); }
.td-world-4 .td-well {
  background-color: #2B2F66;
  background-image: radial-gradient(circle at 20% 30%, #fff 0 1px, transparent 2px), radial-gradient(circle at 70% 15%, #fff 0 1px, transparent 2px), radial-gradient(circle at 45% 70%, #fff 0 1px, transparent 2px), radial-gradient(circle at 85% 60%, #fff 0 1px, transparent 2px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px), linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, var(--cell) var(--cell), var(--cell) var(--cell);
  box-shadow: inset 0 0 0 3px #8F8AE0, var(--shadow-soft);
}
.td-world-4 .td-msg { color: var(--ink); }
.td-world-5 .td-well { background-color: #FFE9F4; box-shadow: inset 0 0 0 3px #FFB8DA, var(--shadow-soft); }
.td-world-6 .td-well { background-color: #F4FBFF; box-shadow: inset 0 0 0 3px #FF9EC7, 0 0 0 3px #FFD54A, 0 0 0 6px #7CCBF5, var(--shadow-soft); }
.td-world-7 .td-well { background-color: #FFF4CF; box-shadow: inset 0 0 0 3px #F2C14E, 0 0 18px rgba(242, 193, 78, 0.6), var(--shadow-soft); }
.td-levelup.world small { font-size: 16px; color: var(--grape-d); }
/* A gold star row: filled first time, it brings a bonus star. */
.td-row.star > .td-bar, .td-row.star > .td-blk { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.14), 0 0 0 2px #FFD54A, 0 0 10px rgba(255, 196, 40, 0.85); }
.td-row.star::before { content: '⭐'; position: absolute; left: -3px; top: -6px; z-index: 3; font-size: calc(var(--cell) * 0.5); line-height: 1; animation: twinkle 1.2s ease-in-out infinite; pointer-events: none; }
.td-starts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; }
.td-starts span { width: 100%; font-size: 13px; font-weight: 800; color: var(--muted); }
.td-pack-head { margin: 14px 0 0; font: 900 20px/1.2 var(--font-ui); color: var(--ink); }
.td-pack-head small { display: block; font: 700 14px var(--font-ui); color: var(--muted); }

/* ---------- arcade games (js/arcade/<id>.js, each with css/arcade/<id>.css), hosted by game.js ---------- */

.arcade-stage { position: relative; min-height: calc(100vh - 130px); min-height: calc(100dvh - 130px); }
.arcade-how { margin: 0 0 4px; }
#arcade-title { line-height: 1.05; font-size: clamp(18px, 5.4vw, 24px); }
#arcade-title small { display: block; font: 800 15px/1.2 var(--font-ui); color: var(--muted); }
.ar-over .td-over-card .actions { justify-content: center; }

/* The Brainstorm Barn: games we might build next, with a heart from each player */
.barn-list { display: grid; gap: 12px; }
.barn-idea { display: flex; align-items: center; gap: 12px; background: var(--card); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow-soft); }
.barn-emoji { font-size: 40px; line-height: 1; flex: none; }
.barn-txt { flex: 1; min-width: 0; }
.barn-txt h3 { margin: 0; font: 900 20px/1.2 var(--font-ui); }
.barn-txt p { margin: 4px 0; font-size: 15px; }
.barn-txt small { font-weight: 800; color: var(--muted); }
.barn-fans { margin-top: 6px; display: flex; gap: 4px; font-size: 20px; }
.barn-heart { width: 52px; height: 52px; flex: none; border: 0; border-radius: 50%; background: #FFF0F5; font-size: 26px; line-height: 1; cursor: pointer; box-shadow: 0 3px 0 #F6C7D8; }
.barn-heart.on { background: #FFD6E5; animation: pop 0.4s; }

/* Application experiments remain readable on a phone. */
.trail-experiment { display: block; }
.trail-experiment summary { cursor: pointer; line-height: 1.5; }
.trail-experiment summary b { font-size: 1rem; }
.trail-experiment[open] { grid-column: 1 / -1; }
.trail-open { display: block; margin-top: .5rem; font-size: .875rem; font-weight: 700; color: var(--ink); }
.trail-lab { min-width: 0; }
.trail-lab:empty { display: none; }
.trail-lab h4 { font-size: 1.125rem; margin: 1rem 0 .5rem; }
.trail-lab p { font-size: 1rem; line-height: 1.5; margin: .75rem 0; }
.application-equation { overflow-wrap: anywhere; font-weight: 700; }
.application-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1rem 0; }
.application-actions button { min-height: 44px; font-size: 1rem; }
.application-baseline { border-top: 2px dashed var(--grape); margin-top: 1rem; }
.application-baseline img { display: block; width: 100%; height: auto; }

/* ---------- check words & pictures (#check) ---------- */
.chk-any { display: flex; gap: 8px; justify-content: center; margin: 10px auto; max-width: 420px; }
.chk-any input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 12px; border: 2px solid var(--tile-shadow, #ddd); font: 700 18px var(--font-read); }
.chk-copy { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; margin: 6px 0 14px; }
.chk-level h3 { margin: 18px 0 8px; }
.chk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.chk-word { background: var(--card); border-radius: 16px; box-shadow: var(--shadow-soft); padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.chk-word.flagged { box-shadow: 0 0 0 3px var(--coral, #F26B5B); }
.chk-word b { font: 700 22px var(--font-read); }
.chk-pic { font-size: 44px; line-height: 1.1; }
.chk-btns { display: flex; gap: 6px; }
.chk-btn { border: 0; background: #F1ECFF; border-radius: 10px; padding: 6px 8px; font-size: 18px; cursor: pointer; }
.chk-btn.on { background: #FFD9D3; box-shadow: inset 0 0 0 2px var(--coral, #F26B5B); }
/* Dashboard: the Maths heading above its own row of tiles */
.dash-h { margin: 18px 4px 8px; font-size: 19px; font-weight: 800; color: var(--grape-d); }
/* Dashboard: a game's name in the scores table opens it */
.report .dash-go { padding: 0; font-size: inherit; text-align: left; color: var(--accent-d); font-weight: 800; text-decoration: none; }

/* A full sticker page: the party (#sheet-party), and the page's shine in the sticker book */
.party-box { width: min(100%, 420px); background: linear-gradient(180deg, #FFF8DC, #fff 45%); }
.party-ribbon { background: var(--grape); color: #fff; font-weight: 800; letter-spacing: 0.06em; font-size: 15px; padding: 6px 18px; border-radius: 999px; box-shadow: 0 4px 0 var(--grape-d); animation: pop 0.8s; }
.party-title { margin: 4px 0 2px; font-size: 24px; line-height: 1.15; }
.party-stickers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; width: 100%; margin: 6px 0; }
.party-st { position: relative; aspect-ratio: 1; display: grid; place-items: center; font-size: clamp(26px, 8vw, 38px);
  animation: party-in 0.5s calc(var(--i) * 0.08s) cubic-bezier(0.2, 1.5, 0.4, 1) both, party-dance 1.2s calc(1.8s + var(--i) * 0.06s) ease-in-out infinite; }
.party-st .st-img { position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; filter: var(--die-cut); }
.whole-book .party-box { border-color: var(--grape); box-shadow: 0 10px 0 var(--grape-d), 0 24px 60px rgba(46, 42, 71, 0.35); }
.whole-book .party-ribbon { background: var(--sun); color: var(--ink); box-shadow: 0 4px 0 var(--sun-d); }
@keyframes party-in { from { opacity: 0; transform: scale(0) rotate(-30deg); } to { opacity: 1; transform: none; } }
@keyframes party-dance { 0%, 100% { transform: none; } 25% { transform: translateY(-6px) rotate(-8deg); } 75% { transform: translateY(-2px) rotate(8deg); } }
.sheet.full:not(.folded) .stickers { padding: 12px; border-radius: 22px; background: linear-gradient(135deg, #FFF3C4, #FFE08A 50%, #FFF3C4); box-shadow: 0 0 0 3px var(--sun), 0 6px 0 var(--sun-d); }
.sheet-party-btn { border: 0; background: var(--sun); color: var(--ink); font: 800 15px var(--font-ui); padding: 6px 14px; border-radius: 999px; box-shadow: 0 3px 0 var(--sun-d); cursor: pointer; white-space: nowrap; }
.sheet-party-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--sun-d); }
/* Party! on a full page: the stickers leave their spots (hidden underneath) and dance a conga line round it */
.sheet.partying .stickers::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at 25% 30%, rgba(255, 120, 200, 0.55), transparent 40%), radial-gradient(circle at 75% 35%, rgba(120, 200, 255, 0.55), transparent 40%), radial-gradient(circle at 50% 80%, rgba(160, 255, 140, 0.5), transparent 45%);
  animation: disco 1.8s linear infinite; }
.sheet.partying .sticker:not(.locked) { visibility: hidden; }
.conga { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.conga-st { position: absolute; left: 0; top: 0; display: grid; place-items: center; font-size: clamp(30px, 9vw, 46px); line-height: 1; will-change: transform; }
.conga-st .st-img { position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; filter: var(--die-cut); }
.conga-ball { position: absolute; left: 50%; top: 50%; font-size: 64px; line-height: 1; transform: translate(-50%, -50%); animation: disco-ball 1.2s ease-in-out infinite; filter: drop-shadow(0 6px 10px rgba(46, 42, 71, 0.3)); }
@keyframes disco { 0% { filter: hue-rotate(0deg) saturate(1.3); } 100% { filter: hue-rotate(360deg) saturate(1.3); } }
@keyframes disco-ball { 0%, 100% { transform: translate(-50%, -50%) rotate(-12deg) scale(1); } 50% { transform: translate(-50%, -58%) rotate(12deg) scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .party-st, .party-ribbon, .sheet.partying .stickers::before, .conga-ball { animation: none !important; } }

/* Grown-ups: the plan up for review */
.review-panel > summary { cursor: pointer; list-style: none; display: grid; gap: 4px; }
.review-panel > summary::-webkit-details-marker { display: none; }
.review-panel > summary h3::after { content: ' ▸'; color: var(--muted); }
.review-panel[open] > summary h3::after { content: ' ▾'; }
.review-panel:not([open]) { gap: 0; }
.review-list { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-weight: 600; }

/* Word Monster: the answer buttons wait until the mouse moves (armAfterMove), so a double-click on Flip picks nothing */
.btn.arming { opacity: 0.55; transform: none; cursor: default; transition: opacity 0.2s; }

/* Sticker lightbox (#sticker-box): the sticker big, sparkles bursting out, ‹ › through her stickers */
.sticker-veil { background: rgba(46, 42, 71, 0.6); }
.sticker-big-wrap { position: relative; display: grid; justify-items: center; gap: 6px; width: min(100%, 420px); padding: 26px 22px 20px; border-radius: 32px; background: radial-gradient(circle at 50% 38%, #FFF7D6, #fff 62%); border: 4px solid var(--sun); box-shadow: 0 10px 0 var(--sun-d), 0 30px 70px rgba(46, 42, 71, 0.4); text-align: center; }
.sticker-big-wrap.zoom { animation: sticker-zoom 0.45s cubic-bezier(0.2, 1.4, 0.4, 1); }
.sticker-big { position: relative; width: min(70vw, 280px); aspect-ratio: 1; display: grid; place-items: center; border: 0; background: none; padding: 0; cursor: pointer; font-size: min(42vw, 170px); line-height: 1; animation: sticker-float 3s ease-in-out infinite; }
.sticker-big .st-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(46, 42, 71, 0.25)); }
.sticker-big.wiggle { animation: sticker-wiggle 0.6s ease-in-out; }
.sticker-big-wrap h2 { margin: 4px 0 0; font-size: 30px; color: var(--grape-d); }
.sticker-big-sheet { margin: 0; color: var(--muted); font-weight: 800; }
.sticker-close { position: absolute; top: 10px; right: 10px; z-index: 2; }
.sticker-nav { display: flex; gap: 14px; margin-top: 6px; }
.sticker-nav[hidden] { display: none; }
.sticker-nav .btn { min-width: 64px; font-size: 28px; padding: 6px 18px; }
.sticker-burst { position: absolute; left: 50%; top: 40%; width: 0; height: 0; pointer-events: none; }
.sticker-burst i { position: absolute; left: -14px; top: -14px; font-style: normal; font-size: 28px; opacity: 0; animation: spark-out 1.1s ease-out both; }
@keyframes sticker-zoom { from { transform: scale(0.3) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sticker-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
@keyframes sticker-wiggle { 0%, 100% { transform: none; } 20% { transform: rotate(-12deg) scale(1.08); } 40% { transform: rotate(10deg) scale(1.12); } 60% { transform: rotate(-6deg) scale(1.05); } 80% { transform: rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .sticker-big, .sticker-big-wrap.zoom, .sticker-big.wiggle { animation: none; } }
/* A finished book page: the Next arrow (or The end) glows gently until she taps it. */
#book-next.ready { animation: next-ready 1.4s ease-in-out 0.4s infinite; }
@keyframes next-ready { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 210, 74, 0); } 50% { box-shadow: 0 0 0 9px rgba(255, 210, 74, 0.5); } }
@media (prefers-reduced-motion: reduce) { #book-next.ready { animation: none; box-shadow: 0 0 0 4px rgba(255, 210, 74, 0.6); } }
/* The book's end screen ignores taps for a moment, so a double tap on The end does not open something. */
.book-end.settling { pointer-events: none; }
/* In a book the play clock moves up into the top bar's empty right-hand spot, clear of ◀ at the bottom. */
body:has(#screen-reader:not([hidden])) .play-clock { top: calc(max(12px, env(safe-area-inset-top)) + 10px); bottom: auto; left: auto; right: max(16px, calc((100vw - 720px) / 2 + 16px)); }
/* Little Books: the "Just right for …" shelf, picked from what the word games show she knows */
.books-suggest[hidden] { display: none; }
.books-tales { margin-top: 20px; }
.books-tales[hidden] { display: none; }
.shelf-title { margin: 4px 2px 2px; font-size: 20px; font-weight: 800; }
.shelf-why { margin: 0 2px 10px; text-align: left; }
.shelf-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.shelf-row .book-card { padding: 10px 7px 12px; gap: 4px; }
.shelf-row .book-title { font-size: 14px; line-height: 1.2; }
.shelf-row .book-meta, .shelf-row .book-read { font-size: 12px; }
.book-cover { position: relative; }
.book-fit { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); white-space: nowrap; padding: 3px 9px; border-radius: 999px; font: 800 12px/1.2 var(--font-ui); color: #fff; box-shadow: 0 2px 4px rgba(46, 42, 71, 0.2); }
.book-fit.fit-just { background: var(--teal); }
.book-fit.fit-stretch { background: var(--grape, #8E6CD8); }
/* A stamp's picture: the book's cover in a round window, ringed in the stamp's ink */
.stamp-cover { position: relative; width: 56%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; display: grid; place-items: center; box-shadow: 0 0 0 3px var(--c-d); margin-bottom: 4px; background: #fff; }
.stamp-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stamp-cover img + .stamp-emoji { display: none; }
.big-stamp .stamp-cover { width: 62%; }
/* Player pictures: the game's own sticker characters, sized like the emoji they replace */
.av-img { width: 1.25em; height: 1.25em; object-fit: contain; vertical-align: middle; display: inline-block; filter: drop-shadow(0 1px 1px rgba(46, 42, 71, 0.15)); }
.avatar-btn .av-img, .kid-avatar .av-img, .col-avatar .av-img { width: 1.3em; height: 1.3em; }
.avatar-pick { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; padding: 10px; margin: -4px 0 10px; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-soft); }
.avatar-choice { border: 0; background: #F6F2FF; border-radius: 16px; padding: 6px; font-size: 34px; line-height: 1; aspect-ratio: 1; display: grid; place-items: center; }
.avatar-choice.on { background: #D7F3EC; box-shadow: inset 0 0 0 3px var(--teal); }
.avatar-choice .av-img { width: 1.2em; height: 1.2em; }
/* "Who is playing?": right after signing up, or while a child has no name yet */
.panel.ask { box-shadow: 0 0 0 3px var(--sun), var(--shadow-soft); }
.player-name::placeholder { color: #B8B0CF; font-weight: 600; }
.family-name { justify-content: flex-start; gap: 12px; flex-wrap: wrap; }
/* Check words & pictures: each level's section can be marked done, which folds it up to its title */
.chk-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.chk-head h3 { margin: 0; flex: 1; }
.chk-level.done { opacity: 0.75; }
.chk-level.done .chk-head { margin-bottom: 0; padding: 10px 14px; background: #E8F7F1; border-radius: 16px; }
/* Math Mountain is still being built: a small tag by its progress line */
.early-tag { display: inline-block; padding: 2px 9px; border-radius: 999px; background: #FFF1B8; color: #8A6A00; font: 800 12px/1.4 var(--font-ui); letter-spacing: 0.02em; vertical-align: 1px; }
/* Dashboard: "What she is learning", skills in a parent's words */
.learning .sk-headline { font: 700 18px/1.45 var(--font-ui); margin: 4px 0 8px; }
.learning .sk-h { margin: 16px 0 6px; font-size: 16px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.skills { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sk { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; background: #F8F6FD; }
.sk-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sk-body small { color: var(--muted); font-weight: 600; }
.sk-what { font-weight: 500; color: var(--muted); }
.sk-pill { flex: none; min-width: 86px; text-align: center; padding: 3px 8px; border-radius: 999px; font: 800 12px/1.5 var(--font-ui); }
.sk-secure .sk-pill { background: #D7F3EC; color: #1F7A6B; }
.sk-practising .sk-pill { background: #FFF1B8; color: #8A6A00; }
.sk-new .sk-pill { background: #EEEAF6; color: #8C85A6; }
.sk-new { opacity: 0.75; }
.dash-more { margin-top: 18px; }
.dash-more > summary { cursor: pointer; font: 800 16px var(--font-ui); padding: 12px 16px; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-soft); }
.dash-more[open] > summary { margin-bottom: 14px; }
/* The new sticker after a round can be tapped to see it big */
#cele-sticker[data-action] { cursor: pointer; transition: transform 0.12s; }
#cele-sticker[data-action]:active { transform: scale(0.96); }
/* Math Arcade stands out on the home screen: an arcade-bright card, white lettering */
.menu-card.featured {
  background: linear-gradient(145deg, #6C4BF4 0%, #9B5DE5 55%, #E0559B 100%);
  color: #fff;
  box-shadow: 0 6px 0 #4A2FB8, 0 10px 24px rgba(108, 75, 244, 0.35);
}
.menu-card.featured:active { box-shadow: 0 2px 0 #4A2FB8; }
.menu-card.featured small { color: rgba(255, 255, 255, 0.9); }
.menu-card.featured .big { background: rgba(255, 255, 255, 0.9); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.35); }
/* Home: the games still being built, in their own "Under construction" section at the end */
.construction-title { display: flex; align-items: center; gap: 10px; margin-top: 26px; }
.construction-title .tape { flex: none; width: 34px; height: 14px; border-radius: 4px; background: repeating-linear-gradient(-45deg, #FFC93C 0 7px, #2E2A47 7px 14px); }
.construction-note { margin: 10px 4px 12px; text-align: left; }
.menu.construction .menu-card { box-shadow: 0 6px 0 var(--c-d), var(--shadow-soft); outline: 3px dashed rgba(255, 201, 60, 0.9); outline-offset: -3px; }
/* A speed record tie: the cheetah in a necktie (stickers/badges/speed-tie.webp, Make stickers set=badges), the emoji until it is there. */
.tie-reveal .medal-ico img { width: 56px; height: 56px; object-fit: contain; }
.tie-reveal .medal-ico img + em { display: none; }
.tie-reveal .medal-ico em { font-style: normal; }
/* 1,000 stars (Amy): its own picture, a golden box and a shower of stars over the whole screen. */
.trophy-rain { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.trophy-rain i { position: absolute; top: -60px; left: var(--x); width: calc(34px * var(--s)); height: calc(34px * var(--s)); animation: star-fall 3.2s linear var(--d) infinite; }
.trophy-rain i svg { width: 100%; height: 100%; }
@keyframes star-fall { 0% { transform: translateY(0) rotate(0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translateY(110vh) rotate(300deg); opacity: 0.9; } }
.big-win .trophy-box { position: relative; background: radial-gradient(circle at 50% 30%, #FFF8D6, var(--card) 70%); border-width: 6px; width: min(100%, 420px); }
.big-win .trophy-cup { display: none; }
.big-win .trophy-emoji { margin-top: 0; }
.big-win .trophy-emoji img { width: 190px; height: 190px; object-fit: contain; animation: trophy-shine 1.6s ease-in-out infinite; }
.big-win .trophy-emoji img + em { display: none; }
.big-win .trophy-emoji em { font-style: normal; font-size: 110px; }
.big-win .trophy-box h2 { font-size: 40px; color: var(--accent-d); }
@media (prefers-reduced-motion: reduce) { .trophy-rain i { animation: none; display: none; } }
/* Links from the Sticker Book to the Stamp Book and the rest of her collection (Amy). */
.sticker-links { display: flex; gap: 10px; justify-content: center; margin: 4px 0 12px; }
.sticker-links .btn { flex: 1 1 0; width: auto; min-width: 0; padding: 10px 12px; font-size: 15px; }
/* Each page's star sticker (its last one): a gold ring and a star badge, a gold empty spot until it is won, and a glow once it dances. */
.sticker.star-slot:not(.locked) { background: radial-gradient(circle, rgba(255, 201, 60, 0.35) 0%, rgba(255, 201, 60, 0.18) 55%, rgba(255, 201, 60, 0) 72%); box-shadow: 0 0 0 3px var(--sun); }
.sticker.locked.star-slot { border-color: var(--sun); background: #FFF8DC; color: var(--sun-d); font-size: 26px; }
.star-badge { position: absolute; top: -4px; right: -4px; z-index: 2; font-size: 18px; line-height: 1; filter: drop-shadow(0 1px 2px rgba(46, 42, 71, 0.35)); }
.sticker.dancing { animation: star-glow 2s ease-in-out infinite; }
@keyframes star-glow { 0%, 100% { box-shadow: 0 0 0 3px var(--sun), 0 0 6px 2px rgba(255, 201, 60, 0.4); } 50% { box-shadow: 0 0 0 3px var(--sun), 0 0 18px 6px rgba(255, 201, 60, 0.7); } }
@media (prefers-reduced-motion: reduce) { .sticker.dancing { animation: none; } }
/* Painted trophies (Amy: actual trophies, cool and funny): a won one in full colour, one still to win as a mystery silhouette. */
.tt-img { width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(46, 42, 71, 0.25)); }
.tt-img.mystery { filter: brightness(0); opacity: 0.16; }
.trophy-tile .tt-emoji { min-height: 72px; display: grid; place-items: center; }
.has-pic .trophy-cup { display: none; }
.has-pic .trophy-emoji { margin-top: 0; }
.has-pic .trophy-emoji img { width: 170px; height: 170px; object-fit: contain; animation: trophy-shine 1.6s ease-in-out infinite; }
.has-pic .trophy-emoji img + em { display: none; }
.col-img { width: 46px; height: 46px; object-fit: contain; }
/* A child's name: text with an Edit button once given; an input with Save while it is being set (Amy). */
.player-row .player-name-text { flex: 1; min-width: 120px; font-size: 22px; font-weight: 800; color: var(--ink); }
.player-row .link-btn.edit-name { color: var(--accent-d); font-weight: 800; }
.player-row .save-name { flex: none; }
/* Today at a glance, at the top of a child's stats (Amy). */
.today-card h3 small { font-size: 14px; font-weight: 700; color: var(--muted); margin-left: 6px; }
.today-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 6px 0 4px; }
.today-stat { display: grid; justify-items: center; gap: 2px; padding: 10px 6px; border-radius: 16px; background: color-mix(in srgb, var(--sun) 16%, white); text-align: center; }
.today-stat span { font-size: 22px; line-height: 1; }
.today-stat b { font-size: 22px; font-weight: 800; color: var(--ink); line-height: 1.15; }
.today-stat small { font-size: 12px; font-weight: 700; color: var(--muted); }
/* Trophies on the shelf open their own card (Amy): won ones in colour with the date, others as a silhouette with how to win. */
button.trophy-tile { border: 0; font: inherit; cursor: pointer; }
button.trophy-tile:active { transform: scale(0.97); }
.locked-info .trophy-emoji img { filter: brightness(0); opacity: 0.18; animation: none; }