/* DilloVerse countdown — [dilloverse_countdown]. Self-contained, dark theatre theme. */

.dv-countdown {
	--dv-cd-green: #39ff5a;
	--dv-cd-copper: #c98a4b;
	--dv-cd-dim: #97a297;
	--dv-cd-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

	font-family: var(--dv-cd-mono);
	text-align: center;
	padding: 2rem 1rem;
	box-sizing: border-box;
}
.dv-countdown * { box-sizing: border-box; }
.dv-countdown [hidden] { display: none !important; }

.dv-countdown-label {
	font-size: 0.7rem;
	letter-spacing: 0.32em;
	color: var(--dv-cd-copper);
	text-transform: uppercase;
	margin: 0 0 1.25rem;
}

.dv-countdown-grid {
	display: inline-flex;
	align-items: flex-start;
	gap: clamp(0.4rem, 2vw, 1rem);
}

.dv-cd-cell {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 2.4ch;
}

.dv-cd-value {
	display: block;
	font-size: clamp(2rem, 9vw, 3.5rem);
	font-weight: 600;
	line-height: 1;
	color: var(--dv-cd-green);
	text-shadow: 0 0 26px rgba(57, 255, 90, 0.3);
	font-variant-numeric: tabular-nums;
}
/* Digit change: a quick, quiet drop-in. JS retriggers the class per tick. */
.dv-cd-value.dv-tick { animation: dv-cd-tick 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes dv-cd-tick {
	from { opacity: 0.25; transform: translateY(-0.18em); }
	to { opacity: 1; transform: none; }
}

.dv-cd-unit {
	font-size: 0.62rem;
	letter-spacing: 0.28em;
	color: var(--dv-cd-dim);
	margin-top: 0.7rem;
	text-transform: uppercase;
}

.dv-cd-sep {
	font-size: clamp(1.6rem, 7vw, 2.8rem);
	line-height: 1.25;
	color: var(--dv-cd-dim);
	animation: dv-cd-blink 2s steps(1) infinite;
	user-select: none;
}
@keyframes dv-cd-blink { 50% { opacity: 0.25; } }

.dv-countdown-live {
	font-size: clamp(1.3rem, 6vw, 2rem);
	letter-spacing: 0.16em;
	color: var(--dv-cd-green);
	text-shadow: 0 0 26px rgba(57, 255, 90, 0.35);
	margin: 0;
	animation: dv-cd-live-in 0.8s ease-out;
}
@keyframes dv-cd-live-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.dv-countdown *,
	.dv-countdown *::before,
	.dv-countdown *::after {
		animation: none !important;
		transition: none !important;
	}
}