.vcp, .vcp * { box-sizing: border-box; }
.vcp { position: relative; width: 100%; max-width: 100%; -webkit-user-select: none; user-select: none; }
.vcp img { -webkit-user-drag: none; }
.vcp button { font: inherit; }

/* ---- Track ---- */
.vcp-viewport { overflow: hidden; padding: 10px 0; margin: -10px 0; touch-action: pan-y; }
.vcp-track { display: flex; gap: var(--vcp-gap, 20px); transition: transform var(--vcp-speed, 600ms) cubic-bezier(.22,.61,.36,1); will-change: transform; }
.vcp-track.is-drag { transition: none; }
.vcp-slide { flex: 0 0 calc((100% - (var(--vcp-cols, 3) - 1) * var(--vcp-gap, 20px)) / var(--vcp-cols, 3)); min-width: 0; }

/* ---- Card ---- */
.vcp-card {
	position: relative; display: flex; flex-direction: column; isolation: isolate;
	container-type: inline-size;
	aspect-ratio: var(--vcp-aspect, 9/16);
	background: #15171a; overflow: hidden;
	border: var(--vcp-bw, 1px) solid var(--vcp-border, #5aa3d0);
	border-radius: var(--vcp-radius, 24px);
}
.vcp--shadow .vcp-card { box-shadow: 0 14px 34px rgba(10, 25, 40, .22); }
.vcp-stage { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; cursor: pointer; }
.vcp-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; border: 0; background: #15171a; }
.vcp-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 4; background: #000; }
.vcp-native .vcp-stage { cursor: default; }

/* ---- Overlays ---- */
.vcp-shade, .vcp-logo, .vcp-caption { transition: opacity .3s ease; }
.vcp-shade { position: absolute; inset: 0; pointer-events: none; }
.vcp--shade .vcp-shade { background: linear-gradient(to bottom, rgba(0,0,0,.72) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 48%, rgba(0,0,0,.88) 100%); }
.vcp-logo { position: absolute; top: 6%; left: 0; right: 0; text-align: center; pointer-events: none; }
.vcp-logo img { height: var(--vcp-logo-h, 40px); width: auto; max-width: 70%; display: inline-block; }
.vcp-caption {
	position: absolute; left: 0; right: 0; padding: 0 6%; text-align: center; pointer-events: none;
	color: var(--vcp-capc, #fff); font-weight: 800; line-height: 1.22; letter-spacing: -.005em;
	font-size: 22px; font-size: calc(var(--vcp-cap, 7.5) * 1cqw);
	text-shadow: 0 2px 10px rgba(0,0,0,.45);
}
.vcp-caption em { font-style: normal; color: var(--vcp-hl, #5aa3d0); }
.vcp--cap-bottom .vcp-caption { bottom: 0; padding-bottom: 5%; }
.vcp--cap-top .vcp-caption { top: 18%; }
.vcp--cap-center .vcp-caption { top: 50%; transform: translateY(-50%); }
.vcp-card.is-started .vcp-shade,
.vcp-card.is-started .vcp-logo,
.vcp-card.is-started .vcp-caption { opacity: 0; }

/* ---- Big play button ---- */
.vcp-play {
	position: absolute; top: 50%; left: 50%; z-index: 3;
	width: var(--vcp-ps, 80px); height: var(--vcp-ps, 80px); max-width: 40cqw; max-height: 40cqw;
	margin: 0; padding: 0; display: grid; place-items: center; cursor: pointer;
	color: var(--vcp-pc, #fff); background: none; border: 0; border-radius: 50%;
	transform: translate(-50%, -50%); transition: opacity .25s ease, transform .25s ease, background .2s ease;
}
.vcp-play svg { width: 44%; height: 44%; fill: currentColor; margin-left: 5%; }
.vcp-play:hover { transform: translate(-50%, -50%) scale(1.06); }
.vcp--play-outline .vcp-play { border: 4px solid var(--vcp-pc, #fff); background: rgba(255,255,255,.14); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.vcp--play-filled .vcp-play { background: var(--vcp-pc, #fff); color: #111; box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.vcp--play-square .vcp-play { border-radius: 24%; background: var(--vcp-pc, #fff); color: #111; box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.vcp--play-minimal .vcp-play svg { width: 70%; height: 70%; filter: drop-shadow(0 2px 8px rgba(0,0,0,.5)); }
.vcp-card.is-playing .vcp-play,
.vcp-card.has-frame .vcp-play { opacity: 0; pointer-events: none; }
.vcp-card.has-frame .vcp-play { display: none; }
.vcp-nothumb .vcp-stage { background: linear-gradient(160deg, #2a3138, #101316); }

/* ---- Custom control bar ---- */
.vcp-bar {
	--vcp-sm: 0px;
	position: relative; z-index: 5; flex: 0 0 auto; display: flex; flex-direction: column;
	background: var(--vcp-cbg, #222); color: var(--vcp-cc, #fff);
	font: 600 12px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-variant-numeric: tabular-nums;
	transition: opacity .25s ease, transform .25s ease;
}
.vcp-b-row { display: flex; align-items: center; gap: 4px; height: clamp(36px, 11cqw, 46px); padding: 0 8px; }
.vcp-b-time { margin: 0 auto 0 4px; white-space: nowrap; opacity: .92; }
.vcp-bar .vcp-b { flex: 0 0 auto; width: 32px; height: 32px; padding: 5px; margin: 0; display: grid; place-items: center; background: none; border: 0; border-radius: 50%; color: inherit; cursor: pointer; transition: background .15s ease; }
.vcp-bar .vcp-b svg { width: 100%; height: 100%; fill: currentColor; }
.vcp-bar .vcp-b:hover { background: rgba(255,255,255,.16); }
.vcp-bar .vcp-b-speed { width: auto; min-width: 36px; padding: 0 8px; border-radius: 16px; font-size: 12px; font-weight: 700; }
.vcp-bar .i-pause, .vcp-bar .i-mute, .vcp-bar .i-fsx { display: none; }
.vcp-card.is-playing .vcp-bar .i-play { display: none; }
.vcp-card.is-playing .vcp-bar .i-pause { display: block; }
.vcp-card.is-muted .vcp-bar .i-vol { display: none; }
.vcp-card.is-muted .vcp-bar .i-mute { display: block; }
.vcp-card.is-fs .vcp-bar .i-fs { display: none; }
.vcp-card.is-fs .vcp-bar .i-fsx { display: block; }

/* Progress line */
.vcp-seek {
	--p: 0%; display: block; flex: none; box-sizing: content-box;
	width: calc(100% - var(--vcp-sm) * 2); height: var(--vcp-th, 4px); margin: 0 var(--vcp-sm); padding: 6px 0; border: 0; border-radius: 0;
	cursor: pointer; -webkit-appearance: none; appearance: none; outline: none;
	background: linear-gradient(to right, var(--vcp-ca, #5aa3d0) var(--p), rgba(255,255,255,.3) var(--p));
	background-clip: content-box; -webkit-background-clip: content-box;
}
.vcp-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 0; height: 0; border: 0; border-radius: 50%; background: var(--vcp-ca, #5aa3d0); }
.vcp-seek::-moz-range-thumb { width: 0; height: 0; border: 0; border-radius: 50%; background: var(--vcp-ca, #5aa3d0); }
.vcp-seek::-moz-range-track { background: transparent; }
.vcp-seek:hover::-webkit-slider-thumb, .vcp-seek:active::-webkit-slider-thumb, .vcp-seek:focus-visible::-webkit-slider-thumb { width: 14px; height: 14px; }
.vcp-seek:hover::-moz-range-thumb, .vcp-seek:active::-moz-range-thumb, .vcp-seek:focus-visible::-moz-range-thumb { width: 14px; height: 14px; }
.vcp-bar button:focus-visible, .vcp-arrow:focus-visible, .vcp-play:focus-visible, .vcp-dots button:focus-visible, .vcp-seek:focus-visible { outline: 2px solid var(--vcp-ca, #5aa3d0); outline-offset: 2px; }

/* Style: gradient overlay (progress sits at the very bottom, like Reels / YouTube) */
.vcp--ctl-gradient .vcp-bar { --vcp-sm: 12px; position: absolute; left: 0; right: 0; bottom: 0; flex-direction: column-reverse; padding-top: 22px; color: #fff; background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,.4) 55%, rgba(0,0,0,0)); }
.vcp--ctl-gradient .vcp-seek { padding-top: 4px; padding-bottom: 10px; }

/* Style: floating glass pill */
.vcp--ctl-glass .vcp-bar { --vcp-sm: 14px; position: absolute; left: 10px; right: 10px; bottom: 10px; padding-top: 6px; border-radius: 20px; overflow: hidden; border: 1px solid rgba(255,255,255,.16);
	background: rgba(18,20,24,.55); background: color-mix(in srgb, var(--vcp-cbg, #222) 58%, transparent);
	-webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); box-shadow: 0 8px 24px rgba(0,0,0,.28); }
.vcp--ctl-glass .vcp-b-row { height: clamp(34px, 10cqw, 42px); padding-bottom: 2px; }

/* Style: minimal (icons + thin line) */
.vcp--ctl-minimal .vcp-bar { position: absolute; left: 0; right: 0; bottom: 0; flex-direction: column-reverse; padding-top: 14px; color: #fff; background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0)); }
.vcp--ctl-minimal .vcp-seek { padding: 2px 0 0; }
.vcp--ctl-minimal .vcp-b-time, .vcp--ctl-minimal .vcp-b-speed { display: none; }
.vcp--ctl-minimal .vcp-b-play { margin-right: auto; }
.vcp--ctl-minimal .vcp-b-row { height: 36px; }

/* Overlay styles: hidden until the video starts, and again when idle */
.vcp--ctl-gradient .vcp-bar, .vcp--ctl-glass .vcp-bar, .vcp--ctl-minimal .vcp-bar { opacity: 0; pointer-events: none; transform: translateY(6px); }
.vcp--ctl-gradient .vcp-card.is-started:not(.is-idle) .vcp-bar,
.vcp--ctl-glass .vcp-card.is-started:not(.is-idle) .vcp-bar,
.vcp--ctl-minimal .vcp-card.is-started:not(.is-idle) .vcp-bar { opacity: 1; pointer-events: auto; transform: none; }
.vcp-card.is-idle.is-playing .vcp-stage { cursor: none; }

/* ---- Fullscreen: keep the real video shape (reels stay 9:16), never crop ---- */
.vcp-card:fullscreen { width: 100%; height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; background: #000; }
.vcp-card:-webkit-full-screen { width: 100%; height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; background: #000; }
.vcp-card:fullscreen .vcp-media { object-fit: contain; background: #000; }
.vcp-card:-webkit-full-screen .vcp-media { object-fit: contain; background: #000; }
video.vcp-media:fullscreen { object-fit: contain; background: #000; }
video.vcp-media:-webkit-full-screen { object-fit: contain; background: #000; }
.vcp-card.is-fs .vcp-b-row { height: 52px; padding: 0 16px; }

/* ---- Arrows ---- */
.vcp-nav { display: flex; justify-content: center; gap: 18px; margin-top: 24px; }
.vcp-arrow {
	width: var(--vcp-as, 46px); height: var(--vcp-as, 46px); margin: 0; padding: 0; display: grid; place-items: center; cursor: pointer;
	background: var(--vcp-abg, #5aa3d0); color: var(--vcp-ac, #fff); border: 0; border-radius: 50%;
	transition: transform .2s ease, opacity .2s ease, filter .2s ease;
}
.vcp-arrow svg { width: 55%; height: 55%; }
.vcp-arrow:hover:not(:disabled) { transform: scale(1.07); filter: brightness(1.06); }
.vcp-arrow:disabled { opacity: .35; cursor: default; }
.vcp--arrow-square .vcp-arrow { border-radius: 28%; }
.vcp--arrow-minimal .vcp-arrow { background: none; color: var(--vcp-abg, #5aa3d0); }
.vcp--arrow-minimal .vcp-arrow svg { width: 80%; height: 80%; }
.vcp--arrows-sides .vcp-nav { position: absolute; top: 50%; left: 8px; right: 8px; margin: 0; transform: translateY(-50%); justify-content: space-between; pointer-events: none; z-index: 6; }
.vcp--arrows-sides .vcp-arrow { pointer-events: auto; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.vcp--arrows-sides.vcp--arrow-minimal .vcp-arrow { box-shadow: none; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.vcp.vcp-static .vcp-nav, .vcp.vcp-static .vcp-dots { display: none; }

/* ---- Dots ---- */
.vcp-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.vcp-dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: var(--vcp-dot, #c9d6df); cursor: pointer; transition: transform .2s ease, background .2s ease; }
.vcp-dots button.is-active { background: var(--vcp-dota, #5aa3d0); transform: scale(1.35); }

@media (prefers-reduced-motion: reduce) {
	.vcp-track, .vcp-play, .vcp-arrow, .vcp-shade, .vcp-logo, .vcp-caption { transition: none; }
}