:root{
  --bg:#f7f6f2;--fg:#1c1a26;--muted:#5f5b6e;--card:#ffffff;--line:#e4e1d8;--accent:#c98a00;--accent-bg:#ffcc33;--accent-fg:#14121f;
  --shadow:0 1px 2px rgba(20,18,31,.06),0 8px 24px rgba(20,18,31,.08);
}
@media (prefers-color-scheme:dark){
  :root{--bg:#14121f;--fg:#f1eff7;--muted:#a59fc4;--card:#1e1b2d;--line:#2e2a44;--accent:#ffcc33;--shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35)}
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--fg);font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;min-height:100vh}
a{color:inherit}
.wrap{max-width:720px;margin:0 auto;padding:clamp(48px,10vh,104px) 22px 40px}
.intro h1{font-size:clamp(2.2rem,6vw,3.4rem);line-height:1.08;letter-spacing:-.02em;font-weight:800}
.tagline{margin-top:10px;font-size:clamp(1.05rem,2.4vw,1.25rem);color:var(--muted)}
.section-h{margin-top:48px;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}
.game-card{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);margin-top:16px;background:var(--card);border:1px solid var(--line);
  border-radius:16px;overflow:hidden;box-shadow:var(--shadow);transition:transform .15s ease,box-shadow .15s ease}
.game-card.featured{grid-template-columns:1fr}
.game-card.compact{grid-template-columns:minmax(0,.8fr) minmax(0,1fr)}
.game-card:hover{transform:translateY(-2px);box-shadow:var(--shadow),0 0 0 2px var(--accent-bg)}
.game-card:has(.stretch:focus-visible){outline:3px solid var(--accent-bg);outline-offset:3px}
.game-card img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:16/9;background:#1d1a2b}
.game-card img.pixel{image-rendering:pixelated}
.game-body{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:22px 24px}
.featured .game-body{padding:24px 28px 26px}
.eyebrow{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:700}
.game-title{font-size:1.4rem;font-weight:800;line-height:1.2}
.featured .game-title{font-size:clamp(1.5rem,3.6vw,1.9rem);letter-spacing:-.01em}
.compact .game-title{font-size:1.2rem}
.stretch{text-decoration:none;outline:none}
.stretch::after{content:"";position:absolute;inset:0;z-index:1}
.game-desc{color:var(--muted);font-size:.95rem}
.featured .game-desc{font-size:1rem;max-width:58ch}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:10px}
.btn{background:var(--accent-bg);color:var(--accent-fg);font-weight:800;padding:9px 18px;border-radius:999px;font-size:.95rem}
.game-card:hover .btn{filter:brightness(1.05)}
.sub-link{position:relative;z-index:2;font-size:.88rem;font-weight:600;color:var(--muted);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px;text-decoration-thickness:2px}
.sub-link:hover,.sub-link:focus-visible{color:var(--fg);text-decoration-color:var(--accent-bg)}
.sub-link:focus-visible{outline:2px solid var(--accent-bg);outline-offset:3px;border-radius:4px}
.foot{margin-top:64px;color:var(--muted);font-size:.85rem}
@media (max-width:600px){
  .game-card,.game-card.compact{grid-template-columns:1fr}
  .game-card img{height:auto}
  .game-body,.featured .game-body{padding:18px 20px 20px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}