/* Fruit Pal: its own look (a pale orchard, a wooden drawer of parts, from the Oct 15 mockup, option C). Calm by
   design: soft colors, slow smooth motion (0.4 to 0.8 s, ease in and out), one thing moving at a time, nothing loops. */
:root {
  --bg: #e9f2dc;
  --bg-2: #d9e9c6;
  --card: #fffdf7;
  --ink: #3b2a1a;
  --soft: #6d6250;
  --green: #3fa34d;
  --green-d: #2a7a36;
  --sun: #f6c744;
  --wood: #d9a066;
  --wood-l: #e9b97f;
  --wood-d: #a8713a;
  --wood-in: #f3dcb6;
  --blue-d: #1f5fa8;
  /* Drawer buttons: about 2 cm on a phone (rule 12), bigger where there's room. */
  --cell: clamp(74px, 20vw, 108px);
  --radius: 20px;
  color-scheme: light;
}
/* Evening: dimmer and warmer (rule 4). */
body.evening { --bg: #e6dcc8; --bg-2: #dacdb4; --card: #f6eedc; }
body.evening main, body.evening .top { filter: brightness(.9); }

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100dvh;
  /* Look B (Doug, Nov 3): the bright blue field comes from look-b.css; this is only the color before it loads. */
  background-color: #1f5fbf;
  color: var(--ink);
  font: 500 18px/1.45 'Fredoka', system-ui, sans-serif;
  overscroll-behavior: none;
  overflow-x: hidden;
}
h1, h2 { font-family: 'Fredoka', system-ui, sans-serif; font-weight: 700; line-height: 1.1; margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: var(--blue-d); }
svg { display: block; }

/* top bar */
.top { display: flex; align-items: center; gap: 10px; padding: max(10px, env(safe-area-inset-top)) 16px 6px; min-height: 64px; }
.grow { flex: 1; }
.brand { display: inline-block; width: 40px; }
.brand svg { width: 100%; height: auto; }
.back, .round {
  min-height: 48px; min-width: 48px; border: 3px solid var(--ink); border-radius: 16px; background: var(--card);
  box-shadow: 0 4px 0 var(--ink); font-weight: 700; padding: 6px; display: inline-flex; align-items: center; justify-content: center;
}
.back:active, .round:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
#sound .mute { display: none; }
#sound[aria-pressed='false'] .mute { display: inline; }
#sound[aria-pressed='false'] .waves { display: none; }

main { max-width: 1600px; margin: 0 auto; padding: 0 16px calc(20px + env(safe-area-inset-bottom)); }
.screen { display: grid; gap: 16px; }

/* home */
.hero { text-align: center; display: grid; gap: 8px; padding-top: 4px; }
.hero h1 { font-size: clamp(34px, 10vw, 54px); }
.lede { margin: 0; font-size: 20px; color: var(--soft); }
.big {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 76px;
  border: 3px solid var(--ink); border-radius: 24px; font-size: 30px; font-weight: 700; box-shadow: 0 7px 0 var(--ink); padding: 10px 20px;
}
.big:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--ink); }
.big.go { background: var(--green); color: #fff; text-shadow: 0 2px 0 #0003; }
.big.again { background: var(--sun); }
.again-pic { width: 48px; height: 48px; }
.again-pic svg { width: 100%; height: 100%; }
.big.plain { background: var(--card); font-size: 24px; min-height: 64px; }
.pick { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; min-width: 0; }
.pick legend { font-weight: 700; font-size: 18px; margin-bottom: 8px; padding: 0; }
.pick button {
  border: 3px solid var(--ink); border-radius: 18px; background: var(--card); box-shadow: 0 4px 0 var(--ink); padding: 10px 4px;
  display: grid; justify-items: center; align-content: start; gap: 4px; font-weight: 700; font-size: 20px; line-height: 1.15; min-height: 96px;
}
.pick button small { font-size: 14px; font-weight: 500; color: var(--soft); }
.pick button[aria-pressed='true'] { background: #dff3e1; border-color: var(--green-d); box-shadow: 0 4px 0 var(--green-d); outline: 3px solid var(--green); outline-offset: 1px; }
.mini-num { display: inline-grid; place-items: center; min-width: 64px; padding: 2px 8px; border-radius: 999px; background: #fff; border: 2px solid var(--ink); font-size: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips legend { width: 100%; }
.chips button { display: inline-flex; min-height: 48px; padding: 6px 14px; font-size: 18px; align-items: center; }
.grownups, .about { background: var(--card); border: 3px solid var(--ink); border-radius: var(--radius); padding: 14px 16px; box-shadow: 0 5px 0 #3b2a1a33; }
.grownups summary { font-weight: 700; cursor: pointer; min-height: 32px; }
.grownups p, .about p { margin: 10px 0 0; }
.about h2 { font-size: 22px; margin-top: 14px; }
.about h2:first-child { margin-top: 0; }
.about h3 { font-size: 18px; margin: 12px 0 0; }
.about ul { padding-left: 22px; display: grid; gap: 6px; }
.small { font-size: 14px; color: var(--soft); }

/* play */
#play-screen { gap: 8px; }
.said {
  margin: 0 auto; max-width: 560px; min-height: 40px; padding: 4px 14px; text-align: center; font-size: clamp(17px, 4.6vw, 22px); font-weight: 700;
  background: var(--card); border: 3px solid var(--ink); border-radius: 18px; box-shadow: 0 4px 0 #3b2a1a33;
}
.said:empty { visibility: hidden; }

/* 1. pick a fruit: 4 + 4 */
.fruits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: min(100%, (100dvh - 190px) * .62); margin: 0 auto; }
.fruit-btn { aspect-ratio: 1 / .86; padding: 4px; border: 3px solid var(--ink); border-radius: 20px; background: var(--card); box-shadow: 0 5px 0 #3b2a1a55; min-width: 0; }
.fruit-btn svg { width: 100%; height: 100%; }
.fruit-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #3b2a1a55; }

/* 2. build */
.build { display: grid; gap: 10px; }
.stage { position: relative; height: max(190px, calc(100dvh - 590px)); }
.pal-box { position: absolute; inset: 0; }
.pal-box svg, .alive-box svg, .quiz-pal svg, .done-pal svg { width: 100%; height: 100%; overflow: visible; }
.pal-box .part { cursor: pointer; }
.dice { position: absolute; left: 0; top: 0; width: 76px; height: 76px; border-radius: 20px; padding: 8px; z-index: 2; }
.dice svg { width: 100%; height: 100%; }
/* The big "Bring Pear to life!" button: a picture and words (Doug, Oct 15). Dimmed until a part is on. */
.life {
  display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 72px; padding: 6px 16px; width: 100%;
  border: 3px solid var(--ink); border-radius: 24px; background: var(--green); color: #fff; box-shadow: 0 6px 0 #3b2a1a66;
  font-size: clamp(20px, 6vw, 28px); font-weight: 700; text-shadow: 0 2px 0 #0003; opacity: .45; transition: opacity .5s ease-in-out, background-color .5s ease-in-out;
}
.life.ready { background: var(--green); box-shadow: 0 6px 0 var(--ink); opacity: 1; }
.life.ready:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--ink); }
.life .life-pic { position: relative; width: 58px; height: 58px; flex: none; }
.life-pic .pal-svg { width: 100%; height: 100%; }
.life-pic .tw { position: absolute; width: 22px; height: 22px; }
.life-pic .tw1 { right: -8px; top: -6px; }
.life-pic .tw2 { left: -8px; bottom: 2px; width: 16px; height: 16px; }
.life-label { min-width: 0; }

/* the wooden drawer */
.drawer { width: 100%; }
.tray {
  border: 4px solid var(--ink); border-bottom: 0; border-radius: 22px 22px 0 0; padding: 8px; display: grid; gap: 8px;
  background: repeating-linear-gradient(90deg, transparent 0 26px, rgba(255,255,255,.08) 26px 28px, transparent 28px 60px, rgba(0,0,0,.06) 60px 62px), linear-gradient(var(--wood-l), var(--wood));
  box-shadow: inset 0 4px 0 rgba(255,255,255,.4);
}
.front { height: 26px; border: 4px solid var(--ink); border-radius: 0 0 14px 14px; background: linear-gradient(var(--wood), #c98c50); display: grid; place-items: center; box-shadow: 0 6px 0 rgba(107,74,42,.3); }
.knob { width: 70px; height: 12px; border-radius: 10px; background: var(--wood-d); border: 3px solid var(--ink); }
.pager { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 6px; align-items: stretch; }
.pager.inside { padding: 6px; border-radius: 16px; background: var(--wood-in); border: 3px solid var(--ink); box-shadow: inset 0 4px 0 rgba(168,113,58,.35); }
.arrow { border: 3px solid var(--ink); border-radius: 14px; background: var(--sun); box-shadow: 0 4px 0 var(--ink); padding: 4px; display: grid; place-items: center; min-height: 72px; }
.arrow svg { width: 100%; max-width: 30px; height: auto; }
.arrow:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.tabs, .parts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.tab, .part-btn { position: relative; display: grid; place-items: center; min-height: var(--cell); border: 3px solid var(--ink); border-radius: 16px; padding: 4px; }
.tab { background: #c98c50; box-shadow: inset 0 -5px 0 var(--wood-d); min-height: 74px; }
.tab svg { width: 62px; height: 62px; opacity: .9; }
.tab[aria-pressed='true'] { background: var(--wood-in); box-shadow: 0 4px 0 var(--ink); transform: translateY(-2px); }
.tab[aria-pressed='true'] svg { opacity: 1; }
.part-btn { background: var(--card); box-shadow: 0 4px 0 rgba(59,42,26,.35); touch-action: none; }
.part-btn svg { width: 88%; height: 88%; max-width: 96px; max-height: 96px; }
.part-btn[aria-pressed='true'] { background: #e4f4e2; border-color: var(--green-d); }
/* A picked part, a tab with a part on, and the picked color show a check, not only a color (rule 16). */
.tick { display: none; position: absolute; right: -6px; top: -6px; width: 26px; height: 26px; border-radius: 50%; background: var(--green); border: 3px solid var(--ink); }
.tick::after { content: ''; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg); }
.part-btn[aria-pressed='true'] .tick, .tab.has .tick, .swatch[aria-pressed='true'] .tick { display: block; }
.colors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.swatch { position: relative; min-height: 50px; border-radius: 14px; border: 3px solid var(--ink); background: var(--c); box-shadow: inset 0 -5px 0 #0002, 0 3px 0 #3b2a1a55; }
.swatch[aria-pressed='true'] { box-shadow: inset 0 -5px 0 #0002, 0 0 0 3px var(--card), 0 0 0 6px var(--ink); }
.drag-ghost { position: fixed; z-index: 30; pointer-events: none; display: grid; place-items: center; }
.drag-ghost svg { width: 88%; height: 88%; }

/* The hand that shows how, once: one slow glide, then it fades. */
.how { position: absolute; z-index: 40; pointer-events: none; }
.how-part { filter: drop-shadow(0 6px 0 rgba(59,42,26,.22)); }
.how-part svg { width: 100%; height: 100%; }
.how-hand { position: absolute; left: 40%; top: 40%; width: 72px; height: 90px; }
.how-hand svg { width: 100%; height: 100%; }

/* 3. alive */
.alive { display: grid; gap: 12px; justify-items: center; }
.alive-stage { position: relative; width: min(100%, 520px); height: max(240px, calc(100dvh - 400px)); }
.alive-box { position: absolute; inset: 0; }
.alive-box .pal-all { transform-box: fill-box; transform-origin: 50% 100%; }
.alive-box .eyes-lid { transform-box: fill-box; transform-origin: 50% 50%; }
.twinkles .tw { position: absolute; width: 15%; height: auto; aspect-ratio: 1; opacity: 0; transform: translate(-50%, -50%); }
/* 4. play together */
.quiz { display: grid; gap: 12px; justify-items: center; }
.dots { list-style: none; display: flex; justify-content: center; gap: 8px; margin: 0; padding: 0; }
.dots li { width: 18px; height: 18px; border-radius: 50%; background: #d3e4da; border: 2px solid #a3bcae; }
.dots li.now { background: var(--sun); border-color: var(--ink); }
.dots li.done { background: var(--green); border-color: var(--green-d); }
.quiz-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 10px; align-items: center; width: min(100%, 720px); }
.quiz-pal { height: clamp(150px, 34dvh, 300px); width: 100%; }
.question { min-height: 120px; display: grid; place-items: center; padding: 10px; background: var(--card); border: 3px solid var(--ink); border-radius: 22px; }
.pile { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 8px; }
.item { display: grid; justify-items: center; width: clamp(48px, 13vw, 84px); }
.item svg { width: 100%; height: auto; aspect-ratio: 400 / 380; }
.item .n { visibility: hidden; font-size: 20px; line-height: 1.1; }
.question.counted .item .n { visibility: visible; }
.plus { font-size: 44px; font-weight: 700; padding: 0 4px; }
.palette { width: min(160px, 40vw); }
.palette svg { width: 100%; height: auto; }
.opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 4vw, 22px); width: min(100%, 520px); }
.opt { min-height: 104px; border: 3px solid var(--ink); border-radius: 20px; background: var(--card); box-shadow: 0 6px 0 var(--ink); display: grid; place-items: center; align-content: center; gap: 4px; padding: 6px; transition: opacity .5s ease-in-out; }
.opt.num b { font-size: 52px; line-height: 1; }
.opt .dots { display: flex; gap: 4px; justify-content: center; }
.opt .dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }
.opt.blob svg { width: 84px; height: 84px; }
.opt.tried { opacity: .35; box-shadow: none; transform: translateY(4px); cursor: default; }
.opt.right { background: #dff3e1; border-color: var(--green-d); }
.opts.waiting .opt { cursor: default; }

/* finish */
#finish { text-align: center; padding-top: 6px; justify-items: center; }
.cheer { font-size: clamp(32px, 9vw, 46px); }
.done-pal { width: min(220px, 60vw); aspect-ratio: 400 / 380; }
.talk { margin: 0; background: #f4fbf6; border: 2px dashed var(--green-d); border-radius: 16px; padding: 12px 14px; text-align: left; font-size: 18px; }
#finish .big { max-width: 560px; }

/* 1b. The guided build: one full-screen step per drawer, the same cards as the fruit pick (Doug, Oct 15). */
.guide { display: grid; gap: 8px; justify-items: center; }
/* The width sets the tiles' size: the window's height less the rows above them (with the row of colors). */
.guide > * { width: min(100%, 520px, max(340px, 100dvh - 410px)); }
/* Never narrower than 340px (Doug, Nov 9: "this looks very cramped" on a short window): on a short window the page
   scrolls a little instead of squeezing the tiles into each other. */
.guide[data-step='hat'] > *, .guide[data-step='hold'] > * { width: min(100%, 520px, max(340px, 100dvh - 500px)); }
.guide-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 6px; width: min(100%, 680px); }
.guide-steps li { aspect-ratio: 1; border-radius: 8px; border: 2px dashed #a3bcae; background: transparent; display: grid; place-items: stretch; }
.guide-steps button { all: unset; box-sizing: border-box; display: grid; place-items: center; width: 100%; height: 100%; padding: 1px; border-radius: 6px; cursor: pointer; }
.guide-steps button:disabled { cursor: default; }
.guide-steps button:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.guide-steps li.done:active { transform: translateY(2px); }
.guide-steps li svg { width: 100%; height: 100%; opacity: .3; filter: grayscale(1); }
.guide-steps li.done { border: 2px solid var(--green-d); background: #dff3e1; }
.guide-steps li.done svg { opacity: 1; filter: none; }
.guide-steps li.now { border: 2px solid var(--ink); background: var(--card); }
.guide-steps li.now svg { opacity: 1; filter: none; }
.guide-steps li.now { box-shadow: 0 0 0 2px var(--ink); }
/* Narrow screens: two rows (7 + 6), so each step picture is a big enough tap target (about 46px at 390px). */
@media (max-width: 600px) { .guide-steps { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; } .guide-steps li { border-radius: 12px; } }
.guide-top { display: grid; grid-template-columns: 80px minmax(0, 1fr) minmax(80px, 30%); gap: 10px; align-items: stretch; }
.guide-back { min-height: 80px; }
.guide-pal { min-height: 90px; height: clamp(90px, 13dvh, 150px); }
.guide-pal svg { width: 100%; height: 100%; overflow: visible; }
.g-tile {
  position: relative; display: grid; place-items: center; min-width: 0; min-height: 80px; padding: 6px; border: 3px solid var(--ink); border-radius: 20px;
  background: var(--card); box-shadow: 0 5px 0 #3b2a1a55; transition: opacity .5s ease-in-out;
}
.g-tile > svg { width: 100%; height: 100%; max-width: 140px; max-height: 140px; }
.g-tile:active { transform: translateY(3px); box-shadow: 0 2px 0 #3b2a1a55; }
.g-tile[aria-pressed='true'] { background: #e4f4e2; border-color: var(--green-d); }
.g-tile[aria-pressed='true'] .tick { display: block; }
.guide-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
/* Square tiles sized by their column only, so a tile never grows past its column into the next one. */
.guide-tiles .g-tile { aspect-ratio: 1; min-height: 0; }
.none-btn { padding: 4px; }
.none-pic { position: relative; display: block; width: 100%; height: 100%; min-height: 70px; }
.none-pic > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.none-pic .pal-svg { opacity: .55; }
.guide-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.guide-pager .arrow { min-height: 72px; }
.guide.moving .g-tile, .guide.moving .arrow { cursor: default; }

/* 3b. "Let's play!": the pal's mini arcade (Doug, Oct 15, option A). On a phone the pal is big on top with its speech
   bubble, then 8 picture tiles 2 across in 4 rows; on a computer the pal is large on the left and the tiles are 4 x 2
   squares. The screen is exactly the window's height, so nothing scrolls. */
#play-screen[data-view='arcade'] { grid-template-rows: minmax(0, 1fr); height: calc(100dvh - var(--top-h, 72px) - 20px - env(safe-area-inset-bottom)); min-height: 480px; }
#play-screen[data-view='arcade'] > .said { display: none; }
.arcade { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 14px; min-height: 0; }
.pa-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 8px; height: clamp(170px, 26dvh, 230px); }
.pa-pal { height: 100%; min-height: 0; width: 100%; padding: 0; border: 0; background: none; border-radius: 24px; }
.pa-pal svg { width: 100%; height: 100%; overflow: visible; }
.pa-pal .pal-all { transform-box: fill-box; transform-origin: 50% 100%; }
.pa-bubble {
  justify-self: start; position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 16px;
  background: var(--card); border: 3px solid var(--ink); border-radius: 18px; box-shadow: 0 4px 0 #3b2a1a33;
}
.pa-said { margin: 0; font-weight: 700; font-size: clamp(20px, 5.4vw, 30px); line-height: 1.15; }
.pa-said:empty { display: none; }
/* The bubble's tail points at the pal: left on a phone, down on a computer. */
.pa-bubble::before { content: ''; position: absolute; left: -14px; top: 50%; margin-top: -10px; border: 10px solid transparent; border-right: 14px solid var(--ink); border-left: 0; }
.pa-bubble::after { content: ''; position: absolute; left: -9px; top: 50%; margin-top: -7px; border: 7px solid transparent; border-right: 10px solid var(--card); border-left: 0; }
.pa-again { flex: none; display: grid; place-items: center; width: 48px; height: 48px; padding: 9px; border-radius: 50%; background: var(--bg); border: 2px solid var(--ink); }
.pa-again svg { width: 100%; height: 100%; }
.pa-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 14px 12px; min-height: 0; }
.pa-tile {
  min-width: 0; min-height: 80px; border: 3px solid var(--ink); border-radius: 22px; background: var(--card); box-shadow: 0 6px 0 var(--ink);
  display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; align-items: center; gap: 2px; padding: 6px 8px 8px;
}
.pa-tile:active, .pa-tile[aria-pressed='true'] { transform: translateY(4px); box-shadow: 0 2px 0 var(--ink); }
.pa-tile[aria-pressed='true'] { background: #e4f4e2; border-color: var(--green-d); }
.arcade.opening .pa-tile, .arcade.opening .pa-pal { cursor: default; }
.pa-pic { width: 100%; height: 100%; min-height: 0; display: grid; place-items: center; }
.pa-pic > svg { width: 100%; height: 100%; max-height: 100%; }
.pa-word { display: grid; place-items: center; min-height: 1.2em; font-weight: 700; font-size: 19px; line-height: 1.1; text-align: center; text-wrap: balance; }
/* All done: back to the pal (big), or a new pal or Home (two equal buttons). */
.done-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; max-width: 560px; }
.done-row .big { font-size: 22px; padding: 10px 12px; gap: 8px; }
#to-pal .again-pic { width: 56px; height: 56px; }

/* 5. The four games with the pal */
.game { display: grid; gap: 10px; justify-items: center; }
.g-stage { width: min(100%, 560px); display: grid; gap: 8px; justify-items: center; }
.g-stage:empty { display: none; }
.g-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 3vw, 18px); width: min(100%, 560px); }
.g-opts .g-tile { box-shadow: 0 6px 0 var(--ink); touch-action: none; }
.g-opts.waiting .g-tile { cursor: default; }
.g-tile.tried { opacity: .35; box-shadow: none; transform: translateY(4px); cursor: default; }
.g-tile.right { background: #dff3e1; border-color: var(--green-d); }
.g-tile.eaten { opacity: 0; pointer-events: none; }
/* Feed me */
.feed-pal { width: 100%; height: clamp(130px, calc(100dvh - 640px), 300px); }
.feed-pal svg, .scene-pal svg, .dance-pal svg { width: 100%; height: 100%; overflow: visible; }
.bowl { width: min(72%, 300px); }
.bowl > svg { width: 100%; height: auto; }
.g-opts.snacks { width: min(100%, 460px); padding: 10px; border: 3px solid var(--ink); border-radius: 22px; background: linear-gradient(var(--wood-l), var(--wood)); box-shadow: 0 5px 0 #3b2a1a33; }
.g-opts.snacks .g-tile { aspect-ratio: 1 / .9; min-height: 84px; }
.g-opts.snacks .g-tile > svg { max-width: 92px; }
/* Dress for the weather */
.scene { position: relative; width: 100%; height: clamp(200px, calc(100dvh - 420px), 420px); border: 3px solid var(--ink); border-radius: 22px; overflow: hidden; }
.scene > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene-pal { position: absolute; left: 15%; right: 15%; top: 8%; bottom: 4%; }
.g-opts.wear .g-tile { aspect-ratio: 1; }
/* Copy my dance */
.dance-pal { width: 100%; height: clamp(150px, calc(100dvh - 560px), 320px); }
.dance-pal .pal-all { transform-box: fill-box; transform-origin: 50% 100%; }
.slots { display: flex; justify-content: center; gap: 10px; }
.slot { width: clamp(72px, 22vw, 110px); aspect-ratio: 1; border: 3px dashed #a3bcae; border-radius: 18px; background: #fffdf788; display: grid; place-items: center; padding: 4px; }
.slot > svg { width: 100%; height: 100%; }
.g-opts.moves .g-tile { aspect-ratio: 1; }
/* Where am I hiding? */
.g-opts.places { gap: 10px; }
.g-opts.places .g-tile { aspect-ratio: 120 / 138; padding: 3px; background: #e2f0f7; overflow: hidden; }
.game[data-kind='hide'] { min-height: calc(100dvh - 300px); align-content: center; }
.game[data-kind='hide'] .g-opts.stacked { grid-template-columns: 1fr; width: min(100%, 440px, (100dvh - 250px) * .5); }
.g-opts.places.stacked .g-tile { aspect-ratio: 220 / 138; }
.g-opts.places .g-tile > svg { max-width: none; max-height: none; }
.game[data-kind='hide'] .g-opts { width: min(100%, 640px, (100dvh - 195px) * 2.6); }

/* Wide screens: the drawer sits beside the fruit, like a toy box next to the play mat. */
@media (min-width: 900px) {
  :root { --cell: 120px; }
  .build { grid-template-columns: minmax(0, 1fr) 520px; grid-template-rows: minmax(0, 1fr) auto; column-gap: 28px; align-items: start; max-width: 1200px; margin: 0 auto; width: 100%; }
  .stage { grid-column: 1; grid-row: 1; height: calc(100dvh - 260px); min-height: 360px; }
  .life { grid-column: 1; grid-row: 2; max-width: 560px; justify-self: center; }
  .drawer { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .pager { grid-template-columns: 56px minmax(0, 1fr) 56px; }
  .tab { min-height: 96px; }
  .tab svg { width: 80px; height: 80px; }
  .swatch { min-height: 60px; }
  .fruits { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; width: min(100%, 900px, (100dvh - 220px) * 2.2); }
  .alive-stage { height: calc(100dvh - 330px); }
  /* The pal's mini arcade: the pal large on the left under its bubble, the tiles 4 x 2 squares (the arcade menu's look). */
  .arcade { grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); grid-template-rows: minmax(0, 1fr); gap: 40px; align-items: center; padding: 8px 24px 8px; }
  .pa-stage { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 72%); height: 100%; justify-items: center; align-content: center; gap: 22px; }
  .pa-bubble { justify-self: center; order: -1; }
  .pa-said { font-size: 34px; }
  .pa-bubble::before { left: 50%; top: auto; bottom: -16px; margin: 0 0 0 -12px; border: 12px solid transparent; border-top: 14px solid var(--ink); border-bottom: 0; }
  .pa-bubble::after { left: 50%; top: auto; bottom: -10px; margin: 0 0 0 -8px; border: 8px solid transparent; border-top: 10px solid var(--card); border-bottom: 0; }
  .pa-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: none; gap: 24px 20px; align-content: center; width: min(100%, (100dvh - 200px) * 1.75); justify-self: center; }
  .pa-tile { border-width: 4px; border-radius: 26px; padding: 12px 12px 14px; }
  .pa-tile .pa-pic { aspect-ratio: 1; }
  .pa-word { font-size: 23px; min-height: 2.3em; }
}
/* Phones held sideways: the fruit beside the drawer. */
@media (orientation: landscape) and (max-height: 520px) {
  :root { --cell: 72px; }
  .top { min-height: 52px; padding-top: max(6px, env(safe-area-inset-top)); }
  .build { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); column-gap: 14px; }
  .stage { grid-column: 1; grid-row: 1; height: calc(100dvh - 190px); }
  .life { grid-column: 1; grid-row: 2; }
  .drawer { grid-column: 2; grid-row: 1 / 3; }
  .fruits { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  /* The guided step: the caption, the progress and the pal on the left, the tiles on the right, full height. */
  #play-screen[data-view='guide'] { grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: start; }
  #play-screen[data-view='guide'] .guide:not([hidden]) { display: contents; }
  #play-screen[data-view='guide'] .said { grid-column: 1; grid-row: 1; width: 100%; }
  .guide > *, .guide[data-step] > * { width: 100%; }
  .guide-steps { grid-column: 1; grid-row: 2; }
  .guide-top { grid-column: 1; grid-row: 3; }
  .guide-pal { min-height: 60px; height: max(60px, calc(100dvh - 330px)); }
  .g-colors { grid-column: 1; grid-row: 4; gap: 6px; padding: 0 2px 4px; }
  .g-colors .gsw { aspect-ratio: auto; height: 36px; border-radius: 999px; }
  .gsw-check { width: auto; height: 70%; aspect-ratio: 1; }
  .guide-back { min-height: 64px; }
  .guide-top .none-btn { min-height: 64px; }
  .guide-pager .arrow { min-height: 46px; }
  .guide-pager { grid-column: 1; grid-row: 5; }
  .guide[data-step] .guide-tiles { grid-column: 2; grid-row: 1 / 7; width: max(258px, calc(100dvh - 104px)); gap: 8px; }
  .guide-tiles .g-tile { padding: 3px; }
  /* The games: the picture beside the answers. */
  .game { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; column-gap: 16px; }
  .game .dots { grid-column: 1 / 3; }
  .g-stage { grid-template-columns: 1fr; }
  .feed-pal { height: calc(100dvh - 285px); }
  .bowl { width: min(72%, 200px); }
  .game .g-opts.snacks { width: min(100%, (100dvh - 150px) * 1.4); }
  .dance-pal { height: calc(100dvh - 250px); }
  .slot { width: 70px; }
  .scene { height: calc(100dvh - 190px); }
  .game[data-kind='hide'] { grid-template-columns: 1fr; }
  /* The pal's mini arcade: the pal and its bubble on the left, the tiles 4 x 2 on the right. */
  #play-screen[data-view='arcade'] { min-height: 0; }
  .arcade { grid-template-columns: minmax(0, .7fr) minmax(0, 2fr); grid-template-rows: minmax(0, 1fr); gap: 14px; }
  .pa-stage { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); height: 100%; justify-items: center; gap: 14px; }
  .pa-bubble { justify-self: center; order: -1; padding: 4px 6px 4px 12px; }
  .pa-said { font-size: 20px; }
  .pa-bubble::before { left: 50%; top: auto; bottom: -14px; margin: 0 0 0 -10px; border: 10px solid transparent; border-top: 12px solid var(--ink); border-bottom: 0; }
  .pa-bubble::after { left: 50%; top: auto; bottom: -8px; margin: 0 0 0 -7px; border: 7px solid transparent; border-top: 9px solid var(--card); border-bottom: 0; }
  .pa-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .pa-word { font-size: 17px; }
}

/* 0. The start (Doug, Oct 15, mockup B): "New pal" first, biggest and full width; then up to 4 saved pals in a 2 x 2
   grid (one row of 4 on a computer), favorites first on a soft gold tile with a drawn heart. Fits the window. */
#play-screen[data-view='start'], #play-screen[data-view='name'] { grid-template-rows: minmax(0, 1fr); height: calc(100dvh - var(--top-h, 72px) - 20px - env(safe-area-inset-bottom)); min-height: 440px; }
#play-screen[data-view='start'] > .said, #play-screen[data-view='name'] > .said { display: none; }
.said-own { display: inline-flex; align-items: center; justify-content: center; gap: 8px; justify-self: center; padding-right: 6px; }
.said-again { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 7px; border-radius: 50%; background: var(--bg); border: 2px solid var(--ink); }
.said-again svg { width: 100%; height: 100%; }
.start { display: grid; grid-template-rows: auto minmax(0, 1fr) minmax(0, 2fr); gap: 12px; min-height: 0; width: min(100%, 1120px); margin: 0 auto; }
.np {
  display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; align-items: center; min-height: 0; width: 100%;
  border: 4px solid var(--ink); border-radius: 26px; background: var(--card); box-shadow: 0 6px 0 var(--ink); padding: 8px 10px 10px; overflow: hidden;
}
.np:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--ink); }
.np-pic { width: 100%; height: 100%; min-height: 0; display: grid; place-items: center; }
.np-art { position: relative; height: 100%; max-width: 100%; aspect-ratio: 300 / 220; }
.np-fruit, .np-deco { position: absolute; inset: 0; width: 100%; height: 100%; }
.np-fruit svg { width: 100%; height: 100%; }
.np-word { font-weight: 700; font-size: 20px; line-height: 1.1; }
.sp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 12px; min-height: 0; }
.sp-grid[data-n='1'], .sp-grid[data-n='2'] { grid-template-rows: minmax(0, 1fr); }
.sp {
  position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; align-items: center; min-width: 0; min-height: 0;
  border: 3px solid var(--ink); border-radius: 20px; background: var(--card); box-shadow: 0 5px 0 #3b2a1a55; padding: 6px;
}
.sp:active { transform: translateY(3px); box-shadow: 0 2px 0 #3b2a1a55; }
.sp.fav { background: #fbe8b4; border-color: #8a5a12; }
.sp-pic { width: 100%; height: 100%; min-height: 0; display: grid; place-items: center; }
.sp-pic svg { width: 100%; height: 100%; }
.sp-name { font-weight: 700; font-size: 18px; line-height: 1.15; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-name:empty { display: none; }
.sp-heart { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; }
.sp-heart svg { width: 100%; height: 100%; }

/* 1b. The 8 colors on each build step: one row of round swatches; the picked one sits a little higher, with a check. */
.g-colors { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 7px; padding: 2px 2px 6px; }
.gsw { position: relative; display: grid; place-items: center; aspect-ratio: 1; min-width: 0; min-height: 0; padding: 0; border: 3px solid var(--ink); border-radius: 50%; background: var(--c); box-shadow: 0 3px 0 #3b2a1a55; transition: transform .4s ease-in-out; }
.gsw-check { display: none; width: 62%; height: 62%; }
.gsw-check svg { width: 100%; height: 100%; }
.gsw[aria-pressed='true'] { transform: translateY(-2px) scale(1.12); box-shadow: 0 5px 0 var(--ink); }
.gsw[aria-pressed='true'] .gsw-check { display: block; }
.guide.moving .gsw { cursor: default; }

/* 3a. Name me (option 2): the tag hangs on the pal, Play beside it, six name tiles 2 across. */
.name-me { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 10px; justify-items: center; min-height: 0; width: min(100%, 1180px); margin: 0 auto; }
.nm-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; height: 100%; min-height: 0; }
.nm-pal { position: relative; height: 100%; min-height: 0; display: grid; place-items: center; }
.nm-pal > svg { width: 100%; height: 100%; overflow: visible; }
.nm-tag { position: absolute; left: 50%; bottom: 6%; width: min(62%, 170px); aspect-ratio: 200 / 76; transform: translateX(-46%) rotate(-5deg); }
.tag-svg { display: block; width: 100%; height: 100%; }
.nm-play { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: var(--green); color: #fff; border: 3px solid var(--green-d); box-shadow: 0 6px 0 var(--green-d); padding: 0 0 0 8px; flex: none; }
.nm-play:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--green-d); }
.nm-play svg { width: 52px; height: 52px; }
.nm-names { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; }
.nm {
  display: grid; grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; gap: 12px; min-width: 0; min-height: 72px;
  padding: 6px 10px; border: 3px solid var(--ink); border-radius: 18px; background: var(--card); box-shadow: 0 5px 0 #3b2a1a55; font-weight: 700; font-size: 24px; line-height: 1.1;
}
.nm:active { transform: translateY(3px); box-shadow: 0 2px 0 #3b2a1a55; }
.nm b { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; color: #fff; font-size: 34px; line-height: 1; border: 3px solid var(--ink); }
.nm-add { width: 100%; text-align: left; }
.nm-add summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; gap: 6px; font-size: 16px; list-style: none; }
.nm-add summary::-webkit-details-marker { display: none; }
.nm-add summary::before { content: ''; border: 6px solid transparent; border-left: 9px solid currentColor; border-right: 0; }
.nm-add[open] summary::before { border: 6px solid transparent; border-top: 9px solid currentColor; border-bottom: 0; }
.nm-form label { display: block; font-size: 16px; margin-bottom: 4px; }
.nm-form small { font-size: 14px; color: var(--soft); }
.nm-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.nm-row input { min-height: 52px; border: 3px solid var(--ink); border-radius: 14px; padding: 0 12px; font: 500 18px 'Fredoka', system-ui, sans-serif; min-width: 0; background: #fff; color: var(--ink); }
.nm-ok { min-height: 52px; padding: 0 18px; border: 3px solid var(--ink); border-radius: 16px; background: var(--green); color: #fff; font-size: 20px; font-weight: 700; }
/* A named pal wears its tag on its mini arcade too. */
.pa-pal { position: relative; }
.pa-tag { position: absolute; left: 50%; bottom: 2%; width: min(56%, 150px); aspect-ratio: 200 / 76; transform: translateX(-46%) rotate(-5deg); pointer-events: none; }

/* For grown-ups: the saved pals. */
.sv-box { display: grid; gap: 8px; margin: 10px 0 6px; }
.sv-head { font-size: 20px; }
.grownups .sv-note { margin: 0; font-size: 15px; color: var(--soft); }
.sv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sv { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 8px; border: 2px solid var(--ink); border-radius: 14px; background: #fffdf7; }
.sv-pic { width: 56px; height: 56px; }
.sv-pic svg { width: 100%; height: 100%; }
.sv-text { display: grid; line-height: 1.2; min-width: 0; overflow-wrap: anywhere; }
.sv-text small { font-size: 14px; color: var(--soft); }
.chip { min-height: 44px; padding: 4px 14px; border: 2px solid var(--ink); border-radius: 999px; background: #fffdf7; font-size: 16px; font-weight: 600; }
.chip.del { border-color: #a3402f; color: #a3402f; }
.sv-ask { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; font-weight: 600; }
.sv-ask > span { flex: 1 1 100%; }

@media (min-width: 900px) {
  .start { grid-template-rows: auto minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px; padding: 0 16px; }
  .np { border-radius: 30px; }
  .np-word { font-size: 24px; }
  .sp-grid, .sp-grid[data-n='1'], .sp-grid[data-n='2'] { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); gap: 20px; }
  .sp-name { font-size: 22px; }
  .sp-heart { width: 32px; height: 32px; top: 8px; right: 8px; }
  .g-colors { gap: 10px; }
  .name-me { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: 48px; align-items: center; padding: 0 24px; }
  .name-me > .said { grid-column: 1 / -1; }
  .nm-hero { grid-column: 1; grid-row: 2 / 4; grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; }
  .nm-pal { width: 100%; }
  .nm-tag { width: 220px; }
  .nm-names { grid-column: 2; grid-row: 2; gap: 16px; align-self: end; }
  .nm { min-height: 96px; font-size: 30px; }
  .nm b { width: 68px; height: 68px; font-size: 44px; }
  .nm-add { grid-column: 2; grid-row: 3; align-self: start; }
}
/* Phones held sideways: New pal beside the 4 saved pals; Name me's pal and Play on the left, the names on the right. */
@media (orientation: landscape) and (max-height: 520px) {
  #play-screen[data-view='start'], #play-screen[data-view='name'] { min-height: 0; }
  .start { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); grid-template-rows: auto minmax(0, 1fr); gap: 10px 14px; }
  .start > .said { grid-column: 1 / -1; }
  .sp-grid, .sp-grid[data-n='1'], .sp-grid[data-n='2'] { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); gap: 10px; }
  .sp-name { font-size: 16px; }
  .name-me { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: 16px; row-gap: 6px; align-items: center; }
  .name-me > .said { grid-column: 1 / -1; }
  .nm-hero { grid-column: 1; grid-row: 2 / 4; }
  .nm-play { width: 76px; height: 76px; }
  .nm-play svg { width: 42px; height: 42px; }
  .nm-names { grid-column: 2; grid-row: 2; gap: 8px; }
  .nm { min-height: 56px; font-size: 20px; padding: 4px 8px; gap: 8px; }
  .nm b { width: 40px; height: 40px; font-size: 26px; }
  .nm-add { grid-column: 2; grid-row: 3; }
  .nm-add summary { min-height: 36px; }
  .name-me.typing .nm-names { display: none; }
  .name-me.typing .nm-add { grid-row: 2 / 4; align-self: center; }
}

/* Sticker pieces (Doug, Oct 30: "1 with the storybook backgrounds"): a thin dark edge round each picture, like the home
   tiles, so it stands out on the storybook background. */
.fruit-btn svg, .pal-box svg, .alive-box svg, .quiz-pal svg, .done-pal svg { filter: var(--sticker); }