/*
 * Fondos de la campaña de Halloween (26-10-2026, Joaquín: «los escenarios son muy cutres»).
 * Un fondo por mundo: 7 cementerio, 8 castillo, 9 ciudad gótica cyberpunk, 10 templo maldito. Solo se carga con el modo campaña.
 * Cada fondo tiene hasta 5 capas: el propio fondo (degradados), ::before, ::after y los <i> que crea el juego dentro del span.
 * Todo se anima con transform u opacity (nunca background-position) y solo corre en la zona visible.
 * Generado a partir de dibujos SVG propios; las capas scrollean en horizontal y enlazan sin salto.
 * 27-10-2026 (Joaquín: «muy detallados en un sitio y poco en otro»): suelos, muros y niebla a 1 píxel del dibujo = 1 píxel del juego
 * (--hcp-k = ancho de la pantalla / 160, lo pone el juego), el mismo tamaño de píxel que los sprites. Antes iban a 1,5 y 2 píxeles de pantalla.
 */
.hcp-hof-popup-pantalla[data-zona="7"] .hcp-hof-fondo.is-z7,
.hcp-hof-popup-pantalla[data-zona="8"] .hcp-hof-fondo.is-z8,
.hcp-hof-popup-pantalla[data-zona="9"] .hcp-hof-fondo.is-z9,
.hcp-hof-popup-pantalla[data-zona="10"] .hcp-hof-fondo.is-z10 {
	opacity: 1;
	animation-play-state: running;
}
.hcp-hof-fondo > i {
	position: absolute;
	display: block;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-play-state: inherit;
	pointer-events: none;
}
.hcp-hof-popup-pantalla[data-zona="7"] .hcp-hof-fondo.is-z7 > i,
.hcp-hof-popup-pantalla[data-zona="7"] .hcp-hof-fondo.is-z7::before,
.hcp-hof-popup-pantalla[data-zona="7"] .hcp-hof-fondo.is-z7::after,
.hcp-hof-popup-pantalla[data-zona="8"] .hcp-hof-fondo.is-z8 > i,
.hcp-hof-popup-pantalla[data-zona="8"] .hcp-hof-fondo.is-z8::before,
.hcp-hof-popup-pantalla[data-zona="8"] .hcp-hof-fondo.is-z8::after,
.hcp-hof-popup-pantalla[data-zona="9"] .hcp-hof-fondo.is-z9 > i,
.hcp-hof-popup-pantalla[data-zona="9"] .hcp-hof-fondo.is-z9::before,
.hcp-hof-popup-pantalla[data-zona="9"] .hcp-hof-fondo.is-z9::after,
.hcp-hof-popup-pantalla[data-zona="10"] .hcp-hof-fondo.is-z10 > i,
.hcp-hof-popup-pantalla[data-zona="10"] .hcp-hof-fondo.is-z10::before,
.hcp-hof-popup-pantalla[data-zona="10"] .hcp-hof-fondo.is-z10::after {
	will-change: transform, opacity;
}
/* 7 · Cementerio (27-10-2026, pixel art de Sprite Fusion): suelo que cambia con la fase (data-variante 1-3), copas de árbol vistas desde arriba a los lados (27-10-2026, hechas por código) y scroll vertical. */
.hcp-hof-fondo.is-z7 {
	background:
		radial-gradient(ellipse at 50% 100%, rgba(120, 60, 190, 0.25), transparent 65%),
		#08060e;
}
.hcp-hof-fondo.is-z7::before {
	left: 0; top: calc(-540px * var(--hcp-k, 2.25));
	width: 100%;
	height: calc(100% + 540px * var(--hcp-k, 2.25));
	background: url("campana/cementerio-suelo-1.png?v=20261027d") center top / calc(180px * var(--hcp-k, 2.25)) calc(540px * var(--hcp-k, 2.25)) repeat;
	image-rendering: pixelated;
	animation-name: hcp-c7-baja-suelo;
	animation-duration: 15.47s;
}
.hcp-hof-popup-pantalla[data-variante="2"] .hcp-hof-fondo.is-z7::before { background-image: url("campana/cementerio-suelo-2.png?v=20261027d"); }
.hcp-hof-popup-pantalla[data-variante="3"] .hcp-hof-fondo.is-z7::before { background-image: url("campana/cementerio-suelo-3.png?v=20261027d"); }
.hcp-hof-fondo.is-z7::after {
	left: 0; top: calc(-540px * var(--hcp-k, 2.25));
	width: 100%;
	height: calc(100% + 540px * var(--hcp-k, 2.25));
	background:
		url("campana/cementerio-arboles-izq.png?v=20261029a") left top / calc(40px * var(--hcp-k, 2.25)) calc(540px * var(--hcp-k, 2.25)) repeat-y,
		url("campana/cementerio-arboles-der.png?v=20261029a") right top / calc(40px * var(--hcp-k, 2.25)) calc(540px * var(--hcp-k, 2.25)) repeat-y;
	image-rendering: pixelated;
	animation-name: hcp-c7-baja;
	/* Más deprisa que el suelo (1,2 veces), como los muros del castillo: las copas están más cerca de la cámara. */
	animation-duration: 12.9s;
}
@keyframes hcp-c7-baja { to { transform: translateY(calc(540px * var(--hcp-k, 2.25))); } }
@keyframes hcp-c7-baja-suelo { to { transform: translateY(calc(540px * var(--hcp-k, 2.25))); } }
/* Banco de niebla que cruza el suelo más despacio que él (28-10-2026). */
.hcp-hof-fondo.is-z7 > i:nth-child(2) {
	left: 0; top: calc(-540px * var(--hcp-k, 2.25));
	width: 100%;
	height: calc(100% + 540px * var(--hcp-k, 2.25));
	background: url("campana/cementerio-niebla.png?v=20261027d") center top / calc(180px * var(--hcp-k, 2.25)) calc(540px * var(--hcp-k, 2.25)) repeat;
	animation-name: hcp-c7-baja;
	animation-duration: 36s;
}
.hcp-hof-fondo.is-z7 > i:nth-child(1) {
	inset: 0;
	background: radial-gradient(ellipse at 50% 88%, rgba(160, 90, 255, 0.22), transparent 60%);
	animation-name: hcp-c7-late;
	animation-duration: 3.6s;
	animation-direction: alternate;
}
@keyframes hcp-c7-late { from { opacity: 0.3; } to { opacity: 1; } }
.hcp-hof-fondo.is-z7 > i:nth-child(3) {
	inset: 0;
	background: radial-gradient(ellipse at 50% 35%, transparent 30%, rgba(0, 0, 0, 0.55) 100%);
}
/* 8 · Castillo (27-10-2026, pixel art de Sprite Fusion; muros vistos desde arriba, lote «muro-arriba» del 27-10): suelo que cambia con la fase (data-variante 1-3), muros a los lados y scroll vertical. */
.hcp-hof-fondo.is-z8 {
	background:
		radial-gradient(ellipse at 50% 100%, rgba(150, 30, 50, 0.28), transparent 65%),
		#0a0812;
}
.hcp-hof-fondo.is-z8::before {
	left: 0; top: calc(-540px * var(--hcp-k, 2.25));
	width: 100%;
	height: calc(100% + 540px * var(--hcp-k, 2.25));
	background: url("campana/castillo-suelo-1.png?v=20261027d") center top / calc(180px * var(--hcp-k, 2.25)) calc(540px * var(--hcp-k, 2.25)) repeat;
	image-rendering: pixelated;
	animation-name: hcp-c8-baja;
	animation-duration: 15.47s;
}
.hcp-hof-popup-pantalla[data-variante="2"] .hcp-hof-fondo.is-z8::before { background-image: url("campana/castillo-suelo-2.png?v=20261027d"); }
.hcp-hof-popup-pantalla[data-variante="3"] .hcp-hof-fondo.is-z8::before { background-image: url("campana/castillo-suelo-3.png?v=20261027d"); }
.hcp-hof-fondo.is-z8::after {
	left: 0; top: calc(-549px * var(--hcp-k, 2.25));
	width: 100%;
	height: calc(100% + 549px * var(--hcp-k, 2.25));
	background:
		url("campana/castillo-pared-izq.png?v=20261027c") left top / calc(35px * var(--hcp-k, 2.25)) calc(549px * var(--hcp-k, 2.25)) repeat-y,
		url("campana/castillo-pared-der.png?v=20261027c") right top / calc(35px * var(--hcp-k, 2.25)) calc(549px * var(--hcp-k, 2.25)) repeat-y;
	image-rendering: pixelated;
	animation-name: hcp-c8-baja-pared;
	/* Más deprisa que el suelo (27-10-2026): el muro está más alto, más cerca de la cámara (antes 23,47 s, más lento que el suelo). */
	animation-duration: 13.1s;
}
@keyframes hcp-c8-baja { to { transform: translateY(calc(540px * var(--hcp-k, 2.25))); } }
@keyframes hcp-c8-baja-pared { to { transform: translateY(calc(549px * var(--hcp-k, 2.25))); } }
.hcp-hof-fondo.is-z8 > i:nth-child(1) {
	inset: 0;
	background: radial-gradient(ellipse at 50% 88%, rgba(255, 60, 70, 0.2), transparent 60%);
	animation-name: hcp-c8-late;
	animation-duration: 3.6s;
	animation-direction: alternate;
}
@keyframes hcp-c8-late { from { opacity: 0.3; } to { opacity: 1; } }
.hcp-hof-fondo.is-z8 > i:nth-child(3) {
	inset: 0;
	background: radial-gradient(ellipse at 50% 35%, transparent 30%, rgba(0, 0, 0, 0.55) 100%);
}
/* 9 · Ciudad gótica cyberpunk de Halloween (27-10-2026, pixel art de Sprite Fusion; azoteas vistas desde arriba, lote «muro-arriba»): suelo que cambia con la fase (data-variante 1-3), muros a los lados y scroll vertical. */
.hcp-hof-fondo.is-z9 {
	background:
		radial-gradient(ellipse at 50% 100%, rgba(255, 60, 180, 0.22), transparent 65%),
		#0a0a12;
}
.hcp-hof-fondo.is-z9::before {
	left: 0; top: calc(-576px * var(--hcp-k, 2.25));
	width: 100%;
	height: calc(100% + 576px * var(--hcp-k, 2.25));
	background: url("campana/ciudad-suelo-1.png?v=20261027d") center top / calc(192px * var(--hcp-k, 2.25)) calc(576px * var(--hcp-k, 2.25)) repeat;
	image-rendering: pixelated;
	animation-name: hcp-c9-baja;
	animation-duration: 16.5s;
}
.hcp-hof-popup-pantalla[data-variante="2"] .hcp-hof-fondo.is-z9::before { background-image: url("campana/ciudad-suelo-2.png?v=20261027d"); }
.hcp-hof-popup-pantalla[data-variante="3"] .hcp-hof-fondo.is-z9::before { background-image: url("campana/ciudad-suelo-3.png?v=20261027d"); }
.hcp-hof-fondo.is-z9::after {
	left: 0; top: calc(-576px * var(--hcp-k, 2.25));
	width: 100%;
	height: calc(100% + 576px * var(--hcp-k, 2.25));
	background:
		url("campana/ciudad-pared-izq.png?v=20261027c") left top / calc(38px * var(--hcp-k, 2.25)) calc(576px * var(--hcp-k, 2.25)) repeat-y,
		url("campana/ciudad-pared-der.png?v=20261027c") right top / calc(38px * var(--hcp-k, 2.25)) calc(576px * var(--hcp-k, 2.25)) repeat-y;
	image-rendering: pixelated;
	animation-name: hcp-c9-baja-pared;
	/* Más deprisa que el suelo (27-10-2026): los tejados están más cerca de la cámara (antes 22 s). */
	animation-duration: 13.75s;
}
@keyframes hcp-c9-baja { to { transform: translateY(calc(576px * var(--hcp-k, 2.25))); } }
@keyframes hcp-c9-baja-pared { to { transform: translateY(calc(576px * var(--hcp-k, 2.25))); } }
.hcp-hof-fondo.is-z9 > i:nth-child(1) {
	inset: 0;
	background: radial-gradient(ellipse at 50% 88%, rgba(60, 220, 255, 0.2), transparent 60%);
	animation-name: hcp-c9-late;
	animation-duration: 3.6s;
	animation-direction: alternate;
}
@keyframes hcp-c9-late { from { opacity: 0.3; } to { opacity: 1; } }
.hcp-hof-fondo.is-z9 > i:nth-child(3) {
	inset: 0;
	background: radial-gradient(ellipse at 50% 35%, transparent 30%, rgba(0, 0, 0, 0.5) 100%);
}
/* 10 · Templo maldito (27-10-2026, Joaquín: oscuro, consumido por el mal y más pixel art). Losas y muros de piedra con grietas verdes
   generados con Sprite Fusion (assets/campana/templo-*.png), que bajan en scroll vertical. Sustituye al almacén.
   27-10-2026: suelo sin casillas (losas generadas con los colores de los tiles, sin la rejilla que se veía) y 3 tramos como los demás mundos. */
.hcp-hof-fondo.is-z10 {
	background:
		radial-gradient(ellipse at 50% 100%, rgba(40, 140, 90, 0.22), transparent 65%),
		#060a0d;
}
.hcp-hof-fondo.is-z10::before {
	left: 0; top: calc(-576px * var(--hcp-k, 2.25));
	width: 100%;
	height: calc(100% + 576px * var(--hcp-k, 2.25));
	background: url("campana/templo-suelo-1.png?v=20261027d") center top / calc(192px * var(--hcp-k, 2.25)) calc(576px * var(--hcp-k, 2.25)) repeat;
	image-rendering: pixelated;
	animation-name: hcp-c10-baja-suelo;
	animation-duration: 22s; /* 29-10-2026: velocidades intercambiadas con las columnas (antes 16,5 s): el suelo, más lejos, va más despacio */
}
.hcp-hof-popup-pantalla[data-variante="2"] .hcp-hof-fondo.is-z10::before { background-image: url("campana/templo-suelo-2.png?v=20261027d"); }
.hcp-hof-popup-pantalla[data-variante="3"] .hcp-hof-fondo.is-z10::before { background-image: url("campana/templo-suelo-3.png?v=20261027d"); }
.hcp-hof-fondo.is-z10::after {
	left: 0; top: calc(-576px * var(--hcp-k, 2.25));
	width: 100%;
	height: calc(100% + 576px * var(--hcp-k, 2.25));
	background:
		url("campana/templo-pared-izq.png?v=20261027d") left top / calc(32px * var(--hcp-k, 2.25)) calc(576px * var(--hcp-k, 2.25)) repeat-y,
		url("campana/templo-pared-der.png?v=20261027d") right top / calc(32px * var(--hcp-k, 2.25)) calc(576px * var(--hcp-k, 2.25)) repeat-y,
		/* Sombra de las columnas sobre el suelo (29-10-2026): franja que sale de cada una, debajo de sus dibujos. */
		linear-gradient(to right, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.35) 40%, transparent) left top / calc(54px * var(--hcp-k, 2.25)) 100% no-repeat,
		linear-gradient(to left, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.35) 40%, transparent) right top / calc(54px * var(--hcp-k, 2.25)) 100% no-repeat;
	image-rendering: pixelated;
	animation-name: hcp-c10-baja;
	animation-duration: 16.5s; /* 29-10-2026: más deprisa que el suelo (antes 22 s), como las copas del mundo 1: están más cerca de la cámara */
}
@keyframes hcp-c10-baja { to { transform: translateY(calc(576px * var(--hcp-k, 2.25))); } }
@keyframes hcp-c10-baja-suelo { to { transform: translateY(calc(576px * var(--hcp-k, 2.25))); } }
/* Resplandor verde enfermizo que respira y, encima, viñeta oscura que parpadea como una antorcha moribunda. */
.hcp-hof-fondo.is-z10 > i:nth-child(1) {
	inset: 0;
	background: radial-gradient(ellipse at 50% 90%, rgba(70, 255, 150, 0.2), transparent 60%);
	animation-name: hcp-c10-late;
	animation-duration: 3.4s;
	animation-direction: alternate;
}
@keyframes hcp-c10-late { from { opacity: 0.3; } to { opacity: 1; } }
.hcp-hof-fondo.is-z10 > i:nth-child(3) {
	inset: 0;
	background: radial-gradient(ellipse at 50% 35%, transparent 25%, rgba(0, 0, 0, 0.6) 100%);
	animation: hcp-c10-fallo 5s steps(1) infinite;
}
@keyframes hcp-c10-fallo { 0%, 60%, 64%, 70%, 100% { opacity: 1; } 62%, 68% { opacity: 0.4; } }
/* Solo para medir (/pwtest/?fondo=quieto) y para quien prefiere menos movimiento. */
.hcp-hof-fondo-quieto .hcp-hof-fondo > i { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
	.hcp-hof-fondo > i { animation: none !important; }
}