:root{color-scheme:dark;--bg:#070910;--panel:#111621;--line:#283142;--text:#f4f7fb;--muted:#9ca7b7;--orange:#ff4d2e;--blue:#27c8ff;--green:#77e06f}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:radial-gradient(circle at 20% 0,#182033 0,#090c14 38%,#05070b 100%);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--text);overscroll-behavior:none}
body{min-height:100dvh}.app{width:min(1180px,100%);margin:auto;padding:0 24px 28px}
.topbar{height:76px;display:flex;align-items:center;gap:16px;border-bottom:1px solid #ffffff12}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-size:14px;font-weight:900;letter-spacing:.12em}
.brand-mark{display:grid;place-items:center;width:38px;height:38px;background:var(--orange);border-radius:12px;box-shadow:0 8px 28px #ff4d2e50;letter-spacing:-.08em}
.room-badge{margin-left:auto;padding:8px 12px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:13px}.room-badge strong{color:#fff;letter-spacing:.12em}
.ghost{border:1px solid var(--line);background:#111621;color:#fff;border-radius:12px;padding:9px 13px;font-weight:800;cursor:pointer}.fullscreen-button{width:40px;height:38px;margin-left:auto;padding:0;background-image:url('assets/control-fullscreen.svg');background-position:center;background-repeat:no-repeat;background-size:22px}.room-badge+.fullscreen-button{margin-left:0}.fullscreen-button.is-fullscreen{background-image:url('assets/control-windowed.svg')}
.lobby{min-height:calc(100dvh - 105px);display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(36px,7vw,96px);align-items:center}
.eyebrow{color:var(--orange);font-weight:900;letter-spacing:.22em;font-size:12px}.hero-copy h1{font-size:clamp(46px,7vw,90px);line-height:.94;letter-spacing:-.065em;margin:16px 0 24px;max-width:760px}.hero-copy h1 span{color:#687386}.lead{max-width:600px;color:var(--muted);font-size:clamp(16px,2vw,20px);line-height:1.55}
.feature-row{display:flex;flex-wrap:wrap;gap:9px;margin-top:25px}.feature-row span{padding:9px 12px;border:1px solid #ffffff13;border-radius:999px;background:#111722;color:#cbd3df;font-size:12px;font-weight:750}
.lobby-card{position:relative;background:linear-gradient(160deg,#151c29,#0c1018);border:1px solid #ffffff16;border-radius:28px;padding:28px;box-shadow:0 28px 80px #0009;overflow:hidden}
.car-preview{position:relative;height:150px;margin:-28px -28px 24px;background:linear-gradient(#0002,#0006),url('assets/asphalt.png');background-size:256px;overflow:hidden}.car-preview:before,.car-preview:after{content:"";position:absolute;left:0;right:0;height:9px;background:repeating-linear-gradient(90deg,#fff 0 22px,var(--orange) 22px 44px)}.car-preview:before{top:16px}.car-preview:after{bottom:16px}.road-line{position:absolute;top:50%;left:0;right:0;border-top:3px dashed #ffffff5c}.car-preview img{position:absolute;width:130px;height:65px;object-fit:contain;left:52%;top:52%;transform:translate(-50%,-50%) rotate(-8deg);filter:drop-shadow(-28px 20px 15px #000b)}
label{display:grid;gap:8px;color:var(--muted);font-size:13px;font-weight:700}input{width:100%;border:1px solid var(--line);background:#080b11;color:#fff;border-radius:13px;padding:14px 15px;font:inherit;outline:none;text-transform:none}#codeInput{text-transform:uppercase;letter-spacing:.16em}input:focus{border-color:var(--orange);box-shadow:0 0 0 3px #ff4d2e20}
.primary,.secondary{border:0;border-radius:14px;padding:15px 18px;font:inherit;font-weight:900;cursor:pointer}.primary{width:100%;margin-top:14px;background:linear-gradient(135deg,#ff6548,var(--orange));color:#fff;box-shadow:0 12px 30px #ff4d2e35}.secondary{background:#222a37;color:#fff}.divider{display:flex;align-items:center;gap:10px;color:#657083;font-size:12px;margin:18px 0}.divider:before,.divider:after{content:"";height:1px;flex:1;background:var(--line)}.join-row{display:grid;grid-template-columns:1fr auto;gap:8px}.error{min-height:20px;color:#ff8b7a;font-size:13px;margin:12px 0 0}
.race{padding-top:18px}.hud{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:center;margin-bottom:14px}.player-chip{display:flex;align-items:center;gap:10px;min-width:0;background:#111722;border:1px solid #ffffff12;border-radius:15px;padding:10px 13px}.player-chip .dot{width:12px;height:12px;border-radius:50%;flex:0 0 auto;background:#5f6878}.player-chip.waiting-player{opacity:.48;border-style:dashed}.player-chip strong,.player-chip small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-chip div{min-width:0}.player-chip small{color:var(--muted);font-size:11px;margin-top:2px}.status{grid-column:1/-1;text-align:center}.status strong,.status small{display:block}.status small{color:var(--muted);font-size:11px;margin-top:3px}
.track-shell{position:relative;border:1px solid #ffffff17;border-radius:24px;overflow:hidden;background:#101820;box-shadow:0 30px 90px #0009;aspect-ratio:5/3}canvas{display:block;width:100%;height:100%;touch-action:none}
.drift-banner{position:absolute;top:20px;left:50%;transform:translateX(-50%) rotate(-2deg);text-align:center;pointer-events:none;text-shadow:0 4px 20px #000}.drift-banner strong{display:block;color:#ffd439;font-size:30px;font-style:italic;letter-spacing:.08em}.drift-banner span{font-size:15px;font-weight:900}
.controls{display:flex;justify-content:space-between;margin-top:16px;gap:22px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.steering,.pedals{display:flex;gap:12px;user-select:none;-webkit-user-select:none}.controls button{width:82px;height:68px;border:1px solid #ffffff18;border-radius:18px;background-color:#151b26;background-position:center;background-repeat:no-repeat;background-size:38px 38px;color:#fff;box-shadow:inset 0 -6px 12px #0005;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.controls button.pressed{transform:translateY(3px);filter:brightness(1.35)}.controls .gas{background-color:#174927}.controls .brake{background-color:#4c2020}.icon-left{background-image:url('assets/control-left.svg')}.icon-right{background-image:url('assets/control-right.svg')}.icon-gas{background-image:url('assets/control-gas.svg')}.icon-brake{background-image:url('assets/control-brake.svg')}.below-track{display:flex;align-items:center;justify-content:center}.keyboard-tip{text-align:center;color:#687386;font-size:11px}
@media(max-width:760px){.app{padding:0 12px 16px}.topbar{height:62px}.brand{font-size:12px}.brand-mark{width:34px;height:34px}.lobby{display:block;padding:38px 0}.hero-copy{text-align:center}.hero-copy h1{font-size:48px}.hero-copy .lead{font-size:15px}.feature-row{justify-content:center}.lobby-card{margin:32px auto 0;max-width:480px}.room-badge{font-size:11px}.ghost{padding:8px 10px;font-size:11px}.hud{grid-template-columns:1fr 1fr;gap:7px}.status{grid-column:1/-1;text-align:center}.player-chip{padding:7px 8px}.track-shell{border-radius:16px}.controls{position:relative;margin-top:12px}.controls button{width:74px;height:62px;background-size:34px 34px}.keyboard-tip{display:none}.drift-banner{top:8px}.drift-banner strong{font-size:22px}}
@media(max-width:430px){.hero-copy h1{font-size:41px}.lobby-card{padding:20px}.car-preview{margin:-20px -20px 20px}.topbar{gap:8px}.brand>span:last-child{display:none}.controls button{width:64px;height:58px}.room-badge{padding:7px 9px}}
body.focus-mode{overflow:hidden}body.focus-mode .app{width:100%;max-width:none;padding:0 10px 10px}body.focus-mode .topbar{height:54px}body.focus-mode .race{padding-top:8px}body.focus-mode .track-shell{max-height:calc(100dvh - 205px);margin:auto}body.focus-mode .lobby{min-height:calc(100dvh - 60px)}