/* v0.8 Twitch native player — scoped to the On Air card only. */
#live .live-art {position:relative; overflow:hidden;}
#liveArtImage[hidden] {display:none !important;}
.twitch-player-shell[hidden], .twitch-player-help[hidden], #watchHereButton[hidden] {display:none !important;}
.twitch-player-shell {position:relative; width:100%; min-width:0; aspect-ratio:16/9; min-height:300px; background:#050509; display:flex; align-items:center; justify-content:center;}
.twitch-player-frame {position:absolute; inset:0; height:100%; width:100%; z-index:1;}
.twitch-player-frame iframe {display:block; height:100%; width:100%; border:0; background:#08070e;}
.twitch-player-help {z-index:2; position:relative; display:grid; place-items:center; min-height:300px; width:100%; max-width:560px; padding:26px; text-align:center; background:linear-gradient(145deg,rgba(5,7,14,.88),rgba(15,13,26,.95)); color:#ded8eb; font-size:14px;}
#live .live-card:has(.twitch-player-shell:not([hidden])) .live-art {min-height:300px;}
#live .live-card:has(.twitch-player-shell:not([hidden])) .live-info {min-height:300px;}
#watchHereButton {cursor:pointer; background:rgba(94,62,143,.14); color:#f5ecfa; border-color:#8c6abd; margin-top:15px;}
#watchHereButton:hover {background:#9a75c6; color:#101018;}
/* Protect native Twitch controls: nothing overlays the iframe. */
#live .live-info {z-index:1;}
@media(max-width:900px){
  .twitch-player-shell {aspect-ratio:16/9;min-height:300px;}
}
@media(max-width:600px){
  #live .live-card:has(.twitch-player-shell:not([hidden])) .live-art {min-height:300px;}
  .twitch-player-shell {min-height:300px;}
}