:root{font-family:Arial,Helvetica,system-ui,sans-serif;color:#f4f0e6;background:#0a1118;font-synthesis:none;--ink: #0b1118;--ink-soft: #151e27;--bone: #f4f0e6;--coral: #ff6038;--acid: #ffd33d;--aqua: #53e0d1;--cyan: #48c9f1;--danger: #ff3f4f;--display: Impact, Haettenschweiler, "Arial Narrow Bold", "Franklin Gothic Condensed", sans-serif}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;overflow:hidden}body{background:var(--ink)}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid var(--aqua);outline-offset:3px}.lobby{min-height:100%;overflow:auto;position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(330px,.86fr) minmax(600px,1.14fr);gap:clamp(3rem,6vw,8rem);align-items:center;padding:6vh 7vw;background:linear-gradient(112deg,transparent 51%,rgba(255,211,61,.04) 51.2%,transparent 51.7%),radial-gradient(circle at 9% 13%,rgba(255,96,56,.38),transparent 27%),radial-gradient(circle at 87% 85%,rgba(83,224,209,.2),transparent 29%),linear-gradient(138deg,#18242f,#0b121a 56%,#080d13)}.lobby:before,.lobby:after{content:"";position:fixed;z-index:-1;pointer-events:none}.lobby:before{width:64vw;height:14px;left:-8vw;top:20%;background:var(--coral);transform:rotate(-8deg);box-shadow:0 34px #ffd33d6b,0 68px #53e0d138}.lobby:after{right:-8vw;bottom:-18vh;width:56vw;height:38vh;border-radius:50% 50% 0 0;border:24px solid rgba(83,224,209,.08);transform:rotate(-7deg)}.lobby-grid{position:fixed;z-index:-2;inset:0;pointer-events:none;opacity:.095;background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);background-size:52px 52px;transform:perspective(520px) rotateX(61deg) scale(1.7) translateY(29%);transform-origin:bottom}.hero,.join-card,.lobby footer,.lobby-tape{position:relative;z-index:1}.eyebrow{display:inline-flex;align-items:center;gap:.7rem;color:var(--acid);letter-spacing:.23em;font-weight:900;font-size:.72rem}.eyebrow:before{content:"";width:36px;height:7px;background:var(--acid);transform:skew(-20deg)}.hero-title{position:relative;width:max-content;max-width:100%}.hero h1,.brand-small,.timer,.score-panel>strong,.speedometer b,.combo-panel strong,.phase-banner strong,.results-card h1,.pause-card h1{font-family:var(--display);font-style:italic;font-weight:900;letter-spacing:-.045em;text-transform:uppercase}.hero h1{position:relative;z-index:1;font-size:clamp(4.7rem,7vw,6.6rem);line-height:.8;margin:.22em 0 .14em;color:var(--bone);-webkit-text-stroke:2px var(--ink);transform:skew(-7deg) rotate(-1deg);text-shadow:5px 5px 0 var(--ink),10px 10px 0 var(--coral),15px 15px 0 rgba(0,0,0,.3)}.hero-title>span{position:absolute;z-index:2;right:1.3rem;bottom:-.7rem;padding:.35rem .65rem;color:var(--ink);background:var(--acid);font-size:.58rem;font-weight:900;letter-spacing:.16em;transform:rotate(-4deg)}.hero p{max-width:510px;margin:2rem 0 1.35rem;font-size:clamp(1.05rem,2vw,1.4rem);font-weight:700;line-height:1.45;color:#c8d2d8}.match-pill{display:inline-block;border:1px solid #6d7b83;border-left:7px solid var(--aqua);padding:.7rem 1rem;background:#060c117a;box-shadow:6px 6px #00000042;font-size:.7rem;font-weight:900;letter-spacing:.12em}.join-card{padding:clamp(1.6rem,3vw,2.65rem);background:linear-gradient(130deg,rgba(255,255,255,.035),transparent 34%),#141d27f2;border:1px solid #46545d;border-top:7px solid var(--coral);box-shadow:18px 18px #0000006b,28px 28px 70px #00000040;backdrop-filter:blur(15px);clip-path:polygon(0 0,calc(100% - 34px) 0,100% 34px,100% 100%,22px 100%,0 calc(100% - 22px))}.join-card label,.join-card legend{font-size:.67rem;font-weight:900;letter-spacing:.18em;color:#aeb9be}.join-card input{width:100%;color:var(--bone);background:#080e14;border:1px solid #52616a;border-left:5px solid var(--aqua);border-radius:0;padding:1rem 1.05rem;margin:.58rem 0 1.55rem;font-size:1.08rem;font-weight:700;outline:none}.join-card input::placeholder{color:#65727b}.join-card input:focus{border-color:var(--aqua);box-shadow:0 0 0 3px #53e0d121}.join-card fieldset{border:0;padding:0;margin:0}.ride-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.72rem;margin-top:.7rem}.ride{position:relative;isolation:isolate;min-height:194px;overflow:hidden;text-align:left;color:#e6ecec;background:#101820;border:1px solid #3c4851;border-bottom:4px solid #252f37;border-radius:0;padding:1rem;transition:transform .15s ease,border-color .15s ease,background .15s ease}.ride:after{content:"";position:absolute;z-index:-1;right:-28px;bottom:-32px;width:85px;height:85px;border:15px solid var(--ride-color);border-radius:50%;opacity:.13}.ride:hover{transform:translateY(-4px) rotate(-.5deg);border-color:var(--ride-color)}.ride.selected{border-color:var(--ride-color);border-bottom-color:var(--ride-color);background:color-mix(in srgb,var(--ride-color) 14%,#101820);box-shadow:inset 0 0 0 1px var(--ride-color)}.ride.selected:before{content:"SELECTED";position:absolute;top:7px;right:-26px;width:92px;padding:.2rem 0;color:#10151a;background:var(--ride-color);text-align:center;font-size:.48rem;font-weight:900;letter-spacing:.08em;transform:rotate(40deg)}.ride strong{display:block;margin:.84rem 0 .38rem;font-size:.8rem;letter-spacing:.035em}.ride p{min-height:3.2em;margin:.35rem 0 .75rem;color:#aab5bc;line-height:1.36;font-size:.73rem}.ride small{color:var(--ride-color);font-size:.57rem;font-weight:900;letter-spacing:.08em}.ride-icon{display:block;width:54px;height:9px;margin:15px 0 22px;background:var(--ride-color);border-radius:9px;transform:rotate(-4deg);box-shadow:8px 12px 0 -2px #05080c,-8px 12px 0 -2px #05080c}.ride-icon.inline{width:38px;height:23px;background:transparent;border-bottom:6px solid var(--ride-color);border-radius:0;box-shadow:0 10px 0 -3px #05080c}.ride-icon.bmx{width:46px;height:31px;background:transparent;border:5px solid var(--ride-color);border-radius:50%;box-shadow:36px 0 0 -5px #101820,36px 0 0 0 var(--ride-color)}.join-button,.primary{border:0;color:#0b1117;background:var(--acid);font-weight:900;letter-spacing:.1em;text-transform:uppercase}.join-button{width:100%;padding:1.08rem;margin-top:1.4rem;box-shadow:7px 7px 0 var(--coral);clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);transition:transform .12s ease,box-shadow .12s ease}.join-button:not(:disabled):hover{transform:translate(3px,3px);box-shadow:4px 4px 0 var(--coral)}.join-button:disabled{opacity:.45;cursor:wait}.join-error{margin-top:1rem;padding:.65rem;color:#ff9b7e;background:#ff3f4f1a;border-left:4px solid var(--danger);font-size:.82rem;font-weight:800}.lobby-tape{position:fixed;right:-3rem;top:1.7rem;padding:.38rem 5rem;color:var(--ink);background:var(--aqua);font-size:.56rem;font-weight:900;letter-spacing:.18em;transform:rotate(4deg);box-shadow:0 4px #0006}.lobby footer{position:absolute;bottom:1.4rem;left:7vw;font-size:.56rem;font-weight:800;letter-spacing:.18em;color:#71818b}.game-shell,.game-shell canvas{width:100%;height:100%}.game-shell{position:relative;background:#193c58}.hud{position:absolute;inset:0;overflow:hidden;pointer-events:none;--ride-accent: var(--coral);text-shadow:0 2px 3px #000b}.hud:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(4,8,12,.32),transparent 18%),linear-gradient(0deg,rgba(4,8,12,.2),transparent 17%),linear-gradient(90deg,rgba(4,8,12,.16),transparent 15%,transparent 85%,rgba(4,8,12,.12))}.hud button,.hud input,.hud label{pointer-events:auto}.topbar{position:absolute;top:0;left:0;right:0;height:72px;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;padding:15px 24px 0}.brand-small{position:relative;width:max-content;padding:.35rem 1.15rem .35rem 1rem;color:var(--bone);background:#0a1118e8;border-left:5px solid var(--coral);font-size:1.35rem;transform:skew(-7deg);box-shadow:6px 6px #0005}.brand-small i{display:inline-block;width:9px;height:9px;margin-right:.2rem;background:var(--acid);transform:rotate(45deg)}.connection{align-self:start;padding:.42rem .7rem;color:#dce6e8;background:#0a1118b8;border:1px solid #ffffff28;font-size:.57rem;letter-spacing:.12em;font-weight:900}.connection span{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px}.connection.online span{background:#66f38c;box-shadow:0 0 9px #66f38c}.connection.offline span{background:var(--danger);box-shadow:0 0 8px var(--danger)}.timer{justify-self:end;min-width:116px;padding:.3rem .7rem .42rem 1.15rem;color:var(--bone);background:#0a1118e8;border-right:5px solid var(--acid);text-align:right;font-size:1.8rem;line-height:.98;transform:skew(-7deg);box-shadow:-6px 6px #0004}.timer small{display:block;margin-bottom:.12rem;color:#94a5ad;font-family:Arial,sans-serif;font-size:.46rem;font-style:normal;letter-spacing:.2em}.timer.urgent{color:#fff;border-color:var(--danger);animation:timer-pulse 1s steps(2,end) infinite}@keyframes timer-pulse{50%{background:#8e1822eb}}.score-panel{position:absolute;left:25px;top:88px;width:215px;display:flex;flex-direction:column;padding:.75rem 1rem .95rem;background:linear-gradient(135deg,#0a1118ef,#151f27d9);border-left:6px solid var(--ride-accent);clip-path:polygon(0 0,100% 0,calc(100% - 18px) 100%,0 100%);filter:drop-shadow(7px 7px 0 #0007)}.panel-kicker{font-size:.54rem;font-weight:900;letter-spacing:.2em;color:var(--acid)}.score-panel>strong{margin:.08rem 0 .6rem;font-size:2.55rem;line-height:1}.speedometer{position:relative;width:182px;padding:.5rem .58rem .44rem;overflow:hidden;background:#05090dcc;border-left:3px solid var(--aqua)}.speedometer:after{content:"";position:absolute;right:-16px;top:-25px;width:58px;height:72px;border:7px solid rgba(255,255,255,.055);transform:rotate(18deg)}.speedometer div{display:flex;align-items:baseline;gap:.35rem}.speedometer b{font-size:1.72rem;line-height:1}.score-panel .speedometer span{color:#dce5e5;font-size:.52rem;font-weight:900;letter-spacing:.12em}.speedometer>i{display:block;height:7px;margin-top:.35rem;overflow:hidden;background:repeating-linear-gradient(90deg,#ffffff22 0 12px,transparent 12px 15px);transform:skew(-8deg)}.speedometer>i>span{display:block;height:100%;background:linear-gradient(90deg,var(--aqua),var(--acid),var(--coral));box-shadow:0 0 8px var(--aqua);transition:width 90ms linear}.speedometer>small{display:block;margin-top:.25rem;color:#6f8088;font-size:.43rem;font-weight:900;letter-spacing:.22em}.balance-meter{position:absolute;bottom:24%;left:50%;width:min(460px,74vw);transform:translate(-50%) skew(-4deg);padding:.72rem .95rem .85rem;background:linear-gradient(100deg,#0a1118f2,#18232cee);border:1px solid #ffffff38;border-top:4px solid var(--acid);box-shadow:8px 8px #0007;transition:border-color .12s ease}.balance-meter:before,.balance-meter:after{content:"";position:absolute;top:0;width:7px;height:100%;background:var(--danger);opacity:.52}.balance-meter:before{left:0}.balance-meter:after{right:0}.balance-meter.danger{border-top-color:var(--danger);animation:balance-alert .35s steps(2,end) infinite}@keyframes balance-alert{50%{filter:brightness(1.22)}}.balance-label{display:flex;justify-content:space-between;margin-bottom:.48rem;font-size:.57rem;font-weight:800;letter-spacing:.12em}.balance-label strong{color:var(--acid);letter-spacing:.2em}.balance-track{position:relative;height:12px;background:repeating-linear-gradient(90deg,transparent 0 24px,#0a111822 24px 26px),linear-gradient(90deg,var(--danger),var(--acid) 19%,var(--aqua) 50%,var(--acid) 81%,var(--danger));box-shadow:inset 0 0 0 2px #071016}.balance-track>b{position:absolute;top:-7px;width:9px;height:26px;transform:translate(-50%) skew(4deg);background:#fff;box-shadow:0 0 0 2px #0a1118,0 0 10px #fff;transition:left 45ms linear}.balance-center{position:absolute;left:50%;top:-3px;width:2px;height:18px;background:#071016b8}.combo-panel{position:absolute;bottom:11.5%;left:50%;min-width:355px;transform:translate(-50%) skew(-5deg) rotate(-.5deg);text-align:center;background:linear-gradient(100deg,#0a1118e8,#18222bdf);border-left:7px solid var(--coral);border-right:2px solid var(--acid);padding:.72rem 1.5rem .68rem;box-shadow:8px 8px #0007;animation:combo-in .18s ease-out}@keyframes combo-in{0%{opacity:0;transform:translate(-50%) translateY(14px) skew(-5deg) scale(.9)}}.combo-panel div{color:var(--acid);font-size:.68rem;font-weight:900;letter-spacing:.17em}.combo-panel strong{display:block;margin:.05rem 0;font-size:2.2rem;line-height:1}.combo-panel em{color:var(--coral);font-style:normal}.combo-panel span{color:#96a5ac;font-size:.49rem;font-weight:800;letter-spacing:.22em}.scoreboard{position:absolute;right:22px;top:88px;width:270px;margin:0;padding:.75rem .75rem .85rem;background:linear-gradient(145deg,#0a1118eb,#17212adf);border-top:5px solid var(--aqua);border-right:1px solid #ffffff24;box-shadow:-7px 7px #0005;clip-path:polygon(17px 0,100% 0,100% 100%,0 100%,0 17px)}.scoreboard h2{margin:0 0 .55rem;padding-bottom:.52rem;border-bottom:1px solid #ffffff1f;color:var(--aqua);font-size:.62rem;letter-spacing:.16em}.scoreboard h2 span{display:inline-block;width:6px;height:6px;margin-right:4px;border-radius:50%;background:var(--danger);box-shadow:0 0 7px var(--danger)}.scoreboard>div{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:.35rem;align-items:center;padding:.42rem .4rem;border-left:3px solid transparent;font-size:.7rem}.scoreboard>div:nth-of-type(odd){background:#ffffff08}.scoreboard>div.self{color:var(--acid);background:#ffd33d12;border-left-color:var(--ride-accent)}.scoreboard>div>span{color:#73838b;font-weight:900}.scoreboard b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.scoreboard small{grid-column:2;color:#77868d;font-size:.49rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.scoreboard strong{grid-column:3;grid-row:1 / 3;color:#e9eee9;font-size:.76rem}.knockout-feed{position:absolute;left:25px;bottom:70px;width:min(360px,42vw);font-size:.67rem}.knockout-feed div{width:max-content;max-width:100%;margin-top:.4rem;padding:.45rem .7rem;color:#dce4e3;background:#0a1118c9;border-left:4px solid var(--coral);box-shadow:4px 4px #0004;animation:feed-in .18s ease-out}.knockout-feed b{color:var(--acid)}@keyframes feed-in{0%{opacity:0;transform:translate(-18px)}}.event-flash{position:absolute;top:21%;left:50%;max-width:70vw;transform:translate(-50%) skew(-6deg);padding:.62rem 1.35rem;color:#0b1118;background:var(--acid);border:2px solid #0b1118;box-shadow:7px 7px 0 var(--coral),10px 10px #0006;font-family:var(--display);font-size:1.18rem;font-style:italic;letter-spacing:.03em;text-align:center;text-shadow:none;animation:event-pop 1.5s ease both}@keyframes event-pop{0%{opacity:0;transform:translate(-50%) scale(.4) rotate(-4deg) skew(-6deg)}12%{opacity:1;transform:translate(-50%) scale(1.12) rotate(1deg) skew(-6deg)}78%{opacity:1}to{opacity:0;transform:translate(-50%) translateY(-20px) skew(-6deg)}}.crosshair{position:absolute;top:50%;left:50%;width:18px;height:18px;color:transparent;transform:translate(-50%,-50%) rotate(45deg);border:2px solid #fff8;box-shadow:0 0 0 2px #0003}.crosshair:after{content:"";position:absolute;inset:5px;background:var(--aqua)}.quick-help{position:absolute;right:22px;bottom:20px;padding:.35rem .55rem;color:#bac5c8;background:#0a1118a8;font-size:.52rem;font-weight:900;letter-spacing:.12em}.quick-help kbd{margin-right:.35rem;color:var(--acid);font:inherit}.phase-banner{position:absolute;inset:0;display:grid;place-content:center;text-align:center;background:linear-gradient(110deg,transparent 35%,rgba(255,96,56,.16) 35.2%,transparent 36%),#04090d47}.phase-banner:before,.phase-banner:after{content:"";position:absolute;left:0;right:0;height:9px;background:repeating-linear-gradient(90deg,var(--acid) 0 44px,var(--ink) 44px 88px);transform:skewY(-1.5deg)}.phase-banner:before{top:32%}.phase-banner:after{bottom:31%}.phase-banner span{color:var(--acid);letter-spacing:.32em;font-size:.83rem;font-weight:900}.phase-banner strong{color:var(--bone);font-size:clamp(7rem,19vw,14rem);line-height:.9;-webkit-text-stroke:3px var(--ink);text-shadow:9px 9px 0 var(--coral),15px 15px 0 #0007;transform:skew(-7deg);animation:count-hit .55s ease-out}.phase-banner i{color:#d5dcda;font-size:.58rem;font-style:normal;font-weight:900;letter-spacing:.25em}@keyframes count-hit{0%{opacity:0;transform:scale(1.65) rotate(-8deg) skew(-7deg)}}.modal-backdrop{position:absolute;inset:0;display:grid;place-items:center;pointer-events:auto;background:repeating-linear-gradient(120deg,transparent 0 30px,rgba(255,255,255,.012) 30px 32px),#04080ccc;backdrop-filter:blur(8px) saturate(.7)}.results-card,.pause-card{position:relative;width:min(650px,92vw);max-height:92vh;overflow:auto;padding:2.35rem;color:var(--bone);background:linear-gradient(145deg,rgba(255,255,255,.035),transparent 34%),#121c25;border:1px solid #4b5b64;border-top:8px solid var(--coral);box-shadow:18px 18px #0009,-9px -9px #53e0d138;clip-path:polygon(0 0,calc(100% - 35px) 0,100% 35px,100% 100%,22px 100%,0 calc(100% - 22px));text-shadow:none}.results-card:after,.pause-card:after{content:"///";position:absolute;right:2.2rem;top:1.6rem;color:var(--aqua);font:900 1.2rem Arial,sans-serif;letter-spacing:.1em}.results-card>span,.pause-card>span{color:var(--acid);font-size:.64rem;font-weight:900;letter-spacing:.22em}.results-card h1,.pause-card h1{margin:.25rem 0 1.55rem;color:var(--bone);font-size:3rem;line-height:1;transform:skew(-4deg);text-shadow:5px 5px 0 var(--coral)}.final-list{border-top:1px solid #34434c}.final-list div{display:grid;grid-template-columns:54px 1fr auto;align-items:center;padding:.78rem;border-bottom:1px solid #34434c;background:#08101646}.final-list div:nth-child(2n){background:#ffffff07}.final-list .winner{color:var(--acid);background:#ffd33d14;border-left:6px solid var(--acid);font-size:1.1rem}.button-row{display:flex;gap:.75rem;margin-top:1.65rem}.button-row button{flex:1;padding:.95rem;color:#e7edeb;background:#0b1219;border:1px solid #5e6e77;border-radius:0;font-size:.74rem;font-weight:900;letter-spacing:.07em;transition:transform .12s ease,background .12s ease}.button-row button:hover{transform:translateY(-2px);background:#1a2731}.button-row button.primary{color:#0b1118;background:var(--acid);border-color:var(--acid);box-shadow:5px 5px 0 var(--coral)}.controls-grid{display:grid;grid-template-columns:1fr 1fr;gap:.62rem}.controls-grid div{display:flex;align-items:center;gap:.75rem;padding:.66rem;background:#091117;border-left:3px solid #33434d}.controls-grid kbd{min-width:84px;color:var(--aqua);font:900 .68rem Arial,sans-serif;letter-spacing:.05em}.controls-grid p{margin:0;color:#bac5c9;font-size:.75rem}.tip{padding:.82rem;color:#aebbc0;background:#09111780;border-left:4px solid var(--coral);font-size:.76rem;line-height:1.5}@media(min-width:1450px){.score-panel{left:34px;top:100px;transform:scale(1.08);transform-origin:top left}.scoreboard{right:30px;top:100px;width:290px}.knockout-feed{left:34px;bottom:82px}.combo-panel{transform:translate(-50%) scale(1.08) skew(-5deg)}}@media(max-width:900px){.lobby{grid-template-columns:1fr;gap:2.3rem;padding:3.5rem 1rem 5rem}.hero h1{font-size:clamp(4.2rem,19vw,7rem)}.join-card{margin-bottom:2rem}.ride-grid{grid-template-columns:1fr}.ride,.ride p{min-height:0}.lobby footer{left:1rem}.lobby-tape{display:none}.scoreboard{width:195px;right:12px}.scoreboard small{display:none}.score-panel{left:12px}.connection{display:none}.topbar{grid-template-columns:1fr 1fr}.controls-grid{grid-template-columns:1fr}}@media(max-height:760px){.results-card,.pause-card{padding:1.5rem}.results-card h1,.pause-card h1{margin-bottom:1rem;font-size:2.35rem}.controls-grid{gap:.35rem}.controls-grid div{padding:.48rem .6rem}.tip{margin-top:.65rem;margin-bottom:.65rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}