/* =========================================================================
   Kagezan · landing de divulgação
   Mesma paleta do jogo (apps/web/src/styles.css): sumi, pergaminho washi,
   madeira laqueada, laca vermelho-sangue e dourado envelhecido.
   ========================================================================= */
:root {
  --fundo: #121014;
  --fundo-2: #1e1b1f;
  --chumbo: #3a383d;
  --pergaminho: #e6d9b8;
  --pergaminho-escuro: #cdb98e;
  --tinta: #1a1410;
  --tinta-suave: #5a4632;
  --madeira: #4a2c1a;
  --madeira-clara: #6b4128;
  --madeira-escura: #1f130b;
  --sangue: #8e1b1b;
  --sangue-vivo: #c22a2a;
  --sangue-escuro: #5c0f0f;
  --ouro: #b8933f;
  --ouro-claro: #dcbf73;
  --texto-claro: #efe6cf;
  --texto-apagado: #a89f8c;
  --r-comum: #9d9d9d;
  --r-incomum: #3fae4a;
  --r-raro: #3b7ddd;
  --r-epico: #9b4fd6;
  --r-lendario: #f08a24;
  /* Zen Antique: a mesma fonte do jogo, já grossa, sem o contorno de engrossar */
  --contorno: 0px;
  --fonte: 'Zen Antique', serif;
  /* coluna central: o fundo da seção vai de ponta a ponta, o conteúdo fica no meio */
  --coluna: 1120px;
  --margem: max(6vw, calc((100% - var(--coluna)) / 2));
}

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 72px;
}
body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 17px;
  line-height: 1.55;
  color: var(--texto-claro);
  -webkit-text-stroke: var(--contorno) currentColor;
  /* Ondas seigaiha discretas, como no jogo. */
  --onda-a: #121014;
  --onda-b: #19161a;
  background-color: var(--onda-a);
  background-image:
    radial-gradient(
      circle at 100% 150%,
      var(--onda-a) 24%,
      var(--onda-b) 25% 28%,
      var(--onda-a) 29% 36%,
      var(--onda-b) 36% 40%,
      transparent 40%
    ),
    radial-gradient(
      circle at 0 150%,
      var(--onda-a) 24%,
      var(--onda-b) 25% 28%,
      var(--onda-a) 29% 36%,
      var(--onda-b) 36% 40%,
      transparent 40%
    ),
    radial-gradient(
      circle at 50% 100%,
      var(--onda-b) 10%,
      var(--onda-a) 11% 23%,
      var(--onda-b) 24% 30%,
      var(--onda-a) 31% 43%,
      var(--onda-b) 44% 50%,
      var(--onda-a) 51% 63%,
      var(--onda-b) 64% 71%,
      transparent 71%
    ),
    radial-gradient(
      circle at 100% 50%,
      var(--onda-b) 5%,
      var(--onda-a) 6% 15%,
      var(--onda-b) 16% 20%,
      var(--onda-a) 21% 30%,
      var(--onda-b) 31% 35%,
      var(--onda-a) 36% 45%,
      var(--onda-b) 46% 49%,
      transparent 50%
    ),
    radial-gradient(
      circle at 0 50%,
      var(--onda-b) 5%,
      var(--onda-a) 6% 15%,
      var(--onda-b) 16% 20%,
      var(--onda-a) 21% 30%,
      var(--onda-b) 31% 35%,
      var(--onda-a) 36% 45%,
      var(--onda-b) 46% 49%,
      transparent 50%
    );
  background-size: 56px 28px;
  overflow-x: hidden;
}
img {
  max-width: 100%;
}
.pixel,
canvas,
.sprite-inimigo,
.capa-arte,
.alistar-arte {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
h1,
h2,
h3 {
  font-weight: 400;
  margin: 0;
}
a {
  color: inherit;
}
button {
  font: inherit;
  -webkit-text-stroke: inherit;
  color: inherit;
  cursor: pointer;
}
.ouro {
  color: var(--ouro-claro);
}
::selection {
  background: var(--sangue);
  color: var(--ouro-claro);
}

/* ---------- Moldura 9-slice (a mesma do jogo, 2x) ---------- */
.moldura {
  border-style: solid;
  border-width: 34px;
  border-image: url(img/moldura.png) 17 fill / 34px stretch;
  image-rendering: pixelated;
  color: var(--tinta);
}

/* ---------- Botões ---------- */
.botao {
  position: relative;
  display: inline-block;
  padding: 12px 22px;
  font-family: var(--fonte);
  font-size: 18px;
  color: var(--ouro-claro);
  text-align: center;
  text-decoration: none;
  background: linear-gradient(var(--sangue), var(--sangue-escuro));
  border: 3px solid var(--madeira-escura);
  box-shadow:
    inset 0 0 0 2px var(--ouro),
    0 4px 0 var(--madeira-escura);
  transition:
    transform 0.1s,
    filter 0.15s;
}
.botao:hover {
  filter: brightness(1.2);
  transform: translateY(-2px);
}
.botao:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 0 0 2px var(--ouro),
    0 1px 0 var(--madeira-escura);
}
.botao:focus-visible,
button:focus-visible {
  outline: 3px solid var(--ouro-claro);
  outline-offset: 3px;
}
.botao-grande {
  padding: 15px 28px;
  font-size: 20px;
}
.botao-fantasma {
  background: rgba(18, 16, 20, 0.6);
  color: var(--texto-claro);
  box-shadow:
    inset 0 0 0 2px var(--chumbo),
    0 4px 0 var(--madeira-escura);
}
.botao-pequeno {
  padding: 6px 14px;
  font-size: 15px;
}
.botao[aria-disabled='true'] {
  cursor: default;
}
/* brilho que atravessa o botão principal e um halo que pulsa */
.botao-brilho {
  overflow: hidden;
  animation: halo 2.4s ease-in-out infinite;
}
.botao-brilho::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 236, 180, 0.55), transparent);
  transform: skewX(-20deg);
  animation: varrer 3.2s ease-in-out infinite;
}
@keyframes varrer {
  0%,
  55% {
    left: -60%;
  }
  100% {
    left: 130%;
  }
}
@keyframes halo {
  0%,
  100% {
    box-shadow:
      inset 0 0 0 2px var(--ouro),
      0 4px 0 var(--madeira-escura),
      0 0 0 rgba(194, 42, 42, 0);
  }
  50% {
    box-shadow:
      inset 0 0 0 2px var(--ouro-claro),
      0 4px 0 var(--madeira-escura),
      0 0 26px rgba(224, 60, 60, 0.75);
  }
}

/* ---------- Topo ---------- */
.topo {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 12px 24px;
  background: linear-gradient(rgba(12, 10, 16, 0.75), rgba(12, 10, 16, 0));
  border-bottom: 3px solid transparent;
  transition:
    background 0.25s,
    border-color 0.25s,
    padding 0.25s;
}
.topo.rolado {
  padding-block: 8px;
  background: linear-gradient(var(--madeira), var(--madeira-escura));
  border-bottom-color: var(--ouro);
  box-shadow: 0 3px 0 var(--madeira-escura);
}
.marca {
  display: flex;
  align-items: baseline;
  gap: 10px;
  justify-self: start;
  text-decoration: none;
  color: var(--ouro-claro);
}
.marca-kanji {
  color: var(--sangue-vivo);
  -webkit-text-stroke: 1px var(--ouro);
  font-size: 22px;
}
.marca-nome {
  font-size: 22px;
  letter-spacing: 3px;
}
.menu {
  display: flex;
  gap: 4px;
}
.menu a {
  position: relative;
  padding: 6px 12px;
  color: var(--pergaminho);
  text-decoration: none;
  font-size: 15px;
  transition: color 0.15s;
}
.menu a::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 2px;
  background: var(--ouro-claro);
  transform: scaleX(0);
  transition: transform 0.2s;
}
.menu a:hover,
.menu a.ativo {
  color: var(--ouro-claro);
}
.menu a:hover::after,
.menu a.ativo::after {
  transform: scaleX(1);
}
.topo > .botao {
  justify-self: end;
}

/* ---------- Capa ---------- */
.capa {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 110px 0 150px;
  overflow: hidden;
}
.capa-arte {
  position: absolute;
  inset: -3% 0;
  overflow: hidden;
  container-type: size;
  --foco-x: 0.5;
  background: #0d0c18 url(img/capa.png) calc(var(--foco-x) * 100%) center / cover no-repeat;
  translate: 0 calc(var(--rolagem, 0px) * 0.28);
  animation: respirar 30s ease-in-out infinite alternate;
}
@keyframes respirar {
  from {
    scale: 1;
  }
  to {
    scale: 1.06;
  }
}
/* Capa animada: uma caixa do tamanho exato da arte (a mesma conta do "cover") e, dentro
   dela, recortes de 256x256 com 8 quadros lado a lado, cada um no lugar de onde saiu. */
.capa-quadro {
  display: none;
}
@supports (width: 1cqw) {
  .capa-quadro {
    --larg: max(100cqw, calc(100cqh * 688 / 384));
    --alt: calc(var(--larg) * 384 / 688);
    display: block;
    position: absolute;
    width: var(--larg);
    height: var(--alt);
    left: calc((100cqw - var(--larg)) * var(--foco-x));
    top: calc((100cqh - var(--alt)) * 0.5);
  }
}
.capa-anim {
  position: absolute;
  width: calc(256 / 688 * 100%);
  height: calc(256 / 384 * 100%);
  background: 0 0 / 800% 100% no-repeat;
  image-rendering: pixelated;
  animation: capa-quadros 1.2s steps(8) infinite;
}
.capa-anim-lua {
  left: calc(120 / 688 * 100%);
  top: calc(0 / 384 * 100%);
  background-image: url(img/capa-lua_anim.png);
  animation-duration: 3.6s;
}
.capa-anim-vila {
  left: calc(40 / 688 * 100%);
  top: calc(248 / 384 * 100%);
  width: calc(400 / 688 * 100%);
  height: calc(136 / 384 * 100%);
  background-image: url(img/capa-vila_anim.png);
  animation-duration: 1.6s;
}
.capa-anim-ninja {
  left: calc(420 / 688 * 100%);
  top: calc(16 / 384 * 100%);
  background-image: url(img/capa-ninja_anim.png);
  animation-duration: 1.1s;
}
@keyframes capa-quadros {
  to {
    background-position: 114.2857% 0;
  }
}
/* halo da lua (ela fica por volta de 1/3 da arte) */
.capa-lua {
  position: absolute;
  left: 32%;
  top: 26%;
  width: 70vmin;
  height: 70vmin;
  translate: -50% calc(-50% + var(--rolagem, 0px) * 0.28);
  background: radial-gradient(
    circle,
    rgba(200, 215, 255, 0.28),
    rgba(150, 170, 255, 0.1) 40%,
    transparent 68%
  );
  mix-blend-mode: screen;
  animation: luar 6s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes luar {
  from {
    opacity: 0.55;
    scale: 0.95;
  }
  to {
    opacity: 1;
    scale: 1.08;
  }
}
/* névoa baixa que passa devagar */
.capa-nevoa {
  position: absolute;
  inset: auto -50% 0 -50%;
  height: 45%;
  background:
    radial-gradient(ellipse 28% 38% at 20% 78%, rgba(170, 180, 215, 0.2), transparent 70%),
    radial-gradient(ellipse 34% 30% at 55% 88%, rgba(170, 180, 215, 0.16), transparent 70%),
    radial-gradient(ellipse 26% 34% at 84% 74%, rgba(170, 180, 215, 0.18), transparent 70%);
  animation: nevoa 38s linear infinite alternate;
  pointer-events: none;
}
@keyframes nevoa {
  from {
    transform: translateX(-12%);
  }
  to {
    transform: translateX(12%);
  }
}
.capa-sombra {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(12, 10, 16, 0.88) 0%,
      rgba(12, 10, 16, 0.58) 38%,
      rgba(12, 10, 16, 0) 68%
    ),
    linear-gradient(0deg, var(--fundo) 0%, rgba(18, 16, 20, 0.5) 14%, rgba(18, 16, 20, 0) 34%);
}
.capa-dentro {
  position: relative;
  width: 100%;
  padding: 0 var(--margem);
}
.capa-texto {
  max-width: 600px;
}
.capa-texto > * {
  animation: surgir 0.8s both;
}
.capa-texto > :nth-child(2) {
  animation-delay: 0.12s;
}
.capa-texto > :nth-child(3) {
  animation-delay: 0.3s;
}
.capa-texto > :nth-child(4) {
  animation-delay: 0.42s;
}
.capa-texto > :nth-child(5) {
  animation-delay: 0.56s;
}
.capa-texto > :nth-child(6) {
  animation-delay: 0.72s;
}
@keyframes surgir {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}
.selo-dev {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
  padding: 3px 12px;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ouro-claro);
  border: 2px solid var(--ouro);
  background: rgba(92, 15, 15, 0.7);
}
.selo-dev i,
.hud-ponto {
  width: 8px;
  height: 8px;
  background: #ff5a4a;
  box-shadow: 0 0 8px #ff5a4a;
  animation: piscar 1.2s steps(2) infinite;
}
@keyframes piscar {
  50% {
    opacity: 0.25;
  }
}
h1 {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.titulo-kanji {
  font-size: clamp(64px, 10vw, 118px);
  color: var(--sangue-vivo);
  -webkit-text-stroke: 2px var(--ouro);
  text-shadow: 5px 5px 0 var(--madeira-escura);
  animation: brasa 3.6s ease-in-out infinite alternate;
}
@keyframes brasa {
  from {
    filter: drop-shadow(0 0 6px rgba(224, 60, 60, 0.35));
  }
  to {
    filter: drop-shadow(0 0 22px rgba(240, 80, 60, 0.85));
  }
}
.titulo {
  margin-top: 6px;
  font-size: clamp(50px, 8vw, 92px);
  letter-spacing: 8px;
  color: var(--pergaminho);
  -webkit-text-stroke: 1.5px var(--pergaminho);
  text-shadow:
    5px 5px 0 var(--madeira-escura),
    0 0 30px rgba(220, 191, 115, 0.35);
}
.chamada {
  margin: 20px 0 8px;
  font-size: clamp(21px, 2.6vw, 29px);
  color: var(--ouro-claro);
  text-shadow: 2px 2px 0 var(--madeira-escura);
}
.sub {
  margin: 0 0 30px;
  max-width: 500px;
  color: var(--texto-claro);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.7);
}
.acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.numeros {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 0;
  margin: 34px 0 0;
  padding: 0;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--texto-apagado);
}
.numeros li {
  display: flex;
  flex-direction: column;
  padding: 0 22px;
  border-left: 2px solid rgba(184, 147, 63, 0.45);
}
.numeros li:first-child {
  padding-left: 0;
  border-left: 0;
}
.numeros b {
  font-weight: 400;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--ouro-claro);
  -webkit-text-stroke: 0.8px var(--ouro-claro);
  text-shadow: 2px 2px 0 var(--madeira-escura);
}
.rolar {
  position: absolute;
  left: 50%;
  bottom: 118px;
  translate: -50% 0;
  color: var(--ouro-claro);
  text-decoration: none;
  display: none;
}

/* Pétalas de sakura (quadradinhos em pixel) */
.petalas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.petala {
  position: absolute;
  top: -10px;
  width: 6px;
  height: 4px;
  background: #e8a7b8;
  box-shadow: 2px 2px 0 #b86d84;
  animation: cair linear infinite;
}
.petala-grande {
  width: 8px;
  height: 6px;
  background: #f6c1d0;
}
@keyframes cair {
  to {
    transform: translate(var(--vento, -120px), 110vh) rotate(540deg);
  }
}

/* ---------- Palco de combate ---------- */
.faixa-palco {
  position: relative;
  z-index: 2;
  margin: -118px auto 0;
  max-width: 1010px;
  padding: 0 16px;
}
.palco-titulo {
  margin: 0 0 14px;
  text-align: center;
  font-size: clamp(16px, 2.2vw, 21px);
  color: var(--ouro-claro);
  text-shadow: 2px 2px 0 var(--madeira-escura);
}
.palco-titulo span {
  color: var(--sangue-vivo);
  font-size: 0.7em;
  vertical-align: 2px;
}
.palco {
  padding: 0;
  overflow: hidden;
  filter: drop-shadow(0 16px 30px rgba(0, 0, 0, 0.65));
}
.cena {
  position: relative;
  overflow: hidden;
  background: #3c5a2a;
}
.cena canvas {
  display: block;
}
#cena-cacada {
  height: 360px;
}
#cena-cacada::after {
  /* vinheta nas bordas */
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 70px rgba(8, 6, 12, 0.6);
  pointer-events: none;
}
.cena-numeros {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.num {
  position: absolute;
  translate: -50% -50%;
  white-space: nowrap;
  font-size: 21px;
  line-height: 1;
  color: #fff;
  -webkit-text-stroke: 0.8px currentColor;
  text-shadow:
    2px 0 0 var(--tinta),
    -2px 0 0 var(--tinta),
    0 2px 0 var(--tinta),
    0 -2px 0 var(--tinta),
    2px 3px 0 rgba(0, 0, 0, 0.5);
  animation: num-sobe 0.95s steps(14) forwards;
}
.num-fixo {
  animation: none;
}
.num-critico {
  font-size: 32px;
  color: #ffd34d;
  animation-name: num-critico;
}
.num-aviso {
  color: #ffd34d;
}
.num-sofrido {
  font-size: 18px;
  color: #ff6b6b;
}
.num-xp,
.num-jutsu {
  color: var(--ouro-claro);
}
.num-ryo {
  font-size: 18px;
  color: #f4d98a;
}
.num-fogo {
  color: #ff8a30;
}
.num-raio {
  color: #ffe36a;
}
.num-terra {
  color: #d8b07a;
}
.num-agua {
  color: #8fd0ff;
}
.num-cura {
  color: #8fe08a;
}
@keyframes num-sobe {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.6);
  }
  14% {
    opacity: 1;
    transform: translateY(0) scale(1.15);
  }
  28% {
    transform: translateY(-4px) scale(1);
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-34px) scale(1);
  }
}
@keyframes num-critico {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.4);
  }
  14% {
    opacity: 1;
    transform: translateY(0) scale(1.5);
  }
  30% {
    transform: translateY(-4px) scale(1);
  }
  72% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-38px) scale(1);
  }
}
.saque {
  position: absolute;
  width: 48px;
  height: 48px;
  max-width: none;
  translate: -50% -50%;
  filter: drop-shadow(0 0 6px rgba(255, 220, 130, 0.9));
  animation: saque 1.5s ease-out forwards;
}
@keyframes saque {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.3);
  }
  22% {
    opacity: 1;
    transform: translateY(-46px) scale(1.25);
  }
  45% {
    transform: translateY(-30px) scale(1);
  }
  78% {
    opacity: 1;
    transform: translateY(-34px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-70px) scale(0.8);
  }
}
/* faixa "Você upou de nível!", como no jogo */
.cena-faixa {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: 16%;
  padding: 8px 0;
  text-align: center;
  font-size: clamp(18px, 3vw, 28px);
  color: #dff3ff;
  -webkit-text-stroke: 0.8px currentColor;
  text-shadow:
    2px 2px 0 #0b2a45,
    0 0 16px #5bb8ff;
  background: linear-gradient(90deg, transparent, rgba(30, 110, 190, 0.75) 25% 75%, transparent);
  opacity: 0;
  pointer-events: none;
}
.cena-faixa.ativa {
  animation: faixa 1.9s ease-out;
}
@keyframes faixa {
  0% {
    opacity: 0;
    transform: scaleX(0.3);
  }
  14%,
  78% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
  }
}
.palco-xp {
  height: 5px;
  background: #0d0b0f;
  border-top: 2px solid var(--ouro);
}
.palco-xp i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #3b7ddd, #7fd0ff);
  transition: width 0.4s;
}
.palco-log {
  padding: 9px 16px 10px;
  font-size: 15px;
  color: var(--pergaminho);
  background: rgba(18, 16, 20, 0.96);
}
.palco-log p {
  margin: 0;
}
.palco-hud {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 16px;
  font-size: 13px;
  color: var(--texto-apagado);
}
.palco-hud > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.palco-hud b {
  font-weight: 400;
  color: var(--ouro-claro);
}
#log-linha.pisca {
  animation: log 0.5s steps(5);
}
@keyframes log {
  from {
    color: #fff;
    transform: translateX(-6px);
    opacity: 0.3;
  }
}

/* ---------- Letreiro ---------- */
.letreiro {
  margin-top: 84px;
  overflow: hidden;
  background: linear-gradient(var(--sangue), var(--sangue-escuro));
  border-block: 3px solid var(--ouro);
  box-shadow:
    0 3px 0 var(--madeira-escura),
    0 -3px 0 var(--madeira-escura);
}
.letreiro-trilho {
  display: flex;
  width: max-content;
  animation: letreiro 36s linear infinite;
}
.letreiro span {
  padding: 8px 26px;
  font-size: 20px;
  letter-spacing: 4px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--pergaminho);
}
.letreiro span:nth-child(odd) {
  color: var(--ouro-claro);
  letter-spacing: 0;
}
@keyframes letreiro {
  to {
    transform: translateX(-25%);
  }
}

/* ---------- Seções ---------- */
.secao {
  padding: 110px var(--margem);
}
.secao-escura {
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(142, 27, 27, 0.18), transparent 70%),
    linear-gradient(rgba(10, 8, 12, 0.8), rgba(10, 8, 12, 0.94));
  border-block: 3px solid var(--madeira);
}
.secao-cabeca {
  text-align: center;
  margin-bottom: 52px;
}
.secao-kanji {
  position: relative;
  isolation: isolate;
  display: inline-grid;
  place-items: center;
  width: 84px;
  height: 84px;
  margin-bottom: 18px;
  font-size: 40px;
  line-height: 1;
  color: var(--sangue-vivo);
  -webkit-text-stroke: 1.5px var(--ouro);
}
.secao-kanji::before {
  /* losango de madeira atrás do kanji */
  content: '';
  position: absolute;
  inset: 12px;
  z-index: -1;
  rotate: 45deg;
  background: linear-gradient(135deg, var(--madeira), var(--madeira-escura));
  border: 2px solid var(--ouro);
  box-shadow:
    inset 0 0 0 3px var(--madeira-escura),
    0 0 22px rgba(194, 42, 42, 0.45);
}
.secao-cabeca h2,
.alistar h2 {
  font-size: clamp(29px, 4.4vw, 46px);
  line-height: 1.2;
  color: var(--ouro-claro);
  -webkit-text-stroke: 0.8px var(--ouro-claro);
  text-shadow: 3px 3px 0 var(--madeira-escura);
}
.secao-cabeca h2::after {
  /* risco de pincel embaixo do título */
  content: '';
  display: block;
  width: 120px;
  height: 4px;
  margin: 14px auto 0;
  background: linear-gradient(90deg, transparent, var(--sangue-vivo) 20% 80%, transparent);
}
.secao-cabeca p {
  margin: 14px auto 0;
  max-width: 640px;
  color: var(--texto-apagado);
}

/* Cartões em pergaminho */
.cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 44px 32px;
  max-width: 1040px;
  margin: 0 auto;
}
.pergaminho {
  position: relative;
  padding: 44px 26px 30px;
  text-align: center;
  color: var(--tinta);
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.25), transparent 60%),
    var(--pergaminho);
  border-left: 10px solid var(--madeira);
  border-right: 10px solid var(--madeira);
  box-shadow:
    inset 0 0 0 2px var(--pergaminho-escuro),
    0 0 0 3px var(--madeira-escura),
    6px 6px 0 rgba(0, 0, 0, 0.4);
}
.pergaminho:hover .cartao-icone {
  transform: translateY(-6px) scale(1.08);
}
.pergaminho::before,
.pergaminho::after {
  /* Varas de madeira do rolo, em cima e embaixo */
  content: '';
  position: absolute;
  left: -16px;
  right: -16px;
  height: 10px;
  background: linear-gradient(var(--madeira-clara), var(--madeira-escura));
  border: 2px solid var(--madeira-escura);
  box-shadow: inset 0 0 0 1px var(--ouro);
}
.pergaminho::before {
  top: -8px;
}
.pergaminho::after {
  bottom: -8px;
}
.cartao-passo {
  position: absolute;
  z-index: 1;
  top: -26px;
  left: 50%;
  translate: -50% 0;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  font-size: 24px;
  color: var(--ouro-claro);
  background: linear-gradient(var(--sangue-vivo), var(--sangue-escuro));
  border: 3px solid var(--madeira-escura);
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--ouro);
}
.cartao-icone {
  display: block;
  width: 96px;
  height: 96px;
  object-fit: contain;
  margin: 0 auto 10px;
  filter: drop-shadow(3px 4px 0 rgba(0, 0, 0, 0.3));
  transition: transform 0.2s;
}
.pergaminho h3 {
  font-size: 23px;
  color: var(--sangue);
  -webkit-text-stroke: 0.6px var(--sangue);
  margin-bottom: 8px;
}
.pergaminho p {
  margin: 0;
  color: var(--tinta-suave);
}

/* Resumo offline */
.resumo {
  max-width: 560px;
  margin: 72px auto 0;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.5));
}
.resumo-cabeca {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 10px;
  border-bottom: 2px dashed var(--pergaminho-escuro);
}
.resumo-kanji {
  font-size: 40px;
  line-height: 1;
  color: var(--sangue);
}
.resumo-titulo {
  margin: 0;
  font-size: 20px;
  color: var(--tinta);
}
.resumo-tempo {
  margin: 0;
  font-size: 14px;
  color: var(--tinta-suave);
}
.resumo-lista {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}
.resumo-lista li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  color: var(--tinta-suave);
}
.resumo-lista b {
  font-weight: 400;
  color: var(--tinta);
  font-size: 19px;
  display: flex;
  align-items: center;
  gap: 6px;
  text-align: right;
}
.resumo-lista .raro {
  color: var(--r-raro);
}
.resumo-item {
  width: 28px;
  height: 28px;
}
.ryo {
  width: 20px;
  height: 20px;
  image-rendering: auto;
}

/* ---------- Territórios ---------- */
.mapa {
  max-width: 940px;
  margin: 0 auto;
}
.mapa-tela {
  position: relative;
  border: 4px solid var(--madeira-escura);
  box-shadow:
    0 0 0 2px var(--ouro),
    0 0 0 5px var(--madeira-escura),
    0 18px 40px rgba(0, 0, 0, 0.6);
  background: #0b0a10;
}
.mapa-quadro {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.mapa-arte {
  position: absolute;
  inset: 0;
  background: center / cover no-repeat;
  opacity: 0;
  transition: opacity 0.9s;
}
.mapa-arte.ativa {
  opacity: 1;
  animation: passeio 9s ease-out both;
}
@keyframes passeio {
  from {
    scale: 1.12;
  }
  to {
    scale: 1;
  }
}
.mapa-legenda {
  position: absolute;
  inset: auto 0 0 0;
  padding: 90px 28px 22px;
  color: var(--texto-claro);
  background: linear-gradient(0deg, rgba(8, 6, 12, 0.94) 0%, rgba(8, 6, 12, 0.7) 55%, transparent);
  pointer-events: none;
}
.mapa-num {
  margin: 0;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ouro-claro);
}
.mapa-legenda h3 {
  font-size: clamp(26px, 4vw, 40px);
  line-height: 1.15;
  color: var(--pergaminho);
  -webkit-text-stroke: 0.8px var(--pergaminho);
  text-shadow: 3px 3px 0 var(--madeira-escura);
}
.mapa-legenda p:last-child {
  margin: 6px 0 0;
  max-width: 620px;
  font-size: 15px;
  color: var(--texto-claro);
}
.mapa-tempo {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  height: 3px;
  background: rgba(0, 0, 0, 0.5);
}
.mapa-tempo i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--ouro-claro);
}
.mapa-lista {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
}
.mapa-botao {
  position: relative;
  aspect-ratio: 16 / 9;
  padding: 0;
  background: #0b0a10 center / cover no-repeat;
  border: 2px solid var(--chumbo);
  filter: saturate(0.5) brightness(0.65);
  transition:
    filter 0.15s,
    transform 0.15s,
    border-color 0.15s;
}
.mapa-mais {
  display: grid;
  place-content: center;
  justify-items: center;
  font-size: 13px;
  line-height: 1.2;
  color: var(--texto-apagado);
  background: repeating-linear-gradient(45deg, #141218 0 8px, #1b181f 8px 16px);
  border-style: dashed;
  filter: none;
  cursor: default;
}
.mapa-mais span {
  font-size: 22px;
  color: var(--ouro-claro);
}
.mapa-botao:not(.mapa-mais):hover,
.mapa-botao.ativo {
  filter: none;
  transform: translateY(-3px);
  border-color: var(--ouro-claro);
}
.mapa-botao.ativo {
  box-shadow: 0 0 14px rgba(220, 191, 115, 0.6);
}

/* ---------- Jutsus ---------- */
.graus {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 52px;
}
.grau {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 118px;
  padding: 10px 14px;
  background: var(--fundo-2);
  border: 2px solid var(--ouro);
  box-shadow: inset 0 0 0 2px var(--madeira-escura);
  color: var(--pergaminho);
}
.grau span {
  font-size: 28px;
  color: var(--ouro-claro);
}
.grau small {
  color: var(--texto-apagado);
  font-size: 12px;
}
.grau-lenda {
  border-color: var(--r-lendario);
  animation: lenda 2.4s ease-in-out infinite alternate;
}
@keyframes lenda {
  from {
    box-shadow:
      inset 0 0 0 2px var(--madeira-escura),
      0 0 8px rgba(240, 138, 36, 0.3);
  }
  to {
    box-shadow:
      inset 0 0 0 2px var(--madeira-escura),
      0 0 26px rgba(240, 138, 36, 0.8);
  }
}
.grau-lenda span {
  color: var(--r-lendario);
}
.grau-seta {
  color: var(--ouro);
  font-size: 26px;
}
.jutsus-palco {
  display: grid;
  grid-template-columns: minmax(300px, 400px) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  max-width: 1060px;
  margin: 0 auto;
}
.vitrine {
  --cor: #ff8a3c;
  border: 3px solid var(--madeira-escura);
  box-shadow:
    0 0 0 2px var(--cor),
    0 0 34px color-mix(in srgb, var(--cor) 35%, transparent);
  background: var(--fundo-2);
  transition: box-shadow 0.3s;
}
.vitrine-cena {
  height: 300px;
  background:
    radial-gradient(
      ellipse 70% 30% at 50% 82%,
      color-mix(in srgb, var(--cor) 30%, transparent),
      transparent 70%
    ),
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--cor) 22%, #17141a), #0f0d12 75%);
}
.vitrine-cena canvas {
  margin: 0 auto;
}
.vitrine-selo {
  position: absolute;
  left: 50%;
  top: 42%;
  translate: -50% -50%;
  font-size: 150px;
  line-height: 1;
  color: var(--cor);
  opacity: 0;
  pointer-events: none;
}
.vitrine-selo.ativo {
  animation: selo 0.9s ease-out;
}
@keyframes selo {
  0% {
    opacity: 0;
    scale: 0.3;
  }
  25% {
    opacity: 0.55;
    scale: 1;
  }
  100% {
    opacity: 0;
    scale: 1.5;
  }
}
.vitrine-texto {
  min-height: 132px;
  padding: 14px 18px 16px;
  text-align: center;
  border-top: 2px solid var(--cor);
}
.vitrine-texto h3 {
  font-size: 21px;
  color: var(--cor);
  -webkit-text-stroke: 0.6px var(--cor);
}
.vitrine-texto p {
  margin: 6px 0 0;
  font-size: 15px;
  color: var(--pergaminho);
}
.jutsus {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}
.jutsu {
  --cor: var(--ouro);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  font-size: 15px;
  text-align: left;
  color: var(--pergaminho);
  background: var(--fundo-2);
  border: 2px solid var(--chumbo);
  transition:
    border-color 0.15s,
    transform 0.15s,
    background 0.15s;
}
.jutsu:hover {
  border-color: var(--cor);
  transform: translateX(3px);
}
.jutsu.ativo {
  border-color: var(--cor);
  background: color-mix(in srgb, var(--cor) 14%, var(--fundo-2));
  box-shadow: 0 0 16px color-mix(in srgb, var(--cor) 40%, transparent);
}
.jutsu span {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  font-size: 22px;
  color: var(--cor);
  background: var(--madeira-escura);
  border: 2px solid var(--cor);
}

.jutsus-mais {
  grid-column: 1 / -1;
  margin: 6px 0 0;
  font-size: 14px;
  text-align: center;
  color: var(--texto-apagado);
}
.jutsus-mais::before {
  content: '◆ ';
  color: var(--sangue-vivo);
}

/* ---------- Arsenal ---------- */
.itens {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  max-width: 980px;
}
.itens li {
  --cor: var(--r-comum);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px 8px 12px;
  font-size: 14px;
  color: var(--pergaminho);
  background:
    radial-gradient(
      circle at 50% 38%,
      color-mix(in srgb, var(--cor) 22%, transparent),
      transparent 62%
    ),
    var(--fundo-2);
  border: 2px solid var(--cor);
  box-shadow: inset 0 0 0 3px var(--madeira-escura);
  overflow: hidden;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}
.itens li:hover {
  transform: translateY(-6px);
  box-shadow:
    inset 0 0 0 3px var(--madeira-escura),
    0 0 22px color-mix(in srgb, var(--cor) 60%, transparent);
}
.itens img {
  width: 96px;
  height: 96px;
  margin-bottom: 8px;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.45));
  transition: transform 0.2s;
}
.itens li:hover img {
  transform: scale(1.12) rotate(-4deg);
}
.itens small {
  color: var(--cor);
  font-size: 12px;
  margin-top: 2px;
}
.itens .r-lendario,
.itens .r-epico {
  box-shadow:
    inset 0 0 0 3px var(--madeira-escura),
    0 0 14px color-mix(in srgb, var(--cor) 40%, transparent);
}
.itens .r-lendario::after {
  /* brilho que passa pelos lendários */
  content: '';
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -70%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 220, 150, 0.4), transparent);
  transform: skewX(-20deg);
  animation: varrer 3.6s ease-in-out infinite;
}
.r-incomum {
  --cor: var(--r-incomum) !important;
}
.r-raro {
  --cor: var(--r-raro) !important;
}
.r-epico {
  --cor: var(--r-epico) !important;
}
.r-lendario {
  --cor: var(--r-lendario) !important;
}
.raridades {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  margin: 30px 0 0;
  font-size: 13px;
}
.raridades span {
  --cor: var(--r-comum);
  color: var(--cor);
}
.raridades span::before {
  content: '';
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 7px;
  background: var(--cor);
  box-shadow: 0 0 8px var(--cor);
  rotate: 45deg;
}

/* ---------- Clãs ---------- */
.clas {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  justify-items: center;
  gap: 26px 12px;
}
.clas li {
  --cor: var(--ouro-claro);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-size: 14px;
  color: var(--pergaminho);
}
.clas b {
  font-weight: 400;
}
.clas small {
  margin-top: 2px;
  font-size: 12px;
  color: var(--cor);
}
.clas small::before {
  content: '◆ ';
  font-size: 9px;
}
/* folha do golpe: 7 quadros x 3 linhas (leste, sul, norte); a do meio é de frente */
.sprite-inimigo {
  width: 144px;
  height: 144px;
  margin-bottom: 4px;
  background:
    var(--img) 0 50% / 700% 300% no-repeat,
    radial-gradient(ellipse 34% 9% at 50% 92%, rgba(0, 0, 0, 0.6), transparent 100%),
    radial-gradient(
      circle at 50% 62%,
      color-mix(in srgb, var(--cor) 26%, transparent),
      transparent 60%
    );
  transition: transform 0.15s;
}
.clas li:hover .sprite-inimigo {
  transform: scale(1.1);
}
.sprite-inimigo.atacando {
  animation: golpe-inimigo 0.4375s steps(7);
}
@keyframes golpe-inimigo {
  to {
    background-position:
      116.6667% 50%,
      0 0,
      0 0;
  }
}

/* ---------- Deuses ---------- */
.deuses {
  --cor: #f2c14e;
  position: relative;
  padding: 110px var(--margem);
  overflow: hidden;
  border-block: 3px solid var(--madeira);
  background: #08060c;
}
.deuses-fundo {
  position: absolute;
  inset: 0;
  background: center / cover no-repeat;
  opacity: 0;
  transition: opacity 1.1s;
}
.deuses-fundo.ativa {
  opacity: 1;
}
.deuses-veu {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      0deg,
      rgba(8, 6, 12, 0.96) 0%,
      rgba(8, 6, 12, 0.2) 30%,
      rgba(8, 6, 12, 0.2) 62%,
      rgba(8, 6, 12, 0.92) 100%
    ),
    linear-gradient(90deg, rgba(8, 6, 12, 0.35), rgba(8, 6, 12, 0.72) 55%, rgba(8, 6, 12, 0.88));
}
.deuses-dentro {
  position: relative;
}
.deuses .secao-cabeca p {
  color: var(--texto-claro);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
}
.deus {
  display: grid;
  grid-template-columns: minmax(240px, 380px) minmax(0, 520px);
  justify-content: center;
  align-items: center;
  gap: 48px;
}
/* folha _anim.png: 8 quadros 384x512 lado a lado */
.deus-arte {
  width: 100%;
  aspect-ratio: 3 / 4;
  background: 0 0 / 800% 100% no-repeat;
  filter: drop-shadow(0 0 26px color-mix(in srgb, var(--cor) 65%, transparent));
  animation: deus-quadros 1.3s steps(8) infinite;
}
@keyframes deus-quadros {
  to {
    background-position: 114.2857% 0;
  }
}
.deus.entrando .deus-arte {
  animation:
    deus-quadros 1.3s steps(8) infinite,
    deus-entra 0.7s ease-out;
}
.deus.entrando .deus-texto {
  animation: surgir 0.7s ease-out both;
}
@keyframes deus-entra {
  from {
    opacity: 0;
    translate: 0 26px;
    scale: 0.94;
  }
}
.deus-texto {
  position: relative;
  padding: 26px 28px;
  background: rgba(10, 8, 14, 0.72);
  border: 2px solid color-mix(in srgb, var(--cor) 70%, transparent);
  box-shadow:
    inset 0 0 0 3px rgba(0, 0, 0, 0.5),
    0 0 30px color-mix(in srgb, var(--cor) 22%, transparent);
}
.deus-kanji {
  position: absolute;
  right: 18px;
  top: 6px;
  font-size: 92px;
  line-height: 1;
  color: var(--cor);
  opacity: 0.22;
}
.deus-evento {
  margin: 0;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cor);
}
.deus-evento::before {
  content: 'Evento · ';
  color: var(--texto-apagado);
}
.deus-texto h3 {
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1.1;
  color: var(--cor);
  -webkit-text-stroke: 1px var(--cor);
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.7);
}
.deus-titulo {
  margin: 2px 0 14px;
  color: var(--pergaminho);
}
.deus-lore {
  margin: 0 0 16px;
  font-size: 15px;
  color: var(--texto-claro);
}
.deus-premio {
  margin: 0;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--pergaminho);
  background: rgba(0, 0, 0, 0.4);
  border-left: 4px solid var(--cor);
}
.deus-premio b {
  display: block;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cor);
}
.deus-lista {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  max-width: 980px;
  margin: 40px auto 0;
}
.deus-botao {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 6px;
  text-align: left;
  color: var(--pergaminho);
  background: rgba(10, 8, 14, 0.8);
  border: 2px solid var(--chumbo);
  transition:
    border-color 0.15s,
    transform 0.15s;
}
.deus-botao i {
  flex: none;
  width: 52px;
  height: 52px;
  background: -31px -6px / 912px auto no-repeat;
  border: 2px solid var(--cor);
  background-color: #0b0a10;
}
.deus-botao span {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.deus-botao b {
  font-weight: 400;
  font-size: 17px;
  color: var(--cor);
}
.deus-botao small {
  font-size: 11px;
  color: var(--texto-apagado);
}
.deus-botao:hover,
.deus-botao.ativo {
  border-color: var(--cor);
  transform: translateY(-3px);
}
.deus-botao.ativo {
  box-shadow: 0 0 18px color-mix(in srgb, var(--cor) 45%, transparent);
}

/* ---------- Alistar ---------- */
.alistar {
  position: relative;
  padding: 150px 16px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.alistar-arte {
  position: absolute;
  inset: 0;
  background: #120f24 url(img/vila-noite.png) center bottom / cover no-repeat;
}
.alistar-arte::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    var(--fundo),
    rgba(18, 16, 20, 0.25) 30%,
    rgba(18, 16, 20, 0.25) 70%,
    var(--fundo)
  );
}
.alistar-caixa {
  position: relative;
  max-width: 620px;
  text-align: center;
  filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.7));
}
.alistar-caixa .secao-kanji {
  margin-bottom: 6px;
}
.alistar-caixa h2 {
  color: var(--sangue);
  -webkit-text-stroke: 0.8px var(--sangue);
  text-shadow: none;
}
.alistar-caixa p {
  color: var(--tinta-suave);
}
.alistar-caixa .acoes {
  justify-content: center;
}
.fatos {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  margin: 22px 0 0;
  padding: 0;
  font-size: 14px;
  color: var(--tinta);
}
.fatos li::before {
  content: '◆ ';
  color: var(--sangue);
}

/* ---------- Rodapé ---------- */
.rodape {
  padding: 40px 16px 44px;
  text-align: center;
  font-size: 14px;
  color: var(--texto-apagado);
  background: var(--madeira-escura);
  border-top: 3px solid var(--ouro);
}
.rodape p {
  margin: 0 auto;
  max-width: 720px;
}
.rodape-marca {
  display: inline-flex;
  margin-bottom: 14px;
}
.rodape-direitos {
  padding-bottom: 14px;
  font-size: 15px;
  color: var(--pergaminho);
}
.rodape-fino {
  padding-top: 12px;
  font-size: 12px;
  line-height: 1.7;
  border-top: 1px solid rgba(184, 147, 63, 0.25);
}
.rodape-fino + .rodape-fino {
  padding-top: 8px;
  border-top: 0;
}

/* ---------- Revelar ao rolar ---------- */
.revelar {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.6s,
    transform 0.6s;
}
.revelar.visivel {
  opacity: 1;
  transform: none;
}
/* depois de revelado, a transição volta a ser a do próprio elemento (hover) */
.jutsu.visivel,
.itens li.visivel {
  transition:
    transform 0.15s,
    border-color 0.15s,
    background 0.15s,
    box-shadow 0.15s,
    opacity 0.6s;
}

/* ---------- Telas médias ---------- */
@media (max-width: 1100px) {
  .clas {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 640px;
  }
}
@media (max-width: 980px) {
  .menu a {
    padding-inline: 8px;
  }
  .jutsus-palco {
    grid-template-columns: 1fr;
    max-width: 560px;
  }
  .deus-lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 520px;
  }
}

/* ---------- Telas pequenas ---------- */
@media (max-width: 760px) {
  body {
    font-size: 16px;
  }
  .topo {
    grid-template-columns: 1fr auto;
    padding: 8px 16px;
  }
  .menu {
    display: none;
  }
  .capa {
    padding: 96px 0 140px;
    align-items: flex-end;
  }
  .capa-dentro {
    padding: 0 16px;
  }
  .capa-arte {
    --foco-x: 0.72;
  }
  .capa-lua {
    left: 12%;
    top: 22%;
  }
  .capa-sombra {
    background: linear-gradient(
      0deg,
      var(--fundo) 6%,
      rgba(12, 10, 16, 0.82) 48%,
      rgba(12, 10, 16, 0.15) 100%
    );
  }
  .titulo {
    letter-spacing: 4px;
  }
  .acoes .botao-grande {
    flex: 1 1 100%;
  }
  .numeros {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 0;
  }
  .numeros li,
  .numeros li:first-child {
    padding: 0 0 0 14px;
    border-left: 2px solid rgba(184, 147, 63, 0.45);
  }
  .faixa-palco {
    margin-top: -104px;
    padding: 0 10px;
  }
  #cena-cacada {
    height: 240px;
  }
  .num {
    font-size: 16px;
  }
  .num-critico {
    font-size: 24px;
  }
  .saque {
    width: 36px;
    height: 36px;
  }
  .palco-log {
    padding: 8px 10px;
    font-size: 14px;
  }
  #log-linha {
    /* duas linhas reservadas: a moldura não pula quando o texto quebra */
    min-height: 3.1em;
  }
  .letreiro {
    margin-top: 60px;
  }
  .secao,
  .deuses {
    padding: 80px 16px;
  }
  .grau-seta {
    display: none;
  }
  .grau {
    min-width: 0;
    flex: 1 1 40%;
  }
  .moldura {
    border-width: 26px;
    border-image-width: 26px;
  }
  .mapa-legenda {
    position: static;
    padding: 14px 16px 16px;
    background: rgba(8, 6, 12, 0.94);
  }
  .mapa-legenda p:last-child {
    min-height: 5.6em;
  }
  .mapa-lista {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .jutsus {
    grid-template-columns: 1fr 1fr;
  }
  .jutsu {
    flex-direction: column;
    gap: 6px;
    padding: 8px 6px;
    font-size: 13px;
    text-align: center;
  }
  .vitrine-texto {
    min-height: 150px;
  }
  .itens {
    gap: 10px;
  }
  .itens {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .clas {
    gap: 20px 6px;
  }
  .clas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .deus {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .deus-arte {
    width: min(72%, 300px);
    margin: 0 auto;
  }
  .deus-texto {
    padding: 20px 18px;
  }
  .deus-lore {
    min-height: 9.4em;
  }
  .deus-botao {
    padding-right: 6px;
  }
  .deus-botao i {
    width: 40px;
    height: 40px;
    background-position: -26px -5px;
    background-size: 736px auto;
  }
  .deus-botao small {
    display: none;
  }
  .alistar {
    padding: 110px 10px;
  }
}

/* ---------- Print e movimento reduzido ---------- */
.modo-print .capa {
  min-height: 900px;
}
.modo-print .topo {
  position: absolute;
}
.modo-print .revelar {
  opacity: 1;
  transform: none;
}
.modo-print *,
.modo-print *::before,
.modo-print *::after {
  animation: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .revelar {
    opacity: 1;
    transform: none;
  }
}