@font-face{font-family:Manrope;src:url('assets/manrope.ttf') format('truetype');font-weight:200 800;font-display:swap}
:root{--ink:#f7f8fc;--muted:#b9becd;--ground:#14151b;--surface:#282b35;--accent:#d5ff64;--teal:#65c7ff;--peach:#ff8468;--ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1);--motion:200ms;color-scheme:dark;font-family:Manrope,Arial,sans-serif;color:var(--ink);background:var(--ground)}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,input,select{font:inherit}button{min-height:44px;padding:11px 18px;border:0;border-radius:6px;background:var(--surface);color:var(--ink);cursor:pointer;transition:background-color 160ms ease,transform 120ms var(--ease-out)}button:active{transform:scale(.97)}button.primary{background:var(--accent);color:#14151b;font-weight:700}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:4px}button:disabled{opacity:.5;cursor:default}::selection{background:var(--accent);color:var(--ground)}canvas{position:fixed;inset:0;width:100%;height:100%}header{position:fixed;top:0;left:0;right:0;height:74px;padding:14px 28px;display:flex;align-items:center;justify-content:space-between;background:var(--ground)}h1{font-family:Manrope,Arial,sans-serif;font-weight:800;font-size:29px;margin:0;letter-spacing:-.025em}h1 span{font-family:Manrope,Arial,sans-serif;font-size:13px;color:var(--muted);margin-left:18px}#connection{font-size:13px;color:var(--muted);max-width:45%;text-align:right}main{position:fixed;inset:74px 0 78px;pointer-events:none}.scoreboard{display:flex;align-items:flex-start;justify-content:space-between;padding:16px 28px;gap:24px;background:var(--ground)}.player{width:250px;min-width:0}.name{font-size:18px;font-weight:700}.cyan{color:var(--teal)}.orange{color:var(--peach)}.stats{font-size:13px;line-height:1.5;color:var(--muted);margin-top:5px;min-height:20px}.power{height:3px;margin-top:10px;background:#ffffff16;overflow:hidden}.power i{display:block;height:100%;background:currentColor;transform-origin:left;transform:scaleX(0);transition:transform 120ms linear}.race-route{display:flex;gap:20px;padding-top:4px;color:var(--muted);font-size:14px;white-space:nowrap}.race-route span.active{color:var(--accent);font-weight:700}#center{position:absolute;top:22%;left:50%;transform:translateX(-50%);width:min(560px,calc(100% - 40px));text-align:center;background:var(--ground);padding:27px 32px;border-radius:10px}h2{font:800 clamp(28px,3.6vw,48px)/1.08 Manrope,Arial,sans-serif;letter-spacing:-.025em;margin:0;text-wrap:balance}#sub{font-size:16px;line-height:1.5;color:var(--muted);margin:14px 0 0;text-wrap:balance}footer{position:fixed;bottom:0;left:0;right:0;height:78px;padding:16px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px;background:var(--ground)}.race-actions,.view-actions{display:flex;gap:10px}#time{font-size:23px;font-variant-numeric:tabular-nums;font-weight:400;color:var(--accent)}.finished #center{top:20px}.finished .scoreboard{visibility:hidden}.finished h2{font-size:36px}dialog{width:min(460px,calc(100% - 28px));max-height:calc(100% - 32px);padding:28px;background:var(--ground);color:var(--ink);border:0;border-radius:12px;box-shadow:0 18px 70px #0008;overflow:auto}dialog::backdrop{background:#08090ed9}dialog[open]{animation:panel-in var(--motion) var(--ease-out)}@keyframes panel-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.dialog-heading{display:flex;justify-content:space-between;gap:16px;align-items:center}.dialog-heading h2{font-size:30px}.close{padding:8px 12px;font-size:13px}.dialog-heading+p{font-size:15px;line-height:1.5;color:var(--muted);margin:18px 0 24px}label{display:block;margin:20px 0;font-size:16px}label output{float:right;color:var(--accent);font-variant-numeric:tabular-nums}select{width:100%;padding:12px;border:0;border-radius:6px;background:var(--surface);color:var(--ink);display:block;margin-top:10px}input[type=range]{width:100%;display:block;accent-color:var(--accent);margin:16px 0 10px;min-height:24px}small{display:block;font-size:13px;line-height:1.5;color:var(--muted)}.sound-row{display:flex;justify-content:space-between;align-items:center}.keyboard{font-size:13px;line-height:1.5;color:var(--muted)}.done{width:100%;margin-top:10px}noscript{position:fixed;inset:40%;background:var(--ground);padding:20px}
@media(hover:hover) and (pointer:fine){button:hover{background:#3a3e4d}button.primary:hover{background:#e4ff9c}}
@media(max-width:900px){.race-route{display:none}.player{width:44%}h1 span{display:none}}
@media(max-width:560px){header{height:62px;padding:12px 16px}h1{font-size:25px}main{inset:62px 0 76px}.scoreboard{padding:12px 16px;gap:18px}.name{font-size:16px}.stats{font-size:12px}#connection{font-size:12px}#center{top:24%;padding:24px 20px}footer{height:76px;padding:12px 16px;gap:10px}button{padding:10px 13px;font-size:14px}#full{display:none}#time{font-size:19px}.race-actions,.view-actions{gap:6px}.finished h2{font-size:30px}}
@media(prefers-reduced-motion:reduce){button,.power i{transition:none}dialog[open]{animation:none}}

#space{z-index:0}#avatars3d{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}header,main,footer{z-index:2}

#center{background:#14151bf2;box-shadow:0 12px 36px #0003}h1{font-size:27px;letter-spacing:-.04em}#time{font-weight:800}.race-route{font-weight:700}.name{font-weight:800}button{font-weight:700}.power{height:4px}body[data-phase="race"] .scoreboard{background:#14151bed}

.finished #center{top:auto;bottom:14px;padding:16px 24px}.finished #sub{margin-top:8px}

/* Event projection: the entire viewport belongs to the game. */
:root:fullscreen header,:root:fullscreen .scoreboard,:root:fullscreen footer{display:none}
:root:fullscreen main{inset:0}
:root:fullscreen body{cursor:none}
:root:fullscreen body[data-phase="idle"] #center{display:block}
:root:fullscreen body[data-phase="count"] #center{background:transparent;box-shadow:none;top:16%}
:root:fullscreen body[data-phase="count"] #headline{font-size:clamp(64px,12vw,140px)}
:root:fullscreen body[data-phase="count"] #sub{display:none}

body[data-phase="idle"] #center{top:28%;width:min(1000px,calc(100% - 32px));background:transparent;box-shadow:none;padding:18px 16px}
body[data-phase="idle"] #headline{font-size:clamp(32px,8vw,104px);white-space:nowrap;font-weight:800;letter-spacing:-.04em;color:#f7f8fc;text-shadow:0 4px 20px #0008}
body[data-phase="idle"] #sub{color:#f7f8fc;font-weight:700;text-shadow:0 2px 8px #000}

body[data-phase="count"] #center{top:23%;background:transparent;box-shadow:none}
body[data-phase="count"] #headline{font-size:clamp(78px,15vw,176px);font-weight:800;color:var(--accent);text-shadow:0 8px 24px #0007}
body[data-phase="count"] #sub{display:none}
.count-beat{animation:count-beat 520ms var(--ease-out) both}
@keyframes count-beat{0%{opacity:0;transform:scale(1.35) translateY(-12px)}28%{opacity:1;transform:scale(1) translateY(0)}100%{opacity:1;transform:scale(.96)}}
@media(prefers-reduced-motion:reduce){.count-beat{animation:none}}