/* Say it — sound cards that listen while the child talks (js/adventures/say-studio.js).
   One big sleeping picture, its beats, its word, and a microphone that glows while the
   child's voice is heard. Everything a child needs is a picture or a button; the
   grown-up's tip and controls fold away at the bottom. */

.say-studio{--studio-ink:#34564e;--studio-plum:#744591;--studio-plum-soft:#f4ecf8;--studio-mint:#24675b;--studio-sun:#f4c452;--studio-heard:#2f8f5b;grid-template-rows:auto minmax(0,1fr) auto;gap:10px}
.studio-body{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(12px,3vw,36px);align-items:center;background:var(--studio-plum-soft);border:2px solid #e2d3ea;border-radius:32px;padding:clamp(12px,2.4vh,28px) clamp(14px,3vw,40px)}
.studio-left{min-height:0;height:100%;display:grid;place-items:center}
.studio-right{min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,2.4vh,24px)}
.studio-turn{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.studio-mouth{display:grid;place-items:center;width:clamp(76px,12vh,104px);height:clamp(76px,12vh,104px);opacity:.45;transition:opacity .2s,transform .2s}
.studio-mouth svg{width:100%;height:100%}
[data-phase=turn] .studio-mouth{opacity:1;animation:studio-talk 1s ease-in-out infinite}
@keyframes studio-talk{50%{transform:scale(1.08) rotate(-4deg)}}
[data-mode=taps][data-phase=turn] .studio-card.asleep{animation:studio-tapme 1.4s ease-in-out infinite}
@keyframes studio-tapme{0%,100%{box-shadow:0 8px 0 #d7b7e2,0 0 0 0 rgba(244,196,82,.7)}50%{box-shadow:0 8px 0 #d7b7e2,0 0 0 16px rgba(244,196,82,0)}}

/* ---- the picture ------------------------------------------------------------------ */
.studio-card{position:relative;display:grid;place-items:center;width:min(100%,clamp(170px,52vh,400px));aspect-ratio:1;border:0;border-radius:36px;background:#fffdf6;box-shadow:0 8px 0 #d7b7e2;padding:6%;cursor:pointer;transition:filter .5s,transform .3s}
.studio-pic{display:grid;place-items:center;width:100%;height:100%}
.studio-pic svg{width:100%;height:100%;overflow:visible}
.studio-card.asleep .studio-pic{filter:grayscale(.75) brightness(.92);opacity:.78;transform:rotate(-4deg) scale(.94);transition:filter .5s,opacity .5s,transform .5s}
.studio-card.awake .studio-pic{filter:none;opacity:1;transition:filter .35s,opacity .35s,transform .35s}
.studio-zz{position:absolute;top:6%;right:8%;font:600 clamp(28px,5vh,44px) Fredoka,system-ui,sans-serif;color:#9b7bb0;pointer-events:none}
.studio-zz i,.studio-zz b{font-style:normal;font-weight:600;display:inline-block}
.studio-card.asleep .studio-zz{animation:studio-zz 2.4s ease-in-out infinite}
.studio-card.asleep .studio-zz i{animation:studio-zz 2.4s .4s ease-in-out infinite;font-size:.8em}
.studio-card.asleep .studio-zz b{animation:studio-zz 2.4s .8s ease-in-out infinite;font-size:.62em}
.studio-card.awake .studio-zz{display:none}
@keyframes studio-zz{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(-10px);opacity:1}}
.studio-sound{position:absolute;top:-6%;right:-8%;background:var(--studio-sun);color:#4a3100;font:600 clamp(18px,3.2vh,28px) Fredoka,system-ui,sans-serif;padding:6px 16px;border-radius:22px 22px 22px 6px;box-shadow:0 4px 0 #c99a2e;transform:scale(0) rotate(-8deg);transform-origin:bottom left;pointer-events:none}
.studio-card.awake .studio-sound{animation:studio-pop .45s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes studio-pop{to{transform:scale(1) rotate(-4deg)}}
.studio-sparks{position:absolute;inset:0;pointer-events:none}
.studio-sparks i{position:absolute;left:50%;top:50%;width:14px;height:14px;border-radius:50%;background:var(--studio-sun);opacity:0}
.studio-card.waking .studio-sparks i,.studio-card.acting .studio-sparks i{animation:studio-spark .8s ease-out forwards}
.studio-sparks i:nth-child(1){--dx:-140%;--dy:-120%}.studio-sparks i:nth-child(2){--dx:130%;--dy:-130%}.studio-sparks i:nth-child(3){--dx:170%;--dy:10%}.studio-sparks i:nth-child(4){--dx:-170%;--dy:20%}.studio-sparks i:nth-child(5){--dx:-60%;--dy:150%;background:#e2634e}.studio-sparks i:nth-child(6){--dx:80%;--dy:140%;background:#8ec6bf}
@keyframes studio-spark{0%{opacity:1;transform:translate(-50%,-50%) scale(.4)}100%{opacity:0;transform:translate(calc(-50% + var(--dx)*2.2),calc(-50% + var(--dy)*2.2)) scale(1.4)}}
.studio-card.waking{animation:studio-wake .55s cubic-bezier(.3,1.5,.5,1)}
@keyframes studio-wake{0%{transform:scale(.92)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
.studio-card.nudge{animation:studio-nudge .5s}
@keyframes studio-nudge{25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}
.studio-card.done{animation:studio-done .7s ease-in forwards}
@keyframes studio-done{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(.4) translateY(-60%);opacity:0}}

/* what each picture does when it wakes (twice for its word, three times for its sentence) */
.studio-card.awake .studio-pic svg,.studio-friend svg{animation-duration:.9s;animation-timing-function:ease-in-out;animation-iteration-count:2;transform-origin:50% 80%}
.studio-card.acting .studio-pic svg{animation-iteration-count:3}
.move-stomp.awake .studio-pic svg,.studio-friend.move-stomp svg{animation-name:studio-stomp}
.move-trumpet.awake .studio-pic svg,.studio-friend.move-trumpet svg{animation-name:studio-trumpet}
.move-stretch.awake .studio-pic svg,.studio-friend.move-stretch svg{animation-name:studio-stretch}
.move-fly.awake .studio-pic svg,.studio-friend.move-fly svg{animation-name:studio-fly}
.move-push.awake .studio-pic svg,.studio-friend.move-push svg{animation-name:studio-push}
.move-lift.awake .studio-pic svg,.studio-friend.move-lift svg{animation-name:studio-lift}
.move-flip.awake .studio-pic svg,.studio-friend.move-flip svg{animation-name:studio-flip}
.move-draw.awake .studio-pic svg,.studio-friend.move-draw svg{animation-name:studio-draw}
.move-glint.awake .studio-pic svg,.studio-friend.move-glint svg{animation-name:studio-glint}
.move-flag.awake .studio-pic svg,.studio-friend.move-flag svg{animation-name:studio-flag}
.move-hop.awake .studio-pic svg,.studio-friend.move-hop svg{animation-name:studio-hop}
.move-pop.awake .studio-pic svg,.studio-friend.move-pop svg{animation-name:studio-popit}
.move-scrub.awake .studio-pic svg,.studio-friend.move-scrub svg{animation-name:studio-scrub}
.move-swim.awake .studio-pic svg,.studio-friend.move-swim svg{animation-name:studio-swim}
.move-wave.awake .studio-pic svg,.studio-friend.move-wave svg{animation-name:studio-wave}
.move-wobble.awake .studio-pic svg,.studio-friend.move-wobble svg{animation-name:studio-wobble}
.move-stir.awake .studio-pic svg,.studio-friend.move-stir svg{animation-name:studio-stir}
.move-twinkle.awake .studio-pic svg,.studio-friend.move-twinkle svg{animation-name:studio-twinkle}
.move-slither.awake .studio-pic svg,.studio-friend.move-slither svg{animation-name:studio-slither}
@keyframes studio-stomp{0%,100%{transform:none}20%{transform:translateY(-8%) rotate(-5deg)}40%{transform:translateY(0) rotate(0) scaleY(.94)}60%{transform:translateY(-8%) rotate(5deg)}80%{transform:scaleY(.94)}}
@keyframes studio-trumpet{0%,100%{transform:none}30%{transform:rotate(-8deg) scale(1.06)}60%{transform:rotate(6deg) scale(1.08)}}
@keyframes studio-stretch{0%,100%{transform:none}50%{transform:scaleY(1.16) translateY(-4%)}}
@keyframes studio-fly{0%,100%{transform:none}25%{transform:translateY(-14%) rotate(-6deg)}50%{transform:translateY(-18%) rotate(4deg)}75%{transform:translateY(-10%) rotate(-3deg)}}
@keyframes studio-push{0%,100%{transform:none}35%{transform:translateX(9%)}55%{transform:translateX(9%) rotate(-3deg)}}
@keyframes studio-lift{0%,100%{transform:none}45%,60%{transform:translateY(-12%)}}
@keyframes studio-flip{0%{transform:none}100%{transform:rotateY(360deg)}}
@keyframes studio-draw{0%,100%{transform:none}25%{transform:rotate(-12deg) translateX(-6%)}50%{transform:rotate(8deg) translateX(6%)}75%{transform:rotate(-8deg)}}
@keyframes studio-glint{0%,100%{filter:none}50%{filter:brightness(1.35) drop-shadow(0 0 10px #fff6c9)}}
@keyframes studio-flag{0%,100%{transform:none}50%{transform:scale(1.08) translateY(-4%)}}
@keyframes studio-hop{0%,100%{transform:none}15%{transform:scale(1.08,.9)}45%{transform:translateY(-22%) scale(.95,1.06)}75%{transform:scale(1.08,.92)}}
@keyframes studio-popit{0%,100%{transform:none}40%{transform:scale(1.14)}70%{transform:scale(.96)}}
@keyframes studio-scrub{0%,100%{transform:none}20%,60%{transform:translateX(-7%) rotate(-4deg)}40%,80%{transform:translateX(7%) rotate(4deg)}}
@keyframes studio-swim{0%,100%{transform:none}25%{transform:translateX(-8%) rotate(-6deg)}75%{transform:translateX(8%) rotate(6deg)}}
@keyframes studio-wave{0%,100%{transform:none}25%{transform:rotate(-7deg)}50%{transform:rotate(6deg)}75%{transform:rotate(-4deg)}}
@keyframes studio-wobble{0%,100%{transform:none}25%{transform:rotate(-9deg)}75%{transform:rotate(9deg)}}
@keyframes studio-stir{0%{transform:none}100%{transform:rotate(360deg)}}
@keyframes studio-twinkle{0%,100%{transform:none;filter:none}50%{transform:rotate(36deg) scale(1.15);filter:drop-shadow(0 0 12px #ffe27a)}}
@keyframes studio-slither{0%,100%{transform:none}25%{transform:skewX(12deg) translateX(-4%)}75%{transform:skewX(-12deg) translateX(4%)}}

/* ---- the beats ---------------------------------------------------------------------- */
.studio-beats{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;transition:gap .35s}
.studio-beats.merged{gap:2px}
.studio-beat{min-width:clamp(62px,9vh,86px);min-height:clamp(56px,8vh,76px);padding:6px 16px;border-radius:24px;border:3px solid #d7b7e2;background:#fffdf6;color:var(--studio-plum);font:600 clamp(22px,3.6vh,32px) Fredoka,system-ui,sans-serif;box-shadow:0 5px 0 #d7b7e2;transition:background .15s,color .15s,border-color .15s,transform .12s}
.studio-beat.next{animation:studio-next 1.3s ease-in-out infinite}
@keyframes studio-next{0%,100%{box-shadow:0 5px 0 #d7b7e2,0 0 0 0 rgba(116,69,145,.35)}50%{box-shadow:0 5px 0 #d7b7e2,0 0 0 12px rgba(116,69,145,0)}}
.studio-beat.lit{background:var(--studio-sun);border-color:#c99a2e;color:#4a3100;box-shadow:0 5px 0 #c99a2e;transform:translateY(-4px)}
.studio-beat.tapped{background:var(--studio-plum);border-color:var(--studio-plum);color:#fffdf5;box-shadow:0 5px 0 #4e2a66}
.studio-beat.bounce{animation:studio-bounce .32s}
@keyframes studio-bounce{40%{transform:translateY(-10px) scale(1.08)}}
.studio-beat.bump{transform:translateY(-8px) scale(1.06)}
.studio-beat.heard{background:var(--studio-heard);border-color:var(--studio-heard);color:#fff;box-shadow:0 5px 0 #1d6440}

/* ---- the word or sentence ------------------------------------------------------------- */
.studio-words{margin:0;font:600 clamp(30px,6vh,56px)/1.15 Fredoka,system-ui,sans-serif;letter-spacing:-.5px;color:var(--studio-ink);text-align:center}
.studio-words.sentence{font-size:clamp(24px,4.4vh,40px);max-width:24ch}
.studio-words .w{display:inline-block;padding:0 4px;border-radius:12px;transition:background .2s,color .2s}
.studio-words .w.focus{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px;text-decoration-color:#d7b7e2}
.studio-words .w.now{background:#fff1bf}
.studio-words .w.said{background:var(--studio-heard);color:#fff}
.studio-words .w.mystery{min-width:1.4em;background:#fffdf6;border:3px dashed #d7b7e2;color:var(--studio-plum)}
[data-phase=model] .studio-words .w.said{background:#fff1bf;color:inherit}

/* ---- the child's turn ------------------------------------------------------------------- */
.studio-mic{--level:0;position:relative;width:clamp(96px,16vh,132px);height:clamp(96px,16vh,132px);border-radius:50%;display:grid;place-items:center;background:#e9e4d6;color:#7a8b80;transition:background .25s,color .25s}
.studio-ring{position:absolute;inset:-8px;border-radius:50%;border:6px solid currentColor;opacity:.25;transform:scale(1);transition:transform .08s linear,opacity .2s}
.studio-mic-icon svg{width:44%;height:auto;min-width:40px}
.studio-mic-icon{display:grid;place-items:center;width:100%;height:100%}
.studio-mic[data-state=connecting]{animation:studio-breathe 1.2s ease-in-out infinite}
.studio-mic[data-state=ready]{background:#dcefe8;color:var(--studio-mint)}
.studio-mic[data-state=listening]{background:#bd5036;color:#fffdf5}
.studio-mic[data-state=listening] .studio-ring,.studio-mic[data-state=hearing] .studio-ring{opacity:.55;transform:scale(calc(1 + var(--level) * .7))}
.studio-mic[data-state=listening] .studio-ring{color:#bd5036}
.studio-mic[data-state=hearing]{background:var(--studio-heard);color:#fff}
.studio-mic[data-state=hearing] .studio-ring{color:var(--studio-heard)}
.studio-mic[data-state=checking]{background:var(--studio-heard);color:#fff;animation:studio-breathe .8s ease-in-out infinite}
@keyframes studio-breathe{50%{transform:scale(.94)}}
.studio-cue{margin:0;min-height:1.3em;font:500 clamp(20px,3.2vh,28px)/1.25 Fredoka,system-ui,sans-serif;color:var(--studio-ink)}
[data-phase=turn] .studio-cue{color:#9f342b}
.studio-echo{display:flex;gap:12px}
.studio-echo-btn{display:flex;flex-direction:column;align-items:center;gap:2px;width:82px;padding:8px 6px;border-radius:22px;border:2px solid #dbcda5;background:#fff8e5;box-shadow:0 4px 0 #e0d3b1;font-size:15px}
.studio-echo-btn svg{width:42px;height:42px}

/* ---- the grown-up's strip ---------------------------------------------------------------- */
.studio-grownup{font:14px/1.45 system-ui,sans-serif;color:#556659;background:#fffaf0;border:1px dashed #cbd5c6;border-radius:18px;padding:0 14px}
.studio-grownup summary{cursor:pointer;min-height:40px;display:flex;align-items:center;font-weight:600;color:#435d4c}
.studio-grownup-body{padding:0 0 12px}
.studio-grownup-body p{margin:4px 0 10px}
.studio-adult{display:flex;flex-wrap:wrap;gap:8px}
.studio-adult .secondary{min-height:44px;font-size:15px}

/* ---- the finish --------------------------------------------------------------------------- */
.studio-finish-body{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;min-height:0;text-align:center}
.studio-finish-body h1{margin:0;font:600 clamp(30px,5vh,48px) Fredoka,system-ui,sans-serif;color:var(--studio-ink)}
.studio-friends{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;width:min(100%,640px)}
.studio-friend{display:flex;flex-direction:column;align-items:center;gap:4px;background:#fffdf6;border-radius:24px;padding:10px;box-shadow:0 5px 0 #d7b7e2;font-size:18px;animation:studio-pop-in .5s calc(var(--i) * .12s) both cubic-bezier(.3,1.5,.5,1)}
.studio-friend svg{width:clamp(64px,12vh,110px);height:auto;animation-iteration-count:infinite!important;animation-duration:1.6s!important}
.studio-friend b{font-weight:500}
@keyframes studio-pop-in{from{transform:scale(0);opacity:0}}
.studio-finish-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}

/* ---- phones and portrait tablets: one column ------------------------------------------------ */
@media (orientation:portrait),(max-width:700px){
  .studio-body{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;align-items:stretch;border-radius:26px;gap:10px}
  .studio-card{width:auto;height:100%;max-height:min(100%,42vh);max-width:100%}
  .studio-right{gap:10px}
  .studio-turn{flex-direction:row;justify-content:center;gap:12px;min-height:84px}
  .studio-turn .studio-cue{text-align:left;max-width:60%}
}
@media (max-width:420px){
  .studio-beat{min-width:58px;min-height:52px;font-size:22px;padding:4px 12px}
  .studio-mic{width:80px;height:80px}
  .studio-mouth{width:68px;height:68px}
  .studio-friends{gap:8px}
}
/* landscape phones: picture beside everything else, smaller */
@media (orientation:landscape) and (max-height:520px){
  .say-studio{gap:6px}
  .studio-body{padding:8px 14px;border-radius:22px}
  .studio-card{width:auto;height:min(62vh,230px)}
  .studio-words{font-size:clamp(24px,8vh,40px)}
  .studio-right{gap:8px}
  .studio-turn{flex-direction:row}
  .studio-mic{width:72px;height:72px}
  .studio-mouth{width:60px;height:60px}
  .studio-grownup summary{min-height:30px}
}
/* calm motion */
html.quiet .say-studio *,.say-studio[data-quiet=true] *{animation-duration:.01ms!important;animation-iteration-count:1!important}
@media (prefers-reduced-motion:reduce){.say-studio *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}