/* === CSS Variables (per-game override) === */
.game-cosmic-path {
  --color-primary: #00FFFF;
  --color-secondary: #00FF00;
  --color-bg: #070A13;
  --color-text: #FFFFFF;
  --color-surface: #0E1220;
  --color-surface-hover: #151B2E;
  --color-glow: 0, 255, 255;
  --color-glow-secondary: 0, 255, 0;
}

.game-memo-maze {
  --color-primary: #E8B04A;
  --color-secondary: #C44536;
  --color-bg: #120A04;
  --color-text: #F3E4C4;
  --color-surface: #221409;
  --color-surface-hover: #2D1C11;
  --color-glow: 232, 176, 74;
  --color-glow-secondary: 196, 69, 54;
}

.game-memo-mini {
  --color-primary: #F5A623;
  --color-secondary: #4BACF7;
  /* --color-bg stays a readable dark navy because btn-primary uses it
     as foreground text on the orange CTA — flipping it light breaks
     readability. The actual page background is overridden below as a
     bright sky gradient, matching the in-game sky_background. */
  --color-bg: #0A1B2E;
  --color-text: #F4F8FC;
  --color-surface: #122A45;
  --color-surface-hover: #183555;
  --color-glow: 75, 172, 247;
  --color-glow-secondary: 245, 166, 35;
}

/* Memo Mini's body background = the in-game sky gradient (#88D1FA top
   → #4BACF7 bottom, from src/components/sky_background/sky_background.tscn).
   Dark cards float on the bright sky for a kid-friendly daylight feel. */
body.game-memo-mini {
  background-image: linear-gradient(180deg, #88D1FA 0%, #4BACF7 100%);
  background-attachment: fixed;
  background-color: #88D1FA;
}

/* === Memo Mini: in-game outline / sticker styling ===
   Mirrors the game's typography (white text + dark navy outline used on
   every popup label — see e.g. world_start_popup.tscn HeadingLabel) and
   wraps cards + phone mockups in a chunky white border so they read as
   "stickers" floating on the bright sky bg. */

.game-memo-mini .section-title,
.game-memo-mini .hero-tagline,
.game-memo-mini .download-description,
.game-memo-mini .feature-card h3 {
  color: #fff;
  /* 8-direction text-shadow approximates Godot's font_outline_color +
     outline_size, with a soft drop for extra lift. Navy matches the
     game's outline color exactly: Color(0.157, 0.192, 0.275). */
  text-shadow:
    -2px -2px 0 #283146,
     2px -2px 0 #283146,
    -2px  2px 0 #283146,
     2px  2px 0 #283146,
    -2px  0   0 #283146,
     2px  0   0 #283146,
     0   -2px 0 #283146,
     0    2px 0 #283146,
     0    4px 6px rgba(40, 49, 70, 0.25);
}

.game-memo-mini .feature-card,
.game-memo-mini .store-badge {
  border: 3px solid #fff;
  box-shadow:
    0 4px 0 rgba(40, 49, 70, 0.18),
    0 8px 24px rgba(40, 49, 70, 0.18);
}

.game-memo-mini .phone-mockup {
  border: 4px solid #fff !important;
  box-shadow:
    0 6px 0 rgba(40, 49, 70, 0.18),
    0 12px 32px rgba(40, 49, 70, 0.25) !important;
  /* iPhone screenshots are 1290x2796 (~9/19.5) — match container so
     object-fit: cover doesn't crop the top/bottom of the screen. */
  aspect-ratio: 1290 / 2796;
}

/* === Reset & Base === */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

/* === Section common === */
.section-title {
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 2.5rem;
  letter-spacing: -0.02em;
  color: var(--color-primary);
}

/* === Phone Mockup === */
.phone-mockup {
  position: relative;
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-radius: 2rem;
  overflow: hidden;
  box-shadow:
    0 0 30px rgba(var(--color-glow), 0.08),
    0 20px 60px rgba(0, 0, 0, 0.4);
  background: #000;
  /* Matches modern iPhone screenshots (1179x2556, 1290x2796) so
     object-fit: cover doesn't crop the top/bottom of the screen. */
  aspect-ratio: 9 / 19.5;
}

.phone-mockup img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* === Hero === */
.hero {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background:
    radial-gradient(ellipse at 60% 40%,
      rgba(var(--color-glow), 0.08) 0%,
      rgba(var(--color-glow), 0.05) 20%,
      rgba(var(--color-glow), 0.025) 40%,
      transparent 65%),
    radial-gradient(ellipse at 30% 70%,
      rgba(var(--color-glow-secondary), 0.05) 0%,
      rgba(var(--color-glow-secondary), 0.025) 25%,
      transparent 55%);
  pointer-events: none;
  will-change: opacity;
  transform: translateZ(0);
}

.hero-content {
  max-width: 1100px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  position: relative;
  z-index: 1;
}

.hero-content--centered {
  text-align: center;
}

.hero-logo {
  max-width: 500px;
  width: 80%;
  margin-bottom: 1.5rem;
  filter: drop-shadow(0 0 36px rgba(var(--color-glow), 0.4));
  will-change: opacity, transform;
  transform: translateZ(0);
}

.hero-tagline {
  font-size: 1.35rem;
  color: rgba(255, 255, 255, 0.78);
  max-width: 520px;
  margin: 0 auto 2rem;
  line-height: 1.45;
}

/* === Per-game display faces ===
   Audit ID'd "Space Grotesk doing every job on this site" as the single
   highest-ROI generic-tell. Each game now gets a distinct display face
   for big-type surfaces (hero tagline, section titles, feature card
   headings, in-game-themed doc titles) while body copy keeps Space Grotesk
   so read consistency survives.

   - Cosmic Path → Orbitron (geometric sci-fi)
   - Memo Maze   → Cinzel (Roman serif, fits dungeon torchlit theme)
   - Memo Mini   → Fredoka (rounded, kid-friendly) */
.game-cosmic-path .hero-tagline,
.game-cosmic-path .section-title,
.game-cosmic-path .feature-card h3,
.game-cosmic-path .hero-coming-soon {
  font-family: 'Orbitron', 'Space Grotesk', sans-serif;
  letter-spacing: 0.04em;
}

.game-memo-maze .hero-tagline,
.game-memo-maze .section-title,
.game-memo-maze .feature-card h3,
.game-memo-maze .hero-coming-soon {
  font-family: 'Cinzel', 'Space Grotesk', serif;
  letter-spacing: 0.02em;
}

.game-memo-mini .hero-tagline,
.game-memo-mini .section-title,
.game-memo-mini .feature-card h3,
.game-memo-mini .doc-title,
.game-memo-mini .hero-coming-soon {
  font-family: 'Fredoka', 'Space Grotesk', sans-serif;
  letter-spacing: -0.01em;
}

.btn {
  display: inline-block;
  padding: 0.85rem 2.2rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
  border: none;
  font-family: inherit;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-bg);
  box-shadow: 0 0 20px rgba(var(--color-glow), 0.3);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 30px rgba(var(--color-glow), 0.5);
}

/* Coming-soon hero pill (replaces hero CTA before launch) */
.hero-coming-soon {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.6rem;
  border-radius: 999px;
  border: 1px dashed rgba(var(--color-glow), 0.5);
  background: rgba(var(--color-glow), 0.06);
  color: var(--color-primary);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hero-coming-soon::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 8px rgba(var(--color-glow), 0.7);
  animation: comingSoonPulse 2s ease-in-out infinite;
}

@keyframes comingSoonPulse {
  0%, 100% { opacity: 0.5; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.1); }
}


/* === Screenshots Carousel === */
.screenshots {
  padding: 5rem 1.5rem;
}

.carousel-wrapper {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

.carousel-track {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-y: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 1rem 0.5rem 2rem;
  touch-action: pan-x pan-y;
}

.carousel-track::-webkit-scrollbar {
  display: none;
}

.carousel-item {
  flex: 0 0 180px;
  scroll-snap-align: center;
}

.carousel-arrow {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.15);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 2;
  transition: background 0.2s, border-color 0.2s, opacity 0.2s;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.carousel-arrow.disabled {
  opacity: 0.25;
  pointer-events: none;
  cursor: default;
}

.carousel-arrow:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* Mobile dot indicator — sub-768px users have no arrows, so without
   dots they can't tell how many screenshots there are or where they
   are in the set. JS builds one button per carousel-item and toggles
   .active based on which item is most-centered in the track. */
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin: 0.5rem auto 0;
  padding: 0;
}

.carousel-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.carousel-dot.active {
  background: var(--color-primary);
  transform: scale(1.25);
}

.carousel-dot:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.game-memo-mini .carousel-dot {
  background: rgba(40, 49, 70, 0.25);
}

.game-memo-mini .carousel-dot.active {
  background: #2A78B8;
}

/* Image fallback for broken screenshot paths — when JS catches an
   onerror, it sets data-fallback on the phone-mockup and the alt
   text surfaces in the dark frame instead of an empty box. */
.phone-mockup[data-fallback]::after {
  content: attr(data-fallback);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  text-align: center;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.45);
  font-style: italic;
}

.carousel-arrow:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-primary);
}

.carousel-arrow--left {
  left: -24px;
}

.carousel-arrow--right {
  right: -24px;
}

/* === Features === */
.features {
  padding: 5rem 1.5rem;
}

.features-grid {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.feature-card {
  background: var(--color-surface);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 1rem;
  padding: 1.75rem;
  transition: transform 0.2s, border-color 0.2s;
}

.feature-card:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--color-glow), 0.2);
}

.feature-icon {
  font-size: 1.75rem;
  margin-bottom: 0.75rem;
}

.feature-card h3 {
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--color-primary);
}

.feature-card p {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.5;
}

/* === Download / CTA === */
.download {
  padding: 5rem 1.5rem;
  text-align: center;
}

.download-description {
  color: rgba(255, 255, 255, 0.65);
  max-width: 440px;
  margin: -1rem auto 2.5rem;
  font-size: 1.05rem;
}

.store-badges {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.store-badge {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--color-surface);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  padding: 0.85rem 1.5rem;
  min-width: 220px;
  color: var(--color-text);
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s, transform 0.2s, box-shadow 0.2s;
}

/* Live (anchored) store-badge — hover lifts + glows in game's accent.
   Plain divs without href stay flat as "Coming Soon" placeholders. */
a.store-badge:hover {
  border-color: var(--color-primary);
  background: var(--color-surface-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(var(--color-glow), 0.22);
}

a.store-badge:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* coming-soon opacity handled by .store-badge.coming-soon.visible */

.store-badge-label {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.5);
}

.store-badge-store {
  display: block;
  font-size: 1.05rem;
  font-weight: 600;
}

/* === Footer === */
.footer {
  padding: 2.5rem 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-content {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.4);
}

.footer-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
}

.footer-name {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
}

.footer-back {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.85rem;
  margin-right: auto;
  transition: color 0.2s;
}

.footer-back:hover {
  color: var(--color-primary);
}

/* === Index page — games grid === */
.index-body {
  --color-primary: #E6E6FA;
  --color-text: #FFFFFF;
  --color-bg: #0B0B18;
  --color-surface: #141428;
  --color-surface-hover: #1C1C36;
  --color-glow: 230, 230, 250;
  --color-glow-secondary: 230, 230, 250;
}

.index-hero {
  padding: 5rem 1.5rem 2rem;
  text-align: center;
}

.index-title {
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.index-subtitle {
  margin-top: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
  font-size: 1.05rem;
}

.games-root {
  max-width: 1000px;
  margin: 2rem auto 5rem;
  padding: 0 1.5rem;
}

.games-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.games-error {
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  padding: 2rem;
}


.game-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: var(--color-surface);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 1.25rem;
  padding: 1.5rem;
  overflow: hidden;
  transition: transform 0.2s, border-color 0.2s, background 0.2s, box-shadow 0.3s;
  color: var(--color-text);
}

.game-card:hover {
  transform: translateY(-3px);
  background: var(--color-surface-hover);
  border-color: rgba(255, 255, 255, 0.14);
}

/* Per-game accent on landing cards — pulls each game's hero color
   through as a left-edge strip + matching icon glow + hover tint so
   the three cards read as distinct products rather than three rows
   in a list. */
.game-card[data-game="cosmic-path"] {
  --card-accent: #22D3EE;
  --card-glow: 34, 211, 238;
}
.game-card[data-game="memo-maze"] {
  --card-accent: #E8B04A;
  --card-glow: 232, 176, 74;
}
.game-card[data-game="memo-mini"] {
  --card-accent: #F5A623;
  --card-glow: 245, 166, 35;
}

.game-card[data-game]::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--card-accent);
  opacity: 0.85;
}

.game-card[data-game] .game-card-icon {
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(var(--card-glow), 0.25),
    0 0 24px rgba(var(--card-glow), 0.18);
}

.game-card[data-game]:hover {
  border-color: rgba(var(--card-glow), 0.35);
  box-shadow: 0 12px 32px rgba(var(--card-glow), 0.12);
}

.game-card[data-game]:hover::before {
  opacity: 1;
  width: 5px;
}

.game-card[data-game]:focus-visible {
  outline: 2px solid var(--card-accent);
  outline-offset: 4px;
}

.game-card-icon {
  width: 84px;
  height: 84px;
  border-radius: 18px;
  flex-shrink: 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.game-card-body {
  flex: 1;
  min-width: 0;
}

.game-card-name {
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
  color: #FFFFFF;
}

.game-card-tagline {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.4;
}

.game-card-badge {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.65);
}

/* Live (shipped) badge — tinted in the game's accent so live games
   read as different from in-development cards at a glance. */
.game-card[data-game] .game-card-badge--live {
  background: rgba(var(--card-glow), 0.15);
  color: var(--card-accent);
  font-weight: 600;
}

@media (min-width: 768px) {
  .index-title { font-size: 3rem; }
  .games-grid { grid-template-columns: repeat(2, 1fr); }
}

/* === Cross-page View Transitions (shared game icons) === */
@view-transition {
  navigation: auto;
}

/* Assign unique transition names to matching elements on both pages */
.vt-cosmic-path { view-transition-name: vt-icon-cosmic-path; }
.vt-memo-maze   { view-transition-name: vt-icon-memo-maze; }
.vt-memo-mini   { view-transition-name: vt-icon-memo-mini; }

/* Slow the morph a touch so the shrink is visible */
::view-transition-group(vt-icon-cosmic-path),
::view-transition-group(vt-icon-memo-maze),
::view-transition-group(vt-icon-memo-mini) {
  animation-duration: 0.55s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Keep the non-matching page content from flashing too hard */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.35s;
}

/* === Top Game Nav (on each game page) === */
.game-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.25rem;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent);
  pointer-events: none;
}

.game-nav > * { pointer-events: auto; }

.game-nav-back {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  font-size: 1.4rem;
  line-height: 1;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

.game-nav-back:hover {
  background: rgba(0, 0, 0, 0.7);
  border-color: var(--color-primary);
  transform: translateX(-2px);
}

.game-nav-icons {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

.game-nav-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 2px solid transparent;
  opacity: 0.55;
  transition: opacity 0.2s, transform 0.2s, border-color 0.2s, box-shadow 0.2s;
  display: block;
}

.game-nav-icon:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.game-nav-icon.active {
  opacity: 1;
  border-color: var(--color-primary);
  box-shadow: 0 0 20px rgba(var(--color-glow), 0.45);
}

/* === Keyframe Animations === */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes glowPulse {
  0%, 100% { filter: drop-shadow(0 0 30px rgba(var(--color-glow), 0.35)); }
  50% { filter: drop-shadow(0 0 50px rgba(var(--color-glow), 0.55)); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}

/* === Hero Entrance Animations === */
.hero-logo {
  animation: fadeInScale 1s ease-out 0.2s both;
}

.hero-tagline {
  animation: fadeInUp 0.8s ease-out 0.7s both;
}

.hero-cta {
  animation: fadeInUp 0.7s ease-out 0.5s both;
}

/* === Scroll Animations === */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered feature cards */
.feature-card:nth-child(1) { transition-delay: 0s; }
.feature-card:nth-child(2) { transition-delay: 0.1s; }
.feature-card:nth-child(3) { transition-delay: 0.2s; }
.feature-card:nth-child(4) { transition-delay: 0.3s; }
.feature-card:nth-child(5) { transition-delay: 0.4s; }
.feature-card:nth-child(6) { transition-delay: 0.5s; }

/* Section titles animate on scroll */
.section-title {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.section-title.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Carousel items stagger in */
.carousel-item {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.carousel-item.visible {
  opacity: 1;
  transform: translateY(0);
}

.carousel-item:nth-child(1) { transition-delay: 0s; }
.carousel-item:nth-child(2) { transition-delay: 0.08s; }
.carousel-item:nth-child(3) { transition-delay: 0.16s; }
.carousel-item:nth-child(4) { transition-delay: 0.24s; }
.carousel-item:nth-child(5) { transition-delay: 0.32s; }
.carousel-item:nth-child(6) { transition-delay: 0.4s; }

/* Store badges animate */
.store-badge {
  opacity: 0;
  transform: translateY(20px);
  transition: border-color 0.2s, opacity 0.5s ease, transform 0.5s ease;
}

.store-badge.visible {
  opacity: 1;
  transform: translateY(0);
}

.store-badge.coming-soon.visible {
  opacity: 0.7;
}

.store-badge:nth-child(1) { transition-delay: 0.1s; }
.store-badge:nth-child(2) { transition-delay: 0.25s; }

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* === Responsive: 480px+ === */
@media (min-width: 480px) {
  .carousel-item {
    flex: 0 0 200px;
  }

  .store-badges {
    flex-direction: row;
    justify-content: center;
  }
}

/* === Responsive: 768px+ === */
@media (min-width: 768px) {
  .section-title {
    font-size: 2.5rem;
  }

  .hero-logo {
    max-width: 560px;
  }

  .hero-tagline {
    font-size: 1.55rem;
  }

  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .carousel-item {
    flex: 0 0 220px;
  }

  .carousel-arrow {
    display: flex;
  }
}

/* === Responsive: 1024px+ === */
@media (min-width: 1024px) {
  .section-title {
    font-size: 2.85rem;
  }

  .hero-logo {
    max-width: 620px;
  }

  .features-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .carousel-item {
    flex: 0 0 240px;
  }
}

/* === Doc pages (privacy, support, etc.) === */
.doc-page {
  padding: 6rem 1.5rem 3rem;
}

.doc-container {
  max-width: 720px;
  margin: 0 auto;
  background: var(--color-surface);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1.25rem;
  padding: 2.25rem 1.75rem;
}

.doc-eyebrow {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 0.5rem;
}

.doc-title {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}

.doc-meta {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 2rem;
}

.doc-container h2 {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 2rem 0 0.6rem;
  color: var(--color-text);
}

.doc-container h2:first-of-type {
  margin-top: 0;
}

.doc-container p,
.doc-container li {
  font-size: 0.98rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
}

.doc-container p + p {
  margin-top: 0.75rem;
}

.doc-container ul {
  margin: 0.5rem 0 0 1.25rem;
  padding: 0;
}

.doc-container li + li {
  margin-top: 0.35rem;
}

.doc-container a {
  color: var(--color-primary);
  border-bottom: 1px solid rgba(var(--color-glow), 0.35);
}

.doc-container a:hover {
  border-bottom-color: var(--color-primary);
}

.doc-summary {
  background: rgba(var(--color-glow), 0.08);
  border: 1px solid rgba(var(--color-glow), 0.2);
  border-radius: 0.75rem;
  padding: 1rem 1.1rem;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.85);
}

.doc-summary strong {
  color: var(--color-primary);
}

/* Theme overrides — memo-mini doc pages match the sticker look */
.game-memo-mini .doc-container {
  background: rgba(255, 255, 255, 0.95);
  border: 3px solid #fff;
  color: #283146;
  box-shadow:
    0 4px 0 rgba(40, 49, 70, 0.18),
    0 8px 24px rgba(40, 49, 70, 0.18);
}

.game-memo-mini .doc-eyebrow,
.game-memo-mini .doc-meta {
  color: rgba(40, 49, 70, 0.55);
}

.game-memo-mini .doc-title {
  color: #283146;
  text-shadow: none;
}

.game-memo-mini .doc-container h2 {
  color: #283146;
}

.game-memo-mini .doc-container p,
.game-memo-mini .doc-container li {
  color: rgba(40, 49, 70, 0.85);
}

.game-memo-mini .doc-container a {
  color: #2A78B8;
  border-bottom-color: rgba(75, 172, 247, 0.4);
}

.game-memo-mini .doc-container a:hover {
  border-bottom-color: #2A78B8;
}

.game-memo-mini .doc-summary {
  background: rgba(75, 172, 247, 0.12);
  border-color: rgba(75, 172, 247, 0.35);
  color: rgba(40, 49, 70, 0.9);
}

.game-memo-mini .doc-summary strong {
  color: #2A78B8;
}

/* Footer personality line — "Made by Karol Kędziora · Built in Godot" etc.
   Audit flagged the footer as the visual equivalent of saying "this site
   is over." This adds a single human-voice line above the link row. */
.footer-meta {
  text-align: center;
  margin-top: 0.6rem;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.42);
  letter-spacing: 0.01em;
}

.game-memo-mini .footer-meta {
  color: rgba(40, 49, 70, 0.55);
}

/* Footer mini-links (privacy, support) */
.footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin-top: 0.5rem;
  font-size: 0.85rem;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.2s;
}

.footer-links a:hover {
  color: var(--color-primary);
}

.game-memo-mini .footer-links a {
  color: rgba(40, 49, 70, 0.6);
}

.game-memo-mini .footer-links a:hover {
  color: #283146;
}

/* Support page — game contact cards */
.support-games {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  margin-top: 0.75rem;
}

.support-game {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.75rem;
  transition: border-color 0.2s, background 0.2s;
  color: inherit;
}

.support-game:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.18);
}

.support-game:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.support-game img {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  flex-shrink: 0;
}

.support-game-name {
  font-weight: 600;
  color: #fff;
}

.support-game-tagline {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 0.1rem;
}

/* Language toggle (bilingual doc pages) */
.doc-lang-toggle {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  max-width: 720px;
  margin: 0 auto 1.25rem;
}

.doc-lang-toggle a {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.7);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.doc-lang-toggle a:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.game-memo-mini .doc-lang-toggle a {
  background: rgba(255, 255, 255, 0.85);
  border: 2px solid #fff;
  color: #283146;
  box-shadow: 0 2px 0 rgba(40, 49, 70, 0.12);
}

.game-memo-mini .doc-lang-toggle a:hover {
  background: #fff;
  color: #2A78B8;
}

/* Stacked doc-containers (e.g. EN + PL on one page) */
.doc-container + .doc-container {
  margin-top: 1.5rem;
}

.doc-container code {
  background: rgba(255, 255, 255, 0.08);
  padding: 0.1em 0.4em;
  border-radius: 4px;
  font-size: 0.92em;
}

.game-memo-mini .doc-container code {
  background: rgba(40, 49, 70, 0.08);
  color: #283146;
}

@media (min-width: 600px) {
  .doc-container {
    padding: 2.75rem 2.25rem;
  }
  .doc-title {
    font-size: 2rem;
  }
}

/* === Image lightbox (click a screenshot to enlarge) === */
.phone-mockup img {
  cursor: zoom-in;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(5, 8, 16, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.lightbox--open {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-image {
  max-width: min(420px, 92vw);
  max-height: 90vh;
  width: auto;
  height: auto;
  border-radius: 1.5rem;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  transform: scale(0.96);
  transition: transform 0.25s ease;
  display: block;
}

.lightbox--open .lightbox-image {
  transform: scale(1);
}

.lightbox-close,
.lightbox-nav {
  position: absolute;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  line-height: 1;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

.lightbox-close {
  top: 1rem;
  right: 1rem;
  width: 44px;
  height: 44px;
  font-size: 1.6rem;
  padding-bottom: 2px;
}

.lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  font-size: 1.75rem;
}

.lightbox-nav--prev { left: 1rem; }
.lightbox-nav--next { right: 1rem; }

.lightbox-close:hover,
.lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.4);
}

.lightbox-nav:hover {
  transform: translateY(-50%) scale(1.06);
}

.lightbox-close:focus-visible,
.lightbox-nav:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

@media (max-width: 600px) {
  .lightbox-nav {
    width: 40px;
    height: 40px;
    font-size: 1.4rem;
  }
  .lightbox-nav--prev { left: 0.5rem; }
  .lightbox-nav--next { right: 0.5rem; }
  .lightbox-close {
    top: 0.75rem;
    right: 0.75rem;
    width: 40px;
    height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox,
  .lightbox-image {
    transition: none;
  }
}

/* ============================================================
   Per-game signature visuals — the audit's "one borrowed visual
   primitive per game" recommendation. Memo Mini already had its
   sticker treatment. Cosmic Path and Memo Maze now each get one
   distinctive element so the three games stop reading as
   color-swaps of the same template.
   ============================================================ */

/* === Cosmic Path: comet trace around feature cards ===
   When a feature card scrolls into view, a glowing dot orbits its
   rounded-rectangle border once. The card's own ::after is the
   comet head; CSS Motion Path (offset-path) drives the orbit.
   Browsers without offset-path degrade silently — no dot drawn. */
.game-cosmic-path .feature-card {
  position: relative;
  overflow: visible;
}

.game-cosmic-path .feature-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: rgba(var(--color-glow), 1);
  box-shadow:
    0 0 8px 2px rgba(var(--color-glow), 0.9),
    0 0 24px 6px rgba(var(--color-glow), 0.45);
  offset-path: rect(0 100% 100% 0 round 1rem);
  offset-distance: 0%;
  opacity: 0;
  pointer-events: none;
}

.game-cosmic-path .feature-card.visible::after {
  animation: cosmicCometTrace 2.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Stagger durations so the six cards orbit at slightly different
   speeds — same trick real-world comets pull and the eye reads as
   "not just six synced loops". */
.game-cosmic-path .feature-card:nth-child(2).visible::after { animation-duration: 2.7s; }
.game-cosmic-path .feature-card:nth-child(3).visible::after { animation-duration: 2.1s; }
.game-cosmic-path .feature-card:nth-child(4).visible::after { animation-duration: 2.5s; }
.game-cosmic-path .feature-card:nth-child(5).visible::after { animation-duration: 2.3s; }
.game-cosmic-path .feature-card:nth-child(6).visible::after { animation-duration: 2.85s; }

@keyframes cosmicCometTrace {
  0%   { opacity: 0; offset-distance: 0%; }
  6%   { opacity: 1; }
  94%  { opacity: 1; }
  100% { opacity: 0; offset-distance: 100%; }
}

/* === Memo Maze: torchlit stone-tile feature cards ===
   Each card is one chiseled stone. Asymmetric border-radius per
   card so the six "stones" don't look stamped from one mould, an
   SVG noise overlay gives a faint rock-grain, and an inset
   warm-light shadow flickers like the in-game torchlit dungeon. */
.game-memo-maze .feature-card {
  position: relative;
  border-radius: 1.4rem 0.55rem 1.4rem 0.55rem;
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(var(--color-glow), 0.08), transparent 65%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.42  0 0 0 0 0.25  0 0 0 0.08 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  box-shadow:
    inset 0 -22px 40px rgba(0, 0, 0, 0.35),
    inset 0 8px 24px rgba(var(--color-glow), 0.08);
  animation: torchFlicker 5.2s ease-in-out infinite;
}

.game-memo-maze .feature-card:nth-child(1) { border-radius: 1.4rem 0.5rem 1.4rem 0.5rem; animation-delay: 0s; }
.game-memo-maze .feature-card:nth-child(2) { border-radius: 0.5rem 1.4rem 0.5rem 1.4rem; animation-delay: 0.9s; }
.game-memo-maze .feature-card:nth-child(3) { border-radius: 1.4rem 1.4rem 0.4rem 1.4rem; animation-delay: 1.7s; }
.game-memo-maze .feature-card:nth-child(4) { border-radius: 1.4rem 0.4rem 1.4rem 1.4rem; animation-delay: 2.4s; }
.game-memo-maze .feature-card:nth-child(5) { border-radius: 1.5rem 1.5rem 1.5rem 0.4rem; animation-delay: 3.1s; }
.game-memo-maze .feature-card:nth-child(6) { border-radius: 0.4rem 1.5rem 1.5rem 1.5rem; animation-delay: 3.8s; }

@keyframes torchFlicker {
  0%, 100% {
    box-shadow:
      inset 0 -22px 40px rgba(0, 0, 0, 0.35),
      inset 0 8px 24px rgba(var(--color-glow), 0.08);
  }
  22% {
    box-shadow:
      inset 0 -22px 40px rgba(0, 0, 0, 0.40),
      inset 0 8px 30px rgba(var(--color-glow), 0.13);
  }
  35% {
    box-shadow:
      inset 0 -22px 40px rgba(0, 0, 0, 0.32),
      inset 0 8px 20px rgba(var(--color-glow), 0.06);
  }
  58% {
    box-shadow:
      inset 0 -22px 40px rgba(0, 0, 0, 0.36),
      inset 0 8px 22px rgba(var(--color-glow), 0.09);
  }
  74% {
    box-shadow:
      inset 0 -22px 40px rgba(0, 0, 0, 0.42),
      inset 0 8px 32px rgba(var(--color-glow), 0.14);
  }
}

/* Respect reduced-motion: pause flicker, suppress comet trace. */
@media (prefers-reduced-motion: reduce) {
  .game-memo-maze .feature-card {
    animation: none;
  }
  .game-cosmic-path .feature-card.visible::after {
    animation: none;
    opacity: 0;
  }
}