:root {
  --bg: #0b0d12;
  --ink: #f0eef6;
  --ink-dim: #9aa0b4;
  --line: #23262f;
  --cc: #e0a84e;    /* cold case amber */
  --noir: #3fb6c0;  /* noir teal */
  --buzz: #ffd23f;  /* buzz gold */
  --safe-top: env(safe-area-inset-top, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; }
body { overflow-x: hidden; }

/* animated aurora background */
.bg { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(700px 500px at 12% 8%, rgba(224,168,78,.16), transparent 60%),
    radial-gradient(700px 500px at 88% 22%, rgba(63,182,192,.16), transparent 60%),
    radial-gradient(800px 600px at 50% 110%, rgba(255,210,63,.14), transparent 60%); }

.hero { text-align: center; padding: calc(var(--safe-top) + 60px) 22px 26px; max-width: 760px; margin: 0 auto; }
.hero-badge { font-size: 3rem; }
.hero h1 { font-family: "Futura", "Trebuchet MS", system-ui, sans-serif; font-weight: 900; letter-spacing: .14em;
  font-size: clamp(2.4rem, 9vw, 4rem); margin: 8px 0 12px;
  background: linear-gradient(100deg, var(--cc), var(--noir), var(--buzz)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sub { color: var(--ink-dim); font-size: 1.08rem; line-height: 1.5; max-width: 540px; margin: 0 auto; }

.grid { display: grid; gap: 18px; grid-template-columns: 1fr; max-width: 1040px; margin: 22px auto 0; padding: 0 22px 40px; }
@media (min-width: 760px) { .grid { grid-template-columns: repeat(3, 1fr); } }

.game-card { position: relative; background: #14161d; border: 1px solid var(--line); border-radius: 20px;
  padding: 24px 22px; display: flex; flex-direction: column; gap: 12px; overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.game-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--c); }
.game-card::after { content: ""; position: absolute; width: 220px; height: 220px; right: -80px; top: -80px;
  background: radial-gradient(circle, var(--c), transparent 70%); opacity: .14; }
.game-card:hover { transform: translateY(-4px); border-color: var(--c); box-shadow: 0 16px 40px rgba(0,0,0,.45); }
.cc { --c: var(--cc); } .noir { --c: var(--noir); } .buzz { --c: var(--buzz); }

.gc-top { display: flex; align-items: center; justify-content: space-between; }
.gc-icon { font-size: 2.4rem; }
.gc-tag { font-size: .72rem; color: var(--ink-dim); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; }
.game-card h2 { font-family: "Futura", "Trebuchet MS", system-ui, sans-serif; font-weight: 900; letter-spacing: .08em;
  font-size: 1.6rem; margin: 0; color: var(--c); }
.game-card p { color: var(--ink-dim); margin: 0; flex: 1; line-height: 1.5; }
.gc-play { margin-top: 8px; display: inline-block; text-align: center; text-decoration: none; font-weight: 800;
  color: #11131a; background: var(--c); padding: 14px; border-radius: 12px; transition: filter .15s, transform .06s; }
.gc-play:hover { filter: brightness(1.08); }
.gc-play:active { transform: scale(.98); }

.foot { text-align: center; color: var(--ink-dim); font-size: .85rem; padding: 10px 22px 40px; }