/* LiP TV Player — every size is relative to --u (1% of the screen height) so it looks the same on a phone and a lobby TV. */
.liptv-screen { --u: 5.4px; --tkh: 0px; --lt-accent: #e11d48; --lt-side: 30%; position: relative; width: 100%; font-family: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; line-height: 1.25; color: #fff; }
.liptv-screen.lt-has-ticker { --tkh: calc(var(--u) * 7.5); }
.liptv-screen .lt-boot { aspect-ratio: 16/9; background: #000; color: #aaa; display: flex; align-items: center; justify-content: center; }
.liptv-screen *, .liptv-screen *::before, .liptv-screen *::after { box-sizing: border-box; }

.lt-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; overflow: hidden; isolation: isolate; user-select: none; -webkit-user-select: none; }
.lt-rounded .lt-stage { border-radius: 14px; box-shadow: 0 10px 40px rgba(0,0,0,.35); }
.lt-kiosk .lt-stage, .liptv-screen:fullscreen .lt-stage { width: 100vw; height: 100vh; aspect-ratio: auto; border-radius: 0; }
.liptv-screen:-webkit-full-screen .lt-stage { width: 100vw; height: 100vh; aspect-ratio: auto; border-radius: 0; }
.liptv-screen:fullscreen { background: #000; }

/* Main area */
.lt-main { position: absolute; left: 0; right: 0; top: 0; bottom: var(--tkh); display: flex; transition: bottom .4s ease; }
.lt-video { position: relative; flex: 1 1 auto; min-width: 0; background: #000; }
.lt-video iframe, .lt-yt { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0; }
.lt-shield { position: absolute; inset: 0; z-index: 1; cursor: pointer; }

/* Split scene: sponsor panel */
.lt-side { display: none; flex: 0 0 var(--lt-side); width: var(--lt-side); flex-direction: column; padding: calc(var(--u) * 2); gap: calc(var(--u) * 1.2);
	background: radial-gradient(120% 80% at 50% 0%, #1f2937 0%, #0b0f17 70%); border-left: calc(var(--u) * .35) solid var(--lt-accent); }
.lt-split .lt-side { display: flex; }
.lt-side-left .lt-side { order: -1; border-left: 0; border-right: calc(var(--u) * .35) solid var(--lt-accent); }
.lt-side-label { text-align: center; text-transform: uppercase; letter-spacing: .14em; font-weight: 800; font-size: calc(var(--u) * 2.3); color: #e5e7eb; padding-bottom: calc(var(--u) * .8); border-bottom: 1px solid rgba(255,255,255,.12); }
.lt-slides { position: relative; flex: 1 1 auto; min-height: 0; }
.lt-slide { position: absolute; inset: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 1); opacity: 0; transform: scale(.98); transition: opacity 1s ease, transform 1s ease; pointer-events: none; }
.lt-slide.lt-act { opacity: 1; transform: none; pointer-events: auto; }
.lt-slide a { display: flex; flex: 1 1 auto; min-height: 0; }
.lt-slide img { display: block; width: 100%; height: 100%; flex: 1 1 auto; min-height: 0; object-fit: contain; border-radius: calc(var(--u) * .8); }
.lt-cap { text-align: center; font-size: calc(var(--u) * 2.1); color: #d1d5db; }
.lt-cap b { display: block; color: #fff; font-size: calc(var(--u) * 2.6); }
.lt-dots { display: flex; justify-content: center; gap: calc(var(--u) * .8); }
.lt-dots i { width: calc(var(--u) * 1); height: calc(var(--u) * 1); border-radius: 50%; background: rgba(255,255,255,.3); transition: background .3s; }
.lt-dots i.lt-act { background: var(--lt-accent); }

/* Sponsor spotlight (full-screen sponsor slide) */
.lt-spot { display: none; position: absolute; inset: 0; z-index: 2; padding: calc(var(--u) * 5) calc(var(--u) * 6); background: radial-gradient(100% 100% at 50% 30%, #1f2937, #05070b); }
.lt-spotlight .lt-spot { display: block; }
.lt-spot .lt-slides { position: absolute; inset: calc(var(--u) * 5) calc(var(--u) * 6) calc(var(--u) * 7); }
.lt-spot .lt-cap b { font-size: calc(var(--u) * 4); }
.lt-spot .lt-cap { font-size: calc(var(--u) * 2.8); }
.lt-spot-label { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 2); text-align: center; text-transform: uppercase; letter-spacing: .2em; font-size: calc(var(--u) * 2); color: #9ca3af; }

/* Channel bug + clock */
.lt-bug { position: absolute; z-index: 5; top: calc(var(--u) * 3); left: calc(var(--u) * 3); display: flex; align-items: center; gap: calc(var(--u) * 1.2); pointer-events: none; filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)); }
.lt-bug img { max-height: calc(var(--u) * 9); max-width: calc(var(--u) * 26); opacity: .92; }
.lt-bug b { font-size: calc(var(--u) * 3.4); font-weight: 900; letter-spacing: .02em; text-shadow: 0 2px 8px rgba(0,0,0,.7); }
.lt-live { background: #dc2626; color: #fff; font-weight: 800; font-size: calc(var(--u) * 1.9); padding: calc(var(--u) * .4) calc(var(--u) * 1.1); border-radius: calc(var(--u) * .5); letter-spacing: .06em; animation: lt-pulse 2s infinite; }
.lt-clock { position: absolute; z-index: 5; top: calc(var(--u) * 3); right: calc(var(--u) * 3); font-size: calc(var(--u) * 2.8); font-weight: 700; font-variant-numeric: tabular-nums; background: rgba(0,0,0,.45); padding: calc(var(--u) * .5) calc(var(--u) * 1.4); border-radius: calc(var(--u) * .7); pointer-events: none; }
.lt-clock:empty { display: none; }
.lt-side-left .lt-bug { left: auto; right: calc(var(--u) * 3); flex-direction: row-reverse; }
.lt-side-left .lt-clock { right: auto; left: calc(var(--u) * 3); }
.lt-split .lt-bug { left: calc(var(--u) * 3); }
.lt-split:not(.lt-side-left) .lt-clock { right: calc(var(--lt-side) + var(--u) * 3); }
.lt-split.lt-side-left .lt-bug { right: calc(var(--u) * 3); left: auto; }
.lt-split.lt-side-left .lt-clock { left: calc(var(--lt-side) + var(--u) * 3); }
.lt-spotlight .lt-bug { opacity: .9; }

/* Lower third */
.lt-lower { position: absolute; z-index: 6; left: calc(var(--u) * 3); bottom: calc(var(--tkh) + var(--u) * 4); max-width: 62%; transform: translateX(calc(-100% - var(--u) * 6)); transition: transform .7s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.lt-lower.lt-show { transform: none; }
.lt-lower-in { display: flex; align-items: stretch; box-shadow: 0 6px 20px rgba(0,0,0,.45); }
.lt-lower-tag { background: var(--lt-accent); font-weight: 900; font-size: calc(var(--u) * 1.9); letter-spacing: .1em; padding: calc(var(--u) * 1) calc(var(--u) * 1.4); display: flex; align-items: center; }
.lt-lower-txt { background: rgba(10,14,22,.92); padding: calc(var(--u) * .9) calc(var(--u) * 2); min-width: 0; }
.lt-lower-txt small { display: block; font-size: calc(var(--u) * 1.8); color: #cbd5e1; text-transform: uppercase; letter-spacing: .06em; }
.lt-lower-txt b { display: block; font-size: calc(var(--u) * 2.9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-split:not(.lt-side-left) .lt-lower { max-width: calc(100% - var(--lt-side) - var(--u) * 8); }
.lt-split.lt-side-left .lt-lower { left: calc(var(--lt-side) + var(--u) * 3); max-width: calc(100% - var(--lt-side) - var(--u) * 8); }

/* Ticker (scrolling words) */
.lt-ticker { position: absolute; z-index: 7; left: 0; right: 0; bottom: 0; height: var(--tkh); display: flex; align-items: stretch; font-size: calc(var(--u) * 3.4); font-weight: 600; overflow: hidden; border-top: calc(var(--u) * .3) solid var(--lt-accent); }
.lt-ticker:empty { display: none; }
.lt-tk-label { flex: 0 0 auto; display: flex; align-items: center; padding: 0 calc(var(--u) * 2.4); font-weight: 900; letter-spacing: .08em; text-transform: uppercase; position: relative; z-index: 2; box-shadow: calc(var(--u) * 1) 0 calc(var(--u) * 2) rgba(0,0,0,.4); }
.lt-tk-view { position: relative; flex: 1 1 auto; overflow: hidden; display: flex; align-items: center; }
.lt-tk-track { display: inline-flex; white-space: nowrap; will-change: transform; animation: lt-scroll 30s linear infinite; }
.lt-tk-copy { display: inline-block; padding-left: calc(var(--u) * 3); }
.lt-sep { font-style: normal; opacity: .65; margin: 0 calc(var(--u) * 2.2); }
.lt-tk-em .lt-tk-label { animation: lt-flash 1s steps(2, start) infinite; }
@keyframes lt-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Emergency — banner (no takeover) */
.lt-banner { display: none; position: absolute; z-index: 9; top: 0; left: 0; right: 0; padding: calc(var(--u) * 1.2) calc(var(--u) * 3); font-size: calc(var(--u) * 2.7); font-weight: 700; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-em-banner .lt-banner { display: block; }
.lt-em-banner .lt-bug, .lt-em-banner .lt-clock { top: calc(var(--u) * 9); }
.lt-banner.lt-lvl-critical { background: #b91c1c; }
.lt-banner.lt-lvl-warning { background: #d97706; }
.lt-banner.lt-lvl-info { background: #0369a1; }

/* Emergency — full takeover */
.lt-emerg { display: none; position: absolute; inset: 0; z-index: 20; flex-direction: column; color: #fff; text-align: center; }
.lt-em-on .lt-emerg { display: flex; }
.lt-emerg.lt-lvl-critical { background: radial-gradient(120% 90% at 50% 40%, #991b1b, #450a0a); }
.lt-emerg.lt-lvl-warning { background: radial-gradient(120% 90% at 50% 40%, #b45309, #451a03); }
.lt-emerg.lt-lvl-info { background: radial-gradient(120% 90% at 50% 40%, #075985, #082f49); }
.lt-emerg::after { content: ""; position: absolute; inset: 0; border: calc(var(--u) * 1.2) solid rgba(255,255,255,.85); animation: lt-flash 1.2s steps(2, start) infinite; pointer-events: none; }
.lt-em-bar { flex: 0 0 auto; padding: calc(var(--u) * 2.2); font-size: calc(var(--u) * 4.6); font-weight: 900; letter-spacing: .14em; background: rgba(0,0,0,.35); }
.lt-lvl-warning .lt-em-bar { background: #fbbf24; color: #111; }
.lt-em-body { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(var(--u) * 4) calc(var(--u) * 8); gap: calc(var(--u) * 2.5); }
.lt-em-body h2 { margin: 0; font-size: calc(var(--u) * 7.5); font-weight: 900; line-height: 1.08; color: #fff; text-shadow: 0 4px 18px rgba(0,0,0,.5); }
.lt-em-body p { margin: 0; font-size: calc(var(--u) * 4.2); line-height: 1.35; max-width: 92%; }
.lt-em-meta { font-size: calc(var(--u) * 2.3); opacity: .8; }
.lt-em-on .lt-ticker, .lt-em-on .lt-bug, .lt-em-on .lt-clock, .lt-em-on .lt-lower { display: none; }
.lt-em-on .lt-main { bottom: 0; }

/* Idle / slate */
.lt-idle { display: none; position: absolute; inset: 0; z-index: 3; align-items: center; justify-content: center; text-align: center; background: radial-gradient(100% 100% at 50% 20%, #1e293b, #020617); padding: calc(var(--u) * 6); }
.lt-idle.lt-show { display: flex; }
.lt-idle.lt-loading { background: rgba(0,0,0,.85); }
.lt-idle-in { max-width: 80%; }
.lt-idle h3 { margin: calc(var(--u) * 2) 0 calc(var(--u) * 1); font-size: calc(var(--u) * 5.2); font-weight: 800; color: #fff; }
.lt-idle p { margin: 0; font-size: calc(var(--u) * 2.8); color: #cbd5e1; }
.lt-idle-logo { max-height: calc(var(--u) * 16); max-width: 60%; }
.lt-idle-name { font-size: calc(var(--u) * 6); font-weight: 900; letter-spacing: .02em; background: linear-gradient(90deg, #fff, var(--lt-accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lt-idle-next { margin-top: calc(var(--u) * 3.5); font-size: calc(var(--u) * 2.6); color: #e2e8f0; }
.lt-idle-next span { display: block; text-transform: uppercase; letter-spacing: .14em; font-size: calc(var(--u) * 1.9); color: var(--lt-accent); font-weight: 800; margin-bottom: calc(var(--u) * .8); }
.lt-idle-next b { color: #fff; margin-right: calc(var(--u) * 1); }
.lt-spinner { width: calc(var(--u) * 8); height: calc(var(--u) * 8); border-radius: 50%; border: calc(var(--u) * .8) solid rgba(255,255,255,.15); border-top-color: var(--lt-accent); animation: lt-spin 1s linear infinite; }

/* Controls */
.lt-controls { position: absolute; z-index: 25; right: calc(var(--u) * 2.5); bottom: calc(var(--tkh) + var(--u) * 2.5); display: flex; gap: 8px; opacity: 0; transition: opacity .3s; }
.lt-awake .lt-controls, .lt-controls:focus-within { opacity: 1; }
.lt-controls .lt-btn { appearance: none; cursor: pointer; border: 1px solid rgba(255,255,255,.3); background: rgba(0,0,0,.65); color: #fff; border-radius: 999px; font: 600 max(13px, calc(var(--u) * 2.2))/1 system-ui, sans-serif; padding: max(8px, calc(var(--u) * 1.1)) max(12px, calc(var(--u) * 1.8)); backdrop-filter: blur(6px); }
.lt-controls .lt-btn:hover { background: var(--lt-accent); border-color: var(--lt-accent); }
.lt-controls:has(.lt-muted) { opacity: 1; }
.lt-btn.lt-muted { background: var(--lt-accent); border-color: transparent; animation: lt-pulse 2.4s infinite; }
.lt-em-on .lt-controls { bottom: calc(var(--u) * 2.5); }

@keyframes lt-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }
@keyframes lt-flash { 0% { opacity: 1; } 100% { opacity: .25; } }
@keyframes lt-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.lt-live, .lt-btn.lt-muted { animation: none; }
}

/* Keep controls & lower third on the video side */
.lt-split:not(.lt-side-left) .lt-controls { right: calc(var(--lt-side) + var(--u) * 2.5); }
.lt-spotlight .lt-lower { display: none; }
