/* NEW CONSOLE · PLAY2 — home banner (index.html #play2Banner, filled by assets/js/play2-banner.js from
   assets/data/play2-games.json). Retro Pop look written with the theme's literal palette, so it reads the same with or
   without html.retro-pop. Cyan instead of the launcher's orange (the theme keeps orange for launcher/download).
   No looping animation: only hover/focus transitions. Line heights and the featured box are whole pixels so the
   banner's layout height is an integer: the hero below keeps the sub-pixel position it had (its rotated text is
   measured from pixels by theme-visual-audit). */
#play2Banner,#play2BannerCompact{--p2-ink:#17131f;--p2-paper:#fffaf0;--p2-cyan:#00b8d9;--p2-red:#ff2e4d;--p2-yellow:#ffd23f;
  --p2-display:'Archivo Black','Arial Black',system-ui,sans-serif;--p2-sticker:'Bungee','Archivo Black',system-ui,sans-serif;
  --p2-body:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;--p2-mono:'Space Mono',ui-monospace,'Courier New',monospace;
  box-sizing:border-box;color:var(--p2-ink);font-family:var(--p2-body);text-align:left}
#play2Banner *,#play2BannerCompact *{box-sizing:border-box}
#play2Banner[hidden],#play2BannerCompact[hidden]{display:none}

#play2Banner{position:relative;margin:30px 0 0;padding:40px 28px 26px;border:3px solid var(--p2-ink);border-radius:0;
  background:radial-gradient(circle,rgba(23,19,31,.2) 1.2px,transparent 1.5px) 0 0/8px 8px,var(--p2-cyan);
  box-shadow:7px 8px 0 var(--p2-ink);transform:rotate(-.6deg);
  display:grid;grid-template-columns:minmax(0,360px) 124px minmax(0,1fr);grid-template-areas:"head feat shelf" "cta feat shelf";
  column-gap:30px;row-gap:18px;align-items:end}
/* faixa de bala */
#play2Banner::before{content:'';position:absolute;left:0;right:0;top:0;height:10px;border-bottom:3px solid var(--p2-ink);
  background:repeating-linear-gradient(135deg,var(--p2-red) 0 14px,var(--p2-yellow) 14px 28px);pointer-events:none}

#play2Banner .play2-close{position:absolute;z-index:3;top:18px;right:14px;display:grid;place-items:center;width:34px;height:34px;margin:0;padding:0;
  border:2px solid transparent;border-radius:0;background:transparent;color:var(--p2-ink);font:700 24px/1 var(--p2-body);cursor:pointer}
#play2Banner .play2-close:hover{background:var(--p2-paper);border-color:var(--p2-ink)}

/* cabeça: selo, PLAY2, texto */
#play2Banner .play2-head{grid-area:head;min-width:0;align-self:start}
#play2Banner .play2-kicker{display:inline-flex;align-items:center;gap:8px;margin:0;padding:5px 10px;border:2px solid var(--p2-ink);
  background:var(--p2-yellow);box-shadow:2px 3px 0 var(--p2-ink);transform:rotate(-2deg);
  font:700 11px/14px var(--p2-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--p2-ink)}
#play2Banner .play2-dot,#play2BannerCompact .play2-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--p2-ink)}
#play2Banner .play2-title{margin:14px 0 0;padding:0;font:400 72px/62px var(--p2-display);letter-spacing:-.01em;
  text-transform:none;color:var(--p2-ink);text-shadow:4px 4px 0 var(--p2-paper);background:none;border:0}
#play2Banner .play2-title span{display:inline-block;margin-left:.08em;padding:0 .14em;border:3px solid var(--p2-ink);
  background:var(--p2-yellow);color:var(--p2-ink);text-shadow:none;box-shadow:4px 5px 0 var(--p2-ink);transform:rotate(6deg)}
#play2Banner .play2-lead{margin:14px 0 0;max-width:36ch;font:600 15px/22px var(--p2-body);color:var(--p2-ink)}

/* chamada: ▶ Play now + nota */
#play2Banner .play2-cta{grid-area:cta;display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;min-height:52px}
#play2Banner .play2-play{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 24px;
  border:3px solid var(--p2-ink);border-radius:0;background:var(--p2-red);color:var(--p2-ink);box-shadow:4px 5px 0 var(--p2-ink);
  font:800 15px/1 var(--p2-body);letter-spacing:.05em;text-transform:uppercase;text-decoration:none;
  transition:transform .18s cubic-bezier(.22,.9,.26,1),box-shadow .18s cubic-bezier(.22,.9,.26,1)}
#play2Banner .play2-play:hover{color:var(--p2-ink);transform:translate(-2px,-3px);box-shadow:7px 8px 0 var(--p2-ink)}
#play2Banner .play2-play:active{transform:translate(3px,4px);box-shadow:1px 1px 0 var(--p2-ink)}
#play2Banner .play2-note{margin:0;max-width:26ch;font:700 11px/15px var(--p2-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--p2-ink)}

/* destaque: a caixa do jogo jogável + selo NEW · PLAY IN BROWSER */
#play2Banner .play2-feature{grid-area:feat;position:relative;width:100%;height:244px}
#play2Banner .play2-feature-box{display:block;height:100%;transform:rotate(-3deg);transition:transform .18s cubic-bezier(.22,.9,.26,1)}
#play2Banner .play2-feature-box:hover{transform:rotate(0) translateY(-4px)}
#play2Banner .play2-feature img,#play2Banner .play2-card img{display:block;width:100%;height:auto;aspect-ratio:305/600;max-width:none;margin:0;
  border:0;border-radius:0;background:none;filter:drop-shadow(4px 5px 0 #17131f)}
#play2Banner .play2-feature img{width:auto;height:100%}
#play2Banner .play2-seal{position:absolute;z-index:2;top:-22px;right:-30px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:96px;height:96px;padding:18px 14px;text-align:center;pointer-events:none;transform:rotate(10deg);
  background: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") center/100% 100% no-repeat;
  font:400 9px/1.05 var(--p2-sticker);letter-spacing:.02em;text-transform:uppercase;color:var(--p2-ink)}
#play2Banner .play2-seal b{display:block;font:400 17px/1 var(--p2-sticker)}

/* prateleira: os outros jogos PLAY2 */
#play2Banner .play2-shelf{grid-area:shelf;min-width:0}
#play2Banner .play2-shelf-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 14px;padding:0 44px 0 40px;
  font:700 11px/14px var(--p2-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--p2-ink)}
#play2Banner .play2-soon{flex:none;padding:4px 9px;border:2px dashed var(--p2-ink);background:var(--p2-paper);color:var(--p2-ink);
  letter-spacing:.08em;transform:rotate(1.5deg)}
#play2Banner .play2-list{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:10px;align-items:end;min-height:120px;
  margin:0;padding:0 0 4px;list-style:none}
#play2Banner .play2-list li{margin:0;padding:0;list-style:none;min-width:0}
#play2Banner .play2-list li::before,#play2Banner .play2-list li::marker{content:none}
#play2Banner .play2-card{position:relative;display:block;color:var(--p2-ink);text-decoration:none;
  transition:transform .18s cubic-bezier(.22,.9,.26,1)}
#play2Banner .play2-card:hover{transform:translateY(-6px) rotate(-2deg)}
#play2Banner .play2-chip{position:absolute;left:50%;bottom:9%;padding:3px 6px;border:2px solid var(--p2-paper);background:var(--p2-ink);
  color:var(--p2-paper);font:700 10px/1 var(--p2-mono);letter-spacing:.06em;white-space:nowrap;transform:translateX(-50%) rotate(-4deg)}

#play2Banner a:focus-visible,#play2Banner button:focus-visible,#play2BannerCompact button:focus-visible{outline:3px solid var(--p2-ink);outline-offset:3px}
#play2Banner .play2-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* até a lista chegar o espaço fica reservado; sem lista, só a cabeça e o link para os jogos */
#play2Banner .play2-all{display:none}
#play2Banner[data-state="loading"] :is(.play2-cta,.play2-feature,.play2-shelf){visibility:hidden}
#play2Banner[data-state="fallback"]{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "all"}
#play2Banner[data-state="fallback"] :is(.play2-cta,.play2-feature,.play2-shelf){display:none}
#play2Banner[data-state="fallback"] .play2-all{grid-area:all;justify-self:start;display:inline-flex;align-items:center;min-height:48px;padding:10px 20px;
  border:3px solid var(--p2-ink);background:var(--p2-paper);color:var(--p2-ink);box-shadow:4px 5px 0 var(--p2-ink);
  font:800 14px/1 var(--p2-body);letter-spacing:.05em;text-transform:uppercase;text-decoration:none}

/* minimizado (o × lembra a escolha na sessão, como o aviso do launcher fazia) */
#play2BannerCompact{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin:24px 0 0;padding:10px 14px;border:3px solid var(--p2-ink);
  background:var(--p2-cyan);box-shadow:4px 5px 0 var(--p2-ink);font:700 13px/1.3 var(--p2-body)}
#play2BannerCompact strong{font:700 12px/1.2 var(--p2-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--p2-ink)}
#play2BannerCompact button{margin-left:auto;min-height:36px;padding:6px 14px;border:2px solid var(--p2-ink);border-radius:0;background:var(--p2-paper);
  color:var(--p2-ink);font:800 13px/1 var(--p2-body);cursor:pointer}

/* tablet e celular: a caixa em destaque sobe para o lado da cabeça e a prateleira ocupa a linha de baixo */
@media (max-width:1180px){
  #play2Banner{grid-template-columns:minmax(0,1fr) 124px;grid-template-areas:"head feat" "cta feat" "shelf shelf";align-items:center}
  #play2Banner .play2-feature{align-self:end}
  #play2Banner .play2-shelf-head{padding:0}
  #play2Banner .play2-list{grid-auto-columns:76px;grid-auto-rows:150px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
    padding:8px 6px 12px 2px;scrollbar-width:thin;scrollbar-color:var(--p2-ink) transparent}
  #play2Banner .play2-list li{scroll-snap-align:start}
}
@media (max-width:767px){
  #play2Banner{margin-top:24px;padding:36px 16px 18px;transform:none;grid-template-columns:minmax(0,1fr) 84px;column-gap:18px;row-gap:14px;box-shadow:5px 6px 0 var(--p2-ink)}
  #play2Banner .play2-close{top:16px;right:8px}
  #play2Banner .play2-title{font-size:52px;line-height:45px;margin-top:12px}
  #play2Banner .play2-lead{margin-top:12px;font-size:14px;line-height:20px}
  #play2Banner .play2-cta{align-items:stretch;flex-direction:column;gap:8px;min-height:0}
  #play2Banner .play2-play{min-height:48px;padding:10px 16px;font-size:14px}
  #play2Banner .play2-note{max-width:none}
  #play2Banner .play2-feature{height:165px}
  #play2Banner .play2-seal{top:-16px;right:-10px;width:74px;height:74px;padding:14px 10px;font-size:7px}
  #play2Banner .play2-seal b{font-size:13px}
  #play2Banner .play2-shelf-head{margin-bottom:8px;font-size:10px;line-height:13px;letter-spacing:.1em}
  #play2Banner .play2-list{grid-auto-columns:64px;grid-auto-rows:126px;min-height:126px;margin-right:-16px;padding-right:16px}
}
@media (prefers-reduced-motion:reduce){
  #play2Banner .play2-play,#play2Banner .play2-card,#play2Banner .play2-feature-box{transition:none}
}