/* One grade covers the whole illustrated room, regardless of renderer. */
html[data-time="night"] { --room-grade: brightness(.82) saturate(.82) sepia(.02) hue-rotate(5deg); --room-vignette: 1; }
html[data-time="morning"] { --room-grade: brightness(1.1) saturate(.88) sepia(.09) hue-rotate(-5deg); --room-vignette: .58; }
html[data-time="day"] { --room-grade: brightness(1.22) saturate(.88) sepia(0) hue-rotate(6deg); --room-vignette: .38; }
html[data-time="sunset"] { --room-grade: brightness(1.03) saturate(1.08) sepia(.1) hue-rotate(-7deg); --room-vignette: .76; }
.room-layers, .pixi-room-mount canvas { filter: var(--room-grade); transition: filter 1.1s ease; }
html[data-time] .room-layers :is(.room-art, .character-head, .character-hand, .cat-breath) { filter: none; }
html[data-time] #room::after { opacity: var(--room-vignette); transition: opacity 1.1s ease; }
html[data-time="morning"] .window-light { background: linear-gradient(#f5dba4, #fff2c96b); opacity: .28; mix-blend-mode: screen; }
html[data-time="day"] .window-light { background: linear-gradient(#8bc7e8, #b5d7e6); opacity: .46; mix-blend-mode: normal; }
html[data-time="sunset"] .window-light { background: linear-gradient(#efa36f, #f9ca8f75); opacity: .24; mix-blend-mode: screen; }
html[data-time="night"] .window-light { background: linear-gradient(#17244f, #1c305e); opacity: .48; mix-blend-mode: multiply; }
@media (prefers-reduced-motion: reduce) {
  .room-layers, .pixi-room-mount canvas, html[data-time] #room::after { transition: none; }
}