/* ManaMerge — tema GRIMÓRIO ARCANO
   Pergaminho, tinta e ouro. Painéis = páginas de grimório (claros);
   tabuleiro = mesa de couro escuro; criaturas = iluminuras.
   Texturas 100% procedurais (SVG feTurbulence inline) — zero download, offline. */

@font-face {
  font-family: 'Cinzel';
  src: url('fonts/cinzel.woff2') format('woff2');
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant';
  src: url('fonts/cormorant.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant';
  src: url('fonts/cormorant-italic.woff2') format('woff2');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* mesa e madeira */
  --couro-1: #241812;
  --couro-2: #140d09;
  --madeira: #3d2c1a;
  --madeira-escura: #1c120a;

  /* pergaminho e tinta */
  --pergaminho-1: #f2e6c4;
  --pergaminho-2: #e0cd9f;
  --tinta: #3a2a16;
  --tinta-fraca: #6d532e;

  /* ouro */
  --ouro: #c9a227;
  --ouro-claro: #f0d489;
  --ouro-escuro: #8a6a3a;

  /* tinta das cores de mana (sobre pergaminho) */
  --t-vermelho: #a33917; --t-verde: #2e6b44; --t-branco: #8a6a1f;
  --t-azul: #1f5a8a;     --t-preto: #5d3a75; --t-incolor: #55616e;

  /* versões claras (sobre fundo escuro: header, glow) */
  --l-vermelho: #ff9d76; --l-verde: #8fd6a0; --l-branco: #efe6c4;
  --l-azul: #8bc0f4;     --l-preto: #c9a3dd; --l-incolor: #c6d0da;

  /* texturas procedurais */
  --tex-couro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.10 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  --tex-pergaminho: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05' numOctaves='5'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.45 0 0 0 0 0.28 0 0 0 0.25 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23p)'/%3E%3C/svg%3E");
  --tex-madeira: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='140'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.012 0.09' numOctaves='4'/%3E%3CfeColorMatrix values='0 0 0 0 0.22 0 0 0 0 0.13 0 0 0 0 0.07 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='420' height='140' filter='url(%23w)'/%3E%3C/svg%3E");
}

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

body {
  font-family: 'Cormorant', Georgia, serif;
  font-size: 16px;
  background:
    var(--tex-couro),
    radial-gradient(ellipse at 50% -10%, #4a3423 0%, var(--couro-1) 55%, var(--couro-2) 100%);
  background-attachment: fixed;
  color: var(--pergaminho-1);
  min-height: 100vh;
  user-select: none; -webkit-user-select: none;
}
svg { display: block; width: 100%; height: 100%; }

/* ---------------- topo (barra de couro) ---------------- */
header {
  display: flex; align-items: center; gap: 20px; padding: 10px 20px;
  background: linear-gradient(180deg, #35251766, #00000066);
  border-bottom: 2px solid var(--madeira-escura);
  box-shadow: inset 0 1px 0 #ffffff14, 0 2px 8px #00000060;
  flex-wrap: wrap;
}
header h1 {
  font-family: 'Cinzel', serif; font-weight: 900; font-size: 22px;
  letter-spacing: 2px;
  background: linear-gradient(90deg, var(--ouro-claro), var(--ouro), var(--ouro-claro));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* créditos ao lado da logo (antes ficavam no rodapé) — empurram os recursos p/ direita */
.creditos-topo {
  margin-right: auto; max-width: 460px; line-height: 1.3;
  font-size: 11px; color: #8a7350; font-style: italic;
}
.creditos-topo .versao { font-family: 'Cinzel', serif; font-style: normal; font-weight: 700; color: var(--ouro); }
.creditos-topo a { color: #b0925a; }
.recurso {
  display: flex; align-items: center; gap: 6px;
  font-family: 'Cinzel', serif; font-weight: 700; font-size: 14px;
  color: #e6cf96;
}
.recurso .icone { width: 19px; height: 19px; }
#icone-energia { color: var(--l-azul); }
#icone-moedas { color: var(--ouro-claro); }
#gemas-bloco, #icone-gemas { color: #8bd3f4; }
#icone-nucleo { color: var(--l-incolor); }
#nucleo-bloco { color: var(--l-incolor); }

.nivel-bloco { display: flex; flex-direction: column; gap: 3px; min-width: 140px; }
.nivel-topo {
  display: flex; justify-content: space-between;
  font-family: 'Cinzel', serif; font-size: 11px; color: #cbb27e;
}
.xp-trilho {
  height: 7px; background: #00000070; border-radius: 4px; overflow: hidden;
  border: 1px solid var(--ouro-escuro);
}
#xp-barra { height: 100%; background: linear-gradient(90deg, var(--ouro), var(--ouro-claro)); width: 0; transition: width .3s; }

#botao-reiniciar {
  background: none; border: 1px solid var(--ouro-escuro); color: #cbb27e;
  border-radius: 6px; padding: 4px 12px; cursor: pointer;
  font-family: 'Cinzel', serif; font-size: 11px;
}
#botao-reiniciar:hover { color: var(--ouro-claro); border-color: var(--ouro); }

#pendentes {
  text-align: center; font-family: 'Cinzel', serif; font-size: 12px;
  color: #241808; background: linear-gradient(180deg, var(--ouro-claro), var(--ouro));
  padding: 5px; font-weight: 700; letter-spacing: .5px;
}

/* ---------------- layout ---------------- */
main {
  display: grid; grid-template-columns: auto auto 340px; gap: 20px;
  padding: 18px; justify-content: center; align-items: start;
}
.coluna-tabuleiro { display: flex; flex-direction: column; align-items: center; gap: 14px; }

/* dock lateral AGRUPADO: Batalha · Exército · Tesouro · Campo.
   Grade 2×N por grupo pra caber na altura do tabuleiro (a "linha limite"). */
.dock { display: flex; flex-direction: column; gap: 12px; width: 172px; }
.dock-grupo {
  background: #00000026; border: 1px solid #8a6a3a55; border-radius: 12px;
  padding: 7px 7px 8px;
}
.dock-grupo-titulo {
  font-family: 'Cinzel', serif; font-size: 10px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--ouro); text-align: center;
  margin-bottom: 6px; text-shadow: 0 1px 2px #000a;
}
.dock-grupo-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.dock-btn {
  position: relative; width: auto; min-width: 0; padding: 6px 2px 5px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--tex-pergaminho), linear-gradient(170deg, var(--pergaminho-1), var(--pergaminho-2));
  color: var(--tinta); border: 1px solid var(--ouro-escuro); border-radius: 10px;
  box-shadow: 0 3px 7px #00000055, inset 0 0 0 2px #ffffff2e;
}
.dock-btn:hover { border-color: var(--ouro); box-shadow: 0 0 10px #c9a22766, 0 4px 10px #00000060, inset 0 0 0 3px #ffffff2e; }
.dock-btn.solta-aqui { border-color: var(--ouro); box-shadow: 0 0 16px #c9a227cc, 0 4px 10px #00000060; transform: scale(1.05); }
.dock-ic { width: 24px; height: 24px; line-height: 0; }
/* Campo = AÇÕES instantâneas no tabuleiro (não abrem painel): estilo utilitário,
   horizontal e mais raso — outra classe de interação, outra cara */
#grupo-campo .dock-grupo-btns { grid-template-columns: 1fr; }
#grupo-campo .dock-btn {
  flex-direction: row; justify-content: flex-start; gap: 8px; padding: 5px 9px;
  background: linear-gradient(180deg, #ede0ba, #d9c69a);
}
#grupo-campo .dock-ic { width: 17px; height: 17px; }
#grupo-campo .dock-lbl { font-size: 10px; }
#dock-campanha .dock-ic { color: var(--t-vermelho); }
#dock-mochila .dock-ic { color: var(--ouro-escuro); }
#dock-quartel .dock-ic { color: var(--t-azul); }
#dock-arsenal .dock-ic { color: var(--t-verde); }
#dock-grimorio .dock-ic { color: var(--t-preto); }
#dock-panteao .dock-ic { color: var(--ouro); }
#dock-loja .dock-ic { color: var(--ouro-escuro); }
.dock-lbl { font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: .2px; color: var(--tinta-fraca); white-space: nowrap; }
.dock-badge {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 9px; background: var(--madeira); color: var(--ouro-claro); border: 1px solid var(--ouro);
  font-family: 'Cinzel', serif; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.dock-badge:empty { display: none; }

/* Seleção fica ABAIXO do board, em faixa horizontal: foto (esq) · infos (meio) · ações (dir) */
.painel-selecao { width: 100%; max-width: calc(10 * var(--cell) + 9 * 5px + 28px); padding: 12px 18px; }
.painel-selecao > h2 { display: none; } /* título dispensável na faixa */
.painel-selecao #selecao {
  display: flex; align-items: stretch; gap: 18px; text-align: left; min-height: 96px;
}
/* placeholder (nada selecionado): centraliza a dica */
.painel-selecao #selecao:has(> .dica) { align-items: center; justify-content: center; }
.painel-selecao .dica { text-align: center; }

/* zona 1 — mídia/foto à esquerda */
.sel-media {
  flex-shrink: 0; width: 150px; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.sel-media .sel-icone { margin: 0; }
.sel-media .sel-icone:not(.com-arte) { width: 96px; height: 96px; }

/* zona 2 — corpo/infos no meio */
.sel-corpo {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  justify-content: center; gap: 3px; text-align: left;
}
.sel-corpo .sel-nome, .sel-corpo .sel-detalhe { margin: 0; }
.sel-corpo .sel-botoes { margin-top: 6px; } /* pickers inline (transmutar/forja/modo) */

/* zona 3 — ações em grade à direita */
.sel-acoes {
  flex-shrink: 0; align-self: center; width: clamp(230px, 32%, 320px);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: min-content; gap: 8px; align-content: center;
}
.sel-acoes .botao { margin: 0; width: auto; text-align: center; }
.sel-acoes .botao:only-child { grid-column: 1 / -1; } /* ação única ocupa a largura toda */

/* popup dos painéis (Quartel/Arsenal/Grimório/Panteão) — largo pra ver as artes */
#tela-painel .painel-popup { width: min(940px, 94vw); max-width: 940px; }
#painel-popup-corpo { max-height: 74vh; overflow-y: auto; padding-right: 4px; }
/* slots ~3x maiores dentro do popup pra apreciar as iluminuras */
.painel-popup .quartel-grid { grid-template-columns: repeat(auto-fill, minmax(122px, 1fr)); gap: 12px; }
.painel-popup .quartel-grid .unidade.qchip { padding: 10px; }
.painel-popup .quartel-grid .q-vazio { border-radius: 12px; }
.painel-popup .lend-grade { gap: 10px; } /* 6 colunas fixas já alargam junto com o popup */
.painel-popup .lend-chip { padding: 9px; }
.painel-popup .quartel-vagas { font-size: 14px; }
.painel-popup .q-dica { font-size: 14px; margin-top: 12px; }
.painel-popup-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
#painel-fechar { background: none; border: 1px solid var(--ouro-escuro); color: #cbb27e; border-radius: 6px; padding: 3px 10px; cursor: pointer; font-size: 15px; }
#painel-fechar:hover { color: var(--ouro-claro); border-color: var(--ouro); }
#tela-painel .painel-slot { display: none; }
#tela-painel.mostra-quartel .painel-slot[data-slot="quartel"],
#tela-painel.mostra-arsenal .painel-slot[data-slot="arsenal"],
#tela-painel.mostra-grimorio .painel-slot[data-slot="grimorio"],
#tela-painel.mostra-panteao .painel-slot[data-slot="panteao"],
#tela-painel.mostra-loja .painel-slot[data-slot="loja"] { display: block; }
.painel-dica { font-size: 13px; color: var(--tinta-fraca); font-style: italic; margin-top: 8px; line-height: 1.4; }

/* painel = página de grimório */
.painel {
  background: var(--tex-pergaminho), linear-gradient(170deg, var(--pergaminho-1), var(--pergaminho-2));
  color: var(--tinta);
  border: 1px solid var(--ouro-escuro);
  border-radius: 10px;
  padding: 14px;
  box-shadow:
    0 8px 20px #00000080,
    inset 0 0 0 4px #ffffff33,
    inset 0 0 0 5px #8a6a3a44,
    inset 0 0 30px #8a6a3a22;
}
.painel h2 {
  font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--tinta-fraca);
  margin-bottom: 8px; text-align: center; position: relative;
}
.painel h2::before, .painel h2::after {
  content: '❦'; color: var(--ouro-escuro); font-size: 10px; margin: 0 8px; opacity: .7;
}
.coluna-lado h2:not(:first-child) { margin-top: 16px; }

/* coluna direita: Contratos ocupa a altura toda, alinhado ao board + Seleção */
/* truque height:0 + min-height:100%: a coluna NUNCA dita a altura da linha do grid —
   ela se estica até a "linha limite" (base do tabuleiro+Seleção) e os contratos rolam dentro */
.coluna-dir { display: flex; flex-direction: column; gap: 18px; align-self: stretch; height: 0; min-height: 100%; }
.coluna-dir .painel { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#missoes { flex: 1; min-height: 0; overflow-y: auto; padding-right: 5px; }
#missoes::-webkit-scrollbar { width: 7px; }
#missoes::-webkit-scrollbar-track { background: #00000018; border-radius: 4px; }
#missoes::-webkit-scrollbar-thumb { background: var(--ouro-escuro); border-radius: 4px; }
#missoes::-webkit-scrollbar-thumb:hover { background: var(--ouro); }
#missoes .missao:last-child { margin-bottom: 0; }

/* ---------------- tabuleiro (mesa de madeira + couro) ---------------- */
/* célula escala com a tela — board 10×6 landscape. Limitada pela ALTURA (6 linhas) e pela
   largura livre (só o painel de Contratos à direita ocupa lateral). Piso 62px, teto 120px. */
:root { --cell: 62px; }
@media (min-width: 1100px) {
  :root { --cell: max(62px, min(118px, (100vh - 356px) / 6, (100vw - 600px) / 10)); }
}
#tabuleiro {
  display: grid; grid-template-columns: repeat(10, var(--cell, 62px)); grid-auto-rows: var(--cell, 62px);
  gap: 5px; padding: 14px; border-radius: 14px; touch-action: none;
  background:
    var(--tex-madeira),
    linear-gradient(160deg, #58412a, var(--madeira) 60%, #332415);
  border: 4px solid var(--madeira-escura);
  outline: 1px solid var(--ouro-escuro); outline-offset: -8px;
  box-shadow: inset 0 0 44px #00000090, 0 12px 32px #00000090;
}
.celula {
  background: #2a1d10c9; border: 1px solid #6d532e55; border-radius: 9px;
  position: relative; box-shadow: inset 0 2px 6px #00000080;
}
.celula.travada { background: #20160bb5; border-style: dashed; opacity: .55; }
.celula.comprar { background: #251a0dc9; border: 1px dashed #c9a22766; cursor: pointer; }
.celula.comprar.acessivel { border-color: var(--ouro); }
.celula.comprar:hover { background: #302213c9; }
.compra { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.compra-cad { width: 18px; height: 18px; color: #6d532e; }
.compra-custo { font-family: 'Cinzel', serif; font-size: 11px; font-weight: 700; color: #b0925a; }
.celula.comprar.acessivel .compra-custo { color: var(--ouro-claro); }

/* peça = iluminura sobre pergaminho */
.item {
  position: absolute; inset: 4px; border-radius: 7px; padding: 7px; cursor: grab;
  background: linear-gradient(180deg, #f0e3c0, #d9c69a);
  border: 2px solid var(--ouro-escuro);
  box-shadow: 0 3px 6px #00000070, inset 0 1px 0 #ffffff88;
}
.item.vermelho { color: var(--t-vermelho); }
.item.verde { color: var(--t-verde); }
.item.branco { color: var(--t-branco); }
.item.azul { color: var(--t-azul); }
.item.preto { color: var(--t-preto); }
.item.incolor { color: var(--t-incolor); }
.item.selecionado {
  border-color: var(--ouro) !important;
  box-shadow: 0 0 12px #c9a227aa, 0 3px 6px #00000070, inset 0 1px 0 #ffffff88;
}
.item.arrastando { opacity: .3; }

/* gerador = iluminura dourada */
.item.ger {
  padding: 8px;
  background: radial-gradient(circle at 50% 30%, #fdf3d3, #e2cfa0);
  border: 2px solid var(--ouro);
  box-shadow: 0 0 10px #c9a22755, 0 3px 6px #00000070, inset 0 1px 0 #ffffffaa;
}
.item.ger.pronto { animation: pulso 1.8s ease-in-out infinite; }
@keyframes pulso {
  0%, 100% { box-shadow: 0 0 8px #c9a22744, 0 3px 6px #00000070, inset 0 1px 0 #ffffffaa; }
  50% { box-shadow: 0 0 16px #c9a227cc, 0 3px 6px #00000070, inset 0 1px 0 #ffffffaa; }
}
/* QoL: ao ARRASTAR, pisca ciano vibrante nos IGUAIS mergeáveis e no dock de destino */
.item.merge-alvo, .maquina.merge-alvo { animation: merge-pisca .85s ease-in-out infinite; z-index: 3; }
@keyframes merge-pisca {
  0%, 100% { box-shadow: 0 0 0 2px #2fe6e6cc, 0 0 10px #2fe6e6aa; }
  50%      { box-shadow: 0 0 0 3px #7bffff, 0 0 24px #2fe6e6; }
}
.dock-btn.dock-alvo { animation: dock-pisca .85s ease-in-out infinite; border-color: #2fe6e6; }
@keyframes dock-pisca {
  0%, 100% { box-shadow: 0 0 0 2px #2fe6e6aa, 0 0 12px #2fe6e6aa, 0 4px 10px #00000060, inset 0 0 0 3px #ffffff2e; }
  50%      { box-shadow: 0 0 0 3px #7bffff, 0 0 24px #2fe6e6, 0 4px 10px #00000060, inset 0 0 0 3px #ffffff2e; }
}
/* MOLDURA + SELO por NÍVEL do gerador (bronze → prata → ouro → safira → ametista).
   Borda GROSSA (3px) + anel interno + glow, e o selo vira uma pílula colorida — pra ler
   claramente MESMO sobre a arte de carta que preenche o tile. */
.item.ger.nv-1, .item.ger.nv-2, .item.ger.nv-3, .item.ger.nv-4, .item.ger.nv-5 { border-width: 3px; }
.item.ger.nv-1 { border-color: #c07a34; }
.item.ger.nv-2 { border-color: #b9c4cd; }
.item.ger.nv-3 { border-color: var(--ouro); }
.item.ger.nv-4 { border-color: #3d95d6; }
.item.ger.nv-5 { border-color: #b06fe6; }
.item.ger.nv-1:not(.selecionado):not(.pronto) { box-shadow: inset 0 0 0 1px #7a4a1f, 0 0 8px #c07a34aa, 0 3px 6px #00000070; }
.item.ger.nv-2:not(.selecionado):not(.pronto) { box-shadow: inset 0 0 0 1px #7c8894, 0 0 9px #cfd8e0aa, 0 3px 6px #00000070; }
.item.ger.nv-3:not(.selecionado):not(.pronto) { box-shadow: inset 0 0 0 1px #8a6a2f, 0 0 10px #c9a227aa, 0 3px 6px #00000070; }
.item.ger.nv-4:not(.selecionado):not(.pronto) { box-shadow: inset 0 0 0 1px #24628c, 0 0 13px #4aa3d9cc, 0 3px 6px #00000070; }
.item.ger.nv-5:not(.selecionado):not(.pronto) { box-shadow: inset 0 0 0 1px #6a3f9e, 0 0 18px #b06fd9dd, 0 3px 6px #00000070; }
/* selo de nível = pílula colorida com as estrelas em branco, no rodapé */
.item.ger .ger-badge {
  left: 50%; right: auto; bottom: 2px; transform: translateX(-50%);
  width: auto; padding: 0 5px; border-radius: 7px; line-height: 12px; letter-spacing: 0;
  color: #fff; text-shadow: 0 1px 1px #000a; border: 1px solid #ffffff66; background: #7a5a2ee0;
}
.item.ger.nv-1 .ger-badge { background: #9a5620e0; }
.item.ger.nv-2 .ger-badge { background: #63707de0; }
.item.ger.nv-3 .ger-badge { background: #9c7a1ce0; }
.item.ger.nv-4 .ger-badge { background: #23608fe0; }
.item.ger.nv-5 .ger-badge { background: #7a45b0e0; }
.ger-badge {
  position: absolute; bottom: 0; left: 0; right: 0; text-align: center;
  font-size: 8px; letter-spacing: -1px; color: var(--t-branco); text-shadow: 0 1px 1px #fff8;
}

/* guilda = gerador bicolor forjado: MESMO fundo creme dos outros geradores;
   a identidade bicolor vive no ícone (degradê suave via <linearGradient> no SVG). */

.item .tier {
  position: absolute; right: -5px; top: -5px; min-width: 17px; height: 17px;
  border-radius: 9px; background: var(--madeira); color: var(--ouro-claro);
  border: 1px solid var(--ouro);
  font-family: 'Cinzel', serif; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
.item .barra { position: absolute; left: 4px; right: 4px; bottom: 2px; height: 3px; background: #00000040; border-radius: 2px; overflow: hidden; }
.item .barra > span { display: block; height: 100%; width: 0; }
.item .barra.cresce > span { background: var(--t-verde); }
.item .barra.apodrece > span { background: var(--t-preto); }
.item .barra.recarga > span { background: var(--t-verde); }
.item.ghost { position: fixed; width: 54px; height: 54px; transform: translate(-50%,-50%); pointer-events: none; z-index: 50; opacity: .88; inset: auto; }

@keyframes pop { 0% { transform: scale(.4); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }
.item.spawn { animation: pop .25s ease-out; }
@keyframes fusao { 0% { transform: scale(1.4); filter: brightness(1.6) sepia(.4); } 100% { transform: scale(1); filter: none; } }
.item.merge { animation: fusao .35s ease-out; }

/* ---------------- seleção ---------------- */
#selecao { text-align: center; }
#selecao .dica { font-size: 15px; color: var(--tinta-fraca); line-height: 1.5; font-style: italic; }
.sel-icone { width: 48px; height: 48px; margin: 2px auto 6px; }
.sel-icone.vermelho { color: var(--t-vermelho); } .sel-icone.verde { color: var(--t-verde); }
.sel-icone.branco { color: var(--t-branco); } .sel-icone.azul { color: var(--t-azul); }
.sel-icone.preto { color: var(--t-preto); } .sel-icone.incolor { color: var(--t-incolor); }
.sel-nome { font-family: 'Cinzel', serif; font-weight: 700; font-size: 17px; color: var(--tinta); }
.sel-estrelas { color: var(--t-branco); font-size: 13px; }
.sel-detalhe { font-size: 14px; color: var(--tinta-fraca); margin: 3px 0; line-height: 1.35; }
.sel-detalhe.forte { color: var(--tinta); font-weight: 600; }
.sel-botoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

.botao {
  display: block; width: 100%; padding: 8px;
  border: none; border-radius: 8px; cursor: pointer;
  font-family: 'Cinzel', serif; font-weight: 700; font-size: 12px; letter-spacing: .5px;
  background: linear-gradient(180deg, #caa544, #a5811f); color: #241808;
  box-shadow: 0 2px 0 #6d5316, inset 0 1px 0 #ffe99a;
  transition: filter .15s, transform .05s;
}
.botao:hover:not(:disabled) { filter: brightness(1.12); }
.botao:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 1px 0 #6d5316, inset 0 1px 0 #ffe99a; }
.botao:disabled { opacity: .42; cursor: default; }
.botao.mini {
  width: auto; flex: 1 1 46%; padding: 6px 4px; font-size: 10px;
  background: linear-gradient(180deg, #ede0ba, #d9c69a); color: var(--tinta);
  border: 1px solid var(--ouro-escuro); box-shadow: 0 2px 0 #8a6a3a66;
}
.botao.mini.destaque { background: linear-gradient(180deg, #caa544, #a5811f); color: #241808; border: none; flex-basis: 100%; box-shadow: 0 2px 0 #6d5316, inset 0 1px 0 #ffe99a; }
.trans-ic { display: inline-block; width: 15px; height: 15px; vertical-align: -3px; margin-right: 3px; }
.trans-ic.vermelho { color: var(--t-vermelho); } .trans-ic.verde { color: var(--t-verde); }
.trans-ic.branco { color: var(--t-branco); } .trans-ic.azul { color: var(--t-azul); }
.trans-ic.preto { color: var(--t-preto); } .trans-ic.incolor { color: var(--t-incolor); }

/* ---------------- missões (contratos) — rebrand "modo deck" (escuro, arte à direita) ---------------- */
.missao {
  position: relative;
  background: linear-gradient(168deg, #221913, #140d07);
  border: 1px solid var(--ouro-escuro); border-radius: 10px;
  padding: 8px 10px; margin-bottom: 8px;
  box-shadow: inset 0 0 0 1px #ffffff10, inset 0 0 16px #00000055, 0 3px 8px #00000045;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.missao:hover {
  border-color: var(--ouro); transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px #ffffff1a, 0 6px 16px #00000059, 0 0 10px #c9a2273a;
}
/* selo ornamental no canto */
.missao::after {
  content: '❦'; position: absolute; top: 7px; right: 10px;
  font-size: 11px; color: var(--ouro-escuro); opacity: .6; pointer-events: none;
}
.missao-nome {
  font-family: 'Cinzel', serif; font-weight: 700; font-size: 12.5px;
  color: #f0d489; letter-spacing: .3px; line-height: 1.2;
  margin-bottom: 6px; padding: 0 20px 5px 0; /* espaço à direita pro selo ❦ */
  border-bottom: 1px solid #8a6a3a55; text-shadow: 0 1px 2px #000;
}
.missao.gema .missao-nome { color: #8fc0f0; border-bottom-color: #4a90d955; }
.missao.guilda .missao-nome { color: #f0d489; border-bottom-color: #c9a22766; }
.missao-reqs { display: flex; flex-direction: column; gap: 4px; margin-bottom: 5px; }
/* linha de requisito = dk-row: círculo de custo + nome + contagem, arte espiando à direita */
.req {
  position: relative; display: flex; align-items: center; gap: 7px;
  height: 30px; font-size: 12.5px; color: #f2e2b3; cursor: default;
  background-color: #150e05; border-radius: 6px; padding: 0 8px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--fcA, #8a6a3a) 55%, #8a6a3a);
  transition: filter .12s, border-color .12s;
}
.req.req-deck {
  background-image: linear-gradient(90deg, #150e05 40%, #150e05d9 62%, #150e0522 100%), var(--req-art);
  background-size: 100% 100%, 62% auto; background-position: left center, right center; background-repeat: no-repeat;
}
.req:hover { filter: brightness(1.18); border-color: #f0d489; }
.req b { font-family: 'Cinzel', serif; font-size: 12px; margin-left: auto; color: #f0d489; text-shadow: 0 1px 2px #000; }
.req.ok { border-color: #6bbf6b88; }
.req.ok b { color: #8fe08f; }
/* círculo de custo dourado (estilo Arena) — injetado pelo card-art.js */
.req-custo {
  flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Cinzel', serif; font-weight: 900; font-size: 10.5px; color: #241808;
  background: radial-gradient(circle at 35% 30%, #f5e6b0, #caa544); border: 1px solid #00000066;
}
.req.ok .req-custo { background: radial-gradient(circle at 35% 30%, #bfeeb0, #5fae5f); }
/* ícone de cor: só aparece quando NÃO há arte (a arte + custo já identificam a criatura) */
.req-icone { width: 19px; height: 19px; flex: none; }
.req.req-deck .req-icone { display: none; }
.req-icone.vermelho { color: var(--t-vermelho); } .req-icone.verde { color: var(--t-verde); }
.req-icone.branco { color: var(--t-branco); } .req-icone.azul { color: var(--t-azul); }
.req-icone.preto { color: var(--t-preto); } .req-icone.incolor { color: var(--t-incolor); }
.missao-rodape {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  margin-top: 5px; padding-top: 6px; border-top: 1px dashed #8a6a3a66;
}
.missao-premio {
  display: flex; align-items: center; gap: 4px;
  font-family: 'Cinzel', serif; font-size: 12px; font-weight: 700; color: #e8c987;
  text-shadow: 0 1px 2px #000;
}
.missao-premio svg { width: 14px; height: 14px; }
/* missão de diamante: moldura azulada e recompensa em destaque */
.missao.gema { border: 1px solid #4a90d9; box-shadow: inset 0 0 0 1px #6ca0dc33, inset 0 0 16px #1a3a5a55, 0 3px 8px #00000045, 0 0 8px #4a90d940; }
.missao.gema::after { color: #6ca0dc; opacity: .75; }
.missao.gema .missao-premio { color: #8fc0f0; }
.gema-premio { font-size: 12px; }
/* missão de guilda: moldura dourada rica + prêmio lendário */
.missao.guilda { border: 1px solid var(--ouro); background: linear-gradient(168deg, #2a2011, #150e06); box-shadow: inset 0 0 0 1px #ffe9a622, inset 0 0 18px #00000055, 0 3px 8px #00000045, 0 0 9px #c9a22755; }
.missao.guilda::after { content: '♜'; color: var(--ouro); opacity: .8; }
/* recompensa que dá uma criatura: só o ícone de carta (nome vai no title) */
.guilda-premio { display: inline-flex; align-items: center; color: var(--ouro-claro); font-size: 15px; cursor: default; margin-left: 2px; }
.guilda-premio:hover { filter: brightness(1.2); }
.req-lock { font-size: 11px; opacity: .85; }
.missao-acoes { display: flex; align-items: center; gap: 5px; }
.missao .entregar { width: auto; padding: 5px 11px; font-size: 12px; }
.missao .entregar:not(:disabled) { box-shadow: 0 2px 0 #6d5316, inset 0 1px 0 #ffe99a, 0 0 8px #c9a22755; }
.missao .reroll {
  width: auto; padding: 6px 8px; font-size: 11px;
  background: linear-gradient(180deg, #3a2c17, #241a0d); color: var(--ouro-claro);
  border: 1px solid var(--ouro-escuro); box-shadow: 0 2px 0 #00000066;
}
.missao .reroll:not(:disabled):hover { border-color: var(--ouro); filter: brightness(1.15); }

/* ---------------- overlays (páginas do grimório) ---------------- */
.overlay {
  position: fixed; inset: 0; background: #0d0805e6;
  display: none; align-items: center; justify-content: center; z-index: 90; padding: 20px;
}
.overlay.visivel { display: flex; }
.overlay-caixa {
  background: var(--tex-pergaminho), linear-gradient(170deg, var(--pergaminho-1), var(--pergaminho-2));
  color: var(--tinta);
  border: 2px solid var(--ouro-escuro); border-radius: 14px;
  padding: 30px 34px; max-width: 660px; width: 100%; text-align: center;
  box-shadow: 0 20px 60px #000000cc, inset 0 0 0 5px #ffffff33, inset 0 0 0 6px #8a6a3a44;
}
.overlay-titulo {
  font-family: 'Cinzel', serif; font-weight: 900; font-size: 24px;
  color: var(--tinta); margin-bottom: 8px;
}
.titulo-ic { display: inline-block; width: 22px; height: 22px; vertical-align: -4px; margin-right: 8px; color: var(--ouro-escuro); }
.overlay-sub { color: var(--tinta-fraca); font-size: 16px; margin-bottom: 18px; line-height: 1.45; font-style: italic; }
.escolha-cores, .escolha-recompensa { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.card-cor {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  background: linear-gradient(180deg, #f7edd0, #e4d2a6);
  border: 2px solid var(--ouro-escuro); border-radius: 10px;
  padding: 14px 10px; cursor: pointer; color: var(--tinta);
  box-shadow: 0 3px 8px #00000050, inset 0 1px 0 #ffffff88;
  transition: transform .1s, box-shadow .15s;
}
.card-cor:hover { transform: translateY(-3px); box-shadow: 0 8px 14px #00000060, 0 0 12px #c9a22766, inset 0 1px 0 #ffffff88; }
/* arte do gerador atrás do texto (30% opacidade) — substitui o ícone */
.cc-fundo {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-size: cover; background-position: center; opacity: .30;
}
.card-cor:hover .cc-fundo { opacity: .42; } /* realça um tico no hover */
.card-cor > .cc-nome, .card-cor > .cc-tag, .card-cor > .cc-icone { position: relative; z-index: 1; }
.cc-icone { width: 40px; height: 40px; }
.cc-nome { font-family: 'Cinzel', serif; font-weight: 700; font-size: 14px; }
.cc-tag { font-size: 13px; color: var(--tinta-fraca); line-height: 1.3; }
.card-cor.vermelho { border-color: var(--t-vermelho); } .card-cor.vermelho .cc-icone { color: var(--t-vermelho); }
.card-cor.verde { border-color: var(--t-verde); } .card-cor.verde .cc-icone { color: var(--t-verde); }
.card-cor.branco { border-color: var(--t-branco); } .card-cor.branco .cc-icone { color: var(--t-branco); }
.card-cor.azul { border-color: var(--t-azul); } .card-cor.azul .cc-icone { color: var(--t-azul); }
.card-cor.preto { border-color: var(--t-preto); } .card-cor.preto .cc-icone { color: var(--t-preto); }
.card-cor.incolor { border-color: var(--t-incolor); } .card-cor.incolor .cc-icone { color: var(--t-incolor); }

/* ---------------- toast (tira de pergaminho) ---------------- */
#toast {
  position: fixed; bottom: 24px; left: 50%; transform: translate(-50%,16px);
  background: linear-gradient(180deg, #f2e6c4, #e0cd9f); color: var(--tinta);
  border: 1px solid var(--ouro-escuro); padding: 9px 20px; border-radius: 8px;
  font-family: 'Cinzel', serif; font-size: 12px; font-weight: 700;
  box-shadow: 0 6px 16px #000000aa;
  opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; z-index: 100;
}
#toast.visivel { opacity: 1; transform: translate(-50%,0); }

/* ---------------- botão de campanha (header) ---------------- */
#botao-campanha, #botao-mochila {
  background: linear-gradient(180deg, #caa544, #a5811f); color: #241808;
  border: none; border-radius: 6px; padding: 5px 12px; cursor: pointer;
  font-family: 'Cinzel', serif; font-weight: 700; font-size: 12px;
  box-shadow: 0 2px 0 #6d5316, inset 0 1px 0 #ffe99a;
}
#botao-campanha:hover, #botao-mochila:hover { filter: brightness(1.12); }
#botao-mochila { background: linear-gradient(180deg, #b98b56, #8a6238); display: inline-flex; align-items: center; gap: 6px; }
/* ícone da mochila em cetim (creme acetinado) — destaca no botão bronze */
.btn-ic { display: inline-block; width: 16px; height: 16px; color: #f6ecd2; filter: drop-shadow(0 1px 0 #00000040); }
.btn-ic svg { width: 100%; height: 100%; }

/* ---------------- mochila (inventário de jogador) ---------------- */
.inv-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.inv-topo .overlay-titulo { margin: 0; }
#inventario-fechar {
  background: none; border: 1px solid var(--ouro-escuro); color: var(--tinta-fraca);
  border-radius: 6px; padding: 3px 11px; cursor: pointer; font-family: 'Cinzel', serif; font-size: 14px;
}
#inventario-fechar:hover { color: var(--tinta); border-color: var(--ouro); }
#inventario-corpo { text-align: left; }
/* lista rolável — evita que a Mochila estoure a tela com muitos itens */
.inv-lista { max-height: 58vh; overflow-y: auto; padding-right: 6px; }
.inv-lista::-webkit-scrollbar { width: 9px; }
.inv-lista::-webkit-scrollbar-thumb { background: var(--ouro-escuro); border-radius: 6px; }
.inv-lista::-webkit-scrollbar-track { background: #00000018; border-radius: 6px; }
.inv-barra { margin-bottom: 10px; }
/* barra Ordenar / Vender tudo (Mochila + Quartel/Arsenal/Grimório) */
.q-ferramentas { display: flex; gap: 8px; margin: 8px 0 10px; }
.q-ferramentas .botao.mini { flex: 1; }
.inv-item {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px; margin-bottom: 10px;
  background: linear-gradient(180deg, #f7edd0, #e4d2a6);
  border: 2px solid var(--ouro-escuro); border-radius: 10px; color: var(--tinta);
  box-shadow: 0 3px 8px #00000040, inset 0 1px 0 #ffffff88;
}

/* Loja: saldo de diamantes + grade de cards quadrados (3 por linha) */
.loja-saldo {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 12px;
  font-family: 'Cinzel', serif; font-size: 15px; color: var(--tinta);
}
.loja-saldo-ic { width: 20px; height: 20px; color: #8bd3f4; flex: 0 0 20px; }
.loja-saldo b { color: #2f6a9e; margin: 0 2px; }
.loja-grade { display: grid; grid-template-columns: repeat(3, 172px); justify-content: center; gap: 16px; }
.loja-card {
  min-height: 172px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px; padding: 14px 10px;
  background: var(--tex-pergaminho), linear-gradient(180deg, #f7edd0, #e4d2a6);
  border: 2px solid var(--ouro-escuro); border-radius: 12px; color: var(--tinta);
  box-shadow: 0 3px 8px #00000050, inset 0 0 0 3px #ffffff33; text-align: center;
  transition: transform .1s, box-shadow .15s;
}
.loja-card:hover { transform: translateY(-2px); box-shadow: 0 6px 12px #00000060, 0 0 10px #c9a22766, inset 0 0 0 3px #ffffff33; }
.loja-ic { width: 46px; height: 46px; flex: 0 0 auto; }
.loja-nome {
  font-family: 'Cinzel', serif; font-size: 12px; font-weight: 700; line-height: 1.2;
  display: flex; align-items: center; justify-content: center;
}
.loja-desc { font-size: 12px; font-style: italic; color: var(--tinta-fraca); line-height: 1.25; margin-bottom: 4px; }
/* botão de compra: dourado, tamanho fixo (o fl:1 do .botao.mini estica — anulamos) */
.loja-card .loja-comprar {
  flex: 0 0 auto; width: 100%; padding: 8px 4px; font-size: 13px;
  background: linear-gradient(180deg, #caa544, #a5811f); color: #241808;
  border: none; box-shadow: 0 2px 0 #6d5316, inset 0 1px 0 #ffe99a;
}
.inv-ic { width: 42px; height: 42px; flex: 0 0 42px; }
.inv-txt { display: flex; flex-direction: column; flex: 1 1 auto; gap: 2px; }
.inv-nome { font-family: 'Cinzel', serif; font-weight: 700; font-size: 15px; }
.inv-desc { font-size: 14px; color: var(--tinta-fraca); line-height: 1.35; }
.inv-qtd { font-family: 'Cinzel', serif; font-weight: 700; font-size: 15px; color: var(--tinta); }
.inv-usar { flex: 0 0 auto; }
.inv-vazia, .inv-hint { text-align: center; color: var(--tinta-fraca); font-style: italic; padding: 18px 8px; }
.grade-guildas { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.card-guilda {
  display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center;
  background: linear-gradient(180deg, #f7edd0, #e4d2a6);
  border: 2px solid var(--ouro-escuro); border-radius: 10px; padding: 12px 8px; cursor: pointer;
  color: var(--tinta); box-shadow: 0 3px 8px #00000050, inset 0 1px 0 #ffffff88;
  transition: transform .1s, box-shadow .15s;
}
.card-guilda:hover { transform: translateY(-3px); box-shadow: 0 8px 14px #00000060, 0 0 12px #c9a22766; border-color: var(--ouro); }
.cg-icone { width: 40px; height: 40px; }
.cg-nome { font-family: 'Cinzel', serif; font-weight: 700; font-size: 14px; }
.cg-tag { font-size: 12px; color: var(--tinta-fraca); line-height: 1.25; }
.inv-acoes { margin-top: 14px; text-align: center; }

/* ---------------- tela de batalha ---------------- */
/* caixa de TAMANHO FIXO — não estende com o conteúdo; o que passar rola por dentro */
.batalha-caixa {
  max-width: min(1180px, 96vw); width: min(1180px, 96vw);
  height: min(90vh, 620px); overflow: hidden; text-align: left;
  display: flex; flex-direction: column; position: relative;
}
#batalha-corpo { flex: 1; min-height: 0; display: flex; }
/* ARENA: fileira inimiga + fileira fantasma + fileira aliada. O cenário fica SÓ aqui (25%). */
.batalha-arena { position: relative; border-radius: 10px; padding: 8px; margin-bottom: 4px; }
.batalha-arena::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--cenario-batalha, none) center / cover no-repeat;
  opacity: .25; border-radius: inherit;
}
.batalha-arena > * { position: relative; z-index: 1; }
/* fileira fantasma: linha invisível do mesmo tamanho de uma fileira, separando os dois lados */
.fileira-nulo { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; position: relative; margin: 6px 0; }
.cel-nula { aspect-ratio: 626 / 457; }
.fileira-nulo::after {
  content: '⚔'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--ouro-escuro); font-size: 20px; opacity: .55; pointer-events: none;
}
.batalha-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 230px; gap: 18px; align-items: stretch; }
.batalha-campo { min-height: 0; overflow-y: auto; padding-right: 6px; }
.batalha-campo::-webkit-scrollbar, .batalha-lateral::-webkit-scrollbar { width: 6px; }
.batalha-campo::-webkit-scrollbar-thumb, .batalha-lateral::-webkit-scrollbar-thumb { background: var(--ouro-escuro); border-radius: 3px; }
@media (max-width: 820px) { .batalha-grid { grid-template-columns: 1fr; } }
.batalha-topo { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.batalha-sub { font-family: 'Cinzel', serif; font-size: 12px; color: var(--t-verde); font-weight: 700; }
#batalha-fechar {
  background: none; border: 1px solid var(--ouro-escuro); color: var(--tinta-fraca);
  border-radius: 6px; width: 30px; height: 30px; cursor: pointer; font-size: 15px; flex: none;
}
#batalha-fechar:hover { color: var(--tinta); border-color: var(--ouro); }

.fileira { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.fileira.inimiga { margin-bottom: 8px; }
.fileira-sep { text-align: center; color: var(--ouro-escuro); font-size: 15px; margin: 8px 0; letter-spacing: 6px; }

.unidade, .slot-vazio { border-radius: 9px; aspect-ratio: 1 / 1.15; position: relative; }
.slot-vazio {
  border: 2px dashed #8a6a3a66; background: #2a1d1040;
}
.unidade {
  background: linear-gradient(180deg, #f0e3c0, #d9c69a);
  border: 2px solid var(--ouro-escuro);
  box-shadow: 0 2px 5px #00000060, inset 0 1px 0 #ffffff88;
  padding: 5px; cursor: grab; display: flex; flex-direction: column;
}
.unidade.inimiga { background: linear-gradient(180deg, #e7d3c6, #cbb09e); border-color: #7a4a3a; }
.unidade .uni-ic { flex: 1; min-height: 0; }
.unidade.vermelho .uni-ic { color: var(--t-vermelho); } .unidade.verde .uni-ic { color: var(--t-verde); }
.unidade.branco .uni-ic { color: var(--t-branco); } .unidade.azul .uni-ic { color: var(--t-azul); }
.unidade.preto .uni-ic { color: var(--t-preto); } .unidade.incolor .uni-ic { color: var(--t-incolor); }
.uni-stats { display: flex; justify-content: space-between; gap: 3px; margin-top: 2px; }
.uni-atk, .uni-hp {
  font-family: 'Cinzel', serif; font-weight: 700; font-size: 11px; line-height: 1;
  padding: 2px 4px; border-radius: 5px; color: #fff; min-width: 18px; text-align: center;
}
.uni-atk { background: #a33917; }  /* ataque = vermelho */
.uni-hp { background: #2e6b44; }   /* vida = verde */
.unidade.morto { opacity: .35; filter: grayscale(.6); }
.unidade.arrastando { opacity: .3; }
.unidade.tray { aspect-ratio: 1; padding: 6px; }
.uni-ghost { position: fixed; width: 56px; height: 64px; transform: translate(-50%,-50%); pointer-events: none; z-index: 110; opacity: .9; }

/* --- campo de batalha: tiles RETANGULARES com a ARTE CHEIA + stats sobre a arte --- */
.fileira .unidade, .fileira .slot-vazio { aspect-ratio: 626 / 457; } /* proporção do art_crop do MTG */
.fileira .unidade { padding: 0; overflow: visible; }
.fileira .unidade .uni-ic {
  position: absolute; inset: 0; flex: none; border-radius: 7px; overflow: hidden;
}
/* tiles COM arte: fundo escuro + arte INTEIRA (contain, nunca corta) */
.fileira .unidade .uni-ic:has(> .peca-art) { background: linear-gradient(160deg, #33241580, #14100a); }
.fileira .unidade .uni-ic .peca-img { transform: none; object-fit: contain; }
/* artes com 2 versões: no campo de batalha usa a LANDSCAPE completa (não a quadrada cortada) */
.fileira .unidade .uni-ic .peca-dual .peca-full { display: block; }
.fileira .unidade .uni-ic .peca-dual .peca-crop { display: none; }
.fileira .unidade .uni-ic > svg { padding: 12%; } /* ícones vetoriais (não-arte) respiram */
.fileira .unidade .uni-stats {
  position: absolute; left: 4px; right: 4px; bottom: 4px; margin: 0; z-index: 3; pointer-events: none;
}
.fileira .uni-atk, .fileira .uni-hp {
  font-size: 12px; padding: 2px 6px;
  border: 1px solid #00000066; box-shadow: 0 1px 3px #000a; text-shadow: 0 1px 1px #0007;
}

/* barra de vida do chefe */
.boss-vida { display: flex; align-items: center; gap: 8px; margin: 4px 2px 2px; }
.boss-lbl { font-family: 'Cinzel', serif; font-size: 11px; color: var(--tinta-fraca); flex: none; }
.boss-trilho { flex: 1; height: 12px; background: #00000050; border: 1px solid var(--ouro-escuro); border-radius: 6px; overflow: hidden; }
.boss-fill { height: 100%; background: linear-gradient(90deg, #a33917, #e4572e); transition: width .3s; }
.boss-num { font-family: 'Cinzel', serif; font-size: 12px; font-weight: 700; color: var(--t-vermelho); flex: none; }

/* bandeja de criaturas disponíveis */
.bandeja { margin-top: 14px; border-top: 1px dashed var(--ouro-escuro); padding-top: 10px; }
.bandeja-lbl { font-family: 'Cinzel', serif; font-size: 11px; color: var(--tinta-fraca); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 1px; }
.bandeja-itens { display: flex; flex-wrap: wrap; gap: 6px; }
.bandeja-itens .unidade { width: 50px; }
.tray-vazio { font-style: italic; color: var(--tinta-fraca); font-size: 14px; }

/* banner de iniciativa (montagem) */
.ini-banner {
  margin: 4px 0 12px; padding: 9px 12px; border-radius: 8px; text-align: center;
  font-family: 'Cinzel', serif; font-size: 13px; color: var(--tinta);
  background: #fff9e850; border: 1.5px solid var(--ouro);
}
.ini-banner.aliado { border-color: var(--t-verde); }
.ini-banner.inimigo { border-color: #a33917; }
.ini-banner b { color: var(--tinta); }

.fim-acoes { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.fim-acoes .botao { width: auto; }

.batalha-acoes { display: flex; gap: 8px; margin-top: 14px; align-items: center; }
.batalha-acoes .botao { width: auto; flex: 1; }
.batalha-acoes .botao.mini { flex: 0 0 auto; }
.mana-pill { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; font-size: 13px;
  padding: 5px 10px; border-radius: 999px; background: rgba(30, 60, 120, .35);
  border: 1px solid #4a7ac8; color: #cfe0ff; white-space: nowrap; }
.mana-pill b { color: #fff; font-family: 'Cinzel', serif; }
/* desabilitado no combate: opaco + acinzentado (não deixa o cenário vazar por baixo) */
.batalha-acoes .botao:disabled { opacity: 1; filter: grayscale(.6) brightness(.9); cursor: default; }

/* diário lateral */
.batalha-lateral {
  background: #fff9e830; border: 1px solid var(--ouro-escuro); border-radius: 8px;
  padding: 10px; box-shadow: inset 0 0 12px #8a6a3a1c;
  min-height: 0; display: flex; flex-direction: column; overflow-y: auto; /* preenche a altura fixa */
}
/* coluna direita = painel de contexto: ações no topo (Lutar/Atacar), depois trays ou Diário */
.batalha-lateral > .batalha-acoes:first-child,
.batalha-lateral > .fim-acoes:first-child { margin-top: 0; margin-bottom: 6px; }
.batalha-lateral .bandeja:first-child { margin-top: 6px; border-top: none; padding-top: 0; }
.batalha-lateral .bandeja { margin-top: 12px; }
.lat-vazio { font-style: italic; color: var(--tinta-fraca); font-size: 13px; padding: 14px 4px; text-align: center; line-height: 1.4; }
.lateral-titulo {
  font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--tinta-fraca); margin-bottom: 6px; text-align: center;
}
.lateral-log { flex: 1; min-height: 0; overflow-y: auto; font-family: 'Cormorant', serif; font-size: 14px; line-height: 1.35; }
.lateral-log::-webkit-scrollbar { width: 6px; }
.lateral-log::-webkit-scrollbar-thumb { background: var(--ouro-escuro); border-radius: 3px; }
.blog-linha { padding: 3px 2px; border-bottom: 1px dashed #8a6a3a33; color: var(--tinta-fraca); }
.blog-linha:last-child { color: var(--tinta); font-weight: 600; } /* mais recente = embaixo */
.blog-linha.seu { color: #2e6b44; }
.blog-linha.deles { color: #a33917; }
.blog-linha.morte { color: #5d3a75; font-weight: 600; }
.blog-linha:last-child.seu { color: #2e6b44; }
.blog-linha:last-child.deles { color: #a33917; }
.blog-vazia { font-style: italic; color: var(--tinta-fraca); font-size: 13px; text-align: center; padding: 12px 4px; }

/* veterana (persistiu da batalha anterior) + hp ferido */
.unidade.veterana { border-color: var(--ouro); box-shadow: 0 0 8px #c9a22755, 0 2px 5px #00000060, inset 0 1px 0 #ffffff88; }
.uni-hp.ferido { background: #7a5a1a; }

/* quem vai agir agora (varredura do turno) */
.unidade.atual {
  outline: 2px solid var(--ouro);
  outline-offset: 2px;
  animation: vez 1s ease-in-out infinite;
}
@keyframes vez { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.blog-linha.turno { color: var(--tinta); font-weight: 700; font-family: 'Cinzel', serif; font-size: 11px; text-align: center; letter-spacing: 1px; }

/* keywords no chip + estados */
.uni-kw {
  position: absolute; top: -6px; left: 2px; z-index: 2;
  font-family: 'Cinzel', serif; font-size: 8px; font-weight: 700; letter-spacing: 0;
  background: var(--madeira); color: var(--ouro-claro); border: 1px solid var(--ouro-escuro);
  border-radius: 5px; padding: 0 3px; line-height: 1.4;
}
.uni-atk.buff, .uni-hp.buff { box-shadow: 0 0 0 1.5px var(--ouro-claro); }
.unidade.congelada { filter: saturate(.4) brightness(1.1); }
.unidade.congelada::after {
  content: '❄'; position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-size: 22px; color: #8bc0f4; text-shadow: 0 0 6px #fff;
}
.unidade.lutando { border-style: double; border-width: 3px; cursor: default; }

/* sua vida + fase de alvos */
.minha-vida { display: flex; align-items: center; gap: 8px; margin: 8px 2px 2px; }
.vida-fill { height: 100%; background: linear-gradient(90deg, #8a6a1f, #c9a227); transition: width .3s; }
.vida-num { font-family: 'Cinzel', serif; font-size: 12px; font-weight: 700; color: #8a6a1f; flex: none; }
.alvo-aviso {
  margin-top: 14px; padding: 10px 12px; border-radius: 8px; text-align: center;
  background: #fff9e850; border: 1.5px dashed #a33917; color: var(--tinta);
  font-size: 15px;
}
[data-alvo]:hover, [data-alvo-boss]:hover { cursor: crosshair; outline: 2px dashed #a33917; outline-offset: 2px; }
[data-alvo-vida] { cursor: crosshair; outline: 2px dashed #2f7d4f; outline-offset: 2px; }
[data-alvo-vida]:hover { outline-color: #3fae6a; }

/* ---------------- quartel (reserva de guerra) ---------------- */
.quartel-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.quartel-vagas { font-family: 'Cinzel', serif; font-size: 12px; font-weight: 700; color: var(--tinta-fraca); }
.quartel-topo .botao.mini { flex: 0 0 auto; }
.quartel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 5px; }
.quartel-grid .unidade.qchip { position: relative; aspect-ratio: 1; padding: 7px; cursor: pointer; }
.quartel-grid .unidade.qchip.selecionado { border-color: var(--ouro) !important; box-shadow: 0 0 10px #c9a227aa, inset 0 1px 0 #ffffff88; }
.q-vazio { aspect-ratio: 1; border: 2px dashed #8a6a3a55; border-radius: 9px; background: #2a1d1025; }
.q-acao { margin-top: 8px; }
.q-acao .botao.mini { width: 100%; }
.q-dica { font-size: 13px; font-style: italic; color: var(--tinta-fraca); margin-top: 7px; line-height: 1.3; }

/* ---------------- Panteão (lendárias) ---------------- */
.lend-grade { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.lend-chip {
  position: relative; aspect-ratio: 1; padding: 6px; border-radius: 9px;
  background: linear-gradient(180deg, #fdf3d3, #e2cfa0);
  border: 2px solid var(--ouro); box-shadow: 0 0 8px #c9a22755, inset 0 1px 0 #ffffffaa;
  display: flex; align-items: center; justify-content: center; cursor: default;
}
.lend-chip.vermelho { color: var(--t-vermelho); } .lend-chip.verde { color: var(--t-verde); }
.lend-chip.branco { color: var(--t-branco); } .lend-chip.azul { color: var(--t-azul); }
.lend-chip.preto { color: var(--t-preto); } .lend-chip.incolor { color: var(--t-incolor); }
.lend-chip.vazio {
  background: #2a1d1040; border: 2px dashed #8a6a3a66; box-shadow: none;
  color: #8a6a3a; font-family: 'Cinzel', serif; font-weight: 700; font-size: 16px;
}
.lend-chip.enfermaria { filter: grayscale(.7) brightness(.85); cursor: pointer; border-style: dashed; }
.lend-chip.enfermaria::after {
  content: '💤'; position: absolute; top: -4px; right: -4px; font-size: 12px;
}
.lend-cd { position: absolute; bottom: 1px; left: 2px; right: 2px; text-align: center; font-size: 8px; font-weight: 700; color: var(--tinta); }
.lend-revisita { margin-top: 8px; font-size: 13px; }
.lend-revisita b { font-family: 'Cinzel', serif; font-size: 11px; color: var(--tinta-fraca); text-transform: uppercase; letter-spacing: 1px; display: block; margin-bottom: 4px; }
.lend-revisita .botao.mini { width: auto; display: inline-block; margin: 0 4px 4px 0; }
/* realce ao arrastar por cima de um depósito (o painel-destino certo acende) */
#quartel.solta-aqui, #arsenal.solta-aqui, #grimorio.solta-aqui {
  outline: 2px dashed var(--ouro); outline-offset: 3px; background: #fff9e820; border-radius: 8px;
}

/* scroll de feitiço no tabuleiro (pergaminho enrolado, tinto pela cor).
   Borda SÓLIDA igual às criaturas — o selo A/I/E e o fundo pergaminho já diferenciam. */
.item.scroll { background: linear-gradient(180deg, #fbf3d8, #e8d9ae); }
.tipo-selo {
  position: absolute; left: -5px; top: -5px; min-width: 15px; height: 15px;
  border-radius: 8px; background: var(--tinta); color: var(--pergaminho-1);
  font-family: 'Cinzel', serif; font-size: 9px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; padding: 0 3px;
}
.scroll-chip .tier {
  position: absolute; right: -4px; top: -4px; min-width: 15px; height: 15px; border-radius: 8px;
  background: var(--madeira); color: var(--ouro-claro); border: 1px solid var(--ouro);
  font-family: 'Cinzel', serif; font-size: 9px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; padding: 0 3px;
}
/* selo de CUSTO de mana (gota azul no canto inferior esquerdo) — reduzido pelo Prodígio fica verde */
.scroll-chip .mana-selo {
  position: absolute; left: -4px; bottom: -4px; min-width: 15px; height: 15px; border-radius: 8px;
  background: #1c3a6e; color: #cfe4ff; border: 1px solid #5b8fd6;
  font-family: 'Cinzel', serif; font-size: 9px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; padding: 0 3px;
}
.scroll-chip .mana-selo.reduzido { background: #1e5b34; color: #c9ffd8; border-color: #5fd08a; }

/* seletor de produção do Azul */
.modo-row { justify-content: center; }
.modo-btn.ativo { background: linear-gradient(180deg, #caa544, #a5811f); color: #241808; border: none; }
.rot-nativo { font-size: .78em; opacity: .7; font-style: italic; }
.modo-btn.ativo .rot-nativo { opacity: .85; }

/* alvo válido enquanto arrasta um anexo por cima (Quartel) */
.unidade.alvo-anexo { outline: 2px dashed var(--ouro); outline-offset: 2px; }

/* badge de anexo (aura/equipamento vestido) numa criatura */
.uni-anexo {
  cursor: pointer;
}
.uni-anexo:hover { transform: scale(1.25); }
.uni-anexo {
  position: absolute; right: -6px; bottom: -6px; width: 17px; height: 17px; z-index: 2;
  background: linear-gradient(180deg, #fbf3d8, #e8d9ae);
  border: 1.5px solid var(--ouro); border-radius: 50%; padding: 2px;
  box-shadow: 0 1px 3px #00000070;
}
.uni-anexo.vermelho { color: var(--t-vermelho); } .uni-anexo.verde { color: var(--t-verde); }
.uni-anexo.branco { color: var(--t-branco); } .uni-anexo.azul { color: var(--t-azul); }
.uni-anexo.preto { color: var(--t-preto); } .uni-anexo.incolor { color: var(--t-incolor); }

/* barra de instantâneas na batalha (borda sólida padrão, igual às criaturas) */
.scrolls-batalha { margin-top: 10px; }

/* origem Quartel na bandeja da batalha */
.uni-src { position: absolute; top: -7px; right: -5px; font-size: 10px; z-index: 2; filter: drop-shadow(0 1px 1px #0008); }
.unidade.tray.qtl { border-color: var(--ouro); }

/* tooltip de ficha (hover na campanha) */
#tip-batalha {
  /* acima de TODAS as telas (o duelo HS usa z-index 220) — tooltip sempre visível */
  position: fixed; display: none; z-index: 300; pointer-events: none;
  width: 236px; padding: 11px 13px; border-radius: 10px;
  background: var(--tex-pergaminho), linear-gradient(170deg, #f7edd0, var(--pergaminho-2));
  color: var(--tinta); border: 1.5px solid var(--ouro-escuro);
  box-shadow: 0 12px 28px #000000cc, inset 0 0 0 3px #ffffff33, inset 0 0 0 4px #8a6a3a33;
}
.tip-nome { font-family: 'Cinzel', serif; font-weight: 700; font-size: 15px; }
.tip-nome.vermelho { color: var(--t-vermelho); } .tip-nome.verde { color: var(--t-verde); }
.tip-nome.branco { color: var(--t-branco); } .tip-nome.azul { color: var(--t-azul); }
.tip-nome.preto { color: var(--t-preto); } .tip-nome.incolor { color: var(--t-incolor); }
.tip-sub { font-size: 13px; color: var(--tinta-fraca); margin: 1px 0 6px; font-family: 'Cormorant', serif; }
.tip-stats {
  display: flex; gap: 14px; font-family: 'Cinzel', serif; font-weight: 700; font-size: 14px;
  padding-bottom: 6px; border-bottom: 1px dashed #8a6a3a55;
}
.tip-atk { color: var(--t-vermelho); }
.tip-hp { color: var(--t-verde); }
.tip-kw { font-size: 14px; line-height: 1.35; margin-top: 6px; font-family: 'Cormorant', serif; }
.tip-kw b { font-family: 'Cinzel', serif; font-size: 11px; color: var(--tinta); }
.tip-kw.vazia { font-style: italic; color: var(--tinta-fraca); }

.batalha-fim { text-align: center; margin-top: 16px; padding: 14px; border-radius: 10px; border: 2px solid var(--ouro-escuro); }
.batalha-fim.vitoria { background: #e7f0d840; border-color: var(--t-verde); }
.batalha-fim.derrota { background: #f0d8d840; border-color: #a33917; }
.fim-titulo { font-family: 'Cinzel', serif; font-weight: 900; font-size: 22px; margin-bottom: 6px; }
.batalha-fim.vitoria .fim-titulo { color: var(--t-verde); }
.batalha-fim.derrota .fim-titulo { color: #a33917; }
.fim-recompensa { font-size: 15px; color: var(--tinta); margin-bottom: 12px; }

@media (max-width: 1080px) {
  main { grid-template-columns: 1fr; justify-items: center; }
  .painel, .painel-selecao, .coluna-dir { width: 100%; max-width: 560px; }
  .coluna-tabuleiro { order: -1; }   /* tabuleiro no topo quando empilhado */
  .dock { flex-direction: row; flex-wrap: wrap; justify-content: center; order: 1; width: 100%; }
  .dock-grupo { flex: 1 1 240px; }
  /* faixa de seleção quebra em coluna quando a tela é estreita */
  .painel-selecao #selecao { flex-wrap: wrap; }
  .sel-media { width: 100%; }
  .sel-acoes { width: 100%; }
  .creditos-topo { max-width: 100%; order: 3; flex-basis: 100%; margin-right: 0; }
}

/* ---- Cemitério (batalha): bloco compacto acima do Diário ---- */
.cemiterio-bloco {
  font-size: 12px; color: var(--tinta-suave, #7a6a52);
  border: 1px dashed rgba(122, 106, 82, .5); border-radius: 8px;
  padding: 4px 8px; margin-bottom: 6px; cursor: help;
  background: rgba(0, 0, 0, .04);
}
.cemiterio-bloco b { color: inherit; }

/* ---- PILHA (stack) ---- */
/* faixa das cartas no meio do campo (.fileira-nulo). Refinamento visual = Fase B. */
#pilha-strip.pilha-strip {
  display: flex; align-items: center; justify-content: center;
  gap: 0; padding: 2px 4px; min-height: 78px; width: 100%;
  overflow-x: auto;
}
.pilha-carta {
  position: relative; flex: 0 0 auto;
  width: 56px; height: 72px; margin-left: -10px;
  border-radius: 7px; overflow: hidden;
  border: 2px solid var(--ouro, #c9a227);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .5);
  background: #1a1109; cursor: help;
  transition: transform .12s;
}
.pilha-carta:first-child { margin-left: 0; }
.pilha-carta:hover { transform: translateY(-4px); z-index: 3; }
.pilha-carta.lado-aliado { border-color: var(--ouro, #c9a227); }
.pilha-carta.lado-inimigo { border-color: #c0392b; }
.pilha-carta.topo { box-shadow: 0 0 12px 2px #f0d489cc; animation: pilha-pulso 1s ease-in-out infinite; }
.pilha-carta.anulado { filter: grayscale(1) brightness(.6); }
.pilha-carta.anulado::after {
  content: "🚫"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.pilha-carta .pilha-art { display: block; width: 100%; height: 100%; }
.pilha-carta .pilha-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pilha-carta .pilha-art svg { width: 100%; height: 100%; fill: #c9a227; padding: 8px; }
.pilha-carta .pilha-ordem {
  position: absolute; top: 2px; left: 2px; z-index: 2;
  font: 700 10px/1 'Cinzel', serif; color: #fff;
  background: rgba(0, 0, 0, .7); border-radius: 4px; padding: 1px 3px;
}
.pilha-carta .pilha-nivel {
  position: absolute; bottom: 2px; right: 2px; z-index: 2;
  font: 700 11px/1 'Cinzel', serif; color: #f0d489;
  background: rgba(0, 0, 0, .7); border-radius: 4px; padding: 1px 4px;
}
@keyframes pilha-pulso { 0%, 100% { box-shadow: 0 0 8px 1px #f0d48999; } 50% { box-shadow: 0 0 16px 4px #f0d489ee; } }

/* banner de prioridade */
.pilha-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 6px 0; padding: 7px 12px; border-radius: 8px;
  background: linear-gradient(170deg, #2a1d10, #1a1109);
  border: 1px solid var(--ouro-escuro, #8a6a3a);
  color: #e6cf96; font-size: 13px;
}
.pilha-banner.sua-vez { border-color: var(--ouro, #c9a227); box-shadow: 0 0 0 1px #c9a22755; }
.pilha-banner.resolvendo { justify-content: center; font-style: italic; color: #cbb27e; }
.pilha-banner .pilha-banner-txt { flex: 1; min-width: 160px; }
.pilha-banner #b-passar { white-space: nowrap; }
/* efeito do feitiço do topo — sempre visível, sem depender de hover */
.pilha-banner .pilha-banner-desc {
  display: block; margin-top: 3px;
  font-family: 'Cormorant', Georgia, serif; font-size: 14.5px; font-weight: 500;
  letter-spacing: 0; color: #cbb27e; line-height: 1.3; white-space: normal;
}
/* alvo destacado no hover (Fase B usa .alvo-pilha) */
.alvo-pilha { outline: 2px solid #c0392b; outline-offset: 2px; box-shadow: 0 0 12px #c0392bcc; }

/* ============================================================
   PILHA — Fase B (polimento visual do grimório)
   ============================================================ */

/* a .fileira-nulo é um grid de 7 colunas — a faixa precisa ocupar a LINHA inteira,
   senão fica presa numa coluna (~36px). Também escondemos o ⚔ decorativo sob a pilha. */
#pilha-strip.pilha-strip { grid-column: 1 / -1; }
.fileira-nulo:has(#pilha-strip)::after { display: none; }

/* faixa: rolagem horizontal elegante quando passa de ~7 cartas */
#pilha-strip.pilha-strip { padding: 4px 8px; scrollbar-width: thin; scrollbar-color: var(--ouro-escuro, #8a6a3a) transparent; }
#pilha-strip.pilha-strip::-webkit-scrollbar { height: 6px; }
#pilha-strip.pilha-strip::-webkit-scrollbar-track { background: transparent; }
#pilha-strip.pilha-strip::-webkit-scrollbar-thumb { background: var(--ouro-escuro, #8a6a3a); border-radius: 3px; }

/* carta como mini-pergaminho (borda ouro-escuro, cantos, sombra profunda) */
.pilha-carta {
  border: 2px solid var(--ouro-escuro, #8a6a3a);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .55), inset 0 0 0 1px #00000055;
  background: radial-gradient(120% 120% at 50% 0%, #241708, #120b05);
}
.pilha-carta.lado-aliado { border-color: var(--ouro, #c9a227); box-shadow: 0 2px 7px rgba(0, 0, 0, .55), inset 0 0 0 1px #f0d48944; }
.pilha-carta.lado-inimigo { border-color: #c0392b; box-shadow: 0 2px 7px rgba(0, 0, 0, .55), inset 0 0 0 1px #c0392b55; }
.pilha-carta .pilha-ordem { font-family: 'Cinzel', serif; letter-spacing: .3px; }
/* selo "1º" dourado no topo */
.pilha-carta.topo .pilha-ordem { background: linear-gradient(180deg, var(--ouro-claro, #f0d489), var(--ouro, #c9a227)); color: #241808; }

/* slide-in de uma carta recém-conjurada */
.pilha-carta.entrando { animation: pilha-entra .24s ease-out; }
@keyframes pilha-entra {
  from { opacity: 0; transform: translateX(22px) translateY(-2px) scale(.9); }
  to   { opacity: 1; transform: none; }
}

/* carta em RESOLUÇÃO: levanta + flash dourado (vence o pulso de .topo por vir depois) */
.pilha-carta.resolvendo { z-index: 6; animation: pilha-resolve .34s ease-in-out forwards; }
@keyframes pilha-resolve {
  0%   { transform: translateY(-4px) scale(1);     box-shadow: 0 0 10px 2px #f0d489cc; }
  45%  { transform: translateY(-16px) scale(1.12); box-shadow: 0 0 24px 9px #ffe9a6, 0 0 44px 14px #f0d48988; }
  100% { transform: translateY(-16px) scale(1.12); box-shadow: 0 0 24px 8px #ffe9a6; }
}

/* alvo destacado no HOVER: vermelho rubi + glow + leve pulso, legível sobre arte MTG */
.alvo-pilha {
  outline: 2px solid #e0483a; outline-offset: 2px;
  box-shadow: 0 0 14px 2px #c0392bcc; border-radius: 6px;
  position: relative; z-index: 4;
  animation: alvo-pilha-pulso 1s ease-in-out infinite;
}
@keyframes alvo-pilha-pulso {
  0%, 100% { box-shadow: 0 0 10px 1px #c0392b99; }
  50%      { box-shadow: 0 0 18px 5px #e0483add; }
}
/* efeito global/sem alvo: fileira inteira com contorno mais suave */
.alvo-pilha-area {
  outline: 2px dashed #e0483abb; outline-offset: 3px;
  box-shadow: inset 0 0 20px #c0392b55; border-radius: 8px;
}

/* alvo PISCANDO em vermelho durante a resolução (~2 pulsos rápidos, ~340ms total) */
.alvo-flash { animation: alvo-flash .17s ease-in-out 0s 2; }
@keyframes alvo-flash {
  0%, 100% { box-shadow: 0 0 0 0 #c0392b00; outline: 2px solid transparent; }
  50%      { box-shadow: 0 0 18px 6px #e0483aee; outline: 2px solid #e0483a; outline-offset: 2px; }
}

/* scrolls RESPONDÍVEIS (jogador com prioridade na pilha + mana): pulso dourado convidativo */
.scroll-chip.pode-responder {
  outline: 2px solid var(--ouro, #c9a227); outline-offset: 1px;
  animation: pode-responder-pulso 1.1s ease-in-out infinite;
}
@keyframes pode-responder-pulso {
  0%, 100% { box-shadow: 0 0 6px 1px #c9a22766; }
  50%      { box-shadow: 0 0 14px 4px #f0d489cc; }
}

/* banner de prioridade — pergaminho escuro com destaque ouro */
.pilha-banner { font-family: 'Cinzel', serif; }
.pilha-banner b { color: var(--ouro-claro, #f0d489); }
.pilha-banner.sua-vez { border-color: var(--ouro, #c9a227); box-shadow: 0 0 0 1px #c9a22755, 0 0 14px #c9a22733; }
.pilha-banner #b-passar {
  background: linear-gradient(180deg, var(--ouro-claro, #f0d489), var(--ouro, #c9a227));
  color: #241808; border: none; box-shadow: 0 2px 0 #6d5316, inset 0 1px 0 #ffe99a;
}
.pilha-tip-ordem { color: var(--ouro-claro, #f0d489); font-weight: 700; }