/* 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: calc(.3 * var(--ctl-op, 1)); }
#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 { 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. */
/* A tela de virar o celular (pedido de 29/10/2026: "crie um ícone de celular e as setinhas pra substituir esse
   procedural" e "tem como melhorar essa tela?"): as quatro — a abertura (.app-virar), o lobby do app (.app-girar), a
   sala (.lobby-girar) e a partida (#touchRotate) — com o mesmo desenho. O galpão do lobby ao fundo, desfocado; o
   logo em cima; as setas paradas, pulsando, e o celular girando dentro delas; e a dica da trava de rotação.
   (O :is leva a força do #touchRotate: vale por cima do fundo de cada uma.) */
:is(.app-virar, .app-girar, .lobby-girar, #touchRotate) {
  isolation: isolate; overflow: hidden; gap: 6px; color: #f4f1ff;
  background: radial-gradient(ellipse 85% 55% at 50% 46%, #2c1f50 0%, #130e25 55%, #07080b 100%);
}
:is(.app-virar, .app-girar, .lobby-girar, #touchRotate)::before {
  content: ""; position: absolute; inset: -30px; z-index: -1; pointer-events: none;
  background: url("./assets/lobby/cenario.webp") 50% 40% / auto 100% no-repeat; filter: blur(9px) saturate(1.25) brightness(.5); opacity: .6;
}
:is(.app-virar, .app-girar, .lobby-girar, #touchRotate)::after {
  content: ""; position: absolute; top: calc(env(safe-area-inset-top, 0px) + 26px); left: 50%; width: min(50vw, 220px); aspect-ratio: 366 / 195;
  translate: -50% 0; pointer-events: none; background: url("./assets/brand/logo.png") center / contain no-repeat; filter: drop-shadow(0 6px 16px #000b);
}
:is(.app-virar, .app-girar, .lobby-girar, #touchRotate) .girar-arte { position: relative; display: block; flex: none; width: clamp(128px, 40vw, 176px); aspect-ratio: 1; margin: 0 0 12px; }
:is(.app-virar, .app-girar, .lobby-girar, #touchRotate) .girar-arte img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; -webkit-user-drag: none; }
:is(.app-virar, .app-girar, .lobby-girar, #touchRotate) .girar-setas { filter: drop-shadow(0 0 16px #ffb00059); animation: girar-setas 2.8s ease-in-out infinite; }
:is(.app-virar, .app-girar, .lobby-girar, #touchRotate) .girar-celular { transform-origin: 50% 50%; filter: drop-shadow(0 8px 12px #000a); animation: girar-celular 2.8s ease-in-out infinite; }
@keyframes girar-celular { 0%, 20% { transform: rotate(0); } 45%, 80% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }
@keyframes girar-setas { 0%, 20%, 100% { transform: scale(1); } 45% { transform: scale(1.06); } 80% { transform: scale(1); } }
:is(.app-virar, .app-girar, .lobby-girar, #touchRotate) strong { font: 700 clamp(28px, 8.4vw, 36px)/1.05 "Barlow Condensed", system-ui, sans-serif; letter-spacing: .01em; text-shadow: 0 2px 0 #000a, 0 0 22px #ffb00052; }
:is(.app-virar, .app-girar, .lobby-girar, #touchRotate) p { max-width: 28ch; margin: 0; color: #c8cde0; font: 400 15px/1.5 Barlow, system-ui, sans-serif; }
:is(.app-virar, .app-girar, .lobby-girar, #touchRotate) .girar-trava {
  margin-top: 16px; padding: 7px 14px; border-radius: 999px; background: #ffffff10; box-shadow: inset 0 0 0 1px #ffffff21;
  color: #ffd76a; font: 600 13px/1.3 Barlow, system-ui, sans-serif;
}
@media (prefers-reduced-motion: reduce) {
  :is(.app-virar, .app-girar, .lobby-girar, #touchRotate) .girar-celular { animation: none; transform: rotate(-90deg); }
  :is(.app-virar, .app-girar, .lobby-girar, #touchRotate) .girar-setas { animation: none; }
}
#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; }

/* ---------- O editor dos controles de toque (src/editor-controles.js, 05/11/2026) ----------
   O jogo guarda em cada botão o quanto ele andou (translate), o tamanho (scale) e a transparência (--ctl-op, que se
   multiplica pela opacidade que o botão já tinha). Escondido: some da partida, e no editor aparece apagado. */
#touchControls [data-ctl] { opacity: var(--ctl-op, 1); }
#touchControls .ctl-escondido { visibility: hidden; pointer-events: none !important; }
#touchControls.editando, #touchControls.editando[hidden] { display: block; z-index: 9001; }
#touchControls.editando * { pointer-events: none !important; }
#touchControls.editando .ctl-escondido { visibility: visible; opacity: .22; }
.ctl-fundo { position: fixed; inset: 0; z-index: 9000; background: linear-gradient(#0a0618b8, #0a0618b8), var(--ctl-fundo, none) center / cover no-repeat, #120c22; }
.ctl-fundo[hidden], .ctl-editor[hidden] { display: none; }
.ctl-fundo.com-grade::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(#ffffff14 1px, transparent 1px), linear-gradient(90deg, #ffffff14 1px, transparent 1px); background-size: 20px 20px; }
.ctl-editor { position: fixed; inset: 0; z-index: 9002; pointer-events: none; font-family: "Barlow Condensed", "Arial Narrow", sans-serif; -webkit-user-select: none; user-select: none; touch-action: none; }
.ctl-editor > * { pointer-events: auto; }
.ctl-camada { position: absolute; inset: 0; pointer-events: none; }
.ctl-moldura { position: absolute; border: 2px dashed #ffd76acc; border-radius: 14px; pointer-events: auto; touch-action: none; cursor: grab; }
.ctl-moldura.redondo { border-radius: 50%; }
.ctl-moldura.escolhido { border: 3px solid #ffd24a; box-shadow: 0 0 0 3px #ffd24a40, 0 0 22px #ffb000b3; cursor: grabbing; }
.ctl-moldura.escondido { border-color: #ffffff59; }
.ctl-moldura b { position: absolute; left: 50%; top: -15px; translate: -50% 0; padding: 1px 7px; border: 1.5px solid #120a1c; border-radius: 999px; background: #2a1f48; color: #ffe9a8; font: 700 10px/1.2 "Barlow Condensed", sans-serif; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; pointer-events: none; }
.ctl-moldura.embaixo b { top: auto; bottom: -15px; }
.ctl-moldura.pequena b { padding: 0 4px; font-size: 8px; letter-spacing: .02em; }
.ctl-moldura.escolhido b { background: linear-gradient(180deg, #fff27a, #ffb000); color: #2a1200; }
.ctl-moldura.escondido b { background: #3a3a48; color: #c9c9d6; text-decoration: line-through; }
.ctl-alca { position: absolute; right: -9px; bottom: -9px; width: 22px; height: 22px; border: 2px solid #120a1c; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff27a, #ffb000); box-shadow: 0 1px 0 #000a; touch-action: none; cursor: nwse-resize; }
.ctl-alca::after { content: "↘"; position: absolute; inset: 0; display: grid; place-items: center; color: #2a1200; font: 800 12px/1 sans-serif; }
.ctl-moldura.redondo .ctl-alca { right: 8%; bottom: 8%; }
.ctl-topo { position: absolute; left: 50%; top: max(6px, env(safe-area-inset-top)); translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 1px; max-width: calc(100% - 420px); min-width: 220px; padding: 5px 16px 6px; border: 2.5px solid #120a1c; border-radius: 12px; background: linear-gradient(180deg, #3a2a6e, #1c1338); box-shadow: inset 0 1px 0 #ffffff33, 0 3px 0 #000a; pointer-events: none; text-align: center; }
.ctl-topo strong { color: #ffe45c; font: 800 19px/1 "Barlow Condensed", sans-serif; letter-spacing: .1em; text-transform: uppercase; text-shadow: 0 2px 0 #000a; }
.ctl-topo small { color: #e7dcff; font: 700 11px/1.1 "Barlow Condensed", sans-serif; letter-spacing: .04em; }
.ctl-botoes { position: absolute; right: max(8px, env(safe-area-inset-right)); top: max(8px, env(safe-area-inset-top)); display: flex; gap: 6px; }
.ctl-bt { display: grid; place-items: center; height: 34px; padding: 0 13px; border: 2.5px solid #120a1c; border-radius: 9px; font: 800 13px/1 "Barlow Condensed", sans-serif; letter-spacing: .08em; text-transform: uppercase; box-shadow: inset 0 1px 0 #ffffff80, 0 3px 0 #000a; transform: skewX(-8deg); cursor: pointer; }
.ctl-bt span { transform: skewX(8deg); }
.ctl-bt:active { translate: 0 2px; box-shadow: inset 0 1px 0 #ffffff80, 0 1px 0 #000a; }
.ctl-bt.padrao { background: linear-gradient(180deg, #8f7bff, #5a3fd6); color: #fff; }
.ctl-bt.cancelar { background: linear-gradient(180deg, #ff7a7a, #d62828); color: #fff; }
.ctl-bt.salvar { background: linear-gradient(180deg, #7dff9a, #19b84a); color: #04210f; }
.ctl-chip { position: absolute; left: 50%; top: calc(max(6px, env(safe-area-inset-top)) + 54px); translate: -50% 0; padding: 3px 10px; border: 2px solid #120a1c; border-radius: 999px; background: #241a40; color: #e7dcff; font: 700 11px/1.2 "Barlow Condensed", sans-serif; letter-spacing: .05em; cursor: pointer; }
.ctl-chip em { color: #7dff9a; font-style: normal; }
.ctl-cartao { position: absolute; left: 50%; top: calc(max(6px, env(safe-area-inset-top)) + 84px); translate: -50% 0; width: min(250px, 44vw); padding: 8px 11px 9px; border: 2.5px solid #120a1c; border-radius: 12px; background: linear-gradient(180deg, #2f2257f2, #170f2ef2); box-shadow: inset 0 1px 0 #ffffff33, 0 4px 0 #000a; color: #fff; }
.ctl-cartao.embaixo { top: auto; bottom: calc(max(6px, env(safe-area-inset-bottom)) + 30px); }
.ctl-cartao[hidden] { display: none; }
.ctl-cartao h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 0 4px; color: #ffe45c; font: 800 15px/1 "Barlow Condensed", sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.ctl-cartao h3 small { color: #cfc6e6; font: 700 10px/1.1 "Barlow Condensed", sans-serif; letter-spacing: .04em; text-transform: none; text-align: right; }
.ctl-linha { display: grid; grid-template-columns: 74px minmax(0, 1fr) 36px; align-items: center; gap: 6px; margin-top: 4px; color: #e7dcff; font: 700 11px/1 "Barlow Condensed", sans-serif; letter-spacing: .04em; }
.ctl-linha input { width: 100%; accent-color: #ffb000; touch-action: pan-x; }
.ctl-linha output { color: #ffe45c; text-align: right; }
.ctl-acoes { display: flex; gap: 6px; margin-top: 7px; }
.ctl-acoes button { flex: 1; min-height: 30px; padding: 3px 4px; border: 2px solid #120a1c; border-radius: 8px; background: #3b2d66; color: #e7dcff; font: 700 11px/1.1 "Barlow Condensed", sans-serif; letter-spacing: .04em; cursor: pointer; }
.ctl-acoes button:active { filter: brightness(1.25); }
.ctl-aviso { position: absolute; left: 50%; bottom: max(6px, env(safe-area-inset-bottom)); translate: -50% 0; margin: 0; padding: 3px 10px; border-radius: 8px; background: #000a; color: #e9e3f7; font: 700 11px/1.2 "Barlow Condensed", sans-serif; letter-spacing: .04em; white-space: nowrap; pointer-events: none; }
.ctl-vire { display: none; position: absolute; inset: 0; margin: 0; place-items: center; padding: 24px; background: #0a0618f2; color: #fff; font: 800 20px/1.25 "Barlow Condensed", sans-serif; letter-spacing: .04em; text-align: center; }
.ctl-editor.em-pe .ctl-vire { display: grid; }
/* O botão "Editar controles" nos Ajustes (só no celular): o nome em cima, como nos outros cartões, e o botão no meio do
   espaço que sobra (05/11/2026, o dono: "centraliza o botão de ajustar o hud dentro do container"). */
#ajustesGrade .setting.setting-controles { grid-template-rows: auto 1fr; }
#ajustesGrade .setting.setting-controles .bv-loja { grid-column: 1 / -1; grid-row: 2; justify-self: center; align-self: center; }
.setting-controles .bv-loja { height: 34px; min-height: 34px; padding: 0 18px; font-size: 13px; white-space: nowrap; }