/* Original panorama layers arranged around a mirrored horizon, as in the game. */
body,body[data-theme="death-egg"]{background:#020818}
body:before,body:after{display:none}
#course-background{--horizon:56vh;position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;contain:strict;background:#020818}
.background-scene{position:absolute;inset:0;opacity:0;visibility:hidden;background:var(--bg-color);transition:opacity 2.5s cubic-bezier(.22,.61,.36,1);overflow:hidden}
.background-scene.is-active,.background-scene.is-leaving{visibility:visible}
.background-scene.is-active{opacity:1}
.background-world{position:absolute;left:0;top:0;width:100%;height:var(--horizon);overflow:hidden}
.background-sky{position:absolute;left:0;top:0;height:100%;width:calc(100% + 56vh * var(--bg-sky-ratio));background-image:var(--bg-sky);background-repeat:repeat-x;background-size:auto 100%;background-position:var(--bg-phase) 0;filter:var(--bg-sky-filter);animation:sky-pan var(--bg-speed) linear infinite}
.background-land{position:absolute;left:0;bottom:0;height:var(--bg-land-height);width:calc(100% + 1400px);background:var(--bg-land) var(--bg-phase) bottom/1400px 100% repeat-x;filter:var(--bg-land-filter);animation:land-pan var(--bg-land-speed) linear infinite}
.background-foreground{position:absolute;left:-2vw;bottom:0;height:min(39vh,300px);width:var(--bg-foreground-size);background:var(--bg-foreground) left bottom/contain no-repeat;filter:var(--bg-land-filter);animation:foreground-drift 40s ease-in-out infinite alternate;transform-origin:bottom left}
.background-floor{position:absolute;inset:var(--horizon) 0 0;background:linear-gradient(var(--bg-color),#020819 70%,#01040d)}
.background-reflection{position:absolute;left:0;top:var(--horizon);width:100%;height:var(--horizon);overflow:hidden;opacity:.62;mask-image:linear-gradient(#000, #000b 20%,transparent 72%)}
.background-reflection .background-world{transform:scaleY(-1);filter:brightness(.72) saturate(.85)}
/* The existing original wavy checker texture becomes a neutral, translucent sky overlay. */
.background-checkers{position:absolute;left:0;top:-4vh;width:calc(100% + 1400px);height:100%;background:url('assets/backgrounds/menu-checkers.webp?v=2') 0 bottom/600px 600px repeat-x;opacity:.52;transform:scaleY(-1);mask-image:linear-gradient(transparent 0%,#0004 42%,#000);animation:checker-pan 180s linear infinite}
.background-haze{position:absolute;left:0;right:0;top:calc(var(--horizon) - 2px);height:28px;background:linear-gradient(#84d9ff1c,transparent);opacity:.5}
.background-scene[data-glow="true"] .background-haze{background:linear-gradient(#ef571540,transparent);animation:lava-glow 8s ease-in-out infinite alternate}
.background-scene :is(.background-sky,.background-land,.background-foreground,.background-checkers,.background-haze){animation-play-state:paused}
.background-scene.is-active :is(.background-sky,.background-land,.background-foreground,.background-checkers,.background-haze),.background-scene.is-leaving :is(.background-sky,.background-land,.background-foreground,.background-checkers,.background-haze){animation-play-state:running}
#course-background.motion-paused .background-scene *{animation-play-state:paused!important}
@keyframes sky-pan{from{transform:translateX(0)}to{transform:translateX(calc(-56vh * var(--bg-sky-ratio)))}}
@keyframes land-pan{from{transform:translateX(0)}to{transform:translateX(-1400px)}}
@keyframes checker-pan{from{transform:scaleY(-1) translateX(0)}to{transform:scaleY(-1) translateX(-600px)}}
@keyframes foreground-drift{from{transform:translateX(0)}to{transform:translateX(35px)}}
@keyframes lava-glow{from{opacity:.3}to{opacity:.7}}
@media(max-width:580px){.background-foreground{width:78vw;height:29vh;left:-12vw}.background-land{height:calc(var(--bg-land-height)*.7)}}
@media(prefers-reduced-motion:reduce){.background-scene{transition:none}#course-background:not(.motion-enabled) .background-scene *{animation-play-state:paused!important}}
.background-checkers.flag-ready{background-image:none;animation:none!important}
.flag-surface{display:block;width:100%;height:100%}
/* Original course textures supplement the menu panorama for these three worlds. */
.background-detail{position:absolute;left:0;bottom:var(--bg-detail-bottom);width:calc(100% + 1400px);height:var(--bg-detail-height);background:var(--bg-detail) var(--bg-phase) bottom/var(--bg-detail-width,900px) 100% repeat-x;filter:var(--bg-land-filter);animation:detail-pan var(--bg-land-speed) linear infinite;animation-play-state:paused}
.background-scene.is-active .background-detail,.background-scene.is-leaving .background-detail{animation-play-state:running}
.background-scene[data-art="lava"] .background-sky{width:calc(100% + 700px);background-size:700px 700px;background-repeat:repeat;mask-image:linear-gradient(#000,#000b 65%,#0006);animation:rock-pan var(--bg-speed) linear infinite}
.background-scene[data-art="lava"] .background-foreground{width:min(46vw,530px);height:min(51vh,440px);left:-5vw;bottom:90px;filter:brightness(.94) drop-shadow(0 0 14px #ff501d50)}
.background-scene[data-art="lava"] .background-detail{--bg-detail-width:650px;filter:brightness(.6)}
.background-scene[data-art="lava"] .background-floor{background:linear-gradient(#5e291a,#241427 42%,#020819 85%)}
.background-scene[data-art="lava"] .background-checkers{opacity:.38}
.background-scene[data-art="desert"] .background-foreground{width:min(68vw,820px);height:220px;left:-8vw;bottom:15px}
.background-scene[data-art="desert"] .background-detail{--bg-detail-width:700px;opacity:.88}
.background-scene[data-art="desert"] .background-floor{background:linear-gradient(#82643c,#273039 45%,#020819 85%)}
.background-scene[data-art="jungle"] .background-foreground{left:-5vw;top:-50px;bottom:auto;width:calc(100% + 100px);height:280px;background-size:580px auto;background-repeat:repeat-x;background-position:left top;filter:brightness(.85) saturate(1.12)}
.background-scene[data-art="jungle"] .background-detail{--bg-detail-width:650px;filter:brightness(.74)}
.background-scene[data-art="jungle"] .background-floor{background:linear-gradient(#194d39,#092c30 45%,#020819 85%)}
#course-background[data-theme="classic"] .background-scene{background:#063c91}
#course-background[data-theme="classic"] :is(.background-land,.background-detail,.background-foreground,.background-haze){display:none}
#course-background[data-theme="classic"] .background-sky{background:url('assets/panel.png') center/600px 710px repeat;filter:none;mask-image:none;width:calc(100% + 700px);animation:checker-pan 180s linear infinite}
#course-background[data-theme="classic"] .background-floor{background:linear-gradient(#063c91,#061942 65%,#020819)}
#course-background[data-theme="classic"] .background-checkers{opacity:.52}
@media(max-width:580px){.background-scene[data-art="lava"] .background-foreground{width:70vw;left:-16vw;height:38vh;bottom:60px}.background-scene[data-art="desert"] .background-foreground{width:100vw;left:-15vw;height:160px}.background-scene[data-art="jungle"] .background-foreground{height:220px;background-size:440px auto;top:-35px}.background-scene[data-art="jungle"] .background-land{height:170px}.background-scene[data-art="desert"] .background-detail{height:110px}}

@keyframes detail-pan{from{transform:translateX(0)}to{transform:translateX(calc(-1 * var(--bg-detail-width,900px)))}}
@keyframes rock-pan{from{transform:translateX(0)}to{transform:translateX(-700px)}}
/* Treetops uses original vine, fern and hanging leaf cutouts instead of a canopy wall. */
.background-vines{position:absolute;inset:0;background:var(--bg-vines) left 11vh/1000px auto repeat-x;animation:foreground-drift 55s ease-in-out infinite alternate;animation-play-state:paused;opacity:.9;filter:brightness(.87) saturate(1.15)}
.background-scene.is-active .background-vines,.background-scene.is-leaving .background-vines{animation-play-state:running}
.background-scene[data-art="jungle"] .background-foreground{top:-30px;height:190px;background-size:450px auto;opacity:.94}
.background-scene[data-art="jungle"] .background-detail{--bg-detail-width:1000px;filter:brightness(.8) saturate(1.05)}
.background-scene[data-art="jungle"] .background-sky:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 45%,#7ce5c85c 90%,#1d655833)}
.background-scene[data-art="jungle"] .background-floor{background:linear-gradient(#236a4f,#0b3b39 45%,#020819 90%)}
#course-background[data-theme="classic"] .background-vines{display:none}
#course-background[data-theme="classic"] .background-sky:after{display:none}
@media(max-width:580px){.background-scene[data-art="jungle"] .background-foreground{height:150px;background-size:350px auto;top:-25px}.background-vines{background-size:750px auto;background-position:left 9vh}.background-scene[data-art="jungle"] .background-land{height:145px}.background-scene[data-art="jungle"] .background-detail{height:95px}}

/* Treetops uses the original SMB menu islands and ship with its green tint. */
.background-scene[data-art="smb-menu"] .background-sky:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,#7ce5c85c 90%,#1d655833)}
.background-scene[data-art="smb-menu"] .background-floor{background:linear-gradient(#236a4f,#0b3b39 45%,#020819 90%)}

/* Only genuine sky textures move; all scenery and checker layers stay fixed. */
.background-scene :is(.background-land,.background-detail,.background-foreground,.background-vines,.background-checkers,.background-haze){animation:none!important;transform:none!important}
.background-scene .background-checkers{transform:scaleY(-1)!important}
#course-background[data-theme="classic"] .background-sky,.background-scene[data-art="lava"] .background-sky{animation:none!important;transform:none!important}
@media(prefers-reduced-motion:reduce){
 #course-background.motion-enabled:not([data-theme="classic"]) .background-scene:not([data-art="lava"]) .background-sky{animation:sky-pan var(--bg-speed) linear infinite reverse!important;animation-play-state:paused!important}
 #course-background.motion-enabled:not(.motion-paused):not([data-theme="classic"]) .background-scene:is(.is-active,.is-leaving):not([data-art="lava"]) .background-sky{animation-play-state:running!important}
}

/* The waving checker surface is separate from the static scenery. */
.background-checkers.flag-ready{width:100%;background-image:none;animation:none!important}

.background-scene .background-sky{animation-direction:reverse!important}