/* Página das estações. Carrega DEPOIS de home.css e reaproveita tudo que já é
   comum ao site (topnav, .section-shell, .btn, footer, lista de espera) — aqui
   ficam só as peças que são desta página.

   A página é longa e narrativa de propósito: a estação é uma história com
   começo e fim, e o texto acompanha essa curva em vez de virar uma tabela de
   atributos. Por isso o ritmo alterna blocos de prosa estreita com um bloco
   visual (mapa, espécies, materiais, receitas, escada de chance).

   O coral de temporada é o mesmo token do painel do jogo (ver a Season Coral
   Rule em DESIGN.md): conteúdo de estação nunca usa o dourado do acento nem
   uma cor de raridade, porque estação é uma categoria de disponibilidade, não
   um grau de raridade nem uma chamada pra ação. 7,6:1 sobre --paper. */
:root {
  --season: #f08a5d;
  --season-dim: #c97c58;
  --season-glow: rgba(240, 138, 93, 0.14);
}

::selection { background: var(--season-glow); color: var(--ink); }

/* O foco de teclado é a única parte da navegação que o site não desenhava:
   o anel padrão do navegador não pertence a paleta nenhuma. */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--water);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---------- Abertura ---------- */

.season-hero {
  position: relative;
  padding: 7rem 0 4.5rem;
  overflow: hidden;
}

/* O minimapa da Praia como plano de fundo, cortado no topo e desbotando pro
   fundo da página — a imagem apresenta o bioma sem competir com o texto. */
.season-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 26rem;
  background: url("assets/estacoes/praia.png") center 28% / cover no-repeat;
  image-rendering: pixelated;
  opacity: 0.5;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent 88%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent 88%);
}

.season-hero > * { position: relative; }

.season-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
  max-width: 16ch;
  margin-bottom: 1.6rem;
}

.season-hero h1 em {
  font-style: normal;
  color: var(--season);
}

.prose-lead { font-size: 1.125rem; }

/* Placa da estação: nomeia o capítulo, em vez de informar um estado do
   servidor como fazia o selo de status anterior. */
.season-placa {
  display: inline-block;
  margin-top: 2.4rem;
  padding: 0.9rem 1.5rem;
  border: 1px solid var(--season-dim);
  border-radius: 8px;
  background: var(--season-glow);
}

.season-placa span {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--season);
}

.season-placa b {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
}

/* ---------- Prosa ---------- */

.prose {
  max-width: 62ch;
  color: var(--ink-soft);
}

.prose p + p { margin-top: 1.1rem; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose-fecho { margin-top: 2rem; }

/* A frase curta que fecha um bloco, sozinha na linha. */
.prose-arremate {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.25rem;
}

/* A ideia central de um capítulo, isolada. Sem aspas decorativas: o peso e a
   escala já dizem que ela é o ponto. */
.season-claim {
  max-width: 24ch;
  margin: 2.8rem 0;
  font-family: var(--font-display);
  /* Tamanho fixo, sem clamp com vw: a 1012px pra cima o clamp passava o h2 de
     2rem e invertia a hierarquia, deixando a citação maior que o título da
     seção que a contém. */
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--ink);
  text-wrap: balance;
}

.season-claim span { color: var(--season); }
.season-claim.grande { font-size: 2rem; max-width: 20ch; }

/* ---------- Seções ---------- */

.season-section { padding: 4.5rem 0; }
.season-section + .season-section { border-top: 1px solid var(--line); }

.season-section h2 {
  font-family: var(--font-display);
  font-size: 2rem;
  letter-spacing: -0.015em;
  margin-bottom: 1.2rem;
  max-width: 22ch;
  text-wrap: balance;
}

h3.sub {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin: 2.6rem 0 0;
}

.season-mapa {
  display: block;
  width: 100%;
  max-width: 42rem;
  margin-top: 2.2rem;
  border: 1px solid var(--season-dim);
  border-radius: 12px;
  image-rendering: pixelated;
}

/* ---------- Espécies ---------- */

.fish-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.9rem;
  margin-top: 1.4rem;
}

.fish {
  padding: 1rem 0.5rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper-soft);
  text-align: center;
}

/* Miniaturas animadas: a mesma folha de 9 quadros que o jogo usa, a 8 fps,
   que e exatamente o ritmo do ticker do Bestiario (1000/8 em panel.js) — o
   peixe nada no site no mesmo compasso em que nada no jogo.

   Folha de sprite em vez de GIF porque cada quadro tem umas centenas de
   pixels de alfa parcial nas bordas, e o GIF so tem transparencia de 1 bit:
   sairia serrilhado. E fundo em vez de <img> porque o navegador so busca a
   imagem quando o elemento entra em cena, e a tira fica bem no pe da pagina.

   900% sao os nove quadros lado a lado; com jump-none a posicao percorre de
   0% a 100% em nove paradas exatas, uma por quadro. Por ser tudo relativo,
   a mesma regra serve pra miniatura de 64px e pro mitico de 128px. */
.nado {
  display: block;
  margin: 0 auto;
  width: 64px;
  height: 64px;
  background-image: var(--folha);
  background-repeat: no-repeat;
  background-size: 900% 100%;
  image-rendering: pixelated;
  animation: nadar 1.125s steps(9, jump-none) infinite;
}

@keyframes nadar {
  from { background-position-x: 0%; }
  to   { background-position-x: 100%; }
}

/* Os dez em unissono leem como engrenagem, nao como cardume: o atraso
   negativo desencontra o ciclo sem atrasar o inicio de ninguem. O passo de
   cinco casa com as cinco colunas do desktop; nos dois breakpoints
   estreitos a tira tem 3 e 2 colunas, e ai o padrao deixa de acompanhar a
   linha — segue desencontrado, que e o unico efeito que importa aqui. */
.fish:nth-child(5n + 2) .nado { animation-delay: -0.25s; }
.fish:nth-child(5n + 3) .nado { animation-delay: -0.5s; }
.fish:nth-child(5n + 4) .nado { animation-delay: -0.75s; }
.fish:nth-child(5n + 5) .nado { animation-delay: -1s; }

@media (prefers-reduced-motion: reduce) {
  .nado { animation: none; }
}

.fish b {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.85rem;
  font-weight: 500;
}

.fish span {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.78rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* A escada de raridade do jogo, sem inventar cor nova pro site. */
.r-comum    { color: #a9b6a6; }
.r-incomum  { color: #72cbc5; }
.r-raro     { color: #6fb4de; }
.r-epico    { color: #c197e8; }
.r-lendario { color: var(--accent); }
.r-mitico   { color: #ff8585; }

.fish.destaque { border-color: var(--season-dim); background: var(--paper-raised); }

/* ---------- O mítico ---------- */

.mitico-grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2.4rem;
  align-items: start;
}

.mitico-grid > .nado-mitico {
  width: 128px;
  height: 128px;
}

/* ---------- Materiais ---------- */

.materiais {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.2rem;
  margin-top: 2.2rem;
}

.mat {
  padding: 1.4rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper-soft);
  text-align: center;
}

.mat img { width: 56px; height: 56px; image-rendering: pixelated; }

.mat b {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--accent-ink);
}

.mat span {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* ---------- As duas peças ---------- */

.pecas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.4rem;
  margin-top: 2.2rem;
}

.peca {
  display: flex;
  gap: 1.2rem;
  padding: 1.6rem;
  border: 1px solid var(--season-dim);
  border-radius: 12px;
  background: var(--paper-soft);
}

.peca > img {
  width: 88px;
  height: 88px;
  flex-shrink: 0;
  image-rendering: pixelated;
  align-self: flex-start;
}

.peca h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--season);
  margin-bottom: 0.5rem;
}

.peca > div > p { color: var(--ink-soft); margin-bottom: 1rem; }

.ficha { list-style: none; margin-bottom: 1rem; }

.ficha li {
  font-size: 0.85rem;
  color: var(--ink-soft);
  padding: 0.3rem 0;
  border-top: 1px solid var(--line);
}

.ficha b { color: var(--ink); font-weight: 600; }

.receita { display: flex; flex-wrap: wrap; gap: 0.6rem 1.2rem; }

.receita span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.receita img { width: 26px; height: 26px; image-rendering: pixelated; }
.receita b { color: var(--accent-ink); font-weight: 600; }

/* ---------- Escada de chance do mítico ---------- */

/* A soma é o argumento, então é desenhada como soma: três parcelas em linhas
   iguais e o total destacado no fim, não uma tabela neutra. */
.escada {
  list-style: none;
  max-width: 34rem;
  margin-top: 2.2rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

.escada li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1rem 1.4rem;
  background: var(--paper-soft);
}

.escada li + li { border-top: 1px solid var(--line); }
.escada .rotulo { color: var(--ink-soft); }

.escada .valor {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--accent-ink);
  white-space: nowrap;
}

.escada .total {
  background: var(--season-glow);
  border-top-color: var(--season-dim);
  padding: 1.3rem 1.4rem;
}

.escada .total .rotulo { color: var(--ink); }
.escada .total .valor { font-size: 2rem; color: var(--season); }

/* O sprite animado ao lado da frase sobre estar equipado: único momento
   animado da página, e mostra literalmente a peça em uso. */
.equipado {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  max-width: 46rem;
  margin-top: 2.2rem;
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper-soft);
}

.equipado img { image-rendering: pixelated; flex-shrink: 0; }
.equipado p { color: var(--ink-soft); }
.equipado strong { color: var(--ink); font-weight: 600; }

/* ---------- Fica x vai ---------- */

.balanco {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.4rem;
  margin-top: 2.4rem;
}

.balanco > div {
  padding: 1.6rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper-soft);
}

.balanco h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.balanco .fica h3 { color: var(--water); }
.balanco .vai h3 { color: var(--season); }

.balanco ul { list-style: none; display: grid; gap: 0.7rem; }

.balanco li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--ink-soft);
  line-height: 1.5;
}

.balanco li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 2px;
  background: currentColor;
  opacity: 0.55;
}

.balanco-nota {
  margin-top: 1.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* ---------- Fecho ---------- */

.season-fecho { padding-bottom: 5.5rem; }

.nota-futuro {
  margin-top: 2.6rem;
  padding: 1.3rem 1.5rem;
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  max-width: 62ch;
  color: var(--ink-soft);
  font-size: 0.85rem;
}

.nota-futuro b { color: var(--accent-ink); }

.assinatura { font-style: italic; }

/* ---------- Telas menores ---------- */

@media (max-width: 900px) {
  .fish-strip { grid-template-columns: repeat(3, 1fr); }
  .mitico-grid { grid-template-columns: 1fr; gap: 1.4rem; }
  .mitico-grid > img { width: 96px; height: 96px; }
}

@media (max-width: 680px) {
  .season-hero { padding: 5rem 0 3rem; }
  .fish-strip { grid-template-columns: repeat(2, 1fr); }
  .peca { flex-direction: column; }
  .peca > img { width: 72px; height: 72px; }
  .equipado { flex-direction: column; align-items: flex-start; }
  .season-claim.grande { font-size: 1.5rem; }
  .escada li { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
}