/* Colors, fonts, sizes and motion follow docs/design-system.md (the source of truth). Light only.
   Each subject has its own color (pink math, purple English, green friend) so she finds it without reading.
   Buttons are chunky and "press down" (colored bottom edge). Radii: 16 badge, 28 card/button, 999 round. */
@font-face { font-family: KidRound; src: url(fonts/kidround-800.woff2) format("woff2"); font-weight: 800 900; font-display: swap; }
@font-face { font-family: KidRound; src: url(fonts/kidround-700.woff2) format("woff2"); font-weight: 100 700; font-display: swap; }
@font-face { font-family: KidLatin; src: url(fonts/kidlatin-700.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF; }
:root {
  color-scheme: light;
  --bg: #fff5fa;
  --surface: #ffffff;
  --line: #f6d9e8;
  --text: #3b2d4f;
  --muted: #6b5482;
  --math: #d82265;
  --math-edge: #a3214f;
  --math-soft: #ffe3ef;
  --eng: #8359cf;
  --eng-edge: #5e3ba3;
  --eng-soft: #efe6ff;
  --chat: #1a8158;
  --chat-edge: #10593c;
  --chat-soft: #d4f5e9;
  --gift: #a56115;
  --gift-edge: #7a470f;
  --gift-soft: #fff1b8;
  --on-color: #ffffff;
  --ring: rgb(216 34 101 / 0.4);
  --key-edge: #efcfe0;
  --gloss: inset 0 3px 0 rgb(255 255 255 / 0.45);
  --radius: 28px;
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font: 700 22px/1.3 KidRound, system-ui, sans-serif;
  word-break: keep-all;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
/* The scene: sky, two clouds and a grass hill, drawn in CSS and never moving.
   Fixed and non-interactive so scrolling stays cheap; cards on top stay plain white. */
body::before, body::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
}
body::before {
  inset: 0;
  background:
    radial-gradient(closest-side, #fff 96%, transparent) 6% 9% / 200px 64px no-repeat,
    radial-gradient(closest-side, #fff 96%, transparent) 10% 5% / 110px 80px no-repeat,
    radial-gradient(closest-side, #fff 96%, transparent) 90% 15% / 240px 70px no-repeat,
    radial-gradient(closest-side, #fff 96%, transparent) 85% 10% / 130px 90px no-repeat,
    linear-gradient(#d6ecff, var(--bg) 60%);
}
body::after {
  inset: auto 0 0;
  height: 22vh;
  background:
    radial-gradient(60% 100% at 18% 100%, #d4f5e9 99%, transparent),
    radial-gradient(70% 80% at 88% 100%, #d4f5e9 99%, transparent);
}
/* Two painted rooms: the playroom behind the home screen, a window with a blurred sky behind the lessons. */
body[data-screen="home"]::before { background: url(img/bg-home.jpg) 30% 100% / cover no-repeat, var(--bg); }
body:is([data-screen="math"], [data-screen="lesson"], [data-screen="eng"])::before { background: url(img/bg-window.jpg) 50% 50% / cover no-repeat, var(--bg); }
body:is([data-screen="home"], [data-screen="math"], [data-screen="lesson"], [data-screen="eng"])::after { display: none; }

main > section {
  min-height: 100dvh;
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px clamp(16px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

h1 { margin: 0; font-size: 44px; line-height: 1.25; font-weight: 900; word-break: keep-all; }
p { margin: 0; }

button, input { font: inherit; color: inherit; }
fieldset { margin: 0; padding: 0; border: 0; min-inline-size: 0; }

button, .btn {
  --edge: var(--key-edge);
  min-height: 64px;
  padding: 0 28px;
  border: 0;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--gloss), 0 6px 0 var(--edge);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.1s ease, opacity 0.12s ease;
}
.btn { display: inline-flex; align-items: center; color: inherit; text-decoration: none; }
button:active:not(:disabled), .btn:active { transform: translateY(4px); box-shadow: var(--gloss), 0 2px 0 var(--edge); }
button:disabled { opacity: 0.5; cursor: default; }
:focus-visible { outline: 4px solid var(--math); outline-offset: 4px; }
.primary { --edge: var(--math-edge); background: var(--math); color: var(--on-color); font-weight: 900; }

.note { color: var(--muted); font-size: 18px; font-weight: 500; }
.say { min-height: 1.5em; font-size: 32px; font-weight: 900; color: var(--math); text-align: center; }
/* Next to the buddy, its words sit in a speech bubble. */
.cheer .say {
  --bubble: var(--surface);
  position: relative;
  padding: 14px 26px;
  border-radius: var(--radius);
  background: var(--bubble);
  box-shadow: 0 6px 0 var(--line);
  color: var(--text);
}
.cheer .say::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  translate: 0 -50%;
  border: 14px solid transparent;
  border-left: 0;
  border-right-color: var(--bubble);
}
.cheer .say:empty { visibility: hidden; }

/* Parent setup */
.token { margin: auto; width: min(100%, 560px); display: flex; flex-direction: column; gap: 12px; }
.token input {
  min-height: 64px;
  padding: 0 16px;
  border: 3px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  user-select: text;
}

/* Buddy pick */
.pick { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; }
.pick button {
  width: 240px;
  padding: 28px 16px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 36px;
  font-weight: 900;
}
.pick img { width: 150px; height: 150px; }

/* Home: today's three cards and the gift on the left, the buddy talks on the right. */
.desk {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 24px 32px;
}
#go-math  { --c: var(--math); --c-soft: var(--math-soft); }
#go-eng   { --c: var(--eng); --c-soft: var(--eng-soft); }
#go-chat  { --c: var(--chat); --c-soft: var(--chat-soft); }
.tasks {
  grid-column: 1;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.task {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 20px 20px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.task img { width: min(100%, 210px); aspect-ratio: 1; padding: 14px; border-radius: 50%; background: var(--c-soft); }
.task-name { font-size: 32px; font-weight: 900; color: var(--c); }
/* How far she got today, as a bar in the subject color. */
.bar-p {
  width: 100%;
  height: 20px;
  border-radius: 999px;
  background: linear-gradient(var(--c) 0 0) left / calc(var(--p, 0) * 100%) 100% no-repeat, var(--line);
}
/* The next thing to do: a pink outline (and a gentle nudge, under Motion). */
.task.next, .gift-bar.next { box-shadow: var(--gloss), 0 6px 0 var(--edge), 0 0 0 6px var(--surface), 0 0 0 12px var(--math); }
.task.done { background: var(--chat-soft); }
.task.done::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--chat) url(img/ui/check.svg) center / 60% no-repeat;
  box-shadow: 0 0 0 4px var(--surface);
}
/* The gift opens once all three are done; until then it is plain and gray (no lock, see design-system §11). */
.gift-bar { --edge: var(--gift); grid-column: 1; min-height: 120px; display: flex; align-items: center; justify-content: center; gap: 20px; background: var(--gift-soft); }
.gift-bar img { width: 96px; height: 96px; }
.gift-bar .task-name { color: var(--gift); }
.gift-bar:disabled { --edge: var(--line); opacity: 1; background: var(--surface); }
.gift-bar:disabled img { filter: grayscale(0.8) opacity(0.5); }
.gift-bar:disabled .task-name { color: var(--muted); }
.tools { grid-column: 1; display: flex; flex-wrap: wrap; gap: 12px; }
.tool { min-height: 72px; padding: 6px 22px 6px 8px; display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 900; }
.tool img { width: 56px; height: 56px; }
.book-btn { flex: none; min-height: 88px; padding: 8px 22px; display: flex; align-items: center; gap: 10px; font-weight: 900; }
.book-btn img { width: 56px; height: 56px; }
/* Button icons (img/ui, Phosphor fill): white glyph in a circle of the subject color. */
.ico { padding: 12px; border-radius: 50%; background: var(--ic, var(--math)); }
#go-map .ico { --ic: var(--eng); }
.buddy-talk {
  grid-column: 2;
  grid-row: 1 / -1;
  min-height: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  background: none;
  box-shadow: none;
}
.buddy-talk:active:not(:disabled) { transform: scale(0.98); box-shadow: none; }
.buddy { width: min(100%, 320px); aspect-ratio: 1; flex: none; }
.speech {
  position: relative;
  padding: 18px 26px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 6px 0 var(--line);
  font-size: 28px;
  font-weight: 900;
  text-align: left;
  word-break: keep-all;
}
.speech::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  translate: -50% 0;
  border: 16px solid transparent;
  border-bottom: 0;
  border-top-color: var(--surface);
}
.foot { display: flex; justify-content: space-between; gap: 16px; color: var(--muted); font-size: 18px; }

/* Activity header: no strip, just the home key and the buddy's bubble. */
.bar { display: flex; align-items: center; gap: 20px; }
.bar .cheer { flex: 1; justify-content: flex-start; min-width: 0; }
.bar .cheer .say { font-size: 28px; text-align: left; }
/* Home button: a round key in the screen's subject color. */
#eng { --ic: var(--eng); --ic-edge: var(--eng-edge); }
#chat { --ic: var(--chat); --ic-edge: var(--chat-edge); }
.bar .quit { --edge: var(--ic-edge, var(--math-edge)); width: 96px; height: 96px; padding: 0; border-radius: 50%; background: var(--ic, var(--math)); }
.bar .quit img { width: 52px; height: 52px; display: block; margin: auto; }
.bar .lv:empty { display: none; }
.bar .lv {
  padding: 6px 18px;
  border-radius: 999px;
  background: var(--math-soft);
  color: var(--math-edge);
  font-weight: 900;
}
.dots { margin-left: auto; max-width: 60%; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.dots i { width: 22px; height: 22px; border-radius: 50%; background: var(--line); }
.dots i.on { background: var(--chat); }
/* In the problem card the progress row is big and centered, clear of the hint key. */
.ask .dots, .listen .dots { margin: 0; max-width: none; justify-content: center; gap: 10px; }
.ask .dots { margin-right: 110px; min-height: 96px; align-items: center; margin-top: -26px; }
.ask .dots i, .listen .dots i { width: 30px; height: 30px; box-shadow: inset 0 -4px 0 rgb(0 0 0 / 0.08); }

/* Math */
.work { flex: 1; display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 32px; }
.ask {
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 8px 0 var(--line);
}
.question {
  font-size: clamp(48px, 7vw, 92px);
  font-weight: 900;
  line-height: 1.3;
  text-align: center;
  word-break: keep-all;
  font-variant-numeric: tabular-nums;
}
.question.ko { font-size: clamp(36px, 5vw, 60px); }
.slot {
  display: inline-block;
  min-width: 1.6em;
  margin: 0 0.1em;
  padding: 0 0.2em;
  border-radius: 0.3em;
  border: 4px dashed var(--math);
  background: var(--math-soft);
  color: var(--math);
  text-align: center;
}
.slot.right { border-style: solid; border-color: var(--chat); background: var(--chat); color: var(--on-color); }
.slot.fix { border-style: solid; background: transparent; }
.pad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 14px; }
/* Chunky keys: a deeper edge than other buttons so they read as real keys. */
.pad button { min-height: 108px; padding: 0; font-size: 48px; font-weight: 900; box-shadow: var(--gloss), 0 10px 0 var(--edge); }
.pad button:active:not(:disabled) { transform: translateY(8px); box-shadow: var(--gloss), 0 2px 0 var(--edge); }
.pad [data-key="del"] { font-size: 36px; color: var(--muted); }
/* The one-second lock after each question ignores taps without fading the keys. */
.pad:disabled button:disabled { opacity: 1; }
.pad [data-key="ok"] { --edge: var(--chat-edge); background: var(--chat); color: var(--on-color); font-size: 34px; }

/* Math pictures (math.js picture()): the same objects the textbook uses. */
.ask { position: relative; }
.hint { --edge: var(--math-edge); position: absolute; top: 14px; right: 14px; min-height: 0; width: 96px; height: 96px; padding: 20px; border-radius: 50%; background: var(--math); }
.hint img { width: 100%; height: 100%; }
.pic { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 14px; }
.pic .cell { width: 34px; height: 34px; border-radius: 50%; display: block; }
/* Story numbers from step 8: cards to read, not things to count. */
.pic.cards { align-items: center; gap: 28px; }
.pic.cards .num { min-width: 120px; padding: 12px 20px; border-radius: var(--radius); background: var(--math-soft); color: var(--math); font-size: 64px; font-weight: 900; text-align: center; }
.cell.a { background: #ffc93c; box-shadow: inset 0 -4px 0 #d99a0b; }
.cell.b { background: var(--eng); box-shadow: inset 0 -4px 0 var(--eng-edge); }
.cell.c { background: #3cc48a; box-shadow: inset 0 -4px 0 #25966a; }
.cell.out { background: #eadde6; position: relative; }
.cell.out::after { content: "×"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--math); font-size: 26px; font-weight: 900; }
.stones .stones { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 460px; }
.frame {
  display: grid;
  grid-template-columns: repeat(5, 40px);
  grid-auto-rows: 40px;
  gap: 4px;
  padding: 6px;
  border-radius: 12px;
  background: #fff;
  box-shadow: inset 0 0 0 3px var(--line);
}
.frame .cell { width: 40px; height: 40px; }
.frame .cell:empty:not(.a):not(.b):not(.c):not(.out) { background: #f6eef3; }
.blocks .bars { display: flex; align-items: flex-end; gap: 5px; }
.blocks .ten {
  width: 18px;
  height: 120px;
  border-radius: 4px;
  background: repeating-linear-gradient(to top, #ffc93c 0 10px, #d99a0b 10px 12px);
}
/* Same colors as the stones: yellow for the first number, purple for the second. */
.blocks .ten.b { background: repeating-linear-gradient(to top, var(--eng) 0 10px, var(--eng-edge) 10px 12px); }
.blocks .ten.out { background: #eadde6; position: relative; }
.blocks .ten.out::after { content: "×"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--math); font-size: 26px; font-weight: 900; }
.frame.small { grid-template-columns: repeat(5, 28px); grid-auto-rows: 28px; }
.frame.small .cell { width: 28px; height: 28px; }
.frame.small .cell.out::after { font-size: 20px; }
.groups .group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
  max-width: 140px;
  padding: 8px;
  border-radius: 20px;
  background: #fff;
  box-shadow: inset 0 0 0 3px var(--line);
}
.groups img { width: 38px; height: 38px; }
.groups .sum { width: 100%; text-align: center; color: var(--muted); font-size: 20px; }

/* English: the prompt picture, picture choices and the answer card */
.prompt { width: 150px; height: 150px; }
.choices.pics button { min-height: 150px; }
.choices.pics img { width: 110px; height: 110px; }
.card { flex-direction: column; align-items: center; gap: 6px; }
.card img { width: 150px; height: 150px; }
.card-word { font-size: clamp(96px, 10vw, 120px); font-weight: 700; line-height: 1.1; letter-spacing: 0.02em; }
.card-word b { color: var(--math); text-decoration: underline dotted 6px; text-underline-offset: 0.12em; }
/* English letters in Andika (one-storey a and g); Korean in the same element falls through to KidRound. */
.card-word, .choices button, .bubble, .fish { font-family: KidLatin, KidRound, sans-serif; }
.card-meaning { font-size: 30px; color: var(--muted); }

.dunno { align-self: center; min-height: 96px; font-size: 22px; color: var(--muted); }

/* Learning map: one island per step, the buddy on the current one */
.map-title { margin: 8px 0 0; font-size: 30px; }
.isles { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.isles li {
  position: relative;
  min-height: 84px;
  padding: 14px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 6px 0 var(--line);
  text-align: center;
  font-size: 20px;
  font-weight: 900;
  word-break: keep-all;
}
.isles .done { background: var(--chat-soft); color: var(--chat-edge); }
.isles .now { background: var(--math); color: var(--on-color); box-shadow: 0 6px 0 var(--math-edge); }
.isles .now img { position: absolute; top: -30px; right: -8px; width: 56px; height: 56px; }
.isles .locked { background: none; box-shadow: inset 0 0 0 3px var(--line); color: var(--muted); }

/* Lesson */
.lesson { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
.lesson h1 { font-size: 48px; color: var(--math-edge); }
.lesson .ask { width: min(100%, 900px); }
.learned {
  padding: 14px 26px;
  border-radius: 999px;
  background: var(--math-soft);
  color: var(--math-edge);
  font-size: 28px;
  font-weight: 900;
}

/* English */
.listen { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.replay { min-height: 92px; padding: 0 44px; font-size: 32px; }
.replay { display: inline-flex; align-items: center; gap: 12px; }
.replay img { width: 52px; height: 52px; }
.choices { width: min(100%, 960px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.choices[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choices button { position: relative; min-height: 136px; padding: 0 12px; font-size: 60px; font-weight: 700; }
.choices.ko button { font-size: 32px; word-break: keep-all; }
/* Right and wrong never differ by color alone: a check badge, or fading and a shake. */
.choices button.right { --edge: var(--chat-edge); opacity: 1; background: var(--chat); color: var(--on-color); }
.choices button.right::after {
  content: "";
  position: absolute;
  top: -16px;
  right: -16px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--chat) url(img/ui/check.svg) center / 60% no-repeat;
  box-shadow: 0 0 0 4px var(--surface);
}
.choices button.wrong { opacity: 0.4; }
/* The lock while the word is spoken ignores taps without fading the cards (design-system §5). */
.choices:disabled button:disabled:not(.wrong) { opacity: 1; }

/* Conversation */
#chat { height: 100dvh; }
.log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; padding: 4px; }
.bubble { max-width: 78%; padding: 18px 24px; border-radius: var(--radius); font-size: 27px; font-weight: 700; user-select: text; }
.bubble.ai { position: relative; margin-left: 76px; align-self: flex-start; background: var(--surface); box-shadow: 0 5px 0 var(--line); }
.bubble .face { position: absolute; left: -76px; top: -4px; width: 64px; height: 64px; }
.bubble.me { align-self: flex-end; background: var(--math-soft); color: var(--math-edge); }
.talk { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.mic {
  --edge: var(--chat-edge);
  --ring: rgb(26 129 88 / 0.4);
  width: 200px;
  height: 200px;
  padding: 0;
  border-radius: 50%;
  font-size: 28px;
  font-weight: 900;
  background: var(--chat);
  color: var(--on-color);
}
.mic { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.mic img { width: 72px; height: 72px; }
.mic[data-state="listen"] { opacity: 1; animation: listening 1.2s ease-out infinite; }
@keyframes listening {
  from { box-shadow: 0 6px 0 var(--edge), 0 0 0 0 var(--ring); }
  to { box-shadow: 0 6px 0 var(--edge), 0 0 0 32px transparent; }
}

/* Rest and finish */
.center { justify-content: center; align-items: center; text-align: center; }
.hero-img { width: 180px; height: 180px; }
#done-dots { margin: 0; max-width: none; justify-content: center; gap: 12px; }
#done-dots:empty { display: none; }
#done-dots i { width: 36px; height: 36px; box-shadow: inset 0 -4px 0 rgb(0 0 0 / 0.08); }
#done-dots i.again { background: #ffc93c; }
.sheet {
  width: min(100%, 720px);
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 6px 0 var(--line);
}
.cheer { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 96px; }
.cheer .mini { width: 96px; height: 96px; flex: none; padding: 8px; border-radius: 50%; background: var(--surface); box-shadow: 0 6px 0 var(--line); }
.party { width: 120px; height: 120px; }
.note.big { font-size: 24px; }

/* Fishing game (after the sticker) */
.pond {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: 1fr;
  gap: 72px;
  padding: 40px 72px 40px 40px;
  border-radius: var(--radius);
  background: #dff1ff;
}
.fish {
  position: relative;
  min-height: 150px;
  border-radius: 50% 44% 44% 50% / 50%;
  font-size: 64px;
  font-weight: 900;
  --c: var(--math);
  color: var(--c);
}
.fish { align-self: start; }
.fish:nth-child(2) { --c: #2f86d6; align-self: end; }
.fish:nth-child(3) { --c: #c9761a; align-self: center; }
.fish::after { /* tail */
  content: "";
  position: absolute;
  top: 50%;
  right: -30px;
  translate: 0 -50%;
  border: 28px solid transparent;
  border-right: 0;
  border-left: 36px solid var(--c);
}
.fish img { width: 110px; height: 110px; pointer-events: none; }
.fish.caught { --c: var(--chat); --edge: var(--chat-edge); background: var(--chat); color: var(--on-color); }

/* Sticker book */
.empty { margin: auto; text-align: center; color: var(--muted); font-size: 30px; font-weight: 900; }
.book {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  width: min(100%, 900px);
  margin-inline: auto;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 18px;
}
.book b { text-align: center; color: var(--muted); font-size: 22px; }
.book b:nth-child(n + 6):nth-child(-n + 7) { color: var(--math); }
.book span {
  aspect-ratio: 1;
  padding: 14px;
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 6px 0 var(--line);
  color: var(--muted);
  font-size: 18px;
}
.book span img { width: 100%; height: 100%; object-fit: contain; min-height: 0; }
.book .empty-slot { background: none; box-shadow: inset 0 0 0 4px var(--line); }
.drain { width: min(80%, 480px); height: 20px; border-radius: 10px; background: var(--line); overflow: hidden; }
.drain i { display: block; height: 100%; width: 100%; background: var(--math); }

/* Leave check */
.leave {
  padding: 32px 40px;
  border: 0;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 16px;
}
.leave:not([open]) { display: none; }
.leave::backdrop { background: rgb(59 45 79 / 0.35); }
.leave img { width: 96px; height: 96px; }
.leave p { font-size: 32px; font-weight: 900; }
/* Staying and leaving look the same, so the screen does not push her to stay. */
.leave button { min-width: 220px; min-height: 108px; background: var(--math-soft); font-size: 28px; font-weight: 900; }
.ebs { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

/* Motion: each one answers something she did, or points at what to do next. */
@media (prefers-reduced-motion: no-preference) {
  .task.next, .gift-bar.next { animation: nudge 2.4s ease-in-out infinite; }
  .mini.hop { animation: hop 0.5s var(--spring); }
  .mini.tilt { animation: tilt 0.6s ease; }
  .sticker-pop { animation: pop 0.8s var(--spring) 0.2s both, spin 6s linear 1s infinite; }
  .party { animation: pop 0.6s var(--spring); }
  .slot.right, .choices button.right { animation: pop 0.45s var(--spring); }
  .choices button.wrong { animation: shake 0.3s ease; }
  /* A right answer throws a few stars and hearts out of the answer box, once. */
  #m-q .slot.right { position: relative; }
  #m-q .slot.right::after, .choices button.hit::before {
    content: "";
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    width: 280px;
    height: 220px;
    translate: -50% -50%;
    pointer-events: none;
    background: url(img/ui/star.svg), url(img/ui/heart.svg), url(img/ui/star.svg), url(img/ui/heart.svg), url(img/ui/star.svg), url(img/ui/heart.svg);
    background-size: 40px;
    background-repeat: no-repeat;
    animation: burst 0.8s ease-out forwards;
  }
  .breathe { animation: breathe 4s ease-in-out infinite; }
  .say:not(:empty) { animation: rise 0.35s var(--spring); }
  .happy { animation: pop 0.7s var(--spring); }
  .bubble { animation: rise 0.3s var(--spring); }
  .fish { animation: swim 3s ease-in-out infinite; }
  .fish:nth-child(2) { animation-delay: -1s; }
  .fish:nth-child(3) { animation-delay: -2s; }
  .fish.wiggle { animation: tilt 0.5s; }
  .fish.caught { animation: reel 0.8s ease-in forwards; }
}
@keyframes swim { 0%, 100% { translate: 0 0; } 50% { translate: -18px -10px; } }
@keyframes reel { 30% { translate: 0 20px; } 100% { translate: 0 -220px; opacity: 0; } }
@keyframes burst {
  from { background-position: 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%; opacity: 1; }
  70% { opacity: 1; }
  to { background-position: 0% 10%, 100% 0%, 95% 95%, 5% 90%, 50% 0%, 60% 100%; opacity: 0; }
}
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes pop { 0% { transform: scale(0.6); } 100% { transform: scale(1); } }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-22px) scale(1.08); } }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@keyframes tilt { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-12deg); } 70% { transform: rotate(8deg); } }
@keyframes spin { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }

/* Portrait: the buddy and its words go on top, the cards below. */
@media (orientation: portrait), (max-width: 700px) {
  .desk { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; align-content: center; gap: 32px; }
  .buddy-talk { grid-column: 1; grid-row: 1; flex-direction: row-reverse; justify-content: flex-start; }
  .buddy { width: 160px; }
  .speech::before { left: -14px; top: 50%; translate: 0 -50%; border-width: 14px; border-left: 0; border-color: transparent var(--surface) transparent transparent; }
  .tasks { gap: 12px; }
  .task { padding: 14px 12px 20px; }
  .work { grid-template-columns: minmax(0, 1fr); align-content: center; }
  .question { font-size: clamp(72px, 10vw, 92px); }
  .question.ko { font-size: clamp(44px, 6vw, 60px); }
}

@media (prefers-reduced-motion: reduce) {
  button, .btn { transition: none; }
  .mic[data-state="listen"] { animation: none; box-shadow: 0 6px 0 var(--edge), 0 0 0 10px var(--ring); }
}