/* ============================================
   SYNTHWAVE TYPER — Generated Art Integration
   Title logo, mascot, ship PNG art, and the
   per-screen photographic background layer.
   Loaded after game/store/badges CSS.
   ============================================ */

/* ══════════════════════════════════════════
   PHOTO BACKGROUND LAYER (body[data-screen])
   Sits at the very back; its own dark overlay
   keeps all UI text readable over the art.
   ══════════════════════════════════════════ */
.bg-art {
  position: fixed;
  inset: 0;
  z-index: var(--z-bg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* Darkening overlay for readability (art = backdrop, not wash-out) */
.bg-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 10, 26, 0.74) 0%,
    rgba(10, 10, 26, 0.56) 45%,
    rgba(10, 10, 26, 0.74) 100%
  );
}

/* ── Horizon backdrop: welcome, menu, store, badges, mastery, leaderboard, settings ── */
body[data-screen="welcome"] .bg-art,
body[data-screen="menu"] .bg-art,
body[data-screen="store"] .bg-art,
body[data-screen="badges"] .bg-art,
body[data-screen="mastery"] .bg-art,
body[data-screen="leaderboard"] .bg-art,
body[data-screen="wf-leaderboard"] .bg-art,
body[data-screen="settings"] .bg-art {
  background-image: url('../assets/img/bg-horizon.png?v=18');
  opacity: 1;
}

/* ── Arena backdrop: race, key-intro, drill ── */
body[data-screen="race"] .bg-art,
body[data-screen="key-intro"] .bg-art,
body[data-screen="drill"] .bg-art {
  background-image: url('../assets/img/bg-arena.png?v=18');
  opacity: 1;
}

/* ── Word Fall backdrop: level bands 1→2→3 ── */
body[data-screen="wordfall"] .bg-art {
  background-image: url('../assets/img/wf-level-1.png?v=18');
  opacity: 1;
}
body[data-screen="wordfall"][data-wf-level="2"] .bg-art {
  background-image: url('../assets/img/wf-level-2.png?v=18');
}
body[data-screen="wordfall"][data-wf-level="3"] .bg-art {
  background-image: url('../assets/img/wf-level-3.png?v=18');
}

/* On art screens the CSS sun/grid/sky/darkness would fight the photo — dim them.
   Keep the animated stars + scanlines on top for life. (results keeps CSS bg.) */
body[data-screen="welcome"] .bg-sky,
body[data-screen="menu"] .bg-sky,
body[data-screen="store"] .bg-sky,
body[data-screen="badges"] .bg-sky,
body[data-screen="mastery"] .bg-sky,
body[data-screen="leaderboard"] .bg-sky,
body[data-screen="wf-leaderboard"] .bg-sky,
body[data-screen="settings"] .bg-sky,
body[data-screen="race"] .bg-sky,
body[data-screen="key-intro"] .bg-sky,
body[data-screen="drill"] .bg-sky,
body[data-screen="wordfall"] .bg-sky,
body[data-screen="welcome"] .bg-grid,
body[data-screen="menu"] .bg-grid,
body[data-screen="store"] .bg-grid,
body[data-screen="badges"] .bg-grid,
body[data-screen="mastery"] .bg-grid,
body[data-screen="leaderboard"] .bg-grid,
body[data-screen="wf-leaderboard"] .bg-grid,
body[data-screen="settings"] .bg-grid,
body[data-screen="race"] .bg-grid,
body[data-screen="key-intro"] .bg-grid,
body[data-screen="drill"] .bg-grid,
body[data-screen="wordfall"] .bg-grid,
body[data-screen="welcome"] .bg-darkness,
body[data-screen="menu"] .bg-darkness,
body[data-screen="store"] .bg-darkness,
body[data-screen="badges"] .bg-darkness,
body[data-screen="mastery"] .bg-darkness,
body[data-screen="leaderboard"] .bg-darkness,
body[data-screen="wf-leaderboard"] .bg-darkness,
body[data-screen="settings"] .bg-darkness,
body[data-screen="race"] .bg-darkness,
body[data-screen="key-intro"] .bg-darkness,
body[data-screen="drill"] .bg-darkness,
body[data-screen="wordfall"] .bg-darkness {
  opacity: 0;
}

body[data-screen="welcome"] .bg-sun,
body[data-screen="menu"] .bg-sun,
body[data-screen="store"] .bg-sun,
body[data-screen="badges"] .bg-sun,
body[data-screen="mastery"] .bg-sun,
body[data-screen="leaderboard"] .bg-sun,
body[data-screen="wf-leaderboard"] .bg-sun,
body[data-screen="settings"] .bg-sun,
body[data-screen="race"] .bg-sun,
body[data-screen="key-intro"] .bg-sun {
  opacity: 0;
}

/* ══════════════════════════════════════════
   TITLE LOGO (menu) — PNG with text fallback
   ══════════════════════════════════════════ */
.game-title-img {
  display: block;
  width: min(560px, 80vw);
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 0 18px var(--neon-pink-glow))
          drop-shadow(0 0 34px rgba(0, 229, 255, 0.35));
  animation: titleSlideIn 1s ease forwards;
}

/* Text fallback: hidden while the image is fine, shown if it 404s */
.game-title-fallback {
  display: none;
}
.game-title-img.img-failed {
  display: none;
}
.game-title-img.img-failed + .game-title-fallback {
  display: block;
}

/* ══════════════════════════════════════════
   MENU MASCOT — decorative, never blocks UI
   ══════════════════════════════════════════ */
.menu-mascot {
  position: absolute;
  left: 4px;
  bottom: 4px;
  width: clamp(78px, 22vw, 128px);
  height: auto;
  z-index: 0;                 /* behind interactive content (z-base:1) */
  pointer-events: none;       /* never intercept taps */
  opacity: 0.92;
  filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.4));
  animation: fadeInUp 0.8s ease 0.4s both;
}

/* ══════════════════════════════════════════
   RESULTS MASCOT — cheer on win, encourage on loss
   ══════════════════════════════════════════ */
.results-mascot {
  width: clamp(84px, 24vw, 132px);
  height: auto;
  margin-bottom: var(--space-sm);
  filter: drop-shadow(0 0 12px rgba(0, 229, 255, 0.45));
  animation: fadeInUp 0.6s ease both;
}
.results-mascot--win {
  animation: mascotBounce 1.4s ease-in-out infinite;
}

@keyframes mascotBounce {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-10px) rotate(2deg); }
}

/* ══════════════════════════════════════════
   SHIP PNG ART — shop preview
   Art replaces the CSS clip-path shape; if the
   img 404s, `.ship-preview--art` is removed and
   the CSS body/trail fallback shows instead.
   ══════════════════════════════════════════ */
/* A store card is a scroll-container (overflow:hidden); once it holds a
   replaced <img>, the grid's auto tracks collapse below the card's content
   height and clip the price. Pinning rows to max-content restores the fit. */
.store-grid {
  grid-auto-rows: max-content;
}

/* In-flow so it defines the preview box height (absolute would collapse the
   flex parent to zero). Fixed dims keep every card's art the same size. */
.ship-preview__art {
  display: block;
  width: 52px;
  height: 30px;
  object-fit: contain;
}

/* When art is present, hide the CSS-shape fallback */
.ship-preview--art .ship-preview__body,
.ship-preview--art .ship-preview__trail {
  display: none;
}
/* When art failed (class removed), the img is gone and the CSS shape shows. */

/* ══════════════════════════════════════════
   RACE LIGHT-CYCLE PNG ART
   Art sits inside the positioned #cycle-* element
   so game-engine's top/left updates still work.
   Rotated so the (right-facing) bike noses up-track.
   ══════════════════════════════════════════ */
.light-cycle__art {
  position: absolute;
  left: 50%;
  top: 50%;
  /* Fixed bike size (independent of the 36×60 lane) so the side-profile
     art keeps its aspect ratio; rotated -90° to nose up-track. It may
     slightly overflow the narrow lane — intended, reads as a real racer. */
  width: 74px;
  max-width: none;
  height: auto;
  transform: translate(-50%, -50%) rotate(-90deg);
  transform-origin: center center;
  pointer-events: none;
}

/* When art is present, hide the CSS-shape body */
.light-cycle--art .light-cycle__body {
  display: none;
}