:root {
  color-scheme: dark;
  --hub-bg: #142b39;
  --hub-panel: #1b3544;
  --hub-ink: #f5f7ef;
  --hub-muted: #b7c8ca;
  --hub-teal: #77d1c7;
  --hub-line: #365260;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--hub-bg); color: var(--hub-ink); }
a { color: inherit; }
.skip { position: absolute; left: -9999px; top: 1rem; z-index: 2; padding: .7rem 1rem; background: #fff; color: #17212b; border-radius: .5rem; }
.skip:focus { left: 1rem; }
.hub-header { max-width: 70rem; margin: auto; padding: 1.1rem 1.25rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--hub-line); }
.brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; }
.brand-mark { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .65rem; background: var(--hub-teal); color: #142b39; font-weight: 900; }
.header-link { min-height: 44px; display: inline-flex; align-items: center; padding: .35rem .75rem; color: var(--hub-muted); text-decoration: none; }
.header-link:hover, .header-link:focus-visible { color: var(--hub-ink); }
.hub-main { max-width: 70rem; margin: auto; padding: 3.3rem 1.25rem 2rem; }
.hero { max-width: 47rem; padding: 0 0 3rem; }
.eyebrow { margin: 0 0 .6rem; color: var(--hub-teal); font-size: .74rem; line-height: 1.4; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.hero h1 { margin: 0; font-size: clamp(2.8rem, 8vw, 5.6rem); line-height: .98; letter-spacing: -.065em; }
.hero h1 span { color: var(--hub-teal); }
.hero-copy { max-width: 38rem; margin: 1.15rem 0 0; color: var(--hub-muted); font-size: clamp(1rem, 2.5vw, 1.18rem); line-height: 1.6; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.section-heading .eyebrow { margin-bottom: .25rem; }
.section-heading h2 { margin: 0; font-size: 1.45rem; letter-spacing: -.03em; }
.shelf-count { color: var(--hub-muted); font-size: .83rem; }
.game-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
.game-card { min-height: 16rem; padding: 1.1rem; display: flex; flex-direction: column; align-items: flex-start; border: 1px solid transparent; border-radius: 1rem; text-decoration: none; transition: transform .16s ease, box-shadow .16s ease; }
.game-card[href]:hover { transform: translateY(-3px); box-shadow: 0 12px 30px #07172066; }
.game-card[href]:focus-visible, .header-link:focus-visible, .all-games:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.game-icon { min-height: 2.6rem; font-size: 2.1rem; line-height: 1; }
.game-kicker { margin: .55rem 0 .3rem; font-size: .68rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.game-name { font-size: clamp(1.3rem, 3vw, 1.75rem); line-height: 1.12; font-weight: 850; letter-spacing: -.04em; }
.game-copy { max-width: 31rem; margin: .6rem 0 1rem; font-size: .92rem; line-height: 1.5; }
.game-cta { display: flex; align-items: center; gap: .55rem; margin-top: auto; font-size: .88rem; font-weight: 800; }
.arms { background: #123725; border-color: #d2ab5c; color: #f6edda; }
.arms .game-kicker, .arms .game-cta { color: #edc970; }
.color { background: #f2eaf8; border-color: #c9a8e7; color: #342344; }
.color .game-kicker, .color .game-cta { color: #694293; }
.atlas { background: linear-gradient(140deg, #124d64, #1a7180); border-color: #67c9d5; color: #eafcff; }
.atlas .game-kicker, .atlas .game-cta { color: #a7eff2; }
.scale { background: linear-gradient(140deg, #643b32, #915643); border-color: #f0b382; color: #fff4e7; }
.scale .game-kicker, .scale .game-cta { color: #ffd0a8; }
.muted-cta { color: inherit; opacity: .72; }
.hub-note { display: flex; gap: .8rem; align-items: flex-start; max-width: 44rem; margin: 2rem 0 .5rem; color: var(--hub-muted); font-size: .9rem; }
.hub-note span { color: var(--hub-teal); font-size: 1.25rem; }
.hub-note p { margin: .1rem 0; }
.hub-footer { max-width: 70rem; margin: 2rem auto 0; padding: 1.25rem; display: flex; justify-content: space-between; border-top: 1px solid var(--hub-line); color: var(--hub-muted); font-size: .84rem; }
.all-games { min-height: 44px; display: inline-flex; align-items: center; padding: .35rem .7rem; border: 1px solid var(--gold); border-radius: 999px; color: var(--gold-hi); font-size: .82rem; text-decoration: none; }
.all-games:hover { background: var(--bg-deep); }
@media (max-width: 40rem) {
  .hub-main { padding-top: 2.3rem; }
  .hero { padding-bottom: 2.2rem; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: .2rem; }
  .game-grid { grid-template-columns: 1fr; }
  .game-card { min-height: 13rem; }
  .shelf-count { font-size: .76rem; }
}
@media (prefers-reduced-motion: reduce) { .game-card { transition: none; } .game-card[href]:hover { transform: none; } }