:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px); }
* { box-sizing: border-box; } body { margin:0;background:#14282f;color:#f8f3e8;overscroll-behavior:none;overflow:hidden; } button,a { -webkit-tap-highlight-color:transparent; } button { font:inherit;cursor:pointer;touch-action:manipulation; } button,a { min-width:44px;min-height:44px; } a { color:inherit;text-decoration:none; } button { color:inherit; } button:focus-visible,a:focus-visible,canvas:focus-visible { outline:3px solid #ffd598;outline-offset:3px; } button:disabled { opacity:.7;cursor:wait; } [hidden] { display:none!important; }
#experience { width:100%;height:100dvh;min-height:320px;position:relative;overflow:hidden;isolation:isolate; } #world-canvas { display:block;width:100%;height:100%;outline-offset:-4px;touch-action:none; } .vignette { position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#122e4b20,transparent 30%,transparent 65%,#102a3c50); }
.world-header { position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:calc(22px + var(--safe-top)) max(28px,var(--safe-right)) 12px max(28px,var(--safe-left));z-index:5;gap:14px; }
.world-brand { display:flex;align-items:center;gap:12px;text-shadow:0 2px 12px #1238; }.world-brand>span:first-child { display:grid;place-items:center;width:44px;height:44px;border:1px solid #ffffff70;border-radius:50%;font:italic 22px Georgia,serif; }.world-brand>span:last-child { font-size:12px;letter-spacing:.2em;font-weight:650; }.world-brand small { display:block;font-size:8px;letter-spacing:.13em;font-weight:500;margin-top:4px;opacity:.8; }
.top-actions { display:flex;gap:8px; }.top-actions button,.drive-tools button { background:#17323a99;backdrop-filter:blur(16px);border:1px solid #ffffff30;border-radius:9px;padding:10px 13px;font-size:11px; }
.welcome { position:absolute;top:50%;left:max(7vw,24px);width:min(510px,calc(100% - 48px));transform:translateY(-45%);padding:28px 34px 26px;border-radius:22px;background:linear-gradient(120deg,#17333adb,#14313aac);backdrop-filter:blur(14px);border:1px solid #ffffff25;box-shadow:0 24px 80px #0a1d3220; }
.eyebrow { margin:0;font-size:9px;font-weight:650;letter-spacing:.18em;color:#d6e6dd; }.welcome h1 { margin:18px 0 18px;font:500 clamp(42px,5.5vw,76px)/.99 Georgia,serif;letter-spacing:-.065em; }.welcome h1 em { font-weight:400;color:#f5d1a2; }.welcome-copy { margin:0;font-size:12px;line-height:1.8;color:#deebe9; }
.garage-choice { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:25px 0 14px; }.garage-choice button { padding:12px;text-align:left;display:flex;gap:10px;align-items:start;border:1px solid #ffffff35;background:#ffffff07;border-radius:10px; }.garage-choice button[aria-pressed=true] { background:#f2d3a6;color:#233c3e;border-color:#f2d3a6; }.vehicle-number { font:italic 22px Georgia,serif;opacity:.7; }.garage-choice button>span:last-child { font-size:12px;font-weight:700; }.garage-choice small { display:block;font-size:9px;line-height:1.5;font-weight:400;margin-top:5px; }
.primary-action { display:block;width:100%;min-height:53px;background:#f2d3a6;color:#203b3f;border:1px solid #f2d3a6;border-radius:10px;font-size:14px;font-weight:700;padding:14px 18px;text-align:left; }.loading-note { font-size:10px;color:#c7dddb;margin:12px 0; }.quick-play { display:inline-flex;align-items:center;font-size:10px;color:#c7dddb;border-bottom:1px solid #ffffff20; }
.journey { position:absolute;top:calc(112px + var(--safe-top));left:max(30px,var(--safe-left));pointer-events:none;text-shadow:0 1px 12px #13262bb3; }.journey p { font:italic 26px Georgia,serif;letter-spacing:-.03em;margin:9px 0 12px; }.journey-counts { display:flex;gap:18px;font-size:10px;color:#f0f4e9; }.mini-map-button { position:absolute;right:max(28px,var(--safe-right));bottom:calc(90px + var(--safe-bottom));width:146px;padding:8px;border:1px solid #ffffff40;border-radius:17px;background:#19353ac9;backdrop-filter:blur(14px); }.mini-map-button canvas { display:block;width:128px;height:128px; }.mini-map-button>span { font:8px ui-monospace,monospace;letter-spacing:.08em; }
.speedometer { position:absolute;bottom:calc(88px + var(--safe-bottom));left:max(30px,var(--safe-left));width:150px;text-shadow:0 2px 10px #182c3dcc; }.speedometer>div:first-child { display:flex;align-items:baseline;gap:10px; }.speedometer strong { font:500 62px/1 ui-sans-serif,system-ui;letter-spacing:-.07em; }.speedometer>div>span { font:9px ui-monospace,monospace; }.nitro-track { width:100%;height:3px;background:#ffffff40;margin-top:12px; }.nitro-track>span { display:block;height:100%;width:100%;background:#a1f0e2;transition:width .15s; }.nitro-label { display:flex;justify-content:space-between;font:8px ui-monospace,monospace;margin-top:7px;letter-spacing:.1em; }.desktop-help { position:absolute;bottom:calc(30px + var(--safe-bottom));left:max(30px,var(--safe-left));display:flex;gap:16px;font-size:9px;color:#f3f0e4;text-shadow:0 1px 8px #112c; }
.drive-tools { position:absolute;bottom:calc(24px + var(--safe-bottom));right:max(28px,var(--safe-right));display:flex;gap:7px; }.drive-tools button { font-size:10px; }.race-hud { position:absolute;top:calc(110px + var(--safe-top));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:18px;background:#193239d9;border:1px solid #b8ebd166;border-radius:12px;padding:8px 10px 8px 20px; }.race-hud span { font-size:9px;letter-spacing:.08em; }.race-hud strong { font-size:24px;font-weight:500;min-width:80px;font-variant-numeric:tabular-nums; }.race-hud button { border:0;border-radius:6px;background:#ffffff12;font-size:20px; }
.world-toast { position:absolute;top:30%;left:50%;transform:translateX(-50%);max-width:80%;background:#153137db;border:1px solid #f7e0b67a;padding:15px 22px;border-radius:12px;text-align:center;backdrop-filter:blur(12px);font:italic 20px Georgia,serif;pointer-events:none; }
.world-dialog { width:min(580px,calc(100vw - 28px));max-height:calc(100dvh - 28px - var(--safe-top) - var(--safe-bottom));overflow:auto;padding:26px;border:1px solid #d2eee344;border-radius:18px;color:#f5f2e7;background:#163038f5;backdrop-filter:blur(20px);overscroll-behavior:contain; }.world-dialog::backdrop { background:#06151b77;backdrop-filter:blur(5px); }.dialog-heading { display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:24px; }.dialog-heading h2 { margin:10px 0 0;font:400 36px/1.06 Georgia,serif;letter-spacing:-.055em; }.dialog-heading>button { align-self:start;border:1px solid #ffffff35;background:#ffffff0a;border-radius:8px;font-size:25px; }.menu-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px; }.menu-grid>button { border:1px solid #ffffff30;border-radius:10px;padding:15px;background:#ffffff08;text-align:left;font-size:12px;min-height:60px; }.menu-grid>button.primary-action { grid-column:1/-1;background:#f2d3a6; }.menu-grid small { display:block;font-size:10px;margin-top:6px;color:#b5cec9;line-height:1.6; }.menu-note { font-size:11px;line-height:1.6;color:#bccfca;margin:20px 0 0; }.back-link { display:inline-flex;align-items:center;margin-top:14px;font-size:12px; }
.destination-list { display:grid;grid-template-columns:1fr 1fr;gap:10px; }.destination-list button { text-align:left;border:1px solid #ffffff28;border-radius:12px;padding:18px;background:#ffffff06; }.destination-list strong { display:block;font:22px Georgia,serif;color:var(--place-color); }.destination-list span { display:block;margin-top:9px;font-size:10px;line-height:1.6;color:#d0ddd7; }.destination-list small { display:block;font:8px ui-monospace,monospace;letter-spacing:.08em;margin-top:14px; }
.touch-controls { display:none; }.no-webgl { position:absolute;inset:25% 10%;padding:30px;border:1px solid #fff5;background:#193239;border-radius:20px;font-size:20px;z-index:10; }.no-webgl a { display:inline-flex;align-items:center;text-decoration:underline; }
@media (pointer:coarse),(max-width:800px) {
  .world-header { padding:calc(12px + var(--safe-top)) max(14px,var(--safe-right)) 8px max(14px,var(--safe-left)); }.world-brand { gap:8px; }.world-brand>span:first-child { width:38px;height:38px;font-size:20px; }.world-brand>span:last-child { font-size:10px;letter-spacing:.13em; }.world-brand small { font-size:6px; }.top-actions { gap:5px; }.top-actions button { font-size:10px;padding:8px; }.desktop-help { display:none; }.touch-controls { position:absolute;inset:0;display:block;pointer-events:none; }.steer-wrap { position:absolute;left:max(20px,var(--safe-left));bottom:calc(22px + var(--safe-bottom));text-align:center;pointer-events:auto; }.steer-wrap>span { font:8px ui-monospace,monospace;letter-spacing:.16em;color:#d2e3dd; }.steering-pad { position:relative;width:128px;height:128px;border:1px solid #ffffff5a;border-radius:50%;background:#1e3b4160;box-shadow:inset 0 0 30px #1235;touch-action:none;user-select:none;-webkit-user-select:none; }.steer-arrow { position:absolute;top:40px;font-size:26px;color:#e7f5e0a6; }.steer-arrow.left { left:9px; }.steer-arrow.right { right:9px; }#steering-knob { position:absolute;width:54px;height:54px;left:36px;top:36px;border-radius:50%;border:1px solid #ffffff8f;background:#d5e6e26e;box-shadow:0 5px 14px #1235;pointer-events:none; }
  .pedals { position:absolute;right:max(18px,var(--safe-right));bottom:calc(28px + var(--safe-bottom));pointer-events:auto; }.main-pedals,.aux-pedals { display:flex;justify-content:flex-end;gap:10px; }.aux-pedals { margin-bottom:10px; }.pedals button { width:61px;height:58px;border:1px solid #ffffff6b;border-radius:13px;background:#193a459c;color:#f0f5df;font-size:23px;line-height:1;touch-action:none;user-select:none;-webkit-user-select:none; }.pedals button span { display:block;font:8px ui-monospace,monospace;margin-top:6px;letter-spacing:.07em; }.main-pedals button { height:78px; }.pedals #touch-gas { background:#edce9be8;color:#203e3e;border-color:#ffe0ad;width:70px; }.pedals button.active { background:#9dedda;color:#1a3438;transform:scale(.97); }.drive-tools { right:14px;bottom:calc(194px + var(--safe-bottom));gap:5px; }.drive-tools button { padding:8px;font-size:9px; }.drive-tools #recover-car { font-size:0;min-width:44px; }.drive-tools #recover-car::after { content:'↺';font-size:20px; }.speedometer { left:max(22px,var(--safe-left));bottom:calc(187px + var(--safe-bottom));width:116px; }.speedometer strong { font-size:42px; }.speedometer>div>span { font-size:8px; }.mini-map-button { top:calc(94px + var(--safe-top));right:14px;bottom:auto;width:100px;border-radius:14px;padding:5px; }.mini-map-button canvas { width:88px;height:88px; }.mini-map-button>span { font-size:6px; }.journey { top:calc(98px + var(--safe-top));left:18px;max-width:calc(100% - 135px); }.journey p { font-size:20px;margin:8px 0 10px; }.journey .eyebrow { font-size:8px; }.journey-counts { font-size:8px;gap:10px; }.race-hud { top:calc(218px + var(--safe-top));gap:10px;padding:6px 6px 6px 12px; }.race-hud strong { font-size:20px; }.race-hud span { font-size:8px; }.world-toast { top:40%;max-width:90%;font-size:17px;width:max-content; }.world-dialog { padding:20px; }.dialog-heading h2 { font-size:32px; }
}
@media(max-width:600px) and (orientation:portrait) {
  .welcome { top:50%;left:16px;width:calc(100% - 32px);padding:22px;transform:translateY(-42%); }.welcome h1 { font-size:clamp(43px,12vw,65px);margin:14px 0; }.welcome-copy { font-size:11px; }.welcome .eyebrow { font-size:8px; }.garage-choice { margin:20px 0 12px; }.garage-choice button { padding:10px;gap:7px; }.garage-choice button>span:last-child { font-size:11px; }.garage-choice small { font-size:8px; }.vehicle-number { font-size:19px; }.welcome .primary-action { min-height:52px; }.quick-play { font-size:9px; }.destination-list { gap:8px; }.destination-list button { padding:14px; }.destination-list strong { font-size:19px; }
}
@media(max-height:600px) and (orientation:landscape) {
  .world-header { padding-top:calc(8px + var(--safe-top)); }.world-brand small { display:none; }.welcome { top:75px;left:5vw;bottom:15px;transform:none;width:390px;max-width:65vw;overflow:auto;padding:18px 22px; }.welcome h1 { font-size:40px;margin:9px 0; }.welcome h1 br { display:none; }.welcome-copy { font-size:10px; }.garage-choice { margin:12px 0 10px; }.garage-choice small { display:none; }.quick-play { min-height:30px; }.loading-note { margin:8px 0;font-size:9px; }.journey { top:74px;left:max(20px,var(--safe-left)); }.journey p { font-size:18px;margin:6px 0; }.mini-map-button { top:70px;width:83px; }.mini-map-button canvas { width:71px;height:71px; }.mini-map-button>span { display:none; }.steer-wrap { bottom:calc(10px + var(--safe-bottom)); }.steering-pad { width:108px;height:108px; }#steering-knob { top:26px;left:26px; }.steer-arrow { top:32px; }.pedals { bottom:calc(14px + var(--safe-bottom)); }.pedals button { height:48px;width:55px; }.main-pedals button { height:64px; }.aux-pedals { margin-bottom:7px; }.drive-tools { bottom:calc(16px + var(--safe-bottom));right:190px; }.speedometer { left:165px;bottom:calc(72px + var(--safe-bottom));width:100px; }.speedometer strong { font-size:34px; }.race-hud { top:70px; }.world-toast { top:46%; }.menu-grid { gap:8px; }.menu-grid>button { min-height:48px;padding:10px; }
}
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important;transition:none!important; } }