/* INTERLAGOS mobile: o HUD de toque do Santos Online (DriveHud.js) + ajustes */

#drive-hud { --s: min(0.05vw, 0.0896vh); --k: 1; --db: max(38px, calc(58 * var(--s) * var(--k))); --top0: calc(var(--safe-t, 0px) + 8px); --rowh: calc(var(--db) + 10px); --corner: calc(var(--top0) + calc(30 * var(--s))); position: fixed; inset: 0; z-index: 30; pointer-events: none; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none; touch-action: none; font-family: -apple-system, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif; color: #fff; }
@media (pointer: coarse) { #drive-hud { --k: 1.15; } }
@supports (height: 100dvh) { #drive-hud { --s: min(0.05vw, 0.0896dvh); } }
@media (max-aspect-ratio: 1/1) { #drive-hud { --s: 0.0925vw; --k: 1; --db: min(40px, calc((100vw - 60px) / 9)); --corner: calc(var(--top0) + var(--rowh) + 35px + 12px); } }
body.drive-on, body.drive-on * { user-select: none !important; -webkit-user-select: none !important; -webkit-touch-callout: none !important; -webkit-tap-highlight-color: transparent; }
body.drive-on ::selection { background: transparent; color: inherit; }
#drive-hud.mode-walk { --rowh: 4px; }
#drive-hud.veh-boat .carx { display: none !important; }
/* VOO: aeronave (E2): sem volante, pedais, mostradores do carro nem botoes de carro (vidro/buzina); o HUD de voo (FlightHud.js) mostra velocidade, altitude etc. */
#drive-hud.veh-air .carx, #drive-hud.veh-air .noair, #drive-hud.veh-air .dh-gauges, #drive-hud.veh-air .dh-steer, #drive-hud.veh-air .dh-pedals, #drive-hud.veh-air .dh-readout { display: none !important; }
/* VOO (E8.1): elementos escondidos pela tabela hud_air_state.mjs (data-hud); o minimapa no ar e menor; menu de pausa aberto = HUD de voo e toque somem */
#drive-hud .air-off { display: none !important; }
#drive-hud.veh-air .dh-mini { width: max(84px, calc(240 * var(--s))); border-width: calc(max(84px, calc(240 * var(--s))) * 0.035); opacity: .85; }
#drive-hud.veh-air.air-fp .dh-mini { width: max(76px, calc(200 * var(--s))); border-width: calc(max(76px, calc(200 * var(--s))) * 0.035); opacity: .8; } /* 1a pessoa: ainda menor e discreto (a cabine tem o proprio GPS) */
#drive-hud.paused .air-only { display: none !important; }
/* HUD minimo (Tab no PC): so a faixa do veiculo (VehicleHud); some tudo o resto (avisos/toasts e radio continuam) */
#drive-hud.mini-hud .dh-mini, #drive-hud.mini-hud .dh-compass, #drive-hud.mini-hud .dh-top-r, #drive-hud.mini-hud .dh-side, #drive-hud.mini-hud .dh-pause, #drive-hud.mini-hud .dh-enter { display: none !important; }
#drive-hud:not(.touch) .dh-steer, #drive-hud:not(.touch) .dh-pedals, #drive-hud:not(.touch) .dh-walk, #drive-hud:not(.touch) .dh-enter, #drive-hud:not(.touch) .dh-side .car-only, #drive-hud:not(.touch) .dh-top-r { display: none !important; }   /* PC: as teclas fazem tudo (a fileira de botoes do carro e so do celular) */
#drive-hud.hidden, #drive-hud .hidden { display: none !important; }
#drive-hud.mode-walk .car-only, #drive-hud.mode-car .walk-only { display: none !important; }
#drive-hud.steer-arrows .wheel-only, #drive-hud.steer-wheel .arrows-only { display: none !important; }
#drive-hud button, #drive-hud .tap { pointer-events: auto; touch-action: none; font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; padding: 0; cursor: pointer; }
#drive-hud .plate { background: rgba(236, 238, 243, 0.26); border: calc(3 * var(--s)) solid rgba(255, 255, 255, 0.58); box-sizing: border-box; }
#drive-hud .plate.down, #drive-hud .tap.down .plate { background: rgba(255, 255, 255, 0.5); }
#drive-hud svg { display: block; overflow: visible; }

.dh-mini { pointer-events: auto; cursor: pointer; touch-action: none; position: absolute; left: calc(var(--safe-l, 0px) + calc(67 * var(--s))); top: var(--corner); width: max(92px, calc(302 * var(--s))); aspect-ratio: 1; border-radius: 50%;
  background: #3b3c41; border: calc(max(92px, calc(302 * var(--s))) * 0.035) solid #5c5c60; box-sizing: border-box; overflow: hidden;  }
.dh-mini canvas { width: 100%; height: 100%; display: block; }

.dh-compass { position: absolute; left: 50%; top: calc(var(--top0) + var(--rowh)); transform: translateX(-50%); width: max(280px, calc(640 * var(--s))); }
.dh-compass canvas { width: 100%; display: block;  }

.dh-pause { position: absolute; right: calc(env(safe-area-inset-right, 0px) + calc(67 * var(--s))); top: var(--corner); width: max(46px, calc(90 * var(--s) * var(--k))); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; }
.dh-pause svg { width: 38%; height: 38%; opacity: 0.9; }
.dh-top-r { position: absolute; left: 50%; transform: translateX(-50%); top: var(--top0); display: flex; flex-wrap: nowrap; justify-content: center; gap: max(6px, calc(18 * var(--s))); }
.dh-top-r button { width: var(--db); flex: none; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; }
.dh-top-r button svg { width: 58%; height: 58%; }
.dh-top-r button.on { background: rgba(255, 213, 74, 0.55); }

.dh-steer { position: absolute; left: calc(var(--safe-l, 0px) + calc(70 * var(--s))); bottom: calc(var(--safe-b, 0px) + calc(66 * var(--s))); display: flex; flex-direction: column; align-items: flex-start; }
.dh-wheelicon { width: max(44px, calc(100 * var(--s) * var(--k))); aspect-ratio: 1; margin-left: calc(158 * var(--s)); margin-bottom: calc(13 * var(--s)); background: none; border: 0; opacity: 0.9;  }
.dh-wheelicon svg { width: 100%; height: 100%; }
.dh-arrows { display: flex; gap: calc(45 * var(--s)); }
.dh-arrow { width: max(66px, calc(185 * var(--s) * var(--k))); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; }
.dh-arrow svg { width: 34%; height: 34%; }
.dh-wheelpad { width: max(150px, calc(415 * var(--s) * var(--k))); height: max(66px, calc(185 * var(--s) * var(--k))); border-radius: 999px; position: relative; touch-action: none; pointer-events: auto; display: grid; place-items: center; }
.dh-wheelpad .disk { height: 96%; aspect-ratio: 1; }
.dh-wheelpad .disk svg { width: 100%; height: 100%; }

.dh-pedals { position: absolute; right: calc(env(safe-area-inset-right, 0px) + calc(70 * var(--s))); bottom: calc(var(--safe-b, 0px) + calc(66 * var(--s))); display: flex; align-items: flex-end; gap: max(12px, calc(calc(46 * var(--s)) * var(--k))); }
.dh-pcol { display: flex; flex-direction: column; align-items: flex-end; gap: max(12px, calc(calc(56 * var(--s)) * var(--k))); }
.dh-hb { position: relative; width: max(50px, calc(calc(118 * var(--s)) * var(--k))); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; flex: none; }
.dh-hb svg { width: 72%; height: 72%; }
.dh-hb.on { background: rgba(255, 90, 60, 0.55); }
.dh-brake { position: relative; width: max(70px, calc(calc(190 * var(--s)) * var(--k))); height: max(56px, calc(calc(152 * var(--s)) * var(--k))); background: none; border: 0; flex: none; }
.dh-gas { position: relative; width: max(52px, calc(calc(142 * var(--s)) * var(--k))); height: max(126px, calc(calc(326 * var(--s)) * var(--k))); background: none; border: 0; flex: none; }
.dh-pedals svg { width: 100%; height: 100%;  }
.dh-pedals .pl { fill: rgba(236, 238, 243, 0.3); stroke: rgba(255, 255, 255, 0.6); stroke-width: 3; }
.dh-pedals .bar { fill: rgba(150, 156, 168, 0.75); }
.dh-pedals .down .pl { fill: rgba(255, 255, 255, 0.55); }

/* BARCO: manete (alavanca vertical que FICA onde o dedo larga) e timao (roda que o dedo gira e que FICA onde largou). No PC so mostra o estado (indicador), no toque e interativo. */
.dh-boatctl { display: none; }
#drive-hud.veh-boat .dh-boatctl { display: block; }
#drive-hud:not(.touch) .dh-boatctl { display: none !important; }   /* PC: a manete e o timao estao no HUD da lancha / navio (3a pessoa) e na cabine (1a pessoa); no celular sao os controles */
#drive-hud.veh-boat .dh-steer, #drive-hud.veh-boat .dh-pedals { display: none !important; }
.bc-box { position: absolute; bottom: calc(var(--safe-b, 0px) + calc(66 * var(--s))); font: 600 11px/1.2 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; letter-spacing: .06em; color: rgba(255,255,255,.82); text-shadow: 0 1px 2px #000a; }
.bc-lev { right: calc(env(safe-area-inset-right, 0px) + calc(70 * var(--s))); display: flex; align-items: flex-end; gap: 8px; }
.bc-wheel { left: calc(var(--safe-l, 0px) + calc(70 * var(--s))); display: flex; align-items: flex-end; gap: 10px; }
.bc-track { position: relative; width: 38px; height: 150px; border-radius: 19px; background: rgba(12,16,22,.55); border: 2px solid rgba(255,255,255,.5); box-sizing: border-box; touch-action: none; }
.bc-track i { position: absolute; left: 6px; right: 6px; height: 1px; background: rgba(255,255,255,.35); }
.bc-track i.n { background: #ffd54a; height: 2px; left: 2px; right: 2px; }
.bc-knob { position: absolute; left: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: rgba(255,255,255,.88); border: 3px solid #111; box-sizing: border-box; box-shadow: 0 1px 3px #000a; }
.bc-knob.rev { background: #ffb11a; }
.bc-lbl { position: relative; height: 150px; width: 46px; font-size: 9px; opacity: .85; }
.bc-lbl span { position: absolute; left: 0; white-space: nowrap; }
.bc-read { text-align: center; margin-bottom: 4px; white-space: nowrap; }
.bc-col { display: flex; flex-direction: column; align-items: center; }
.bc-disk { position: relative; width: 88px; height: 88px; touch-action: none; }
.bc-disk svg { width: 100%; height: 100%; }
.bc-btns { display: flex; flex-direction: column; gap: 8px; }
.bc-btn { display: none; min-width: 54px; height: 40px; border-radius: 20px; font: 700 10px/1 'JetBrains Mono', monospace; letter-spacing: .08em; color: #fff; }
#drive-hud.touch .bc-btn { display: block; }
#drive-hud.touch .bc-track { width: max(64px, calc(120 * var(--s))); height: max(190px, calc(430 * var(--s))); border-radius: 32px; pointer-events: auto; }
#drive-hud.touch .bc-lbl { height: max(190px, calc(430 * var(--s))); font-size: 11px; }
#drive-hud.touch .bc-knob { width: max(52px, calc(96 * var(--s))); height: max(52px, calc(96 * var(--s))); margin: calc(max(52px, calc(96 * var(--s))) / -2) 0 0 calc(max(52px, calc(96 * var(--s))) / -2); }
#drive-hud.touch .bc-disk { width: max(120px, calc(330 * var(--s))); height: max(120px, calc(330 * var(--s))); pointer-events: auto; }
#drive-hud.touch .bc-wheel, #drive-hud.touch .bc-lev { bottom: calc(var(--safe-b, 0px) + calc(40 * var(--s))); }
@media (max-aspect-ratio: 1/1) { #drive-hud.touch .bc-lev, #drive-hud.touch .bc-wheel { bottom: calc(var(--safe-b, 0px) + calc(120 * var(--s))); } }

.dh-walk { position: absolute; inset: 0; pointer-events: none; }
.dh-stick { position: absolute; left: calc(var(--safe-l, 0px) + calc(90 * var(--s))); bottom: calc(var(--safe-b, 0px) + calc(70 * var(--s))); width: calc(calc(300 * var(--s)) * var(--k)); min-width: 130px; aspect-ratio: 1; border-radius: 50%; pointer-events: auto; touch-action: none; }
.dh-stick .knob { position: absolute; left: 50%; top: 50%; width: 42%; aspect-ratio: 1; margin: -21% 0 0 -21%; border-radius: 50%; background: rgba(255, 255, 255, 0.55); border: calc(3 * var(--s)) solid rgba(255, 255, 255, 0.7); box-sizing: border-box; }
.dh-actions { position: absolute; right: calc(env(safe-area-inset-right, 0px) + calc(80 * var(--s))); bottom: calc(var(--safe-b, 0px) + calc(80 * var(--s))); display: flex; align-items: flex-end; gap: max(18px, calc(50 * var(--s))); pointer-events: none; }
.dh-jump, .dh-run { border-radius: 50%; display: grid; place-items: center; pointer-events: auto; flex: none; }
.dh-jump { width: max(78px, calc(calc(210 * var(--s)) * var(--k))); aspect-ratio: 1; }
.dh-run { width: max(64px, calc(calc(160 * var(--s)) * var(--k))); aspect-ratio: 1; margin-bottom: calc(10 * var(--s)); }
.dh-jump svg, .dh-run svg { width: 48%; height: 48%; }
.dh-run.on { background: rgba(255, 213, 74, 0.55); }
.dh-side { position: absolute; left: calc(var(--safe-l, 0px) + calc(67 * var(--s))); top: calc(var(--corner) + max(92px, calc(302 * var(--s))) + max(12px, calc(34 * var(--s)))); display: flex; flex-direction: column; align-items: flex-start; gap: max(10px, calc(30 * var(--s))); }
.dh-side button, .dh-enter { height: max(42px, calc(70 * var(--s) * var(--k))); min-width: max(42px, calc(70 * var(--s) * var(--k))); border-radius: 999px; display: grid; place-items: center; }
.dh-side button svg, .dh-enter svg { width: calc(max(42px, calc(70 * var(--s) * var(--k))) * 0.55); height: calc(max(42px, calc(70 * var(--s) * var(--k))) * 0.55); }
.dh-side .dh-eta { display: flex; align-items: center; justify-content: center; width: max-content; padding: 0 max(12px, calc(26 * var(--s))); font-size: calc(max(42px, calc(70 * var(--s) * var(--k))) * 0.34); font-weight: 600; white-space: nowrap; }
.dh-enter { position: absolute; left: 50%; bottom: calc(var(--safe-b, 0px) + calc(120 * var(--s))); transform: translateX(-50%); width: max(56px, calc(110 * var(--s) * var(--k))); height: max(56px, calc(110 * var(--s) * var(--k))); }
.dh-enter svg { width: 52%; height: 52%; }

.dh-pausemenu { position: absolute; inset: 0; pointer-events: auto; display: grid; place-items: center; background: rgba(14, 18, 26, 0.5); backdrop-filter: blur(4px);
  font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, 'SF Mono', Consolas, monospace; }
.pm-frame { --w: min(94vw, 500px); --u: calc(0.75 * min(calc(var(--w) / 500), calc((100vh - 24px) / 820))); position: relative; width: calc(var(--u) * 500); box-sizing: border-box; border: calc(var(--u) * 3) solid rgba(255, 255, 255, 0.92);
  border-radius: calc(var(--u) * 16); background: rgba(196, 202, 214, 0.26); backdrop-filter: blur(10px); color: #fff; text-transform: uppercase; user-select: none;
  padding-bottom: calc(var(--u) * 70); max-height: calc(100vh - 16px); }
.pm-head { height: calc(var(--u) * 84); border-bottom: calc(var(--u) * 3) solid rgba(255, 255, 255, 0.92); display: flex; align-items: center; padding: 0 calc(var(--u) * 66); gap: calc(var(--u) * 20); position: relative; }
.pm-title:empty { display: none; }
.pm-title { font-size: calc(var(--u) * 46); letter-spacing: 0.03em; font-weight: 500; line-height: 1; white-space: nowrap; }
.pm-sys { font-size: max(10px, calc(var(--u) * 17)); letter-spacing: 0.06em; opacity: 0.95; margin-top: calc(var(--u) * 8); white-space: nowrap; display: flex; align-items: center; gap: calc(var(--u) * 10); }
.pm-sys i { width: calc(var(--u) * 15); height: calc(var(--u) * 15); background: #fff; display: block; }
.pm-list { position: relative; margin: calc(var(--u) * 50) calc(var(--u) * 68) 0; display: flex; flex-direction: column; gap: calc(var(--u) * 20); max-height: calc(var(--u) * 640); overflow-y: auto; scrollbar-width: none; }
.pm-list::-webkit-scrollbar { display: none; }
#drive-hud .pm-btn { position: relative; height: calc(var(--u) * 82); flex: none; border-radius: calc(var(--u) * 7); border: calc(var(--u) * 3) solid rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.06); color: #fff; font: inherit;
  font-size: calc(var(--u) * 34); letter-spacing: 0.03em; text-transform: uppercase; display: flex; align-items: center; justify-content: center; padding: 0 calc(var(--u) * 66); white-space: nowrap; cursor: pointer; }
#drive-hud .pm-btn svg { position: absolute; left: calc(var(--u) * 14); top: 50%; width: calc(var(--u) * 46); height: calc(var(--u) * 46); transform: translateY(-50%); }
#drive-hud .pm-btn.hl, #drive-hud .pm-btn:active { background: #fff; color: #05070a; border-color: #fff; border-radius: calc(var(--u) * 10); }
#drive-hud .pm-btn.hl svg, #drive-hud .pm-btn:active svg { filter: invert(1); }
@media (hover: hover) { #drive-hud .pm-btn:hover { background: rgba(255, 255, 255, 0.28); } #drive-hud .pm-btn.hl:hover { background: #fff; } }
#drive-hud .pm-btn.pm-long { padding: 0 calc(var(--u) * 12); font-size: calc(var(--u) * 26); }
#drive-hud .pm-btn.pm-long.pm-ic { padding-left: calc(var(--u) * 64); } /* VOO: rotulos longos das aeronaves (HELICOPTERO UH-1H) nao cabiam */
#drive-hud .pm-btn.pm-xl { font-size: calc(var(--u) * 21); letter-spacing: 0; } /* E8: rotulos de 20+ letras (ASSISTÊNCIA: DESLIGADA) */
.pm-deco { position: absolute; pointer-events: none; color: #fff; }
.pm-deco text, .pm-vt { font-family: inherit; }
.pm-vt { position: absolute; font-size: max(9px, calc(var(--u) * 15)); letter-spacing: 0.08em; writing-mode: vertical-rl; transform: rotate(180deg); opacity: 0.95; white-space: nowrap; }
@media (max-height: 520px) {
  .pm-frame { --u: calc(0.75 * (100vh - 16px) / 600); width: min(94vw, calc(var(--u) * 1040)); padding-bottom: calc(var(--u) * 48); }
  .pm-list { margin: calc(var(--u) * 30) calc(var(--u) * 100) 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(var(--u) * 16); max-height: none; }
  #drive-hud .pm-btn { height: calc(var(--u) * 70); font-size: calc(var(--u) * 28); padding: 0 calc(var(--u) * 58); min-width: 0; }
  .pm-frame .pm-vt, .pm-frame .pm-hide { display: none; }
  .pm-head { height: calc(var(--u) * 78); }
  .pm-title { font-size: calc(var(--u) * 42); }
}
.dh-radio { position: absolute; left: 50%; bottom: calc(var(--safe-b, 0px) + var(--vh-bot-h, 0px) + 12px); transform: translateX(-50%); text-align: center; padding: 5px 14px; border-radius: 10px; background: rgba(10, 14, 20, 0.55); font-size: 12.5px; line-height: 1.3; letter-spacing: 0.02em; white-space: nowrap; max-width: 88vw; overflow: hidden; text-overflow: ellipsis; pointer-events: none; opacity: 0; }
.dh-radio .l2 { font-size: 10.5px; opacity: 0.7; }
.dh-toast { position: absolute; left: 50%; top: calc(calc(var(--safe-t, 0px) + 8px) + calc(380 * var(--s))); transform: translateX(-50%); padding: 8px 14px; border-radius: 10px; background: rgba(20, 24, 32, 0.78); font-size: 14px; pointer-events: none; white-space: nowrap; }
.dh-loading { position: absolute; inset: 0; display: grid; place-content: center; background: rgba(10, 14, 20, 0.72); font-size: 17px; pointer-events: auto; letter-spacing: 0.04em; }

/* ===== CELULAR MINIMO (padrao no toque; pedido de 20/10/2026: "HUD de celular mais minimalista e discreto, preservando a maior parte da tela livre") =====
   Controles de toque compactos e TRANSLUCIDOS em repouso (~36%), fortes so quando tocados, nos cantos; o desenho e menor que a area de toque (>= 44 px mantidos: o ::before desenha o botao
   dentro do elemento). A unidade --tu (1 = tela de 390 px de altura) vem do DriveHud (#tu). 'tnorm' (HUD CELULAR: NORMAL) volta ao visual antigo. */
#drive-hud.touch:not(.tnorm) .dh-top-r .more { display: none !important; }
#drive-hud.tmin { --db: max(44px, calc(40px * var(--tu, 1))); }
#drive-hud.tmin .plate { background: none !important; border: 0 !important; opacity: .36; }
#drive-hud.tmin .dh-top-r button, #drive-hud.tmin .dh-side button, #drive-hud.tmin .dh-arrow, #drive-hud.tmin .dh-jump, #drive-hud.tmin .dh-run, #drive-hud.tmin .bc-btn { position: relative; }   /* (os .plate ja posicionados - pausa, entrar, analogico - ficam como estao) */
#drive-hud.tmin .plate::before { content: ''; position: absolute; inset: 12%; border-radius: inherit; background: rgba(236, 238, 243, .10); border: 1.5px solid rgba(255, 255, 255, .6); box-sizing: border-box; pointer-events: none; }
#drive-hud.tmin .plate > svg, #drive-hud.tmin .plate > .disk, #drive-hud.tmin .plate > .knob { position: relative; z-index: 1; }
#drive-hud.tmin .plate.down, #drive-hud.tmin .tap.down .plate { opacity: 1; }
#drive-hud.tmin .plate.down::before { background: rgba(255, 255, 255, .38); }
#drive-hud.tmin .dh-top-r button.on::before, #drive-hud.tmin .dh-run.on::before { background: rgba(255, 213, 74, .5); }
#drive-hud.tmin .dh-hb.on::before { background: rgba(255, 90, 60, .55); }
#drive-hud.tmin .dh-pause { opacity: .6; }
#drive-hud.tmin .dh-compass { width: calc(210px * var(--tu, 1)); opacity: .55; }   /* a pe: bussola em fita menor e translucida */
#drive-hud.tmin .dh-wheelicon { opacity: .5; }
#drive-hud.tmin .dh-top-r, #drive-hud.tmin .dh-side, #drive-hud.tmin .dh-steer, #drive-hud.tmin .dh-pedals, #drive-hud.tmin .dh-walk { opacity: 1; }   /* (o online/Hud.js poe .66 nesses grupos: aqui o ::before/os botoes ja tem a propria transparencia) */
/* ESMAECER: depois de ~4 s sem toque nem aviso novo, o que nao e essencial cai para ~28% (hud-idle: DriveHud); tocar a tela ou um aviso novo volta */
#drive-hud.touch.hud-idle .plate, #drive-hud.touch.hud-idle .dh-wheelicon, #drive-hud.touch.hud-idle .dh-gas, #drive-hud.touch.hud-idle .dh-brake, #drive-hud.touch.hud-idle .bc-track, #drive-hud.touch.hud-idle .bc-disk { opacity: .26; }
#drive-hud.touch.hud-idle .dh-mini { opacity: .3 !important; }
#drive-hud.touch.hud-idle .vh { opacity: .34; }
#drive-hud.touch.hud-idle .vh.ess { opacity: .5; }
#drive-hud.touch.hud-idle .plate.down, #drive-hud.touch.hud-idle .tc-b.down { opacity: 1; }
#drive-hud.tmin .dh-top-r button.on, #drive-hud.tmin .dh-hb.on, #drive-hud.tmin .dh-run.on { opacity: .62; }
#drive-hud.tmin .dh-mini { width: calc(68px * var(--tu, 1)) !important; border-width: 1.5px !important; opacity: .55 !important; }
#drive-hud.tmin .dh-top-r { gap: 4px; }
#drive-hud.tmin .dh-side { top: calc(var(--corner) + calc(68px * var(--tu, 1)) + 8px); gap: 6px; }
#drive-hud.tmin .dh-side button, #drive-hud.tmin .dh-enter { height: max(44px, calc(40px * var(--tu, 1))); min-width: max(44px, calc(40px * var(--tu, 1))); }
#drive-hud.tmin .dh-side .dh-eta { font-size: 11px; padding: 0 10px; }
#drive-hud.tmin .dh-enter { width: max(48px, calc(46px * var(--tu, 1))); height: max(48px, calc(46px * var(--tu, 1))); }
/* carro */
#drive-hud.tmin .dh-steer { left: calc(var(--safe-l, 0px) + 14px); bottom: calc(var(--safe-b, 0px) + 12px); }
#drive-hud.tmin .dh-arrows { gap: 8px; }
#drive-hud.tmin .dh-arrow { width: max(48px, calc(54px * var(--tu, 1))); }
#drive-hud.tmin .dh-wheelicon { width: max(44px, calc(40px * var(--tu, 1))); margin-left: 0; margin-bottom: 4px; }
#drive-hud.tmin .dh-wheelpad { width: calc(124px * var(--tu, 1)); height: max(48px, calc(54px * var(--tu, 1))); }
#drive-hud.tmin .dh-pedals { right: calc(env(safe-area-inset-right, 0px) + 14px); bottom: calc(var(--safe-b, 0px) + 12px); gap: 8px; }
#drive-hud.tmin .dh-pcol { gap: 8px; }
#drive-hud.tmin .dh-gas { width: max(46px, calc(46px * var(--tu, 1))); height: max(100px, calc(98px * var(--tu, 1))); }
#drive-hud.tmin .dh-brake { width: max(56px, calc(58px * var(--tu, 1))); height: max(44px, calc(44px * var(--tu, 1))); }
#drive-hud.tmin .dh-hb { width: max(44px, calc(44px * var(--tu, 1))); }
#drive-hud.tmin .dh-gas, #drive-hud.tmin .dh-brake { opacity: .4; }
#drive-hud.tmin .dh-gas.down, #drive-hud.tmin .dh-brake.down { opacity: 1; }
/* a pe */
#drive-hud.tmin .dh-stick { left: calc(var(--safe-l, 0px) + 14px); bottom: calc(var(--safe-b, 0px) + 12px); width: calc(100px * var(--tu, 1)); min-width: 96px; }
#drive-hud.tmin .dh-actions { right: calc(env(safe-area-inset-right, 0px) + 14px); bottom: calc(var(--safe-b, 0px) + 12px); gap: 8px; }
#drive-hud.tmin .dh-jump { width: max(56px, calc(60px * var(--tu, 1))); }
#drive-hud.tmin .dh-run { width: max(46px, calc(46px * var(--tu, 1))); margin-bottom: 0; }
/* barco: manete e timao compactos (a leitura "MANETE AVANTE 65%" vai no chip essencial) */
#drive-hud.tmin .bc-lev, #drive-hud.tmin .bc-wheel { bottom: calc(var(--safe-b, 0px) + 12px); }
#drive-hud.tmin .bc-lev { right: calc(env(safe-area-inset-right, 0px) + 14px); gap: 6px; }
#drive-hud.tmin .bc-wheel { left: calc(var(--safe-l, 0px) + 14px); gap: 6px; }
#drive-hud.tmin .bc-read { display: none; }
#drive-hud.tmin.touch .bc-track { width: max(48px, calc(48px * var(--tu, 1))); height: max(130px, calc(140px * var(--tu, 1))); border-radius: 24px; opacity: .42; border-width: 1.5px; }
#drive-hud.tmin.touch .bc-lbl { height: max(130px, calc(140px * var(--tu, 1))); font-size: 9px; opacity: .6; width: 36px; }
#drive-hud.tmin.touch .bc-knob { width: 38px; height: 38px; margin: -19px 0 0 -19px; opacity: .75; }
#drive-hud.tmin.touch .bc-disk { width: max(80px, calc(88px * var(--tu, 1))); height: max(80px, calc(88px * var(--tu, 1))); opacity: .42; }
#drive-hud.tmin .bc-track:active, #drive-hud.tmin .bc-disk:active { opacity: 1 !important; }
#drive-hud.tmin .bc-btn { min-width: 52px; height: 44px; font-size: 9px; }
/* avisos curtos, na borda de cima (nunca no meio da tela) */
#drive-hud.touch .dh-toast { top: calc(var(--top0) + var(--rowh) + 6px); font-size: 12px; padding: 5px 10px; background: rgba(20, 24, 32, .55); }

/* ================= INTERLAGOS: ajustes sobre o HUD de toque do Santos Online ================= */
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url(./fonts/jetbrains-mono-latin-v24.woff2) format('woff2'); }
body.mob { font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace; -webkit-user-select: none; user-select: none; touch-action: none; overscroll-behavior: none; }
body.mob #ajuda, body.mob #perfil, body.mob .melhorLinha, body.mob #supTxt, body.mob .setores { display: none !important; }
body.mob .ref-hud-hide { display: none !important; }
#drive-hud { --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); --tu: 1; z-index: 60; }
/* cronometro da volta: placa translucida no topo, no estilo do HUD */
body.mob #hudTempo { z-index: 62; top: calc(env(safe-area-inset-top, 0px) + 8px); }
body.mob .tempoCaixa { background: rgba(236,238,243,.14); border: 1.5px solid rgba(255,255,255,.6); border-radius: 10px; box-shadow: none; transform: none; padding: 2px 16px 3px; }
body.mob .tempoCaixa > span, body.mob .tempoCaixa > #tAtual { transform: none; }
body.mob #voltaN { font-size: 8px; letter-spacing: .3em; color: #fff; opacity: .8; font-weight: 600; }
body.mob #tAtual { font-size: 19px; font-weight: 600; text-shadow: none; letter-spacing: .04em; }
body.mob #pop { top: 24%; transform: translateX(-50%) scale(.55); transform-origin: top center; z-index: 62; }
body.mob #ranking { font-size: 11px; max-height: 86vh; z-index: 130; font-family: inherit; }
body.mob #replayBar { top: 62px; z-index: 130; font-size: 10px; font-family: inherit; }
/* mini mapa redondo (o canvas do traçado dentro do .dh-mini) */
#drive-hud .dh-mini #mapa { position: static; width: 100%; height: 100%; right: auto; top: auto; background: none; border-radius: 0; object-fit: contain; display: block; }
#drive-hud.tmin .dh-mini { width: calc(86px * var(--tu, 1)) !important; }
/* fileira de botoes: abaixo do cronometro */
#drive-hud .dh-top-r { top: calc(var(--top0) + 46px); }
#drive-hud .dh-top-r button.txt { font-size: 15px; font-weight: 700; color: #fff; }
#drive-hud .dh-top-r button.lig::before { background: rgba(125,255,154,.4) !important; border-color: #7dff9a !important; }
#drive-hud .dh-top-r button.off { display: none; }
#drive-hud.paused .dh-steer, #drive-hud.paused .dh-pedals, #drive-hud.paused .dh-top-r, #drive-hud.paused .dh-pause, #drive-hud.paused .dh-mini, #drive-hud.paused .vh { display: none !important; }
body.mob.paused #hudTempo, body.mob.paused #pop { display: none; }
/* menu PAUSE: 3 colunas para caber em tela deitada */
#drive-hud .dh-pausemenu .pm-frame { --u: calc(0.7 * (100vh - 16px) / 600); width: min(96vw, calc(var(--u) * 1180)); padding-bottom: calc(var(--u) * 44); }
#drive-hud .dh-pausemenu .pm-list { margin: calc(var(--u) * 26) calc(var(--u) * 90) 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 14); max-height: none; overflow: visible; }
#drive-hud .dh-pausemenu .pm-btn { height: calc(var(--u) * 62); font-size: calc(var(--u) * 24); padding: 0 calc(var(--u) * 10); min-width: 0; white-space: nowrap; overflow: hidden; }
#drive-hud .dh-pausemenu .pm-btn.span3 { grid-column: 1 / -1; }
#drive-hud .dh-pausemenu .pm-btn.hora { justify-content: space-between; gap: calc(var(--u) * 16); padding: 0 calc(var(--u) * 20); }
#drive-hud .dh-pausemenu .pm-btn.hora input { flex: 1; accent-color: #fff; height: calc(var(--u) * 30); }
#drive-hud .dh-pausemenu .pm-btn.hora b { font-weight: 600; min-width: calc(var(--u) * 100); text-align: right; }
.pm-frame .pm-vt, .pm-frame .pm-hide { display: none; }
#mGirar { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 14px; background: #05080d; color: #fff; font-size: 13px; letter-spacing: .3em; text-transform: uppercase; }
#mGirar .ic { width: 54px; height: 34px; border: 2px solid #fff; border-radius: 6px; animation: gira 2.2s ease-in-out infinite; }
@keyframes gira { 0%, 20% { transform: rotate(90deg); } 60%, 100% { transform: rotate(0deg); } }
@media (orientation: portrait) { body.mob #mGirar { display: flex; } }
#drive-hud .dh-wheelpad { grid-template-rows: 100%; grid-template-columns: 100%; }   /* (a altura percentual do disco precisa de uma linha definida) */
#drive-hud .dh-wheelpad .disk { height: 96%; width: auto; max-width: 100%; }

/* ===== v2: tamanhos EXPLICITOS (largura = altura: sem depender de aspect-ratio, que no celular ficava oval), direcao maior e cronometro Sony Tech ===== */
#drive-hud { --bt: max(46px, calc(44px * var(--tu, 1))); }
#drive-hud .dh-top-r button { width: var(--bt) !important; height: var(--bt) !important; border-radius: 50% !important; }
#drive-hud .dh-pause { width: var(--bt) !important; height: var(--bt) !important; border-radius: 50% !important; }
#drive-hud.tmin .dh-mini { width: calc(92px * var(--tu, 1)) !important; height: calc(92px * var(--tu, 1)) !important; }
#drive-hud.tmin .dh-arrow { width: calc(78px * var(--tu, 1)) !important; height: calc(78px * var(--tu, 1)) !important; border-radius: 50% !important; }
#drive-hud.tmin .dh-arrows { gap: 14px; }
#drive-hud.tmin .dh-wheelicon { width: calc(52px * var(--tu, 1)) !important; height: calc(52px * var(--tu, 1)) !important; opacity: .7; }
#drive-hud.tmin .dh-wheelpad { width: calc(236px * var(--tu, 1)) !important; height: calc(100px * var(--tu, 1)) !important; border-radius: 999px; }
#drive-hud.tmin .dh-hb { width: calc(56px * var(--tu, 1)) !important; height: calc(56px * var(--tu, 1)) !important; border-radius: 50% !important; }
#drive-hud.tmin .dh-gas { width: calc(58px * var(--tu, 1)) !important; height: calc(124px * var(--tu, 1)) !important; }
#drive-hud.tmin .dh-brake { width: calc(72px * var(--tu, 1)) !important; height: calc(56px * var(--tu, 1)) !important; }
#drive-hud.tmin .dh-steer { bottom: calc(var(--safe-b, 0px) + 10px); }
/* cronometro: painel Sony Tech (fio branco, cantos em L, rotulo SYS //, JetBrains Mono em caixa alta) */
body.mob #hudTempo { font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace; }
body.mob .tempoCaixa { position: relative; display: block; min-width: 150px; padding: 3px 18px 4px; background: rgba(7,10,15,.5); border: 0 !important; border-radius: 0 !important; box-shadow: none; transform: none; text-align: center; }
body.mob .tempoCaixa::before, body.mob .tempoCaixa::after { content: ''; position: absolute; width: 11px; height: 11px; pointer-events: none; }
body.mob .tempoCaixa::before { left: 0; top: 0; border-top: 2px solid #fff; border-left: 2px solid #fff; }
body.mob .tempoCaixa::after { right: 0; bottom: 0; border-bottom: 2px solid #fff; border-right: 2px solid #fff; }
body.mob #voltaN { display: block; font-size: 8px !important; letter-spacing: .22em; color: rgba(255,255,255,.7) !important; font-weight: 600; text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,.35); padding-bottom: 2px; margin-bottom: 2px; }
body.mob #voltaN::before { content: 'SYS // '; }
body.mob #tAtual { font-size: 22px !important; font-weight: 600; letter-spacing: .06em; color: #f2f4f6; text-shadow: none !important; font-variant-numeric: tabular-nums; }
body.mob .popK, body.mob .popT, body.mob .popD, body.mob .popX { font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace; font-style: normal; text-transform: uppercase; }
body.mob .popT { font-weight: 600; text-shadow: none; }