:root {
  --bg: #101513;
  --bg-2: #161d1a;
  --card: #1b2420;
  --line: #2a3530;
  --ink: #ece6d6;
  --muted: #8e9a93;
  --brass: #d9b45a;
  --brass-ink: #1d1708;
  --felt: #2f5a46;
  --radius: 16px;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex; flex-direction: column;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(47, 90, 70, .35), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(217, 180, 90, .08), transparent 60%),
    var(--bg);
  color: var(--ink);
  font: 16px/1.55 var(--ui);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }

.top, main, footer { width: 100%; max-width: 1120px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 40px); }

.top { display: flex; align-items: center; justify-content: space-between; padding-block: 20px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 600 19px/1 var(--display); letter-spacing: .01em; }
.brand b { color: var(--brass); font-weight: 600; }
.mark { width: 28px; height: 28px; fill: var(--ink); }
.mark .alt { fill: var(--felt); }
.mark circle { fill: var(--brass); }

.btn {
  appearance: none; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink);
  font: 600 14px/1 var(--ui); padding: 10px 16px; border-radius: 999px; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
  transition: background .15s, border-color .15s, transform .15s;
}
.btn:hover { border-color: #3d4b44; background: #1e2723; }
.btn.primary { background: var(--brass); border-color: var(--brass); color: var(--brass-ink); }
.btn.primary:hover { background: #e6c46c; }
.btn:focus-visible, .game:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

.hero { padding: clamp(28px, 7vw, 72px) 0 clamp(24px, 5vw, 48px); }
.hero h1 { font: 700 clamp(38px, 7vw, 68px)/1.02 var(--display); letter-spacing: -.02em; margin: 0 0 16px; }
.hero p { color: var(--muted); font-size: clamp(16px, 2vw, 19px); margin: 0; max-width: 34em; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(16px, 2.5vw, 24px); padding-bottom: 64px; }

.game {
  position: relative; display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; text-decoration: none;
  transition: transform .2s ease, border-color .2s, box-shadow .2s;
}
.game:hover { transform: translateY(-3px); border-color: #3d4b44; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .7); }
.game .art { aspect-ratio: 16 / 10; display: block; width: 100%; object-fit: cover; background: var(--bg-2); border-bottom: 1px solid var(--line); }
.game .art.fallback { display: grid; place-items: center; font: 700 64px/1 var(--display); color: var(--felt); }
.game .body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.game .kind { font: 600 11.5px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.game h2 { font: 600 24px/1.15 var(--display); margin: 0; }
.game p { margin: 0 0 12px; color: #b9c1bb; font-size: 15px; }
.game .foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.game .note { font-size: 13px; color: var(--muted); }

.badge {
  position: absolute; top: 12px; left: 12px;
  font: 700 11px/1 var(--ui); letter-spacing: .08em; text-transform: uppercase;
  padding: 6px 9px; border-radius: 999px; background: rgba(16, 21, 19, .82); border: 1px solid var(--line);
}
.badge.premium { color: var(--brass); border-color: rgba(217, 180, 90, .4); }
.badge.soon { color: var(--muted); }

footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding-block: 24px 32px; border-top: 1px solid var(--line); font-size: 14px; }
.muted { color: var(--muted); }

dialog {
  background: var(--bg-2); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; max-width: min(420px, calc(100vw - 32px));
}
dialog::backdrop { background: rgba(5, 8, 7, .7); }
dialog h2 { font: 600 22px/1.2 var(--display); margin: 0 0 8px; }
dialog p { color: #b9c1bb; margin: 0 0 20px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }