:root{--bg:#090909;--bg-2:#111;--fg:#f5f5f5;--muted:#f5f5f59e;--red:#ff2a2a;--accent:#ffd23f;--good:#8dffb0;--glass:#09090975;--sat:env(safe-area-inset-top,0px);--sar:env(safe-area-inset-right,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--font-display:"Arial Black", "Helvetica Neue", Helvetica, "Roboto", system-ui, sans-serif;--font-ui:system-ui, -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*,:before,:after{box-sizing:border-box}html,body{background:var(--bg);width:100%;height:100%;color:var(--fg);font-family:var(--font-ui);overscroll-behavior:none;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;margin:0;overflow:hidden}.app{background:var(--bg);touch-action:none;position:fixed;top:0;bottom:0;left:0;right:0;overflow:hidden}.stream{width:100%;height:100%;transition:filter .35s;display:block;position:absolute;top:0;bottom:0;left:0;right:0}.app[data-state=PLAYING],.app[data-state=PLAYING] *{cursor:none}.app.freezing .stream{filter:grayscale()contrast(1.15)brightness(.72)}.fx{pointer-events:none;position:absolute;top:0;bottom:0;left:0;right:0}.fx-noise{opacity:.075;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");animation:.5s steps(4,end) infinite grain;top:-50%;bottom:-50%;left:-50%;right:-50%}@keyframes grain{0%{transform:translate(0)}25%{transform:translate(-6%,4%)}50%{transform:translate(5%,-3%)}75%{transform:translate(-3%,-6%)}to{transform:translate(0)}}.fx-vignette{background:radial-gradient(#0000 52%,#0000008c 100%),repeating-linear-gradient(0deg,#0000000f 0 1px,#0000 1px 3px)}.fx-flash{opacity:0}.fx-flash.red{animation:.45s ease-out flash-red}.fx-flash.white{animation:.5s ease-out flash-white}@keyframes flash-red{0%{opacity:1;box-shadow:inset 0 0 0 4px var(--red), inset 0 0 120px #ff2a2a59}to{opacity:0;box-shadow:inset 0 0 0 4px var(--red), inset 0 0 120px #ff2a2a59}}@keyframes flash-white{0%{opacity:.55;background:#fff}to{opacity:0;background:#fff}}.hud{top:calc(var(--sat) + 12px);left:calc(var(--sal) + 12px);right:calc(var(--sar) + 12px);pointer-events:none;opacity:0;justify-content:space-between;align-items:flex-start;transition:opacity .25s;display:flex;position:absolute}.app[data-state=PLAYING] .hud,.app[data-state=COUNTDOWN] .hud,.app.freezing .hud{opacity:1}.hud-left{align-items:center;gap:8px;display:flex}.live-pill{background:var(--red);color:#fff;font:900 13px/1 var(--font-ui);letter-spacing:.08em;border-radius:6px;align-items:center;gap:7px;padding:5px 10px 5px 9px;display:inline-flex}.live-dot{background:currentColor;border-radius:50%;width:8px;height:8px;animation:1.2s ease-in-out infinite live-pulse}.live-pill .live-dot{background:#fff}@keyframes live-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}.viewers{background:var(--glass);-webkit-backdrop-filter:blur(10px);font:800 13px/1 var(--font-ui);font-variant-numeric:tabular-nums;border-radius:6px;align-items:center;gap:6px;padding:5px 9px;display:inline-flex}.viewers svg{opacity:.85;width:15px;height:15px}.hud-right{flex-direction:column;align-items:flex-end;gap:6px;display:flex}.timer{background:var(--glass);-webkit-backdrop-filter:blur(10px);font:900 26px/1.05 var(--font-ui);font-variant-numeric:tabular-nums;letter-spacing:.02em;border-radius:8px;padding:4px 10px;transition:color .2s,background .2s}.timer.urgent{color:#fff;background:#ff2a2ad1}.timer.pulse{animation:.45s ease-out timer-pulse}.timer.final.pulse{animation:.6s ease-out timer-pulse-big}@keyframes timer-pulse{0%{transform:scale(1.12)}to{transform:scale(1)}}@keyframes timer-pulse-big{0%{transform:scale(1.35)}to{transform:scale(1)}}.shot{background:var(--glass);-webkit-backdrop-filter:blur(10px);font:800 11px/1.2 var(--font-ui);letter-spacing:.1em;color:var(--muted);border-radius:6px;padding:3px 8px}.shot b{font-variant-numeric:tabular-nums;color:var(--fg);font-size:14px;transition:color .2s}.score-live{background:var(--glass);-webkit-backdrop-filter:blur(10px);font:900 15px/1.1 var(--font-ui);font-variant-numeric:tabular-nums;border-radius:6px;align-items:baseline;gap:4px;padding:3px 8px;display:inline-flex}.score-live small{letter-spacing:.1em;color:var(--muted);font-size:10px}#hud-score{display:inline-block}#hud-score.bump{color:var(--accent);animation:.5s ease-out score-bump}#hud-score.drop{color:#ff6a6a;animation:.5s ease-out score-bump}@keyframes score-bump{0%{transform:scale(1.4)}to{transform:scale(1)}}.shot[data-level=good] b{color:var(--good)}.shot[data-level=mid] b{color:var(--accent)}.shot[data-level=bad] b{color:#ff6a6a}.callout{text-align:center;max-width:calc(100% - 32px);font:900 clamp(26px, 8.5vw, 58px) / .95 var(--font-display);letter-spacing:-.02em;text-transform:uppercase;color:var(--fg);text-shadow:0 2px #00000073,0 10px 40px #0009;pointer-events:none;opacity:0;white-space:pre-line;position:absolute;top:23%;left:50%;transform:translate(-50%,-50%)}.callout.show{animation:1.3s cubic-bezier(.2,.9,.3,1.2) forwards callout-in}.callout.clip.show{animation-duration:1.8s}.callout.subtle{color:#f5f5f5eb;font-size:clamp(18px,5.4vw,34px)}.callout.hype{color:var(--fg)}.callout.warn{color:#fff;text-shadow:none;background:#ff2a2ae6;border-radius:10px;padding:8px 14px;font-size:clamp(20px,6vw,40px)}.callout.good{color:var(--good);font-size:clamp(22px,6.5vw,42px)}.callout.clip{color:var(--accent);font-size:clamp(26px,8vw,56px)}@keyframes callout-in{0%{opacity:0;transform:translate(-50%,-40%)scale(.85)rotate(-2deg)}14%{opacity:1;transform:translate(-50%,-50%)scale(1.04)rotate(-1deg)}24%{transform:translate(-50%,-50%)scale(1)rotate(-1deg)}80%{opacity:1}to{opacity:0;transform:translate(-50%,-56%)scale(.98)rotate(-1deg)}}.lag-banner{-webkit-backdrop-filter:blur(8px);font:800 15px/1 var(--font-ui);letter-spacing:.02em;white-space:nowrap;opacity:0;pointer-events:none;background:#090909b3;border-radius:10px;padding:10px 16px;transition:opacity .12s;position:absolute;top:42%;left:50%;transform:translate(-50%,-50%)}.lag-banner.show{opacity:1}.lag-icon{color:var(--accent)}.clip-hint{top:50%;left:calc(var(--sal) + 10px);-webkit-backdrop-filter:blur(8px);color:var(--accent);font:900 12px/1 var(--font-ui);letter-spacing:.06em;opacity:0;pointer-events:none;background:#090909ad;border-radius:999px;align-items:center;gap:8px;padding:9px 12px;transition:opacity .2s;display:flex;position:absolute;transform:translateY(-50%)}.clip-hint.right{left:auto;right:calc(var(--sar) + 10px);flex-direction:row-reverse}.clip-hint.show{opacity:1;animation:.8s ease-in-out infinite hint-nudge}.clip-hint-arrow{font-size:18px}@keyframes hint-nudge{0%,to{margin-left:0;margin-right:0}50%{margin-left:-4px;margin-right:-4px}}.chat{left:calc(var(--sal) + 10px);bottom:calc(var(--sab) + 14px);pointer-events:none;flex-direction:column;justify-content:flex-end;gap:5px;width:min(70vw,330px);margin:0;padding:0;list-style:none;display:flex;position:absolute}.chat-msg{-webkit-backdrop-filter:blur(6px);max-width:100%;font:600 13px/1.25 var(--font-ui);color:#f5f5f5f0;overflow-wrap:anywhere;background:#0909096b;border-radius:10px;align-self:flex-start;padding:5px 9px;transition:opacity .3s,transform .3s;animation:.22s ease-out chat-in}.chat-msg.out{opacity:0;transform:translate(-8px)}.chat-user{margin-right:6px;font-weight:800}@keyframes chat-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.screen{padding:calc(var(--sat) + 20px) calc(var(--sar) + 20px) calc(var(--sab) + 20px) calc(var(--sal) + 20px);opacity:0;visibility:hidden;pointer-events:none;justify-content:center;align-items:center;transition:opacity .28s,visibility 0s linear .28s;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}.app[data-state=START] .screen-start,.app[data-state=COUNTDOWN] .screen-countdown,.app[data-state=FINISHED].freezing .screen-freeze,.app[data-state=FINISHED]:not(.freezing) .screen-result{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .28s,visibility}.screen-start{background:radial-gradient(at 50% 120%,#ff2a2a1f,#0000 60%),#090909e0}.start-inner{flex-direction:column;align-items:flex-start;width:min(100%,560px);display:flex}.rec-tag{font:800 11px/1 var(--font-ui);letter-spacing:.18em;color:var(--muted);align-items:center;gap:8px;margin-bottom:14px;display:inline-flex}.rec-tag .live-dot{color:var(--red)}.title{font:900 min(21vw, 15.5vh, 150px) / .84 var(--font-display);letter-spacing:-.055em;text-transform:uppercase;color:var(--fg);margin:0}.title:after{content:""}.tagline{font:900 clamp(17px, 5.2vw, 26px) / 1.08 var(--font-display);letter-spacing:.01em;margin:18px 0 0}.explain{font:500 15px/1.45 var(--font-ui);color:var(--muted);margin:14px 0 26px}.control-hint{font:600 13px/1.3 var(--font-ui);color:var(--muted);margin:12px 0 0}.best{flex-direction:column;gap:4px;margin-top:22px;display:flex}.best[hidden]{display:none}.best-label{font:800 11px/1 var(--font-ui);letter-spacing:.16em;color:var(--muted)}.best-value{font:900 22px/1.1 var(--font-ui);font-variant-numeric:tabular-nums}.btn{-webkit-appearance:none;appearance:none;width:min(100%,360px);min-height:58px;font:900 17px/1 var(--font-ui);letter-spacing:.06em;cursor:pointer;touch-action:manipulation;border:0;border-radius:14px;justify-content:center;align-items:center;gap:10px;padding:16px 26px;transition:transform .12s,background-color .15s,box-shadow .15s,border-color .15s;display:inline-flex}.btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.btn:active{transform:scale(.97)}.btn-primary{background:var(--fg);color:var(--bg);box-shadow:0 10px 30px #00000073}.btn-primary:hover{background:#fff;box-shadow:0 12px 36px #ff2a2a2e}.btn-dot{background:var(--red);border-radius:50%;width:10px;height:10px;animation:1.2s ease-in-out infinite live-pulse}.btn-ghost{color:var(--fg);background:#f5f5f50a;box-shadow:inset 0 0 0 1.5px #f5f5f552}.btn-ghost:hover{background:#f5f5f51a;box-shadow:inset 0 0 0 1.5px #f5f5f599}.screen-countdown{padding-top:calc(var(--sat) + 13vh);background:#0000002e;flex-direction:column;justify-content:flex-start;pointer-events:none!important}.countdown-num{font:900 min(30vw, 18vh, 180px) / 1 var(--font-display);letter-spacing:-.04em;color:var(--fg);text-shadow:0 10px 50px #000000b3}.countdown-num.pop{animation:.6s cubic-bezier(.2,.9,.3,1.3) count-pop}.countdown-num.is-live{background:var(--red);color:#fff;text-shadow:none;border-radius:.14em;padding:.1em .35em;font-size:min(16vw,10vh,100px)}.countdown-hint{font:700 14px/1.3 var(--font-ui);color:#f5f5f5d9;text-shadow:0 2px 10px #000c;margin:10px 0 0}@keyframes count-pop{0%{opacity:0;transform:scale(1.6)}40%{opacity:1}to{transform:scale(1)}}.freeze-tag{font:900 15px/1 var(--font-ui);letter-spacing:.14em;background:#090909bf;border-radius:8px;padding:10px 16px}.screen-result{background:#090909ed;align-items:safe center;overflow-y:auto}.result-inner{flex-direction:column;width:min(100%,560px);display:flex}.result-title{font:900 min(14vw, 11vh, 96px) / .9 var(--font-display);letter-spacing:-.05em;margin:0}.result-new{background:var(--accent);color:var(--bg);font:900 11px/1 var(--font-ui);letter-spacing:.14em;border-radius:6px;align-self:flex-start;margin:12px 0 0;padding:5px 9px}.result-new[hidden]{display:none}.stats{grid-template-columns:1fr 1fr;gap:18px 16px;margin:26px 0;display:grid}.stat{margin:0}.stat dt{font:800 11px/1 var(--font-ui);letter-spacing:.15em;color:var(--muted)}.stat dd{font:900 24px/1 var(--font-ui);font-variant-numeric:tabular-nums;margin:6px 0 0}.stat-hero dd{letter-spacing:-.02em;font-size:clamp(34px,10vw,52px)}.result-actions{flex-direction:column;gap:10px;display:flex}.result-actions .btn{width:100%}.mute{right:calc(var(--sar) + 12px);bottom:calc(var(--sab) + 12px);background:var(--glass);-webkit-backdrop-filter:blur(10px);width:48px;height:48px;color:var(--fg);cursor:pointer;z-index:5;touch-action:manipulation;border:0;border-radius:50%;place-items:center;transition:transform .12s,background-color .15s;display:grid;position:absolute}.app[data-state=PLAYING] .mute{cursor:pointer}.mute:hover{background:#090909b3}.mute:active{transform:scale(.94)}.mute:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.mute svg{width:22px;height:22px}.mute .ico-off,.mute.is-muted .ico-on{display:none}.mute.is-muted .ico-off{display:block}.mute.is-muted{color:var(--red)}.toast{left:50%;bottom:calc(var(--sab) + 80px);background:var(--fg);color:var(--bg);font:800 14px/1 var(--font-ui);opacity:0;pointer-events:none;z-index:6;border-radius:999px;padding:10px 16px;transition:opacity .2s,transform .2s;position:absolute;transform:translate(-50%,10px)}.toast.show{opacity:1;transform:translate(-50%)}@media (min-width:720px){.hud{top:calc(var(--sat) + 18px);left:calc(var(--sal) + 20px);right:calc(var(--sar) + 20px)}.live-pill,.viewers{font-size:14px}.timer{font-size:32px}.chat{bottom:calc(var(--sab) + 22px);left:calc(var(--sal) + 20px)}.chat-msg{font-size:14px}.stats{grid-template-columns:repeat(3,1fr)}.stat-hero{grid-column:span 1}.result-actions{flex-direction:row}.explain{font-size:16px}}@media (max-height:700px){.explain{margin-bottom:18px}.best{margin-top:14px}.stats{gap:12px 14px;margin:18px 0}.stat dd{font-size:20px}.stat-hero dd{font-size:clamp(28px,8vw,42px)}.btn{min-height:52px}}@media (max-height:460px) and (orientation:landscape){.tagline,.explain{display:none}.title{font-size:min(12vw,22vh)}}@media (prefers-reduced-motion:reduce){.fx-noise,.live-dot,.btn-dot,.clip-hint.show{animation:none}.callout.show{animation:1.3s linear forwards callout-fade}.countdown-num.pop,.timer.pulse,.timer.final.pulse,.fx-flash.red,.fx-flash.white,.chat-msg{animation:none}@keyframes callout-fade{0%,85%{opacity:1;transform:translate(-50%,-50%)}to{opacity:0;transform:translate(-50%,-50%)}}}