/* Nexeus Games: pixel art neutra e clara, feita para servir de moldura a jogos de qualquer gênero.
   Papel quente, grafite, um azul de destaque e amarelo nos detalhes. Bordas em degrau de 4 px e sombras duras de
   pixel; títulos em fonte pixelada (Tiny5, Pixelify Sans) e texto corrido em IBM Plex Sans.
   A cena do topo (céu, nuvens, dirigível, balão, pássaros e cidade) usa os sprites de static/img/sprites.
   As abas de cada jogo usam o tema do próprio jogo (games/<slug>/theme.css), dentro de .game-area. */
:root {
  --nx-bg: #e9e6df;
  --nx-card: #f7f5f0;
  --nx-paper: #fbfaf7;
  --nx-ink: #1f2126;
  --nx-ink-2: #2d3036;
  --nx-dim: #5c606a;
  --nx-line: #c9c6bd;
  --nx-shade: rgba(31, 33, 38, 0.2);
  --nx-blue: #2f5bd3;
  --nx-blue-dark: #2447a8;
  --nx-blue-soft: #e3e9fb;
  --nx-yellow: #f0b92d;
  --nx-sky-top: #cfdcef;
  --nx-sky-mid: #e3e9f0;
  --nx-px: 4px;
  --nx-display: "Tiny5", "Pixelify Sans", "Courier New", monospace;
  --nx-pixel: "Pixelify Sans", "Courier New", monospace;
  --nx-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --nx-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --wrap: 1200px;
  --nx-gap: clamp(20px, 2.4vw, 32px);
  --nx-section: clamp(56px, 8vw, 112px);
  /* Borda em degrau: quatro sombras de 4 px formam os cantos recortados. */
  --nx-edge: 0 calc(-1 * var(--nx-px)) 0 0 var(--nx-ink), 0 var(--nx-px) 0 0 var(--nx-ink),
    calc(-1 * var(--nx-px)) 0 0 0 var(--nx-ink), var(--nx-px) 0 0 0 var(--nx-ink);
  --nx-edge-thin: 0 -2px 0 0 var(--nx-ink), 0 2px 0 0 var(--nx-ink), -2px 0 0 0 var(--nx-ink), 2px 0 0 0 var(--nx-ink);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background-color: var(--nx-bg);
  /* Grade de pixels bem leve, como papel quadriculado. */
  background-image:
    linear-gradient(rgba(31, 33, 38, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31, 33, 38, 0.045) 1px, transparent 1px);
  background-size: 24px 24px;
  color: var(--nx-ink);
  font-family: var(--nx-body);
  font-size: clamp(16px, 0.35vw + 15px, 18px);
  line-height: 1.65;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(16px, 3vw, 32px); }
[id] { scroll-margin-top: 96px; }
.nx a { color: var(--nx-blue); text-underline-offset: 3px; }
.nx a:hover { color: var(--nx-blue-dark); }
.nx :focus-visible { outline: 3px solid var(--nx-yellow); outline-offset: 2px; }
.nx-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nx-skip {
  position: absolute; left: 8px; top: -60px; z-index: 110;
  background: var(--nx-yellow); color: var(--nx-ink) !important; padding: 8px 14px; font-family: var(--nx-pixel); text-decoration: none;
}
.nx-skip:focus { top: 8px; }
.nx-icon { display: block; height: auto; }

/* ---------- peças pixeladas ---------- */
.nx-panel {
  position: relative; background: var(--nx-card); margin: var(--nx-px);
  box-shadow: var(--nx-edge), calc(3 * var(--nx-px)) calc(3 * var(--nx-px)) 0 0 var(--nx-shade);
}
.nx-pad { padding: clamp(20px, 2.4vw, 30px); }

.nx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin: var(--nx-px);
  font-family: var(--nx-pixel); font-weight: 700; font-size: 1.05rem; line-height: 1.2; letter-spacing: 0.02em;
  color: var(--nx-ink) !important; text-decoration: none; text-align: center;
  padding: 11px 20px 10px; background: var(--nx-card);
  box-shadow: var(--nx-edge), inset 0 calc(-1 * var(--nx-px)) 0 0 rgba(31, 33, 38, 0.12), 0 calc(2 * var(--nx-px)) 0 0 var(--nx-ink);
  transition: transform 0.08s steps(2), background-color 0.12s;
}
.nx-btn:hover { transform: translateY(-2px); background: #fff; }
.nx-btn:active { transform: translateY(var(--nx-px)); box-shadow: var(--nx-edge); }
/* Botão principal (a classe mantém o nome histórico "red"): azul de destaque. */
.nx-btn-red { background: var(--nx-blue); color: #fff !important;
  box-shadow: var(--nx-edge), inset 0 calc(-1 * var(--nx-px)) 0 0 var(--nx-blue-dark), inset 0 var(--nx-px) 0 0 rgba(255, 255, 255, 0.22), 0 calc(2 * var(--nx-px)) 0 0 var(--nx-ink); }
.nx-btn-red:hover { background: #3a68e6; }
.nx-btn-icon { width: 26px; height: auto; }
.nx-link { font-family: var(--nx-pixel); font-weight: 600; }

/* ---------- tipografia ---------- */
.nx-kicker {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 16px;
  font-family: var(--nx-pixel); font-weight: 600; font-size: 0.98rem; letter-spacing: 0.04em; color: var(--nx-dim);
}
.nx-kicker::before { content: ""; flex: 0 0 auto; width: 12px; height: 12px; background: var(--nx-blue); box-shadow: 4px 4px 0 var(--nx-yellow); }
.nx-title {
  margin: 0; font-family: var(--nx-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(2.7rem, 7.6vw, 6.2rem); line-height: 0.95; letter-spacing: 0.04em; color: var(--nx-ink);
  text-shadow: 5px 5px 0 var(--nx-blue); overflow-wrap: anywhere;
}
.nx-title-page { font-size: clamp(2.1rem, 5.4vw, 4rem); text-shadow: 4px 4px 0 var(--nx-blue); }
.nx-tagline { margin: 22px 0 0; max-width: 540px; font-size: clamp(1.08rem, 1.6vw, 1.3rem); color: var(--nx-ink-2); }
.nx-nowrap { white-space: nowrap; }
.nx-caret { display: inline-block; width: 0.5em; height: 1.05em; margin-left: 6px; vertical-align: -0.16em; background: var(--nx-blue); animation: nx-blink 1.1s steps(1) infinite; }
@keyframes nx-blink { 50% { opacity: 0; } }
.nx-index {
  display: inline-block; margin: 0 0 12px; padding: 2px 8px;
  font-family: var(--nx-pixel); font-weight: 700; font-size: 0.9rem; color: #fff; background: var(--nx-ink);
}
.nx-heading {
  margin: 0 0 12px; font-family: var(--nx-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.75rem, 4vw, 2.8rem); line-height: 1.05; letter-spacing: 0.04em; color: var(--nx-ink); overflow-wrap: anywhere;
}
.nx-heading.nx-small { font-size: clamp(1.35rem, 2.6vw, 1.8rem); margin-top: 8px; }
.nx-subheading { margin: 0 0 12px; font-family: var(--nx-pixel); font-weight: 700; font-size: 1.25rem; }
.nx-lead { margin: 0 0 28px; max-width: 780px; color: var(--nx-dim); font-size: 1.06rem; }
.nx-lead-strong { color: var(--nx-ink-2); font-size: clamp(1.1rem, 1.6vw, 1.3rem); }
.nx-meta { margin: 0; font-family: var(--nx-mono); font-size: 0.85rem; color: var(--nx-dim); }
.nx-label { display: inline-block; font-family: var(--nx-pixel); font-weight: 600; font-size: 0.9rem; color: var(--nx-dim); }
.nx-small-print { margin: 0; font-size: 0.9rem; color: var(--nx-dim); }

/* ---------- topo ---------- */
.nx-header {
  position: sticky; top: 0; z-index: 50; background: var(--nx-card);
  box-shadow: 0 var(--nx-px) 0 0 var(--nx-ink), 0 calc(2 * var(--nx-px)) 0 0 var(--nx-shade);
}
.nx-header-inner { display: flex; align-items: center; gap: 16px; min-height: 70px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
.nx-brand {
  display: inline-flex; align-items: center; gap: 12px; margin: 0;
  font-family: var(--nx-display); font-size: 1.45rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--nx-ink) !important; text-decoration: none; white-space: nowrap;
}
.nx-mark { display: block; width: 44px; height: auto; image-rendering: pixelated; }
.nx-brand:hover .nx-mark { animation: nx-hop 0.4s steps(3); }
@keyframes nx-hop { 50% { transform: translateY(-4px); } }
.nx-nav { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.nx-tabs { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.nx-tab {
  padding: 6px 11px; font-family: var(--nx-pixel); font-weight: 600; font-size: 1rem;
  color: var(--nx-ink) !important; text-decoration: none; white-space: nowrap;
}
.nx-tab:hover { background: var(--nx-bg); }
.nx-tab[aria-current] { background: var(--nx-ink); color: var(--nx-card) !important; box-shadow: var(--nx-edge-thin); }
.nx-menu-btn {
  display: none; align-items: center; gap: 10px; margin-left: auto; padding: 8px 14px;
  font-family: var(--nx-pixel); font-weight: 700; font-size: 1rem; color: var(--nx-ink); background: var(--nx-card);
  border: 0; cursor: pointer; box-shadow: var(--nx-edge-thin);
}
.nx-burger, .nx-burger::before, .nx-burger::after { display: block; width: 18px; height: 3px; background: var(--nx-ink); content: ""; }
.nx-burger { position: relative; }
.nx-burger::before { position: absolute; top: -6px; }
.nx-burger::after { position: absolute; top: 6px; }
.nx-header.is-open .nx-burger { background: transparent; }
.nx-header.is-open .nx-burger::before { top: 0; transform: rotate(45deg); }
.nx-header.is-open .nx-burger::after { top: 0; transform: rotate(-45deg); }

/* Menu de idiomas (details/summary). */
.nx-lang { position: relative; }
.nx-lang summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px; font-family: var(--nx-pixel); font-weight: 700; color: var(--nx-ink); background: var(--nx-card); box-shadow: var(--nx-edge-thin);
}
.nx-lang summary:hover { background: var(--nx-bg); }
.nx-lang summary::-webkit-details-marker { display: none; }
.nx-lang summary::after { content: ""; border: 5px solid transparent; border-top-color: var(--nx-ink); margin-top: 5px; }
.nx-lang[open] summary::after { border-top-color: transparent; border-bottom-color: var(--nx-ink); margin: -5px 0 0; }
.nx-lang ul {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; min-width: 230px; white-space: nowrap;
  margin: 0; padding: 6px; list-style: none; background: var(--nx-card);
  box-shadow: var(--nx-edge), 10px 10px 0 0 var(--nx-shade);
  animation: nx-pop 0.16s steps(3);
}
@keyframes nx-pop { from { transform: translateY(-6px); opacity: 0; } }
.nx-lang li a { display: flex; gap: 12px; align-items: center; padding: 6px 10px; text-decoration: none; color: var(--nx-ink) !important; }
.nx-lang li a:hover { background: var(--nx-bg); }
.nx-lang li a[aria-current] { background: var(--nx-blue-soft); }
.nx-code { min-width: 26px; font-family: var(--nx-pixel); font-weight: 700; color: var(--nx-blue); }

/* ---------- cena: céu, sprites e cidade ---------- */
.nx-hero, .nx-page-head {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, var(--nx-sky-top) 0%, var(--nx-sky-mid) 60%, var(--nx-bg) 100%);
}
.nx-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; will-change: transform; }
.nx-sprite { position: absolute; left: 0; height: auto; }
/* As nuvens atravessam a tela da esquerda para a direita; os atrasos negativos já as espalham no primeiro quadro. */
.nx-cloud { animation: nx-drift linear infinite; }
.nx-cloud-1 { top: 6%; width: clamp(150px, 17vw, 240px); animation-duration: 110s; animation-delay: -30s; }
.nx-cloud-2 { top: 22%; width: clamp(110px, 12vw, 170px); animation-duration: 140s; animation-delay: -95s; opacity: 0.92; }
.nx-cloud-3 { top: 40%; width: clamp(100px, 10vw, 150px); animation-duration: 95s; animation-delay: -60s; opacity: 0.85; }
.nx-cloud-4 { top: 12%; width: clamp(80px, 8vw, 120px); animation-duration: 160s; animation-delay: -10s; opacity: 0.8; }
.nx-blimp { top: 30%; width: clamp(120px, 13vw, 190px); animation: nx-drift 75s linear infinite, nx-bob 4s steps(4) infinite; animation-delay: -48s, 0s; }
.nx-balloon { top: 16%; left: auto; right: 6%; width: clamp(56px, 6vw, 96px); animation: nx-float 7s ease-in-out infinite; }
.nx-birds { top: 10%; width: clamp(60px, 6vw, 90px); animation: nx-drift 45s linear infinite, nx-bob 1.2s steps(2) infinite; animation-delay: -12s, 0s; }
@keyframes nx-drift { from { translate: -30vw 0; } to { translate: 110vw 0; } }
@keyframes nx-bob { 50% { transform: translateY(-6px); } }
@keyframes nx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-22px); } }

/* Halo claro atrás dos textos do topo: as nuvens passam por trás sem atrapalhar a leitura. */
.nx-hero-text, .nx-page-head-inner > div:last-child {
  background: radial-gradient(closest-side, rgba(233, 238, 244, 0.92), rgba(233, 238, 244, 0.75) 60%, rgba(233, 238, 244, 0));
  padding: 12px 18px; margin: -12px -18px;
}
.nx-page-head .nx-cloud { opacity: 0.6; }
.nx-city { position: relative; z-index: 0; height: clamp(150px, 21vw, 300px); pointer-events: none; }
.nx-city-small { height: clamp(90px, 11vw, 150px); }
.nx-city-far {
  position: absolute; left: 0; right: 0; bottom: 18%; height: 62%; opacity: 0.5;
  background: url("../img/skyline.png?v=03a08d7a3e") repeat-x left bottom / auto 100%; image-rendering: pixelated;
}
.nx-city-near { position: absolute; inset: 0; background: url("../img/sprites/city.webp?v=dfcde62dfe") repeat-x center bottom / auto 100%; }
.nx-city::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 4px; background: var(--nx-ink); }
/* Paralaxe leve ligada à rolagem, sem JavaScript: o céu anda mais devagar que a página e a cidade de trás mais devagar
   que a da frente. Roda na placa de vídeo; navegador sem suporte mostra a cena parada. */
@supports (animation-timeline: scroll()) {
  .nx-sky, .nx-city-far { animation-timing-function: linear; animation-fill-mode: both; animation-timeline: scroll(root); animation-range: 0 150vh; }
  .nx-sky { animation-name: nx-parallax-sky; }
  .nx-city-far { will-change: transform; animation-name: nx-parallax-far; }
  @keyframes nx-parallax-sky { from { transform: none; } to { transform: translate3d(0, 37.5vh, 0); } }
  @keyframes nx-parallax-far { from { transform: none; } to { transform: translate3d(0, 18vh, 0); } }
}

/* ---------- topo do portal ---------- */
.nx-hero-inner {
  position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px); align-items: center; padding-top: clamp(40px, 7vw, 96px); padding-bottom: 12px;
}
.nx-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.nx-hero-art { display: flex; flex-direction: column; align-items: center; gap: 22px; }
/* Tela de jogo com a marca: moldura em degrau e fundo quadriculado em azul claro. */
.nx-screen {
  width: min(100%, 440px); aspect-ratio: 4 / 3; display: grid; place-items: center; margin: 6px;
  background-color: var(--nx-blue-soft);
  background-image: linear-gradient(rgba(47, 91, 211, 0.12) 2px, transparent 2px), linear-gradient(90deg, rgba(47, 91, 211, 0.12) 2px, transparent 2px);
  background-size: 22px 22px;
  box-shadow: 0 -6px 0 0 var(--nx-ink), 0 6px 0 0 var(--nx-ink), -6px 0 0 0 var(--nx-ink), 6px 0 0 0 var(--nx-ink),
    inset 0 0 0 6px var(--nx-card), 16px 16px 0 0 var(--nx-shade);
}
.nx-screen-small { width: min(100%, 340px); justify-self: center; }
.nx-hero-mark { width: 64%; height: auto; image-rendering: pixelated; animation: nx-bob 2.4s steps(4) infinite; }
.nx-hotbar { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
.nx-hotbar li {
  position: relative; width: 64px; height: 64px; display: grid; place-items: center; background: var(--nx-card);
  box-shadow: var(--nx-edge), inset -4px -4px 0 0 var(--nx-line);
  animation: nx-select-lift 4s steps(1) infinite;
}
.nx-hotbar li > * { position: relative; }
/* Destaque do item selecionado numa camada própria que só muda de opacidade: opacidade e transform rodam na placa
   de vídeo. Animar a borda (box-shadow) obrigava o navegador a recalcular a página inteira a cada quadro. */
.nx-hotbar li::before {
  content: ""; position: absolute; inset: 0; opacity: 0; background: var(--nx-blue-soft);
  box-shadow: 0 -4px 0 0 var(--nx-blue), 0 4px 0 0 var(--nx-blue), -4px 0 0 0 var(--nx-blue), 4px 0 0 0 var(--nx-blue), inset -4px -4px 0 0 var(--nx-line);
  animation: nx-select-glow 4s steps(1) infinite; animation-delay: inherit;
}
.nx-hotbar li:nth-child(2) { animation-delay: 1s; }
.nx-hotbar li:nth-child(3) { animation-delay: 2s; }
.nx-hotbar li:nth-child(4) { animation-delay: 3s; }
/* O item selecionado da barra muda a cada segundo, como num jogo. */
@keyframes nx-select-lift { 0%, 24% { transform: translateY(-4px); } 25%, 100% { transform: none; } }
@keyframes nx-select-glow { 0%, 24% { opacity: 1; } 25%, 100% { opacity: 0; } }
.nx-hotbar img { image-rendering: pixelated; }

/* ---------- topo das páginas internas ---------- */
.nx-page-head-inner {
  position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(18px, 3vw, 36px);
  align-items: center; padding-top: clamp(40px, 6vw, 80px); padding-bottom: 8px;
}
.nx-head-icon {
  width: clamp(88px, 10vw, 128px); aspect-ratio: 1; display: grid; place-items: center; background: var(--nx-card); margin: 6px;
  box-shadow: var(--nx-edge), 10px 10px 0 0 var(--nx-shade);
}
.nx-head-icon .nx-icon { width: 70%; animation: nx-bob 2.6s steps(4) infinite; }
.nx-page-head .nx-lead { margin: 18px 0 0; color: var(--nx-ink-2); }

/* ---------- seções ---------- */
.nx-section { padding: var(--nx-section) 0; }
.nx-alt { background: var(--nx-card); box-shadow: 0 calc(-1 * var(--nx-px)) 0 0 var(--nx-ink), 0 var(--nx-px) 0 0 var(--nx-ink); }
.nx-two { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.nx-two-even { grid-template-columns: 1fr 1fr; margin-top: 40px; }
.nx-stack { display: grid; gap: 28px; }
.nx-more { margin: 36px 0 0; }
.nx-mail { margin: 8px 0 0; font-family: var(--nx-pixel); font-weight: 700; font-size: 1.2rem; overflow-wrap: anywhere; }
.nx-contact p { color: var(--nx-dim); }
.nx-contact .nx-icon, .nx-pad > .nx-icon { width: 56px; margin-bottom: 10px; }

/* Cartões com ícone. */
.nx-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--nx-gap); }
.nx-cards-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.nx-card { display: flex; flex-direction: column; gap: 8px; padding: 24px 24px 26px; color: var(--nx-ink) !important; text-decoration: none; }
.nx-card .nx-icon { width: 60px; margin-bottom: 6px; transition: transform 0.2s steps(3); }
.nx-card h3 { margin: 0; font-family: var(--nx-pixel); font-weight: 700; font-size: 1.25rem; line-height: 1.25; }
.nx-card p { margin: 0; color: var(--nx-dim); }
.nx-card-cta { margin-top: auto; padding-top: 10px; font-family: var(--nx-pixel); font-weight: 700; color: var(--nx-blue); }
.nx-card-cta::after { content: " >"; }
a.nx-card { transition: transform 0.12s steps(2); }
a.nx-card:hover { transform: translate(-3px, -3px); }
a.nx-card:hover .nx-icon, article.nx-card:hover .nx-icon { transform: translateY(-4px) rotate(-4deg); }

/* Cartões dos jogos. */
.nx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--nx-gap); }
.nx-game { display: flex; flex-direction: column; }
.nx-game-cover { position: relative; display: block; overflow: hidden; border-bottom: var(--nx-px) solid var(--nx-ink); }
.nx-cover-img { position: relative; display: block; width: 100%; aspect-ratio: 1024 / 500; object-fit: contain; transition: transform 0.3s steps(3); }
/* Fundo da capa: a própria imagem desfocada, visível só quando a coluna é mais alta que a capa (cartão em destaque). */
.nx-cover-fill { display: none; }
.nx-game:hover .nx-cover-img { transform: scale(1.04); }
.nx-game-body { padding: clamp(20px, 2.4vw, 30px); display: flex; flex-direction: column; gap: 12px; flex: 1; }
.nx-game-head { display: flex; align-items: center; gap: 14px; }
.nx-game-head img { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 12px; box-shadow: 0 0 0 3px var(--nx-ink); }
.nx-game h3, .nx-press-game h3 { margin: 0; font-family: var(--nx-display); font-weight: 400; font-size: clamp(1.6rem, 2.6vw, 2rem); letter-spacing: 0.04em; text-transform: uppercase; }
.nx-game p { margin: 0; color: var(--nx-dim); }
.nx-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.nx-tag { padding: 0 8px; font-family: var(--nx-pixel); font-size: 0.85rem; font-weight: 600; background: var(--nx-bg); box-shadow: var(--nx-edge-thin); margin: 2px; }
.nx-status { margin: 0; padding: 0; list-style: none; font-size: 0.95rem; }
.nx-status li { display: flex; gap: 12px; align-items: baseline; padding: 5px 0; border-bottom: 2px dashed var(--nx-line); }
.nx-status .nx-label { min-width: 78px; color: var(--nx-ink); }
.nx-actions { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; margin-top: auto; padding-top: 10px; }
/* Um jogo só na vitrine: cartão em destaque, com a capa ao lado. */
.nx-game:only-child { grid-column: 1 / -1; flex-direction: row; }
.nx-game:only-child .nx-game-cover { flex: 0 0 55%; border-bottom: 0; border-right: var(--nx-px) solid var(--nx-ink); }
.nx-game:only-child .nx-cover-img { height: 100%; aspect-ratio: auto; }
.nx-game:only-child .nx-cover-fill { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(22px) saturate(1.15); transform: scale(1.2); }

/* Faixa de contato. */
.nx-band { background: var(--nx-blue-soft); box-shadow: 0 calc(-1 * var(--nx-px)) 0 0 var(--nx-ink), 0 var(--nx-px) 0 0 var(--nx-ink); padding: clamp(40px, 5vw, 64px) 0; }
.nx-band-inner { display: flex; align-items: center; gap: clamp(18px, 3vw, 36px); flex-wrap: wrap; }
.nx-band-inner > div { flex: 1 1 320px; }
.nx-band-inner p { margin: 0; color: var(--nx-ink-2); }
.nx-band-icon { width: clamp(72px, 8vw, 96px); animation: nx-bob 2.2s steps(4) infinite; }

/* Notas, fichas e listas. */
.nx-note { margin: 0; padding: 16px 20px; max-width: 900px; background: var(--nx-blue-soft); border-left: 8px solid var(--nx-blue); }
.nx-note-icon { display: flex; align-items: center; gap: 14px; margin-top: 40px; }
.nx-note-icon .nx-icon { width: 40px; flex: 0 0 auto; }
.nx-facts { margin: 0; }
.nx-facts > div { display: grid; grid-template-columns: minmax(120px, 0.8fr) minmax(0, 1.6fr); gap: 12px; padding: 10px 0; border-bottom: 2px dashed var(--nx-line); }
.nx-facts dt { font-family: var(--nx-pixel); font-weight: 700; }
.nx-facts dd { margin: 0; overflow-wrap: anywhere; }
.nx-checklist { list-style: none; counter-reset: nx-step; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.nx-checklist li { counter-increment: nx-step; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: start; }
.nx-checklist li::before {
  content: counter(nx-step); width: 34px; height: 34px; display: grid; place-items: center;
  font-family: var(--nx-pixel); font-weight: 700; color: #fff; background: var(--nx-blue); box-shadow: var(--nx-edge-thin);
}

/* Imprensa. */
.nx-brand-kit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(240px, 0.9fr); gap: var(--nx-gap); align-items: stretch; }
.nx-mark-tile { display: grid; place-items: center; padding: 36px; margin: var(--nx-px); box-shadow: var(--nx-edge); }
.nx-mark-tile img { width: min(100%, 260px); image-rendering: pixelated; }
.nx-mark-light { background: var(--nx-card); }
.nx-mark-blue { background: var(--nx-blue); }
.nx-downloads { display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.nx-swatches { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.nx-swatches li { display: flex; align-items: center; gap: 12px; }
.nx-swatch { width: 44px; height: 44px; flex: 0 0 auto; box-shadow: var(--nx-edge-thin); }
.nx-swatches code { font-family: var(--nx-mono); }
/* Cartão do jogo na imprensa: capa inteira em cima; embaixo, texto e download de um lado e a ficha do outro. */
.nx-press-game { overflow: hidden; margin-top: 24px; }
.nx-press-cover { display: block; width: 100%; height: auto; aspect-ratio: 1024 / 500; object-fit: cover; border-bottom: var(--nx-px) solid var(--nx-ink); }
.nx-press-game .nx-pad { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(24px, 4vw, 56px); align-items: start; }
.nx-press-game .nx-pad > .nx-facts { grid-column: 2; grid-row: 1 / span 4; }
.nx-press-game .nx-pad > :not(.nx-facts) { grid-column: 1; }
.nx-press-game p { margin: 12px 0; }

/* Central jurídica. */
.nx-updated { margin-bottom: 26px; }
.nx-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--nx-gap); margin-bottom: 44px; }
.nx-docs-two { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
.nx-doc { display: flex; flex-direction: column; gap: 8px; padding: 24px; text-decoration: none; color: var(--nx-ink) !important; }
.nx-doc .nx-icon { width: 52px; }
.nx-doc strong { font-family: var(--nx-pixel); font-weight: 700; font-size: 1.3rem; }
.nx-doc span:not(.nx-label) { color: var(--nx-dim); }
.nx-doc .nx-label { color: #fff; background: var(--nx-ink); padding: 0 8px; align-self: flex-start; }
.nx-doc em { margin-top: 6px; font-style: normal; font-family: var(--nx-pixel); font-weight: 700; color: var(--nx-blue); }
a.nx-doc { transition: transform 0.12s steps(2); }
a.nx-doc:hover { transform: translate(-3px, -3px); }
div.nx-doc a { font-family: var(--nx-pixel); font-weight: 700; font-size: 1.1rem; }
.nx-steps { list-style: none; margin: 12px 0 30px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: var(--nx-gap); }
.nx-steps li { display: flex; gap: 14px; }
.nx-step-n {
  flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center;
  font-family: var(--nx-pixel); font-weight: 700; color: #fff; background: var(--nx-blue); box-shadow: var(--nx-edge-thin);
}
.nx-steps strong { display: block; font-family: var(--nx-pixel); font-weight: 700; font-size: 1.15rem; }
.nx-steps p { margin: 4px 0 0; color: var(--nx-dim); font-size: 0.97rem; }
.nx-faq-layout { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.nx-faq { border-top: 4px solid var(--nx-ink); }
.nx-faq-item { border-bottom: 2px solid var(--nx-line); }
.nx-faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; font-weight: 600; }
.nx-faq-item summary::-webkit-details-marker { display: none; }
.nx-faq-item summary::after {
  content: "+"; flex: 0 0 auto; width: 26px; height: 26px; display: grid; place-items: center;
  font-family: var(--nx-pixel); font-weight: 700; color: #fff; background: var(--nx-ink); line-height: 1;
}
.nx-faq-item[open] summary::after { content: "\2212"; background: var(--nx-blue); }
.nx-faq-item[open] p { animation: nx-pop 0.2s steps(3); }
.nx-faq-item p { margin: 0 0 18px; color: var(--nx-dim); max-width: 720px; }
.nx-faq-layout aside { position: sticky; top: 104px; }

/* ---------- documento jurídico ---------- */
.nx-doc-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 40px; padding-top: 48px; padding-bottom: 80px; align-items: start; }
/* Colunas da grade não crescem além da tela por causa de uma palavra longa (alemão, russo). */
.nx-doc-layout > * { min-width: 0; }
.nx-side { position: sticky; top: 104px; }
.nx-side ul { list-style: none; margin: 0; padding: 0; }
.nx-side li a { display: block; padding: 6px 12px; text-decoration: none; color: var(--nx-ink) !important; font-size: 0.95rem; }
.nx-side li a:hover { background: var(--nx-card); }
.nx-side li a[aria-current] { background: var(--nx-ink); color: var(--nx-card) !important; }
.nx-side-group { padding: 16px 12px 4px; font-family: var(--nx-pixel); font-weight: 700; font-size: 0.9rem; color: var(--nx-dim); }
.nx-paper {
  padding: clamp(28px, 5vw, 60px); margin: var(--nx-px);
  background: var(--nx-paper); color: var(--nx-ink); font-size: 1.02rem; line-height: 1.7;
  overflow-wrap: break-word; hyphens: auto;
  box-shadow: var(--nx-edge), calc(3 * var(--nx-px)) calc(3 * var(--nx-px)) 0 0 var(--nx-shade);
}
.nx-paper h1 { margin: 0 0 10px; font-family: var(--nx-pixel); font-weight: 700; font-size: clamp(1.8rem, 4vw, 2.5rem); line-height: 1.12; }
.nx-paper h2 {
  margin: 44px 0 12px; padding-top: 18px; font-family: var(--nx-pixel); font-weight: 700; font-size: 1.4rem;
  background: linear-gradient(90deg, var(--nx-ink) 0 48px, var(--nx-line) 48px 100%) top left / 100% 4px no-repeat;
}
.nx-paper h3 { margin: 24px 0 6px; font-size: 1.05rem; font-weight: 700; }
.nx-paper p, .nx-paper ul, .nx-paper ol, .nx-paper dl { margin: 0 0 14px; }
.nx-paper ul, .nx-paper ol { padding-left: 24px; }
.nx-paper li { margin-bottom: 6px; }
.nx-paper a { overflow-wrap: anywhere; }
.nx-paper .meta { margin: 0 0 24px; font-family: var(--nx-mono); font-size: 0.85rem; color: var(--nx-dim); }
.nx-paper .owner { margin: 0 0 24px; padding: 14px 18px; background: var(--nx-card); border: 2px dashed var(--nx-line); }
.nx-paper .owner p { margin: 0 0 4px; }
.nx-paper .summary { margin: 28px var(--nx-px); padding: 20px 24px 8px; background: var(--nx-blue-soft);
  box-shadow: 0 -4px 0 0 var(--nx-blue), 0 4px 0 0 var(--nx-blue), -4px 0 0 0 var(--nx-blue), 4px 0 0 0 var(--nx-blue); }
.nx-paper .summary > p:first-child strong { font-family: var(--nx-pixel); font-size: 1.05rem; color: var(--nx-blue-dark); }
.nx-paper .toc { margin: 0 0 12px; padding: 18px 22px 8px; background: var(--nx-card); }
.nx-paper .toc > p { margin: 0 0 8px; font-family: var(--nx-pixel); font-weight: 700; }
.nx-paper .toc ol { columns: 2; column-gap: 32px; margin: 0; }
.nx-paper .toc li { break-inside: avoid; }
.nx-paper dt { font-weight: 700; margin-top: 12px; }
.nx-paper dd { margin: 0 0 6px; }
.nx-back { margin: 40px 0 0 !important; font-family: var(--nx-pixel); font-weight: 700; }

/* ---------- 404 ---------- */
.nx-lost { min-height: 64vh; display: flex; flex-direction: column; justify-content: center; padding: 80px clamp(16px, 3vw, 32px); max-width: var(--wrap); margin: 0 auto; }
.nx-lost-sprite .nx-icon { width: 120px; margin-bottom: 18px; animation: nx-search 3s steps(6) infinite; }
@keyframes nx-search { 0%, 100% { transform: translateX(0) rotate(0); } 33% { transform: translateX(24px) rotate(8deg); } 66% { transform: translateX(-12px) rotate(-6deg); } }
.nx-lost .nx-lead { margin: 22px 0 26px; color: var(--nx-ink-2); }

/* ---------- rodapé: a cidade à noite ---------- */
.nx-footer { background: var(--nx-ink); color: #c9c6bd; padding: 0 0 30px; font-size: 0.95rem; margin-top: 0; }
.nx-footer-city {
  height: clamp(90px, 12vw, 150px); margin-bottom: 44px;
  background: url("../img/sprites/city.webp?v=dfcde62dfe") repeat-x center bottom / auto 100%, linear-gradient(180deg, #2b3552 0%, var(--nx-ink) 100%);
  filter: brightness(0.62) saturate(0.8);
  box-shadow: 0 var(--nx-px) 0 0 #3d4047;
}
.nx-cols { display: grid; grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: 32px; }
.nx-footer h2 { margin: 0 0 12px; font-family: var(--nx-pixel); font-weight: 700; font-size: 1.05rem; color: var(--nx-yellow); }
.nx-footer ul { list-style: none; margin: 0; padding: 0; }
.nx-footer li { margin-bottom: 8px; }
.nx-footer a { color: #e9e6df !important; text-decoration: none; }
.nx-footer a:hover { text-decoration: underline; text-decoration-color: var(--nx-yellow); }
.nx-sub { display: block; font-size: 0.88rem; }
.nx-footer .nx-brand { color: #fff !important; font-size: 1.3rem; margin-bottom: 14px; }
.nx-quote { margin: 0; max-width: 320px; }
.nx-legal-line { margin: 40px 0 0; padding-top: 18px; border-top: 2px dashed #3d4047; font-family: var(--nx-mono); font-size: 0.8rem; }

/* ---------- entrada animada dos blocos (só com JavaScript) ---------- */
.reveal [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.45s steps(5), transform 0.45s steps(5); }
.reveal [data-reveal].is-visible { opacity: 1; transform: none; }
.reveal .nx-cards > :nth-child(3n+2), .reveal .nx-steps > :nth-child(2) { transition-delay: 0.08s; }
.reveal .nx-cards > :nth-child(3n+3), .reveal .nx-steps > :nth-child(3) { transition-delay: 0.16s; }
.reveal .nx-steps > :nth-child(4) { transition-delay: 0.24s; }

/* ---------- telas grandes ---------- */
@media (min-width: 1600px) {
  :root { --wrap: 1360px; }
}

/* ---------- telas médias e estreitas ---------- */
@media (max-width: 1100px) {
  .nx-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nx-cols > :first-child { grid-column: 1 / -1; }
  .nx-brand-kit { grid-template-columns: 1fr 1fr; }
  .nx-downloads { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
}
/* O menu do topo recolhe atrás do botão "Menu" (com JavaScript; sem ele, o menu fica aberto). */
@media (max-width: 1023px) {
  .js .nx-menu-btn { display: inline-flex; }
  .nx-nav { width: 100%; margin-left: 0; flex-wrap: wrap; justify-content: space-between; }
  .js .nx-nav { display: none; padding: 8px 0 14px; }
  .js .nx-header.is-open .nx-nav { display: flex; animation: nx-pop 0.18s steps(3); }
  .js .nx-tabs { flex-direction: column; align-items: stretch; width: 100%; }
  .js .nx-tab { padding: 10px 12px; font-size: 1.1rem; }
  .nx-doc-layout { grid-template-columns: 1fr; gap: 24px; }
  .nx-side { position: static; }
  .nx-side ul { display: flex; flex-wrap: wrap; gap: 4px 8px; }
  .nx-side-group { width: 100%; padding: 8px 12px 0; }
}
@media (max-width: 860px) {
  .nx-hero-inner, .nx-two, .nx-two-even, .nx-faq-layout { grid-template-columns: 1fr; }
  .nx-hero-art { order: -1; }
  .nx-screen { width: min(100%, 360px); }
  .nx-faq-layout aside { position: static; }
  .nx-game:only-child { flex-direction: column; }
  .nx-game:only-child .nx-game-cover { flex: none; border-right: 0; border-bottom: var(--nx-px) solid var(--nx-ink); }
  .nx-game:only-child .nx-cover-img { height: auto; aspect-ratio: 1024 / 500; }
  .nx-game:only-child .nx-cover-fill { display: none; }
  .nx-press-game .nx-pad { grid-template-columns: 1fr; }
  .nx-press-game .nx-pad > .nx-facts { grid-column: 1; grid-row: auto; }
  .nx-paper .toc ol { columns: 1; }
  .nx-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nx-balloon { display: none; }
}
@media (max-width: 560px) {
  /* No celular o topo rola junto com a página para não ocupar a tela. */
  .nx-header { position: relative; }
  [id] { scroll-margin-top: 0; }
  .nx-brand { font-size: 1.2rem; }
  .nx-mark { width: 38px; }
  .nx-lang { position: static; }
  .nx-lang ul { left: 0; right: 0; top: calc(100% + 6px); min-width: 0; }
  .nx-nav { position: relative; }
  .nx-hotbar li { width: 54px; height: 54px; }
  .nx-page-head-inner { grid-template-columns: 1fr; }
  .nx-head-icon { width: 80px; }
  .nx-brand-kit { grid-template-columns: 1fr; }
  .nx-facts > div { grid-template-columns: 1fr; gap: 2px; }
  .nx-cols { grid-template-columns: 1fr; }
  .nx-btn { font-size: 1rem; }
  .nx-hero-actions .nx-btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  /* Sem movimento, cada sprite do céu fica parado num ponto próprio em vez de todos no canto. */
  .nx-cloud-1 { translate: 40vw 0; }
  .nx-cloud-2 { translate: 88vw 0; }
  .nx-cloud-3 { translate: 62vw 0; }
  .nx-cloud-4 { translate: 74vw 0; }
  .nx-blimp { translate: 42vw 0; }
  .nx-birds { translate: 30vw 0; }
}

/* Lista curta de contatos (telefone, endereço) dentro dos painéis de contato. */
.nx-facts-compact { margin-top: 14px; }
.nx-facts-compact > div { grid-template-columns: minmax(90px, 0.6fr) minmax(0, 1.6fr); padding: 6px 0; }