/* Helps for every child (dyslexia reading, read aloud, bigger buttons, more time, less motion, quiet, contrast, captions). */
@import url(helps.css?v=b10c76c85a);
/* 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; }
.lock-btn { position: relative; touch-action: none; }
.lock-btn[aria-pressed='true'] { background: #fde7b0; }
.lock-btn .hold-ring { position: absolute; inset: -6px; border-radius: 20px; border: 4px solid transparent; pointer-events: none; }
/* Holding to unlock: the ring fills slowly over the 3 seconds (one smooth change, no flashing). */
.lock-btn.holding .hold-ring { border-color: #3fa34d; transition: border-color 3s linear; }

.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: the house already goes to the games and the gear to the game's settings, so the old Back arrow steps
   aside and six buttons fit at 360 px. */
@media (max-width: 420px) { .top:has(.home-btn) #back { display: none !important; } .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; }
.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; }
.pq-age { display: grid; justify-items: center; gap: 6px; font: 700 44px/1 'Fredoka', system-ui, sans-serif; color: #3b2a1a; }
.pq-age small { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; max-width: 62px; }
.pq-age small i { width: 10px; height: 10px; border-radius: 50%; background: #8f6fd0; }
/* A Next button kit.autoNext presses by itself: never shown. */
.kid-auto { display: none !important; }
@media (prefers-reduced-motion: reduce) { .kid-cheer { transition: none; } }

/* 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-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; }

@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. */
html, body { max-width: 100%; overflow-x: clip; }

/* 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 while a child plays (kit.js guardZoom: locked, or a play screen showing). Scrolling
   still works; drags keep their own touch-action: none. */
html.no-zoom { 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). */
.lock-word { display: none; }
body.full-lock .lock-btn { gap: 6px; padding: 6px 12px; }
body.full-lock .lock-word { display: inline; font: 700 18px/1 'Fredoka', system-ui, sans-serif; }
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 .home-btn { pointer-events: none; opacity: .35; filter: grayscale(1); box-shadow: none; transform: none; }
body.full-lock.locked :is(a, button, summary, input, select, textarea, details):not(.lock-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; }
body.full-lock.locked .lock-btn { background: #2c2a4a; color: #fff; border-color: #fff; box-shadow: 0 4px 0 #0008; }
body.full-lock:not(.locked) .lock-btn { background: #f6c744; color: #3b2a1a; }
@media (min-width: 700px) { body.full-lock .lock-word { font-size: 22px; } body.full-lock .lock-btn { padding: 6px 16px; } }
/* Narrow phones: a little less space between the buttons so the word fits beside the sound, full screen and gear. */
@media (max-width: 420px) {
  body.full-lock .top { gap: 6px; padding-left: 10px; padding-right: 10px; }
  body.full-lock .lock-word { font-size: 14px; }
  body.full-lock .lock-btn { padding: 4px 6px; gap: 4px; }
  body.full-lock .lock-btn svg { width: 22px; height: 22px; }
}
/* 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; }