/*!
 * PacPeep — game-specific styles. peep-arcade.css supplies the shared
 * .pa-root/.pa-shell/.pa-attract/.pa-stage/.pa-hud/.pa-peep-layer/.pa-peep/
 * .pa-gameover shell; this file overrides the attract backdrop (a maze
 * preview instead of Peep Runner's meadow) and adds the scared-ghost tint
 * + toast styles specific to this game.
 */

/* attract card: a dark maze-blue grid instead of scene0's meadow. */
[data-peep-arcade="pacpeep"] .pa-shell {
  background:
    repeating-linear-gradient(90deg, rgba(124,155,255,.16) 0 3px, transparent 3px 40px),
    repeating-linear-gradient(0deg, rgba(124,155,255,.16) 0 3px, transparent 3px 40px),
    linear-gradient(160deg, #0c1330 0%, #171d45 55%, #241a4a 100%);
}

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

/* the DOM/SVG actor layer sits above the canvas, transformed together for
   the trauma-shake so the peep + ghosts shake in lock-step with the maze. */
#ppgame .pa-peep-layer { transition: none; }
.pp-ghost { filter: none; transition: filter .12s ease; }
.pp-ghost.pp-scared { filter: hue-rotate(150deg) saturate(2.1) brightness(1.35); }
.pp-ghost.pp-scared-warn { filter: hue-rotate(150deg) saturate(2.1) brightness(1.9) drop-shadow(0 0 6px #fff); }

.pa-toast {
  position: absolute; top: 46%; left: 50%; transform: translate(-50%, -50%);
  background: rgba(8, 20, 30, .78); color: #fff;
  font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 16px;
  padding: 10px 20px; border-radius: 999px; pointer-events: none; text-align: center;
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.6);
}
.pa-toast[hidden] { display: none; }