/* Talk to Play: calm by default. Big targets, high contrast, no flashing, and every motion has a
   still version (.calm, which follows the device's reduced-motion setting unless the adult
   chooses otherwise). */

:root {
  --ink: #0f2d44;
  --ink-soft: #3d5a70;
  --sky-top: #a9d8ff;
  --sky-bottom: #f1f9ff;
  --accent: #1a64a8;
  --accent-ink: #ffffff;
  --card: #ffffff;
  --line: #9cc7ea;
  --bar: #e3f1fc;
  --ok: #2f8f4e;
  --focus: #f0a500;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--sky-bottom);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;              /* no double-tap zoom on a fast second tap */
}

button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 4px solid var(--focus); outline-offset: 3px; }

#app { position: fixed; inset: 0; }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; }
.screen[hidden] { display: none; }

/* ---------- start ---------- */

.start {
  align-items: center;
  justify-content: center;
  padding: 1.5rem max(1.5rem, env(safe-area-inset-right)) 1.5rem max(1.5rem, env(safe-area-inset-left));
  background: linear-gradient(var(--sky-top), var(--sky-bottom));
}
.start-card {
  width: min(40rem, 100%);
  background: var(--card);
  border-radius: 2rem;
  padding: clamp(1.5rem, 5vw, 3rem);
  box-shadow: 0 10px 40px rgba(15, 45, 68, 0.12);
  text-align: center;
}
.brand { margin: 0; font-weight: 700; color: var(--ink-soft); letter-spacing: 0.02em; }
h1 { margin: 0.2em 0 0.4em; font-size: clamp(2.8rem, 9vw, 4.5rem); line-height: 1; }
.lead { font-size: clamp(1.25rem, 3.6vw, 1.6rem); line-height: 1.45; margin: 0 0 1rem; }
.privacy { color: var(--ink-soft); line-height: 1.5; margin: 0 0 1.75rem; }
.start-actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.start-actions .big { flex: 1 1 14rem; }

.big {
  min-height: 4.25rem;
  padding: 0 2rem;
  font-size: 1.4rem;
  font-weight: 700;
  border-radius: 1.25rem;
  border: 3px solid var(--accent);
  background: var(--card);
  color: var(--accent);
}
.big.primary { background: var(--accent); color: var(--accent-ink); }
.big:active { transform: scale(0.98); }

/* ---------- game ---------- */

.stage { position: relative; flex: 1; overflow: hidden; }
.sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--sky-top), var(--sky-bottom));
}

.said {
  position: absolute;
  top: 14%;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-size: clamp(3.5rem, 15vmin, 8.5rem);
  font-weight: 800;
  color: var(--ink);
  text-shadow: 0 3px 0 #fff, 0 0 24px #fff;
  opacity: 0;
  pointer-events: none;
}
.said.show { animation: said 1.9s ease-out forwards; }
@keyframes said {
  0% { opacity: 0; transform: scale(0.85); }
  12% { opacity: 1; transform: scale(1); }
  70% { opacity: 1; }
  100% { opacity: 0; }
}

.ending {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  background: rgba(241, 249, 255, 0.82);
  animation: settle 0.9s ease-out both;
}
.ending[hidden] { display: none; }
.game:has(.ending:not([hidden])) .said { visibility: hidden; }
.ending-word { margin: 0; font-size: clamp(3rem, 12vmin, 7rem); font-weight: 800; }
@keyframes settle { from { opacity: 0; } to { opacity: 1; } }

.words {
  display: flex;
  gap: 1rem;
  padding: 1rem max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  background: var(--bar);
  border-top: 3px solid var(--line);
}
.word {
  flex: 1;
  min-height: 6.5rem;
  font-size: clamp(2rem, 6.5vmin, 3.5rem);
  font-weight: 800;
  border-radius: 1.75rem;
  border: 3px solid var(--line);
  background: var(--card);
  color: var(--ink);
}
.word:active { background: #eaf5ff; transform: scale(0.98); }

.corner {
  position: absolute;
  top: max(0.75rem, env(safe-area-inset-top));
  right: max(0.75rem, env(safe-area-inset-right));
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.mic-state {
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--ink-soft);
  font-size: 0.95rem;
  font-weight: 600;
}
.mic-state.on::before {
  content: "";
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  margin-right: 0.45rem;
  border-radius: 50%;
  background: var(--ok);
}
.gear {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.85);
  color: var(--ink-soft);
  display: grid;
  place-items: center;
}

.notice {
  position: absolute;
  top: max(4.25rem, calc(env(safe-area-inset-top) + 3.5rem));
  right: max(0.75rem, env(safe-area-inset-right));
  max-width: min(26rem, calc(100% - 1.5rem));
  padding: 0.75rem 1rem;
  border: 2px solid var(--line);
  border-radius: 1rem;
  background: var(--card);
  text-align: left;
  font-size: 1rem;
  line-height: 1.4;
}
.notice[hidden] { display: none; }

/* ---------- bubbles ---------- */

.bubble {
  position: absolute;
  bottom: 0;
  left: var(--x);
  width: var(--size);
  height: var(--size);
  margin-left: calc(var(--size) / -2);
  animation: rise var(--dur) cubic-bezier(0.25, 0.1, 0.45, 1) var(--delay) both;
  touch-action: none;
}
.bubble-skin {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.95);
  background:
    radial-gradient(circle at 30% 27%, rgba(255, 255, 255, 0.98) 0 8%, transparent 9%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.10) 50%, transparent 71%),
    conic-gradient(from 40deg, rgba(120, 200, 255, 0.75), rgba(255, 150, 220, 0.7),
      rgba(255, 230, 120, 0.7), rgba(140, 240, 190, 0.7), rgba(120, 200, 255, 0.75));
  -webkit-mask: radial-gradient(circle, rgba(0, 0, 0, 0.55) 52%, #000 70%);
  mask: radial-gradient(circle, rgba(0, 0, 0, 0.55) 52%, #000 70%);
  box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.7), 0 0 0 1px rgba(26, 100, 168, 0.35),
    0 4px 14px rgba(26, 100, 168, 0.25);
  animation: wobble var(--wobble) ease-in-out infinite alternate;
}
@keyframes rise {
  0% { transform: translate(0, 0) scale(0.6); opacity: 0; }
  6% { opacity: 1; }
  15% { transform: translate(calc(var(--drift) * 0.15), calc(var(--rise) * 0.15)) scale(1); }
  100% { transform: translate(var(--drift), var(--rise)) scale(1); opacity: 0.95; }
}
@keyframes wobble {
  from { transform: translateX(-5px) scale(1, 0.97); }
  to { transform: translateX(5px) scale(0.97, 1); }
}
.bubble.popped .bubble-skin { animation: pop 0.2s ease-out forwards; }
.bubble.leaving .bubble-skin { animation: away 1.2s ease-in forwards; }
@keyframes pop { to { transform: scale(1.35); opacity: 0; } }
@keyframes away { to { transform: translateY(-80px); opacity: 0; } }

/* Calm motion: bubbles appear where they are, stay a while, and fade. Nothing floats. */
.calm .bubble {
  bottom: auto;
  top: var(--y);
  animation: appear 5s ease both;
  animation-delay: var(--delay);
}
.calm .bubble-skin { animation: none; }
.calm .bubble.popped .bubble-skin,
.calm .bubble.leaving .bubble-skin { animation: fade 0.35s ease-out forwards; }
.calm .said.show { animation: said-calm 1.9s linear forwards; }
@keyframes appear { 0% { opacity: 0; } 10% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fade { to { opacity: 0; } }
@keyframes said-calm { 0% { opacity: 0; } 10% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- adult panel ---------- */

.panel {
  width: min(36rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: 0;
  border: none;
  border-radius: 1.5rem;
  color: var(--ink);
  box-shadow: 0 20px 60px rgba(15, 45, 68, 0.3);
  -webkit-user-select: text;
  user-select: text;
}
.panel::backdrop { background: rgba(15, 45, 68, 0.35); }
.panel form { padding: 0 1.5rem 1.5rem; }
.panel-head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 0 0.5rem;
  background: var(--card);
}
.panel h2 { margin: 0; font-size: 1.5rem; }
.panel h3 { margin: 1.25rem 0 0.5rem; font-size: 1.1rem; }
.close {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--card);
  font-size: 1.1rem;
}
.status { margin: 0 0 0.75rem; line-height: 1.45; }
.toggle {
  min-height: 3rem;
  padding: 0 1.25rem;
  border-radius: 999px;
  border: 2px solid var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
}
.toggle[aria-pressed="false"] { background: var(--card); color: var(--accent); }
.toggle:disabled { opacity: 0.45; cursor: default; }
.meter { height: 0.75rem; margin-top: 0.9rem; border-radius: 999px; background: #e3eef7; overflow: hidden; }
.level { height: 100%; width: 0; background: var(--ok); transition: width 0.1s linear; }
.hint { margin: 0.75rem 0 0; padding: 0.6rem 0.8rem; border-radius: 0.75rem; background: #fff6df; line-height: 1.4; }
.hint[hidden] { display: none; }
.heard { margin: 0; padding: 0; list-style: none; max-height: 12rem; overflow: auto; font-variant-numeric: tabular-nums; }
.heard li { padding: 0.3rem 0; border-bottom: 1px solid #eef3f7; }
.heard li.ignored { color: var(--ink-soft); }
.heard:empty::before { content: "Nothing yet."; color: var(--ink-soft); }
.fine { margin: 0.5rem 0 0; font-size: 0.9rem; color: var(--ink-soft); }
.sensitivity fieldset { border: none; margin: 0 0 0.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.sensitivity legend { float: left; min-width: 5.5rem; font-weight: 700; }
.sensitivity label { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 2.75rem; }
.sensitivity[disabled] { opacity: 0.5; }
.row { display: flex; align-items: center; gap: 1rem; min-height: 2.75rem; }
.row input[type="range"] { flex: 1; }
.about { margin-top: 1.25rem; font-size: 0.9rem; color: var(--ink-soft); line-height: 1.45; }

/* ---------- the how-to page: a plain, scrollable document ---------- */

html:has(body.doc), body.doc {
  height: auto;
  overflow: auto;
  -webkit-user-select: text;
  user-select: text;
  background: var(--sky-bottom);
}
.doc-page {
  max-width: 44rem;
  margin: 0 auto;
  padding: 2rem max(1.25rem, env(safe-area-inset-right)) 3rem max(1.25rem, env(safe-area-inset-left));
  line-height: 1.55;
  font-size: 1.1rem;
}
.doc-page h1 { font-size: clamp(2rem, 7vw, 3rem); margin: 0.2em 0 0.5em; }
.doc-page h2 { font-size: 1.3rem; margin: 1.75rem 0 0.5rem; }
.doc-page ul, .doc-page ol { padding-left: 1.4rem; margin: 0; }
.doc-page li { margin: 0.35rem 0; }
.doc-page a { color: var(--accent); }
.doc-page .brand a { color: var(--ink-soft); text-decoration: none; }
.doc-page .back { margin-top: 2rem; }
.doc-page .back .big { display: inline-flex; align-items: center; text-decoration: none; }
.howto { margin: 1.25rem 0 0; font-size: 1.05rem; }
.howto a { color: var(--accent); }

/* --- setup: learning the talker's voice --- */
.setup-tip { color: var(--ink-soft); line-height: 1.5; margin: 0 0 1.25rem; }
.ticks { display: flex; gap: 0.75rem; justify-content: center; list-style: none; margin: 0 0 1rem; padding: 0; }
.ticks li { width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 3px solid var(--line); }
.ticks li.done { background: var(--ok); border-color: var(--ok); }
.tried { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin: 0 0 1rem; }
.tried[hidden] { display: none; }
.tried span { padding: 0.6rem 1.1rem; border-radius: 999px; border: 3px solid var(--line); font-weight: 700; font-size: 1.2rem; }
.tried span.heard-it { background: var(--ok); border-color: var(--ok); color: #fff; }
.tried span.heard-it::before { content: "✓ "; }
.setup .meter { margin: 1rem 0 0.5rem; }
.setup .fine { margin: 0 0 1.25rem; min-height: 1.3em; }
.toggle.secondary { margin-top: 0.75rem; background: var(--card); color: var(--accent); }

/* --- start: choosing the game --- */
.games { display: flex; gap: 0.75rem; justify-content: center; margin: 0 0 1.25rem; }
.game-choice {
  flex: 1 1 0; min-height: 3.5rem; padding: 0 1rem; font-size: 1.2rem; font-weight: 700;
  border-radius: 1rem; border: 3px solid var(--line); background: var(--card); color: var(--ink);
}
.game-choice[aria-pressed="true"] { border-color: var(--accent); background: #eaf5ff; color: var(--accent); }

/* --- Race Car --- */
.race { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(var(--sky-top), var(--sky-bottom) 62%); }
.strip { position: absolute; left: 0; width: 200%; display: flex; animation: roll var(--lap) linear infinite paused; }
.strip .half { width: 50%; display: flex; justify-content: space-around; align-items: flex-end; }
@keyframes roll { to { transform: translateX(-50%); } }
.race.driving .strip, .race.driving .dashes, .race.driving .wheel, .race.driving .car, .race.driving .going { animation-play-state: running; }
/* Speed: the road passes about 2.8 car lengths a second, and each layer further back is slower
   (trees, hills, clouds). Road dashes and trees each pass a point under 3 times a second. */

.clouds { top: 8%; height: 16%; --lap: 26s; }
.cloud { width: 16vmin; height: 5.5vmin; border-radius: 999px; background: #fff; opacity: 0.9; box-shadow: 4vmin -2.2vmin 0 -0.6vmin #fff, -3.5vmin -1.6vmin 0 -1vmin #fff; }
.cloud.v1 { transform: translateY(5vmin) scale(0.8); }
.cloud.v2 { transform: translateY(-1vmin) scale(1.15); }
.hills { bottom: 30%; height: 22%; --lap: 8s; }
.hill { width: 62vmin; height: 34vmin; margin-bottom: -20vmin; border-radius: 50%; background: #9fd49a; }
.hill.v1 { width: 80vmin; background: #8cc98a; }
.hill.v2 { width: 50vmin; height: 28vmin; background: #b1dcaa; }
.trees { bottom: 30%; height: 20%; --lap: 1.8s; }
.tree { position: relative; width: 2vmin; height: 8vmin; background: #8a6240; border-radius: 0.4vmin; }
.tree::before { content: ""; position: absolute; left: 50%; bottom: 55%; width: 11vmin; height: 13vmin; transform: translateX(-50%); border-radius: 50% 50% 46% 46%; background: #3f9a57; }
.tree.v1::before { width: 8vmin; height: 10vmin; background: #4aa863; }
.tree.v2 { height: 6vmin; }

.road { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: #6f7a86; border-top: 1vmin solid #57616c; }
/* One dash-and-gap wider than the road, slid left by exactly that much, so it loops unseen. */
.dashes {
  position: absolute; left: 0; width: calc(100% + 56vmin); top: 46%; height: 1.6vmin;
  background: repeating-linear-gradient(90deg, #fff 0 24vmin, transparent 24vmin 56vmin);
  animation: dash 0.36s linear infinite paused;
}
@keyframes dash { to { transform: translateX(-56vmin); } }

.car { position: absolute; left: 50%; bottom: 12%; width: clamp(200px, 56vmin, 520px); margin-left: calc(clamp(200px, 56vmin, 520px) / -2); overflow: visible; animation: bob 0.22s ease-in-out infinite alternate paused; }
@keyframes bob { to { transform: translateY(-0.5vmin); } }
.car .body { fill: #e5484d; stroke: #9b2226; stroke-width: 5; stroke-linejoin: round; }
.car .glass { fill: #d7efff; stroke: #9b2226; stroke-width: 4; }
.car .lamp { fill: #ffe9a8; stroke: #9b2226; stroke-width: 3; }
.car .shadow { fill: rgba(15, 45, 68, 0.2); }
.car .wheel circle { fill: #26323d; }
.car .wheel .hub { fill: #c8d3dd; }
.car .wheel .spoke { stroke: #c8d3dd; stroke-width: 6; stroke-linecap: round; }
.car .wheel { transform-origin: 0 0; animation: spin 0.28s linear infinite paused; }
@keyframes spin { to { transform: rotate(360deg); } }
/* Speed lines behind the car while it drives; they stream backwards. */
.car .going { display: none; fill: none; stroke: var(--ink); stroke-width: 7; stroke-linecap: round; opacity: 0.55; stroke-dasharray: 26 16; animation: streak 0.2s linear infinite paused; }
.race.driving .going { display: block; }
@keyframes streak { to { stroke-dashoffset: 42; } }

/* Calm motion: nothing rolls or spins. Going still shows, as still lines behind the car and lit lamps. */
.calm .race .strip, .calm .race .dashes, .calm .car, .calm .car .wheel, .calm .car .going { animation: none; }
.calm .car .going { stroke-dasharray: none; }
.calm .race.driving .lamp { fill: #ffd23f; }