/**
 * ==========================================================
 * YTStealth
 * Player Layout - Invisible Bulletproof Glass Shield
 * ==========================================================
 * 
 * The shield is ALWAYS active and COMPLETELY invisible.
 * Feathering at the edges removes all visual boundaries.
 * No shadows, no borders, no hard lines.
 * 
 * Users see YouTube's UI but cannot interact with it.
 * The shield feels like part of the video itself.
 * 
 * ==========================================================
 */

/*==========================================================
=            Player Variables (Scoped)                     =
==========================================================*/

.yts-player{

	/* ── Z-Index Stack ── */
	--yts-z-provider:1;
	--yts-z-cinebar:2;
	--yts-z-glass:3;
	--yts-z-poster:1000;
	--yts-z-loading:1001;
	--yts-z-overlay:1002;
	--yts-z-controls:10000;
	--yts-z-playlist:10001;
	--yts-z-dialog:10002;

	/* ── Layout ── */
	--yts-player-radius:16px;
	--yts-player-aspect:16/9;

	/* ── Glass Layer Sizing (with overlap) ── */
	--yts-glass-top:13%;
	--yts-glass-bottom:11%;
	--yts-glass-top-touch:22%;
	--yts-glass-bottom-touch:18%;
	--yts-glass-overlap:8px;

	/* ── Cinematic Bar Sizing ── */
	--yts-cinebar-height:8%;
	--yts-cinebar-top-offset:0px;
	--yts-cinebar-bottom-offset:0px;
	--yts-cinebar-opacity:0.85;

}

/*==========================================================
=            Player Wrapper                               =
==========================================================*/

.yts-player{

	position:relative;

	display:flex;
	flex-direction:column;

	width:100%;
	max-width:100%;

	overflow:hidden;

	border-radius:var(--yts-player-radius);

	user-select:none;

	-webkit-user-select:none;

	touch-action:manipulation;

	box-sizing:border-box;

	background:#000;

}

/*==========================================================
=            Viewport                                     =
==========================================================*/

.yts-stage{

	position:relative;

	width:100%;

	aspect-ratio:var(--yts-player-aspect);

	overflow:hidden;

	display:block;

	background:#000;

}

/* fallback */

@supports not (aspect-ratio:1){

	.yts-stage{

		height:0;

		padding-top:56.25%;

	}

}

/*==========================================================
=            Video Container                              =
==========================================================*/

.yts-video-container{

	position:relative;

	width:100%;

	height:100%;

	overflow:hidden;

}

/*==========================================================
=            Provider                                     =
==========================================================*/

.yts-provider{

	position:absolute;

	inset:0;

	width:100%;
	height:100%;

	overflow:hidden;

	z-index:var(--yts-z-provider);

}

/*==========================================================
=            Provider Stage                              =
==========================================================*/

.yts-provider-stage{

	position:absolute;

	inset:0;

	width:100%;
	height:100%;

	overflow:hidden;

	z-index:var(--yts-z-provider);

	opacity:1;

}

/*==========================================================
=            Iframe (Pixel-Perfect)                       =
==========================================================*/

.yts-provider-stage iframe{

	position:absolute;

	inset:0;

	width:100% !important;
	height:100% !important;

	border:0;

	display:block;

	pointer-events:none !important;

}

/*==========================================================
=            Glass Layers - INVISIBLE BULLETPROOF GLASS   =
==========================================================*/

/**
 * The glass layers are now:
 *   1. ALWAYS visible
 *   2. COMPLETELY transparent (no background, no blur)
 *   3. Feather-edged (no hard boundaries)
 *   4. Covering all YouTube UI elements
 *   5. Blocking ALL pointer events
 *   6. No shadows, no borders, no visible edges
 */

.yts-glass{

	position:absolute;

	left:0;

	width:100%;

	z-index:var(--yts-z-glass);

	/* ── COMPLETELY transparent ── */
	background:transparent !important;
	backdrop-filter:none !important;
	-webkit-backdrop-filter:none !important;

	/* ── No visual contribution whatsoever ── */
	box-shadow:none !important;
	filter:none !important;
	outline:none !important;
	border:none !important;

	/* ── ALWAYS intercepting all events ── */
	pointer-events:auto !important;

	cursor:default;

	user-select:none;

	-webkit-user-select:none;

	-webkit-tap-highlight-color:transparent;

	/* ── Always present, no transitions ── */
	opacity:1 !important;
	transform:none !important;
	transition:none !important;

	/* ── Feather edges with mask ── */
	-webkit-mask-composite:source-over;
	mask-composite:add;

}

/* ── Top Glass with Feathering ── */

.yts-glass-top{

	top:0;

	/* ── Overlap to remove seam ── */
	height:calc(var(--yts-glass-top) + var(--yts-glass-overlap, 8px));

	/* ── Feather edge at bottom ── */
	-webkit-mask-image:
		linear-gradient(
			to bottom,
			#000 0%,
			#000 65%,
			rgba(0,0,0,0.85) 78%,
			rgba(0,0,0,0.5) 90%,
			transparent 100%
		);

	mask-image:
		linear-gradient(
			to bottom,
			#000 0%,
			#000 65%,
			rgba(0,0,0,0.85) 78%,
			rgba(0,0,0,0.5) 90%,
			transparent 100%
		);

}

/* ── Bottom Glass with Feathering ── */

.yts-glass-bottom{

	bottom:0;

	/* ── Overlap to remove seam ── */
	height:calc(var(--yts-glass-bottom) + var(--yts-glass-overlap, 8px));

	/* ── Feather edge at top ── */
	-webkit-mask-image:
		linear-gradient(
			to top,
			#000 0%,
			#000 65%,
			rgba(0,0,0,0.85) 78%,
			rgba(0,0,0,0.5) 90%,
			transparent 100%
		);

	mask-image:
		linear-gradient(
			to top,
			#000 0%,
			#000 65%,
			rgba(0,0,0,0.85) 78%,
			rgba(0,0,0,0.5) 90%,
			transparent 100%
		);

}

/* ── Touch UI Expanded State ── */

.yts-player.yts-touch-ui .yts-glass-top{

	height:calc(var(--yts-glass-top-touch) + var(--yts-glass-overlap, 8px));

}

.yts-player.yts-touch-ui .yts-glass-bottom{

	height:calc(var(--yts-glass-bottom-touch) + var(--yts-glass-overlap, 8px));

}

/*==========================================================
=            Cinematic PNG Bars (Purely Decorative)      =
==========================================================*/

/**
 * These are purely decorative - they blend the transition
 * and create a cinematic letterbox feel.
 * They do NOT block interactions - the glass handles that.
 */

.yts-cinebar{

	position:absolute;

	left:0;

	width:100%;

	height:var(--yts-cinebar-height);

	display:block;

	z-index:var(--yts-z-cinebar);

	pointer-events:none;

	user-select:none;

	-webkit-user-select:none;

	-webkit-user-drag:none;

	-webkit-tap-highlight-color:transparent;

	border:0;

	margin:0;

	padding:0;

	background:transparent;

	overflow:hidden;

	/* ── Always present, no transitions ── */
	opacity:1 !important;
	transform:none !important;
	transition:none !important;

	/* ── No visual contribution other than the image ── */
	box-shadow:none !important;
	filter:none !important;
	outline:none !important;
	border:none !important;

}

/* ── Top Bar ── */

.yts-cinebar-top{

	top:var(--yts-cinebar-top-offset);

	/* ── Slight blend into the glass ── */
	-webkit-mask-image:
		linear-gradient(
			to bottom,
			#000 0%,
			#000 60%,
			rgba(0,0,0,0.7) 80%,
			rgba(0,0,0,0.3) 95%,
			transparent 100%
		);

	mask-image:
		linear-gradient(
			to bottom,
			#000 0%,
			#000 60%,
			rgba(0,0,0,0.7) 80%,
			rgba(0,0,0,0.3) 95%,
			transparent 100%
		);

}

/* ── Bottom Bar ── */

.yts-cinebar-bottom{

	bottom:var(--yts-cinebar-bottom-offset);

	/* ── Slight blend into the glass ── */
	-webkit-mask-image:
		linear-gradient(
			to top,
			#000 0%,
			#000 60%,
			rgba(0,0,0,0.7) 80%,
			rgba(0,0,0,0.3) 95%,
			transparent 100%
		);

	mask-image:
		linear-gradient(
			to top,
			#000 0%,
			#000 60%,
			rgba(0,0,0,0.7) 80%,
			rgba(0,0,0,0.3) 95%,
			transparent 100%
		);

}

/* ── Bar Image (decorative) ── */

.yts-cinebar .yts-cinebar-image{

	display:block;

	width:100%;

	height:100%;

	object-fit:fill;

	pointer-events:none;

	user-select:none;

	-webkit-user-select:none;

	-webkit-user-drag:none;

	/* ── Slightly reduced opacity for blending ── */
	opacity:var(--yts-cinebar-opacity, 0.85);

}

/*==========================================================
=            POSTER LAYER                                 =
==========================================================*/

.yts-poster{

	position:absolute;

	inset:0;

	display:flex;

	flex-direction:column;

	align-items:center;

	justify-content:center;

	z-index:var(--yts-z-poster);

	background:#000;

	cursor:pointer;

	overflow:hidden;

	user-select:none;

	-webkit-user-select:none;

	opacity:1;

	visibility:visible;

	transition:
		opacity 0.25s ease,
		visibility 0.25s ease;

}

.yts-poster.is-hidden{

	opacity:0;

	visibility:hidden;

	pointer-events:none;

}

/*==========================================================
=            Poster Thumbnail                             =
==========================================================*/

.yts-poster-thumbnail{

	position:absolute;

	inset:0;

	width:100%;

	height:100%;

	object-fit:cover;

	display:block;

	pointer-events:none;

	transition:
		filter 0.3s ease,
		opacity 0.3s ease;

}

.yts-poster.is-loading .yts-poster-thumbnail{

	filter:blur(2px);

	opacity:0.65;

}

.yts-poster:not(.is-loading) .yts-poster-thumbnail{

	filter:none;

	opacity:1;

}

/*==========================================================
=            Poster Gradient Overlay                      =
==========================================================*/

.yts-poster-gradient{

	position:absolute;

	inset:0;

	background:
		linear-gradient(
			to top,
			rgba(0, 0, 0, 0.6) 0%,
			transparent 40%,
			transparent 70%,
			rgba(0, 0, 0, 0.3) 100%
		);

	pointer-events:none;

}

/*==========================================================
=            Poster Title                                =
==========================================================*/

.yts-poster-title{

	position:absolute;

	bottom:80px;

	left:50%;

	transform:translateX(-50%);

	width:90%;

	max-width:600px;

	margin:0;

	padding:0 20px;

	font-family:var(--yts-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);

	font-size:clamp(18px, 3vw, 32px);

	font-weight:600;

	color:#ffffff;

	text-align:center;

	text-shadow:0 2px 20px rgba(0, 0, 0, 0.8);

	line-height:1.3;

	pointer-events:none;

	z-index:2;

	letter-spacing:0.5px;

	display:-webkit-box;

	-webkit-line-clamp:2;

	-webkit-box-orient:vertical;

	overflow:hidden;

}

/*==========================================================
=            Poster Duration Badge                       =
==========================================================*/

.yts-poster-duration{

	position:absolute;

	bottom:140px;

	right:24px;

	display:flex;

	align-items:center;

	gap:6px;

	padding:6px 12px;

	background:rgba(0, 0, 0, 0.75);

	color:#ffffff;

	font-family:var(--yts-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);

	font-size:13px;

	font-weight:500;

	border-radius:4px;

	letter-spacing:0.3px;

	backdrop-filter:blur(8px);

	-webkit-backdrop-filter:blur(8px);

	z-index:2;

	pointer-events:none;

	opacity:0;

	transition:opacity 0.3s ease;

}

.yts-poster-duration.is-visible{

	opacity:1;

}

.yts-poster-duration svg{

	flex-shrink:0;

}

/*==========================================================
=            Poster Play Button                          =
==========================================================*/

.yts-poster-play{

	position:relative;

	width:80px;

	height:80px;

	display:flex;

	align-items:center;

	justify-content:center;

	border:0;

	background:rgba(255, 255, 255, 0.15);

	color:#ffffff;

	border-radius:50%;

	cursor:pointer;

	z-index:3;

	transition:
		transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
		background 0.3s ease,
		box-shadow 0.3s ease,
		opacity 0.25s ease;

	backdrop-filter:blur(8px);

	-webkit-backdrop-filter:blur(8px);

	box-shadow:0 0 40px rgba(0, 0, 0, 0.3), inset 0 0 0 2px rgba(255, 255, 255, 0.2);

}

.yts-poster-play:hover{

	transform:scale(1.05);

	background:rgba(255, 255, 255, 0.25);

	box-shadow:0 0 60px rgba(255, 0, 0, 0.2), inset 0 0 0 2px rgba(255, 255, 255, 0.3);

}

.yts-poster-play:active{

	transform:scale(0.95);

}

.yts-poster-play svg{

	width:48px;

	height:48px;

	fill:currentColor;

	margin-left:4px;

}

.yts-poster-play .yts-icon-play {
	display:block;
}

.yts-poster-play .yts-icon-replay {
	display:none;
}

.yts-poster-play.is-replay .yts-icon-play {
	display:none;
}

.yts-poster-play.is-replay .yts-icon-replay {
	display:block;
}

.yts-poster.is-loading .yts-poster-play{

	opacity:0;

	pointer-events:none;

}

/*==========================================================
=            Poster Spinner                              =
==========================================================*/

.yts-poster-spinner{

	position:absolute;

	top:50%;
	left:50%;

	width:40px;
	height:40px;

	transform:translate(-50%, -50%);

	display:block;

	background:none;

	border:0;

	box-shadow:none;

	opacity:0;

	pointer-events:none;

	z-index:4;

	transition:opacity 0.3s ease;

	filter:drop-shadow(0 0 6px rgba(255, 255, 255, 0.3));

	flex-shrink:0;

	aspect-ratio:1 / 1;

}

.yts-poster.is-loading .yts-poster-spinner{

	opacity:1;

}

.yts-poster-spinner svg{

	display:block;

	width:100%;
	height:100%;

	aspect-ratio:1 / 1;

	animation:yts-spin 0.8s linear infinite;

}

.yts-poster-spinner .yts-spinner-track{

	stroke:rgba(255, 255, 255, 0.12);

}

.yts-poster-spinner .yts-spinner-head{

	stroke:#ffffff;

	stroke-linecap:round;

	transform-origin:center;

	transform-box:fill-box;

}

@keyframes yts-spin {

	0% { transform:rotate(0deg); }

	100% { transform:rotate(360deg); }

}

@media (prefers-reduced-motion: reduce) {

	.yts-poster-spinner svg {
		animation:none;
	}

	.yts-poster-spinner .yts-spinner-head {
		stroke-dasharray:60 170;
	}

}

/*==========================================================
=            CONTROLS LAYER                              =
==========================================================*/

.yts-controls{

	position:absolute;

	left:0;
	right:0;
	bottom:0;

	width:100%;

	z-index:var(--yts-z-controls);

	pointer-events:auto;

}

/*==========================================================
=            Hidden State                                =
==========================================================*/

.yts-hidden{

	display:none !important;

}

/*==========================================================
=            Visibility Helpers                          =
==========================================================*/

.yts-visible{

	opacity:1;

	visibility:visible;

}

.yts-invisible{

	opacity:0;

	visibility:hidden;

}

/*==========================================================
=            Fullscreen                                  =
==========================================================*/

.yts-player:fullscreen{

	width:100vw;

	height:100vh;

	max-width:none;

	border-radius:0;

}

.yts-player:-webkit-full-screen{

	width:100vw;

	height:100vh;

	max-width:none;

	border-radius:0;

}

.yts-player:-moz-full-screen{

	width:100vw;

	height:100vh;

	max-width:none;

	border-radius:0;

}

.yts-player:-ms-fullscreen{

	width:100vw;

	height:100vh;

	max-width:none;

	border-radius:0;

}

.yts-player:fullscreen .yts-stage{

	height:100%;

	aspect-ratio:auto;

}

.yts-player:-webkit-full-screen .yts-stage{

	height:100%;

	aspect-ratio:auto;

}

/*==========================================================
=            Reduced Motion Overrides                    =
==========================================================*/

@media (prefers-reduced-motion: reduce) {

	.yts-poster-spinner svg {
		animation:none;
	}

	.yts-poster-spinner .yts-spinner-head {
		stroke-dasharray:60 170;
	}

}

/*==========================================================
=            Responsive - Glass & Bar Adjustments        =
==========================================================*/

.yts-player{

	--yts-glass-top:13%;
	--yts-glass-bottom:11%;
	--yts-glass-top-touch:22%;
	--yts-glass-bottom-touch:18%;
	--yts-glass-overlap:8px;

	--yts-cinebar-height:8%;
	--yts-cinebar-top-offset:0px;
	--yts-cinebar-bottom-offset:0px;
	--yts-cinebar-opacity:0.85;

	--yts-player-radius:16px;

}

@media (max-width:1024px){

	.yts-player{

		--yts-glass-top:15%;
		--yts-glass-bottom:12%;
		--yts-glass-top-touch:24%;
		--yts-glass-bottom-touch:20%;
		--yts-glass-overlap:6px;

		--yts-cinebar-height:8.5%;
		--yts-cinebar-top-offset:-2px;
		--yts-cinebar-opacity:0.8;

		--yts-player-radius:12px;

	}

}

@media (max-width:768px){

	.yts-player{

		--yts-glass-top:17%;
		--yts-glass-bottom:14%;
		--yts-glass-top-touch:26%;
		--yts-glass-bottom-touch:22%;
		--yts-glass-overlap:6px;

		--yts-cinebar-height:9%;
		--yts-cinebar-top-offset:-3px;
		--yts-cinebar-bottom-offset:-2px;
		--yts-cinebar-opacity:0.75;

		--yts-player-radius:8px;

	}

}

@media (max-width:480px){

	.yts-player{

		--yts-glass-top:20%;
		--yts-glass-bottom:16%;
		--yts-glass-top-touch:30%;
		--yts-glass-bottom-touch:25%;
		--yts-glass-overlap:4px;

		--yts-cinebar-height:9.5%;
		--yts-cinebar-top-offset:-4px;
		--yts-cinebar-bottom-offset:-3px;
		--yts-cinebar-opacity:0.7;

		--yts-player-radius:0;

	}

}

@media (max-width:380px){

	.yts-player{

		--yts-glass-top:23%;
		--yts-glass-bottom:18%;
		--yts-glass-top-touch:33%;
		--yts-glass-bottom-touch:28%;
		--yts-glass-overlap:3px;

		--yts-cinebar-height:10%;
		--yts-cinebar-top-offset:-5px;
		--yts-cinebar-bottom-offset:-4px;
		--yts-cinebar-opacity:0.7;

	}

}

@media (orientation:portrait){

	.yts-player{

		--yts-glass-top:20%;
		--yts-glass-bottom:16%;
		--yts-glass-top-touch:30%;
		--yts-glass-bottom-touch:25%;
		--yts-glass-overlap:6px;

		--yts-cinebar-height:9.5%;
		--yts-cinebar-top-offset:-4px;
		--yts-cinebar-bottom-offset:-3px;
		--yts-cinebar-opacity:0.75;

	}

}

@media (orientation:landscape){

	.yts-player{

		--yts-glass-top:12%;
		--yts-glass-bottom:10%;
		--yts-glass-top-touch:20%;
		--yts-glass-bottom-touch:16%;
		--yts-glass-overlap:10px;

		--yts-cinebar-height:7.5%;
		--yts-cinebar-top-offset:0px;
		--yts-cinebar-bottom-offset:0px;
		--yts-cinebar-opacity:0.9;

	}

}

/*==========================================================
=            Print                                       =
==========================================================*/

@media print{

	.yts-player{

		display:none !important;

	}

}

/*==========================================================
=            BULLETPROOF GLASS - ALWAYS ACTIVE            =
=            CONSOLIDATED OVERRIDES                       =
==========================================================*/

/**
 * These rules OVERRIDE everything else.
 * The glass is ALWAYS:
 *   1. Transparent (no visual effect)
 *   2. Blocking all interactions to the iframe
 *   3. Never hiding or transitioning
 *   4. Feather-edged for invisibility
 */

/* ── CONSOLIDATED: Glass is ALWAYS active ── */
.yts-glass,
.yts-glass-top,
.yts-glass-bottom {
	pointer-events: auto !important;
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
	background: transparent !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	box-shadow: none !important;
	filter: none !important;
	outline: none !important;
	border: none !important;
	display: block !important;
	visibility: visible !important;
}

/* ── CONSOLIDATED: Cinebars always visible ── */
.yts-cinebar,
.yts-cinebar-top,
.yts-cinebar-bottom {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
	display: block !important;
	visibility: visible !important;
	box-shadow: none !important;
	filter: none !important;
	outline: none !important;
	border: none !important;
}

/* ── CONSOLIDATED: Iframe NEVER receives pointer events ── */
.yts-provider-stage iframe {
	pointer-events: none !important;
}

/* ── CONSOLIDATED: Glass always intercepts ── */
.yts-glass {
	pointer-events: auto !important;
	cursor: default !important;
}

/* ── Poster never blocks glass when hidden ── */
.yts-poster.is-hidden {
	pointer-events: none !important;
}

/* ── Stage allows clicks but iframe doesn't ── */
.yts-stage {
	pointer-events: auto !important;
}

/* ── Ensure glass covers everything ── */
.yts-glass-top {
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: calc(var(--yts-glass-top, 13%) + var(--yts-glass-overlap, 8px));
	z-index: var(--yts-z-glass, 3);
}

.yts-glass-bottom {
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: calc(var(--yts-glass-bottom, 11%) + var(--yts-glass-overlap, 8px));
	z-index: var(--yts-z-glass, 3);
}

/* ── Touch UI expansion ── */
.yts-player.yts-touch-ui .yts-glass-top {
	height: calc(var(--yts-glass-top-touch, 22%) + var(--yts-glass-overlap, 8px));
}

.yts-player.yts-touch-ui .yts-glass-bottom {
	height: calc(var(--yts-glass-bottom-touch, 18%) + var(--yts-glass-overlap, 8px));
}
/*==========================================================
=            Force Hide YouTube Captions                    =
==========================================================*/

/**
 * Nuclear CSS backup - hides YouTube's internal caption 
 * overlay elements if they somehow render.
 */

.ytp-caption-window-container,
.caption-window,
.ytp-caption-segment,
.ytp-caption-window {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ── Also hide any caption-related elements in the iframe ── */
.yts-provider-stage iframe .ytp-caption-window-container,
.yts-provider-stage iframe .caption-window {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}