/* One variable Nunito file covers weights 400, 700 and 800. */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url(../assets/fonts/nunito-latin.woff2) format('woff2');
}
:root {
  --cream: #FFF8EC;
  --ink: #1E2140;
  --muted: #6E7391;
  --card: #FFFFFF;
  --grass: #3DD68C;
  --water: #5AC8FA;
  --house: #6C5CE7;
  --night: #221A55;
  --m: #3B7DD8; --m-tint: rgba(59,125,216,.12);
  --a: #E5484D; --a-tint: rgba(229,72,77,.12);
  --s: #2FB37A; --s-tint: rgba(47,179,122,.12);
  --t: #D57C1C; --t-tint: rgba(213,124,28,.12);
  --f: #14A3A8; --f-tint: rgba(20,163,168,.12);
  --d: #8A5CF0; --d-tint: rgba(138,92,240,.12);
  --g: #E0559C; --g-tint: rgba(224,85,156,.12);
  --i: #B9770E; --i-tint: rgba(185,119,14,.12);
  --n: #2B6CB0; --n-tint: rgba(43,108,176,.12);
  --p: #C2417A; --p-tint: rgba(194,65,122,.12);
  --h: #7A5C3E; --h-tint: rgba(122,92,62,.12);
  --b: #5B6CFF; --b-tint: rgba(91,108,255,.12);
  --l: #6B8E23; --l-tint: rgba(107,142,35,.12);
  /* fills that carry white text: green darkened for contrast */
  --m-fill: var(--m); --a-fill: var(--a); --s-fill: #1E8E5E;
  --t-fill: #AD6417; --f-fill: #108286; --d-fill: #8659E9; --g-fill: #C34A88; --i-fill: #A3690C; --n-fill: #2B6CB0; --p-fill: #C2417A; --h-fill: #7A5C3E; --b-fill: #5667F2; --l-fill: #60801F;
  --sky: #5DE0F0; --violet: #5A4BD6; --coral: #F0556A; --sun: #FFD166; --mint: #5FE3B0; --lilac: #CDC4F8; --blue: #7DB8F5;
  --radius: 24px;
  --shadow: 0 6px 20px rgba(60,40,20,.12);
  --t-fast: 160ms; --t-base: 260ms; --t-slow: 480ms;
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { overflow-x: hidden; overscroll-behavior: none; } /* body's own value does not reach the page while html has overflow-x hidden */
html, body { margin: 0; min-height: 100%; background: var(--cream); color: var(--ink); }
body {
  font-family: 'Nunito', system-ui, Roboto, sans-serif;
  font-size: 18px; line-height: 1.35;
  overscroll-behavior-y: none;
}
#app { position: relative; min-height: 100vh; min-height: 100dvh; }
.screen { position: relative; min-height: 100vh; min-height: 100dvh; width: 100%; }
.screen.leaving { position: absolute; inset: 0; pointer-events: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* debug */
.debug { padding: 16px; }
.debug-glyph { width: 100%; max-width: 380px; display: block; background: #fff; border-radius: 16px; margin: 12px 0; }
.debug-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin: 12px 0; }
.debug-row .glyph { height: calc(70px * var(--vh, 1)); width: auto; }

/* speak button */
.speak-btn {
  --accent: var(--violet);
  position: relative; width: 56px; height: 56px; border-radius: 999px; border: 0; padding: 0;
  background: var(--accent); color: #fff; display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 4px 12px rgba(30,33,64,.22);
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
  transition: transform var(--t-base) var(--ease-spring);
}
.speak-btn:active { transform: scale(.97); transition: transform var(--t-fast) var(--ease-out); }
.speak-btn .bars { position: absolute; inset: 0; display: flex; gap: 4px; align-items: center; justify-content: center; opacity: 0; transition: opacity var(--t-fast); }
.speak-btn .bars i { width: 5px; height: 22px; border-radius: 3px; background: #fff; transform: scaleY(.25); transition: transform var(--t-fast) var(--ease-out); }
.speak-btn .icon { transition: opacity var(--t-fast); }
.speak-btn.is-speaking .icon { opacity: 0; }
.speak-btn.is-speaking .bars { opacity: 1; }
.speak-btn.is-speaking .bars i { animation: bar 640ms ease-in-out infinite alternate; }
.speak-btn.is-speaking .bars i:nth-child(2) { animation-delay: -220ms; }
.speak-btn.is-speaking .bars i:nth-child(3) { animation-delay: -440ms; }
@keyframes bar { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0s !important; }
  .speak-btn.is-speaking .bars i { animation: none; }
  .speak-btn .bars i:nth-child(1) { transform: scaleY(.4); } .speak-btn .bars i:nth-child(2) { transform: scaleY(.9); } .speak-btn .bars i:nth-child(3) { transform: scaleY(.6); }
}
.lab-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0; }
.lab-btn { min-height: 48px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--violet); background: #fff; font-weight: 700; }
.lab-log { background: #fff; padding: 12px; border-radius: 12px; font-size: 16px; white-space: pre-wrap; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 28px; border-radius: 999px; border: 0; cursor: pointer;
  font-weight: 800; font-size: 20px; color: #fff; background: var(--violet);
  box-shadow: 0 6px 0 rgba(30,33,64,.22), var(--shadow);
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: transform var(--t-base) var(--ease-spring), box-shadow var(--t-base) var(--ease-spring);
}
.btn:active { transform: translateY(3px) scale(.97); box-shadow: 0 3px 0 rgba(30,33,64,.22), var(--shadow); transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out); }
.btn.ghost { background: #fff; color: var(--ink); box-shadow: 0 4px 0 rgba(30,33,64,.12), var(--shadow); }
.btn.big { min-height: 64px; font-size: 22px; padding: 0 40px; }
.btn[disabled] { opacity: .5; }

/* ---------- hold button ---------- */
.hold-wrap { position: relative; display: inline-block; }
.hold-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 20px 0 8px;
  border-radius: 999px; border: 0; background: #fff; color: var(--violet); font-weight: 800; font-size: 18px;
  box-shadow: var(--shadow); touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: transform var(--t-fast) var(--ease-out);
}
.hold-btn.holding { transform: scale(.97); }
.hold-dial { position: relative; width: 32px; height: 32px; display: grid; place-items: center; }
.hold-dial svg:first-child { position: absolute; inset: 0; }
.hold-text { display: grid; text-align: left; line-height: 1.1; }
.hold-label { color: var(--ink); }
.hold-cap { font-size: 16px; font-weight: 700; color: var(--muted); }
.hold-hint {
  position: absolute; left: 50%; top: calc(100% + 8px); transform: translate(-50%, -4px); white-space: nowrap; opacity: 0; pointer-events: none;
  background: var(--ink); color: #fff; font-size: 16px; font-weight: 700; padding: 6px 12px; border-radius: 999px; z-index: 5;
  transition: opacity var(--t-base), transform var(--t-base) var(--ease-out);
}
.hold-hint.show { opacity: 1; transform: translate(-50%, 0); }
.hold-btn.big { min-height: 64px; padding: 0 28px 0 12px; font-size: 22px; background: var(--violet); color: #fff; box-shadow: 0 6px 0 rgba(30,33,64,.22), var(--shadow); }
.hold-btn.big .hold-label { color: #fff; }
.hold-btn.big .hold-cap { color: rgba(255,255,255,.85); }
.hold-btn.big .hold-dial { color: #fff; }

/* ---------- home map ---------- */
/* A long scrolling trail: the scroller is the screen, the scene inside it is as long as the path needs (--H px high in portrait,
   --W px wide in landscape). Everything on the scene is placed by custom properties set from the data (home.js). */
.home { position: fixed; inset: 0; overflow: hidden; background: var(--grass); }
.map-scroll { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; touch-action: pan-y; -webkit-overflow-scrolling: touch; outline: none; }
.map-scroll::-webkit-scrollbar { display: none; }
.scene { position: relative; width: 100%; height: calc(var(--H) * 1px); background: var(--grass); overflow: hidden; }
.pl { position: absolute; left: var(--px); top: var(--py); }
.scene-water { background: var(--water); border-radius: 50%; box-shadow: 0 0 0 14px rgba(255,255,255,.22); }
.scene-tunnel { display: grid; justify-items: center; align-content: start; gap: 2px; pointer-events: none; }
.tunnel-art { width: 100%; height: 76px; display: block; overflow: visible; }
.tunnel-name { order: -1; font-size: 15px; font-weight: 800; line-height: 1.1; color: var(--ink); text-align: center; background: #FFF8EC; border-radius: 10px; padding: 2px 8px; box-shadow: 0 2px 0 rgba(30,33,64,.18); white-space: nowrap; }
.scene-bush { background: #4DA3FF; border-radius: 50%; }
.scene-bush:nth-of-type(3n) { background: #3B86F0; }
.scene-house { overflow: visible; }
.scene-patch { border-radius: 50%; background: rgba(0,110,70,.11); }
.scene-patch:nth-of-type(2n) { background: rgba(0,110,70,.08); }
.daisy { opacity: .9; }
.map-path { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--H) * 1px); }
.map-path.landscape { display: none; }
.map-path path { stroke-linecap: round; stroke-linejoin: round; }
.path-line { stroke: #fff; stroke-width: 26px; }
.path-shadow { stroke: rgba(0,80,60,.18); stroke-width: 34px; transform: translateY(5px); }
.butterfly { opacity: .65; }
.butterfly.b-one { animation: drift1 26s ease-in-out 2 alternate; }
.butterfly.b-two { animation: drift2 32s ease-in-out 2 alternate; }
.butterfly .wing { transform-origin: 20px 15px; animation: flap 900ms ease-in-out 40 alternate; }
@keyframes flap { from { transform: scaleX(1); } to { transform: scaleX(.55); } }
@keyframes drift1 { 0% { transform: translate(0,0); } 50% { transform: translate(-50px,-26px); } 100% { transform: translate(24px,-70px); } }
@keyframes drift2 { 0% { transform: translate(0,0); } 50% { transform: translate(40px,30px); } 100% { transform: translate(-16px,64px); } }

.stone-wrap { position: absolute; left: var(--px); top: var(--py); width: 0; height: 0; }
.stone {
  --size: 92px; position: absolute; left: calc(var(--size) / -2); top: calc(var(--size) / -2);
  width: var(--size); height: var(--size); border: 0; padding: 0; background: none; cursor: pointer;
  touch-action: manipulation; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none;
  transition: transform var(--t-base) var(--ease-spring);
}
.stone:active { transform: scale(.97); transition: transform var(--t-fast) var(--ease-out); }
.stone-base { position: absolute; left: 0; right: 0; bottom: 0; height: 84%; border-radius: 50%; background: #E7E9FB; box-shadow: 0 8px 0 #BFC4EA, 0 14px 18px rgba(0,60,40,.25); }
.stone-top { position: absolute; left: 6%; right: 6%; top: 0; height: 80%; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: inset 0 -5px 0 rgba(30,33,64,.08); }
.stone-top .glyph { width: 62%; height: auto; }
.stone-num { position: absolute; left: 4%; top: 4%; min-width: 26px; height: 26px; padding: 0 6px; display: grid; place-items: center; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 800; font-size: 16px; }
.stone-badge { position: absolute; right: -2px; top: -4px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 3px solid #fff; }
.stone-badge.done { background: var(--s-fill); }
.stone-badge.lock { background: #8E93B5; color: #fff; }
.stone.is-done .tick { stroke-dasharray: 26; stroke-dashoffset: 0; animation: draw-tick var(--t-base) var(--ease-out) 500ms backwards; }
@keyframes draw-tick { from { stroke-dashoffset: 26; } }
.stone.is-locked .stone-top { background: #D5D9F0; }
.stone.is-locked .stone-base { background: #C9CDE8; box-shadow: 0 8px 0 #A9AED6, 0 14px 18px rgba(0,60,40,.2); }
.stone.is-locked .glyph { opacity: .45; }
.stone.is-current { --size: 112px; }
.stone-ring { position: absolute; left: 6%; right: 6%; top: -2%; height: 84%; border-radius: 50%; border: 5px solid var(--accent); opacity: 0; animation: breathe 2.2s ease-out 6; pointer-events: none; }
@keyframes breathe { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.12); opacity: 0; } }
.bubble {
  position: absolute; left: 0; bottom: 78px; transform: translateX(-50%); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 16px 0 12px; border: 0; border-radius: 999px;
  background: #fff; color: var(--ink); font-weight: 800; font-size: 17px; box-shadow: var(--shadow); touch-action: manipulation; z-index: 3;
}
.bubble::after { content: ''; position: absolute; left: 50%; bottom: -7px; width: 16px; height: 16px; background: #fff; transform: translateX(-50%) rotate(45deg); border-radius: 3px; }
.bubble.below { bottom: auto; top: 70px; }
.bubble.below::after { bottom: auto; top: -7px; }
.bubble .icon { color: var(--violet); }
.home-top { position: absolute; left: calc(16px + var(--sal)); top: calc(16px + var(--sat)); z-index: 10; }
.home-fs { position: absolute; right: calc(16px + var(--sar)); top: calc(16px + var(--sat)); z-index: 10; width: 56px; height: 56px; border-radius: 50%; border: 0; background: #fff; color: var(--violet); box-shadow: var(--shadow); display: grid; place-items: center; cursor: pointer; touch-action: manipulation; transition: transform var(--t-base) var(--ease-spring); }
.home-fs:active { transform: scale(.97); transition-duration: var(--t-fast); }
.fs-row { display: inline-flex; align-items: center; gap: 8px; }
.pill-hold .hold-label { color: var(--violet); }
.first-run { position: absolute; inset: 0; z-index: 20; background: rgba(30,33,64,.45); display: grid; place-items: center; padding: 24px; }
.first-card { background: #fff; border-radius: var(--radius); padding: 28px 24px; max-width: 380px; text-align: center; box-shadow: var(--shadow); display: grid; gap: 18px; justify-items: center; }
.first-card p { font-size: 20px; font-weight: 700; }
.adult-ic { width: 52px; height: 52px; border-radius: 50%; background: var(--lilac); color: var(--violet); display: grid; place-items: center; }
@media (orientation: landscape) {
  .first-run { align-items: end; padding-bottom: 14px; } /* the card sits low, clear of the current stone */
  .map-scroll { overflow-x: auto; overflow-y: hidden; touch-action: pan-x; }
  .scene { width: calc(var(--W) * 1px); height: 100%; }
  .pl { left: var(--lx); top: var(--ly); }
  .map-path.portrait { display: none; }
  .map-path.landscape { display: block; width: calc(var(--W) * 1px); height: 100%; }
  .stone-wrap { left: var(--lx); top: var(--ly); }
  .stone { --size: 76px; } .stone.is-current { --size: 92px; }
  .bubble, .bubble.below { bottom: auto; top: 58px; } /* below its stone: the Grownups pill and the full screen button sit along the top */
  .bubble::after, .bubble.below::after { bottom: auto; top: -7px; }
}
@media (prefers-reduced-motion: reduce) {
  .butterfly { animation: none; } .stone-ring { animation: none; opacity: .4; }
}

/* ---------- lesson overview ---------- */
.icon-btn { width: 52px; height: 52px; border-radius: 50%; border: 0; background: transparent; color: var(--ink); display: grid; place-items: center; cursor: pointer; touch-action: manipulation; transition: transform var(--t-fast) var(--ease-out), background var(--t-fast); }
.icon-btn:active { transform: scale(.94); background: rgba(30,33,64,.08); }
.lesson-overview { min-height: 100dvh; display: flex; flex-direction: column; background: #fff; padding-left: var(--sal); padding-right: var(--sar); }
.lo-head { display: grid; grid-template-columns: 52px 1fr 56px; align-items: center; gap: 8px; padding: calc(12px + var(--sat)) 16px 8px; }
.lo-title { text-align: center; }
.lo-title h1 { font-size: 28px; font-weight: 800; }
.lo-title p { color: var(--muted); font-size: 16px; margin-top: 2px; }
.cards-scroll { flex: 1; display: flex; align-items: center; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scroll-padding-left: 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 16px 0 96px; }
.cards-scroll::-webkit-scrollbar { display: none; }
.cards { display: flex; gap: 14px; padding: 0 20px; }
.task-card {
  --bg: var(--sky); --fg: var(--ink);
  position: relative; flex: 0 0 auto; width: min(64vw, 250px); height: min(56vh, 480px); min-height: 320px; border: 0; padding: 0; border-radius: 28px;
  background: var(--bg); color: var(--fg); text-align: left; overflow: hidden; scroll-snap-align: center; cursor: pointer;
  display: flex; flex-direction: column; justify-content: flex-end; box-shadow: 0 8px 0 rgba(30,33,64,.10), var(--shadow);
  touch-action: manipulation; transition: transform var(--t-base) var(--ease-spring);
}
.task-card:active { transform: scale(.97); transition: transform var(--t-fast) var(--ease-out); }
.task-card:not(.dark-ink) { --fg: #fff; }
.c-sky { --bg: var(--sky); } .c-violet { --bg: var(--violet); } .c-coral { --bg: var(--coral); } .c-sun { --bg: var(--sun); }
.c-mint { --bg: var(--mint); } .c-lilac { --bg: var(--lilac); } .c-blue { --bg: var(--blue); }
.card-num { position: absolute; left: 18px; top: 4px; font-size: 120px; line-height: 1; font-weight: 800; color: rgba(255,255,255,.32); }
.dark-ink .card-num { color: rgba(255,255,255,.5); }
.card-tick { position: absolute; right: 14px; top: 14px; width: 38px; height: 38px; border-radius: 50%; background: var(--s-fill); display: grid; place-items: center; border: 3px solid #fff; }
.is-done .tick { stroke-dasharray: 26; animation: draw-tick var(--t-base) var(--ease-out) 300ms backwards; }
.card-art { position: absolute; left: 0; right: 0; top: 96px; height: 40%; display: flex; align-items: center; justify-content: center; gap: 10px; }
.card-art .flash { width: 84px; height: 100px; background: #fff; border-radius: 14px; display: grid; place-items: center; transform: rotate(var(--r)); box-shadow: var(--shadow); }
.card-art .flash .glyph { width: 70%; }
.big-glyph .glyph { width: 130px; height: auto; }
.big-glyph.ghost { color: rgba(30,33,64,.35); } .big-glyph.ghost .stroke { stroke-dasharray: 3 14; }
.pencil { font-size: 40px; margin-left: -18px; margin-top: 50px; }
.play { width: 84px; height: 84px; border-radius: 50%; background: #fff; color: var(--coral); display: grid; place-items: center; box-shadow: var(--shadow); }
.play .icon { fill: currentColor; margin-left: 4px; }
.emo { font-size: 52px; line-height: 1; } .plus { font-size: 34px; font-weight: 800; opacity: .7; }
.wave { display: flex; gap: 8px; align-items: center; height: 80px; }
.wave i { width: 12px; border-radius: 6px; background: rgba(30,33,64,.75); }
.wave i:nth-child(1) { height: 30px; } .wave i:nth-child(2) { height: 56px; } .wave i:nth-child(3) { height: 80px; } .wave i:nth-child(4) { height: 48px; } .wave i:nth-child(5) { height: 24px; }
.qmark { font-size: 100px; font-weight: 800; color: #fff; line-height: 1; }
.card-body { position: relative; display: grid; gap: 4px; padding: 18px 18px 20px; background: linear-gradient(to top, rgba(0,0,0,.10), transparent); }
.card-name { font-size: 24px; font-weight: 800; line-height: 1.15; }
.card-label { font-size: 16px; font-weight: 700; opacity: .85; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.chip { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 12px; background: #fff; color: var(--ink); font-weight: 800; font-size: 17px; }
.chip-glyph { padding: 0 12px; } .chip-glyph .glyph { height: calc(20px * var(--vh, 1)); width: auto; }
.lo-foot { position: sticky; bottom: 0; z-index: 5; padding: 12px 20px calc(16px + var(--sab)); display: grid; background: linear-gradient(to top, #fff 70%, rgba(255,255,255,0)); }
.start-btn { width: 100%; max-width: 520px; margin: 0 auto; }
@media (orientation: landscape) {
  .lesson-overview { height: 100dvh; }
  .lo-head { padding-bottom: 0; }
  .cards-scroll { align-items: flex-start; overflow-y: auto; padding-bottom: 88px; }
  .lo-foot { position: fixed; left: 0; right: 0; bottom: 0; }
  .cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; width: 100%; }
  .task-card { width: auto; height: 118px; min-height: 0; flex-direction: row; align-items: center; justify-content: flex-start; }
  .card-num { font-size: 70px; left: 10px; top: -2px; }
  .card-tick { top: auto; bottom: 10px; right: 10px; width: 30px; height: 30px; }
  .card-art { position: absolute; left: auto; right: 6px; top: 8px; width: 46%; height: 70px; transform: scale(.6); transform-origin: right top; justify-content: flex-end; }
  .card-body { padding: 8px 12px 10px; position: absolute; left: 0; right: 0; bottom: 0; }
  .card-name { font-size: 19px; } .card-label { display: none; }
  .chips { margin-top: 2px; flex-wrap: nowrap; overflow: hidden; } .chip { min-height: 30px; font-size: 16px; padding: 0 10px; }
  .lo-foot { padding-top: 4px; }
  .lo-foot .btn { min-height: 56px; }
}

/* ---------- slide track ---------- */
.slide-track {
  --accent: var(--m);
  position: relative; height: 88px; border-radius: 999px; background: #E9ECF8; overflow: visible;
  box-shadow: inset 0 3px 8px rgba(30,33,64,.12); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.st-clip { position: absolute; inset: 0; border-radius: 999px; overflow: hidden; pointer-events: none; }
.spark { position: absolute; z-index: 4; pointer-events: none; will-change: transform, opacity; }
.st-fill { position: absolute; inset: 0; border-radius: 999px; will-change: transform; transition: transform 40ms linear, opacity var(--t-base); overflow: hidden; opacity: 0; }
.slide-track.dragging .st-fill, .slide-track.is-end .st-fill { opacity: 1; }
.st-wave { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity var(--t-base); }
.st-wave svg { position: absolute; left: 0; top: 0; width: 200%; height: 100%; }
.slide-track.moving .st-wave { opacity: 1; }
.slide-track.moving .st-wave svg { animation: wave-shift 900ms linear infinite; }
@keyframes wave-shift { to { transform: translateX(-50%); } }
.st-hint { position: absolute; right: 64px; top: 0; bottom: 0; display: flex; align-items: center; gap: 6px; transition: opacity var(--t-base); }
.st-hint i { width: 12px; height: 12px; border-right: 4px solid rgba(30,33,64,.25); border-top: 4px solid rgba(30,33,64,.25); transform: rotate(45deg); border-radius: 2px; }
.slide-track.dragging .st-hint { opacity: 0; }
.st-goal { position: absolute; right: 8px; top: 8px; width: 72px; height: 72px; border-radius: 50%; border: 4px dashed rgba(30,33,64,.2); }
.st-bloom { position: absolute; right: 8px; top: 8px; width: 72px; height: 72px; border-radius: 50%; border: 6px solid var(--accent); opacity: 0; pointer-events: none; }
.st-bloom.go { animation: bloom var(--t-slow) var(--ease-out); }
@keyframes bloom { from { transform: scale(1); opacity: .8; } to { transform: scale(2.4); opacity: 0; } }
.st-handle {
  position: absolute; left: 6px; top: 6px; width: 76px; height: 76px; border-radius: 50%; border: 0; padding: 0; background: #fff;
  box-shadow: 0 4px 10px rgba(30,33,64,.25); will-change: transform; touch-action: none; cursor: grab; display: grid; place-items: center;
}
.st-handle::before { content: ''; position: absolute; inset: -8px; border-radius: 50%; }
.st-glyph { display: grid; place-items: center; width: 100%; height: 100%; }
.st-glyph .glyph { width: 62%; height: auto; transition: transform var(--t-fast) var(--ease-out); }
.slide-track.dragging .st-glyph .glyph { transform: scale(1.15); }
.slide-track.dragging .st-handle { cursor: grabbing; }

/* ---------- trace pad ---------- */
.trace-pad { position: relative; width: 100%; aspect-ratio: 1 / 1; max-height: 70vh; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; touch-action: none; }
.trace-pad canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.tp-fx { pointer-events: none; }
.lab-extra { display: grid; gap: 16px; margin: 16px 0; }

/* ---------- task shell ---------- */
body.night { background: var(--night); }
.task-screen { min-height: 100dvh; height: 100dvh; display: flex; flex-direction: column; background: var(--night); color: #fff; padding: 0 var(--sar) 0 var(--sal); }
.task-head { display: grid; grid-template-columns: 52px 1fr 52px; align-items: center; gap: 6px; padding: calc(8px + var(--sat)) 12px 0; grid-template-areas: "b t s" "d d d"; }
.task-head h1 { grid-area: t; text-align: center; font-size: 28px; font-weight: 800; }
.task-head .icon-btn { grid-area: b; } .head-spacer { grid-area: s; }
.icon-btn.light { color: #fff; } .icon-btn.light:active { background: rgba(255,255,255,.14); }
.dots { grid-area: d; display: flex; justify-content: center; padding: 6px 0 12px; }
.dots-track { position: relative; display: flex; gap: var(--dgap, 14px); }
.dot { display: block; width: 10px; height: 10px; border-radius: 999px; background: rgba(255,255,255,.28); transition: background var(--t-base); }
.dot.past { background: rgba(255,255,255,.6); }
/* The active pill is one fixed 28 px shape that slides and is never resized: transform only. */
.dot-pill { position: absolute; left: -9px; top: 0; width: 28px; height: 10px; border-radius: 999px; background: var(--sun); transform: translateX(calc(var(--at, 0) * (10px + var(--dgap, 14px)))); transition: transform var(--t-base) var(--ease-out); }
.task-stage { position: relative; flex: 1 1 auto; min-height: 0; margin: 0 12px; border-radius: 28px 28px 0 0; background: var(--bg); color: var(--ink); overflow: hidden; display: flex; }
.task-stage.c-sky { --bg: var(--sky); } .task-stage.c-violet { --bg: var(--violet); } .task-stage.c-coral { --bg: var(--coral); } .task-stage.c-sun { --bg: var(--sun); }
.task-stage.c-mint { --bg: var(--mint); } .task-stage.c-lilac { --bg: var(--lilac); } .task-stage.c-blue { --bg: var(--blue); }
.task-stage.on-dark { color: #fff; }
.task-activity { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: 18px 16px 24px; display: flex; flex-direction: column; align-items: stretch; overscroll-behavior: contain; }
.task-stage > .speak-btn { position: absolute; right: 14px; top: 14px; z-index: 4; }
.speak-btn.light { background: #fff; color: var(--violet); }
.speak-btn.light .bars i { background: var(--violet); }
.speak-btn.small { width: 48px; height: 48px; flex: 0 0 auto; box-shadow: none; background: var(--violet); }
.speak-btn.small .icon { width: 22px; height: 22px; }
.task-foot { flex: 0 0 auto; display: grid; gap: 10px; padding: 12px 12px calc(14px + var(--sab)); background: var(--night); }
.script-card { display: grid; grid-template-columns: 36px 1fr 48px; gap: 10px; align-items: center; background: #ECEEF8; color: var(--ink); border-radius: 20px; padding: 10px 10px 10px 12px; }
.script-ic { width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--muted); display: grid; place-items: center; }
.script-tag { display: block; font-size: 16px; font-weight: 800; color: #565B7A; letter-spacing: .02em; }
.script-text { font-size: 17px; line-height: 1.3; font-weight: 600; }
.task-buttons { display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px; }
.task-buttons.solo { grid-template-columns: 1fr; }
.task-buttons .btn { min-height: 56px; width: 100%; padding: 0 12px; }
.btn.again { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.45); }
.btn.again:active { box-shadow: inset 0 0 0 2px rgba(255,255,255,.45); transform: scale(.97); }
.btn.next { background: var(--sun); color: var(--ink); }
.btn.small { min-height: 48px; font-size: 18px; padding: 0 20px; }
.btn.ghost.small { box-shadow: 0 3px 0 rgba(30,33,64,.12); }
.task-stage.on-dark .btn.ghost { color: var(--ink); }

/* shared bits inside tasks */
.letter-card { align-self: center; width: 150px; height: 130px; border-radius: 24px; background: #fff; display: grid; place-items: center; box-shadow: var(--shadow); border: 0; margin: 6px auto 14px; }
.letter-card .glyph { height: calc(100% - 16px); width: auto; max-width: 72%; }
.letter-card.big { width: min(72%, 280px); height: 170px; }
.new-letter .letter-card.big { width: min(calc(100% - 144px), 280px); }
.letter-card.tappable { cursor: pointer; touch-action: manipulation; transition: transform var(--t-fast) var(--ease-out); }
.letter-card.tappable:active { transform: scale(.97); }
.sound-card { --accent: var(--m); display: grid; grid-template-columns: 40px 1fr; gap: 12px; background: #fff; color: var(--ink); border-radius: 20px; padding: 14px; margin-bottom: 14px; box-shadow: var(--shadow); border-left: 6px solid var(--accent); }
.sc-ic { width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 14%, #fff); color: var(--accent); display: grid; place-items: center; }
.sc-first { font-size: 19px; font-weight: 800; }
.sound-card.lead { padding: 16px; }
.sound-card.lead .sc-first { font-size: 24px; line-height: 1.2; }
.sound-card.lead .sc-rules { font-size: 19px; } .sc-first strong { color: var(--accent); }
.sc-rules { font-weight: 700; margin-top: 2px; }
.sc-how { font-size: 17px; color: var(--muted); margin-top: 4px; }
@media (max-width: 380px) { .new-letter .letter-card.big { height: 140px; } }
.review-count { display: flex; gap: 6px; justify-content: center; margin-bottom: 4px; }
.review-count:empty { display: none; }
.review-count i { width: 8px; height: 8px; border-radius: 50%; background: rgba(30,33,64,.2); } .review-count i.on { background: var(--ink); }
.review-body { display: flex; flex-direction: column; }
.review-body .slide-track { margin-bottom: 14px; }
.new-letter .slide-track { margin-bottom: 16px; }
.word-strip { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: none; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.word-strip::-webkit-scrollbar { display: none; }
.word-tile { flex: 0 0 auto; width: 120px; border: 0; padding: 8px 8px 10px; border-radius: 20px; background: #fff; color: var(--ink); box-shadow: var(--shadow); display: grid; gap: 6px; justify-items: center; touch-action: manipulation; cursor: pointer; }
.word-tile .pic { width: 104px; height: 104px; display: grid; place-items: center; border-radius: 14px; overflow: hidden; background: #F3F4FB; }
.word-tile .emoji { font-size: 56px; line-height: 1; }
.word-tile .word { font-size: 20px; font-weight: 800; min-height: 28px; }
.ltext { white-space: nowrap; }
.inline-glyph path { stroke-width: var(--aw, 10); }
.lo-title p .inline-glyph, .sc-how .inline-glyph, .gu-sub .inline-glyph { --aw: 7.5; }
.inline-glyph { display: inline-block; width: auto; margin: 0 .02em; } /* height and vertical-align come from the glyph's own extent (letters.js) */

/* story */
.story { flex: 1; display: grid; gap: 20px; align-content: center; justify-items: center; text-align: center; padding: 10px 0; }
.story h2 { font-size: 28px; font-weight: 800; color: #fff; }
.story-art { width: 96px; height: 96px; border-radius: 50%; background: rgba(255,255,255,.14); display: grid; place-items: center; cursor: pointer; }
.story .play { width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.28); color: rgba(255,255,255,.7); display: grid; place-items: center; }
.story .play .icon { fill: currentColor; margin-left: 3px; }

/* words */
.words-task { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.merge { display: grid; gap: 18px; justify-items: center; }
.parts-row { display: flex; align-items: center; gap: 10px; }
.part-tile { width: 132px; padding: 14px 8px 12px; border-radius: 22px; background: #fff; box-shadow: var(--shadow); display: grid; gap: 8px; justify-items: center; }
.part-tile .pic-frame { width: 76px; height: 76px; } .part-tile .word { font-size: 22px; font-weight: 800; }
.plus-sign { font-size: 36px; font-weight: 800; opacity: .6; width: 24px; text-align: center; }
.merged-tile { width: min(86%, 300px); min-height: 172px; /* room for the revealed word, so Next word never moves */ border: 0; border-radius: 26px; background: rgba(255,255,255,.55); box-shadow: inset 0 0 0 3px rgba(30,33,64,.12); display: grid; place-items: center; gap: 6px; padding: 14px; cursor: pointer; touch-action: manipulation; color: var(--ink); align-content: center; }
.merged-tile.revealed { background: #fff; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.merged-tile .q { font-size: 64px; font-weight: 800; opacity: .35; line-height: 1; }
.merged-tile .word.big { font-size: 40px; font-weight: 800; }

/* sounds */
.sounds-task { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.sounds-body { display: grid; gap: 18px; justify-items: center; }
.sounds-stage { position: relative; width: min(100%, 360px); min-height: 230px; border: 0; border-radius: 26px; background: #fff; box-shadow: var(--shadow); display: grid; place-items: center; align-content: center; gap: 10px; padding: 20px; cursor: pointer; touch-action: manipulation; color: var(--ink); }
.glyph-row { position: relative; display: block; width: 100%; overflow: hidden; border-radius: 16px; padding: 6px 7%; }
.glyph-row .glyph { width: 100%; height: auto; display: block; }
.sweep { position: absolute; top: 0; bottom: 0; left: 0; width: 34%; background: linear-gradient(90deg, transparent, rgba(255,190,60,.95), transparent); mix-blend-mode: screen; will-change: transform, opacity; opacity: 0; pointer-events: none; }
.emoji.huge { font-size: 110px; line-height: 1; }
.tap-hint { color: var(--muted); display: grid; place-items: center; }
.reveal-word { font-size: 40px; font-weight: 800; display: none; }
.sounds-stage.revealed .reveal-word { display: block; } .sounds-stage.revealed .tap-hint, .sounds-stage.cueing .tap-hint { display: none; }

/* writing */
.writing { display: grid; gap: 14px; align-content: start; }
.writing-buttons { display: flex; gap: 10px; justify-content: center; }
.writing-buttons .btn { white-space: nowrap; flex: 1 1 0; min-width: 0; max-width: 200px; padding: 0 14px; }

/* check */
.check { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 24px; }
.check-prompt { font-size: 26px; font-weight: 800; text-align: center; padding: 0 12px; margin-top: 0; line-height: 1.25; color: var(--ink); min-height: 66px; display: grid; place-items: center; }
.opts { display: grid; gap: 14px; align-content: center; grid-template-columns: repeat(2, 1fr); }
.opts.n3 { grid-template-columns: repeat(3, 1fr); }
.opt-card { min-height: 150px; border: 0; border-radius: 24px; background: #fff; box-shadow: 0 6px 0 rgba(30,33,64,.12), var(--shadow); display: grid; place-items: center; padding: 10px; cursor: pointer; touch-action: manipulation; color: var(--ink); transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast); }
.opt-card.picked { transform: translateY(-10px); box-shadow: 0 16px 0 rgba(30,33,64,.10), 0 18px 28px rgba(30,33,64,.22), inset 0 0 0 5px var(--violet); }
.opt-card:active { transform: scale(.97); }
.opt-card.picked:active { transform: translateY(-10px) scale(.98); }
.opt-glyph .glyph { width: 100px; height: auto; }
.opts.n3 .opt-glyph .glyph { width: 70px; }
.opt-pic { display: grid; gap: 6px; justify-items: center; } .opt-pic .emoji { font-size: 64px; line-height: 1; } .opt-pic .word { font-size: 22px; font-weight: 800; }

/* finish */
.finish { min-height: 100dvh; background: var(--cream); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: calc(24px + var(--sat)) 24px calc(24px + var(--sab)); text-align: center; }
.finish-glyph { position: relative; width: 190px; height: 190px; border-radius: 50%; background: #fff; box-shadow: var(--shadow); display: grid; place-items: center; }
.finish-glyph { box-shadow: 0 0 0 16px color-mix(in srgb, var(--accent) 12%, transparent), var(--shadow); } /* the disc sits on a tinted panel */
.finish-glyph .glyph { width: 62%; height: auto; }
.finish-for { margin: -4px 0 -8px; font-size: 16px; font-weight: 700; color: var(--muted); }
@media (max-width: 380px) { .finish .btn.practice { font-size: 17px; padding: 0 12px; white-space: nowrap; } }
.finish-ring { position: absolute; inset: -6px; border-radius: 50%; border: 6px solid var(--accent); opacity: 0; pointer-events: none; }
.finish h1 { font-size: 40px; font-weight: 800; }
.finish-card { width: min(100%, 420px); background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; display: grid; gap: 14px; }
.finish-q { font-size: 20px; font-weight: 800; }
.finish-choices { display: grid; gap: 12px; }
.finish .btn.big { padding: 0 20px; }
.finish .btn.got { background: var(--s-fill); } .finish .btn.chosen { box-shadow: 0 0 0 4px var(--ink), var(--shadow); }
.finish .btn.practice { background: #F3F4FB; }
.btn.secondary { background: var(--ink); color: #fff; }
.finish-note { min-height: 24px; color: var(--muted); font-weight: 700; }
.back-path { min-width: 220px; }
@media (orientation: landscape) and (max-height: 520px) {
  /* the stage takes the whole height on the left; the title, dots, script and buttons stack at the top of the narrow right column */
  .task-screen { display: grid; grid-template-columns: 1fr 264px; grid-template-rows: auto 1fr; height: 100dvh; }
  .task-head { grid-column: 2; grid-row: 1; grid-template-columns: 52px 1fr; grid-template-areas: "b t" "d d"; padding-bottom: 0; }
  .task-head .dots { padding: 0 0 8px; --dgap: 10px; } .head-spacer { display: none; }
  .task-head h1 { text-align: left; font-size: 22px; }
  .task-stage { grid-column: 1; grid-row: 1 / -1; margin: calc(8px + var(--sat)) 0 0 12px; border-radius: 28px 28px 0 0; }
  .task-foot { grid-column: 2; grid-row: 2; align-content: start; padding-top: 4px; }
  .task-activity { padding: 12px; }
  /* New Letter and Review: glyph and sound card on the left, slide track and words on the right */
  .new-letter, .review-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; align-content: center; flex: 1; }
  .new-letter > .letter-card, .review-body > .letter-card { grid-column: 1; grid-row: 1; margin: 0 0 12px; width: 100%; }
  .new-letter > .sound-card, .review-body > .sound-card { grid-column: 1; grid-row: 2; margin-bottom: 0; align-self: start; }
  .new-letter > .slide-track, .review-body > .slide-track { grid-column: 2; grid-row: 1; margin: 58px 0 12px; }
  .new-letter > .word-strip { grid-column: 2; grid-row: 2; margin: 0; padding-left: 2px; }
  .new-letter .sc-how, .review-body .sc-how { display: none; }
  .letter-card.big { height: 120px; }
  .word-tile { width: 104px; } .word-tile .pic { width: 88px; height: 88px; } .word-tile .emoji { font-size: 48px; }
  .review { position: relative; } .review-count { position: absolute; top: -8px; left: 0; right: 0; }
  /* Saying Words and Sounds: the revealed states fit the stage */
  .words-task, .sounds-task { justify-content: flex-start; }
  .merge { gap: 12px; }
  .part-tile { padding: 8px; } .part-tile .pic-frame { width: 56px; height: 56px; } .part-tile .word { font-size: 20px; }
  .merged-tile { min-height: 130px; padding: 8px; } .merged-tile .word.big { font-size: 32px; }
  .sounds-body { gap: 12px; }
  .sounds-stage { min-height: 130px; padding: 12px; } .glyph-row { padding: 4px 20%; } .reveal-word { font-size: 32px; } .emoji.huge { font-size: 80px; }
  .opt-card { min-height: 110px; }
  .story-art { width: 72px; height: 72px; } .story .play { width: 44px; height: 44px; }
  .check-prompt { font-size: 22px; min-height: 0; }
  /* glyph and heading on the left; the grown-up's card and the back button on the right */
  .finish { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; align-items: center; justify-items: center; gap: 16px 28px; padding-top: calc(12px + var(--sat)); padding-bottom: calc(12px + var(--sab)); }
  .finish-glyph { grid-column: 1; grid-row: 1; width: 110px; height: 110px; }
  .finish h1 { grid-column: 1; grid-row: 2; font-size: 32px; white-space: nowrap; }
  .finish-card { grid-column: 2; grid-row: 1; width: 100%; }
  .finish-choices { grid-template-columns: 1fr 1fr; }
  .finish .btn.big { font-size: 19px; padding: 0 12px; }
  .back-path { grid-column: 2; grid-row: 2; }
  .trace-pad { max-height: calc(100dvh - 200px); }
}

/* alphabet song row (optional video item above the task cards) */
.song-row { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; margin: 4px 16px 0; padding: 10px 12px; border-radius: 20px; background: #F1EEFF; color: var(--ink); }
.song-thumb { width: 56px; height: 56px; border-radius: 16px; background: var(--lilac); color: var(--violet); display: grid; place-items: center; opacity: .85; }
.song-thumb .icon { fill: currentColor; }
.song-text strong { font-size: 18px; font-weight: 800; }
.parent-note { font-size: 16px; color: var(--muted); line-height: 1.25; }
.song-hold .hold-label { color: var(--violet); }
.song-hold.hold-btn { min-height: 48px; padding: 0 16px 0 6px; box-shadow: 0 2px 8px rgba(30,33,64,.15); }
@media (max-width: 380px) { .song-row .parent-note { display: none; } }
@media (max-width: 420px) { .song-row { grid-template-columns: 56px 1fr; } .song-row .hold-wrap { grid-column: 1 / -1; justify-self: end; } }
@media (orientation: landscape) { .song-row { margin-top: 12px; padding: 6px 12px; } }

/* ---------- grownups ---------- */
.grownups { min-height: 100dvh; background: var(--cream); padding: 0 var(--sar) var(--sab) var(--sal); }
.gu-head { display: flex; align-items: center; gap: 8px; padding: calc(10px + var(--sat)) 12px 6px; }
.gu-head h1 { font-size: 28px; font-weight: 800; }
.gu-body { display: grid; gap: 16px; padding: 8px 16px 40px; max-width: 640px; margin: 0 auto; }
.gu-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 16px; display: grid; gap: 12px; }
.gu-card h2 { font-size: 22px; font-weight: 800; }
.gu-fold { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0; border: 0; background: none; font: inherit; font-weight: 800; text-align: left; color: var(--ink); cursor: pointer; }
.gu-fold .icon { transition: transform var(--t-base) var(--ease-out); } .gu-fold[aria-expanded="true"] .icon { transform: rotate(180deg); }
.gu-fold-body { display: grid; gap: 12px; } .gu-fold-body[hidden] { display: none; }
.gu-list { display: grid; gap: 8px; }
.gu-row { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; min-height: 56px; }
.gu-row.slim { grid-template-columns: 44px 1fr auto; min-height: 48px; }
.gu-glyph { width: 48px; height: 48px; border-radius: 14px; background: #F3F4FB; display: grid; place-items: center; }
.gu-glyph .glyph { width: 60%; height: auto; }
.gu-row-text { display: grid; }
.gu-sub { color: var(--muted); font-size: 16px; font-weight: 600; }
.gu-open { color: var(--s-fill); display: grid; place-items: center; width: 48px; height: 48px; }
.gu-pill { padding: 6px 14px; border-radius: 999px; font-weight: 800; font-size: 16px; }
.gu-pill.ok { background: #DDF6EA; color: #167A50; } .gu-pill.no { background: #FFE9C2; color: #8A5A00; }
.gu-field { display: grid; gap: 6px; font-weight: 700; }
.gu-field.inline { grid-template-columns: 1fr auto; align-items: center; min-height: 48px; }
.gu-select { min-height: 48px; border-radius: 14px; border: 2px solid #D9DCEE; padding: 0 12px; font: inherit; background: #fff; color: var(--ink); }
.gu-range { width: 100%; height: 48px; accent-color: var(--violet); }
.gu-switch { width: 64px; height: 48px; border-radius: 999px; border: 0; background: #C9CDE8; position: relative; padding: 0; transition: background var(--t-base); }
.gu-switch i { position: absolute; left: 6px; top: 6px; width: 36px; height: 36px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); transition: transform var(--t-base) var(--ease-out); }
.gu-switch[aria-checked="true"] { background: var(--s); } .gu-switch[aria-checked="true"] i { transform: translateX(16px); }
.gu-note { color: var(--muted); font-size: 16px; } .gu-note a, .gu-link { color: var(--violet); font-weight: 700; }
.gu-credit { font-size: 16px; color: var(--muted); border-top: 1px solid #ECEEF8; padding-top: 10px; }
.gu-link { display: flex; align-items: center; gap: 8px; min-height: 48px; text-decoration: none; }
.gu-version { text-align: center; color: var(--muted); font-size: 16px; }
.gu-confirm { display: grid; gap: 10px; background: #FFF1F1; border-radius: 16px; padding: 12px; }
.gu-actions { display: flex; gap: 10px; }
.btn.danger { background: var(--a); }
.grownups .sound-card { box-shadow: none; background: #F7F8FD; margin-bottom: 0; }

/* ---------- sign-in (grown-up accounts, js/screens/signin.js) ---------- */
.signin { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: calc(16px + var(--sat)) calc(16px + var(--sar)) calc(16px + var(--sab)) calc(16px + var(--sal)); background: var(--cream); }
.si-wrap { width: 100%; max-width: 440px; display: grid; gap: 12px; }
.si-intro { display: grid; justify-items: center; gap: 4px; text-align: center; }
.si-pip .pip { height: 92px; width: auto; }
.si-intro h1 { font-size: 26px; font-weight: 800; line-height: 1.2; }
.si-main { display: grid; gap: 12px; }
.si-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; display: grid; gap: 12px; }
.si-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: #F3F4FB; border-radius: 999px; padding: 4px; }
.si-tab { min-height: 48px; border: 0; border-radius: 999px; background: transparent; font-weight: 800; color: var(--muted); cursor: pointer; touch-action: manipulation; }
.si-tab[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 2px 6px rgba(30,33,64,.15); }
.si-form { display: grid; gap: 12px; }
.si-input { width: 100%; min-width: 0; min-height: 48px; }
.si-go { width: 100%; min-height: 56px; font-size: 20px; padding: 0 16px; }
.si-sub { font-size: 22px; font-weight: 800; }
.si-text, .si-hint { color: var(--muted); font-size: 16px; font-weight: 600; }
.si-error { color: #B3262C; font-weight: 700; font-size: 16px; } .si-error:empty { display: none; }
.si-ok { color: #167A50; font-weight: 700; font-size: 16px; }
.si-note { display: grid; gap: 8px; }
.si-link { min-height: 48px; background: none; border: 0; color: var(--violet); font-weight: 700; text-decoration: underline; cursor: pointer; touch-action: manipulation; }
.si-version { text-align: center; color: var(--muted); font-size: 16px; min-height: 48px; display: grid; place-items: center; user-select: none; -webkit-user-select: none; }
@media (orientation: landscape) and (max-height: 520px) {
  .si-wrap { max-width: 860px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: center; gap: 20px; }
  .si-pip .pip { height: 84px; } .si-intro h1 { font-size: 24px; }
  .si-card { padding: 12px; gap: 8px; } .si-form { gap: 6px; } .si-field { gap: 2px; } .si-hint { display: none; } .si-tabs { padding: 3px; }
  .si-go { min-height: 48px; }
}
.gu-account { display: grid; gap: 12px; justify-items: start; } .gu-account .gu-confirm, .gu-account .gu-field { justify-self: stretch; }
.gu-acct-actions { flex-wrap: wrap; } .gu-acct-email { word-break: break-all; }
.btn.danger-text { color: var(--a); white-space: normal; text-align: center; }

.retry-card { min-height: 100dvh; display: grid; place-content: center; gap: 20px; text-align: center; padding: 24px; font-weight: 700; font-size: 20px; }
.retry-card .btn { justify-self: center; }
/* No long-press menus on child surfaces. */
html { touch-action: manipulation; }
button, .stone, .slide-track, .trace-pad { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
button img, .word-tile img, .pic-frame img { pointer-events: none; -webkit-user-drag: none; -webkit-touch-callout: none; }

/* ---------- games: the farm and Letter Hunt ---------- */
.task-activity.flush { padding: 0; overflow: hidden; }
.game { flex: 1; display: flex; flex-direction: column; min-height: 0; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.farm { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.farm > * { position: absolute; }
.farm-sky { inset: 0; background: linear-gradient(180deg, #63C5F7 0%, #9FE3F0 52%, #D2F4DD 84%); }
.farm-sun { left: 56%; top: 10px; } .farm-cloud.c1 { left: 26%; top: 22%; } .farm-cloud.c2 { right: 8%; top: 38%; }
.farm-hills { left: 0; right: 0; bottom: 96px; width: 100%; height: 150px; }
.farm-fence { left: 0; right: 0; bottom: 58px; height: 64px; display: flex; gap: 4px; padding: 0 2px; }
.farm-fence i { flex: 1 1 0; background: #fff; border-radius: 9px 9px 2px 2px; box-shadow: inset -3px 0 0 rgba(30,33,64,.07); }
.farm-fence::before { content: ''; position: absolute; left: 0; right: 0; top: 18px; height: 7px; background: #E3E8F3; box-shadow: 0 24px 0 #E3E8F3; }
.farm-grass { left: 0; right: 0; bottom: 0; height: 84px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 26px, transparent 26px 52px), linear-gradient(#7FD36B, #5DBB57); border-top: 4px solid #8EE07C; }
.star-row { flex: 0 0 auto; height: 40px; display: flex; gap: 10px; align-items: center; justify-content: center; background: #5DBB57; }
.star-slot { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.4); display: grid; place-items: center; }
.star-slot .gold-star { width: 30px; height: 30px; }
.find-card { left: 10px; top: 10px; z-index: 3; display: grid; justify-items: center; gap: 2px; padding: 6px 14px 6px; border-radius: 18px; background: #fff; box-shadow: var(--shadow); color: var(--muted); font-size: 16px; font-weight: 800; line-height: 1.1; pointer-events: none; }
.find-card .glyph { height: calc(34px * var(--vh, 1)); width: auto; }
.sky { inset: 0; z-index: 2; touch-action: none; user-select: none; -webkit-user-select: none; } .sky.done { pointer-events: none; }
.sky-letter { position: absolute; width: 56px; height: 56px; padding: 0; border: 0; background: none; cursor: pointer; touch-action: none; display: block; will-change: transform; }
.sky-letter.dragging { z-index: 5; cursor: grabbing; }
@media (prefers-reduced-motion: no-preference) { .sky-letter.dragging .face { background: rgba(255,255,255,.62); box-shadow: 0 10px 18px rgba(30,33,64,.28); } }
.sky-letter .face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.38); }
.sky-letter .glyph { width: 44px; height: auto; } .sky-letter .glyph path { stroke-width: 13; }
.font-letter { font: 800 50px/1 'Nunito', system-ui, sans-serif; }
.hunt-goal { right: 8px; bottom: 22px; pointer-events: none; }


.goal-glow { position: absolute; left: -20%; right: -20%; top: -14%; bottom: -8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,230,150,.85), rgba(255,230,150,0)); opacity: 0; transition: opacity 500ms ease; }
.hunt-goal.done .goal-glow { opacity: 1; }
.spark { z-index: 6; }
.art-train, .art-crate, .art-wag { display: block; width: 150px; } .art-sig { display: block; width: 74px; }
.art-train svg.engine-art, .art-crate svg, .art-wag svg, .art-sig svg { display: block; width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) { .goal-glow { transition: none; } }

/* ---------- Saying Sounds: slide to blend ---------- */
.task-activity.lock { overflow: hidden; touch-action: none; }
.glyph-row { pointer-events: none; }
/* the slide surface: a transparent band over the word, the stage's full width, touch-action none so it never pans */
.slide-band { position: absolute; left: 0; right: 0; z-index: 3; touch-action: none; cursor: grab; -webkit-touch-callout: none; }
.glyph-text { font: 800 87px 'Nunito', system-ui, sans-serif; }
.glyph-letter.lit .glyph-text { fill: var(--accent); }
.glyph-text { transition: fill var(--t-fast); }
.task-stage .btn { position: relative; z-index: 4; }
.glyph-row .glyph { overflow: visible; }
.glyph-letter { --accent: var(--ink); }
.glyph-letter .stroke { transition: stroke var(--t-fast); }
.glyph-letter.lit .stroke { stroke: var(--accent); }
.glyph-pop { transform-box: fill-box; transform-origin: 50% 55%; transition: transform var(--t-fast) var(--ease-spring); }
.glyph-letter.current .glyph-pop { transform: scale(1.12); }
.glyph-halo { fill: var(--accent); opacity: 0; transition: opacity var(--t-base); }
.glyph-letter.current .glyph-halo { opacity: .2; }
.slide-hand { position: absolute; z-index: 4; pointer-events: none; color: var(--ink); will-change: transform, opacity; } .slide-hand svg { fill: #fff; stroke-width: 2.2; filter: drop-shadow(0 2px 3px rgba(30,33,64,.3)); }
.blend-bar { display: block; width: 86%; height: 12px; border-radius: 999px; background: rgba(30,33,64,.1); overflow: hidden; }
.blend-bar i { display: block; width: 100%; height: 100%; border-radius: 999px; background: var(--accent, var(--ink)); transform: scaleX(0); transform-origin: 0 50%; will-change: transform; transition: transform 70ms linear; }
@media (prefers-reduced-motion: reduce) {
  .glyph-letter .stroke, .glyph-halo, .blend-bar i { transition: none; }
  .glyph-pop { transition: none; }
  .glyph-letter.current .glyph-pop { transform: none; }
}
@media (orientation: landscape) and (max-height: 520px) { .blend-bar { width: 60%; height: 10px; } }

/* ---------- Sound Sack (checkpoint) ---------- */
.demo-hand { position: absolute; z-index: 6; pointer-events: none; color: var(--ink); } .demo-hand svg { fill: #fff; stroke-width: 2.2; filter: drop-shadow(0 3px 4px rgba(30,33,64,.35)); }
.sack-game .farm { touch-action: none; }
.sack-cards { inset: 0; z-index: 4; pointer-events: none; }
.sack-card { position: absolute; width: var(--card, 96px); height: var(--card, 96px); padding: 0; border: 2px solid var(--ink); border-radius: 14px; background: #fff; box-shadow: 0 4px 0 rgba(30,33,64,.16), var(--shadow); display: grid; place-items: center; cursor: grab; touch-action: none; pointer-events: auto; will-change: transform; }
.sack-card .emoji { font-size: calc(var(--card, 96px) * .58); line-height: 1; }
.sack-card.lifted { cursor: grabbing; z-index: 6; box-shadow: 0 14px 26px rgba(30,33,64,.3); }
.sack-card:disabled { pointer-events: none; }
.sack-card[hidden] { display: none; }
.sack { z-index: 3; transform-origin: 50% 100%; will-change: transform; pointer-events: none; }
.sack .sack-art { display: block; width: 100%; height: 100%; overflow: visible; }
.sack-front { position: absolute; left: 28%; top: 52%; width: 44%; }
.sack-front .glyph { display: block; width: 100%; height: auto; }
.stone-top.stone-sack { background: #F7EAD0; } .stone-top.stone-sack .sack-art { width: 62%; height: auto; margin-top: 4px; }
.stone.is-locked .stone-sack .sack-art { opacity: .45; }
.finish-glyph .sack-art { width: 62%; height: auto; }
.gu-glyph .sack-art { width: 60%; height: auto; }

/* ---------- picture tiles (Mentava) in a fixed square frame ---------- */
.pic-frame { display: block; flex: 0 0 auto; width: 100%; height: 100%; border-radius: 14px; overflow: hidden; background: #F3F4FB; }
.pic-frame img { display: block; width: 100%; height: 100%; object-fit: contain; }
.emoji-frame { display: grid; place-items: center; container-type: size; } .emoji-frame .em { font-size: 62cqmin; line-height: 1; }
.emoji-pair { display: flex; gap: 10px; justify-content: center; } .emoji-pair .pic-frame { width: 56px; height: 56px; }
.pic-frame.huge { width: 150px; height: 150px; border-radius: 22px; }
.opt-pic .pic-frame { width: 88px; height: 88px; }
.sack-card .pic-frame { width: 84%; height: 84%; border-radius: 10px; background: transparent; }
@media (orientation: landscape) and (max-height: 520px) { .pic-frame.huge { width: 96px; height: 96px; } .opt-pic .pic-frame { width: 64px; height: 64px; } }

/* ---------- Saying Words / Sounds: the revealed word is slid across ---------- */
.words-task, .sounds-task { position: relative; }
.wash { display: grid; margin-top: 10px; }
.wash > .emoji-pair { grid-area: 1 / 1; }
.emoji-pair.dim { opacity: .35; filter: saturate(.4); }
.emoji-pair.bright { transition: clip-path 70ms linear; }
.word-letters { display: block; width: 100%; }
.word-letters svg { display: block; width: 100%; height: auto; margin: 0 auto; overflow: visible; }
.merged-tile .blend-bar { width: 70%; height: 10px; }
@media (orientation: landscape) and (max-height: 520px) { .merged-tile { --cap: 40px; } .emoji-pair .pic-frame { width: 44px; height: 44px; } .sounds-stage { --cap: 64px; } .sounds-stage.revealed .pic-frame.huge { width: 80px; height: 80px; } .merged-tile .blend-bar { height: 8px; } }

/* ---------- the parent script: a compact bar that opens as a sheet over the stage ---------- */
.script-wrap { position: relative; height: 56px; }
.script-bar { display: grid; grid-template-columns: minmax(0, 1fr) 48px; gap: 6px; align-items: center; height: 56px; }
.script-toggle { display: grid; grid-template-columns: 36px minmax(0, 1fr) 28px; gap: 10px; align-items: center; height: 56px; min-width: 0; padding: 0 8px 0 10px; border: 0; border-radius: 18px; background: #ECEEF8; color: var(--ink); text-align: left; cursor: pointer; touch-action: manipulation; transition: transform var(--t-fast) var(--ease-out); }
.script-toggle:active { transform: scale(.98); }
/* a narrow phone gives the gist the icon's room, so the whole line shows */
@media (max-width: 400px) { .script-toggle { grid-template-columns: minmax(0, 1fr) 24px; gap: 6px; padding-left: 14px; } .script-toggle .script-ic { display: none; } }
.script-peek { display: grid; line-height: 1.2; min-width: 0; overflow: hidden; }
.script-first { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 600; }
.script-chev { color: var(--muted); display: grid; place-items: center; }
.script-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; flex-direction: column; max-height: 55dvh; background: #ECEEF8; color: var(--ink); border-radius: 22px 22px 0 0; box-shadow: 0 -10px 30px rgba(0,0,0,.3); }
.script-sheet[hidden] { display: none; }
/* an open sheet dims the stage a little (in landscape it opens beside the stage instead) */
.task-stage::after { content: ''; position: absolute; inset: 0; z-index: 20; background: rgba(30,33,64,.2); opacity: 0; pointer-events: none; transition: opacity var(--t-base); }
.task-stage.dimmed::after { opacity: 1; }
@media (orientation: landscape) and (max-height: 520px) { .task-stage.dimmed::after { opacity: 0; } }
.sheet-head { flex: 0 0 auto; display: grid; grid-template-columns: 36px minmax(0, 1fr) 48px 48px; gap: 8px; align-items: center; padding: 8px 4px 2px 12px; }
.sheet-close { color: var(--muted); }
.sheet-body { overflow-y: auto; padding: 4px 16px 16px; -webkit-overflow-scrolling: touch; }
.script-wrap.always { height: auto; }
.script-card.full { padding: 8px 8px 8px 10px; min-height: 0; overflow-y: auto; }
.script-card.full .script-text { font-size: 16px; line-height: 1.3; }
/* Always show full instructions: the stage gets its room first and the card scrolls. */
.task-screen.full-script .task-stage { flex: 1 0 300px; min-height: 300px; }
.task-screen.full-script .task-foot { flex: 0 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr) auto; }
.task-screen.full-script .script-wrap { min-height: 0; overflow: hidden; }
@media (orientation: landscape) and (max-height: 520px) {
  /* the script sits in the right-hand column, which has room: it opens in place there */
  .script-wrap { height: auto; min-height: 56px; }
  .script-wrap.is-open .script-bar { display: none; }
  /* the bar has no room for its icon and tag here: the gist takes the width and wraps */
  .script-bar { height: auto; min-height: 56px; }
  .script-toggle { height: auto; min-height: 56px; padding: 6px 8px 6px 14px; grid-template-columns: minmax(0, 1fr) 24px; gap: 6px; }
  .script-toggle .script-ic, .script-peek .script-tag { display: none; }
  .script-first { white-space: normal; overflow: visible; text-overflow: clip; }
  .script-sheet { position: static; border-radius: 20px; box-shadow: none; max-height: 55dvh; }
  .task-screen.full-script .task-stage { min-height: 0; flex: none; }
}
@media (prefers-reduced-motion: reduce) { .script-toggle { transition: none; } }

/* New Letter on a portrait phone: everything, the word tiles included, fits the stage without scrolling */
@media (orientation: portrait) and (max-height: 960px) {
  .new-letter .letter-card.big { height: 138px; margin-bottom: 10px; }
  .sound-card.lead { padding: 12px 14px; margin-bottom: 10px; }
  .sound-card.lead .sc-first { font-size: 22px; }
  .new-letter .slide-track { margin-bottom: 12px; }
}
@media (orientation: portrait) and (max-height: 820px) {
  /* Short portrait phones: the letter card and the sound card sit side by side, so tall letters get a roomy card and the
     picture row still fits without scrolling. The stage speaker button sits over the top right corner of the sound card. */
  .new-letter { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 0 10px; align-items: start; }
  .new-letter > .letter-card.big { grid-column: 1; grid-row: 1; width: 100%; height: 112px; margin: 0 0 10px; }
  .new-letter > .sound-card { grid-column: 2; grid-row: 1; grid-template-columns: 1fr; margin: 0 0 10px; padding: 10px 12px; }
  .new-letter .sound-card .sc-ic { display: none; }
  .new-letter .sound-card.lead .sc-first { font-size: 18px; padding-right: 52px; }
  .new-letter .sound-card.lead .sc-rules { font-size: 17px; padding-right: 52px; }
  .new-letter .sc-how { font-size: 16px; line-height: 1.3; margin-top: 2px; }
  .new-letter > .slide-track { grid-column: 1 / -1; grid-row: 2; margin-bottom: 10px; }
  .new-letter > .word-strip { grid-column: 1 / -1; grid-row: 3; padding-bottom: 4px; }
  .new-letter .word-tile { width: 100px; padding: 6px 6px 8px; }
  .new-letter .word-tile .pic { width: 80px; height: 80px; }
  .new-letter .word-tile .word { font-size: 18px; min-height: 24px; }
  .task-activity { padding-top: 12px; padding-bottom: 16px; }
}
@media (orientation: portrait) and (max-height: 740px) {
  .new-letter .word-tile { width: 88px; padding: 4px 4px 6px; }
  .new-letter .word-tile .pic { width: 64px; height: 64px; }
  .new-letter .word-tile .word { font-size: 16px; min-height: 20px; }
  .new-letter > .slide-track { margin-bottom: 8px; }
}

/* Quick Check with three picture cards on a narrow phone */
.opts.n3 .opt-card { min-width: 0; padding: 6px; }
.opts.n3 .opt-pic .pic-frame { width: 72px; height: 72px; }
.opts.n3 .opt-pic .word { font-size: 20px; }
.gu-reset { margin-bottom: 12px; }

/* ---------- welcome card (first run) and grown-up tips ---------- */
.first-card.welcome { max-width: min(560px, 100%); width: 100%; max-height: calc(100dvh - 40px); overflow-y: auto; text-align: left; gap: 12px; padding: 22px 22px 16px; justify-items: stretch; }
.first-card.welcome .adult-ic { justify-self: center; }
.wc-pages { display: grid; }
.wc-page { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity var(--t-base) var(--ease-out), visibility 0s linear var(--t-base); }
.wc-page.on { visibility: visible; opacity: 1; transition-delay: 0s; }
.wc-page h2 { font-size: 24px; line-height: 1.2; margin-bottom: 8px; text-align: center; }
.first-card.welcome .wc-page p { font-size: 18px; font-weight: 600; line-height: 1.4; margin-top: 8px; }
@media (max-width: 400px) { .first-card.welcome .wc-page p { font-size: 16px; line-height: 1.35; margin-top: 6px; } .first-card.welcome .wc-page h2 { font-size: 22px; } }
.wc-dots { display: flex; gap: 8px; justify-content: center; }
.wc-dot { width: 10px; height: 10px; border-radius: 50%; background: #D9DCEA; transition: transform var(--t-base) var(--ease-spring), background var(--t-base); }
.wc-dot.on { background: var(--violet); transform: scale(1.3); }
.wc-actions { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; align-items: center; }
.wc-actions.first { grid-template-columns: 1fr; justify-items: center; } .wc-actions.first .wc-back { display: none; } .wc-actions.first .wc-next { width: min(100%, 260px); }
.wc-next { min-height: 56px; }
.wc-back, .wc-skip { min-height: 48px; border: 0; background: none; font: inherit; font-size: 17px; font-weight: 800; color: var(--violet); cursor: pointer; touch-action: manipulation; border-radius: 14px; }
.wc-skip { justify-self: center; color: var(--muted); }
.script-sheet .grown-tip, .script-card .grown-tip { margin-top: 10px; padding: 10px 12px; border-radius: 14px; background: #FFF3CF; color: var(--ink); font-size: 16px; line-height: 1.35; font-weight: 600; }
.grown-tip strong { font-weight: 800; }
.gu-h3 { font-size: 18px; font-weight: 800; } .gu-para { font-size: 17px; line-height: 1.4; }
@media (max-height: 700px) {
  /* Short screens (a small phone, or a phone turned sideways): drop the icon, tighten up, and park Skip in the corner so the card never scrolls */
  .first-card.welcome { position: relative; padding: 14px 20px 12px; gap: 8px; }
  .first-card.welcome .adult-ic { display: none; }
  .wc-page h2 { font-size: 22px; margin-bottom: 4px; padding: 0 56px; }
  .first-card.welcome .wc-page p { font-size: 16px; line-height: 1.32; margin-top: 4px; }
  .wc-skip { position: absolute; top: 10px; right: 12px; z-index: 2; padding: 0 10px; }
  .wc-next { min-height: 52px; }
}

/* ---------- Pip, the baby conductor (js/art/pip.js) ---------- */
.pip { display: block; overflow: visible; }
/* Every idle animation ends after a few seconds (a screen left open must not keep the phone busy): about 15 s of
   breathing, three blinks, one glance around, two waves. Then Pip holds still. */
.pip .pip-fig { transform-origin: 60px 146px; animation: pip-breathe 2.6s ease-in-out 6 alternate; }
.pip .pip-eyes { transform-origin: 60px 63px; animation: pip-blink 4.7s ease-in-out 3; }
.pip .pip-look { animation: pip-look 9s ease-in-out 1; }
.pip.pose-wave .pip-arm-r { transform-origin: 78px 97px; animation: pip-wave 3.2s ease-in-out 2; }
.pip.pose-cheer .pip-hop { animation: pip-hop 760ms cubic-bezier(.3,.7,.4,1) 300ms backwards; }
.pip.pose-cheer .pip-cap { transform-origin: 30px 44px; animation: pip-tip 760ms ease-in-out 300ms backwards; }
@keyframes pip-breathe { from { transform: scale(1, 1); } to { transform: scale(1.012, 1.022); } }
@keyframes pip-blink { 0%, 90%, 96%, 100% { transform: scaleY(1); } 93% { transform: scaleY(.12); } }
@keyframes pip-look { 0%, 40%, 100% { transform: translateX(0); } 48%, 58% { transform: translateX(-1.6px); } 66%, 76% { transform: translateX(1.6px); } 84% { transform: translateX(0); } }
@keyframes pip-wave { 0%, 46%, 100% { transform: rotate(0deg); } 8% { transform: rotate(16deg); } 17% { transform: rotate(-8deg); } 26% { transform: rotate(16deg); } 35% { transform: rotate(-6deg); } }
@keyframes pip-hop { 0% { transform: translateY(0); } 35% { transform: translateY(-9px); } 62% { transform: translateY(0); } 76% { transform: translateY(-2px); } 100% { transform: translateY(0); } }
@keyframes pip-tip { 0%, 100% { transform: rotate(0deg); } 35% { transform: rotate(-12deg) translateY(-2px); } 70% { transform: rotate(3deg); } }
/* the welcome card: Pip waves at the top (in the corner on short screens) */
.wc-pip { justify-self: center; width: 76px; height: 95px; margin: -4px 0 -6px; }
.wc-pip .pip { width: 100%; height: 100%; }
/* the finish screen: Pip cheers beside the glyph */
.finish-pip { position: absolute; right: -70px; bottom: -18px; width: 84px; height: 105px; pointer-events: none; }
.finish-pip .pip { width: 100%; height: 100%; }
@media (max-height: 700px) {
  .wc-pip { position: absolute; left: 16px; top: 6px; width: 29px; height: 37px; margin: 0; z-index: 2; }
}
@media (orientation: landscape) {
  .finish-pip { right: auto; left: -66px; bottom: -14px; width: 62px; height: 78px; }
}

/* ---------- the 3D railway home (js/screens/home3d.js) ---------- */
.home3d { background: linear-gradient(to bottom, #BFE8FF 0%, #DDF2FF 30%, #FFF6E5 62%, #FFF6E5 100%); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.train-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.train-overlay { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.train-overlay > button { pointer-events: auto; }
.station-btn { position: absolute; left: 0; top: 0; transition: none; width: 64px; height: 64px; border-radius: 50%; border: 0; padding: 0; background: transparent; cursor: pointer; touch-action: none; will-change: transform; }
.station-btn:focus-visible { outline: 4px solid var(--violet); outline-offset: 2px; }
.station-btn:active { transform: none; }
.train-bubble { position: absolute; left: 0; top: 0; bottom: auto; transform: none; will-change: transform; }
.train-bubble::after { left: var(--tip, 50%); }
.train-bubble.below { top: 0; }
@media (orientation: landscape) {
  .train-bubble, .train-bubble.below { top: 0; bottom: auto; }
  .train-bubble::after { bottom: -7px; top: auto; }
  .train-bubble.below::after { bottom: auto; top: -7px; }
}

/* ---------- the games in the train world (js/art/train2d.js) ---------- */
.tw-sky { inset: 0; background: linear-gradient(180deg, #A9DEFB 0%, #CDEBFF 40%, #FFF3DE 82%); }
.tw-sun { left: 56%; top: 10px; } .tw-cloud.c1 { left: 24%; top: 20%; opacity: .85; } .tw-cloud.c2 { right: 8%; top: 36%; opacity: .75; }
.tw-hills { left: 0; right: 0; bottom: 70px; width: 100%; height: 150px; }
.tw-grass { left: 0; right: 0; bottom: 0; height: 76px; background: linear-gradient(#5ACB80, #45B56E); border-top: 4px solid #7ED89A; }
.tw-track { left: 0; right: 0; bottom: 16px; height: 16px; background:
  linear-gradient(#8A6E5A, #8A6E5A) 0 2px / 100% 4px no-repeat,
  linear-gradient(#8A6E5A, #8A6E5A) 0 10px / 100% 4px no-repeat,
  repeating-linear-gradient(90deg, #B8926A 0 10px, transparent 10px 26px); border-radius: 3px; }
/* Letter Hunt: balloons, the train and the station */
.hunt-scene .sky-letter { overflow: visible; }
.hunt-scene .sky-letter .face { background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.75) 0 12%, transparent 13%), var(--bal, #C4E8FF); border-radius: 50% 50% 47% 47% / 52% 52% 48% 48%; box-shadow: inset -5px -6px 0 rgba(0,0,0,.06); }
.hunt-scene .sky-letter .face::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 8px; margin-left: -5px; background: var(--bal, #C4E8FF); clip-path: polygon(50% 0, 100% 100%, 0 100%); filter: brightness(.92); }
.hunt-scene .sky-letter .string { position: absolute; left: 50%; top: calc(100% + 2px); width: 2px; height: 22px; margin-left: -1px; background: rgba(110,90,80,.45); border-radius: 1px; pointer-events: none; transform-origin: 50% 0; }
@media (prefers-reduced-motion: no-preference) { .hunt-scene .sky-letter.dragging .face { box-shadow: inset -5px -6px 0 rgba(0,0,0,.06), 0 10px 18px rgba(30,33,64,.24); } }
.train-wrap { left: 6px; bottom: 12px; z-index: 3; transition: transform 700ms cubic-bezier(.45,.05,.3,1); will-change: transform; pointer-events: none; }
.train-wrap .engine-art { display: block; width: 100%; height: auto; overflow: visible; }
.engine-body { transform-box: fill-box; }
.pip-seat { transform-box: fill-box; transform-origin: 50% 100%; }
.hunt-goal .station-art { position: absolute; left: 0; top: 0; display: block; width: 100%; height: auto; overflow: visible; z-index: 1; }
.hunt-goal .bunting { opacity: 0; }
.hunt-goal.arrived .bunting, .hunt-goal.done .bunting { opacity: 1; }
.steam-puff { position: absolute; z-index: 4; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #fff 0 55%, rgba(255,255,255,.7) 75%, rgba(255,255,255,0) 100%); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .train-wrap { transition: none; } }
/* the Sound Station: the Loading Dock */
.dock-platform-top { left: 0; right: 0; z-index: 2; pointer-events: none; background:
  linear-gradient(#F3DDB4, #F3DDB4) 0 0 / 100% 9px no-repeat,
  linear-gradient(#DDBB84, #D2AE76) 0 9px / 100% 20px no-repeat,
  linear-gradient(rgba(120,80,40,.25), rgba(120,80,40,0)) 0 29px / 100% 10px no-repeat,
  repeating-linear-gradient(90deg, transparent 0 22px, #C9A26E 22px 34px, transparent 34px 96px) 0 29px / 100% 100% no-repeat;
  border-radius: 6px 6px 0 0; }
.wagon { z-index: 3; transform-origin: 50% 100%; will-change: transform; pointer-events: none; }
.wagon .wagon-art { display: block; width: 100%; height: 100%; overflow: visible; }
.wagon .wagon-lid { opacity: 0; } .wagon .wagon-lid.shut { opacity: 1; }
.wagon .sack-front { position: absolute; left: 34%; top: 35%; width: 32%; height: 36%; display: grid; place-items: center; }
.wagon .sack-front .glyph { display: block; width: auto; height: 100%; max-width: 100%; }
.dock-train { position: absolute; z-index: 3; visibility: hidden; pointer-events: none; will-change: transform; }
.dock-train.here { visibility: visible; }
.dock-train .engine-art { display: block; width: 100%; height: auto; overflow: visible; }
.sack-card.crate { border: 0; border-radius: 12px; background: #C99A5B; box-shadow: inset 0 0 0 5px #B4864C, 0 5px 0 #8F6638, 0 8px 14px rgba(60,40,20,.22); }
.sack-card.crate::before { content: ''; position: absolute; inset: 9px; border-radius: 8px; background: #FFF8EC; box-shadow: inset 0 2px 0 rgba(60,40,20,.12); }
.sack-card.crate > * { position: relative; }
.sack-card.crate.lifted { box-shadow: inset 0 0 0 5px #B4864C, 0 5px 0 #8F6638, 0 16px 26px rgba(60,40,20,.3); }
.stone-top.stone-sack .crate-art, .stone-top.stone-sack .book-art { width: 56%; height: auto; } .stone.is-locked .stone-sack .crate-art, .stone.is-locked .stone-sack .book-art { opacity: .45; }
.finish-glyph .crate-art, .finish-glyph .book-art { width: 58%; height: auto; }
.gu-glyph .crate-art, .gu-glyph .book-art { width: 64%; height: auto; }
.sack-card.crate .pic-frame { width: 72%; height: 72%; }
.hunt-scene .sky { z-index: 4; } /* balloons stay above the train, so every letter can always be touched */
@media (max-height: 700px) and (orientation: portrait) { .wc-pip { width: 42px; height: 53px; left: 14px; top: 8px; } }
.pip.still, .pip.still * { animation: none !important; }

/* ---------- the book reader (js/screens/book.js): a picture book of CSS 3D pages, with Andika for the grown-up's text ---------- */
@font-face { font-family: 'Andika'; font-weight: 400; font-style: normal; font-display: swap; src: url(../assets/fonts/andika-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Andika'; font-weight: 700; font-style: normal; font-display: swap; src: url(../assets/fonts/andika-latin-700-normal.woff2) format('woff2'); }
.gu-name { min-height: 48px; border-radius: 14px; border: 2px solid #D9DCEE; padding: 0 12px; font: inherit; font-size: 18px; background: #fff; color: var(--ink); }
.task-stage:has(.book-stage) > .speak-btn { display: none; } /* books are silent: the grown-up reads */
.book-stage { --paper: #FBF3E2; --paper-dark: #EFE2C6; --ink-warm: #3B2F2A; --cloth: #C8423F; --cloth-dark: #8E2B2A;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .28 0 0 0 0 .15 0 0 0 1.2 -.1'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E");
  position: relative; flex: 1; min-height: 0; box-sizing: border-box; display: flex; flex-direction: column; padding: 12px 14px 14px; overflow: hidden; }
.book { position: relative; flex: 1; min-height: 0; display: flex; perspective: 1800px; outline: none; }
.book-block { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); margin: 0 9px 0 2px; touch-action: none; isolation: isolate; perspective: 1800px; }
.book[data-spread="1"] .book-block { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
/* the cloth board behind the pages and the stacked page edges on the right: static, never animated */
.book-block::before { content: ''; position: absolute; inset: -5px -9px -5px -4px; border-radius: 8px 12px 12px 8px; background: var(--cloth-dark); box-shadow: 0 4px 10px rgba(60,30,20,.28); z-index: -1; }
.book-block::after { content: ''; position: absolute; top: 4px; bottom: 4px; right: -7px; width: 7px; border-radius: 0 5px 5px 0; background: repeating-linear-gradient(90deg, #FFF8EA 0 1px, #E3D2B0 1px 2px); z-index: -1; }
.book-sheet { position: relative; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 30px 22px; box-sizing: border-box;
  background-color: var(--paper); background-image: var(--grain), linear-gradient(90deg, rgba(70,45,20,.20), rgba(70,45,20,0) 26px);
  border-radius: 3px 8px 8px 3px; color: var(--ink-warm); font-family: 'Andika', 'Nunito', system-ui, sans-serif; }
.book-sheet.is-left { background-image: var(--grain), linear-gradient(270deg, rgba(70,45,20,.22), rgba(70,45,20,0) 30px); border-radius: 8px 3px 3px 8px; padding: 14px 22px 30px 16px; }
.book-folio { position: absolute; left: 0; right: 0; bottom: 7px; text-align: center; font-size: 14px; color: #9A8466; pointer-events: none; }
.book-read { flex: 0 0 auto; display: grid; gap: 6px; background: none; box-shadow: none; padding: 0; font-size: clamp(19px, 4.8vw, 22px); line-height: 1.45; font-weight: 400; }
.book-read p { margin: 0; }
.book-title { font-size: 15px; font-weight: 700; letter-spacing: .02em; color: #A8573F; }
.book-says { font-size: 19px; } .book-says b { font-size: 24px; letter-spacing: .04em; color: #C93A40; }
.book-after { color: #6B5A4C; font-weight: 700; }
.book-art { position: relative; flex: 1 1 0; min-height: var(--art-min, 64px); display: flex; align-items: center; justify-content: center; gap: 16px; border-radius: 6px; overflow: hidden; border: 5px solid #FFF8EA; --art-min: 64px; outline: 1.5px solid rgba(59,47,42,.55); outline-offset: 0; background: linear-gradient(180deg, #CDEBFF 0%, #FFF3DE 70%, #A6E3B4 70.5%, #78D193 100%); }
.book-img { width: 100%; height: 100%; object-fit: cover; }
.book-part, .book-tap { position: relative; display: block; flex: 0 0 auto; border: 0; padding: 0; background: none; font: inherit; color: inherit; touch-action: manipulation; }
.book-tap { min-width: 64px; min-height: 64px; cursor: pointer; }
.book-train { width: min(64vw, 250px); } .book-train .engine-art, .book-pip .pip { display: block; width: 100%; height: auto; overflow: visible; }
.book-pip { height: min(100%, 190px); } .book-pip .pip { height: 100%; width: auto; }
.book-puffs { position: absolute; inset: 0; pointer-events: none; }
.book-emoji { display: block; font-size: clamp(34px, min(17vmin, 64cqh), 120px); line-height: 1; }
.book-emojis { display: flex; gap: 8px; align-items: center; }
.book-child { flex: 0 0 auto; max-width: 100%; box-sizing: border-box; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 22px; padding: 10px 14px; border-radius: 14px; background: #FFF1C2; box-shadow: none; --cap: 78px; }
.book-child .glyph-row { width: auto; padding: 4px 2px; }
.book-bar { align-self: center; flex: 0 0 auto; margin-bottom: 4px; }
.book-nav { position: relative; z-index: 7; flex: 0 0 auto; display: flex; gap: 12px; justify-content: space-between; margin-top: auto; }
.book-nav .btn { min-height: 64px; min-width: 0; padding: 0 14px; font-size: 20px; white-space: nowrap; }
.book-nav .book-back { flex: 0 0 auto; min-width: 88px; }
.book-nav .book-next { margin-left: auto; flex: 1 1 auto; max-width: 190px; }
@media (max-height: 720px) and (orientation: portrait) { .book-nav .btn { min-height: 56px; } .book-sheet { gap: 8px; padding-bottom: 26px; } }
.book-nav .btn[disabled] { opacity: .35; }
.book-drag { flex-direction: column; align-items: stretch; justify-content: center; padding: 0 14px; }
.book-track { width: 100%; background: #E9ECF8; margin-bottom: 28px; }
.slide-track.book-track .st-handle { background: transparent; box-shadow: none; width: 96px; }
.st-glyph.has-art .engine-art { display: block; width: 116px; max-width: none; height: auto; overflow: visible; }
.book-tiles { flex: 1 1 0; min-height: 0; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 12px; }
.book-tile { flex: 0 0 auto; min-width: 104px; min-height: 84px; display: grid; place-items: center; padding: 8px 14px; border: 0; border-radius: 16px; background: #fff; box-shadow: 0 2px 0 rgba(59,47,42,.18), inset 0 0 0 2px rgba(59,47,42,.12); color: var(--ink); touch-action: manipulation; --tile-cap: 56px; }
.book-tile .glyph-row { width: auto; padding: 0; }
.book-tile.lit { background: #FFE9A8; box-shadow: inset 0 0 0 4px #FFD166, 0 2px 0 rgba(59,47,42,.18); }
.book-tiles.is-many { gap: 8px; }
.book-tiles.is-many .book-tile { min-width: 84px; min-height: 64px; padding: 6px 10px; --tile-cap: 40px; }
/* the turning leaf (js/components/page-turn.js) */
.book-leaf { position: absolute; top: 0; bottom: 0; z-index: 10; transform-style: preserve-3d; will-change: transform; pointer-events: none; }
.book-leaf.hinge-left { transform-origin: left center; } .book-leaf.hinge-right { transform-origin: right center; }
.leaf-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.leaf-back { transform: rotateY(180deg); }
.leaf-shade { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(90deg, rgba(40,25,10,0) 40%, rgba(40,25,10,.28)); }
.book-under { position: absolute; top: 0; bottom: 0; z-index: 9; pointer-events: none; }
.book-cast { position: absolute; top: 0; bottom: 0; z-index: 9; pointer-events: none; opacity: 0; background: linear-gradient(90deg, rgba(40,25,10,.30), rgba(40,25,10,0) 45%); }
.book-cover { position: absolute; inset: -5px -9px -5px -4px; z-index: 20; border: 0; padding: 0; transform-origin: left center; transform-style: preserve-3d; background: none; cursor: pointer; touch-action: none; font: inherit; }
.cover-front, .cover-back { position: absolute; inset: 0; border-radius: 8px 12px 12px 8px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cover-front { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; align-content: center; gap: 14px; padding: 24px 24px 24px 34px; color: #FFF3DA; box-shadow: inset 0 0 0 5px rgba(255,243,218,.16), inset 0 0 0 7px rgba(0,0,0,.08);
  background: var(--grain), repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 2px, rgba(0,0,0,.04) 2px 4px), linear-gradient(90deg, var(--cloth-dark) 0 14px, var(--cloth) 14px); }
.cover-title { font-family: 'Andika', 'Nunito', sans-serif; font-weight: 700; font-size: clamp(30px, 8vw, 44px); line-height: 1.15; text-align: center; text-shadow: 0 2px 0 rgba(0,0,0,.18); }
.cover-pip { display: flex; justify-content: center; align-items: flex-end; gap: 4px; width: 100%; max-width: 340px; height: clamp(130px, 24vh, 220px); }
.cover-pip > * { flex: 1 1 0; min-width: 0; height: 100%; }
.cover-pip .pip, .cover-pip .kid { display: block; width: 100%; height: 100%; }
.cover-hint { font-family: 'Andika', 'Nunito', sans-serif; font-weight: 700; font-size: 18px; padding: 8px 20px; border-radius: 999px; background: rgba(255,243,218,.18); }
.cover-back { transform: rotateY(180deg); background: repeating-linear-gradient(135deg, #F6E6C6 0 10px, #EAD3A8 10px 20px); }
.book-cover[hidden] { display: none; }
.book-corner { position: absolute; bottom: 0; width: 46px; height: 46px; z-index: 6; border: 0; padding: 0; background: none; touch-action: manipulation; }
.book-corner.next { right: 0; } .book-corner.prev { left: 0; }
.book-corner[hidden] { display: none; }
.book-corner.next::before { content: ''; position: absolute; right: 0; bottom: 0; width: 26px; height: 26px; border-radius: 0 0 8px 0;
  background: linear-gradient(315deg, transparent 50%, #F3E4C4 50%); box-shadow: -1px -1px 2px rgba(70,45,20,.15); transform-origin: 100% 100%; animation: book-corner 4s ease-in-out infinite; }
@keyframes book-corner { 0%, 78%, 100% { transform: scale(1); } 86% { transform: scale(1.4); } }
.book-sheet .book-tap { animation: book-bob 3.2s ease-in-out infinite; }
@keyframes book-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.book-smoke { position: absolute; width: 22px; height: 22px; border-radius: 50%; background: #fff; opacity: 0; pointer-events: none; animation: book-smoke 3s ease-out infinite; }
@keyframes book-smoke { 0% { transform: translate(0, 0) scale(.5); opacity: 0; } 20% { opacity: .8; } 100% { transform: translate(-16px, -34px) scale(1.5); opacity: 0; } }
/* in the book, Pip and the friend only blink while idle */
.book-sheet .pip .pip-fig, .book-sheet .pip .pip-look, .cover-pip .pip .pip-fig, .cover-pip .pip .pip-look { animation: none; }
.book-sheet .pip .pip-eyes, .cover-pip .pip .pip-eyes { animation: pip-blink 4.7s ease-in-out infinite; }
.book.is-paused, .book.is-paused * { animation-play-state: paused !important; }
.book-stage.has-child .book-art { min-height: 92px; }
.book-art { container-type: size; }
.book-train { max-width: 100%; } .book-train .engine-art { max-height: 100cqh; }
@media (prefers-reduced-motion: reduce) { .book, .book * { animation: none !important; transition: none !important; } }
/* a spread: text on the left page, picture and the child's word on the right */
.book[data-spread="1"] .book-sheet { padding-top: 12px; padding-bottom: 28px; gap: 8px; }
.book[data-spread="1"] .book-read { font-size: clamp(18px, 2.7vw, 22px); }
.book[data-spread="1"] .book-child { --cap: 56px; padding: 6px 10px; }
.book[data-spread="1"] .book-bar { display: none; }
.book[data-spread="1"] .book-train { width: min(30vw, 230px); }
.book[data-spread="1"] .book-nav .btn { min-height: 52px; min-width: 96px; font-size: 18px; } .book[data-spread="1"] .book-nav .book-next { min-width: 150px; }
.book[data-spread="1"] .book-emoji { font-size: clamp(52px, 17vh, 90px); }
.book[data-spread="1"] .book-title { font-size: 14px; }
.book[data-spread="1"] .book-tile { min-height: 64px; --tile-cap: 44px; }


/* ---------- the child's figure (js/art/kid.js) and the character creator (js/components/character-picker.js) ---------- */
.kid { display: block; overflow: visible; }
.kid .kid-eyes { transform-origin: 60px 60px; animation: pip-blink 4.7s ease-in-out 3; }
.kid.pose-wave .kid-arm-r { transform-origin: 80px 96px; animation: pip-wave 3.2s ease-in-out 2; }
.kid.pose-cheer .kid-hop { animation: pip-hop 760ms cubic-bezier(.3,.7,.4,1) 300ms backwards; }
.kid.still, .kid.still * { animation: none !important; }
.book-sheet .kid .kid-eyes, .cover-kid .kid .kid-eyes { animation: pip-blink 4.7s ease-in-out infinite; }
.book-friend .kid { height: min(100%, 190px); width: auto; }
.book-friend { height: min(100%, 190px); }
.stone-kid { position: absolute; width: 58%; left: -52%; bottom: 8%; pointer-events: none; }
.stone-kid .kid { width: 100%; height: auto; }
.finish-kid { position: absolute; left: -70px; bottom: -18px; width: 84px; height: 105px; pointer-events: none; }
.finish-kid .kid { width: 100%; height: 100%; }
@media (orientation: landscape) and (max-height: 520px) { .finish-kid { left: auto; right: -66px; bottom: -14px; width: 62px; height: 78px; } }
.first-card.meet { max-width: min(520px, 100%); width: 100%; max-height: calc(100dvh - 32px); overflow-y: auto; padding: 14px 8px 10px; gap: 8px; justify-items: stretch; text-align: left; }
.first-card.meet h2 { margin: 0; text-align: center; font-size: 24px; }
.cp { display: grid; gap: 6px; justify-items: stretch; grid-template-columns: 84px minmax(0, 1fr); grid-template-areas: "ttl ttl" "pv fld" "skin skin" "hair hair" "col col" "out out" "act act"; align-items: center; }
.cp > h2 { grid-area: ttl; } .cp-grownups { row-gap: 8px; } .cp-grownups .gu-actions { grid-column: 1 / -1; }
.cp-skin { grid-area: skin; } .cp-hair { grid-area: hair; } .cp-hair-color { grid-area: col; } .cp-outfit { grid-area: out; } .cp-field { grid-area: fld; } .cp-actions { grid-area: act; } .cp-save-row { grid-column: 1 / -1; }
.cp-row { min-width: 0; }
.cp-preview { grid-area: pv; justify-self: center; width: 80px; height: 100px; }
.cp-preview .kid { width: 100%; height: 100%; }
.cp-field { gap: 4px; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.cp-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 3px; row-gap: 4px; }
.cp-field input { width: 100%; min-width: 0; box-sizing: border-box; }
.cp-label { flex: 0 0 100%; font-size: 14px; line-height: 1.1; font-weight: 800; color: #5A5F80; }
.cp-opt { flex: 0 0 56px; width: 56px; aspect-ratio: 1; height: auto; padding: 0; display: grid; place-items: center; border: 3px solid transparent; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #D9DCEE; touch-action: manipulation; overflow: hidden; }
.cp-scroll { flex: 1 1 100%; min-width: 0; display: flex; justify-content: space-between; gap: 3px; overflow-x: auto; padding: 5px 6px 6px; margin: -5px -6px -6px; scroll-snap-type: x proximity; scroll-padding-left: 6px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; overscroll-behavior-x: contain; }
.cp-scroll .cp-opt { flex: 0 0 56px; width: 56px; height: 56px; max-width: none; scroll-snap-align: start; }
.cp-opt[aria-pressed="true"] { border-color: #5B4BD6; box-shadow: 0 0 0 2px #5B4BD6; }
.cp-swatch { display: block; width: 36px; height: 36px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(0,0,0,.14); }
.cp-opt .kid { width: 100%; height: 100%; }
.cp-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cp-later { min-height: 56px; padding: 0 18px; border: 0; background: none; font: inherit; font-weight: 800; font-size: 18px; color: #5A5F80; touch-action: manipulation; }
.cp-done { min-height: 60px; min-width: 190px; font-size: 22px; }
@media (orientation: landscape) and (max-height: 520px) {
  .first-card.meet { max-width: min(760px, 100%); padding: 14px 16px 10px; }
  .first-card.meet h2 { display: none; }
  .first-card.meet .cp { grid-template-columns: 150px minmax(0, 1fr); column-gap: 16px; row-gap: 6px; grid-template-areas: "pv skin" "pv hair" "fld col" "act out"; align-items: center; }
  .cp-preview { width: 110px; height: 138px; justify-self: center; }
  .cp-field .gu-name, .cp-field input { min-height: 44px; }
  .cp-field > span { font-size: 12px; }
  .cp-actions { flex-direction: column-reverse; align-items: stretch; gap: 0; align-self: end; }
  .cp-scroll { justify-content: flex-start; gap: 6px; }
  .cp-row { flex-wrap: nowrap; justify-content: flex-start; column-gap: 6px; } .cp-label { flex: 0 0 74px; }
  .cp-done { min-width: 0; font-size: 18px; white-space: nowrap; padding: 0 8px; }
}

/* ---------- Smooth Ride (js/screens/ride.js): no transitions on the engine, the puffs or the needle ---------- */
.stone-top.stone-sack .gauge-art { width: 60%; height: auto; } .stone.is-locked .stone-sack .gauge-art { opacity: .45; }
.finish-glyph .gauge-art { width: 62%; height: auto; } .gu-glyph .gauge-art { width: 68%; height: auto; }
.gauge-needle { transform: rotate(var(--needle, -62deg)); }
.ride-scene { touch-action: none; }
.ride-train { position: absolute; left: 6px; bottom: 12px; z-index: 3; pointer-events: none; will-change: transform; }
.ride-train .engine-art { display: block; width: 100%; height: auto; overflow: visible; }
.ride-lamp { position: absolute; left: calc(137 / 150 * 100%); top: calc(50 / 110 * 100% * .93); width: 54px; height: 54px; margin: -27px 0 0 -4px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,226,140,.95), rgba(255,226,140,0)); opacity: 0; pointer-events: none; }
.ride-train.listening .ride-lamp { opacity: 1; }
.ride-puffs { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.ride-puffs .steam-puff { z-index: auto; }
.ride-goal { z-index: 1; }
.ride-gauge { left: 10px; top: 10px; width: 96px; height: 96px; z-index: 5; pointer-events: none; }
.ride-gauge .gauge-art { display: block; width: 100%; height: 100%; }
.ride-word { left: 0; right: 0; top: 118px; z-index: 2; display: grid; justify-items: center; gap: 8px; pointer-events: none; }
.ride-word .glyph-row { width: auto; padding: 4px 8px; }
.ride-word .blend-bar { width: min(70%, 260px); }
.ride-controls { left: 0; right: 0; bottom: 124px; z-index: 5; display: grid; justify-items: center; gap: 8px; pointer-events: none; }
.ride-status { min-height: 24px; margin: 0; font-size: 20px; font-weight: 800; color: var(--ink); text-shadow: 0 1px 0 rgba(255,255,255,.7); }
.ride-buttons { display: flex; gap: 14px; align-items: center; justify-content: center; pointer-events: auto; }
.ride-go { width: 92px; height: 92px; border: 0; border-radius: 50%; background: #FFD166; color: var(--ink); font-family: inherit; font-weight: 800; font-size: 28px; line-height: 1; box-shadow: inset 0 -6px 0 rgba(0,0,0,.12), 0 6px 0 #C99A3A, 0 10px 16px rgba(60,40,20,.22); touch-action: manipulation; cursor: pointer; }
.ride-go:active:not(:disabled) { transform: translateY(3px); box-shadow: inset 0 -6px 0 rgba(0,0,0,.12), 0 3px 0 #C99A3A; }
.ride-go:disabled { opacity: .55; cursor: default; }
.ride-smooth { min-height: 64px; padding: 0 22px; border: 0; border-radius: 999px; background: #fff; color: var(--ink); font-family: inherit; font-weight: 800; font-size: 20px; line-height: 1; box-shadow: 0 5px 0 rgba(30,33,64,.18), 0 8px 14px rgba(60,40,20,.2); touch-action: manipulation; cursor: pointer; }
.ride-smooth:disabled { opacity: .55; cursor: default; }
@media (orientation: landscape) and (max-height: 520px) {
  .ride-word { top: 12px; }
  .ride-gauge { width: 80px; height: 80px; }
  .ride-controls { bottom: 112px; gap: 4px; } .ride-go { width: 80px; height: 80px; font-size: 24px; }
}
@media (orientation: landscape) and (max-height: 380px) { .ride-controls { bottom: 104px; } .ride-go { width: 72px; height: 72px; } .ride-gauge { width: 64px; height: 64px; } .ride-status { font-size: 17px; min-height: 20px; } }

/* ---------- Smooth Ride: the first-visit card for the grown-up ---------- */
.ride-game { position: relative; }
.ride-intro { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; padding: 14px; background: rgba(30,33,64,.45); }
.ride-intro-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); width: min(100%, 460px); max-height: 100%; overflow-y: auto; padding: 14px 16px 12px; display: grid; gap: 8px; }
.ride-intro-card h2 { margin: 0; font-size: 24px; text-align: center; }
.ride-intro-card p { margin: 0; font-size: 16.5px; font-weight: 600; line-height: 1.32; }
.ride-intro-btns { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-top: 4px; }
.ride-intro-btns .btn { min-height: 56px; font-size: 20px; }
.ride-intro-go { min-width: 150px; }
.ride-intro-later { background: none; border: 0; box-shadow: none; color: #5A5F80; padding: 0 16px; }
@media (orientation: landscape) and (max-height: 520px) { .ride-intro-card { padding: 12px 16px; gap: 6px; } .ride-intro-card h2 { font-size: 22px; } .ride-intro-card p { font-size: 16px; line-height: 1.3; } }

/* ---------- the grown-up page before a book (js/screens/book.js) ---------- */
.book-stage > .book-intro { z-index: 40; border-radius: 0; }
.book-intro-list { margin: 0; padding: 0 0 0 20px; display: grid; gap: 7px; font-size: 16.5px; font-weight: 600; line-height: 1.32; }
.book-intro-go { flex: 1 1 auto; }
.book-info { position: absolute; top: 18px; right: 20px; z-index: 25; width: 48px; height: 48px; border-radius: 50%; border: 2px solid rgba(255,243,218,.7); background: rgba(255,243,218,.2); color: #FFF3DA; font-family: 'Andika', Georgia, serif; font-style: italic; font-weight: 700; font-size: 26px; line-height: 1; padding: 0; touch-action: manipulation; cursor: pointer; }
.book-info[hidden] { display: none; }
@media (orientation: landscape) and (max-height: 520px) { .book-intro-list { font-size: 15px; gap: 4px; line-height: 1.25; } }

/* the figure riding to the next stone on the 2D path */
.seq-kid { position: absolute; width: 60px; height: 76px; z-index: 6; pointer-events: none; will-change: transform; }
.seq-kid .kid { width: 100%; height: 100%; }

/* ---------- the tap games (js/screens/tasks/signals.js, wagons.js, board.js): the grown-up's prompt and the bell ---------- */
.say-prompt { position: absolute; top: 10px; left: 12px; right: 76px; width: fit-content; max-width: calc(100% - 88px); margin: 0 auto; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 8px 14px 9px; border-radius: 20px; background: #FFF8EC; color: var(--ink, #1E2140); font-size: 19px; font-weight: 800; line-height: 1.15; box-shadow: 0 3px 0 #D9C8A4, 0 6px 12px rgba(60,40,20,.18); pointer-events: none; }
.say-prompt[hidden] { display: none; }
.say-who { flex: 0 0 auto; padding: 3px 9px; border-radius: 10px; background: #6C5CE7; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .02em; }
.say-hear { position: absolute; top: 10px; left: 12px; z-index: 3; width: 72px; height: 72px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: #FFD166; color: #2B2D5C; box-shadow: 0 4px 0 #E5A73A, 0 8px 14px rgba(60,40,20,.2); cursor: pointer; touch-action: manipulation; }
.say-hear:active { transform: translateY(2px); box-shadow: 0 2px 0 #E5A73A; }
.signals-scene .say-prompt { left: 96px; max-width: calc(100% - 172px); margin: 0; }
/* Green Light: railway signal posts beside the track */
.signal-row { left: 0; right: 0; bottom: var(--sb, 108px); z-index: 2; display: flex; justify-content: center; align-items: flex-end; gap: 8px; padding: 0 16px; }
.signal { position: relative; flex: 0 0 auto; width: var(--sw, 79px); min-width: 72px; aspect-ratio: 100 / 170; padding: 0; border: 0; background: none; cursor: pointer; touch-action: manipulation; }
.signal .signal-art { display: block; width: 100%; height: 100%; overflow: visible; }
.signal .lamp-go { transition: opacity 200ms ease; }
.signal.go .lamp-go { opacity: 1; }
.signal-plate { position: absolute; left: 50%; top: 30.6%; width: 56%; aspect-ratio: 1; transform: translate(-50%, -50%); display: grid; place-items: center; pointer-events: none; }
.signal-plate .glyph { width: 88%; height: auto; } .signal-plate .glyph path { stroke-width: 13; }
.signal-plate .font-letter { font-size: calc(var(--sw, 79px) * .5); }
.signals-scene .train-wrap { bottom: 12px; }
@media (prefers-reduced-motion: reduce) { .signal .lamp-go { transition: none; } }
/* Wagon Parade: toy wagons on a siding, each with a wooden crate that carries the letter */
.wagons-scene .say-prompt { left: 108px; max-width: calc(100% - 184px); margin: 0; }
.wagons-scene .say-hear { top: 96px; left: 12px; bottom: auto; right: auto; width: 56px; height: 56px; } /* in the sky under the find card: the bottom track belongs to the train */
.wagons-scene .train-wrap { left: auto; right: 6px; bottom: 12px; display: flex; align-items: flex-end; }
.coupled { display: flex; flex-direction: row-reverse; align-items: flex-end; gap: 4px; margin-right: -2px; } /* first coupled wagon sits next to the engine */
.coupled-wagon { position: relative; flex: 0 0 auto; width: 62px; height: 62px; margin-bottom: 1px; will-change: opacity; }
.coupled-wagon.pending { opacity: 0; }
.coupled-wagon::after { content: ''; position: absolute; right: -5px; bottom: 11px; width: 7px; height: 3px; border-radius: 2px; background: #2B2D5C; }
.coupled-wagon .wagon-art { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; overflow: visible; }
.coupled-wagon .wagon-lid { display: none; }
.coupled-wagon .wagon-panel-bg { fill: rgba(0,0,0,.14); }
.coupled-wagon .crate { position: absolute; left: 50%; top: 1px; width: 28px; height: 28px; margin-left: -14px; display: grid; place-items: center; box-sizing: border-box; border-radius: 4px; background: #FFF8EC; border: 2px solid #C99A5B; box-shadow: inset 0 0 0 1px #E8D3AE, 0 1px 0 #A87B4F; pointer-events: none; }
.coupled-wagon .crate .glyph { height: 19px; width: auto; } .coupled-wagon .crate .glyph path { stroke-width: 13; }
.coupled-wagon .crate .font-letter { font-size: 21px; }
.wagons-scene .find-card { top: 10px; }
.parade-rail { left: 0; right: 0; bottom: 112px; height: 16px; z-index: 1; background:
  linear-gradient(#8A6E5A, #8A6E5A) 0 2px / 100% 4px no-repeat,
  linear-gradient(#8A6E5A, #8A6E5A) 0 10px / 100% 4px no-repeat,
  repeating-linear-gradient(90deg, #B8926A 0 10px, transparent 10px 26px); border-radius: 3px; }
.parade { left: 0; right: 0; bottom: 119px; height: 104px; z-index: 2; }
.parade .pw { position: absolute; left: 0; bottom: 0; width: 104px; height: 104px; will-change: transform; }
.parade .pw::after { content: ''; position: absolute; left: -16px; bottom: 19px; width: 18px; height: 5px; border-radius: 3px; background: #2B2D5C; pointer-events: none; }
.parade .pw.left::after { display: none; } /* a wagon that has left takes its coupler bar with it */
.wagons { position: relative; }
.star-fly { position: absolute; width: 30px; height: 30px; z-index: 30; pointer-events: none; }
.parade-wagon { position: absolute; inset: 0; padding: 0; border: 0; background: none; cursor: pointer; touch-action: manipulation; display: block; }
.parade-wagon .wagon-art { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; overflow: visible; }
.parade-wagon .wagon-lid { display: none; }
.parade-wagon .wagon-panel-bg { fill: rgba(0,0,0,.14); }
.parade-wagon .crate { position: absolute; left: 50%; top: 2px; width: 46px; height: 46px; margin-left: -23px; display: grid; place-items: center; box-sizing: border-box; border-radius: 7px; background: #FFF8EC; border: 3px solid #C99A5B; box-shadow: inset 0 0 0 2px #E8D3AE, 0 2px 0 #A87B4F; pointer-events: none; }
.parade-wagon .crate .glyph { height: 32px; width: auto; } .parade-wagon .crate .glyph path { stroke-width: 13; }
.parade-wagon .crate .font-letter { font-size: 34px; }
.parade .pw .no-x { position: absolute; left: 50%; top: 14px; width: 40px; height: 40px; margin-left: -20px; pointer-events: none; opacity: 0; z-index: 2; }
.parade.still { display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-end; gap: 6px 6px; padding: 0 12px; bottom: 126px; height: auto; }
.parade.still .pw { position: relative; width: 72px; height: 72px; }
.parade.still .pw::after { display: none; }
.parade.still .parade-wagon .crate { width: 32px; height: 32px; margin-left: -16px; border-width: 2px; }
.parade.still .parade-wagon .crate .glyph { height: 22px; } .parade.still .parade-wagon .crate .font-letter { font-size: 24px; }
.wagons-scene:has(.parade.still) .parade-rail { display: none; }
/* Station Board: a split-flap board on the station wall, a platform edge and the engine on its track */
.board-scene .say-prompt { left: 12px; right: 76px; margin: 0; max-width: calc(100% - 88px); }
.board-scene .say-hear { top: auto; left: auto; bottom: 14px; right: 12px; }
.station-wall { left: 0; right: 0; top: 0; bottom: 112px; z-index: 0; background:
  linear-gradient(rgba(60,30,20,.16), rgba(60,30,20,0) 14%),
  repeating-linear-gradient(0deg, rgba(60,30,20,.12) 0 2px, transparent 2px 24px),
  repeating-linear-gradient(90deg, rgba(60,30,20,.12) 0 2px, transparent 2px 56px),
  #D98A6C; }
.wall-clock { position: absolute; right: 12px; bottom: 14px; width: 44px; height: 44px; border-radius: 50%; background: #FFF8EC; border: 4px solid #2B2D5C; box-sizing: border-box; box-shadow: 0 2px 0 rgba(0,0,0,.18); }
.wall-clock i { position: absolute; left: 50%; bottom: 50%; width: 3px; border-radius: 2px; background: #2B2D5C; transform-origin: 50% 100%; margin-left: -1.5px; }
.wall-clock i:first-child { height: 14px; } .wall-clock i:last-child { height: 10px; transform: rotate(100deg); }
.station-platform { left: 0; right: 0; bottom: 96px; height: 18px; z-index: 1; background: linear-gradient(#FFD166 0 5px, #F3E6CF 5px); border-radius: 6px 6px 0 0; box-shadow: 0 3px 0 rgba(60,40,20,.2); }
.flap-board { position: absolute; left: 50%; top: max(112px, calc(112px + (100% - 340px) * .22)); transform: translateX(-50%); z-index: 2; box-sizing: border-box; padding: 14px 8px 8px; border-radius: 16px; background: #2B2D5C; border-top: 6px solid #FFD166; box-shadow: 0 6px 0 #1E2140, 0 10px 16px rgba(30,20,10,.3); }
.flap-chain { position: absolute; top: -34px; width: 4px; height: 30px; background: repeating-linear-gradient(#8A8FB5 0 5px, #5A5E88 5px 8px); border-radius: 2px; }
.flap-chain.l { left: 22%; } .flap-chain.r { right: 22%; }
.flap-row { display: flex; justify-content: center; gap: 6px; }
.flap-tile { position: relative; flex: 0 0 auto; width: var(--tw, 72px); height: 96px; padding: 0; border: 0; border-radius: 10px; background: #F3E6CF; cursor: pointer; touch-action: manipulation; box-shadow: inset 0 -4px 0 rgba(60,40,20,.12); display: block; }
.flap-tile::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; background: rgba(30,33,64,.4); pointer-events: none; }
.flap-face { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.flap-tile .glyph { height: 66px; width: auto; } .flap-tile .glyph path { stroke-width: 13; }
.flap-tile .font-letter { font-size: 70px; }
.flap-tile.glow { background: #FFE9A8; box-shadow: 0 0 0 4px #FFD166, 0 0 18px rgba(255,214,102,.8); }
.flap-board.mini { position: relative; left: auto; top: auto; transform: none; display: flex; gap: 4px; padding: 8px 6px 6px; width: 120px; box-sizing: border-box; border-radius: 10px; border-top-width: 4px; }
.flap-board.mini .flap-tile { width: 30px; height: 40px; border-radius: 5px; }
@media (max-height: 700px) { .wall-clock { display: none; } }

/* ---- levels (v1.9.4): the gold star board, the level banner and the Grownups "Levels" fold ---- */
.home-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; max-width: calc(100vw - 112px - var(--sal) - var(--sar)); }
.level-stars { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.92); box-shadow: var(--shadow); }
.level-star { display: inline-grid; width: 30px; height: 30px; place-items: center; }
.level-star svg { width: 30px; height: 30px; }
.level-star:not(.on) svg path { fill: none; stroke: #C9C4BA; stroke-width: 1.6; stroke-dasharray: 3 2.4; }
.level-banner { position: fixed; left: 50%; top: 31%; transform: translate(-50%, -50%); z-index: 15; width: max-content; max-width: calc(100% - 32px); box-sizing: border-box; display: grid; justify-items: center; gap: 8px; padding: 18px 22px 20px; border-radius: 28px; background: var(--cream); border: 6px solid var(--sun); box-shadow: 0 10px 0 rgba(30,33,64,.18), var(--shadow); text-align: center; cursor: pointer; touch-action: manipulation; opacity: 1; transition: opacity 250ms ease; }
.level-banner.closing { opacity: 0; pointer-events: none; }
.level-banner-art { display: flex; align-items: center; justify-content: center; gap: 10px; }
.level-banner-art .gold-star { width: 76px; height: 76px; flex: none; }
.level-banner-art .car-icon { width: 132px; height: auto; flex: none; }
.level-banner-text { font-size: 34px; line-height: 1.1; font-weight: 800; color: var(--ink); }
@media (max-width: 380px) { .level-banner-art .gold-star { width: 60px; height: 60px; } .level-banner-art .car-icon { width: 104px; } .level-banner-text { font-size: 30px; } }
.gu-level { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; min-height: 56px; padding: 6px 0; }
.gu-level .gold-star { width: 36px; height: 36px; }
.gu-level.off .gold-star path { fill: none; stroke: #C9C4BA; stroke-width: 1.6; stroke-dasharray: 3 2.4; }
.level-replay { min-height: 48px; grid-column: 2; justify-self: start; }
@media (orientation: landscape) { .level-banner { top: 56%; } }

/* The grown-up check before a link leaves the app */
.grown-gate { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(40, 30, 20, .55); }
.gg-card { background: var(--paper, #fff8ec); color: var(--ink, #3a2c20); border-radius: 20px; padding: 20px 18px; max-width: 360px; width: 100%; text-align: center; box-shadow: 0 8px 30px rgba(0, 0, 0, .35); }
.gg-title { margin: 0 0 6px; font-size: 22px; }
.gg-ask { margin: 0 0 14px; font-size: 20px; }
.gg-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 14px; }
.gg-num { min-width: 64px; min-height: 64px; border-radius: 16px; border: 2px solid currentColor; background: #fff; color: inherit; font: inherit; font-size: 28px; font-weight: 700; cursor: pointer; }
.gg-cancel { min-height: 48px; }

/* ---- prototype 2 (v1.9.8, Grownups > Previews): worlds, the world gateway, the "Did you know?" card, the journey board ---- */
.gu-previews { display: grid; gap: 10px; }
.preview-btn { width: 100%; justify-content: center; }
.preview-back { position: fixed; left: calc(16px + var(--sal)); bottom: calc(16px + var(--sab)); z-index: 12; min-height: 48px; display: inline-flex; align-items: center; gap: 4px; padding: 0 18px 0 10px; border: 0; border-radius: 999px; background: #fff; color: var(--violet); font: inherit; font-weight: 800; font-size: 18px; box-shadow: var(--shadow); cursor: pointer; touch-action: manipulation; }
.gateway-host { position: fixed; inset: 0; }

/* the tip card */
.tip-card { position: fixed; left: 50%; bottom: calc(84px + var(--sab)); transform: translateX(-50%); z-index: 14; width: min(460px, calc(100% - 32px)); box-sizing: border-box; display: grid; grid-template-columns: 52px 1fr 48px; gap: 8px; align-items: start; padding: 12px 4px 12px 12px; border-radius: 24px; background: var(--cream); border: 4px solid var(--sun); box-shadow: 0 8px 0 rgba(30,33,64,.14), var(--shadow); cursor: pointer; touch-action: manipulation; opacity: 0; transition: opacity 300ms ease; }
.tip-card.in { opacity: 1; } .tip-card.closing { opacity: 0; pointer-events: none; } .tip-card.still { transition: none; }
.tip-pip svg { width: 52px; height: auto; display: block; }
.tip-title { display: block; font-size: 19px; font-weight: 800; color: var(--violet); }
.tip-text { margin: 2px 0 0; font-size: 16px; line-height: 1.35; font-weight: 600; }
.tip-close { width: 48px; height: 48px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; touch-action: manipulation; }
@media (orientation: landscape) and (max-height: 520px) { .tip-card { width: min(560px, calc(100% - 200px)); bottom: calc(12px + var(--sab)); left: auto; right: calc(16px + var(--sar)); transform: none; } }

/* the loading card between two worlds */
.world-card { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px; box-sizing: border-box; background: var(--wc); cursor: pointer; touch-action: manipulation; opacity: 0; transition: opacity 380ms ease; }
.world-card.in { opacity: 1; } .world-card.out { opacity: 0; pointer-events: none; }
.wg-panel { width: min(460px, 100%); box-sizing: border-box; display: grid; gap: 14px; padding: 22px 18px 18px; border-radius: 32px; background: var(--cream); text-align: center; box-shadow: 0 10px 0 rgba(30,33,64,.18), var(--shadow); }
.wg-head { display: grid; gap: 4px; justify-items: center; }
.wg-badge { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: var(--wc); border: 5px solid #fff; box-shadow: 0 4px 0 rgba(30,33,64,.18); font-size: 40px; font-weight: 800; color: var(--ink); }
.wg-next { margin: 6px 0 0; font-size: 18px; font-weight: 700; color: var(--muted); }
.wg-name { margin: 0; font-size: 34px; line-height: 1.1; font-weight: 800; }
.wg-more { display: grid; gap: 10px; }
.wg-tip { background: #fff; border-radius: 20px; padding: 10px 14px; text-align: left; box-shadow: inset 0 0 0 2px #ECEEF8; }
.wg-tip strong { font-size: 16px; color: var(--violet); } .wg-tip p { margin: 2px 0 0; font-size: 16px; line-height: 1.35; font-weight: 600; }
.wg-hint { margin: 0; font-size: 16px; font-weight: 700; color: var(--muted); }
@media (orientation: landscape) and (max-height: 520px) { .wg-panel { width: min(820px, 100%); grid-template-columns: 0.8fr 1.2fr; align-items: center; gap: 18px; padding: 16px 20px; } .wg-more { text-align: left; } .wg-badge { width: 60px; height: 60px; font-size: 32px; } .wg-name { font-size: 30px; } }

/* the journey board */
.map-btn { position: relative; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: #fff; box-shadow: var(--shadow); display: grid; place-items: center; cursor: pointer; touch-action: manipulation; transition: transform var(--t-fast) var(--ease-out); }
.map-btn:active { transform: scale(.94); }
.map-icon { width: 36px; height: 36px; display: block; }
.map-stars { position: absolute; right: -7px; top: -7px; min-width: 26px; height: 24px; padding: 0 6px 0 3px; box-sizing: border-box; border-radius: 999px; background: #fff; box-shadow: 0 1px 4px rgba(30,33,64,.28); display: inline-flex; align-items: center; justify-content: center; gap: 1px; }
.map-stars[hidden] { display: none; }
.map-stars .gold-star { width: 18px; height: 18px; flex: none; }
.map-stars-n { font-size: 14px; font-weight: 800; line-height: 1; color: #7A5200; }
.jb-x { position: absolute; top: calc(8px + var(--sat)); right: calc(8px + var(--sar)); z-index: 3; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--ink); box-shadow: var(--shadow); display: grid; place-items: center; cursor: pointer; touch-action: manipulation; }
.jb-head { margin: auto 0 4px; text-align: center; font-size: 28px; font-weight: 800; }
.jb-badges { list-style: none; margin: 0; padding: 42px 0 4px; display: grid; grid-template-columns: repeat(6, 1fr); row-gap: 40px; }
.jb-badge { position: relative; height: 56px; display: grid; place-items: center; }
.jb-badge::before, .jb-badge::after { content: ''; position: absolute; top: 50%; width: 50%; height: 12px; margin-top: -6px; background-image: linear-gradient(#8A6E5A, #8A6E5A), repeating-linear-gradient(90deg, #C9A57A 0 4px, transparent 4px 10px); background-size: 100% 4px, 100% 12px; background-position: center, center; background-repeat: no-repeat; }
.jb-badge::before { left: 0; } .jb-badge::after { right: 0; }
.jb-badge.is-future::before, .jb-badge.is-future::after, .jb-badge.is-current::after { opacity: .3; }
.jb-badge:nth-child(6n+1)::before, .jb-badge:nth-child(6n)::after, .jb-badge:last-child::after { display: none; }
.jb-stop { position: relative; z-index: 1; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--wc); color: var(--ink); font-size: 20px; font-weight: 800; box-shadow: 0 3px 0 rgba(30,33,64,.18); }
.jb-badge.is-current .jb-stop { width: 54px; height: 54px; font-size: 24px; box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--ink), 0 4px 0 7px rgba(30,33,64,.2); }
.jb-badge.is-future .jb-stop { background: rgba(255,255,255,.7); border: 3px dashed #B7BCD6; color: #8A8FAE; box-shadow: none; box-sizing: border-box; }
.jb-train { position: absolute; z-index: 2; left: 50%; top: -38px; width: 60px; margin-left: -30px; pointer-events: none; }
.jb-train-art { width: 100%; height: auto; display: block; }
.jb-stars { margin: 18px 0 auto; padding: 10px 14px; border-radius: 24px; background: #fff; box-shadow: var(--shadow); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; }
.jb-stars-title { margin: 0; font-size: 18px; font-weight: 800; }
.jb-stars .level-stars { background: transparent; box-shadow: none; padding: 0; }
.jb-stars .level-star, .jb-stars .level-star svg { width: 36px; height: 36px; }
.jb-stars-n { margin: 0; font-size: 16px; font-weight: 700; color: var(--muted); }
.jb-here { margin: 0 0 6px; text-align: center; }
.jb-here-pill { display: inline-block; padding: 3px 14px; border-radius: 999px; background: var(--violet); color: #fff; font-size: 15px; font-weight: 800; }
.jb-more { margin: 8px 0 0; text-align: center; font-size: 16px; font-weight: 700; color: var(--muted); }
.jb-world { min-width: 0; margin: 20px 0 0; padding: 14px 10px 18px; border-radius: 28px; background: #fff; border-top: 10px solid var(--wc); box-shadow: var(--shadow); }
/* the compact railway on the world-crossing card */
.jm-mini { padding: 2px 0 0; }
.jm-lane { position: relative; height: 30px; }
.jm-train { position: absolute; left: 0; bottom: -2px; width: calc(100% / var(--n)); display: flex; justify-content: center; transform: translateX(calc(var(--at) * 100%)); }
.jm-train .jb-train-art { width: 46px; flex: none; }
.jm-rail { position: relative; list-style: none; margin: 0; padding: 0; height: 34px; display: grid; grid-template-columns: repeat(var(--n), 1fr); align-items: center; }
.jm-rail::before { content: ''; position: absolute; left: calc(50% / var(--n)); right: calc(50% / var(--n)); top: 50%; height: 12px; margin-top: -6px; background-image: linear-gradient(#8A6E5A, #8A6E5A), repeating-linear-gradient(90deg, #C9A57A 0 4px, transparent 4px 10px); background-size: 100% 4px, 100% 12px; background-position: center, center; background-repeat: no-repeat; }
.jm-stn { position: relative; z-index: 1; justify-self: center; width: 14px; height: 14px; box-sizing: border-box; border-radius: 50%; background: var(--wc); display: grid; place-items: center; }
.jm-stn.is-later { background: #fff; border: 3px dashed #B7BCD6; }
.jm-stn.big { width: 30px; height: 30px; border: 3px solid #fff; box-shadow: 0 2px 0 rgba(30,33,64,.22); }
.jm-stn.is-next.big { box-shadow: 0 0 0 3px var(--ink), 0 2px 0 3px rgba(30,33,64,.2); }
.jm-n { font-size: 15px; font-weight: 800; color: var(--ink); line-height: 1; }
/* Grownups > Progress */
.gp-map { margin-bottom: 6px; }
.gp-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.gp-world { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: start; padding: 10px 12px; border-radius: 16px; background: #F4F5FB; border-left: 8px solid var(--wc); }
.gp-world.is-soon { opacity: .7; }
.gp-dot { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--wc); color: var(--ink); font-size: 20px; font-weight: 800; }
.gp-text { display: grid; gap: 2px; font-size: 16px; line-height: 1.3; min-width: 0; }
.gp-text strong { font-size: 18px; } .gp-text em { font-style: normal; font-weight: 700; color: var(--muted); }
.gp-later { margin-top: 10px; }
.jb { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; background: linear-gradient(to bottom, #BFE8FF 0%, #FFF6E5 60%); padding: var(--sat) var(--sar) var(--sab) var(--sal); opacity: 1; transition: opacity 250ms ease; }
.jb.closing { opacity: 0; pointer-events: none; } .jb.still { transition: none; }
.jb-scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; box-sizing: border-box; width: 100%; max-width: 760px; margin: 0 auto; padding: 18px 16px 8px; }
.jb-badge-mark { position: absolute; right: -5px; top: -5px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 2px 0 rgba(30,33,64,.2); }
.jb-badge-mark.gold { background: var(--sun); } .jb-badge-mark.gold .jb-tick { width: 15px; height: 15px; } .jb-badge-mark.gold .jb-tick path { stroke: #7A5200; }
.jb-badge-mark.lock { background: #fff; color: #8A8FAE; top: auto; right: -9px; bottom: -8px; width: 20px; height: 20px; box-shadow: 0 1px 0 rgba(30,33,64,.15); }
.jb-world-n { margin: 0; text-align: center; font-weight: 700; color: var(--muted); }
.jb-world-name { margin: 0 0 4px; text-align: center; font-size: 26px; font-weight: 800; }
.jb-track { position: relative; list-style: none; margin: 0; padding: 66px 8px 6px; display: flex; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding: 0 8px; }
.jb-stn { position: relative; flex: 0 0 auto; min-width: 104px; width: max-content; padding: 0 6px; box-sizing: border-box; display: grid; justify-items: center; align-content: start; gap: 6px; scroll-snap-align: start; }
.jb-stn::before { content: ''; position: absolute; top: 22px; left: 0; right: 0; height: 8px; border-radius: 4px; background: #D9DCEE; }
.jb-stn:first-child::before { left: 50%; } .jb-stn:last-child::before { right: 50%; }
.jb-stn.is-done::before { background: var(--wc); }
.jb-dot { position: relative; z-index: 1; width: 52px; height: 52px; box-sizing: border-box; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 5px solid #C9CDE3; color: var(--muted); font-size: 17px; font-weight: 800; }
.jb-stn.is-later .jb-dot { border-style: dashed; }
.jb-stn.is-done .jb-dot { background: var(--wc); border-color: var(--wc); }
.jb-stn.is-here .jb-dot { background: var(--wc); border-color: #fff; color: var(--ink); box-shadow: 0 0 0 4px var(--ink); }
.jb-dot .jb-tick { width: 28px; height: 28px; } .jb-dot .jb-tick path { stroke: var(--ink); }
.jb-stn.unbuilt .jb-dot { opacity: .7; }
.jb-sounds { min-height: 34px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.jb-sound .glyph { height: 26px; width: auto; display: block; } .jb-sound .font-letter { font-size: 30px; }
.jb-title { max-width: 92px; font-size: 14px; line-height: 1.15; font-weight: 700; color: var(--muted); text-align: center; }
.jb-pip { position: absolute; top: -64px; left: 50%; margin-left: -24px; width: 48px; }
.jb-pip svg { width: 48px; height: auto; display: block; }
.jb-foot { display: grid; justify-items: center; padding: 8px 16px 16px; }
.jb-go { width: min(340px, 100%); }
@media (orientation: landscape) and (max-height: 520px) {
  .jb-scroll { max-width: 960px; display: grid; grid-template-columns: 340px 1fr; grid-template-areas: "head world" "map world" "stars world"; grid-template-rows: auto auto 1fr; align-content: start; column-gap: 18px; padding-top: 10px; }
  .jb-head { grid-area: head; font-size: 24px; margin: 0 0 2px; text-align: left; }
  .jb-map { grid-area: map; }
  .jb-badges { padding-top: 34px; row-gap: 32px; }
  .jb-badge { height: 46px; } .jb-stop { width: 40px; height: 40px; font-size: 18px; } .jb-badge.is-current .jb-stop { width: 46px; height: 46px; font-size: 21px; }
  .jb-train { top: -33px; width: 50px; margin-left: -25px; }
  .jb-stars { grid-area: stars; margin: 12px 0 0; align-self: start; }
  .jb-world { grid-area: world; margin: 0; padding: 12px 10px; align-self: start; }
  .jb-world-name { font-size: 24px; }
  .jb-x { top: 6px; }
  .jb-foot { padding: 6px 16px 10px; } .jb-go { min-height: 56px; }
}
@media (prefers-reduced-motion: reduce) { .world-card, .tip-card, .jb { transition: none; } }

/* Grownups: the lessons grouped by world and unit */
.gu-world { border-left: 10px solid var(--wc); }
.gu-world-head { justify-content: flex-start; gap: 12px; }
.gu-world-head .icon { margin-left: auto; flex: none; }
.gu-world-dot { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); font-weight: 800; }
.gu-world-title { display: grid; flex: 1; min-width: 0; }
.gu-world-title strong { font-size: 20px; }
.gu-unit { margin: 6px 0 0; padding-top: 10px; border-top: 2px solid #ECEEF8; display: flex; align-items: baseline; gap: 10px; font-size: 18px; font-weight: 800; }
.gu-world-body > .gu-unit:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.gu-world-body { gap: 8px; }
.gu-glyph .book-art { width: 30px; height: 44px; min-height: 0; flex: none; } /* the reader's .book-art rules would stretch the Story icon past its box */
/* ---------- Prototype 4: one lesson in the eight-step loop, for f (js/screens/proto-lesson.js, js/screens/tasks/proto/) ---------- */
.proto { flex: 1; width: 100%; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--ink); }
.wu-body > *, .bi-body > *, .ns-host > *, .rc-pad > *, .rs-pad > *, .proto > * { flex-shrink: 0; } /* a short screen scrolls or compacts; nothing is squashed onto its neighbour */
.proto [hidden], .reading-item [hidden], .judge-bar[hidden], .px-dots[hidden] { display: none !important; }
.px-chip { align-self: center; margin-bottom: 10px; padding: 5px 16px; border-radius: 999px; background: rgba(255,255,255,.88); color: var(--ink); font-size: 16px; font-weight: 800; }
.px-dots { flex: 0 0 auto; display: flex; gap: 8px; align-items: center; justify-content: center; min-height: 40px; }
.px-dot { display: block; width: 10px; height: 10px; border-radius: 999px; background: rgba(30,33,64,.22); transition: background var(--t-base), width var(--t-base) var(--ease-out); }
.px-dot.done { background: rgba(30,33,64,.6); } .px-dot.now { width: 26px; background: var(--ink); }
.on-dark .px-dot { background: rgba(255,255,255,.32); } .on-dark .px-dot.done { background: rgba(255,255,255,.7); } .on-dark .px-dot.now { background: #fff; }
.px-model { width: 100%; min-height: 52px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; }
.px-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.px-next { background: var(--s-fill); color: #fff; } .px-hear { flex: 0 0 auto; }
/* the grown-up's prompt ("Say: fffiiit-") sits in the flow here, one line, never over the picture */
.px-model .say-prompt, .reading-item .say-prompt, .ns-body > .say-prompt { position: static; flex-direction: row; align-items: center; gap: 8px; width: auto; max-width: 100%; margin: 0; padding: 6px 14px 7px 8px; font-size: 21px; pointer-events: none; }
.px-model .say-who, .reading-item .say-who, .ns-body > .say-prompt .say-who { flex: 0 0 auto; }
.px-model .say-text, .reading-item .say-text, .ns-body > .say-prompt .say-text { min-width: 0; text-align: left; }

/* letter tiles and word tiles (reading items, Build It) */
.reading-item { width: 100%; flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.reading-item .judge-bar, .rc-pad > .judge-bar { margin-top: auto; } /* the judge stays where the grown-up's thumb expects it */
.ri-stage { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.ri-tile { border: 0; padding: 0; background: #fff; box-shadow: var(--shadow); display: grid; place-items: center; cursor: default; touch-action: manipulation; transition: transform var(--t-fast) var(--ease-out), background var(--t-fast), box-shadow var(--t-fast); }
.ri-tile:disabled { opacity: 1; color: inherit; }
.ltile { --lt: clamp(76px, 25vw, 100px); width: var(--lt); height: calc(var(--lt) * 1.2); border-radius: 22px; --gh: calc(var(--lt) * .62); }
.ltile .glyph, .bi-tile .glyph, .bi-slot .glyph, .wu-box .glyph { height: calc(var(--gh, 56px) * var(--vh, 1)); width: auto; max-width: 84%; }
.ltile .font-letter, .bi-tile .font-letter, .bi-slot .font-letter, .wu-box .font-letter { font-size: calc(var(--gh, 56px) * 1.15); }
.wtile { --cap: clamp(30px, 5.2dvh, 44px); min-height: 50px; padding: 6px 12px; border-radius: 18px; }
.ri-tile.pick { box-shadow: 0 0 0 3px rgba(90,75,214,.55), var(--shadow); cursor: pointer; }
.ri-tile.current { transform: scale(1.07); box-shadow: 0 0 0 4px var(--sun), var(--shadow); }
.ri-tile.lit { background: #FFF6D8; }
.ri-tile.tricky { background: #FFE9A8; box-shadow: 0 0 0 4px #FFD166, var(--shadow); }
.ri-panel { width: 100%; display: grid; gap: 10px; padding: 12px 14px; border-radius: 20px; background: #FFF8EC; box-shadow: 0 3px 0 #D9C8A4, 0 6px 12px rgba(60,40,20,.12); text-align: center; }
.ri-text { font-size: 17px; font-weight: 700; line-height: 1.25; }
.ri-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.btn.small.go { background: var(--s-fill); color: #fff; }

/* the judge: Got it (the green tick) and Help (soft, never red) */
.judge-bar { position: relative; width: 100%; display: grid; grid-template-columns: 1.15fr 1fr; gap: 12px; padding-top: 16px; }
.judge-tag { position: absolute; top: 0; left: 6px; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: rgba(30,33,64,.6); }
.judge-btn { min-height: 60px; border: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; font: 800 21px/1 'Nunito', system-ui, sans-serif; cursor: pointer; touch-action: manipulation; transition: transform var(--t-fast) var(--ease-out); }
.judge-btn:active { transform: translateY(3px) scale(.97); }
.judge-btn.got { background: var(--s-fill); color: #fff; box-shadow: 0 5px 0 rgba(30,33,64,.22), var(--shadow); }
.judge-btn.help { background: #fff; color: var(--violet); box-shadow: 0 5px 0 rgba(30,33,64,.12), inset 0 0 0 2px rgba(90,75,214,.28); }
.on-dark .judge-tag { color: rgba(255,255,255,.8); }

/* the title stays on one line, whatever the phone */
.proto-task .task-head h1 { font-size: clamp(21px, 6.6vw, 28px); white-space: nowrap; }
.px-hear .px-hear-label { white-space: nowrap; }

/* step 1: the warm-up */
.wu-body { width: 100%; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; min-height: 0; }
.proto.warmup { --pic: clamp(84px, 17dvh, 150px); --box: clamp(72px, 24vw, 96px); --wcap: clamp(64px, 19dvh, 130px); }
.wu-board { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 8px 0 4px; }
.wu-row.glyph-row { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 0 2px; overflow: visible; } .wu-row .glyph { overflow: visible; margin: 0 auto; }
.tile-bg { fill: #fff; stroke: rgba(30,33,64,.14); stroke-width: 1.5; transition: fill var(--t-fast); }
.glyph-letter.lit .tile-bg { fill: color-mix(in srgb, var(--accent) 16%, #fff); }
.wu-pic { width: var(--pic); height: var(--pic); flex: 0 0 auto; border-radius: 24px; border: 3px dashed rgba(30,33,64,.28); background: rgba(255,255,255,.5); display: grid; place-items: center; }
.wu-pic:has(.pic-frame) { border-color: transparent; background: transparent; }
.wu-pic .pic-frame, .wu-pic .pic-frame.huge { width: 100%; height: 100%; border-radius: 22px; box-shadow: var(--shadow); background: #fff; }
.wu-pic .art-frame svg { width: 88%; height: 88%; }
.wu-q { font-size: 48px; font-weight: 800; color: rgba(30,33,64,.35); }
.wu-next { min-height: 48px; display: flex; gap: 10px; justify-content: center; }
.wu-boxes { display: flex; gap: 10px; justify-content: center; }
.wu-box { width: var(--box); height: calc(var(--box) * 1.2); --gh: calc(var(--box) * .62); border: 3px dashed rgba(30,33,64,.38); border-radius: 22px; background: rgba(255,255,255,.55); padding: 0; display: grid; place-items: center; cursor: pointer; touch-action: manipulation; }
.wu-box.filled { background: #fff; border: 3px solid transparent; box-shadow: var(--shadow); cursor: default; }
.wu-hint { font-size: 18px; font-weight: 800; text-align: center; }
.wu-pic.big { --pic: clamp(96px, 20dvh, 160px); }

/* step 2: quick review */
.proto.recall { align-items: stretch; gap: 0; }
.rc-host { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.rc-pad { width: 100%; flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 16px 18px; }
.rc-card { width: min(100%, 300px); display: grid; justify-items: center; gap: 2px; padding: 10px 20px 16px; border-radius: 28px; background: #fff; box-shadow: var(--shadow); }
.rc-say { font-size: 24px; font-weight: 800; color: var(--violet); }
.rc-glyph .glyph { height: calc(clamp(96px, 19dvh, 150px) * var(--vh, 1)); width: auto; }
.find-card.say-first span { max-width: 112px; text-align: center; line-height: 1.12; }
.wagons-scene.say-first .say-hear { top: 128px; }
.say-hear.later { visibility: hidden; }

/* step 3: the new sound */
.proto.newsound { color: #fff; }
.ns-host { width: 100%; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; min-height: 0; }
.ns-body { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ns-card { display: grid; justify-items: center; gap: 2px; padding: 12px 18px 10px; border-radius: 30px; background: #fff; box-shadow: var(--shadow); }
.ns-art { position: relative; width: min(64vw, 250px, calc(100dvh - 520px)); min-width: 110px; aspect-ratio: 1; }
.ns-layer { position: absolute; inset: 0; transition: opacity .7s ease; }
.ns-layer svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ns-layer.plain { opacity: 0; } .ns-art.morphed .flower { opacity: 0; } .ns-art.morphed .plain { opacity: 1; }
.ns-word { font-variant-ligatures: none; color: var(--ink); font-size: 26px; font-weight: 800; line-height: 1.1; }
.ns-line { font-size: 20px; font-weight: 800; text-align: center; line-height: 1.25; max-width: 340px; }
.ns-mouth { width: min(100%, 340px); border: 0; padding: 10px; border-radius: 28px; background: #fff; box-shadow: var(--shadow); cursor: pointer; }
.ns-mouth svg { display: block; width: 100%; height: auto; max-height: 32dvh; }
.mouth-tag text { font: 800 13px 'Nunito', system-ui, sans-serif; }
.mouth.go .air { animation: airflow 1000ms ease-out 3 backwards; }
.mouth.go .air-2 { animation-delay: 220ms; } .mouth.go .air-3 { animation-delay: 440ms; }
@keyframes airflow { 0% { opacity: 0; transform: translateY(-8px); } 35% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }
.ns-dots { display: flex; gap: 16px; justify-content: center; }
.ns-dot { width: 78px; height: 78px; padding: 0; border-radius: 50%; border: 4px dashed rgba(255,255,255,.75); background: rgba(255,255,255,.16); color: #fff; display: grid; place-items: center; cursor: pointer; touch-action: manipulation; }
.ns-dot.on { background: var(--f-fill); border: 4px solid #fff; }
.ns-bigf { width: min(46%, 170px); display: grid; place-items: center; padding: 10px; border-radius: 28px; background: #fff; box-shadow: var(--shadow); }
.ns-bigf .glyph { height: calc(clamp(76px, 15dvh, 130px) * var(--vh, 1)); width: auto; }
.nsp-trace .trace-pad { width: min(100%, max(190px, calc(100dvh - 400px))); }
.nsp-trace .writing-buttons { width: 100%; }

/* step 4: blend it */
.proto.blendit { --cap: clamp(70px, 15dvh, 118px); }
.bi-body { width: 100%; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; min-height: 0; }
.bi-board { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 6px 0; }
.bi-row.glyph-row { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 14px 10px; border-radius: 26px; background: #fff; box-shadow: var(--shadow); overflow: hidden; }
.bi-row .glyph { margin: 0 auto; }
.bi-next { min-height: 52px; display: flex; gap: 10px; justify-content: center; }

/* step 5: read it */
.rd-holder { width: 100%; flex: 1; display: flex; flex-direction: column; }
.rd-results { margin: auto 0; display: grid; justify-items: center; gap: 10px; padding: 24px 18px; border-radius: 28px; background: #fff; box-shadow: var(--shadow); text-align: center; }
.rd-star { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--s-fill); color: #fff; }
.rd-line { font-size: 26px; font-weight: 800; line-height: 1.2; text-wrap: balance; }
.rd-note { font-size: 13px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }

/* step 6: build it */
.proto.buildit { --tile: clamp(58px, 17.5vw, 74px); --lt: clamp(76px, 25vw, 96px); gap: 10px; }
.bi-slots { display: flex; gap: 10px; justify-content: center; }
.bi-slot { width: var(--lt); height: calc(var(--lt) * 1.2); --gh: calc(var(--lt) * .62); padding: 0; border: 3px dashed rgba(30,33,64,.4); border-radius: 22px; background: rgba(255,255,255,.55); display: grid; place-items: center; cursor: pointer; touch-action: manipulation; }
.bi-slot.filled { background: #fff; border: 3px solid transparent; box-shadow: var(--shadow); }
.bi-slot.off { box-shadow: 0 0 0 4px var(--sun), var(--shadow); }
.bi-slot.right { box-shadow: 0 0 0 4px var(--grass), var(--shadow); }
.bi-hint { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 18px; background: #FFF8EC; box-shadow: 0 3px 0 #D9C8A4, 0 6px 12px rgba(60,40,20,.12); font-size: 17px; font-weight: 700; line-height: 1.25; }
.bi-hint[hidden] { display: none; }
.bi-hint .say-who { flex: 0 0 auto; }
.bi-tray { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: calc(var(--tile) * 4 + 30px); }
.bi-tile { width: var(--tile); height: calc(var(--tile) * 1.12); --gh: calc(var(--tile) * .6); padding: 0; border: 0; border-radius: 18px; background: #fff; box-shadow: 0 4px 0 rgba(30,33,64,.16), var(--shadow); display: grid; place-items: center; cursor: pointer; touch-action: manipulation; transition: transform var(--t-fast) var(--ease-out), opacity var(--t-fast); }
.bi-tile:active { transform: translateY(2px) scale(.97); }
.bi-tile.used { opacity: .28; box-shadow: none; }
.bi-tile:disabled { cursor: default; }

/* step 7: the story */
.proto.story { align-items: stretch; }
.rs-host { width: 100%; flex: 1; display: flex; flex-direction: column; }
.rs-pad { width: 100%; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.rs-scene { height: clamp(84px, calc(19dvh - 20px), 170px); aspect-ratio: 240 / 150; max-width: 100%; border-radius: 24px; background: rgba(255,255,255,.78); box-shadow: var(--shadow); overflow: hidden; }
.rs-scene > svg { display: block; width: 100%; height: 100%; }
.ri-line .ri-stage { gap: 8px; }
.rs-page { width: 100%; display: grid; gap: 8px; }
.rs-row { position: relative; overflow: hidden; display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; border-radius: 18px; background: #fff; box-shadow: var(--shadow); }
.rs-thumb { flex: 0 0 76px; width: 76px; height: 48px; border-radius: 12px; background: #F3F4FB; overflow: hidden; }
.rs-thumb > svg { display: block; width: 100%; height: 100%; }
.rs-line-words { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: flex-end; --cap: 42px; }
.rs-line-words.small { --cap: clamp(22px, 3.4dvh, 28px); gap: 4px 11px; }
.rs-w { display: block; }
.rs-row.pace::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(255,209,102,0), rgba(255,209,102,.7), rgba(255,209,102,0)); transform: translateX(-100%); animation: pace 3.2s linear 1 forwards; }
@keyframes pace { to { transform: translateX(100%); } }
.rs-msg { min-height: 26px; padding: 0 58px; font-size: 21px; font-weight: 800; text-align: center; color: #fff; }
.rs-ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.rs-q { font-size: 34px; font-weight: 800; color: #fff; }
.rs-recheck { width: 100%; display: grid; place-items: center; padding: 10px 12px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 5px var(--sun), var(--shadow); --cap: clamp(30px, 5.4dvh, 42px); }
.rs-recheck .rs-line-words { justify-content: center; }
.rs-choices { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rs-choice { display: grid; justify-items: center; gap: 6px; min-height: 124px; padding: 10px 6px 8px; border: 0; border-radius: 22px; background: #fff; box-shadow: var(--shadow); cursor: pointer; touch-action: manipulation; transition: transform var(--t-fast) var(--ease-out), opacity var(--t-fast); }
.rs-choice:active { transform: scale(.97); }
.rs-choice-pic { width: 80px; height: 80px; display: grid; place-items: center; }
.rs-choice-pic svg, .rs-choice-pic .pic-frame { width: 100%; height: 100%; }
.rs-choice-pic .face-crop { overflow: hidden; }
.rs-choice-pic .pic-frame { background: transparent; }
.rs-choice-word { font-size: 24px; font-weight: 800; }
.rs-choice.right { box-shadow: 0 0 0 5px var(--grass), var(--shadow); }
.rs-choice.soft { opacity: .4; }

/* step 8: celebrate */
.proto-finish { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: calc(24px + var(--sat)) 20px calc(24px + var(--sab)); background: var(--cream); text-align: center; }
.proto-finish h1 { font-size: 36px; font-weight: 800; line-height: 1.1; max-width: 420px; text-wrap: balance; }
.pf-stars { display: flex; gap: 10px; }
.pf-stars .gold-star { width: 42px; height: 42px; }
.pf-words { display: flex; gap: 10px; justify-content: center; list-style: none; margin: 0; padding: 0; }
.pf-word { --cap: 40px; min-width: 84px; padding: 10px 14px; border-radius: 18px; background: #fff; box-shadow: var(--shadow); display: grid; place-items: center; }
.pf-back { background: var(--violet); }
.pf-tip { width: min(100%, 420px); padding: 12px 16px; border-radius: 18px; background: #FFF3CF; text-align: left; font-size: 16px; font-weight: 600; line-height: 1.35; }
.pf-tip strong { display: block; font-weight: 800; margin-bottom: 2px; }
@media (max-height: 760px) and (orientation: portrait) { .proto-finish { gap: 12px; } .proto-finish .finish-glyph { width: 140px; height: 140px; } .proto-finish h1 { font-size: 30px; } .pf-stars .gold-star { width: 34px; height: 34px; } }
@media (orientation: landscape) and (max-height: 520px) {
  .proto-finish { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto auto; align-content: center; align-items: center; justify-items: center; gap: 10px 28px; padding-top: calc(12px + var(--sat)); padding-bottom: calc(12px + var(--sab)); }
  .proto-finish .finish-glyph { grid-column: 1; grid-row: 1 / 3; width: 120px; height: 120px; }
  .proto-finish h1 { grid-column: 2; grid-row: 1; font-size: 28px; }
  .pf-stars { grid-column: 1; grid-row: 3; } .pf-stars .gold-star { width: 30px; height: 30px; }
  .pf-words { grid-column: 2; grid-row: 2; } .pf-word { --cap: 30px; padding: 8px 12px; }
  .pf-back { grid-column: 2; grid-row: 3; }
  .pf-tip { grid-column: 1 / -1; grid-row: 4; font-size: 14px; padding: 8px 14px; }
}

/* the overview and the Grownups button */
.pv-lead { font-size: 18px; color: var(--ink); }
.pv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pv-row { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; }
.pv-num { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 20px; background: var(--bg); color: var(--ink); }
.pv-text { display: grid; line-height: 1.2; } .pv-text strong { font-size: 18px; } .pv-text span { font-size: 15px; color: var(--muted); }
.pv-start { justify-self: stretch; margin-top: 6px; }
.preview-btn { justify-self: start; }

/* the lesson's own landscape fit: the stage is the left column, so tiles and pictures stay modest */
@media (orientation: landscape) and (max-height: 520px) {
  .proto { gap: 8px; }
  .proto.warmup { --pic: clamp(56px, 16dvh, 90px); --box: clamp(60px, 16dvh, 78px); --wcap: clamp(56px, 24dvh, 100px); }
  .proto-task .task-head h1 { font-size: 21px; white-space: normal; }
  .proto.blendit { --cap: clamp(54px, 15dvh, 80px); }
  .bi-row.glyph-row { padding: 8px; }
  .ltile { --lt: clamp(64px, 17dvh, 84px); }
  .judge-btn { min-height: 54px; font-size: 19px; }
  .rc-glyph .glyph { height: calc(clamp(70px, 24dvh, 110px) * var(--vh, 1)); }
  .rc-pad { padding: 8px 12px; gap: 8px; }
  .ns-art { width: min(40dvh, 200px); } .ns-mouth svg { max-height: 44dvh; }
  .ns-dot { width: 64px; height: 64px; }
  .nsp-trace .trace-pad { width: min(100%, calc(100dvh - 130px)); }
  .bi-tray { max-width: none; }
  .proto.buildit { --tile: clamp(50px, 13dvh, 62px); --lt: clamp(60px, 16dvh, 78px); gap: 6px; }
  .rs-scene { height: clamp(70px, 24dvh, 110px); }
  .rs-choice { min-height: 96px; } .rs-choice-pic { width: 56px; height: 56px; } .rs-q { font-size: 26px; }
  .wtile { min-height: 54px; --cap: clamp(28px, 9dvh, 38px); }
}
@media (max-height: 700px) and (orientation: portrait) {
  .proto { gap: 8px; }
  .px-dots { min-height: 30px; }
  .px-hear.compact { width: 48px; padding: 0; } .px-hear.compact .px-hear-label { display: none; }
  .proto.warmup { --pic: clamp(64px, 12dvh, 150px); --box: clamp(64px, 21vw, 84px); --wcap: clamp(64px, 19dvh, 130px); }
  .wu-board { gap: 8px; padding: 4px 0 0; } .wu-next, .bi-next { min-height: 48px; }
  .rc-pad { padding: 26px 16px 12px; gap: 8px; } .rc-card { padding: 6px 16px 10px; } .rc-say { font-size: 20px; }
  .rc-glyph .glyph { height: calc(clamp(60px, 14dvh, 150px) * var(--vh, 1)); }
  .ns-card { padding: 8px 14px 8px; } .ns-word { font-size: 22px; }
  .ns-dot { width: 68px; height: 68px; }
  .proto.buildit { --tile: clamp(52px, 16.5vw, 74px); --lt: clamp(68px, 22vw, 96px); }
  .bi-slot { height: calc(var(--lt) * 1.1); } .bi-tray { gap: 8px; max-width: calc(var(--tile) * 4 + 24px); }
  .proto.blendit { --cap: clamp(60px, 12dvh, 118px); } .bi-row.glyph-row { padding: 8px 10px; }
  .px-model { min-height: 44px; }
  .px-model .say-prompt, .reading-item .say-prompt, .ns-body > .say-prompt { font-size: 19px; }
  .judge-btn { min-height: 56px; }
  .ltile { --lt: clamp(70px, 23vw, 84px); }
}

/* ---------- Prototype 6: Stage 1 sound play and the placement check (js/screens/proto-play.js, proto-placement.js, tasks/proto/play.js) ---------- */
.pp-list { gap: 10px; }
.pp-lesson { width: 100%; min-height: 72px; padding: 10px 14px 10px 12px; border: 0; border-radius: 20px; background: #F3F4FB; color: var(--ink); font: inherit; text-align: left; cursor: pointer; touch-action: manipulation; grid-template-columns: 48px minmax(0, 1fr) 24px; }
.pp-lesson .pv-num { width: 48px; height: 48px; font-size: 18px; }
.pp-lesson:active { transform: scale(.98); }
.pk-body, .sg-body { width: 100%; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 0; }
.pk-body > *, .sg-body > * { flex-shrink: 0; }

/* 1.1: a row of four pictures and a soft arrow pointing right */
.proto.story-row { --s: min(21vw, 92px, 24dvh); justify-content: center; gap: 14px; }
.lr-row { display: grid; grid-template-columns: repeat(4, var(--s)); gap: 8px; justify-content: center; }
.lr-pic { width: var(--s); height: calc(var(--s) * 1.08); padding: 4px; border: 0; border-radius: 20px; background: #fff; box-shadow: var(--shadow); display: grid; place-items: center; cursor: pointer; touch-action: manipulation; transition: background var(--t-fast), box-shadow var(--t-fast); }
.lr-pic .pic-frame { width: 100%; height: auto; aspect-ratio: 1; background: transparent; }
.lr-pic.is-start { box-shadow: 0 0 0 4px var(--sun), var(--shadow); }
.lr-pic.lit { background: #FFF6D8; box-shadow: 0 0 0 4px var(--grass), var(--shadow); }
.lr-arrow { width: min(calc(var(--s) * 4 + 24px), 100%); height: 22px; color: rgba(30,33,64,.38); }

/* 1.2 and 1.3: pick the picture */
.proto.pick { --o: min(28vw, 118px, 24dvh); }
.pk-opts { display: grid; grid-template-columns: repeat(3, var(--o)); gap: 10px; justify-content: center; }
.pk-opt { width: var(--o); height: var(--o); padding: 6px; border: 0; border-radius: 24px; background: #fff; box-shadow: var(--shadow); display: grid; place-items: center; cursor: pointer; touch-action: manipulation; transition: transform var(--t-fast) var(--ease-out), opacity var(--t-fast), box-shadow var(--t-fast); }
.pk-opt:active { transform: scale(.97); }
.pk-opt .pic-frame { width: 100%; height: 100%; background: transparent; }
.pk-opt.right { box-shadow: 0 0 0 5px var(--grass), var(--shadow); }
.pk-opt.soft { opacity: .4; }

/* 1.3: one dot for each sound */
.proto.segment { --pic: clamp(96px, 22dvh, 170px); }
.sg-pic { width: var(--pic); height: var(--pic); border-radius: 24px; box-shadow: var(--shadow); background: #fff; }
.sg-pic .pic-frame, .sg-pic .pic-frame.huge { width: 100%; height: 100%; border-radius: 24px; background: #fff; }
.sg-dots { display: flex; gap: 16px; justify-content: center; }
.sg-dot { width: 68px; height: 68px; border-radius: 50%; border: 3px dashed rgba(30,33,64,.38); background: rgba(255,255,255,.55); padding: 0; cursor: pointer; touch-action: manipulation; transition: background var(--t-fast); }
.sg-dot.lit { border: 3px solid #fff; background: var(--violet); box-shadow: 0 4px 0 rgba(30,33,64,.18), var(--shadow); cursor: default; }

/* the placement check */
.proto.placement { align-items: stretch; gap: 0; }
.pc-host { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pc-pad { justify-content: center; }
.pc-welcome { text-align: center; display: grid; gap: 6px; padding: 8px 4px; }
.pc-welcome h2 { margin: 0; font-size: 28px; line-height: 1.15; color: var(--ink); } .pc-welcome p { margin: 0; font-size: 18px; font-weight: 700; }
.pc-note { width: 100%; margin: 0; padding: 8px 12px; border-radius: 16px; background: rgba(255,255,255,.7); font-size: 15px; line-height: 1.3; text-align: left; }
.pc-begin { align-self: stretch; }
.pc-pad .judge-bar { margin-top: 0; }
.pc-word { --cap: clamp(64px, 14dvh, 110px); width: 100%; display: grid; place-items: center; padding: 18px 12px; border-radius: 28px; background: #fff; box-shadow: var(--shadow); }
.pc-result { position: relative; width: 100%; display: grid; gap: 8px; padding: 28px 16px 16px; border-radius: 22px; background: #FFF8EC; box-shadow: 0 3px 0 #D9C8A4, 0 6px 12px rgba(60,40,20,.12); text-align: center; }
.pc-tag { left: 14px; top: 8px; }
.pc-suggest { margin: 0; font-size: 24px; line-height: 1.2; color: var(--ink); }
.pc-why { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.3; }
.pc-play { text-align: center; }
.pc-start { align-self: stretch; flex-direction: column; gap: 2px; padding: 8px 16px; } .pc-start small { font-size: 14px; font-weight: 700; }
.pc-pad .pc-playbtn { align-self: center; }
.pc-quick { align-self: center; min-height: 48px; }
.pc-fine { margin: 0; text-align: center; font-size: 15px; font-weight: 700; color: rgba(30,33,64,.7); }
.pc-teachbox { position: relative; width: 100%; padding: 22px 14px 12px; border-radius: 18px; background: #FFF8EC; box-shadow: 0 3px 0 #D9C8A4; }
.pc-teach { margin: 0; font-size: 20px; line-height: 1.3; font-weight: 700; text-align: center; }
.pc-go, .pc-pad .pc-hear { align-self: stretch; }
.pc-pad .pc-hear { align-self: center; }
.pc-scene { width: 100%; display: flex; justify-content: center; align-items: center; gap: 12px; padding: 14px 10px; border-radius: 28px; background: #fff; box-shadow: var(--shadow); }
.pc-pic { display: grid; place-items: center; width: clamp(80px, 17dvh, 130px); height: clamp(80px, 17dvh, 130px); font-size: clamp(56px, 12dvh, 92px); line-height: 1; border-radius: 22px; background: #F4F1FF; }
.pc-three .pc-pic { width: clamp(64px, 24vw, 100px); height: clamp(64px, 24vw, 100px); font-size: clamp(44px, 15vw, 66px); }
.pc-sentence { margin: 0; width: 100%; padding: 22px 14px; border-radius: 28px; background: #fff; box-shadow: var(--shadow); text-align: center; font: 700 clamp(26px, 7.2vw, 36px)/1.3 'Andika', 'Nunito', system-ui, sans-serif; color: var(--ink); }
.pc-line { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.3; }
.pc-skip { font-size: 15px; color: rgba(30,33,64,.75); }
.pc-notes { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; text-align: left; font-size: 16px; font-weight: 700; line-height: 1.3; }
.pc-notes li { padding-left: 18px; position: relative; } .pc-notes li::before { content: ''; position: absolute; left: 4px; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--violet); }
.pc-start[disabled] { opacity: 1; background: #fff; color: rgba(30,33,64,.62); box-shadow: inset 0 0 0 2px rgba(30,33,64,.2); }

@media (orientation: landscape) and (max-height: 520px) {
  .proto.story-row { --s: min(16vw, 22dvh, 92px); gap: 10px; }
  .proto.pick { --o: min(18vw, 24dvh, 100px); }
  .proto.segment { --pic: clamp(64px, 24dvh, 100px); }
  .sg-dot { width: 56px; height: 56px; }
  .pc-pad { gap: 8px; } .pc-welcome h2 { font-size: 24px; } .pc-note { font-size: 14px; padding: 6px 10px; }
  .pc-word { --cap: clamp(48px, 16dvh, 70px); padding: 10px 12px; }
  .pc-result { padding: 24px 14px 10px; gap: 4px; } .pc-suggest { font-size: 20px; } .pc-why { font-size: 15px; }
  .pc-start { padding: 4px 16px; min-height: 56px; }
  .pc-teach { font-size: 16px; } .pc-teachbox { padding: 20px 12px 8px; } .pc-scene { padding: 8px; } .pc-pic { width: clamp(52px, 22dvh, 84px); height: clamp(52px, 22dvh, 84px); font-size: clamp(36px, 15dvh, 56px); } .pc-three .pc-pic { width: clamp(52px, 22dvh, 84px); height: clamp(52px, 22dvh, 84px); font-size: clamp(36px, 15dvh, 56px); }
  .pc-sentence { padding: 12px; font-size: 26px; } .pc-notes, .pc-line, .pc-skip { font-size: 14px; } .pc-fine { font-size: 14px; }
}
@media (max-height: 700px) and (orientation: portrait) {
  .proto.pick { --o: min(28vw, 118px, 19dvh); }
  .proto.segment { --pic: clamp(80px, 17dvh, 120px); }
  .sg-dot { width: 60px; height: 60px; }
  .pc-pad { gap: 8px; } .pc-welcome h2 { font-size: 25px; } .pc-note { font-size: 14px; }
  .pc-word { --cap: clamp(56px, 12dvh, 90px); padding: 12px; }
  .pc-result { padding: 26px 14px 12px; } .pc-suggest { font-size: 21px; } .pc-why { font-size: 16px; }
  .pc-teach { font-size: 17px; } .pc-pic { width: clamp(64px, 14dvh, 96px); height: clamp(64px, 14dvh, 96px); font-size: clamp(44px, 9dvh, 64px); }
  .pc-sentence { padding: 14px 12px; } .pc-notes, .pc-line, .pc-skip { font-size: 14px; } .pc-result { gap: 6px; }
}

/* PROTOTYPE 5: a heart-word step for "the" (js/screens/tasks/proto/heart.js, js/screens/proto-heart.js) */
.proto.heart { --tile: clamp(58px, 17.5vw, 74px); --lt: clamp(76px, 25vw, 96px); align-items: stretch; gap: 10px; }
.hw-host { width: 100%; flex: 1; display: flex; flex-direction: column; }
.hw-pad { width: 100%; flex: 1; display: flex; flex-direction: column; align-items: center; }
.hw-col { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hw-col > * { flex-shrink: 0; }
.hw-word { display: flex; gap: 14px; justify-content: center; padding: 30px 0 4px; max-width: 100%; }
.hw-tile { position: relative; --cap: clamp(64px, 14dvh, 104px); min-width: calc(var(--cap) * 1.15); padding: 18px 20px 28px; border: 0; border-radius: 26px; background: #fff; color: inherit; box-shadow: 0 5px 0 rgba(30,33,64,.16), var(--shadow); display: grid; place-items: center; touch-action: manipulation; transition: transform var(--t-fast) var(--ease-out), background var(--t-fast), box-shadow var(--t-fast); }
button.hw-tile { cursor: pointer; }
button.hw-tile:active { transform: translateY(3px) scale(.97); }
.hw-tile .glyph { display: block; margin: 0 auto; }
.hw-link { position: absolute; left: 20px; right: 20px; bottom: 11px; height: 11px; border: 4px solid var(--violet); border-top: 0; border-radius: 0 0 12px 12px; }
.hw-heartwrap { position: absolute; top: -27px; left: 50%; width: 42px; margin-left: -21px; pointer-events: none; }
.hw-heart { display: block; width: 100%; height: auto; overflow: visible; }
.hw-heart.small { width: 24px; }
.hw-tile.lit { background: #FFF6D8; box-shadow: 0 0 0 4px var(--sun), var(--shadow); }
.hw-tile.done:not(.lit) { box-shadow: 0 0 0 3px rgba(61,214,140,.7), var(--shadow); }
.hw-tile.next { box-shadow: 0 0 0 3px rgba(90,75,214,.55), var(--shadow); }
@media (prefers-reduced-motion: no-preference) { .hw-tile.next { animation: hwnudge .9s ease-in-out 3; } }
@keyframes hwnudge { 50% { transform: translateY(-6px); } }
.hw-legend { display: flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.7); font-size: 16px; font-weight: 700; }
.hw-btns { min-height: 52px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.hw-tried { background: var(--s-fill); color: #fff; }
.hw-slide { position: relative; width: min(100%, 400px); min-height: 64px; display: grid; place-items: center; border-radius: 999px; background: rgba(255,255,255,.75); box-shadow: 0 3px 0 rgba(30,33,64,.14), var(--shadow); overflow: hidden; touch-action: none; cursor: grab; user-select: none; }
.hw-slide[hidden] { display: none; }
.hw-slide-hint { position: relative; z-index: 1; font-size: 18px; font-weight: 800; pointer-events: none; }
.hw-slide-bar { position: absolute; inset: 0; pointer-events: none; }
.hw-slide-bar i { display: block; width: 100%; height: 100%; background: rgba(90,75,214,.3); transform-origin: left; transform: scaleX(0); }
.hw-fix { position: relative; width: 100%; display: grid; gap: 4px; padding: 30px 14px 12px; border-radius: 24px; background: #FFF8EC; box-shadow: 0 3px 0 #D9C8A4, 0 6px 12px rgba(60,40,20,.14); text-align: center; }
.hw-fix .say-who { position: absolute; top: 8px; left: 10px; }
.hw-fix-line { font-size: 24px; font-weight: 800; line-height: 1.15; }
.hw-fix-line strong { color: var(--coral); }
.hw-fix-ask { font-size: 20px; font-weight: 700; }
.hw-fix-note { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--muted); }
.proto.heart .ri-panel { width: 100%; }
.hw-line { width: 100%; display: flex; flex-wrap: wrap; gap: 18px 8px; justify-content: center; padding-top: 14px; }
.hw-w { position: relative; --cap: clamp(34px, 6dvh, 48px); min-height: 56px; cursor: pointer; }
.hw-wheart { position: absolute; top: -14px; left: 50%; width: 24px; margin-left: -12px; opacity: 0; transform: scale(.4); transition: opacity var(--t-base), transform var(--t-base) var(--ease-out); pointer-events: none; }
.hw-w.found { background: #FFF6D8; box-shadow: 0 0 0 4px #E5484D, var(--shadow); }
.hw-w.found .hw-wheart { opacity: 1; transform: none; }
.hw-w.soft { opacity: .8; }
.hw-w.lit { background: #FFF6D8; box-shadow: 0 0 0 4px var(--sun), var(--shadow); transform: scale(1.05); }
.proto.heart .px-chip { max-width: calc(100% - 116px); text-align: center; }
.hwp-meet, .hwp-find { justify-content: center; padding-bottom: 6%; }
.hw-hint { display: flex; align-items: center; justify-content: center; gap: 8px 12px; flex-wrap: wrap; padding: 10px 12px; }
.hw-hint .ri-text { flex: 1 1 160px; }
.hwp-fix .hw-tile { --cap: clamp(44px, 8dvh, 72px); padding: 14px 18px 24px; }
.hwp-fix .hw-word { padding-top: 26px; }
.hwp-fix .hw-heartwrap { width: 34px; margin-left: -17px; top: -22px; }
.hw-msg { min-height: 24px; font-size: 17px; font-weight: 800; text-align: center; }
.proto.heart .judge-bar { margin-top: 4px; }
.hw-done-row { display: flex; align-items: flex-end; justify-content: center; gap: 12px; padding-top: 30px; max-width: 100%; }
.hw-done-kid, .hw-done-pip { flex: 0 0 auto; width: 64px; height: 80px; }
.hw-done-kid .kid, .hw-done-pip .pip { width: 100%; height: 100%; }
.proto-heart-done .hw-tile { --cap: 56px; padding: 14px 16px 24px; }
@media (max-width: 380px) { .hw-done-kid, .hw-done-pip { width: 44px; height: 56px; } .proto-heart-done .hw-tile { --cap: 48px; } }
@media (orientation: landscape) and (max-height: 520px) {
  .proto.heart { --tile: clamp(50px, 13dvh, 62px); --lt: clamp(60px, 16dvh, 78px); gap: 6px; }
  .hw-col { gap: 8px; }
  .hw-word { padding-top: 24px; gap: 12px; }
  .hw-tile { --cap: clamp(46px, 16dvh, 64px); padding: 12px 16px 22px; }
  .hw-link { bottom: 8px; }
  .hw-heartwrap { top: -22px; width: 34px; margin-left: -17px; }
  .hw-slide { min-height: 52px; }
  .hw-fix { padding: 24px 12px 10px; } .hw-fix-line { font-size: 22px; } .hw-fix-ask { font-size: 18px; }
  .hw-w { --cap: clamp(28px, 9dvh, 38px); min-height: 54px; }
  .hw-line { padding-top: 10px; gap: 14px 8px; }
  .proto-heart-done .hw-done-row { padding-top: 24px; }
  /* Fix the word: the word on the left, the card, the hint and the judge on the right */
  .hwp-fix .hw-col { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 8px 16px; align-items: center; }
  .hwp-fix .hw-col > .px-chip { display: none; }
  .hwp-fix .hw-word { grid-column: 1; grid-row: 1 / span 3; }
  .hwp-fix .hw-fix, .hwp-fix .hw-hint, .hwp-fix .judge-bar { grid-column: 2; }
  .hwp-fix .hw-tile { --cap: clamp(40px, 13dvh, 64px); }
  .hw-hint { flex-wrap: nowrap; padding: 4px 8px 4px 12px; } .hw-hint .ri-text { font-size: 15px; text-align: left; }
}
@media (max-height: 700px) and (orientation: portrait) {
  .proto.heart { --tile: clamp(52px, 16.5vw, 74px); --lt: clamp(68px, 22vw, 96px); }
  .hw-col { gap: 8px; }
  .hw-tile { --cap: clamp(40px, 8.5dvh, 80px); padding: 12px 16px 22px; }
  .hw-link { bottom: 8px; left: 16px; right: 16px; }
  .hw-heartwrap { top: -22px; width: 34px; margin-left: -17px; }
  .hw-word { padding-top: 24px; }
  .hw-slide { min-height: 52px; } .hw-slide-hint { font-size: 17px; }
  .hw-fix { padding: 28px 12px 10px; } .hw-fix-line { font-size: 20px; } .hw-fix-ask { font-size: 18px; } .hw-fix-note { font-size: 14px; line-height: 1.25; }
  .hw-w { --cap: clamp(24px, 4.4dvh, 38px); min-height: 50px; padding: 4px 9px; }
  .hw-line { gap: 14px 6px; padding-top: 12px; }
  .hwp-meet, .hwp-find { padding-bottom: 0; }
  .hw-hint { flex-wrap: nowrap; padding: 4px 8px 4px 12px; } .hw-hint .ri-text { font-size: 15px; text-align: left; }
  .hwp-fix .hw-tile { --cap: clamp(34px, 6dvh, 56px); padding: 10px 14px 20px; }
  .hwp-fix .hw-word { padding-top: 22px; }
  .hwp-fix .hw-fix-line { font-size: 18px; }
  .hwp-fix .hw-col > .px-chip { display: none; }
  .hwp-fix .hw-col { gap: 6px; }
  .hwp-fix .hw-fix { padding: 26px 12px 8px; }
  .hwp-fix .hw-tile { --cap: clamp(30px, 5.4dvh, 56px); }
}

/* ---------- pace limit and developer mode ---------- */
.rest-card .rest-moon { display: flex; justify-content: center; margin-bottom: 4px; }
.rest-card .rest-moon .rest-badge { position: static; width: 56px; height: 56px; }
.rest-card .rest-moon svg { width: 36px; height: 36px; }
.rest-replay { width: 100%; min-height: 56px; margin-bottom: 14px; }
.rest-grown { display: flex; justify-content: center; }
.rest-badge { position: absolute; right: -2px; top: -4px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 3px solid #4C63F0; box-shadow: 0 2px 6px rgba(30,33,64,.25); pointer-events: none; }
.stone.is-resting .stone-top { background: #EEF0FB; }
.stone.is-resting .glyph { opacity: .7; }
.dev-pill { display: inline-grid; place-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px; background: #1E2140; color: #FFD66B; font-weight: 800; font-size: 14px; letter-spacing: .08em; }
.gu-choices { display: flex; gap: 8px; flex-wrap: wrap; }
.gu-choices .btn { min-height: 48px; min-width: 56px; }
.gu-choices .btn[aria-pressed="true"] { background: var(--violet); color: #fff; }
.gu-devworlds { display: flex; gap: 8px; flex-wrap: wrap; }
.gu-devworlds .btn { min-height: 44px; }
.gu-toast { white-space: nowrap; position: fixed; left: 50%; bottom: calc(24px + var(--sab, 0px)); transform: translateX(-50%); z-index: 1100; background: #1E2140; color: #fff; padding: 12px 18px; border-radius: 14px; font-weight: 700; box-shadow: 0 6px 20px rgba(0,0,0,.3); }