/* ===================================================
   EXPERIMENTO: cartas da mão em leque, estilo Marvel Snap
   Relacoes Internacionais - Duvid Geografia

   Reestiliza as MESMAS classes já geradas pelo JS do jogo
   (.mao-cartas, .carta-recurso, .topo-carta, .tag-categoria,
   .tag-valor, .tag-bloqueio, .icone-carta, .nome-carta,
   .selecionada, .bloqueada) -- nenhuma mudança de HTML/JS
   foi necessária.

   Pra desativar o experimento e voltar ao visual anterior:
   remova a tag <link rel="stylesheet" href="relacoes-internacionais-cards-fan.css">
   do <head> de relacoes-internacionais-teste.html (ou apague
   este arquivo). Nada mais precisa mudar.
   =================================================== */

:root {
  --fan-gold: #fbc02d;
  --fan-gold-shadow: #c49000;
  --fan-forest-dark: #1b5e20;
  --fan-forest: #2e7d32;
}

/* Area que contem o leque: precisa de espaco extra em cima
   pra carta selecionada "subir" sem cortar, e overflow-y
   visivel pra nao truncar a elevacao dentro do scroll horizontal. */
.mao-cartas {
  padding: 66px 36px 10px;
  justify-content: center;
  overflow-y: visible;
}

/* Carta base: formato retrato mais alto, badges fixos no
   topo (posicao absoluta) e sobreposicao por margem negativa. */
.carta-recurso {
  position: relative;
  width: 98px;
  height: 142px;
  padding: 0;
  gap: 0;
  text-align: left;
  align-items: stretch;
  justify-content: flex-start;
  border-radius: 16px;
  border: 2px solid #fff;
  box-shadow:
    0 10px 20px -6px rgba(27, 94, 32, 0.22),
    0 2px 6px rgba(0, 0, 0, 0.1);
  margin-left: -30px;
  transform-origin: bottom center;
  transition:
    transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.22s ease;
}
.carta-recurso:first-child { margin-left: 0; }

/* Leque: a mao do jogo sempre tem 6 cartas (2 copias de cada
   um dos 3 recursos do pais), entao os angulos sao fixos. */
/* Teste: leque sem nenhuma rotacao, so pra ver como fica. */
.mao-cartas .carta-recurso:nth-child(1) { transform: rotate(0deg) translateY(10px); z-index: 1; }
.mao-cartas .carta-recurso:nth-child(2) { transform: rotate(0deg) translateY(3px);  z-index: 2; }
.mao-cartas .carta-recurso:nth-child(3) { transform: rotate(0deg) translateY(0);    z-index: 3; }
.mao-cartas .carta-recurso:nth-child(4) { transform: rotate(0deg) translateY(0);    z-index: 4; }
.mao-cartas .carta-recurso:nth-child(5) { transform: rotate(0deg) translateY(3px);  z-index: 5; }
.mao-cartas .carta-recurso:nth-child(6) { transform: rotate(0deg) translateY(10px); z-index: 6; }
/* Se algum dia a mao tiver mais ou menos de 6 cartas, as extras
   caem aqui com um angulo neutro em vez de ficarem sem estilo. */
.mao-cartas .carta-recurso:nth-child(n+7) { transform: rotate(0deg) translateY(4px); z-index: 7; }

/* Hover (desktop) e selecao (toque/clique, controlado pelo JS
   que já existe) levantam a carta e trazem pra frente. */
.mao-cartas .carta-recurso:hover,
.carta-recurso.selecionada {
  transform: rotate(0deg) translateY(-24px) scale(1.08) !important;
  z-index: 50 !important;
  border-color: #fff;
  box-shadow:
    0 18px 28px -6px rgba(27, 94, 32, 0.35),
    0 0 0 2px var(--fan-gold);
}
.carta-recurso.bloqueada,
.carta-recurso.bloqueada:hover {
  transform: rotate(0deg) translateY(6px) !important;
  z-index: 1 !important;
  opacity: 0.5;
  border-color: #e53935;
  box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.15);
}

/* Badges de categoria (esquerda) e valor (direita), fixos no
   topo da carta por cima da arte. */
.carta-recurso .topo-carta {
  position: absolute;
  top: 6px;
  left: 6px;
  right: 6px;
  width: auto;
  z-index: 2;
}
.carta-recurso .tag-categoria {
  font-size: 7px;
  padding: 2px 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.carta-recurso .tag-valor {
  background: var(--fan-gold);
  color: #1c1b1b;
  font-weight: 900;
  box-shadow: 0 2px 4px var(--fan-gold-shadow);
}
.carta-recurso .tag-bloqueio {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

/* "Arte" da carta: ainda e o emoji do recurso (ou recurso.img
   quando Leandro desenhar as artes em pixel art), só que agora
   ocupa a faixa de cima inteira, como artwork de carta de jogo. */
.carta-recurso .icone-carta {
  width: 100%;
  height: 92px;
  margin: 0;
  border-radius: 0;
  background: linear-gradient(160deg, #eef2f5, #dde4e8);
  font-size: 36px;
  flex-shrink: 0;
}

.carta-recurso .nome-carta {
  flex: 1;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 6px 8px;
  font-size: 10px;
  line-height: 1.2;
  white-space: normal;
  overflow: hidden;
}