* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #000; font-family: Arial, Helvetica, sans-serif; }
.tv-screen { position: fixed; inset: 0; width: 100vw; height: 100vh; background: #000; }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity 900ms ease-in-out; display: flex; align-items: center; justify-content: center; background: #000; }
.slide.active { opacity: 1; z-index: 2; }
.slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.caption { position: absolute; left: 4vw; right: 4vw; bottom: 5vh; color: #fff; padding: 24px 32px; border-radius: 18px; background: rgba(0,0,0,.48); backdrop-filter: blur(4px); text-shadow: 0 2px 10px rgba(0,0,0,.45); }
.caption h1 { margin: 0 0 10px; font-size: clamp(28px, 4vw, 76px); line-height: 1.05; }
.caption p { margin: 0; font-size: clamp(18px, 2vw, 38px); line-height: 1.35; }
.empty-state { height: 100%; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; }
.empty-state h1 { font-size: clamp(28px, 5vw, 80px); margin: 0; }
.empty-state p { font-size: clamp(18px, 2vw, 34px); margin: 0; opacity: .85; }
.empty-state small { opacity: .65; font-size: 18px; }
@media (orientation: portrait) { .slide img { object-fit: contain; } .caption { bottom: 3vh; padding: 18px; } }