/* =========================================================================
   Game pages — catalog index and per-title detail.

   Layers on styles.css and reuses its tokens (--bg, --ink, --panel, the type
   scale…). Each detail page sets --g-accent / --g-accent-2 inline, so one
   stylesheet serves every title and the page retints itself.
   Account-portal styles live in account.css.
   ========================================================================= */

.game-body { background: var(--bg); }

/* Same formula as .container / .nav__inner in styles.css. These used to use
   calc(100% - 48px) against the core sheet's 92vw and drifted up to 11px
   apart between 720 and 1283px — the wordmark never lined up with the H1. */
.gwrap {
  width: min(var(--maxw), 100% - var(--gutter) * 2);
  margin-inline: auto;
}

/* One vertical rhythm for every band on these pages. */
.gcat, .gtiles-sec, .glaunch-sec, .gsection { padding-block: clamp(72px, 9vh, 118px); }

/* ------------------------------------------------------------------- hero */

.ghero {
  position: relative;
  min-height: min(64vh, 600px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}

/* The four detail pages each carried a ~400-character copy of this gradient in
   an inline style attribute. It only ever varied by --g-accent, which the page
   already sets, so it belongs here. */
.ghero__art {
  position: absolute;
  inset: -4%;
  z-index: -3;
  background:
    radial-gradient(58% 72% at 70% 26%, color-mix(in srgb, var(--g-accent) 44%, transparent) 0%, transparent 68%),
    radial-gradient(46% 56% at 30% 70%, color-mix(in srgb, var(--g-accent-2) 26%, transparent) 0%, transparent 72%),
    repeating-linear-gradient(107deg, rgba(255,255,255,0.026) 0 2px, transparent 2px 22px),
    linear-gradient(158deg, #131722 0%, #0a0d16 54%, #05070f 100%);
  will-change: transform;
  animation: gdrift 40s ease-in-out infinite alternate;
}

@keyframes gdrift {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.08) translate3d(-1.2%, -0.8%, 0); }
}

.ghero__scrim {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(96deg, rgba(5, 7, 15, 0.97) 0%, rgba(5, 7, 15, 0.86) 34%, rgba(5, 7, 15, 0.3) 66%, rgba(5, 7, 15, 0.08) 100%),
    linear-gradient(0deg, var(--bg) 2%, rgba(5, 7, 15, 0) 52%);
}

.ghero__grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.10;
  pointer-events: none;
  background-image: var(--grain);
}

/* Ghosted title glyph in the empty right half of the detail hero. */
.ghero__glyph {
  position: absolute; z-index: -1;
  right: 8%; top: 50%; transform: translateY(-50%);
  width: clamp(180px, 26vw, 360px);
  color: color-mix(in srgb, var(--g-accent) 55%, #ffffff);
  opacity: 0.14;
  pointer-events: none;
}
.ghero__glyph svg { width: 100%; height: auto; }

/* Creature sprites on the Wildbound page — scattered but deterministic. */
.cre {
  position: absolute;
  width: clamp(78px, 9vw, 148px);
  image-rendering: pixelated;
  opacity: 0.9;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.55));
  animation: gfloat 9s ease-in-out infinite alternate;
}
.cre--0 { right: 6%;  top: 16%; }
.cre--1 { right: 22%; top: 42%; width: clamp(64px, 7vw, 116px); animation-delay: -1.4s; }
.cre--2 { right: 13%; bottom: 12%; animation-delay: -3.1s; }
.cre--3 { right: 33%; top: 12%; width: clamp(56px, 6vw, 96px); opacity: 0.6; animation-delay: -2.2s; }
.cre--4 { right: 40%; bottom: 22%; width: clamp(52px, 5.5vw, 88px); opacity: 0.45; animation-delay: -4.5s; }
.cre--5 { right: 2%;  top: 52%; width: clamp(56px, 6vw, 100px); opacity: 0.7; animation-delay: -5.6s; }
.cre--6 { right: 27%; bottom: 4%; width: clamp(48px, 5vw, 80px); opacity: 0.35; animation-delay: -0.7s; }

@keyframes gfloat {
  from { transform: translateY(-6px); }
  to   { transform: translateY(10px); }
}

.ghero__inner {
  position: relative;
  width: min(var(--maxw), 100% - var(--gutter) * 2);
  margin-inline: auto;
  /* Fluid, so the hero doesn't eat 91% of a short viewport and leave no signal
     that the page continues below it. */
  padding: clamp(108px, 13vh, 150px) 0 clamp(44px, 6vh, 72px);
}
.ghero__inner > * { max-width: 780px; }

.gback {
  display: inline-block;
  margin-bottom: 26px;
  color: var(--ink-dim);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: color 0.2s var(--ease);
}
.gback:hover { color: var(--ink); }

.gmeta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  color: var(--ink-faint);
  font-size: var(--fs-caps);
  font-weight: 700;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
}
/* Lightened toward white: the raw accent measured 3.65:1 on the dark page for
   the warm titles. 62% white lands the worst of the five at 7.3:1. */
.gpill {
  padding: 5px 11px;
  border: 1px solid color-mix(in srgb, var(--g-accent) 46%, transparent);
  border-radius: 999px;
  color: color-mix(in srgb, var(--g-accent) 58%, #ffffff);
  letter-spacing: 0.12em;
}

.gtitle {
  margin: 0;
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: var(--tr-display);
  text-shadow: 0 4px 40px rgba(0, 0, 0, 0.6);
}

.gtagline {
  margin: 20px 0 0;
  max-width: 34ch;
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: color-mix(in srgb, var(--g-accent) 52%, #ffffff);
}

.glead {
  margin: 18px 0 0;
  max-width: 56ch;
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--ink-dim);
}

.gactions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

.gnote {
  margin: 18px 0 0;
  font-size: var(--fs-xs);
  color: var(--ink-faint);
}

/* ---------------------------------------------------------------- content */

/* Explicit areas, not auto-placement. With three bare grid children the
   browser placed .gcopy at (1,1), .feats__head at (2,1) and .feats at (1,2) —
   so "At a glance" sat 706px right of and 348px above the list it labels,
   alone in an otherwise empty column. */
.gsection .gwrap {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  grid-template-areas: "copy feats-head" "copy feats";
  grid-template-rows: auto 1fr;
  column-gap: var(--s8); row-gap: var(--s4);
  align-items: start;
}
.gcopy { grid-area: copy; }
.feats__head { grid-area: feats-head; margin-top: 6px; }
.feats { grid-area: feats; }

.gcopy p {
  margin: 0 0 20px;
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--ink-dim);
  max-width: 68ch;
}
.gcopy p:first-child {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--ink);
}

/* The detail pages jumped h1 → h3 with nothing between them. */
.feats__head,
.gtiles__head {
  margin: 0 0 18px;
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-faint);
}

.feats {
  list-style: none;
  display: grid;
  gap: 12px;
}
.feat {
  padding: 16px 18px;
  border: 1px solid var(--panel-bd);
  border-left: 2px solid color-mix(in srgb, var(--g-accent) 45%, transparent);
  border-radius: 0 14px 14px 0;
  background: var(--panel);
  transition: border-color 0.22s var(--ease), transform 0.22s var(--ease);
}
.feat:hover { border-left-color: var(--g-accent); transform: translateX(3px); }
.feat h3 {
  margin: 0 0 5px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink);
}
.feat p { margin: 0; max-width: 46ch; font-size: var(--fs-xs); line-height: var(--lh-body); color: var(--ink-faint); }

/* =========================================================================
   GAMES INDEX — catalog head, featured title, tile grid, launcher strip
   ========================================================================= */

/* ------------------------------------------------------- catalog header */

.gcat {
  position: relative;
  padding-top: clamp(150px, 18vh, 200px);
  overflow: hidden;
  isolation: isolate;
}

/* Two soft drifting colour fields. No blur filter on purpose — a wide blurred
   layer is expensive to composite, and a large radial gradient is already soft
   enough to read the same way. ease-in-out, not the site's expo --ease: on an
   infinite alternate loop an expo curve lurches then hangs for 20 seconds. */
.gcat__aurora { position: absolute; inset: 0; z-index: -2; }
.gcat__blob { position: absolute; display: block; will-change: transform; }
.gcat__blob--1 {
  width: 62vw; height: 46vw; left: -14vw; top: -20vw;
  background: radial-gradient(closest-side, rgba(76, 196, 255, 0.22), transparent 70%);
  animation: gaurora 26s ease-in-out infinite alternate;
}
.gcat__blob--2 {
  width: 54vw; height: 42vw; right: -12vw; top: -14vw;
  background: radial-gradient(closest-side, rgba(157, 123, 255, 0.2), transparent 70%);
  animation: gaurora 32s ease-in-out infinite alternate-reverse;
}
@keyframes gaurora {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(3%, 4%, 0) scale(1.12); }
}

.gcat__grain {
  position: absolute; inset: 0; z-index: -1;
  opacity: 0.09; pointer-events: none;
  background-image: var(--grain);
}

.gcat__title {
  margin: 0;
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.045em;
  background: linear-gradient(178deg, #ffffff 0%, #cddcf3 42%, #7d8dab 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 70px rgba(76, 196, 255, 0.18);
}

.gcat__lead {
  margin: 26px 0 0;
  max-width: 54ch;
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--ink-dim);
}

.gcat__stats {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: 44px;
  margin: 44px 0 0; padding-top: 32px;
  border-top: 1px solid var(--panel-bd);
}
.gcat__stats li { display: flex; flex-direction: column; gap: 6px; }
.gcat__stats b {
  font-size: var(--fs-h2); font-weight: 800; line-height: 1; letter-spacing: var(--tr-tight);
  background: linear-gradient(180deg, #fff, var(--blue));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gcat__stats span {
  font-size: var(--fs-caps); font-weight: 600;
  letter-spacing: var(--tr-caps); text-transform: uppercase;
  color: var(--ink-faint);
}

/* --------------------------------------------------- shared key art recipe

   No photographic art exists yet, so each title's "cover" is built from
   layered gradients keyed off its own --c/--c2 plus a focal point. The
   texture layer is swapped per title with .art--scan/hatch/rings/rain so the
   four covers differ structurally, not only by hue.                         */

.art {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
  background: #05070f;
  --tex: repeating-linear-gradient(var(--ang, 104deg), rgba(255,255,255,0.034) 0 2px, transparent 2px 20px);
}
.art--hatch { --tex: repeating-linear-gradient(var(--ang, 104deg), rgba(255,255,255,0.055) 0 1px, transparent 1px 7px); }
.art--rings { --tex: repeating-radial-gradient(circle at var(--fx, 66%) var(--fy, 18%), transparent 0 17px, rgba(255,255,255,0.05) 17px 18px); }
.art--rain  { --tex: repeating-linear-gradient(96deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 6px); }

.art::before {
  content: "";
  position: absolute; inset: -8%;
  background:
    radial-gradient(72% 92% at var(--fx, 66%) var(--fy, 18%), color-mix(in srgb, var(--c) 62%, transparent) 0%, transparent 66%),
    radial-gradient(58% 74% at var(--fx2, 24%) var(--fy2, 86%), color-mix(in srgb, var(--c2) 34%, transparent) 0%, transparent 72%),
    var(--tex),
    linear-gradient(158deg, #171d2b 0%, #0a0d16 56%, #05070f 100%);
  transition: transform 0.9s var(--ease), filter 0.5s var(--ease);
}
/* vignette so the art never fights the copy sitting next to it */
.art::after {
  content: "";
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(120% 100% at 50% 40%, transparent 42%, rgba(5, 7, 15, 0.5) 100%);
}

.art__grain {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  opacity: 0.11;
  background-image: var(--grain);
}

/* light sweep, parked off-frame until hover */
.art__sheen {
  position: absolute; inset: -20% -60%; z-index: 4; pointer-events: none;
  background: linear-gradient(104deg, transparent 34%, rgba(255, 255, 255, 0.14) 48%, transparent 62%);
  transform: translateX(-115%);
  transition: transform 1.05s var(--ease);
}

.art__glyph {
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-items: center;
  color: color-mix(in srgb, var(--c) 55%, #ffffff);
  opacity: 0.40;
  transition: opacity 0.5s var(--ease), transform 0.9s var(--ease);
}
.art__glyph svg {
  width: 52%; max-width: 180px; height: auto;
  filter: drop-shadow(0 14px 34px rgba(0, 0, 0, 0.55));
}

/* Huge ghosted wordmark across the featured art. z-index 5 puts it above the
   grain (2) and the vignette (3), which were painting over it. */
.art__word {
  position: absolute; z-index: 5; left: 0; right: 0; bottom: 8%;
  text-align: center;
  font-size: clamp(30px, 4.6vw, 62px);
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px color-mix(in srgb, var(--c) 62%, #ffffff);
  opacity: 0.52;
  transition: opacity 0.6s var(--ease), transform 0.9s var(--ease);
  pointer-events: none;
}

/* ------------------------------------------------------- shared bits */

.gdot {
  width: 6px; height: 6px; flex: 0 0 auto;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c, var(--blue)) 60%, #ffffff);
  box-shadow: 0 0 10px var(--c, var(--blue));
}
.gdot--live { background: #6fe0a0; box-shadow: 0 0 10px #56d98a; animation: gpulse 2.4s ease-in-out infinite; }
@keyframes gpulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

.gbadge {
  align-self: flex-start;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--c) 46%, transparent);
  background: color-mix(in srgb, var(--c) 14%, transparent);
  color: color-mix(in srgb, var(--c) 52%, #ffffff);
  font-size: var(--fs-caps); font-weight: 800;
  letter-spacing: var(--tr-caps); text-transform: uppercase;
}
.gbadge--live { border-color: rgba(111, 224, 160, .5); background: rgba(111, 224, 160, .14); color: #9cebc0; }

.gchips { display: flex; flex-wrap: wrap; gap: 8px; }
.gchips span {
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--panel-bd);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink-dim);
  font-size: var(--fs-xs);
}

/* ----------------------------------------------------------- featured */

.gfeat-sec { padding-block: 12px 0; }

.gfeat {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  align-items: stretch;
  border: 1px solid var(--card-bd);
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  overflow: hidden;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.gfeat:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--c) 52%, transparent);
  box-shadow: 0 44px 90px -40px color-mix(in srgb, var(--c) 78%, transparent),
              0 0 0 1px color-mix(in srgb, var(--c) 20%, transparent);
}

.gfeat__art { min-height: 460px; }
.gfeat:hover .art::before { transform: scale(1.06); filter: saturate(1.14) brightness(1.07); }
.gfeat:hover .art__sheen { transform: translateX(115%); }
.gfeat:hover .art__glyph { opacity: 0.34; transform: scale(1.05); }
.gfeat:hover .art__word { opacity: 0.66; }

.gfeat__body {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 15px;
  padding: clamp(32px, 4vw, 54px);
  min-width: 0;
}
.gfeat__meta {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--fs-caps); font-weight: 700;
  letter-spacing: var(--tr-caps); text-transform: uppercase;
  color: var(--ink-faint);
}
.gfeat__title {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 800; line-height: var(--lh-head); letter-spacing: var(--tr-display);
  color: var(--ink);
}
.gfeat__tag {
  font-size: var(--fs-h4);
  font-weight: 600; line-height: var(--lh-snug);
  color: color-mix(in srgb, var(--c) 48%, #ffffff);
}
/* No max-width: the grid track is already the measure (~56ch), and a 46ch cap
   left 18% of the column permanently empty. */
.gfeat__lead {
  font-size: var(--fs-body); line-height: var(--lh-loose);
  color: var(--ink-dim);
}
.gfeat__cta {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 6px;
  font-size: var(--fs-xs); font-weight: 800;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: color-mix(in srgb, var(--c) 42%, #ffffff);
}
.gfeat__arrow { transition: transform 0.3s var(--ease); }
.gfeat:hover .gfeat__arrow { transform: translateX(6px); }

/* ---------------------------------------------------------- tile grid */

/* Three columns once they fit, one column below that. auto-fit alone is NOT
   enough here: with 3 items and minmax(275px), any container between 570 and
   864px resolves to two columns and strands the third tile alone at half
   width. That band is handled explicitly below by going full-width-horizontal
   rather than two-up. */
.gtiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }



.gtile {
  position: relative;
  display: flex; flex-direction: column;
  border: 1px solid var(--card-bd);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  overflow: hidden;
  transition: transform 0.38s var(--ease), border-color 0.38s var(--ease), box-shadow 0.38s var(--ease);
}
.gtile:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--c) 52%, transparent);
  box-shadow: 0 34px 70px -34px color-mix(in srgb, var(--c) 76%, transparent);
}

.gtile__art { aspect-ratio: 16 / 10; }
.gtile:hover .art::before { transform: scale(1.07); filter: saturate(1.14) brightness(1.07); }
.gtile:hover .art__sheen { transform: translateX(115%); }
.gtile:hover .art__glyph { opacity: 0.36; transform: scale(1.06); }

.gtile__idx {
  position: absolute; z-index: 6; top: 16px; right: 18px;
  font-size: var(--fs-xs); font-weight: 800;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--c) 22%, #ffffff);
}

.gtile__body {
  display: flex; flex-direction: column; gap: 10px;
  padding: 24px 24px 26px;
  flex: 1;
  min-width: 0;
}
.gtile__meta {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: var(--fs-caps); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-faint);
}
.gtile__title {
  margin: 0;
  font-size: var(--fs-h4); font-weight: 800;
  letter-spacing: var(--tr-tight); line-height: var(--lh-head);
  color: var(--ink);
}
.gtile__tag {
  font-size: var(--fs-sm); line-height: var(--lh-body);
  color: color-mix(in srgb, var(--c) 40%, #ffffff);
  flex: 1;
}
/* Legible at rest, not hover-gated. The old `opacity: .55` on the raw accent
   measured 1.98:1 — the primary affordance on the page was invisible until
   hover, and touch users never saw it at all. */
.gtile__go {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 6px;
  font-size: var(--fs-caps); font-weight: 800;
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--ink-dim);
  transition: color 0.3s var(--ease);
}
.gtile__go span { transition: transform 0.3s var(--ease); }
.gtile:hover .gtile__go,
.gtile:focus-visible .gtile__go { color: color-mix(in srgb, var(--c) 40%, #ffffff); }
.gtile:hover .gtile__go span,
.gtile:focus-visible .gtile__go span { transform: translateX(5px); }

/* ------------------------------------------------------ launcher strip */

.glaunch {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 44px;
  padding: clamp(34px, 4.4vw, 56px);
  border: 1px solid var(--panel-bd);
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(110% 150% at 12% 0%, rgba(157, 123, 255, 0.16), transparent 58%),
    radial-gradient(90% 140% at 92% 110%, rgba(76, 196, 255, 0.18), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.014));
}
.glaunch__lead {
  margin: 14px 0 0;
  max-width: 50ch;
  font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--ink-dim);
}
.glaunch__actions {
  display: grid; grid-template-columns: repeat(2, max-content);
  align-items: center; justify-content: start; gap: 12px;
}
.glaunch__note {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  font-size: var(--fs-caps); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-faint);
}

@media (min-width: 601px) and (max-width: 1000px) {
  .gtiles { grid-template-columns: 1fr; }
  .gtile { flex-direction: row; align-items: stretch; }
  .gtile__art { flex: 0 0 40%; aspect-ratio: auto; }
  .gtile__body { justify-content: center; }
}

/* --------------------------------------------------------------- responsive */

@media (max-width: 600px) {
  .gtiles { grid-template-columns: 1fr; }
}

@media (max-width: 1023px) {
  .glaunch { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 900px) {
  .gsection .gwrap { grid-template-columns: 1fr; gap: 40px; }
  .cre { opacity: 0.35; }
  .ghero__glyph { opacity: 0.08; }

  /* art above copy once there isn't room for a side-by-side */
  .gfeat { grid-template-columns: 1fr; }
  .gfeat__art { min-height: 0; aspect-ratio: 16 / 10; }

  .glaunch { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 640px) {
  .gcat__stats { gap: 24px 34px; }
  .gtagline { max-width: none; }
  .ghero__inner { padding: 130px 0 56px; }
  .glaunch__actions .btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ghero__art, .cre, .gcat__blob, .gdot--live { animation: none; }
  .feat:hover, .gfeat:hover, .gtile:hover { transform: none; }
  .art::before, .art__sheen, .art__glyph, .art__word { transition: none; }
  .gfeat:hover .art::before, .gtile:hover .art::before { transform: none; }
  .gfeat:hover .art__sheen, .gtile:hover .art__sheen { transform: translateX(-115%); }
}

/* =========================================================================
   FORCED COLORS + PRINT — the games namespace owns its own overrides so the
   core sheet doesn't reach across into selectors it doesn't define.
   ========================================================================= */
@media (forced-colors: active) {
  .gcat__title, .gcat__stats b {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: CanvasText;
  }
  .gfeat, .gtile, .feat { border: 1px solid ButtonText; }
}

@media print {
  .gcat__aurora, .gcat__grain, .ghero__art, .ghero__grain, .ghero__glyph, .art { display: none !important; }
  .gcat__title { -webkit-text-fill-color: #000; color: #000; }
  .gfeat, .gtile, .glaunch, .feat { border: 1px solid #ccc; box-shadow: none; }
}