:root{--beat:0;--sub:0;--high:0}
#light-stage{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;opacity:.9;mix-blend-mode:screen;mask-image:linear-gradient(90deg,transparent 15%,rgba(0,0,0,.2) 35%,#000 57%);-webkit-mask-image:linear-gradient(90deg,transparent 15%,rgba(0,0,0,.2) 35%,#000 57%);transition:opacity .4s}
body[data-visuals="soft"] #light-stage{opacity:.72}
body.is-playing .scene.is-active .scene-image{scale:calc(1 + var(--sub)*.017 + var(--beat)*.006);filter:saturate(calc(1 + var(--high)*.12)) brightness(calc(1 + var(--beat)*.025))}
body.is-playing[data-track="saigon"] .saigon-vibes{text-shadow:0 0 calc(8px + var(--high)*26px) rgba(255,137,95,.18)}
body.is-playing .play-orb:after{opacity:calc(var(--beat)*.5);transform:scale(calc(1 + var(--beat)*.13));transition:opacity .08s,transform .12s}
body.is-playing .mini-eq i{animation:none;transform:scaleY(calc(.15 + var(--sub)*.85))}
body.is-playing .mini-eq i:nth-child(2){transform:scaleY(calc(.15 + var(--energy)*.85))}
body.is-playing .mini-eq i:nth-child(3){transform:scaleY(calc(.15 + var(--high)*.85))}
.stage-mode{position:fixed;z-index:13;left:50%;bottom:calc(7px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:10px;min-height:29px;min-width:171px;padding:3px 12px;border-left:1px solid rgba(246,240,229,.15);border-right:1px solid rgba(246,240,229,.15);color:var(--ink);transition:background .2s,color .2s}
.stage-mode>.icon{height:15px;width:15px;color:var(--accent);transition:transform .5s}
.stage-mode:hover{background:rgba(246,240,229,.04)}
.stage-mode:hover>.icon{transform:rotate(45deg)}
.stage-mode-copy{display:flex;flex-direction:column;gap:2px;align-items:flex-start;white-space:nowrap}
.stage-mode-copy>span{font-size:5px;letter-spacing:.16em;color:var(--muted)}
.stage-mode-copy>strong{font-size:7px;letter-spacing:.13em;font-weight:500}
.stage-status{display:flex;align-items:center;gap:5px;white-space:nowrap;color:var(--muted);font-size:5px;letter-spacing:.08em}
.stage-status:before{content:'';width:3px;height:3px;border-radius:50%;background:var(--accent);opacity:.35}
.is-playing .stage-status{color:var(--accent)}
.is-playing .stage-status:before{opacity:1;box-shadow:0 0 5px var(--accent)}
.motion-off #light-stage{opacity:0}
.motion-off .scene-image{scale:1!important;filter:none!important}
.motion-off .stage-status{color:var(--muted)}
.motion-off .stage-status:before{opacity:.3;box-shadow:none}
@media(max-width:760px){
 #light-stage{opacity:.74;mask-image:linear-gradient(90deg,transparent,#000 39%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 39%)}
 .stage-mode{min-width:127px;gap:7px;min-height:27px;padding:2px 6px;bottom:calc(9px + env(safe-area-inset-bottom,0px))}
 .stage-mode>.icon{width:12px;height:12px}.stage-mode-copy>span{font-size:4px}.stage-mode-copy>strong{font-size:6px;letter-spacing:.08em}
 .stage-status{font-size:4px;gap:3px}.stage-status:before{width:2px;height:2px}
}
@media(max-width:370px){.stage-mode{min-width:112px;gap:5px}.stage-mode>.icon{display:none}}
@media(max-height:740px) and (max-width:760px){.stage-mode{bottom:calc(5px + env(safe-area-inset-bottom,0px))}}
@media(max-height:510px) and (min-width:500px){.stage-mode{left:auto;right:var(--gutter);bottom:auto;top:57px;transform:none;min-width:140px;min-height:27px;background:rgba(7,13,24,.23)}}

.stage-mode{min-height:44px;bottom:calc(4px + env(safe-area-inset-bottom,0px))}
.stage-mode-copy>span{font-size:7px}.stage-mode-copy>strong{font-size:10px}.stage-status{font-size:7px}
@media(max-width:760px){
 .stage-mode{min-width:132px;gap:7px;min-height:44px;bottom:calc(5px + env(safe-area-inset-bottom,0px));padding:4px 6px}
 .stage-mode-copy>span,.stage-status{font-size:6px}.stage-mode-copy>strong{font-size:8px}
 .bottom-notes>span{max-width:70px}
}
@media(max-height:510px) and (min-width:500px){.stage-mode{top:56px;bottom:auto;right:calc(var(--gutter) + 40px)}}

/* Touch screens keep a single decoded photograph and a small local light effect. */
@media (max-width:760px), (pointer:coarse) {
 .scene, .scene.is-active { transform:none; transition:none; }
 .scene:not(.is-active) { visibility:hidden; }
 .scene .scene-image {
  inset:0; width:100%; height:100%; animation:none;
  transform:none !important; scale:1 !important; filter:none !important; will-change:auto;
 }
 .track-content, .track-content.is-active { transition:none; }
 .track-content { visibility:hidden; }
 .track-content.is-active { visibility:visible; }
 .scene-light, #atmosphere { display:none; }
 .grain { inset:0; width:100%; height:100%; animation:none; }
 .title-spark { animation:none; }
 body.is-playing[data-track='saigon'] .saigon-vibes { text-shadow:none; }
 body[data-track] .player-bar {
  background:rgba(7,13,24,.96); backdrop-filter:none; -webkit-backdrop-filter:none;
 }
 .modal::backdrop { backdrop-filter:none; -webkit-backdrop-filter:none; }
 .modal[open] { animation:none; }
 #light-stage { mix-blend-mode:normal; mask-image:none; -webkit-mask-image:none; transition:none; }
 .track-card:hover > img { transform:none; filter:none; }
 .scene-nav button i { transition:none; }
}