/* HUD mobile: silhuetas translúcidas e áreas de toque sem moldura. */
:root { --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); }
#touchControls[hidden], #touchRotate[hidden], #touchSettings[hidden], #installHelp[hidden], #installRow[hidden], #settingsPanel .setting[hidden] { display: none; }
.touch-mode { -webkit-text-size-adjust: 100%; }
.touch-mode #overlay { padding: max(16px, var(--safe-top)) max(16px, var(--safe-right)) max(20px, var(--safe-bottom)) max(16px, var(--safe-left)); overscroll-behavior: contain; }
.touch-mode .menu input:not([type=range]):not([type=checkbox]), .touch-mode .menu select { font-size: 16px; min-height: 44px; }
.touch-mode .menu .arrow, .touch-mode .menu-actions .bv-loja, .touch-mode .loja-filtros button { min-height: 44px; }
.touch-mode #shopPanel .loja-item > button:not(.loja-foto-botao) { min-height: 44px; }
.touch-mode #shopPanel .loja-item:hover .loja-foto { transform: none; }
.touch-mode #hud { padding: 0; }
.touch-mode #hud header, .touch-mode .input-panel { display: none; }
.touch-mode #run { top: max(10px, var(--safe-top)); padding: 0; border: 0; background: transparent; }
.touch-mode #run .label { font-size: 9px; color: #eff2f1b3; text-shadow: 0 1px 3px #0009; }
.touch-mode #timer { font: 700 25px/1.2 'Barlow', system-ui, sans-serif; font-variant-numeric: tabular-nums; color: #f0f2f1; text-shadow: 0 1px 3px #0009; }
.touch-mode .telemetry { top: max(10px, var(--safe-top)); right: max(16px, var(--safe-right)); bottom: auto; left: auto; padding: 0; border: 0; background: transparent; backdrop-filter: none; text-shadow: 0 1px 3px #0009; }
.touch-mode .telemetry .details { display: none; }
.touch-mode .telemetry .label { color: #eff2f1b3; }
.touch-mode #speed { font: 700 25px/1.2 'Barlow', system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.touch-mode .unit { color: #f0f2f1c7; }
/* No celular, as linhas dos saltos ficam embaixo da velocidade, só as últimas três. */
.touch-mode #saltos { top: calc(max(10px, var(--safe-top)) + 58px); right: max(16px, var(--safe-right)); bottom: auto; left: auto; font-size: 10px; }
.touch-mode #speed { min-width: 0; }
.touch-mode #saltos li:nth-last-child(n+4) { display: none; }
.touch-mode #progresso i { width: 90px; }
.touch-mode #toast { max-width: 54vw; font-size: 12px; text-align: center; }
.touch-mode #diagnostics { font-size: 9px; max-height: 28vh; overflow: auto; }
.touch-mode #crosshair { width: 20px; height: 20px; border: 0; border-radius: 0; background: linear-gradient(#f1f5f6d9 0 0) center/1px 100% no-repeat, linear-gradient(90deg, #f1f5f6d9 0 0) center/100% 1px no-repeat; box-shadow: none; filter: drop-shadow(0 1px 1px #0008); }
.touch-playing, .touch-playing canvas, .touch-playing #overlay, .touch-playing #touchControls { touch-action: none; overscroll-behavior: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#touchControls { --action-size: 64px; --control-white: #eef1eec7; --control-ring: #eef1ee63; --control-active: #ffc15b; position: fixed; inset: 0; z-index: 12; pointer-events: none; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
#touchControls button { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0; width: var(--action-size); height: var(--action-size); min-width: 48px; min-height: 48px; padding: 9px; border: 0; border-radius: 0; color: var(--control-white); background: transparent; box-shadow: none; font: 600 10px 'Barlow', system-ui, sans-serif; pointer-events: auto; touch-action: none; -webkit-tap-highlight-color: transparent; transition: color .12s; }
#touchControls button:focus-visible { outline: 2px solid #ee8f3d; outline-offset: 3px; }
#touchControls button.pressed, #touchControls button:active, #touchControls button[aria-pressed=true] { color: var(--control-active); }
#touchControls button:disabled { opacity: .3; }
#touchControls svg { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#touchControls .touch-silhouette { fill: currentColor; stroke: none; }
.touch-look { position: absolute; inset: 0 0 0 33%; pointer-events: auto; touch-action: none; }
.touch-top { position: absolute; top: max(10px, var(--safe-top)); left: max(12px, var(--safe-left)); display: flex; gap: 8px; }
#touchControls .touch-top button { width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 8px; }
#touchControls .touch-top svg { width: 25px; height: 25px; }
#touchControls .touch-top .touch-art { width: 30px; height: 30px; }
.touch-joystick { position: absolute; width: 132px; height: 132px; bottom: calc(max(14px, var(--safe-bottom)) + 8px); left: calc(max(16px, var(--safe-left)) + 10px); border-radius: 50%; border: 1.5px solid #eef1ee70; background: transparent; pointer-events: auto; touch-action: none; }
.touch-joystick i { position: absolute; top: calc(50% - 10px); left: calc(50% - 10px); width: 20px; height: 20px; border: 2px solid #eef1ee73; border-radius: 50%; background: #eef1ee80; }
.touch-joystick.pressed { border-color: #eef1eead; }
.touch-direction, .touch-joystick-label { display: none; }
/* Linha de base do rodapé: os pés dos bonecos de Bhop e Pular na altura dos
   pés do Agachar. O Bhop ficava 10 px acima; no desenho do salto o boneco está
   no ar (base na linha 585 de 724, contra 622 do agachado): 2,9 px a 56 px. */
#touchControls .touch-bhop { position: absolute; bottom: calc(max(14px, var(--safe-bottom)) - 4px); left: calc(max(16px, var(--safe-left)) + 156px); width: 60px; height: 60px; padding: 8px; }
/* Coluna do polegar direito, de cima para baixo: Golpe e Pular; Agachar e
   Nitro ao lado do Pular. */
.touch-actions { position: absolute; bottom: max(14px, var(--safe-bottom)); right: max(16px, var(--safe-right)); display: grid; grid-template-columns: repeat(3, var(--action-size)); grid-template-rows: repeat(3, var(--action-size)); gap: 12px; }
#touchControls [data-action=attack] { grid-row: 2; grid-column: 3; }
/* O spray fica logo acima da faca (o polegar direito alcança os dois). */
#touchControls [data-action=spray] { grid-row: 1; grid-column: 3; }
#touchControls .touch-actions .touch-art-spray { width: 38px; height: 38px; }
#touchControls [data-action=duck] { grid-row: 3; grid-column: 2; }
#touchControls .touch-nitro { grid-row: 3; grid-column: 1; }
#touchControls .touch-jump { grid-row: 3; grid-column: 3; }
#touchControls .touch-jump .touch-art { transform: translateY(2.9px); }
#touchControls .touch-actions > button > span:not(.touch-art), #touchControls .touch-button-state { display: none; }
#touchControls .touch-art { display: block; flex: none; width: 48px; height: 48px; background: currentColor; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; }
#touchControls .touch-art-knife { mask-image: url('./assets/hud/faca.svg'); -webkit-mask-image: url('./assets/hud/faca.svg'); mask-size: 100% 100%; -webkit-mask-size: 100% 100%; }
#touchControls .touch-art-nitro { mask-image: url('./assets/hud/nitro.png'); -webkit-mask-image: url('./assets/hud/nitro.png'); mask-size: contain; -webkit-mask-size: contain; margin-bottom: 4px; }
#touchControls .touch-art-spray { mask-image: url('./assets/hud/spray.png'); -webkit-mask-image: url('./assets/hud/spray.png'); mask-size: contain; -webkit-mask-size: contain; }
#touchControls .touch-art-camera { mask-image: url('./assets/hud/camera.png'); -webkit-mask-image: url('./assets/hud/camera.png'); mask-size: contain; -webkit-mask-size: contain; }
#touchControls .touch-art-person { width: 56px; height: 56px; mask-image: url('./assets/hud/movimentos.png'); -webkit-mask-image: url('./assets/hud/movimentos.png'); mask-size: 300% 100%; -webkit-mask-size: 300% 100%; }
.touch-art-jump { mask-position: 0 0; -webkit-mask-position: 0 0; }
.touch-art-duck { mask-position: 50% 0; -webkit-mask-position: 50% 0; }
.touch-art-run { mask-position: 100% 0; -webkit-mask-position: 100% 0; }
#touchControls .touch-bhop .touch-art { width: 46px; height: 46px; margin-bottom: 7px; }
#touchControls .touch-button-label { position: absolute; bottom: 6px; font: 600 8px/1 'Barlow', system-ui, sans-serif; letter-spacing: .04em; }
#touchControls .touch-bhop svg { width: 35px; height: 35px; margin-bottom: 6px; }
#touchControls .touch-meter { position: absolute; bottom: 5px; left: calc(50% - 22px); width: 44px; height: 4px; pointer-events: none; fill: none; stroke-width: 2; }
.touch-meter-track { stroke: #eef1ee26; }
.touch-meter-level { stroke: currentColor; stroke-dasharray: 100; stroke-dashoffset: 0; transition: stroke-dashoffset .12s linear, color .15s; }
#touchControls .touch-nitro[data-state=boosting] { color: var(--control-active); }
#touchControls .touch-nitro[data-state=boosting] .touch-art-nitro { animation: nitro-thrust .4s ease-in-out infinite alternate; }
#touchControls .touch-nitro[data-state=charging] .touch-meter-level { animation: nitro-refill .8s ease-in-out infinite alternate; }
#touchControls .touch-bhop[aria-pressed=true] .bhop-arrows { animation: bhop-chain 1.1s ease-in-out infinite; }
#touchControls .touch-nitro[data-state=empty] { color: #eef1ee66; }
@keyframes nitro-thrust { from { opacity: .75; transform: translate(-1px, 1px); } to { opacity: 1; transform: translate(1px, -1px); } }
@keyframes nitro-refill { from { opacity: .55; } to { opacity: 1; } }
@keyframes bhop-chain { 0%, 100% { transform: translateY(1px); } 50% { transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) {
  #touchControls button { transition: none; }
  #touchControls .touch-art-nitro, #touchControls .touch-meter-level, #touchControls .bhop-arrows { animation: none !important; transition: none; }
  #touchRotate .girar-celular { animation: none; transform: rotate(-90deg); }
}
#touchRotate { position: fixed; z-index: 40; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px; text-align: center; color: #f0f1f4; background: #0b1015f5; font: 16px 'Barlow', system-ui, sans-serif; }
/* Aviso de girar: o aparelho vira para a horizontal e volta, em laço. */
#touchRotate .girar-arte { width: 96px; height: 96px; margin-bottom: 20px; color: #ee8f3d; }
#touchRotate .girar-celular { fill: currentColor; transform-box: view-box; transform-origin: 32px 33px; animation: girar-celular 2.8s ease-in-out infinite; }
#touchRotate .girar-seta { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
@keyframes girar-celular { 0%, 20% { transform: rotate(0); } 45%, 80% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }
#touchRotate strong { font: 700 32px 'Barlow Condensed', system-ui, sans-serif; }
#touchRotate p { max-width: 30ch; line-height: 1.5; color: #b5c2cc; }
#touchRotate button { padding: 12px 20px; margin-top: 16px; border: 1px solid #74808b; border-radius: 6px; color: #f0f1f4; background: #1b252e; }
.install-nav { display: inline-flex; }
/* Assistir no celular: sem dica de teclado, e a barra em duas linhas quando aperta. */
.touch-mode .assistir-dica { display: none; }
.touch-mode .rastro-legenda b { font-size: 22px; }
.touch-mode #rastroVitrine, .touch-mode .faca-vitrine { aspect-ratio: 16 / 6.4; }
.touch-mode .assistir { padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
.touch-mode .assistir-topo { margin-bottom: auto; }
@media (max-width: 720px) {
  .assistir-barra { flex-wrap: wrap; gap: 8px; }
  #assistirLinha { order: -1; flex-basis: 100%; }
  .assistir-tempo { margin-right: auto; }
}
@media (max-width: 420px) {
  #assistirClipe span { display: none; }
}
#installHelp button { padding: 10px 16px; min-height: 44px; border: 1px solid #8b6849; border-radius: 6px; color: #ffd6b3; background: #191b1d; cursor: pointer; }
#installHelp { width: min(440px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 24px; border: 1px solid #ffffff26; border-radius: 16px; line-height: 1.5; background: #12181d; color: #d6e0e7; text-align: left; overflow-y: auto; }
#installHelp::backdrop { background: #000a; }
#installHelp .install-icon { border-radius: 12px; }
#installHelp h2 { font: 700 25px/1.15 'Barlow Condensed', system-ui, sans-serif; margin: 14px 0 20px; color: #f0f2f1; }
#installHelp ol { padding-left: 22px; }
#installHelp li { margin: 12px 0; padding-left: 4px; }
#installHelp li::marker { color: #ee8f3d; font-weight: 700; }
#installHelp .install-note { margin-top: 18px; color: #aebdc6; }
#installHelp form { text-align: right; margin-top: 20px; }
#installHelp button:focus-visible { outline: 2px solid #ee8f3d; outline-offset: 3px; }
@media (display-mode: standalone) { #installRow { display: none; } }
@media (orientation: landscape) and (max-height: 500px) {
  /* Deitado, o banner vira uma faixa mais baixa (logo e personagem continuam
     à vista) em vez de sumir. */
  .touch-mode .menu .banner { aspect-ratio: 3.85; object-position: 50% 50%; }
  .touch-mode .menu .topo { margin-bottom: 10px; }
  /* Os botões encostam à direita: centralizados, sobrava um vão à direita e o
     nome do mapa (à esquerda) virava "vec_a…". */
  .touch-mode .menu .palco { padding-top: 12px; padding-bottom: 30px; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; }
  .touch-mode .menu .botoes { grid-column: 2; justify-self: end; }
  @media (max-width: 800px) {
    .touch-mode .menu .botoes { gap: 8px; }
    .touch-mode .menu #play img, .touch-mode .menu #openSettings img, .touch-mode .menu #openOnline img { width: auto; height: 42px; }
    .touch-mode #stageMap { font-size: 21px; }
  }
  @media (max-width: 700px) {
    .touch-mode .menu #play img, .touch-mode .menu #openSettings img, .touch-mode .menu #openOnline img { height: 38px; }
    .touch-mode #stageMap { font-size: 18px; }
  }
  .touch-mode #stageMap { font-size: 25px; height: 1.1em; white-space: nowrap; }
  .touch-mode #stageDescription { display: none; }
  .touch-mode .menu .panel-head { padding-block: 10px; }
}
@media (max-height: 360px) and (orientation: landscape) {
  .touch-joystick { width: 112px; height: 112px; }
  #touchControls .touch-bhop { left: calc(max(16px, var(--safe-left)) + 132px); }
  #touchControls { --action-size: 56px; }
  .touch-actions { gap: 8px; }
}
@media (max-width: 600px) {
  .touch-mode .menu .loja-grade { grid-template-columns: minmax(0, 1fr); }
}

/* Celular: o "Entrar com o Google" (ou a conta) fica logo ao lado do símbolo
   do VECTOR, em vez de empurrado para a direita. */
.touch-mode .menu .topo-conta { flex: 0 1 auto; width: auto; margin-left: 0; justify-content: flex-start; }
.touch-mode .menu .topo { justify-content: flex-start; }