/*!
 * Peep Invaders — game-specific styles. peep-arcade.css supplies the shared
 * .pa-root/.pa-shell/.pa-attract/.pa-stage/.pa-hud/.pa-gameover shell; this
 * file only overrides what's specific to this game: the attract card's
 * dark-space backdrop (so the card previews THIS game, not Peep Runner's
 * meadow), and the canvas fill inside #pigame.
 */

/* attract card: dark space + a scattered starfield instead of Peep Runner's
   scene0 meadow — "the marketing ghouls" are coming from the void. */
[data-peep-arcade="invaders"] .pa-shell {
  background:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1.5px 1.5px at 78% 14%, rgba(255,255,255,.75), transparent 60%),
    radial-gradient(1px 1px at 34% 66%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 58% 48%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(1px 1px at 88% 72%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1px 1px at 20% 84%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 66% 88%, rgba(255,255,255,.7), transparent 60%),
    linear-gradient(180deg, #0a0e22 0%, #171236 60%, #201a44 100%);
}

#pigame { position: absolute; inset: 0; }
#pigame .pa-canvas { width: 100%; height: 100%; }

/* homepage "Peep Arcade" row — three cards side by side, each free of the
   single-game .pa-root's centered max-width so they can share a row. */
.pa-arcade-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
  align-items: start;
}
.pa-arcade-row .pa-root { margin: 0; max-width: none; }
/* :not(.pa-is-fullscreen) both raises specificity above the base .pa-shell
   rule AND makes this simply not match once a card goes fullscreen — so it
   never fights peep-arcade.css's own .pa-shell.pa-is-fullscreen rule,
   regardless of stylesheet load order (each card's include re-loads
   peep-arcade.css, so relying on source order alone would be fragile). */
/* taller than wide — a 3-up row squeezes each card to ~1/3 width, and the
   attract copy (title + 2-3 line blurb + button + instructions + best-score)
   needs more height per pixel of width than the single, full-width Peep
   Runner card does at 960/440. */
/* All three arcade cards share ONE attract ratio so they're the same height
   in the row — equal cabinets. Peep Runner's card used to carry an extra
   in-card Top-10 (needing 3/4.7); that panel now lives in the shared
   scoreboard below the row (peep-arcade.css .pa-scoreboard), so all three
   cards hold the same content (title + blurb + Play + instructions + Best
   chip) and can share this shorter ratio. */
.pa-arcade-row .pa-shell:not(.pa-is-fullscreen) { aspect-ratio: 3 / 3.7; }