/* ═══════════════════════════════════════════════════════════════
   CIRCUIT LAB
   ═══════════════════════════════════════════════════════════════ */

:root{
  --bg:#0a0d11;
  --bg2:#0e1218;
  --panel:#12171e;
  --panel2:#161c24;
  --line:rgba(255,255,255,.09);
  --line2:rgba(255,255,255,.15);
  --text:#e8ecf2;
  --dim:#8d97a6;
  --dim2:#5f6875;
  --accent:#ffd54a;
  --accent2:#ff6b57;
  --good:#7ce38b;
  --bad:#e8483c;
  --blue:#4ea8de;
  --r:14px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:15px;
  line-height:1.5;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;font-size:inherit;color:inherit;background:none;border:none;cursor:pointer}
h1,h2,h3,h4{font-weight:650;letter-spacing:-.02em;line-height:1.15}
small{font-size:.82em}
b{font-weight:650}

/* ── screens ── */
.screen{position:fixed;inset:0;opacity:0;pointer-events:none;transition:opacity .35s ease}
.screen.active{opacity:1;pointer-events:auto}

/* The browser's own `[hidden] { display: none }` lives in the user-agent
   stylesheet, which every author rule outranks — so a `.btn` with `display:
   inline-flex` below, or any other element this file gives a display to, went
   on being drawn after code had set `hidden` on it. That is why the pause
   menu, the results screen and the party lobby all showed buttons for things
   you could not do. Stated here as an author rule, it wins. */
[hidden]{display:none!important}

/* ── buttons ── */
.btn{
  display:inline-flex;align-items:center;gap:.5em;justify-content:center;
  padding:.72em 1.35em;border-radius:10px;font-weight:600;font-size:.95rem;
  border:1px solid var(--line2);color:var(--text);
  transition:background .16s,border-color .16s,transform .1s,color .16s;
  white-space:nowrap;
}
.btn:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.28)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:#181203;border-color:var(--accent)}
.btn-primary:hover{background:#ffe07a;border-color:#ffe07a}
.btn-ghost{background:transparent;border-color:var(--line)}
.btn-lg{padding:.95em 1.8em;font-size:1.05rem}
.btn:disabled{opacity:.35;cursor:not-allowed;transform:none}
.kbd-hint{opacity:.55;font-size:.85em;border:1px solid currentColor;border-radius:4px;padding:0 .35em;line-height:1.4}
.icon-btn{width:34px;height:34px;border-radius:8px;color:var(--dim);font-size:1rem}
.icon-btn:hover{background:rgba(255,255,255,.08);color:var(--text)}

/* ═══════════════ WELCOME ═══════════════ */
#hero-canvas{position:absolute;inset:0;width:100%;height:100%}
.hero-vignette{
  position:absolute;inset:0;
  background:
    radial-gradient(1200px 800px at 18% 45%, rgba(10,13,17,.97) 25%, rgba(10,13,17,.72) 55%, rgba(10,13,17,.35) 100%),
    linear-gradient(180deg,rgba(10,13,17,.85),rgba(10,13,17,.35) 40%,rgba(10,13,17,.9));
}
.welcome-wrap{
  position:relative;height:100%;display:flex;flex-direction:column;justify-content:center;
  max-width:1180px;margin:0 auto;padding:4vh 6vw;gap:clamp(18px,3.4vh,40px);overflow:auto;
}
.eyebrow{display:flex;align-items:center;gap:.6em;font-size:.72rem;letter-spacing:.22em;color:var(--dim);font-weight:600}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}
.title{
  font-size:clamp(3rem,10vw,7.5rem);font-weight:800;letter-spacing:-.05em;line-height:.88;margin:.16em 0 .1em;
}
.title-accent{color:var(--accent)}
.subtitle{font-size:clamp(1rem,1.7vw,1.32rem);color:var(--dim);max-width:34ch;line-height:1.45}
.subtitle b{color:var(--text)}

.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:14px;max-width:920px}
.step{
  background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  border:1px solid var(--line);border-radius:var(--r);padding:18px 18px 20px;backdrop-filter:blur(8px);
}
.step-num{font-family:var(--mono);font-size:.75rem;color:var(--accent);letter-spacing:.1em;margin-bottom:.5em}
.step h3{font-size:1.02rem;margin-bottom:.4em}
.step p{font-size:.86rem;color:var(--dim);line-height:1.5}

.welcome-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.profile-summary{display:flex;align-items:center;justify-content:space-between;gap:18px;width:min(520px,100%);padding:11px 13px;border:1px solid var(--line);border-radius:9px;background:rgba(10,15,21,.68);backdrop-filter:blur(8px)}
.profile-summary-copy{display:grid;gap:2px;min-width:0}.profile-summary-copy>span{color:#58c7ff;font:700 .48rem var(--mono);letter-spacing:.14em}.profile-summary-copy strong{overflow:hidden;text-overflow:ellipsis;color:#fff;font:.82rem var(--mono)}.profile-summary-copy small{color:var(--dim2);font:.52rem var(--mono)}
.welcome-foot{font-size:.78rem;color:var(--dim2)}

/* Version, bottom right of the welcome screen. Quiet enough to ignore and
   legible enough to read out over a bug report. `pointer-events:none` so it
   can never eat a click meant for anything underneath it. */
.version-stamp{
  position:absolute;right:max(14px,2vw);bottom:max(12px,2vh);z-index:2;
  display:flex;align-items:baseline;gap:.55em;pointer-events:none;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;line-height:1;
  color:var(--dim2);text-align:right;
}
.version-stamp .version-num{color:var(--dim);font-weight:600;letter-spacing:.1em}
.version-stamp .build-stamp{opacity:.62}

/* ═══════════════ PANEL LAYOUT (draw / garage) ═══════════════ */
.panel-layout{display:grid;grid-template-columns:minmax(300px,368px) 1fr;height:100%;background:var(--bg)}
.side{
  background:var(--panel);border-right:1px solid var(--line);
  padding:26px 24px;display:flex;flex-direction:column;gap:20px;overflow:auto;
}
.side-head h2{font-size:1.5rem;margin:.3em 0 .35em}
.stage-tag{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;color:var(--accent)}
.side-lead{font-size:.85rem;color:var(--dim);line-height:1.55}
.side-lead strong{color:var(--text)}
.side-block h4{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim2);margin-bottom:.7em}
.side-block+.side-block{margin-top:-4px}
.race-library{min-width:0}.library-count{color:var(--dim2);font:500 .48rem var(--mono)}.library-save-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px}.library-save-row input{min-width:0;width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:5px;background:#0b1016;color:var(--text);padding:7px 8px;font:.62rem var(--mono)}.library-save-row input:focus{outline:none;border-color:var(--accent)}.library-list{display:grid;gap:5px;margin-top:7px;max-height:132px;overflow:auto}.library-item{display:grid;grid-template-columns:minmax(0,1fr) 26px 26px;gap:4px}.library-load,.library-share,.library-delete{border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.025);color:var(--dim);border-radius:5px;cursor:pointer}.library-load{display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:0;padding:6px 7px;text-align:left}.library-load b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#e4edf4;font:600 .57rem var(--mono)}.library-load small{flex:none;color:var(--dim2);font:.46rem var(--mono)}.library-delete{padding:0;color:#f17d73;font-size:.9rem}.library-share{padding:0;color:#7fd1a8;font-size:.78rem}.library-load:hover,.library-share:hover,.library-delete:hover{border-color:#4ea8de;color:#fff}.library-empty{margin:0;color:var(--dim2);font:.55rem/1.4 var(--mono)}
.library-import{width:100%;margin-top:6px;font-size:.55rem}

/* Share / import code dialog. */
.code-card{max-width:520px}
.code-box{
  width:100%;box-sizing:border-box;height:112px;resize:vertical;margin-bottom:8px;
  border:1px solid var(--line);border-radius:6px;background:#0b1016;color:var(--text);
  padding:8px 9px;font:.56rem/1.45 var(--mono);word-break:break-all
}
.code-box:focus{outline:none;border-color:var(--accent)}
.code-note{min-height:14px;margin-bottom:10px;font:.55rem var(--mono);color:var(--dim2)}
.code-note.ok{color:#7ce38b}.code-note.warn{color:#ffb020}
.side-actions{margin-top:auto;display:flex;gap:8px;flex-wrap:wrap;padding-top:12px}
.side-actions .btn{flex:1;min-width:110px}

.stage{position:relative;overflow:hidden;background:var(--bg2)}

.preset-row{display:flex;flex-wrap:wrap;gap:7px}
.chip{
  padding:.42em .8em;border-radius:99px;border:1px solid var(--line2);
  font-size:.8rem;color:var(--dim);transition:.15s;
}
.chip:hover{color:var(--text);border-color:var(--accent);background:rgba(255,213,74,.08)}

.slider-row{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.slider-row output{font-family:var(--mono);font-size:.78rem;color:var(--dim);min-width:52px;text-align:right}
/* the terrain brush, on the drawing screen */
.terrain-tools,.terrain-actions{display:flex;flex-wrap:wrap;gap:7px}
.terrain-tools{margin-bottom:12px}
.terrain-actions{margin-bottom:8px}
.chip.on{color:var(--text);border-color:var(--accent);background:rgba(255,213,74,.12)}
.chip:disabled{opacity:.4;pointer-events:none}
.terrain-sliders .slider-row{margin-bottom:8px}
.slider-k{font-size:.72rem;color:var(--dim2);min-width:56px}
.terrain-state{font:600 .62rem var(--mono);letter-spacing:.06em;color:var(--dim2);margin-left:6px;text-transform:none}
.terrain-state.on{color:#7ce38b}
.terrain-note{font-size:.72rem;line-height:1.45;color:var(--dim2);margin:0}
.elev-profile{display:block;width:100%;height:54px;margin:-4px 0 12px;border-radius:4px;background:rgba(255,255,255,.03)}
input[type=range]{
  -webkit-appearance:none;appearance:none;flex:1;height:4px;border-radius:2px;
  background:rgba(255,255,255,.14);outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);
  cursor:pointer;border:3px solid var(--panel);box-shadow:0 0 0 1px var(--accent);
}
input[type=range]::-moz-range-thumb{
  width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--panel);
}

/* analysis */
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;margin-bottom:14px}
.stat{display:flex;flex-direction:column;gap:1px}
.stat-k{font-size:.68rem;color:var(--dim2);text-transform:uppercase;letter-spacing:.08em}
.stat-v{font-family:var(--mono);font-size:.94rem;color:var(--text)}
.char-bar{height:5px;border-radius:3px;background:linear-gradient(90deg,#4ea8de,#7ce38b,#ffd54a,#ff6b57);position:relative;opacity:.35}
.char-fill{position:absolute;top:-3px;width:2px;height:11px;background:#fff;border-radius:1px;transform:translateX(-1px);
  box-shadow:0 0 8px rgba(255,255,255,.8);transition:width .3s}
.char-bar{margin-bottom:6px}
.char-labels{display:flex;justify-content:space-between;font-size:.66rem;color:var(--dim2);letter-spacing:.06em}
.char-verdict{font-size:.8rem;color:var(--dim);line-height:1.5;margin-top:10px}

/* draw stage */
#draw-canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair;touch-action:none}
.draw-hint{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;transition:opacity .3s}
.draw-hint.hidden{opacity:0}
.draw-hint-inner{text-align:center;color:var(--dim2)}
.draw-glyph{font-size:2.6rem;margin-bottom:.2em;color:var(--accent);opacity:.5}
.draw-hint p{font-size:1rem;color:var(--dim)}
.draw-error{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%) translateY(10px);
  background:rgba(232,72,60,.14);border:1px solid rgba(232,72,60,.45);color:#ffc9c3;
  padding:.6em 1.1em;border-radius:10px;font-size:.85rem;opacity:0;transition:.25s;pointer-events:none;
}
.draw-error.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ═══════════════ GARAGE ═══════════════ */
.garage-stage{overflow:hidden}
.garage-scroll{height:100%;overflow:auto;padding:26px 30px 40px}
.car-preview{
  position:relative;height:210px;margin-bottom:22px;border-radius:var(--r);
  background:radial-gradient(circle at 50% 45%,rgba(255,213,74,.07),transparent 62%),var(--panel2);
  border:1px solid var(--line);
}
#car-canvas{position:absolute;inset:0;width:100%;height:100%}
.car-spec{
  position:absolute;left:16px;bottom:12px;display:flex;gap:16px;flex-wrap:wrap;
  font-family:var(--mono);font-size:.76rem;color:var(--dim);
}
.car-spec span{white-space:nowrap}

.engineering-lab{margin:0 0 22px;padding:18px;border:1px solid rgba(255,213,74,.30);border-radius:var(--r);background:linear-gradient(135deg,rgba(255,213,74,.055),transparent 42%),var(--panel2)}
.lab-head{display:flex;justify-content:space-between;gap:22px;align-items:flex-start;margin-bottom:14px}.lab-head h3{font-size:1.05rem;margin-top:2px}.lab-head p{max-width:420px;color:var(--dim);font-size:.78rem;line-height:1.45}.lab-tag{font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;color:var(--accent)}
.lab-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.lab-card{padding:12px;border:1px solid var(--line);border-radius:10px;background:rgba(9,13,17,.48)}.lab-card-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.lab-card h4{font-size:.9rem}.lab-card p{font-size:.71rem;line-height:1.35;color:var(--dim);margin-top:3px}.lab-card-head>span{font-family:var(--mono);font-size:.62rem;color:var(--accent);padding-top:2px}
.cycle-chips{display:flex;gap:5px;flex-wrap:wrap;margin:9px 0}.cycle-chips button{font-size:.67rem;padding:4px 7px;border:1px solid var(--line);border-radius:6px;background:rgba(255,255,255,.035);color:var(--dim)}.cycle-chips button.on{border-color:var(--accent);color:var(--accent);background:rgba(255,213,74,.08)}
.design-canvas{width:100%;height:154px;display:block;border:1px solid rgba(255,255,255,.11);border-radius:7px;background:#10161d;cursor:crosshair;touch-action:none}.design-canvas.readonly{cursor:default}.canvas-key{display:flex;justify-content:space-between;gap:6px;font-family:var(--mono);font-size:.54rem;letter-spacing:.06em;color:var(--dim2);margin-top:6px}.canvas-key b{font-size:.6rem;color:#7ce38b}.platform-values{min-height:154px;display:grid;grid-template-columns:1fr 1fr;align-content:center;gap:9px 16px;font-family:var(--mono);font-size:.66rem;color:var(--dim)}.platform-values b{display:block;color:var(--text);font-size:.82rem;margin-top:2px}.material-card{background:radial-gradient(circle at 85% 20%,rgba(78,168,222,.10),transparent 42%),rgba(9,13,17,.48)}
.lab-controls{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:12px;margin-top:14px}.lab-controls label{display:flex;flex-direction:column;gap:7px;font-size:.72rem;color:var(--dim)}.lab-controls label span{display:flex;justify-content:space-between;gap:8px}.lab-controls b{font-family:var(--mono);font-weight:500;color:var(--accent)}.lab-controls input{width:100%;accent-color:var(--accent)}.lab-footer{display:flex;justify-content:space-between;gap:12px;margin-top:12px;font-size:.7rem;color:var(--dim2)}.lab-footer span:first-child{color:var(--accent)}

.parts-list{display:flex;flex-direction:column;gap:22px}
.part-head{display:flex;align-items:baseline;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.part-head h3{font-size:1.05rem}
.part-head span{font-size:.8rem;color:var(--dim2)}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:10px}
.opt{
  text-align:left;padding:13px 14px;border-radius:12px;border:1px solid var(--line);
  background:var(--panel2);transition:.16s;
}
.opt:hover{border-color:var(--line2);background:#1a212a}
.opt.on{border-color:var(--accent);background:rgba(255,213,74,.07);box-shadow:0 0 0 1px rgba(255,213,74,.25)}
.opt-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:.35em}
.opt-name{font-weight:600;font-size:.92rem}
.opt-cost{
  font-family:var(--mono);font-size:.72rem;color:var(--accent);
  border:1px solid rgba(255,213,74,.32);border-radius:6px;padding:0 .45em;
}
.opt-blurb{font-size:.79rem;color:var(--dim);line-height:1.45;margin-bottom:.55em}
.opt-effects{list-style:none;display:flex;flex-direction:column;gap:2px}
.opt-effects li{font-size:.75rem;padding-left:1.05em;position:relative;color:var(--dim)}
.opt-effects li::before{position:absolute;left:0}
.opt-effects .pro{color:#9adcae}
.opt-effects .pro::before{content:'+';color:var(--good)}
.opt-effects .con{color:#e0a49d}
.opt-effects .con::before{content:'−';color:var(--bad)}

.budget{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:13px 14px}
.budget-top{display:flex;justify-content:space-between;font-size:.8rem;color:var(--dim);margin-bottom:8px}
.budget-top strong{font-family:var(--mono);color:var(--text)}
.budget-bar{height:6px;border-radius:3px;background:rgba(255,255,255,.09);overflow:hidden}
.budget-fill{height:100%;background:var(--accent);transition:width .2s}
.budget-fill.over{background:var(--bad)}
.budget-warn{font-size:.75rem;color:var(--dim2);margin-top:7px}
.budget-warn.bad{color:#ffb4ac}

.perf-bars{display:flex;flex-direction:column;gap:7px}
.pbar{display:grid;grid-template-columns:80px 1fr 66px;align-items:center;gap:9px}
.pk{font-size:.75rem;color:var(--dim)}
.pt{height:5px;border-radius:3px;background:rgba(255,255,255,.09);overflow:hidden}
.pt i{display:block;height:100%;background:linear-gradient(90deg,#4ea8de,#ffd54a);transition:width .25s}
.pv{font-family:var(--mono);font-size:.72rem;color:var(--dim2);text-align:right}

.fit{display:flex;align-items:center;gap:14px}
.fit-ring{
  --fit:50%;
  width:64px;height:64px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--accent) var(--fit),rgba(255,255,255,.08) 0);
  position:relative;
}
.fit-ring::after{content:'';position:absolute;inset:5px;border-radius:50%;background:var(--panel)}
.fit-ring span{position:relative;z-index:1;font-family:var(--mono);font-size:1.1rem;font-weight:600}
.fit-ring.good{background:conic-gradient(var(--good) var(--fit),rgba(255,255,255,.08) 0)}
.fit-ring.bad{background:conic-gradient(var(--bad) var(--fit),rgba(255,255,255,.08) 0)}
.fit p{font-size:.82rem;color:var(--dim);line-height:1.5}
.dim{color:var(--dim2);font-size:.9em}
.dim.good{color:#7ce38b}

/* ═══════════════ RACE ═══════════════ */
#game-canvas{position:absolute;inset:0;width:100%;height:100%;cursor:none;touch-action:none;display:block}
.hud{position:absolute;inset:0;pointer-events:none;font-family:var(--mono)}
.hud-tl{position:absolute;top:18px;left:18px;display:flex;gap:10px;align-items:flex-start}
.hud-cards{display:flex;gap:10px;align-items:flex-start}
.hud-tr{position:absolute;top:18px;right:18px;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.hud-bl{position:absolute;bottom:18px;left:18px}
.hud-br{position:absolute;bottom:18px;right:18px}
.hud-tl,.hud-tr,.hud-bl,.hud-br,.hud-center{z-index:2}

.player-markers{position:absolute;inset:0;overflow:hidden;z-index:1;pointer-events:none}
.player-marker{position:absolute;left:0;top:0;transform:translate(-50%,-100%);max-width:180px;
  padding:4px 8px 5px;border:1px solid color-mix(in srgb,var(--marker-colour,#58c7ff) 72%,white 10%);
  border-radius:6px;background:rgba(7,11,15,.82);box-shadow:0 3px 12px rgba(0,0,0,.38);
  color:#fff;font:600 .68rem var(--mono);letter-spacing:.025em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-marker::before{content:'';display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;
  background:var(--marker-colour,#58c7ff);box-shadow:0 0 7px var(--marker-colour,#58c7ff);vertical-align:1px}
.player-marker::after{content:'';position:absolute;left:50%;bottom:-5px;width:8px;height:8px;
  transform:translateX(-50%) rotate(45deg);border-right:1px solid var(--marker-colour,#58c7ff);
  border-bottom:1px solid var(--marker-colour,#58c7ff);background:rgba(7,11,15,.82)}

.hud-card{
  background:rgba(10,13,17,.72);border:1px solid var(--line);border-radius:11px;
  padding:9px 13px;backdrop-filter:blur(10px);
}
.hud-k{font-size:.6rem;letter-spacing:.16em;color:var(--dim2)}
.hud-v{font-size:1.7rem;font-weight:600;line-height:1;margin-top:2px}
.hud-v small{font-size:.85rem;color:var(--dim2);font-weight:400}
.time-card{min-width:158px}
.hud-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.hud-row+.hud-row{margin-top:2px}
.hud-time{font-size:.92rem}
.hud-row.best .hud-time{color:var(--accent)}

#minimap{width:168px;height:132px;background:rgba(10,13,17,.62);border:1px solid var(--line);border-radius:11px}
.sector-panel{width:168px;padding:8px 10px;background:rgba(10,13,17,.72);border:1px solid var(--line);border-radius:9px;font-size:.68rem}
.sector-head{display:flex;justify-content:space-between;color:var(--dim2);letter-spacing:.12em;font-size:.56rem;margin-bottom:4px}.sector-head small{font-size:.52rem}
.sector-row{display:grid;grid-template-columns:20px 1fr auto;gap:6px;align-items:center;line-height:1.55;color:var(--dim2)}.sector-row b{font-weight:500;color:var(--text)}.sector-row i{font-style:normal;font-size:.55rem;letter-spacing:.04em}.sector-row .personal{color:#7ce38b}.sector-row .best{color:#c084fc}.sector-row .slow{color:#f6c453}
.standings{
  background:rgba(10,13,17,.72);border:1px solid var(--line);border-radius:11px;
  padding:8px 10px;width:clamp(220px,22vw,290px);backdrop-filter:blur(10px);
}
.stand-row{display:grid;grid-template-columns:18px 8px minmax(44px,1fr) auto auto auto;gap:7px;align-items:center;font-size:.76rem;padding:1.5px 0;color:var(--dim)}
/* seconds owed to the stewards, on the line of the driver owing them */
.stand-row .sx{font:700 .62rem var(--mono);color:#f0968d;letter-spacing:.02em;white-space:nowrap}
.stand-row .sx:empty{display:none}
.stand-row.out{opacity:.45}
.stand-row.out .sg{color:#f6c453;font-weight:700}
.stand-row.me .sx{color:#ff8d86}
/* strategy: the compound on the car and how many laps since it was in. A gap
   during a long race means very little without these two next to it. */
.stand-row .ss{display:inline-flex;align-items:baseline;gap:2px;font:700 .56rem var(--mono);
  letter-spacing:.04em;color:var(--dim2);border:1px solid rgba(255,255,255,.10);
  border-radius:4px;padding:1px 4px;line-height:1.35;white-space:nowrap}
.stand-row .ss i{font-style:normal;font-weight:500;font-size:.54rem;opacity:.85}
.stand-row .ss.fresh{color:#7ce38b;border-color:rgba(124,227,139,.45);background:rgba(124,227,139,.10)}
.stand-row .ss.warm{color:#cfe9ff;border-color:rgba(78,168,222,.32)}
.stand-row .ss.in{color:#0b1016;background:var(--accent);border-color:var(--accent)}
.stand-row .ss.owed{box-shadow:inset 0 -2px 0 var(--accent2)}
.stand-row.me{color:var(--accent);font-weight:600}
.stand-row.remote .sn{color:var(--text);font-weight:600}
.stand-row .sp{text-align:right;color:var(--dim2)}
.stand-row.me .sp{color:var(--accent)}
.stand-row .sc{width:8px;height:8px;border-radius:2px}
.stand-row .sn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* three letters, the way a real tower writes a driver who is not you */
.stand-row .sn.tag{font-weight:600;letter-spacing:.08em;color:var(--dim2)}
.stand-row .sg{font-size:.68rem;color:var(--dim2)}

.tyres{background:rgba(10,13,17,.72);border:1px solid var(--line);border-radius:11px;padding:10px 12px;min-width:170px;backdrop-filter:blur(10px)}
.tyre-k{font-size:.6rem;letter-spacing:.16em;color:var(--dim2);margin-bottom:6px}
.tyre-bar{display:grid;grid-template-columns:38px 1fr;gap:8px;align-items:center;font-size:.62rem;color:var(--dim2)}
.tyre-bar+.tyre-bar{margin-top:4px}
.tb{height:5px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}
.tb i{display:block;height:100%;background:var(--good);transition:width .2s}
.tyre-name{font-size:.68rem;color:var(--dim);margin-top:7px}
.systems-readout{font-family:var(--mono);font-size:.56rem;letter-spacing:.08em;color:var(--dim2);margin-top:5px}

.race-telemetry-panel{
  width:304px;background:rgba(7,11,16,.82);border:1px solid var(--line);border-radius:14px;
  padding:10px 11px 8px;backdrop-filter:blur(12px);box-shadow:0 10px 34px rgba(0,0,0,.24)
}
.race-telemetry-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.race-telemetry-head>span{font:.58rem var(--mono);letter-spacing:.15em;color:var(--dim2)}
.race-telemetry-readout{display:flex;align-items:baseline;gap:4px;font-family:var(--mono)}
.race-telemetry-readout b{font-size:1.45rem;line-height:1;color:#eef3f7}
.race-telemetry-readout small{font-size:.52rem;color:var(--dim2);font-weight:400}
.race-telemetry-readout em{display:grid;place-items:center;min-width:23px;height:23px;margin-left:4px;border:1px solid rgba(255,213,74,.38);border-radius:5px;color:var(--accent);background:rgba(255,213,74,.07);font:.68rem var(--mono);font-style:normal}
#race-telemetry-chart{display:block;width:100%;height:205px;border:1px solid rgba(255,255,255,.07);border-radius:7px;background:#05090d}
.race-telemetry-legend{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:7px;color:var(--dim2);font:.49rem var(--mono)}
.race-telemetry-legend span:before{content:'';display:inline-block;width:10px;height:2px;margin:0 4px 2px 0;background:currentColor}
.race-telemetry-legend .speed-trace{color:#ffd54a}.race-telemetry-legend .throttle-trace{color:#7ce38b}.race-telemetry-legend .brake-trace{color:#e8483c}

.hud-center{
  position:absolute;top:22%;left:50%;transform:translate(-50%,-6px);
  font-size:1.5rem;font-weight:700;letter-spacing:.08em;opacity:0;transition:opacity .25s,transform .25s;
  text-shadow:0 3px 18px rgba(0,0,0,.85);white-space:nowrap;
}
.hud-center.show{opacity:1;transform:translate(-50%,0)}


.assist-flags{position:absolute;bottom:104px;left:50%;transform:translateX(-50%);display:flex;gap:6px}
.flag{font-size:.62rem;letter-spacing:.12em;padding:.25em .6em;border-radius:5px;border:1px solid currentColor}
.flag.tc{color:#ffd54a}
.flag.abs{color:#4ea8de}
.flag.off{color:#e8483c}
/* the pit entry, announced before it arrives rather than after */
.flag.pit{color:#8ab4ff}
.flag.pit.go{color:#0b1016;background:#7ce38b;border-color:#7ce38b;font-weight:700}

/* countdown */
.countdown{
  position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;
  opacity:0;transition:opacity .4s;
}
.countdown.show{opacity:1}
.lights{display:flex;gap:14px;background:rgba(8,10,14,.7);padding:16px 22px;border-radius:16px;border:1px solid var(--line)}
.light{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.07);border:1px solid var(--line);transition:.15s}
.light.on{background:#e8483c;box-shadow:0 0 22px rgba(232,72,60,.85);border-color:#ff8b80}
.count-text{
  position:absolute;font-size:4.2rem;font-weight:800;letter-spacing:.1em;color:var(--good);
  opacity:0;transition:.2s;text-shadow:0 0 40px rgba(124,227,139,.5);
}
.count-text.go{opacity:1}
.count-text.ready{opacity:1;font-size:.82rem;letter-spacing:.22em;color:var(--accent);text-shadow:none;
  transform:translateY(62px);font-family:var(--mono)}

/* ═══════════════ OVERLAYS ═══════════════ */
.overlay{
  position:fixed;inset:0;background:rgba(5,7,10,.78);backdrop-filter:blur(8px);
  display:grid;place-items:center;padding:4vh 4vw;z-index:60;
  opacity:0;pointer-events:none;transition:opacity .25s;
}
.overlay.show{opacity:1;pointer-events:auto}
.overlay-card{
  background:var(--panel);border:1px solid var(--line2);border-radius:18px;
  padding:28px 30px;width:min(460px,100%);max-height:92vh;overflow:auto;
  box-shadow:0 30px 90px rgba(0,0,0,.6);
}
.overlay-card.wide{width:min(1080px,100%)}
.overlay-card h2{font-size:1.6rem;margin-bottom:.6em}
.overlay-actions{display:flex;flex-direction:column;gap:9px;margin-top:6px}
.overlay-actions.left{flex-direction:row;flex-wrap:wrap;margin-top:16px}
.overlay-actions.left .btn{flex:1;min-width:130px}
.overlay-foot{font-size:.76rem;color:var(--dim2);margin-top:14px;text-align:center}

.settings-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.settings-head h2{margin:0}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px;flex-wrap:wrap}
.tab{padding:.5em .9em;font-size:.86rem;color:var(--dim);border-bottom:2px solid transparent;margin-bottom:-1px}
.tab:hover{color:var(--text)}
.tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.tab-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:18px 28px}
.tab-body.hidden{display:none}
.settings-card{min-height:min(560px,80vh)}
.settings-foot{display:flex;justify-content:space-between;gap:10px;margin-top:24px;padding-top:16px;border-top:1px solid var(--line)}

.field{display:flex;flex-direction:column;gap:7px}
.field-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.field-label{font-size:.85rem;font-weight:500}
.field-out{font-family:var(--mono);font-size:.74rem;color:var(--dim2)}
.field-help{font-size:.73rem;color:var(--dim2);line-height:1.45}
.seg{display:flex;gap:4px;background:rgba(255,255,255,.05);padding:3px;border-radius:9px;flex-wrap:wrap}
.seg-btn{flex:1;padding:.42em .6em;border-radius:6px;font-size:.76rem;color:var(--dim);white-space:nowrap;min-width:0}
.seg-btn:hover{color:var(--text)}
.seg-btn.on{background:rgba(255,213,74,.16);color:var(--accent)}
.switch{width:44px;height:25px;border-radius:99px;background:rgba(255,255,255,.12);position:relative;transition:.18s;align-self:flex-start}
.switch i{position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:#8d97a6;transition:.18s}
.switch.on{background:rgba(255,213,74,.35)}
.switch.on i{left:22px;background:var(--accent)}

/* results */
.result-online-status{margin:-2px 0 8px;color:#58c7ff;font:.66rem var(--mono);letter-spacing:.04em}
.result-head{display:flex;align-items:center;gap:20px;margin-bottom:22px}
.result-pos{font-size:3.6rem;font-weight:800;line-height:1;color:var(--accent);font-family:var(--mono)}
.result-pos small{font-size:1.1rem;margin-left:.1em}
.result-head h2{margin:0}
.result-head p{color:var(--dim);font-size:.88rem;margin-top:.25em}
.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.result-col h4{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim2);margin-bottom:12px}
.result-col h4 small{color:var(--accent);letter-spacing:0}
.res-table{width:100%;border-collapse:collapse;font-size:.85rem}
.res-table td{padding:6px 4px;border-bottom:1px solid rgba(255,255,255,.06)}
.res-table tr.me{color:var(--accent);font-weight:600}
.res-table td.p{width:26px;color:var(--dim2);font-family:var(--mono)}
.res-table tr.me td.p{color:var(--accent)}
.res-table td.t,.res-table td.g{font-family:var(--mono);font-size:.78rem;text-align:right;color:var(--dim)}
.res-table tr.me td.t,.res-table tr.me td.g{color:var(--accent)}
.res-table .sc{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:7px}
.res-stats{margin-top:16px}
.laps{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:5px}
.laps li{display:flex;justify-content:space-between;font-size:.76rem;color:var(--dim);font-family:var(--mono)}
.laps li b{color:var(--text)}
.mini-stats{display:flex;gap:18px;margin-top:12px;font-size:.78rem;color:var(--dim);font-family:var(--mono)}
.mini-stats b{color:var(--text)}

@media (max-height:820px){
  .hud-tr .sector-panel{display:none}
}
@media (max-height:700px){
  .hud-tr #minimap{display:none}
}

/* ── one line of feedback, wherever the game is ──────────────────────────── */
/* Sits above the undo bar, and above the driving deck on a phone, because the
   bottom of a phone screen is a control surface rather than a place to read. */
.toast{position:fixed;left:50%;bottom:calc(var(--controls-h, 0px) + 78px);z-index:81;
  padding:8px 15px;border:1px solid var(--line);border-radius:9px;
  background:rgba(10,13,17,.94);backdrop-filter:blur(12px);box-shadow:0 10px 28px rgba(0,0,0,.42);
  color:var(--text);font-size:.78rem;max-width:min(460px,92vw);text-align:center;
  transform:translate(-50%,8px);opacity:0;pointer-events:none;transition:opacity .18s,transform .18s}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ── undo, for a button that replaced something somebody built ───────────── */
.undo-bar{position:fixed;left:50%;bottom:calc(var(--controls-h, 0px) + 26px);z-index:80;display:none;align-items:center;gap:12px;
  padding:9px 10px 9px 15px;border:1px solid var(--line);border-radius:11px;
  background:rgba(10,13,17,.94);backdrop-filter:blur(12px);box-shadow:0 12px 34px rgba(0,0,0,.45);
  transform:translateX(-50%);max-width:min(520px,92vw)}
.undo-bar.show{display:flex}
.undo-msg{font-size:.78rem;color:var(--dim);line-height:1.35}
.undo-btn{flex:none;padding:5px 11px;border:1px solid var(--accent);border-radius:7px;
  background:rgba(255,213,74,.10);color:var(--accent);font:700 .6rem var(--mono);letter-spacing:.12em;
  cursor:pointer}
.undo-btn:hover{background:var(--accent);color:#0b1016}

.dcard{background:var(--panel2);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:9px;padding:10px 13px}
.dcard.locked{opacity:.4}
.dtag{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;margin-bottom:.2em}
.dtitle{font-size:.92rem;font-weight:600;line-height:1.3}
.dbody{font-size:.8rem;color:var(--dim);margin-top:.2em;line-height:1.4}
.dsep{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim2);margin:12px 0 2px}

@media (max-width:980px){
  .panel-layout{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .side{border-right:none;border-bottom:1px solid var(--line);max-height:46vh}
  .result-grid{grid-template-columns:1fr}
  .hud-tr{top:12px;right:12px}
  .hud-tr #minimap,.hud-tr .sector-panel{display:none}
  .standings{width:clamp(190px,38vw,250px)}
  .race-telemetry-panel{width:270px}
  #race-telemetry-chart{height:184px}
}
@media (max-width:620px){
  .welcome-wrap{padding:3vh 6vw}
  .steps{grid-template-columns:1fr}
  .step{padding:13px 14px}
  .step p{font-size:.8rem}
  .hud-tl{transform:scale(.82);transform-origin:top left}
  .hud-tr{transform:scale(.82);transform-origin:top right}
  .hud-br{transform:scale(.82);transform-origin:bottom right}
  .lab-grid,.lab-controls{grid-template-columns:1fr}
  .lab-head{display:block}.lab-head p{margin-top:8px}
}

/* ── live-trace channel picker (Settings ▸ Display) ───────────────────────── */
.chan-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:5px;width:100%}
.chan-chip{position:relative;display:flex;align-items:center;justify-content:space-between;gap:5px;
  padding:6px 8px;border:1px solid var(--line);border-radius:6px;background:rgba(255,255,255,.03);
  color:var(--dim);font:600 .62rem var(--mono);cursor:pointer;text-align:left}
.chan-chip:hover{border-color:#4ea8de;color:#cfe0ee}
.chan-chip.on{background:rgba(255,255,255,.07)}
.chan-chip u{min-width:14px;height:14px;line-height:14px;border-radius:50%;text-decoration:none;
  font:600 .55rem var(--mono);text-align:center;background:currentColor;color:#0b1016}
.chan-chip u:empty{background:transparent}

/* ── the grid screen: drone footage behind a set-up panel ─────────────────── */
#screen-grid{position:relative;overflow:hidden;padding:0}
#grid-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.grid-vignette{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,rgba(6,9,13,.10) 0%,rgba(6,9,13,.62) 58%,rgba(6,9,13,.88) 100%)}
.grid-panel{position:relative;z-index:2;width:min(720px,calc(100% - 32px));max-height:calc(100vh - 48px);
  margin:24px auto;overflow-y:auto;padding:20px 22px;border:1px solid rgba(255,255,255,.13);border-radius:14px;
  background:rgba(9,13,18,.80);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 24px 70px rgba(0,0,0,.55)}
.grid-head{margin:0 0 16px;padding-bottom:13px;border-bottom:1px solid rgba(255,255,255,.10)}
.grid-kicker{color:var(--accent);font:600 .60rem var(--mono);letter-spacing:.16em}
.grid-head h2{margin:6px 0 3px;font-size:1.5rem;letter-spacing:-.01em}
.grid-lead{margin:0;color:var(--dim);font:.72rem var(--mono)}
.grid-fields{display:grid;gap:13px}
.grid-field{display:grid;gap:6px}
.grid-field>span{display:flex;flex-direction:column;gap:2px;color:var(--dim2);font:600 .64rem var(--mono);letter-spacing:.05em}
.grid-field>span i{font-style:normal;font-weight:400;font-size:.60rem;color:var(--dim);letter-spacing:0;line-height:1.4}
.grid-seg{display:flex;gap:4px;flex-wrap:wrap;padding:3px;border-radius:9px;background:rgba(255,255,255,.05)}
.grid-seg-btn{flex:1;min-width:64px;padding:.46em .5em;border:0;border-radius:6px;background:transparent;
  color:var(--dim);font:600 .68rem var(--mono);cursor:pointer;white-space:nowrap}
.grid-seg-btn:hover{color:var(--text)}
.grid-seg-btn.on{background:rgba(255,213,74,.14);color:var(--accent);box-shadow:inset 0 0 0 1px rgba(255,213,74,.35)}
.grid-range{display:flex;align-items:center;gap:10px}
.grid-range input{flex:1;accent-color:var(--accent)}
.grid-range output{min-width:104px;text-align:right;color:#e5edf4;font:600 .68rem var(--mono)}
.grid-weather-note{margin:-4px 0 2px;padding:7px 9px;border-left:2px solid var(--accent);border-radius:0 5px 5px 0;
  background:rgba(255,213,74,.07);color:#e8d9a8;font:.63rem/1.45 var(--mono)}
.grid-actions{display:flex;gap:10px;justify-content:space-between;align-items:center;
  margin-top:18px;padding-top:15px;border-top:1px solid rgba(255,255,255,.10);
  /* the one button that matters stays on screen however long the panel is */
  position:sticky;bottom:-20px;margin-bottom:-20px;padding-bottom:18px;background:rgba(9,13,18,.96)}
/* the party lobby, on the grid */
.grid-party{margin:0 0 16px;padding:11px 12px;border:1px solid rgba(88,199,255,.22);border-radius:10px;
  background:linear-gradient(135deg,rgba(88,199,255,.06),rgba(255,213,74,.03))}
.grid-party-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.grid-party-k{color:#8fd8ff;font:600 .6rem var(--mono);letter-spacing:.14em}
.grid-code{display:flex;align-items:baseline;gap:8px;padding:4px 10px;border:1px dashed rgba(255,213,74,.45);border-radius:7px;
  background:rgba(255,213,74,.06);color:var(--accent);font:800 .95rem var(--mono);letter-spacing:.22em;cursor:pointer}
.grid-code i{font:500 .52rem var(--mono);font-style:normal;letter-spacing:.08em;color:var(--dim);text-transform:uppercase}
.grid-code:hover{border-style:solid}
.grid-roster{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.grid-roster li{display:grid;grid-template-columns:10px minmax(0,1fr) auto;align-items:center;gap:10px;padding:7px 9px;
  border:1px solid rgba(255,255,255,.07);border-radius:7px;background:rgba(255,255,255,.02);animation:grid-seat-in .35s ease both}
.grid-roster li.is-me{border-color:rgba(255,213,74,.28)}
.grid-roster-dot{width:9px;height:9px;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.08)}
.grid-roster-name{min-width:0;display:flex;align-items:baseline;gap:8px}
.grid-roster-name b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.84rem}
.grid-roster-name small{color:var(--dim2);font:.56rem var(--mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.grid-roster-state{font:600 .58rem var(--mono);letter-spacing:.12em;color:#ffb020}
.grid-roster li.is-ready .grid-roster-state{color:var(--good)}
@keyframes grid-seat-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.btn.grid-go-start{animation:grid-go-pulse 1.6s ease-in-out infinite}
@keyframes grid-go-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,213,74,.0)}50%{box-shadow:0 0 0 6px rgba(255,213,74,.22)}}
@media (prefers-reduced-motion:reduce){.grid-roster li,.btn.grid-go-start{animation:none}}
@media(max-width:640px){
  .grid-panel{margin:12px auto;padding:15px 14px;max-height:calc(100vh - 24px)}
  .grid-range output{min-width:78px}
  .grid-actions{flex-direction:column-reverse;align-items:stretch}
}

/* ═══════════════ STORY MODE / FIXED-CIRCUIT TIME TRIALS ═══════════════ */
.btn-secondary{border-color:rgba(88,199,255,.45);background:rgba(88,199,255,.09);color:#bfeaff}
.btn-secondary:hover{border-color:#58c7ff;background:rgba(88,199,255,.16);color:#fff}
.story-screen{overflow:auto;background:radial-gradient(circle at 12% 8%,rgba(78,168,222,.13),transparent 34%),radial-gradient(circle at 88% 18%,rgba(255,213,74,.08),transparent 30%),#080c11}
.story-shell{width:min(1240px,calc(100% - 40px));margin:0 auto;padding:38px 0 64px}
.story-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.story-head h2{margin-top:7px;font-size:clamp(2rem,4vw,3.8rem);line-height:.95;letter-spacing:-.045em}
.story-head p{margin-top:12px;color:var(--dim);font-size:.85rem}
.story-tabs{display:flex;gap:5px;margin:24px 0 18px;padding:4px;width:max-content;border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.025)}
.story-tab{border:0;border-radius:6px;padding:9px 14px;background:transparent;color:var(--dim);font:600 .62rem var(--mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.story-tab.active{background:var(--accent);color:#11161b}
.story-pane{display:none}.story-pane.active{display:block}
.story-progress{display:flex;align-items:center;gap:12px;margin-bottom:15px;color:var(--dim);font:.62rem var(--mono)}
.story-progress .progress-track{height:5px;flex:1;max-width:360px;border-radius:9px;background:rgba(255,255,255,.08);overflow:hidden}
.story-progress .progress-track i{display:block;height:100%;background:linear-gradient(90deg,#58c7ff,var(--accent))}
.challenge-grid,.trial-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.challenge-card,.trial-card{position:relative;min-width:0;border:1px solid var(--line);border-radius:12px;background:linear-gradient(145deg,rgba(19,27,36,.94),rgba(10,15,21,.94));overflow:hidden}
.challenge-card{display:flex;flex-direction:column;min-height:310px;padding:18px}
.challenge-card.completed{border-color:rgba(124,227,139,.34)}
.challenge-card.locked{filter:saturate(.4);opacity:.52}
.challenge-card .challenge-no{font:700 .55rem var(--mono);letter-spacing:.16em;color:var(--accent)}
.challenge-card.completed .challenge-no{color:#7ce38b}
.challenge-card h3,.trial-card h3{margin-top:10px;font-size:1.2rem;letter-spacing:-.02em}
.challenge-card>p,.trial-card>p{margin-top:7px;color:var(--dim);font-size:.7rem;line-height:1.5}
.challenge-lesson{margin:13px 0 4px;padding:9px 10px;border-left:2px solid #58c7ff;background:rgba(88,199,255,.055);color:#c9dbe7;font-size:.66rem;line-height:1.45}
.challenge-specs{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:13px 0 16px}
.challenge-specs span{padding:7px;border:1px solid rgba(255,255,255,.07);border-radius:6px;color:var(--dim2);font:.49rem var(--mono);text-transform:uppercase;letter-spacing:.07em}
.challenge-specs b{display:block;margin-top:3px;color:#e8edf1;font-size:.64rem;letter-spacing:0;text-transform:none}
.challenge-card .btn{margin-top:auto;width:100%}
.challenge-best{margin:-8px 0 12px;color:#7ce38b;font:.56rem var(--mono)}
.trial-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:16px}
.trial-intro h3{font-size:1.15rem}.trial-intro p{margin-top:4px;color:var(--dim);font-size:.7rem}
.driver-name{display:grid;gap:5px;color:var(--dim2);font:.52rem var(--mono);letter-spacing:.08em;text-transform:uppercase}
.driver-name input{width:180px;border:1px solid var(--line);border-radius:6px;background:#0b1016;color:var(--text);padding:8px 9px;font:.66rem var(--mono)}
.driver-name input[readonly]{color:#fff;border-color:rgba(88,199,255,.3);cursor:default}.trial-driver-profile{display:flex;align-items:flex-end;gap:7px}
.trial-card{padding:18px}
.trial-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.trial-tag{color:#58c7ff;font:.52rem var(--mono);letter-spacing:.12em}
.trial-card .challenge-specs{margin-bottom:13px}
.leaderboard{margin:12px 0;border-top:1px solid var(--line)}
.leaderboard-row{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:7px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.055);font:.57rem var(--mono)}
.leaderboard-row .rank{color:var(--dim2)}.leaderboard-row .driver{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.leaderboard-row .lap{color:var(--accent)}
.leaderboard-empty{padding:14px 0;color:var(--dim2);font:.56rem var(--mono)}
.trial-card .btn{width:100%;margin-top:4px}
.story-brief{margin:0 0 12px;padding:11px 12px;border:1px solid rgba(88,199,255,.25);border-radius:8px;background:rgba(88,199,255,.06)}
.story-brief strong{display:block;color:#bfeaff;font:.62rem var(--mono);letter-spacing:.08em;text-transform:uppercase}
.story-brief p{margin-top:5px;color:var(--dim);font-size:.65rem;line-height:1.45}
.story-brief .brief-metrics{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.story-brief .brief-metrics span{padding:4px 6px;border-radius:4px;background:rgba(255,255,255,.05);color:#e3ebf0;font:.54rem var(--mono)}
.story-result{margin:12px 0 0;padding:12px 14px;border:1px solid rgba(88,199,255,.25);border-radius:8px;background:rgba(88,199,255,.055)}
.story-result.pass{border-color:rgba(124,227,139,.42);background:rgba(124,227,139,.07)}
.story-result.fail{border-color:rgba(241,125,115,.38);background:rgba(241,125,115,.06)}
.story-result b{display:block;font-size:.8rem}.story-result p{margin-top:4px;color:var(--dim);font-size:.65rem}
.race-story-clock{position:fixed;left:50%;top:15px;transform:translateX(-50%);z-index:8;padding:8px 12px;border:1px solid rgba(88,199,255,.28);border-radius:7px;background:rgba(4,8,12,.86);backdrop-filter:blur(8px);text-align:center;pointer-events:none}
.race-story-clock span{display:block;color:#58c7ff;font:.48rem var(--mono);letter-spacing:.13em}.race-story-clock b{font:.82rem var(--mono);color:#fff}
@media(max-width:920px){.challenge-grid,.trial-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.story-shell{width:min(100% - 24px,1240px);padding-top:24px}}
@media(max-width:620px){.story-head,.trial-intro{align-items:stretch;flex-direction:column}.challenge-grid,.trial-grid{grid-template-columns:1fr}.story-tabs{width:100%}.story-tab{flex:1}.driver-name input{width:100%;box-sizing:border-box}}

/* local driver profile and save management */
.profile-overlay{z-index:70;display:grid;place-items:center;padding:18px}.profile-card{width:min(570px,100%);max-height:min(720px,calc(100vh - 36px));overflow:auto;padding:23px}.profile-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.profile-card h2{margin:3px 0 5px;font-size:1.4rem}.profile-card-head p,.profile-explain{color:var(--dim);font-size:.7rem;line-height:1.5}.profile-close{border:0;background:transparent;color:var(--dim);font-size:1.35rem;cursor:pointer}.profile-mode{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:18px 0}.profile-choice{display:grid;gap:5px;padding:13px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.025);color:var(--text);text-align:left;cursor:pointer}.profile-choice.active{border-color:#58c7ff;background:rgba(88,199,255,.08)}.profile-choice b{font:.7rem var(--mono)}.profile-choice span{color:var(--dim);font-size:.6rem;line-height:1.4}.profile-name-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}.profile-name-row input{min-width:0;border:1px solid var(--line);border-radius:6px;background:#0b1016;color:#fff;padding:10px;font:.72rem var(--mono)}.profile-save-status{margin:16px 0 9px;padding:11px;border:1px solid var(--line);border-radius:7px;color:var(--dim);font:.6rem/1.5 var(--mono)}.profile-actions{display:flex;flex-wrap:wrap;gap:7px}.profile-danger{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}.profile-danger p{margin-bottom:8px;color:var(--dim2);font-size:.59rem}.profile-feedback{min-height:18px;margin-top:9px;color:#7ce38b;font:.57rem var(--mono)}
@media(max-width:620px){.profile-summary{align-items:stretch;flex-direction:column}.profile-mode{grid-template-columns:1fr}.profile-name-row{grid-template-columns:1fr}.trial-driver-profile{align-items:stretch;flex-direction:column}}

/* ═══════════════ THE LAB PROGRAM ═══════════════ */
.challenge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:12px}
.chapter{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 17px;display:flex;flex-direction:column;gap:8px}
.chapter.done{border-color:rgba(124,227,139,.4);background:linear-gradient(180deg,rgba(124,227,139,.05),transparent 60%)}
.chapter.locked{opacity:.45}
.chapter header{display:flex;align-items:flex-start;gap:11px}
.ch-n{font:700 .78rem var(--mono);color:var(--accent);letter-spacing:.06em;padding-top:2px}
.chapter h3{font-size:1.02rem;line-height:1.2}
.ch-idea{font-size:.75rem;color:var(--dim);margin-top:2px}
.ch-tick{margin-left:auto;color:var(--good);font-size:1.05rem}
.ch-relation code{font:.68rem var(--mono);color:var(--blue);background:rgba(78,168,222,.08);
  border:1px solid rgba(78,168,222,.2);border-radius:5px;padding:2px 7px;display:inline-block}
.ch-circuit{font-size:.76rem;color:var(--text)}
.ch-char{font-size:.74rem;color:var(--dim);line-height:1.5}
.ch-req{font:600 .68rem var(--mono);letter-spacing:.04em;color:var(--dim2);
  border-top:1px solid var(--line);padding-top:8px;margin-top:2px}
.ch-req.all{color:var(--good)}
.ch-req.open{color:var(--accent)}
.ch-rec{font-size:.74rem;color:var(--dim)}
.ch-locked{font-size:.76rem;color:var(--dim2)}
.chapter .btn{margin-top:auto;align-self:flex-start}
.story-progress{display:flex;align-items:center;gap:12px;margin-bottom:14px;font:600 .72rem var(--mono);color:var(--dim)}
.prog-bar{flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,.07);overflow:hidden}
.prog-bar i{display:block;height:100%;background:var(--accent);transition:width .4s ease}

/* the briefing */
.brief-card{width:min(980px,100%);padding:24px 26px}
.brief-head{position:relative;padding-right:38px;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:16px}
.brief-head h2{font-size:1.5rem;margin:.45em 0 .3em}
.brief-relation{font-size:.82rem;color:var(--dim)}
.brief-relation code{font:.74rem var(--mono);color:var(--blue);background:rgba(78,168,222,.08);
  border:1px solid rgba(78,168,222,.2);border-radius:5px;padding:2px 8px;margin-left:8px}
.brief-x{position:absolute;top:-2px;right:-6px}
.brief-body{display:grid;grid-template-columns:1.55fr 1fr;gap:20px}
.brief-teach p{font-size:.86rem;line-height:1.65;color:var(--text);margin-bottom:.85em}
.brief-look{border-left:2px solid var(--accent);background:rgba(255,213,74,.06);padding:8px 12px;
  font-size:.78rem!important;color:var(--dim)!important}
.brief-side{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:14px 15px}
.brief-side h4{font:600 .66rem var(--mono);letter-spacing:.1em;color:var(--accent);text-transform:uppercase;margin-bottom:.6em}
.brief-side h4+.brief-obj{margin-top:0}
.brief-char{font-size:.76rem;color:var(--dim);line-height:1.5;margin-bottom:12px}
.brief-facts>div{display:flex;justify-content:space-between;gap:10px;font-size:.75rem;padding:5px 0;border-bottom:1px solid var(--line)}
.brief-facts dt{color:var(--dim2)}
.brief-facts dd{color:var(--text);text-align:right}
.brief-obj{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:7px 9px;margin-top:7px;
  border-radius:7px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.brief-obj.ok{border-color:rgba(124,227,139,.45);background:rgba(124,227,139,.07)}
.brief-obj b{font-size:.75rem}
.brief-obj span{grid-column:1;font:.66rem var(--mono);color:var(--dim2)}
.brief-obj i{grid-row:1/3;grid-column:2;align-self:center;font:600 .78rem var(--mono);font-style:normal;color:var(--text)}
.brief-obj.ok i{color:var(--good)}
.brief-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font-size:.76rem;color:var(--dim2)}

/* the live checklist in the garage */
.story-brief{background:var(--panel2);border:1px solid rgba(255,213,74,.28);border-radius:12px;padding:12px 13px;margin-bottom:12px}
.sb-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.sb-head span{font:700 .62rem var(--mono);letter-spacing:.1em;color:var(--accent)}
.sb-why{font:.64rem var(--mono);color:var(--dim);text-decoration:underline;cursor:pointer;background:none;border:none}
.story-brief h4{font-size:.86rem;line-height:1.25;margin-bottom:5px}
.sb-relation code{font:.64rem var(--mono);color:var(--blue)}
.sb-objs{margin-top:9px;display:flex;flex-direction:column;gap:6px}
.sb-obj{border-left:2px solid var(--line2);padding:5px 0 5px 9px}
.sb-obj.ok{border-left-color:var(--good)}
.sb-obj-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.sb-obj-top b{font-size:.73rem;font-weight:600}
.sb-obj-top i{font:600 .76rem var(--mono);font-style:normal;color:var(--text)}
.sb-obj.ok .sb-obj-top i{color:var(--good)}
.sb-obj-goal{font:.62rem var(--mono);color:var(--dim2);margin-top:1px}
.sb-obj.ok .sb-obj-goal{color:var(--good)}
.sb-obj-why{font-size:.68rem;line-height:1.45;color:var(--dim);margin-top:4px}
.sb-status{font-size:.7rem;color:var(--dim);margin-top:9px;padding-top:8px;border-top:1px solid var(--line)}
.sb-status.ok{color:var(--good)}

/* the result card */
.story-result{border-radius:10px;padding:11px 13px;margin-bottom:10px;border:1px solid var(--line)}
.story-result.pass{border-color:rgba(124,227,139,.45);background:rgba(124,227,139,.07)}
.story-result.fail{border-color:rgba(232,72,60,.4);background:rgba(232,72,60,.06)}
.story-result>b{display:block;font-size:.9rem;margin-bottom:7px}
.story-result p{font-size:.73rem;color:var(--dim);line-height:1.5;margin-top:7px}
.ro-list{display:flex;flex-direction:column;gap:4px}
.ro{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:baseline;
  font-size:.72rem;padding:4px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.ro b{font-weight:600}
.ro span{font:600 .72rem var(--mono);color:var(--bad)}
.ro.ok span{color:var(--good)}
.ro i{font:.62rem var(--mono);font-style:normal;color:var(--dim2)}
.ro-rec{color:var(--accent)!important}

.race-story-clock{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:5;
  background:rgba(11,16,22,.75);border:1px solid var(--line2);border-radius:9px;padding:6px 14px;text-align:center}
.race-story-clock span{display:block;font:700 .56rem var(--mono);letter-spacing:.14em;color:var(--accent)}
.race-story-clock b{font-size:.8rem}

@media(max-width:900px){.brief-body{grid-template-columns:1fr}}

/* mandatory stops: amber until they are served, green once the rule is met */
.stop-card .hud-v{color:var(--accent)}
.stop-card.met .hud-v{color:var(--good)}
.stop-card.met .hud-k{color:var(--good)}

/* ═══════════════════════════════════════════════════════════════════════════
   PHONE — the race, on a screen held upright.

   Two attributes on <body> drive everything below, both written by
   js/touch-controls.js:

     data-touch="1"     on-screen driving controls are up, and the HUD is cut
                        down to match — the two always travel together, because
                        the deck is what carries the numbers the panels drop
     data-orient=…      portrait or landscape

   The rule this section exists to keep: on a phone the car is never behind a
   panel. In portrait that is bought outright — the deck is opaque and the 3D
   canvas simply stops above it. In landscape there is no height to spend, so
   the controls sit in the two bottom corners instead, which is where a chase
   camera has the least to show: the car is centred and the road it is heading
   for is above it.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── what a small screen stops showing ───────────────────────────────────── */
/* Not shrunk — removed. Six panels made small are still six panels, and the
   phone player is better served by one clear picture than by an unreadable
   copy of the desk HUD. */
body[data-touch="1"] .hud-bl,
body[data-touch="1"] .hud-br,
body[data-touch="1"] .standings,
body[data-touch="1"] .sector-panel,
body[data-touch="1"] #minimap{display:none}

/* Lap, position and the running lap time, in one row instead of four cards.
   The last lap goes: the current one and the best one are the two a driver
   reads on the way past the line. */
body[data-touch="1"] .hud-tl{
  top:calc(8px + env(safe-area-inset-top));left:calc(8px + env(safe-area-inset-left));
  gap:5px;transform:none;
  /* leave the pause and BOX buttons in the opposite corner their own room */
  max-width:calc(100vw - 112px);
}
body[data-touch="1"] .hud-cards{flex-wrap:wrap;gap:5px}

/* ── the corner map ──────────────────────────────────────────────────────── */
/* Drawn by Renderer.drawTouchMap: the road ahead with the car pointing up, so
   the next corner arrives on the map before it arrives in the windscreen.
   It sits at the very top left and the lap cards move over and wrap beside it
   — the far corner from both thumbs is the one a phone can most afford. */
#touch-map{display:none;flex:none;
  width:clamp(78px,25vw,108px);height:clamp(78px,25vw,108px);
  background:rgba(10,13,17,.62);border:1px solid var(--line);border-radius:11px}
body[data-touch="1"]:not([data-touch-map="off"]) #touch-map{display:block}
/* the assist flags used to sit exactly where the map now is */
body[data-touch="1"][data-orient="portrait"]:not([data-touch-map="off"]) .assist-flags{
  top:calc(116px + env(safe-area-inset-top))}
body[data-touch="1"] .hud-card{padding:5px 8px;border-radius:8px}
body[data-touch="1"] .hud-k{font-size:.46rem;letter-spacing:.12em}
body[data-touch="1"] .hud-v{font-size:1.05rem}
body[data-touch="1"] .hud-v small{font-size:.6rem}
body[data-touch="1"] .time-card{min-width:0}
body[data-touch="1"] .time-card .hud-row{gap:7px}
body[data-touch="1"] .time-card .hud-row:not(.best):not(:first-child){display:none}
body[data-touch="1"] .hud-time{font-size:.72rem}
body[data-touch="1"] .hud-center{top:16%;font-size:1.02rem;letter-spacing:.05em;
  max-width:88vw;white-space:normal;text-align:center}
body[data-touch="1"] .assist-flags{bottom:auto;top:calc(66px + env(safe-area-inset-top));
  flex-wrap:wrap;justify-content:center;max-width:84vw;gap:4px}
body[data-touch="1"] .flag{font-size:.52rem;padding:.2em .45em}
body[data-touch="1"] .player-marker{max-width:120px;font-size:.58rem;padding:2px 6px 3px}
body[data-touch="1"] .countdown .lights{gap:8px;padding:10px 14px}
body[data-touch="1"] .light{width:22px;height:22px}
body[data-touch="1"] .count-text{font-size:2.6rem}

/* ── pause and box, because a phone has no Esc key and no B ──────────────── */
.race-touch-bar{position:absolute;z-index:3;display:none;gap:6px;
  top:calc(8px + env(safe-area-inset-top));right:calc(8px + env(safe-area-inset-right))}
body[data-touch="1"] .race-touch-bar{display:flex}
.rt-btn{min-width:42px;height:42px;padding:0 10px;border:1px solid var(--line);border-radius:11px;
  background:rgba(10,13,17,.78);backdrop-filter:blur(10px);color:var(--dim);
  font:700 .58rem var(--mono);letter-spacing:.1em;pointer-events:auto;touch-action:manipulation}
.rt-btn:active{background:rgba(255,255,255,.10)}
.rt-btn.rt-pause{font-size:.72rem;letter-spacing:.06em;color:var(--text)}
.rt-btn.on{border-color:var(--accent);background:var(--accent);color:#0b1016}

/* ── the deck ────────────────────────────────────────────────────────────── */
/* --deck-h is the picture the deck TAKES, which only happens in portrait.
   --controls-h is the strip a thumb is using either way, and it is what
   anything else that wants the bottom of the screen has to clear. */
:root{--deck-h:0px;--controls-h:0px}
body[data-touch="1"][data-orient="portrait"]{
  --deck-h:calc(clamp(158px,30vh,236px) + env(safe-area-inset-bottom));
  --controls-h:var(--deck-h);
}
body[data-touch="1"][data-orient="landscape"]{
  --controls-h:calc(96px + env(safe-area-inset-bottom));
}
/* `inset:0` plus `height:100%` over-constrains the box, and a replaced element
   like <canvas> answers `height:auto` with its own intrinsic size rather than
   with the space left over. Both of them therefore get the height stated. */
body[data-touch="1"][data-orient="portrait"] #game-canvas,
body[data-touch="1"][data-orient="portrait"] .hud{
  bottom:var(--deck-h);height:calc(100% - var(--deck-h));
}

.drive-deck{
  position:absolute;left:0;right:0;bottom:0;z-index:4;display:none;
  grid-template-rows:auto 1fr;gap:7px;
  padding:7px 10px calc(9px + env(safe-area-inset-bottom));
  font-family:var(--mono);touch-action:none;user-select:none;-webkit-user-select:none;
}
body[data-touch="1"] .drive-deck{display:grid}
body[data-touch="1"][data-orient="portrait"] .drive-deck{
  height:var(--deck-h);
  border-top:1px solid rgba(255,255,255,.13);
  background:linear-gradient(180deg,#0d1218,#080b10);
  box-shadow:0 -14px 34px rgba(0,0,0,.5);
}
.deck-row{display:grid;grid-template-columns:minmax(104px,1.1fr) minmax(56px,.6fr) minmax(130px,1.32fr);
  gap:8px;align-items:stretch;min-height:0}

/* Four hairlines, no numbers: tyres, fuel, engine, brakes. Enough to tell you
   that something is going wrong, not enough to be a telemetry panel again. */
.deck-vitals{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.dv{display:block;min-width:0}
.dv b{display:block;height:3px;border-radius:2px;background:rgba(255,255,255,.11);overflow:hidden}
.dv i{display:block;height:100%;width:100%;background:var(--good);transition:width .25s}
.dv em{display:block;margin-top:3px;font:600 .42rem var(--mono);font-style:normal;
  letter-spacing:.12em;color:var(--dim2);text-align:center}

/* Steering: a trough the thumb drags along, or the phone itself. */
.deck-steer{display:flex;flex-direction:column;justify-content:flex-end;gap:5px;min-width:0}
.deck-pad{position:relative;flex:none;height:clamp(74px,17vh,124px);border:1px solid rgba(255,255,255,.13);
  border-radius:13px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  touch-action:none;overflow:hidden}
.deck-pad:before{content:"";position:absolute;left:50%;top:9px;bottom:9px;width:1px;
  background:rgba(255,255,255,.16)}
.deck-pad.down{border-color:rgba(255,213,74,.55);background:rgba(255,213,74,.07)}
.deck-knob{position:absolute;left:50%;top:50%;width:40px;height:calc(100% - 12px);
  transform:translate(-50%,-50%);border-radius:10px;background:var(--accent);
  box-shadow:0 2px 10px rgba(255,213,74,.34)}
.deck-knob:after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;
  transform:translate(-50%,-50%);border-radius:1px;background:rgba(20,15,2,.55)}
.deck-tilt{display:none;position:relative;flex:none;height:clamp(74px,17vh,124px);border:1px solid rgba(255,255,255,.13);
  border-radius:13px;background:rgba(255,255,255,.03);overflow:hidden}
.deck-tilt i{position:absolute;left:50%;bottom:8px;width:3px;height:70%;transform-origin:50% 100%;
  border-radius:2px;background:var(--accent);margin-left:-1.5px}
.deck-steer.tilt .deck-pad{display:none}
.deck-steer.tilt .deck-tilt{display:block}
.deck-cap{display:flex;align-items:center;justify-content:space-between;gap:6px;
  font:600 .44rem var(--mono);letter-spacing:.14em;color:var(--dim2)}
.deck-mini{padding:2px 6px;border:1px solid var(--line);border-radius:5px;color:var(--accent);
  font:600 .44rem var(--mono);letter-spacing:.1em;background:rgba(255,213,74,.07);
  touch-action:manipulation}

/* Speed and gear — the only two numbers that live at the bottom of the screen. */
.deck-read{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0}
.deck-read b{font:600 1.5rem/1 var(--mono);color:#eef3f7;letter-spacing:-.02em}
.deck-read small{font:.44rem var(--mono);letter-spacing:.1em;color:var(--dim2);margin-top:2px}
.deck-read em{display:grid;place-items:center;min-width:26px;height:22px;margin-top:6px;
  border:1px solid rgba(255,213,74,.4);border-radius:6px;background:rgba(255,213,74,.08);
  color:var(--accent);font:600 .78rem var(--mono);font-style:normal}

/* Pedals: brake on the inside, throttle where the thumb already rests. */
.deck-pedals{display:grid;grid-template-columns:1fr 1fr;gap:7px;min-width:0}
body[data-touch-auto="1"] .deck-pedals{grid-template-columns:1fr}
body[data-touch-auto="1"] .deck-pedal.gas{display:none}
.deck-pedal{display:grid;place-items:center;border:1px solid rgba(255,255,255,.14);border-radius:13px;
  background:rgba(255,255,255,.045);color:var(--dim);font:700 .56rem var(--mono);letter-spacing:.12em;
  touch-action:none;transition:background .08s,border-color .08s,color .08s}
.deck-pedal.brake{border-color:rgba(232,72,60,.34);color:#f0968d;background:rgba(232,72,60,.09)}
.deck-pedal.gas{border-color:rgba(124,227,139,.34);color:#9adcae;background:rgba(124,227,139,.09)}
.deck-pedal.down{color:#0b1016}
.deck-pedal.brake.down{background:#e8483c;border-color:#e8483c}
.deck-pedal.gas.down{background:#7ce38b;border-color:#7ce38b}

/* ── landscape: no height for a deck, so the corners take the controls ───── */
body[data-touch="1"][data-orient="landscape"] .drive-deck{
  background:none;border:0;box-shadow:none;pointer-events:none;
  align-content:end;gap:5px;
  padding:0 calc(10px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom))
            calc(10px + env(safe-area-inset-left));
}
body[data-touch="1"][data-orient="landscape"] .deck-row{
  grid-template-columns:minmax(136px,19vw) 1fr minmax(146px,20vw);align-items:end;gap:10px}
body[data-touch="1"][data-orient="landscape"] .deck-steer,
body[data-touch="1"][data-orient="landscape"] .deck-pedals{pointer-events:auto}
body[data-touch="1"][data-orient="landscape"] .deck-pad,
body[data-touch="1"][data-orient="landscape"] .deck-tilt{flex:none;height:56px;
  background:rgba(10,13,17,.74);backdrop-filter:blur(10px)}
body[data-touch="1"][data-orient="landscape"] .deck-pedal{height:64px;backdrop-filter:blur(10px)}
body[data-touch="1"][data-orient="landscape"] .deck-read{
  align-self:end;padding-bottom:3px;text-shadow:0 2px 14px rgba(0,0,0,.9)}
body[data-touch="1"][data-orient="landscape"] .deck-read b{font-size:1.28rem}
/* the vitals shrink to the width of the trough and sit directly above it,
   which is where the left thumb is already looking */
body[data-touch="1"][data-orient="landscape"] .deck-vitals{
  width:min(184px,26vw);justify-self:start;pointer-events:none}
body[data-touch="1"][data-orient="landscape"] .dv em{display:none}
body[data-touch="1"][data-orient="landscape"] .assist-flags{top:auto;bottom:86px}

/* ── tilt: the phone steers, so the thumbs split the pedals ──────────────── */
/* Brake under the left thumb, gas under the right. The pedals leave their
   shared box for the deck's own grid, and the small tilt readout moves out of
   the way. data-tilt is only "1" while tilt is actually sending readings, so a
   phone that falls back to the pad gets the pad layout back with it. */
body[data-touch="1"][data-tilt="1"] .deck-pedals{display:contents}
body[data-touch="1"][data-tilt="1"] .deck-pedal{pointer-events:auto}
body[data-touch="1"][data-tilt="1"] .deck-pedal.brake{grid-column:1}
body[data-touch="1"][data-tilt="1"] .deck-pedal.gas{grid-column:3}
/* with the throttle driven for you there is one pedal, and it goes right */
body[data-touch="1"][data-touch-auto="1"][data-tilt="1"] .deck-pedal.brake{grid-column:3}

/* upright: both pedals the full height of the deck, the readout over the speed */
body[data-touch="1"][data-orient="portrait"][data-tilt="1"] .deck-row{
  grid-template-columns:minmax(0,1fr) minmax(86px,.75fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
body[data-touch="1"][data-orient="portrait"][data-tilt="1"] .deck-steer{grid-column:2;grid-row:1}
body[data-touch="1"][data-orient="portrait"][data-tilt="1"] .deck-read{grid-column:2;grid-row:2}
body[data-touch="1"][data-orient="portrait"][data-tilt="1"] .deck-pedal{grid-row:1/3}
body[data-touch="1"][data-orient="portrait"][data-tilt="1"] .deck-tilt{height:40px}

/* sideways: the readout sits small over the brake, and the middle of the
   screen — where the car is — stays picture */
body[data-touch="1"][data-orient="landscape"][data-tilt="1"]{--controls-h:calc(118px + env(safe-area-inset-bottom))}
body[data-touch="1"][data-orient="landscape"][data-tilt="1"] .deck-row{grid-template-rows:auto auto}
body[data-touch="1"][data-orient="landscape"][data-tilt="1"] .deck-steer{grid-column:1;grid-row:1}
body[data-touch="1"][data-orient="landscape"][data-tilt="1"] .deck-read{grid-column:2;grid-row:2}
body[data-touch="1"][data-orient="landscape"][data-tilt="1"] .deck-pedal{grid-row:2;height:70px}
body[data-touch="1"][data-orient="landscape"][data-tilt="1"] .deck-tilt{height:28px}

/* ── the pit board has to clear the deck ─────────────────────────────────── */
body[data-touch="1"] #pit-board{left:8px;right:8px;width:auto;
  bottom:calc(var(--controls-h) + 8px);
  max-height:calc(100dvh - var(--controls-h) - 64px)}
body[data-touch="1"] #pit-board .pb{max-height:inherit;overflow:auto}
body[data-touch="1"] #pit-board .pb-grid{grid-template-columns:1fr}
body[data-touch="1"] #pit-board .pb-left{max-height:32vh}
body[data-touch="1"] #pit-board .pb-card{max-height:78px}

/* ── the screens either side of the race ─────────────────────────────────── */
/* A centred flex column that overflows loses its top: a scroll container
   cannot reach above where its content begins. The welcome screen overflows on
   every phone, so below this size it stops centring and starts at the top. */
@media (max-width:620px),(max-height:560px){
  .welcome-wrap{justify-content:flex-start;padding:calc(3vh + env(safe-area-inset-top)) 6vw 4vh;
    gap:14px;-webkit-overflow-scrolling:touch}
  .title{font-size:clamp(2.6rem,15vw,4.2rem)}
  .subtitle{font-size:.95rem;max-width:none}
  .welcome-cta{gap:8px}
  .welcome-cta .btn-lg{padding:.8em 1.2em;font-size:.95rem}
  .welcome-cta .btn{flex:1 1 46%;justify-content:center;text-align:center}
  .profile-summary{width:100%}
  .steps{gap:9px}
  .step{padding:11px 12px}
  .step h3{font-size:.92rem}
  .step p{font-size:.76rem}
}
/* Drawing and the garage: the panel goes on top, the canvas keeps the rest.
   46vh of controls over 40vh of drawing surface is not a drawing surface. */
@media (max-width:620px){
  .side{max-height:50vh;padding:16px 14px;gap:14px}
  .side-head h2{font-size:1.2rem}
  .side-lead{font-size:.78rem}
  .side-actions{position:sticky;bottom:-16px;margin-top:12px;padding:10px 0 4px;
    background:linear-gradient(180deg,rgba(17,22,29,0),var(--panel) 26%)}
  .garage-scroll{padding:14px 12px 28px}
  .stat-grid{gap:6px 10px}
  .overlay{padding:2vh 3vw}
  .overlay-card{padding:16px 15px;max-height:94vh;overflow:auto}
  .tabs{gap:4px;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .tab{white-space:nowrap;flex:none}
  .result-head{gap:10px}
  .res-table{font-size:.7rem}
}
/* A phone turned sideways has about 375 px of height for the whole screen. */
@media (max-height:480px){
  .grid-panel{margin:8px auto;padding:12px 13px;max-height:calc(100vh - 16px)}
  .overlay-card{max-height:96vh;overflow:auto;padding:14px}
  .overlay-actions{gap:6px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHONE MENUS — the folded panels, and the front page that fits on one screen.

   Everything here hangs off body[data-touch="1"], the same attribute that
   raises the driving deck, so a laptop never sees any of it. js/phone-menus.js
   builds the .fold wrappers; this decides what they look like.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── a folded panel ──────────────────────────────────────────────────────── */
/* Shut, it is one row: the name, and a line saying what is inside so nobody
   has to open it to find out whether they needed it. */
.fold{border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.022)}
.fold-head{display:flex;width:100%;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 12px;text-align:left;color:var(--text)}
.fold-head > span{display:grid;gap:2px;min-width:0}
.fold-head b{font:600 .84rem var(--font);letter-spacing:-.01em}
.fold-head small{font:.63rem var(--mono);line-height:1.35;color:var(--dim2)}
.fold-head i{flex:none;display:grid;place-items:center;width:22px;height:22px;
  border:1px solid var(--line);border-radius:50%;transition:transform .18s}
.fold-head i:before{content:"";width:6px;height:6px;margin-top:-3px;
  border-right:1.5px solid var(--dim);border-bottom:1.5px solid var(--dim);transform:rotate(45deg)}
.fold[data-open="1"]{border-color:var(--line2);background:rgba(255,255,255,.045)}
.fold[data-open="1"] .fold-head i{transform:rotate(180deg)}
.fold[data-open="1"] .fold-head small{display:none}
.fold-body{display:none;padding:2px 12px 13px}
.fold[data-open="1"] .fold-body{display:block}
.fold-dup{display:none}
/* the engineering desk brings its own card, so the fold does not add a second */
.fold-body > #engineering-lab{margin:0;padding:0;border:0;background:none}
.fold-body > .steps{grid-template-columns:1fr}

/* ── the front page, on one screen ───────────────────────────────────────── */
/* With the three step cards folded away this no longer scrolls at all, which
   is the point: the first thing a phone shows is the button. */
body[data-touch="1"] .welcome-wrap{justify-content:flex-start;gap:12px;
  padding:calc(2.4vh + env(safe-area-inset-top)) 5vw calc(2.4vh + env(safe-area-inset-bottom))}
body[data-touch="1"] .welcome-head{display:grid;gap:4px}
body[data-touch="1"] .eyebrow{font-size:.56rem;letter-spacing:.16em}
body[data-touch="1"] .title{font-size:clamp(2.3rem,13vw,3.3rem);margin:.06em 0 0}
body[data-touch="1"] .subtitle{font-size:.88rem;line-height:1.4;max-width:30ch}
body[data-touch="1"] .welcome-cta{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
body[data-touch="1"] .welcome-cta > .btn{width:100%}
body[data-touch="1"] .welcome-cta > .btn-lg{grid-column:1/-1;padding:.82em 1.2em;font-size:1rem}
body[data-touch="1"] .welcome-cta > .btn-ghost{padding:.62em .8em;font-size:.78rem}
body[data-touch="1"] .profile-summary{width:100%;padding:9px 11px;gap:10px}
body[data-touch="1"] .profile-summary-copy > span{font-size:.42rem}
body[data-touch="1"] .profile-summary-copy strong{font-size:.74rem}
body[data-touch="1"] #btn-profile-manage{flex:none;padding:.55em .8em;font-size:.72rem}
body[data-touch="1"] .welcome-foot{font-size:.62rem;color:var(--dim2)}
/* Clear of the home indicator, and small enough not to crowd the profile
   row it now sits beside on a narrow screen. */
body[data-touch="1"] .version-stamp{right:5vw;bottom:calc(6px + env(safe-area-inset-bottom));
  font-size:.52rem;gap:.45em}

/* ── the two working screens ─────────────────────────────────────────────── */
body[data-touch="1"] .side{gap:12px;padding:14px 13px}
body[data-touch="1"] .side-head{display:grid;gap:2px}
body[data-touch="1"] .side-head h2{font-size:1.18rem;margin:.1em 0 .15em}
body[data-touch="1"] .side-lead{font-size:.76rem;line-height:1.45}
body[data-touch="1"] .side-block h4{margin-bottom:.5em}
/* the way forward, always in the same place and never scrolled past */
body[data-touch="1"] .side-actions{position:sticky;bottom:0;z-index:2;margin-top:auto;gap:6px;
  padding:10px 0 2px;background:linear-gradient(180deg,rgba(18,23,30,0),var(--panel) 30%)}
body[data-touch="1"] .side-actions .btn{min-width:0;padding:.62em .7em;font-size:.8rem}
body[data-touch="1"] .side-actions .btn-primary{flex:2 1 100%;order:-1;padding:.78em 1em;font-size:.92rem}

/* The garage's first-timer note said, at length, exactly what the shortened
   lead above it now says in one line — and saying it twice on a screen this
   size is the problem, not the fix. A new player still meets the full primer
   on the grid, which is where "how do I steer" is the urgent question. */
body[data-touch="1"] #garage-newcomer{display:none}

/* A scrolling column should look like one. The two solid gradients are pinned
   to the content and cover the shadows at the ends, so the amber edge only
   shows while there is genuinely more in that direction. */
body[data-touch="1"] .side{
  background-image:
    linear-gradient(var(--panel) 38%,rgba(18,23,30,0)),
    linear-gradient(rgba(18,23,30,0),var(--panel) 62%),
    linear-gradient(rgba(255,213,74,.22),rgba(255,213,74,0)),
    linear-gradient(rgba(255,213,74,0),rgba(255,213,74,.22));
  background-repeat:no-repeat;
  background-size:100% 26px,100% 26px,100% 11px,100% 11px;
  background-position:0 0,0 100%,0 0,0 100%;
  background-attachment:local,local,scroll,scroll;
}
body[data-touch="1"] .garage-scroll{
  background-image:
    linear-gradient(var(--bg2) 38%,rgba(14,18,24,0)),
    linear-gradient(rgba(14,18,24,0),var(--bg2) 62%),
    linear-gradient(rgba(255,213,74,.22),rgba(255,213,74,0)),
    linear-gradient(rgba(255,213,74,0),rgba(255,213,74,.22));
  background-repeat:no-repeat;
  background-size:100% 26px,100% 26px,100% 11px,100% 11px;
  background-position:0 0,0 100%,0 0,0 100%;
  background-attachment:local,local,scroll,scroll;
}

/* ── the grid screen ─────────────────────────────────────────────────────── */
/* Seven settings and a hint under each. The hints stay — they are the reason
   the numbers mean anything — but they stop being the same size as the labels. */
body[data-touch="1"] .grid-head h2{font-size:1.2rem}
body[data-touch="1"] .grid-lead{font-size:.66rem;line-height:1.4}
body[data-touch="1"] .grid-fields{gap:10px}
body[data-touch="1"] .grid-field > span i{font-size:.56rem;line-height:1.35;color:var(--dim2)}
body[data-touch="1"] .grid-actions{position:sticky;bottom:0;z-index:2;
  margin-top:14px;padding:12px 0 4px;
  background:linear-gradient(180deg,rgba(9,13,18,0),rgba(9,13,18,.97) 34%)}

/* ── the career screen ───────────────────────────────────────────────────── */
body[data-touch="1"] .story-shell{padding:20px 0 34px}
body[data-touch="1"] .story-head h2{font-size:1.7rem}
body[data-touch="1"] .story-head p{font-size:.76rem;line-height:1.45}

/* ── the grid screen, in a party ──────────────────────────────────────────
   The host still sets the race up here. Everyone else is reading a briefing,
   and it has to LOOK like one: controls that are visibly not yours are better
   than controls that accept a tap and then silently revert on the next poll. */
.grid-party-note{margin:-2px 0 4px;padding:8px 10px;border-left:2px solid #4ea8de;
  border-radius:0 6px 6px 0;background:rgba(78,168,222,.08);color:#cfe3f2;
  font:.66rem/1.45 var(--mono)}
.grid-party-note.is-host{border-left-color:var(--accent);background:rgba(255,213,74,.08);color:#e8d9a8}
.grid-readonly{opacity:.74}
.grid-readonly .grid-seg-btn,
.grid-readonly .grid-range input{pointer-events:none}
.grid-readonly .grid-seg-btn:not(.on){opacity:.5}
.grid-readonly .grid-seg{background:rgba(255,255,255,.03)}
.grid-readonly .grid-seg-btn.on{background:rgba(78,168,222,.16);color:#bfe3ff;
  box-shadow:inset 0 0 0 1px rgba(78,168,222,.34)}
.grid-readonly .grid-range input{accent-color:#4ea8de}

/* ── small things every touchscreen gets ─────────────────────────────────── */
/* A segmented button with a long label wrapped onto its neighbour's text
   instead of onto a second line. And "ESC to resume" names a key a phone
   does not have. */
body[data-touch="1"] .seg-btn{white-space:normal;line-height:1.25}
body[data-touch="1"] .overlay-foot{display:none}
/* Held upright, say once that it does not have to be. */
body[data-touch="1"][data-orient="portrait"] .welcome-foot:before{
  content:"↻  Turn the phone sideways — the menus and the race both work that way.";
  display:block;margin-bottom:4px;color:var(--dim)}

/* ── the tilt question at the start line ─────────────────────────────────── */
/* Above the pause and results cards it can be asked over, below the toasts
   that report how it was answered. See TouchControls.askTilt. */
.tilt-ask{z-index:75}
.tilt-ask-card{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:20px;width:min(580px,100%)}
.tilt-ask-card h2{margin:.35em 0 .35em}
.tilt-ask-copy > p{font-size:.84rem;line-height:1.5;color:var(--dim)}
.tilt-ask-copy > .tilt-ask-note{margin-top:8px;font:.7rem/1.45 var(--mono);color:var(--accent)}
.tilt-ask-note:empty{display:none}
.tilt-ask-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.tilt-ask-actions .btn{flex:1 1 150px}
.tilt-ask-art{display:grid;place-items:center;width:104px;height:104px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,213,74,.14),rgba(255,213,74,0) 70%)}
.tilt-ask-art i{position:relative;width:64px;height:34px;border:2px solid var(--accent);border-radius:8px;
  animation:tilt-ask-wheel 2.6s ease-in-out infinite}
.tilt-ask-art i:before{content:"";position:absolute;right:5px;top:50%;width:3px;height:12px;margin-top:-6px;
  border-radius:2px;background:var(--accent);opacity:.55}
@keyframes tilt-ask-wheel{0%,100%{transform:rotate(-22deg)}50%{transform:rotate(22deg)}}
@media (prefers-reduced-motion:reduce){.tilt-ask-art i{animation:none}}
@media (max-width:520px){
  .tilt-ask-card{grid-template-columns:1fr;justify-items:center;text-align:center;gap:6px}
  .tilt-ask-copy .eyebrow{justify-content:center}
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHONE, SIDEWAYS — the menus for a phone already held the way it races.

   The race is built for landscape and the menus were only ever laid out for
   a phone held upright, so every trip from the results to the garage and
   back to the grid was a quarter turn each way. Everything below keeps a
   sideways phone sideways: the panels go back BESIDE their canvas instead of
   on top of it, long forms become two columns, settings tabs run down the
   side, and the button that moves you on stays pinned to the bottom of
   whatever scrolls. Only a touchscreen held in landscape sees any of it.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── front page: the name on the left, the way in on the right ───────────── */
body[data-touch="1"][data-orient="landscape"] .welcome-wrap{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  align-content:center;align-content:safe center;column-gap:clamp(16px,4vw,44px);row-gap:10px;max-width:980px;
  padding:calc(10px + env(safe-area-inset-top)) calc(18px + env(safe-area-inset-right))
          calc(14px + env(safe-area-inset-bottom)) calc(18px + env(safe-area-inset-left))}
body[data-touch="1"][data-orient="landscape"] .welcome-head{grid-column:1;grid-row:1;align-self:end}
body[data-touch="1"][data-orient="landscape"] .welcome-wrap > .fold{grid-column:1;grid-row:2;align-self:start}
body[data-touch="1"][data-orient="landscape"] .welcome-foot{grid-column:1;grid-row:3}
body[data-touch="1"][data-orient="landscape"] .welcome-cta{grid-column:2;grid-row:1/3;align-self:center}
body[data-touch="1"][data-orient="landscape"] .profile-summary{grid-column:2;grid-row:3}
body[data-touch="1"][data-orient="landscape"] .title{font-size:clamp(2.1rem,6.6vw,3.2rem)}
body[data-touch="1"][data-orient="landscape"] .subtitle{font-size:.82rem}
body[data-touch="1"][data-orient="landscape"] .welcome-cta > .btn-lg{padding:.66em 1em;font-size:.94rem}
body[data-touch="1"][data-orient="landscape"] .welcome-cta > .btn-ghost{padding:.5em .7em}
body[data-touch="1"][data-orient="landscape"] .version-stamp{bottom:calc(4px + env(safe-area-inset-bottom))}

/* ── drawing and the garage: the panel beside the canvas again ───────────── */
body[data-touch="1"][data-orient="landscape"] .panel-layout{
  grid-template-columns:clamp(236px,38vw,340px) minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
body[data-touch="1"][data-orient="landscape"] .side{
  max-height:none;min-height:0;gap:10px;border-bottom:0;border-right:1px solid var(--line);
  padding:calc(10px + env(safe-area-inset-top)) 12px 0 calc(12px + env(safe-area-inset-left))}
body[data-touch="1"][data-orient="landscape"] .side-head h2{font-size:1.06rem}
body[data-touch="1"][data-orient="landscape"] .side-lead{font-size:.72rem}
body[data-touch="1"][data-orient="landscape"] .side-actions{padding-bottom:calc(8px + env(safe-area-inset-bottom))}
body[data-touch="1"][data-orient="landscape"] .garage-scroll{
  padding:calc(10px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 20px 12px}
body[data-touch="1"][data-orient="landscape"] .car-preview{height:clamp(120px,40vh,190px);margin-bottom:12px}

/* ── the grid: two columns of race settings, start always in reach ───────── */
body[data-touch="1"][data-orient="landscape"] .grid-panel{
  width:min(900px,calc(100% - 20px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);margin:8px auto;padding:10px 16px 0}
body[data-touch="1"][data-orient="landscape"] .grid-head{display:flex;flex-wrap:wrap;align-items:baseline;
  column-gap:12px;margin-bottom:10px;padding-bottom:8px}
body[data-touch="1"][data-orient="landscape"] .grid-kicker{flex-basis:100%}
body[data-touch="1"][data-orient="landscape"] .grid-head h2{margin:2px 0 0;font-size:1.1rem}
body[data-touch="1"][data-orient="landscape"] .grid-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 18px}
body[data-touch="1"][data-orient="landscape"] .grid-fields > .grid-field:first-child,
body[data-touch="1"][data-orient="landscape"] .grid-weather-note{grid-column:1/-1}
body[data-touch="1"][data-orient="landscape"] .grid-actions{flex-direction:row;align-items:center;
  margin-top:10px;padding:8px 0 calc(10px + env(safe-area-inset-bottom))}
body[data-touch="1"][data-orient="landscape"] .grid-actions .btn-lg{padding:.6em 1.2em;font-size:.92rem}

/* ── every card over the game: the whole height, none of it wasted ───────── */
body[data-touch="1"][data-orient="landscape"] .overlay{
  padding:6px calc(8px + env(safe-area-inset-right)) 6px calc(8px + env(safe-area-inset-left))}
body[data-touch="1"][data-orient="landscape"] .overlay-card{
  max-height:calc(100vh - 12px);max-height:calc(100dvh - 12px);padding:12px 16px}
body[data-touch="1"][data-orient="landscape"] .overlay-card h2{font-size:1.2rem;margin-bottom:.45em}

/* settings: tabs down the left, the chosen tab scrolling on the right */
body[data-touch="1"][data-orient="landscape"] .settings-card{
  width:min(920px,100%);height:calc(100vh - 12px);height:calc(100dvh - 12px);min-height:0;overflow:hidden;
  display:grid;grid-template-columns:118px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;column-gap:14px}
body[data-touch="1"][data-orient="landscape"] .settings-head{grid-column:1/-1;margin-bottom:8px}
body[data-touch="1"][data-orient="landscape"] .settings-head h2{margin:0}
body[data-touch="1"][data-orient="landscape"] .tabs{grid-column:1;grid-row:2;flex-direction:column;flex-wrap:nowrap;
  gap:1px;margin:0;border-bottom:0;border-right:1px solid var(--line);overflow-x:hidden;overflow-y:auto}
body[data-touch="1"][data-orient="landscape"] .tab{flex:none;margin:0;padding:.56em .7em;text-align:left;font-size:.8rem;
  border-bottom:0;border-right:2px solid transparent}
body[data-touch="1"][data-orient="landscape"] .tab.active{border-right-color:var(--accent);background:rgba(255,213,74,.06)}
body[data-touch="1"][data-orient="landscape"] .tab-body{grid-column:2;grid-row:2;overflow-y:auto;align-content:start;
  gap:14px 22px;padding:2px 4px 8px 0}
body[data-touch="1"][data-orient="landscape"] .settings-foot{grid-column:1/-1;margin-top:6px;padding-top:8px}
body[data-touch="1"][data-orient="landscape"] .settings-foot .btn{padding:.5em 1.1em}

/* pause: two columns of buttons instead of a list taller than the screen */
body[data-touch="1"][data-orient="landscape"] #pause-overlay .overlay-card{width:min(560px,100%)}
body[data-touch="1"][data-orient="landscape"] #pause-overlay .overlay-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}
body[data-touch="1"][data-orient="landscape"] #pause-overlay .overlay-actions .btn{min-height:40px;padding:.5em .8em;white-space:normal}
body[data-touch="1"][data-orient="landscape"] #btn-resume{grid-column:1/-1}

/* results: the card scrolls as one, and Race again never scrolls away */
body[data-touch="1"][data-orient="landscape"] #results-overlay .overlay-card{padding-bottom:0}
body[data-touch="1"][data-orient="landscape"] .result-head{gap:12px;margin-bottom:8px}
body[data-touch="1"][data-orient="landscape"] .result-pos{font-size:2.3rem}
body[data-touch="1"][data-orient="landscape"] .result-head p{margin-top:0;font-size:.76rem}
body[data-touch="1"][data-orient="landscape"] .result-tabs{margin-bottom:8px}
body[data-touch="1"][data-orient="landscape"] #debrief-body{max-height:none;overflow:visible;padding-bottom:12px}
body[data-touch="1"][data-orient="landscape"] #results-overlay .overlay-actions.left{
  position:sticky;bottom:0;z-index:2;margin:10px 0 0;padding:8px 0 10px;
  background:linear-gradient(180deg,rgba(18,23,30,0),var(--panel) 32%)}
body[data-touch="1"][data-orient="landscape"] #results-overlay .overlay-actions.left .btn{min-width:0;padding:.55em .8em}

/* how to play: the three cards side by side */
body[data-touch="1"][data-orient="landscape"] .primer-card-outer{padding:12px 16px 0}
body[data-touch="1"][data-orient="landscape"] .primer-head{margin-bottom:10px}
body[data-touch="1"][data-orient="landscape"] .primer-lead{font-size:.76rem}
body[data-touch="1"][data-orient="landscape"] .primer-cols{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px}
body[data-touch="1"][data-orient="landscape"] .primer-card{padding:10px 12px}
body[data-touch="1"][data-orient="landscape"] .primer-card h3{margin-bottom:.6em}
body[data-touch="1"][data-orient="landscape"] .primer-card p,
body[data-touch="1"][data-orient="landscape"] .primer-keys dd,
body[data-touch="1"][data-orient="landscape"] .primer-list dd{font-size:.7rem}
body[data-touch="1"][data-orient="landscape"] .primer-foot{position:sticky;bottom:0;margin-top:10px;padding:8px 0 10px;
  background:linear-gradient(180deg,rgba(18,23,30,0),var(--panel) 32%)}

/* a chapter briefing: the lesson and the circuit side by side */
body[data-touch="1"][data-orient="landscape"] .brief-card{padding:12px 16px 0}
body[data-touch="1"][data-orient="landscape"] .brief-head{padding-bottom:8px;margin-bottom:10px}
body[data-touch="1"][data-orient="landscape"] .brief-body{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:14px}
body[data-touch="1"][data-orient="landscape"] .brief-teach p{font-size:.76rem;line-height:1.55}
body[data-touch="1"][data-orient="landscape"] .brief-foot{position:sticky;bottom:0;margin-top:10px;padding:8px 0 10px;
  background:linear-gradient(180deg,rgba(18,23,30,0),var(--panel) 32%)}
body[data-touch="1"][data-orient="landscape"] .brief-foot .btn-lg{padding:.6em 1.2em;font-size:.92rem}

/* the career hub */
body[data-touch="1"][data-orient="landscape"] .story-shell{width:auto;margin:0;
  padding:calc(10px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) 24px calc(14px + env(safe-area-inset-left))}
body[data-touch="1"][data-orient="landscape"] .story-head{flex-direction:row;align-items:center;gap:14px;padding-bottom:10px}
body[data-touch="1"][data-orient="landscape"] .story-head > .btn{flex:none}
body[data-touch="1"][data-orient="landscape"] .story-head h2{font-size:1.35rem}
body[data-touch="1"][data-orient="landscape"] .story-head p{margin-top:4px;font-size:.72rem}
body[data-touch="1"][data-orient="landscape"] .challenge-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}

body[data-touch="1"][data-orient="landscape"] .tilt-ask-card{gap:16px}