/* ===========================================================================
   Arena de Duelo: tema azul holografico (inspirado na mesa do videogame)
   com volume: tabuleiro inclinado visto de perto, piso ao fundo, borda com
   espessura e zonas em relevo.
   =========================================================================== */
:root {
  --cw: 100px;                         /* largura de uma carta no campo */
  --ch: calc(var(--cw) * 1.46);        /* altura (proporcao 59 x 86) */
  --gap: 7px;
  --ouro: #ffd54a;
  --op: #ff5a5a;                       /* cor do oponente */
  --eu: #4aa3ff;                       /* a sua cor */
  --painel: #120e22;
  --borda: #3a3060;
  --metal: #6f7fd6;
  --inclinacao: 46deg;                 /* inclinacao do tabuleiro */
  --espessura: 54px;                   /* espessura da borda do tabuleiro */
  color-scheme: dark;                  /* tema unico, escuro */
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: #06081a radial-gradient(ellipse at 50% 30%, #1a2250 0%, #0b0e24 45%, #04050d 100%);
  color: #e8ecff;
  font-family: "Segoe UI", Arial, sans-serif;
  display: flex; flex-direction: column;
  overflow: hidden; user-select: none;
}

button {
  background: #1b2150; color: #e8ecff; border: 1px solid #4a56a8; border-radius: 7px;
  padding: 6px 12px; cursor: pointer; font: inherit;
}
button:hover { background: #28307a; }
button:disabled { opacity: .35; cursor: default; }
button.destaque { background: #4b3fb8; border-color: #8a7ff0; }
button.destaque:hover { background: #5c4fd6; }
input, select { background: #0a0d22; color: #e8ecff; border: 1px solid #4a56a8; border-radius: 6px; padding: 6px 8px; font: inherit; }

/* ---------- barra de cima ---------- */
#topo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 5px 14px; background: #0b0e24; border-bottom: 1px solid var(--borda); z-index: 6;
}
#topo .grupo { display: flex; align-items: center; gap: 10px; min-width: 330px; }
#topo .grupo.eu { justify-content: flex-end; }
#topo .tag { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: #8a93cc; }
#topo .nome { font-weight: 600; font-size: 14px; }
#topo .grupo.op .nome { color: var(--op); }
#topo .grupo.eu .nome { color: var(--eu); }
#topo .lpbtns { display: flex; gap: 3px; }
#topo .lpbtns button { padding: 2px 6px; font-size: 11px; }
#topo .centro { display: flex; align-items: center; gap: 6px; }
#topo .centro button { padding: 5px 10px; }
#conexao { font-size: 11px; color: #8a93cc; margin-left: 6px; }
/* botao do som: alto-falante; quando mudo, uma linha corta o icone e as ondas somem */
#btnSom { padding: 4px 7px; line-height: 0; }
#btnLeve { padding: 4px 8px; font-size: 13px; opacity: .75; }
/* jogada em andamento (ataque animado, magia resolvendo, resposta pendente): encerrar turno e fases ficam apagados */
body.ocupado #btnTurno, body.ocupado #fasesLado div, body.ocupado #fases span { opacity: .4 !important; pointer-events: none; }
.fx .destaqueAtivar { border-radius: 8px; box-shadow: 0 0 24px 6px #fffc, 0 0 70px 24px #ffd54aaa; }
#btnLeve.ativo { opacity: 1; background: #3a2d05; border-color: var(--ouro); color: var(--ouro); box-shadow: 0 0 10px #ffd54a66; }
/* modo leve (body.leve): sem camadas de nuvem/brilho dos temas, sem animacao de sombra, sem filtros nas animacoes */
body.leve #fundoTema .nuvens, body.leve #fundoTema .brilho, body.leve #fundoTema .arco, body.leve #fundoTema .clarao, body.leve #fundoTema .cinzas { display: none !important; }
body.leve .lpBadge.vez, body.leve .lpBadge.vez .avatar, body.leve #tabuleiro::before, body.leve #tabuleiro::after { animation: none !important; }
body.leve .fx *, body.leve #fundoTema .raioSvg { filter: none !important; }
body.leve .fx .raioFora { opacity: .85; }
body.leve .fx .caminhaoFantasma .corpo { opacity: .9; }
#btnSom svg { width: 18px; height: 18px; fill: none; stroke: #e8ecff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#btnSom .caixa { fill: #e8ecff; }
#btnSom .corte { display: none; stroke: #ff6b6b; stroke-width: 2.4; }
#btnSom.mudo .ondas { display: none; }
#btnSom.mudo .corte { display: block; }
#btnSom.mudo svg { stroke: #8a93cc; } #btnSom.mudo .caixa { fill: #8a93cc; }

/* ---------- mesa ---------- */
#mesa { flex: 1; display: flex; min-height: 0; }
#centroMesa { flex: 1; position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }

#cena {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  perspective: 950px; perspective-origin: 50% 0%;      /* camera baixa: a frente fica grande, o fundo some ao longe */
  padding: 6px 0 0; position: relative;
}
/* piso holografico atras do tabuleiro, na mesma inclinacao, sumindo no escuro */
#chao {
  position: absolute; left: -30%; right: -30%; bottom: -40px; height: 170%;
  transform-origin: 50% 100%; transform: rotateX(var(--inclinacao));
  background:
    radial-gradient(ellipse at 50% 100%, transparent 0%, transparent 30%, #04050d 72%),
    linear-gradient(180deg, #04050d 0%, #0000 45%),
    linear-gradient(#3d5bff22 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(90deg, #3d5bff22 1px, transparent 1px) 0 0 / 64px 64px,
    radial-gradient(ellipse at 50% 100%, #1a2a6a 0%, #0a1030 40%, #04050d 80%);
  pointer-events: none;
}
#tabuleiro { position: relative; z-index: 1; }

/* mao do oponente: so os versos, em cima */
/* encostada na borda de cima do tabuleiro: o jogo.js (posicionarMaoOp) mede a borda inclinada e ajusta o top (pedido de 10/11/2026) */
#maoOp { position: absolute; top: 6px; left: 0; right: 0; height: 46px; padding: 0; z-index: 2; transition: top .25s; }
#maoOp .carta { width: calc(var(--cw) * .44); height: calc(var(--cw) * .44 * 1.46); border-radius: 4px; cursor: default; box-shadow: 0 3px 8px #000a; }
#maoOp .carta:hover { transform: none; }

/* o tabuleiro inclinado */
#tabuleiro {
  transform: rotateX(var(--inclinacao));
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  padding: 14px 18px 12px;
  border-radius: 16px;
  border: 3px solid #5b6ac4;
  background:
    linear-gradient(#ffffff0a 1px, transparent 1px) 0 0 / 42px 42px,
    linear-gradient(90deg, #ffffff0a 1px, transparent 1px) 0 0 / 42px 42px,
    radial-gradient(ellipse at 50% 50%, #1c2c6e 0%, #101a48 55%, #0a1034 100%);
  box-shadow:
    0 0 0 6px #0d1235, 0 0 0 8px #6f7fd6aa,
    0 0 40px #3d5bff55,
    0 0 90px 30px #000,
    inset 0 0 70px #000b;
  display: flex; flex-direction: column; gap: var(--gap);
}
/* linhas coloridas: vermelho no fundo (oponente), azul na frente (voce) */
#tabuleiro::before, #tabuleiro::after {
  content: ""; position: absolute; left: 10%; right: 10%; height: 4px; border-radius: 4px; pointer-events: none;
}
#tabuleiro::before { top: -3px; background: linear-gradient(90deg, transparent, var(--op), transparent); box-shadow: 0 0 14px var(--op); }
#tabuleiro::after { bottom: -3px; background: linear-gradient(90deg, transparent, var(--eu), transparent); box-shadow: 0 0 14px var(--eu); }

/* paredes do tabuleiro (frente e laterais), em aco escuro, para dar espessura */
#tabuleiro .face, #tabuleiro .faceEsq, #tabuleiro .faceDir {
  position: absolute; background: linear-gradient(180deg, #3a4a9a 0%, #1a2358 35%, #0a0f30 100%);
  box-shadow: inset 0 0 30px #000a;
}
#tabuleiro .face {
  left: -3px; right: -3px; top: 100%; height: var(--espessura);
  transform-origin: top center; transform: rotateX(-62deg);   /* chanfrada, para a espessura aparecer mesmo vista de cima */
  border-top: 3px solid #8a9aff; border-radius: 0 0 16px 16px;
}
#tabuleiro .faceEsq, #tabuleiro .faceDir { top: -3px; bottom: -3px; width: var(--espessura); filter: brightness(.5); }
#tabuleiro .faceEsq { left: -3px; transform-origin: left center; transform: rotateY(90deg); }
#tabuleiro .faceDir { right: -3px; transform-origin: right center; transform: rotateY(-90deg); }

/* cada lado: painel escuro com as zonas em relevo */
.lado {
  display: flex; flex-direction: column; gap: var(--gap); background: #060a24cc; padding: 8px 10px; border-radius: 8px;
  box-shadow: inset 0 6px 14px #000c, inset 0 0 0 1px #ffffff10; transform-style: preserve-3d;
}
.fileira {
  display: grid;
  grid-template-columns: var(--cw) var(--cw) repeat(5, var(--cw)) var(--cw) var(--cw);
  gap: var(--gap); align-items: center; justify-content: center; transform-style: preserve-3d;
}
.fileira > :nth-child(2) { margin-right: 10px; }
.fileira > :nth-child(8) { margin-left: 10px; }
.fileira .vazio { width: var(--cw); height: var(--ch); }

/* faixa central: fases e turno */
#centroTab { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 4px 0; }
#fases { display: flex; gap: 2px; background: #080c2add; border: 1px solid #6f7fd6aa; border-radius: 20px; padding: 4px 8px; box-shadow: 0 0 16px #3d5bff33; }
#fases span { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: #5862a8; padding: 3px 9px; border-radius: 12px; }
#fases span.passou { color: #aab4ff; }
#fases span.atual { background: var(--ouro); color: #1a1200; box-shadow: 0 0 14px var(--ouro); }
#turnoTab { font-size: 12px; color: #aab4ff; letter-spacing: 1px; text-transform: uppercase; }
#turnoTab b { color: #fff; }

/* ---------- zonas (em relevo) ---------- */
.zona {
  width: var(--cw); height: var(--ch);
  border-radius: 6px; position: relative;
  display: flex; align-items: center; justify-content: center;
  background: #0b1236d9; border: 2px solid #ffffff22;
  transform: translateZ(10px);                 /* zona em relevo */
  box-shadow: inset 0 0 18px #00000088, 0 6px 0 #0a0f30, 0 7px 0 #04050d, 0 12px 14px #000c;
}
/* brilho de luz vindo de cima */
.zona::before { content: ""; position: absolute; inset: 0; border-radius: 4px; pointer-events: none; background: linear-gradient(180deg, #ffffff14 0%, transparent 45%, #00000030 100%); }
/* monstros em laranja, magias/armadilhas em ciano (como na mesa do videogame) */
.zona.monstros { border-color: #e2a84fb0; box-shadow: inset 0 0 18px #e2a84f22, 0 6px 0 #0a0f30, 0 7px 0 #04050d, 0 12px 14px #000c; }
.zona.magias { border-color: #5ad0cfb0; box-shadow: inset 0 0 18px #5ad0cf22, 0 6px 0 #0a0f30, 0 7px 0 #04050d, 0 12px 14px #000c; }
.zona.campo { border-color: #7fdc7fa0; }
.lado.op .zona.monstros, .lado.op .zona.magias { background: #1a0f36d9; }
.lado.eu .zona.monstros, .lado.eu .zona.magias { background: #0b1440d9; }
.zona.pilha { border-color: #8c96d6aa; border-style: dashed; background: #121a4ad9; cursor: pointer; transform: translateZ(4px); box-shadow: inset 0 0 18px #00000088, 0 4px 0 #0a0f30, 0 8px 12px #000a; }
.zona.campo { transform: translateZ(4px); box-shadow: inset 0 0 18px #7fdc7f22, 0 4px 0 #0a0f30, 0 8px 12px #000a; }
.zona .rotulo {
  position: absolute; bottom: 4px; left: 0; right: 0; text-align: center;
  font-size: 9px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: #aab4ff99; pointer-events: none;
}
.zona.monstros .rotulo { color: #e2a84fb0; }
.zona.magias .rotulo { color: #5ad0cfb0; }
.zona .icone { font-size: 30px; line-height: 1; color: #aab4ff55; pointer-events: none; }
.zona.monstros .icone, .zona.magias .icone { font-size: 22px; opacity: .5; }
.zona .contador {
  position: absolute; top: -9px; right: -9px; z-index: 3;
  background: var(--ouro); color: #1a1200; border-radius: 12px;
  font-size: 11px; font-weight: 700; padding: 1px 7px; box-shadow: 0 2px 6px #000a;
}
.zona.alvo { box-shadow: 0 0 0 3px var(--ouro), 0 0 26px var(--ouro); background: #ffd54a2a; cursor: pointer; }
.zona.sobre { box-shadow: 0 0 0 4px #fff, 0 0 32px #fff; background: #ffd54a44; }

/* pilha do deck: tres versos empilhados */
.zona .camada { position: absolute; left: -2px; top: -2px; pointer-events: none; }
.zona .camada:nth-child(1) { transform: translate(-4px, -4px); }
.zona .camada:nth-child(2) { transform: translate(-2px, -2px); }
.zona.deckFusao .carta.verso { filter: hue-rotate(250deg) saturate(1.3); }
.zona.banidos .carta { filter: grayscale(.85) brightness(.55); }

/* ---------- cartas ---------- */
.carta {
  width: var(--cw); height: var(--ch);
  border-radius: 5px; background-size: cover; background-position: center;
  box-shadow: 0 3px 8px #000c; position: relative; cursor: pointer;
  transition: transform .15s, box-shadow .15s; flex-shrink: 0;
}
.carta:hover { transform: translateY(-4px) scale(1.05); z-index: 5; box-shadow: 0 10px 20px #000d; }
.carta.def { transform: rotate(90deg) scale(.96); }
.carta.def:hover { transform: rotate(90deg) scale(1.02); }
.carta.verso { background: url(img/verso.png) center / cover; }
.carta.virada:not(.verso) { filter: brightness(.5) saturate(.6); }
.carta.virada:not(.verso)::after {
  content: "VIRADO"; position: absolute; top: 45%; left: 0; right: 0; text-align: center;
  font-size: 10px; letter-spacing: 2px; color: #fff; background: #000a; padding: 2px 0;
}
.carta.sel { outline: 3px solid var(--ouro); box-shadow: 0 0 18px var(--ouro); }
.carta.alvo { outline: 3px solid #ff5252; box-shadow: 0 0 18px #ff5252; }
/* O Homem Vesgo mirando: os monstros do oponente viram versos embacados, com visao dupla, e trocam de lugar */
.carta.cega { filter: blur(4px) saturate(.7); cursor: crosshair; outline: 3px solid #ff5252; box-shadow: 0 0 18px #ff5252; animation: vesgoTreme 1.5s ease-in-out infinite alternate; }
.carta.cega::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: url(img/verso.png) center / cover; opacity: .5; pointer-events: none; animation: vesgoDupla 1.1s ease-in-out infinite alternate; }
.carta.cega.sel { filter: blur(3px) brightness(1.25); outline: 3px solid var(--ouro); box-shadow: 0 0 22px var(--ouro); }
.zona .ordemCega { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; pointer-events: none; font: 900 34px/1 Georgia, serif; color: #fff; text-shadow: 0 0 10px #000, 0 2px 0 #000, 0 0 18px var(--ouro); }
body.vesgo .lado.op .zona.magias .carta, body.vesgo .lado.op .zona.campo .carta { filter: blur(2px); }
@keyframes vesgoTreme { from { rotate: -2deg; } to { rotate: 2deg; } }
@keyframes vesgoDupla { from { translate: -9px 0; } to { translate: 9px 0; } }
body.leve .carta.cega { animation: none; }
body.leve .carta.cega::before { display: none; }
/* ATK / DEF do monstro no campo: placa centralizada embaixo, fonte de fliperama, cresce com o mouse em cima */
.carta .stats {
  position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%); transform-origin: 50% 100%;
  background: linear-gradient(180deg, #0b0b14ee, #1c1430ee); border: 1px solid #ffd54aaa; border-radius: 6px; padding: 1px 6px 0;
  color: #fff; font-family: Impact, 'Arial Black', 'Franklin Gothic Demi', 'Segoe UI Black', sans-serif; font-size: 14px; line-height: 1.2; letter-spacing: .5px; white-space: nowrap;
  text-shadow: 0 1px 0 #000, 0 0 6px #000; box-shadow: 0 2px 6px #000c, 0 0 10px #ffd54a55; transition: transform .15s, box-shadow .15s; z-index: 3;
}
.carta .stats .atk { color: #ffb84a; } .carta .stats .def { color: #7fc4ff; }
.carta .stats i { font-style: normal; color: #ffffff66; margin: 0 2px; font-size: 11px; }
.carta .stats .mais { color: #6cff7a; } .carta .stats .menos { color: #ff5c5c; }
.carta:hover .stats { transform: translateX(-50%) scale(1.55); box-shadow: 0 4px 12px #000d, 0 0 16px #ffd54a99; }
.carta.def .stats { left: auto; right: 0; bottom: auto; top: 50%; transform: translate(calc(50% - 13px), -50%) rotate(-90deg); transform-origin: 50% 50%; }
.carta.def:hover .stats { transform: translate(calc(50% - 13px), -50%) rotate(-90deg) scale(1.55); }
.zona:has(.carta:hover) { transform: translateZ(18px); }   /* a zona da carta sob o mouse sobe, para a placa maior nao ficar atras da vizinha */

/* carta "fantasma" que segue o mouse ao arrastar */
.carta.fantasma {
  position: fixed; z-index: 200; pointer-events: none;
  width: calc(var(--cw) * 1.15); height: calc(var(--ch) * 1.15);
  transform: translate(-50%, -55%) rotate(-5deg) scale(1.08);
  box-shadow: 0 24px 48px #000, 0 0 0 2px var(--ouro); transition: none;
}

/* ---------- a sua mao (em leque, com ATK/DEF embaixo) ---------- */
#mao {
  display: flex; justify-content: center; align-items: flex-end;
  padding: 14px 10px 24px; height: calc(var(--ch) * 1.15 + 100px); flex-shrink: 0;
  position: relative; z-index: 4;
}
#mao .maoItem {
  display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 0 -5px;
  transform: rotate(var(--rot, 0deg)) translateY(var(--dy, 0px)); transform-origin: 50% 100%;
  transition: transform .15s; position: relative;
}
#mao .maoItem:hover { transform: rotate(0deg) translateY(-18px) scale(1.08); z-index: 9; }
#mao .maoItem.arrastando { opacity: .3; }
#mao .carta { width: calc(var(--cw) * 1.15); height: calc(var(--ch) * 1.15); touch-action: none; }
#mao .carta:hover { transform: none; }
.statsMao {
  display: flex; flex-direction: column; align-items: center; line-height: 1.15; min-height: 30px;
  font-size: 13px; font-weight: 700; letter-spacing: 1px;
  color: #fff; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 0 2px 4px #000;
}
.statsMao .atk { color: #ffe08a; }
.statsMao .def { color: #bfe3ff; }

/* ---------- pontos de vida nos cantos ---------- */
.lpBadge {
  position: absolute; z-index: 5; min-width: 240px;
  background: #080c2aee; border: 1px solid #6f7fd6aa; border-radius: 10px; padding: 6px 12px 8px;
  box-shadow: 0 8px 24px #000a, 0 0 16px #3d5bff33;
}
.lpBadge.op { bottom: 12px; right: 14px; border-color: #ff5a5a88; }   /* os dois PV ficam embaixo: voce a esquerda, oponente a direita */
.lpBadge.eu { bottom: 12px; left: 14px; border-color: #4aa3ff88; }
.lpBadge .nome { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #aab4ff; }
.lpBadge.op .nome { color: var(--op); }
.lpBadge.eu .nome { color: var(--eu); }
.lpBadge .valor { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ouro); line-height: 1.1; }
.lpBadge .valor small { font-size: 11px; color: #aab4ff; margin-right: 6px; font-weight: 600; }
/* barra de vida: capsula com borda dourada, coracao e listras verdes */
.lpBadge .barra {
  position: relative; height: 18px; margin: 8px 0 0 12px; border-radius: 12px;
  background: #140e04; border: 2px solid #d29a2f; box-shadow: inset 0 0 6px #000, 0 0 10px #d29a2f55;
}
.lpBadge .barra::before {
  content: "❤"; position: absolute; left: -18px; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 26px; height: 26px; border-radius: 50%; background: #2a1a06; border: 2px solid #d29a2f;
  color: #ff3b3b; font-size: 13px; line-height: 22px; text-align: center; box-shadow: 0 0 8px #000;
}
.lpBadge .barra i {
  display: block; height: 100%; width: 100%; border-radius: 9px;
  background: repeating-linear-gradient(135deg, #4fe066 0 7px, #2fae47 7px 12px);
  box-shadow: inset 0 2px 0 #b8ffb888, inset 0 -2px 0 #0a4a1a; transition: width .5s, background .5s;
}
.lpBadge .barra i.baixo { background: repeating-linear-gradient(135deg, #ffd54a 0 7px, #d2a020 7px 12px); }
.lpBadge .barra i.critico { background: repeating-linear-gradient(135deg, #ff5a5a 0 7px, #c92f2f 7px 12px); }

/* ---------- painel lateral ---------- */
#painel { width: 310px; background: var(--painel); border-left: 1px solid var(--borda); display: flex; flex-direction: column; z-index: 6; }
#preview { padding: 10px; border-bottom: 1px solid var(--borda); }
#preview img { width: 100%; border-radius: 10px; display: block; }
#preview .vazio { color: #5862a8; font-size: 13px; text-align: center; padding: 30px 10px; }
#preview .info { font-size: 12px; margin-top: 8px; color: #c9cff5; line-height: 1.35; }
#preview .info b { color: #fff; }
#log { flex: 1; overflow-y: auto; font-size: 12px; padding: 8px 10px; line-height: 1.4; color: #c9cff5; }
#log div { padding: 2px 0; border-bottom: 1px dotted #232a5a; }
#log div.turno { color: var(--ouro); font-weight: 600; margin-top: 4px; }
#log div.dano { color: #ff8a86; }

/* ---------- menu, aviso, modais ---------- */
#menu {
  position: fixed; background: #141a44; border: 1px solid #6f7fd6; border-radius: 9px; padding: 4px;
  display: none; z-index: 60; min-width: 200px; box-shadow: 0 10px 30px #000c;
}
#menu .titulo { font-size: 11px; color: #8a93cc; padding: 4px 10px 6px; border-bottom: 1px solid #2a2f5a; margin-bottom: 3px; }
#menu button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 7px 10px; border-radius: 5px; }
#menu button:hover { background: #28307a; }
#menu button.perigo { color: #ff8a86; }

#aviso {
  position: fixed; left: 50%; top: 60px; transform: translateX(-50%);
  background: #ffd54a; color: #221a00; padding: 8px 18px; border-radius: 20px; font-weight: 600;
  display: none; z-index: 70; box-shadow: 0 6px 20px #000a; max-width: 80vw; text-align: center;
}
#aviso.erro { background: #ff5252; color: #fff; }

.modal { position: fixed; inset: 0; background: #000b; display: flex; align-items: center; justify-content: center; z-index: 100; }
.caixa { background: #0e1128; border: 1px solid #6f7fd6; border-radius: 14px; padding: 22px 26px; max-width: 960px; max-height: 88vh; overflow: auto; box-shadow: 0 20px 60px #000; }
.caixa h1 { margin: 0; font-size: 28px; letter-spacing: 1px; }
.caixa h2 { margin: 0 0 12px; font-size: 20px; }
.caixa h3 { margin: 0 0 8px; font-size: 15px; color: var(--ouro); }
.caixa .sub { color: #8a93cc; margin: 2px 0 16px; }
.caixa label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #c9cff5; margin-bottom: 10px; }
.caixa p { font-size: 13px; color: #c9cff5; }
.modos { display: flex; gap: 14px; margin-top: 10px; }
.modo { flex: 1; background: #080c2a; border: 1px solid var(--borda); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; }
.modo button { margin-top: auto; }
.codigo { margin-top: 8px; font-size: 13px; color: #c9cff5; min-height: 18px; }
.codigo b { font-size: 26px; letter-spacing: 6px; color: var(--ouro); display: block; }
.fechar { float: right; }

.grade { display: flex; flex-wrap: wrap; gap: 12px; }
.grade .item { width: 120px; display: flex; flex-direction: column; gap: 4px; }
.grade .item .carta { width: 120px; height: 175px; cursor: default; }
.grade .item .carta:hover { transform: none; }
.grade .item button { padding: 3px 6px; font-size: 11px; }

#sobreposicao { position: fixed; inset: 0; background: #000d; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 90; gap: 16px; text-align: center; }
#sobreposicao h1 { font-size: 34px; margin: 0; }
#sobreposicao p { color: #c9cff5; margin: 0; }

.regras { font-size: 13px; line-height: 1.5; color: #c9cff5; max-width: 640px; }
.regras li { margin-bottom: 4px; }

/* ---------- seletor de fases na lateral ---------- */
#fasesLado { position: absolute; right: 14px; top: 12px; z-index: 5; display: flex; flex-direction: column; gap: 6px; }
#fasesLado div {
  display: flex; align-items: center; gap: 12px; min-width: 232px; padding: 10px 14px; border-radius: 10px;
  background: #080c2add; border: 1px solid #2a2f5a; color: #5862a8; font-size: 15px; box-shadow: 0 6px 18px #000a;
}
#fasesLado div b { width: 30px; font-size: 13px; letter-spacing: 1px; }
#fasesLado div.passou { color: #aab4ff; }
#fasesLado div.pode { cursor: pointer; border-color: #6f7fd6; color: #c9cff5; }
#fasesLado div.pode:hover { background: #1b2150; color: #fff; border-color: var(--ouro); }
#fasesLado div.atual { background: var(--ouro); color: #1a1200; border-color: var(--ouro); box-shadow: 0 0 14px var(--ouro); font-weight: 600; }
#fasesLado div.encerrar { margin-top: 6px; }
#fasesLado div.encerrar.pode { border-color: #8a7ff0; background: #4b3fb8dd; color: #fff; }
#fasesLado div.encerrar.pode:hover { background: #5c4fd6; border-color: #fff; }
#fases span.pode { cursor: pointer; color: #c9cff5; }
#fases span.pode:hover { background: #1b2150; color: #fff; }

/* ---------- golpe de ataque ---------- */
.fx { position: fixed; inset: 0; z-index: 140; pointer-events: none; }
.fx .carga { position: absolute; width: 48px; height: 48px; border-radius: 50%; background: radial-gradient(circle, #fff 0%, var(--cor) 35%, transparent 70%); box-shadow: 0 0 30px var(--cor), 0 0 70px var(--cor); }
.fx .feixe {
  position: absolute; height: 20px; margin-top: -10px; transform-origin: 0 50%; border-radius: 10px;
  background: linear-gradient(90deg, #fff 0%, var(--cor) 25%, var(--cor) 85%, transparent 100%);
  box-shadow: 0 0 18px var(--cor), 0 0 44px var(--cor);
}
.fx .feixe::after { content: ""; position: absolute; left: 0; right: 10%; top: 5px; bottom: 5px; border-radius: 10px; background: #fff; opacity: .85; }
.fx .impacto { position: absolute; width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle, #fff 0%, var(--cor) 30%, transparent 70%); box-shadow: 0 0 50px var(--cor); }
/* ataque de carta lendaria: tudo maior */
.fx.forte .carga { width: 120px; height: 120px; box-shadow: 0 0 50px var(--cor), 0 0 120px var(--cor), 0 0 220px #ffae0088; }
.fx .anelCarga { position: absolute; width: 150px; height: 150px; border-radius: 50%; border: 3px solid #fff3b0; box-shadow: 0 0 22px var(--cor), inset 0 0 22px var(--cor); }
.fx .escurecer { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, #0000 15%, #000 100%); }
.fx.forte .feixe { height: 56px; margin-top: -28px; border-radius: 28px; box-shadow: 0 0 40px var(--cor), 0 0 100px var(--cor), 0 0 170px #ffae00aa; }
.fx.forte .feixe::after { top: 15px; bottom: 15px; border-radius: 14px; }
.fx.forte .feixe.lateral { height: 14px; margin-top: -7px; opacity: .85; box-shadow: 0 0 18px var(--cor); }
.fx.forte .feixe.lateral::after { top: 4px; bottom: 4px; }
.fx .faisca { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px var(--cor), 0 0 22px var(--cor); }
.fx.forte .impacto { width: 260px; height: 260px; box-shadow: none; background: radial-gradient(circle closest-side, #fff 0%, #fff6c8 20%, var(--cor) 45%, #ffae0066 70%, transparent 100%); }
.fx .ondaChoque { position: absolute; width: 160px; height: 160px; border-radius: 50%; border: 6px solid #fff3b0; box-shadow: 0 0 30px var(--cor), inset 0 0 30px var(--cor); }
.fx .flash { position: absolute; inset: 0; background: #fff8dc; }
/* a Besta Absoluta atacando: golpe roxo, maior que o lendario, com raios azuis (animarRaiosBesta) */
.fx.besta .carga { width: 190px; height: 190px; background: radial-gradient(circle, #fff 0%, #e9c8ff 18%, var(--cor) 40%, transparent 70%); box-shadow: 0 0 70px var(--cor), 0 0 160px var(--cor), 0 0 300px #6a1fffaa; }
.fx.besta .anelCarga { width: 230px; height: 230px; border-color: #e9c8ff; box-shadow: 0 0 30px var(--cor), inset 0 0 30px var(--cor); }
.fx.besta .escurecer { background: radial-gradient(ellipse at 50% 50%, #12002a44 10%, #000 100%); }
.fx.besta .feixe { height: 90px; margin-top: -45px; border-radius: 45px; box-shadow: 0 0 60px var(--cor), 0 0 140px var(--cor), 0 0 240px #6a1fffcc; }
.fx.besta .feixe::after { top: 26px; bottom: 26px; border-radius: 20px; background: #f3e6ff; }
.fx.besta .feixe.lateral { height: 22px; margin-top: -11px; }
.fx.besta .impacto { width: 420px; height: 420px; background: radial-gradient(circle closest-side, #fff 0%, #f3e6ff 16%, var(--cor) 42%, #6a1fff77 68%, transparent 100%); }
.fx.besta .ondaChoque { width: 220px; height: 220px; border-color: #e9c8ff; border-width: 9px; box-shadow: 0 0 50px var(--cor), inset 0 0 50px var(--cor); }
.fx.besta .flash { background: #ead9ff; }
.fx.besta .faisca { background: #9fd8ff; box-shadow: 0 0 12px #9fd8ff, 0 0 24px #4aa3ff; }
.fx.besta .brilhoLado { background: radial-gradient(ellipse at 50% 50%, #fff 0%, #e9c8ffd9 22%, #b44dff77 52%, transparent 75%); box-shadow: 0 0 90px #b44dff; }
/* carta partida ao meio: linha do corte e duas metades com borda serrilhada */
.fx .corte { position: absolute; width: 4px; border-radius: 2px; background: #fff; box-shadow: 0 0 12px #fff, 0 0 30px var(--cor); }
.fx .metade { position: absolute; border-radius: 5px; background-size: cover; background-position: center; box-shadow: 0 6px 16px #000c; }
.fx .metade.discreta { box-shadow: 0 3px 8px #000a; }
.fx .metade.esq { clip-path: polygon(0 0, 52% 0, 46% 18%, 55% 36%, 46% 54%, 54% 72%, 47% 88%, 51% 100%, 0 100%); }
.fx .metade.dir { clip-path: polygon(52% 0, 100% 0, 100% 100%, 51% 100%, 47% 88%, 54% 72%, 46% 54%, 55% 36%, 46% 18%); }

/* ---------- invocacao: circulo de ritual, clarao, fumaca e pulso ---------- */
/* o circulo e achatado (scaleY) para parecer deitado sobre a mesa; dois aneis giram em sentidos opostos */
.fx .ritual { position: absolute; transform: translate(-50%, -50%) scaleY(.66); }
.fx .ritual .anel {
  position: absolute; inset: 0; border-radius: 50%; border: 4px solid #ffd54a;
  box-shadow: 0 0 22px #ffd54a, 0 0 60px #ffae0066, inset 0 0 28px #ffd54a66;
  background: radial-gradient(circle closest-side, #ffd54a00 50%, #ffd54a22 86%, #ffd54a55 100%);
}
.fx .ritual .anel::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, #0000 0deg 14deg, #ffe88ad9 14deg 18deg, #0000 18deg 30deg);
  -webkit-mask: radial-gradient(circle closest-side, #0000 70%, #000 72%, #000 95%, #0000 97%);
  mask: radial-gradient(circle closest-side, #0000 70%, #000 72%, #000 95%, #0000 97%);
}
.fx .ritual .anel.interno { inset: 17%; border: 2px dashed #ffe88a; box-shadow: 0 0 14px #ffd54a, inset 0 0 14px #ffd54a44; background: none; }
.fx .ritual .anel.interno::after {
  background: repeating-conic-gradient(from 7deg, #0000 0deg 20deg, #ffe88a 20deg 24deg, #0000 24deg 45deg);
  -webkit-mask: radial-gradient(circle closest-side, #0000 50%, #000 52%, #000 78%, #0000 80%);
  mask: radial-gradient(circle closest-side, #0000 50%, #000 52%, #000 78%, #0000 80%);
}
/* ritual forte (cartas lendarias): terceiro anel por fora, clarao branco, pilar de luz e onda que toma a tela */
.fx .ritual.forte .anel { border-width: 5px; box-shadow: 0 0 30px #ffd54a, 0 0 90px #ffae0099, inset 0 0 40px #ffd54a88; }
.fx .ritual .anel.externo { inset: -16%; border: 2px dotted #fff3b0; box-shadow: 0 0 24px #ffd54a; background: none; }
.fx .ritual .anel.externo::after {
  background: repeating-conic-gradient(from 3deg, #0000 0deg 8deg, #fff3b0cc 8deg 10deg, #0000 10deg 15deg);
  -webkit-mask: radial-gradient(circle closest-side, #0000 86%, #000 88%, #000 98%, #0000 100%);
  mask: radial-gradient(circle closest-side, #0000 86%, #000 88%, #000 98%, #0000 100%);
}
.fx .clarao.branco { background: radial-gradient(circle closest-side, #ffffff 0%, #fff3b0cc 30%, #ffd54a66 60%, transparent 100%); }
.fx .pilar { position: absolute; transform-origin: 50% 100%; mix-blend-mode: screen; border-radius: 50% 50% 0 0 / 8% 8% 0 0;
  background: linear-gradient(180deg, #ffd54a00 0%, #ffe9a055 55%, #fff6c8dd 100%); filter: blur(2px); }
.fx .onda { position: absolute; border-radius: 50%;
  background: radial-gradient(circle closest-side, #ffd54a00 0%, #ffd54a00 78%, #ffd54a66 88%, #fff6c8 95%, #ffd54a00 100%); }
.fx .lavagem { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 60%, #ffd54a66 0%, #ffae0033 50%, transparent 100%); mix-blend-mode: screen; }
.fx .clarao { position: absolute; border-radius: 50%; background: radial-gradient(circle closest-side, #fff6c8cc 0%, #ffd54a66 40%, transparent 100%); }
.fx .fumaca { position: absolute; border-radius: 50%; background: radial-gradient(circle closest-side, #fff2c0bb 0%, #ffd54a55 45%, transparent 100%); filter: blur(7px); }
.fx .brilho { position: absolute; border-radius: 6px; background: radial-gradient(circle closest-side, #fff6c8aa 0%, #ffd54a55 60%, transparent 100%); box-shadow: 0 0 26px #ffd54a; mix-blend-mode: screen; }
.fx .pulso { position: absolute; border-radius: 8px; border: 3px solid #5ab0ff; box-shadow: 0 0 24px #5ab0ff, 0 0 50px #5ab0ff66, inset 0 0 24px #5ab0ff55; background: #5ab0ff14; }
.carta.fantasma.defesa { transform: translate(-50%, -55%) rotate(85deg) scale(1.02); }

/* ---------- campo dourado: enquanto uma carta lendaria estiver em campo ---------- */
body, #chao, #tabuleiro, #tabuleiro::before, #tabuleiro::after, #tabuleiro .face, #tabuleiro .faceEsq, #tabuleiro .faceDir, .lado, .lpBadge, #fases, #fasesLado .item {
  transition: background 1s, border-color 1s, box-shadow 1s;
}
.zona, .zona .rotulo { transition: border-color 1s, color 1s; }
body.dourado { background: #150f03 radial-gradient(ellipse at 50% 30%, #4a3810 0%, #241a06 45%, #0b0802 100%); }
body.dourado #chao {
  background:
    radial-gradient(ellipse at 50% 100%, transparent 0%, transparent 30%, #0b0802 72%),
    linear-gradient(180deg, #0b0802 0%, #0000 45%),
    linear-gradient(#ffd54a2a 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(90deg, #ffd54a2a 1px, transparent 1px) 0 0 / 64px 64px,
    radial-gradient(ellipse at 50% 100%, #6a4e14 0%, #2e2108 40%, #0b0802 80%);
}
body.dourado #tabuleiro {
  border-color: #e0b84a;
  background:
    linear-gradient(#ffffff0a 1px, transparent 1px) 0 0 / 42px 42px,
    linear-gradient(90deg, #ffffff0a 1px, transparent 1px) 0 0 / 42px 42px,
    radial-gradient(ellipse at 50% 50%, #6e5416 0%, #4a3810 55%, #30240a 100%);
  box-shadow: 0 0 0 6px #2a1f08, 0 0 0 8px #e0b84aaa, 0 0 50px #ffd54a66, 0 0 90px 30px #000, inset 0 0 70px #000b;
}
body.dourado #tabuleiro::before, body.dourado #tabuleiro::after { background: linear-gradient(90deg, transparent, #ffd54a, transparent); box-shadow: 0 0 22px #ffe9a0, 0 0 44px #ffd54a88; animation: pulsoDourado 2.4s ease-in-out infinite alternate; }
@keyframes pulsoDourado { from { opacity: .6; } to { opacity: 1; } }   /* so opacidade: animar box-shadow repinta a cada quadro */
body.dourado #tabuleiro .face, body.dourado #tabuleiro .faceEsq, body.dourado #tabuleiro .faceDir { background: linear-gradient(180deg, #a8842a 0%, #5e4712 35%, #2a1f08 100%); }
body.dourado #tabuleiro .face { border-top-color: #ffe08a; }
body.dourado .lado { background: #1a1204cc; }
body.dourado .zona { border-color: #ffd54a66; }
body.dourado .zona.monstros { border-color: #ffd54ac0; }
body.dourado .zona.magias { border-color: #ffe9a0b0; }
body.dourado .zona.campo { border-color: #ffe08aa0; }
body.dourado .zona.pilha { border-color: #e0b84aaa; }
body.dourado .zona.monstros .rotulo, body.dourado .zona.magias .rotulo, body.dourado .zona .rotulo { color: #ffd54ab0; }
body.dourado .lpBadge, body.dourado #fases { border-color: #ffd54a88; box-shadow: 0 8px 24px #000a, 0 0 18px #ffd54a44; }
body.dourado #fasesLado .item { border-color: #ffd54a55; }

/* ---------- tema Nordeste: magia de campo na Zona de Campo troca a arena pelo sertao rachado ---------- */
body.tema-nordeste { background: #1a1208 radial-gradient(ellipse at 50% 20%, #6b4a22 0%, #3a2810 45%, #120c05 100%); }
body.tema-nordeste #chao {
  background:
    radial-gradient(ellipse at 50% 100%, transparent 0%, transparent 25%, #120c05 70%),
    linear-gradient(180deg, #120c05 0%, #0000 40%),
    url(img/arena_nordeste.jpg) center bottom / 60% auto repeat;
}
body.tema-nordeste #tabuleiro {
  border-color: #c9955a;
  background:
    linear-gradient(180deg, #00000055, #00000022 40%, #00000066),
    url(img/arena_nordeste.jpg) center / cover;
  box-shadow: 0 0 0 6px #3a2810, 0 0 0 8px #c9955aaa, 0 0 50px #e0a05a55, 0 0 90px 30px #000, inset 0 0 70px #000b;
}
body.tema-nordeste #tabuleiro::before, body.tema-nordeste #tabuleiro::after { background: linear-gradient(90deg, transparent, #ffb347, transparent); box-shadow: 0 0 14px #ffb347; animation: none; }
body.tema-nordeste #tabuleiro .face, body.tema-nordeste #tabuleiro .faceEsq, body.tema-nordeste #tabuleiro .faceDir { background: linear-gradient(180deg, #a87a48 0%, #5e3f1e 35%, #2a1a0a 100%); }
body.tema-nordeste #tabuleiro .face { border-top-color: #f0c080; }
body.tema-nordeste .lado { background: #2a1a0a99; box-shadow: inset 0 6px 14px #000c, inset 0 0 0 1px #ffd9a020; }
body.tema-nordeste .zona { background: #2a1a0ad9; border-color: #ffd9a044; box-shadow: inset 0 0 18px #00000088, 0 6px 0 #3a2810, 0 7px 0 #120c05, 0 12px 14px #000c; }
body.tema-nordeste .zona.monstros { border-color: #e0a05ab0; }
body.tema-nordeste .zona.magias { border-color: #f0c080a0; }
body.tema-nordeste .zona.campo { border-color: #ffb347; box-shadow: inset 0 0 18px #00000088, 0 0 18px #ffb34788, 0 6px 0 #3a2810, 0 7px 0 #120c05, 0 12px 14px #000c; }
body.tema-nordeste .zona.pilha { border-color: #c9955aaa; }
body.tema-nordeste .zona .rotulo { color: #ffd9a0b0; }
body.tema-nordeste .lpBadge, body.tema-nordeste #fases { border-color: #e0a05a88; box-shadow: 0 8px 24px #000a, 0 0 18px #e0a05a44; }
body.tema-nordeste #fasesLado .item { border-color: #e0a05a55; }

/* ---------- tema Israel: magia de campo troca a arena por Jerusalem (pedra clara, ceu azul e cupula dourada) ---------- */
body.tema-israel { background: #0e1a2e radial-gradient(ellipse at 50% 15%, #3a6aa8 0%, #16305a 45%, #08101f 100%); }
body.tema-israel #chao {
  background:
    radial-gradient(ellipse at 50% 100%, transparent 0%, transparent 25%, #08101f 70%),
    linear-gradient(180deg, #08101f 0%, #0000 40%),
    url(img/arena_israel.jpg) center bottom / 70% auto repeat;
}
body.tema-israel #tabuleiro {
  border-color: #e8c76a;
  background:
    linear-gradient(180deg, #00000066, #00000022 40%, #00000077),
    url(img/arena_israel.jpg) center / cover;
  box-shadow: 0 0 0 6px #2a3a5e, 0 0 0 8px #e8c76aaa, 0 0 50px #ffd98a55, 0 0 90px 30px #000, inset 0 0 70px #000b;
}
body.tema-israel #tabuleiro::before, body.tema-israel #tabuleiro::after { background: linear-gradient(90deg, transparent, #ffd98a, transparent); box-shadow: 0 0 14px #ffd98a; animation: none; }
body.tema-israel #tabuleiro .face, body.tema-israel #tabuleiro .faceEsq, body.tema-israel #tabuleiro .faceDir { background: linear-gradient(180deg, #d6c39a 0%, #8a7a58 35%, #3a3424 100%); }
body.tema-israel #tabuleiro .face { border-top-color: #fff0c0; }
body.tema-israel .lado { background: #1a2a4a99; box-shadow: inset 0 6px 14px #000c, inset 0 0 0 1px #ffe9b020; }
body.tema-israel .zona { background: #16243fd9; border-color: #ffe9b044; box-shadow: inset 0 0 18px #00000088, 0 6px 0 #2a3a5e, 0 7px 0 #08101f, 0 12px 14px #000c; }
body.tema-israel .zona.monstros { border-color: #e8c76ab0; }
body.tema-israel .zona.magias { border-color: #9ec8ffa0; }
body.tema-israel .zona.campo { border-color: #ffd98a; box-shadow: inset 0 0 18px #00000088, 0 0 18px #ffd98a88, 0 6px 0 #2a3a5e, 0 7px 0 #08101f, 0 12px 14px #000c; }
body.tema-israel .zona.pilha { border-color: #e8c76aaa; }
body.tema-israel .zona .rotulo { color: #ffe9b0b0; }
body.tema-israel .lpBadge, body.tema-israel #fases { border-color: #e8c76a88; box-shadow: 0 8px 24px #000a, 0 0 18px #e8c76a44; }
body.tema-israel #fasesLado .item { border-color: #e8c76a55; }

/* ---------- fundo do tema: uma camada fixa atras de tudo (criada pelo jogo.js) cobre a tela inteira, inclusive a faixa da mao e dos PV ---------- */
/* o fundo inteiro e desenhado em metade da resolucao e ampliado 2x (quatro vezes menos pixels nas camadas com blend e filtro); por isso as medidas em vh/vmax aqui dentro sao a metade do tamanho visto */
#fundoTema { position: fixed; left: 0; top: 0; width: 50%; height: 50%; transform: scale(2); transform-origin: 0 0; will-change: transform; z-index: 0; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 1.4s; }
#fundoTema .camada { position: absolute; inset: 0; display: none; }
body.tema-nordeste #fundoTema, body.tema-israel #fundoTema, body.dourado #fundoTema, body.besta #fundoTema, body.lula #fundoTema, body.lobo #fundoTema { opacity: 1; }
body #fundoTema.saindo { opacity: 0; }   /* deus saiu do campo: o ceu esmaece com as camadas ainda ligadas (jogo.js atualizarCampoDourado) */
#fundoTema .ceu { display: block; background-position: center; background-size: cover; background-repeat: no-repeat; }
body.tema-nordeste #fundoTema .ceu { background-image: linear-gradient(180deg, #120c0599, #120c0544 45%, #120c05bb), url(img/arena_nordeste.jpg); }
body.tema-israel #fundoTema .ceu { background-image: linear-gradient(180deg, #08101f99, #08101f44 45%, #08101fbb), url(img/arena_israel.jpg); }
body.tema-nordeste #chao, body.tema-israel #chao { opacity: .85; }
/* ---------- deus em campo: o ceu do Olimpo toma a tela (img/ceu_deus.jpg), com raios girando, nuvens deslizando em tres camadas,
   brilho pulsando e um arco-iris; vale por cima das magias de campo ---------- */
body.dourado { background: #2a1f08 radial-gradient(ellipse at 50% 20%, #b8923a 0%, #5a4418 45%, #1a1408 100%); }
body.dourado #fundoTema .ceu { background-image: linear-gradient(180deg, #0000, #0000 55%, #2a1f0855), url(img/ceu_deus.jpg); }
/* (os raios girantes e a faixa de nuvens n1 foram cortados na v83 para aliviar a GPU) */
body.dourado #fundoTema .nuvens { display: block; mix-blend-mode: screen; }
#fundoTema .nuvens i { position: absolute; top: 0; height: 100%; width: calc(2 * var(--nuvemAltura) * 3.5556);   /* 2 periodos da imagem (2560x720, espelhada para emendar sem corte) */ left: 0; background: url(img/nuvens_deus.jpg) 0 0 / auto 100% repeat-x; animation: deslizarNuvens var(--nuvemTempo, 100s) linear infinite; }
body.dourado #fundoTema .n2 { --nuvemAltura: 40vh; --nuvemTempo: 95s; top: 4vh; height: 40vh; opacity: .7; }
body.dourado #fundoTema .n2 i { animation-direction: reverse; }
body.dourado #fundoTema .n3 { --nuvemAltura: 47.5vh; --nuvemTempo: 65s; top: 21vh; height: 47.5vh; opacity: .9; }
@keyframes deslizarNuvens { to { transform: translateX(-50%); } }
body.dourado #fundoTema .brilho { display: block; background: radial-gradient(ellipse at 50% 30%, #fff8e0cc 0%, #ffe08a66 22%, #ffd54a22 45%, #0000 65%); mix-blend-mode: screen; animation: pulsarBrilho 3.6s ease-in-out infinite alternate; }
@keyframes pulsarBrilho { from { opacity: .5; } to { opacity: 1; } }
body.dourado #fundoTema .arco { display: block; inset: auto; left: 50%; top: -42vh; width: 60vh; height: 60vh; margin-left: -30vh; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #0000 23vh, #ff5c5c77 23.3vh, #ffb04d77 24vh, #fff06077 24.7vh, #7dff7d77 25.4vh, #5ccfff77 26.1vh, #c48cff77 26.8vh, #0000 27.1vh); filter: blur(2px); mix-blend-mode: screen; opacity: .75; }
@media (prefers-reduced-motion: reduce) { #fundoTema .camada, #fundoTema .nuvens i, #fundoTema .cinzas i { animation: none !important; } }
body.dourado #chao {
  background:
    radial-gradient(ellipse at 50% 100%, #0000 0%, #0000 35%, #2a1f0899 85%),
    linear-gradient(#ffd54a2a 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(90deg, #ffd54a2a 1px, transparent 1px) 0 0 / 64px 64px;
}
body.dourado #tabuleiro {
  border-color: #ffe08a;
  background:
    linear-gradient(180deg, #fff3c04d, #ffd54a26 45%, #3a2c1088),
    url(img/ceu_deus.jpg) center / cover;
  box-shadow: 0 0 0 6px #2a1f08, 0 0 0 8px #ffd54acc, 0 0 60px #ffd54aaa, 0 0 120px 30px #ffd54a33, inset 0 0 70px #0008;
}
body.dourado #tabuleiro::before, body.dourado #tabuleiro::after { background: linear-gradient(90deg, transparent, #ffd54a, transparent); box-shadow: 0 0 22px #ffe9a0, 0 0 44px #ffd54a88; animation: pulsoDourado 2.4s ease-in-out infinite alternate; }
body.dourado #tabuleiro .face, body.dourado #tabuleiro .faceEsq, body.dourado #tabuleiro .faceDir { background: linear-gradient(180deg, #a8842a 0%, #5e4712 35%, #2a1f08 100%); }
body.dourado #tabuleiro .face { border-top-color: #ffe08a; }
body.dourado .lado { background: #3a2c1090; box-shadow: inset 0 6px 14px #000a, inset 0 0 0 1px #ffd54a44, 0 0 24px #ffd54a22; }
body.dourado .zona { background: #2a1f08cc; border-color: #ffd54a88; box-shadow: inset 0 0 18px #00000088, 0 0 10px #ffd54a33, 0 6px 0 #2a1f08, 0 7px 0 #0b0802, 0 12px 14px #000c; }
body.dourado .zona.monstros { border-color: #ffd54ac0; }
body.dourado .zona.magias { border-color: #ffe9a0b0; }
body.dourado .zona.campo { border-color: #ffe08aa0; box-shadow: inset 0 0 18px #00000088, 0 6px 0 #2a1f08, 0 7px 0 #0b0802, 0 12px 14px #000c; }
body.dourado .zona.pilha { border-color: #e0b84aaa; }
body.dourado .zona .rotulo { color: #ffd54ab0; }
body.dourado .lpBadge, body.dourado #fases { border-color: #ffd54a88; box-shadow: 0 8px 24px #000a, 0 0 18px #ffd54a44; }
body.dourado #fasesLado .item { border-color: #ffd54a55; }

/* ---------- O Lobo do Mato em campo: noite azulada (o ceu da Besta com as cores viradas para o azul, mais sutil), nevoa escura
   deslizando, uma lua palida no alto e vinheta; perde para a Besta, os deuses e o Lula ---------- */
body.lobo { background: #02030a radial-gradient(ellipse at 50% 20%, #10204a 0%, #070d22 45%, #02030a 100%); }
body.lobo #fundoTema .ceu { background-image: linear-gradient(180deg, #0000, #0000 55%, #02030a99), url(img/ceu_besta.jpg); filter: hue-rotate(195deg) saturate(.5) brightness(.7); }
body.lobo #fundoTema .lua { display: block; inset: auto; left: 66%; top: 5vh; width: 10vh; height: 10vh; border-radius: 50%; background: radial-gradient(circle at 40% 36%, #f3ecd0, #cfc39a 58%, #847960 100%); box-shadow: 0 0 10px #fff3c8aa, 0 0 34px #c9d6ff55, 0 0 80px #5a1a2a66; }
body.lobo #fundoTema .lua::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #5a4f36aa 0 9%, #0000 10%), radial-gradient(circle at 62% 26%, #5a4f36aa 0 6%, #0000 7%), radial-gradient(circle at 56% 62%, #5a4f36aa 0 12%, #0000 13%), radial-gradient(circle at 28% 66%, #5a4f36aa 0 6%, #0000 7%); }
body.lobo #fundoTema .nuvens { display: block; mix-blend-mode: multiply; filter: invert(1) brightness(1.15) contrast(1.4); }
body.lobo #fundoTema .n2 { --nuvemAltura: 40vh; --nuvemTempo: 110s; top: 4vh; height: 40vh; opacity: .5; }
body.lobo #fundoTema .n2 i { animation-direction: reverse; }
body.lobo #fundoTema .n3 { --nuvemAltura: 47.5vh; --nuvemTempo: 75s; top: 21vh; height: 47.5vh; opacity: .6; }
body.lobo #fundoTema .brilho { display: block; background: radial-gradient(ellipse at 66% 12%, #9fb7ff55 0%, #30509a33 22%, #0000 55%); mix-blend-mode: screen; animation: pulsarBrilho 5s ease-in-out infinite alternate; }
body.lobo #fundoTema .vinheta { display: block; background: radial-gradient(ellipse at 50% 45%, #0000 40%, #02030a99 80%, #010208 100%); }
body.lobo #chao { background: radial-gradient(ellipse at 50% 100%, #0000 0%, #0000 35%, #070d2299 85%), radial-gradient(ellipse at 50% 100%, #1c3a8a55 0%, #0000 55%); }
body.lobo #tabuleiro { border-color: #6f86d6; box-shadow: 0 0 0 6px #070d22, 0 0 0 8px #6f86d6aa, 0 0 50px #4a6adf66, inset 0 0 70px #000a; }
body.lobo .zona { border-color: #6f86d688; }
body.lobo .zona.monstros { border-color: #8fa8ffb0; }
body.lobo .zona .rotulo { color: #8fa8ffb0; }
body.lobo .lpBadge, body.lobo #fases { border-color: #6f86d688; box-shadow: 0 8px 24px #000a, 0 0 18px #6f86d644; }

/* ---------- a Besta Absoluta em campo: tempestade negra (img/ceu_besta.jpg), brasa vermelha pulsando, nevoa escura deslizando,
   relampagos vermelhos caindo no fundo (jogo.js relampagosBesta), cinzas flutuando e vinheta; vence o ceu dourado dos outros deuses ---------- */
body.besta { background: #0a0203 radial-gradient(ellipse at 50% 20%, #4a0a0e 0%, #1c0407 45%, #050102 100%); }
body.besta #fundoTema .ceu { background-image: linear-gradient(180deg, #0000, #0000 55%, #0a020388), url(img/ceu_besta.jpg); }
body.besta #fundoTema .nuvens { display: block; mix-blend-mode: multiply; filter: invert(1) brightness(1.08) contrast(1.5); }   /* as nuvens claras do tile viram fumaca negra deslizando sobre o ceu vermelho */
body.besta #fundoTema .n2 { --nuvemAltura: 40vh; --nuvemTempo: 80s; top: 4vh; height: 40vh; opacity: .7; }
body.besta #fundoTema .n2 i { animation-direction: reverse; }
body.besta #fundoTema .n3 { --nuvemAltura: 47.5vh; --nuvemTempo: 55s; top: 21vh; height: 47.5vh; opacity: .8; }
body.besta #fundoTema .brilho { display: block; background: radial-gradient(ellipse at 50% 30%, #ff3a2a88 0%, #b0101044 22%, #50060622 45%, #0000 65%); mix-blend-mode: screen; animation: pulsarBrasa 2.6s ease-in-out infinite; }
@keyframes pulsarBrasa { 0% { opacity: .55; } 18% { opacity: .9; } 30% { opacity: .6; } 55% { opacity: 1; } 70% { opacity: .5; } 100% { opacity: .55; } }
body.besta #fundoTema .clarao { display: block; background: radial-gradient(ellipse at 50% 15%, #ff5a3acc 0%, #ff2a1a66 30%, #0000 70%); mix-blend-mode: screen; opacity: 0; }
body.besta #fundoTema .relampagos { display: block; }
#fundoTema .raioSvg { position: absolute; left: 0; top: 0; scale: .5; transform-origin: 0 0; }   /* o raio e desenhado em coordenadas da tela e reduzido para a camada de meia resolucao */
#fundoTema .raioSvg, .fx.raioVermelho .raioSvg { filter: drop-shadow(0 0 8px #ff3a2a) drop-shadow(0 0 20px #ff2a1acc); }
#fundoTema .raioFora, .fx.raioVermelho .raioFora { fill: none; stroke: #ff5a3a; stroke-linejoin: round; stroke-linecap: round; opacity: .9; filter: blur(4px); }
#fundoTema .raioDentro, .fx.raioVermelho .raioDentro { fill: none; stroke: #fff2e8; stroke-linejoin: round; stroke-linecap: round; }
body.besta #fundoTema .cinzas { display: block; }
#fundoTema .cinzas i { position: absolute; bottom: -2vh; width: var(--s, 2px); height: var(--s, 2px); border-radius: 50%; background: #ff7a5a; box-shadow: 0 0 3px .5px #ff3a2a; opacity: 0; animation: flutuarCinza var(--t, 20s) linear infinite var(--d, 0s); }
@keyframes flutuarCinza { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: .85; } 50% { transform: translate(var(--x, 0px), -27.5vh); } 90% { opacity: .6; } 100% { transform: translate(calc(var(--x, 0px) * -.6), -55vh); opacity: 0; } }
body.besta #fundoTema .vinheta { display: block; background: radial-gradient(ellipse at 50% 45%, #0000 40%, #0a020399 80%, #050102 100%); }
body.besta #chao {   /* sem grade: so um brilho vermelho embaixo da mesa sumindo no escuro */
  background:
    radial-gradient(ellipse at 50% 100%, #0000 0%, #0000 35%, #1c040799 85%),
    radial-gradient(ellipse at 50% 100%, #6a0a1066 0%, #0000 55%);
}
body.besta #tabuleiro {
  border-color: #ff5a5a;
  background:
    linear-gradient(180deg, #2a060866, #7a101444 45%, #0a020388),
    url(img/ceu_besta.jpg) center / cover;
  box-shadow: 0 0 0 6px #1c0407, 0 0 0 8px #ff3b3bcc, 0 0 60px #ff2a2aaa, 0 0 120px 30px #ff202033, inset 0 0 70px #000a;
}
body.besta #tabuleiro::before, body.besta #tabuleiro::after { background: linear-gradient(90deg, transparent, #ff4a3a, transparent); box-shadow: 0 0 14px #ff4a3a; animation: pulsoBesta 1.8s ease-in-out infinite alternate; }
@keyframes pulsoBesta { from { opacity: .7; } to { opacity: 1; } }
body.besta #tabuleiro .face, body.besta #tabuleiro .faceEsq, body.besta #tabuleiro .faceDir { background: linear-gradient(180deg, #8a1c24 0%, #3e0a10 35%, #150305 100%); }
body.besta #tabuleiro .face { border-top-color: #ff7a7a; }
body.besta .lado { background: #1c040790; box-shadow: inset 0 6px 14px #000a, inset 0 0 0 1px #ff3b3b44, 0 0 24px #ff3b3b22; }
body.besta .zona { background: #140305cc; border-color: #ff3b3b88; box-shadow: inset 0 0 18px #00000088, 0 0 10px #ff3b3b33, 0 6px 0 #1c0407, 0 7px 0 #050102, 0 12px 14px #000c; }
body.besta .zona.monstros { border-color: #ff3b3bc0; }
body.besta .zona.magias { border-color: #ff8a8ab0; }
body.besta .zona.campo { border-color: #ff6a6aa0; box-shadow: inset 0 0 18px #00000088, 0 6px 0 #1c0407, 0 7px 0 #050102, 0 12px 14px #000c; }
body.besta .zona.pilha { border-color: #d04a4aaa; }
body.besta .zona .rotulo { color: #ff8a8ab0; }
body.besta .lpBadge, body.besta #fases { border-color: #ff3b3b88; box-shadow: 0 8px 24px #000a, 0 0 18px #ff3b3b44; }
body.besta #fasesLado .item { border-color: #ff3b3b55; }
/* mesa quadrada com fileiras de espetos nas bordas de cima e de baixo */
body.besta #tabuleiro { border-radius: 0; }
body.besta #tabuleiro .face { border-radius: 0; }
body.besta .lado { border-radius: 0; }
body.besta #tabuleiro::before, body.besta #tabuleiro::after { left: 1%; right: 1%; height: 16px; border-radius: 0; box-shadow: none; animation: none; opacity: 1; }
body.besta #tabuleiro::before { top: -17px; background: conic-gradient(from 150deg at 50% 0%, #3a0608 0 60deg, #0000 0) 0 0 / 18px 16px repeat-x; filter: drop-shadow(0 -1px 1px #ff3a2a) drop-shadow(0 0 6px #ff2a1a99); }
body.besta #tabuleiro::after { bottom: -17px; background: conic-gradient(from -30deg at 50% 100%, #3a0608 0 60deg, #0000 0) 0 0 / 18px 16px repeat-x; filter: drop-shadow(0 1px 1px #ff3a2a) drop-shadow(0 0 6px #ff2a1a99); }
/* placas dos jogadores: vermelhas, com uma coroa de pontas em cima e as laterais em bico */
body.besta .lpBadge, body.besta .lpBadge.vez { background: none; border-color: transparent; box-shadow: none; border-radius: 0; }   /* sem filter: a foto pulsa e o filtro repintaria a placa toda a cada quadro */
body.besta .lpBadge::before, body.besta .lpBadge::after { content: ""; position: absolute; z-index: -1; pointer-events: none;
  clip-path: polygon(0 60%, 4% 40%, 9% 52%, 15% 8%, 21% 46%, 27% 26%, 33% 50%, 40% 0, 47% 48%, 53% 20%, 60% 50%, 67% 4%, 74% 46%, 80% 28%, 86% 52%, 92% 14%, 97% 48%, 100% 62%, 100% 100%, 0 100%); }
body.besta .lpBadge::before { inset: -22px -16px -6px -16px; background: linear-gradient(180deg, #5a0a10 0%, #1a0406 45%, #0a0203 100%); }
body.besta .lpBadge::after { inset: -24px -18px -8px -18px; z-index: -2; background: #ff3a2a; }
body.besta .lpBadge .nome, body.besta .lpBadge.vez .nome { color: #ff8a6a; text-shadow: 0 0 8px #ff2a1a88; }
body.besta .lpBadge .valor { color: #ff4a3a; text-shadow: 0 0 10px #ff2a1a99; }
body.besta .lpBadge .valor small { color: #ff9a8a; }
body.besta .lpBadge .barra { border-color: #ff3a2a; background: #1a0406; box-shadow: inset 0 0 6px #000, 0 0 10px #ff3a2a55; }
body.besta .lpBadge .barra::before { background: #2a0608; border-color: #ff3a2a; }
body.besta .lpBadge .vezTag { background: #ff2a1a; color: #fff; border-radius: 0; box-shadow: none; clip-path: polygon(0 50%, 8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%); padding: 2px 14px 2px 16px; }
body.besta .lpBadge .avatar, body.besta .lpBadge.vez .avatar { border-color: #ff3a2a; box-shadow: 0 6px 18px #000c, 0 0 18px #ff2a1a99; }
body.besta .lpBadge.vez, body.besta .lpBadge.vez .avatar { animation: none; }   /* o pulso dourado do tema normal (box-shadow animado) venceria a chapa vermelha */
body.besta .lpBadge.op { right: 20px; bottom: 14px; }   /* a chapa em bico passa da placa; afastada para nao ser cortada pelo overflow do #centroMesa */
body.besta .lpBadge.eu { left: 20px; bottom: 14px; }
@media (max-height: 520px), (max-width: 760px) { body.besta .lpBadge::before { inset: -14px -4px -2px -4px; } body.besta .lpBadge::after { inset: -16px -6px -4px -6px; } }
/* nomes no topo, fases do meio e botoes de fase: tudo em vermelho e em bico */
body.besta #topo .nome { color: #ff5a4a; text-shadow: 0 0 8px #ff2a1a88; }
body.besta #topo .tag { color: #b04a40; }
body.besta #fases { border-radius: 0; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); background: #1a0406ee; border-color: #ff3a2a66; box-shadow: none; }
body.besta #fases span { border-radius: 0; color: #a04a40; }
body.besta #fases span.passou { color: #ff9a8a; }
body.besta #fases span.pode { color: #ffb0a0; }
body.besta #fases span.atual { background: #ff2a1a; color: #fff; box-shadow: none; }
body.besta #fasesLado div { border-radius: 0; clip-path: polygon(0 50%, 12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%); background: #1a0406ee; border-color: #ff3a2a55; color: #b04a40; box-shadow: none; }
body.besta #fasesLado div.passou { color: #ff9a8a; }
body.besta #fasesLado div.pode { border-color: #ff3a2a; color: #ffb0a0; }
body.besta #fasesLado div.pode:hover { background: #4a0a10; color: #fff; border-color: #ff6a4a; }
body.besta #fasesLado div.atual { background: linear-gradient(180deg, #ff4a2a, #b0100a); color: #fff; border-color: #ff6a4a; box-shadow: none; }
body.besta #fasesLado div.encerrar.pode { background: #6a0a12dd; border-color: #ff6a4a; color: #fff; }
body.besta #fasesLado div.encerrar.pode:hover { background: #9a1018; }

/* ---------- Lula em campo: o campo fica vermelho PT, com a estrela branca ao fundo (a Besta e os deuses tem prioridade) ---------- */
body.lula { background: #3a0000 radial-gradient(ellipse at 50% 20%, #e3261c 0%, #8a0a08 45%, #2a0000 100%); }
body.lula #fundoTema .ceu { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpolygon points='100,18 119,74 178,75 131,110 148,166 100,132 52,166 69,110 22,75 81,74' fill='%23fff' fill-opacity='.22'/%3E%3C/svg%3E"), radial-gradient(ellipse at 50% 32%, #ff3b30 0%, #b00d0a 45%, #3a0000 100%); background-size: auto 78%, cover; background-position: 50% 30%, center; background-repeat: no-repeat; }
body.lula #fundoTema .brilho { display: block; background: radial-gradient(ellipse at 50% 30%, #ff8a7a88 0%, #ff2a1a44 30%, #0000 65%); mix-blend-mode: screen; animation: pulsarBrilho 3.6s ease-in-out infinite alternate; }
body.lula #chao { background: radial-gradient(ellipse at 50% 100%, #0000 0%, #0000 35%, #3a000099 85%); }
body.lula #tabuleiro {
  border-color: #fff;
  background: linear-gradient(180deg, #ff3b3033, #b00d0a55 45%, #2a000088), radial-gradient(ellipse at 50% 50%, #c4140f 0%, #8a0a08 55%, #4a0403 100%);
  box-shadow: 0 0 0 6px #5a0000, 0 0 0 8px #ffffffcc, 0 0 60px #ff2a1aaa, 0 0 120px 30px #ff202033, inset 0 0 70px #0008;
}
body.lula #tabuleiro::before, body.lula #tabuleiro::after { background: linear-gradient(90deg, transparent, #fff, transparent); box-shadow: 0 0 16px #fff, 0 0 30px #ff3b30; }
body.lula #tabuleiro .face, body.lula #tabuleiro .faceEsq, body.lula #tabuleiro .faceDir { background: linear-gradient(180deg, #d4201a 0%, #7a0a08 35%, #2a0000 100%); }
body.lula #tabuleiro .face { border-top-color: #fff; }
body.lula .lado { background: #5a060590; box-shadow: inset 0 6px 14px #000a, inset 0 0 0 1px #ffffff44, 0 0 24px #ff3b3022; }
body.lula .zona { background: #4a0403cc; border-color: #ffffff88; box-shadow: inset 0 0 18px #00000088, 0 0 10px #ff3b3033, 0 6px 0 #5a0000, 0 7px 0 #2a0000, 0 12px 14px #000c; }
body.lula .zona .rotulo { color: #ffffffb0; }
body.lula .lpBadge, body.lula #fases { border-color: #ffffff88; box-shadow: 0 8px 24px #000a, 0 0 18px #ff3b3066; }
body.lula #fasesLado .item { border-color: #ffffff55; }

/* ---------- abertura: luz, cartas espalhadas, titulo e escolha de personagem ---------- */
#abertura { position: fixed; inset: 0; z-index: 95; overflow: hidden; color: #e8ecff; background: #04050d radial-gradient(ellipse at 50% 45%, #1a2250 0%, #0b0e24 45%, #04050d 100%); }
#abertura .luz { position: absolute; left: 50%; top: 50%; width: 170vmax; height: 170vmax; border-radius: 50%; pointer-events: none; z-index: 30;
  background: radial-gradient(circle closest-side, #fff 0%, #fff6c8 16%, #ffd54a99 38%, #ffd54a00 70%); }
#abertura .raios { position: absolute; left: 50%; top: 50%; width: 220vmax; height: 220vmax; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, #ffd54a00 0deg 8deg, #ffe9a044 8deg 11deg, #ffd54a00 11deg 19deg);
  -webkit-mask: radial-gradient(circle closest-side, #000 0%, transparent 70%); mask: radial-gradient(circle closest-side, #000 0%, transparent 70%); }
#abertura .cartasSoltas { position: absolute; inset: 0; transition: opacity 1.2s, filter 1.2s; }
#abertura .cartasSoltas.fundo { opacity: .22; filter: blur(2px) brightness(.6); }
#abertura .solta { position: absolute; width: 118px; height: 172px; border-radius: 7px; background-size: cover; background-position: center; overflow: hidden;
  box-shadow: 0 16px 44px #000d, 0 0 0 1px #ffffff22; transform: translate(-50%, -50%) scale(.1); opacity: 0; }
#abertura .solta.verso { background-image: url(img/verso.png); }
#abertura .solta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 32%, #ffffff66 48%, transparent 60%) 120% 0 / 250% 100% no-repeat; animation: brilhoCarta 4.5s linear infinite; }
@keyframes brilhoCarta { from { background-position: 120% 0; } to { background-position: -120% 0; } }
#abertura .faiscaAb { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px #ffd54a, 0 0 18px #ffd54a; animation: piscar 2.4s ease-in-out infinite; pointer-events: none; }
@keyframes piscar { 0%, 100% { opacity: 0; transform: scale(.3); } 50% { opacity: 1; transform: scale(1.2); } }
#abertura .tituloAb { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; pointer-events: none; opacity: 0; transition: top 1s cubic-bezier(.2,.8,.2,1); z-index: 5; }
#abertura .tituloAb h1 { margin: 0; font-size: clamp(42px, 8vw, 100px); font-weight: 900; letter-spacing: 10px; text-transform: uppercase;
  background: linear-gradient(180deg, #fff6c8 0%, #ffd54a 42%, #c47f12 68%, #ffe08a 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 22px #ffd54a77) drop-shadow(0 5px 0 #3a2600); transition: font-size 1s, letter-spacing 1s; }
#abertura .tituloAb .sub { letter-spacing: 7px; text-transform: uppercase; color: #aab4ff; font-size: 14px; margin-top: 10px; transition: opacity .5s; }
#abertura .tituloAb.topo { top: 22px; transform: none; }
#abertura .tituloAb.topo h1 { font-size: clamp(24px, 3.6vw, 40px); letter-spacing: 6px; }
#abertura .tituloAb.topo .sub { opacity: 0; height: 0; margin: 0; }
#abertura .dica, #abertura .dicaSom { position: absolute; bottom: 24px; left: 0; right: 0; text-align: center; color: #8a93cc; font-size: 13px; letter-spacing: 3px; text-transform: uppercase; opacity: 0; pointer-events: none; }
#abertura .dicaSom { opacity: 1; bottom: auto; top: 14px; color: var(--ouro); letter-spacing: 1px; text-transform: none; }
#abertura .selecao { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); width: min(1080px, 94vw); display: flex; flex-direction: column; align-items: center; gap: 16px; z-index: 10; opacity: 0; }
#abertura .selecao h2 { margin: 0; font-size: 20px; letter-spacing: 5px; text-transform: uppercase; text-shadow: 0 0 18px #4aa3ff88; }
#abertura .duelistas { display: flex; align-items: stretch; gap: 20px; width: 100%; }
#abertura .duelista { flex: 1; background: #080c2ad9; border: 1px solid #6f7fd6aa; border-radius: 16px; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 20px 60px #000b, 0 0 26px #3d5bff22; backdrop-filter: blur(6px); }
#abertura .duelista .rotulo { font-size: 12px; letter-spacing: 4px; text-transform: uppercase; font-weight: 700; }
#abertura .duelista.j1 .rotulo { color: var(--eu); } #abertura .duelista.j2 .rotulo { color: var(--op); }
#abertura .duelista.j1 { border-color: #4aa3ff66; } #abertura .duelista.j2 { border-color: #ff5a5a66; }
#abertura .opcoes { display: flex; gap: 12px; }
#abertura .opcao { flex: 1; position: relative; height: 270px; border-radius: 12px; border: 2px solid #ffffff22; cursor: pointer; overflow: hidden;
  background: radial-gradient(ellipse at 50% 110%, #1c2c6e 0%, #0b1236 70%); display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  filter: saturate(.55) brightness(.7); transition: transform .2s, border-color .2s, box-shadow .2s, filter .3s; }
#abertura .opcao img { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); height: 86%; max-width: 96%; object-fit: contain; filter: drop-shadow(0 12px 22px #000d); transition: transform .3s; }
#abertura .opcao .nomeP { position: relative; z-index: 1; width: 100%; text-align: center; padding: 22px 0 8px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; font-size: 14px; background: linear-gradient(180deg, transparent, #000d 60%); }
#abertura .opcao:hover { transform: translateY(-4px); filter: saturate(.9) brightness(.95); border-color: #ffffff66; }
#abertura .opcao.escolhido { border-color: var(--ouro); box-shadow: 0 0 0 2px var(--ouro), 0 0 30px var(--ouro); filter: none; transform: translateY(-6px) scale(1.03); }
#abertura .opcao.escolhido img { transform: translateX(-50%) scale(1.07); }
#abertura .duelista input, #abertura select { background: #0b1236; border: 1px solid #6f7fd6aa; color: #e8ecff; border-radius: 8px; padding: 8px 10px; font-size: 14px; }
#abertura .duelista input { text-align: center; }
#abertura .vs { align-self: center; font-size: 34px; font-weight: 900; color: var(--ouro); text-shadow: 0 0 22px #ffd54a99; }
#abertura .rodape { display: flex; align-items: center; gap: 20px; }
#abertura .rodape label { display: flex; align-items: center; gap: 8px; color: #c9cff5; font-size: 13px; }
#abertura .btnDuelar { font-size: 18px; padding: 12px 44px; letter-spacing: 5px; text-transform: uppercase; font-weight: 800; }
#abertura .btnDuelar:disabled { opacity: .4; cursor: not-allowed; }
#abertura .btnDuelar:not(:disabled) { animation: pulsarBotao 1.6s ease-in-out infinite; }
@keyframes pulsarBotao { 0%, 100% { box-shadow: 0 0 16px #4b3fb888; } 50% { box-shadow: 0 0 40px #8a7ff0; } }
#abertura .cpuToggle { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; color: #c9cff5; cursor: pointer; margin-top: 2px; }
#abertura .cpuToggle input { accent-color: var(--op); width: 16px; height: 16px; cursor: pointer; margin: 0; }
#abertura .cpuToggle select { padding: 4px 8px; font-size: 12px; }
#abertura .cpuToggle select:disabled { opacity: .45; }
#abertura .duelista.j2.cpu { border-color: #ff5a5acc; box-shadow: 0 0 26px #ff5a5a2e inset; }
#abertura .modos2 { display: flex; gap: 18px; align-items: stretch; justify-content: center; }
#abertura .modoBtn { display: flex; align-items: center; gap: 12px; padding: 14px 30px; border-radius: 14px; border: 2px solid #6f7fd6aa; background: #0b1236dd; color: #e8ecff; cursor: pointer; font-size: 20px; font-weight: 800; letter-spacing: 4px; text-transform: uppercase; user-select: none; transition: transform .15s, box-shadow .3s, border-color .3s, background .3s; }
#abertura .modoBtn:hover { transform: translateY(-2px); box-shadow: 0 0 26px #4aa3ff66; border-color: #9fb6ff; }
#abertura .modoBtn.escolhido { border-color: var(--ouro); background: linear-gradient(180deg, #3a2c10, #1a1408); box-shadow: 0 0 0 1px var(--ouro), 0 0 30px #ffd54a66; animation: pulsarBotao 1.6s ease-in-out infinite; }
#abertura .modoBtn .ic { font-size: 28px; line-height: 1; }
#abertura .modoBtn select { font-size: 14px; letter-spacing: 1px; text-transform: none; font-weight: 700; padding: 6px 10px; margin-left: 6px; cursor: pointer; }
#abertura .modoBtn.cpu:not(.escolhido) select { display: none; }
#abertura .sozinho { color: #8a93cc; font-size: 13px; cursor: pointer; text-decoration: underline; }
#abertura .sozinho:hover { color: #c9cff5; }
#abertura .sozinho.escolhido { color: var(--ouro); text-decoration: none; font-weight: 700; }
@media (max-height: 820px) { #abertura .modos2 { gap: 10px; } #abertura .modoBtn { font-size: 15px; padding: 9px 18px; gap: 8px; } #abertura .modoBtn .ic { font-size: 20px; } }
#abertura #linkOnline.sozinho { color: #8a93cc; font-size: 13px; cursor: pointer; text-decoration: underline; }
#abertura .versaoJogo { margin-top: 10px; font-size: 11px; letter-spacing: 1px; color: #5862a8; text-align: center; }
/* retrato do personagem na placa de PV */
.lpBadge { overflow: visible; transition: opacity .5s, box-shadow .5s, border-color .5s; }
.lpBadge .avatar { transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s; transform-origin: center; }
/* de quem e a vez: placa pulsando em dourado, foto maior e etiqueta VEZ; a outra placa fica mais apagada */
.lpBadge:not(.vez) { opacity: .72; }
.lpBadge.vez { opacity: 1; border-color: var(--ouro); animation: pulsoVez 1.8s ease-in-out infinite; }
@keyframes pulsoVez { 0%, 100% { box-shadow: 0 8px 24px #000a, 0 0 0 2px #ffd54a99, 0 0 18px #ffd54a66; } 50% { box-shadow: 0 8px 24px #000a, 0 0 0 3px var(--ouro), 0 0 40px #ffd54acc; } }
.lpBadge.vez .avatar { transform: scale(1.35); box-shadow: 0 8px 22px #000c, 0 0 26px var(--ouro), 0 0 50px #ffd54a88; animation: pulsoFoto 1.8s ease-in-out infinite; }
@keyframes pulsoFoto { 0%, 100% { box-shadow: 0 8px 22px #000c, 0 0 22px var(--ouro), 0 0 40px #ffd54a66; } 50% { box-shadow: 0 8px 22px #000c, 0 0 34px var(--ouro), 0 0 70px #ffd54aaa; } }
.lpBadge.vez .nome { color: var(--ouro); }
.lpBadge .vezTag { position: absolute; top: -12px; background: var(--ouro); color: #1a1200; font-size: 10px; font-weight: 800; letter-spacing: 3px; padding: 2px 10px 2px 12px; border-radius: 10px; box-shadow: 0 2px 10px #000a, 0 0 12px #ffd54a99; }
.lpBadge.eu .vezTag { left: 14px; } .lpBadge.op .vezTag { right: 14px; }
.lpBadge .avatar { position: absolute; width: 74px; height: 74px; border-radius: 50%; object-fit: cover; object-position: 50% 12%; background: #0b1236; border: 2px solid var(--ouro); box-shadow: 0 6px 18px #000c, 0 0 14px #ffd54a55; }
.lpBadge.op .avatar { left: -34px; top: -10px; } .lpBadge.eu .avatar { right: -34px; top: -10px; }
.lpBadge.op { padding-left: 46px; } .lpBadge.eu { padding-right: 46px; }
@media (max-height: 520px), (max-width: 760px) {
  #abertura .opcao { height: 150px; } #abertura .opcao .nomeP { font-size: 11px; padding-top: 12px; }
  #abertura .selecao { gap: 8px; top: 54%; } #abertura .duelista { padding: 8px 10px 10px; gap: 6px; } #abertura .vs { font-size: 22px; }
  #abertura .btnDuelar { font-size: 14px; padding: 8px 26px; } #abertura .solta { width: 70px; height: 102px; }
  .lpBadge .avatar { width: 48px; height: 48px; } .lpBadge.op .avatar { left: -22px; } .lpBadge.eu .avatar { right: -22px; } .lpBadge.op { padding-left: 30px; } .lpBadge.eu { padding-right: 30px; }
}

/* ---------- animacoes de turno e compra ---------- */
#bannerTurno {
  position: fixed; left: 0; right: 0; top: 38%; z-index: 150; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 18px 0;
  background: linear-gradient(90deg, transparent, #000d 18%, #000d 82%, transparent);
}
#bannerTurno::before, #bannerTurno::after {
  content: ""; position: absolute; left: 15%; right: 15%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--cor), transparent); box-shadow: 0 0 16px var(--cor);
}
#bannerTurno::before { top: 0; } #bannerTurno::after { bottom: 0; }
#bannerTurno .t { font-size: 13px; letter-spacing: 5px; text-transform: uppercase; color: #aab4ff; }
#bannerTurno .n { font-size: 46px; font-weight: 800; letter-spacing: 2px; color: #fff; text-shadow: 0 0 30px var(--cor), 0 0 60px var(--cor), 0 2px 0 #000; line-height: 1.1; }
.cartaVoando {
  position: fixed; z-index: 160; pointer-events: none; border-radius: 5px;
  background-size: cover; background-position: center; box-shadow: 0 24px 48px #000d;
  transform-origin: center; will-change: transform;
}
.cartaVoando.verso { background-image: url(img/verso.png); }
@media (prefers-reduced-motion: reduce) { .carta, #mao .maoItem { transition: none; } }

/* ---------- celular: painel recolhivel e aviso de tela em pe ---------- */
#btnPainel { display: none; }
.somenteCelular { display: none; }        /* no PC, "Encerrar turno" fica no menu de fases */
#painel .fecharPainel { display: none; }
#avisoRetrato { display: none; }
.lpBadge { cursor: pointer; }

/* ---------- telas menores ---------- */
@media (max-width: 1400px) { :root { --cw: 86px; } #painel { width: 280px; } #topo .grupo { min-width: 280px; } }
@media (max-width: 1250px) { #fasesLado { display: none; } }
@media (max-width: 1200px) { :root { --cw: 74px; } .lpBadge { min-width: 160px; } }
@media (max-width: 1000px) { :root { --cw: 62px; } }
@media (max-height: 940px) { :root { --cw: 86px; --gap: 7px; } }
@media (max-height: 840px) { :root { --cw: 74px; --gap: 6px; } #tabuleiro { padding: 10px 14px 8px; } }
@media (max-height: 740px) { :root { --cw: 62px; } .zona .rotulo { display: none; } }
@media (max-height: 650px) { :root { --cw: 54px; } }

/* ---------- celular em modo paisagem (tela baixa) ---------- */
@media (max-height: 520px), (max-width: 760px) {
  :root { --cw: 40px; --gap: 4px; --espessura: 26px; }
  #topo { padding: 3px 8px; gap: 6px; }
  #topo .grupo { min-width: 0; }
  #topo .lpbtns, #topo .tag { display: none; }        /* os PV se ajustam tocando na placa de PV */
  #topo .centro button { padding: 4px 8px; font-size: 12px; }
  #btnPainel { display: inline-block; }
  .somenteCelular { display: inline-block; }
  #painel { position: fixed; top: 0; right: 0; bottom: 0; width: min(72vw, 380px); transform: translateX(100%); transition: transform .2s; z-index: 80; box-shadow: -10px 0 30px #000c; }
  #painel.aberto { transform: none; }
  #painel .fecharPainel { display: block; position: absolute; top: 6px; left: 6px; z-index: 2; }
  #preview { padding-top: 40px; }
  #preview img { width: 55%; margin: 0 auto; }
  .lpBadge { min-width: 120px; padding: 3px 8px 5px; }
  .lpBadge .valor { font-size: 16px; } .lpBadge .nome { font-size: 9px; letter-spacing: 1px; }
  .lpBadge .barra { height: 10px; margin: 4px 0 0 8px; border-width: 1px; }
  .lpBadge .barra::before { width: 16px; height: 16px; font-size: 8px; line-height: 14px; left: -12px; border-width: 1px; }
  .lpBadge.op { bottom: 4px; right: 6px; } .lpBadge.eu { bottom: 4px; left: 6px; }
  #cena { padding-top: 2px; perspective: 700px; }
  #maoOp .carta { width: 14px; height: 20px; } #maoOp { min-height: 22px; padding: 0; top: 2px; gap: 2px; }
  #tabuleiro { padding: 6px 8px 5px; border-width: 2px; border-radius: 8px; box-shadow: 0 0 0 3px #0d1235, 0 0 0 4px #6f7fd6aa, 0 0 30px #3d5bff55, 0 0 50px 16px #000, inset 0 0 30px #000b; }
  #tabuleiro .face { border-top-width: 2px; }
  .lado { padding: 4px 5px; border-radius: 4px; }
  .fileira > :nth-child(2) { margin-right: 4px; } .fileira > :nth-child(8) { margin-left: 4px; }
  .zona { border-width: 1px; border-radius: 3px; transform: translateZ(5px); box-shadow: inset 0 0 8px #00000088, 0 3px 0 #0a0f30, 0 4px 0 #04050d, 0 6px 8px #000c; }
  .zona.pilha, .zona.campo { transform: translateZ(2px); box-shadow: inset 0 0 8px #00000088, 0 2px 0 #0a0f30, 0 4px 6px #000a; }
  .zona .rotulo { display: none; } .zona .icone { font-size: 14px; } .zona.monstros .icone, .zona.magias .icone { font-size: 11px; }
  .zona .contador { font-size: 9px; padding: 0 5px; top: -7px; right: -7px; }
  .zona .camada:nth-child(1) { transform: translate(-2px, -2px); } .zona .camada:nth-child(2) { transform: translate(-1px, -1px); }
  .carta { border-radius: 2px; }
  .carta .stats { font-size: 9px; padding: 0 4px; border-radius: 3px; letter-spacing: 0; }
  .carta .stats i { font-size: 8px; margin: 0 1px; }
  .carta.def .stats { transform: translate(calc(50% - 9px), -50%) rotate(-90deg); }
  .carta.def:hover .stats { transform: translate(calc(50% - 9px), -50%) rotate(-90deg) scale(1.4); }
  .carta.virada:not(.verso)::after { font-size: 6px; letter-spacing: 1px; }
  #centroTab { gap: 8px; padding: 1px 0; }
  #fases { padding: 2px 5px; } #fases span { font-size: 9px; padding: 1px 5px; } #turnoTab { font-size: 9px; }
  #mao { height: calc(var(--ch) * 1.15 + 30px); padding: 4px 6px 2px; }
  #mao .maoItem { margin: 0 -2px; transform: rotate(var(--rot, 0deg)) translateY(calc(var(--dy, 0px) * 0.3)); }
  .statsMao { font-size: 9px; min-height: 20px; line-height: 1.05; letter-spacing: 0; }
  #mao .maoItem:hover { transform: rotate(0deg) translateY(-10px) scale(1.05); }
  .carta.fantasma { box-shadow: 0 12px 24px #000, 0 0 0 1px var(--ouro); }
  #menu { min-width: 180px; } #menu button { padding: 9px 12px; font-size: 14px; }   /* alvos maiores para o dedo */
  #bannerTurno { padding: 8px 0; } #bannerTurno .n { font-size: 26px; } #bannerTurno .t { font-size: 10px; letter-spacing: 3px; }
  #fasesLado { display: none; }
  .fx .feixe { height: 10px; margin-top: -5px; } .fx .feixe::after { top: 3px; bottom: 3px; } .fx .carga { width: 26px; height: 26px; } .fx .impacto { width: 70px; height: 70px; }
  #aviso { top: 36px; font-size: 13px; padding: 6px 14px; }
  .caixa { padding: 14px; max-height: 94vh; } .caixa h1 { font-size: 20px; } .modos { flex-direction: column; gap: 8px; }
  .grade .item { width: 90px; } .grade .item .carta { width: 90px; height: 131px; }
  #sobreposicao h1 { font-size: 22px; }
}
@media (max-height: 400px) { :root { --cw: 34px; --gap: 3px; } #mao { height: calc(var(--ch) * 1.15 + 34px); } .lpBadge .valor { font-size: 14px; } }
@media (max-height: 340px) { :root { --cw: 30px; } }

/* celular em pe: pede para virar */
@media (orientation: portrait) and (max-width: 700px) {
  #avisoRetrato {
    display: flex; position: fixed; inset: 0; z-index: 300; background: #06081a;
    flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 20px; color: #e8ecff;
  }
  #avisoRetrato .fone { font-size: 56px; animation: girar 1.6s ease-in-out infinite alternate; }
  #avisoRetrato b { font-size: 20px; }
  #avisoRetrato span { color: #aab4ff; font-size: 14px; }
  @keyframes girar { from { transform: rotate(0deg); } to { transform: rotate(90deg); } }
}

/* logo Na-Va-Ja-Len na abertura (no lugar do titulo em texto) */
#abertura .tituloAb .logoAb { display: block; margin: 0 auto; width: min(72vw, 940px); max-height: 40vh; object-fit: contain; filter: drop-shadow(0 0 28px #ff3b1f99) drop-shadow(0 8px 12px #000d); }
#abertura .tituloAb.topo .logoAb { width: min(34vw, 380px); max-height: 15vh; filter: drop-shadow(0 0 14px #ff3b1f88) drop-shadow(0 4px 6px #000c); }
/* selo "Game of the Year Edition" embaixo do logo */
#abertura .tituloAb .seloAb { width: min(42vw, 500px); margin: 2px auto 0; filter: drop-shadow(0 0 16px #ffc94a77) drop-shadow(0 4px 6px #000d); transition: width .8s cubic-bezier(.2,.8,.2,1); }
#abertura .tituloAb .seloAb svg { display: block; width: 100%; height: auto; }
#abertura .tituloAb.topo .seloAb { display: none; }   /* na escolha dos duelistas o logo fica pequeno no topo, sem o selo */

/* cartas no Cemiterio em preto e branco, para nao confundir com as cartas nas zonas */
.zona.cemiterio .carta { filter: grayscale(1) brightness(.72); }

/* efeitos: aviso ATIVAR (efeito de monstro disponivel) e contador de rodadas (Quarentao, Pamela) */
.carta .ativar { position: absolute; left: 50%; top: -13px; transform: translateX(-50%); background: linear-gradient(#ffe27a, #ffc21a); color: #2a1d00; font-size: 9px; font-weight: 800; letter-spacing: 1.5px; padding: 3px 8px; border-radius: 9px; border: 1px solid #fff3b0; cursor: pointer; z-index: 6; white-space: nowrap; animation: brilhoAtivar 1.2s ease-in-out infinite alternate; }
.carta .ativar:hover { transform: translateX(-50%) scale(1.12); }
/* o aviso so aparece com o mouse sobre a carta (no celular, sem mouse, fica sempre visivel) */
@media (hover: hover) {
  .carta .ativar { opacity: 0; pointer-events: none; transition: opacity .18s; }
  .carta:hover .ativar, .carta .ativar:hover { opacity: 1; pointer-events: auto; }
}
@keyframes brilhoAtivar { from { box-shadow: 0 0 5px #ffd54a, 0 0 12px #ffb30066; } to { box-shadow: 0 0 12px #ffe27a, 0 0 26px #ffb300cc; } }
.carta .rodadas { position: absolute; right: -7px; top: -9px; background: #1b2a7a; color: #fff; border: 1px solid #8c96d6; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 10px; z-index: 6; font-variant-numeric: tabular-nums; box-shadow: 0 2px 6px #000a; }
#respostaFolha .caixa { max-width: 560px; }
#respostaFolha p { line-height: 1.5; }

/* abertura: tela de entrada (o som liga no clique), camera com zoom, cartas passando, relampagos e brilho do logo */
#abertura .entrada { position: absolute; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; cursor: pointer; background: #04050d radial-gradient(ellipse at 50% 50%, #141b45 0%, #080b22 50%, #04050d 100%); }
#abertura .entrada .brilhoEnt { position: absolute; left: 50%; top: 50%; width: 60vmin; height: 60vmin; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle closest-side, #ffd54a33 0%, #ffd54a00 70%); animation: respirarEnt 2.4s ease-in-out infinite; pointer-events: none; }
#abertura .entrada .textoEnt { position: relative; font-size: clamp(18px, 2.6vw, 30px); letter-spacing: 8px; text-transform: uppercase; font-weight: 800; color: #ffe9a0; text-shadow: 0 0 18px #ffd54a99; animation: pulsarEnt 1.6s ease-in-out infinite; }
#abertura .entrada .subEnt { position: relative; color: #8a93cc; font-size: 13px; letter-spacing: 2px; }
@keyframes respirarEnt { 0%, 100% { transform: translate(-50%, -50%) scale(.9); opacity: .7; } 50% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; } }
@keyframes pulsarEnt { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
#abertura .cena { position: absolute; inset: 0; z-index: 1; will-change: transform; }
#abertura .voo { position: absolute; inset: 0; pointer-events: none; }
#abertura .solta.voando { box-shadow: 0 20px 50px #000e, 0 0 0 1px #ffffff33; }
#abertura .flashAb { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 40; }
#abertura .dica { z-index: 6; }
#abertura .dicaSom { z-index: 61; }
#abertura .logoAb.brilhando { animation: brilhoLogo 1.1s ease-in-out 1; }
@keyframes brilhoLogo { 0%, 100% { filter: drop-shadow(0 0 28px #ff3b1f99) drop-shadow(0 8px 12px #000d) brightness(1); } 35% { filter: drop-shadow(0 0 60px #ffd54a) drop-shadow(0 8px 12px #000d) brightness(1.7); } }

/* efeitos das cartas: ativacao, fogo (Mapuches), buraco negro (Buracao), fusao, dano grande, bloqueio (Quarentao) */
.fx .auraAtivar { position: absolute; border-radius: 10px; border: 3px solid #fff3b0; box-shadow: 0 0 26px #ffd54a, inset 0 0 26px #ffd54a88; }
.fx .chama { position: absolute; border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%; background: radial-gradient(ellipse at 50% 80%, #fff7b0 0%, #ffb02a 30%, #ff4d00 60%, #ff4d0000 100%); filter: blur(1.5px); mix-blend-mode: screen; }
.fx .buracoNegro { position: absolute; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, #000 0 28%, #1a0a2a 38%, #5a2b8a 48%, #9b5cff 54%, #ffffff 56%, #9b5cff00 70%); box-shadow: 0 0 90px #6a3bd9, 0 0 180px #2a1050; }
.fx .buracoNegro::after { content: ""; position: absolute; inset: 12%; border-radius: 50%; border: 6px solid #ffffff22; border-top-color: #ffffffaa; border-left-color: #ffffff55; }
.fx .cartaFx { position: absolute; border-radius: 6px; background-size: cover; background-position: center; box-shadow: 0 16px 40px #000d, 0 0 0 1px #ffffff33; transform-origin: 50% 50%; }

/* ---------- Pintodia completo: luz branca, cartas partidas ao meio e a arena em tres pedacos ---------- */
/* escolha de zona (invocacao, fusao, ritual): as zonas validas pulsam e as outras do seu lado apagam */
body.escolhendoZona .lado.eu .zona:not(.alvo) { opacity: .4; }
body.escolhendoZona .zona.alvo { animation: pulsoZona .9s ease-in-out infinite alternate; }
@keyframes pulsoZona { from { box-shadow: 0 0 0 3px var(--ouro), 0 0 18px var(--ouro); background: #ffd54a22; } to { box-shadow: 0 0 0 5px #fff3b0, 0 0 40px var(--ouro), 0 0 70px #ffd54a88; background: #ffd54a55; } }
/* fusao pronta: aviso roxo na magia e os materiais sobem brilhando */
.carta .ativar.fusao { background: linear-gradient(#c7a4ff, #8a5cff); color: #fff; border-color: #e9ddff; animation: brilhoFusao 1.1s ease-in-out infinite alternate; }
@keyframes brilhoFusao { from { box-shadow: 0 0 6px #b388ff; } to { box-shadow: 0 0 14px #d1c4ff, 0 0 28px #8a5cffcc; } }
@media (hover: hover) { .carta .ativar.fusao { opacity: 1; pointer-events: auto; } }
.carta.material { translate: 0 -12px; box-shadow: 0 0 0 2px #d1c4ff, 0 0 22px #b388ff, 0 0 44px #8a5cff88; animation: brilhoMaterial 1.1s ease-in-out infinite alternate; }
@keyframes brilhoMaterial { from { box-shadow: 0 0 0 2px #d1c4ff, 0 0 14px #b388ff; } to { box-shadow: 0 0 0 3px #fff, 0 0 30px #d1c4ff, 0 0 60px #8a5cffaa; } }
/* as quatro partes do Pintodia na mao: brilho branco */
.carta.pintodiaPronto { translate: 0 -14px; animation: brilhoPintodia 1s ease-in-out infinite alternate; }
@keyframes brilhoPintodia { from { box-shadow: 0 0 0 2px #fff, 0 0 16px #fff; filter: brightness(1.05); } to { box-shadow: 0 0 0 3px #fff, 0 0 36px #fff, 0 0 70px #cfe8ff; filter: brightness(1.3); } }
/* O Mito: bola e grito de defesa */
.fx .bola { position: absolute; font-size: 56px; line-height: 1; filter: drop-shadow(0 8px 10px #000c); }
.fx .defesaMito { position: absolute; font: 900 36px Impact, 'Arial Black', sans-serif; color: #fff; letter-spacing: 2px; text-shadow: 0 0 14px #5ab0ff, 0 0 30px #5ab0ff, 2px 2px 0 #000; white-space: nowrap; }
/* ---------- animacoes das cartas (animacoes.js) ---------- */
.fx .bandeira { position: absolute; transform-origin: 0 50%; z-index: 1; filter: drop-shadow(0 10px 18px #000a); }
.fx .bandeira i { position: absolute; top: 0; display: block; }
.fx .mastro { position: absolute; width: 8px; border-radius: 4px; background: linear-gradient(90deg, #fff3b0, #b8892a 60%, #6b4e14); z-index: 2; box-shadow: 0 0 10px #000a; }
.fx .emojiFx { position: absolute; line-height: 1; z-index: 5; filter: drop-shadow(0 4px 8px #000c); }
.fx .confete { position: absolute; border-radius: 2px; }
.fx .raiosOuro { position: absolute; width: 170vmax; height: 170vmax; background: repeating-conic-gradient(from 0deg, #ffd54a00 0deg 8deg, #ffe9a077 8deg 12deg, #ffd54a00 12deg 20deg); -webkit-mask: radial-gradient(circle closest-side, #000 0%, transparent 62%); mask: radial-gradient(circle closest-side, #000 0%, transparent 62%); z-index: 1; }
.fx .textoMito { position: absolute; font: 900 clamp(70px, 13vw, 150px) Impact, 'Arial Black', sans-serif; letter-spacing: 4px; color: #ffe27a; -webkit-text-stroke: 3px #5a3a00; text-shadow: 0 0 24px #ffd54a, 0 0 60px #ff8a00, 5px 7px 0 #000; white-space: nowrap; z-index: 6; }
.fx .anelMago { position: absolute; z-index: 2; }
.fx .anelMago i, .fx .anelMago b, .fx .anelMago s { position: absolute; display: block; border-radius: 50%; box-sizing: border-box; }
.fx .anelMago i { inset: 0; border: 4px dashed #c07bff; box-shadow: 0 0 22px #9b4dff, inset 0 0 22px #9b4dff; }
.fx .anelMago b { inset: 13%; border: 3px dotted #e6ccff; box-shadow: 0 0 14px #b47bff; }
.fx .anelMago s { inset: 25%; border-radius: 0; background: conic-gradient(from 0deg, #9b4dff00, #9b4dff88, #9b4dff00, #9b4dff88, #9b4dff00); clip-path: polygon(50% 0, 62% 38%, 100% 38%, 69% 60%, 80% 100%, 50% 75%, 20% 100%, 31% 60%, 0 38%, 38% 38%); }
.fx .faiscaPreta { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: #0a0014; box-shadow: 0 0 6px #9b4dff, 0 0 12px #6a1fd0; }
.fx .corrente { position: absolute; height: 20px; width: 0; transform-origin: 0 50%; background-repeat: repeat-x; background-size: 44px 20px; z-index: 4; filter: drop-shadow(0 0 6px #b47bff); }
.fx .subindo { position: absolute; overflow: hidden; z-index: 3; }
.fx .subindo .cartaFx { box-shadow: none; }
.fx .poeira { position: absolute; border-radius: 50%; background: radial-gradient(circle closest-side, #d9c7a8cc 0%, #b8a07a66 50%, transparent 100%); filter: blur(6px); z-index: 4; }
.fx .flashFoto { position: absolute; width: 110px; height: 110px; background: radial-gradient(circle closest-side, #fff 0%, #ffffffaa 18%, transparent 60%), linear-gradient(90deg, transparent 47%, #fff 50%, transparent 53%), linear-gradient(0deg, transparent 47%, #fff 50%, transparent 53%); z-index: 5; }
.fx .textoMenos { position: absolute; font: 900 28px Impact, 'Arial Black', sans-serif; color: #ff5252; text-shadow: 0 0 10px #000, 2px 2px 0 #000; white-space: nowrap; z-index: 6; }
.fx .nota { position: absolute; font-weight: 900; line-height: 1; text-shadow: 0 0 8px #000, 1px 2px 0 #000; z-index: 4; }
.fx .folha { position: absolute; line-height: 1; z-index: 4; filter: drop-shadow(0 3px 4px #000a); }
.fx .chapeu { position: absolute; background-size: contain; background-repeat: no-repeat; background-position: center; z-index: 5; filter: drop-shadow(0 6px 8px #000b); }
.fx .sombra { position: absolute; background-size: contain; background-repeat: no-repeat; background-position: center; z-index: 5; filter: blur(1.2px) drop-shadow(0 0 16px #000); }
.fx .garra { position: absolute; width: 8px; border-radius: 50%; background: linear-gradient(transparent, #fff 18%, #ff3b3b 50%, #fff 82%, transparent); box-shadow: 0 0 14px #ff2a2a, 0 0 28px #ff2a2a88; transform-origin: 50% 0; z-index: 6; }
.fx .ondaPeito { position: absolute; border-radius: 50%; border: 5px solid #ffffffcc; box-shadow: 0 0 22px #fff8, inset 0 0 22px #fff5; z-index: 2; }
.fx .lama { position: absolute; border-radius: 48% 52% 55% 45%; background: radial-gradient(circle at 35% 30%, #a8c84a, #6c8a22 55%, #3f5512); box-shadow: 0 2px 4px #0007; z-index: 4; }
.fx .lama.mancha { border-radius: 40% 60% 46% 54%; z-index: 5; }
.fx .pantano { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(#6f8e26 0%, #455c16 40%, #22300a 100%); z-index: 2; }
.fx .pantano i { position: absolute; left: 0; right: 0; top: -26px; height: 28px; display: block; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='28'%3E%3Cpath d='M0 28 L0 16 Q30 0 60 14 T120 14 T180 14 T240 16 L240 28Z' fill='%236f8e26'/%3E%3C/svg%3E") repeat-x; }
.fx .bolha { position: absolute; border-radius: 50%; border: 2px solid #c8e07a99; background: radial-gradient(circle at 35% 30%, #e9f5b866, transparent 60%); }
.fx .pena { position: absolute; background-size: 100% 100%; transform-origin: 50% 100%; z-index: 2; filter: drop-shadow(0 3px 4px #0008); }
.fx .flecha { position: absolute; background-size: 100% 100%; transform-origin: 100% 50%; z-index: 5; filter: drop-shadow(0 3px 4px #0009); }
.fx .escurecer.roxo { background: radial-gradient(ellipse at 50% 45%, #2a0a4acc 10%, #0a0218f2 100%); }
.fx .escurecer.noite { background: radial-gradient(ellipse at 50% 20%, #16244ccc 10%, #03060ff2 100%); }
.fx .nevoa { position: absolute; border-radius: 50%; background: radial-gradient(circle closest-side, #a05cffaa 0%, #6a24c855 45%, transparent 100%); filter: blur(10px); z-index: 1; }
.fx .livro { position: absolute; width: min(42vw, 400px); aspect-ratio: 16 / 10; perspective: 1000px; transform-style: preserve-3d; z-index: 3; filter: drop-shadow(0 22px 34px #000d) drop-shadow(0 0 30px #a05cff88); }
.fx .livro .capaE, .fx .livro .capaD, .fx .livro .pagina { position: absolute; top: 0; bottom: 0; width: 50%; box-sizing: border-box; background: repeating-linear-gradient(transparent 0 11%, #6b5a3a55 11% 12.2%), linear-gradient(#f4e8c8, #e0cfa0); border: 3px solid #4a2a10; }
.fx .livro .capaE { left: 0; border-radius: 8px 0 0 8px; }
.fx .livro .capaD { left: 50%; border-radius: 0 8px 8px 0; }
.fx .livro .pagina { left: 50%; transform-origin: 0 50%; border-color: #8a6a3a; border-width: 1px; background: repeating-linear-gradient(transparent 0 11%, #6b5a3a66 11% 12.2%), linear-gradient(90deg, #ddc998, #f8eccb); backface-visibility: visible; }
.fx .neblina { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, #ece6ffd9 0%, #cfc3f28f 40%, #9a84d633 72%, transparent 100%); z-index: 2; will-change: transform, opacity; }
.fx .neblina.frente { z-index: 6; }
.fx .caminhaoFantasma { position: absolute; left: 0; top: 0; z-index: 4; }
.fx .caminhaoFantasma .corpo { position: absolute; inset: 0; background-size: contain; background-repeat: no-repeat; background-position: center; filter: brightness(1.75) saturate(.7) drop-shadow(0 0 22px #b9a0ff); will-change: transform, opacity; }   /* um drop-shadow so (eram dois, um de 54px: o mais caro da animacao) */
.fx .caminhaoFantasma .farol { position: absolute; left: 62%; width: 120%; height: 62%; transform: translateY(-50%); background: linear-gradient(90deg, #f2f8ffe6, #d9e8ff55 55%, transparent); clip-path: polygon(0 47%, 100% 0, 100% 100%, 0 53%); -webkit-mask: linear-gradient(180deg, #0000, #000 30%, #000 70%, #0000); mask: linear-gradient(180deg, #0000, #000 30%, #000 70%, #0000); }   /* bordas suaves por mascara, sem blur por quadro */
.fx .ondaPeito.roxa { border-color: #d6b3ffcc; box-shadow: 0 0 22px #a05cff, inset 0 0 22px #a05cff88; }
.fx .raioSvg { position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; }
.fx .raioFora { fill: none; stroke: #6fc4ff; stroke-linejoin: round; stroke-linecap: round; opacity: .55; filter: blur(5px); }
.fx .raioDentro { fill: none; stroke: #fff; stroke-linejoin: round; stroke-linecap: round; }
.fx .lua { position: absolute; border-radius: 50%; background: radial-gradient(circle at 38% 34%, #fffdf0, #f1e6bd 62%, #cdbb85); box-shadow: 0 0 60px #fff6cf, 0 0 140px #fff0b3aa, 0 0 260px #dfe9ff66; z-index: 1; }
.fx .lua i { position: absolute; display: block; border-radius: 50%; background: #d8c996aa; box-shadow: inset 2px 3px 6px #9c8a5a88; }
.fx .lua.sinistra { background: radial-gradient(circle at 40% 36%, #e8dcb4, #b9a271 55%, #4f4028 100%); box-shadow: 0 0 36px #c9b27a88, 0 0 120px #8a0f1acc, 0 0 280px #1c2f6e88; }
.fx .lua.sinistra i { background: #4e432caa; box-shadow: inset 2px 3px 8px #2a2214cc; }
.fx .nuvemLua { position: absolute; border-radius: 50%; background: radial-gradient(ellipse at 50% 50%, #04060fee 0%, #04060fbb 45%, #0000 72%); filter: blur(6px); z-index: 2; }
.fx .textoUivo { position: absolute; font: 900 clamp(54px, 9vw, 112px) Impact, 'Arial Black', sans-serif; letter-spacing: 6px; color: #dfe9ff; -webkit-text-stroke: 2px #1a2650; text-shadow: 0 0 22px #9fb7ff, 0 0 54px #5f7fff, 4px 6px 0 #000; white-space: nowrap; z-index: 6; }
.fx .pelo { position: absolute; width: 3px; border-radius: 2px 2px 50% 50%; background: linear-gradient(#6a5240, #2c2018); z-index: 5; }
.fx .seringa { position: absolute; transform-origin: 100% 50%; z-index: 4; filter: drop-shadow(0 8px 12px #000a); }
.fx .seringa .liquido { transform-box: fill-box; transform-origin: 100% 50%; }
.fx .textoMais { position: absolute; font: 900 34px Impact, 'Arial Black', sans-serif; color: #55f59a; text-shadow: 0 0 12px #0a5a2a, 2px 2px 0 #000; white-space: nowrap; z-index: 6; }
.fx .alianca { position: absolute; z-index: 3; filter: drop-shadow(0 0 22px #ffd54a) drop-shadow(0 12px 18px #000c); }
.fx .celular { position: absolute; z-index: 4; box-sizing: border-box; display: flex; flex-direction: column; border-radius: 34px; border: 9px solid #15171e; background: #0b141a; overflow: hidden; box-shadow: 0 30px 70px #000e, 0 0 0 2px #444a58; font-family: system-ui, 'Segoe UI', sans-serif; color: #e9edef; }
.fx .celular .topoCel { display: flex; align-items: center; gap: .5em; padding: .8em .9em; background: #202c33; }
.fx .celular .topoCel span { font-size: 1.5em; }
.fx .celular .topoCel small { margin-left: auto; color: #8696a0; font-size: .75em; }
.fx .celular .telaCel { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 1em; background: #0b141a radial-gradient(#ffffff0a 1px, transparent 1px) 0 0 / 18px 18px; }
.fx .celular .digitando { display: flex; gap: .35em; padding: .8em 1em; border-radius: 1em; background: #202c33; }
.fx .celular .digitando i { display: block; width: .55em; height: .55em; border-radius: 50%; background: #aebac1; }
.fx .celular .balao { max-width: 92%; padding: .6em .8em; border-radius: 0 1em 1em 1em; background: #202c33; font-size: 1.25em; font-weight: 700; line-height: 1.2; box-shadow: 0 2px 4px #0008; }
.fx .celular .balao small { display: block; text-align: right; margin-top: .25em; font-size: .5em; font-weight: 400; color: #53bdeb; }
.fx .pinta { position: absolute; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff7a7a, #d81e1e 60%, #7a0a0a); box-shadow: 0 0 5px #ff2a2a88; z-index: 4; }
.fx .textoQueda { position: absolute; font: 900 36px Impact, 'Arial Black', sans-serif; color: #ff5252; letter-spacing: 1px; text-shadow: 0 0 12px #000, 2px 2px 0 #000; white-space: nowrap; z-index: 6; }
.fx .gotaVomito { position: absolute; border-radius: 50% 50% 55% 55%; background: radial-gradient(circle at 35% 30%, #d7f06a, #8fb82a 60%, #55701a); z-index: 4; }
.fx .pulseira { position: absolute; border-radius: 50%; border: 6px dashed; box-sizing: border-box; filter: drop-shadow(0 3px 4px #0009); z-index: 3; }
.fx .textoPaz { position: absolute; font-size: clamp(90px, 15vw, 170px); line-height: 1; color: #fff; text-shadow: 0 0 22px #9dffb0, 0 0 54px #38d66a, 3px 4px 0 #0008; z-index: 5; }
.lado .bloqueio .pazGrade { position: absolute; left: calc(50% - 112px); top: 50%; transform: translate(-50%, -50%); font-size: 68px; line-height: 1; color: #fff; text-shadow: 0 0 14px #9dffb0, 0 0 30px #38d66a; }
.fx .abacaxi { position: absolute; line-height: 1; z-index: 5; filter: drop-shadow(0 8px 10px #000a); }
.fx .suco { position: absolute; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3a0, #f4c21f 70%); z-index: 4; }
.fx .nuvemBriga { position: absolute; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #e8dfca 70%); border: 3px solid #3a2f20; z-index: 4; }
.fx .textoPow { position: absolute; font: 900 clamp(38px, 5vw, 64px) Impact, 'Arial Black', sans-serif; color: #ffe23a; -webkit-text-stroke: 2px #c0211f; text-shadow: 3px 4px 0 #000; white-space: nowrap; z-index: 6; }
.fx .fioCabelo { position: absolute; border-radius: 3px 3px 50% 50%; background: linear-gradient(#2a1a10, #4f3320 60%, #6d4a30); transform-origin: 50% 0; z-index: 4; }
.carta .lavaCarta { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; z-index: 40; pointer-events: none; }
.carta .lavaGiro { position: absolute; left: 50%; top: 50%; }
.carta .lavaGoo { position: absolute; inset: -8px; }
.carta .lavaGoo i { position: absolute; display: block; top: -6%; height: 135%; border-radius: 0 0 50% 50% / 0 0 13% 13%; background: linear-gradient(#4a0800 0%, #b81800 28%, #f04000 52%, #ff8a00 72%, #ffd23a 88%, #fff2a0 100%); }
.carta .lavaPreto { position: absolute; inset: 0; background: #030303; }
.carta .lavaRachas { position: absolute; inset: 0; width: 100%; height: 100%; }
.carta .lavaRachas polyline { fill: none; stroke: #ff8a1e; stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 2px #ff5a00); }
.carta .lavaBrilho { position: absolute; inset: -4px; border-radius: 8px; box-shadow: 0 0 16px 4px #ff5a00, 0 0 34px 8px #ff3a0088; pointer-events: none; z-index: 39; }
.fx .poeiraCarta { position: absolute; border-radius: 40%; z-index: 4; }
.fx .virus { position: absolute; line-height: 1; z-index: 5; filter: drop-shadow(0 0 6px #7dff6e) drop-shadow(0 3px 5px #000a); }
.fx .nuvemVirus { position: absolute; width: min(120vmax, 1500px); height: min(120vmax, 1500px); border-radius: 50%; background: radial-gradient(circle closest-side, #7dff6e55 0%, #3fae3a33 35%, #0b3a1a22 65%, transparent 100%); z-index: 1; }
.fx .textoAids { position: absolute; text-align: center; white-space: nowrap; z-index: 6; font: 900 clamp(34px, 4.6vw, 58px) Impact, 'Arial Black', sans-serif; color: #ff5252; letter-spacing: 1px; text-shadow: 0 0 16px #000, 0 0 30px #7dff6e88, 3px 3px 0 #000; }
.fx .textoAids small { display: block; margin-top: 4px; font: 700 15px system-ui, 'Segoe UI', sans-serif; letter-spacing: 1px; color: #dfffd8; text-shadow: 0 0 8px #000, 1px 1px 0 #000; }
.fx.varredura { z-index: 200; overflow: hidden; }
.fx .cortina { position: absolute; top: 0; bottom: 0; left: 0; width: 125vw; z-index: 2; }
.fx .cortina.nordeste { background: linear-gradient(90deg, transparent 0, #c98f4acc 6%, #d9a35c 16%, #e3b878 50%, #d9a35c 84%, #c98f4acc 94%, transparent 100%); }
.fx .cortina.nordeste span { position: absolute; right: 12%; top: 16%; font-size: clamp(110px, 18vw, 230px); line-height: 1; filter: drop-shadow(0 0 40px #ffcf5a) drop-shadow(0 0 90px #ff9a2a); }
.fx .cortina.israel { background: linear-gradient(90deg, transparent 0, #ffe9a8cc 6%, #fff4cf 18%, #ffffff 50%, #fff4cf 82%, #ffe9a8cc 94%, transparent 100%); }
.fx .cortina.israel i { position: absolute; inset: 0; display: block; background: repeating-conic-gradient(from 0deg at 62% 50%, #ffd54a00 0deg 9deg, #ffd54a88 9deg 13deg, #ffd54a00 13deg 22deg); }
.fx.pintodia { z-index: 160; }
.fx.pintodia .escurecer { background: radial-gradient(ellipse at 50% 50%, #0000 10%, #000 95%); }
.fx.pintodia .auraBranca { position: absolute; border-radius: 10px; background: #ffffff2e; box-shadow: 0 0 30px #fff, 0 0 80px #fff, 0 0 150px #cfe8ff; }
.fx.pintodia .particulaBranca { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px #fff, 0 0 24px #bfe3ff; }
.fx.pintodia .fumaca { background: radial-gradient(circle closest-side, #ffffffd0 0%, #dfe9ff66 45%, transparent 100%); filter: blur(8px); }
.fx.pintodia .flash { background: #fff; }
.fx.pintodia .faisca { box-shadow: 0 0 10px #fff, 0 0 24px #bfe3ff; }
.fx.pintodia .cartaFx.metade { box-shadow: 0 0 18px #fff, 0 0 40px #bfe3ff88; }
.fx.pintodia .rachadura { position: absolute; width: 5px; margin-left: -2px; background: linear-gradient(#fff, #dfe9ff); box-shadow: 0 0 12px #fff, 0 0 34px #fff, 0 0 70px #bfe3ff; transform-origin: 50% 0; border-radius: 3px; }
.fx.pintodia .caco { position: absolute; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 6px 0 0; box-sizing: border-box; filter: drop-shadow(0 0 20px #fff); }
.danoNumero { position: fixed; z-index: 301; pointer-events: none; font-family: Impact, 'Arial Black', sans-serif; font-size: 74px; letter-spacing: 2px; color: #ff3b3b; text-shadow: 0 0 22px #ff0000, 0 4px 0 #3a0000, 0 0 2px #000; }
.lpBadge.danoClone { pointer-events: none; }
.lpBadge.danoClone.apanhando { border-color: #ff2d2d; box-shadow: 0 0 46px #ff2d2d, inset 0 0 30px #ff2d2d55; }
.lpBadge.danoClone.apanhando .valor { color: #ff5c5c; }
.lado { position: relative; }
.lado .bloqueio { position: absolute; inset: -4px; border-radius: 8px; pointer-events: none; z-index: 30; transform: translateZ(24px); border: 2px solid #ffffff88; background: repeating-linear-gradient(0deg, #ffffff2e 0 1px, transparent 1px 16px), repeating-linear-gradient(90deg, #ffffff2e 0 1px, transparent 1px 16px); box-shadow: inset 0 0 30px #ffffff22; animation: pulsarBloqueio 2s ease-in-out infinite; }
.lado .bloqueio i { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; border: 7px solid #ff2d2d; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 22px #ff2d2daa, inset 0 0 12px #ff2d2d66; background: #00000066; }
.lado .bloqueio i::before { content: ""; position: absolute; left: -2px; right: -2px; top: 50%; height: 7px; margin-top: -3.5px; background: #ff2d2d; transform: rotate(-45deg); box-shadow: 0 0 10px #ff2d2d; }
@keyframes pulsarBloqueio { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }

/* atacar arrastando: seta do seu monstro ate o alvo; ataque direto: clarao no lado do oponente */
#mira { position: fixed; inset: 0; z-index: 150; pointer-events: none; }
#mira line.fundo { stroke: #ff525255; stroke-width: 14; stroke-linecap: round; }
#mira line.linha { stroke: #ff5252; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 12 7; animation: tracejar .45s linear infinite; filter: drop-shadow(0 0 6px #ff5252); }
#mira circle { fill: #ff5252; stroke: #fff; stroke-width: 2; filter: drop-shadow(0 0 8px #ff5252); }
@keyframes tracejar { to { stroke-dashoffset: -19; } }
.lado.op.alvoDireto .zona.monstros { border-color: #ff5252; box-shadow: 0 0 18px #ff5252, inset 0 0 18px #ff525255; }
.carta.sobre { outline: 3px solid #fff; box-shadow: 0 0 26px #ff5252, 0 0 50px #ff525288; }
.fx .brilhoLado { position: absolute; border-radius: 16px; background: radial-gradient(ellipse at 50% 50%, #fff 0%, #fff6c8d9 22%, #ffd54a77 52%, transparent 75%); mix-blend-mode: screen; box-shadow: 0 0 90px #ffd54a; }

/* =====================================================================================================
   CELULAR (10/11/2026): toque, tela cheia e layout deitado que usa a altura toda
   ===================================================================================================== */
body.toque, body.toque * { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
#mesa, #mesa * { touch-action: none; }                 /* o dedo arrasta cartas e a seta de ataque, sem rolar nem dar zoom */
#painel, #painel * { touch-action: pan-y; }            /* o historico rola */
#topo button { touch-action: manipulation; }
#btnTelaCheia { display: none; }
body.toque #btnTelaCheia { display: inline-block; }
#btnTelaCheia.ativo { background: #3a2d05; border-color: var(--ouro); color: var(--ouro); }
body.arrastandoCarta #mao { opacity: .2; pointer-events: none; }   /* arrastando: a mao some e as zonas de baixo ficam livres para soltar */
body.toque .carta.fantasma { transform: translate(-50%, -112%) rotate(-4deg) scale(1.15); }   /* a carta arrastada fica acima do dedo, visivel */
/* sem mouse, o "passar por cima" gruda depois do toque: sem os efeitos de hover */
@media (hover: none) {
  .carta:hover { transform: none; box-shadow: 0 3px 8px #000c; }
  .carta.def:hover { transform: rotate(90deg) scale(.96); }
  .carta:hover .stats { transform: translateX(-50%); }
  .zona:has(.carta:hover) { transform: none; }
  #mao .maoItem:hover { transform: rotate(var(--rot, 0deg)) translateY(var(--dy, 0px)); }
}
/* carta grande (segurar o dedo): imagem e texto lado a lado quando a tela e baixa */
@media (max-height: 520px) and (orientation: landscape) {
  .verCartaCaixa { position: relative; display: grid; grid-template-columns: auto minmax(180px, 1fr); grid-template-rows: auto 1fr; gap: 6px 14px; max-width: 92vw; max-height: 94vh; overflow: hidden; align-items: start; padding: 10px 14px; }
  .verCartaCaixa > .fechar { position: absolute; top: 8px; right: 8px; width: auto; margin: 0; padding: 4px 12px; z-index: 2; }
  .verCartaCaixa h2 { grid-column: 1 / -1; margin: 0; padding-right: 54px; font-size: 16px; }
  .verCartaCaixa img { max-height: calc(94vh - 56px) !important; width: auto; }
  .verCartaCaixa .regras { margin-top: 0 !important; max-height: calc(94vh - 56px); overflow: auto; font-size: 13px; touch-action: pan-y; }
}
/* celular deitado: a barra de cima vira uma coluna de botoes a direita, a mao fica por cima da borda de baixo
   e a arena cresce ate ocupar a altura toda (zonas maiores para o dedo) */
@media (max-height: 520px) and (orientation: landscape) {
  :root { --cw: calc((100vh - 22px) / 7.5); }
  #topo { position: absolute; top: 4px; right: 4px; padding: 0; gap: 0; background: none; border: none; z-index: 60; flex-direction: column; align-items: flex-end; }
  #topo .grupo.op, #topo .grupo.eu { display: none; }
  #topo .centro { flex-direction: column; align-items: stretch; gap: 4px; }
  #topo .centro button { padding: 6px 10px; font-size: 12px; min-height: 30px; }
  #topo #btnTurno { order: -1; font-weight: 800; min-height: 40px; }
  #conexao { font-size: 9px; text-align: right; opacity: .7; }
  #cena { padding-bottom: calc(var(--ch) * .95); }
  #mao { position: absolute; left: 0; right: 0; bottom: calc(2px + env(safe-area-inset-bottom)); height: auto; padding: 0 140px; pointer-events: none; z-index: 6; }
  #mao .maoItem { pointer-events: auto; margin: 0 -5px; transform: rotate(var(--rot, 0deg)) translateY(calc(var(--dy, 0px) * .3)); }
  #mao .maoItem:active { transform: rotate(0deg) translateY(-6px) scale(1.06); z-index: 9; }
  #mao .carta { width: calc(var(--cw) * 1.4); height: calc(var(--ch) * 1.4); }
  /* ATK / DEF numa placa por cima da parte de baixo da carta (legivel no celular) */
  .statsMao { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); min-height: 0; flex-direction: column; align-items: flex-start; gap: 0; padding: 2px 6px; border-radius: 6px;
    background: #000d; border: 1px solid #ffd54a99; font-size: 12px; line-height: 1.15; letter-spacing: 0; white-space: nowrap; pointer-events: none; z-index: 2; }
  .statsMao span { display: block; }
  .statsMao.vazio { display: none; }
  #fases span { font-size: 11px; padding: 3px 7px; } #turnoTab { font-size: 10px; }
  .zona .icone { font-size: 16px; } .zona .contador { font-size: 10px; }
  .carta .stats { font-size: 11px; }
  /* escolha dos duelistas: cabe na altura do celular deitado (o logo pequeno do topo sai) */
  #abertura .tituloAb.topo { display: none; }
  #abertura .selecao { top: 50%; gap: 6px; }
  #abertura .selecao h2 { font-size: 14px; letter-spacing: 3px; }
  #abertura .opcao { height: calc(100vh - 250px); min-height: 90px; }
  #abertura .duelista { gap: 5px; padding: 6px 8px 8px; } #abertura .duelista .rotulo { font-size: 10px; letter-spacing: 3px; }
  #abertura .duelista input { padding: 5px 8px; font-size: 13px; }
  #abertura .modoBtn { font-size: 13px; padding: 6px 14px; gap: 6px; } #abertura .modoBtn .ic { font-size: 18px; }
  #abertura .rodape { gap: 12px; } #abertura .btnDuelar { padding: 8px 22px; }
  /* iPhone com entalhe (notch): nada embaixo dele nem da barrinha de baixo */
  #topo { right: calc(4px + env(safe-area-inset-right)); }
  .lpBadge.eu { left: calc(6px + env(safe-area-inset-left)); bottom: calc(4px + env(safe-area-inset-bottom)); }
  .lpBadge.op { right: calc(6px + env(safe-area-inset-right)); bottom: calc(4px + env(safe-area-inset-bottom)); }
}
/* aberto como app da Tela de Inicio: ja e tela cheia, o botao sai */
body.app #btnTelaCheia { display: none !important; }
@media (display-mode: standalone), (display-mode: fullscreen) { #btnTelaCheia { display: none !important; } }

/* botao Cancelar (celular): o Esc do teclado, quando ha carta selecionada ou uma escolha pendente */
#btnCancelar { display: none; position: fixed; left: calc(8px + env(safe-area-inset-left)); top: 50%; transform: translateY(-50%); z-index: 120;
  padding: 10px 14px; font-size: 14px; font-weight: 800; border-radius: 12px; background: #5a1414; border: 2px solid #ff6b6b; color: #fff; box-shadow: 0 6px 18px #000c; touch-action: manipulation; }
body.toque.temEscolha #btnCancelar { display: block; }