/* ===========================================================================
   Movie Studio — layout, character rig animation, scenes, theater.
   Purple + gold belongs to the STUDIO CHROME only; the movie sets are their
   own bright, dimensional worlds.
   =========================================================================== */
:root{
  --gold:#f7c948; --gold-d:#c9962a; --violet:#3b2450; --violet-d:#241436;
  --plum:#5a3a78; --ink:#2a1b33; --cream:#fff7e6; --red:#b3202b;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; height:100%; }
body{
  font-family:"Trebuchet MS",Arial,sans-serif; color:var(--ink);
  background:radial-gradient(circle at 50% -10%,#6b4592,#150d1f 70%);
  overflow:hidden;
}
button{ font:inherit; cursor:pointer; } button:disabled{ cursor:default; }
svg{ display:block; }

/* ── shell ─────────────────────────────────────────────────────────────── */
.app{
  position:relative; overflow:hidden;
  height:100dvh; min-height:100dvh; display:flex; flex-direction:column; gap:8px;
  padding:8px clamp(8px,1.4vw,18px) 10px; max-width:1600px; margin:0 auto;
}

/* ── top bar ───────────────────────────────────────────────────────────── */
.topbar{ flex:0 0 auto; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; }
.brand{
  justify-self:center; display:flex; align-items:center; gap:9px; padding:5px 18px 6px;
  color:#fff4d8; border:3px solid var(--gold); border-radius:14px; background:#2a1030d9;
  box-shadow:0 4px 0 #150720; font-size:clamp(12px,1.4vw,16px); font-weight:800; letter-spacing:.09em;
}
.brand svg{ width:22px; height:22px; }
.util{
  min-height:38px; padding:6px 12px; border:3px solid #ffe1a0; border-radius:12px;
  color:#3a2a17; background:#f7c948e8; box-shadow:0 4px 0 #b5842a; font-size:11px; font-weight:800;
}

/* ── horizontal storyboard ─────────────────────────────────────────────── */
.board{ flex:0 0 auto; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:clamp(4px,.7vw,10px); }
.frame{
  position:relative; display:flex; flex-direction:column; gap:4px; padding:6px 6px 5px;
  border:3px solid #6b4a8c; border-radius:14px; background:linear-gradient(#3a2352,#291640);
  box-shadow:0 4px 0 #1b0f2b;
}
.frame .cap{ min-width:0; display:flex; justify-content:space-between; align-items:center; color:#c9b3e0; font-size:10px; font-weight:800; letter-spacing:.08em; }
.frame .cap span{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.frame .cap b{ color:var(--gold); }
.frame .thumb{
  position:relative; overflow:hidden; height:clamp(30px,6.5vh,62px); aspect-ratio:16/9;
  width:auto; max-width:100%; margin:0 auto; border-radius:8px;
  background:#160d22; box-shadow:inset 0 0 0 2px #00000055;
}
.frame .thumb .scene{ position:absolute; inset:0; }
.frame .empty{ position:absolute; inset:0; display:grid; place-items:center; color:#7e6a97; font-size:clamp(9px,1vw,12px); font-weight:800; text-align:center; padding:4px; }
.frame.now{ border-color:var(--gold); box-shadow:0 4px 0 #1b0f2b,0 0 0 3px #f7c94855,0 0 20px #f7c94855; }
.frame.done .cap b::after{ content:" ✓"; color:#7fe08a; }
.frame.pop{ animation:framePop .5s cubic-bezier(.3,1.5,.6,1); }
@keyframes framePop{ 0%{transform:scale(.9)} 60%{transform:scale(1.04)} 100%{transform:scale(1)} }
.arrow{ position:absolute; right:-10px; top:50%; z-index:2; width:0; height:0; transform:translateY(-50%);
  border-left:11px solid var(--gold); border-top:8px solid transparent; border-bottom:8px solid transparent;
  filter:drop-shadow(0 2px 0 #1b0f2b); }
.frame:last-child .arrow{ display:none; }

/* ── the live set ──────────────────────────────────────────────────────── */
.stagewrap{ position:relative; flex:1 1 auto; min-height:0; }
.scene{
  position:absolute; inset:0; overflow:hidden; border-radius:16px; background:#0d0716;
  box-shadow:0 8px 0 #150720, inset 0 0 0 3px #00000044;
  --pan:0px;
}
/* supplied illustrated background, never stretched */
.scene .scene-background{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 62%; }
.scene .stage{ }
.screenbox.loading::after,.stagewrap.loading::after{ content:"Loading the set…"; position:absolute; inset:0; z-index:40; display:grid; place-items:center; color:#c9b3e0; background:#1b1028; font-weight:800; letter-spacing:.08em; }
.scene .cam{ position:absolute; inset:0; transform:scale(var(--zoom,1)); transform-origin:50% 62%; transition:transform var(--camms,1200ms) ease-in-out; }
.scene .lyr{ position:absolute; inset:0 -8%; transition:transform var(--camms,1200ms) ease-in-out; }
.scene .lyr svg{ width:100%; height:100%; }
.scene .lyr.sky { transform:translateX(calc(var(--pan) * .10)); }
.scene .lyr.back{ transform:translateX(calc(var(--pan) * .30)); }
.scene .lyr.mid { transform:translateX(calc(var(--pan) * .62)); }
.scene .lyr.gnd { inset:auto -8% -4% -8%; height:30%; }
.scene .lyr.fore{ transform:translateX(calc(var(--pan) * 1.5)); z-index:6; pointer-events:none; }
.scene .stage{ position:absolute; inset:0; z-index:4; transform:translateX(var(--pan)); transition:transform var(--camms,1200ms) ease-in-out; }

.scene .setEmpty{ position:absolute; inset:0; z-index:8; display:grid; place-items:center; text-align:center; padding:18px;
  color:#c9b3e0; font-size:clamp(13px,1.7vw,20px); font-weight:800; background:linear-gradient(#2a1b3d,#170e26); }

/* the door built into every setting */
.s-door{ transform-box:fill-box; transform-origin:left center; transition:transform 1.1s cubic-bezier(.4,0,.2,1); }
.scene.doorOpen .s-door{ transform:perspective(400px) rotateY(-78deg); }
.doorGlow{ position:absolute; z-index:3; left:72%; bottom:12%; width:16%; aspect-ratio:1; transform:translateX(-50%); border-radius:50%;
  background:radial-gradient(#fff8c8,#ffd54a00 70%); opacity:0; transition:opacity .5s; }
.scene.doorOpen .doorGlow{ opacity:1; }

/* ── actors ────────────────────────────────────────────────────────────── */
/* ONE wrapper per character. Everything that moves the character moves this. */
.character-rig{
  position:absolute; bottom:var(--ground,10%); left:20%; height:var(--rigH,29%);
  transform:translateX(-50%); transition:left var(--mv,1100ms) linear, bottom .5s ease-out, opacity .4s;
}
/* the complete character lives in one motion layer: sprite + effect + held prop
   all move together, so nothing can ever come apart */
.character-rig .rig-motion{ position:absolute; inset:0; transform-origin:50% 90.1%; }
/* the transparent effect sits BEHIND the character, sharing its centre */
.character-rig .action-effect{
  position:absolute; left:50%; top:50%; width:132%; height:132%;
  transform:translate(-50%,-50%); object-fit:contain; pointer-events:none; z-index:0;
}
.character-rig .action-effect[hidden]{ display:none; }
.character-rig .character-sprite{ z-index:1; }
.character-rig .held-prop{ z-index:2; }
.character-rig .character-sprite{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; object-position:center bottom; pointer-events:none;
  filter:drop-shadow(0 6px 5px rgba(0,0,0,.28));
}
/* the held object sits between the hands at the artist's anchor */
.character-rig .held-prop{
  position:absolute; width:34%; left:52%; top:43%;
  transform:translate(-50%,-50%); object-fit:contain; pointer-events:none;
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.3));
}
.character-rig .held-prop[hidden]{ display:none; }
.character-rig.flip{ transform:translateX(-50%) scaleX(-1); }
.character-rig .rig,.character-rig .art-img{ height:100%; width:auto; display:block; }
.character-rig .art-img{ object-fit:contain; object-position:bottom center; }
/* the dragon is a wide image; contain it in BOTH directions so horns, wings,
   feet and tail all stay visible wherever it appears */
.character-rig.creature{ aspect-ratio:1; }
.character-rig.creature .art-img{ width:100%; height:100%; object-fit:contain; object-position:bottom center; }
.pick .art .character-rig.creature{ width:100%; height:100%; }
.character-rig.hidden{ opacity:0; }
.character-rig .held{ position:absolute; left:78%; top:52%; height:38%; transform:translate(-50%,-50%); opacity:0; pointer-events:none; }
.character-rig .held svg,.character-rig .held .art-img{ height:100%; width:auto; object-fit:contain; }
.character-rig.holding .held{ opacity:1; }
.character-rig.hold .held-prop,.character-rig.holding .held-prop{ opacity:1; }
/* Scene prop: the manifest's width % is a share of stage WIDTH, but the stage is
   far wider than it is tall, so a square prop sized that way stood TALLER than
   the actor (character rigs are --rigH, 29% of stage height). --propH caps the
   height so props stay believably smaller than the character on any aspect
   ratio; object-fit:contain keeps them whole — never cropped, never stretched. */
.pr,.scene-prop{ position:absolute; bottom:var(--ground,10%); width:17%; height:var(--propH,19%);
  transform:translateX(-50%); transition:left .8s ease-in-out, bottom .6s, opacity .4s; }
/* "and all the lights went out!" — the whole set drops to emergency light and
   comes back when the story says it is fixed */
.scene .cam{ transition:transform var(--camms,1200ms) ease-in-out, filter 900ms ease-in-out; }
.scene.lights-out .cam{ filter:brightness(.42) saturate(.75) contrast(1.05); }
/* something the story says has toppled over lies on its side, and is set
   upright again when the cast lifts it */
.pr.tipped img.prop-img{ transform:rotate(-74deg); transform-origin:50% 88%; }
.pr img.prop-img{ transition:transform 900ms cubic-bezier(.4,0,.2,1); }
/* an object in someone's hands rides in front of them */
.pr.carried{ z-index:12; }
/* the opening shot is placed while the scene is already in the page (so widths
   can be measured) — this stops that first placement animating */
.scene.staging .pr,.scene.staging .character-rig{ transition:none!important; }
/* the storyline cards are picture cards: their icon has to read across a room */
.goal-icon{ font-size:clamp(52px,9vw,104px); line-height:1.1; text-align:center; }
.pr img.prop-img,.pr svg{ width:100%; height:100%; display:block; object-fit:contain;
  object-position:bottom center;
  filter:drop-shadow(0 6px 5px rgba(0,0,0,.28)); }

/* the restrained per-prop motion the artist specified */
@keyframes fxFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9%)} }
@keyframes fxPop   { 0%{transform:scale(.86)} 60%{transform:scale(1.06)} 100%{transform:scale(1)} }
@keyframes fxSway  { 0%,100%{transform:rotate(-5deg)} 50%{transform:rotate(5deg)} }
@keyframes fxBounce{ 0%,100%{transform:translateY(0)} 25%{transform:translateY(-14%)} 50%{transform:translateY(0)} 70%{transform:translateY(-6%)} 85%{transform:translateY(0)} }
@keyframes fxStrum { 0%,100%{transform:translateX(0) rotate(0)} 50%{transform:translateX(3%) rotate(2deg)} }
@keyframes fxCuddle{ 0%,100%{transform:rotate(-3deg)} 50%{transform:rotate(3deg)} }
@keyframes fxGlow  { 0%,100%{filter:drop-shadow(0 6px 5px rgba(0,0,0,.28))} 50%{filter:drop-shadow(0 6px 5px rgba(0,0,0,.28)) drop-shadow(0 -6px 14px rgba(255,214,120,.85))} }
@keyframes fxRoll  { 0%,100%{transform:translateX(-4%)} 50%{transform:translateX(4%)} }
.pr.fx-float  img{ animation:fxFloat 3.2s ease-in-out infinite; }
.pr.fx-pop    img{ animation:fxPop .55s cubic-bezier(.3,1.5,.6,1); }
.pr.fx-sway   img{ animation:fxSway 3s ease-in-out infinite; transform-origin:50% 15%; }
.pr.fx-bounce img{ animation:fxBounce 2.4s ease-in-out infinite; }
.pr.fx-strum  img{ animation:fxStrum 1.4s ease-in-out infinite; }
.pr.fx-cuddle img{ animation:fxCuddle 2.8s ease-in-out infinite; }
.pr.fx-candleGlow img{ animation:fxGlow 2.6s ease-in-out infinite; }
.pr.fx-roll   img{ animation:fxRoll 2.6s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce){ .pr img{ animation:none!important; } }
.pr.hidden{ opacity:0; }
.pr.bobbing svg{ animation:propBob 2.2s ease-in-out infinite; }
@keyframes propBob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

/* chest: the lid hinges at the back; the treasure and its glow live INSIDE the
   chest svg, so the glow can never drift away from the chest it belongs to */
.pr .p-lid{ transform-box:fill-box; transform-origin:88% 100%; transition:transform .9s cubic-bezier(.4,0,.2,1); }
.pr.open .p-lid{ transform:rotate(-104deg); }
.pr .p-treasure,.pr .p-treasureGlow{ transition:opacity .6s; }
.pr.open .p-treasure{ opacity:1; }
.pr.open .p-treasureGlow{ opacity:1; animation:glowPulse 2.4s ease-in-out infinite; }

/* illustrated (PNG) characters animate as one piece — no limbs to drive */
.character-rig.walk .art-img,.character-rig.run .art-img{ animation:bob .3s ease-in-out infinite; }
.character-rig.jump .art-img{ animation:jumpUp .85s cubic-bezier(.3,.05,.4,1) infinite; }
.character-rig.celebrate .art-img{ animation:hop .55s ease-in-out infinite; }
.character-rig.react .art-img{ animation:reactBack 1s ease-out; }
.character-rig.idle .art-img{ animation:breathe 3s ease-in-out infinite; }
.p-glow{ animation:glowPulse 2.4s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
@keyframes glowPulse{ 0%,100%{opacity:.55;transform:scale(.92)} 50%{opacity:1;transform:scale(1.06)} }

/* ── the rig: named parts, real joints ─────────────────────────────────── */
svg.rig{ transform:none!important; }                       /* travel belongs to the wrapper */
.rig .p-root{ transform-box:fill-box; transform-origin:50% 100%; }
.rig .p-legL,.rig .p-legR,.rig .p-armL,.rig .p-armR{ transform-box:fill-box; transform-origin:top center; }
.rig .p-head,.rig .p-torso,.rig .p-tail{ transform-box:fill-box; transform-origin:bottom center; }
.rig .p-eyeL,.rig .p-eyeR,.rig .p-mouth,.rig .p-wings,.rig .p-lid{ transform-box:fill-box; transform-origin:center; }
.rig .p-lid{ transform-origin:bottom center; }

@keyframes swA{ 0%,100%{transform:rotate(24deg)} 50%{transform:rotate(-24deg)} }
@keyframes swB{ 0%,100%{transform:rotate(-24deg)} 50%{transform:rotate(24deg)} }
@keyframes bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }

/* idle */
.character-rig.idle .p-root{ animation:breathe 3s ease-in-out infinite; }
@keyframes breathe{ 0%,100%{transform:translateY(0) scaleY(1)} 50%{transform:translateY(-2px) scaleY(1.012)} }
.character-rig.idle .p-head{ animation:lookAbout 5s ease-in-out infinite; }
@keyframes lookAbout{ 0%,100%{transform:rotate(0)} 30%{transform:rotate(-7deg)} 65%{transform:rotate(7deg)} }

/* walk */
.character-rig.walk .p-legL{ animation:swA .58s ease-in-out infinite; }
.character-rig.walk .p-legR{ animation:swB .58s ease-in-out infinite; }
.character-rig.walk .p-armL{ animation:swB .58s ease-in-out infinite; }
.character-rig.walk .p-armR{ animation:swA .58s ease-in-out infinite; }
.character-rig.walk .p-root{ animation:bob .29s ease-in-out infinite; }

/* run */
.character-rig.run .p-legL{ animation:swA .3s linear infinite; }
.character-rig.run .p-legR{ animation:swB .3s linear infinite; }
.character-rig.run .p-armL{ animation:swB .3s linear infinite; }
.character-rig.run .p-armR{ animation:swA .3s linear infinite; }
.character-rig.run .p-torso{ transform:rotate(9deg); }
.character-rig.run .p-root{ animation:bob .15s ease-in-out infinite; }

/* jump */
.character-rig.jump .p-root{ animation:jumpUp .85s cubic-bezier(.3,.05,.4,1) infinite; }
@keyframes jumpUp{ 0%,100%{transform:translateY(0) scaleY(1)} 18%{transform:translateY(4px) scaleY(.9)} 45%{transform:translateY(-46px) scaleY(1.06)} 72%{transform:translateY(0) scaleY(.94)} }
.character-rig.jump .p-legL{ animation:tuckA .85s ease-in-out infinite; }
.character-rig.jump .p-legR{ animation:tuckB .85s ease-in-out infinite; }
@keyframes tuckA{ 0%,100%{transform:rotate(0)} 45%{transform:rotate(-26deg)} }
@keyframes tuckB{ 0%,100%{transform:rotate(0)} 45%{transform:rotate(22deg)} }
.character-rig.jump .p-armL,.character-rig.jump .p-armR{ animation:armsUpJ .85s ease-in-out infinite; }
@keyframes armsUpJ{ 0%,100%{transform:rotate(0)} 45%{transform:rotate(-150deg)} }

/* carrying — both arms held forward, prop pinned to the hands */
.character-rig.carry .p-armL{ transform:rotate(-74deg); animation:none; }
.character-rig.carry .p-armR{ transform:rotate(-84deg); animation:none; }
.character-rig.carry .held{ left:74%; top:44%; }

/* reaching / opening */
.character-rig.open .p-armR{ animation:reachOut 1.6s ease-in-out; }
@keyframes reachOut{ 0%{transform:rotate(0)} 30%{transform:rotate(-96deg)} 62%{transform:rotate(-104deg)} 100%{transform:rotate(-96deg)} }
.character-rig.open .p-torso{ animation:leanIn 1.6s ease-in-out; }
@keyframes leanIn{ 0%,100%{transform:rotate(0)} 50%{transform:rotate(-7deg)} }
.character-rig.open .held{ left:96%; top:26%; }

/* reacting — the "whoa!" beat */
.character-rig.react .p-root{ animation:reactBack 1s ease-out; }
@keyframes reactBack{ 0%{transform:translateX(0) rotate(0)} 30%{transform:translateX(10px) rotate(7deg)} 60%{transform:translateX(-4px) rotate(-3deg)} 100%{transform:translateX(0) rotate(0)} }
.character-rig.react .p-eyeL,.character-rig.react .p-eyeR{ animation:eyesWide 1s ease-out; }
@keyframes eyesWide{ 0%,100%{transform:scale(1)} 40%{transform:scale(1.5)} }
.character-rig.react .p-mouth{ animation:mouthOh 1s ease-out; }
@keyframes mouthOh{ 0%,100%{transform:scale(1)} 40%{transform:scale(1.1,2.4)} }
.character-rig.react .p-armL{ animation:flingA 1s ease-out; }
.character-rig.react .p-armR{ animation:flingB 1s ease-out; }
@keyframes flingA{ 0%,100%{transform:rotate(0)} 45%{transform:rotate(48deg)} }
@keyframes flingB{ 0%,100%{transform:rotate(0)} 45%{transform:rotate(-48deg)} }

/* kneel down to the prop — whole body drops, legs fold, torso leans in */
.character-rig.kneel .p-root{ animation:kneelDown 1s ease-out forwards; }
@keyframes kneelDown{ 0%{transform:translateY(0)} 100%{transform:translateY(9%) scaleY(.93)} }
.character-rig.kneel .p-legL{ transform:rotate(-16deg); } .character-rig.kneel .p-legR{ transform:rotate(13deg); }
.character-rig.kneel .p-torso{ transform:rotate(-9deg); }
.character-rig.kneel .p-armR{ animation:reachOut 1.6s ease-in-out forwards; }

/* holding the treasure up to look at it */
.character-rig.hold .p-armR{ transform:rotate(-116deg); }
.character-rig.hold .p-armL{ transform:rotate(18deg); }
.character-rig.hold .held{ left:98%; top:14%; }
.character-rig.hold .p-root{ animation:breathe 3s ease-in-out infinite; }

/* celebrate */
.character-rig.celebrate .p-root{ animation:hop .55s ease-in-out infinite; }
@keyframes hop{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-18px)} }
.character-rig.celebrate .p-armL{ animation:cheerA .55s ease-in-out infinite; }
.character-rig.celebrate .p-armR{ animation:cheerB .55s ease-in-out infinite; }
@keyframes cheerA{ 0%,100%{transform:rotate(-140deg)} 50%{transform:rotate(-168deg)} }
@keyframes cheerB{ 0%,100%{transform:rotate(140deg)} 50%{transform:rotate(168deg)} }
.character-rig.celebrate .p-mouth{ transform:scale(1.25,1.6); }

/* trip — the silly accident */
.character-rig.trip .p-root{ animation:tripOver 1.5s ease-in-out forwards; }
@keyframes tripOver{ 0%{transform:rotate(0) translateY(0)} 25%{transform:rotate(-22deg) translateY(6px)} 55%{transform:rotate(-78deg) translateY(26px)} 78%{transform:rotate(-70deg) translateY(26px)} 100%{transform:rotate(-72deg) translateY(26px)} }
.character-rig.trip .p-legL{ transform:rotate(38deg); } .character-rig.trip .p-legR{ transform:rotate(-30deg); }

/* dragon flap */
.character-rig.flap .p-wings{ animation:flap .5s ease-in-out infinite; }
@keyframes flap{ 0%,100%{transform:scaleY(1) translateY(0)} 50%{transform:scaleY(.6) translateY(-6px)} }
.character-rig.sneeze .p-head{ animation:sneezeA .9s ease-in-out; }
@keyframes sneezeA{ 0%{transform:rotate(0)} 35%{transform:rotate(-24deg) translateY(-6px)} 60%{transform:rotate(20deg) translateY(6px)} 100%{transform:rotate(0)} }

/* speech bubble */
.bub{
  position:absolute; z-index:9; left:50%; top:5%; width:min(62%,760px); aspect-ratio:1600/600;
  transform:translateX(-50%) scale(.6); opacity:0;
  transition:opacity 250ms, transform 250ms cubic-bezier(.34,1.6,.6,1);
}
.bub .bubble-art{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; }
/* the cream safe area measured from the artwork */
.bub .bubble-text{
  position:absolute; left:16.3%; right:17.2%; top:16.5%; height:60.3%;
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:#2a1b33; font:700 clamp(11px,1.9vw,25px)/1.2 Georgia,serif;
  overflow:hidden; hyphens:auto;
}
.bub.on{ opacity:1; transform:translateX(-50%) scale(1); }


/* scene fx: sparkles, confetti, flash */
.fx{ position:absolute; inset:0; z-index:8; pointer-events:none; overflow:hidden; }
.spark{ position:absolute; width:14px; height:14px; border-radius:50%; background:radial-gradient(#fff,#ffd54a00 70%); animation:sparkFly 1.4s ease-out forwards; }
@keyframes sparkFly{ 0%{opacity:0;transform:translate(0,0) scale(.3)} 20%{opacity:1} 100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.5)} }
.flash{ position:absolute; inset:0; background:#fff; opacity:0; }
.flash.go{ animation:flashGo .6s ease-out; }
@keyframes flashGo{ 0%{opacity:0} 15%{opacity:.85} 100%{opacity:0} }
.wipe{ position:absolute; inset:0; z-index:20; background:#0d0716; opacity:0; pointer-events:none; }
.wipe.go{ animation:wipeGo 900ms ease-in-out; }
@keyframes wipeGo{ 0%{opacity:0} 45%{opacity:1} 100%{opacity:0} }
.conf i{ position:absolute; top:-20px; width:10px; height:18px; border-radius:3px; background:var(--gold); animation:cfall 2.6s linear infinite; }
.conf i:nth-child(3n){ background:#e0651f } .conf i:nth-child(3n+1){ background:#68c46a } .conf i:nth-child(4n){ background:#7fd8ff } .conf i:nth-child(odd){ transform:rotate(35deg) }
@keyframes cfall{ to{ top:112%; transform:rotate(320deg);} }

/* ── word panel ────────────────────────────────────────────────────────── */
.panel{
  flex:0 0 auto; display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:clamp(8px,1.4vw,16px);
  padding:8px clamp(10px,1.4vw,16px); border:4px solid var(--gold-d); border-radius:18px;
  background:linear-gradient(135deg,#fffdf4,#f6e7c4); box-shadow:0 6px 0 #4a2c1c;
}
.wordpic{ width:clamp(72px,8vw,112px); aspect-ratio:1; overflow:hidden; display:grid; place-items:center;
  border:4px solid #ffe9b8; border-radius:16px; background:#d6f2fe; font-size:clamp(30px,4.4vw,52px); line-height:1; }
/* illustrated target from the shared picture bank */
.wordpic .target-picture{ width:100%; height:100%; object-fit:cover; border-radius:12px; background:#d6f2fe; }
.wordpic img{ max-width:100%; max-height:100%; object-fit:contain; }
.copy{ min-width:0; }
.copy .sub{ color:#a2761f; font-size:clamp(9px,1.1vw,12px); font-weight:800; letter-spacing:.1em; }
.copy .sub.go{ color:#3f9a45; }
.copy .word{ color:var(--red); font:800 clamp(20px,3vw,42px)/1.05 Georgia,serif; }
.copy .word em{ font-style:normal; color:#e0651f; text-decoration:underline; text-decoration-thickness:3px; }
.reps{ display:flex; gap:5px; margin-top:5px; }
.reps i{ width:clamp(14px,1.5vw,20px); aspect-ratio:1; border:3px solid #b5842a; border-radius:50%; background:#efe0bf; transition:transform .2s; }
.reps i.done{ border-color:#d9942a; background:radial-gradient(circle at 38% 32%,#ffe27a,#f0a721); box-shadow:0 0 0 2px #fff6cf; transform:scale(1.12); }
.acts{ display:flex; flex-direction:column; gap:5px; }
.said{ padding:12px 18px; color:#4a3210; border:3px solid #ffe9c9; border-radius:14px;
  background:linear-gradient(#f7c948,#d99e28); box-shadow:0 5px 0 #a5701f; font-weight:800; font-size:clamp(12px,1.4vw,16px); }
.said:active{ transform:translateY(3px); box-shadow:0 2px 0 #a5701f; }
.said:disabled{ color:#f3ead3; border-color:#ddd0b4; background:#b0a68d; box-shadow:0 5px 0 #786e57; }
.hearbtn{ padding:6px 10px; color:#5b3a17; border:3px solid #e6c98a; border-radius:11px; background:#fff3d3; font-size:11px; font-weight:800; }

/* ── choice tray: three big illustrated cards ──────────────────────────── */
.tray{
  position:absolute; z-index:30; inset:auto 0 0 0; padding:10px clamp(8px,1.4vw,16px) 12px;
  border:5px solid var(--gold); border-radius:20px; background:linear-gradient(#40295cf2,#2a1a3cf7);
  box-shadow:0 -8px 34px #00000077; transform:translateY(115%); transition:transform .45s cubic-bezier(.3,1.25,.6,1);
  backdrop-filter:blur(3px);
}
.tray.up{ transform:translateY(0); }
.tray h3{ margin:0 0 8px; text-align:center; color:var(--gold); font:800 clamp(13px,1.8vw,21px)/1 Georgia,serif; }
.picks{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(7px,1.2vw,14px); }
.pick{
  display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 6px 6px;
  color:var(--ink); border:4px solid #ffe1a0; border-radius:16px;
  background:linear-gradient(#fff8e6,#f0d9ab); box-shadow:0 5px 0 #8a5c22; font-weight:800;
}
.pick:active{ transform:translateY(3px); box-shadow:0 2px 0 #8a5c22; }
/* grid-template-rows:minmax(0,1fr) keeps the row the same height as the box.
   Without it the implicit row grows to the image's natural size, percentage
   max-height resolves against THAT, and every card image is cropped instead
   of scaled — which hid action icons and showed only the front of the chest. */
.pick .art{ position:relative; width:100%; height:clamp(120px,24vh,240px); display:grid; grid-template-rows:minmax(0,1fr); place-items:center; overflow:hidden; border-radius:10px; }
.pick .art svg{ height:100%; width:auto; }
/* A picture placed DIRECTLY on a card — prop, action icon, chest — is scaled to
   fit and never cropped. Scoped to direct children so that a full .character-rig
   (action and ending cards) keeps the stage layout its own rules give it. */
.pick .art > img{ max-height:100%; max-width:100%; width:auto; height:auto; object-fit:contain; }
/* A bare .rig-motion dropped straight on a card has no .character-rig ancestor,
   so the rules that would size it never match. Give it a definite box and let
   the sprite fit inside — without this a sprite rendered at its natural 1254px
   inside a 117px box and only one sliver of the character showed. */
.pick .art > .rig-motion{ position:relative; width:100%; height:100%; display:grid; grid-template-rows:minmax(0,1fr); place-items:center; }
.pick .art > .rig-motion img{ max-height:100%; max-width:100%; width:auto; height:auto; object-fit:contain; }
/* On the stage the effect is 132% of the rig so it haloes the character; inside
   a card that would spill past the edges, so rein it in to the art box. */
.pick .art .character-rig .action-effect{ width:100%; height:100%; }
.pick .art .scene{ position:absolute; inset:0; border-radius:10px; box-shadow:none; }
.pick .nm{ font-size:clamp(10px,1.3vw,15px); text-align:center; line-height:1.15; }
/* an actor used INSIDE a choice card, not on a stage */
/* width:100% matters: everything inside a rig is absolutely positioned, so with
   an auto width this collapsed to 0 and the ending cards rendered empty. */
.character-rig.inline{ position:relative; left:auto; bottom:auto; transform:none; width:100%; height:100%; display:grid; place-items:center; }
.character-rig.inline .p-root{ height:100%; width:auto; }
.character-rig.inline.flip{ transform:scaleX(-1); }
.pick .art .scene .setEmpty{ display:none; }
.pick.line{ justify-content:center; }
.pick.line .art{ height:auto; padding:6px 4px; }
.pick.line .quote{ font:italic 700 clamp(11px,1.5vw,18px)/1.3 Georgia,serif; text-align:center; color:#3a2450; }

/* ── overlays ──────────────────────────────────────────────────────────── */
.overlay{ position:fixed; z-index:80; inset:0; display:grid; place-items:center; padding:16px; background:#150c22ee; backdrop-filter:blur(6px); overflow:auto; }
.overlay.hidden{ display:none; }
.setup-card{ width:min(900px,96%); margin:auto; padding:18px 22px 22px; color:#4a2c1c; border:5px solid var(--gold); border-radius:24px; background:var(--cream); box-shadow:0 10px 0 #4a2c1c,0 24px 60px #05010c99; }
.setup-intro{ display:flex; align-items:center; gap:14px; padding-bottom:10px; border-bottom:3px solid #f0d9a2; }
.setup-intro svg{ width:66px; height:66px; flex:0 0 auto; }
.setup-intro .kick{ color:#b5651d; font-size:10px; font-weight:800; letter-spacing:.14em; }
.setup-intro h1{ margin:2px 0; color:var(--red); font:800 clamp(24px,3.4vw,34px)/1 Georgia,serif; }
.setup-intro p{ margin:4px 0; font-size:13px; }
.setup-card h2{ margin:12px 0 6px; color:var(--red); font-size:12px; letter-spacing:.06em; }
.sound-grid{ display:grid; grid-template-columns:repeat(9,1fr); gap:5px; }
.sound-grid button{ min-height:44px; padding:4px 2px; color:#fff6df; border:3px solid #6b4a7a; border-radius:10px; background:var(--violet); box-shadow:0 3px 0 var(--violet-d); font-weight:800; }
.sound-grid button strong{ display:block; font-size:15px; } .sound-grid button span{ display:block; color:#d3c2e4; font-size:8px; text-transform:capitalize; }
.sound-grid button.sel,.opts button.sel{ color:#5a2010; border-color:#e0651f; background:#ffe6c2; box-shadow:0 3px 0 var(--red),inset 0 0 0 2px #fff; }
.setup-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.opts{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.opts button{ min-height:42px; color:#fff6df; border:3px solid #6b4a7a; border-radius:10px; background:var(--violet); box-shadow:0 3px 0 var(--violet-d); font-weight:800; text-transform:capitalize; }
.start{ width:100%; margin-top:16px; padding:14px; color:#fff; border:3px solid #ffe9c9; border-radius:15px; background:linear-gradient(#e0651f,#b3202b); box-shadow:0 5px 0 #7d1220; font-size:17px; font-weight:800; }

/* premiere / theater */
.theater{ background:#08050e; }
.house{ display:flex; flex-direction:column; align-items:center; gap:12px; width:min(1180px,96%); }
.screenbox{ position:relative; width:100%; aspect-ratio:16/9; max-height:76dvh; overflow:hidden; border:10px solid #2a1a12; border-radius:14px; background:#000; box-shadow:0 0 0 6px #6b4a2a,0 22px 60px #000c; }
.screenbox .scene{ border-radius:0; box-shadow:none; }
/* ── cinematic UI: supplied artwork, live text always on top ───────────── */
.cinematic-layer{ position:absolute; inset:0; width:100%; height:100%; object-fit:fill; pointer-events:none; }
/* the curtain art is one image; each half is clipped from it and slides away,
   so the painted fabric is never distorted */
.curtain-half{ z-index:30; transition:transform 900ms cubic-bezier(.6,0,.3,1), opacity 900ms; }
.curtain-half.l{ clip-path:inset(0 50% 0 0); }
.curtain-half.r{ clip-path:inset(0 0 0 50%); }
.curtain-half.open.l{ transform:translateX(-62%); }
.curtain-half.open.r{ transform:translateX(62%); }
.premiere-frame{ z-index:34; }
.confetti-overlay{ z-index:36; opacity:0; }
.confetti-overlay.go{ animation:confettiIn 3900ms ease-out; }
@keyframes confettiIn{ 0%{opacity:0;transform:scale(1.04)} 12%{opacity:1;transform:scale(1)} 78%{opacity:1} 100%{opacity:0} }
.card .spotlight{ z-index:0; opacity:.85; }
.card .logo .clapper{ width:clamp(90px,17vw,210px); height:auto; animation:none; }
.card.logoCard.on .clapper{ animation:clapSnap 650ms cubic-bezier(.3,1.4,.5,1); transform-origin:18% 22%; }
@keyframes clapSnap{ 0%{transform:rotate(-9deg) scale(.9);opacity:0} 40%{opacity:1} 60%{transform:rotate(2deg) scale(1.02)} 100%{transform:rotate(0) scale(1)} }
.card{ position:absolute; z-index:25; inset:0; display:grid; place-items:center; align-content:center; gap:10px; padding:24px; text-align:center; color:#fff; background:#0b0616 center/cover no-repeat; opacity:0; transition:opacity .5s; }
.card > *:not(.cinematic-layer){ position:relative; z-index:1; }
.card.on{ opacity:1 }
.card .mtitle{ color:var(--gold); font:800 clamp(22px,4.6vw,54px)/1.1 Georgia,serif; text-shadow:0 4px 0 #00000066; }
.card .credit{ font-size:clamp(11px,1.7vw,19px); letter-spacing:.1em; opacity:.92 }
.card .end{ font:800 clamp(30px,6.4vw,76px)/1 Georgia,serif; letter-spacing:.06em }
.logo{ display:grid; place-items:center; gap:8px }
.logo svg{ width:clamp(90px,17vw,190px); height:auto }
.logo .lname{ color:var(--gold); font:800 clamp(15px,2.6vw,30px)/1 Georgia,serif; letter-spacing:.14em }
.card.logoCard.on .reel{ animation:reelSpin 2.4s cubic-bezier(.2,.7,.3,1); transform-box:fill-box; transform-origin:center }
@keyframes reelSpin{ 0%{transform:rotate(0) scale(.4);opacity:0} 30%{opacity:1} 100%{transform:rotate(400deg) scale(1)} }
.card.logoCard.on .lname{ animation:nameIn .9s .7s both ease-out }
@keyframes nameIn{ from{opacity:0;transform:translateY(14px) scale(.9)} to{opacity:1;transform:none} }

.premiere-btns{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; width:100%; }
.premiere-btns button{ padding:14px 8px; color:#fff; border:3px solid #ffe9c9; border-radius:15px; font-weight:800; font-size:clamp(12px,1.5vw,16px);
  background:linear-gradient(#6a4b8c,#3b2450); box-shadow:0 5px 0 #241436; }
.premiere-btns .watch{ background:linear-gradient(#e0651f,#b3202b); box-shadow:0 5px 0 #7d1220; }
.premiere-btns button:active{ transform:translateY(3px); box-shadow:0 2px 0 #241436; }

/* change-a-scene picker */
.scenepick{ width:min(900px,96%); padding:18px; border:5px solid var(--gold); border-radius:22px; background:linear-gradient(#3a2352,#241436); box-shadow:0 10px 0 #150720; }
.scenepick h2{ margin:0 0 12px; text-align:center; color:var(--gold); font:800 clamp(16px,2.2vw,24px)/1 Georgia,serif; }
.scenepick .row{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.scenepick button{ padding:8px; color:#fff; border:4px solid #6b4a8c; border-radius:14px; background:#2a1640; font-weight:800; font-size:12px; }
.scenepick button .thumb{ position:relative; overflow:hidden; aspect-ratio:16/9; margin-bottom:6px; border-radius:8px; background:#160d22; }
.scenepick button .thumb .scene{ position:absolute; inset:0; }
.scenepick .cancel{ margin-top:12px; width:100%; background:#4a3a5c; border-color:#8a76a8; }

/* ── responsive: desktop / tablet / chromebook ─────────────────────────── */
@media (max-height:760px){
  .board{ grid-template-columns:repeat(6,1fr); }
  .frame .cap{ font-size:9px; }
  .panel{ padding:6px 10px; }
  .pick .art{ height:clamp(96px,17vh,170px); }
}
@media (max-width:860px){
  .sound-grid{ grid-template-columns:repeat(6,1fr); }
  .setup-row{ grid-template-columns:1fr; gap:8px; }
  .panel{ grid-template-columns:auto 1fr; }
  .take-meter{ width:min(190px,46vw); }
  .acts{ grid-column:1 / -1; flex-direction:row; }
  .acts .said{ flex:2 } .acts .hearbtn{ flex:1 }
}
@media (max-width:940px){ .frame .cap span{ display:none } }
@media (max-width:640px){
  .board{ gap:5px } .frame{ padding:4px }
  .character-rig{ height:40% }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
}


/* ── action motions — applied to the COMPLETE character, never a body part ── */
@keyframes actDanceBob{ 0%,100%{transform:rotate(-4deg) translateY(0)} 50%{transform:rotate(4deg) translateY(-4%)} }
@keyframes actJumpArc { 0%{transform:translateY(0)} 18%{transform:translateY(2%)} 50%{transform:translateY(-22%)} 82%{transform:translateY(0)} 100%{transform:translateY(0)} }
@keyframes actFullSpin{ from{transform:rotateY(0)} to{transform:rotateY(360deg)} }
@keyframes actFlyFloat{ 0%,100%{transform:translateY(-6%)} 50%{transform:translateY(-15%)} }
@keyframes actRunTravel{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-2%)} }
@keyframes actWave    { 0%,100%{transform:rotate(0)} 25%{transform:rotate(3deg)} 75%{transform:rotate(-3deg)} }
.rig-motion.act-danceBob  { animation:actDanceBob  900ms ease-in-out infinite; }
.rig-motion.act-jumpArc   { animation:actJumpArc   760ms cubic-bezier(.3,.05,.4,1); }
.rig-motion.act-fullSpin  { animation:actFullSpin  950ms ease-in-out; }
.rig-motion.act-flyFloat  { animation:actFlyFloat 1700ms ease-in-out infinite; }
.rig-motion.act-runTravel { animation:actRunTravel 280ms ease-in-out infinite; }
.rig-motion.act-friendlyWave{ animation:actWave   1100ms ease-in-out; }

/* ── the four things a hero TRIES ──────────────────────────────────────────
   Each reads as effort: a stretch upward, a heave backward, an offer up, a
   scan around. They run once and hand back to the settled pose. */
@keyframes actClimbReach{
  0%,100%{ transform:translateY(0) scaleY(1) }
  30%{ transform:translateY(-7%) scaleY(1.03) }
  50%{ transform:translateY(-4%) scaleY(1) }
  75%{ transform:translateY(-9%) scaleY(1.04) } }
@keyframes actPullTug{
  0%,100%{ transform:rotate(0) translateX(0) }
  20%{ transform:rotate(-5deg) translateX(-2.5%) }
  38%{ transform:rotate(-2deg) translateX(-1%) }
  60%{ transform:rotate(-6deg) translateX(-3%) }
  80%{ transform:rotate(-1deg) translateX(0) } }
@keyframes actShowLift{
  0%,100%{ transform:translateY(0) }
  35%{ transform:translateY(-6%) }
  70%{ transform:translateY(-4%) } }
@keyframes actLookScan{
  0%,100%{ transform:rotate(0) }
  25%{ transform:rotate(-5deg) }
  60%{ transform:rotate(5deg) }
  85%{ transform:rotate(-2deg) } }
@keyframes actShakeIt{
  0%,100%{ transform:rotate(0) translateX(0) }
  15%{ transform:rotate(3deg) translateX(1.5%) } 30%{ transform:rotate(-3deg) translateX(-1.5%) }
  45%{ transform:rotate(3deg) translateX(1.5%) } 60%{ transform:rotate(-2deg) translateX(-1%) }
  80%{ transform:rotate(1deg) translateX(0) } }
@keyframes actCallOut{
  0%,100%{ transform:rotate(0) scaleY(1) }
  25%{ transform:rotate(2deg) scaleY(1.02) }
  55%{ transform:rotate(3deg) scaleY(1.03) }
  80%{ transform:rotate(1deg) scaleY(1) } }
.rig-motion.act-shakeIt   { animation:actShakeIt    1400ms ease-in-out; }
.rig-motion.act-callOut   { animation:actCallOut    1500ms ease-in-out; }
.rig-motion.act-climbReach{ animation:actClimbReach 1500ms ease-in-out; }
.rig-motion.act-pullTug   { animation:actPullTug    1500ms ease-in-out; }
.rig-motion.act-showLift  { animation:actShowLift   1400ms ease-in-out; }
.rig-motion.act-lookScan  { animation:actLookScan   1600ms ease-in-out; }

/* ── carrying weight, trying, failing, cheering ────────────────────────── */
/* a walk that rises and falls and leans into the direction of travel */
@keyframes walkBob{
  0%,100%{ transform:translateY(0) rotate(1.5deg) }
  50%    { transform:translateY(-2.2%) rotate(0deg) } }
.character-rig.walking .rig-motion{ animation:walkBob 460ms ease-in-out infinite; }
/* a breath of anticipation before the effort */
@keyframes braceDown{
  0%{ transform:translateY(0) scaleY(1) }
  60%{ transform:translateY(2%) scaleY(.965) }
  100%{ transform:translateY(0) scaleY(1) } }
.character-rig.bracing .rig-motion{ animation:braceDown 420ms ease-in-out; }
/* "but it was still not enough!" — the shoulders go out of it */
.character-rig.dejected .rig-motion{
  transform:translateY(1%); transition:transform 600ms ease-out; }
/* the finale: everybody bounces */
@keyframes cheerBob{
  0%,100%{ transform:translateY(0) }
  35%{ transform:translateY(-6%) }
  70%{ transform:translateY(-1%) } }
.character-rig.cheering .rig-motion{ animation:cheerBob 780ms ease-in-out infinite; }
/* the star watches something stuck up high */
.character-rig.looking-up .rig-motion{
  transform:translateY(-1%); transition:transform 500ms ease-out; }

/* the object answers back when it is tugged, shaken or climbed at */
@keyframes propRock{
  0%,100%{ transform:rotate(0) }
  20%{ transform:rotate(-4deg) } 45%{ transform:rotate(3.5deg) }
  70%{ transform:rotate(-2deg) } 88%{ transform:rotate(1deg) } }
@keyframes propStrain{
  0%,100%{ transform:translateY(0) }
  30%{ transform:translateY(-4%) } 55%{ transform:translateY(-1%) }
  80%{ transform:translateY(-3%) } }
.pr.reacting img.prop-img { animation:propRock   1400ms ease-in-out; transform-origin:50% 90%; }
.pr.straining img.prop-img{ animation:propStrain 1400ms ease-in-out; }

/* choice-card icon above the written label */
.pick .art img.action-icon{ max-height:100%; max-width:100%; width:auto; height:auto; object-fit:contain; }

@media (prefers-reduced-motion:reduce){
  .rig-motion{ animation:none!important; transform:none!important; }
  .pr img.prop-img{ animation:none!important; }
  .curtain-half{ transition:opacity 300ms!important; }
  .curtain-half.open{ transform:none!important; opacity:0; }
  .card.logoCard.on .clapper{ animation:none!important; }
  .confetti-overlay.go{ animation:none!important; opacity:1; }
}


/* ── speech / studio controls (supplied icon art, live labels) ──────────── */
.ui-icon{ width:clamp(22px,2.2vw,32px); height:auto; object-fit:contain; flex:0 0 auto; }
.iconbtn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.iconbtn span{ line-height:1.1; }
.brand .brand-cam{ width:clamp(26px,2.6vw,36px); }
.inline-icon{ width:18px; vertical-align:-3px; margin-right:5px; }
.setup-clapper{ width:66px; height:auto; flex:0 0 auto; }
.practice-mic{ width:clamp(52px,6vw,104px); height:auto; object-fit:contain; align-self:center; justify-self:center; }
@media (max-width:1100px){ .practice-mic{ display:none; } }

/* three-take meter: supplied art behind three live state lights */
.take-meter{ position:relative; width:min(230px,40vw); aspect-ratio:2/1; margin-top:4px;
  background:url("assets/ui/take-meter.png") center/contain no-repeat; }
.take-light{ position:absolute; top:50%; width:18%; aspect-ratio:1; border-radius:50%;
  transform:translate(-50%,-50%); transition:background .18s, box-shadow .18s; }
.take-light:nth-child(1){ left:23.4% } .take-light:nth-child(2){ left:50% } .take-light:nth-child(3){ left:76.6% }
.take-light.complete{ background:rgb(255 209 62 / 52%); box-shadow:0 0 18px #ffd13e, inset 0 0 8px #fff7c7; }
.take-meter[hidden]{ display:none; }

/* keep focus rings obvious for keyboard users */
button:focus-visible{ outline:3px solid #ffe9a8; outline-offset:2px; }
@media (prefers-reduced-motion:reduce){ .ui-icon,.take-light{ animation:none!important; transition:none!important; } }