/* The child's tablet app. All colour and type for the child's screens lives here.
   Stickers are transparent cut-outs: separate them from the background with drop-shadows, never boxes.
   Used by: child.html. */

/* Anything marked hidden stays hidden, whatever display a class gives it (a cover shown by mistake blocks every tap). */
[hidden] { display: none !important; }

:root {
  --bg: #14121f;
  --bg-2: #1f1b33;
  --ink: #fff;
  --muted: #a9a3c7;
  --right: #2ed573;
  --wrong: #ff5252;
  --hint: #ffd32a;
  --font: "Comic Sans MS", "Chalkboard SE", "Trebuchet MS", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(circle at 50% 0%, var(--bg-2), var(--bg) 70%);
  color: var(--ink);
  font-family: var(--font);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
main { height: 100vh; height: 100dvh; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top)) 16px 16px; }

/* Grown-ups: press and hold */
.top { position: fixed; top: 0; right: 0; padding: 10px 12px; z-index: 5; }
.grownups {
  position: relative; overflow: hidden;
  background: transparent; border: 1px solid #ffffff22; border-radius: 999px;
  color: var(--muted); font-family: system-ui, sans-serif; font-size: 13px; padding: 6px 12px;
}
.grownups::after {
  content: ""; position: absolute; inset: 0; background: #ffffff22; transform: scaleX(0); transform-origin: left;
}
.grownups.holding::after { transform: scaleX(1); transition: transform 1.5s linear; }

/* The board of nine */
/* Three equal rows, and cards that their picture can't stretch: a tall icon (the hand) made its row taller. */
.board {
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: min(3vmin, 22px);
  width: min(92vmin, 640px); aspect-ratio: 1;
}
.card {
  --hue: 200;
  position: relative; border: 0; border-radius: 22px; min-width: 0; min-height: 0;
  background:
    radial-gradient(circle at 30% 25%, hsl(var(--hue) 90% 72% / .9), transparent 55%),
    linear-gradient(145deg, hsl(var(--hue) 75% 55%), hsl(calc(var(--hue) + 40) 70% 38%));
  box-shadow: 0 8px 0 hsl(var(--hue) 60% 25%), 0 14px 24px #0008;
  transition: transform .15s;
  display: grid; place-items: center;
}
.card:active { transform: translateY(4px); box-shadow: 0 4px 0 hsl(var(--hue) 60% 25%), 0 8px 16px #0008; }
.card-mark { font-size: min(14vmin, 90px); font-weight: bold; color: #fff; text-shadow: 0 4px 0 #0003; }
.card.skipped { filter: saturate(.75); }
.card.skipped .card-mark { font-size: min(11vmin, 70px); }
/* A finished card: flat and dark, with a green border, so it never looks like a game still to play. */
.card.done, .card.helped {
  background: hsl(var(--hue) 40% 22%); box-shadow: inset 0 0 0 5px var(--right), 0 0 14px color-mix(in srgb, var(--right) 45%, transparent);
}
.card-sticker { width: 72%; height: 72%; min-height: 0; max-height: 72%; object-fit: contain; filter: drop-shadow(0 6px 8px #000a); }
.card-star { position: absolute; top: 6px; right: 10px; color: var(--hint); font-size: min(6vmin, 34px); text-shadow: 0 2px 6px #000; }
.card.flipping { animation: flip .35s ease-in forwards; }
.card.empty { animation: shake .4s; }
@keyframes flip { to { transform: perspective(700px) rotateY(90deg) scale(1.05); } }

/* The task screen */
.task {
  position: fixed; inset: 0; display: grid; z-index: 3; overflow: hidden;
  background: radial-gradient(circle at 50% 0%, var(--bg-2), var(--bg) 70%);
  box-shadow: 0 20px 60px #000c; backface-visibility: hidden; will-change: transform;
}
.task[hidden], .board[hidden], .finished[hidden] { display: none; }
.task.zooming { pointer-events: none; }
/* The grown-up's live view of the card (mirror.html): look, don't touch. */
body.mirror { pointer-events: none; }
.mirror-status { color: var(--muted); font-size: 22px; text-align: center; }
.later {
  position: absolute; top: max(12px, env(safe-area-inset-top)); left: 12px; z-index: 4;
  width: 64px; height: 64px; border-radius: 50%; border: 0; background: #ffffff18; color: var(--muted);
}
.later svg { width: 34px; height: 34px; }
.stage { position: relative; display: grid; padding: 12px; overflow: hidden; }
.mechanic {
  display: grid; gap: min(3vmin, 20px); justify-items: center; align-content: center;
  width: min(100%, 1000px); margin: 0 auto; animation: appear .3s ease-out;
}
@keyframes appear { from { transform: scale(.92); opacity: 0; } }

/* The prompt */
.prompt {
  display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 8px 22px;
  border: 0; border-radius: 999px; background: #ffffff14; color: var(--ink);
}
.speaker svg { width: 42px; height: 42px; fill: currentColor; display: block; }
.caption { font-size: 22px; color: var(--muted); max-width: 50vw; }
.prompt-numeral { font-size: 68px; font-weight: bold; line-height: 1; text-shadow: 0 4px 0 #0006; }
.asked-about { display: inline-flex; align-items: center; }
.sticker-inline { width: 68px; height: 68px; object-fit: contain; filter: drop-shadow(0 4px 6px #000a); }
.q { font-size: 48px; font-weight: bold; color: var(--hint); margin-left: -6px; }

/* Scenes and groups */
.scene { width: min(94vw, 900px); aspect-ratio: 16 / 9; max-height: 52vh; display: grid; place-items: center; }
.group-box { position: relative; width: 100%; height: 100%; container-type: size; }
.item { position: absolute; width: var(--size); height: var(--size); transform: translate(-50%, -50%); transition: filter .2s, transform .2s; }
.sticker { object-fit: contain; filter: drop-shadow(0 6px 8px #000b); }
.dot { border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #70a1ff 45%, #3d5bd8); box-shadow: 0 5px 10px #0008; width: calc(var(--size) * .7); height: calc(var(--size) * .7); }
.item.counted { filter: drop-shadow(0 0 10px var(--hint)) drop-shadow(0 6px 8px #000b); transform: translate(-50%, -50%) scale(1.08); }
/* The group being named in a count's summary ("2 dogs", "3 animals"). */
.item.named { filter: drop-shadow(0 0 14px #fff) drop-shadow(0 6px 8px #000b); transform: translate(-50%, -50%) scale(1.25); }
.count-badge {
  position: absolute; transform: translate(-50%, -140%); z-index: 2;
  min-width: 44px; height: 44px; border-radius: 22px; display: grid; place-items: center;
  font-size: 28px; font-weight: bold; color: #111; box-shadow: 0 3px 8px #0009; animation: pop .3s;
}
.clap-badge { position: static; transform: none; display: inline-grid; margin: 4px; }
.count-badge.flow { transform: translate(-50%, -60%); }
.count-badge.on-top { z-index: 5; transform: translate(-50%, -70%); }
.asked-about .counted { filter: drop-shadow(0 0 12px var(--hint)); }

/* The pencil circle drawn round a right answer */
.pencil-circle { position: absolute; z-index: 3; pointer-events: none; overflow: visible; }
.pencil-circle path {
  fill: none; stroke: #ffe066; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 6px #ffd32a99);
}
.drum {
  width: min(40vmin, 260px); aspect-ratio: 1; border-radius: 50%; border: 0;
  background: radial-gradient(circle at 40% 35%, #ffb142, #e1631b 60%, #8a3200);
  box-shadow: 0 12px 0 #5c2200, 0 20px 30px #000a; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; padding: 20%;
}
.drum.beat { animation: beat .3s; }
.drum { position: relative; }
.drum .clap-badge { position: absolute; transform: translate(-50%, -50%); transition: left .3s ease-out, top .3s ease-out; }
@keyframes beat { 40% { transform: scale(1.12); box-shadow: 0 12px 0 #5c2200, 0 0 60px #ffb142; } }
.big-speaker { width: min(38vmin, 240px); aspect-ratio: 1; border-radius: 50%; border: 0; background: #ffffff14; display: grid; place-items: center; }
.big-speaker svg { width: 60%; height: 60%; fill: var(--ink); }
.empty-tray { width: 60%; height: 70%; border: 6px dashed #ffffff30; border-radius: 28px; }

/* Numeral answers */
.answers { display: flex; gap: min(3vmin, 22px); justify-content: center; flex-wrap: wrap; }
.numeral {
  --colour: #70a1ff;
  width: min(20vmin, 132px); height: min(20vmin, 132px); border-radius: 28px; border: 0;
  background: #ffffff10; color: var(--colour); font-size: min(12vmin, 84px); font-weight: bold;
  box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--colour) 60%, transparent), 0 8px 0 #0005;
  text-shadow: 0 4px 0 #0006;
}
.numeral:active { transform: translateY(4px); }
/* The digit itself in the middle of its square, not the font's line (which leaves room above and below, so digits
   sat off centre: the owner). A browser without text-box keeps the font's line. */
.numeral { display: grid; place-items: center; padding: 0; }
.numeral > span { line-height: 1; text-box: trim-both cap alphabetic; }
.right { background: var(--right) !important; color: #fff !important; animation: pop .35s; }
.wrong { animation: shake .45s; }
.dimmed { opacity: .35; transition: opacity .4s; }
.hint { animation: pulse 1s infinite; box-shadow: 0 0 0 6px var(--hint), 0 0 40px var(--hint) !important; }
@keyframes pop { 50% { scale: 1.15; } }
@keyframes shake { 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } }
@keyframes pulse { 50% { transform: scale(1.06); } }

/* Find the group */
.panels { display: flex; gap: min(3vmin, 20px); width: min(96vw, 1000px); justify-content: center; }
.panel {
  flex: 1; max-width: 460px; aspect-ratio: 4 / 3; min-height: 0; border-radius: 28px; border: 0; padding: 12px; /* the picture can't stretch it */
  background: #ffffff0e; box-shadow: inset 0 0 0 3px #ffffff1c, 0 8px 0 #0005;
}
.panel .group-box { pointer-events: none; }
.panel.right { background: color-mix(in srgb, var(--right) 45%, transparent) !important; }

/* Make that many */
.make-tray { grid-template-rows: auto auto auto auto; }
.plate {
  position: relative;
  width: min(80vw, 700px); min-height: min(30vh, 240px); min-height: min(30dvh, 240px); border-radius: 50% / 40%;
  background: radial-gradient(ellipse at center, #fff 0 55%, #e8e4f5 56% 100%);
  box-shadow: 0 10px 0 #b7b0d0, 0 20px 30px #000a; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; padding: 20px 40px; gap: 6px;
}
.pile { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; width: min(94vw, 900px); min-height: 80px; }
/* The ten-frame tray: two rows of five cells, filled left to right, top row first. */
.plate.tray { --cell: min(14vmin, 100px, 11vh); display: grid; grid-template-columns: repeat(5, var(--cell)); grid-template-rows: repeat(2, var(--cell));
  width: max-content; min-height: 0; padding: 0; gap: 0; border-radius: 14px; border: 4px solid #ffd32a;
  justify-content: start; align-content: start; /* the cells start where the drawn lines do, whatever its width */
  background-color: #fffdf6; background-size: var(--cell) var(--cell); background-position: -1.5px -1.5px;
  background-image: linear-gradient(90deg, #d9d2ee 3px, transparent 3px), linear-gradient(#d9d2ee 3px, transparent 3px); }
.plate.tray::before, .plate.tray::after { display: none; }
/* The plate picture laid over the plate's oval (a plate seen at an angle). */
.plate.pictured, .share-plate.pictured { background: center / 100% 100% no-repeat; box-shadow: none; filter: drop-shadow(0 10px 14px #000a); }
.plate.pictured::before, .plate.pictured::after { display: none; }
.plate.tray .pile-item { width: var(--cell); height: var(--cell); padding: 10%; box-sizing: border-box; }
.pile-item { width: min(11vmin, 84px, 9vh); width: min(11vmin, 84px, 9dvh); height: min(11vmin, 84px, 9vh); height: min(11vmin, 84px, 9dvh); cursor: pointer; animation: appear .2s; }
.tick {
  width: min(18vmin, 110px, 11vh); width: min(18vmin, 110px, 11dvh); height: min(18vmin, 110px, 11vh); height: min(18vmin, 110px, 11dvh); border-radius: 50%; border: 0;
  background: #ffffff14; color: var(--right); font-size: min(10vmin, 64px); font-weight: bold; box-shadow: inset 0 0 0 4px var(--right), 0 8px 0 #0005;
}
.tick.wrong { opacity: 1; }

/* Celebrations */
.burst {
  position: absolute; left: 50%; top: 45%; font-size: 44px; color: hsl(var(--hue) 90% 65%); pointer-events: none;
  animation: burst 1.2s ease-out forwards; text-shadow: 0 0 12px currentColor;
}
@keyframes burst { to { transform: translate(var(--dx), var(--dy)) rotate(200deg) scale(.4); opacity: 0; } }
.finished { position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; gap: 28px; animation: appear .5s; }
.finished-stars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: min(80vmin, 460px); }
.finished-sticker { width: 100%; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 8px 10px #000b); animation: pop .6s; }
.again { border: 0; border-radius: 999px; padding: 18px 44px; font-size: 32px; background: var(--right); color: #fff; box-shadow: 0 8px 0 #1a8f4a; }

/* A narrow or upright screen (a phone, or a tablet held upright): the choices two to a row, each no taller than about
   a quarter of the screen, so they keep their shape and all fit (one column of full-width tiles ran off the bottom;
   four in one row on an upright tablet were small, where two by two fits: the owner, "Find the pear"). */
@media (max-width: 600px), (orientation: portrait) {
  .panels { flex-wrap: wrap; }
  .panel, .panels.big .panel { flex: 0 1 min(calc(50% - 12px), 30vh); flex: 0 1 min(calc(50% - 12px), 30dvh); max-width: none; }
  .panels.race { flex-wrap: nowrap; } /* a race stays in one line: its order is the point */
  .panels.race .panel { flex: 1 1 0; }
  .scene { aspect-ratio: 4 / 3; }
}

/* Who's playing, set-up needed, the grown-ups' number */
.top { display: flex; align-items: center; gap: 10px; }
.who-now { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 15px; }
.who-now img { width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 2px 4px #000a); }
.setup, .who { text-align: center; display: grid; gap: 18px; justify-items: center; }
.setup[hidden], .who[hidden], .pin[hidden] { display: none; }
.setup p { font-size: 30px; margin: 0; }
.setup .setup-hint { font-size: 20px; color: var(--muted); }
.who h1 { font-size: 40px; margin: 0; }
.who-row { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; }
.who-child {
  display: grid; justify-items: center; gap: 8px; width: min(38vw, 220px); padding: 18px; border: 0; border-radius: 28px;
  background: #ffffff10; box-shadow: inset 0 0 0 3px #ffffff1c, 0 8px 0 #0005; font-size: 26px;
}
.who-child img { width: 70%; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 8px 10px #000b); }
.pin { position: fixed; inset: 0; z-index: 6; display: grid; place-content: center; justify-items: center; gap: 22px; background: #0a0912ee; }
.pin.shake { animation: shake .45s; }
.pin-dots { display: flex; gap: 14px; }
.pin-dots span { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--muted); }
.pin-dots span.on { background: var(--ink); border-color: var(--ink); }
.pin-keys { display: grid; grid-template-columns: repeat(3, 76px); gap: 12px; font-family: system-ui, sans-serif; }
.pin-keys button { height: 76px; border-radius: 50%; border: 0; background: #ffffff14; font-size: 28px; }
.test-tag { font-family: system-ui, sans-serif; font-size: 12px; padding: 2px 8px; border-radius: 999px; background: #ffb14233; color: #ffb142; }

/* Face-up cards show their game's picture; a skipped one keeps it, with a little "later" mark. */
.card-icon { width: 70%; height: 70%; min-height: 0; max-height: 70%; object-fit: contain; filter: drop-shadow(0 6px 8px #000a); pointer-events: none; }
.card-later { position: absolute; right: 8%; bottom: 6%; font-size: 26px; color: #fff; text-shadow: 0 2px 4px #0008; }

/* The sound board: a play break. */
.sound-board { display: grid; grid-template-rows: 1fr auto; place-items: center; height: 100%; padding: 16px 16px 24px; }
.play-field { position: relative; width: 100%; height: 100%; container-type: size; }
.noisy { position: absolute; width: min(22cqw, 40cqh); aspect-ratio: 1; border: 0; background: none; padding: 0; cursor: pointer;
  transform: translate(-50%, -50%) rotate(var(--r)); touch-action: none; }
.noisy img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 8px #000a); pointer-events: none; }
.noisy.boing { animation: boing .45s; }
@keyframes boing { 30% { scale: 1.2 0.85; } 60% { scale: 0.9 1.12; } }

/* A five-frame or ten-frame drawn behind the things counted: 5 cells a row, the empty ones showing. */
.group-ring { position: absolute; top: 8%; bottom: 8%; border: 4px dashed #ffd32a99; border-radius: 40px; pointer-events: none; }
.mirror-line { position: absolute; top: 4%; bottom: 4%; left: 50%; width: 0; border-left: 4px dashed #ffd32a99; pointer-events: none; }
.frame-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(5, 1fr); border: 4px solid #ffd32a99; border-radius: 14px; overflow: hidden; pointer-events: none; }
.frame-grid.rows-2 { grid-template-rows: repeat(2, 1fr); }
.frame-grid.rows-4 { grid-template-rows: repeat(4, 1fr); }
.frame-grid.rows-4 span:nth-child(n+6):nth-child(-n+10) { border-bottom: 6px solid #ffd32a99; } /* between the two ten-frames */
.frame-grid span { border: 2px solid #ffffff2e; }

/* The eraser that wipes a jumbled count before it is counted again in order. */
.eraser { position: absolute; top: 50%; translate: 0 -50%; width: min(24%, 180px); z-index: 6; pointer-events: none; rotate: -12deg;
  filter: drop-shadow(0 8px 14px #000a); }

/* A break the grown-up called from their phone: covers everything, so nothing can be tapped until they resume. */
.paused { position: fixed; inset: 0; z-index: 50; display: grid; place-content: center; justify-items: center; gap: 12px;
  background: #0d0b1ae6; color: #fff; font-size: 34px; font-weight: 700; text-align: center; }
.paused img { width: min(40vmin, 240px); filter: drop-shadow(0 10px 18px #000b); animation: pulse 3s ease-in-out infinite; }
/* One more like this? The game's icon, a tick and a cross, over the board. */
.again-ask { position: fixed; inset: 0; z-index: 45; display: grid; place-content: center; justify-items: center; gap: 24px; background: #0d0b1ae0; }
.again-ask img { width: min(46vmin, 300px); height: min(46vmin, 300px); object-fit: contain; filter: drop-shadow(0 10px 18px #000b); animation: pulse 2.4s ease-in-out infinite; }
.again-buttons { display: flex; gap: min(10vmin, 60px); }
.again-yes, .again-no { width: min(22vmin, 130px); height: min(22vmin, 130px); border-radius: 50%; border: 0; font-size: min(12vmin, 70px); font-weight: 800; color: #fff; }
.again-yes { background: #1f9d55; box-shadow: 0 8px 0 #146b3a; }
.again-no { background: #6b6784; box-shadow: 0 8px 0 #45425a; }
.finished-sticker { cursor: pointer; }
/* Praise sent from the grown-up's phone, over the board or a game. */
.cheer { position: fixed; inset: 0; z-index: 40; pointer-events: none; display: grid; place-items: center; }

/* A quick look: the group hides after a moment. */
.item.away { opacity: 0; transition: opacity .3s; pointer-events: none; }

/* One more, one less: the one coming waits off to the side; the numbers wait until it has happened. */
.item.arriving { opacity: 0; }
.answers.wait { visibility: hidden; }

/* A thing being dragged on the plate game: lifted above everything, following the finger. */
.pile-item.dragging { position: relative; z-index: 20; scale: 1.15; filter: drop-shadow(0 12px 14px #000c); transition: none; }

/* Ask a grown-up for help: top right in a game, like "later" top left. It glows once pressed. */
.help { position: absolute; top: max(12px, env(safe-area-inset-top)); right: 12px; z-index: 4; width: 64px; height: 64px;
  border-radius: 50%; border: 0; background: #ffffff18; color: var(--muted); }
.help svg { width: 36px; height: 36px; }
.help.asked { background: #ffd32a44; color: #ffd32a; box-shadow: 0 0 18px #ffd32a88; }
/* A card sent from the grown-up's phone: a heart in the corner. */
.card-from { position: absolute; top: 6%; right: 8%; font-size: 26px; color: #ff6b81; text-shadow: 0 2px 4px #0008; }

/* Objects in their places: the plate drawn as the place they go (a hive, a fish bowl), the pile as where they
   come from (a frying pan); the things sit over the picture. */
/* dvh: the height the browser actually shows (under a tablet's top bar), so the tick below stays on screen. */
.plate.place { --w: min(64vw, 460px, 40vh); background: center / contain no-repeat; border-radius: 0; box-shadow: none;
  width: var(--w); aspect-ratio: 1.3; min-height: 0; align-content: center; gap: 2px;
  padding: calc(var(--w) * .12) calc(var(--w) * .1) calc(var(--w) * .08); } /* the picture's shape: things sit on it */
/* More than 8 things (up to 12, taking some off to make 10): every thing smaller, in the pile and on the plate alike. */
.crowded .pile-item { width: min(8vmin, 60px); height: min(8vmin, 60px); }
.plate.place::before, .plate.place::after { display: none; }
.pile.place { --pw: min(78vw, 560px, 38vh); background: center / contain no-repeat; width: var(--pw); aspect-ratio: 1.45; min-height: 0;
  padding: calc(var(--pw) * .11) calc(var(--pw) * .24) calc(var(--pw) * .14) calc(var(--pw) * .10); align-content: center; gap: 0; }
.pile.place .pile-item { width: min(10vmin, 76px, 8vh); width: min(10vmin, 76px, 8dvh); height: min(10vmin, 76px, 8vh); height: min(10vmin, 76px, 8dvh); margin: -4px; }

/* What comes next? A pattern row with a gap, and stickers to choose from. */
.pattern-row { display: flex; align-items: center; justify-content: center; gap: min(2vmin, 14px); flex-wrap: nowrap; width: 100%; }
/* Each cell up to 110px, shrinking so a row of 8 fits a portrait tablet. */
.pattern-item, .pattern-gap { flex: 0 1 min(14vmin, 110px); min-width: 0; aspect-ratio: 1; height: auto; }
.pattern-item { object-fit: contain; filter: drop-shadow(0 6px 8px #000b); transition: transform .2s; }
.pattern-item.counted, .pattern-gap.counted { transform: translateY(-8px) scale(1.08); }
.pattern-gap { display: grid; place-items: center; border: 4px dashed #ffffff55; border-radius: 18px; font-size: min(8vmin, 60px); color: #ffffff88; font-weight: 700; }
.pattern-gap.filled { border-style: solid; border-color: #ffd32a88; }
.pattern-gap img { width: 90%; height: 90%; object-fit: contain; }
/* Words in a row (days, months): wider than tall, all the same height. */
.pattern-item.wide { flex: none; height: min(8vw, 60px); width: auto; aspect-ratio: auto; } /* one letter height */
.pattern-gap.wide { flex: none; height: min(8vw, 60px); width: min(24vw, 190px); aspect-ratio: auto; }
.sticker-choice.wide { width: auto; min-width: min(24vw, 180px); height: min(10vw, 80px); padding: 12px 16px; }
.sticker-choice.wide img { width: auto; max-width: 100%; }
.sticker-answers { gap: 16px; }
.sticker-choice { width: min(20vmin, 140px); height: min(20vmin, 140px); border-radius: 22px; border: 0; background: #ffffff10; box-shadow: inset 0 0 0 3px #ffffff30, 0 8px 0 #0005; padding: 10px; }
.sticker-choice img { width: 100%; height: 100%; object-fit: contain; }
.sticker-choice.right { box-shadow: inset 0 0 0 4px #2ed573, 0 8px 0 #0005; }
.sticker-choice.wrong, .sticker-choice.dimmed { opacity: .35; }
.sticker-choice.hint { box-shadow: inset 0 0 0 4px #ffd32a, 0 0 22px #ffd32a88; animation: pulse 1.2s ease-in-out infinite; }

/* A cloth hiding the first group while more arrive. */
.cloth { position: absolute; z-index: 3; object-fit: fill; pointer-events: none; filter: drop-shadow(0 8px 12px #000a); }

/* Colour swatches: a paint splat per panel. */
.swatches .panel { display: grid; place-items: center; min-width: 0; position: relative; }
/* Sized by the tile, never by the picture, and centred in it: the inset and the size go together (a big tile's 96%
   picture at the small tile's 10% inset ran off the bottom: the owner, the coins "don't look central"). */
.swatches .panel > .splat { position: absolute; inset: 10%; width: 80%; height: 80%; }
.panels.big { flex-wrap: wrap; }
.panels.big .panel { flex: 0 1 min(calc(50% - 20px), 28vh); max-width: none; } /* two rows fit under the question */
.panels.big .splat, .panels.big.swatches .panel > .splat { inset: 2%; width: 96%; height: 96%; }
/* A grid of many choices (lots of hands: 3 by 2, 4 by 2, 3 by 3), as wide as the rows let it be. */
.panels.grid { display: grid; grid-template-columns: repeat(var(--cols), 1fr); width: min(96vw, 900px, calc(var(--cols) * 4 / 3 * 58vh / var(--rows))); }
.panels.grid .panel { max-width: none; border-radius: 20px; }
@supports (height: 1dvh) { .panels.grid { width: min(96vw, 900px, calc(var(--cols) * 4 / 3 * 58dvh / var(--rows))); } }
.splat { width: 80%; height: 80%; object-fit: contain; filter: drop-shadow(0 8px 10px #000a); pointer-events: none; }
/* The picture a "Find the picture" question is about (the mummy whose baby to find), large above the choices. */
/* Taken over: while a check explains a mistake, the choices are locked and faded, the pictures stay bright. */
.taken-over { pointer-events: none; }
.taken-over .panel:not(.hint), .taken-over .pile-item, .taken-over button.numeral, .taken-over .pattern-spot:not(.hint), .taken-over .sticker-choice:not(.hint), .taken-over .tick { opacity: .45; transition: opacity .3s; }
.pattern-gap.asking { animation: asking 0.9s ease-in-out 2; }
@keyframes asking { 50% { transform: scale(1.18); box-shadow: 0 0 0 6px #ffd400; } }
/* Find the note: big piano keys, each with its note's colour along the bottom. */
.piano-board { position: relative; display: flex; width: min(94vw, 720px); aspect-ratio: 7 / 4; max-height: 40vh;
  padding: 10px 10px 14px; border-radius: 18px; background: #2a2433; box-shadow: 0 10px 0 #120f18, 0 18px 30px #000a; }
.piano-white { position: relative; flex: 1; margin: 0 2px; border: 0; border-radius: 0 0 12px 12px; background: #fafafa;
  box-shadow: inset 0 -10px 0 #ddd8cc; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6%; }
.piano-letter { display: grid; place-items: center; width: 70%; aspect-ratio: 1; max-width: 56px; border-radius: 50%;
  background: var(--note); color: #fff; font-size: clamp(16px, 4vw, 30px); font-weight: bold; text-shadow: 0 2px 0 #0006; }
.piano-white.out { background: #9a96a3; box-shadow: inset 0 -10px 0 #827e8b; }
.piano-white.out .piano-letter { background: #6d6976; opacity: .6; }
.piano-white.picked { background: #2ed573; box-shadow: inset 0 -4px 0 #1a8f4a; transform: translateY(4px); } /* this one */
.piano-white.wrong { background: #ff6b6b; }
.piano-black { position: absolute; top: 10px; width: 8%; height: 58%; transform: translateX(-50%); border-radius: 0 0 8px 8px;
  background: #181818; box-shadow: inset 0 -6px 0 #333; pointer-events: none; }
/* Find the note and Name the note: a small speaker, so the keys and the tick fit upright. */
.mechanic.piano .scene, .mechanic.name-note .scene { height: min(22vh, 200px); aspect-ratio: auto; }
.mechanic.piano .big-speaker, .mechanic.name-note .big-speaker { width: min(18vh, 160px); height: min(18vh, 160px); }
/* Find the way: a maze of walls, the treat at the goal, animals at the entrances; ways drawn over it. */
.maze-scene { position: relative; width: min(94vw, 720px); max-height: 60vh; }
.maze-scene svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.maze-wall { stroke: #e8e4f7; stroke-width: 1.6; stroke-linecap: round; }
/* A maze built of things: a floor of the theme's colour, a piece on every wall block, the ways drawn over the floor. */
.maze-floor { position: absolute; background: var(--floor); border-radius: 6px; box-shadow: inset 0 0 0 3px #0002; }
.maze-block { position: absolute; aspect-ratio: 1; object-fit: contain; transform: translate(-50%, -50%); pointer-events: none; filter: drop-shadow(0 2px 2px #0006); }
.maze-scene.themed svg { z-index: 1; }
.maze-scene.themed .maze-goal, .maze-scene.themed .maze-start { z-index: 2; }
.maze-way { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 400; stroke-dashoffset: 400; animation: trace 1.6s ease-out forwards; }
.maze-way.traced { stroke: #5ad28b; }
.maze-way.blocked { stroke: #ff7a7a; }
.maze-goal, .maze-start { position: absolute; width: 11%; aspect-ratio: 1; transform: translate(-50%, -50%); }
.maze-goal { object-fit: contain; pointer-events: none; }
.maze-start { padding: 3px; }
.maze-start img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
/* Letters to play with: a letter tapped springs up big above the grid. */
.letter-big { height: min(26vw, 20vh); min-height: 40px; filter: drop-shadow(0 8px 12px #000a); }
.letter-big.spring { animation: spring .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes spring { from { transform: scale(.3); } to { transform: scale(1); } }
/* Pairs: cards in a grid, face down until turned; a pair stays up, glowing. */
.pairs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: min(3vw, 18px); width: min(90vw, 640px); }
.pair-card { aspect-ratio: 1; padding: 10%; }
.pair-card img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.pair-card.facedown { background: repeating-linear-gradient(45deg, #3d5bd8 0 12px, #4d6be8 12px 24px); }
.pair-card.facedown img { visibility: hidden; }
.pair-card.matched { box-shadow: 0 0 0 5px #5ad28b, 0 0 22px #5ad28b88; }
/* Falling: letters drift down in their lanes, slowly; everything stops once answered or while taken over. */
.falling-field { position: relative; width: min(94vw, 900px); height: min(62vh, 700px); overflow: hidden; }
.falling-item { position: absolute; top: 0; width: min(20vw, 130px); aspect-ratio: 1; transform: translate(-50%, -110%); animation: fall linear infinite; padding: 4%; }
.falling-item img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
@keyframes fall { from { top: 0; transform: translate(-50%, -110%); } to { top: 100%; transform: translate(-50%, 10%); } }
.falling-field:has(.right) .falling-item, .taken-over .falling-item { animation-play-state: paused; }
/* Typing: the letters in alphabet order, big keys; the word typed in a row above. */
.keyboard { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: min(1.4vw, 10px); width: min(94vw, 760px); }
.key { aspect-ratio: 1; border-radius: 14px; border: 0; background: #f4f1ea; box-shadow: 0 5px 0 #b9b2a3; padding: 6%; }
.key img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.key.hint { background: #ffe27a; box-shadow: 0 5px 0 #c9a93a; }
.key.wrong { background: #ffb3b3; }
.key-back { font-size: min(7vw, 40px); color: #1a1a24; grid-column: span 2; aspect-ratio: auto; }
.typed-row { display: flex; justify-content: center; gap: 2px; min-height: min(14vw, 90px); padding: 6px 12px; border-bottom: 3px solid #fff4e055; }
.typed-row.right { border-bottom-color: #5ad28b; }
.typed-letter { height: min(14vw, 90px); width: auto; }
.taken-over .key:not(.hint) { opacity: .45; }
/* Follow the line: lines drawn across the box; the animals sit on their starts, the treat at one end. */
.tangle-scene { position: relative; width: min(94vw, 900px); aspect-ratio: 4 / 3; max-height: 60vh; }
.tangle-scene svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tangle-line { fill: none; stroke: #e8e4f7; stroke-width: 7; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.tangle-line.traced, .tangle-line.traced-wrong { stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: trace 1.4s ease-out forwards; }
.tangle-line.traced { stroke: #5ad28b; stroke-width: 10; }
.tangle-line.traced-wrong { stroke: #ff7a7a; stroke-width: 10; }
@keyframes trace { to { stroke-dashoffset: 0; } }
.tangle-start { position: absolute; left: 0; width: 16%; aspect-ratio: 1; padding: 4px; transform: translateY(-50%); }
.tangle-start img, .tangle-end { width: 100%; height: 100%; object-fit: contain; }
.tangle-end { position: absolute; right: 0; width: 14%; height: auto; aspect-ratio: 1; transform: translateY(-50%); pointer-events: none; }
/* Where was it? Cards can't be tapped while they show; face down, the picture hides behind a card back. */
.looking .panel { pointer-events: none; }
.panel.facedown { background: repeating-linear-gradient(45deg, #3d5bd8 0 12px, #4d6be8 12px 24px); }
.panel.facedown img { visibility: hidden; }
.picture-shown.away { visibility: hidden; }
.picture-shown.wide { width: min(80vw, 70vh); height: min(24vw, 18vh); }
.picture-shown-row { display: flex; align-items: center; justify-content: center; gap: min(3vw, 20px); pointer-events: none; }
.picture-shown-row .picture-shown { width: min(22vw, 20vh); height: min(22vw, 20vh); }
.picture-join { font-size: min(9vw, 8vh); font-weight: 800; color: #fff; text-shadow: 0 4px 10px #000a; line-height: 1; }
.picture-shown { width: min(34vw, 30vh); height: min(34vw, 30vh); object-fit: contain; filter: drop-shadow(0 10px 14px #000a); pointer-events: none; }
/* A round solid rolls when it's found: off to the right a turn and back. */
.splat.roll { animation: roll 1.6s ease-in-out; }
@keyframes roll { 0% { translate: 0; rotate: 0deg; } 50% { translate: 45% 0; rotate: 360deg; } 100% { translate: 0; rotate: 0deg; } }

/* Shape tiles. */
.swatches .shape { width: 78%; height: 78%; overflow: visible; filter: drop-shadow(0 8px 10px #000a); pointer-events: none; }

/* Where is it? A place in the middle and one thing to put in, on, under or next to it. */
.position-scene { position: relative; width: min(94vw, 900px); height: min(62vh, 560px); container-type: size; }
.position-place { position: absolute; left: 50%; top: 42%; translate: -50% -50%; width: min(52cqw, 60cqh); height: min(52cqw, 60cqh); object-fit: contain; filter: drop-shadow(0 10px 14px #000a); pointer-events: none; }
.position-thing { position: absolute; left: 12%; top: 88%; translate: -50% -50%; width: min(16cqw, 20cqh); height: min(16cqw, 20cqh); object-fit: contain; z-index: 4;
  filter: drop-shadow(0 8px 10px #000b); transition: left .5s ease, top .5s ease, clip-path .25s ease .35s; cursor: grab; }
.position-thing.inside { clip-path: inset(0 0 38% 0); }
.position-place { z-index: 2; }
.position-thing.behind { z-index: 1; } /* behind the place: only what shows above it is seen */
.position-thing.dragging { transition: none; scale: 1.12; cursor: grabbing; }
.position-thing.wrong { animation: shake .4s; }
/* A cut-out glows green when it's right; the plain .right would paint a square behind it. */
.position-thing.right { background: transparent !important; filter: drop-shadow(0 0 10px var(--right)) drop-shadow(0 8px 10px #000b); }
.spot-target { position: absolute; translate: -50% -50%; width: min(18cqw, 22cqh); height: min(18cqw, 22cqh); border-radius: 50%; border: 0; background: transparent; z-index: 3; }
.spot-target.hint { box-shadow: 0 0 0 4px #ffd32a, 0 0 24px #ffd32a99; animation: pulse 1.2s ease-in-out infinite; }

/* Spot the mistake: the pattern's stickers are buttons; the wrong one shrinks away and comes back put right. */
.pattern-spot { border: 0; background: transparent; padding: 0; border-radius: 16px; flex: 0 1 min(14vmin, 110px); min-width: 0; }
.pattern-spot .pattern-item { display: block; width: 100%; }
.pattern-spot.hint { box-shadow: 0 0 0 4px #ffd32a, 0 0 24px #ffd32a99; }
.pattern-spot.dimmed { opacity: .45; }
.pattern-spot.right { box-shadow: 0 0 0 4px var(--right); }
.pattern-spot.wrong { animation: shake .4s; }
.pattern-item.fixing { scale: 0; transition: scale .3s; }

/* A short landscape screen (a tablet under its browser bar): the plate and where things come from side by side, so
   the question, both and the tick all fit. */
@media (orientation: landscape) and (max-height: 820px) {
  .make-tray { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; align-items: center; }
  .make-tray .prompt, .make-tray .tick { grid-column: 1 / -1; }
  .make-tray .plate { width: min(44vw, 520px); }
  .make-tray .plate.tray { width: max-content; } /* the tray is as wide as its five cells, not the plate's width */
  .make-tray .plate.place { --w: min(44vw, 460px, 58vh); }
  .make-tray .pile { width: min(46vw, 480px); }
  .make-tray .pile.place { --pw: min(46vw, 520px, 56vh); }
}

/* A Day Out: a picture made of stickers (the place behind; the people and what they're doing in front; the weather
   in a corner; his speech bubble), the verse under it, the refrain to tap along, and on a choice page the cards. */
.mechanic.story { align-content: start; } /* the picture stays put from page to page */
.story-page { display: grid; gap: min(2vh, 14px); justify-items: center; width: 100%; }
.story-picture { position: relative; width: min(88vw, 820px); aspect-ratio: 4 / 3; max-height: 50vh; border-radius: 28px; background: #ffffff0c; box-shadow: inset 0 0 0 3px #ffffff18; }
.story-back { position: absolute; inset: 3%; width: 94%; height: 94%; object-fit: contain; }
.story-front { position: absolute; left: 4%; right: 4%; bottom: 3%; height: 52%; display: flex; justify-content: center; align-items: flex-end; gap: 2%; pointer-events: none; }
.story-front img { height: 100%; object-fit: contain; filter: drop-shadow(0 8px 10px #000a); min-width: 0; }
.story-front .story-person.hero { height: 72%; }
.story-front .story-thing { height: 78%; }
.story-weather { position: absolute; top: 3%; right: 3%; width: 17%; filter: drop-shadow(0 6px 8px #0008); }
.story-bubble { position: absolute; top: 5%; left: 5%; max-width: 58%; padding: 10px 18px; border: 0; border-radius: 22px; background: #fffdf6; color: #1a1a24; font: 600 clamp(18px, 2.8vw, 28px)/1.25 inherit; box-shadow: 0 6px 12px #0007; }
.story-verse { max-width: min(92vw, 860px); text-align: center; }
.story-verse p { margin: 2px 0; font-size: clamp(18px, 3vw, 30px); line-height: 1.35; color: var(--ink); }
.story-refrain { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 8px 20px; border-radius: 999px; background: #ffffff14; font-size: clamp(24px, 4vw, 38px); font-weight: bold; cursor: pointer; }
.story-refrain span { padding: 0 6px; border-radius: 10px; transition: background .15s; }
.story-refrain span.lit { background: var(--hint); color: #111; }
.story-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: min(2.4vw, 16px); }
.story-card { display: grid; justify-items: center; gap: 4px; width: min(20vw, 160px); padding: 10px; border: 0; border-radius: 22px; background: #ffffff10; box-shadow: inset 0 0 0 3px #ffffff24, 0 8px 0 #0005; color: var(--ink); font-size: clamp(18px, 2.6vw, 24px); }
.story-card img { width: 100%; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 6px 8px #000a); }
.story-turn { position: absolute; top: 40%; z-index: 3; width: 60px; height: 96px; border: 0; border-radius: 20px; background: #ffffff1a; color: var(--ink); font-size: 56px; line-height: 1; }
.story-turn.back { left: 6px; }
.story-turn.next { right: 6px; }
.story-turn[hidden] { display: none; }

/* Score a goal: a pitch, the goal at the top, the ball to pull back; a line shows where it will go. */
.pitch { position: relative; width: min(92vw, 720px); height: min(70vh, 820px); border-radius: 28px; overflow: hidden; touch-action: none;
  background: repeating-linear-gradient(0deg, #3c9a45 0 60px, #43a84c 60px 120px); box-shadow: inset 0 0 0 4px #ffffff55; }
.pitch-goal { position: absolute; top: 2%; pointer-events: none; filter: drop-shadow(0 6px 8px #0008); }
.pitch-keeper { position: absolute; pointer-events: none; filter: drop-shadow(0 6px 8px #0008); }
.pitch-ball { position: absolute; width: 80px; height: 80px; cursor: grab; filter: drop-shadow(0 6px 6px #0009); touch-action: none; }
.pitch-ball.scored { animation: pop .4s; }
.pitch-aim { display: none; position: absolute; height: 6px; margin-top: -3px; transform-origin: 0 50%; border-radius: 3px; pointer-events: none;
  background: repeating-linear-gradient(90deg, #fff 0 14px, transparent 14px 24px); }

/* Sides and corners: a big shape whose sides or corners light up and take their numbers as they are counted. */
.outline { width: min(60vw, 46vh, 460px); height: min(60vw, 46vh, 460px); overflow: visible; }
.outline-fill { fill: #00aeef; }
.outline .side { stroke: #fff4e0; stroke-width: 7; stroke-linecap: round; transition: stroke .15s, stroke-width .15s; }
.outline .side.lit { stroke: #ffd32a; stroke-width: 13; }
.outline .corner { fill: #fff4e0; stroke: #1a1a24; stroke-width: 3; transition: fill .15s; }
.outline .corner.lit { fill: #ffd32a; stroke: #1a1a24; stroke-width: 3; }
.outline .part-hit { stroke: transparent; fill: transparent; cursor: pointer; pointer-events: all; }
.outline line.part-hit { stroke-width: 34; stroke-linecap: round; } /* a finger-wide side */
.outline .part-number { fill: #fff; font: bold 22px system-ui, sans-serif; text-anchor: middle; dominant-baseline: middle; paint-order: stroke; stroke: #1a1a24; stroke-width: 5px; }

/* A picture chart: a row per thing, its picture first, then that many of it in a line. */
.chart { display: grid; gap: min(1.6vh, 12px); width: min(92vw, 760px); }
.chart-row { position: relative; display: flex; align-items: center; gap: 10px; padding: 6px 10px; border: 0; border-radius: 18px; background: #ffffff0e; box-shadow: inset 0 0 0 3px #ffffff1c; color: inherit; }
.chart-label { width: min(12vw, 72px); height: min(12vw, 72px); object-fit: contain; padding-right: 10px; border-right: 3px solid #ffffff33; }
.chart-line { display: flex; gap: 4px; flex-wrap: nowrap; }
.chart-item { width: min(9vw, 56px); height: min(9vw, 56px); object-fit: contain; filter: drop-shadow(0 4px 5px #000a); }
.chart-row.right { background: color-mix(in srgb, var(--right) 45%, transparent); }
.chart-row.hint { box-shadow: inset 0 0 0 4px #ffd32a, 0 0 22px #ffd32a88; }
.chart-row.dimmed, .chart-row.wrong { opacity: .4; }

/* A race: the runners in order, the finish line (a chequered strip) on the left. */
.panels.race { position: relative; padding-left: 34px; }
.panels.race::before { content: ""; position: absolute; left: 0; top: -10px; bottom: -10px; width: 22px; border-radius: 4px;
  background: repeating-conic-gradient(#1a1a24 0 25%, #fff 0 50%) 0 0 / 22px 22px; }
.panels.race .splat { transform: scaleX(-1); } /* facing the finish */

/* The number line: ticks, some numbers under them, an arrow over one; counting along lights the ticks. */
.number-line { width: min(94vw, 900px); overflow: visible; }
.number-line .line { stroke: #fff4e0; stroke-width: 6; stroke-linecap: round; }
.number-line .tick { stroke: #fff4e0; stroke-width: 5; stroke-linecap: round; transition: stroke .15s; }
.number-line .tick.lit { stroke: #ffd32a; stroke-width: 9; }
.number-line .label { fill: #fff4e0; font: bold 44px system-ui, sans-serif; text-anchor: middle; }
.number-line .label.found { fill: #ffd32a; }
.number-line .arrow { fill: #ffd32a; stroke: #1a1a24; stroke-width: 4; stroke-linejoin: round; }

/* Put them in order: a row of empty places above, the tiles below; a tile tapped moves into the next place. */
.slots { display: flex; gap: min(2vw, 14px); justify-content: center; }
.slot { width: min(18vw, 120px); height: min(18vw, 120px); border-radius: 22px; border: 4px dashed #ffffff44; display: grid; place-items: center; transition: border-color .2s; }
.slot.right { border-style: solid; border-color: #2ed573; }
.slot.wrong { border-color: #ff6b6b; }
.slot .order-tile { width: 100%; height: 100%; }
.order-pool { min-height: min(20vmin, 140px); }

/* Share fairly: a teddy and a plate for each share, the pile below. */
.share-row { display: flex; gap: min(4vw, 30px); justify-content: center; }
.share-seat { display: grid; justify-items: center; gap: 4px; }
.share-teddy { width: min(16vw, 110px); height: min(16vw, 110px); object-fit: contain; filter: drop-shadow(0 6px 8px #000a); pointer-events: none; }
.share-plate { width: min(28vw, 230px); min-height: min(18vw, 130px); border: 0; border-radius: 50% / 40%; padding: 14px 18px;
  background: radial-gradient(ellipse at center, #fff 0 55%, #e8e4f5 56% 100%); box-shadow: 0 8px 0 #b7b0d0, 0 14px 22px #000a;
  display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 2px; }
.share-plate .pile-item { width: min(8vw, 52px); height: min(8vw, 52px); }
.share-pile { min-height: min(12vw, 90px); }

/* dvh (the height the browser really shows, under a tablet's top bar) where the browser knows it; an older browser
   keeps the vh sizes above, which a rule it can't read would otherwise have thrown away (the tray lost its cells). */
@supports (height: 1dvh) {
  .plate.tray { --cell: min(14vmin, 100px, 11dvh); }
  .plate.place { --w: min(64vw, 460px, 40dvh); }
  .pile.place { --pw: min(78vw, 560px, 38dvh); }
  @media (orientation: landscape) and (max-height: 820px) {
    .make-tray .plate.place { --w: min(44vw, 460px, 58dvh); }
    .make-tray .pile.place { --pw: min(46vw, 520px, 56dvh); }
  }
}