/* ===== SALVA! — interface v2 (flat, limpa, profissional) ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --panel: rgba(10, 13, 20, 0.92);
  --panel-2: rgba(16, 20, 30, 0.85);
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --text: #e6ebf4;
  --muted: #8b96ad;
  --blue: #38b6ff;
  --orange: #ff8c3a;
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  --font-display: 'Anton', 'Hanken Grotesk', system-ui, sans-serif;
  --ink-soft: #b7c0d4; /* body text legível no dark (contraste ≥4.5:1) */
  /* ESCURECIMENTO da arena na tela inicial (0 = arena crua · 1 = preto total).
     É o "plano preto com opacidade" sobre o fundo 3D do menu — ajuste AQUI. */
  --menu-escurecer: 0.90;
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #0b0d13;
  font-family: 'Hanken Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--text);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

#game-canvas { display: block; width: 100%; height: 100%; cursor: crosshair; }

/* vinheta sutil sobre o 3D */
#vignette {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 5;
  background: radial-gradient(ellipse at 50% 42%, transparent 58%, rgba(3, 5, 10, 0.42) 100%);
}

.hidden { display: none !important; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }

#topbar {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: stretch;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.score-box {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px 12px;
  position: relative;
}
.score-box::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px;
}
.score-box.blue::after { background: var(--blue); }
.score-box.orange::after { background: var(--orange); }
.score-box .team-name {
  font-size: 11px; letter-spacing: 2.5px; font-weight: 600;
  color: var(--muted);
}
#score-blue, #score-orange {
  font-size: 26px; font-weight: 700; line-height: 1;
  min-width: 22px; text-align: center;
  font-variant-numeric: tabular-nums;
}
#timer {
  display: flex; align-items: center;
  padding: 0 18px;
  font-size: 18px; font-weight: 600;
  color: var(--text);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
}

/* estado atual (armado / modo ladrão / portador) */
#weapon-state {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  padding: 8px 16px 8px 14px;
  border-radius: 8px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.3px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left-width: 3px;
  color: var(--muted);
  white-space: nowrap;
  box-shadow: var(--shadow);
}
#weapon-state.armed { border-left-color: var(--blue); color: #c9e6fa; }
#weapon-state.thief { border-left-color: #ffd35e; color: #f5e3b8; }
#weapon-state.carry { border-left-color: var(--orange); color: #ffe9d4; }

/* cargas de dash */
#dash-pips {
  position: absolute; bottom: 28px; left: 28px;
  display: flex; gap: 6px;
}
.pip {
  width: 26px; height: 8px;
  border-radius: 4px;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.04);
  transition: background 0.15s, border-color 0.15s;
}
.pip.on { background: var(--blue); border-color: var(--blue); }
.pip.locked { opacity: 0.25; }

/* MINHA vida (2 acertos congelam): 2 pips de gelo acima do dash. Cheio = 2
   acesos; tomou 1 tiro → um apaga e encolhe (feedback claro, junto da vinheta) */
#hp-pips {
  position: absolute; bottom: 52px; left: 28px;
  display: flex; gap: 7px; align-items: center;
}
#hp-pips i {
  width: 15px; height: 15px; border-radius: 50%;
  background: #bfe9ff; box-shadow: 0 0 9px rgba(150, 220, 255, 0.65);
  transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
}
#hp-pips i.off { background: rgba(255, 255, 255, 0.14); box-shadow: none; transform: scale(0.72); }

/* congelado */
#frozen-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: rgba(30, 60, 100, 0.22);
  text-align: center;
}
.frozen-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(38px, 7.5vw, 64px); letter-spacing: 0.05em; text-transform: uppercase;
  color: #d9edff; text-shadow: 0 4px 24px rgba(120, 190, 255, 0.35);
}
.frozen-sub { font-size: 14px; color: #a8c6e8; letter-spacing: 0.4px; }
.frozen-sub b { color: #fff; }

/* ---------- mensagens ---------- */
#msgs {
  position: fixed; top: 78px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  pointer-events: none; z-index: 20;
}
.msg {
  padding: 7px 16px 7px 13px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-2);
  border-radius: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.2px;
  color: var(--text);
  animation: msg-in 0.22s ease-out, msg-out 0.35s ease-in 2.55s forwards;
  white-space: nowrap;
  box-shadow: var(--shadow);
}
.msg.big { font-size: 16px; padding: 9px 22px 9px 18px; }
.msg.good { border-left-color: #46d68c; }
.msg.warn { border-left-color: var(--orange); }
.msg.info { color: var(--muted); }
@keyframes msg-in { from { transform: translateY(-10px); opacity: 0; } }
@keyframes msg-out { to { transform: translateY(-6px); opacity: 0; } }
/* mensagem repetida não empilha: a existente pulsa e REINICIA o relógio de
   saída (a lista de animações muda → o msg-out recomeça do zero) */
.msg.again { animation: msg-pulse 0.18s ease-out, msg-out 0.35s ease-in 2.55s forwards; }
@keyframes msg-pulse { 40% { transform: scale(1.07); } }

/* ---------- mira custom (crosshair) ---------- */
#crosshair {
  position: fixed; left: 0; top: 0; width: 0; height: 0;
  z-index: 22; pointer-events: none;
  --gap: 7px; --len: 10px;
}
#crosshair i {
  position: absolute; background: #eafcff; border-radius: 2px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.65);
  transition: background 0.1s, opacity 0.1s;
}
#crosshair .ct { left: -1.5px; top: calc(-1 * (var(--gap) + var(--len))); width: 3px; height: var(--len); }
#crosshair .cb { left: -1.5px; top: var(--gap); width: 3px; height: var(--len); }
#crosshair .cl { top: -1.5px; left: calc(-1 * (var(--gap) + var(--len))); height: 3px; width: var(--len); }
#crosshair .cr { top: -1.5px; left: var(--gap); height: 3px; width: var(--len); }
#crosshair b {
  position: absolute; left: -2px; top: -2px; width: 4px; height: 4px;
  border-radius: 50%; background: #eafcff;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.65);
}
/* lado inimigo (desarmado): mira abre e apaga — você corre, não atira */
#crosshair.disarmed { --gap: 12px; }
#crosshair.disarmed i, #crosshair.disarmed b { background: rgba(255, 205, 130, 0.5); }
/* portador da Relíquia: mira laranja */
#crosshair.carry i, #crosshair.carry b { background: var(--orange); }
/* tiro: os traços abrem e voltam na cadência da arma */
#crosshair.fire .ct { animation: cf-t 0.38s cubic-bezier(0.1, 0.8, 0.3, 1); }
#crosshair.fire .cb { animation: cf-b 0.38s cubic-bezier(0.1, 0.8, 0.3, 1); }
#crosshair.fire .cl { animation: cf-l 0.38s cubic-bezier(0.1, 0.8, 0.3, 1); }
#crosshair.fire .cr { animation: cf-r 0.38s cubic-bezier(0.1, 0.8, 0.3, 1); }
@keyframes cf-t { 18% { transform: translateY(-6px); } }
@keyframes cf-b { 18% { transform: translateY(6px); } }
@keyframes cf-l { 18% { transform: translateX(-6px); } }
@keyframes cf-r { 18% { transform: translateX(6px); } }
/* hitmarker: X que pisca quando VOCÊ acerta (hitfz = congelou, maior e gelo) */
#crosshair::before, #crosshair::after {
  content: ''; position: absolute; left: -11px; top: -1.5px;
  width: 22px; height: 3px; border-radius: 2px;
  background: #fff; opacity: 0;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.7);
}
#crosshair::before { transform: rotate(45deg); }
#crosshair::after { transform: rotate(-45deg); }
#crosshair.hit::before, #crosshair.hit::after { animation: cross-hit 0.22s ease-out; }
#crosshair.hitfz::before, #crosshair.hitfz::after { animation: cross-hitfz 0.34s ease-out; background: #bfe9ff; }
@keyframes cross-hit { 0% { opacity: 1; scale: 0.6; } 100% { opacity: 0; scale: 1.3; } }
@keyframes cross-hitfz { 0% { opacity: 1; scale: 0.8; } 100% { opacity: 0; scale: 1.9; } }

/* ---------- tela de carregamento ---------- */
#loading {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  background: #0b0d13;
  transition: opacity 0.4s;
}
#loading img { width: min(60vw, 340px); height: auto; }
#loading.out { opacity: 0; pointer-events: none; }
.load-dots { display: flex; gap: 8px; }
.load-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--orange); animation: ld 1s ease-in-out infinite; }
.load-dots i:nth-child(2) { animation-delay: 0.15s; }
.load-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes ld { 0%, 100% { opacity: 0.25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-5px); } }

/* ================= KINETIC ARENA — linguagem visual (skill ui-ux-pro-max) =========
   Estilo "Kinetic/Brutalismo Cinético": tipografia como arquitetura (números
   gigantes de fundo), hover TÁTIL (inundação de cor quase-instantânea), tracking
   apertado no display, cantos cortados (cara de torneio/esports) e entradas
   cinéticas. Mantém a identidade azul/laranja/gelo + Anton — só injeta energia. */

/* canto cortado (esports) — chanfro sutil em painéis-chave */
.kx-cut { clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px)); }

/* faixa de energia no topo do painel (as duas cores de time se encontram) */
.kx-bar::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--blue), transparent 42%, transparent 58%, var(--orange));
  border-radius: 3px 3px 0 0;
}

/* número GIGANTE de fundo (textura): Anton, semitransparente, atrás do conteúdo */
.kx-ghost {
  position: absolute; z-index: 0; pointer-events: none; user-select: none;
  font-family: var(--font-display); font-weight: 400; line-height: 0.8;
  color: rgba(255, 255, 255, 0.035); letter-spacing: -0.03em;
}

/* entrada cinética: sobe + escala, easing power2.out (motion.csv) */
@keyframes kx-in { from { opacity: 0; transform: translateY(18px) scale(0.965); } }
@media (prefers-reduced-motion: reduce) { [class*="kx-"] { animation: none !important; } }

/* ---------- scoreboard (segure Tab) — placar de esports ---------- */
#scoreboard {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5, 7, 12, 0.55);
  pointer-events: none;
}
.sb-card {
  position: relative;
  display: flex; flex-direction: column; gap: 12px; padding: 22px 22px 20px;
  background: var(--panel); border: 1px solid var(--line-2);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}
.sb-card::before { /* faixa de energia dos times no topo */
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--blue), transparent 42%, transparent 58%, var(--orange));
}
/* PLACAR como herói: números TORRE (Kinetic — números dominam os rótulos) */
.sb-placar {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  font-family: var(--font-display); font-weight: 400;
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.sb-placar b { font-size: 58px; line-height: 0.8; font-weight: 400; letter-spacing: -0.02em; }
.sb-placar span { font-size: 20px; color: var(--muted); align-self: center; }
.sb-placar .sb-azul { color: var(--blue); text-shadow: 0 4px 26px rgba(56, 182, 255, 0.3); }
.sb-placar .sb-laranja { color: var(--orange); text-shadow: 0 4px 26px rgba(255, 140, 58, 0.3); }
.sb-times { display: flex; gap: 16px; }
.sb-col { width: 258px; display: flex; flex-direction: column; gap: 6px; }
/* cabeçalho do time = etiqueta preenchida na cor do time (bloco Kinetic) */
.sb-col h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: 15px; letter-spacing: 0.06em;
  padding: 3px 10px 4px; align-self: flex-start; color: #071018;
}
.sb-col h3.sb-azul { background: var(--blue); }
.sb-col h3.sb-laranja { background: var(--orange); }
#sb-blue, #sb-orange { display: flex; flex-direction: column; gap: 4px; }
.sb-head, .sb-row { display: grid; grid-template-columns: 1fr 32px 32px 32px; gap: 4px; align-items: center; }
/* padding 9px = 8px do .sb-row + 1px de borda → ícones do cabeçalho alinham
   ao PIXEL com as colunas de números */
.sb-head { font-size: 11px; color: var(--muted); padding: 0 9px; }
.sb-head b { font-weight: 400; display: flex; justify-content: center; align-items: center; }
.sb-row {
  padding: 6px 8px; border-radius: 7px;
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line);
  font-size: 12.5px;
}
.sb-row b { text-align: center; font-variant-numeric: tabular-nums; color: var(--text); }
.sb-row .sb-nome { display: flex; align-items: center; gap: 5px; min-width: 0; color: var(--ink-soft); }
.sb-nome .sb-ic { display: inline-flex; color: var(--muted); flex: 0 0 auto; }
.sb-nome .sb-ic .ic { width: 0.95em; height: 0.95em; }
.sb-nome .sb-tx { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.sb-nome .sb-bot {
  font-style: normal; font-size: 8.5px; font-weight: 800; letter-spacing: 0.1em;
  padding: 1px 5px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.08); color: var(--muted);
  flex: 0 0 auto;
}
.sb-nome .sb-gelo { display: inline-flex; color: #9cc6e8; flex: 0 0 auto; margin-left: auto; } /* congelado: encosta nos números, longe do ícone de classe */
.sb-row.me { border-color: rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.07); }
.sb-row.me .sb-nome { color: #fff; font-weight: 700; }
.sb-row.frozen { opacity: 0.55; }
@media (max-height: 540px) {
  .sb-col { width: 214px; }
  .sb-row { font-size: 11px; padding: 4px 7px; }
}

/* ---------- vinheta de GELO ao tomar dano ---------- */
#dmg-vignette {
  position: fixed; inset: 0; z-index: 18; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(140, 200, 255, 0.30) 84%, rgba(190, 230, 255, 0.55) 100%);
}
#dmg-vignette.on { animation: dmg-v 0.5s ease-out; }
@keyframes dmg-v { 0% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- feed de eventos (canto direito) ---------- */
#feed {
  position: fixed; top: 74px; right: 14px; z-index: 20;
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  pointer-events: none;
}
.feed-line {
  padding: 4px 10px; border-radius: 7px;
  background: rgba(10, 13, 20, 0.72); border: 1px solid var(--line);
  font-size: 11.5px; color: var(--ink-soft); white-space: nowrap;
  animation: feed-in 0.18s ease-out, msg-out 0.3s ease-in 3.7s forwards;
}
.feed-line b { font-weight: 700; }
.feed-line b.a { color: #7cc8ff; }
.feed-line b.o { color: #ffb27c; }
.feed-line b.eu { color: #fff; }
@keyframes feed-in { from { transform: translateX(12px); opacity: 0; } }
@media (max-height: 540px) {
  #feed { top: 40px; right: 8px; }
  .feed-line { font-size: 10px; padding: 3px 8px; }
}

/* contagem regressiva */
#countdown {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(90px, 20vw, 170px);
  color: var(--text); text-shadow: 0 6px 40px rgba(0, 0, 0, 0.6);
  pointer-events: none; z-index: 30;
}

/* setas de borda */
.edge-arrow {
  position: fixed; z-index: 15;
  font-size: 26px; pointer-events: none;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.8));
}
.edge-arrow.enemy { color: var(--orange); }
.edge-arrow.own { color: #ff6060; animation: blink 0.7s ease-in-out infinite; }
/* aliado congelado fora da tela: gelo piscando — "vá dar SALVA!" */
.edge-arrow.mate { color: #bfe9ff; font-size: 22px; animation: blink 0.9s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.45; } }

/* ---------- toque ---------- */
#touch-ui { position: fixed; inset: 0; z-index: 25; pointer-events: none; }
.stick {
  position: absolute; bottom: 34px;
  width: 118px; height: 118px; border-radius: 50%;
  border: 1px solid var(--line-2);
  background: rgba(10, 13, 20, 0.5);
  pointer-events: auto;
  touch-action: none;
}
#stick-move { left: 26px; }
#stick-aim { right: 26px; }
.knob {
  position: absolute; left: 50%; top: 50%;
  width: 50px; height: 50px; margin: -25px 0 0 -25px;
  border-radius: 50%;
  background: rgba(120, 160, 220, 0.4);
  border: 1px solid var(--line-2);
}
#stick-aim .knob { background: rgba(230, 150, 90, 0.4); }
#btn-dash, #btn-pass {
  position: absolute; pointer-events: auto;
  width: 70px; height: 70px; border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--panel-2);
  color: var(--text); font-size: 12px; font-weight: 700; letter-spacing: 1px;
  touch-action: none;
}
#btn-dash { right: 160px; bottom: 150px; }
#btn-pass { right: 40px; bottom: 168px; border-color: var(--orange); color: #ffe9d4; }
#btn-pause {
  position: absolute; top: 16px; right: 16px;
  pointer-events: auto;
  width: 42px; height: 42px; border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted); font-size: 13px;
  touch-action: none;
}

/* ---------- telas (menu / pause / fim) ---------- */
/* fim/pausa: overlay centrado com rolagem SEGURA (margin:auto no filho —
   flexbox centrado cortaria o topo quando o conteúdo estoura a tela) */
#endscreen, #pausescreen {
  position: fixed; inset: 0; z-index: 50;
  display: flex;
  background: rgba(7, 9, 14, 0.88);
  overflow-y: auto;
}

/* o lobby é um SITE: header fixo + hero central + rodapé fino.
   O fundo é a ARENA 3D girando (vitrine), vista através do véu translúcido —
   em modo menu ela renderiza em resolução reduzida e com sombras congeladas
   (ver applyPerfMode em main.js), então fica bonita sem pesar. */
#menu {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column;
  /* MODELO B: a arena 3D é o HERÓI — véu LEVE. Vinheta pras bordas + scrims
     escuros só no topo (header) e na base (dock/rodapé), deixando o miolo
     aberto pra arena aparecer. Legibilidade do texto vem de text-shadow. */
  background:
    /* plano preto uniforme sobre a arena (intensidade em --menu-escurecer, no :root) */
    linear-gradient(rgba(3, 5, 9, var(--menu-escurecer)), rgba(3, 5, 9, var(--menu-escurecer))),
    radial-gradient(125% 92% at 50% 40%, transparent 42%, rgba(6, 8, 12, 0.45) 100%),
    linear-gradient(180deg, rgba(6, 8, 12, 0.50) 0%, rgba(6, 8, 12, 0) 22%, rgba(6, 8, 12, 0) 54%, rgba(6, 8, 12, 0.65) 100%);
  overflow-y: auto; overflow-x: hidden;
}

/* ---- header ---- */
.site-header {
  position: sticky; top: 0; z-index: 5;
  background: transparent; /* flutua sobre a arena 3D (Modelo B) */
}
.header-inner {
  max-width: 1160px; margin: 0 auto;
  padding: 16px 28px;
  display: flex; align-items: center; justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-logo { width: 44px; height: 44px; display: block; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5)); }
.brand-name { font-family: var(--font-display); font-size: 22px; font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text); line-height: 1; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55); }
.brand-name span { color: var(--orange); }
#account-area { display: flex; align-items: center; gap: 8px; }
.chip-btn {
  padding: 9px 22px;
  background: transparent;
  border: 1px solid var(--line-2); border-radius: 999px;
  color: var(--text); font-size: 12px; font-weight: 700; letter-spacing: 1.5px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.chip-btn:hover { border-color: var(--blue); color: var(--blue); }
.chip-logged {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px 7px 14px;
  background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--text);
}
.chip-dot { width: 7px; height: 7px; border-radius: 50%; background: #46d68c; }

/* usado pelas telas de FIM e PAUSA */
.menu-inner {
  margin: auto; /* centraliza e ainda rola sem cortar o topo */
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  padding: 32px 24px; max-width: 560px; width: 100%;
  text-align: center;
}

.logo {
  font-size: clamp(52px, 8vw, 92px); font-weight: 800; letter-spacing: 6px;
  color: var(--text); line-height: 0.95;
}
.logo-flag { color: var(--orange); }
.tagline { font-size: 15px; color: var(--muted); line-height: 1.65; }
.tagline b { color: var(--text); }

/* ---- MODELO B: hero central (logo + tagline + play) sobre a arena 3D ---- */
.lobby {
  flex: 1 1 auto; min-height: 0;
  width: 100%; max-width: 1160px; margin: 0 auto;
  padding: 10px 28px 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
.hero { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; max-width: 720px; min-width: 0; }

/* LOGO: emblema SVG (sa-web.svg) + wordmark de apoio em Anton */
.hero-logo { display: flex; flex-direction: column; align-items: center; }
.hero-logo-img {
  width: auto; height: clamp(130px, 26vh, 270px); max-width: 94vw; display: block;
}
.hero-tagline {
  font-size: clamp(14px, 1.4vw, 17px); color: var(--ink-soft); line-height: 1.55;
  max-width: 42ch; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.85);
}
.hero-tagline b { color: var(--text); }
.hero-loop {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85);
}
.hero-loop b { color: var(--orange); }
.hero-loop i { color: var(--line-2); font-style: normal; }

.cta-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.cta {
  display: inline-flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 14px 30px;
  /* canto cortado (Kinetic/esports) no lado externo — botão "de arena" */
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  font-size: 16px; font-weight: 800; letter-spacing: 0.3px; text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.14s cubic-bezier(0.16, 1, 0.3, 1), background 0.1s, border-color 0.1s;
}
.cta span { font-size: 11px; font-weight: 700; letter-spacing: 0.4px; text-transform: none; opacity: 0.72; }
.cta:hover { transform: translateY(-3px); }
/* laranja = energia da marca (o "!"), carrega a ação principal; leve glow pra
   destacar sobre a arena 3D em movimento */
.cta-primary { background: var(--orange); color: #1c0f05; border: none; box-shadow: 0 10px 28px rgba(255, 140, 58, 0.30); }
.cta-primary:hover { background: #ffa15a; }
.cta-primary:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }
.cta-ghost { background: rgba(10, 13, 20, 0.5); border: 1px solid var(--line-2); color: var(--text); }
.cta-ghost:hover { border-color: var(--text); background: rgba(255, 255, 255, 0.07); }
.cta-ghost span { opacity: 0.6; }

/* ---- dock inferior: vitrine 3D do personagem (Modelo B) ---- */
.char-dock {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 0 16px 8px;
}
.dock-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-soft); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.95);
}
.char-row { display: flex; align-items: center; gap: 10px; }
.char-stage {
  position: relative;
  width: min(46vw, 200px);
  height: min(28vh, 205px);
}
#char-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.char-arrow {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  padding-bottom: 4px;
  background: var(--panel-2);
  border: 1px solid var(--line-2); border-radius: 50%;
  color: var(--text); font-size: 26px; line-height: 1;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.char-arrow:hover { border-color: var(--blue); color: var(--blue); }
.char-arrow:active { background: var(--blue); color: #071018; }
.char-name {
  font-family: var(--font-display);
  font-size: 19px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text);
  min-height: 22px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}
.char-dots { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; max-width: 240px; }
.char-dots .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  transition: background 0.12s, transform 0.12s;
}
.char-dots .dot.on { background: var(--orange); transform: scale(1.3); }

.panel-label { font-size: 10.5px; letter-spacing: 2px; color: var(--muted); font-weight: 700; text-align: left; }

/* modal de arena (mesmo cartão do login) */
#arena-modal {
  position: fixed; inset: 0; z-index: 70;
  display: flex;
  background: rgba(7, 9, 14, 0.72); /* mais claro: dá pra ver a arena trocando atrás */
  overflow-y: auto;
}
.arena-card { max-width: 470px; }
#btn-comecar {
  width: 100%;
  padding: 14px;
  margin-top: 4px;
  font-size: 14px; font-weight: 800; letter-spacing: 2px;
  color: #071018; background: var(--blue);
  border: none; border-radius: 10px; cursor: pointer;
  transition: background 0.12s;
}
#btn-comecar:hover { background: #55c2ff; }

/* ---- rodapé: faixa fina "como jogar" (sem cartões) ---- */
/* rodapé: uma linha só — marca à esquerda, "como jogar" abre o popup */
.site-footer {
  background: transparent; /* flutua na base; o scrim do #menu dá o contraste */
}
.footer-inner {
  max-width: 1160px; margin: 0 auto;
  padding: 13px 28px;
  display: flex; align-items: center; gap: 14px;
}
.foot-brand {
  font-family: var(--font-display); font-size: 17px; letter-spacing: 0.02em;
  color: var(--text); text-transform: uppercase; line-height: 1;
}
.foot-bang { color: var(--orange); }
.foot-ver { font-size: 11px; letter-spacing: 1.2px; color: var(--muted); text-transform: uppercase; }
.foot-link {
  margin-left: auto;
  background: none; border: none; cursor: pointer; font-family: inherit;
  color: var(--ink-soft); font-size: 13px; font-weight: 600;
  padding: 5px 1px; border-bottom: 1px solid transparent;
  transition: color 0.14s, border-color 0.14s;
}
.foot-link:hover { color: var(--text); border-bottom-color: var(--orange); }

/* popup: como jogar */
#howto-modal {
  position: fixed; inset: 0; z-index: 70;
  display: flex; background: rgba(4, 6, 10, 0.72); overflow-y: auto;
  backdrop-filter: blur(2px);
}
.howto-card {
  width: 100%; max-width: 460px; margin: auto;
  display: flex; flex-direction: column; gap: 16px;
  padding: 30px 30px 28px;
  background: #10141d; border: 1px solid var(--line); border-radius: 16px;
}

/* entrance — enhancement, não gate (roda no load; reduced-motion = estático) */
@keyframes hero-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.hero { animation: hero-in 0.6s cubic-bezier(0.2, 0.85, 0.25, 1) both; }
.char-dock { animation: hero-in 0.7s cubic-bezier(0.2, 0.85, 0.25, 1) 0.12s both; }
@media (prefers-reduced-motion: reduce) { .hero, .char-dock { animation: none; } }
.howto-title {
  font-family: var(--font-display); font-size: 34px; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--text); line-height: 1;
}
.howto-list { list-style: none; display: flex; flex-direction: column; gap: 13px; counter-reset: h; }
.howto-list li {
  position: relative; padding-left: 34px;
  font-size: 14px; line-height: 1.5; color: var(--ink-soft);
}
.howto-list li b { color: var(--text); }
.howto-list li::before {
  counter-increment: h; content: counter(h);
  position: absolute; left: 0; top: -1px;
  width: 23px; height: 23px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 13px; color: var(--orange);
  background: rgba(255, 140, 58, 0.12); border-radius: 7px;
}
.howto-controls { font-size: 12px; line-height: 1.9; color: var(--muted); border-top: 1px solid var(--line); padding-top: 14px; }
.howto-controls b { color: var(--ink-soft); }

/* seletor de arena */
#arena-select { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.arena-label { font-size: 10.5px; letter-spacing: 2px; color: var(--muted); text-align: left; font-weight: 600; }
#arena-list { display: flex; flex-wrap: wrap; gap: 6px; }
.arena-chip {
  padding: 8px 14px;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  color: var(--muted); font-size: 12.5px; font-weight: 600;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}
.arena-chip:hover { color: var(--text); border-color: var(--text); }
.arena-chip.on { background: var(--blue); border-color: var(--blue); color: #071018; }
.arena-desc { font-size: 11.5px; color: var(--muted); text-align: left; min-height: 15px; }

/* página de login dedicada */
#login-page {
  position: fixed; inset: 0; z-index: 70;
  display: flex;
  background: rgba(7, 9, 14, 0.86);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  overflow-y: auto;
}
.login-card {
  width: 100%; max-width: 400px;
  display: flex; flex-direction: column; gap: 14px;
  padding: 28px;
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); /* modal elevado (não card decorativo) */
  margin: auto; /* centraliza com rolagem segura em telas baixas */
}
.back-btn {
  align-self: flex-start;
  background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: 12.5px; letter-spacing: 0.5px;
}
.back-btn:hover { color: var(--text); }
.login-title { font-family: var(--font-display); font-weight: 400; font-size: 28px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text); }

#auth-box {
  width: 100%;
  display: flex; flex-direction: column; gap: 8px;
}
.auth-tabs { display: flex; gap: 4px; padding: 4px; background: rgba(0, 0, 0, 0.25); border-radius: 10px; }
.auth-tabs button {
  flex: 1; padding: 9px;
  background: transparent;
  border: none; border-radius: 7px;
  color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: 1.5px;
  cursor: pointer; transition: background 0.12s, color 0.12s;
}
.auth-tabs button.on { background: var(--blue); color: #071018; }
#auth-box input {
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid var(--line-2); border-radius: 9px;
  color: var(--text); font-size: 14px;
  transition: border-color 0.12s, box-shadow 0.12s;
}
#auth-box input::placeholder { color: var(--muted); }
#auth-box input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(56, 182, 255, 0.16); }
#btn-auth-go, #btn-newpass {
  padding: 13px;
  margin-top: 2px;
  background: var(--blue); border: none; border-radius: 9px;
  color: #071018; font-size: 13px; font-weight: 800; letter-spacing: 1.5px;
  cursor: pointer; transition: background 0.12s, transform 0.12s;
}
#btn-auth-go:hover, #btn-newpass:hover { background: #55c2ff; transform: translateY(-1px); }
.link-btn {
  background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: 11.5px; text-decoration: underline;
}
.link-btn:hover { color: var(--text); }

/* divisor "ou" entre login por senha e login social */
.auth-ou {
  display: flex; align-items: center; gap: 10px;
  margin: 2px 0; color: var(--muted); font-size: 11px; letter-spacing: 0.06em;
}
.auth-ou::before, .auth-ou::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* botão "Entrar com Google": branco, no padrão de identidade do Google */
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px; border-radius: 9px; cursor: pointer;
  background: #fff; border: 1px solid #dadce0;
  color: #3c4043; font-size: 13.5px; font-weight: 600;
  transition: background 0.12s, box-shadow 0.12s;
}
.btn-google:hover { background: #f7f8f8; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25); }
.btn-google svg { flex: 0 0 auto; }
.mini-btn {
  margin-left: 10px; padding: 5px 12px;
  background: transparent; border: 1px solid var(--line-2); border-radius: 6px;
  color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: 1px;
  cursor: pointer;
}
.mini-btn:hover { border-color: var(--text); color: var(--text); }
#auth-logged { font-size: 13.5px; color: var(--text); }
#auth-forms, #auth-recovery { display: flex; flex-direction: column; gap: 8px; }
.auth-title { font-size: 11px; letter-spacing: 1.5px; color: var(--muted); font-weight: 700; }
.auth-hint { font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); margin: -2px 0 2px; }
#auth-setnick { display: flex; flex-direction: column; gap: 8px; }
#btn-setnick {
  padding: 13px; margin-top: 2px;
  background: var(--blue); border: none; border-radius: 9px;
  color: #071018; font-size: 13px; font-weight: 800; letter-spacing: 1.5px;
  cursor: pointer; transition: background 0.12s;
}
#btn-setnick:hover { background: #55c2ff; }
#auth-msg { font-size: 12px; min-height: 14px; color: var(--orange); }
#auth-msg.good { color: #46d68c; }

/* ---------- Configurações ---------- */
/* botão ⚙ no header do lobby */
.icon-btn {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--line-2); border-radius: 999px;
  color: var(--muted); font-size: 17px; line-height: 1;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, transform 0.2s;
}
.icon-btn:hover { border-color: var(--blue); color: var(--blue); transform: rotate(35deg); }

#settings-page {
  position: fixed; inset: 0; z-index: 80; /* acima do pause (50) e do login (70) */
  display: flex;
  background: rgba(7, 9, 14, 0.86);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  overflow-y: auto;
}
.settings-card { max-width: 440px; gap: 18px; }

.set-row { display: flex; flex-direction: column; gap: 9px; }
.set-row-inline { flex-direction: row; align-items: center; justify-content: space-between; }
.set-label {
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.4px;
  color: var(--text);
  display: flex; align-items: center; gap: 8px;
}
.set-val { color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 700; }

.set-range {
  width: 100%; height: 4px;
  accent-color: var(--blue);
  cursor: pointer;
}

/* controle segmentado (Auto / Alta / Baixa) */
.seg { display: flex; gap: 6px; }
.seg button {
  flex: 1; padding: 9px;
  background: transparent;
  border: 1px solid var(--line-2); border-radius: 8px;
  color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: 1px;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.seg button:hover { border-color: var(--text); color: var(--text); }
.seg button.on { background: var(--blue); border-color: var(--blue); color: #071018; }

.set-note {
  align-self: flex-start;
  background: none; border: none; cursor: pointer;
  color: var(--orange); font-size: 11.5px; text-decoration: underline;
  text-align: left; padding: 0;
}
.set-note:hover { color: #ffb27a; }

/* interruptor Mostrar FPS */
.toggle {
  width: 46px; height: 26px; flex: 0 0 auto;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: rgba(0, 0, 0, 0.3);
  cursor: pointer; position: relative;
  transition: background 0.15s, border-color 0.15s;
}
.toggle .toggle-dot {
  position: absolute; top: 50%; left: 3px; transform: translateY(-50%);
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--muted);
  transition: left 0.15s, background 0.15s;
}
.toggle[aria-checked="true"] { background: var(--blue); border-color: var(--blue); }
.toggle[aria-checked="true"] .toggle-dot { left: 25px; background: #071018; }

/* contador de FPS no HUD */
#fps {
  position: absolute; top: 16px; left: 16px;
  padding: 5px 10px;
  background: var(--panel);
  border: 1px solid var(--line); border-radius: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.5px;
  color: var(--muted); font-variant-numeric: tabular-nums;
  box-shadow: var(--shadow);
}
@media (max-height: 540px) {
  #fps { top: 8px; left: calc(8px + env(safe-area-inset-left, 0px)); font-size: 10.5px; padding: 3px 8px; }
}

/* botões das telas de fim/pausa */
#btn-restart, #btn-resume {
  padding: 14px 48px;
  font-size: 15px; font-weight: 800; letter-spacing: 2.5px;
  color: #071018;
  background: var(--blue);
  border: none; border-radius: 10px;
  cursor: pointer;
  transition: background 0.12s, transform 0.12s;
}
#btn-restart:hover, #btn-resume:hover {
  background: #55c2ff;
  transform: translateY(-1px);
}
.online-status { font-size: 12px; color: var(--orange); min-height: 15px; text-align: center; }
button.ghost {
  padding: 10px 30px;
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: 1.5px;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}
button.ghost:hover { border-color: var(--text); color: var(--text); }

/* pause: card central com o PLACAR DA PARTIDA embutido (o card do Tab é
   movido p/ cá pelo main.js) + fileira de ações embaixo */
#pause-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(34px, 6vw, 52px); letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text);
  text-align: center;
}
.pause-card {
  margin: auto;
  width: min(720px, calc(100% - 28px));
  display: flex; flex-direction: column; gap: 18px;
  padding: 26px 26px 24px;
  background: var(--panel);
  border: 1px solid var(--line-2); border-radius: 16px;
}
#pause-sb .sb-card { width: 100%; box-shadow: none; }
/* dentro da pausa o card é largo: as colunas ESTICAM juntas (fixas em 252px
   elas ficavam penduradas à esquerda, com espaço morto à direita) */
#pause-sb .sb-col { flex: 1; width: auto; min-width: 0; }
.pause-row { display: flex; gap: 10px; }
.pause-row button { flex: 1; padding: 13px 10px; border-radius: 10px; cursor: pointer; }
#btn-resume {
  border: none;
  background: var(--blue); color: #071018;
  font-size: 13.5px; font-weight: 800; letter-spacing: 1.5px;
  transition: background 0.12s;
}
#btn-resume:hover { background: #55c2ff; }
@media (max-width: 560px) {
  .pause-row { flex-direction: column; }
  .pause-card { padding: 20px 16px; }
}

/* fim de partida — vitória = laranja da marca · derrota = azul-GELO (congelou!) */
#end-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(64px, 13vw, 120px); letter-spacing: -0.02em; text-transform: uppercase;
  line-height: 0.9;
  animation: kx-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
#end-title.win { color: var(--orange); text-shadow: 0 6px 42px rgba(255, 140, 58, 0.4); }
#end-title.lose { color: #9cc6e8; text-shadow: 0 6px 42px rgba(120, 180, 240, 0.3); }
#end-score {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(22px, 3.2vw, 30px); letter-spacing: 0.04em;
  color: var(--ink-soft);
}
/* lineup do time (estilo CS/Valorant): retrato + classe + stats por jogador */
#end-stats { display: flex; gap: 10px; justify-content: center; align-items: flex-start; flex-wrap: wrap; }
.elu {
  position: relative;
  min-width: 126px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 15px 12px 12px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 11px 100%, 0 calc(100% - 11px));
  animation: kx-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.elu:nth-child(2) { animation-delay: 0.06s; }
.elu:nth-child(3) { animation-delay: 0.12s; }
.elu:nth-child(4) { animation-delay: 0.18s; }
.elu.me { border-color: rgba(255, 255, 255, 0.5); }
/* MVP: destaque dramático — borda laranja + brilho + escala + faixa no topo (Kinetic) */
.elu.mvp {
  border-color: var(--orange);
  box-shadow: 0 0 0 1px var(--orange), 0 12px 34px rgba(255, 140, 58, 0.28);
  transform: scale(1.06);
  padding-top: 30px; /* espaço pra faixa MVP dentro do card (o clip-path corta o que vaza pra fora) */
}
/* faixa laranja no topo do card — o canto cortado acompanha o corte do próprio card */
.elu em {
  position: absolute; top: 0; left: 0; right: 0;
  font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: 0.2em; text-align: center;
  padding: 5px 0 6px;
  background: var(--orange); color: #180d04;
}
.elu b {
  max-width: 116px;
  font-size: 13px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.elu i { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--muted); }
.elu-stats { display: flex; gap: 8px; margin-top: 2px; font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.elu .rv-face { width: 64px; height: 64px; } /* no fim o retrato é menor (4 cards numa linha) */
/* item 17: personagem VIVO no lineup do fim (Victory/Idle). O canvas é 232×260;
   aqui ele desce pro tamanho do card e "pisa" no rodapé (margem negativa) */
.elu .elu-live { width: 82px; height: auto; margin: -6px 0 -10px; }
#endscreen .menu-inner { max-width: 660px; } /* o lineup de 4 cards precisa de mais largura que o menu padrão */

/* ---------- ícones (SVG inline — substituem os emojis no site todo) ---------- */
.ic {
  width: 1em; height: 1em;
  display: inline-block; vertical-align: -0.14em;
  flex: 0 0 auto;
}
.icw { display: inline-flex; align-items: center; }
.ic-face { width: 1.6em; height: 1.6em; opacity: 0.55; } /* fallback do retrato */
#weapon-state .ic { margin-right: 2px; }
.feed-line .ic { vertical-align: -0.18em; }

/* ---------- classes (função): HUD, seleção e reveal ---------- */
/* pill da habilidade (só p/ classe com habilidade — hoje o Guarda) */
#hab-pill {
  position: absolute; bottom: 78px; left: 28px; /* acima de dash(28) + vida(52) */
  padding: 5px 10px;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 8px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--muted);
}
#hab-pill.ready { color: #d9f3ff; border-color: var(--blue); }

#btn-hab {
  position: absolute; pointer-events: auto;
  width: 54px; height: 54px; border-radius: 50%;
  border: 1px solid var(--blue);
  background: var(--panel-2); color: #d9f3ff; font-size: 20px;
  right: 250px; bottom: 150px; /* à esquerda do DASH */
  touch-action: none;
}
#btn-hab.cd { opacity: 0.45; border-color: var(--line-2); }

/* ---- seleção de função: TELA CHEIA estilo agent-select ---- */
#class-page {
  position: fixed; inset: 0; z-index: 55;
  display: flex; flex-direction: column;
  background:
    radial-gradient(120% 90% at 70% 30%, rgba(56, 182, 255, 0.10), transparent 55%),
    linear-gradient(180deg, rgba(6, 8, 13, 0.94), rgba(6, 8, 13, 0.985));
}
/* topo: voltar isolado à esquerda; título CENTRALIZADO (nada de texto colado em botão).
   Todo o conteúdo da tela vive no MESMO grid de 1160px da página inicial. */
.cp-top {
  position: relative;
  display: flex; align-items: center;
  width: min(1160px, 100%);
  margin: 0 auto;
  padding: 18px 28px 0;
  min-height: 40px;
}
.cp-title {
  position: absolute; left: 50%; top: 18px; transform: translateX(-50%);
  font-family: var(--font-display); font-weight: 400;
  font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
/* o palco 3D preenche o miolo TODO (o personagem fica no CENTRO da tela, no
   mesmo eixo do título e do roster); a info flutua à esquerda, dentro do grid */
.cp-main {
  position: relative;
  flex: 1; min-height: 0;
  width: min(1160px, 100%);
  margin: 0 auto;
  display: flex; align-items: center;
  padding: 0 28px;
}
.cp-info {
  position: relative; z-index: 1;
  width: min(400px, 42%);
  display: flex; flex-direction: column; gap: 12px;
}
.cpi-nome {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(44px, 7vw, 84px); line-height: 0.95;
  letter-spacing: 0.01em; text-transform: uppercase;
  color: var(--text);
  text-shadow: 0 8px 42px rgba(56, 182, 255, 0.25);
}
.cpi-skin { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); }
.cpi-desc { font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); max-width: 46ch; }
.cpi-attrs { display: flex; flex-direction: column; gap: 6px; }
.cpi-attr {
  display: flex; gap: 9px; align-items: baseline;
  font-size: 13px; font-weight: 600; color: var(--ink-soft);
}
.cpi-attr b { font-size: 11px; color: var(--muted); }
.cpi-attr.boa { color: #cfeaff; }
.cpi-attr.boa b { color: var(--blue); }
.cpi-hab {
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 12px;
  background: rgba(56, 182, 255, 0.07);
  border: 1px solid rgba(56, 182, 255, 0.25); border-radius: 10px;
}
.cpi-hab b { font-size: 12px; letter-spacing: 0.06em; color: #d9f3ff; }
.cpi-hab span { font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); }
#btn-class-go {
  width: 100%; max-width: 320px; padding: 14px; margin-top: 6px;
  font-size: 14px; font-weight: 800; letter-spacing: 2px;
  color: #071018; background: var(--blue);
  border: none; cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  transition: background 0.1s, transform 0.14s cubic-bezier(0.16, 1, 0.3, 1);
}
#btn-class-go:hover { background: #55c2ff; transform: translateY(-2px); }
.cp-stage { position: absolute; inset: 0; }
.cp-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* disco de luz no chão do palco (o personagem "pisa" num holofote azulado) */
.cp-stage::after {
  content: '';
  position: absolute; left: 50%; bottom: 12%;
  width: min(380px, 40%); aspect-ratio: 3.2 / 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(56, 182, 255, 0.14), transparent 68%);
  pointer-events: none;
}

/* roster: os 5 personagens embaixo (clica p/ trocar) — no mesmo grid central */
.cp-roster {
  width: min(1160px, 100%);
  margin: 0 auto;
  display: flex; justify-content: center; gap: 10px;
  padding: 10px 28px 18px;
  overflow-x: auto;
}
.cp-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 14px 9px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
  color: var(--muted); cursor: pointer;
  /* hover TÁTIL Kinetic: inundação de cor quase-instantânea (80ms) + lift */
  transition: background 0.08s, border-color 0.08s, color 0.08s, transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}
.cp-card:hover { border-color: var(--blue); color: var(--text); background: rgba(56, 182, 255, 0.12); transform: translateY(-3px); }
.cp-card.on { border-color: var(--blue); color: var(--text); background: rgba(56, 182, 255, 0.16); transform: translateY(-3px); }
.cp-card b {
  font-family: var(--font-display); font-weight: 400;
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
}
.cp-card i { font-style: normal; font-size: 12px; }
.cp-face {
  width: 56px; height: 56px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; overflow: hidden; flex: 0 0 auto;
}
.cp-face img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- reveal das equipes: TELA CHEIA, não bloqueia o jogo ----
   fundo QUASE PRETO (pedido do dono): o foco é só nos personagens; a contagem
   regressiva vive AQUI ("COMEÇANDO EM N"), não mais solta atrás */
#reveal {
  position: fixed; inset: 0; z-index: 45;
  display: flex;
  background:
    radial-gradient(80% 65% at 50% 40%, rgba(9, 12, 19, 0.97), rgba(2, 3, 5, 0.998));
  pointer-events: none;
}
.rv-full {
  margin: auto;
  width: min(1180px, calc(100% - 40px));
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(10px, 2.4vh, 26px);
  padding: 10px 0;
}
/* título + contagem empilhados no topo (COMEÇANDO EM · número logo abaixo) */
.rv-top { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.reveal-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(30px, 6vw, 68px); letter-spacing: -0.01em; text-transform: uppercase;
  color: var(--text);
  animation: rv-title 0.55s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
@keyframes rv-title { from { opacity: 0; transform: translateY(-14px) scale(1.05); } }
.rv-sides {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(10px, 3vw, 34px);
  width: 100%;
}
.rv-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
/* cabeçalho do time = etiqueta preenchida na cor do time (consistente com o Tab) */
.rv-side h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(14px, 1.9vw, 19px); letter-spacing: 0.06em;
  align-self: center; padding: 3px 14px 4px; color: #071018;
}
.rv-side h3.sb-azul { background: var(--blue); }
.rv-side h3.sb-laranja { background: var(--orange); }
/* coluna central: só o VS (o número foi pro topo, sob "COMEÇANDO EM") */
.rv-mid { display: flex; align-items: center; justify-content: center; }
/* VS = elemento GRÁFICO massivo (Kinetic): brilho azul à esquerda, laranja à
   direita — os dois times se chocam, sem gradiente de texto (regra anti-slop) */
.rv-vs {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(46px, 8vw, 104px); line-height: 0.8; letter-spacing: -0.03em;
  color: #7f8aa0;
  text-shadow: -7px 0 26px rgba(56, 182, 255, 0.5), 7px 0 26px rgba(255, 140, 58, 0.45);
  animation: rv-stamp 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.4s backwards; /* estampa depois dos cards */
}
@keyframes rv-stamp { from { opacity: 0; transform: scale(2.1) rotate(-6deg); } }
.rv-team {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(8px, 1.4vw, 14px);
}
.rv-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: clamp(10px, 1.6vw, 18px) 8px clamp(9px, 1.4vw, 14px);
  background: var(--panel);
  border: 1px solid var(--line);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  animation: rv-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
/* luz de palco na cor do time atrás do personagem */
.rv-card::before {
  content: '';
  position: absolute; top: 4%; left: 50%; transform: translateX(-50%);
  width: 72%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 182, 255, 0.20), transparent 68%);
}
.rv-card.t-laranja::before { background: radial-gradient(circle, rgba(255, 140, 58, 0.18), transparent 68%); }
.rv-card.t-azul { border-bottom: 2px solid rgba(56, 182, 255, 0.55); }
.rv-card.t-laranja { border-bottom: 2px solid rgba(255, 140, 58, 0.55); }
.rv-card.me { border-color: rgba(255, 255, 255, 0.6); }
/* sombra projetada do personagem na cor do time (não é blur de tela) */
.rv-card.t-azul .rv-live { filter: drop-shadow(0 16px 14px rgba(56, 182, 255, 0.22)); }
.rv-card.t-laranja .rv-live { filter: drop-shadow(0 16px 14px rgba(255, 140, 58, 0.20)); }
/* tag VOCÊ: faixa no topo DENTRO do card (o card tem overflow:hidden — a pill
   em top:-8px era CORTADA no celular). Agora nasce colada no topo, sem cortar. */
.rv-card em {
  position: absolute; top: 0; left: 0; right: 0;
  font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: 0.14em; text-align: center;
  padding: 2px 0 3px;
  background: var(--text); color: #0a0d14;
}
.rv-card.me { padding-top: 20px; } /* espaço pra faixa VOCÊ não cobrir o personagem */
.rv-card b {
  max-width: 100%;
  font-size: clamp(12px, 1.4vw, 14.5px); color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rv-card i {
  font-style: normal; font-size: clamp(10px, 1.2vw, 12px);
  font-weight: 700; letter-spacing: 0.04em; color: var(--muted);
}
.rv-face {
  width: clamp(56px, 7vw, 92px); height: clamp(56px, 7vw, 92px);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; overflow: hidden;
}
.rv-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* personagem VIVO no card (canvas copiado do renderer compartilhado) */
.rv-live {
  width: clamp(96px, 11vw, 150px);
  height: auto;
  display: block;
}
/* contagem no TOPO: "COMEÇANDO EM" (kicker) + número logo abaixo */
.rv-count-lbl {
  font-size: clamp(10px, 1.4vw, 13px); font-weight: 800; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted);
  animation: rv-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.rv-count-n {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(40px, 7vw, 72px); line-height: 0.85; color: var(--text);
  text-shadow: 0 4px 30px rgba(120, 190, 255, 0.25);
}
.rv-count-n.pop { animation: rv-pop 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes rv-pop { from { transform: scale(1.35); opacity: 0.4; } }
@keyframes rv-in { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) {
  .rv-card, .rv-count-lbl, .reveal-title, .rv-vs { animation: none; }
  .rv-count-n.pop { animation: none; }
}

/* seleção em telas ESTREITAS/EM PÉ: o palco volta ao fluxo e tudo empilha.
   Só em RETRATO — no deitado (celular na horizontal, o modo do jogo) a tela de
   função mantém as 2 colunas (info ↔ personagem), tratadas no bloco mobile-deitado. */
@media (max-width: 980px) and (orientation: portrait) {
  .cp-main { flex-direction: column-reverse; align-items: stretch; padding: 0 14px; }
  .cp-stage { position: relative; inset: auto; min-height: 32vh; }
  .cp-info { width: 100%; gap: 8px; }
  .cpi-desc { font-size: 13px; }
  #btn-class-go { max-width: none; }
}
/* reveal em RETRATO estreito: times empilham (o deitado curto é tratado no
   bloco 📱 CELULAR, que mantém 4+centro+4 lado a lado) */
@media (max-width: 760px) and (orientation: portrait) {
  .rv-vs { display: none; }
  .rv-sides { flex-direction: column; gap: 14px; }
  .rv-face { width: 52px; height: 52px; }
}

/* ---------- responsivo ---------- */

/* telas médias */
@media (max-width: 940px) {
  .char-stage { width: min(44vw, 185px); height: min(28vh, 235px); }
}

/* celular em PÉ: hero central compacto + dock embaixo (o Modelo B já é coluna) */
@media (max-width: 700px) {
  .lobby { padding: 14px 18px 0; }
  .hero { gap: 14px; }
  .char-stage { width: min(52vw, 200px); height: min(30vh, 250px); }
  .char-name { font-size: 18px; }
}

/* celular em pé */
@media (max-width: 560px) {
  #score-blue, #score-orange { font-size: 21px; }
  #timer { font-size: 15px; padding: 0 12px; }
  .score-box { padding: 8px 12px 10px; gap: 8px; }
  #weapon-state { font-size: 11px; max-width: 94vw; white-space: normal; text-align: center; }
  #dash-pips { left: 50%; transform: translateX(-50%); bottom: 70px; }

  .header-inner { padding: 11px 16px; }
  .lobby { padding: 16px 18px 24px; }
  .cta-row { width: 100%; flex-direction: column; }
  .cta { width: 100%; min-width: 0; align-items: center; }
  #arena-list { flex-wrap: wrap; }
  .login-card { padding: 20px; }
  .footer-inner { padding: 12px 16px; gap: 12px; }
  .foot-ver { display: none; } /* pouca largura: some a versão, fica marca + como jogar */
}

/* HUD DENTRO DO JOGO em telas baixas (celular deitado): tudo menor,
   fora do caminho do jogador, respeitando o notch (safe-area) */
@media (max-height: 540px) {
  #topbar { top: 8px; }
  .score-box { padding: 5px 10px 7px; gap: 6px; }
  #score-blue, #score-orange { font-size: 17px; min-width: 16px; }
  .score-box .team-name { font-size: 9px; letter-spacing: 1.5px; }
  #timer { font-size: 13px; padding: 0 10px; }

  #msgs { top: 44px; gap: 4px; }
  .msg { font-size: 10.5px; padding: 4px 10px 4px 8px; }
  .msg.big { font-size: 12px; padding: 5px 14px 5px 11px; }

  #weapon-state { bottom: 10px; font-size: 9.5px; padding: 4px 10px 4px 8px; }
  #dash-pips { bottom: 12px; left: 16px; }
  .pip { width: 20px; height: 6px; }

  .stick {
    width: 88px; height: 88px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  #stick-move { left: calc(12px + env(safe-area-inset-left, 0px)); }
  #stick-aim { right: calc(12px + env(safe-area-inset-right, 0px)); }
  .knob { width: 38px; height: 38px; margin: -19px 0 0 -19px; }
  #btn-dash {
    width: 54px; height: 54px; font-size: 10px;
    right: calc(116px + env(safe-area-inset-right, 0px));
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }
  #btn-pass {
    width: 54px; height: 54px; font-size: 10px;
    right: calc(28px + env(safe-area-inset-right, 0px));
    bottom: calc(116px + env(safe-area-inset-bottom, 0px));
  }
  #btn-hab {
    width: 46px; height: 46px; font-size: 16px;
    right: calc(184px + env(safe-area-inset-right, 0px));
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }
  #hab-pill { bottom: 28px; left: 16px; font-size: 10px; }
  #btn-pause {
    top: 8px; width: 34px; height: 34px; font-size: 11px;
    right: calc(8px + env(safe-area-inset-right, 0px));
  }

  #countdown { font-size: 76px; }
  .frozen-title { font-size: 30px; letter-spacing: 4px; }
  .frozen-sub { font-size: 12px; }
  .edge-arrow { font-size: 20px; }
}

/* celular DEITADO (pouca altura): comprime o hero e o dock pra caber a tela toda */
@media (max-height: 520px) {
  .lobby { padding: 8px 16px 0; }
  .hero { gap: 8px; }
  .hero-logo-img { height: clamp(84px, 26vh, 150px); }
  .hero-tagline { font-size: 12px; }
  .dock-label { display: none; }
  .cta { padding: 10px 20px; font-size: 14px; }
  .char-dock { padding: 2px 12px 6px; }
  .char-stage { width: min(30vw, 150px); height: min(46vh, 168px); }
  .char-arrow { width: 36px; height: 36px; font-size: 20px; }
  .char-name { font-size: 15px; min-height: 17px; }
  .footer-inner { padding: 8px 24px; }
  .header-inner { padding: 8px 20px; }
}

/* ---------- JOGAR COM AMIGOS (sala com código) + LOBBY de espera ---------- */
/* link discreto abaixo dos CTAs da home */
.btn-amigos {
  margin: 10px auto 0; display: block;
  background: none; border: none; cursor: pointer;
  font: 600 12.5px/1 inherit; letter-spacing: 0.04em;
  color: var(--muted); text-decoration: underline; text-underline-offset: 3px;
}
.btn-amigos:hover { color: var(--text); }

/* modal criar/entrar (reusa .login-card) */
#amigos-modal {
  position: fixed; inset: 0; z-index: 70;
  display: flex;
  background: rgba(7, 9, 14, 0.72);
  overflow-y: auto;
}
.am-criar {
  width: 100%; padding: 14px; margin-top: 6px;
  display: flex; flex-direction: column; gap: 3px; align-items: center;
  background: var(--blue); color: #071018; border: none; cursor: pointer;
  font-weight: 800; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  transition: transform 0.12s ease-out;
}
.am-criar:hover { transform: translateY(-2px); }
.am-criar span { font-weight: 600; font-size: 11px; letter-spacing: 0.02em; opacity: 0.75; text-transform: none; }
.am-ou { margin: 14px 0 8px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); text-align: center; }
.am-join { display: flex; gap: 8px; }
.am-join input {
  flex: 1; min-width: 0; padding: 11px 12px;
  background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 9px;
  color: var(--text); font: 700 18px var(--font-display); letter-spacing: 0.3em;
  text-transform: uppercase; text-align: center;
}
.am-join input:focus { outline: none; border-color: var(--blue); }
.am-join button {
  padding: 0 18px; background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line-2); border-radius: 9px; cursor: pointer;
  font-weight: 800; letter-spacing: 0.06em;
}
.am-join button:hover { border-color: var(--blue); background: rgba(56, 182, 255, 0.12); }

/* modal do CONVIDADO (jogar online só com um nome) — reusa .login-card */
#guest-modal {
  position: fixed; inset: 0; z-index: 70;
  display: flex;
  background: rgba(7, 9, 14, 0.86);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  overflow-y: auto;
}
#guest-modal .link-btn { align-self: center; margin-top: 4px; }
.am-erro { min-height: 16px; margin-top: 8px; font-size: 12px; color: #ff8a8a; text-align: center; }

/* código da sala no Tab */
.sb-sala { margin: -6px 0 6px; text-align: center; font-size: 11px; letter-spacing: 0.14em; color: var(--muted); }
.sb-sala b { color: var(--text); font-family: var(--font-display); font-weight: 400; font-size: 14px; letter-spacing: 0.2em; }

/* ---------- lobby de espera (tela cheia, estilo Kinetic) ---------- */
#lobby-overlay {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  background: rgba(7, 9, 14, 0.88);
}
.lb-inner { width: min(560px, 92vw); text-align: center; animation: kx-in 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.lb-titulo {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(26px, 5vw, 44px); letter-spacing: 0.01em; color: var(--text);
}
.lb-codigo {
  margin-top: 10px;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(64px, 14vw, 120px); line-height: 0.9; letter-spacing: 0.14em;
  color: var(--blue); text-shadow: 0 6px 34px rgba(56, 182, 255, 0.4);
}
#btn-copiar-cod {
  margin-top: 10px; padding: 9px 20px;
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line-2);
  cursor: pointer; font-weight: 800; font-size: 12px; letter-spacing: 0.1em;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
}
#btn-copiar-cod:hover { border-color: var(--blue); background: rgba(56, 182, 255, 0.12); }
.lb-dica { margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.lb-conta {
  margin-top: 6px;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(56px, 12vw, 96px); line-height: 1; color: var(--orange);
  text-shadow: 0 6px 30px rgba(255, 140, 58, 0.35);
}
.lb-lista { margin: 18px auto 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 480px; }
.lb-jog {
  padding: 6px 12px; font-size: 12.5px; font-weight: 700; color: var(--text);
  background: var(--panel-2); border: 1px solid var(--line-2);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  border-left: 3px solid var(--blue);
}
.lb-jog.laranja { border-left-color: var(--orange); }
.lb-jog em { font-style: normal; color: var(--muted); font-weight: 600; }
.lb-acoes { margin-top: 22px; display: flex; gap: 10px; justify-content: center; }
#btn-lb-comecar {
  padding: 13px 34px; background: var(--blue); color: #071018; border: none; cursor: pointer;
  font-weight: 800; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  transition: transform 0.12s ease-out;
}
#btn-lb-comecar:hover { transform: translateY(-2px); }
#btn-lb-sair { padding: 13px 22px; border-radius: 10px; }

/* formato da sala personalizada (host escolhe no lobby) */
.lb-cfg { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.lb-fmt { display: flex; gap: 6px; }
.lb-fmt button {
  padding: 8px 16px; cursor: pointer;
  background: var(--panel-2); color: var(--muted); border: 1px solid var(--line-2);
  font: 700 13px var(--font-display); letter-spacing: 0.08em;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.lb-fmt button:hover { color: var(--text); border-color: var(--blue); }
.lb-fmt button.on { background: var(--blue); color: #071018; border-color: var(--blue); }
.lb-bots { display: flex; gap: 7px; align-items: center; font-size: 12.5px; color: var(--ink-soft); cursor: pointer; }
.lb-bots input { accent-color: var(--blue); width: 15px; height: 15px; cursor: pointer; }

/* ---------- P3 do polimento: números que reagem + tensão de fim ---------- */
/* placar do HUD dá um POP quando o número muda (retrig via JS) */
.pop-num { display: inline-block; animation: sc-pop 0.38s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes sc-pop { 30% { transform: scale(1.5); } }
/* últimos 30s: o timer "tenciona" (pulso vermelho discreto, 1x/s) */
.tense { color: #ff7a6a !important; animation: t-pulse 1s ease-in-out infinite; }
@keyframes t-pulse { 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .pop-num, .tense { animation: none; } }

/* =====================================================================
   📱 CELULAR — leva de responsividade (08/jul/2026)
   O jogo é DEITADO. Breakpoints por ORIENTAÇÃO + tamanho (não só largura):
   • retrato estreito  → empilha, encolhe, rola (nada corta/sobrepõe)
   • deitado curto     → 2 colunas / linhas únicas (aproveita a largura)
   Regra de ouro desta leva: NADA de personagem sobre botão; NADA cortado.
   ===================================================================== */

/* ---- aviso "GIRE O CELULAR" (o jogo é deitado) ---- */
#rotate-warn {
  position: fixed; inset: 0; z-index: 120;
  display: none; /* ligado só por: em partida + em pé + toque (regras abaixo) */
  flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: rgba(7, 9, 14, 0.94);
  text-align: center; padding: 24px;
}
.rw-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(30px, 8vw, 52px); letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--text);
}
.rw-sub { font-size: 14px; letter-spacing: 0.06em; color: var(--muted); text-transform: uppercase; }
/* celular estilizado que "gira" (só CSS) */
.rw-phone {
  width: 54px; height: 92px; border-radius: 12px;
  border: 3px solid var(--text);
  position: relative;
  animation: rw-spin 1.8s ease-in-out infinite;
}
.rw-scr { position: absolute; inset: 8px; border-radius: 4px; background: rgba(56, 182, 255, 0.25); }
@keyframes rw-spin {
  0%, 30% { transform: rotate(0deg); }
  60%, 100% { transform: rotate(-90deg); }
}
@media (prefers-reduced-motion: reduce) { .rw-phone { animation: none; transform: rotate(-90deg); } }
/* SÓ mostra: durante a partida (body.in-game), em RETRATO e no TOQUE (coarse).
   Menus podem funcionar em pé; desktop com janela alta nunca vê isso. */
@media (orientation: portrait) and (pointer: coarse) {
  body.in-game #rotate-warn { display: flex; }
}
body.rot-demo #rotate-warn { display: flex; } /* dev: ?rotatetest */

/* ---- safe-area (notch/barra de status) no header/rodapé do menu ---- */
/* ⚠ o TOPO é essencial no PWA instalado EM PÉ (viewport-fit=cover desenha edge-to-
   edge): sem ele o header/ENTRAR fica SOB a barra de status (relógio/wifi). Em
   paisagem a barra vai pra lateral → o left/right resolve; em retrato, o top. */
.header-inner {
  padding-top: max(16px, calc(env(safe-area-inset-top) + 6px));
  padding-left: max(28px, env(safe-area-inset-left));
  padding-right: max(28px, env(safe-area-inset-right));
}
.footer-inner {
  padding-left: max(28px, env(safe-area-inset-left));
  padding-right: max(28px, env(safe-area-inset-right));
  padding-bottom: max(8px, env(safe-area-inset-bottom)); /* barra de gestos embaixo */
}

/* ---- modais (arena/login/amigos/config/como jogar): respiro nas bordas ----
   com padding no container, o cartão (width:100%) nunca encosta na borda nem
   estoura a largura — foi o que cortava "COMEÇAR TREINO"/Cruzada no retrato. */
#arena-modal, #login-page, #amigos-modal, #guest-modal, #howto-modal, #settings-page {
  padding: 14px max(14px, env(safe-area-inset-right)) 14px max(14px, env(safe-area-inset-left));
}

/* =====================  HOME — RETRATO (em pé)  ===================== */
@media (orientation: portrait) and (max-width: 640px) {
  /* flui de cima pra baixo e rola se precisar — o hero NUNCA invade o dock
     (flex 1 0 auto = cresce, mas não encolhe abaixo do conteúdo → sem sobrepor) */
  #menu { justify-content: flex-start; }
  .lobby { flex: 1 0 auto; justify-content: center; padding: 14px 18px 6px; }
  .hero { gap: 14px; }
  /* logo travada pela LARGURA (a altura acompanha o aspecto real 1.97:1) */
  .hero-logo-img { width: min(86vw, 340px); height: auto; max-width: 86vw; }
  .hero-tagline { font-size: 13.5px; }
  .char-dock { flex: 0 0 auto; padding: 4px 16px 10px; }
  .char-stage { width: min(56vw, 220px); height: min(28vh, 230px); }
}

/* =====================  HOME — DEITADO (curto)  =====================
   2 colunas: hero à ESQUERDA, vitrine do personagem FIXA à DIREITA.
   Fim do bug "player em cima dos botões" — cada um no seu lado. */
@media (orientation: landscape) and (max-height: 560px) {
  .lobby {
    align-items: flex-start; justify-content: center; text-align: left;
    /* reserva a faixa da direita p/ o dock (fixo) e respeita o notch à esquerda */
    padding: 6px min(320px, 44vw) 6px max(6vw, env(safe-area-inset-left));
    max-width: none;
  }
  .hero { align-items: flex-start; text-align: left; max-width: none; width: 100%; gap: 9px; }
  .hero-logo { align-items: flex-start; }
  .hero-logo-img { height: clamp(56px, 22vh, 116px); width: auto; max-width: 52vw; }
  .hero-tagline { font-size: 12.5px; max-width: 44ch; }
  .cta-row { justify-content: flex-start; margin-top: 2px; }
  .cta { padding: 10px 22px; font-size: 14px; }
  .btn-amigos { margin: 8px 0 0; }
  .online-status { text-align: left; }

  /* vitrine do personagem: FIXA à direita, centrada na vertical.
     ⚠ a stage precisa de LARGURA EXPLÍCITA — com width:100% num flex-column
     centrado a coluna colapsa a 0 e o canvas não renderiza (personagem some).
     ⚠ centramos com top/bottom:0 + margin-block:auto (NÃO com translateY): a
     animação hero-in termina em transform:none e ZERAVA o translate → o dock
     descia e o personagem cortava embaixo ("torto"). */
  .char-dock {
    position: fixed; z-index: 52;
    right: max(14px, env(safe-area-inset-right));
    top: 0; bottom: 0; height: fit-content; margin-block: auto;
    width: auto; align-items: center;
    padding: 0; gap: 4px;
    animation: none; /* sem o slide de entrada aqui (ele zerava o transform) */
  }
  .dock-label { display: none; }
  .char-row { gap: 6px; }
  .char-stage { width: min(32vw, 200px); height: min(64vh, 210px); } /* personagem um pouco maior (pedido do dono) */
  .char-arrow { width: 36px; height: 36px; font-size: 19px; }
  .char-name { font-size: 15px; min-height: 17px; }
  /* rodapé fininho fica no fluxo, sem competir com o dock (que é fixo à direita) */
  .footer-inner { padding-top: 6px; padding-bottom: 6px; }
}

/* =====================  ESCOLHA DE FUNÇÃO — DEITADO  =================
   Mantém 2 colunas (info ↔ personagem) e comprime tudo pra caber em 390px
   de altura: o personagem aparece de verdade, o CONFIRMAR deixa de ser
   "botão gigante", o roster mostra os 5 embaixo. */
@media (orientation: landscape) and (max-height: 560px) {
  /* safe-area (iPhone com notch deitado come as bordas L/R) + respiro no topo */
  .cp-top { padding: 8px max(18px, env(safe-area-inset-right)) 0 max(18px, env(safe-area-inset-left)); min-height: 26px; }
  .cp-title { top: 8px; font-size: 12px; }
  /* LAYOUT pedido pelo dono: ESQUERDA = info (texto + CONFIRMAR); DIREITA =
     personagem em cima + os 5 selecionáveis LOGO ABAIXO dele. Assim o roster sai
     do rodapé (que roubava altura e CORTAVA o título das classes com muito texto,
     tipo o Guarda) → a info ganha a coluna inteira e não corta mais. */
  .cp-main { padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); align-items: center; }
  .cp-info { width: min(340px, 45%); gap: 5px; }
  .cp-stage { left: 47%; right: 0; top: 4px; bottom: 33%; }   /* personagem na parte de cima da direita */
  .cp-stage::after { bottom: 4%; }
  .cpi-nome { font-size: clamp(26px, 5.2vh, 40px); line-height: 0.9; }
  .cpi-skin { font-size: 10px; }
  .cpi-desc { font-size: 11px; line-height: 1.35; max-width: 38ch; }
  .cpi-attrs { gap: 2px; }
  .cpi-attr { font-size: 11px; }
  .cpi-hab { padding: 5px 9px; gap: 1px; }
  .cpi-hab b { font-size: 11px; }
  .cpi-hab span { font-size: 10.5px; line-height: 1.35; }
  #btn-class-go { width: 100%; max-width: 300px; padding: 9px; margin-top: 2px; font-size: 13px; letter-spacing: 1.5px; }
  /* roster ABSOLUTO no canto inferior direito, sob o personagem */
  .cp-roster {
    position: absolute; right: 0; bottom: 0; z-index: 2;
    width: 53%; justify-content: center; gap: 6px;
    padding: 4px max(16px, env(safe-area-inset-right)) 8px 8px;
  }
  .cp-card { padding: 4px 8px 5px; gap: 2px; }
  .cp-card .cp-face { width: 34px; height: 34px; }
  .cp-card b { font-size: 10px; }
  .cp-card i { font-size: 9px; }
}

/* ESCOLHA DE FUNÇÃO — RETRATO: já empilha (bloco max-width:980 portrait acima);
   aqui só garante roster com os 5 (rola no X) e botão em tamanho de gente. */
@media (orientation: portrait) and (max-width: 640px) {
  .cp-top { padding: 12px 16px 0; }
  .cpi-nome { font-size: clamp(38px, 12vw, 58px); }
  .cp-stage { min-height: 30vh; }
  #btn-class-go { padding: 13px; font-size: 14px; }
  .cp-roster { justify-content: flex-start; gap: 8px; padding: 10px 16px 16px; }
  .cp-card { flex: 0 0 auto; padding: 7px 12px 8px; }
  .cp-card .cp-face { width: 46px; height: 46px; }
}

/* =====================  MODAL DE ARENA / LOGIN — CURTO  =============
   O cartão era mais alto que a tela deitada e cortava topo/base. Comprime. */
@media (max-height: 560px) {
  .login-card { padding: 16px 20px; gap: 10px; }
  .login-title { font-size: 22px; }
  .arena-card { max-width: 560px; } /* deitado tem largura de sobra p/ os chips numa linha */
  #arena-list { gap: 6px; }
  .arena-chip { padding: 7px 13px; font-size: 12px; }
  #btn-comecar { padding: 12px; }
  .settings-card { gap: 12px; }
  .set-row { gap: 6px; }
  .howto-card { padding: 18px 22px; gap: 12px; }
  .howto-title { font-size: 26px; }
  .howto-list { gap: 9px; }
  .howto-list li { font-size: 13px; }

  /* PAUSA deitada: o card leva o placar embutido + 3 botões — comprime tudo
     pra não cortar as ações no rodapé (era o bug do "SAIR" fora da tela) */
  #pause-title { font-size: clamp(22px, 4.4vh, 34px); }
  .pause-card { padding: 14px 18px; gap: 10px; margin: auto; }
  .pause-row button { padding: 10px 8px; }
  #pause-sb .sb-placar { padding-bottom: 8px; }
  #pause-sb .sb-placar b { font-size: 38px; }
  #pause-sb .sb-row { padding: 3px 7px; font-size: 10.5px; }

  /* FIM de partida: título menor + gaps apertados pra caber título+lineup+botões */
  #end-title { font-size: clamp(34px, 8vh, 64px); }
  #end-score { font-size: clamp(15px, 2.4vh, 22px); }
  #endscreen .menu-inner { gap: 12px; max-width: 680px; }
  .elu { padding: 9px 10px 8px; min-width: 104px; }
  .elu .rv-face { width: 50px; height: 50px; }
  .elu .elu-live { width: 62px; margin: -4px 0 -8px; }
  .elu-stats { font-size: 11px; gap: 6px; }
  .elu b { font-size: 12px; }
  .elu.mvp { padding-top: 22px; }
  #btn-restart, #btn-resume { padding: 11px 40px; font-size: 13px; }
  #endscreen .menu-inner, #pausescreen .pause-card { padding-top: 12px; padding-bottom: 12px; }

  /* TAB (scoreboard) deitado: comprime pra caber (cortava em alguns celulares) */
  #scoreboard .sb-card { padding: 12px 16px 12px; gap: 8px; }
  #scoreboard .sb-placar { padding-bottom: 8px; }
  #scoreboard .sb-placar b { font-size: 38px; }
  #scoreboard .sb-placar span { font-size: 15px; }
  #scoreboard .sb-col { width: min(40vw, 240px); }
  #scoreboard .sb-row { padding: 3px 7px; font-size: 10.5px; }
  #scoreboard .sb-col h3 { font-size: 12px; }
}

/* =====================  REVEAL "AS EQUIPES" — CABER SEM ROLAR  ======
   O reveal é um overlay TEMPORÁRIO e sem clique (pointer-events:none): TUDO
   precisa caber na tela. Cada time vira uma LINHA de 4 cards pequenos.
   Antes: grid 2×2 → a 2ª fila (2 jogadores) e a contagem ficavam cortadas. */
@media (max-height: 560px), (max-width: 640px) {
  .rv-full { gap: clamp(6px, 1.4vh, 12px); width: min(1180px, calc(100% - 36px)); padding: 6px 0; }
  .reveal-title { font-size: clamp(24px, 5.4vw, 40px); }
  .rv-side { gap: 6px; }
  .rv-team { grid-template-columns: repeat(4, 1fr); gap: 5px; }
  .rv-card { padding: 6px 4px 6px; gap: 3px; }
  .rv-card.me { padding-top: 15px; }
  .rv-live { width: clamp(38px, 9.5vw, 76px); }
  .rv-face { width: clamp(36px, 9vw, 58px); height: clamp(36px, 9vw, 58px); }
  .rv-card b { font-size: clamp(9.5px, 2.4vw, 12px); }
  .rv-card i { font-size: clamp(8.5px, 2vw, 10.5px); }
  .rv-count-n { font-size: clamp(30px, 7vw, 52px); }
}
/* DEITADO curto: times lado a lado (4 + VS + 4); VS enxuto no meio */
@media (orientation: landscape) and (max-height: 560px) {
  .rv-sides { flex-direction: row; align-items: center; gap: clamp(6px, 2.4vw, 20px); }
  .rv-vs { display: block; font-size: clamp(26px, 4.6vw, 46px); }
  .rv-side h3 { font-size: 13px; padding: 2px 12px 3px; }
}
/* RETRATO: times empilhados; a coluna central (número + VS) fica no meio,
   mas o VS gigante some (não há espaço lado a lado) */
@media (orientation: portrait) and (max-width: 640px) {
  .rv-sides { flex-direction: column; gap: 12px; }
  .rv-vs { display: none; }
  .rv-mid { gap: 0; }
}

/* =====================  LOBBY DE ESPERA (online) — CABER + ROLAR  ====
   "PROCURANDO JOGADORES" e "SALA PRIVADA": o código/contagem eram gigantes e
   os botões (SAIR / COMEÇAR AGORA) caíam fora da tela. Agora rola com segurança
   (margin:auto + overflow) e comprime no deitado curto. */
/* align-items:flex-start + margin:auto = centra quando cabe, rola do topo quando
   não cabe (com align-items:center o topo ficava inalcançável ao rolar) */
#lobby-overlay { align-items: flex-start; overflow-y: auto; padding: 12px max(12px, env(safe-area-inset-right)) 12px max(12px, env(safe-area-inset-left)); }
#lobby-overlay .lb-inner { margin: auto; }
@media (max-height: 560px) {
  .lb-titulo { font-size: clamp(20px, 5vh, 34px); }
  .lb-codigo { font-size: clamp(40px, 12vh, 76px); margin-top: 4px; }
  .lb-conta { font-size: clamp(38px, 13vh, 72px); margin-top: 2px; }
  .lb-dica { margin-top: 5px; font-size: 11.5px; }
  #btn-copiar-cod { margin-top: 6px; padding: 7px 16px; }
  .lb-lista { margin-top: 8px; gap: 6px; }
  .lb-jog { padding: 5px 10px; font-size: 11.5px; }
  .lb-cfg { margin-top: 8px; gap: 7px; }
  .lb-fmt button { padding: 6px 13px; }
  .lb-acoes { margin-top: 12px; }
  #btn-lb-comecar { padding: 10px 26px; font-size: 13px; }
  #btn-lb-sair { padding: 10px 18px; }
}

/* =====================  LOGIN — DEITADO MUITO CURTO  ================
   O cartão de login é alto (tabs + 2 campos + entrar + Google). Em telas bem
   baixas comprime forte; se ainda não couber, o #login-page rola (overflow). */
@media (orientation: landscape) and (max-height: 480px) {
  .login-card { gap: 8px; padding: 12px 18px; }
  .login-title { font-size: 20px; }
  #auth-box { gap: 6px; }
  .auth-tabs button { padding: 7px; }
  #auth-box input { padding: 9px 12px; font-size: 13px; }
  #btn-auth-go, #btn-newpass, #btn-setnick { padding: 10px; }
  .auth-ou { margin: 0; }
  .btn-google { padding: 9px; }
  .back-btn { font-size: 11.5px; }
}

/* =====================================================================
   ⚙️ CONFIGURAÇÕES NOVAS (08/jul): renomear conta + HUD do celular
   (tamanho dos controles · canhoto/destro · opacidade do HUD)
   ===================================================================== */

/* ---- renomear conta (campo + botão) ---- */
.set-nick-wrap { display: flex; gap: 8px; }
.set-nick-wrap input {
  flex: 1; min-width: 0; padding: 10px 12px;
  background: rgba(0, 0, 0, 0.32); border: 1px solid var(--line-2); border-radius: 9px;
  color: var(--text); font-size: 14px;
}
.set-nick-wrap input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(56, 182, 255, 0.16); }
#set-nick-save {
  padding: 0 16px; background: var(--blue); color: #071018; border: none; border-radius: 9px;
  font-weight: 800; font-size: 12px; letter-spacing: 0.08em; cursor: pointer;
}
#set-nick-save:hover { background: #55c2ff; }
.set-note-msg { min-height: 14px; font-size: 11.5px; color: var(--muted); }
.set-note-msg.ok { color: #46d68c; }
.set-note-msg.erro { color: #ff8a8a; }

/* ---- HUD: opacidade (var no :root, ligada pelas Configurações) ---- */
/* dima só o "cromo" persistente do HUD; avisos/mira/feed ficam sempre nítidos */
#topbar, #weapon-state, #dash-pips, #hp-pips, #hab-pill, #fps, #touch-ui {
  opacity: var(--hud-opacity, 1);
}

/* ---- HUD: TAMANHO dos controles de toque (escala pelo --touch-scale) ----
   As dimensões-base viram variáveis em #touch-ui; a media query de tela baixa
   troca só o VALOR-BASE; o --touch-scale (Configurações) multiplica os dois. */
#touch-ui { --stk: 118px; --knb: 50px; --btn: 70px; --btnh: 54px; --btnp: 42px; }
.stick { width: calc(var(--stk) * var(--touch-scale, 1)); height: calc(var(--stk) * var(--touch-scale, 1)); }
.knob {
  width: calc(var(--knb) * var(--touch-scale, 1)); height: calc(var(--knb) * var(--touch-scale, 1));
  margin: calc(var(--knb) * var(--touch-scale, 1) / -2) 0 0 calc(var(--knb) * var(--touch-scale, 1) / -2);
}
#btn-dash, #btn-pass { width: calc(var(--btn) * var(--touch-scale, 1)); height: calc(var(--btn) * var(--touch-scale, 1)); }
#btn-hab { width: calc(var(--btnh) * var(--touch-scale, 1)); height: calc(var(--btnh) * var(--touch-scale, 1)); }
#btn-pause { width: calc(var(--btnp) * var(--touch-scale, 1)); height: calc(var(--btnp) * var(--touch-scale, 1)); }
@media (max-height: 540px) {
  #touch-ui { --stk: 88px; --knb: 38px; --btn: 54px; --btnh: 46px; --btnp: 34px; }
}

/* ---- HUD: CANHOTO (inverte os analógicos e botões de lado) ---- */
body.left-handed #stick-move { left: auto; right: 26px; }
body.left-handed #stick-aim { right: auto; left: 26px; }
body.left-handed #btn-dash { right: auto; left: 160px; }
body.left-handed #btn-pass { right: auto; left: 40px; }
body.left-handed #btn-hab { right: auto; left: 250px; }
body.left-handed #btn-pause { right: auto; left: 16px; }
@media (max-height: 540px) {
  body.left-handed #stick-move { left: auto; right: calc(12px + env(safe-area-inset-right, 0px)); }
  body.left-handed #stick-aim { right: auto; left: calc(12px + env(safe-area-inset-left, 0px)); }
  body.left-handed #btn-dash { right: auto; left: calc(116px + env(safe-area-inset-left, 0px)); }
  body.left-handed #btn-pass { right: auto; left: calc(28px + env(safe-area-inset-left, 0px)); }
  body.left-handed #btn-hab { right: auto; left: calc(184px + env(safe-area-inset-left, 0px)); }
  body.left-handed #btn-pause { right: auto; left: calc(8px + env(safe-area-inset-left, 0px)); }
}

/* ---- editor de HUD: reposicionar os controles arrastando ---- */
.set-btn-wide {
  width: 100%; padding: 11px; margin-top: 2px;
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line-2); border-radius: 9px;
  font-weight: 800; font-size: 12px; letter-spacing: 0.08em; cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}
.set-btn-wide:hover { border-color: var(--blue); color: var(--blue); }

/* ÍCONE flutuante do editor (arrastável; abre o popup ao tocar) — sem header
   no topo tampando o placar (pedido do dono) */
#hud-edit-fab {
  position: fixed; top: max(12px, env(safe-area-inset-top, 0px)); left: max(12px, env(safe-area-inset-left)); z-index: 132;
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--blue); color: #071018; border: none; cursor: grab;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); touch-action: none;
}
#hud-edit-fab .ic { width: 24px; height: 24px; }
/* popup central com as ações + slider de tamanho do controle selecionado */
#hud-edit-pop {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 133;
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px 18px; width: min(300px, calc(100% - 32px));
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}
.hep-hint { font-size: 12.5px; color: var(--ink-soft); text-align: center; line-height: 1.4; }
.hep-acoes { display: flex; gap: 10px; }
.hep-acoes button { flex: 1; padding: 11px; border-radius: 9px; cursor: pointer; font-weight: 800; letter-spacing: 0.06em; }
#he-done { background: var(--blue); color: #071018; border: none; font-size: 13px; }
#he-done:hover { background: #55c2ff; }
#he-reset { font-size: 12px; }

/* durante a edição: fundo escurecido, controles destacados e "agarráveis" */
body.hud-editing #touch-ui { background: rgba(7, 9, 14, 0.55); z-index: 125; }
body.hud-editing .stick,
body.hud-editing #touch-ui button {
  outline: 2px dashed var(--blue); outline-offset: 3px;
  opacity: 1 !important; touch-action: none; cursor: grab;
}
body.hud-editing .stick::after {
  position: absolute; left: 50%; bottom: -17px; transform: translateX(-50%);
  font-size: 10px; font-weight: 800; letter-spacing: 0.12em; color: var(--blue); white-space: nowrap;
}
body.hud-editing #stick-move::after { content: 'MOVER'; }
body.hud-editing #stick-aim::after { content: 'MIRAR'; }

/* editor de HUD — slider de TAMANHO do controle selecionado (dentro do popup) */
#he-size-wrap { display: flex; flex-direction: column; gap: 6px; align-items: stretch; padding-top: 2px; border-top: 1px solid var(--line); }
#he-size-lbl { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; color: var(--orange); text-align: center; }
#he-size { width: 100%; accent-color: var(--orange); cursor: pointer; }
/* controle SELECIONADO no editor: contorno sólido laranja (vs tracejado azul) */
body.hud-editing .he-sel { outline-style: solid !important; outline-color: var(--orange) !important; outline-width: 3px !important; }

/* editor de HUD — placar/avisos/estado também arrastáveis (não redimensionáveis) */
body.hud-editing #topbar, body.hud-editing #feed, body.hud-editing #weapon-state {
  pointer-events: auto; cursor: grab;
  outline: 2px dashed var(--blue); outline-offset: 4px;
}
body.hud-editing #feed { opacity: 1 !important; } /* garante visível mesmo com --hud-opacity baixo */
body.hud-editing .feed-line, body.hud-editing .msg { animation: none !important; } /* amostra não some no editor */

/* ====== CONFIGURAÇÕES master-detail (skill ui-ux-pro-max) ======
   Tópicos numa coluna ESTREITA à esquerda; o conteúdo do tópico à DIREITA.
   Clicou em "Som" → só as configs de som aparecem. Não estoura no deitado. */
.settings-card { max-width: min(720px, 100%); gap: 14px; }
.set-head { display: flex; align-items: center; gap: 14px; }
.set-head .back-btn { align-self: auto; }
.set-layout { display: flex; gap: 16px; align-items: flex-start; }
.set-tabs { display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; width: 134px; }
.set-tabs button {
  text-align: left; padding: 10px 12px; border-radius: 8px;
  background: transparent; border: 1px solid transparent; border-left: 3px solid transparent; cursor: pointer;
  color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: 0.02em;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.set-tabs button:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); }
.set-tabs button.on {
  color: var(--text); background: rgba(56, 182, 255, 0.12);
  border-color: rgba(56, 182, 255, 0.35); border-left-color: var(--blue);
}
.set-panels { flex: 1 1 auto; min-width: 0; }
.set-panel { display: flex; flex-direction: column; gap: 14px; }
/* estreito (retrato): tópicos viram uma LINHA horizontal rolável em cima */
@media (max-width: 560px) {
  .set-layout { flex-direction: column; }
  .set-tabs { flex-direction: row; width: 100%; overflow-x: auto; gap: 6px; }
  .set-tabs button { flex: 0 0 auto; border-left-width: 1px; }
  .set-tabs button.on { border-left-color: rgba(56, 182, 255, 0.35); border-bottom: 2px solid var(--blue); }
}

/* no editor, o HUD de amostra (placar/avisos/estado) fica acima da arena e
   agarrável, mas ABAIXO do ícone/popup do editor (fab 132 · pop 133) */
body.hud-editing #hud { z-index: 126; }
/* TODOS os elementos de HUD viram arrastáveis no editor (não só os controles) */
body.hud-editing #topbar, body.hud-editing #feed, body.hud-editing #weapon-state,
body.hud-editing #msgs, body.hud-editing #dash-pips, body.hud-editing #hp-pips,
body.hud-editing #hab-pill, body.hud-editing #fps {
  pointer-events: auto; cursor: grab;
  outline: 2px dashed var(--blue); outline-offset: 4px;
}

/* ---- MIRA (só celular): reticle no PONTO de impacto (parede/inimigo) ou no
   alcance máximo. O JS posiciona o centro via translate(x,y). 6 estilos; a classe
   rs-* (em #aim-reticle) escolhe qual SVG aparece. O #aim-line é só o feixe do LASER. */
#aim-reticle {
  position: fixed; left: 0; top: 0; width: 0; height: 0;
  z-index: 12; pointer-events: none;
  opacity: var(--hud-opacity, 1);
  filter: drop-shadow(0 0 3px rgba(120,200,255,0.6)) drop-shadow(0 0 1px rgba(0,0,0,0.55));
}
#aim-reticle .r { display: none; position: absolute; left: -20px; top: -20px; width: 40px; height: 40px; }
#aim-reticle.rs-laser        .r-laser,
#aim-reticle.rs-laser-ring   .r-laser-ring,
#aim-reticle.rs-laser-target .r-laser-target,
#aim-reticle.rs-laser-double .r-laser-double,
#aim-reticle.rs-dot    .r-dot,
#aim-reticle.rs-cross  .r-cross,
#aim-reticle.rs-circle .r-circle,
#aim-reticle.rs-arrows .r-arrows,
#aim-reticle.rs-brawl  .r-brawl { display: block; }

/* feixe do estilo LASER: do player até o reticle (a largura vem do JS) */
#aim-line {
  position: fixed; left: 0; top: 0; z-index: 11;
  width: 0; height: 4px; margin-top: -2px;
  transform-origin: 0 50%; pointer-events: none;
  opacity: var(--hud-opacity, 1);
  background: linear-gradient(90deg, rgba(150,225,255,0.04), rgba(190,240,255,0.85) 55%, rgba(224,248,255,0.96));
  border-radius: 3px;
  filter: drop-shadow(0 0 5px rgba(120,205,255,0.7));
}
@media (prefers-reduced-motion: reduce) { #aim-line { filter: none; } }

/* seletor de estilo da mira (Configurações → Controles) */
.aim-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.aim-picker button {
  width: 46px; height: 46px; padding: 0; border-radius: 10px;
  background: transparent; border: 1px solid var(--line-2);
  display: grid; place-items: center; cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.aim-picker button svg { width: 30px; height: 30px; }
.aim-picker button:hover { border-color: var(--text); }
.aim-picker button.on { border-color: var(--blue); background: rgba(56, 182, 255, 0.16); }