/* ============================================================
   PixelDev — game.css
   Canvas stage, camera, vignette, world light effects.
   ============================================================ */

#game{
  position:absolute;inset:0;z-index:1;
  display:block;
  width:100%;height:100%;          /* replaced elements need explicit stretch */
  background:#071227;               /* deep water base, drawn over each frame */
  image-rendering:pixelated;
  touch-action:none;                /* page never scrolls from canvas drags */
}

/* soft night vignette above canvas, below UI */
#vig{
  position:absolute;inset:0;z-index:15;pointer-events:none;
  background:
    radial-gradient(125% 95% at 50% 40%, rgba(0,0,0,0) 52%, rgba(3,6,16,.5) 100%),
    linear-gradient(180deg, rgba(4,8,20,.28), rgba(0,0,0,0) 12%, rgba(0,0,0,0) 88%, rgba(4,8,20,.3));
}

/* hotspot container */
#hotspots{position:absolute;inset:0;z-index:20;pointer-events:none}
#hotspots .spot{pointer-events:auto}

/* night tint over the whole scene (very subtle) */
#app::after{
  content:"";position:absolute;inset:0;z-index:10;pointer-events:none;
  background:linear-gradient(180deg, rgba(24,44,120,.10), rgba(8,16,48,.16) 60%, rgba(5,10,28,.22));
  mix-blend-mode:multiply;
}