/* Kiss Empire — Web TV linear channel */
.ke-webtv { max-width: 1100px; margin: 0 auto; }

/* [hidden] must win over the elements' own display rules below. */
.ke-webtv [hidden] { display: none !important; }

.ke-webtv-stage {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
	cursor: pointer;
}
.ke-webtv-stage > * { position: absolute; inset: 0; }

.ke-webtv-player { display: block; }
.ke-webtv-player video,
.ke-webtv-player iframe { width: 100%; height: 100%; border: 0; display: block; background: #000; }

.ke-webtv-testcard { width: 100%; height: 100%; object-fit: cover; display: block; }
.ke-webtv-mono { display: flex; align-items: center; justify-content: center; }

.ke-webtv-count { position: absolute; left: 0; right: 0; top: auto; bottom: 8%; text-align: center; color: #fff; padding: 0 16px; }
.ke-webtv-count-label { display: block; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; opacity: .7; }
.ke-webtv-count-title { display: block; font-size: clamp(18px, 3vw, 28px); font-weight: 800; margin: 4px 0; }
.ke-webtv-count-time { display: block; font-size: clamp(28px, 6vw, 54px); font-weight: 800; font-variant-numeric: tabular-nums; }

.ke-webtv-ad { display: flex; align-items: center; justify-content: center; background: #000; color: #fff; }
.ke-webtv-ad span {
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 999px;
	padding: 8px 20px;
	font-size: 13px; letter-spacing: .16em; text-transform: uppercase; opacity: .85;
}

.ke-webtv-flag {
	inset: 14px auto auto 14px;
	background: #e50914; color: #fff; font-weight: 800; font-size: 12px; letter-spacing: .12em;
	padding: 5px 12px; border-radius: 6px;
	display: inline-flex; align-items: center; gap: 7px;
	height: fit-content; width: fit-content;
}
.ke-webtv-flag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: ke-webtv-blink 1.2s steps(2) infinite; }
@keyframes ke-webtv-blink { 50% { opacity: 0; } }

/* Audio + fullscreen controls */
.ke-webtv-controls { inset: auto 12px 12px auto; display: flex; gap: 8px; z-index: 6; opacity: .55; transition: opacity .15s ease; }
.ke-webtv-stage:hover .ke-webtv-controls,
.ke-webtv-stage:fullscreen .ke-webtv-controls { opacity: 1; }
.ke-webtv-btn {
	background: rgba(0, 0, 0, .55); color: #fff; border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 8px; width: 42px; height: 36px; font-size: 16px; line-height: 1; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
}
.ke-webtv-btn:hover { background: rgba(0, 0, 0, .82); }

/* Fullscreen: the stage fills the screen; recorded/live media is letterboxed. */
.ke-webtv-stage:fullscreen { width: 100vw; height: 100vh; aspect-ratio: auto; border-radius: 0; }
.ke-webtv-stage:-webkit-full-screen { width: 100vw; height: 100vh; border-radius: 0; }
.ke-webtv-stage:fullscreen .ke-webtv-player video,
.ke-webtv-stage:fullscreen .ke-webtv-player iframe { object-fit: contain; }

/* CSS fallback fullscreen (iPhone Safari: no element/iframe fullscreen). */
.ke-webtv-stage.ke-webtv--fs {
	position: fixed; inset: 0; width: 100vw; height: 100vh;
	z-index: 2147483647; border-radius: 0; aspect-ratio: auto; background: #000;
}
.ke-webtv-stage.ke-webtv--fs .ke-webtv-player video,
.ke-webtv-stage.ke-webtv--fs .ke-webtv-player iframe { object-fit: contain; }
html.ke-webtv-fs-lock, html.ke-webtv-fs-lock body { overflow: hidden !important; }

.ke-webtv-bar { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; margin-top: 12px; color: #cdc3e0; font-size: 14px; }
.ke-webtv-onair:not(:empty) { font-weight: 700; color: #fff; }
.ke-webtv-onair:not(:empty)::before { content: "\25CF "; color: #e50914; }
.ke-webtv-upnext { opacity: .7; }