/**
 * Sponge Player - front-end styles.
 *
 * Layers:
 *   1. Container normalisation (works on any theme, not just RetroTube)
 *   2. Watermark overlay (pointer-events: none -> never blocks the player)
 *   3. Compliant ad zones (below-player + closeable overlay)
 *
 * Design rule: nothing here may intercept clicks aimed at the player.
 */

:root {
	--sp-accent: #ff9900;
	--sp-progress: #fff;
	--sp-wm-opacity: 0.45;
	--sp-wm-grayscale: grayscale(1);
}

/* ------------------------------------------------------------------ *
 * 1. Container
 * ------------------------------------------------------------------ */

.sp-player-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	overflow: hidden;
	border-radius: 4px;
}

.sp-player-wrap > iframe,
.sp-player-wrap > video,
.sp-player-wrap > .video-js {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* RetroTube's own container: keep it responsive, and make it our positioning
   context so the watermark and overlay can anchor to it. */
.responsive-player {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.responsive-player > iframe,
.responsive-player > video,
.responsive-player > .video-js {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Vertical (9:16) sources: keep them centred instead of cropping. */
.sp-fit-contain > iframe,
.sp-fit-contain > video {
	object-fit: contain;
}

/* ------------------------------------------------------------------ *
 * 2. Watermark
 * ------------------------------------------------------------------ */

.sp-watermark {
	position: absolute;
	z-index: 15;
	pointer-events: none; /* never intercepts a click meant for the player */
	opacity: var(--sp-wm-opacity);
	filter: var(--sp-wm-grayscale);
	transition: opacity 0.2s ease;
	max-width: 40%;
}

.sp-player-wrap:hover .sp-watermark,
.responsive-player:hover .sp-watermark {
	opacity: calc(var(--sp-wm-opacity) + 0.25);
}

.sp-watermark img {
	display: block;
	width: 100%;
	height: auto;
}

.sp-watermark--text {
	font-size: clamp(11px, 2.2vw, 20px);
	font-weight: 700;
	letter-spacing: 0.06em;
	color: #fff;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
	white-space: nowrap;
}

/* The link is the one deliberate exception: only the logo text is clickable,
   and only when the site owner configured a destination. */
.sp-watermark a {
	pointer-events: auto;
	color: inherit;
	text-decoration: none;
	display: block;
}

.sp-watermark--top-left     { top: 10px;    left: 10px; }
.sp-watermark--top-right    { top: 10px;    right: 10px; }
.sp-watermark--bottom-left  { bottom: 46px; left: 10px; }
.sp-watermark--bottom-right { bottom: 46px; right: 10px; }

/* ------------------------------------------------------------------ *
 * 3. Ad zones
 * ------------------------------------------------------------------ */

.sp-ad-below {
	margin: 16px 0;
	text-align: center;
	overflow: hidden;
}

.sp-ad-below:empty {
	display: none;
}

/* Overlay ad: sits above the player, user closes it. Deliberately does NOT
   block the player underneath once dismissed, and never auto-opens a window. */
.sp-ad-overlay {
	position: absolute;
	inset: 0;
	z-index: 20;
	background: rgba(0, 0, 0, 0.88);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	overflow: auto;
}

.sp-ad-overlay[hidden] {
	display: none !important;
}

.sp-ad-close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: #111;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	z-index: 21;
	padding: 0;
}

.sp-ad-close:hover {
	background: #fff;
}

.sp-ad-countdown {
	position: absolute;
	left: 8px;
	bottom: 8px;
	background: rgba(0, 0, 0, 0.7);
	color: #fff;
	font-size: 12px;
	padding: 4px 8px;
	border-radius: 3px;
	z-index: 21;
}

/* ------------------------------------------------------------------ *
 * 4. VAST preroll
 * ------------------------------------------------------------------ */

.sp-vast-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background: #000;
	z-index: 25;
}

.sp-vast-skip {
	position: absolute;
	right: 12px;
	bottom: 44px;
	z-index: 26;
	background: rgba(0, 0, 0, 0.75);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 4px;
	padding: 6px 12px;
	font-size: 13px;
	cursor: pointer;
}

.sp-vast-skip[hidden] {
	display: none;
}

/* ------------------------------------------------------------------ *
 * 5. Download button
 * ------------------------------------------------------------------ */

.sp-dl-button {
	position: absolute;
	right: 10px;
	bottom: 46px;
	z-index: 16;
	background: rgba(0, 0, 0, 0.7);
	color: #fff;
	border: 0;
	border-radius: 4px;
	padding: 6px 10px;
	font-size: 13px;
	cursor: pointer;
	line-height: 1;
}

.sp-dl-button:hover {
	background: var(--sp-accent);
	color: #111;
}

/* ------------------------------------------------------------------ *
 * 6. Theme skin: keep RetroTube's big play button on-brand
 * ------------------------------------------------------------------ */

.video-js .vjs-big-play-button {
	border-color: var(--sp-accent);
}

.video-js .vjs-progress-holder .vjs-play-progress {
	background: var(--sp-accent);
}

.video-js .vjs-load-progress div {
	background: rgba(255, 255, 255, 0.3);
}

/* On small screens the native control bar overlaps the right edge; give the
   watermark and download button a little more clearance. */
@media (max-width: 640px) {
	.sp-watermark {
		max-width: 55%;
	}
	.sp-watermark--bottom-left,
	.sp-watermark--bottom-right {
		bottom: 40px;
	}
	.sp-dl-button {
		bottom: 40px;
		padding: 5px 8px;
		font-size: 12px;
	}
}