/* Daylight is continuously calculated; a devil scene can temporarily own the room. */
/* Typed inherited values let gradients, shadows and opacity interpolate
   together between clock updates, including when switching clock modes. */
@property --daylight { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --day-percent { syntax: '<percentage>'; inherits: true; initial-value: 100%; }
body {
  --daylight: 1;
  --day-percent: 100%;
  transition: --daylight 1.2s linear, --day-percent 1.2s linear;
}
body:not(.is-devil) {
  --wall: color-mix(in oklab, #34354e, #eab98f var(--day-percent));
  --floor: color-mix(in oklab, #7e685f, #f1d3a6 var(--day-percent));
  --floor-edge: color-mix(in oklab, #514552, #c99a68 var(--day-percent));
}
body:not(.is-devil) .backdrop {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='56'%3E%3Cg fill='%23d9996b' fill-opacity='.45'%3E%3Crect x='2' y='2' width='56' height='24' rx='4'/%3E%3Crect x='62' y='2' width='56' height='24' rx='4'/%3E%3Crect x='-28' y='30' width='56' height='24' rx='4'/%3E%3Crect x='92' y='30' width='56' height='24' rx='4'/%3E%3C/g%3E%3Crect x='32' y='30' width='56' height='24' rx='4' fill='%23f3c9a2' fill-opacity='.6'/%3E%3C/svg%3E"),
    linear-gradient(color-mix(in oklab, #242a46, #e2ac83 var(--day-percent)), var(--wall) 65%);
}
body:not(.is-devil) .backdrop::after { background: linear-gradient(var(--floor), color-mix(in oklab, #534a57, #e8c290 var(--day-percent))); }
body:not(.is-devil) .window {
  background: #273752;
  box-shadow: 0 0 90px 40px rgb(255 222 140 / calc(var(--daylight) * .55));
  border-color: color-mix(in oklab, #b3a6a3, #fff2dc var(--day-percent));
}
.window-sky { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(color-mix(in oklab, #182544, #8cd3ec var(--day-percent)), color-mix(in oklab, #575477, #fff1b8 var(--day-percent))); }
.window-bars { position: absolute; inset: 0; background: linear-gradient(90deg, transparent calc(50% - 5px), #fff2dc 0 calc(50% + 5px), transparent 0), linear-gradient(transparent calc(50% - 5px), #fff2dc 0 calc(50% + 5px), transparent 0); }
.sky-sun, .sky-moon { position: absolute; width: 35px; height: 35px; border-radius: 50%; top: 15%; right: 17%; }
.sky-sun { background: #fff8c0; box-shadow: 0 0 25px 12px #ffe79a88; opacity: var(--daylight); }
.sky-moon { background: #f5ecd8; box-shadow: 0 0 15px #dbe7ff77; opacity: calc(1 - var(--daylight)); }
.sky-moon::after { content: ''; position: absolute; width: 28px; height: 28px; border-radius: 50%; background: #2c3453; top: -5px; right: -5px; }
.sky-stars { position: absolute; inset: 0; opacity: calc(1 - var(--daylight)); background: radial-gradient(circle at 12% 15%, #fff7d9 0 1px, transparent 2px), radial-gradient(circle at 70% 44%, #fff7d9 0 1px, transparent 2px), radial-gradient(circle at 35% 37%, #fff7d9 0 2px, transparent 3px), radial-gradient(circle at 22% 76%, #fff7d9 0 1px, transparent 2px), radial-gradient(circle at 86% 83%, #fff7d9 0 2px, transparent 3px); }
body:not(.is-devil) .window::after { opacity: var(--daylight); }
.room-lamp { position: absolute; top: 0; left: 54%; width: 74px; height: 90px; border-left: 4px solid #3c3047; }
.room-lamp::before { content: ''; position: absolute; bottom: -4px; left: -39px; width: 78px; height: 34px; border: 4px solid #3c3047; border-radius: 50% 50% 12% 12%; background: #b16d65; }
.room-lamp i { position: absolute; bottom: -11px; left: -12px; width: 23px; height: 12px; border-radius: 0 0 50% 50%; background: #fff1b5; box-shadow: 0 0 25px 10px rgb(255 203 113 / calc(1 - var(--daylight))); }
.lamplight { position: absolute; inset: 0; pointer-events: none; opacity: calc(1 - var(--daylight)); background: radial-gradient(ellipse at 54% 8%, #ffc87880, #f9b46b20 40%, transparent 70%); }
body.is-devil .lamplight, body.is-devil .room-lamp, body.is-devil .window-sky, body.is-devil .window-bars { visibility: hidden; }
body:not(.is-devil) .fineprint { color: color-mix(in oklab, #fff2da, #514259 var(--day-percent)); }
.lighting-controls { position: relative; z-index: 6; font-size: .85rem; text-align: left; max-width: 100%; color: #2b2340; background: #fffaf3; border: 2px solid #2b2340; border-radius: 14px; box-shadow: 0 3px 0 #2b2340; }
.lighting-controls summary { cursor: pointer; padding: .6rem .8rem; font-weight: 600; }
.lighting-options { display: grid; gap: .55rem; padding: 0 .8rem .8rem; max-width: 320px; }
.lighting-options select, .lighting-options button { font: inherit; width: 100%; padding: .6rem; color: #2b2340; background: #f1eadf; border: 2px solid #52455b; border-radius: 8px; cursor: pointer; }
.lighting-options button[aria-pressed=true] { background: #bdeed6; }
.lighting-options button:disabled { opacity: .5; cursor: default; }
.lighting-options p { margin: 0; line-height: 1.4; }
.lighting-controls :focus-visible { outline: 3px solid #237683; outline-offset: 3px; }
@media (max-width: 820px) {
  body:not(.is-devil) .window { display: block; top: 120px; right: 20px; width: 82px; border-width: 6px; opacity: .8; }
  .window::after { display: none; }
  .window-bars { background: linear-gradient(90deg, transparent calc(50% - 3px), #fff2dc 0 calc(50% + 3px), transparent 0); }
  .sky-sun, .sky-moon { width: 19px; height: 19px; }
  .sky-moon::after { width: 17px; height: 17px; }
  .room-lamp { left: 14%; height: 150px; }
  .lamplight { background: radial-gradient(ellipse at 14% 15%, #ffc87866, transparent 65%); }
}
@media (prefers-reduced-motion: reduce) {
  body { transition: none; }
  .lighting-controls * { scroll-behavior: auto; }
}

body:not(.is-devil) .eyebrow, body:not(.is-devil) .hint { color: color-mix(in oklab, #fff2da, #6d4252 var(--day-percent)); }