:root{color-scheme:dark;
 --bg:#0b0716;--panel:#140c26;--panel2:#1c1233;--line:#3b2a66;--ink:#f4ecff;--dim:#9d8cc9;
 --pink:#ff2e88;--cyan:#2ef2ff;--gold:#ffd23f;--good:#5cff8a;--warn:#ffb03a;--bad:#ff3b3b}
*,*::before,*::after{box-sizing:border-box}
html{height:auto}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"VT323","Courier New",monospace;font-size:20px;line-height:1.15;
 padding-inline:10px;padding-block:8px}
/* Docking: phone = stacked with drivers right under the feed; >=760px = fills the window with the
   drivers docked along the bottom under the feed; >=1000px = driver cards switch to a short two-column strip. */
.app{max-width:1680px;margin:0 auto;display:grid;gap:8px;grid-template-columns:minmax(0,1fr);
 grid-template-areas:"header" "stage" "drivers" "side"}
header{grid-area:header}
.stage-wrap{grid-area:stage;min-width:0;min-height:0;display:flex;flex-direction:column;--fill:0}
.stage-box{position:relative;min-height:0}
.drivers{grid-area:drivers;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;min-height:0;align-content:start}
.side{grid-area:side;display:flex;flex-direction:column;gap:8px;min-height:0}
@media(max-width:560px){.drivers{grid-template-columns:minmax(0,1fr)}}
@media(min-width:760px){
 .app{height:calc(100dvh - 16px);min-height:560px;grid-template-columns:minmax(0,1fr) 260px;
  grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"header header" "stage side" "drivers side"}
 .stage-wrap{--fill:1}
 .stage-box{flex:1}
 .feed{flex:1;min-height:0;overflow:auto}
}
/* Bars beside orders on any screen wide enough for two cards side by side. */
@media(min-width:561px){
 .drivers .drv-body{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
header{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:6px 12px}
h1{font-family:"Press Start 2P",monospace;font-size:clamp(11px,1.8vw,16px);margin:0 0 2px;color:var(--gold);
 text-shadow:2px 2px 0 #b8342e,4px 4px 0 #3a0d2a;text-wrap:balance}
.sub{margin:0;color:var(--dim);font-size:17px}
.btns{display:flex;flex-wrap:wrap;gap:4px 10px}
.grp{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.grp>span{font-family:"Press Start 2P",monospace;font-size:7px;color:var(--dim);letter-spacing:.08em;margin-right:2px}
button{font-family:"Press Start 2P",monospace;font-size:8px;color:var(--ink);background:#2a1b4d;border:0;padding:6px 8px;cursor:pointer;
 box-shadow:inset -2px -2px 0 #140c26,inset 2px 2px 0 #4a3a7a,2px 2px 0 #000}
.rows{display:flex;flex-direction:column;gap:3px}
/* One row per resource: name, bar, value, then the setting that drains it (pit buttons on the armor row). */
.rw{display:grid;grid-template-columns:62px minmax(0,1fr) 34px 58px;gap:6px;align-items:center;font-variant-numeric:tabular-nums}
.rw>span:first-child{color:var(--dim)}.rw>span:nth-child(3){text-align:right}
.rw .meter{height:7px}
.lv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}
.dev-only{display:none!important}body.dev .dev-only{display:flex!important}body.dev button.dev-only{display:inline-block!important}
/* Orders: one slim three-segment pill per resource; the lit segment is the current order. */
.lv.pill{display:flex;gap:0;width:54px;justify-self:end;outline:1px solid var(--line)}
.lv.pill button.lvl{flex:1;height:10px;box-shadow:none;opacity:.22;outline:0}
.lv.pill button.lvl[aria-pressed=true]{opacity:1;outline:0}
.rw .boxcell{justify-self:end;position:relative}
.pitpop{position:absolute;right:0;bottom:calc(100% + 4px);z-index:5;background:var(--panel);outline:2px solid var(--line);box-shadow:3px 3px 0 #000;padding:6px;display:flex;flex-direction:column;gap:4px;min-width:150px}
.pitpop .cmp{display:flex;flex-wrap:wrap;gap:3px}
/* Qualifying hides what doesn't apply, but keeps its space: the panels never change size mid-session. */
.drv.quali .rw:not(.rw-tire),.drv.quali .lv,.drv.quali .foot,.drv.quali .boxcell{visibility:hidden}
.lv button{font-size:7px;padding:3px 2px}
.ord button.lvl,.lv button.lvl{height:14px;padding:0;opacity:.3;box-shadow:inset -2px -2px 0 rgba(0,0,0,.45),2px 2px 0 #000}
.lv button.lvl.blue{background:#3d7bff}.lv button.lvl.yellow{background:#ffd23f}.lv button.lvl.red{background:#ff3b3b}
.lv button.lvl[aria-pressed=true]{opacity:1;outline:2px solid var(--ink);outline-offset:-2px}
.ord button.lvl{height:14px;padding:0;opacity:.3;box-shadow:inset -2px -2px 0 rgba(0,0,0,.45),2px 2px 0 #000}
.ord button.lvl.blue{background:#3d7bff}.ord button.lvl.yellow{background:#ffd23f}.ord button.lvl.red{background:#ff3b3b}
.ord button.lvl[aria-pressed=true]{opacity:1;outline:2px solid var(--ink);outline-offset:-2px}
button[aria-pressed=true]{background:var(--pink);color:#1a0a1a;box-shadow:inset -2px -2px 0 #8a1048,inset 2px 2px 0 #ff9cc8,2px 2px 0 #000}
button:active{transform:translate(1px,1px)}
button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.stage{position:absolute;background:#07040f;outline:2px solid var(--line);box-shadow:0 0 0 3px var(--panel),4px 4px 0 3px #000}
.stage canvas{position:absolute;left:0;top:0;image-rendering:pixelated;image-rendering:crisp-edges}
.stage::after{content:"";position:absolute;inset:0;pointer-events:none;
 background:repeating-linear-gradient(to bottom,rgba(0,0,0,.16) 0 1px,transparent 1px 3px)}
.hint{margin:4px 0 0;color:var(--dim);font-size:16px}
.hint kbd{font-family:"Press Start 2P",monospace;font-size:7px;color:var(--ink);background:var(--panel2);padding:3px 5px;border:1px solid var(--line)}
.panel{background:var(--panel);border:2px solid var(--line);box-shadow:3px 3px 0 #000;padding:6px 8px}
.panel h2{font-family:"Press Start 2P",monospace;font-size:8px;letter-spacing:.1em;color:var(--dim);margin:0 0 5px;font-weight:400}
.tower ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.row{display:grid;grid-template-columns:22px 6px minmax(0,1fr) auto 34px;gap:5px;align-items:center;padding:0 4px;font-size:17px;line-height:1.05;font-variant-numeric:tabular-nums}
.row.you{background:#24163f;box-shadow:inset 2px 0 0 var(--cyan)}
.row .p{color:var(--dim);text-align:right}
.row .chip{height:11px}
.row .n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .n small{color:var(--dim);font-size:14px}
.row .g{color:var(--dim);font-size:16px;text-align:right}
.meter{height:6px;background:#2a1f45;position:relative}
.meter>i{position:absolute;left:0;top:0;bottom:0;display:block}
.drv{display:flex;flex-direction:column;gap:3px;font-size:17px;min-width:0}
.drv-head{display:flex;align-items:baseline;gap:8px;min-width:0}
.drv-head .st{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right;color:var(--dim)}
.drv-head .st.bad{color:var(--bad)}
.drv-head .nm{cursor:help}
.foot{display:flex;flex-wrap:wrap;gap:2px 10px;align-items:center;font-size:15px;color:var(--dim);font-variant-numeric:tabular-nums}
.foot b{color:var(--ink);font-weight:400}
.foot .pm{display:inline-flex;gap:4px;align-items:center}
.foot .meter{display:inline-block;width:22px;height:5px}
.drv-head .hd{color:var(--ink);font-variant-numeric:tabular-nums}.drv-head .hd span{color:var(--dim)}
.stats{font-size:15px;color:var(--dim);font-variant-numeric:tabular-nums;display:flex;flex-wrap:wrap;gap:0 10px}
.stats b{color:var(--ink);font-weight:400}
.abil{display:flex;flex-wrap:wrap;gap:3px}
.ab{font-family:"Press Start 2P",monospace;font-size:6px;padding:3px 4px;border:1px solid var(--line);color:var(--dim);cursor:help}
.ab.on{background:var(--gold);border-color:var(--gold);color:#1a0a1a}
.ab.off{opacity:.45}
.ab.warn{background:#ff3b3b;border-color:#ff3b3b;color:#1a0a1a}
.tunerow{display:flex;flex-wrap:wrap;gap:0 10px;font-size:15px;color:var(--dim);font-variant-numeric:tabular-nums}
.g-S{color:var(--gold)}.g-A{color:var(--good)}.g-B{color:var(--cyan)}.g-C{color:var(--warn)}.g-D{color:var(--bad)}
/* Night Tune */
.nt-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;flex-wrap:wrap}
.nt-sub{font-size:17px;color:var(--dim);margin:0}
.nt-steps{display:flex;gap:3px;align-items:center;margin:6px 0}
.nt-steps i{display:block;width:10px;height:10px;background:#2a1f45}
.nt-steps i.done{background:var(--cyan)}.nt-steps i.now{background:var(--pink)}
.nt-steps span{font-family:"Press Start 2P",monospace;font-size:6px;color:var(--dim);padding:0 3px}
.nt-steps span.done{color:var(--cyan)}
.gauges{display:grid;grid-template-columns:74px minmax(0,1fr) 30px 40px;gap:5px 8px;align-items:center;font-size:17px;font-variant-numeric:tabular-nums}
.gauges .gl{color:var(--dim)}
.gbar{position:relative;height:14px;background:#1a1230;border:1px solid var(--line)}
.gbar .band{position:absolute;top:0;bottom:0;background:rgba(46,242,255,.16);border-left:1px solid var(--cyan);border-right:1px solid var(--cyan)}
.gbar .reach{position:absolute;top:0;bottom:0;background:rgba(46,242,255,.1)}   /* the band plus 5 each side: still in reach of the sweet spot */
.gbar .win{position:absolute;top:0;bottom:0;background:rgba(255,210,63,.35)}
.gbar .val{position:absolute;top:-3px;bottom:-3px;width:3px;margin-left:-1px;background:var(--pink)}
.grade{font-family:"Press Start 2P",monospace;font-size:9px;text-align:center}
.quotes{border:1px solid var(--line);padding:4px 6px;margin:6px 0;min-height:24px;font-size:17px;color:var(--cyan)}
.quotes p{margin:0}
.fbt{display:grid;grid-template-columns:36px max-content max-content;justify-content:start;gap:0 14px;font-variant-numeric:tabular-nums}
.fbt b{font-family:"Press Start 2P",monospace;font-size:7px;font-weight:400;color:var(--dim);letter-spacing:.08em;align-self:end}
.fbt>span:nth-child(3n+1){color:var(--dim)}.fbt>span:nth-child(3n+2){text-align:right;color:var(--dim)}
.fbt .up{color:var(--good)!important}.fbt .dn{color:var(--bad)!important}
.offer{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px}
.tcard{font-family:"VT323","Courier New",monospace;font-size:17px;text-align:left;padding:5px 7px;line-height:1.1;background:#24163f}
.tcard b{display:block;font-family:"Press Start 2P",monospace;font-size:7px;font-weight:400;color:var(--gold);margin-bottom:3px}
.tcard .up{color:var(--good)}.tcard .dn{color:var(--bad)}
.trim{display:grid;grid-template-columns:repeat(5,auto);gap:4px;align-items:center;font-size:16px}
.cmprow{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;margin:6px 0}
.nt-foot{display:flex;flex-wrap:wrap;gap:6px;justify-content:space-between;align-items:center;margin-top:8px}
.watch{font-size:7px;padding:3px 5px;align-self:center;flex:none}
.drv-body{display:grid;grid-template-columns:minmax(0,1fr);gap:4px 12px}
.meters,.orders{display:flex;flex-direction:column;gap:2px}
.m{display:grid;grid-template-columns:52px minmax(0,1fr) 32px;gap:6px;align-items:center;font-variant-numeric:tabular-nums}
.m>span:first-child{color:var(--dim)}.m>span:last-child{text-align:right}
.m .meter{height:7px}
.flag{position:absolute;top:-2px;bottom:-2px;width:2px;margin-left:-1px;background:var(--ink)}
.flag.short{background:var(--bad)}
.ord{display:grid;grid-template-columns:38px repeat(3,minmax(0,1fr));gap:3px;align-items:center}
.ord>span{color:var(--dim)}
.ord button{font-size:7px;padding:3px 2px}
.drv-head .tag{font-family:"Press Start 2P",monospace;font-size:7px;color:#1a0a1a;background:var(--cyan);padding:3px 5px}
.drv-head b{font-size:19px;font-weight:400;letter-spacing:.04em}
.drv-head .pos{font-size:19px;color:var(--gold)}
.status{font-size:18px}
.feed ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.feed li{font-size:18px;color:var(--dim)}
.feed li.you{color:var(--cyan)}
.feed li.bad{color:var(--pink)}
.feed li span{color:#6b5a99;margin-right:6px}
.result[hidden]{display:none}
.result{display:flex;align-items:flex-start;justify-content:center;min-height:100%}
/* Office screens replace the race screen entirely while one is open. */
.office{position:fixed;inset:0;overflow:auto;padding:16px;background:var(--bg,#0b0716);z-index:10}
.office:not(:has(.result:not([hidden]))){display:none}
body:has(.office .result:not([hidden])) .app{visibility:hidden}
.result .card{background:var(--panel);border:2px solid var(--gold);box-shadow:4px 4px 0 #000;padding:8px 10px;
 width:min(1000px,100%);line-height:1.1}
.result h3{font-family:"Press Start 2P",monospace;font-size:9px;color:var(--gold);margin:0 0 8px}
.result h4{font-family:"Press Start 2P",monospace;font-size:7px;color:var(--dim);margin:0 0 4px;font-weight:400;letter-spacing:.08em}
.gcols{display:grid;grid-template-columns:minmax(0,210px) minmax(0,1fr);gap:12px}
@media(max-width:700px){.gcols{grid-template-columns:1fr}}
.gres{margin:0 0 6px;padding-left:24px;font-size:17px;font-variant-numeric:tabular-nums}
.gres li.you{color:var(--cyan)}
/* the result reveal: the podium drops in P3, P2, P1, then the rest; your finishes stamp in, then points and the table */
.gres.reveal li{animation:dropin .35s ease-out both}
.gres.reveal li:nth-child(3){animation-delay:.15s}.gres.reveal li:nth-child(2){animation-delay:.45s}.gres.reveal li:nth-child(1){animation-delay:.75s}
.gres.reveal li:nth-child(n+4){animation-delay:1.05s}
@keyframes dropin{from{opacity:0;transform:translateY(-14px) scale(1.3)}to{opacity:1;transform:none}}
.stamps{display:flex;align-items:flex-end;gap:14px;margin:2px 0 8px}
.stamp{display:flex;flex-direction:column;align-items:center;font-family:"Press Start 2P",monospace;font-size:26px;color:var(--cyan);text-shadow:3px 3px 0 #000;animation:reveal .4s cubic-bezier(.2,1.6,.4,1) both}
.stamp:nth-child(1){animation-delay:1.3s}.stamp:nth-child(2){animation-delay:1.55s}
.stamp small{font-size:7px;color:var(--dim);text-shadow:none;margin-bottom:4px}.stamp.dnf{color:#ff3b3b}
.stampnote{margin-left:10px;align-self:center;font-size:18px;color:var(--gold);animation:reveal .4s ease-out 1.85s both}
.gmoney{font-size:17px;font-variant-numeric:tabular-nums;margin:0}
.gmoney b{color:var(--gold);font-weight:400}
.regwatch{border:1px solid var(--warn);color:var(--warn);padding:3px 6px;margin:0 0 6px;font-size:17px}
.regwatch.hit{border-color:var(--bad);color:var(--bad)}
.ptab{width:100%;border-collapse:collapse;font-size:17px;font-variant-numeric:tabular-nums}
.ptab th{font-family:"Press Start 2P",monospace;font-size:6px;color:var(--dim);font-weight:400;text-align:left;padding:2px 4px}
.ptab td{padding:2px 4px;border-top:1px solid var(--line);white-space:nowrap}
.ptab td.over{color:var(--warn)}
.ptab button{font-size:7px;padding:4px 5px}
/* Anything you can't press looks it: dimmed, no pulse. */
button:disabled{opacity:.4;cursor:not-allowed;animation:none}
.ptab button:disabled{opacity:.35;cursor:default}
.gfoot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:8px;font-size:16px;color:var(--dim)}
.sp-list{display:flex;flex-direction:column;gap:6px;margin:6px 0}
.sp-slot{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:17px}
.sp-slot.open{align-items:flex-start}
.sp-slot .offer{flex:1;min-width:0;grid-template-columns:repeat(3,minmax(0,1fr)) auto}
.mk .sp-slot .offer{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.crew .sp-slot{display:grid;grid-template-columns:150px 1fr;gap:2px 10px;align-items:center;padding:3px 0;border-bottom:1px solid var(--line)}
.crew .who{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.crew .who button{padding:4px 10px}
.crew small.dim{grid-column:2;color:var(--dim);font-size:15px}
@media (max-width:640px){.crew .sp-slot{grid-template-columns:1fr}.crew small.dim{grid-column:1}}
.stlist.fdlist li{grid-template-columns:minmax(0,1fr) 170px 170px 96px}.stlist.fdlist.pts li{grid-template-columns:28px minmax(0,1fr) 60px 170px 96px}
.stlist.fxlist li{grid-template-columns:minmax(0,1fr) 40px 90px minmax(0,1.4fr) 44px}
/* The field plot (scouting.js): a bar per rival over its read range, your car as the cyan line through the stack. */
.fplot{--fp-name:100px;margin:6px 0 2px}.fplot h4{margin:0 0 3px}
.fp-body{position:relative}
.fp-row{display:grid;grid-template-columns:var(--fp-name) 1fr;align-items:center;height:11px}
.fp-name{font-size:13px;line-height:1;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fp-track{position:relative;height:11px;border-left:1px solid var(--line);border-right:1px solid var(--line)}
.fp-track i{position:absolute;top:3px;height:5px;min-width:2px}
.fp-you{position:absolute;top:-2px;bottom:-2px;width:2px;margin-left:-1px;background:var(--cyan);box-shadow:0 0 0 1px #000}
.fp-you span{position:absolute;top:100%;left:4px;font:13px/1 VT323,monospace;color:var(--cyan);white-space:nowrap}
.fp-axis{display:flex;justify-content:space-between;margin-left:var(--fp-name);font-size:12px;color:var(--dim)}
.fp-tabs{margin:2px 0 4px}.fp-tabs button{padding:2px 6px;font-size:7px}
.fp-track i,.fp-you{transition:left .5s ease-out,width .5s ease-out}
.fp-quote{margin:14px 0 0;color:var(--cyan);font-size:16px}.fp-quote b{font-weight:400;color:var(--gold)}
.stlist.fdlist li.you b{color:var(--cyan)}
.stlist.dflist li{grid-template-columns:110px 50px 50px 54px 50px 1fr 92px 74px}
.stlist .abil{color:var(--dim);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ncrows{list-style:none;margin:6px 0;padding:0}
/* the car on its display stand (render/showcase.js), beside what's being built */
.carstage{display:flex;gap:10px;align-items:flex-start}.carstage>:last-child{flex:1;min-width:0}
.showcase{position:relative;box-sizing:content-box;flex:0 0 auto;width:320px;height:180px;margin-top:6px;border:1px solid var(--line);background:#120a24}
.showcase canvas{display:block;width:320px;height:180px;image-rendering:pixelated;image-rendering:crisp-edges}
.showcase small{position:absolute;left:6px;top:5px;font-family:"Press Start 2P",monospace;font-size:7px;color:var(--gold);pointer-events:none}
.ncrows li{display:grid;grid-template-columns:110px 70px 100px 80px 1fr;gap:8px;align-items:center;padding:3px 0;border-bottom:1px solid var(--line);font-size:17px}
.ncrows b{font-family:"Press Start 2P",monospace;font-size:7px;font-weight:400;color:var(--gold)}.ncrows .lv{text-align:right;font-size:20px}
.mtlv{display:flex;gap:14px;flex-wrap:wrap}.mtoffer .tcard{font-size:18px;padding:8px}
@media (max-width:640px){.ncrows li{grid-template-columns:1fr 1fr}.carstage{flex-wrap:wrap}.showcase,.showcase canvas{width:100%;height:auto;aspect-ratio:16/9}}
.stlist{list-style:none;margin:4px 0;padding:0;max-height:52vh;overflow:auto;font-size:16px}
.stlist li{display:grid;grid-template-columns:130px 34px repeat(4,52px) 1fr 74px;align-items:center;gap:6px;padding:2px 4px;border-bottom:1px solid var(--line)}
.stlist li.head{position:sticky;top:0;z-index:1;background:var(--panel);font-family:"Press Start 2P",monospace;font-size:7px;color:var(--dim);letter-spacing:.06em;padding-top:3px;padding-bottom:3px}
.stlist .sorth{all:unset;cursor:pointer;font:inherit;color:inherit;letter-spacing:inherit;white-space:nowrap}.stlist .sorth:hover,.stlist .sorth[aria-sort]{color:var(--gold)}
.stlist li.taken{opacity:.5}.stlist b{font-family:"Press Start 2P",monospace;font-size:7px;font-weight:400;color:var(--gold)}
.stlist .fit{color:var(--cyan)}.stlist .sal{color:var(--dim)}.stlist .stat{font-family:"Press Start 2P",monospace;font-size:7px;color:var(--dim)}
.stlist button{padding:4px 6px}.sk.off{opacity:.35}
@media (max-width:640px){.stlist li{grid-template-columns:1fr 30px repeat(4,auto);}.stlist .sal,.stlist .stat{grid-column:span 2}}
.stpool{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:4px;margin:4px 0;max-height:46vh;overflow:auto}
.stc{background:#24163f;padding:4px 6px;font-size:16px;line-height:1.1}.stc.dim{opacity:.45}
.stc b{font-family:"Press Start 2P",monospace;font-size:7px;font-weight:400;color:var(--gold)}.stc small{color:var(--dim);font-size:14px}
.sk{display:inline-block;margin-right:6px;font-size:15px}.sk1{color:#6c5c8f}.sk2{color:var(--dim)}.sk3{color:var(--ink)}.sk4{color:var(--good)}.sk5{color:var(--gold)}
.stroles{display:flex;gap:3px;margin-top:3px}.stroles button{flex:1;padding:4px 2px}
.stsort{font-family:"Press Start 2P",monospace;font-size:7px;color:var(--dim);display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.stsort button[aria-pressed="true"]{background:var(--gold);color:#140c26}
.df-picks{list-style:none;margin:4px 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px 10px;font-size:16px;color:var(--dim)}
.df-picks span{display:inline-block;min-width:18px}.df-picks b{font-weight:400;color:var(--ink)}
.df-pool{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:4px;margin:4px 0}
@media (max-width:640px){.df-picks{grid-template-columns:1fr 1fr}}
.df-picks.st-hires{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:640px){.df-picks.st-hires{grid-template-columns:1fr}}
.sp-tag{font-family:"Press Start 2P",monospace;font-size:7px;color:var(--dim);min-width:44px}
.sp-slot b{font-weight:400}
.pips{color:var(--cyan);letter-spacing:1px}
.tcard .pips{display:block;color:var(--gold);font-size:15px;margin-bottom:2px}.gobj .pips{color:var(--gold);margin-right:6px}
.hq{display:flex;flex-direction:column;gap:4px}
.gbank{color:var(--gold);font-weight:400}
.ptab-wrap{overflow-x:auto}
.gobj{list-style:none;margin:0 0 6px;padding:0;font-size:17px}
.gobj b{font-weight:400}
.gdrivers{margin-top:8px;display:flex;flex-direction:column;gap:3px}
.raise{border:1px solid var(--gold);padding:4px 6px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;font-size:17px}
.raise b{font-family:"Press Start 2P",monospace;font-size:7px;font-weight:400;color:var(--gold)}
.raise button{font-size:7px;padding:5px 6px}
.qrow{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 8px;font-size:17px;border:1px solid var(--pink);padding:2px 6px}
.qrow b{color:var(--gold);font-weight:400}
.qrow button{font-size:7px;padding:5px 6px}
.qgrid{columns:2;column-gap:18px}
.qstart{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;font-size:17px;margin:4px 0}
.parts{display:grid;grid-template-columns:repeat(4,auto minmax(0,1fr));gap:2px 6px;align-items:center;font-size:16px}
.parts>span{color:var(--dim)}
.parts .meter{height:6px}
@media (prefers-reduced-motion:reduce){.stage::after{display:none}}
/* Garage schedule: one row per race; the race just run is highlighted, races to come are dimmed. */
.sched{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px;font-size:17px}
.sched li{display:grid;grid-template-columns:22px minmax(0,1.4fr) 90px minmax(0,1.6fr);gap:8px}
.sched li.now{color:var(--gold)}.sched li.next{color:var(--dim)}
/* ---- Full-bleed race view (>=760px): the track fills the window; everything else floats over it,
   Golden Lap style: standings top-left, radio top-right, both cars bottom-left, speed bottom-right. ---- */
.foot{height:17px;overflow:hidden;flex-wrap:nowrap}   /* one fixed line, empty or not */
@media(min-width:760px){
 body{padding:0}
 .app{display:block;position:relative;height:100dvh;max-width:none;min-height:0}
 .stage-wrap{position:absolute;inset:0}
 .stage-box{height:100%}
 .stage{outline:0;box-shadow:none}
 header{position:absolute;right:8px;bottom:8px;z-index:3}
 header>div:first-child,.btns .grp>span{display:none}
 .side{position:absolute;left:8px;top:8px;width:200px;z-index:3;display:block}
 .tower{background:rgba(20,12,38,.85);padding:3px;border-width:1px;box-shadow:none}
 .tower h2,.feed h2{display:none}
 .row{grid-template-columns:18px 5px minmax(0,1fr) 62px;height:17px;font-size:16px;overflow:hidden;white-space:nowrap}
 .drv-head{height:22px;overflow:hidden}.drv-head .st{flex:1}
 .feed{position:fixed;right:8px;top:60px;width:290px;background:none;border:0;box-shadow:none;padding:0;overflow:visible;z-index:3}
 .feed li{background:rgba(20,12,38,.9);border:1px solid var(--line);padding:2px 6px;margin-bottom:3px;font-size:17px}
 .feed li span{display:none}
 .feed li:nth-child(n+4),.feed li.old{display:none}
 .drivers{position:absolute;left:8px;bottom:8px;width:380px;display:flex;flex-direction:column;gap:4px;z-index:3}
 .drv{background:rgba(20,12,38,.9);padding:4px 6px;border-width:1px;box-shadow:none;font-size:16px}
 .rows{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2px 10px}
 .rw{grid-template-columns:44px minmax(0,1fr) 26px 36px;gap:4px;font-size:15px}
 .lv.pill{width:36px}
 .drv-head{gap:6px}.drv-head b,.drv-head .pos{font-size:17px}
}
@media(min-width:760px){
 /* The qualifying row sits over the space the hidden race rows keep, so the card keeps its size. */
 .drv{position:relative}
 .qrow{position:absolute;left:6px;right:6px;bottom:4px;height:38px;overflow:hidden;background:rgba(20,12,38,.95);align-content:center;font-size:15px}
}
/* Season hub: a few summary cards, each opening its own screen. */
.hub{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px}
.hcard{display:flex;flex-direction:column;gap:6px;justify-content:space-between;background:var(--panel2);border:1px solid var(--line);padding:6px 8px;min-height:110px}
.hcard.alert{border-color:var(--pink)}
.hcard small{color:var(--dim);font-size:16px}.hcard small.bad{color:var(--pink)}
.hcard button{align-self:flex-start}
.nt-top .gbank{color:var(--gold)}
/* Starting grid: two staggered columns. Set strategy: a block per car. */
.sgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;max-width:520px;margin:0 auto}
.sgrid ol{margin:0;padding-left:30px;display:flex;flex-direction:column;gap:8px}
.sgrid ol.even{margin-top:16px}
.sgrid li{border:1px solid var(--line);padding:2px 8px;background:var(--panel2)}
.sgrid li.you{border-color:var(--cyan);color:var(--cyan)}
.strat{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.strat section{background:var(--panel2);border:1px solid var(--line);padding:6px 8px;display:flex;flex-direction:column;gap:6px}
.srow{display:flex;align-items:center;gap:6px}.srow>span:first-child{width:96px;color:var(--dim)}
.srow .lv.pill{width:72px}.srow .lv.pill button.lvl{height:14px}
/* ---- Animation: pulse what needs the player; show what a choice did. ---- */
@keyframes need{0%,100%{box-shadow:0 0 0 1px var(--gold),2px 2px 0 #000}50%{box-shadow:0 0 0 3px var(--gold),2px 2px 0 #000}}
.need{animation:need 1.2s ease-in-out infinite}
@keyframes pop{0%{filter:brightness(2.2);transform:scale(1.04)}100%{filter:none;transform:none}}
.pop{animation:pop .7s ease-out}
.gbar .val{transition:left .5s ease-out}
.gbar .band,.gbar .reach{transition:left .7s ease-out,width .7s ease-out}
.gbar .ghost{position:absolute;top:-3px;bottom:-3px;width:3px;margin-left:-1px;background:var(--ink);opacity:.6;pointer-events:none}
.gbar .ghost i{position:absolute;top:-15px;left:3px;font-style:normal;font-size:14px;white-space:nowrap}
.gbar .ghost.up i,.dfloat.up{color:var(--good)}.gbar .ghost.dn i,.dfloat.dn{color:var(--bad)}
.dfloat{position:absolute;top:-8px;margin-left:5px;font-size:20px;text-shadow:1px 1px 0 #000,0 0 4px currentColor;pointer-events:none;z-index:2;animation:dfloat 1.4s ease-out forwards}
@keyframes dfloat{0%{transform:translateY(0);opacity:1}60%{opacity:1}100%{transform:translateY(-20px);opacity:0}}
@keyframes reveal{from{opacity:0;transform:scale(2.2)}to{opacity:1;transform:none}}
.grade.reveal,.gbar .win.reveal{animation:reveal .5s ease-out both}
.nt-steps i.now{animation:need 1.2s ease-in-out infinite}
.gbar{overflow:visible}
.tcard.hover{outline:2px solid var(--ink);outline-offset:-2px}
/* ---- Night Tune sweet spot payoff ---- */
#tune{transition:background .6s,box-shadow .6s,border-color .6s}
#tune.sweet{border-color:var(--gold);background:linear-gradient(180deg,#3a2a0e,#1d1426 60%);box-shadow:0 0 0 2px var(--gold),0 0 28px rgba(255,210,63,.45),4px 4px 0 #000}
#tune.perfect{background:linear-gradient(120deg,#4a3410,#2a1b40,#4a3410);background-size:300% 100%;animation:shimmer 3s linear infinite}
@keyframes shimmer{from{background-position:0% 0}to{background-position:300% 0}}
#tune.flash-in{animation:flashin .8s ease-out}
#tune.perfect.flash-in{animation:flashin .8s ease-out,shimmer 3s linear infinite}
@keyframes flashin{0%{filter:brightness(2.4)}100%{filter:none}}
.gauges .gl.sweet{color:var(--gold)}
.gbar.sweet{border-color:var(--gold);background:linear-gradient(90deg,#3a2a0e,#5a4312,#3a2a0e);box-shadow:0 0 8px rgba(255,210,63,.6)}
.gbar.sweet .val{background:#fff6c9;box-shadow:0 0 6px var(--gold)}
.gbar.burst-now{animation:barpop .6s ease-out both}
@keyframes barpop{0%{transform:scaleY(1)}40%{transform:scaleY(1.6);filter:brightness(2)}100%{transform:none;filter:none}}
.gbar .star{position:absolute;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;background:var(--gold);box-shadow:0 0 4px var(--gold);pointer-events:none;opacity:0;animation:star .9s ease-out forwards}
@keyframes star{0%{opacity:1;transform:translate(0,0)}100%{opacity:0;transform:translate(var(--dx),var(--dy))}}
.nt-banner{font-family:"Press Start 2P",monospace;font-size:11px;color:#1a0a1a;background:var(--gold);padding:6px 10px;margin:4px 0;text-align:center;box-shadow:0 0 16px rgba(255,210,63,.7),3px 3px 0 #000}
#tune.perfect .nt-banner{font-size:13px;background:linear-gradient(90deg,#ffd23f,#fff6c9,#ffd23f)}
.nt-banner.arrive{animation:bannerin .7s ease-out both}
@keyframes bannerin{0%{opacity:0;transform:scale(2.2)}70%{opacity:1;transform:scale(.95)}100%{transform:none}}
/* Garage: the two cars side by side, then every piece you own grouped by part type. */
.pcars{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:8px;margin-bottom:8px}
.pcar,.pgroup{background:var(--panel2);border:1px solid var(--line);padding:6px 8px;display:flex;flex-direction:column;gap:3px}
.prow{display:grid;grid-template-columns:78px 62px minmax(0,1fr) auto;gap:6px;align-items:center;font-size:17px}
.pstock{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}
.pitem{display:grid;grid-template-columns:62px minmax(0,1fr) auto;gap:6px;align-items:center;font-size:17px}
.pitem .btns{display:flex;gap:3px}.pitem button{font-size:7px;padding:4px 5px}
.pcond{display:flex;align-items:center;gap:4px;font-size:15px;color:var(--dim)}.pcond .meter{flex:1;height:6px;min-width:30px}
.pgroup>button,.pgroup>.dim{align-self:flex-start;margin-top:3px}
.pgroup h4 .over{color:var(--pink);font-weight:400}
/* Special tuning cards: they know where the targets are. */
.tcard.special{background:linear-gradient(135deg,#3a2560,#24163f);border:1px solid var(--cyan)}.tcard.special b{color:var(--cyan)}
/* Credits (ui/credits.js): the first screen. */
.crlist{display:grid;grid-template-columns:96px minmax(0,1fr);gap:6px 10px;margin:0;font-size:17px}
.crlist dt{font-family:"Press Start 2P",monospace;font-size:7px;color:var(--dim);padding-top:3px}
.crlist dd{margin:0}.crlist a{color:var(--cyan)}
#creditsOv .card{width:min(640px,100%)}
@media(max-width:500px){.crlist{grid-template-columns:1fr;gap:2px}.crlist dd{margin-bottom:6px}}
/* Sound (audio/director.js): fixed, so it works over the office screens too. The button opens the volume sliders. */
#audioBtn{position:fixed;right:8px;bottom:36px;z-index:60;font-size:7px;padding:4px 6px}   /* just above the SIM buttons */
#audioBtn.off{opacity:.6}
#audioPop{position:fixed;right:8px;bottom:58px;z-index:61;background:var(--panel);outline:2px solid var(--line);box-shadow:3px 3px 0 #000;
 padding:5px 6px;display:flex;flex-direction:column;gap:3px;width:170px}
#audioPop[hidden]{display:none}
#audioPop label{display:grid;grid-template-columns:34px minmax(0,1fr) 22px;gap:4px;align-items:center;font-size:15px}
#audioPop label span{font-family:"Press Start 2P",monospace;font-size:7px;color:var(--dim)}
#audioPop input{width:100%;margin:0;accent-color:var(--pink)}
#audioPop b{font-weight:400;text-align:right;font-variant-numeric:tabular-nums}
#audioPop button{font-size:7px;padding:4px 6px;align-self:flex-start}
/* The track preview (ui/preview.js): the race view with the HUD put away and one card where the tower sits. */
body.previewing .side,body.previewing .drivers,body.previewing header{visibility:hidden}
.track-preview{position:fixed;left:8px;top:8px;width:264px;max-width:calc(100vw - 16px);z-index:4;background:rgba(20,12,38,.92);
 border-color:var(--gold);display:flex;flex-direction:column;gap:4px;font-size:17px}
.track-preview[hidden]{display:none}
.track-preview p,.track-preview dl,.track-preview ul{margin:0}
.track-preview .tp-kick,.track-preview .tp-h{font-family:"Press Start 2P",monospace;font-size:7px;color:var(--dim);letter-spacing:.08em}
.track-preview h2{font-family:"Press Start 2P",monospace;font-size:11px;line-height:1.35;color:var(--pink);margin:0;letter-spacing:0}
.track-preview .tp-sub{color:var(--dim)}
.track-preview dl{display:grid;grid-template-columns:44px minmax(0,1fr);gap:2px 6px}
.track-preview dt{color:var(--dim)}
.track-preview ul{padding:0;list-style:none;color:var(--cyan)}
.track-preview button{margin-top:2px;align-self:stretch}