@font-face{font-family:Race;src:local('Arial Black');font-weight:900;font-display:swap}
:root{--ink:#122527;--paper:#fff9e6;--mint:#c8ff63;--line:#ffffff24;--muted:#afc1bb;--display:Impact,'Arial Black',sans-serif;color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:#add1d3;color:var(--paper);font:14px/1.45 Arial,Helvetica,sans-serif;overflow:hidden}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button{color:inherit;background:none;border:0}button:disabled{cursor:wait;opacity:.45}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid var(--mint);outline-offset:3px}input:focus,select:focus{outline:2px solid var(--mint)}.hidden{display:none!important}#viewport{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}.shade{position:fixed;inset:0;pointer-events:none;background:linear-gradient(90deg,#102124ee 0%,#102124d9 28%,#18343735 56%,transparent 80%),linear-gradient(0deg,#12252755,transparent 23%)}.topbar{position:fixed;inset:0 0 auto;z-index:12;display:flex;align-items:center;justify-content:space-between;padding:20px 32px;gap:16px;text-shadow:0 1px 4px #0004}.brand{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:900;letter-spacing:1.4px}.brand-mark{font-size:35px;line-height:.7;color:var(--mint)}.brand small{font-size:9px;letter-spacing:1px;font-weight:500;opacity:.7;border-left:1px solid #ffffff44;padding-left:12px}.top-tools{display:flex;align-items:center;gap:8px}.top-tools button{min-width:35px;height:32px;border:1px solid #ffffff50;border-radius:5px;background:#12252788;font-size:10px;font-weight:800}.top-tools #connection{font-size:9px;letter-spacing:1px;margin-right:10px;color:var(--paper)}.top-tools .offline{color:#ffae92!important}.menu{position:absolute;top:82px;bottom:22px;left:44px;width:400px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#c8ff6355 transparent;padding-right:10px;z-index:3}.eyebrow,.section-label,.menu-foot,.minor-actions,.customize label{font-size:9px;font-weight:700;letter-spacing:1.8px}.eyebrow{color:var(--mint);display:flex;align-items:center;gap:9px}.live-dot{width:6px;height:6px;background:var(--mint);border-radius:50%;box-shadow:0 0 12px #c8ff6366}h1{font-family:var(--display);font-size:53px;font-weight:900;letter-spacing:-1px;line-height:.96;margin:17px 0 12px;transform:skew(-6deg);transform-origin:left}h1>span{display:block;font-size:106px;line-height:.94;color:var(--mint);letter-spacing:-1px}.speed-mark{font-size:90px;font-weight:400;display:inline-block;margin-left:17px;vertical-align:8px;transform:rotate(-9deg)}.intro{font-size:13px;line-height:1.6;margin:14px 0 21px;color:#bdcbc6}.intro b{color:var(--paper);font-weight:500}.section-label{display:flex;justify-content:space-between;align-items:center;margin:16px 0 10px;color:#bacbc5;letter-spacing:1.3px}.section-label .text-button{font-size:9px}.cast{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.cast button{height:55px;border:1px solid #ffffff25;border-radius:6px;position:relative;background:linear-gradient(150deg,#ffffff15,#ffffff03);transition:background .15s,transform .15s;overflow:hidden;padding:0}.cast button:hover{background:#ffffff25;transform:translateY(-2px)}.cast button.selected{border:2px solid var(--mint);background:#c8ff632c}.cast img{height:100%;width:100%;object-fit:contain;object-position:center 15%;display:block}.cast .initial{font-family:var(--display);font-size:25px;opacity:.8}.cast button>small{position:absolute;bottom:2px;left:4px;font-size:7px;text-shadow:0 1px 3px #000,0 0 5px #000;font-weight:800;text-transform:uppercase;letter-spacing:.4px}.driver-info{display:flex;align-items:center;gap:10px;margin:10px 0 14px;font-size:10px}.driver-info b{font-size:12px;letter-spacing:1px}.driver-info>span{color:#b6c5c0;font-size:9px;letter-spacing:.7px}.driver-info #garage-level{margin-left:auto;color:var(--mint);border:1px solid #c8ff6344;border-radius:4px;padding:2px 6px}.customize{display:grid;grid-template-columns:1.3fr 1fr;gap:10px}.customize label{color:#afc1bb;letter-spacing:1.3px;font-size:8px}.customize input,.customize select{width:100%;height:34px;border:1px solid #ffffff33;background:#10252799;color:var(--paper);padding:6px 10px;border-radius:4px;margin-top:5px;font-size:12px}select option{background:var(--ink)}.tracks{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.track-choice{padding:8px 6px;border:1px solid #ffffff30;border-radius:5px;text-align:left;min-width:0;background:#12252770}.track-choice svg{display:block;width:100%;height:24px;color:#bbc6bd;margin-bottom:6px}.track-choice b{display:block;font-size:8px;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}.track-choice small{font-size:8px;color:#afc1bb}.track-choice.selected{background:#c8ff6320;border-color:var(--mint)}.track-choice.selected svg{color:var(--mint)}.play-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:17px 0 10px}.primary,.secondary{display:flex;justify-content:space-between;align-items:center;padding:14px 14px;border-radius:5px;font-size:10px;font-weight:900;letter-spacing:.9px;min-height:44px}.primary{background:var(--mint);color:var(--ink);box-shadow:0 4px 0 #739b3055}.primary:hover{background:#dcff9a;transform:translateY(-1px)}.primary span,.secondary span{font-size:18px;line-height:1}.secondary{border:1px solid #ffffff70;background:#122527a0}.secondary:hover{background:#ffffff20}.full{width:100%;margin-top:17px;justify-content:center;gap:12px}.minor-actions{display:flex;justify-content:space-between;align-items:center;font-size:8px;letter-spacing:.8px;color:#adbfba}.text-button{padding:5px 0;font-size:10px;letter-spacing:.5px;color:#cbd4cb}.text-button:hover{color:var(--mint)}.join-row{display:flex;align-items:center;gap:8px;border-top:1px solid #ffffff22;margin-top:14px;padding-top:12px}.join-row label{font-size:8px;letter-spacing:1.1px;flex:1}.join-row input{width:92px;background:#ffffff09;border:1px solid #ffffff30;border-radius:4px;padding:8px;color:var(--paper);font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase}.join-row button{font-size:24px;width:36px;background:#ffffff10;border:1px solid #ffffff30;border-radius:4px;line-height:32px}.menu-foot{display:flex;justify-content:space-between;color:#9eb4aa;font-size:7px;letter-spacing:1px;margin:18px 0 5px}.quick{font-size:9px;color:#cfdeb9;display:flex;align-items:center;gap:7px;margin-top:9px}.postcard{position:absolute;right:5.5vw;top:18%;text-align:right;color:#173535;pointer-events:none}.postcard .eyebrow{justify-content:flex-end;color:#1b4946;font-size:9px}.postcard p{font-family:Georgia,serif;font-size:clamp(35px,4vw,62px);line-height:1.04;letter-spacing:-2px;margin:15px 0 20px}.postcard p em{font-style:italic;font-weight:bold}.postcard>div{border-top:1px solid #24534c55;padding-top:12px;display:flex;flex-direction:column;gap:5px}.postcard b{font-size:11px;letter-spacing:2px}.postcard>div>span{font-size:8px;letter-spacing:1.5px}.preview-label{position:absolute;right:12%;bottom:50px;display:flex;flex-direction:column;gap:7px;border-left:2px solid var(--mint);padding-left:12px;text-shadow:0 2px 5px #0008}.preview-label span{font-size:8px;letter-spacing:2px;color:var(--mint)}.preview-label b{font-size:12px;letter-spacing:1px}.panel{position:absolute;z-index:20;top:50%;left:50%;transform:translate(-50%,-50%);width:min(460px,calc(100% - 32px));max-height:calc(100dvh - 100px);overflow:auto;background:#102527f5;border:1px solid #e6f2d850;border-radius:12px;box-shadow:0 28px 100px #0b252e60;padding:32px;backdrop-filter:blur(14px)}h2{font-family:var(--display);font-weight:900;font-size:48px;letter-spacing:.2px;line-height:.96;margin:17px 0;color:var(--paper)}.panel p,dialog p{font-size:12px;line-height:1.65;color:#bdccc2}.room-code{margin:9px 0;display:flex;align-items:center;justify-content:space-between;width:100%;border:1px dashed #c8ff6388;border-radius:5px;padding:13px}.room-code b{font-size:32px;letter-spacing:5px;color:var(--mint)}.room-code span{font-size:8px;letter-spacing:1px}.lobby-meta{display:flex;justify-content:space-between;align-items:center;margin:18px 0 8px;color:var(--mint);font-size:10px;letter-spacing:1px}.roster-row{display:flex;gap:10px;align-items:center;padding:10px 0;border-top:1px solid #ffffff15;font-size:12px}.roster-row .dot{height:9px;width:9px;border-radius:50%;flex-shrink:0}.roster-row b{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.roster-row small{font-size:8px;color:#b9ccc2;letter-spacing:.8px}.roster-row.empty{opacity:.45}.panel>.text-button{display:block;margin:12px auto 0}.muted{color:#96afa7!important;font-size:10px!important}.hud{position:fixed;inset:0;pointer-events:none;z-index:5;text-shadow:0 1px 5px #14373566}.hud button,.race-controls{pointer-events:auto}.race-top{position:absolute;top:88px;left:30px;display:flex;gap:22px;align-items:center}.position{position:relative;min-width:98px;padding-bottom:16px}.position strong{font-family:var(--display);font-size:88px;line-height:1;color:var(--mint);-webkit-text-stroke:1px #24443430}.position>span{font-family:var(--display);font-size:30px;opacity:.8}.position small{position:absolute;left:3px;bottom:0;font-size:8px;letter-spacing:2px}.lap{display:flex;flex-direction:column;border-left:1px solid #ffffff66;padding:8px 0 8px 20px;gap:4px}.lap small{font-size:8px;letter-spacing:1.6px}.lap b{font-size:21px;font-weight:900}.lap>span{font-variant-numeric:tabular-nums;font-size:13px;letter-spacing:1px}.race-roster{position:absolute;top:226px;left:32px;min-width:158px}.race-roster .standing{display:flex;align-items:center;gap:9px;padding:6px 9px;margin:2px 0;border-radius:3px;font-size:10px;background:#10252775;backdrop-filter:blur(5px)}.standing.me{color:var(--mint);background:#102527ca;border-left:2px solid var(--mint)}.standing b{width:12px}.standing span{flex:1}.standing small{font-size:8px;opacity:.7}#minimap{position:absolute;right:27px;top:92px;width:180px;height:158px;background:#10252766;border:1px solid #ffffff30;border-radius:12px;backdrop-filter:blur(7px)}.race-bottom{position:absolute;bottom:66px;left:32px;right:32px;display:flex;justify-content:space-between;align-items:flex-end}.speed strong{font-family:var(--display);font-size:72px;line-height:1}.speed>span{font-size:10px;letter-spacing:1px;margin-left:5px}.drift-meter{width:170px;height:5px;background:#ffffff44;border-radius:4px;margin:8px 0}.drift-meter i{display:block;height:100%;width:0;background:var(--mint);box-shadow:0 0 15px #c8ff6388;border-radius:4px}.speed small{font-size:8px;letter-spacing:1.5px}.item{width:160px;height:126px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#102527cc;border:1px solid #ffffff66;border-radius:12px;box-shadow:0 8px 30px #10252733}.item>span{font-family:var(--display);font-size:44px;line-height:1.1;color:var(--mint)}.item b{font-size:9px;letter-spacing:1px;margin:6px 0}.item small{font-size:8px;opacity:.6}.item.ready{border:2px solid var(--mint);background:#18351ee8}.race-controls{position:absolute;bottom:20px;left:32px;right:32px;display:flex;align-items:center;justify-content:space-between;font-size:8px;letter-spacing:.7px;gap:10px}.race-controls>div{display:flex;gap:20px}.race-controls .text-button{font-size:9px}kbd{font-family:inherit;border:1px solid #ffffff66;border-radius:3px;padding:3px 5px;margin:0 4px}.countdown{position:fixed;z-index:18;top:43%;left:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;text-shadow:0 5px 0 #123c3955}.countdown small{font-size:10px;letter-spacing:2px;display:block}.countdown b{display:block;font-family:var(--display);font-size:160px;line-height:1.1;color:var(--mint);font-style:italic}.race-message{position:absolute;top:30%;left:50%;transform:translateX(-50%);padding:10px 20px;background:#102527ba;border-radius:6px;font-weight:900;letter-spacing:1px;font-size:15px;text-align:center}.result h2{font-size:58px;color:var(--mint);font-style:italic}.reward{border:1px solid #c8ff6344;background:#c8ff6311;padding:10px 14px;border-radius:5px;color:var(--mint);font-size:12px;font-weight:700;margin:15px 0}.result-row{display:grid;grid-template-columns:30px 1fr auto;gap:12px;padding:11px 0;border-bottom:1px solid #ffffff18;align-items:center;font-size:12px}.result-row.me{color:var(--mint)}.result-row>strong{font-family:var(--display);font-size:23px}.result-row small{font-size:10px;font-variant-numeric:tabular-nums}dialog{background:#102527fa;color:var(--paper);border:1px solid #ffffff44;border-radius:12px;max-width:480px;width:calc(100% - 32px);max-height:85dvh;overflow:auto;padding:32px;box-shadow:0 20px 100px #0006}dialog::backdrop{background:#10252799;backdrop-filter:blur(8px)}.dialog-close{position:absolute;right:15px;top:10px;font-size:25px}.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);z-index:60;background:var(--paper);color:var(--ink);box-shadow:0 8px 40px #0004;padding:13px 20px;border-radius:7px;font-size:12px;font-weight:700;max-width:90%;text-align:center}.loading{position:fixed;inset:0;z-index:90;background:#122527;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px}.loading-logo{font-family:var(--display);font-size:110px;font-style:italic;color:var(--mint);line-height:1}.loading-logo>span{font-family:Arial;font-size:70px}.loading b{font-size:12px;letter-spacing:2px}.loading>span{font-size:11px;color:#afc1bb}.touch-controls{display:none;position:absolute;bottom:76px;left:14px;right:14px;justify-content:space-between;pointer-events:none}.touch-controls>div{display:flex;gap:7px}.touch-controls button{pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;height:58px;min-width:55px;border:1px solid #ffffff66;background:#122527bb;border-radius:50%;font-size:11px;font-weight:bold}.touch-controls button.pressed{background:var(--mint);color:var(--ink)}#boost-vignette{position:fixed;inset:0;pointer-events:none;box-shadow:inset 0 0 90px 30px #c8ff6355;opacity:0;transition:opacity .15s;z-index:2}body.racing .topbar{background:linear-gradient(#10252755,transparent)}body.racing .brand small{display:none}
@media(min-width:1500px) and (min-height:900px){.menu{left:65px;top:106px;width:440px}h1{font-size:62px}h1>span{font-size:122px}.cast button{height:65px}.intro{margin-bottom:25px}.play-actions{margin-top:22px}.topbar{padding:25px 42px}}
@media(max-height:830px) and (min-width:850px){.menu{top:70px;bottom:15px;width:370px;left:32px}.eyebrow{font-size:8px}h1{font-size:44px;margin-top:11px}h1>span{font-size:86px}.speed-mark{font-size:70px}.intro{font-size:11px;margin:9px 0 12px}.section-label{margin:11px 0 7px}.cast button{height:45px}.driver-info{margin:8px 0 10px}.track-choice{padding:6px}.track-choice svg{height:20px;margin-bottom:4px}.play-actions{margin-top:13px}.menu-foot{margin-top:12px}.primary,.secondary{min-height:40px;padding:12px}.postcard{top:20%;right:5%}}
@media(max-width:950px){.postcard{right:4%;top:17%}.postcard p{font-size:37px}.brand small{display:none}.topbar{padding:20px}.menu{left:25px;width:360px}.preview-label{right:8%}}
@media(max-width:700px){body{overflow:auto}.topbar{padding:15px 16px}.brand{font-size:10px;gap:7px}.brand-mark{font-size:28px}.top-tools{gap:5px}.top-tools #connection{display:none}.top-tools button{height:29px;min-width:29px}.shade{background:linear-gradient(180deg,#10252715,#102527e8 34%,#102527fa 100%)}.menu{position:relative;top:auto;left:auto;bottom:auto;width:auto;margin:200px 19px 20px;padding:20px 0 8px;overflow:visible}.menu>.eyebrow{font-size:8px}h1{font-size:43px;margin:12px 0}h1>span{font-size:82px}.speed-mark{font-size:68px}.intro{font-size:12px;margin:12px 0 16px}.cast button{height:51px}.postcard{top:85px;right:20px}.postcard .eyebrow{font-size:7px}.postcard p{font-size:30px;margin:10px 0;letter-spacing:-1px}.postcard>div{display:none}.preview-label{display:flex}.menu-foot{font-size:6px}.panel{padding:25px;max-height:calc(100dvh - 80px)}h2{font-size:42px}.race-top{top:76px;left:16px;gap:13px}.position{min-width:75px}.position strong{font-size:68px}.position>span{font-size:24px}.lap{padding-left:13px}.lap b{font-size:16px}.lap small{font-size:7px}.lap>span{font-size:11px}.race-roster{top:196px;left:16px;min-width:130px}.race-roster .standing{font-size:9px;padding:5px 7px}#minimap{top:80px;right:14px;width:118px;height:104px}.race-bottom{bottom:146px;left:18px;right:18px}.speed strong{font-size:48px}.drift-meter{width:126px}.item{width:118px;height:98px}.item>span{font-size:33px}.item b{font-size:7px}.race-controls{left:16px;right:16px;bottom:22px;justify-content:flex-end}.race-controls>span{display:none}.race-controls>div{gap:18px}.touch-controls{display:flex}.countdown b{font-size:125px}.race-message{font-size:11px;top:35%;width:70%}body.racing{overflow:hidden}.result h2{font-size:48px}.toast{bottom:15px}.menu .minor-actions{font-size:7px}.topbar{z-index:22}}
@media(pointer:coarse){.touch-controls{display:flex}.race-bottom{bottom:152px}.race-controls>span{display:none}}
@media(max-height:550px) and (orientation:landscape){.menu{width:360px;margin:70px 22px 20px;top:auto;position:relative}.postcard{top:100px}.race-top{top:65px}.race-roster{top:170px}.race-roster .standing{padding:3px 7px}.race-bottom{bottom:70px;left:190px;right:200px}.touch-controls{bottom:55px}.speed strong{font-size:44px}.item{width:110px;height:88px}.topbar{padding:12px 20px}.panel{max-height:calc(100dvh - 65px)}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

.lobby-track-label{display:flex;align-items:center;justify-content:space-between;font-size:8px;letter-spacing:1px;margin:12px 0}.lobby-track-label select{padding:7px 9px;background:#183934;border:1px solid #ffffff33;border-radius:4px;font-size:11px;color:var(--paper)}.preview-label{right:11%;bottom:34px}.race-controls>div{gap:13px}@media(max-width:700px){.race-controls>div{gap:10px}.race-controls .text-button{font-size:8px}}

/* Driver showcase: keep the whole kart in view and give its face room to read. */
.preview-label{z-index:4;right:5%;bottom:27px;padding-left:15px;gap:5px;pointer-events:none}
.preview-label span{font-size:9px;letter-spacing:2px}
.preview-label b{font-family:var(--display);font-size:25px;letter-spacing:.8px}
@media(min-width:701px){.postcard{top:13%;right:4%}.postcard p{font-size:clamp(32px,3.3vw,50px);margin:12px 0 16px}}
@media(max-width:950px) and (min-width:701px){.preview-label b{font-size:20px}.postcard p{font-size:34px}}
@media(max-width:700px){
 .menu{margin:380px 0 0;padding:20px 19px 26px;background:#102527ef}
 .menu::before{content:"";position:absolute;top:-45px;left:0;right:0;height:45px;background:linear-gradient(transparent,#102527ef);pointer-events:none}
 .shade{background:linear-gradient(180deg,#10252705 0%,#10252745 230px,#102527ec 360px,#102527fa 650px)}
 .postcard{top:69px;right:20px}
 .postcard p{display:none}
 .postcard .eyebrow{font-size:8px;letter-spacing:1.4px}
 .preview-label{left:22px;right:auto;top:328px;bottom:auto;gap:3px;padding-left:10px}
 .preview-label span{font-size:7px}
 .preview-label b{font-size:23px}
}

/* Competitive driving: compact decisions and telemetry, away from the racing line. */
.difficulty-select{display:flex;flex-direction:column;gap:5px;margin:13px 0 8px;font-size:8px;font-weight:800;letter-spacing:1px}.difficulty-select select,.lobby-track-label select{max-width:100%;height:33px;border:1px solid #ffffff38;border-radius:5px;background:#102527;padding:6px 8px;color:var(--paper);font-size:10px}.difficulty-select small{font-size:8px;font-weight:400;letter-spacing:0;color:var(--muted)}
.race-telemetry{position:absolute;top:94px;left:50%;transform:translateX(-50%);display:grid;grid-template-columns:1fr 1fr;gap:10px 19px;padding:12px 16px;border:1px solid #ffffff30;border-radius:8px;background:#102527a8;min-width:245px}.race-telemetry>div{display:flex;flex-direction:column;gap:3px}.race-telemetry small{font-size:7px;letter-spacing:1px;color:#c8d8cc}.race-telemetry b{font-size:12px;font-variant-numeric:tabular-nums}.race-telemetry .ahead{color:#c8ff63}
.focus-boost{display:flex;flex-direction:column;gap:4px;margin-top:10px;min-width:174px;padding:9px 11px;border:1px solid #c8ff6366;border-radius:6px;background:linear-gradient(90deg,#78b74a55 var(--charge,0%),#102527c9 0);text-align:left;pointer-events:auto}.focus-boost b{font-size:9px;letter-spacing:.7px}.focus-boost small{font-size:8px}.focus-boost:disabled{opacity:.72;cursor:default}.focus-boost.ready{color:#102527;background:#c8ff63;box-shadow:0 0 18px #c8ff6344}.speed>small{display:block;max-width:220px}.drift-meter{background:linear-gradient(90deg,#ffffff19 22.9%,#ffffffaa 23%,#ffffffaa 24%,#ffffff19 24.1%,#ffffff19 47.4%,#ffffffaa 47.5%,#ffffffaa 48.5%,#ffffff19 48.6%,#ffffff19 73.7%,#ffffffaa 73.8%,#ffffffaa 74.8%,#ffffff19 74.9%)}
.result-skill{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:13px 0}.result-skill>div{display:flex;flex-direction:column;gap:2px;background:#ffffff08;padding:8px;border-radius:4px}.result-skill b{font-size:17px;color:var(--mint)}.result-skill span{font-size:7px;letter-spacing:.7px;color:var(--muted)}
@media(max-width:700px){.race-telemetry{top:205px;left:auto;right:12px;transform:none;min-width:0;width:126px;gap:8px 5px;padding:9px;grid-template-columns:1fr}.race-telemetry small{font-size:6px}.race-telemetry b{font-size:9px}.focus-boost{min-width:140px;padding:8px;margin-top:6px}.focus-boost b{font-size:8px}.focus-boost small{font-size:7px}.speed>small{max-width:150px;font-size:6px}.race-message{max-width:86%;font-size:11px;top:27%}.race-controls>span{display:none}}