/* DAY-TO-NIGHT LIGHT — the graded copies of the picture (js/daycycle.js).
   A layer has exactly the engine picture's box and cover crop: #panel is the box (position:absolute; inset:0), and the position
   below is the one play-stage.css gives `#panel > img` (50% 38%, centred when the screen is wider than the plate).
   It sits in DOM order right after the engine's <img>, so everything the engine or play-stage.js appends later (zone canvas,
   weather, hotspot layer, ripples, faces) paints above it, and the card / header / sheets (position:fixed, z-index 7+) too.
   pointer-events:none: a tap, hover or ripple goes to the engine picture and the hotspot map exactly as before. */
#panel > .dc-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;
  background-repeat:no-repeat;background-size:cover;background-position:50% 38%;image-rendering:pixelated;
  -webkit-user-select:none;user-select:none}
@media (min-aspect-ratio:1023/576){ #panel > .dc-layer{background-position:50% 50%} }
body.fit-whole #panel > .dc-layer{background-size:contain;background-position:50% 50%;background-color:transparent}
/* the layers of a picture that is leaving fade with the engine's own outgoing <img> (style.css panelOut .32s) */
@keyframes dcOut{to{opacity:0}}
#panel > .dc-layer.dc-out{animation:dcOut .32s ease-in both}
@media (prefers-reduced-motion:reduce){ #panel > .dc-layer.dc-out{display:none} }
/* twin: in-game motion switch */ html body.ps-still #panel > .dc-layer.dc-out{display:none}
/* until the act's track has arrived the first picture waits, so the first paint is already graded (js/daycycle.js, at most 1.5 s) */
body.dc-wait #panel > img{visibility:hidden}