:root{--font-body:'Satoshi',sans-serif;--font-display:'Chillax',sans-serif;--text-xs:clamp(.75rem,.72rem + .12vw,.875rem);--text-sm:clamp(.875rem,.8rem + .2vw,1rem);--text-base:clamp(1rem,.96rem + .15vw,1.125rem);--text-lg:clamp(1.125rem,1rem + .5vw,1.5rem);--text-xl:clamp(1.5rem,1.2rem + 1vw,2.25rem);--text-title:clamp(4rem,6.7vw,7rem);--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--color-bg:oklch(.94 .015 310);--color-surface:oklch(.99 .006 310);--color-text:oklch(.25 .04 307);--color-text-muted:oklch(.48 .035 307);--color-primary:oklch(.9 .18 120);--color-border:oklch(.3 .04 307 / .13);--color-error:#b2264c;--radius-sm:6px;--radius-md:12px;--radius-lg:20px;--radius-full:100px;--color-purple:#8751cd;--color-gold:#ffcf59}
[data-theme=dark]{--color-bg:oklch(.2 .03 307);--color-surface:oklch(.27 .035 307);--color-text:oklch(.97 .01 307);--color-text-muted:oklch(.75 .015 307);--color-border:oklch(.9 .03 307 / .15);--color-error:#ff90ad}
body{overflow:hidden}#world{position:fixed;inset:0;z-index:0;background:#d9d0ed}#world canvas{width:100%;height:100%;display:block}button{font-size:var(--text-sm);font-weight:700}.topbar{height:96px;position:relative;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:var(--space-6) var(--space-10);background:var(--color-bg);border-bottom:1px solid var(--color-border)}.brand{display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-lg);font-weight:900;line-height:1.05;letter-spacing:-.04em}.brand svg{width:44px;height:44px;color:var(--color-purple)}.brand small{display:block;font-size:var(--text-xs);font-weight:500;letter-spacing:.13em;margin-top:var(--space-1)}.top-actions{display:flex;align-items:center;gap:var(--space-3)}.build-label{font-size:var(--text-xs);letter-spacing:.14em;margin-right:var(--space-6);color:var(--color-text-muted)}.icon-btn{height:44px;min-width:44px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-full);padding:var(--space-2) var(--space-4)}.icon-btn:hover,.secondary:hover{background:var(--color-bg);box-shadow:0 0 0 2px var(--color-border)}.lobby{position:relative;height:calc(100dvh - 96px);display:grid;grid-template-columns:450px 1fr;grid-template-rows:1fr 64px;padding:var(--space-8) var(--space-10) 0;overflow:auto;background:var(--color-bg)}.lobby::before{content:"";position:absolute;inset:0 0 64px 30%;background-image:url('./assets/rush-art.webp');background-size:cover;background-position:60% center;pointer-events:none}.lobby::after{content:"";position:absolute;inset:0 50% 64px 20%;background:linear-gradient(90deg,var(--color-bg),transparent);pointer-events:none}.lobby-copy{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding-bottom:var(--space-8)}.eyebrow{font-size:var(--text-xs);font-weight:700;letter-spacing:.13em;display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-4)}.status-dot{height:7px;width:7px;border-radius:50%;background:var(--color-purple)}h1{font-family:var(--font-display);font-size:var(--text-title);font-weight:700;line-height:.92;letter-spacing:-.07em}h1 span{color:var(--color-purple)}.tagline{font-size:var(--text-base);color:var(--color-text-muted);margin-top:var(--space-4);margin-bottom:var(--space-6)}.play-panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);width:360px;padding:var(--space-5);box-shadow:0 8px 40px #35204810}.panel-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-4)}.panel-heading h2{font-size:var(--text-base);font-weight:900}.panel-heading>span{font-size:var(--text-xs);color:var(--color-text-muted)}label,legend{font-size:var(--text-xs);font-weight:700;color:var(--color-text-muted);display:block;margin-bottom:var(--space-1)}input,select{width:100%;height:44px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);padding:var(--space-2) var(--space-3);font-size:var(--text-base)}.colors{border:0;display:flex;align-items:center;gap:var(--space-2);margin:var(--space-3) 0}.colors legend{float:left;line-height:44px;margin:0 var(--space-2) 0 0}.swatch{flex-shrink:0;width:28px;height:44px;position:relative}.swatch::before{content:"";position:absolute;inset:10px 2px;background:var(--swatch);border-radius:50%}.swatch.selected::before{box-shadow:0 0 0 3px var(--color-surface),0 0 0 5px var(--color-text)}#color-name{font-size:var(--text-xs);color:var(--color-text-muted);margin-left:var(--space-1)}.primary{background:var(--color-primary);color:#263310;border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4);display:flex;justify-content:space-between;align-items:center;width:100%;min-height:50px;letter-spacing:.03em;margin-top:var(--space-4);box-shadow:0 3px 0 #79972b}.primary span{font-size:var(--text-lg)}.primary:hover{background:#d3f88b;transform:translateY(-2px)}.micro{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:var(--space-2)}.party-actions{display:flex;gap:var(--space-2);margin-top:var(--space-4)}.secondary{border:1px solid var(--color-border);background:var(--color-surface);border-radius:var(--radius-sm);min-height:44px;padding:var(--space-2) var(--space-3);flex:1}.error{font-size:var(--text-sm);color:var(--color-error)}.error:not(:empty){margin-top:var(--space-3)}#join-form{margin-top:var(--space-4)}.join-row{display:flex;gap:var(--space-2)}#room-code{text-transform:uppercase;letter-spacing:.2em;width:65%}.hero-side{position:relative;z-index:2;pointer-events:none}.hero-sticker{position:absolute;right:4%;top:5%;width:140px;height:140px;display:flex;flex-direction:column;justify-content:center;align-items:center;background:var(--color-gold);color:#36251d;border-radius:50%;transform:rotate(12deg);box-shadow:0 5px 0 #a87834}.hero-sticker span{font-family:var(--font-display);font-weight:700;font-size:var(--text-lg);text-align:center;line-height:1.1}.hero-sticker small{font-size:var(--text-xs);margin-top:var(--space-2);font-weight:900}.course-caption{position:absolute;bottom:var(--space-10);right:var(--space-6);display:flex;gap:var(--space-4);padding:var(--space-4) var(--space-5);background:#f7f3ffed;border-radius:var(--radius-md);color:#30233f}.caption-index{font-size:var(--text-lg);font-weight:900;color:#8050ba}.course-caption strong{font-size:var(--text-base);display:block}.course-caption div>span{font-size:var(--text-xs);color:#665775}.lobby-footer{position:relative;grid-column:1/-1;z-index:3;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--color-border);font-size:var(--text-xs);font-weight:700;letter-spacing:.08em;background:var(--color-bg)}.lobby-footer button{min-height:44px;font-size:var(--text-sm)}.lobby-footer button span{margin-left:var(--space-3)}.footer-note{color:var(--color-text-muted)}.overlay{position:fixed;inset:96px 0 0;background:#261c428c;backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;z-index:25;padding:var(--space-6);overflow:auto}.modal{width:min(100%,480px);max-height:100%;overflow:auto;border:1px solid var(--color-border);background:var(--color-surface);border-radius:var(--radius-lg);padding:var(--space-8);box-shadow:0 24px 80px #21152a30}.modal h2{font-family:var(--font-display);font-size:var(--text-xl);margin-bottom:var(--space-4);letter-spacing:-.04em}.modal p{color:var(--color-text-muted);font-size:var(--text-sm)}.code-box{display:flex;justify-content:space-between;align-items:center;padding:var(--space-4);background:var(--color-bg);border-radius:var(--radius-md);margin:var(--space-6) 0 var(--space-4);gap:var(--space-4)}.code-box strong{letter-spacing:.18em;font-size:var(--text-xl)}.code-box button{flex:0}.party-meta{display:flex;justify-content:space-between;font-size:var(--text-xs);color:var(--color-text-muted);margin-bottom:var(--space-3)}.roster-item{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--color-border);padding:var(--space-2) 0;font-size:var(--text-sm)}.roster-item>span{display:flex;align-items:center;gap:var(--space-2)}.color-dot{width:12px;height:12px;border-radius:50%;background:var(--dot)}.roster-item small{color:var(--color-text-muted);font-size:var(--text-xs)}.text-btn{min-height:44px;width:100%;color:var(--color-text-muted);margin-top:var(--space-2)}.instruction-list{list-style:none;margin:var(--space-5) 0}.instruction-list li{display:flex;gap:var(--space-4);padding:var(--space-3) 0;border-top:1px solid var(--color-border);font-size:var(--text-sm)}.instruction-list strong{width:72px;flex-shrink:0}.instruction-list span{color:var(--color-text-muted)}#hud{position:fixed;inset:96px 0 0;z-index:10;pointer-events:none}.hud-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);padding:var(--space-6)}.hud-card{background:var(--color-surface);border:1px solid var(--color-border);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);box-shadow:0 5px 20px #35204b1a;font-size:var(--text-xs);color:var(--color-text-muted)}.hud-card>strong{display:block;font-size:var(--text-base);color:var(--color-text);margin-top:var(--space-1)}.stats{display:flex;gap:var(--space-6)}.stats span>strong{display:block;font-size:var(--text-lg);color:var(--color-text);font-variant-numeric:tabular-nums}#exit-btn{pointer-events:auto}.race-progress{position:absolute;top:116px;left:var(--space-6);width:220px;height:5px;background:#ffffff80;border-radius:var(--radius-full)}#progress-fill{height:100%;background:#9751d5;transition:width .1s}#checkpoint-label{position:absolute;top:var(--space-2);font-size:var(--text-xs);font-weight:700;color:#392949;background:#ffffffdf;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm)}#countdown{position:absolute;inset:30% 0 auto;text-align:center;font-size:clamp(4rem,12vw,9rem);font-family:var(--font-display);font-weight:700;color:white;text-shadow:0 6px 0 #684493,0 0 40px #51346150}#toast{position:absolute;top:160px;left:50%;transform:translateX(-50%);background:var(--color-surface);border-radius:var(--radius-full);padding:var(--space-2) var(--space-5);font-size:var(--text-sm);font-weight:700;white-space:nowrap}#toast:empty{display:none}.hud-bottom{position:absolute;bottom:var(--space-10);left:var(--space-6);right:var(--space-6);display:flex;justify-content:space-between;align-items:center}.control-hint{background:var(--color-surface);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);font-size:var(--text-xs);color:var(--color-text-muted)}kbd{font:700 var(--text-xs) var(--font-body);color:var(--color-text);margin-left:var(--space-3)}kbd:first-child{margin-left:0}#dash-meter{background:var(--color-surface);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);font-size:var(--text-xs);font-weight:700;width:150px}#dash-meter>div{height:5px;background:var(--color-border);margin-top:var(--space-2);overflow:hidden;border-radius:var(--radius-full)}#dash-meter i{display:block;height:100%;width:100%;background:#8b52d4;transition:width .1s}#touch-controls{display:none}#connection{position:absolute;bottom:100px;left:50%;transform:translateX(-50%);background:#fff3d0;color:#543b20;padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);font-size:var(--text-xs)}#connection:empty{display:none}#debug{position:fixed;bottom:var(--space-2);right:var(--space-3);z-index:30;font:500 var(--text-xs) var(--font-body);background:#251936cc;color:#eddfef;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);pointer-events:none}.result-art{height:110px;width:calc(100% + 64px);max-width:none;object-fit:cover;object-position:center 58%;margin:calc(-1 * var(--space-8)) calc(-1 * var(--space-8)) var(--space-6);opacity:.95}.leader-row{display:grid;grid-template-columns:28px 1fr auto;gap:var(--space-3);padding:var(--space-2) 0;border-bottom:1px solid var(--color-border);font-size:var(--text-sm)}.leader-row.you{font-weight:900;color:var(--color-purple)}#leaderboard{margin:var(--space-5) 0;max-height:235px;overflow:auto}.leader-row small{font-size:var(--text-xs);color:var(--color-text-muted)}.loading-content{text-align:center;color:#fff}.loading-content img{margin:0 auto var(--space-6);border-radius:var(--radius-lg);object-fit:cover}.loading-content h2{font-family:var(--font-display);font-size:var(--text-xl);margin-bottom:var(--space-3)}.skip{position:fixed;top:-100px;left:16px;z-index:100;background:var(--color-primary);padding:var(--space-3)}.skip:focus{top:16px}
@media(min-width:1100px) and (max-height:850px){.lobby{padding-top:var(--space-4)}h1{font-size:clamp(3rem,5.5vw,5rem)}.eyebrow{margin-bottom:var(--space-3)}.tagline{margin:var(--space-3) 0 var(--space-4)}.lobby-copy{padding-bottom:var(--space-4)}.play-panel{padding:var(--space-4)}.panel-heading{margin-bottom:var(--space-2)}.party-actions{margin-top:var(--space-3)}}
@media(max-width:900px){.build-label{display:none}.lobby{grid-template-columns:380px 1fr}.hero-sticker{right:0;width:115px;height:115px}.course-caption{display:none}.footer-note{display:none}.topbar{padding:var(--space-4) var(--space-6)}}
@media(max-width:600px){.topbar{height:76px;padding:var(--space-3) var(--space-4)}.brand{font-size:var(--text-base);gap:var(--space-2)}.brand svg{width:34px;height:34px}.brand small{font-size:var(--text-xs);letter-spacing:.06em}.top-actions{gap:var(--space-2)}.icon-btn{padding:var(--space-2) var(--space-3)}#sound{font-size:var(--text-xs)}.lobby{height:calc(100dvh - 76px);display:block;padding:var(--space-6) var(--space-4) 0;overflow-y:auto}.lobby::before{inset:0 0 auto 0;height:220px;background-position:80% 45%;opacity:.5}.lobby::after{inset:100px 0 auto;height:140px;background:linear-gradient(0deg,var(--color-bg),transparent)}.lobby-copy{align-items:stretch;justify-content:flex-start;padding-bottom:var(--space-6)}.eyebrow{font-size:var(--text-xs);margin-bottom:var(--space-3)}h1{font-size:3.5rem;line-height:.9;position:relative}h1 br{display:none}h1 span{display:block}.tagline{font-size:var(--text-sm);margin:var(--space-3) 0 var(--space-4)}.play-panel{width:100%;padding:var(--space-4)}.hero-side{display:none}.lobby-footer{height:60px;gap:var(--space-3);font-size:var(--text-xs);letter-spacing:0}.lobby-footer button{font-size:var(--text-xs)}.colors{gap:var(--space-1)}#color-name{margin-left:var(--space-2)}.overlay{inset:76px 0 0;padding:var(--space-4)}.modal{padding:var(--space-6)}.modal h2{font-size:var(--text-xl)}#hud{inset:76px 0 0}.hud-top{padding:var(--space-3);gap:var(--space-2);flex-wrap:wrap}.hud-card{padding:var(--space-2) var(--space-3)}.hud-card>strong{font-size:var(--text-xs)}.stats{gap:var(--space-3)}.stats span>strong{font-size:var(--text-base)}#exit-btn{font-size:var(--text-xs);padding:var(--space-2);min-width:44px;height:44px}.race-progress{top:98px;left:var(--space-3);width:150px}#toast{top:145px;font-size:var(--text-xs)}.control-hint{display:none}.hud-bottom{bottom:165px;left:auto;right:var(--space-3)}#dash-meter{width:105px;padding:var(--space-2);font-size:var(--text-xs)}#touch-controls{position:absolute;bottom:var(--space-8);left:var(--space-4);right:var(--space-4);display:flex;align-items:center;justify-content:space-between;pointer-events:auto;touch-action:none}.dpad{display:grid;grid-template-columns:46px 46px 46px;grid-template-rows:46px 46px;gap:var(--space-1)}.dpad button,.touch-actions button{background:#faf6ffeb;border:1px solid #cabcd9;color:#332345;border-radius:var(--radius-md);font-size:var(--text-lg);touch-action:none;user-select:none}.dpad button:nth-child(1){grid-column:2}.dpad button:nth-child(2){grid-column:1;grid-row:2}.dpad button:nth-child(3){grid-column:2;grid-row:2}.dpad button:nth-child(4){grid-column:3;grid-row:2}.touch-actions{display:flex;align-items:flex-end;gap:var(--space-2)}.touch-actions button{width:64px;height:64px;font-size:var(--text-sm);border-radius:50%}.touch-actions #touch-jump{background:#c2ef7a;color:#263310;width:74px;height:74px}.result-art{width:calc(100% + 48px);margin:calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-5)}#debug{font-size:var(--text-xs);max-width:95%;white-space:nowrap;overflow:hidden}.code-box{padding:var(--space-3);gap:var(--space-2)}.code-box strong{font-size:var(--text-xl)}}
@media(max-width:600px){#hud .hud-top{display:grid;grid-template-columns:1fr auto}.hud-top #exit-btn{position:absolute;top:90px;right:var(--space-3)}.lobby .lobby-footer{align-items:flex-start;padding-top:var(--space-3)}.lobby .lobby-footer button{min-height:24px}}