:root{
  --bg:#0b0f14; --card:#151c26; --panel:rgba(14,18,24,.86); --line:rgba(255,255,255,.12);
  --text:#eef1f5; --muted:#9aa5b4; --accent:#ff9f1a; --accent2:#ffb84d; --good:#2fd27a; --bad:#ff4d4f; --radius:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--text);overflow:hidden;
  font:16px/1.45 "Segoe UI",Inter,system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;
  touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
canvas#gl{position:fixed;inset:0;display:block;width:100%;height:100%;touch-action:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
a{color:inherit}
[hidden]{display:none !important}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:12px 22px;border-radius:999px;background:var(--accent);color:#141414;
  font-weight:700;text-decoration:none;border:0;cursor:pointer;font-size:16px;transition:transform .1s,background .15s}
.btn:hover{background:var(--accent2)} .btn:active{transform:scale(.98)}
.btn.ghost{background:rgba(255,255,255,.08);color:var(--text);border:1px solid var(--line)}
.btn.ghost:hover{background:rgba(255,255,255,.14)}
.btn.small{padding:8px 14px;font-size:14px}
.btn.big{font-size:18px;padding:14px 30px}
.kicker{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:700}
.muted{color:var(--muted)}

/* full screens */
.screen{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:16px 16px max(48px,calc(env(safe-area-inset-bottom) + 40px));overflow:auto;
  background:linear-gradient(180deg,rgba(11,15,20,.55),rgba(11,15,20,.92));transition:opacity .35s}
.screen.hide{opacity:0;pointer-events:none}
#loading{background:var(--bg)}
.screen .box{max-width:560px;width:100%;text-align:center;margin:auto}
.screen .box.wide{max-width:900px}
.screen .box.left{text-align:left}
.screen h1{font-size:clamp(26px,4.6vw,44px);line-height:1.08;letter-spacing:-.02em;margin:8px 0 10px}
.screen .lead{color:#cfd5dd;font-size:clamp(15px,1.9vw,18px)}
.fine{margin-top:14px;font-size:12px;color:var(--muted)}
.pbar{height:6px;border-radius:6px;background:rgba(255,255,255,.12);margin:22px auto 0;max-width:420px;overflow:hidden}
.pbar i{display:block;height:100%;width:0;background:var(--accent);transition:width .2s}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.actions.center{justify-content:center}
.actions.col{flex-direction:column;align-items:center}
.actions.col .btn{min-width:260px}
.meta{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:14px 0 6px}
.meta span{font-size:13px;border:1px solid var(--line);border-radius:999px;padding:5px 11px;color:#dfe4ea;background:rgba(0,0,0,.35)}

.topline{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:8px}
.brand{display:flex;align-items:center;gap:8px;font-weight:800;text-decoration:none;font-size:17px}
.brand img{width:26px;height:26px}
.badge3d{font-size:11px;font-weight:800;color:#141414;background:var(--accent);border-radius:6px;padding:1px 6px}
.scen{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin:22px 0 16px;text-align:left}
.sc{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 16px 14px;cursor:pointer;
  transition:transform .12s,border-color .15s,background .15s;display:flex;flex-direction:column;gap:6px}
.sc:hover{border-color:rgba(255,159,26,.6);background:#18212d} .sc:active{transform:scale(.99)}
.sc .n{font-size:12px;font-weight:700;color:var(--accent);letter-spacing:.08em;text-transform:uppercase}
.sc h3{font-size:18px;line-height:1.2}
.sc p{font-size:14px;color:#c4ccd6}
.sc .tag{position:absolute;top:12px;right:12px;font-size:11px;font-weight:700;border-radius:999px;padding:3px 9px}
.sc .tag.free{background:rgba(47,210,122,.15);color:var(--good);border:1px solid rgba(47,210,122,.4)}
.sc .tag.lock{background:rgba(255,159,26,.12);color:var(--accent);border:1px solid rgba(255,159,26,.4)}
.sc .best{font-size:12px;color:var(--muted);margin-top:auto}
.menufoot{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;align-items:center;font-size:14px;color:var(--muted)}
.sel{display:flex;gap:6px;align-items:center}
.sel select{font:inherit;color:var(--text);background:var(--card);border:1px solid var(--line);border-radius:8px;padding:5px 8px}
.cred{list-style:none;display:grid;gap:8px;margin:12px 0;font-size:15px;color:#d4dae2}
.cred a{color:var(--accent)}
.keys{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0;font-size:15px}
kbd{display:inline-block;min-width:24px;padding:1px 6px;border-radius:6px;background:rgba(255,255,255,.1);border:1px solid var(--line);font:600 13px/1.6 inherit;text-align:center;margin-right:2px}

/* report */
#total{font-size:14px;font-weight:700;color:var(--muted);margin-top:8px;font-variant-numeric:tabular-nums}
#total small{font-weight:600}
#repTitle.ok{color:var(--good)} #repTitle.ko{color:var(--accent)} #repTitle.na{color:var(--muted)}
.results{display:grid;gap:8px;margin:16px 0 6px;text-align:left;max-height:42vh;overflow:auto}
.res{display:flex;gap:12px;align-items:flex-start;background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.res .tm{font-variant-numeric:tabular-nums;color:var(--muted);font-size:13px;flex:none;width:44px;padding-top:2px}
.res .t{font-weight:600;font-size:15px}
.res .s{font-size:13.5px;color:#c4ccd6}
.res .p{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums;flex:none;color:var(--bad)}
.res.tip .p{color:var(--accent)}
.res.ok{border-color:rgba(47,210,122,.4)} .res.ok .p{color:var(--good)}

/* HUD */
#hud{position:fixed;inset:0;z-index:10;pointer-events:none}
.hudtop{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:flex-start;gap:8px;
  padding:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left))}
.chips{display:flex;gap:6px}
.chip{pointer-events:auto;background:rgba(0,0,0,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid var(--line);
  border-radius:999px;padding:6px 12px;font-size:13px;color:#dfe4ea;display:flex;gap:8px;align-items:center;white-space:nowrap}
.chip.icon{width:34px;height:34px;justify-content:center;padding:0}
#chipScore{font-variant-numeric:tabular-nums;font-weight:700}
.instr{position:absolute;left:50%;top:max(54px,calc(env(safe-area-inset-top) + 44px));transform:translate(-50%,-8px);opacity:0;transition:all .3s;
  display:flex;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:8px 16px 8px 10px;max-width:calc(100% - 24px)}
.instr.on{opacity:1;transform:translate(-50%,0)}
.instr .arrow{width:44px;height:44px;flex:none;border-radius:10px;background:var(--accent);display:grid;place-items:center}
.instr .arrow svg{width:30px;height:30px}
.itext{font-weight:700;font-size:clamp(15px,2vw,19px);line-height:1.2}
.idist{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
#speedo{position:absolute;left:max(14px,env(safe-area-inset-left));bottom:max(14px,env(safe-area-inset-bottom));display:flex;gap:10px;align-items:center;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:8px 14px 8px 8px}
#speedo b{font-size:30px;font-weight:800;font-variant-numeric:tabular-nums;display:inline-block;min-width:2.2ch;text-align:right}
#speedo small{font-size:12px;color:var(--muted);margin-left:4px}
#speedo .sign{width:40px;height:40px;border-radius:50%;border:5px solid #d0102a;background:#fff;color:#111;display:grid;place-items:center;font-weight:800;font-size:15px}
#speedo .gear{font-weight:800;font-size:15px;border:1px solid var(--line);border-radius:6px;padding:0 6px}
#speedo .gear.r{background:var(--bad);color:#fff}
#speedo.over b{color:var(--bad)}
#toasts{position:absolute;left:50%;bottom:max(84px,calc(env(safe-area-inset-bottom) + 74px));transform:translateX(-50%);display:flex;flex-direction:column-reverse;gap:8px;align-items:center;width:min(560px,calc(100% - 24px))}
.toast{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--bad);border-radius:12px;padding:9px 14px;font-size:15px;font-weight:600;
  animation:tin .3s cubic-bezier(.2,.8,.2,1);max-width:100%}
.toast.tip{border-left-color:var(--accent)} .toast.ok{border-left-color:var(--good)} .toast.info{border-left-color:#5aa0ff}
.toast.out{opacity:0;transform:translateY(6px);transition:all .4s}
@keyframes tin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#btnStop{position:absolute;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));pointer-events:auto}

/* touch */
#touch{position:fixed;inset:0;z-index:11;pointer-events:none}
#steerZone{position:absolute;left:0;bottom:0;width:40%;height:62%;pointer-events:auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  padding-bottom:max(70px,calc(env(safe-area-inset-bottom) + 60px));gap:6px;color:rgba(255,255,255,.55);font-size:12px}
#keyHint{position:absolute;left:12px;bottom:92px;font-size:12px;color:rgba(255,255,255,.72);background:rgba(11,15,20,.55);padding:5px 9px;border-radius:8px;pointer-events:none}
#keyHint kbd{font:inherit;font-size:11px;padding:0 4px;border:1px solid rgba(255,255,255,.3);border-radius:4px}
#mouseBar{position:absolute;left:50%;bottom:22px;width:min(420px,46vw);height:6px;margin-left:calc(min(420px,46vw)/-2);border-radius:3px;background:rgba(255,255,255,.18);pointer-events:none}
#mouseBar:before{content:"";position:absolute;left:50%;top:-4px;width:2px;height:14px;margin-left:-1px;background:rgba(255,255,255,.45)}
#mouseBar i{position:absolute;top:-5px;left:50%;width:14px;height:16px;margin-left:-7px;border-radius:4px;background:#ff9f1a}
#wheelIcon{width:92px;height:92px;border-radius:50%;border:9px solid rgba(255,255,255,.35);position:relative;background:rgba(0,0,0,.15)}
#wheelIcon:after{content:"";position:absolute;left:50%;top:50%;width:9px;height:42px;margin-left:-4.5px;background:rgba(255,255,255,.35);border-radius:4px}
#wheelIcon:before{content:"";position:absolute;left:-2px;right:-2px;top:50%;height:9px;margin-top:-6px;background:rgba(255,255,255,.35);border-radius:4px}
#pedals{position:absolute;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));display:flex;gap:12px;align-items:flex-end;pointer-events:auto}
.pedal{position:relative;overflow:hidden;width:74px;height:110px;border-radius:14px;background:rgba(0,0,0,.45);border:2px solid rgba(255,255,255,.3);display:grid;place-items:center;font-weight:800;font-size:14px;color:#fff}
.pedal span{position:relative}
.pedal .pfill{position:absolute;left:0;right:0;bottom:0;height:0;background:rgba(255,159,26,.6);transition:height .05s}
#brakeP .pfill{background:rgba(255,77,79,.55)}
.pedal.gas{height:140px;width:68px}
.pedal.on{border-color:var(--accent)}
#brakeP.on{border-color:var(--bad)}
/* touch buttons: between the steering zone (left 40%) and the pedals; two rows, every target at least 44x44 */
.tbtns{position:absolute;left:40%;right:calc(max(12px,env(safe-area-inset-right)) + 164px);bottom:max(10px,env(safe-area-inset-bottom));display:flex;justify-content:center;pointer-events:none}
.tbgrid{display:grid;grid-template-columns:repeat(4,48px);grid-template-areas:"lookL horn rev lookR" "indL shoulder shoulder indR";gap:6px;pointer-events:auto}
.tb[data-t=indL]{grid-area:indL}.tb[data-t=lookL]{grid-area:lookL}.tb[data-t=horn]{grid-area:horn}.tb[data-t=rev]{grid-area:rev}.tb[data-t=lookR]{grid-area:lookR}.tb[data-t=shoulder]{grid-area:shoulder;width:auto}.tb[data-t=indR]{grid-area:indR}
.tb{width:48px;height:48px;border-radius:12px;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.25);color:#fff;font-weight:700;font-size:15px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;line-height:1.05;padding:2px 0 3px}
.tb .ic{font-size:15px}.tb .lb{font-size:9.5px;font-weight:600;color:rgba(255,255,255,.82);white-space:nowrap}
.tb.on{background:rgba(47,210,122,.5);border-color:var(--good)}
.tb.blink{background:rgba(47,210,122,.6)}
body.touch #speedo{left:max(12px,env(safe-area-inset-left));bottom:auto;top:max(10px,env(safe-area-inset-top));padding:4px 10px 4px 4px}
body.touch #speedo b{font-size:22px} body.touch #speedo .sign{width:30px;height:30px;border-width:4px;font-size:12px}
body.touch .instr{top:max(8px,env(safe-area-inset-top));max-width:44%;padding:5px 12px 5px 6px;gap:8px} body.touch .instr .arrow{width:30px;height:30px} body.touch .instr .arrow svg{width:22px;height:22px} body.touch .itext{font-size:13px} body.touch .idist{font-size:11px}
body.touch #chipScen{display:none} body.touch .hudtop{justify-content:flex-end} body.touch .toast{font-size:13px;padding:7px 11px} body.touch #toasts{width:min(460px,52%)}
body.touch #toasts{bottom:max(124px,calc(env(safe-area-inset-bottom) + 114px))} /* above the two rows of touch buttons */
body.touch #btnStop{bottom:auto;top:max(54px,calc(env(safe-area-inset-top) + 46px))}
#rotate{display:none;position:fixed;z-index:30;top:max(14px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);font-size:12px;color:var(--muted);
  background:rgba(0,0,0,.6);border:1px solid var(--line);border-radius:999px;padding:5px 10px;white-space:nowrap}
@media (orientation:portrait) and (max-width:820px){ body.touch.driving #rotate{display:block} }
@media (max-height:500px){
  .screen h1{font-size:24px;margin:4px 0 6px} .screen .lead{font-size:14px}
  .scen{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;margin:12px 0 10px}
  .sc{padding:10px 12px} .sc h3{font-size:15px} .sc p{font-size:12.5px}
  #total{font-size:40px} .results{max-height:38vh}
  .pedal{height:92px;width:64px} .pedal.gas{height:118px;width:60px}
  .tb{width:44px;height:44px;font-size:13px} .tbgrid{grid-template-columns:repeat(4,44px);gap:5px} .tb .lb{font-size:9px}
  .itext{font-size:14px} .instr .arrow{width:34px;height:34px}
  #wheelIcon{width:70px;height:70px;border-width:7px}
}

/* progress (game layer) */
.prog{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:12px;margin:18px 0 4px;text-align:left}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.ptitle{font-weight:700;font-size:15px;margin-bottom:8px;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.pmeta{font-weight:500;font-size:12px;color:var(--muted)}
.pnote{font-size:12px;color:var(--muted);margin-top:8px}
.overall{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.overall b{font-size:20px;font-variant-numeric:tabular-nums;min-width:3.2ch;text-align:right}
.meter{flex:1;height:10px;border-radius:6px;background:rgba(255,255,255,.1);overflow:hidden}
.meter i{display:block;height:100%;width:0;background:var(--good);border-radius:6px;transition:width .5s}
.themes{display:grid;gap:5px}
.trow{display:grid;grid-template-columns:1fr 90px 34px;gap:8px;align-items:center;font-size:13px;color:#d4dae2}
.trow .meter{height:6px} .trow .meter i{background:var(--accent)}
.trow span:last-child{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.daily{display:grid;gap:6px}
.ditem{display:flex;justify-content:space-between;align-items:center;gap:8px;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:10px;padding:7px 10px;font-size:13.5px;cursor:pointer}
.ditem:hover{border-color:rgba(255,159,26,.6)}
.ditem small{color:var(--muted);font-size:11.5px;display:block}
.ditem .st{font-size:12px;font-weight:700;color:var(--accent);white-space:nowrap}
.ditem.done{opacity:.6} .ditem.done .st{color:var(--good)}
.streakrow{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-top:10px;font-size:13px;color:#d4dae2;flex-wrap:wrap}
.streakrow input{accent-color:var(--accent);margin-right:6px}
#streakTxt{color:var(--muted);font-size:12.5px}
.missions{display:grid;gap:6px}
.mrow{font-size:12.5px;color:#d4dae2}
.mrow .meter{height:5px;margin-top:3px} .mrow .meter i{background:var(--good)}
.mrow.done{color:var(--good)}
.repthemes{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.repthemes span{font-size:12.5px;border:1px solid var(--line);border-radius:999px;padding:4px 10px;background:rgba(0,0,0,.3)}
#never{position:fixed;z-index:40;left:50%;transform:translateX(-50%);bottom:max(3px,env(safe-area-inset-bottom));font-size:11px;color:rgba(238,241,245,.75);
  background:rgba(0,0,0,.45);border-radius:999px;padding:2px 10px;pointer-events:none;white-space:nowrap}
body.touch .tbtns{bottom:max(22px,calc(env(safe-area-inset-bottom) + 20px))}
body.driving:not(.touch) #never{bottom:4px}
@media (max-width:820px){.prog{grid-template-columns:1fr}}
@media (max-height:500px){.prog{grid-template-columns:1fr 1fr 1fr;gap:8px;margin:10px 0 2px}.pcard{padding:10px 12px}.trow{font-size:12px}.ditem{padding:5px 8px;font-size:12.5px}}

/* tilt steering */
#btnCenter{display:none;font-weight:700}
body.touch.tiltmode #btnCenter{display:flex}
body.tiltmode #steerZone span{visibility:hidden}
body.tiltmode #wheelIcon{opacity:.6}
.sel.chk{display:inline-flex;align-items:center;gap:6px;cursor:pointer}.sel.chk input{accent-color:#ff9f1a;width:16px;height:16px;margin:0}
/* cockpit view: the speed sits where a car shows it, right of the steering wheel (phones: top centre) */
body.cockpit:not(.touch) #speedo{left:calc(50% + 40vh);bottom:max(22px,env(safe-area-inset-bottom))}
body.touch #speedo{left:50%;transform:translateX(-50%);top:max(52px,calc(env(safe-area-inset-top) + 46px))}
/* first-drive explanation */
.tutbox{max-width:600px}
.tuticon{width:132px;height:88px;margin:14px auto 2px}.tuticon svg{width:100%;height:100%}
.tutmore{color:var(--muted);font-size:15px;line-height:1.5;margin:8px auto 0;max-width:520px}
.tutbox kbd,.lead kbd{display:inline-block;min-width:1.6em;padding:1px 6px;border:1px solid var(--line);border-bottom-width:3px;border-radius:6px;background:var(--card);font:700 .9em/1.4 inherit;text-align:center}
.tutdots{display:flex;gap:7px;justify-content:center;margin-top:16px}.tutdots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.2)}.tutdots i.on{background:var(--accent)}
.linkbtn{background:none;border:0;color:var(--muted);text-decoration:underline;font:inherit;cursor:pointer;padding:4px}
@media (max-height:500px){.tuticon{width:96px;height:64px;margin-top:4px}.tutbox h1{font-size:24px;margin:2px 0 6px}.tutmore{font-size:13px}.tutdots{margin-top:8px}}

/* garage (choose your car, colour and co-driver) */
.gstrip{display:flex;align-items:center;gap:12px;margin:16px 0 0;padding:10px 12px 10px 10px;background:linear-gradient(90deg,rgba(255,159,26,.14),rgba(255,159,26,.03));border:1px solid rgba(255,159,26,.35);border-radius:var(--radius);text-align:left}
.gstrip-av svg{display:block}
.gstrip-txt{flex:1;display:flex;flex-direction:column;font-size:13.5px;color:#d4dae2;min-width:0}
.gstrip-txt b{font-size:16px;color:var(--text)}
#garage{align-items:flex-start;overflow-y:auto;padding-bottom:26px;background:linear-gradient(180deg,rgba(11,15,20,0) 0%,rgba(11,15,20,0) 34%,rgba(11,15,20,.88) 50%,rgba(11,15,20,.96))}
#garage .gbox{max-width:1120px;margin:auto auto 0} /* bottom-aligned, but the top stays reachable when it scrolls */
.gbox h1{margin:2px 0 4px;font-size:clamp(24px,3.4vw,34px)} .gbox .lead{font-size:14.5px}
.gcars{display:flex;gap:10px;margin:12px 0 4px;text-align:left;overflow-x:auto;padding-bottom:4px;scroll-snap-type:x proximity}
.gcar{flex:0 0 200px;scroll-snap-align:start;background:var(--card);border:2px solid var(--line);border-radius:14px;padding:10px 12px;cursor:pointer;display:flex;flex-direction:column;gap:4px;transition:border-color .15s,background .15s}
.gcar:hover{border-color:rgba(255,159,26,.55)} .gcar.on{border-color:var(--accent);background:#1c2532}
.gcar .gk{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.gcar h3{font-size:16px;line-height:1.2} .gcar p{font-size:12.5px;color:#c4ccd6}
.gcar .gspec{display:flex;flex-wrap:wrap;gap:4px;margin-top:auto;padding-top:4px}
.gcar .gspec span{font-size:11px;border:1px solid var(--line);border-radius:999px;padding:1px 7px;color:#cfd6de}
.gsub{font-weight:700;font-size:15px;margin:10px 0 6px;text-align:left;display:flex;gap:8px;align-items:baseline}
.gcolors{display:flex;gap:10px;flex-wrap:wrap}
.gcol{width:40px;height:40px;border-radius:50%;border:3px solid rgba(255,255,255,.18);box-shadow:inset 0 -6px 10px rgba(0,0,0,.35),inset 0 5px 8px rgba(255,255,255,.25);cursor:pointer}
.gcol.on{border-color:var(--accent);outline:2px solid rgba(255,159,26,.35);outline-offset:2px}
.gchars{display:flex;gap:8px;text-align:left;overflow-x:auto;padding-bottom:4px}
.gch{flex:0 0 172px}
.gch{display:flex;gap:10px;align-items:center;background:var(--card);border:2px solid var(--line);border-radius:14px;padding:8px 10px;cursor:pointer}
.gch:hover{border-color:rgba(255,159,26,.55)} .gch.on{border-color:var(--accent);background:#1c2532}
.gch b{display:block;font-size:14.5px} .gch small{display:block;font-size:12px;color:var(--muted);line-height:1.25}
.gch svg{flex:none}
.gfoot{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:10px;font-size:14px;color:var(--muted)}
/* the co-driver's speech bubble (HUD) and quote (report) */
#coBubble{position:absolute;left:max(14px,env(safe-area-inset-left));top:max(58px,calc(env(safe-area-inset-top) + 48px));display:flex;gap:10px;align-items:flex-end;max-width:min(380px,calc(100% - 28px));opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s}
#coBubble.in{opacity:1;transform:none} #coBubble.out{opacity:0;transform:translateY(6px)}
#coBubble .coav svg{display:block;border-radius:50%;box-shadow:0 0 0 2px rgba(255,159,26,.7)}
#coBubble .cobody{position:relative;background:#f4f1ea;color:#1b1f24;border-radius:14px 14px 14px 4px;padding:8px 12px;font-size:14.5px;line-height:1.35;box-shadow:0 6px 20px rgba(0,0,0,.35)}
#coBubble .coname{display:block;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:#b4610a}
body.touch #coBubble{bottom:auto;top:max(54px,calc(env(safe-area-inset-top) + 46px));max-width:min(320px,40%)}
body.touch #coBubble .cobody{font-size:12.5px;padding:6px 10px}
.repco{display:flex;gap:10px;align-items:center;justify-content:center;margin:12px auto 0;max-width:460px;text-align:left}
.repco .coav svg{display:block}
.repco > div:last-child{background:#f4f1ea;color:#1b1f24;border-radius:14px 14px 14px 4px;padding:8px 12px;font-size:14.5px}
.repco .coname{display:block;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:#b4610a}
@media (max-height:500px){#garage{padding-bottom:18px}#garage .gbox .lead{display:none}.gcar{flex-basis:170px}.gcar p{display:none}.gch{flex-basis:150px}.gcol{width:32px;height:32px}}
@media (max-width:600px){.gcar{flex-basis:170px}}
/* Kiki Koplamp's bubble: neon, a bit loud */
#coBubble.neon .cobody,.repco.neon > div:last-child{background:linear-gradient(135deg,#ff4fb4,#7a5cff 55%,#2fd6ff);color:#fff;font-weight:700;box-shadow:0 0 0 2px rgba(255,255,255,.55),0 0 22px rgba(255,79,180,.6)}
#coBubble.neon .coname,.repco.neon .coname{color:#fff3a8}
#coBubble.neon.in .cobody{animation:coPop .45s cubic-bezier(.2,1.6,.4,1)}
#coBubble.neon .coav svg{box-shadow:0 0 0 2px #5ff2ff,0 0 14px rgba(95,242,255,.8)}
@keyframes coPop{from{transform:scale(.7) rotate(-3deg)}to{transform:none}}
.gcar:not(.on) p{display:none}
@media (max-height:820px){#garage .gbox .lead{display:none}}
.gcars{align-items:flex-start;scrollbar-width:thin;scrollbar-color:rgba(255,159,26,.5) transparent}
.gchars{scrollbar-width:thin;scrollbar-color:rgba(255,159,26,.5) transparent}
@media (max-height:820px){#garage .gbox .kicker{display:none}#garage .gbox h1{font-size:22px;margin:0 0 2px}}
@media (max-width:980px){body:not(.touch) #coBubble{top:auto;bottom:max(130px,calc(env(safe-area-inset-bottom) + 120px))}}
/* opdrachten (errands) and photo mode */
.errlist{display:grid;gap:10px;margin:16px 0 4px;text-align:left}
.erritem{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;cursor:pointer;transition:border-color .15s,background .15s}
.erritem:hover{border-color:rgba(255,159,26,.6);background:#18212d}
.erritem h3{font-size:17px;line-height:1.2;margin-bottom:3px}
.erritem p{font-size:14px;color:#c4ccd6}
.erritem .em{font-size:12px;color:var(--muted);margin-top:4px}
.edscore{display:flex;gap:28px;justify-content:center;margin:6px 0 4px}
.edscore>div{display:flex;flex-direction:column;align-items:center}
.edscore p{display:flex;align-items:baseline;gap:4px}
.edscore b{font-size:clamp(38px,6vw,56px);font-weight:800;line-height:1}
.edscore small{font-size:16px;color:var(--muted);font-weight:600}
.edscore span{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.edscore>div:last-child b{color:var(--good)}
#photoBar{position:fixed;left:0;right:0;bottom:max(26px,calc(env(safe-area-inset-bottom) + 18px));z-index:15;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;padding:0 16px}
#photoBar .actions{margin-top:0;pointer-events:auto}
.phint{font-size:13px;color:#e6eaef;background:rgba(11,15,20,.6);padding:5px 11px;border-radius:999px;text-align:center}
body.photo #never{opacity:.85}

/* night-ux: speed arc (information only: orange from the limit on) */
#speedo .spd{position:relative;padding-top:13px}
#speedo .sarc{position:absolute;left:50%;top:0;width:76px;height:18px;transform:translateX(-50%);overflow:visible;pointer-events:none}
#speedo .sarc path{fill:none;stroke-width:5;stroke-linecap:round}
#speedo .sbg{stroke:rgba(255,255,255,.14)} #speedo .sfg{stroke:rgba(238,241,245,.75);stroke-dasharray:0 100;transition:stroke .2s}
#speedo .slim{stroke:#ff4d4f;stroke-width:2.5}
#speedo.atlim .sfg{stroke:var(--accent)}
body.touch #speedo .spd{padding-top:10px} body.touch #speedo .sarc{width:62px;height:15px}
/* key hint: shown for the first 15 s of a ride, never inside the toast stack (toasts sit above it while it shows) */
#keyHint{transition:opacity .4s} #keyHint.gone{opacity:0}
body.hint:not(.touch) #toasts{bottom:max(132px,calc(env(safe-area-inset-bottom) + 122px))}
/* a short message that also shows over the report and photo mode (the HUD is hidden there) */
#flash{position:fixed;z-index:45;left:50%;bottom:max(44px,calc(env(safe-area-inset-bottom) + 38px));transform:translate(-50%,8px);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;
  background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--good);border-radius:12px;padding:9px 14px;font-size:14px;font-weight:600;max-width:calc(100% - 32px);text-align:center}
#flash.on{opacity:1;transform:translate(-50%,0)}
/* phones and narrow windows: the instruction card sits left, never over the score chip (max-width set from main.js) */
@media (max-width:899px){
  .instr{left:max(12px,env(safe-area-inset-left));transform:translate(0,-8px)} .instr.on{transform:none}
}
/* menu hero: one big way in, the exercises below, progress folded into compact cards after them */
.hero{padding:6px 0 2px}
.heroact{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:14px}
.heroact #btnDrive{font-size:19px;padding:15px 34px;box-shadow:0 8px 28px rgba(255,159,26,.35)}
.prog.compact{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:4px 0 14px}
.prog.compact .pcard{padding:10px 12px}
.prog.compact .ptitle{font-size:14px;margin-bottom:6px}
.prog.compact .pnote{font-size:11.5px}
.prog.compact .trow{font-size:12px}
.prog.compact .ditem{padding:5px 8px;font-size:12.5px}
@media (max-width:820px){.prog.compact{grid-template-columns:1fr}}
@media (max-height:500px){
  .hero{padding:0} .hero .topline{margin-bottom:2px} .hero h1{font-size:22px;margin:2px 0 4px} .hero .lead{font-size:13px}
  .heroact{margin-top:8px} .heroact #btnDrive{font-size:17px;padding:11px 26px}
  .prog.compact{grid-template-columns:repeat(3,minmax(0,1fr))}
  #menu{align-items:flex-start}
}
/* report: what went well first, then the faults by theme; the score stays small */
.repsum{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:12px 0 0}
.repsum span{font-size:13.5px;font-weight:700;border:1px solid var(--line);border-radius:999px;padding:4px 12px;background:rgba(0,0,0,.3)}
.repsum .sev{border-color:rgba(255,77,79,.5);color:#ffb3b4} .repsum .att{border-color:rgba(255,159,26,.45);color:var(--accent2)}
.results .rhead{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:6px 2px -2px}
.results .rhead.good{color:var(--good)}
.repexam{margin-top:6px}
#garage{padding-bottom:max(48px,calc(env(safe-area-inset-bottom) + 40px))}
.brand .sim{color:var(--accent)}