@keyframes explosiva {
	0% {
		transform: scale(0.1);
		filter: brightness(400%) blur(10px);
		opacity: 0;
	}

	70% {
		transform: scale(1.15);
		filter: brightness(150%) blur(2px);
		opacity: 1;
	}

	100% {
		transform: scale(1);
		filter: brightness(100%);
		opacity: 1;
	}
}

@keyframes explosiva-grande {
	0% {
		transform: scale(0.1);
		filter: brightness(400%) blur(10px);
		opacity: 0;
	}

	70% {
		transform: scale(1.50);
		filter: brightness(150%) blur(2px);
		opacity: 1;
	}

	100% {
		transform: scale(1.35);
		filter: brightness(100%);
		opacity: 1;
	}
}

@keyframes neonFloat {

	0%,
	100% {
		text-shadow: 0 0 5px #ff1053, 0 0 15px #ff1053, 0 0 30px #ff1053;
		transform: translateY(0px);
	}

	50% {
		text-shadow: 0 0 15px #ff1053, 0 0 30px #ff1053, 0 0 50px #ff1053;
		transform: translateY(-5px);
	}
}

@keyframes relampago {

	0%,
	90%,
	100% {
		opacity: 0;
	}

	91% {
		opacity: 1;
		stroke: #39ff14;
	}

	93% {
		opacity: 0;
	}

	94% {
		opacity: 1;
		stroke: #ffffff;
	}

	97% {
		opacity: 0;
	}
}

#intro,
#home {
	border: none !important;
	top: 48% !important;
	overflow: visible !important;	/* Permite que Paquetes, logo y fuego desborden el marco */
	box-shadow:
		0 0 30px rgba(57, 255, 20, 0.6),
		0 0 80px rgba(157, 0, 255, 0.6),
		inset 0 0 30px rgba(57, 255, 20, 0.5),
		inset 0 0 80px rgba(157, 0, 255, 0.4) !important;
}

/* MARCO NEÓN HÍBRIDO PROCEDURAL (CSS MASK WIZARDRY) */
#intro-neon-border,
#home-neon-border,
#home .iglu-brand-footer {
	position: absolute;
	bottom: 25px;
	left: 0;
	width: 100%;
	text-align: center;
	color: #ffffff;
	font-size: 14px;
	text-decoration: none;
	opacity: 0.6;
	letter-spacing: 2px;
	z-index: 20;
}

/* TOUCH ARCADE JOYSTICK */
#joystick-arcade {
	position: absolute;
	bottom: -150px;
	left: 50%;
	transform: translateX(-50%);
	width: 260px;
	height: 260px;
	z-index: 100;
	display: grid;
	grid-template-columns: 80px 80px 80px;
	grid-template-rows: 80px 80px 80px;
	gap: 10px;
}

.joy-btn {
	background: rgba(30, 30, 40, 0.7);
	border: 2px solid var(--neon-secondary);
	border-radius: 15px;
	border-bottom: 6px solid var(--neon-secondary);
	box-shadow: 0 0 15px rgba(255,16,83,0.3), inset 0 0 20px rgba(255,255,255,0.1);
	outline: none;
	position: relative;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}
.joy-btn:active, .joy-btn.active {
	transform: translateY(4px);
	border-bottom: 2px solid var(--neon-secondary);
	box-shadow: 0 0 35px var(--neon-secondary), inset 0 0 30px var(--neon-secondary);
	background: rgba(255,16,83, 0.4);
}

.btn-up { grid-column: 2; grid-row: 1; border-top-left-radius: 30px; border-top-right-radius: 30px; }
.btn-down { grid-column: 2; grid-row: 3; border-bottom-left-radius: 30px; border-bottom-right-radius: 30px; }
.btn-left { grid-column: 1; grid-row: 2; border-top-left-radius: 30px; border-bottom-left-radius: 30px; }
.btn-right { grid-column: 3; grid-row: 2; border-top-right-radius: 30px; border-bottom-right-radius: 30px; }
.joy-center { grid-column: 2; grid-row: 2; background: radial-gradient(circle, rgba(255,16,83,0.2) 0%, transparent 60%); border-radius: 50%; }

.joy-btn::after {
	content: '';
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	border: solid rgba(255, 255, 255, 0.8);
	border-width: 0 6px 6px 0;
	display: inline-block;
	padding: 10px;
}
.btn-up::after { transform: translate(-50%, -30%) rotate(-135deg); }
.btn-down::after { transform: translate(-50%, -70%) rotate(45deg); }
.btn-left::after { transform: translate(-30%, -50%) rotate(135deg); }
.btn-right::after { transform: translate(-70%, -50%) rotate(-45deg); }

#intro-neon-border,
#home-neon-border,
#panel-neon-border {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 20px;
	border: 8px solid transparent;
	pointer-events: none;
	z-index: 5;				/* Bajo el canvas de rayos (z-10) */
	background: linear-gradient(135deg, #39ff14 0%, #39ff14 45%, #9d00ff 55%, #9d00ff 100%) border-box;
	-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: destination-out;
	mask-composite: exclude;
	filter: drop-shadow(0 0 15px #39ff14) drop-shadow(0 0 35px #39ff14) drop-shadow(0 0 50px #9d00ff) drop-shadow(0 0 80px #9d00ff);
}

/* CANVAS LIGHTNING ENGINE: absoluto dentro de #home */
/* z-index: 10 → sobre el marco neón (z-5), bajo el contenido (z-20) */
#canvas-lightning-full {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: 10;
	mix-blend-mode: screen;
}

/* Contenido interior de #home y #panel: siempre encima del canvas de rayos */
#home-doritos-logo,
#canvas-home-title-pacman,
#presentation,
#trailer,
#trailer-container,
#message {
	position: relative;
	z-index: 20;
}

#canvas-board {
	filter: drop-shadow(0 0 8px #39ff14) drop-shadow(0 0 15px rgba(57, 255, 20, 0.4));
	transition: filter 0.05s ease-out; /* Flash transition */
}

/* ============================================================ */
/* EFECTOS EXPLOSIVOS (Thunder Flash & Shockwaves)              */
/* ============================================================ */

/* Destello hiperluminoso sincronizado con relámpagos (home.js) */
#home-neon-border {
	transition: filter 0.05s ease-out, background 0.05s ease-out;
}
#panel-neon-border {
	transition: filter 0.05s ease-out, background 0.05s ease-out;
}

#home-neon-border.thunder-flash,
#panel-neon-border.thunder-flash {
	filter: drop-shadow(0 0 40px #fff) drop-shadow(0 0 70px #39ff14) drop-shadow(0 0 100px #9d00ff) drop-shadow(0 0 150px #9d00ff) !important;
	background: linear-gradient(135deg, #fff 0%, #39ff14 45%, #9d00ff 55%, #fff 100%) border-box !important;
}

#canvas-board.thunder-flash {
	filter: drop-shadow(0 0 20px #fff) drop-shadow(0 0 35px rgba(57, 255, 20, 0.9)) !important;
}

/* Onda expansiva procedural generada durante la presentación de fantasmas */
.shockwave {
	position: absolute;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: 6px solid #fff;
	transform: translate(-50%, -50%) scale(0.1);
	opacity: 1;
	z-index: 15;
	pointer-events: none;
	animation: shockwaveAnim 0.7s cubic-bezier(0.1, 0.8, 0.2, 1) forwards;
}
@keyframes shockwaveAnim {
	0%   { transform: translate(-50%, -50%) scale(0.1); opacity: 1.0; border-width: 15px; }
	60%  { transform: translate(-50%, -50%) scale(3.5); opacity: 0.8; border-width: 3px;  }
	100% { transform: translate(-50%, -50%) scale(6.0); opacity: 0.0; border-width: 0px;  }
}

/* ============================================================ */

.lightning-strike {
	fill: none;
	stroke: #ffffff;
	stroke-width: 4;
	filter: drop-shadow(0 0 10px #39ff14) drop-shadow(0 0 20px #39ff14) drop-shadow(0 0 35px #9d00ff);
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: 0;
}

.lightning-strike.fast {
	animation: relampago 3s infinite;
}

.lightning-strike.medium {
	animation: relampago 4s infinite 1.2s;
}

.lightning-strike.slow {
	animation: relampago 5s infinite 2.5s;
}

.lightning-strike.flash {
	animation: relampago 1.5s infinite 0.1s;
}

.lightning-strike.hyper {
	animation: relampago 0.8s infinite 0.4s;
}

.lightning-strike.pulse {
	animation: relampago 2.2s infinite 1.8s;
}

/* Contenido interior de #home: siempre sobre el canvas de rayos */
#home-doritos-logo,
#canvas-home-title-pacman,
#presentation,
#trailer,
#message {
	position: relative;
	z-index: 20;
}

#home h1,
#panel h1 {
	text-align: center;
	font-size: 58px;
	white-space: nowrap;
	animation: explosiva 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, neonFloat 3s ease-in-out infinite alternate;
	animation-delay: 0s, 0.8s;
	/* Start float after explosion */
	filter: url(#heat-haze);
}

#panel h1 {
	margin-top: 30px;
}

#home h1 {
	margin-top: 200px;
	/* Acercado al centro superior para ceder espacio inferior al inmenso grid 2x2 */
}

#home-doritos-logo {
	position: absolute;
	top: 30px;
	left: 0;
	right: 0;
	margin: auto;
	width: 240px;
	animation: explosiva 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, neonFloat 3s ease-in-out infinite alternate;
	animation-delay: 0.2s, 1.0s;
	filter: url(#heat-haze);
	opacity: 0;
	z-index: 10;
}

#home h3 {
	position: absolute;
	margin: auto;
	left: 0px;
	right: 0px;
	bottom: 15px;
	text-align: center;
}

#home h3 em {
	font-size: inherit;
	font-style: inherit;
	color: #ff1053;
	text-shadow: 0 0 10px #ff1053;
}

#canvas-home-title-pacman {
	display: none;
}

#canvas-panel-title-pacman {
	display: none;
}

#presentation {
	position: absolute;
	margin: auto;
	padding: 0px;
	left: 0px;
	right: 0px;
	top: 290px;			/* Un poco más arriba para compensar el tamaño mayor */
	width: 520px;
	height: 510px;
	overflow: visible;	/* Permite que las fireballs desborden hacia arriba sin cortarse */
	animation: explosiva 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
	animation-delay: 0.4s;
	opacity: 0;
	animation-fill-mode: forwards;
}

#home-h2-play {
	position: absolute;
	bottom: 15px;
	/* Justo apoyado sobre la línea del borde de neón inferior */
	width: 100%;
	text-align: center;

	/* Tipografía calcada de la referencia */
	font-family: "Impact", "Arial Black", sans-serif;
	font-size: 42px;
	letter-spacing: 3px;
	font-weight: 900;
	font-style: italic;

	/* Estilo "Hollow / Hueco" (sólo contorno) */
	color: transparent;
	-webkit-text-stroke: 2px #4adecb;

	/* El Resplandor Neon Cyan */
	text-shadow:
		0 0 12px rgba(74, 222, 203, 1),
		0 0 25px rgba(74, 222, 203, 0.6),
		0 0 35px rgba(74, 222, 203, 0.3);

	animation: neonFloat 2s ease-in-out infinite alternate;
}

#canvas-presentation-blinky,
#canvas-presentation-pinky,
#canvas-presentation-inky,
#canvas-presentation-clyde {
	position: absolute;
	width: 240px;			/* Ampliado desde 160px para no recortar bordes de partículas */
	height: 240px;
	background: transparent;
	z-index: 5;				/* DETRÁS del PNG (z-20) */
	pointer-events: none;
	mix-blend-mode: screen;	/* Fuego aditivo sobre el PNG */
}

/* Offset -45px para centrar canvas 240px exacto sobre PNG 150px ((240-150)/2 = 45px) */
#canvas-presentation-blinky {
	top: -45px;
	left: -5px;				/* 40 - 45 = -5 */
}

#canvas-presentation-pinky {
	top: -45px;
	left: 265px;			/* 310 - 45 = 265 */
}

#canvas-presentation-inky {
	top: 175px;				/* 220 - 45 = 175 */
	left: -5px;
}

#canvas-presentation-clyde {
	top: 175px;
	left: 265px;
}

/* FIREBALL HIGH-RES OVERLAYS LAYERED EFFECTS */

.fireball-layer {
	position: absolute;
	width: 150px;			/* Igual al canvas de fuego: círculo coincide exacto */
	height: 150px;
	object-fit: contain;
	pointer-events: none;
	z-index: 20;			/* ENCIMA del canvas de fuego (z-5): PNG visible, fuego asoma por detrás */
	opacity: 1;
}


#fireball-blinky {
	top: 0px;				/* Alineado exacto con canvas-presentation-blinky */
	left: 40px;
}

#fireball-pinky {
	top: 0px;
	left: 310px;
}

#fireball-inky {
	top: 220px;
	left: 40px;
}

#fireball-clyde {
	top: 220px;
	left: 310px;
}

@keyframes highResFirePulse {
	0% {
		transform: scale(0.93) rotate(-2deg);
		opacity: 0.8;
		filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.01)) url('#heat-haze');
	}

	100% {
		transform: scale(1.05) rotate(1deg);
		opacity: 1;
		filter: drop-shadow(0 0 25px rgba(0, 0, 0, 0.01)) url('#heat-haze');
	}
}

/* FIREBALL GEOMETRY FILTERS: Home Presentation */
#canvas-presentation-blinky {
	filter: drop-shadow(0 0 5px #ff1053);
}

#canvas-presentation-pinky {
	filter: drop-shadow(0 0 5px #0ab74f);
}

#canvas-presentation-inky {
	filter: drop-shadow(0 0 5px #ff3ff9);
}

#canvas-presentation-clyde {
	filter: drop-shadow(0 0 5px #ffffff);
}

/* FIREBALL GEOMETRY FILTERS: Home Trailer Cinematic */
#trailer-ghosts {
	filter: drop-shadow(0 0 8px #ff1053);
}

#presentation-character-blinky,
#presentation-character-pinky,
#presentation-character-inky,
#presentation-character-clyde,
#presentation-name-blinky,
#presentation-name-pinky,
#presentation-name-inky,
#presentation-name-clyde {
	position: absolute;
	width: 150px;
	height: 28px;
	text-align: center;
	letter-spacing: 2px;
}

#presentation-character-blinky,
#presentation-character-pinky,
#presentation-character-inky,
#presentation-character-clyde {
	font-size: 22px;
	font-weight: bold;
}

#presentation-name-blinky,
#presentation-name-pinky,
#presentation-name-inky,
#presentation-name-clyde {
	font-size: 16px;
	font-style: italic;
}

#presentation-character-blinky {
	top: 155px; /* Antes 180px */
	left: 40px;
	color: #dc2800;
	text-shadow: 0 0 10px #dc2800;
}

#presentation-name-blinky {
	top: 175px; /* Antes 205px */
	left: 40px;
	color: #dc2800;
	text-shadow: 0 0 10px #dc2800;
}

#presentation-character-pinky {
	top: 155px;
	left: 310px;
	color: #149614;
	text-shadow: 0 0 10px #149614;
}

#presentation-name-pinky {
	top: 175px;
	left: 310px;
	color: #149614;
	text-shadow: 0 0 10px #149614;
}

#presentation-character-inky {
	top: 370px; /* Antes 400px */
	left: 40px;
	color: #0082e6;
	text-shadow: 0 0 10px #0082e6;
}

#presentation-name-inky {
	top: 390px; /* Antes 425px */
	left: 40px;
	color: #0082e6;
	text-shadow: 0 0 10px #0082e6;
}

#presentation-character-clyde {
	top: 370px;
	left: 310px;
	color: #8228be;
	text-shadow: 0 0 10px #8228be;
}

#presentation-name-clyde {
	top: 390px;
	left: 310px;
	color: #8228be;
	text-shadow: 0 0 10px #8228be;
}

#trailer-container {
	position: absolute;
	top: 12px;             /* Borde de neón es de 12px, esto lo recorta exactamente por dentro */
	left: 12px;
	right: 12px;
	bottom: 12px;
	pointer-events: none;
	overflow: hidden;      /* Corta la animación antes de que toque la línea NEON */
	border-radius: 4px;    /* Radio interior acorde al exterior de 16px */
	z-index: 25;           /* Asegurar que pase sobre fondos */
}

#trailer {
	position: absolute;
	margin: auto;
	padding: 0px;
	left: 0px;
	right: 0px;
	bottom: 110px;         /* Animación levantada para que no pase sobre el texto (antes 80px) */
	/* Animación rodando justo por encima del cartel JUGAR */
	width: 350px;
	height: 150px;
	transform: scale(2);
	transform-origin: center bottom;
}

/* INTRO BUTTON & SCREENS */
.logo-top {
	position: absolute;
	top: 15px;
	left: 0;
	right: 0;
	margin: auto;
	width: 380px;
	animation: neonFloat 3s ease-in-out infinite alternate;
	z-index: 10;
}

.intro-button-pulse {
	position: absolute;
	top: 48%;				/* Subido de 55% para centrar mejor dentro del marco */
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(20, 20, 25, 0.85);
	border: 3px solid var(--neon-cyan, #4adecb);
	border-radius: 50px;
	padding: 18px 110px 18px 40px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	color: #fff;
	text-transform: uppercase;
	font-style: italic;
	font-weight: bold;
	font-size: 22px;
	letter-spacing: 2px;
	cursor: pointer;
	/* Glow más intenso para ser el elemento protagonista */
	box-shadow: 0 0 30px rgba(74, 222, 203, 0.8), 0 0 60px rgba(74, 222, 203, 0.4), inset 0 0 20px rgba(74, 222, 203, 0.3);
	text-shadow: 0 0 10px var(--neon-cyan, #4adecb), 0 0 25px var(--neon-cyan, #4adecb);
	outline: none;
	transition: all 0.2s ease-in-out;
	animation: btnPulse 2s infinite;
	z-index: 20;
}
.intro-button-pulse:active {
	transform: translate(-50%, -50%) scale(0.95);
	box-shadow: 0 0 50px rgba(74, 222, 203, 1), inset 0 0 25px rgba(74, 222, 203, 0.6);
}
.intro-button-pulse span {
	font-family: 'Obviously', sans-serif;
	font-style: italic;
	font-weight: bold;
}
.boca-icon {
	position: absolute;
	right: -55px;
	top: 50%;
	pointer-events: none;
	width: 160px;
	height: auto;
	filter: drop-shadow(0 0 10px #ffd23f) drop-shadow(0 0 25px #ff5e00);
	animation: bocaChomp 0.5s ease-in-out infinite alternate;
	will-change: transform;
	transform: translateZ(0);
}
@keyframes bocaChomp {
	0%   { transform: translateY(-50%) scale(1)    rotate(-10deg); }
	100% { transform: translateY(-50%) scale(1.15) rotate(10deg);  }
}
@keyframes btnPulse {
	0% { box-shadow: 0 0 0 0 rgba(74, 222, 203, 0.8); }
	70% { box-shadow: 0 0 0 35px rgba(74, 222, 203, 0); }
	100% { box-shadow: 0 0 0 0 rgba(74, 222, 203, 0); }
}

/* ── PAQUETES EXPLOSIVO ── */
#intro-paquetes-wrap {
	position: absolute;
	bottom: 30px;			/* Subido de -60px para quedar dentro del marco */
	left: 50%;
	transform: translateX(-50%);
	width: 420px;
	height: 420px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1100;
	pointer-events: none;
	overflow: visible;
}
#intro-paquetes {
	position: relative;
	width: 380px;
	height: auto;
	z-index: 2;
	opacity: 0.75;
	animation:
		paquetesExplode  0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards,
		neonFloat        3s ease-in-out infinite alternate 0.6s;
	transform-origin: center center;
}
/* Entrada explosiva */
@keyframes paquetesExplode {
	0%   { transform: scale(0.05); opacity: 0; filter: brightness(600%) blur(12px); }
	65%  { transform: scale(1.25); opacity: 1; filter: brightness(180%) blur(2px); }
	100% { transform: scale(1);    opacity: 1; filter: brightness(100%); }
}
/* Rotación lenta continua */
@keyframes paquetesSpin {
	from { transform: scale(1) rotate(0deg); }
	to   { transform: scale(1) rotate(360deg); }
}
/* Pulso de escala */
@keyframes paquetesPulse {
	0%   { transform: scale(1)    rotate(var(--r, 0deg)); }
	100% { transform: scale(1.12) rotate(var(--r, 0deg)); }
}
/* Cambio de color del fire glow */
@keyframes paquetesFire {
	0%   { filter: drop-shadow(0 0 15px #ff5e00) drop-shadow(0 0 35px #ff1053) drop-shadow(0 0 60px #ffd23f); }
	33%  { filter: drop-shadow(0 0 25px #ffd23f) drop-shadow(0 0 50px #ff5e00) drop-shadow(0 0 80px #ff1053); }
	66%  { filter: drop-shadow(0 0 20px #ff1053) drop-shadow(0 0 45px #ffd23f) drop-shadow(0 0 70px #ff5e00); }
	100% { filter: drop-shadow(0 0 15px #ff5e00) drop-shadow(0 0 35px #ff1053) drop-shadow(0 0 60px #ffd23f); }
}
/* Halo de fuego pulsante detrás de Paquetes */
#intro-paquetes-glow {
	position: absolute;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255,94,0,0.55) 0%, rgba(255,16,83,0.3) 40%, transparent 70%);
	z-index: 1;
	animation: glowBreath 1.8s ease-in-out infinite alternate;
	pointer-events: none;
}
@keyframes glowBreath {
	0%   { transform: scale(0.85); opacity: 0.7; }
	100% { transform: scale(1.25); opacity: 1.0; }
}

/* DIFFICULTY SELECTOR */
#difficulty-selector {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 85%;
	text-align: center;
	z-index: 30;
	background: rgba(10, 10, 15, 0.85);
	backdrop-filter: blur(25px);
	-webkit-backdrop-filter: blur(25px);
	padding: 40px;
	border-radius: 25px;
	border: 2px solid rgba(255, 255, 255, 0.15);
	border-top: 2px solid rgba(255, 255, 255, 0.3);
	box-shadow: 0 25px 60px rgba(0,0,0,0.9), 0 0 50px rgba(255, 16, 83, 0.3);
}
.diff-title {
	font-family: 'Obviously', sans-serif;
	color: #fff;
	font-size: 28px;
	margin-bottom: 30px;
	text-shadow: 0 0 10px #ff1053;
	font-style: italic;
	letter-spacing: 2px;
}
.btn-diff {
	display: block;
	width: 100%;
	margin: 15px auto;
	padding: 15px 20px;
	background: rgba(20, 20, 25, 0.85);
	border-radius: 30px;
	color: #fff;
	font-family: 'Obviously', sans-serif;
	font-size: 20px;
	font-weight: bold;
	font-style: italic;
	cursor: pointer;
	transition: all 0.2s ease;
	outline: none;
}
.btn-diff span {
	font-size: 14px;
	opacity: 0.8;
	font-weight: normal;
}
.btn-diff-normal {
	border: 2px solid #39ff14;
	box-shadow: 0 0 15px rgba(57, 255, 20, 0.4);
	text-shadow: 0 0 5px #39ff14;
}
.btn-diff-normal:active { transform: scale(0.95); box-shadow: 0 0 30px rgba(57, 255, 20, 0.8); }

.btn-diff-expert {
	border: 2px solid #ffd23f;
	box-shadow: 0 0 15px rgba(255, 210, 63, 0.4);
	text-shadow: 0 0 5px #ffd23f;
}
.btn-diff-expert:active { transform: scale(0.95); box-shadow: 0 0 30px rgba(255, 210, 63, 0.8); }

.btn-diff-extreme {
	border: 2px solid #ff1053;
	box-shadow: 0 0 15px rgba(255, 16, 83, 0.4);
	text-shadow: 0 0 5px #ff1053;
}
.btn-diff-extreme:active { transform: scale(0.95); box-shadow: 0 0 30px rgba(255, 16, 83, 0.8); }



/* OVERLAYS & MODALS */
#countdown-overlay {
	position: absolute;
	top: 0; left: 0; width: 100%; height: 100%;
	background: rgba(0,0,0,0.6);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	z-index: 200000;
	display: flex;
	justify-content: center;
	align-items: center;
}
#countdown-text {
	font-family: 'Obviously', sans-serif;
	font-size: 150px;
	color: #fff;
	text-shadow: 0 0 40px #ff1053, 0 0 80px #ff1053;
	margin: 0;
	animation: pulseScale 1s infinite alternate;
}
@keyframes pulseScale {
	0% { transform: scale(0.8); opacity: 0.8; }
	100% { transform: scale(1.2); opacity: 1; }
}

#post-game-modal {
	position: absolute;
	top: 0; left: 0; width: 100%; height: 100%;
	background: rgba(0,0,0,0.7);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	z-index: 200000;
	display: flex;
	justify-content: center;
	align-items: center;
}
.post-game-content {
	background: rgba(20, 20, 25, 0.95);
	padding: 50px;
	border-radius: 30px;
	border: 3px solid #ff1053;
	box-shadow: 0 0 50px rgba(255,16,83,0.5);
	text-align: center;
	width: 80%;
}

/* ============================================================ */
/* ROTATE OVERLAY — Aviso de rotación para móviles landscape   */
/* ============================================================ */
#rotate-overlay {
	display: none;
	position: fixed;
	top: 0; left: 0;
	width: 100vw;
	height: 100vh;
	background: #05010a;
	z-index: 9999999;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 24px;
	text-align: center;
	padding: 30px;
	box-sizing: border-box;
}
#rotate-overlay svg {
	width: 80px;
	height: 80px;
	animation: rotateSpin 2s ease-in-out infinite;
	filter: drop-shadow(0 0 12px #ff1053);
}
@keyframes rotateSpin {
	0%   { transform: rotate(0deg);   }
	40%  { transform: rotate(-90deg); }
	60%  { transform: rotate(-90deg); }
	100% { transform: rotate(-90deg); }
}
#rotate-overlay p {
	color: #fff;
	font-size: 20px;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-shadow: 0 0 10px #ff1053;
	margin: 0;
	max-width: 300px;
}
#rotate-overlay small {
	color: rgba(255,255,255,0.5);
	font-size: 13px;
	letter-spacing: 1px;
}
/* Muestra el overlay solo en landscape en pantallas pequeñas (móviles) */
@media screen and (orientation: landscape) and (max-height: 500px) {
	#rotate-overlay {
		display: flex;
	}
}

/* MOBILE SAFE MODE (Evita colapso por SVG Filter en GPU móvil) */
body.mobile-safe #home h1,
body.mobile-safe #panel h1,
body.mobile-safe #home-doritos-logo {
	filter: none !important;
}