:root{--cream:#FFF8E7;--sun:#FFD23F;--coral:#FF6B6B;--teal:#4ECDC4;--ink:#2B2118;--card:#fff}
*{box-sizing:border-box}
body{margin:0;font-family:'Fredoka',sans-serif;color:var(--ink);background:var(--cream)}
.app{min-height:100vh;position:relative;overflow-x:hidden;background:radial-gradient(circle at 20% 10%,#ffe9a8 0,transparent 40%),radial-gradient(circle at 85% 80%,#ffd3c9 0,transparent 40%),var(--cream);transition:background .5s}
.app.dark{--ink:#FFF4D6;--card:#1d2340;background:radial-gradient(circle at 50% 30%,#2a2f5c,#0c0f24 70%)}
.stars{position:fixed;inset:0;background-image:radial-gradient(1.5px 1.5px at 20% 30%,#fff,transparent),radial-gradient(1px 1px at 70% 20%,#fff,transparent),radial-gradient(2px 2px at 40% 80%,#ffe,transparent),radial-gradient(1px 1px at 85% 60%,#fff,transparent),radial-gradient(1.5px 1.5px at 10% 70%,#fff,transparent);background-size:300px 300px;animation:tw 4s infinite alternate}
@keyframes tw{to{opacity:.4}}
.title{font-size:clamp(2.6rem,8vw,4.5rem);font-weight:700;letter-spacing:-.02em;line-height:1;color:var(--coral);text-shadow:4px 4px 0 var(--sun)}
.sub{font-weight:300;font-size:1.1rem;opacity:.8;min-height:1.6em}
.chip{background:var(--card);border:2px solid var(--ink);border-radius:999px;width:42px;height:42px;box-shadow:3px 3px 0 var(--ink)}
.pill{background:var(--sun);color:#2B2118;border:2px solid #2B2118;border-radius:999px;padding:6px 14px;font-weight:700;font-size:.9rem;box-shadow:3px 3px 0 #2B2118}
.tilt{transform:rotate(3deg)}.tilt2{transform:rotate(-2deg)}
.stage{position:relative;height:44vh;min-height:260px;width:100%;display:flex;align-items:center;justify-content:center}
.spot{position:absolute;width:min(80vw,420px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,210,63,.55),transparent 65%)}
.dark .spot{background:radial-gradient(circle,rgba(255,210,63,.35),transparent 65%)}
.hand{position:relative;font-size:min(36vh,58vw);line-height:1;background:none;border:0;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .1s}
.hand:active{transform:scale(.92,.88)}
.dark .hand{filter:drop-shadow(0 0 30px rgba(255,210,63,.6))}
.hand span{display:inline-block;transform-origin:70% 90%}
.swing{animation:swing .9s ease-in-out}
@keyframes swing{0%,100%{transform:rotate(0)}15%,55%{transform:rotate(-20deg)}35%,75%{transform:rotate(18deg)}}
.charging span{animation:shake .08s infinite;filter:drop-shadow(0 0 calc(var(--c)*50px) var(--sun)) brightness(calc(1 + var(--c)*.3))}
@keyframes shake{50%{transform:translate(3px,-2px) rotate(4deg)}}
.frantic span{animation:swing .25s infinite;filter:blur(3px)}
.chargebar{position:absolute;bottom:6px;width:220px;height:22px;border:2px solid var(--ink);border-radius:999px;overflow:hidden;background:var(--card)}
.chargebar div{height:100%;background:linear-gradient(90deg,var(--sun),var(--coral))}
.chargebar span{position:absolute;inset:0;font-size:.75rem;font-weight:700;display:flex;align-items:center;justify-content:center;color:#2B2118}
.part{position:absolute;font-size:2rem;pointer-events:none;animation:burst 1s ease-out forwards}
@keyframes burst{from{transform:translate(0,0) scale(.3);opacity:1}to{transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(1.1);opacity:0}}
.bubble{position:absolute;top:4%;right:12%;background:var(--card);border:2px solid var(--ink);border-radius:20px 20px 20px 4px;padding:6px 14px;font-weight:700;font-size:1.3rem;box-shadow:3px 3px 0 var(--ink);animation:bub 1.6s forwards;z-index:3}
@keyframes bub{0%{transform:scale(0)}12%{transform:scale(1.1)}20%,80%{transform:scale(1)}100%{transform:scale(.8) translateY(-20px);opacity:0}}
.ripple{position:fixed;left:50%;top:40%;width:40px;height:40px;border-radius:50%;border:8px solid var(--teal);transform:translate(-50%,-50%);animation:rip 1.2s ease-out forwards;pointer-events:none;z-index:2}
@keyframes rip{to{width:250vmax;height:250vmax;opacity:0;border-width:2px}}
.suitcase{position:fixed;bottom:80px;left:-80px;font-size:4rem;animation:roll 3s linear forwards;z-index:20}
@keyframes roll{to{left:110vw;transform:rotate(720deg)}}
.swatch{font-size:1.6rem;width:46px;height:46px;border-radius:50%;background:var(--card);border:2px solid transparent;transition:.15s}
.swatch.on{border-color:var(--ink);box-shadow:3px 3px 0 var(--ink);transform:translateY(-3px)}
.hint{font-family:'DM Mono',monospace;font-size:.72rem;opacity:.6;margin-top:8px;text-align:center}
.card{background:var(--card);border:2px solid var(--ink);border-radius:28px;padding:18px 20px;box-shadow:6px 6px 0 var(--ink)}
.lbl{font-family:'DM Mono',monospace;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;opacity:.7;display:flex;align-items:center;gap:6px}
.big{font-size:3.2rem;font-weight:700;line-height:1.1;color:var(--coral)}
.pop{animation:pop .3s}
@keyframes pop{50%{transform:scale(1.15)}}
.badge{display:inline-block;margin-top:6px;background:var(--teal);color:#123;padding:3px 12px;border-radius:999px;font-weight:500;font-size:.85rem;border:2px solid #123}
.dot{width:9px;height:9px;border-radius:50%;background:#2ecc71;animation:pulse 1.2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(46,204,113,0)}0%{box-shadow:0 0 0 0 rgba(46,204,113,.6)}}
.mini{font-size:.85rem;opacity:.75}
.backtxt{font-size:1.1rem;margin-top:4px}
.btn{background:var(--sun);color:#2B2118;font-weight:700;padding:10px 18px;border:2px solid #2B2118;border-radius:999px;box-shadow:3px 3px 0 #2B2118;white-space:nowrap}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #2B2118}
.btn.coral{background:var(--coral);color:#fff}
.btn:disabled{opacity:.6}
.ticker{overflow:hidden;margin-top:28px;border-block:2px solid var(--ink);background:var(--sun);color:#2B2118;padding:10px 0}
.track{display:flex;gap:36px;white-space:nowrap;width:max-content;animation:mq 40s linear infinite;font-weight:500}
.track .hi{background:#fff;border-radius:999px;padding:0 10px;transform:scale(1.15);display:inline-block}
@keyframes mq{to{transform:translateX(-50%)}}
.toast{position:fixed;top:18px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--cream);padding:12px 22px;border-radius:999px;font-weight:700;z-index:60;animation:bub 3.2s forwards;white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis}
.dark .toast{background:var(--sun);color:#2B2118}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:50;display:flex;align-items:flex-end;justify-content:center}
.drawer{background:var(--card);color:var(--ink);width:100%;max-width:560px;max-height:80vh;overflow:auto;border:2px solid var(--ink);border-bottom:0;border-radius:32px 32px 0 0;padding:22px;animation:slide .35s ease-out}
@keyframes slide{from{transform:translateY(100%)}}
.row{display:flex;align-items:center;gap:12px;padding:10px;border-radius:18px}
.row.me{background:var(--sun);color:#2B2118}
.rank{font-family:'DM Mono',monospace;width:24px;font-weight:500}
.num{font-family:'DM Mono',monospace;font-weight:500}
.fadeIn{animation:fi .5s}
@keyframes fi{from{opacity:0;transform:translateY(4px)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important}}