/* Ballet Show — "Sunny Studio" (design canvas B, 2026-09-27): mint walls, a barre, a big window,
   a wooden floor, the lab's ink outlines and hard shadows. Baloo 2 for what shouts, Nunito for
   what she reads. Full screen: stage on top, her five moves along the bottom. */
:root{
  --ink:#3b2a2a; --mint:#dff5ea; --mint2:#c9ead8; --wood:#e9c99a; --wood2:#c9a06a; --sky:#9fd8ff;
  --pink:#ff5fa2; --pinkL:#ffd6e7; --green:#7bd94a; --yellow:#ffe14d; --paper:#fff;
  --sh:5px 5px 0 var(--ink); --sh3:3px 3px 0 var(--ink);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;overscroll-behavior:none}
body{font-family:'Nunito',sans-serif;font-weight:700;color:var(--ink);background:var(--mint);
  touch-action:none;user-select:none;-webkit-user-select:none;overflow:hidden}
.d{font-family:'Baloo 2',sans-serif;font-weight:800}
.hide{display:none!important}

#stage{position:fixed;inset:0;display:flex;flex-direction:column}

/* ---- the studio ---- */
#scene{position:relative;flex:1;min-height:0;overflow:hidden;background:var(--mint)}
#wain{position:absolute;left:0;right:0;top:58%;height:16%;background:var(--mint2);border-top:3px solid var(--ink)}
#floor{position:absolute;left:0;right:0;top:74%;bottom:0;border-top:3px solid var(--ink);
  background:var(--wood) repeating-linear-gradient(180deg,transparent 0 34px,var(--wood2) 34px 37px)}
#window{position:absolute;right:12%;top:7%;width:clamp(120px,23%,300px);aspect-ratio:10/9;background:var(--sky);
  border:4px solid var(--ink);border-radius:14px;overflow:hidden}
#window i.h{position:absolute;left:0;right:0;top:50%;height:4px;background:var(--ink)}
#window i.v{position:absolute;top:0;bottom:0;left:50%;width:4px;background:var(--ink)}
#sun{position:absolute;right:16%;top:14%;width:26%;aspect-ratio:1;border-radius:50%;background:#f2c94c;border:3px solid var(--ink);
  box-shadow:0 0 0 10px rgba(242,201,76,.28)}
#cloud{position:absolute;left:12%;top:50%;width:36%;height:16%;background:#fff;border:3px solid var(--ink);border-radius:40px}
#cloud:before{content:'';position:absolute;left:24%;top:-55%;width:40%;height:120%;background:#fff;border:3px solid var(--ink);border-bottom:0;border-radius:50% 50% 0 0}
#cloud:after{content:'';position:absolute;left:0;right:0;bottom:0;height:64%;background:#fff;border-radius:40px}
#sill{position:absolute;right:calc(12% - 8px);top:7%;width:calc(clamp(120px,23%,300px) + 16px);aspect-ratio:10/9;pointer-events:none}
#sill:after{content:'';position:absolute;left:0;right:0;top:100%;height:14px;background:#fff;border:3px solid var(--ink);border-radius:4px}
#barre{position:absolute;left:3%;width:50%;top:51%;height:12px;border-radius:7px;background:#c98b4e;border:3px solid var(--ink)}
#barre i{position:absolute;top:100%;width:12px;height:clamp(28px,7vh,54px);background:#8f5f2b;border:3px solid var(--ink);left:10%}
#barre i:nth-child(2){left:50%}#barre i:nth-child(3){left:90%}
#plant{position:absolute;right:1%;bottom:16%;width:clamp(50px,8%,110px)}
#plant svg{width:100%;display:block}

/* characters */
#teacher{position:absolute;left:13%;bottom:7%;width:clamp(80px,14%,180px);z-index:3}
#teacher svg{width:100%;display:block;filter:drop-shadow(4px 5px 0 rgba(59,42,42,.25))}
#teacher .wHead{transform-box:fill-box;transform-origin:50% 90%}
#teacher.talk .wHead{animation:nod .55s ease-in-out infinite alternate}
#teacher .wPaw{transform-box:fill-box;transform-origin:0% 100%}
#teacher.point .wPaw{animation:wave .5s ease-in-out infinite alternate}
@keyframes nod{to{transform:rotate(-6deg)}}
@keyframes wave{to{transform:rotate(-14deg)}}

#dancer{position:absolute;left:52%;bottom:2%;height:80%;aspect-ratio:240/320;transform:translateX(-50%);z-index:4}
#dancer svg{width:100%;height:100%;display:block;overflow:visible;filter:drop-shadow(4px 5px 0 rgba(59,42,42,.25))}
#shadow{position:absolute;left:52%;bottom:6.5%;width:clamp(60px,12%,150px);height:12px;transform:translateX(-50%);background:rgba(59,42,42,.22);border-radius:50%;z-index:2}

#audience{position:absolute;right:4%;bottom:5%;width:clamp(110px,21%,270px);z-index:3}
#audience svg{width:100%;display:block;filter:drop-shadow(4px 5px 0 rgba(59,42,42,.25))}
.toy{transform-box:fill-box;transform-origin:50% 100%}
.toy.jump{animation:tjump .55s ease-out}
.toy.jump:nth-child(4){animation-delay:.08s}.toy.jump:nth-child(5){animation-delay:.16s}
@keyframes tjump{30%{transform:translateY(-22px) rotate(-6deg)}60%{transform:translateY(0)}80%{transform:translateY(-8px)}}

/* speech */
/* Sits UNDER the row of cards (top ~24%), never behind it: Nick, 2026-09-27, "the text keeps
   going behind the instructions on top". */
#bubble{position:absolute;left:24%;top:24%;max-width:min(320px,34%);background:#fff;border:3px solid var(--ink);border-radius:18px;
  padding:10px 14px;box-shadow:4px 4px 0 var(--ink);font-size:clamp(15px,1.7vw,21px);line-height:1.35;z-index:9;animation:pop .25s}
#bubble:before{content:'';position:absolute;left:-12px;top:34px;width:20px;height:20px;background:#fff;border-left:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:rotate(45deg)}
@keyframes pop{from{transform:scale(.6);opacity:0}}
#cheers{position:absolute;inset:0;pointer-events:none;z-index:7}
.pop{position:absolute;font-family:'Baloo 2',sans-serif;font-weight:800;font-size:clamp(14px,1.6vw,20px);background:#fff;border:3px solid var(--ink);
  border-radius:12px;padding:2px 10px;box-shadow:var(--sh3);animation:rise 1.3s ease-out forwards;white-space:nowrap}
@keyframes rise{to{transform:translateY(-70px) rotate(6deg);opacity:0}}

/* the dance being called: slots across the top */
#seq{position:absolute;left:50%;top:10px;transform:translateX(-50%);display:flex;align-items:flex-end;gap:8px;z-index:6;max-width:calc(100% - 150px)}
#showPill{align-self:center;background:var(--pink);color:#fff;border:3px solid var(--ink);border-radius:12px;padding:6px 12px;box-shadow:var(--sh3);
  font-size:clamp(14px,1.7vw,20px);line-height:1;transform:rotate(-3deg);white-space:nowrap}
#slots{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap;justify-content:center}
.slot{width:clamp(48px,6.4vw,80px);aspect-ratio:9/10;background:#fff;border:3px solid var(--ink);border-radius:14px;box-shadow:var(--sh3);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:3px;position:relative;opacity:.55;transition:transform .2s,opacity .2s}
.slot svg{width:66%;height:auto}
.slot span{font-size:clamp(9px,1vw,12px);font-weight:800;line-height:1}
.slot.now{opacity:1;outline:4px solid var(--pink);transform:scale(1.1) rotate(2deg)}
.slot.done{opacity:1}
.slot.done:after{content:'';position:absolute;right:-9px;top:-9px;width:22px;height:22px;border-radius:50%;background:var(--green);border:3px solid var(--ink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpolyline points='3,8 7,12 13,4' fill='none' stroke='%233b2a2a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-size:70%;background-repeat:no-repeat;background-position:center}
.slot.hint{animation:wiggle .45s ease-in-out infinite}
@keyframes wiggle{0%,100%{transform:scale(1.1) rotate(-4deg)}50%{transform:scale(1.1) rotate(5deg)}}
.slot.rec{opacity:1}
/* face-down: the memory game. She watches the dance; the card only turns over when she gets it. */
.slot.secret svg,.slot.secret span{visibility:hidden}
.slot.secret:before{content:'?';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Baloo 2',sans-serif;font-weight:800;font-size:clamp(22px,3vw,40px);color:var(--pink)}
.slot.secret.peek svg,.slot.secret.peek span{visibility:visible;animation:peek 2.2s forwards}
.slot.secret.peek:before{visibility:hidden}
@keyframes peek{0%,80%{opacity:1}100%{opacity:0}}

#roses{position:absolute;right:76px;top:14px;display:flex;align-items:center;gap:6px;background:#fff;border:3px solid var(--ink);border-radius:999px;
  padding:5px 12px 5px 8px;box-shadow:var(--sh3);z-index:6;font-size:clamp(16px,2vw,22px);font-weight:800}
#roses svg{width:26px;height:26px;display:block}
#roses.bump{animation:bump .35s}
@keyframes bump{40%{transform:scale(1.18)}}
.fly{position:fixed;width:34px;height:34px;z-index:60;pointer-events:none;transition:transform .9s cubic-bezier(.3,.6,.3,1),opacity .9s}
.fly svg{width:100%;height:100%}

/* stickers */
.sticker{min-height:44px;border:3px solid var(--ink);border-radius:14px;padding:8px 14px;font-family:'Baloo 2',sans-serif;font-weight:800;
  font-size:clamp(14px,1.6vw,18px);background:#fff;box-shadow:var(--sh3);color:var(--ink);cursor:pointer;line-height:1.1}
.sticker.green{background:var(--green)}.sticker.pink{background:var(--pink);color:#fff}
.sticker.big{font-size:20px;padding:10px 22px}
.sticker:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.sticker[disabled]{opacity:.5}
#againBtn{position:absolute;left:12px;top:72px;z-index:6;transform:rotate(-2deg)}
#dressBtn{position:absolute;right:12px;top:72px;z-index:6;transform:rotate(2deg)}

/* ---- the moves ---- */
/* padding-left 70: shared/sound.js and postcard.js stack 🔊 📮 in the bottom-left corner (48px +
   a 6px halo). padding-right 84 on narrow screens: the portal paints its 💬 over the iframe's
   bottom-right and nothing in here can see it. */
#panel{position:relative;background:var(--pinkL);border-top:4px solid var(--ink);padding:8px 16px 12px 70px;display:flex;flex-direction:column;gap:8px;z-index:8}
#panelHead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:44px}
#panelLbl{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#7a4a5c;font-weight:800}
#myShowBtn{margin-left:auto;transform:rotate(1deg)}
#freeBar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
#moves{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;max-width:820px}
.mv{min-height:44px;height:clamp(84px,17vh,150px);background:#fff;border:4px solid var(--ink);border-radius:20px;box-shadow:var(--sh);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-family:'Baloo 2',sans-serif;font-weight:800;
  font-size:clamp(13px,1.8vw,22px);color:var(--ink);padding:0;cursor:pointer;transform:rotate(-2deg);transition:transform .08s,box-shadow .08s}
.mv:nth-child(even){transform:rotate(1.5deg)}
.mv svg{height:62%;width:auto;display:block}
.mv:active,.mv.press{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.mv[disabled]{opacity:.5}

/* ---- confetti ---- */
#fx{position:fixed;inset:0;pointer-events:none;z-index:50}

/* ---- dressing room ---- */
.ov{position:fixed;inset:0;background:rgba(59,42,42,.45);display:flex;align-items:center;justify-content:center;z-index:70;padding:12px}
.box{background:var(--paper);border:4px solid var(--ink);border-radius:22px;box-shadow:var(--sh);padding:16px;width:min(560px,100%);max-height:92vh;overflow:auto;display:flex;flex-direction:column;gap:10px}
.h1{font-size:28px;color:var(--pink);line-height:1;margin:0 0 4px}
#shopItems{display:flex;flex-direction:column;gap:8px}
.item{display:flex;align-items:center;gap:12px;border:3px solid var(--ink);border-radius:16px;padding:8px 10px;background:#fff}
.item.worn{background:var(--pinkL)}
.item .ic{width:56px;height:56px;flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.item .ic svg{width:100%;height:100%}
.item .tx{flex:1;font-size:15px;font-weight:600;line-height:1.3}
.item .tx b{display:block;font-family:'Baloo 2',sans-serif;font-weight:800;font-size:18px}
.item .sticker{min-width:74px;text-align:center}

@media (max-width:900px){
  #panel{padding:8px 84px 12px 70px}
  #moves{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;gap:10px}
  .mv{height:clamp(72px,11vh,110px)}
  #window{width:32%;right:8%;top:20%}
  #sill{right:calc(8% - 8px);top:20%;width:calc(32% + 16px)}
  #teacher{width:20%;left:4%}
  #dancer{height:66%;left:50%}
  #shadow{left:50%}
  #audience{width:30%;right:2%}
  #bubble{left:4%;top:auto;bottom:52%;max-width:52%}
  #bubble:before{left:24px;top:auto;bottom:-12px;transform:rotate(-45deg)}
  #seq{top:64px}
  #againBtn,#dressBtn{top:12px;left:auto;right:76px}
  #dressBtn{right:auto;left:72px}
  #roses{top:120px;right:12px}
}