/*!
 * Peep Runner v2 — game-specific styles, ported from the MASTER game's own
 * inline <style> (digipeeps.com.au wp-game.mjs `css` template string), minus
 * the `.dp` WP-theme scoping (our ids are already page-unique) and minus the
 * email-marketing / manage-emails widget (dropped for v1 — see peep-runner.js).
 * Loads after peep-arcade.css, which supplies the outer .pa-root/.pa-shell/
 * .pa-attract/.pa-hud fullscreen-card shell reused here.
 */

/* The in-game leaderboard was removed (it lives on the home page now), so the
   game is the only thing in the stage — centre it, and let it scroll only if it
   ever exceeds the viewport.
   NOTE: centering #dpgame via flex (align-items/justify-content) here mis-sizes
   it — a real Chromium bug where a flex item's `width: min(1240px, calc(100vw -
   36px))` + `aspect-ratio` shrinks well below its specified size and centers
   off-axis (reproduces in headed Chromium too, not just headless/automation).
   Absolute + translate(-50%,-50%) below sidesteps it and is pixel-exact. */
.pa-stage { overflow-y: auto; }

#dpgame {
  width: min(1240px, calc(100vw - 36px));
  max-width: 1240px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 24px 60px -30px rgba(16, 40, 60, .55);
  border: 1px solid #e8f1f6;
  background: #0b1020;
  aspect-ratio: 900 / 340;
}
#dpgame canvas { display: block; width: 100%; height: 100%; }
#dpgame .gover {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: #fff;
  background: linear-gradient(rgba(11, 16, 32, .32), rgba(11, 16, 32, .68));
  padding: 20px; gap: 11px;
}
#dpgame .gover[hidden] { display: none; }
#dpgame .gover h3 {
  font-family: "Montserrat", sans-serif; font-weight: 900; font-size: 28px; margin: 0;
  color: #fff; text-shadow: 0 2px 16px rgba(0, 0, 0, .7);
}
#dpgame .gover p { margin: 0; max-width: 440px; font-size: 15px; opacity: .92; text-shadow: 0 1px 10px rgba(0, 0, 0, .6); }
#dpgame .gbtn {
  font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 15px;
  padding: 11px 26px; border-radius: 24px; border: none; cursor: pointer;
  background: linear-gradient(120deg, #3ee3b0, #06b6d4 55%, #4d8bd4); color: #fff; margin-top: 4px;
}
#dpgame .gbtn.alt { background: #fff; color: #0e7490; }
#dpgame .ghint { font-size: 12.5px; opacity: .8; }

@media (max-width: 640px) {
  #dpgame .gover h3 { font-size: 22px; }
}