/* Child UI — big, friendly, responsive. Real text, animated with CSS (Constitution #8). */
:root { --pink:#ff4d7e; --green:#7ac74f; --sky:#8ed8ff; --sun:#ffd93d; --ink:#3a2b00; }
* { box-sizing: border-box; }
body { margin:0; font-family:"Comic Sans MS","Chalkboard SE","Segoe UI",sans-serif; color:var(--ink);
  background: linear-gradient(#87ceeb 0%, #b8f0c8 70%, #c8f5a8 100%); min-height:100vh; }
.stage { max-width:860px; margin:0 auto; padding:16px; }
.host-card { background:#fffdf5; border:6px solid var(--sun); border-radius:28px; padding:16px;
  text-align:center; box-shadow:0 6px 0 rgba(0,0,0,.08); }
.host-img { height:min(240px,52vw); width:auto; max-width:88vw; object-fit:contain;
  border-radius:24px; animation:bob 2.4s ease-in-out infinite; outline:none; border:none; }
/* Fixed-height pose frames: swapping poses never moves the layout. */
.pose-img { height:110px; width:auto; object-fit:contain; }
.game-host { display:flex; align-items:center; justify-content:center; gap:10px;
  font-size:20px; margin-bottom:4px; min-height:120px; }
.pose-row { display:flex; justify-content:center; gap:12px; }
.pose-row .pose-img { height:min(170px,36vw); }
@keyframes bob { 0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-8px) rotate(1deg)} }
.speech { font-size:clamp(22px,4vw,32px); margin-top:8px; }
.panel { background:#fff; border-radius:24px; padding:20px; margin-top:16px; text-align:center;
  border:4px solid #ffe08a; }
/* Single-line blanks: never wrap — shrink + scroll instead. */
.blanks-wrap { position:relative; margin:12px 0; }
.blanks { display:flex; flex-wrap:nowrap; gap:8px; justify-content:center; min-height:96px;
  overflow-x:auto; padding:4px 2px; scrollbar-width:thin; }
.slot { flex:0 0 auto; width:clamp(38px,12vw,64px); height:84px; border-bottom:8px solid var(--sky);
  display:flex; align-items:end; justify-content:center;
  font-size:clamp(36px,9vw,56px); font-weight:900; }
/* Real tap-to-type input overlays: tapping any dash opens the phone/tablet keyboard. */
#nameInput, #gameInput { position:absolute; inset:0; width:100%; height:100%; opacity:0; border:none;
  font-size:16px; /* 16px+ stops iOS auto-zoom */ background:transparent; color:transparent;
  caret-color:transparent; cursor:text; }
#nameInput:focus, #gameInput:focus { outline:none; }
.blanks-wrap:focus-within .slot { border-bottom-color:var(--sun); }
/* Big pink ENTER — same pink as the old logo outline. */
.big.enter { background:var(--pink); color:#fff; font-size:30px; letter-spacing:2px;
  width:min(340px,90%); margin:6px auto 0; display:block; }
.big.enter:disabled { opacity:.45; }
.slot.pop span { display:inline-block; animation:pop .25s ease-out; }
@keyframes pop { 0%{transform:scale(.2) rotate(-8deg)} 70%{transform:scale(1.25)} 100%{transform:scale(1)} }
.hint { color:#666; } kbd { background:#eee; border-radius:6px; padding:2px 8px; border:1px solid #ccc; }
.big { font-size:26px; font-weight:900; border:none; border-radius:20px; padding:16px 26px; cursor:pointer;
  box-shadow:0 5px 0 rgba(0,0,0,.15); transition:transform .1s; }
.big:active { transform:scale(.96); }
.big.secondary { background:#eef6ff; font-size:18px; }
.choices { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.big.spelling { background:#ffe1ec; } .big.math { background:#ddf5d0; }
.big small { display:block; font-size:14px; font-weight:400; }
.big.go { background:var(--sun); } .big.go:disabled { opacity:.4; cursor:not-allowed; }
.sizes .size { font-size:24px; font-weight:900; padding:12px 22px; border-radius:16px; border:4px solid #ddd; background:#fff; cursor:pointer; }
.sizes .size.sel { border-color:var(--sun); background:#fff7d6; }
.sizes .size:disabled { opacity:.35; text-decoration:line-through; cursor:not-allowed; }
.note { color:#888; font-size:14px; }
/* Sprint 2 game card: locked per-card sizing via --slot-w/--slot-f. */
#gameBlanks .slot { width:var(--slot-w,56px); font-size:var(--slot-f,50px); }
.game-top { display:flex; justify-content:space-between; font-size:24px; font-weight:900; margin-bottom:6px; }
.game-host { font-size:20px; margin-bottom:4px; }
.math-line { font-size:clamp(40px,9vw,64px); font-weight:900; margin:8px 0; }
.game-btns { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:8px; }
.game-btns .big.enter { width:auto; margin:0; }
.feedback { min-height:34px; font-size:26px; font-weight:900; }
#gameBlanks.wobble, #blanks.wobble { animation:wobble .5s ease; }
@keyframes wobble { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-10px) rotate(-1deg)}
  50%{transform:translateX(10px)} 75%{transform:translateX(-6px)} }
#gameBlanks.cheer .slot span { display:inline-block; animation:cheer .6s ease; }
@keyframes cheer { 0%{transform:scale(1)} 40%{transform:scale(1.4) rotate(6deg)} 100%{transform:scale(1)} }
/* Thinking sway + dance bounce: CSS motion layered over pose frames. */
#gamePose { transition:transform .25s ease; }
#gameBlanks.wobble ~ .game-btns, .thinking-sway { animation:sway 1.6s ease-in-out infinite; }
@keyframes sway { 0%,100%{transform:rotate(-2deg)} 50%{transform:rotate(2deg)} }
.cheer-dance { animation:dancebounce .45s ease 11; }
@keyframes dancebounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px) rotate(2deg)} }
/* Opening slate: both hosts + theme music on first tap (autoplay-safe). */
.slate { position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(#87ceeb 0%, #b8f0c8 70%, #c8f5a8 100%); padding:16px; }
.slate[hidden] { display:none; }
.slate-card { background:#fffdf5; border:6px solid var(--sun); border-radius:28px; padding:28px;
  text-align:center; max-width:520px; }
.slate-card h1 { font-size:clamp(30px,7vw,46px); margin:10px 0 0; }
.slate-card .pose-row .pose-img { height:min(150px,32vw); }
/* Streak overlay: short, both characters, auto-dismisses. */
.streak-overlay, .unlock-overlay { position:fixed; inset:0; z-index:40; display:flex; align-items:center;
  justify-content:center; background:rgba(0,0,0,.25); padding:16px; }
.streak-overlay[hidden], .unlock-overlay[hidden] { display:none; }
.streak-card, .unlock-card { background:#fffdf5; border:6px solid var(--sun); border-radius:28px; padding:24px;
  text-align:center; animation:streakpop .4s ease; max-width:480px; }
@keyframes streakpop { 0%{transform:scale(.6)} 70%{transform:scale(1.06)} 100%{transform:scale(1)} }
/* Star flight: earned star flies up to the star bar. */
.star-fly { position:fixed; z-index:60; font-size:40px; pointer-events:none;
  transition:left .7s ease-in, top .7s ease-in, transform .7s, opacity .7s; }
@media (max-width:600px){ .slot{height:66px} .big{font-size:22px} .big.enter{font-size:26px} }