/* Infin8 EcoSphere media deck: the drive-in controller and the ride HUD music
   player share one compact strip at the bottom centre of the stage, above the
   shared controller hints. The world stays visible and running behind it. */
.ecosphere-media-deck{position:absolute;inset:auto;left:50%;bottom:calc(max(10px,env(safe-area-inset-bottom,0px)) + 58px);transform:translateX(-50%);box-sizing:border-box;width:min(96%,780px);max-width:none;max-height:min(46%,260px);margin:0;padding:8px 10px;overflow:auto;border:1px solid #42e0ff99;border-radius:14px;background:var(--ride-glass,rgba(6,14,30,.9));color:#eafbff;box-shadow:0 12px 30px #0009;z-index:31;pointer-events:auto;touch-action:pan-y;overscroll-behavior:contain;font:600 13px/1.3 system-ui}
.ecosphere-media-deck:not([open]){display:none}
.ecosphere-media-deck::backdrop{display:none}
.ecosphere-media-deck .deck-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 6px}
.ecosphere-media-deck .deck-head strong{color:var(--i8-cyan,#42e0ff);font-size:13px;letter-spacing:.08em;white-space:nowrap}
.ecosphere-media-deck .deck-status{overflow:hidden;color:#9fdcf1;font-size:12px;text-overflow:ellipsis;white-space:nowrap}
.ecosphere-media-deck .deck-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px}
.ecosphere-media-deck .deck-btn,.ecosphere-media-deck .deck-link{display:inline-grid;place-items:center;box-sizing:border-box;min-width:44px;min-height:44px;padding:0 10px;border:1px solid #3b7192;border-radius:9px;background:#142539;color:#effbff;font:800 17px/1 system-ui;cursor:pointer;touch-action:manipulation;text-decoration:none}
.ecosphere-media-deck .deck-link{font-size:12px}
.ecosphere-media-deck .deck-btn:hover,.ecosphere-media-deck .deck-link:hover{background:#1f3a55}
.ecosphere-media-deck :is(.deck-btn,.deck-link,.deck-song,.deck-volume):focus-visible{outline:3px solid #ffd54a;outline-offset:2px}
.ecosphere-media-deck .deck-btn--close{margin-left:auto}
.ecosphere-media-deck .deck-song{box-sizing:border-box;min-height:44px;max-width:min(44%,300px);padding:0 8px;border:1px solid #3b7192;border-radius:9px;background:#142539;color:#effbff;font:700 13px system-ui}
.ecosphere-media-deck .deck-volume{width:min(130px,24%);min-height:44px;margin:0;accent-color:var(--i8-cyan,#42e0ff)}
.ecosphere-media-deck .deck-extra{margin-top:6px}
.ecosphere-media-deck .deck-extra:empty{display:none}
.ecosphere-media-deck[data-playing="true"] .deck-btn--toggle{border-color:var(--i8-cyan,#42e0ff);color:var(--i8-cyan,#42e0ff)}
.ecosphere-music-button{font:800 20px/1 system-ui}
.ecosphere-music-button.is-playing{color:var(--i8-cyan,#42e0ff);box-shadow:0 0 0 1px #42e0ff66 inset}
html:not([data-game-state="playing"]) .ecosphere-media-deck,html:not([data-game-state="playing"]) .ecosphere-music-button{display:none!important}
/* Phones: the deck sits above the touch dock; the song picker takes its own row. */
@media(max-width:600px){
 .ecosphere-media-deck{width:calc(100% - 12px);bottom:calc(max(8px,env(safe-area-inset-bottom,0px)) + 132px);padding:6px}
 .ecosphere-media-deck .deck-song{flex:1 1 100%;max-width:100%}
}
@media(orientation:landscape) and (max-height:550px){
 .ecosphere-media-deck{left:175px;right:175px;bottom:calc(max(8px,env(safe-area-inset-bottom,0px)) + 8px);width:auto;transform:none;max-height:56%}
}
/* Console (TV): title-safe offset, 56 px targets and 20 px type. */
html[data-console-layout="true"] .ecosphere-media-deck{bottom:calc(var(--console-safe-y,5vh) + 48px);width:min(90%,980px);padding:12px 16px;font-size:20px}
html[data-console-layout="true"] .ecosphere-media-deck :is(.deck-btn,.deck-link,.deck-song,.deck-volume){min-height:var(--console-target,56px);min-width:var(--console-target,56px);font-size:20px}
html[data-console-layout="true"] .ecosphere-media-deck :is(.deck-head strong,.deck-status){font-size:18px}