/* Cuenta atrás de Wired AdvenHTure en /wired/ (templates/countdown.php, launch.js). */

.hwg-launch {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin: 0 0 6px;
	padding: 34px 16px 18px;
	border-radius: 6px;
	background: #000 radial-gradient(ellipse at 50% 0%, rgba(40, 170, 220, 0.22), transparent 65%);
	color: #fff;
	text-align: center;
	isolation: isolate;
}

/* Rejilla del Laboratorio, muy tenue y quieta: moverla repintaba el panel en cada
   fotograma, lo que más gastaba de la página. */
.hwg-launch::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(rgba(60, 190, 240, 0.07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(60, 190, 240, 0.07) 1px, transparent 1px);
	background-size: 32px 32px;
	pointer-events: none;
}

/* Pixel art a su tamaño (600x205). Solo si no cabe se reduce, sin suavizar. */
.hwg-launch-logo {
	display: block;
	width: 600px;
	max-width: 100%;
	height: auto;
	image-rendering: pixelated;
	animation: hwg-launch-float 4s ease-in-out infinite;
}

@keyframes hwg-launch-float {
	50% { transform: translateY(-4px); }
}

.hwg-launch-wait,
.hwg-launch-open {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.hwg-launch [hidden] {
	display: none;
}

/* El tema justifica los párrafos. */
.hwg-launch p {
	text-align: center;
}

.hwg-launch-when {
	margin: 0;
	font-size: 1.05rem;
	font-weight: bold;
	text-shadow: 1px 1px 0 #000;
}

.hwg-launch-clock {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 4px;
}

/* Borde blanco y contorno negro, como las franjas de la web. */
.hwg-launch-unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 78px;
	padding: 8px 6px 6px;
	border: 2px solid #fff;
	border-radius: 6px;
	box-shadow: 0 0 0 2px #000, 0 6px 18px rgba(40, 170, 220, 0.25);
	background: linear-gradient(#0d3445, #071b25);
}

.hwg-launch-unit b {
	display: block;
	font-size: 2.4rem;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	text-shadow: 2px 2px 0 #000;
}

.hwg-launch-unit b.is-tick {
	animation: hwg-launch-tick .25s ease-out;
}

@keyframes hwg-launch-tick {
	from { transform: translateY(-3px); opacity: .6; }
}

.hwg-launch-unit span {
	margin-top: 4px;
	font-size: 0.72rem;
	font-weight: bold;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #9fd8ef;
}

/* El último minuto, en rojo. */
.hwg-launch.is-last-minute .hwg-launch-unit {
	background: linear-gradient(#4a1010, #250707);
	box-shadow: 0 0 0 2px #000, 0 6px 18px rgba(230, 60, 60, 0.35);
}

.hwg-launch.is-last-minute .hwg-launch-unit span {
	color: #ffb3b3;
}

.hwg-launch-play {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 26px;
	border: 2px solid #fff;
	border-radius: 6px;
	box-shadow: 0 0 0 2px #000;
	background: linear-gradient(#2fc552, #17932f);
	color: #fff !important;
	font-size: 1.25rem;
	font-weight: bold;
	text-decoration: none !important;
	text-shadow: 1px 1px 0 #000;
	animation: hwg-launch-pulse 1.6s ease-in-out infinite;
}

.hwg-launch-play:hover,
.hwg-launch-play:focus-visible {
	background: linear-gradient(#3fd862, #1ba336);
}

@keyframes hwg-launch-pulse {
	50% { box-shadow: 0 0 0 2px #000, 0 0 0 8px rgba(47, 197, 82, 0.35); }
}

/* Al llegar a cero con la página abierta: un destello. */
.hwg-launch.is-opening::after {
	content: '';
	position: absolute;
	inset: 0;
	background: #fff;
	pointer-events: none;
	animation: hwg-launch-flash .9s ease-out forwards;
}

.hwg-launch.is-opening .hwg-launch-open {
	animation: hwg-launch-in .6s ease-out .2s both;
}

@keyframes hwg-launch-flash {
	from { opacity: .85; }
	to { opacity: 0; }
}

@keyframes hwg-launch-in {
	from { opacity: 0; transform: scale(.9); }
}

.hwg-launch-teaser {
	max-width: 460px;
	margin: 0;
	font-size: 0.9rem;
	color: #c9e6f2;
}

/* El botón es el button-mini de la web. */
.hwg-launch-music {
	cursor: pointer;
}

@media (max-width: 520px) {
	.hwg-launch {
		padding: 22px 12px 14px;
	}

	.hwg-launch-clock {
		gap: 6px;
	}

	.hwg-launch-unit {
		min-width: 62px;
		padding: 6px 4px 5px;
	}

	.hwg-launch-unit b {
		font-size: 1.8rem;
	}

	.hwg-launch-unit span {
		font-size: 0.62rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hwg-launch-logo,
	.hwg-launch-play,
	.hwg-launch-unit b.is-tick {
		animation: none;
	}
}