/* Viaje por el sistema solar (05-11-2026): fondos de planetas y lunas (data-zona 11-25, los pone hall-of-fame-juego.js con s.planetas).

 * 11 espacio exterior, 12-24 planetas y lunas por orden, 25 Sol. 1 px de imagen = 1 px de juego (--hcp-k); el planeta se acerca con

 * --hcp-acerca (0..1). Solo transform: no repinta. */

.hcp-hof-fondo.is-z11 { background: #02020a; }

.hcp-hof-fondo.is-z11::before { left: 82%; top: 12%; width: calc(2px * var(--hcp-k, 2.25)); height: calc(2px * var(--hcp-k, 2.25)); background: #ffe600; box-shadow: 0 0 6px 2px #ff9a1f; }

.hcp-hof-popup-pantalla[data-salto] .hcp-hof-fondo.is-z11,
.hcp-hof-popup-pantalla[data-salto] .hcp-hof-fondo.is-z12,
.hcp-hof-popup-pantalla[data-salto] .hcp-hof-fondo.is-z13,
.hcp-hof-popup-pantalla[data-salto] .hcp-hof-fondo.is-z14,
.hcp-hof-popup-pantalla[data-salto] .hcp-hof-fondo.is-z15,
.hcp-hof-popup-pantalla[data-salto] .hcp-hof-fondo.is-z16,
.hcp-hof-popup-pantalla[data-salto] .hcp-hof-fondo.is-z17,
.hcp-hof-popup-pantalla[data-salto] .hcp-hof-fondo.is-z18,
.hcp-hof-popup-pantalla[data-salto] .hcp-hof-fondo.is-z19,
.hcp-hof-popup-pantalla[data-salto] .hcp-hof-fondo.is-z20,
.hcp-hof-popup-pantalla[data-salto] .hcp-hof-fondo.is-z21,
.hcp-hof-popup-pantalla[data-salto] .hcp-hof-fondo.is-z22,
.hcp-hof-popup-pantalla[data-salto] .hcp-hof-fondo.is-z23,
.hcp-hof-popup-pantalla[data-salto] .hcp-hof-fondo.is-z24,
.hcp-hof-popup-pantalla[data-salto] .hcp-hof-fondo.is-z25 {
	transition: opacity 0.15s ease; /* 05-11-2026: el cambio lo hace el salto al hiperespacio (destello), no un fundido de 4 s */
}

.hcp-hof-popup-pantalla[data-zona="11"] .hcp-hof-fondo.is-z11,
.hcp-hof-popup-pantalla[data-zona="12"] .hcp-hof-fondo.is-z12,
.hcp-hof-popup-pantalla[data-zona="13"] .hcp-hof-fondo.is-z13,
.hcp-hof-popup-pantalla[data-zona="14"] .hcp-hof-fondo.is-z14,
.hcp-hof-popup-pantalla[data-zona="15"] .hcp-hof-fondo.is-z15,
.hcp-hof-popup-pantalla[data-zona="16"] .hcp-hof-fondo.is-z16,
.hcp-hof-popup-pantalla[data-zona="17"] .hcp-hof-fondo.is-z17,
.hcp-hof-popup-pantalla[data-zona="18"] .hcp-hof-fondo.is-z18,
.hcp-hof-popup-pantalla[data-zona="19"] .hcp-hof-fondo.is-z19,
.hcp-hof-popup-pantalla[data-zona="20"] .hcp-hof-fondo.is-z20,
.hcp-hof-popup-pantalla[data-zona="21"] .hcp-hof-fondo.is-z21,
.hcp-hof-popup-pantalla[data-zona="22"] .hcp-hof-fondo.is-z22,
.hcp-hof-popup-pantalla[data-zona="23"] .hcp-hof-fondo.is-z23,
.hcp-hof-popup-pantalla[data-zona="24"] .hcp-hof-fondo.is-z24,
.hcp-hof-popup-pantalla[data-zona="25"] .hcp-hof-fondo.is-z25 {
	opacity: 1;
	animation-play-state: running;
}

/* Con el salto (data-salto, /pwtest/?salto=1): al llegar, el planeta entra desde pequeño hasta su sitio con un rebote (y luego se acerca con --hcp-acerca). */
.hcp-hof-popup-pantalla[data-salto][data-zona="12"] .hcp-hof-fondo.is-z12::before,
.hcp-hof-popup-pantalla[data-salto][data-zona="13"] .hcp-hof-fondo.is-z13::before,
.hcp-hof-popup-pantalla[data-salto][data-zona="14"] .hcp-hof-fondo.is-z14::before,
.hcp-hof-popup-pantalla[data-salto][data-zona="15"] .hcp-hof-fondo.is-z15::before,
.hcp-hof-popup-pantalla[data-salto][data-zona="16"] .hcp-hof-fondo.is-z16::before,
.hcp-hof-popup-pantalla[data-salto][data-zona="17"] .hcp-hof-fondo.is-z17::before,
.hcp-hof-popup-pantalla[data-salto][data-zona="18"] .hcp-hof-fondo.is-z18::before,
.hcp-hof-popup-pantalla[data-salto][data-zona="19"] .hcp-hof-fondo.is-z19::before,
.hcp-hof-popup-pantalla[data-salto][data-zona="20"] .hcp-hof-fondo.is-z20::before,
.hcp-hof-popup-pantalla[data-salto][data-zona="21"] .hcp-hof-fondo.is-z21::before,
.hcp-hof-popup-pantalla[data-salto][data-zona="22"] .hcp-hof-fondo.is-z22::before,
.hcp-hof-popup-pantalla[data-salto][data-zona="23"] .hcp-hof-fondo.is-z23::before,
.hcp-hof-popup-pantalla[data-salto][data-zona="24"] .hcp-hof-fondo.is-z24::before {
	animation: hcp-planeta-entra 0.9s cubic-bezier(0.3, 1.6, 0.5, 1) backwards;
}

.hcp-hof-popup-pantalla[data-salto][data-zona="25"] .hcp-hof-fondo.is-z25::before {
	animation: hcp-sol-entra 1.2s cubic-bezier(0.3, 1.4, 0.5, 1) backwards;
}

@keyframes hcp-planeta-entra {
	from { transform: translate(-50%, -50%) scale(0.05); }
}

@keyframes hcp-sol-entra {
	from { transform: translate(-50%, -120%); }
}

.hcp-hof-fondo.is-z12 { background: #0c0a10; }

.hcp-hof-fondo.is-z12::before {
	left: 62%; top: 28%;
	width: calc(34px * var(--hcp-k, 2.25)); height: calc(34px * var(--hcp-k, 2.25));
	background: url("planetas/pluton.png?v=20261105b") center / 100% 100% no-repeat;
	image-rendering: pixelated;
	transform: translate(-50%, -50%) scale(calc(0.45 + 0.55 * var(--hcp-acerca, 0)));
	transition: transform 1s linear;
}

.hcp-hof-fondo.is-z13 { background: #040820; }

.hcp-hof-fondo.is-z13::before {
	left: 62%; top: 28%;
	width: calc(64px * var(--hcp-k, 2.25)); height: calc(64px * var(--hcp-k, 2.25));
	background: url("planetas/neptuno.png?v=20261105b") center / 100% 100% no-repeat;
	image-rendering: pixelated;
	transform: translate(-50%, -50%) scale(calc(0.45 + 0.55 * var(--hcp-acerca, 0)));
	transition: transform 1s linear;
}

.hcp-hof-fondo.is-z14 { background: #0c0810; }

.hcp-hof-fondo.is-z14::before {
	left: 62%; top: 28%;
	width: calc(36px * var(--hcp-k, 2.25)); height: calc(36px * var(--hcp-k, 2.25));
	background: url("planetas/triton.png?v=20261105b") center / 100% 100% no-repeat;
	image-rendering: pixelated;
	transform: translate(-50%, -50%) scale(calc(0.45 + 0.55 * var(--hcp-acerca, 0)));
	transition: transform 1s linear;
}

.hcp-hof-fondo.is-z15 { background: #04141a; }

.hcp-hof-fondo.is-z15::before {
	left: 62%; top: 28%;
	width: calc(60px * var(--hcp-k, 2.25)); height: calc(60px * var(--hcp-k, 2.25));
	background: url("planetas/urano.png?v=20261105b") center / 100% 100% no-repeat;
	image-rendering: pixelated;
	transform: translate(-50%, -50%) scale(calc(0.45 + 0.55 * var(--hcp-acerca, 0)));
	transition: transform 1s linear;
}

.hcp-hof-fondo.is-z16 { background: #0e0a04; }

.hcp-hof-fondo.is-z16::before {
	left: 62%; top: 28%;
	width: calc(150px * var(--hcp-k, 2.25)); height: calc(96px * var(--hcp-k, 2.25));
	background: url("planetas/saturno.png?v=20261105b") center / 100% 100% no-repeat;
	image-rendering: pixelated;
	transform: translate(-50%, -50%) scale(calc(0.45 + 0.55 * var(--hcp-acerca, 0)));
	transition: transform 1s linear;
}

.hcp-hof-fondo.is-z17 { background: #120a02; }

.hcp-hof-fondo.is-z17::before {
	left: 62%; top: 28%;
	width: calc(44px * var(--hcp-k, 2.25)); height: calc(44px * var(--hcp-k, 2.25));
	background: url("planetas/titan.png?v=20261105b") center / 100% 100% no-repeat;
	image-rendering: pixelated;
	transform: translate(-50%, -50%) scale(calc(0.45 + 0.55 * var(--hcp-acerca, 0)));
	transition: transform 1s linear;
}

.hcp-hof-fondo.is-z18 { background: #120a04; }

.hcp-hof-fondo.is-z18::before {
	left: 62%; top: 28%;
	width: calc(104px * var(--hcp-k, 2.25)); height: calc(104px * var(--hcp-k, 2.25));
	background: url("planetas/jupiter.png?v=20261105b") center / 100% 100% no-repeat;
	image-rendering: pixelated;
	transform: translate(-50%, -50%) scale(calc(0.45 + 0.55 * var(--hcp-acerca, 0)));
	transition: transform 1s linear;
}

.hcp-hof-fondo.is-z19 { background: #0a0a0e; }

.hcp-hof-fondo.is-z19::before {
	left: 62%; top: 28%;
	width: calc(38px * var(--hcp-k, 2.25)); height: calc(38px * var(--hcp-k, 2.25));
	background: url("planetas/europa.png?v=20261105b") center / 100% 100% no-repeat;
	image-rendering: pixelated;
	transform: translate(-50%, -50%) scale(calc(0.45 + 0.55 * var(--hcp-acerca, 0)));
	transition: transform 1s linear;
}

.hcp-hof-fondo.is-z20 { background: #140604; }

.hcp-hof-fondo.is-z20::before {
	left: 62%; top: 28%;
	width: calc(46px * var(--hcp-k, 2.25)); height: calc(46px * var(--hcp-k, 2.25));
	background: url("planetas/marte.png?v=20261105b") center / 100% 100% no-repeat;
	image-rendering: pixelated;
	transform: translate(-50%, -50%) scale(calc(0.45 + 0.55 * var(--hcp-acerca, 0)));
	transition: transform 1s linear;
}

.hcp-hof-fondo.is-z21 { background: #020818; }

.hcp-hof-fondo.is-z21::before {
	left: 62%; top: 28%;
	width: calc(80px * var(--hcp-k, 2.25)); height: calc(64px * var(--hcp-k, 2.25));
	background: url("planetas/tierra.png?v=20261105b") center / 100% 100% no-repeat;
	image-rendering: pixelated;
	transform: translate(-50%, -50%) scale(calc(0.45 + 0.55 * var(--hcp-acerca, 0)));
	transition: transform 1s linear;
}

.hcp-hof-fondo.is-z22 { background: #08080a; }

.hcp-hof-fondo.is-z22::before {
	left: 62%; top: 28%;
	width: calc(48px * var(--hcp-k, 2.25)); height: calc(48px * var(--hcp-k, 2.25));
	background: url("planetas/luna.png?v=20261105b") center / 100% 100% no-repeat;
	image-rendering: pixelated;
	transform: translate(-50%, -50%) scale(calc(0.45 + 0.55 * var(--hcp-acerca, 0)));
	transition: transform 1s linear;
}

.hcp-hof-fondo.is-z23 { background: #141004; }

.hcp-hof-fondo.is-z23::before {
	left: 62%; top: 28%;
	width: calc(54px * var(--hcp-k, 2.25)); height: calc(54px * var(--hcp-k, 2.25));
	background: url("planetas/venus.png?v=20261105b") center / 100% 100% no-repeat;
	image-rendering: pixelated;
	transform: translate(-50%, -50%) scale(calc(0.45 + 0.55 * var(--hcp-acerca, 0)));
	transition: transform 1s linear;
}

.hcp-hof-fondo.is-z24 { background: #0a0a0a; }

.hcp-hof-fondo.is-z24::before {
	left: 62%; top: 28%;
	width: calc(30px * var(--hcp-k, 2.25)); height: calc(30px * var(--hcp-k, 2.25));
	background: url("planetas/mercurio.png?v=20261105b") center / 100% 100% no-repeat;
	image-rendering: pixelated;
	transform: translate(-50%, -50%) scale(calc(0.45 + 0.55 * var(--hcp-acerca, 0)));
	transition: transform 1s linear;
}

.hcp-hof-fondo.is-z25 { background: radial-gradient(ellipse at 50% 0%, #4a0e02, #120200 70%); }

.hcp-hof-fondo.is-z25::before {
	left: 50%; top: 0;
	width: calc(300px * var(--hcp-k, 2.25)); height: calc(300px * var(--hcp-k, 2.25));
	background: url("planetas/sol.png?v=20261105b") center / 100% 100% no-repeat;
	image-rendering: pixelated;
	transform: translate(-50%, -70%);
}

/* Lunas con su planeta detrás (05-11-2026, Joaquín: «las lunas no tienen sentido si no se ve su planeta»): el planeta, grande y en
 * penumbra, asoma abajo a la izquierda; la luna (::before) queda por delante. */
.hcp-hof-fondo.is-z14::before { z-index: 1; }
.hcp-hof-fondo.is-z14::after {
	content: "";
	left: -38%;
	bottom: -22%;
	width: calc(64px * 2.4 * var(--hcp-k, 2.25));
	height: calc(64px * 2.4 * var(--hcp-k, 2.25));
	background: url("planetas/neptuno.png?v=20261105c") center / 100% 100% no-repeat;
	image-rendering: pixelated;
	filter: brightness(0.6) saturate(0.9);
	opacity: 0.85;
	z-index: 0;
	animation: none;
}
.hcp-hof-fondo.is-z17::before { z-index: 1; }
.hcp-hof-fondo.is-z17::after {
	content: "";
	left: -38%;
	bottom: -22%;
	width: calc(150px * 2.4 * var(--hcp-k, 2.25));
	height: calc(96px * 2.4 * var(--hcp-k, 2.25));
	background: url("planetas/saturno.png?v=20261105c") center / 100% 100% no-repeat;
	image-rendering: pixelated;
	filter: brightness(0.6) saturate(0.9);
	opacity: 0.85;
	z-index: 0;
	animation: none;
}
.hcp-hof-fondo.is-z19::before { z-index: 1; }
.hcp-hof-fondo.is-z19::after {
	content: "";
	left: -38%;
	bottom: -22%;
	width: calc(104px * 2.4 * var(--hcp-k, 2.25));
	height: calc(104px * 2.4 * var(--hcp-k, 2.25));
	background: url("planetas/jupiter.png?v=20261105c") center / 100% 100% no-repeat;
	image-rendering: pixelated;
	filter: brightness(0.6) saturate(0.9);
	opacity: 0.85;
	z-index: 0;
	animation: none;
}
.hcp-hof-fondo.is-z22::before { z-index: 1; }
.hcp-hof-fondo.is-z22::after {
	content: "";
	left: -38%;
	bottom: -22%;
	width: calc(80px * 2.4 * var(--hcp-k, 2.25));
	height: calc(64px * 2.4 * var(--hcp-k, 2.25));
	background: url("planetas/tierra.png?v=20261105c") center / 100% 100% no-repeat;
	image-rendering: pixelated;
	filter: brightness(0.6) saturate(0.9);
	opacity: 0.85;
	z-index: 0;
	animation: none;
}