:root{--ink:#111b25;--paper:#eee9dd;--accent:#dab078;--muted:#acb8bd;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--paper);background:var(--ink);font-synthesis:none}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
button,input,select{font:inherit}
button{color:inherit;cursor:pointer;touch-action:manipulation;transition:background .16s,transform .16s}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
button:disabled{opacity:.5;cursor:default}
button:hover{filter:brightness(1.09)}
[hidden]{display:none!important}
#scene{position:fixed;inset:0;touch-action:none}
#scene canvas{width:100%;height:100%;display:block}
.screen{position:fixed;inset:0;z-index:10}
.menu-shade{position:absolute;inset:0;background:linear-gradient(90deg,#121c29ed,#121c29a0 40%,#101c2920 85%),linear-gradient(0deg,#0c142ce0,transparent 60%)}
.menu-inner{position:relative;width:min(1260px,100%);height:100%;margin:auto;padding:38px 56px;display:flex;flex-direction:column}
.brand{display:flex;align-items:center;gap:14px}
.brand-mark{display:grid;place-items:center;width:45px;height:48px;border:1px solid #eee9dd78;font-size:31px;font-weight:850;transform:skew(-7deg);color:var(--accent)}
.brand h1{font-size:25px;letter-spacing:3px;margin:0;font-weight:850}
.brand em{font-style:normal;color:var(--accent);font-weight:350}
.brand p{font-size:9px;letter-spacing:2.6px;margin:5px 0 0;color:#c5c6c1}
.icon{margin-left:auto;border:1px solid #e2ddd340;background:#111c294d;width:44px;height:44px;font-size:22px}
.intro{margin:auto 0 34px}
.eyebrow{font-size:10px;letter-spacing:2px;color:var(--accent);font-weight:650}
.intro h2{font-size:clamp(56px,7.5vw,96px);line-height:.95;letter-spacing:-4px;font-weight:750;margin:25px 0 22px}
.intro p{font-size:15px;line-height:1.8;color:#d1d4cf}
.features{display:flex;gap:9px;margin-top:20px}
.features span{padding:6px 10px;font-size:10px;letter-spacing:.3px;border:1px solid #eee9dd38;background:#0b182844}
.play-modes{display:flex;gap:12px;max-width:650px;margin-bottom:32px}
.mode{border:1px solid #c9c5bb40;border-left:3px solid var(--accent);border-radius:3px;background:#142334bd;text-align:left;padding:18px 20px;flex:1;display:grid;gap:10px;backdrop-filter:blur(12px)}
.mode-number{font-size:10px;letter-spacing:1.5px;color:var(--accent)}
.mode strong{font-size:20px;letter-spacing:-.5px;display:flex;justify-content:space-between;gap:25px}
.mode strong span{font-weight:350}
.mode small{font-size:11px;color:#abbcc2}
.menu-footer{display:flex;justify-content:space-between;border-top:1px solid #eee9dd26;padding-top:16px;font-size:10px;letter-spacing:.4px;color:#aab9bd}
.no-webgl .menu-shade{background:linear-gradient(140deg,#384958,#141f2a 60%)}
.panel-screen{display:flex;align-items:center;justify-content:center;background:#0b1725b8;backdrop-filter:blur(9px);padding:24px;overflow:auto}
.panel{background:#162534ed;border:1px solid #a9b8b72a;border-top:2px solid var(--accent);padding:30px;max-height:calc(100dvh - 48px);overflow:auto;box-shadow:0 20px 70px #0005;border-radius:4px;width:100%}
.compact{max-width:435px;display:flex;flex-direction:column;gap:13px}
.wide{max-width:1000px}
.panel header{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.panel h2{font-size:29px;letter-spacing:-.9px;font-weight:650;margin:3px 0 8px}
.panel p{font-size:13px;color:#b9c6c8;line-height:1.75;margin:2px 0 10px}
.quiet{border:0;background:transparent;font-size:12px;color:#c6d2d1;text-align:left;padding:9px 0}
.primary,.secondary{border:0;border-radius:3px;padding:14px 16px;font-size:13px;font-weight:600;min-height:47px}
.primary{background:var(--accent);color:#192432}
.secondary{background:#293c4b;border:1px solid #d5dfdc20}
.panel label{font-size:12px;color:#c6d1ce}
.panel input,.panel select{background:#101d29;border:1px solid #8ea6ae45;border-radius:3px;color:var(--paper);padding:12px;width:100%;min-width:0;font-size:16px}
.pill{margin-left:auto;font-size:11px;color:#c5d1cf;background:#293e4d;padding:7px 10px}
.worlds{display:flex;gap:8px;margin:20px 0}
.world{flex:1;background:#263949;border:1px solid #bfcfc522;padding:13px;font-size:13px;border-radius:3px}
.world[aria-pressed=true]{background:var(--accent);color:var(--ink);font-weight:650}
.levels{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:18px}
.level{text-align:left;padding:19px;border:1px solid #bccdc124;background:#1d3040;display:grid;gap:11px;min-height:135px;border-radius:3px}
.level>span{font-size:9px;letter-spacing:1.5px;color:var(--accent)}
.level strong{font-size:19px;font-weight:600;letter-spacing:-.3px}
.level small{font-size:12px;line-height:1.6;color:#b2c2c5}
.hint{font-size:11px!important;color:#a7b6bc!important}
.divider{display:flex;align-items:center;gap:12px;font-size:11px;color:#8babb4;margin:5px 0}
.divider:before,.divider:after{content:'';height:1px;background:#c3d1c624;flex:1}
.join-row{display:flex;gap:8px}
.join-row input{letter-spacing:3px;text-transform:uppercase}
.error{color:#ffb49d!important}
.color-row{display:flex;gap:12px}
.color-row button{width:45px;height:45px;background:var(--color);border:2px solid #fff1;border-radius:4px}
.color-row button[aria-pressed=true]{outline:2px solid var(--accent);outline-offset:3px}
.switch{display:flex;align-items:center;gap:12px}
.switch input{width:19px;height:19px}
.win-panel{text-align:center}
.win-stars{font-size:33px;color:var(--accent);letter-spacing:5px}
.loading-inner{text-align:center}
.loading-inner .brand-mark{margin:auto}
.loading-inner p{font-size:13px;color:#bac8cb}
#toast{position:fixed;z-index:30;bottom:22px;left:50%;transform:translateX(-50%);max-width:calc(100% - 30px);background:#142435f5;border:1px solid #ddc4975e;border-radius:4px;box-shadow:0 8px 25px #0004;font-size:12px;text-align:center;padding:13px 18px}
@media(max-width:650px){.menu-inner{padding:27px 25px}
.brand h1{font-size:23px}
.brand p{font-size:8px}
.intro{margin:auto 0 30px}
.intro h2{font-size:64px;letter-spacing:-3px;margin:25px 0 21px}
.intro p{font-size:14px}
.eyebrow{font-size:9px;letter-spacing:1.4px}
.menu-shade{background:linear-gradient(90deg,#101c28d0,#101c2840),linear-gradient(0deg,#101c29ef,transparent 60%)}
.play-modes{gap:10px;margin-bottom:26px}
.mode{padding:17px 13px;gap:11px}
.mode strong{font-size:17px;gap:8px}
.mode small{font-size:10px;line-height:1.6}
.menu-footer span:last-child{display:none}
.panel-screen{padding:15px}
.panel{padding:22px;max-height:calc(100dvh - 30px)}
.panel h2{font-size:26px}
.panel header{gap:12px}
.levels{grid-template-columns:1fr;gap:9px}
.level{min-height:120px;padding:16px}
.worlds{gap:6px}
.world{padding:12px 8px}
.pill{font-size:10px}}
@media(max-height:510px){.menu-inner{padding:20px 34px}
.brand h1{font-size:22px}
.brand p{display:none}
.brand-mark{width:35px;height:36px;font-size:25px}
.intro{margin:20px 0}
.intro h2{font-size:52px;margin:14px 0 12px}
.intro p{font-size:12px;line-height:1.6}
.features{display:none}
.play-modes{position:absolute;right:34px;bottom:65px;width:43%;flex-direction:column;margin:0}
.mode{padding:13px 16px;gap:7px}
.mode strong{font-size:18px}
.menu-footer{margin-top:auto}
.panel h2{font-size:24px}
.levels{grid-template-columns:repeat(2,1fr)}
.panel header{gap:12px}
.worlds{margin:12px 0}
.level{min-height:120px}
.compact{gap:10px}}
@media(max-width:370px){.mode strong{font-size:15px}
.intro h2{font-size:58px}}
.atlas{max-width:760px;padding:20px}
.atlas header{margin-bottom:14px}
.atlas h2{font-size:21px}
.atlas canvas{display:block;width:min(100%,65dvh);aspect-ratio:1;margin:auto;border:1px solid #abc1b438;border-radius:3px}
.atlas .hint{text-align:center;margin-top:12px}
#asset-status{font-size:9px;color:#c5d2c5}
.fleet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0 0}
.fleet-card{background:linear-gradient(145deg,#263b49,#152631);border:1px solid #bdc8c632;border-radius:5px;display:flex;flex-direction:column;text-align:left;gap:9px;min-height:165px;padding:18px}
.fleet-card svg{width:100%;height:65px;overflow:visible}
.fleet-card strong{font-size:17px;font-weight:600}
.fleet-card small{font-size:10px;line-height:1.6;color:#b2c2c5}
.fleet-card[aria-pressed=true]{border-color:var(--accent);box-shadow:inset 0 0 0 1px #dab07866}
.worlds{overflow:auto}
.world{min-width:70px}
@media(max-width:650px){.fleet-grid{grid-template-columns:repeat(2,1fr);gap:9px}
.fleet-card{min-height:153px;padding:13px}
.fleet-card strong{font-size:14px}
.fleet-card small{font-size:9px}
.fleet-card svg{height:55px}
.world{font-size:11px}
.intro h2{font-size:59px;line-height:1.02}
.features{gap:8px;flex-wrap:wrap}}
@media(max-height:510px){.fleet-grid{grid-template-columns:repeat(3,1fr)}
.fleet-card{min-height:148px}
.intro h2{font-size:49px}
.worlds{margin:12px 0}}
@media(max-width:899px) and (min-height:511px){.menu-footer{gap:10px;align-items:end}
.menu-footer span:last-child{display:block;max-width:50%;text-align:right;font-size:8px;line-height:1.6}
.menu-footer #asset-status{font-size:8px}}

.shop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:20px 0}.weapon-card{display:flex;flex-direction:column;gap:10px;padding:18px;border:1px solid #bccdc132;background:linear-gradient(145deg,#253c47,#13232e);border-radius:5px}.weapon-head{display:flex;gap:12px;align-items:center}.weapon-head>span{width:43px;height:40px;display:grid;place-items:center;border:1px solid #e1ba7988;color:var(--accent);font-weight:800}.weapon-card h3{font-size:17px;margin:0}.weapon-card p{font-size:11px;line-height:1.8}.weapon-card small{color:#a9bac1;font-size:11px;line-height:1.7}.upgrade-button{padding:12px 10px;border:1px solid #b8cdc02b;background:#263c49;font-size:11px;text-align:left;min-height:44px}.home-address{color:var(--accent);font-size:20px;border-left:2px solid var(--accent);padding:8px 14px;margin:4px 0 8px}button:disabled{opacity:.45;cursor:default}#crosshair{position:fixed;z-index:4;left:50%;top:50%;width:20px;height:20px;transform:translate(-50%,-50%);pointer-events:none}#crosshair:before,#crosshair:after{content:'';position:absolute;background:#fffef0;box-shadow:0 0 3px #122534;border-radius:2px}#crosshair:before{left:9px;top:1px;width:2px;height:18px}#crosshair:after{left:1px;top:9px;width:18px;height:2px}#crosshair.hit:before,#crosshair.hit:after{background:#f3c777;transform:rotate(45deg)}@media(max-width:850px){.shop-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:420px){.weapon-card{padding:12px}.weapon-card h3{font-size:15px}.weapon-head{gap:8px}}

/* Loading is rendered before the 3D module starts compiling. */
.boot-screen{background:radial-gradient(ellipse at 70% 20%,#325966,#132630 60%,#0b171f);z-index:80;overflow:hidden;display:flex;align-items:center;justify-content:center}.boot-card{position:relative;max-width:590px;width:calc(100% - 48px);padding:36px;border:1px solid #84aca133;background:#11232de6;border-radius:18px;box-shadow:0 24px 80px #0005}.boot-card h2{font-size:clamp(36px,7vw,66px);line-height:1.05;margin:24px 0;color:#e7e5d9}.boot-card progress{display:block;width:100%;height:8px;accent-color:#a8cab9;margin:20px 0 8px;border:0;border-radius:8px;overflow:hidden}.boot-card progress::-webkit-progress-bar{background:#2c414b}.boot-card progress::-webkit-progress-value{background:#a8cab9;transition:width .3s}.boot-card #boot-value{font-variant-numeric:tabular-nums;color:#a8cab9}.boot-skyline{position:absolute;bottom:0;width:100%;height:34%;opacity:.25;background:repeating-linear-gradient(90deg,#789398 0 24px,transparent 24px 35px);clip-path:polygon(0 50%,5% 50%,5% 14%,12% 14%,12% 62%,18% 62%,18% 35%,25% 35%,25% 0,32% 0,32% 40%,40% 40%,40% 70%,48% 70%,48% 24%,55% 24%,55% 52%,63% 52%,63% 15%,70% 15%,70% 56%,79% 56%,79% 31%,88% 31%,88% 64%,100% 64%,100% 100%,0 100%)}
.menu-extras{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0}.menu-extras button{font-size:12px;padding:9px 14px;min-height:44px}.career-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:20px 0}.career-stats article{background:#253b46;border:1px solid #54747c;border-radius:9px;padding:16px}.career-stats strong{font-size:28px;display:block}.career-stats small{font-size:11px;color:#acc5c5}.input-guide{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.input-guide p{font-size:13px;line-height:1.7}button:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible{outline:3px solid #f3d8a0;outline-offset:4px;box-shadow:0 0 0 8px #dba55a22}#controls[data-tv-focus="true"] button:focus{outline:3px solid #ffe3ad;outline-offset:4px;background:#4b666d}
@media(max-width:640px){.boot-card{padding:24px}.career-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.input-guide{grid-template-columns:1fr;gap:0}.menu-extras{margin:4px 0;gap:4px}}

.radio-panel{display:flex;flex-direction:column;gap:8px;margin:16px 0;padding:14px 16px;border:1px solid #d9c29533;border-radius:16px;background:#10222ccc;font-size:13px}.radio-panel>div{display:flex;gap:8px;flex-wrap:wrap}.radio-panel button{min-height:44px}.music-credits{margin:14px 0;font-size:12px;line-height:1.65}.music-credits a{color:#b0e1d4}.music-credits summary{cursor:pointer;min-height:44px;padding:12px 0}.friend-homes{display:flex;flex-direction:column;gap:8px;margin:8px 0}.friend-homes:empty{display:none}.radio-track{position:absolute;left:8px;right:8px;bottom:0;border:0;background:transparent;color:#b9cdbf;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:18px;text-align:left;cursor:pointer}.hud[data-short="true"] .radio-track{display:none}.boot-card #boot-music{margin-top:16px;min-height:44px}.vehicle-tools button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.menu{overflow-y:auto}.menu-inner{height:auto;min-height:100%}.menu-inner>*{flex-shrink:0}#menu-radio{max-width:650px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;row-gap:4px;margin:0 0 14px;padding:10px 14px}#menu-radio>.eyebrow,#music-menu-title{grid-column:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#menu-radio>div{grid-column:2;grid-row:1/3;flex-wrap:nowrap}#menu-radio button{font-size:11px;padding:8px 4px}
@media(max-height:510px){.menu-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-content:start;gap:12px}.brand,.menu-extras,.menu-footer{grid-column:1/-1}.intro{grid-column:1;grid-row:2/4;margin:0}.play-modes{position:static;grid-column:2;width:100%;margin:0}#menu-radio{grid-column:2;display:flex;margin:0}.menu-extras{margin:0}}

.atlas{max-width:1160px!important}.atlas-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:20px}.atlas-map{min-width:0}.atlas #worldmap{width:100%;height:auto;display:block;touch-action:none;cursor:crosshair;border:1px solid #496168;border-radius:12px}.map-toolbar{display:flex;gap:6px;flex-wrap:wrap}.map-toolbar button{min-width:44px;min-height:44px;padding:8px 12px}.atlas-places label{display:block;margin:6px 0}.atlas-places input,.atlas-places select{width:100%;min-height:44px}.map-selected{background:#203641;border:1px solid #4c6268;padding:14px;border-radius:12px;margin:14px 0;display:grid;gap:7px}.map-selected p{font-size:13px;margin:0}.map-places{max-height:380px;overflow:auto;display:grid;gap:6px}.map-place{min-height:52px;text-align:left;display:grid;gap:4px;padding:10px 12px}.map-place small{font-size:11px;opacity:.75}.map-place[aria-pressed=true],#map-pin[aria-pressed=true]{background:#315c66;outline:1px solid #90ded6}#waypoint{white-space:normal!important} @media(max-width:740px){.atlas-layout{grid-template-columns:1fr}.atlas-places{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px}.atlas-places label{grid-column:1/-1}.map-selected,.map-places{grid-column:1/-1}.map-places{max-height:210px}.atlas .hint{font-size:12px}.atlas header h2{font-size:18px}}

.owner-login{font-size:12px;color:#d4c5a7;display:inline-block;padding:10px 0}.commerce-product{display:flex;align-items:center;gap:8px;border-bottom:1px solid #40545c;padding:12px 0;flex-wrap:wrap}.commerce-product span{flex:1;min-width:160px}.commerce-product button{width:auto;min-width:44px;margin:0}.commerce-food{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}.commerce-food button{width:auto;font-size:13px}.commerce-receipt{font-family:monospace;padding:15px;color:#1e343b;background:#e6e3d3}#waypoint{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:9px;line-height:9px}

.lobby-list{display:grid;gap:8px;margin:12px 0;max-height:240px;overflow:auto}.lobby-card{display:grid;grid-template-columns:1fr auto;gap:6px;text-align:left;padding:12px;min-height:62px}.lobby-card small{grid-column:1/-1;font-size:12px;color:#abbfc5}.shop-card input[type=color]{width:100%;height:44px;padding:4px;margin-bottom:8px;cursor:pointer}
.profile-vehicle-color{margin:22px 0 8px}.vehicle-color-picker{display:grid;gap:8px;min-width:0}.vehicle-color-selected{font-size:13px;margin:0}.vehicle-color-picker input[type=color]{width:100%;height:48px;min-height:48px;padding:4px;margin:0;cursor:pointer;border:1px solid #91a0a755;background:transparent}.vehicle-color-options summary{padding:10px 0;cursor:pointer;font-size:13px;min-height:44px}.vehicle-color-palette{display:grid;grid-template-columns:repeat(auto-fit,minmax(44px,1fr));gap:8px;padding:5px;max-height:260px;overflow:auto;overscroll-behavior:contain}.vehicle-color-palette .vehicle-color-swatch{height:44px;min-height:44px;padding:0;margin:0;border:2px solid #81929688;border-radius:8px;background:var(--paint);box-shadow:inset 0 0 0 1px #ffffff30}.vehicle-color-swatch[aria-pressed=true]{outline:3px solid var(--accent);outline-offset:2px}.vehicle-color-swatch:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.vehicle-color-picker small{font-size:12px;line-height:1.5;color:var(--muted)}.vehicle-factory-color{padding:12px;border:1px solid #81929666;border-radius:8px;font-size:13px;line-height:1.5;color:var(--muted)}
.commerce-cart-summary{padding:12px 14px;border:1px solid #55756e;border-radius:10px;background:#1d3739;font-size:14px;line-height:1.6}.commerce-order-status{padding:12px 14px;background:#254641;border-left:3px solid #bcda98;border-radius:6px;line-height:1.5}.commerce-product button{min-height:44px}.commerce-product span{line-height:1.5}

.shop-grid[data-dealer=true]{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));align-items:start}.shop-grid[data-dealer=true] .shop-card{min-width:0;padding:14px;border:1px solid #81929655;border-radius:10px}.shop-grid[data-dealer=true] .shop-card h3{font-size:17px;margin:0 0 12px}
