/**
 * PES Ultimate Countdown — Dark, bold tournament countdown
 * Uses Trade Winds (from theme) for display typography.
 * Mobile-first, fluid, responsive across all screens.
 */

/* -------------------------------------------------------------------------
   Design tokens (OKLCH, tinted neutrals per style guide)
   ------------------------------------------------------------------------- */
.pes-countdown {
	--pes-bg: oklch(14% 0.012 60);
	--pes-text-primary: oklch(98% 0.005 60);
	--pes-text-accent: oklch(78% 0.14 85);
	--pes-text-muted: oklch(68% 0.02 60);
	--pes-glow-gold: oklch(78% 0.14 85 / 0.35);
	--pes-fire-gold-soft: oklch(84% 0.11 87 / 0.26);
	--pes-fire-amber: oklch(78% 0.18 75 / 0.34);
	--pes-fire-orange: oklch(72% 0.2 55 / 0.26);
	--pes-fire-red: oklch(66% 0.2 35 / 0.16);
	--pes-separator: oklch(78% 0.1 85 / 0.2);
	--pes-font-display: "Trade Winds", cursive;
	--pes-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
	--pes-space-xs: 0.5rem;
	--pes-space-sm: 1rem;
	--pes-space-md: 1.5rem;
	--pes-space-lg: 2rem;
	--pes-space-xl: 3rem;
	--pes-space-2xl: 4rem;
}

/* -------------------------------------------------------------------------
   Base container
   ------------------------------------------------------------------------- */
.pes-countdown {
	background: transparent !important;
	color: var(--pes-text-primary);
	padding: clamp(var(--pes-space-lg), 5vw, var(--pes-space-2xl));
	min-height: 100%;
	box-sizing: border-box;
	position: relative;
	overflow: visible;
	isolation: isolate;
}

.pes-countdown__inner {
	max-width: 48rem;
	margin: 0 auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--pes-space-md);
	position: relative;
	z-index: 1;
}

/* -------------------------------------------------------------------------
   Title — Trade Winds, fluid scale
   ------------------------------------------------------------------------- */
.pes-countdown__title {
	margin: 0;
	font-family: var(--pes-font-display);
	font-weight: 700;
	font-style: italic;
	line-height: 1.1;
	letter-spacing: 0.02em;
	display: flex;
	flex-direction: column;
	gap: 0.1em;
}

.pes-countdown__title-line {
	display: inline-block;
}

.pes-countdown__title-line--1 {
	color: var(--pes-text-primary);
	font-size: clamp(1.75rem, 4vw + 1rem, 4.5rem);
	text-shadow:
		0 1px 0 oklch(0% 0 0 / 0.35),
		0 0 10px oklch(95% 0.01 60 / 0.06),
		0 0 16px var(--pes-fire-gold-soft);
	animation: pesFireGlowPulse 3.4s ease-in-out infinite;
	animation-delay: -1.1s;
}

.pes-countdown__title-line--2 {
	color: var(--pes-text-accent);
	font-size: clamp(2.25rem, 6vw + 1.25rem, 6rem);
	text-shadow:
		0 1px 0 oklch(0% 0 0 / 0.35),
		0 0 10px var(--pes-fire-gold-soft),
		0 0 22px var(--pes-fire-amber),
		0 0 36px var(--pes-fire-red);
	animation: pesFireGlowPulse 2.8s ease-in-out infinite, pesFireHaloDrift 3.6s ease-in-out infinite;
	animation-delay: -0.25s, -1.4s;
	will-change: text-shadow, transform;
}

/* -------------------------------------------------------------------------
   Subtitle
   ------------------------------------------------------------------------- */
.pes-countdown__subtitle {
	margin: 0;
	font-family: var(--pes-font-body);
	font-size: clamp(0.875rem, 2vw + 0.5rem, 1.5rem);
	color: var(--pes-text-muted);
	font-weight: 400;
	line-height: 1.4;
}

/* -------------------------------------------------------------------------
   Trophy icon — gold cup, always visible when enabled
   ------------------------------------------------------------------------- */
.pes-countdown__icon {
	color: var(--pes-text-accent);
	width: clamp(2rem, 5vw, 3rem);
	height: clamp(2rem, 5vw, 3rem);
	flex-shrink: 0;
}

.pes-countdown__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* -------------------------------------------------------------------------
   Countdown timer — responsive grid
   ------------------------------------------------------------------------- */
.pes-countdown__timer {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(var(--pes-space-sm), 3vw, var(--pes-space-xl));
	width: 100%;
	max-width: 36rem;
	margin: 0 auto;
}

.pes-countdown__unit {
	display: grid;
	grid-template-rows: auto auto;
	justify-items: center;
	align-items: end;
	gap: var(--pes-space-xs);
	position: relative;
}

.pes-countdown__value {
	font-family: var(--pes-font-display);
	font-weight: 700;
	font-style: italic;
	color: var(--pes-text-accent);
	font-size: clamp(1.75rem, 4vw + 1rem, 4.5rem);
	line-height: 1;
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
	text-shadow:
		0 1px 0 oklch(0% 0 0 / 0.4),
		0 0 9px var(--pes-fire-gold-soft),
		0 0 18px var(--pes-fire-amber),
		0 0 30px var(--pes-fire-red);
	animation: pesFireGlowPulse 3.1s ease-in-out infinite;
	animation-delay: -0.7s;
}

/* Keep glow present on mobile/tablet, but less intense than desktop. */
@media (max-width: 1023px) {
	.pes-countdown__title-line--1 {
		text-shadow:
			0 1px 0 oklch(0% 0 0 / 0.28),
			0 0 3px oklch(95% 0.01 60 / 0.02),
			0 0 6px oklch(84% 0.11 87 / 0.05);
		animation: pesFireGlowPulseSoft 4s ease-in-out infinite;
		animation-delay: -1.1s;
	}

	.pes-countdown__title-line--2 {
		text-shadow:
			0 1px 0 oklch(0% 0 0 / 0.3),
			0 0 3px oklch(84% 0.11 87 / 0.05),
			0 0 8px oklch(78% 0.18 75 / 0.06),
			0 0 12px oklch(66% 0.2 35 / 0.04);
		animation: pesFireGlowPulseSoft 3.2s ease-in-out infinite, pesFireHaloDrift 4s ease-in-out infinite;
		animation-delay: -0.25s, -1.4s;
	}

	.pes-countdown__value {
		text-shadow:
			0 1px 0 oklch(0% 0 0 / 0.32),
			0 0 3px oklch(84% 0.11 87 / 0.05),
			0 0 7px oklch(78% 0.18 75 / 0.06),
			0 0 10px oklch(66% 0.2 35 / 0.03);
		animation: pesFireGlowPulseSoft 3.6s ease-in-out infinite;
		animation-delay: -0.7s;
	}
}

/* Mobile-first type boost for better impact on small screens. */
@media (max-width: 767px) {
	.pes-countdown__title-line--1 {
		font-size: clamp(2.75rem, 10.8vw, 4rem);
	}

	.pes-countdown__title-line--2 {
		font-size: clamp(3.6rem, 15vw, 5.8rem);
	}

	.pes-countdown__subtitle {
		font-size: clamp(1.38rem, 5.4vw, 1.74rem);
	}

	.pes-countdown__value {
		font-size: clamp(3.35rem, 12.6vw, 5.15rem);
	}

	.pes-countdown__label {
		font-size: clamp(0.98rem, 3.84vw, 1.2rem);
	}
}

.pes-countdown__label {
	font-family: var(--pes-font-body);
	font-size: clamp(0.625rem, 1.5vw + 0.375rem, 1rem);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--pes-text-muted);
	opacity: 0.92;
}

/* -------------------------------------------------------------------------
   Expired state
   ------------------------------------------------------------------------- */
.pes-countdown__expired {
	margin: 0;
	font-family: var(--pes-font-display);
	font-size: clamp(1.5rem, 3vw + 0.75rem, 3.5rem);
	font-weight: 700;
	font-style: italic;
	color: var(--pes-text-accent);
}

.pes-countdown__expired[hidden] {
	display: none;
}

@keyframes pesFireGlowPulse {
	0% {
		text-shadow:
			0 2px 0 oklch(0% 0 0 / 0.5),
			0 0 12px var(--pes-fire-gold-soft),
			0 0 26px var(--pes-fire-amber),
			0 0 44px var(--pes-fire-red);
	}
	40% {
		text-shadow:
			0 2px 0 oklch(0% 0 0 / 0.5),
			0 0 14px var(--pes-fire-gold-soft),
			0 0 32px var(--pes-fire-amber),
			0 0 54px var(--pes-fire-orange);
	}
	75% {
		text-shadow:
			0 2px 0 oklch(0% 0 0 / 0.5),
			0 0 10px var(--pes-fire-gold-soft),
			0 0 22px var(--pes-fire-amber),
			0 0 36px var(--pes-fire-red);
	}
	100% {
		text-shadow:
			0 2px 0 oklch(0% 0 0 / 0.5),
			0 0 12px var(--pes-fire-gold-soft),
			0 0 26px var(--pes-fire-amber),
			0 0 44px var(--pes-fire-red);
	}
}

@keyframes pesFireHaloDrift {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-1px);
	}
	100% {
		transform: translateY(0);
	}
}

@keyframes pesFireGlowPulseSoft {
	0% {
		text-shadow:
			0 1px 0 oklch(0% 0 0 / 0.32),
			0 0 3px oklch(84% 0.11 87 / 0.05),
			0 0 7px oklch(78% 0.18 75 / 0.06),
			0 0 11px oklch(66% 0.2 35 / 0.03);
	}
	50% {
		text-shadow:
			0 1px 0 oklch(0% 0 0 / 0.32),
			0 0 4px oklch(84% 0.11 87 / 0.06),
			0 0 9px oklch(78% 0.18 75 / 0.07),
			0 0 14px oklch(66% 0.2 35 / 0.04);
	}
	100% {
		text-shadow:
			0 1px 0 oklch(0% 0 0 / 0.32),
			0 0 3px oklch(84% 0.11 87 / 0.05),
			0 0 7px oklch(78% 0.18 75 / 0.06),
			0 0 11px oklch(66% 0.2 35 / 0.03);
	}
}

/* -------------------------------------------------------------------------
   Responsive: narrow screens — stack countdown 2x2
   ------------------------------------------------------------------------- */
@media (max-width: 360px) {
	.pes-countdown__timer {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* -------------------------------------------------------------------------
   Tablet and up — ensure comfortable spacing
   ------------------------------------------------------------------------- */
@media (min-width: 640px) {
	.pes-countdown__inner {
		gap: var(--pes-space-lg);
		max-width: 64rem;
	}
	.pes-countdown__title-line--1 {
		font-size: clamp(2.5rem, 6vw + 1rem, 5.5rem);
	}
	.pes-countdown__title-line--2 {
		font-size: clamp(3.5rem, 8vw + 1.5rem, 7rem);
	}
	.pes-countdown__subtitle {
		font-size: 1.35rem;
	}
	.pes-countdown__icon {
		width: 2.5rem;
		height: 2.5rem;
	}
	.pes-countdown__timer {
		max-width: 52rem;
		gap: var(--pes-space-lg);
	}
	.pes-countdown__value {
		font-size: clamp(2.5rem, 6vw + 1rem, 5.5rem);
	}
	.pes-countdown__label {
		font-size: 1rem;
	}
}

@media (min-width: 1024px) {
	.pes-countdown {
		padding: clamp(var(--pes-space-xl), 8vw, 6rem);
		background: transparent !important;
	}
	.pes-countdown__inner {
		gap: clamp(1.6rem, 2.8vw, 2.8rem);
		max-width: 74rem;
	}
	/* Higher specificity + !important to survive aggressive theme overrides. */
	.pes-countdown .pes-countdown__title {
		gap: 0.03em;
	}
	.pes-countdown .pes-countdown__title-line--1 {
		font-size: clamp(3.6rem, 4.2vw, 5.7rem) !important;
		white-space: nowrap !important;
		text-shadow:
			0 2px 0 oklch(0% 0 0 / 0.35),
			0 0 18px oklch(95% 0.01 60 / 0.08),
			0 0 28px var(--pes-fire-gold-soft);
	}
	.pes-countdown .pes-countdown__title-line--2 {
		font-size: clamp(7rem, 7.8vw, 10.8rem) !important;
		white-space: nowrap !important;
		line-height: 0.92;
		text-shadow:
			0 2px 0 oklch(0% 0 0 / 0.45),
			0 0 14px var(--pes-fire-gold-soft),
			0 0 34px var(--pes-fire-amber),
			0 0 58px var(--pes-fire-red);
	}
	.pes-countdown .pes-countdown__subtitle {
		font-size: 2rem !important;
		letter-spacing: 0.01em;
		color: oklch(75% 0.018 60) !important;
	}
	.pes-countdown__icon {
		width: 4.5rem;
		height: 4.5rem;
		filter: drop-shadow(0 0 12px oklch(78% 0.14 85 / 0.2));
	}
	.pes-countdown__timer {
		max-width: 68rem;
		gap: clamp(1.5rem, 2.8vw, 3rem);
	}
	.pes-countdown .pes-countdown__value {
		font-size: clamp(3.9rem, 5.2vw, 6.6rem) !important;
		text-shadow:
			0 2px 0 oklch(0% 0 0 / 0.5),
			0 0 12px var(--pes-fire-gold-soft),
			0 0 26px var(--pes-fire-amber),
			0 0 44px var(--pes-fire-red);
	}
	.pes-countdown .pes-countdown__label {
		font-size: clamp(0.95rem, 1.05vw, 1.2rem) !important;
		letter-spacing: 0.11em;
		opacity: 0.9;
	}
	.pes-countdown .pes-countdown__expired {
		font-size: clamp(3rem, 4.2vw, 5rem) !important;
	}
	.pes-countdown .pes-countdown__unit:not(:last-child)::after {
		content: "";
		position: absolute;
		right: calc(-1 * clamp(0.75rem, 1.4vw, 1.5rem));
		top: 18%;
		width: 1px;
		height: 64%;
		background: linear-gradient(180deg, transparent, var(--pes-separator), transparent);
	}
}

/* Extra-large desktops — scale with viewport */
@media (min-width: 1440px) {
	.pes-countdown .pes-countdown__title-line--1 {
		font-size: clamp(4.8rem, 4.8vw, 6.8rem) !important;
	}
	.pes-countdown .pes-countdown__title-line--2 {
		font-size: clamp(8.2rem, 8.2vw, 12rem) !important;
	}
	.pes-countdown .pes-countdown__value {
		font-size: clamp(4.8rem, 5.2vw, 7.2rem) !important;
	}
	.pes-countdown .pes-countdown__subtitle {
		font-size: 2rem !important;
	}
	.pes-countdown__icon {
		width: 5rem;
		height: 5rem;
	}
}

/* -------------------------------------------------------------------------
   Reduced motion
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.pes-countdown * {
		animation: none !important;
		transition: none !important;
	}
}