/* RETRO POP · família console — nível 3 de 4 (PLANO-APLICACAO.md 1.4, etapa 2)
   29 páginas de pages/console/*.html, três esqueletos:
   · completo (snes, ps1, nds, psp, 3ds…): <style> inline (:root --c --neon-* --bg-dark) + console-library.css
     body[data-console] .cyber-bg .glow-orb nav.top-navbar header.og-hero .og-hero-stats .og-search-wrap
     nav.og-console-nav-pills .og-about-block (.og-wfc-panel em nds/psp) .og-games-section .og-game-card footer.og-footer
   · biblioteca (cps1/2/3, zn1/2): body.og-library-page nav.og-topbar header.og-hero nav.og-console-nav main.og-games-section
   · play.html: cartão de redirecionamento para /emulator.html (body > main).
   Criado por script e também tratado aqui: .og-online-beta-announcement. O banner de cookies e o
   dialog.og-launcher-dialog são widgets de site inteiro e moram em retro/_shared.css.

   DUAS METADES, nesta ordem:
   1. VARREDURA DE INVERSÃO — todo texto claro e todo fundo escuro que o CSS próprio destas páginas escreve na
      mão e a ponte não alcança. Escrita nos seletores REAIS, não nas primitivas: com JS desligado o classMap não
      roda, e a página tem de continuar legível só com esta folha.
   2. COMPOSIÇÃO — tarja amarela, capa de revista, etiquetas de preço, faixa de título, cards de papel. Também nos
      seletores reais e com a mesma geometria das primitivas que o classMap estampa: o classMap reforça, não
      move nada depois da primeira pintura (sem layout shift em 292 cards).

   --c (uma cor por sistema): a ponte o leva a ≥5:1 sobre o creme. Dentro de superfície escura (rodapé,
   .rp-colophon, .rp-con__band) ele é redeclarado claro aqui — a ponte não cobre esses três (seção 0).
   Nenhuma regra toca slot de anúncio além da moldura (.ad-container: cor da borda, raio, sombra), nem pad de toque,
   nem cosmético pago. Movimento: 2 loops, ambos com --rp-play e com guarda de reduced-motion própria. */

/* ═══════════ 0 · TOKENS DA FAMÍLIA ═══════════ */
html.retro-pop{
  --cn-dots:radial-gradient(circle,rgba(23,19,31,.28) 1.3px,transparent 1.5px);
  --cn-dots-cream:radial-gradient(circle,rgba(245,235,215,.2) 1.6px,transparent 1.8px);
  --cn-ink:#17131f; --cn-cream:#f5ebd7; --cn-white:#fffaf0;
}
/* --c dentro de superfície escura: claro, mantendo o matiz do sistema (≥6:1 sobre #17131f) */
html.retro-pop .og-footer,
html.retro-pop .rp-colophon,
html.retro-pop .rp-con__band{--c:color-mix(in srgb,var(--rp-c-raw) 45%,#f5ebd7)}


/* ═══════════ 1 · VARREDURA DE INVERSÃO ═══════════
   Cada bloco cita o arquivo de origem. Fundo escuro → papel ou transparente; texto claro → tinta. */

/* inline <style> das 23 páginas completas: .cyber-bg/.glow-orb (fundo fixo carbono), body */
html.retro-pop .cyber-bg{background:none}
html.retro-pop .glow-orb{display:none}

/* tarja (.top-navbar inline :74-83 · .og-topbar console-library.css:71-73) */
html.retro-pop .top-navbar,
html.retro-pop .og-library-page .og-topbar{color:var(--cn-ink);-webkit-backdrop-filter:none;backdrop-filter:none}
html.retro-pop .logo-link,
html.retro-pop .logo-text span,
html.retro-pop .og-library-page .og-topbar a,
html.retro-pop .og-library-page .og-topbar strong{color:var(--cn-ink)}
html.retro-pop .nav-link,
html.retro-pop .nav-link:hover,
html.retro-pop .nav-link[aria-current="page"]{color:var(--cn-ink)}

/* capa (.og-hero inline :92-115 · console-library.css:63-65,74-76) */
html.retro-pop body[data-console] .og-hero,
html.retro-pop .og-hero{background:none;border-bottom:0}
html.retro-pop .og-hero h1,
html.retro-pop body[data-console] .og-hero h1{color:var(--rp-ink);background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:currentColor}
html.retro-pop .og-hero p,
html.retro-pop .og-hero p.lead,
html.retro-pop .og-library-page .og-hero p{color:var(--rp-ink-2)}
html.retro-pop .og-stat-num{color:var(--rp-ink);text-shadow:none}
html.retro-pop .og-stat-lbl{color:var(--rp-ink-2)}
html.retro-pop .og-search-input,
html.retro-pop .og-library-page input[type=search]{color:var(--rp-ink);background-color:var(--cn-white)}
html.retro-pop .og-search-input::placeholder,
html.retro-pop .og-library-page input[type=search]::placeholder{color:var(--rp-ink-3);opacity:1}
html.retro-pop .og-search-icon{border-color:var(--rp-ink)}
html.retro-pop .og-search-icon::after{background:var(--rp-ink)}

/* atalhos de console (.og-nav-pill inline :155-169 · console-library.css:67,86) */
html.retro-pop .og-nav-pill{color:var(--rp-ink);background:var(--cn-white)}
/* console-library.css:68: a aba do próprio sistema (zn1, zn2…) pinta o texto em --library-accent (a ponte o leva
   ao roxo, 5,97:1 no papel) — aqui ela vira a aba ativa do conceito: fundo cyan, texto de tinta */
html.retro-pop body[data-console] .og-nav-pill.active{color:var(--cn-ink);background:var(--rp-cyan);border-color:var(--cn-ink)}

/* bloco "About" (inline :175-187 · console-library.css:66) */
html.retro-pop .og-about-block,
html.retro-pop body[data-console] .og-about-block{color:var(--rp-ink-2);background:var(--cn-white)}
html.retro-pop .og-about-block strong{color:var(--rp-ink)}

/* painel Wi-Fi / Ad Hoc (inline :189-260, nds e psp). As regras de .og-wfc-toggle, .og-wfc-platinum*,
   [data-og-wfc-opt-in] e [data-og-nds-wfc-active] do inline não têm alvo aqui: esse markup e esses atributos
   só existem no portal (games-portal.js), que não carrega nestas páginas — nada a inverter. */
html.retro-pop .og-wfc-panel{color:var(--rp-ink-2);background:var(--cn-white)}
html.retro-pop .og-wfc-panel h2,
html.retro-pop .og-wfc-panel strong{color:var(--rp-ink)}
html.retro-pop .og-wfc-note{color:var(--rp-ink-2)}
html.retro-pop .og-wfc-panel-copy a{color:var(--rp-ink);font-weight:800;text-decoration:underline;text-decoration-color:var(--rp-cyan);text-decoration-thickness:3px;text-underline-offset:3px}
html.retro-pop .og-wfc-status{color:var(--cn-ink);background:var(--rp-cyan)}
html.retro-pop .og-online-guide-link{color:var(--cn-ink);background:var(--rp-cyan)}

/* seção de jogos e cards (inline :263-401 · console-library.css:69,78-84) */
html.retro-pop .og-games-section h2{color:var(--cn-ink)}
html.retro-pop .og-section-count{color:var(--cn-ink);background:var(--rp-yellow)}
html.retro-pop .og-game-card{color:var(--rp-ink);background:var(--cn-white)}
html.retro-pop .og-card-title{color:var(--rp-ink)}
html.retro-pop .og-card-play,
html.retro-pop body.console-psp .og-card-play,
html.retro-pop .og-library-page .og-card-play{color:var(--cn-ink);background:none}
html.retro-pop .og-play-icon{color:var(--cn-ink);background:var(--rp-red)}
html.retro-pop .og-play-text,
html.retro-pop body.console-psp .og-play-text{color:var(--cn-ink);background:var(--rp-yellow)}
html.retro-pop body.console-psp .og-card-cover img{background:transparent}
html.retro-pop .og-empty-state,
html.retro-pop .og-library-empty{color:var(--rp-ink-2);background:var(--rp-paper-2)}
html.retro-pop .og-library-empty a{color:var(--rp-ink)}

/* rodapé (inline :411-419): vira colofão escuro — o texto passa a creme, o fundo a tinta */
html.retro-pop .og-footer{color:var(--cn-cream);background-color:var(--cn-ink)}
html.retro-pop .og-footer a{color:var(--cn-cream)}

/* aviso do Online Beta (online-beta-announcement.css, criado por script em toda página completa) */
html.retro-pop .og-online-beta-announcement{color:var(--rp-ink);background:var(--cn-white)}
html.retro-pop .og-online-beta-kicker{color:var(--cn-ink)}
html.retro-pop .og-online-beta-announcement h2{color:var(--rp-ink)}
html.retro-pop .og-online-beta-announcement p{color:var(--rp-ink-2)}
html.retro-pop .og-online-beta-action{color:var(--cn-ink);background:var(--rp-red)}
html.retro-pop .og-online-beta-action.secondary{color:var(--cn-white);background:var(--rp-purple)}
html.retro-pop .og-online-beta-dismiss,
html.retro-pop .og-online-beta-dismiss:hover,
html.retro-pop .og-online-beta-dismiss:focus-visible{color:var(--cn-ink);background:var(--cn-white)}

/* play.html (inline :58-97): cartão de "abrindo o player" */
html.retro-pop body:not([data-console]) > main{color:var(--rp-ink)}
html.retro-pop body:not([data-console]) > main p{color:var(--rp-ink-2)}
html.retro-pop body:not([data-console]) > main a{color:var(--cn-ink);background:var(--rp-red)}


/* ═══════════ 2 · COMPOSIÇÃO ═══════════ */

/* 2.1 tarja amarela: retícula de tinta, borda inferior em diagonal (camada de fundo — um pseudo-elemento
   exigiria position:relative e mataria o sticky). Altura sobe ~20px; sticky, top e z-index da página ficam. */
html.retro-pop .top-navbar,
html.retro-pop .og-library-page .og-topbar{
  padding-top:10px;padding-bottom:24px;border-bottom:0;
  background-color:var(--rp-yellow);
  background-image:linear-gradient(179.4deg,transparent 0 calc(100% - 13px),var(--cn-ink) calc(100% - 13px)),var(--cn-dots);
  background-size:auto,8px 8px;
  box-shadow:0 4px 0 rgba(23,19,31,.18)}
html.retro-pop .og-library-page .og-topbar{padding-left:max(24px,calc((100vw - 1250px)/2));padding-right:max(24px,calc((100vw - 1250px)/2))}
/* logotipo como etiqueta de papel colada na tarja */
html.retro-pop .logo-link,
html.retro-pop .og-library-page .og-topbar a:first-child{
  display:inline-flex;align-items:center;gap:8px;padding:6px 14px 7px;
  border:3px solid var(--cn-ink);background:var(--cn-white);box-shadow:var(--rp-sh-2);
  transform:rotate(-1.6deg);text-decoration:none}
html.retro-pop .logo-mark{filter:none}
html.retro-pop .logo-text,
html.retro-pop .og-library-page .og-topbar strong{
  display:inline-block;font:400 clamp(17px,1.7vw,23px)/1 var(--rp-ff-display);letter-spacing:-.01em;
  text-transform:uppercase;transform:skewX(var(--rp-skew));text-shadow:3px 3px 0 var(--rp-red)}
html.retro-pop .nav-links{gap:4px;align-items:center}
html.retro-pop .nav-link,
html.retro-pop .og-library-page .og-topbar a:not(:first-child){
  display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border-radius:0;
  border-bottom:4px solid transparent;background:none;
  font:800 var(--rp-fs-small)/1 var(--rp-ff-body);text-transform:uppercase;letter-spacing:.03em;text-decoration:none;
  transition:border-color var(--rp-t-fast) linear,background-color var(--rp-t-fast) linear}
html.retro-pop .nav-link:hover,
html.retro-pop .og-library-page .og-topbar a:not(:first-child):hover{border-bottom-color:var(--rp-cyan);background:rgba(255,250,240,.55)}
html.retro-pop .nav-link[aria-current="page"]{border-bottom-color:var(--rp-red);background:rgba(255,250,240,.55)}

/* 2.2 capa de revista: título à esquerda, logo do sistema numa chapa de tinta à direita (59/41) */
html.retro-pop .og-hero{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(28px,5vw,72px);
  align-items:start;text-align:left;max-width:1240px;padding:clamp(40px,5vw,64px) 24px clamp(30px,4vw,48px)}
html.retro-pop .og-hero > *{grid-column:1;position:relative;z-index:1}
/* raios e retícula atrás da chapa: estáticos, nenhuma animação */
html.retro-pop .og-hero::before{
  content:"";position:absolute;right:0;top:0;width:min(46%,520px);aspect-ratio:1;z-index:0;pointer-events:none;
  background:var(--rp-pat-rays);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 58%,transparent 71%);mask-image:radial-gradient(circle at 50% 50%,#000 58%,transparent 71%);
  opacity:.75}
html.retro-pop .og-hero > .og-hero-cover,
html.retro-pop .og-library-page .og-hero-cover{
  grid-column:2;grid-row:1 / span 6;align-self:center;
  width:clamp(220px,24vw,330px);height:clamp(150px,16vw,220px);margin:8px 18px 18px 0;padding:clamp(18px,2vw,28px);
  object-fit:contain;filter:none;
  background-color:var(--cn-ink);background-image:var(--cn-dots-cream);background-size:12px 12px;
  border:3px solid var(--cn-ink);
  box-shadow:9px 10px 0 0 var(--rp-c-raw),9px 10px 0 3px var(--cn-ink);
  transform:rotate(2.4deg)}
html.retro-pop .og-hero h1{
  font:400 clamp(34px,5vw,66px)/.92 var(--rp-ff-display);letter-spacing:var(--rp-tr-display);text-transform:uppercase;
  text-shadow:4px 4px 0 var(--rp-red);transform:skewX(-5deg);transform-origin:0 100%;
  margin:0 0 20px;overflow-wrap:anywhere}
html.retro-pop .og-hero p.lead,
html.retro-pop .og-hero > p{max-width:60ch;margin:0;font:400 var(--rp-fs-body)/var(--rp-lh-body) var(--rp-ff-body)}
/* parágrafo feito só de links + "·" (ps3 na capa, nds no painel): o separador é o único texto próprio do <p> e
   em peso 400 tem 2px de tinta — some; em 800 ele é um ponto de verdade */
html.retro-pop .og-hero p.lead:has(> a),
html.retro-pop .og-wfc-panel-copy p:has(> a){font-weight:800}
html.retro-pop .og-hero p.lead a{color:var(--rp-ink);font-weight:800;text-decoration:underline;text-decoration-color:var(--rp-cyan);text-decoration-thickness:3px;text-underline-offset:3px}
/* biblioteca: o primeiro <p> é a linha do fabricante — sobretítulo em mono */
html.retro-pop .og-library-page .og-hero > p:first-of-type{
  margin:0 0 10px;font:700 var(--rp-fs-micro)/1.4 var(--rp-ff-mono);letter-spacing:.14em;text-transform:uppercase}
/* selo da capa: estrela amarela; nos sistemas só-launcher vira etiqueta laranja (laranja = launcher) */
html.retro-pop .og-hero::after{
  content:"PLAY\A FREE!";white-space:pre;position:absolute;z-index:3;right:clamp(4px,1vw,18px);top:clamp(14px,2.4vw,30px);
  display:grid;place-items:center;width:104px;height:104px;padding:12px;pointer-events:none;
  background:var(--rp-art-burst) center/100% 100% no-repeat;color:var(--cn-ink);
  font:400 15px/1.05 var(--rp-ff-sticker);letter-spacing:var(--rp-tr-sticker);text-align:center;
  transform:rotate(-8deg);animation:rpWobble3 6.5s ease-in-out infinite;animation-play-state:var(--rp-play)}
html.retro-pop body:is([data-console="ps2"],[data-console="ps3"],[data-console="gamecube"],[data-console="wii"],[data-console="3ds"]) .og-hero::after{
  content:"WINDOWS\A LAUNCHER";width:auto;height:auto;padding:9px 14px;
  background:var(--rp-orange);border:3px solid var(--cn-ink);box-shadow:var(--rp-sh-2);font-size:13px}

/* etiquetas de preço (os 3 números da capa) */
html.retro-pop .og-hero-stats{justify-content:flex-start;gap:18px 20px;margin-top:30px}
html.retro-pop .og-stat{
  position:relative;align-items:flex-start;min-width:146px;padding:12px 18px 12px 30px;
  border:3px solid var(--cn-ink);box-shadow:var(--rp-sh-2);
  background:var(--cn-white) linear-gradient(90deg,var(--cn-ink) 0 10px,transparent 10px) no-repeat;
  transform:rotate(var(--rp-tilt))}
html.retro-pop .og-stat:nth-child(1){--rp-tilt:-2deg}
html.retro-pop .og-stat:nth-child(2){--rp-tilt:1.4deg}
html.retro-pop .og-stat:nth-child(3){--rp-tilt:-.8deg}
html.retro-pop .og-stat-num{font:700 clamp(26px,2.5vw,38px)/.95 var(--rp-ff-mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
html.retro-pop .og-stat-lbl{margin-top:5px;font:700 var(--rp-fs-micro)/1.2 var(--rp-ff-mono);letter-spacing:.1em;text-transform:uppercase}

/* busca: pílula de tinta (a única exceção ao canto duro) */
html.retro-pop .og-search-wrap{max-width:560px;margin:28px 0 0}
html.retro-pop .og-search-input,
html.retro-pop .og-library-page input[type=search]{
  min-height:50px;padding:0 18px 0 46px;border:3px solid var(--cn-ink);border-radius:var(--rp-r-pill);
  box-shadow:var(--rp-sh-2);font:600 15px/1 var(--rp-ff-body);transition:box-shadow var(--rp-t-fast) linear}
html.retro-pop .og-search-input:focus,
html.retro-pop .og-library-page input[type=search]:focus{border-color:var(--cn-ink);background-color:#fff;box-shadow:4px 5px 0 var(--rp-cyan),4px 5px 0 3px var(--cn-ink)}
html.retro-pop .og-search-icon{left:18px;border-width:3px}
html.retro-pop .og-search-icon::after{height:3px;right:-7px;bottom:-5px}
/* biblioteca: sem o ícone da página — a lupa é a arte do tema */
html.retro-pop .og-library-page input[type=search]{
  appearance:none;-webkit-appearance:none;margin:0 0 30px;
  background:var(--cn-white) var(--rp-art-search) no-repeat 16px 50%/18px 18px}

/* 2.3 atalhos de console: abas de papel com o logo em tinta chapada */
html.retro-pop .og-console-nav-pills,
html.retro-pop .og-library-page .og-console-nav{gap:12px 10px;margin-top:8px;margin-bottom:40px}
html.retro-pop .og-nav-pill,
html.retro-pop .og-library-page .og-nav-pill{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:5px 14px;
  border:3px solid var(--cn-ink);border-radius:0;box-shadow:var(--rp-sh-1);
  font:800 var(--rp-fs-small)/1 var(--rp-ff-body);text-transform:uppercase;letter-spacing:var(--rp-tr-sticker);text-decoration:none;
  transform:rotate(var(--rp-tilt));transition:var(--rp-pop),background-color var(--rp-t-fast) linear}
html.retro-pop .og-nav-pill:nth-child(3n+1){--rp-tilt:-1deg}
html.retro-pop .og-nav-pill:nth-child(3n+2){--rp-tilt:.7deg}
html.retro-pop .og-nav-pill:hover,
html.retro-pop .og-nav-pill:focus-visible{background:var(--rp-cyan);border-color:var(--cn-ink);transform:rotate(var(--rp-tilt)) translate(-2px,-3px);box-shadow:var(--rp-sh-2)}
/* os logos são claros (feitos para fundo escuro): cada um ganha uma chapinha de tinta, como a da capa */
html.retro-pop .og-nav-pill img,
html.retro-pop .og-library-page .og-nav-pill img{box-sizing:content-box;width:30px;height:18px;padding:3px 5px;background:var(--cn-ink);object-fit:contain;filter:none}

/* 2.4 "About": cartão de papel com fita adesiva e título em bloco de tinta */
html.retro-pop .og-about-block,
html.retro-pop body[data-console] .og-about-block{
  position:relative;padding:34px 32px 28px;border:5px solid var(--cn-ink);border-radius:0;box-shadow:var(--rp-sh-3);
  transform:rotate(-.6deg);font-size:var(--rp-fs-body);line-height:var(--rp-lh-body);margin-bottom:46px}
html.retro-pop .og-about-block::before{
  content:"";position:absolute;left:-18px;top:-16px;width:118px;height:36px;z-index:3;pointer-events:none;
  transform:rotate(-14deg);background:var(--rp-art-tape) center/100% 100% no-repeat}
html.retro-pop .og-about-block > h2{
  display:inline-block;margin:0 0 16px;padding:6px 16px;border:5px solid var(--cn-ink);
  background:var(--cn-ink);color:var(--cn-white);box-shadow:4px 5px 0 var(--rp-red);
  font:400 var(--rp-fs-h3)/1.05 var(--rp-ff-display);letter-spacing:0;text-transform:uppercase;transform:skewX(var(--rp-skew))}

/* 2.5 painel Wi-Fi / Ad Hoc: classificado com tarja cyan (cyan = informação) */
html.retro-pop .og-wfc-panel{
  margin:0 auto 46px;padding:22px 24px;border:3px solid var(--cn-ink);border-left-width:14px;border-left-color:var(--rp-cyan);
  border-radius:0;box-shadow:var(--rp-sh-2);font-size:15px}
html.retro-pop .og-wfc-panel h2{font:400 clamp(17px,1.6vw,22px)/1.1 var(--rp-ff-display);text-transform:uppercase;letter-spacing:0}
html.retro-pop .og-wfc-status{border:2px solid var(--cn-ink);border-radius:0;font:800 var(--rp-fs-micro)/1.25 var(--rp-ff-body);text-transform:uppercase;letter-spacing:var(--rp-tr-sticker)}
html.retro-pop .og-wfc-status-dot{box-shadow:0 0 0 2px var(--cn-ink)}

/* botões: tinta de banca, borda de 3px, sombra de papel; mínimo 44px */
html.retro-pop .og-online-guide-link,
html.retro-pop .og-online-beta-action,
html.retro-pop body:not([data-console]) > main a{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  border:3px solid var(--cn-ink);border-radius:var(--rp-r-1);box-shadow:var(--rp-sh-2);filter:none;
  font:800 var(--rp-fs-small)/1.15 var(--rp-ff-body);text-transform:uppercase;letter-spacing:var(--rp-tr-sticker);text-decoration:none;
  transition:var(--rp-pop),background-color var(--rp-t-fast) linear}
html.retro-pop :is(.og-online-guide-link,.og-online-beta-action,body:not([data-console]) > main a):hover{transform:translate(-2px,-3px);box-shadow:var(--rp-sh-3);filter:none}
html.retro-pop :is(.og-online-guide-link,.og-online-beta-action,body:not([data-console]) > main a):active{transform:translate(3px,4px);box-shadow:1px 1px 0 var(--cn-ink)}

/* 2.6 seção de jogos: zigue-zague, faixa de título vermelha, contagem em etiqueta amarela */
html.retro-pop .og-games-section::before{
  content:"";display:block;height:12px;margin:0 0 34px;opacity:.5;pointer-events:none;
  background:var(--rp-pat-zig) repeat-x 0 0/40px 12px}
html.retro-pop .og-games-section > h2{
  display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 34px -6px;padding:12px 30px 12px 40px;
  border-top:4px solid var(--cn-ink);border-bottom:4px solid var(--cn-ink);
  background:var(--rp-red) var(--rp-art-ribcap) no-repeat left center/26px 100%;
  font:400 clamp(22px,2.6vw,36px)/1.2 var(--rp-ff-display);letter-spacing:var(--rp-tr-display);text-transform:uppercase;
  /* 1° e não 1,4°: com o título girado, a caixa alinhada do texto sobe pelas pontas; a faixa tem de cobri-la
     inteira até ~770px de título, senão o papel aparece atrás das letras */
  transform:rotate(-1deg)}
html.retro-pop .og-section-count{
  display:inline-block;padding:5px 10px;border:3px solid var(--cn-ink);border-radius:0;box-shadow:var(--rp-sh-1);
  font:700 clamp(15px,1.4vw,19px)/1 var(--rp-ff-mono);letter-spacing:0;transform:rotate(4deg)}

/* grade: o mosaico de 12 colunas do conceito não escala para 292 cards (plano 3.4) — a grade da página fica,
   com respiro para a sombra; o giro é por card, nunca do contêiner */
html.retro-pop .og-games-grid{gap:26px 22px}
html.retro-pop .og-game-card,
html.retro-pop .og-library-page .og-game-card{
  border:3px solid var(--cn-ink);border-radius:0;box-shadow:var(--rp-sh-2);
  transform:rotate(var(--rp-tilt));transition:var(--rp-pop)}
html.retro-pop .og-game-card:nth-child(4n+1){--rp-tilt:-.7deg}
html.retro-pop .og-game-card:nth-child(4n+2){--rp-tilt:.5deg}
html.retro-pop .og-game-card:nth-child(4n+3){--rp-tilt:-.3deg}
html.retro-pop .og-game-card:nth-child(4n){--rp-tilt:.8deg}
html.retro-pop .og-game-card:hover,
html.retro-pop .og-game-card:focus-visible{transform:rotate(var(--rp-tilt)) translate(-3px,-4px);border-color:var(--cn-ink);box-shadow:var(--rp-sh-3)}
/* a capa assenta numa faixa de tinta com retícula creme — o "bloco de tinta" do card do conceito */
html.retro-pop .og-card-cover,
html.retro-pop body.console-psp .og-card-cover,
html.retro-pop .og-library-page .og-card-cover{
  border-bottom:3px solid var(--cn-ink);
  background-color:var(--cn-ink);background-image:var(--cn-dots-cream);background-size:10px 10px}
/* play: adesivo redondo sempre visível no canto; o rótulo amarelo aparece no hover (substitui o
   véu escuro de opacity:0 que escondia a capa inteira) */
html.retro-pop .og-card-play,
html.retro-pop body.console-psp .og-card-play,
html.retro-pop .og-library-page .og-card-play{
  inset:0;display:flex;flex-direction:row-reverse;justify-content:flex-start;align-items:flex-end;gap:6px;padding:8px;opacity:1;pointer-events:none}
html.retro-pop .og-play-icon,
html.retro-pop body.console-psp .og-play-icon{
  display:grid;place-items:center;flex:none;width:38px;height:38px;border:3px solid var(--cn-ink);border-radius:50%;box-shadow:var(--rp-sh-1);font-size:13px;line-height:1}
html.retro-pop .og-play-text,
html.retro-pop body.console-psp .og-play-text{
  /* recolhido no adesivo: largura zero até o hover, então não reserva espaço nem vira "bloco em branco" */
  max-width:0;padding:3px 0;border:solid var(--cn-ink);border-width:2px 0;border-radius:0;box-shadow:var(--rp-sh-1);
  overflow:hidden;white-space:nowrap;opacity:0;
  font:800 var(--rp-fs-micro)/1 var(--rp-ff-body);letter-spacing:var(--rp-tr-sticker);text-transform:uppercase;
  transition:max-width var(--rp-t) var(--rp-e-out),padding var(--rp-t) var(--rp-e-out),opacity var(--rp-t-fast) linear}
html.retro-pop .og-game-card:hover .og-play-text,
html.retro-pop .og-game-card:focus-visible .og-play-text{max-width:160px;padding:3px 7px;border-width:2px;opacity:1}
html.retro-pop .og-card-meta{padding:11px 12px 13px}
html.retro-pop .og-card-meta .og-card-title{padding:0;font:800 14px/1.25 var(--rp-ff-body);letter-spacing:0}
/* biblioteca: o selo do sistema vira chip cyan no canto da capa */
html.retro-pop .og-card-tag{
  position:absolute;left:8px;top:8px;z-index:2;padding:4px 8px;border:2px solid var(--cn-ink);background:var(--rp-cyan);color:var(--cn-ink);
  box-shadow:var(--rp-sh-1);font:800 10px/1.2 var(--rp-ff-body);letter-spacing:var(--rp-tr-sticker);text-transform:uppercase}

/* vazio: papel com recado, nunca um buraco */
html.retro-pop .og-empty-state.visible,
html.retro-pop .og-library-empty{
  padding:24px;border:3px dashed rgba(23,19,31,.4);border-radius:0;font:600 15px/1.6 var(--rp-ff-body)}
html.retro-pop .og-library-empty strong{display:block;margin-bottom:4px;font:400 var(--rp-fs-h3)/1.1 var(--rp-ff-display);text-transform:uppercase;color:var(--rp-ink)}
html.retro-pop .og-library-empty a{display:inline-block;margin:10px 16px 0 0;font-weight:800;text-decoration:underline;text-decoration-color:var(--rp-cyan);text-decoration-thickness:3px;text-underline-offset:3px}

/* 2.7 colofão: tinta com retícula, borda rasgada em cima, faixa de bala embaixo */
html.retro-pop .og-footer{
  position:relative;margin-top:64px;padding:46px 22px 50px;border-top:0;
  background-image:var(--rp-pat-candy),var(--cn-dots-cream);background-size:100% 10px,10px 10px;
  background-position:left bottom,0 0;background-repeat:no-repeat,repeat;
  font:600 14px/1.7 var(--rp-ff-body)}
html.retro-pop .og-footer::before{
  content:"";position:absolute;left:0;right:0;top:-19px;height:20px;pointer-events:none;
  background:var(--rp-edge-torn) repeat-x 0 0/240px 20px;transform:scaleY(-1)}
html.retro-pop .og-footer strong{font:400 clamp(18px,1.6vw,24px)/1.2 var(--rp-ff-display);letter-spacing:0}
html.retro-pop .og-footer a{margin:0 4px;border-bottom:2px solid transparent;transition:border-color var(--rp-t-fast) linear}
html.retro-pop .og-footer a:hover{color:var(--rp-yellow);border-bottom-color:var(--rp-yellow)}

/* 2.8 aviso do Online Beta: balão de fala de quadrinho, chip lima "ao vivo" (lima = ao vivo) */
html.retro-pop .og-online-beta-announcement{
  margin:30px auto 34px;border:5px solid var(--cn-ink);border-radius:0;box-shadow:var(--rp-sh-3);
  overflow:visible;transform:rotate(-.5deg)}
html.retro-pop .og-online-beta-announcement::before{content:none}
html.retro-pop .og-online-beta-announcement::after{
  content:"";position:absolute;left:46px;bottom:-26px;width:46px;height:28px;pointer-events:none;
  background:var(--cn-white);border-right:5px solid var(--cn-ink);border-bottom:5px solid var(--cn-ink);
  clip-path:polygon(0 0,100% 0,42% 100%)}
html.retro-pop .og-online-beta-kicker{
  padding:5px 10px;border:2px solid var(--cn-ink);background:var(--rp-lime);
  font:800 var(--rp-fs-micro)/1.25 var(--rp-ff-body);letter-spacing:var(--rp-tr-sticker)}
html.retro-pop .og-online-beta-kicker::before{
  background:var(--cn-ink);box-shadow:none;animation:rpDot 1.6s ease-in-out infinite;animation-play-state:var(--rp-play)}
html.retro-pop .og-online-beta-announcement h2{font:400 clamp(17px,1.6vw,22px)/1.15 var(--rp-ff-display);text-transform:uppercase;letter-spacing:0}
html.retro-pop .og-online-beta-announcement p{font:600 15px/1.5 var(--rp-ff-body)}
html.retro-pop .og-online-beta-action{padding:0 16px}
html.retro-pop .og-online-beta-dismiss{
  width:40px;height:40px;border:3px solid var(--cn-ink);border-radius:0;box-shadow:var(--rp-sh-1);font:800 20px/1 var(--rp-ff-body)}

/* 2.9 moldura de anúncio — só a moldura: cor de borda, raio e sombra; nenhuma medida, fundo ou
   pseudo-elemento (adsterra.js escreve tamanho e fundo inline) */
html.retro-pop .ad-container{border-color:var(--rp-ink-soft);border-radius:0;box-shadow:none}

/* play.html: o cartão de espera também é papel */
html.retro-pop body:not([data-console]) > main{background:var(--cn-white);border:5px solid var(--cn-ink);border-radius:0;box-shadow:var(--rp-sh-3)}
html.retro-pop body:not([data-console]) > main h1{font:400 26px/1.05 var(--rp-ff-display);text-transform:uppercase}
html.retro-pop body:not([data-console]) > main a{padding:0 18px}


/* ═══════════ 3 · LARGURAS ═══════════ */
@media (max-width:900px){
  html.retro-pop .og-hero{grid-template-columns:minmax(0,1fr)}
  html.retro-pop .og-hero > .og-hero-cover,
  html.retro-pop .og-library-page .og-hero-cover{grid-column:1;grid-row:auto;justify-self:start;
    width:clamp(170px,46vw,240px);height:clamp(110px,30vw,150px);margin:0 0 26px 4px;padding:16px}
  html.retro-pop .og-hero::before{width:300px;right:-40px;top:-30px}
}
@media (max-width:768px){
  /* duas fileiras compactas (logo / links): a tarja continua sticky, então cada pixel dela é tela perdida */
  html.retro-pop .top-navbar{padding:7px 10px 4px;row-gap:4px;flex-wrap:wrap}
  html.retro-pop .og-library-page .og-topbar{padding:10px 14px 8px;gap:8px}
  html.retro-pop .top-navbar,
  html.retro-pop .og-library-page .og-topbar{background-image:var(--cn-dots);background-size:8px 8px;border-bottom:5px solid var(--cn-ink)}
  html.retro-pop .logo-link,
  html.retro-pop .og-library-page .og-topbar a:first-child{padding:3px 10px 4px}
  html.retro-pop .logo-text,
  html.retro-pop .og-library-page .og-topbar strong{font-size:16px;text-shadow:none}
  html.retro-pop .nav-links{gap:0;flex-wrap:wrap}
  html.retro-pop .nav-link{min-height:40px;padding:0 7px;font-size:var(--rp-fs-micro)}
  html.retro-pop .og-hero{padding:30px 16px 26px}
  html.retro-pop .og-hero::after{width:84px;height:84px;font-size:12px;top:22px;right:12px}
  html.retro-pop body:is([data-console="ps2"],[data-console="ps3"],[data-console="gamecube"],[data-console="wii"],[data-console="3ds"]) .og-hero::after{font-size:11px;padding:7px 10px;width:auto;height:auto}
  html.retro-pop .og-hero h1{text-shadow:3px 3px 0 var(--rp-red)}
  html.retro-pop .og-hero-stats{gap:14px 12px}
  html.retro-pop .og-stat{flex:1 1 140px;min-width:0}
  html.retro-pop .og-about-block,
  html.retro-pop body[data-console] .og-about-block{margin-left:16px;margin-right:16px;padding:30px 20px 22px;transform:none}
  html.retro-pop .og-wfc-panel{margin-left:16px;margin-right:16px}
  html.retro-pop .og-online-beta-announcement{transform:none}
  html.retro-pop .og-games-section > h2{margin-left:0;padding:8px 18px 8px 32px;font-size:22px;transform:none}
  html.retro-pop .og-games-grid{gap:18px 14px}
  html.retro-pop .og-game-card{box-shadow:3px 4px 0 var(--cn-ink)}
  html.retro-pop .og-play-icon{width:34px;height:34px}
}

/* movimento da família: os 2 loops daqui ficam fora da guarda de retro-pop.css (carregam depois) */
@media (prefers-reduced-motion:reduce){
  html.retro-pop .og-hero::after,
  html.retro-pop .og-online-beta-kicker::before{animation:none}
  html.retro-pop :is(.og-game-card,.og-nav-pill,.og-play-text,.og-online-guide-link,.og-online-beta-action,.nav-link){transition-duration:1ms}
}