.vde-events {
	--vde-bg: #131017;
	--vde-surface: #17121c;
	--vde-card: #8875e6;
	--vde-card-dark: #6f66b8;
	--vde-acid: #b3d94a;
	--vde-text: #fff9f3;
	--vde-muted: #c8bec9;
	--vde-line: rgba(200, 190, 201, 0.16);
	box-sizing: border-box;
	width: 100%;
	color: var(--vde-text);
	font-family: "Open Sans", Arial, sans-serif;
}

.vde-events *,
.vde-events *::before,
.vde-events *::after {
	box-sizing: border-box;
}

.vde-schedule {
	max-height: 625px;
	overflow-x: hidden;
	overflow-y: auto;
	border: 1px solid var(--vde-line);
	border-radius: 14px;
	background: var(--vde-bg);
	box-shadow: 0 18px 55px rgba(0, 0, 0, 0.18);
	overscroll-behavior: contain;
	scrollbar-color: var(--vde-card) var(--vde-surface);
	scrollbar-width: thin;
}

.vde-schedule::-webkit-scrollbar {
	width: 8px;
}

.vde-schedule::-webkit-scrollbar-track {
	background: var(--vde-surface);
}

.vde-schedule::-webkit-scrollbar-thumb {
	border: 2px solid var(--vde-surface);
	border-radius: 999px;
	background: var(--vde-card);
}

/* ---------------------------------------------------------------
   Month banners.

   Each month carries its own colour pair and its own SVG motif so the
   schedule reads as a seasonal calendar instead of twelve identical
   bars. The motif markup is produced by VenomDolls_Events_Month_Art;
   only colour and opacity are decided here, which keeps the whole set
   tunable from one place.
   --------------------------------------------------------------- */
.vde-month {
	position: sticky;
	z-index: 2;
	top: 0;
	display: flex;
	height: 104px;
	padding: 0 22px;
	align-items: center;
	overflow: hidden;
	color: var(--vde-text);

	/* Fallback pair. Every month below overrides these two. */
	--vde-m1: #1f5e63;
	--vde-m2: #8875e6;

	background: linear-gradient(118deg, var(--vde-m1), var(--vde-m2));
}

.vde-month::before {
	position: absolute;
	inset: 0;
	content: "";
	pointer-events: none;
	background:
		radial-gradient(circle at 16% 132%, rgba(255, 249, 243, 0.20), transparent 46%),
		radial-gradient(circle at 84% -40%, rgba(5, 3, 7, 0.30), transparent 54%);
}

/* A film of grain keeps the gradient from reading as flat vector fill.
   Sits above the artwork but below the label. */
.vde-month::after {
	position: absolute;
	z-index: 1;
	inset: 0;
	content: "";
	opacity: 0.42;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.09'/%3E%3C/svg%3E");
	background-repeat: repeat;
	background-size: 160px 160px;
}

.vde-month span {
	position: relative;
	z-index: 2;
	font-size: clamp(23px, 3vw, 28px);
	font-weight: 400;
	letter-spacing: 0.01em;
	text-shadow: 0 2px 12px rgba(5, 3, 7, 0.45);
}

/* The motif sits against the right edge and never intercepts clicks. */
.vde-month__art {
	position: absolute;
	z-index: 1;
	inset: 0;
	width: 100%;
	height: 100%;
	color: var(--vde-text);
	pointer-events: none;
}

/* Scene detail spread across the banner, well behind the label. */
.vde-month__art-ambient {
	fill: currentColor;
	opacity: 0.09;
}

.vde-month__art-ambient-line {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	opacity: 0.10;
}

/* Secondary shapes: distant bats, small blooms, drifting moths. */
.vde-month__art-mid {
	fill: currentColor;
	opacity: 0.17;
}

.vde-month__art-back {
	fill: currentColor;
	opacity: 0.10;
}

.vde-month__art-fore {
	fill: currentColor;
	opacity: 0.30;
}

.vde-month__art-dots {
	fill: currentColor;
	opacity: 0.42;
}

/* Cut-outs read as holes punched in the silhouette - pumpkin faces,
   eye sockets - so they darken rather than lighten. */
.vde-month__art-cut {
	fill: rgba(5, 3, 7, 0.42);
}

.vde-month__art-eye {
	fill: rgba(5, 3, 7, 0.45);
}

.vde-month__art-pupil {
	fill: currentColor;
	opacity: 0.75;
}

.vde-month__art-stitch {
	fill: none;
	stroke: currentColor;
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: 0.42;
}

/* --- the twelve -------------------------------------------------- */
.vde-month--01 { --vde-m1: #24506e; --vde-m2: #5793b4; } /* frost      */
.vde-month--02 { --vde-m1: #6f1c38; --vde-m2: #b2405f; } /* heart      */
.vde-month--03 { --vde-m1: #2c5733; --vde-m2: #5f8c39; } /* toadstools */
.vde-month--04 { --vde-m1: #35505d; --vde-m2: #628a9a; } /* rain       */
.vde-month--05 { --vde-m1: #472c69; --vde-m2: #8f63b6; } /* bloom      */
.vde-month--06 { --vde-m1: #12505a; --vde-m2: #2b9299; } /* jellyfish  */
.vde-month--07 { --vde-m1: #8a3a12; --vde-m2: #d3792c; } /* melt       */
.vde-month--08 { --vde-m1: #5b2740; --vde-m2: #a85a6d; } /* moth       */
.vde-month--09 { --vde-m1: #67390f; --vde-m2: #b8862c; } /* web        */
.vde-month--10 { --vde-m1: #78270c; --vde-m2: #d2661c; } /* pumpkin    */
.vde-month--11 { --vde-m1: #3c2a24; --vde-m2: #7b5847; } /* bones      */
.vde-month--12 { --vde-m1: #212e5b; --vde-m2: #52649b; } /* antlers    */

@media (prefers-reduced-motion: no-preference) {
	.vde-month__art {
		transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
	}

	.vde-month:hover .vde-month__art {
		transform: translateX(-6px) scale(1.03);
	}
}

.vde-day {
	display: grid;
	padding: 16px 18px 16px 14px;
	grid-template-columns: 58px minmax(0, 1fr);
	gap: 10px;
	border-bottom: 1px solid rgba(200, 190, 201, 0.09);
}

.vde-day:last-child {
	border-bottom: 0;
}

.vde-day__rail {
	padding-top: 6px;
	text-align: center;
	line-height: 1.1;
}

.vde-day__rail small {
	display: block;
	color: var(--vde-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.vde-day__rail b {
	display: block;
	margin-top: 3px;
	color: var(--vde-text);
	font-size: 27px;
	font-weight: 300;
}

.vde-day__events {
	display: grid;
	min-width: 0;
	gap: 8px;
}

/* A generated Friday drop. It repeats every week, so it is deliberately
   quiet: no card, no fill, smaller rail, muted text. It should register as
   a rhythm behind the real appearances rather than compete with them. */
.vde-day--drop {
	padding-top: 9px;
	padding-bottom: 9px;
}

.vde-day--drop .vde-day__rail {
	padding-top: 1px;
	opacity: 0.6;
}

.vde-day--drop .vde-day__rail small {
	font-size: 9px;
}

.vde-day--drop .vde-day__rail b {
	margin-top: 1px;
	font-size: 17px;
}

.vde-drop {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 4px 0;
	color: var(--vde-muted);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.01em;
}

/* A small tick of the drop colour, so the line still reads as a drop
   without carrying a full acid-green panel. */
.vde-drop::before {
	width: 6px;
	height: 6px;
	flex: none;
	border-radius: 50%;
	background: var(--vde-acid);
	content: "";
	opacity: 0.75;
}

/* A named drop reads as one of the weekly lines - same size, same muted
   label - with the release name picked out in the drop colour after it. */
.vde-drop--special {
	flex-wrap: wrap;
	text-decoration: none;
}

.vde-drop--special strong {
	color: var(--vde-acid);
	font-weight: 700;
}

.vde-drop__summary {
	flex-basis: 100%;
	padding-left: 14px;
	color: var(--vde-muted);
	font-size: 12px;
	font-weight: 500;
}

a.vde-drop--special:hover strong,
a.vde-drop--special:focus-visible strong {
	text-decoration: underline;
}

.vde-card {
	position: relative;
	display: block;
	min-width: 0;
	padding: 11px 15px;
	overflow: hidden;
	border: 0;
	border-radius: 9px;
	background: var(--vde-card);
	color: #14101d;
	text-decoration: none;
	transition: transform 160ms ease;
}

a.vde-card:hover,
a.vde-card:focus-visible {
	transform: translateX(2px);
}

a.vde-card:focus-visible {
	outline: 2px solid var(--vde-text);
	outline-offset: 2px;
}

.vde-card--appearance {
	background: var(--vde-acid);
}

.vde-card--social {
	background: var(--vde-card-dark);
	color: #f4f1ff;
}

.vde-card--featured {
	background: #2d2337;
	color: var(--vde-text);
}

.vde-card--image {
	min-height: 104px;
	padding: 0;
	background:
		linear-gradient(0deg, rgba(5, 3, 7, 0.94), rgba(5, 3, 7, 0.08)),
		var(--vde-event-image) center / cover no-repeat;
	color: var(--vde-text);
}

.vde-card--image::before {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(5, 3, 7, 0.22), transparent 58%),
		linear-gradient(0deg, rgba(5, 3, 7, 0.9), rgba(5, 3, 7, 0.08) 72%);
	content: "";
}

.vde-card--image .vde-card__content {
	display: flex;
	min-height: 104px;
	padding: 16px;
	flex-direction: column;
	justify-content: flex-end;
}

.vde-card__content {
	position: relative;
	z-index: 1;
	display: block;
	min-width: 0;
}

.vde-card__title {
	display: block;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
}

.vde-card__meta,
.vde-card__summary,
.vde-card__link,
.vde-card__draft-label {
	display: block;
}

.vde-card__meta {
	margin-top: 3px;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.4;
	opacity: 0.74;
}

.vde-card__summary {
	margin-top: 6px;
	font-size: 12.5px;
	line-height: 1.45;
	opacity: 0.88;
}

.vde-card__link {
	margin-top: 9px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.vde-card__draft-label {
	margin-bottom: 6px;
	color: currentColor;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.1em;
	opacity: 0.72;
	text-transform: uppercase;
}

.vde-card--image .vde-card__meta,
.vde-card--image .vde-card__summary {
	color: #e6deea;
	opacity: 0.92;
}

.vde-card--image .vde-card__link {
	color: var(--vde-acid);
}

.vde-card--draft {
	outline: 1px dashed rgba(255, 249, 243, 0.5);
	outline-offset: -4px;
}

.vde-events__empty {
	padding: 26px;
	border: 1px solid var(--vde-line);
	border-radius: 14px;
	background: var(--vde-surface);
	color: var(--vde-muted);
	font-size: 14px;
	line-height: 1.6;
	text-align: center;
}

@media (max-width: 640px) {
	.vde-schedule {
		max-height: 743px;
	}

	.vde-month {
		height: 84px;
		padding: 0 18px;
	}

	/* Keep the motif from crowding the month name on narrow screens. */
	.vde-month__art {
		/* Crop harder to the hero shape when the banner is short. */
		object-position: right center;
	}

	.vde-day {
		padding: 14px 12px 14px 8px;
		grid-template-columns: 50px minmax(0, 1fr);
		gap: 8px;
	}

	.vde-day__rail b {
		font-size: 24px;
	}

	.vde-card {
		padding: 11px 13px;
	}

	.vde-card--image,
	.vde-card--image .vde-card__content {
		min-height: 96px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vde-card {
		transition: none;
	}
}