/* ============================================================================
   RETRO POP — núcleo do tema, nível 1 de 4 · oldgames.games
   ----------------------------------------------------------------------------
   O QUE É. Revista de videogame de 1994 em colagem: papel creme com retícula
   de meio-tom, tinta escura, faixas diagonais, selos e adesivos, recortes
   sobrepostos com sombra de papel (deslocamento duro, sem blur) e tipografia
   gorda inclinada. O site é ESCURO e este tema é CLARO: a inversão de
   polaridade é o problema central e NÃO se resolve neste arquivo.

   QUEM INJETA. `scripts/build/apply-hunter-hud.cjs --theme retro` põe
   class="retro-pop" + data-hud-family="<familia>" no <html> e insere o bloco
   antes de </head>, depois de todo <style> e <link> da página. O <link> do
   Google Fonts (Archivo Black, Bungee, Figtree, Space Mono) vem no mesmo
   bloco, antes desta folha — aqui não há @import de fonte de propósito:
   @import em folha injetada custa duas viagens em série (plano 2.6).

   ORDEM DAS 3 FOLHAS (esta é a primeira):
     1. /assets/css/retro-pop.css        ← ESTE: tokens + base + primitivas
     2. /assets/css/retro/_bridge.css       ponte: --gp-*, --nx-*, --c → --rp-*
     3. /assets/css/retro/<familia>.css     varredura de inversão + composição

   A PONTE VEM DEPOIS — AVISO. Este arquivo não alcança o CSS próprio das
   páginas. Os ~389 pontos de polaridade escritos na mão (`color:#fff`,
   `background:#0a0a12`) só deixam de virar texto invisível e mancha preta
   quando a folha 2 remapeia os custom properties da página e a 3 varre o
   resto. Nada aqui deve ser "reforçado" com !important para compensar: a
   cascata é da ponte.

   LIMITES (plano 1.4 e 5.x)
   · ≤ 48 KB; !important só nas 2 declarações de `body`.
   · Zero backdrop-filter, @import e arquivo externo: a arte é data-uri SVG ou
     gradiente, sempre em token. Nada esconde conteúdo (sem display:none,
     visibility:hidden, opacity:0), nada acima de z-index 5000, nenhum
     position:fixed.
   · Zero seletor que case anúncio ([data-ad-slot], .ad-*, .og-desktop-rail,
     .gp-ad-banner) ou pad de toque (#mobileControls, .gpad-*, .arcade-*,
     .touchsurface). A barra de rolagem fica em 10px, igual ao tema atual:
     outra largura cruza o limiar de 1600px e derruba os rails (plano 5.2).
   · Reset cirúrgico, sem seletor universal: as páginas já têm o CSS delas e um
     reset global mudaria a geometria de 1.307 páginas. A do player é
     intocável, então tipografia-raiz, overflow-x e scroll-behavior ficam fora
     de [data-hud-family="player"].

   AS PRIMITIVAS SÃO O ALVO DO classMap — estampadas por JS em markup que já
   existe e que este arquivo não controla. Logo:
   · nada depende de estrutura filha específica: as partes __t/__n/__a são
     classes opcionais que o classMap também estampa, com fallback por nome de
     elemento dentro de :where();
   · tudo tolera conteúdo de tamanho variável — sem altura fixa, min-width:0,
     arte de selo em background-size:100% 100%, que acompanha o rótulo;
   · as primitivas-contêiner declaram position:relative, mas as etiquetas
     (.rp-chip .rp-tag .rp-sticker .rp-seal .rp-medal .rp-live) NUNCA declaram
     position: muitos selos do site já são absolutos e perderiam o lugar;
   · .rp-mast não declara position, top, z-index nem height — as barras reais
     já são sticky, com z-index (20 a 100) e altura (64 a 108px) próprios;
   · a decoração que exige pseudo-elemento posicionado (.rp-ht .rp-specks
     .rp-tear-* .rp-taped .rp-folded) é opt-in da família, para hospedeiro
     estático, nunca classMap genérico;
   · o movimento sai só das classes de loop daqui, que carregam o token de
     pausa e são o que a guarda de reduced-motion alcança: família que escreva
     `animation:` própria fica fora da guarda, porque carrega depois.
   ============================================================================ */


/* --- 1. TOKENS (plano 2.2, valores finais). Em `html.retro-pop`, não em
   `:root`: (0,1,1) vence o `:root` da página (0,1,0) sem depender de ordem de
   carga, e `?nohud=1` remove a classe e devolve a página ao CSS original. --- */
html.retro-pop{
  /* OBRIGATÓRIO: o tema atual põe `dark`; em papel creme isso pintaria select,
     barra de rolagem e date-picker de escuro. */
  color-scheme:light;

  /* tinta e papel */
  --rp-ink:#17131f;  --rp-ink-2:#3b3348;  --rp-ink-3:#5d5470;
  --rp-ink-soft:rgba(23,19,31,.12);
  --rp-paper:#f5ebd7; --rp-paper-2:#e9dcc1; --rp-paper-3:#dccfb2; --rp-paper-w:#fffaf0;

  /* tintas da banca — emprego fixo no plano 2.5: purple só Premium, lime só
     ao vivo, orange só launcher/download, teal só o mascote */
  --rp-red:#ff2e4d;    --rp-red-deep:#c80f2e;
  --rp-pink:#ff5d8f;   --rp-yellow:#ffd23f;
  --rp-cyan:#00b8d9;   --rp-cyan-deep:#0076a8;
  --rp-teal:#3fd0c4;   --rp-teal-dk:#2bb3a8;
  --rp-purple:#6b2bd9; --rp-lime:#b7e62e; --rp-lime-soft:#eaf6c6;
  --rp-orange:#ff7a1a;

  /* tipo */
  --rp-ff-display:'Archivo Black','Arial Black',system-ui,sans-serif;
  --rp-ff-sticker:'Bungee','Archivo Black',system-ui,sans-serif;
  --rp-ff-body:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  --rp-ff-mono:'Space Mono',ui-monospace,'Courier New',monospace;
  --rp-fs-mast:clamp(42px,8.6vw,108px); --rp-fs-h1:clamp(34px,6.2vw,76px);
  --rp-fs-h2:clamp(26px,3.4vw,46px);    --rp-fs-h3:clamp(18px,1.5vw,23px);
  --rp-fs-num:clamp(28px,3vw,44px);     --rp-fs-kicker:clamp(10px,.82vw,12px);
  --rp-fs-body:clamp(15px,1.05vw,17px); --rp-fs-small:13px; --rp-fs-micro:11px;
  --rp-lh-display:.86; --rp-lh-head:.96; --rp-lh-body:1.55; --rp-lh-tight:1.2;
  --rp-tr-kicker:.18em; --rp-tr-display:-.012em; --rp-tr-sticker:.04em;
  --rp-skew:-7deg;

  /* espaço */
  --rp-s-1:4px;  --rp-s-2:8px;  --rp-s-3:12px; --rp-s-4:16px; --rp-s-5:24px;
  --rp-s-6:32px; --rp-s-7:48px; --rp-s-8:64px; --rp-s-9:96px; --rp-s-10:128px;
  --rp-gutter:clamp(16px,3.4vw,44px);
  --rp-colw:min(1360px,100% - var(--rp-gutter)*2);
  --rp-sec-y:clamp(56px,7vw,112px);

  /* raio — revista é quase zero; pill é a única exceção, e é intencional */
  --rp-r-0:0; --rp-r-1:3px; --rp-r-2:8px; --rp-r-3:14px; --rp-r-pill:999px;

  /* sombra de papel: deslocamento duro, sem blur */
  --rp-sh-1:2px 3px 0 var(--rp-ink);
  --rp-sh-2:4px 5px 0 var(--rp-ink);
  --rp-sh-3:7px 8px 0 var(--rp-ink);
  --rp-sh-lift:10px 12px 0 rgba(23,19,31,.22);
  --rp-sh-ghost:4px 5px 0 rgba(23,19,31,.18);
  --rp-sh-soft:0 10px 26px -10px rgba(23,19,31,.4); /* única com blur, estática */
  --rp-bd:3px solid var(--rp-ink);
  --rp-bd-2:5px solid var(--rp-ink);

  /* tempo */
  --rp-t-fast:120ms; --rp-t:180ms; --rp-t-slow:320ms; --rp-t-in:520ms;
  --rp-e-out:cubic-bezier(.22,.9,.26,1);
  --rp-e-pop:cubic-bezier(.34,1.56,.64,1);
  --rp-e-io:cubic-bezier(.65,0,.35,1);

  /* instância: giro, índice de cascata e cor de avatar, escritos inline */
  --rp-tilt:0deg; --rp-i:0; --rp-av:var(--rp-cyan);

  /* movimento */
  --rp-play:running;

  /* medidas da camada (não estão em 2.2; as primitivas precisam delas) */
  --rp-mast-h:72px;  /* altura de referência da tarja, só para scroll-margin */
  --rp-pull-w:190px; /* largura do recorte destacável dentro de .rp-rail */
  --rp-pop:transform var(--rp-t) var(--rp-e-out),box-shadow var(--rp-t) var(--rp-e-out);

  /* texturas por gradiente: 2,6 KB menos que data-uri. CUIDADO: `var()` em
     custom property é substituído em quem DECLARA, não em quem usa — nada aqui
     inverte sozinho: as retículas são redeclaradas em creme na seção 2 e
     `--rp-pat-check` usa `currentColor`. O passo (8px e 5px no
     `background-size` de quem usa) dá a densidade de ponto do conceito. */
  --rp-pat-ht:radial-gradient(circle at 50% 50%,var(--rp-ink) 2.2px,transparent 2.4px);
  --rp-pat-ht-fine:radial-gradient(circle at 50% 50%,var(--rp-ink) 1.5px,transparent 1.7px);
  --rp-pat-candy:repeating-linear-gradient(135deg,var(--rp-red) 0 14px,var(--rp-yellow) 14px 28px);
  --rp-pat-candy-c:repeating-linear-gradient(135deg,var(--rp-cyan) 0 14px,var(--rp-paper-w) 14px 28px);
  --rp-pat-news:repeating-linear-gradient(90deg,rgba(23,19,31,.035) 0 1px,transparent 1px 7px);
  --rp-pat-check:conic-gradient(currentColor 0 25%,transparent 0 50%,currentColor 0 75%,transparent 0);
  --rp-pat-rays:repeating-conic-gradient(from 0deg,rgba(255,210,63,.55) 0deg 10deg,transparent 10deg 20deg);

  /* texturas e ornamentos em data-uri SVG. `-light` é a retícula creme, para
     superfície escura. Adesivo e selo vêm em duas tintas porque data-uri não lê
     var(): mask-image daria uma arte só, mas mascararia o texto do selo. */
  --rp-pat-zig:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='40'%20height='12'%20viewBox='0%200%2040%2012'%3E%3Cpath%20d='M0%2011L10%202L20%2011L30%202L40%2011'%20fill='none'%20stroke='%2317131f'%20stroke-width='3'%20stroke-linejoin='round'%20stroke-linecap='round'/%3E%3C/svg%3E");
  --rp-edge-torn:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='240'%20height='20'%20viewBox='0%200%20240%2020'%3E%3Cpath%20d='M0%2020L0%2015.3L15%202.9L30%2011.2L45%202.8L60%2010.1L75%205.4L90%2014.9L105%203.6L120%2010.7L135%203.7L150%2012.6L165%203.5L180%2014.3L195%202.2L210%2010.9L225%203.3L240%2011.9L240%2020Z'%20fill='%2317131f'/%3E%3C/svg%3E");
  --rp-pat-specks:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='120'%20viewBox='0%200%20120%20120'%3E%3Cg%20fill='%2317131f'%3E%3Crect%20x='111'%20y='59'%20width='1.8'%20height='1.5'/%3E%3Crect%20x='70'%20y='74'%20width='1.2'%20height='2.4'/%3E%3Crect%20x='46'%20y='52'%20width='1.3'%20height='1.7'/%3E%3Crect%20x='94'%20y='16'%20width='1.4'%20height='1.9'/%3E%3Crect%20x='49'%20y='24'%20width='0.9'%20height='1.2'/%3E%3Crect%20x='58'%20y='76'%20width='1.9'%20height='1.2'/%3E%3Crect%20x='113'%20y='59'%20width='2.4'%20height='2.2'/%3E%3Crect%20x='100'%20y='114'%20width='1.3'%20height='2.1'/%3E%3C/g%3E%3C/svg%3E");
  --rp-art-burst:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%20preserveAspectRatio='none'%3E%3Cpath%20d='M50%202L59%2019L76%2010L74%2029L94%2030L82%2045L98%2057L79%2063L86%2081L67%2077L64%2096L50%2082L36%2096L33%2077L14%2081L21%2063L2%2057L18%2045L6%2030L26%2029L24%2010L41%2019Z'%20fill='%23ffd23f'%20stroke='%2317131f'%20stroke-width='4'%20stroke-linejoin='round'/%3E%3C/svg%3E");
  --rp-art-burst-red:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%20preserveAspectRatio='none'%3E%3Cpath%20d='M50%202L59%2019L76%2010L74%2029L94%2030L82%2045L98%2057L79%2063L86%2081L67%2077L64%2096L50%2082L36%2096L33%2077L14%2081L21%2063L2%2057L18%2045L6%2030L26%2029L24%2010L41%2019Z'%20fill='%23ff2e4d'%20stroke='%2317131f'%20stroke-width='4'%20stroke-linejoin='round'/%3E%3C/svg%3E");
  --rp-art-seal:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%20preserveAspectRatio='none'%3E%3Cpath%20d='M50%202L60%2012L74%208L78%2022L92%2026L88%2040L98%2050L88%2060L92%2074L78%2078L74%2092L60%2088L50%2098L40%2088L26%2092L22%2078L8%2074L12%2060L2%2050L12%2040L8%2026L22%2022L26%208L40%2012Z'%20fill='%23ff2e4d'%20stroke='%2317131f'%20stroke-width='3.4'%20stroke-linejoin='round'/%3E%3Ccircle%20cx='50'%20cy='50'%20r='37'%20fill='none'%20stroke='%2317131f'%20stroke-width='2'%20stroke-dasharray='5%205'%20opacity='.5'/%3E%3C/svg%3E");
  --rp-art-seal-purple:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%20preserveAspectRatio='none'%3E%3Cpath%20d='M50%202L60%2012L74%208L78%2022L92%2026L88%2040L98%2050L88%2060L92%2074L78%2078L74%2092L60%2088L50%2098L40%2088L26%2092L22%2078L8%2074L12%2060L2%2050L12%2040L8%2026L22%2022L26%208L40%2012Z'%20fill='%236b2bd9'%20stroke='%2317131f'%20stroke-width='3.4'%20stroke-linejoin='round'/%3E%3Ccircle%20cx='50'%20cy='50'%20r='37'%20fill='none'%20stroke='%2317131f'%20stroke-width='2'%20stroke-dasharray='5%205'%20opacity='.5'/%3E%3C/svg%3E");
  --rp-art-medal:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2088%20140'%3E%3Cg%20stroke='%2317131f'%20stroke-width='3'%20stroke-linejoin='round'%3E%3Cpath%20d='M26%2074l-12%2058%2016-12%2014%2012-6-58z'%20fill='%23ff2e4d'/%3E%3Cpath%20d='M62%2074l12%2058-16-12-14%2012%206-58z'%20fill='%2300b8d9'/%3E%3C/g%3E%3Cg%20fill='%23ffd23f'%3E%3Ccircle%20cx='78'%20cy='44'%20r='6'/%3E%3Ccircle%20cx='72'%20cy='64'%20r='6'/%3E%3Ccircle%20cx='55'%20cy='76'%20r='6'/%3E%3Ccircle%20cx='33'%20cy='76'%20r='6'/%3E%3Ccircle%20cx='16'%20cy='64'%20r='6'/%3E%3Ccircle%20cx='10'%20cy='44'%20r='6'/%3E%3Ccircle%20cx='16'%20cy='24'%20r='6'/%3E%3Ccircle%20cx='33'%20cy='12'%20r='6'/%3E%3Ccircle%20cx='55'%20cy='12'%20r='6'/%3E%3Ccircle%20cx='72'%20cy='24'%20r='6'/%3E%3Ccircle%20cx='44'%20cy='44'%20r='34'/%3E%3C/g%3E%3Ccircle%20cx='44'%20cy='44'%20r='40'%20fill='none'%20stroke='%2317131f'%20stroke-width='3'/%3E%3C/svg%3E");
  --rp-art-tape:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%2040'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%206l10%203%2010-4%2010%203%2010-4%2010%203%2010-4%2010%203%2010-4%2010%203%2010-4%2010%203v22l-10%203-10-4-10%203-10-4-10%203-10-4-10%203-10-4-10%203-10-4-10%203z'%20fill='%23fffaf0'%20fill-opacity='.9'%20stroke='%2317131f'%20stroke-width='2'%20stroke-opacity='.55'/%3E%3C/svg%3E");
  --rp-art-ribcap:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2046%2076'%20preserveAspectRatio='none'%3E%3Cpath%20d='M46%202H4L22%2038%204%2074h42z'%20fill='%23c80f2e'%20stroke='%2317131f'%20stroke-width='4'%20stroke-linejoin='round'/%3E%3C/svg%3E");
  --rp-art-search:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2317131f'%20stroke-width='2.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='10.5'%20cy='10.5'%20r='6.5'/%3E%3Cpath%20d='M15.5%2015.5L21%2021'/%3E%3C/svg%3E");
  --rp-art-chevron:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2317131f'%20stroke-width='2.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%209l7%207%207-7'/%3E%3C/svg%3E");
}
/* `rp-calm`: família player e durante o jogo. `rp-hidden`: aba fora de foco.
   `rp-paused`: fora da viewport. A pausa é por token e desce por herança — o
   JS só troca classe, e aqui não há !important para forçá-la. */
html.retro-pop.rp-calm,html.retro-pop.rp-hidden,html.retro-pop .rp-paused{--rp-play:paused}

/* --- 2. VARIANTE ESCURA (plano 2.3): os mesmos nomes de token, redeclarados,
   fazem os mesmos componentes funcionarem nos dois contextos sem segunda
   folha — rodapé, pôster, chat, modais do emulador, arena, família player.
   `--rp-paper` sobre `--rp-ink` = 15,44:1, o par mais forte da paleta. No
   player os tokens vão em <html> E em <body>: parte do CSS das páginas declara
   os seus em `body`, e um token só em <html> ficaria sombreado. --- */
html.retro-pop .rp-dark,html.retro-pop .rp-colophon,html.retro-pop .rp-con__band,
html.retro-pop[data-hud-family="player"],html.retro-pop[data-hud-family="player"] body{
  --rp-paper:#17131f; --rp-paper-2:#221c2c; --rp-paper-3:#2e2639; --rp-paper-w:#17131f;
  --rp-ink:#f5ebd7;   --rp-ink-2:#dccfb2;   --rp-ink-3:#b5a68c;
  --rp-ink-soft:rgba(245,235,215,.14);
  --rp-sh-1:2px 3px 0 #000; --rp-sh-2:4px 5px 0 #000; --rp-sh-3:7px 8px 0 #000;
  --rp-sh-ghost:4px 5px 0 rgba(0,0,0,.45);
  --rp-bd:3px solid #f5ebd7; --rp-bd-2:5px solid #f5ebd7;
  /* tinta literal: var() em custom property não reavalia aqui */
  --rp-pat-ht:radial-gradient(circle,#f5ebd7 2.2px,transparent 2.4px);
  --rp-pat-ht-fine:radial-gradient(circle,#f5ebd7 1.5px,transparent 1.7px);
  color-scheme:dark;
}
/* superfície própria: as irmãs da lista acima já declaram a sua (5.13 e 5.5) e
   `.rp-dark` é estampado por classMap em seção que pode não ter fundo nenhum. */
html.retro-pop .rp-dark{background-color:var(--rp-paper);color:var(--rp-ink)}

/* --- 3. BASE: papel, tinta, seleção, foco, barra de rolagem --- */
html.retro-pop{accent-color:var(--rp-red);-webkit-text-size-adjust:100%;text-size-adjust:100%;background-color:var(--rp-paper);scrollbar-color:var(--rp-ink) var(--rp-paper-2)}
/* As duas únicas declarações !important do arquivo. O shorthand de fundo é a
   arma contra "mancha preta": apaga o gradiente escuro posto em body. */
html.retro-pop body{color:var(--rp-ink)!important;background:var(--rp-pat-news),radial-gradient(120% 70% at 50% -10%,rgba(255,210,63,.2),transparent 60%),radial-gradient(90% 60% at 100% 100%,rgba(0,184,217,.12),transparent 60%) var(--rp-paper)!important}
/* Fora do player: mudar métrica de texto muda altura de cabeçalho, e em
   namco-system12 o header é 210px hardcoded no cálculo do canvas. */
html.retro-pop:not([data-hud-family="player"]) body{font-family:var(--rp-ff-body);font-size:var(--rp-fs-body);line-height:var(--rp-lh-body)}
/* `clip`, nunca `hidden`, e só em <html>: `hidden` num ancestral quebraria o
   position:sticky das barras de quase toda família (plano 5.8). */
html.retro-pop:not([data-hud-family="player"]){overflow-x:clip;scroll-behavior:smooth}
/* As paginas tem body{overflow-x:hidden}; com o html em clip isso nao propaga e o body vira
   conteiner de rolagem, matando o sticky. clip no body nao rola (achado do piloto). */
html.retro-pop:not([data-hud-family="player"]) body{overflow-x:clip}
html.retro-pop :where(section,aside,header,footer,article,main,h2,h3)[id]{scroll-margin-top:calc(var(--rp-mast-h) + 16px)}
html.retro-pop ::selection{background:var(--rp-yellow);color:#17131f}
/* no escuro `--rp-ink` é creme (ilegível no amarelo); `--rp-paper` é a tinta */
html.retro-pop :where(.rp-dark,.rp-colophon) ::selection{background:var(--rp-yellow);color:var(--rp-paper)}
html.retro-pop :where(a,button,input,select,textarea,summary,[tabindex]:not([tabindex="-1"])):focus-visible{outline:3px dashed var(--rp-ink);outline-offset:3px}
html.retro-pop :where(.rp-dark,.rp-colophon) :where(a,button,input,select,textarea,summary,[tabindex]:not([tabindex="-1"])):focus-visible{outline-color:var(--rp-yellow)}
/* 10px: igual ao tema atual. Mexer aqui derruba os rails de anúncio. */
html.retro-pop::-webkit-scrollbar,html.retro-pop ::-webkit-scrollbar{width:10px;height:10px}
html.retro-pop::-webkit-scrollbar-track,html.retro-pop ::-webkit-scrollbar-track{background:var(--rp-paper-2)}
html.retro-pop::-webkit-scrollbar-thumb,html.retro-pop ::-webkit-scrollbar-thumb{background:var(--rp-ink)}
/* reset cirúrgico: só o que as primitivas precisam para não deformar */
html.retro-pop :where(.rp-btn,.rp-icon-btn,.rp-chip,.rp-tag,.rp-field,.rp-search,.rp-tab,.rp-stat,.rp-con,.rp-card,.rp-plan,.rp-tablebox,.rp-pull,.rp-balloon,.rp-empty,.rp-medal,.rp-sticker,.rp-seal,.rp-mast,.rp-colophon){box-sizing:border-box}
html.retro-pop :where(.rp-btn,.rp-icon-btn,.rp-field,.rp-search,.rp-tab){font-family:inherit}

/* --- 4. UTILITÁRIOS DE PAPEL (opt-in da família). Decoração:
   pointer-events:none, fora da árvore de acessibilidade, opacidade ≤ .12 —
   nunca cobre texto. --- */
html.retro-pop :where(.rp-ht,.rp-specks,.rp-tear-top,.rp-tear-bottom,.rp-taped,.rp-folded){position:relative}
html.retro-pop .rp-ht::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:var(--rp-pat-ht);background-size:8px 8px;opacity:.1}
html.retro-pop .rp-ht--soft::before{opacity:.06}
html.retro-pop .rp-ht--fine::before{background-image:var(--rp-pat-ht-fine);background-size:5px 5px;opacity:.07}
html.retro-pop .rp-specks::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:var(--rp-pat-specks);background-size:120px 120px;opacity:.05}
html.retro-pop .rp-tear-top::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 .rp-tear-bottom::after{content:"";position:absolute;left:0;right:0;bottom:-19px;height:20px;pointer-events:none;background:var(--rp-edge-torn) repeat-x 0 0/240px 20px}
html.retro-pop .rp-div-zig{height:12px;opacity:.5;background:var(--rp-pat-zig) repeat-x 0 0/40px 12px}
html.retro-pop .rp-candy{height:10px;background-image:var(--rp-pat-candy)}
html.retro-pop .rp-rule,html.retro-pop .rp-cut{display:flex;align-items:center;gap:var(--rp-s-3);color:var(--rp-ink)}
html.retro-pop .rp-rule::before,html.retro-pop .rp-rule::after{content:"";flex:1;height:9px;border-top:3px solid currentColor;border-bottom:3px solid currentColor}
html.retro-pop .rp-cut::before,html.retro-pop .rp-cut::after{content:"";flex:1;border-top:4px dashed currentColor;opacity:.45}
html.retro-pop .rp-wrap{width:var(--rp-colw);margin-inline:auto}
html.retro-pop .rp-prose{max-width:68ch;color:var(--rp-ink)}
/* fita e canto dobrado: versão elemento e versão modificador de hospedeiro,
   para quando não há nó livre no markup. O grampo do conceito fica para a
   família: não é textura de identidade e é a peça mais barata de refazer. */
html.retro-pop .rp-tape{display:block;width:120px;height:38px;transform:rotate(-9deg);background:var(--rp-art-tape) center/100% 100% no-repeat}
html.retro-pop .rp-foldcorner{display:block;width:38px;height:38px;background:linear-gradient(315deg,var(--rp-paper-3) 50%,transparent 50%);border-left:3px solid var(--rp-ink)}
html.retro-pop .rp-taped::before{content:"";position:absolute;left:-18px;top:-14px;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 .rp-folded::after{content:"";position:absolute;right:0;bottom:0;width:36px;height:36px;z-index:3;pointer-events:none;background:linear-gradient(315deg,var(--rp-paper-3) 50%,transparent 50%)}

/* --- 5. PRIMITIVAS .rp-* — o alvo do classMap --- */
/* 5.1 texto. `--rp-ink-3` tem 5,98 no papel: autorizado só em legenda e
   micro-texto (≤ 13px), e é só aí que ele aparece. */
html.retro-pop .rp-kicker{font:800 var(--rp-fs-kicker)/1 var(--rp-ff-body);text-transform:uppercase;letter-spacing:var(--rp-tr-kicker);color:var(--rp-ink-2)}
html.retro-pop .rp-note{font:600 var(--rp-fs-micro)/1.3 var(--rp-ff-body);text-transform:uppercase;letter-spacing:.1em;color:var(--rp-ink-3)}
html.retro-pop .rp-mono{font-family:var(--rp-ff-mono);font-variant-numeric:tabular-nums}
html.retro-pop .rp-h1{font:400 var(--rp-fs-h1)/var(--rp-lh-display) var(--rp-ff-display);text-transform:uppercase;letter-spacing:var(--rp-tr-display);color:var(--rp-ink)}
html.retro-pop .rp-h2{font:400 var(--rp-fs-h2)/var(--rp-lh-head) var(--rp-ff-display);text-transform:uppercase;letter-spacing:var(--rp-tr-display);color:var(--rp-ink)}
html.retro-pop .rp-h3{font:400 var(--rp-fs-h3)/var(--rp-lh-head) var(--rp-ff-display);text-transform:uppercase;color:var(--rp-ink)}
html.retro-pop .rp-blockh2{display:inline-block;padding:6px var(--rp-s-4);border:var(--rp-bd-2);background:var(--rp-ink);color:var(--rp-paper-w);box-shadow:var(--rp-sh-2);font:400 var(--rp-fs-h3)/1.05 var(--rp-ff-display);text-transform:uppercase;transform:skewX(var(--rp-skew))}
html.retro-pop .rp-blockh2--yellow{background:var(--rp-yellow);color:var(--rp-ink)}
/* faixa de título: ponta chanfrada como camada de fundo, não pseudo-elemento,
   para funcionar num <h2> que a página já posicionou */
html.retro-pop .rp-ribbon{display:inline-block;padding:9px 34px;border-top:4px solid var(--rp-ink);border-bottom:4px solid var(--rp-ink);background:var(--rp-red) var(--rp-art-ribcap) no-repeat left center/26px 100%;color:#17131f;font:400 var(--rp-fs-h2)/1.05 var(--rp-ff-display);text-transform:uppercase;letter-spacing:var(--rp-tr-display);transform:rotate(-1.4deg)}
html.retro-pop .rp-ribbon--cyan{background-color:var(--rp-cyan)}
html.retro-pop .rp-ribbon--yellow{background-color:var(--rp-yellow)}

/* 5.2 botões (plano 3.10): red primário, cyan navegação, lime ao vivo, yellow
   novidade, orange launcher, papel couché secundário. Mínimo 44x44 em toda
   largura. `background` é shorthand de propósito: apaga o gradiente escuro que
   a página tenha posto no botão. */
html.retro-pop .rp-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--rp-s-2);min-height:44px;min-width:44px;padding:10px var(--rp-s-5);border:var(--rp-bd);border-radius:var(--rp-r-1);background:var(--rp-paper-w);color:var(--rp-ink);box-shadow:var(--rp-sh-2);font:800 var(--rp-fs-small)/1 var(--rp-ff-body);text-transform:uppercase;letter-spacing:var(--rp-tr-sticker);text-align:center;text-decoration:none;cursor:pointer;transition:var(--rp-pop),background-color var(--rp-t-fast) linear}
html.retro-pop .rp-btn:hover{transform:translate(-2px,-3px);box-shadow:var(--rp-sh-3)}
html.retro-pop .rp-btn:active{transform:translate(3px,4px);box-shadow:1px 1px 0 var(--rp-ink)}
html.retro-pop .rp-btn[disabled],html.retro-pop .rp-btn[aria-disabled="true"]{background:var(--rp-paper-3);color:var(--rp-ink-2);box-shadow:var(--rp-sh-1);transform:none;cursor:not-allowed}
html.retro-pop .rp-btn[aria-busy="true"]{cursor:progress;background-image:var(--rp-pat-ht);background-size:12px 12px}
html.retro-pop .rp-btn--red{background:var(--rp-red)}
html.retro-pop .rp-btn--yellow{background:var(--rp-yellow)}
html.retro-pop .rp-btn--cyan{background:var(--rp-cyan)}
html.retro-pop .rp-btn--lime{background:var(--rp-lime)}
html.retro-pop .rp-btn--orange{background:var(--rp-orange)}
/* creme sobre tinta: só estes quatro fundos passam AA (plano 2.4) */
html.retro-pop .rp-btn--red-deep{background:var(--rp-red-deep);color:var(--rp-paper-w)}
html.retro-pop .rp-btn--cyan-deep{background:var(--rp-cyan-deep);color:var(--rp-paper-w)}
html.retro-pop .rp-btn--purple{background:var(--rp-purple);color:var(--rp-paper-w)}
html.retro-pop .rp-btn--ink{background:var(--rp-ink);color:var(--rp-paper-w)}
html.retro-pop .rp-btn--ghost{background:transparent;box-shadow:none}
html.retro-pop .rp-btn--big{padding:14px var(--rp-s-6);font-size:var(--rp-fs-body)}
html.retro-pop .rp-icon-btn{display:inline-grid;place-items:center;min-height:44px;min-width:44px;padding:8px;border:var(--rp-bd);border-radius:var(--rp-r-1);background:var(--rp-paper-w);color:var(--rp-ink);box-shadow:var(--rp-sh-1);cursor:pointer;transition:var(--rp-pop)}
html.retro-pop .rp-icon-btn:hover{transform:translate(-2px,-2px);box-shadow:var(--rp-sh-2)}
html.retro-pop .rp-icon-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--rp-ink)}
html.retro-pop .rp-icon-btn--pink{background:var(--rp-pink)}

/* 5.3 chip, etiqueta, adesivo, selo, medalha */
html.retro-pop .rp-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:2px solid var(--rp-ink);background:var(--rp-cyan);color:#17131f;font:800 var(--rp-fs-micro)/1.25 var(--rp-ff-body);text-transform:uppercase;letter-spacing:var(--rp-tr-sticker)}
html.retro-pop .rp-chip--lime{background:var(--rp-lime)}
html.retro-pop .rp-chip--yellow{background:var(--rp-yellow)}
html.retro-pop .rp-chip--orange{background:var(--rp-orange)}
html.retro-pop .rp-chip--paper{background:var(--rp-paper-w);color:var(--rp-ink)}
html.retro-pop .rp-tag{display:inline-flex;align-items:center;gap:var(--rp-s-2);padding:7px var(--rp-s-3) 7px 24px;border:var(--rp-bd);border-radius:var(--rp-r-1);background:var(--rp-paper-w) radial-gradient(circle 4px at 12px 50%,var(--rp-ink) 97%,transparent) no-repeat;box-shadow:var(--rp-sh-1);color:var(--rp-ink);font:800 var(--rp-fs-small)/1.25 var(--rp-ff-body);transform:rotate(-2deg)}
/* adesivo e selo: arte em camada de fundo a 100% 100%, então a peça acompanha
   qualquer comprimento de rótulo sem recortar texto */
html.retro-pop .rp-sticker{display:inline-grid;place-items:center;min-width:72px;min-height:72px;padding:14px 16px;background:var(--rp-art-burst) center/100% 100% no-repeat;color:#17131f;font:400 clamp(11px,1vw,15px)/1.05 var(--rp-ff-sticker);letter-spacing:var(--rp-tr-sticker);text-transform:uppercase;text-align:center}
html.retro-pop .rp-sticker--hot{background-image:var(--rp-art-burst-red)}
html.retro-pop .rp-seal{display:inline-grid;place-items:center;min-width:96px;min-height:96px;padding:18px 20px;background:var(--rp-art-seal) center/100% 100% no-repeat;color:#17131f;font:400 clamp(10px,.9vw,13px)/1.1 var(--rp-ff-sticker);letter-spacing:var(--rp-tr-sticker);text-transform:uppercase;text-align:center}
html.retro-pop .rp-seal--value{background-image:var(--rp-art-seal-purple);color:#fffaf0}
/* o padding centra o numeral no disco: em `em`, nunca em %, que resolveria
   contra a largura do PAI */
html.retro-pop .rp-medal{display:inline-grid;place-items:center;width:30px;min-width:30px;aspect-ratio:88/140;padding-bottom:1.2em;background:var(--rp-art-medal) center/100% 100% no-repeat;color:#17131f;font:400 15px/1 var(--rp-ff-display)}

/* 5.4 capa e logo. Sem aspect-ratio por padrão: forçar 3/4 em 1.300 páginas
   recortaria capa quadrada e paisagem — a proporção é opt-in. */
html.retro-pop .rp-cover{position:relative;display:block;padding:4px;border:var(--rp-bd);background:var(--rp-paper-w);box-shadow:var(--rp-sh-2);transform:rotate(var(--rp-tilt));transition:var(--rp-pop)}
html.retro-pop .rp-cover > :where(img,picture,video){display:block;width:100%;height:auto;background:var(--rp-paper-3);border:1px solid var(--rp-ink-soft);font:600 11px/1.3 var(--rp-ff-body);color:var(--rp-ink-2)}
html.retro-pop img.rp-cover{object-fit:cover}
html.retro-pop .rp-cover--3x4 > :where(img,picture,video){aspect-ratio:3/4;object-fit:cover;object-position:50% 18%}
html.retro-pop .rp-cover--sq > :where(img,picture,video){aspect-ratio:1/1;object-fit:cover}
html.retro-pop .rp-cover--wide > :where(img,picture,video){aspect-ratio:4/3;object-fit:contain;background:var(--rp-ink)}
html.retro-pop .rp-cover:hover,html.retro-pop .rp-cover:focus-within{transform:rotate(var(--rp-tilt)) translate(-3px,-4px);box-shadow:var(--rp-sh-3)}
/* logos locais são monocromáticos: brightness(0) funciona nos 27 SVG e no PNG
   (preserva alpha). mask-image não é garantido no PNG — não usar. */
html.retro-pop .rp-logo{filter:brightness(0) saturate(100%)}
html.retro-pop :where(.rp-dark,.rp-colophon) .rp-logo{filter:brightness(0) invert(1)}
html.retro-pop .rp-con:hover .rp-logo,html.retro-pop .rp-con:focus-within .rp-logo{filter:none}

/* 5.5 cartão, card de console e recorte destacável */
html.retro-pop .rp-card{position:relative;padding:var(--rp-s-5);border:var(--rp-bd-2);background:var(--rp-paper-w);color:var(--rp-ink);box-shadow:var(--rp-sh-3)}
html.retro-pop .rp-card--tilt{transform:rotate(-.6deg)}
html.retro-pop .rp-card--paper{background:var(--rp-paper-2)}
html.retro-pop .rp-con{position:relative;display:flex;flex-direction:column;min-width:0;border:var(--rp-bd);background:var(--rp-paper-w);color:var(--rp-ink);box-shadow:var(--rp-sh-2);text-decoration:none;transform:rotate(var(--rp-tilt));transition:var(--rp-pop)}
html.retro-pop .rp-con:hover,html.retro-pop .rp-con:focus-within{transform:rotate(var(--rp-tilt)) translate(-3px,-4px);box-shadow:var(--rp-sh-3)}
html.retro-pop .rp-con--yellow{background:var(--rp-yellow)}
/* a faixa é superfície escura (seção 2), então a retícula inverte sozinha;
   16px, e não 8px, para o texto não disputar com o ponto */
html.retro-pop .rp-con__band{padding:var(--rp-s-3);background-color:var(--rp-paper);color:var(--rp-ink);background-image:var(--rp-pat-ht);background-size:16px 16px}
html.retro-pop .rp-con__body{display:flex;flex-direction:column;gap:var(--rp-s-2);padding:var(--rp-s-4)}
html.retro-pop .rp-con__foot{margin-top:auto;display:flex;align-items:center;gap:var(--rp-s-2);flex-wrap:wrap;padding-top:var(--rp-s-2);border-top:2px dashed var(--rp-ink-soft)}
html.retro-pop .rp-con__t,html.retro-pop .rp-pull__t{font:400 var(--rp-fs-h3)/var(--rp-lh-head) var(--rp-ff-display);text-transform:uppercase;color:inherit}
html.retro-pop .rp-con__n,html.retro-pop .rp-pull__n{font:700 var(--rp-fs-num)/.92 var(--rp-ff-mono);font-variant-numeric:tabular-nums;color:inherit}
html.retro-pop .rp-pull{position:relative;min-width:0;scroll-snap-align:start;transform:rotate(var(--rp-tilt));transition:transform var(--rp-t) var(--rp-e-out)}
html.retro-pop .rp-pull:hover,html.retro-pop .rp-pull:focus-within{transform:rotate(var(--rp-tilt)) translate(-2px,-4px)}
/* fallback de 1 linha de classMap: a capa ganha moldura só com `.rp-pull` */
html.retro-pop .rp-pull > :where(img){display:block;width:100%;height:auto;padding:4px;border:var(--rp-bd);background:var(--rp-paper-w);box-shadow:var(--rp-sh-2)}
html.retro-pop .rp-pull__c{display:block;font:700 var(--rp-fs-micro)/1.2 var(--rp-ff-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--rp-ink-3)}
/* trilho: carrossel intencional — entra na lista de exceção da medição 4 */
html.retro-pop .rp-rail{display:flex;gap:var(--rp-s-5);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-block:var(--rp-s-2) var(--rp-s-5)}
html.retro-pop .rp-rail > *{flex:0 0 auto;min-width:0}
html.retro-pop .rp-rail > .rp-pull{flex-basis:var(--rp-pull-w)}

/* 5.6 mosaico: 12 colunas + dense. O giro do contêiner é opt-in por --rp-tilt
   (default 0deg) — com 292 cards um giro força um retângulo de composição
   gigante e reabre rolagem horizontal (plano 3.4). O realce alcança só os 4
   primeiros destaques: cards 1, 6, 11 e 16. */
html.retro-pop .rp-racks{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-flow:dense;gap:var(--rp-s-5);transform:rotate(var(--rp-tilt))}
html.retro-pop .rp-racks > *{grid-column:span 3;min-width:0}
html.retro-pop .rp-racks > :nth-child(5n+1):nth-child(-n+16){grid-column:span 4;grid-row:span 2}
html.retro-pop .rp-tab{min-height:44px;min-width:44px;padding:0 var(--rp-s-4);border:var(--rp-bd);background:var(--rp-paper-w);color:var(--rp-ink);box-shadow:var(--rp-sh-1);cursor:pointer;font:800 var(--rp-fs-small)/1 var(--rp-ff-body);text-transform:uppercase;letter-spacing:var(--rp-tr-sticker);transition:var(--rp-pop),background-color var(--rp-t-fast) linear}
html.retro-pop .rp-tab:hover{transform:translate(-2px,-2px)}
html.retro-pop .rp-tab[aria-pressed="true"],html.retro-pop .rp-tab[aria-selected="true"],html.retro-pop .rp-tab.is-active{background:var(--rp-cyan)}

/* 5.7 estatística — o número grande é mono tabular, como na tabela de notas */
html.retro-pop .rp-stat{position:relative;min-width:146px;padding:12px var(--rp-s-4) 12px 26px;border:var(--rp-bd);box-shadow:var(--rp-sh-2);color:var(--rp-ink);background:var(--rp-paper-w) linear-gradient(90deg,var(--rp-ink) 0 10px,transparent 10px) no-repeat;transform:rotate(var(--rp-tilt))}
html.retro-pop .rp-stat--yellow{background-color:var(--rp-yellow)}
html.retro-pop .rp-stat > :where(.rp-stat__n,b,strong){display:block;font:700 var(--rp-fs-num)/.95 var(--rp-ff-mono);font-variant-numeric:tabular-nums;color:inherit}
html.retro-pop .rp-stat > :where(.rp-stat__l,small){display:block;margin-top:4px;font:700 var(--rp-fs-micro)/1.2 var(--rp-ff-mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--rp-ink-2)}

/* 5.8 plano / cupom destacável (roxo é exclusivo de Premium) */
html.retro-pop .rp-plan{position:relative;padding:var(--rp-s-6) var(--rp-s-5);border:var(--rp-bd-2);background:var(--rp-paper-w);color:var(--rp-ink);box-shadow:var(--rp-sh-2);transform:rotate(var(--rp-tilt))}
html.retro-pop .rp-plan--pro{background:var(--rp-purple);color:#fffaf0;box-shadow:var(--rp-sh-3)}
html.retro-pop .rp-plan :where(h2,h3,h4,.rp-plan__name){font:400 var(--rp-fs-h3)/1.05 var(--rp-ff-display);text-transform:uppercase;color:inherit}
html.retro-pop .rp-plan__price{display:block;margin:var(--rp-s-3) 0;font:400 clamp(36px,4.6vw,64px)/1 var(--rp-ff-display);color:inherit}
html.retro-pop .rp-plan__price :where(span,small,i,sup){font:700 var(--rp-fs-body)/1 var(--rp-ff-mono)}
html.retro-pop .rp-plan li{font-size:var(--rp-fs-small)}
html.retro-pop .rp-plan li::marker{color:var(--rp-red)}

/* 5.9 tabela e linha de classificado */
html.retro-pop .rp-tablebox{position:relative;padding:var(--rp-s-4);border:var(--rp-bd);background:var(--rp-paper-w);color:var(--rp-ink);box-shadow:var(--rp-sh-2);overflow-x:auto}
html.retro-pop table.rp-tablebox,html.retro-pop .rp-tablebox table{border-collapse:collapse;width:100%;font-size:var(--rp-fs-small);color:var(--rp-ink)}
html.retro-pop .rp-tablebox caption{padding-bottom:var(--rp-s-3);text-align:left;font:400 var(--rp-fs-h3)/1.05 var(--rp-ff-display);text-transform:uppercase;color:var(--rp-ink)}
html.retro-pop .rp-tablebox th{padding:var(--rp-s-2);text-align:left;border-bottom:3px solid var(--rp-ink);background:var(--rp-paper-2);color:var(--rp-ink);font:400 var(--rp-fs-small)/1.2 var(--rp-ff-display);text-transform:uppercase;letter-spacing:.04em}
html.retro-pop .rp-tablebox td{padding:9px var(--rp-s-2);border-bottom:1px solid var(--rp-ink-soft);vertical-align:middle;color:var(--rp-ink)}
html.retro-pop .rp-tablebox tbody tr:nth-child(even){background:var(--rp-paper-3)}
html.retro-pop .rp-tablebox tbody tr:hover{background:var(--rp-yellow)}
html.retro-pop .rp-tablebox .rp-n{font:700 var(--rp-fs-body)/1 var(--rp-ff-mono);font-variant-numeric:tabular-nums}
html.retro-pop .rp-room{display:flex;align-items:center;gap:var(--rp-s-3);min-width:0;padding:var(--rp-s-2) var(--rp-s-3);border-left:4px solid var(--rp-ink-soft);color:var(--rp-ink)}
html.retro-pop .rp-room:nth-child(odd){background:var(--rp-paper-3)}
html.retro-pop .rp-room:hover,html.retro-pop .rp-room:focus-within{border-left-color:var(--rp-lime);background:var(--rp-paper-w)}

/* 5.10 busca, formulário e vazio. `.rp-search` e `.rp-field` são estampados no
   próprio controle (plano 3.9 e 3.11), não num invólucro — por isso há versão
   para <input> e para invólucro. O rótulo por ::before em attr(placeholder)
   NÃO serve: pseudo-elemento não renderiza em elemento substituído. */
html.retro-pop .rp-search:not(input):not(select):not(textarea){display:flex;align-items:center;gap:6px;min-height:44px;padding:0 var(--rp-s-4);border:var(--rp-bd);border-radius:var(--rp-r-pill);background:var(--rp-paper-w);color:var(--rp-ink);box-shadow:var(--rp-sh-1)}
html.retro-pop .rp-search input{flex:1;min-width:0;border:0;background:none;outline:none;color:var(--rp-ink);font:600 var(--rp-fs-small)/1 var(--rp-ff-body)}
html.retro-pop input.rp-search{min-height:44px;padding:0 var(--rp-s-4) 0 40px;appearance:none;-webkit-appearance:none;border:var(--rp-bd);border-radius:var(--rp-r-pill);box-shadow:var(--rp-sh-1);background:var(--rp-paper-w) var(--rp-art-search) no-repeat 14px 50%/18px 18px;color:var(--rp-ink);font:600 var(--rp-fs-small)/1 var(--rp-ff-body)}
html.retro-pop .rp-field{min-height:48px;padding:10px var(--rp-s-3);border:var(--rp-bd);border-radius:var(--rp-r-1);background:var(--rp-paper);color:var(--rp-ink);font:600 var(--rp-fs-small)/1.35 var(--rp-ff-body)}
html.retro-pop textarea.rp-field{min-height:96px;line-height:1.5;resize:vertical}
html.retro-pop select.rp-field{appearance:none;-webkit-appearance:none;padding-right:36px;background:var(--rp-paper) var(--rp-art-chevron) no-repeat right 10px center/16px 16px}
html.retro-pop :where(input,select,textarea).rp-field:focus{background-color:var(--rp-paper-w)}
html.retro-pop :where(input[type="checkbox"],input[type="radio"]).rp-field{min-height:0;width:22px;height:22px;padding:0;accent-color:var(--rp-red)}
html.retro-pop :where(.rp-field,.rp-search,.rp-search input)::placeholder{color:var(--rp-ink-3);opacity:1}
html.retro-pop .rp-form{display:flex;flex-wrap:wrap;gap:var(--rp-s-3);align-items:flex-end}
html.retro-pop .rp-form label{display:block;margin-bottom:6px;font:800 var(--rp-fs-micro)/1 var(--rp-ff-body);text-transform:uppercase;letter-spacing:var(--rp-tr-kicker);color:var(--rp-ink-2)}
/* o recado de erro tem lugar reservado: o layout não pula quando ele aparece */
html.retro-pop .rp-form__note{flex:1 0 100%;min-height:34px;margin-top:var(--rp-s-2);font:700 var(--rp-fs-small)/1.3 var(--rp-ff-body);color:var(--rp-red-deep)}
html.retro-pop :where(.rp-dark,.rp-colophon) .rp-form__note{color:var(--rp-yellow)}
/* vazio: nunca um buraco, sempre papel com recado */
html.retro-pop .rp-empty{padding:var(--rp-s-5);border:3px dashed var(--rp-ink-soft);background:var(--rp-paper-2);color:var(--rp-ink-3);text-align:center;font:600 var(--rp-fs-small)/1.4 var(--rp-ff-body)}

/* 5.11 tarja e navegação. O corte diagonal inferior é camada de fundo: um
   pseudo-elemento exigiria position:relative e mataria o sticky da página. No
   celular a diagonal vira filete reto (seção 7). */
html.retro-pop .rp-mast{background-color:var(--rp-yellow);background-image:linear-gradient(179.5deg,transparent 0 calc(100% - 14px),var(--rp-ink) calc(100% - 14px));color:#17131f;box-shadow:0 4px 0 rgba(23,19,31,.18)}
html.retro-pop .rp-nav{min-width:0}
html.retro-pop :where(.rp-nav a,.rp-nav__a){display:inline-flex;align-items:center;min-height:44px;padding:0 9px;border-bottom:4px solid transparent;background:none;color:#17131f;font:800 var(--rp-fs-small)/1 var(--rp-ff-body);text-transform:uppercase;letter-spacing:.02em;text-decoration:none;transition:border-color var(--rp-t-fast) linear,background-color var(--rp-t-fast) linear}
html.retro-pop :where(.rp-nav a,.rp-nav__a):hover{border-bottom-color:var(--rp-cyan);background:rgba(255,250,240,.5)}
html.retro-pop :where(.rp-nav a,.rp-nav__a)[aria-current]{border-bottom-color:var(--rp-red)}
html.retro-pop :where(.rp-dark,.rp-colophon) :where(.rp-nav a,.rp-nav__a){color:var(--rp-ink)}
/* estado ao vivo: lima é exclusiva disso (plano 2.5) */
html.retro-pop .rp-live{display:inline-flex;align-items:center;gap:7px;padding:5px 11px 5px 24px;border:var(--rp-bd);background:var(--rp-lime) radial-gradient(circle 5px at 12px 50%,#17131f 97%,transparent) no-repeat;color:#17131f;font:800 var(--rp-fs-micro)/1.25 var(--rp-ff-body);text-transform:uppercase;letter-spacing:var(--rp-tr-sticker)}

html.retro-pop .rp-balloon{position:relative;padding:var(--rp-s-5);border:var(--rp-bd-2);background:var(--rp-paper-w);color:var(--rp-ink);box-shadow:var(--rp-sh-3)}
html.retro-pop .rp-balloon::after{content:"";position:absolute;left:34px;bottom:-26px;width:46px;height:28px;pointer-events:none;background:var(--rp-paper-w);border-right:5px solid var(--rp-ink);border-bottom:5px solid var(--rp-ink);clip-path:polygon(0 0,100% 0,42% 100%)}

/* 5.13 colofão: a faixa de bala de 10px é camada de fundo do próprio rodapé —
   não cria DOM nem depende de pseudo-elemento. Família sem <footer> não ganha
   elemento novo só para ter a faixa. */
html.retro-pop .rp-colophon{position:relative;padding-bottom:calc(var(--rp-s-6) + 10px);border-top:var(--rp-bd-2);background-color:var(--rp-paper);color:var(--rp-ink);background-image:var(--rp-pat-candy);background-size:100% 10px;background-position:left bottom;background-repeat:no-repeat}
html.retro-pop .rp-colophon :where(h2,h3,h4,.rp-colophon__h){font:400 var(--rp-fs-h3)/1.05 var(--rp-ff-display);text-transform:uppercase;color:var(--rp-ink)}
html.retro-pop .rp-colophon a{color:var(--rp-ink);text-decoration:none;border-bottom:2px solid transparent;transition:border-color var(--rp-t-fast) linear}
html.retro-pop .rp-colophon a:hover{border-bottom-color:var(--rp-cyan);color:var(--rp-cyan)}
html.retro-pop .rp-colophon .rp-legal{font-size:var(--rp-fs-micro);color:var(--rp-ink-3)}

/* 5.14 CONFORMIDADE DE TINTA (seção 0): a página escreve `color:#fff` na mão
   e em papel creme isso é texto invisível — dentro de uma primitiva o texto
   herda a tinta do componente. É o piso, não a solução: a ponte e a família
   resolvem o resto. Nas etiquetas o `a` entra (o link É o botão); nos
   contêineres sai, para não apagar cor de link na prosa. Componente aninhado
   não sofre: a regra própria dele tem (0,2,1) e vence estes (0,1,1). */
html.retro-pop :where(.rp-btn,.rp-icon-btn,.rp-chip,.rp-tag,.rp-sticker,.rp-seal,.rp-medal,.rp-live,.rp-tab,.rp-ribbon,.rp-blockh2) *{color:inherit}
html.retro-pop :where(.rp-con,.rp-card,.rp-plan,.rp-pull,.rp-stat,.rp-tablebox,.rp-balloon,.rp-room,.rp-empty,.rp-mast) *:not(a){color:inherit}

/* --- 6. MOVIMENTO: um bloco só de @keyframes. Todo loop é ida-e-volta e
   anima apenas transform/opacity — nunca box-shadow, filter,
   background-position, width, top ou left — e `opacity` nunca chega a 0: nada
   fica invisível esperando JS. As classes de loop são declaradas dentro de
   :where() de propósito, para a guarda de reduced-motion vencer por ordem,
   sem !important. --- */
@keyframes rpDot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.55);opacity:.45}}
@keyframes rpSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes rpWobble{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes rpWobble2{0%,100%{transform:rotate(-18deg)}50%{transform:rotate(-10deg)}}
@keyframes rpWobble3{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(-3deg)}}
@keyframes rpFloat{0%,100%{transform:translateY(0);opacity:1}50%{transform:translateY(-14px);opacity:.6}}
@keyframes rpDrift{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(14px,-10px) rotate(6deg)}}
@keyframes rpMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes rpBeat{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes rpEq{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.42)}}
@keyframes rpBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
@keyframes rpPop{from{transform:translateY(16px) rotate(var(--rp-tilt)) scale(.94)}to{transform:translateY(0) rotate(var(--rp-tilt)) scale(1)}}
html.retro-pop :where(.rp-spin){animation:rpSpin 14s linear infinite;animation-play-state:var(--rp-play)}
html.retro-pop :where(.rp-wob){animation:rpWobble 4.2s ease-in-out infinite;animation-play-state:var(--rp-play)}
html.retro-pop :where(.rp-wob2){animation:rpWobble2 5s ease-in-out infinite;animation-play-state:var(--rp-play)}
html.retro-pop :where(.rp-wob3){animation:rpWobble3 6.5s ease-in-out infinite;animation-play-state:var(--rp-play)}
html.retro-pop :where(.rp-beat){animation:rpBeat 2.4s ease-in-out infinite;animation-play-state:var(--rp-play)}
html.retro-pop :where(.rp-float){animation:rpFloat 6s ease-in-out infinite;animation-play-state:var(--rp-play)}
html.retro-pop :where(.rp-drift){animation:rpDrift 9s ease-in-out infinite;animation-play-state:var(--rp-play)}
html.retro-pop :where(.rp-breathe){animation:rpBreathe 7s ease-in-out infinite;animation-play-state:var(--rp-play)}
html.retro-pop :where(.rp-dot){animation:rpDot 1.6s ease-in-out infinite;animation-play-state:var(--rp-play)}
html.retro-pop :where(.rp-eq){animation:rpEq 1.4s ease-in-out infinite;animation-play-state:var(--rp-play);transform-box:fill-box;transform-origin:bottom}
html.retro-pop :where(.rp-marquee){animation:rpMarquee 26s linear infinite;animation-play-state:var(--rp-play);width:max-content}
html.retro-pop .rp-marquee-box:hover .rp-marquee,html.retro-pop .rp-marquee-box:focus-within .rp-marquee{animation-play-state:paused}
html.retro-pop :where(.rp-in){animation:rpPop var(--rp-t-in) var(--rp-e-pop) backwards;animation-delay:calc(var(--rp-i) * 40ms)}
@media (prefers-reduced-motion:reduce){
  html.retro-pop{--rp-play:paused;scroll-behavior:auto}
  html.retro-pop :where(.rp-spin,.rp-wob,.rp-wob2,.rp-wob3,.rp-beat,.rp-float,.rp-drift,.rp-breathe,.rp-dot,.rp-eq,.rp-marquee,.rp-in){animation:none}
  html.retro-pop .rp-btn,html.retro-pop .rp-icon-btn,html.retro-pop .rp-con,html.retro-pop .rp-cover,html.retro-pop .rp-pull,html.retro-pop .rp-tab,html.retro-pop .rp-room,html.retro-pop .rp-colophon a,html.retro-pop :where(.rp-nav a,.rp-nav__a){transition-duration:1ms}
}

/* --- 7. LARGURAS: o que vaza desliga antes de virar rolagem horizontal.
   Obrigatório, não opcional (plano 5.8 e kit 6.1). --- */
@media (max-width:1023px){
  html.retro-pop .rp-racks > *{grid-column:span 6}
  html.retro-pop .rp-racks > :nth-child(5n+1):nth-child(-n+16){grid-column:span 12;grid-row:span 1}
}
@media (max-width:767px){
  html.retro-pop .rp-racks{grid-template-columns:1fr;transform:none}
  html.retro-pop .rp-racks > *,html.retro-pop .rp-racks > :nth-child(5n+1):nth-child(-n+16){grid-column:auto;grid-row:auto}
  html.retro-pop .rp-plan,html.retro-pop .rp-tablebox,html.retro-pop .rp-stat,html.retro-pop .rp-card--tilt,html.retro-pop .rp-ribbon,html.retro-pop .rp-tag{transform:none}
  html.retro-pop .rp-tablebox{width:100%;margin-inline:0}
  html.retro-pop .rp-stat{min-width:46%}
  html.retro-pop .rp-rail > .rp-pull{flex-basis:150px}
  html.retro-pop .rp-ribbon{padding:8px 26px;font-size:var(--rp-fs-h3)}
  html.retro-pop .rp-mast{background-image:none;border-bottom:5px solid var(--rp-ink)}
}