/* mobile.css (10/11/2026) — celular e tablet. Só vale com html.mob (tela de toque ou ?touch). Tirar a classe = jogo de desktop intacto. */
html.mob { --sa-t: env(safe-area-inset-top, 0px); --sa-r: env(safe-area-inset-right, 0px); --sa-b: env(safe-area-inset-bottom, 0px); --sa-l: env(safe-area-inset-left, 0px); }
html.mob body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
html.mob button { touch-action: manipulation; min-height: 44px; }
html.mob section.tela { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
html.mob #cena, html.mob #cena canvas { touch-action: none; }

/* ================= MENU (abas: dirigir · garagem · volante · controles) ================= */
html.mob #menu main { padding: calc(14px + var(--sa-t)) calc(14px + var(--sa-r)) calc(40px + var(--sa-b)) calc(14px + var(--sa-l)); max-width: 100%; }
html.mob #menu h1 { font-size: 26px; margin-bottom: 2px; }
html.mob #menu main > p.mut { font-size: 13px; margin: 0 0 4px; }
html.mob .uiAbas { overflow-x: auto; flex-wrap: nowrap; margin: 8px -14px 12px; padding: 8px 14px; gap: 6px; scrollbar-width: none; }
html.mob .uiAbas::-webkit-scrollbar { display: none; }
html.mob .uiAbas button { flex: 1 0 auto; padding: 10px 16px; font-size: 12px; min-height: 44px; }
html.mob .uiAbas button[data-i="2"], html.mob .uiAbas button[data-i="3"] { font-size: 0; } html.mob .uiAbas button[data-i="2"]::after { content: "toque"; font-size: 12px; } html.mob .uiAbas button[data-i="3"]::after { content: "botões"; font-size: 12px; } /* "volante" vira o ajuste do toque; "controles" vira a legenda dos botões */
html.mob .card { padding: 12px 14px; border-radius: 14px; }
html.mob .card h2 { font-size: 17px; }
html.mob button { font-size: 16px; }
html.mob .uiTiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
html.mob .uiTiles button { min-height: 64px; padding: 12px; font-size: 15px; }
html.mob #bDirigir { width: 100%; padding: 16px; font-size: 20px; min-height: 56px; margin: 6px 0 0; }
html.mob .row { flex-wrap: wrap; } html.mob .row label { width: 100%; }
html.mob input[type=range] { width: 100%; min-height: 32px; }
html.mob select, html.mob input[type=text], html.mob input:not([type]), html.mob input[type=number] { font-size: 16px; min-height: 44px; } /* 16px: o iPhone não dá zoom ao focar */
html.mob table { display: block; overflow-x: auto; max-width: 100%; }
/* o que é só do volante G29/teclado some no celular; entra o ajuste do toque */
html.mob .card[data-aba=volante]:not(.touchCard), html.mob #dbgEixos, html.mob .card[data-aba=controles]:not(.touchCard) { display: none !important; }
.toqueModos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 10px 0 14px; }
.toqueModos button { margin: 0; padding: 14px; text-align: left; background: #1d2842; border-radius: 12px; }
.toqueModos button b { display: block; font-size: 16px; } .toqueModos button span { display: block; font-size: 12px; color: var(--mut); margin-top: 4px; font-weight: 400; }
.toqueModos button.sel { border-color: var(--acc); box-shadow: 0 0 0 2px var(--acc) inset, 0 0 16px #60a5fa44; }
.tcToast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); max-width: 88vw; background: #111a2cf0; border: 1px solid #f87171; border-radius: 12px; padding: 12px 16px; z-index: 99; font-size: 14px; text-align: center; }

/* ================= CALIBRAÇÃO e DINAMÔMETRO (G29/bancada) ================= */
html.mob #calib main, html.mob #calib .card { max-width: 100%; }
html.mob #dynoUi { max-width: 100vw; overflow: auto; }

/* ================= JOGO: HUD ================= */
html.mob #hud, html.mob #mini, html.mob #dano, html.mob #dynoUi { zoom: 1; }
html.mob #hud { padding: 0 0 calc(8px + var(--sa-b)); gap: 8px; justify-content: flex-start; padding-left: calc(204px + var(--sa-l)); }
html.mob #hud > div:first-child, html.mob #hud #marcha { padding: 4px 12px; border-radius: 12px; }
html.mob #hud .grande { font-size: 40px; } html.mob #marcha { font-size: 40px; min-width: 52px; }
html.mob #hud .barraH { width: 160px; height: 10px; }
html.mob #auxHud { bottom: 96px; font-size: 14px; padding: 4px 10px; } html.mob #luzHud { bottom: 70px; font-size: 22px; }
html.mob #uiLimite { left: auto !important; right: calc(14px + var(--sa-r)) !important; bottom: auto !important; top: calc(100px + var(--sa-t)) !important; width: 44px; height: 44px; border-width: 5px; font-size: 17px; }
html.mob #odo, html.mob #atribuicao, html.mob #bFM, html.mob #dica, html.mob #acerto-abrir, html.mob [style*="top: 30px"][style*="right: 14px"], html.mob [style*="bottom: 6px"][style*="translateX(-50%)"] { display: none !important; } /* ACERTO abre pela pausa; linha de telemetria do rodapé cobria o velocímetro */
html.mob #uiTopL { left: calc(10px + var(--sa-l)); top: calc(8px + var(--sa-t)); font-size: 13px; padding: 4px 10px; }
html.mob #uiTopR { right: auto; left: 50%; transform: translateX(-50%); top: calc(8px + var(--sa-t)); font-size: 12px; max-width: 34vw; }
html.mob #uiAvisos { top: calc(40px + var(--sa-t)); } html.mob #uiAvisos > * { font-size: 13px; }
html.mob #dano { top: auto; bottom: calc(110px + var(--sa-b)); left: calc(10px + var(--sa-l)); right: auto; transform: scale(.6); transform-origin: bottom left; }
html.mob #uiPausa .caixa { min-width: 0; width: min(440px, 90vw); max-height: 88vh; overflow: auto; padding: 16px; } html.mob #uiPausa li { padding: 14px; font-size: 18px; }
html.mob #uiPausa p { display: none; } html.mob #uiRoda { display: none !important; } /* dial/roda é do G29 */
/* minimapa: pequeno, no canto de cima à esquerda (os polegares ficam embaixo) */
html.mob #combChip { left: calc(10px + var(--sa-l)); top: calc(30px + var(--sa-t)); padding: 3px 8px; font-size: 11px; }
html.mob #mini, html.mob #mini[data-canto] { left: calc(10px + var(--sa-l)); right: auto; top: calc(78px + var(--sa-t)); bottom: auto; width: 112px; }
html.mob #mini canvas { width: 112px; height: 112px; } html.mob #mini span { font-size: 11px; max-width: 112px; }

/* ================= JOGO: botões de toque ================= */
#tc { display: none; }
html.mob #tc { display: block; position: fixed; inset: 0; z-index: 7; pointer-events: none; touch-action: none; }
#tc button { pointer-events: auto; touch-action: none; margin: 0; border: 1px solid #fff4; background: #0a0f1cb8; color: #fff; font-weight: 800; letter-spacing: .04em; border-radius: 16px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
#tc button.on { background: #60a5fa; color: #0b1220; border-color: #fff; }
#tc .tcL { position: absolute; left: calc(14px + var(--sa-l)); bottom: calc(14px + var(--sa-b)); }
#tc .tcR { position: absolute; right: calc(14px + var(--sa-r)); bottom: calc(14px + var(--sa-b)); display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
#tcSet { display: flex; gap: 12px; } #tcSet button { width: 84px; height: 84px; font-size: 30px; }
.tcPed { display: flex; gap: 12px; align-items: flex-end; }
#tcGas { width: 92px; height: 120px; background: #14532dd0; font-size: 18px; } #tcFre { width: 82px; height: 92px; background: #7f1d1dd0; font-size: 15px; }
#tcGas.on { background: #4ade80; } #tcFre.on { background: #f87171; }
#tcFM { width: 190px; height: 52px; font-size: 14px; background: #78350fd0; } #tcFM.on { background: #f59e0b; }
#tc .tcM { position: absolute; right: calc(236px + var(--sa-r)); bottom: calc(14px + var(--sa-b)); display: flex; flex-direction: column; gap: 8px; }
#tc .tcM button { width: 60px; height: 52px; font-size: 14px; }
#tc .tcT { position: absolute; right: calc(10px + var(--sa-r)); top: calc(8px + var(--sa-t)); display: flex; gap: 8px; }
#tc .tcT button { min-width: 52px; height: 40px; font-size: 12px; padding: 0 10px; border-radius: 12px; }
#tcExtra { position: absolute; right: calc(10px + var(--sa-r)); top: calc(56px + var(--sa-t)); display: none; grid-template-columns: repeat(2, 1fr); gap: 8px; }
#tc.mais #tcExtra { display: grid; } #tcExtra button { height: 46px; padding: 0 12px; font-size: 12px; pointer-events: auto; }
/* modo do volante */
#tcRoda, #tcGiroTxt { display: none; }
html[data-toque=botoes] #tcSet { display: flex; } html:not([data-toque=botoes]) #tcSet { display: none; }
html[data-toque=volante] #tcRoda { display: block; } html[data-toque=giro] #tcGiroTxt { display: block; }
#tcRoda { position: relative; width: 168px; height: 168px; pointer-events: auto; touch-action: none; border-radius: 50%; border: 12px solid #0a0f1cb8; background: radial-gradient(circle, #0a0f1c55 40%, transparent 41%); box-shadow: 0 0 0 2px #fff5; transform: rotate(var(--rot, 0deg)); }
#tcRoda::before { content: ""; position: absolute; left: 6%; right: 6%; top: 46%; height: 8%; background: #fff6; border-radius: 6px; } #tcRoda i { position: absolute; left: 50%; top: -6px; width: 14px; height: 24px; margin-left: -7px; background: #ef4444; border-radius: 4px; }
#tcRoda.on { box-shadow: 0 0 0 3px var(--acc); }
#tcGiroTxt { pointer-events: auto; padding: 14px 18px; background: #0a0f1cb8; border-radius: 14px; border: 1px dashed #fff6; font-size: 13px; text-align: center; }

/* ================= ÍCONES SOLTOS (oficina, rádio, bar, carteira…): bandeja que abre pelo botão "⋯ › ÍCONES" ================= */
html.mob button[style*="left: "][style*="bottom: 8px"] { display: none; }
html.mob.bandeja button[style*="left: "][style*="bottom: 8px"] { display: block; bottom: auto !important; top: calc(160px + var(--sa-t)) !important; min-width: 40px; height: 44px; z-index: 60 !important; }
/* painéis dos ícones (largura fixa de 300–360 px no desktop) viram folha que cabe na tela */
html.mob [style*="bottom: 44px"], html.mob [style*="top: 80px"][style*="z-index: 50"] { left: calc(8px + var(--sa-l)) !important; right: calc(8px + var(--sa-r)) !important; width: auto !important; top: calc(52px + var(--sa-t)) !important; bottom: calc(8px + var(--sa-b)) !important; max-height: none !important; overflow: auto !important; font-size: 14px !important; z-index: 70 !important; border-radius: 14px; }
html.mob .mgPainel { left: calc(8px + var(--sa-l)); top: calc(8px + var(--sa-t)); width: min(250px, 44vw); max-height: 62vh; }
html.mob #scan { width: min(340px, 56vw); top: calc(8px + var(--sa-t)); right: calc(8px + var(--sa-r)); }
html.mob #bancada iframe { width: 100%; height: 100%; } html.mob #bFecharBancada { width: 48px; height: 48px; top: calc(10px + var(--sa-t)) !important; right: calc(10px + var(--sa-r)) !important; }
html.mob #dbg { display: none !important; }

/* retrato: o jogo é de paisagem. Pede pra girar */
@media (orientation: portrait) { html.mob #jogo.ativa::after { content: "Gire o celular para a horizontal"; position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; text-align: center; padding: 30px; background: #0f1420f2; font-size: 22px; font-weight: 700; } }

/* pausa: lista em 2 colunas na horizontal (6 itens não cabem em 380px de altura); 1 coluna em pé */
html.mob #uiPausa .caixa { width: min(680px, 92vw); }
html.mob #uiPausa ul { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
html.mob #uiPausa li { margin: 0; padding: 12px 14px; min-height: 48px; display: flex; align-items: center; font-size: 17px; }
@media (orientation: portrait) { html.mob #uiPausa ul { grid-template-columns: 1fr; } }

/* mapa grande: fechar sem teclado; scanner abaixo da barra de cima */
#mapaoX { display: none; }
html.mob #mapaoX { display: block; position: fixed; top: calc(8px + var(--sa-t)); right: calc(8px + var(--sa-r)); width: 48px; height: 48px; border-radius: 12px; border: 0; background: #000c; color: #fff; font-size: 22px; z-index: 31; }
html.mob #mapao .info { display: none; }
html.mob #scan { top: calc(60px + var(--sa-t)); max-height: calc(100vh - 68px - var(--sa-t) - var(--sa-b)); font-size: 12px; }
html.mob #scan .sc-c { padding: 4px 10px; }

/* câmbio automático (Dualogic) no toque: sem embreagem, com R⇄D */
#tc.auto #tcEmb, #tc:not(.auto) #tcRD { display: none; }

/* sem zoom por duplo toque (iOS): manipulation em tudo; onde já é none (cena, volante, botões do toque) fica none */
html.mob, html.mob * { touch-action: manipulation; }

/* editor de layout dos botões (EDITAR BOTÕES no ⋯) */
#tcEditBar { display: none; position: fixed; top: calc(8px + var(--sa-t)); left: 50%; transform: translateX(-50%); z-index: 40; pointer-events: auto; gap: 8px; align-items: center; background: #0a0f1ce6; border: 1px solid #fff4; border-radius: 14px; padding: 6px 10px; color: #fff; font-size: 12px; white-space: nowrap; }
#tc.edit #tcEditBar { display: flex; } #tcEditBar button { min-height: 40px; padding: 0 14px; font-size: 13px; }
#tc.edit :is(.tcL, .tcR, .tcM, .tcT, #tcExtra) button, #tc.edit #tcRoda { outline: 2px dashed #4da3ff; outline-offset: 2px; }
#tc .rs { display: none; } #tc.edit .rs { display: block; position: absolute; right: -12px; bottom: -12px; width: 30px; height: 30px; border-radius: 50%; background: #4da3ff; border: 2px solid #fff; touch-action: none; pointer-events: auto; z-index: 2; }

/* opacidade dos botões (slider no editor) */
#tc :is(.tcL, .tcR, .tcM, .tcT, #tcExtra) button, #tc #tcRoda { opacity: var(--tcOp, 1); }
#tcEditBar label { display: flex; align-items: center; gap: 6px; } #tcEditBar input { width: 90px; }

/* dinamômetro no celular: painel na esquerda, coluna do gás livre na direita; sem setas (rolo não vira) e sem o painel de velocidade */
html.mob.dyno #dynoUi { left: calc(8px + var(--sa-l, 0px)); right: 296px; top: calc(58px + var(--sa-t, 0px)); width: auto; max-height: calc(100dvh - 66px - var(--sa-t, 0px)); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
html.mob.dyno #tc .tcL, html.mob.dyno #hud { display: none; }

/* ================= SKIN v2 (10/11): velocímetro em arco, botões de vidro, HUD mais limpo ================= */
html.mob #hud > div:first-child, html.mob #hud #marcha { display: none; }
html.mob #auxHud { bottom: calc(168px + var(--sa-b)); left: var(--gx); } html.mob #luzHud { bottom: calc(140px + var(--sa-b)); left: var(--gx); }
html.mob { --gx: calc(194px + (100vw - 490px) / 2); } /* centro livre entre as setas (esq.) e a coluna M+/M− (dir.) */
#gauge { display: none; }
html.mob #gauge { display: block; position: fixed; z-index: 6; left: var(--gx); bottom: calc(4px + var(--sa-b)); width: 156px; height: 156px; transform: translateX(-50%); pointer-events: none; font-family: ui-rounded, "SF Pro Rounded", system-ui, sans-serif; }
html.mob.dyno #gauge, body[data-hud=limpo] #gauge, body[data-hud=cinema] #gauge { display: none; }
#gauge::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #16203a 0%, #0a0f1cf0 70%); box-shadow: 0 6px 22px #000a, inset 0 0 0 1px #ffffff1f; }
#gauge svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#gauge path { fill: none; stroke-linecap: round; }
#gauge .gBg { stroke: #ffffff1c; stroke-width: 9; } #gauge .gTick { stroke: #ffffff40; stroke-width: 3; stroke-dasharray: .5 4.5; stroke-linecap: butt; }
#gauge .gRed { stroke: #ef4444; stroke-width: 9; stroke-dasharray: 14 100; stroke-dashoffset: -86; opacity: .5; }
#gauge .gFg { stroke: url(#gGr); stroke-width: 9; filter: drop-shadow(0 0 4px #22d3ee88); }
#gauge .gC { position: absolute; left: 0; right: 0; top: 42px; text-align: center; color: #fff; line-height: 1; }
#gauge #gV { display: block; font-size: 46px; font-weight: 800; font-style: italic; font-variant-numeric: tabular-nums; text-shadow: 0 2px 8px #000c; }
#gauge .gC i { font-style: normal; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: #8fa6d1; font-weight: 700; }
#gauge #gM { position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); min-width: 46px; padding: 2px 10px; text-align: center; font-size: 19px; font-weight: 800; color: #0b1220; background: linear-gradient(#e8f1ff, #9db8e8); border-radius: 10px; box-shadow: 0 3px 10px #0009; }
#gauge.troca .gFg { animation: hudPisca .18s steps(2) infinite; stroke: #ef4444; } #gauge.troca #gM { background: #fca5a5; }

/* botões de vidro */
#tc button { background: linear-gradient(165deg, #232f4ecc, #0a0f1cd9); border: 1px solid #ffffff2e; box-shadow: 0 6px 16px #0008, inset 0 1px 0 #ffffff2a; transition: transform .06s, filter .06s; text-shadow: 0 1px 3px #000a; }
#tc button.on { transform: scale(.94); filter: brightness(1.25); }
#tcSet button { border-radius: 50%; }
#tc #tcGas { background: linear-gradient(180deg, #34d39988, #05603ae0), repeating-linear-gradient(0deg, transparent 0 14px, #ffffff1a 14px 16px); border-color: #6ee7b7aa; font-size: 20px; border-radius: 22px 22px 18px 18px; }
#tc #tcFre { background: linear-gradient(180deg, #f8717188, #7f1d1de0), repeating-linear-gradient(0deg, transparent 0 14px, #ffffff1a 14px 16px); border-color: #fca5a5aa; border-radius: 18px; }
#tc #tcGas.on { background: linear-gradient(180deg, #6ee7b7, #10b981); color: #052e1c; } #tc #tcFre.on { background: linear-gradient(180deg, #fca5a5, #ef4444); color: #450a0a; }
#tc #tcFM { background: linear-gradient(180deg, #f59e0b66, #78350fe0); border-color: #fcd34daa; }
#tc .tcT button { border-radius: 999px; } 
/* topo: relógio/dinheiro e posto mais discretos; minimapa com anel; dano ao lado dele */
html.mob #uiTopL { background: #0a0f1cb3; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html.mob #mini canvas { border-width: 2px; box-shadow: 0 0 0 4px #0a0f1c99, 0 4px 18px #000a, inset 0 0 18px #000c; }
html.mob #mini span { max-width: 150px; font-size: 11px; background: #0a0f1ccc; }
html.mob #dano { top: calc(78px + var(--sa-t)); bottom: auto; left: calc(132px + var(--sa-l)); transform: scale(.42); transform-origin: top left; }
html.mob #uiTopR { display: none; } /* o nome da rua já aparece embaixo do minimapa */

/* menu v2: DIRIGIR sempre à vista (antes ficava abaixo da dobra) + cards de mapa com ícone */
html.mob #menu main { padding-bottom: calc(96px + var(--sa-b)); }
html.mob #menu #bDirigir { position: fixed; right: calc(16px + var(--sa-r)); bottom: calc(14px + var(--sa-b)); width: auto; min-width: 220px; margin: 0; z-index: 20; color: #04111f; border: 0; border-radius: 16px; background: linear-gradient(180deg, #7dd3fc, #3b82f6); box-shadow: 0 8px 26px #3b82f6aa, inset 0 1px 0 #fff8; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
html.mob .uiTiles button { display: flex; align-items: center; gap: 10px; text-align: left; background: linear-gradient(160deg, #24345a, #141d33); border: 1px solid #ffffff1f; }
html.mob .uiTiles button .ic { font-size: 28px; line-height: 1; flex: none; }
html.mob .uiTiles button.sel { background: linear-gradient(160deg, #2c4a86, #18284a); }
html.mob .uiTiles button { font-size: 14px; } html.mob .uiTiles button { overflow: hidden; } html.mob .card[data-aba=dirigir] > h2 { font-size: 0; margin: 0 0 6px; } html.mob .card[data-aba=dirigir] > h2::after { content: "Escolha o mapa"; font-size: 17px; }
#tcExtra { grid-template-columns: repeat(3, 1fr); gap: 6px; } #tcExtra button { height: 40px; font-size: 11px; padding: 0 8px; } /* 14 botões: 3 colunas pra caber na altura do celular deitado */
#tcExtra { grid-template-columns: repeat(3, 1fr); gap: 6px; } #tcExtra button { height: 40px; font-size: 11px; padding: 0 8px; } /* 14 botões: 3 colunas pra caber na altura do celular deitado */
/* fonte de painel automotivo (Rajdhani, Google Fonts; sem ela cai na fonte do sistema) + vinheta leve */
html.mob #gauge, html.mob #tc button, html.mob #uiTopL, html.mob #mini span, html.mob #uiAvisos { font-family: "Rajdhani", ui-rounded, "SF Pro Rounded", system-ui, sans-serif; }
html.mob #tc button { letter-spacing: .06em; }
html.mob #gauge #gV { font-weight: 700; font-size: 52px; }
html.mob #jogo.ativa::before { content: ""; position: fixed; inset: 0; z-index: 5; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, transparent 55%, #00000066 100%); }