/* ===== CORO SOLTO — UI v2 (Valorant-clean: geométrico, cantos cortados, sem glow/blur) ===== */
@font-face{font-family:'Rajdhani';src:url('/fonts/rajdhani-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Rajdhani';src:url('/fonts/rajdhani-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Rajdhani';src:url('/fonts/rajdhani-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'ST Mono';src:url('/fonts/share-tech-mono.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Bebas Neue';src:url('/fonts/bebasneue-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('/fonts/barlowcondensed-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('/fonts/barlowcondensed-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('/fonts/barlowcondensed-500italic.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('/fonts/barlowcondensed-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('/fonts/barlowcondensed-700.woff2') format('woff2');font-weight:700;font-display:swap}

/* =========================================================================
   SISTEMA DE DESIGN — "CORO SOLTO"
   Por quê: antes cada regra escolhia seu próprio px/hex, então ciano queria
   dizer 5 coisas e o texto de nav vivia a 58% de opacidade. Aqui a decisão é
   tomada UMA vez, no token, e as regras só consomem.
   Identidade BR sem clip-art de bandeira: a referência é sinaleiro de rua,
   lambe-lambe colado em tapume e pintura de caminhão — faixa amarela+preta,
   vermelho de placa, branco de cal, asfalto. Verde/amarelo aparecem como
   ACENTO de time, nunca como moldura de bandeirinha.
   ========================================================================= */
:root{
  /* ---- escala tipográfica (razão ~1.22; piso 11px = legível em 1280×720) ---- */
  --fs-50:11px;  --fs-100:12px; --fs-200:13px; --fs-300:15px; --fs-400:17px;
  /* OS TRÊS DEGRAUS DE TÍTULO SUBIRAM, e é medição: `ref-ui.py` sobre as 9 telas dá
     tituloFracMediana 0,0440 e razao (maior/menor por tela) 3,33. A MESMA medição sobre
     capturas do jogo (3:2, 1536×1024) dava titulo 0,0264-0,0323 e razao 1,8-2,2 — quatro
     telas de fluxo independentes (01, 02, 04, 05) concordando: a hierarquia estava CHATA,
     e o defeito não era "corpo grande demais", era TÍTULO PEQUENO DEMAIS.
        --fs-700 32 -> 40px   (titulo de tela, relogio do HUD)
        --fs-800 44 -> 56px   (numero-heroi: vida e municao)
        --fs-900 60 -> 76px
     Continuam em PX de propósito: `caixaDe()` da UI3 (tools/eval/ui-check.mjs:563) lê
     font-size com `parseFloat`, então `vh`/`clamp()` fariam a régua medir 3,9 px de caixa
     e ficar CEGA. Escala fluida exige consertar a régua primeiro — está no relatório. */
  --fs-500:20px; --fs-600:24px; --fs-700:40px; --fs-800:56px; --fs-900:76px;
  --lh-tight:1; --lh-snug:1.2; --lh-base:1.45;
  --tr-tight:.5px; --tr-1:1px; --tr-2:2px; --tr-3:3px; --tr-4:4px; --tr-6:6px;

  /* ---- superfícies ----------------------------------------------------------
     ERAM AZUIS ("asfalto noturno"), e isso era o desvio nº 1 do BUG-05. Medido, não
     achado: `python3 tools/eval/ref-ui.py` mede as 9 telas de referência e o consenso
     dá fundo #141513 (L* 6,6 · C* 1,2 · h 127°) e painel #38342e (L* 22,0 · C* 4,3 ·
     h 85°). Rodando a MESMA medição sobre capturas do jogo (mesmo recorte 512×341) o
     fundo saía #131516 — L* 6,5 e C* 1,1 batendo, e h *260,7°*. Ou seja: claridade e
     saturação já estavam certas, **só o matiz estava do outro lado da roda**.
     Correção com L* CONSTANTE (contraste é orçamento da UI1, não desta linha) e matiz
     levado para ~84°, com o croma de cada papel copiado do papel equivalente medido:
        --bg-900 #05080b L* 2,1 C* 1,5 h 256  ->  #090704 L* 2,0 C* 1,3 h 85
        --bg-800 #0a1116 L* 4,7 C* 4,0 h 254  ->  #141008 L* 4,8 C* 4,0 h 86
        --bg-700 #101a21 L* 8,6 C* 6,6 h 251  ->  #1c1812 L* 8,5 C* 4,6 h 81
        --bg-600 #16242d L*13,4 C* 8,4 h 249  ->  #26221b L*13,4 C* 5,4 h 86
        --bg-500 #1e323d L*19,6 C*10,4 h 245  ->  #342f27 L*19,7 C* 6,0 h 84

     O `-rgb` NÃO É DUPLICAÇÃO — É A CURA DA CAUSA RAIZ. O motivo de este bug ter
     sobrevivido tanto tempo está escrito no KNOWN-BUGS.md: "metade dos scrims do HUD é
     `rgba(5,8,11,…)` LITERAL no CSS" — 79 ocorrências neste arquivo, nenhuma via token.
     Trocar só o token deixaria a tela BICOLOR. Agora o token é DERIVADO do triplo, e
     todo scrim consome `rgba(var(--bg-900-rgb),α)`: existe UM lugar onde a cor mora, e
     divergir de novo exige apagar o var(). */
  --bg-900-rgb:9,7,4;      --bg-800-rgb:20,16,8;    --bg-700-rgb:28,24,18;
  --bg-600-rgb:38,34,27;   --bg-500-rgb:52,47,39;
  --bg-900:rgb(var(--bg-900-rgb)); --bg-800:rgb(var(--bg-800-rgb)); --bg-700:rgb(var(--bg-700-rgb));
  --bg-600:rgb(var(--bg-600-rgb)); --bg-500:rgb(var(--bg-500-rgb));
  --line:#34302b; --line-2:#504c44;

  /* ---- tinta: contraste medido sobre --bg-800 (AA = 4.5:1) ----------------------
     NEUTRALIZADA nesta rodada, e o motivo é MEDIÇÃO, não gosto. As 9 telas de referência
     do dono foram medidas em CIELAB (tools/eval/ref-ui.py -> tools/eval/ref_ui.json):
     a tinta delas é NEUTRA — tinta alta C* 1,5 · tinta média C* 1,1. A daqui era ciano:
       --ink-100 C* 3,0 h 220°   --ink-200 C* 6,1 h 224°
       --ink-300 C* 8,6 h 230°   --ink-400 C* 8,8 h 227°
     Um C* de 8,6 numa cor de RÓTULO é o que produz o "tudo azulado" que separa esta UI
     das telas do dono à primeira vista. Cada valor abaixo mantém o L* ANTIGO com precisão
     de 0,2 (então TODA razão de contraste da UI1 fica igual — conferido) e leva croma e
     matiz pro alvo medido. Antes -> depois:
       --ink-100 #e9f1f3 -> #f0f0ed   L* 94,6->94,7  C* 3,0->1,5  h 220->110
       --ink-200 #c6d6db -> #d3d3d1   L* 84,6->84,5  C* 6,1->1,1  h 224->110
       --ink-300 #93a8b0 -> #a5a5a3   L* 67,5->67,7  C* 8,6->1,1  h 230->110
       --ink-400 #63787f -> #757573   L* 49,0->49,2  C* 8,8->1,2  h 227->110
       --line    #22333c -> #34302b   L* 20,2->20,1  C* 8,9->3,9  h 242-> 79
       --line-2  #33505d -> #504c44   L* 32,3->32,5  C*13,0->5,4  h 238-> 89
     O portão UI5 (tools/eval/ui-check.mjs) cobra isto daqui pra frente. */
  --ink-100:#f0f0ed;   /* 15.4:1 — números de HUD, títulos */
  --ink-200:#d3d3d1;   /* 10.8:1 — corpo e idle de navegação */
  --ink-300:#a5a5a3;   /*  5.5:1 — rótulos/meta (mínimo AA) */
  --ink-400:#757573;   /*  2.7:1 — SÓ régua/ícone decorativo, nunca texto */

  /* ---- cor = significado (uma função por cor; regra do level design aplicada à UI) ---- */
  --sys:#39d6e0;       /* SISTEMA: foco, rádio, links, radar */
  /* ACENTO. Medido nas 9 telas: núcleo #be9033, L* 62,6 · C* 54,3 · h 81,3°. O daqui
     estava em C* 63,9 · h 73,6° — matiz já batia (Δ 7,7°), croma 18% acima. Ajustado a
     L* CONSTANTE (78,7): #ffb44d -> #f3b958, C* 57,2 · h 78,9°. L* fica porque o contraste
     do âmbar sobre cena clara é assunto da UI1, não da paleta. */
  --am:#f3b958;        /* OBJETIVO e conquista */
  --crit:#ff4d4d;      /* CRÍTICO: vida baixa, pente vazio, você morreu */
  --ok:#46e08a;

  /* ---- identidade BR (sinaleiro / lambe-lambe / caminhão) ---- */
  --br-sinal:#e2402c;  --br-faixa:#b4d92e;  --br-verde:#1faa4d;
  --br-faixa-legacy:#ffc93f;   /* valor pré-redesign, restaurado em html[data-ui="legacy"] */
  /* --br-asfalto e a listra escura do sinaleiro entravam na mesma armadilha do BUG-05:
     eram azuis (#12171a h 245° / #0d1418 h 246°) coladas em cima de superfícies que
     agora são quentes. Reescritas com o MESMO L* e o matiz da família (#191610 L* 7,4). */
  --br-cal:#f2efe6;    --br-asfalto:#191610;
  /* fundo do CTA: era #141810, o único dark que já nascera quente (h 130°). Mantido o L*
     e alinhado ao matiz do âmbar que ele carrega em cima. */
  --cta-bg:#181307;
  --lambe:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,rgba(0,0,0,0) 1px 3px);

  /* ---- times ---- */
  --team-e:#e03232; --team-b:#1faa4d; --team-u:#7b2ff7; --team-c:#e83aa0; --team-f:#ffd23f;

  /* ---- espaçamento (escala de 4) ---- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;

  /* ---- raios/cortes: a UI é chanfrada, não arredondada ---- */
  --r-0:0; --r-1:2px; --r-2:4px;
  --cut:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  --cut-sm:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);

  /* ---- sombras e legibilidade sobre cena 3D ---- */
  --sh-1:0 2px 10px rgba(0,0,0,.45);
  --sh-2:0 10px 34px rgba(0,0,0,.6);
  --sh-text:0 1px 3px rgba(0,0,0,.85);
  /* Contorno, não só sombra: um blur de 2px em preto .95 encosta no glifo e vira a
     "cor de fundo" real do texto. Sobre areia do Piscinão (L*~78) ou parede branca do
     praca_poderes a sombra difusa antiga não movia a agulha — o halo colado move. */
  --sh-hud:0 0 2px rgba(0,0,0,.95),0 1px 3px rgba(0,0,0,.9),0 0 10px rgba(0,0,0,.55);
  --scrim:rgba(var(--bg-900-rgb),.82);

  /* ---- estados ---- */
  --focus-ring:2px solid var(--sys); --focus-off:2px;
  --op-disabled:.38;

  /* ---- movimento: nada acima de 180ms na UI ---- */
  --t-fast:90ms; --t:140ms; --t-slow:180ms; --ease:cubic-bezier(.2,.8,.2,1);

  /* ---- mira: fora do sistema de cor, configurável em CONFIGURAÇÕES ----
     PADRÃO = CIANO, não branco. Medição na janela 44×42 px em volta da mira:
     branco #e9f1f3 no praca_poderes (parede branca) deu 1,28:1 — a mira SOME. O ciano
     é o único matiz que nenhuma superfície dos 4 mapas ocupa (concreto, areia,
     ferrugem, asfalto, céu), então ele não compete com o cenário em NENHUM deles.
     O contorno preto (abaixo) cobre o caso oposto, fundo escuro. */
  --xhair:#4fe8e0;

  /* ---- aliases legados (regras antigas e estilos inline do JS ainda consomem) ---- */
  --vitoria:#49a846;   /* VITÓRIA — pixel medido em references/telas/09_resultado_partida.png */
  --red:var(--team-e); --red-dark:#8f1d1d; --green:var(--team-b); --yellow:var(--br-faixa);
  --purple:var(--team-u); --dark:var(--bg-900); --panel:rgba(var(--bg-800-rgb),.94);
  --hud:var(--ink-100); --cs:var(--sys);
  --ink1:var(--ink-100); --ink2:var(--ink-200); --ink3:var(--ink-300);
  --line-hi:var(--sys);
  --font:'Rajdhani',"Arial Narrow",Arial,sans-serif;
  --mono:'ST Mono',Consolas,monospace;
}

/* =========================================================================
   REDESIGN AAA — tokens novos, adicionados sem tocar nos de cima.
   Por quê: a paleta acima veio de medição pixel a pixel sobre referência
   própria (ref-ui.py) e alimenta o gate UI5; reescrevê-la quebraria essa
   calibração. O redesign entra como uma CAMADA NOVA de tokens + classes
   utilitárias (.aaa-*), consumida tela por tela. O rollback de cada tela
   entra em `html[data-ui="legacy"]` conforme cada fase é aplicada.
   ========================================================================= */
:root{
  --aaa-font-display:'Bebas Neue',var(--font);
  --aaa-font-body:'Barlow Condensed',var(--font);
  --aaa-lime:#b4d92e; --aaa-lime-light:#cfe84a; --aaa-lime-ink:#131313;
  --aaa-glow:0 0 28px rgba(180,217,46,.45);
  --aaa-panel:#131418; --aaa-panel-2:#101014;
  --aaa-cut-lg:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%);
  --aaa-cut-sm:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);
  --aaa-skew:skewX(-8deg); --aaa-unskew:skewX(8deg);
}
/* --br-faixa é o token único que carrega a marca em ~70 lugares (HUD, scoreboard,
   pause, settings, splash, char-select) — por isso o redesign entra AQUI, na raiz,
   em vez de reescrever cada regra: uma troca de token, o jogo inteiro muda de cor. */
html[data-ui="legacy"]{--br-faixa:var(--br-faixa-legacy)}
.aaa-kicker{
  font:600 var(--fs-100)/1 var(--aaa-font-body);letter-spacing:var(--tr-4);
  text-transform:uppercase;color:var(--ink-300)
}
.aaa-cta{
  display:inline-flex;transform:var(--aaa-skew);
  background:linear-gradient(180deg,var(--aaa-lime-light),var(--aaa-lime));
  clip-path:var(--aaa-cut-sm);border:0;cursor:pointer;
  transition:box-shadow var(--t) var(--ease)
}
.aaa-cta:hover,.aaa-cta:focus-visible{box-shadow:var(--aaa-glow)}
/* O afundar de 1px do :active mora em `:where(.btn,.cs-item,…):active` lá embaixo
   (style.css:234). `:where()` não soma especificidade, então aquela regra vale
   (0,1,0) — EMPATE com `.aaa-cta`, e ela vence por vir depois. No primeiro botão
   que tiver as duas classes, `transform:translateY(1px)` substituiria o skew e o
   CTA desentortaria ao ser pressionado. Reescrever os dois juntos, em (0,2,0). */
.aaa-cta:active{transform:var(--aaa-skew) translateY(1px)}
.aaa-cta>*{
  display:inline-block;transform:var(--aaa-unskew);
  /* 400 e não 700: Bebas Neue só existe em Regular (um único @font-face, linha 6).
     Pedir 700 não deixa mais forte — faz o browser ENGROSSAR o contorno sozinho, e
     o borrão aparece justamente no tamanho grande, que é onde esta fonte trabalha. */
  font:400 var(--fs-500)/1 var(--aaa-font-display);letter-spacing:var(--tr-3);
  text-transform:uppercase;color:var(--aaa-lime-ink);padding:14px 28px
}
.aaa-card-cut{clip-path:var(--aaa-cut-sm);border-radius:0}

/* ---- submenu de modos (JOGAR ▸ ABATE / CAPTURE A BANDEIRA) ----
   Recuo de 14px + filete à esquerda: o submenu tem de ler como SEGUNDO NÍVEL sem
   repetir a placa do acento, que é reservada ao item ativo da lista principal. */
/* `.cs-menu` na frente de tudo aqui é PROPOSITAL, não estilo: o bloco `.cs-item` /
   `.cs-tick` mora ~1200 linhas ABAIXO deste ponto do arquivo, então com a mesma
   especificidade quem ganha é ele. Subir para (0,3,1) faz a regra valer sem
   depender da ordem — e sem ter de espalhar o redesign no meio do CSS antigo. */
.cs-menu .cs-sub{display:flex;flex-direction:column;margin:2px 0 2px 14px;
  border-left:1px solid rgba(236,235,230,.14)}
.cs-menu .cs-sub[hidden]{display:none}
.cs-menu .cs-sub-item{font-size:var(--fs-300);padding-top:8px;padding-bottom:8px;opacity:.92}
.cs-menu .cs-sub-item:hover,.cs-menu .cs-sub-item:focus-visible{opacity:1}
/* O ▸ do JOGAR gira quando abre — é o único aviso de que ali tem mais coisa. */
.cs-menu .cs-item.is-open .cs-tick{transform:rotate(90deg);width:22px;opacity:1;margin-right:6px}

/* ---- chips de link do topo-direito (tela 01 do redesign) ----
   z-index 4 porque a coluna da esquerda e o setup vivem em 3; sem isto os chips
   somem atrás do painel quando o setup abre. */
.aaa-links{position:absolute;top:20px;right:24px;display:flex;gap:8px;z-index:4}
.aaa-links a{
  border:1px solid rgba(236,235,230,.16);background:rgba(10,10,12,.55);
  padding:7px 14px;cursor:pointer;color:var(--ink-300);text-decoration:none;
  font:600 12px/1 var(--aaa-font-body);letter-spacing:2px;text-transform:uppercase;
  transition:border-color var(--t) var(--ease),color var(--t) var(--ease)}
.aaa-links a:hover,.aaa-links a:focus-visible{border-color:var(--aaa-lime);color:var(--ink-100)}
.aaa-links a span{opacity:.6;margin-left:2px}
/* Numa tela baixa os chips brigam com o topo do wallpaper; abaixo de 900px de
   largura eles saem — os mesmos três links seguem no rodapé, então nada se perde. */
@media (max-width:900px){.aaa-links{display:none}}

/* ---- barra inferior do menu (tela 01 do redesign) ----
   Tudo aqui é escrito como `.aaa-bottombar X` (0,2,0) de propósito: `.player-plate`
   já tem bloco próprio ~1200 linhas abaixo, e com a mesma especificidade venceria
   pela ordem. Mesmo motivo do bloco do `.cs-menu` acima. */
/* NO FLUXO, e não `position:absolute` como no protótipo. A `.cs-left` é absoluta,
   ancorada embaixo e de altura automática: com a barra fora do fluxo ela caía DENTRO
   do intervalo da lista (medido: coluna 498→737, barra 643→709) e cobria COMO JOGAR
   e CONFIGURAÇÕES. No fluxo, a coluna cresce para cima sozinha e a barra assenta
   embaixo da lista — sem número mágico para desencontrar quando a lista mudar. */
.aaa-bottombar{display:flex;gap:12px;align-items:stretch;margin-top:18px;z-index:4}
#menu-bottombar .aaa-profile{
  display:flex;align-items:center;gap:12px;background:rgba(13,14,17,.85);
  border:1px solid var(--line);padding:10px 16px;cursor:pointer;border-radius:0;
  width:auto;text-align:left;transition:border-color var(--t) var(--ease)}
#menu-bottombar .aaa-profile:hover,#menu-bottombar .aaa-profile:focus-visible{border-color:var(--aaa-lime)}
#menu-bottombar .pp-avatar{
  width:44px;height:44px;flex:0 0 44px;border:1px solid var(--aaa-lime);border-radius:0;
  background:var(--aaa-panel-2);display:flex;align-items:center;justify-content:center;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  font:700 15px/1 var(--aaa-font-body);letter-spacing:1px;color:var(--ink-100)}
#menu-bottombar .pp-info{display:flex;flex-direction:column;gap:1px;align-items:flex-start}
#menu-bottombar .pp-nick{font:700 16px/1.1 var(--aaa-font-body);letter-spacing:2px;color:var(--ink-100)}
#menu-bottombar .pp-sub{font:600 11px/1.1 var(--font);color:var(--ink-300);letter-spacing:.5px}

#menu-bottombar .aaa-dd{
  display:flex;flex-direction:column;justify-content:center;gap:2px;
  background:rgba(13,14,17,.85);border:1px solid var(--line);padding:8px 16px;
  cursor:pointer;border-radius:0;text-align:left;
  transition:border-color var(--t) var(--ease)}
#menu-bottombar .aaa-dd:hover,#menu-bottombar .aaa-dd:focus-visible{border-color:var(--aaa-lime)}
#menu-bottombar .aaa-dd .label{font:700 10px/1 var(--aaa-font-body);letter-spacing:3px;color:var(--ink-300)}
/* nowrap é obrigatório: "AWP + PISTOLA + FACA" quebrava em duas linhas e
   desalinhava a altura dos três blocos da barra. */
#menu-bottombar .aaa-dd .value{
  white-space:nowrap;font:600 14px/1.2 var(--aaa-font-body);letter-spacing:1px;color:var(--ink-100)}
#menu-bottombar .aaa-dd .caret{color:var(--ink-300);font-size:10px;margin-left:4px}
/* Numa tela estreita a barra encavala a lista de menu; some e nada se perde,
   porque as mesmas escolhas continuam dentro do setup. */
@media (max-width:900px),(max-height:620px){.aaa-bottombar{display:none}}

#boot-splash .splash-frame,#boot-splash .splash-ver{position:relative;z-index:1}

/* ---- DICA do carregamento (tela 00B) ----
   min-height fixa: sem ela, dicas de comprimentos diferentes mudam a altura da
   caixa a cada 5 s e a barra de progresso "pula" — o defeito clássico de texto
   rotativo em layout de fluxo. */
.lo-tip{display:flex;align-items:baseline;gap:10px;margin-top:var(--s-3);
  min-height:34px;max-width:520px}
.lo-tip b{flex:0 0 auto;font:700 10px/1 var(--aaa-font-body);letter-spacing:3px;
  color:var(--aaa-lime)}
.lo-tip span{font:500 13px/1.35 var(--aaa-font-body);letter-spacing:.4px;color:var(--ink-200)}

/* Botão de FEEDBACK no rodapé: <button> tem UA style próprio, então precisa ser
   zerado para assentar na fileira de <a> sem pular um pixel de baseline. */
.menu-footer .mf-link{appearance:none;background:none;border:0;padding:0;cursor:pointer;
  font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit}
.aaa-scanlines{
  position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent 0 3px,#000 3px 4px);
  opacity:.05;mix-blend-mode:overlay
}
*{margin:0;padding:0;box-sizing:border-box;user-select:none}
html,body{width:100%;height:100%;overflow:hidden;background:var(--dark)}
body{font-family:var(--font);font-weight:600;color:var(--ink1)}
.hidden{display:none!important}

/* ---------- ESTADOS GLOBAIS (antes o jogo inteiro era inoperável no teclado) ----------
   Um FPS de PC navega 100% no teclado; sem anel de foco não dá pra saber onde se está. */
:where(button,a,select,input,textarea,[tabindex]):focus-visible{
  outline:var(--focus-ring);outline-offset:var(--focus-off);border-radius:0}
:where(button,a,select,input,textarea,[tabindex]):focus:not(:focus-visible){outline:none}
:where(.btn,.cs-item,.map-arrow,.char-row,.dd-item,.corner-btn):active{transform:translateY(1px)}
:where(button,.btn)[disabled]{opacity:var(--op-disabled);filter:saturate(.3);cursor:not-allowed;pointer-events:none}
/* aria-disabled = desabilitado VISUAL mas ainda clicável de propósito: o clique leva o
   foco pro campo que falta (melhor que um botão morto que não explica nada). */
:where(button,.btn)[aria-disabled="true"]{opacity:var(--op-disabled);filter:saturate(.3);cursor:not-allowed}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

#game-container,#game-container canvas{position:fixed;inset:0;width:100%;height:100%}

/* ---------- screens ---------- */
.screen{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;
  background:linear-gradient(180deg,var(--bg-800),var(--bg-900))}
.scanlines{display:none}   /* morto na v2 */
.screen-title{font-family:var(--aaa-font-display);font-size:var(--fs-700);font-weight:700;letter-spacing:var(--tr-6);color:var(--ink-100);
  text-transform:uppercase;position:relative;padding-bottom:var(--s-3)}
html[data-ui="legacy"] .screen-title{font-family:var(--font)}
.screen-title::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:120px;height:3px;background:linear-gradient(90deg,var(--br-sinal),var(--br-faixa))}   /* régua de tinta: assinatura da marca em toda tela de fluxo */
.panel{background:var(--panel);border:1px solid var(--line);padding:var(--s-6) var(--s-7);clip-path:var(--cut);
  box-shadow:var(--sh-2);position:relative}
.center-panel{display:flex;flex-direction:column;gap:18px;align-items:center;max-width:640px;text-align:center}
.big{font-size:18px}
.footnote{position:absolute;bottom:18px;font-size:12px;font-weight:600;letter-spacing:2px;color:var(--ink3)}

#logo-canvas{width:min(560px,88vw);height:auto}
#main-menu{justify-content:flex-start;padding-top:7vh;gap:18px}
.corner-links{position:absolute;top:18px;right:18px;display:flex;gap:8px;z-index:2}
.corner-btn{font-family:var(--mono);font-size:11px;letter-spacing:1px;text-decoration:none;
  color:var(--cs);background:rgba(var(--bg-800-rgb),.8);border:1px solid var(--line);padding:7px 11px;clip-path:var(--cut-sm)}
.corner-btn:hover,.corner-btn:focus-visible{border-color:var(--cs);color:#fff}

/* ---------- buttons & inputs ---------- */
.btn{font-family:var(--font);font-weight:700;font-size:var(--fs-400);letter-spacing:var(--tr-3);color:var(--ink-100);cursor:pointer;
  background:var(--bg-700);border:1px solid var(--line);clip-path:var(--cut);
  padding:var(--s-3) var(--s-6);transition:background var(--t) var(--ease),border-color var(--t) var(--ease),color var(--t) var(--ease);
  text-transform:uppercase}
/* Todo estado de hover ganha o gêmeo :focus-visible. Um anel de foco sozinho diz "estou
   aqui", mas não repete a MESMA leitura do mouse — quem navega no teclado ficava vendo
   uma UI diferente da que vê quem usa mouse. */
.btn:hover,.btn:focus-visible{background:var(--bg-600);border-color:var(--sys);color:#fff}
/* CTA PREENCHIDO — o desvio que valia pra TODAS as nove telas de referência, e não só
   pra 09. Medido em `references/telas/`: o botão principal é SÓLIDO em âmbar com texto
   ESCURO (preenchimento rgb(208,157,27) / texto rgb(46,36,11) em 09_resultado_partida.png),
   e o mesmo bloco cheio reaparece em JOGAR (01), USAR PERSONAGEM (03), CONTINUAR (04),
   CONTINUAR (06) e SALVAR (07). Só o SECUNDÁRIO é de contorno.
   Na rodada passada só a 09 recebeu (via `.btn-cta`); aqui `.btn-big` entra na MESMA regra
   em vez de ganhar uma cópia — existe UM lugar onde "CTA preenchido" mora, então menu e
   pausa não podem mais divergir do resultado. As razões de contraste são as que a UI1 já
   mediu pro `.btn-cta`, porque são literalmente as mesmas duas cores. */
.btn-big{font-size:var(--fs-600);padding:var(--s-4) var(--s-8);font-family:var(--aaa-font-display);letter-spacing:var(--tr-4)}
.btn-big,.btn-cta{background:linear-gradient(180deg,var(--aaa-lime-light),var(--aaa-lime));border-color:var(--aaa-lime);color:var(--aaa-lime-ink)}
.btn-big:hover,.btn-big:focus-visible,
.btn-cta:hover,.btn-cta:focus-visible{background:var(--aaa-lime-light);border-color:var(--aaa-lime-light);color:var(--aaa-lime-ink);box-shadow:var(--aaa-glow)}
html[data-ui="legacy"] .btn-big{font-family:var(--font);letter-spacing:var(--tr-3)}
html[data-ui="legacy"] .btn-big,html[data-ui="legacy"] .btn-cta{background:var(--br-faixa);border-color:var(--br-faixa);color:var(--bg-900)}
html[data-ui="legacy"] .btn-big:hover,html[data-ui="legacy"] .btn-big:focus-visible,
html[data-ui="legacy"] .btn-cta:hover,html[data-ui="legacy"] .btn-cta:focus-visible{background:var(--am);border-color:var(--am);color:var(--bg-900);box-shadow:none}
.btn-back{position:absolute;top:26px;left:26px;font-size:13px;padding:9px 20px;z-index:5}
.menu-buttons{display:flex;flex-direction:column;gap:16px;align-items:center;z-index:1;width:min(760px,95vw)}
.profile-card{width:100%;background:var(--panel);border:1px solid var(--line);clip-path:var(--cut);
  padding:var(--s-5) var(--s-5);display:flex;flex-direction:column;gap:var(--s-4);position:relative;box-shadow:var(--sh-2)}
.pc-title{font-family:var(--font);font-weight:700;font-size:var(--fs-100);letter-spacing:var(--tr-3);color:var(--ink-300);
  border-bottom:1px solid var(--line);padding-bottom:var(--s-2);text-transform:uppercase;
  display:flex;align-items:center;gap:var(--s-2)}
.pc-title::before{content:"";width:3px;height:12px;background:var(--am);flex:0 0 auto}   /* marcador em vez do "▚" tipográfico */
.pc-row{display:grid;grid-template-columns:2fr 4fr;gap:10px}
/* .pc-cols/.pc-col saíram junto com as duas colunas do setup: perfil e partida agora são
   PASSOS separados (ver bloco "PASSOS DO SETUP"), não duas metades da mesma tela. */
#social-list{display:flex;flex-direction:column;gap:10px}
.social-item{display:grid;grid-template-columns:2fr 3fr auto;gap:8px;align-items:center}
.social-item select,.social-item input{font-family:var(--mono);font-size:13px;letter-spacing:1px;
  background:var(--bg-800);border:1px solid var(--line);color:var(--cs);padding:9px 10px;outline:none;width:100%}
.social-item input.invalid{border-color:var(--red)!important;animation:shake .3s}
.social-del{background:transparent;border:1px solid var(--line);color:var(--ink3);cursor:pointer;width:34px;height:34px;font-size:13px}
.social-del:hover,.social-del:focus-visible{border-color:var(--red);color:var(--red)}
#nick-input,#social-input,#social-net{font-family:var(--mono);font-size:var(--fs-300);letter-spacing:var(--tr-1);text-align:center;
  background:var(--bg-800);border:1px solid var(--line);color:var(--ink-100);padding:10px 12px;outline:none;width:100%;
  transition:border-color var(--t) var(--ease)}
#nick-input:hover,#social-input:hover{border-color:var(--line-2)}
#nick-input::placeholder{color:var(--ink-400)}
#social-net{font-size:13px;cursor:pointer}
#social-input{font-size:13px}
#social-input:disabled{opacity:.35;cursor:not-allowed}
#nick-input.invalid,#social-input.invalid{border-color:var(--red)!important;animation:shake .3s}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
#social-preview{font-size:11px;color:var(--ink3);font-family:var(--mono);min-height:14px;text-align:center}
#avatar-row{display:flex;flex-direction:column;gap:6px;align-items:center}
.side-actions{position:absolute;left:22px;top:38%;display:flex;flex-direction:column;gap:8px;z-index:2}
.btn-side{font-size:12px;padding:8px 14px;letter-spacing:1px;min-width:120px;text-align:left}
/* dropdown custom */
.dd{position:relative;width:100%}
/* min-height compartilhado: o ícone de ARMAS ("TODAS" = dois renders empilhados, ~27px)
   deixava o .dd-btn de armas mais alto que o de bots (texto só). Piso igual pros dois. */
.dd-btn{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:47px;cursor:pointer;
  font-family:var(--mono);font-size:var(--fs-200);letter-spacing:var(--tr-1);
  background:var(--bg-800);border:1px solid var(--line);color:var(--ink-100);padding:10px 12px;outline:none;
  transition:border-color var(--t) var(--ease)}
.dd-btn:hover{border-color:var(--line-2)}
.dd-btn.open{border-color:var(--sys)}
.dd-arrow{font-size:var(--fs-100);color:var(--ink-300)}
.dd-list{position:absolute;left:0;right:0;z-index:30;background:var(--bg-700);border:1px solid var(--line-2);
  overflow:hidden;top:calc(100% + 4px);box-shadow:var(--sh-1)}
#wpn-dd .dd-list,#bots-dd .dd-list{top:auto;bottom:calc(100% + 4px)}   /* baixo na tela: abre pra cima */
.dd-item{display:flex;align-items:center;gap:10px;width:100%;cursor:pointer;text-align:left;
  font-family:var(--mono);font-size:var(--fs-200);letter-spacing:var(--tr-1);color:var(--ink-200);
  background:transparent;border:0;padding:10px 12px;transition:background var(--t) var(--ease),color var(--t) var(--ease)}
.dd-item:hover,.dd-item:focus-visible{background:var(--bg-600);color:#fff}
.dd-item svg,.dd-cur svg{flex:0 0 auto}
.dd-cur{display:flex;align-items:center;gap:10px}
.map-label{display:flex;flex-direction:column;gap:var(--s-2);font-size:var(--fs-100);font-weight:700;
  letter-spacing:var(--tr-2);color:var(--ink-300);text-transform:uppercase}
#map-select{font-family:var(--mono);font-size:14px;letter-spacing:1px;text-align:center;
  background:var(--bg-800);border:1px solid var(--line);color:var(--cs);padding:10px 12px;outline:none;cursor:pointer;width:100%}
.btn-ghost{font-family:var(--mono);font-size:12px;letter-spacing:1px;cursor:pointer;width:100%;
  background:transparent;border:1px solid var(--line);color:var(--ink3);padding:10px}
.btn-ghost:hover,.btn-ghost:focus-visible{border-color:var(--cs);color:var(--cs)}
#avatar-note{font-size:12px;color:var(--cs);min-height:13px}
.menu-secondary{display:flex;gap:10px;width:100%}
.menu-secondary .btn{flex:1;padding:10px 8px;font-size:14px;letter-spacing:1.5px}
/* preenchimento/hover vêm do `.btn-big`: aqui fica só a métrica de coluna e o sticky */
#btn-jogar{font-size:var(--fs-600);padding:15px;letter-spacing:5px;width:100%;position:sticky;bottom:6px;z-index:5;
  transition:background var(--t) var(--ease),color var(--t) var(--ease),opacity var(--t) var(--ease)}
/* Sem nick, JOGAR é ESTADO desabilitado — não um shake depois do clique. */
#btn-jogar[aria-disabled="true"]{opacity:var(--op-disabled);filter:saturate(.25);cursor:not-allowed}
#btn-jogar[aria-disabled="true"]:hover{background:var(--aaa-lime);color:var(--aaa-lime-ink)}
html[data-ui="legacy"] #btn-jogar[aria-disabled="true"]:hover{background:var(--br-faixa);color:var(--bg-900)}
#hud-actions{position:absolute;top:36px;right:48px;display:flex;gap:var(--s-2);z-index:25}
#hud-actions button{width:32px;height:32px;border:1px solid var(--line);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:rgba(var(--bg-900-rgb),.72);color:var(--ink-300);font-size:var(--fs-400);pointer-events:auto;clip-path:var(--cut-sm);
  transition:color var(--t) var(--ease),border-color var(--t) var(--ease)}
#hud-actions button:hover,#hud-actions button:focus-visible{border-color:var(--sys);color:var(--sys)}
.set-row input[type=checkbox]{width:18px;height:18px;accent-color:var(--yellow)}
.rank-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 26px;font-family:var(--mono);font-size:14px;color:var(--ink2)}
.rank-stats b{color:var(--yellow);font-size:26px;display:block;text-align:center}
.rank-note{font-size:13px;color:var(--ink3);line-height:1.5}
/* painel FEEDBACK (substituiu MAPA no menu, 07/08) — mesmos tokens do nick-input */
.fb-note{font-size:13px;color:var(--ink3);line-height:1.5}
#fb-msg,#fb-email{font-family:var(--mono);font-size:var(--fs-300);letter-spacing:var(--tr-1);
  background:var(--bg-800);border:1px solid var(--line);color:var(--ink-100);padding:10px 12px;
  outline:none;width:100%;transition:border-color var(--t) var(--ease)}
#fb-msg{resize:vertical;min-height:110px;text-align:left}
#fb-email{text-align:center}
#fb-msg:hover,#fb-email:hover{border-color:var(--line-2)}
#fb-msg::placeholder,#fb-email::placeholder{color:var(--ink-400)}
#fb-msg.invalid,#fb-email.invalid{border-color:var(--red)!important;animation:shake .3s}
.fb-consent{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink2);
  cursor:pointer;text-align:left}
.fb-consent input{width:18px;height:18px;flex:0 0 auto;accent-color:var(--yellow)}
.fb-status{font-family:var(--mono);font-size:13px;color:var(--ink2);min-height:1.2em}
.fb-status.erro{color:var(--red)}
#rank-global{width:100%;border-top:1px solid var(--line);padding-top:12px}
#rank-global h3{font-size:14px;letter-spacing:2px;color:var(--cs);margin-bottom:8px}
#rank-global table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12px;color:var(--ink2)}
#rank-global td,#rank-global th{padding:3px 6px;text-align:left}
#rank-global th{color:var(--ink3);font-size:10px;letter-spacing:1px}
#rank-global tr.me td{color:var(--yellow)}
#rank-global .rg-links{margin-top:8px;font-size:12px;display:flex;gap:16px;justify-content:center}
#rank-global .rg-off{color:var(--ink3);font-size:12px}
#auth-row{grid-column:1/-1;display:flex;gap:8px;justify-content:center;align-items:center;min-height:30px}
#auth-row .auth-btn{width:34px;height:34px;border:1px solid var(--line);background:var(--bg-800);color:var(--cs);font-weight:bold;font-size:14px;cursor:pointer}
#auth-row .auth-btn:hover{border-color:var(--cs)}
#auth-row .auth-chip{display:flex;align-items:center;gap:8px;color:var(--ink2);font-size:12px}
#auth-row .auth-chip img{width:26px;height:26px;border-radius:0;border:1px solid var(--line)}
#auth-row .auth-chip button{background:none;border:1px solid var(--line);color:var(--ink3);cursor:pointer;font-size:11px;padding:2px 8px}

/* ---------- cabeçalho comum das telas de fluxo (lado / personagem) ----------
   Eyebrow + título + dica numa peça só: o jogador tem que saber EM QUE PASSO está sem
   ler o conteúdo. Mesma família do .cs-setup-head do menu — nenhum estilo novo. */
.ts-head{display:flex;flex-direction:column;align-items:center;gap:var(--s-1);flex:0 0 auto}
.ts-head small{font-family:var(--aaa-font-body);font-weight:600;font-size:var(--fs-100);letter-spacing:var(--tr-4);
  color:var(--am);text-transform:uppercase}
html[data-ui="legacy"] .ts-head small{font-family:var(--mono);font-weight:400;font-size:var(--fs-50)}
.ts-hint{font-size:var(--fs-200);font-weight:500;letter-spacing:var(--tr-tight);color:var(--ink-300);
  max-width:64ch;text-align:center;margin-top:var(--s-1)}

/* ---------- team select ----------
   Cada facção é uma PLACA de cartaz, não um cartão de formulário: arte da facção ao
   fundo, cor própria (--tc) no contorno/rodapé, grito em destaque e o elenco em letra
   miúda embaixo. Duas faces claras = a cor e o slogan dizem quem é quem antes de ler.  */
/* CARTAZ EM PÉ, NÃO FAIXA DEITADA (referência 02_escolha_faccao.png).
   Medido na referência 512×341: cada placa ocupa x≈110px (21,5% da largura) por
   y 100→337 (69% da ALTURA) — proporção ~47:100, um pôster em pé. O jogo tinha
   `aspect-ratio:3/2`, ou seja 250×167 numa tela de 1024 de altura: 16% da altura,
   uma tira deitada. É por isso que a arte entrava cortada — não havia altura pra ela.
   O header também sobe: `justify-content:center` empurrava o título pra 43% da altura
   e espremia as placas contra o rodapé; na referência o título mora em 16-22%. */
#team-select{justify-content:flex-start;gap:10px;padding:22px 28px 36px;overflow:hidden;
  --team-band-h:26px}
/* VOLTAR no alto à DIREITA (referência 02 e 03); só o map-screen leva ele pro rodapé */
#team-select .btn-back,#char-select .btn-back{left:auto;right:26px}
.team-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));
  gap:10px;width:min(1180px,94vw);flex:1 1 auto;min-height:0}
.team-card.faction-excluded{visibility:hidden;pointer-events:none}
/* Altura POR TETO, não por aspect-ratio: a proporção 47:100 da referência é de uma tela
   com QUATRO placas; com cinco a coluna cai pra ~245px e o mesmo aspect esticaria o
   cartão pra 820px (medido: razão 0,30, um espeto). O teto de 620px dá razão ~0,40 e
   mantém a placa na mesma fatia de altura da referência (~74% da tela) sem sobrar
   buraco embaixo. Em 1280×720 o 72vh (518px) é quem manda e ainda cabe. */
.team-card{width:100%;height:100%;max-width:none;min-width:0;min-height:0;
  cursor:pointer;font-family:inherit;color:#fff;
  display:flex;flex-direction:column;align-items:stretch;text-align:left;padding:0;
  position:relative;overflow:hidden;border:1px solid var(--line);clip-path:var(--cut);background:var(--tc-bg);
  transition:transform var(--t-slow) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease)}
/* fundo = degradê da facção e não --bg-800. A arte das cinco facções JÁ EXISTE (ver
   `--art` abaixo), mas o degradê fica: ele é o que pinta a placa enquanto o webp não
   chegou pela rede, e é o fallback se um arquivo sumir do deploy. Custa zero byte. */
/* O elenco e a lista de nomes ficam fora: a referência não tem nem um nem outro, e no
   jogo `.team-chars` desenhava TRÊS caixas 72px vazias por cima da arte (era esse o
   "conteúdo cortado" da captura — miniatura que nunca chegou, moldura que ficou). */
.team-chars,.team-desc{display:none}
/* A arte por time JÁ EXISTE: `/img/team-<facção>.webp`, uma por facção, declarada em
   `--art` mais abaixo. O caminho `/img/teams/<facção>.jpg` que este comentário reservava
   nunca foi usado por ninguém. O fallback continua valendo por construção: se o arquivo
   sumir do deploy, a camada não pinta e o degradê da facção segura a placa — nada de
   ícone de imagem quebrada, nada de buraco preto. */
/* O "apagado" do estado ocioso mora AQUI, na camada de arte — nunca num filter no card
   inteiro. O filter antigo (saturate .86) caía também sobre as miniaturas 3D do elenco e
   descolorir personagem é justamente a queixa nº 4 do dono. */
/* `.team-card>.team-art` e não `.team-art`: a regra genérica `.team-card>*` (logo abaixo)
   empata em especificidade e vem DEPOIS, então ela estava reescrevendo o position pra
   `relative` e a camada de arte virava um <span> vazio de ALTURA ZERO. Medido no
   navegador: artBox = [244, 0]. Era essa a causa raiz de "os cards vêm com conteúdo
   cortado" — a foto da facção nunca chegou a ser desenhada, e o que aparecia era só o
   degradê de fundo com as molduras vazias por cima. */
.team-card>.team-art{display:block;position:absolute;inset:0;z-index:0;background:var(--art) center/cover no-repeat;
  opacity:1;filter:none;transform-origin:center;transition:transform .28s var(--ease)}
.team-card:hover .team-art,.team-card:focus-visible .team-art,
.team-card[aria-pressed="true"] .team-art{transform:scale(1.2)}
/* O `-rgb` de cada facção existe pelo mesmo motivo do --bg-900-rgb documentado no topo:
   o scrim tingido precisa de ALFA, e alfa não sai de um hex guardado em var(). */
/* ARTE POR FACÇÃO — RETRATO 640×1601 (2:5), gerada por `node tools/gen-image.mjs`.
   A placa é uma caixa de ~245×620 (razão 0,39-0,45) e `.team-art` acima usa `cover`. A
   arte anterior era 1536×1024 PAISAGEM com o logotipo do time pintado no meio: no
   `cover` só ~26% da largura cabia, então cada placa mostrava UM personagem e meio
   logotipo em vez do elenco de quatro da referência 02. Por isso o arquivo agora nasce
   na proporção da CAIXA, não na do gerador.
   Duas coisas que a arte nova respeita de propósito, e que precisam continuar valendo
   se alguém regerar: (1) o elenco mora nos 55% de BAIXO — os 45% de cima são só névoa,
   porque é ali que o `.team-card::before` e a `.team-elate` desenham nome e slogan;
   (2) NADA de texto dentro da imagem — o nome da facção é HTML, e texto embutido
   duplicaria o nome na tela. Peso das cinco somadas: 419 KB (eram 12,1 MB em PNG,
   e a dos funkeiros nem existia). */
.team-e{--tc:#ff6b6b;--tc-rgb:255,107,107;--art:url('/img/faccoes/time-e.webp');
  --tc-bg:linear-gradient(165deg,#b52e2e 0%,#7a1a1a 52%,#3d0d0d 100%)}
.team-b{--tc:#7de08f;--tc-rgb:125,224,143;--art:url('/img/faccoes/time-b.webp');
  --tc-bg:linear-gradient(165deg,#1d8f45 0%,#2f7a2a 46%,#7a6412 100%)}
.team-u{--tc:#c79bff;--tc-rgb:199,155,255;--art:url('/img/faccoes/tribos.webp');
  --tc-bg:linear-gradient(165deg,#5f22c2 0%,#8a1f9c 55%,#3d0f52 100%)}
.team-c{--tc:#ff8ad1;--tc-rgb:255,138,209;--art:url('/img/faccoes/palhacos.webp');
  --tc-bg:linear-gradient(165deg,#d81e8c 0%,#7a1fa0 52%,#e0761a 100%)}
.team-f{--tc:#ffd23f;--tc-rgb:255,210,63;--art:url('/img/faccoes/funkeiros.webp');
  --tc-bg:linear-gradient(165deg,#c78a12 0%,#8a5a0d 52%,#3d2a05 100%)}
.team-m{--tc:#9d4edd;--tc-rgb:157,78,221;--art:url('/img/faccoes/mitico.webp');
  --tc-bg:linear-gradient(165deg,#5e35b1 0%,#3d1b6e 52%,#1a0a3d 100%)}
/* CABEÇALHO TINGIDO NA COR DA FACÇÃO (referência 02): o topo de cada placa lava de
   vermelho/amarelo/roxo e morre no meio, e é isso que faz "quem é quem" ser legível
   antes de ler o nome. Sem ele o texto branco caía direto na foto e sumia. */
.team-card::before{content:"";display:block;position:absolute;left:0;right:0;top:0;height:52%;z-index:1;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(var(--tc-rgb),.34) 0%,rgba(var(--tc-rgb),.10) 55%,rgba(var(--tc-rgb),0) 100%),
    linear-gradient(180deg,rgba(var(--bg-900-rgb),.92) 0%,rgba(var(--bg-900-rgb),.62) 52%,rgba(var(--bg-900-rgb),0) 100%)}
.team-card>*{position:relative;z-index:2}
.team-card:hover,.team-card:focus-visible{transform:translateY(-6px);
  box-shadow:var(--sh-2);border-color:var(--tc);outline:none}
/* SELECIONADO EM ÂMBAR, não na cor do time: na referência a placa escolhida (PALHAÇOS)
   tem contorno ÂMBAR, o mesmo de todas as outras telas — seleção é UMA cor no jogo
   inteiro. A cor da facção continua mandando no cabeçalho e no kicker. */
.team-card[aria-pressed="true"]{border-color:var(--br-faixa);
  box-shadow:var(--sh-2),inset 0 0 0 2px var(--br-faixa)}
.team-card[aria-pressed="true"]::after{content:"SEU LADO";position:absolute;top:0;right:0;z-index:3;
  font-family:var(--mono);font-size:var(--fs-50);letter-spacing:var(--tr-2);color:var(--bg-900);
  background:var(--br-faixa);padding:4px var(--s-3)}
.team-card[aria-disabled="true"]{cursor:not-allowed;opacity:1;filter:none}
.team-card[aria-disabled="true"]>.team-art{filter:saturate(.35) brightness(.52)}
.team-card[aria-disabled="true"]:hover{transform:none;box-shadow:none;border-color:var(--line)}
.team-production{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%) rotate(-3deg);z-index:5;
  white-space:nowrap;border:2px solid var(--br-faixa);background:rgba(var(--bg-900-rgb),.88);color:var(--br-faixa);
  padding:5px 8px;font-family:var(--mono);font-weight:800;font-size:11px;letter-spacing:1px}
/* Bloco de leitura no ALTO da placa (referência: kicker → nome → grito, tudo no primeiro
   terço, sobre o degradê tingido; a foto fica com os dois terços de baixo). */
.team-elate{display:flex;flex-direction:column;gap:2px;padding:8px 8px 0}
.team-kicker{font-family:var(--mono);font-size:var(--fs-50);letter-spacing:var(--tr-3);color:var(--tc)}
/* "BOLSONARISTAS" a 32px + tracking 3px estourava a caixa e vazava pro card vizinho —
   o corpo encolhe com a largura disponível e a linha pode quebrar. Com cinco placas em
   pé a coluna caiu pra ~236px, então o teto desce junto: 22px cabe "BOLSONARISTAS". */
.team-name{font-size:clamp(12px,1.12vw,17px);font-weight:700;letter-spacing:var(--tr-1);
  text-transform:uppercase;line-height:var(--lh-tight);text-shadow:var(--sh-text)}
.team-slogan{font-size:11px;font-style:italic;font-weight:500;color:var(--ink-100);
  line-height:var(--lh-snug);text-shadow:var(--sh-text)}
.team-desc{font-size:var(--fs-100);font-weight:600;letter-spacing:var(--tr-tight);color:var(--ink-200);
  line-height:var(--lh-snug);text-shadow:var(--sh-text)}
/* CTA da placa: a referência NÃO tem barra de ação no cartão — o rodapé dela é só a
   tarja escura com o elenco. Mas o texto daqui carrega informação real (diz se você
   está escolhendo o SEU lado ou o ADVERSÁRIO, via data-step), então em vez de apagar
   ele some no repouso e aparece no hover/foco: parada igual à referência, affordance
   preservada. Fica ancorado logo acima da tarja do rodapé. */
.team-cta{position:absolute;left:0;right:0;bottom:var(--team-band-h);z-index:3;margin:0;
  padding:7px var(--s-2);text-align:center;
  font-family:var(--font);font-weight:700;font-size:var(--fs-50);letter-spacing:var(--tr-2);
  text-transform:uppercase;color:var(--bg-900);background:var(--tc);
  opacity:0;transition:opacity var(--t) var(--ease)}
.team-card:hover .team-cta,.team-card:focus-visible .team-cta{opacity:1}
#team-select[data-step="side"] .team-cta::before{content:"ENTRAR NESSE CORO ▸"}
#team-select[data-step="enemy"] .team-cta::before{content:"CHAMAR PRO CORO ▸"}
@media(max-height:820px){.team-name{font-size:clamp(11px,1vw,15px)}}

/* ---------- character select ----------
   O corpo é elástico; a faixa inferior rola horizontalmente sem cortar o último avatar. */
#char-select{justify-content:flex-start;gap:var(--s-4);padding:clamp(56px,7vh,88px) var(--s-5) var(--s-5)}
/* Ficha + preview são as duas únicas colunas. O elenco ocupa uma segunda linha inteira. */
.char-stage{display:grid;grid-template-columns:minmax(280px,360px) minmax(0,1fr);
  --char-thumb:114px;grid-template-rows:minmax(0,1fr) var(--char-thumb);grid-template-areas:"sheet preview" "rail rail";
  gap:var(--s-4) var(--s-5);align-items:stretch;flex:1 1 auto;min-height:0;width:min(1280px,95vw)}
.char-filmstrip{grid-area:rail;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--s-2);min-width:0}
.char-list{display:flex;flex:0 1 auto;flex-direction:row;gap:var(--s-2);min-width:0;width:max-content;
  max-width:calc(100% - 104px);overflow-x:auto;overflow-y:hidden;
  overscroll-behavior:contain;padding-bottom:3px;
  scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.char-list::-webkit-scrollbar{height:6px}
.char-list::-webkit-scrollbar-thumb{background:var(--line-2)}
/* filmstrip: avatar quadrado; o nome fica só pra leitor de tela (a ficha diz quem é).
   A miniatura continua sendo o retrato 128² do main.js — aqui exibido a 76 px. */
.char-row{position:relative;display:block;width:var(--char-thumb);height:var(--char-thumb);flex:0 0 var(--char-thumb);padding:0;cursor:pointer;
  background:rgba(var(--bg-800-rgb),.9);border:1px solid var(--line);clip-path:var(--cut-sm);
  transition:border-color var(--t) var(--ease),transform var(--t) var(--ease)}
.char-row img{width:100%;height:100%;display:block;object-fit:cover}
.char-row span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.char-row:hover,.char-row:focus-visible{border-color:var(--line-2);transform:translateY(-3px)}
/* SELECIONADO: amarelo da faixa (era ciano do sistema — ciano é foco, não escolha) */
.char-row.sel,.char-row[aria-selected="true"]{border-color:var(--br-faixa);box-shadow:inset 0 3px 0 var(--br-faixa)}
.strip-arrow{background:rgba(var(--bg-800-rgb),.9);border:1px solid var(--line);color:var(--ink-300);cursor:pointer;
  flex:0 0 44px;width:44px;height:var(--char-thumb);font-size:24px;line-height:1;padding:0;clip-path:var(--cut-sm);
  transition:color var(--t) var(--ease),border-color var(--t) var(--ease)}
.strip-arrow:hover,.strip-arrow:focus-visible{color:var(--br-faixa);border-color:var(--br-faixa)}
/* A FICHA ABRAÇA O CONTEÚDO (align-self:start) em vez de esticar até o rodapé do palco.
   Esticada, os quatro blocos terminavam na metade e sobravam ~430px de VAZIO DENTRO do
   painel antes do botão — buraco emoldurado, que é a pior versão de espaço em branco.
   Na referência a coluna do meio termina onde o conteúdo termina. O gap sobe pra s-4
   porque agora ele é o que dá o ritmo entre os blocos. */
.char-sheet{grid-area:sheet;align-self:start;max-height:100%;
  display:flex;flex-direction:column;gap:var(--s-4);min-height:0;overflow-y:auto;
  background:rgba(var(--bg-800-rgb),.9);border:1px solid var(--line);padding:var(--s-5);clip-path:var(--cut);
  position:relative;text-align:left;scrollbar-width:thin}
/* nome e raridade EMPILHADOS: na referência o "ÉPICO" cai numa linha própria embaixo do
   "PALHAÇO DO MAL" — lado a lado a pastilha disputava a linha do título e apertava o nome */
.char-info-head{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-2)}
#char-info-name{font-size:var(--fs-600);font-weight:700;letter-spacing:var(--tr-2);color:var(--ink-100);
  text-transform:uppercase;line-height:var(--lh-tight)}
#char-info-blurb{font-size:var(--fs-200);font-weight:500;color:var(--ink-200);line-height:var(--lh-base)}
#char-voice-caption{min-height:1.35em;font-size:var(--fs-100);font-weight:650;color:var(--sys);line-height:1.35;opacity:0;transition:opacity .16s ease}
#char-voice-caption.show{opacity:1}
.char-spec small,.char-attrs-block small{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:var(--fs-50);
  letter-spacing:var(--tr-3);color:var(--ink-300);text-transform:uppercase;margin-bottom:var(--s-1)}
.char-spec small::before,.char-attrs-block small::before{content:"";display:block;flex:0 0 auto;
  width:6px;height:6px;background:var(--aaa-lime);transform:rotate(45deg)}
html[data-ui="legacy"] .char-spec small::before,html[data-ui="legacy"] .char-attrs-block small::before{display:none}
.char-spec b{display:block;font-size:var(--fs-300);font-weight:700;letter-spacing:var(--tr-2);
  color:var(--br-faixa);text-transform:uppercase}
.char-spec p{font-size:var(--fs-100);font-weight:500;color:var(--ink-200);line-height:var(--lh-base);margin-top:2px}
/* "USAR PERSONAGEM" quebrava em DUAS LINHAS: a coluna do meio tem 360px de teto e sobra
   ~280px de conteúdo, e o texto vinha em --fs-600 com tracking de título. Na referência
   é uma linha só. O `nowrap` é o contrato — se o corpo crescer de novo, estoura visível
   em vez de dobrar em silêncio. Preenchimento e cor vêm do `.btn-big`. */
#char-confirm{margin-top:auto;align-self:stretch;white-space:nowrap;
  font-size:var(--fs-400);letter-spacing:var(--tr-2);padding:var(--s-3) var(--s-4)}
/* SEM MOLDURA (referência 03): lá o personagem ocupa o terço direito inteiro, sangrando
   pro fundo da página. No jogo eram DUAS bordas concêntricas — a caixa e o canvas — e o
   boneco ficava pequeno dentro delas, parecendo item de inventário em vez de o retrato
   da tela. Tirando as duas o canvas ganha os 58→72vh e o personagem vira o assunto. */
.char-preview-box{grid-area:preview;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-2);
  min-width:0;min-height:0;position:relative;background:none;border:0;padding:0;overflow:hidden}
/* Canvas fluido: cresce com a janela (a altura aperta primeiro em 3:2). Backing 640². */
#char-preview{flex:0 1 auto;cursor:grab;touch-action:none;
  background:
    radial-gradient(ellipse at 50% 30%,rgba(57,214,224,.10),rgba(0,0,0,0) 62%),
    radial-gradient(ellipse at 50% 100%,rgba(var(--bg-600-rgb),.55),rgba(var(--bg-900-rgb),0) 72%);
  border:0;width:auto;height:min(72vh,calc(100% - 28px));max-width:100%;max-height:calc(100% - 28px);aspect-ratio:1}
#char-preview:active{cursor:grabbing}
#char-preview-static{width:auto;height:min(72vh,calc(100% - 28px));max-width:100%;max-height:calc(100% - 28px);object-fit:contain;object-position:center bottom;
  -webkit-mask-image:radial-gradient(78% 92% at 50% 56%,#000 52%,transparent 96%);
  mask-image:radial-gradient(78% 92% at 50% 56%,#000 52%,transparent 96%)}
/* O loop de vídeo (640×854, do molde) toma o lugar do canvas: mais alto que largo,
   ancorado embaixo como o retrato estático. `.has-video` esconde os dois rivais. */
#char-preview-video{width:auto;max-width:100%;height:min(60vh,calc(100% - 28px));max-height:calc(100% - 28px);aspect-ratio:640/854;object-fit:contain;object-position:center bottom;
  /* fade do preto do estúdio pro wallpaper da tela (pedido do dono, 14/08): as bordas
     do vídeo dissolvem em máscara em vez de cortar em retângulo */
  -webkit-mask-image:radial-gradient(78% 92% at 50% 56%,#000 52%,transparent 96%);
  mask-image:radial-gradient(78% 92% at 50% 56%,#000 52%,transparent 96%)}
.char-preview-box.has-video #char-preview,.char-preview-box.has-video #char-preview-static{display:none}
.pv-hints{display:flex;flex:0 0 auto;min-height:20px;align-items:center;gap:var(--s-5);font-family:var(--mono);font-size:var(--fs-50);
  letter-spacing:var(--tr-2);color:var(--ink-300)}

/* ---------- settings / howto ---------- */
/* LINHA DE AJUSTE (referência 07_configuracoes.png): rótulo à ESQUERDA em letra miúda
   espaçada, controle à DIREITA, cada linha numa faixa própria com respiro generoso — não
   uma lista apertada com um <select> de sistema pendurado no fim. O valor escolhido vem
   em ÂMBAR, que é o que faz a linha ser lida de relance ("ULTRA", "1920x1080", "LIGADO"). */
.set-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,auto);align-items:center;
  gap:var(--s-4);width:100%;
  font-family:var(--font);font-size:var(--fs-200);font-weight:700;letter-spacing:var(--tr-2);
  text-transform:uppercase;color:var(--ink-200);
  padding:var(--s-3) var(--s-3);background:rgba(var(--bg-800-rgb),.55);
  border-bottom:1px solid rgba(255,255,255,.05)}
.set-row:hover{color:var(--ink-100);background:rgba(var(--bg-700-rgb),.7)}
/* linha de deslizador: trilho, botão e o NÚMERO na ponta direita, como na referência */
.set-row:has(input[type=range]){grid-template-columns:minmax(0,1fr) minmax(120px,180px) 46px}
.set-row input[type=range]{width:100%;accent-color:var(--br-faixa)}
.set-row>span{font-family:var(--mono);font-size:var(--fs-100);color:var(--am);text-align:right;letter-spacing:var(--tr-1)}
/* o <select> perde a cara de controle de sistema e vira valor âmbar + seta, como lá.
   A seta é um data-URI inline: nada de arquivo novo e nada de requisição extra. */
.set-row select{appearance:none;-webkit-appearance:none;font-family:var(--mono);
  font-size:var(--fs-100);letter-spacing:var(--tr-1);text-transform:uppercase;
  background:rgba(var(--bg-900-rgb),.55) no-repeat right var(--s-3) center/9px 6px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'%3E%3Cpath fill='%23ffc93f' d='M0 0h9L4.5 6z'/%3E%3C/svg%3E");
  color:var(--am);border:1px solid var(--line);width:100%;
  padding:8px var(--s-6) 8px var(--s-3);cursor:pointer;transition:border-color var(--t) var(--ease)}
.set-row select:hover,.set-row select:focus-visible{border-color:var(--br-faixa)}
.set-row select option{background:var(--bg-800);color:var(--ink-100)}
#set-xhair{font-weight:700}
/* settings com abas (padrão CS2/Valorant): trilha de tabs em cima, um pane por categoria.
   Aba ativa = amarelo da faixa, o MESMO acento do CTA — aba e botão contam a mesma história. */
/* A TELA INTEIRA, não um cartão de 560px boiando no preto (referência 07): lá as abas
   atravessam a largura, os ajustes ocupam a coluna esquerda e uma amostra do jogo mora
   na direita. O painel antigo tinha 560px com UMA linha dentro e ~600px de vazio
   embaixo — a captura mostrava um cartãozinho perdido no meio de uma tela preta. */
.settings-wrap{display:flex;flex-direction:column;gap:var(--s-5);width:min(1120px,94vw);align-items:stretch;text-align:left}
.set-cols{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--s-6);align-items:start}
.set-list{min-width:0}
/* amostra: captura real de mapa do jogo, do mesmo naipe da imagem da referência */
/* 240px e não 320: a aba VÍDEO do jogo tem UMA linha de ajuste (a referência desenha
   sete), então uma amostra alta demais abre um vazio do tamanho dela na coluna da
   esquerda. Aqui a altura da amostra é o que define o fôlego das duas colunas. */
.set-preview{min-height:min(34vh,240px);border:1px solid var(--line);clip-path:var(--cut);
  background:var(--bg-800) url('/img/map-previews/quebrada.jpg') center/cover no-repeat}
/* barra de ação com fio em cima e o CTA à direita, como o rodapé da referência */
.set-actions{display:flex;justify-content:flex-end;gap:var(--s-3);
  padding-top:var(--s-4);border-top:1px solid var(--line)}
@media(max-width:900px){.set-cols{grid-template-columns:minmax(0,1fr)}.set-preview{display:none}}
.set-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line)}
.set-tab{flex:1;font-family:var(--font);font-weight:700;font-size:var(--fs-200);letter-spacing:var(--tr-2);
  color:var(--ink-300);background:transparent;border:0;border-bottom:2px solid transparent;cursor:pointer;
  padding:var(--s-2) var(--s-3);text-transform:uppercase;
  transition:color var(--t) var(--ease),border-color var(--t) var(--ease)}
.set-tab:hover,.set-tab:focus-visible{color:var(--ink-100)}
.set-tab.active{color:var(--br-faixa);border-bottom-color:var(--br-faixa)}
/* gap 2px e não s-4: na referência as faixas de ajuste são vizinhas, quase encostadas —
   o respiro mora DENTRO da faixa (padding), não entre elas. */
.set-pane{display:flex;flex-direction:column;gap:2px;min-height:110px}
.settings-save{align-self:auto}
/* abas à esquerda e não esticadas: com `flex:1` quatro abas ocupavam 1120px e viravam
   quatro botões gigantes; a referência tem seis abas juntinhas alinhadas à esquerda */
.set-tabs{gap:var(--s-2)}
.set-tab{flex:0 0 auto;padding:var(--s-2) var(--s-4)}

#settings-panel{background:rgba(8,8,10,.58);backdrop-filter:blur(7px) brightness(.35);
  font-family:var(--aaa-font-body);padding:0}
html[data-inspect-screen="settings"] #settings-panel{background:linear-gradient(rgba(8,8,10,.72),rgba(8,8,10,.72)),url('/img/map-previews/ferro_velho.jpg') center/cover no-repeat}
#settings-panel .settings-wrap{width:980px;max-width:calc(100vw - 48px);gap:0;padding:0;
  background:rgba(16,17,20,.96);border:1px solid #2a2b31;clip-path:var(--aaa-cut-lg)}
#settings-panel .settings-wrap::before{display:none}
#settings-panel .set-head{display:flex;align-items:center;justify-content:space-between;padding:22px 32px 0}
#settings-panel .set-head h2{margin:0;font:400 34px/1 var(--aaa-font-display);letter-spacing:2px;color:#ecebe6}
#settings-panel .set-close{display:flex;align-items:center;gap:8px;background:none;border:0;color:#5c5d63;
  font:600 12px/1 var(--aaa-font-body);letter-spacing:2px;cursor:pointer}
#settings-panel .set-close kbd{font:700 10px/1 var(--font);border:1px solid #33343b;padding:2px 6px}
#settings-panel .set-tabs{display:flex;gap:28px;border-bottom:1px solid #26272d;padding:8px 32px 0}
#settings-panel .set-tab{flex:0 0 auto;padding:12px 2px;font:600 15px/1 var(--aaa-font-body);letter-spacing:3px;color:#5c5d63}
#settings-panel .set-tab.active{font-weight:700;color:#b4d92e;border-bottom-color:#b4d92e}
#settings-panel .set-cols{display:flex;gap:36px;padding:26px 32px;align-items:flex-start}
#settings-panel .set-list{flex:1;display:flex;flex-direction:column;gap:18px;min-width:0}
#settings-panel .set-row{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;padding:0;
  background:transparent;border:0;color:#c9c9cc;font:600 15px/1.2 var(--aaa-font-body);letter-spacing:2px}
#settings-panel .set-row:hover{background:transparent;color:#ecebe6}
#settings-panel .set-row select{width:218px;min-width:190px;padding:9px 34px 9px 14px;background-color:#0d0e11;
  border:1px solid #2a2b31;color:#b4d92e;font:700 14px/1 var(--aaa-font-body);letter-spacing:2px}
#settings-panel .set-range{display:flex;align-items:center;gap:14px;flex:1;max-width:250px;color:#b4d92e}
#settings-panel .set-range input{appearance:none;width:100%;height:4px;margin:0;background:linear-gradient(90deg,#b4d92e 0 var(--set-pct,50%),#26272d var(--set-pct,50%) 100%);border:0}
#settings-panel .set-range input::-webkit-slider-thumb{appearance:none;width:13px;height:13px;background:#cfe84a;transform:rotate(45deg);border:0;border-radius:0}
#settings-panel .set-range input::-moz-range-thumb{width:13px;height:13px;background:#cfe84a;transform:rotate(45deg);border:0;border-radius:0}
#settings-panel .set-range b{width:36px;text-align:right;color:#b4d92e;font:700 16px/1 var(--font);letter-spacing:0}
#settings-panel .set-toggle{display:flex;border:1px solid #2a2b31;color:#5c5d63}
#settings-panel .set-toggle input{position:absolute;opacity:0;pointer-events:none}
#settings-panel .set-toggle b,#settings-panel .set-toggle i{padding:7px 18px;font:600 12px/1 var(--aaa-font-body);letter-spacing:2px;font-style:normal}
#settings-panel .set-toggle b{background:#b4d92e;color:#131313;font-weight:700}
#settings-panel .set-toggle:has(input:not(:checked)) b{background:transparent;color:#5c5d63;font-weight:600}
#settings-panel .set-toggle:has(input:not(:checked)) i{background:#b4d92e;color:#131313;font-weight:700}
#settings-panel .set-note{margin:0;padding-left:12px;border-left:2px solid #26272d;color:#5c5d63;font-size:13px;line-height:1.5}
#settings-panel .set-preview-wrap{width:360px;flex:0 0 360px;display:flex;flex-direction:column;gap:8px}
#settings-panel .set-preview{width:360px;height:200px;min-height:0;border:1px solid #26272d;clip-path:none;
  background:#101014 url('/img/map-previews/ferro_velho.jpg') center/cover no-repeat}
#settings-panel .set-preview-caption{font:600 11px/1 var(--font);letter-spacing:2px;color:#5c5d63}
#settings-panel[data-active-tab="video"] .set-extra{display:none}
#settings-panel[data-active-tab="audio"] .set-row:not([data-section="audio"]),
#settings-panel[data-active-tab="gameplay"] .set-row:not([data-section="gameplay"]),
#settings-panel[data-active-tab="controls"] .set-row:not([data-section="controls"]){display:none}
#settings-panel:not([data-active-tab="video"]) .set-note{display:none}
#settings-panel .set-actions{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #26272d;padding:18px 32px 22px}
#settings-panel .set-actions>div{display:flex;align-items:center;gap:12px}
#settings-panel .set-secondary{border:1px solid #2a2b31;background:transparent;padding:9px 20px;color:#9a9ba1;
  font:600 13px/1 var(--aaa-font-body);letter-spacing:2px;cursor:pointer}
#settings-panel .set-apply,#settings-panel .set-save{transform:skewX(-8deg);padding:11px 30px;cursor:pointer;border:1px solid #33343b;background:#1a1b20}
#settings-panel .set-save{padding:11px 34px;border:0;background:linear-gradient(180deg,#cfe84a,#b4d92e)}
#settings-panel .set-apply span,#settings-panel .set-save span{display:block;transform:skewX(8deg);font:400 18px/1 var(--aaa-font-display);letter-spacing:2px;color:#ecebe6}
#settings-panel .set-save span{color:#131313}
@media(max-width:900px){#settings-panel .set-preview-wrap{display:none}#settings-panel .set-cols{padding:20px}.set-head{padding-left:20px;padding-right:20px}}

/* ---------- pause ---------- */
/* Fundo translúcido em vez do gradiente opaco de .screen: a partida pausada continua
   visível atrás (o canvas segue renderizando congelado) — o jogador não perde o contexto. */
/* ---------- 06 menu de pausa (referência 06_menu_pausa.png) ----------
   Lá: título ÂMBAR solto sobre o cenário borrado, e embaixo um painel fechado com CINCO
   FILAS coladas ocupando a largura inteira dele — a primeira SÓLIDA em âmbar, as outras
   quatro chapadas. O jogo tinha título branco com régua de tinta embaixo e cinco pílulas
   de contorno espaçadas, que liam como cinco opções de igual peso dentro de uma caixa
   grande demais. */
#pause-menu{background:rgba(var(--bg-900-rgb),.78)}
/* NA PAUSA O HUD RECUA. Na referência 06 não há vida/munição/placar na tela: o assunto
   é o menu. Sem isso a dica "ESC CONTINUAR" (que a referência põe no canto inferior
   esquerdo) caía EM CIMA do bloco de vida, que mora no mesmo canto — texto sobre texto.
   O `:has()` espelha o estado que o main.js já mantém na classe `.hidden`, sem pedir uma
   linha de JS: mesma manobra usada pra separar as colunas de time no placar da tela 08. */
body:has(#pause-menu:not(.hidden)) #hud{opacity:.12;transition:opacity var(--t) var(--ease)}
#pause-menu .screen-title{color:var(--br-faixa);padding-bottom:0}
#pause-menu .screen-title::after{display:none}   /* a referência não tem régua aqui */
#pause-menu .panel::before{display:none}         /* nem a barra de risco no canto */
#pause-menu .panel{padding:var(--s-4)}
.pause-actions{display:flex;flex-direction:column;gap:4px;min-width:min(420px,86vw);text-align:center}
/* FILAS, não pílulas: sem contorno, chapadas, coladas uma na outra. O CONTINUAR fica
   sólido (vem do `.btn-big`) e é o único com peso — é a leitura da referência.
   O `:not(.btn-big)` NÃO É ENFEITE: sem ele esta regra (0,2,0) ganha do `.btn-big`
   (0,1,0) e repinta o fundo do CONTINUAR de escuro SEM mexer na cor do texto, que o
   `.btn-big` deixou escura — botão principal preto no preto. Aconteceu, foi visto na
   captura, está aqui pra não voltar. */
.pause-actions .btn{width:100%}
.pause-actions .btn:not(.btn-big){border-color:transparent;background:rgba(var(--bg-700-rgb),.55)}
.pause-actions .btn:not(.btn-big):hover,
.pause-actions .btn:not(.btn-big):focus-visible{background:rgba(var(--bg-500-rgb),.9);border-color:var(--line-2)}
/* DICA NO CANTO INFERIOR ESQUERDO com a tecla em cápsula, como na referência — era texto
   solto centralizado no rodapé, onde competia com o painel pelo eixo central. */
#pause-menu .footnote{left:min(4vw,42px);bottom:26px;color:var(--ink-300);letter-spacing:var(--tr-2);
  display:flex;align-items:center;gap:var(--s-2)}
#pause-menu .footnote kbd{font-family:var(--mono);font-size:var(--fs-50);letter-spacing:var(--tr-1);
  color:var(--ink-200);background:rgba(var(--bg-700-rgb),.9);border:1px solid var(--line-2);
  padding:3px 8px;clip-path:var(--cut-sm)}
.howto-grid{display:grid;grid-template-columns:auto auto;gap:var(--s-2) var(--s-5);font-size:var(--fs-200);
  font-weight:600;letter-spacing:var(--tr-1);text-align:left;color:var(--ink-200)}
.howto-grid span:nth-child(odd){color:var(--br-faixa);font-family:var(--mono);font-size:var(--fs-100)}
.support-panel{max-width:560px}
.support-choice{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:10px 0}
.support-region{font-size:12px!important;padding:10px 14px!important}
.support-region.active{border-color:var(--yellow);color:var(--yellow)}
.support-primary{display:block;text-decoration:none;text-align:center;margin:12px 0}
.support-note{min-height:34px;color:var(--ink3);font-size:12px;line-height:1.5}

/* ---------- HUD ---------- */
/* MARGENS DO HUD — desvio 2 do BUG-05, medido e não achado. `ref-ui.py` dá, no consenso
   das 9 telas, esq 4,49% / dir 3,12% / base 3,50% da tela. A mesma medição sobre a captura
   do HUD do jogo dava esq 1,17% / dir 0,98% / base 0,00%: o HUD estava COLADO na moldura.
   Traduzido para o enquadramento do dono (3:2, 1536×1024): 69 / 48 / 36 px.

   POR QUE PX E NÃO vw/vh, já que a referência é FRAÇÃO: a UI3 só concede a isenção de
   "elemento de canto" a quem ancora em PX (`emPx` em ui-check.mjs:637 — a convenção do
   gênero: munição e vida no canto, e o viewmodel do CS 1.6 sai pelas duas bordas). Trocar
   por vw faria o bloco de munição virar "flutuante" aos olhos da régua e reprovar por
   invadir a zona da arma — melhoria de layout que acende portão é regressão. */
#hud{position:fixed;inset:0;z-index:20;pointer-events:none;font-family:var(--font);font-weight:600;
  --hud-x:68px;   /* 4,5% de 1536 */
  --hud-xr:48px;  /* 3,1% de 1536 */
  --hud-y:36px}   /* 3,5% de 1024 */
/* HUD SEM CAIXA E SEM SCRIM — pedido do dono: "o placar e as informações embaixo não
   precisam de background, pode ser transparente".

   O QUE ESTAVA AQUI e por que sai: um scrim de canto (dois radial-gradient .84 → 0)
   escurecendo a ZONA do HUD, porque no Piscinão o "100" cai sobre areia clara
   (RGB 214,196,164, o pior fundo dos 4 mapas) e no praca_poderes o relógio cai sobre parede
   branca. Sem ele, medido na época: "100" dava 1,49:1 e o rótulo 1,14:1.

   O QUE SUBSTITUI: contorno no GLIFO em vez de caixa atrás dele — é como todo FPS
   resolve HUD sem moldura. Não é invenção desta rodada: o `--sh-hud` (contorno preto
   de 2px colado no glifo) já era o recurso do resto do HUD, e a UI1 já o CREDITA como
   fundo real do texto (`fundoEfetivo`, ui-check.mjs:389 — "contorno de texto = fundo
   real do glifo"). Os números grandes ganham por cima um `-webkit-text-stroke` com
   `paint-order:stroke fill`, que pinta o traço ATRÁS do preenchimento e dá separação
   óptica sobre areia clara sem engordar o algarismo.

   O QUE CONTINUA COM FUNDO, e não é esquecimento: `#hp-bar`. Barra é OBJETO GRÁFICO, e
   a UI1 não dá crédito de contorno pra objeto gráfico (ui-check.mjs:480 — "o que o olho
   compara é PREENCHIMENTO ×"). Sem trilho próprio, não existe barra.

   O crédito de scrim FOI TIRADO DA RÉGUA JUNTO (`alfaScrim` devolve 0): deixar a régua
   somando um scrim que não existe mais seria medir a favor do código.

   `#pickup-hint` e `#respawn-overlay` MANTÊM fundo próprio: são avisos passageiros, não
   o HUD permanente de que o dono falou. */
/* contorno forte só nos ALGARISMOS grandes — é onde a leitura acontece a 2m da tela */
#hp-num,#ammo,#round-time{paint-order:stroke fill;-webkit-text-stroke:3px rgba(0,0,0,.5)}
#radar{position:absolute;top:16px;left:20px;opacity:.95;
  box-shadow:0 2px 10px rgba(0,0,0,.45)}   /* quadrado com moldura desenhada no canvas (tela 05) */
#radio-log{position:absolute;top:174px;left:20px;font-size:13px;color:var(--cs);text-shadow:var(--sh-hud)}
.radio-line{animation:kfFade 4.2s forwards;margin-bottom:2px}
#radio-menu{position:absolute;top:198px;left:20px;background:rgba(11,17,22,.92);border:1px solid var(--line);padding:10px 16px;min-width:220px}
.radio-title{color:var(--yellow);font-size:12px;letter-spacing:2px;margin-bottom:6px;border-bottom:1px solid var(--line);padding-bottom:4px}
.radio-item{color:var(--cs);font-size:14px;padding:2px 0}
/* Mira: FORA do sistema de cor (não é "sistema", nem "objetivo", nem "crítico").
   CIANO por padrão (ver --xhair), e a cor é escolhida pelo jogador em CONFIGURAÇÕES.
   O gap (--ch) é escrito pelo game.js a cada frame = spread dinâmico real.

   CONTORNO ADAPTATIVO em duas camadas, sem shader e sem ler pixel:
     miolo claro/saturado  -> resolve fundo ESCURO;
     anel preto de 1,5px colado (sem blur) -> resolve fundo CLARO;
     halo preto difuso de 6px -> resolve fundo de MÉDIO tom e ruidoso (mato, sucata).
   Como as três camadas são concêntricas, sempre existe uma aresta de ΔL* alto entre a
   mira e o que estiver atrás dela, qualquer que seja o fundo. Era 1px .85 — o anel fino
   sumia no antialias em 1600×900 e o ganho medido não cobria a parede branca. */
#crosshair{position:absolute;left:50%;top:50%;width:0;height:0;--ch:6px}
#crosshair i{position:absolute;background:var(--xhair);
  box-shadow:0 0 0 1.5px rgba(0,0,0,.92),0 0 6px rgba(0,0,0,.6)}
#crosshair i:nth-child(1){left:-1px;top:calc(-9px - var(--ch));width:2px;height:9px}
#crosshair i:nth-child(2){left:-1px;top:var(--ch);width:2px;height:9px}
#crosshair i:nth-child(3){left:calc(-9px - var(--ch));top:-1px;width:9px;height:2px}
#crosshair i:nth-child(4){left:var(--ch);top:-1px;width:9px;height:2px}
#crosshair b{position:absolute;left:-1px;top:-1px;width:2px;height:2px;background:var(--xhair);
  box-shadow:0 0 0 1.5px rgba(0,0,0,.92),0 0 5px rgba(0,0,0,.55)}
/* ADS de rifle (R7.6): variante fina de precisão — braços 1px mais longos, gap mínimo */
#crosshair.prec i:nth-child(1),#crosshair.prec i:nth-child(2){left:-.5px;width:1px;height:12px}
#crosshair.prec i:nth-child(1){top:calc(-12px - var(--ch))}
#crosshair.prec i:nth-child(3),#crosshair.prec i:nth-child(4){top:-.5px;height:1px;width:12px}
#crosshair.prec i:nth-child(3){left:calc(-12px - var(--ch))}
#crosshair.prec b{left:-.5px;top:-.5px;width:1px;height:1px}
#hitmarker{position:absolute;left:50%;top:50%;opacity:0;transform:scale(.6)}   /* sem transition: o acerto aparece com opacidade 1 no PRIMEIRO frame (crítico R7.5) */
#hitmarker.show{opacity:1;transform:scale(1);animation:hmPop .16s cubic-bezier(.16,1,.3,1)}
#hitmarker.kill i{background:#ff3b3b;box-shadow:0 0 6px rgba(255,59,59,.8)}
#hitmarker i{position:absolute;width:14px;height:3px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.7)}
#hitmarker i:nth-child(1){transform:translate(-16px,-12px) rotate(45deg)}
#hitmarker i:nth-child(2){transform:translate(3px,-12px) rotate(-45deg)}
#hitmarker i:nth-child(3){transform:translate(-16px,9px) rotate(-45deg)}
#hitmarker i:nth-child(4){transform:translate(3px,9px) rotate(45deg)}
@keyframes hmPop{0%{transform:scale(1.2)}100%{transform:scale(1)}}

/* damage numbers flutuantes (CoD): sobem e esmaecem; headshot âmbar, kill vermelho */
#dmg-numbers{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.dmg-num{position:absolute;transform:translate(-50%,-50%);font-family:var(--font);font-size:23px;font-weight:800;
  color:#fff;
  text-shadow:1.5px 0 0 rgba(0,0,0,.85),-1.5px 0 0 rgba(0,0,0,.85),0 1.5px 0 rgba(0,0,0,.85),0 -1.5px 0 rgba(0,0,0,.85),
    1px 1px 0 rgba(0,0,0,.85),-1px -1px 0 rgba(0,0,0,.85),1px -1px 0 rgba(0,0,0,.85),-1px 1px 0 rgba(0,0,0,.85),0 0 8px rgba(0,0,0,.6);
  animation:dmgRise .85s ease-out forwards}
.dmg-num.head{color:var(--am)}
.dmg-num.kill{color:#ff5030}
@keyframes dmgRise{0%{opacity:1;transform:translate(-50%,-50%) scale(1.4)}
  15%{transform:translate(-50%,-62%) scale(1)}
  45%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-160%) scale(.94)}}
#scope-overlay{position:absolute;inset:0;display:none;background:radial-gradient(circle at 50% 50%,transparent 0 31vmin,rgba(0,0,0,.985) 32vmin)}
#scope-overlay.on{display:block}
.scope-circle{position:absolute;left:50%;top:50%;width:62vmin;height:62vmin;transform:translate(-50%,-50%);
  border:2px solid #111;border-radius:50%;box-shadow:inset 0 0 40px rgba(0,0,0,.9)}
.scope-line{position:absolute;background:rgba(10,10,10,.85)}
.scope-line.h{left:50%;top:50%;width:62vmin;height:1px;transform:translate(-50%,0)}
.scope-line.v{left:50%;top:50%;width:1px;height:62vmin;transform:translate(0,-50%)}
#damage-vignette{position:absolute;inset:0;opacity:0;box-shadow:inset 0 0 140px 60px rgba(220,20,20,.75);transition:opacity .09s}
/* Indicador direcional de dano: cunha vermelha apontando pra origem do tiro.
   Ganhou contorno escuro (era invisível contra parede clara) e ficou mais fina —
   um triângulo de 104px de base competia com o centro da tela. */
#dmg-dir{position:absolute;left:50%;top:50%;width:230px;height:230px;margin:-115px 0 0 -115px;opacity:0;
  transition:opacity var(--t) var(--ease);pointer-events:none;
  filter:drop-shadow(0 0 3px rgba(0,0,0,.9))}
#dmg-dir::before{content:'';position:absolute;left:50%;top:-2px;transform:translateX(-50%);
  border-left:42px solid transparent;border-right:42px solid transparent;border-top:26px solid rgba(255,60,60,.92)}
#mk-banner{position:absolute;left:0;right:0;top:26%;text-align:center;font-weight:700;
  font-size:46px;letter-spacing:20px;color:#ff5030;text-transform:uppercase;
  text-shadow:0 2px 4px rgba(0,0,0,.8);
  opacity:0;transform:scale(1.35);transition:all .16s cubic-bezier(.16,1,.3,1);pointer-events:none}
#mk-banner.show{opacity:1;transform:scale(1);letter-spacing:8px}
/* PROTEGIDO é estado DO JOGADOR: mora junto da vida (canto inferior esquerdo), não no
   centro superior — ali colidia com a faixa de objetivos do CTF e disputava o centro. */
#prot-badge{position:absolute;left:68px;bottom:108px;
  font-weight:700;font-size:var(--fs-200);letter-spacing:var(--tr-2);color:var(--am);
  text-shadow:var(--sh-hud);pointer-events:none}
#prot-badge svg{vertical-align:-2px;margin-right:5px}   /* inline: flex separava o "3" do "s" */
/* --- BLOCO SUPERIOR: altura DETERMINÍSTICA ---------------------------------
   O bug da barra de CTF sobre "RODADA 1" era aritmética de caixa: #round-time
   não tinha line-height, então o Rajdhani em `normal` (~1.55em) empurrava o
   bloco pra ~80px enquanto #ctf-hud estava fixo em 62px — e o valor mudava se
   a fonte caísse pro Arial Narrow. Agora cada linha tem line-height fixo e a
   soma é conferível: 14 (top) + 32 + 5 + 15.6 ≈ 67px → CTF em 76px.
   ATUALIZAÇÃO: #hud-mid ganhou uma plaquinha (padding 1px em cima + 2px embaixo),
   então a soma vira 14 + 1 + 32 + 5 + 15.6 + 2 ≈ 70px — ainda 6px acima do CTF
   em 76px. Se alguém aumentar esse padding, o topo do #ctf-hud tem que subir junto. */
/* UM BLOCO SÓ, não três chips soltos (referência 05_hud_ingame.png): lá o topo é uma
   peça contínua — tarja do time, placar, relógio, placar, tarja do time. Com gap s-5 os
   três pedaços boiavam separados por ~40px e nada dizia que eram o mesmo painel. */
#hud-top{position:absolute;top:16px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:2px}
/* SEM CAIXA (pedido do dono). O time continua legível por COR do texto + o trilho de 3px
   na borda externa, que é marca de time sem virar moldura. O contorno do --sh-hud é o
   que segura o contraste sobre parede branca agora que não há mais fundo. */
.team-score{font-size:var(--fs-300);font-weight:700;letter-spacing:var(--tr-2);line-height:var(--lh-snug);
  padding:var(--s-1) var(--s-3);text-shadow:var(--sh-hud)}
.ts-p{color:#ff9a9a;border-left:3px solid var(--team-e)}
.ts-b{color:#a9f0b6;border-right:3px solid var(--team-b)}

/* Topo sem placa: o contorno dos glifos preserva a leitura sobre o cenário. */
#hud-top .team-score{
  display:flex;align-items:center;gap:8px;
  background:transparent;border-radius:0}
#hud-top .team-score b{font-family:var(--aaa-font-display);font-size:30px;font-weight:400;line-height:1;
  paint-order:stroke fill;-webkit-text-stroke:1px rgba(0,0,0,.85)}
/* A arte mora aqui e não no JS: assim o laço de quadro só troca um data-attribute,
   sem tocar em <img> nem em style inline. */
.ts-crest{
  width:20px;height:20px;flex:0 0 20px;display:block;
  background-size:contain;background-repeat:no-repeat;background-position:center}
.ts-crest[data-f="b"]{background-image:url('/img/brasoes/b.png')}
.ts-crest[data-f="c"]{background-image:url('/img/brasoes/c.png')}
.ts-crest[data-f="e"]{background-image:url('/img/brasoes/e.png')}
.ts-crest[data-f="f"]{background-image:url('/img/brasoes/f.png')}
.ts-crest[data-f="u"]{background-image:url('/img/brasoes/u.png')}
/* A sigla sai do olho mas NÃO do documento: o brasão diz o time para quem vê, e
   quem usa leitor de tela não pode ficar com um "0" sem dono. */
.so-leitor{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}
#hud-mid{text-align:center;padding:1px var(--s-3) 2px;background:transparent}
#round-time{font-size:var(--fs-700);line-height:var(--lh-tight);font-weight:700;color:var(--br-faixa);
  font-family:var(--aaa-font-display);font-variant-numeric:tabular-nums;text-shadow:var(--sh-hud);
  paint-order:stroke fill;-webkit-text-stroke:1px rgba(0,0,0,.85)}
/* CAPTURA: o maior tipo do topo mostra BANDEIRAS, não segundo. O `.ctf` sobrou de quando
   o modo tinha relógio e o relógio precisava encolher; hoje o #round-time do CTF já é o
   placar de bandeiras e usa o corpo cheio. A regra fica porque o kill-switch ?vmmat/?pace
   e o modo legado ainda podem escrever a classe. */
#round-time.ctf{font-size:var(--fs-300);letter-spacing:var(--tr-3);color:var(--am)}
/* Últimos CTF_CLOCK_SHOW segundos da PARTIDA (game.js:108): o placar de bandeiras pulsa em
   âmbar. É o único aviso de tempo do modo, e ele é de PARTIDA — nunca de round. */
#round-time.urgente{color:var(--am);animation:blink 1s steps(2) infinite}
#rounds-row{font-size:var(--fs-50);line-height:var(--lh-snug);font-weight:600;letter-spacing:var(--tr-3);
  color:var(--ink-200);text-transform:uppercase;margin-top:5px;text-shadow:var(--sh-hud);
  font-variant-numeric:tabular-nums}
/* Faixa de objetivos do CTF: banda própria abaixo do bloco de round, com largura
   TETO (não empurra mais o killfeed nem cresce com o nome do ponto). */
#ctf-hud{position:absolute;top:98px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;justify-content:center;gap:var(--s-2);
  font-family:var(--font);font-weight:700;font-size:var(--fs-100);letter-spacing:var(--tr-1);
  text-transform:uppercase;text-shadow:var(--sh-hud);pointer-events:none;white-space:nowrap;
  max-width:min(62vw,720px);overflow:hidden;text-overflow:ellipsis;
  padding:var(--s-1) var(--s-3)}
/* SEM PAINEL (pedido do dono, 06/08: "tirar o bg e deixar transparente"). A história de
   contraste que criou o painel .92 não se perde: quem precisava dos 3:1 da WCAG 1.4.11 era
   a BARRA de captura (1,40:1 sobre a areia do Piscinão, ui-check UI1) — e a barra hoje
   carrega o PRÓPRIO poço escuro (preto .55 + fio claro de 1 px, montado inline no
   _updateCtfHud do game.js), então o painel da faixa inteira virou redundância. O texto
   segue legível pelo contorno do --sh-hud, que vale pra glifo. Se a UI1 reprovar de novo,
   engrossa o poço da barra — não devolve o painel. */
/* irmão POSTERIOR no DOM: quando a faixa de CTF existe, o killfeed desce. */
#ctf-hud:not(.hidden) ~ #killfeed{top:136px}
#killfeed{position:absolute;top:98px;right:48px;display:flex;flex-direction:column;gap:var(--s-1);
  align-items:flex-end;font-size:var(--fs-200);font-weight:600;max-width:min(42vw,460px)}
.kf-row{display:flex;align-items:center;gap:var(--s-2);background:rgba(var(--bg-900-rgb),.82);padding:5px var(--s-3);
  border-left:2px solid var(--line);clip-path:var(--cut-sm);animation:kfFade 4.5s forwards;
  text-shadow:var(--sh-text)}
.kf-row .kf-n{font-weight:700;letter-spacing:var(--tr-tight);padding:1px 7px;clip-path:var(--cut-sm)}   /* bg/color inline: tint do time + texto na cor do time */
html[data-ui="legacy"] .kf-row .kf-n{clip-path:none;border-radius:var(--r-1)}
.kf-row .kf-w{color:var(--ink-300);font-family:var(--mono);font-size:var(--fs-50);letter-spacing:var(--tr-1);text-transform:uppercase}
.kf-row .kf-ic{color:var(--ink-100);opacity:1;flex:0 0 auto}   /* ícone da arma: branco cheio (era .95 sobre céu claro) */
.kf-row .kf-skull{color:var(--am)}                              /* headshot = conquista → âmbar, não mais um branco igual ao resto */
/* ATENÇÃO: `//` NÃO é comentário em CSS. As duas linhas abaixo usavam `//` e o parser
   engolia a regra .me-vic INTEIRA e o @keyframes kfFade seguinte — killfeed e rádio
   apareciam/sumiam em corte seco e "VOCÊ morreu" nunca ficava vermelho. */
/* AS DUAS LINHAS QUE MAIS IMPORTAM ERAM AS MENOS LEGÍVEIS. `background` é atalho, e
   `.kf-row.me-atk` (especificidade 20) SUBSTITUÍA o `background:rgba(var(--bg-900-rgb),.82)` do
   `.kf-row` (10) — não somava. Resultado: a linha "VOCÊ matou" e a "VOCÊ morreu" perdiam
   o scrim escuro e ficavam com um tingimento de 16-18% sobre a cena. Medido em
   tools/eval/ui-check.mjs (UI1), sobre a areia do Piscinão: ícone da arma 1,54:1, caveira
   de headshot 1,00:1, nome do time 1,01:1 — a linha neutra, que mantém o scrim, dá 12,6:1.
   Agora o tingimento vem DENTRO de uma cor opaca o bastante (.92): mesma leitura de cor,
   com fundo de verdade (>= 5,4:1 em tudo). */
.kf-row.me-atk{background:rgba(9,38,42,.92);border-left-color:var(--sys)}      /* VOCÊ matou */
.kf-row.me-vic{background:rgba(44,10,10,.92);border-left-color:var(--crit)}    /* VOCÊ morreu */
@keyframes kfFade{0%{opacity:0;transform:translateX(20px)}8%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0}}
/* --- VIDA / MUNIÇÃO: neutros por padrão, coloridos SÓ em estado crítico ---------
   Antes vida, munição, mira, rádio e radar eram o MESMO ciano: cor saturada sem
   significado, o olho tinha que ler o número pra saber o que era. Agora o número
   grande é branco (hierarquia por tamanho/peso) e a cor só entra como alarme. */
#hud-bottom-left{position:absolute;left:68px;bottom:36px}
#hp-row{display:flex;align-items:baseline;gap:var(--s-2)}
#hp-num{font-size:var(--fs-800);line-height:var(--lh-tight);font-weight:700;color:var(--ink-100);
  font-family:var(--font);font-variant-numeric:tabular-nums;text-shadow:var(--sh-hud);
  transition:color var(--t-fast)}
/* Rótulos pequenos do HUD subiram de --ink-300 (5,5:1 só sobre --bg-800) para --ink-200
   (10,8:1): sobre a areia clara do Piscinão o ink-300 caía abaixo de AA e nenhum scrim
   de canto salva 12px de texto. A hierarquia continua vindo do TAMANHO (44px × 12px). */
/* RÓTULO EMBAIXO DO NÚMERO, e "VIDA" em vez de "HP" (referência 05): lá o rótulo é uma
   linha miúda SOB o algarismo, não uma sigla pendurada no ombro dele. O text-stroke
   grosso do #hp-num tinha que ser desfeito aqui: num rótulo de 12px o traço de 3px
   engole a letra. */
#hp-num::after{content:'VIDA';display:block;margin-left:0;font-size:var(--fs-100);
  letter-spacing:var(--tr-2);color:var(--ink-200);vertical-align:baseline;
  -webkit-text-stroke:0;line-height:1.1}
#hp-num.low{color:var(--crit)}
/* A BARRA MANTÉM FUNDO DE PROPÓSITO: barra é OBJETO GRÁFICO e a UI1 não dá crédito de
   contorno pra objeto gráfico — sem trilho próprio não existe barra. Preenchimento em
   âmbar como na referência; o vermelho continua reservado pro alarme. */
#hp-bar{width:200px;height:6px;background:rgba(var(--bg-900-rgb),.8);border:1px solid var(--line);overflow:hidden;margin-top:var(--s-1);clip-path:var(--cut-sm)}
#hp-fill{height:100%;width:100%;background:var(--br-faixa);transition:width var(--t),background var(--t-fast)}
#hp-fill.low{background:var(--crit)}
#weapon-hud{position:absolute;right:48px;bottom:168px;display:flex;flex-direction:column;
  align-items:flex-end;gap:6px;width:min(270px,34vw)}
.weapon-slot{display:grid;grid-template-columns:16px 38px minmax(0,1fr) auto;align-items:center;
  gap:9px;width:100%;min-height:34px;padding:6px 10px;color:var(--ink-200);
  background:rgba(var(--bg-900-rgb),.62);border-left:3px solid var(--line-2);
  clip-path:var(--cut-sm);text-shadow:var(--sh-hud)}
.weapon-slot.on{color:var(--ink-100);background:rgba(var(--bg-700-rgb),.82);
  border-left-color:var(--br-faixa)}
.weapon-key{font-family:var(--mono);font-size:var(--fs-100);color:var(--ink-300);text-align:center}
.weapon-slot.on .weapon-key{color:var(--br-faixa)}
.weapon-icon{display:flex;align-items:center;justify-content:flex-end;color:currentColor}
.weapon-icon .kf-ic{width:38px;height:21px;margin:0}
.weapon-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:var(--fs-100);font-weight:700;letter-spacing:var(--tr-1);text-transform:uppercase}
.weapon-amount{font-family:var(--mono);font-size:var(--fs-100);color:var(--cs);
  font-variant-numeric:tabular-nums;white-space:nowrap}
#hud-bottom-right{position:absolute;right:48px;bottom:36px;text-align:right;
  display:flex;flex-direction:column;align-items:flex-end}
#ammo-weapon-art{display:none;width:min(220px,18vw);height:82px;object-fit:contain;object-position:right bottom;
  filter:grayscale(1) brightness(2.1) contrast(1.25) drop-shadow(0 0 1px #fff) drop-shadow(0 2px 2px rgba(0,0,0,.95));
  opacity:.96;pointer-events:none}
#weapon-name{font-size:var(--fs-200);font-weight:700;letter-spacing:var(--tr-2);color:var(--ink-200);
  margin-bottom:var(--s-1);text-transform:uppercase;text-shadow:var(--sh-hud)}
#ammo{font-family:var(--aaa-font-display);font-size:var(--fs-800);line-height:var(--lh-tight);font-weight:400;color:var(--ink-100);
  font-variant-numeric:tabular-nums;text-shadow:var(--sh-hud)}
#ammo-bars{display:grid;grid-template-columns:repeat(var(--ammo-bars,1),minmax(2px,4px));justify-content:end;
  gap:2px;min-height:15px;margin:2px 0 var(--s-1)}
#ammo-bars i{display:block;width:4px;height:14px;background:rgba(255,255,255,.18);box-shadow:0 1px 2px rgba(0,0,0,.85)}
#ammo-bars i.on{background:var(--ink-100);box-shadow:0 0 5px rgba(255,255,255,.42)}
#ammo-bars i.low{background:var(--crit)}
#ammo-mag{transition:color var(--t-fast)}
#ammo-mag.empty{color:var(--crit)}
.ammo-sep{color:var(--ink-400);margin:0 var(--s-2);font-size:var(--fs-600)}
#ammo-reserve{font-size:var(--fs-600);color:var(--ink-200)}
#smoke-count{font-size:var(--fs-200);color:var(--ink-200);letter-spacing:var(--tr-1);text-shadow:var(--sh-hud)}
/* text-shadow explícito: o #reload-note era o ÚNICO texto do canto inferior direito sem
   contorno próprio — ele vivia do scrim de canto, que saiu nesta rodada. Media 5,12:1
   com scrim; sem contorno cairia pra âmbar sobre areia clara. */
#reload-note{font-size:var(--fs-200);font-weight:700;letter-spacing:var(--tr-2);color:var(--am);
  text-shadow:var(--sh-hud);animation:blink .5s steps(2) infinite}
@keyframes blink{50%{opacity:.25}}
#round-banner{position:absolute;left:0;right:0;top:30%;text-align:center;
  opacity:0;transition:opacity .38s ease;pointer-events:none}
#round-banner.show{opacity:1}
/* BANNER × PLACAR — o defeito do print do dono ("BOLSONARISTAS LEVARAM O ROUND"
   atravessando o painel do placar). Os dois acendiam no MESMO quadro (game.js:_endRound)
   e as caixas se cruzam POR CONSTRUÇÃO: banner em top:30% (196 px em 655 de altura, bloco
   de ~100 px, linha mais LARGA que o painel) contra painel centrado em 50% com 350-405 px
   de altura (8-10 combatentes) — ou seja, ocupando de ~125 px a ~530 px. NÃO EXISTE faixa
   livre pra onde empurrar o banner: acima dele está o bloco de round do topo (14-104 px) e
   abaixo o painel. A 1ª tentativa (top:8%) foi desenhada num mock em PIL e caiu em cima do
   bloco de round — está registrado porque parece a correção óbvia e não é.
   O QUE FICOU: o resultado da rodada virou o TÍTULO DO PAINEL (game.js:_resultadoDaRodada
   -> .sb-result), que é o empilhamento das telas 08/09 da referência. A regra abaixo é a
   garantia estrutural: enquanto o placar estiver aceso, banner nenhum desenha por cima. */
#hud.sb-on #round-banner{display:none}
#scoreboard h3 .sb-result{font-size:var(--fs-600);font-weight:700;letter-spacing:var(--tr-3);
  color:var(--am);text-transform:uppercase;line-height:var(--lh-snug);text-align:center}
#scoreboard h3 .sb-result-sub{font-size:var(--fs-200);font-weight:600;letter-spacing:var(--tr-1);
  color:var(--ink-200);text-transform:none;margin-bottom:var(--s-2)}
#banner-title{font-weight:700;font-size:52px;letter-spacing:8px;color:var(--yellow);text-transform:uppercase;
  text-shadow:0 2px 6px rgba(0,0,0,.75)}
#banner-sub{font-size:18px;font-weight:600;letter-spacing:3px;color:var(--ink1);margin-top:10px}
.banner-rule{width:0;height:2px;margin:12px auto 0;background:var(--yellow);opacity:.85}
/* entrada cinematográfica: slide/scale do título + settle do letter-spacing + rule que abre */
#round-banner.show #banner-title{animation:bannerTitle .62s cubic-bezier(.16,1,.3,1) both}
#round-banner.show .banner-rule{animation:bannerRule .7s cubic-bezier(.16,1,.3,1) .1s both}
#round-banner.show #banner-sub{animation:bannerSub .6s ease-out .18s both}
@keyframes bannerTitle{0%{opacity:0;transform:translateY(30px) scale(1.14);letter-spacing:26px}
  60%{opacity:1}100%{opacity:1;transform:none;letter-spacing:8px}}
@keyframes bannerRule{0%{width:0;opacity:0}30%{opacity:.85}100%{width:min(340px,40vw);opacity:.85}}
@keyframes bannerSub{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}
#lock-hint{position:absolute;left:0;right:0;top:42%;text-align:center;pointer-events:none}
/* O #lock-hint é a única peça do HUD que ficou SEM fundo E SEM contorno: ele é desenhado
   no meio da tela, em cima da cena. Medido em tools/eval/ui-check.mjs (UI1) sobre a areia
   do Piscinão: título 1,04:1 e sub 1,14:1 — invisível. O --sh-hud (contorno preto de 2px
   colado no glifo, style.css:63) é o mesmo recurso que o resto do HUD já usa. */
.lh-title{font-weight:700;font-size:30px;letter-spacing:4px;color:var(--cs);
  text-shadow:var(--sh-hud);animation:blink 1s steps(2) infinite}
.lh-sub{font-size:14px;font-weight:500;color:var(--ink2);margin-top:10px;text-shadow:var(--sh-hud)}
/* PROMPT DO [E] — SAIU DO CENTRO (defeito 1 do dono: "fica fixo no centro-baixo, por cima
   da arma"). Era left:50%/top:58% + translateX(-50%): uma tarja de 371 px CENTRADA na
   coluna da mira, na faixa y 0,580-0,635. A zona do viewmodel começa em x 0,525 / y 0,455
   (mínimo das 26 armas em tools/eval/vm_mint_audit.json, corroborado pelos 3 frames de
   referência em tools/eval/ref_viewmodel.json: bordaEsq 0,520-0,565) — ou seja, a tarja
   cobria a arma por 160 px de largura. Medido e reprovado em ui-check.mjs (UI3).
   Agora ele mora na COLUNA DA ESQUERDA, logo acima do bloco de vida, que é onde o jogador
   já olha pra ler estado seu (vida, PROTEGIDO) — e a largura tem TETO, senão uma arma de
   nome comprido voltaria a atravessar a tela. 380px cabe a string mais longa que o jogo
   consegue escrever ("[E] PEGAR G3SG1 · mire pra escolher", 35 caracteres em ST Mono de
   15px com tracking de 2px = 362px com o padding); em tela estreita ela quebra em duas
   linhas em vez de ser cortada por reticências. Caixa resultante (com a margem nova de
   68 px): x 0,067-0,444, y 0,740-0,795 — fora da mira (0,470-0,530 × 0,449-0,551) e fora
   do viewmodel (x < 0,525). Medido em `node tools/eval/ui-check.mjs ui3`. */
#pickup-hint{position:absolute;left:68px;bottom:134px;font-family:var(--mono);
  font-size:15px;letter-spacing:2px;color:var(--cs);background:rgba(var(--bg-800-rgb),.92);
  border:1px solid var(--line);padding:8px 14px;max-width:min(38vw,380px)}
/* Véu de morte a .6 sobre a areia do Piscinão deixava o texto de apoio em 3,94:1
   (tools/eval/ui-check.mjs, UI1). .78 é o mesmo patamar do scrim de canto do #hud
   (.84 no miolo) e põe tudo acima de 6:1 sem virar tela preta. */
#respawn-overlay{position:absolute;inset:0;background:rgba(24,4,4,.78);display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;font-size:20px;font-weight:600;letter-spacing:2px}
.rip{font-size:44px;font-weight:700;letter-spacing:8px;text-transform:uppercase}
.rip-sub{font-size:14px;font-weight:500;color:#e0b0b0}
/* ---------- PLACAR — REDESENHO contra references/telas/08_placar.png ----------------
   NÃO foi afinação de número: a tela era OUTRA. O que estava aqui era um painel flutuante
   de 560px no meio da tela com UMA tabela só (jogador · personagem · kills · mortes), os
   dois times misturados e ordenados por abate. A referência é uma tela CHEIA com scrim,
   DUAS COLUNAS DE TIME lado a lado, cabeçalho de placar gigante no topo e faixas de linha
   tingidas com a cor do time. Medido em `references/telas/08_placar.png` (512×341, o mesmo
   quadro 3:2 do dono a 1/3 de escala), com `python3 -c` sobre os pixels:

     · painel                  x 0,039-0,977 · y 0,023-0,88   → quase tela cheia, não card
     · coluna esquerda         x  20-254 px  (0,039-0,496)
     · coluna direita          x 268-500 px  (0,523-0,977)    → 14px de calha (0,027)
     · faixa de linha          altura 18px / passo 20px = 5,3% / 5,9% da altura
     · linha ímpar (time P)    rgb(80,24,24)  · linha par rgb(50,17,16)   → zebra TINGIDA
     · linha ímpar (time B)    rgb(46,29,57)  · linha par rgb(28,20,34)
     · placar do round         rgb(179,45,35) e rgb(134,94,178) — número GIGANTE colorido
     · rodapé                  chip de tecla + rótulo, centrado

   Zebra tingida (e não `rgba(232,244,246,.035)` cinza) é o que faz a coluna LER como time
   à distância — é o mesmo papel que a referência dá pra cor. O tom escurece de cima pra
   baixo (ímpar 80→49 no vermelho ao longo das 7 linhas): reproduzido com um degradê no
   próprio `tbody`, e não linha a linha, pra não depender da contagem de combatentes.  */
#scoreboard{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;
  background:rgba(var(--bg-900-rgb),.95);box-shadow:inset 0 0 0 1px var(--line);
  padding:4.4% clamp(var(--s-6),4vw,72px) 6%}
/* Cabeçalho: RESULTADO (âmbar, some fora do fim de round) · RODADA · PLACAR gigante.
   O innerHTML vem do game.js:_showScoreboard — `.sb-result`, `.sb-result-sub`, `.sb-label`
   e `.sb-score` com <b class="tp">TAG N</b><i>×</i><b class="tb">N TAG</b>. A referência
   parte tag e número em pesos diferentes; aqui os dois moram no MESMO <b>, então o par
   inteiro cresce e ganha a cor do time — a hierarquia vem do TAMANHO (fs-800 contra
   fs-100 do rótulo = razão 4,7, dentro da faixa 3,3-5,0 medida na referência). */
#scoreboard h3,#scoreboard table{width:min(1280px,100%)}
#scoreboard h3{display:flex;flex-direction:column;align-items:center;gap:var(--s-2);
  margin-bottom:var(--s-5);text-transform:uppercase;flex:0 0 auto}
#scoreboard h3 .sb-label{letter-spacing:var(--tr-4);font-weight:700;color:var(--ink-300);font-size:var(--fs-200)}
#scoreboard h3 .sb-score{display:flex;align-items:center;gap:clamp(var(--s-5),4vw,84px);
  font-family:var(--aaa-font-display);font-weight:400;line-height:var(--lh-tight);
  font-size:clamp(38px,6vw,78px);font-variant-numeric:tabular-nums;letter-spacing:var(--tr-2)}
#scoreboard h3 .sb-score i{font-style:normal;color:var(--ink-200);font-size:clamp(20px,3.6vh,40px);
  letter-spacing:var(--tr-3);align-self:center;font-weight:700}
#scoreboard h3 .sb-score b.tp{color:#ff8a8a}
#scoreboard h3 .sb-score b.tb{color:#b79bff}   /* violeta do time B na referência (134,94,178) */

#scoreboard{--sb-gap:clamp(var(--s-5),3.4vw,64px);
  --sb-rh:clamp(32px,5.2vh,54px);--sb-rg:5px}
#scoreboard table{display:block;font-size:var(--fs-500);font-weight:700;
  flex:0 1 auto;min-height:0;overflow:auto;margin-top:var(--s-2)}
#scoreboard thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}  /* só p/ leitor de tela */
#scoreboard td:nth-child(2){display:none}
#scoreboard td{display:block;color:var(--ink-100);letter-spacing:var(--tr-1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#scoreboard td:first-child{font-weight:700;text-transform:uppercase}
#scoreboard td:nth-child(n+3){text-align:center;font-family:var(--aaa-font-display);font-weight:400;
  font-size:clamp(18px,2.5vh,26px);font-variant-numeric:tabular-nums}
/* Faixa TINGIDA pelo time, com alfa pra deixar a zebra do fundo aparecer. */
#scoreboard tbody tr:hover{filter:brightness(1.25)}
#scoreboard tr.me{box-shadow:inset 0 0 0 1px rgba(255,201,63,.45)}
#scoreboard tr.me td:first-child{color:var(--br-faixa)}
/* Fio quente no topo do 1º colocado da partida — a referência marca a liderança com um
   fio que desbota pra direita (rgb(117,34,22) na quina esquerda → 67 na direita). */
#scoreboard tbody tr:first-of-type{position:relative}
#scoreboard tbody tr:first-of-type::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--br-sinal),rgba(226,64,44,0) 70%)}
#scoreboard .sb-foot{position:absolute;left:0;right:0;bottom:3.4%;display:flex;align-items:center;justify-content:center;
  gap:var(--s-2);font-family:var(--mono);font-size:var(--fs-50);
  letter-spacing:var(--tr-3);color:var(--ink-300);text-transform:uppercase}
#scoreboard .sb-foot kbd{font:inherit;border:1px solid var(--line-2);color:var(--ink-200);
  padding:2px 7px}

/* DUAS COLUNAS COM BRASÃO (07/08, ref 08_placar — pedido do dono: "pôr o brasão de cada
   time e alinhar as informações à coluna de cada um"). O game.js emite dois .sb-col, cada
   um com a própria tabela; as regras de tbody da grade única antiga ficam neutralizadas
   aqui (mesma especificidade, depois no arquivo). */
#scoreboard .sb-cols{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--sb-gap);
  width:min(1280px,100%);flex:0 1 auto;min-height:0}
#scoreboard .sb-col{--sb-grid:minmax(0,1fr) minmax(72px,5.4em) minmax(78px,6em);
  display:flex;flex-direction:column;min-height:0}
#scoreboard .sb-col.ctf{--sb-grid:minmax(0,1fr) minmax(72px,5.4em) minmax(78px,6em) 4.2em}
#scoreboard .sb-chead{display:grid;grid-template-columns:var(--sb-grid);
  align-items:center;gap:0 var(--s-4);padding:0 var(--s-4) var(--s-2);
  font-weight:700;letter-spacing:var(--tr-2);font-size:var(--fs-200);text-transform:uppercase}
#scoreboard .sb-chead>span:not(.sb-team){color:var(--ink-300);text-align:center}
#scoreboard .sb-team{display:flex;align-items:center;gap:var(--s-3);min-width:0;font-size:var(--fs-400)}
#scoreboard .sb-team b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#scoreboard .sb-chead img{height:36px;width:auto;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
#scoreboard .sb-col.tp .sb-chead{color:#ff8a8a}
#scoreboard .sb-col.tb .sb-chead{color:#b79bff}
#scoreboard .sb-col table{display:block;width:100%;flex:0 1 auto;min-height:0;overflow:auto;margin-top:0}
#scoreboard .sb-col thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#scoreboard .sb-col tbody{display:grid;grid-template-columns:1fr;grid-auto-rows:var(--sb-rh);
  row-gap:var(--sb-rg);align-content:start;background:none}
#scoreboard .sb-col tbody tr{grid-column:auto;display:grid;
  grid-template-columns:var(--sb-grid);align-items:center;gap:0 var(--s-4);
  padding:0 var(--s-4);border-left:3px solid transparent}
#scoreboard .sb-col.tp tbody tr{background:rgba(224,50,50,.22);border-left-color:rgba(224,50,50,.6)}
#scoreboard .sb-col.tb tbody tr{background:rgba(123,47,247,.24);border-left-color:rgba(123,47,247,.65)}
/* flex:0 0 auto porque o #scoreboard virou coluna flex: sem isso o canvas do mascote
   (kill-switch ?dolly=1) seria espremido pelo `flex-shrink` padrão. */
#dollynho-dance{display:block;flex:0 0 auto;margin:12px auto 0;width:240px;height:190px}

#scoreboard{position:absolute;inset:0;display:block;padding:0;overflow:hidden;
  font-family:var(--aaa-font-body);background:radial-gradient(ellipse at 50% 40%,rgba(8,8,10,.5) 0%,rgba(8,8,10,.88) 100%);backdrop-filter:blur(5px) brightness(.32);box-shadow:none}
#scoreboard h3{position:absolute;left:0;right:0;top:44px;width:auto;margin:0;display:flex;flex-direction:column;align-items:center;gap:4px}
#scoreboard h3 .sb-clock{font:600 13px/1 var(--font);letter-spacing:3px;color:#9a9ba1}
#scoreboard h3 .sb-clock em{font-style:normal;color:#b4d92e}
#scoreboard h3 .sb-score{display:flex;align-items:center;gap:26px;font-family:var(--aaa-font-display);font-weight:400;font-size:40px;line-height:1;letter-spacing:2px}
#scoreboard h3 .sb-score b{display:flex;align-items:center;gap:14px;font:400 40px/1 var(--aaa-font-display);color:#ecebe6}
#scoreboard .sb-score .sb-crest{width:48px;height:48px;object-fit:contain;filter:drop-shadow(0 3px 8px rgba(0,0,0,.65))}
#scoreboard h3 .sb-score-num{font:700 44px/1 var(--font)}
#scoreboard h3 .tp .sb-score-num{color:#e0762a}#scoreboard h3 .tb .sb-score-num{color:#8258d8}
#scoreboard h3 .sb-vs{font:400 20px/1 var(--aaa-font-display);color:#5c5d63}
#scoreboard h3 .sb-diamond{display:block;width:14px;height:14px;flex:0 0 14px;transform:rotate(45deg);font-size:0;background:#e0762a}
#scoreboard h3 .tb .sb-diamond{background:#8258d8}
#scoreboard h3 .sb-result,#scoreboard h3 .sb-result-sub{display:none}
#scoreboard .sb-cols{position:absolute;left:64px;right:64px;top:190px;width:auto;display:grid;grid-template-columns:1fr 1fr;column-gap:32px;min-height:0}
#scoreboard .sb-col{--sb-grid:minmax(0,1fr) 46px 46px 72px 52px;display:flex;flex-direction:column;
  min-height:0;padding:6px 0;background:rgba(13,14,17,.88);border:1px solid #26272d}
#scoreboard .sb-col.ctf{--sb-grid:minmax(0,1fr) 42px 42px 66px 48px 46px}
#scoreboard .sb-col.tp{border-top:2px solid #e0762a}#scoreboard .sb-col.tb{border-top:2px solid #8258d8}
#scoreboard .sb-chead{display:grid;grid-template-columns:var(--sb-grid);align-items:center;gap:0;padding:8px 0;
  border-bottom:1px solid #26272d;font:700 11px/1 var(--aaa-font-body);letter-spacing:3px;color:#5c5d63}
#scoreboard .sb-chead>span{padding:0 10px;text-align:right;color:#5c5d63}
#scoreboard .sb-chead .sb-team{text-align:left;padding-left:16px;font:700 11px/1 var(--aaa-font-body);color:#5c5d63}
#scoreboard .sb-chead .sb-crest{width:24px;height:24px;object-fit:contain;flex:0 0 24px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.55))}
#scoreboard .sb-col table{display:block;width:100%;margin:0;overflow:visible;font-family:var(--aaa-font-body)}
#scoreboard .sb-col tbody{display:block;background:none}
#scoreboard .sb-col tbody tr{display:grid;grid-template-columns:var(--sb-grid);align-items:center;gap:0;min-height:42px;padding:0;
  background:transparent;border:0;border-left:2px solid transparent}
#scoreboard .sb-col tbody tr.me{background:rgba(180,217,46,.07);border-left-color:#b4d92e;box-shadow:none}
#scoreboard .sb-col td,#scoreboard .sb-col td:nth-child(2){display:block;padding:9px 10px;text-align:right;
  color:#ecebe6;font:600 16px/1 var(--font);letter-spacing:0}
#scoreboard .sb-col td:first-child{padding-left:16px;text-align:left;font:600 16px/1 var(--aaa-font-body);letter-spacing:1px;text-transform:none}
#scoreboard .sb-col td.sb-points{color:#b4d92e;font-weight:700}
#scoreboard .sb-col td.sb-ping{padding-right:16px;color:#5c5d63;font-size:14px}
#scoreboard .sb-col td:nth-child(3){color:#9a9ba1}
#scoreboard tbody tr:first-of-type::before{display:none}
#scoreboard .sb-foot{position:absolute;left:50%;right:auto;bottom:32px;transform:translateX(-50%);display:flex;gap:18px;
  font:600 12px/1 var(--font);letter-spacing:2px;color:#5c5d63}
#scoreboard .sb-foot b{color:#9a9ba1}
#scoreboard .sb-center{position:absolute;inset:0 64px;display:flex;flex-direction:column;justify-content:center;gap:48px}
#scoreboard .sb-center>h3{position:static;left:auto;right:auto;top:auto;width:100%;margin:0}
#scoreboard .sb-center>.sb-cols{position:static;left:auto;right:auto;top:auto;width:100%;margin:0}

/* ---------- match end ----------
   Três blocos com hierarquia declarada, em vez de um painel único com tudo do mesmo
   tamanho: (1) VEREDITO — quem ganhou, (2) PLACAR — o número da partida, (3) SEU
   DESEMPENHO — o que o jogador fez. A ação de jogar de novo é a maior peça clicável.
   O título era 84px FIXO com tracking 14px: em 1280 de largura "DERROTA" encostava nas
   bordas. Agora ele é fluido. */
/* REDESENHO contra references/telas/09_resultado_partida.png. O que estava aqui era uma
   COLUNA CENTRADA (título, frase, três linhas soltas de número, dois botões de contorno).
   A referência é outra composição, medida em pixel sobre a tela de 512x341:

     · coluna de conteúdo   x 22-231 px  (0,043-0,451)  ALINHADA À ESQUERDA
     · metade direita       arte do vencedor (0,45-1,0) — aqui é .me-hero
     · VITÓRIA              VERDE rgb(73,168,70), caixa y 50-89 (font ~11% da altura)
     · sub                  BRANCO puro, caixa y 100-110 → razao titulo/sub ~ 3,5
     · cartão de stats      x 22-208, y 125-237: RÓTULO à esquerda, VALOR à direita,
                            fio fino entre linhas — não três frases centradas
     · CTA                  PREENCHIDO rgb(208,157,27) com texto ESCURO rgb(46,36,11);
                            o secundário é que é de contorno

   O verde não estava na paleta (o token de vitória era --yellow, e amarelo é o papel de
   OBJETIVO no sistema). --vitoria abaixo é o pixel medido, mantido como token pra não
   voltar hex solto ao arquivo. */
#match-end{justify-content:stretch;align-items:stretch;padding:0}
#match-end::before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--lambe);opacity:.6}
.me-wrap{position:relative;isolation:isolate;gap:0;display:grid;grid-template-columns:minmax(0,clamp(420px,46%,720px)) minmax(0,1fr);
  align-items:stretch;width:100%;height:100%;padding:10% 0 7% 4.3%}
/* Ritmo da referência: título/sub/cartão empilhados no terço de cima com respiro CONSTANTE,
   e as ações ancoradas no rodapé da coluna (`margin-top:auto`). `space-between` puro abria um
   vão morto entre o sub e o cartão quando a partida rende só 3 linhas de estatística. */
.me-col{position:relative;z-index:2;display:flex;flex-direction:column;align-items:stretch;
  gap:clamp(var(--s-5),3.4vh,var(--s-7));min-width:0}
.me-actions{margin-top:auto}
/* O arquivo já é o recorte alpha do personagem inteiro. O palco começa depois da
   coluna de dados e encosta a arte à direita sem cover, máscara ou janela fotográfica. */
.me-hero{position:absolute;inset:2.5% 0 0 44%;z-index:1;pointer-events:none;overflow:visible;
  background:var(--me-art,none) right bottom/contain no-repeat}
#match-end.lose .me-hero{filter:saturate(.48) brightness(.72);opacity:.9}
.me-verdict{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-2);text-align:left}
/* peso 400: Bebas Neue só existe em Regular (@font-face único, linha 6). Pedir 700
   fazia o browser engrossar o contorno sozinho — e este é o MAIOR texto do jogo
   (até 132px), onde o borrão do falso negrito mais aparece. Mesmo defeito já
   corrigido no `.aaa-cta`. */
#match-title{font-family:var(--aaa-font-display);font-size:clamp(46px,12vh,132px);font-weight:400;letter-spacing:clamp(2px,.4vw,7px);
  text-transform:uppercase;line-height:var(--lh-tight);
  animation:matchTitleIn .55s cubic-bezier(.16,1,.3,1) both}
html[data-ui="legacy"] #match-title{font-family:var(--font)}
#match-end.win #match-title{color:var(--vitoria);text-shadow:0 0 40px rgba(73,168,70,.4)}
#match-end.lose #match-title{color:var(--red);text-shadow:0 0 34px rgba(224,50,50,.3)}
@keyframes matchTitleIn{0%{opacity:0;transform:scale(1.25);letter-spacing:34px}
  100%{opacity:1;transform:scale(1)}}
#match-sub{font-size:clamp(15px,2.8vh,29px);font-weight:700;letter-spacing:var(--tr-1);
  color:var(--ink-100);text-transform:uppercase;max-width:34ch;line-height:var(--lh-snug)}
/* #match-stats é preenchido pelo game.js (_endMatch). Coluna: se o main.js anexar o
   aviso de "stats não enviados", ele cai embaixo em vez de entrar na grade. */
/* CARTÃO DE ESTATÍSTICA. O game.js escreve `<div><b>24</b>kills de ZÉ DO AWP</div>` —
   valor primeiro, rótulo colado logo atrás, sem espaço. Era isso que aparecia na tela como
   "3 × 1rounds" e "24kills de ZÉ DO AWP". `row-reverse` num contêiner flex resolve os DOIS
   defeitos de uma vez sem tocar no game.js: o texto solto vira item flex anônimo, vai pra
   ESQUERDA como rótulo, o <b> vai pra DIREITA como valor, e `space-between` abre a calha
   entre eles — que é exatamente a linha do cartão da referência (KILLS ......... 24).
   A grafia colada continua errada na fonte; ver relatório (é game.js:_endMatch). */
#match-stats{display:flex;flex-direction:column;align-items:stretch;gap:0;width:100%;
  background:rgba(var(--bg-800-rgb),.6);border:1px solid var(--line);clip-path:var(--cut);
  padding:clamp(var(--s-2),1.4vh,var(--s-4)) clamp(var(--s-4),2vw,var(--s-6))}
#match-stats > div{display:flex;flex-direction:row-reverse;justify-content:space-between;
  align-items:baseline;gap:var(--s-4);padding:clamp(var(--s-2),1.5vh,var(--s-4)) 0;
  font-size:clamp(13px,2vh,21px);font-weight:700;letter-spacing:var(--tr-2);
  text-transform:uppercase;color:var(--ink-300)}
#match-stats > div + div{border-top:1px solid rgba(255,255,255,.07)}
#match-stats > div > b{font-size:clamp(20px,3.3vh,36px);line-height:var(--lh-tight);
  color:var(--ink-100);font-variant-numeric:tabular-nums;letter-spacing:var(--tr-tight);
  white-space:nowrap}
/* a 1ª linha é o PLACAR DA PARTIDA (3 × 1): é o número que fecha a treta, ganha o âmbar —
   mesmo papel que a referência dá ao XP GANHO, a linha destacada do cartão dela. */
#match-stats > div:first-child > b{color:var(--br-faixa)}
/* PLACAR: os dois lados com nome e número; o vencedor em âmbar e em corpo maior. */
.me-score{display:flex;align-items:center;justify-content:center;gap:var(--s-4);width:100%;
  background:var(--panel);border:1px solid var(--line);clip-path:var(--cut);padding:var(--s-3) var(--s-5)}
.mes-side{display:flex;align-items:center;gap:var(--s-3);flex:1 1 0;min-width:0}
.mes-side:last-of-type{flex-direction:row-reverse}
.mes-side i{font-style:normal;font-weight:700;font-size:var(--fs-200);letter-spacing:var(--tr-2);
  text-transform:uppercase;color:var(--ink-300);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mes-side b{font-size:var(--fs-700);line-height:var(--lh-tight);font-variant-numeric:tabular-nums;
  color:var(--ink-300)}
.me-score .mes-win i{color:var(--ink-100)}
.me-score .mes-win b{color:var(--br-faixa);font-size:var(--fs-800)}
/* ink-300 e não ink-400: o sistema diz que ink-400 é régua decorativa, nunca texto */
.mes-x{font-family:var(--mono);font-size:var(--fs-50);letter-spacing:var(--tr-2);color:var(--ink-300);
  flex:0 0 auto;text-transform:uppercase}
/* SEU DESEMPENHO: números tabulares e rótulo embaixo, nunca na mesma linha. */
.me-you{width:100%;background:var(--panel);border:1px solid var(--line);clip-path:var(--cut);
  padding:var(--s-4) var(--s-5);position:relative}
.mey-h{display:block;font-size:var(--fs-100);font-weight:700;letter-spacing:var(--tr-3);
  color:var(--ink-300);text-transform:uppercase;margin-bottom:var(--s-3);text-align:center}
.mey-h b{color:var(--br-faixa)}
.me-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:var(--s-3) var(--s-4)}
.me-grid div{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.me-grid b{font-size:var(--fs-700);line-height:var(--lh-tight);font-weight:700;color:var(--ink-100);
  font-variant-numeric:tabular-nums}
.me-grid .hi b{color:var(--br-faixa)}
.me-grid span{font-size:var(--fs-50);font-weight:600;letter-spacing:var(--tr-2);color:var(--ink-300);
  text-transform:uppercase;text-align:center}
/* O preenchimento do CTA mora na regra compartilhada `.btn-big,.btn-cta` lá em cima
   (junto do `.btn`), não aqui: duplicar a cor foi o que deixou menu e pausa de contorno
   enquanto só o resultado era sólido. */
.me-actions{display:flex;gap:var(--s-3);align-items:center;justify-content:flex-start;flex-wrap:wrap}
#btn-again{letter-spacing:var(--tr-3)}
#btn-menu{background:transparent;border-color:var(--line-2);color:var(--ink-200)}
#btn-menu:hover,#btn-menu:focus-visible{background:var(--bg-700);border-color:var(--ink-200);color:#fff}
@media (max-width:900px){
  .me-wrap{grid-template-columns:minmax(0,1fr);padding:0 var(--s-5)}
  .me-hero{display:none}
}

/* ---- layout fix: menu rola e o JOGAR fica sempre visível ---- */
#main-menu{padding-top:5vh;gap:14px;overflow-y:auto;overflow-x:hidden}

/* carrossel de mapa: setas ‹ › sobre a arte (layout final em .map-picker, mais abaixo) */
.map-arrow{font-family:var(--mono);font-size:var(--fs-600);line-height:var(--lh-tight);cursor:pointer;
  background:var(--bg-800);border:1px solid var(--line);color:var(--ink-200);height:40px;
  display:flex;align-items:center;justify-content:center;padding:0;clip-path:var(--cut-sm);
  transition:background var(--t) var(--ease),border-color var(--t) var(--ease),color var(--t) var(--ease)}
.map-arrow:hover,.map-arrow:focus-visible{border-color:var(--sys);color:#fff;background:var(--bg-600)}
.map-arrow:active{transform:translateY(1px)}

#diff-select{font-family:var(--mono);font-size:var(--fs-200);letter-spacing:var(--tr-1);text-align:center;
  background:var(--bg-800);border:1px solid var(--line);color:var(--ink-100);padding:10px 12px;outline:none;cursor:pointer;width:100%;
  transition:border-color var(--t) var(--ease)}
#diff-select:hover{border-color:var(--line-2)}

/* empilha em telas estreitas */
@media(max-width:640px){
  .match-opts{grid-template-columns:1fr;gap:var(--s-3)}
  .team-row{grid-template-columns:repeat(5,minmax(0,1fr))}
}

/* ============ MENU (Coro Solto) — wallpaper + lista de texto à esquerda ============ */
#main-menu.cs-screen{display:block;padding:0;gap:0;overflow:hidden}
.cs-wallpaper{position:absolute;inset:0;z-index:0;overflow:hidden;isolation:isolate;background:var(--bg-900)}
.cs-wallpaper::before,.cs-wallpaper::after{content:"";position:absolute;pointer-events:none;background-image:var(--menu-wall);background-position:center;background-repeat:no-repeat}
.cs-wallpaper::before{inset:-24px;z-index:0;background-size:cover;filter:blur(18px) brightness(.48) saturate(.72)}
.cs-wallpaper::after{inset:0;z-index:1;background-size:contain}
@media (min-aspect-ratio:37/25) and (max-aspect-ratio:38/25){
  .cs-wallpaper::before,.cs-wallpaper::after{background-image:var(--menu-wall-3x2,var(--menu-wall))}
  .cs-wallpaper::after{background-size:cover}
}
/* Scrim que NASCE na borda da tela e morre em nada (CS2/Valorant). O texto passa a
   depender do scrim, não de um card — por isso o painel de nav pode perder a caixa.

   CORREÇÃO R2: o scrim horizontal era `linear-gradient(90deg, .74 -> 0 48%)`, ou seja,
   cobria a COLUNA ESQUERDA INTEIRA, de cima a baixo. Só que o logo do jogo está pintado
   no canto SUPERIOR esquerdo do wallpaper — medido na caixa (60,30)-(520,360) do
   menu-01-main.png: -38% de brilho e -23% de saturação contra a baseline. O scrim
   apagava a própria marca.
   Agora ele é uma ELIPSE ancorada no canto INFERIOR esquerdo, onde a lista de fato mora.
   Conferência geométrica em 1600×900: o ponto mais próximo do logo (60,360) fica a
   r = 0,81 do centro da elipse (raios 120%W × 74%H) — além do stop de 76%, logo alpha 0.
   O logo volta intacto e a lista continua com fundo. */
.cs-vignette{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(0deg,rgba(var(--bg-900-rgb),.88) 0%,rgba(var(--bg-900-rgb),0) 42%),
    radial-gradient(120% 74% at 0% 100%,rgba(var(--bg-900-rgb),.64) 0%,rgba(var(--bg-900-rgb),.36) 44%,rgba(var(--bg-900-rgb),0) 76%),
    var(--lambe)}                                   /* textura de lambe-lambe: 1px de papel, quase subliminar */
/* kill-switch ?ui=legacy: volta o scrim da rodada 1 (caso a elipse regrida em algum wallpaper) */
html[data-ui="legacy"] .cs-vignette{
  background:
    linear-gradient(0deg,rgba(var(--bg-900-rgb),.88) 0%,rgba(var(--bg-900-rgb),0) 42%),
    linear-gradient(90deg,rgba(var(--bg-900-rgb),.74) 0%,rgba(var(--bg-900-rgb),0) 48%),
    var(--lambe)}
.cs-left{position:absolute;z-index:3;left:min(4vw,64px);bottom:6vh;
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-3);max-width:52vw}
/* Trilho de acento no lugar do retângulo cinza: caixa FECHADA sobre foto lê como
   "widget colado". Sem border nos 4 lados, gradiente termina em 0 (não em .25, que
   criava uma aresta dura de opacidade no lado direito).

   CORREÇÃO R2: o gradiente ia de .70 (55%) direto a 0 (100%), mas a caixa de texto útil
   vai até ~88% da largura (460 - 64 de padding-right). Resultado: "CAPTURE THE FLAG" e
   "CONFIGURAÇÕES" terminavam com alpha ~0,25 em cima do capacete do alien do wallpaper —
   sem fundo garantido. Agora o piso só começa a cair depois de 86%, ou seja, DEPOIS do
   fim do texto. Com alpha .60 sob o glifo mais claro do wallpaper (amarelo do canarinho,
   L~200) o contraste do --ink-200 fica ~4,9:1 = AA. A borda direita continua morrendo em
   0, então não volta a ser um retângulo. */
.cs-menu{position:relative;display:flex;flex-direction:column;gap:var(--s-1);width:min(460px,90vw);
  padding:var(--s-4) var(--s-8) var(--s-4) var(--s-4);border:0;
  background:linear-gradient(90deg,rgba(var(--bg-900-rgb),.92) 0%,rgba(var(--bg-900-rgb),.86) 60%,
             rgba(var(--bg-900-rgb),.60) 86%,rgba(var(--bg-900-rgb),0) 100%)}
.cs-menu-label{font-family:var(--aaa-font-body);font-weight:600;font-size:var(--fs-100);letter-spacing:var(--tr-4);
  color:var(--ink-300);text-transform:uppercase;padding:0 0 var(--s-2) var(--s-3);margin-bottom:var(--s-1);
  border-bottom:1px solid rgba(255,255,255,.07)}
html[data-ui="legacy"] .cs-menu-label{font-family:var(--mono);font-weight:400;font-size:var(--fs-50)}
.cs-item{appearance:none;background:none;border:0;border-left:3px solid transparent;
  color:var(--ink-200);font-family:var(--font);font-weight:700;
  font-size:clamp(19px,2.7vh,27px);letter-spacing:var(--tr-3);text-transform:uppercase;text-align:left;
  padding:7px var(--s-4) 7px var(--s-3);cursor:pointer;position:relative;
  text-shadow:var(--sh-text);                                   /* idle a 11:1 de contraste, não mais 58% de opacidade */
  transition:color var(--t-slow) var(--ease),border-color var(--t) var(--ease),
             transform var(--t-slow) var(--ease),letter-spacing var(--t-slow) var(--ease),background var(--t) var(--ease);
  animation:cs-item-in .4s var(--ease) backwards}
/* nth-of-type (não nth-child): o rótulo "// ESCOLHA A TRETA" é um div e desalinhava a escada */
.cs-item:nth-of-type(1){animation-delay:.05s}.cs-item:nth-of-type(2){animation-delay:.10s}
.cs-item:nth-of-type(3){animation-delay:.15s}.cs-item:nth-of-type(4){animation-delay:.20s}
.cs-item:nth-of-type(5){animation-delay:.25s}.cs-item:nth-of-type(6){animation-delay:.30s}
@keyframes cs-item-in{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:translateX(0)}}
.cs-tick{display:inline-block;width:0;overflow:hidden;opacity:0;color:var(--am);
  transform:translateX(-8px);transition:all var(--t) var(--ease);margin-right:0}
.cs-item:hover,.cs-item:focus-visible{color:#fff;border-left-color:var(--sys);
  transform:translateX(10px);letter-spacing:var(--tr-4);
  background:linear-gradient(90deg,rgba(57,214,224,.14),rgba(57,214,224,0));outline:none}
.cs-item:hover .cs-tick,.cs-item:focus-visible .cs-tick{width:22px;opacity:1;transform:translateX(0);margin-right:6px}
/* SELECIONADO/ATUAL = A BARRA CHEIA (referência 01_menu_principal.png).
   A lista da referência não tem sete pesos iguais: tem UMA barra SÓLIDA em âmbar com
   texto ESCURO (o "JOGAR") e o resto é texto solto. Aqui as sete entradas tinham
   exatamente o mesmo peso e um degradê de 16% marcando a atual — nada dizia qual era a
   ação padrão de quem acabou de abrir o jogo.
   Quem tiver aria-current leva a barra; sem ninguém marcado ela mora na PRIMEIRA entrada
   (SINGLE PLAYER = o JOGAR da referência). O `:not(:has(...))` é o que garante UMA barra
   só — sem ele, abrir CONFIGURAÇÕES deixava duas barras cheias na tela ao mesmo tempo. */
/* `> .cs-item` (filho DIRETO) e não descendente: desde que JOGAR abriu um submenu,
   o primeiro botão de dentro de `.cs-sub` também casava `:first-of-type` e a tela
   ficava com DUAS barras cheias — exatamente o defeito que o comentário acima diz
   que o `:not(:has())` existe para impedir. */
.cs-item[aria-current="true"],
.cs-menu:not(:has(.cs-item[aria-current="true"])) > .cs-item:first-of-type{
  color:var(--bg-900);background:var(--br-faixa);border-left-color:var(--br-faixa);
  text-shadow:none;clip-path:var(--cut-sm)}
html[data-ui="legacy"] .cs-item[aria-current="true"],
html[data-ui="legacy"] .cs-menu:not(:has(.cs-item[aria-current="true"])) > .cs-item:first-of-type{
  clip-path:none}
.cs-item[aria-current="true"] .cs-tick,
.cs-menu:not(:has(.cs-item[aria-current="true"])) .cs-item:first-of-type .cs-tick{
  width:22px;opacity:1;transform:none;margin-right:6px;color:var(--bg-900)}
/* hover da barra cheia: sem isto o `.cs-item:hover` pintava texto BRANCO sobre amarelo */
.cs-item[aria-current="true"]:hover,.cs-item[aria-current="true"]:focus-visible,
.cs-menu:not(:has(.cs-item[aria-current="true"])) .cs-item:first-of-type:hover,
.cs-menu:not(:has(.cs-item[aria-current="true"])) .cs-item:first-of-type:focus-visible{
  color:var(--bg-900);background:var(--am);border-left-color:var(--am)}
.cs-left .footnote{position:static;color:var(--ink-300);font-size:var(--fs-100);max-width:420px;margin-top:0;
  padding-left:var(--s-4);border-left:3px solid transparent;line-height:var(--lh-base);letter-spacing:var(--tr-tight);
  text-shadow:var(--sh-text)}
/* painel de setup (perfil + partida), desliza da direita sobre o wallpaper */
/* painel de setup: SUBSTITUI o menu principal (a nav esmaece) e fica docado à direita,
   em altura cheia — pedido do dono ("o menu do jogo substitui o principal, tudo à direita") */
.cs-left{transition:opacity .22s,transform .22s,filter .22s}
/* ARMADILHA CONSERTADA (R2). Antes: `opacity:0;pointer-events:none` na nav inteira quando
   o setup abria. Consequência real, não teórica — depois de clicar em SINGLE PLAYER, os
   outros 5 itens continuavam OCUPANDO a tela (opacity 0 não tira do layout) mas nenhum
   clique chegava neles; a única saída era o botão VOLTAR. Foi exatamente isso que fez o
   harness estourar 6 s em ctf/config/ranking/sobre e passar só em 'sp'.
   E não havia motivo de layout: o painel de setup ocupa x >= 900px em 1600 (min(700px,62vw)
   ancorado à direita) e a nav termina em ~896px — os dois NUNCA se sobrepõem.
   Agora a nav RECUA (é o painel que tem o foco visual, como o dono pediu) mas continua
   viva: dá pra pular de SINGLE PLAYER pra CAPTURE THE FLAG num clique, como em CS2.
   O item de origem fica em destaque total por causa do [aria-current]. */
#main-menu:has(.cs-setup.open) .cs-left{opacity:.40;filter:saturate(.5)}
/* mouse ou foco de teclado na coluna = ela acorda inteira (opacidade é herdada pelo
   subtree, então o estado tem que morar no container, não em cada .cs-item) */
#main-menu:has(.cs-setup.open) .cs-left:hover,
#main-menu:has(.cs-setup.open) .cs-left:focus-within{opacity:1;filter:none}
#main-menu:has(.cs-setup.open) .cs-left .footnote{opacity:0}   /* só o texto legal some de vez */
.cs-setup{position:absolute;z-index:4;right:0;top:0;bottom:0;width:min(700px,62vw);
  display:flex;flex-direction:column;justify-content:center;
  padding:42px min(4vw,56px) 42px 30px;overflow-y:auto;
  background:linear-gradient(270deg,rgba(var(--bg-900-rgb),.94) 42%,rgba(var(--bg-900-rgb),.62) 80%,rgba(var(--bg-900-rgb),0));
  transform:translateX(36px);opacity:0;pointer-events:none;
  transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
.cs-setup.open{opacity:1;transform:none;pointer-events:auto}
/* Cabeçalho do setup: eyebrow (passo do fluxo) + título. Sem isso o painel abria sem
   dizer de onde veio nem em que etapa o jogador está. */
.cs-setup-head{font-family:var(--font);font-weight:700;letter-spacing:var(--tr-4);
  font-size:var(--fs-500);color:var(--am);text-transform:uppercase;margin-bottom:var(--s-3);text-align:right;
  border-bottom:1px solid var(--line);padding-bottom:var(--s-2)}
.cs-setup-head small{display:block;font-family:var(--mono);font-size:var(--fs-50);letter-spacing:var(--tr-3);
  color:var(--ink-300);margin-bottom:var(--s-1)}
/* VOLTAR do setup fica NO FLUXO do card (era absolute e flutuava por cima do SEU PERFIL) */
#menu-setup .btn-back{position:static}
/* Duas fileiras: PERFIL em cima (largura cheia) e VOLTAR + JOGAR embaixo. */
.cs-setup-actions{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.cs-setup-row{display:flex;gap:12px;align-items:stretch}
/* VOLTAR e JOGAR MESMO TAMANHO: mesma largura (flex:1) e a fonte grande do .btn-big.
   VOLTAR segue secundário (contorno); JOGAR primário (preenchido, vem do .btn-big). */
.cs-setup-row #setup-back,.cs-setup-row #btn-jogar{flex:1}
.cs-setup-row #setup-back{font-size:var(--fs-600)}
/* ALTURA PADRÃO: os três botões do setup na MESMA altura das fichas ARMAS/BOTS
   (.dd-btn = 47px). Precisa de 2 ids pra vencer o #btn-jogar (que traz padding e
   position:sticky próprios). Padding vertical zerado + flex-center faz a altura ser exata. */
#menu-setup .btn-profile,
#menu-setup .cs-setup-row #setup-back,
#menu-setup .cs-setup-row #btn-jogar{
  min-height:47px;height:47px;padding:0 var(--s-6);position:static;
  display:flex;align-items:center;justify-content:center}
/* Seletor de mapa: o preview VIRA a peça principal (era um <img> de 116px ao lado do
   nome). Agora é um cartaz 16:9 com o nome sobreposto, badge de modo e setas nas
   bordas — o jogador escolhe pela imagem, não pelo texto. */
.map-picker{position:relative;display:block;width:100%}
#map-thumb{width:100%;aspect-ratio:16/9;height:auto;object-fit:cover;display:block;
  background:var(--bg-800);border:1px solid var(--line);clip-path:var(--cut);
  transition:opacity var(--t-slow) var(--ease)}
.map-picker::after{content:"";position:absolute;inset:0;pointer-events:none;clip-path:var(--cut);
  background:linear-gradient(0deg,rgba(var(--bg-900-rgb),.92) 0%,rgba(var(--bg-900-rgb),.15) 46%,rgba(var(--bg-900-rgb),.35) 100%)}
.map-side{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:var(--s-2) var(--s-3);min-width:0}
#map-name{font-family:var(--font);font-weight:700;font-size:var(--fs-300);letter-spacing:var(--tr-1);
  text-transform:uppercase;text-align:left;color:var(--ink-100);background:none;border:0;padding:0;
  line-height:var(--lh-snug);min-height:0;display:block;text-shadow:var(--sh-text);white-space:normal}
/* setas nas BORDAS da arte (era uma barra abaixo que roubava a largura do nome e
   truncava "HAVAN — ESTACIONAMENTO" em "HAVAN — ES…") */
.map-arrows{position:absolute;top:44%;left:0;right:0;z-index:3;transform:translateY(-50%);
  display:flex;justify-content:space-between;padding:0 var(--s-1);pointer-events:none}
.map-arrows .map-arrow{height:42px;width:28px;pointer-events:auto;background:rgba(var(--bg-900-rgb),.7)}
/* Virou BOTÃO (era <span>): o mapa define o padrão, o jogador alterna rounds↔CTF.
   Precisa PARECER clicável — o defeito de UI mais comum é um controle que muda o
   jogo e não avisa que é um controle. Daí o cursor, o ▸, a borda e o hover. */
#map-mode{position:absolute;top:var(--s-2);left:var(--s-2);z-index:3;font-family:var(--mono);
  font-size:var(--fs-50);letter-spacing:var(--tr-2);color:var(--bg-900);background:var(--am);
  padding:2px var(--s-2);text-transform:uppercase;border:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;transition:filter var(--t),transform var(--t)}
#map-mode::after{content:'⇄';font-size:.92em;opacity:.72}
#map-mode:hover{filter:brightness(1.12)}
#map-mode:active{transform:translateY(1px)}
#map-mode:focus-visible{outline:2px solid var(--bg-900);outline-offset:2px}
#map-mode[data-mode="ctf"]{background:var(--br-faixa,#2fb85f);color:#04150a}
#map-dots{position:absolute;top:var(--s-2);right:var(--s-2);z-index:2;display:flex;gap:5px}
#map-dots i{width:6px;height:6px;background:rgba(255,255,255,.32);display:block;transition:background var(--t)}
#map-dots i.on{background:var(--br-faixa)}

/* ============ PASSOS DO SETUP (partida / perfil) ============
   Pedido literal do dono: "o primeiro menu com o mapa não precisa ter o nick — a gente
   pode pôr um botão pra configurar o usuário (como se fosse outro step) e dar uma maior
   dimensão pro mapa". Então: passo 1 = A PARTIDA, com o cartaz do mapa ocupando a tela
   inteira do painel; o perfil virou um passo próprio, atrás do botão PERFIL. Os dois
   painéis vivem no MESMO container (#menu-setup[data-step]) pra não duplicar a máquina
   de estados do menu (ESC, clique fora, VOLTAR, .cs-setup.open). */
.setup-pane{display:none;flex-direction:column;gap:var(--s-4)}
#menu-setup[data-step="match"] .pane-match,
#menu-setup[data-step="profile"] .pane-profile{display:flex}
/* o cartaz do mapa é o protagonista: sem rótulo em cima, sem caixa em volta */
.pane-match .map-picker{margin-bottom:var(--s-1)}
.map-kicker{display:block;font-family:var(--mono);font-size:var(--fs-50);letter-spacing:var(--tr-3);
  color:var(--br-faixa);text-transform:uppercase;margin-bottom:2px;text-shadow:var(--sh-text)}
.pane-match #map-name{font-size:var(--fs-600);letter-spacing:var(--tr-2)}
#map-meta{display:block;font-family:var(--mono);font-size:var(--fs-100);letter-spacing:var(--tr-1);
  color:var(--ink-200);text-transform:uppercase;margin-top:3px;text-shadow:var(--sh-text)}
/* ARMAS e BOTS: duas fichas embaixo da arte. É o resto da partida, não o assunto dela. */
.match-opts{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);align-items:end}
/* Botão do passo de perfil: fica NA LINHA DE CIMA, largura cheia, o nick (ou
   "PÔR O NOME NA CAMISA") numa LINHA SÓ, centrado. */
.btn-profile{display:flex;flex-direction:row;align-items:center;justify-content:center;
  padding:7px var(--s-4);font-size:var(--fs-200);letter-spacing:var(--tr-1);width:100%}
/* mesma tipografia dos outros botões (Rajdhani bold, não o monospace que destoava) */
.btn-profile span{font-family:var(--font);font-weight:700;font-size:var(--fs-600);letter-spacing:var(--tr-3);text-transform:uppercase;
  color:var(--br-faixa);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* sem nick ainda: o botão vira o próximo passo óbvio, não um enfeite */
.btn-profile[data-empty="1"]{border-color:var(--am)}
.btn-profile[data-empty="1"] span{color:var(--am)}
.pc-note{font-size:var(--fs-100);font-weight:500;color:var(--ink-300);line-height:var(--lh-base);
  letter-spacing:var(--tr-tight)}

/* fundo das telas de seleção = wallpaper rotativo (--wall, setado no main.js) + overlay escuro */
#team-select,#char-select{
  background-color:var(--bg-900);background-position:center;background-size:cover;background-repeat:no-repeat;
  background-image:
    linear-gradient(180deg,rgba(var(--bg-900-rgb),.85),rgba(var(--bg-900-rgb),.65) 40%,rgba(var(--bg-900-rgb),.92)),
    var(--wall,url('/img/select-bg.png'))}

/* ============ SPLASH DE BOOT + LOADING (G2-R6B) ============ */
/* Splash: tela de entrada com identidade — cobre o load inicial (nada de cena parcial
   visível) e o 1º gesto destrava o áudio COM SOM (autoplay exige gesto do usuário). */
/* splash agora fala a língua da key art: brilho quente (tinta/poeira), textura de papel
   colado — nada de glow ciano de terminal, que era a 2ª marca do jogo em 3 segundos */
#boot-splash{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  background-color:var(--bg-900);isolation:isolate;overflow:hidden;
  transition:opacity .45s ease;cursor:pointer}
#boot-splash::before,#load-overlay::before{content:"";position:absolute;inset:-24px;z-index:0;pointer-events:none;
  background-image:var(--loading-wall);background-size:cover;background-position:center;background-repeat:no-repeat;
  filter:blur(18px) brightness(.5) saturate(.75)}
#boot-splash::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:linear-gradient(180deg,rgba(var(--bg-900-rgb),.5) 0%,rgba(var(--bg-900-rgb),.32) 45%,rgba(var(--bg-900-rgb),.84) 100%),var(--loading-wall);
  background-size:cover,contain;background-position:center;background-repeat:no-repeat}
/* o wallpaper loading-* já traz a marca CORO SOLTO — sem logo/subtítulo duplicado (pedido do dono) */
#splash-logo,.splash-sub{display:none}
#boot-splash.gone{opacity:0;pointer-events:none}
.splash-frame{display:flex;flex-direction:column;align-items:center;gap:14px;padding:0 20px;z-index:2}
#boot-splash .splash-frame{position:relative;z-index:2}
#splash-character-stage{width:min(86px,18vw);height:min(144px,23vh);pointer-events:none;
  filter:drop-shadow(0 28px 24px rgba(0,0,0,.58))}
#splash-logo{width:min(560px,86vw);height:auto}
.splash-sub{font-family:var(--mono);font-size:var(--fs-100);letter-spacing:var(--tr-4);color:var(--ink-300)}
.splash-bar{width:min(360px,72vw);height:6px;background:var(--bg-800);border:1px solid var(--line);
  clip-path:var(--cut-sm);overflow:hidden}
.splash-bar>div{height:100%;width:0;background:linear-gradient(90deg,var(--br-sinal),var(--br-faixa));
  transition:width var(--t-slow) ease}
.splash-status{width:min(360px,72vw);display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:var(--fs-50);letter-spacing:var(--tr-2);color:var(--ink-300)}
#splash-enter{margin-top:var(--s-5);font-family:var(--aaa-font-display);font-weight:700;font-size:var(--fs-500);
  letter-spacing:var(--tr-4);color:var(--br-faixa);text-transform:uppercase;animation:splashPulse 1.1s ease-in-out infinite}
html[data-ui="legacy"] #splash-enter{font-family:var(--font)}
@keyframes splashPulse{0%,100%{opacity:1}50%{opacity:.35}}
.splash-ver{position:absolute;right:18px;bottom:14px;z-index:2;font-family:var(--mono);font-size:11px;
  letter-spacing:2px;color:var(--ink3)}

/* Loading de partida/personagens: overlay OPACO (a cena montando nunca aparece) */
#load-overlay{position:fixed;inset:0;z-index:110;display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;
  background-color:var(--bg-900);isolation:isolate;overflow:hidden}
#load-overlay::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:linear-gradient(180deg,rgba(var(--bg-900-rgb),.22) 0%,rgba(var(--bg-900-rgb),.12) 55%,rgba(var(--bg-900-rgb),.72) 100%),var(--loading-wall);
  background-size:cover,contain;background-position:center;background-repeat:no-repeat}
/* Tela 00B do redesign: a faixa de progresso ocupa o rodapé INTEIRO, alinhada à
   esquerda, com o nome do mapa em tipografia grande acima dela — o mapa é o
   protagonista da espera. O card no canto virou faixa. */
.lo-box{align-self:stretch;z-index:2;display:flex;flex-direction:column;
  align-items:flex-start;text-align:left;gap:var(--s-2);padding:0;margin:0 var(--s-6) var(--s-5);
  background:none;border:0}
#load-map{font-family:var(--font);font-weight:400;font-size:clamp(34px,6vw,76px);letter-spacing:var(--tr-3);
  color:var(--ink-100);text-transform:uppercase;line-height:var(--lh-tight);text-shadow:3px 3px 0 rgba(0,0,0,.6)}
#load-map:empty{display:none}
/* Palco 3D: o modelo GLB do jogo e seu AnimationMixer ficam sobre o wallpaper sem placa. */
#load-character-stage{position:absolute;right:clamp(18px,5vw,78px);bottom:78px;z-index:2;
  width:min(86px,6.8vw);height:min(144px,15.2vh);pointer-events:none;
  filter:drop-shadow(0 28px 24px rgba(0,0,0,.58))}
#load-character-3d{display:block;width:100%;height:100%;background:transparent}
#load-character-action{position:absolute;right:8px;bottom:18px;padding:5px 9px;
  border-left:3px solid var(--br-faixa);background:rgba(var(--bg-900-rgb),.72);
  font:700 10px/1 var(--mono);letter-spacing:var(--tr-3);color:var(--ink-200);display:none}
@media (max-width:820px){#load-character-stage{display:none}}
.lo-box .splash-bar,.lo-box .splash-status{width:100%}
#load-label{font-family:var(--mono);font-size:var(--fs-200);letter-spacing:var(--tr-3);color:var(--ink-200);text-transform:uppercase}
.lo-bar{width:100%}
.lo-bar+.splash-status{width:100%}

/* Falha de abertura: modal central, curto e acionável. Erro bruto/stack nunca aparece
   aqui; quem está depurando usa ?debug=1 e recebe o painel técnico separado. */
#launch-error{position:fixed;inset:0;z-index:2147483646;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(var(--bg-900-rgb),.9);backdrop-filter:blur(8px)}
#launch-error.hidden{display:none}
.launch-error-card{width:min(560px,calc(100vw - 32px));padding:clamp(26px,5vw,48px);text-align:center;
  background:linear-gradient(155deg,rgba(var(--bg-700-rgb),.98),rgba(var(--bg-900-rgb),.99));
  border:1px solid var(--line-2);border-top:4px solid var(--br-faixa);clip-path:var(--cut);
  box-shadow:0 28px 90px rgba(0,0,0,.62)}
.launch-error-kicker{font-family:var(--mono);font-size:var(--fs-50);letter-spacing:var(--tr-4);
  color:var(--br-faixa);text-transform:uppercase}
.launch-error-card h2{margin:var(--s-3) 0 var(--s-3);font-family:var(--font);font-size:clamp(30px,5vw,48px);
  line-height:var(--lh-tight);letter-spacing:var(--tr-3);color:var(--ink-100)}
.launch-error-card p{max-width:46ch;margin:0 auto;color:var(--ink-300);font:600 var(--fs-200)/var(--lh-base) var(--font)}
.launch-error-code{display:inline-block;margin:var(--s-4) 0;padding:7px 12px;font-family:var(--mono);
  font-size:var(--fs-50);letter-spacing:var(--tr-3);color:var(--ink-200);background:var(--bg-900);border:1px solid var(--line)}
.launch-error-actions{display:flex;justify-content:center;gap:var(--s-3);flex-wrap:wrap;margin-bottom:var(--s-3)}
.launch-error-actions .btn{min-width:190px}
.launch-error-actions .btn:disabled{opacity:.68;cursor:default;transform:skewX(-6deg)}
.launch-error-status{min-height:1.5em;font-size:var(--fs-50)!important;color:var(--ink-400)!important}
@media(max-width:560px){
  .launch-error-actions{flex-direction:column}
  .launch-error-actions .btn{width:100%;min-width:0}
}

/* menu principal: respiro extra em telas baixas (1280×800 etc.) */
@media(max-height:860px){
  .cs-left{bottom:4vh;gap:8px}
  .cs-menu{padding:10px 16px 10px 12px}
  .cs-item{padding:5px 12px 5px 10px}
}
@media(max-height:700px){
  .cs-item{letter-spacing:2px}
}

/* ============ MAP SCREEN ============ */
/* Redesign de 21/08, 3ª rodada: a tela é CABEÇALHO + ACERVO + RODAPÉ, em faixas.
   O cabeçalho carrega tudo que não é lista (abas, ficha do mapa em foco, opções da
   partida) e o corpo inteiro fica para a grade de mapas — que é o que a tela existe
   para mostrar. O palco é o WALLPAPER do setup: a foto do mapa em foco já está no card
   selecionado, e repetida em tela cheia ela brigava com a grade. */
#map-screen{padding:0;gap:0;background:#08080a;font-family:var(--aaa-font-body);
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);
  justify-content:stretch;align-items:stretch;justify-items:stretch}
/* O MESMO wallpaper do menu principal, pintado do MESMO jeito: borrão cobrindo a tela
   por baixo e a arte inteira (`contain`) por cima, com a variante 3:2 na mesma faixa de
   proporção. Copiar o número e não a regra era como as duas telas divergiam antes. */
.ms-bg{position:absolute;inset:0;overflow:hidden;border:0;background:var(--bg-900);z-index:0;isolation:isolate}
.ms-bg::before,.ms-bg::after{content:"";position:absolute;pointer-events:none;
  background-image:var(--wall);background-position:center;background-repeat:no-repeat}
.ms-bg::before{inset:-24px;z-index:0;background-size:cover;filter:blur(18px) brightness(.48) saturate(.72)}
.ms-bg::after{inset:0;z-index:1;background-size:contain}
@media (min-aspect-ratio:37/25) and (max-aspect-ratio:38/25){
  .ms-bg::before,.ms-bg::after{background-image:var(--wall-3x2,var(--wall))}
  .ms-bg::after{background-size:cover}
}
.ms-bg img{display:none}          /* o `src` serve à sonda de tela, não ao olho */
.ms-scrim{position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(90deg,rgba(8,8,10,.9) 0%,rgba(8,8,10,.72) 46%,rgba(8,8,10,.66) 100%),linear-gradient(0deg,rgba(8,8,10,.92) 0%,rgba(8,8,10,.6) 30%,rgba(8,8,10,.88) 100%),repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.05) 3px 4px)}
/* ---- faixa 1: cabeçalho ---- */
.ms-topbar{position:relative;z-index:2;padding:18px 40px 16px;
  border-bottom:1px solid rgba(236,235,230,.1)}
.ms-kicker{font-family:var(--aaa-font-body);font-weight:600;font-size:12px;letter-spacing:4px;
  color:var(--br-faixa);text-transform:uppercase}
.ms-tabs{display:flex;gap:14px;flex-wrap:nowrap}
.ms-tab{padding:6px 2px;font:600 14px/1 var(--aaa-font-body);letter-spacing:3px;color:#5c5d63;
  background:transparent;border:0;border-bottom:2px solid transparent;cursor:pointer}
.ms-tab:hover,.ms-tab:focus-visible{color:#ecebe6}
.ms-tab.on{font-weight:700;color:#b4d92e;border-bottom-color:#b4d92e}
.ms-cat-desc{max-width:100%;margin:0;font:400 13px/1.5 var(--aaa-font-body);letter-spacing:.4px;color:#8a8b91}
.ms-author{padding:5px 12px;font:600 11px/1 var(--aaa-font-body);letter-spacing:2px;color:#5c5d63;background:rgba(16,16,20,.7);border:1px solid #2a2b31;border-radius:999px;cursor:pointer;text-transform:uppercase}
.ms-author:hover,.ms-author:focus-visible{color:#ecebe6}
.ms-author.on{color:#2e9ed8;border-color:#2e9ed8}
/* UMA linha, TRÊS colunas: navegação | ficha do mapa em foco | opções da partida. Era
   uma pilha de quatro faixas empilhadas, que empurrava a grade para baixo da dobra. */
.ms-head{display:grid;grid-template-columns:minmax(300px,340px) minmax(0,1fr) auto;
  align-items:start;gap:16px 36px}
.ms-nav{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.ms-ficha{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:7px;text-align:left}
.ms-tagrow{display:flex;align-items:center;justify-content:flex-start;gap:10px;flex-wrap:wrap}
.ms-cat{font-size:11px;font-weight:700;letter-spacing:3px;padding:3px 10px;border:1px solid}
.ms-cat[data-cat="FAVELA"]{color:#e0762a;border-color:rgba(224,118,42,.5)}
.ms-cat[data-cat="ARENA"]{color:#8b8c92;border-color:rgba(139,140,146,.5)}
.ms-cat[data-cat="CIDADES"]{color:#8258d8;border-color:rgba(130,88,216,.5)}.ms-cat[data-cat="COMUNIDADE"]{color:#2e9ed8;border-color:rgba(46,158,216,.5)}
.ms-cat[data-cat="AI"]{color:#d8c02e;border-color:rgba(216,192,46,.5)}
/* o crachá de partidas jogadas — só existe quando o contador respondeu */
.ms-plays{font-family:var(--font);font-weight:700;font-size:11px;letter-spacing:2px;color:#b4d92e}
.ms-plays[hidden]{display:none}
.ms-byline{margin:0;font:400 12px/1.4 var(--aaa-font-body);letter-spacing:.6px;color:#8a8b91}
.ms-byline strong{color:#b9babf;font-weight:600}
.ms-badge-oficial{display:inline-block;margin-left:8px;padding:2px 8px;font:700 10px/1 var(--aaa-font-body);letter-spacing:2px;color:#b4d92e;border:1px solid rgba(180,217,46,.5);border-radius:3px;text-transform:uppercase}
.ms-badge-comunidade{display:inline-block;margin-left:8px;padding:2px 8px;font:700 10px/1 var(--aaa-font-body);letter-spacing:2px;color:#2e9ed8;border:1px solid rgba(46,158,216,.5);border-radius:3px;text-transform:uppercase}
.ms-count{font-family:var(--font);font-weight:600;font-size:11px;letter-spacing:2px;color:#5c5d63}
.ms-name{margin:0;font-family:var(--aaa-font-display);font-weight:400;font-size:40px;
  line-height:1;letter-spacing:1px;text-transform:uppercase;color:var(--ink-100);
  text-shadow:2px 2px 0 rgba(0,0,0,.5)}
.ms-meta{margin:0;font-family:var(--font);font-weight:700;font-size:12px;letter-spacing:2.4px;color:var(--ink-100)}
.ms-meta .ms-sep{color:var(--br-faixa);margin:0 8px}
.ms-desc{margin:0;font-size:13px;font-weight:400;color:#b9b9be;max-width:62ch;line-height:1.7}
.ms-match-options{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin:0;padding:11px 13px;
  background:rgba(16,16,20,.8);border-left:2px solid var(--br-faixa)}
.ms-match-options label{display:flex;flex-direction:column;gap:6px;min-width:112px;
  font:700 10px/1 var(--aaa-font-body);letter-spacing:2px;color:#8b8c92;text-transform:uppercase}
.ms-match-options select{height:32px;padding:0 28px 0 9px;border:1px solid rgba(236,235,230,.2);border-radius:0;
  background:#111216;color:#ecebe6;font:700 12px/1 var(--aaa-font-body);letter-spacing:1px;cursor:pointer}
.ms-match-options select:focus{outline:1px solid var(--br-faixa);border-color:var(--br-faixa)}
/* ---- faixa 2: o acervo, dono do corpo ---- */
.ms-body{position:relative;z-index:2;min-height:0;display:grid;padding:18px 40px 10px}
.ms-carousel{min-height:0;display:flex;flex-direction:column;gap:8px}
.ms-arrow{flex:0 0 auto;width:100%;max-width:1180px;margin:0 auto;height:24px;display:flex;align-items:center;justify-content:center;
  background:rgba(13,14,17,.7);border:1px solid #26272d;color:#9a9ba1;font-size:11px;line-height:1;cursor:pointer}
.ms-arrow:hover,.ms-arrow:focus-visible{border-color:#b4d92e;color:#ecebe6;background:rgba(13,14,17,.9)}
.ms-viewport{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#33343b transparent}
.ms-viewport::-webkit-scrollbar{width:6px}
.ms-viewport::-webkit-scrollbar-thumb{background:#33343b}
/* a grade cresce com a tela: `auto-fill` decide o número de colunas pela largura real.
   O TETO DE 3 sai da conta entre o mínimo do card e o max-width da faixa: 3×360+2×14 cabe
   em 1180, 4×360+3×14 não. Mexer num dos dois números sem o outro solta uma 4ª coluna. */
.ms-strip{--map-count:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));justify-content:stretch;gap:14px;width:100%;max-width:1180px;margin:0 auto;scroll-behavior:smooth}
.ms-thumb{position:relative;width:100%;min-width:0;padding:0;display:flex;flex-direction:column;cursor:pointer;
  background:rgba(16,16,20,.86);border:1px solid rgba(236,235,230,.12);opacity:.8;
  font-family:var(--aaa-font-body);text-align:left;text-transform:uppercase;
  transition:border-color var(--t) var(--ease),filter var(--t) var(--ease),opacity var(--t) var(--ease)}
.ms-thumb:hover,.ms-thumb:focus-visible{filter:brightness(1.15);opacity:1}
.ms-thumb.on{border:2px solid #b4d92e;opacity:1;box-shadow:0 0 26px rgba(180,217,46,.3)}
.ms-thumb-img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.ms-thumb-copy{display:flex;flex-direction:column;gap:3px;padding:8px 11px 10px;background:rgba(10,10,12,.85)}
.ms-thumb-name{font-weight:700;font-size:12px;letter-spacing:2px;color:#c9c9cc;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-thumb.on .ms-thumb-name{color:#b4d92e}
.ms-thumb-sub{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ms-thumb-cat{font-weight:600;font-size:9px;letter-spacing:2px}
.ms-thumb-cat[data-cat="FAVELA"]{color:#e0762a}
.ms-thumb-cat[data-cat="ARENA"]{color:#8b8c92}
.ms-thumb-cat[data-cat="CIDADES"]{color:#8258d8}
/* partidas jogadas no card: número seco, sem rótulo — a coluna inteira é a mesma unidade */
.ms-thumb-plays{font-family:var(--font);font-weight:700;font-size:10px;letter-spacing:1.5px;color:#7d8a52}
.ms-thumb.on .ms-thumb-plays{color:#b4d92e}
.ms-diamond{position:absolute;top:6px;right:6px;width:8px;height:8px;background:var(--br-faixa);transform:rotate(45deg)}
.ms-dashes{flex:0 0 auto;display:flex;justify-content:center;gap:6px}
.ms-dashes i{width:18px;height:3px;background:#33343b}.ms-dashes i.on{background:#b4d92e}
/* ---- faixa 3: rodapé, VOLTAR num canto e CONTINUAR no outro ---- */
.ms-foot{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding:14px 40px 22px}
.ms-actions{position:static}
#map-screen .ms-actions .btn-big{transform:skewX(-8deg);background:linear-gradient(180deg,#cfe84a,#b4d92e);padding:12px 40px;border:0}
#map-screen .ms-actions .btn-big>*{display:block;transform:skewX(8deg);font:400 20px/1 var(--aaa-font-display);letter-spacing:3px;color:#131313;padding:0}
@media(max-height:780px){
  .ms-topbar{padding:14px 32px 12px;gap:8px}
  .ms-body{padding:12px 32px 8px}
  .ms-name{font-size:30px}
  .ms-desc{display:none}
  .ms-match-options{padding:9px 11px}.ms-match-options select{height:28px}
  .ms-foot{padding:10px 32px 14px}
}
@media(max-width:1120px){
  /* a linha de três só sobrevive enquanto as três colunas couberem: abaixo disso as
     opções descem para uma segunda linha, e a navegação segue colada na ficha. */
  .ms-head{grid-template-columns:minmax(280px,320px) minmax(0,1fr)}
  #ms-match-options{grid-column:1 / -1}
}
@media(max-width:820px){
  .ms-head{grid-template-columns:minmax(0,1fr)}
  .ms-strip{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
}

/* ============ CHAR ATTRS (ficha do personagem — mockup tela 03) ============ */
/* RARIDADE = PASTILHA PREENCHIDA, e numa linha só dela (referência 03: o "ÉPICO" é um
   bloco roxo cheio ABAIXO do nome, não uma etiqueta de contorno grudada no fim do
   título). O `background` sai de `currentColor` porque quem escolhe a cor é o main.js,
   inline (`rEl.style.color = RARITIES[tier][1]`) — então o tom da raridade continua
   mandando e o CSS só o dilui pra virar fundo. Navegador sem color-mix cai no visual
   antigo de contorno, que continua legível. */
.rarity{align-self:flex-start;font-family:var(--mono);font-size:var(--fs-50);letter-spacing:var(--tr-2);
  border:1px solid currentColor;padding:3px 10px;clip-path:var(--cut-sm);
  background:color-mix(in srgb,currentColor 22%,transparent)}
#char-attrs{display:flex;flex-direction:column;gap:var(--s-2);margin-top:var(--s-2)}
.attr{display:grid;grid-template-columns:92px 1fr;align-items:center;gap:12px;
  font-family:var(--mono);font-size:var(--fs-50);letter-spacing:var(--tr-1);color:var(--ink-300);text-transform:uppercase}
/* BARRA SEGMENTADA (referência 03): os atributos da referência são blocos separados por
   sulcos, não um traço contínuo — é o que faz "3 de 5" ser CONTÁVEL de relance em vez de
   ter que estimar comprimento. Os sulcos são cortados por cima com um degradê repetido,
   então valem pro trilho e pro preenchimento ao mesmo tempo e o `width:%` que o main.js
   escreve no <i> continua sendo a única fonte do valor. */
.attr-bar{position:relative;height:10px;background:var(--bg-700)}
.attr-bar i{display:block;height:100%;background:var(--br-faixa)}
.attr-bar::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,
    transparent 0 calc(10% - 3px),var(--bg-900) calc(10% - 3px) 10%)}

/* ============ PLAYER PLATE (card do jogador no menu — mockup tela 01) ============ */
.player-plate{display:flex;align-items:center;gap:12px;background:rgba(var(--bg-900-rgb),.85);
  border:1px solid var(--line);clip-path:var(--cut);padding:10px 14px;cursor:pointer;text-align:left;
  font-family:var(--font);transition:border-color var(--t) var(--ease)}
.player-plate:hover,.player-plate:focus-visible{border-color:var(--sys)}
.pp-avatar{width:44px;height:44px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  background:var(--bg-600);color:var(--br-faixa);font-weight:700;font-size:16px;letter-spacing:1px;clip-path:var(--cut-sm)}
.pp-info{display:flex;flex-direction:column;gap:2px;min-width:170px}
.pp-nick{color:var(--ink-100);font-weight:700;letter-spacing:var(--tr-2);font-size:var(--fs-200);text-transform:uppercase}
.player-plate[data-empty="1"] .pp-nick{color:var(--am)}
.pp-level{font-family:var(--mono);font-size:10px;letter-spacing:2px;color:var(--am)}
.xp-bar{height:4px;background:var(--bg-700);margin-top:3px}
.xp-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--br-sinal),var(--br-faixa))}
.xp-num{font-family:var(--mono);font-size:9px;letter-spacing:1px;color:var(--ink-400)}

/* ============ AJUSTES DE PARIDADE (references/telas) ============ */
/* 02 — TARJA de rodapé com o elenco. Na referência é uma faixa escura colada na base da
   placa, com o número em letra miúda apagada — não texto solto boiando sobre a foto,
   que era como "9 PERSONAGENS" caía em cima da arte na captura. A altura vira token
   porque o `.team-cta` se ancora nela: se a tarja mudar, os dois andam juntos. */
.team-count{position:absolute;bottom:0;left:0;right:0;z-index:4;text-align:center;
  box-sizing:border-box;height:var(--team-band-h);line-height:calc(var(--team-band-h) - 1px);
  background:rgba(var(--bg-900-rgb),.90);border-top:1px solid rgba(255,255,255,.10);
  font-family:var(--mono);font-size:11px;letter-spacing:1px;color:var(--ink-200);
  text-shadow:none;pointer-events:none}

/* 04 — chrome persistente da map screen: jogador no topo (nível/XP), VOLTAR embaixo */
.ms-top{position:absolute;top:0;left:0;right:0;z-index:2;padding:14px 18px;
  background:linear-gradient(180deg,rgba(var(--bg-900-rgb),.85),rgba(var(--bg-900-rgb),0))}
.ms-top-player{display:flex;align-items:center;gap:10px;font-family:var(--font);font-weight:700;
  font-size:var(--fs-200);letter-spacing:var(--tr-2);color:var(--ink-100);text-transform:uppercase}
.ms-top-player .pp-avatar{width:34px;height:34px;font-size:12px}
#map-screen .btn-back{position:static;top:auto;left:auto;bottom:auto;padding:10px 20px;
  font:600 13px/1 var(--aaa-font-body);letter-spacing:2px;color:#c9c9cc;
  background:rgba(10,10,12,.55);border:1px solid rgba(236,235,230,.18)}

/* Brasão da facção no TOPO do card (pedido do dono, 06/08) + setas do seletor de mapa
   mais ÓBVIAS (mesmo pedido): as de 34px sumiam na moldura — viram alvo de 52px com
   fundo de chip e hover amarelo. */
.team-crest{width:38px;height:38px;margin:7px auto 1px;display:block;
  object-fit:contain;z-index:2;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6));position:relative}
.team-crest-fallback{box-sizing:border-box;display:grid;place-items:center;border:1px solid var(--tc);
  border-radius:50%;background:rgba(var(--bg-900-rgb),.72);color:var(--tc);font-family:var(--mono);
  font-size:14px;font-weight:800;letter-spacing:1px}
/* Pedido do dono (06/08, com print): sem "FACÇÃO 0N"; brasão no topo, NOME abaixo dele e
   slogan abaixo do nome, tudo CENTRALIZADO. O plate deixa de ser linha no canto e vira
   coluna central no topo do card. */
.team-card .team-plate{position:relative;display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:2px;padding:0 10px}
.team-card .team-name{display:block;text-align:center}
.team-card .team-slogan{display:block;text-align:center;max-width:26ch}
/* setas do acervo: alvo largo no topo e no pé da coluna vertical (21/08) */
.ms-arrow{width:100%;height:26px;font-size:12px;line-height:1;background:rgba(var(--bg-900-rgb),.85);
  border:1px solid var(--line-2);color:var(--am)}
.ms-arrow:hover{background:var(--am);color:#141216}
/* rodapé do menu: online + links de dev (substitui a frase de sátira) */
.menu-footer{position:fixed;right:min(4vw,42px);bottom:48px;z-index:60;
  display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;justify-content:flex-end;
  font-size:12px;color:var(--ink-300);text-align:right;max-width:min(70vw,760px)}
.menu-version{position:fixed;right:min(4vw,42px);bottom:14px;z-index:60;color:var(--ink-200);
  font-size:12px;font-weight:700;letter-spacing:1px;text-align:right}
/* Bolinha virou LOSANGO: o redesign proíbe raio, e o losango já é o sinal de
   "isto está vivo/é você" em três outros lugares (você no radar, thumb do slider,
   canto do card selecionado). Trocar por quadrado puro perderia essa rima. */
.menu-footer .mf-online::before{content:"";display:inline-block;width:7px;height:7px;border-radius:0;
  transform:rotate(45deg);background:#4ade60;margin-right:6px;box-shadow:0 0 6px rgba(74,222,96,.8);
  vertical-align:baseline}
.menu-footer a{color:var(--ink-200);text-decoration:none;border-bottom:0}
.menu-footer a:hover{color:var(--am)}
.menu-footer .mf-online{color:var(--verde,#7dc98f);font-weight:700}
/* `flex-basis:100%` dá linha própria sem sair do flex-wrap do rodapé. */
.menu-footer .mf-social{flex-basis:100%;display:flex;gap:10px;align-items:center;
  justify-content:inherit;margin-top:2px}
.menu-footer .mf-social a{display:inline-flex;width:30px;height:30px;border-bottom:0;
  align-items:center;justify-content:center;border:1px solid var(--line-2);border-radius:7px}
.menu-footer .mf-social svg{width:16px;height:16px;fill:currentColor;display:block}

/* ---- MENU EM CELULAR RETRATO (print do dono, 07/08: logo cortado no meio e o
   rodapé atropelando o último item). O logo é PINTADO no wallpaper 16:9; com
   `cover` num viewport em pé a imagem escala pela ALTURA e o logo estoura a
   largura. Em retrato o wallpaper passa a caber pela LARGURA (faixa no topo com
   o logo inteiro, resto em --bg-900), o menu desce pra baixo da faixa e o
   rodapé vira fluxo normal no fim da página em vez de fixed por cima do menu. */
@media (max-width:640px) and (orientation:portrait){
  .cs-wallpaper::after{background-position:center top}
  .cs-left{position:static;padding:56vw var(--s-5) 0;bottom:auto;left:auto}
  #main-menu{display:block}
  .menu-footer{position:static;justify-content:flex-start;text-align:left;
    max-width:none;padding:18px var(--s-5) 24px}
  .menu-version{position:static;display:block;padding:0 var(--s-5) 24px;text-align:right}
}

/* =========================================================================
   PASSO 1 — CARTAZ DO MAPA + DROPDOWN DE ARMAS (reprova do dono, com print)
   =========================================================================
   Contexto de por que este bloco existe DE NOVO: o ajuste de 06/08 (linha ~1571)
   dizia "setas do seletor de mapa mais ÓBVIAS" mas mexeu na `.ms-arrow` — as setas
   da tela CHEIA de mapa. As que o dono vê primeiro, e as do print, são as do CARTAZ
   do passo 1 (`.map-arrows .map-arrow`), que continuaram 28×42 com fundo
   `rgba(bg-900,.7)` boiando em `top:44%`. Ou seja: o pedido foi atendido no
   elemento errado, e por isso ele pediu duas vezes. Aqui é o elemento certo.

   Todo comentário aqui é de bloco: barra-barra NÃO é comentário em CSS e neste
   arquivo já matou um @keyframes inteiro.
   ========================================================================= */

/* ---- 1) AS SETAS: alvo grande, NA BORDA da foto, com chapa opaca ----
   Três defeitos no print, três correções:
   (a) "escondidas" -> a chapa era translúcida (.7) sobre foto clara. Agora é .92 +
       borda amarela + contorno escuro: o glifo tem fundo próprio, então lê sobre
       areia do Piscinão, céu do praca_poderes ou concreto do Havan igualmente.
   (b) "no meio da moldura" -> ficavam em top:44% DENTRO da arte, disputando com a
       imagem. Agora cavalgam a borda (metade fora, metade dentro) na altura média.
   (c) alvo pequeno -> 28×42 (1176px²) vira 48×66 (3168px²), ~2,7× a área de clique.
   O deslocamento pra fora vive num token local porque a `.map-picker` tem que abrir
   a mesma margem: a `.cs-setup` é `overflow-y:auto`, e overflow-x vira `auto` junto,
   então vazar pra fora do padding do painel criaria BARRA HORIZONTAL. Nada sai da
   caixa: a margem cede exatamente o espaço que a seta ocupa. */
.map-picker{--ma-out:24px;--ma-w:48px;margin-inline:var(--ma-out)}
/* Quem carrega o `transform` de centralização é o CONTAINER, nunca o botão: o
   `.map-arrow:active{transform:translateY(1px)}` genérico sobrescreveria um
   translateY(-50%) posto no botão e o clique cairia fora do alvo (armadilha já
   documentada na .ms-arrow, linha ~1499). */
.map-arrows{position:absolute;top:50%;left:calc(-1 * var(--ma-out));right:calc(-1 * var(--ma-out));
  z-index:4;transform:translateY(-50%);display:flex;align-items:center;
  justify-content:space-between;padding:0;pointer-events:none}
.map-arrows .map-arrow{width:var(--ma-w);height:66px;flex:0 0 auto;pointer-events:auto;
  font-size:32px;line-height:1;color:var(--br-faixa);
  background:rgba(var(--bg-900-rgb),.92);border:1px solid var(--br-faixa);
  box-shadow:0 2px 12px rgba(0,0,0,.7);clip-path:var(--cut-sm)}
/* hover/foco INVERTE a chapa (amarelo cheio, glifo escuro) — mesmo idioma do
   `.btn-big`/`.btn-cta` e da `.ms-arrow`: amarelo preenchido = "pode clicar aqui". */
.map-arrows .map-arrow:hover,
.map-arrows .map-arrow:focus-visible{background:var(--br-faixa);border-color:var(--br-faixa);
  color:var(--bg-900);box-shadow:0 2px 16px rgba(0,0,0,.75)}
.map-arrows .map-arrow:focus-visible{outline:2px solid var(--sys);outline-offset:2px}
/* telas estreitas: a seta encolhe junto com o cartaz, mas continua alvo de dedo (44px) */
@media(max-width:900px){
  .map-picker{--ma-out:16px;--ma-w:40px}
  .map-arrows .map-arrow{height:56px;font-size:26px}
}

/* ---- 2) A MOLDURA: vinheta que ANCORA o nome + friso amarelo ----
   O nome do mapa flutuava sobre a foto com só um text-shadow. Sobre céu claro do
   praca_poderes isso é cinza-sobre-branco. A vinheta agora fecha quase opaca na base (a
   faixa onde o nome mora) e abre no meio (onde a arte tem que aparecer). */
.pane-match .map-picker::after{
  background:linear-gradient(0deg,
    rgba(var(--bg-900-rgb),.96) 0%,
    rgba(var(--bg-900-rgb),.80) 16%,
    rgba(var(--bg-900-rgb),.10) 46%,
    rgba(var(--bg-900-rgb),.46) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)}
/* moldura um degrau mais visível que `--line` (o cartaz é o protagonista do passo) */
.pane-match #map-thumb{border-color:var(--line-2)}
/* friso amarelo à esquerda do bloco do nome: é a "faixa" do sistema (sinaleiro/lambe)
   e dá um começo de linha pro olho, em vez de texto começando no nada. */
.pane-match .map-side{border-left:3px solid var(--br-faixa);padding-left:var(--s-3)}

/* ---- 3) INDICADOR DE POSIÇÃO: 5 quadradinhos de 6px eram invisíveis ----
   Vira uma régua de traços sobre chapa própria (o mesmo remédio das setas: sobre
   foto, contraste só existe se o elemento trouxer o próprio fundo). O traço ativo é
   mais LARGO além de amarelo — posição fica legível mesmo sem distinguir a cor. */
#map-dots{position:absolute;top:var(--s-2);right:var(--s-2);z-index:3;display:flex;gap:4px;
  align-items:center;padding:5px 7px;background:rgba(var(--bg-900-rgb),.78);
  border:1px solid rgba(255,255,255,.10);clip-path:var(--cut-sm)}
#map-dots i{width:12px;height:4px;display:block;background:rgba(255,255,255,.38);
  transition:background var(--t) var(--ease),width var(--t) var(--ease)}
#map-dots i.on{width:22px;background:var(--br-faixa)}

/* ---- 4) ÍCONES DO DROPDOWN DE ARMAS: render real no lugar do glifo vetorial ----
   O dono chamou de "glifos pixelados brancos toscos" — são os SVGs de 20×14 do
   WPN_ICONS (main.js): silhuetas de 4 retângulos que, no tamanho servido, viram
   borrão. Os renders de verdade já existem em /img/weapons/ (360×138, com alpha),
   os mesmos usados na página de armas.

   POR QUE ISTO É FEITO EM CSS E NÃO NA MARCAÇÃO: o main.js escreve o innerHTML da
   `.dd-list` e do `#wpn-dd-label`, e main.js está fora do escopo desta mudança.
   Então o <svg> vira apenas a CAIXA do ícone: os filhos somem e a arte entra como
   background. Largura/altura em CSS ganham dos atributos `width`/`height` do SVG.
   Consertar na fonte é trocar WPN_ICONS por <img> — 4 linhas em main.js. */
#wpn-dd .dd-item > svg,
#wpn-dd .dd-cur > svg{width:48px;height:22px;
  background-repeat:no-repeat;background-position:center;background-size:contain;
  background-image:url('/img/weapons/ak.webp');
  /* os renders são pretos/oliva sobre alpha; sobre `--bg-700` a silhueta sumiria.
     O brilho abre o metal e o halo branco de 1px devolve a borda do cano. */
  filter:brightness(1.5) contrast(.95)
         drop-shadow(0 0 1px rgba(255,255,255,.5)) drop-shadow(0 1px 2px rgba(0,0,0,.9));
  transition:filter var(--t) var(--ease)}
#wpn-dd .dd-item > svg > *,
#wpn-dd .dd-cur > svg > *{display:none}
#wpn-dd .dd-item:hover > svg,
#wpn-dd .dd-item:focus-visible > svg{filter:brightness(1.85) contrast(.95)
  drop-shadow(0 0 1px rgba(255,255,255,.65)) drop-shadow(0 1px 2px rgba(0,0,0,.9))}

/* itens da lista: o `data-id` do main.js é o mapeamento estável arma -> render */
#wpn-dd .dd-item[data-id="pistols"] > svg{background-image:url('/img/weapons/pistol.webp')}
#wpn-dd .dd-item[data-id="knife"] > svg{background-image:url('/img/weapons/knife.webp')}
#wpn-dd .dd-item[data-id="awp"] > svg{background-image:url('/img/weapons/awp.webp')}
/* TODAS = duas armas empilhadas (fuzil por cima, pistola por baixo à direita).
   Duas camadas de background no MESMO elemento: mantém a caixa de 48×22 e a altura
   da linha igual à dos outros itens. */
#wpn-dd .dd-item[data-id="all"] > svg,
#wpn-dd .dd-cur > svg[width="22"]{
  background-image:url('/img/weapons/ak.webp'),url('/img/weapons/pistol.webp');
  background-size:42px auto,23px auto;
  background-position:left top,right bottom}
/* Botão FECHADO: o main.js não carimba `data-id` no rótulo atual, só o SVG. O
   discriminador possível é o próprio SVG — `width` separa TODAS(22)/AWP(26) e o
   `:has()` separa PISTOLA de FACA (as duas têm width 20). Se o WPN_ICONS mudar, o
   pior caso é o botão cair no ícone padrão (TODAS): degrada, não quebra. */
#wpn-dd .dd-cur > svg[width="26"]{background-image:url('/img/weapons/awp.webp');
  background-size:contain;background-position:center}
#wpn-dd .dd-cur > svg[width="20"]:has(rect[y="1"]){background-image:url('/img/weapons/pistol.webp')}
#wpn-dd .dd-cur > svg[width="20"]:has(rect[y="10"]){background-image:url('/img/weapons/knife.webp')}
/* o ícone cresceu de 20px pra 48px: a linha precisa de ar pra não virar aperto */
#wpn-dd .dd-item{gap:12px;padding:9px 12px}
#wpn-dd .dd-cur{gap:12px}

/* Ícones do dropdown de armas agora são <img> reais (main.js WPN_ICONS) — o hack de
   background por seletor de SVG do polish anterior fica inerte e pode sair depois. */
.dd-ico{width:44px;height:17px;object-fit:contain;vertical-align:middle;margin-right:8px}
.dd-ico-all{display:inline-flex;flex-direction:column;gap:1px;margin-right:8px}
.dd-ico-all .dd-ico{width:36px;height:12px;margin:0}   /* 2×12 + gap 1 = 25px: cabe no .dd-btn de 47px sem estufar (ARMAS = BOTS = botões) */

/* ============================================================================
   CINEMATIC FLOW — alpha.58
   A moldura é um sistema de navegação, não um enfeite por tela: o mesmo broadcast,
   capítulo e progresso atravessam home, setup, facção, personagem, mapas, sistema,
   pausa e resultado. Direção: cartaz de rua brasileiro + transmissão esportiva.
   A arte-base veio de references/telas; os conceitos derivados estão ao lado delas.
   ============================================================================ */
:root{--cine-frame:rgba(240,240,237,.22);--cine-paper:rgba(20,16,8,.88);--cine-gutter:18px;
  --cine-red:#e2402c;--cine-yellow:#ffc93f;--cine-enter:cinematicEnter 420ms cubic-bezier(.16,.84,.24,1) both}
#cine-chrome{position:fixed;inset:0;z-index:88;pointer-events:none;opacity:0;color:var(--ink-100);
  transition:opacity var(--t) var(--ease)}
body[data-cine-screen] #cine-chrome{opacity:1}
.cine-broadcast{position:absolute;left:var(--cine-gutter);top:13px;display:flex;align-items:center;gap:8px;
  min-height:25px;padding:4px 10px 4px 7px;background:rgba(var(--bg-900-rgb),.82);
  border-left:3px solid var(--cine-red);font-family:var(--mono);font-size:10px;letter-spacing:2px}
.cine-broadcast i{width:7px;height:7px;border-radius:50%;background:var(--cine-red);box-shadow:0 0 0 3px rgba(226,64,44,.18)}
.cine-broadcast span{font-weight:700;color:var(--ink-100)}
.cine-broadcast b{font-weight:400;color:var(--ink-300)}
.cine-chapter{position:absolute;right:var(--cine-gutter);top:12px;display:flex;align-items:baseline;gap:12px;
  padding:4px 9px;background:rgba(var(--bg-900-rgb),.72);text-align:right;text-transform:uppercase}
.cine-chapter small{font-family:var(--mono);font-size:9px;letter-spacing:2px;color:var(--cine-yellow)}
.cine-chapter span{font-size:12px;letter-spacing:2px;color:var(--ink-200)}
.cine-stepbar{position:absolute;left:50%;bottom:42px;width:min(260px,28vw);height:3px;
  transform:translateX(-50%);background:rgba(255,255,255,.14);box-shadow:0 0 0 5px rgba(var(--bg-900-rgb),.38)}
.cine-stepbar i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--cine-red),var(--cine-yellow));
  transition:width 420ms var(--ease)}
.cine-corner{position:absolute;width:34px;height:34px;border-color:var(--cine-frame);border-style:solid}
.cine-corner-tl{left:var(--cine-gutter);top:48px;border-width:1px 0 0 1px}
.cine-corner-tr{right:var(--cine-gutter);top:48px;border-width:1px 1px 0 0}
.cine-corner-bl{left:var(--cine-gutter);bottom:35px;border-width:0 0 1px 1px}
.cine-corner-br{right:var(--cine-gutter);bottom:35px;border-width:0 1px 1px 0}
.cine-surface:not(.hidden){animation:var(--cine-enter)}
@keyframes cinematicEnter{from{opacity:.35;transform:scale(1.012)}to{opacity:1;transform:scale(1)}}
.cine-surface :is(button,a,input,select,textarea):focus-visible{outline:3px solid var(--cine-yellow);outline-offset:4px;
  box-shadow:0 0 0 7px rgba(9,7,4,.72)}

/* HOME — o item ativo vira placa física; a coluna parece colada sobre a key art. */
#main-menu.cine-surface .cs-left::before{content:"";position:absolute;inset:-28px -42px -24px -6px;z-index:-1;
  background:linear-gradient(90deg,rgba(var(--bg-900-rgb),.94),rgba(var(--bg-900-rgb),.58) 68%,transparent);
  clip-path:polygon(0 0,92% 0,100% 9%,94% 100%,0 96%)}
#main-menu.cine-surface .cs-menu-label{display:flex;align-items:center;gap:9px;color:var(--cine-yellow)}
#main-menu.cine-surface .cs-menu-label::before{content:"";width:28px;height:4px;background:var(--cine-red)}
#main-menu.cine-surface .cs-item{border-left:3px solid transparent;transform-origin:left center}
#main-menu.cine-surface .cs-item:hover,#main-menu.cine-surface .cs-item:focus-visible,
#main-menu.cine-surface .cs-item[aria-current="true"]{border-left-color:var(--cine-yellow);
  background:linear-gradient(90deg,var(--cine-yellow),#e3a72e);color:var(--bg-900);transform:skew(-2deg) translateX(9px)}

/* FACÇÕES — uma tomada horizontal de pôsteres altos, scroll-snap e setas de projeção. */
#team-select.cine-surface{padding:58px 28px 54px;gap:12px;background-image:
  linear-gradient(90deg,rgba(var(--bg-900-rgb),.98) 0%,rgba(var(--bg-900-rgb),.52) 48%,rgba(var(--bg-900-rgb),.9) 100%),
  radial-gradient(circle at 50% 28%,rgba(255,201,63,.12),transparent 40%),var(--wall,url('/img/select-bg.png'))}
#team-select.cine-surface .ts-head{align-self:stretch;align-items:flex-start;padding-left:max(5vw,54px);z-index:2}
#team-select.cine-surface .screen-title{text-align:left;padding-bottom:8px;font-size:clamp(34px,4vw,62px)}
#team-select.cine-surface .screen-title::after{left:0;transform:none;width:170px}
#team-select.cine-surface .ts-hint{text-align:left}
.team-rail{width:min(1420px,96vw);flex:1 1 auto;min-height:0;display:grid;
  grid-template-columns:48px minmax(0,1fr) 48px;gap:10px;align-items:stretch}
.team-row{display:flex;grid-template-columns:none;grid-template-rows:none;width:auto;min-width:0;min-height:0;
  gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:thin;
  scrollbar-color:var(--cine-yellow) rgba(255,255,255,.08);padding:5px 2px 12px}
.team-card{flex:0 0 calc((100% - 36px)/4);height:100%;scroll-snap-align:center;border-width:1px;
  box-shadow:0 18px 40px rgba(0,0,0,.34)}
.team-card.faction-excluded{display:none}
.team-card:hover,.team-card:focus-visible{transform:translateY(-8px) rotate(-.35deg);box-shadow:0 22px 48px rgba(0,0,0,.62)}
.team-rail-arrow{appearance:none;border:1px solid var(--line-2);background:rgba(var(--bg-900-rgb),.82);
  color:var(--cine-yellow);font:700 38px/1 var(--font);cursor:pointer;clip-path:var(--cut-sm)}
.team-rail-arrow:hover,.team-rail-arrow:focus-visible{background:var(--cine-yellow);color:var(--bg-900);border-color:var(--cine-yellow)}

/* PERSONAGEM — a miniatura real é a estrela; o wallpaper vira só atmosfera lateral. */
#char-select.cine-surface{padding-top:62px;background-image:
  linear-gradient(90deg,rgba(var(--bg-900-rgb),.99) 0%,rgba(var(--bg-900-rgb),.94) 36%,rgba(var(--bg-900-rgb),.82) 72%,rgba(var(--bg-900-rgb),.92)),
  var(--wall,url('/img/select-bg.png'))}
#char-select.cine-surface .ts-head{position:absolute;left:clamp(140px,13vw,220px);top:54px;align-items:flex-start;z-index:3}
#char-select.cine-surface .screen-title{text-align:left;font-size:clamp(30px,3.3vw,54px)}
#char-select.cine-surface .screen-title::after{left:0;transform:none}
#char-select.cine-surface .char-stage{width:min(1420px,94vw);grid-template-columns:92px minmax(300px,390px) 1fr;
  padding-top:84px;gap:clamp(18px,2vw,34px)}
#char-select.cine-surface .char-sheet{background:linear-gradient(145deg,rgba(var(--bg-700-rgb),.97),rgba(var(--bg-900-rgb),.82));
  border:1px solid var(--line-2);box-shadow:14px 18px 0 rgba(0,0,0,.23);transform:rotate(-.35deg)}
#char-select.cine-surface .char-preview-box{position:relative;isolation:isolate}
#char-select.cine-surface .char-preview-box::before{content:"";position:absolute;z-index:-1;width:min(45vw,680px);aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle,rgba(255,201,63,.2),rgba(226,64,44,.06) 42%,transparent 69%)}
#char-select.cine-surface #char-preview{height:min(74vh,760px);width:auto;max-width:100%}

/* SISTEMA E ARQUIVO — formulários viram mesa de operação, não modal sobre vazio. */
#settings-panel.cine-surface,#ranking-panel.cine-surface,#feedback-panel.cine-surface,
#howto-panel.cine-surface,#mobile-warning.cine-surface{background:
  linear-gradient(115deg,rgba(var(--bg-900-rgb),.98) 0 56%,rgba(var(--bg-800-rgb),.88) 56%),
  repeating-linear-gradient(0deg,transparent 0 36px,rgba(255,255,255,.025) 36px 37px)}
#settings-panel.cine-surface{align-items:stretch;padding:70px 5vw 58px;gap:14px}
#settings-panel.cine-surface>.screen-title{align-self:flex-start;text-align:left;font-size:clamp(38px,5vw,72px)}
#settings-panel.cine-surface>.screen-title::after{left:0;transform:none;width:190px}
#settings-panel.cine-surface .settings-wrap{width:100%;max-width:none;flex:1;min-height:0;background:rgba(var(--bg-700-rgb),.76);
  border-top:4px solid var(--cine-yellow);box-shadow:24px 24px 0 rgba(0,0,0,.22)}
#settings-panel.cine-surface .settings-wrap{flex:none}
#ranking-panel.cine-surface .center-panel,#feedback-panel.cine-surface .center-panel,
#howto-panel.cine-surface .center-panel,#mobile-warning.cine-surface .center-panel{max-width:min(900px,84vw);width:100%;
  align-items:flex-start;text-align:left;border-top:5px solid var(--cine-yellow);padding:clamp(26px,4vw,58px);
  box-shadow:28px 28px 0 rgba(0,0,0,.22);transform:rotate(-.2deg)}
#ranking-panel.cine-surface .center-panel h2,#feedback-panel.cine-surface .center-panel h2,
#howto-panel.cine-surface .center-panel h2{font-size:clamp(40px,5vw,74px);letter-spacing:4px}

/* PAUSA / RESULTADO — a mesma transmissão continua quando a ação para. */
#pause-menu.cine-surface{align-items:flex-start;padding-left:8vw;background:
  linear-gradient(90deg,rgba(var(--bg-900-rgb),.96),rgba(var(--bg-900-rgb),.74) 42%,rgba(var(--bg-900-rgb),.35))}
#pause-menu.cine-surface .screen-title{text-align:left;font-size:clamp(54px,7vw,104px);letter-spacing:1px}
#pause-menu.cine-surface .pause-actions{align-items:stretch;width:min(480px,42vw);border-top:5px solid var(--cine-yellow);
  box-shadow:22px 22px 0 rgba(0,0,0,.24);transform:rotate(-.35deg)}
#match-end.cine-surface .me-wrap{border-top:5px solid var(--cine-yellow)}
#match-end.cine-surface .me-wrap:has(.me-hero:empty){grid-template-columns:minmax(0,760px);justify-content:center;
  padding:8vh 4vw 6vh}
#match-end.cine-surface .me-wrap:has(.me-hero:empty) .me-hero{display:none}
#match-end.cine-surface .me-col{position:relative}
#match-end.cine-surface .me-col::before{content:"ÚLTIMA RODADA //";display:block;font-family:var(--mono);font-size:10px;
  letter-spacing:4px;color:var(--cine-yellow);margin-bottom:12px}

@media(max-width:900px){
  :root{--cine-gutter:10px}
  .cine-broadcast b,.cine-chapter small{display:none}.cine-chapter span{font-size:10px}.cine-stepbar{width:34vw}
  .team-rail{grid-template-columns:40px minmax(0,1fr) 40px}.team-card{flex-basis:min(72vw,280px)}
  #team-select.cine-surface .ts-head{padding-left:48px}
  #settings-panel.cine-surface{padding-inline:20px}
}
@media(max-height:760px){.cine-stepbar{bottom:14px}}
@media (prefers-reduced-motion: reduce){
  /* cine-reduced-motion */
  .cine-surface:not(.hidden){animation:none}.cine-stepbar i{transition:none}.team-row{scroll-behavior:auto}
}

/* ============ ALPHA.59 · BUG-42 · COMPOSIÇÕES CINEMATOGRÁFICAS ============
   O chrome da alpha.58 foi preservado, mas os seis shells abaixo foram trocados no
   DOM. Este bloco não tenta "embelezar cards": ele dá a cada decisão uma montagem
   própria (programa, missão, facção, elenco, mapa e sistema). */

/* ABERTURA — duas decisões grandes + serviços em trilho, nunca uma lista vertical. */
.home-broadcast{position:relative;z-index:5;width:100%;height:100%;box-sizing:border-box;
  display:grid;grid-template-rows:1fr auto;padding:clamp(112px,13vh,150px) clamp(52px,6vw,96px) 68px;
  background:linear-gradient(90deg,rgba(var(--bg-900-rgb),.96) 0 34%,rgba(var(--bg-900-rgb),.56) 55%,transparent 78%)}
.home-title-block{align-self:start;max-width:min(620px,48vw);text-shadow:0 3px 24px #000}
.home-season{font-family:var(--mono);font-size:11px;letter-spacing:4px;color:var(--cine-yellow)}
.home-title-block h1{margin:13px 0 8px;font-size:clamp(46px,5.6vw,88px);line-height:.86;letter-spacing:-1px}
.home-title-block h1 em{font-style:normal;color:var(--cine-yellow)}
.home-title-block p{max-width:44ch;color:var(--ink-200);font-weight:600;letter-spacing:.3px}
.home-broadcast .cs-menu{width:min(820px,70vw);padding:0;background:none;border:0;box-shadow:none;gap:12px}
.home-mode-deck{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.home-broadcast .home-mode-card{position:relative;min-height:118px;display:grid;grid-template-columns:52px 1fr auto;
  align-items:end;gap:14px;padding:18px 20px;text-align:left;color:#fff;border:1px solid rgba(255,255,255,.22);
  background:linear-gradient(135deg,rgba(var(--bg-900-rgb),.96),rgba(var(--bg-700-rgb),.74));
  clip-path:polygon(0 0,96% 0,100% 18%,100% 100%,4% 100%,0 82%)}
.home-broadcast .home-mode-card::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:var(--cine-red)}
.home-broadcast .home-mode-card:nth-child(2)::before{background:var(--cine-yellow)}
.home-mode-no{align-self:start;font:700 13px/1 var(--mono);color:var(--ink-300)}
.home-mode-copy{display:flex;flex-direction:column;gap:5px}.home-mode-copy b{font-size:clamp(25px,2.3vw,36px);letter-spacing:1px}
.home-mode-copy small{font:700 11px/1.3 var(--mono);letter-spacing:1px;color:var(--ink-300)}
.home-broadcast .home-mode-card .cs-tick{font:800 10px/1 var(--mono);letter-spacing:1px;color:var(--cine-yellow)}
.home-broadcast .home-mode-card:hover,.home-broadcast .home-mode-card:focus-visible,
.home-broadcast .home-mode-card[aria-current="true"]{transform:translateY(-6px);color:#17120c;border-color:var(--cine-yellow);
  background:linear-gradient(135deg,#ffd95e,var(--cine-yellow));box-shadow:0 18px 48px rgba(0,0,0,.46)}
.home-broadcast .home-mode-card:hover small,.home-broadcast .home-mode-card:focus-visible small,
.home-broadcast .home-mode-card[aria-current="true"] small,.home-broadcast .home-mode-card:hover .cs-tick,
.home-broadcast .home-mode-card:focus-visible .cs-tick{color:#342716}
.home-service-strip{display:flex;align-items:center;gap:4px;border-top:1px solid rgba(255,255,255,.18);padding-top:9px}
.home-broadcast .home-service-strip .cs-item{width:auto;min-height:42px;padding:8px 14px;background:rgba(var(--bg-900-rgb),.7);
  border:1px solid transparent;font:700 10px/1 var(--mono);letter-spacing:1.2px;color:var(--ink-200);transform:none}
.home-broadcast .home-service-strip .cs-item:hover,.home-broadcast .home-service-strip .cs-item:focus-visible,
.home-broadcast .home-service-strip .cs-item[aria-current="true"]{transform:none;background:var(--ink-100);color:var(--bg-900);border-color:var(--ink-100)}
.home-broadcast .menu-footer{right:clamp(52px,6vw,96px);bottom:18px}
#main-menu:has(.mission-cut.open) .home-broadcast{opacity:.16;transform:translateX(-5vw);filter:saturate(.25);pointer-events:none}

/* MISSÃO — cartaz full-height à esquerda, console de decisão à direita. */
#menu-setup.mission-cut{position:absolute;z-index:45;inset:52px 0 34px max(38px,3vw);width:auto;height:auto;max-height:none;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,31vw);grid-template-rows:auto 1fr;padding:0;
  background:rgba(var(--bg-900-rgb),.97);border:1px solid rgba(255,255,255,.16);border-left:5px solid var(--cine-yellow);
  clip-path:polygon(0 0,98.5% 0,100% 3%,100% 100%,1.5% 100%,0 97%);transform:translateX(105%);opacity:0}
#menu-setup.mission-cut.open{transform:translateX(0);opacity:1}
#menu-setup.mission-cut>.cs-setup-head{grid-column:2;grid-row:1;padding:24px 28px 13px;border-bottom:1px solid var(--line)}
#menu-setup.mission-cut>.setup-pane{grid-column:1/-1;grid-row:2;min-height:0;display:none;grid-template-columns:minmax(0,1fr) minmax(330px,31vw)}
#menu-setup.mission-cut[data-step="match"] .pane-match{display:grid}
#menu-setup.mission-cut[data-step="profile"] .pane-profile{display:flex;grid-column:2;grid-row:2;padding:28px;background:var(--bg-800)}
.mission-visual{position:relative;min-height:0;overflow:hidden;background:#080705}
.mission-visual .map-picker{height:100%;min-height:0;border:0;clip-path:none}
.mission-visual .map-picker::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 55%,rgba(var(--bg-900-rgb),.96)),linear-gradient(0deg,rgba(0,0,0,.76),transparent 45%);pointer-events:none}
.mission-visual .map-side{z-index:3;left:42px;right:auto;bottom:36px;align-items:flex-start;text-align:left;max-width:75%}
.mission-visual #map-name{font-size:clamp(42px,5.5vw,84px);line-height:.88;text-shadow:0 4px 22px #000}
.mission-visual .map-arrows{z-index:4;left:38px;right:auto;top:auto;bottom:148px}
.mission-console{display:flex;flex-direction:column;justify-content:flex-start;gap:20px;padding:26px 28px 32px;
  background:linear-gradient(180deg,rgba(var(--bg-700-rgb),.38),rgba(var(--bg-900-rgb),.9));border-left:1px solid var(--line)}
.mission-brief{margin-top:clamp(46px,8vh,92px);display:flex;flex-direction:column;gap:8px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mission-brief small{font:700 9px/1 var(--mono);letter-spacing:3px;color:var(--cine-yellow)}.mission-brief b{font-size:clamp(25px,2.2vw,38px);line-height:.92}
.mission-brief p{margin:0;color:var(--ink-200);font-size:13px;line-height:1.45}.mission-brief span{font:700 9px/1 var(--mono);letter-spacing:1px;color:var(--ink-400)}
.mission-console .match-opts{display:flex;flex-direction:column;gap:12px}.mission-console .map-label{width:100%}
.mission-console .cs-setup-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:auto}
.mission-console #btn-jogar{grid-column:1/-1;grid-row:1;min-height:64px}.mission-console #setup-back{grid-column:1}.mission-console #btn-profile{grid-column:2}

/* FACÇÕES — índice navegável + um único pôster dominante. */
#team-select.cine-surface{padding:54px 48px 42px;display:flex;align-items:stretch;justify-content:stretch}
.faction-editorial{width:100%;min-height:0;flex:1;display:grid;grid-template-columns:minmax(700px,57vw) minmax(0,1fr);gap:14px}
.faction-index{position:relative;z-index:4;min-height:0;display:grid;grid-template-rows:auto 1fr;padding:18px 14px;
  background:rgba(var(--bg-900-rgb),.93);border:1px solid var(--line);border-top:5px solid var(--cine-yellow)}
.faction-index-label{display:flex;flex-direction:column;gap:4px;padding:0 8px 14px}.faction-index-label small{font:700 9px/1 var(--mono);letter-spacing:3px;color:var(--cine-yellow)}
.faction-index-label b{font-size:18px;letter-spacing:1px}.faction-index .team-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:8px;overflow:hidden;padding:0}
.faction-index .team-card{position:relative;width:100%;height:100%;min-width:0;min-height:0;display:flex;align-items:stretch;padding:0;text-align:left;overflow:hidden;
  background:rgba(var(--bg-700-rgb),.64);border:1px solid rgba(255,255,255,.12);clip-path:none;box-shadow:none}
.faction-index .team-card::after,.faction-index .team-chars,.faction-index .team-count,.faction-index .team-cta{display:none!important}
.faction-index .team-art{display:block!important;position:absolute;inset:0;z-index:0;background:var(--art) center 28%/cover no-repeat;filter:saturate(.82) contrast(1.06)}
.faction-index .team-card::before{display:block;z-index:1;height:100%;background:linear-gradient(0deg,rgba(var(--bg-900-rgb),.98),transparent 65%)}
.faction-index .faction-index-no{position:absolute;z-index:4;left:7px;top:7px;font:700 9px/1 var(--mono);color:#fff;text-shadow:0 1px 4px #000}
.faction-index .team-crest{position:absolute;z-index:4;right:7px;top:7px;width:31px;height:31px;margin:0;filter:drop-shadow(0 2px 5px #000)}
.faction-index .team-plate{position:absolute!important;z-index:4!important;left:0;right:0;bottom:0;display:flex!important;align-items:flex-start!important;text-align:left!important;padding:9px!important}
.faction-index .team-name{font-size:11px!important;line-height:1.05;text-align:left!important;white-space:normal;overflow:visible}
.faction-index .team-slogan{display:block!important;font-size:8px!important;line-height:1.15;max-width:100%;color:var(--ink-200)}
.faction-index .team-production{position:absolute;z-index:5;right:5px;top:45px;left:auto;bottom:auto;transform:none;font-size:6px;padding:2px 4px}
.faction-index .team-card:hover,.faction-index .team-card:focus-visible,.faction-index .team-card.is-preview{transform:translateY(-3px);border-color:var(--tc);box-shadow:inset 0 -5px 0 var(--tc),0 10px 24px #000}
.faction-index .team-card[aria-disabled="true"]{opacity:.62}.faction-index .team-card.faction-excluded{visibility:hidden;pointer-events:none}
.faction-index .team-rail-arrow{display:none}
.faction-hero{--hero-color:var(--cine-yellow);--hero-rgb:255,201,63;position:relative;min-width:0;min-height:0;overflow:hidden;
  border:1px solid rgba(255,255,255,.15);background:#0b0906;isolation:isolate}
.faction-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(var(--bg-900-rgb),.98) 0 34%,rgba(var(--bg-900-rgb),.64) 52%,transparent 82%),linear-gradient(0deg,rgba(var(--bg-900-rgb),.8),transparent 48%)}
.faction-hero-art{position:absolute;inset:0;z-index:-2;background:var(--hero-art) center 24%/cover no-repeat;transform:scale(1.015)}
.faction-hero-copy{height:100%;width:100%;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;
  padding:clamp(24px,2.2vw,38px);max-width:none}
.faction-hero .ts-head{position:absolute;left:clamp(24px,2.2vw,38px);right:clamp(24px,2.2vw,38px);top:clamp(24px,3vh,38px);align-items:flex-start;padding:0!important}
.faction-hero .screen-title{font-size:clamp(25px,2.1vw,34px)!important;line-height:.94;text-align:left}.faction-hero .screen-title::after{left:0;transform:none}
.faction-hero .ts-hint{text-align:left;max-width:52ch}.faction-hero-crest{width:76px;height:76px;object-fit:contain;filter:drop-shadow(0 8px 20px #000)}
.faction-hero-kicker{margin-top:12px;font:700 9px/1 var(--mono);letter-spacing:3px;color:var(--hero-color)}
.faction-hero h3{margin:7px 0 0;font-size:clamp(38px,3.4vw,54px);line-height:.9;letter-spacing:-1px;text-transform:uppercase}
.faction-hero-slogan{margin:10px 0 0;font-size:18px;font-style:italic;color:var(--ink-100)}.faction-hero-desc{margin:8px 0 0;max-width:52ch;color:var(--ink-200)}
.faction-hero-status{margin-top:18px;min-width:280px;min-height:56px;padding:12px 18px;border:1px solid var(--hero-color);background:var(--hero-color);
  font:800 11px/1 var(--mono);letter-spacing:1.4px;color:var(--bg-900);cursor:pointer;clip-path:var(--cut-sm)}
.faction-hero-status:hover,.faction-hero-status:focus-visible{filter:brightness(1.12);transform:translateY(-2px)}
.faction-hero[data-ready="0"] .faction-hero-art{filter:grayscale(.7) brightness(.58)}

/* PERSONAGEM — corpo em palco, dossiê lateral e elenco horizontal. */
#char-select.cine-surface{padding:56px 48px 42px;align-items:stretch}
#team-select.cine-surface>.btn-back,#char-select.cine-surface>.btn-back{top:72px;right:68px;min-width:132px;padding-inline:18px;white-space:nowrap;z-index:12}
#char-select.cine-surface>.ts-head{left:64px;top:60px}.cast-stage{width:100%;min-height:0;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,29vw);grid-template-rows:minmax(0,1fr) 112px;gap:14px;padding-top:86px}
.cast-avatar{grid-column:1;grid-row:1;min-height:0;display:flex;align-items:flex-end;justify-content:center;position:relative;overflow:hidden;
  background:radial-gradient(ellipse at 50% 65%,rgba(255,201,63,.18),transparent 58%)}
.cast-avatar::before{content:"";position:absolute;left:50%;bottom:8%;width:62%;height:14%;transform:translateX(-50%);
  border:1px solid rgba(255,201,63,.2);border-radius:50%;background:radial-gradient(ellipse,rgba(255,201,63,.15),transparent 65%)}
.cast-avatar #char-preview{position:relative;z-index:1;width:auto;max-width:100%;height:min(72vh,720px)}
.cast-dossier{grid-column:2;grid-row:1/3;align-self:stretch;max-height:none!important;overflow:auto;margin:0;padding:26px;
  background:linear-gradient(145deg,rgba(var(--bg-700-rgb),.96),rgba(var(--bg-900-rgb),.94));border:1px solid var(--line-2);border-top:5px solid var(--cine-yellow)}
.cast-dossier #char-info-name{font-size:clamp(32px,3vw,50px);line-height:.9}.cast-dossier #char-confirm{margin-top:auto;min-height:58px}
.cast-dossier #char-info-blurb,.cast-dossier .char-spec p{font-size:13px;line-height:1.5}.cast-dossier small{font-size:11px;letter-spacing:1.5px}
.cast-rail{grid-column:1;grid-row:2;min-width:0;display:grid;grid-template-columns:42px minmax(0,1fr) 42px;gap:8px;
  align-items:stretch;padding:9px;background:rgba(var(--bg-900-rgb),.88);border-top:1px solid var(--line-2)}
.cast-rail .char-list{display:flex;flex-direction:row;gap:8px;min-width:0;overflow-x:auto;overflow-y:hidden;padding:0;scroll-snap-type:x mandatory}
.cast-rail .char-row{flex:0 0 84px;width:84px;height:84px;scroll-snap-align:center}.cast-rail .char-row:hover,.cast-rail .char-row:focus-visible{transform:translateY(-4px)}
.cast-rail .char-row.sel{transform:translateY(-5px);box-shadow:inset 0 -4px 0 var(--br-faixa)}
.cast-rail .strip-arrow{height:auto;width:auto;font-size:28px}.cast-avatar .pv-hints{position:absolute;z-index:3;right:14px;bottom:12px}

/* SISTEMA — navegação vertical fixa e bancada de ajustes. */
#settings-panel.cine-surface{padding:54px 48px 42px;display:flex;align-items:stretch}.settings-cockpit{width:100%;min-height:0;
  flex:1;display:grid;grid-template-columns:minmax(210px,18vw) minmax(0,1fr);grid-template-rows:auto 1fr;border:1px solid var(--line);
  background:rgba(var(--bg-900-rgb),.86)}
.settings-title{grid-column:1/-1;padding:20px 26px 16px;border-bottom:1px solid var(--line);display:flex;align-items:flex-end;justify-content:space-between}
.settings-title small{font:700 9px/1 var(--mono);letter-spacing:3px;color:var(--cine-yellow)}
.settings-title .screen-title{font-size:clamp(38px,4.2vw,68px);padding:0;text-align:right}.settings-title .screen-title::after{display:none}
.settings-nav{grid-column:1;grid-row:2;display:flex;flex-direction:column;gap:4px;padding:22px 14px;border:0;border-right:1px solid var(--line);
  background:rgba(var(--bg-800-rgb),.78)}.settings-nav .set-tab{flex:0 0 auto;width:100%;min-height:54px;text-align:left;padding:12px 16px;
  border:1px solid transparent;border-left:4px solid transparent}.settings-nav .set-tab.active{background:var(--cine-yellow);color:var(--bg-900);border-left-color:var(--cine-red)}
.settings-workbench{grid-column:2;grid-row:2;min-height:0;display:flex;flex-direction:column;gap:18px;padding:clamp(22px,3vw,42px);overflow:auto}
.settings-workbench .set-cols{flex:1;grid-template-columns:minmax(0,1fr) minmax(320px,42%);align-items:stretch}.settings-workbench .set-preview{min-height:100%}
.settings-workbench .set-row{min-height:64px;border-bottom:1px solid var(--line)}.settings-workbench .set-actions{margin-top:auto}
.settings-workbench .set-list{display:flex;flex-direction:column;min-height:100%}.settings-readout{margin-top:auto;padding:20px 18px;border-left:4px solid var(--cine-red);
  background:linear-gradient(90deg,rgba(var(--bg-700-rgb),.72),transparent)}.settings-readout small{display:block;font:700 9px/1 var(--mono);letter-spacing:3px;color:var(--cine-yellow)}
.settings-readout b{display:block;margin-top:9px;font-size:22px;letter-spacing:1px}.settings-readout p{max-width:42ch;margin:7px 0;color:var(--ink-200);font-size:13px}.settings-readout span{font:700 9px/1 var(--mono);letter-spacing:1.2px;color:var(--ink-400)}

/* Tratamento único para fontes visuais heterogêneas: key art, cover 3D, captura e canvas
   continuam sendo seus próprios assets, mas chegam à transmissão com o mesmo contraste. */
#main-menu .cs-wallpaper,#map-screen .ms-bg img,.faction-hero-art,.set-preview,#char-preview{filter:saturate(.86) contrast(1.06) sepia(.035)}

@media(max-width:900px){
  .home-broadcast{padding-inline:24px}.home-title-block{max-width:78vw}.home-broadcast .cs-menu{width:94vw}.home-mode-deck{grid-template-columns:1fr}
  #menu-setup.mission-cut{left:10px;grid-template-columns:1fr}#menu-setup.mission-cut>.cs-setup-head{grid-column:1}
  #menu-setup.mission-cut>.setup-pane{grid-template-columns:1fr}.mission-console{position:absolute;right:0;bottom:0;width:min(380px,78vw)}
  .faction-editorial{grid-template-columns:150px 1fr}.faction-hero-copy{max-width:72%}.faction-hero .ts-head{display:none}
  .cast-stage{grid-template-columns:1fr 300px}.settings-cockpit{grid-template-columns:150px 1fr}
}
@media(max-height:760px){
  .home-broadcast{padding-top:76px}.home-title-block h1{font-size:48px}.home-mode-card{min-height:92px!important}
  #menu-setup.mission-cut{top:38px;bottom:18px}.faction-hero h3{font-size:46px}.faction-hero-desc{display:none}
  .cast-stage{padding-top:70px;grid-template-rows:minmax(0,1fr) 92px}.cast-rail .char-row{width:68px;height:68px;flex-basis:68px}
}

/* HUD EM RETRATO (vindo da main) — o bloco de 640px do menu já existe lá em cima;
   este cobre a PARTIDA (mira, HUD, killfeed, scoreboard) no celular em pé. */
@media (max-width:640px) and (orientation:portrait){
  #hud-actions{top:8px;right:8px;gap:6px}
  #hud-actions button{width:30px;height:30px;font-size:14px}
  #radar{top:8px;left:8px;width:104px;height:104px}
  #radio-log{top:118px;left:8px;font-size:11px}
  #radio-menu{top:142px;left:8px;min-width:180px;padding:8px 12px}
  #hud-top{top:8px;left:124px;right:8px;transform:none;justify-content:space-between;gap:8px}
  .team-score{font-size:13px;letter-spacing:1px;padding:4px 8px}
  #hud-mid{flex:1;min-width:0}
  #round-time{font-size:24px}
  #rounds-row{font-size:10px;letter-spacing:1px;white-space:nowrap}
  #killfeed{top:56px;right:8px;max-width:44vw;font-size:11px}
  .kf-row{max-width:100%;padding:3px 8px;overflow-wrap:anywhere}
  #round-banner{top:22%;left:12px;right:12px}
  #banner-title{font-size:34px;letter-spacing:3px;line-height:1.05}
  #banner-sub{font-size:13px;letter-spacing:1px;line-height:1.25;max-width:100%}
  #lock-hint{top:34%;left:12px;right:12px}
  .lh-title{font-size:22px;letter-spacing:2px;line-height:1.15}
  .lh-sub{font-size:12px;line-height:1.3;max-width:320px;margin:8px auto 0}
  #pickup-hint{top:54%;max-width:calc(100vw - 24px);padding:7px 12px;font-size:12px;letter-spacing:1px;text-align:center}
  #hud-bottom-left{left:12px;bottom:14px}
  #hp-cross{font-size:18px}
  #hp-num{font-size:30px}
  #hp-bar{width:150px}
  #weapon-hud{right:12px;bottom:112px;width:min(230px,58vw);gap:3px}
  .weapon-slot{grid-template-columns:14px 32px minmax(0,1fr) auto;gap:6px;min-height:28px;padding:4px 7px}
  .weapon-icon .kf-ic{width:32px;height:18px}
  #hud-bottom-right{right:12px;bottom:14px;max-width:45vw}
  #weapon-name{font-size:10px;letter-spacing:1px;line-height:1.2}
  #ammo{font-size:30px}
  .ammo-sep{margin:0 6px;font-size:20px}
  #ammo-reserve{font-size:20px}
  #scoreboard{width:min(94vw,560px);min-width:0;padding:16px 12px;max-height:76vh;overflow:auto}
  #scoreboard table{font-size:12px}
  #scoreboard th,#scoreboard td{padding-left:6px;padding-right:6px}
}

/* ---------- INVENTÁRIO 1–5: silhuetas planas no canto direito ---------- */
#weapon-hud{right:32px;left:auto;bottom:150px;top:auto;transform:none;
  flex-direction:column;align-items:flex-end;gap:0;width:200px}
.weapon-slot{display:grid;grid-template-columns:42px minmax(92px,1fr) 18px;align-items:center;
  gap:6px;width:100%;min-height:42px;padding:1px 0;color:rgba(255,255,255,.82);
  background:transparent;border:0;clip-path:none;opacity:.8}
.weapon-slot.on{color:var(--am);background:transparent;opacity:1}
.weapon-slot .weapon-label{display:none}
.weapon-key{grid-column:3;grid-row:1;font-size:12px;color:currentColor;text-align:right}
.weapon-icon{grid-column:2;grid-row:1;justify-content:flex-end;filter:drop-shadow(0 2px 2px rgba(0,0,0,.92))}
.weapon-icon .kf-ic{width:92px;height:40px}
.weapon-amount{grid-column:1;grid-row:1;font-size:11px;text-align:right;color:currentColor}
@media(max-width:640px){
  #weapon-hud{right:12px;bottom:104px;width:148px}
  .weapon-slot{grid-template-columns:32px minmax(62px,1fr) 12px;min-height:32px}
  .weapon-icon .kf-ic{width:62px;height:28px}
}

#hud{font-family:var(--aaa-font-body);font-weight:600}
#radar{left:16px;top:16px;width:132px;height:132px;background:rgba(10,10,12,.55);border:1px solid rgba(236,235,230,.12);box-shadow:none}
#hud-top{top:16px;gap:2px}
#hud-top .team-score{min-height:42px;padding:7px 16px;background:transparent;border:0;color:#ecebe6!important}
#hud-top .team-score b{font-family:var(--font);font-size:26px;font-weight:700}
#hud-mid{min-height:42px;padding:7px 18px;background:transparent}
#round-time{font-family:var(--font);font-size:24px;font-weight:700;color:#b4d92e;-webkit-text-stroke:0}
#rounds-row{margin-top:2px;font-size:10px;letter-spacing:2px;color:#5c5d63;text-shadow:none}
#killfeed{top:70px;right:16px;gap:3px;font-family:var(--aaa-font-body);font-size:14px}
.kf-row{padding:5px 12px;background:rgba(10,10,12,.72);clip-path:none;border-left:0}
.kf-weapon-2d{display:inline-flex;align-items:center;justify-content:center;width:42px;height:20px;color:var(--ink-100);flex:0 0 42px}
.kf-weapon-mask{display:block;width:40px;height:18px;background:currentColor;
  -webkit-mask:var(--weapon-mask) center/contain no-repeat;mask:var(--weapon-mask) center/contain no-repeat}
.kf-weapon-2d:has(.kf-weapon-mask) .kf-fallback{display:none}
#damage-vignette{box-shadow:inset 0 0 160px 50px rgba(200,30,24,.5)}
#hud:has(#hp-num.low) #damage-vignette{opacity:1}
#hud-bottom-left{left:20px;bottom:18px}
#hp-row{gap:9px}
#hp-num{font-size:42px;font-family:var(--font);font-weight:700;-webkit-text-stroke:0}
#hp-num::after{display:inline;margin-left:9px;font:700 11px/1 var(--aaa-font-body);letter-spacing:3px;color:#9a9ba1}
#hp-num.low::after{color:#e04c44}
#hp-bar{width:190px;height:5px;margin-top:6px;border:0;clip-path:none;background:rgba(10,10,12,.7)}
#hp-fill{background:#46c268}#hp-fill.low{background:#e04c44}
#hud-bottom-right{right:20px;bottom:18px;gap:3px}
#weapon-name{order:-1;margin:0;font-family:var(--aaa-font-body);font-size:11px;font-weight:700;letter-spacing:3px;color:#9a9ba1}
#ammo{order:0;font-family:var(--font);font-size:42px;font-weight:700;-webkit-text-stroke:0}
.ammo-sep{font-size:20px;margin:0 9px;color:#8b8c92}#ammo-reserve{font-size:20px;font-weight:600;color:#8b8c92}
#ammo-bars{order:1;grid-template-columns:repeat(var(--ammo-bars,1),7px);gap:3px;min-height:13px;margin:0}
#ammo-bars i{width:7px;height:13px;background:rgba(180,217,46,.22);box-shadow:none}
#ammo-bars i.on{background:#b4d92e;box-shadow:none}#ammo-bars i.low{background:#e04c44}
#smoke-count{display:none}
#hud-shortcuts{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;gap:16px;
  font:600 11px/1 var(--font);letter-spacing:2px;color:rgba(139,140,146,.6)}
#weapon-hud{right:20px;bottom:122px;width:150px}
.weapon-slot{grid-template-columns:minmax(0,1fr) 18px;min-height:36px;width:100%;padding:0;gap:6px;color:rgba(236,235,230,.76);opacity:.76}
.weapon-slot.on{color:#b4d92e;opacity:1}
.weapon-key{grid-column:2;font:700 12px/1 var(--font)}
.weapon-icon{grid-column:1;justify-content:flex-end;min-width:0;filter:drop-shadow(0 2px 2px rgba(0,0,0,.92))}
.weapon-mask{display:block;width:112px;height:34px;background:currentColor;
  -webkit-mask:var(--weapon-mask) center/contain no-repeat;mask:var(--weapon-mask) center/contain no-repeat}
.weapon-icon:has(.weapon-mask) .weapon-fallback{display:none}
.weapon-icon>.kf-ic{width:92px;height:32px}
.weapon-amount{display:none}

/* ---------- AJUSTES DO CRÍTICO (14/08) ---------- */
/* A ficha do mapa mora no CABEÇALHO desde 21/08 e ocupa a faixa inteira: largura vem do
   flex, não de uma caixa fixa de 460px, e o nome encolheu porque divide a linha com as
   opções da partida. */
.ms-head{width:auto;max-width:none}
.ms-name{font-size:40px}
/* #3 — valor numérico ao lado da barra de atributo */
.attr{grid-template-columns:92px 1fr auto}
.attr b{font-family:var(--font);font-weight:700;font-size:var(--fs-100);color:var(--ink-100);text-align:right}
/* #8 — nome do personagem protagonista (referência 03) + rótulo da facção */
.char-faction-tag{font-family:var(--aaa-font-body);font-weight:600;font-size:var(--fs-100);
  letter-spacing:var(--tr-3);color:#e0762a;text-transform:uppercase}
#char-info-name{font-family:var(--aaa-font-display);font-weight:400;font-size:clamp(28px,2.6vw,44px);letter-spacing:1px}
html[data-ui="legacy"] #char-info-name{font-family:var(--font);font-weight:700}
/* #11 — sub do banner legível contra céu claro */
#banner-sub{text-shadow:var(--sh-hud)}

/* ---------- LOADING 00B: kicker + confronto no topo, meta sob o nome (14/08) ---------- */
#load-kicker{position:absolute;top:24px;left:32px;z-index:2;
  font-family:var(--aaa-font-body);font-weight:600;font-size:12px;letter-spacing:4px;color:var(--br-faixa);text-transform:uppercase}
#load-versus{position:absolute;top:20px;right:24px;z-index:2;display:flex;align-items:center;gap:12px;
  background:rgba(10,10,12,.6);border:1px solid #26272d;padding:8px 16px;
  font-family:var(--font);font-weight:700;font-size:13px;letter-spacing:1px;text-transform:uppercase}
#load-versus i{font-style:normal;color:#5c5d63}
#load-label{display:none}   /* o rótulo virou o #load-kicker no topo */
#load-map{font-family:var(--aaa-font-display);font-weight:400}
html[data-ui="legacy"] #load-map{font-family:var(--font);font-weight:700}
#load-meta{display:flex;align-items:center;font-family:var(--font);font-weight:700;font-size:15px;
  letter-spacing:2px;color:#c9c9cc;text-transform:uppercase}
#load-meta:empty{display:none}
#load-meta .lo-sep{color:var(--br-faixa);margin:0 10px}

/* ===================== CONTROLES DE TOQUE (mobile, fase 1) ===================== */
/* insets do notch/home-indicator (iPhone): os controles se afastam das bordas perigosas */
#touch-ui{position:fixed;inset:0;z-index:30;pointer-events:none;touch-action:none;-webkit-user-select:none;user-select:none;
  --sl:env(safe-area-inset-left,0px);--sr:env(safe-area-inset-right,0px);--sb:env(safe-area-inset-bottom,0px);--st:env(safe-area-inset-top,0px)}
/* MIRA = arraste na METADE DIREITA da tela (estilo CoD Mobile), sem joystick de mira. A metade
   esquerda fica livre pro polegar do movimento sem virar a câmera sem querer. */
#touch-ui .touch-look{position:absolute;top:0;bottom:0;right:0;left:42%;pointer-events:auto}
/* Só o stick ESQUERDO (andar). À direita, o cluster de botões sobre a área de arraste. */
/* TAMANHOS na proporção da referência CoD Mobile (os nossos estavam ~2× grandes). */
#touch-ui .touch-joy{position:absolute;bottom:calc(34px + var(--sb));left:calc(32px + var(--sl));width:104px;height:104px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.06),rgba(255,255,255,.02) 70%,transparent);
  border:2px solid rgba(255,255,255,.14);pointer-events:auto;z-index:2}
#touch-ui .touch-joy-knob{position:absolute;left:50%;top:50%;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;
  background:rgba(180,217,46,.30);border:2px solid rgba(255,255,255,.32);will-change:transform}
#touch-ui .touch-btn{position:absolute;pointer-events:auto;z-index:2;border-radius:50%;color:#fff;
  font:800 11px/1 var(--aaa-font-body,sans-serif);letter-spacing:.3px;
  background:rgba(255,255,255,.14);border:2px solid rgba(255,255,255,.32);display:flex;align-items:center;justify-content:center}
#touch-ui .touch-btn:active{background:rgba(180,217,46,.55)}
#touch-ui .touch-btn svg{width:54%;height:54%;filter:drop-shadow(0 1px 2px rgba(0,0,0,.65))}
/* ESQUERDA: ATIRAR (hip-fire) ao lado do joystick. */
#touch-ui .touch-fire-l{left:calc(150px + var(--sl));bottom:calc(50px + var(--sb));width:54px;height:54px;background:rgba(230,60,50,.26);border-color:rgba(255,120,110,.45)}
/* DIREITA: ATIRAR grande; MIRAR em cima; RECARREGAR embaixo-esq. e ABAIXAR ao lado. */
#touch-ui .touch-fire{right:calc(48px + var(--sr));bottom:calc(52px + var(--sb));width:74px;height:74px;background:rgba(230,60,50,.30);border-color:rgba(255,120,110,.5)}
#touch-ui .touch-ads{right:calc(56px + var(--sr));bottom:calc(150px + var(--sb));width:54px;height:54px}
#touch-ui .touch-reload{right:calc(140px + var(--sr));bottom:calc(50px + var(--sb));width:50px;height:50px}
#touch-ui .touch-crouch{right:calc(204px + var(--sr));bottom:calc(54px + var(--sb));width:50px;height:50px}
#touch-ui .touch-pause{right:calc(16px + var(--sr));top:calc(14px + var(--st));width:40px;height:40px;background:rgba(16,16,20,.4);border-color:rgba(255,255,255,.28);color:#ecebe6;font-size:14px}
/* BARRA DE ARMAS embaixo (centro): primária / pistola / faca / fumaça / granada */
#touch-ui .touch-weps{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(8px + var(--sb));display:flex;gap:8px;z-index:2}
#touch-ui .touch-wep{pointer-events:auto;width:46px;height:46px;padding:0;border-radius:10px;color:#fff;
  background:rgba(16,16,20,.34);border:1px solid rgba(255,255,255,.28);display:flex;align-items:center;justify-content:center}
#touch-ui .touch-wep svg{width:62%;height:62%;filter:drop-shadow(0 1px 2px rgba(0,0,0,.65))}
#touch-ui .touch-wep:active{background:rgba(180,217,46,.5)}
/* no mobile: esconde a engrenagem de settings, o ícone de som E os slots de armas laterais
   (1-5) do HUD — a troca de arma/bomba passou pra barra de baixo do touch UI. */
@media (pointer:coarse){ #hud-actions,#weapon-hud{display:none!important} }

/* overlay "gire o celular": só em toque + retrato */
#rotate-prompt{display:none}
@media (orientation:portrait) and (pointer:coarse){
  #rotate-prompt{position:fixed;inset:0;z-index:2147483000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
    background:#090704;color:#f4efe6;text-align:center;padding:8vw;font:700 18px/1.5 var(--aaa-font-body,sans-serif)}
  #rotate-prompt .rot-ico{font-size:64px;animation:rotpulse 1.6s ease-in-out infinite}
}
@keyframes rotpulse{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(78deg)}}

#touch-ui.paused{display:none}   /* pausado: libera o menu de pausa pro toque */

/* mobile: botão CONFIRMAR do personagem fixo no rodapé da ficha — antes sumia abaixo da
   dobra da rolagem interna em tela deitada de altura baixa (celular). Sticky + sombra pra
   separar do conteúdo que rola atrás. */
@media (pointer:coarse){
  #char-confirm{position:sticky;bottom:0;margin-top:auto;z-index:2;
    box-shadow:0 -14px 18px 8px rgba(var(--bg-800-rgb),.92)}
}

/* mobile: painel de CONFIGURAÇÕES vira tela cheia rolável com o SALVAR fixo no rodapé.
   Antes o painel estourava a altura deitada (celular) e o botão de salvar + parte dos
   controles ficavam fora da tela — não dava pra ajustar sensibilidade nem salvar. */
@media (pointer:coarse){
  #settings-panel{align-items:stretch;justify-content:stretch;padding:0}
  #settings-panel .settings-wrap{width:100%;max-width:100%;height:100dvh;max-height:100dvh;
    border:0;clip-path:none}
  #settings-panel .set-cols{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
  #settings-panel .set-actions{flex:0 0 auto;padding-bottom:max(18px,env(safe-area-inset-bottom))}
  #settings-panel .set-head{padding-top:max(14px,env(safe-area-inset-top))}
}