/* EdgeRift — Games page (/games, templates/pages/games.twig; concept/games.html).
   Page CSS only: loaded after the shared kit, inside @layer pages, tokens only (no colour literals). */
@layer pages {
  /* Pairs (a device's free and Pro apps; Retro's PC and Classic Mac OS): side by side in equal columns from 600px,
     centred in the band; one a row on phones, so the names and links never squeeze. */
  .app-grid--pair { grid-template-columns: 1fr 1fr; max-width: 760px; gap: 48px 24px; }
  @media (min-width: 768px) { .app-grid--pair { gap: 48px 40px; } }
  @media (max-width: 599px) { .app-grid--pair { grid-template-columns: 1fr; gap: 40px; } }

  /* Device bands (owner, 2026-10-07: one per device, in the header Games menu's order). The iPhone lineup follows
     the title in the first band; the iPad band is dark. Heading to lineup: the Retro band's gap. Each app's links sit side
     by side at every width (the shared .app stacks them for a four-up phone grid). The price is what tells free
     from Pro, so it's in the text colour, not the muted grey. */
  /* Room to breathe (owner, 2026-10-07): a clear gap under the page title, the tagline and the icons, and between
     each tile's name, price and links */
  .games-top .games-device { margin-top: clamp(64px, 3.05vw + 52px, 96px); }
  .games-device .tile-title + .sub { margin-top: 14px; }
  .games-device .app-grid--pair { margin-top: clamp(48px, 2.29vw + 39px, 72px); row-gap: 64px; }
  .games-device .app__icon { margin-bottom: 26px; }
  .games-device .app .price-line { margin-top: 10px; }
  .games-device .app .cta-row { flex-direction: row; gap: 4px 20px; }
  .games-device .app .price-line { color: var(--c-ink); }
  .games-device.band--dark .app .price-line { color: var(--c-on-dark); }
  .games-device.band--dark .app__name span { color: var(--c-on-dark-muted); }   /* "for iPad" on dark (6.5:1) */

  /* Retro: each product's own pixel icon (PC: the DOS/Windows 256-colour icon; Classic Mac OS: 1-bit), shown crisp. */
  .retro-icon { display: block; width: 144px; height: 144px; margin: 0 auto 20px; }
  .retro-icon img { width: 100%; height: 100%; image-rendering: pixelated; }   /* 192px pixel art: 3/4 and 1:1, crisp */
  @media (min-width: 768px) { .retro-icon { width: 192px; height: 192px; } }

  /* Real Solitaire for TV band: tvOS light grey with a soft spotlight (the stage itself is shared: components.css) */
  .games-tvapp { background: radial-gradient(60% 55% at 50% 38%, var(--c-tvos-stage-center) 0%, var(--c-tvos-stage-mid) 45%, var(--c-tvos-stage-edge) 100%); }
  .games-tvapp .tvstage.tvstage--tv { width: min(92%, 680px); }   /* the Home TV scene, a little larger here */

  /* Real Solitaire Retro on Games: a small version of the Retro page's night stage (its colours: night blue,
     dusk glow, sunset-pink perspective grid with a horizon line), neon-lit pixel icons, edition colours. */
  .games-retro {
    position: relative; overflow: hidden; isolation: isolate; color: var(--c-on-dark); padding-bottom: clamp(250px, 3.05vw + 238px, 280px);
    background: var(--c-night);
    background-image:
      radial-gradient(70% 45% at 50% 72%, var(--c-night-dusk), transparent 72%),
      linear-gradient(180deg, var(--c-night-deep) 0%, var(--c-night) 40%, var(--c-night) 78%, var(--c-night-deep) 100%);
  }
  .games-retro > :not(.night-floor):not(.night-glow) { position: relative; z-index: 1; }
  .games-retro .retro-icon img { filter: var(--filter-neon-icons); }
  /* Room to breathe (owner, 2026-10-07), as the iPhone and iPad bands: the tagline, the icons, each product's name,
     platforms and link, and the brand link all get a clear gap */
  .games-retro .tile-title + .sub { margin-top: 14px; }
  .games-retro .app-grid { margin-top: clamp(48px, 2.29vw + 39px, 72px); row-gap: 64px; }
  .games-retro .retro-icon { margin-bottom: 26px; }
  .games-retro .app__name { color: var(--c-on-dark); }
  .games-retro .app__name span { color: var(--c-on-dark-muted); }   /* "for PC" on the night stage (as the iPad band's) */
  .games-retro .retro-platforms { margin-top: 12px; }
  .games-retro .retro-about { margin-top: clamp(56px, 2.67vw + 46px, 80px); }
  .games-retro .eyebrow { color: var(--c-on-dark-muted); }
  .games-retro .tile-title { color: var(--c-on-dark); }
  .games-retro .sub { color: var(--c-on-night-sub); }
  .games-retro .cta { color: var(--c-red-on-dark); }
  .games-retro .cta:focus-visible { outline-color: var(--c-red-on-dark); }
  .games-retro .cta--quiet { color: var(--c-on-dark); }
  .games-retro .cta--soon { color: var(--c-on-dark-muted); }   /* coming soon (owner, 2026-10-13): muted, not a link */
  .retro-platforms { margin: 14px 0 0; font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 14px; font-weight: 600; letter-spacing: .04em; }
  .retro-platforms .p-dos { color: var(--c-edition-dos); } .retro-platforms .p-win31 { color: var(--c-edition-win31); }
  .retro-platforms .p-win95 { color: var(--c-edition-win95); } .retro-platforms .p-mac { color: var(--c-edition-mac); }
  .retro-platforms__sep { color: var(--c-muted); margin: 0 .3em; }
  @media print { .games-retro { background: none; color: inherit; } .night-floor, .night-glow { display: none; } }
}