/* ==========================================================
   SEÇÕES
   Estilos específicos de cada parte da página, na mesma
   ordem em que aparecem no index.html.
   ========================================================== */

/* ---------- Títulos de seção (padrão) ---------- */
.section__kicker {
  margin-bottom: var(--space-3);
  font-family: var(--font-pixel);
  font-size: var(--pixel-xs);
  color: var(--color-green);
}

.section__title {
  margin-bottom: var(--space-5);
  font-size: var(--pixel-lg);
  color: var(--color-text);
}

.section__intro {
  max-width: 40rem;
  margin-bottom: var(--space-7);
  font-size: var(--text-lg);
  color: var(--color-text-muted);
}

/* ---------- 1. Topo: floresta num dia de sol ---------- */
/* Todo o cenário é feito com gradientes CSS (cada retângulo é um "pixel grande"):
   sem imagens externas e sem nada a liberar na CSP. Camadas, de trás para frente:
   céu, sol e nuvens > colinas e árvores distantes (::before)
   > árvores, arbustos, flores e cogumelos (::after) > caixa de diálogo com o texto. */
.hero {
  position: relative;
  isolation: isolate;               /* mantém o cenário atrás do conteúdo */
  overflow: hidden;
  padding-block: calc(var(--space-8) + var(--space-4)) calc(var(--forest-height) - var(--space-7));
  background-color: var(--sky-mid);
  background-repeat: no-repeat;
  background-image:
    linear-gradient(90deg, transparent 32px, var(--sun-core) 32px 56px, transparent 56px),
    linear-gradient(90deg, transparent 16px, var(--sun) 16px 72px, transparent 72px),
    linear-gradient(90deg, transparent 20px, var(--sun) 20px 68px, transparent 68px),
    linear-gradient(90deg, transparent 24px, var(--sun) 24px 64px, transparent 64px),
    linear-gradient(90deg, transparent 40px, var(--sun) 40px 48px, transparent 48px),
    linear-gradient(90deg, transparent 40px, var(--sun) 40px 48px, transparent 48px),
    linear-gradient(90deg, transparent 0px, var(--sun) 0px 8px, transparent 8px),
    linear-gradient(90deg, transparent 80px, var(--sun) 80px 88px, transparent 88px),
    linear-gradient(90deg, transparent 24px, var(--cloud) 24px 48px, transparent 48px),
    linear-gradient(90deg, transparent 48px, var(--cloud) 48px 64px, transparent 64px),
    linear-gradient(90deg, transparent 8px, var(--cloud) 8px 56px, transparent 56px),
    linear-gradient(90deg, transparent 0px, var(--cloud) 0px 88px, transparent 88px),
    linear-gradient(90deg, transparent 8px, var(--cloud-shade) 8px 80px, transparent 80px),
    linear-gradient(90deg, transparent 16px, var(--cloud) 16px 32px, transparent 32px),
    linear-gradient(90deg, transparent 4px, var(--cloud) 4px 48px, transparent 48px),
    linear-gradient(90deg, transparent 0px, var(--cloud) 0px 60px, transparent 60px),
    linear-gradient(90deg, transparent 4px, var(--cloud-shade) 4px 56px, transparent 56px),
    linear-gradient(90deg, transparent 24px, var(--cloud) 24px 48px, transparent 48px),
    linear-gradient(90deg, transparent 48px, var(--cloud) 48px 64px, transparent 64px),
    linear-gradient(90deg, transparent 8px, var(--cloud) 8px 56px, transparent 56px),
    linear-gradient(90deg, transparent 0px, var(--cloud) 0px 88px, transparent 88px),
    linear-gradient(90deg, transparent 8px, var(--cloud-shade) 8px 80px, transparent 80px),
    linear-gradient(90deg, transparent 16px, var(--cloud) 16px 32px, transparent 32px),
    linear-gradient(90deg, transparent 4px, var(--cloud) 4px 48px, transparent 48px),
    linear-gradient(90deg, transparent 0px, var(--cloud) 0px 60px, transparent 60px),
    linear-gradient(90deg, transparent 4px, var(--cloud-shade) 4px 56px, transparent 56px),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 55%, var(--sky-horizon) 100%);
  background-size:
    88px 24px,
    88px 40px,
    88px 48px,
    88px 56px,
    88px 8px,
    88px 8px,
    88px 8px,
    88px 8px,
    88px 8px,
    88px 8px,
    88px 8px,
    88px 12px,
    88px 4px,
    60px 8px,
    60px 8px,
    60px 8px,
    60px 4px,
    88px 8px,
    88px 8px,
    88px 8px,
    88px 12px,
    88px 4px,
    60px 8px,
    60px 8px,
    60px 8px,
    60px 4px,
    100% 100%;
  background-position:
    left 92% top 32px,
    left 92% top 24px,
    left 92% top 20px,
    left 92% top 16px,
    left 92% top 0px,
    left 92% top 80px,
    left 92% top 40px,
    left 92% top 40px,
    left 3% top 24px,
    left 3% top 32px,
    left 3% top 32px,
    left 3% top 40px,
    left 3% top 52px,
    left 50% top 36px,
    left 50% top 44px,
    left 50% top 52px,
    left 50% top 60px,
    left 95% top 200px,
    left 95% top 208px,
    left 95% top 208px,
    left 95% top 216px,
    left 95% top 228px,
    left 5% top 270px,
    left 5% top 278px,
    left 5% top 286px,
    left 5% top 294px,
    0 0;
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  height: var(--forest-height);
  background-repeat: repeat-x;
  pointer-events: none;
}

/* Colinas e árvores distantes (mais claras, como no ar de um dia limpo) */
.hero::before {
  background-image:
    linear-gradient(90deg, transparent 32px, var(--forest-far) 32px 80px, transparent 80px),
    linear-gradient(90deg, transparent 18px, var(--forest-far) 18px 94px, transparent 94px),
    linear-gradient(90deg, transparent 22px, var(--forest-far) 22px 90px, transparent 90px),
    linear-gradient(90deg, transparent 30px, var(--forest-far) 30px 82px, transparent 82px),
    linear-gradient(90deg, transparent 38px, var(--forest-far) 38px 74px, transparent 74px),
    linear-gradient(90deg, transparent 46px, var(--forest-far) 46px 66px, transparent 66px),
    linear-gradient(90deg, transparent 38px, var(--forest-far) 38px 74px, transparent 74px),
    linear-gradient(90deg, transparent 30px, var(--forest-far) 30px 82px, transparent 82px),
    linear-gradient(90deg, transparent 34px, var(--forest-far) 34px 78px, transparent 78px),
    linear-gradient(90deg, transparent 44px, var(--forest-far) 44px 68px, transparent 68px),
    linear-gradient(var(--forest-far), var(--forest-far)),
    linear-gradient(90deg, transparent 20px, var(--hill) 20px 460px, transparent 460px),
    linear-gradient(90deg, transparent 50px, var(--hill) 50px 430px, transparent 430px),
    linear-gradient(90deg, transparent 90px, var(--hill) 90px 390px, transparent 390px),
    linear-gradient(90deg, transparent 130px, var(--hill) 130px 350px, transparent 350px),
    linear-gradient(90deg, transparent 170px, var(--hill) 170px 310px, transparent 310px),
    linear-gradient(90deg, transparent 210px, var(--hill) 210px 270px, transparent 270px);
  background-size:
    112px 8px,
    112px 20px,
    112px 8px,
    112px 8px,
    112px 8px,
    112px 4px,
    112px 8px,
    112px 12px,
    112px 8px,
    112px 4px,
    100% 56px,
    480px 16px,
    480px 16px,
    480px 16px,
    480px 16px,
    480px 12px,
    480px 8px;
  background-position:
    left 0px bottom 56px,
    left 0px bottom 64px,
    left 0px bottom 84px,
    left 0px bottom 92px,
    left 0px bottom 100px,
    left 0px bottom 108px,
    left 56px bottom 56px,
    left 56px bottom 64px,
    left 56px bottom 76px,
    left 56px bottom 84px,
    left 0 bottom 0px,
    left 120px bottom 48px,
    left 120px bottom 64px,
    left 120px bottom 80px,
    left 120px bottom 96px,
    left 120px bottom 112px,
    left 120px bottom 124px;
}

/* Árvores de copa redonda, arbustos, flores, cogumelos e o chão.
   O chão tem a mesma cor da seção seguinte, então a floresta "continua" nela. */
.hero::after {
  background-image:
    linear-gradient(90deg, transparent 12px, var(--mushroom-spot) 12px 16px, transparent 16px),
    linear-gradient(90deg, transparent 24px, var(--mushroom-spot) 24px 28px, transparent 28px),
    linear-gradient(90deg, transparent 32px, var(--mushroom-spot) 32px 36px, transparent 36px),
    linear-gradient(90deg, transparent 12px, var(--mushroom-cap) 12px 36px, transparent 36px),
    linear-gradient(90deg, transparent 6px, var(--mushroom-cap) 6px 42px, transparent 42px),
    linear-gradient(90deg, transparent 18px, var(--mushroom-stem) 18px 30px, transparent 30px),
    linear-gradient(90deg, transparent 8px, var(--mushroom-spot) 8px 12px, transparent 12px),
    linear-gradient(90deg, transparent 6px, var(--mushroom-cap) 6px 18px, transparent 18px),
    linear-gradient(90deg, transparent 2px, var(--mushroom-cap) 2px 22px, transparent 22px),
    linear-gradient(90deg, transparent 8px, var(--mushroom-stem) 8px 16px, transparent 16px),
    linear-gradient(90deg, transparent 8px, var(--mushroom-spot) 8px 12px, transparent 12px),
    linear-gradient(90deg, transparent 6px, var(--mushroom-cap) 6px 18px, transparent 18px),
    linear-gradient(90deg, transparent 2px, var(--mushroom-cap) 2px 22px, transparent 22px),
    linear-gradient(90deg, transparent 8px, var(--mushroom-stem) 8px 16px, transparent 16px),
    linear-gradient(90deg, transparent 8px, var(--mushroom-spot) 8px 12px, transparent 12px),
    linear-gradient(90deg, transparent 18px, var(--mushroom-spot) 18px 22px, transparent 22px),
    linear-gradient(90deg, transparent 8px, var(--mushroom-cap) 8px 24px, transparent 24px),
    linear-gradient(90deg, transparent 2px, var(--mushroom-cap) 2px 30px, transparent 30px),
    linear-gradient(90deg, transparent 11px, var(--mushroom-stem) 11px 21px, transparent 21px),
    linear-gradient(90deg, transparent 8px, var(--mushroom-spot) 8px 12px, transparent 12px),
    linear-gradient(90deg, transparent 6px, var(--mushroom-cap) 6px 18px, transparent 18px),
    linear-gradient(90deg, transparent 2px, var(--mushroom-cap) 2px 22px, transparent 22px),
    linear-gradient(90deg, transparent 8px, var(--mushroom-stem) 8px 16px, transparent 16px),
    linear-gradient(90deg, transparent 0px, var(--flower-pink) 0px 4px, transparent 4px),
    linear-gradient(90deg, transparent 0px, var(--leaf-shade) 0px 4px, transparent 4px),
    linear-gradient(90deg, transparent 0px, var(--flower-yellow) 0px 4px, transparent 4px),
    linear-gradient(90deg, transparent 0px, var(--leaf-shade) 0px 4px, transparent 4px),
    linear-gradient(90deg, transparent 0px, var(--flower-white) 0px 4px, transparent 4px),
    linear-gradient(90deg, transparent 0px, var(--leaf-shade) 0px 4px, transparent 4px),
    linear-gradient(90deg, transparent 0px, var(--flower-yellow) 0px 4px, transparent 4px),
    linear-gradient(90deg, transparent 0px, var(--leaf-shade) 0px 4px, transparent 4px),
    linear-gradient(90deg, transparent 0px, var(--flower-pink) 0px 4px, transparent 4px),
    linear-gradient(90deg, transparent 0px, var(--leaf-shade) 0px 4px, transparent 4px),
    linear-gradient(90deg, transparent 0px, var(--flower-white) 0px 4px, transparent 4px),
    linear-gradient(90deg, transparent 0px, var(--leaf-shade) 0px 4px, transparent 4px),
    linear-gradient(90deg, transparent 76px, var(--leaf-light) 76px 104px, transparent 104px),
    linear-gradient(90deg, transparent 68px, var(--leaf-light) 68px 112px, transparent 112px),
    linear-gradient(90deg, transparent 64px, var(--leaf-shade) 64px 128px, transparent 128px),
    linear-gradient(90deg, transparent 70px, var(--leaf-shade) 70px 122px, transparent 122px),
    linear-gradient(90deg, transparent 80px, var(--leaf-shade) 80px 112px, transparent 112px),
    linear-gradient(90deg, transparent 48px, var(--leaf-light) 48px 120px, transparent 120px),
    linear-gradient(90deg, transparent 34px, var(--leaf-light) 34px 134px, transparent 134px),
    linear-gradient(90deg, transparent 38px, var(--leaf-light) 38px 130px, transparent 130px),
    linear-gradient(90deg, transparent 44px, var(--leaf-light) 44px 124px, transparent 124px),
    linear-gradient(90deg, transparent 50px, var(--leaf-light) 50px 118px, transparent 118px),
    linear-gradient(90deg, transparent 58px, var(--leaf-light) 58px 110px, transparent 110px),
    linear-gradient(90deg, transparent 68px, var(--leaf-light) 68px 100px, transparent 100px),
    linear-gradient(90deg, transparent 76px, var(--leaf-light) 76px 92px, transparent 92px),
    linear-gradient(90deg, transparent 72px, var(--leaf-shade) 72px 120px, transparent 120px),
    linear-gradient(90deg, transparent 52px, var(--leaf-shade) 52px 140px, transparent 140px),
    linear-gradient(90deg, transparent 36px, var(--leaf-shade) 36px 156px, transparent 156px),
    linear-gradient(90deg, transparent 28px, var(--leaf-shade) 28px 164px, transparent 164px),
    linear-gradient(90deg, transparent 32px, var(--leaf-shade) 32px 160px, transparent 160px),
    linear-gradient(90deg, transparent 38px, var(--leaf-shade) 38px 154px, transparent 154px),
    linear-gradient(90deg, transparent 46px, var(--leaf-shade) 46px 146px, transparent 146px),
    linear-gradient(90deg, transparent 56px, var(--leaf-shade) 56px 136px, transparent 136px),
    linear-gradient(90deg, transparent 68px, var(--leaf-shade) 68px 124px, transparent 124px),
    linear-gradient(90deg, transparent 80px, var(--leaf-shade) 80px 112px, transparent 112px),
    linear-gradient(90deg, transparent 88px, var(--trunk) 88px 104px, transparent 104px),
    linear-gradient(90deg, var(--grass) 4px, transparent 4px 20px, var(--grass) 20px 24px, transparent 24px),
    linear-gradient(var(--grass), var(--grass)),
    linear-gradient(var(--forest-near), var(--forest-near));
  background-size:
    384px 4px,
    384px 4px,
    384px 4px,
    384px 8px,
    384px 12px,
    384px 12px,
    384px 4px,
    384px 4px,
    384px 8px,
    384px 4px,
    384px 4px,
    384px 4px,
    384px 8px,
    384px 4px,
    384px 4px,
    384px 4px,
    384px 4px,
    384px 10px,
    384px 10px,
    384px 4px,
    384px 4px,
    384px 8px,
    384px 4px,
    96px 4px,
    96px 4px,
    96px 4px,
    96px 4px,
    96px 4px,
    96px 4px,
    160px 4px,
    160px 4px,
    160px 4px,
    160px 4px,
    224px 4px,
    224px 4px,
    192px 4px,
    192px 8px,
    192px 12px,
    192px 8px,
    192px 4px,
    192px 12px,
    192px 20px,
    192px 12px,
    192px 8px,
    192px 8px,
    192px 8px,
    192px 8px,
    192px 4px,
    192px 8px,
    192px 8px,
    192px 8px,
    192px 52px,
    192px 8px,
    192px 8px,
    192px 8px,
    192px 8px,
    192px 8px,
    192px 8px,
    192px 24px,
    36px 4px,
    100% 4px,
    100% 12px;
  background-position:
    left 106px bottom 36px,
    left 106px bottom 40px,
    left 106px bottom 32px,
    left 106px bottom 40px,
    left 106px bottom 28px,
    left 106px bottom 16px,
    left 138px bottom 28px,
    left 138px bottom 28px,
    left 138px bottom 20px,
    left 138px bottom 16px,
    left 84px bottom 28px,
    left 84px bottom 28px,
    left 84px bottom 20px,
    left 84px bottom 16px,
    left 236px bottom 30px,
    left 236px bottom 34px,
    left 236px bottom 36px,
    left 236px bottom 26px,
    left 236px bottom 16px,
    left 256px bottom 28px,
    left 256px bottom 28px,
    left 256px bottom 20px,
    left 256px bottom 16px,
    left 14px bottom 20px,
    left 14px bottom 16px,
    left 44px bottom 20px,
    left 44px bottom 16px,
    left 74px bottom 20px,
    left 74px bottom 16px,
    left 30px bottom 20px,
    left 30px bottom 16px,
    left 118px bottom 20px,
    left 118px bottom 16px,
    left 60px bottom 20px,
    left 60px bottom 16px,
    left 96px bottom 32px,
    left 96px bottom 24px,
    left 96px bottom 16px,
    left 96px bottom 28px,
    left 96px bottom 36px,
    left 0px bottom 68px,
    left 0px bottom 80px,
    left 0px bottom 100px,
    left 0px bottom 112px,
    left 0px bottom 120px,
    left 0px bottom 128px,
    left 0px bottom 136px,
    left 0px bottom 144px,
    left 0px bottom 36px,
    left 0px bottom 44px,
    left 0px bottom 52px,
    left 0px bottom 60px,
    left 0px bottom 112px,
    left 0px bottom 120px,
    left 0px bottom 128px,
    left 0px bottom 136px,
    left 0px bottom 144px,
    left 0px bottom 152px,
    left 0px bottom 12px,
    left 6px bottom 16px,
    left 0 bottom 12px,
    left 0 bottom 0px;
}

/* Caixa de diálogo de madeira, como nos RPGs, no centro do cenário */
.hero__text {
  width: 100%;
  max-width: 46rem;
  margin-inline: auto;
  padding: var(--space-6) var(--space-5);
  text-align: center;
  background: var(--color-surface);
  box-shadow:
    inset 0 0 0 var(--px) var(--color-border),
    0 calc(var(--px) * -1) 0 0 var(--panel-edge),
    0 var(--px) 0 0 var(--panel-edge),
    calc(var(--px) * -1) 0 0 0 var(--panel-edge),
    var(--px) 0 0 0 var(--panel-edge),
    0 calc(var(--px) * 3) 0 0 rgb(0 0 0 / 0.25);
}

@media (min-width: 48rem) {
  .hero__text {
    padding: var(--space-7) var(--space-6);
  }
}

.hero__inner {
  display: grid;
  justify-items: center;
}

.hero__title {
  display: grid;
  gap: var(--space-4);
  justify-items: center;
}

/* Logo do jogo (o mesmo do ícone), em imagem */
.hero__logo {
  display: block;
  width: min(100%, 32rem);
  height: auto;
}

.hero__tagline {
  font-size: var(--pixel-md);
  line-height: 1.7;
  color: var(--color-text);
}

.hero__lead {
  max-width: 34rem;
  margin: var(--space-5) auto 0;
  font-size: var(--text-lg);
  color: var(--color-text-muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

/* ---------- 2. História ---------- */
.story {
  background: var(--color-bg-alt);
}

.story__body {
  display: grid;
  gap: var(--space-5);
  font-size: var(--text-lg);
}

/* Frase de destaque como "chamada de missão" de RPG:
   centralizada, entre duas estrelinhas em pixel art. No computador fica numa linha só; no celular, se
   quebrar, as estrelas ficam nas laterais, centralizadas na altura do texto. */
.story__hook {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  color: var(--color-text);
}

@media (min-width: 48rem) {
  .story__hook {
    font-size: 1.125rem;            /* tamanho que cabe numa linha na coluna de texto */
    white-space: nowrap;
  }
}

.story__hook::before,
.story__hook::after {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  /* Losango de 5x5 pixels: linhas com 1, 3, 5, 3 e 1 pixel */
  background-image:
    linear-gradient(var(--color-gold), var(--color-gold)),
    linear-gradient(var(--color-gold), var(--color-gold)),
    linear-gradient(var(--color-gold), var(--color-gold)),
    linear-gradient(var(--color-gold), var(--color-gold)),
    linear-gradient(var(--color-gold), var(--color-gold));
  background-size:
    4px 4px,
    12px 4px,
    20px 4px,
    12px 4px,
    4px 4px;
  background-position:
    8px 0,
    4px 4px,
    0 8px,
    4px 12px,
    8px 16px;
  background-repeat: no-repeat;
}

.story__hook .narrator {
  font-weight: 400;
}

/* ---------- 5. Nos apoie ---------- */
/* A frase de abertura usa a largura toda: numa linha só em telas grandes,
   quebrando normalmente (sem vazar) em telas menores */
.support .section__intro {
  max-width: none;
}

.support-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-5);
}

/* Ícone e título lado a lado, em roxo claro; o texto vem embaixo, ocupando a largura toda.
   O roxo oficial (#5B417A) fica na faixa do topo do cartão. */
.support-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  align-content: start;
  column-gap: var(--space-4);
  row-gap: var(--space-4);
  padding: var(--space-6) var(--space-5);
  background: var(--color-surface);
  border-top: var(--px) solid var(--magic);   /* roxo: é aqui que o visitante interage */
}

.support-card__title {
  font-size: var(--pixel-sm);
  line-height: 1.6;
  color: var(--magic-text);
}

.support-card__text {
  grid-column: 1 / -1;
  color: var(--color-text-muted);
}

.support-card .pixel-icon {
  margin-bottom: 0;
  color: var(--magic-text);
}

.support__actions {
  display: grid;
  gap: var(--space-6);              /* espaço extra para a moldura mágica do botão */
  justify-items: center;
  margin-top: var(--space-7);
  text-align: center;
}

/* Ícones em pixel art feitos só com CSS (40px de altura, apoiados embaixo) */
.pixel-icon {
  display: block;
  height: 40px;
  margin-bottom: var(--space-2);
  color: var(--magic-text);
  background-repeat: no-repeat;
}

/* Curta: coração vazado (só o contorno) */
.pixel-icon--like {
  width: 36px;
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor);
  background-size:
    8px 4px,
    8px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px;
  background-position:
    4px 8px,
    24px 8px,
    0px 12px,
    12px 12px,
    20px 12px,
    32px 12px,
    0px 16px,
    16px 16px,
    32px 16px,
    0px 20px,
    32px 20px,
    4px 24px,
    28px 24px,
    8px 28px,
    24px 28px,
    12px 32px,
    20px 32px,
    16px 36px;
}

/* Instagram em pixel art (grade 12x12, pixel de 2px), na cor do texto do botão */
.pixel-icon--instagram {
  display: inline-block;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-bottom: 0;
  color: inherit;
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor);
  background-size:
    16px 2px,
    16px 2px,
    2px 16px,
    2px 16px,
    2px 2px,
    2px 2px,
    2px 2px,
    2px 2px,
    8px 2px,
    8px 2px,
    2px 8px,
    2px 8px,
    2px 2px;
  background-position:
    4px 0px,
    4px 22px,
    0px 4px,
    22px 4px,
    2px 2px,
    20px 2px,
    2px 20px,
    20px 20px,
    8px 6px,
    8px 16px,
    6px 8px,
    16px 8px,
    18px 4px;
}

.pixel-icon--comment {
  width: 44px;
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor);
  background-size:
    36px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    36px 4px,
    8px 4px,
    4px 4px;
  background-position:
    4px 12px,
    0px 16px,
    40px 16px,
    0px 20px,
    8px 20px,
    20px 20px,
    32px 20px,
    40px 20px,
    0px 24px,
    40px 24px,
    4px 28px,
    8px 32px,
    8px 36px;
}

/* Compartilhe: carta com selo de cera (classe mantida com o nome antigo) */
.pixel-icon--share {
  width: 44px;
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(var(--mushroom-cap), var(--mushroom-cap)),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(var(--mushroom-cap), var(--mushroom-cap)),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(var(--mushroom-cap), var(--mushroom-cap)),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor);
  background-size:
    44px 4px,
    8px 4px,
    8px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    12px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    44px 4px;
  background-position:
    0px 8px,
    0px 12px,
    36px 12px,
    0px 16px,
    8px 16px,
    32px 16px,
    40px 16px,
    0px 20px,
    12px 20px,
    28px 20px,
    40px 20px,
    0px 24px,
    16px 24px,
    20px 24px,
    24px 24px,
    40px 24px,
    0px 28px,
    16px 28px,
    40px 28px,
    0px 32px,
    20px 32px,
    40px 32px,
    0px 36px;
}

/* ---------- 4. Impacto social ---------- */
.impact {
  background: var(--color-bg-alt);
}

/* Missão num livro aberto, adaptado do sprite de livro do próprio jogo:
   capa com sombra, duas páginas com moldura dupla e arabescos nos cantos
   e cantoneiras douradas. Tudo em CSS, sem imagem. */
.book {
  position: relative;
  display: grid;
  gap: var(--space-3);              /* lombada (no celular, as páginas ficam uma embaixo da outra) */
  padding: var(--space-3);
  background: var(--book-cover);
  box-shadow:
    0 0 0 var(--px) var(--book-ink),
    0 calc(var(--px) * 3) 0 0 var(--book-shadow);   /* sombra só embaixo */
}

@media (min-width: 56rem) {
  .book {
    grid-template-columns: 1fr 1fr;
    /* Lombada: risco escuro no meio da capa */
    background:
      linear-gradient(90deg, transparent calc(50% - 2px), var(--book-cover-dark) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)),
      var(--book-cover);
  }
}

/* Cantoneiras douradas embaixo: esquerda, lombada e direita */
.book::after {
  content: "";
  position: absolute;
  inset: calc(var(--px) * -1);
  pointer-events: none;
  background-image:
    linear-gradient(var(--book-gold), var(--book-gold)),
    linear-gradient(var(--book-gold), var(--book-gold)),
    linear-gradient(var(--book-gold), var(--book-gold));
  background-size: 12px 12px;
  background-position: left bottom, right bottom, 50% 100%;
  background-repeat: no-repeat;
}

.book__page {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-8) var(--space-7);
  color: var(--book-ink);
  background: var(--book-page);
  box-shadow: inset 0 calc(var(--px) * -1) 0 var(--book-cover-dark);   /* espessura das folhas */
}

/* Moldura dupla: linha grossa por fora, linha fina por dentro */
.book__page::before {
  content: "";
  position: absolute;
  inset: var(--space-3);
  border: var(--px) solid var(--book-ink);
  box-shadow:
    inset 0 0 0 var(--px) var(--book-page),
    inset 0 0 0 calc(var(--px) + 2px) var(--book-ink);
  pointer-events: none;
}

/* Arabescos nos quatro cantos, dentro da moldura */
.book__page::after {
  content: "";
  position: absolute;
  inset: calc(var(--space-3) + var(--px) * 3);
  pointer-events: none;
  background-repeat: no-repeat;
  /* Mesmo arabesco nos 4 cantos: cada canto mede as distâncias a partir das
     próprias bordas, o que espelha o desenho automaticamente */
  background-image:
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink)),
    linear-gradient(var(--book-ink), var(--book-ink));
  background-size:
    8px 4px,
    8px 4px,
    8px 4px,
    4px 4px,
    8px 4px,
    8px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    8px 4px,
    8px 4px,
    8px 4px,
    4px 4px,
    8px 4px,
    8px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    8px 4px,
    8px 4px,
    8px 4px,
    4px 4px,
    8px 4px,
    8px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    8px 4px,
    8px 4px,
    8px 4px,
    4px 4px,
    8px 4px,
    8px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px;
  background-position:
    left 4px top 0px,
    left 20px top 0px,
    left 36px top 0px,
    left 0px top 4px,
    left 12px top 4px,
    left 28px top 4px,
    left 44px top 4px,
    left 0px top 8px,
    left 8px top 8px,
    left 4px top 12px,
    left 4px top 16px,
    left 0px top 20px,
    left 0px top 24px,
    left 4px top 28px,
    left 4px top 32px,
    left 0px top 36px,
    right 4px top 0px,
    right 20px top 0px,
    right 36px top 0px,
    right 0px top 4px,
    right 12px top 4px,
    right 28px top 4px,
    right 44px top 4px,
    right 0px top 8px,
    right 8px top 8px,
    right 4px top 12px,
    right 4px top 16px,
    right 0px top 20px,
    right 0px top 24px,
    right 4px top 28px,
    right 4px top 32px,
    right 0px top 36px,
    left 4px bottom 0px,
    left 20px bottom 0px,
    left 36px bottom 0px,
    left 0px bottom 4px,
    left 12px bottom 4px,
    left 28px bottom 4px,
    left 44px bottom 4px,
    left 0px bottom 8px,
    left 8px bottom 8px,
    left 4px bottom 12px,
    left 4px bottom 16px,
    left 0px bottom 20px,
    left 0px bottom 24px,
    left 4px bottom 28px,
    left 4px bottom 32px,
    left 0px bottom 36px,
    right 4px bottom 0px,
    right 20px bottom 0px,
    right 36px bottom 0px,
    right 0px bottom 4px,
    right 12px bottom 4px,
    right 28px bottom 4px,
    right 44px bottom 4px,
    right 0px bottom 8px,
    right 8px bottom 8px,
    right 4px bottom 12px,
    right 4px bottom 16px,
    right 0px bottom 20px,
    right 0px bottom 24px,
    right 4px bottom 28px,
    right 4px bottom 32px,
    right 0px bottom 36px;
}

/* Texto do livro na fonte das falas do jogo. Ela não tem negrito de verdade,
   por isso o peso fica normal e os destaques são feitos só com cor. */
.book__page p {
  font-family: var(--font-story);
  font-size: var(--text-lg);
  line-height: 1.7;
}

/* Destaques dentro do livro no roxo oficial (o laranja não fica legível no papel) */
.book__page strong {
  font-weight: 400;
  color: var(--magic);
}

/* Frase final: fecha a segunda página, centralizada */
.book__closing {
  margin-top: auto;
  padding-top: var(--space-5);
  text-align: center;
}

@media (max-width: 47.99rem) {
  .book__page {
    padding: var(--space-8) var(--space-6);
  }

  .book__page p {
    line-height: 2;
  }
}

/* Ícones em pixel art, desenhados só com CSS (cada retângulo é uma linha de pixels).
   Todos têm 40px de altura e ficam apoiados embaixo, para alinhar os títulos. */
.impact__icon {
  display: block;
  height: 40px;
  margin-bottom: var(--space-2);
  color: var(--magic-text);         /* roxo: a nossa magia */
  background-repeat: no-repeat;
}

/* Familiarizar: estante de livros (classe mantida com o nome antigo para não mexer no HTML) */
.impact__icon--book {
  width: 40px;
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(var(--color-gold), var(--color-gold)),
    linear-gradient(var(--color-hero), var(--color-hero)),
    linear-gradient(var(--magic-light), var(--magic-light)),
    linear-gradient(var(--color-gold), var(--color-gold)),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(var(--color-gold), var(--color-gold)),
    linear-gradient(var(--color-hero), var(--color-hero)),
    linear-gradient(var(--magic-light), var(--magic-light)),
    linear-gradient(var(--color-gold), var(--color-gold)),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(var(--color-gold), var(--color-gold)),
    linear-gradient(var(--color-hero), var(--color-hero)),
    linear-gradient(var(--magic-light), var(--magic-light)),
    linear-gradient(var(--color-gold), var(--color-gold)),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(var(--magic-light), var(--magic-light)),
    linear-gradient(var(--color-gold), var(--color-gold)),
    linear-gradient(var(--color-hero), var(--color-hero)),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(var(--magic-light), var(--magic-light)),
    linear-gradient(var(--color-gold), var(--color-gold)),
    linear-gradient(var(--color-hero), var(--color-hero)),
    linear-gradient(var(--magic-light), var(--magic-light)),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(var(--magic-light), var(--magic-light)),
    linear-gradient(var(--color-gold), var(--color-gold)),
    linear-gradient(var(--color-hero), var(--color-hero)),
    linear-gradient(var(--magic-light), var(--magic-light)),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor);
  background-size:
    40px 4px,
    4px 4px,
    4px 4px,
    8px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    8px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    8px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    40px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    8px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    8px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    8px 4px,
    4px 4px,
    4px 4px,
    40px 4px,
    4px 4px,
    4px 4px;
  background-position:
    0px 0px,
    0px 4px,
    4px 4px,
    12px 4px,
    24px 4px,
    32px 4px,
    36px 4px,
    0px 8px,
    4px 8px,
    12px 8px,
    24px 8px,
    32px 8px,
    36px 8px,
    0px 12px,
    4px 12px,
    12px 12px,
    24px 12px,
    32px 12px,
    36px 12px,
    0px 16px,
    0px 20px,
    4px 20px,
    12px 20px,
    20px 20px,
    36px 20px,
    0px 24px,
    4px 24px,
    12px 24px,
    20px 24px,
    32px 24px,
    36px 24px,
    0px 28px,
    4px 28px,
    12px 28px,
    20px 28px,
    32px 28px,
    36px 28px,
    0px 32px,
    0px 36px,
    36px 36px;
}

/* Criar: orbe mágico sobre um suporte (classe mantida com o nome antigo) */
.impact__icon--bulb {
  width: 40px;
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(var(--magic-light), var(--magic-light)),
    linear-gradient(var(--magic), var(--magic)),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(var(--magic-light), var(--magic-light)),
    linear-gradient(var(--magic), var(--magic)),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(var(--magic-light), var(--magic-light)),
    linear-gradient(var(--magic), var(--magic)),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(var(--magic), var(--magic)),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(var(--magic), var(--magic)),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(var(--magic), var(--magic)),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(var(--color-gold), var(--color-gold)),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor);
  background-size:
    16px 4px,
    4px 4px,
    8px 4px,
    8px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    20px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    28px 4px,
    4px 4px,
    4px 4px,
    32px 4px,
    4px 4px,
    4px 4px,
    32px 4px,
    4px 4px,
    4px 4px,
    24px 4px,
    4px 4px,
    24px 4px,
    4px 4px,
    24px 4px,
    4px 4px,
    40px 4px;
  background-position:
    12px 0px,
    8px 4px,
    12px 4px,
    20px 4px,
    28px 4px,
    4px 8px,
    8px 8px,
    12px 8px,
    32px 8px,
    0px 12px,
    4px 12px,
    8px 12px,
    36px 12px,
    0px 16px,
    4px 16px,
    36px 16px,
    0px 20px,
    4px 20px,
    36px 20px,
    4px 24px,
    8px 24px,
    32px 24px,
    8px 28px,
    4px 32px,
    8px 32px,
    32px 32px,
    0px 36px;
}

/* Aprender se divertindo: carinha de teclado ^_^ (classe mantida com o nome antigo) */
.impact__icon--heart {
  width: auto;
  display: flex;
  align-items: flex-end;
  font-family: var(--font-pixel);
  font-size: 1.75rem;
  line-height: 1;
}

.impact__icon--heart::before {
  content: "^_^";
}

/* ---------- 3. Personagens ---------- */
.group-title {
  margin: var(--space-7) 0 var(--space-5);
  font-size: var(--pixel-md);
  color: var(--color-hero);
}

.group-title:first-of-type {
  margin-top: 0;
}

.group-title--danger {
  color: var(--magic-text);
}

/* ---------- 6. Squad Dev ---------- */
/* Fundo alternado: com o trailer fora, mantém o ritmo claro/escuro entre as seções */
.squad {
  background: var(--color-bg-alt);
}

.dev-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-5);
}

/* Visual de "ficha de personagem" */
.dev-card {
  display: grid;
  gap: var(--space-2);
  justify-items: center;
  padding: var(--space-6) var(--space-5);
  background: var(--color-surface);
  text-align: center;
  box-shadow:
    0 calc(var(--px) * -1) 0 0 var(--color-hero-frame),
    0 var(--px) 0 0 var(--color-hero-frame),
    calc(var(--px) * -1) 0 0 0 var(--color-hero-frame),
    var(--px) 0 0 0 var(--color-hero-frame);
}

.dev-card__name {
  margin-top: var(--space-4);
  font-size: var(--pixel-sm);
}

.dev-card__role {
  color: var(--color-green);
  font-size: var(--text-sm);
}

.dev-card__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-2);
  font-size: var(--text-sm);
}

.dev-card__links a {
  display: inline-block;
  padding-block: var(--space-2);   /* área de toque maior */
}

/* ---------- Decoração das bordas: vinhas e cogumelos ---------- */
/* Vinhas penduradas no canto de cima e cogumelos no canto de baixo, do mesmo lado,
   alternando esquerda e direita a cada seção (assim nunca se empilham na emenda). Ficam dentro do espaçamento das seções,
   atrás do conteúdo, e não pegam cliques. */
.story, .impact, .squad, .characters, .support {
  position: relative;
  isolation: isolate;
}

.story::before, .impact::before, .squad::before, .characters::before, .support::before,
.story::after, .impact::after, .characters::after, .support::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: -1;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* Vinhas: no celular só as curtas, para não encostar no texto */
.story::before, .impact::before, .squad::before, .characters::before, .support::before {
  top: 0;
  height: 4.5rem;
}

.story::before, .impact::before, .squad::before {
  background-image:
    linear-gradient(var(--vine), var(--vine)),
    linear-gradient(var(--vine), var(--vine)),
    linear-gradient(var(--vine), var(--vine)),
    linear-gradient(var(--leaf-light), var(--leaf-light)),
    linear-gradient(var(--leaf-light), var(--leaf-light)),
    linear-gradient(var(--leaf-shade), var(--leaf-shade)),
    linear-gradient(var(--leaf-light), var(--leaf-light)),
    linear-gradient(var(--leaf-light), var(--leaf-light)),
    linear-gradient(var(--leaf-shade), var(--leaf-shade)),
    linear-gradient(var(--flower-white), var(--flower-white)),
    linear-gradient(var(--flower-white), var(--flower-white));
  background-size:
    4px 20px,
    4px 20px,
    4px 16px,
    8px 4px,
    4px 4px,
    4px 4px,
    8px 4px,
    4px 4px,
    4px 4px,
    8px 4px,
    4px 4px;
  background-position:
    left 16px top 0px,
    left 20px top 20px,
    left 16px top 40px,
    left 20px top 14px,
    left 24px top 10px,
    left 20px top 18px,
    left 12px top 34px,
    left 12px top 30px,
    left 16px top 38px,
    left 14px top 56px,
    left 16px top 60px;
}

.characters::before, .support::before {
  background-image:
    linear-gradient(var(--vine), var(--vine)),
    linear-gradient(var(--vine), var(--vine)),
    linear-gradient(var(--vine), var(--vine)),
    linear-gradient(var(--leaf-light), var(--leaf-light)),
    linear-gradient(var(--leaf-light), var(--leaf-light)),
    linear-gradient(var(--leaf-shade), var(--leaf-shade)),
    linear-gradient(var(--leaf-light), var(--leaf-light)),
    linear-gradient(var(--leaf-light), var(--leaf-light)),
    linear-gradient(var(--leaf-shade), var(--leaf-shade)),
    linear-gradient(var(--flower-white), var(--flower-white)),
    linear-gradient(var(--flower-white), var(--flower-white));
  background-size:
    4px 20px,
    4px 20px,
    4px 16px,
    8px 4px,
    4px 4px,
    4px 4px,
    8px 4px,
    4px 4px,
    4px 4px,
    8px 4px,
    4px 4px;
  background-position:
    right 16px top 0px,
    right 12px top 20px,
    right 16px top 40px,
    right 8px top 14px,
    right 8px top 10px,
    right 12px top 18px,
    right 16px top 34px,
    right 20px top 30px,
    right 16px top 38px,
    right 14px top 56px,
    right 16px top 60px;
}

@media (min-width: 48rem) {
  .story::before, .impact::before, .squad::before, .characters::before, .support::before {
    height: 12rem;
  }

.story::before, .impact::before, .squad::before {
    background-image:
      linear-gradient(var(--vine), var(--vine)),
      linear-gradient(var(--vine), var(--vine)),
      linear-gradient(var(--vine), var(--vine)),
      linear-gradient(var(--vine), var(--vine)),
      linear-gradient(var(--vine), var(--vine)),
      linear-gradient(var(--vine), var(--vine)),
      linear-gradient(var(--vine), var(--vine)),
      linear-gradient(var(--leaf-light), var(--leaf-light)),
      linear-gradient(var(--leaf-light), var(--leaf-light)),
      linear-gradient(var(--leaf-shade), var(--leaf-shade)),
      linear-gradient(var(--leaf-light), var(--leaf-light)),
      linear-gradient(var(--leaf-light), var(--leaf-light)),
      linear-gradient(var(--leaf-shade), var(--leaf-shade)),
      linear-gradient(var(--leaf-light), var(--leaf-light)),
      linear-gradient(var(--leaf-light), var(--leaf-light)),
      linear-gradient(var(--leaf-shade), var(--leaf-shade)),
      linear-gradient(var(--leaf-light), var(--leaf-light)),
      linear-gradient(var(--leaf-light), var(--leaf-light)),
      linear-gradient(var(--leaf-shade), var(--leaf-shade)),
      linear-gradient(var(--leaf-light), var(--leaf-light)),
      linear-gradient(var(--leaf-light), var(--leaf-light)),
      linear-gradient(var(--leaf-shade), var(--leaf-shade)),
      linear-gradient(var(--leaf-light), var(--leaf-light)),
      linear-gradient(var(--leaf-light), var(--leaf-light)),
      linear-gradient(var(--leaf-shade), var(--leaf-shade)),
      linear-gradient(var(--flower-pink), var(--flower-pink)),
      linear-gradient(var(--flower-pink), var(--flower-pink)),
      linear-gradient(var(--vine), var(--vine)),
      linear-gradient(var(--vine), var(--vine)),
      linear-gradient(var(--vine), var(--vine)),
      linear-gradient(var(--leaf-light), var(--leaf-light)),
      linear-gradient(var(--leaf-light), var(--leaf-light)),
      linear-gradient(var(--leaf-shade), var(--leaf-shade)),
      linear-gradient(var(--leaf-light), var(--leaf-light)),
      linear-gradient(var(--leaf-light), var(--leaf-light)),
      linear-gradient(var(--leaf-shade), var(--leaf-shade)),
      linear-gradient(var(--flower-white), var(--flower-white)),
      linear-gradient(var(--flower-white), var(--flower-white));
    background-size:
      4px 28px,
      4px 24px,
      4px 28px,
      4px 24px,
      4px 28px,
      4px 20px,
      4px 16px,
      8px 4px,
      4px 4px,
      4px 4px,
      8px 4px,
      4px 4px,
      4px 4px,
      8px 4px,
      4px 4px,
      4px 4px,
      8px 4px,
      4px 4px,
      4px 4px,
      8px 4px,
      4px 4px,
      4px 4px,
      8px 4px,
      4px 4px,
      4px 4px,
      8px 4px,
      4px 4px,
      4px 20px,
      4px 20px,
      4px 16px,
      8px 4px,
      4px 4px,
      4px 4px,
      8px 4px,
      4px 4px,
      4px 4px,
      8px 4px,
      4px 4px;
    background-position:
      left 24px top 0px,
      left 28px top 28px,
      left 24px top 52px,
      left 20px top 80px,
      left 24px top 104px,
      left 28px top 132px,
      left 24px top 152px,
      left 28px top 20px,
      left 32px top 16px,
      left 28px top 24px,
      left 20px top 44px,
      left 20px top 40px,
      left 24px top 48px,
      left 28px top 72px,
      left 32px top 68px,
      left 28px top 76px,
      left 12px top 96px,
      left 12px top 92px,
      left 16px top 100px,
      left 28px top 124px,
      left 32px top 120px,
      left 28px top 128px,
      left 20px top 148px,
      left 20px top 144px,
      left 24px top 152px,
      left 22px top 168px,
      left 24px top 172px,
      left 56px top 0px,
      left 60px top 20px,
      left 56px top 40px,
      left 60px top 14px,
      left 64px top 10px,
      left 60px top 18px,
      left 52px top 34px,
      left 52px top 30px,
      left 56px top 38px,
      left 54px top 56px,
      left 56px top 60px;
  }

.characters::before, .support::before {
    background-image:
      linear-gradient(var(--vine), var(--vine)),
      linear-gradient(var(--vine), var(--vine)),
      linear-gradient(var(--vine), var(--vine)),
      linear-gradient(var(--vine), var(--vine)),
      linear-gradient(var(--vine), var(--vine)),
      linear-gradient(var(--vine), var(--vine)),
      linear-gradient(var(--vine), var(--vine)),
      linear-gradient(var(--leaf-light), var(--leaf-light)),
      linear-gradient(var(--leaf-light), var(--leaf-light)),
      linear-gradient(var(--leaf-shade), var(--leaf-shade)),
      linear-gradient(var(--leaf-light), var(--leaf-light)),
      linear-gradient(var(--leaf-light), var(--leaf-light)),
      linear-gradient(var(--leaf-shade), var(--leaf-shade)),
      linear-gradient(var(--leaf-light), var(--leaf-light)),
      linear-gradient(var(--leaf-light), var(--leaf-light)),
      linear-gradient(var(--leaf-shade), var(--leaf-shade)),
      linear-gradient(var(--leaf-light), var(--leaf-light)),
      linear-gradient(var(--leaf-light), var(--leaf-light)),
      linear-gradient(var(--leaf-shade), var(--leaf-shade)),
      linear-gradient(var(--leaf-light), var(--leaf-light)),
      linear-gradient(var(--leaf-light), var(--leaf-light)),
      linear-gradient(var(--leaf-shade), var(--leaf-shade)),
      linear-gradient(var(--leaf-light), var(--leaf-light)),
      linear-gradient(var(--leaf-light), var(--leaf-light)),
      linear-gradient(var(--leaf-shade), var(--leaf-shade)),
      linear-gradient(var(--flower-pink), var(--flower-pink)),
      linear-gradient(var(--flower-pink), var(--flower-pink)),
      linear-gradient(var(--vine), var(--vine)),
      linear-gradient(var(--vine), var(--vine)),
      linear-gradient(var(--vine), var(--vine)),
      linear-gradient(var(--leaf-light), var(--leaf-light)),
      linear-gradient(var(--leaf-light), var(--leaf-light)),
      linear-gradient(var(--leaf-shade), var(--leaf-shade)),
      linear-gradient(var(--leaf-light), var(--leaf-light)),
      linear-gradient(var(--leaf-light), var(--leaf-light)),
      linear-gradient(var(--leaf-shade), var(--leaf-shade)),
      linear-gradient(var(--flower-white), var(--flower-white)),
      linear-gradient(var(--flower-white), var(--flower-white));
    background-size:
      4px 28px,
      4px 24px,
      4px 28px,
      4px 24px,
      4px 28px,
      4px 20px,
      4px 16px,
      8px 4px,
      4px 4px,
      4px 4px,
      8px 4px,
      4px 4px,
      4px 4px,
      8px 4px,
      4px 4px,
      4px 4px,
      8px 4px,
      4px 4px,
      4px 4px,
      8px 4px,
      4px 4px,
      4px 4px,
      8px 4px,
      4px 4px,
      4px 4px,
      8px 4px,
      4px 4px,
      4px 20px,
      4px 20px,
      4px 16px,
      8px 4px,
      4px 4px,
      4px 4px,
      8px 4px,
      4px 4px,
      4px 4px,
      8px 4px,
      4px 4px;
    background-position:
      right 24px top 0px,
      right 20px top 28px,
      right 24px top 52px,
      right 28px top 80px,
      right 24px top 104px,
      right 20px top 132px,
      right 24px top 152px,
      right 16px top 20px,
      right 16px top 16px,
      right 20px top 24px,
      right 24px top 44px,
      right 28px top 40px,
      right 24px top 48px,
      right 16px top 72px,
      right 16px top 68px,
      right 20px top 76px,
      right 32px top 96px,
      right 36px top 92px,
      right 32px top 100px,
      right 16px top 124px,
      right 16px top 120px,
      right 20px top 128px,
      right 24px top 148px,
      right 28px top 144px,
      right 24px top 152px,
      right 22px top 168px,
      right 24px top 172px,
      right 56px top 0px,
      right 52px top 20px,
      right 56px top 40px,
      right 48px top 14px,
      right 48px top 10px,
      right 52px top 18px,
      right 56px top 34px,
      right 60px top 30px,
      right 56px top 38px,
      right 54px top 56px,
      right 56px top 60px;
  }
}

/* Cogumelos no canto de baixo */
.story::after, .impact::after, .characters::after, .support::after {
  bottom: 0;
  height: 3rem;
}

.story::after, .impact::after {
  background-image:
    linear-gradient(var(--mushroom-spot), var(--mushroom-spot)),
    linear-gradient(var(--mushroom-spot), var(--mushroom-spot)),
    linear-gradient(var(--mushroom-spot), var(--mushroom-spot)),
    linear-gradient(var(--mushroom-cap), var(--mushroom-cap)),
    linear-gradient(var(--mushroom-cap), var(--mushroom-cap)),
    linear-gradient(var(--mushroom-stem), var(--mushroom-stem)),
    linear-gradient(var(--mushroom-spot), var(--mushroom-spot)),
    linear-gradient(var(--mushroom-cap), var(--mushroom-cap)),
    linear-gradient(var(--mushroom-cap), var(--mushroom-cap)),
    linear-gradient(var(--mushroom-stem), var(--mushroom-stem)),
    linear-gradient(var(--grass), var(--grass)),
    linear-gradient(var(--grass), var(--grass)),
    linear-gradient(var(--grass), var(--grass)),
    linear-gradient(var(--grass), var(--grass)),
    linear-gradient(var(--grass), var(--grass));
  background-size:
    4px 4px,
    4px 4px,
    4px 4px,
    24px 8px,
    36px 12px,
    12px 12px,
    4px 4px,
    12px 4px,
    20px 8px,
    8px 4px,
    4px 8px,
    4px 4px,
    4px 8px,
    4px 4px,
    4px 6px;
  background-position:
    left 28px bottom 20px,
    left 40px bottom 24px,
    left 48px bottom 16px,
    left 26px bottom 24px,
    left 20px bottom 12px,
    left 32px bottom 0px,
    left 62px bottom 12px,
    left 60px bottom 12px,
    left 56px bottom 4px,
    left 62px bottom 0px,
    left 16px bottom 0px,
    left 20px bottom 0px,
    left 78px bottom 0px,
    left 82px bottom 0px,
    left 86px bottom 0px;
}

.characters::after, .support::after {
  background-image:
    linear-gradient(var(--mushroom-spot), var(--mushroom-spot)),
    linear-gradient(var(--mushroom-spot), var(--mushroom-spot)),
    linear-gradient(var(--mushroom-spot), var(--mushroom-spot)),
    linear-gradient(var(--mushroom-cap), var(--mushroom-cap)),
    linear-gradient(var(--mushroom-cap), var(--mushroom-cap)),
    linear-gradient(var(--mushroom-stem), var(--mushroom-stem)),
    linear-gradient(var(--mushroom-spot), var(--mushroom-spot)),
    linear-gradient(var(--mushroom-cap), var(--mushroom-cap)),
    linear-gradient(var(--mushroom-cap), var(--mushroom-cap)),
    linear-gradient(var(--mushroom-stem), var(--mushroom-stem)),
    linear-gradient(var(--grass), var(--grass)),
    linear-gradient(var(--grass), var(--grass)),
    linear-gradient(var(--grass), var(--grass)),
    linear-gradient(var(--grass), var(--grass)),
    linear-gradient(var(--grass), var(--grass));
  background-size:
    4px 4px,
    4px 4px,
    4px 4px,
    24px 8px,
    36px 12px,
    12px 12px,
    4px 4px,
    12px 4px,
    20px 8px,
    8px 4px,
    4px 8px,
    4px 4px,
    4px 8px,
    4px 4px,
    4px 6px;
  background-position:
    right 74px bottom 20px,
    right 62px bottom 24px,
    right 54px bottom 16px,
    right 56px bottom 24px,
    right 50px bottom 12px,
    right 62px bottom 0px,
    right 40px bottom 12px,
    right 34px bottom 12px,
    right 30px bottom 4px,
    right 36px bottom 0px,
    right 86px bottom 0px,
    right 82px bottom 0px,
    right 24px bottom 0px,
    right 20px bottom 0px,
    right 16px bottom 0px;
}

/* ---------- fim da decoração das bordas ---------- */

/* ---------- 7. Chão da floresta no fim do Squad Dev ---------- */
/* A página termina no chão da floresta: grama, flores e cogumelos sobre o rodapé */
.squad {
  padding-bottom: calc(var(--space-8) + 2.5rem);
}

@media (min-width: 48rem) {
  .squad {
    padding-bottom: calc(var(--space-9) + 2.5rem);
  }
}

.squad::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2.5rem;
  pointer-events: none;
  background-repeat: repeat-x;
  background-image:
    linear-gradient(90deg, transparent 6px, var(--mushroom-spot) 6px 10px, transparent 10px),
    linear-gradient(90deg, transparent 14px, var(--mushroom-spot) 14px 18px, transparent 18px),
    linear-gradient(90deg, transparent 4px, var(--mushroom-cap) 4px 20px, transparent 20px),
    linear-gradient(90deg, transparent 0px, var(--mushroom-cap) 0px 24px, transparent 24px),
    linear-gradient(90deg, transparent 8px, var(--mushroom-stem) 8px 16px, transparent 16px),
    linear-gradient(90deg, transparent 4px, var(--mushroom-spot) 4px 8px, transparent 8px),
    linear-gradient(90deg, transparent 2px, var(--mushroom-cap) 2px 10px, transparent 10px),
    linear-gradient(90deg, transparent 0px, var(--mushroom-cap) 0px 12px, transparent 12px),
    linear-gradient(90deg, transparent 4px, var(--mushroom-stem) 4px 8px, transparent 8px),
    linear-gradient(90deg, transparent 0px, var(--flower-pink) 0px 4px, transparent 4px),
    linear-gradient(90deg, transparent 0px, var(--leaf-shade) 0px 4px, transparent 4px),
    linear-gradient(90deg, transparent 0px, var(--flower-yellow) 0px 4px, transparent 4px),
    linear-gradient(90deg, transparent 0px, var(--leaf-shade) 0px 4px, transparent 4px),
    linear-gradient(90deg, transparent 0px, var(--flower-white) 0px 4px, transparent 4px),
    linear-gradient(90deg, transparent 0px, var(--leaf-shade) 0px 4px, transparent 4px),
    linear-gradient(90deg, var(--grass) 4px, transparent 4px 20px, var(--grass) 20px 24px, transparent 24px 28px, var(--grass) 28px 32px, transparent 32px),
    linear-gradient(var(--grass), var(--grass));
  background-size:
    300px 4px,
    300px 4px,
    300px 4px,
    300px 8px,
    300px 8px,
    300px 4px,
    300px 4px,
    300px 4px,
    300px 4px,
    300px 4px,
    300px 4px,
    300px 4px,
    300px 4px,
    300px 4px,
    300px 4px,
    56px 4px,
    100% 4px;
  background-position:
    left 52px bottom 16px,
    left 52px bottom 20px,
    left 52px bottom 20px,
    left 52px bottom 12px,
    left 52px bottom 4px,
    left 106px bottom 12px,
    left 106px bottom 12px,
    left 106px bottom 8px,
    left 106px bottom 4px,
    left 170px bottom 8px,
    left 170px bottom 4px,
    left 220px bottom 8px,
    left 220px bottom 4px,
    left 262px bottom 8px,
    left 262px bottom 4px,
    left 0 bottom 4px,
    left 0 bottom 0px;
}
/* ---------- Galeria: prints do jogo ---------- */
.gallery {
  background: var(--color-bg);
}

.gallery__grid {
  display: grid;
  gap: var(--space-6);
  padding: 0;
  list-style: none;
}

@media (min-width: 48rem) {
  .gallery__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.gallery__item {
  display: grid;
  gap: var(--space-3);
}

.gallery__shot {
  display: block;
  width: 100%;
  height: auto;
  border: var(--px) solid var(--shot-frame);
  box-shadow: calc(var(--px) * 2) calc(var(--px) * 2) 0 var(--panel-edge);
  /* pixel art ampliada sem borrar */
  image-rendering: pixelated;
}

.gallery__caption {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  text-align: center;
}

/* Print clicável: lupa no cursor e leve destaque ao passar */
.gallery__link {
  display: block;
  cursor: zoom-in;
}

.gallery__link:hover .gallery__shot,
.gallery__link:focus-visible .gallery__shot {
  border-color: var(--color-gold);
}

/* Print ampliado (dialog nativo: Esc fecha sozinho) */
.lightbox {
  /* o reset de margem do base.css tira a centralização nativa do dialog */
  margin: auto;
  max-width: min(96vw, 1400px);
  max-height: 96vh;
  padding: var(--space-3);
  border: var(--px) solid var(--shot-frame);
  background: var(--color-bg);
}

.lightbox::backdrop {
  background: rgb(0 0 0 / 0.8);
}

.lightbox__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(96vh - 6rem);
  object-fit: contain;
  image-rendering: pixelated;
}

.lightbox__close {
  display: block;
  margin: var(--space-3) auto 0;
}