:root {
  --red: #E0453A; --green: #1FA35B; --yellow: #F2B01E; --blue: #3D8BFF;
  --accent: #FFD23F; --accent-ink: #0B1733;
  --navy: #0C1D45; --navy-deep: #081533; --cell: #1B3572;
  --bg: #EEF2FA; --surface: #FFFFFF; --ink: #0B1733; --muted: #52607F; --line: #D5DCEC;
  --head: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', system-ui, sans-serif;
  --body: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #061029; --surface: #0D1C42; --ink: #EDF1FF; --muted: #9CAAD0; --line: #213A74; color-scheme: dark; }
}
:root[data-theme="dark"] { --bg: #061029; --surface: #0D1C42; --ink: #EDF1FF; --muted: #9CAAD0; --line: #213A74; color-scheme: dark; }

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font-family: var(--body); line-height: 1.45; min-height: 100svh; display: flex; flex-direction: column; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 16px 10px; background: var(--navy); color: #fff;
}
.brand { font-family: var(--head); font-weight: 800; font-size: 1.5rem; color: var(--accent); letter-spacing: 0.01em; }
.icon-btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid #28468C; background: #132A5E; color: #fff; cursor: pointer; font-size: 1.05rem; }

main { flex: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding: 28px 16px 40px; }
.intro { margin-bottom: 24px; }
.title { font-family: var(--head); font-weight: 800; font-size: clamp(3rem, 12vw, 5.5rem); line-height: 0.9; margin: 0; }
.title .dot { color: var(--accent); }
.sub { color: var(--muted); max-width: 44ch; margin: 10px 0 0; font-size: 1.05rem; }

.games { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .games { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .games { grid-template-columns: repeat(3, 1fr); } }

.game {
  display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
  transition: transform 150ms ease, border-color 150ms ease;
}
.game:hover { transform: translateY(-3px); border-color: var(--accent); }
.game:active { transform: translateY(0); }
.art { background: var(--navy); aspect-ratio: 16 / 9; display: grid; place-items: center; }
.art svg { width: 100%; height: 100%; display: block; }
.body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.name { font-family: var(--head); font-weight: 800; font-size: 2rem; line-height: 1; margin: 0; }
.blurb { color: var(--muted); margin: 0; flex: 1; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 0; padding: 0; list-style: none; }
.tags li { font-size: 0.78rem; font-weight: 600; padding: 3px 10px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); }
.play {
  margin-top: 10px; align-self: flex-start; background: var(--accent); color: var(--accent-ink);
  font-family: var(--head); font-weight: 800; font-size: 1.25rem; letter-spacing: 0.03em;
  padding: 8px 22px; border-radius: 12px; min-height: 44px; display: inline-flex; align-items: center;
}

.foot { text-align: center; color: var(--muted); font-size: 0.85rem; padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px)); }
.foot p { margin: 0; }

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