:root { color-scheme: dark; --ink:#f6f3ea; --muted:#b7b1a5; --line:#3a3938; --accent:#f2b84b; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:#111211; font-family:Inter,ui-sans-serif,system-ui,sans-serif; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; background:radial-gradient(circle at 82% 5%,#33473b 0,transparent 35%),linear-gradient(120deg,transparent 60%,#171b18); z-index:-1; }
.hero, main, footer { width:min(1180px,calc(100% - 40px)); margin-inline:auto; }
.hero { padding:clamp(70px,12vw,150px) 0 65px; }
.eyebrow,.game-number { color:var(--accent); font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
h1 { max-width:900px; margin:.25em 0; font-family:Georgia,serif; font-size:clamp(3.2rem,8vw,7.2rem); line-height:.91; letter-spacing:-.055em; }
.intro { max-width:590px; color:var(--muted); font-size:clamp(1rem,2vw,1.3rem); line-height:1.6; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:24px; border-bottom:1px solid var(--line); }
h2 { font-size:clamp(1.5rem,3vw,2.2rem); }
#catalog-status { color:var(--muted); }
.game-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.game-card { overflow:hidden; border:1px solid var(--line); background:#191a19; animation:rise .5s both; animation-delay:calc(var(--position) * 70ms); }
.game-card:first-child { grid-column:1/-1; }
.game-card img { display:block; width:100%; height:auto; aspect-ratio:16/7; object-fit:cover; background:#222; }
.card-body { position:relative; padding:24px; }
.game-number { position:absolute; right:24px; top:26px; }
h3 { margin:0 50px 5px 0; font-family:Georgia,serif; font-size:clamp(1.7rem,4vw,2.8rem); }
.card-body p { margin:0 0 22px; color:var(--muted); }
.play-action { display:inline-block; color:#111; background:var(--accent); padding:11px 16px; font-weight:800; text-decoration:none; }
.play-action[href]:hover,.play-action[href]:focus { background:#ffd27a; }
.unavailable { opacity:.62; }
.unavailable .play-action { color:var(--muted); background:#292a29; }
footer { padding:60px 0; }
footer a { color:var(--muted); }
@keyframes rise { from { opacity:0; transform:translateY(12px); } }
@media (max-width:700px) { .game-grid { grid-template-columns:1fr; } .game-card:first-child { grid-column:auto; } .section-heading { display:block; } }
@media (prefers-reduced-motion:reduce) { .game-card { animation:none; } }