@font-face{font-family:Bangers;src:url('assets/fonts/bangers.ttf') format('truetype');font-display:swap}
:root{color-scheme:dark;--ink:#f8eedc;--muted:#b7a9c2;--gold:#f2d488;--purple:#ac79da;--bg:#17121d;--line:#4b3858;font-family:system-ui,sans-serif;background:var(--bg);color:var(--ink)}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button,a,input,select{outline-offset:5px}button{cursor:pointer;touch-action:manipulation}button:disabled{opacity:.42;cursor:default}button,.outline{border:1px solid var(--line);border-radius:9px;min-height:46px;padding:11px 17px;background:#30213b;color:var(--ink);font-weight:650}button:hover:not(:disabled),.outline:hover{filter:brightness(1.16)}.gold{background:var(--gold);border-color:var(--gold);color:#2d1c36;box-shadow:0 4px 0 #9b7147}.quiet{background:#23192d}.textButton{background:transparent;border:0;color:var(--muted)}input,select{display:block;width:100%;margin-top:8px;padding:13px;border:1px solid #715580;border-radius:8px;color:var(--ink);background:#17111e;min-height:46px;font-size:16px}label{display:block;font-size:13px;font-weight:650;letter-spacing:.3px}h1,h2,h3,.wordmark,.menuRibbon,.raceActions{font-family:Bangers,Impact,sans-serif;font-weight:400;letter-spacing:1px}h1{font-size:clamp(54px,6.8vw,96px);line-height:.95;margin:16px 0 24px}h1 em{color:var(--gold);font-style:normal}h2{font-size:38px;margin:4px 0 16px}h3{font-size:28px}p{line-height:1.6}.eyebrow{font-size:11px;letter-spacing:3px;font-weight:750;color:#d5a4eb;margin:0}.muted,.fine{color:var(--muted)}.fine{font-size:12px;line-height:1.6}.menuHeader{max-width:1440px;margin:auto;display:flex;align-items:center;gap:28px;padding:20px 36px;border-bottom:1px solid #ffffff12}.wordmark{font-size:12px;letter-spacing:2px;flex:1}.wordmark strong{display:block;font-size:25px;color:var(--gold);font-weight:400}.menuHeader nav{display:flex;gap:24px;font-size:14px}.menuHeader nav [aria-current]{color:var(--gold)}.menuHeader button{font-size:13px}.intro{position:relative;max-width:1440px;margin:auto;min-height:660px;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:52px 7% 100px;gap:50px;overflow:hidden;background:radial-gradient(ellipse at 27% 44%,#71394c55,transparent 57%),linear-gradient(125deg,#271a2e,#17121d 70%)}.intro:before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.12;background-image:radial-gradient(#f2d488 1px,transparent 1px);background-size:7px 7px;mask-image:linear-gradient(to right,#000,transparent 65%)}.introArt{position:relative;min-height:420px;display:flex;align-items:center;justify-content:center;isolation:isolate}.heroLogo{width:min(100%,550px);position:relative;filter:drop-shadow(0 25px 26px #0009);animation:logoFloat 7s ease-in-out infinite}.orbit{position:absolute;width:88%;aspect-ratio:1;border:1px solid #c7975666;border-radius:50%;z-index:-1}.orbit:after{content:'✦';color:var(--gold);position:absolute;left:14%;top:10%;font-size:30px}.orbitOne{animation:rotate 40s linear infinite}.orbitTwo{width:104%;border-style:dashed;opacity:.4;animation:rotate 65s linear infinite reverse}.introCopy{position:relative}.lead{color:#cfc1d8;font-size:17px;margin:0 0 28px}.menuActions{display:grid;gap:11px;max-width:350px}.menuActions :is(button,.outline){font-family:Bangers,Impact;font-size:24px;letter-spacing:1px;text-align:left;padding:15px 20px}.menuActions span{float:right}.menuActions .textButton{text-align:center;font:13px system-ui;padding:9px;min-height:34px}.menuRibbon{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:center;gap:40px;padding:15px;border-top:1px solid #73524155;border-bottom:1px solid #73524155;color:#d9b877;font-size:20px;transform:rotate(-1deg);background:#231a29}.menuRibbon i{font-size:13px;font-style:normal}.panel{max-width:1160px;margin:50px auto;padding:32px;background:#211829;border:1px solid var(--line);border-radius:16px}.sectionHeading{display:flex;justify-content:space-between;align-items:center;gap:20px}.browserToolbar{display:flex;align-items:end;gap:18px;margin:15px 0 20px}.browserToolbar label{flex:1}.browserToolbar button{min-height:48px}.roomList{display:grid;gap:12px}.roomCard{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:20px;background:#2b2035;padding:18px;border:1px solid #594167;border-radius:10px}.roomCard h3{margin:0 0 4px;font-size:24px}.roomCard p{margin:0;font-size:13px;color:var(--muted)}.emptyState{padding:32px;border:1px dashed #694b78;border-radius:10px;text-align:center}.emptyState h3{color:var(--gold);margin:0 0 8px}.emptyState p{margin:0;color:var(--muted);font-size:14px}.room{max-width:1400px}.roomUtility{display:flex;gap:8px}.connectionStatus{font-size:13px;color:#c3d9ad;min-height:21px}.roomGrid{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:24px}.raceColumn{min-width:0}.raceView{position:relative;width:100%;aspect-ratio:4/3;background:#100d15;border:1px solid #5a3e6b;border-radius:12px;overflow:hidden}.raceView iframe,.raceView video{width:100%;height:100%;position:absolute;inset:0;border:0;object-fit:contain}.raceView #enableSound{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);z-index:2}#viewPlaceholder{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;color:var(--muted)}#viewPlaceholder span{font-size:60px;color:var(--gold)}#viewPlaceholder h3{margin:15px}#viewPlaceholder p{font-size:13px}.raceStatus{display:flex;align-items:center;gap:12px;justify-content:space-between;padding:9px 0;font-size:11px;font-weight:700}.raceStatus button{min-height:34px;padding:5px 9px;font-size:12px}.raceActions{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.raceActions button{font:24px Bangers,Impact;letter-spacing:.7px;min-width:0;padding:10px 3px;min-height:60px}.raceActions small{display:block;font:10px system-ui;letter-spacing:0;margin-top:4px}.raceActions [data-race-action=boss]{background:#684081}.roomSidebar label{margin-bottom:12px}.roomSidebar>.gold,#hostOptions button{width:100%;margin:6px 0}.members{margin:20px 0}.member{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #ffffff13;font-size:13px}.member img{width:40px;height:40px;object-fit:cover;border-radius:50%;background:#372241;border:1px solid #9b74b3}.member>div{flex:1;min-width:0}.member b{display:block;overflow:hidden;text-overflow:ellipsis}.member small{color:var(--muted);font-size:11px}.readyDot{color:#b4e593}.notReady{color:#d6b584}.roomSidebar .fine{font-size:11px}footer{max-width:1160px;margin:35px auto;display:flex;justify-content:space-between;font-size:12px;color:#a291ad}footer span{font-size:11px}dialog{max-width:480px;width:calc(100vw - 30px);max-height:90dvh;overflow:auto;border:1px solid #8e649e;background:#25192e;color:var(--ink);border-radius:16px;padding:30px}dialog::backdrop{background:#0b0815d9;backdrop-filter:blur(7px)}dialog h2{font-size:34px}dialog label{margin:20px 0}dialog .gold{width:100%}.close{float:right;min-height:34px;padding:0 10px;font-size:26px;background:transparent;border:0}#message{position:fixed;bottom:max(18px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:100;max-width:calc(100vw - 30px);width:max-content;padding:14px 20px;border:1px solid #ad83b9;border-radius:10px;background:#32203e;box-shadow:0 6px 30px #0009;font-size:14px}#roomTools button:not(.close){display:block;width:100%;margin:12px 0}
body.roomFullscreen{overflow:hidden}body.roomFullscreen>.menuHeader,body.roomFullscreen>footer,body.roomFullscreen #intro,body.roomFullscreen #browser{display:none!important}body.roomFullscreen #room{position:fixed;inset:0;margin:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);border:0;border-radius:0;background:#17121d;max-width:none;height:100dvh}body.roomFullscreen #room>.sectionHeading,body.roomFullscreen .roomSidebar{display:none}body.roomFullscreen .connectionStatus{height:22px;margin:0;padding:3px 8px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}body.roomFullscreen .roomGrid{height:calc(100% - 22px);display:block}body.roomFullscreen .raceColumn{height:100%;display:grid;grid-template-rows:minmax(0,1fr) 38px 60px}body.roomFullscreen .raceView{height:100%;aspect-ratio:auto;border-radius:0;border:0}body.roomFullscreen .raceStatus{padding:3px 8px}body.roomFullscreen .raceActions{padding:4px 6px;gap:4px}body.roomFullscreen .raceActions button{min-height:48px;padding:4px 2px;font-size:22px}body.roomFullscreen .raceActions small{font-size:10px}
@media(max-width:800px){.menuHeader{padding:16px;gap:12px;flex-wrap:wrap}.wordmark{min-width:140px}.menuHeader nav{gap:16px}.menuHeader button{font-size:12px;min-height:40px;padding:9px}.intro{grid-template-columns:1fr;gap:6px;text-align:center;padding:14px 24px 80px;min-height:0}.introArt{min-height:0;height:260px;margin:0 auto;width:300px}.heroLogo{width:280px}.orbit{width:230px}.orbitTwo{width:270px}.introCopy h1{font-size:62px;margin:12px 0 18px}.lead{font-size:15px;margin-bottom:20px}.menuActions{margin:auto;width:100%;max-width:380px}.introCopy>.fine{font-size:11px}.menuRibbon{gap:17px;font-size:16px;padding:12px}.menuRibbon i{font-size:9px}.panel{margin:24px 12px;padding:20px 16px}.sectionHeading h2{font-size:31px}.browserToolbar{gap:10px}.browserToolbar button{font-size:13px;padding:12px}.roomCard{grid-template-columns:1fr auto;gap:12px}.roomCard .roomCount{display:none}.roomGrid{grid-template-columns:1fr;gap:20px}.roomSidebar{display:grid;grid-template-columns:1fr auto;gap:8px 14px}.roomSidebar>.members,.roomSidebar>#hostOptions,.roomSidebar>.fine{grid-column:1/-1}.roomSidebar>button{align-self:center}.roomSidebar label{margin:0}.roomUtility{gap:4px}.roomUtility button{font-size:11px;padding:8px;min-height:38px}.sectionHeading{gap:8px}.roomTitle{font-size:26px}.raceActions button{font-size:21px}footer{padding:0 18px;gap:20px;font-size:11px}footer span{text-align:right;max-width:200px}}
@media(max-width:380px){.menuHeader nav{order:3;width:100%;justify-content:center}.introArt{height:210px}.heroLogo{width:230px}.introCopy h1{font-size:54px}.menuRibbon{gap:10px;font-size:14px}}
@media(max-height:500px) and (orientation:landscape){body.roomFullscreen .raceColumn{grid-template-rows:minmax(0,1fr) 31px 51px}body.roomFullscreen .raceActions button{min-height:43px;font-size:20px}body.roomFullscreen .connectionStatus{height:18px;font-size:10px}body.roomFullscreen .roomGrid{height:calc(100% - 18px)}}
@keyframes logoFloat{50%{transform:translateY(-10px) rotate(-1deg)}}@keyframes rotate{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}

#raceAnnounce{position:absolute;top:12%;left:5%;right:5%;text-align:center;font:clamp(18px,3.5vw,42px) Bangers,Impact;color:#ffebaa;text-shadow:2px 3px #17121d,-1px -1px #17121d;pointer-events:none}#menuSound{font-size:11px;padding:7px 9px;min-height:36px}

/* Dedicated lobby browser opened from the menu. */
#browser{width:min(1000px,calc(100vw - 24px));max-width:1000px;margin:auto;max-height:calc(100dvh - 32px);padding:28px;overscroll-behavior:contain}#browser>.close{position:sticky;top:0;z-index:2;background:#25192e}#browser .sectionHeading{clear:both}#browser .gold{width:auto;flex-shrink:0}
@media(max-width:600px){#browser{padding:18px 12px;max-height:calc(100dvh - 24px)}#browser .browserToolbar{flex-wrap:wrap}#browser .browserToolbar label{flex-basis:100%}#browser .browserToolbar button{width:100%}}

.loginError{padding:12px 15px;border:1px solid #d6a662;border-radius:10px;background:#372638;color:#ffe6ba;font-family:system-ui,sans-serif;font-size:14px;line-height:1.5;max-width:540px}.loginError[hidden]{display:none}