*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;overflow:hidden;font-family:Fredoka,system-ui,sans-serif;background:radial-gradient(ellipse at 30% 0%,#ffd89b 0%,transparent 55%),radial-gradient(ellipse at 70% 100%,#ff9a76 0%,transparent 55%),linear-gradient(180deg,#f6c280,#e89060);-webkit-tap-highlight-color:transparent;user-select:none;touch-action:none}#stage{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:20px}#hud-top{width:min(100%,calc((100vh - 170px)*.66));max-width:460px;display:flex;align-items:stretch;justify-content:space-between;gap:24px}#wrap{position:relative;width:min(100%,calc((100vh - 170px)*.66));height:min(100vh - 170px,152vw);max-width:460px;max-height:700px;border-radius:22px;overflow:hidden;box-shadow:0 30px 60px -20px #501e0080}canvas{display:block;width:100%;height:100%}.hud{position:absolute;pointer-events:none;color:#fff8e7;font-weight:700;text-shadow:0 2px 4px rgba(60,20,0,.6)}#ladder{flex:1;list-style:none;margin:0;display:flex;flex-direction:column;justify-content:center;gap:1px;color:#fff8e7;text-shadow:0 2px 4px rgba(60,20,0,.6);background:linear-gradient(180deg,#b8895a,#8d6238);padding:8px 18px;border-radius:16px;box-shadow:0 0 0 4px #4a2c14,0 0 0 7px #c98a52,0 6px 14px #00000040;overflow:hidden;min-width:0}.rung{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:11px;opacity:.55;transition:transform .3s ease,opacity .3s ease,font-size .3s ease;min-width:0}.rung-name{display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rung-score{color:#fff8dc8c;font-variant-numeric:tabular-nums;flex-shrink:0}.rung-status{display:inline-block;width:6px;height:6px;border-radius:50%;flex-shrink:0}.rung-status.live{background:#4ade80;box-shadow:0 0 6px #4ade80;animation:liveDot 1.6s ease-in-out infinite}.rung-crown{font-size:13px;line-height:1}@keyframes liveDot{0%,to{box-shadow:0 0 4px #4ade80}50%{box-shadow:0 0 10px #4ade80;opacity:.8}}.rung.is-you{font-size:22px;opacity:1}.rung.is-you .rung-score{color:#ffd89b}.rung.pulse{animation:rungPulse .6s ease}@keyframes rungPulse{0%{transform:scale(1);filter:drop-shadow(0 0 0 transparent)}35%{transform:scale(1.06);filter:drop-shadow(0 0 8px rgba(255,216,155,.9))}to{transform:scale(1);filter:drop-shadow(0 0 0 transparent)}}#next{width:78px;height:78px;color:#fff8e7;font-weight:700;text-shadow:0 2px 4px rgba(60,20,0,.6);background:linear-gradient(180deg,#b8895a,#8d6238);border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 0 0 4px #4a2c14,0 0 0 7px #c98a52,0 6px 14px #00000040}#next .label{font-size:9px;letter-spacing:.12em;text-transform:uppercase;opacity:.85;margin-top:2px}#next img{width:52px;height:52px;object-fit:contain}#hint{bottom:14px;left:50%;transform:translate(-50%);font-family:Caveat,cursive;font-size:22px;opacity:.9;text-align:center;white-space:nowrap}#gameover{position:absolute;inset:0;background:radial-gradient(ellipse at center,#321400eb,#140500fa);display:none;flex-direction:column;align-items:center;color:#fff8e7;backdrop-filter:blur(4px);animation:fadeIn .4s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}#gameover.show{display:flex}#leaderboard{position:fixed;inset:0;background:radial-gradient(ellipse at center,#321400eb,#140500fa);display:none;flex-direction:column;align-items:center;justify-content:space-between;padding:40px 28px;color:#fff8e7;animation:fadeIn .4s ease}body.menu #leaderboard{display:flex}body.menu #stage{display:none}#leaderboard h1{font-family:Fredoka,sans-serif;font-weight:700;font-size:36px;margin:0;text-align:center;letter-spacing:.02em;text-shadow:0 4px 12px rgba(0,0,0,.5)}#leaderboardList{flex:1;width:100%;max-width:460px;overflow-y:auto;list-style:none;padding:0;margin:24px 0;display:flex;flex-direction:column;gap:6px}#leaderboardList li{display:flex;align-items:center;gap:12px;padding:8px 14px;border-radius:10px;background:#fff8dc0f;border:1px solid rgba(255,248,220,.1)}#leaderboardList li.is-user{background:#ffd89b47;border-color:#ffd89bbf;box-shadow:0 0 14px #ffd89b40}#leaderboardList li.separated{margin-top:22px;position:relative}#leaderboardList li.separated:before{content:"⋮";position:absolute;top:-20px;left:50%;transform:translate(-50%);color:#fff8dc80;font-size:18px;line-height:1}#leaderboardList li .rank{min-width:32px;font-size:16px;font-weight:700;color:#fff8dc99}#leaderboardList li:first-child .rank{font-size:22px}#leaderboardList li .name{flex:1;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#leaderboardList li .drink{width:28px;height:28px;object-fit:contain;flex-shrink:0}#leaderboardList li .score{font-size:16px;font-weight:700;color:#ffd89b}#leaderboardList .empty{background:none;border:none;color:#fff8dc99;font-family:Caveat,cursive;font-size:22px;text-align:center;justify-content:center}#gameover{justify-content:center}#gameover h2{font-size:42px;margin:0 0 6px;letter-spacing:.02em;text-shadow:0 4px 12px rgba(0,0,0,.5)}#gameover .final{font-family:Caveat,cursive;font-size:28px;margin:0 0 24px;opacity:.9}#gameover .final span{color:#ffd89b;font-weight:700}#nameInput{font-family:Fredoka,sans-serif;font-weight:500;background:#fff8dc14;color:#fff8e7;border:2px solid rgba(255,248,220,.3);border-radius:10px;padding:10px 16px;font-size:18px;text-align:center;margin-bottom:16px;width:240px;max-width:100%}#nameInput:focus{outline:none;border-color:#ffd89b}#nameInput::placeholder{color:#fff8dc66}#shutter{position:fixed;inset:0;z-index:1000;pointer-events:none;transform:translateY(-101%);transition:transform 1.4s cubic-bezier(.65,0,.35,1);background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.15) 10%,transparent 18%),linear-gradient(180deg,transparent 82%,rgba(0,0,0,.5) 100%),repeating-linear-gradient(180deg,#2a1a10 0px 8px,#14080a 8px 10px,#321e12 10px 18px,#14080a 18px 20px);box-shadow:inset 0 0 60px #000000b3,0 12px 30px #00000080;display:flex;align-items:center;justify-content:center}#shutter.is-closed{transform:translateY(0);pointer-events:auto}#shutter.no-anim{transition:none}.shutter-sign{background:#fff5c2;color:#4a2410;padding:28px 40px;border-radius:4px;border:3px solid #4a2410;text-align:center;transform:rotate(-3deg);box-shadow:0 14px 30px #0009;max-width:80vw}.shutter-sign h2{margin:0 0 8px;font-family:Fredoka,sans-serif;font-weight:700;font-size:44px;letter-spacing:.06em;text-transform:uppercase}.shutter-sign p{margin:4px 0;font-family:Caveat,cursive;font-size:26px}.shutter-sign .countdown{margin-top:12px;font-family:Fredoka,sans-serif;font-weight:500;font-size:15px;color:#6a4220;letter-spacing:.04em;font-variant-numeric:tabular-nums;text-transform:uppercase}#play,#submit{font-family:Fredoka,sans-serif;font-weight:700;background:linear-gradient(180deg,#ffb15a,#e8823a);color:#4a2410;border:none;padding:14px 32px;border-radius:999px;font-size:18px;cursor:pointer;box-shadow:0 8px #a8531a,0 12px 24px #0000004d;transition:transform .1s,box-shadow .1s}#play:active,#submit:active{transform:translateY(4px);box-shadow:0 4px #a8531a,0 6px 12px #0000004d}