/* 102 · Arcade Retro — pixel art de 8 bits. Apertura: pantalla de juego con «Presione start» parpadeando; al tocar,
   la pantalla se pixela y arranca. Portada: el sol y las estrellas del paisaje synthwave titilan (WebGL, modo titila)
   con líneas de barrido encima. Orden: niveles — cada sección es un nivel con su barra de progreso y sus puntos.
   Fecha: tres monedas caen en la caja de píxeles y aparece el día. */
.c-arcade { --display-peso: 700; --nombre-color: #FFFFFF; --titulo-letra: "Press Start 2P"; --titulo-peso: 400; --titulo-espacio: 0; --dia-letra: "Press Start 2P"; --dia-color: #FFFFFF;
	--edad-letra: "Press Start 2P"; --edad-color: #FFD23F; --radio: 0px; --vj: 46px; --sombra: 0 0 0 rgb(0 0 0 / 0); --nombre-tam: clamp(2.6rem, 6.6vw, 5.6rem); }
.c-arcade .xv-cielo { display: none; }
.c-arcade main { background: #0B0B1A; }
.c-arcade main > .xv-sec:not(#portada) { background: transparent; }
.c-arcade .v-velo { background: radial-gradient(60% 34% at 50% 44%, rgb(11 11 26 / .6), transparent 75%); }
.ar-rejilla { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgb(255 255 255 / .04) 0 1px, transparent 1px 3px); mix-blend-mode: overlay; }

/* portada */
.c-arcade .e-evento { font-family: "Press Start 2P", monospace; font-size: .58rem; letter-spacing: .1em; color: #2DE2E6; }
.c-arcade .e-nombre { font-family: "Press Start 2P", monospace; font-weight: 400; line-height: 1.2; text-shadow: 4px 4px 0 #FF3EA5, -3px -3px 0 #2DE2E6; }
.c-arcade .e-edad { gap: .4em; }
.c-arcade .e-edad-n { font-size: clamp(3rem, 8vw, 5.6rem); line-height: 1; text-shadow: 4px 4px 0 #FF3EA5; }
.c-arcade .e-edad-t { font-family: "Press Start 2P", monospace; font-size: clamp(.8rem, 2vw, 1.1rem); color: #FFFFFF; }
.c-arcade .e-fecha { font-family: "Press Start 2P", monospace; font-size: .56rem; line-height: 1.8; color: #FFFFFF; background: #0B0B1A; padding: 8px 14px; box-shadow: 0 0 0 3px #2DE2E6; }
.c-arcade .e-pista { color: #FFD23F; font-family: "Press Start 2P", monospace; font-size: .5rem; }
.ar-moneda { --w: min(12vmin, 90px); right: 12vw; top: 8vh; --dy: -20vh; --ex: 0px; --ey: -30vh; --ed: .3s; --fd: 1.6s; --fa: 10px; --fr: 0deg; }
.ar-moneda .e-img { animation: ap-moneda 1.4s steps(6) infinite; }
.ar-control { --w: min(26vmin, 230px); left: 3vw; bottom: 4vh; --r: -8deg; --dx: -8vw; --dy: 10vh; --ex: -30vw; --ey: 0px; --ed: .5s; --fd: 3s; --fa: 6px; --fr: 2deg; }
.ar-cofre { --w: min(24vmin, 210px); right: 3vw; bottom: 3vh; --r: 6deg; --dx: 8vw; --dy: 10vh; --ex: 30vw; --ey: 0px; --ed: .7s; --fd: 3.4s; --fa: 6px; --fr: 2deg; }
.c-arcade .e-img { image-rendering: pixelated; }

/* niveles: pantallas con borde de píxel */
.c-arcade main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho { position: relative; background: #14142B; padding: clamp(24px, 4vw, 46px);
	box-shadow: 0 0 0 4px #0B0B1A, 0 0 0 8px #2DE2E6, 0 0 0 12px #0B0B1A, 0 0 0 16px #FF3EA5, 0 0 60px rgb(45 226 230 / .2); }
.c-arcade .xv-kicker { font-family: "Press Start 2P", monospace; font-size: .56rem; letter-spacing: .08em; color: #3DDC84; }
.c-arcade .xv-titulo { font-size: clamp(1.15rem, 3.4vw, 2rem); line-height: 1.45; color: #FFFFFF; }
.c-arcade .xv-titulo .xv-script { font-family: "Press Start 2P", monospace; color: #2DE2E6; }
.c-arcade .xv-superficie { background: #0B0B1A; border: 3px solid #2DE2E6; border-radius: 0; }
.c-arcade .xv-momento time { font-family: "Press Start 2P", monospace; font-size: .62rem; color: #FFD23F; }
.c-arcade .xv-lugar-hora { font-family: "Press Start 2P", monospace; font-size: 1.4rem; }
.c-arcade .e-firma { font-family: "Press Start 2P", monospace; font-size: 1rem; color: #FF3EA5; line-height: 1.6; }
.c-arcade .xv-boton { border-radius: 0; font-family: "Press Start 2P", monospace; font-size: .58rem; letter-spacing: .04em; }
.c-arcade .xv-boton:not(.xv-boton-suave) { background: #FFD23F; color: #0B0B1A; border-color: #FFD23F; box-shadow: 4px 4px 0 #FF3EA5; }
.c-arcade .xv-boton-suave { color: #FFFFFF; border-color: #2DE2E6; }
.c-arcade .xv-rsvp, .c-arcade .xv-regalo, .c-arcade .xv-colab { border-radius: 0; }
.c-arcade .e-ornamento { width: min(66%, 240px); }

/* fecha: las monedas caen a la caja y aparece el día */
.c-arcade .e-fecha-k { font-family: "Press Start 2P", monospace; font-size: .6rem; letter-spacing: .1em; color: #3DDC84; }
.ar-m-moneda { width: 18%; top: 0; transform: translateY(calc(var(--t1) * 260%)); opacity: clamp(0, calc((1 - var(--t2)) * 3), 1); }
.ar-m-1 { left: 22%; } .ar-m-2 { left: 41%; transform: translateY(calc(clamp(0, calc(var(--t1) * 1.3 - .3), 1) * 260%)); } .ar-m-3 { left: 60%; transform: translateY(calc(clamp(0, calc(var(--t1) * 1.6 - .6), 1) * 260%)); }
.ar-m-caja { left: 14%; right: 14%; top: 22%; bottom: 22%; background: #14142B; box-shadow: 0 0 0 4px #0B0B1A, 0 0 0 8px #FFD23F, 0 0 0 12px #0B0B1A, 0 0 0 16px #FF3EA5; opacity: clamp(.2, var(--t1), 1); transform: scale(calc(.7 + var(--t2) * .3)); }
.c-arcade .e-dia { font-size: clamp(3rem, 10vw, 5rem); line-height: 1.1; text-shadow: 4px 4px 0 #FF3EA5; }
.c-arcade .e-mes { font-family: "Press Start 2P", monospace; font-size: clamp(.7rem, 2vw, .95rem); color: #2DE2E6; text-transform: uppercase; margin-top: 10px; }
.c-arcade .e-anio { font-family: "Press Start 2P", monospace; font-size: .6rem; letter-spacing: .1em; color: #FFD23F; }
.c-arcade .e-sem { font-family: "Press Start 2P", monospace; font-size: .55rem; letter-spacing: .06em; line-height: 1.8; color: #B8B8D9; }

/* cierre */
.ar-cierre-corazon { position: absolute; left: 50%; top: 6%; width: min(18vmin, 120px); translate: -50% 0; image-rendering: pixelated; animation: ar-late 1.1s steps(2) infinite; }
@keyframes ar-late { 50% { transform: scale(1.12); } }
.c-arcade .e-cierre { padding-top: clamp(170px, 24vh, 240px); }
.c-arcade .e-nombre-fin { font-family: "Press Start 2P", monospace; font-size: clamp(1.6rem, 6vw, 3.4rem); line-height: 1.3; text-shadow: 3px 3px 0 #FF3EA5; }
.c-arcade .e-cierre .xv-texto-grande { font-family: "Press Start 2P", monospace; font-size: clamp(.7rem, 2vw, .95rem); line-height: 1.8; color: #FFD23F; }

@media (max-width: 760px) {
	.c-arcade { --nombre-tam: clamp(2rem, 10vw, 3.2rem); }
	.ar-control { --w: 36vw; left: -4vw; bottom: 2vh; }
	.ar-cofre { --w: 32vw; right: -2vw; bottom: 2vh; }
	.ar-moneda { --w: 16vw; right: 8vw; top: 6vh; }
	.c-arcade main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho { margin-inline: 8px; }
}