@import"https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@600;700&display=swap";:root{color-scheme:dark;font-family:Manrope,ui-sans-serif,system-ui,sans-serif;color:#f3f8ff;background:#050813;font-synthesis:none;--cyan: #43f1df;--cyan-dim: #1aa6a9;--violet: #8b6cff;--panel: rgb(11 18 34 / 78%);--line: rgb(145 198 230 / 17%);--muted: #8ea1b9}*{box-sizing:border-box}html,body,#app{width:100%;min-width:1024px;height:100%;margin:0;overflow:hidden}body{background:radial-gradient(circle at 78% 18%,rgb(83 61 185 / 26%),transparent 33%),radial-gradient(circle at 15% 78%,rgb(14 139 155 / 18%),transparent 34%),linear-gradient(145deg,#070b18,#03050c 72%)}button,input,select{font:inherit}button,select,input{color:#f3f8ff}button{min-height:48px;padding:0 20px;border:1px solid var(--line);border-radius:9px;background:#172037db;font-weight:700;letter-spacing:.02em;cursor:pointer;transition:transform .15s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease}button:hover{transform:translateY(-1px);border-color:#43f1df8c;background:#1f2c47f5}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}button:disabled{cursor:not-allowed;opacity:.38;transform:none}button.primary{color:#031316;border-color:transparent;background:linear-gradient(110deg,#45f4df,#62bde8);box-shadow:0 8px 30px #21e4d429}button.quiet{background:transparent;color:var(--muted)}button.danger{background:#5c2032;border-color:#a84b66}input,select{min-height:48px;width:100%;padding:0 14px;border:1px solid var(--line);border-radius:8px;background:#030812d1}input[type=color]{padding:5px;min-width:84px}input[type=range]{min-height:30px;padding:0;accent-color:var(--cyan)}.ambient-grid{position:fixed;inset:0;pointer-events:none;opacity:.17;background-image:linear-gradient(rgb(80 205 218 / 14%) 1px,transparent 1px),linear-gradient(90deg,rgb(80 205 218 / 14%) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(to bottom,black,transparent 82%);transform:perspective(550px) rotateX(60deg) scale(1.8) translateY(20%)}.brand{position:fixed;z-index:20;top:28px;left:38px;display:flex;align-items:center;gap:12px;text-transform:uppercase;font:700 14px/1 Space Grotesk,sans-serif;letter-spacing:.19em}.brand-mark{display:grid;place-items:center;width:35px;height:35px;border:1px solid rgb(67 241 223 / 48%);border-radius:50%;color:var(--cyan);box-shadow:inset 0 0 16px #43f1df26,0 0 18px #43f1df1f;letter-spacing:-.06em}main,.screen{width:100%;height:100%}.screen{position:absolute;inset:0;z-index:2;display:none;padding:104px 7vw 64px;animation:screen-in .4s cubic-bezier(.2,.8,.2,1)}.screen.active{display:grid}.screen.centred{place-content:center;text-align:center}@keyframes screen-in{0%{opacity:0;transform:translateY(9px)}}.panel{border:1px solid var(--line);border-radius:16px;background:var(--panel);box-shadow:0 25px 90px #00000061,inset 0 1px #ffffff08;backdrop-filter:blur(20px)}.identity-screen{grid-template-columns:minmax(500px,570px) minmax(260px,360px);align-items:center;justify-content:center;gap:clamp(30px,6vw,90px)}.identity-panel{width:100%;padding:42px}.cosmetic-preview{display:grid;justify-items:center;align-content:center;min-width:0}.cosmetic-preview canvas{display:block;width:min(360px,30vw);height:auto;aspect-ratio:1;filter:drop-shadow(0 26px 45px rgb(0 0 0 / 55%)) drop-shadow(0 0 35px rgb(67 241 223 / 12%))}.cosmetic-preview p{margin:-18px 0 0;color:var(--muted);font-size:11px;line-height:1.6;text-align:center}.cosmetic-preview p span{display:block;color:var(--cyan);font-weight:800;letter-spacing:.16em;text-transform:uppercase}.eyebrow{margin:0 0 11px;color:var(--cyan);font-size:11px;font-weight:800;letter-spacing:.21em;text-transform:uppercase}h1,h2{font-family:Space Grotesk,sans-serif}h1{margin:0 0 15px;font-size:clamp(42px,5vw,76px);line-height:.98;letter-spacing:-.045em}h2{margin:0 0 18px;font-size:22px}.lede{color:var(--muted);font-size:17px}.profile-controls{display:grid;gap:5px;margin:0 0 18px;color:var(--muted);font-size:12px;line-height:1.65}.profile-controls p{margin:0}.profile-controls strong{margin-right:7px;color:#dce8f5;font-size:10px;letter-spacing:.09em;text-transform:uppercase}label{display:grid;gap:8px;margin:20px 0;color:#adc0d4;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.field-row{display:grid;grid-template-columns:.7fr 1.3fr;gap:16px}.colour-row{grid-template-columns:repeat(2,1fr)}.colour-row.single-colour{grid-template-columns:1fr}.secondary-colour[hidden]{display:none}.identity-panel button{width:100%;margin-top:10px}[data-screen=menu]{grid-template-columns:1fr 420px;align-items:center;gap:7vw}.hero-copy{max-width:730px}.control-guide{display:grid;gap:1px;max-width:660px;margin:30px 0 0}.control-guide>div{display:grid;grid-template-columns:120px 1fr;gap:22px;padding:15px 0;border-top:1px solid var(--line)}.control-guide>div:last-child{border-bottom:1px solid var(--line)}.control-guide dt{color:var(--cyan);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.control-guide dd{display:grid;gap:5px;margin:0}.control-guide dd strong{color:#dce8f5;font-size:14px}.control-guide dd span{color:var(--muted);font-size:13px;line-height:1.55}.menu-actions{display:grid;gap:11px;max-height:calc(100vh - 150px);padding:26px;overflow-y:auto}.create-control>label{margin:0 0 8px}.create-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px}.create-row button{white-space:nowrap}.open-rooms{display:grid;gap:9px;margin:5px 0;padding:14px;border:1px solid var(--line);border-radius:11px;background:#0308128c}.open-rooms-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.open-rooms-head h2{margin:0;font-size:14px}.open-rooms-head button{min-height:36px;padding:0 12px}.room-list{display:grid;gap:8px;max-height:190px;overflow-y:auto}.room-card{display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;min-height:44px;padding:9px 12px;border:1px solid var(--line);border-radius:9px;background:#080e1bcc;text-align:left}.room-card span{color:var(--muted);font-size:12px}.room-list-empty{margin:0;padding:10px 4px;color:var(--muted);font-size:12px;text-align:center}.solo-create{display:grid;gap:10px;margin-top:2px;padding:14px;border:1px solid var(--line);border-radius:11px;background:#0308128c}.solo-create-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.solo-create-head h2{margin:0;font-size:14px}.solo-create-head span{color:var(--muted);font-size:10px;letter-spacing:.08em;text-transform:uppercase}.solo-config-row{display:grid;grid-template-columns:1fr 1fr;gap:9px}.solo-config-row label{gap:5px;margin:0;font-size:9px}.solo-config-row select{min-height:42px;padding-inline:10px;font-size:12px}.solo-create>button{width:100%}[data-screen=lobby]{display:none;grid-template-rows:auto 1fr;gap:30px}[data-screen=lobby].active{display:grid}.lobby-header{display:flex;align-items:end;justify-content:space-between}.lobby-header h1{font-size:46px;letter-spacing:.14em}.pill{padding:9px 13px;border:1px solid var(--line);border-radius:999px;color:var(--cyan);font-size:11px;letter-spacing:.1em;text-transform:uppercase}.lobby-grid{display:grid;grid-template-columns:1fr 360px;gap:22px;min-height:0}.lobby-grid>.panel{padding:25px}.player-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.player-card{min-height:94px;padding:14px;border:1px solid var(--line);border-radius:11px;background:#02070f7a}.ball-swatch{width:27px;height:27px;margin-bottom:10px;border:3px double rgb(255 255 255 / 55%);border-radius:50%;background:linear-gradient(135deg,var(--primary, #42e8e0) 48%,var(--secondary, #42e8e0) 52%);box-shadow:0 0 13px var(--primary, #42e8e0)}.player-card strong{display:block;overflow:hidden;text-overflow:ellipsis}.player-card span{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.08em}.player-card.disconnected{opacity:.45}.lobby-config p{margin:25px 0;color:var(--muted);line-height:1.6}.lobby-config button{width:100%;margin-top:9px}.loader-orbit{width:96px;height:96px;margin:0 auto 32px;border:1px solid rgb(67 241 223 / 20%);border-top:2px solid var(--cyan);border-radius:50%;box-shadow:0 0 50px #43f1df21;animation:orbit 1.3s linear infinite}@keyframes orbit{to{transform:rotate(360deg)}}[data-screen=loading] h1{font-size:54px}.progress{width:min(520px,60vw);height:4px;margin:28px auto 15px;overflow:hidden;border-radius:4px;background:#ffffff14}.progress i{display:block;width:8%;height:100%;background:linear-gradient(90deg,var(--violet),var(--cyan));transition:width .35s ease}#loading-detail{color:var(--muted)}.race-screen{padding:0;background:#03050b}.race-screen.active{display:block}.race-screen canvas{width:100%;height:100%;display:block}.race-hud{position:absolute;z-index:5;top:26px;left:50%;display:grid;grid-template-columns:140px 260px 140px;align-items:center;transform:translate(-50%);border:1px solid var(--line);border-radius:11px;background:#050a14ab;backdrop-filter:blur(15px);text-align:center}.race-hud>div{padding:12px 20px}.race-hud>div+div{border-left:1px solid var(--line)}.race-hud strong{display:block;font-family:Space Grotesk}.label{display:block;margin-bottom:4px;color:var(--muted);font-size:9px;letter-spacing:.14em;text-transform:uppercase}.race-time{font:700 26px/1 Space Grotesk;font-variant-numeric:tabular-nums}.countdown{position:absolute;z-index:6;inset:0;display:grid;place-items:center;pointer-events:none;color:#fff;font:700 14vw/1 Space Grotesk;text-shadow:0 0 60px var(--cyan)}.countdown.pop{animation:countdown-pop .7s ease both}@keyframes countdown-pop{0%{opacity:0;transform:scale(1.5)}35%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}.race-finish{position:absolute;z-index:6;left:50%;top:34%;display:grid;justify-items:center;gap:6px;padding:20px 38px;transform:translate(-50%,-50%);border:1px solid var(--line);border-radius:14px;background:#050a14b8;backdrop-filter:blur(15px);text-align:center;animation:finish-pop .42s ease both}.race-finish[hidden]{display:none}.race-finish strong{color:var(--cyan);font:700 44px/1 Space Grotesk;text-shadow:0 0 40px var(--cyan)}.race-finish small{color:var(--muted);font-size:11px;letter-spacing:.05em}@keyframes finish-pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.86)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.race-status{position:absolute;z-index:5;left:50%;bottom:28px;transform:translate(-50%);padding:9px 16px;border-radius:999px;background:#030811b3;color:#a8bad0;font-size:11px;letter-spacing:.05em}.icon-button{position:absolute;z-index:6;top:28px;right:28px;width:48px;padding:0}.solo-actions{position:absolute;z-index:6;right:28px;bottom:28px;display:flex;gap:8px}.results-panel{width:min(780px,80vw);margin:auto;padding:36px 42px}.results-panel h1{font-size:48px}.results-panel>p:last-child{color:var(--muted)}.standings{display:grid;gap:5px;margin:25px 0}.standing{display:grid;grid-template-columns:54px 1fr 120px 100px;align-items:center;min-height:48px;padding:0 14px;border-bottom:1px solid var(--line)}.standing:first-child{color:var(--cyan);background:#43f1df0d}.standing small{color:var(--muted)}.settings-panel,.unsupported-panel{align-self:center;justify-self:center;width:min(560px,60vw);padding:40px}.settings-panel h1{font-size:48px}.settings-panel .check{grid-template-columns:20px 1fr;align-items:center;text-transform:none}.settings-panel .check input{width:17px;min-height:17px;accent-color:var(--cyan)}.unsupported-panel p:last-child{color:var(--muted);line-height:1.7}.toast{position:fixed;z-index:50;left:50%;bottom:34px;max-width:580px;padding:13px 18px;border:1px solid rgb(255 120 145 / 35%);border-radius:9px;background:#370f1beb;opacity:0;pointer-events:none;transform:translate(-50%,15px);transition:.18s ease}.toast.show{opacity:1;transform:translate(-50%)}.modal{position:fixed;z-index:60;inset:0;display:none;place-items:center;background:#000309b8;backdrop-filter:blur(7px)}.modal.open{display:grid}.modal-panel{width:430px;padding:28px}.modal-panel p{color:var(--muted)}.modal-panel>div{display:flex;justify-content:flex-end;gap:9px;margin-top:24px}.reduced-flash *,.reduced-flash *:before,.reduced-flash *:after{animation-duration:1ms!important;transition-duration:1ms!important}@media(max-width:1200px){.screen{padding-inline:4vw}.identity-screen{grid-template-columns:minmax(470px,540px) minmax(240px,320px);gap:28px}.player-grid{grid-template-columns:repeat(2,1fr)}}.progress-rail{position:absolute;z-index:5;top:14%;right:22px;width:10px;height:66%;border:1px solid var(--line);border-radius:6px;background:#0b1222b8;box-shadow:inset 0 0 0 1px #ffffff0a;pointer-events:none}.progress-rail .rail-marker{position:absolute;left:50%;display:grid;place-items:center;width:13px;height:13px;transform:translate(-50%,50%);transition:bottom .22s linear,opacity .16s ease}.progress-rail .rail-dot{display:block;width:13px;height:13px;border:1px solid rgb(3 6 12 / 80%);border-radius:50%;box-shadow:0 1px 4px #0000008c}.progress-rail .rail-name{position:absolute;top:50%;right:18px;padding:2px 6px;transform:translateY(-50%);border:1px solid rgb(255 255 255 / 8%);border-radius:4px;background:#050a14b8;color:#eff7ffe0;font:600 10px/1.25 Inter,sans-serif;letter-spacing:.02em;white-space:nowrap;text-shadow:0 1px 2px #000;backdrop-filter:blur(7px)}.progress-rail .rail-marker.me{z-index:2;width:17px;height:17px}.progress-rail .rail-marker.me .rail-dot{width:17px;height:17px;box-shadow:0 0 9px var(--cyan)}.progress-rail .rail-marker.me .rail-name{color:#dffaff;border-color:#5de5ff47}