:root{--cyan: #42c6ee;--peri: #7687f3;--ink: #2e211f;--cream: #fffdf6;--gold: #facc15;--orange: #f97316;--green: #4ade80;--red: #ef4444;--font: "Fredoka", "Avenir Next", "Avenir", system-ui, -apple-system, sans-serif}html,body{margin:0;padding:0;height:100%;overflow:hidden;background:#0d3b2e;font-family:var(--font);color:var(--ink);-webkit-tap-highlight-color:transparent;touch-action:none;user-select:none;-webkit-user-select:none}#app{position:fixed;inset:0}canvas#gl{display:block;width:100%;height:100%}#loader{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(180deg,#0d3b2e,#146a4f 55%,#1f8a68);transition:opacity .6s ease;color:var(--cream);text-align:center}#loader.hide{opacity:0;pointer-events:none}#loader .mark{font-size:min(13vw,56px);font-weight:700;letter-spacing:.5px;display:flex;align-items:center;gap:.25em}#loader .mark .star{color:var(--cyan);animation:spin-star 1.4s ease-in-out infinite}#loader .sub{margin-top:8px;font-size:min(4.4vw,17px);opacity:.85}#loader .dots{margin-top:20px;display:flex;gap:8px}#loader .dots i{width:10px;height:10px;border-radius:50%;background:var(--peri);animation:pulse 1.1s infinite}#loader .dots i:nth-child(2){animation-delay:.18s}#loader .dots i:nth-child(3){animation-delay:.36s}@keyframes pulse{0%,to{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}@keyframes spin-star{0%,to{transform:rotate(-12deg)}50%{transform:rotate(12deg)}}#hud{position:fixed;inset:0;pointer-events:none;z-index:20;font-weight:600;--hud-top: calc(max(10px, env(safe-area-inset-top)) + 8px) }@media(max-width:560px){#hud{--hud-top: calc(max(10px, env(safe-area-inset-top)) + 58px) }#score .bub{width:12px;height:12px}}#score{position:absolute;top:var(--hud-top);left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:5px;align-items:stretch;padding:7px 12px;border-radius:14px;background:#2e211f8c;border:1px solid rgba(255,253,246,.25)}#score .row{display:flex;align-items:center;gap:8px;border-radius:8px;padding:1px 4px;transition:background .2s}#score .row.live{background:#42c6ee47;animation:row-live .9s ease-in-out infinite}#score .row .label{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--cream);width:54px;text-align:left}#score .bubbles{display:flex;gap:6px;flex:1}#score .num{font-size:16px;color:var(--gold);min-width:16px;text-align:right}#score .bub{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,253,246,.75);background:transparent;box-shadow:0 2px #0003;transition:background .2s,border-color .2s}#score .bub.goal{background:var(--green);border-color:var(--green);animation:bub-pop .4s cubic-bezier(.2,1.6,.4,1)}#score .bub.miss{background:var(--red);border-color:var(--red);animation:bub-pop .4s cubic-bezier(.2,1.6,.4,1)}@keyframes bub-pop{0%{transform:scale(.3)}to{transform:scale(1)}}@keyframes row-live{0%,to{background:#42c6ee24}50%{background:#42c6ee61}}#score.hide,#round.hide{display:none}#round{position:absolute;top:calc(var(--hud-top) + 64px);left:50%;transform:translate(-50%);font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--cream);background:#2e211f8c;border:1px solid rgba(255,253,246,.3);padding:3px 11px;border-radius:999px;white-space:nowrap}#turn{position:absolute;top:calc(var(--hud-top) + 92px);left:50%;transform:translate(-50%) scale(.9);font-weight:700;font-size:13px;letter-spacing:.08em;color:var(--ink);background:var(--cyan);padding:5px 14px;border-radius:999px;box-shadow:0 3px #0000002e;opacity:0;transition:opacity .25s,transform .25s;white-space:nowrap}#turn.show{opacity:1;transform:translate(-50%) scale(1)}#ticker{position:absolute;left:50%;bottom:calc(max(14px,env(safe-area-inset-bottom)) + 70px);transform:translate(-50%,16px);display:flex;align-items:stretch;border-radius:12px;overflow:hidden;box-shadow:0 5px #0003;opacity:0;transition:opacity .2s,transform .25s;white-space:nowrap;font-size:min(6vw,26px);font-weight:700}#ticker.show{opacity:1;transform:translate(-50%)}#ticker .who{background:var(--peri);color:#fff;padding:8px 14px;letter-spacing:.08em}#ticker .txt{background:var(--cream);color:var(--ink);padding:8px 16px;min-width:5em;text-align:center}#ticker.pending .txt{animation:ticker-wait .6s ease-in-out infinite}#ticker.scored .txt{background:var(--orange);color:#fff}#ticker.missed .txt{background:var(--green);color:var(--ink)}@keyframes ticker-wait{0%,to{opacity:.65}50%{opacity:1}}#power{position:absolute;left:50%;bottom:calc(max(14px,env(safe-area-inset-bottom)) + 74px);transform:translate(-50%);width:min(80vw,360px);opacity:0;transition:opacity .2s}#power.show{opacity:1}#power .track{position:relative;height:20px;border-radius:999px;background:#2e211f99;border:2px solid rgba(255,253,246,.6);overflow:hidden}#power .zone{position:absolute;top:0;bottom:0}#power .zone.soft{background:#facc1573}#power .zone.sweet{background:#4ade80d9}#power .zone.hard{background:#ef4444cc}#power .marker{position:absolute;top:-2px;bottom:-2px;width:8px;margin-left:-4px;left:0%;background:#fff;border-radius:4px;box-shadow:0 0 10px #ffffffe6}#power[data-zone=sweet] .marker{box-shadow:0 0 14px 4px #4ade80f2}#power .legend{position:relative;height:16px;margin-top:4px;font-size:11px;font-weight:700;letter-spacing:.04em;color:#fffdf6cc;text-shadow:0 1px 2px rgba(0,0,0,.6)}#power .legend span{position:absolute;top:0;text-align:center;white-space:nowrap}#power .legend .sweet{color:var(--green)}#power .legend .hard{color:#fca5a5}#power[data-zone=sweet] .legend .sweet{color:#fff}#curl{position:absolute;left:50%;bottom:calc(max(14px,env(safe-area-inset-bottom)) + 124px);transform:translate(-50%);width:min(52vw,200px);display:flex;align-items:center;gap:8px;opacity:0;transition:opacity .25s}#curl.show{opacity:.9}#curl .arrow{font-size:13px;color:#fffdf673;transition:color .15s,transform .15s}#curl .arrow.active{color:var(--cyan);transform:scale(1.25)}#curl .track{position:relative;flex:1;height:8px;border-radius:999px;background:#2e211f80;border:1px solid rgba(255,253,246,.3);overflow:hidden}#curl .fill{position:absolute;top:0;bottom:0;width:0%}#curl .fill.left{right:50%;background:var(--peri)}#curl .fill.right{left:50%;background:var(--peri)}#reticle{position:absolute;width:46px;height:46px;margin-left:-23px;margin-top:-23px;opacity:0;transition:opacity .15s}#reticle.touch{width:72px;height:72px;margin-left:-36px;margin-top:-36px}#reticle.show{opacity:1}#reticle .ring{position:absolute;inset:0;border-radius:50%;border:3px solid rgba(255,253,246,.9);box-shadow:0 0 14px #42c6ee8c,inset 0 0 8px #00000040;transition:border-color .12s,background .12s,transform .12s}#reticle.locked .ring{border-color:var(--gold);background:#facc152e;transform:scale(.82)}#reticle .dot{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;background:var(--cyan);border-radius:50%}#streak{position:absolute;top:calc(max(10px,env(safe-area-inset-top)) + 10px);left:50%;transform:translate(-50%);font-size:15px;font-weight:700;letter-spacing:.08em;color:var(--cream);background:#2e211f99;border:1px solid rgba(255,253,246,.3);padding:7px 16px;border-radius:999px;opacity:0;transition:opacity .25s}#streak.show{opacity:1}#streak b{color:var(--gold);margin-left:6px;font-size:18px}#banner{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%) scale(.85);opacity:0;text-align:center;white-space:nowrap}#banner.show{opacity:1;transform:translate(-50%,-50%) scale(1);transition:opacity .2s,transform .2s}#banner .txt{display:inline-block;font-size:min(10vw,56px);font-weight:700;padding:10px 30px;border-radius:20px;background:#2e211f99;border:2px solid rgba(255,253,246,.35);text-shadow:0 4px 0 rgba(0,0,0,.25)}#banner.goal .txt{color:var(--gold)}#banner.saved .txt{color:var(--cyan)}#banner.miss .txt{color:var(--orange)}#banner.info .txt{color:var(--cream)}#banner.pop{animation:banner-pop .6s cubic-bezier(.2,1.4,.4,1)}@keyframes banner-pop{0%{transform:translate(-50%,-50%) scale(1.6);opacity:0}30%{transform:translate(-50%,-50%) scale(1);opacity:1}to{transform:translate(-50%,-50%) scale(1);opacity:1}}#hint{position:absolute;left:50%;bottom:calc(max(12px,env(safe-area-inset-bottom)) + 4px);transform:translate(-50%);width:max-content;max-width:min(92vw,520px);box-sizing:border-box;font-size:min(4.6vw,19px);font-weight:700;line-height:1.25;text-align:center;color:var(--ink);background:var(--cream);border:2px solid rgba(42,38,34,.35);box-shadow:0 4px #0000002e;padding:9px 18px;border-radius:18px;opacity:0;transition:opacity .25s}#hint.show{opacity:1}#replay{position:absolute;left:50%;top:calc(var(--hud-top) + 92px);transform:translate(-50%);font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--cream);background:#2e211f99;border:1px solid rgba(255,253,246,.35);padding:6px 14px;border-radius:999px;display:flex;align-items:center;gap:8px;opacity:0;transition:opacity .25s;white-space:nowrap}#replay.show{opacity:1}#replay .skip{font-size:11px;font-weight:500;letter-spacing:.02em;opacity:.75}#mute-btn{position:absolute;top:max(14px,env(safe-area-inset-top));left:max(14px,env(safe-area-inset-left));pointer-events:auto;font:700 12px var(--font);letter-spacing:.08em;color:var(--cream);background:#2e211f99;border:1.5px solid rgba(255,253,246,.4);border-radius:999px;padding:9px 14px;cursor:pointer}#mute-btn.off{color:#fffdf699}#mute-btn:focus-visible{outline:3px solid var(--peri);outline-offset:2px}.overlay{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;background:#0d3b2e8c;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s,visibility 0s linear .3s;padding:16px;overflow:auto}.overlay.show{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .3s,visibility 0s}.card{background:var(--cream);color:var(--ink);border:2px solid rgba(42,38,34,.35);border-radius:24px;box-shadow:0 8px #00000026;padding:22px 26px 18px;width:min(92vw,420px);max-height:92vh;overflow:auto;text-align:center;transform:translateY(12px);transition:transform .3s cubic-bezier(.2,1.3,.4,1)}.overlay.show .card{transform:translateY(0)}.eyebrow{font-size:12px;letter-spacing:.18em;opacity:.7}.card .title{font-size:32px;font-weight:700;margin:6px 0 10px}.card .hint{margin:4px 0 16px;font-size:15px;opacity:.85}.modes{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}.btn.mode{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:150px}.btn.mode .name{font-size:19px}.btn.mode .sub{font-size:12px;font-weight:600;opacity:.85}.actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.btn{font:700 16px var(--font);padding:12px 20px;border-radius:999px;border:2px solid rgba(42,38,34,.35);background:#fff;color:var(--ink);cursor:pointer;text-decoration:none;box-shadow:0 4px #0000001f;transition:transform .08s}.btn:active{transform:translateY(2px);box-shadow:0 2px #0000001f}.btn.primary{background:var(--cyan);color:#fff;border-color:#00000026}.btn.ghost{background:transparent;box-shadow:none}.btn:focus-visible{outline:3px solid var(--peri);outline-offset:2px}.card .credit{margin-top:10px;font-size:11px;opacity:.55;letter-spacing:.04em}.results-card .headline{font-size:22px;font-weight:700;margin:4px 0 14px}.results-card .stats{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:14px}.results-card .stat{flex:1 1 84px;max-width:110px;background:#42c6ee1f;border-radius:14px;padding:10px 4px}.results-card .stat.hide{display:none}.results-card .stat span{display:block;font-size:11px;letter-spacing:.08em;opacity:.7}.results-card .stat b{font-size:20px}@media(max-width:560px){#power{bottom:calc(max(14px,env(safe-area-inset-bottom)) + 88px)}#curl{bottom:calc(max(14px,env(safe-area-inset-bottom)) + 138px)}}@media(max-height:480px){#hint{bottom:calc(max(6px,env(safe-area-inset-bottom)) + 2px);font-size:15px;padding:6px 14px}#power{bottom:calc(max(6px,env(safe-area-inset-bottom)) + 40px)}#power .track{height:16px}#power .legend{height:13px;margin-top:2px;font-size:10px}#curl{bottom:calc(max(6px,env(safe-area-inset-bottom)) + 80px)}#ticker{bottom:calc(max(6px,env(safe-area-inset-bottom)) + 40px);font-size:20px}.card{padding:14px 20px 12px}.card .title{font-size:26px;margin:2px 0 6px}}@media(prefers-reduced-motion:reduce){#loader .mark .star,#loader .dots i,#banner.pop,#turn,#power .marker,#curl .fill,#score .bub,#score .row,#ticker .txt,.card{animation:none!important;transition:none!important}}