/* Static pages (about, how to play, 162-0, Spanish landing) dressed like the game's main menu:
   the day stadium behind, HUD panels with the green rim, brass buttons, pixel titles and real
   BaseRogue cards (site.js + card_art.js + cards2.css). Text stays plain HTML for search engines. */
:root { --bg: #06100b; --panel: rgba(5, 14, 10, .84); --ink: #ecf3ee; --mute: #a9c6b6; --green: #10b981; --neon: #34d399; --gold: #ffd36a; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; color: var(--ink); background: var(--bg); min-height: 100vh; overflow-x: hidden;
  font: 400 17px/1.65 'Oswald', system-ui, -apple-system, 'Segoe UI', sans-serif; letter-spacing: .15px;
}
body::before {
  content: ''; position: fixed; inset: 0; z-index: -2;
  background: linear-gradient(180deg, rgba(4, 10, 8, .35) 0%, rgba(4, 10, 8, .82) 55%, rgba(4, 10, 8, .95) 100%), url('/assets/TEST3.webp') center top / cover no-repeat;
}
body::after {   /* CRT scanlines, faint */
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px);
}

/* drifting cards behind everything */
.site-bgcards { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.site-bg-slot { position: absolute; transform: rotate(var(--r)) scale(var(--s)); opacity: .32; filter: saturate(.85) blur(.4px);
  animation: siteDrift var(--dur) ease-in-out var(--del) infinite alternate; }
@keyframes siteDrift { to { transform: rotate(calc(var(--r) * -0.6)) scale(var(--s)) translateY(-46px); } }

main { max-width: 860px; margin: 0 auto; padding: 28px 16px 70px; position: relative; }

/* hero */
header { text-align: center; margin-bottom: 26px; }
header img { width: min(360px, 82%); height: auto; filter: drop-shadow(0 6px 18px rgba(0,0,0,.6)); }
h1 { font: 400 clamp(17px, 3.2vw, 26px)/1.5 'Press Start 2P', monospace; color: #fff; margin: 18px 0 10px;
  text-shadow: 0 0 18px rgba(52, 211, 153, .45), 0 3px 0 rgba(0,0,0,.7); }
.lead { color: #d3e4da; font-size: 19px; max-width: 700px; margin: 0 auto; }

.site-fan { display: flex; justify-content: center; height: 260px; margin: 26px auto 6px; perspective: 900px; }
.site-fan-slot { width: 152px; height: 236px; margin: 0 -26px; flex: none; position: relative;
  transform: translateY(calc(var(--i) * var(--i) * 7px)) rotate(calc(var(--i) * 7deg)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .25s ease, filter .25s; transform-origin: 50% 120%; z-index: calc(10 - var(--i) * var(--i));
  animation: siteDeal .7s cubic-bezier(.2, 1.2, .4, 1) both; animation-delay: calc((var(--i) + 2) * 90ms); }
.site-fan-slot:hover { transform: translateY(-26px) rotate(calc(var(--i) * 3deg)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(1.08); z-index: 20; filter: drop-shadow(0 18px 24px rgba(0,0,0,.6)); }
@keyframes siteDeal { from { opacity: 0; transform: translateY(80px) rotate(0deg) scale(.8); } }

/* buttons */
.play { display: inline-block; margin: 18px 6px 0; padding: 14px 26px; border-radius: 8px; text-decoration: none;
  font: 400 12px/1.4 'Press Start 2P', monospace; letter-spacing: .5px; transition: transform .12s, box-shadow .12s; }
.play.main { color: #2a1a0e; background: linear-gradient(180deg, #ffe9a0, #e3b54c 55%, #b9862b);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.6), inset 0 -3px 0 rgba(0,0,0,.25), 0 6px 0 #6b4a17, 0 10px 22px rgba(0,0,0,.5); }
.play.main:hover { transform: translateY(-2px); }
.play.main:active { transform: translateY(4px); box-shadow: inset 0 2px 0 rgba(255,255,255,.6), 0 2px 0 #6b4a17; }
.play.alt { color: var(--neon); border: 2px solid var(--green); background: rgba(16,185,129,.1); box-shadow: 0 0 14px rgba(16,185,129,.25); }
.play.alt:hover { background: rgba(16,185,129,.2); }

/* HUD panels like the game's side panels */
section { background: var(--panel); border: 1.5px solid rgba(16,185,129,.55); border-radius: 10px; padding: 6px 24px 20px; margin-top: 20px;
  box-shadow: 0 0 0 3px rgba(0,0,0,.35), 0 0 22px rgba(16,185,129,.12), inset 0 0 30px rgba(0,0,0,.35); backdrop-filter: blur(3px); }
h2 { font: 400 14px/1.6 'Press Start 2P', monospace; color: var(--gold); margin: 22px 0 12px; text-shadow: 0 2px 0 rgba(0,0,0,.6); }
p, li { color: var(--ink); }
strong { color: #fff; font-weight: 600; }
a { color: var(--neon); }
ul { padding-left: 20px; }
li { margin: 6px 0; }
li::marker { color: var(--gold); }
dt { font-weight: 600; color: #fff; margin-top: 14px; font-size: 18px; }
dd { margin: 4px 0 0; color: var(--mute); }

footer { text-align: center; color: var(--mute); font-size: 15px; margin-top: 40px; }
footer p:first-child { font: 400 18px 'VT323', monospace; letter-spacing: .5px; }

/* real cards at their game size */
.player-card.pc2 { width: 152px; height: 236px; position: relative; }

@media (max-width: 640px) {
  .site-fan { height: 190px; margin-top: 18px; }
  .site-fan-slot { transform-origin: 50% 0; transform: translateY(calc(var(--i) * var(--i) * 5px)) rotate(calc(var(--i) * 6deg)) scale(.72); margin: 0 -44px; }
  .play { font-size: 10px; padding: 13px 18px; }
  h1 { font-size: 16px; }
  .site-fan-slot:nth-child(1), .site-fan-slot:nth-child(5) { display: none; }
  .site-bg-slot { opacity: .18; }
  section { padding: 4px 16px 16px; }
  h2 { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .site-bg-slot, .site-fan-slot { animation: none; } }