/* Base reset. The game was first published inside a host page that supplied these rules. */
body{margin:0;font-size:14px}
img{max-width:100%}
[hidden]{display:none!important}

/* Layout: full-bleed track canvas; a timing tower top-left, circuit map top-right, drive pads along the bottom. Single daylight look by choice. */
:root{
  --grass:#6aa84f;
  --panel:rgba(14,17,24,.88);
  --panel-solid:#0e1118;
  --line:rgba(255,255,255,.14);
  --ink:#f4f2ec;
  --muted:#9aa4b5;
  --hot:#ff6a1f;
  --purple:#b667ff;
  --green:#35d07f;
  --yellow:#ffd338;
  --red:#ff5a52;
  --display:"Saira Condensed","Arial Narrow",Arial,sans-serif;
  --body:"Saira","Segoe UI",system-ui,sans-serif;
  color-scheme:dark;
}
html,body{height:100%}
body{background:var(--grass);color:var(--ink);font-family:var(--body);overflow:hidden;
  touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#stage{position:fixed;inset:0}
#stage canvas{display:block;width:100%;height:100%}

#hud{position:fixed;inset:0;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-block:calc(env(safe-area-inset-top,0px) + 12px) calc(env(safe-area-inset-bottom,0px) + 16px)}
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}

.tower{background:var(--panel);border-radius:6px;padding:10px 12px 12px;width:236px;max-width:62vw;
  font-family:var(--display);font-variant-numeric:tabular-nums;display:flex;flex-direction:column;gap:8px}
.label{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.now{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
#lap{font-size:38px;font-weight:800;line-height:1;letter-spacing:.01em}
#lap.invalid{color:var(--red)}
#tag{font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--red)}
.pair{display:flex;gap:14px;border-top:1px solid var(--line);padding-top:8px}
.pair div{display:flex;flex-direction:column;gap:1px;min-width:0}
.pair b{font-size:19px;font-weight:700}
#best{color:var(--purple)}
.sectors{display:flex;gap:4px}
.sec{flex:1;min-width:0;background:rgba(255,255,255,.1);border-radius:3px;padding:3px 0 4px;text-align:center;
  display:flex;flex-direction:column;color:var(--muted)}
.sec span{font-size:10px;font-weight:700;letter-spacing:.12em}
.sec b{font-size:15px;font-weight:700}
.sec.p{background:var(--purple);color:#1b0b2b}
.sec.g{background:var(--green);color:#06250f}
.sec.y{background:var(--yellow);color:#2b2200}
.sec.x{background:rgba(255,90,82,.3);color:var(--ink)}

.side{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.map{background:var(--panel);border-radius:6px;padding:6px;line-height:0}
.map canvas{width:118px;height:102px}
.map.dash canvas{width:150px;height:125px}
.speed{background:var(--panel);border-radius:6px;padding:4px 10px 6px;font-family:var(--display);font-variant-numeric:tabular-nums;
  display:flex;align-items:baseline;gap:5px}
.speed.lim{background:var(--yellow);color:#2b2200}.speed.lim .label{color:#2b2200}
#kmh{font-size:26px;font-weight:800;min-width:2.2ch;text-align:right}
.tools{display:flex;gap:6px;pointer-events:auto}
.tools button{font:700 12px var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
  background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:7px 10px;cursor:pointer}
.tools button:hover{border-color:var(--ink)}
button:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}

#delta{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 150px);transform:translateX(-50%);
  font:800 30px var(--display);font-variant-numeric:tabular-nums;padding:4px 14px 6px;border-radius:6px;
  background:var(--panel-solid);white-space:nowrap}
#delta.good{color:var(--green)} #delta.bad{color:var(--yellow)} #delta.rec{background:var(--purple);color:#1b0b2b}

.pads{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.pads .grp{display:flex;gap:10px;pointer-events:auto}
.pad{width:68px;height:68px;border-radius:50%;border:2px solid rgba(255,255,255,.55);background:rgba(14,17,24,.55);
  color:var(--ink);font:800 14px var(--display);letter-spacing:.08em;display:grid;place-items:center;cursor:pointer;touch-action:none}
.pad svg{width:26px;height:26px;fill:currentColor}
.pad.gas{width:80px;height:80px;border-color:var(--green)}
.pad.brk{border-color:var(--red)}
.pad.on{background:var(--ink);color:var(--panel-solid)}
.keys{margin:0 auto;background:var(--panel);border-radius:6px;padding:6px 12px;font-size:13px;color:var(--muted)}
.keys kbd{font:700 13px var(--display);color:var(--ink);letter-spacing:.06em}

#intro,#result{position:fixed;inset:0;display:grid;place-items:center;background:rgba(10,14,10,.38);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.card{max-height:100%;overflow:auto;background:var(--panel-solid);border-radius:10px;padding:26px 26px 24px;max-width:380px;width:100%;
  display:flex;flex-direction:column;gap:14px;border-top:6px solid var(--hot)}
.card h1{margin:0;font:italic 800 54px/0.9 var(--display);text-transform:uppercase;letter-spacing:.01em;text-wrap:balance}
.card h1 em{font-style:inherit;color:var(--hot)}
#rpos em{font-size:.45em;color:var(--muted)}
.card p{margin:0;font-size:15px;line-height:1.5;color:#d6d9e0}
.card dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14px;color:#d6d9e0}
.card dt{font:700 13px var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.card dd{margin:0}
#go,.cta{font:800 20px var(--display);letter-spacing:.1em;text-transform:uppercase;color:#1a0d02;background:var(--hot);
  border:0;border-radius:6px;padding:12px;cursor:pointer}
#go:hover,.cta:hover{filter:brightness(1.1)}
.pick{display:flex;flex-wrap:wrap;gap:8px}
.pick button{flex:1 1 28%;min-width:0;font:800 15px var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);background:transparent;
  border:2px solid var(--line);border-radius:6px;padding:7px 8px 8px;cursor:pointer;display:flex;flex-direction:column;align-items:center}
.pick small{text-align:center;line-height:1.25;margin-top:2px;font:500 12px var(--body);letter-spacing:0;text-transform:none;color:var(--muted)}
.pick button.on{border-color:var(--hot);background:rgba(255,106,31,.16)}
.btns{display:flex;gap:10px}
.btns button{flex:1;font-size:17px;padding:12px 6px}
.alt{font:800 17px var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:transparent;border:2px solid var(--line);border-radius:6px;cursor:pointer}
.alt:hover{border-color:var(--ink)}
.racebar{display:flex;align-items:baseline;gap:10px;font-family:var(--display)}
#pos{font-size:28px;font-weight:800;line-height:1;color:var(--yellow)}
#lapn,#pen{font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--muted)}
#pen{color:var(--red);margin-left:auto}
.gaps{font:700 13px var(--display);letter-spacing:.06em;color:var(--ink);font-variant-numeric:tabular-nums;white-space:pre;margin-top:2px;min-height:1.2em}
.gaps[hidden]{display:none}
#lights{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 96px);transform:translateX(-50%);display:flex;gap:10px;
  background:var(--panel-solid);padding:12px 16px;border-radius:8px}
#lights span{width:26px;height:26px;border-radius:50%;background:#33181a}
#lights span.on{background:#ff3b30;box-shadow:0 0 14px #ff3b30}
.rlist{list-style:none;margin:0;padding:0;columns:2;column-gap:20px;font:500 15px var(--display);font-variant-numeric:tabular-nums}
.rlist li{display:flex;gap:8px;padding:2px 0;break-inside:avoid}
.rlist li.you{color:var(--hot);font-weight:800}
.rlist li.out{opacity:.5}
.row{display:flex;align-items:center;gap:14px}
.seg{flex:1;display:flex;border:2px solid var(--line);border-radius:6px;overflow:hidden}
.seg button{flex:1;font:800 15px var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);background:transparent;border:0;padding:8px 4px;cursor:pointer}
.seg button+button{border-left:2px solid var(--line)}
.seg button.on{background:rgba(255,106,31,.22);color:var(--hot)}
.card p.note{margin-top:-4px;font-size:13px;color:var(--muted);text-align:right}
#intro .modes button{font-size:16px;letter-spacing:.06em;white-space:nowrap;display:flex;flex-direction:column;align-items:center;padding:10px 4px}
.modes small{font:500 12px var(--body);letter-spacing:0;text-transform:none;opacity:.75;margin-top:1px}
.resume{font:800 18px var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:transparent;border:2px solid var(--hot);border-radius:6px;padding:9px;cursor:pointer;display:flex;flex-direction:column;align-items:center}
.resume[hidden]{display:none}
.resume:hover{background:rgba(255,106,31,.16)}
.resume small{font:500 12px var(--body);letter-spacing:0;text-transform:none;color:var(--muted)}
.how summary{cursor:pointer;font:700 13px var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.how[open] summary{margin-bottom:10px}
.pick button.on small{color:var(--ink)}
.rlist i{font-style:normal;color:var(--muted);width:2ch;text-align:right}
.rlist em{margin-left:auto;font-style:normal;color:var(--muted)}
@media (max-width:480px){
  .tower{width:216px;padding:8px 10px 10px}
  #lap{font-size:32px}
  .map canvas{width:88px;height:76px}
  .map.dash canvas{width:108px;height:90px}
  .card h1{font-size:44px}
  #delta{font-size:24px;top:calc(env(safe-area-inset-top,0px) + 170px)}
}

/* Home page: the menu, the career and the pause screen in one. A light page in the style of a game portal,
   unlike the dark in-race HUD; its colours are the --h-* tokens. It fits the window without scrolling on a desktop. */
#intro{--h-bg:#eef1f5;--h-card:#fff;--h-ink:#10131a;--h-muted:#667080;--h-line:#dde2ea;--h-hot:#e8501a;--h-panel:#0f5566;--h-panel2:#13788a;
  display:block;padding:0;background:var(--h-bg);color:var(--h-ink);overflow:hidden;-webkit-user-select:text;user-select:text}
.site{display:grid;grid-template-columns:190px minmax(0,1fr);height:100%}
.hnav{background:var(--h-card);border-right:1px solid var(--h-line);padding:18px 0;display:flex;flex-direction:column;overflow-y:auto}
.brand{font:italic 800 30px/0.9 var(--display);text-transform:uppercase;padding:0 18px 18px}
.brand em,.hero h2 em{font-style:inherit;color:var(--h-hot)}
.hnav a{font:700 14px var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--h-ink);text-decoration:none;padding:8px 18px;border-left:3px solid transparent}
.hnav a:hover{background:var(--h-bg)}
.hnav a.on{border-left-color:var(--h-hot);background:linear-gradient(90deg,#fff1ea,transparent)}
.hnav .grp{font:700 11px var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--h-muted);padding:16px 18px 4px}
.main{padding:16px 28px 8px;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:14px;min-width:0;height:100%;box-sizing:border-box;overflow:hidden}
.hhead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.hrow{display:flex;align-items:center;gap:12px}
.hello h1{margin:0;font:800 32px/1 var(--display);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.rank{font:800 16px var(--display);letter-spacing:.06em;text-transform:uppercase;background:#ffe9b8;color:var(--h-ink);padding:3px 10px;border-radius:3px;white-space:nowrap}
.lvl{display:flex;align-items:center;gap:10px;margin-top:6px;font:700 12px var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--h-muted);white-space:nowrap}
.lvl i{width:150px;height:5px;background:var(--h-line);border-radius:3px;overflow:hidden}
.lvl b{display:block;height:100%;width:0;background:var(--yellow)}
.stats{display:flex;gap:8px}
.stat{background:var(--h-card);border:1px solid var(--h-line);border-radius:3px;padding:5px 12px;font-family:var(--display);min-width:78px}
.stat b{display:block;font-size:19px;line-height:1.1;font-variant-numeric:tabular-nums}
.stat span{font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--h-muted);text-transform:uppercase;white-space:nowrap}
#intro .resume{min-width:200px;background:var(--h-hot);border:0;color:#fff;margin-left:auto}
#intro .resume small{color:rgba(255,255,255,.85)}
.hgrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;min-height:0}
/* hero: aerial view of the chosen circuit behind a dark wash; mode buttons live here */
.hero{position:relative;overflow:hidden;border-radius:3px;color:#fff;display:flex;flex-direction:column;gap:10px;padding:24px 26px 20px;min-height:0;
  background:repeating-linear-gradient(-20deg,#5f9c46 0 26px,#67a64d 26px 52px)}
.heromap{position:absolute;inset:0;z-index:0}
.heromap svg{display:block;width:100%;height:100%}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(9,14,22,.93) 0%,rgba(9,14,22,.8) 40%,rgba(9,14,22,.12) 72%,rgba(9,14,22,0) 100%)}
.hero>*:not(.heromap){position:relative;z-index:2}
.kick{font:700 12px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--yellow)}
.kick.dark{color:var(--h-muted)}
.hero h2{margin:-2px 0 0;font:800 60px/0.9 var(--display);text-transform:uppercase;letter-spacing:.01em;max-width:60%}
.hero p{margin:0;max-width:52%;font-size:14px;line-height:1.45;color:#dfe5ee}
.hero p b{color:#fff}
.pbox{border:1px solid rgba(255,255,255,.28);background:rgba(9,14,22,.45);padding:10px 14px;max-width:440px;font:700 12px var(--display);letter-spacing:.08em;text-transform:uppercase;display:flex;flex-direction:column;gap:7px}
.pbox .t{display:flex;justify-content:space-between;gap:10px}.pbox .t span:last-child{color:var(--yellow)}
.pbox .bar{height:5px;background:rgba(255,255,255,.22)}.pbox .bar i{display:block;height:100%;background:var(--yellow)}
.pbox small{font:500 12px var(--body);letter-spacing:0;text-transform:none;color:#cfd6e0;text-align:right}
.next{display:grid;grid-template-columns:repeat(3,minmax(0,168px));gap:8px}
.next button{all:unset;box-sizing:border-box;cursor:pointer;background:rgba(9,14,22,.82);border:1px solid rgba(255,255,255,.18);font:700 13px var(--display);letter-spacing:.06em;text-transform:uppercase;display:flex;flex-direction:column}
.next button.on{border-color:var(--yellow)}
.next button:focus-visible{outline:2px solid var(--yellow)}
.next .aerbox{height:66px}
.next .nb{padding:6px 9px 8px;display:flex;flex-direction:column;gap:1px}
.next .nb span{display:flex;align-items:center;gap:6px}
.next em{font-style:normal;color:var(--yellow)}
.next small{font:500 12px var(--body);letter-spacing:0;text-transform:none;color:#cfd6e0}
.hbtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto}
#intro .hbtns button{font:800 16px var(--display);letter-spacing:.1em;text-transform:uppercase;padding:9px 18px;border-radius:2px;cursor:pointer;background:transparent;color:#fff;border:2px solid rgba(255,255,255,.85);display:flex;flex-direction:column;align-items:flex-start;min-width:150px}
#intro .hbtns button.go{background:var(--h-hot);border-color:var(--h-hot)}
#intro .hbtns button:hover{filter:brightness(1.12)}
#intro .hbtns small{font:500 12px var(--body);letter-spacing:0;text-transform:none;opacity:.85}
/* open events: the strong-colour side panel */
.openbox{border-radius:3px;padding:20px 18px;color:#fff;display:flex;flex-direction:column;gap:10px;min-height:0;overflow:hidden;
  background:linear-gradient(160deg,var(--h-panel),var(--h-panel2))}
.openbox .kick{color:#bfe8ef}
.openbox h3{margin:0;font:800 26px/1 var(--display);text-transform:uppercase}
.obtns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.obtns button,.omore{font:800 13px var(--display);letter-spacing:.1em;text-transform:uppercase;padding:9px;cursor:pointer;border-radius:1px}
.obtns button:first-child{background:#fff;color:var(--h-panel);border:2px solid #fff}
.obtns button:last-child{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.7)}
.openbox .osub{font-size:12px;color:#cfeef3;border-top:1px solid rgba(255,255,255,.2);padding-top:8px}
.olist{display:flex;flex-direction:column;gap:5px;min-height:0;overflow:hidden}
.orow{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.12);padding:5px 6px}
.orow .aerbox{width:54px;height:36px;flex:none}
.orow div{flex:1;min-width:0;font:700 14px var(--display);letter-spacing:.04em}
.orow small{display:block;font:500 11px var(--body);letter-spacing:0;color:#cfeef3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.orow button{font:800 12px var(--display);letter-spacing:.1em;text-transform:uppercase;background:#10131a;color:#fff;border:0;padding:8px 12px;cursor:pointer}
.omore{background:#10131a;color:#fff;border:0;margin-top:auto}
/* circuits strip */
.spots{display:flex;flex-direction:column;gap:8px;min-width:0}
.shead{display:flex;align-items:flex-end;gap:14px}
.shead h2{margin:0;font:800 28px/1 var(--display);text-transform:uppercase;white-space:nowrap}
.flags{display:flex;gap:4px;align-items:center;flex:1;flex-wrap:wrap;padding-bottom:3px}
.flags button{all:unset;cursor:pointer;line-height:0;padding:2px;border:1px solid transparent}
.flags button.on{border-color:var(--h-ink)}
.flags .all{font:800 11px var(--display);line-height:14px;padding:1px 4px;border:1px solid var(--h-ink)}
.more{color:var(--h-ink);font:800 12px var(--display);letter-spacing:.08em;text-transform:uppercase;background:var(--h-card);border:1px solid var(--h-ink);padding:6px 10px;cursor:pointer;white-space:nowrap}
.strip{position:relative}
#intro .cards{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(196px,1fr);gap:8px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none}
#intro .cards::-webkit-scrollbar{display:none}
#intro .cards button{all:unset;box-sizing:border-box;cursor:pointer;background:var(--h-card);border:2px solid transparent;scroll-snap-align:start;display:flex;flex-direction:column;
  font:700 14px var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--h-ink)}
#intro .cards button:hover{border-color:var(--h-line)}
#intro .cards button.on{border-color:var(--h-hot)}
#intro .cards button:focus-visible{outline:2px solid var(--h-hot);outline-offset:2px}
.cards .aerbox{height:84px}
.cards .cb{padding:7px 10px 9px;display:flex;flex-direction:column;gap:2px}
.cards .cb span{display:flex;align-items:center;gap:6px}
.cards .cb small{font:500 13px var(--body);letter-spacing:0;text-transform:none;color:var(--h-muted)}
.cards .cb small.t{color:var(--h-ink)}
.arrow{position:absolute;right:-8px;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;border:0;background:var(--h-ink);color:#fff;font:800 22px/1 var(--display);cursor:pointer}
.arrow[hidden]{display:none}
.aerbox{background:repeating-linear-gradient(-20deg,#5f9c46 0 14px,#67a64d 14px 28px)}
.aerbox svg{display:block;width:100%;height:100%}
svg .edge{fill:none;stroke:#f1efe8;stroke-linejoin:round;vector-effect:non-scaling-stroke}
svg .road{fill:none;stroke:#3d4048;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.aerbox .edge{stroke-width:6px}.aerbox .road{stroke-width:3.8px}
.orow .aerbox .edge{stroke-width:3.5px}.orow .aerbox .road{stroke-width:2px}
.heromap .edge{stroke-width:30px}.heromap .road{stroke-width:23px}
svg .sf{fill:#fff;stroke:#10131a;stroke-width:2px;vector-effect:non-scaling-stroke}
.flag{width:21px;height:14px;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.foot{font-size:11px;color:var(--h-muted);text-align:center}
/* windows opened from the side navigation */
.modal{position:absolute;inset:0;z-index:5;background:rgba(9,14,22,.55);display:grid;place-items:center;padding:16px}
.mcard{position:relative;background:var(--h-card);color:var(--h-ink);border-top:6px solid var(--h-hot);padding:22px 24px;max-width:560px;width:100%;max-height:calc(100% - 32px);overflow:auto;box-sizing:border-box;display:flex;flex-direction:column;gap:10px}
.mcard.wide{max-width:900px}
.mcard h2{margin:0;font:800 32px/1 var(--display);text-transform:uppercase}
.mcard .x{position:absolute;right:10px;top:8px;border:0;background:none;font:400 30px/1 var(--body);color:var(--h-muted);cursor:pointer}
.mcard dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:14px;color:#384050}
.mcard dt{font:700 13px var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--h-muted)}
.mcard dd{margin:0}
.ladder{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.ladder div{border:1px solid var(--h-line);padding:8px;font:700 13px var(--display);letter-spacing:.04em;text-transform:uppercase;display:flex;flex-direction:column;gap:2px}
.ladder div.now{border-color:var(--h-hot);background:#fff1ea}
.ladder div.lock{opacity:.5}
.ladder small{font:500 12px var(--body);letter-spacing:0;text-transform:none;color:var(--h-muted)}
.evgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.evgrid button{all:unset;box-sizing:border-box;cursor:pointer;border:1px solid var(--h-line);display:flex;flex-direction:column;font:700 13px var(--display);letter-spacing:.05em;text-transform:uppercase}
.evgrid button[disabled]{cursor:default;opacity:.45}
.evgrid .aerbox{height:64px}
.evgrid .nb{padding:6px 8px 8px;display:flex;flex-direction:column;gap:1px}
.evgrid .nb span{display:flex;align-items:center;gap:6px}
.evgrid em{font-style:normal;color:var(--h-hot)}
.evgrid small{font:500 12px var(--body);letter-spacing:0;text-transform:none;color:var(--h-muted)}
@media (max-height:860px) and (min-width:821px){ #heroNext{display:none} .hero h2{font-size:50px} .cards .aerbox{height:62px} .hello h1{font-size:28px} .hero{gap:8px;padding:18px 24px 14px} .pbox small{display:none} .pbox{padding:8px 12px} .orow:nth-child(n+3){display:none} .openbox{gap:8px;padding:16px} }
@media (max-width:1180px){ .stats .stat:nth-child(n+3){display:none} .hgrid{grid-template-columns:minmax(0,1fr) 290px} }
/* narrow screens: the page scrolls, everything stacks */
@media (max-width:820px){
  #intro{overflow-x:hidden;overflow-y:auto}
  .site{grid-template-columns:1fr;height:auto}
  .hnav{flex-direction:row;overflow-x:auto;align-items:center;padding:10px 0;border-right:0;border-bottom:1px solid var(--h-line)}
  .hnav .grp{display:none}
  .brand{font-size:22px;padding:0 12px;white-space:nowrap}
  .hnav a{padding:6px 10px;white-space:nowrap;border-left:0;border-bottom:3px solid transparent}
  .hnav a.on{border-bottom-color:var(--h-hot);background:none}
  .main{height:auto;overflow:visible;padding:14px;display:flex;flex-direction:column}
  .hhead{flex-wrap:wrap}
  .hello h1{font-size:24px;white-space:normal}
  .stats{width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
  .stats .stat:nth-child(n+3){display:block}
  .stat{min-width:0;padding:5px 7px}
  .hgrid{grid-template-columns:1fr}
  .hero{padding:20px 16px 16px}
  .hero h2{font-size:44px;max-width:none}
  .hero p{max-width:none}
  .hero::before{background:linear-gradient(180deg,rgba(9,14,22,.55),rgba(9,14,22,.92))}
  .next{grid-template-columns:repeat(3,minmax(0,1fr))}
  .next .aerbox{height:46px}
    #intro .hbtns button{flex:1;min-width:0;align-items:center}
  .shead{flex-wrap:wrap}
  .more{display:none}
  .ladder{grid-template-columns:repeat(3,minmax(0,1fr))}
  .evgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Garage: setup choice before each session, over the paused grid */
#garage{position:fixed;inset:0;display:grid;place-items:end center;padding:0 16px calc(env(safe-area-inset-bottom,0px) + 70px);background:linear-gradient(180deg,rgba(10,14,10,0) 40%,rgba(10,14,10,.45))}
.gcard{background:var(--panel-solid);border-top:6px solid var(--hot);border-radius:8px;padding:18px 20px;width:min(440px,100%);display:flex;flex-direction:column;gap:10px}
.gcard h2{margin:0;font:italic 800 34px/0.95 var(--display);text-transform:uppercase}
#setup button{display:flex;flex-direction:column;align-items:center;gap:1px}
#setup small{font:500 11px var(--body);color:var(--muted)}
.gcard .note{margin:0;font-size:13px;color:var(--muted)}
#gGo{font-size:20px}

/* Phase A: driver window, garage, notices, new-tier card, phone tab bar */
.tabs{display:flex;gap:4px;border-bottom:2px solid var(--h-line)}
.tabs button{font:800 13px var(--display);letter-spacing:.08em;text-transform:uppercase;background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-2px;padding:8px 12px;color:var(--h-muted);cursor:pointer}
.tabs button.on{color:var(--h-ink);border-bottom-color:var(--h-hot)}
.mut{margin:0;font-size:13px;color:var(--h-muted)}
.lvbig{display:flex;align-items:center;gap:16px}
.lvbig>b{font:800 44px/1 var(--display)}
.lvbig>div{flex:1}
.xbar{height:8px;background:var(--h-line)}.xbar i{display:block;height:100%;background:var(--yellow)}
.lvbig small{font-size:12px;color:var(--h-muted)}
.kv{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.kv div{border:1px solid var(--h-line);padding:8px;font-family:var(--display)}
.kv b{display:block;font-size:18px}.kv span{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--h-muted)}
.chl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.chl li{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;border:1px solid var(--h-line);padding:8px 10px;font-size:14px}
.chl em{font:800 14px var(--display);font-style:normal}
.chl small{font-size:12px;color:var(--h-muted)}
.chl li.done{background:#eefaf2;border-color:#bfe7cc}.chl li.done em{color:#1f9d55}
.ht{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.ht th{font:700 11px var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--h-muted);text-align:left;padding:4px 6px;border-bottom:1px solid var(--h-line)}
.ht td{padding:5px 6px;border-bottom:1px solid var(--h-line)}
#lookCv{width:304px;max-width:100%;height:auto;align-self:center;background:repeating-linear-gradient(-20deg,#3d4048 0 14px,#43464f 14px 28px);border-radius:4px}
.sw{display:grid;grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:6px}
.sw button{all:unset;box-sizing:border-box;cursor:pointer;border:2px solid var(--h-line);padding:6px;display:flex;flex-direction:column;align-items:center;gap:4px}
.sw button.on{border-color:var(--h-hot)}
.sw button[disabled]{cursor:default;opacity:.45}
.sw i{width:30px;height:18px;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
.sw small{font:600 11px var(--body);color:var(--h-muted)}
.toast{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 14px);transform:translateX(-50%);z-index:20;background:var(--panel-solid);color:var(--ink);border-left:5px solid var(--green);
  padding:10px 16px;border-radius:6px;display:flex;flex-direction:column;gap:2px;min-width:240px;max-width:calc(100% - 32px);box-shadow:0 6px 24px rgba(0,0,0,.3)}
.toast.lvl{border-left-color:var(--yellow)}
.toast b{font:800 15px var(--display);letter-spacing:.08em;text-transform:uppercase}
.toast span{font-size:13px;color:#d6d9e0}
#tierUp{position:fixed;inset:0;z-index:15;display:grid;place-items:center;padding:16px;background:radial-gradient(circle at 50% 40%,#1b2433,#07090d)}
.tucard{width:min(560px,100%);color:#fff;display:flex;flex-direction:column;gap:12px;text-align:center;align-items:center}
.tucard h2{margin:0;font:italic 800 72px/0.9 var(--display);text-transform:uppercase;color:var(--hot)}
.tucard p{margin:0;font-size:15px;line-height:1.5;color:#d6d9e0}
#tierCv{width:min(456px,100%);height:auto}
.tl{display:flex;gap:4px;width:100%}
.tl i{flex:1;font:700 11px var(--display);font-style:normal;letter-spacing:.06em;text-transform:uppercase;padding:6px 2px;background:rgba(255,255,255,.08);color:var(--muted)}
.tl i.done{background:rgba(255,211,56,.25);color:#fff}.tl i.now{background:var(--hot);color:#fff}
.tucard .hbtns button{font:800 16px var(--display);letter-spacing:.1em;text-transform:uppercase;padding:10px 18px;cursor:pointer;background:transparent;color:#fff;border:2px solid rgba(255,255,255,.85)}
.tucard .hbtns button.go{background:var(--hot);border-color:var(--hot)}
.tabbar{display:none}
@media (max-width:820px){
  .hnav a{display:none}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:4;background:var(--h-card);border-top:1px solid var(--h-line);padding-bottom:env(safe-area-inset-bottom,0px)}
  .tabbar button{font:800 12px var(--display);letter-spacing:.06em;text-transform:uppercase;background:none;border:0;padding:12px 2px;color:var(--h-ink);cursor:pointer}
  .main{padding-bottom:64px}
  .kv{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tucard h2{font-size:52px}
}
#driverBody,#lookBody,#careerBody{display:flex;flex-direction:column;gap:10px;min-width:0}
#lookBody .kick,#driverBody .kick{display:block}

/* Sign-in (on the site; hidden when the game runs from a file) */
#signin{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:16px;background:#eef1f5;color:#10131a;overflow:auto}
.sicard{width:min(440px,100%);background:#fff;border-top:6px solid #e8501a;padding:28px 26px;display:flex;flex-direction:column;gap:14px}
.sicard>div{display:flex;flex-direction:column;gap:12px}
.brand.big{font:italic 800 44px/0.9 var(--display);text-transform:uppercase;padding:0}
.brand.big em{font-style:inherit;color:#e8501a}
.sicard h1{margin:0;font:800 28px/1 var(--display);text-transform:uppercase}
.sicard p{margin:0;font-size:15px;line-height:1.45;color:#384050}
.sicard p.small{font-size:12px;color:#667080}
.sicard p.err{color:#c62828;font-size:14px}
.gbtn{display:flex;align-items:center;justify-content:center;gap:12px;border:1px solid #dadce0;border-radius:4px;padding:11px;font:500 16px var(--body);color:#1f1f1f;text-decoration:none;background:#fff}
.gbtn:hover{background:#f6f8fa}
.gbtn svg{width:20px;height:20px}
.sirow{display:flex;gap:8px}
.sirow input,.delrow input{flex:1;min-width:0;font:500 16px var(--body);padding:10px 12px;border:1px solid #c9ced8;border-radius:3px}
.sirow button,.delrow button{font:800 15px var(--display);letter-spacing:.08em;text-transform:uppercase;background:#e8501a;color:#fff;border:0;padding:10px 16px;cursor:pointer;border-radius:2px}
.sirow button:disabled{opacity:.6}
#acctBody{display:flex;flex-direction:column;gap:10px}
.delrow{display:flex;gap:8px}
.delrow button{background:#c62828}
.hbtns.light button{font:800 14px var(--display);letter-spacing:.08em;text-transform:uppercase;background:#fff;border:2px solid #10131a;color:#10131a;padding:8px 16px;cursor:pointer}
#signin,#intro{color-scheme:light}
.brand.big{white-space:nowrap}
.foot a,.sicard a:not(.gbtn){color:inherit}