/* Unpack It — cozy room styles */
:root{
  --ink:#3b2a1e; --ink2:#6b5443; --paper:#fffdf8; --cream:#fbf5ea; --gold:#ffc93c; --gold2:#e9a91e;
  --wall:#f1e4cc; --wall2:#e8d6b6; --trim:#fbf5ea; --floor:#b8875c; --floor2:#a47449;
  --itemH:80px; --handH:92px; --shelfTop:40px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#1b1712;overscroll-behavior:none}
body{
  font-family:Nunito,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--ink);overflow:hidden;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;
  background:radial-gradient(900px 500px at 50% -100px, rgba(255,201,60,.12), transparent 70%), #1b1712;
}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
svg{display:block}

#stage{position:relative;max-width:520px;margin:0 auto;height:100vh;height:100dvh;overflow:hidden;background:var(--wall)}
@media (min-width:560px){ #stage{box-shadow:0 0 70px rgba(0,0,0,.55)} }
.screen{position:absolute;inset:0;display:none;flex-direction:column;overflow:hidden}
.screen.active{display:flex}

/* ---------- shared bits ---------- */
.back{font-weight:800;font-size:14px;color:var(--ink);opacity:.72;text-decoration:none;padding:10px 6px;white-space:nowrap;flex:none}
.back:hover{opacity:1}
.btn{display:block;width:100%;max-width:280px;margin:0 auto;border-radius:999px;font-family:Fredoka,Nunito,sans-serif;font-weight:600;
  font-size:18px;padding:13px 22px;transition:transform .12s ease, box-shadow .12s ease}
.btn:active{transform:translateY(2px) scale(.98)}
.btn.big{background:linear-gradient(#ffd45e,#f5b82a);color:#3b2a1e;box-shadow:0 4px 0 #c98f12, 0 8px 18px rgba(120,70,0,.25);font-size:21px}
.btn.big:active{box-shadow:0 2px 0 #c98f12}
.btn.soft{background:rgba(255,255,255,.7);color:var(--ink);box-shadow:0 3px 0 rgba(59,42,30,.18)}
.bar{flex:none;height:48px;display:flex;align-items:center;gap:6px;padding:0 8px 0 6px;background:rgba(255,253,248,.72);
  border-bottom:1px solid rgba(59,42,30,.1);position:relative;z-index:20;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.bar-title{flex:1;text-align:center;font-family:Fredoka,sans-serif;font-weight:600;font-size:19px}
.bar-stars{font-weight:800;font-size:15px;color:#b07d0c;padding-right:6px;white-space:nowrap}
.icon-btn{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(59,42,30,.08);flex:none}
.icon-btn:active{background:rgba(59,42,30,.16)}

/* ---------- title ---------- */
#scr-title{background:
  repeating-linear-gradient(90deg, transparent 0 26px, rgba(255,255,255,.22) 26px 28px), var(--wall)}
#scr-title .back{position:absolute;top:6px;left:8px;z-index:3}
.title-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:40px 24px 90px;text-align:center;position:relative;z-index:2}
.title-art{width:min(300px,78vw);aspect-ratio:260/190}
.title-art svg{width:100%;height:100%}
h1{font-family:Fredoka,sans-serif;font-weight:700;font-size:clamp(46px,14vw,64px);line-height:.95;letter-spacing:.5px;color:var(--ink)}
h1 span{color:#e08a1e}
.sub{color:var(--ink2);font-size:16px;line-height:1.45;font-weight:700;margin-bottom:6px}
.title-wrap .btn.soft{max-width:200px;font-size:15px;padding:9px 18px}
.title-floor{position:absolute;left:0;right:0;bottom:0;height:80px;z-index:1;
  background:linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,0) 12px),repeating-linear-gradient(90deg,var(--floor) 0 58px,var(--floor2) 58px 60px)}
.title-floor::before{content:'';position:absolute;left:0;right:0;top:-10px;height:10px;background:var(--trim);box-shadow:0 2px 3px rgba(0,0,0,.12)}

/* ---------- map ---------- */
#scr-map{background:#efe6d6}
.map-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;padding:14px 12px 40px}
.chap{position:relative;border-radius:22px;margin:0 0 16px;padding:16px 10px 8px;overflow:hidden;
  background:repeating-linear-gradient(90deg, transparent 0 22px, rgba(255,255,255,.22) 22px 24px), var(--cw);
  box-shadow:0 2px 0 rgba(59,42,30,.08), inset 0 0 0 1px rgba(59,42,30,.06)}
.chap.locked-ch{filter:saturate(.35);opacity:.8}
.chap-head{text-align:center;position:relative;z-index:2}
.chap-num{font-weight:800;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink2)}
.chap h2{font-family:Fredoka,sans-serif;font-weight:600;font-size:25px;margin:2px 0}
.chap-stars{font-weight:800;font-size:13px;color:#a06f05}
.trail{position:relative;margin-top:4px}
.trail svg.path{position:absolute;inset:0;width:100%;height:100%}
.trail svg.path path{fill:none;stroke:rgba(59,42,30,.28);stroke-width:5;stroke-linecap:round;stroke-dasharray:1 11}
.node{position:absolute;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;font-family:Fredoka,sans-serif;font-weight:700;font-size:22px;
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  background:radial-gradient(circle at 35% 30%, #fff 0, #fff7e6 45%, #f1dcb8 100%);color:var(--ink);
  box-shadow:0 4px 0 rgba(59,42,30,.25), 0 8px 14px rgba(59,42,30,.18);transition:transform .12s}
.node:active{transform:scale(.94)}
.node.done{background:radial-gradient(circle at 35% 30%, #fff6d4 0, #ffd45e 50%, #eaa81f 100%)}
.node.current{animation:nodePulse 1.6s ease-in-out infinite}
.node.locked{background:radial-gradient(circle at 35% 30%, #eee8de 0, #d6cdbf 70%);color:rgba(59,42,30,.4);box-shadow:0 3px 0 rgba(59,42,30,.14);cursor:default}
.node .nstars{position:absolute;bottom:-17px;left:50%;transform:translateX(-50%);font-size:13px;letter-spacing:1px;color:#b07d0c;white-space:nowrap;
  text-shadow:0 1px 0 rgba(255,255,255,.8)}
.node .nstars i{font-style:normal;color:rgba(59,42,30,.22)}
.node .here{position:absolute;top:-30px;left:50%;transform:translateX(-50%);width:34px;height:26px;animation:bob 1.4s ease-in-out infinite}
@keyframes nodePulse{0%,100%{box-shadow:0 4px 0 rgba(59,42,30,.25),0 0 0 0 rgba(255,201,60,.7)}50%{box-shadow:0 4px 0 rgba(59,42,30,.25),0 0 0 10px rgba(255,201,60,0)}}
@keyframes bob{50%{transform:translate(-50%,-4px)}}

/* ---------- play ---------- */
#scr-play{touch-action:none;background:var(--wall)}
.lvl{flex:1;min-width:0;text-align:center;line-height:1.1}
.lvl b{display:block;font-family:Fredoka,sans-serif;font-weight:600;font-size:16px}
.lvl span{display:block;font-size:12px;font-weight:700;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud-stars{display:flex;gap:1px;flex:none}
.hud-stars svg{width:18px;height:18px;transition:transform .2s, opacity .3s}
.hud-stars svg.off{opacity:.25;transform:scale(.8)}
.hud-stars svg.lose{animation:starLose .5s ease}
@keyframes starLose{30%{transform:scale(1.4) rotate(-15deg)}100%{transform:scale(.8)}}

.room{position:relative;flex:1;min-height:0;overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% 20%, rgba(255,255,255,.28), transparent 60%),
    repeating-linear-gradient(90deg, transparent 0 26px, rgba(255,255,255,.2) 26px 28px),
    var(--wall)}
.room::after{content:'';position:absolute;left:0;right:0;bottom:0;height:9px;background:var(--trim);box-shadow:0 -1px 0 rgba(59,42,30,.08), 0 -3px 6px rgba(59,42,30,.06);z-index:1}
.decor{position:absolute;inset:0;z-index:1;pointer-events:none}
.garland{position:absolute;left:0;right:0;top:0;height:30px}
.garland svg{position:absolute;inset:0;width:100%;height:100%}
.bulb{position:absolute;width:8px;height:11px;margin-left:-4px;border-radius:50% 50% 45% 45%;background:var(--b);box-shadow:0 0 8px 2px var(--b);animation:twinkle 3s ease-in-out infinite}
@keyframes twinkle{50%{opacity:.55;box-shadow:0 0 3px 0 var(--b)}}
.win{position:absolute;top:34px;left:50%;transform:translateX(-50%);height:calc(var(--shelfTop) - 52px);aspect-ratio:1/1.08;max-width:62%}
.win svg{width:100%;height:100%;overflow:visible}
.room.n3 .win,.room.n4 .win{display:none}
.frame{position:absolute;top:44px;width:15%;aspect-ratio:3/4;max-height:calc(var(--shelfTop) - 70px)}
.frame.l{left:7%} .frame.r{right:7%}
.room.n3 .frame,.room.n4 .frame{display:none}
.frame svg{width:100%;height:100%}

.shelves{position:absolute;left:0;right:0;top:var(--shelfTop);bottom:12px;display:flex;flex-direction:column;justify-content:space-evenly;z-index:2}
.shelf{position:relative;margin:0 10px;padding-bottom:12px}
.slots{display:flex;align-items:flex-end;height:var(--itemH);padding:0 10px;gap:2px;position:relative}
.slot{flex:1 1 0;min-width:0;height:100%;display:flex;align-items:flex-end;justify-content:center;position:relative;cursor:grab}
.slot svg.it{height:100%;width:auto;max-width:100%;overflow:visible;transform-origin:50% 100%}
.slot .sil{opacity:.12}
.shelf.beckon .sil{animation:beckon 1.4s ease}
@keyframes beckon{20%,60%{opacity:.5}40%,80%{opacity:.18}}
.slot.target::after{content:'';position:absolute;left:10%;right:10%;bottom:-4px;height:6px;border-radius:4px;background:var(--gold);box-shadow:0 0 12px 2px rgba(255,201,60,.9)}
.slot.sel svg.it{filter:drop-shadow(0 0 5px rgba(255,190,40,1))}
.slot.sel::before{content:'';position:absolute;left:50%;top:-10px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold)}
.shelf.locked .slot{cursor:default}
svg.it.lifted{visibility:hidden}
svg.it.settle{animation:settle .34s ease-out}
@keyframes settle{0%{transform:translateY(-5px) scale(1.02,.98)}45%{transform:translateY(0) scale(1.07,.9)}75%{transform:scale(.97,1.04)}100%{transform:none}}
.plank{position:relative;height:12px;border-radius:3px;
  background:linear-gradient(#d6a06d,#b07b4e 55%,#8e603b);box-shadow:0 6px 8px -3px rgba(60,30,10,.4), inset 0 1px 0 rgba(255,255,255,.4)}
.plank::after{content:'';position:absolute;inset:0;border-radius:3px;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.75) 50%,transparent 70%);
  background-size:260% 100%;background-position:120% 0;opacity:0}
.shelf.just-locked .plank::after{animation:glint .9s ease-out}
@keyframes glint{0%{opacity:1;background-position:120% 0}100%{opacity:1;background-position:-40% 0}}
.plank i{position:absolute;top:12px;width:9px;height:13px;background:linear-gradient(90deg,#6e4a2e,#8e603b);border-radius:0 0 5px 5px}
.plank i:first-child{left:9%} .plank i:last-child{right:9%}
.tagrow{position:absolute;left:0;right:0;top:calc(var(--itemH) + 1px);display:flex;justify-content:center;pointer-events:none;z-index:3}
.tag{pointer-events:auto;height:21px;padding:0 10px 0 8px;border-radius:7px;background:var(--cream);border:1.5px solid rgba(59,42,30,.2);
  font-weight:800;font-size:12px;color:#5a4232;display:flex;align-items:center;gap:5px;box-shadow:0 3px 5px rgba(59,42,30,.14);transform-origin:50% 0}
.tag svg{width:13px;height:13px}
.tag .ck{display:none}
.shelf.locked .tag{background:linear-gradient(#ffe083,#f5b82a);color:#3b2a1e;border-color:#d99a12}
.shelf.locked .tag .ck{display:block}
.shelf.just-locked .tag{animation:tagPop .5s ease}
.tag.shake{animation:tagShake .55s ease}
@keyframes tagPop{40%{transform:scale(1.25)}}
@keyframes tagShake{15%{transform:rotate(9deg)}35%{transform:rotate(-8deg)}55%{transform:rotate(6deg)}75%{transform:rotate(-3deg)}}
.flame-glow{animation:flicker 1.8s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 50%}
@keyframes flicker{0%,100%{opacity:.9;transform:scale(1)}40%{opacity:.6;transform:scale(.88)}70%{opacity:1;transform:scale(1.06)}}
.spark{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;pointer-events:none;z-index:5;
  background:var(--c,#fff3b0);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
  animation:spark .9s ease-out forwards;animation-delay:var(--d,0s);opacity:0}
@keyframes spark{0%{opacity:0;transform:scale(.2) rotate(0)}25%{opacity:1;transform:scale(1.2) rotate(30deg)}100%{opacity:0;transform:translateY(-18px) scale(.4) rotate(90deg)}}

/* tray + box */
.tray{flex:none;height:170px;position:relative;z-index:3;
  background:linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,0) 14px),repeating-linear-gradient(90deg,var(--floor) 0 58px,var(--floor2) 58px 60px)}
.rug{position:absolute;left:50%;bottom:6px;width:260px;height:44px;margin-left:-130px;border-radius:50%;
  background:repeating-radial-gradient(ellipse at center, #d9785f 0 7px, #e8a27a 7px 13px);opacity:.55;box-shadow:inset 0 0 0 3px rgba(255,255,255,.2)}
.box{position:absolute;left:50%;bottom:8px;width:150px;height:84px;margin-left:-75px;padding:0}
.box svg{width:100%;height:100%;overflow:visible}
.box .flap{transform-box:fill-box;transition:transform .2s}
.box .fl{transform-origin:100% 100%} .box .fr{transform-origin:0 100%}
.box.ready{animation:boxBob 1.8s ease-in-out infinite}
.box.ready .fl{animation:flapL 1.8s ease-in-out infinite} .box.ready .fr{animation:flapR 1.8s ease-in-out infinite}
@keyframes boxBob{50%{transform:translateY(-2px)}}
@keyframes flapL{50%{transform:rotate(-6deg)}} @keyframes flapR{50%{transform:rotate(6deg)}}
.box.squash{animation:boxSquash .3s ease}
@keyframes boxSquash{35%{transform:scale(1.06,.9)}70%{transform:scale(.97,1.04)}}
.box.nudge{animation:nudge .35s ease}
@keyframes nudge{25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-2px)}}
.box.empty{opacity:.55;filter:saturate(.6)}
.box-count{position:absolute;right:6px;top:18px;min-width:28px;height:28px;padding:0 7px;border-radius:14px;background:var(--ink);color:#fff;
  font-weight:800;font-size:14px;line-height:28px;text-align:center;box-shadow:0 2px 4px rgba(0,0,0,.25)}
.box.empty .box-count{display:none}
.hand{position:absolute;left:50%;bottom:78px;width:150px;margin-left:-75px;height:var(--handH);display:flex;align-items:flex-end;justify-content:center;z-index:4}
.hand::before{content:'';position:absolute;left:50%;bottom:-6px;width:96px;height:22px;margin-left:-48px;border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,236,170,.75), rgba(255,236,170,0));opacity:0;transition:opacity .25s}
.hand.full::before{opacity:1}
.held{height:100%;display:flex;align-items:flex-end;cursor:grab;animation:float 2.6s ease-in-out infinite;position:relative;z-index:1}
.held svg.it{height:100%;width:auto;max-width:150px;overflow:visible;transform-origin:50% 100%}
.held svg.it.pop{animation:pop .5s cubic-bezier(.2,1.6,.4,1)}
.held.sel svg.it{filter:drop-shadow(0 0 7px rgba(255,190,40,1))}
.held.no{animation:wobble .45s ease}
@keyframes float{50%{transform:translateY(-4px)}}
@keyframes pop{0%{transform:translateY(70px) scale(.3);opacity:0}60%{transform:translateY(-8px) scale(1.05);opacity:1}100%{transform:none}}
@keyframes wobble{20%{transform:rotate(-10deg)}40%{transform:rotate(9deg)}60%{transform:rotate(-6deg)}80%{transform:rotate(3deg)}}
.label{position:absolute;left:calc(50% + 40px);bottom:18px;white-space:nowrap;background:var(--paper);color:var(--ink);font-weight:800;font-size:12px;
  padding:4px 9px;border-radius:10px;box-shadow:0 2px 5px rgba(59,42,30,.2);animation:labelIn .4s ease .15s both;pointer-events:none}
@keyframes labelIn{from{opacity:0;transform:translateX(-6px)}}
.bit{position:absolute;left:50%;bottom:74px;width:9px;height:6px;border-radius:1px;background:var(--c);pointer-events:none;z-index:5;animation:bit .7s ease-out forwards}
@keyframes bit{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:0}}

/* drag ghost */
#dragLayer{position:fixed;inset:0;pointer-events:none;z-index:60}
.ghost{position:fixed;pointer-events:none;filter:drop-shadow(0 12px 10px rgba(40,20,5,.3));transition:width .12s, height .12s}
.ghost svg{width:100%;height:100%;overflow:visible;transform-origin:50% 100%}
.ghost.wobble svg{animation:wobble .4s ease}

/* toast + coach */
.toast{position:absolute;left:50%;top:58px;transform:translate(-50%,-8px);max-width:calc(100% - 32px);width:max-content;z-index:25;pointer-events:none;
  background:var(--ink);color:#fff;font-weight:700;font-size:14px;line-height:1.35;text-align:center;padding:9px 14px;border-radius:14px;
  box-shadow:0 6px 16px rgba(0,0,0,.25);opacity:0;transition:opacity .2s, transform .2s}
.toast.show{opacity:1;transform:translate(-50%,0)}
.coach{position:absolute;inset:0;pointer-events:none;z-index:30;display:none}
.coach.show{display:block}
.bubble{position:absolute;left:50%;top:0;transform:translate(-50%,-100%);max-width:min(300px,calc(100% - 24px));width:max-content;background:var(--paper);color:var(--ink);
  font-family:Fredoka,Nunito,sans-serif;font-weight:600;font-size:17px;line-height:1.25;text-align:center;padding:10px 15px;border-radius:16px;
  box-shadow:0 6px 18px rgba(59,42,30,.25), 0 0 0 2px rgba(255,201,60,.8);animation:bubbleIn .35s ease}
.bubble::after{content:'';position:absolute;left:50%;bottom:-7px;width:14px;height:14px;margin-left:-7px;background:var(--paper);transform:rotate(45deg);
  box-shadow:2px 2px 0 0 rgba(255,201,60,.8)}
.coach.under .bubble{transform:translate(-50%,0)}
.coach.under .bubble::after{bottom:auto;top:-7px;box-shadow:-2px -2px 0 0 rgba(255,201,60,.8)}
@keyframes bubbleIn{from{opacity:0;margin-top:6px}}
.finger{position:absolute;left:0;top:0;width:44px;height:56px;margin:-4px 0 0 -18px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.25));display:none}
.coach.tap .finger{display:block;animation:tapFinger 1.2s ease-in-out infinite}
.coach.drag .finger{display:block;animation:dragFinger 2s ease-in-out infinite}
@keyframes tapFinger{0%,100%{transform:translate(var(--x0),var(--y0)) scale(1)}45%{transform:translate(var(--x0),calc(var(--y0) + 6px)) scale(.9)}}
@keyframes dragFinger{0%{transform:translate(var(--x0),var(--y0));opacity:0}12%{opacity:1}70%{transform:translate(var(--x1),var(--y1));opacity:1}90%,100%{transform:translate(var(--x1),var(--y1));opacity:0}}

/* ---------- overlays ---------- */
.overlay{position:absolute;inset:0;z-index:50;display:none;align-items:center;justify-content:center;padding:16px;
  background:rgba(38,26,16,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.overlay.show{display:flex;animation:fadeIn .25s ease}
@keyframes fadeIn{from{opacity:0}}
.card{background:var(--paper);border-radius:24px;padding:22px 20px 20px;width:100%;max-width:340px;text-align:center;
  box-shadow:0 18px 50px rgba(0,0,0,.35);animation:cardIn .35s cubic-bezier(.2,1.3,.4,1)}
@keyframes cardIn{from{transform:translateY(24px) scale(.95);opacity:0}}
.card h2{font-family:Fredoka,sans-serif;font-weight:600;font-size:26px;margin-bottom:10px}
.card p{color:var(--ink2);font-weight:700;font-size:16px;line-height:1.45;margin:10px 0 18px}
.card.pause .btn{margin-top:10px}
.kicker{font-weight:800;font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:#c07a0a;margin-bottom:4px}
.tip-demo:empty{display:none}
.tip-demo{display:flex;justify-content:center;align-items:flex-end;gap:4px;height:84px;margin:6px auto 0;padding:0 14px;position:relative}
.tip-demo:not(:empty)::after{content:'';position:absolute;left:4px;right:4px;bottom:-8px;height:8px;border-radius:3px;background:linear-gradient(#d6a06d,#8e603b)}
.tip-demo svg{height:100%;width:auto;max-width:40px}
.tip-demo .gap{width:10px}
.tip-demo .tb{display:flex;align-items:center;justify-content:center;gap:6px;height:100%}

.result{width:100%;max-width:360px;display:flex;flex-direction:column;align-items:center;gap:14px}
.polaroid{background:#fffdf8;padding:12px 12px 14px;border-radius:5px;box-shadow:0 20px 50px rgba(0,0,0,.45);transform:rotate(-2.2deg);
  animation:photoIn .6s cubic-bezier(.2,1.2,.4,1)}
@keyframes photoIn{from{transform:translateY(-40px) rotate(-9deg) scale(.9);opacity:0}}
.photo{position:relative;overflow:hidden;margin:0 auto;background:var(--wall);border-radius:2px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.photo::after{content:'';position:absolute;inset:0;background:#fff;animation:flash .7s ease-out forwards;pointer-events:none}
@keyframes flash{from{opacity:1}to{opacity:0}}
.photo .snap{position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:none;flex:none}
.pcap{padding:10px 4px 0;text-align:center}
.pstars{display:flex;justify-content:center;gap:4px;height:30px;margin-bottom:2px}
.pstars svg{width:30px;height:30px;opacity:.18;transform:scale(.7)}
.pstars svg.on{animation:starIn .45s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes starIn{to{opacity:1;transform:scale(1)}}
.proom{font-family:Caveat,cursive;font-weight:700;font-size:28px;line-height:1;color:var(--ink)}
.ptext{font-family:Caveat,cursive;font-weight:600;font-size:21px;line-height:1.15;color:var(--ink2);margin-top:4px}
.res-note{color:#fff;font-weight:800;font-size:14px;text-align:center;min-height:18px;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.res-btns{display:flex;gap:8px;width:100%}
.res-btns .btn{flex:1;max-width:none;font-size:16px;padding:12px 8px}
.res-btns .btn.big{flex:1.4;font-size:19px}

@media (max-height:620px){ .tray{height:150px} .hand{bottom:70px} :root{--handH:80px} }
@media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important} }