/* Only the lower driving controls. The upper HUD is deliberately untouched. */
#motion-controls{position:absolute;bottom:max(8px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;flex-wrap:wrap;justify-content:center;gap:4px;width:min(280px,calc(100vw - 360px));pointer-events:auto}
#motion-controls button,#motion-controls select{min-height:44px;padding:5px 8px;border:1px solid #a8c6d866;border-radius:6px;background:#102331c9;color:#eef8ff;font:600 11px system-ui;touch-action:manipulation}
#motion-controls[hidden],#motion-controls [hidden]{display:none}
#motion-status{width:100%;text-align:center;color:#e2f3ff;font:10px/1.25 system-ui;text-shadow:0 1px 3px #000;pointer-events:none}
#motion-indicator{position:relative;display:flex;justify-content:space-between;align-items:center;width:100%;height:18px;color:#d3e7f4;font:700 9px system-ui;text-shadow:0 1px 3px #000;pointer-events:none;background:linear-gradient(#b9d5df80,#b9d5df80) center/80% 1px no-repeat}
#motion-indicator:after{content:'';position:absolute;left:50%;height:10px;width:1px;background:#d9ebf5}
#motion-marker{position:absolute;left:50%;width:7px;height:7px;border-radius:50%;background:#70e1c5;transform:translateX(-50%);z-index:1;box-shadow:0 0 3px #000}
@media(orientation:portrait){#motion-controls{width:240px;bottom:205px}}
html.touch #touch-controls{padding:0 max(16px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom));pointer-events:none;gap:18px}
#touch-controls .touch-group{pointer-events:auto;align-items:flex-end;gap:12px}
#wheel-control{width:184px;height:184px;border-radius:50%;background:radial-gradient(circle,#17222ac9 0%,#0a111b90 59%,transparent 61%);filter:drop-shadow(0 5px 12px #0008);outline:none}
#wheel-control svg{transform:rotate(var(--steer-angle,0deg));transform-origin:50% 50%;will-change:transform}
#wheel-control:after{content:'STERZO';position:absolute;bottom:0;left:0;right:0;text-align:center;font:600 8px system-ui;letter-spacing:.2em;color:#adc0cf;pointer-events:none}
#wheel-control:focus-visible{outline:2px solid #a6d5f0;outline-offset:3px}
.touch-btn,.touch-btn--big{border-radius:18px 18px 9px 9px;width:68px;height:96px;border:1px solid #889baa60;background:linear-gradient(155deg,#263644e8,#0c131de8);box-shadow:inset 0 2px 1px #ffffff25,0 8px 22px #0007;color:#cfdae5;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;font:600 9px system-ui;letter-spacing:.13em}
.touch-btn::before{content:'';width:30px;height:28px;background:repeating-linear-gradient(0deg,#738693 0 3px,transparent 3px 8px);opacity:.6;border-radius:3px}
#btn-gas{height:126px;width:76px;border-color:#7cd4c481;color:#b9efdf;background:linear-gradient(150deg,#244840df,#101d24ed)}
#btn-brake{border-color:#f7948555;color:#f7c9c2}
.touch-btn.is-held,#btn-gas.is-held,#btn-brake.is-held{transform:translateY(3px);background:linear-gradient(150deg,#39566c,#182c3c);border-color:#c0e8ff;box-shadow:0 0 20px #9bd3f32b,inset 0 1px 8px #0008}
#btn-gas.is-held{background:linear-gradient(150deg,#37796a,#163b33);border-color:#9dffe2}
#btn-brake.is-held{background:linear-gradient(150deg,#7b3937,#3b191e);border-color:#ffa79c}
/* Landscape remains deliberately thumb-sized: these are controls, not icons.
   The wheel keeps a 164px drag surface and each pedal stays at least 68px
   wide, comfortably above the usual 44px minimum touch target. */
@media(max-height:520px){#wheel-control{width:164px;height:164px}.touch-btn{height:88px;width:68px}#btn-gas{height:116px;width:76px}.touch-btn::before{height:24px}html.touch #touch-controls{padding-bottom:max(8px,env(safe-area-inset-bottom))}}
@media(max-width:380px){#wheel-control{width:168px;height:168px}.touch-btn{width:64px}#btn-gas{width:70px}#touch-controls .touch-group{gap:8px}}
/* Home-screen app on iPhone: the page reaches the bottom edge, where iOS
   gives its home-indicator gesture priority and swallows some taps. Keep
   the controls clear of that strip (no browser toolbar pushes them up). */
@media(display-mode:standalone),(display-mode:fullscreen){html.touch #touch-controls{padding-bottom:max(34px,calc(env(safe-area-inset-bottom) + 16px))}}
@media(display-mode:standalone) and (orientation:landscape),(display-mode:fullscreen) and (orientation:landscape){#motion-controls{bottom:max(34px,calc(env(safe-area-inset-bottom) + 16px))}}
/* Race voice chat toggle (#1), under the lap counter. */
/* Voice icon (#180): colour = connection outcome, waveform only while audio comes in. */
.voice-toggle{--tone:#9fb3c1;position:relative;display:grid;place-items:center;width:40px;height:36px;margin-top:6px;padding:0;border:1px solid color-mix(in srgb,var(--tone) 55%,transparent);border-radius:8px;background:#102331c9;color:var(--tone);pointer-events:auto;touch-action:manipulation}
.voice-toggle[data-tone="ok"]{--tone:#3ddc84}
.voice-toggle[data-tone="pending"]{--tone:#f5c451}
.voice-toggle[data-tone="fail"]{--tone:#ff6b5b}
.voice-toggle svg{width:20px;height:20px;fill:currentColor;stroke:currentColor;stroke-width:2;stroke-linecap:round;transition:opacity .15s}
.voice-toggle__slash{display:none}
.voice-toggle[aria-pressed="true"] .voice-toggle__slash{display:inline}
.voice-toggle__wave{position:absolute;inset:6px 4px;width:calc(100% - 8px);height:calc(100% - 12px);pointer-events:none}
.voice-toggle.is-receiving svg{opacity:.25}
.voice-toggle:disabled{opacity:.7}
/* iOS: a long press on control labels (the wheel's SVG "OB" text, "STERZO",
   pedal captions) started a text selection/callout and cancelled the touch,
   so the upper part of the controls felt dead. Nothing on the race page is
   meant to be selected on touch. */
html.race.touch body,html.race.touch #touch-controls *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
#wheel-control svg,#wheel-control svg *{pointer-events:none}
/* Braking map (#77) sits bottom center on touch, where the tilt steering
   controls were (#83), between the wheel and the pedals. Portrait has no
   room there, so it goes above the controls. */
html.touch #brake-map{top:auto;right:auto;left:50%;transform:translateX(-50%);width:min(17rem,calc(100vw - 380px));height:auto;aspect-ratio:16/10;bottom:max(4px,env(safe-area-inset-bottom));filter:none;opacity:.9}
@media(max-height:520px){html.touch #brake-map{width:min(14rem,calc(100vw - 360px))}}
@media(orientation:portrait){html.touch #brake-map{width:14rem;bottom:195px}}
@media(display-mode:standalone) and (orientation:landscape),(display-mode:fullscreen) and (orientation:landscape){html.touch #brake-map{bottom:max(34px,calc(env(safe-area-inset-bottom) + 16px))}}
/* Right thumb rests well inside the edge in landscape: keep brake/gas off the rim (#119). */
@media(orientation:landscape){#touch-controls .touch-group--throttle{margin-right:clamp(28px,6vw,64px);margin-bottom:10px}
  /* Keep the wheel clear of the left-edge system gestures (#153). */
  #touch-controls .touch-group--steer{margin-left:clamp(14px,4vw,40px)}}
/* Phone shortcuts (#133, #135): tap the ERS readout to toggle it; BOX and
   VIEW sit above the throttle (#155, #171); S/M/H under the speedo show
   only during the pit stop. Touch only. */
#ers-indicator,#hud-shortcuts button{margin:0;border:0;font-family:inherit;line-height:inherit;-webkit-appearance:none;appearance:none}
#hud-shortcuts{display:none}
html.touch #hud-shortcuts{display:flex;justify-content:center;gap:.5rem}
html.touch #hud-shortcuts button{min-width:52px;padding:.2em .6em;border-radius:6px;font-size:.72rem;font-weight:800;letter-spacing:.06em;color:rgba(255,255,255,.85);background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
html.touch #hud-shortcuts .pit-tyre{display:none;min-width:40px}
html.touch.pit-servicing #hud-shortcuts .pit-tyre{display:block}
html.touch.pit-servicing #view-toggle,html.touch.pit-servicing #pit-toggle{display:none}
html.touch #pit-toggle.pit-armed{color:#05060a;background:#facc15;box-shadow:0 0 6px 1px rgba(250,204,21,.55)}
/* Above the driver list (z-index 115), so the list never eats a tap (#145). */
html.touch #touch-controls{z-index:120}
html.touch #hud-cluster [data-key]{min-height:30px;pointer-events:auto;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
html.touch #ers-indicator{padding:.25em .6em}
html.touch #hud-shortcuts button:active{background:rgba(255,255,255,.3)}
/* ERS and BOX only work in the race: dimmed during qualifying and the grid. */
html.touch.hud-not-racing #ers-indicator,html.touch.hud-not-racing #pit-toggle{opacity:.35}
/* Phone landscape (#137): the driver list sits over the touch wheel, so rows
   from P5 down fade out; the player's own row always stays solid. */
@media(orientation:landscape) and (max-height:520px){
  html.touch .qualifying-timing li:nth-child(5){opacity:.55}
  html.touch .qualifying-timing li:nth-child(6){opacity:.3}
  html.touch .qualifying-timing li:nth-child(n+7){opacity:.14}
  html.touch .qualifying-timing li.is-player{opacity:1}
}
/* BOX above the throttle (#155): full pedal width, easy to hit mid-race. */
.gas-stack{display:flex;flex-direction:column;gap:8px}
html.touch #pit-toggle,html.touch #view-toggle{min-height:44px;border-radius:10px;border:1px solid #facc1566;background:#1c2530d9;color:#fde68a;font:800 11px system-ui;letter-spacing:.14em;touch-action:manipulation}
html.touch #pit-toggle:active,html.touch #view-toggle:active{background:#3a3520}
/* VIEW above BOX (#171): same pad as BOX, neutral colours. */
html.touch #view-toggle{border-color:#b2c8d566;color:#dbe7ef}
html.touch #look-back{min-height:44px;border-radius:10px;border:1px solid #b2c8d566;background:#1c2530d9;color:#dbe7ef;font:800 10px system-ui;letter-spacing:.08em;touch-action:none}
html.touch #look-back.is-held{background:#34536b;color:#fff;border-color:#dbe7ef}

/* Per-driver voice status: transparent, with a thumb-sized local control. */
.qualifying-timing__name:has(.driver-voice) { display: flex; align-items: center; overflow: visible; }
.driver-name { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.driver-voice { flex-shrink: 0; }
.driver-voice { display: inline-flex; position: relative; align-items: center; justify-content: center;
  vertical-align: middle; width: 16px; height: 18px; margin-right: 4px; padding: 0;
  border: 0; background: transparent; color: #a5abb4; }
.driver-voice svg { width: 14px; height: 14px; fill: currentColor; }
.driver-voice svg path:not(:first-child) { fill: none; stroke: currentColor; stroke-width: 2; }
.driver-voice__slash { display: none; }
.driver-voice.is-muted .driver-voice__slash { display: block; }
.driver-voice.is-muted .driver-voice__waves { display: none; }
.driver-voice[data-status="active"] { color: #86e4b3; }
.driver-voice[data-status="connecting"] { color: #f3ce75; }
.driver-voice[data-status="error"] { color: #f78787; }
button.driver-voice { pointer-events: auto; cursor: pointer; touch-action: manipulation; z-index: 1; }
button.driver-voice::before { content: ""; position: absolute; inset: -13px -14px; }
button.driver-voice:focus-visible { outline: 2px solid white; outline-offset: 2px; }
/* #379: tap a rival's name to stop or resume hearing them. */
.qualifying-timing__name.is-listenable { pointer-events: auto; cursor: pointer; touch-action: manipulation; }
.driver-voice.is-excluded { color: #8a96a0; }
.is-listenable:has(.is-excluded) .driver-name { opacity: .5; text-decoration: line-through; }
/* #379: sound mix button next to the back link. */
.hud-topleft-links { display: flex; align-items: center; gap: .6rem; margin-bottom: .35rem; }
#hud .hud-topleft-links .back-link { margin-bottom: 0; }
#sound-mix { pointer-events: auto; padding: 3px 7px; border: 1px solid #ffffff38; border-radius: 6px; background: #0b0f15b0;
  color: #dbe7ef; font: 800 9px system-ui; letter-spacing: .08em; cursor: pointer; touch-action: manipulation; }
#sound-mix[data-mix="off"], #sound-mix[data-mix="mute"] { color: #f3ce75; border-color: #f3ce7566; }
.driver-voice.is-speaking { filter: drop-shadow(0 0 3px #86e4b3); animation: voice-pulse .7s ease-in-out infinite alternate; }
@keyframes voice-pulse { to { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .driver-voice.is-speaking { animation: none; } }
/* Classiche (#317): period cars have neither DRS nor ERS. */
html.series-classic #drs-indicator,html.series-classic #ers-indicator{display:none}