*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none}
body{font-family:"Nunito","Trebuchet MS",system-ui,sans-serif;color:#23324a;background:linear-gradient(#bfe8ff,#fffaf0 60%);touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#app{display:flex;flex-direction:column;height:100vh;height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.bar{display:flex;align-items:center;gap:.6rem;padding:.5rem .8rem;background:#fff;box-shadow:0 2px 8px #0001}
.bar .title{flex:1;font-weight:900;color:#2a7de1;font-size:1.4rem}
.home,.replay{width:56px;height:56px;border-radius:50%;border:0;background:#ffe27a;font-size:1.7rem;display:grid;place-items:center;text-decoration:none;cursor:pointer}
.replay{background:#ff8a00;color:#fff}
.stars{font-size:1.4rem;font-weight:900;background:#fff3c4;padding:.3rem .9rem;border-radius:99px}
.guide{display:flex;align-items:center;gap:.8rem;padding:.6rem 1rem}
.guide img{width:78px;height:78px;border-radius:50%;border:4px solid #fff;box-shadow:0 4px 12px #0002;object-fit:cover;flex:none}
.guide img.talk{animation:bob .5s ease 2}
.bubble{background:#fff;border-radius:20px;padding:.7rem 1.1rem;font-size:1.35rem;font-weight:800;box-shadow:0 4px 12px #0001;position:relative;flex:1}
.bubble:before{content:"";position:absolute;left:-12px;top:50%;margin-top:-10px;border:10px solid transparent;border-right:14px solid #fff;border-left:0}
.progress{display:flex;justify-content:center;gap:.5rem;padding:0 0 .3rem}
.progress span{width:44px;height:12px;border-radius:99px;background:#d6e4f5}.progress span.done{background:#2fb36d}.progress span.on{background:#ff8a00}
#stage{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.5rem 1rem 1rem;position:relative}
svg.scene{width:100%;height:100%;max-height:100%;display:block;touch-action:none}
.card{background:#fff;border-radius:24px;box-shadow:0 6px 20px #0002;padding:1rem}
.big-btn{border:0;border-radius:99px;background:#ff8a00;color:#fff;font:inherit;font-weight:900;font-size:1.6rem;padding:1rem 2.2rem;min-height:70px;cursor:pointer;box-shadow:0 5px 0 #c96a00;text-decoration:none;display:inline-flex;align-items:center;gap:.5rem}
.big-btn:active{transform:translateY(3px);box-shadow:0 2px 0 #c96a00}
.big-btn.green{background:#2fb36d;box-shadow:0 5px 0 #1e8550}.big-btn.blue{background:#2a7de1;box-shadow:0 5px 0 #1a5cae}
.start{text-align:center}.start h1{color:#2a7de1;font-size:2.6rem;margin:.2rem 0}
.cast{display:flex;justify-content:center;gap:.6rem;margin:1rem 0;flex-wrap:wrap}
.cast img{width:110px;height:110px;border-radius:50%;border:5px solid #fff;box-shadow:0 4px 12px #0002;object-fit:cover}
.cast.party img{animation:bob .7s ease-in-out infinite}.cast.party img:nth-child(2){animation-delay:.15s}.cast.party img:nth-child(3){animation-delay:.3s}.cast.party img:nth-child(4){animation-delay:.45s}
.choices{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:.6rem}
.choice{border:5px solid #fff;background:#fff;border-radius:24px;min-width:130px;min-height:120px;padding:.6rem 1rem;font:inherit;font-size:1.5rem;font-weight:900;color:#23324a;box-shadow:0 5px 14px #0002;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem}
.choice svg{width:110px;height:90px}
.choice.right{border-color:#2fb36d;background:#e6f8ee}.choice.nope{animation:shake .4s}
.choice .dots{font-size:1rem;letter-spacing:2px;color:#ff8a00}
.count-wrap{display:flex;flex-direction:column;align-items:center;width:100%;height:100%;min-height:0}
.count-wrap svg{flex:1;min-height:0}
.sort{display:grid;grid-template-rows:1fr auto;width:100%;height:100%;gap:.8rem;min-height:0}
.tray{position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:1rem}
.item{width:120px;height:120px;border-radius:22px;background:#fff;box-shadow:0 5px 14px #0002;display:flex;flex-direction:column;align-items:center;justify-content:center;touch-action:none;cursor:grab;font-weight:900;font-size:1rem;z-index:2}
.item svg{width:84px;height:84px;pointer-events:none}.item span{pointer-events:none}
.item.drag{z-index:50;box-shadow:0 14px 30px #0004;transform-origin:center}
.item.sel{outline:5px solid #ff8a00}
.item.placed{width:64px;height:64px;box-shadow:none;background:transparent}.item.placed svg{width:56px;height:56px}.item.placed span{display:none}
.baskets{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem}
.basket{min-height:150px;border-radius:24px;background:#fff;border:5px dashed #ffc83d;display:flex;flex-direction:column;align-items:center;padding:.4rem;font-weight:900;font-size:1.2rem}
.basket.hot{background:#fff3c4;border-style:solid}
.basket .lbl{display:flex;align-items:center;gap:.3rem}.basket .lbl svg{width:40px;height:40px}
.basket .in{display:flex;flex-wrap:wrap;justify-content:center}
@media (orientation:portrait){.baskets{grid-template-columns:repeat(2,1fr)}.basket{min-height:130px}.guide img{width:70px;height:70px}}
.toast{position:fixed;left:50%;top:45%;transform:translate(-50%,-50%) scale(.6);font-size:4rem;opacity:0;pointer-events:none;transition:all .35s;z-index:99}
.toast.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.confetti{position:fixed;top:-20px;width:14px;height:20px;border-radius:3px;pointer-events:none;z-index:98;animation:fall 2.6s linear forwards}
.pulse{animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
@keyframes bob{50%{transform:translateY(-10px)}}
@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
.hit{cursor:pointer}
.end{text-align:center}.end h1{color:#2a7de1;margin:.2rem 0;font-size:2.4rem}.end .bigstars{font-size:2.6rem}
.end .choices .big-btn{font-size:1.3rem}