/* =========================================================================
   Path of Card — tema pixel art
   Molduras de pixel: "cantos em degrau" feitos com 4 box-shadows deslocados
   (sem border-radius) + bisel claro/escuro por dentro. A cor da moldura vem
   de --moldura, então estados (hover, raridade, seleção) só trocam a variável.
   ========================================================================= */

/* Fonte do texto: VT323 (Google Fonts, licença OFL) servida pelo projeto. Os dígitos são bem
   distintos. size-adjust a deixa do tamanho visual da fonte anterior, sem mexer nos font-size. */
@font-face {
  font-family: 'VT323';
  src: url('fontes/VT323.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  size-adjust: 125%;
}

:root {
  --px: 4px;

  --fundo: #1b1523;
  --fundo-2: #140f1a;
  --painel: #2b2238;
  --painel-2: #372b48;
  --painel-3: #46375b;
  --contorno: #0b0710;
  --luz: rgba(255, 255, 255, 0.10);
  --sombra: rgba(0, 0, 0, 0.38);
  --borda: #5c4b75;

  --texto: #f1e9d8;
  --texto-suave: #a99bbd;
  --destaque: #f2c14e;
  --destaque-escuro: #a8741f;
  --ok: #7ad06a;
  --ok-escuro: #2f5a2a;
  --erro: #e5534b;
  --erro-escuro: #6e2323;

  --hp: #d64545;
  --escudo: #5ad1e8;
  --mp: #4a6fe0;
  --ataque: #f2c14e;
  --magia: #b98cf2;
  --cura: #7ad06a;

  --fonte: 'VT323', ui-monospace, 'Courier New', monospace;
  --fonte-titulo: 'Press Start 2P', 'VT323', monospace;
  --contorno-texto: 2px 0 0 var(--contorno), -2px 0 0 var(--contorno), 0 2px 0 var(--contorno), 0 -2px 0 var(--contorno);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { -webkit-font-smoothing: none; }

body {
  margin: 0;
  color: var(--texto);
  font-family: var(--fonte);
  font-size: 17px;
  line-height: 1.35;
  background-color: var(--fundo);
  /* pontilhado (dither) bem sutil */
  background-image:
    linear-gradient(45deg, rgba(255, 255, 255, 0.025) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.025) 75%),
    linear-gradient(45deg, rgba(255, 255, 255, 0.025) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.025) 75%);
  background-size: 8px 8px;
  background-position: 0 0, 4px 4px;
}

img.pixel { image-rendering: pixelated; image-rendering: crisp-edges; display: inline-block; vertical-align: middle; }
.icone { flex: none; }

h1, h2 {
  font-family: var(--fonte-titulo);
  color: var(--destaque);
  font-weight: 400;
  margin: 0 0 14px;
  line-height: 1.5;
  text-shadow: 3px 3px 0 var(--contorno);
}
h1 { font-size: 18px; }
h2 { font-size: 12px; }
h3 { font-size: 17px; margin: 0; }

[hidden] { display: none !important; }

.texto-suave { color: var(--texto-suave); }
.aviso { color: var(--erro); min-height: 1.35em; margin: 8px 0; }
.lista-erros { color: var(--erro); white-space: pre-wrap; font-family: var(--fonte); }

/* ---------- Moldura de pixel (componentes com caixa) ---------- */
.painel, .carta, .hub-placa, .combatente, .pacote, .missao, .classe, .combate-lateral, .combate-resultado,
.slot, .no, .arena-previa, .aviso-global, .aviso-missao, .combate-campo, .trilha li {
  --moldura: var(--contorno);
  --bisel-claro: var(--luz);
  --bisel-escuro: var(--sombra);
  border: 0;
  border-radius: 0;
  box-shadow:
    0 calc(-1 * var(--px)) 0 0 var(--moldura),
    0 var(--px) 0 0 var(--moldura),
    calc(-1 * var(--px)) 0 0 0 var(--moldura),
    var(--px) 0 0 0 var(--moldura),
    inset var(--px) var(--px) 0 0 var(--bisel-claro),
    inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 0 var(--bisel-escuro);
}

.painel {
  background: var(--painel);
  padding: 18px;
  margin: var(--px);
}

/* ---------- Casca ---------- */
.topo {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 18px;
  padding: 10px 18px;
  background-color: #2a2034;
  /* tijolos */
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.35) 3px, transparent 3px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.35) 3px, transparent 3px);
  background-size: 48px 18px;
  border-bottom: var(--px) solid var(--contorno);
  box-shadow: 0 var(--px) 0 rgba(0, 0, 0, 0.35);
}
.topo-titulo {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--fonte-titulo); font-size: 14px; color: var(--destaque);
  background: none; border: 0; padding: 0; cursor: pointer;
  text-shadow: 3px 3px 0 var(--contorno);
}
.topo-espaco { flex: 1; }
.topo-item {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--fonte-titulo); font-size: 11px;
  text-shadow: var(--contorno-texto);
}
.topo-classe { color: var(--texto); }
.topo-moedas { color: var(--destaque); }
.topo-pacotes { color: #ffb3a8; }
.tela { max-width: 1240px; margin: 0 auto; padding: 22px 18px 40px; }

.titulo-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.titulo-linha h1, .titulo-linha h2 { margin: 0; }
.mensagem { min-height: 1.35em; margin: 0 0 10px; }
.mensagem.ok { color: var(--ok); }
.mensagem.erro { color: var(--erro); }
.dica { font-size: 15px; margin: -4px 0 10px; }
.linha-botoes { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.campo-inline { color: var(--texto-suave); display: inline-flex; align-items: center; gap: 8px; }

/* ---------- Controles ---------- */
.botao, .chip, .aba {
  --moldura: var(--contorno);
  font-family: var(--fonte);
  font-size: 16px;
  color: var(--texto);
  background: var(--painel-3);
  border: 0;
  border-radius: 0;
  padding: 7px 14px;
  margin: 3px;
  cursor: pointer;
  box-shadow:
    0 -3px 0 0 var(--moldura), 0 3px 0 0 var(--moldura), -3px 0 0 0 var(--moldura), 3px 0 0 0 var(--moldura),
    inset 3px 3px 0 0 rgba(255, 255, 255, 0.18), inset -3px -3px 0 0 rgba(0, 0, 0, 0.35);
}
.botao:hover:not(:disabled), .chip:hover, .aba:hover { filter: brightness(1.15); }
.botao:active:not(:disabled), .chip:active {
  transform: translateY(2px);
  box-shadow:
    0 -3px 0 0 var(--moldura), 0 3px 0 0 var(--moldura), -3px 0 0 0 var(--moldura), 3px 0 0 0 var(--moldura),
    inset 3px 3px 0 0 rgba(0, 0, 0, 0.35), inset -3px -3px 0 0 rgba(255, 255, 255, 0.08);
}
.botao:disabled { opacity: 0.45; cursor: default; }
.botao.ativo, .botao-principal, .chip.ativo {
  background: var(--destaque);
  color: #2a1a05;
}
.botao-principal { font-weight: 700; }
.botao-secundario { background: var(--painel-2); }
.botao-pequeno { padding: 3px 10px; font-size: 15px; }
.botao-grande { width: calc(100% - 6px); padding: 12px; font-family: var(--fonte-titulo); font-size: 12px; margin-top: 12px; }
.botao:focus-visible, .chip:focus-visible, .aba:focus-visible, select:focus-visible, input:focus-visible,
.slot:focus-visible, .no:focus-visible, .hub-area:focus-visible {
  outline: 3px dashed var(--destaque);
  outline-offset: 6px;
}

select, input {
  font-family: var(--fonte);
  font-size: 16px;
  color: var(--texto);
  background: var(--fundo-2);
  border: 0;
  border-radius: 0;
  padding: 6px 10px;
  margin: 3px;
  box-shadow: 0 0 0 3px var(--contorno), inset 3px 3px 0 0 rgba(0, 0, 0, 0.5);
}
select:disabled { opacity: 0.6; }
input[type="checkbox"] { box-shadow: none; accent-color: var(--destaque); width: 18px; height: 18px; }

.campo { display: block; margin: 14px 0 6px; color: var(--texto-suave); }
.campo input { display: block; margin-top: 6px; width: calc(100% - 6px); }

.etiqueta, .tag, .rank, .buff, .recompensa {
  display: inline-block;
  font-size: 13px;
  line-height: 1.3;
  padding: 1px 7px;
  border-radius: 0;
  box-shadow: 0 0 0 2px var(--contorno);
  margin: 2px;
}
.etiqueta { background: var(--hp); color: #fff; margin-left: 8px; }
.etiqueta-suave { background: var(--painel-2); color: var(--texto-suave); margin-left: 2px; }
.etiqueta-ok { background: var(--ok-escuro); color: #c9f5bf; margin-left: 2px; }
.etiqueta-destaque { background: var(--destaque); color: #2a1a05; margin-left: 2px; }

/* ---------- Hub (mapa da cidade) ---------- */
.cidade-mapa { position: relative; margin: 4px 4px 28px; line-height: 0; user-select: none; }
.cidade-mapa > img {
  display: block; width: 100%; height: auto;
  box-shadow: 0 0 0 var(--px) var(--contorno), 0 0 0 calc(2 * var(--px)) var(--borda);
}
.hub-area {
  position: absolute;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0; border: 0; background: transparent;
  line-height: normal; font-family: var(--fonte); color: var(--texto);
  cursor: pointer;
}
.hub-area::before {
  content: ''; position: absolute; inset: 0;
  border: 3px dashed transparent;
  transition: background 0.12s, border-color 0.12s;
}
.hub-area:hover::before { background: rgba(242, 193, 78, 0.14); border-color: var(--destaque); }
.hub-area:active .hub-placa { transform: translateY(2px); }
.hub-placa {
  position: relative; margin-bottom: 6px; padding: 4px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--painel);
  transition: background 0.12s;
}
.hub-area:hover .hub-placa { --moldura: var(--destaque); background: var(--painel-2); }
/* Nome só no hover/foco; a placa fica visível sem hover apenas se tiver avisos. */
.hub-area:not(:hover):not(:focus-visible) .hub-nome { display: none; }
.hub-area:not(:hover):not(:focus-visible) .hub-placa:not(:has(.hub-avisos)) { display: none; }
/* Prédio com recorte: o PNG cobre o prédio da cidade e só aparece, com brilho, no hover. */
.hub-area-recorte::before { display: none; }
.hub-recorte {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; pointer-events: none;
  transition: opacity 0.15s, filter 0.15s;
}
.hub-area-recorte:hover .hub-recorte, .hub-area-recorte:focus-visible .hub-recorte {
  opacity: 1;
  filter: brightness(1.15) drop-shadow(0 0 2px var(--destaque)) drop-shadow(0 0 8px var(--destaque));
}
.hub-area-minha.hub-area-recorte:not(:hover) .hub-recorte { opacity: 1; filter: drop-shadow(0 0 3px var(--ok)); }
.hub-nome { font-family: var(--fonte-titulo); font-size: 10px; color: var(--destaque); line-height: 1.6; text-shadow: 2px 2px 0 var(--contorno); white-space: nowrap; }
.ferramentas summary { cursor: pointer; color: var(--texto-suave); font-family: var(--fonte-titulo); font-size: 11px; }
.ferramentas[open] summary { margin-bottom: 12px; }
.ferramentas { margin-top: 18px; }

/* ---------- Cartas ---------- */
.carta {
  --cor-raridade: #c8c8c8;
  --moldura: var(--cor-raridade);
  --bisel-claro: rgba(255, 255, 255, 0.12);
  position: relative;
  display: flex; flex-direction: column; gap: 7px;
  background: var(--painel-2);
  padding: 12px;
  margin: var(--px);
  font-size: 15px;
}
.carta-topo {
  display: flex; gap: 8px; align-items: center;
  margin: -12px -12px 2px; padding: 8px 10px 7px;
  background: color-mix(in srgb, var(--cor-raridade) 22%, var(--painel));
  border-bottom: 3px solid var(--contorno);
}
.carta-nome { flex: 1; font-weight: 700; color: var(--cor-raridade); text-shadow: 2px 2px 0 var(--contorno); }
.carta-raridade { font-size: 13px; color: var(--texto-suave); white-space: nowrap; }
.carta-tags { display: flex; flex-wrap: wrap; gap: 2px; }
.tag { background: var(--painel); color: var(--texto-suave); font-size: 12px; }
.tag-slot { color: var(--destaque); }
.tag-classe { color: #9cc3e8; background: #1f2a3d; }
.tag-familia { color: #ffb3a8; background: #3d1f24; }
.tag-categoria { color: #e8d4ff; background: #2e2440; }
.tag-categoria-area { color: #ffe29a; background: #3d3218; }
.carta-linhas { list-style: none; margin: 0; padding: 0; }
.carta-linhas li { padding: 1px 0; }
.carta-linhas li::before { content: '▸ '; color: var(--texto-suave); }
.linha-regra { color: var(--destaque); font-weight: 700; }
.linha-magia { color: var(--magia); }
.linha-perigo { color: var(--erro); font-weight: 700; }
.linha-seguro { color: var(--ok); font-weight: 700; }
.carta-descricao { margin: 0; color: var(--texto-suave); font-style: italic; }
.carta-rodape { margin-top: auto; padding-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.carta.equipada { --bisel-claro: rgba(122, 208, 106, 0.35); }
.carta.compativel { --moldura: #ffffff; animation: piscar-moldura 0.8s steps(2) infinite; }
.carta.indisponivel { opacity: 0.6; }
.motivo { font-size: 14px; }
.grade-cartas { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 14px; }

@keyframes piscar-moldura { 50% { --moldura: var(--destaque); } }

/* ---------- Inventário ---------- */
.inv-colunas { display: grid; grid-template-columns: 350px minmax(0, 1fr); gap: 20px; align-items: start; }
.inv-esquerda { display: flex; flex-direction: column; gap: 20px; }
.slots { display: flex; flex-direction: column; gap: 14px; }
.slot {
  --moldura: #3a2d4c;
  --bisel-claro: transparent;
  background: var(--fundo-2);
  padding: 8px;
  margin: var(--px);
  cursor: pointer;
}
.slot:hover { --moldura: var(--texto-suave); }
.slot.selecionado { --moldura: var(--destaque); }
.slot-rotulo { font-family: var(--fonte-titulo); font-size: 9px; color: var(--texto-suave); margin: 2px 0 8px; letter-spacing: 0.05em; }
.slot-vazio {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--texto-suave); padding: 14px; text-align: center;
}
.slot-vazio img { opacity: 0.35; }
.lista-magias { margin: 0; padding-left: 20px; color: var(--magia); }

.filtros { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; align-items: flex-start; }
.filtro-grupo { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.filtro-rotulo { color: var(--texto-suave); font-size: 15px; min-width: 70px; }
.chip { font-size: 14px; padding: 3px 12px; background: var(--painel-2); }

/* ---------- Arena ---------- */
.arena-colunas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
.arena-form select { width: calc(100% - 6px); }
.arena-form h2 { margin-top: 20px; }
.arena-inimigo { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 0; }
.arena-inimigo > span { display: inline-flex; align-items: center; gap: 10px; }
.arena-inimigo input { width: 76px; }
.arena-previa { background: var(--painel-2); padding: 16px; margin: var(--px); }
.retrato { display: flex; justify-content: center; margin-bottom: 10px; }
.tabela-atributos { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.tabela-atributos th { text-align: left; font-weight: normal; color: var(--texto-suave); padding: 2px 0; }
.tabela-atributos td { text-align: right; font-variant-numeric: tabular-nums; }
.tabela-atributos tr:nth-child(odd) { background: rgba(0, 0, 0, 0.14); }
.tabela-atributos tr.bloqueado { opacity: 0.45; }

/* ---------- Combate ---------- */
.combate-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; }
.combate-info { flex: 1 1 260px; color: var(--texto-suave); }
.combate-tempo {
  font-family: var(--fonte-titulo); font-size: 13px; color: var(--destaque);
  min-width: 5em; text-align: right; text-shadow: var(--contorno-texto);
}
.combate-controles { display: flex; gap: 2px; flex-wrap: wrap; }

.combate-corpo { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }

/* Campo: parede de pedra em cima, piso de lajotas embaixo. Herói à esquerda, inimigos à direita. */
.combate-campo {
  --bisel-claro: transparent;
  position: relative;
  margin: var(--px);
  padding: 22px 16px 26px;
  min-height: 380px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "heroi inimigos" "resultado resultado";
  align-items: end;
  gap: 18px 24px;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.28) 0 3px, transparent 3px 56px) bottom / 100% 34% no-repeat,
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0 3px, transparent 3px 26px) bottom / 100% 34% no-repeat,
    linear-gradient(#3d3140, #2b2230) bottom / 100% 34% no-repeat,
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.30) 0 3px, transparent 3px 40px) top / 100% 66% no-repeat,
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0 3px, transparent 3px 20px) top / 100% 66% no-repeat,
    #221a2d;
}
.combate-heroi { grid-area: heroi; display: flex; justify-content: center; }
.combate-inimigos { grid-area: inimigos; display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; align-items: flex-end; }
.combate-resultado { grid-area: resultado; }

.combatente {
  --moldura: var(--contorno);
  position: relative;
  width: 210px;
  background: rgba(27, 21, 35, 0.88);
  padding: 10px 12px 12px;
  margin: var(--px);
  display: flex; flex-direction: column; gap: 5px;
}
.combatente-heroi { width: 270px; --moldura: var(--destaque-escuro); }
.comb-sprite { display: flex; justify-content: center; align-items: flex-end; min-height: 72px; margin-top: -2px; }
.sprite-combate { animation: respirar 1.2s steps(2) infinite; transform-origin: bottom center; }
.combatente-inimigo:nth-child(2n) .sprite-combate { animation-delay: -0.6s; }
.comb-nome { font-family: var(--fonte-titulo); font-size: 10px; text-align: center; margin: 4px 0 2px; text-shadow: 2px 2px 0 var(--contorno); }
.combatente.atingido .sprite-combate { animation: golpe 0.24s steps(3); }
.combatente.atingido { animation: tremer 0.2s steps(2); }
.combatente.morto { opacity: 0.55; }
.combatente.morto .sprite-combate { animation: none; transform-origin: center; transform: rotate(90deg); filter: grayscale(1) brightness(0.6); }
.combatente.morto .comb-nome { text-decoration: line-through; }

.barra {
  position: relative;
  height: 18px;
  background: var(--fundo-2);
  box-shadow: 0 0 0 3px var(--contorno);
  margin: 3px 3px 5px;
  overflow: hidden;
}
.barra-preench {
  height: 100%; width: 0;
  /* Sem transição: a largura é atualizada a cada quadro. Uma transição recomeçava a cada mudança e,
     em 2× e 4× (valores mudando a cada quadro), a barra ficava presa vazia. */
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.28), inset 0 -3px 0 rgba(0, 0, 0, 0.3);
}
/* segmentos */
.barra::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 9px, rgba(0, 0, 0, 0.35) 9px 11px);
  pointer-events: none;
}
.barra-texto {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-variant-numeric: tabular-nums;
  text-shadow: var(--contorno-texto);
}
.barra-hp .barra-preench { background: var(--hp); }
.barra-escudo, .barra-mp { height: 13px; }
.barra-escudo .barra-preench { background: var(--escudo); }
.barra-mp .barra-preench { background: var(--mp); }
.barra-escudo .barra-texto, .barra-mp .barra-texto { font-size: 11px; }
.barra-ataque { height: 4px; background: var(--fundo-2); margin: 1px 3px 3px; overflow: hidden; }
.ataque-preench { height: 100%; width: 0; background: var(--ataque); }

.comb-magias { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; }
.magia {
  position: relative;
  display: flex; justify-content: space-between;
  padding: 2px 8px;
  margin: 0 3px;
  font-size: 14px;
  background: var(--fundo-2);
  box-shadow: 0 0 0 2px var(--contorno);
  overflow: hidden;
}
.magia > span { position: relative; }
.magia-preench { position: absolute; inset: 0 auto 0 0; width: 0; background: rgba(185, 140, 242, 0.22); }
.magia-estado { font-variant-numeric: tabular-nums; color: var(--texto-suave); }
.magia.pronta { box-shadow: 0 0 0 2px var(--magia); }
.magia.pronta .magia-estado { color: var(--magia); }
.magia.sem-mp { box-shadow: 0 0 0 2px var(--mp); }
.magia.sem-mp .magia-estado { color: #9fb4ff; }

.comb-buffs { display: flex; flex-wrap: wrap; gap: 2px; }
.buff { font-size: 12px; background: #3a3320; color: var(--destaque); }

.numero-flutuante {
  position: absolute;
  top: 22%;
  z-index: 3;
  pointer-events: none;
  font-family: var(--fonte-titulo);
  font-size: 12px;
  text-shadow: var(--contorno-texto);
  animation: subir 0.9s steps(6) forwards;
  white-space: nowrap;
}
.num-dano { color: #fff; }
.num-critico { color: var(--destaque); font-size: 17px; }
.num-magia { color: var(--magia); }
.num-cura { color: var(--cura); }
.num-esquiva { color: var(--texto-suave); font-family: var(--fonte); font-size: 15px; }
.num-lancou { color: var(--magia); font-family: var(--fonte); font-size: 14px; top: -10px; }

@keyframes subir {
  from { transform: translate(-50%, 0); opacity: 1; }
  70% { opacity: 1; }
  to { transform: translate(-50%, -40px); opacity: 0; }
}
@keyframes tremer {
  0% { transform: translateX(-4px); }
  100% { transform: translateX(4px); }
}
@keyframes respirar {
  from { transform: translateY(0); }
  to { transform: translateY(-3px); }
}
@keyframes golpe {
  0% { filter: brightness(3) saturate(0); }
  100% { filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sprite-combate, .combatente.atingido, .combatente.atingido .sprite-combate, .carta.compativel { animation: none; }
  .numero-flutuante { animation-duration: 0.01s; }
}

.combate-resultado {
  --moldura: var(--destaque);
  justify-self: center;
  width: min(440px, 100%);
  background: var(--painel);
  padding: 18px;
  margin: var(--px);
  text-align: center;
}
.resultado-titulo { font-size: 16px; }
.resultado-vitoria { color: var(--ok); }
.resultado-derrota, .resultado-tempoEsgotado { color: var(--erro); }
.resultado-estatisticas { display: grid; grid-template-columns: 1fr auto; gap: 3px 16px; text-align: left; margin: 0 0 14px; }
.resultado-estatisticas dt { color: var(--texto-suave); }
.resultado-estatisticas dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.resultado-acoes { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

.combate-lateral {
  background: var(--fundo-2);
  padding: 14px;
  margin: var(--px);
  display: flex; flex-direction: column;
  max-height: 72vh;
}
.combate-log { list-style: none; margin: 0; padding: 0 4px 0 0; overflow-y: auto; font-size: 14px; flex: 1; }
.log { padding: 2px 4px; }
.log:nth-child(odd) { background: rgba(255, 255, 255, 0.03); }
.log-tempo { color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.log-causado { color: var(--texto); }
.log-recebido { color: #ff9a92; }
.log-critico { font-weight: 700; color: var(--destaque); }
.log-magia, .log-buff, .log-buffFim { color: var(--magia); }
.log-cura { color: var(--cura); }
.log-esquiva { color: var(--texto-suave); font-style: italic; }
.log-morte { color: var(--destaque); }
.log-fim { color: var(--destaque); font-weight: 700; }
.log-separador { color: var(--texto-suave); text-align: center; background: none !important; }

/* barra de rolagem pixelada */
.combate-log::-webkit-scrollbar { width: 10px; }
.combate-log::-webkit-scrollbar-track { background: var(--painel); }
.combate-log::-webkit-scrollbar-thumb { background: var(--borda); border: 2px solid var(--contorno); }

/* ---------- Preparo e incursão ---------- */
.preparo-colunas { display: grid; grid-template-columns: minmax(0, 1fr) 370px; gap: 20px; align-items: start; }
.preparo-esquerda { display: flex; flex-direction: column; gap: 20px; }
.slots-masmorra { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.slot-masmorra { cursor: default; }
.slot-masmorra:hover { --moldura: #3a2d4c; }
.previa { position: sticky; top: 76px; }
.lista-previa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 12px; margin: 14px 0; }
.lista-previa dt { color: var(--texto-suave); }
.lista-previa dd { margin: 0; text-align: right; }
.perigo-alto { color: var(--erro); font-weight: 700; }
.perigo-baixo { color: var(--ok); font-weight: 700; }

.incursao-topo { margin-bottom: 16px; }
.trilha { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 4px; padding: 0; }
.trilha li {
  --px: 3px;
  --moldura: var(--contorno);
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fonte-titulo); font-size: 10px; color: var(--texto-suave);
  background: var(--fundo-2);
}
.trilha li.feito { background: var(--ok-escuro); color: #c9f5bf; }
.trilha li.atual { --moldura: var(--destaque); color: var(--destaque); background: var(--painel-3); animation: piscar-moldura 0.8s steps(2) infinite; }
.trilha li.chefe { color: #ff9a92; background: var(--erro-escuro); }
.trilha li.chefe.feito { color: #c9f5bf; background: var(--ok-escuro); }
.incursao-linha { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; }
.feed-recompensas { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; min-height: 1.6em; }
.recompensa { font-size: 13px; background: #3a3320; color: var(--destaque); }
.recompensa:first-child { animation: brilhar 0.6s steps(3); }
.recompensa-pacote { background: #2d2440; color: var(--magia); font-weight: 700; }
@keyframes brilhar { from { background: var(--destaque); color: #2a1a05; } }
.resumo-incursao { max-width: 580px; margin: 0 auto; text-align: center; }

/* ---------- Guilda ---------- */
.guilda { display: flex; flex-direction: column; gap: 20px; }
.guilda .mensagem { margin: 0; }
.grade-classes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.classe {
  display: flex; flex-direction: column; gap: 7px; align-items: flex-start;
  padding: 14px; margin: var(--px); background: var(--painel-2);
}
.classe .retrato { align-self: center; }
.classe h3 { font-family: var(--fonte-titulo); font-size: 12px; color: var(--destaque); align-self: center; text-shadow: 2px 2px 0 var(--contorno); }
.classe p { margin: 0; }
.classe .carta-linhas { font-size: 15px; flex: 1; }
.classe-atual { --moldura: var(--ok); }
.aviso-neutro { color: var(--destaque); }
.grade-missoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.missao {
  display: flex; flex-direction: column; gap: 5px;
  padding: 12px 14px; margin: var(--px); background: var(--painel-2);
  font-size: 15px;
}
.missao p { margin: 0; }
.missao.indisponivel { opacity: 0.6; }
.missao-ativa { --moldura: var(--destaque); }
.missao-topo { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.missao-nome { font-weight: 700; }
.rank { font-family: var(--fonte-titulo); font-size: 9px; background: var(--destaque); color: #2a1a05; white-space: nowrap; padding: 3px 6px; }
.aviso-missao { margin: 10px var(--px); padding: 10px 12px; background: #2a2418; --moldura: var(--destaque-escuro); }
.aviso-missao-ok { --moldura: var(--ok); background: #1f2c1c; }
.novo-rank { margin-top: 6px; color: var(--ok); font-family: var(--fonte-titulo); font-size: 11px; line-height: 1.6; }

/* ---------- Passivas ---------- */
.abas { display: flex; gap: 6px; margin: 0 0 14px; padding: 0 4px; }
.aba { background: var(--painel-2); color: var(--texto-suave); padding: 8px 16px; }
.aba.ativa { background: var(--destaque); color: #2a1a05; }
.pontos { font-weight: 700; margin: 0 0 6px; color: var(--destaque); }
.passivas-colunas { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.arvore-rolagem { overflow-x: auto; padding: 8px 0; }
.arvore { position: relative; margin: 0 auto; }
.arvore-linhas { position: absolute; inset: 0; shape-rendering: crispEdges; }
.ligacao { stroke: #4a3c5e; stroke-width: 4; stroke-dasharray: 6 6; }
.ligacao.ativa { stroke: var(--destaque); stroke-dasharray: none; }
.no {
  --px: 3px;
  --moldura: var(--contorno);
  position: absolute; transform: translate(-50%, -50%);
  width: 110px; min-height: 54px; padding: 6px 8px;
  font-family: var(--fonte); font-size: 14px; line-height: 1.2;
  color: var(--texto); background: var(--painel-2);
  cursor: pointer;
}
.no:hover { filter: brightness(1.2); }
.no-comprado { background: var(--destaque); color: #2a1a05; font-weight: 700; --moldura: var(--destaque-escuro); }
.no-disponivel { --moldura: var(--ok); background: #25331f; }
.no-semPontos { --moldura: #6b5a85; }
.no-bloqueado { opacity: 0.45; }
.no-unico:not(.no-comprado) { --moldura: var(--magia); background: #2d2440; }
.no-unico::after {
  content: ''; position: absolute; top: -9px; left: 50%; width: 10px; height: 10px;
  background: var(--magia); box-shadow: 0 0 0 3px var(--contorno); transform: translateX(-50%) rotate(45deg);
}
.no-unico.no-comprado::after { background: #fff3b0; }
.no.selecionado { --moldura: #ffffff; }
.legenda { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 14px; font-size: 14px; color: var(--texto-suave); }
.legenda-item::before { content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; background: var(--painel-2); box-shadow: 0 0 0 3px var(--contorno); }
.legenda-item.comprado::before { background: var(--destaque); }
.legenda-item.disponivel::before { box-shadow: 0 0 0 3px var(--ok); }
.legenda-item.bloqueado::before { opacity: 0.45; }
.legenda-item.unico::before { background: var(--magia); }
.detalhe-no { position: sticky; top: 76px; }
.detalhe-no h2 { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.detalhe-no h3 { font-size: 15px; color: var(--texto-suave); margin: 14px 0 4px; }
.lista-previa-passiva { margin: 0 0 14px; padding-left: 20px; }

/* ---------- Cidade ---------- */
.hub-avisos { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
.hub-avisos .etiqueta { font-size: 13px; margin: 2px; }
.hub-area-minha .hub-placa { --moldura: var(--ok); }
.hub-area-minha::before { border-color: rgba(122, 208, 106, 0.6); }

/* ---------- Guilda ---------- */
.guilda-cabecalho { display: grid; grid-template-columns: auto minmax(0, 1fr) 260px; gap: 20px; align-items: start; }
.guilda-cabecalho .brasao { margin-top: 4px; }
.guilda-texto { display: flex; flex-direction: column; gap: 10px; }
.guilda-texto p { margin: 0 0 8px; }
.guilda-minha { --moldura: var(--ok); }

/* ---------- Topo: save e diálogo ---------- */
.topo-save {
  --moldura: var(--contorno);
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; margin: 3px;
  background: var(--painel-3); border: 0; cursor: pointer;
  box-shadow:
    0 -3px 0 0 var(--moldura), 0 3px 0 0 var(--moldura), -3px 0 0 0 var(--moldura), 3px 0 0 0 var(--moldura),
    inset 3px 3px 0 0 rgba(255, 255, 255, 0.18), inset -3px -3px 0 0 rgba(0, 0, 0, 0.35);
}
.topo-save:hover { filter: brightness(1.2); }
.topo-save:active { transform: translateY(2px); }
.topo-save:focus-visible { outline: 3px dashed var(--destaque); outline-offset: 4px; }

.dialogo {
  --moldura: var(--destaque);
  width: min(520px, calc(100vw - 32px));
  padding: 20px;
  color: var(--texto);
  background: var(--painel);
  border: 0;
  box-shadow:
    0 -4px 0 0 var(--moldura), 0 4px 0 0 var(--moldura), -4px 0 0 0 var(--moldura), 4px 0 0 0 var(--moldura),
    inset 4px 4px 0 0 var(--luz), inset -4px -4px 0 0 var(--sombra);
}
.dialogo::backdrop { background: rgba(11, 7, 16, 0.75); }
.dialogo h2 { display: inline-flex; align-items: center; gap: 10px; }
.dialogo h3 { font-family: var(--fonte-titulo); font-size: 11px; color: var(--destaque); margin: 16px 0 6px; }
.conta { padding-bottom: 12px; border-bottom: 3px solid var(--contorno); }
.conta p { margin: 0 0 8px; }
.conta input { width: 190px; }

/* ---------- Loja ---------- */
.loja { display: flex; flex-direction: column; gap: 14px; }
.loja .mensagem, .loja > p { margin: 0; }
.grade-pacotes { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 18px; }
.pacote {
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px; margin: var(--px);
  background: linear-gradient(160deg, #3b2c1c 0 30%, var(--painel) 30%);
}
.pacote .icone-pacote { align-self: center; margin: 4px 0 2px; }
.pacote p { margin: 0; }
.pacote-nome { font-family: var(--fonte-titulo); font-size: 11px; color: var(--destaque); line-height: 1.6; text-shadow: 2px 2px 0 var(--contorno); }
.preco { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; white-space: nowrap; color: var(--destaque); }
.abertura { --moldura: var(--destaque); }
.revelada { animation: revelar 0.45s steps(4) both; }
.revelada.raridade-raro, .revelada.raridade-unico { --bisel-claro: color-mix(in srgb, var(--cor-raridade) 45%, transparent); }
@keyframes revelar {
  from { opacity: 0; transform: scaleX(0.1); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .revelada { animation: none; } }

.aviso-global { padding: 10px 14px; margin: 0 var(--px) 16px; background: #2a2418; --moldura: var(--destaque-escuro); }
.aviso-global.erro { --moldura: var(--erro); color: #ffc2bd; background: #2e1719; }
.aviso-global.ok { --moldura: var(--ok); background: #1f2c1c; }

@media (max-width: 860px) {
  body { font-size: 16px; }
  h1 { font-size: 15px; }
  .topo { gap: 12px; padding: 8px 12px; flex-wrap: wrap; }
  .topo-titulo { font-size: 11px; }
  .topo-item { font-size: 9px; }
  .arena-colunas, .combate-corpo, .inv-colunas, .preparo-colunas, .passivas-colunas, .guilda-cabecalho { grid-template-columns: minmax(0, 1fr); }
  .guilda-cabecalho .brasao { justify-self: center; }
  .combate-campo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "inimigos" "heroi" "resultado"; min-height: 0; }
  .detalhe-no, .previa { position: static; }
  .slots-masmorra { grid-template-columns: minmax(0, 1fr); }
  .combate-lateral { max-height: 40vh; }
  .combatente { width: min(100%, 210px); }
  .combatente-heroi { width: min(100%, 290px); }
  /* inimigos em duas colunas; sprites em escala inteira menor (16px × 3, chefe × 4) */
  .combate-inimigos { gap: 10px; }
  .combatente-inimigo { width: calc(50% - 14px); padding: 8px; }
  .combatente-inimigo .comb-nome { font-size: 8px; }
  .combatente-inimigo .sprite-combate { width: 48px; height: 48px; }
  .combatente-chefe .sprite-combate { width: 64px; height: 64px; }
  .combatente-inimigo .comb-sprite { min-height: 50px; }
  .combatente-inimigo .comb-magias { display: none; }
  .topo-item span { display: none; }
  .topo-moedas span { display: inline; }
  .hub-placa { padding: 2px 5px; margin-bottom: 2px; }
  .hub-nome { font-size: 7px; text-shadow: 1px 1px 0 var(--contorno); }
  .hub-avisos .etiqueta { font-size: 10px; padding: 0 4px; }
}

/* ---------- Transmutação (loja) e entregas (guilda) ---------- */
.transmutacao { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.transmutacao h2, .transmutacao p { margin: 0; }
.transmutacao-resumo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--destaque); }
.transmutacao-resultado { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.transmutacao-resultado h3 { margin: 0; color: var(--ok); }
.transmutacao-resultado .carta { width: 240px; }
.carta.selecionada { background: var(--painel-3); outline: 3px solid var(--destaque); outline-offset: 5px; }
.grade-transmutacao, .grade-entrega { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.entrega-titulo { font-size: 15px; color: var(--texto-suave); margin: 12px 0 4px; }

/* ---------- Editor de cartas (admin) ---------- */
.editor-colunas { display: grid; grid-template-columns: 290px minmax(0, 1fr) 280px; gap: 20px; align-items: start; }
.editor-lateral { display: flex; flex-direction: column; gap: 8px; }
.editor-lateral input[type="search"] { width: calc(100% - 6px); }
.editor-cartas-lista { display: flex; flex-direction: column; gap: 4px; max-height: 70vh; overflow-y: auto; padding: 4px 6px 4px 2px; }
.editor-item { display: block; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; color: inherit; font: inherit; }
.editor-item .carta { margin: 5px; }
.editor-item:hover .carta { filter: brightness(1.15); }
.editor-item.selecionado .carta { background: var(--painel-3); outline: 3px solid var(--texto); outline-offset: 5px; }
.editor-form { display: flex; flex-direction: column; gap: 14px; }
.editor-grupo { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.editor-grupo legend { font-family: var(--fonte-titulo); font-size: 11px; color: var(--destaque); margin-bottom: 8px; padding: 0; }
.editor-campo { display: flex; flex-direction: column; gap: 2px; }
.editor-campo input:not([type="checkbox"]), .editor-campo select, .editor-campo textarea { width: calc(100% - 6px); box-sizing: border-box; }
.editor-rotulo { color: var(--texto-suave); font-size: 15px; }
.editor-dica { color: var(--texto-suave); font-size: 13px; margin: 0; }
.editor-linhas { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.editor-linha { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.editor-numero { width: 96px; }
.editor-flag-nome { min-width: 180px; }
.editor-checks { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.editor-checks .editor-rotulo, .editor-checks .editor-dica { flex-basis: 100%; }
.editor-efeito { padding: 8px 10px; background: var(--painel-2); display: flex; flex-direction: column; gap: 6px; }
.editor-previa { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 10px; }
.editor-previa h2 { margin: 0; }
.editor-erros { margin: 0; padding-left: 20px; color: var(--erro); font-size: 14px; }
.editor-erros:empty { display: none; }
.admin-cartas .mensagem, .admin-conteudo .mensagem { margin: 0; }
.editor-colunas-json { grid-template-columns: 290px minmax(0, 1fr); }
.editor-lateral select { width: calc(100% - 6px); }
.editor-item-linha {
  display: flex; flex-direction: column; gap: 0; padding: 5px 8px; margin: 2px;
  border: 0; background: var(--painel-2); color: var(--texto); font: inherit; text-align: left; cursor: pointer;
}
.editor-item-linha:hover { filter: brightness(1.2); }
.editor-item-linha.selecionado { background: var(--painel-3); box-shadow: inset 4px 0 0 var(--destaque); }
.editor-item-linha .texto-suave { font-size: 13px; }
.editor-json { width: calc(100% - 6px); box-sizing: border-box; font-family: ui-monospace, 'Courier New', monospace; font-size: 14px; line-height: 1.35; white-space: pre; }
.banco-estado { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0 0 12px; }
.banco-estado dt { color: var(--texto-suave); }
.banco-estado dd { margin: 0; }
textarea {
  font-family: var(--fonte); font-size: 16px; color: var(--texto);
  background: var(--fundo-2); border: 0; border-radius: 0; padding: 6px 10px; margin: 3px; resize: vertical;
  box-shadow: 0 0 0 3px var(--contorno), inset 3px 3px 0 0 rgba(0, 0, 0, 0.5);
}
textarea:focus-visible { outline: 3px dashed var(--destaque); outline-offset: 6px; }
@media (max-width: 1100px) {
  .editor-colunas { grid-template-columns: 260px minmax(0, 1fr); }
  .editor-previa { grid-column: 1 / -1; position: static; }
}
@media (max-width: 860px) {
  .editor-colunas { grid-template-columns: minmax(0, 1fr); }
  .editor-cartas-lista { max-height: 40vh; }
}

/* ---------- Página de testes ---------- */
.pagina-testes { max-width: 900px; margin: 0 auto; padding: 16px; }
.pagina-testes h2 { margin: 22px 0 8px; }
.pagina-testes ul { list-style: none; margin: 0; padding: 0; }
.pagina-testes li { padding: 2px 0; }
.pagina-testes li.ok { color: var(--ok); }
.pagina-testes li.falha { color: var(--erro); }
.pagina-testes pre { background: #000; padding: 8px; overflow-x: auto; white-space: pre-wrap; color: var(--texto); }
.resumo { font-weight: 700; padding: 8px 12px; box-shadow: 0 0 0 3px var(--contorno); }
.resumo.passou { background: var(--ok-escuro); color: #c9f5bf; }
.resumo.falhou { background: var(--erro-escuro); color: #ffc2bd; }

/* Nível e XP no topo */
.topo-nivel { flex-direction: column; align-items: stretch; gap: 2px; line-height: 1; }
.topo-xp-barra { display: block; height: 4px; min-width: 64px; background: rgba(255, 255, 255, 0.15); }
.topo-xp-valor { display: block; height: 100%; width: 0; background: #7c95ff; }
.topo .topo-nivel span { display: block; }

/* Admin: entrada e contas */
.admin-entrar { max-width: 640px; }
.admin-contas-lista { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.admin-conta { display: grid; gap: 6px; padding: 10px 12px; background: var(--fundo-2); }
.admin-conta-nome { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Loja: ofertas especiais e coleções */
.ofertas-especiais { margin-bottom: 18px; }
.pacote-especial { --moldura: var(--destaque); }
.oferta-info { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.oferta-tempo { color: var(--destaque); }
.oferta-cartas { font-size: 14px; }
.tag-colecao { background: #24506b; color: #d6f2ff; }
.admin-pacote { display: grid; gap: 8px; padding: 10px 12px; margin-top: 10px; background: var(--fundo-2); }
.admin-pacote-campos { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.admin-pacote-campos label { display: grid; gap: 2px; }
.admin-pacote-campos input { width: 110px; }
.tag-inimigo { background: #5a2430; color: #ffd9d9; }
.recompensa-carta { color: var(--destaque); }
.linha-variavel { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
.editor-faixa { display: inline-flex; align-items: center; gap: 6px; }
.editor-faixa .editor-numero { width: 84px; }