/* ==========================================================
   cards.css — Estilos do modal de zoom de cartas
   ========================================================== */


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SEÇÃO 1 — OVERLAY (camada invisível sobre a imagem da carta)
   Esse elemento fica por cima da imagem da carta elemental.
   Ele não tem fundo nem borda — é só um "quadro" para
   posicionar os filhos (nome, ícones, descrição) em cima da arte.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.czoom-overlay {
  position: absolute;
  /* fica posicionado em relação ao pai (a carta) */
  top: 0;
  /* começa do topo da carta */
  left: 0;
  /* começa da esquerda da carta */
  width: 100%;
  /* ocupa toda a largura da carta */
  height: 100%;
  /* ocupa toda a altura da carta */
  background: none;
  /* sem fundo — a arte da carta aparece atrás */
  border: none;
  /* sem borda */
  border-radius: 20px;
  /* arredonda os cantos igual à carta */
  padding: 0;
  display: block;
  pointer-events: none;
  /* cliques passam direto — não bloqueia interação */
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SEÇÃO 2 — NOME DA CARTA
   O "wrap" é a caixa que delimita onde o nome pode aparecer.
   O "name" é o texto em si.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.czoom-name-wrap {
  position: absolute;
  /* posicionado em relação ao overlay */
  top: 25px;
  /* distância do topo da carta — sobe/desce o nome */
  left: 33px;
  /* distância da esquerda — move o nome para direita */
  right: 85px;
  /* limite direito — impede o nome de sobrepor os ícones */
  overflow: hidden;
  /* corta o texto se for longo demais */
}

.czoom-name {
  font-family: 'LilitaOne', sans-serif;
  /* fonte do nome da carta */
  font-size: 18px;
  /* tamanho do nome — aumente para ficar maior */
  font-weight: 900;
  /* espessura máxima (negrito pesado) */
  color: #674426;
  /* cor do texto */
  text-transform: none;
  /* capitalização normal */
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SEÇÃO 3 — RÓTULO DE TIPO (ex: "ATAQUE", "CURA", "BÔNUS")
   Aparece na parte de baixo da arte, antes da área de descrição.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.czoom-type-wrap {
  position: absolute;
  /* posicionado em relação ao overlay */
  bottom: 107px;
  /* distância do rodapé — sobe/desce o rótulo */
  left: 25px;
  /* distância da esquerda */
}

.czoom-type-label {
  font-size: 11px;
  /* tamanho do texto de tipo */
  font-weight: 700;
  /* negrito */
  color: #674426;
  /* mesma cor do nome da carta */
  font-family: 'LilitaOne', sans-serif;
  text-shadow: none;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SEÇÃO 4 — ÍCONES DE STAT (energia, ataque, escudo, coração)
   Cada ícone é uma imagem PNG posicionada na lateral direita.
   O "stat-val" é a div que centraliza o número em cima do ícone.
   A posição vertical (top) é calculada automaticamente pelo JS.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.czoom-stat {
  position: absolute;
  /* posicionado em relação ao overlay */
  right: 4px;
  /* cola na borda direita da carta */
  width: 64px;
  /* largura do ícone */
  height: 64px;
  /* altura do ícone */
  object-fit: contain;
  /* mantém proporção da imagem */
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
  /* sombra sutil no ícone */
}

/* Caixa invisível que centraliza o número em cima do ícone */
.czoom-stat-val {
  position: absolute;
  /* posicionado em relação ao overlay */
  right: 4px;
  /* mesma posição horizontal do ícone */
  width: 64px;
  /* mesma largura do ícone */
  height: 64px;
  /* mesma altura do ícone */
  display: flex;
  /* usa flexbox para centralizar o número */
  align-items: center;
  /* centraliza verticalmente */
  justify-content: center;
  /* centraliza horizontalmente */
  pointer-events: none;
  /* cliques passam direto */
}

/* Nota: o "top" de cada ícone é definido dinamicamente pelo JS.
   Os estilos do número dentro de cada ícone ficam aqui: */

/* Valor do custo de energia */
.czoom-stat-val--energia {
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  font-family: 'LilitaOne', sans-serif;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 1);
  margin-left: 15px;
}

/* Valor de ataque */
.czoom-stat-val--stat {
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  font-family: 'LilitaOne', sans-serif;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 1);
  margin-left: 8px;
}

/* Valor do escudo */
.czoom-stat-val--escudo {
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  font-family: 'LilitaOne', sans-serif;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 1);
  transform: translateX(13px);
}

/* Valor do coração (vida bonus) — levemente mais acima */
.czoom-stat-val--heart {
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  font-family: 'LilitaOne', sans-serif;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 1);
  margin-top: -8px;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SEÇÃO 5 — ÁREA DE DESCRIÇÃO (rodapé da carta)
   Caixa semi-transparente no rodapé que contém o texto
   de descrição da habilidade e os badges de efeito.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.czoom-desc {
  position: absolute;
  /* posicionado em relação ao overlay */
  bottom: 30px;
  /* distância do rodapé — sobe/desce a caixa inteira */
  left: 30px;
  /* margem esquerda */
  right: 30px;
  /* margem direita */
  padding: 8px 14px 12px;
  /* espaço interno: topo, lados, baixo */
  border-radius: 12px 12px 0 12px;
  /* cantos arredondados (exceto inferior-direito) */
  box-sizing: border-box;
  /* padding não aumenta o tamanho total */
  height: 67px;
  /* altura fixa da caixa — aumente se o texto cortar */
}

/* Texto principal da descrição */
.czoom-desc-text {
  font-size: 10px;
  /* tamanho do texto — aumente para ficar maior */
  color: #674426;
  /* cor do texto */
  line-height: 1.4;
  /* espaço entre linhas */
  font-family: 'Nunito', sans-serif;
  /* fonte do texto de descrição */
  font-style: italic;
  font-weight: 600;
  /* variável — ajuste entre 100 e 900 */
  margin-bottom: 4px;
  /* espaço abaixo do texto antes dos badges */
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SEÇÃO 6 — BADGES DE EFEITO (pílulas coloridas)
   Aparecem abaixo da descrição mostrando efeitos extras
   como cura, crítico, vampirismo, defesa e velocidade.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Container dos badges — organiza em linha e quebra se necessário */
.czoom-badges {
  display: flex;
  /* coloca os badges lado a lado */
  flex-wrap: wrap;
  /* quebra para a linha de baixo se não couber */
  gap: 3px;
  /* espaço entre cada badge */
}

/* Estilo base de todos os badges */
.czoom-badge {
  font-size: 9px;
  /* texto pequeno */
  font-weight: 800;
  /* negrito */
  font-family: 'LilitaOne', sans-serif;
  /* mesma fonte do nome da carta */
  background: rgba(0, 0, 0, 0.5);
  /* fundo preto semi-transparente */
  padding: 1px 5px;
  /* espaço interno */
  border-radius: 3px;
  /* cantos levemente arredondados */
}

/* Cor de cada tipo de badge */
.czoom-badge--cura {
  color: #2ecc71;
}

/* verde  — cura */
.czoom-badge--crit {
  color: #f1c40f;
}

/* amarelo — crítico */
.czoom-badge--vamp {
  color: #e67e22;
}

/* laranja — vampirismo */
.czoom-badge--def {
  color: #74b9ff;
}

/* azul   — defesa/escudo */
.czoom-badge--spd {
  color: #a29bfe;
}

/* roxo   — velocidade */


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SEÇÃO 7 — CARTA GENÉRICA (sem arte elemental)
   Usada para cartas que não têm imagem própria.
   O visual inteiro é construído em CSS com gradiente,
   ícone de fundo, cabeçalho, corpo e rodapé de stats.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Container principal da carta genérica */
.czoom-gen-card {
  width: 100%;
  aspect-ratio: 232 / 300;
  /* proporção de carta (largura:altura) */
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.95), 0 0 30px rgba(255, 204, 0, 0.25);
  border: 2.5px solid rgba(255, 204, 0, 0.3);
  padding: 24px;
  box-sizing: border-box;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  position: relative;
  overflow: hidden;
  /* esconde o ícone de fundo que ultrapassa a borda */
}

/* Ícone gigante decorativo no fundo (ex: 💧🔥) — quase invisível */
.czoom-gen-bg-icon {
  position: absolute;
  right: -20px;
  bottom: -20px;
  font-size: 150px;
  /* tamanho do emoji de fundo */
  opacity: 0.1;
  /* muito transparente — só um detalhe visual */
  pointer-events: none;
  user-select: none;
}

/* Cabeçalho: custo de energia + ícone do elemento */
.czoom-gen-header {
  display: flex;
  justify-content: space-between;
  /* custo na esquerda, ícone na direita */
  align-items: center;
  width: 100%;
  border-bottom: 2px solid rgba(255, 255, 255, 0.08);
  /* linha divisória sutil */
  padding-bottom: 12px;
  z-index: 1;
}

/* Pílula de custo de energia no cabeçalho */
.czoom-gen-cost {
  font-size: 13px;
  font-weight: 900;
  background: rgba(0, 0, 0, 0.5);
  padding: 4px 10px;
  border-radius: 8px;
  text-transform: uppercase;
  font-family: monospace;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  color: #ffcc00;
  letter-spacing: 0.5px;
}

/* Ícone do elemento no canto do cabeçalho (emoji) */
.czoom-gen-type-icon {
  font-size: 24px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Corpo central — emoji grande + nome + descrição */
.czoom-gen-body {
  flex: 1;
  /* ocupa o espaço que sobra entre header e footer */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 24px 0;
  z-index: 1;
}

/* Círculo ao redor do emoji principal da carta */
.czoom-gen-emoji-wrap {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  /* formato circular */
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  border: 2px dashed rgba(255, 255, 255, 0.2);
  /* borda tracejada */
  box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* Emoji principal (⚔️ ou 💚) */
.czoom-gen-emoji {
  font-size: 40px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}

/* Nome da carta genérica */
.czoom-gen-title {
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
}

/* Texto de descrição da carta genérica */
.czoom-gen-desc-text {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  font-family: sans-serif;
  line-height: 1.4;
  max-width: 90%;
  margin: 8px 0 0 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Rodapé de stats (dano, cura, crítico, defesa, velocidade) */
.czoom-gen-footer {
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  padding: 12px;
  border-radius: 12px;
  font-family: monospace;
  font-size: 12px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* espaço entre cada linha de stat */
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5);
  z-index: 1;
}

/* Linha individual de stat no rodapé */
.czoom-gen-stat {
  display: flex;
  justify-content: space-between;
  /* nome do stat na esquerda, valor na direita */
  font-weight: bold;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  /* divisória sutil entre stats */
  padding-bottom: 4px;
}

/* Remove a divisória do último stat */
.czoom-gen-stat:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Cores de cada tipo de stat no rodapé */
.czoom-gen-stat--dano {
  color: #ff7675;
}

/* vermelho — dano */
.czoom-gen-stat--cura {
  color: #2ecc71;
}

/* verde    — cura */
.czoom-gen-stat--crit {
  color: #f1c40f;
}

/* amarelo  — crítico */
.czoom-gen-stat--def {
  color: #e67e22;
}

/* laranja  — defesa */
.czoom-gen-stat--spd {
  color: #9b59b6;
}

/* roxo     — velocidade */