/* The dressing room. Same drawing standard as Mo's room and the barn — warm,
   lit, everything you can see you can touch — but it is a dressing room: bulbs
   over a mirror, a rail of clothes, and a lit stage the two of them step onto. */

#scDress{--dr-wall:#F6E3EC;--dr-wall-d:#E6C9D8;--dr-wood:#D9A96E;--dr-wood-d:#B4833F;
  justify-content:flex-start;gap:0;padding:0;overflow:hidden;
  background:#2E2028}

/* ------------------------------------------------------------- the room */
.dr-room{position:relative;flex:1 1 auto;width:100%;min-height:0;overflow:hidden;
  transition:filter .45s ease-out}
.dr-room.dark{filter:brightness(.42) saturate(.7)}
.dr-wall{position:absolute;inset:0;
  background:linear-gradient(180deg,var(--dr-wall),var(--dr-wall-d)),
             repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 2px,transparent 2px 34px)}
.dr-wall{background-blend-mode:overlay,normal}

/* bulbs over the mirror */
.dr-bulbs{position:absolute;left:5%;right:5%;top:calc(var(--pad-top) + 66px);
  display:flex;justify-content:space-between;z-index:2}
.dr-bulbs span{width:clamp(13px,3.6vw,19px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#FFFBE6,#FFD86B 62%,#E9A93A);
  box-shadow:0 0 14px 5px rgba(255,214,110,.7),0 2px 0 rgba(150,110,40,.4);
  animation:bulbBreathe 3.4s ease-in-out infinite}
.dr-bulbs span:nth-child(2n){animation-delay:-1.1s}
.dr-bulbs span:nth-child(3n){animation-delay:-2.2s}
@keyframes bulbBreathe{0%,100%{opacity:1}50%{opacity:.82}}
.dr-room.dark .dr-bulbs span{background:#BDA9AF;box-shadow:inset 0 0 0 2px rgba(90,60,70,.3);
  animation:none}

.dr-switch{position:absolute;right:12px;top:calc(var(--pad-top) + 66px);z-index:6;
  width:clamp(30px,8vw,38px);border:0;background:none;padding:0;cursor:pointer;
  -webkit-tap-highlight-color:transparent;filter:drop-shadow(0 2px 3px rgba(60,30,40,.3))}
.dr-switch svg{width:100%;height:auto;display:block}
.dr-switch .dr-toggle{transition:transform .2s var(--spring)}
.dr-room:not(.dark) .dr-switch .dr-toggle{transform:translateY(11px)}

/* the mirror */
.dr-mirror{position:absolute;left:6%;top:calc(var(--pad-top) + 104px);
  width:34%;aspect-ratio:.72;border-radius:50% 50% 46% 46% / 40% 40% 54% 54%;
  background:linear-gradient(150deg,#EAF4FA,#CFE2EE 45%,#F4FAFD);
  box-shadow:0 0 0 7px #E8C68F,0 0 0 10px #C79B5E,0 8px 18px rgba(80,40,55,.26);
  overflow:hidden}
.dr-glint{position:absolute;left:-32%;top:-14%;width:44%;height:130%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);
  transform:rotate(14deg);animation:glint 5.5s ease-in-out infinite}
@keyframes glint{0%,72%,100%{transform:translateX(0) rotate(14deg)}
                 86%{transform:translateX(300%) rotate(14deg)}}

/* the rail, with things hanging on it */
.dr-rail{position:absolute;right:5%;top:calc(var(--pad-top) + 116px);width:36%;height:30%}
.dr-rail::before{content:'';position:absolute;left:0;right:0;top:0;height:7px;border-radius:4px;
  background:linear-gradient(180deg,#E4D3BE,#A8895F)}
.dr-hang{position:absolute;top:5px;width:26%;border-radius:6px 6px 30% 30%;
  clip-path:polygon(34% 0,66% 0,100% 100%,0 100%)}
.dr-hang::before{content:'';position:absolute;left:50%;top:-9px;width:11px;height:12px;
  transform:translateX(-50%);border:2.4px solid #9A7B57;border-bottom:0;
  border-radius:6px 6px 0 0}
.dr-hang.h1{left:2%;height:56%;background:linear-gradient(180deg,#8A6BD8,#6E51BC)}
.dr-hang.h2{left:36%;height:70%;background:linear-gradient(180deg,#FF9DAE,#E4708A)}
.dr-hang.h3{left:70%;height:48%;background:linear-gradient(180deg,#7ED0F0,#4FA8D8)}

.dr-floor{position:absolute;left:0;right:0;bottom:0;height:34%;
  background:linear-gradient(180deg,var(--dr-wood),var(--dr-wood-d)),
             repeating-linear-gradient(90deg,rgba(120,80,30,.14) 0 1px,transparent 1px 26px);
  background-blend-mode:overlay,normal}
.dr-floor::before{content:'';position:absolute;left:0;right:0;top:0;height:4px;
  background:rgba(120,80,30,.28)}

/* ---------------------------------------------------------- the stage - */
/* THE STAGE IS A LAYOUT BOX, NOT A LID. It is full width, three quarters of
   the room tall and sits above everything, so for a while it swallowed every
   touch aimed at the music box, the cat, the picture and the mirror — all of
   which are BEHIND it and none of which could be pressed by a finger. Exactly
   the fault the playroom's cast layer had, which is what tests/reach.test.mjs
   exists for; a container that only positions its children takes no touches,
   and the children that are meant to be pressed take them back. */
.dr-stage{position:absolute;left:0;right:0;bottom:0;height:74%;z-index:4;
  pointer-events:none;
  display:flex;align-items:flex-end;justify-content:center;gap:2%;
  padding:0 4% calc(2% + 4px)}
.dr-stage .dr-pick,.dr-stage .dr-zone{pointer-events:auto}
.dr-pick{position:relative;border:0;background:none;padding:0;cursor:pointer;
  flex:0 0 auto;display:block;line-height:0;
  -webkit-tap-highlight-color:transparent;
  transition:transform .34s var(--spring),filter .34s ease-out}
.dr-pick .dr-body{display:block;width:100%}
#drMoPick{width:44%}
#drPipPick{width:35%}
/* not selected: a step back, and a touch dimmer */
.dr-pick{transform:translateY(14px) scale(.8);filter:brightness(.78) saturate(.85)}
.dr-pick.on{transform:translateY(-8px) scale(1.1);filter:none;z-index:2}
.dr-pick:active{transform:translateY(-4px) scale(1.04)}

/* the light they step into */
.dr-spot{position:absolute;left:-14%;right:-14%;bottom:-4%;height:34%;
  border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(closest-side,rgba(255,232,160,.95),rgba(255,232,160,.3) 55%,transparent 78%);
  transition:opacity .34s ease-out}
.dr-pick.on .dr-spot{opacity:1}
/* no tick and no badge: stepping forward into the light IS the signal, which
   is the whole reason it was asked for that way round */

/* ---------------------------------------------------------- the tray -- */
.dr-tray{flex:none;width:100%;background:linear-gradient(180deg,#FFFDF8,#FFF2DF);
  border-radius:24px 24px 0 0;padding:10px 10px calc(var(--pad-bot) + 10px);
  box-shadow:0 -6px 20px rgba(50,30,40,.32);z-index:5}
.dr-tabs{display:flex;gap:6px;margin-bottom:8px}
.dr-tab{flex:1;border:0;cursor:pointer;font:inherit;display:flex;flex-direction:column;
  align-items:center;gap:2px;padding:7px 4px 6px;border-radius:15px;
  background:#FBF5EA;color:var(--ink-soft);
  box-shadow:inset 0 0 0 2.5px rgba(160,140,110,.2);
  transition:background .18s,box-shadow .18s,color .18s}
.dr-tab svg{width:clamp(20px,5.4vw,25px);height:auto;display:block}
.dr-tab span{font-weight:800;font-size:clamp(10px,2.8vw,12px)}
.dr-tab.on{background:#FFF3D6;color:var(--ink);box-shadow:inset 0 0 0 3px var(--sun)}
.dr-tab:active{transform:translateY(2px)}

.dr-items{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,1fr);
  gap:7px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  padding:2px 2px 6px;scrollbar-width:none}
.dr-items::-webkit-scrollbar{display:none}
.dr-item{width:clamp(52px,15vw,66px);aspect-ratio:1;border:0;border-radius:16px;
  cursor:pointer;padding:4px;
  /* NOT cream: the chef hat and the smart collar are white, and on a cream tile
     they were invisible. A tinted shelf behind them makes every one readable. */
  background:radial-gradient(circle at 50% 62%,#E7DCC9,#F6EEE0 72%);
  box-shadow:inset 0 0 0 3px rgba(255,206,61,.5);
  display:flex;align-items:center;justify-content:center;
  transition:transform .22s var(--spring);-webkit-tap-highlight-color:transparent}
.dr-item svg{width:100%;height:100%;overflow:visible}
.dr-item:active{transform:scale(.9)}
.dr-item.worn{box-shadow:inset 0 0 0 4px var(--leaf);
  background:radial-gradient(circle at 50% 62%,#D8EED2,#F0FBEE 72%)}
.dr-item.locked{background:#F1ECE3;box-shadow:inset 0 0 0 3px rgba(122,99,83,.18)}
.dr-lock{font:800 20px/1 var(--font);color:#BFAE9C}

.dr-off{margin-top:4px;width:100%;border:0;cursor:pointer;font:inherit;font-weight:800;
  font-size:clamp(12.5px,3.4vw,14.5px);color:var(--deep);background:#EDF6FB;
  padding:10px;border-radius:15px;box-shadow:inset 0 0 0 2px rgba(31,94,138,.16)}
.dr-off:active{transform:translateY(2px)}

/* nobody chosen: the tray says so rather than silently doing nothing */
#scDress.nobody .dr-items,#scDress.nobody .dr-off{opacity:.45}
#scDress.nobody .dr-tray::after{content:'tap Mo or Pip first';
  position:absolute;left:0;right:0;top:-26px;text-align:center;
  font:800 12.5px/1 var(--font);color:#FFF3DE;text-shadow:0 1px 4px rgba(40,20,30,.7)}
#scDress .dr-tray{position:relative}

@media (prefers-reduced-motion:reduce){
  .dr-pick,.dr-spot,.dr-tick,.dr-room{transition:none}
  .dr-bulbs span,.dr-glint{animation:none}
}

/* the party popper earns a bit more presence than the other five toys */
.toy.toy-party{animation:partyWait 3.6s ease-in-out infinite}
@keyframes partyWait{0%,84%,100%{transform:none}90%{transform:scale(1.16) rotate(-8deg)}95%{transform:scale(1.06)}}
.toy.toy-party:active{transform:scale(.9)}
@media (prefers-reduced-motion:reduce){.toy.toy-party{animation:none}}

/* the walkthrough points at a tab */
.dr-tab.dt-nudge{animation:dtNudge 1.1s var(--spring) infinite;box-shadow:0 0 0 3px var(--sun),0 0 18px rgba(255,206,61,.7)}
@keyframes dtNudge{0%,100%{transform:translateY(0) scale(1)}40%{transform:translateY(-6px) scale(1.08)}}

/* the rail's three things ring like bells when tapped (dressroom.js) */
.dr-hang{cursor:pointer;transform-origin:50% 0}
.dr-hang.ring{animation:drRing .6s var(--spring)}
@keyframes drRing{0%{transform:rotate(0)}30%{transform:rotate(-9deg)}60%{transform:rotate(7deg)}100%{transform:rotate(0)}}

/* ============================ TWO MORE THINGS TO FIND
   The bulbs on the wall are a scale — tap them one at a time and they light
   and sound; light all seven and they run a chase. They were decoration for
   three versions and the room ran out of things to do on the second visit. */
.dr-bulbs span{cursor:pointer;pointer-events:auto;transition:background .25s,box-shadow .25s}
/* a bulb wants a finger, not a pea: the drawn bulb is under twenty pixels, so
   the touch area is grown around it without changing how it looks */
.dr-bulbs span::after{content:"";position:absolute;left:50%;top:50%;
  width:44px;height:44px;transform:translate(-50%,-50%);border-radius:50%}
.dr-bulbs span{position:relative}
.dr-bulbs span.lit{background:#FFE79A;
  box-shadow:0 0 10px 3px rgba(255,206,61,.85),inset 0 0 0 2px rgba(240,169,59,.6)}
.dr-bulbs span.ping{animation:drPing .5s cubic-bezier(0.34,1.56,0.64,1)}
@keyframes drPing{0%,100%{transform:scale(1)}45%{transform:scale(1.55)}}

/* the mirror answers a touch: the glass catches the light and the two of them
   pull a pose in it */
.dr-mirror{cursor:pointer}
.dr-mirror.tapped .dr-glint{animation:drGlint .9s ease-in-out}
@keyframes drGlint{0%{transform:translate(-120%,-40%) rotate(18deg);opacity:0}
  25%{opacity:.95}
  100%{transform:translate(140%,60%) rotate(18deg);opacity:0}}

/* ================= THREE MORE THINGS ON THE WALL
   Placed in the gaps: the box on the left below the mirror, the cat on the
   floor to its right, the picture up on the right beside the rail. None of
   them may sit under the characters or the tray — see the layout note in
   reach.test. Every one gets a finger-sized box of its own. */
.dr-thing{position:absolute;border:0;padding:0;background:none;cursor:pointer;
  z-index:3;min-width:52px;min-height:52px;touch-action:manipulation}
.dr-thing svg{width:100%;height:auto;display:block;
  filter:drop-shadow(0 3px 4px rgba(90,60,70,.22))}
.dr-thing:active{transform:scale(.94)}

/* WHERE THEY GO, measured rather than guessed. Mo owns x 11-56% and Pip
   x 58-84%, both from y 57% down; the mirror is x 6-40% y 18-49% and the rail
   x 59-95% y 20-50%. That leaves one clear column between the mirror and the
   rail, and a band across the top of the characters' heads. Nothing a child is
   meant to touch may sit behind a character — the first attempt put the cat
   squarely behind Mo, which is the same mistake this app has made in three
   other rooms. */
.dr-box{left:42%;top:23%;width:16%;max-width:78px}
.dr-box .dr-dancer{transform-box:fill-box;transform-origin:50% 100%}
.dr-box.open .dr-dancer{animation:drSpin 1.8s linear}
@keyframes drSpin{from{transform:rotateY(0)}to{transform:rotateY(720deg)}}
.dr-box.open svg{animation:drJig .3s ease-in-out 5}
@keyframes drJig{0%,100%{transform:translateY(0)}50%{transform:translateY(-4%)}}

.dr-cat{right:1%;top:74%;width:14%;max-width:66px}
.dr-cat .dr-catbody{transform-box:fill-box;transform-origin:50% 100%;
  transition:transform .35s cubic-bezier(0.34,1.56,0.64,1)}
.dr-cat.up .dr-catbody{transform:translateY(-10%) scale(1.06,1.1)}
.dr-cat .dr-catlid{opacity:1;transition:opacity .2s}
.dr-cat.up .dr-catlid{opacity:0}

.dr-photo{left:43%;top:39%;width:14%;max-width:68px}
.dr-photo.snap svg{animation:drSnap .45s cubic-bezier(0.34,1.56,0.64,1)}
@keyframes drSnap{0%,100%{transform:rotate(0) scale(1)}45%{transform:rotate(-5deg) scale(1.12)}}
/* the four faces the two of them pull */
.dr-face.p2{transform:scaleY(1.12) translateY(-3%)}
.dr-face.p3{transform:rotate(-8deg)}
.dr-face.p4{transform:scaleX(-1) translateX(-100%)}
.dr-face{transform-box:fill-box;transform-origin:50% 50%;transition:transform .25s cubic-bezier(0.34,1.56,0.64,1)}

/* the room is dark: everything on the wall goes quiet with it */
.dr-room.dark .dr-thing svg{filter:brightness(.55)}