/* Hallmark · shape: Split Studio · genre: playful · theme: brand (material from Arcade: hard offsets, 2px rules, the screen, the cursor row) · redesign: full
 * paper: #0B101C · accent: #3CE0BD · display: Sora · body: Inter · hero: Poster (Cinema direction chosen by the owner: full-bleed scene with letterbox bars) · nav: slab · footer: mast · job: join (the home ends on contact and communities) · signature: the featured game on a screen with its play button set into the cabinet
 * axes: dark/geometric-sans/chromatic-teal · posture: full-palette · contrast: pass · fold: pass · draw: 09d7ac · v2.0.0 */
/* Hallmark · pre-emit critique: P3 H3 E3 S3 R2 V3 · weakest: R, no real art yet; every picture is a slot the owner's files replace */
/* Hallmark · waive 64 · .meta carries dates, platforms and file sizes only · the studio brief names JetBrains Mono for dates and game metadata */
/* Hallmark · waive 81 · the about page keeps one empty data-slot for the developer photo · the brief keeps it as a placeholder until the studio sends the picture */
/* Hallmark · waive 3 · ul.grade holds game cards with 630x500 covers, no icons · the brief asks for a card grid on the games page */
/* Hallmark · waive 59 · the 64px gap is the page heading sitting on its own list · inner pages open on their catalogue, not on a separate section */
/* Hallmark · waive 44c · inner pages open on their list in the Index posture · the games, devlog and about pages lead with their catalogue, the home keeps the Counter hero */
/* Hallmark · waive 77 · the controls table and the related posts run full width as rows · these lists are the game page's reference blocks, kept plain on purpose */
/* Hallmark · waive 79 · the post page opens straight into its reading column · a devlog article needs no first-screen hero */
/* Hallmark · dropped [logo-claro.svg], [logo-escuro.svg] · the press kit download links now point to the studio logo files the owner sent */
/* Hallmark · waive 23 · the large teal star is the stand-in key art inside each opening scene · the studio replaces it with the real game art, which carries its own colours */
/* Hallmark · waive 78 · the post page sets its subheads at --text-2xl inside a 46rem reading column · a devlog article reads as one long text, not as page sections */
/* Hallmark · waive 68 · each game card and capture keeps one cover slot · the brief asks for a 630x500 cover on every game card; the owner drops the covers in */
@import url("./tokens.css");
@import url("./base.css");

/* =========================================================
   LM Scenova Studio, protótipo
   Mobile first; de 60rem (960px) para cima é desktop.
   ========================================================= */

body { line-height: 1.6; }
h1, h2, h3 { color: var(--color-ink); }
a { text-decoration-thickness: var(--rule-bar); text-decoration-color: var(--color-accent); }
a:hover { color: var(--color-mint); }
:focus-visible { outline: var(--rule-bar) solid var(--color-focus); outline-offset: 3px; }

.pular {
  position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-modal);
  background: var(--color-accent); color: var(--color-accent-ink); padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-pill); font-weight: 600; text-decoration: none;
}
.pular:focus { top: var(--space-sm); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Texto ---------- */
.titulo-pagina { font-size: var(--text-display); max-width: 16ch; }
.titulo-secao { font-size: var(--text-section); }
.lead { color: var(--color-muted); }
.leitura { font-size: var(--text-lead); line-height: 1.7; }
.pequeno { font-size: var(--text-sm); line-height: 1.5; }
.suave { color: var(--color-muted); }
.rotulo { font-size: var(--text-sm); font-weight: 600; color: var(--color-muted); }
.meta { font-family: var(--font-outlier); font-size: var(--text-xs); color: var(--color-muted); font-variant-numeric: tabular-nums; }

/* ---------- Botões: superfície de apertar (pílula, sombra dura deslocada) ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 48px; padding: var(--space-sm) var(--space-lg);
  border: var(--rule-bar) solid var(--color-ink); border-radius: var(--radius-pill);
  font: 600 var(--text-md)/1.2 var(--font-body); text-decoration: none; cursor: pointer;
  box-shadow: var(--shadow-press);
  transition: translate var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
}
.botao svg { width: 18px; height: 18px; flex: none; }
.botao:hover { translate: -2px -2px; box-shadow: var(--shadow-press-up); }
.botao:active { translate: 3px 3px; box-shadow: var(--shadow-press-down); }
.botao:focus-visible { outline-offset: 4px; }
.botao:disabled, .botao[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; translate: none; box-shadow: none; }
.botao--primario { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); }
.botao--primario:hover { color: var(--color-accent-ink); background: var(--color-mint); border-color: var(--color-mint); }
.botao--secundario { background: var(--color-paper); color: var(--color-ink); }
.botao--secundario:hover { color: var(--color-ink); }
.acoes { display: flex; flex-wrap: wrap; gap: var(--space-md); }
@media (max-width: 40rem) { .acoes--cheias .botao { width: 100%; } }

.link { color: var(--color-ink); font-weight: 600; text-decoration-line: underline; }
.link:hover { color: var(--color-accent); }
.link:active { color: var(--color-mint); }

/* ---------- Etiqueta de status ---------- */
.selo {
  display: inline-flex; align-items: center; align-self: flex-start; gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-tag);
  border: var(--rule-hair) solid var(--color-rule-strong);
  font: 600 var(--text-xs)/1.4 var(--font-body); color: var(--color-ink); white-space: nowrap;
}
.selo--lancado { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.selo--desenvolvimento { border-color: var(--color-accent-2); color: var(--color-ink-2); }
.selo--jam { border-color: var(--color-rule-strong); color: var(--color-ink); }

/* ---------- A tela: espaço da arte, com linhas de varredura ---------- */
.tela { position: relative; isolation: isolate; overflow: hidden; background: var(--color-paper-3); }
.tela > svg, .tela > img { width: 100%; height: 100%; object-fit: cover; }
.tela::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background-image: repeating-linear-gradient(to bottom, transparent 0 2px, var(--color-shade) 2px 3px);
}
.tela--capa { aspect-ratio: 630 / 500; }
.tela--wide { aspect-ratio: 16 / 9; }
.vazio-arte { display: grid; place-content: center; justify-items: center; gap: var(--space-xs); width: 100%; height: 100%; color: var(--color-muted); text-align: center; padding: var(--space-md); font-size: var(--text-xs); }
.vazio-arte svg { width: 32px; height: 32px; color: var(--color-rule-strong); }

/* ---------- Navegação em barra (slab) ---------- */
.nav-slab { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper-2); border-bottom: var(--rule-bar) solid var(--color-rule); }
.nav-slab__barra { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 72px; }
.logo { display: inline-flex; align-items: center; gap: var(--space-sm); color: var(--color-ink); text-decoration: none; }
.logo:hover { color: var(--color-ink); }
.logo__estrela { width: 24px; height: 24px; }
.logo__nome { font: 600 var(--text-lg)/1 var(--font-display); letter-spacing: 0.02em; }
.logo__selo { font: 500 var(--text-xs)/1 var(--font-outlier); color: var(--color-accent); border: var(--rule-hair) solid var(--color-accent); border-radius: var(--radius-pill); padding: var(--space-2xs) var(--space-xs); }
.nav-slab nav { align-self: stretch; display: flex; }
.nav-slab__lista { display: flex; align-items: stretch; list-style: none; margin: 0; padding: 0; }
.nav-slab__link {
  display: flex; align-items: center; height: 100%; padding-inline: var(--space-lg); color: var(--color-muted);
  font-weight: 600; text-decoration: none; border-left: var(--rule-hair) solid var(--color-rule);
  transition: background-color var(--dur-micro) steps(1), color var(--dur-micro) steps(1);
}
.nav-slab__lista li:last-child .nav-slab__link { border-right: var(--rule-hair) solid var(--color-rule); }
.nav-slab__link:hover { color: var(--color-ink); background: var(--color-paper-3); }
.nav-slab__link:active { background: var(--color-rule); }
.nav-slab__link[aria-current="page"] { color: var(--color-accent-ink); background: var(--color-accent); }
.botao-menu {
  display: none; width: 48px; height: 48px; border-radius: var(--radius-pill);
  border: var(--rule-bar) solid var(--color-ink); background: var(--color-paper); color: var(--color-ink);
  align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-press);
  transition: translate var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out);
}
.botao-menu:hover { translate: -2px -2px; box-shadow: var(--shadow-press-up); }
.botao-menu:active { translate: 3px 3px; box-shadow: var(--shadow-press-down); }
.botao-menu svg { width: 24px; height: 24px; }
@media (max-width: 60rem) {
  .nav-slab__barra { flex-wrap: wrap; padding-block: var(--space-sm); }
  .nav-slab__link { padding-inline: var(--space-sm); min-height: 44px; }
  .js .nav-slab nav { display: none; }
  .js .botao-menu { display: inline-flex; }
}

.menu-mobile { position: fixed; inset: 0; z-index: var(--z-modal); background: var(--color-paper); display: flex; flex-direction: column; overflow-y: auto; }
.menu-mobile[hidden] { display: none; }
.menu-mobile__topo { display: flex; align-items: center; justify-content: space-between; padding: var(--space-sm) var(--gutter); background: var(--color-paper-2); border-bottom: var(--rule-bar) solid var(--color-rule); }
.menu-mobile__links { list-style: none; margin: 0; padding: 0; }
.menu-mobile__links a {
  display: flex; align-items: center; justify-content: space-between; padding: var(--space-lg) var(--gutter);
  border-bottom: var(--rule-hair) solid var(--color-rule); color: var(--color-ink); text-decoration: none;
  font: 600 var(--text-2xl)/1.1 var(--font-display); letter-spacing: var(--tracking-display);
}
.menu-mobile__links a:hover { background: var(--color-paper-3); }
.menu-mobile__links a[aria-current="page"] { background: var(--color-accent); color: var(--color-accent-ink); }
.menu-mobile__redes { margin-top: auto; padding: var(--space-xl) var(--gutter); display: flex; flex-direction: column; gap: var(--space-md); }

/* ---------- Seções: texto de um lado, prova do outro ---------- */
.secao { padding-block-end: var(--section-gap); }
.split { display: grid; gap: var(--space-xl); }
.split__texto { display: flex; flex-direction: column; gap: var(--space-lg); align-items: flex-start; }
.split__texto p { max-width: 48ch; }
@media (min-width: 60rem) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: start; }
  .split__texto { position: sticky; top: calc(72px + var(--space-xl)); }
}

/* ---------- Hero (Counter): o título de um lado, a tela do jogo do outro ---------- */
.hero { display: grid; gap: var(--space-xl); padding-block: var(--space-xl) var(--section-gap); }
.hero__texto { display: flex; flex-direction: column; gap: var(--space-lg); align-items: flex-start; }
.hero__titulo { font-size: clamp(3rem, 5.6vw, 5.5rem); line-height: 0.98; max-width: 10.5ch; }
@media (min-width: 60rem) {
  .hero { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; min-height: calc(100svh - 74px); padding-block: var(--space-2xl); margin-block-end: var(--space-2xl); }
}
.gabinete { display: flex; flex-direction: column; border: var(--rule-bar) solid var(--color-rule-strong); border-radius: var(--radius-card); background: var(--color-paper-2); overflow: hidden; }
.gabinete .tela { aspect-ratio: 16 / 10; border-bottom: var(--rule-bar) solid var(--color-rule-strong); }
.gabinete__painel { display: grid; gap: var(--space-md); padding: var(--space-lg); }
.gabinete__nome { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.gabinete__nome h2 { font-size: var(--text-title); }
@media (min-width: 40rem) { .gabinete__painel { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }

/* ---------- Menu de seleção (lista com a linha de cursor) ---------- */
.menu-jogos { list-style: none; margin: 0; padding: 0; border-top: var(--rule-bar) solid var(--color-rule); }
.menu-jogos li { border-bottom: var(--rule-hair) solid var(--color-rule); }
.linha {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-md); align-items: center;
  padding: var(--space-md); color: var(--color-ink); text-decoration: none;
  transition: background-color var(--dur-micro) steps(1), color var(--dur-micro) steps(1);
}
.linha .tela { width: 96px; border-radius: var(--radius-tag); }
.linha__texto { display: flex; flex-direction: column; gap: var(--space-2xs); min-width: 0; }
.linha__nome { font: 600 var(--text-title)/1.2 var(--font-display); letter-spacing: -0.01em; }
.linha__extra { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.linha:hover, .linha:focus-visible { background: var(--color-accent); color: var(--color-accent-ink); outline-offset: -2px; }
.linha:hover .suave, .linha:focus-visible .suave, .linha:hover .meta, .linha:focus-visible .meta { color: var(--color-accent-ink); }
.linha:hover .selo, .linha:focus-visible .selo { border-color: var(--color-accent-ink); color: var(--color-accent-ink); background: transparent; }
.linha:active { background: var(--color-mint); }
@media (min-width: 60rem) {
  .linha { grid-template-columns: 128px minmax(0, 1fr) auto; padding: var(--space-md) var(--space-lg) var(--space-md) var(--space-md); }
  .linha .tela { width: 128px; }
  .linha__extra { flex-direction: column; align-items: flex-end; }
}

/* ---------- Índice de posts ---------- */
.indice { list-style: none; margin: 0; padding: 0; border-top: var(--rule-bar) solid var(--color-rule); }
.indice li { border-bottom: var(--rule-hair) solid var(--color-rule); }
.indice a {
  display: grid; gap: var(--space-xs); padding: var(--space-lg) var(--space-md); color: var(--color-ink); text-decoration: none;
  transition: background-color var(--dur-micro) steps(1), color var(--dur-micro) steps(1);
}
.indice a:hover, .indice a:focus-visible { background: var(--color-accent); color: var(--color-accent-ink); outline-offset: -2px; }
.indice a:hover .suave, .indice a:hover .meta, .indice a:focus-visible .suave, .indice a:focus-visible .meta { color: var(--color-accent-ink); }
.indice a:active { background: var(--color-mint); }
.indice__titulo { font: 600 var(--text-title)/1.25 var(--font-display); letter-spacing: -0.01em; }
@media (min-width: 60rem) {
  .indice a { grid-template-columns: 9rem minmax(0, 1fr) 10rem; gap: var(--space-lg); align-items: baseline; padding: var(--space-lg); }
  .indice__cat { text-align: right; }
}

/* ---------- Destaque de post ---------- */
.post-destaque { display: grid; border: var(--rule-bar) solid var(--color-rule-strong); border-radius: var(--radius-card); overflow: hidden; background: var(--color-paper-2); color: var(--color-ink); text-decoration: none; transition: translate var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.post-destaque .tela { border-bottom: var(--rule-bar) solid var(--color-rule-strong); }
.post-destaque:hover { translate: -2px -2px; box-shadow: var(--shadow-press-up); color: var(--color-ink); }
.post-destaque:active { translate: 2px 2px; box-shadow: var(--shadow-press-down); }
.post-destaque__texto { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-lg); }
.post-destaque__titulo { font: 600 var(--text-2xl)/1.15 var(--font-display); letter-spacing: -0.02em; }
@media (min-width: 60rem) {
  .post-destaque--largo { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .post-destaque--largo .tela { border-bottom: 0; border-right: var(--rule-bar) solid var(--color-rule-strong); }
  .post-destaque--largo .post-destaque__texto { justify-content: center; padding: var(--space-xl); }
}

/* ---------- Faixa verde-água (uma por página) ---------- */
.faixa { background: var(--color-accent); color: var(--color-accent-ink); padding-block: var(--space-3xl); margin-block-end: var(--section-gap); }
.faixa h2, .faixa p { color: var(--color-accent-ink); }
.faixa__grade { display: grid; gap: var(--space-xl); }
@media (min-width: 60rem) { .faixa__grade { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: end; } }
.faixa .botao { background: var(--color-paper); color: var(--color-ink); border-color: var(--color-paper); box-shadow: 4px 4px 0 var(--color-accent-ink); }
.faixa .botao:hover { box-shadow: 6px 6px 0 var(--color-accent-ink); color: var(--color-ink); }
.faixa .botao:active { box-shadow: 1px 1px 0 var(--color-accent-ink); }
.faixa :focus-visible { outline-color: var(--color-accent-ink); }
.redes { display: flex; flex-wrap: wrap; gap: var(--space-md); list-style: none; margin: 0; padding: 0; }

/* ---------- Cabeçalho de página interna ---------- */
.cabecalho-pagina { display: grid; gap: var(--space-lg); padding-block: var(--space-2xl); }
.cabecalho-pagina .lead { max-width: 44ch; }
@media (min-width: 60rem) { .cabecalho-pagina { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: var(--space-3xl); padding-block: var(--space-3xl) var(--space-2xl); } }

/* ---------- Cards de jogo (página Jogos) ---------- */
.grade { display: grid; gap: var(--gap-columns); grid-template-columns: minmax(0, 1fr); list-style: none; margin: 0; padding: 0; }
@media (min-width: 40rem) { .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card {
  position: relative; display: flex; flex-direction: column; height: 100%;
  background: var(--color-paper-2); color: var(--color-ink); border: var(--rule-bar) solid var(--color-rule-strong); border-radius: var(--radius-card); overflow: hidden;
  transition: translate var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.card .tela { border-bottom: var(--rule-bar) solid var(--color-rule-strong); }
.card__conteudo { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-lg); flex: 1; }
.card__nome { font: 600 var(--text-title)/1.2 var(--font-display); letter-spacing: -0.01em; }
.card__link { color: var(--color-ink); text-decoration: none; }
.card__link::after { content: ""; position: absolute; inset: 0; z-index: 4; }
.card__link:focus-visible { outline: none; }
.card:has(.card__link:hover) { translate: -2px -2px; box-shadow: var(--shadow-press-up); border-color: var(--color-accent); }
.card:has(.card__link:active) { translate: 2px 2px; box-shadow: var(--shadow-press-down); }
.card:has(.card__link:focus-visible) { outline: var(--rule-bar) solid var(--color-focus); outline-offset: 4px; }
.card__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs); margin-top: auto; padding-top: var(--space-sm); }

.filtro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-md); margin-block-end: var(--space-xl); border-block: var(--rule-hair) solid var(--color-rule); }
.filtro[hidden] { display: none; }
.filtro__botoes { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.filtro__botao {
  min-height: 44px; padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill);
  border: var(--rule-bar) solid var(--color-rule-strong); background: transparent; color: var(--color-muted);
  font: 600 var(--text-sm)/1.2 var(--font-body); cursor: pointer;
  transition: background-color var(--dur-micro) steps(1), color var(--dur-micro) steps(1), border-color var(--dur-micro) steps(1);
}
.filtro__botao:hover { color: var(--color-ink); border-color: var(--color-ink); }
.filtro__botao:active { background: var(--color-paper-3); }
.filtro__botao:disabled { opacity: 0.5; cursor: not-allowed; }
.filtro__botao[aria-pressed="true"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.vazio { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm); padding: var(--space-xl); border: var(--rule-bar) dashed var(--color-rule-strong); border-radius: var(--radius-card); }
.vazio[hidden] { display: none; }

/* ---------- Página do jogo ---------- */
.trilha { display: flex; flex-wrap: wrap; gap: var(--space-xs); list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); color: var(--color-muted); }
.trilha li + li::before { content: "/"; margin-inline-end: var(--space-xs); color: var(--color-rule-strong); }
.trilha a { color: var(--color-ink); }
.trailer { display: grid; place-items: center; aspect-ratio: 16 / 9; border: var(--rule-bar) solid var(--color-rule-strong); border-radius: var(--radius-card); }
.trailer__conteudo { position: relative; z-index: 3; display: grid; justify-items: center; gap: var(--space-sm); color: var(--color-muted); font-size: var(--text-sm); }
.trailer__play { display: grid; place-items: center; width: 72px; height: 72px; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); box-shadow: var(--shadow-press); }
.trailer__play svg { width: 28px; height: 28px; }
.capturas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); list-style: none; margin: 0; padding: 0; }
@media (min-width: 60rem) { .capturas { gap: var(--gap-columns); } }
.capturas a { display: block; border-radius: var(--radius-card); border: var(--rule-bar) solid var(--color-rule-strong); overflow: hidden; transition: border-color var(--dur-micro) var(--ease-out); }
.capturas a:hover { border-color: var(--color-accent); }
.capturas a:active { border-color: var(--color-mint); }
.prosa { display: flex; flex-direction: column; gap: var(--space-lg); }
.destaques { list-style: none; margin: 0; padding: 0; border-top: var(--rule-hair) solid var(--color-rule); }
.destaques li { display: flex; gap: var(--space-sm); padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
.destaques li svg { width: 16px; height: 16px; flex: none; margin-top: var(--space-2xs); color: var(--color-accent); }

.ficha { margin: 0; border-top: var(--rule-bar) solid var(--color-rule); }
.ficha > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-md); padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
.ficha dt { color: var(--color-muted); font-size: var(--text-sm); }
.ficha dd { margin: 0; font-weight: 600; }
.controles { width: 100%; border-collapse: collapse; border-top: var(--rule-bar) solid var(--color-rule); }
.controles th, .controles td { padding: var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule); text-align: left; font-weight: 400; }
.controles td { text-align: right; }
kbd { display: inline-block; min-width: 2.5em; text-align: center; font: 500 var(--text-sm)/1.4 var(--font-outlier); color: var(--color-ink); background: var(--color-paper-3); border: var(--rule-bar) solid var(--color-rule-strong); border-bottom-width: 4px; border-radius: var(--radius-tag); padding: var(--space-2xs) var(--space-xs); }

/* ---------- Post ---------- */
.artigo { max-width: calc(46rem + 2 * var(--gutter)); margin-inline: auto; padding: var(--space-2xl) var(--gutter) var(--section-gap); display: flex; flex-direction: column; gap: var(--space-lg); }
.artigo h1 { font-size: var(--text-display-s); max-width: 22ch; }
.artigo__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-md); }
.artigo__capa { border-radius: var(--radius-card); border: var(--rule-bar) solid var(--color-rule-strong); }
.texto-longo { display: flex; flex-direction: column; gap: var(--space-lg); font-size: var(--text-lead); line-height: 1.7; }
.texto-longo h2 { font-size: var(--text-2xl); margin-top: var(--space-md); }
.texto-longo a { color: var(--color-ink); }
.texto-longo ul { margin: 0; padding-left: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-xs); }
.texto-longo li::marker { color: var(--color-accent); }
.texto-longo blockquote { margin: 0; padding: var(--space-lg); border: var(--rule-bar) solid var(--color-rule-strong); border-radius: var(--radius-card); font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.35; }
.texto-longo figure { margin: 0; display: flex; flex-direction: column; gap: var(--space-xs); }
.texto-longo figure .tela { border-radius: var(--radius-card); border: var(--rule-bar) solid var(--color-rule-strong); }
.texto-longo figcaption { font-size: var(--text-sm); color: var(--color-muted); }
.gif-selo { position: absolute; top: var(--space-sm); left: var(--space-sm); z-index: 3; font: 600 var(--text-xs)/1.4 var(--font-body); background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule-strong); border-radius: var(--radius-tag); padding: var(--space-2xs) var(--space-xs); }
.codigo { border: var(--rule-bar) solid var(--color-rule-strong); border-radius: var(--space-sm); overflow: hidden; background: var(--color-paper-2); }
.codigo__barra { padding: var(--space-xs) var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); font: 400 var(--text-xs)/1.5 var(--font-outlier); color: var(--color-muted); }
.codigo pre { margin: 0; padding: var(--space-md); overflow-x: auto; font: 400 var(--text-sm)/1.7 var(--font-outlier); }
.tk-com { color: var(--color-muted); } .tk-kw { color: var(--color-accent-2); } .tk-fn { color: var(--color-mint); } .tk-str { color: var(--color-accent); } .tk-num { color: var(--color-ink-2); }
.relacionado { position: relative; display: grid; gap: var(--space-md); padding: var(--space-md); border: var(--rule-bar) solid var(--color-rule-strong); border-radius: var(--radius-card); background: var(--color-paper-2); }
.relacionado .tela { border-radius: var(--space-sm); }
@media (min-width: 40rem) { .relacionado { grid-template-columns: 10rem minmax(0, 1fr); align-items: center; } }
.relacionado__texto { display: flex; flex-direction: column; gap: var(--space-xs); align-items: flex-start; }

/* ---------- Sobre ---------- */
.ferramentas { list-style: none; margin: 0; padding: 0; border-top: var(--rule-bar) solid var(--color-rule); }
.ferramentas li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.ferramentas strong { font: 600 var(--text-lg)/1.3 var(--font-display); }
.logos { display: grid; gap: var(--space-md); }
@media (min-width: 40rem) { .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.logo-amostra { margin: 0; border: var(--rule-bar) solid var(--color-rule-strong); border-radius: var(--radius-card); overflow: hidden; }
.logo-amostra__area { display: grid; place-items: center; min-height: 10rem; padding: var(--space-lg); background: var(--color-paper); }
.logo-amostra__area--claro { background: var(--color-light-paper); }
.logo-amostra__area--claro .logo { color: var(--color-light-ink); }
.logo-amostra__area--claro .logo__selo { color: var(--color-light-accent); border-color: var(--color-light-accent); }
.logo-amostra figcaption { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); background: var(--color-paper-2); border-top: var(--rule-hair) solid var(--color-rule); }
.arquivos { list-style: none; margin: 0; padding: 0; border-top: var(--rule-bar) solid var(--color-rule); }
.arquivos li { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
.pilha { display: flex; flex-direction: column; gap: var(--space-xl); }
.formulario { display: flex; flex-direction: column; gap: var(--space-lg); padding: var(--space-lg); background: var(--color-paper-2); border: var(--rule-bar) solid var(--color-rule-strong); border-radius: var(--radius-card); }
@media (min-width: 60rem) { .formulario { padding: var(--space-xl); } }
.campo { display: flex; flex-direction: column; gap: var(--space-xs); }
.campo label { font-weight: 600; }
.campo input, .campo textarea {
  width: 100%; min-height: 52px; padding: var(--space-sm) var(--space-md); border-radius: var(--space-sm);
  background: var(--color-paper); border: var(--rule-bar) solid var(--color-rule-strong); color: var(--color-ink); font-size: var(--text-md);
  transition: border-color var(--dur-micro) var(--ease-out);
}
.campo textarea { min-height: 9rem; resize: vertical; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--color-muted); }
.campo input:hover, .campo textarea:hover { border-color: var(--color-muted); }
.campo input:focus, .campo textarea:focus { border-color: var(--color-accent); outline: var(--rule-bar) solid var(--color-focus); outline-offset: 2px; }
.campo input:disabled, .campo textarea:disabled { opacity: 0.5; cursor: not-allowed; }
.campo__ajuda { font-size: var(--text-sm); color: var(--color-muted); }
.campo--erro input, .campo--erro textarea { border-color: var(--color-error); }
.campo--erro .campo__ajuda { color: var(--color-error); }

/* ---------- 404 ---------- */
.nao-encontrada { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-lg); padding-block: var(--space-3xl) var(--section-gap); }
.nao-encontrada__numero { font: 600 clamp(6rem, 18vw, 14rem)/0.9 var(--font-display); letter-spacing: -0.05em; color: var(--color-accent); }
.nao-encontrada h1 { max-width: 14ch; }

/* ---------- Rodapé (mast): o nome grande sobre os links ---------- */
.rodape { background: var(--color-paper-2); border-top: var(--rule-bar) solid var(--color-rule); padding-block: var(--space-2xl) var(--space-lg); }
.rodape__nome { display: block; font: 600 clamp(3rem, 11.5vw, 11rem)/0.9 var(--font-display); letter-spacing: -0.045em; color: var(--color-ink); text-decoration: none; margin-block-end: var(--space-xl); }
.rodape__nome:hover { color: var(--color-accent); }
.rodape__links { display: grid; gap: var(--space-xl); grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
@media (min-width: 60rem) { .rodape__links { grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr)); } }
.rodape__links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-xs); }
.rodape__links h2 { font: 600 var(--text-sm)/1.4 var(--font-body); color: var(--color-muted); margin-block-end: var(--space-sm); letter-spacing: 0; }
.rodape__links a { color: var(--color-ink); text-decoration: none; }
.rodape__links a:hover { color: var(--color-accent); text-decoration: underline; }
.rodape__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-xs); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.rodape__base a { color: var(--color-muted); }
@media (max-width: 40rem) { .rodape__slogan { grid-column: 1 / -1; } }

/* ajustes da revisão visual */
.split__texto .ficha { align-self: stretch; }
.capturas a, .linha, .post-destaque { text-decoration: none; }
main > .faixa:last-child { margin-block-end: 0; }
@media (min-width: 60rem) { .hero--interna { min-height: 0; padding-block: var(--space-3xl) var(--space-2xl); } }

/* revisão final: cabeça de seção em linha, capas na Início, cena numerada, rodapé enxuto */
.cabeca-secao { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-lg); margin-block-end: var(--space-xl); }
.cabeca-secao__texto { display: flex; flex-direction: column; gap: var(--space-sm); }
.cabeca-secao__texto p { max-width: 52ch; }
.hero__titulo { text-wrap: pretty; max-width: none; }
.acoes--centro { align-items: center; gap: var(--space-lg); }
.cena {
  position: absolute; top: var(--space-sm); left: var(--space-sm); z-index: 3;
  font: 500 var(--text-xs)/1.4 var(--font-outlier); color: var(--color-ink);
  background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule-strong); border-radius: var(--radius-tag); padding: var(--space-2xs) var(--space-xs);
}
.arte-provisoria { background: var(--color-paper-2); }
.devlog-home { display: grid; gap: var(--gap-columns); }
@media (min-width: 60rem) { .devlog-home { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } }
.indice--compacto a { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); padding: var(--space-md); }
.indice--compacto .indice__cat { text-align: left; }
.hero--interna { margin-block-end: 0; }
@media (min-width: 60rem) { .hero--interna { padding-block: var(--space-2xl); } }
.ferramentas { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--gap-columns); border-top: 0; }
.ferramentas li { border-top: var(--rule-hair) solid var(--color-rule); border-bottom: 0; }
@media (min-width: 40rem) { .ferramentas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .ferramentas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rodape__linha { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-md); padding-block: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.rodape__lista { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); list-style: none; margin: 0; padding: 0; }
.rodape__lista a { color: var(--color-ink); text-decoration: none; font-weight: 600; }
.rodape__lista a:hover { color: var(--color-accent); text-decoration: underline; }
.rodape__redes { padding-block: var(--space-md) var(--space-lg); }
.rodape__redes a { color: var(--color-muted); font-weight: 400; }

/* tela de título provisória */
.tela-titulo { position: relative; z-index: 1; display: grid; place-content: center; justify-items: center; gap: var(--space-md); width: 100%; height: 100%; padding: var(--space-lg); text-align: center; background: var(--color-paper-2); }
.tela-titulo__estrela svg { width: 40px; height: 40px; color: var(--color-accent); }
.tela-titulo__nome { font: 600 clamp(1.75rem, 3.4vw, 3.25rem)/1.05 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); max-width: 14ch; text-wrap: balance; }
.tela-titulo__aperte { font: 500 var(--text-sm)/1.4 var(--font-outlier); color: var(--color-muted); }

/* 404: tinta clara e centralizada na tela */
.nao-encontrada__numero { color: var(--color-ink); }
.nao-encontrada { min-height: calc(100svh - 74px); justify-content: center; padding-block: var(--space-2xl); }

/* ---------- Capas tipográficas provisórias ---------- */
.capa-tipo { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-xs); width: 100%; height: 100%; padding: var(--space-lg); overflow: hidden; }
.capa-tipo__estrela { position: absolute; right: -18%; top: -22%; width: 78%; aspect-ratio: 1; opacity: 0.9; }
.capa-tipo__estrela svg { width: 100%; height: 100%; }
.capa-tipo__nome { position: relative; font: 600 clamp(1.5rem, 2.4vw, 2.25rem)/1.02 var(--font-display); letter-spacing: var(--tracking-display); max-width: 9ch; text-wrap: balance; }
.capa-tipo__pe, .capa-tipo__cat { position: relative; font: 500 var(--text-xs)/1.4 var(--font-outlier); }
.capa-tipo--verde { background: var(--color-accent-deep); color: var(--color-accent-ink); }
.capa-tipo--verde .capa-tipo__estrela { color: var(--color-accent); }
.capa-tipo--azul { background: var(--color-blue-deep); color: var(--color-ink); }
.capa-tipo--azul .capa-tipo__estrela { color: var(--color-accent-2); }
.capa-tipo--grafite { background: var(--color-paper-3); color: var(--color-ink); }
.capa-tipo--grafite .capa-tipo__estrela { color: var(--color-rule-strong); }
.capa-tipo--post { background: var(--color-paper-3); color: var(--color-ink); justify-content: space-between; }
.capa-tipo--post .capa-tipo__cat { color: var(--color-accent); }
.capa-tipo--post .capa-tipo__nome { max-width: 16ch; font-size: clamp(1.75rem, 3vw, 3rem); }
.capa-tipo--post::before { content: ""; position: absolute; inset: auto var(--space-lg) var(--space-lg) auto; width: 30%; height: var(--rule-bar); background: var(--color-accent-2); }
.card .capa-tipo { transition: filter var(--dur-short) var(--ease-out); }
.card:has(.card__link:hover) .capa-tipo { filter: brightness(1.12); }

/* ---------- Um momento: a tela do hero liga ao abrir ---------- */
@keyframes tela-liga { 0% { transform: scaleY(0.01); opacity: 0.6; } 60% { transform: scaleY(1.02); opacity: 1; } 100% { transform: scaleY(1); opacity: 1; } }
@keyframes pisca { 50% { opacity: 0; } }
.tela--liga .tela-titulo { transform-origin: 50% 50%; animation: tela-liga 520ms var(--ease-out) 200ms both; }
.tela--liga .tela-titulo__aperte { animation: pisca 1s steps(1) 900ms 3; }
@media (prefers-reduced-motion: reduce) { .tela--liga .tela-titulo, .tela--liga .tela-titulo__aperte { animation: none; } }

/* ---------- Player do trailer ---------- */
.player { margin: 0; border: var(--rule-bar) solid var(--color-rule-strong); border-radius: var(--radius-card); overflow: hidden; background: var(--color-paper-2); }
.player .tela { border-bottom: var(--rule-bar) solid var(--color-rule-strong); }
.player__play { position: absolute; z-index: 3; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 80px; height: 80px; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); box-shadow: var(--shadow-press); }
.player__play svg { width: 32px; height: 32px; }
.player .tela-titulo { opacity: 0.35; }
.player__barra { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-md); padding: var(--space-sm) var(--space-md); }
.player__icone svg { width: 20px; height: 20px; color: var(--color-ink); }
.player__trilho { height: 4px; border-radius: var(--radius-pill); background: var(--color-rule); overflow: hidden; }
.player__feito { display: block; width: 0; height: 100%; background: var(--color-accent); }

/* trailer: só a estrela atrás do play */
.player .tela-titulo__nome, .player .tela-titulo__aperte { display: none; }
.player .tela-titulo__estrela svg { width: 160px; height: 160px; }
.player .tela-titulo { opacity: 0.5; }

/* ---------- Rodada de visual: profundidade e textura ---------- */
.gabinete { box-shadow: 8px 8px 0 var(--color-accent-2); }
.palco { position: relative; isolation: isolate; border-bottom: var(--rule-hair) solid var(--color-rule); margin-block-end: var(--section-gap); }
.palco::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(var(--color-dot) 1px, transparent 1.6px); background-size: 8px 8px;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 85%); mask-image: linear-gradient(to bottom, black, transparent 85%);
}
.palco .hero { margin-block-end: 0; }
.faixa { position: relative; isolation: isolate; overflow: hidden; }
.faixa::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(var(--color-dot-ink) 1px, transparent 1.6px); background-size: 8px 8px; }
.faixa::after {
  content: ""; position: absolute; z-index: -1; right: -8%; top: -30%; width: min(46%, 36rem); aspect-ratio: 1;
  background: var(--color-accent-deep); opacity: 0.35;
  -webkit-mask: var(--mask-lm) center / contain no-repeat; mask: var(--mask-lm) center / contain no-repeat;
}
.faixa__acoes { display: flex; flex-direction: column; gap: var(--space-xl); }

/* número da cena */
.cena { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: var(--space-2xs) var(--space-sm) var(--space-xs); background: var(--color-paper); }
.cena__rotulo { font: 500 var(--text-xs)/1.4 var(--font-outlier); color: var(--color-muted); }
.cena__num { font: 600 var(--text-2xl)/1 var(--font-display); letter-spacing: -0.04em; color: var(--color-ink); }

/* seletor de idioma */
.idioma {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin-inline-start: var(--space-md);
  font: 500 var(--text-sm)/1 var(--font-outlier); color: var(--color-ink); text-decoration: none;
  border: var(--rule-hair) solid var(--color-rule-strong); border-radius: var(--radius-pill);
}
.idioma:hover { border-color: var(--color-accent); color: var(--color-accent); }
.idioma:active { background: var(--color-paper-3); }
@media (min-width: 60rem) { .nav-slab__barra > nav { margin-inline-start: auto; } }
@media (max-width: 60rem) { .idioma { margin-inline-start: auto; margin-inline-end: var(--space-sm); } }

/* lista de e-mails */
.inscricao { display: flex; flex-direction: column; gap: var(--space-xs); }
.inscricao label { font-weight: 600; }
.inscricao__linha { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.inscricao input {
  flex: 1 1 14rem; min-height: 52px; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-pill);
  border: var(--rule-bar) solid var(--color-accent-ink); background: var(--color-mint); color: var(--color-accent-ink); font-size: var(--text-md);
}
.inscricao input::placeholder { color: var(--color-accent-ink); opacity: 0.7; }
.inscricao input:focus { outline: var(--rule-bar) solid var(--color-accent-ink); outline-offset: 2px; }

/* jogar no site e comprar */
.jogar { display: grid; gap: var(--space-xl); }
@media (min-width: 60rem) { .jogar { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: start; } }
.jogar-web .tela iframe { width: 100%; height: 100%; border: 0; }
.jogar-web__painel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); padding: var(--space-lg); }
.compra { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md); padding: var(--space-lg); border: var(--rule-bar) solid var(--color-rule-strong); border-radius: var(--radius-card); }
.compra h3 { font-size: var(--text-title); }
.compra__widget { display: grid; place-items: center; width: 100%; min-height: 9rem; border: var(--rule-bar) dashed var(--color-rule-strong); border-radius: var(--space-sm); }

/* roteiro */
.roteiro { display: grid; gap: var(--gap-columns); list-style: none; margin: 0; padding: 0; }
@media (min-width: 60rem) { .roteiro { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.roteiro__etapa { display: flex; flex-direction: column; gap: var(--space-md); padding: var(--space-lg); border-top: var(--rule-bar) solid var(--color-rule-strong); background: var(--color-paper-2); border-radius: 0 0 var(--radius-card) var(--radius-card); }
.roteiro__etapa h3 { font-size: var(--text-title); }
.roteiro__etapa ul { margin: 0; padding-left: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-xs); }
.roteiro__etapa--feito ul { color: var(--color-muted); }
.roteiro__etapa--feito li::marker { content: "✓  "; color: var(--color-accent); }
.roteiro__etapa--agora { border-top-color: var(--color-accent); box-shadow: 6px 6px 0 var(--color-accent-2); }
.roteiro__etapa--agora h3 { color: var(--color-accent); }
.roteiro__etapa--depois { border-top-style: dashed; }

/* atualizações */
.atualizacoes { list-style: none; margin: 0; padding: 0; border-top: var(--rule-bar) solid var(--color-rule); }
.atualizacoes li { display: grid; grid-template-columns: 5rem 8rem minmax(0, 1fr); gap: var(--space-md); align-items: baseline; padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.atualizacoes__versao { font: 600 var(--text-lg)/1 var(--font-display); color: var(--color-accent); }
@media (max-width: 40rem) { .atualizacoes li { grid-template-columns: 4rem minmax(0, 1fr); } .atualizacoes li > span:last-child { grid-column: 1 / -1; } }

/* comentários */
.comentarios { display: flex; flex-direction: column; gap: var(--space-md); padding-top: var(--space-xl); border-top: var(--rule-bar) solid var(--color-rule); }
.comentarios h2 { font-size: var(--text-2xl); }
.comentarios__slot { padding: var(--space-xl); border: var(--rule-bar) dashed var(--color-rule-strong); border-radius: var(--radius-card); }

/* apoie, com o mascote */
.apoie { display: grid; gap: var(--space-xl); align-items: center; padding: var(--space-xl); background: var(--color-paper-2); border: var(--rule-bar) solid var(--color-rule-strong); border-radius: var(--radius-card); box-shadow: 8px 8px 0 var(--color-accent-2); }
@media (min-width: 60rem) { .apoie { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-3xl); padding: var(--space-2xl); } }
.apoie__texto { display: flex; flex-direction: column; gap: var(--space-lg); align-items: flex-start; }
.mascote { aspect-ratio: 1; max-width: 22rem; width: 100%; border-radius: 50%; background: var(--color-paper-3); }
.mascote__vazio { display: grid; place-content: center; justify-items: center; gap: var(--space-xs); width: 100%; height: 100%; color: var(--color-muted); font-size: var(--text-sm); }
.mascote__vazio svg { width: 40%; height: auto; color: var(--color-accent); }

/* minijogo da 404 */
.minijogo { width: 100%; max-width: 45rem; margin: var(--space-xl) 0 0; }
.minijogo__tela { display: block; width: 100%; height: auto; cursor: pointer; background: var(--color-paper-2); }
.minijogo__tela:focus-visible { outline-offset: -4px; }
.minijogo__painel { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); border-top: var(--rule-bar) solid var(--color-rule-strong); text-align: left; }

/* modo arcade (código Konami) */
.modo-arcade body::after { content: ""; position: fixed; inset: 0; z-index: var(--z-toast); pointer-events: none; background-image: repeating-linear-gradient(to bottom, transparent 0 2px, var(--color-shade) 2px 3px); }
.modo-arcade .hero__titulo, .modo-arcade .rodape__nome { color: var(--color-accent); }
.aviso-arcade { position: fixed; z-index: var(--z-tooltip); left: 50%; bottom: var(--space-lg); translate: -50% 0; margin: 0; padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font-weight: 600; box-shadow: var(--shadow-press); }

/* 404 com o minijogo cabe na tela */
.nao-encontrada { min-height: 0; padding-block: var(--space-2xl) var(--section-gap); }
.nao-encontrada__numero { font-size: clamp(5rem, 11vw, 9rem); }
.nao-encontrada__texto { display: flex; flex-direction: column; align-items: center; gap: var(--space-lg); }
@media (min-width: 60rem) {
  .nao-encontrada { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; text-align: left; padding-block: var(--space-3xl); }
  .nao-encontrada__texto { align-items: flex-start; }
  .nao-encontrada .minijogo { margin: 0; max-width: none; }
}
@media (min-width: 60rem) { .nao-encontrada { padding-block: var(--space-xl) var(--space-3xl); } .nao-encontrada__numero { font-size: clamp(4.5rem, 8vw, 7rem); } .nao-encontrada h1 { font-size: var(--text-display-s); } }
@media (max-width: 60rem) { .js .nav-slab .idioma { display: none; } }
.idioma--menu { align-self: flex-start; margin: 0; padding-inline: var(--space-md); font-family: var(--font-body); font-weight: 600; }

/* ---------- Tema claro: a frente Web é editorial ---------- */
.tema-claro a:hover, .tema-claro .link:hover { color: var(--color-accent-text); }
.tema-claro .botao--secundario:hover, .tema-claro .botao--primario:hover { color: var(--color-accent-ink); }
.tema-claro .botao--secundario:hover { color: var(--color-ink); }
.tema-claro .rotulo { color: var(--color-accent-text); }
.web-topo { display: grid; gap: var(--space-lg); padding-block: var(--space-3xl) var(--space-2xl); }
.web-topo .titulo-pagina { font-size: clamp(3rem, 7.5vw, 7.5rem); line-height: 0.95; max-width: 12ch; }
.web-topo__texto { display: flex; flex-direction: column; gap: var(--space-lg); align-items: flex-start; }
@media (min-width: 60rem) { .web-topo { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: end; gap: var(--space-3xl); padding-block: var(--space-4xl) var(--space-3xl); } }
.tema-claro .web-topo { border-bottom: var(--rule-bar) solid var(--color-ink); margin-block-end: var(--space-3xl); }

/* serviços em linhas editoriais */
.servicos { list-style: none; margin: 0; padding: 0; border-top: var(--rule-bar) solid var(--color-ink); }
.servico { display: grid; gap: var(--space-md); padding-block: var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
.servico__nome { font-size: var(--text-2xl); max-width: 14ch; }
.servico__desc { color: var(--color-muted); max-width: 40ch; }
.servico__inclui { display: flex; flex-wrap: wrap; gap: var(--space-xs); list-style: none; margin: 0; padding: 0; }
.servico__inclui li { padding: var(--space-2xs) var(--space-sm); border: var(--rule-hair) solid var(--color-rule-strong); border-radius: var(--radius-tag); font-size: var(--text-sm); }
.servico__dados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); margin: 0; }
.servico__dados dt { font-size: var(--text-sm); color: var(--color-muted); }
.servico__dados dd { margin: 0; font-family: var(--font-outlier); font-weight: 500; }
@media (min-width: 60rem) {
  .servico { grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 4fr); align-items: start; gap: var(--space-xl); }
  .servico__inclui { grid-column: 2; }
  .servico__dados { grid-column: 3; grid-row: 1 / span 2; grid-template-columns: minmax(0, 1fr); }
  .servico__desc { grid-column: 2; grid-row: 1; }
}

/* estudos de caso */
.casos { display: flex; flex-direction: column; gap: var(--space-3xl); }
.caso { display: grid; gap: var(--space-xl); }
.caso__imagem { border: var(--rule-bar) solid var(--color-ink); border-radius: var(--radius-card); box-shadow: 8px 8px 0 var(--color-accent-2); }
.caso__texto { display: flex; flex-direction: column; gap: var(--space-md); align-items: flex-start; }
.caso__nome { font-size: var(--text-section); }
.caso__texto .ficha { align-self: stretch; }
@media (min-width: 60rem) { .caso { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; gap: var(--space-3xl); } }

/* processo numerado: é uma sequência real */
.processo { display: grid; gap: var(--gap-columns); list-style: none; margin: 0; padding: 0; counter-reset: passo; }
@media (min-width: 40rem) { .processo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .processo { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.processo li { counter-increment: passo; display: flex; flex-direction: column; gap: var(--space-sm); padding-top: var(--space-md); border-top: var(--rule-bar) solid var(--color-ink); }
.processo li::before { content: counter(passo); font: 600 var(--text-3xl)/1 var(--font-display); color: var(--color-accent-2); }
.processo h3 { font-size: var(--text-title); }

/* perguntas */
.faq { border-top: var(--rule-bar) solid var(--color-ink); }
.faq__item { border-bottom: var(--rule-hair) solid var(--color-rule); }
.faq__item summary { cursor: pointer; padding-block: var(--space-md); font-weight: 600; font-size: var(--text-lg); list-style: none; display: flex; justify-content: space-between; gap: var(--space-md); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; font-family: var(--font-outlier); color: var(--color-accent-2); }
.faq__item[open] summary::after { content: "–"; }
.faq__item summary:hover { color: var(--color-accent-text); }
.faq__item p { padding-bottom: var(--space-md); }

/* select dos formulários */
.campo select { width: 100%; min-height: 52px; padding: var(--space-sm) var(--space-md); border-radius: var(--space-sm); background: var(--color-paper); border: var(--rule-bar) solid var(--color-rule-strong); color: var(--color-ink); font-size: var(--text-md); }
.campo select:hover { border-color: var(--color-muted); }
.campo select:focus { border-color: var(--color-accent); outline: var(--rule-bar) solid var(--color-focus); outline-offset: 2px; }
.tema-claro .formulario { background: var(--color-paper-2); border-color: var(--color-ink); }

/* Início: as duas frentes */
.frentes { display: grid; gap: var(--gap-columns); }
@media (min-width: 60rem) { .frentes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.frente {
  display: flex; flex-direction: column; gap: var(--space-md); align-items: flex-start; min-height: 22rem; padding: var(--space-xl);
  border: var(--rule-bar) solid var(--color-rule-strong); border-radius: var(--radius-card); text-decoration: none; color: var(--color-ink);
  transition: translate var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.frente:hover { translate: -2px -2px; box-shadow: var(--shadow-press-up); color: var(--color-ink); }
.frente:active { translate: 2px 2px; box-shadow: var(--shadow-press-down); }
.frente--jogos { background: var(--color-paper-2); }
.frente--web { border-color: var(--color-ink); }
.frente__titulo { font-size: var(--text-section); }
.frente__lista { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2xs); width: 100%; border-top: var(--rule-hair) solid var(--color-rule); padding-top: var(--space-md); }

.frente--web:focus-visible { outline-color: var(--color-mint); }
.caso__texto .rotulo { margin-top: calc(-1 * var(--space-xs)); }

/* =========================================================
   Direção Cinema
   ========================================================= */
h1, h2 { font-weight: 800; letter-spacing: -0.045em; }
.titulo-secao { line-height: 0.98; }

/* navegação: barra preta discreta */
.nav-slab { background: var(--color-black); border-bottom: var(--rule-hair) solid var(--color-rule); }
.nav-slab__link { border: 0; font: 500 var(--text-sm)/1 var(--font-outlier); color: var(--color-muted); padding-inline: var(--space-md); position: relative; }
.nav-slab__lista li:last-child .nav-slab__link { border: 0; }
.nav-slab__link:hover { background: transparent; color: var(--color-ink); }
.nav-slab__link[aria-current="page"] { background: transparent; color: var(--color-ink); }
.nav-slab__link[aria-current="page"]::after { content: ""; position: absolute; left: var(--space-md); right: var(--space-md); bottom: 22px; height: var(--rule-bar); background: var(--color-accent); }
.logo__estrela { width: 28px; height: 28px; }
.logo__estrela svg { width: 100%; height: 100%; color: var(--color-ink); }

/* a cena */
.abertura { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; background: var(--color-black); }
.abertura--cheia { min-height: calc(100svh - 74px); }
.abertura--curta { min-height: 58svh; margin-block-end: var(--space-2xl); }
.abertura--cheia { margin-block-end: var(--section-gap); }
.abertura__fundo { position: absolute; inset: 0 0 72px; z-index: -2; }
.abertura--curta .abertura__fundo { inset: 0; }
.abertura__arte { position: absolute; inset: 0; background: radial-gradient(60% 80% at 72% 45%, var(--color-glow-teal), transparent 62%), radial-gradient(50% 60% at 96% 100%, var(--color-glow-blue), transparent 62%), var(--color-paper); }
.abertura__arte::after { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(to bottom, transparent 0 2px, var(--color-shade) 2px 3px); }
.abertura__estrela { position: absolute; z-index: 1; width: min(64svh, 42vw); aspect-ratio: 1; right: 12%; top: 50%; translate: 0 -50%; background: var(--color-accent);
  -webkit-mask: var(--mask-lm) center / contain no-repeat; mask: var(--mask-lm) center / contain no-repeat; }
.abertura--curta .abertura__estrela { width: min(44svh, 30vw); right: 8%; }
.abertura::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to right, var(--color-veil) 0%, var(--color-veil-0) 62%), linear-gradient(to top, var(--color-veil) 0%, var(--color-veil-0) 45%); }
.abertura__conteudo { position: relative; margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-lg); padding-block: var(--space-3xl) var(--space-2xl); }
.abertura__titulo { font: 800 clamp(3.5rem, 9.4vw, 10.5rem)/0.86 var(--font-display); letter-spacing: -0.055em; max-width: 9.5ch; text-wrap: balance; }
.abertura__titulo--pagina { font-size: clamp(3.5rem, 11vw, 12rem); max-width: none; }
.abertura__lead { max-width: 40ch; color: var(--color-ink-2); }
.claquete { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); font: 500 var(--text-sm)/1.4 var(--font-outlier); color: var(--color-mint); }
.abertura__barra { position: relative; min-height: 72px; display: flex; align-items: center; background: var(--color-black); border-top: var(--rule-hair) solid var(--color-rule); }
.abertura__barra-interna { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-sm); }
.abertura .trilha a { color: var(--color-ink); }
@media (max-width: 60rem) {
  .abertura__estrela { width: 62vw; right: -12vw; top: 14%; translate: none; opacity: 0.85; }
  .abertura--curta .abertura__estrela { width: 46vw; top: 10%; }
  .abertura__conteudo { padding-block: 40svh var(--space-xl); }
  .abertura--curta .abertura__conteudo { padding-block: 24svh var(--space-xl); }
}

/* jogo em destaque: gameplay e informações */
.destaque { display: grid; gap: var(--space-xl); }
.destaque__info { display: flex; flex-direction: column; gap: var(--space-md); align-items: flex-start; }
.destaque__info .ficha { align-self: stretch; }
@media (min-width: 60rem) { .destaque { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: center; } }

/* trailer e gameplay com faixas de cinema */
.player { background: var(--color-black); border-color: var(--color-black); }
.player .tela { margin-block: var(--space-xl); border-block: 0; }
.player__barra { border-top: var(--rule-hair) solid var(--color-rule); }

/* pôsteres: a capa domina, o texto vem embaixo, sem caixa */
.posteres { display: grid; gap: var(--space-2xl) var(--gap-columns); list-style: none; margin: 0; padding: 0; }
@media (min-width: 60rem) {
  .posteres { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .posteres > li:nth-child(1) { grid-column: 1 / 8; }
  .posteres > li:nth-child(2) { grid-column: 8 / 13; margin-top: var(--space-3xl); }
  .posteres > li:nth-child(3) { grid-column: 1 / 6; }
  .posteres > li:nth-child(4) { grid-column: 6 / 13; margin-top: var(--space-2xl); }
}
.poster { display: flex; flex-direction: column; gap: var(--space-md); color: var(--color-ink); text-decoration: none; background: transparent; }
.poster__img { border-radius: var(--radius-card); border: var(--rule-bar) solid var(--color-rule-strong); transition: border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out), translate var(--dur-short) var(--ease-out); }
.poster:hover .poster__img { border-color: var(--color-accent); box-shadow: var(--shadow-press-up); translate: -2px -2px; }
.poster:active .poster__img { translate: 2px 2px; box-shadow: var(--shadow-press-down); }
.poster:hover { color: var(--color-ink); }
.poster__info { display: flex; flex-direction: column; gap: var(--space-xs); }
.poster__nome { font-size: var(--text-2xl); font-weight: 800; letter-spacing: -0.03em; }
.posteres > li:nth-child(1) .poster__nome { font-size: var(--text-section); }
.poster__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.poster--web { background: transparent; }
.poster--web .poster__img { border-color: var(--color-ink); }
.poster--web .poster__info { padding: var(--space-md) var(--space-lg) var(--space-lg); background: var(--color-paper); border-radius: var(--radius-card); }

/* cards da página Jogos no mesmo espírito de pôster */
.card { background: transparent; border: 0; overflow: visible; }
.card .tela { border: var(--rule-bar) solid var(--color-rule-strong); border-radius: var(--radius-card); }
.card__conteudo { padding: var(--space-md) 0 0; }
.card:has(.card__link:hover) { translate: none; box-shadow: none; }
.card:has(.card__link:hover) .tela { border-color: var(--color-accent); box-shadow: var(--shadow-press-up); translate: -2px -2px; }
.card .tela { transition: border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out), translate var(--dur-short) var(--ease-out); }
.card__nome { font-size: var(--text-2xl); font-weight: 800; letter-spacing: -0.03em; }

/* rodapé preto */
.rodape { background: var(--color-black); }
.rodape__nome { font-weight: 800; letter-spacing: -0.06em; }

/* título e estrela sem sobreposição */
.abertura__titulo { font-size: clamp(3.5rem, 7.8vw, 8.75rem); }
@media (min-width: 60rem) { .abertura--cheia .abertura__estrela { width: min(60svh, 29vw); right: 5%; } }

/* Apoie o estúdio: faixa compacta, não um bloco gigante */
.apoie { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-lg); padding: var(--space-lg); box-shadow: none; border-width: var(--rule-hair); align-items: center; }
@media (min-width: 60rem) { .apoie { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-xl); padding: var(--space-lg) var(--space-xl); } }
.apoie .mascote { width: 72px; max-width: none; }
.apoie .mascote__vazio svg { width: 50%; }
.apoie__texto { display: grid; gap: var(--space-xs) var(--space-xl); grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 60rem) { .apoie__texto { grid-template-columns: minmax(0, 1fr) auto; } .apoie__texto .acoes { grid-column: 2; grid-row: 1 / span 2; } }
.apoie__titulo { font-size: var(--text-xl); font-weight: 800; letter-spacing: -0.02em; }
.apoie__texto .botao { min-height: 44px; padding: var(--space-xs) var(--space-md); font-size: var(--text-sm); }
@media (max-width: 40rem) { .apoie { grid-template-columns: minmax(0, 1fr); } }

/* logo cabe numa linha no celular */
@media (max-width: 40rem) {
  .nav-slab__barra { flex-wrap: nowrap; }
  .logo { gap: var(--space-xs); }
  .logo__estrela { width: 24px; height: 24px; }
  .logo__nome { font-size: var(--text-md); white-space: nowrap; }
  .logo__selo { padding: var(--space-3xs) var(--space-xs); }
}
@media (max-width: 40rem) { .apoie { grid-template-columns: 48px minmax(0, 1fr); align-items: start; gap: var(--space-md); padding: var(--space-md); } .apoie .mascote { width: 48px; } .apoie__texto .acoes { gap: var(--space-sm); } }

/* Web escura e editorial: linhas finas claras, tipografia, sem cena */
.web-topo { border-bottom: var(--rule-bar) solid var(--color-ink); margin-block-end: var(--space-3xl); }
.servicos, .faq { border-top-color: var(--color-ink); }
.processo li { border-top-color: var(--color-ink); }
.caso__imagem { border-color: var(--color-ink); }
.formulario { border-color: var(--color-rule-strong); }
.frente--web { background: transparent; border-color: var(--color-ink); }
.frente--web .frente__lista { border-top-color: var(--color-ink); }
.poster--web .poster__img { border-color: var(--color-ink); }
.poster--web .poster__info { background: transparent; padding: 0; }

/* ---------- Logo real ---------- */
.logo__img { display: block; height: 34px; width: auto; }
@media (max-width: 40rem) { .logo__img { height: 28px; } }
.abertura__marca { position: absolute; z-index: 1; width: min(72svh, 40vw); height: auto; right: 6%; top: 50%; translate: 0 -50%; }
.abertura--curta .abertura__marca { width: min(48svh, 28vw); right: 6%; }
@media (max-width: 60rem) {
  .abertura__marca { width: 58vw; right: -6vw; top: 8%; translate: none; }
  .abertura--curta .abertura__marca { width: 40vw; top: 6%; }
}
.logo-amostra__img { width: min(100%, 18rem); height: auto; }

/* ---------- Polimento (make-interfaces-feel-better, emil-design-eng) ---------- */
/* números que mudam não empurram o texto */
[data-contador], [data-minijogo-pontos] { font-variant-numeric: tabular-nums; }
/* contorno sutil nas imagens reais quando entrarem nos espaços */
[data-slot] > img { outline: 1px solid var(--color-img-outline); outline-offset: -1px; }
/* triângulo do play centralizado opticamente */
.player__play svg, .trailer__play svg { translate: 2px 0; }
/* cantos concêntricos: imagem interna com o raio da borda menos o espaçamento */
.relacionado .tela { border-radius: var(--space-2xs); }
.compra__widget { border-radius: var(--space-2xs); }
/* área de toque de 44px nos links do rodapé e da trilha no celular */
@media (max-width: 40rem) {
  .rodape__lista a, .rodape__base a { display: inline-flex; align-items: center; min-height: 44px; }
  .trilha a { display: inline-flex; align-items: center; min-height: 44px; }
}
/* filtros: resposta ao toque */
.filtro__botao { transition: background-color var(--dur-micro) steps(1), color var(--dur-micro) steps(1), border-color var(--dur-micro) steps(1), scale var(--dur-micro) var(--ease-out); }
.filtro__botao:active { scale: 0.96; }
/* em telas de toque, o hover não fica preso depois do toque */
@media (hover: none) {
  .botao:hover, .botao-menu:hover { translate: none; box-shadow: var(--shadow-press); }
  .poster:hover .poster__img, .card:has(.card__link:hover) .tela { translate: none; box-shadow: none; border-color: var(--color-rule-strong); }
  .frente:hover, .post-destaque:hover { translate: none; box-shadow: none; }
}
/* a cena de abertura entra uma vez, em sequência (claquete, título, texto, ações) */
@keyframes abertura-entra { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
.abertura__conteudo > * { animation: abertura-entra 420ms var(--ease-out) both; }
.abertura__conteudo > :nth-child(2) { animation-delay: 70ms; }
.abertura__conteudo > :nth-child(3) { animation-delay: 140ms; }
.abertura__conteudo > :nth-child(4) { animation-delay: 210ms; }
.abertura__conteudo > :nth-child(5) { animation-delay: 280ms; }
@media (prefers-reduced-motion: reduce) { .abertura__conteudo > * { animation: none; } }
.logo__img { height: 42px; }
@media (max-width: 40rem) { .logo__img { height: 32px; } }

/* ---------- Ícone LM no lugar da estrela ---------- */
.lm-sil { display: block; width: 100%; height: 100%; background: currentColor;
  -webkit-mask: var(--mask-lm) center / contain no-repeat; mask: var(--mask-lm) center / contain no-repeat; }
.icone-lm { display: block; width: 100%; height: auto; }
.tela-titulo__estrela { display: block; width: 72px; }
.player .tela-titulo__estrela { width: 180px; }
.vazio-arte .lm-sil { width: 40px; height: 44px; color: var(--color-rule-strong); }
.destaques li .lm-sil { width: 16px; height: 18px; flex: none; margin-top: var(--space-2xs); color: var(--color-accent); }
.mascote__vazio .icone-lm { width: 56%; }
.apoie .mascote__vazio .icone-lm { width: 64%; }

/* capas: o ícone LM inteiro no canto, legível */
.capa-tipo__estrela { width: 46%; aspect-ratio: 360 / 440; right: 6%; top: 8%; opacity: 0.95; }
.capa-tipo--post .capa-tipo__estrela { display: none; }
.capa-tipo__estrela { width: 44%; aspect-ratio: 1; right: 4%; top: 4%; opacity: 1; background: none; }
.capa-tipo__estrela .icone-lm { width: 100%; height: auto; filter: drop-shadow(0 6px 0 var(--color-shade)); }

/* ---------- Revisão: kill-ai-slop + make-interfaces-feel-better ---------- */
/* um brilho só e mais fraco atrás do LM (o azul no canto era decoração) */
.abertura__arte { background: radial-gradient(45% 60% at 74% 50%, var(--color-glow-teal), transparent 70%), var(--color-paper); }
.abertura__arte::before { content: ""; position: absolute; inset: 0; background: var(--color-veil-0); }
/* a entrada em sequência só nas cenas cheias (Início e jogo) e mais curta; nas páginas internas, que se visitam muito, nada se move */
.abertura__conteudo > * { animation: none; }
.abertura--cheia .abertura__conteudo > * { animation: abertura-entra 320ms var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) { .abertura--cheia .abertura__conteudo > * { animation: none; } }
/* menu do celular e aviso do modo arcade aparecem com um fade curto, em vez de surgir do nada */
.menu-mobile { transition: opacity var(--dur-short) var(--ease-out), translate var(--dur-short) var(--ease-out); }
@starting-style { .menu-mobile:not([hidden]) { opacity: 0; translate: 0 -8px; } }
.aviso-arcade { transition: opacity var(--dur-short) var(--ease-out), translate var(--dur-short) var(--ease-out); }
@starting-style { .aviso-arcade:not([hidden]) { opacity: 0; translate: -50% 8px; } }
@media (prefers-reduced-motion: reduce) { .menu-mobile, .aviso-arcade { transition: opacity var(--dur-short) linear; } }
/* alinhamento óptico: o lado do ícone pesa mais, então leva um pouco menos de respiro */
.botao:has(> svg:last-child) { padding-inline-end: calc(var(--space-lg) - var(--space-2xs)); }

/* ---------- Revisão hallmark (rodada 2) ---------- */
/* 1: a sombra azul deslocada fica só no que se clica; molduras e caixas estáticas levam um fio */
.gabinete, .apoie, .caso__imagem { box-shadow: none; }
.gabinete { border: var(--rule-hair) solid var(--color-rule-strong); }
.gabinete .tela { border-bottom-width: var(--rule-hair); }
.roteiro__etapa--agora { box-shadow: none; border-top-width: var(--rule-bar); }
/* 2 e 3: sem a faixa, a cena ocupa a altura toda */
.abertura__fundo { inset: 0; }
/* 6: o menu em Inter; mono só em datas e metadados */
.nav-slab__link { font: 500 var(--text-sm)/1 var(--font-body); }
/* 7: o 404 centrado na primeira dobra, longe do menu */
.nao-encontrada { min-height: calc(100svh - 74px); align-content: center; padding-block: var(--space-2xl); }
/* 8: as duas frentes com a mesma borda; o hover é que destaca */
.frente--web { border-color: var(--color-rule-strong); }
.frente--jogos { background: transparent; }
.frente:hover { border-color: var(--color-accent); }

/* 5: cenas próprias nas páginas internas */
.abertura__arte--lisa { background: var(--color-paper); }
.abertura__grade { position: relative; margin-top: auto; display: grid; gap: var(--space-xl); align-items: end; padding-block: var(--space-3xl) var(--space-2xl); }
.abertura__grade > .abertura__conteudo { margin: 0; padding: 0; }
@media (min-width: 60rem) { .abertura__grade:has(.abertura__lado) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); } }
.abertura__lado { width: min(100%, 26rem); justify-self: end; }
.poster--cena .poster__img { aspect-ratio: 3 / 4; }
.poster__legenda { display: flex; flex-direction: column; gap: var(--space-2xs); margin: 0; }
.retrato { aspect-ratio: 4 / 5; border: var(--rule-hair) solid var(--color-rule-strong); border-radius: var(--radius-card); background: var(--color-paper-2); overflow: hidden; display: grid; }
.abertura--devlog .abertura__conteudo { max-width: 60rem; }
.abertura__titulo--post { font-size: clamp(2.75rem, 7vw, 6.5rem); max-width: 16ch; line-height: 0.95; }
.abertura__titulo--post a { color: var(--color-ink); text-decoration: none; }
.abertura__titulo--post a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 4px; text-underline-offset: 0.12em; }
.claquete__titulo { font: inherit; letter-spacing: inherit; color: inherit; margin: 0; max-width: none; }
.colunas-texto { display: grid; gap: var(--space-lg); max-width: 72rem; }
@media (min-width: 60rem) { .colunas-texto { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3xl); } }
@media (max-width: 60rem) { .abertura__lado { justify-self: start; width: min(100%, 18rem); } }

/* ---------- Abertura no celular: LM no alto, título logo abaixo, sem vazio ---------- */
@media (max-width: 40rem) {
  .abertura--cheia { min-height: 0; }
  .abertura--cheia .abertura__conteudo { padding-top: calc(var(--space-xl) + 68vw); }
  .abertura--cheia .abertura__marca, .abertura--curta .abertura__marca { width: 64vw; right: 50%; translate: 50% 0; top: var(--space-lg); }
  .abertura--curta .abertura__marca { width: 44vw; }
  .abertura--curta .abertura__conteudo { padding-top: calc(var(--space-xl) + 44vw); }
  .abertura__arte { background: radial-gradient(70% 45% at 50% 24%, var(--color-glow-teal), transparent 70%), var(--color-paper); }
}

/* ---------- Imagens reais dos jogos ---------- */
/* capas oficiais são 16:9: o espaço acompanha para não cortar o texto das capas */
.tela--capa:has(> .capa-foto) { aspect-ratio: 16 / 9; }
.capa-foto { display: block; width: 100%; height: 100%; object-fit: cover; }
.midia-jogo { display: flex; flex-direction: column; gap: var(--space-xs); margin: 0; }
.midia-jogo > a { display: block; border-radius: var(--radius-card); border: var(--rule-hair) solid var(--color-rule-strong); }
.midia-jogo > a:hover .player__play { scale: 1.06; }
.midia-jogo .player__play { transition: scale var(--dur-short) var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .midia-jogo .player__play { transition: none; } }
/* abertura com a arte do jogo em destaque: a imagem ocupa a cena e o véu mantém o texto legível */
.abertura__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.abertura:has(.abertura__foto)::before { background: linear-gradient(to right, var(--color-veil) 0%, var(--color-veil) 28%, var(--color-veil-0) 75%), linear-gradient(to top, var(--color-veil) 0%, var(--color-veil-0) 55%); }
@media (max-width: 40rem) {
  .abertura--cheia:has(.abertura__foto) .abertura__conteudo { padding-top: calc(var(--space-xl) + 56vw); }
  .abertura:has(.abertura__foto)::before { background: linear-gradient(to top, var(--color-veil) 0%, var(--color-veil) 45%, var(--color-veil-0) 85%); }
}
.midia-jogo a.tela::after { content: none; }
@media (max-width: 40rem) { .abertura__foto { object-position: 92% center; } }