/* Helps for every child (dyslexia reading, read aloud, bigger buttons, more time, less motion, quiet, contrast, captions). */
@import url(helps.css?v=8081b68f25);
/* Shared by every kids game: the child lock, its grown-up check, no selectable text, calm motion only.
   Each game keeps its own look in its own style.css. Rules: docs/22-kids-games.md in RightPlace. */
@font-face {
  font-family: 'Fredoka';
  font-weight: 300 700;
  font-display: swap;
  src: url(fredoka.woff2) format('woff2');
}

/* No game text selects or highlights, taps don't flash, pictures don't drag. */
html, body, body * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
input, textarea { -webkit-user-select: text; user-select: text; }
img, svg, a { -webkit-user-drag: none; }
[hidden] { display: none !important; }

/* Child lock: locked hides every way out the game marks. */
body.locked [data-unlocked-only] { display: none !important; }
/* Links to the own site's pages for grown-ups hide inside RightPlace's frame (kit.js adds html.framed). */
.framed [data-own-site] { display: none !important; }
/* In the Android and iPhone apps (kit.js adds html.app-mode, ADR-040) nothing sends a child elsewhere: Learning Videos
   (YouTube's own links), the share box, the adult arcade, outside badges. */
html.app-mode [data-no-app] { display: none !important; }
/* Locked or not, plain at a glance in every game (Doug, Oct 15): locked is a navy button with "Locked", unlocked a
   yellow one with "Unlocked". Still colors, no flashing (rule 1). */
.lock-btn { position: relative; touch-action: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; }
.lock-btn[aria-pressed='true'] { background: #2c2a4a; color: #fff; border-color: #fff; box-shadow: 0 4px 0 #0008; }
.lock-btn[aria-pressed='false'] { background: #f6c744; color: #3b2a1a; }
.lock-word { font: 700 18px/1 'Fredoka', system-ui, sans-serif; }
@media (min-width: 700px) { .lock-word { font-size: 22px; } .lock-btn { padding: 6px 16px; } }
@media (max-width: 420px) {
  .top:has(.lock-btn) { gap: 6px; padding-left: 10px; padding-right: 10px; }
  .lock-word { font-size: 14px; }
  .lock-btn { padding: 4px 6px; gap: 4px; }
  .lock-btn svg { width: 22px; height: 22px; }
}
/* The big X on the lock's boxes (kit.js CLOSE_X): a child who tapped the lock by mistake taps it, or anywhere off the
   card, to get back to the game. It rolls in once. */
.kid-dialog .kid-x {
  position: fixed; top: max(14px, env(safe-area-inset-top)); right: 14px; width: 84px; height: 84px; min-height: 0; padding: 10px;
  border: 4px solid #fff; border-radius: 50%; background: #f0806a; box-shadow: 0 5px 0 #3b2a1a66; display: grid; place-items: center;
  animation: kid-x-in .7s ease-in-out both;
}
.kid-dialog .kid-x svg { width: 100%; height: 100%; }
/* While a pop-up with the big X is open, the lock button under it hides, so only the X shows in that corner (Doug, Oct 15). */
body:has(.kid-dialog .kid-x) .lock-btn { visibility: hidden; }
@keyframes kid-x-in { from { opacity: 0; transform: scale(.4) rotate(-180deg); } to { opacity: 1; transform: none; } }
/* Full screen button (fullscreen.js): shows locked or not, but once locked and full screen it hides, so it can't leave. */
body.locked .fullscreen-btn[aria-pressed='true'] { display: none; }
/* Locked: no pull-to-refresh and no scroll chaining into the browser, in every game (Doug, Oct 15; fullscreen.js). */
html:has(body.locked), body.locked { overscroll-behavior: none; }

.kid-dialog { position: fixed; inset: 0; z-index: 60; background: #2b201699; display: grid; place-items: center; padding: 16px; }
.kid-dialog .kid-card {
  width: min(440px, 100%); max-height: calc(100dvh - 32px); overflow: auto; background: #fffdf7; color: #3b2a1a;
  border: 3px solid #3b2a1a; border-radius: 22px; padding: 22px; display: grid; gap: 12px; font: 500 18px/1.4 'Fredoka', system-ui, sans-serif;
}
.kid-dialog h2 { margin: 0; font-size: 26px; }
.kid-dialog p, .kid-dialog ol { margin: 0; }
.kid-dialog ol { padding-left: 22px; display: grid; gap: 6px; }
.kid-dialog button { min-height: 56px; border: 3px solid #3b2a1a; border-radius: 16px; background: #fffdf7; font: 700 20px 'Fredoka', sans-serif; color: #3b2a1a; cursor: pointer; }
.kid-dialog .ok { background: #3fa34d; color: #fff; }
.sum-opts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sum-opts button { font-size: 26px; }

/* Made for children who can't read yet (Doug, Oct 8; kit.js). The house: always in the top bar's first corner, even
   under the Child lock, big and bright so a child knows it means "back to the games". */
.home-btn {
  display: inline-grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 20px; text-decoration: none;
  background: #f6c744; color: #3b2a1a; border: 3px solid #3b2a1a; box-shadow: 0 4px 0 #3b2a1a;
}
.home-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #3b2a1a; }
.home-btn svg { width: 44px; height: 44px; }
/* On a phone the house takes the brand's place, so the top bar fits in one row at 360 px. */
@media (max-width: 600px) { .top:has(.home-btn) .brand { display: none; } }
/* Narrow phones: a smaller house so the top bar fits at 360 px. No gear (Doug, Oct 15), so the Back arrow stays for
   grown-ups to reach the levels. */
@media (max-width: 420px) { .home-btn { width: 56px; height: 56px; } }
/* The unlock pictures: three steps in one row, each a picture with two or three words under it. */
.unlock-help .kid-card { width: min(560px, 100%); }
.uh-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.uh-steps figure { margin: 0; display: grid; justify-items: center; gap: 4px; text-align: center; font-size: 15px; line-height: 1.2; font-weight: 600; }
.uh-steps svg { width: 100%; max-width: 120px; height: auto; }
.uh-more { font-size: 16px; }
.kid-dialog .uh-how { font-size: 16px; line-height: 1.35; }
.unlock-help .ok { display: grid; place-items: center; min-height: 72px; font-size: 0; }
/* Started from the arcade menu: one big Play button over the page (its tap goes full screen, locks and starts). */
.start-cover { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: #fff8eaf2; padding: 16px; }
.start-go:focus { outline: none; }
.start-go:focus-visible .start-tri { outline: 4px solid #3b2a1a; outline-offset: 4px; }
.start-go { display: grid; justify-items: center; gap: 18px; border: 0; background: none; cursor: pointer; padding: 0; }
.start-go img { width: 120px; height: 120px; }
.start-tri {
  display: grid; place-items: center; width: min(200px, 52vw); height: min(200px, 52vw); border-radius: 50%; color: #fff;
  background: #3fa34d; border: 4px solid #2a7a36; box-shadow: 0 8px 0 #2a7a36; padding-left: 12px;
}
.start-tri svg { width: 55%; height: 55%; }
/* A word of praise: a heart and the word fade in once, then away (0.6 s each), only where they cover no game piece
   (helps.js placeClear: a clear band near the top, or not shown at all; the word is still said and captioned). */
.kid-cheer {
  position: fixed; left: 50%; top: 14%; z-index: 55; display: grid; justify-items: center; gap: 4px; pointer-events: none;
  opacity: 0; transform: translateX(-50%); transition: opacity .6s ease-in-out;
}
.kid-cheer.in { opacity: 1; }
.kid-cheer svg { width: 110px; height: auto; }
/* The "show me how" hand (kit.showHow, rule 22): fades in, presses once, glides once, fades out. Never takes a tap. */
.kid-hand { position: fixed; left: 0; top: 0; z-index: 60; width: 64px; pointer-events: none; opacity: 0; transition: opacity .4s ease-in-out; filter: drop-shadow(0 4px 0 #3b2a1a33); }
.kid-hand svg { display: block; width: 100%; height: auto; transition: transform .4s ease-in-out; transform-origin: 30% 10%; }
.kid-hand.in { opacity: 1; }
.kid-hand.press svg { transform: scale(.86); }
.kid-hand.glide { transition: opacity .4s ease-in-out, transform .8s ease-in-out; }
.kid-cheer b { font: 700 34px/1.1 'Fredoka', system-ui, sans-serif; color: #3b2a1a; background: #fffdf7; border: 3px solid #3b2a1a; border-radius: 18px; padding: 6px 16px; white-space: nowrap; }
.log-link a { font-weight: 600; }
/* Posty asks the child's name (kit.askName): Posty, a big letter tile per child, and a big Play that skips. */
.name-ask .kid-card { justify-items: center; text-align: center; }
.na-posty { width: 120px; }
.na-kids { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; width: 100%; }
.na-kids:empty { display: none; }
.kid-dialog .na-kid { display: grid; justify-items: center; gap: 4px; min-height: 120px; padding: 10px 6px; }
.na-kid b { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 14px; color: #fff; font: 700 40px/1 'Fredoka', system-ui, sans-serif; }
.na-kid span { font-size: 20px; }
.kid-dialog .na-play { display: grid; place-items: center; width: 120px; height: 120px; border-radius: 50%; background: #3fa34d; color: #fff; border-color: #2a7a36; box-shadow: 0 6px 0 #2a7a36; padding-left: 8px; }
.na-add { width: 100%; text-align: left; }
.na-add summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; font-size: 16px; }
.na-form label { display: block; font-size: 16px; margin-bottom: 4px; }
.na-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.na-row input { min-height: 52px; border: 3px solid #3b2a1a; border-radius: 14px; padding: 0 12px; font: 500 18px 'Fredoka', system-ui, sans-serif; min-width: 0; }
.na-row .ok { padding: 0 18px; }
/* Posty's other questions (kit.askPosty): six big pictures in two equal rows of three, and the same big Play to skip. */
.pq-picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; }
.kid-dialog .pq-pick { display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 104px; padding: 8px 4px; }
.pq-pick img { width: 64px; height: 64px; }
.pq-pick span { font-size: 17px; }
.pq-swatch { display: block; width: 68px; height: 68px; border-radius: 50%; border: 3px solid #3b2a1a; }
/* A Next button kit.autoNext presses by itself: never shown. */
.kid-auto { display: none !important; }
@media (prefers-reduced-motion: reduce) { .kid-cheer { transition: none; } }
/* Their animal while it cheers (kit.showCheerAnimal): moved by the kit, once; never takes a tap; under the pin pad. */
.kid-animal { position: fixed; left: 0; bottom: 14px; z-index: 50; width: 96px; height: 96px; pointer-events: none; opacity: 0; filter: drop-shadow(0 5px 0 #3b2a1a26); }
.kid-animal img { display: block; width: 100%; height: 100%; }
.kid-animal.small { width: 64px; height: 64px; }

/* The voice picker (voice-picker.js) inside each "For grown-ups" box, and the My voice recorder (my-voice.js). */
.vp { margin-top: 12px; display: grid; gap: 8px; font-family: 'Fredoka', system-ui, sans-serif; }
.vp p { margin: 0; }
.vp-title span { font-size: 15px; color: #6b5a48; }
.vp-list { display: grid; gap: 8px; }
.vp-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.vp button { min-height: 48px; border: 3px solid #3b2a1a; border-radius: 14px; background: #fffdf7; color: #3b2a1a; font: 700 18px 'Fredoka', sans-serif; cursor: pointer; padding: 4px 12px; }
.vp-pick { display: grid; justify-items: start; text-align: left; }
.vp-pick small { font-size: 14px; font-weight: 500; color: #6b5a48; }
.vp [aria-checked='true'] { background: #dff3e1; border-color: #2b7a37; outline: 3px solid #3fa34d; outline-offset: 1px; }
.vp-hear { font-size: 16px !important; }
.vp-mine { display: grid; gap: 8px; padding: 10px 12px; border: 2px dashed #3b2a1a66; border-radius: 14px; }
.vp-fill { display: flex; flex-wrap: wrap; gap: 8px; }
.vp-rec { background: #3fa34d !important; color: #fff !important; }
.vp-now { font-size: 15px; font-weight: 600; color: #2b7a37; }
.vp-private, .mv-private { font-size: 15px; color: #2b7a37; font-weight: 600; }
.mv .kid-card { width: min(520px, 100%); }
.mv-head { display: flex; align-items: center; gap: 10px; }
.kid-dialog .mv-back { width: 44px; height: 44px; min-height: 44px; padding: 0; display: grid; place-items: center; flex: none; }
.mv-check { display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: start; font-size: 17px; cursor: pointer; }
.mv-check input { width: 28px; height: 28px; margin: 2px 0 0; accent-color: #3fa34d; }
.kid-dialog button:disabled { opacity: 0.45; cursor: default; }
.mv-count { font-weight: 700; }
.mv-now { border: 3px solid #3b2a1a; border-radius: 18px; padding: 14px; display: grid; gap: 6px; text-align: center; background: #fff8e8; }
.mv-now.on { background: #fde7b0; }
.mv-hint { font-size: 16px; color: #6b5a48; }
.mv-say { font-size: 32px; font-weight: 700; }
.mv-status { font-size: 16px; min-height: 1.4em; }
.mv-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kid-dialog .mv-btns button { font-size: 18px; padding: 0 6px; }
.mv-tip { font-size: 15px; color: #6b5a48; }
.mv-list { list-style: none; padding: 0 !important; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px !important; }
.kid-dialog .mv-list button { width: 100%; min-height: 48px; font-size: 17px; display: grid; grid-template-columns: 20px 1fr; text-align: left; padding: 4px 8px; border-width: 2px; }
.mv-list small { grid-column: 2; font-size: 12px; font-weight: 500; color: #6b5a48; }
.mv-list [aria-current='true'] { background: #dff3e1; border-color: #2b7a37; }
.mv-mark { color: #2b7a37; }
.mv-delete { font-size: 16px !important; color: #8a3b12 !important; }
/* What to record (Look A, Oct 26): the storybooks or the letters and cheers, two equal cards. */
.mv-ask { font-weight: 700; font-size: 19px; }
.mv-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kid-dialog .mv-mode { display: grid; align-content: start; justify-items: start; gap: 4px; text-align: left; padding: 12px; min-height: 140px; }
.mv-mode b { font-size: 19px; }
.mv-mode small { font-size: 14px; font-weight: 500; color: #6b5a48; }
.mv-mode .mv-done-count { color: #2b7a37; font-weight: 700; }
@media (max-width: 420px) { .mv-modes { grid-template-columns: minmax(0, 1fr); } .kid-dialog .mv-mode { min-height: 0; } }
.mv-stories { list-style: none; padding: 0 !important; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px !important; }
.kid-dialog .mv-stories button { width: 100%; min-height: 56px; display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; text-align: left; padding: 6px 10px; border-width: 2px; }
.mv-stories b { display: block; font-size: 17px; }
.mv-stories small { font-size: 13px; font-weight: 500; color: #6b5a48; }
.mv-state { font-size: 14px; color: #6b5a48; }
.mv-state.done { color: #2b7a37; }
.kid-dialog .mv-rec.stop { background: #c4492f; border-color: #3b2a1a; color: #fff; }
.mv-page { font-size: 21px; line-height: 1.45; font-weight: 600; text-align: left; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* "Your voice" note (kit.js voiceTip): shown when a grown-up turns the sound off. Fades in once, no motion. */
.voice-tip { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 55;
  width: min(560px, calc(100vw - 32px)); background: #fffdf7; color: #3b2a1a; border: 3px solid #3b2a1a; border-radius: 20px;
  box-shadow: 0 6px 0 #3b2a1a; padding: 12px 16px; display: grid; gap: 10px; font: 500 17px/1.35 'Fredoka', system-ui, sans-serif;
  animation: vt-in .6s ease-out both; }
.voice-tip p { margin: 0; }
.voice-tip .vt-row { display: flex; gap: 10px; flex-wrap: wrap; }
.voice-tip button { min-height: 48px; padding: 4px 16px; border: 3px solid #3b2a1a; border-radius: 999px; background: #fffdf7; font: inherit; font-weight: 600; color: inherit; cursor: pointer; }
.voice-tip .vt-go { background: #e7f4e8; }
@keyframes vt-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .voice-tip { animation: none; } }
/* "Record your own voice" box (arcade home and grown-up pages). */
.my-voice-ad { background: #eef6ee; border: 3px solid #3b2a1a; border-radius: 20px; padding: 14px 16px; display: grid; gap: 8px; }
.my-voice-ad h2 { margin: 0; font-size: 22px; }
.my-voice-ad p { margin: 0; }
.my-voice-ad button { justify-self: start; min-height: 48px; padding: 4px 18px; border: 3px solid #3b2a1a; border-radius: 999px; background: #fffdf7; box-shadow: 0 4px 0 #3b2a1a; font: inherit; font-weight: 700; color: #3b2a1a; cursor: pointer; }
/* Share box (html.mjs shareBlock, share.js): grown-ups only, hidden under the Child lock. */
.share { background: #fffdf7; color: #3b2a1a; border: 3px solid #3b2a1a; border-radius: 20px; padding: 14px 16px; display: grid; gap: 8px; }
.share h2 { margin: 0; font-size: 22px; }
.share p { margin: 0; }
.share-row { display: flex; flex-wrap: wrap; gap: 8px; }
.share .sh { display: inline-flex; align-items: center; min-height: 48px; padding: 4px 18px; border: 3px solid #3b2a1a; border-radius: 999px; background: #fffdf7; color: #3b2a1a; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.share .sh-sheet { background: #e7f4e8; }
.share-note:empty { display: none; }
.share-note { font-size: 15px; color: #2a7a36; overflow-wrap: anywhere; }
/* Whose voice (Doug, Oct 3: up to 3 family voices): a short list of roles, Other with a first name. */
.mv-who p { margin: 0 0 6px; font-weight: 600; }
.mv-who-list { display: flex; flex-wrap: wrap; gap: 6px; }
.kid-dialog .mv-who-list button { min-height: 44px; padding: 4px 12px; border: 2px solid #3b2a1a; border-radius: 999px; background: #fffdf7; font-size: 16px; }
.kid-dialog .mv-who-list button[aria-pressed='true'] { background: #dff0de; border-color: #3fa34d; }
.mv-other { display: grid; gap: 4px; margin-top: 8px; font-size: 16px; }
.mv-other input { min-height: 44px; border: 2px solid #3b2a1a; border-radius: 12px; padding: 4px 10px; font: inherit; }
/* Never wider than the phone (Doug, Oct 3: "This looks offcenter on my mobile"): nothing may push the page sideways. */
/* clip, never hidden: hidden makes the body its own scroll box, and with overscroll-behavior: none (locked) a one-finger
   swipe then stops at the body and never scrolls the page (Doug, Oct 15: "it only scrolls with two fingers"). */
html, body { max-width: 100%; overflow-x: clip !important; }
/* Full screen: the page itself keeps scrolling (Doug, Oct 15: stuck on Coloring's page picker on his phone). */
:root:fullscreen { overflow-y: auto; }
:root:-webkit-full-screen { overflow-y: auto; }

/* Powered by Web Design Nerd (wdn-badge.js): the WDN shared badge, light version. Grown-up areas only. */
.wdn-badge { margin: 14px 0 4px; text-align: center; }
.wdnpb { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px;
  background: #ffffff; border: 1px solid #d5dae2; color: #5b6472; text-decoration: none;
  font: 500 12.5px/1 ui-monospace, "IBM Plex Mono", SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .01em;
  transition: border-color .4s, color .4s; }
.wdnpb:hover, .wdnpb:focus-visible { border-color: #2a9fa4; color: #0c0e12; }
.wdnpb:focus-visible { outline: 2px solid #2a9fa4; outline-offset: 2px; }
.wdnpb__ic { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px;
  background: #0c0e12; border: 1.5px solid #0c0e12; color: #f2f4f8; font-weight: 600; font-size: 10.5px; letter-spacing: -.5px; }
.wdnpb__name { color: #0c0e12; font-weight: 600; }
.wdnpb__name b { color: #2a9fa4; font-weight: 600; }
.wdnpb__cur { display: inline-block; width: 6px; height: 12px; margin-left: 2px; background: #fba920; vertical-align: -2px; }
@media (prefers-reduced-motion: reduce) { .wdnpb { transition: none; } }

/* No pinch or double-tap zoom anywhere in the arcade (Doug, Oct 8 and Oct 26; kit.js guardZoom, and every page's viewport
   has maximum-scale=1, user-scalable=no). Scrolling still works; drags keep their own touch-action: none. */
html { touch-action: pan-x pan-y; }

/* ---------- the full lock (full-lock.js; Kids Piano first, Doug, Oct 12) ----------
   Locked: only the game's allowed controls take a tap. No menus, selecting, dragging, zoom, pull-to-refresh or swipe back.
   The state is plain to see: locked is a navy top bar and frame with "Locked" on the lock; unlocked is a yellow bar, a
   dashed yellow frame and "Unlocked". Both are still pictures (no flashing, rule 1). */
html:has(body.full-lock), body.full-lock { overscroll-behavior: none; }
html:has(body.full-lock.locked), body.full-lock.locked { touch-action: none; }
body.full-lock.locked :is(a, button, summary, input, select, textarea, details):not(.lock-btn, .fullscreen-btn, .home-btn, .kid-dialog *, .start-cover *, .start-cover) { cursor: default; }
body.full-lock::after { content: ''; position: fixed; inset: 0; z-index: 55; pointer-events: none; border: 6px dashed #f4c55a; }
body.full-lock.locked::after { border: 6px solid #2c2a4a; }
body.full-lock .top { background: #fff2c4; box-shadow: inset 0 -4px 0 #f4c55a; }
body.full-lock.locked .top { background: #2c2a4a; box-shadow: none; }
/* The locked game left full screen or lost focus (full-lock.js lockedNote): the message sits on the navy of the lock. */
.locked-note { background: #2c2a4aee; }
.locked-note .back-in { min-height: 72px; }
.uh-device summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.uh-device h3 { margin: 8px 0 4px; font-size: 17px; }
.uh-device ol { font-size: 15px; line-height: 1.35; }

/* Nothing wider than the screen (Doug, Oct 13: game and Classic Stories screens cut off on the right at phone width).
   A grid's auto column grows to its widest child's min-content; minmax(0, 1fr) keeps it to the screen and lets text wrap. */
.screen { grid-template-columns: minmax(0, 1fr); }
.screen > *, .pick > * { min-width: 0; }
.kid-cheer b { max-width: calc(100vw - 32px); white-space: normal; text-align: center; }
:is(ul, ol) > li { min-width: 0; overflow-wrap: anywhere; }

/* The wanted letter in a word, lit (kit.js litWordHTML; Doug, Oct 13): a warm yellow block behind it, no ring or glow. */
.lit { background: #ffe48a; border-radius: 8px; box-shadow: 0 0 0 3px #ffe48a; }

/* The game's picture on its start screen (Doug, Oct 15, option A "Picture first"): the same picture as its arcade tile,
   big, in a card like the button the child just pressed, right above Play. art/icons/<slug>.svg (kids-site/icons.mjs). */
.hero .hero-art { display: block; justify-self: center; width: min(260px, 66vw, 36dvh); height: auto; aspect-ratio: 1; margin: 6px auto 4px; padding: 14px; background: #fffdf7; border: 4px solid #3b2a1a; border-radius: 30px; box-shadow: 0 6px 0 #3b2a1a; }

/* Levels from the child's age, set by a grown-up (rule 23; grown-up-age.js). The age card: a calm grown-up card, the
   numbers inside their own tiles (rule 18), behind the grown-up sum. The level row sits in each game's For grown-ups. */
.age-ask .age-card { width: min(560px, 100%); justify-items: center; text-align: center; }
.age-ask .age-lead { font-size: 17px; line-height: 1.35; }
.age-tiles { width: 100%; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.kid-dialog .age-tile { min-height: 76px; padding: 0; display: grid; place-items: center; box-shadow: 0 4px 0 #3b2a1a; }
.kid-dialog .age-tile b { font-size: 36px; line-height: 1; }
.kid-dialog .age-tile[aria-pressed='true'] { background: #dff0de; border-color: #3fa34d; box-shadow: 0 4px 0 #2a7a36; }
.kid-dialog .age-skip { width: 100%; background: transparent; }
.level-pick { margin: 12px 0 0; padding: 10px 12px 14px; border: 2px solid #3b2a1a40; border-radius: 16px; display: grid; gap: 10px; min-width: 0; font: 500 17px/1.35 'Fredoka', system-ui, sans-serif; color: #3b2a1a; }
.level-pick legend { padding: 0 4px; font-weight: 700; }
.level-pick p { margin: 0; }
.level-pick small { font-size: 14px; color: #6b5a48; }
.level-pick .lp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.level-pick .lp-row button { min-height: 64px; display: grid; place-content: center; gap: 2px; padding: 6px; border: 3px solid #3b2a1a; border-radius: 14px; background: #fffdf7; font: 700 19px/1.1 'Fredoka', system-ui, sans-serif; color: #3b2a1a; cursor: pointer; }
.level-pick .lp-row button small { font-weight: 500; }
.level-pick .lp-row button:disabled { opacity: .45; cursor: default; }
.level-pick .chip { min-height: 40px; margin-left: 4px; padding: 0 12px; border: 2px solid #3b2a1a; border-radius: 999px; background: #fffdf7; font: 600 16px 'Fredoka', system-ui, sans-serif; color: #3b2a1a; cursor: pointer; }

/* An ended app build (kit.js retiredScreen, ADR-046): a solid page over everything, so nothing behind it can be played.
   The grown-up sum it opens sits above it. */
.kid-dialog.retired { z-index: 90; background: #fff3dc; }
.kid-dialog.retired ~ .kid-dialog { z-index: 91; }

/* Sticker look for drawn pictures (Doug, Oct 30: "Sticker book" pieces like the home tiles). A dark outline traced
   around any picture's own shape, so pictures from different sets look like one sticker book. Use: filter: var(--sticker). */
:root { --sticker: drop-shadow(1.5px 0 0 #3b2a1a) drop-shadow(-1.5px 0 0 #3b2a1a) drop-shadow(0 1.5px 0 #3b2a1a) drop-shadow(0 -1.5px 0 #3b2a1a); }