/* игра «Наряди <ребёнка>» (dress): стили только этой игры. Селекторы без #s-dress действуют на всю страницу — новые правила пишите через #s-dress. */
/* dress */
.doll-wrap{position:absolute;left:50%;bottom:1vh;height:84vh;transform:translateX(-50%);z-index:3;aspect-ratio:2/3}
.doll{position:relative;width:100%;height:100%}
.doll-body{position:absolute;inset:0;width:100%;height:100%;z-index:10}
.worn{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;animation:wear .35s}
.worn img{width:100%;display:block}
/* НЕАКТИВНО (перекрыто более поздним @keyframes wear, строка 526 старого style.css — побеждает последнее определение): @keyframes wear{0%{transform:translate(-50%,-50%) scale(1.5)}60%{transform:translate(-50%,-50%) scale(.9)}100%{transform:translate(-50%,-50%) scale(1)}} */
.tray{position:absolute;top:0;bottom:0;width:24vw;z-index:20;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:2vmin;padding:14vmin 1vw 2vmin;overflow:hidden}
.tray-a{left:env(safe-area-inset-left)}
.tray-b{right:env(safe-area-inset-right)}
.bubble{width:16vmin;height:16vmin;border-radius:50%;background:rgba(255,255,255,.9);box-shadow:0 .8vmin 0 rgba(255,143,200,.9),0 1vmin 2vmin rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;touch-action:none}
.bubble img{width:78%;height:78%;object-fit:contain}
.bubble.used{opacity:.45}
@media (orientation:portrait){
  .doll-wrap{top:9vh;bottom:auto;height:52vh}
  .tray{top:auto;bottom:0;height:auto;width:100%;padding:1vh 2vw 3vh;gap:1.6vmin}
  .tray-a{bottom:15vh}
  .tray-b{bottom:0}
  .bubble{width:14vmin;height:14vmin}
}

/* dress v2 */
.doll{animation:breathe 3s ease-in-out infinite;transform-origin:50% 100%}
.dress-actions{position:absolute;top:calc(2vmin + env(safe-area-inset-top));left:50%;transform:translateX(-50%);display:flex;gap:3vmin;z-index:50}
.doll-wrap.dance .doll{animation:dance .55s ease-in-out infinite alternate}
/* @keyframes dance -> перенесён в core/core.css (им пользуется color, dress) */
#dress-bg.swap{animation:screen-in .5s}
.bubble{animation:floaty 3s ease-in-out infinite}
.polaroid{position:fixed;left:50%;top:50%;width:52vmin;padding:2.4vmin 2.4vmin 9vmin;background:#fff;box-shadow:0 2vmin 5vmin rgba(0,0,0,.45);z-index:940;translate:-50% -50%;rotate:-5deg;animation:pola-in .45s;transition:translate .6s ease-in,rotate .6s,opacity .6s;pointer-events:none}
/* @keyframes pola-in -> перенесён в core/core.css (им пользуется bath, dress) */
.polaroid.away{translate:70vw -90vh;rotate:35deg;opacity:0}
.pshot{position:relative;width:100%;aspect-ratio:1/1.12;overflow:hidden;background:#cde}
.pbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pdoll{position:absolute;left:50%;bottom:1%;height:94%;aspect-ratio:2/3;transform:translateX(-50%)}

/* dress v3 */
.doll.spin{animation:spin .52s ease-in-out}
@keyframes spin{50%{scale:0 1.05}}
.tray{align-content:center;gap:1.6vmin}
.bubble.out img{width:74%;height:88%}
.mission{position:absolute;left:27vw;top:16vh;width:19vmin;min-height:19vmin;padding:1.6vmin;border-radius:5vmin 5vmin 5vmin 1vmin;background:#fff;box-shadow:0 .8vmin 0 #b89cff,0 1.2vmin 2.4vmin rgba(0,0,0,.25);z-index:30;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.6vmin;animation:floaty 3s ease-in-out infinite}
.mission:empty{display:none}
.mission img{height:14vmin;max-width:100%;object-fit:contain}
.mission img.mh{height:7vmin;max-width:45%}
.mission.ask{animation:pulse .35s 2}
.mission.done{box-shadow:0 0 0 1vmin #6be06b,0 1.2vmin 2.4vmin rgba(0,0,0,.25)}
@media (orientation:portrait){
  .doll-wrap{top:9vh;bottom:auto;height:50vh}
  .tray{padding:.6vh 1vw;gap:1.2vmin}
  .tray-a{bottom:17vh}
  .tray-b{bottom:.6vh}
  .bubble{width:13vmin;height:13vmin}
  .mission{left:3vw;top:12vh;width:22vmin}
}
@media (orientation:landscape){
  #s-dress .bubble{width:13.4vmin;height:13.4vmin}
  #s-dress .tray{width:25vw;gap:1.2vmin;padding:15vmin .4vw 1vmin}
  .mission{left:26.5vw}
}
@media (orientation:portrait){#s-dress .doll-wrap{height:46vh}
  #s-dress .bubble{width:12vmin;height:12vmin}
  #s-dress .tray{gap:1vmin;padding:0 1vw}
  #s-dress .tray-a{bottom:23.5vh}
  #s-dress .tray-b{bottom:.8vh}
  .mission{top:calc(30vmin + env(safe-area-inset-top));width:20vmin;min-height:20vmin}
  }

@media (orientation:landscape){.doll-wrap{height:80vh}}
#dress-bg[src*="bg_menu"],#dress-bg[src*="bg_farm"],#dress-bg[src*="bg_sky"]{object-position:50% 0}
@media (orientation:landscape){#s-dress .bubble{width:min(13.4vmin,7.4vw);height:min(13.4vmin,7.4vw)}}

/* dress v4: a room for every outfit, hats sit on the head, little living details */
#s-dress{--ui:calc(env(safe-area-inset-top) + 2vmin + min(13vmin,84px) + 1.4vmin)}
.worn{transform:translate(-50%,var(--ay,-50%))}
@keyframes wear{0%{scale:1.5}60%{scale:.9}100%{scale:1}}
/* the doll leaves room above the head for the tallest hat (17% of her height) under the top buttons */
@media (orientation:landscape){#s-dress .doll-wrap{top:auto;bottom:1%;height:min(80%,calc((99% - var(--ui)) / 1.17))}}
@media (orientation:portrait){#s-dress .doll-wrap{--dh:min(46%,calc((75.5% - 25.5vw - var(--ui)) / 1.17));height:var(--dh);top:calc(var(--ui) + var(--dh) * .17);bottom:auto}}
#s-dress .room-next{opacity:0;transition:opacity .65s ease}
#s-dress .room-next.in{opacity:1}
.room-fx{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.room-fx i{position:absolute;display:block;animation-timing-function:linear;animation-iteration-count:infinite}
.room-fx .snow{top:-4%!important;width:1.6vmin;height:1.6vmin;border-radius:50%;background:#fff;box-shadow:0 0 .8vmin rgba(255,255,255,.9);scale:var(--s);animation-name:fx-fall}
.room-fx i.rain{top:-6%!important;width:.35vmin;height:2.6vmin;border-radius:1vmin;background:linear-gradient(rgba(170,215,255,0),rgba(150,200,255,.8));animation-name:fx-fall}
.room-fx .petal{top:-4%!important;width:1.8vmin;height:1.2vmin;border-radius:100% 0 100% 0;background:#ffb3d1;opacity:.9;scale:var(--s);animation-name:fx-petal}
.room-fx i.spark,.room-fx i.star{width:2.6vmin;height:2.6vmin;background:#fff6b0;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);filter:drop-shadow(0 0 .6vmin #fff);animation-name:twinkle;animation-timing-function:ease-in-out;opacity:0}
.room-fx i.star{background:#fff;width:2vmin;height:2vmin}
.room-fx .fxb{top:auto!important;bottom:-6%;width:3vmin;height:3vmin;border-radius:50%;border:.3vmin solid rgba(255,255,255,.85);background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.9) 0 14%,rgba(190,235,255,.25) 16%);scale:var(--s);animation-name:fx-rise;animation-timing-function:ease-in}
@keyframes fx-fall{from{transform:translate(0,0)}to{transform:translate(var(--dx),112vh)}}
@keyframes fx-petal{from{transform:translate(0,0) rotate(0)}50%{transform:translate(calc(var(--dx) * -1),56vh) rotate(200deg)}to{transform:translate(var(--dx),112vh) rotate(400deg)}}
@keyframes fx-rise{0%{transform:translate(0,0);opacity:0}15%{opacity:1}85%{opacity:.9}100%{transform:translate(var(--dx),-70vh);opacity:0}}
@media (prefers-reduced-motion:reduce){.room-fx{display:none}}
/* the flying polaroid shows the hat too */
.pdoll{height:80%}

/* dress v5: 22 outfits and 74 things — tabs and pages in the trays, more headroom for tall hats */
#s-dress .bubble.off{display:none}
#s-dress .bubble.more{background:linear-gradient(#ff9fd0,#e0559c);box-shadow:0 .8vmin 0 #a83a72,0 1vmin 2vmin rgba(0,0,0,.2);animation:none}
#s-dress .bubble.more svg{width:56%;height:56%}
#s-dress .tray.flip,.dress-items.flip{animation:tray-in .3s ease-out}
@keyframes tray-in{from{opacity:.2;translate:0 1.5vmin}}
#s-dress .tray-b{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start}
.dress-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:1.2vmin;flex:none;margin:0 auto}
.dtab{width:var(--tb);height:var(--tb);border-radius:28%;border:none;background:rgba(255,255,255,.72);box-shadow:0 .6vmin 0 rgba(150,110,200,.55);display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;transition:transform .15s;touch-action:manipulation}
.dtab img{width:78%;height:78%;object-fit:contain;pointer-events:none}
.dtab.on{background:#fff;box-shadow:0 0 0 .6vmin #ff8fc8,0 .9vmin 0 .3vmin #e0559c;transform:scale(1.06)}
.dtab.hint:not(.on){animation:tabhint 1.1s ease-in-out infinite}
@keyframes tabhint{50%{box-shadow:0 0 0 .9vmin #ffd23f,0 .6vmin 0 rgba(150,110,200,.55);scale:1.1}}
.dress-items{flex:1;min-height:0;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:1.2vmin;padding-top:1.2vmin}
.worn{transform:translate(calc(var(--ax,.5) * -100%),calc(var(--ay,.5) * -100%)) rotate(var(--r,0deg));transform-origin:calc(var(--ax,.5) * 100%) calc(var(--ay,.5) * 100%)}
.worn img{transform-origin:50% 0}
@media (orientation:landscape){
  #s-dress{--bs:min(13.4vmin,7.4vw);--tb:min(calc(var(--bs) * .8),calc((25vw - 6vmin) / 3))}
  #s-dress .bubble{width:var(--bs);height:var(--bs)}
  #s-dress .tray{width:25vw;gap:1.2vmin;padding:calc(15vmin + env(safe-area-inset-top)) .4vw 1.5vmin}
  .dress-tabs{max-width:calc(var(--tb) * 3 + 2.4vmin + 2px)}
  #s-dress .doll-wrap{top:auto;bottom:1%;height:min(80%,calc((99% - var(--ui)) / 1.18))}
}
@media (orientation:portrait){
  #s-dress{--bs:min(12vmin,76px);--tb:calc(var(--bs) * .9);--hb:calc(var(--tb) + 2 * var(--bs) + 7vmin);--ha:calc(2 * var(--bs) + 3.6vmin)}
  #s-dress .bubble{width:var(--bs);height:var(--bs)}
  #s-dress .tray{width:100%;left:0;right:0;top:auto;gap:1vmin;padding:0 2vw}
  #s-dress .tray-b{bottom:calc(.8% + env(safe-area-inset-bottom));height:var(--hb);padding-top:1.2vmin}
  #s-dress .tray-a{bottom:calc(1.8% + var(--hb) + env(safe-area-inset-bottom));height:var(--ha);align-content:center}
  .dress-items{gap:1vmin}
  #s-dress .doll-wrap{--dh:min(46%,calc((97.4% - var(--hb) - var(--ha) - var(--ui) - env(safe-area-inset-bottom)) / 1.18));height:var(--dh);top:calc(var(--ui) + var(--dh) * .18);bottom:auto}
}

/* dress: mum's portrait on the corner of the task card */
#s-dress .helper{z-index:31;width:11vmin;height:11vmin;left:calc(26.5vw - 2vmin);top:calc(16vh - 7vmin);bottom:auto}
#s-dress .hp-pic{border-width:.6vmin}
@media (orientation:portrait){#s-dress .helper{width:10vmin;height:10vmin;left:calc(3vw + 15vmin);top:calc(23vmin + env(safe-area-inset-top));bottom:auto}}

/* ---------- dress drag v6: only dragging dresses the child; bright hints and a helping hand ---------- */
.dress-ghost{position:fixed;z-index:1000;pointer-events:none;translate:-50% -50%;scale:1.15;filter:drop-shadow(0 2vmin 2vmin rgba(0,0,0,.35));touch-action:none}
#s-dress .bubble.held{opacity:.35;animation:none}
#s-dress .bubble.hop{animation:dress-hop .7s ease-out}
@keyframes dress-hop{0%{translate:0 0;scale:1}35%{translate:0 -3.5vmin;scale:1.18}65%{translate:0 -2vmin;scale:1.1}100%{translate:0 0;scale:1}}
.dhand{position:fixed;left:0;top:0;width:13vmin;max-width:110px;z-index:1001;pointer-events:none;margin:-.5vmin 0 0 -5.6vmin;filter:drop-shadow(0 .8vmin 1.2vmin rgba(0,0,0,.45)) drop-shadow(0 0 1.2vmin rgba(255,230,90,.9))}
.dhand svg{display:block;width:100%;height:auto}
.dhand-thing{position:fixed;left:0;top:0;width:14vmin;z-index:1000;pointer-events:none;margin:-9vmin 0 0 -7vmin;filter:drop-shadow(0 1.2vmin 1.4vmin rgba(0,0,0,.35))}
#s-dress .bubble.glow,#s-dress .dtab.glow{position:relative;z-index:25;background:#fffbe0;outline:max(3px,.9vmin) solid #ffd400;outline-offset:max(2px,.5vmin);box-shadow:0 0 0 max(5px,1.9vmin) #fff,0 0 0 max(7px,2.6vmin) #ff9f1c,0 0 6vmin 3vmin rgba(255,214,40,1),0 1vmin 2vmin rgba(0,0,0,.5);animation:dress-glow .8s ease-in-out infinite alternate}
@keyframes dress-glow{from{scale:1.12;rotate:-7deg}to{scale:1.38;rotate:7deg}}
#s-dress .mission.glow{box-shadow:0 0 0 1vmin #ffe14d,0 0 0 1.7vmin #fff,0 0 5vmin 2.5vmin rgba(255,214,40,.95),0 1.2vmin 2.4vmin rgba(0,0,0,.35);animation:dress-glow-m .9s ease-in-out infinite alternate}
@keyframes dress-glow-m{from{scale:1}to{scale:1.12}}
/* the tab hint during a mission (kept) is brighter too */
#s-dress .dtab.hint:not(.on){box-shadow:0 0 0 .7vmin #ffe14d,0 0 3vmin 1vmin rgba(255,214,40,.85),0 .6vmin 0 rgba(150,110,200,.55)}
#s-dress .bubble.glow::after,#s-dress .dtab.glow::after{content:"";position:absolute;inset:-2.6vmin;border-radius:50%;border:max(4px,1.2vmin) solid #ffd400;box-shadow:0 0 0 max(2px,.6vmin) #fff,inset 0 0 0 max(2px,.5vmin) #fff,0 0 3vmin 1.5vmin rgba(255,190,0,.9);animation:dress-ring 1s ease-out infinite;pointer-events:none}
#s-dress .dtab.glow::after{border-radius:34%}
@keyframes dress-ring{from{scale:.8;opacity:1}to{scale:1.3;opacity:0}}
/* ---------- end dress drag v6 ---------- */
/* помощник из семьи: размер и место на экране этой игры (их читает общий .helper.fam3d в core/core.css).
   --hp-h = высота фигуры (доля высоты экрана), --hp-x = отступ слева, --hp-y = где стоят ноги (от низа) */
#s-dress .helper.fam3d{--hp-h:30%;--hp-x:2.5vmin;--hp-y:1%}
@media (orientation:portrait){#s-dress .helper.fam3d{--hp-h:20%}}
@media (orientation:portrait){#s-dress.has-fam3d .doll-wrap{left:auto;right:calc(3vw + env(safe-area-inset-right));transform:none}   /* mum stands on the left, the child moves right */
}
@media (orientation:landscape){#s-dress.has-fam3d .doll-wrap{left:auto;right:calc(25vw + 1.5vmin + env(safe-area-inset-right));transform:none}}   /* the child steps right, mum stands left of her */
@keyframes screen-in{from{opacity:0;scale:1.06}}
/* размер и место помощника считает placeMum() в dress.js: видимая фигура 28% высоты экрана в портрете, 41% в альбомной (не меньше 25% / 37%),
   по ширине всех её поз; если места мало — кукла немного уменьшается */

/* portrait (04.10.2026, the customer's request, final): outfits in a column on the RIGHT that scrolls up-down
   (pulling a dress to the left towards the child is then never mistaken for a scroll); at the bottom the category baskets and one row of things
   that scrolls left-right (pulling a thing up to the child is never a scroll). the child gets the middle. Heights in % (Safari). */
@media (orientation:portrait){
  #s-dress{--bs:min(15vmin,78px);--tb:min(14vmin,68px);--col:calc(var(--bs) + 4vmin);--row:calc(var(--bs) * 1.12 + 2.4vmin);--hb:calc(var(--row) + var(--tb) * 1.4 + 6vmin)}
  #s-dress .tray-a{left:auto;right:env(safe-area-inset-right);width:var(--col);top:var(--ui);bottom:calc(1.8% + var(--hb) + env(safe-area-inset-bottom));height:auto;
    display:flex;flex-direction:column;flex-wrap:nowrap;align-items:center;justify-content:flex-start;align-content:normal;gap:2vmin;padding:1.6vmin 0 6vmin;
    overflow-x:hidden;overflow-y:auto;touch-action:pan-y;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(transparent,#000 3%,#000 88%,transparent);mask-image:linear-gradient(transparent,#000 3%,#000 88%,transparent)}
  #s-dress .tray-a .bubble{flex:none;touch-action:none}   /* dress.js grab(): along the column the finger scrolls it, across it takes the outfit */
  #s-dress .tray-b{left:0;right:0;width:100%;height:var(--hb);bottom:calc(.8% + env(safe-area-inset-bottom));padding:0;overflow:visible}
  #s-dress .dress-tabs{flex:none;flex-wrap:nowrap;justify-content:center;padding:1vmin 2vw 1vmin;gap:2.6vmin;max-width:none}
  #s-dress .dress-items{flex:none;height:var(--row);flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;align-items:center;align-content:normal;
    overflow-x:auto;overflow-y:hidden;touch-action:pan-x;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;scrollbar-width:none;
    gap:2.2vmin;padding:1.2vmin 4vw;-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 88%,transparent)}
  #s-dress .dress-items .bubble{flex:none;touch-action:none}   /* dress.js grab(): along the strip the finger scrolls it, up it takes the thing */
  #s-dress .tray-a::-webkit-scrollbar,#s-dress .dress-items::-webkit-scrollbar{display:none}
  /* a narrow phone makes the doll smaller (width limit): the feet stay on the floor where the full-size doll stands, only the head comes down */
  #s-dress .doll-wrap,#s-dress.has-fam3d .doll-wrap{--dmax:calc((99% - var(--hb) - var(--ui) - env(safe-area-inset-bottom)) / 1.18);--dh:min(var(--dmax),calc((100vw - var(--bs) - 4vmin - 18vw) * 1.5 / .84));
    height:var(--dh);top:calc(var(--ui) + var(--dmax) * 1.18 - var(--dh));bottom:auto;left:auto;right:calc(var(--bs) + 5vmin - var(--dh) * .056 + env(safe-area-inset-right));transform:none}   /* the box sides are empty (arms reach 8–92 %), they may go under the column; the doll measures the outfit column without the room kept for the glow ring (--col) */
}
/* category = a wicker basket with three things peeking out of it */
#s-dress .dtab{position:relative;overflow:visible;background:none!important;border:0!important;box-shadow:none!important;border-radius:0;width:var(--tb);height:calc(var(--tb) * 1.4);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
#s-dress .dtab .bk-items{position:absolute;left:-6%;right:-6%;top:0;height:72%;pointer-events:none}
#s-dress .dtab .bk-i{position:absolute;width:62%;height:auto;max-height:100%;object-fit:contain;filter:drop-shadow(0 .3vmin .3vmin rgba(0,0,0,.25))}
#s-dress .dtab .bk-i0{left:0;top:18%;rotate:-16deg}
#s-dress .dtab .bk-i1{left:24%;top:0;z-index:2}
#s-dress .dtab .bk-i2{right:0;top:18%;rotate:16deg}
#s-dress .dtab .bk-front{position:absolute;left:2%;right:2%;bottom:3%;height:40%;border-radius:12% 12% 30% 30%/18% 18% 42% 42%;z-index:3;pointer-events:none;
  background:repeating-linear-gradient(90deg,#d9a05b 0 9%,#c4853f 9% 12%),linear-gradient(#e6b273,#b8742f);background-blend-mode:multiply;
  border-top:max(3px,1vmin) solid #a8642a;box-shadow:inset 0 -.8vmin 0 rgba(0,0,0,.15),0 .6vmin .8vmin rgba(0,0,0,.25)}
#s-dress .dtab.on{transform:translateY(-1vmin) scale(1.12)}
#s-dress .dtab.on .bk-front{background:repeating-linear-gradient(90deg,#ff9fd0 0 9%,#ff7bbd 9% 12%),linear-gradient(#ffc2e2,#ff6fb0);border-top-color:#e0559c;box-shadow:0 0 0 .5vmin #fff,0 0 2.4vmin .6vmin rgba(255,111,176,.9)}
#s-dress .dtab.on .bk-i1{animation:bk-peek 1.6s ease-in-out infinite}
@keyframes bk-peek{50%{translate:0 -10%}}
#s-dress .dtab.hint:not(.on) .bk-front{animation:bk-hint 1s ease-in-out infinite}
@keyframes bk-hint{50%{box-shadow:0 0 0 .6vmin #ffd23f,0 0 2.6vmin .8vmin rgba(255,210,63,.95)}}
/* things of a new tab slide in one after another */
#s-dress .bubble.slide{animation:thing-in .42s cubic-bezier(.3,1.5,.5,1) var(--in,0ms) backwards,floaty 3s ease-in-out infinite}
@keyframes thing-in{from{opacity:0;translate:14vmin 0;scale:.6}}

/* the hint ring around an outfit in the right column must not be cut by the column edge */
@media (orientation:portrait){
  #s-dress{--col:calc(var(--bs) + 11vmin)}
  #s-dress .tray-a{padding-left:0;padding-right:0}
  #s-dress .tray-a .bubble.glow{outline:max(3px,.8vmin) solid #ffd400;outline-offset:0;box-shadow:0 0 0 max(4px,1.4vmin) #fff,0 0 0 max(6px,2.2vmin) #ff9f1c}
  #s-dress .tray-a .bubble.glow::after{display:none}
  #s-dress .tray-a .bubble.glow{animation:col-glow 1s ease-in-out infinite alternate;scale:1}
}

.polaroid .psave{position:absolute;left:50%;bottom:1.2vmin;translate:-50% 0;width:13vmin;height:13vmin;max-width:72px;max-height:72px;border-radius:50%;background:linear-gradient(#7ddf7a,#35b955);box-shadow:0 .8vmin 0 #1f8038,0 1vmin 2vmin rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;animation:pulse 1.2s infinite ease-in-out;pointer-events:auto}
.polaroid .psave svg{width:60%;height:60%}
.polaroid{pointer-events:auto}
@keyframes col-glow{to{box-shadow:0 0 0 max(4px,1.4vmin) #fff,0 0 0 max(6px,2.2vmin) #ffd400}}

/* ---------- dress QA 11.10: small fixes ---------- */
/* the glowing task card grows to the right/down only: its ring must not touch the left edge of a narrow phone */
@media (orientation:portrait){#s-dress .mission.glow{transform-origin:0 0}}
/* ---------- end dress QA 11.10 ---------- */

/* ---------- dress polish 14.10: game feel (classes dp-*; transform/opacity only) ---------- */
.dp-p{position:fixed;z-index:980;pointer-events:none;border-radius:50%}
.dp-p.star{border-radius:0;clip-path:polygon(50% 0,62% 36%,100% 38%,70% 60%,80% 96%,50% 74%,20% 96%,30% 60%,0 38%,38% 36%)}
.dp-p.txt{background:none!important;font-weight:900;line-height:1;text-shadow:0 .3vmin .3vmin rgba(0,0,0,.2)}
.dp-ring{position:fixed;z-index:979;pointer-events:none;border-radius:50%;border:max(3px,.8vmin) solid #ffe14d;box-shadow:0 0 1.6vmin rgba(255,255,255,.8)}
/* soft halo behind the child (the hero is easy to find); brighter while a thing is carried over her */
.dp-aura{position:absolute;left:-26%;right:-26%;top:-6%;bottom:-2%;z-index:-1;pointer-events:none;border-radius:50%;opacity:.38;
  background:radial-gradient(closest-side,rgba(255,244,190,.95),rgba(255,206,236,.5) 58%,rgba(255,255,255,0) 100%);transition:opacity .25s ease-out;animation:dp-aura 3.4s ease-in-out infinite}
.dp-near .dp-aura{opacity:.95}
@keyframes dp-aura{50%{scale:1.06}}
/* overlays over the background only (below the child and the trays) */
#s-dress .dp-flash,#s-dress .dp-glow,#s-dress .dp-rainbow{position:absolute;inset:0;pointer-events:none;opacity:0}
#s-dress .dp-flash{z-index:4;background:#fff}
#s-dress .dp-glow{z-index:2;background:radial-gradient(circle at 50% 55%,var(--gc,rgba(255,232,140,.9)),rgba(255,255,255,0) 64%)}
#s-dress .dp-rainbow{z-index:2;filter:none;left:0;right:auto;width:200%;background:linear-gradient(90deg,#ff5b6e,#ffc531,#4fc36b,#3fa3ff,#b26cff,#ff8fc8,#ff5b6e,#ffc531,#4fc36b,#3fa3ff,#b26cff,#ff8fc8,#ff5b6e)}
/* streak sign */
#s-dress .dp-banner{position:absolute;left:50%;top:calc(var(--ui) + 1vmin);z-index:46;pointer-events:none;white-space:nowrap;font:900 min(11vmin,64px)/1 "Arial Black",Arial,sans-serif;color:#fff;letter-spacing:.02em;
  -webkit-text-stroke:max(3px,.9vmin) #e0559c;paint-order:stroke fill;text-shadow:0 .9vmin 0 #a83a72,0 1.4vmin 2.4vmin rgba(0,0,0,.3);opacity:0}
#s-dress .dp-banner.rec{top:calc(var(--ui) + min(13vmin,76px));font-size:min(8vmin,46px);color:#fff7b0;-webkit-text-stroke-color:#ff9f1c;text-shadow:0 .7vmin 0 #c96500,0 1.2vmin 2vmin rgba(0,0,0,.3)}
/* buttons and cards press in and spring back */
#s-dress .round-btn,#s-dress .bubble,#s-dress .dtab,#s-dress .mission{transition:scale .22s cubic-bezier(.34,1.56,.64,1),opacity .25s ease-out,transform .12s}
#s-dress .round-btn:active,#s-dress .bubble:not(.glow):active,#s-dress .dtab:active{scale:.9}
.dress-ghost{transition:rotate .15s ease-out}
/* the new room settles in with a little zoom; light motes live in every room */
#s-dress .room-next{scale:1.05;transition:opacity .65s ease,scale .9s ease-out}
#s-dress .room-next.in{scale:1}
.room-fx i.mote{bottom:-4%;top:auto!important;width:1.5vmin;height:1.5vmin;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.95),rgba(255,247,200,.35) 55%,rgba(255,255,255,0) 72%);scale:var(--s);animation-name:fx-rise;animation-timing-function:ease-in-out}
@media (prefers-reduced-motion:reduce){.dp-aura{animation:none}.room-fx{display:none}}
/* the baskets keep their own springy hint transform */
#s-dress .dtab{transition:scale .22s cubic-bezier(.34,1.56,.64,1),transform .25s cubic-bezier(.3,1.6,.5,1)}
/* ---------- end dress polish 14.10 ---------- */