/* Arena dos Bichinhos — "instrumento de batalha em luz do dia".
   Chassi claro de alto contraste + visores escuros tipo LED.
   Ver ENTREGA.md: dark mode perde no sol; aqui o brilho fica no fundo e o
   preto fica reservado aos números que precisam ser lidos de longe.

   Regras deste arquivo:
   - animação só com transform e opacity (nunca width/height/top/left/box-shadow/filter);
   - todo texto tem contraste >= 4.5:1 medido (scripts/contraste.js);
   - nada de backdrop-filter, color-mix() ou :has() (WebView antiga de Android de entrada).
*/

@font-face {
  /* fallback métrico enquanto a Chakra Petch não chega (ou nunca chega, offline) */
  font-family: "Chakra Fallback";
  src: local("Segoe UI Semibold"), local("Roboto Medium"), local("Helvetica Neue"), local("Arial");
  font-weight: 500 700;
  ascent-override: 96%;
}

:root {
  /* ---- chassi (superfícies claras) ---- */
  --chassi: #e4eaf0;
  --chassi-alt: #d7dfe8;
  --superficie: #ffffff;
  --superficie-2: #f3f6fa;

  /* ---- tinta (texto) ---- */
  --tinta: #0a1120;
  --tinta-media: #404c60;

  /* ---- visor escuro (LED) ---- */
  --leitura: #0b1322;
  --leitura-fundo: #050a12;

  /* ---- cor de sistema ---- */
  --sistema: #0b5f7a;        /* texto/traço sobre claro — 7.16:1 no branco */
  --sistema-neon: #3ae1ff;   /* só sobre visor escuro — 11.85:1 */

  /* ---- símbolos: cor fixa, sempre junto da forma (js/icones.js) ---- */
  --ataque: #127a33;
  --ataque-texto: #ffffff;
  --defesa: #1746c8;
  --defesa-texto: #ffffff;
  --especial: #f6c50b;
  --especial-texto: #1a1400;
  --tropeco: #8a2bc4;
  --tropeco-texto: #ffffff;

  /* ---- papéis ---- */
  --perigo: #c41f1f;
  --perigo-fundo: #ffe4e4;
  --escudo: #1746c8;
  --escudo-fundo: #dde6ff;
  --cura: #127a33;
  --ouro: #765a00;           /* borda do selo de Fundador — 6.50:1 no branco, 5.36:1 no chassi */

  /* ---- espécies (o valor de js/criaturas.js entra como --cor-base) ---- */
  --tatu: #95470b;
  --tatu-corpo: #dda15e;      /* corpo do bichinho: o tom do plástico impresso */
  --tatu-holo-1: rgba(245, 158, 11, 0.28);
  --tatu-holo-2: rgba(180, 83, 9, 0.16);
  --sapo: #0b6b62;
  --sapo-corpo: #79c9bd;
  --sapo-holo-1: rgba(16, 185, 168, 0.28);
  --sapo-holo-2: rgba(11, 107, 98, 0.16);
  --rato: #44536a;            /* ardósia: rival de treino — branco sobre ela e ela sobre branco: 7.80:1 */
  --rato-corpo: #a7b3c2;
  --rato-holo-1: rgba(100, 116, 139, 0.28);
  --rato-holo-2: rgba(68, 83, 106, 0.16);

  /* ---- barra de vida (sobre visor escuro) ---- */
  --vida-alta: #2ecc5a;
  --vida-media: #f6c50b;
  --vida-baixa: #ff4d4d;

  /* ---- geometria ---- */
  --toque: 64px;
  --raio: 3px 16px 3px 16px;   /* chapa técnica: cantos cortados em diagonal */
  --raio-p: 2px 10px 2px 10px;
  --borda: 3px;
  --gutter: 16px;

  --fonte: "Chakra Petch", "Chakra Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  color: var(--tinta);
  font-family: var(--fonte);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.35;
  /* profundidade sem imagem: grade técnica + brilho de canto, tudo estático */
  background-color: var(--chassi);
  background-image:
    radial-gradient(120% 70% at 50% -10%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 60%),
    repeating-linear-gradient(0deg, rgba(10, 17, 32, 0.055) 0 1px, rgba(10, 17, 32, 0) 1px 32px),
    repeating-linear-gradient(90deg, rgba(10, 17, 32, 0.055) 0 1px, rgba(10, 17, 32, 0) 1px 32px),
    linear-gradient(180deg, var(--chassi) 0%, var(--chassi-alt) 100%);
  background-attachment: scroll;
  min-height: 100vh;
}

main {
  max-width: 560px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 16px);
}

[hidden] { display: none !important; }

h1, h2 { margin: 0 0 10px; line-height: 1.1; font-weight: 700; }
h2 {
  font-size: 1.45rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
/* marca técnica antes de cada título de tela */
h2::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 10px;
  background: var(--sistema);
  transform: rotate(45deg) translateY(-2px);
}

.tela { display: flex; flex-direction: column; gap: 13px; }

.icone { display: inline-block; width: 1em; height: 1em; flex: none; vertical-align: -0.15em; }

/* ---------- transição entre telas ---------- */

.tela.entra { animation: tela-entra 220ms cubic-bezier(0.22, 0.9, 0.3, 1) both; }
@keyframes tela-entra {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to { opacity: 1; transform: none; }
}

/* ---------- chapa: superfície base de painéis e cartões ---------- */

.chapa {
  position: relative;
  background-color: var(--superficie);
  background-image: linear-gradient(170deg, var(--superficie) 0%, var(--superficie-2) 100%);
  border: var(--borda) solid var(--tinta);
  border-radius: var(--raio);
}

/* ---------- Botões ---------- */

.botao {
  position: relative;
  min-height: var(--toque);
  width: 100%;
  padding: 12px 18px;
  border: var(--borda) solid var(--tinta);
  border-radius: var(--raio);
  font: inherit;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 110ms ease-out;
}
.botao:active { transform: translate3d(0, 3px, 0); }
.botao:disabled, .botao[aria-disabled="true"] {
  /* sem opacidade: em luz forte, texto apagado some. Fica cinza sólido e legível. */
  background: var(--chassi-alt);
  background-image: none;
  color: var(--tinta-media);
  border-color: var(--tinta-media);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}
.botao:focus-visible,
.cartao:focus-visible,
.simbolo:focus-visible,
.qg-opcao:focus-visible,
.opcao-alvo:focus-visible,
input:focus-visible {
  outline: 4px solid var(--sistema);
  outline-offset: 3px;
}

.botao-principal {
  background: var(--leitura);
  background-image: linear-gradient(180deg, #16223a 0%, var(--leitura) 100%);
  color: #fff;
  box-shadow: 0 4px 0 #414d61, inset 0 2px 0 rgba(58, 225, 255, 0.5);
  text-transform: uppercase;
}
.botao-principal:disabled, .botao-principal[aria-disabled="true"] { box-shadow: none; }
.botao-secundario {
  background-color: var(--superficie);
  background-image: linear-gradient(180deg, var(--superficie) 0%, var(--superficie-2) 100%);
  color: var(--tinta);
  box-shadow: 0 4px 0 var(--chassi-alt);
}
.botao-ok {
  width: auto;
  min-width: 96px;
  background: var(--leitura);
  color: #fff;
  box-shadow: inset 0 2px 0 rgba(58, 225, 255, 0.5);
}

.botao-link {
  min-height: 48px;
  min-width: 56px;
  padding: 8px 12px;
  background: var(--superficie);
  border: 2px solid var(--tinta-media);
  border-radius: var(--raio-p);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--tinta-media);
  text-transform: uppercase;
  cursor: pointer;
}

/* Barra de comando: sólida e sangrada até a borda, para nunca deixar um
   símbolo meio visível por baixo de um gradiente. */
.rodape-fixo {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: flex;
  gap: 10px;
  margin: 4px calc(var(--gutter) * -1) 0;
  padding: 12px var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 12px);
  background: var(--chassi-alt);
  border-top: 3px solid var(--tinta);
}

/* ---------- Início ---------- */

.logo-simbolos { display: flex; justify-content: center; gap: 9px; margin-top: 3vh; }
.logo-simbolos .selo-simbolo { width: 58px; height: 58px; font-size: 30px; }
.logo {
  margin: 14px 0 0;
  font-size: 2.9rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.95;
}
/* linha de instrumento sob o logo */
.logo + .sub { position: relative; padding-top: 14px; }
.logo + .sub::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 50%;
  width: 180px;
  height: 3px;
  margin-left: -90px;
  background: linear-gradient(90deg, rgba(11, 95, 122, 0) 0%, var(--sistema) 30%, var(--sistema) 70%, rgba(11, 95, 122, 0) 100%);
}
.sub { margin: 0; text-align: center; color: var(--tinta-media); font-weight: 600; }

/* Símbolo isolado (placa colorida com a forma gravada) */
.selo-simbolo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--borda) solid var(--tinta);
  border-radius: var(--raio-p);
  background-color: var(--cor-simbolo);
  background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.28) 0%, rgba(0, 0, 0, 0.12) 100%);
  color: var(--cor-simbolo-texto);
}

[data-simbolo="ATAQUE"] { --cor-simbolo: var(--ataque); --cor-simbolo-texto: var(--ataque-texto); }
[data-simbolo="DEFESA"] { --cor-simbolo: var(--defesa); --cor-simbolo-texto: var(--defesa-texto); }
[data-simbolo="ESPECIAL"] { --cor-simbolo: var(--especial); --cor-simbolo-texto: var(--especial-texto); }
[data-simbolo="TROPECO"] { --cor-simbolo: var(--tropeco); --cor-simbolo-texto: var(--tropeco-texto); }

/* espécie: --cor-tema vem daqui, --cor-base vem de js/criaturas.js (espécie nova) */
[data-especie="tatu"] { --cor-tema: var(--tatu); --cor-corpo: var(--tatu-corpo); --holo-1: var(--tatu-holo-1); --holo-2: var(--tatu-holo-2); }
[data-especie="sapo"] { --cor-tema: var(--sapo); --cor-corpo: var(--sapo-corpo); --holo-1: var(--sapo-holo-1); --holo-2: var(--sapo-holo-2); }
[data-especie="rato"] { --cor-tema: var(--rato); --cor-corpo: var(--rato-corpo); --holo-1: var(--rato-holo-1); --holo-2: var(--rato-holo-2); }

/* ---------- O bichinho (mesma silhueta da peça impressa) ---------- */

/* Alto e estreito: a altura manda, a largura acompanha. O corpo usa o
   --cor-corpo da espécie; espécie nova cai no --cor-base de js/criaturas.js. */
.icone.bichinho {
  width: auto;
  height: 1em;
  vertical-align: middle;
  color: var(--cor-corpo, var(--cor-base, var(--tinta)));
  overflow: visible;
}
.bicho-casco { stroke: var(--tinta); stroke-width: 3px; paint-order: stroke; }
.bicho-pupila { fill: #1b1b1b; }
.bicho-traco { fill: rgba(255, 255, 255, 0.45); stroke: rgba(0, 0, 0, 0.35); stroke-width: 1.6px; }
.bicho-furo { fill: rgba(0, 0, 0, 0.45); }
.bicho-placa { fill: #fff; stroke: var(--tinta); stroke-width: 2.5px; }
.bicho-placa-vazia { fill: rgba(255, 255, 255, 0.55); stroke-dasharray: 5 5; }
/* O peito repete a cor do símbolo que saiu (a mesma dos botões). */
.bicho-simbolo { color: var(--cor-simbolo); }

/* ---------- Escolha ---------- */

.form-codigo label {
  display: block;
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tinta-media);
  margin-bottom: 6px;
}
.linha-codigo { display: flex; gap: 10px; }
.linha-codigo input {
  flex: 1;
  min-width: 0;
  min-height: var(--toque);
  padding: 8px 14px;
  border: var(--borda) solid var(--tinta);
  border-radius: var(--raio);
  font: inherit;
  font-size: 1.45rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: var(--superficie);
  color: var(--tinta);
}
.erro {
  margin: 10px 0 0;
  padding: 12px 14px;
  border: var(--borda) solid var(--perigo);
  border-left-width: 10px;
  border-radius: var(--raio-p);
  background: var(--perigo-fundo);
  color: var(--perigo);
  font-weight: 700;
}
.ou {
  margin: 4px 0 0;
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tinta-media);
}
.aviso-leve { margin: 0; font-weight: 600; color: var(--tinta-media); text-align: center; }

.lista-criaturas { display: grid; gap: 12px; }

/* ---------- Cartão de criatura (lista) ---------- */

.cartao {
  --cor: var(--cor-tema, var(--cor-base, var(--tinta)));
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  min-height: var(--toque);
  padding: 11px 14px 11px 22px;
  border: var(--borda) solid var(--tinta);
  border-radius: var(--raio);
  background-color: var(--superficie);
  background-image: linear-gradient(170deg, var(--superficie) 0%, var(--superficie-2) 100%);
  color: var(--tinta);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: transform 120ms ease-out;
}
.cartao-dados { position: relative; display: grid; gap: 3px; flex: 1; min-width: 0; }
.cartao-bicho { position: relative; display: flex; font-size: 64px; }
/* costela da espécie */
.cartao::before {
  content: "";
  position: absolute;
  left: 0;
  top: -3px;
  bottom: -3px;
  width: 12px;
  background-color: var(--cor);
  background-image: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0 3px, rgba(255, 255, 255, 0) 3px 9px);
  border-radius: 0 0 0 13px;
}
.cartao-info { cursor: default; }
.cartao[aria-pressed="true"] {
  background-image: linear-gradient(170deg, #fffdf2 0%, #fff6d6 100%);
  transform: translate3d(0, -4px, 0);
  box-shadow: 0 6px 0 var(--tinta), 0 0 0 3px var(--especial);
}
.cartao-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cartao-nome { font-size: 1.35rem; font-weight: 700; letter-spacing: 0.01em; }
.cartao-marca {
  display: none;
  margin-left: 8px;
  padding: 1px 7px;
  background: var(--tinta);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.cartao[aria-pressed="true"] .cartao-marca { display: inline-block; }
.cartao-codigo {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--tinta-media);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.cartao-status { display: flex; flex-wrap: wrap; gap: 2px 16px; font-weight: 700; font-size: 1.05rem; }
.cartao-status .icone-vida { color: var(--perigo); }
.cartao-especial { font-size: 0.95rem; font-weight: 600; color: var(--tinta-media); line-height: 1.25; }
.cartao-placar { font-size: 0.9rem; font-weight: 700; letter-spacing: 0.04em; }
.cartao-placar .v { color: var(--cura); }

.linha-especial b { color: var(--tinta); }
.linha-especial .icone-especial,
.carta-especial .icone-especial {
  color: var(--especial);
  stroke: var(--tinta);
  stroke-width: 1.4px;
  paint-order: stroke;
  font-size: 1.1em;
  margin-right: 2px;
}

/* com arte: a imagem no lugar da silhueta, sobre um disco da cor da espécie */
.cartao-bicho.com-arte {
  width: 76px;
  height: 76px;
  flex: none;
  border-radius: 50%;
  background: radial-gradient(circle, var(--cor) 0 46%, rgba(255, 255, 255, 0) 47%);
}
/* Rato do Mato: rival de treino, sempre o último da lista */
.cartao-rival { background-image: linear-gradient(170deg, var(--superficie) 0%, #e9edf3 100%); }
.cartao-rival-selo {
  justify-self: start;
  padding: 1px 8px;
  border-radius: var(--raio-p);
  background: var(--rato);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* série futura: travada, sem nome nem números (mesmo visor da coleção) */
.cartao-em-breve {
  --cor: var(--sistema-neon);
  align-items: center;
  background: var(--leitura);
  color: #fff;
  cursor: default;
}
.cartao-em-breve .cartao-bicho { font-size: 44px; color: var(--sistema-neon); }
.cartao-em-breve .cartao-nome { letter-spacing: 0.12em; color: var(--sistema-neon); }
.cartao-em-breve .cartao-codigo { color: #fff; }

/* ---------- Batalha em tela dividida ----------
   O celular fica na mesa entre os dois. Metade de cima = Jogador 1, girada
   180° para ficar de frente para ele; metade de baixo = Jogador 2. As duas
   metades têm o mesmo desenho: bichinho perto do meio (onde a luta acontece),
   botões perto da borda (onde a mão alcança). */

.tela.dividida {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 560px;
  margin: 0 auto;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
}

.metade {
  --cor: var(--cor-tema, var(--cor-base, var(--tinta)));
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 0;
  padding: 6px var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 8px);
}
/* de frente para o jogador do outro lado; a borda de baixo dele é o topo da tela */
.metade-0 {
  transform: rotate(180deg);
  padding-bottom: calc(env(safe-area-inset-top, 0px) + 8px);
}
/* Contra o Rato a criança joga sozinha, de um lado: a metade dele (sempre a
   de cima) não gira. A ordem de dentro inverte para o bichinho continuar
   perto do meio e os botões perto da borda. */
.metade-0.metade-rival {
  transform: none;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) var(--gutter) 6px;
}
.metade-rival .metade-corpo { flex-direction: column-reverse; }
.metade-rival .metade-corpo::before { top: auto; bottom: -3px; border-radius: 0 0 16px 3px; }
/* sozinho contra o Rato: as cópias de cabeça para baixo saem */
.contra-rival .chip-rodada-cima, .contra-rival .lutar-cima { display: none; }
/* quem ataca passa por cima da outra metade (língua, bote) */
.metade.atacante { z-index: 3; }

.metade-corpo {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  min-height: 0;
  padding: 12px 10px 10px;
  border: var(--borda) solid var(--tinta);
  border-radius: var(--raio);
  background-color: var(--superficie);
  background-image: linear-gradient(170deg, var(--superficie) 0%, var(--superficie-2) 100%);
}
/* faixa da espécie, do lado do meio da tela */
.metade-corpo::before {
  content: "";
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  height: 8px;
  background-color: var(--cor);
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 45%);
  border-radius: 3px 16px 0 0;
}

/* escudo ativo: moldura azul + anel que pulsa só com transform/opacity */
.metade.com-escudo .metade-corpo { border-color: var(--escudo); }
.metade.com-escudo .metade-corpo::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 3px solid var(--escudo);
  border-radius: var(--raio);
  pointer-events: none;
  animation: pulso-escudo 1.5s ease-in-out infinite alternate;
}
@keyframes pulso-escudo {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0.25; transform: scale(1.012); }
}

/* palco: o bichinho e, ao lado, a pergunta do modo ou o resultado */
.palco-luta {
  position: relative;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
  gap: 10px;
  min-height: 0;
}
.bicho-lugar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.bicho-luta {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  max-height: 200px;
  transform-origin: 50% 70%;
}
.bicho-luta .bichinho { height: 100%; max-height: 190px; }
/* Com arte, o bichinho é a estrela do painel: coluna maior e imagem alta. */
.metade.tem-arte .palco-luta { grid-template-columns: minmax(0, 52%) minmax(0, 1fr); }
.metade.tem-arte .bicho-luta { max-height: 250px; }
.bicho-luta .painel-bicho-placa { right: 2%; bottom: 0; font-size: 38px; }
/* Trocou de símbolo, o retrato é redesenhado: a entrada confirma o toque. */
.bicho-luta .bichinho, .painel-bicho-placa .placa { animation: bicho-troca 220ms ease-out; }
.bicho-lugar .selo-escudo {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  padding: 2px 8px 2px 5px;
  font-size: 0.7rem;
  transition: opacity 200ms, transform 200ms;
}
.bicho-lugar .selo-escudo .icone { font-size: 1.1rem; }
.selo-escudo.desligado { opacity: 0; transform: scale(0.5); }

/* ---------- Cenário por modo (#tela-batalha[data-modo]) ----------
   Só CSS e SVG em data URI, tudo estático (nada anima). Aparece em dois
   lugares sem texto por cima: a moldura em volta dos painéis e o chão sob
   cada bichinho (.bicho-lugar::before). O texto fica nos painéis brancos, então
   o contraste medido não muda.
     Rolar  — chão de terra com folhas
     Batalha — estádio redondo visto de cima, como a bandeja
     Mira   — gramado com um alvo desenhado no centro */
#tela-batalha[data-modo="ROLAR"] {
  background-color: #b8966a;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cg fill='%23557a2c' fill-opacity='.55'%3E%3Cpath d='M14 20c8-10 20-8 22 0-8 8-18 8-22 0z'/%3E%3Cpath d='M62 64c4-12 16-14 20-6-4 10-14 12-20 6z'/%3E%3C/g%3E%3Cg fill='%237a5a36' fill-opacity='.5'%3E%3Ccircle cx='70' cy='18' r='3'/%3E%3Ccircle cx='24' cy='74' r='4'/%3E%3Ccircle cx='48' cy='44' r='2'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 55%);
}
#tela-batalha[data-modo="ARENA"] {
  background-color: #aab6c4;
  background-image:
    repeating-radial-gradient(circle at 50% 50%, rgba(10, 17, 32, 0.12) 0 3px, rgba(10, 17, 32, 0) 3px 38px),
    radial-gradient(circle at 50% 50%, #dfe5ec 0%, #aab6c4 70%);
}
#tela-batalha[data-modo="MIRA"] {
  background-color: #7fb069;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0) 0 120px, rgba(255, 255, 255, 0.55) 120px 128px, rgba(255, 255, 255, 0) 128px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0 28px, rgba(255, 255, 255, 0) 28px 56px);
}
/* o chão sob o bichinho: uma elipse baixa, sempre atrás dele */
.bicho-lugar::before {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 2%;
  height: 34%;
  border-radius: 50%;
  pointer-events: none;
}
[data-modo="ROLAR"] .bicho-lugar::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60' viewBox='0 0 120 60'%3E%3Cg fill='%23557a2c'%3E%3Cpath d='M8 38c6-9 16-8 18-1-6 7-14 7-18 1z'/%3E%3Cpath d='M92 16c6-8 15-6 16 1-6 6-13 6-16-1z'/%3E%3Cpath d='M86 48c3-7 11-8 13-3-3 6-10 7-13 3z' fill='%236d8f33'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat,
    radial-gradient(closest-side, #a57b4c 0%, #c19a6b 70%, rgba(193, 154, 107, 0) 100%);
}
[data-modo="ARENA"] .bicho-lugar::before {
  background: repeating-radial-gradient(closest-side, #7b8797 0 4px, #c7d0da 4px 13px, #aeb9c6 13px 16px);
  border: 3px solid #4a5566;
  bottom: 4%;
}
[data-modo="MIRA"] .bicho-lugar::before {
  background: radial-gradient(closest-side,
    #c41f1f 0 14%, #fff 14% 28%, #c41f1f 28% 44%, #fff 44% 60%, #5f9a48 60% 88%, rgba(95, 154, 72, 0) 100%);
}

/* ---------- arte dos bichinhos (js/arte.js) ---------- */
.arte-bicho { display: block; width: 100%; height: 100%; object-fit: contain; }
/* com arte: o símbolo tocado vai numa placa no canto da imagem */
.painel-bicho-placa {
  position: absolute;
  right: -4px;
  bottom: -2px;
  display: flex;
  font-size: 34px;
}

@keyframes bicho-troca {
  0% { transform: scale(0.82); }
  60% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* o lado: pergunta do modo (antes) e resultado (depois), na mesma célula */
.lado {
  display: grid;
  align-items: center;
  min-width: 0;
  min-height: 0;
}
.lado > * { grid-area: 1 / 1; }
.lado-info { display: grid; gap: 6px; align-content: center; }
.dica { margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.15; }
.dica.pronto { color: var(--cura); }
.dica.pronto::before { content: "✓ "; }
.painel-especial { margin: 0; font-size: 0.8rem; font-weight: 600; line-height: 1.25; color: var(--tinta-media); }
/* Tela baixa: o texto do especial sai (a criança já leu no cartão) para o
   bichinho e as perguntas caberem. Mira e Arena têm uma pergunta a mais. */
@media (max-height: 600px) {
  .painel-especial { display: none; }
}
@media (max-height: 780px) {
  [data-modo="MIRA"] .painel-especial { display: none; }
}
/* Batalha: nenhum especial ativa, então o texto dele não aparece */
[data-modo="ARENA"] .painel-especial { display: none; }
.linha-especial b { color: var(--tinta); }

.lado-resultado {
  display: grid;
  gap: 4px;
  align-content: center;
  visibility: hidden;
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity 160ms ease-out, transform 160ms ease-out;
}
.veredito {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
}
/* O nome do golpe (golpeDaRodada) — o mesmo nas duas metades. */
.golpe-garrada { color: var(--ataque); }
.golpe-defendeu { color: var(--defesa); }
.golpe-choque, .golpe-fora { color: var(--perigo); }
.golpe-girou { color: var(--sistema); }
.golpe-tropecaram, .golpe-empate { color: var(--tinta-media); }
/* tropeçou e especial: o nome é um carimbo */
.golpe-tropecou, .golpe-especial {
  justify-self: start;
  max-width: 100%;
  padding: 3px 8px;
  border: 3px solid var(--tinta);
  border-radius: var(--raio-p);
  font-size: 1.15rem;
}
.golpe-tropecou { background: var(--tropeco); color: #fff; }
.golpe-especial { background: var(--especial); color: var(--especial-texto); white-space: normal; line-height: 1.05; }
/* o número grande de cada painel: quanto a vida mudou na rodada */
.numero-painel {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-size: 2.3rem;
  font-weight: 700;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
}
/* tela baixa: o número e os selos encolhem para caber ao lado do bichinho */
@media (max-height: 700px) {
  .numero-painel { font-size: 1.9rem; }
  .lado-resultado { gap: 2px; }
  .selos-rodada .etiqueta { padding: 1px 6px 1px 4px; font-size: 0.76rem; }
  .lado-resultado .nota { font-size: 0.76rem; }
  .golpe-tropecou, .golpe-especial { padding: 2px 6px; font-size: 0.98rem; letter-spacing: 0; }
  .veredito { font-size: 1.4rem; }
}
.numero-painel .icone { font-size: 2rem; }
.linha-numero { display: flex; align-items: center; gap: 8px; min-width: 0; }
.linha-numero .nota { flex: 1; min-width: 0; }
.numero-dano { color: var(--perigo); }
.numero-cura { color: var(--cura); }
.numero-escudo { color: var(--escudo); }
.numero-zero { color: var(--tinta-media); }
.nota { margin: 0; font-size: 0.82rem; font-weight: 600; line-height: 1.2; color: var(--tinta-media); }

/* cabeça: nome e vida na mesma linha */
.metade-cabeca {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}
.metade-nome {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 1.3rem;
  font-weight: 700;
}
.metade-jogador {
  display: inline-block;
  margin-right: 6px;
  padding: 0 6px;
  border-radius: var(--raio-p);
  background: var(--cor);
  color: #fff;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  vertical-align: 0.1em;
}
.metade-cabeca .vida { margin-top: 0; padding: 5px 8px; gap: 8px; }
.metade-cabeca .vida-trilho { height: 18px; }
.metade-cabeca .vida-numero { font-size: 1.15rem; min-width: 4.2ch; }

/* base: os botões de símbolo. Ficam sempre ali: depois da luta já aceitam a
   escolha da rodada seguinte (o resultado fica ao lado do bichinho). */
.base { display: grid; }
.base > * { grid-area: 1 / 1; }
/* os selos da rodada, embaixo do veredito */
.selos-rodada { gap: 4px; }
.selos-rodada .etiqueta { gap: 4px; padding: 2px 7px 2px 5px; border-width: 2px; font-size: 0.82rem; line-height: 1.15; }
.selos-rodada .etiqueta .icone { font-size: 1.05rem; }
.fase-texto .lado-info { visibility: hidden; }
.fase-texto .lado-resultado { visibility: visible; opacity: 1; transform: none; }

.simbolos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.simbolo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  min-height: var(--toque);
  padding: 6px 2px;
  border: var(--borda) solid var(--tinta);
  border-radius: var(--raio-p);
  background-color: var(--cor-simbolo);
  background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.26) 0%, rgba(0, 0, 0, 0.14) 100%);
  color: var(--cor-simbolo-texto);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 120ms ease-out;
}
.simbolo .icone { font-size: 1.75rem; }
/* não escolhido: vira contorno legível em vez de desbotar (sol forte) */
.simbolos.tem-escolha .simbolo[aria-pressed="false"] {
  background-color: var(--superficie);
  background-image: none;
  color: var(--tinta-media);
  border-color: var(--tinta-media);
}
.simbolos.tem-escolha .simbolo[aria-pressed="false"] .icone { color: var(--cor-simbolo); }
.simbolo[aria-pressed="true"] {
  transform: translate3d(0, -4px, 0);
  box-shadow: 0 5px 0 var(--tinta);
}
/* marca de canto: leitura de "selecionado" sem depender de cor */
.simbolo[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  border-style: solid;
  border-width: 0 14px 14px 0;
  border-color: transparent var(--tinta) transparent transparent;
}
.simbolo:disabled { cursor: default; }

/* ---------- faixa do meio: rodada, LUTAR e sair ---------- */

.faixa-centro {
  position: relative; /* sem z-index: o choque passa por cima das metades */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 6px var(--gutter);
  background: var(--leitura);
  border-top: 3px solid var(--tinta);
  border-bottom: 3px solid var(--tinta);
  color: #fff;
}
.chip-rodada {
  display: inline-grid;
  justify-items: center;
  justify-self: start;
  line-height: 1;
  white-space: nowrap;
}
.chip-rodada-nome {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.chip-rodada b {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
}
/* a do jogador de cima vem de cabeça para baixo, do lado esquerdo */
.chip-rodada-cima { grid-column: 1; justify-self: end; transform: rotate(180deg); }
#btn-lutar { grid-column: 2; }
#rodada { grid-column: 3; }
.botao-sair {
  position: absolute;
  right: var(--gutter);
  top: 50%;
  min-height: 44px;
  min-width: 52px;
  margin-top: -22px;
  padding: 4px 8px;
  border-color: #8a96ab;
  background: var(--leitura);
  color: #fff;
  font-size: 0.78rem;
}
.botao-sair:focus-visible { outline: 4px solid var(--sistema-neon); outline-offset: 2px; }

.botao-lutar {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1px;
  width: 80px;
  height: 80px;
  padding: 0;
  border: 4px solid var(--tinta);
  border-radius: 50%;
  background-color: var(--especial);
  background-image: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 55%);
  box-shadow: 0 0 0 3px var(--especial);
  color: var(--especial-texto);
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 110ms ease-out;
}
.botao-lutar:active { transform: scale(0.94); }
.botao-lutar:focus-visible { outline: 4px solid var(--sistema-neon); outline-offset: 4px; }
/* sem opacidade: desligado fica cinza sólido e legível */
.botao-lutar:disabled, .botao-lutar[aria-disabled="true"] {
  background: var(--chassi-alt);
  box-shadow: none;
  color: var(--tinta-media);
  cursor: default;
  transform: none;
}
.lutar-texto { position: relative; display: block; font-size: 0.95rem; font-weight: 700; line-height: 1.05; letter-spacing: 0.04em; }
.lutar-cima { transform: rotate(180deg); }
/* esperando os dois: VS grande */
.botao-lutar:disabled .lutar-texto { font-size: 1.15rem; }
/* DESFAZER: palavra longa, letra menor; o anel fecha em 1,5 s (ESPERA_DESFAZER) */
.botao-lutar.contando .lutar-texto { font-size: 0.74rem; letter-spacing: 0.02em; }
.lutar-anel {
  position: absolute;
  inset: -12px;
  border: 4px solid var(--sistema-neon);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.botao-lutar.contando .lutar-anel { animation: anel-fecha 1500ms linear both; }
@keyframes anel-fecha {
  from { opacity: 1; transform: scale(1.3); }
  to { opacity: 0.2; transform: scale(0.86); }
}
/* os dois prontos: o botão chama (loop só aqui, é sinal de estado) */
.botao-lutar:not(:disabled):not([aria-disabled="true"]) { animation: chama 900ms ease-in-out infinite alternate; }
@keyframes chama {
  from { transform: scale(1); }
  to { transform: scale(1.07); }
}

/* ---------- Visor de vida (LED) ---------- */

.vida {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 7px 10px;
  background: var(--leitura);
  border: var(--borda) solid var(--tinta);
  border-radius: var(--raio-p);
  box-shadow: inset 0 0 0 1px rgba(58, 225, 255, 0.28);
}
.vida-trilho {
  position: relative;
  height: 22px;
  border-radius: 999px;
  background: var(--leitura-fundo);
  overflow: hidden;
}
/* rastro: mostra de onde a vida caiu */
.vida-fantasma {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  background: #ff6b6b;
  opacity: 0.6;
}
.vida-barra {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  background-color: var(--vida-alta);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 55%);
}
/* segmentos do medidor (estático, por cima das duas barras) */
.vida-trilho::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(5, 10, 18, 0.85) 0 3px, rgba(5, 10, 18, 0) 3px 13px);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.14);
  border-radius: 999px;
}
.vida-barra.animar { transition: transform 220ms cubic-bezier(0.3, 0, 0.2, 1); }
.vida-fantasma.animar { transition: transform 400ms cubic-bezier(0.4, 0, 0.5, 1) 120ms; }
.vida-barra.faixa-media { background-color: var(--vida-media); }
.vida-barra.faixa-baixa { background-color: var(--vida-baixa); }
.vida-numero {
  color: #fff;
  font-size: 1.3rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  min-width: 4.6ch;
  text-align: right;
}
/* vida baixa: o visor inteiro pulsa (opacity de uma camada, não box-shadow) */
.vida.baixa { position: relative; border-color: var(--perigo); }
.vida.baixa::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 3px solid var(--perigo);
  border-radius: var(--raio-p);
  pointer-events: none;
  animation: pulso-perigo 1.1s ease-in-out infinite alternate;
}
@keyframes pulso-perigo {
  from { opacity: 1; }
  to { opacity: 0.15; }
}

/* ---------- Pergunta da Mira, na metade de cada jogador ---------- */

.opcoes-alvo { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.opcao-alvo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 48px;
  padding: 4px;
  border: var(--borda) solid var(--tinta);
  border-radius: var(--raio-p);
  background-color: var(--superficie);
  background-image: linear-gradient(180deg, var(--superficie) 0%, var(--superficie-2) 100%);
  color: var(--tinta);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.1;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 120ms ease-out;
}
.opcao-alvo .icone { font-size: 1.2rem; flex: none; }
.opcao-alvo[aria-pressed="true"] {
  background-image: linear-gradient(180deg, #fffdf2 0%, #fff4cd 100%);
  transform: translate3d(0, -3px, 0);
  box-shadow: 0 4px 0 var(--tinta);
}
/* não escolhido: contorno, nunca opacidade */
.opcoes-alvo.tem-escolha .opcao-alvo[aria-pressed="false"] {
  background-image: none;
  background-color: var(--chassi-alt);
  color: var(--tinta-media);
  border-color: var(--tinta-media);
}
.opcao-alvo[data-acertou="sim"] .icone { color: #b3005c; }
.opcao-alvo[data-acertou="nao"] .icone { color: var(--tinta-media); }

/* ---------- Batalha: "Quem ganhou?" ----------
   A tela escurece por trás e as duas fotos ficam lado a lado. Embaixo de cada
   foto, os dois jeitos de ganhar; no meio, o Empate. Um toque resolve. */
.quem-ganhou {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  padding: 12px var(--gutter);
  background: rgba(5, 10, 18, 0.76);
  animation: qg-fundo 180ms ease-out both;
}
.qg-painel {
  position: relative;
  display: grid;
  gap: 10px;
  width: 100%;
  padding: 14px 10px 10px;
  border: 4px solid var(--tinta);
  border-radius: var(--raio);
  background-color: var(--superficie);
  background-image: linear-gradient(180deg, var(--superficie) 0%, var(--chassi) 100%);
  animation: qg-painel 260ms cubic-bezier(0.2, 0.9, 0.3, 1.1) both;
}
.qg-titulo {
  margin: 0;
  text-align: center;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* a mesma pergunta, de cabeça para baixo, para o jogador de cima */
.qg-titulo-cima { font-size: 1.3rem; transform: rotate(180deg); }
.contra-rival .qg-titulo-cima { display: none; }
.qg-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}
.qg-lado { display: grid; gap: 6px; min-width: 0; }
.qg-foto {
  --cor: var(--cor-tema, var(--cor-base, var(--tinta)));
  justify-self: center;
  display: grid;
  place-items: center;
  width: min(116px, 30vw);
  height: min(116px, 30vw);
  border-radius: 50%;
  background: radial-gradient(circle, var(--cor) 0 50%, rgba(255, 255, 255, 0) 51%);
  font-size: min(100px, 26vw);
}
.qg-nome {
  min-width: 0;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1rem;
  font-weight: 700;
}
.qg-opcao {
  min-height: var(--toque);
  padding: 6px;
  border: 3px solid var(--tinta);
  border-radius: var(--raio-p);
  background: var(--sistema);
  color: #fff;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.1;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 4px 0 var(--tinta);
  transition: transform 110ms ease-out;
}
.qg-opcao[data-ganhou="FORA"] { background: var(--perigo); }
.qg-opcao:active { transform: translate3d(0, 3px, 0); }
.qg-empate {
  width: 76px;
  height: 76px;
  padding: 0;
  border-radius: 50%;
  background: var(--especial);
  color: var(--especial-texto);
  font-size: 0.95rem;
}
.qg-sair { justify-self: end; }
@keyframes qg-fundo { from { opacity: 0; } to { opacity: 1; } }
@keyframes qg-painel {
  from { opacity: 0; transform: translate3d(0, 24px, 0) scale(0.92); }
  to { opacity: 1; transform: none; }
}


/* ---------- VS: o confronto ----------
   Tela cheia dividida na diagonal (clip-path estático), cada metade na cor da
   espécie. A arte entra pelo seu lado, o VS bate no meio com tremida e
   faíscas. Só transform e opacity animam. Sem .anima (movimento reduzido) a
   composição aparece inteira, parada. */
.tela-vs {
  position: fixed;
  inset: 0;
  z-index: 5;
  max-width: 560px;
  margin: 0 auto;
  display: block;
  overflow: hidden;
  background: var(--leitura);
  cursor: pointer;
}
.vs-palco { position: absolute; inset: 0; }
.vs-lado {
  --cor: var(--cor-tema, var(--cor-base, var(--tinta)));
  position: absolute;
  inset: 0;
  display: flex;
  padding: calc(env(safe-area-inset-top, 0px) + 64px) 18px calc(env(safe-area-inset-bottom, 0px) + 22px);
  background-color: var(--cor);
  background-image:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 55%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.05) 0 12px, rgba(255, 255, 255, 0) 12px 26px);
  /* brilho + listra somam no máximo 13% de branco: o texto branco continua
     >= 4.5:1 nas três espécies (scripts/contraste.js, "VS") */
  color: #fff;
}
.vs-lado-0 { clip-path: polygon(0 0, 100% 0, 100% 42%, 0 58%); align-items: flex-start; justify-content: flex-start; }
.vs-lado-1 {
  clip-path: polygon(0 58%, 100% 42%, 100% 100%, 0 100%);
  align-items: flex-end;
  justify-content: flex-end;
  background-image:
    radial-gradient(circle at 70% 78%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 55%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.05) 0 12px, rgba(255, 255, 255, 0) 12px 26px);
}
.vs-conteudo { display: flex; align-items: center; gap: 10px; max-width: 100%; }
.vs-lado-1 .vs-conteudo { flex-direction: row-reverse; text-align: right; }
.vs-textos { min-width: 0; }
.vs-arte {
  flex: none;
  display: grid;
  place-items: center;
  width: min(176px, 44vw, 26vh);
  height: min(176px, 44vw, 26vh);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.26) 0 55%, rgba(255, 255, 255, 0) 56%);
  font-size: min(150px, 38vw, 22vh);
}
.vs-arte .arte-bicho { width: 100%; height: 100%; }
.vs-textos { display: grid; gap: 2px; justify-items: inherit; }
.vs-lado-0 .vs-textos { justify-items: start; }
.vs-lado-1 .vs-textos { justify-items: end; }
.vs-nome {
  font-size: 2rem;
  overflow-wrap: break-word;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.vs-numeros { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 1.05rem; font-weight: 700; }
.vs-lado-1 .vs-numeros { justify-content: flex-end; }
.vs-numeros .icone { color: #ffb3b3; }
.vs-rival {
  padding: 1px 8px;
  border-radius: var(--raio-p);
  background: #fff;
  color: var(--rato);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* a linha da diagonal, na mesma inclinação do corte (clip-path, sem giro) */
.vs-risco {
  position: absolute;
  inset: 0;
  background: #fff;
  clip-path: polygon(0 57.2%, 100% 41.2%, 100% 42.8%, 0 58.8%);
}
.vs-marca {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  margin: -56px 0 0 -56px;
  border: 5px solid var(--tinta);
  border-radius: 50%;
  background-color: var(--especial);
  background-image: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 55%);
  box-shadow: 0 0 0 5px var(--especial);
  color: var(--especial-texto);
  font-size: 2.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.vs-faiscas { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.vs-faiscas i {
  position: absolute;
  left: -7px;
  top: -7px;
  width: 14px;
  height: 14px;
  border: 2px solid var(--tinta);
  border-radius: 3px;
  background: var(--especial);
  opacity: 0;
}
.vs-faiscas i:nth-child(odd) { background: #fff; }

/* a animação: os dois entram pelos lados; o VS bate; a tela treme; faíscas */
.tela-vs.anima .vs-lado-0 .vs-arte { animation: vs-entra-esq 480ms cubic-bezier(0.2, 0.9, 0.3, 1.05) both; }
.tela-vs.anima .vs-lado-1 .vs-arte { animation: vs-entra-dir 480ms cubic-bezier(0.2, 0.9, 0.3, 1.05) 60ms both; }
.tela-vs.anima .vs-lado-0 .vs-textos { animation: vs-entra-esq-leve 420ms cubic-bezier(0.2, 0.9, 0.3, 1) 140ms both; }
.tela-vs.anima .vs-lado-1 .vs-textos { animation: vs-entra-dir-leve 420ms cubic-bezier(0.2, 0.9, 0.3, 1) 200ms both; }
.tela-vs.anima:not(.impacto) .vs-marca { opacity: 0; }
.tela-vs.impacto .vs-marca { animation: vs-bate 420ms cubic-bezier(0.3, 1.4, 0.5, 1) both; }
.tela-vs.impacto .vs-palco { animation: vs-treme 320ms linear; }
.tela-vs.impacto .vs-faiscas i { animation: vs-faisca 560ms cubic-bezier(0.1, 0.7, 0.3, 1) var(--a) both; }
@keyframes vs-entra-esq { from { transform: translate3d(-130%, 0, 0) scale(0.8); } to { transform: none; } }
@keyframes vs-entra-dir { from { transform: translate3d(130%, 0, 0) scale(0.8); } to { transform: none; } }
@keyframes vs-entra-esq-leve { from { opacity: 0; transform: translate3d(-60px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes vs-entra-dir-leve { from { opacity: 0; transform: translate3d(60px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes vs-bate {
  0% { opacity: 0; transform: scale(3.2); }
  55% { opacity: 1; transform: scale(0.86); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes vs-treme {
  0%, 100% { transform: translate3d(0, 0, 0); }
  20% { transform: translate3d(-8px, 4px, 0); }
  40% { transform: translate3d(7px, -4px, 0); }
  60% { transform: translate3d(-5px, 2px, 0); }
  80% { transform: translate3d(3px, -1px, 0); }
}
@keyframes vs-faisca {
  0% { opacity: 1; transform: translate3d(0, 0, 0) scale(1.2); }
  100% { opacity: 0; transform: translate3d(var(--dx), var(--dy), 0) scale(0.3); }
}
@media (max-width: 374px) {
  .vs-nome { font-size: 1.7rem; }
}

/* ---------- Modos de jogo ---------- */

.lista-modos { display: grid; gap: 11px; margin-top: 6px; }
.botao-modo {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 92px;
  padding: 10px 14px 10px 10px;
  background-color: var(--superficie);
  background-image: linear-gradient(170deg, var(--superficie) 0%, var(--superficie-2) 100%);
  color: var(--tinta);
  text-align: left;
  box-shadow: 0 4px 0 var(--chassi-alt);
  overflow: hidden;
}
.botao-modo::after {
  /* faixa diagonal na cor do modo, canto direito */
  content: "";
  position: absolute;
  right: -28px;
  top: -10px;
  bottom: -10px;
  width: 64px;
  background: var(--cor-modo);
  opacity: 0.16;
  transform: skewX(-18deg);
}
.botao-modo[data-modo="ROLAR"] { --cor-modo: var(--ataque); }
.botao-modo[data-modo="ARENA"] { --cor-modo: var(--defesa); }
.botao-modo[data-modo="MIRA"] { --cor-modo: #b3005c; }
.botao-modo-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 62px;
  height: 62px;
  border: var(--borda) solid var(--tinta);
  border-radius: var(--raio-p);
  background-color: var(--cor-modo);
  background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.15) 100%);
  color: #fff;
  font-size: 2.1rem;
}
.botao-modo-texto { display: grid; gap: 1px; position: relative; }
.botao-modo-nome { font-size: 1.45rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.botao-modo-explicacao { font-size: 0.9rem; font-weight: 600; line-height: 1.22; color: var(--tinta-media); }
.botao-colecao { margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.botao-espera {
  background-color: var(--escudo-fundo);
  background-image: none;
  color: var(--tinta);
  border-color: var(--escudo);
  font-size: 1.05rem;
  box-shadow: 0 4px 0 #b9c9f4;
}
.botao-espera .icone { font-size: 1.5rem; color: var(--escudo); }
.dupla { margin: 0; font-size: 1.3rem; text-align: center; font-weight: 600; }


/* ---------- A luta ----------
   O movimento dos bichinhos (bote, choque, voo para trás) é do JS, com Web
   Animations medindo a tela (js/app.js, animarLuta). Aqui ficam as fases
   (classes em #tela-batalha), os efeitos e a pose final de cada papel. */

/* Pose final (a mesma do último quadro do JS, em POSE): vale depois que a
   animação acaba ou é pulada, e é o que o movimento reduzido mostra. */
.fase-final .metade[data-papel="venceu"] .bicho-luta { transform: translate3d(0, 0, 0) scale(1.06) rotate(0deg); }
.fase-final .metade[data-papel="perdeu"] .bicho-luta { transform: translate3d(0, 10px, 0) scale(0.88) rotate(-9deg); }
.fase-final .metade[data-papel="tombou"] .bicho-luta { transform: translate3d(0, 16px, 0) scale(0.86) rotate(-84deg); }
/* na metade do Rato (sem giro) "para longe do meio" é para cima: quadro() no JS */
.fase-final .metade-rival[data-papel="perdeu"] .bicho-luta { transform: translate3d(0, -10px, 0) scale(0.88) rotate(9deg); }
.fase-final .metade-rival[data-papel="tombou"] .bicho-luta { transform: translate3d(0, -16px, 0) scale(0.86) rotate(84deg); }

.halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 9px solid var(--escudo);
  border-radius: 50%;
  background: rgba(23, 70, 200, 0.15);
  opacity: 0;
  pointer-events: none;
}
.fase-impacto .metade[data-papel="protegido"] .halo { animation: halo 520ms ease-out; }

.flutuantes {
  position: absolute;
  right: -4px;
  top: 0;
  z-index: 5; /* o número do dano nunca fica atrás de um efeito */
  display: flex;
  gap: 6px;
  pointer-events: none;
}
.flutua {
  font-size: 2.3rem;
  font-weight: 700;
  opacity: 0;
  letter-spacing: -0.02em;
  /* contorno branco: o número sobrevive a qualquer fundo */
  text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff, 0 3px 0 #fff, 0 -3px 0 #fff;
  animation: flutuar 620ms cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
.flutua.dano { color: var(--perigo); }
.flutua.cura { color: var(--cura); }
.flutua.bloqueado { color: var(--escudo); font-size: 2.5rem; }
.flutua.bloqueado s { text-decoration-thickness: 4px; }
/* golpe forte: o número de dano vem maior */
.flutua.forte { font-size: 3rem; }

/* Os detalhes da rodada viram selos: ícone + duas ou três palavras. */
.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px 4px 8px;
  border: var(--borda) solid var(--cor-etiqueta, var(--tinta-media));
  border-radius: var(--raio-p);
  background: var(--fundo-etiqueta, var(--superficie));
  color: var(--tinta);
  font-size: 1rem;
  font-weight: 700;
}
.etiqueta .icone { font-size: 1.4rem; color: var(--cor-etiqueta, var(--tinta-media)); flex: none; }
.etiqueta-especial { --cor-etiqueta: #8a6a00; --fundo-etiqueta: #fff6d6; }
.etiqueta-especial .icone { color: var(--especial); stroke: var(--tinta); stroke-width: 1.2px; paint-order: stroke; }
.etiqueta-contra { --cor-etiqueta: var(--defesa); --fundo-etiqueta: var(--escudo-fundo); }
.etiqueta-tropeco { --cor-etiqueta: var(--tropeco); --fundo-etiqueta: #f4e6ff; }
.etiqueta-escudo { --cor-etiqueta: var(--escudo); --fundo-etiqueta: var(--escudo-fundo); }
.etiqueta-dano, .etiqueta-recuo { --cor-etiqueta: var(--perigo); --fundo-etiqueta: var(--perigo-fundo); }
.etiqueta-cura { --cor-etiqueta: var(--cura); --fundo-etiqueta: #e2f5e6; }
.etiqueta-alvo { --cor-etiqueta: #b3005c; --fundo-etiqueta: #ffe6f1; }
.etiqueta-fora, .etiqueta-errou, .etiqueta-empate { --cor-etiqueta: var(--tinta-media); --fundo-etiqueta: var(--chassi-alt); }
.etiqueta-girou { --cor-etiqueta: var(--sistema); --fundo-etiqueta: #dff1f6; }

/* Só para leitor de tela: a rodada por extenso. */
.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Pular / estado final: nada anima */
.sem-transicao *, .sem-transicao *::before, .sem-transicao *::after {
  transition: none !important;
  animation: none !important;
}
.sem-transicao .flutuantes { display: none; }

@keyframes halo {
  0% { opacity: 0.95; transform: scale(0.2); }
  100% { opacity: 0; transform: scale(1.7); }
}
@keyframes flutuar {
  0% { opacity: 0; transform: translate3d(0, 12px, 0) scale(0.7); }
  22% { opacity: 1; transform: translate3d(0, -4px, 0) scale(1.15); }
  70% { opacity: 1; transform: translate3d(0, -20px, 0) scale(1); }
  100% { opacity: 0; transform: translate3d(0, -40px, 0) scale(0.95); }
}


/* ---------- Efeitos do confronto ----------
   Clarão e anel no ponto de encontro, em toda rodada com golpe. O especial
   tem cena própria antes da luta (.cena-especial, mais abaixo). Tudo em
   transform/opacity. */

/* o ponto de encontro: centro exato da faixa do meio */
.choque {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  width: 0;
  height: 0;
  pointer-events: none;
}
.choque > * {
  position: absolute;
  display: none;
  opacity: 0;
  pointer-events: none;
}
.choque .clarao { display: block; }

/* cor do golpe: a do especial quando ele venceu */
#tela-batalha { --cor-efeito: var(--especial); }
#tela-batalha[data-efeito="TAT01"] { --cor-efeito: var(--escudo); }   /* Bola de Ferro */
#tela-batalha[data-efeito="SAP02"] { --cor-efeito: #d1006b; }         /* Língua Chicote */

.clarao {
  left: -60px;
  top: -60px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 32%, var(--cor-efeito) 33% 56%, rgba(255, 255, 255, 0) 60%);
}
.fase-impacto .clarao { animation: clarao 240ms ease-out; }
@keyframes clarao {
  0% { opacity: 0; transform: scale(0.4); }
  30% { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(1.6); }
}

[data-golpe="dano"] .choque .onda, [data-golpe="bloqueado"] .choque .onda { display: block; }
/* anel de choque, no ponto de encontro */
.onda {
  left: -26px;
  top: -26px;
  width: 52px;
  height: 52px;
  border: 7px solid var(--cor-efeito);
  border-radius: 50%;
}
.fase-impacto .onda { animation: onda 440ms cubic-bezier(0.1, 0.7, 0.3, 1) both; }
@keyframes onda {
  0% { opacity: 0.95; transform: scale(0.2); }
  100% { opacity: 0; transform: scale(4.2); }
}

/* ---------- A cena do especial ----------
   Só nas rodadas de especial, antes da luta (tocarCena em js/app.js, que
   posiciona tudo medindo a tela). Formas, cores e movimentos diferentes:
     Língua Chicote — língua rosa, fina e elástica + coração vermelho
     Bola de Ferro  — esfera cinza e pesada que cai + poeira + escudo azul
     genérico       — estrela amarela */
.cena-especial {
  position: absolute;
  inset: 0;
  z-index: 9;
  overflow: hidden;
  pointer-events: none;
}
.cena-fundo { position: absolute; inset: 0; background: rgba(5, 10, 18, 0.8); opacity: 0; }
/* cada peça nasce no canto (0, 0), centrada pela margem; o JS leva com transform */
.cena-arte, .fx-lingua, .fx-coracao, .fx-bola, .fx-poeira, .fx-domo, .fx-estrela {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
.fx-lingua, .fx-bola, .fx-poeira, .fx-domo, .fx-estrela { display: none; }
.cena-especial[data-fx="lingua"] .fx-lingua,
.cena-especial[data-fx="bola"] .fx-bola,
.cena-especial[data-fx="bola"] .fx-poeira,
.cena-especial[data-fx="bola"] .fx-domo,
.cena-especial[data-fx="estrela"] .fx-estrela { display: block; }
.cena-arte {
  --cor: var(--cor-tema, var(--cor-base, var(--tinta)));
  display: grid;
  place-items: center;
  width: 190px;
  height: 190px;
  margin: -95px 0 0 -95px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--cor) 0 50%, rgba(255, 255, 255, 0) 51%);
  font-size: 160px;
}
.cena-arte .arte-bicho { width: 100%; height: 100%; }
/* o nome do especial: faixa amarela no meio da tela, uma linha para cada jogador */
.cena-nome {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  display: grid;
  grid-template-rows: 1fr 1fr;
  align-items: center;
  justify-items: center;
  height: 112px;
  margin: -56px 0 0;
  border-top: 4px solid var(--tinta);
  border-bottom: 4px solid var(--tinta);
  background-color: var(--especial);
  background-image: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.35) 0 10px, rgba(255, 255, 255, 0) 10px 22px);
  color: var(--especial-texto);
  opacity: 0;
}
.cena-nome span {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.cena-nome .cn-cima { transform: rotate(180deg); }
.contra-rival .cena-nome { grid-template-rows: 1fr; height: 64px; margin-top: -32px; }
.contra-rival .cena-nome .cn-cima { display: none; }
/* Língua Chicote: rosa, fina, com a ponta redonda. A base fica no ponto de
   partida (bottom: 100% põe a borda de baixo em y = 0) e ela estica em scaleY. */
.fx-lingua {
  top: auto;
  bottom: 100%;
  left: -13px;
  width: 26px;
  border: 3px solid var(--tinta);
  border-radius: 999px;
  background: linear-gradient(0deg, #d1006b 0%, #ff6fa8 100%);
  transform-origin: 50% 100%;
}
.fx-lingua::after {
  content: "";
  position: absolute;
  left: -10px;
  top: -18px;
  width: 40px;
  height: 40px;
  border: 3px solid var(--tinta);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #ffc2da 0 18%, #ff3d8b 50%, #d1006b 100%);
}
.fx-coracao {
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  color: var(--perigo);
  font-size: 60px;
  line-height: 1;
}
.fx-coracao .icone { width: 60px; height: 60px; stroke: #fff; stroke-width: 2.4px; paint-order: stroke; }
/* Bola de Ferro: esfera cinza, pesada, com uma faixa de rebites */
.fx-bola {
  width: 96px;
  height: 96px;
  margin: -48px 0 0 -48px;
  border: 5px solid var(--tinta);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, #eef1f5 0 9%, rgba(238, 241, 245, 0) 22%),
    repeating-linear-gradient(90deg, rgba(10, 17, 32, 0.55) 0 6px, rgba(10, 17, 32, 0) 6px 18px) 0 44px / 100% 10px no-repeat,
    radial-gradient(circle at 40% 36%, #9aa3b1 0%, #5b6474 45%, #252b36 100%);
}
.fx-poeira {
  width: 140px;
  height: 140px;
  margin: -70px 0 0 -70px;
  border: 12px solid #8a7a66;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(138, 122, 102, 0) 45%, rgba(138, 122, 102, 0.5) 100%);
}
.fx-domo {
  width: 220px;
  height: 220px;
  margin: -110px 0 0 -110px;
  border: 10px solid var(--escudo);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(221, 230, 255, 0) 50%, rgba(221, 230, 255, 0.6) 100%);
}
.fx-estrela {
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  fill: var(--especial);
  stroke: var(--tinta);
  stroke-width: 5px;
  stroke-linejoin: round;
  overflow: visible;
}

/* Tropeço: o bichinho tomba (JS) e o carimbo bate na metade de quem tropeçou */
.estampa {
  position: absolute;
  left: 22%;
  top: 50%;
  z-index: 4;
  display: block;
  padding: 5px 13px;
  border: 3px solid var(--tinta);
  border-radius: var(--raio-p);
  background: var(--tropeco);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(1);
  pointer-events: none;
}
.estampa:empty { display: none; }
.fase-impacto .metade[data-papel="tombou"] .estampa { animation: carimbo 560ms cubic-bezier(0.2, 1.5, 0.4, 1) 70ms both; }
/* o carimbo sai quando entra o veredito "Tropeçou!", que fica no lugar dele */
.fase-texto .estampa { visibility: hidden; }
@keyframes carimbo {
  0% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(2.4); }
  50% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(0.9); }
  68% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1.08); }
  100% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); }
}



/* ---------- Fim ----------
   Só aqui aparecem VENCEU! e PERDEU. Tela dividida como a batalha: cada
   metade mostra o resultado de quem está daquele lado. A do Jogador 1 (em
   cima) gira 180° para quem está do outro lado da mesa — é o ÚNICO texto
   girado do jogo (test/orientacao.test.js). Contra o Rato não gira: é uma
   criança só. O meio (botões) fica de pé. */

.tela-fim {
  background-color: var(--chassi);
  background-image: linear-gradient(180deg, var(--chassi) 0%, var(--chassi-alt) 50%, var(--chassi) 100%);
}
.fim-metade {
  --cor: var(--cor-tema, var(--cor-base, var(--tinta)));
  position: relative;
  display: flex;
  min-height: 0;
  padding: 6px var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 8px);
}
.fim-metade-0 { padding: calc(env(safe-area-inset-top, 0px) + 8px) var(--gutter) 6px; }
.fim-metade-0 .fim-conteudo { transform: rotate(180deg); }
.tela-fim.contra-rival .fim-metade-0 .fim-conteudo { transform: none; }

.fim-conteudo {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 10px 12px;
  border: var(--borda) solid var(--tinta);
  border-radius: var(--raio);
  background-color: var(--superficie-2);
  text-align: center;
}
/* faixa da espécie, do lado de baixo de quem lê */
.fim-conteudo::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 8px;
  background: var(--cor);
}
.fim-metade[data-papel="venceu"] .fim-conteudo {
  border-width: 5px;
  background-color: #fffbe6;
  background-image: radial-gradient(circle at 50% 42%, #fff1a8 0%, rgba(255, 241, 168, 0) 62%);
}
.fim-conteudo > * { position: relative; z-index: 1; }
.fim-conteudo > .confete { position: absolute; z-index: 2; }

.fim-selo {
  margin: 0;
  padding: 4px 18px;
  border: 4px solid var(--tinta);
  border-radius: var(--raio);
  font-size: clamp(1.4rem, 4.6vh, 2.4rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 4px 0 var(--tinta);
}
.fim-selo-venceu {
  background-color: var(--especial);
  background-image: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.35) 0 10px, rgba(255, 255, 255, 0) 10px 22px);
  color: var(--especial-texto);
}
.fim-selo-perdeu { background: var(--perigo-fundo); color: var(--perigo); border-color: var(--perigo); box-shadow: 0 4px 0 var(--perigo); }
.fim-selo-empate { background: var(--superficie); color: var(--tinta); }

.fim-icone {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 4px;
  min-height: 0;
  font-size: min(3.6rem, 8vh);
  line-height: 1;
  color: #a87400;
}
.fim-arte {
  --tam: min(40vw, 19vh);
  display: grid;
  place-items: center;
  width: var(--tam);
  height: var(--tam);
  border-radius: 50%;
  background: radial-gradient(circle, var(--cor) 0 50%, rgba(255, 255, 255, 0) 51%);
  font-size: calc(var(--tam) * 0.87);
}
.fim-metade[data-papel="perdeu"] .fim-arte { --tam: min(30vw, 14vh); }
.fim-arte .arte-bicho { width: 100%; height: 100%; }
.fim-nome {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.fim-quem {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--tinta-media);
}
.fim-recado { margin: 0; font-size: 0.95rem; color: var(--tinta-media); }
.fim-conteudo .vida { width: min(100%, 300px); margin-top: 2px; padding: 5px 8px; }
.fim-conteudo .vida-trilho { height: 16px; }
.fim-entrada { animation: entrada 600ms cubic-bezier(0.2, 0.8, 0.3, 1) both; }

.fim-centro {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 4px;
  justify-items: center;
  padding: 2px var(--gutter);
  text-align: center;
}
.fim-sub, .fim-placar { margin: 0; font-size: 0.8rem; font-weight: 700; color: var(--tinta-media); line-height: 1.2; }
.fim-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.fim-botoes .botao { padding: 8px 10px; font-size: 1.05rem; }

/* tela baixa: o recado sai, o resto continua */
@media (max-height: 700px) {
  .fim-recado { display: none; }
}

@keyframes entrada {
  0% { opacity: 0; transform: scale(0.6); }
  70% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}

/* confete: cai uma vez, dentro da metade de quem venceu (as posições vêm do
   JS, sem sorteio). Na metade girada ele cai "para baixo" de quem lê. */
.confete { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.confete i {
  position: absolute;
  top: -24px;
  left: var(--x);
  width: 11px;
  height: 18px;
  border-radius: 2px;
  background: var(--c);
  opacity: 0;
  animation: confete var(--d) cubic-bezier(0.25, 0.5, 0.45, 1) var(--a) forwards;
}
@keyframes confete {
  0% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--dx), 55vh, 0) rotate(var(--r)); }
}

/* ---------- Espera da segunda peça / desbloqueio ---------- */

.tela-centro { text-align: center; }
.chamada {
  margin: 3vh 0 0;
  font-size: 1.4rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--sistema);
}

/* os raios passam da largura da carta de propósito; a tela segura o transbordo
   para não criar rolagem lateral no celular */
#tela-desbloqueio { overflow: hidden; }

/* Carta de bichinho novo: o primeiro contato depois de escanear a peça */
.carta-nova {
  --cor: var(--cor-tema, var(--cor-base, var(--tinta)));
  position: relative;
  display: grid;
  justify-items: center;
  padding: 10px;
  animation: carta-nova-entra 620ms cubic-bezier(0.18, 0.9, 0.3, 1.05) both;
}
/* raios atrás da carta: aparecem uma vez e ficam parados */
.carta-nova-raios {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 150%;
  aspect-ratio: 1;
  transform: translate3d(-50%, -50%, 0) scale(0.3);
  background: repeating-conic-gradient(from 0deg, var(--cor) 0deg 7deg, rgba(255, 255, 255, 0) 7deg 20deg);
  opacity: 0;
  border-radius: 50%;
  pointer-events: none;
  animation: raios-abrem 900ms cubic-bezier(0.1, 0.8, 0.3, 1) 120ms both;
  /* máscara radial: some nas bordas sem precisar de imagem */
  -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 0.55) 26%, rgba(0, 0, 0, 0) 62%);
  mask-image: radial-gradient(circle, rgba(0, 0, 0, 0.55) 26%, rgba(0, 0, 0, 0) 62%);
}
@keyframes raios-abrem {
  from { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(0.3) rotate(-25deg); }
  to { opacity: 0.35; transform: translate3d(-50%, -50%, 0) scale(1) rotate(0deg); }
}
@keyframes carta-nova-entra {
  0% { opacity: 0; transform: translate3d(0, 24px, 0) scale(0.82); }
  100% { opacity: 1; transform: none; }
}
.carta-nova-chapa {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  width: 100%;
  padding: 16px 16px 18px;
  border: var(--borda) solid var(--tinta);
  border-radius: var(--raio);
  background-color: var(--superficie);
  background-image:
    linear-gradient(150deg, var(--holo-1, rgba(11, 95, 122, 0.22)) 0%, rgba(255, 255, 255, 0) 45%),
    linear-gradient(28deg, var(--holo-2, rgba(11, 95, 122, 0.14)) 0%, rgba(255, 255, 255, 0) 40%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.6) 0 7px, rgba(255, 255, 255, 0) 7px 15px),
    linear-gradient(180deg, var(--superficie) 0%, var(--superficie-2) 100%);
  box-shadow: 0 8px 0 var(--chassi-alt);
  overflow: hidden;
}
.carta-nova-chapa::before {
  content: "";
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  height: 11px;
  background: var(--cor);
}
.carta-nova-chapa > * { position: relative; }
.carta-nova-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--leitura);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.carta-nova-chip .icone { font-size: 1.1rem; color: var(--sistema-neon); }
.carta-nova .cartao-avatar { margin-top: 6px; box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.8); }
/* com arte: imagem grande sobre um disco da cor da espécie, entra pulando (0,7s) */
.carta-nova-arte {
  display: grid;
  place-items: center;
  width: min(200px, 52vw);
  height: min(200px, 52vw);
  margin-top: 2px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--cor-tema, var(--cor-base, var(--tinta))) 0 58%, rgba(255, 255, 255, 0) 59%);
}
.carta-nova-arte .arte-bicho {
  animation: arte-entra 700ms cubic-bezier(0.2, 1.3, 0.4, 1) 100ms both;
}
@keyframes arte-entra {
  0% { opacity: 0; transform: translate3d(0, 40px, 0) scale(0.4); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
.carta-nova-nome { font-size: 2rem; font-weight: 700; line-height: 1.05; }
.carta-nova-especie {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-media);
}
.carta-nova-atributos { display: flex; gap: 9px; margin-top: 6px; }
.atributo {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 13px;
  border: 2px solid var(--tinta);
  border-radius: var(--raio-p);
  background: var(--leitura);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.atributo b { font-size: 1.5rem; letter-spacing: 0; }
.atributo-vida b { color: #ff8a8a; }
.atributo-forca b { color: var(--sistema-neon); }
.carta-nova-especial { margin-top: 8px; font-size: 1rem; font-weight: 600; color: var(--tinta-media); line-height: 1.25; }
/* varredura holográfica: passa uma vez */
.carta-nova-brilho {
  position: absolute;
  inset: -40% -60%;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 58%);
  transform: translate3d(-120%, 0, 0);
  pointer-events: none;
  animation: varredura 780ms ease-out 360ms both;
}
@keyframes varredura {
  from { transform: translate3d(-120%, 0, 0); }
  to { transform: translate3d(120%, 0, 0); }
}

.cartao-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border: 4px solid var(--tinta);
  border-radius: 50%;
  background-color: var(--cor-tema, var(--cor-base, var(--tinta)));
  background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.35) 0%, rgba(0, 0, 0, 0.2) 100%);
  color: #fff;
  font-size: 2.9rem;
  font-weight: 700;
  line-height: 1;
  overflow: hidden;
}
.cartao-avatar .bichinho { height: 78px; margin-bottom: -8px; }

/* espera: a peça lida, esperando a segunda */
.espera-selo { display: flex; justify-content: center; margin-top: 3vh; }
.espera-arte { width: min(180px, 46vw); height: min(180px, 46vw); }
.espera-arte .arte-bicho { animation: arte-entra 700ms cubic-bezier(0.2, 1.3, 0.4, 1) 60ms both; }
.espera-qr { font-size: 4rem; line-height: 1; color: var(--sistema); }
/* moldura de leitura: quatro cantos, como visor de scanner */
.mira-leitura {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.mira-leitura::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 4px solid var(--sistema);
  border-radius: var(--raio-p);
}
/* linha de leitura descendo e subindo (só transform) */
.mira-leitura::after {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  top: 16px;
  height: 4px;
  background: var(--sistema);
  opacity: 0.85;
  animation: varrer-linha 2.2s ease-in-out infinite alternate;
}
@keyframes varrer-linha {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, 52px, 0); }
}
.espera-qr { font-size: 4rem; }
.espera-qr .icone { position: relative; }
#tela-espera .erro { text-align: left; }

/* ---------- Minha coleção ---------- */

.contador {
  margin: 0;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.grade-colecao { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
/* entrada escalonada: as cartas "chegam" uma a uma, uma vez só */
.carta { animation: carta-entra 320ms cubic-bezier(0.2, 0.85, 0.3, 1) both; animation-delay: calc(var(--i, 0) * 34ms); }
@keyframes carta-entra {
  from { opacity: 0; transform: translate3d(0, 18px, 0) scale(0.93); }
  to { opacity: 1; transform: none; }
}
/* brilho que atravessa a carta uma vez (holo nas descobertas, scan nas travadas) */
.carta::after {
  content: "";
  position: absolute;
  inset: -40% -60%;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 44%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 56%);
  transform: translate3d(-130%, 0, 0);
  pointer-events: none;
  animation: varredura 620ms ease-out both;
  animation-delay: calc(var(--i, 0) * 34ms + 180ms);
}
.carta-misterio::after {
  background: linear-gradient(115deg, rgba(58, 225, 255, 0) 44%, rgba(58, 225, 255, 0.5) 50%, rgba(58, 225, 255, 0) 56%);
}
.carta {
  --cor: var(--cor-tema, var(--cor-base, var(--tinta)));
  position: relative;
  display: grid;
  gap: 3px;
  justify-items: center;
  padding: 14px 9px 12px;
  border: var(--borda) solid var(--tinta);
  border-radius: var(--raio);
  background-color: var(--superficie);
  /* holográfico: faixas diagonais na cor da espécie, tudo estático */
  background-image:
    linear-gradient(150deg, var(--holo-1, rgba(11, 95, 122, 0.2)) 0%, rgba(255, 255, 255, 0) 42%),
    linear-gradient(30deg, var(--holo-2, rgba(11, 95, 122, 0.12)) 0%, rgba(255, 255, 255, 0) 38%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.55) 0 6px, rgba(255, 255, 255, 0) 6px 14px),
    linear-gradient(180deg, var(--superficie) 0%, var(--superficie-2) 100%);
  text-align: center;
  overflow: hidden;
}
/* topo colorido da espécie */
.carta::before {
  content: "";
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  height: 9px;
  background: var(--cor);
}
.carta > * { position: relative; }
.carta .carta-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  margin-top: 4px;
  border: var(--borda) solid var(--tinta);
  border-radius: 50%;
  background-color: var(--cor);
  background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.35) 0%, rgba(0, 0, 0, 0.2) 100%);
  color: #fff;
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1;
  overflow: hidden;
}
.carta .carta-avatar .bichinho { height: 58px; margin-bottom: -6px; }
/* com arte: sem moldura redonda, a imagem é o retrato */
.carta .carta-avatar.com-arte {
  width: 88px;
  height: 88px;
  margin-top: 0;
  border: 0;
  background: radial-gradient(circle, var(--cor) 0 44%, rgba(255, 255, 255, 0) 45%);
  overflow: visible;
}
.carta-nome { font-size: 1.2rem; font-weight: 700; }
.carta-especie {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--tinta-media);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.carta-status { display: flex; gap: 10px; font-weight: 700; font-size: 0.95rem; }
.carta-status .icone-vida { color: var(--perigo); }
.carta-especial { font-size: 0.8rem; font-weight: 600; color: var(--tinta-media); line-height: 1.25; }
.carta-especial b { color: var(--tinta); }
.carta-placar {
  margin-top: 3px;
  padding: 2px 8px;
  background: var(--leitura);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 999px;
}

/* carta bloqueada: slot de dados esperando leitura, não erro de carregamento */
.carta-misterio {
  background-color: var(--leitura);
  background-image:
    radial-gradient(90% 60% at 50% 0%, rgba(58, 225, 255, 0.22) 0%, rgba(58, 225, 255, 0) 70%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, rgba(255, 255, 255, 0) 1px 4px);
  border-color: var(--tinta);
  color: #fff;
}
.carta-misterio::before { background: var(--sistema-neon); }
.carta-misterio .carta-avatar {
  background-color: #16233a;
  background-image: none;
  border-color: var(--sistema-neon);
  border-style: dashed;
  color: var(--sistema-neon);
  font-size: 2.8rem;
  animation: respira 2.6s ease-in-out infinite alternate;
}
.carta-misterio .carta-nome { font-size: 1.5rem; letter-spacing: 0.22em; color: var(--sistema-neon); }
.carta-dica {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.carta-dica .icone { font-size: 1.3rem; flex: none; color: var(--sistema-neon); }
@keyframes respira {
  from { opacity: 0.75; transform: scale(1); }
  to { opacity: 1; transform: scale(1.06); }
}

/* Série futura: a mesma carta travada, com o aviso no lugar do nome */
.carta-em-breve .carta-nome { font-size: 1.25rem; letter-spacing: 0.12em; }
.carta-em-breve .carta-dica { font-size: 0.85rem; letter-spacing: 0.14em; }

/* ---------- Selo de Fundador (etiqueta com &f=N) ----------
   Borda dourada dupla (estática) e o selo "Fundador #N" no topo da carta. */
.carta.carta-fundador, .carta-fundador .carta-nova-chapa {
  border-color: var(--ouro);
  box-shadow: 0 0 0 3px var(--especial), 0 0 0 6px var(--ouro);
}
.carta.carta-fundador { margin: 6px; }
.carta-fundador .carta-nova-chapa { box-shadow: 0 0 0 3px var(--especial), 0 0 0 6px var(--ouro), 0 10px 0 var(--chassi-alt); }
.selo-fundador {
  display: inline-flex;
  align-items: center;
  justify-self: center;
  gap: 5px;
  padding: 2px 10px 2px 7px;
  border: 2px solid var(--tinta);
  border-radius: 999px;
  background: var(--especial);
  color: var(--especial-texto);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.selo-fundador .icone { font-size: 1.05rem; color: #fff; stroke: var(--tinta); stroke-width: 1.4px; paint-order: stroke; }
.carta-nova .selo-fundador { font-size: 0.9rem; }
.carta .selo-fundador { padding: 1px 8px 1px 5px; font-size: 0.7rem; letter-spacing: 0.03em; }

/* ---------- Botão de som (tudo / só efeitos / mudo) ----------
   Sempre visível no canto; na batalha ele passa para a faixa do meio, para
   não cobrir os botões do jogador de cima. Mudo fica cinza sólido, nunca
   transparente. */
.botao-som {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  right: max(8px, calc((100vw - 560px) / 2 + 8px));
  z-index: 6;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 3px solid var(--tinta);
  border-radius: var(--raio-p);
  background: var(--superficie);
  color: var(--tinta);
  font-size: 28px;
  cursor: pointer;
  touch-action: manipulation;
}
.botao-som[data-modo="mudo"] { color: var(--tinta-media); background: var(--chassi-alt); }
.botao-som:focus-visible { outline: 4px solid var(--sistema); outline-offset: 2px; }
.em-batalha #btn-som { display: none; }
/* no fim os dois cantos são das metades; a fanfarra é curta e a próxima tela tem o botão */
.em-fim #btn-som { display: none; }
.botao-som.botao-som-faixa {
  position: absolute;
  top: 0;
  right: auto;
  left: var(--gutter);
  width: 44px;
  height: 44px;
  border-color: #8a96ab;
  background: var(--leitura);
  color: #fff;
  font-size: 24px;
}
.botao-som.botao-som-faixa[data-modo="mudo"] { color: #c3cad6; }
/* espaço para o botão do canto não cobrir títulos */
.tela > h2:first-child, #escolha-titulo { padding-right: 52px; }
#tela-inicio .logo-simbolos, .tela-centro > :first-child { margin-top: 58px; }

/* ---------- Tutorial do primeiro contato (js/tutorial.js) ----------
   Uma tela por passo: figura, texto grande, um botão principal. Os links de
   baixo (Ouvir, Não leu?, Só tenho 1, Pular) são secundários e >= 48px. */

.botao-rever { align-self: center; margin-top: 4px; }

.tutorial-trilha { display: flex; justify-content: center; gap: 10px; margin: 0; }
.tutorial-trilha .ponto {
  width: 14px;
  height: 14px;
  border: 3px solid var(--tinta-media);
  border-radius: 50%;
  background: var(--superficie);
}
.tutorial-trilha .ponto.feito { background: var(--tinta-media); }
.tutorial-trilha .ponto.atual { border-color: var(--tinta); background: var(--especial); transform: scale(1.25); }

.tutorial-figura { display: grid; place-items: center; min-height: 150px; }
.tela-tutorial .tutorial-titulo {
  margin: 0;
  font-size: 1.7rem;
  line-height: 1.15;
  text-transform: none;
  letter-spacing: 0.01em;
}
.tela-tutorial .tutorial-titulo::before { display: none; }
.tutorial-texto { margin: 0; font-size: 1.35rem; font-weight: 700; line-height: 1.3; }
.tutorial-extra { margin: 0; font-size: 1.1rem; font-weight: 600; color: var(--tinta-media); }
.tela-tutorial .erro { margin: 0; text-align: left; }
.tutorial-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.tutorial-ajuda { padding: 12px 14px 12px 8px; text-align: left; }
.tutorial-ajuda-titulo { margin: 0 0 6px 8px; font-weight: 700; }
.tutorial-ajuda ol { margin: 0; padding-left: 30px; display: grid; gap: 6px; font-size: 1.05rem; }

/* Figura das boas-vindas e da partida: os dois bichinhos e o que está no meio */
.figura-dupla { display: flex; align-items: center; justify-content: center; gap: 12px; }
.figura-bicho { display: grid; place-items: center; width: 110px; height: 140px; font-size: 130px; }
.figura-bicho .arte-bicho { width: 110px; height: 110px; object-fit: contain; }
.figura-juiz, .figura-mais { display: grid; place-items: center; font-size: 64px; color: var(--leitura); }
.figura-mais { font-size: 48px; color: var(--sistema); }
.figura-vs { font-size: 2rem; font-weight: 700; color: var(--perigo); }

/* Encostar: o pião com a face do X destacada e o celular chegando.
   iPhone: o celular vem de lado, com o topo (destacado) na face do X.
   Android: o celular de costas, com o círculo do NFC sobre a face do X. */
.encostar { position: relative; width: 230px; height: 170px; }
.encostar-peca { position: absolute; left: 120px; top: 4px; font-size: 160px; line-height: 0; }
.encostar-peca .bichinho { height: 160px; }
/* a placa do peito fica em x 17..47, y 74..104 do viewBox 64x120 */
.encostar-alvo {
  position: absolute;
  left: 137px;
  top: 96px;
  width: 52px;
  height: 52px;
  border: 5px solid var(--especial);
  border-radius: 16px;
  box-shadow: 0 0 0 3px var(--tinta);
  animation: alvo-pulsa 1100ms ease-in-out infinite alternate;
}
.encostar-onda {
  position: absolute;
  left: 104px;
  top: 104px;
  width: 36px;
  height: 36px;
  border: 4px solid var(--sistema);
  border-left-color: transparent;
  border-radius: 50%;
  animation: onda-nfc 1100ms ease-out infinite;
}
.encostar-celular { position: absolute; left: 36px; top: 76px; line-height: 0; color: var(--leitura); transform: rotate(90deg); }
.encostar-celular .celular { width: 50px; height: 90px; }
.encostar-costas .encostar-celular { left: 60px; top: 70px; transform: rotate(-14deg); }
.encostar-costas .encostar-onda { left: 118px; top: 104px; }
.celular-destaque { stroke: var(--especial); }
@keyframes alvo-pulsa {
  from { transform: scale(1); }
  to { transform: scale(1.12); }
}
@keyframes onda-nfc {
  from { opacity: 1; transform: scale(0.6); }
  to { opacity: 0; transform: scale(1.5); }
}

/* Comemoração do tutorial: curta — a arte, o nome e o selo de Fundador; a
   chamada é uma frase ("Bocão entrou na sua coleção!"). */
#tela-desbloqueio.celebracao .chamada { letter-spacing: 0.06em; line-height: 1.2; }
#tela-desbloqueio.celebracao :is(.carta-nova-chip, .carta-nova-atributos, .carta-nova-especial) { display: none; }

/* Fim da primeira partida: recado e próximos desafios, no meio, de pé */
.fim-tutorial { display: grid; gap: 4px; justify-items: center; width: 100%; }
.fim-tutorial-texto { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.2; }
.fim-desafios { display: grid; grid-template-columns: auto 1fr 1fr; align-items: center; gap: 8px; width: 100%; }
.fim-desafios-rotulo { font-size: 0.78rem; font-weight: 700; line-height: 1.15; color: var(--tinta-media); text-align: left; }
.tela-fim.no-tutorial .fim-sub { display: none; }
.botao-desafio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  min-height: 44px;
  padding: 4px 8px;
  font-size: 0.95rem;
}

/* ---------- Batalha: "?" (quem vence quem) e dicas da primeira partida ---------- */

/* O "?" divide o canto esquerdo da faixa com o som: um em cima do outro. */
.botao-regras {
  position: absolute;
  left: var(--gutter);
  bottom: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid #8a96ab;
  border-radius: var(--raio-p);
  background: var(--leitura);
  color: #fff;
  font: inherit;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}
.botao-regras:focus-visible { outline: 4px solid var(--sistema-neon); outline-offset: 2px; }

.painel-regras {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: grid;
  place-items: center;
  padding: 12px var(--gutter);
  background: rgba(5, 10, 18, 0.76);
}
.regras-caixa { display: grid; gap: 12px; width: 100%; max-width: 420px; padding: 16px 14px 14px; }
.regras-titulo { margin: 0; font-size: 1.35rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; text-align: center; }
.regras-lista { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 1.05rem; }
.regras-lista li { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; }
.regras-lista li.regra-sozinha { grid-template-columns: auto 1fr; }
.regras-lista li.regra-texto { display: block; font-size: 0.95rem; }
.regra-meio { font-size: 0.85rem; color: var(--tinta-media); white-space: nowrap; }
.regra-simbolo { display: inline-flex; align-items: center; gap: 6px; }
.regra-simbolo:last-child { justify-self: end; }
.regra-simbolo .selo-simbolo { width: 34px; height: 34px; font-size: 18px; }

/* Dica do coach: por cima da batalha, escrita para os dois lados (a de cima
   girada para o Jogador 1; contra o Rato ela some). Fecha num toque. */
.coach {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 12px var(--gutter);
  background: rgba(5, 10, 18, 0.62);
  cursor: pointer;
  animation: qg-fundo 180ms ease-out both;
}
.coach-balao {
  margin: 0;
  max-width: 330px;
  padding: 14px 18px;
  border: 4px solid var(--tinta);
  border-radius: var(--raio);
  background: var(--especial);
  color: var(--especial-texto);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.coach-cima { transform: rotate(180deg); }
#tela-batalha.contra-rival .coach-cima { display: none; }
.coach-fechar {
  margin: 0;
  padding: 4px 12px;
  border-radius: var(--raio-p);
  background: var(--leitura);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
}

/* ---------- Aviso de erro ---------- */

.falha {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: grid;
  gap: 10px;
  padding: 16px var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 16px);
  border-top: 4px solid var(--perigo);
  background: var(--perigo-fundo);
  color: var(--perigo);
  font-size: 1.2rem;
  font-weight: 700;
  text-align: center;
}
.falha p { margin: 0; }

/* ---------- Telas estreitas de verdade (360x640) ---------- */

@media (max-width: 374px) {
  body { font-size: 19px; }
  :root { --gutter: 12px; }
  .logo { font-size: 2.45rem; }
  .simbolo { font-size: 0.72rem; }
  /* Acertou/Errou ao lado do bichinho: só o texto cabe */
  .lado .opcao-alvo .icone { display: none; }
  .simbolo .icone { font-size: 1.6rem; }
  .opcao-alvo { font-size: 0.92rem; gap: 5px; }
  .qg-titulo { font-size: 1.6rem; }
  .qg-opcao { font-size: 0.92rem; }
  .carta-especial { font-size: 0.75rem; }
  .vida-numero { font-size: 1.2rem; }
}

/* ---------- Movimento reduzido: tudo instantâneo ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .confete, .cena-especial { display: none; }
}