:root{--cream:#f1ead9;--accent:#feaa41;--pink:#fa5678;--mint:#38edcf;--blue:#0b1421;--line:#ffffff30;font-family:"Arial Narrow", "Trebuchet MS", system-ui,sans-serif;color:var(--cream)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;width:100%;background:#0b1421;overflow:hidden}button,input{font:inherit}button{cursor:pointer;touch-action:none}button:disabled{opacity:.35;cursor:not-allowed}a{color:inherit;text-decoration:none}
#world,#vignette{position:fixed;inset:0;z-index:0}#world canvas{width:100%;height:100%;display:block;touch-action:none}
#vignette{background:linear-gradient(90deg,rgba(8,15,28,.85),transparent 75%),linear-gradient(0deg,rgba(6,12,23,.56),transparent 43%);pointer-events:none}
#interface{position:relative;min-height:100svh;pointer-events:none}#interface button,#interface input,#interface a{pointer-events:auto}
.hidden{display:none!important}.topbar{height:72px;display:flex;align-items:center;justify-content:space-between;padding:10px max(18px,3vw);border-bottom:1px solid var(--line);background:#0a1321cb;backdrop-filter:blur(12px)}
.brand{display:flex;align-items:center;gap:10px;letter-spacing:.12em;font-weight:950;font-size:19px}
.brand small{display:block;font-size:9px;color:#9ca5b7;letter-spacing:.42em}.brand-mark{width:42px;height:42px;background:var(--accent);color:var(--blue);font-weight:1000;font-style:italic;font-size:23px;display:grid;place-items:center;transform:skew(-8deg)}.brand-mark span{color:var(--pink);margin-left:-8px}.game-name{font-size:19px;letter-spacing:.12em;font-weight:800;display:flex;align-items:center;gap:12px}.game-name b{color:var(--accent)}.pulse{width:9px;height:9px;border-radius:50%;background:var(--mint);box-shadow:0 0 18px var(--mint)}.status{font-size:11px;letter-spacing:.15em;color:var(--mint);font-weight:800}
.center-screen{min-height:calc(100svh - 72px);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;max-width:990px;padding:24px max(6%,24px);pointer-events:none}.center-screen>*{pointer-events:auto}
.eyebrow,.mini-eyebrow{letter-spacing:.23em;color:var(--mint);font-weight:900;font-size:12px}.center-screen h1{font-size:clamp(52px,8vw,105px);font-weight:1000;letter-spacing:-.06em;line-height:.96;margin:20px 0 14px;text-shadow:0 8px 32px #06101b}.center-screen h1 em{font-style:normal;color:var(--accent)}.intro{max-width:560px;color:#d8dfeb;font-size:clamp(16px,2vw,20px);line-height:1.5}.welcome-actions{display:flex;gap:12px;flex-wrap:wrap;margin:23px 0}
.primary{background:var(--accent);color:#102035;border:0;min-height:54px;padding:13px 20px;font-size:14px;font-weight:1000;letter-spacing:.10em;box-shadow:5px 5px 0 var(--pink);transition:transform .15s}.primary:hover{transform:translateY(-3px)}.primary span{margin-left:14px;font-size:22px}
.joinbox{display:flex;background:#111d2be3;border:1px solid var(--line)}.joinbox input{width:150px;background:none;border:none;color:white;text-transform:uppercase;font-weight:850;letter-spacing:.16em;padding:14px;outline:none}.joinbox button{border:0;background:var(--mint);padding:14px;font-size:12px;font-weight:950}.micro{color:#b3bfd2;font-size:12px;letter-spacing:.03em}.error{color:#ff9fa5;min-height:16px;font-weight:700}
.form-panel{background:#091322dc;padding:22px;width:min(100%,520px);border:1px solid #ffffff3b;backdrop-filter:blur(14px)}.form-panel label{font-size:12px;color:var(--mint);letter-spacing:.15em;font-weight:900}.form-panel input{width:100%;padding:12px;margin:9px 0;background:#ffffff16;border:1px solid #ffffff55;color:white;outline:none;font-size:18px}.form-panel p{line-height:1.4}.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:15px 0 20px}.mode-card{padding:15px;text-align:left;background:#142338;color:var(--cream);border:2px solid #ffffff22;display:flex;flex-direction:column;gap:8px}.mode-card.active{border-color:var(--mint);background:#17433f}.mode-card strong{letter-spacing:.14em}.mode-card small{line-height:1.35;color:#ced4dd}.bigicon{font-size:28px}.wide{width:100%}
.roomline{display:flex;justify-content:space-between;align-items:center;background:#0b1421c7;border-bottom:1px solid var(--line);padding:12px max(3vw,18px);font-weight:900;letter-spacing:.13em;gap:12px}.roomcode b{font-size:22px;color:var(--mint);margin-left:8px;letter-spacing:.15em}.phase{color:var(--accent);font-size:12px}.timer{font-size:26px;font-variant-numeric:tabular-nums}
.host-panel{position:absolute;top:148px;left:max(3vw,12px);width:min(670px,94vw);max-height:calc(100svh - 165px);overflow:auto;background:#0b1726ef;border:1px solid #ffffff35;box-shadow:18px 20px 0 #09111cab;padding:22px;pointer-events:auto;backdrop-filter:blur(12px)}.host-top{display:flex;justify-content:space-between;gap:20px;align-items:start}.host-panel h2{font-size:clamp(22px,3vw,38px);letter-spacing:-.04em;margin:0}.host-panel p{font-size:13px;line-height:1.5;color:#d4dce4}.host-panel img{background:white;padding:6px;flex-shrink:0;max-width:33%;height:auto}.linkline{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;padding:9px;background:#ffffff0c;border:1px solid #ffffff25}.linkline span{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.small-button{padding:10px 13px;background:#162b41e3;border:1px solid #ffffff46;color:white;font-size:11px;font-weight:850;letter-spacing:.07em}.members{margin-top:15px}.members h3{font-size:11px;letter-spacing:.18em;color:var(--mint);margin-bottom:9px}.members h3 span{color:white}.members #memberList{display:flex;flex-wrap:wrap;gap:8px;min-height:28px}.member{border:1px solid #ffffff45;padding:7px 11px;font-size:12px;font-weight:850;background:#ffffff0d}.member.off{opacity:.5}.member.mouse{color:var(--accent);border-color:var(--accent)}.host-actions{margin-top:16px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;align-items:center}.selector{display:flex;border:1px solid #ffffff35}.selector button{padding:11px;background:#152437;color:#d2d8dd;border:none;font-size:11px;letter-spacing:.06em;font-weight:800}.selector button.active{background:var(--mint);color:#102020}
.spectator-hud{display:flex;gap:8px;margin:14px 3vw;align-items:center;flex-wrap:wrap}.label-tile{padding:12px;background:#0a1624bd;border-left:3px solid var(--mint);font-size:11px;letter-spacing:.1em}.label-tile strong{display:block;font-size:17px;color:white;margin-top:5px}.spectator-hud button{margin-left:auto}.player-overlay{position:absolute;inset:128px 0 0;pointer-events:none}.player-overlay *{user-select:none;-webkit-user-select:none}.player-hud{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;gap:8px}.player-hud span{font-size:16px;font-weight:900;text-shadow:0 2px 5px #000}.role-pill{padding:8px 12px;background:#0c182ae6;border-left:4px solid var(--accent)}.pad-message{position:absolute;top:24%;left:8%;max-width:80%;background:#091525a6;padding:18px 22px;border-left:4px solid var(--mint)}.pad-message strong{display:block;font-size:clamp(26px,6vw,48px);letter-spacing:-.05em;margin-top:10px}.pad-message p{max-width:330px;font-size:15px;color:#d5dae3}
.controls{position:absolute;bottom:calc(40px + env(safe-area-inset-bottom));left:0;right:0;display:flex;justify-content:space-between;align-items:end;padding:0 max(2vw,12px);gap:10px;pointer-events:none}.steering,.pedals{display:flex;align-items:end;gap:9px;pointer-events:auto}.control{width:clamp(66px,17vw,116px);height:clamp(68px,17vw,112px);border:2px solid #ffffff60;color:white;background:#17253dda;backdrop-filter:blur(8px);font-weight:1000;font-size:22px;box-shadow:0 6px 0 #0b1224;touch-action:none;pointer-events:auto;border-radius:10px}.control.pressed{transform:translateY(5px);box-shadow:none;background:#24534d;border-color:var(--mint)}.throttle{background:#209c7bda;color:#051925;border-color:#49e4c1}.brake{background:#b44257df;border-color:#ff7385}.handbrake{background:#e0a649e6;color:#251607;border-color:#f6c77e;font-size:12px;max-width:78px}.touch-tip{position:absolute;bottom:10px;width:100%;text-align:center;font-size:10px;color:#bbc0cd}.end-banner{position:absolute;top:22%;left:50%;transform:translateX(-50%);min-width:min(92vw,450px);text-align:center;padding:25px;background:#091523ed;border:3px solid var(--accent);font-size:clamp(24px,5vw,46px);font-weight:1000;color:var(--accent);text-shadow:2px 2px #0e1720;pointer-events:none}.toast{position:fixed;left:50%;bottom:8vh;transform:translateX(-50%);padding:12px 20px;background:#09201d;color:var(--mint);font-size:13px;box-shadow:0 4px 20px #0009;opacity:0;transition:opacity .2s;pointer-events:none;z-index:20}.toast.show{opacity:1}
body.player-full #vignette{background:linear-gradient(0deg,#08132288,transparent 30%)}body.player-full .pad-message{display:none}body.player-pad #vignette{background:linear-gradient(115deg,#081322f4,#12192ae0)}body.player-pad #world{opacity:.25}
@media(max-width:700px){.topbar{height:53px;padding:8px 12px}.brand{font-size:14px}.brand-mark{width:33px;height:33px;font-size:17px}.game-name{font-size:12px;gap:6px}.status{font-size:9px}.center-screen{min-height:calc(100svh - 53px);padding:24px}.center-screen h1{font-size:clamp(42px,13vw,76px)}.intro{font-size:14px}.welcome-actions{flex-direction:column;width:100%}.joinbox{width:100%}.joinbox input{flex:1;width:60px}.roomline{padding:7px 12px}.roomcode{font-size:10px}.roomcode b{font-size:17px}.timer{font-size:19px}.host-panel{top:111px;padding:14px;max-height:calc(100svh - 128px)}.host-panel img{width:100px}.host-panel h2{font-size:24px}.player-overlay{top:98px}.controls{bottom:calc(26px + env(safe-area-inset-bottom))}.control{width:clamp(58px,17vw,85px);height:clamp(62px,19vw,88px)}.handbrake{font-size:10px;max-width:63px}.pedals,.steering{gap:5px}.touch-tip{display:none}.player-hud{padding:6px 10px}.pad-message{top:16%;left:6%}.spectator-hud{margin:6px}.label-tile{padding:6px}.label-tile strong{font-size:12px}}
@media(max-height:550px){.topbar{height:42px}.center-screen h1{font-size:42px;margin:5px 0}.center-screen{padding:5px 20px}.host-panel{top:90px}.player-overlay{top:80px}.pad-message{top:6%}.controls{bottom:10px}.control{height:60px;width:70px}.touch-tip{display:none}}
/* Solo IA: lightweight setup card, intentionally separate from multiplayer. */
.solo-entry{min-height:54px;padding:12px 19px;background:#182b40e8;color:#f8eddd;border:2px solid #fba64d;font-weight:950;letter-spacing:.09em;font-size:14px;box-shadow:4px 4px 0 #172a40}
.solo-entry span{background:#2de3be;color:#09242d;padding:3px 6px;margin-left:8px;font-size:11px}
.solo-panel{width:min(100%,520px);padding:18px 20px 16px;background:#0b1728f0;border:1px solid #f6ac5880;box-shadow:6px 6px 0 #fe598455;display:grid;grid-template-columns:1fr 1fr;gap:9px 12px;pointer-events:auto}
.solo-panel h2{font-size:25px;letter-spacing:-.045em;margin:2px 0 7px;grid-column:1/-1}
.solo-panel .eyebrow,.solo-panel button,.solo-panel p{grid-column:1/-1;margin:0}
.solo-panel label{font-size:11px;color:#3febc7;font-weight:900;letter-spacing:.06em;align-self:end;grid-column:1/-1}
.solo-panel select,.solo-panel input{width:100%;padding:10px;background:#182a3d;color:#fff;border:1px solid #7e96b0;outline:none;font-size:15px;grid-column:1/-1}
.solo-panel select:focus,.solo-panel input:focus{border-color:#38edcf}
.solo-panel #soloHint{line-height:1.4;color:#bdcbdb;margin:5px 0}
.center-screen:has(.solo-panel:not(.hidden)){height:calc(100svh - 72px);overflow-y:auto;display:block;padding-top:25px;padding-bottom:25px}
.center-screen:has(.solo-panel:not(.hidden)) h1{font-size:clamp(39px,5vw,60px);margin:8px 0}
.center-screen:has(.solo-panel:not(.hidden)) .intro{display:none}
.center-screen:has(.solo-panel:not(.hidden)) .welcome-actions{margin:12px 0 18px}
.player-hud #soloAgain{border-color:#36e4bb;color:#43ecc9}
@media(max-width:700px){.center-screen:has(.solo-panel:not(.hidden)){height:calc(100svh - 53px)}.solo-panel{padding:15px;gap:7px}.solo-panel h2{font-size:22px}.center-screen:has(.solo-panel:not(.hidden)) .welcome-actions{margin:8px 0}}

.solo-pair-panel{position:absolute;z-index:15;left:50%;top:52%;transform:translate(-50%,-50%);
  width:min(92vw,440px);text-align:center;background:#0a1728f5;border:2px solid #38edcf;
  padding:22px;box-shadow:10px 10px 0 #07111de0;pointer-events:auto}
.solo-pair-panel h2{font-size:clamp(21px,4vw,30px);font-weight:950;letter-spacing:-.03em;margin:0 0 10px}
.solo-pair-panel p{font-size:14px;line-height:1.5;color:#c8d7df;margin:0 auto 15px;max-width:360px}
.solo-pair-panel img{background:white;display:block;margin:10px auto 18px;padding:8px;max-width:62vw;height:auto}
.solo-pair-panel button{margin:4px}

/* Traque Urbaine v2: clear preparation stage before the first race. */
.solo-ready-panel{position:absolute;z-index:18;top:clamp(105px,18vh,210px);left:50%;
 transform:translateX(-50%);width:min(92vw,850px);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(190px,.72fr);
 gap:28px;align-items:center;padding:clamp(20px,4vw,36px);border:1px solid #e1e7ed80;
 background:linear-gradient(130deg,#101b2bef,#13273af3 70%,#092b2bf2);border-radius:19px;
 box-shadow:0 26px 110px #030710dd,0 0 0 6px #f6f7f70b;backdrop-filter:blur(22px);pointer-events:auto}
.solo-ready-intro h2{font-size:clamp(31px,4.4vw,54px);font-weight:1000;letter-spacing:-.065em;
 line-height:1.04;margin:15px 0;color:#fff}
.solo-ready-intro h2 span{color:#f6b352}
.solo-ready-intro>p:not(.eyebrow){font-size:15px;line-height:1.6;color:#c6d6e3}
.solo-ready-intro .micro{font-size:12px;color:#aebbc9}
.phone-status{display:inline-flex;align-items:center;gap:10px;padding:11px 15px;
 border:1px solid #ffc07865;background:#dda65d16;color:#f7c47d;
 margin:19px 0;font-size:12px;font-weight:900;letter-spacing:.08em}
.phone-status::before{content:"";width:10px;height:10px;border-radius:100%;
 background:#fac778;box-shadow:0 0 0 4px #f2c27a24}
.phone-status.ready{border-color:#3aeab480;background:#34e2aa20;color:#68ffd1}
.phone-status.ready::before{background:#33eca8;box-shadow:0 0 0 4px #34e2aa22}
#soloReadyStart{display:block;width:min(100%,355px);margin:2px 0 15px;border-radius:6px;box-shadow:5px 5px 0 #ff5c6f}
.solo-ready-qr{padding:24px 15px 18px;text-align:center;border-radius:15px;
 background:#eef5f2;color:#163044;box-shadow:0 12px 55px #02061188;display:flex;flex-direction:column;align-items:center}
.solo-ready-qr img{display:block;width:min(100%,220px);height:auto;min-height:170px;aspect-ratio:1;
 background:white;border:8px solid white;border-radius:9px}
.solo-ready-qr p{font-size:12px;font-weight:1000;letter-spacing:.12em;margin:12px 0}
#soloReadyCopy{background:#19283d;color:#fff;border-radius:6px;width:100%}
.player-hud .damage-pill{font-size:13px;color:#ffd594;border:1px solid #ffc98255;background:#152334dd;padding:9px}
body.player-full #world{filter:saturate(1.12) contrast(1.05)}
.solo-panel h2{font-size:28px;line-height:1.08}
.solo-panel{border-radius:12px;box-shadow:0 18px 55px #0006}
.solo-entry{border-radius:7px}
@media(max-width:700px){
 .solo-ready-panel{top:79px;max-height:calc(100svh - 100px);overflow-y:auto;
 width:min(95vw,470px);grid-template-columns:1fr;padding:18px;gap:14px}
 .solo-ready-intro h2{font-size:31px;margin:8px 0}
 .solo-ready-intro>p:not(.eyebrow){font-size:13px;line-height:1.38}
 .phone-status{margin:12px 0}
 .solo-ready-qr{padding:12px;flex-direction:row;gap:11px;flex-wrap:wrap;justify-content:center}
 .solo-ready-qr img{max-width:145px;min-height:0}
 .solo-ready-qr p{width:100%;margin:3px 0}
 .player-hud{flex-wrap:wrap}
 .player-hud .damage-pill{font-size:10px;padding:7px}
}
@media(max-height:620px) and (min-width:701px){
 .solo-ready-panel{top:87px;padding:15px;max-height:calc(100vh - 98px);overflow-y:auto}
 .solo-ready-qr img{max-width:155px;min-height:0}
}

@media(min-width:900px) and (pointer:fine){
 body.player-full .controls{display:none}
 body.player-full .touch-tip{display:block;font-size:12px;color:#dce6eb;
   bottom:18px;text-shadow:0 2px 8px #000}
}

/* Collision feedback: restrained arcade impact flash, does not block input. */
#impactFlash{position:fixed;inset:0;pointer-events:none;z-index:24;opacity:0;
  background:radial-gradient(ellipse at 50% 60%,transparent 28%,#ffbb6d66 78%,#ef4a3c79 110%)}
#impactFlash.flash{animation:traque-impact-flash .38s ease-out both}
@keyframes traque-impact-flash{
  0%{opacity:.88}25%{opacity:.42}100%{opacity:0}
}
@media(prefers-reduced-motion:reduce){
  #impactFlash.flash{animation:none}
}

/* Contextual obstruction hint; simulation speed is actual ground displacement. */
.drive-notice{position:fixed;z-index:21;left:50%;bottom:clamp(135px,20vh,210px);transform:translateX(-50%);
  max-width:min(90vw,490px);padding:11px 17px;pointer-events:none;border-radius:6px;
  color:#fff1d9;background:#32200de8;border:1px solid #ffca70;
  box-shadow:0 5px 25px #020810ae;text-align:center;font-size:12px;font-weight:900;letter-spacing:.07em;}
@media(min-width:900px){.drive-notice{bottom:75px;}}
@media(max-width:700px){.drive-notice{bottom:150px;font-size:11px;padding:8px 11px;}}

/* V12: recovery action available in driving HUD and paired-phone controller. */
.respawn-button{
  flex-shrink:0;min-height:38px;padding:9px 13px;border-radius:8px;
  background:linear-gradient(135deg,#375676e8,#193f4eea);
  border:1px solid #88ecd8c2;color:#c3fff1;
  font-size:11px;font-weight:950;letter-spacing:.045em;
  box-shadow:0 4px 12px #07132470;
}
.respawn-button:active{transform:scale(.97)}
.respawn-button:disabled{opacity:.55}
@media(max-width:700px){
 .player-hud{display:flex;justify-content:flex-start;gap:6px;flex-wrap:wrap}
 .player-hud .respawn-button{min-height:33px;padding:7px 9px;font-size:10px}
 .player-hud .role-pill{padding:5px 8px}
 .player-hud #mySpeed{font-size:13px}
}

/* v13: exactly two ergonomic pedals, separated by color and shape. */
.pedals .control{min-width:clamp(90px,12vw,125px);height:clamp(92px,12vw,124px);
  border-radius:17px 17px 26px 26px;font-size:clamp(17px,1.75vw,23px);
  letter-spacing:.05em;text-shadow:0 1px 2px #0004}
.pedals .control.brake{background:#c8374b;border:3px solid #fa8591;color:#fff;box-shadow:0 7px 0 #63202e}
.pedals .control.throttle{background:#20bc69;border:3px solid #91efba;color:#052216;box-shadow:0 7px 0 #12633c}
.pedals .control.pressed{transform:translateY(6px);box-shadow:0 1px 0 #101a1c}
@media(max-width:700px){.pedals .control{min-width:76px;width:clamp(76px,20vw,105px);
  height:clamp(90px,24vw,111px);font-size:16px}}

/* V14 - mode choices and repair pickup, unobtrusive on mobile / split screen. */
.rule-caption{font-size:10px;color:#48ebcf;letter-spacing:.10em;font-weight:900}
.rule-select{min-height:42px;max-width:100%;flex:1 1 200px;
  background:#1a2e44;color:#f4f9f7;border:1px solid #80cdbd70;
  padding:9px;font-weight:800;border-radius:5px;font-size:12px}
.rule-select:disabled{opacity:.65}
.rules-pill{font-size:11px;white-space:nowrap;letter-spacing:.13em;
  border:1px solid #52edd088;background:#173b3dd6;padding:7px 10px;
  color:#65f5d8;border-radius:5px}
.heart-alert{position:absolute;z-index:3;left:50%;top:69px;transform:translateX(-50%);
  text-align:center;min-width:min(75vw,250px);font-size:9px;letter-spacing:.11em;
  font-weight:900;color:#ffbad4;text-shadow:0 1px 5px #000;
  background:#30122dbe;border:1px solid #f36a9f55;
  padding:5px 11px;pointer-events:none;opacity:.85}
#soloRule{border-color:#f27ca6!important}
@media(max-width:700px){
 .rule-select{width:100%;flex:1 1 100%}
 .rules-pill{font-size:8px;padding:5px}
 .heart-alert{top:64px;font-size:8px;max-width:90vw;min-width:0;width:fit-content}
 .roomline{gap:5px;letter-spacing:.05em}
}


/* V16 cockpit - keyboard and touch remain on exactly the same actions. */
.cockpit-wheel{position:relative;display:flex;justify-content:space-between;
  align-items:center;width:clamp(168px,27vw,285px);height:clamp(126px,19vw,198px);
  isolation:isolate;pointer-events:auto}
.wheel-art{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:clamp(135px,19vw,194px);aspect-ratio:1;z-index:-1;opacity:.54;
  filter:drop-shadow(0 6px 7px #000a);pointer-events:none;transition:transform .19s ease}
.wheel-art svg{width:100%;height:100%}
.cockpit-wheel:has([data-control="left"].pressed) .wheel-art{
  transform:translate(-50%,-50%) rotate(-22deg);opacity:.88}
.cockpit-wheel:has([data-control="right"].pressed) .wheel-art{
  transform:translate(-50%,-50%) rotate(22deg);opacity:.88}
.cockpit-wheel .steering-button{position:relative;z-index:2;width:36%;height:65%;
  border-radius:55% 18% 18% 55%;border:1px solid #94d7e37a;background:
  linear-gradient(90deg,#243b53b8,#142c3b12);backdrop-filter:blur(1px);
  color:#c4fff0;font-size:clamp(22px,4vw,32px);box-shadow:none}
.cockpit-wheel .steering-button:last-child{border-radius:18% 55% 55% 18%;
  background:linear-gradient(270deg,#243b53b8,#142c3b12)}
.cockpit-wheel .steering-button.pressed{background:#3a95856d;color:#fff;
  box-shadow:inset 0 0 35px #68ffe455}
.cockpit-wheel .steering-button span{pointer-events:none;text-shadow:0 2px 8px #000}
.cockpit-pedals{display:flex;gap:clamp(10px,2vw,22px);align-items:flex-end}
.cockpit-pedals .pedal-btn{position:relative;display:flex;flex-direction:column;
  justify-content:center;align-items:center;gap:6px;width:clamp(76px,12vw,107px);
  height:clamp(103px,18vw,146px);padding:8px;border-radius:18px;
  border:1px solid #e1effc78;background:linear-gradient(135deg,#2c3c4bdb,#0b1721f3);
  color:#f3f6f7;box-shadow:0 8px 0 #040c17,0 14px 25px #0009;font-size:12px}
.cockpit-pedals .pedal-btn.throttle{height:clamp(115px,20vw,162px);border-bottom:5px solid #2be68c}
.cockpit-pedals .pedal-btn.brake{border-bottom:5px solid #f04f65}
.cockpit-pedals .pedal-plate{display:flex;flex-direction:column;justify-content:space-evenly;
  width:90%;height:80%;padding:8px 5px;border:3px solid #adb8c1;
  border-radius:10px;background:linear-gradient(117deg,#d3d8db,#627784 53%,#aebdc6);
  box-shadow:inset 0 3px 8px #0008,2px 4px 4px #0008}
.cockpit-pedals .pedal-plate i{height:8px;border-radius:3px;background:#1b2730;
  border-top:1px solid #586c73;box-shadow:0 1px 1px #b6c7d3}
.cockpit-pedals .pedal-name{font-weight:1000;letter-spacing:.1em;color:#fff;
  line-height:1.1;text-shadow:0 2px 3px #000}
.cockpit-pedals .brake .pedal-name{color:#ff788d}
.cockpit-pedals .throttle .pedal-name{color:#78ffc4}
.cockpit-pedals .pedal-btn.pressed{transform:translateY(7px) scale(.97);
  box-shadow:0 1px 0 #050b16,inset 0 0 30px #fff2}
@media(max-width:700px){
  .cockpit-wheel{width:clamp(145px,46vw,200px);height:124px}
  .wheel-art{width:135px}
  .cockpit-wheel .steering-button{width:35%;height:80%}
  .cockpit-pedals{gap:6px}
  .cockpit-pedals .pedal-btn{width:clamp(65px,17vw,84px);height:102px;padding:6px}
  .cockpit-pedals .pedal-btn.throttle{height:118px}
  .cockpit-pedals .pedal-plate{padding:5px 4px}
}
@media(max-height:590px){
  .cockpit-wheel{height:90px;width:170px}.wheel-art{width:104px}
  .cockpit-pedals .pedal-btn{height:82px}.cockpit-pedals .pedal-btn.throttle{height:90px}
}

.climate-label{font-size:10px;letter-spacing:.11em;font-weight:900;color:#c7e9ef;
  border:1px solid #ffffff3f;background:#20344996;padding:6px 10px;white-space:nowrap}
@media(max-width:700px){.climate-label{font-size:9px;padding:4px 6px}}
@media(max-width:400px){.climate-label{display:none}}
/* Pedal housing is graphite with visible red/green luminous safety trims. */
.cockpit-pedals .pedal-btn.brake{
  background:linear-gradient(130deg,#263442,#0a141f);
  border:1px solid #8498a8;border-bottom:5px solid #e24b60;
}
.cockpit-pedals .pedal-btn.throttle{
  background:linear-gradient(130deg,#263442,#0a141f);
  border:1px solid #8498a8;border-bottom:5px solid #2bdb88;
}

/* V17: compact chase compass below the car, semi-transparent like classic arcade HUDs. */
.police-radar{position:fixed;width:120px;height:120px;z-index:7;
 transform:translate(-50%,-50%);pointer-events:none;filter:drop-shadow(0 2px 8px #04111bbd)}
.police-radar-ring{position:absolute;inset:13px;border:2px solid #fff7;
 border-radius:50%;background:radial-gradient(circle,#08132112 25%,#0415244c 100%)}
.police-radar-center{position:absolute;left:53px;top:53px;width:14px;height:14px;
 border-radius:50%;background:#8ef5dbd9;border:2px solid #0c2534}
.police-marker{position:absolute;width:20px;height:20px;clip-path:polygon(50% 0,100% 88%,50% 66%,0 88%);
 background:#e8bd42;filter:drop-shadow(0 0 6px #121212);opacity:.91}
.police-marker[data-danger="mid"]{background:#ff8c34}
.police-marker[data-danger="near"]{background:#ff4149;
 animation:chase-warning .48s ease-in-out infinite alternate}
@keyframes chase-warning{to{opacity:.48}}
/* Radio control deliberately stays away from accelerator and brake. */
.v17-music{position:fixed;right:16px;top:204px;display:flex;align-items:center;
 gap:7px;z-index:12;border-radius:5px;padding:5px 8px;
 background:#081624b9;border:1px solid #f7be9c55;pointer-events:auto}
.v17-music button{color:#ffe4a8;background:transparent;border:0;
 font-size:11px;font-weight:900;letter-spacing:.06em;padding:5px 3px}
.v17-music input{width:76px;accent-color:#ff72ae;cursor:pointer}
.v17-config{margin-top:15px;border:1px solid #f999ba75;background:#231b36a9}
.v17-config summary{padding:12px;color:#ffd3b8;font-weight:900;
 letter-spacing:.08em;cursor:pointer;font-size:12px}
.v17-config-body{display:grid;gap:8px;padding:10px 13px 14px}
.v17-config-body label{color:#79f4d5;font-size:11px;font-weight:900;letter-spacing:.06em}
.v17-config-body select,.v17-config-body textarea{background:#102336;
 border:1px solid #9aaeca;color:#f9eee0;padding:10px;width:100%;font:inherit;font-size:13px}
.v17-config-body textarea{line-height:1.5;resize:vertical;max-height:185px}
.v17-check{display:flex;align-items:center;gap:8px}
.v17-check input{accent-color:#f67ba9;width:17px;height:17px}
.v17-config-body input[type="range"]{width:100%;accent-color:#fa87ae}
.v17-config-body #visualMessage{font-size:11px;color:#c2e6dd}
@media(max-width:700px){
 .police-radar{width:120px;height:120px;opacity:.83}
 .v17-music{right:7px;top:168px;padding:2px 5px}
 .v17-music input{width:46px}
 .v17-music button{font-size:9px}
}
body.player-pad .police-radar{display:none}

/* V18: on phones, the short solo setup fits and scrolls reliably under Safari's bars. */
@media(max-width:700px){
 .center-screen:has(.solo-panel:not(.hidden)){
    display:block;height:calc(100dvh - 53px);max-height:calc(100dvh - 53px);
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    padding-top:12px;padding-bottom:calc(90px + env(safe-area-inset-bottom));
 }
 .solo-panel{width:100%;padding:15px 14px 22px;gap:9px}
 .solo-panel h2{font-size:21px}
 .solo-panel label{font-size:12px}
 .solo-panel input,.solo-panel select{font-size:16px;min-height:49px;padding:11px 10px}
 .solo-panel .primary{min-height:55px}
 .center-screen:has(.solo-panel:not(.hidden)) .welcome-actions{display:none}
 .center-screen:has(.solo-panel:not(.hidden)) h1{font-size:35px}
 .center-screen:has(.solo-panel:not(.hidden)) .eyebrow{font-size:10px}
}

/* Compact setup: visible way back, no giant repeated hero while editing. */
.solo-panel .solo-back{grid-column:1/-1;justify-self:start;
 color:#73f6da;background:transparent;border:0;padding:3px 0 7px;
 font-size:12px;font-weight:900;letter-spacing:.08em}
.solo-panel .solo-back:hover{text-decoration:underline}
@media(max-width:700px){
 .center-screen:has(.solo-panel:not(.hidden)) > h1{display:none}
 .center-screen:has(.solo-panel:not(.hidden)) > .eyebrow{display:none}
}

/* V19 mobile HUD: reserve actual lines for room info, separate driver's HUD,
   and clear the screen when a race ends. No WebGL reconfiguration. */
@media (max-width:700px){
  .roomline{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto auto;
    grid-template-rows:auto auto;
    justify-content:initial;
    align-items:center;
    min-height:66px;
    gap:4px 7px;
    padding:6px 9px;
    letter-spacing:.04em;
  }
  .roomline .roomcode{grid-column:1 / 3;grid-row:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .roomline .roomcode b{font-size:15px;letter-spacing:.1em;}
  .roomline #timer{grid-column:3;grid-row:1;justify-self:end;font-size:17px;white-space:nowrap;}
  .roomline #phaseName{grid-column:1;grid-row:2;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .roomline #ruleBadge{grid-column:2;grid-row:2;font-size:8px;padding:5px 6px;}
  .roomline #climateLabel{grid-column:3;grid-row:2;display:inline-block;justify-self:end;font-size:8px;padding:4px 5px;}
  .player-overlay{top:calc(53px + 72px);}
  .player-hud{gap:5px;padding:5px 9px;align-items:center;justify-content:flex-start;}
  .player-hud .role-pill{font-size:11px;max-width:46vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .player-hud #mySpeed{font-size:11px;white-space:nowrap;}
  .player-hud .damage-pill{font-size:10px;padding:6px;white-space:nowrap;}
  .heart-alert{
    position:fixed;
    top:211px;
    bottom:auto;
    left:8px;
    transform:none;
    width:min(185px,51vw);
    min-width:0;
    max-width:51vw;
    text-align:left;
    line-height:1.2;
    font-size:9px;
    border-radius:5px;
    padding:6px 9px;
  }
  .v17-music{top:211px;right:8px;}
  #traqueFps{
    top:auto!important;
    bottom:calc(170px + env(safe-area-inset-bottom))!important;
    left:8px!important;
    font-size:10px!important;
    padding:3px 6px!important;
    max-width:190px;
  }
  body.round-ended .controls,
  body.round-ended .v17-music,
  body.round-ended .police-radar,
  body.round-ended .touch-tip{display:none!important}
  body.round-ended .player-hud{
    position:fixed;
    top:auto;
    bottom:calc(14px + env(safe-area-inset-bottom));
    left:8px;
    right:8px;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    padding:8px;
    border:1px solid #ffffff26;
    background:#091928e6;
    border-radius:8px;
    z-index:15;
    pointer-events:auto;
  }
  body.round-ended .player-hud #myRole,
  body.round-ended .player-hud #mySpeed,
  body.round-ended .player-hud #myDamage{display:none}
  body.round-ended .player-hud .small-button{min-height:42px;font-size:11px;flex:1 1 110px;}
  body.round-ended .end-banner{
    position:fixed;
    top:46%;
    left:50%;
    transform:translate(-50%,-50%);
    z-index:14;
    width:min(90vw,440px);
    min-width:0;
    padding:18px 12px;
    font-size:clamp(22px,6vw,33px);
    line-height:1.13;
    border-radius:7px;
    box-shadow:0 9px 28px #0007;
  }
  body.round-ended .heart-alert{display:none!important}
}
@media (min-width:701px){
  body.round-ended .controls{display:none!important}
}

/* V20: heart and police pointers share exactly one directional reference. */
.heart-radar-marker{position:absolute;z-index:2;width:23px;height:23px;
 display:flex;align-items:center;justify-content:center;line-height:1;
 font-size:21px;font-family:Arial,sans-serif;font-weight:900;color:#ff6aa4;
 text-shadow:0 0 6px #9d235b,0 1px 3px #18070d;
 pointer-events:none;transform:translate(-50%,-50%);
 animation:heart-pointer-pulse 1.25s ease-in-out infinite alternate}
.heart-radar-marker.near{color:#ffaccb;filter:drop-shadow(0 0 7px #ff3386)}
@keyframes heart-pointer-pulse{from{opacity:.82}to{opacity:1}}