/* Shard Games — a folha única do shard.games ("papel e tinta", com a cena).
   Pixel art institucional: o papel e a tinta são a base de leitura; a riqueza vem da arte própria (o céu noturno das
   aberturas, os cristais e as rochas, os ícones, a gema), desenhada por código em tools/art.mjs e exibida em escala
   inteira. Regras desta folha (docs/identidade.md):
   - cor só por token, e token só aqui no :root;
   - toda medida de arte (borda, sombra, marcador, régua, ilustração, ícone) é calc(N * var(--px)); --px = 4px dá pixel
     inteiro de dispositivo a 1x (4), 1,25x (5), 1,5x (6) e 2x (8). Cada pixel de arte das imagens é 1 --px, com
     image-rendering: pixelated;
   - as camadas da cena são presas na margem do .wrap (--wrap-left), que está na grade: o desenho não escorrega em
     meio pixel quando a tela tem largura ímpar, e a coluna do texto fica sempre na faixa sem estrela dos ladrilhos;
   - a fonte é em rem e a altura de linha é arredondada à grade com round(…em, var(--px));
   - largura que depende do texto (botão, selo, link de ação) é arredondada para cima na grade com calc-size();
   - nada de border-radius, desfoque, brilho, degradê suave ou vidro. Animação, só a ambiente do céu (estrelas que
     piscam e o brilho na ponta do fragmento): @keyframes com steps(), em ::before/::after, dentro de
     prefers-reduced-motion: no-preference; parada, a arte fica acesa. */

@font-face {
  font-family: "Pixelify Sans";
  src: url("fonts/PixelifySans-latin.woff2?v=12f47be3dd") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --px: 4px;

  /* papel e tinta: o papel quente é a base de leitura; a tinta é da família da noite do jogo */
  --paper: #efe9dc;
  --card: #f9f6ee;
  --shade: #cdc2aa;
  --ink: #14121e;
  --ink-soft: #38344f;
  /* aço: rótulos e o que é secundário no papel (6,4:1); a faixa e o cabeçalho da ficha (creme sobre aço: 6,1:1), com o
     pontilhado de planta no aço escuro; o aço claro é o selo discreto e o texto secundário sobre a noite (11:1) */
  --steel: #4e5a75;
  --steel-deep: #2b2f44;
  --steel-pale: #bcc8d6;
  /* ouro só em preenchimento (botão, selo), com o relevo em degrau (luz e sombra de ouro); ocre para sublinhado e
     marcador de estado sobre papel (5,7:1); violeta só no foco sobre o papel */
  --gold: #d99a26;
  --gold-hi: #e0b040;
  --gold-lo: #a05a1a;
  --ochre: #8a4a12;
  --violet: #7d3fb0;
  /* a cena: o céu das aberturas (o mesmo tom do alto de art/sky.png) e o creme dos títulos sobre ele (16:1) */
  --night: #12101c;
  --cream: #f4f0e6;

  --focus: var(--violet);

  --font-pixel: "Pixelify Sans", system-ui, sans-serif;
  --font-text: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --gutter: calc(4 * var(--px));
  --wrap: calc(280 * var(--px));
  /* a margem esquerda do conteúdo, na grade (a mesma conta do .wrap); o 100% é o do elemento que usa a variável */
  --wrap-left: max(var(--gutter), round(down, calc((100% - var(--wrap)) / 2), var(--px)));
  /* a coluna do texto das aberturas: 186 pixels de arte, a faixa sem estrela dos ladrilhos (tools/art/sky.mjs) */
  --text-zone: calc(186 * var(--px));

  /* borda de 1 --px com o canto em degrau (o canto fica vazio): quatro sombras chapadas, sem desfoque */
  --edge:
    0 calc(-1 * var(--px)) 0 0 var(--ink),
    0 var(--px) 0 0 var(--ink),
    calc(-1 * var(--px)) 0 0 0 var(--ink),
    var(--px) 0 0 0 var(--ink);
  --edge-steel:
    0 calc(-1 * var(--px)) 0 0 var(--steel),
    0 var(--px) 0 0 var(--steel),
    calc(-1 * var(--px)) 0 0 0 var(--steel),
    var(--px) 0 0 0 var(--steel);
  /* sombra de papel dos cartões: 2 --px para a direita e para baixo */
  --drop: calc(2 * var(--px)) calc(2 * var(--px)) 0 var(--px) var(--shade);
  /* espessura de tinta dos botões: 1 --px para a direita e para baixo */
  --press: var(--px) var(--px) 0 var(--px) var(--ink);
  /* relevo em degrau do ouro (botão principal, selo): 1 --px de luz em cima e à esquerda, de sombra embaixo e à direita */
  --bevel-gold:
    inset var(--px) var(--px) 0 0 var(--gold-hi),
    inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 0 var(--gold-lo);
  /* régua pontilhada horizontal: quadrados de 1 --px a cada 2 --px */
  --dots: linear-gradient(90deg, var(--shade) 50%, transparent 0) left bottom / calc(2 * var(--px)) var(--px) repeat-x;
}

@media (min-width: 768px) {
  :root { --gutter: calc(8 * var(--px)); }
}

/* ---------- base ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* o rodapé fica no pé da tela mesmo em página curta (a 404) */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.65;
  line-height: round(1.65em, var(--px));
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-pixel);
  font-weight: 500;
}

p,
dl,
dd { margin: 0; }

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

a { color: inherit; }

main { flex: 1 0 auto; }

img,
picture { display: block; }

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

:focus-visible {
  outline: var(--px) solid var(--focus);
  outline-offset: var(--px);
}

/* as duas bordas da coluna na grade de --px: a margem esquerda arredondada para baixo (--wrap-left) e a largura do
   conteúdo num múltiplo de --px (--wrap no desktop; abaixo dele, a tela menos as calhas, arredondada para baixo); a
   direita leva a sobra. Assim a borda direita dos cartões também cai em pixel inteiro quando a sobra da tela é ímpar
   (1903 px) ou fora da grade a 1,25 (1519 px: 1920 a 125 % com a barra de rolagem do Windows). As contas vão por
   extenso, não por var(): o navegador sem round() descarta a declaração e fica com a calha da primeira linha */
.wrap {
  width: 100%;
  padding-inline: var(--gutter);
  padding-inline:
    max(var(--gutter), round(down, calc((100% - var(--wrap)) / 2), var(--px)))
    calc(100% - max(var(--gutter), round(down, calc((100% - var(--wrap)) / 2), var(--px))) - min(var(--wrap), round(down, calc(100% - 2 * var(--gutter)), var(--px))));
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: calc(-20 * var(--px));
  z-index: 10;
  padding: calc(2 * var(--px)) calc(3 * var(--px));
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-pixel);
  text-decoration: none;
}
.skip:focus { top: calc(2 * var(--px)); }

/* texto de abertura de página */
.lead {
  max-width: 34em;
  font-size: 1.25rem;
  line-height: round(1.6em, var(--px));
  color: var(--ink-soft);
}

@media (min-width: 768px) {
  .lead { font-size: 1.375rem; }
}

/* link no meio do texto: tinta, sublinhado em ocre */
.link {
  text-decoration: underline;
  text-decoration-color: var(--ochre);
  text-decoration-thickness: var(--px);
  text-underline-offset: var(--px);
}
.link:hover { color: var(--ochre); }

/* ---------- cabeçalho ---------- */

.site-header { border-bottom: var(--px) solid var(--ink); }

.site-header__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(2 * var(--px)) calc(4 * var(--px));
  padding-block: calc(3 * var(--px));
}

.brand {
  display: flex;
  align-items: center;
  gap: calc(3 * var(--px));
  text-decoration: none;
}

.brand__mark {
  flex: none;
  width: calc(12 * var(--px));
  height: calc(12 * var(--px));
}

.brand__name {
  font-family: var(--font-pixel);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: round(1.1em, var(--px));
  white-space: nowrap;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(6 * var(--px));
  width: 100%;
}

.nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: calc(5 * var(--px));
}

.nav__link {
  position: relative;
  display: block;
  width: fit-content;
  width: calc-size(fit-content, round(up, size, var(--px)));
  padding-block: calc(2 * var(--px));
  font-family: var(--font-pixel);
  font-weight: 500;
  font-size: 1.1875rem;
  line-height: round(1.25em, var(--px));
  text-decoration: none;
}

.nav__link:hover { color: var(--steel); }

/* a página atual: uma régua de 1 --px em ocre sob o nome */
.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--px);
  background: var(--ochre);
}

/* troca de idioma: uma etiqueta com a borda em degrau */
.lang {
  display: block;
  width: fit-content;
  width: calc-size(fit-content, round(up, size, var(--px)));
  margin: var(--px);
  padding: var(--px) calc(2 * var(--px));
  font-family: var(--font-pixel);
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: round(1.4em, var(--px));
  text-decoration: none;
  background: var(--card);
  box-shadow: var(--edge);
}
.lang:hover { background: var(--steel-pale); }
.lang:focus-visible { outline-offset: calc(2 * var(--px)); }

@media (min-width: 640px) {
  .nav {
    width: auto;
    gap: calc(8 * var(--px));
  }
  .nav__list { gap: calc(6 * var(--px)); }
}

/* ---------- botões e links de ação ---------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(3 * var(--px)) calc(4 * var(--px));
  margin-top: calc(8 * var(--px));
}

.btn {
  display: block;
  width: fit-content;
  width: calc-size(fit-content, round(up, size, var(--px)));
  margin: var(--px) calc(2 * var(--px)) calc(2 * var(--px)) var(--px);
  padding: calc(3 * var(--px)) calc(6 * var(--px));
  font-family: var(--font-pixel);
  font-weight: 600;
  font-size: 1.1875rem;
  line-height: round(1.1em, var(--px));
  text-align: center;
  text-decoration: none;
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--edge), var(--press);
}

/* o principal em ouro, com o relevo em degrau; no hover vira papel (o relevo sai junto) */
.btn--primary {
  background: var(--gold);
  box-shadow: var(--edge), var(--press), var(--bevel-gold);
}

.btn:hover { background: var(--steel-pale); }
.btn--primary:hover {
  background: var(--card);
  box-shadow: var(--edge), var(--press);
}

.btn:active {
  transform: translate(var(--px), var(--px));
  box-shadow: var(--edge);
}

.btn:focus-visible { outline-offset: calc(3 * var(--px)); }

/* link de ação: nome em pixel, régua de ocre do tamanho do texto e uma seta de pixel */
.more {
  display: flex;
  align-items: center;
  gap: calc(2 * var(--px));
  width: fit-content;
  width: calc-size(fit-content, round(up, size, var(--px)));
  padding-bottom: var(--px);
  border-bottom: var(--px) solid var(--ochre);
  font-family: var(--font-pixel);
  font-weight: 600;
  font-size: 1.1875rem;
  line-height: round(1.25em, var(--px));
  text-decoration: none;
}

.more::after {
  content: "";
  flex: none;
  width: calc(2 * var(--px));
  height: calc(3 * var(--px));
  background: var(--ink);
  clip-path: polygon(0 0, 50% 0, 50% 33.333%, 100% 33.333%, 100% 66.667%, 50% 66.667%, 50% 100%, 0 100%);
}

.more:hover { color: var(--ochre); }
.more:hover::after { background: var(--ochre); }

/* ---------- selo de estado ---------- */

.seal {
  display: flex;
  align-items: center;
  gap: calc(2 * var(--px));
  align-self: start;
  width: fit-content;
  width: calc-size(fit-content, round(up, size, var(--px)));
  margin: var(--px);
  padding: var(--px) calc(3 * var(--px)) var(--px) calc(2 * var(--px));
  font-family: var(--font-pixel);
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: round(1.4em, var(--px));
  white-space: nowrap;
  background: var(--gold);
  box-shadow: var(--edge), var(--bevel-gold);
}

.seal::before {
  content: "";
  flex: none;
  width: calc(2 * var(--px));
  height: calc(2 * var(--px));
  background: var(--ink);
}

.seal--quiet {
  background: var(--steel-pale);
  box-shadow: var(--edge);
}

/* ---------- a cena: céu noturno, estrelas e horizonte, em escala inteira ---------- */

/* A faixa escura das aberturas. As camadas ficam em ::before (horizonte, céu e estrelas) e ::after (as estrelas que
   piscam), presas na margem do conteúdo menos 240 pixels de arte, e repetem dali: o desenho fica no mesmo lugar em
   relação ao texto em toda largura, e o texto cai sempre na coluna sem estrela dos ladrilhos (480 de largura: não se
   repete na tela até 1920 px). O pé da faixa vira papel num xadrez de 2 fileiras. */
.scene {
  --focus: var(--gold);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--night);
  color: var(--cream);
}

.scene::before,
.scene::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: calc(var(--wrap-left) - 240 * var(--px));
  right: 0;
  image-rendering: pixelated;
  pointer-events: none;
}

.scene::before {
  background:
    conic-gradient(var(--paper) 25%, transparent 0 50%, var(--paper) 0 75%, transparent 0) left bottom / calc(2 * var(--px)) calc(2 * var(--px)) repeat-x,
    url("art/horizon.png?v=4237315620") left bottom / calc(480 * var(--px)) calc(40 * var(--px)) repeat-x,
    url("art/stars.png?v=11b2459976") left top / calc(480 * var(--px)) calc(176 * var(--px)) repeat,
    url("art/sky.png?v=33467a5141") left bottom / calc(480 * var(--px)) calc(176 * var(--px)) repeat-x;
}

/* as estrelas que piscam: uma camada própria, acima do céu e abaixo do horizonte. Acesas quando não há animação */
.scene::after {
  bottom: calc(40 * var(--px));
  background: url("art/twinkle.png?v=b4ee38f890") left top / calc(480 * var(--px)) calc(176 * var(--px)) repeat;
}

.scene .lead { color: var(--steel-pale); }

/* botões sobre a noite: a borda de tinta some no céu; a espessura fica no tom escuro do próprio botão */
.scene .btn { box-shadow: var(--edge), var(--px) var(--px) 0 var(--px) var(--steel); }
.scene .btn--primary { box-shadow: var(--edge), var(--px) var(--px) 0 var(--px) var(--ochre), var(--bevel-gold); }
.scene .btn--primary:hover { box-shadow: var(--edge), var(--px) var(--px) 0 var(--px) var(--ochre); }
.scene .btn:active { box-shadow: var(--edge); }

@media (prefers-reduced-motion: no-preference) {
  .scene::after { animation: twinkle 9s steps(1, end) infinite; }

  @keyframes twinkle {
    0% { opacity: 1; }
    14% { opacity: 0; }
    27% { opacity: 1; }
    48% { opacity: 0; }
    56% { opacity: 1; }
    75% { opacity: 0; }
    83% { opacity: 1; }
  }
}

/* ---------- seções ---------- */

.section { padding-block: calc(12 * var(--px)); }
.section--tight { padding-block: calc(4 * var(--px)); }
.scene + .section--tight { padding-top: calc(10 * var(--px)); }

/* título de seção com a régua pontilhada de tinta até a margem, fechada pela gema de ametista. A régua desce do alto da
   linha um número inteiro de --px (1lh é a altura de linha do título, que está na grade). Quando não cabem 12 --px de
   régua ao lado do texto (título comprido a 390 px), ela desce para a linha de baixo inteira, em vez de virar uma
   reticência espremida */
.section__title {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: calc(4 * var(--px));
  margin-bottom: calc(8 * var(--px));
  font-size: 2rem;
  line-height: round(1.15em, var(--px));
}

.section__title::after {
  content: "";
  flex: 1;
  min-width: calc(19 * var(--px));
  height: calc(5 * var(--px));
  margin-top: round(down, calc((1lh - 5 * var(--px)) / 2), var(--px));
  padding-right: calc(7 * var(--px));
  background:
    url("art/gem.png?v=96593c6962") right top / calc(5 * var(--px)) calc(5 * var(--px)) no-repeat,
    linear-gradient(90deg, transparent 50%, var(--ink) 0) right 0 top calc(2 * var(--px)) / calc(2 * var(--px)) var(--px) repeat-x content-box;
  image-rendering: pixelated;
}

@media (min-width: 768px) {
  .section__title { font-size: 2.5rem; }
}

/* título dentro de cartão (Jogos): um degrau acima do título dos itens (.item__title) */
.sub-title {
  margin-bottom: calc(4 * var(--px));
  font-size: 1.5rem;
  line-height: round(1.3em, var(--px));
}

@media (min-width: 768px) {
  .sub-title { font-size: 1.75rem; }
}

/* ---------- a faixa de aço (Como trabalhamos): pontilhado de planta e a emenda em xadrez ---------- */

/* aço com um ponto de aço escuro a cada 6 --px; em cima e embaixo, 2 fileiras de xadrez de aço sobre o papel */
.band {
  --focus: var(--cream);
  position: relative;
  margin-block: calc(2 * var(--px));
  background:
    conic-gradient(at var(--px) var(--px), transparent 75%, var(--steel-deep) 0) left top / calc(6 * var(--px)) calc(6 * var(--px)),
    var(--steel);
  color: var(--cream);
}

.band::before,
.band::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: calc(2 * var(--px));
  background: conic-gradient(var(--steel) 25%, transparent 0 50%, var(--steel) 0 75%, transparent 0) 0 0 / calc(2 * var(--px)) calc(2 * var(--px));
}
.band::before { top: calc(-2 * var(--px)); }
.band::after { bottom: calc(-2 * var(--px)); }

.band .section__title::after {
  background:
    url("art/gem.png?v=96593c6962") right top / calc(5 * var(--px)) calc(5 * var(--px)) no-repeat,
    linear-gradient(90deg, transparent 50%, var(--steel-pale) 0) right 0 top calc(2 * var(--px)) / calc(2 * var(--px)) var(--px) repeat-x content-box;
}

/* ---------- abertura (Início) ---------- */

.intro__in {
  display: grid;
  padding-top: calc(10 * var(--px));
}

.intro__text {
  max-width: var(--text-zone);
  padding-bottom: calc(4 * var(--px));
}

.intro__title {
  margin-bottom: calc(5 * var(--px));
  font-size: 3rem;
  line-height: round(1.1em, var(--px));
  color: var(--cream);
  /* sombra chapada: um pixel de arte para a direita e para baixo, em aço */
  text-shadow: var(--px) var(--px) 0 var(--steel);
}

/* A ilustração, sempre a 1 --px por pixel de arte, a 2 --px do pé (o xadrez da faixa fica à mostra). No celular, a
   versão compacta (92 × 66), para a ficha aparecer cedo; a partir de 640 px, a grande (128 × 126). Centrada na coluna
   (a margem é arredondada na grade); mais larga que a coluna, ela é recortada nas laterais pela cena. */
.intro__art {
  --glint-x: 42;
  --glint-y: 6;
  position: relative;
  width: calc(92 * var(--px));
  height: calc(66 * var(--px));
  margin-bottom: calc(2 * var(--px));
  margin-left: round(down, calc(50% - 46 * var(--px)), var(--px));
}

.intro__art img {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

/* o brilho na ponta acesa do fragmento: pisca de vez em quando; parado, fica aceso */
.intro__art::after {
  content: "";
  position: absolute;
  left: calc(var(--glint-x) * var(--px));
  top: calc(var(--glint-y) * var(--px));
  width: calc(7 * var(--px));
  height: calc(7 * var(--px));
  background: url("art/glint.png?v=214c9dab29") 0 0 / 100% 100%;
  image-rendering: pixelated;
}

@media (prefers-reduced-motion: no-preference) {
  .intro__art::after { animation: glint 5s steps(1, end) infinite; }

  @keyframes glint {
    0% { opacity: 1; }
    12% { opacity: 0; }
    18% { opacity: 1; }
    64% { opacity: 0; }
    70% { opacity: 1; }
  }
}

@media (min-width: 640px) {
  .intro__art {
    --glint-x: 56;
    --glint-y: 11;
    width: calc(128 * var(--px));
    height: calc(126 * var(--px));
    margin-left: round(down, calc(50% - 64 * var(--px)), var(--px));
  }
}

@media (min-width: 768px) {
  .intro__title { font-size: 4rem; }
}

/* desktop: o texto à esquerda, na altura do céu; a ilustração à direita, apoiada no chão da faixa */
@media (min-width: 960px) {
  .intro__in {
    grid-template-columns: round(down, calc((100% - 8 * var(--px)) / 2), var(--px)) minmax(0, 1fr);
    column-gap: calc(8 * var(--px));
    align-items: start;
  }
  .intro__text { padding-top: calc(18 * var(--px)); }
  .intro__title { font-size: 4.5rem; }
  .intro__art { margin-left: 0; }
}

@media (min-width: 1280px) {
  .intro__art { margin-left: calc(4 * var(--px)); }
}

/* ---------- ficha do estúdio (logo abaixo da cena) ---------- */

.intro__sheet { padding-top: calc(10 * var(--px)); }

/* O cabeçalho de aço (a marca, o título e o caminho para o Estúdio, alinhados pelo pé: o link tem régua, nada de
   centro) e, no papel, os fatos. No celular o caminho desce para a linha de baixo do cabeçalho. */
.sheet {
  background: var(--card);
  box-shadow: var(--edge), var(--drop);
}

.sheet__head {
  --focus: var(--cream);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: calc(3 * var(--px)) calc(4 * var(--px));
  padding: calc(3 * var(--px)) calc(5 * var(--px));
  border-bottom: var(--px) solid var(--ink);
  background: var(--steel);
  color: var(--cream);
}

.sheet__mark {
  flex: none;
  width: calc(12 * var(--px));
  height: calc(12 * var(--px));
}

.sheet__title {
  font-size: 1.5rem;
  line-height: round(1.3em, var(--px));
}

.sheet__head .more {
  margin: 0 0 var(--px) auto;
  border-bottom-color: var(--gold);
}
.sheet__head .more::after { background: var(--cream); }
.sheet__head .more:hover { color: var(--steel-pale); }
.sheet__head .more:hover::after { background: var(--steel-pale); }

.sheet .record { padding: 0 calc(5 * var(--px)) calc(5 * var(--px)); }

@media (min-width: 768px) {
  .sheet__head { padding: calc(3 * var(--px)) calc(8 * var(--px)); }
  .sheet__title { font-size: 1.75rem; }
  .sheet .record { padding: 0 calc(8 * var(--px)) calc(6 * var(--px)); }
}

/* ---------- ficha (tabela de rótulo e valor) ---------- */

.record__row {
  display: grid;
  padding-block: calc(3 * var(--px));
  background: var(--dots);
}
.record__row:last-child {
  padding-bottom: 0;
  background: none;
}

.record dt {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: round(1.6em, var(--px));
  color: var(--steel);
}

.record dd {
  font-size: 1rem;
  line-height: round(1.5em, var(--px));
}

@media (min-width: 480px) {
  .record__row {
    grid-template-columns: calc(32 * var(--px)) minmax(0, 1fr);
    gap: calc(4 * var(--px));
  }
}

/* um fato por coluna (a ficha do Início): o rótulo em cima do valor, colunas separadas por uma régua pontilhada
   vertical; as da esquerda na grade e a última com a sobra */
.record--cols .record__row {
  display: block;
  padding-block: calc(4 * var(--px));
}

.record--cols .record__row:last-child { padding-bottom: 0; }

@media (min-width: 768px) {
  .record--cols {
    display: grid;
    grid-template-columns: round(down, calc((100% - 6 * var(--px)) / 2), var(--px)) minmax(0, 1fr);
    column-gap: calc(6 * var(--px));
  }
  .record--cols .record__row:nth-last-child(2) {
    padding-bottom: 0;
    background: none;
  }
}

@media (min-width: 1024px) {
  .record--cols {
    grid-template-columns: repeat(3, round(down, calc((100% - 3 * 6 * var(--px)) / 4), var(--px))) minmax(0, 1fr);
  }
  .record--cols .record__row {
    padding-block: calc(5 * var(--px)) 0;
    background: none;
  }
  .record--cols .record__row + .record__row {
    margin-left: calc(-3 * var(--px));
    padding-left: calc(3 * var(--px));
    background: linear-gradient(var(--shade) 50%, transparent 0) left top / var(--px) calc(2 * var(--px)) repeat-y;
  }
}

/* ---------- cartões ---------- */

.card {
  background: var(--card);
  box-shadow: var(--edge), var(--drop);
  padding: calc(6 * var(--px)) calc(5 * var(--px));
}

@media (min-width: 768px) {
  .card { padding: calc(8 * var(--px)); }
}

.card--quiet {
  background: transparent;
  box-shadow: var(--edge-steel);
}

.stack {
  display: grid;
  gap: calc(8 * var(--px));
}

/* ---------- ícones de pixel (16 × 16, numa folha só: art/icons.png) e a gema ---------- */

.icon {
  display: block;
  flex: none;
  width: calc(16 * var(--px));
  height: calc(16 * var(--px));
  background: url("art/icons.png?v=04bdd535c5") 0 0 / calc(112 * var(--px)) calc(16 * var(--px)) no-repeat;
  image-rendering: pixelated;
}

.icon--build { background-position-x: calc(-16 * var(--px)); }
.icon--explore { background-position-x: calc(-32 * var(--px)); }
.icon--pvp { background-position-x: calc(-48 * var(--px)); }
.icon--clans { background-position-x: calc(-64 * var(--px)); }
.icon--scale { background-position-x: calc(-80 * var(--px)); }
.icon--next { background-position-x: calc(-96 * var(--px)); }

/* ---------- jogo ---------- */

.game__head {
  display: grid;
  gap: calc(4 * var(--px));
  margin-bottom: calc(6 * var(--px));
  padding-bottom: calc(6 * var(--px));
  border-bottom: var(--px) solid var(--ink);
}

@media (min-width: 768px) {
  .game__head { grid-template-columns: minmax(0, 1fr) auto; }
}

.game__name {
  font-size: 2rem;
  line-height: round(1.15em, var(--px));
}

@media (min-width: 768px) {
  .game__name { font-size: 2.5rem; }
}

.game__kind {
  margin-top: var(--px);
  font-size: 1.125rem;
  line-height: round(1.6em, var(--px));
  color: var(--ink-soft);
}

.game__summary {
  max-width: 40em;
  margin-bottom: calc(6 * var(--px));
}

.game__meta {
  margin-block: calc(6 * var(--px)) calc(5 * var(--px));
  font-size: 0.9375rem;
  line-height: round(1.6em, var(--px));
  color: var(--ink-soft);
}

/* os fatos do jogo (Início): cada um com o seu ícone; o texto fica no meio da altura do ícone */
.tiles {
  display: grid;
  gap: calc(4 * var(--px));
}

.tile {
  display: grid;
  grid-template-columns: calc(16 * var(--px)) minmax(0, 1fr);
  column-gap: calc(4 * var(--px));
}

.tile__text { align-self: center; }

@media (min-width: 900px) {
  .tiles {
    grid-template-columns: round(down, calc((100% - 8 * var(--px)) / 2), var(--px)) minmax(0, 1fr);
    gap: calc(5 * var(--px)) calc(8 * var(--px));
  }
}

/* Jogos: o que é e a ficha do jogo lado a lado; os sistemas; o caminho para acompanhar */
.split {
  display: grid;
  gap: calc(6 * var(--px));
  margin-bottom: calc(10 * var(--px));
}

@media (min-width: 1024px) {
  .split {
    grid-template-columns: minmax(0, 1fr) round(down, calc((100% - 12 * var(--px)) * 5 / 12), var(--px));
    gap: calc(12 * var(--px));
  }
}

.split__main p { max-width: 36em; }

/* mais respiro antes, para o bloco não parecer mais um item dos sistemas */
.follow {
  display: grid;
  gap: calc(4 * var(--px));
  margin-top: calc(14 * var(--px));
  padding-top: calc(6 * var(--px));
  border-top: var(--px) solid var(--ink);
}

.follow p {
  max-width: 36em;
  color: var(--ink-soft);
}

/* o botão vai pelo pé do texto, não pelo centro: metade da diferença de alturas cai fora da grade a 1,25 */
@media (min-width: 768px) {
  .follow {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: calc(8 * var(--px));
  }
}

/* próximo jogo: cartão discreto em aço, com o fragmento em contorno à esquerda */
.next {
  display: grid;
  grid-template-columns: calc(16 * var(--px)) minmax(0, 1fr);
  gap: calc(3 * var(--px)) calc(5 * var(--px));
  align-items: start;
  padding-block: calc(5 * var(--px));
}

.next .icon { grid-row: span 3; }

/* largura arredondada na grade: o selo ao lado começa em pixel inteiro */
.next__name {
  width: fit-content;
  width: calc-size(fit-content, round(up, size, var(--px)));
  font-size: 1.5rem;
  line-height: round(1.3em, var(--px));
}

.next__note { color: var(--ink-soft); }

/* numa linha a partir do desktop. Alinhados pelo topo, com a margem que põe o nome (32 px) e o selo (32 px de caixa)
   no meio da altura do ícone (64 px): 4 --px. Nada de center, que daria meio pixel a 1,25 */
@media (min-width: 1024px) {
  .next {
    grid-template-columns: calc(16 * var(--px)) auto auto minmax(0, 1fr);
    column-gap: calc(6 * var(--px));
  }
  .next .icon { grid-row: auto; }
  .next__name { margin-top: calc(4 * var(--px)); }
  .next .seal { margin-top: calc(4 * var(--px)); }
  .next__note { align-self: center; }
}

/* ---------- lista de fatos: a gema de ametista (5 × 5) como marcador ---------- */

.facts {
  display: grid;
  gap: calc(2 * var(--px));
}

.facts li {
  position: relative;
  padding-left: calc(8 * var(--px));
}

.facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--px);
  width: calc(5 * var(--px));
  height: calc(5 * var(--px));
  background: url("art/gem.png?v=96593c6962") 0 0 / 100% 100%;
  image-rendering: pixelated;
}

/* variante para o que não há (Privacidade): um traço de aço de 3 × 1 em vez da gema */
.facts--dash li { padding-left: calc(7 * var(--px)); }

.facts--dash li::before {
  top: calc(3 * var(--px));
  width: calc(3 * var(--px));
  height: var(--px);
  background: var(--steel);
}

@media (min-width: 900px) {
  .facts--split {
    grid-template-columns: round(down, calc((100% - 8 * var(--px)) / 2), var(--px)) minmax(0, 1fr);
    gap: calc(2 * var(--px)) calc(8 * var(--px));
  }
}

/* ---------- itens com título, sob uma régua de tinta ---------- */

.items {
  display: grid;
  gap: calc(8 * var(--px));
}

.item {
  padding-top: calc(4 * var(--px));
  border-top: var(--px) solid var(--ink);
}

.item__title {
  margin-bottom: calc(2 * var(--px));
  font-family: var(--font-pixel);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: round(1.3em, var(--px));
}

.item dd { color: var(--ink-soft); }

/* itens com ícone (os sistemas em Jogos, O que fazemos no Estúdio): no celular o ícone à esquerda do título e do
   texto; a partir do tablet, em cima do título */
.items--icons .item {
  position: relative;
  min-height: calc(22 * var(--px));
  padding: calc(5 * var(--px)) 0 0 calc(20 * var(--px));
}

.items--icons .icon {
  position: absolute;
  left: 0;
  top: calc(5 * var(--px));
}

@media (min-width: 768px) {
  .items--icons .item {
    min-height: 0;
    padding-left: 0;
  }
  .items--icons .icon {
    position: static;
    margin-bottom: calc(3 * var(--px));
  }
}

/* três numa linha a partir do tablet. As colunas da esquerda são arredondadas na grade e a última fica com a sobra,
   para a régua dela terminar na margem do bloco (que está na grade) */
@media (min-width: 768px) {
  .items--three { grid-template-columns: repeat(2, round(down, calc((100% - 16 * var(--px)) / 3), var(--px))) minmax(0, 1fr); }
}

/* grade de dois e depois de três, com a mesma regra da última coluna */
@media (min-width: 768px) {
  .items--grid {
    grid-template-columns: round(down, calc((100% - 8 * var(--px)) / 2), var(--px)) minmax(0, 1fr);
    gap: calc(8 * var(--px));
  }
}

@media (min-width: 1024px) {
  .items--grid { grid-template-columns: repeat(2, round(down, calc((100% - 16 * var(--px)) / 3), var(--px))) minmax(0, 1fr); }
}

/* ---------- como trabalhamos (na faixa de aço): a frase à esquerda, a lista à direita a partir do tablet ---------- */

.how {
  display: grid;
  gap: calc(6 * var(--px));
}

@media (min-width: 768px) {
  .how {
    grid-template-columns: round(down, calc((100% - 12 * var(--px)) / 2), var(--px)) minmax(0, 1fr);
    gap: calc(12 * var(--px));
    align-items: start;
  }
}

.how__claim .icon { margin-bottom: calc(4 * var(--px)); }

/* a frase fica abaixo do título da seção (h2), para os dois não competirem */
.how__claim {
  font-family: var(--font-pixel);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: round(1.3em, var(--px));
}

@media (min-width: 768px) {
  .how__claim { font-size: 1.75rem; }
}

.how__intro { margin-bottom: calc(2 * var(--px)); }

/* quatro itens com a régua pontilhada de aço claro embaixo */
.how__list { gap: 0; }

.how__list li {
  padding-block: calc(3 * var(--px));
  background: linear-gradient(90deg, var(--steel-pale) 50%, transparent 0) left bottom / calc(2 * var(--px)) var(--px) repeat-x;
}

.how__list li::before { top: calc(4 * var(--px)); }

/* ---------- comunidade: o cartão de papel com a ilustração dos cristais juntos ---------- */

.community {
  display: grid;
  gap: calc(6 * var(--px));
}

.community__art {
  width: calc(56 * var(--px));
  height: calc(40 * var(--px));
  image-rendering: pixelated;
}

/* tablet: a ilustração à esquerda, o texto e a ação empilhados ao lado; desktop: as três numa linha. Tudo pelo pé (a
   ilustração termina no chão da pedra; o botão tem borda: nada de centro) */
@media (min-width: 768px) {
  .community {
    grid-template-columns: calc(56 * var(--px)) minmax(0, 1fr);
    grid-template-areas: "art text" "art action";
    column-gap: calc(10 * var(--px));
    align-items: end;
    padding: calc(8 * var(--px)) calc(10 * var(--px));
  }
  .community__art { grid-area: art; }
  .community__text { grid-area: text; }
  .community__action { grid-area: action; }
}

@media (min-width: 1024px) {
  .community {
    grid-template-columns: calc(56 * var(--px)) minmax(0, 1fr) auto;
    grid-template-areas: "art text action";
  }
}

.community__title {
  margin-bottom: calc(3 * var(--px));
  font-size: 2rem;
  line-height: round(1.15em, var(--px));
}

@media (min-width: 768px) {
  .community__title { font-size: 2.5rem; }
}

.community__text p { color: var(--ink-soft); }

.community__addr {
  margin-top: calc(2 * var(--px));
  font-size: 0.9375rem;
  line-height: round(1.6em, var(--px));
  color: var(--steel);
}

/* ---------- páginas internas: a abertura numa fatia da cena, com a ilustração da página ---------- */

/* o texto no céu liso, dentro da coluna sem estrela; embaixo, as faixas do céu e o horizonte (44 pixels de arte) */
.page-head__in {
  display: grid;
  padding-block: calc(12 * var(--px)) calc(44 * var(--px));
}

.page-head__text { max-width: var(--text-zone); }

.page-title {
  margin-bottom: calc(4 * var(--px));
  font-size: 2.5rem;
  line-height: round(1.15em, var(--px));
}

.scene .page-title {
  color: var(--cream);
  text-shadow: var(--px) var(--px) 0 var(--steel);
}

@media (min-width: 768px) {
  .page-title { font-size: 3.25rem; }
}

.page-head__note {
  font-size: 0.9375rem;
  line-height: round(1.6em, var(--px));
  color: var(--steel-pale);
}

/* A ilustração da página (96 × 62 pixels de arte) apoiada no chão da faixa, a 2 --px do pé (o xadrez fica à mostra),
   entrando na margem de baixo. No celular e no tablet, centrada abaixo do texto */
.page-head__art {
  width: calc(96 * var(--px));
  height: calc(62 * var(--px));
  margin: calc(6 * var(--px)) 0 calc(-42 * var(--px)) round(down, calc(50% - 48 * var(--px)), var(--px));
  image-rendering: pixelated;
}

/* a coluna do texto é arredondada na grade e a da ilustração vem logo depois: a ilustração começa em pixel inteiro
   mesmo quando a margem direita é ímpar (a sobra de até 3 px fica depois dela) */
@media (min-width: 960px) {
  .page-head__in {
    grid-template-columns: round(down, calc(100% - 104 * var(--px)), var(--px)) calc(96 * var(--px));
    column-gap: calc(8 * var(--px));
    align-items: end;
  }
  .page-head__text { align-self: start; }
  .page-head__art { margin: 0 0 calc(-42 * var(--px)); }
}

.card--record .record__row { padding-block: calc(4 * var(--px)); }
.card--record .record__row:first-child { padding-top: 0; }
.card--record .record__row:last-child { padding-bottom: 0; }

@media (min-width: 768px) {
  .card--record .record__row { grid-template-columns: calc(52 * var(--px)) minmax(0, 1fr); }
}

/* documento (Privacidade, 404): uma coluna de leitura */
.doc {
  max-width: 46rem;
  padding-block: calc(12 * var(--px)) calc(8 * var(--px));
}

.doc > .lead { margin-bottom: calc(10 * var(--px)); }

.doc section + section { margin-top: calc(10 * var(--px)); }

.doc__title {
  margin-bottom: calc(3 * var(--px));
  padding-bottom: calc(2 * var(--px));
  font-size: 1.5rem;
  line-height: round(1.3em, var(--px));
  background: linear-gradient(90deg, var(--ink) 50%, transparent 0) left bottom / calc(2 * var(--px)) var(--px) repeat-x;
}

.doc p + p,
.doc p + .facts { margin-top: calc(3 * var(--px)); }

/* ---------- rodapé: tinta, com o horizonte próprio (serra, agulhas de cristal) entrando nele ---------- */

.site-footer {
  --focus: var(--gold);
  position: relative;
  margin-top: calc(44 * var(--px));
  background: var(--ink);
  color: var(--paper);
}

/* o horizonte do rodapé: 32 pixels de arte sobre o papel, o pé dele já na tinta; preso na margem como a cena */
.site-footer::before {
  content: "";
  position: absolute;
  top: calc(-32 * var(--px));
  left: calc(var(--wrap-left) - 240 * var(--px));
  right: 0;
  height: calc(32 * var(--px));
  background: url("art/ground.png?v=aa55aea88c") left top / calc(480 * var(--px)) calc(32 * var(--px)) repeat-x;
  image-rendering: pixelated;
  pointer-events: none;
}

.site-footer__in {
  display: grid;
  gap: calc(5 * var(--px));
  padding-block: calc(8 * var(--px)) calc(10 * var(--px));
}

.site-footer__brand {
  font-size: 0.9375rem;
  line-height: round(1.6em, var(--px));
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: calc(2 * var(--px)) calc(6 * var(--px));
}

/* largura arredondada na grade: a régua da página atual (um bloco na grade, e não o sublinhado do texto, que segue a
   linha de base da fonte e cai em fração de pixel a 1,25) */
.site-footer__links a {
  position: relative;
  display: block;
  width: fit-content;
  width: calc-size(fit-content, round(up, size, var(--px)));
  font-family: var(--font-pixel);
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: round(1.65em, var(--px));
  text-decoration: none;
}

.site-footer__links a:hover,
.site-footer__lang a:hover { color: var(--gold); }

.site-footer__links a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-1 * var(--px));
  height: var(--px);
  background: var(--gold);
}

.site-footer__lang {
  padding-top: calc(4 * var(--px));
  font-size: 0.9375rem;
  line-height: round(1.6em, var(--px));
  color: var(--steel-pale);
  background: linear-gradient(90deg, var(--ink-soft) 50%, transparent 0) left top / calc(2 * var(--px)) var(--px) repeat-x;
}

.site-footer__lang-current { color: var(--paper); }

.site-footer__lang a {
  color: var(--paper);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: var(--px);
  text-underline-offset: var(--px);
}

@media (min-width: 768px) {
  .site-footer__in {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
  .site-footer__lang { grid-column: 1 / -1; }
}