:root { color-scheme: dark; --sand: #f2c58e; --ink: #fff; --accent: #ff7a1a; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #1a1008; color: var(--ink); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; user-select: none; -webkit-user-select: none; overscroll-behavior: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }   /* iOS Safari inflates text in landscape without this (text cut off on real iPhones) */
#c { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; touch-action: none; outline: none; }
#hud { position: fixed; inset: 0; pointer-events: none; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
#tl { position: absolute; left: max(12px, env(safe-area-inset-left)); top: 10px; }
#time { font: 700 28px/1 ui-monospace, "SF Mono", Consolas, monospace; letter-spacing: .5px; }
#best { font: 600 13px/1.4 ui-monospace, Consolas, monospace; opacity: .85; }
#lap { font: 600 13px/1.4 system-ui; color: var(--sand); }
#tr { position: absolute; right: max(12px, env(safe-area-inset-right)); top: 8px; display: flex; align-items: baseline; gap: 6px; }
#speedo { display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 4px; padding: 4px 10px 6px; border-radius: 12px; background: linear-gradient(180deg, rgba(20,10,4,.55), rgba(20,10,4,.25)); border: 1px solid rgba(255,176,74,.35); }
#spd { font: 800 40px/1 system-ui; min-width: 2.2ch; text-align: right; font-variant-numeric: tabular-nums; color: #fff4e2; text-shadow: 0 0 10px rgba(255,140,40,.45); }
#spdU { font-size: 12px; opacity: .85; color: #ffb04a; }
#spd2 { grid-column: 1 / span 2; justify-self: end; font: 700 13px/1.1 system-ui; color: #ffc77a; opacity: .9; font-variant-numeric: tabular-nums; }
#tr small { font-size: 12px; opacity: .8; }
#gear { font: 800 26px/1 system-ui; color: #ffcc33; margin-left: 6px; }
#msg { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); font: 800 clamp(17px, 3.8vw, 40px)/1.15 system-ui; letter-spacing: .5px; transition: opacity .25s; color: #fff;
  width: max-content; max-width: min(92vw, calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 24px)); white-space: normal; text-align: center; text-wrap: balance; overflow-wrap: anywhere; }   /* long flash hints wrap instead of running off both edges */
#off { display: none; position: absolute; left: 50%; top: 34%; transform: translateX(-50%); background: rgba(160,30,10,.75); padding: 6px 12px; border-radius: 6px; font: 600 14px system-ui; }
/* guidance arrow (src/guide.js): top centre, scales with the screen (phone ~40 px .. 4K 84 px), fades, never takes input */
#guide { position: absolute; left: 50%; top: max(6px, env(safe-area-inset-top)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; pointer-events: none; color: #ffd23a; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
#guideArrow { width: clamp(38px, 10vmin, 84px); height: clamp(38px, 10vmin, 84px); }
#guideTxt { font: 800 clamp(12px, 2.6vmin, 22px)/1.1 system-ui; color: #fff; text-shadow: 0 1px 3px #000; max-width: 40vw; width: max-content; text-align: center; margin-top: 2px; }
#guideTxt:empty { display: none; }
#guide.warn { color: #ff9a2e; }
#guide.wrong { color: #ff3b2e; }
#guide.wrong #guideTxt { color: #ff6a5e; font-size: clamp(14px, 3.4vmin, 30px); }
#btns { position: absolute; right: max(10px, env(safe-area-inset-right)); top: 56px; display: flex; flex-direction: column; gap: 6px; pointer-events: auto; }
#btns button { min-width: 64px; }
#dbg { position: absolute; left: 12px; bottom: 6px; font: 11px ui-monospace, monospace; opacity: .85; }
button { font: 600 14px system-ui; color: #fff; background: rgba(20,12,6,.6); border: 1px solid rgba(255,255,255,.25); border-radius: 8px; padding: 8px 12px; cursor: pointer; backdrop-filter: blur(4px); }
button:hover { border-color: var(--accent); }
button.big { background: linear-gradient(180deg, #ff8a2a, #e0560a); border: 0; font-size: 18px; padding: 12px 26px; margin-top: 8px; box-shadow: 0 6px 20px rgba(255,110,20,.35); }
.overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, rgba(20,10,4,.35), rgba(20,10,4,.75)); z-index: 5; }
.overlay.show { display: flex; }
.card { text-align: center; padding: 22px 26px; max-width: min(520px, 92vw); max-height: 92vh; overflow: auto; background: rgba(25,14,6,.55); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; backdrop-filter: blur(8px); }
.card h1, #loading h1 { margin: 0; font: 900 clamp(34px, 7vw, 64px)/1 system-ui; letter-spacing: 3px; color: #fff; }
.card h1 b, #loading h1 b { color: var(--accent); }
.card .tag { margin: 4px 0 12px; color: var(--sand); letter-spacing: 4px; text-transform: uppercase; font-size: 13px; }
.card .how { font-size: 15px; line-height: 1.45; opacity: .92; }
.card .soon, .card .fine { font-size: 12px; opacity: .7; }
.card label { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 10px 0; font-size: 14px; }
.card .card button { margin: 4px; }
#pause button { margin: 6px 4px; }
#loading { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; background: radial-gradient(ellipse at 50% 60%, #6b4321, #1a1008 70%); z-index: 10; transition: opacity .5s; }
#loading.hide { opacity: 0; pointer-events: none; }
#loadMsg { color: var(--sand); letter-spacing: 1px; }
.touchonly, .touch-only { display: none; }
.how.touch { display: none; }
body.touch .touchonly { display: initial; }
body.touch .how.touch { display: block; }
body.touch .how.desk { display: none; }
#pedals { position: fixed; inset: auto 0 0 0; height: 46vh; pointer-events: none; z-index: 2; }
body.touch #pedals { display: block; }
.pedal { position: absolute; bottom: max(10px, env(safe-area-inset-bottom)); pointer-events: auto; touch-action: none; display: flex; align-items: center; justify-content: center; border-radius: 18px; border: 2px solid rgba(255,255,255,.28); background: rgba(10,6,3,.22); font: 800 15px system-ui; text-align: center; color: rgba(255,255,255,.85); }
.pedal small { font-size: 10px; font-weight: 600; opacity: .8; }
.pedal.brake { left: max(10px, env(safe-area-inset-left)); width: 24vw; height: 40vh; }
.pedal.gas { right: max(10px, env(safe-area-inset-right)); width: 28vw; height: 40vh; border-color: rgba(255,140,40,.6); }
.pedal.hb { left: calc(max(10px, env(safe-area-inset-left)) + 26vw); width: 15vw; height: 18vh; }
#rotate { display: none; position: fixed; inset: 0; z-index: 20; align-items: center; justify-content: center; background: #1a1008; color: var(--sand); font: 700 20px system-ui; text-align: center; padding: 20px; }
@media (orientation: portrait) and (pointer: coarse) { body.touch.playing #rotate { display: flex; } }
@media (max-height: 420px) { #time { font-size: 22px; } #spd { font-size: 32px; } .card { padding: 12px 16px; } .card .how { font-size: 13px; } button.big { padding: 9px 20px; font-size: 16px; } }

/* ---- touch steering modes (body.steer-tilt | steer-thumb | steer-buttons, body.thumb-right) ---- */
.thumbonly, .btnonly, .tiltonly { display: none !important; }
body.touch.steer-thumb .thumbonly, body.touch.steer-buttons .btnonly, body.touch.steer-tilt .tiltonly { display: initial !important; }
body.touch.steer-thumb #thumb { display: flex !important; }
body.touch.steer-buttons .sbtn { display: flex !important; }
#thumb { position: absolute; left: max(18px, env(safe-area-inset-left)); bottom: max(18px, env(safe-area-inset-bottom)); width: max(140px, 20vw); height: max(140px, 20vw);
  border-radius: 50%; border: 3px solid rgba(255,190,110,.55); background: radial-gradient(circle, rgba(20,10,4,.18), rgba(20,10,4,.42)); pointer-events: auto; touch-action: none;
  align-items: center; justify-content: center; }
#thumb span { position: absolute; bottom: 10px; font: 700 10px system-ui; color: rgba(255,255,255,.6); letter-spacing: .1em; }
#thumbKnob { width: 38%; height: 38%; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffd39a, #ff9a2e); box-shadow: 0 3px 10px rgba(0,0,0,.45); pointer-events: none; transition: transform .05s linear; }
body.thumb-right #thumb { left: auto; right: max(18px, env(safe-area-inset-right)); }
.sbtn { width: 15vw; height: 26vh; font-size: 30px; }
.sleft { left: max(10px, env(safe-area-inset-left)); }
.sright { left: calc(max(10px, env(safe-area-inset-left)) + 17vw); }
/* in thumb/buttons modes the pedals move right: gas big, brake + drift stacked to its left */
body.touch.steer-thumb:not(.thumb-right) .pedal.brake, body.touch.steer-buttons .pedal.brake { left: auto; right: calc(max(10px, env(safe-area-inset-right)) + 30vw); width: 18vw; height: 22vh; }
body.touch.steer-thumb:not(.thumb-right) .pedal.hb, body.touch.steer-buttons .pedal.hb { left: auto; right: calc(max(10px, env(safe-area-inset-right)) + 30vw); bottom: calc(max(10px, env(safe-area-inset-bottom)) + 24vh); width: 18vw; height: 14vh; }
body.touch.steer-thumb.thumb-right .pedal.gas { right: auto; left: max(10px, env(safe-area-inset-left)); }
body.touch.steer-thumb.thumb-right .pedal.brake { left: calc(max(10px, env(safe-area-inset-left)) + 30vw); width: 18vw; height: 22vh; }
body.touch.steer-thumb.thumb-right .pedal.hb { left: calc(max(10px, env(safe-area-inset-left)) + 30vw); bottom: calc(max(10px, env(safe-area-inset-bottom)) + 24vh); width: 18vw; height: 14vh; }
#tiltInd { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); width: 160px; height: 14px; border-radius: 7px; background: rgba(20,10,4,.45); border: 1px solid rgba(255,176,74,.4); }
#tiltInd i { position: absolute; top: 1px; left: 50%; width: 12px; height: 10px; margin-left: -6px; border-radius: 5px; background: #ffb04a; }
#tiltInd span { position: absolute; top: 16px; left: 0; right: 0; text-align: center; font: 600 10px system-ui; color: rgba(255,255,255,.75); }
.seg { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.seg button.on { background: #ffb347; color: #1a1008; }/* on-screen steering wheel mode */
.wheelonly, .sideonly { display: none !important; }
body.touch.steer-wheel .wheelonly { display: block !important; }
body.touch.steer-wheel .sideonly, body.touch.steer-thumb .sideonly { display: initial !important; }
#swheel { position: absolute; left: max(14px, env(safe-area-inset-left)); bottom: max(10px, env(safe-area-inset-bottom)); width: min(46vh, 34vw); height: min(46vh, 34vw); min-width: 150px; min-height: 150px; pointer-events: auto; touch-action: none; }
#swheelFace { width: 100%; height: 100%; filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); opacity: .92; }
body.thumb-right #swheel { left: auto; right: max(14px, env(safe-area-inset-right)); }
body.touch.steer-wheel:not(.thumb-right) .pedal.brake { left: auto; right: calc(max(10px, env(safe-area-inset-right)) + 30vw); width: 18vw; height: 22vh; }
body.touch.steer-wheel:not(.thumb-right) .pedal.hb { left: auto; right: calc(max(10px, env(safe-area-inset-right)) + 30vw); bottom: calc(max(10px, env(safe-area-inset-bottom)) + 24vh); width: 18vw; height: 14vh; }
body.touch.steer-wheel.thumb-right .pedal.gas { right: auto; left: max(10px, env(safe-area-inset-left)); }
body.touch.steer-wheel.thumb-right .pedal.brake { left: calc(max(10px, env(safe-area-inset-left)) + 30vw); width: 18vw; height: 22vh; }
body.touch.steer-wheel.thumb-right .pedal.hb { left: calc(max(10px, env(safe-area-inset-left)) + 30vw); bottom: calc(max(10px, env(safe-area-inset-bottom)) + 24vh); width: 18vw; height: 14vh; }/* damage bar, drift readout, hit flash */
#dmg { width: 92px; height: 5px; margin: 6px 0 0 auto; background: rgba(0,0,0,.45); border-radius: 3px; overflow: hidden; }
#dmg i { display: block; height: 100%; width: 0; background: #6c4; transition: width .3s; }
#drift { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); font: 800 22px/1 system-ui, sans-serif; color: #ffcf6a; letter-spacing: .06em; text-shadow: 0 2px 8px rgba(0,0,0,.6); opacity: 0; transition: opacity .25s; pointer-events: none; }
#hitfx { position: fixed; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,0) 45%, rgba(170,20,10,.55) 100%); z-index: 5; }/* multiplayer: lobby side panel (drive while you wait), results, push-to-talk */
.mpbtns { display: flex; gap: 8px; justify-content: center; margin: 10px 0 4px; }
.mpbtns button { flex: 1; max-width: 200px; }
#lobby { display: none; position: fixed; top: max(10px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 6; width: min(420px, 92vw); pointer-events: none; }
#lobby.show { display: block; }
.lbcard { pointer-events: auto; background: rgba(20,14,8,.82); border: 1px solid rgba(255,190,110,.25); border-radius: 12px; padding: 10px 14px; color: #f3e6d4; font: 14px system-ui, sans-serif; backdrop-filter: blur(6px); }
.lbhead { font-weight: 700; letter-spacing: .04em; margin-bottom: 6px; }
#lbList { list-style: none; margin: 0 0 6px; padding: 0; max-height: 30vh; overflow: auto; }
#lbList li { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
#lbList li span { opacity: .7; } #lbList li.rdy span { color: #7fe07f; opacity: 1; font-weight: 700; } #lbList small { color: #ffb347; }
.lbbtns { display: flex; gap: 6px; } .lbbtns .big { flex: 1; }
#chatLog { max-height: 90px; overflow: auto; font-size: 13px; margin: 6px 0 4px; } #chatIn { width: 100%; box-sizing: border-box; }
#results table { width: 100%; border-collapse: collapse; margin: 8px 0 12px; } #results td { padding: 4px 8px; border-bottom: 1px solid rgba(255,255,255,.1); }
#btnTalk { display: none; position: fixed; right: 12px; top: 40%; z-index: 6; }
body.talking #btnTalk { background: #c33; }
#radio { position: absolute; left: 50%; bottom: 18%; transform: translateX(-50%); max-width: min(560px, 80vw); padding: 6px 12px; border-radius: 8px; background: rgba(10,10,10,.6); color: #e9f3ff; font: 600 15px/1.3 system-ui, sans-serif; opacity: 0; transition: opacity .3s; pointer-events: none; text-align: center; }
#radio.show { opacity: 1; }

#shop .wide { width: min(640px, 94vw); max-height: 86vh; overflow: auto; }
#shop .it { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
#shop .it small { display: block; opacity: .6; } #shop .it button { margin-left: 4px; }
/* desktop controls: keyboard / mouse (pointer lock) / mouse-dragged wheel */
body.touch .deskonly { display: none !important; }
body:not(.desk-mouse) .mouseonly { display: none !important; }
body.desk-mwheel:not(.touch) #swheel { display: block !important; left: auto; right: 24px; bottom: 24px; width: 220px; height: 220px; }
body.desk-mwheel:not(.touch) #pedals { display: block; pointer-events: none; } body.desk-mwheel:not(.touch) #pedals > *:not(#swheel) { display: none !important; }
body.desk-mwheel:not(.touch) #swheel { pointer-events: auto; cursor: grab; }/* gearbox: shift lights + mobile gear buttons */
#shiftLights { display: flex; gap: 3px; justify-content: flex-end; margin-top: 4px; }
#shiftLights i { width: 12px; height: 6px; border-radius: 2px; background: rgba(255,255,255,.12); }
#shiftLights i.g { background: #3d3; } #shiftLights i.y { background: #fc2; } #shiftLights i.r { background: #f33; } #shiftLights i.f { background: #39f; box-shadow: 0 0 6px #39f; }
#gearBtns { position: absolute; left: max(14px, env(safe-area-inset-left)); top: 27%; display: flex; flex-direction: row; gap: 8px; pointer-events: auto; }   /* clear of GAS (a stray R tap = reverse) */
body.thumb-right #gearBtns { left: auto; right: max(14px, env(safe-area-inset-right)); top: 22%; }
#gearBtns button { width: 54px; height: 46px; border-radius: 10px; font-size: 18px; background: rgba(0,0,0,.45); color: #fff; border: 1px solid rgba(255,255,255,.25); }
body:not(.manual) #gearBtns .manualonly { display: none; } body.manual #gearBtns .autoonly { display: none; }/* mobile layout audit 10-12: short landscape phones (<= 520 px tall) get compact two-column cards so the main buttons are on screen
   without scrolling; long messages wrap instead of running off the edge; safe areas respected */
#msg { white-space: normal; max-width: 92vw; text-align: center; }
.overlay { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); box-sizing: border-box; }
.card { max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); box-sizing: border-box; }
@media (max-height: 520px) and (orientation: landscape) {
  .overlay .card { max-width: min(880px, 96vw); width: 96vw; padding: 10px 16px; column-count: 2; column-gap: 22px; column-fill: balance; text-align: center; }
  .overlay .card > h1, .overlay .card > h2, .overlay .card > .tag { column-span: all; }
  .overlay .card > * { break-inside: avoid; }
  .card h1 { font-size: 30px; letter-spacing: 2px; } .card h2 { margin: 2px 0 6px; font-size: 20px; }
  .card .tag { margin: 2px 0 6px; font-size: 11px; } .card .how { font-size: 12.5px; line-height: 1.35; margin: 4px 0; }
  .card .fine, .card .soon { font-size: 11px; margin: 4px 0; } .card label { margin: 6px 0; font-size: 13px; }
  .card .big { padding: 10px 18px; font-size: 16px; } .seg button { padding: 6px 10px; font-size: 12.5px; }
  #lobby { width: min(560px, 70vw); } .lbcard { padding: 8px 12px; font-size: 13px; } #lbList { max-height: 22vh; }
}
@media (max-width: 380px) and (orientation: portrait) { .card { padding: 16px 14px; } .card .how { font-size: 13.5px; } .seg button { padding: 7px 9px; font-size: 13px; } }
.seg button, .card button, #lobby button { min-height: 38px; min-width: 38px; }
@media (max-height: 520px) and (orientation: landscape) { .overlay .card > label { display: inline-flex; width: 100%; break-inside: avoid-column; -webkit-column-break-inside: avoid; } }
/* 10-12 fix: a height-capped multi-column card spilled an extra column off-screen (Resume at x=815 on a 667x375 iPhone SE).
   Cards are not height-capped in short landscape; very short screens get 3 columns; the overlay scrolls as a last resort. */
@media (max-height: 520px) and (orientation: landscape) {
  .overlay { overflow-y: auto; align-items: flex-start; padding-top: max(6px, env(safe-area-inset-top)); }
  .overlay .card { max-height: none; overflow: visible; margin: auto; }
}
@media (max-height: 400px) and (orientation: landscape) {
  .overlay .card { column-count: 3; column-gap: 16px; padding: 8px 12px; }
  .card h1 { font-size: 24px; } .card h2 { font-size: 18px; margin: 0 0 4px; } .card .how { font-size: 12px; }
  .card label { margin: 4px 0; font-size: 12.5px; } .seg button { padding: 5px 8px; font-size: 12px; }
}
/* QA 10-13 D5: the multi-column pause card ran 2+ screens tall on phone landscape (columns filled unevenly, controls below the
   fold). Short landscape pause = a dense 3-column grid; every control stays, the gearbox help line moves to a tooltip-size note. */
@media (max-height: 520px) and (orientation: landscape) {
  #pause .card { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row dense; column-count: auto; gap: 2px 14px; align-items: center; padding: 6px 14px; }
  #pause .card > h2 { grid-column: 1 / -1; margin: 0 0 2px; font-size: 17px; }
  #pause .card > * { margin: 0; min-width: 0; }
  #pause .card > .steerpick:has(.airbtn) { grid-row: span 3; }
  #pause .steerpick .fine { margin: 0 0 2px; font-size: 10.5px; }
  #pause .steerpick .seg + .fine { display: none; }
  #pause .card button { margin: 2px 3px; padding: 5px 9px; font-size: 12.5px; line-height: 1.2; min-height: 38px; }
  #pause .card [data-air] { font-size: 11px; padding: 4px 7px; }
  #pause .card .airbtn { font-size: 12px; }
  #pause .card label { margin: 2px 0; font-size: 12px; gap: 8px; }
  #pause .card label input[type=range] { width: 46%; }
  #pause .card > p.fine:empty, #pause .card > p.fine:has(> span:empty) { display: none; }
  #pause .card #btnResume { position: static !important; box-shadow: none !important; font-size: 15px; }
  #pause .card .seg { display: flex; flex-wrap: wrap; justify-content: center; }
}
@media (max-height: 400px) and (orientation: landscape) {   /* 640x360 / 667x375: tighter so the whole pause card fits */
  #pause .card { column-count: auto; gap: 0 10px; padding: 4px 10px; }
  #pause .card > h2 { font-size: 15px; }
  #pause .card button { margin: 1px 2px; padding: 3px 7px; font-size: 11.5px; min-height: 36px; }
  #pause .card [data-steer], #pause .card [data-trans] { padding: 3px 6px; min-width: 36px; }
  #pause .card [data-air] { font-size: 10.5px; padding: 2px 6px; }
  #pause .card label { font-size: 11.5px; }
  #pause .steerpick .fine { font-size: 10px; }
}
/* menu on the shortest phones (640x360, 667x375) after the scene picker joined: dense 3-column grid, nothing removed */
@media (max-height: 400px) and (orientation: landscape) {
  #menu .card { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row dense; column-count: auto; gap: 2px 12px; align-items: start; padding: 4px 10px; }
  #menu .card > h1, #menu .card > .tag { grid-column: 1 / -1; margin: 0; }
  #menu .card > h1 { font-size: 20px; } #menu .card > .tag { font-size: 9.5px; margin-bottom: 2px; }
  #menu .card > * { margin: 0; min-width: 0; }
  #menu .card .how { font-size: 10.5px; line-height: 1.3; }
  #menu .card button { margin: 1px 2px; padding: 3px 7px; font-size: 11.5px; min-height: 36px; }
  #menu .card .fine { font-size: 9.5px; line-height: 1.25; margin: 1px 0; }
  #menu .card { grid-auto-flow: row; }
  #menu .card > h1 { grid-column: 1 / 3; grid-row: 1; } #menu .card > .tag { grid-column: 3; grid-row: 1; align-self: center; }
  #menu .card > .scenepick { grid-column: 1; grid-row: 2 / span 3; }
  #menu .card > .how { grid-column: 1; grid-row: 5; }
  #menu .card > .touchonly.steerpick, #menu .card > .deskonly.steerpick { grid-column: 2; grid-row: 2 / span 2; }
  #menu .card > .steerpick:has(#btnAir) { grid-column: 2; grid-row: 4 / span 2; }
  #menu .card #btnPlay { grid-column: 3; grid-row: 2; font-size: 15px; padding: 6px 10px; position: static !important; box-shadow: none !important; }
  #menu .card .mpbtns { grid-column: 3; grid-row: 3; }
  #menu .card > #btnShop, #menu .card > p.fine { grid-column: 3; }
  #menu .card #apiTag { display: none; }   /* renderer tag is diagnostic; no room on 360 px tall screens */
  #menu .card .scenepick button { padding: 2px 6px; font-size: 11px; margin: 1px; }
  #menu .card > .how { font-size: 10px; line-height: 1.25; }
  #menu .card label { font-size: 11px; margin: 2px 0; }
}
/* main action always visible: pinned to the bottom of a scrolling card */
#pause .card #btnResume, #menu .card #btnPlay, #results .card #resClose { position: sticky; bottom: 0; z-index: 2; box-shadow: 0 -6px 14px rgba(20,10,4,.6); }

#gearBtns .clutchbtn { width: 74px; height: 46px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font: 700 12px system-ui; color: #fff; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.25); }
body:not(.manual) #gearBtns .clutchbtn { display: none; }
/* drag the car's own wheel (cockpit view): an invisible grab ring kept over the 3D wheel each frame */
#cwheel { position: fixed; display: none; border-radius: 50%; touch-action: none; z-index: 4; pointer-events: auto; border: 2px dashed rgba(255,255,255,.18); cursor: grab; }
body.touch.steer-cockpit.cam-cockpit #cwheel, body.desk-mwheel.cam-cockpit:not(.touch) #cwheel { display: block; }
body.desk-mwheel.cam-cockpit:not(.touch) #swheel { display: none !important; }body.touch.steer-cockpit:not(.cam-cockpit) .wheelonly { display: block !important; }   /* chase cam: fall back to the on-screen wheel */

/* Air Wheel (camera steering) */
.airbtn { width: 100%; border-color: rgba(255,155,43,.7) !important; }
.airbtn.on { background: linear-gradient(180deg, #ff9b2b, #e0701a) !important; color: #1a1008 !important; font-weight: 800; }
button.pro::after { content: 'PRO'; margin-left: 6px; padding: 1px 5px; border-radius: 4px; font: 800 10px/1.4 system-ui; background: #ffd077; color: #1a1008; vertical-align: middle; }
#keyLegend { position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 4; padding: 7px 14px; border-radius: 10px; background: rgba(9,15,22,.72); border: 1px solid rgba(255,155,43,.45); font: 600 13px/1.4 system-ui; color: #f6eee4; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .4s; }
#keyLegend.show { opacity: 1; }
#keyLegend b { color: #ffd077; }
body.touch #keyLegend { display: none; }
@media (max-width: 900px) { #keyLegend { white-space: normal; width: 92vw; text-align: center; } }
#btnReset.pulse { animation: dbpulse .6s ease-in-out 6 alternate; }
@keyframes dbpulse { from { box-shadow: 0 0 0 0 rgba(255,155,43,.0); } to { box-shadow: 0 0 0 6px rgba(255,155,43,.85); } }

/* ---- spectator mode (src/spectate.js) */
body.spectating #hud #tl, body.spectating #hud #tr, body.spectating #hud #btns, body.spectating #pedals, body.spectating #guide, body.spectating #off, body.spectating #keyLegend, body.spectating #tiltInd { display: none !important; }
#watchList { list-style: none; padding: 0; margin: 8px 0; max-height: 50vh; overflow: auto; }
#watchList li { padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
#watchList li span { opacity: .75; margin-left: 6px; font-size: 13px; }
#specHud { display: none; position: fixed; inset: 0; pointer-events: none; color: #fff; font: 600 14px system-ui; z-index: 20; }
#specHud.show { display: block; }
#specTop { position: absolute; left: max(10px, env(safe-area-inset-left)); top: max(8px, env(safe-area-inset-top)); background: rgba(0,0,0,.55); padding: 6px 10px; border-radius: 6px; }
#specPhase { background: #e33; padding: 1px 6px; border-radius: 4px; margin-right: 6px; }
#specViewers { opacity: .8; margin-left: 8px; }
#specBoard { position: absolute; left: max(10px, env(safe-area-inset-left)); top: 52px; margin: 0; padding: 6px 8px; list-style: none; background: rgba(0,0,0,.5); border-radius: 6px; min-width: 190px; pointer-events: auto; max-height: 45vh; overflow: auto; }
#specBoard li { padding: 2px 4px; cursor: pointer; white-space: nowrap; }
#specBoard li.on { background: rgba(255,200,40,.3); border-radius: 4px; }
#specBoard li b { display: inline-block; width: 1.4em; color: #ffcc33; }
#specBoard li span { opacity: .7; font-size: 12px; margin-left: 6px; }
#specCtl { position: absolute; right: max(10px, env(safe-area-inset-right)); top: max(8px, env(safe-area-inset-top)); pointer-events: auto; display: flex; gap: 6px; align-items: center; }
#specCtl span { background: rgba(0,0,0,.55); padding: 6px 8px; border-radius: 6px; font-size: 12px; }
#specCtl button { min-height: 38px; }
#vchat { position: absolute; right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); width: min(340px, 44vw); pointer-events: auto; background: rgba(0,0,0,.5); border-radius: 8px; padding: 6px; }
#vchatLog { max-height: 28vh; overflow: auto; font: 500 13px/1.35 system-ui; margin-bottom: 4px; }
#vchatLog .note { opacity: .7; font-style: italic; }
#vchatIn { width: 100%; box-sizing: border-box; padding: 8px; border-radius: 6px; border: 0; font: 14px system-ui; }
#specHelp { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); opacity: .6; font-size: 12px; margin: 0; }
@media (max-height: 450px) { #specBoard { max-height: 38vh; min-width: 150px; font-size: 12px; } #vchatLog { max-height: 22vh; } }

/* drivers: spectator count (QA 10-13 D8) */
#mpWatch { position: fixed; top: calc(58px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); padding: 3px 10px; border-radius: 10px; background: rgba(160,20,20,.75); color: #fff; font: 700 12px system-ui; letter-spacing: 1px; text-transform: uppercase; pointer-events: none; z-index: 5; display: none; }
#mpWatch.show { display: block; }
body.spectating #mpWatch { display: none; }

/* gun buggy FIRE (touch): above the gas pedal, only for gun cars */
.pedal.fire { display: none; right: max(10px, env(safe-area-inset-right)); bottom: calc(max(10px, env(safe-area-inset-bottom)) + 42vh); width: 28vw; height: 15vh; border-color: rgba(255,80,40,.75); background: rgba(120,20,10,.3); }
body.touch.gun .pedal.fire { display: flex; }
body.touch.gun.steer-thumb.thumb-right .pedal.fire, body.touch.gun.steer-wheel.thumb-right .pedal.fire { right: auto; left: max(10px, env(safe-area-inset-left)); }

/* account box on the menu (accounts flag) */
.acct { margin: 8px 0 2px; font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; }
.acct a { color: #ffb347; }
.acct .fine { margin: 0; }

/* Pro controls lock (entitlements.js): visible badge on paid controls while the paywall is on */
button.pro .probadge { display: inline-block; margin-left: .4em; padding: 0 .35em; border-radius: 4px; background: #ffb21f; color: #1a1206; font-size: .72em; font-weight: 800; letter-spacing: .04em; vertical-align: middle; }
button.pro.unlocked .probadge { background: #5c6; }
body.chat-hidden #chatLog { display: none; }

/* replay (cams.js): broadcast look - letterbox bars, only the replay bar on screen */
#replayBar { display: none; position: absolute; top: calc(7vh + 10px); left: 50%; transform: translateX(-50%); gap: 10px; align-items: center; z-index: 30; pointer-events: auto; }
#replayBar .rec { font: 800 15px/1 system-ui, sans-serif; letter-spacing: .12em; color: #fff; background: #d42; padding: 6px 10px; border-radius: 4px; }
#replayBar button { font: 700 14px system-ui, sans-serif; padding: 7px 14px; border-radius: 6px; border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.55); color: #fff; }
body.replaying #replayBar { display: flex; }
body.replaying #hud > :not(#replayBar):not(#msg) { visibility: hidden; }
body.replaying #pedals, body.replaying #keyLegend, body.replaying #guide { display: none !important; }
body.replaying::before, body.replaying::after { content: ''; position: fixed; left: 0; right: 0; height: 7vh; background: #000; z-index: 20; pointer-events: none; }
body.replaying::before { top: 0; } body.replaying::after { bottom: 0; }

/* 10-13 round 8: pause gained Replay + chat/voice; menu gained 2 scenes -> short landscape phones: 4-column pause, the chat/voice
   status line folds into its button labels, scene buttons tighter */
@media (max-height: 520px) and (orientation: landscape) {
  #pause .card { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #commsState { display: none; }
  #menu #scenePick button { padding: 4px 7px; font-size: 11.5px; min-height: 34px; margin: 1px; }
  #menu #sceneHint { font-size: 10.5px; margin: 2px 0; }
}
@media (max-height: 520px) and (orientation: landscape) {
  #menu #scenePick button { min-height: 36px; min-width: 36px; }
  #pause .card > h2 { grid-column: 2 / -1; grid-row: 1; text-align: left; align-self: center; }
  #pause .card > #btnResume { grid-column: 1; grid-row: 1; }   /* Resume always in the top row, never below the fold */
}
#btnMore { display: none; }
@media (max-height: 520px) and (orientation: landscape) {   /* short phones: pause = two pages (driving controls | More settings), Resume always on top */
  #btnMore { display: inline-block; }
  #pause:not(.more) .pmore { display: none !important; }
  #pause.more .card > :not(h2):not(#btnResume):not(#btnMore):not(.pmore):not(#btnRestart):not(#btnReplay) { display: none !important; }
  #qPick button { padding: 3px 6px; font-size: 11.5px; }
}
/* purchase sheet (checkout.js): Stripe's embedded checkout mounts inside */
#buy { z-index: 80; }
#buy .buycard { max-width: min(520px, 94vw); max-height: 94dvh; overflow-y: auto; }
#buy .buyPrice { font-weight: 800; font-size: 18px; color: #ffb347; margin: 6px 0 10px; }
#buyMount { min-height: 0; margin: 8px 0; border-radius: 10px; overflow: hidden; background: #fff; }
#buyMount:empty { display: none; }
#credits .card a, #menu a#btnCredits { color: #ffb347; }
label.filebtn { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 6px 12px; margin: 3px; border-radius: 8px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); cursor: pointer; font-weight: 600; }
@media (max-height: 400px) and (orientation: landscape) {   /* 640x360: the credits/network line pushed the menu card off screen */
  #menu .card > p.fine:has(#btnCredits) { display: none; }
  #menu #sceneHint { display: none; }
}
@media (max-height: 520px) and (orientation: landscape) { #pause .card > .steerpick:has(.airbtn) { grid-row: auto; } }

/* sandstorms + goggles (storms.js) */
#stormHud { position: absolute; top: 74px; left: 50%; transform: translateX(-50%); display: none; flex-direction: column; align-items: center; gap: 6px; z-index: 12; pointer-events: auto; }
#stormHud.show { display: flex; }
#stormHud .st { font: 900 20px/1 system-ui, sans-serif; letter-spacing: .12em; color: #ffd38a; text-shadow: 0 2px 8px rgba(0,0,0,.7); background: rgba(60,30,8,.55); padding: 6px 14px; border-radius: 6px; }
#stormHud .gg { font: 700 14px system-ui, sans-serif; min-height: 40px; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(255,211,138,.7); background: rgba(0,0,0,.55); color: #fff; }
#stormGrain { position: fixed; inset: 0; pointer-events: none; z-index: 4; opacity: 0; transition: opacity .6s; background: repeating-radial-gradient(circle at 30% 40%, rgba(255,220,170,.35) 0 1px, transparent 1px 3px), repeating-radial-gradient(circle at 70% 60%, rgba(120,80,40,.3) 0 1px, transparent 1px 4px); mix-blend-mode: overlay; }
#gogLens { position: fixed; inset: 0; pointer-events: none; z-index: 4; display: none; background: radial-gradient(ellipse 70% 62% at 50% 50%, rgba(255,170,60,.10) 60%, rgba(40,20,5,.65) 100%); box-shadow: inset 0 0 0 9999px rgba(255,150,40,.06); }
body.goggles #gogLens { display: block; }
@media (max-height: 440px) and (orientation: landscape) {   /* 10 scenes: keep the menu card on screen on 412 px tall phones */
  #menu .card > p.fine:has(#btnCredits) { display: none; } #menu #sceneHint { display: none; }
  #menu #scenePick button { padding: 3px 6px; font-size: 11px; }
  #menu .card .how { display: none; }
}

/* raider chase (raiders.js) */
#threat { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); display: none; align-items: center; gap: 8px; z-index: 11; font: 800 12px system-ui, sans-serif; letter-spacing: .14em; color: #ffcf9a; text-shadow: 0 1px 4px #000; }
#threat.show { display: flex; } #threat span { width: 160px; height: 9px; border-radius: 5px; background: rgba(0,0,0,.55); overflow: hidden; border: 1px solid rgba(255,140,60,.6); }
#threat i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #f9b33e, #ff3b1a); transition: width .2s; }
#threat.hot b { color: #ff5a3a; animation: thr .5s infinite alternate; } @keyframes thr { to { opacity: .45; } }
#wreckBanner { position: absolute; top: 34%; left: 50%; transform: translate(-50%, -50%) rotate(-4deg); display: none; z-index: 13; font: 900 64px/1 system-ui, sans-serif; letter-spacing: .1em; color: #ff4a1a; text-shadow: 0 4px 0 #300, 0 0 30px rgba(255,80,20,.6); pointer-events: none; }
body.wrecked #wreckBanner { display: block; }
/* 10-14 OpenAI design pass: art logo + cinematic loading screen (static/art, one-time generated, cached) */
#loading { background: #05080d url(art/screen-loading.webp) center 35% / cover no-repeat; }
#loading::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,8,13,.25) 0%, rgba(5,8,13,0) 40%, rgba(5,8,13,.85) 100%); }
#loading > div { position: relative; align-self: flex-end; margin-bottom: 9vh; }
.artlogo { line-height: 0; margin: 0; } .artlogo img { width: min(560px, 80vw); height: auto; filter: drop-shadow(0 8px 24px rgba(0,0,0,.6)); }
.card .artlogo img { width: min(360px, 70vw); }
#loadMsg { font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #ffd08a; }
.loadtip { max-width: 560px; margin: 8px auto 0; color: #e8e2d8; font-size: 15px; text-shadow: 0 2px 8px #000; }
/* controller focus + TV / 10-foot mode (padui.js) */
.overlay button:focus-visible, .overlay a:focus-visible, .overlay input:focus-visible, body[data-pad] .overlay button:focus { outline: 3px solid #ffb347; outline-offset: 3px; box-shadow: 0 0 0 6px rgba(255,179,71,.25); }
body.tv { font-size: 22px; }
body.tv .overlay .card { padding: 4vh 5vw; max-width: 90vw; }
body.tv .overlay button { font-size: 22px; min-height: 60px; padding: 12px 24px; }
body.tv .overlay .fine, body.tv .overlay p { font-size: 18px; }
body.tv #hud { padding: 5vh 5vw; } body.tv #hud * { font-size: 1.25em; }
/* How to play + first-run controls card */
#ctlPick, #howto { z-index: 40; }
.ctlseg button { display: block; width: 100%; text-align: left; margin: 6px 0; padding: 12px 14px; }
.ctlseg button small { display: block; opacity: .75; font-size: 12px; }
.ctlseg button.rec::after { content: 'RECOMMENDED'; float: right; font-size: 10px; letter-spacing: .1em; background: #ff8a1a; color: #111; padding: 2px 6px; border-radius: 3px; }
.howcard { max-width: min(980px, 94vw); max-height: 90vh; overflow: auto; }
.howgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 10px 0 14px; text-align: left; }
.howgrid div { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 10px 12px; }
.howgrid b { color: #ffb347; } .howgrid p { margin: 4px 0 0; font-size: 13px; line-height: 1.4; }
@media (max-width: 800px) { .howgrid { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .howgrid { grid-template-columns: 1fr; } }
#resTable caption { caption-side: top; text-align: left; padding: 4px 0 8px; color: #ffd08a; font-weight: 800; } #resTable tr.you td { color: #ffb347; font-weight: 900; } #resTable small { opacity: .65; }
/* 10-15 SWEEP P1 fix: in short landscape the multi-column cards pushed the controls card, scene picker, race length and Air Wheel hint
   OFF SCREEN. One column, full width, the overlay scrolls vertically, seg rows wrap; nothing can sit outside the viewport. */
@media (max-height: 520px) and (orientation: landscape) {
  .overlay { overflow: hidden !important; align-items: center !important; }
  .overlay .card { columns: auto !important; column-count: auto !important; column-width: auto !important; width: min(720px, 94vw) !important; max-width: 94vw !important; max-height: calc(100dvh - 12px) !important; overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; margin: 6px auto !important; }
  .seg { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; } .seg button { flex: 1 1 auto; min-height: 44px; white-space: normal; }
  .howgrid { grid-template-columns: 1fr 1fr; } .ctlseg button { width: 100%; }
}
/* card grids measurable by the tester (data-grid): equal heights per row */
[data-grid] { display: grid; grid-auto-rows: 1fr; }
.ctlseg { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 8px; max-width: 100%; } .ctlseg button { width: auto !important; min-width: 0; margin: 0; } .overlay .card * { max-width: 100%; box-sizing: border-box; }
@media (max-height: 520px) and (orientation: landscape) { #menu .card, #pause .card { display: block !important; } #menu .card > *, #pause .card > * { grid-column: auto !important; grid-row: auto !important; } #menu .card #btnPlay { width: 100%; margin: 6px 0; } }
@media (max-height: 520px) and (orientation: landscape) { #menu .card, #pause .card { display: flex !important; flex-direction: column; align-items: stretch; } #menu .card > .artlogo { order: -3; } #menu .card > .artlogo img { width: min(260px, 50vw); margin: 0 auto; } #menu .card > .tag { display: none; } #menu .card > #btnPlay, #pause .card > #btnResume { order: -2; position: sticky !important; top: 0; z-index: 2; } #pause .card > h2 { order: -3; } }

/* ================= CINEMATIC MAIN MENU (Todd 10-15): full screen over the live 3D scene (menu camera swings around the car in the
   right third), 4 primary actions on the left, big even scene cards along the bottom, Setup + Online as sheets. ================= */
#menu.cine { display: none; padding: 0 !important; background: none; overflow: hidden !important; }
#menu.cine.show { display: grid !important; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; align-items: stretch !important; justify-content: stretch; }
#menu .cm-shade { position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(90deg, rgba(8,5,3,.82) 0%, rgba(8,5,3,.55) 28%, rgba(8,5,3,0) 55%),
              linear-gradient(0deg, rgba(8,5,3,.9) 0%, rgba(8,5,3,.55) 22%, rgba(8,5,3,0) 42%),
              linear-gradient(180deg, rgba(8,5,3,.6) 0%, rgba(8,5,3,0) 14%); }
#menu.cine > *:not(.cm-shade):not(.cm-sheet) { position: relative; z-index: 1; }
#menu .cm-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: max(18px, env(safe-area-inset-top)) max(40px, env(safe-area-inset-right)) 0 max(40px, env(safe-area-inset-left)); }
#menu .cm-top .artlogo img { width: clamp(220px, 24vw, 420px); height: auto; filter: drop-shadow(0 10px 30px rgba(0,0,0,.7)); }
#menu .cm-topr { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
#menu .acct { margin: 0; }
#menu .cm-actions { align-self: center; display: flex; flex-direction: column; gap: 10px; width: min(460px, 40vw); padding: 0 0 0 max(40px, env(safe-area-inset-left)); }
#menu .cm-act { display: block; width: 100%; text-align: left; padding: 14px 22px 14px 24px; min-height: 64px; margin: 0; border-radius: 6px;
  font: 900 clamp(20px, 2.2vw, 30px)/1.05 system-ui; letter-spacing: 2.5px; text-transform: uppercase; color: #fff;
  background: linear-gradient(90deg, rgba(14,9,5,.78), rgba(14,9,5,.35)); border: 1px solid rgba(255,255,255,.14); border-left: 4px solid rgba(255,138,42,.55);
  box-shadow: 0 8px 26px rgba(0,0,0,.35); backdrop-filter: blur(6px); transition: transform .12s, border-color .12s, background .12s; }
#menu .cm-act::after { content: attr(data-sub); display: block; margin-top: 5px; font: 600 13px/1.2 system-ui; letter-spacing: .3px; text-transform: none; color: var(--sand); opacity: .85; }
#menu .cm-act:hover, #menu .cm-act:focus-visible { transform: translateX(6px); border-color: rgba(255,179,71,.6); border-left-color: #ffb347; background: linear-gradient(90deg, rgba(60,30,10,.85), rgba(14,9,5,.4)); }
#menu .cm-act.cm-primary { background: linear-gradient(90deg, #ff8a2a, #e0560a 70%, rgba(224,86,10,.6)); border: 0; border-left: 4px solid #ffd08a; box-shadow: 0 10px 34px rgba(255,110,20,.4); font-size: clamp(26px, 3vw, 40px); min-height: 78px; }
#menu .cm-act.cm-primary::after { color: #fff3e0; }
#menu .cm-subrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
#menu .cm-chip { margin: 0; min-height: 44px; padding: 8px 14px; border-radius: 22px; font: 700 13.5px system-ui; background: rgba(14,9,5,.6); border: 1px solid rgba(255,255,255,.2); }
#menu .cm-chip:hover, #menu .cm-chip:focus-visible { border-color: #ffb347; }
#menu .cm-scenes { padding: 6px max(40px, env(safe-area-inset-right)) 4px max(40px, env(safe-area-inset-left)); min-width: 0; }
#menu .cm-shead { display: flex; align-items: baseline; gap: 14px; margin: 0 0 8px; font: 800 13px system-ui; letter-spacing: 3px; text-transform: uppercase; color: #fff; }
#menu #sceneHint { font: 600 13px system-ui; letter-spacing: 0; text-transform: none; color: var(--sand); opacity: .9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#menu .cm-cards { display: grid !important; grid-auto-flow: column; grid-auto-columns: minmax(170px, 1fr); grid-auto-rows: auto; gap: 12px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; padding: 4px 2px 10px; scrollbar-width: thin; scrollbar-color: rgba(255,179,71,.5) transparent; }
#menu .cm-card { position: relative; display: block; margin: 0; padding: 0; aspect-ratio: 16 / 10; width: 100%; min-height: 0; border-radius: 10px; overflow: hidden; scroll-snap-align: start; text-align: left;
  border: 2px solid rgba(255,255,255,.14); background: #120b06; box-shadow: 0 8px 22px rgba(0,0,0,.45); transition: transform .14s, border-color .14s; }
#menu .cm-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
#menu .cm-card::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.25) 45%, rgba(0,0,0,0) 70%); }
#menu .cm-card .cm-cn, #menu .cm-card small { position: absolute; left: 10px; right: 8px; z-index: 2; text-shadow: 0 1px 3px #000; }
#menu .cm-card .cm-cn { bottom: 24px; font: 900 15px/1.1 system-ui; letter-spacing: .6px; text-transform: uppercase; color: #fff; }
#menu .cm-card small { bottom: 7px; font: 600 11.5px/1.2 system-ui; color: var(--sand); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#menu .cm-card:hover, #menu .cm-card:focus-visible { transform: translateY(-3px); border-color: rgba(255,179,71,.75); }
#menu .cm-card:hover img { transform: scale(1.05); }
#menu .cm-card.on { border-color: #ffb347; box-shadow: 0 0 0 3px rgba(255,179,71,.35), 0 10px 26px rgba(0,0,0,.5); }
#menu .cm-card.on::after { content: 'SELECTED'; position: absolute; top: 8px; right: 8px; z-index: 2; padding: 3px 8px; border-radius: 4px; font: 900 10px system-ui; letter-spacing: 1.5px; background: #ffb347; color: #1a1008; }
#menu .cm-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 2px max(40px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(40px, env(safe-area-inset-left)); font: 600 12px system-ui; color: rgba(255,255,255,.7); }
#menu .cm-foot a { color: #ffb347; text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
#menu .cm-foot #apiTag { margin-left: auto; opacity: .45; font-size: 11px; }
#menu .cm-sheet { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; background: rgba(6,4,2,.6); backdrop-filter: blur(3px); padding: 10px; }
#menu .cm-sheet[hidden] { display: none; }
#menu .cm-sheetc { width: min(640px, 94vw); max-height: calc(100dvh - 20px); overflow-y: auto; padding: 20px 24px; border-radius: 14px; background: rgba(22,13,6,.92); border: 1px solid rgba(255,179,71,.3); text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
#menu .cm-sheetc h2 { margin: 0 0 10px; font: 900 22px system-ui; letter-spacing: 3px; text-transform: uppercase; }
#menu .cm-sheetc .fine { font-size: 12.5px; opacity: .78; } #menu .cm-sheetc .steerpick { margin: 10px 0; }
#menu .cm-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } #menu .cm-two .cm-act { font-size: 20px; }
#menu.sheet-open .cm-actions, #menu.sheet-open .cm-scenes { visibility: hidden; }
body.tv #menu .cm-act { font-size: 32px; min-height: 84px; } body.tv #menu .cm-card .cm-cn { font-size: 20px; } body.tv #menu .cm-chip { font-size: 18px; min-height: 56px; }
/* narrow / portrait: stack, scroll the whole menu */
@media (max-width: 760px) and (orientation: portrait) {
  #menu.cine.show { overflow-y: auto !important; grid-template-rows: auto auto auto auto; }
  #menu .cm-top, #menu .cm-scenes, #menu .cm-foot { padding-left: 16px; padding-right: 16px; }
  #menu .cm-top .artlogo img { width: min(300px, 70vw); }
  #menu .cm-actions { width: auto; padding: 18vh 16px 10px; }
  #menu .cm-cards { grid-auto-flow: row; grid-template-columns: 1fr 1fr; overflow: visible; }
  #menu .cm-shade { background: linear-gradient(0deg, rgba(8,5,3,.92) 0%, rgba(8,5,3,.6) 55%, rgba(8,5,3,.2) 100%); }
}
/* COMPACT LANDSCAPE (phones, short laptops): logo + chips on one line, 2x2 actions, one row of cards, tiny footer; nothing scrolls off */
@media (max-height: 560px) and (orientation: landscape) {
  #menu .cm-top { padding: max(6px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left)); align-items: center; }
  #menu .cm-top .artlogo img { width: clamp(120px, 22vw, 200px); }
  #menu .cm-actions { width: min(520px, 58vw); padding-left: max(14px, env(safe-area-inset-left)); display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-self: center; }
  #menu .cm-act, #menu .cm-act.cm-primary { min-height: 46px; padding: 6px 12px; font-size: 15px; letter-spacing: 1.5px; }
  #menu .cm-act::after { font-size: 10.5px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #menu .cm-subrow { grid-column: 1 / -1; gap: 6px; margin: 0; } #menu .cm-chip { min-height: 44px; padding: 4px 10px; font-size: 12px; }
  #menu .cm-scenes { padding: 2px max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left)); }
  #menu .cm-shead { margin: 0 0 3px; font-size: 11px; } #menu #sceneHint { font-size: 11px; }
  #menu .cm-cards { grid-auto-columns: clamp(112px, 17vw, 170px); gap: 8px; padding: 2px 2px 4px; }
  #menu .cm-card .cm-cn { font-size: 12px; bottom: 6px; } #menu .cm-card small { display: none; } #menu .cm-card.on::after { top: 4px; right: 4px; padding: 2px 5px; font-size: 8.5px; }
  #menu .cm-foot { padding: 0 max(14px, env(safe-area-inset-right)) max(3px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); font-size: 10px; gap: 2px 10px; }
  #menu .cm-foot a { min-height: 24px; } #menu .cm-foot #apiTag { display: none; }
  #menu .cm-sheetc { padding: 10px 14px; } #menu .cm-sheetc h2 { font-size: 16px; margin-bottom: 4px; }
}
@media (max-height: 400px) and (orientation: landscape) {
  #menu .cm-act::after { display: none; } #menu .cm-act, #menu .cm-act.cm-primary { min-height: 44px; font-size: 14px; }
  #menu .cm-cards { grid-auto-columns: clamp(100px, 15vw, 140px); } #menu .cm-shead #sceneHint { display: none; }
}
/* menu polish r2: no race HUD behind the menu, account line compact, chips on one row */
body:has(#menu.show) #hud, body:has(#menu.show) #pedals, body:has(#menu.show) #keyLegend, body:has(#menu.show) #cwheel { visibility: hidden !important; }
#menu .acct { display: flex; align-items: center; gap: 8px; } #menu .acct .fine { max-width: 260px; font-size: 11.5px; opacity: .75; line-height: 1.25; text-align: right; }
#menu .acct button { margin: 0; min-height: 44px; }
#menu .cm-actions { width: min(540px, 42vw); }
#menu .cm-subrow { flex-wrap: nowrap; } #menu .cm-chip { padding: 8px 12px; white-space: nowrap; }
@media (max-height: 560px) and (orientation: landscape) {
  #menu .acct .fine { display: none; } #menu #btnCtl { display: none; } #menu .cm-subrow { overflow: hidden; }
  #menu .cm-chip { padding: 4px 10px; }
}
@media (max-width: 760px) and (orientation: portrait) { #menu .cm-subrow { flex-wrap: wrap; } #menu .acct .fine { display: none; } }
/* CENTERING PASS (Todd 10-15 "perfectly center every card"): scene cards = centered even grid (5 x 2; 10 x 1 on >= 1800 px wide),
   container max-width + margin-inline auto, text centered inside each card, heading centered. No scrolling carousel. */
#menu .cm-scenes { width: 100%; }
#menu .cm-shead { justify-content: center; text-align: center; flex-wrap: wrap; row-gap: 2px; }
#menu .cm-cards { grid-auto-flow: row !important; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-columns: auto !important; justify-content: center; justify-items: stretch;
  overflow: visible !important; scroll-snap-type: none; max-width: min(1400px, 100%); margin-inline: auto; padding: 4px 0 6px !important; }
#menu .cm-card { aspect-ratio: 16 / 9; text-align: center; }
#menu .cm-card .cm-cn, #menu .cm-card small { left: 6px; right: 6px; text-align: center; }
#menu .cm-card.on::after { left: 50%; right: auto; transform: translateX(-50%); }
@media (min-width: 1800px) and (min-height: 700px) { #menu .cm-cards { grid-template-columns: repeat(10, minmax(0, 1fr)); max-width: 1840px; } }
@media (max-height: 860px) and (min-height: 561px) and (orientation: landscape) {   /* 1280x720 / 1366x768 laptops: 2 x 2 actions so 2 card rows fit */
  #menu .cm-actions { display: grid; grid-template-columns: 1fr 1fr; width: min(820px, 64vw); gap: 8px; }
  #menu .cm-act, #menu .cm-act.cm-primary { min-height: 60px; font-size: clamp(18px, 1.8vw, 24px); padding: 10px 16px; }
  #menu .cm-subrow { grid-column: 1 / -1; }
  #menu .cm-cards { max-width: min(1100px, 100%); }
}
@media (max-height: 560px) and (orientation: landscape) {
  #menu .cm-cards { gap: 6px; max-width: 100%; } #menu .cm-card .cm-cn { font-size: 11px; bottom: 4px; }
  #menu .cm-actions { grid-template-columns: 1fr 1fr 1fr 1fr; width: auto; padding-right: max(14px, env(safe-area-inset-right)); } #menu .cm-subrow { grid-column: 1 / -1; justify-content: flex-start; }
  #menu .cm-act::after { display: none; } #menu .cm-act, #menu .cm-act.cm-primary { min-height: 44px; font-size: 13px; letter-spacing: 1px; text-align: center; padding: 4px 8px; }
}
@media (max-width: 760px) and (orientation: portrait) { #menu .cm-cards { grid-template-columns: 1fr 1fr; } }
/* LOADING SCREEN v2 (Todd 10-15 "loading screen looks broken": art cropped to a strip over a black void): the scene's own key art
   full-bleed (cover), logo centred, real progress bar + tip + GPU line at the bottom over a soft gradient. */
#loading { background: #05080d url(art/load-dunes.webp) center / cover no-repeat !important; flex-direction: column; }
#loading::before { background: linear-gradient(180deg, rgba(5,8,13,.35) 0%, rgba(5,8,13,0) 30%, rgba(5,8,13,0) 55%, rgba(5,8,13,.88) 100%) !important; }
#loading > div { position: relative; align-self: stretch; margin: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: max(7vh, env(safe-area-inset-top)) 16px max(6vh, env(safe-area-inset-bottom)); }
#loading .artlogo img { width: min(640px, 72vw); height: auto; }
#loading #loadMsg { margin: auto 0 10px; font: 800 15px system-ui; letter-spacing: 3px; text-transform: uppercase; color: #ffd08a; text-shadow: 0 2px 8px #000; }
#loadBar { width: min(560px, 80vw); height: 8px; border-radius: 4px; background: rgba(255,255,255,.15); overflow: hidden; margin: 0 auto 6px; box-shadow: 0 0 0 1px rgba(255,255,255,.12); }
#loadBar i { display: block; height: 100%; width: 2%; background: linear-gradient(90deg, #ff8a2a, #ffd08a); transition: width .25s; }
#loading .loadtip { font-size: 16px; } #loading .loadgpu { margin: 6px 0 0; font: 600 12px system-ui; color: rgba(255,255,255,.7); text-shadow: 0 1px 4px #000; }
@media (max-height: 520px) { #loading .artlogo img { width: min(380px, 60vw); } #loading > div { padding-top: 4vh; padding-bottom: 4vh; } #loading .loadtip { font-size: 13px; } }
/* MENU BACKDROP = pre-rendered cinematic loop (Todd 10-15: live 3D backdrop looked like a prototype + cost GPU) */
#menu .cm-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; }
#menu .cm-shade { z-index: 0; }
/* first-run controls card: full screen and opaque, shown BEFORE the menu (never layered over half the menu) */
#ctlPick { background: #05080d url(art/menu-poster.jpg) center / cover no-repeat; }
#ctlPick::before { content: ''; position: absolute; inset: 0; background: rgba(5,8,13,.72); }
#ctlPick .card { position: relative; background: rgba(22,13,6,.94); }
body:has(#ctlPick.show) #menu { visibility: hidden; }
/* menu while the race is still loading: Race buttons show progress, disabled */
#menu .cm-act[disabled] { opacity: .75; cursor: progress; filter: saturate(.7); }
/* type hierarchy: footer + renderer tag readable */
#menu .cm-foot { font-size: 13px; color: rgba(255,255,255,.82); } #menu .cm-foot #apiTag { opacity: .6; font-size: 12px; }
#menu.cine > video.cm-bg { position: absolute !important; inset: 0; z-index: 0 !important; grid-area: auto; }
#menu.cine > .cm-shade { position: absolute !important; }
/* centering pass (in-game): how-to cards, controls picker, shop items, results centered */
.howgrid > div, .howgrid > div p, .ctlseg button, #shop .items > *, #results .card { text-align: center !important; }
.howgrid { justify-content: center; } .ctlseg button small { text-align: center; }
#gpuWarn { position: fixed; left: 50%; top: max(10px, env(safe-area-inset-top)); transform: translateX(-50%); z-index: 30; width: min(760px, 94vw); padding: 12px 16px; border-radius: 12px; background: rgba(30,18,8,.96); border: 1px solid #ffb347; color: #fff; font: 600 14px/1.45 system-ui; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
#gpuWarn[hidden] { display: none; } #gpuWarn button { margin: 8px auto 0; display: block; min-height: 44px; }
/* REQUEST 36 P1 'bare car on the menu': the menu is OPAQUE (poster art under the video), and the 3D canvas stays hidden until the race is ready */
#menu.cine { background: #0b0705 url(art/menu-poster.jpg) center / cover no-repeat !important; }
body.not-ready #c { visibility: hidden; }

/* CLOUD / STREAMING PRESET (?cloud=1): no GPU banners; cursor hidden after 2 s idle (main.js installCloud) */
html.cloud #gpuWarn { display: none !important; }
html.cloud.cloud-idle, html.cloud.cloud-idle * { cursor: none !important; }

/* HELP 10-15: voice-guide captions (coach.js) - brief, near the HUD, above the touch pedals, readable on phones and TVs */
#coachCap { position: absolute; left: 50%; bottom: calc(clamp(150px, 26vh, 260px) + env(safe-area-inset-bottom)); transform: translate(-50%, 8px); max-width: min(720px, 86vw); display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 12px; background: rgba(12, 9, 6, .72); color: #fff; font: 600 clamp(14px, 2.2vmin, 22px)/1.3 system-ui, sans-serif; text-align: center; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 6; }
#coachCap.show { opacity: 1; transform: translate(-50%, 0); }
#coachCap .cs { display: none; flex: none; min-height: 36px; padding: 0 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.12); color: #fff; font: 700 13px system-ui; cursor: pointer; pointer-events: auto; }
#coachCap.tut .cs { display: inline-block; }
body.replaying #coachCap, body.spectating #coachCap { display: none !important; }
@media (pointer: coarse) { #coachCap { bottom: auto; top: 34%; max-width: 48vw; font-size: clamp(13px, 3.6vmin, 18px); padding: 6px 10px; flex-wrap: wrap; justify-content: center; } #coachCap .cs { min-height: 40px; } }
/* ---- feat-09 camera gear shifter gate (only while the Air Wheel runs with the hand shifter on) + Realism settings */
#shiftGate { display: none; position: absolute; right: max(12px, env(safe-area-inset-right)); bottom: calc(max(12px, env(safe-area-inset-bottom)) + 192px); width: 132px; padding: 8px; border-radius: 12px; background: rgba(10,8,6,.62); border: 1px solid rgba(255,176,74,.45); pointer-events: none; text-align: center; font: 700 13px/1 system-ui, sans-serif; color: #e8dccb; }
#shiftGate.show { display: block; }
#shiftGate .hp { display: none; grid-template-columns: repeat(3, 1fr); gap: 4px; }
#shiftGate[data-mode=h] .hp { display: grid; }
#shiftGate .hp i { font-style: normal; padding: 6px 0; border-radius: 6px; background: rgba(255,255,255,.08); }
#shiftGate .hp i.n { grid-column: 1 / span 3; padding: 3px 0; }
#shiftGate .sq { display: none; flex-direction: column; align-items: center; gap: 2px; }
#shiftGate[data-mode=seq] .sq { display: flex; }
#shiftGate .sq i { font-style: normal; opacity: .7; font-size: 16px; }
#shiftGate .sq .cur { font: 800 30px/1 system-ui, sans-serif; color: #ffcc33; }
#shiftGate i.on { background: #ffb347; color: #1a1008; }
#shiftGate .st { display: block; margin-top: 6px; font: 600 11px/1.2 system-ui, sans-serif; color: #cdbda7; }
#shiftGate.engaged { border-color: #ffcc33; box-shadow: 0 0 0 2px rgba(255,204,51,.35); }
#shiftGate.cal { border-color: #6fd3ff; }
#realSeg button.locked { opacity: .65; }
@media (max-width: 700px) { #shiftGate { width: 104px; bottom: calc(max(12px, env(safe-area-inset-bottom)) + 150px); } }
/* ---- feat-07 arcade combat: crosshair (follows the projected aim point), heat bar, hit marker */
#xhair { display: none; position: absolute; left: 50%; top: 45%; width: 0; height: 0; pointer-events: none; z-index: 3; }
#xhair.show { display: block; }
#xhair .ring { position: absolute; left: -17px; top: -17px; width: 30px; height: 30px; border: 2px solid rgba(255,255,255,.85); border-radius: 50%; box-shadow: 0 0 4px rgba(0,0,0,.6); transition: transform .12s, border-color .12s; }
#xhair .dot { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 3px rgba(0,0,0,.7); }
#xhair.lock .ring { border-color: #ff5a3c; transform: scale(.8); }
#xhair.lock .dot { background: #ff5a3c; }
#xhair .heat { position: absolute; left: -26px; top: 24px; width: 52px; height: 5px; border-radius: 3px; background: rgba(0,0,0,.45); overflow: hidden; }
#xhair .heat s { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffd34d, #ff7a1a 60%, #ff3b1f); }
#xhair.hot .heat { outline: 1px solid #ff3b1f; }
#xhair.hot .ring { border-color: #ff9b2b; border-style: dashed; }
#xhair .hm { position: absolute; left: -12px; top: -12px; width: 24px; height: 24px; opacity: 0; background: linear-gradient(45deg, transparent 45%, #fff 45%, #fff 55%, transparent 55%), linear-gradient(-45deg, transparent 45%, #fff 45%, #fff 55%, transparent 55%); }
#xhair .hm.go { animation: dbhm .22s ease-out; }
@keyframes dbhm { from { opacity: 1; transform: scale(1.3); } to { opacity: 0; transform: scale(.9); } }
/* FIRE sat under the Cam/Reset/II column on phones (iPhone 14 landscape: overlapped II): keep it left of the column */
body.touch.gun .pedal.fire { right: calc(max(10px, env(safe-area-inset-right)) + 76px); width: calc(28vw - 70px); min-width: 120px; }
body.touch.combat .pedal.fire span::after { content: ' (auto-aim)'; font-size: 10px; opacity: .8; }

/* DEVICE-AWARE HINTS (mech-10; html.in-* from the shared static/help/device.js): no key-hint bar while touch is in use */
html.in-touch #keyLegend { display: none !important; }

/* MOBILE LAYOUT (mech-11, tools/touchlayout.mjs: Pixel 7 / iPhone 14 / S22 / iPad landscape x every steering scheme x left/right-handed
   x manual/auto x FIRE): every touch target >= 44 px, nothing covers the time/lap or the speed/gear pod, no control on top of another.
   - Cam / Reset / Pause (+ Re-centre) become one row under the speed pod (they were a 37 px tall column that FIRE sat on)
   - FIRE goes back to the right edge, above GAS (the row above leaves it room)
   - the gear paddles / R / CLUTCH move to the top-left under the lap counter (they sat inside the thumb stick, the wheel or the pedals)
   - the tilt bar sits left of centre, clear of the speed pod on 780-px-wide phones (S22) */
body.touch #c { touch-action: none; }   /* the canvas had only an HTML touch-action attribute (no effect): vertical swipes became page pans */
body.touch #btns { flex-direction: row; top: calc(8px + 58px); gap: 6px; }
body.touch #btns button { min-width: 52px; min-height: 44px; padding: 0 10px; }
body.touch.gun .pedal.fire { right: max(10px, env(safe-area-inset-right)); width: 28vw; min-width: 120px; }
body.touch.gun.steer-thumb.thumb-right .pedal.fire, body.touch.gun.steer-wheel.thumb-right .pedal.fire { right: auto; left: max(10px, env(safe-area-inset-left)); }
body.touch #gearBtns, body.touch.thumb-right #gearBtns { position: fixed; top: 86px; left: max(12px, env(safe-area-inset-left)); right: auto; gap: 8px; z-index: 3; }   /* fixed: it lives inside #pedals (bottom 46vh), so 'top' was relative to the pedal strip */
body.touch #gearBtns button { width: 52px; height: 46px; }
body.touch #tiltInd { left: 36vw; transform: none; width: min(150px, 20vw); }
@media (max-height: 330px) { body.touch #gearBtns, body.touch.thumb-right #gearBtns { top: 74px; } body.touch #btns { top: 60px; } }

/* 10-15 controls visibility (Todd): option badges, menu Controls chip, one-time 'new ways to steer' spotlight */
#ctlOpts .ctag { display: inline-block; margin: 4px 4px 0 0; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 800; background: rgba(255,179,71,.18); border: 1px solid rgba(255,179,71,.6); color: #ffd79a; }
.cm-chip.cm-hot { border-color: #ffb347; color: #ffd79a; }
.spotnew { position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%); z-index: 6; width: min(460px, 92vw); padding: 14px 18px; border-radius: 14px; background: rgba(10,14,22,.92); border: 1px solid rgba(255,179,71,.7); color: #fff; text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.spotnew p { margin: 6px 0 10px; color: #f3e4cc; font-size: 14px; } .spotnew button { min-height: 44px; padding: 0 16px; }

/* MOUSE FEEL (mech-19): settings for both mouse modes; live steering indicator (thin = where your mouse/wheel is, bar = what the car gets) */
body:not(.desk-mouse):not(.desk-mwheel) .msteeronly { display: none !important; }
#mSteerInd { display: none; position: fixed; left: 50%; bottom: 64px; transform: translateX(-50%); width: 240px; height: 12px; border-radius: 6px; background: rgba(20,10,4,.5); border: 1px solid rgba(255,176,74,.45); z-index: 4; pointer-events: none; }
body.desk-mouse:not(.touch) #mSteerInd, body.desk-mwheel:not(.touch) #mSteerInd { display: block; }
body:has(.overlay.show) #mSteerInd, body.spectating #mSteerInd, body.replaying #mSteerInd { display: none !important; }
#mSteerInd i { position: absolute; top: 1px; width: 10px; height: 8px; margin-left: -5px; border-radius: 4px; }
#mSteerInd i.raw { background: rgba(255,255,255,.55); width: 3px; margin-left: -1.5px; }
#mSteerInd i.out { background: #ffb04a; }
#mSteerInd span { position: absolute; top: 14px; left: 0; right: 0; text-align: center; font: 600 10px system-ui; color: rgba(255,255,255,.75); }

/* CONTROLS VISIBILITY (mech-20, Todd 10-15 'not seeing brake on desktop or clutch for manual') */
#ctlPick .ctltrans { margin: 10px 0 6px; } #ctlPick .ctltrans .seg { margin: 4px 0; }
/* desktop mouse modes: clickable GAS / BRAKE / DRIFT pedals bottom-left (the mouse wheel sits bottom-right); pointer-lock mouse: same
   pedals as a visible reminder (left button = GAS, right button = BRAKE) */
body.desk-mouse:not(.touch) #pedals, body.desk-mwheel:not(.touch) #pedals { display: block; pointer-events: none; }
body.desk-mouse:not(.touch) #pedals > .pedal.gas:not(#swheel), body.desk-mouse:not(.touch) #pedals > .pedal.brake:not(#swheel), body.desk-mouse:not(.touch) #pedals > .pedal.hb:not(#swheel),
body.desk-mwheel:not(.touch) #pedals > .pedal.gas:not(#swheel), body.desk-mwheel:not(.touch) #pedals > .pedal.brake:not(#swheel), body.desk-mwheel:not(.touch) #pedals > .pedal.hb:not(#swheel) {   /* :not(#swheel) = beats the older 'hide everything but the wheel' rule */ display: flex !important; pointer-events: auto; cursor: pointer; width: 118px; height: 92px; bottom: 24px; top: auto; right: auto; }
body:not(.touch) #pedals > .pedal.brake { left: 24px; } body:not(.touch) #pedals > .pedal.gas { left: 152px; } body:not(.touch) #pedals > .pedal.hb { left: 280px; width: 86px; height: 60px; }
body.desk-mouse:not(.touch) #pedals > .pedal.gas span::after { content: ' (left button)'; font-size: 10px; opacity: .75; }
body.desk-mouse:not(.touch) #pedals > .pedal.brake span::after { content: ' (right button)'; font-size: 10px; opacity: .75; }
/* manual on desktop mouse modes: clickable shift arrows above the pedals; CLUTCH only with Clutch: Manual */
body.manual.desk-mwheel:not(.touch) #gearBtns, body.manual.desk-mouse:not(.touch) #gearBtns { display: flex !important; position: fixed; left: 24px; bottom: 128px; top: auto; right: auto; pointer-events: auto; z-index: 3; }
body.manual.desk-mwheel:not(.touch) #pedals > #gearBtns, body.manual.desk-mouse:not(.touch) #pedals > #gearBtns { display: flex !important; }
#gearBtns .clutchbtn { display: none !important; } body.manual.clutch-manual:not(.touch) #gearBtns .clutchbtn { display: flex !important; }
body.touch #gearBtns .clutchbtn { display: none !important; }   /* phones/tablets: auto-clutch only */

/* 10-15 UX P0: race buttons while loading (clicks are queued) */
.cm-act.wait { opacity: .85; } .cm-act.queued { outline: 3px solid #ffb347; }