/* One transparent canvas above the static artwork, below both shade layers. */
#weather{overflow:hidden;pointer-events:none}
.background-effects{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* Desktop keeps the readable room; portrait uses its own scene, not a left crop. */
#background-shade{background:linear-gradient(180deg,#00000005 0%,#06050714 48%,#08060847 100%)}
/* Additional desktop-only black layer; keep the accepted gradient and UI separate. */
#background-dim{background:#000;opacity:var(--background-dim-opacity,.20)}
@media(max-width:1000px) and (orientation:portrait){
  #background-art{background-image:url('../assets/castle-mobile.webp?v=2026.10.31.3')}
  #background-shade{background:linear-gradient(180deg,#03050708 0%,#03050714 var(--board-top,40vh),#08060966 76%,#0605078c 100%)}
  #background-dim{display:none}
}
/* Winter is a separate artwork set; summer sources and responsive rules stay intact. */
:root[data-season='winter'] #background-art{background-image:url('../assets/winter/castle-room.png?v=2026.10.31.3')}
:root[data-season='winter'] #main-screen .main-menu-background{background-image:url('../assets/winter/main-menu-desktop.png?v=2026.10.31.3')}
:root[data-season='winter'] #main-screen[data-menu-layout='portrait'] .main-menu-background{background-image:url('../assets/winter/main-menu-mobile.png?v=2026.10.31.3')}
@media (min-width:1001px) and (min-aspect-ratio:11/5){
  :root[data-season='winter'] #main-screen:not([data-menu-layout='portrait']) .main-menu-background{background-image:url('../assets/winter/main-menu-ultrawide.png?v=2026.10.31.3')}
}
@media(max-width:1000px) and (orientation:portrait){
  :root[data-season='winter'] #background-art{background-image:url('../assets/winter/castle-mobile.png?v=2026.10.31.3')}
}