/* A FONTE É A MESMA DO JOGO: Geist Pixel, a que desenha cada preço e cada nome de peixe lá
   dentro. Vem hospedada aqui, e não do Google: a licença (OFL 1.1, cópia em
   GeistPixel-OFL.txt) permite, o site para de depender de terceiro pra carregar, e ninguém
   que abre esta página vira registro no servidor de outra empresa.

   787 KB viraram 16,8 KB cortando o que a página nunca escreve — sobrou latim, latim-1 e
   latim estendido A, que cobre português e inglês com folga.

   NEGRITO NÃO EXISTE NESTE ARQUIVO: só há o peso Regular, e mandar o navegador engrossar uma
   fonte de pixel borra a letra inteira. Onde precisa de ênfase, `strong` ganha um text-shadow
   de 1 px na horizontal — que é exatamente como fonte de pixel faz negrito de verdade. */
@font-face {
  font-family: "Geist Pixel";
  src: url("GeistPixel-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* A PALETA VEM DE FERNANDO DE NORONHA, o último mapa do jogo — a água esverdeada e clara,
   em vez do azul-noite que o guia usava. O jogo é leve: ele roda no canto da tela enquanto
   você faz outra coisa, e uma página escura prometia um jogo mais pesado do que ele é.

   TODA COR DE TEXTO PASSOU POR MEDIÇÃO DE CONTRASTE sobre o fundo, e várias desceram por
   causa disso. Sobre claro, as cores de raridade que funcionavam no escuro viravam quase
   invisíveis — o dourado do lendário dava 3,4:1, e o celestial 3,45:1. Todas foram
   escurecidas até passar de 4,6:1, que é o piso pra texto normal. */
:root {
  --fundo: #F3FAFB;
  --papel: #FFFFFF;
  --agua: #E4F4F6;
  --agua2: #CFEAEE;
  --linha: #C3E0E5;
  --texto: #0E3742;
  --fraco: #507781;
  --realce: #0D7B8F;
  --realce-2: #0A6070;
  --areia: #E9C88A;
  --fundo-do-mar: #0F4C5C;

  --comum: #64727D;
  --incomum: #257E3F;
  --raro: #2A72BB;
  --epico: #8A3FC0;
  --lendario: #906810;
  --celestial: #0C7A8C;

  --mono: "Geist Pixel", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --sans: "Geist Pixel", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  padding: 0 20px 90px;
  /* a luz que entra na água rasa, vindo de cima */
  background:
    radial-gradient(1200px 460px at 50% -180px, #CFEDF1 0%, transparent 72%),
    var(--fundo);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.8;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
  font-smooth: never;
}

.wrap { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 44px; }

/* ---------- barra ---------- */
nav.sitio {
  display: flex; gap: 22px; align-items: baseline; padding: 24px 0 0; flex-wrap: wrap;
  font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
}
nav.sitio a { color: var(--fraco); text-decoration: none; }
nav.sitio a:hover { color: var(--realce); }
nav.sitio a[aria-current="page"] { color: var(--realce); }
nav.sitio .casa { color: var(--texto); font-weight: 700; letter-spacing: .1em; }

/* ---------- topo ---------- */
header.topo { padding-top: 26px; display: flex; flex-direction: column; gap: 16px; }
.marca {
  font-family: var(--mono); font-size: 11px; letter-spacing: .28em;
  text-transform: uppercase; color: var(--realce);
}
h1 {
  margin: 0; font-size: clamp(38px, 7vw, 62px); line-height: 1.03;
  letter-spacing: -.01em; text-wrap: balance;
}
h1 span { color: var(--realce); }

/* O NEGRITO DA FONTE DE PIXEL. Ver a nota do @font-face: só existe o peso Regular, então
   font-weight aqui é sempre 400 e a espessura vem da sombra de 1 px. */
strong, b, .cartao h3, h1, h2, h3, .versao, .porta strong, .acao { font-weight: 400; }
strong, b { text-shadow: 1px 0 0 currentColor; }
h1, h2, h3, .acao, .versao, .porta strong { text-shadow: 1px 0 0 currentColor; }
.chamada { margin: 0; color: var(--fraco); font-size: 1.12rem; max-width: 60ch; }
.chamada strong { color: var(--texto); }

h2 { margin: 0 0 .6em; font-size: 1.3rem; letter-spacing: 0; text-wrap: balance; }
h3 { margin: 0 0 .3em; font-size: 1.02rem; }
section { display: flex; flex-direction: column; }
p { margin: 0 0 1rem; max-width: 66ch; }
p:last-child { margin-bottom: 0; }
a { color: var(--realce); }
a:hover { color: var(--realce-2); }
strong { color: var(--texto); }

code {
  font-family: var(--mono); font-size: .86em;
  background: var(--agua); border: 1px solid var(--linha);
  border-radius: 4px; padding: .1em .4em;
}

/* ---------- a vitrine da arte ---------- */
/* SEM SUAVIZAÇÃO: pixel art escalada com interpolação vira borrão, e a página do jogo não
   pode ser o lugar onde a arte dele aparece pior do que no jogo. */
.arte {
  width: 100%; height: auto; display: block;
  image-rendering: pixelated;
}
.moldura {
  background: linear-gradient(180deg, var(--papel), var(--agua));
  border: 1px solid var(--linha); border-radius: 14px;
  padding: 22px 24px; overflow-x: auto;
}
.moldura.mar {
  background: linear-gradient(180deg, #DFF3F6 0%, #BFE6EC 62%, #9FD8E1 100%);
}
.legenda {
  margin: .8rem 0 0; color: var(--fraco); font-size: .92rem; text-align: center;
}

/* ---------- cartões ---------- */
.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.cartao {
  background: var(--papel); border: 1px solid var(--linha);
  border-radius: 12px; padding: 1.1rem 1.2rem;
}
.cartao h3 { color: var(--texto); }
.cartao p { color: var(--fraco); font-size: .96rem; margin: 0; }

.caixa {
  background: var(--papel); border: 1px solid var(--linha);
  border-radius: 14px; padding: 1.4rem 1.6rem;
}
.rotulo {
  font-family: var(--mono); text-transform: uppercase; letter-spacing: .18em;
  font-size: .7rem; color: var(--fraco); margin: 0 0 .55rem;
}
.versao {
  margin: 0; font-size: 1.9rem; line-height: 1.2;
  font-variant-numeric: tabular-nums; color: var(--realce);
}
.quando { margin: .35rem 0 0; color: var(--fraco); font-size: .9rem; }
.recado { margin: .9rem 0 0; }

/* ---------- portas de apoio ---------- */
.portas { display: flex; flex-direction: column; gap: 12px; }
.porta {
  display: block; text-decoration: none; color: inherit;
  background: var(--papel); border: 1px solid var(--linha);
  border-radius: 12px; padding: 1.15rem 1.4rem;
}
a.porta:hover { border-color: var(--realce); background: var(--agua); }
.porta strong { display: block; font-size: 1.12rem; margin-bottom: .3rem; color: var(--texto); }
.porta span { color: var(--fraco); font-size: .95rem; }
.porta.vazia { opacity: .55; }

/* ---------- botão ---------- */
.acao {
  display: inline-block; text-decoration: none;
  background: var(--realce); color: #fff;
  border-radius: 10px; padding: .8rem 1.5rem;
}
.acao:hover { background: var(--realce-2); color: #fff; }

footer {
  color: var(--fraco); font-size: .88rem;
  border-top: 1px solid var(--linha); padding-top: 22px;
}

/* ---------- telas do jogo ---------- */
/* AQUI A SUAVIZAÇÃO É O CERTO, ao contrário das vitrines de sprite: estas imagens chegam
   MAIORES que o espaço e são reduzidas pelo navegador. "pixelated" só ajuda quando se
   amplia — na redução ele come linha de pixel e serrilha a cena inteira. */
.tela { margin: 0; display: flex; flex-direction: column; gap: .6rem; }
.tela .arte {
  image-rendering: auto;
  border: 1px solid var(--linha); border-radius: 12px;
  background: var(--agua);
}
.tela figcaption { color: var(--fraco); font-size: .92rem; line-height: 1.5; }
.tela.grande figcaption { text-align: center; font-size: .95rem; }
/* O VÍDEO usa a mesma moldura das capturas — é a mesma coisa, só que andando.
   `aspect-ratio` no lugar do truque antigo de padding-bottom: o quadro do YouTube é sempre
   16:9, e reservar a altura antes de ele carregar evita que a página inteira pule pra baixo
   quando ele chega. */
.video {
  aspect-ratio: 16 / 9;
  border: 1px solid var(--linha); border-radius: 12px;
  background: var(--agua);
  overflow: hidden;
}
.video iframe { display: block; width: 100%; height: 100%; border: 0; }

.telas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }

/* ---------- a bandeira do idioma ---------- */
/* Ela e o ULTIMO item da barra e nao o primeiro: quem chega ja esta na lingua que escolheu, e
   o unico que precisa dela e a minoria que caiu na outra. Primeiro item roubaria o lugar do
   nome do jogo pra resolver problema de quem nao tem. */
nav.sitio .bandeira { margin-left: auto; letter-spacing: .08em; }
nav.sitio .bandeira:hover { color: var(--realce); }

/* O paragrafo que fecha o pedido, logo abaixo dos botoes de doacao. Existe como classe e nao
   como style no HTML porque ele carrega o unico respiro daquela secao, e respiro escrito no
   atributo e o tipo de coisa que some no proximo copiar e colar. */
.depois-portas { margin-top: 1.2rem; }

/* ---------- o que ainda nao existe ---------- */
/* O SELO E' UMA PROMESSA COM DATA EM BRANCO, e ele existe porque a alternativa e' pior: uma
   secao sobre chapeus no meio do guia faz a pessoa abrir o jogo, procurar e nao achar. Ela sai
   achando que o jogo esta quebrado, quando o que esta e' incompleto -- e as duas coisas doem
   diferente. Selo em cima do titulo resolve antes do primeiro paragrafo.

   Fica ao lado do <h2> e nao acima dele pra nao virar um segundo titulo: e' uma etiqueta do
   assunto, nao um assunto. */
.futuro-selo {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--realce); background: var(--agua); border: 1px solid var(--linha);
  border-radius: 999px; padding: 3px 10px; vertical-align: middle; margin-left: 10px;
  font-weight: 700;
}

/* A celula do desenho na tabela de chapeus. `pixelated` nao e' capricho: sem ele o navegador
   suaviza uma arte de 12 px ampliada 4x e o chapeu vira uma mancha -- exatamente o defeito que
   a arte foi desenhada pra nao ter. */
td.chapeu { width: 64px; padding: 4px 8px; text-align: center; }
td.chapeu img { image-rendering: pixelated; display: block; margin: 0 auto; }