/* THE TWO ROOMS — see rooms.js */

/* ---------------------------------------------- Mo's room: the toy row --
   Drawn objects, not emoji. The button keeps its gradient ring; the art
   sits inside it with a shadow so it reads as a thing, not a sticker. */
.toy .toy-art{display:block;width:66%;height:66%}
.toy .toy-art svg{width:100%;height:100%;display:block;overflow:visible;
  filter:drop-shadow(0 2px 2px rgba(120,86,50,.28))}
.toy:active .toy-art{transform:scale(.94)}
.toy .toy-art{transition:transform .12s ease-out}

/* --------------------------------------------- the mirror, with them in it */
.dr-refl{position:absolute;inset:0;pointer-events:none;
  display:flex;align-items:flex-end;justify-content:center;gap:3%;padding:0 6%}
.dr-refl .char-svg{width:100%;height:auto;display:block;overflow:visible}
.dr-rm,.dr-rp{transition:transform .34s var(--spring),filter .34s;filter:saturate(.86) brightness(1.04)}
.dr-rm{width:60%;transform:translateY(20%) scaleX(-1)}
.dr-rp{width:44%;transform:translateY(23%) scaleX(-1)}
/* whoever is being dressed leans into the glass */
#scDress.mir-mo .dr-rm{transform:translateY(14%) scale(1.1) scaleX(-1)}
#scDress.mir-pip .dr-rp{transform:translateY(17%) scale(1.12) scaleX(-1)}
/* the glass itself stays over the top of them */
.dr-mirror::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(150deg,rgba(255,255,255,.5),rgba(207,226,238,.28) 45%,rgba(255,255,255,.45));
  mix-blend-mode:screen}
.dr-glint{z-index:2}

/* ------------------------------------------------------------ the show --
   The sign hangs on the empty wall to the right of the mirror, where there
   was nothing at all, and it is out of everybody's way. */
.dr-show{position:absolute;right:6%;top:52%;z-index:8;border:0;background:none;padding:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;-webkit-tap-highlight-color:transparent;
  transform-origin:50% 0;animation:drSwing 4.5s ease-in-out infinite}
.dr-cord{width:3px;height:clamp(16px,4vh,26px);background:#B08A5F;border-radius:2px}
.dr-sign{display:flex;align-items:center;gap:7px;padding:9px 15px 9px 11px;border-radius:14px;
  background:linear-gradient(180deg,#FFFDF6,#FFE9B8);color:#5A3E1C;
  box-shadow:0 5px 0 #D8A93F,0 10px 18px rgba(120,70,10,.28)}
.dr-sign svg{width:clamp(19px,5vw,25px);height:auto;display:block}
.dr-sign b{font:800 clamp(13px,3.7vw,16px)/1 var(--font);white-space:nowrap}
.dr-show:active .dr-sign{transform:translateY(3px)}
@keyframes drSwing{0%,84%,100%{transform:rotate(0)}90%{transform:rotate(3.5deg)}95%{transform:rotate(-2.5deg)}}
#scDress.dr-showing .dr-show{opacity:0;pointer-events:none}

/* LIGHTS DOWN. A veil over the room that sits UNDER the stage (the stage is
   z-index 4), so the wall and the mirror go dark and the two of them do not
   — a filter on the room would have dimmed them too, which is backwards. */
.dr-room.dr-showlight::before{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  background:rgba(30,16,40,.5);animation:drFade .5s ease-out both}
.dr-room.dr-showlight::after{content:'';position:absolute;left:50%;top:0;width:86%;height:100%;
  transform:translateX(-50%);pointer-events:none;z-index:3;
  background:radial-gradient(ellipse 44% 58% at 50% 96%,rgba(255,238,180,.85),rgba(255,238,180,.22) 58%,transparent 76%);
  clip-path:polygon(40% 0,60% 0,100% 100%,0 100%);animation:drFade .5s ease-out both}
@keyframes drFade{from{opacity:0}to{opacity:1}}
#scDress.dr-showing .dr-stage{position:absolute;z-index:5}

/* they walk out: bigger, and forward */
#scDress.dr-showing .dr-stage{transition:transform .8s var(--spring)}
#scDress.dr-walk .dr-stage{transform:translateY(-2%) scale(1.06)}
#scDress.dr-showing .dr-pick{transition:transform .6s var(--spring),filter .5s}
#scDress.dr-on-mo #drMoPick{transform:translateY(-14px) scale(1.24);filter:none;z-index:3}
#scDress.dr-on-mo #drPipPick{transform:translateY(16px) scale(.72);filter:brightness(.62) saturate(.7)}
#scDress.dr-on-pip #drPipPick{transform:translateY(-14px) scale(1.3);filter:none;z-index:3}
#scDress.dr-on-pip #drMoPick{transform:translateY(16px) scale(.72);filter:brightness(.62) saturate(.7)}
#scDress.dr-clap .dr-pick{transform:translateY(-8px) scale(1.12);filter:none}
#scDress.dr-showing .dr-pick .dr-spot{opacity:1}
/* the tray waits its turn, and stops asking to be tapped */
#scDress.dr-showing .dr-tray{filter:brightness(.94);pointer-events:none}
#scDress.dr-showing .dr-tray::after{content:none !important}

@media (prefers-reduced-motion:reduce){
  .dr-show,.dr-room.dr-showlight::before,.dr-room.dr-showlight::after{animation:none}
}

/* ------------------------------------------------- a wall you can touch --
   Everything on it takes a finger, and shows that it did. */
.dr-tappy{cursor:pointer;-webkit-tap-highlight-color:transparent}
.dr-mirror.dr-tappy{pointer-events:auto}
.dr-bulbs.dr-tappy{pointer-events:auto;z-index:6}
.dr-hang.dr-tappy{pointer-events:auto;z-index:6;transform-origin:50% 0;
  transition:background .3s ease-out,transform .2s var(--spring)}
.dr-hang.dr-tappy:active{transform:translateY(3px)}
.dr-hang.dr-swing{animation:drHangSwing 1.3s ease-in-out}
@keyframes drHangSwing{0%,100%{transform:rotate(0)}
  20%{transform:rotate(-13deg)}45%{transform:rotate(9deg)}70%{transform:rotate(-5deg)}88%{transform:rotate(2deg)}}
/* the bulbs run along the string, one after another */
.dr-bulbs.dr-run span{animation:drBulb .5s ease-in-out}
.dr-bulbs.dr-run span:nth-child(1){animation-delay:0s}
.dr-bulbs.dr-run span:nth-child(2){animation-delay:.09s}
.dr-bulbs.dr-run span:nth-child(3){animation-delay:.18s}
.dr-bulbs.dr-run span:nth-child(4){animation-delay:.27s}
.dr-bulbs.dr-run span:nth-child(5){animation-delay:.36s}
.dr-bulbs.dr-run span:nth-child(6){animation-delay:.45s}
.dr-bulbs.dr-run span:nth-child(7){animation-delay:.54s}
@keyframes drBulb{0%,100%{transform:scale(1);filter:none}
  50%{transform:scale(1.5);filter:drop-shadow(0 0 12px rgba(255,225,140,1))}}
/* a cloth going over the glass */
.dr-mirror.dr-wipe .dr-glint{animation:drWipe 1.1s ease-in-out}
@keyframes drWipe{0%{transform:translateX(-40%) rotate(14deg)}100%{transform:translateX(320%) rotate(14deg)}}

/* the hello chip on the garden, when it is pressed */
#homeHi.hh-pop .hh-face{animation:hhFacePop .8s var(--spring)}
@keyframes hhFacePop{0%,100%{transform:translateY(0) rotate(0)}
  30%{transform:translateY(-9px) rotate(-9deg) scale(1.16)}
  60%{transform:translateY(-3px) rotate(6deg) scale(1.06)}}
/* GUIDED / I CHOOSE ARE HELD, and a hold nobody can see is a broken button.
   The fill is driven from extras.js (inline width + transition); this only
   places it behind the words and keeps it inside the pill. */
.hm-mode .hold-btn{position:relative;overflow:hidden}
.hm-mode .hold-btn b,.hm-mode .hold-btn i{position:relative;z-index:2}
.hold-fill{position:absolute;left:0;top:0;bottom:0;width:0;z-index:1;border-radius:999px;
  background:linear-gradient(90deg,#FFE49A,#FFCE3D);pointer-events:none}
.hm-mode .hold-btn.on .hold-fill{background:linear-gradient(90deg,#9FD7F5,#6EC6F0)}
/* a hint that it wants holding, until it has been used once */
.hm-mode{position:relative}
.hm-mode::after{content:'hold to change';position:absolute;left:0;right:0;top:100%;margin-top:3px;
  text-align:center;font:700 clamp(9px,2.4vw,11px)/1 var(--font);color:var(--ink-soft);opacity:.85;
  pointer-events:none}
.hm-mode.used::after{content:none}

/* the prize screen when it is rolling on by itself: NOTHING to read. Not
   "One more", not "A story", not "All done" — the house in the corner is the
   only way out and it is the one thing a child already understands. */
#scPrize.rolling #prizeAgain,#scPrize.rolling #prizeBook,#scPrize.rolling #prizeHome{display:none}
#scPrize.rolling .prize-row{min-height:0}

/* ---------------------------------------------- the dressing-room tabs --
   Pictures, not words. Big enough for a thumb, and the chosen one glows. */
.dr-tabs{gap:8px}
.dr-tab{padding:8px 4px;border-radius:18px}
.dr-tab svg{width:clamp(38px,11vw,50px) !important;height:auto}
.dr-tab span{display:none}
.dr-tab.on{background:#FFF3D6;box-shadow:inset 0 0 0 3px var(--sun),0 6px 14px rgba(120,86,50,.16);transform:translateY(-2px)}
.dr-tab.on svg{animation:drTabPop .5s var(--spring)}
@keyframes drTabPop{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
/* WHERE IT GOES: a ring on that part of Mo */
.dr-zone{position:absolute;pointer-events:none;opacity:0;border-radius:50%;
  box-shadow:0 0 0 4px var(--sun),0 0 22px 6px rgba(255,206,61,.55);
  transition:opacity .25s;z-index:3}
.dr-zone.z-hat{left:22%;right:22%;top:-4%;height:26%}
.dr-zone.z-face{left:24%;right:24%;top:26%;height:18%}
.dr-zone.z-neck{left:30%;right:30%;top:48%;height:12%}
.dr-zone.z-back{left:-4%;right:-4%;top:30%;height:60%;border-radius:40%}
#scDress.zone-hat .z-hat,#scDress.zone-face .z-face,#scDress.zone-neck .z-neck,#scDress.zone-back .z-back{opacity:1;animation:drZone 1.3s ease-in-out infinite}
@keyframes drZone{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}