/* O verso de carta do Love Takes It All, igual na mesa e na página do Founder
   do site (que carrega este arquivo direto do jogo,
   /jogos/love-takes-it-all/verso.css).

   As artes são tiras de 5 expressões da coruja; cada carta mostra um quadro
   (--back-index). A tira Founder tem a placa vazia: o número é texto. O
   tamanho da carta é de quem usa; aqui só o desenho. */

:root {
  --card-back: url("assets/ChatGPT%20Image%2031%20de%20ago.%20de%202026,%2000_34_57.png");
  /* verso do adversário Founder: mesma tira de 5 expressões, com a placa do número vazia */
  --card-back-founder: url("assets/founder%20versos.png");
}

.game-card.back {
  position: relative;
  overflow: hidden;
  aspect-ratio: .665;
  border-radius: calc(11 * var(--u, 1px));
  background-repeat: no-repeat;
  background-image: var(--card-back);
  background-size: 500% 100%;
  background-position: calc(var(--back-index, 0) * 25%) center;
}

/* Founder: o número é texto, escrito na placa vazia da arte. A placa fica a
   74,9% da altura em todos os quadros; o centro horizontal muda um pouco de
   quadro para quadro porque a carta não está centrada no quadro da tira. */
.game-card.back.verso-founder {
  container-type: inline-size;
  background-image: var(--card-back-founder);
}

.game-card.back.verso-founder[data-back="0"] { --plate-x: 54.56%; }
.game-card.back.verso-founder[data-back="1"] { --plate-x: 51.91%; }
.game-card.back.verso-founder[data-back="2"] { --plate-x: 50.18%; }
.game-card.back.verso-founder[data-back="3"] { --plate-x: 48.46%; }
.game-card.back.verso-founder[data-back="4"] { --plate-x: 46.04%; }

.card-founder-num {
  position: absolute;
  left: var(--plate-x, 50%);
  top: 74.9%;
  translate: -50% -50%;
  padding-left: 0.18em; /* compensa o espaçamento que sobra depois do último dígito */
  font-family: var(--font-brand, "Cinzel", Georgia, serif);
  font-weight: 600;
  font-size: max(11px, 9cqw);
  line-height: 1;
  letter-spacing: 0.18em;
  white-space: nowrap;
  color: #e2c48d;
  text-shadow: 0 0 0.4em rgb(226 196 141 / 0.45), 0 1px 1px rgb(0 0 0 / 0.8);
}

/* carta pequena (celular): a fonte já está no piso de 11px, então quem cede
   é o espaçamento, para o número caber entre os losangos da placa */
@container (max-width: 90px) {
  .card-founder-num { letter-spacing: 0; padding-left: 0; }
}