/* ==========================================================================
   home.css — the landing page.

   Everything here is scoped under `.home`. The article and directory pages have
   their own carefully balanced typography, and a landing page wants much larger
   display type and far more motion than a 12,000-word character page does; an
   unscoped rule here would quietly reflow all three thousand of them.

   Colour comes entirely from the theme tokens defined in globals.css, so the
   page follows light/dark without a single hard-coded background.
   ========================================================================== */

.home {
  --home-max: 1240px;
  --home-gap: clamp(14px, 1.4vw, 20px);
  --home-r: 16px;
  --home-r-lg: 24px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow-x: clip; /* NOT hidden: hidden here would make every sticky child scroll */
}

.home .wrap {
  width: min(var(--home-max), calc(100% - clamp(28px, 5vw, 56px)));
  margin-inline: auto;
}

/* ── Section furniture ─────────────────────────────────────────────────── */

.home-section {
  padding-top: clamp(48px, 6vw, 84px);
  scroll-margin-top: 84px;
}

.home-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(18px, 2.2vw, 28px);
}

/* A heading-only bar, so the cards under it get the space. */
.home-head--compact {
  margin-bottom: clamp(14px, 1.6vw, 20px);
}

.home-head-copy {
  position: relative;
  padding-left: 18px;
  min-width: 0;
}

/* The accent bar that opens every section — the reference's strongest
   structural signature, rebuilt as a gradient so it reads on both themes. */
.home-head-copy::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 5px;
  border-radius: 5px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
}

.home-kicker {
  display: block;
  margin-bottom: 7px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.home-head h2 {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(26px, 3.1vw, 38px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.home-note {
  margin: 8px 0 0;
  max-width: 62ch;
  color: var(--ink-3);
  font-size: 15px;
  line-height: 1.55;
}

.home-more {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  border-radius: 999px;
  background: var(--accent-soft);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  transition: color 0.2s, background 0.2s, transform 0.2s var(--ease-out);
}
.home-more:hover {
  color: var(--accent-ink);
  background: var(--accent);
  transform: translateX(3px);
}
.home-more svg {
  width: 15px;
  height: 15px;
  transition: transform 0.2s var(--ease-out);
}
.home-more:hover svg {
  transform: translateX(2px);
}

/* ── Hero ──────────────────────────────────────────────────────────────── */

.home .hero-stage {
  /*
    A band across the top of the page, about 40% of the screen tall,
    rather than the whole 3:1 picture. At full width that picture is ~640px on
    a 1920 screen, which pushed everything else below the fold.

    The artwork covers the band, so the crop changes with the window but the
    copy and the art can never slide apart: the copy is centred in the band and
    the art's empty centre is centred in it too. Every size inside is still a
    fraction of --hero-h, so zooming scales the band and its contents together.

    min-height, not height: the copy may wrap on a narrow window, and the band
    grows to hold it instead of clipping it.
  */
  --hero-h: clamp(340px, 40vh, 480px);
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: var(--hero-h);
  padding-block: calc(var(--hero-h) * 0.07);
  /* The artwork is bright in both themes, so the surfaces on it (badge, search
     bar, results) keep their light values instead of turning dark on daylight. */
  --paper: #ffffff;
  --card: #ffffff;
  --card-edge: #dcdcd8;
  --ink: #111318;
  --ink-4: #6b7079;
}

.home .hero-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  /* The bottom of the art dissolves into the page instead of ending on a hard
     edge. A mask rather than a colour overlay, so it blends into whatever the
     page colour is in either theme. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, rgba(0, 0, 0, 0.55) 76%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 52%, rgba(0, 0, 0, 0.55) 76%, transparent 100%);
}

/* Shown exactly as supplied: no filter, no wash. The band is shallower than the
   picture, so it is cropped vertically; anchoring near the top keeps the faces
   and drops the fog at the bottom, which carries nothing. */
.home .hero-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 24%;
}

.home .hero-inner {
  position: relative;
  z-index: 3;
  width: min(calc(var(--hero-h) * 2.5), calc(100% - 32px));
  margin-inline: auto;
  text-align: center;
  /* The artwork stays bright in dark mode too, so the copy on it keeps dark ink
     rather than following the theme to white-on-white. */
  color: #111318;
}

.home h1 {
  margin: 0;
  font-family: var(--font-head);
  font-size: calc(var(--hero-h) * 0.15);
  text-shadow: 0 1px 14px rgba(255, 255, 255, 0.9);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

/* A gradient wordmark rather than a flat accent fill — the single most
   noticeable "expensive" detail at the top of the page. */
.home .hero-grad {
  /* A deeper orange than the theme accent: the accent read washed-out against
     the bright artwork. No text-shadow either, since the h1's white glow shows
     through clipped text and lightens it further. */
  background: linear-gradient(96deg, #d9480f 12%, #b8380a 52%, #d9480f 92%);
  text-shadow: none;
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: hero-grad 7s ease-in-out infinite;
}

@keyframes hero-grad {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.home .hero-lede {
  max-width: 62ch;
  margin: calc(var(--hero-h) * 0.022) auto 0;
  color: #2f343d;
  font-size: calc(var(--hero-h) * 0.044);
  text-shadow: 0 1px 10px rgba(255, 255, 255, 0.95);
  line-height: 1.55;
}

.home .hero-stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: calc(var(--hero-h) * 0.1);
  margin-top: calc(var(--hero-h) * 0.04);
}

.home .hero-stat b {
  display: block;
  font-family: var(--font-head);
  font-size: calc(var(--hero-h) * 0.056);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

.home .hero-stat span {
  display: block;
  margin-top: calc(var(--hero-h) * 0.01);
  color: #50565f;
  font-size: calc(var(--hero-h) * 0.028);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

/* ── Search ────────────────────────────────────────────────────────────── */

.home .hsearch {
  position: relative;
  z-index: 6; /* above the cards below, so results are never clipped */
  width: min(calc(var(--hero-h) * 1.75), 100%);
  margin: calc(var(--hero-h) * 0.045) auto 0;
}

.home .hsearch-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(var(--hero-h) * 0.016) calc(var(--hero-h) * 0.016) calc(var(--hero-h) * 0.016)
    calc(var(--hero-h) * 0.045);
  border: 1px solid var(--card-edge);
  border-radius: 14px;
  background: var(--card);
  box-shadow: 0 18px 44px color-mix(in srgb, var(--ink) 14%, transparent);
  transition: box-shadow 0.25s, border-color 0.2s, transform 0.25s var(--ease-out);
}

.home .hsearch:focus-within .hsearch-bar {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow:
    0 0 0 4px var(--accent-soft),
    0 20px 48px color-mix(in srgb, var(--ink) 18%, transparent);
  transform: translateY(-1px);
}

.home .hsearch-bar > svg {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  color: var(--ink-4);
}

.home .hsearch input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: calc(var(--hero-h) * 0.043);
}

.home .hsearch input::placeholder {
  color: var(--ink-4);
}

.home .hsearch button[type='submit'] {
  flex: 0 0 auto;
  min-height: calc(var(--hero-h) * 0.115);
  padding: 0 calc(var(--hero-h) * 0.065);
  color: var(--accent-ink);
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  font: inherit;
  font-size: calc(var(--hero-h) * 0.04);
  font-weight: 800;
  cursor: pointer;
  transition: filter 0.2s, transform 0.2s var(--ease-out);
}
.home .hsearch button[type='submit']:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
}

.home .hsearch-results {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 10px);
  max-height: 340px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--card-edge);
  border-radius: 14px;
  background: var(--card);
  box-shadow: 0 24px 60px color-mix(in srgb, var(--ink) 22%, transparent);
  text-align: left;
  animation: pop-in 0.18s var(--ease-out);
}

@keyframes pop-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

.home .hsearch-results a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
}
.home .hsearch-results a:hover,
.home .hsearch-results a:focus-visible {
  background: var(--accent-soft);
  outline: 0;
}

.home .hsearch-results .r-kind {
  flex: 0 0 auto;
  padding: 3px 8px;
  color: var(--accent);
  border-radius: 6px;
  background: var(--accent-soft);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.home .hsearch-results .r-name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home .hsearch-results .r-in {
  flex: 0 0 auto;
  color: var(--ink-4);
  font-size: 12px;
}

.home .hsearch-empty {
  padding: 16px 12px;
  color: var(--ink-3);
  font-size: 13.5px;
  text-align: center;
}

/* ── 3D cards ──────────────────────────────────────────────────────────── */

.home .tilt {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
  will-change: transform;
}

/* The moving highlight that sells the tilt as a physical surface. Driven by
   --mx/--my, which the client component writes on pointer move. */
.home .tilt::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(
    38% 60% at var(--mx, 50%) var(--my, 0%),
    color-mix(in srgb, #fff 42%, transparent),
    transparent 70%
  );
  transition: opacity 0.3s;
}
.home .tilt:hover::after {
  opacity: 1;
}

.home .game-grid {
  display: grid;
  /* The six featured games sit in one row, dropping to two rows of three on
     tablets and three rows of two on phones. */
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--home-gap);
  perspective: 1400px;
}

.home .gcard {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--card-edge);
  border-radius: var(--home-r);
  background: var(--card);
  color: inherit;
  text-decoration: none;
  box-shadow: 0 3px 12px color-mix(in srgb, var(--ink) 7%, transparent);
}

.home .gcard:hover,
.home .gcard:focus-visible {
  outline: 0;
  box-shadow:
    0 22px 48px color-mix(in srgb, var(--ink) 20%, transparent),
    0 0 0 1px color-mix(in srgb, var(--gs-accent, var(--accent)) 42%, transparent);
}

.home .gcard-art {
  position: relative;
  /* The featured covers are 4:5 portraits, so the card takes their shape. */
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--gs-accent, var(--accent)) 26%, var(--paper-3)),
    var(--paper-3)
  );
}

.home .gcard-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}
.home .gcard:hover .gcard-art img {
  transform: scale(1.06);
}

.home .gcard-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, color-mix(in srgb, var(--ink) 42%, transparent), transparent 58%);
}

.home .gcard-mono {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-size: 34px;
  font-weight: 800;
  color: color-mix(in srgb, var(--ink) 24%, transparent);
  letter-spacing: -0.03em;
}

.home .gcard-tag {
  position: absolute;
  left: 11px;
  top: 11px;
  z-index: 2;
  padding: 5px 10px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 7px;
  background: rgba(12, 14, 20, 0.52);
  backdrop-filter: blur(8px);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.home .gcard-body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 14px 15px 16px;
}

.home .gcard-body h3 {
  margin: 0;
  font-family: var(--font-head);
  font-size: 16.5px;
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.02em;
}

.home .gcard-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.home .gcard-chips span {
  padding: 3px 8px;
  color: var(--ink-3);
  border: 1px solid var(--rule);
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 600;
}

.home .gcard-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 800;
}
.home .gcard-go svg {
  width: 13px;
  height: 13px;
  transition: transform 0.25s var(--ease-out);
}
.home .gcard:hover .gcard-go svg {
  transform: translateX(4px);
}

/* ── Categories ────────────────────────────────────────────────────────── */

.home .cat-grid {
  display: grid;
  /* The five icon categories fill one row, then 3 and 2 per row as it narrows. */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--home-gap);
  perspective: 1200px;
}

.home .cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-height: 146px;
  padding: 20px 14px;
  border: 1px solid var(--card-edge);
  border-radius: var(--home-r);
  background: var(--card);
  color: inherit;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--ink) 5%, transparent);
}

.home .cat:hover,
.home .cat:focus-visible {
  outline: 0;
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  box-shadow: 0 18px 38px color-mix(in srgb, var(--ink) 16%, transparent);
}

.home .cat-ico {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  transition: transform 0.35s var(--ease-spring);
}
.home .cat:hover .cat-ico {
  transform: translateY(-3px) rotate(-6deg) scale(1.08);
}
/* Full-colour artwork, so it sits on the card without a tinted tile. */
.home .cat-ico img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.home .cat b {
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.home .cat span {
  color: var(--ink-4);
  font-size: 11.5px;
  line-height: 1.35;
}

/* ── Two-column lists ──────────────────────────────────────────────────── */

.home .panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: clamp(22px, 3vw, 40px);
}

.home .panel-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-bottom: 13px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}

.home .panel-ico {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: var(--accent);
  border-radius: 11px;
  background: var(--accent-soft);
}
.home .panel-ico svg {
  width: 19px;
  height: 19px;
}

.home .panel-head h3 {
  margin: 0;
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.home .panel-head p {
  margin: 3px 0 0;
  color: var(--ink-4);
  font-size: 12px;
}

.home .prow {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 12px;
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  transition: background 0.2s, transform 0.25s var(--ease-out);
}
.home .prow:hover,
.home .prow:focus-visible {
  background: var(--accent-soft);
  outline: 0;
  transform: translateX(4px);
}

.home .prow-rank {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 27px;
  height: 27px;
  color: var(--ink-3);
  border-radius: 8px;
  background: var(--paper-3);
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.home .prow:hover .prow-rank {
  color: var(--accent-ink);
  background: var(--accent);
}

.home .prow-thumb {
  flex: 0 0 auto;
  width: 74px;
  height: 46px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--paper-3);
}
.home .prow-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home .prow-copy {
  flex: 1;
  min-width: 0;
}
.home .prow-copy b {
  display: block;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home .prow-copy span {
  display: block;
  margin-top: 2px;
  color: var(--ink-4);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home .prow-meta {
  flex: 0 0 auto;
  color: var(--ink-4);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Closing call to action ────────────────────────────────────────────── */

.home-cta {
  position: relative;
  overflow: hidden;
  margin-top: clamp(52px, 6vw, 84px);
  padding: clamp(30px, 4vw, 48px);
  border: 1px solid var(--card-edge);
  border-radius: var(--home-r-lg);
  background:
    radial-gradient(90% 150% at 8% 0%, var(--accent-soft), transparent 62%),
    var(--card);
  text-align: center;
}

.home-cta h2 {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.home-cta p {
  max-width: 58ch;
  margin: 12px auto 0;
  color: var(--ink-3);
  font-size: 15px;
  line-height: 1.6;
}

.home .cta-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 11px;
  margin-top: 24px;
}

.home .btn-solid,
.home .btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 22px;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  transition: transform 0.22s var(--ease-out), filter 0.2s, background 0.2s;
}
.home .btn-solid {
  color: var(--accent-ink);
  border: 1px solid transparent;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.home .btn-solid:hover {
  filter: brightness(1.07);
  transform: translateY(-2px);
}
.home .btn-ghost {
  color: var(--ink);
  border: 1px solid var(--card-edge);
  background: transparent;
}
.home .btn-ghost:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  transform: translateY(-2px);
}
.home .btn-solid svg,
.home .btn-ghost svg {
  width: 16px;
  height: 16px;
}

.home-foot-space {
  height: clamp(52px, 6vw, 80px);
}

/* ── Scroll reveal ─────────────────────────────────────────────────────── */

.home .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.66s var(--ease-out), transform 0.66s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.home .reveal.in {
  opacity: 1;
  transform: none;
}

/* ── Dark theme ────────────────────────────────────────────────────────── */

/* The hero art is near-white daylight. Left bright above a dark page it glares,
   so dark mode dims it and the copy on it turns light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .home .gcard-tag {
    background: rgba(0, 0, 0, 0.55);
  }
  :root:not([data-theme='light']) .home .hero-art img {
    filter: brightness(0.44) contrast(1.06) saturate(0.9);
  }
  /* On the dimmed art the copy and its surfaces follow the theme again: the
     light values set on the stage are handed back to the dark ones. */
  :root:not([data-theme='light']) .home .hero-stage {
    --paper: inherit;
    --card: inherit;
    --card-edge: inherit;
    --ink: inherit;
    --ink-4: inherit;
  }
  :root:not([data-theme='light']) .home .hero-inner {
    color: #fff;
  }
  :root:not([data-theme='light']) .home h1 {
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.7);
  }
  :root:not([data-theme='light']) .home .hero-grad {
    background-image: linear-gradient(96deg, #ff6a2b 12%, #f0541a 52%, #ff6a2b 92%);
  }
  :root:not([data-theme='light']) .home .hero-lede {
    color: rgba(255, 255, 255, 0.86);
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.75);
  }
  :root:not([data-theme='light']) .home .hero-stat span {
    color: rgba(255, 255, 255, 0.7);
  }
}

:root[data-theme='dark'] .home .gcard-tag {
  background: rgba(0, 0, 0, 0.55);
}
:root[data-theme='dark'] .home .hero-art img {
  filter: brightness(0.44) contrast(1.06) saturate(0.9);
}
/* On the dimmed art the copy and its surfaces follow the theme again: the
   light values set on the stage are handed back to the dark ones. */
:root[data-theme='dark'] .home .hero-stage {
  --paper: inherit;
  --card: inherit;
  --card-edge: inherit;
  --ink: inherit;
  --ink-4: inherit;
}
:root[data-theme='dark'] .home .hero-inner {
  color: #fff;
}
:root[data-theme='dark'] .home h1 {
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.7);
}
:root[data-theme='dark'] .home .hero-grad {
  background-image: linear-gradient(96deg, #ff6a2b 12%, #f0541a 52%, #ff6a2b 92%);
}
:root[data-theme='dark'] .home .hero-lede {
  color: rgba(255, 255, 255, 0.86);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.75);
}
:root[data-theme='dark'] .home .hero-stat span {
  color: rgba(255, 255, 255, 0.7);
}

/* ── Narrow screens ────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .home .hero-stage {
    /* Copy wraps to more lines on a phone, so the band is set by that copy
       (min-height) rather than by the screen height. */
    --hero-h: 300px;
    padding-block: 34px 28px;
  }
  /* Four stats fit one row at phone width only with a tighter gap. */
  .home .hero-stats {
    gap: 14px;
  }
  .home .hero-stat span {
    letter-spacing: 0.06em;
  }
  .home .hero-art img {
    object-position: 50% 30%;
  }
  .home-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .home .prow-thumb {
    width: 60px;
    height: 40px;
  }
  .home .prow-meta {
    display: none;
  }
}

@media (max-width: 1080px) {
  .home .game-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 460px) {
  .home .game-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .home .gcard-body {
    padding: 11px 12px 13px;
  }
  .home .gcard-body h3 {
    font-size: 14px;
  }
  .home .gcard-chips {
    display: none;
  }
  .home .cat-grid {
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  }
}

/* Motion is decoration here; none of it carries meaning, so all of it goes. */
@media (prefers-reduced-motion: reduce) {
  .home .hero-grad {
    animation: none;
  }
  .home .hero-grad {
    background-position: 0 50%;
  }
  .home .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .home .tilt {
    transform: none !important;
  }
  .home .hero-art {
    transform: none !important;
  }
}

@media (max-width: 900px) {
  .home .cat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .home .cat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}