/*
 * Livros da Bíblia — cartas com arte pixel
 * Versão ajustada para as novas imagens PNG quadradas (1254x1254 ou 512x512).
 *
 * CORREÇÃO PRINCIPAL:
 * a camada .mb-livro agora é quadrada e fica centralizada dentro da carta.
 * Assim, left/top do texto são calculados em relação à própria imagem
 * do livro, e não à carta retangular.
 */

:root {
  --mb-livro-texto: #ffe36a;
  --mb-livro-sombra-1: #6a3217;
  --mb-livro-sombra-2: #20100a;
  --mb-font-pixel: "Press Start 2P", "Courier New", monospace;
}

/*
 * A frente da carta precisa servir de referência para o quadrado do livro.
 */
.card-front {
  position: absolute;
  overflow: hidden;
}

/*
 * QUADRADO DE REFERÊNCIA
 *
 * A arte PNG é 1:1.
 * Em cartas mais altas do que largas, o quadrado ocupa toda a largura
 * e fica verticalmente centralizado.
 */
.mb-livro {
  position: absolute;

  left: 50%;
  top: 50%;

  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;

  max-width: 100%;
  max-height: 100%;

  transform: translate(-50%, -50%);

  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;

  container-type: inline-size;
}

/*
 * A imagem ocupa exatamente o mesmo quadrado usado como referência
 * para posicionar o texto.
 */
.mb-livro__arte {
  position: absolute;
  inset: 0;

  display: block;
  width: 100%;
  height: 100%;

  object-fit: contain;

  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/*
 * POSIÇÃO SOBRE A CAPA
 *
 * Nas novas artes, a área útil da capa fica aproximadamente:
 * centro horizontal: 56%
 * centro vertical:   43,5%
 * inclinação:       -16°
 *
 * Isso coloca o texto mais abaixo do que na versão anterior.
 */
.mb-livro__texto {
  position: absolute;

  left: 56%;
  top: 43.5%;

  width: 61%;
  max-width: 61%;

  transform:
    translate(-50%, -50%)
    rotate(-16deg);

  transform-origin: center center;

  color: var(--mb-livro-texto);
  font-family: var(--mb-font-pixel);
  font-weight: 900;

  line-height: 1.08;
  letter-spacing: -0.055em;
  text-align: center;

  white-space: normal;
  overflow: visible;
  overflow-wrap: normal;
  word-break: normal;

  text-shadow:
    1px 1px 0 var(--mb-livro-sombra-1),
    2px 2px 0 var(--mb-livro-sombra-1),
    3px 3px 0 var(--mb-livro-sombra-2);

  -webkit-text-stroke: 0.2px var(--mb-livro-sombra-2);
}

/*
 * SIGLAS
 * Ficam no mesmo centro óptico do nome.
 */
.mb-livro--sigla .mb-livro__texto {
  left: 56%;
  top: 43.5%;

  width: 46%;
  max-width: 46%;

  font-size: clamp(21px, 18cqi, 56px);
  line-height: 1;
  letter-spacing: -0.07em;

  white-space: nowrap;
}

/*
 * NOMES NORMAIS
 */
.mb-livro--nome .mb-livro__texto {
  left: 56%;
  top: 43.5%;

  width: 62%;
  max-width: 62%;

  font-size: clamp(11px, 8.4cqi, 27px);
}

/*
 * NOMES LONGOS
 */
.mb-livro--nome .mb-livro__texto.mb-livro__texto--longo {
  width: 66%;
  max-width: 66%;

  font-size: clamp(9px, 6.9cqi, 23px);
  letter-spacing: -0.07em;
}

/*
 * NOMES MUITO LONGOS
 */
.mb-livro--nome .mb-livro__texto.mb-livro__texto--muito-longo {
  width: 69%;
  max-width: 69%;

  font-size: clamp(7px, 5.5cqi, 19px);
  line-height: 1.05;
  letter-spacing: -0.075em;
}

/*
 * Cartas menores: sombra mais discreta para melhorar a leitura.
 */
@container (max-width: 130px) {
  .mb-livro__texto {
    text-shadow:
      1px 1px 0 var(--mb-livro-sombra-1),
      2px 2px 0 var(--mb-livro-sombra-2);

    -webkit-text-stroke: 0;
  }

  .mb-livro--nome .mb-livro__texto {
    font-size: clamp(9px, 8.1cqi, 18px);
  }

  .mb-livro--nome .mb-livro__texto.mb-livro__texto--longo {
    font-size: clamp(8px, 6.7cqi, 16px);
  }

  .mb-livro--nome .mb-livro__texto.mb-livro__texto--muito-longo {
    font-size: clamp(7px, 5.3cqi, 14px);
  }
}

/*
 * Mantém o alinhamento em telas pequenas.
 * Não alteramos top/left no celular porque agora a referência
 * é sempre o quadrado da própria imagem.
 */
@media (max-width: 520px) {
  .mb-livro__texto,
  .mb-livro--sigla .mb-livro__texto,
  .mb-livro--nome .mb-livro__texto {
    left: 56%;
    top: 43.5%;
  }
}


/* ============================================================
   CORES / CLASSIFICAÇÕES
   ============================================================ */

.mb-classificacao--pentateuco {
  --mb-classificacao-cor: #1768c7;
}

.mb-classificacao--historico {
  --mb-classificacao-cor: #0a9843;
}

.mb-classificacao--sapiencial {
  --mb-classificacao-cor: #e4a817;
}

.mb-classificacao--profetico {
  --mb-classificacao-cor: #d92e35;
}

.mb-classificacao--evangelho {
  --mb-classificacao-cor: #7c3bc4;
}

.mb-classificacao--atos_dos_apostolos {
  --mb-classificacao-cor: #e86a1b;
}

.mb-classificacao--carta_paulina {
  --mb-classificacao-cor: #55a4de;
}

.mb-classificacao--carta_catolica {
  --mb-classificacao-cor: #22a2a2;
}

.mb-classificacao--apocaliptico {
  --mb-classificacao-cor: #942447;
}