/* ==========================================================================
   Signal8 Games -- Game Page Styles (game.css)
   ==========================================================================
   Page-specific styles for individual game pages (e.g., Dot Connect).
   Compact content layout with hero, screenshot gallery, feature grid, and
   download CTA sections.

   Relies on css/base.css for design tokens, reset, and typography.
   Relies on css/home.css for nav and footer styles.

   Decisions referenced:
     D-05: Screenshots displayed inside CSS phone frame mockups
     D-06: Compact hero (Play Store listing header style)
     D-07: Compact content page, not full-viewport hero
     D-08: Google Play badge with placeholder href
   ========================================================================== */

/* ==========================================================================
   Section 1: Game Page Container (.game-page)
   --------------------------------------------------------------------------
   Single-column game content, centered at 720px max-width.
   Mobile-first padding with desktop override at 768px breakpoint.
   Follows the same spacing pattern as .privacy in pages.css.
   ========================================================================== */

.game-page {
  max-width: 720px;
  margin-inline: auto;
  padding: 112px 16px 48px;
}

@media (min-width: 768px) {
  .game-page {
    padding: 128px 32px 64px;
  }
}

/* ==========================================================================
   Section 2: Game Hero (.game-hero)
   --------------------------------------------------------------------------
   Centered flex column with game icon, title, one-line pitch, and
   app store download badge. Compact layout — visitors see content quickly.
   ========================================================================== */

.game-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  margin-bottom: 48px;
}

.game-hero__icon {
  width: 80px;
  height: 80px;
  border-radius: 16px;
}

.game-hero__title {
  font-size: var(--text-h1);
  font-weight: 700;
  margin: 0;
}

.game-hero__pitch {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  margin: 0;
}

.game-hero__badge {
  display: inline-block;
  min-height: 48px;
}

.game-hero__badge img {
  width: 160px;
  height: auto;
  display: block;
}

@media (min-width: 768px) {
  .game-hero__icon {
    width: 96px;
    height: 96px;
  }

  .game-hero__badge img {
    width: 180px;
  }
}

/* ==========================================================================
   Section 3: Screenshot Gallery (.screenshot-gallery)
   --------------------------------------------------------------------------
   Horizontal scroll strip with snap points. Scrollbar hidden visually
   but accessible via touch/mouse drag. -webkit-overflow-scrolling for
   smooth momentum scrolling on older iOS devices.
   ========================================================================== */

.screenshot-gallery {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 16px;
  padding: 16px;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 48px;
  scrollbar-width: none;
  cursor: grab;
}

.screenshot-gallery::-webkit-scrollbar {
  display: none;
}

@media (min-width: 768px) {
  .screenshot-gallery {
    scroll-padding-inline: 32px;
    padding-inline: 32px;
  }
}

/* ==========================================================================
   Section 4: Phone Frame (.phone-frame)
   --------------------------------------------------------------------------
   CSS-only phone mockup with rounded corners and correct mobile aspect
   ratio (9:19.5). Border simulates device bezel. Screenshots fill the
   frame via object-fit: cover.
   ========================================================================== */

.phone-frame {
  position: relative;
  border: 3px solid var(--color-surface);
  border-radius: 32px;
  overflow: hidden;
  aspect-ratio: 9 / 19.5;
  max-height: 420px;
  flex: 0 0 auto;
  scroll-snap-align: center;
}

.phone-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 28px;
  display: block;
}

@media (min-width: 768px) {
  .phone-frame {
    max-height: 520px;
  }
}

/* ==========================================================================
   Section 5: Description Section (.game-description)
   --------------------------------------------------------------------------
   Game overview text with heading and body paragraphs. Uses muted text
   color for readability against the dark background.
   ========================================================================== */

.game-description {
  margin-bottom: 48px;
}

.game-description h2 {
  font-size: var(--text-h2);
  margin-top: 0;
  margin-bottom: 16px;
}

.game-description p {
  line-height: 1.6;
  margin-top: 0;
  margin-bottom: 16px;
  color: var(--color-text-muted);
}

/* ==========================================================================
   Section 6: Features Grid (.game-features)
   --------------------------------------------------------------------------
   Single column on mobile, two columns at 640px breakpoint. Uses CSS Grid
   for clean layout. Rendered as a list (<ul>) for semantics — list-style
   and padding reset here.
   ========================================================================== */

.game-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 0;
  list-style: none;
  margin-bottom: 48px;
}

.game-features__item {
  padding: 0;
}

.game-features__item h3 {
  font-size: var(--text-h4);
  margin-top: 0;
  margin-bottom: 8px;
  font-weight: 700;
}

.game-features__item p {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.6;
}

@media (min-width: 640px) {
  .game-features {
    grid-template-columns: 1fr 1fr;
  }
}

/* ==========================================================================
   Section 7: Download CTA (.game-cta)
   --------------------------------------------------------------------------
   Centered download badge at the bottom of the page. Touch target meets
   WCAG 2.2 minimum (44x44px via min-height: 48px). Focus indicator
   uses primary-focus token for keyboard navigation visibility.
   ========================================================================== */

.game-cta {
  text-align: center;
  padding-block: 32px;
}

.game-cta__link {
  display: inline-block;
  min-height: 48px;
}

.game-cta__link img {
  width: 180px;
  height: auto;
  display: block;
}

.game-cta__link:focus-visible {
  outline: 2px solid var(--color-primary-focus);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ==========================================================================
   Section 8: Reduced Motion
   --------------------------------------------------------------------------
   Disables smooth scroll behavior in the gallery when the user prefers
   reduced motion. Respects accessibility preferences per WCAG 2.2.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .screenshot-gallery {
    scroll-behavior: auto;
  }
}