/* Keep the eighth scene's stored key, so an existing selection gets the new wallpaper. */
html[data-theme="night"] body[data-surface="stone"] .desk-surface {
  background: #17130f url("./assets/high-tatras-childhood-room.webp") center / cover;
  filter: brightness(.5) saturate(.65); transform: none;
}
html[data-theme] .swatch-stone { background: #453b2d url("./assets/high-tatras-childhood-room.webp") center / cover; }
.roots-tribute {
  display: none; position: fixed; z-index: 3; left: max(24px, env(safe-area-inset-left));
  bottom: max(18px, env(safe-area-inset-bottom)); margin: 0; pointer-events: none;
  color: #bbb8b1; font: 400 10px/1.6 var(--ui-font); letter-spacing: 0; text-wrap: pretty;
}
html[data-theme="night"] body[data-surface="stone"] .roots-tribute { display: block; }
.roots-tribute small { display: block; color: #96928b; font-size: 9px; }
@media (max-width:700px) {
  .roots-tribute { left: max(12px, env(safe-area-inset-left)); bottom: max(8px, env(safe-area-inset-bottom)); font-size: 9px; }
  .roots-tribute small { font-size: 8px; }
}

/* Crossfade whole scenes, including their dimming wash, below the game UI. */
.wallpaper-stage { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
html[data-theme] .wallpaper-stage .desk-surface { display: block; position: absolute; z-index: 0; }
.wallpaper-wash { position: absolute; inset: 0; z-index: 1; background: var(--ui-wash); }
html[data-theme] body[data-surface="studio"] .wallpaper-wash,
html[data-theme="day"] .wallpaper-wash { background: transparent; }
html[data-theme] body[data-surface] .page-shell::before { background: transparent; }
.wallpaper-outgoing {
  position: absolute; inset: 0; z-index: 2; opacity: 1;
  transition: opacity 1800ms cubic-bezier(.4,0,.2,1);
}
html[data-theme] .roots-tribute { display: block; opacity: 0; transition: opacity 1800ms cubic-bezier(.4,0,.2,1); }
html[data-theme="night"] body[data-surface="stone"] .roots-tribute { opacity: 1; }
.wallpaper-rotation-setting { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; margin-top: 16px; color: var(--ui-ink); font: 450 12px/1.5 var(--ui-font); cursor: pointer; }
.wallpaper-rotation-setting small { display: block; margin-top: 3px; color: var(--ui-muted); font: 400 10px/1.5 var(--ui-font); }
html[data-theme] #wallpaper-rotation-toggle { flex: 0 0 44px; width: 44px; height: 44px; margin: 0; padding: 12px; appearance: none; border: 0; border-radius: 12px; background: var(--ui-raised); cursor: pointer; }
#wallpaper-rotation-toggle::after { content: ""; display: block; width: 20px; height: 20px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--ui-muted); }
#wallpaper-rotation-toggle:checked::after { background: var(--ui-ink); box-shadow: inset 0 0 0 5px var(--ui-raised); }
#wallpaper-rotation-toggle:disabled { opacity: .45; cursor: default; }
@media (prefers-reduced-motion: reduce) {
  .wallpaper-outgoing, html[data-theme] .roots-tribute { transition: none; }
}