/* Layout: full-screen WebGL canvas, HUD overlays pinned to the corners, menu as a centered card over the live scene. */
:root{
  --bg:#0b1020; --fg:#f4efe6; --fg-dim:rgba(244,239,230,.62);
  --accent:#36e2d6; --warm:#ffb15c; --panel:rgba(10,14,28,.72); --line:rgba(244,239,230,.14);
  --font:'Rubik',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  color-scheme:dark;
}
html,body{height:100%;margin:0;overflow:hidden}
body{background:var(--bg);color:var(--fg);font-family:var(--font);font-size:15px;line-height:1.35;-webkit-user-select:none;user-select:none;touch-action:none}
canvas#c{position:fixed;inset:0;width:100%;height:100%;display:block}
.hud{position:fixed;inset:0;pointer-events:none;display:none}
.hud.on{display:block}
.hud .lap{position:absolute;top:max(14px,env(safe-area-inset-top,0px));inset-inline-start:max(16px,env(safe-area-inset-left,0px));
  background:var(--panel);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:10px;padding:8px 14px;display:flex;gap:18px}
.hud .lbl{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-dim)}
.hud .val,.res .val{font-size:22px;font-weight:900;font-variant-numeric:tabular-nums;line-height:1.1}
.hud .speed{position:absolute;top:max(14px,env(safe-area-inset-top,0px));inset-inline-end:max(16px,env(safe-area-inset-right,0px));text-align:end}
.hud .speed .val{font-size:44px;letter-spacing:-.02em;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.hud .boost{position:absolute;bottom:max(18px,env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);width:min(320px,60vw)}
.hud .boost .bar{height:10px;border-radius:6px;background:rgba(0,0,0,.45);border:1px solid var(--line);overflow:hidden;margin-top:4px}
.hud .boost .fill{height:100%;width:50%;background:linear-gradient(90deg,#1aa8a0,var(--accent));box-shadow:0 0 14px var(--accent);transition:width .08s linear}
.hud .boost .fill.hot{background:linear-gradient(90deg,#ff7a2a,var(--warm));box-shadow:0 0 18px var(--warm)}
.hud .msg{position:absolute;top:30%;left:0;right:0;text-align:center;font-size:clamp(48px,12vw,120px);font-weight:900;letter-spacing:-.03em;
  color:var(--fg);text-shadow:0 6px 30px rgba(0,0,0,.6);opacity:0;transform:scale(.6);transition:opacity .15s,transform .15s}
.hud .msg.show{opacity:1;transform:scale(1)}
.hud .msg.go{color:var(--accent)}
.hud .wrong{position:absolute;top:46%;left:0;right:0;text-align:center;font-weight:900;font-size:clamp(20px,4vw,34px);color:#ff5a4a;text-shadow:0 2px 12px rgba(0,0,0,.6);display:none}
.hud .wrong.show{display:block}
.hud .lapmsg{position:absolute;top:18%;left:0;right:0;text-align:center;font-weight:900;font-size:clamp(22px,4vw,36px);color:var(--warm);opacity:0;transition:opacity .3s}
.hud .lapmsg.show{opacity:1}
.touch{position:fixed;inset:0;display:none;pointer-events:none}
.touch.on{display:block}
.touch button{position:absolute;pointer-events:auto;width:84px;height:84px;border-radius:50%;border:2px solid var(--line);
  background:rgba(10,14,28,.55);color:var(--fg);font:900 26px var(--font);backdrop-filter:blur(4px)}
.touch button:active,.touch button.down{background:rgba(54,226,214,.35);border-color:var(--accent)}
.touch .l{left:max(18px,env(safe-area-inset-left,0px));bottom:calc(max(18px,env(safe-area-inset-bottom,0px)) + 60px)}
.touch .r{left:calc(max(18px,env(safe-area-inset-left,0px)) + 100px);bottom:calc(max(18px,env(safe-area-inset-bottom,0px)) + 60px)}
.touch .b{right:max(18px,env(safe-area-inset-right,0px));bottom:calc(max(18px,env(safe-area-inset-bottom,0px)) + 60px);font-size:16px;letter-spacing:.08em;background:rgba(255,120,40,.3);border-color:var(--warm)}
.overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:16px}
.overlay.on{display:flex}
.card{position:relative;width:min(560px,100%);background:var(--panel);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:18px;
  padding:26px 26px 22px;box-shadow:0 30px 80px rgba(0,0,0,.55);display:flex;flex-direction:column;gap:18px;min-width:0;box-sizing:border-box}
.card h1{margin:0;font-size:clamp(36px,8vw,58px);font-weight:900;letter-spacing:-.03em;line-height:1;text-wrap:balance}
.card h1 span{color:var(--warm)}
.card .sub{color:var(--fg-dim);margin:0}
.eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim);margin-bottom:8px}
.row{display:flex;gap:10px;flex-wrap:wrap}
.opt{flex:1 1 150px;min-width:0;border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:rgba(255,255,255,.03);color:var(--fg);font:inherit;text-align:start;cursor:pointer}
.opt.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.opt b{display:block;font-weight:600}
.opt small{color:var(--fg-dim)}
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{width:46px;height:46px;border-radius:50%;border:2px solid transparent;cursor:pointer;position:relative;padding:0}
.chip.sel{border-color:var(--fg);box-shadow:0 0 0 2px var(--bg) inset}
.chip.lock{opacity:.45;cursor:not-allowed}
.chip.lock::after{content:'+';position:absolute;right:-4px;top:-6px;background:var(--warm);color:#1a1000;border-radius:50%;width:18px;height:18px;font:900 13px/18px var(--font);text-align:center}
.plusnote{font-size:12px;color:var(--fg-dim)}
.plusnote b{color:var(--warm);font-weight:600}
.play{background:var(--accent);color:#06201e;border:0;border-radius:12px;padding:16px;font:900 22px var(--font);letter-spacing:.02em;cursor:pointer;box-shadow:0 10px 30px rgba(54,226,214,.3)}
.play:hover{filter:brightness(1.08)}
.play:disabled{opacity:.5;cursor:wait;box-shadow:none}
.ghost{background:transparent;color:var(--fg);border:1px solid var(--line);border-radius:12px;padding:12px;font:600 15px var(--font);cursor:pointer}
.hint{font-size:12px;color:var(--fg-dim);text-align:center}
.langbtn{position:absolute;top:14px;inset-inline-end:14px;background:transparent;border:1px solid var(--line);color:var(--fg-dim);border-radius:8px;padding:4px 10px;font:600 12px var(--font);cursor:pointer}
.res .big{font-size:clamp(60px,16vw,120px);font-weight:900;line-height:1;letter-spacing:-.04em;color:var(--warm)}
.res .stats{display:flex;gap:22px;flex-wrap:wrap}
.res .stats div{min-width:0}
button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.hud .msg{transition:none}}

/* conditions picker + coins */
.chips.cond{display:flex;flex-wrap:wrap;gap:8px}
.cpill{font:600 13px Rubik,system-ui,sans-serif;color:var(--text,#e8ecf5);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:7px 14px;cursor:pointer}
.cpill.sel{background:var(--accent,#36e2d6);color:#06201e;border-color:transparent}
.coins{text-align:center;font:600 14px Rubik,system-ui,sans-serif;opacity:.95}
.coins b{color:var(--warm,#ffb15c);font-weight:900}
#rain{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:0;transition:opacity .6s;background:repeating-linear-gradient(100deg,rgba(210,225,255,.0) 0 7px,rgba(210,225,255,.18) 7px 8px);background-size:60px 100%;animation:rainf .35s linear infinite}
#rain.on{opacity:.55}
@keyframes rainf{to{background-position:-24px 90px}}
.draft{position:absolute;left:50%;bottom:92px;transform:translateX(-50%);font:900 15px Rubik,system-ui,sans-serif;letter-spacing:.18em;color:#06201e;background:var(--accent,#36e2d6);padding:5px 14px;border-radius:999px;opacity:0;transition:opacity .15s;pointer-events:none}
.draft.show{opacity:.95}

/* contracts */
.contracts{position:absolute;left:16px;top:96px;display:flex;flex-direction:column;gap:6px;max-width:min(70vw,320px);pointer-events:none}
.contracts .ct{font:600 13px Rubik,system-ui,sans-serif;color:#e8ecf5;background:rgba(11,16,32,.62);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:6px 10px}
.contracts .ct.ok{color:#06201e;background:var(--accent,#36e2d6);border-color:transparent}
.contracts.res{position:static;max-width:none;pointer-events:auto}
.contracts.res .ct{background:rgba(255,255,255,.06)}
.contracts.res .ct.ok{color:#06201e;background:var(--accent,#36e2d6)}
html[dir=rtl] .contracts{left:auto;right:16px}

/* season */
.seasonbox{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:10px 12px;font:500 13px Rubik,system-ui,sans-serif;line-height:1.5}
.seasonbox b{color:var(--warm,#ffb15c)}
.seasonbox .sr{display:flex;justify-content:space-between;gap:12px}
.seasonbox button{margin-top:8px}
.stand{display:flex;flex-direction:column;gap:3px;font:600 13px Rubik,system-ui,sans-serif;min-width:220px}
.stand .sr{display:flex;justify-content:space-between;gap:16px;padding:3px 8px;border-radius:8px;background:rgba(255,255,255,.05)}
.stand .sr.me{background:var(--accent,#36e2d6);color:#06201e}
.nem{font:700 13px Rubik,system-ui,sans-serif;color:#ff8a7a;text-align:center}
.nem:empty,.stand:empty{display:none}
[hidden]{display:none!important}
.card.res{max-height:94vh;overflow-y:auto}

/* escape mode */
.chasehud{position:absolute;left:50%;top:14px;transform:translateX(-50%);font:700 15px Rubik,system-ui,sans-serif;color:#e8ecf5;background:rgba(11,16,32,.66);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:6px 16px;display:none;white-space:nowrap}
.hud.chase .chasehud{display:block}
.chasehud.danger{background:rgba(190,40,30,.85);animation:cpulse .35s infinite alternate}
@keyframes cpulse{to{transform:translateX(-50%) scale(1.06)}}
.hud.chase .lap>div:nth-child(n+2){display:none}
.hud.chase .contracts{display:none}

.garage{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:10px 12px;font:500 13px Rubik,system-ui,sans-serif}
.garage .gh{display:flex;justify-content:space-between;margin-bottom:6px}
.garage .gh b{color:var(--warm,#ffb15c)}
.garage .gr{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 0;border-top:1px solid rgba(255,255,255,.08)}
.garage .gr small{display:block;opacity:.65;font-size:11px}
.garage .pips{display:flex;gap:4px;margin-top:3px}
.garage .pips i{width:16px;height:6px;border-radius:3px;background:rgba(255,255,255,.18)}
.garage .pips i.on{background:var(--accent,#36e2d6)}
.garage button.up{font:600 12px Rubik,system-ui,sans-serif;color:#06201e;background:var(--warm,#ffb15c);border:0;border-radius:999px;padding:6px 12px;cursor:pointer;white-space:nowrap}
.garage button.up:disabled{opacity:.35;cursor:default}
.garage .sw{display:flex;gap:7px;flex-wrap:wrap}
.garage .sw button{width:26px;height:26px;border-radius:50%;border:2px solid transparent;cursor:pointer;position:relative}
.garage .sw button.sel{border-color:#fff}
.garage .sw button.lockd::after{content:attr(data-c);position:absolute;inset:auto 0 -13px 0;font:600 9px Rubik,sans-serif;color:var(--warm,#ffb15c);text-align:center}
.garage .gn{opacity:.6;font-size:11px;margin-top:6px}

/* time trial + co-driver */
.hud.trial .chasehud{display:block}
.hud.trial .lap>div:nth-child(2){display:none}
.hud.trial .contracts{display:none}
.alerts{position:absolute;top:108px;inset-inline-end:max(16px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none;max-width:min(78vw,340px)}
.alert{display:flex;gap:10px;align-items:center;font:600 14px Rubik,system-ui,sans-serif;color:#fff;background:rgba(11,16,32,.82);border:1px solid rgba(255,255,255,.18);border-inline-start:4px solid var(--accent,#36e2d6);border-radius:10px;padding:8px 12px;opacity:0;transform:translateX(30px);transition:opacity .25s,transform .25s}
html[dir=rtl] .alert{transform:translateX(-30px)}
.alert.in{opacity:1;transform:none}
.alert i{font-style:normal;font-size:16px}
.alert.warn{border-inline-start-color:var(--warm,#ffb15c)} .alert.warn i{color:var(--warm,#ffb15c)}
.alert.bad{border-inline-start-color:#ff5a4a;background:rgba(70,14,12,.86)} .alert.bad i{color:#ff5a4a}
.alert.good i{color:var(--accent,#36e2d6)}

.card.about{max-height:92vh;overflow-y:auto;gap:12px}.card.about h2{margin:0;font-size:26px;font-weight:900}.card.about p{margin:0;color:var(--fg-dim);line-height:1.5}.card.about .credits p{margin:0 0 14px}.credits b{color:var(--fg)}.credits a{color:var(--fg);text-underline-offset:3px}

/* ---- modern pass: calm glass, thin type, hairlines, one accent ---- */
:root{--font:'Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;--panel:rgba(8,12,22,.66);--line:rgba(255,255,255,.10);--accent:#5ff0e0}
body{font-weight:400;letter-spacing:.005em}
.card{border-radius:14px;box-shadow:0 24px 70px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.03) inset;backdrop-filter:blur(22px) saturate(1.2)}
.card h1{font-weight:300;font-size:clamp(30px,6vw,46px);letter-spacing:.34em;text-transform:uppercase;line-height:1.1}
.card h1 span{color:var(--accent);font-weight:600}
.card .sub{letter-spacing:.14em;text-transform:uppercase;font-size:11px}
.eyebrow{font-weight:500;letter-spacing:.2em;font-size:10px}
.opt{border-radius:10px;background:rgba(255,255,255,.025);transition:border-color .15s,background .15s}
.opt:hover{background:rgba(255,255,255,.06)}
.opt.sel{box-shadow:none;border-color:var(--accent);background:rgba(95,240,224,.07)}
.opt b{font-weight:500}
.cpill{font-family:var(--font);font-weight:500;font-size:12px;letter-spacing:.04em;border-radius:8px;padding:7px 12px;background:rgba(255,255,255,.04);border-color:var(--line)}
.cpill.sel{background:rgba(95,240,224,.12);color:var(--accent);border-color:var(--accent)}
.play{border-radius:10px;font:600 15px var(--font);letter-spacing:.28em;text-transform:uppercase;padding:15px;background:linear-gradient(180deg,rgba(95,240,224,.22),rgba(95,240,224,.08));color:var(--accent);border:1px solid var(--accent);box-shadow:0 0 28px rgba(95,240,224,.18)}
.play:hover{filter:none;background:linear-gradient(180deg,rgba(95,240,224,.34),rgba(95,240,224,.14))}
.ghost{border-radius:10px;font:500 13px var(--font);letter-spacing:.08em;padding:10px;color:var(--fg-dim)}
.ghost:hover{color:var(--fg);border-color:rgba(255,255,255,.3)}
.langbtn{border-radius:6px;font-family:var(--font)}
.garage,.seasonbox{border-radius:10px;background:rgba(255,255,255,.025);border-color:var(--line);font-family:var(--font)}
.garage button.up{background:transparent;color:var(--warm);border:1px solid var(--warm);font-family:var(--font);font-weight:500}
.card.about h2{font-weight:300;letter-spacing:.3em;text-transform:uppercase;font-size:20px}
/* HUD */
.hud .lap{background:transparent;backdrop-filter:none;border:0;border-inline-start:1px solid rgba(255,255,255,.35);border-radius:0;padding:2px 0 2px 14px;gap:26px;text-shadow:0 1px 10px rgba(0,0,0,.6)}
html[dir=rtl] .hud .lap{padding:2px 14px 2px 0}
.hud .lbl{font-weight:500;font-size:9px;letter-spacing:.24em}
.hud .val,.res .val{font-weight:300;font-size:24px;letter-spacing:.02em}
.hud .speed .val{font-weight:200;font-size:64px;letter-spacing:-.03em;line-height:.95}
.hud .speed .lbl{letter-spacing:.3em}
.hud .boost{width:min(360px,60vw)}
.hud .boost .bar{height:3px;border-radius:2px;border:0;background:rgba(255,255,255,.18)}
.hud .boost .fill{background:var(--accent);box-shadow:0 0 12px var(--accent)}
.hud .boost .fill.hot{background:var(--warm);box-shadow:0 0 14px var(--warm)}
.hud .boost .lbl{font-size:9px}
.hud .msg{font-weight:200;letter-spacing:.12em;text-transform:uppercase}
.hud .lapmsg{font-weight:300;letter-spacing:.3em;text-transform:uppercase;color:var(--fg)}
.hud .wrong{font-weight:500;letter-spacing:.3em;text-transform:uppercase}
.draft{font:600 11px var(--font);border-radius:6px;background:rgba(95,240,224,.16);color:var(--accent);border:1px solid var(--accent)}
.contracts .ct,.chasehud,.alert{font-family:var(--font);font-weight:500;font-size:12px;border-radius:8px;backdrop-filter:blur(10px);background:rgba(8,12,22,.6)}
.contracts .ct.ok{background:rgba(95,240,224,.18);color:var(--accent);border:1px solid var(--accent)}
.chasehud{letter-spacing:.06em;font-weight:500}
.res .big{font-weight:200;color:var(--fg)}
.coins,.stand,.nem{font-family:var(--font)}
.stand .sr{border-radius:6px}
.stand .sr.me{background:rgba(95,240,224,.16);color:var(--accent)}
.touch button{font-family:var(--font);font-weight:500;border-radius:50%;background:rgba(8,12,22,.45)}

/* ---- compact menu ---- */
.card.menu{width:min(470px,100%);padding:16px 18px 14px;gap:10px;max-height:96vh;overflow-y:auto}
.mhead{display:flex;align-items:baseline;gap:12px}
.card.menu h1{font-size:clamp(20px,4.5vw,26px);letter-spacing:.3em;white-space:nowrap}
.card.menu .sub{font-size:10px;margin:0;flex:1}
.iconbtn{background:transparent;border:1px solid var(--line);color:var(--fg-dim);width:34px;height:34px;border-radius:9px;padding:0;display:grid;place-items:center;cursor:pointer;align-self:center}
.iconbtn:hover{color:var(--fg);border-color:rgba(255,255,255,.3)}
.ic{width:18px;height:18px;flex:none}.iconbtn .ic{width:19px;height:19px}
.sec{display:flex;align-items:center;gap:10px}.sec>.ic{color:var(--fg-dim)}.sec>div{flex:1;min-width:0}
.card.menu .chips,.card.menu .row{gap:6px}
.card.menu .opt{flex:1 1 0;padding:7px 8px;text-align:center;border-radius:9px;font-size:12.5px}
.card.menu .opt small{display:none}
.card.menu .cpill{padding:5px 9px;font-size:11.5px}
.card.menu .chip{width:30px;height:30px;border-width:2px}
.card.menu .chip.lock::after{width:14px;height:14px;font-size:10px;line-height:14px;right:-3px;top:-5px}
.card.menu .seasonbox{padding:8px 10px;font-size:12px}
.gdet summary{display:flex;align-items:center;gap:8px;cursor:pointer;color:var(--fg-dim);font:500 12px var(--font);letter-spacing:.08em;list-style:none;padding:4px 0}
.gdet summary::-webkit-details-marker{display:none}.gdet[open] summary{color:var(--fg);margin-bottom:6px}
.card.menu .play{padding:11px;font-size:13px}
.card.menu .hint{font-size:10.5px}
.setcard{width:min(340px,100%)}.setcard .ghost{text-align:start;padding:11px 14px}
@media (max-height:560px){.card.menu{padding:10px 14px;gap:7px}}
#settings{background:rgba(0,0,0,.5)}
.setcard .chip{width:30px;height:30px}.setcard .chips{gap:8px;margin-bottom:4px}

.hud .speed{display:none}
.hud .dial{position:absolute;bottom:max(18px,env(safe-area-inset-bottom,0px));inset-inline-end:max(18px,env(safe-area-inset-right,0px));width:clamp(120px,17vw,190px);aspect-ratio:1;filter:drop-shadow(0 6px 14px rgba(0,0,0,.5));pointer-events:none}
.hud .dial svg{width:100%;height:100%;display:block}
.dial .bz{fill:#9aa0a8;stroke:#4a4f57;stroke-width:1.2}
.dial .face{fill:#101318}
.dial .tb{stroke:#e9ecef;stroke-width:1.6}.dial .ts{stroke:#8b929b;stroke-width:.8}
.dial .nums text{fill:#e9ecef;font:600 7px Inter,sans-serif;text-anchor:middle}
.dial .rz{fill:none}
.dial .unit{fill:#8b929b;font:500 5.5px Inter,sans-serif;text-anchor:middle;letter-spacing:.15em}
.dial .needle{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(-120deg);transition:transform .08s linear}
.dial .needle i{position:absolute;left:-1.5px;bottom:0;width:3px;height:36%;background:#ff5a36;border-radius:2px;transform-origin:bottom;box-shadow:0 0 6px rgba(255,90,54,.6);height:calc(clamp(120px,17vw,190px)*.4)}
.dial .hub{position:absolute;left:50%;top:50%;width:12%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(#d0d4d9,#5b6068)}
@media (pointer:coarse){.hud .dial{bottom:max(96px,calc(env(safe-area-inset-bottom,0px) + 90px));width:clamp(96px,22vw,130px)}.dial .needle i{height:calc(clamp(96px,22vw,130px)*.4)}}

/* track list: 7 tracks, premium ones locked */
.card.menu #tracks{gap:5px}
.card.menu #tracks .opt{flex:1 1 calc(25% - 5px);min-width:0;padding:6px 4px;font-size:11.5px;position:relative}
.card.menu #tracks .opt b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opt.lock{opacity:.5;cursor:not-allowed}
.opt.lock::after{content:'+';position:absolute;right:-3px;top:-6px;background:var(--warm);color:#1a1000;border-radius:50%;width:15px;height:15px;font:900 11px/15px var(--font);text-align:center}
.opt.plusopen{position:relative}.opt.plusopen::after{content:'+';position:absolute;right:-3px;top:-6px;background:var(--warm);color:#1a1000;border-radius:50%;width:15px;height:15px;font:900 11px/15px var(--font);text-align:center}

.by{text-align:center;font:500 10.5px var(--font);letter-spacing:.14em;color:var(--fg-dim);text-decoration:none}.by:hover{color:var(--fg)}
#trackNote{cursor:pointer;padding:6px 10px;border:1px solid var(--line);border-radius:9px}