/* FENDA — tema escuro com acentos de energia (roxo/ciano) */

/* ---------- FONTES (design system dark fantasy premium) ----------
   Display serifada épica pra títulos + sans moderna pra UI.
   Os @font-face abaixo apontam pra assets/fonts/ — se os .woff2 não
   existirem, o navegador cai LIMPO na pilha de sistema (Palatino/Georgia).
   Pra ativar as fontes reais: baixe Cinzel + Inter no Google Fonts e
   salve como assets/fonts/cinzel-700.woff2 / inter-400.woff2 etc. */
/* Fontes VARIÁVEIS (um arquivo = todos os pesos) — baixadas pelo Diego (jul/2026) */
@font-face { font-family: 'Cinzel'; src: url('../assets/fonts/cinzel-var.ttf') format('truetype-variations'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../assets/fonts/inter-var.ttf') format('truetype-variations'); font-weight: 100 900; font-display: swap; }

:root {
  --fundo: #0a0c12;
  --painel: #12141f;
  --painel-2: #191c2b;
  --borda: #2a3050;
  --texto: #d6dbee;
  --texto-fraco: #8a91ad;
  --acento: #7c5cff;      /* energia das Fendas */
  --acento-2: #37d6e8;    /* essência */
  --ouro: #e8c537;
  --perigo: #ff5470;
  --sucesso: #4ade80;
  --brilho-topo: #171c33; /* clarão do topo (muda com o tema da classe) */
  /* Tokens do design system */
  --fonte-display: 'Cinzel', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
  --fonte-ui: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --raio: 10px;
  --sombra-suave: 0 2px 10px rgba(0, 0, 0, .3);
  --sombra-alta: 0 8px 24px rgba(0, 0, 0, .45);
}

/* Seleção de texto e scrollbar com a cor do tema */
::selection { background: color-mix(in srgb, var(--acento) 45%, transparent); color: #fff; }
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--acento) 40%, var(--painel-2)) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--acento) 30%, var(--painel-2));
  border-radius: 6px; border: 2px solid var(--fundo);
}
*::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--acento) 55%, var(--painel-2)); }

/* ============================================================
   VIDA EM MOVIMENTO — animações globais do site (só CSS, leve).
   Partículas de essência, aurora da Fenda, shimmer no logo,
   energia fluindo nas barras e varredura de luz nos botões.
   ============================================================ */

/* Partículas de essência subindo (na cor do tema da classe) */
#particulas { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
#particulas i {
  position: absolute; bottom: -12px; display: block;
  width: 5px; height: 5px; border-radius: 50%;
  background: color-mix(in srgb, var(--acento) 80%, white);
  box-shadow: 0 0 8px 2px color-mix(in srgb, var(--acento) 55%, transparent);
  opacity: 0;
  animation: particulaSobe linear infinite;
}
@keyframes particulaSobe {
  0%   { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
  8%   { opacity: .7; }
  50%  { transform: translateY(-52vh) translateX(18px) scale(.8); opacity: .45; }
  100% { transform: translateY(-104vh) translateX(-14px) scale(.4); opacity: 0; }
}
#particulas i:nth-child(1)  { left: 4%;  animation-duration: 16s; animation-delay: 0s;   width: 4px; height: 4px; }
#particulas i:nth-child(2)  { left: 11%; animation-duration: 22s; animation-delay: 3s; }
#particulas i:nth-child(3)  { left: 19%; animation-duration: 18s; animation-delay: 7s;   width: 3px; height: 3px; }
#particulas i:nth-child(4)  { left: 27%; animation-duration: 25s; animation-delay: 1s; }
#particulas i:nth-child(5)  { left: 34%; animation-duration: 15s; animation-delay: 9s;   width: 6px; height: 6px; }
#particulas i:nth-child(6)  { left: 43%; animation-duration: 21s; animation-delay: 5s;   width: 3px; height: 3px; }
#particulas i:nth-child(7)  { left: 51%; animation-duration: 17s; animation-delay: 11s; }
#particulas i:nth-child(8)  { left: 59%; animation-duration: 24s; animation-delay: 2s;   width: 4px; height: 4px; }
#particulas i:nth-child(9)  { left: 66%; animation-duration: 19s; animation-delay: 8s; }
#particulas i:nth-child(10) { left: 74%; animation-duration: 23s; animation-delay: 4s;   width: 3px; height: 3px; }
#particulas i:nth-child(11) { left: 81%; animation-duration: 16s; animation-delay: 12s;  width: 6px; height: 6px; }
#particulas i:nth-child(12) { left: 88%; animation-duration: 20s; animation-delay: 6s; }
#particulas i:nth-child(13) { left: 94%; animation-duration: 26s; animation-delay: 10s;  width: 4px; height: 4px; }
#particulas i:nth-child(14) { left: 48%; animation-duration: 28s; animation-delay: 14s;  width: 3px; height: 3px; }

/* Aurora da Fenda: clarão do topo respirando devagar */
body::after {
  content: ''; position: fixed; left: 0; right: 0; top: -140px; height: 320px;
  z-index: 0; pointer-events: none;
  background: radial-gradient(58% 100% at 50% 0%,
    color-mix(in srgb, var(--acento) 22%, transparent), transparent 70%);
  animation: auroraRespira 7s ease-in-out infinite alternate;
}
@keyframes auroraRespira {
  from { opacity: .5; transform: scaleX(.96); }
  to   { opacity: 1;  transform: scaleX(1.05); }
}

/* Entrada suave ao trocar de aba (não afeta re-render interno) */
.conteudo-aba:not(.escondido) { animation: abaEntra .32s ease both; }
@keyframes abaEntra {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Desliga os movimentos pra quem prefere menos animação */
@media (prefers-reduced-motion: reduce) {
  #particulas, body::after { display: none; }
  .conteudo-aba:not(.escondido) { animation: none; }
  /* Corta a duração de TUDO... */
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }

  /* ...MENOS os avisos que só existem ENQUANTO a animação roda. Eles começam
     invisíveis (opacity: 0) e aparecem PELA animação — com duração ~0 nascem e
     morrem sem ninguém ver. Foi o caso do LEVEL UP não aparecer no Windows com
     "mostrar animações" desligado (relato do amigo do Diego). Aqui mantemos uma
     duração curta porém visível: o jogador continua sendo avisado. */
  .levelup-flash, .levelup-conteudo,
  .vitoria-raid-flash, .vitoria-raid-conteudo,
  #transform-overlay, .transform-onda, .transform-texto,
  .bau-carta, .fx-num {
    animation-duration: 1.2s !important;
  }
}

/* ============================================================
   TEMAS DE COR POR CLASSE (data-tema no <body>).
   Começa NEUTRO (sem vocação) e, ao escolher a classe, o site
   "se transforma" na cor da guilda. Só troca os acentos —
   o restante do tema escuro continua igual.
   ============================================================ */
body[data-tema="neutro"] {
  --acento: #6b7396;   --acento-2: #99a2c6;   --brilho-topo: #161a28;
}
body[data-tema="espadachim"] {   /* Ordem das Lâminas — carmesim/brasa */
  --acento: #e2463f;   --acento-2: #ff8a5c;   --brilho-topo: #2a1216;   --borda: #4a2a34;
}
body[data-tema="baluarte"] {     /* Legião do Baluarte — azul-aço */
  --acento: #3a8ddb;   --acento-2: #58cbe8;   --brilho-topo: #0e1d2e;   --borda: #23405e;
}
body[data-tema="canalizador"] {  /* Conclave da Essência — violeta→magenta */
  --acento: #a86bff;   --acento-2: #e56bff;   --brilho-topo: #201033;   --borda: #3d2a5e;
}
body[data-tema="atirador"] {     /* Irmandade do Horizonte — verde-caça */
  --acento: #6bbf2f;   --acento-2: #b6f05a;   --brilho-topo: #16240c;   --borda: #2f4a23;
}
body[data-tema="vitalista"] {    /* Santuário da Aurora — dourado-aurora */
  --acento: #f0a92b;   --acento-2: #ffd76b;   --brilho-topo: #2a1e08;   --borda: #4d3d1a;
}
body[data-tema="renegado"] {     /* Mercado Negro — prata da lâmina + verde-veneno */
  --acento: #aab3c0;   --acento-2: #8be93c;   --brilho-topo: #171c19;   --borda: #3a4440;
}

/* Transição suave dos acentos quando o tema muda */
body, #cabecalho, .btn, .aba, .badge-rank, .badge-classe, .hud-guilda,
.barra-xp, .cartao, main, #painel-log, .titulo-jogo {
  transition: background-color .6s ease, border-color .6s ease, color .6s ease, box-shadow .6s ease;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* No celular: desativa o "duplo-toque pra dar zoom" mantendo o pinch de 2 dedos;
   e impede que qualquer elemento largo empurre a página pra fora da tela
   (o que fazia o navegador "diminuir o zoom" pra caber). */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-y: scroll; }
html, body { max-width: 100%; overflow-x: hidden; }
/* touch-action NÃO herda: precisa valer em TODOS os elementos, senão o
   duplo-toque em botões/cartões ainda dá zoom no celular.
   'manipulation' = mantém scroll e pinch de 2 dedos, mata o double-tap-zoom. */
* { touch-action: manipulation; }
/* Nenhum container principal pode ultrapassar a largura da tela */
#jogo, #cabecalho, #painel-ocupado, main, #abas, #sub-abas, #painel-log, #coluna-jogo, .conteudo-aba { min-width: 0; max-width: 100%; }
/* Texto longo (nome de jogador, link no chat, linha do log) QUEBRA em vez de
   empurrar a página pra fora e forçar o navegador a diminuir o zoom no celular */
#log, .log-linha, .chat-caixa, .chat-msg, .chat-linha, .rel-linhas, .rel-linha,
.cartao, .cartao .detalhe, .alvo-cartao, .descricao { overflow-wrap: anywhere; word-break: break-word; }

/* ---------- Cenário de fundo (heróis × monstros + espadas, fosco e temático) ---------- */
#cenario-fundo {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: .42;
  /* ARTE pintada (bg-batalha-fenda): heróis × horda sob a Fenda — substituiu
     as silhuetas SVG. Fade no topo/base pra fundir com o tema escuro. */
  background: url('../assets/bg-batalha-fenda.webp') center / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 80%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 80%, transparent 100%);
  transition: opacity .6s ease;
}
#cenario-fundo svg { display: none; } /* silhuetas antigas aposentadas (arte real no lugar) */
.cf-heroi { fill: var(--acento); }
.cf-arma { fill: none; stroke: var(--acento); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.cf-monstro { fill: var(--perigo); opacity: .9; }
.cf-olho { fill: var(--acento-2); }
.cf-clash { fill: var(--acento-2); }
.cf-clash-linha { fill: none; stroke: var(--acento-2); stroke-width: 5; stroke-linecap: round; }
.cf-glow { fill: var(--acento-2); opacity: .22; }
.cf-chao { fill: var(--borda); }
/* Conteúdo sempre acima do cenário */
#tela-login, #tela-personagem, #jogo { position: relative; z-index: 1; }

body {
  /* Fundo atmosférico "fosco" (só CSS): grão sutil + clarões que puxam a cor do
     tema da classe + fenda no topo + vinheta nas bordas. Camadas de cima p/ baixo. */
  background-color: var(--fundo);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"),
    radial-gradient(150% 130% at 50% 38%, transparent 58%, rgba(0,0,0,.5) 100%),
    radial-gradient(760px 520px at 88% 108%, color-mix(in srgb, var(--acento) 14%, transparent), transparent 66%),
    radial-gradient(680px 520px at 8% -4%, color-mix(in srgb, var(--acento-2) 11%, transparent), transparent 62%),
    radial-gradient(1200px 620px at 50% -120px, var(--brilho-topo) 0%, transparent 62%);
  background-attachment: fixed;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  color: var(--texto);
  font-family: var(--fonte-ui);
  min-height: 100vh;
  margin: 0 auto;
  padding: 16px 22px; /* tela cheia: sem limite de largura */
  transition: background-color .6s ease;
}

/* Layout do jogo: conteúdo à esquerda, Diário fixo à direita */
#jogo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  column-gap: 18px;
  align-items: start;
}
#cabecalho, #painel-ocupado { grid-column: 1 / -1; }
/* A coluna da esquerda é UM item do grid (abas + sub-abas + conteúdo dentro
   dela). Antes os três eram itens soltos e o Diário atravessava as linhas deles
   (`grid-row: 3 / 6`): com o Diário mais alto que o conteúdo, o grid dividia a
   sobra ENTRE essas linhas e abria vãos entre as abas e o painel. Ver o
   comentário no index.html. */
#coluna-jogo { grid-column: 1; min-width: 0; max-width: 100%; }
#painel-log {
  grid-column: 2;
  position: sticky; top: 16px;
  margin-top: 14px;
}
@media (max-width: 1000px) {
  #jogo { grid-template-columns: 1fr; }
  #coluna-jogo, #painel-log { grid-column: 1; }
  #painel-log { position: static; }
}

/* Títulos de seção: PLACA DE METAL entalhada com pontas de estandarte
   (estilo UI de MMO clássico — faixa central, bisel e sombra) */
h2 {
  font-family: var(--fonte-display);
  font-size: 15px; font-weight: 700;
  color: color-mix(in srgb, var(--ouro) 72%, var(--texto));
  margin: 20px 0 12px;
  text-transform: uppercase; letter-spacing: 3px; text-align: center;
  padding: 9px 34px 8px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--painel-2) 82%, white 6%),
    var(--painel) 55%,
    color-mix(in srgb, var(--painel) 78%, black));
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 16px 100%, 0 50%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09),
    inset 0 0 0 1px color-mix(in srgb, var(--borda) 85%, transparent),
    inset 0 -8px 14px rgba(0, 0, 0, .35);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .45));
}
h1, h3, .titulo-jogo { font-family: var(--fonte-display); }
.descricao { color: var(--texto-fraco); font-size: 13px; margin-bottom: 12px; }
.escondido { display: none !important; }

/* ---------- Telas de login / criação de personagem ---------- */
.tela {
  min-height: 90vh;
  display: flex; align-items: center; justify-content: center;
}
/* Cartão do login/criação: MOLDURA DE RELICÁRIO (frame duplo + cantoneiras) */
.tela-cartao {
  position: relative;
  background: linear-gradient(180deg, color-mix(in srgb, var(--painel-2) 75%, var(--painel)), var(--painel));
  border: 1px solid color-mix(in srgb, var(--ouro) 22%, var(--borda));
  border-radius: 6px;
  padding: 38px 32px; width: 100%; max-width: 380px;
  display: flex; flex-direction: column; gap: 12px; text-align: center;
  box-shadow: 0 0 60px color-mix(in srgb, var(--acento) 16%, transparent), var(--sombra-alta);
}
/* Filete interno (moldura dupla) */
.tela-cartao::before {
  content: ''; position: absolute; inset: 6px; pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--ouro) 14%, transparent);
  border-radius: 4px;
}
/* Cantoneiras douradas nos 4 cantos (via gradientes posicionados) */
.tela-cartao::after {
  content: ''; position: absolute; inset: -1px; pointer-events: none;
  --cant: color-mix(in srgb, var(--ouro) 60%, var(--borda));
  background:
    linear-gradient(var(--cant), var(--cant)) 0 0 / 16px 2px,
    linear-gradient(var(--cant), var(--cant)) 0 0 / 2px 16px,
    linear-gradient(var(--cant), var(--cant)) 100% 0 / 16px 2px,
    linear-gradient(var(--cant), var(--cant)) 100% 0 / 2px 16px,
    linear-gradient(var(--cant), var(--cant)) 0 100% / 16px 2px,
    linear-gradient(var(--cant), var(--cant)) 0 100% / 2px 16px,
    linear-gradient(var(--cant), var(--cant)) 100% 100% / 16px 2px,
    linear-gradient(var(--cant), var(--cant)) 100% 100% / 2px 16px;
  background-repeat: no-repeat;
}
.tela-cartao .titulo-jogo { text-align: center; font-size: 30px; }
.tela-cartao input {
  background: var(--painel-2); border: 1px solid var(--borda); border-radius: 8px;
  color: var(--texto); padding: 11px 14px; font-size: 14px; outline: none;
}
.tela-cartao input:focus { border-color: var(--acento); }
.tela-botoes { display: flex; gap: 8px; justify-content: center; }
.tela-botoes .btn { flex: 1; }
.form-erro { color: var(--perigo); font-size: 12px; min-height: 16px; }
.aviso-proto { font-size: 11px; opacity: .7; }
.link-discreto { color: var(--texto-fraco); font-size: 12px; text-decoration: none; }
.link-discreto:hover { color: var(--acento-2); text-decoration: underline; }
.btn-sair { padding: 4px 10px; font-size: 12px; color: var(--texto-fraco); }
#btn-sino { position: relative; }
.sino-badge {
  position: absolute; top: -6px; right: -6px;
  background: var(--perigo); color: #fff; font-size: 10px; font-weight: 800;
  min-width: 16px; height: 16px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
  animation: sinoPulsa 1.2s ease-in-out infinite;
}
@keyframes sinoPulsa { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }

/* ---------- Sub-abas (seções dentro de um grupo de abas) ---------- */
#sub-abas {
  display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap;
  grid-column: 1;
}
.sub-aba {
  background: var(--painel); color: var(--texto-fraco);
  border: 1px solid var(--borda); border-radius: 20px;
  padding: 6px 16px; cursor: pointer; font-size: 12.5px;
  transition: border-color .15s ease, color .15s ease, box-shadow .2s ease, transform .12s ease;
}
.sub-aba:hover { border-color: var(--acento); color: var(--texto); } /* sem translate: evita loop de hover */
.sub-aba.ativa {
  background: linear-gradient(180deg, color-mix(in srgb, var(--acento) 82%, white 12%), color-mix(in srgb, var(--acento) 78%, black));
  border-color: color-mix(in srgb, var(--acento) 55%, white 15%);
  color: #fff; font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
  box-shadow: 0 0 12px color-mix(in srgb, var(--acento) 35%, transparent), inset 0 1px 0 rgba(255, 255, 255, .25);
}

/* ---------- Abas da coluna lateral (Diário / Global / Guilda) ---------- */
#chat-abas { display: flex; gap: 5px; margin-bottom: 8px; }
.chat-aba {
  flex: 1; background: var(--painel); color: var(--texto-fraco);
  border: 1px solid var(--borda); border-radius: 8px;
  padding: 6px 4px; cursor: pointer; font-size: 12px;
}
.chat-aba:hover { border-color: var(--acento); }
.chat-aba.ativa { background: var(--painel-2); color: var(--texto); border-color: var(--acento); font-weight: 700; }
.chat-caixa-alta { max-height: calc(100vh - 280px); min-height: 260px; }

/* ---------- Toast: você foi atacado na Arena ---------- */
#alerta-ataque {
  position: fixed; top: 18px; right: 18px; z-index: 70;
  animation: revelar .3s ease;
}
.alerta-cartao {
  background: linear-gradient(165deg, #2a1216, #1a0e12);
  border: 1px solid var(--perigo); border-radius: 12px;
  padding: 14px 16px; max-width: 320px;
  box-shadow: 0 10px 36px rgba(0, 0, 0, .55), 0 0 30px rgba(255, 84, 112, .25);
  display: flex; flex-direction: column; gap: 8px;
}
.alerta-titulo { font-weight: 800; color: var(--perigo); letter-spacing: .5px; font-size: 14px; }
.alerta-texto { font-size: 13px; line-height: 1.5; }
@media (max-width: 640px) { #alerta-ataque { left: 12px; right: 12px; } .alerta-cartao { max-width: none; } }
.btn-som { padding: 4px 9px; font-size: 15px; line-height: 1; }
.btn-som.mudo { opacity: .5; }
.btn-abandonar { border-color: var(--perigo); color: var(--perigo); font-size: 12px; padding: 5px 10px; }
.btn-abandonar:hover:not(:disabled) { background: rgba(255, 84, 112, .12); border-color: var(--perigo); }

/* ---------- Cabeçalho ---------- */
#cabecalho {
  position: relative;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--painel); /* fallback */
  background: color-mix(in srgb, var(--painel) 88%, transparent);
  border: 1px solid var(--borda);
  border-radius: 6px; padding: 12px 16px;
  /* SEM backdrop-filter: o cabeçalho é grande e SEMPRE visível — o desfoque
     obrigava o navegador a recalcular a área inteira a cada repaint (cada hover
     do mouse!), causando piscada frenética em GPU fraca. Fundo sólido resolve. */
  box-shadow: var(--sombra-suave), inset 0 1px 0 rgba(255, 255, 255, .04);
}
/* Filete interno do cabeçalho (moldura dupla, na cor do tema) */
#cabecalho::before {
  content: ''; position: absolute; inset: 4px; pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--acento) 16%, transparent);
  border-radius: 4px;
}
/* Logotipo: metal gradiente com REFLEXO VARRENDO as letras (vivo) */
.titulo-jogo {
  font-size: 22px; font-weight: 900; letter-spacing: 5px;
  color: var(--acento); /* fallback */
  background: linear-gradient(110deg,
    var(--acento) 0%,
    color-mix(in srgb, var(--acento-2) 60%, white) 42%,
    #fff 50%,
    color-mix(in srgb, var(--acento-2) 60%, white) 58%,
    var(--acento) 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--acento) 35%, transparent));
  animation: logoShimmer 5.5s ease-in-out infinite;
}
@keyframes logoShimmer {
  0%, 100% { background-position: 0% 0; }
  50%      { background-position: 100% 0; }
}
.info-jogador { display: flex; align-items: center; gap: 10px; }
.hud-nome { font-weight: 600; }
.badge-rank {
  background: linear-gradient(180deg, color-mix(in srgb, var(--acento) 80%, white 12%), color-mix(in srgb, var(--acento) 75%, black));
  color: #fff; font-weight: 700; font-size: 12px;
  padding: 2px 10px; border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--acento) 55%, white 15%);
  box-shadow: 0 0 10px color-mix(in srgb, var(--acento) 30%, transparent), inset 0 1px 0 rgba(255, 255, 255, .25);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
.hud-recursos { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.hud-utils { display: contents; }         /* desktop: botões soltos, como antes */
.btn-hud-menu { display: none; }          /* desktop: sem menu ⋯ */
.recurso { color: var(--ouro); font-weight: 600; }
.barra-wrap {
  position: relative; width: 160px; height: 18px; background: var(--painel-2);
  border-radius: 9px; overflow: hidden; border: 1px solid var(--borda);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, .5);
}
/* Reflexo de vidro na metade de cima das barras (premium, só CSS) */
.barra-wrap::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 46%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), transparent);
  border-radius: 9px 9px 0 0; pointer-events: none;
}
/* Barras com ENERGIA FLUINDO (o gradiente corre devagar dentro da barra) */
.barra-xp { height: 100%; width: 0%; background: linear-gradient(90deg, var(--acento), var(--acento-2), var(--acento)); background-size: 200% 100%; animation: barraFlui 3.5s linear infinite; transition: width .3s; }
.barra-hp { height: 100%; width: 100%; background: linear-gradient(90deg, #c0304a, var(--perigo), #c0304a); background-size: 200% 100%; animation: barraFlui 4.5s linear infinite; transition: width .3s; }
.barra-hab { height: 100%; width: 0%; background: linear-gradient(90deg, #b8860b, var(--ouro), #b8860b); background-size: 200% 100%; animation: barraFlui 4s linear infinite; transition: width .3s; }
@keyframes barraFlui { from { background-position: 0% 0; } to { background-position: 200% 0; } }
.barra-texto { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; text-shadow: 0 1px 2px #000; }
/* Coluna: estimativa de regen (texto pequeno ACIMA da barra, sem afetar largura) */
.barra-col { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.barra-estimativa {
  font-size: 10px; line-height: 1; height: 11px; white-space: nowrap;
  color: var(--texto-fraco, #9aa); opacity: .85; pointer-events: none;
  /* NUNCA transborda a coluna: no celular o texto longo (boosts de XP) escapava
     e ficava POR CIMA das barras vizinhas — corta com reticências. */
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.barra-col { min-width: 0; } /* deixa o flex encolher e a elipse funcionar */

/* ---------- Painel de ocupado ---------- */
.painel-ocupado {
  margin-top: 12px; padding: 10px 16px; border-radius: 10px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--acento) 24%, var(--painel)),
    color-mix(in srgb, var(--acento-2) 16%, var(--painel)),
    color-mix(in srgb, var(--acento) 24%, var(--painel)));
  background-size: 220% 100%;
  animation: barraFlui 6s linear infinite; /* energia da atividade em andamento */
  border: 1px solid var(--acento);
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 0 14px color-mix(in srgb, var(--acento) 18%, transparent);
}
.timer { color: var(--acento-2); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Abas ---------- */
#abas { display: flex; gap: 6px; margin-top: 14px; }
/* Abas em formato de ESTANDARTE trapezoidal (UI de jogo, não retângulo) */
.aba {
  flex: 1; padding: 10px 8px; color: var(--texto-fraco);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--painel-2) 80%, white 4%),
    color-mix(in srgb, var(--painel) 90%, black) 80%);
  border: none; border-radius: 0; cursor: pointer; font-size: 14px;
  font-weight: 600; letter-spacing: .2px;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 100%, 0 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07),
    inset 0 0 0 1px color-mix(in srgb, var(--borda) 80%, transparent),
    inset 0 -10px 14px rgba(0, 0, 0, .28);
  transition: color .15s ease, box-shadow .2s ease, background .2s ease;
}
.aba:hover:not(.ativa) {
  color: var(--texto);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1),
    inset 0 0 0 1px color-mix(in srgb, var(--acento) 50%, var(--borda)),
    inset 0 -10px 14px rgba(0, 0, 0, .28);
}
.aba.ativa {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--acento) 26%, var(--painel-2)),
    var(--painel-2) 70%);
  color: var(--texto); font-weight: 700;
  /* filete de energia no topo da aba ativa (na cor da classe) */
  box-shadow: inset 0 2px 0 var(--acento),
    inset 0 0 0 1px color-mix(in srgb, var(--acento) 45%, var(--borda)),
    inset 0 14px 22px -14px color-mix(in srgb, var(--acento) 55%, transparent);
}
.aba .aba-alerta { right: 12px; } /* afasta o "!" do canto chanfrado da aba */
.aba-cadeado { font-size: 11px; margin-left: 4px; opacity: .85; }
.aba-trancada { opacity: .6; }
.aba { position: relative; }
/* Badge de itens novos (contador vermelho no canto da aba Mochila) */
.aba-badge {
  position: absolute; top: 2px; right: 4px;
  min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
  background: var(--perigo); color: #fff; font-size: 10px; font-weight: 800;
  line-height: 16px; text-align: center; border-radius: 9px;
  box-shadow: 0 0 8px rgba(255, 90, 114, .8);
}
/* Alerta "!" nas abas/sub-abas que têm algo pendente (pontos, itens, equipamento) */
.aba-alerta {
  position: absolute; top: 2px; right: 4px;
  min-width: 16px; height: 16px; padding: 0 3px; box-sizing: border-box;
  background: var(--perigo); color: #fff; font-size: 11px; font-weight: 900;
  line-height: 16px; text-align: center; border-radius: 9px;
  box-shadow: 0 0 8px rgba(255, 90, 114, .85);
  animation: pulseAlerta 1.4s ease-in-out infinite; pointer-events: none;
}
@keyframes pulseAlerta { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.18); opacity: .7; } }
.sub-aba { position: relative; }
.sub-aba .aba-alerta { top: -6px; right: -4px; }

main {
  background: var(--painel-2); /* fallback */
  background: color-mix(in srgb, var(--painel-2) 82%, transparent); /* deixa o cenário vazar */
  border: 1px solid var(--borda); border-top: none;
  border-radius: 0 0 10px 10px; padding: 6px 16px 18px; min-height: 260px;
  /* SEM backdrop-filter (ver #cabecalho): elemento grande + sempre visível. */
  box-shadow: var(--sombra-suave);
}

/* Inputs coesos com o design system (foco com anel de energia) */
input, textarea, select { font-family: var(--fonte-ui); }
input:focus, textarea:focus {
  border-color: var(--acento) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 20%, transparent);
  outline: none;
}

/* ---------- Botões (dark fantasy premium: metal + brilho + press físico) ---------- */
.btn {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--painel-2) 88%, white 6%),
    var(--painel) 55%,
    color-mix(in srgb, var(--painel) 85%, black));
  color: var(--texto); border: 1px solid var(--borda);
  padding: 8px 14px; border-radius: var(--raio); cursor: pointer; font-size: 14px;
  font-family: var(--fonte-ui); font-weight: 600; letter-spacing: .2px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 2px 6px rgba(0, 0, 0, .35);
  transition: border-color .15s ease, box-shadow .2s ease, transform .12s ease, filter .15s ease;
}
.btn:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--acento) 75%, var(--borda));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1),
    0 0 14px color-mix(in srgb, var(--acento) 30%, transparent),
    0 3px 8px rgba(0, 0, 0, .4);
  /* SEM translateY no :hover — mover o elemento tira ele de baixo do cursor,
     o hover desliga, ele volta, liga de novo: LOOP de piscada, principalmente
     no Windows com escala de tela 125% (bordas em pixel fracionário).
     O "levantar" continua no :active (clique), onde não há loop possível. */
}
.btn:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .5);
  filter: brightness(.95);
}
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid color-mix(in srgb, var(--acento) 70%, white); outline-offset: 2px; }
/* Botão de destaque: METAL FORJADO com cantos chanfrados (não retângulo)
   + VARREDURA DE LUZ no hover (o brilho atravessa o botão) */
.btn-destaque {
  position: relative;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--acento) 82%, white 14%),
    var(--acento) 48%,
    color-mix(in srgb, var(--acento) 72%, black));
  border: none; border-radius: 0;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
  padding: 9px 18px;
  color: #fff; font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3),
    inset 0 0 0 1px color-mix(in srgb, var(--acento) 45%, white 18%),
    inset 0 -10px 14px rgba(0, 0, 0, .25);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--acento) 32%, transparent))
    drop-shadow(0 2px 4px rgba(0, 0, 0, .4));
}
.btn-destaque:hover:not(:disabled) {
  filter: brightness(1.12)
    drop-shadow(0 0 14px color-mix(in srgb, var(--acento) 50%, transparent))
    drop-shadow(0 3px 5px rgba(0, 0, 0, .45));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34),
    inset 0 0 0 1px color-mix(in srgb, var(--acento) 40%, white 28%),
    inset 0 -10px 14px rgba(0, 0, 0, .22);
}
/* Faixa de luz que atravessa o botão no hover */
.btn-destaque { overflow: hidden; } /* prende a varredura DENTRO do botão (sem clip-path ela vazava pro lado) */
.btn-destaque::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -85%; width: 55%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: skewX(-18deg); pointer-events: none;
  transition: left .5s ease;
}
.btn-destaque:hover:not(:disabled)::after { left: 130%; }

/* ---------- Cartões (atributos, portais, missões) ---------- */
.cartao {
  position: relative;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--painel-2) 70%, var(--painel)),
    var(--painel));
  border: 1px solid var(--borda);
  border-radius: 4px; padding: 10px 14px; margin-bottom: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03), var(--sombra-suave);
  transition: border-color .2s ease, box-shadow .2s ease;
}
/* CANTONEIRAS de relicário (canto sup-esq e inf-dir) — acendem no hover */
.cartao::before, .cartao::after {
  content: ''; position: absolute; width: 11px; height: 11px; pointer-events: none;
  transition: border-color .2s ease;
}
.cartao::before {
  top: -1px; left: -1px;
  border-top: 2px solid color-mix(in srgb, var(--ouro) 38%, var(--borda));
  border-left: 2px solid color-mix(in srgb, var(--ouro) 38%, var(--borda));
}
.cartao::after {
  bottom: -1px; right: -1px;
  border-bottom: 2px solid color-mix(in srgb, var(--ouro) 38%, var(--borda));
  border-right: 2px solid color-mix(in srgb, var(--ouro) 38%, var(--borda));
}
.cartao:hover {
  border-color: color-mix(in srgb, var(--acento) 40%, var(--borda));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04),
    0 0 12px color-mix(in srgb, var(--acento) 12%, transparent), var(--sombra-suave);
}
.cartao:hover::before { border-top-color: var(--acento); border-left-color: var(--acento); }
.cartao:hover::after { border-bottom-color: var(--acento); border-right-color: var(--acento); }
.cartao.dourada::before, .cartao.dourada::after { border-color: var(--ouro); }
.cartao .nome { font-weight: 700; min-width: 110px; }
.cartao .detalhe { color: var(--texto-fraco); font-size: 13px; flex: 1; min-width: 180px; }
.cartao .valor { color: var(--acento-2); font-weight: 700; }
.cartao.vermelha { border-color: var(--perigo); }
.cartao.dourada { border-color: var(--ouro); }

/* ---------- Aba Status em colunas (cabe numa página só) ---------- */
.status-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 0 20px;
  align-items: start;
}
.status-grid h2 { margin-top: 12px; }
/* Cartões mais compactos dentro das colunas */
.status-col .cartao { padding: 7px 10px; gap: 8px; margin-bottom: 6px; }
.status-col .cartao .nome { min-width: 0; font-size: 13px; }
.status-col .cartao .detalhe { min-width: 0; flex-basis: 100%; order: 3; font-size: 12px; line-height: 1.4; }
.status-col .cartao .btn { margin-left: auto; padding: 5px 10px; font-size: 12px; white-space: nowrap; }
/* Em telas estreitas (celular), volta a empilhar */
@media (max-width: 900px) {
  .status-grid { grid-template-columns: 1fr; }
}

/* ---------- Classes (Despertar da Vocação) ---------- */
.badge-classe {
  background: var(--painel-2); border: 1px solid var(--acento);
  color: var(--texto); font-weight: 600; font-size: 12px;
  padding: 2px 10px; border-radius: 20px; white-space: nowrap;
}
/* Nome da guilda no cabeçalho (cor do tema da classe) */
.hud-guilda {
  font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--acento); text-shadow: 0 0 12px var(--brilho-topo);
}
.classe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px; margin-bottom: 14px;
}
.classe-cartao {
  background: var(--painel); border: 1px solid var(--borda); border-radius: 10px;
  padding: 14px 12px; text-align: center;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
}
.classe-cartao:hover { border-color: var(--acento); }
.classe-icone { font-size: 30px; }
.classe-nome { font-weight: 700; color: var(--acento-2); }
.classe-desc { font-size: 12px; color: var(--texto-fraco); line-height: 1.5; flex: 1; }
.classe-papel {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px;
  color: var(--acento-2); background: var(--painel-2);
  border: 1px solid var(--borda); border-radius: 12px; padding: 2px 10px;
}
.classe-lore {
  font-size: 11.5px; font-style: italic; color: var(--texto-fraco);
  line-height: 1.5; opacity: .85;
  border-left: 2px solid var(--acento); padding-left: 8px; text-align: left;
}

/* ---------- Responsivo: celular (layout otimizado pra toque) ---------- */
@media (max-width: 640px) {
  body { padding: 8px; }

  /* Cabeçalho: tudo centralizado e legível */
  #cabecalho { gap: 8px; padding: 10px 12px; justify-content: center; }
  .titulo-jogo { font-size: 18px; letter-spacing: 3px; width: 100%; text-align: center; }
  .hud-guilda { width: 100%; text-align: center; font-size: 12px; letter-spacing: 1px; }
  .info-jogador { flex-wrap: wrap; justify-content: center; gap: 6px 8px; width: 100%; }
  .hud-recursos { margin-left: 0; width: 100%; flex-wrap: wrap; justify-content: center; gap: 8px 10px; }
  .barra-col { flex: 1 1 140px; min-width: 140px; }
  .barra-wrap { width: 100%; height: 20px; }
  .barra-texto { font-size: 12px; }
  .barra-estimativa { font-size: 11px; }

  /* Abas: grade de pílulas em 2 linhas — todas visíveis e fáceis de tocar */
  #abas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-top: 10px; }
  .aba {
    padding: 11px 2px; font-size: 11px; line-height: 1.1; text-align: center;
    border-radius: 8px; border-bottom-color: var(--borda);
  }
  .aba.ativa { border-color: var(--acento); box-shadow: inset 0 0 0 1px var(--acento); }
  main { border-top: 1px solid var(--borda); border-radius: 10px; margin-top: 8px; padding: 10px 12px 16px; }

  h2 { font-size: 14px; }
  h3 { font-size: 13px; }

  /* Cartões e botões com área de toque maior */
  .cartao { padding: 10px 12px; gap: 8px; }
  .cartao .nome { min-width: 0; font-size: 14px; }
  .cartao .detalhe { font-size: 12.5px; flex-basis: 100%; order: 3; line-height: 1.5; }
  .btn { padding: 10px 14px; font-size: 14px; }

  .classe-grid { grid-template-columns: 1fr 1fr; }
  .alvo-grid { grid-template-columns: 1fr; }
  .relatorio { padding: 10px 12px; font-size: 12.5px; max-height: 300px; }
  #log { font-size: 12.5px; max-height: 220px; }
  .painel-ocupado { flex-wrap: wrap; gap: 6px; padding: 8px 12px; }
  .chat-caixa { max-height: 160px; }
}

/* Celulares bem estreitos: aperta as abas e poupa espaço vertical */
@media (max-width: 400px) {
  .titulo-jogo { display: none; }
  #abas { gap: 4px; }
  .aba { padding: 10px 1px; font-size: 10px; }
  .barra-col { min-width: 120px; }
  .info-jogador { gap: 5px 6px; }
}

/* ---------- Seleção de alvos da caçada ---------- */
.cat-bloco { margin-bottom: 18px; }
.cat-bloco h3 { margin: 0 0 2px; font-size: 15px; }
.cat-bloco .descricao { margin: 0 0 8px; }
.alvo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
/* Relatório ancorado no cartão clicado: ocupa a linha inteira da grade */
.alvo-grid #relatorio-batalha { grid-column: 1 / -1; margin: 4px 0 8px; }
/* Relatório do Exame de Rank (ancorado na aba Status) */
#painel-rank + #relatorio-batalha { margin-top: 10px; }
.alvo-cartao {
  background: var(--painel); border: 1px solid var(--borda); border-radius: 10px;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 4px;
}
.cat-miniboss .alvo-cartao { border-left: 3px solid var(--ouro); }
.cat-boss .alvo-cartao { border-left: 3px solid var(--perigo); }
.alvo-icone { font-size: 26px; line-height: 1; }
.alvo-nome { font-weight: 700; color: var(--texto); }
.alvo-nivel { font-size: 11px; font-weight: 700; color: var(--acento-2); }
.alvo-cartao .btn { margin-top: 4px; align-self: flex-start; }

/* ---------- Relatório de batalha (narrativa da caçada) ---------- */
#relatorio-batalha { margin-top: 16px; }
.relatorio {
  background: #0d101c; border: 1px solid var(--borda); border-radius: 10px;
  padding: 14px 18px; font-size: 13px; line-height: 1.8;
  max-height: 320px; overflow-y: auto;
}
.relatorio.vitoria { border-left: 3px solid var(--sucesso); }
.relatorio.derrota { border-left: 3px solid var(--perigo); }
.rel-titulo { font-weight: 700; color: var(--acento-2); margin-bottom: 8px; letter-spacing: .5px; }
.rel-linha { opacity: 0; animation: revelar .45s ease forwards; }
@keyframes revelar { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.rel-lore { color: var(--texto-fraco); font-style: italic; }
.rel-jogador { color: var(--texto); }
.rel-critico { color: var(--ouro); font-weight: 600; }
.rel-criatura { color: #ff8fa3; }
.rel-esquiva { color: var(--acento-2); }
.rel-cura { color: var(--sucesso); }
.rel-fim-vitoria { color: var(--ouro); font-weight: 800; background: color-mix(in srgb, var(--ouro) 12%, transparent); border-left: 3px solid var(--ouro); padding: 2px 8px; border-radius: 4px; }
.rel-fim-derrota { color: var(--perigo); font-weight: 800; }
/* Máquina de escrever: cursor piscante na linha sendo digitada */
.rel-linha.digitando::after {
  content: '▌';
  color: var(--acento-2);
  animation: cursorPisca .7s steps(1) infinite;
  margin-left: 1px;
}
@keyframes cursorPisca { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.tier-badge { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.qtd-badge { font-size: 12px; font-weight: 700; color: var(--acento-2); }
/* Marca de item NOVO na mochila (ponto de exclamação vermelho) */
.item-novo {
  display: inline-block; min-width: 16px; height: 16px; line-height: 16px;
  text-align: center; background: var(--perigo); color: #fff; font-weight: 900;
  font-size: 12px; border-radius: 50%; box-shadow: 0 0 8px rgba(255, 90, 114, .9);
}
.item-novo-borda { outline: 1px solid rgba(255, 90, 114, .55); }
/* Narração de ambiente da espera (no Diário) — sutil e em itálico */
.log-lore { color: var(--texto-fraco); font-style: italic; }
/* Codex (banco de dados) */
.codex-linha { padding: 6px 0; border-bottom: 1px dashed #1e2438; font-size: 13px; line-height: 1.5; }

/* ---------- Codex (design de cards moderno) ---------- */
#codex-abas { display: flex; gap: 6px; margin: 12px 0 4px; flex-wrap: wrap; }
.codex-aba {
  background: var(--painel); color: var(--texto-fraco);
  border: 1px solid var(--borda); border-radius: 20px;
  padding: 7px 16px; cursor: pointer; font-size: 13px;
  transition: border-color .15s, color .15s;
}
.codex-aba:hover { border-color: var(--acento); color: var(--texto); }
.codex-aba.ativa { background: var(--acento); border-color: var(--acento); color: #fff; font-weight: 700; }

/* Cabeçalho de seção: título + contador, com linha divisória */
.codex-secao {
  display: flex; align-items: center; gap: 10px;
  margin: 22px 0 12px; padding-bottom: 8px;
  border-bottom: 1px solid var(--borda);
}
.codex-secao h3 { margin: 0; font-size: 15px; letter-spacing: .3px; }
.codex-badge {
  background: var(--painel-2); border: 1px solid var(--borda);
  color: var(--texto-fraco); font-size: 11px; font-weight: 700;
  padding: 2px 10px; border-radius: 12px;
}

/* Grade e cartões */
.codex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
}
.codex-card {
  background: linear-gradient(165deg, #181c2e 0%, #12151f 100%);
  border: 1px solid var(--borda);
  border-top: 2px solid var(--cor-tier, var(--borda));
  border-radius: 12px;
  padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.codex-card:hover {
  /* sem translateY: mover no hover cria loop de piscada na borda (ver .btn) */
  border-color: var(--acento);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .38), 0 0 14px color-mix(in srgb, var(--acento) 18%, transparent);
}
.codex-topo { display: flex; align-items: center; gap: 10px; }
.codex-icone {
  width: 46px; height: 46px; font-size: 26px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--painel-2); border-radius: 10px;
}
.codex-cab { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.codex-nome { font-weight: 700; font-size: 14px; line-height: 1.3; }
.codex-meta {
  font-size: 11px; color: var(--texto-fraco);
  text-transform: uppercase; letter-spacing: .5px;
}
.codex-rotulo { font-size: 10.5px; color: var(--texto-fraco); text-transform: uppercase; letter-spacing: .8px; }
.codex-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  font-size: 11px; padding: 3px 9px; border-radius: 12px;
  background: var(--painel-2); border: 1px solid var(--borda);
  color: var(--texto-fraco); white-space: nowrap;
}
.codex-card.codex-oculto { opacity: .55; filter: saturate(.4); }
.codex-card.codex-oculto .codex-icone { font-size: 30px; }

.codex-faixa {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--texto-fraco);
  border-top: 1px dashed #1e2438; padding-top: 9px; margin-top: auto;
}
@media (max-width: 640px) {
  .codex-grid { grid-template-columns: 1fr 1fr; }
  .codex-icone { width: 38px; height: 38px; font-size: 20px; }
}
#aba-codex .cat-bloco h4 { margin: 10px 0 4px; font-size: 14px; }

/* ---------- LEVEL UP (explosão de luz branca) ---------- */
#levelup-overlay {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; /* não bloqueia cliques */
}
.levelup-flash {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.55) 30%, rgba(124,92,255,.25) 55%, transparent 75%);
  animation: levelupFlash 2.2s ease-out forwards;
}
@keyframes levelupFlash {
  0%   { opacity: 0; }
  12%  { opacity: 1; }
  45%  { opacity: .8; }
  100% { opacity: 0; }
}
.levelup-conteudo {
  position: relative; text-align: center;
  animation: levelupTexto 2.2s cubic-bezier(.2, .9, .3, 1.2) forwards;
}
@keyframes levelupTexto {
  0%   { opacity: 0; transform: scale(.3); }
  18%  { opacity: 1; transform: scale(1.12); }
  30%  { transform: scale(1); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.05) translateY(-12px); }
}
.levelup-texto {
  font-size: 64px; font-weight: 900; letter-spacing: 6px; color: #fff;
  text-shadow: 0 0 24px rgba(255,255,255,.9), 0 0 60px var(--acento), 0 0 90px var(--acento);
}
.levelup-nivel {
  font-size: 26px; font-weight: 700; color: var(--acento-2); margin-top: 4px;
  text-shadow: 0 0 18px rgba(55,214,232,.8);
}
.levelup-sub { font-size: 14px; color: #fff; opacity: .85; margin-top: 6px; text-shadow: 0 0 10px #fff; }
@media (max-width: 640px) {
  .levelup-texto { font-size: 40px; letter-spacing: 3px; }
  .levelup-nivel { font-size: 20px; }
}

/* ===== VITÓRIA DE RAID — igual ao level-up, porém AZULADO ===== */
#vitoria-raid-overlay {
  position: fixed; inset: 0; z-index: 62;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; /* não bloqueia cliques */
}
.vitoria-raid-flash {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(214,240,255,.95) 0%, rgba(120,200,255,.6) 28%, rgba(46,120,220,.3) 55%, transparent 76%);
  animation: vitoriaRaidFlash 3.4s ease-out forwards;
}
@keyframes vitoriaRaidFlash {
  0%   { opacity: 0; }
  12%  { opacity: 1; }
  55%  { opacity: .82; }
  100% { opacity: 0; }
}
.vitoria-raid-conteudo {
  position: relative; text-align: center;
  animation: vitoriaRaidTexto 3.4s cubic-bezier(.2, .9, .3, 1.2) forwards;
}
@keyframes vitoriaRaidTexto {
  0%   { opacity: 0; transform: scale(.3); }
  14%  { opacity: 1; transform: scale(1.12); }
  26%  { transform: scale(1); }
  82%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.05) translateY(-14px); }
}
.vitoria-raid-texto {
  font-size: 64px; font-weight: 900; letter-spacing: 5px; color: #fff;
  text-shadow: 0 0 24px rgba(190,232,255,.95), 0 0 60px #4db6ff, 0 0 100px #2f7fd6;
}
.vitoria-raid-sub {
  font-size: 18px; font-weight: 600; color: #eaf6ff; margin-top: 12px;
  letter-spacing: 1px; text-shadow: 0 0 12px rgba(120,200,255,.8);
}
.vitoria-raid-chefe {
  font-size: 30px; font-weight: 800; color: #7fdcff; margin-top: 4px;
  text-shadow: 0 0 20px rgba(77,182,255,.9), 0 0 46px rgba(55,214,232,.7);
}
@media (max-width: 640px) {
  .vitoria-raid-texto { font-size: 40px; letter-spacing: 3px; }
  .vitoria-raid-chefe { font-size: 22px; }
  .vitoria-raid-sub { font-size: 15px; }
}

/* ===== BAÚ DE ESPÓLIO DA RAID (abre e revela item por item) ===== */
#bau-raid-overlay {
  position: fixed; inset: 0; z-index: 63;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4, 8, 18, .82); backdrop-filter: blur(4px);
}
#bau-raid-overlay.escondido { display: none; }
.bau-raid-painel {
  position: relative; width: min(92vw, 480px); max-height: 86vh; overflow-y: auto;
  text-align: center; padding: 22px 20px;
  background: linear-gradient(160deg, rgba(20, 32, 58, .96), rgba(10, 16, 30, .98));
  border: 1px solid rgba(77, 182, 255, .35); border-radius: 16px;
  box-shadow: 0 0 60px rgba(46, 120, 220, .35), inset 0 0 40px rgba(46, 120, 220, .08);
}
.bau-raid-titulo {
  font-family: var(--fonte-display, 'Palatino Linotype', serif); font-size: 26px; font-weight: 800;
  color: #7fdcff; letter-spacing: 1px; text-shadow: 0 0 20px rgba(77, 182, 255, .7);
}
.bau-raid-chefe { font-size: 14px; color: #cfe6ff; opacity: .85; margin: 2px 0 14px; }
.bau-raid-fechado { padding: 14px 0 8px; }
.bau-raid-icone {
  font-size: 84px; line-height: 1; margin-bottom: 12px;
  animation: bauPulsa 1.6s ease-in-out infinite;
  filter: drop-shadow(0 0 24px rgba(77, 182, 255, .7));
}
@keyframes bauPulsa { 0%, 100% { transform: scale(1) rotate(-2deg); } 50% { transform: scale(1.08) rotate(2deg); } }
.bau-raid-cartas { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 14px; }
.bau-carta {
  display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 10px 14px; border-radius: 12px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--cor-tier, #8a91ad); border-left-width: 4px;
  opacity: 0; transform: translateY(14px) scale(.96);
  animation: bauCartaEntra .5s cubic-bezier(.2, .9, .3, 1.2) forwards;
}
@keyframes bauCartaEntra { to { opacity: 1; transform: translateY(0) scale(1); } }
.bau-carta.alto { box-shadow: 0 0 22px var(--cor-tier); }
.bau-carta-icone { font-size: 30px; line-height: 1; }
.bau-carta-info { flex: 1; min-width: 0; }
.bau-carta-nome { font-weight: 700; color: #fff; overflow-wrap: anywhere; }
.bau-carta-tier { font-size: 12px; font-weight: 700; color: var(--cor-tier); text-transform: uppercase; letter-spacing: .5px; }
.bau-carta-bonus { font-size: 12px; color: #b9c6e0; overflow-wrap: anywhere; }
.bau-carta-flare {
  font-size: 12px; font-weight: 800; color: var(--cor-tier);
  text-shadow: 0 0 12px var(--cor-tier); white-space: nowrap;
  animation: bauFlare 1s ease-in-out infinite;
}
@keyframes bauFlare { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
.bau-raid-coletar { width: 100%; }
@media (max-width: 640px) {
  .bau-raid-icone { font-size: 66px; }
  .bau-raid-titulo { font-size: 22px; }
}

/* ---------- Transformação de vocação (o site "vira" a cor da classe) ---------- */
#transform-overlay {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center; pointer-events: none;
}
/* Onda de cor que nasce do centro e engole a tela */
.transform-onda {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, var(--flash, #fff) 0%, var(--flash, #fff) 35%, transparent 72%);
  clip-path: circle(0% at 50% 50%);
  animation: transformOnda 2s cubic-bezier(.22,.8,.28,1) forwards;
}
@keyframes transformOnda {
  0%   { clip-path: circle(0% at 50% 50%);   opacity: 1; }
  40%  { clip-path: circle(75% at 50% 50%);  opacity: .98; }
  100% { clip-path: circle(160% at 50% 50%); opacity: 0; }
}
.transform-conteudo {
  position: relative; text-align: center;
  animation: transformTexto 2s cubic-bezier(.2,.9,.3,1.2) forwards;
}
.transform-guilda {
  font-size: 46px; font-weight: 900; letter-spacing: 3px; color: #fff;
  text-shadow: 0 0 26px #fff, 0 0 60px var(--flash, #fff), 0 3px 10px #000;
}
.transform-sub {
  font-size: 18px; font-weight: 600; color: #fff; opacity: .92; margin-top: 8px;
  letter-spacing: 1px; text-shadow: 0 0 14px var(--flash, #fff), 0 2px 6px #000;
}
@keyframes transformTexto {
  0%   { opacity: 0; transform: scale(.6); }
  25%  { opacity: 1; transform: scale(1.1); }
  40%  { transform: scale(1); }
  78%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.04) translateY(-10px); }
}
@media (max-width: 640px) {
  .transform-guilda { font-size: 30px; letter-spacing: 2px; }
  .transform-sub { font-size: 15px; }
}

/* ---------- Abertura cinematográfica (cold open estilo "despertar") ---------- */
#intro-overlay {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  padding: 24px; text-align: center; overflow: hidden;
  background: radial-gradient(1200px 720px at 50% -160px, #241033 0%, #05060c 58%), #05060c;
}
/* Fenda pulsando no alto */
.intro-fenda {
  position: absolute; top: -70px; left: 50%; transform: translateX(-50%);
  width: min(520px, 86vw); height: 240px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(124,92,255,.55), rgba(55,214,232,.15) 55%, transparent 72%);
  filter: blur(8px); opacity: .55; animation: introFenda 4s ease-in-out infinite;
}
@keyframes introFenda { 0%,100% { opacity:.4; transform: translateX(-50%) scaleX(.92); } 50% { opacity:.7; transform: translateX(-50%) scaleX(1.05); } }
#intro-texto {
  position: relative; max-width: 780px; font-weight: 800; line-height: 1.35;
  font-size: clamp(22px, 4.2vw, 40px); color: #e8ecff; white-space: pre-line;
  text-shadow: 0 2px 22px rgba(0,0,0,.85);
  opacity: 0; transform: translateY(12px); transition: opacity .8s ease, transform .8s ease;
}
#intro-texto.mostrar { opacity: 1; transform: translateY(0); }
#intro-texto.perigo { color: #ff9aa8; text-shadow: 0 0 28px rgba(255,60,90,.55), 0 2px 20px #000; }
#intro-texto.despertar {
  color: #fff; font-size: clamp(34px, 8vw, 74px); letter-spacing: 5px;
  text-shadow: 0 0 32px #fff, 0 0 74px var(--acento, #7c5cff), 0 0 120px var(--acento, #7c5cff);
}
.intro-flash {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 50%, #fff 0%, rgba(255,255,255,.6) 24%, transparent 60%);
}
.intro-flash.ativo { animation: introFlash 1.3s ease-out; }
@keyframes introFlash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
.intro-controles { position: absolute; bottom: 22px; left: 0; right: 0; display: flex; justify-content: center; align-items: center; gap: 16px; }
.intro-hint { color: #8a91ad; font-size: 13px; opacity: .8; }
#intro-pular { background: transparent; border: 1px solid #2a3050; color: #8a91ad; padding: 6px 14px; border-radius: 8px; cursor: pointer; font-size: 13px; }
#intro-pular:hover { border-color: var(--acento, #7c5cff); color: #e8ecff; }

/* ---------- Efeitos de combate (pegadas, espadas, crítico) ---------- */
/* Camada em tela cheia que NÃO bloqueia cliques; os efeitos são temporários. */
#combate-fx {
  position: fixed; inset: 0; z-index: 55;
  pointer-events: none; overflow: hidden;
}
#combate-fx > div { position: absolute; will-change: transform, opacity; }

/* Pegadas da caminhada (surgem e somem, subindo levemente) */
.fx-pegada {
  font-size: 22px; opacity: 0;
  filter: drop-shadow(0 0 6px rgba(124, 92, 255, .5));
  animation: fxPegada 1.7s ease-out forwards;
}
@keyframes fxPegada {
  0%   { opacity: 0; transform: translateY(8px) scale(.7); }
  18%  { opacity: .95; transform: translateY(0) scale(1); }
  70%  { opacity: .8; }
  100% { opacity: 0; transform: translateY(-10px) scale(1); }
}

/* Espada de ataque: verde = seu golpe, vermelho = inimigo */
.fx-espada {
  font-size: 44px; opacity: 0;
  animation: fxEspada .7s cubic-bezier(.2, .8, .3, 1.1) forwards;
}
.fx-espada-jogador { filter: drop-shadow(0 0 10px #35e08a) drop-shadow(0 0 22px #35e08a); }
.fx-espada-inimigo { filter: drop-shadow(0 0 10px #ff5a72) drop-shadow(0 0 22px #ff5a72); }
.fx-espada-jogador::after,
.fx-espada-inimigo::after {
  content: ''; position: absolute; inset: -14px; border-radius: 50%;
  border: 2px solid currentColor; opacity: .0;
  animation: fxAnel .7s ease-out forwards;
}
.fx-espada-jogador::after { color: #35e08a; }
.fx-espada-inimigo::after { color: #ff5a72; }
.fx-espada-critica { font-size: 68px; }
@keyframes fxEspada {
  0%   { opacity: 0; transform: rotate(-35deg) scale(.4); }
  30%  { opacity: 1; transform: rotate(8deg) scale(1.15); }
  55%  { transform: rotate(-4deg) scale(1); }
  100% { opacity: 0; transform: rotate(0deg) scale(1.05) translateY(-8px); }
}
@keyframes fxAnel {
  0%   { opacity: .7; transform: scale(.5); }
  100% { opacity: 0; transform: scale(1.6); }
}

/* ---------- MODAL DE BATALHA (caçada/exame em pop-up dedicado) ---------- */
#modal-batalha {
  position: fixed; inset: 0; z-index: 40; /* abaixo do dado (50), fx (55) e level up (60) */
  background: rgba(4, 5, 10, .82);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
}
#modal-batalha.escondido { display: none; }
#modal-batalha-cartao {
  width: min(760px, 96vw); max-height: 88vh;
  overflow-y: auto;
  background: linear-gradient(180deg, color-mix(in srgb, var(--painel, #14151d) 92%, var(--acento, #888) 8%), var(--painel, #14151d));
  border: 1px solid var(--borda, #2a2c38);
  border-radius: var(--raio, 10px);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .65), 0 0 40px color-mix(in srgb, var(--acento, #888) 14%, transparent);
  padding: 16px 18px;
  animation: modalBatalhaEntra .28s ease-out;
}
@keyframes modalBatalhaEntra {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
#modal-batalha-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
#modal-batalha-arte .modal-arte { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; font-size: 46px; line-height: 64px; }
#modal-batalha-arte img.modal-arte { border: 1px solid var(--borda, #2a2c38); box-shadow: 0 0 14px rgba(0, 0, 0, .5); }
#modal-batalha-nome .nome { font-family: var(--fonte-display, serif); font-size: 20px; }
#modal-batalha .rel-linhas { max-height: 46vh; }
#modal-batalha .relatorio { max-height: none; }
@media (max-width: 640px) {
  #modal-batalha { padding: 8px; align-items: flex-start; }
  #modal-batalha-cartao { max-height: 94vh; margin-top: 4vh; }
  #modal-batalha .rel-linhas { max-height: 40vh; }
}
@media (prefers-reduced-motion: reduce) { #modal-batalha-cartao { animation: none; } }

/* Barras de HP do combate ao vivo (você × inimigo) */
.rel-hps {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin: 2px 0 8px;
}
.rel-hp-col { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rel-hp-rotulo { font-size: 11px; color: var(--texto-fraco, #9aa0ac); white-space: nowrap; }
.rel-hpbar.jogador { border-color: color-mix(in srgb, var(--sucesso, #43c46b) 45%, transparent); }
.rel-hpbar.jogador .rel-hpbar-fill { background: linear-gradient(90deg, #1c6b35, #43c46b); }
.rel-hpbar.jogador .rel-hpbar-txt { color: #dcffe6; }
@media (max-width: 640px) { .rel-hps { grid-template-columns: 1fr; gap: 4px; } }
.rel-hpbar {
  position: relative; flex: 1; max-width: 280px; height: 13px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 60, 70, .35);
  border-radius: 7px; overflow: hidden;
}
.rel-hpbar-fill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, #7d0f1c, #e2463f);
  transition: width .45s ease;
}
.rel-hpbar-txt {
  position: absolute; inset: 0;
  font-size: 10px; font-weight: 700; text-align: center; line-height: 13px;
  color: #ffe3e3; text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}

/* Banner do evento de XP na tela de login (dourado pulsante quando ATIVO) */
.banner-evento {
  margin: 10px 0 4px;
  padding: 9px 14px;
  border-radius: var(--raio, 8px);
  border: 1px solid color-mix(in srgb, var(--acento-2, #f0a92b) 45%, transparent);
  background: color-mix(in srgb, var(--acento-2, #f0a92b) 10%, transparent);
  color: var(--texto, #e8e8ec);
  font-size: 13px; text-align: center;
}
.banner-evento.ativo {
  border-color: #f0a92b;
  background: linear-gradient(120deg, rgba(240, 169, 43, .16), rgba(240, 169, 43, .05));
  color: #ffd982; font-weight: 700;
  box-shadow: 0 0 18px rgba(240, 169, 43, .25);
  animation: brilho-evento 2.2s ease-in-out infinite;
}
@keyframes brilho-evento {
  0%, 100% { box-shadow: 0 0 10px rgba(240, 169, 43, .18); }
  50%      { box-shadow: 0 0 26px rgba(240, 169, 43, .4); }
}
@media (prefers-reduced-motion: reduce) { .banner-evento.ativo { animation: none; } }

/* ---------- "Game juice": números de dano, tremor e vinheta ---------- */
.fx-num {
  font-size: 26px; font-weight: 900; letter-spacing: 1px;
  color: #ffd54a; text-shadow: 0 2px 8px rgba(0, 0, 0, .85);
  transform: translate(-50%, -50%);
  animation: fxNum 1.15s ease-out forwards;
  font-family: var(--fonte-display, serif);
}
.fx-num-sofrido { color: #ff5a66; }
.fx-num-cura { color: #58e389; }
.fx-num-crit { font-size: 40px; -webkit-text-stroke: 1px rgba(0, 0, 0, .5); }
@keyframes fxNum {
  0%   { opacity: 0; transform: translate(-50%, -30%) scale(.7); }
  14%  { opacity: 1; transform: translate(-50%, -50%) scale(1.18); }
  30%  { transform: translate(-50%, -60%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -190%) scale(.95); }
}
/* Vinheta de dano sofrido: sangue nas bordas da tela */
.fx-vinheta {
  position: fixed !important; inset: 0; left: 0 !important; top: 0 !important;
  width: 100%; height: 100%;
  background: radial-gradient(ellipse at center, transparent 58%, rgba(190, 15, 32, .38) 100%);
  animation: fxVinheta .55s ease-out forwards;
}
@keyframes fxVinheta {
  0%   { opacity: 0; }
  18%  { opacity: 1; }
  100% { opacity: 0; }
}
/* Tremor de tela no crítico/hit-kill (no modal treme o cartão; fora, o main) */
body.fx-shake #modal-batalha-cartao,
body.fx-shake main { animation: fxShake .38s ease-in-out; }
@keyframes fxShake {
  0%, 100% { transform: none; }
  20% { transform: translate(-5px, 2px); }
  40% { transform: translate(4px, -3px); }
  60% { transform: translate(-3px, -2px); }
  80% { transform: translate(3px, 2px); }
}
@media (prefers-reduced-motion: reduce) {
  .fx-num, .fx-vinheta { animation-duration: .01s; }
  body.fx-shake #modal-batalha-cartao, body.fx-shake main { animation: none; }
}

/* Sombra do monstro: silhueta escura com aura vermelha dando o bote no ataque */
.fx-monstro {
  font-size: 78px; opacity: 0;
  transform: translate(-50%, -50%);
  /* brightness(0) transforma o emoji colorido numa silhueta preta */
  filter: brightness(0) saturate(100%)
          drop-shadow(0 0 10px rgba(255, 60, 80, .9))
          drop-shadow(0 0 26px rgba(255, 40, 60, .7));
  animation: fxMonstro 1.6s cubic-bezier(.3, .7, .2, 1) forwards;
}
@keyframes fxMonstro {
  0%   { opacity: 0; transform: translate(-50%, -50%) translateX(38px) scale(.7) rotate(6deg); }
  22%  { opacity: .96; transform: translate(-50%, -50%) translateX(0) scale(1.18) rotate(-5deg); }
  38%  { transform: translate(-50%, -50%) scale(1.05) rotate(5deg); }
  52%  { transform: translate(-50%, -50%) scale(1.1) rotate(-4deg); }
  66%  { transform: translate(-50%, -50%) scale(1.05) rotate(3deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
}
@media (max-width: 640px) { .fx-monstro { font-size: 58px; } }

/* Aparição do monstro com ARTE REAL: a imagem escurecida/avermelhada numa
   vinheta circular, cercada de aura vermelha + anel de energia pulsando.
   (A arte é opaca — a vinheta via mask faz o quadrado "sumir" nas bordas.) */
.fx-monstro-ap {
  width: 118px; height: 118px; opacity: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  /* aura de sangue em volta (fica FORA da máscara da imagem) */
  box-shadow:
    0 0 18px 4px rgba(255, 50, 70, .55),
    0 0 44px 12px rgba(255, 25, 50, .35),
    0 0 80px 22px rgba(190, 0, 30, .22);
  background: radial-gradient(circle, rgba(140, 0, 15, .55) 30%, rgba(90, 0, 10, .25) 58%, transparent 75%);
  animation: fxMonstro 1.6s cubic-bezier(.3, .7, .2, 1) forwards;
}
.fx-monstro-ap img {
  width: 100%; height: 100%;
  object-fit: cover; border-radius: 50%;
  /* vinheta: a arte quadrada dissolve suave nas bordas do círculo */
  -webkit-mask-image: radial-gradient(circle, #000 50%, transparent 72%);
          mask-image: radial-gradient(circle, #000 50%, transparent 72%);
  /* sombra viva: escurece e tinge de vermelho-sangue */
  filter: brightness(.48) contrast(1.3) saturate(1.15) sepia(.4) hue-rotate(-35deg);
}
/* Anel de energia vermelho expandindo (dispara junto com o bote) */
.fx-monstro-ap::after {
  content: '';
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(255, 60, 75, .85);
  box-shadow: 0 0 14px rgba(255, 40, 60, .8), inset 0 0 10px rgba(255, 40, 60, .5);
  animation: fxAnelMonstro .85s ease-out forwards;
}
@keyframes fxAnelMonstro {
  0%   { opacity: 0; transform: scale(.55); }
  25%  { opacity: .95; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.45); }
}
@media (max-width: 640px) { .fx-monstro-ap { width: 88px; height: 88px; } }

/* Explosão de "CRÍTICO!" no meio da cena */
.fx-critico-texto {
  transform: translate(-50%, -50%);
  font-size: 52px; font-weight: 900; letter-spacing: 3px; color: #ffd54a;
  text-shadow: 0 0 16px #ff9d2e, 0 0 40px #ff5a2e, 0 0 4px #fff;
  animation: fxCritico 1.1s cubic-bezier(.2, .9, .3, 1.2) forwards;
}
@keyframes fxCritico {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(-8deg); }
  22%  { opacity: 1; transform: translate(-50%, -50%) scale(1.25) rotate(3deg); }
  40%  { transform: translate(-50%, -50%) scale(1) rotate(-2deg); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.1) translateY(-14px); }
}
/* HIT-KILL: número 999 gigante + "CRÍTICO MORTAL" vermelho-sangue */
.fx-mortal-num {
  transform: translate(-50%, -50%);
  font-size: 84px; font-weight: 900; letter-spacing: 2px; color: #fff;
  text-shadow: 0 0 18px #ff2e2e, 0 0 46px #ff0033, 0 0 6px #fff;
  animation: fxMortalNum 1.4s cubic-bezier(.2, .9, .3, 1.2) forwards;
}
@keyframes fxMortalNum {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(-10deg); }
  18%  { opacity: 1; transform: translate(-50%, -50%) scale(1.5) rotate(4deg); }
  38%  { transform: translate(-50%, -50%) scale(1.05) rotate(-2deg); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.15) translateY(-18px); }
}
.fx-mortal-texto {
  transform: translate(-50%, -50%);
  font-size: 40px; font-weight: 900; letter-spacing: 4px; color: #ff3b3b;
  text-shadow: 0 0 16px #ff0033, 0 0 40px #b00020, 0 0 4px #fff;
  animation: fxMortalTexto 1.4s cubic-bezier(.2, .9, .3, 1.2) forwards;
}
@keyframes fxMortalTexto {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
  25%  { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  45%  { transform: translate(-50%, -50%) scale(1); }
  82%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.05) translateY(-10px); }
}

/* Símbolo de cura (Vitalista) */
.fx-cura-simbolo {
  transform: translate(-50%, -50%);
  font-size: 40px; font-weight: 900; color: #35e08a;
  text-shadow: 0 0 14px #35e08a, 0 0 4px #fff;
  animation: fxCura 1.1s ease-out forwards;
}
@keyframes fxCura {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.5); }
  25%  { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1) translateY(-26px); }
}
@media (max-width: 640px) {
  .fx-critico-texto { font-size: 34px; }
  .fx-espada { font-size: 34px; }
  .fx-espada-critica { font-size: 50px; }
  .fx-mortal-num { font-size: 56px; }
  .fx-mortal-texto { font-size: 26px; letter-spacing: 2px; }
}

/* ---------- Tutorial (tour guiado das abas) ---------- */
#tutorial-overlay {
  position: fixed; inset: 0; z-index: 55;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0 16px 26px;
  pointer-events: none; /* a página continua visível e "viva" atrás */
}
.tutorial-cartao {
  pointer-events: auto;
  background: linear-gradient(165deg, #1b2036, #131726);
  border: 1px solid var(--acento); border-radius: 14px;
  padding: 18px 20px; max-width: 520px; width: 100%;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .5), 0 0 40px rgba(124, 92, 255, .18);
  display: flex; flex-direction: column; gap: 10px;
  animation: revelar .3s ease;
}
.tutorial-titulo { font-weight: 800; font-size: 16px; color: var(--acento-2); letter-spacing: .5px; }
.tutorial-texto { font-size: 13.5px; line-height: 1.6; color: var(--texto); }
.tutorial-rodape { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tutorial-progresso { font-size: 12px; color: var(--texto-fraco); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  #tutorial-overlay { padding-bottom: 12px; }
  .tutorial-cartao { padding: 14px; }
}

/* ---------- Árvore de habilidades (3 ramos × 3 fileiras) ---------- */
.skill-arvore {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; align-items: start; margin-top: 8px;
}
.skill-ramo { display: flex; flex-direction: column; gap: 2px; }
.skill-ramo-titulo {
  font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px;
  color: var(--acento-2); text-align: center; padding: 6px 4px;
  border-bottom: 1px solid var(--borda); margin-bottom: 6px;
}
.skill-no {
  background: var(--painel); border: 1px solid var(--borda); border-radius: 10px;
  padding: 10px; display: flex; flex-direction: column; gap: 6px; font-size: 12px;
}
.skill-no .nome { font-size: 12.5px; }
.skill-no.aprendida { border-color: var(--acento); box-shadow: 0 0 12px color-mix(in srgb, var(--acento) 25%, transparent); }
.skill-no.travada { opacity: .55; }
.skill-no.skill-final { border-top: 2px solid var(--ouro); }
.skill-no.skill-final .nome { color: var(--ouro); }
.skill-cab { display: flex; justify-content: space-between; align-items: center; }
.skill-seta { text-align: center; color: var(--texto-fraco); font-size: 10px; padding: 1px 0; }
.evolucao-cartao { border-width: 2px; box-shadow: 0 0 30px color-mix(in srgb, var(--ouro) 30%, transparent); }
@media (max-width: 900px) { .skill-arvore { grid-template-columns: 1fr; } }

/* ---------- Controles de batalha + dado de fuga ---------- */
.controles-batalha { display: flex; gap: 8px; margin-top: 8px; }
.rel-linhas { max-height: 240px; overflow-y: auto; }
#dado-overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(5, 6, 12, .75);
  display: flex; align-items: center; justify-content: center;
}
.dado-caixa {
  background: var(--painel); border: 1px solid var(--acento); border-radius: 16px;
  padding: 28px 44px; text-align: center;
  box-shadow: 0 0 80px rgba(124, 92, 255, .35);
}
#dado-face { font-size: 96px; line-height: 1; color: var(--texto); }
#dado-face.girando { animation: girar .12s linear infinite; }
@keyframes girar { from { transform: rotate(-8deg) scale(1); } to { transform: rotate(8deg) scale(1.06); } }
#dado-face.sucesso { color: var(--sucesso); }
#dado-face.falha { color: var(--perigo); }
#dado-texto { margin-top: 10px; color: var(--texto-fraco); font-size: 14px; }
.rel-fim-vitoria { color: var(--sucesso); font-weight: 700; margin-top: 6px; }
.rel-fim-derrota { color: var(--perigo); font-weight: 700; margin-top: 6px; }

/* ---------- Log (Diário do Desperto — coluna lateral) ---------- */
#log {
  background: #0d101c; /* fallback */
  background: color-mix(in srgb, #0d101c 84%, transparent);
  border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 12px 16px; overflow-y: auto; font-size: 13px; line-height: 1.7;
  max-height: calc(100vh - 190px); /* ocupa a altura da tela ao lado do menu */
  min-height: 300px;
  /* SEM backdrop-filter (ver #cabecalho): elemento grande + sempre visível. */
  box-shadow: var(--sombra-suave);
}
@media (max-width: 1000px) {
  #log { max-height: 240px; min-height: 0; }
}
.log-linha { border-bottom: 1px dashed #1e2438; padding: 3px 0; }

/* ---------- Chat (sala de raid + global) ---------- */
.chat-caixa {
  background: #0d101c; border: 1px solid var(--borda); border-radius: 10px;
  padding: 10px 12px; margin-top: 8px; max-height: 200px; overflow-y: auto;
  font-size: 13px; line-height: 1.6;
}
.chat-linha { margin-bottom: 2px; word-break: break-word; }
.chat-linha b { color: var(--acento-2); }
.chat-vazio { color: var(--texto-fraco); }
.chat-input { display: flex; gap: 6px; margin-top: 6px; }
.chat-input input {
  flex: 1; min-width: 0; padding: 7px 10px; border-radius: 8px;
  border: 1px solid var(--borda); background: #0d101c; color: var(--texto); font-size: 13px;
}
#painel-chat-global { margin-top: 16px; }
#painel-chat-global h2 { font-size: 15px; margin-bottom: 6px; }
#chat-global-msgs { max-height: 160px; margin-top: 0; }
.log-linha .hora { color: var(--texto-fraco); font-size: 11px; margin-right: 8px; }
.log-vitoria { color: var(--sucesso); }
.log-derrota { color: var(--perigo); }
.log-sistema { color: var(--acento-2); }
.log-item { color: var(--ouro); }
/* Presente de boas-vindas: log dourado, brilhante e pulsante */
@keyframes brilho-presente {
  0%, 100% { box-shadow: 0 0 8px rgba(255,206,84,.30), inset 0 0 12px rgba(255,206,84,.10); }
  50%      { box-shadow: 0 0 20px rgba(255,206,84,.75), inset 0 0 18px rgba(255,206,84,.28); }
}
.log-presente {
  color: #ffe9a8; font-weight: 700; line-height: 1.55;
  background: linear-gradient(100deg, rgba(255,206,84,.10), rgba(255,150,60,.18), rgba(255,206,84,.10));
  border: 1px solid rgba(255,206,84,.55);
  border-radius: 10px; padding: 10px 12px !important; margin: 6px 0;
  text-shadow: 0 0 6px rgba(255,206,84,.55);
  animation: brilho-presente 2.2s ease-in-out infinite;
}
.log-presente .hora { color: #d9b25a; }

/* ===== Modo História (galeria de origens + leitor) ===== */
.historia-galeria {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px; margin-top: 12px;
}
.historia-card {
  background: color-mix(in srgb, var(--painel) 88%, transparent);
  border: 1px solid var(--borda); border-radius: 12px; padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color .2s, transform .2s;
}
.historia-card:hover { border-color: var(--acento); box-shadow: 0 0 14px color-mix(in srgb, var(--acento) 22%, transparent); }
.historia-card.historia-atual { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento) inset; }
.historia-card-topo { display: flex; align-items: center; gap: 10px; }
.historia-icone {
  font-size: 1.8rem; width: 46px; height: 46px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--acento) 16%, transparent);
  border: 1px solid var(--borda); border-radius: 10px;
}
.historia-card-tit { display: flex; flex-direction: column; flex: 1; }
.historia-titulo { font-weight: 700; color: var(--acento-2); }
.historia-guilda { font-size: .82rem; color: var(--acento); }
.historia-selo {
  margin-left: auto; color: var(--sucesso, #6ddf7a); font-weight: 800; font-size: 1.1rem;
}
.historia-intro { font-size: .9rem; opacity: .85; line-height: 1.45; margin: 0; }
.historia-card-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; align-items: center; }
.historia-badge-atual {
  font-size: .82rem; color: var(--acento); font-weight: 600;
  padding: 6px 10px; border: 1px dashed var(--acento); border-radius: 8px;
}
/* Leitor de história */
.historia-player {
  max-width: 760px; margin: 12px auto 0;
  background: color-mix(in srgb, var(--painel) 90%, transparent);
  border: 1px solid var(--borda); border-radius: 14px; padding: 20px;
}
.historia-player-topo { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.historia-progresso { font-size: .8rem; color: var(--acento); letter-spacing: .05em; text-transform: uppercase; margin-bottom: 8px; }
.historia-res {
  font-style: italic; color: var(--acento-2); line-height: 1.55;
  border-left: 3px solid var(--acento); padding: 6px 0 6px 12px; margin: 0 0 14px;
}
.historia-texto { font-size: 1.05rem; line-height: 1.7; margin: 0 0 18px; }
.historia-fim {
  font-size: 1.05rem; line-height: 1.7; margin: 0 0 18px; color: var(--acento-2);
  border-left: 3px solid var(--acento); padding-left: 12px;
}
.historia-escolhas { display: flex; flex-direction: column; gap: 10px; }
.historia-escolha { text-align: left; padding: 12px 14px; line-height: 1.4; }

/* ===== Alvo TRANCADO na caça (revelação gradual por nível) ===== */
.alvo-cartao.alvo-trancado {
  opacity: .55; filter: grayscale(.6);
  border-style: dashed;
}
.alvo-trancado .alvo-icone { filter: grayscale(1); }

/* ===== Modal genérico (aviso de nível, confirmações) ===== */
.modal-fundo {
  position: fixed; inset: 0; z-index: 95;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.6); backdrop-filter: blur(2px);
  padding: 20px;
}
.modal-caixa {
  background: var(--painel); border: 1px solid var(--borda); border-radius: 14px;
  padding: 22px 22px 18px; width: 100%; max-width: 400px;
  box-shadow: 0 10px 50px rgba(0,0,0,.5);
}
.modal-caixa h3 { color: var(--acento-2); margin-bottom: 10px; font-size: 1.1rem; }
.modal-caixa p { line-height: 1.5; margin-bottom: 14px; }
.modal-check {
  display: flex; align-items: center; gap: 8px; font-size: .9rem;
  color: var(--texto-fraco); margin-bottom: 16px; cursor: pointer;
}
.modal-check input { width: 16px; height: 16px; accent-color: var(--acento); }
.modal-acoes { display: flex; gap: 10px; justify-content: flex-end; }

/* ===== Refinos de celular (evita corte/overflow) ===== */
@media (max-width: 640px) {
  body { padding: 12px 12px; }
  .modal-acoes { flex-direction: column-reverse; }
  .modal-acoes .btn { width: 100%; }
}

/* ============ MESA DE RAID AO VIVO (multiplayer por turnos) ============ */
.mesa-boss { background: color-mix(in srgb, var(--perigo) 14%, var(--painel)); border: 1px solid var(--perigo); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.mesa-boss.boss-final { border-color: var(--ouro); box-shadow: 0 0 18px color-mix(in srgb, var(--ouro) 45%, transparent); }
.mesa-boss .nome { font-weight: 700; display: flex; align-items: center; gap: 8px; }
.mesa-boss .meta { font-size: 12px; color: var(--texto-fraco); margin-left: auto; }
.hpbar { height: 14px; border-radius: 7px; background: color-mix(in srgb, var(--perigo) 25%, transparent); overflow: hidden; margin-top: 8px; }
.hpbar > span { display: block; height: 100%; background: var(--perigo); transition: width .4s ease; }
.hpbar.pequena { height: 8px; }
.hpbar.pequena > span { background: var(--sucesso); }
.hpbar.pequena.ferido > span { background: var(--ouro); }
.hpbar.pequena.critico > span { background: var(--perigo); }
.mesa-hptxt { font-size: 12px; color: var(--texto-fraco); margin-top: 3px; }
.mnv { font-size: 10.5px; color: var(--acento-2); font-weight: 700; }
.mesa-mstats { font-size: 11px; color: var(--texto-fraco); margin-top: 3px; overflow-wrap: anywhere; }
.mesa-habs { font-size: 12px; color: var(--texto-fraco); margin-top: 5px; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.mesa-hab { background: color-mix(in srgb, var(--perigo) 18%, transparent); border: 1px solid color-mix(in srgb, var(--perigo) 45%, transparent); color: var(--texto); border-radius: 999px; padding: 1px 8px; font-size: 11px; }
/* Filtro de ranks na aba Caçar (toggle de ranks anteriores) */
.filtro-ranks { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; flex-wrap: wrap; }
.filtro-ranks .btn { font-size: 12px; padding: 5px 12px; }
.filtro-ranks .detalhe { color: var(--texto-fraco); font-size: 12px; }

/* ---------- ARTE dos monstros (imagens em assets/monstros; fallback = emoji) ---------- */
img.arte-inimigo { object-fit: cover; background: var(--painel-2); border: 1px solid var(--borda); flex-shrink: 0; }
img.alvo-icone { width: 56px; height: 56px; border-radius: 8px; box-shadow: 0 0 12px color-mix(in srgb, var(--acento) 22%, transparent); }
img.codex-icone { border-radius: 10px; }
img.mesa-arte {
  width: 48px; height: 48px; border-radius: 8px; vertical-align: middle; margin-right: 8px;
  border-color: color-mix(in srgb, var(--perigo) 45%, var(--borda));
  box-shadow: 0 0 14px color-mix(in srgb, var(--perigo) 30%, transparent);
}
span.mesa-arte { font-size: 24px; vertical-align: middle; margin-right: 4px; }
img.raid-arte {
  width: 68px; height: 68px; border-radius: 10px;
  border-color: color-mix(in srgb, var(--perigo) 45%, var(--borda));
  box-shadow: 0 0 16px color-mix(in srgb, var(--perigo) 30%, transparent);
}
span.raid-arte { font-size: 36px; }

/* Condições de RPG de mesa (🩸 sangrando / ☠ envenenado / 😵 atordoado / 🎯 provocando) */
.mesa-cond { margin-left: 4px; font-size: 12px; cursor: help; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--perigo) 60%, transparent)); }
/* 📖 Regras do dado (tabela da mesa: d20 → % do dano) */
.mesa-regras { margin: 8px 0; font-size: 12px; border: 1px solid var(--borda); border-radius: 8px; padding: 6px 10px; background: color-mix(in srgb, var(--acento) 6%, transparent); }
.mesa-regras summary { cursor: pointer; color: var(--texto-fraco); user-select: none; }
.mesa-regras[open] summary { color: var(--texto); margin-bottom: 6px; }
.mesa-faixas { display: flex; flex-wrap: wrap; gap: 5px; }
.mesa-faixa { background: color-mix(in srgb, var(--acento) 14%, transparent); border: 1px solid color-mix(in srgb, var(--acento) 40%, transparent); border-radius: 999px; padding: 1px 9px; font-size: 11px; white-space: nowrap; }
.mesa-faixa.forte { border-color: var(--ouro); background: color-mix(in srgb, var(--ouro) 16%, transparent); }
.mesa-faixa.erro { border-color: var(--perigo); background: color-mix(in srgb, var(--perigo) 14%, transparent); }
.mesa-regras-nota { margin-top: 6px; color: var(--texto-fraco); font-size: 11.5px; line-height: 1.45; }
/* Boss enfurecido (fase 2 — fúria a 50% de HP) */
.mesa-furia { color: var(--perigo); font-size: 11px; font-weight: 700; letter-spacing: .5px;
  background: color-mix(in srgb, var(--perigo) 20%, transparent); border: 1px solid var(--perigo);
  border-radius: 999px; padding: 1px 8px; animation: furia-pulso 1s ease-in-out infinite alternate; }
@keyframes furia-pulso { from { box-shadow: 0 0 2px color-mix(in srgb, var(--perigo) 40%, transparent); } to { box-shadow: 0 0 10px var(--perigo); } }

/* ---------- Histórico de batalhas ---------- */
.hist-card { padding: 0 !important; overflow: hidden; }
.hist-cab { width: 100%; background: transparent; border: 0; color: var(--texto); cursor: pointer;
  display: flex; align-items: center; gap: 10px; padding: 11px 14px; text-align: left; font: inherit; flex-wrap: wrap; }
.hist-cab:hover { background: color-mix(in srgb, var(--acento) 10%, transparent); }
.hist-ico { font-size: 18px; }
.hist-tit { font-weight: 700; }
.hist-res { font-size: 12px; letter-spacing: .04em; }
.hist-meta { color: var(--texto-fraco); font-size: 12px; margin-left: auto; }
.hist-toggle { color: var(--texto-fraco); font-size: 11px; }
.hist-log { border-top: 1px solid var(--borda); padding: 10px 14px; max-height: 320px; overflow-y: auto;
  background: color-mix(in srgb, var(--painel) 60%, #000 8%); }
.hist-linha { font-size: 12.5px; color: var(--texto-fraco); padding: 2px 0; border-bottom: 1px dashed color-mix(in srgb, var(--borda) 60%, transparent); overflow-wrap: anywhere; }
.hist-flag { background: color-mix(in srgb, var(--perigo) 25%, transparent); border: 1px solid var(--perigo); color: var(--texto); border-radius: 999px; padding: 0 7px; font-size: 11px; font-weight: 700; }
.hist-avisos { background: color-mix(in srgb, var(--perigo) 14%, transparent); border-left: 3px solid var(--perigo); padding: 8px 12px; font-size: 12.5px; }
.hist-debug { padding: 8px 12px; border-top: 1px solid var(--borda); }
.hist-debug summary { cursor: pointer; font-size: 12.5px; color: var(--acento-2); }
.hist-debug pre { margin: 8px 0 0; max-height: 300px; overflow: auto; font-size: 11.5px; line-height: 1.4; background: color-mix(in srgb, var(--painel) 50%, #000 12%); padding: 10px; border-radius: 8px; white-space: pre-wrap; overflow-wrap: anywhere; }

.mesa-ini { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; align-items: center; }
.mesa-ini-rot { font-size: 11px; color: var(--texto-fraco); text-transform: uppercase; letter-spacing: .05em; margin-right: 2px; }
.mesa-ini-chip { font-size: 12.5px; padding: 4px 10px; border-radius: 20px; background: var(--painel-2); border: 1px solid var(--borda); color: var(--texto-fraco); white-space: nowrap; }
.mesa-ini-chip.ativa { background: var(--acento); border-color: var(--acento); color: #fff; font-weight: 700; box-shadow: 0 0 10px color-mix(in srgb, var(--acento) 70%, transparent); }
.mesa-ini-chip.boss { border-color: var(--perigo); }
.mesa-ini-chip.morto { opacity: .4; text-decoration: line-through; }

.mesa-grupo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.mesa-membro { background: var(--painel); border: 1px solid var(--borda); border-radius: 10px; padding: 8px 10px; }
.mesa-membro.suvez { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento) inset; }
.mesa-membro.caido { opacity: .5; filter: grayscale(.7); }
.mesa-membro .mnome { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 5px; }

.mesa-voce {
  background: color-mix(in srgb, var(--acento) 12%, var(--painel));
  border: 1px solid var(--borda); border-radius: 8px;
  padding: 7px 12px; margin: 8px 0 4px; font-size: 12.5px; color: var(--texto);
}
.mesa-turno { text-align: center; font-weight: 700; margin: 8px 0; color: var(--acento-2); }
/* Zona de ações ESTÁVEL da mesa da raid: altura mínima reservada (as fases trocam
   de conteúdo sem empurrar o layout) + Abandonar sempre ancorado no RODAPÉ da zona
   — os botões de ação nunca "pulam" pro lugar do Abandonar (anti-clique acidental). */
#mesa-zona-acoes {
  min-height: 150px;
  display: flex; flex-direction: column; align-items: stretch;
  justify-content: flex-start; gap: 2px;
}
#mesa-zona-acoes .mesa-abandonar { margin-top: auto; justify-content: center; padding-top: 6px; }
.mesa-turno .timer { color: var(--texto-fraco); font-weight: 400; font-size: 12px; }
.mesa-acoes { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.mesa-acoes .btn { font-size: 13px; }
.btn-dado { font-size: 18px; padding: 8px 14px; }
.mesa-log { max-height: 220px; overflow-y: auto; background: color-mix(in srgb, var(--painel) 90%, transparent); border: 1px solid var(--borda); border-radius: 10px; padding: 8px 12px; margin-top: 8px; }

/* ---- d20 "jogado na mesa" (cai em qualquer ponto) ---- */
/* Contagem regressiva antes da raid (número gigante no centro da tela) */
#contagem-raid {
  position: fixed; inset: 0; z-index: 97; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(90px, 22vw, 200px); font-weight: 900; color: var(--acento-2);
  text-shadow: 0 0 40px var(--acento), 0 6px 20px rgba(0,0,0,.7);
  animation: contagemPulsa 1s ease-in-out infinite;
}
@keyframes contagemPulsa { 0%,100% { transform: scale(1); opacity: .95; } 50% { transform: scale(1.18); opacity: 1; } }

#dado-mesa { position: fixed; inset: 0; pointer-events: none; z-index: 96; overflow: hidden; }
.d20-jogado {
  position: absolute; width: 92px; height: 92px;
  will-change: transform, opacity;
  animation: d20Rola 1.1s cubic-bezier(.18,.7,.3,1) forwards;
}
.d20-jogado svg { width: 100%; height: 100%; display: block; }
.d20-jogado .d20-out  { fill: var(--acento); stroke: var(--acento-2); stroke-width: 3; }
.d20-jogado .d20-line { fill: none; stroke: var(--acento-2); stroke-width: 1.4; opacity: .5; }
.d20-jogado .d20-num  {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 33px; font-weight: 900; color: #fff; text-shadow: 0 2px 5px rgba(0,0,0,.8);
}
.d20-jogado .d20-sombra {
  position: absolute; left: 12%; right: 12%; bottom: -8px; height: 12px;
  background: rgba(0,0,0,.45); border-radius: 50%; filter: blur(4px); z-index: -1;
}
.d20-jogado.crit .d20-out { fill: var(--ouro); stroke: #fff; }
.d20-jogado.fail .d20-out { fill: var(--perigo); stroke: #fff; }
.d20-jogado.some { animation: d20Some .4s ease forwards; }
/* Cai do alto girando no plano (como um dado atirado), quica 1x e assenta reto */
@keyframes d20Rola {
  0%   { transform: translateY(-58vh) rotate(-160deg) scale(.55); opacity: 0; }
  16%  { opacity: 1; }
  52%  { transform: translateY(0)      rotate(360deg) scale(1.12); }
  66%  { transform: translateY(-16px)  rotate(470deg) scale(1.02); }
  80%  { transform: translateY(0)      rotate(560deg) scale(1); }
  90%  { transform: translateY(-5px)   rotate(680deg) scale(1); }
  100% { transform: translateY(0)      rotate(720deg) scale(1); }
}
@keyframes d20Some { to { opacity: 0; transform: scale(.7); } }
@media (max-width: 640px) {
  .mesa-grupo { grid-template-columns: 1fr; }
  .d20-jogado { width: 72px; height: 72px; }
  .d20-jogado .d20-num { font-size: 26px; }
}

/* Seta neutra guiando o novato até o botão de Caçar (após a introdução) */
#seta-caca {
  position: fixed; z-index: 88; pointer-events: none;
  transform: translateY(-50%);
  display: flex; flex-direction: row; align-items: center; gap: 6px;
}
#seta-caca .seta-txt {
  background: #e8ecf5; color: #1b2032; font-size: 12px; font-weight: 800;
  padding: 3px 9px; border-radius: 8px; white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
}
#seta-caca .seta-corpo {
  color: #e8ecf5; font-size: 26px; line-height: 1; text-shadow: 0 3px 8px rgba(0,0,0,.5);
  animation: setaPula 1s ease-in-out infinite;
}
@keyframes setaPula { 0%,100% { transform: translateX(0); } 50% { transform: translateX(-7px); } }


/* ============================================================
   PASSE PREMIUM (jul/2026) — substitui o "desquadrado".
   Direção: superfícies LIMPAS com cantos generosos, bordas
   hairline com toque de ouro, profundidade por luz e blur.
   A arte de fundo carrega o drama; a UI fica elegante e quieta.
   ============================================================ */

/* Cantos generosos e consistentes (nada de retângulo seco) */
.cartao, .codex-card, .skill-no, .banner-evento { border-radius: 12px; }
.alvo-cartao, .relatorio, #log, .chat-caixa, #modal-batalha-cartao { border-radius: 16px; }
main { border-radius: 0 0 16px 16px; }
input, textarea, select { border-radius: 11px; }
.btn:not(.btn-destaque) { border-radius: 11px; }

/* ---------- LOGIN / CRIAÇÃO: cartão premium ---------- */
.tela { padding: 24px 14px; }
.tela-cartao {
  max-width: 404px;
  padding: 46px 38px 36px;
  gap: 14px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(14, 16, 26, .80), rgba(8, 9, 15, .90));
  border: 1px solid color-mix(in srgb, var(--ouro) 26%, transparent);
  backdrop-filter: blur(22px) saturate(1.12);
  -webkit-backdrop-filter: blur(22px) saturate(1.12);
  box-shadow:
    0 30px 90px rgba(0, 0, 0, .8),
    0 0 60px color-mix(in srgb, var(--acento) 10%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .06);
  filter: none;
}
/* Filete interno dourado discreto; cantoneiras antigas saem (visual limpo) */
.tela-cartao::before {
  inset: 9px; border-radius: 13px;
  border-color: color-mix(in srgb, var(--ouro) 12%, transparent);
}
.tela-cartao::after { display: none; }
.tela-cartao .titulo-jogo { font-size: 46px; letter-spacing: 12px; margin-bottom: 2px; }
.tela-cartao .descricao { line-height: 1.65; }

/* Inputs: poços escuros, generosos, foco dourado suave */
.tela-cartao input {
  background: rgba(4, 5, 9, .62);
  border: 1px solid rgba(255, 255, 255, .09);
  padding: 14px 16px; font-size: 15px;
  border-radius: 12px;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, .45);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.tela-cartao input:focus {
  border-color: color-mix(in srgb, var(--ouro) 55%, transparent) !important;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, .45),
              0 0 0 3px color-mix(in srgb, var(--ouro) 14%, transparent) !important;
}

/* Botões do login: hierarquia clara, largura total, sem recortes */
.tela-botoes { flex-direction: column; gap: 10px; }
.tela-botoes .btn { width: 100%; padding: 13px 16px; font-size: 15px; border-radius: 12px; }
.tela-botoes .btn-destaque { clip-path: none; border-radius: 12px; }

.banner-evento { font-size: 12.5px; padding: 9px 12px; border-radius: 11px; }

/* ---------- Chat no CELULAR: botão 💬 flutuante + gaveta ---------- */
#btn-chat-flutuante { display: none; }
@media (max-width: 1000px) {
  /* No celular a coluna de chats some do fluxo — vive na GAVETA do botão 💬 */
  #painel-log { display: none; }
  #btn-chat-flutuante {
    display: flex; align-items: center; justify-content: center;
    position: fixed; right: 14px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); /* acima da barra do navegador do celular */
    z-index: 47;
    width: 54px; height: 54px; border-radius: 50%;
    font-size: 24px; cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--acento) 45%, var(--borda));
    background: linear-gradient(180deg, var(--painel-2), var(--painel));
    color: var(--texto);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .55), 0 0 14px color-mix(in srgb, var(--acento) 22%, transparent);
  }
  body.chat-aberto #painel-log {
    display: block;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 46;
    height: 72vh; margin: 0; overflow-y: auto;
    background: rgba(10, 12, 20, .96);
    border: 1px solid var(--borda); border-bottom: none;
    border-radius: 18px 18px 0 0;
    padding: 12px 14px calc(76px + env(safe-area-inset-bottom, 0px));
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 -14px 50px rgba(0, 0, 0, .65);
    animation: chatSobe .25s ease-out;
  }
  body.chat-aberto #log { max-height: 46vh; }
}
@keyframes chatSobe { from { transform: translateY(28%); opacity: .4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { body.chat-aberto #painel-log { animation: none; } }

/* Abas Entrar | Criar conta do login (pílula dupla, deslizante) */
.login-abas {
  display: flex; gap: 4px;
  background: rgba(4, 5, 9, .55);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 12px; padding: 4px;
}
.login-aba {
  flex: 1; padding: 10px 8px;
  background: transparent; border: none; border-radius: 9px;
  color: var(--texto-fraco); font-family: var(--fonte-ui); font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.login-aba.ativa {
  color: var(--texto);
  background: linear-gradient(180deg, color-mix(in srgb, var(--ouro) 16%, var(--painel-2)), var(--painel));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 2px 8px rgba(0, 0, 0, .4);
  border: 1px solid color-mix(in srgb, var(--ouro) 30%, transparent);
}

/* ---------- Mobile: a tela SE AJUSTA, nada vaza ---------- */
@media (max-width: 640px) {
  .tela { padding: 14px 10px; align-items: flex-start; }
  .tela-cartao {
    margin-top: 7vh; max-width: 100%;
    padding: 34px 22px 26px;
  }
  .tela-cartao .titulo-jogo { font-size: 36px; letter-spacing: 8px; }
  .cartao, .codex-card { border-radius: 10px; }
  .alvo-cartao, .relatorio, #log, .chat-caixa, #modal-batalha-cartao { border-radius: 13px; }
}


/* ---------- IMPACTO do golpe na mesa da raid (força = dano; 3 = crítico) ---------- */
@keyframes mesaImpacto1 {
  0%, 100% { transform: none; }
  30% { transform: translate(2px, -1px); }
  60% { transform: translate(-2px, 1px); }
}
@keyframes mesaImpacto2 {
  0%, 100% { transform: none; }
  20% { transform: translate(-4px, 2px) rotate(-.3deg); }
  45% { transform: translate(4px, -2px) rotate(.3deg); }
  70% { transform: translate(-3px, 1px); }
}
@keyframes mesaImpacto3 {
  0%, 100% { transform: none; filter: none; }
  12% { transform: translate(-8px, 3px) rotate(-.7deg) scale(1.012); filter: brightness(1.7); }
  32% { transform: translate(8px, -4px) rotate(.7deg); filter: brightness(1.25); }
  55% { transform: translate(-5px, 2px); }
  78% { transform: translate(3px, -2px); }
}
.mesa-boss.impacto-1 { animation: mesaImpacto1 .35s ease-out; }
.mesa-boss.impacto-2 { animation: mesaImpacto2 .5s ease-out; }
.mesa-boss.impacto-3 {
  animation: mesaImpacto3 .7s ease-out;
  box-shadow: 0 0 30px rgba(255, 55, 70, .6) !important;
}
@media (prefers-reduced-motion: reduce) {
  .mesa-boss.impacto-1, .mesa-boss.impacto-2, .mesa-boss.impacto-3 { animation: none; }
}


/* "Salvar login" da tela de entrada */
.lembrar-login {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 13px; color: var(--texto-fraco);
  cursor: pointer; user-select: none;
}
.lembrar-login input { width: 16px; height: 16px; accent-color: var(--ouro, #d6b25a); cursor: pointer; }


/* ---------- Modal de comparação de equipamento ---------- */
#modal-comparar {
  position: fixed; inset: 0; z-index: 44;
  background: rgba(4, 5, 10, .8);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
#modal-comparar.escondido { display: none; }
#modal-comparar-cartao {
  width: min(680px, 96vw); max-height: 88vh; overflow-y: auto;
  background: linear-gradient(180deg, rgba(14, 16, 26, .96), rgba(8, 9, 15, .98));
  border: 1px solid color-mix(in srgb, var(--ouro) 26%, transparent);
  border-radius: 16px; padding: 16px 18px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .75);
}
#comparar-colunas {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 10px; align-items: center; margin: 10px 0 14px;
}
.comparar-col { min-width: 0; }
.comparar-col .cartao { margin-bottom: 0; }
.comparar-rotulo {
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
  color: var(--texto-fraco); margin-bottom: 6px; text-align: center;
}
.comparar-seta { font-size: 22px; color: var(--ouro); }
@media (max-width: 640px) {
  #comparar-colunas { grid-template-columns: 1fr; }
  .comparar-seta { text-align: center; transform: rotate(90deg); }
}

/* ============================================================
   POKER — mesa oval estilo cassino (Taverna)
   ============================================================ */
.poker-mesa { position: relative; width: 100%; max-width: 1120px; margin: 0 auto; aspect-ratio: 16 / 9; min-height: 380px; }
.poker-felt { position: absolute; inset: 6% 3%; border-radius: 46% / 50%;
  background: radial-gradient(ellipse at center, #1f6b46 0%, #14523a 62%, #0e3a29 100%);
  border: 7px solid #3a2418; box-shadow: inset 0 0 45px rgba(0,0,0,.55), 0 6px 22px rgba(0,0,0,.55); }
.poker-centro { position: absolute; top: 42%; left: 50%; transform: translate(-50%,-50%); text-align: center; width: 82%; }
.poker-board { min-height: 46px; perspective: 800px; }
.poker-pote { margin-top: 6px; font-size: 13px; color: #f0e4c0; text-shadow: 0 1px 2px #000; }
.poker-pote b { color: #ffd76a; font-size: 17px; }
.poker-assento { position: absolute; transform: translate(-50%,-50%); width: 120px; text-align: center; z-index: 2; }
.poker-jog { background: rgba(12,14,20,.9); border: 1px solid #2b2f42; border-radius: 10px; padding: 5px 6px; }
.poker-jog.voce { border-color: var(--acento, #e2b24a); }
.poker-assento.ativo .poker-jog { border-color: #ffd76a; box-shadow: 0 0 12px rgba(255,215,106,.6); }
.poker-assento.foldou { opacity: .42; }
.poker-assento.venceu .poker-jog { border-color: #6bbf2f; box-shadow: 0 0 16px rgba(107,191,47,.7); }
.poker-nome { font-weight: 700; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.poker-fichas { font-size: 11px; color: #b9c0d4; }
.poker-dealer { display: inline-block; background: #fff; color: #111; border-radius: 50%; width: 15px; height: 15px; line-height: 15px; font-size: 10px; font-weight: 800; vertical-align: middle; }
.poker-cartas { min-height: 30px; margin-bottom: 3px; }
.poker-aposta { margin-top: 4px; font-size: 11px; color: #ffd76a; font-weight: 700; }
/* Carta desenhada em CSS/vetor — NÍTIDA em qualquer tamanho (estilo PokerStars) */
.pcarta { position: relative; display: inline-block; width: 58px; height: 81px; margin: 2px; vertical-align: middle;
  background: linear-gradient(#fdfdf8, #f1eee2); border-radius: 7px; border: 1px solid #b9b39c;
  box-shadow: 0 2px 5px rgba(0,0,0,.55); color: #16181d; font-family: 'Arial Black', Arial, sans-serif; overflow: hidden; }
.pcarta.vermelha { color: #c0272d; }
.pcarta .pc-r { position: absolute; top: 3px; left: 6px; font-size: 20px; font-weight: 900; line-height: .85; }
.pcarta .pc-s { position: absolute; top: 25px; left: 7px; font-size: 14px; line-height: 1; }
.pcarta .pc-c { position: absolute; top: 53%; left: 50%; transform: translate(-50%, -50%); font-size: 37px; }
.pcarta.verso { background: repeating-linear-gradient(45deg, #7a1f22 0 5px, #5c1517 5px 10px); border: 2px solid #c9a24a; }
.pcarta.verso .pc-r, .pcarta.verso .pc-s, .pcarta.verso .pc-c { display: none; }
.pcarta.mini { width: 48px; height: 67px; margin: 1px; }
.pcarta.mini .pc-r { font-size: 16px; top: 2px; left: 5px; }
.pcarta.mini .pc-s { font-size: 11px; top: 20px; left: 6px; }
.pcarta.mini .pc-c { font-size: 30px; }
/* Entrega da carta: desliza/gira do alto (só a recém-entregue tem a classe 'nova') */
/* ENTREGA da carta na mão: voa de cima girando e assenta */
@keyframes pokerDeal { from { transform: translate(-90px, -120px) scale(.4) rotate(-22deg); opacity: 0; } 55% { opacity: 1; } to { transform: none; opacity: 1; } }
.pcarta.nova-deal { animation: pokerDeal .44s cubic-bezier(.2,.7,.3,1.25) both; }
/* VIRA na mesa: a carta comunitária gira de perfil pra face (flip) */
@keyframes pokerFlip { 0% { transform: rotateY(88deg) scale(.94); opacity: 0; } 50% { opacity: 1; } 100% { transform: rotateY(0) scale(1); opacity: 1; } }
.pcarta.nova-flip { animation: pokerFlip .5s ease-out both; transform-origin: center; }
/* Flop: as 3 cartas viram uma após a outra (escalonado) */
.poker-board .pcarta.nova-flip:nth-child(2) { animation-delay: .14s; }
.poker-board .pcarta.nova-flip:nth-child(3) { animation-delay: .28s; }
/* Fichas (pote e apostas) */
.poker-ficha { width: 13px; height: auto; vertical-align: middle; image-rendering: pixelated; margin-right: 2px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.poker-ficha-mini { width: 10px; height: auto; vertical-align: middle; image-rendering: pixelated; }
/* Pilhas de fichas na mesa (pote no centro + aposta na frente de cada jogador) */
.poker-potechips { min-height: 22px; margin-top: 6px; }
.poker-bet { min-height: 18px; margin-top: 4px; }
.chipstack { display: inline-flex; align-items: center; }
.chipstack img.pchip { width: 18px; height: auto; margin-left: -10px; image-rendering: pixelated; filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
.chipstack img.pchip:first-child { margin-left: 0; }
.chipstack img.pchip.sm { width: 14px; margin-left: -8px; }
.chipstack b { margin-left: 5px; font-size: 12px; color: #f4ecd0; text-shadow: 0 1px 2px #000; }
/* Aviso do poker (erros/mensagens) — NA tela do poker, não no Diário lateral */
.poker-msg { display: none; margin: 0 0 8px; padding: 6px 12px; text-align: center; font-size: 13px;
  background: rgba(226,70,63,.12); border: 1px solid var(--perigo, #e2463f); border-radius: 8px; color: #ff9b95; }
/* Layout do poker: painel em BLOCO (o .cartao é flex e jogaria os filhos pro lado) */
.poker-painel { display: block !important; max-width: 1160px; margin: 0 auto; }
.poker-lateral-tit { font-size: 12px; color: var(--sub, #9aa0b4); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 5px; }
/* HISTÓRICO: parte separada ABAIXO da mesa */
.poker-hist { margin-top: 12px; }
.poker-log { height: 96px; overflow-y: auto; padding: 8px 12px;
  background: rgba(0,0,0,.28); border: 1px solid var(--borda, #2b2f42); border-radius: 10px; font-size: 12px; line-height: 1.55; }
/* Aposta SOBRE o feltro, na frente do jogador */
.poker-bet { position: absolute; transform: translate(-50%, -50%); z-index: 3; white-space: nowrap; }
.poker-bet .chipstack { background: rgba(0,0,0,.4); border-radius: 12px; padding: 1px 6px 1px 3px; }
/* Banner de vitória (showdown) — mostra a combinação e as cartas que venceram */
.poker-showdown { margin-top: 8px; padding: 10px 12px; text-align: center; background: rgba(226,178,74,.09);
  border: 1px solid var(--acento, #e2b24a); border-radius: 10px; }
.poker-venc { margin: 5px 0; font-size: 15px; }
.poker-venc > b { color: var(--acento, #e2b24a); }
.poker-venc-mao { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 5px; }
/* SÓ o rótulo da combinação ("Sequência") — o seletor antigo (`.poker-venc-mao b`)
   pintava TAMBÉM os glifos <b> DENTRO das cartas de creme → carta "apagada". */
.poker-venc-mao > b { color: #f4ecd0; font-size: 13px; margin-right: 4px; }
.poker-venc-mao .pcarta b { color: inherit; margin: 0; }
/* Cartas da revelação: SEMPRE sólidas e estáticas (sem herdar animação/opacidade) */
.poker-venc-mao .pcarta { animation: none !important; opacity: 1 !important; transform: none !important; width: 46px; height: 65px; }
.poker-venc-mao .pcarta .pc-r { font-size: 16px; } .poker-venc-mao .pcarta .pc-c { font-size: 27px; }
/* Emotes + chat da mesa */
.poker-emotes { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: 10px; }

/* ---- Melhorias estilo PokerStars (jul/2026) ---- */
/* Timer da vez: barrinha esvaziando no assento ativo */
.pk-timer { height: 4px; background: #1b2030; border-radius: 3px; margin-top: 3px; overflow: hidden; display: none; }
.pk-timer i { display: block; height: 100%; width: 100%; border-radius: 3px;
  background: linear-gradient(90deg, #6bbf2f, #ffd76a); transition: width 1.4s linear; }
/* Nome da sua mão atual ("Par de Damas") */
.poker-minhamao { text-align: center; margin-top: 6px; min-height: 20px; color: var(--ouro, #e2b24a); }
.poker-minhamao b { letter-spacing: .3px; }
/* Pré-ação (marcar Passar/Desistir antes da vez) */
.poker-preacao { display: flex; gap: 6px; justify-content: center; margin-top: 8px; flex-wrap: wrap; }

/* (mesa mobile: bloco @media no FIM do arquivo — precisa vir DEPOIS das regras base) */
.poker-emote-btn { padding: 3px 8px; font-size: 17px; line-height: 1; }
.poker-chat { margin-top: 8px; }
.poker-chatbox { height: 92px; overflow-y: auto; padding: 6px 10px; margin-bottom: 6px;
  background: rgba(0,0,0,.22); border: 1px solid var(--borda, #2b2f42); border-radius: 10px; font-size: 12px; line-height: 1.5; }
.poker-chatbox b { color: var(--acento, #e2b24a); }
.poker-emote { position: absolute; top: -28px; left: 50%; transform: translateX(-50%); z-index: 5; pointer-events: none; }
.emote-bolha { display: inline-block; font-size: 27px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6));
  animation: emotePop .35s ease-out both; }
@keyframes emotePop { 0% { transform: scale(0) translateY(6px); } 70% { transform: scale(1.2) translateY(-2px); } 100% { transform: scale(1) translateY(0); } }
.poker-rodape { text-align: center; margin-top: 10px; opacity: .5; }
.poker-rodape .titulo-jogo { font-size: 26px; }
.poker-acoes { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; margin-top: 10px; padding: 10px;
  background: rgba(226,178,74,.06); border: 1px solid var(--acento, #e2b24a); border-radius: 10px; }
/* Controle de aumento (barra + botões rápidos) — estilo PokerStars */
.poker-raise { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center;
  padding: 4px 8px; background: rgba(0,0,0,.25); border-radius: 8px; }
.poker-raise-quick { display: flex; gap: 4px; }
.poker-raise input[type=range] { width: 160px; max-width: 42vw; accent-color: var(--acento, #e2b24a); vertical-align: middle; }
.btn.mini { padding: 3px 9px; font-size: 12px; }
@media (max-width: 640px) {
  .poker-assento { width: 82px; }
  .pcarta { width: 40px; height: 56px; }
  .pcarta .pc-r { font-size: 13px; } .pcarta .pc-s { font-size: 9px; top: 17px; } .pcarta .pc-c { font-size: 24px; }
  .pcarta.mini { width: 34px; height: 48px; }
  .pcarta.mini .pc-c { font-size: 20px; }
}

/* ============================================================
   POKER NO CELULAR (jul/2026) — mesa oval, cartas e ações
   redimensionadas pra caber em ~390px. Fica no FIM do arquivo
   de propósito: as regras base do poker vêm antes.
   ============================================================ */
@media (max-width: 640px) {
  .poker-mesa { aspect-ratio: 4 / 5; min-height: 340px; }
  .poker-felt { inset: 4% 1%; }
  .poker-assento { width: 92px; }
  .poker-jog { padding: 3px 4px; border-radius: 8px; }
  .poker-nome { font-size: 10px; }
  .poker-fichas { font-size: 10px; }
  .pcarta { width: 38px; height: 53px; margin: 1px; }
  .pcarta .pc-r { font-size: 13px; top: 2px; left: 4px; }
  .pcarta .pc-s { font-size: 9px; top: 16px; left: 5px; }
  .pcarta .pc-c { font-size: 22px; }
  .pcarta.mini { width: 28px; height: 39px; }
  .pcarta.mini .pc-r { font-size: 10px; top: 1px; left: 3px; }
  .pcarta.mini .pc-s { font-size: 7px; top: 12px; left: 4px; }
  .pcarta.mini .pc-c { font-size: 16px; }
  .chipstack img.pchip { width: 13px; margin-left: -7px; }
  .chipstack b { font-size: 10px; }
  .poker-pote { font-size: 12px; }
  .poker-acoes { flex-wrap: wrap; gap: 6px; padding: 8px 4px; }
  .poker-acoes .btn { padding: 9px 10px; font-size: 13px; }
  .poker-raise { width: 100%; }
  .poker-raise-quick { flex-wrap: wrap; justify-content: center; }
  .poker-emote-btn { padding: 5px 7px; }
  .poker-venc-mao .pcarta { width: 34px; height: 48px; }
}

/* ============================================================
   INPUTS DO POKER (jul/2026) — os campos de depósito/saque/buy-in
   caíam no BRANCO padrão do navegador (viravam "pílulas brancas").
   Poço escuro no estilo do site + responsivos no celular.
   ============================================================ */
#aba-poker input[type="number"],
#aba-poker input[type="text"],
#aba-poker input:not([type]) {
  background: rgba(10, 12, 20, .85);
  border: 1px solid color-mix(in srgb, var(--ouro, #c9a24a) 28%, #2b2f42);
  border-radius: 10px;
  color: var(--texto, #e8ecf5);
  padding: 9px 10px;
  font: inherit;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
#aba-poker input[type="number"]:focus,
#aba-poker input[type="text"]:focus,
#aba-poker input:not([type]):focus {
  border-color: var(--ouro, #c9a24a);
  box-shadow: 0 0 0 2px rgba(201, 162, 74, .18);
}
#aba-poker input::placeholder { color: #6a7188; }
/* Sem as setinhas brancas do input numérico */
#aba-poker input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
#aba-poker input[type="number"]::-webkit-inner-spin-button,
#aba-poker input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* No celular: campos fluem com a linha (sem estourar os 390px) */
@media (max-width: 640px) {
  #aba-poker .linha { flex-wrap: wrap; }
  #aba-poker input[type="number"] { flex: 1 1 110px; min-width: 0; max-width: 160px; }
}

/* Fichas "correndo" pro pote no fim da rodada de apostas (poker) */
.chip-voa {
  position: absolute; z-index: 5; width: 18px; height: auto; pointer-events: none;
  image-rendering: pixelated; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6));
  animation: chipVoa .62s cubic-bezier(.3,.6,.35,1) forwards;
}
@keyframes chipVoa {
  70% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(.75); opacity: 0; }
}

/* Botão do DEALER (disco "D" que gira pela mesa) + blinds + rodinha da vez */
.pk-disco {
  position: absolute; width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(#fdfdf6, #d8d4c4); color: #14161c;
  font-weight: 900; font-size: 12px; font-family: Arial, sans-serif;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #14161c; box-shadow: 0 2px 5px rgba(0,0,0,.55);
  transform: translate(-50%, -50%); z-index: 4;
  transition: top .6s ease, left .6s ease; pointer-events: none;
}
.pk-blind {
  font-size: 9px; font-weight: 800; letter-spacing: .3px;
  background: #232839; color: #cfd6ea; border: 1px solid #3a4058;
  border-radius: 6px; padding: 1px 4px; vertical-align: middle;
}
.pk-relogio {
  display: none; width: 15px; height: 15px; border-radius: 50%;
  margin-left: 5px; vertical-align: -2px;
  border: 1px solid rgba(0,0,0,.7); box-shadow: 0 0 5px rgba(255,215,106,.45);
}


/* ---------- Players online + Feedback (beta público, jul/2026) ---------- */
.hud-online {
  font-size: .78rem; color: #5fd97a; opacity: .9;
  padding: 2px 10px; border: 1px solid color-mix(in srgb, #5fd97a 35%, transparent);
  border-radius: 999px; background: color-mix(in srgb, #5fd97a 8%, transparent);
  white-space: nowrap;
}
#modal-feedback textarea {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 110px;
  background: rgba(10, 14, 22, .85); color: var(--texto);
  border: 1px solid var(--borda); border-radius: 11px; padding: 12px 14px;
  font: inherit; font-size: .92rem; outline: none;
}
#modal-feedback textarea:focus { border-color: color-mix(in srgb, var(--ouro) 55%, var(--borda)); }
.feedback-erro { color: var(--perigo); font-size: .82rem; min-height: 1.1em; margin-top: 6px; }

.btn-perigo {
  border-color: color-mix(in srgb, var(--perigo) 55%, var(--borda));
  color: color-mix(in srgb, var(--perigo) 88%, #fff);
}
.btn-perigo:hover { background: color-mix(in srgb, var(--perigo) 16%, transparent); }
#modal-apagar-conta input { width: 100%; }


/* ---------- Convite de VOCAÇÃO (faixa + modal) — jul/2026 ---------- */
.faixa-vocacao {
  margin-top: 12px; padding: 12px 16px; border-radius: 12px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--ouro) 20%, var(--painel)),
    color-mix(in srgb, var(--ouro) 7%, var(--painel)));
  border: 1px solid color-mix(in srgb, var(--ouro) 45%, var(--borda));
  box-shadow: 0 0 20px color-mix(in srgb, var(--ouro) 14%, transparent);
  animation: faixaPulsa 2.8s ease-in-out infinite;
}
@keyframes faixaPulsa {
  0%, 100% { box-shadow: 0 0 18px color-mix(in srgb, var(--ouro) 12%, transparent); }
  50%      { box-shadow: 0 0 30px color-mix(in srgb, var(--ouro) 26%, transparent); }
}
.faixa-vocacao-txt { flex: 1 1 260px; font-size: .93rem; }
.faixa-vocacao-txt b { color: var(--ouro); }
.faixa-vocacao-acoes { display: flex; gap: 8px; align-items: center; }
.modal-vocacao-caixa { max-width: 880px; width: min(880px, 94vw); max-height: 88vh; overflow-y: auto; }

@media (prefers-reduced-motion: reduce) { .faixa-vocacao { animation: none; } }

/* ---------- Cabeçalho compacto no CELULAR ---------- */
@media (max-width: 640px) {
  /* Utilitários (som/idioma/feedback/sino/sair) recolhidos atrás do ⋯ */
  .btn-hud-menu { display: inline-flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; }
  .hud-utils {
    display: none; width: 100%; justify-content: center;
    gap: 8px; flex-wrap: wrap; margin-top: 4px;
  }
  .hud-utils.aberto { display: flex; }

  /* Guilda + online na MESMA linha, discretos */
  .hud-guilda { width: auto; font-size: 11px; }
  .hud-online { font-size: 11px; padding: 1px 8px; }

  /* Barras: três em linha, mais baixas — o cabeçalho encolhe bastante */
  .barra-col { flex: 1 1 92px; min-width: 92px; }
  .barra-wrap { height: 17px; }
  .barra-texto { font-size: 10.5px; }
  .barra-estimativa { font-size: 9.5px; height: 10px; }

  .titulo-jogo { font-size: 16px; letter-spacing: 2.5px; }
  #cabecalho { gap: 6px; padding: 8px 10px; }

  /* Faixa da vocação: botões em largura total, fáceis de tocar */
  .faixa-vocacao { padding: 11px 12px; gap: 10px; }
  .faixa-vocacao-txt { flex: 1 1 100%; font-size: .88rem; }
  .faixa-vocacao-acoes { width: 100%; }
  .faixa-vocacao-acoes .btn { flex: 1; }
  .modal-vocacao-caixa { width: 96vw; max-height: 92vh; padding: 16px 12px; }
  .modal-vocacao-caixa .classe-grid { grid-template-columns: 1fr; gap: 10px; }
}

/* "!" de presente recebido na aba do Diário */
.chat-alerta {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 5px; min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: 999px; font-size: 10px; font-weight: 800; line-height: 1;
  background: var(--ouro); color: #1a1206;
  box-shadow: 0 0 8px color-mix(in srgb, var(--ouro) 70%, transparent);
  animation: chatAlertaPulsa 2.3s ease-in-out infinite;
  transform: translate3d(0,0,0) scale(1);
  -webkit-backface-visibility: hidden;
}
@keyframes chatAlertaPulsa {
  0%, 100% { transform: translate3d(0,0,0) scale (1); box-shadow: 0 0 6px color-mix(in srgb, var(--ouro) 55%, transparent); }
  50%      { transform: translate3d(0,0,0) scale (1);; box-shadow: 0 0 14px color-mix(in srgb, var(--ouro) 95%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .chat-alerta { animation: none; } }

/* Presente recebido: o 💬 flutuante (celular) ganha um ponto dourado pulsante.
   ⚠ NÃO declarar `position` aqui: o botão já é `position: fixed` no @media do
   celular, e como este bloco vem DEPOIS no arquivo, um `relative` tirava o botão
   do canto e ele sumia da tela (bug pego pelo Diego). `fixed` já serve de
   contexto pro ::after absoluto. */
#btn-chat-flutuante.tem-presente::after {
  pointer-events: none;
  content: '!'; position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; line-height: 1;
  background: var(--ouro); color: #1a1206;
  
  /* Sombra base estática calculada apenas uma vez */
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--ouro) 85%, transparent));
  
  /* Executa a nova animação simplificada */
  animation: chatAlertaPulsaOtimizado 1.3s ease-in-out infinite;
  transform: translate3d(0,0,0) scale(1);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

@keyframes chatAlertaPulsaOtimizado {
  0%, 100% { 
    transform: translate3d(0,0,0) scale(1); 
    filter: drop-shadow(0 0 3px color-mix(in srgb, var(--ouro) 60%, transparent));
  }
  50% { 
    transform: translate3d(0,0,0) scale(1.18); 
    /* Mudamos apenas o raio do borrão, mantendo a opacidade mais estável para o Windows */
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--ouro) 85%, transparent));
  }
}


/* ---------- TOQUE: abas e botões respondem no ícone também (jul/2026) ----------
   Dois problemas resolvidos aqui:
   1) `clip-path` recorta TAMBÉM a área clicável — os cantos do trapézio das abas
      viravam zona morta, e no celular o emoji cai justo ali ("só pega no meio").
      No celular a aba já é uma pílula, então o recorte sai de cena.
   2) Tocar no texto/emoji começava uma SELEÇÃO no iOS, que cancelava o toque. */
button, .aba, .sub-aba, .chat-aba, .classe-cartao, .cartao button {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
button * , .aba * { pointer-events: none; }   /* o ícone não "rouba" o toque do botão */

@media (max-width: 1000px) {
  /* sem recorte no toque + cantos arredondados pra não virar retângulo seco */
  .aba { clip-path: none; border-radius: 8px 8px 0 0; }
}

/* Atalho pra encurtar o descanso, ao lado do contador da caçada */
#cacar-cooldown { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cd-acoes { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.cd-acoes .btn { font-size: .78rem; padding: 4px 10px; }
@media (max-width: 640px) {
  #cacar-cooldown { gap: 8px; }
  .cd-acoes { width: 100%; }
  .cd-acoes .btn { flex: 1; }
}

/* Discord: botão no login e no cabeçalho */
.btn-discord {
  display: block; text-align: center; text-decoration: none; margin-top: 10px;
  border-color: color-mix(in srgb, #5865F2 55%, var(--borda));
  color: color-mix(in srgb, #8b93ff 90%, #fff);
}
.btn-discord:hover { background: color-mix(in srgb, #5865F2 18%, transparent); }
.btn-discord-hud { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }


/* ---------- MODO LEVE (desempenho) — jul/2026 ----------
   Em máquinas com GPU fraca ou aceleração desligada (relato: Edge no Windows),
   a pilha de efeitos (partículas + aurora + brilho das barras + backdrop-filter)
   força repaint da tela inteira a cada tick e o jogo PARECE piscar/acelerado.
   Este modo desliga só o enfeite — nada de jogabilidade muda. */
body.modo-leve #particulas,
body.modo-leve .intro-fenda { display: none !important; }

body.modo-leve::after { display: none !important; }          /* aurora do topo */

/* TODO efeito de vidro sai no modo leve (antes cobria só 5 dos 12 usos) */
body.modo-leve *, body.modo-leve *::before, body.modo-leve *::after {
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}

/* Animações contínuas (as que rodam pra sempre) ficam paradas */
body.modo-leve .barra-xp,
body.modo-leve .barra-hp,
body.modo-leve .barra-hab,
body.modo-leve .titulo-jogo,
body.modo-leve .faixa-vocacao,
body.modo-leve .chat-alerta,
body.modo-leve .aba-alerta,
body.modo-leve .painel-ocupado,
body.modo-leve #btn-chat-flutuante.tem-presente::after,
body.modo-leve .sino-badge { animation: none !important; }

/* Gradientes que "correm" viram cor sólida */
body.modo-leve .barra-xp { background: var(--acento) !important; }
body.modo-leve .barra-hp { background: var(--perigo) !important; }
body.modo-leve .barra-hab { background: var(--ouro) !important; }
body.modo-leve .titulo-jogo { background: none !important; -webkit-text-fill-color: var(--ouro) !important; color: var(--ouro) !important; }

body.modo-leve #cenario-fundo { opacity: .08 !important; }   /* fundo mais leve */


/* Log de presente: brilho mais barato (animar text-shadow força repaint do texto
   a cada quadro e "treme" em GPU fraca). O modo leve desliga de vez. */
body.modo-leve .log-presente { animation: none !important; }


/* ---------- CARGA DE BASE: menos animação eterna (jul/2026) ----------
   Diagnóstico do beta (paint flashing no Edge/Windows): TUDO que pisca é
   elemento com `animation: infinite`. Aqui reduzimos a carga pra todo mundo,
   não só pro modo leve: menos partículas, aurora mais lenta e barras que só
   "correm" quando o jogador está mesmo olhando a tela. */

/* As partículas eram 14 elementos animando pra sempre; metade some. */
#particulas i:nth-child(n+8) { display: none; }

/* Aurora e brilho das barras: bem mais lentos (mesma sensação, 1/3 do custo) */
body::after { animation-duration: 16s !important; }
.barra-xp, .barra-hp, .barra-hab { animation-duration: 9s !important; }

/* Aba em segundo plano não anima (o navegador já pausa, mas garantimos) */
@media (prefers-reduced-motion: reduce) {
  #particulas, body::after { display: none !important; }
  .barra-xp, .barra-hp, .barra-hab, .faixa-vocacao, .chat-alerta, .aba-alerta { animation: none !important; }
}


/* ---------- HOVER BARATO (jul/2026) ----------
   Relato: "pisca conforme a velocidade do mouse". Cada :hover com box-shadow
   dispara um repaint; com elementos grandes desfocados na tela, o navegador
   re-desfoca tudo a cada um. Mouse rápido = dezenas por segundo.
   Solução: no hover, só a BORDA muda (não gera repaint da área ao redor). */
.cartao:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}
.btn:hover:not(:disabled) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1) !important;
}
.codex-card:hover, .historia-card:hover {
  box-shadow: none !important;
}


/* ---------- ISOLAMENTO DAS CAMADAS DECORATIVAS (jul/2026) ----------
   Relato decisivo: "removi o efeito caro e a piscada ficou MAIS RÁPIDA" — sinal
   de LOOP, não de lentidão. Mecanismo: partículas, aurora e cenário são fixos e
   cobrem a tela INTEIRA; qualquer repaint embaixo deles (cada :hover que o mouse
   cruza) obrigava o navegador a RECOMPOR a tela toda.
   `will-change: transform` + `contain` põem cada um na sua própria camada de
   composição: o que acontece embaixo deixa de forçar o redesenho deles. */
#particulas, #cenario-fundo {
  will-change: transform;
  contain: strict;
  pointer-events: none;
}
body::after {
  will-change: opacity, transform;
  contain: paint;
}
/* Conteúdo do jogo isolado do fundo: repaint interno não sobe pra camada de trás */
main, #cabecalho, #painel-log { contain: paint; }

/* ============================================================
   INDICADOR DE VEZ (raid e poker) — os botões da sua vez ficam BRANCOS.

   Chegamos aqui depois de três tentativas reprovadas pelo Diego:
     1. "SUA VEZ" gigante no centro + anel pulsando na tela → "desesperado
        demais, piscando, irritando";
     2. anel estático na borda da tela → ainda ruim;
     3. borda dourada com brilho cintilante no botão → ainda pouco visível.

   O que resolveu foi o mais simples: TROCAR A COR. Num tema escuro onde tudo é
   cinza-chumbo e dourado, botão branco sólido é o maior contraste possível — e
   não briga com o acento da vocação, que muda de classe pra classe.

   Duas regras que sobraram das tentativas anteriores e continuam valendo:
     · o que fica na tela NÃO se mexe (zero animação aqui — só a troca de cor);
     · botão [disabled] (skill em recarga) NÃO acende, senão o olho vai pro
       lugar errado.
   ============================================================ */

body.minha-vez .mesa-acoes .btn:not([disabled]),
body.minha-vez .poker-acoes .btn:not([disabled]) {
  background: linear-gradient(180deg, #ffffff, #dfe3ea);
  border-color: #ffffff;
  color: #16181f;
  font-weight: 600;
  text-shadow: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
  /* SEM `transition` e SEM `:hover` aqui. A cor tem que valer já no 1º quadro
     (a mesa se redesenha a cada 90ms), e mudar cor no hover gera repaint a cada
     movimento do mouse — a causa da piscada no PC do amigo (mecânica 76 b5).
     ⚠ A piscada relatada em jul/2026 NÃO foi a transição: era o `useEffect` do
     MesaRaid/Poker apagando e reacendendo o aviso a cada segundo. Ver a nota
     nesses arquivos antes de suspeitar do CSS. */
}
/* A varredura de luz do .btn-destaque é feita pra fundo escuro — sobre o branco
   ela vira uma mancha cinza. Desligada enquanto o botão está aceso. */
body.minha-vez .mesa-acoes .btn-destaque::after,
body.minha-vez .poker-acoes .btn-destaque::after { display: none; }

body.minha-vez .mesa-turno { color: var(--ouro); }

/* Urgência (abaixo de 10s): o branco vira um vermelho claro. Continua chapado e
   legível — só muda a cor, sem piscar nem acelerar nada. */
body.vez-urgente .mesa-acoes .btn:not([disabled]),
body.vez-urgente .poker-acoes .btn:not([disabled]) {
  background: linear-gradient(180deg, #ffdada, #ffb3b3);
  border-color: #ffe4e4;
  color: #3d0d0d;
}
body.vez-urgente .mesa-turno,
body.vez-urgente #mesa-timer { color: var(--perigo); }