/* Games, laid out for an iPad (834 x 1112 points) held either way: a bar, the words
   at the top, the play area filling the screen, and the dots and one big button at
   the bottom. Touch targets are 64px and more, nothing scrolls while playing, and
   there are no hover states. Each game's own part is under its engine's heading. */

@font-face { font-family: 'Andika'; src: url('../fonts/andika.woff2') format('woff2'); font-display: block; }

:root {
  color-scheme: light;
  --bg: #fdf6ea;
  --ink: #1d2433;
  --muted: #5b6577;
  --line: #ecdcc4;
  --accent: #2f5fb3;
  --right: #1f9d55;
  --wrong: #d64545;
  --second: #f2a516;
  --gold: #f2b01e;
  --shadow: 0 2px 3px rgb(29 36 51 / 0.08), 0 10px 26px rgb(29 36 51 / 0.12);
  --ui: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --book: 'Andika', var(--ui);
  --emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  --pop: cubic-bezier(0.34, 1.8, 0.64, 1);
}

* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; }

body.games {
  background: var(--bg);
  color: var(--ink);
  font: 18px/1.4 var(--ui);
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: default; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--subject, var(--accent)) 50%, transparent); outline-offset: 2px; }

.app {
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  touch-action: manipulation;
}
.app > main:only-of-type:not(.stage) { grid-row: 2 / -1; }

.message { grid-row: 1 / -1; display: grid; place-content: center; padding: 24px; text-align: center; font-size: 22px; }

/* ---- The bar and buttons ---- */

.bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: #fff; }
.bar-title { flex: 1; min-width: 0; margin: 0; font-size: 30px; line-height: 1.2; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-icon { margin-right: 0.3em; font-family: var(--emoji); }

.round {
  flex: none;
  width: 60px;
  height: 60px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: #fff;
  font-size: 28px;
  line-height: 1;
  text-decoration: none;
  color: var(--ink);
}
.round.spacer { visibility: hidden; }

.big {
  min-height: 72px;
  padding: 0 34px;
  border: 3px solid var(--line);
  border-radius: 36px;
  background: #fff;
  font-size: 26px;
  white-space: nowrap;
  box-shadow: 0 5px 0 rgb(29 36 51 / 0.14);
}
.big.primary { color: #fff; box-shadow: 0 5px 0 color-mix(in srgb, var(--subject-dark) 60%, #000); }
.big:disabled { opacity: 0.45; }

.round:active, .big:active, .game-card:active, .level-tab:active { transform: translateY(3px) scale(0.98); }
.big:active { box-shadow: 0 2px 0 rgb(29 36 51 / 0.14); }

/* ---- Home: Kobi, the year levels and their games ---- */

.home {
  overflow-y: auto;
  padding: 14px 24px 32px;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 8% 12%, rgb(229 72 77 / 0.08) 0 60px, transparent 61px),
    radial-gradient(circle at 92% 30%, rgb(47 95 179 / 0.07) 0 90px, transparent 91px),
    radial-gradient(circle at 15% 85%, rgb(242 176 30 / 0.1) 0 110px, transparent 111px),
    radial-gradient(circle at 88% 92%, rgb(31 157 85 / 0.08) 0 70px, transparent 71px);
}
.hello { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 auto 6px; }
.hello-kobi { width: 104px; height: auto; animation: bob 2.6s ease-in-out infinite; filter: drop-shadow(0 6px 6px rgb(29 36 51 / 0.15)); }
.hello-bubble {
  position: relative;
  margin: 0;
  padding: 14px 24px;
  border-radius: 26px;
  background: #fff;
  box-shadow: var(--shadow);
  font: 600 28px/1.2 var(--ks-brand-font);
  color: var(--subject-dark);
}
.hello-bubble::before { content: ''; position: absolute; left: -12px; top: 50%; margin-top: -12px; border: 12px solid transparent; border-left: 0; border-right-color: #fff; }
.levels { display: flex; justify-content: center; gap: 12px; margin: 4px auto 22px; flex-wrap: wrap; }
.level-tab {
  min-width: 128px;
  min-height: 60px;
  padding: 0 22px;
  border: 3px solid var(--line);
  border-radius: 30px;
  background: #fff;
  font-size: 23px;
}
.level-tab[aria-selected="true"] { color: #fff; }

.game-grid {
  flex: 1 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  width: 100%;
  max-width: 1080px;
  max-height: 640px;
  margin: 0 auto;
}
.game-card {
  display: grid;
  grid-template-rows: minmax(170px, 1fr) auto auto auto auto;
  justify-items: center;
  align-content: start;
  gap: 6px;
  padding: 0 0 18px;
  border: 0;
  border-radius: 30px;
  background: #fff;
  box-shadow: var(--shadow);
  overflow: hidden;
  text-align: center;
}
.game-name { margin-top: 10px; padding: 0 12px; font: 600 27px/1.15 var(--ks-brand-font); color: var(--ink); }
.game-note { min-height: 2.6em; padding: 0 16px; color: var(--muted); font-size: 17px; line-height: 1.3; }
.game-score { font-size: 28px; }
.codes { font-size: 12px; color: var(--muted); letter-spacing: 0.02em; }
.home-note { max-width: 640px; margin: 26px auto 0; text-align: center; color: var(--muted); font-size: 16px; }

.stars { display: inline-flex; gap: 2px; }
.star { color: #dcd3c2; }
.star.on { color: var(--gold); text-shadow: 0 1px 0 #c98b00; }

/* A card's picture: a sky, a hill and three things bobbing about. */
.card-art {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 170px;
  display: block;
  overflow: hidden;
  background: linear-gradient(180deg, var(--sky), color-mix(in srgb, var(--sky) 55%, #fff));
}
.card-art::before {
  content: '';
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -48%;
  height: 80%;
  border-radius: 50%;
  background: var(--ground);
  box-shadow: inset 0 10px 0 rgb(255 255 255 / 0.25);
}
.card-art.dark::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(2px 2px at 20% 30%, #fff 50%, transparent 51%), radial-gradient(2px 2px at 70% 20%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 45% 60%, #fff 50%, transparent 51%), radial-gradient(2px 2px at 85% 55%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 10% 70%, #fff 50%, transparent 51%);
}
.art::before { content: attr(data-pic); }
.art {
  position: absolute;
  z-index: 1;
  font: 64px/1 var(--emoji);
  filter: drop-shadow(0 6px 4px rgb(29 36 51 / 0.2));
  animation: bob 2.6s ease-in-out infinite;
}
.art-0 { left: 10%; bottom: 30%; font-size: clamp(44px, 6.5vh, 70px); animation-delay: -0.8s; }
.art-1 { left: 50%; bottom: 20%; translate: -50% 0; font-size: clamp(80px, 11vh, 130px); animation-delay: -1.6s; }
.art-2 { right: 10%; bottom: 36%; font-size: clamp(40px, 6vh, 64px); animation-delay: -0.2s; }
.game-card .art-1 { filter: drop-shadow(0 12px 6px rgb(29 36 51 / 0.22)); }
@keyframes bob { 50% { transform: translateY(-10px) rotate(-4deg); } }

/* ---- Start: the game's card and a big Play button ---- */

/* margin: auto centres the card when it fits, and lets it scroll from its top when it doesn't. */
.start { display: flex; padding: 20px; overflow-y: auto; }
.start-card {
  margin: auto;
  width: min(560px, 100%);
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 0 0 30px;
  border-radius: 36px;
  background: #fff;
  box-shadow: var(--shadow);
  overflow: hidden;
  text-align: center;
}
.start-card .card-art { height: 280px; }
.start-card .art { font-size: 80px; }
.start-card .art-1 { font-size: 130px; }
.start-name { margin: 14px 0 0; font: 600 44px/1.1 var(--ks-brand-font); color: var(--subject-dark); }
.start-note { margin: 0; padding: 0 24px; color: var(--muted); font-size: 21px; }
.start-best { font-size: 34px; }
/* Room above Play for the bouncing hand that points at it. */
.play { min-width: 240px; min-height: 84px; margin-top: 54px; font-size: 32px; }

/* ---- Playing: the words at the top, the stage, the dots and the button ---- */

.prompt {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 20px;
  min-height: 84px;
  padding: 10px 20px;
  background: #fff;
  box-shadow: 0 6px 12px -8px rgb(29 36 51 / 0.25);
  position: relative;
  z-index: 2;
}
.prompt-line { margin: 0; font: 24px/1.35 var(--book); text-align: center; max-width: 760px; }
.sign {
  margin: 0;
  min-width: 96px;
  padding: 4px 26px;
  border: 4px solid var(--subject);
  border-radius: 999px;
  background: var(--subject-soft);
  font: 600 48px/1.15 var(--ks-brand-font);
  color: var(--subject-dark);
  text-align: center;
  white-space: nowrap;
}
.sign-part { display: inline-block; padding: 0 0.12em; border-radius: 0.2em; transition: background-color 0.1s, transform 0.15s; }
.sign-part.now { background: #fff; transform: scale(1.12); }

.stage { position: relative; overflow: hidden; touch-action: none; }

.controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 96px;
  padding: 12px 22px;
  background: #fff;
  box-shadow: 0 -6px 12px -8px rgb(29 36 51 / 0.25);
  position: relative;
  z-index: 2;
}
.dots { display: flex; flex-wrap: wrap; gap: 10px; }
.dot { width: 20px; height: 20px; border-radius: 50%; background: var(--line); }
.dot.now { background: #fff; box-shadow: inset 0 0 0 4px var(--subject); }
.dot.first { background: var(--right); }
.dot.second { background: var(--second); }
.dot.shown { background: var(--wrong); }
.actions { display: flex; gap: 12px; }
.action { min-width: 200px; }

/* A thing that was not right shakes; one that was right bounces. */
.shake { animation: shake 0.42s ease-in-out; }
@keyframes shake { 20% { translate: -10px 0; } 40% { translate: 9px 0; } 60% { translate: -6px 0; } 80% { translate: 4px 0; } }
.bounce { animation: bounce 0.5s var(--pop); }
@keyframes bounce { 40% { transform: scale(1.18); } }

/* ---- The end: Kobi, the stars and Play again ---- */

.end { display: flex; padding: 20px; overflow-y: auto; }
.end-card {
  margin: auto;
  width: min(560px, 100%);
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 26px 24px 30px;
  border-radius: 36px;
  background: #fff;
  box-shadow: var(--shadow);
  text-align: center;
}
.end-kobi { width: 150px; height: auto; animation: bob 2.4s ease-in-out infinite; }
.end-title { margin: 0; font: 600 36px/1.2 var(--ks-brand-font); color: var(--subject-dark); }
.end-stars { display: flex; gap: 14px; font-size: 76px; line-height: 1; }
.end-star { color: #e6dfd2; transition: color 0.2s; }
.end-star.on { color: var(--gold); text-shadow: 0 3px 0 #c98b00; animation: star-in 0.6s var(--pop); }
@keyframes star-in { 0% { transform: scale(0.2) rotate(-40deg); } 70% { transform: scale(1.3) rotate(8deg); } }
.end-best { margin: 0; color: var(--muted); font-size: 18px; }
.end-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 12px; }

/* The KidStudy logo, small in a corner of every game (as in the lessons' scenes). */
.wm {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 6;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.72);
  box-shadow: 0 2px 8px rgb(29 36 51 / 0.12);
  opacity: 0.88;
  pointer-events: none;
}
.wm img { display: block; width: 92px; height: auto; }

/* ---- Smaller screens: a phone, or an iPad in a split view ---- */

@media (max-width: 760px) {
  .game-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 520px; }
  .game-grid { max-height: none; }
  .game-card { grid-template-columns: 150px minmax(0, 1fr); grid-template-rows: auto auto auto auto; justify-items: start; text-align: left; padding: 0; column-gap: 14px; }
  .game-card .card-art { grid-row: 1 / -1; height: 100%; min-height: 150px; }
  .game-card .art { font-size: 34px; }
  .game-card .art-1 { font-size: 58px; }
  .game-name { margin-top: 14px; padding: 0; font-size: 23px; }
  .game-note { padding: 0 12px 0 0; font-size: 15px; }
  .game-score { font-size: 22px; }
  .codes { padding-bottom: 12px; }
}
@media (max-width: 600px), (max-height: 500px) {
  .bar { padding: 6px 10px; }
  .round { width: 48px; height: 48px; font-size: 22px; }
  .bar-title { font-size: 22px; }
  .home { padding: 10px 14px 24px; }
  .hello-kobi { width: 64px; }
  .hello-bubble { font-size: 20px; padding: 10px 16px; }
  .wm img { width: 64px; }
  .wm { right: 8px; top: 8px; padding: 3px 7px; }
  .levels { gap: 8px; margin-bottom: 16px; }
  .level-tab { min-width: 0; min-height: 48px; font-size: 17px; padding: 0 12px; border-width: 2px; }
  .game-note { min-height: 0; }
  .prompt { min-height: 60px; padding: 6px 12px; gap: 4px 12px; }
  .prompt-line { font-size: 18px; }
  .sign { font-size: 32px; min-width: 70px; padding: 2px 16px; border-width: 3px; }
  .controls { min-height: 70px; padding: 8px 12px; }
  .dot { width: 14px; height: 14px; }
  .dots { gap: 6px; }
  .big { min-height: 56px; font-size: 20px; padding: 0 22px; }
  .action { min-width: 0; }
  .start-card .card-art { height: 170px; }
  .start-name { font-size: 32px; }
  .play { min-height: 64px; margin-top: 46px; font-size: 26px; }
  .end-kobi { width: 100px; }
  .end-stars { font-size: 54px; }
  .end-title { font-size: 28px; }
}
/* A phone held sideways: the picture beside the words, so Play is on screen without scrolling. */
@media (max-height: 500px) {
  .start { padding: 10px 16px; }
  .start-card { grid-template-columns: minmax(170px, 38%) minmax(0, 1fr); column-gap: 18px; row-gap: 4px; width: min(720px, 100%); padding: 0 18px 0 0; align-items: center; }
  .start-card .card-art { grid-row: 1 / span 4; grid-column: 1; align-self: stretch; height: auto; min-height: 220px; }
  .start-card > :not(.card-art) { grid-column: 2; }
  .start-card .art { font-size: 44px; }
  .start-card .art-1 { font-size: 76px; }
  .start-name { margin-top: 10px; font-size: 28px; }
  .start-note { padding: 0; font-size: 16px; }
  .start-best { font-size: 24px; }
  .play { min-height: 56px; margin: 40px 0 14px; font-size: 22px; min-width: 180px; }
  .end { padding: 10px 16px; }
  .end-card { grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; row-gap: 6px; width: min(720px, 100%); padding: 14px 20px; }
  .end-kobi { grid-row: 1 / span 4; width: 96px; }
  .end-card > :not(.end-kobi) { grid-column: 2; }
  .end-title { font-size: 24px; }
  .end-stars { font-size: 44px; }
  .end-buttons { margin-top: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .art, .end-kobi, .hello-kobi, .end-star.on, .shake, .bounce { animation: none; }
}

/* ======================================================================================
   Balloon Pop and Times Rocket (js/games/float.js)
   ====================================================================================== */

.stage.sky { background: linear-gradient(180deg, #6cc4ff 0%, #a9e0ff 45%, #e3f6ff 100%); }
.stage.space { background: radial-gradient(ellipse at 50% 120%, #3b347a 0%, #1d2052 50%, #0f1130 100%); }
.scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.scene-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sun-rays { animation: spin 40s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes spin { to { rotate: 360deg; } }
.flowers g { animation: nod 3s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom; }
.flowers g:nth-child(2n) { animation-delay: -1.5s; }
@keyframes nod { 50% { rotate: 6deg; } }
.float-field { position: absolute; inset: 0; z-index: 1; }

.floater {
  position: absolute;
  left: 0;
  top: 0;
  padding: 0;
  border: 0;
  background: none;
  will-change: transform;
}
.floater-num { position: relative; z-index: 1; font: 600 52px/1 var(--ks-brand-font); color: #fff; text-shadow: 0 2px 0 rgb(0 0 0 / 0.25); }
.floater.gone { visibility: hidden; pointer-events: none; }
.floater.glow { filter: drop-shadow(0 0 14px #fff6a8) drop-shadow(0 0 26px #ffd23f); }
.floater.glow .floater-num { animation: bounce 0.9s var(--pop) infinite; }

.balloon { width: 112px; height: 136px; }
.balloon::before {
  content: '';
  position: absolute;
  inset: 0 0 18px;
  border-radius: 50% 50% 48% 48% / 56% 56% 44% 44%;
  background: radial-gradient(circle at 32% 28%, rgb(255 255 255 / 0.75) 0 9%, transparent 10%), radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--b) 70%, #fff), var(--b) 62%, color-mix(in srgb, var(--b) 75%, #000));
  box-shadow: inset -8px -10px 16px rgb(0 0 0 / 0.12);
}
.balloon::after { content: ''; position: absolute; left: 50%; bottom: 10px; width: 16px; height: 12px; translate: -50% 0; background: color-mix(in srgb, var(--b) 80%, #000); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.balloon .floater-num { position: absolute; left: 0; right: 0; top: 34px; text-align: center; }
.balloon-string { position: absolute; left: 50%; top: calc(100% - 10px); width: 2px; height: 70px; background: rgb(29 36 51 / 0.35); transform-origin: top; animation: sway 2s ease-in-out infinite; }
@keyframes sway { 50% { rotate: 8deg; } }

.cloud { position: absolute; z-index: 0; width: 180px; height: 60px; border-radius: 40px; background: #fff; opacity: 0.9; box-shadow: inset 0 -8px 0 rgb(170 210 240 / 0.45); animation: drift 60s linear infinite; }
.cloud::before, .cloud::after { content: ''; position: absolute; border-radius: 50%; background: #fff; }
.cloud::before { width: 80px; height: 80px; left: 26px; top: -40px; }
.cloud::after { width: 60px; height: 60px; right: 30px; top: -28px; }
.cloud.c1 { top: 14%; left: -200px; }
.cloud.c2 { top: 34%; left: -200px; animation-duration: 95s; animation-delay: -40s; scale: 0.6; opacity: 0.7; }
.cloud.c3 { top: 5%; left: -200px; animation-duration: 75s; animation-delay: -62s; scale: 1.2; }
.cloud.c4 { top: 24%; left: -200px; animation-duration: 120s; animation-delay: -15s; scale: 0.45; opacity: 0.6; }
@keyframes drift { to { translate: calc(100vw + 400px) 0; } }

.planet { width: 132px; height: 132px; display: grid; place-items: center; }
.planet::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 34% 30%, color-mix(in srgb, var(--p1) 60%, #fff), var(--p1) 45%, var(--p2)); box-shadow: 0 0 28px color-mix(in srgb, var(--p1) 70%, transparent), inset -12px -14px 22px rgb(0 0 0 / 0.28); }
.planet::after { content: ''; position: absolute; left: 18%; top: 16%; width: 14%; height: 10%; border-radius: 50%; background: rgb(0 0 0 / 0.08); box-shadow: 62px 4px 0 -3px rgb(0 0 0 / 0.07); }
.planet .floater-num { text-shadow: 0 2px 0 rgb(0 0 0 / 0.3), 0 0 10px rgb(0 0 0 / 0.25); }
.planet-ring { position: absolute; left: -16%; right: -16%; top: 70%; height: 14%; border: 3px solid rgb(255 255 255 / 0.5); border-radius: 50%; transform: rotate(-14deg); pointer-events: none; }
.twinkle-a { animation: twinkle 3.2s ease-in-out infinite; }
.twinkle-b { animation: twinkle 4.6s ease-in-out infinite -2s; }
@keyframes twinkle { 50% { opacity: 0.35; } }
.shooting-star { position: absolute; top: 12%; left: 60%; width: 140px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #fff, transparent); rotate: -24deg; opacity: 0; animation: shoot 9s ease-in 3s infinite; }
@keyframes shoot { 0% { opacity: 0; translate: 0 0; } 3% { opacity: 1; } 10% { opacity: 0; translate: -420px 190px; } 100% { opacity: 0; translate: -420px 190px; } }
.rocket { position: absolute; z-index: 2; left: 50%; bottom: 14px; width: 90px; height: 110px; margin-left: -45px; pointer-events: none; }
.rocket-body { position: absolute; left: 50%; top: 0; translate: -50% 0; font: 76px/1 var(--emoji); rotate: -45deg; filter: drop-shadow(0 0 10px rgb(120 160 255 / 0.5)); }
.rocket-flame { position: absolute; left: 50%; top: 74px; width: 24px; height: 34px; margin-left: -12px; border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%; background: radial-gradient(circle at 50% 30%, #fff8c4, #ffb400 45%, #ff5a1f 80%, transparent 82%); animation: flame 0.18s ease-in-out infinite alternate; transform-origin: top; }
@keyframes flame { to { scale: 0.85 1.25; } }

.shard { position: absolute; z-index: 3; width: 16px; height: 16px; border-radius: 4px; pointer-events: none; }

@media (max-width: 600px), (max-height: 420px) {
  .balloon { width: 78px; height: 96px; }
  .balloon .floater-num { top: 22px; }
  .floater-num { font-size: 36px; }
  .planet { width: 92px; height: 92px; }
  .rocket { scale: 0.7; transform-origin: bottom; }
}
@media (prefers-reduced-motion: reduce) {
  .cloud, .balloon-string, .twinkle-a, .twinkle-b, .shooting-star, .sun-rays, .flowers g, .rocket-flame, .floater.glow .floater-num { animation: none; }
}

/* ======================================================================================
   Feed Kobi (js/games/feed.js): a gum tree on a grassy hill, Kobi and a plate.
   The leaves are drawn (SVG); they hang and sway on the tree and lie down on the plate.
   ====================================================================================== */

.feed-scene {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 56% 44%;
  background: linear-gradient(180deg, #a9dcff 0%, #d4efff 45%, #eef9ff 70%);
  overflow: hidden;
}
.feed-scene > .cloud { z-index: 0; }
.feed-sun {
  position: absolute;
  top: 5%;
  right: 7%;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 38%, #fff7c2, #ffd84a 55%, #ffc21a);
  box-shadow: 0 0 0 14px rgb(255 216 74 / 0.22), 0 0 50px 20px rgb(255 216 74 / 0.35);
  animation: sun-glow 4s ease-in-out infinite;
}
@keyframes sun-glow { 50% { box-shadow: 0 0 0 22px rgb(255 216 74 / 0.16), 0 0 60px 26px rgb(255 216 74 / 0.3); } }
.feed-hill {
  position: absolute;
  left: -25%;
  right: 15%;
  bottom: 14%;
  height: 42%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 20%, #cdeeb4, #a8d98c 70%);
}
.feed-ground {
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: 0;
  height: 26%;
  border-radius: 50% 50% 0 0 / 30px 30px 0 0;
  background:
    radial-gradient(circle at 12% 18%, #7cc25d 0 6px, transparent 7px),
    radial-gradient(circle at 64% 30%, #7cc25d 0 5px, transparent 6px),
    radial-gradient(circle at 86% 12%, #7cc25d 0 7px, transparent 8px),
    linear-gradient(180deg, #96d677 0%, #79bf5b 40%, #64ab49 100%);
  box-shadow: inset 0 6px 0 rgb(255 255 255 / 0.25);
}

/* ---- The gum tree: a pale trunk with peeling bark and a soft sage canopy ---- */

.gum-tree { position: relative; grid-column: 1; min-width: 0; }
.trunk {
  position: absolute;
  left: 50%;
  bottom: 9%;
  width: 15%;
  height: 52%;
  translate: -50% 0;
  border-radius: 46% 46% 18% 18% / 10% 10% 6% 6%;
  background:
    radial-gradient(ellipse 30% 9% at 30% 30%, #c9b79b 60%, transparent 62%),
    radial-gradient(ellipse 26% 7% at 70% 62%, #c3b093 60%, transparent 62%),
    radial-gradient(ellipse 22% 6% at 40% 84%, #cbbb9f 60%, transparent 62%),
    linear-gradient(90deg, #b4a285 0%, #efe6d6 34%, #e2d6c1 58%, #a8957a 100%);
  box-shadow: 8px 6px 14px rgb(60 70 40 / 0.18);
}
.gum-tree::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: 34%;
  height: 7%;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(30 60 20 / 0.3), transparent 70%);
}
.limb {
  position: absolute;
  bottom: 78%;
  width: 46%;
  height: 50%;
  border-radius: 40% 40% 10% 10%;
  background: linear-gradient(90deg, #b4a285, #ece2d0 45%, #a8957a);
  transform-origin: bottom center;
}
.limb.l1 { left: -10%; rotate: -28deg; }
.limb.l2 { right: -10%; rotate: 30deg; }
.canopy {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(ellipse at 38% 30%, #d9f1d2 0%, #b3dfae 45%, #8cc58e 100%);
  box-shadow: inset -10px -14px 24px rgb(40 100 50 / 0.22), 0 10px 22px rgb(40 80 50 / 0.15);
}
.canopy.b1 { left: 0; top: 4%; width: 54%; height: 42%; }
.canopy.b2 { right: 0; top: 2%; width: 56%; height: 44%; }
.canopy.b3 { left: 2%; top: 28%; width: 50%; height: 40%; }
.canopy.b4 { right: 2%; top: 26%; width: 52%; height: 42%; }
.canopy.b5 { left: 20%; top: 12%; width: 60%; height: 50%; background: radial-gradient(ellipse at 40% 30%, #e2f5da 0%, #bde5b6 45%, #95cc95 100%); }

.leaf-bed { position: absolute; left: 4%; right: 4%; top: 3%; bottom: 32%; }

/* ---- A gum leaf: hangs from its stalk on the tree, lies down on the plate ---- */

.leaf {
  position: absolute;
  width: calc(var(--leaf, 90px) * 0.66);
  height: var(--leaf, 90px);
  padding: 0;
  border: 0;
  background: none;
  rotate: var(--r, 0deg);
  transform-origin: 50% 8%;
  touch-action: none;
  filter: drop-shadow(0 4px 3px rgb(30 70 40 / 0.28));
}
.leaf svg { display: block; width: 100%; height: 100%; pointer-events: none; transform-origin: 50% 4%; animation: leaf-sway 3.2s ease-in-out infinite; }
.leaf:nth-child(3n) svg { animation-duration: 2.7s; animation-delay: -1.1s; }
.leaf:nth-child(3n + 1) svg { animation-duration: 3.6s; animation-delay: -2s; }
@keyframes leaf-sway { 50% { rotate: 7deg; } }
.leaf.dragging { z-index: 50; filter: drop-shadow(0 14px 10px rgb(30 70 40 / 0.35)); }
.leaf.dragging svg { animation: none; }

/* ---- Kobi, the plate and the count ---- */

.kobi-spot { position: relative; grid-column: 2; min-width: 0; }
.feed-kobi {
  position: absolute;
  left: 50%;
  bottom: 21%;
  height: min(58%, 340px);
  width: auto;
  translate: -50% 0;
  transform-origin: 50% 100%;
  animation: breathe 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes breathe { 50% { transform: scale(1.015, 1.03); } }
.feed-kobi.chomp { animation: chomp 0.9s cubic-bezier(0.34, 1.6, 0.64, 1); }
@keyframes chomp {
  15% { transform: scale(1.08, 0.9); }
  35% { transform: scale(0.95, 1.1) translateY(-18px); }
  55% { transform: scale(1.04, 0.95); }
  70% { transform: scale(0.98, 1.04) translateY(-6px); }
  85% { transform: scale(1.02, 0.98); }
}
.feed-kobi.no { animation: kobi-no 0.6s ease-in-out; }
@keyframes kobi-no { 20% { rotate: -6deg; } 45% { rotate: 6deg; } 70% { rotate: -4deg; } 90% { rotate: 2deg; } }
.kobi-shadow {
  position: absolute;
  left: 50%;
  bottom: 18%;
  width: min(62%, 240px);
  height: 26px;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(30 60 20 / 0.32), transparent 70%);
}
.plate {
  position: absolute;
  left: 50%;
  bottom: 3%;
  width: min(92%, 340px);
  aspect-ratio: 300 / 110;
  translate: -50% 0;
}
.plate-art { display: block; width: 100%; height: 100%; }
.plate-shadow {
  position: absolute;
  left: 50%;
  bottom: 1%;
  width: min(96%, 356px);
  height: 30px;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(30 60 20 / 0.3), transparent 70%);
}
.pile {
  position: absolute;
  left: 11%;
  right: 11%;
  top: -14%;
  bottom: 24%;
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: center;
  align-content: flex-start;
}
.pile .leaf {
  position: relative;
  left: auto !important;
  top: auto !important;
  width: var(--pl, 50px);
  height: calc(var(--pl, 50px) * 0.5);
  margin: calc(var(--pl, 50px) * 0.03) calc(var(--pl, 50px) * 0.04);
  rotate: 0deg;
  transform-origin: 50% 50%;
}
.pile .leaf svg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--pl, 50px) * 0.5);
  height: var(--pl, 50px);
  translate: -50% -50%;
  rotate: calc(90deg + var(--pr, 0deg));
  transform-origin: 50% 50%;
  animation: none;
}
.pile.numbered .leaf::after {
  content: attr(data-n);
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  min-width: clamp(16px, calc(var(--pl, 50px) * 0.42), 26px);
  height: clamp(16px, calc(var(--pl, 50px) * 0.42), 26px);
  padding: 0 2px;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 2px 4px rgb(29 36 51 / 0.25);
  font: 600 clamp(11px, calc(var(--pl, 50px) * 0.3), 17px)/clamp(16px, calc(var(--pl, 50px) * 0.42), 26px) var(--ks-brand-font);
  color: var(--subject-dark);
}
.tally {
  position: absolute;
  right: -2%;
  top: -58%;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border: 4px solid #fff;
  border-radius: 50%;
  font: 600 40px/1 var(--ks-brand-font);
  color: #fff;
  box-shadow: 0 6px 14px rgb(29 36 51 / 0.25);
  visibility: hidden;
}
.tally.show { visibility: visible; animation: tally-pop 0.5s cubic-bezier(0.34, 1.8, 0.64, 1); }
.tally.right { background: var(--right); }
.tally.wrong { background: var(--second); }
@keyframes tally-pop { from { transform: scale(0.2); } }

/* ---- Smaller screens ---- */

/* A phone held upright: the tree fills the scene, and Kobi and the plate stand in front of it. */
@media (max-width: 600px) and (orientation: portrait) {
  .feed-scene { grid-template-columns: 100%; grid-template-rows: 54% 46%; }
  .gum-tree { grid-row: 1 / 3; grid-column: 1; }
  .kobi-spot { grid-row: 2; grid-column: 1; }
  .leaf-bed { top: 2%; bottom: 47%; left: 3%; right: 3%; }
  .trunk { left: 22%; width: 13%; height: 52%; bottom: 8%; }
  .gum-tree::before { left: 22%; }
  .feed-sun { width: 54px; height: 54px; }
  .feed-kobi { left: 27%; height: 74%; bottom: 14%; }
  .kobi-shadow { left: 27%; width: 44%; bottom: 11%; }
  .plate { left: 70%; width: 56%; bottom: 8%; }
  .plate-shadow { left: 70%; width: 58%; bottom: 6%; }
  .tally { width: 50px; height: 50px; font-size: 28px; top: -62%; right: -2%; border-width: 3px; }
}
/* A phone on its side: little height, so Kobi and the plate sit side by side. */
@media (max-height: 500px) {
  .feed-scene { grid-template-columns: 54% 46%; }
  .feed-sun { width: 44px; height: 44px; top: 6%; right: 4%; }
  .feed-scene > .cloud { display: none; }
  .feed-kobi { left: 28%; height: 74%; bottom: 12%; }
  .kobi-shadow { left: 28%; width: 46%; bottom: 9%; height: 16px; }
  .plate { left: 72%; width: 54%; bottom: 6%; }
  .plate-shadow { left: 72%; width: 56%; bottom: 4%; }
  .tally { width: 44px; height: 44px; font-size: 24px; border-width: 3px; top: -58%; right: -4%; }
  .leaf-bed { top: 2%; bottom: 22%; }
  .trunk { height: 40%; }
}
@media (prefers-reduced-motion: reduce) {
  .feed-sun, .leaf svg, .feed-kobi { animation: none; }
}

/* ======================================================================================
   Animal Pairs and Clock Pairs (js/games/memory.js): cards on a felt mat on a wooden
   table. The cards turn over in 3D, with a shine on their backs and a gold edge on a pair.
   ====================================================================================== */

.mem-table {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  padding: clamp(10px, 2.4vmin, 26px);
  background:
    radial-gradient(ellipse at 50% 0%, rgb(255 240 210 / 0.45), transparent 60%),
    repeating-linear-gradient(0deg, rgb(90 50 20 / 0.05) 0 2px, transparent 2px 11px),
    repeating-linear-gradient(90deg, transparent 0 calc(25% - 2px), rgb(90 50 20 / 0.18) calc(25% - 2px) 25%),
    linear-gradient(90deg, #d8a06a, #c98f58 30%, #dba872 55%, #c78b54 80%, #d49b63);
}
.mem-mat {
  position: relative;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: clamp(12px, 2.6vmin, 30px);
  border-radius: clamp(18px, 3vmin, 32px);
  background: radial-gradient(ellipse at 50% 30%, #3fae72 0%, #2d8f5c 60%, #23764b 100%);
  box-shadow: inset 0 0 0 5px rgb(0 0 0 / 0.08), inset 0 14px 34px rgb(0 0 0 / 0.32), 0 10px 0 #9a6534, 0 18px 30px rgb(60 30 10 / 0.35);
}
.mem-table.clocks .mem-mat { background: radial-gradient(ellipse at 50% 30%, #4a83d0 0%, #3268b4 60%, #26559a 100%); }
.mem-mat::before {
  content: '';
  position: absolute;
  inset: clamp(5px, 1vmin, 10px);
  border: 2px dashed rgb(255 255 255 / 0.28);
  border-radius: clamp(13px, 2.4vmin, 24px);
  pointer-events: none;
}

.mem-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), var(--cw, 150px));
  grid-auto-rows: var(--ch, 190px);
  gap: var(--gap, 14px);
}

/* ---- A card: its back, its front, and the turn between them ---- */

.mem-card {
  position: relative;
  width: var(--cw, 150px);
  height: var(--ch, 190px);
  padding: 0;
  border: 0;
  background: none;
  perspective: 1000px;
  touch-action: manipulation;
}
.mem-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.34, 1.5, 0.64, 1);
}
.mem-card.up .mem-inner { transform: rotateY(180deg); }
.mem-card:active:not(.up) .mem-inner { transform: scale(0.95); transition-duration: 0.12s; }
.mem-back, .mem-front {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  border-radius: calc(var(--cw, 150px) * 0.1);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 5px 0 rgb(0 0 0 / 0.22), 0 10px 18px rgb(0 0 0 / 0.25);
  overflow: hidden;
}
.mem-back {
  border: calc(var(--cw, 150px) * 0.045) solid #fff;
  background:
    radial-gradient(circle at 50% 50%, rgb(255 255 255 / 0.2) 0 18%, transparent 19%) 0 0 / 34% 26%,
    linear-gradient(150deg, #ff7a73, var(--subject, #e5484d) 45%, var(--subject-dark, #c22f36));
}
.mem-back::after {
  content: '';
  position: absolute;
  inset: -40%;
  background: linear-gradient(115deg, transparent 40%, rgb(255 255 255 / 0.45) 48%, transparent 56%);
  animation: card-shine 5s ease-in-out infinite;
  pointer-events: none;
}
.mem-card:nth-child(3n) .mem-back::after { animation-delay: -1.7s; }
.mem-card:nth-child(3n + 1) .mem-back::after { animation-delay: -3.4s; }
@keyframes card-shine { 0%, 60% { translate: -60% 0; } 100% { translate: 60% 0; } }
.mem-mark {
  display: grid;
  place-items: center;
  width: calc(min(var(--cw, 150px), var(--ch, 190px)) * 0.46);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 0 rgb(0 0 0 / 0.15);
  font: 600 calc(min(var(--cw, 150px), var(--ch, 190px)) * 0.32) / 1 var(--ks-brand-font);
  color: var(--subject-dark, #c22f36);
}
.mem-front {
  transform: rotateY(180deg);
  gap: 4%;
  padding: 6%;
  background: linear-gradient(180deg, #fffefa, #fbf3e2);
  border: calc(var(--cw, 150px) * 0.03) solid #f0e1c4;
}
.mem-pic { font: calc(min(var(--cw, 150px), var(--ch, 190px)) * 0.5) / 1 var(--emoji); filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.18)); }
.mem-name, .mem-words { padding: 0.05em 0.25em; border-radius: 0.25em; transition: background-color 0.15s; }
.mem-name { font: calc(var(--cw, 150px) * 0.14) / 1.1 var(--book); color: var(--ink); }
.mem-words { font: 600 calc(var(--cw, 150px) * 0.16) / 1.12 var(--ks-brand-font); color: var(--subject-dark, #c22f36); text-align: center; }
.mem-name.saying, .mem-words.saying { background: #c8dafb; box-shadow: inset 0 -0.07em #2f5fb3; }
.mem-front svg { display: block; width: calc(min(var(--cw, 150px), var(--ch, 190px)) * 0.9); height: auto; }
.mem-front .clock-num { font: 600 24px var(--ks-brand-font); fill: #1d2433; }

/* A pair: a gold edge, a hop and a glow, and the pair stays up. */
.mem-card.matched .mem-front { border-color: #ffc928; box-shadow: 0 0 0 4px #ffd84a, 0 0 22px 6px rgb(255 210 63 / 0.65), 0 10px 18px rgb(0 0 0 / 0.25); }
.mem-card.matched { animation: pair-hop 0.6s cubic-bezier(0.34, 1.8, 0.64, 1); }
@keyframes pair-hop { 35% { transform: translateY(-14px) scale(1.08); } 65% { transform: translateY(0) scale(0.97); } }

@media (prefers-reduced-motion: reduce) {
  .mem-inner { transition: none; }
  .mem-back::after, .mem-card.matched { animation: none; }
}

/* ======================================================================================
   Word Builder (js/games/build.js): a kitchen wall with a photo pinned up, a wooden
   shelf with a space for each sound, and magnet letters on the bench below.
   ====================================================================================== */

.stage-build {
  --tile: clamp(64px, 11vmin, 108px);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  background: #fdf1dc;
}
.wb-wall {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgb(255 255 255 / 0.7), transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 58px, rgb(160 120 70 / 0.1) 58px 61px),
    repeating-linear-gradient(90deg, transparent 0 58px, rgb(160 120 70 / 0.1) 58px 61px),
    linear-gradient(180deg, #fff7ea, #fbe7c9);
}

.wb-board {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 3vmin, 34px);
  padding: 12px;
  min-height: 0;
}

/* The picture: a photo with a strip of tape, a little crooked. */
.wb-photo {
  position: relative;
  padding: 12px 12px 30px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 3px rgb(0 0 0 / 0.12), 0 14px 26px rgb(90 60 20 / 0.22);
  rotate: -3deg;
}
.wb-tape {
  position: absolute;
  left: 50%;
  top: -14px;
  width: 92px;
  height: 28px;
  translate: -50% 0;
  rotate: 4deg;
  background: rgb(255 236 160 / 0.75);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
  clip-path: polygon(3% 0, 97% 4%, 100% 50%, 96% 100%, 2% 96%, 0 50%);
}
.wb-pic {
  display: grid;
  place-items: center;
  width: clamp(110px, 24vmin, 230px);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: radial-gradient(circle at 50% 40%, #fff, #dff1ff 70%, #c6e4fb);
}
.wb-emoji { font: clamp(64px, 16vmin, 160px)/1 var(--emoji); filter: drop-shadow(0 6px 4px rgb(0 0 0 / 0.18)); }

/* The shelf: a wooden ledge with a space set into it for each sound. */
.wb-shelf {
  position: relative;
  display: flex;
  gap: clamp(8px, 1.6vmin, 16px);
  padding: 12px 18px 22px;
  border-radius: 16px;
  background:
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0) 0 90px, rgb(80 40 10 / 0.08) 90px 92px),
    linear-gradient(180deg, #d79a5c, #b8763c 70%, #9c5f2c);
  box-shadow: inset 0 3px 0 rgb(255 255 255 / 0.3), inset 0 -6px 0 rgb(0 0 0 / 0.18), 0 10px 18px rgb(90 50 10 / 0.3);
}
.wb-slot {
  width: var(--tile);
  height: var(--tile);
  border-radius: 22%;
  background: rgb(90 45 10 / 0.28);
  box-shadow: inset 0 5px 8px rgb(0 0 0 / 0.35), 0 1px 0 rgb(255 255 255 / 0.25);
  outline: 3px dashed rgb(255 240 210 / 0.6);
  outline-offset: -9px;
}
.wb-slot.filled { outline: 0; background: transparent; box-shadow: none; }
.wb-slot.lit .wb-placed { translate: 0 -12px; box-shadow: 0 0 0 5px #fff6a8, 0 0 26px 8px #ffd23f, 0 10px 0 color-mix(in srgb, var(--m) 60%, #000); }
.wb-shelf.whole .wb-placed { animation: wb-hop 0.6s cubic-bezier(0.34, 1.8, 0.64, 1) both; box-shadow: 0 0 0 5px #b6f0c8, 0 6px 0 color-mix(in srgb, var(--m) 60%, #000); }
.wb-shelf.whole .wb-slot:nth-child(2) .wb-placed { animation-delay: 0.08s; }
.wb-shelf.whole .wb-slot:nth-child(3) .wb-placed { animation-delay: 0.16s; }
.wb-shelf.whole .wb-slot:nth-child(4) .wb-placed { animation-delay: 0.24s; }
@keyframes wb-hop { 40% { translate: 0 -20px; scale: 1.08 0.94; } 70% { scale: 0.96 1.04; } }

/* Magnet letters: glossy, chunky, with a solid edge underneath. */
.wb-tile, .wb-placed {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--tile);
  height: var(--tile);
  padding: 0;
  border: 0;
  border-radius: 22%;
  background:
    radial-gradient(ellipse at 30% 18%, rgb(255 255 255 / 0.65), transparent 45%),
    linear-gradient(180deg, color-mix(in srgb, var(--m) 72%, #fff), var(--m) 55%, color-mix(in srgb, var(--m) 82%, #000));
  box-shadow: 0 6px 0 color-mix(in srgb, var(--m) 60%, #000), 0 12px 16px rgb(60 30 0 / 0.3);
}
.wb-letter { font: 700 calc(var(--tile) * 0.56)/1 var(--book); color: #fff; text-shadow: 0 2px 0 rgb(0 0 0 / 0.25); letter-spacing: -0.02em; margin-top: -0.08em; }
.wb-tile { rotate: var(--tilt); transition: translate 0.12s; }
.wb-tile:active { translate: 0 4px; box-shadow: 0 2px 0 color-mix(in srgb, var(--m) 60%, #000), 0 4px 8px rgb(60 30 0 / 0.3); }
.wb-tile.used { visibility: hidden; }
.wb-tile.glow { animation: wb-glow 1s ease-in-out infinite; }
@keyframes wb-glow { 50% { box-shadow: 0 0 0 6px #fff6a8, 0 0 30px 10px #ffd23f, 0 6px 0 color-mix(in srgb, var(--m) 60%, #000); translate: 0 -6px; } }

/* The bench the letters lie on. */
.wb-tray {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: clamp(10px, 2vmin, 20px);
  padding: clamp(16px, 3vmin, 30px) 16px clamp(18px, 3.4vmin, 34px);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.28) 0 5px, transparent 5px),
    repeating-linear-gradient(180deg, transparent 0 34px, rgb(70 35 5 / 0.12) 34px 36px),
    linear-gradient(180deg, #c98a4f, #a8672f);
  box-shadow: 0 -8px 16px rgb(90 50 10 / 0.18);
}

/* An iPad on its side: a smaller photo, so the shelf and bench fit under it. */
@media (orientation: landscape) and (min-height: 501px) {
  .wb-pic { width: clamp(110px, 21vh, 230px); }
  .wb-emoji { font-size: clamp(64px, 14vh, 160px); }
  .wb-board { padding-top: 22px; }
}

/* A phone on its side: the photo and shelf on the left, the bench on the right. */
@media (max-height: 500px) and (orientation: landscape) {
  .stage-build { --tile: 56px; grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .wb-board { flex-direction: row; gap: 18px; padding: 8px; }
  .wb-photo { padding: 6px 6px 14px; }
  .wb-tape { width: 54px; height: 18px; top: -9px; }
  .wb-pic { width: 84px; }
  .wb-emoji { font-size: 56px; }
  .wb-shelf { padding: 8px 10px 14px; gap: 6px; }
  .wb-tray { gap: 10px; padding: 10px; box-shadow: -8px 0 16px rgb(90 50 10 / 0.18); }
}
@media (max-width: 600px) and (orientation: portrait) {
  .stage-build { --tile: 64px; }
  .wb-shelf { padding: 10px 12px 18px; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .wb-tile.glow, .wb-shelf.whole .wb-placed { animation: none; }
}

/* ======================================================================================
   Frog Hop (js/games/hop.js): a pond under a grassy bank, with ripples, reeds and
   lily pads that bob; stepping stones on the bank keep the count.
   ====================================================================================== */

.stage-hop {
  --pad: 150px;
  --bank: clamp(64px, 17%, 150px);
  background: linear-gradient(180deg, #2f9fb0 0%, #2a8fa6 40%, #1f7690 100%);
}

/* The far bank: grass, bushes, and the shore's shadow on the water. */
.hop-bank {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--bank);
  z-index: 1;
  background:
    radial-gradient(120% 60% at 50% 0%, rgb(255 255 255 / 0.25), transparent 60%),
    linear-gradient(180deg, #8fd16b, #6dbb4a 70%, #57a13a);
  border-radius: 0 0 50% 50% / 0 0 28px 28px;
  box-shadow: 0 10px 0 #4c8f33, 0 22px 26px rgb(10 50 60 / 0.35);
}
.bush { position: absolute; bottom: 30%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #7ccf5a, #3f8f2c 70%); box-shadow: 0 6px 0 rgb(0 0 0 / 0.08); }
.bush.b1 { left: 2%; width: 90px; height: 54px; }
.bush.b2 { left: 9%; width: 60px; height: 40px; bottom: 22%; }
.bush.b3 { right: 4%; width: 100px; height: 58px; }
.bush.b4 { right: 13%; width: 54px; height: 36px; bottom: 18%; }

/* The water: light dancing on it, and rings spreading out. */
.hop-water {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60px 14px at 20% 30%, rgb(255 255 255 / 0.16), transparent 70%),
    radial-gradient(ellipse 90px 16px at 70% 60%, rgb(255 255 255 / 0.12), transparent 70%),
    radial-gradient(ellipse 70px 12px at 40% 85%, rgb(255 255 255 / 0.14), transparent 70%),
    radial-gradient(ellipse 50px 10px at 88% 25%, rgb(255 255 255 / 0.14), transparent 70%);
  background-size: 420px 300px;
  animation: hop-shimmer 14s linear infinite;
}
@keyframes hop-shimmer { to { background-position: 420px 0; } }
.ripple { position: absolute; width: 120px; height: 40px; margin: -20px 0 0 -60px; border: 3px solid rgb(255 255 255 / 0.5); border-radius: 50%; opacity: 0; animation: hop-ripple 5s ease-out infinite; }
.ripple.r1 { left: 30%; top: 62%; }
.ripple.r2 { left: 74%; top: 30%; animation-delay: -1.3s; }
.ripple.r3 { left: 12%; top: 40%; animation-delay: -2.6s; }
.ripple.r4 { left: 88%; top: 82%; animation-delay: -3.8s; }
@keyframes hop-ripple { 0% { transform: scale(0.2); opacity: 0.9; } 100% { transform: scale(1.6); opacity: 0; } }
.deco { position: absolute; width: 70px; height: 70px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #6fcf5f, #3a9a3a 70%); -webkit-mask: conic-gradient(from 100deg, transparent 0 26deg, #000 26deg);
  mask: conic-gradient(from 100deg, transparent 0 26deg, #000 26deg); box-shadow: 0 8px 0 rgb(10 50 60 / 0.25); animation: hop-bob 4s ease-in-out infinite; }
.deco.d1 { left: 4%; top: 72%; -webkit-mask: none;
  mask: none; display: grid; place-items: center; }
.deco.d2 { right: 3%; top: 58%; width: 54px; height: 54px; animation-delay: -2s; }
.deco-flower { font: 34px/1 var(--emoji); filter: drop-shadow(0 3px 2px rgb(0 0 0 / 0.2)); }

/* Reeds in the near corners, swaying. */
.hop-reeds { position: absolute; bottom: -10px; z-index: 3; display: flex; align-items: flex-end; gap: 7px; pointer-events: none; }
.hop-reeds.left { left: 6px; }
.hop-reeds.right { right: 6px; }
.reed { position: relative; width: 9px; height: 150px; border-radius: 6px; background: linear-gradient(90deg, #3f8f2c, #6dbb4a); transform-origin: bottom; animation: hop-sway 3.4s ease-in-out infinite; }
.reed::before { content: ''; position: absolute; left: -4px; top: 0; width: 17px; height: 46px; border-radius: 9px; background: linear-gradient(90deg, #7a4a22, #a66a35); }
.reed:nth-child(2) { height: 116px; animation-delay: -1s; }
.reed:nth-child(3) { height: 170px; animation-delay: -2s; }
.reed:nth-child(4) { height: 100px; animation-delay: -0.5s; }
@keyframes hop-sway { 50% { rotate: 4deg; } }

/* Stepping stones on the bank: the count so far, and a ? for the next one. */
.hop-trail {
  position: absolute;
  z-index: 2;
  top: calc(var(--bank) * 0.5);
  left: 50%;
  translate: -50% -50%;
  max-width: calc(100% - 24px);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  overflow: hidden;
  padding: 4px 6px 8px;
}
.stone {
  flex: none;
  min-width: clamp(40px, 7vmin, 64px);
  height: clamp(40px, 7vmin, 64px);
  display: grid;
  place-items: center;
  padding: 0 8px;
  border-radius: 46% 54% 50% 50% / 55% 50% 50% 45%;
  background: radial-gradient(circle at 35% 30%, #f2efe8, #c9c2b4 70%, #a69e8f);
  box-shadow: 0 4px 0 #857d6e, 0 7px 8px rgb(0 0 0 / 0.2);
  font: 600 clamp(20px, 3.6vmin, 32px)/1 var(--ks-brand-font);
  color: #3a3428;
}
.stone.next { background: radial-gradient(circle at 35% 30%, #fff8d6, #ffd23f 75%); box-shadow: 0 4px 0 #c99a00, 0 0 0 4px rgb(255 255 255 / 0.6); color: #7a5a00; animation: hop-bob 1.4s ease-in-out infinite; }

/* Lily pads: a leaf with a notch and veins, a shadow on the water, and the number in the middle. */
.hop-pads { position: absolute; inset: 0; z-index: 2; }
.hop-pad {
  position: absolute;
  width: var(--pad);
  height: var(--pad);
  margin: calc(var(--pad) / -2) 0 0 calc(var(--pad) / -2);
  padding: 0;
  border: 0;
  background: none;
  display: grid;
  place-items: center;
  animation: hop-bob 3.2s ease-in-out infinite;
}
.hop-pad:nth-child(odd) { animation-delay: -1.4s; }
.hop-pad::before { content: ''; position: absolute; inset: 8% 2% -6% 6%; border-radius: 50%; background: rgb(8 50 60 / 0.35); filter: blur(4px); }
.hop-leaf {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg at 50% 50%, rgb(255 255 255 / 0) 0 13deg, rgb(255 255 255 / 0.16) 13deg 15deg),
    radial-gradient(circle at 40% 32%, #9be36f, #5dbb43 55%, #3d8f2d);
  -webkit-mask: conic-gradient(from 150deg, transparent 0 34deg, #000 34deg);
  mask: conic-gradient(from 150deg, transparent 0 34deg, #000 34deg);
  box-shadow: inset 0 -6px 0 rgb(0 0 0 / 0.12);
}
.hop-num {
  position: relative;
  min-width: 56%;
  height: 56%;
  display: grid;
  place-items: center;
  padding: 0 6%;
  border-radius: 999px;
  background: #fffdf6;
  box-shadow: 0 3px 0 rgb(0 0 0 / 0.15);
  font: 600 calc(var(--pad) * 0.3)/1 var(--ks-brand-font);
  color: #23602a;
}
/* The frog sits on the top of its pad, so the number shows below it. */
.hop-pad.home .hop-num { background: #f4fbe9; height: 38%; min-width: 46%; translate: 0 52%; font-size: calc(var(--pad) * 0.22); }
.hop-pad.choice:active .hop-leaf { filter: brightness(1.1); }
.hop-pad.glow .hop-num { box-shadow: 0 0 0 5px #fff6a8, 0 0 24px 8px #ffd23f; animation: bounce 0.9s var(--pop) infinite; }
.hop-pad:disabled { cursor: default; }
@keyframes hop-bob { 50% { transform: translateY(-5px) rotate(1.5deg); } }

/* The frog sits a little above its pad's middle. */
.hop-frog {
  position: absolute;
  z-index: 4;
  width: calc(var(--pad) * 0.66);
  height: calc(var(--pad) * 0.66);
  margin: calc(var(--pad) * -0.8) 0 0 calc(var(--pad) * -0.33);
  display: grid;
  place-items: center;
  pointer-events: none;
  transform-origin: 50% 90%;
}
.hop-frog-body { font: calc(var(--pad) * 0.58)/1 var(--emoji); filter: drop-shadow(0 8px 4px rgb(0 0 0 / 0.25)); animation: hop-breathe 2s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes hop-breathe { 50% { scale: 1.04 0.97; } }

/* An iPad on its side: the lotus moves out of the frog's way. */
@media (orientation: landscape) {
  .deco.d1 { left: 31%; top: 84%; }
}

/* Small screens: a lower bank and smaller stones. */
@media (max-height: 500px) {
  .stage-hop { --bank: 46px; }
  .stone { min-width: 32px; height: 32px; font-size: 17px; padding: 0 5px; }
  .hop-trail { gap: 5px; }
  .reed { height: 80px; }
  .reed:nth-child(3) { height: 96px; }
  .bush { transform: scale(0.6); }
  .deco { display: none; }
}
@media (max-width: 600px) and (orientation: portrait) {
  .stone { min-width: 38px; height: 38px; font-size: 18px; padding: 0 6px; }
  .hop-trail { gap: 5px; }
  .reed { height: 100px; }
  .deco.d2 { display: none; }
  .bush { transform: scale(0.7); }
}

@media (prefers-reduced-motion: reduce) {
  .hop-water, .ripple, .reed, .hop-pad, .deco, .stone.next, .hop-frog-body, .hop-pad.glow .hop-num { animation: none; }
}

/* ======================================================================================
   Make Ten and Word Joiner (js/games/pairs.js)
   ====================================================================================== */

/* ---- Make Ten: under the sea, with light coming down, sand, swaying weed and fish ---- */

.stage-pairs.tens {
  --bubble: 130px;
  background: linear-gradient(180deg, #4fc3e8 0%, #1f8fc4 45%, #0f5f96 100%);
}
.tn-rays {
  position: absolute;
  inset: -10% -20% 20%;
  background: repeating-linear-gradient(100deg, rgb(255 255 255 / 0) 0 60px, rgb(255 255 255 / 0.14) 60px 110px, rgb(255 255 255 / 0) 110px 190px);
  -webkit-mask: linear-gradient(180deg, #000, transparent 85%);
  mask: linear-gradient(180deg, #000, transparent 85%);
  transform-origin: top;
  animation: tn-rays 9s ease-in-out infinite alternate;
}
@keyframes tn-rays { from { transform: skewX(-6deg); opacity: 0.8; } to { transform: skewX(6deg); opacity: 1; } }

.tn-sand {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 16%;
  min-height: 46px;
  background:
    radial-gradient(ellipse 50px 8px at 20% 40%, rgb(255 255 255 / 0.3), transparent 70%),
    radial-gradient(ellipse 70px 10px at 65% 60%, rgb(160 110 50 / 0.2), transparent 70%),
    linear-gradient(180deg, #f6d99a, #e2b96a);
  border-radius: 55% 45% 0 0 / 30px 26px 0 0;
  box-shadow: 0 -8px 20px rgb(0 40 80 / 0.25);
}
.weed {
  position: absolute;
  bottom: 50%;
  width: 22px;
  height: 140px;
  border-radius: 50% 50% 4px 4px / 30% 30% 4px 4px;
  background: linear-gradient(90deg, #1f8a4c, #37b36a 60%, #1f8a4c);
  transform-origin: bottom center;
  animation: tn-sway 3.6s ease-in-out infinite;
}
.weed.w1 { left: 4%; }
.weed.w2 { left: 8%; height: 100px; width: 16px; animation-delay: -1.2s; }
.weed.w3 { right: 6%; height: 160px; animation-delay: -0.6s; }
.weed.w4 { right: 11%; height: 96px; width: 16px; animation-delay: -2s; }
.weed.w5 { left: 52%; height: 70px; width: 14px; animation-delay: -2.6s; }
@keyframes tn-sway { 50% { transform: rotate(7deg) skewX(4deg); } }
.shell { position: absolute; left: 30%; bottom: 26%; font: 34px/1 var(--emoji); }
.star-fish {
  position: absolute;
  right: 28%;
  bottom: 30%;
  width: 40px;
  height: 40px;
  background: #ff8a5b;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  rotate: 12deg;
}
.tn-fish { position: absolute; z-index: 0; font: 46px/1 var(--emoji); opacity: 0.9; animation: tn-swim 26s linear infinite; }
.tn-fish.f1 { top: 22%; left: -60px; }
.tn-fish.f2 { top: 58%; left: -60px; font-size: 34px; animation-duration: 34s; animation-delay: -14s; }
@keyframes tn-swim { 0% { translate: 0 0; scale: -1 1; } 49% { translate: calc(100vw + 120px) 20px; scale: -1 1; } 50% { translate: calc(100vw + 120px) 20px; scale: 1 1; } 100% { translate: 0 0; scale: 1 1; } }
.tn-fizz { position: absolute; inset: 0; pointer-events: none; }
.fizz { position: absolute; bottom: 10%; width: 10px; height: 10px; border: 2px solid rgb(255 255 255 / 0.6); border-radius: 50%; animation: tn-fizz 7s linear infinite; }
.fizz.z1 { left: 14%; }
.fizz.z2 { left: 34%; animation-delay: -2s; width: 7px; height: 7px; }
.fizz.z3 { left: 58%; animation-delay: -4s; }
.fizz.z4 { left: 76%; animation-delay: -1s; width: 6px; height: 6px; }
.fizz.z5 { left: 90%; animation-delay: -5s; }
.fizz.z6 { left: 46%; animation-delay: -3s; width: 8px; height: 8px; }
@keyframes tn-fizz { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translate(14px, -80vh); opacity: 0; } }

.tn-field { position: absolute; inset: 0; z-index: 2; }
.bubble {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--bubble);
  height: var(--bubble);
  padding: 0;
  border: 0;
  background: none;
  will-change: transform;
}
.tn-ball {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 26%, rgb(255 255 255 / 0.95) 0 7%, rgb(255 255 255 / 0) 8%),
    radial-gradient(circle at 68% 76%, rgb(255 255 255 / 0.4) 0 5%, rgb(255 255 255 / 0) 6%),
    radial-gradient(circle at 50% 50%, rgb(255 255 255 / 0.08) 52%, rgb(190 240 255 / 0.55) 68%, rgb(255 255 255 / 0.85) 71%, rgb(120 200 255 / 0.3) 74%);
  box-shadow: inset -6px -10px 20px rgb(120 80 255 / 0.18), inset 8px 6px 16px rgb(255 200 240 / 0.25), 0 10px 20px rgb(0 40 90 / 0.25);
  transition: scale 0.2s cubic-bezier(0.34, 1.8, 0.64, 1), box-shadow 0.2s;
}
.tn-num { font: 600 calc(var(--bubble) * 0.42)/1 var(--ks-brand-font); color: #fff; text-shadow: 0 2px 0 rgb(0 50 100 / 0.45), 0 0 12px rgb(0 60 120 / 0.4); }
.bubble.on .tn-ball { scale: 1.14; box-shadow: 0 0 0 6px rgb(255 246 168 / 0.9), 0 0 30px 10px rgb(255 210 63 / 0.7), 0 10px 20px rgb(0 40 90 / 0.25); }
.bubble.glow .tn-ball { animation: tn-glow 1s ease-in-out infinite; }
@keyframes tn-glow { 50% { box-shadow: 0 0 0 6px #fff6a8, 0 0 34px 12px #ffd23f; scale: 1.08; } }
.tn-drop { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #bdf0ff 60%); pointer-events: none; }
.prompt .sign.miss { border-color: var(--second); background: #fff4dc; color: #8a5a00; }

/* ---- Word Joiner: a wooden desk with two cork trays of puzzle pieces ---- */

.stage-pairs.join {
  --piece-h: clamp(64px, 9.5vh, 100px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 6vw, 90px);
  padding: clamp(14px, 3vh, 34px) clamp(14px, 4vw, 60px);
  background: #b67a45;
}
.jn-desk {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 30%, rgb(255 230 190 / 0.35), transparent 65%),
    repeating-linear-gradient(180deg, transparent 0 118px, rgb(70 35 5 / 0.18) 118px 121px),
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0) 0 7px, rgb(120 70 30 / 0.06) 7px 9px),
    linear-gradient(180deg, #c98b55, #a96c39);
}
.jn-tray {
  position: relative;
  z-index: 1;
  display: grid;
  grid-auto-rows: var(--piece-h);
  gap: clamp(12px, 2vh, 22px);
  padding: clamp(14px, 2.4vh, 26px) clamp(14px, 2vw, 26px);
  border-radius: 24px;
  background:
    radial-gradient(circle at 20% 30%, rgb(120 70 20 / 0.25) 0 1.5px, transparent 2px) 0 0 / 22px 22px,
    radial-gradient(circle at 70% 60%, rgb(255 240 210 / 0.35) 0 1.5px, transparent 2px) 0 0 / 30px 30px,
    linear-gradient(180deg, #e3b97f, #d4a066);
  box-shadow: inset 0 4px 10px rgb(80 40 0 / 0.35), 0 3px 0 rgb(255 255 255 / 0.25), 0 14px 24px rgb(60 30 0 / 0.3);
}
.jn-slot { position: relative; display: grid; }

.jn-piece {
  --edge: color-mix(in srgb, var(--c) 62%, #000);
  position: relative;
  display: grid;
  place-items: center;
  padding: 0 18px;
  border: 0;
  background: none;
  filter: drop-shadow(0 6px 0 var(--edge)) drop-shadow(0 10px 8px rgb(60 30 0 / 0.3));
  transition: scale 0.18s cubic-bezier(0.34, 1.8, 0.64, 1);
}
/* The piece is drawn underneath, so the second half can have a socket cut out of it and
   the shadow (a filter) still follows the shape. */
.jn-piece::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 30% 0%, rgb(255 255 255 / 0.55), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--c) 80%, #fff), var(--c) 60%, color-mix(in srgb, var(--c) 88%, #000));
}
/* The first half has a knob on its right; the second half has the socket it fits in. */
.jn-piece.left::after {
  content: '';
  position: absolute;
  right: -17px;
  top: 50%;
  width: 34px;
  height: 34px;
  margin-top: -17px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 90%, #000);
  box-shadow: inset 4px 4px 0 rgb(255 255 255 / 0.25);
}
.jn-piece.right::before { -webkit-mask: radial-gradient(circle 19px at 0 50%, transparent 98%, #000 100%);
  mask: radial-gradient(circle 19px at 0 50%, transparent 98%, #000 100%); }
.jn-text { position: relative; font: 700 clamp(24px, 3.6vh, 38px)/1 var(--book); color: #fff; text-shadow: 0 2px 0 rgb(0 0 0 / 0.25); letter-spacing: 0.01em; }
.jn-piece.on { scale: 1.07; z-index: 2; filter: drop-shadow(0 0 5px #fff6a8) drop-shadow(0 0 12px #ffd23f) drop-shadow(0 6px 0 var(--edge)); }
.jn-piece.glow { animation: jn-glow 1s ease-in-out infinite; }
.jn-piece.joined { z-index: 3; }
@keyframes jn-glow { 50% { filter: drop-shadow(0 0 6px #fff6a8) drop-shadow(0 0 14px #ffd23f) drop-shadow(0 6px 0 var(--edge)); scale: 1.04; } }

/* The word that was made: its picture, big, between the trays. */
.jn-reveal {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  translate: -50% -50%;
  display: none;
  justify-items: center;
  gap: 6px;
  padding: 18px 34px 22px;
  border-radius: 30px;
  background: #fffdf6;
  box-shadow: 0 0 0 6px rgb(255 255 255 / 0.6), 0 24px 50px rgb(40 20 0 / 0.45);
  pointer-events: none;
}
.jn-reveal.show { display: grid; }
.jn-pic { font: clamp(80px, 16vmin, 150px)/1 var(--emoji); filter: drop-shadow(0 8px 6px rgb(0 0 0 / 0.2)); animation: bob 2.4s ease-in-out infinite; }
.jn-word { font: 700 clamp(32px, 5vmin, 54px)/1.1 var(--book); color: var(--ink); }
.jn-word b:first-child { color: #d9622b; }
.jn-word b:last-child { color: #1f7fb8; }

/* A phone on its side: each tray is two pieces wide. */
@media (max-height: 500px) and (orientation: landscape) {
  .stage-pairs.join { --piece-h: 64px; gap: 26px; padding: 10px 18px; }
  .jn-tray { grid-template-columns: 1fr 1fr; padding: 10px; gap: 10px 22px; }
  .jn-text { font-size: 21px; }
  .jn-piece { padding: 0 10px; }
  .jn-piece::before { border-radius: 14px; }
  .jn-piece.left::after { width: 24px; height: 24px; margin-top: -12px; right: -12px; }
  .jn-piece.right::before { -webkit-mask: radial-gradient(circle 13px at 0 50%, transparent 98%, #000 100%);
  mask: radial-gradient(circle 13px at 0 50%, transparent 98%, #000 100%); }
  .jn-reveal { padding: 10px 22px 12px; }
  .jn-pic { font-size: 64px; }
  .jn-word { font-size: 28px; }
  .tn-sand { height: 14%; min-height: 30px; }
  .weed { height: 70px; }
  .weed.w3 { height: 80px; }
}
@media (max-width: 600px) and (orientation: portrait) {
  .stage-pairs.join { --piece-h: 72px; gap: 22px; padding: 16px 12px; }
  .jn-tray { padding: 12px 10px; gap: 14px; }
  .jn-text { font-size: 22px; }
  .jn-piece { padding: 0 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .tn-rays, .weed, .tn-fish, .fizz, .bubble.glow .tn-ball, .jn-piece.glow, .jn-pic { animation: none; }
}

/* ======================================================================================
   Kobi's Shop (js/games/shop.js): a wall of shelves under a striped awning, the toy for
   sale on a lit stand with its price tag, a wooden counter with a felt mat, a till and a
   basket, and a leather purse of coins at the bottom.
   ====================================================================================== */

.stage-shop { --coin: 112px; --coin-on: 84px; --coin-min: 64px; background: #fbe9dc; }
.shop {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: minmax(0, 1.25fr) minmax(0, 1fr) auto;
  grid-template-areas: 'scene' 'counter' 'purse';
}

/* ---- The back wall, the awning and the shelves ---- */

.shop-scene { grid-area: scene; position: relative; overflow: hidden; }
.shop-wall {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 70% at 50% 62%, rgb(255 244 214 / 0.9), transparent 70%),
    repeating-linear-gradient(90deg, #fbe3d3 0 26px, #f8d9c6 26px 52px);
}
.awning {
  position: absolute;
  left: -2%;
  right: -2%;
  top: 0;
  height: 46px;
  z-index: 3;
  background: repeating-linear-gradient(90deg, var(--subject) 0 44px, #fff 44px 88px);
  box-shadow: 0 10px 14px -6px rgb(80 20 20 / 0.35);
}
.awning::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 22px;
  background: inherit;
  -webkit-mask: radial-gradient(circle 22px at 22px 0, #000 98%, transparent 100%) 0 0 / 44px 22px repeat-x;
  mask: radial-gradient(circle 22px at 22px 0, #000 98%, transparent 100%) 0 0 / 44px 22px repeat-x;
  filter: drop-shadow(0 6px 4px rgb(80 20 20 / 0.25));
}

.shelf { position: absolute; bottom: 22%; width: 24%; z-index: 1; }
.shelf-left { left: 3%; }
.shelf-right { right: 3%; }
.shelf-props { display: flex; justify-content: space-around; align-items: flex-end; padding: 0 6%; font: 50px/1 var(--emoji); }
.shelf-props > span { filter: drop-shadow(0 5px 3px rgb(60 30 10 / 0.25)); }
.shelf-props > span:nth-child(2) { font-size: 0.8em; }
.plank {
  display: block;
  height: 16px;
  border-radius: 4px;
  background: linear-gradient(#d39a5c, #a96b37);
  box-shadow: inset 0 3px 0 rgb(255 255 255 / 0.3), 0 10px 10px -4px rgb(60 30 10 / 0.35);
}
.shelf::after { content: ''; position: absolute; left: 12%; right: 12%; top: 100%; height: 26px; background: linear-gradient(90deg, #8a5226 0 8px, transparent 8px calc(100% - 8px), #8a5226 calc(100% - 8px)); }

/* The toy for sale: on a round stand under a soft spotlight, its tag swinging from a string. */
.toy { position: absolute; left: 50%; bottom: 12%; z-index: 2; translate: -50% 0; display: grid; place-items: end center; }
.toy-spot { position: absolute; left: 50%; bottom: -10%; width: 260%; height: 140%; translate: -50% 0; background: radial-gradient(ellipse at 50% 70%, rgb(255 236 160 / 0.75), transparent 62%); pointer-events: none; }
.toy::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -18px;
  width: 170px;
  height: 30px;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 35%, #fff, #e8d2c2 70%);
  box-shadow: 0 8px 0 #c9a991, 0 16px 14px rgb(60 30 10 / 0.25);
}
.toy-pic { position: relative; z-index: 1; font: clamp(76px, 15vmin, 150px)/1 var(--emoji); transform-origin: 50% 100%; filter: drop-shadow(0 10px 6px rgb(60 30 10 / 0.3)); }
.tag-hang { position: absolute; z-index: 2; left: calc(100% + 18px); top: -22%; display: grid; justify-items: start; padding-top: 52px; transform-origin: 26px 0; }
.tag-hang::before { content: ''; position: absolute; left: 25px; top: 0; width: 2px; height: 60px; background: #8a6a4a; }
.tag-hang::after { content: ''; position: absolute; left: 20px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffe27a, #b8860b); box-shadow: 0 2px 2px rgb(0 0 0 / 0.3); }
.toy-tag {
  position: relative;
  padding: 18px 16px 12px;
  background: #fff7d6;
  color: var(--subject-dark);
  font: 600 32px/1 var(--ks-brand-font);
  white-space: nowrap;
  clip-path: polygon(0 14px, 26px 0, 52px 14px, 100% 14px, 100% 100%, 0 100%);
  filter: drop-shadow(0 4px 3px rgb(60 30 10 / 0.3));
}
.toy-tag::before { content: ''; position: absolute; left: 22px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: #c9a991; }

/* ---- The counter: a felt mat for the coins, the till and the basket ---- */

.counter {
  grid-area: counter;
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  padding: 18px 16px 16px;
  background:
    linear-gradient(#e7b27a, #d99b5e) top / 100% 18px no-repeat,
    repeating-linear-gradient(90deg, #c27c41 0 74px, #b4703a 74px 76px);
  box-shadow: inset 0 18px 0 -1px #e7b27a, inset 0 21px 0 rgb(120 60 20 / 0.35), 0 -4px 8px rgb(60 30 10 / 0.15);
}
.counter-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'basket mat till'; gap: 14px; min-height: 0; }
.counter-mat {
  grid-area: mat;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: 8px;
  min-height: 0;
  padding: 12px;
  border-radius: 22px;
  background: radial-gradient(ellipse at 50% 30%, #3fa86a, #24804c);
  box-shadow: inset 0 0 0 4px rgb(255 255 255 / 0.18), inset 0 0 0 7px #24804c, inset 0 6px 14px rgb(0 0 0 / 0.3);
  outline: 2px dashed rgb(255 255 255 / 0.45);
  outline-offset: -12px;
  overflow: hidden;
}
.counter-total {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 4px);
  z-index: 3;
  margin: 0;
  padding: 6px 18px;
  translate: -50% 0;
  border-radius: 18px;
  background: #fff;
  color: var(--subject-dark);
  font: 600 26px/1.2 var(--ks-brand-font);
  white-space: nowrap;
  box-shadow: 0 4px 10px rgb(60 30 10 / 0.25);
  animation: bounce 0.5s var(--pop);
}

.till { grid-area: till; position: relative; align-self: end; width: 120px; height: 104px; border-radius: 14px 14px 8px 8px; background: linear-gradient(#7d8ba3, #56637a); box-shadow: inset 0 -6px 0 rgb(0 0 0 / 0.2), 0 6px 10px rgb(0 0 0 / 0.25); }
.till-screen { position: absolute; left: 14px; right: 14px; top: -26px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: #183327; color: #6dff9e; font: 600 22px/1 var(--ks-brand-font); box-shadow: 0 0 0 5px #56637a, 0 4px 6px rgb(0 0 0 / 0.3); }
.till-keys { position: absolute; left: 14px; right: 14px; top: 18px; height: 40px; background: radial-gradient(circle, #e9edf3 0 5px, transparent 6px) 0 0 / 23px 20px; }
.till-drawer { position: absolute; left: -6px; right: -6px; bottom: -4px; height: 30px; border-radius: 6px; background: linear-gradient(#a8b4c6, #7d8ba3); box-shadow: 0 4px 6px rgb(0 0 0 / 0.25); }
.till-drawer::after { content: ''; position: absolute; left: 50%; top: 50%; width: 30px; height: 6px; translate: -50% -50%; border-radius: 3px; background: #56637a; }

.basket { grid-area: basket; position: relative; align-self: end; width: 128px; height: 82px; }
.basket-weave {
  position: absolute;
  inset: 0;
  border-radius: 10px 10px 34px 34px;
  background: repeating-linear-gradient(45deg, #e0a75e 0 7px, #c88a43 7px 14px), #d79a52;
  box-shadow: inset 0 8px 0 #b47432, inset 0 -6px 10px rgb(80 40 0 / 0.3), 0 6px 8px rgb(60 30 10 / 0.3);
}
.basket::before { content: ''; position: absolute; left: 12%; right: 12%; bottom: 70%; height: 72px; border: 7px solid #b47432; border-bottom: 0; border-radius: 60px 60px 0 0; }
.basket-load { position: absolute; z-index: 1; left: 6px; right: 6px; bottom: 50%; display: flex; justify-content: center; flex-wrap: wrap-reverse; }
.basket-toy { margin: 0 -8px; font: 44px/1 var(--emoji); transform-origin: 50% 100%; filter: drop-shadow(0 3px 2px rgb(0 0 0 / 0.25)); }
.basket-toy:nth-child(even) { rotate: 12deg; }
.basket-toy:nth-child(odd) { rotate: -10deg; }

/* ---- The coins: in the purse, and on the counter ---- */

.coin-btn {
  --size: calc(var(--coin) * var(--rel));
  flex: none;
  width: max(var(--size), var(--coin-min));
  height: max(var(--size), var(--coin-min));
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
}
.coin-btn .coin { width: var(--size); height: var(--size); filter: drop-shadow(0 4px 2px rgb(0 0 0 / 0.3)); }
.coin-btn:active .coin { transform: translateY(2px); filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.3)); }
.coin-btn.on-counter { --coin: var(--coin-on); --coin-min: 0px; }
.counter-mat.many .coin-btn.on-counter { --coin: calc(var(--coin-on) * 0.72); }
.stage-shop .coin-text { font-family: var(--ks-brand-font); font-weight: 600; }

.purse {
  grid-area: purse;
  position: relative;
  margin: 0 12px 12px;
  padding: 16px 14px 14px;
  border-radius: 26px 26px 34px 34px;
  background: linear-gradient(#b0663a, #8e4a24);
  box-shadow: inset 0 0 0 5px #8e4a24, inset 0 0 0 7px rgb(255 220 180 / 0.35), 0 8px 14px rgb(60 30 10 / 0.35);
}
.purse::before { content: ''; position: absolute; inset: 10px; border: 2px dashed rgb(255 225 190 / 0.55); border-radius: 20px 20px 28px 28px; pointer-events: none; }
.purse-clasp { position: absolute; left: 50%; top: -12px; width: 56px; height: 22px; translate: -50% 0; background: radial-gradient(circle at 14px 11px, #ffe27a 0 9px, #b8860b 10px, transparent 11px), radial-gradient(circle at 42px 11px, #ffe27a 0 9px, #b8860b 10px, transparent 11px); }
.purse-coins { position: relative; display: flex; justify-content: center; align-items: center; gap: 10px; }

/* ---- An iPad held sideways, a phone, a phone held sideways ---- */

@media (orientation: landscape) {
  .stage-shop { --coin: 92px; --coin-on: 72px; }
  .toy-pic { font-size: clamp(64px, 13vmin, 120px); }
  .shelf-props { font-size: 42px; }
}
@media (max-width: 600px) {
  .stage-shop { --coin: 54px; --coin-on: 46px; --coin-min: 44px; }
  .awning { height: 30px; background-size: auto; }
  .shelf { bottom: 18%; width: 25%; }
  .shelf-props { font-size: 28px; padding: 0; }
  .plank { height: 10px; }
  .shelf::after { height: 14px; }
  .toy::after { width: 110px; height: 20px; bottom: -12px; box-shadow: 0 5px 0 #c9a991, 0 10px 10px rgb(60 30 10 / 0.25); }
  .toy-pic { font-size: 70px; }
  .tag-hang { left: calc(100% + 4px); padding-top: 34px; }
  .tag-hang::before { height: 40px; }
  .toy-tag { font-size: 22px; padding: 16px 10px 8px; }
  .counter { padding: 14px 8px 8px; }
  .counter-top { gap: 6px; }
  .counter-mat { padding: 6px; gap: 4px; border-radius: 16px; outline-offset: -7px; }
  .till { width: 62px; height: 58px; border-radius: 10px 10px 6px 6px; }
  .till-screen { left: 8px; right: 8px; top: -16px; height: 22px; font-size: 15px; box-shadow: 0 0 0 3px #56637a; }
  .till-keys { left: 8px; right: 8px; top: 12px; height: 22px; background-size: 13px 11px; background-image: radial-gradient(circle, #e9edf3 0 3px, transparent 3.5px); }
  .till-drawer { height: 18px; }
  .basket { width: 64px; height: 46px; }
  .basket::before { height: 38px; border-width: 4px; }
  .basket-toy { font-size: 26px; margin: 0 -5px; }
  .counter-total { font-size: 18px; padding: 4px 12px; }
  .purse { margin: 0 8px 8px; padding: 12px 6px 10px; border-radius: 18px 18px 24px 24px; }
  .purse::before { inset: 6px; }
  .purse-coins { gap: 4px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .stage-shop { --coin: 48px; --coin-on: 38px; --coin-min: 44px; }
  .shop { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: 'scene counter' 'scene purse'; }
  .awning { height: 24px; }
  .awning::after { height: 14px; -webkit-mask-size: 44px 14px; mask-size: 44px 14px; }
  .shelf { display: none; }
  .toy { bottom: 18%; }
  .toy-pic { font-size: 64px; }
  .toy::after { width: 100px; height: 18px; bottom: -10px; }
  .tag-hang { left: calc(100% + 2px); padding-top: 26px; top: -10%; }
  .tag-hang::before { height: 32px; }
  .toy-tag { font-size: 18px; padding: 16px 8px 6px; }
  .counter { padding: 12px 8px 6px; }
  .counter-top { gap: 6px; }
  .counter-mat { padding: 4px; gap: 3px; border-radius: 14px; outline-offset: -6px; }
  .till { width: 56px; height: 50px; }
  .till-screen { left: 8px; right: 8px; top: -14px; height: 20px; font-size: 14px; box-shadow: 0 0 0 3px #56637a; }
  .till-keys { left: 8px; right: 8px; top: 10px; height: 20px; background-size: 12px 10px; background-image: radial-gradient(circle, #e9edf3 0 3px, transparent 3.5px); }
  .till-drawer { height: 16px; }
  .basket { width: 58px; height: 40px; }
  .basket::before { height: 32px; border-width: 4px; }
  .basket-toy { font-size: 22px; margin: 0 -4px; }
  .counter-total { font-size: 16px; padding: 3px 10px; }
  .purse { margin: 0 6px 6px; padding: 8px 6px 6px; border-radius: 16px; }
  .purse::before { inset: 4px; }
  .purse-clasp { display: none; }
  .purse-coins { gap: 3px; }
}

/* ======================================================================================
   Number Train (js/games/train.js): a sunny sky, two rows of hills, the yard where the
   carriages wait on the grass, and the track at the bottom, with its sleepers and
   gravel seen a little from above, where the engine waits and steams.
   ====================================================================================== */

.stage-train { --car-w: 128px; --car-on: 104px; --engine-w: 172px; --track-h: 132px; background: #bfe7ff; }

.train-sky { position: absolute; inset: 0; background: linear-gradient(180deg, #8fd0ff 0%, #c9ecff 55%, #eaf8ff 100%); }
.train-sky .sun {
  position: absolute;
  right: 9%;
  top: 9%;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff7c2 0 40%, #ffd43b 70%);
  box-shadow: 0 0 0 18px rgb(255 224 102 / 0.25), 0 0 60px 30px rgb(255 224 102 / 0.35);
}
.cloud-t { position: absolute; width: 150px; height: 46px; border-radius: 30px; background: #fff; opacity: 0.9; animation: drift 70s linear infinite; }
.cloud-t::before { content: ''; position: absolute; left: 24px; top: -30px; width: 64px; height: 64px; border-radius: 50%; background: #fff; }
.cloud-t::after { content: ''; position: absolute; right: 26px; top: -20px; width: 46px; height: 46px; border-radius: 50%; background: #fff; }
.cloud-t.t1 { top: 10%; left: -180px; animation-delay: -30s; }
.cloud-t.t2 { top: 26%; left: -180px; animation-duration: 95s; animation-delay: -70s; transform: scale(0.7); }

.hills { position: absolute; left: -10%; right: -10%; bottom: 0; pointer-events: none; }
.hills.far {
  height: 62%;
  background:
    radial-gradient(ellipse 30% 55% at 18% 100%, #a8dc8c 99%, transparent 100%),
    radial-gradient(ellipse 34% 70% at 52% 100%, #9fd682 99%, transparent 100%),
    radial-gradient(ellipse 30% 50% at 86% 100%, #a8dc8c 99%, transparent 100%);
}
.hills.near {
  height: 48%;
  background:
    radial-gradient(ellipse 60% 40% at 30% 100%, #7cc35a 99%, transparent 100%),
    radial-gradient(ellipse 55% 34% at 85% 100%, #74bb52 99%, transparent 100%),
    linear-gradient(transparent 60%, #6db34c 60%);
}

.train-play { position: absolute; inset: 0; display: grid; grid-template-rows: minmax(0, 1fr) var(--track-h); }

/* ---- The yard: carriages waiting on the grass, a little jumbled ---- */

.yard { display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-end; gap: 22px 26px; padding: 26px 20px 4%; }
.car-gap { flex: none; }

.car {
  --w: var(--car-w);
  position: relative;
  flex: none;
  width: var(--w);
  height: calc(var(--w) * 0.74);
  padding: 0;
  border: 0;
  background: none;
  rotate: var(--tilt, 0deg);
  filter: drop-shadow(0 8px 4px rgb(30 60 20 / 0.28));
}
.car-roof {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 0;
  height: 16%;
  border-radius: calc(var(--w) * 0.1) calc(var(--w) * 0.1) 4px 4px;
  background: color-mix(in srgb, var(--car) 70%, #000);
}
.car-body {
  position: absolute;
  left: 0;
  right: 0;
  top: 13%;
  bottom: 17%;
  display: grid;
  place-items: center;
  border-radius: calc(var(--w) * 0.06);
  background: linear-gradient(180deg, color-mix(in srgb, var(--car) 75%, #fff) 0%, var(--car) 40%, color-mix(in srgb, var(--car) 85%, #000) 100%);
  box-shadow: inset 0 -5px 0 rgb(0 0 0 / 0.15);
}
.car-num {
  min-width: 70%;
  padding: 2px 6px;
  border-radius: calc(var(--w) * 0.06);
  background: #fff;
  color: #1d2433;
  font: 600 calc(var(--w) * 0.26)/1.1 var(--ks-brand-font);
  text-align: center;
  box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.1);
}
.car-wheels { position: absolute; left: 12%; right: 12%; bottom: 0; height: 26%; display: flex; justify-content: space-between; }
.car-wheels > span { width: calc(var(--w) * 0.22); height: calc(var(--w) * 0.22); border-radius: 50%; background: radial-gradient(circle, #e5484d 0 22%, #2b2f3a 24% 100%); box-shadow: inset 0 0 0 3px #50555f; }
.car::before { content: ''; position: absolute; left: -8%; bottom: 24%; width: 10%; height: 6%; border-radius: 2px; background: #50555f; }
.car.glow { filter: drop-shadow(0 0 12px #fff6a8) drop-shadow(0 0 22px #ffd23f); }
.car.glow .car-num { animation: bounce 0.9s var(--pop) infinite; }
.car:active:not(:disabled) { translate: 0 3px; }
.car:disabled { cursor: default; }
.car.coupled { --w: var(--car-on); rotate: 0deg; margin-left: 4px; }

/* ---- The track, seen a little from above, and the train on it ---- */

.track { position: relative; display: flex; align-items: flex-end; padding: 0 12px calc(var(--track-h) * 0.3); }
.rails {
  position: absolute;
  left: -4%;
  right: -4%;
  bottom: 0;
  height: 52%;
  transform-origin: 50% 100%;
  transform: perspective(260px) rotateX(48deg);
  background:
    linear-gradient(transparent 12%, #9aa3ad 12% 19%, #5f6873 19% 22%, transparent 22% 74%, #9aa3ad 74% 81%, #5f6873 81% 84%, transparent 84%),
    repeating-linear-gradient(90deg, #8a5a35 0 22px, transparent 22px 46px),
    linear-gradient(#b7a99a, #9b8b7b);
  box-shadow: 0 -2px 0 #8c7c6c;
}
.consist { position: relative; z-index: 1; display: flex; align-items: flex-end; will-change: transform; }
.loco { position: relative; flex: none; width: var(--engine-w); filter: drop-shadow(0 8px 4px rgb(30 30 30 / 0.3)); }
.engine-pic { display: block; width: 100%; height: auto; }
.steam { position: absolute; left: 18%; top: 6%; width: 30px; height: 30px; }
.puff { position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #fff, #e3e8ef); }
.train-cars { display: flex; align-items: flex-end; }
.train-cars .car { margin-bottom: 0; }

/* ---- An iPad held sideways, a phone, a phone held sideways ---- */

@media (orientation: landscape) {
  .stage-train { --car-w: 118px; --car-on: 112px; --track-h: 120px; }
  .yard { gap: 16px 30px; padding-top: 16px; }
}
@media (max-width: 600px) {
  .stage-train { --car-w: 88px; --car-on: 54px; --engine-w: 78px; --track-h: 74px; }
  .yard { gap: 16px 14px; padding: 14px 8px 6px; }
  .track { padding: 0 6px calc(var(--track-h) * 0.3); }
  .car.coupled { margin-left: 2px; }
  .train-sky .sun { width: 56px; height: 56px; }
  .rails { background: linear-gradient(transparent 12%, #9aa3ad 12% 19%, #5f6873 19% 22%, transparent 22% 74%, #9aa3ad 74% 81%, #5f6873 81% 84%, transparent 84%), repeating-linear-gradient(90deg, #8a5a35 0 12px, transparent 12px 26px), linear-gradient(#b7a99a, #9b8b7b); }
  .steam, .puff { width: 18px; height: 18px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .stage-train { --car-w: 74px; --car-on: 62px; --engine-w: 92px; --track-h: 70px; }
  .yard { gap: 8px 16px; padding: 8px 10px 2px; }
  .car-num { padding: 0 3px; }
  .train-sky .sun { width: 44px; height: 44px; top: 6%; }
  .steam, .puff { width: 18px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .cloud-t, .car.glow .car-num { animation: none; }
}

/* ======================================================================================
   Pizza Party (js/games/pizza.js): a tiled kitchen wall with the wood-fired oven glowing,
   a checked tablecloth on the bench, the pizza on its wooden peel, and Kobi waiting
   with the order ticket.
   ====================================================================================== */

.stage-pizza { --kobi: 190px; background: #fff3e0; }

/* The fraction on Kobi's ticket and in the words at the top: one number over the other. */
.stage-pizza .frac, .prompt .sign .frac { display: inline-grid; justify-items: center; line-height: 1; vertical-align: middle; }
.stage-pizza .frac-top, .prompt .sign .frac-top { padding: 0 0.15em 0.06em; border-bottom: 0.08em solid currentColor; }
.stage-pizza .frac-bottom, .prompt .sign .frac-bottom { padding-top: 0.06em; }
.prompt .sign .frac { font-size: 0.62em; padding: 0.08em 0; }

/* ---- The kitchen ---- */

.kitchen { position: absolute; inset: 0; overflow: hidden; }
.bricks {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 45% at 22% 40%, rgb(255 170 60 / 0.35), transparent 70%),
    linear-gradient(#ead7bd 2px, transparent 2px) 0 0 / 52px 52px,
    linear-gradient(90deg, #ead7bd 2px, transparent 2px) 0 0 / 52px 52px,
    linear-gradient(#fffaf2, #fbecd6);
}
.oven {
  position: absolute;
  left: 4%;
  bottom: 40%;
  width: min(34%, 300px);
  aspect-ratio: 1.25;
  border-radius: 50% 50% 8px 8px / 64% 64% 8px 8px;
  background:
    radial-gradient(circle at 30% 30%, rgb(255 255 255 / 0.12) 0 2px, transparent 3px) 0 0 / 22px 18px,
    linear-gradient(170deg, #c7653a, #9b4422);
  box-shadow: inset 0 -12px 0 rgb(0 0 0 / 0.15), 0 10px 20px rgb(80 30 10 / 0.3);
}
.oven::before {
  content: '';
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 10%;
  height: 46%;
  border-radius: 50% 50% 4px 4px / 80% 80% 4px 4px;
  background: #2a1208;
  box-shadow: inset 0 0 0 6px #7d3417;
}
.oven-fire {
  position: absolute;
  left: 30%;
  right: 30%;
  bottom: 13%;
  height: 30%;
  border-radius: 50% 50% 30% 30% / 70% 70% 30% 30%;
  background: radial-gradient(ellipse at 50% 85%, #fff3b0 0 18%, #ffb238 40%, #ff6a1a 65%, transparent 72%);
  filter: blur(1px);
  transform-origin: 50% 100%;
  animation: flicker 0.9s ease-in-out infinite alternate;
}
.oven-logs { position: absolute; left: 32%; right: 32%; bottom: 11%; height: 7%; border-radius: 6px; background: repeating-linear-gradient(90deg, #6b3a1c 0 30%, #4a2610 30% 34%); }
@keyframes flicker { 0% { transform: scale(1, 1); opacity: 0.9; } 50% { transform: scale(1.08, 1.15); opacity: 1; } 100% { transform: scale(0.95, 1.05); opacity: 0.85; } }

.bench {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  background:
    repeating-linear-gradient(90deg, rgb(229 72 77 / 0.5) 0 34px, transparent 34px 68px),
    repeating-linear-gradient(0deg, rgb(229 72 77 / 0.5) 0 34px, transparent 34px 68px),
    #fff;
  box-shadow: 0 -10px 18px rgb(80 30 10 / 0.18);
}
.bench::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 14px; background: linear-gradient(rgb(255 255 255 / 0.7), transparent); }

/* ---- The pizza and Kobi ---- */

.pizza-shop {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: 'order' 'pizza';
  padding: 10px 16px 14px;
}
.pizza-spot { grid-area: pizza; position: relative; display: grid; place-items: center; container-type: size; }
.pizza { position: relative; width: min(94cqw, 94cqh); aspect-ratio: 1; }
.peel {
  position: absolute;
  inset: -1%;
  border-radius: 50%;
  background: repeating-radial-gradient(circle at 50% 50%, #d7a465 0 6px, #cf9a5a 6px 11px);
  box-shadow: 0 14px 18px rgb(80 30 10 / 0.3), inset 0 -6px 0 rgb(0 0 0 / 0.1);
}
.peel::after {
  content: '';
  position: absolute;
  right: -16%;
  top: 46%;
  width: 22%;
  height: 9%;
  border-radius: 0 20px 20px 0;
  background: linear-gradient(#d7a465, #b98245);
  z-index: -1;
  box-shadow: 0 8px 10px rgb(80 30 10 / 0.25);
}
.pizza-pic { position: relative; display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 4px 3px rgb(80 30 10 / 0.25)); }
.slice-hit { fill: rgb(255 255 255 / 0); cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.slice-hit:focus-visible { stroke: #2f5fb3; stroke-width: 3; }
.pep { transform-box: fill-box; transform-origin: center; transform: scale(0) rotate(-90deg); opacity: 0; transition: transform 0.28s cubic-bezier(0.34, 1.8, 0.64, 1), opacity 0.15s; pointer-events: none; }
.slice.on .pep { transform: none; opacity: 1; }
.peps, .slice-badge { pointer-events: none; }
.slice-badge { opacity: 0; transition: opacity 0.3s; }
.slice-badge circle { fill: #fff; stroke: #c4843a; stroke-width: 2; }
.slice-badge text { font: 700 11px var(--ks-brand-font); fill: #8a5a2a; }
.counting .slice-badge { opacity: 1; }
.counting .slice.on .slice-badge circle { fill: #ffd23f; stroke: #c22f36; }
.counting .slice.on .slice-badge text { fill: #c22f36; }

.kobi-order { grid-area: order; position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: flex-end; gap: 4px; }
.kobi-pic { width: var(--kobi); height: auto; transform-origin: 50% 100%; filter: drop-shadow(0 8px 6px rgb(60 30 10 / 0.25)); }
.ticket {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 2px;
  margin-bottom: calc(var(--kobi) * 0.45);
  padding: 14px 20px 12px;
  border-radius: 6px;
  background: linear-gradient(#fff, #fffbe9);
  color: var(--subject-dark);
  rotate: 3deg;
  box-shadow: 0 6px 12px rgb(60 30 10 / 0.25);
  order: -1;
}
.ticket::before { content: ''; position: absolute; left: 50%; top: -8px; width: 16px; height: 16px; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff8a8a, #c22f36); box-shadow: 0 2px 2px rgb(0 0 0 / 0.3); }
.ticket-head { font: 600 16px/1 var(--ks-brand-font); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.ticket-frac { font: 600 54px/1 var(--ks-brand-font); }
.ticket-pizza { font: 26px/1 var(--emoji); }

/* ---- An iPad held sideways, a phone, a phone held sideways ---- */

@media (orientation: landscape) {
  .stage-pizza { --kobi: 200px; }
  .pizza-shop { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); grid-template-areas: 'pizza order'; }
  .kobi-order { align-self: end; justify-content: center; padding-bottom: 6%; }
  .oven { bottom: 44%; }
}
@media (max-width: 600px) {
  .stage-pizza { --kobi: 104px; }
  .pizza-shop { padding: 6px 10px 10px; }
  .ticket { padding: 10px 12px 8px; margin-bottom: calc(var(--kobi) * 0.3); }
  .ticket-head { font-size: 12px; }
  .ticket-frac { font-size: 36px; }
  .ticket-pizza { font-size: 18px; }
  .oven { width: 40%; bottom: 46%; }
  .bench { background-size: auto; background-image: repeating-linear-gradient(90deg, rgb(229 72 77 / 0.5) 0 20px, transparent 20px 40px), repeating-linear-gradient(0deg, rgb(229 72 77 / 0.5) 0 20px, transparent 20px 40px); }
}
@media (max-height: 500px) and (orientation: landscape) {
  .stage-pizza { --kobi: 88px; }
  .pizza-shop { padding: 4px 10px 6px; }
  .kobi-order { padding-bottom: 2%; }
  .ticket { padding: 8px 10px 6px; margin-bottom: calc(var(--kobi) * 0.3); }
  .ticket-head { font-size: 11px; }
  .ticket-frac { font-size: 30px; }
  .ticket-pizza { font-size: 16px; }
  .oven { width: 22%; bottom: 40%; }
}
@media (prefers-reduced-motion: reduce) {
  .oven-fire { animation: none; }
}