/* RETRO POP · família online — nível 3 de 4 (PLANO-APLICACAO.md 1.4, etapa 5)
   3 páginas: online/index.html, online/nintendo-ds-wifi/ e online/psp-adhoc/ — mesmo esqueleto e uma folha
   própria, assets/css/online-play-guides.css (26% em token; --og-* vão para a ponte):
   a.skip-link nav.site-nav(.brand .site-nav-links) main > header.hero(.hero-copy: .eyebrow|.status-pill h1 p
   .hero-actions .button[.secondary] .hero-note; .hero-art > img) .page-shell(aside.notice, section.section h2
   p .card-grid>article.card(.card-kicker h3 p .button) .steps>.step(h3 p) table.fact-table .faq details
   nav.related-links) footer.site-footer.

   1. VARREDURA DE INVERSÃO — os 33 pontos escritos à mão (a #7ee8ff, .brand/.button.secondary/.fact-table th
      claros, .notice #f9df9a, .site-nav rgba(5,7,19,.86), .hero-art carbono…) e o texto que a ponte deixa em
      --rp-ink-3 com corpo de parágrafo (.section > p, .card p, .step p, .faq p, .fact-table td: a tinta-3 é
      só para micro-texto, plano 2.4) — viram tinta. 2. COMPOSIÇÃO — "box de serviço" de revista: tarja
      amarela, capa com chapa de tinta para o logo do sistema (os SVG são claros, feitos para fundo escuro),
      selo lima de status (lima = ao vivo, plano 2.5), avisos com tarja amarela, cards colados, passos
      numerados em etiqueta, tabela de fatos com zebra, FAQ em fichas, links relacionados como abas, colofão.
   Zero loop. Widgets de site inteiro: retro/_shared.css. */

/* ═══════════ 0 · TOKENS DA FAMÍLIA ═══════════ */
html.retro-pop{
  --ol-ink:#17131f; --ol-ink2:#3b3348; --ol-cream:#f5ebd7; --ol-cream2:#dccfb2; --ol-white:#fffaf0;
  --ol-dots:radial-gradient(circle,rgba(23,19,31,.28) 1.3px,transparent 1.5px);
  --ol-dots-cream:radial-gradient(circle,rgba(245,235,215,.2) 1.6px,transparent 1.8px);
}


/* ═══════════ 1 · VARREDURA DE INVERSÃO (online-play-guides.css:linha) ═══════════ */
html.retro-pop .page-shell a,
html.retro-pop .hero-copy a:not(.button){color:var(--ol-ink)}                       /* :30-31 */
html.retro-pop .page-shell a:hover,
html.retro-pop .hero-copy a:not(.button):hover{color:var(--ol-ink)}
html.retro-pop .skip-link{color:var(--ol-ink);background:var(--rp-yellow)}          /* :32 */
html.retro-pop .site-nav{color:var(--ol-ink);-webkit-backdrop-filter:none;backdrop-filter:none}   /* :58 */
html.retro-pop .site-nav .brand{color:var(--ol-ink);background:var(--ol-white)}     /* :66 */
html.retro-pop .site-nav .brand span span{color:var(--rp-red-deep)}
html.retro-pop .site-nav-links a,
html.retro-pop .site-nav-links a[aria-current="page"]{color:var(--ol-ink)}          /* :83-84 */
html.retro-pop .hero .eyebrow{color:var(--ol-ink);background:var(--rp-yellow)}      /* :117 */
html.retro-pop .hero .status-pill{color:var(--ol-ink);background:var(--rp-lime)}
html.retro-pop .hero h1,
html.retro-pop .page-shell h2,
html.retro-pop .page-shell h3{color:var(--ol-ink)}
html.retro-pop .hero-copy > p{color:var(--ol-ink2)}
html.retro-pop .hero-copy > p.hero-note{color:var(--ol-ink)}
html.retro-pop main .button{color:var(--ol-ink);background:var(--ol-white)}              /* :165 */
html.retro-pop main .button.secondary{color:var(--ol-ink);background:var(--ol-white)}    /* :182 */
html.retro-pop .hero-actions .button:first-child,
html.retro-pop .card .button{color:var(--ol-ink);background:var(--rp-red)}
html.retro-pop .hero-art{background:var(--ol-ink)}                                  /* :194, ilha de tinta: só o logo */
html.retro-pop .notice{color:var(--ol-ink);background:var(--ol-white)}             /* :238 */
html.retro-pop .notice strong{color:var(--ol-ink)}                                  /* :242 */
html.retro-pop .section > p,
html.retro-pop .section-copy p{color:var(--ol-ink2)}
html.retro-pop .card,
html.retro-pop .step,
html.retro-pop .faq details{color:var(--ol-ink);background:var(--ol-white)}
html.retro-pop .card-kicker{color:var(--rp-red-deep)}
html.retro-pop .card p,
html.retro-pop .step p,
html.retro-pop .faq details p{color:var(--ol-ink2)}
html.retro-pop .step::before{color:var(--ol-ink);background:var(--rp-yellow)}
html.retro-pop .fact-table{color:var(--ol-ink);background:var(--ol-white)}
html.retro-pop .fact-table th{color:var(--ol-ink);background:var(--rp-paper-2)}     /* :336 */
html.retro-pop .fact-table td{color:var(--ol-ink2)}
html.retro-pop .fact-table td strong{color:var(--ol-ink)}
html.retro-pop .faq summary{color:var(--ol-ink)}
html.retro-pop .related-links a{color:var(--ol-ink);background:var(--ol-white)}     /* :364 */
html.retro-pop .related-links a:hover{color:var(--ol-ink);background:var(--rp-cyan)}
html.retro-pop .site-footer{color:var(--ol-cream2);background-color:var(--ol-ink)}  /* rodapé: creme sobre tinta */
html.retro-pop .site-footer strong{color:var(--ol-cream)}
html.retro-pop .site-footer a{color:var(--ol-cream)}
html.retro-pop .site-footer a:hover{color:var(--rp-yellow)}


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

/* 2.1 tarja amarela com retícula e borda inferior em diagonal (sticky, top e z-index da página ficam) */
html.retro-pop .site-nav{
  padding-top:10px;padding-bottom:22px;border-bottom:0;
  background-color:var(--rp-yellow);
  background-image:linear-gradient(179.4deg,transparent 0 calc(100% - 13px),var(--ol-ink) calc(100% - 13px)),var(--ol-dots);
  background-size:auto,8px 8px;box-shadow:0 4px 0 rgba(23,19,31,.18)}
html.retro-pop .site-nav .brand{
  padding:6px 14px 7px;border:3px solid var(--ol-ink);box-shadow:var(--rp-sh-2);transform:rotate(-1.6deg);
  font:400 clamp(16px,1.5vw,20px)/1 var(--rp-ff-display);letter-spacing:-.01em}
html.retro-pop .site-nav .brand img{width:24px;height:24px}
html.retro-pop .site-nav-links{gap:4px}
html.retro-pop .site-nav-links a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border-bottom:4px solid transparent;
  font:800 var(--rp-fs-small)/1 var(--rp-ff-body);letter-spacing:.03em;text-transform:uppercase;
  transition:border-color var(--rp-t-fast) linear,background-color var(--rp-t-fast) linear}
html.retro-pop .site-nav-links a:hover{border-bottom-color:var(--rp-cyan);background:rgba(255,250,240,.55)}
html.retro-pop .site-nav-links a[aria-current="page"]{border-bottom-color:var(--rp-red);background:rgba(255,250,240,.55)}

/* 2.2 capa: chamada gorda à esquerda; logo do sistema numa chapa de tinta com retícula creme, raios atrás */
html.retro-pop .hero{position:relative}
html.retro-pop .hero::before{
  content:"";position:absolute;right:-4%;top:8%;width:min(46vw,560px);aspect-ratio:1;z-index:0;pointer-events:none;
  background:var(--rp-pat-rays);opacity:.7;
  -webkit-mask-image:radial-gradient(circle,#000 56%,transparent 71%);mask-image:radial-gradient(circle,#000 56%,transparent 71%)}
html.retro-pop .hero > *{position:relative;z-index:1}
html.retro-pop .hero .eyebrow,
html.retro-pop .hero .status-pill{
  padding:6px 11px;border:2px solid var(--ol-ink);border-radius:0;box-shadow:var(--rp-sh-1);
  font:800 var(--rp-fs-micro)/1.25 var(--rp-ff-body);letter-spacing:var(--rp-tr-sticker);transform:rotate(-1.5deg)}
html.retro-pop .hero .status-pill::before{width:9px;height:9px;background:var(--ol-ink);box-shadow:none}
html.retro-pop .hero h1{
  margin-top:20px;font:400 clamp(34px,5.4vw,70px)/.95 var(--rp-ff-display);letter-spacing:var(--rp-tr-display);
  text-transform:uppercase;text-shadow:4px 4px 0 var(--rp-red);transform:skewX(-4deg);transform-origin:0 100%;overflow-wrap:anywhere}
html.retro-pop .hero-copy > p{max-width:60ch;font:400 clamp(16px,1.2vw,19px)/1.6 var(--rp-ff-body)}
html.retro-pop .hero-copy > p.hero-note{
  display:inline-block;margin-top:20px;padding:8px 12px;border:2px dashed rgba(23,19,31,.45);font:700 13px/1.5 var(--rp-ff-mono)}
html.retro-pop .hero-art{
  min-height:300px;border:3px solid var(--ol-ink);border-radius:0;overflow:visible;
  background-image:var(--ol-dots-cream);background-size:12px 12px;
  box-shadow:9px 10px 0 0 var(--rp-cyan),9px 10px 0 3px var(--ol-ink);transform:rotate(2deg)}
html.retro-pop .hero-art::before{border:3px dashed rgba(245,235,215,.35);box-shadow:none}
html.retro-pop .hero-art::after{width:14px;height:14px;top:16px;right:16px;border:2px solid var(--ol-cream);background:var(--rp-lime);box-shadow:none}
html.retro-pop .hero-art img{filter:none}

/* 2.3 botões: tinta de banca, borda de 3px, sombra de papel, mínimo 44px */
html.retro-pop main .button{
  min-height:46px;padding:10px 18px;border:3px solid var(--ol-ink);border-radius:var(--rp-r-1);box-shadow:var(--rp-sh-2);
  font:800 var(--rp-fs-small)/1.15 var(--rp-ff-body);letter-spacing:var(--rp-tr-sticker);text-transform:uppercase;text-decoration:none;
  transition:var(--rp-pop),background-color var(--rp-t-fast) linear}
html.retro-pop main .button:hover{color:var(--ol-ink);transform:translate(-2px,-3px);box-shadow:var(--rp-sh-3)}
html.retro-pop main .button.secondary:hover{background:var(--rp-cyan)}
html.retro-pop main .button:active{transform:translate(3px,4px);box-shadow:1px 1px 0 var(--ol-ink)}

/* 2.4 avisos: recorte com tarja amarela e fita */
html.retro-pop .notice{
  position:relative;margin-bottom:30px;padding:18px 22px;border:3px solid var(--ol-ink);border-left-width:12px;border-left-color:var(--rp-yellow);
  border-radius:0;box-shadow:var(--rp-sh-2);font:400 16px/1.6 var(--rp-ff-body)}
html.retro-pop .notice strong{padding:0 5px;background:var(--rp-yellow);font-weight:800}

/* 2.5 seções: intertítulo em faixa, texto em medida de leitura, zigue-zague separando */
html.retro-pop .section + .section::before{
  content:"";display:block;height:12px;margin:0 0 40px;opacity:.5;pointer-events:none;background:var(--rp-pat-zig) repeat-x 0 0/40px 12px}
html.retro-pop .page-shell h2{
  display:inline-block;margin-left:-6px;padding:8px 26px 8px 36px;border-top:4px solid var(--ol-ink);border-bottom:4px solid var(--ol-ink);
  background:var(--rp-red) var(--rp-art-ribcap) no-repeat left center/24px 100%;
  font:400 clamp(20px,2.4vw,32px)/1.15 var(--rp-ff-display);letter-spacing:var(--rp-tr-display);text-transform:uppercase}
html.retro-pop .page-shell h3{font:400 clamp(17px,1.4vw,20px)/1.15 var(--rp-ff-display);text-transform:uppercase;letter-spacing:0}
html.retro-pop .section > p,
html.retro-pop .section-copy p{max-width:68ch;font:400 clamp(16px,1.1vw,17px)/1.7 var(--rp-ff-body)}
html.retro-pop .page-shell a:not(.button){font-weight:700;text-decoration:underline;text-decoration-color:var(--rp-cyan);text-decoration-thickness:3px;text-underline-offset:3px}
html.retro-pop .related-links a:not(.button){text-decoration:none}

/* 2.6 cards e passos */
html.retro-pop .card-grid{gap:26px 24px}
html.retro-pop .card{
  border:3px solid var(--ol-ink);border-radius:0;box-shadow:var(--rp-sh-2);transform:rotate(var(--rp-tilt));transition:var(--rp-pop)}
html.retro-pop .card:nth-child(odd){--rp-tilt:-.6deg}
html.retro-pop .card:nth-child(even){--rp-tilt:.5deg}
html.retro-pop .card:hover{transform:rotate(var(--rp-tilt)) translate(-3px,-4px);box-shadow:var(--rp-sh-3)}
html.retro-pop .card-kicker{font:700 var(--rp-fs-micro)/1.3 var(--rp-ff-mono);letter-spacing:.14em}
html.retro-pop .card p,
html.retro-pop .step p,
html.retro-pop .faq details p{font:400 15px/1.65 var(--rp-ff-body)}
html.retro-pop .steps{gap:22px 18px}
html.retro-pop .step{border:3px solid var(--ol-ink);border-radius:0;box-shadow:var(--rp-sh-2)}
html.retro-pop .step:nth-child(odd){transform:rotate(-.5deg)}
html.retro-pop .step:nth-child(even){transform:rotate(.4deg)}
html.retro-pop .step::before{
  width:40px;height:40px;border:3px solid var(--ol-ink);border-radius:0;box-shadow:var(--rp-sh-1);
  font:700 18px/1 var(--rp-ff-mono);transform:rotate(-4deg)}

/* 2.7 tabela de fatos (rp-tablebox) e FAQ em fichas */
html.retro-pop .fact-table{border:3px solid var(--ol-ink);border-radius:0;box-shadow:var(--rp-sh-2);overflow:hidden}
html.retro-pop .fact-table th,
html.retro-pop .fact-table td{border-bottom:1px solid rgba(23,19,31,.18)}
html.retro-pop .fact-table th{border-right:3px solid var(--ol-ink);font:400 14px/1.3 var(--rp-ff-display);text-transform:uppercase}
html.retro-pop .fact-table tr:nth-child(even) td{background:var(--rp-paper-3)}
html.retro-pop .fact-table td{font:400 15px/1.65 var(--rp-ff-body)}
html.retro-pop .faq{gap:14px}
html.retro-pop .faq details{border:3px solid var(--ol-ink);border-radius:0;box-shadow:var(--rp-sh-2)}
html.retro-pop .faq details[open]{box-shadow:var(--rp-sh-3)}
html.retro-pop .faq summary{min-height:44px;font:800 16px/1.4 var(--rp-ff-body)}
html.retro-pop .faq details[open] summary{border-bottom:3px dashed rgba(23,19,31,.28);margin-bottom:14px}

/* 2.8 relacionados: abas de papel */
html.retro-pop .related-links{gap:12px 10px}
html.retro-pop .related-links a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:3px solid var(--ol-ink);border-radius:0;box-shadow:var(--rp-sh-1);
  font:800 var(--rp-fs-small)/1 var(--rp-ff-body);letter-spacing:var(--rp-tr-sticker);text-transform:uppercase;transition:var(--rp-pop),background-color var(--rp-t-fast) linear}
html.retro-pop .related-links a:nth-child(odd){transform:rotate(-1deg)}
html.retro-pop .related-links a:nth-child(even){transform:rotate(.8deg)}

/* 2.9 colofão: tinta com retícula creme, borda rasgada em cima, faixa de bala embaixo */
html.retro-pop .site-footer{
  position:relative;padding-bottom:calc(35px + 10px);border-top:0;
  background-image:var(--rp-pat-candy),var(--ol-dots-cream);background-size:100% 10px,10px 10px;
  background-position:left bottom,0 0;background-repeat:no-repeat,repeat;font:500 14px/1.6 var(--rp-ff-body)}
html.retro-pop .site-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 .site-footer strong{font:400 16px/1.2 var(--rp-ff-display);letter-spacing:0;text-transform:uppercase}
html.retro-pop .site-footer a{display:inline-flex;align-items:center;min-height:32px;border-bottom:2px solid transparent;font-weight:700}
html.retro-pop .site-footer a:hover{border-bottom-color:var(--rp-yellow)}


/* ═══════════ 3 · LARGURAS ═══════════ */
@media (max-width:800px){
  html.retro-pop .hero::before{right:-30%;top:auto;bottom:0;width:110vw;opacity:.45}
  html.retro-pop .hero-art{transform:rotate(1deg)}
  /* a página mostra só o link da página atual aqui (online-play-guides.css, @media 800px) */
  html.retro-pop .site-nav-links a:not([aria-current="page"]){display:none}
}
@media (max-width:767px){
  html.retro-pop .site-nav{padding-bottom:14px;background-image:var(--ol-dots);background-size:8px 8px;border-bottom:5px solid var(--ol-ink)}
  html.retro-pop .card,
  html.retro-pop .step:nth-child(n),
  html.retro-pop .related-links a:nth-child(n){transform:none}
  html.retro-pop .card:hover{transform:translate(-2px,-3px)}
  html.retro-pop .page-shell h2{padding:7px 16px 7px 28px}
  html.retro-pop .fact-table th{border-right:0}
}
@media (prefers-reduced-motion:reduce){
  html.retro-pop main .button,html.retro-pop .card,html.retro-pop .related-links a{transition-duration:1ms}
}