* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #000; }
body { color: #fff; font-family: Arial, sans-serif; }
#stage, #blackout, #media-stage { position: fixed; inset: 0; width: 100%; height: 100%; }
#stage { background: #000; }
#blackout { z-index: 2; background: #000; }
#player-header { position: fixed; z-index: 4; top: 0; right: 0; left: 0; display: flex; height: clamp(58px, 9vh, 96px); align-items: center; gap: clamp(12px, 2vw, 28px); padding: 8px clamp(14px, 2.5vw, 36px); background: linear-gradient(180deg, #000c, #0005 72%, transparent); }
#player-logo { width: auto; height: 100%; max-width: 22vw; object-fit: contain; object-position: left center; }
#running-text { min-width: 0; flex: 1; overflow: hidden; color: #fff; font-size: clamp(18px, 2.2vw, 34px); font-weight: 700; line-height: 1.25; text-shadow: 0 2px 6px #000; white-space: nowrap; }
#running-text-track { display: flex; width: max-content; animation: running-text-scroll 24s linear infinite; }
.running-text-copy { flex: 0 0 auto; padding-right: 3em; }
@keyframes running-text-scroll { to { transform: translateX(-50%); } }
#media-stage { display: none; align-items: center; justify-content: center; background: #000; }
#media-stage.visible { display: flex; }
#photo, #video, #youtube, #youtube iframe { width: 100%; height: 100%; }
#photo, #video { display: none; object-fit: contain; }
#photo.visible, #video.visible { display: block; }
#youtube { display: none; }
#youtube.visible { display: block; }
#caption { position: fixed; z-index: 3; right: 2vw; bottom: 2vh; left: 2vw; padding: 12px 18px; background: #0009; color: #fff; font-size: clamp(16px, 2vw, 30px); text-align: center; }
#error { position: fixed; z-index: 5; right: 16px; bottom: 16px; max-width: min(600px, calc(100% - 32px)); padding: 12px 16px; border-radius: 6px; background: #8c2525; color: #fff; font-size: 16px; }
@media (prefers-reduced-motion: reduce) { #running-text-track { animation-duration: 60s; } }