:root {
  --bg: #131a2b;
  --bg-2: #1c2540;
  --ink: #eef1f8;
  --ink-soft: #9aa5c2;
  --line: rgba(238, 241, 248, 0.12);
  --sun: #ffc845;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(900px 600px at 15% -10%, #26325a 0%, transparent 60%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; }

.wrap { max-width: 1040px; margin: 0 auto; padding: 72px 16px 80px; }
.head { margin-bottom: 40px; }
.head h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 10px; line-height: 1.05; }
.head p { margin: 0; color: var(--ink-soft); font-size: 1.15rem; max-width: 46ch; line-height: 1.5; }

.games { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.game {
  --accent: var(--sun);
  display: grid; grid-template-rows: auto 1fr auto; gap: 14px;
  height: 100%; padding: 22px; border-radius: 22px;
  background: var(--bg-2); border: 1px solid var(--line);
  color: inherit; text-decoration: none;
  position: relative; overflow: hidden;
  transition: transform .18s ease, border-color .18s ease;
}
.game::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--accent);
}
.game:hover { transform: translateY(-3px); border-color: var(--accent); }
.game h2 { margin: 0; font-size: 1.6rem; font-weight: 800; }
.game p { margin: 0; color: var(--ink-soft); line-height: 1.5; }
.meta { display: flex; gap: 8px; flex-wrap: wrap; }
.meta span { font-size: .85rem; padding: 4px 10px; border-radius: 999px; background: rgba(238, 241, 248, .07); }
.play {
  justify-self: start; margin-top: 4px; padding: 10px 18px; border-radius: 999px; font-weight: 600;
  background: var(--accent); color: #1a1400;
}
.empty { color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) {
  .game { transition: none; }
}