:root{--bg:#020306;--text:#eef0f3;--muted:#8e949e;--dim:#4d525b;--red:#ff2b2b;--red-glow:0 0 10px #ff2b2bd9, 0 0 28px #ff2b2b73;--between:#f6b4a8;--line:#dce1e81f;--panel:#030408e0;--chrome:linear-gradient(180deg, #fff 0%, #e6e9ee 16%, #a2a8b2 38%, #2a2e36 48%, #07080b 51%, #5f6570 56%, #c9ced6 72%, #fff 86%, #8a909a 100%);--chrome-soft:linear-gradient(180deg, #fff 0%, #eef0f3 40%, #b7bcc5 70%, #e8eaee 100%);--chrome-button:linear-gradient(180deg, #fff 0%, #e9ecf0 22%, #b4bac3 58%, #2c3038 78%, #6f7581 86%, #dfe2e7 100%);--chrome-edge:linear-gradient(180deg, #ffffffbf 0%, #a0a6b04d 30%, #0a0c10e6 50%, #969ca659 72%, #ffffff73 100%);--font:"Barlow Condensed", system-ui, sans-serif;--blackletter:"UnifrakturCook", serif;--gutter:16px;--vv-top:0px;--vv-height:100dvh}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;margin:0;font-weight:500;overflow:hidden}body:after{content:"";z-index:50;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:.9s steps(5,end) infinite grain;position:fixed;inset:-50%}@keyframes grain{0%{transform:translate(0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-4%,-1%)}80%{transform:translate(3%,3%)}to{transform:translate(0)}}[hidden]{display:none!important}button{font:inherit;color:inherit;cursor:pointer}::selection{color:#fff;background:#ff2b2b80}.label,.hud-label,.round-label,.countdown,.status{text-transform:uppercase;letter-spacing:.24em;color:var(--muted);font-size:12px;font-weight:600}.chrome-text,.wordmark,.blackletter{background:var(--chrome);color:#0000;-webkit-background-clip:text;background-clip:text}.blackletter,.wordmark{font-family:var(--blackletter);letter-spacing:0;text-transform:none;font-weight:700}.panel{background:var(--panel);-webkit-backdrop-filter:blur(8px);position:relative;box-shadow:0 18px 50px #000000a6,inset 0 1px #ffffff0d}.panel:before{content:"";background:var(--chrome-edge);-webkit-mask-composite:xor;pointer-events:none;padding:1px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.panel:after{--c:#eef1f5e6;content:"";pointer-events:none;background:linear-gradient(var(--c), var(--c)) top left / 12px 1px, linear-gradient(var(--c), var(--c)) top left / 1px 12px, linear-gradient(var(--c), var(--c)) top right / 12px 1px, linear-gradient(var(--c), var(--c)) top right / 1px 12px, linear-gradient(var(--c), var(--c)) bottom left / 12px 1px, linear-gradient(var(--c), var(--c)) bottom left / 1px 12px, linear-gradient(var(--c), var(--c)) bottom right / 12px 1px, linear-gradient(var(--c), var(--c)) bottom right / 1px 12px;background-repeat:no-repeat;position:absolute;inset:-4px}#scene{transition:opacity .6s;position:fixed;inset:0}#scene canvas{display:block}body[data-phase=end] #scene{opacity:.4}body[data-phase=end].perfect #scene{opacity:.9}body[data-phase=empty] #scene,body[data-phase=offline] #scene{opacity:.3}body.perfect-intro #screen-end,body.perfect-intro .topbar{display:none}#ui{left:0;right:0;top:var(--vv-top);height:var(--vv-height);padding:max(env(safe-area-inset-top), 8px) var(--gutter) max(env(safe-area-inset-bottom), 12px);pointer-events:none;flex-direction:column;display:flex;position:fixed}#ui>*{pointer-events:auto}.topbar{justify-content:space-between;align-items:center;min-height:44px;display:flex}.round-label{color:var(--text)}.topbar-actions{gap:4px;display:flex}.icon-btn{color:#b9bec7;background:0 0;border:0;border-radius:50%;place-items:center;width:44px;height:44px;transition:color .2s,filter .2s;display:grid}.icon-btn:hover,.icon-btn:focus-visible{color:#fff;filter:drop-shadow(0 0 8px #eef1f599)}.icon-btn svg{width:22px;height:22px}.screen{width:100%;max-width:680px;margin:0 auto}.btn-chrome{background:var(--chrome-button);color:#06070a;letter-spacing:.26em;text-transform:uppercase;text-shadow:0 1px #fff9;border:0;border-radius:2px;min-height:54px;padding:0 30px;font-size:18px;font-weight:800;transition:filter .15s,transform .1s;position:relative;overflow:hidden;box-shadow:inset 0 1px #fff,inset 0 -2px #00000080,0 0 0 1px #000,0 0 0 2px #c8cdd62e,0 12px 32px #000000bf,0 0 28px #eef1f524}.btn-chrome:after{content:"";pointer-events:none;background:linear-gradient(105deg,#0000 38%,#ffffffd9 50%,#0000 62%);animation:5s ease-in-out 1.5s infinite glint;position:absolute;inset:0;transform:translate(-130%)}@keyframes glint{0%,72%{transform:translate(-130%)}to{transform:translate(130%)}}.btn-chrome:hover{filter:brightness(1.08)}.btn-chrome:active{filter:brightness(.95);transform:translateY(1px)}.btn-chrome:disabled{opacity:.4;cursor:default;filter:grayscale()}.btn-chrome:disabled:after{animation:none}.wordmark{filter:drop-shadow(0 2px #000000e6)drop-shadow(0 0 26px #eef1f538)drop-shadow(0 10px 40px #ff2b2b24);margin:0;font-size:clamp(64px,19vw,150px);line-height:1}.rule{align-items:center;gap:10px;width:min(240px,60vw);display:flex}.rule:before,.rule:after{content:"";background:linear-gradient(90deg,#0000,#eef1f5b3);flex:1;height:1px}.rule:after{background:linear-gradient(90deg,#eef1f5b3,#0000)}.rule i{background:var(--chrome-soft);width:7px;height:7px;transform:rotate(45deg);box-shadow:0 0 10px #eef1f599}.start{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:14px;display:flex}.day-label{text-transform:uppercase;letter-spacing:.34em;background:var(--chrome-soft);color:#0000;-webkit-background-clip:text;background-clip:text;margin:0;font-size:13px;font-weight:800}.tagline{letter-spacing:.22em;text-transform:uppercase;color:#cfd3da;text-shadow:0 2px 12px #000000e6;margin:4px 0 20px;font-size:17px;font-weight:600;line-height:1.5}.play{text-align:center;padding-top:8px}.prompt{letter-spacing:.02em;text-transform:uppercase;text-wrap:balance;background:var(--chrome-soft);color:#0000;filter:drop-shadow(0 2px #000000f2)drop-shadow(0 0 18px #eef1f52e);-webkit-background-clip:text;background-clip:text;margin:0 0 16px;font-size:clamp(25px,6.6vw,42px);font-weight:800;line-height:1.05}.timer{background:#07080c;height:6px;margin-bottom:14px;position:relative;overflow:hidden;box-shadow:inset 0 1px #000000e6,0 0 0 1px #c8cdd638}.timer-fill{transform-origin:0;background:linear-gradient(#fff,#b9bec7 60%,#e9ecf0);height:100%;transform:scaleX(0);box-shadow:0 0 12px #eef1f5b3}.timer-fill.running{animation:drain var(--round-ms,20s) linear forwards}@keyframes drain{0%{background:linear-gradient(#fff,#b9bec7 60%,#e9ecf0);transform:scaleX(1)}70%{background:linear-gradient(#fff,#b9bec7 60%,#e9ecf0);box-shadow:0 0 12px #eef1f5b3}80%{background:var(--red);box-shadow:var(--red-glow)}to{background:var(--red);box-shadow:var(--red-glow);transform:scaleX(0)}}.answer-form{gap:10px;display:flex}.answer-form input{color:#fff;min-width:0;min-height:54px;caret-color:var(--red);font:inherit;letter-spacing:.08em;text-transform:uppercase;background:linear-gradient(#030407,#0a0c11);border:0;border-radius:2px;outline:none;flex:1;padding:0 16px;font-size:21px;font-weight:700;transition:box-shadow .2s;box-shadow:inset 0 2px 6px #000000e6,0 0 0 1px #c8cdd659,0 0 0 2px #000}.answer-form input::placeholder{color:var(--dim);letter-spacing:.24em}.answer-form input:focus{box-shadow:inset 0 2px 6px #000000e6,0 0 0 1px #eef1f5bf,0 0 0 2px #000,0 0 22px #ff2b2b47}.answer-form input[readonly]{color:var(--muted)}.answer-form .btn-chrome{padding:0 20px;font-size:16px}.status{min-height:20px;margin:10px 0 0}.reveal{text-align:left;margin-top:16px;padding:14px 18px 12px;animation:.24s ease-out rise}@keyframes rise{0%{opacity:0;transform:translateY(8px)}}.reveal-head{align-items:baseline;gap:14px;display:flex}.reveal-rank{font-family:var(--blackletter);background:var(--chrome);color:#0000;filter:drop-shadow(0 0 14px #eef1f559);-webkit-background-clip:text;background-clip:text;font-size:46px;font-weight:700;line-height:.9}.reveal-answer{text-transform:uppercase;letter-spacing:.06em;flex:1;font-size:24px;font-weight:800}.reveal-meters{background:var(--chrome-soft);color:#0000;-webkit-background-clip:text;background-clip:text;font-size:24px;font-weight:800}.reveal.stray .reveal-rank{color:var(--red);text-shadow:var(--red-glow);filter:none;background:0 0}.reveal.stray .reveal-meters{color:var(--red);background:0 0}.reveal-share{color:var(--muted);text-transform:uppercase;letter-spacing:.2em;margin:4px 0 10px;font-size:12px;font-weight:700}.top5{margin:0;padding:0;list-style:none}.top5 li{border-top:1px solid var(--line);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);align-items:baseline;gap:12px;padding:6px 0 6px 10px;font-size:17px;font-weight:600;display:flex;position:relative}.top5 li .n{width:1.1em;font-family:var(--blackletter);color:#c9ced6;font-size:19px}.top5 li .a{flex:1}.top5 li.yours{color:#fff;font-weight:800}.top5 li.yours:before{content:"";background:var(--red);width:3px;box-shadow:var(--red-glow);position:absolute;top:6px;bottom:6px;left:0}.hud{text-shadow:0 2px 10px #000000e6;justify-content:space-between;align-items:flex-end;gap:12px;margin-top:auto;display:flex}.hud-left,.hud-right{align-items:center;gap:10px;display:flex}.hud-right{align-items:baseline;gap:6px}.hud-right b{font-variant-numeric:tabular-nums;background:var(--chrome-soft);color:#0000;filter:drop-shadow(0 0 12px #eef1f54d);-webkit-background-clip:text;background-clip:text;font-size:40px;font-weight:800}.hud-left b{color:var(--text)}.hud .hud-label{white-space:nowrap;letter-spacing:.16em}.end{text-align:center;flex-direction:column;flex:1;align-items:center;gap:16px;padding:8px 0 20px;display:flex;overflow-y:auto}.end-title{flex-direction:column;align-items:center;gap:6px;display:flex}.end-title .wordmark{font-size:clamp(64px,17vw,128px)}.end-distance{font-family:var(--blackletter);background:var(--chrome);color:#0000;filter:drop-shadow(0 2px #000000e6)drop-shadow(0 0 30px #eef1f538);-webkit-background-clip:text;background-clip:text;font-size:clamp(88px,28vw,168px);font-weight:700;line-height:.9;animation:.6s cubic-bezier(.2,.9,.25,1) both thud}.end-distance small{font-size:.42em}@keyframes thud{0%{opacity:0;filter:blur(6px);transform:scale(1.3)}}.perfect .end-title .wordmark{animation:.52s cubic-bezier(.2,.9,.25,1) both slam}.perfect .end-title .label,.perfect .end>:not(.end-title){animation:.6s ease-out 1.6s both rise}@keyframes slam{0%{opacity:0;filter:blur(8px);transform:scale(2.6)}60%{opacity:1;filter:blur()drop-shadow(0 0 50px #eef1f5b3);transform:scale(.96)}to{transform:scale(1)}}.results{width:100%;margin:0;padding:2px 16px;list-style:none}.results li{border-bottom:1px solid var(--line);text-align:left;grid-template-columns:56px 1fr auto;align-items:center;gap:10px;padding:9px 0;display:grid}.results li:last-child{border-bottom:0}.results .tier{font-family:var(--blackletter);background:var(--chrome);color:#0000;-webkit-background-clip:text;background-clip:text;font-size:26px;line-height:1}.results .tier.stray{font-family:var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--red);text-shadow:var(--red-glow);background:0 0;font-size:13px;font-weight:800}.results .q{color:var(--muted);font-size:14px}.results .a{color:#fff;text-transform:uppercase;letter-spacing:.06em;font-size:18px;font-weight:800;display:block}.results .m{font-variant-numeric:tabular-nums;background:var(--chrome-soft);color:#0000;-webkit-background-clip:text;background-clip:text;font-weight:800}.stats{gap:32px;margin:0;display:flex}.stats div{flex-direction:column-reverse;align-items:center;display:flex}.stats dt{text-transform:uppercase;letter-spacing:.24em;color:var(--muted);font-size:11px;font-weight:700}.stats dd{background:var(--chrome-soft);color:#0000;-webkit-background-clip:text;background-clip:text;margin:0;font-size:32px;font-weight:800}.toast{min-height:18px;color:var(--muted);text-transform:uppercase;letter-spacing:.24em;margin:-8px 0 0;font-size:12px}.now-playing{text-transform:uppercase;letter-spacing:.2em;color:var(--muted);white-space:nowrap;align-items:center;gap:9px;margin:0;font-size:11px;font-weight:600;display:inline-flex}.np-text{align-items:baseline;gap:8px;display:inline-flex}.now-playing b{letter-spacing:.16em;background:var(--chrome-soft);color:#0000;-webkit-background-clip:text;background-clip:text;font-weight:800}.np-credit{color:var(--dim);letter-spacing:.18em}.disc{border-radius:50%;flex:none;width:20px;height:20px;position:relative;box-shadow:0 0 0 1px #c8cdd659,0 0 10px #000c}.disc i{background:radial-gradient(circle, #ff2b2b 0 7%, transparent 8%), conic-gradient(from 0deg, transparent 0 300deg, #06070af2 300deg 330deg, transparent 330deg) center / 52% 52% no-repeat, radial-gradient(circle, #e9ecf0 0 13%, #9aa0a9 20%, #c9ced6 25%, transparent 26%), repeating-radial-gradient(circle, #050608 0 .7px, #16181e .7px 1.4px);border-radius:50%;animation:1.8s linear infinite paused spin;position:absolute;inset:0}.disc:after{content:"";background:conic-gradient(from 20deg, transparent 0 40deg, #ffffff47 60deg, transparent 80deg 200deg, #ffffff2e 230deg, transparent 250deg);pointer-events:none;border-radius:50%;position:absolute;inset:0}body.music-on .disc i{animation-play-state:running}@keyframes spin{to{transform:rotate(360deg)}}.hud-track{opacity:.85;min-width:0}.countdown span{color:var(--text);font-variant-numeric:tabular-nums}.notice{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:10px;display:flex}.notice h2{font-family:var(--blackletter);background:var(--chrome);color:#0000;filter:drop-shadow(0 0 20px #eef1f533);-webkit-background-clip:text;background-clip:text;margin:0;font-size:clamp(40px,11vw,64px);font-weight:700;line-height:1}.notice p{color:#c3c8d0;letter-spacing:.08em;text-transform:uppercase;margin:0 0 12px;font-size:17px}.dev-dates{flex-wrap:wrap;justify-content:center;gap:8px;padding:0;list-style:none;display:flex}.dev-dates a{border:1px solid var(--line);color:var(--muted);font-variant-numeric:tabular-nums;border-radius:2px;padding:10px 12px;text-decoration:none;display:inline-block}.overlay{padding:var(--gutter);z-index:10;background:radial-gradient(#0009,#000000e0);place-items:center;display:grid;position:fixed;inset:0}.overlay-card{width:100%;max-width:440px;padding:26px 24px 18px;font-size:18px;line-height:1.4}.overlay-card h2{font-family:var(--blackletter);background:var(--chrome);color:#0000;-webkit-background-clip:text;background-clip:text;margin:0 0 12px;font-size:40px;font-weight:700;line-height:1}.overlay-card p{color:#b9bec7;margin:0 0 12px}.overlay-close{z-index:1;position:absolute;top:8px;right:8px}.tiers{border-collapse:collapse;width:100%;margin:4px 0 14px}.tiers td{border-bottom:1px solid var(--line);text-transform:uppercase;letter-spacing:.14em;padding:7px 0;font-size:14px;font-weight:600}.tiers td:last-child{text-align:right;color:#fff;font-weight:800}@media (width>=900px) and (height>=600px){.play{padding-top:4vh}.hud-right b{font-size:54px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.15s!important;animation-duration:1ms!important}body:after,.btn-chrome:after,.disc i{animation:none!important}.timer-fill.running{animation-duration:var(--round-ms,20s)!important}}
