/* Mail Truck: its own look (a soft green neighborhood, gray roads, a wooden toy bin, Posty the mailbox), with Spell's
   letter tiles for first sounds. 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 or flashes. */
@font-face {
  font-family: 'ABeeZee';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../spell/abeezee.woff2) format('woff2');
}

:root {
  --bg: #eaf4f0;
  --bg-2: #dcece4;
  --grass: #b9dba0;
  --grass-2: #a9cf8f;
  --road: #9aa3ab;
  --road-line: #f4f1e4;
  --card: #fffdf7;
  --ink: #3b2a1a;
  --soft: #6d6250;
  --blue: #3f7fc4;
  --blue-d: #1f5fa8;
  --green: #3fa34d;
  --green-d: #2a7a36;
  --sun: #f4c55a;
  --wood: #d9a066;
  --wood-d: #a8713a;
  /* Blocks and answers: at least 2 cm (76 CSS px) on every phone (rule 12), bigger where there's room. */
  --block: clamp(76px, 20vw, 100px);
  --radius: 20px;
  color-scheme: light;
}
/* Evening: dimmer and warmer (rule 4). */
body.evening {
  --bg: #e6dcc8;
  --bg-2: #dacdb4;
  --card: #f6eedc;
  --grass: #b3c98e;
  --grass-2: #a3bb80;
}
body.evening main, body.evening .top { filter: brightness(.9); }

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100dvh;
  background: radial-gradient(circle at 12% 8%, #f5faf7 0 15%, transparent 16%), radial-gradient(circle at 92% 30%, var(--bg-2) 0 12%, transparent 13%), var(--bg);
  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); }

/* 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; }
.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(28px + env(safe-area-inset-bottom)); }
.screen { display: grid; gap: 18px; }

/* letter tiles, like Spell's (first-sound answers) */
.tile {
  display: grid; place-items: center; width: var(--block); height: var(--block); border-radius: 16px; color: #fff;
  font: 400 calc(var(--block) * .6)/1 'ABeeZee', 'Comic Sans MS', sans-serif; padding-bottom: calc(var(--block) * .06);
  background: var(--blue); box-shadow: inset 0 -6px 0 var(--blue-d), 0 4px 0 #0002; border: 0; position: relative;
}

/* 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); }
.demo { display: flex; justify-content: center; align-items: flex-end; gap: 14px; margin-top: 6px; }
.demo-truck { width: 88px; height: auto; }
.demo-house { width: 82px; }
.demo-posty { width: 76px; }
.demo svg, .brand svg { display: block; width: 100%; height: auto; }

.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.plain { background: var(--card); font-size: 24px; min-height: 64px; }

.pick { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 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; }
.pick button:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.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: 10px; }
.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); }

/* The letter to take, and what the voice said. */
.drive { display: grid; gap: 10px; justify-items: center; }
.ask { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; }
.mail-card { width: 84px; min-height: 64px; padding: 4px; border: 0; background: none; flex: none; }
.mail-card svg { display: block; width: 100%; height: auto; }
.said { margin: 0; min-height: 30px; font-size: clamp(18px, 5vw, 22px); font-weight: 700; color: var(--green-d); }

/* The crossroads: houses at the ends of the roads, shape outlines beside the truck, the truck in the middle. */
.map {
  --mw: min(100%, 520px, (100dvh - 330px) * 5.9 / 5.15);
  position: relative; width: var(--mw); display: grid;
  grid-template-columns: 1.45fr 1fr 1fr 1fr 1.45fr; grid-template-rows: 1.45fr 1fr 1fr 1fr .7fr; aspect-ratio: 5.9 / 5.15;
  background: radial-gradient(circle at 20% 80%, var(--grass-2) 0 8%, transparent 9%), radial-gradient(circle at 85% 15%, var(--grass-2) 0 7%, transparent 8%), var(--grass);
  border: 4px solid var(--ink); border-radius: 26px; box-shadow: 0 6px 0 #3b2a1a33; touch-action: none;
}
.map.four { --mw: min(100%, 520px, (100dvh - 315px) * 5.9 / 6.9); grid-template-rows: 1.45fr 1fr 1fr 1fr 1.45fr; aspect-ratio: 5.9 / 6.9; }
.road { position: absolute; background: var(--road); }
/* Road widths and places in the grid's own units: 5.9 across (1.45 + 1 + 1 + 1 + 1.45), 5.15 or 6.9 down. */
.road.v { left: 42.9%; width: 14.2%; top: 8%; bottom: 0; border-radius: 12px 12px 0 22px; }
.road.h { top: 49.1%; height: 16.3%; left: 8%; right: 8%; border-radius: 12px; }
.map.four .road.h { top: 36.7%; height: 12.2%; }
.map.four .road.v { bottom: 8%; border-radius: 12px; }
.road.v::after, .road.h::after { content: ''; position: absolute; border: 0 dashed var(--road-line); }
.road.v::after { left: calc(50% - 2px); top: 4%; bottom: 4%; border-left-width: 4px; }
.road.h::after { top: calc(50% - 2px); left: 3%; right: 3%; border-top-width: 4px; }

.house { position: relative; display: grid; place-items: center; padding: 2px; z-index: 1; }
.house svg { display: block; width: 100%; height: auto; max-height: 100%; }
.house.d-forward { grid-area: 1 / 3; }
.house.d-left { grid-area: 3 / 1; }
.house.d-right { grid-area: 3 / 5; }
.house.d-back { grid-area: 5 / 3; }
.house.d-forward, .house.d-back { width: 145%; justify-self: center; }
/* The ring for the house reached: still and soft, never flashing. A hint dims the screen around it instead (spotlight.js). */
.house::before { content: ''; position: absolute; inset: 0; border-radius: 16px; box-shadow: 0 0 0 0 transparent; transition: box-shadow .6s ease-in-out; }
.house.here::before { box-shadow: 0 0 0 5px var(--sun); }

.spot {
  position: relative; z-index: 2; display: grid; place-items: center; margin: 0; padding: 2px; border: 0; background: none;
  border-radius: 14px; transition: box-shadow .6s ease-in-out;
}
/* A bigger tap area than the drawing, for small fingers (rule 12). */
.spot::before { content: ''; position: absolute; inset: -10px; }
.spot svg { display: block; width: 100%; height: 100%; overflow: visible; transform: scale(1.18); }
.spot.d-forward { grid-area: 2 / 3; }
.spot.d-left { grid-area: 3 / 2; }
.spot.d-right { grid-area: 3 / 4; }
.spot.d-back { grid-area: 4 / 3; }

.truck { grid-area: 3 / 3; z-index: 3; display: grid; place-items: center; pointer-events: none; }
.truck svg { display: block; height: 100%; width: auto; }

/* The toy bin: a wooden box of shape blocks. */
.bin-wrap { width: min(100%, 520px); }
.bin {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; padding: 6px 4px 10px;
  border: 4px solid var(--ink); border-radius: 18px 18px 26px 26px;
  background: repeating-linear-gradient(90deg, #0000 0 26px, #ffffff14 26px 28px, #0000 28px 60px, #0000000f 60px 62px), linear-gradient(#e9b97f, var(--wood));
  box-shadow: inset 0 4px 0 #fff6, inset 0 -8px 0 var(--wood-d), 0 6px 0 #6b4a2a55;
}
.bin.n4 { gap: 2px; padding-inline: 2px; }
.block { width: var(--block); height: var(--block); padding: 6px; border: 0; background: none; touch-action: none; position: relative; cursor: grab; border-radius: 16px; transition: opacity .5s ease-in-out, box-shadow .5s ease-in-out; }
.block svg { display: block; width: 100%; height: 100%; }
.block.picked { box-shadow: 0 0 0 5px var(--sun); background: #fff8; }
.block.dragging { z-index: 20; cursor: grabbing; }
.block.used { opacity: 0; pointer-events: none; }

/* The short walk: the truck parked at the bottom, footsteps up the path, Posty and the house at the top. */
.walk { display: grid; gap: 10px; justify-items: center; }
.path {
  position: relative; width: min(100%, 520px, (100dvh - 200px) * .85); aspect-ratio: 1 / 1.05;
  background: radial-gradient(circle at 18% 30%, var(--grass-2) 0 8%, transparent 9%), radial-gradient(circle at 88% 82%, var(--grass-2) 0 7%, transparent 8%), var(--grass);
  border: 4px solid var(--ink); border-radius: 26px; box-shadow: 0 6px 0 #3b2a1a33; overflow: hidden;
}
.path .lane { position: absolute; left: 18%; right: 22%; top: 28%; bottom: 0; background: #e8d6b4; clip-path: polygon(20% 100%, 50% 100%, 100% 0, 72% 0); }
.path .p-house { position: absolute; left: 4%; top: 3%; width: 36%; }
.path .p-posty { position: absolute; left: 60%; top: 2%; width: 26%; }
.path .p-truck { position: absolute; left: 5%; top: 60%; width: 15%; }
.path svg { display: block; width: 100%; height: auto; }
.step-btn {
  position: absolute; width: 19%; aspect-ratio: 1; transform: translate(-50%, -50%); padding: 4px; border: 0; border-radius: 50%;
  background: #ffffff33; transition: box-shadow .6s ease-in-out, opacity .6s ease-in-out; z-index: 2;
}
/* A bigger tap area than the drawing, for small fingers (rule 12). */
.step-btn::before { content: ''; position: absolute; inset: -12px; border-radius: 50%; }
.step-btn.later { opacity: .5; }
.step-btn.next { background: #fff9; box-shadow: 0 0 0 4px var(--ink); }
.step-btn.walked { opacity: .35; }
.carrier {
  position: absolute; width: 18%; transform: translate(-50%, -88%); z-index: 3; pointer-events: none;
  transition: left .6s ease-in-out, top .6s ease-in-out;
}
.carrier.still { transition: none; }

/* At the house: Posty, the question, three big answers. */
.visit { display: grid; gap: 12px; justify-items: center; }
.posty-stage { position: relative; width: min(72vw, 300px, (100dvh - 380px) * .9); }
.posty-box { width: 100%; }
.mail-in { position: absolute; left: -18%; top: 6%; width: 34%; z-index: 4; }
.mail-in svg { display: block; width: 100%; height: auto; }
.mail-in.used { visibility: hidden; }

.question { min-height: 0; display: grid; justify-items: center; }
.question .pic { width: 96px; height: 96px; }
.pile { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.env { position: relative; width: 62px; display: grid; justify-items: center; }
.env svg { display: block; width: 100%; height: auto; }
.env .n { visibility: hidden; font-size: 22px; line-height: 1.1; }
.question.counted .env .n { visibility: visible; }

.opts { display: flex; justify-content: center; gap: clamp(12px, 5vw, 26px); flex-wrap: wrap; }
.opt { min-width: 84px; min-height: 84px; border: 3px solid var(--ink); border-radius: 18px; background: var(--card); box-shadow: 0 4px 0 var(--ink); transition: box-shadow .6s ease-in-out; }
.opt:active { transform: translateY(3px); }
.opt.shape { width: var(--block); height: var(--block); padding: 8px; }
.opt.shape svg { display: block; width: 100%; height: 100%; }
.opt.num { width: var(--block); height: var(--block); display: grid; place-items: center; align-content: center; gap: 2px; }
.opt.num b { font-size: calc(var(--block) * .5); line-height: 1; }
.opt.num .dots { display: flex; gap: 3px; }
.opt.num .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.opt.tile { border: 3px solid var(--ink); background: var(--blue); color: #fff; box-shadow: inset 0 -6px 0 var(--blue-d), 0 4px 0 var(--ink); }
.opt.right { outline: 4px solid var(--green); outline-offset: 2px; }

/* finish */
#finish { text-align: center; padding-top: 10px; }
.cheer { font-size: clamp(32px, 9vw, 46px); }
.sent { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; animation: arrive .6s ease-in-out both; }
.sent-house { width: clamp(70px, 20vw, 110px); }
.sent-house svg { display: block; width: 100%; height: auto; }
@keyframes arrive { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
.talk { margin: 0; background: #f4fbf6; border: 2px dashed var(--green-d); border-radius: 16px; padding: 12px 14px; text-align: left; font-size: 18px; }

/* Wide screens: the bin sits beside the street, like a toy box next to the play mat. */
@media (min-width: 900px) {
  .drive { grid-template-columns: auto auto; justify-content: center; align-items: center; column-gap: 28px; }
  .ask { grid-column: 1 / -1; }
  .map { --mw: min(620px, (100dvh - 250px) * 5.9 / 5.15); }
  .map.four { --mw: min(620px, (100dvh - 250px) * 5.9 / 6.9); }
  .bin-wrap { width: calc(var(--block) * 2 + 40px); }
  .visit { grid-template-columns: auto auto; justify-content: center; align-items: center; column-gap: 40px; }
  .posty-stage { grid-row: 1 / 3; width: min(420px, (100dvh - 200px) * .9); }
}
/* Phones held sideways: everything in a row. */
@media (orientation: landscape) and (max-height: 520px) {
  :root { --block: 80px; }
  .top { min-height: 52px; padding-top: max(6px, env(safe-area-inset-top)); }
  .drive { grid-template-columns: auto auto; align-items: center; column-gap: 20px; justify-content: center; }
  .ask { grid-column: 1 / -1; }
  .map { --mw: min(60vw, (100dvh - 150px) * 5.9 / 5.15); }
  .map.four { --mw: min(60vw, (100dvh - 150px) * 5.9 / 6.9); }
  .bin-wrap { width: calc(var(--block) * 2 + 40px); }
  .visit { grid-template-columns: auto auto; align-items: center; column-gap: 24px; justify-content: center; }
  .posty-stage { grid-row: 1 / 3; width: min(36vw, (100dvh - 120px) * .9); }
}