:root{
  --wall:#BFE6F7;
  --floor:#F6C98B;
  --wood:#C98B4F;
  --wood-2:#B37538;
  --wood-dark:#7A4A22;
  --hole:#5B3A1F;
  --ink:#2A3A4A;
  --green:#22C55E;
  --green-dark:#15803D;
  --font:"Baloo 2", "Segoe UI", system-ui, sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{background:var(--wall)}
body{margin:0;color:var(--ink);font:18px/1.3 var(--font);padding-inline:12px;padding-block:8px 12px;-webkit-tap-highlight-color:transparent;
  background:linear-gradient(var(--wall) 0 58%,var(--floor) 58% 100%) fixed,var(--wall);overscroll-behavior:none}
.app{max-width:1000px;margin-inline:auto;height:calc(100vh - 20px);height:calc(100dvh - 20px);min-height:420px;display:grid;grid-template-rows:auto 1fr;gap:6px}

.bar{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px}
.back{color:var(--ink);text-decoration:none;font-weight:700;font-size:17px;white-space:nowrap;opacity:.75}
.back:hover{opacity:1}
.title{margin:0;font-weight:800;font-size:clamp(1.4rem,4vw,2.1rem);white-space:nowrap;line-height:1}
.title span{color:#E0582B}
.bar-actions{display:flex;gap:8px;align-items:center}
.icon-btn,.shelf-btn{height:46px;border-radius:14px;border:0;background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0;box-shadow:0 3px 0 rgba(0,0,0,.12)}
.icon-btn{width:46px}
.icon-btn span{display:grid;place-items:center}
.icon-btn span[hidden]{display:none}
.icon-btn svg{width:24px;height:24px}
.shelf-btn{display:flex;gap:4px;padding:0 12px;font:800 1.2rem var(--font)}
.shelf-btn span{font-size:1.5rem}
.shelf-btn.bump{animation:bump .5s}
@keyframes bump{40%{scale:1.25}}
:focus-visible{outline:4px solid #E0582B;outline-offset:3px}

.stage{position:relative;min-height:0;touch-action:none;user-select:none;-webkit-user-select:none}
.box{position:absolute;border-radius:22px;
  background:repeating-linear-gradient(90deg,var(--wood) 0 46px,var(--wood-2) 46px 48px),var(--wood);
  box-shadow:inset 0 -14px 0 rgba(0,0,0,.14),inset 0 5px 0 rgba(255,255,255,.25),0 12px 0 var(--wood-dark),0 22px 26px rgba(0,0,0,.18)}
.lid{position:absolute;inset:-10px -10px auto;height:26px;border-radius:14px;background:var(--wood-2);box-shadow:0 5px 0 var(--wood-dark);
  transform-origin:12% 100%;transition:transform .6s cubic-bezier(.3,1.6,.5,1)}
.box.open .lid{transform:rotate(-24deg) translateY(-18px)}
.box.shake{animation:shake .5s}
@keyframes shake{20%{rotate:-2deg}40%{rotate:2deg}60%{rotate:-1.5deg}80%{rotate:1deg}}

.hole,.shape{position:absolute;display:block}
.hole path{fill:var(--hole)}
.hole{filter:drop-shadow(0 -3px 0 rgba(0,0,0,.25))}
.hole.hint{animation:glow 1s ease-in-out 3}
@keyframes glow{50%{filter:drop-shadow(0 0 12px #fff) drop-shadow(0 0 20px #FFE066)}}

.shape{cursor:grab;touch-action:none;filter:drop-shadow(0 6px 0 rgba(0,0,0,.18));transition:left .35s cubic-bezier(.3,1.3,.5,1),top .35s cubic-bezier(.3,1.3,.5,1),scale .2s;z-index:2}
.shape path{stroke:rgba(0,0,0,.22);stroke-width:4;stroke-linejoin:round}
.shape.drag{transition:scale .15s;scale:1.12;z-index:5;cursor:grabbing;filter:drop-shadow(0 14px 6px rgba(0,0,0,.22))}
.shape.in{scale:.9;filter:none;cursor:default;z-index:1}
.shape.hint{animation:wiggle .5s ease-in-out 4}
@keyframes wiggle{25%{rotate:-10deg}75%{rotate:10deg}}

.toy{position:absolute;z-index:8;font-size:clamp(90px,24vmin,190px);line-height:1;translate:-50% -50%;pointer-events:none;animation:popup 1s cubic-bezier(.3,1.5,.5,1) both}
.toy[hidden]{display:none}
@keyframes popup{0%{scale:.2;opacity:0;translate:-50% 10%}100%{scale:1;opacity:1;translate:-50% -50%}}
.confetti{position:absolute;width:12px;height:16px;border-radius:3px;z-index:7;pointer-events:none;animation:fall 1.6s ease-out forwards}
@keyframes fall{to{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:0}}

.next{position:absolute;z-index:9;right:8px;bottom:8px;width:clamp(84px,20vmin,120px);aspect-ratio:1;border:0;border-radius:50%;background:var(--green);color:#fff;
  box-shadow:0 7px 0 var(--green-dark);display:grid;place-items:center;cursor:pointer;animation:pulse 1.4s ease-in-out infinite}
.next svg{width:55%;height:55%}
.next[hidden]{display:none}
.next:active{translate:0 5px;box-shadow:0 2px 0 var(--green-dark)}
@keyframes pulse{50%{scale:1.08}}

.overlay{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:16px;background:rgba(30,50,70,.55);overflow-y:auto}
.overlay[hidden]{display:none}
.sheet{position:relative;width:100%;max-width:560px;background:#fff;border-radius:26px;padding:20px;display:grid;gap:12px;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.sheet-title{margin:0;text-align:center;font-weight:800;font-size:1.6rem}
.toys{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.toys button{aspect-ratio:1;border:0;border-radius:18px;background:#FFF1DC;font-size:clamp(34px,10vw,56px);display:grid;place-items:center;padding:0;cursor:pointer}
.toys button.locked{background:#EEF2F5;filter:grayscale(1);opacity:.35;cursor:default}
.close{position:absolute;top:10px;right:10px;width:44px;height:44px;border-radius:50%;border:0;background:#EEF2F5;font:800 1.2rem var(--font);color:var(--ink);cursor:pointer}

@media (max-width:640px){
  .back-tx{display:none}
  .back{font-size:24px}
}
@media (prefers-reduced-motion:reduce){
  .shape,.lid{transition:none}
  .next,.toy,.hole.hint,.shape.hint,.box.shake{animation:none}
}