/* Mousepad Cyber Game — el popup es un mousepad: tela, costura y borde RGB. */

.mpcg-root {
	--mpcg-bg: #1a1d24;
	--mpcg-a1: #22d3ee;
	--mpcg-a2: #f040b5;
	--mpcg-a3: #ffd23f;
	--mpcg-text: #eef1f6;
	--mpcg-ink: #0f1116;
	--mpcg-display: "Chakra Petch", "Bahnschrift", "Arial Narrow", system-ui, sans-serif;
	--mpcg-radius: 22px;
	font-size: 16px;
	line-height: 1.5;
}

.mpcg-root *,
.mpcg-root *::before,
.mpcg-root *::after {
	box-sizing: border-box;
}

/* Neutraliza estilos del tema dentro del juego */
.mpcg-root button,
.mpcg-root input,
.mpcg-root a {
	font: inherit;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	text-shadow: none;
	box-shadow: none;
	margin: 0;
	min-height: 0;
	width: auto;
	line-height: 1.2;
}
.mpcg-root button {
	border: 0;
	background: none;
	color: inherit;
	padding: 0;
	cursor: pointer;
	border-radius: 0;
}
.mpcg-root :focus-visible {
	outline: 2px solid var(--mpcg-a1);
	outline-offset: 2px;
}

html.mpcg-lock,
html.mpcg-lock body {
	overflow: hidden;
}

/* ---------- Botón flotante ---------- */

.mpcg-root .mpcg-launch {
	position: fixed;
	z-index: 99998;
	left: calc(16px + env(safe-area-inset-left, 0px));
	bottom: calc(var(--mpcg-offset, 80px) + env(safe-area-inset-bottom, 0px));
	transition: opacity 0.2s ease;
}
.mpcg-root .mpcg-launch.is-hidden {
	display: none;
}
.mpcg-root .mpcg-launcher {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 18px 12px 14px;
	border-radius: 999px;
	background: var(--mpcg-bg);
	color: var(--mpcg-text);
	font-family: var(--mpcg-display);
	font-weight: 700;
	font-size: 15px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35), -6px 0 18px -8px var(--mpcg-a1), 6px 0 18px -8px var(--mpcg-a2);
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.mpcg-root .mpcg-launcher:hover {
	transform: translateY(-2px);
}
.mpcg-root.is-active .mpcg-launch {
	opacity: 0;
	pointer-events: none;
}
/* X para ocultar el botón */
.mpcg-root .mpcg-launch-x {
	position: absolute;
	top: -9px;
	right: -7px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--mpcg-bg);
	color: rgba(255, 255, 255, 0.75);
	border: 1px solid rgba(255, 255, 255, 0.3);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
	font-size: 15px;
	line-height: 19px;
	text-align: center;
	transition: color 0.15s, border-color 0.15s;
}
.mpcg-root .mpcg-launch-x::after {
	content: "";
	position: absolute;
	inset: -9px; /* área para tocar más grande en el celular */
}
.mpcg-root .mpcg-launch-x:hover {
	color: var(--mpcg-text);
	border-color: rgba(255, 255, 255, 0.6);
}
.mpcg-launcher__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: conic-gradient(var(--mpcg-a1), var(--mpcg-a2), var(--mpcg-a3), var(--mpcg-a1));
	box-shadow: 0 0 0 0 var(--mpcg-a1);
	animation: mpcg-ping 2.4s ease-out infinite;
}
@keyframes mpcg-ping {
	0% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.55); }
	70%, 100% { box-shadow: 0 0 0 10px rgba(34, 211, 238, 0); }
}

/* Lado derecho (por defecto): deja libre el botón de WhatsApp de la izquierda */
.mpcg-root.mpcg-side-right .mpcg-launch,
.mpcg-root.mpcg-side-right .mpcg-invite {
	left: auto;
	right: calc(16px + env(safe-area-inset-right, 0px));
}

/* ---------- Invitación ---------- */

.mpcg-root.is-inviting .mpcg-launch {
	opacity: 0;
	pointer-events: none;
}
.mpcg-root .mpcg-invite {
	position: fixed;
	z-index: 99998;
	left: calc(16px + env(safe-area-inset-left, 0px));
	bottom: calc(var(--mpcg-offset, 80px) + env(safe-area-inset-bottom, 0px));
	width: min(360px, calc(100vw - 32px));
	padding: 2px;
	border-radius: 18px;
	overflow: hidden;
	isolation: isolate;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
	opacity: 0;
	transform: translateY(24px);
	transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.15), opacity 0.25s ease;
}
.mpcg-root .mpcg-invite.is-in {
	opacity: 1;
	transform: none;
}
.mpcg-root .mpcg-invite::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 50%;
	top: 50%;
	width: 260%;
	aspect-ratio: 1;
	translate: -50% -50%;
	background: conic-gradient(var(--mpcg-a1), var(--mpcg-a2), var(--mpcg-a3), var(--mpcg-a1));
	animation: mpcg-spin 6s linear infinite;
}
.mpcg-root .mpcg-invite__pad {
	position: relative;
	padding: 18px 18px 16px;
	border-radius: 16px;
	color: var(--mpcg-text);
	background:
		repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 3px),
		var(--mpcg-bg);
}
.mpcg-root .mpcg-invite__pad::before {
	content: "";
	position: absolute;
	inset: 5px;
	border: 1.5px dashed rgba(255, 255, 255, 0.16);
	border-radius: 12px;
	pointer-events: none;
}
.mpcg-root .mpcg-invite .mpcg-badge {
	margin-bottom: 10px;
	font-size: 12px;
	padding: 3px 9px;
}
.mpcg-root .mpcg-invite__title {
	margin: 0 0 4px;
	font-family: var(--mpcg-display);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.15;
}
.mpcg-root .mpcg-invite__text {
	margin: 0 0 14px;
	font-size: 14px;
	line-height: 1.45;
	opacity: 0.75;
}
.mpcg-root .mpcg-invite__actions {
	display: flex;
	align-items: center;
	gap: 16px;
}
.mpcg-root .mpcg-invite .mpcg-btn {
	width: auto;
	height: 44px;
	padding: 0 30px;
	font-size: 16px;
}
.mpcg-root .mpcg-invite .mpcg-link {
	white-space: nowrap;
}
.mpcg-root .mpcg-notnow {
	display: block;
	margin: 14px auto 0;
	font-size: 13.5px;
}

/* ---------- Overlay y modal ---------- */

.mpcg-root .mpcg-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px));
	background: rgba(6, 7, 10, 0.7);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity 0.25s ease;
}
.mpcg-root .mpcg-overlay[hidden] {
	display: none;
}
.mpcg-root .mpcg-overlay.is-open {
	opacity: 1;
}

.mpcg-root .mpcg-modal {
	position: relative;
	width: min(540px, 100%);
	padding: 3px; /* grosor del borde RGB */
	border-radius: var(--mpcg-radius);
	overflow: hidden;
	isolation: isolate;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
	transform: translateY(18px) scale(0.97);
	transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.15);
}
.mpcg-root .mpcg-overlay.is-open .mpcg-modal {
	transform: none;
}
/* Borde RGB que gira, como la luz de un mousepad RGB */
.mpcg-root .mpcg-modal::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 50%;
	top: 50%;
	width: 260%;
	aspect-ratio: 1;
	translate: -50% -50%;
	background: conic-gradient(var(--mpcg-a1), var(--mpcg-a2), var(--mpcg-a3), var(--mpcg-a1));
	animation: mpcg-spin 6s linear infinite;
}
@keyframes mpcg-spin {
	to { rotate: 360deg; }
}

.mpcg-root .mpcg-pad {
	position: relative;
	border-radius: calc(var(--mpcg-radius) - 3px);
	color: var(--mpcg-text);
	background:
		radial-gradient(120% 70% at 50% -10%, rgba(255, 255, 255, 0.07), transparent 60%),
		repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 3px),
		repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.12) 0 1px, transparent 1px 3px),
		var(--mpcg-bg);
	max-height: calc(100dvh - 40px);
	overflow-y: auto;
	overscroll-behavior: contain;
}
/* Costura del borde */
.mpcg-root .mpcg-pad::before {
	content: "";
	position: absolute;
	inset: 7px;
	border: 1.5px dashed rgba(255, 255, 255, 0.16);
	border-radius: calc(var(--mpcg-radius) - 9px);
	pointer-events: none;
}

.mpcg-root .mpcg-view {
	position: relative;
	padding: 30px 28px 26px;
	outline: none;
}

.mpcg-root .mpcg-close {
	position: absolute;
	z-index: 2;
	top: 16px;
	right: 16px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	font-size: 24px;
	line-height: 36px;
	text-align: center;
	color: rgba(255, 255, 255, 0.6);
	transition: color 0.15s, background 0.15s;
}
.mpcg-root .mpcg-close:hover {
	color: var(--mpcg-text);
	background: rgba(255, 255, 255, 0.08);
}

/* ---------- Cabecera ---------- */

.mpcg-root .mpcg-badge {
	display: inline-block;
	margin-bottom: 14px;
	padding: 4px 11px;
	border-radius: 6px;
	font-family: var(--mpcg-display);
	font-weight: 700;
	font-size: 13px;
	color: var(--mpcg-ink);
	background: linear-gradient(90deg, var(--mpcg-a1), var(--mpcg-a2));
}
.mpcg-root .mpcg-title {
	margin: 0 44px 8px 0;
	padding: 0;
	font-family: var(--mpcg-display);
	font-weight: 700;
	font-size: clamp(25px, 6vw, 32px);
	line-height: 1.08;
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--mpcg-text);
}
.mpcg-root .mpcg-sub {
	margin: 0 0 20px;
	max-width: 44ch;
	font-size: 15px;
	color: rgba(238, 241, 246, 0.72);
	color: color-mix(in srgb, var(--mpcg-text) 72%, transparent);
}

/* ---------- Escalera de premios (intro) ---------- */

.mpcg-root .mpcg-ladder {
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
	gap: 2px;
	border-radius: 12px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.06);
}
.mpcg-root .mpcg-ladder li {
	margin: 0;
	padding: 10px 10px;
	white-space: nowrap;
	background: rgba(0, 0, 0, 0.22);
}
.mpcg-root .mpcg-ladder b {
	display: block;
	font-family: var(--mpcg-display);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
}
.mpcg-root .mpcg-ladder span {
	display: block;
	font-size: 12px;
	opacity: 0.66;
}
.mpcg-root .mpcg-ladder li:last-child b {
	color: var(--mpcg-a1);
}

/* ---------- Formulario ---------- */

.mpcg-root .mpcg-form {
	margin: 0;
}
.mpcg-root .mpcg-row {
	display: flex;
	gap: 10px;
}
.mpcg-root .mpcg-field {
	flex: 1;
	margin: 0;
}
.mpcg-root .mpcg-field input {
	display: block;
	width: 100%;
	height: 50px;
	padding: 0 16px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(0, 0, 0, 0.3);
	color: var(--mpcg-text);
	font-size: 16px; /* evita zoom en iOS */
	outline: none;
	transition: border-color 0.15s;
}
.mpcg-root .mpcg-field input::placeholder {
	color: rgba(255, 255, 255, 0.4);
}
.mpcg-root .mpcg-field input:focus {
	border-color: var(--mpcg-a1);
}
.mpcg-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.mpcg-root .mpcg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	padding: 0 24px;
	border-radius: 10px;
	font-family: var(--mpcg-display);
	font-weight: 700;
	font-size: 17px;
	color: var(--mpcg-ink);
	background: linear-gradient(90deg, var(--mpcg-a1), var(--mpcg-a2));
	white-space: nowrap;
	transition: filter 0.15s, transform 0.1s;
}
.mpcg-root .mpcg-btn:hover {
	filter: brightness(1.08);
	color: var(--mpcg-ink);
}
.mpcg-root .mpcg-btn:active {
	transform: scale(0.98);
}
.mpcg-root .mpcg-link {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.62);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.mpcg-root .mpcg-link:hover {
	color: var(--mpcg-text);
}
.mpcg-root .mpcg-error {
	min-height: 1.2em;
	margin: 8px 0 0;
	font-size: 14px;
	color: #ff8fa3;
}
.mpcg-root .mpcg-error:empty {
	min-height: 0;
	margin: 0;
}
.mpcg-root .mpcg-fine {
	margin: 12px 0 0;
	font-size: 12.5px;
	line-height: 1.45;
	opacity: 0.55;
}

/* ---------- Aim Challenge ---------- */

.mpcg-root .mpcg-hud {
	display: grid;
	grid-template-columns: auto auto 1fr;
	gap: 22px;
	align-items: end;
	margin: 0 44px 12px 0;
}
.mpcg-root .mpcg-stat span {
	display: block;
	font-size: 12.5px;
	opacity: 0.6;
}
.mpcg-root .mpcg-stat b {
	display: block;
	font-family: var(--mpcg-display);
	font-weight: 700;
	font-size: 26px;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	transition: color 0.2s;
}
.mpcg-root .mpcg-stat--prize {
	text-align: right;
}
.mpcg-root .mpcg-stat--prize b {
	color: var(--mpcg-a1);
}
.mpcg-root .mpcg-stat.is-hurry b {
	color: #ff6b81;
}
.mpcg-root .is-bump {
	animation: mpcg-bump 0.35s ease;
}
@keyframes mpcg-bump {
	40% { transform: scale(1.18); }
}

.mpcg-root .mpcg-arena {
	position: relative;
	aspect-ratio: 16 / 10;
	border-radius: 12px;
	overflow: hidden;
	cursor: crosshair;
	touch-action: manipulation;
	user-select: none;
	-webkit-user-select: none;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background:
		radial-gradient(circle at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.35)),
		linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 28px 28px,
		linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 28px 28px,
		rgba(0, 0, 0, 0.28);
}
.mpcg-root .mpcg-arena.is-miss {
	animation: mpcg-miss 0.25s ease;
}
@keyframes mpcg-miss {
	50% { box-shadow: inset 0 0 0 2px rgba(255, 107, 129, 0.6); }
}

.mpcg-root .mpcg-target {
	position: absolute;
	border-radius: 50%;
	background: radial-gradient(circle, #fff 0 12%, var(--mpcg-a2) 13% 34%, var(--mpcg-bg) 35% 48%, var(--mpcg-a1) 49% 70%, transparent 71%);
	box-shadow: 0 0 22px -4px var(--mpcg-a1);
	animation: mpcg-pop 0.16s ease-out;
	cursor: crosshair;
	touch-action: manipulation;
}
@keyframes mpcg-pop {
	from { transform: scale(0.3); opacity: 0.4; }
}
.mpcg-root .mpcg-float {
	position: absolute;
	pointer-events: none;
	font-family: var(--mpcg-display);
	font-weight: 700;
	font-size: 18px;
	color: var(--mpcg-a1);
	translate: -50% -50%;
	animation: mpcg-float 0.6s ease-out forwards;
}
@keyframes mpcg-float {
	to { transform: translateY(-34px); opacity: 0; }
}

.mpcg-root .mpcg-count {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-family: var(--mpcg-display);
	font-weight: 700;
	font-size: 64px;
	line-height: 1;
	text-align: center;
	background: rgba(0, 0, 0, 0.35);
}
.mpcg-root .mpcg-count small {
	margin-top: 10px;
	font-size: 15px;
	font-weight: 500;
	opacity: 0.8;
}
.mpcg-root .mpcg-count--end {
	font-size: 44px;
	animation: mpcg-pop 0.25s ease-out;
}

.mpcg-root .mpcg-progress {
	margin-top: 12px;
}
.mpcg-root .mpcg-meter {
	height: 6px;
	border-radius: 6px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.1);
}
.mpcg-root .mpcg-meter i {
	display: block;
	height: 100%;
	width: 0;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--mpcg-a1), var(--mpcg-a2));
	transition: width 0.2s ease;
}
.mpcg-root .mpcg-progress p {
	margin: 8px 0 0;
	font-size: 13.5px;
	opacity: 0.7;
}

/* ---------- Raspa el Pad ---------- */

.mpcg-root .mpcg-scratch {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 14px;
	overflow: hidden;
	margin-bottom: 14px;
	background:
		radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.08), transparent 65%),
		rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(255, 255, 255, 0.1);
}
.mpcg-root .mpcg-scratch__prize {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.mpcg-root .mpcg-scratch__prize small {
	font-size: 14px;
	opacity: 0.7;
}
.mpcg-root .mpcg-scratch__prize strong {
	font-family: var(--mpcg-display);
	font-weight: 700;
	font-size: clamp(38px, 11vw, 60px);
	line-height: 1;
	color: var(--mpcg-a1);
}
.mpcg-root .mpcg-scratch canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	touch-action: none;
	cursor: crosshair;
	transition: opacity 0.6s ease;
}
.mpcg-root .mpcg-scratch.is-revealed canvas {
	opacity: 0;
	pointer-events: none;
}
.mpcg-root .mpcg-scratch-foot {
	display: flex;
	align-items: center;
	gap: 16px;
}
.mpcg-root .mpcg-scratch-foot .mpcg-meter {
	flex: 1;
}

/* ---------- Resultado ---------- */

.mpcg-root .mpcg-prize {
	margin: 4px 0 18px;
}
.mpcg-root .mpcg-prize__label {
	display: block;
	font-family: var(--mpcg-display);
	font-weight: 700;
	font-size: clamp(48px, 14vw, 72px);
	line-height: 0.95;
	letter-spacing: -0.02em;
	background: linear-gradient(90deg, var(--mpcg-a1), var(--mpcg-a2));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.mpcg-root .mpcg-code {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 10px 10px 18px;
	border-radius: 12px;
	border: 2px dashed rgba(255, 255, 255, 0.28);
	background: rgba(0, 0, 0, 0.25);
}
.mpcg-root .mpcg-code code {
	flex: 1;
	padding: 0;
	background: none;
	color: var(--mpcg-text);
	font-family: var(--mpcg-display);
	font-weight: 700;
	font-size: 24px;
	letter-spacing: 0.06em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}
.mpcg-root .mpcg-mail {
	padding: 14px 16px;
	border-radius: 12px;
	border: 2px dashed rgba(255, 255, 255, 0.28);
	background: rgba(0, 0, 0, 0.25);
}
.mpcg-root .mpcg-mail p {
	margin: 0 0 8px;
	font-size: 14.5px;
	line-height: 1.45;
}
.mpcg-root .mpcg-mail .mpcg-link {
	font-size: 13.5px;
}
.mpcg-root .mpcg-mail .mpcg-link:disabled {
	text-decoration: none;
	cursor: default;
}
.mpcg-root .mpcg-copy {
	height: 40px;
	padding: 0 16px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 14px;
	background: rgba(255, 255, 255, 0.1);
	transition: background 0.15s;
}
.mpcg-root .mpcg-copy:hover {
	background: rgba(255, 255, 255, 0.18);
}
.mpcg-root .mpcg-copy.is-done {
	background: var(--mpcg-a1);
	color: var(--mpcg-ink);
}
.mpcg-root .mpcg-actions {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: 20px;
}

.mpcg-root .mpcg-testnote {
	margin: 16px 0 0;
	padding-top: 12px;
	border-top: 1px dashed rgba(255, 255, 255, 0.16);
	font-size: 12.5px;
	color: var(--mpcg-a3);
}

.mpcg-root .mpcg-again {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 16px;
	padding: 14px 14px 14px 16px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
}
.mpcg-root .mpcg-again p {
	margin: 0;
	flex: 1;
	font-size: 14px;
	line-height: 1.4;
	opacity: 0.85;
}
.mpcg-root .mpcg-btn--ghost {
	height: 44px;
	padding: 0 16px;
	font-size: 15px;
	color: var(--mpcg-text);
	background: transparent;
	border: 1.5px solid var(--mpcg-a1);
}
.mpcg-root .mpcg-btn--ghost:hover {
	color: var(--mpcg-ink);
	background: var(--mpcg-a1);
	filter: none;
}
.mpcg-root .mpcg-final {
	margin-top: 6px;
	opacity: 0.8;
}
.mpcg-root .mpcg-testnote .mpcg-link {
	margin-left: 6px;
	font-size: 12.5px;
	color: inherit;
}

/* ---------- Cargando ---------- */

.mpcg-root .mpcg-loader {
	display: flex;
	gap: 8px;
	padding: 18px 0 6px;
}
.mpcg-root .mpcg-loader i {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--mpcg-a1);
	animation: mpcg-dot 0.9s ease-in-out infinite;
}
.mpcg-root .mpcg-loader i:nth-child(2) { animation-delay: 0.15s; background: var(--mpcg-a2); }
.mpcg-root .mpcg-loader i:nth-child(3) { animation-delay: 0.3s; background: var(--mpcg-a3); }
@keyframes mpcg-dot {
	50% { transform: translateY(-8px); }
}

/* ---------- Confeti ---------- */

.mpcg-root .mpcg-confetti {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	overflow: hidden;
	border-radius: inherit;
}
.mpcg-root .mpcg-confetti i {
	position: absolute;
	top: -14px;
	width: 8px;
	height: 13px;
	border-radius: 2px;
	animation: mpcg-fall 1.6s cubic-bezier(0.3, 0.6, 0.6, 1) forwards;
}
@keyframes mpcg-fall {
	to { transform: translate(var(--dx), 720px) rotate(var(--r)); }
}

/* ---------- Móvil ---------- */

@media (max-width: 480px) {
	.mpcg-root .mpcg-view { padding: 26px 20px 22px; }
	.mpcg-root .mpcg-row { flex-direction: column; }
	.mpcg-root .mpcg-btn { width: 100%; }
	.mpcg-root .mpcg-hud { gap: 14px; }
	.mpcg-root .mpcg-stat b { font-size: 22px; }
	.mpcg-root .mpcg-ladder { grid-template-columns: repeat(2, 1fr); }
	.mpcg-root .mpcg-ladder li:last-child:nth-child(odd) { grid-column: span 2; }
	.mpcg-root .mpcg-arena { aspect-ratio: 4 / 5; }
	.mpcg-root .mpcg-actions { flex-direction: column; align-items: stretch; text-align: center; }
	.mpcg-root .mpcg-again { flex-direction: column; align-items: stretch; text-align: center; }
	.mpcg-root .mpcg-code { padding-left: 14px; }
	.mpcg-root .mpcg-code code { font-size: 20px; letter-spacing: 0.03em; }
	.mpcg-root .mpcg-launcher { font-size: 14px; padding: 10px 16px 10px 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.mpcg-root *,
	.mpcg-root *::before,
	.mpcg-root *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}