/* YouTube Tug of War — frontend styles
   Override any of these custom properties from Elementor's Custom CSS or your theme. */
.ytw-tug {
	--ytw-a: #f0544a;        /* Video A colour */
	--ytw-b: #4d86ff;        /* Video B colour */
	--ytw-rope: #b98a3e;     /* Rope colour    */
	--ytw-track: #2a2b31;    /* Dark surface   */
	--ytw-text: #e8e8ec;     /* Light text     */
	--ytw-title: #B7A60D;    /* Title colour   */
	--ytw-line: rgba(255, 255, 255, 0.18);
	--ytw-offset: 0;         /* -1 .. 1, set by PHP/JS (positive = A winning) */

	font-family: inherit;
	color: var(--ytw-text);
	width: 100%;
	max-width: 720px;
	margin: 0 auto;
}

.ytw-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 14px;
}
.ytw-side { display: flex; flex-direction: column; gap: 2px; }
.ytw-side--b { text-align: right; }
.ytw-side__name {
	font-family: 'DM Serif Display', Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: 1.1rem;
	line-height: 1.15;
	color: var(--ytw-title);
}
.ytw-side--a .ytw-side__score { color: var(--ytw-a); }
.ytw-side--b .ytw-side__score { color: var(--ytw-b); }
.ytw-side__score { font-size: 2rem; font-weight: 800; line-height: 1; }

/* Arena */
.ytw-arena {
	position: relative;
	height: 70px;
	background: var(--ytw-track);
	border-radius: 999px;
	box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.12);
	overflow: hidden;
}

/* End posts */
.ytw-post {
	position: absolute;
	top: 50%;
	width: 8px;
	height: 44px;
	border-radius: 4px;
	transform: translateY(-50%);
}
.ytw-post--a { left: 10px; background: var(--ytw-a); }
.ytw-post--b { right: 10px; background: var(--ytw-b); }

/* Centre reference line */
.ytw-centerline {
	position: absolute;
	left: 50%;
	top: 8px;
	bottom: 8px;
	width: 2px;
	background: var(--ytw-line);
	transform: translateX(-50%);
}

/* The rope — a twisted texture running across the arena */
.ytw-rope {
	position: absolute;
	left: 18px;
	right: 18px;
	top: 50%;
	height: 10px;
	transform: translateY(-50%);
	border-radius: 6px;
	background:
		repeating-linear-gradient(
			-45deg,
			var(--ytw-rope) 0,
			var(--ytw-rope) 6px,
			color-mix(in srgb, var(--ytw-rope) 70%, #000) 6px,
			color-mix(in srgb, var(--ytw-rope) 70%, #000) 12px
		);
}

/* The knot — slides toward the winner. Positive offset = A (left). */
.ytw-knot {
	position: absolute;
	top: 50%;
	left: calc(50% - (var(--ytw-offset) * 42%));
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #fff;
	border: 4px solid var(--ytw-rope);
	transform: translate(-50%, -50%);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	transition: left 0.9s cubic-bezier(0.34, 1.56, 0.64, 1); /* springy slide on update */
}

/* Stats line */
.ytw-stats {
	display: flex;
	justify-content: space-between;
	margin-top: 12px;
	font-size: 0.85rem;
	opacity: 0.8;
	gap: 16px;
}
.ytw-stats__col--b { text-align: right; }

.ytw-notice {
	padding: 14px 16px;
	border: 1px dashed rgba(255, 255, 255, 0.25);
	border-radius: 8px;
	color: rgba(232, 232, 236, 0.75);
	font-size: 0.9rem;
}

@media (max-width: 480px) {
	.ytw-side__score { font-size: 1.5rem; }
	.ytw-stats { display: none; }
}

/* ---- Countdown ---- */
.ytw-countdown {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-bottom: 16px;
}
.ytw-cd__seg {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 54px;
	padding: 8px 6px;
	background: var(--ytw-track);
	border-radius: 10px;
}
.ytw-cd__seg b {
	font-size: 1.6rem;
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.ytw-cd__seg i {
	font-style: normal;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	opacity: 0.6;
	margin-top: 4px;
}

/* ---- Winner banner ---- */
.ytw-banner {
	text-align: center;
	font-size: 1.1rem;
	font-weight: 800;
	padding: 10px 16px;
	margin-bottom: 16px;
	border-radius: 10px;
	background: #1d9e75;
	color: #fff;
}

/* ---- End state highlighting ---- */
.ytw-tug.is-ended .ytw-knot {
	border-color: #1d9e75;
}
.ytw-side--winner .ytw-side__name { font-size: 1.35rem; text-shadow: 0 0 14px rgba(183, 166, 13, 0.45); }
.ytw-side--winner .ytw-side__score::after {
	content: " \2605"; /* star */
	font-size: 0.7em;
	vertical-align: super;
}
.ytw-side--loser { opacity: 0.45; }
.ytw-tug.is-ended .ytw-post--a,
.ytw-tug.is-ended .ytw-post--b { opacity: 0.4; }
.ytw-tug.is-winner-a .ytw-post--a { opacity: 1; }
.ytw-tug.is-winner-b .ytw-post--b { opacity: 1; }

@media (max-width: 480px) {
	.ytw-cd__seg { min-width: 44px; }
	.ytw-cd__seg b { font-size: 1.3rem; }
}