/* ============================================================
   RETOS DE CUMPLEAÑOS — styles.css
   ============================================================ */

/* ---- RESET & BASE ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ============================================================
   ACCESS SCREEN — Rediseño completo
   ============================================================ */

/* ── Fondo + líneas decorativas ─────────────────────────── */
.access-bg {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(120,50,150,.25) 0%, transparent 65%),
    radial-gradient(ellipse at 25% 80%, rgba(80,30,120,.2) 0%, transparent 50%),
    radial-gradient(ellipse at 75% 20%, rgba(40,20,80,.3) 0%, transparent 55%),
    linear-gradient(160deg, #100420 0%, #1e0830 35%, #150a2e 70%, #0d0418 100%);
  z-index: -1;
}

/* Líneas geométricas sutiles animadas */
.access-bg-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .06;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px),
    linear-gradient(0deg,  rgba(255,255,255,.15) 1px, transparent 1px);
  background-size: 80px 80px, 120px 120px;
  background-position: 0 0, 20px 20px;
  animation: bgLinesShift 20s linear infinite;
}
@keyframes bgLinesShift {
  0%   { background-position: 0 0, 20px 20px; }
  100% { background-position: 80px 80px, 140px 140px; }
}

#screen-access {
  overflow: hidden;
}

/* ── Contenedor principal (centrado) ────────────────────── */
.access-content {
  text-align: center;
  max-width: 500px;
  width: 100%;
  padding: 0 20px;
  animation: accessFloatIn .8s cubic-bezier(.2,1,.3,1) both;
  position: relative;
  z-index: 1;
}
@keyframes accessFloatIn {
  from { opacity: 0; transform: translateY(36px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Card con efecto glass ──────────────────────────────── */
.access-card {
  position: relative;
  border-radius: 28px;
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    0 8px 48px rgba(0,0,0,.5),
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 0 80px rgba(160,100,220,.08);
  overflow: hidden;
}

/* Aura dorada detrás de la card */
.access-card-aura {
  position: absolute;
  top: -60px; left: 50%;
  transform: translateX(-50%);
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(245,200,66,.12) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  animation: auraBreath 4s ease-in-out infinite;
}
@keyframes auraBreath {
  0%,100% { transform: translateX(-50%) scale(1);   opacity: .7; }
  50%     { transform: translateX(-50%) scale(1.2); opacity: 1; }
}

.access-card-inner {
  position: relative;
  z-index: 1;
  padding: 44px 36px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── Anillo decorativo alrededor del icono ──────────────── */
.access-lock-ring {
  position: relative;
  width: 110px; height: 110px;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.access-ring-svg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  animation: ringRotate 12s linear infinite;
}
@keyframes ringRotate {
  to { transform: rotate(360deg); }
}

.access-ring-track {
  fill: none;
  stroke: rgba(255,255,255,.08);
  stroke-width: 1.5;
  stroke-dasharray: 12 6;
}

.access-ring-glow {
  fill: none;
  stroke: rgba(245,200,66,.35);
  stroke-width: 2;
  stroke-dasharray: 60 230;
  filter: drop-shadow(0 0 6px rgba(245,200,66,.5));
  animation: ringDashPulse 3s ease-in-out infinite;
}
@keyframes ringDashPulse {
  0%,100% { stroke-dashoffset: 0;   stroke: rgba(245,200,66,.35); }
  50%     { stroke-dashoffset: 40;  stroke: rgba(245,200,66,.7);  }
}

/* Icono del candado */
.access-lock-icon {
  font-size: 3.2rem;
  display: inline-block;
  position: relative;
  z-index: 2;
  animation: lockFloat 3s ease-in-out infinite;
  filter: drop-shadow(0 0 22px rgba(245,200,66,.55));
  transition: filter .5s, transform .5s;
}
@keyframes lockFloat {
  0%,100% { transform: translateY(0) rotate(-2deg); }
  50%     { transform: translateY(-8px) rotate(2deg); }
}

/* ── Título ─────────────────────────────────────────────── */
.access-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.7rem, 4.5vw, 2.4rem);
  color: #f0d878;
  margin-bottom: 0;
  letter-spacing: .5px;
  text-shadow: 0 0 40px rgba(245,200,66,.3);
  line-height: 1.2;
}

/* ── Separador decorativo ───────────────────────────────── */
.access-separator {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 16px 0 14px;
  width: 140px;
}
.access-sep-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245,200,66,.35), transparent);
}
.access-sep-star {
  font-size: .7rem;
  color: rgba(245,200,66,.6);
  animation: sepStarPulse 2s ease-in-out infinite;
}
@keyframes sepStarPulse {
  0%,100% { opacity: .4; transform: scale(1); }
  50%     { opacity: 1;  transform: scale(1.3); }
}

/* ── Subtítulo ──────────────────────────────────────────── */
.access-subtitle {
  color: rgba(255,255,255,.65);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 26px;
}

/* ── Input con icono integrado ──────────────────────────── */
.access-input-wrap {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
  width: 100%;
}

.access-input-shell {
  position: relative;
  flex: 1;
  min-width: 200px;
  max-width: 260px;
}

.access-input-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  pointer-events: none;
  z-index: 2;
  opacity: .7;
  transition: opacity .25s;
}
.access-input-shell:focus-within .access-input-icon {
  opacity: 1;
}

.access-input {
  width: 100%;
  background: rgba(255,255,255,.07);
  border: 1.5px solid rgba(245,200,66,.25);
  border-radius: 50px;
  padding: 14px 20px 14px 44px;
  font-family: 'Nunito', sans-serif;
  font-size: 1rem;
  color: #fff;
  outline: none;
  transition: border-color .3s, background .3s, box-shadow .3s;
  letter-spacing: .5px;
}
.access-input::placeholder { color: rgba(255,255,255,.3); font-style: italic; }
.access-input:focus {
  border-color: var(--gold);
  background: rgba(255,255,255,.11);
  box-shadow: 0 0 24px rgba(245,200,66,.12), 0 0 0 3px rgba(245,200,66,.06);
}

/* ── Botón de acceso ────────────────────────────────────── */
.btn-access {
  background: linear-gradient(135deg, #f8d64e, #d4a017);
  color: #2d1b0e;
  border: none;
  border-radius: 50px;
  padding: 14px 26px;
  font-family: 'Nunito', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 22px rgba(200,150,0,.35);
  transition: transform .25s, box-shadow .25s, filter .25s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: .3px;
}
.btn-access:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 32px rgba(200,150,0,.5);
  filter: brightness(1.08);
}
.btn-access:active { transform: translateY(0) scale(.98); }

.btn-access-label { }
.btn-access-emoji { font-size: 1.15rem; }

/* ── Mensajes de error ──────────────────────────────────── */
.access-error {
  font-size: .92rem;
  font-weight: 600;
  color: #ffb3c0;
  background: rgba(255,70,90,.1);
  border: 1px solid rgba(255,80,110,.25);
  border-radius: 14px;
  padding: 10px 20px;
  margin-top: 6px;
  animation: fadeSlide .3s ease, shake .4s ease;
  line-height: 1.5;
  max-width: 380px;
}

.access-fails {
  font-size: .82rem;
  color: rgba(255,200,120,.55);
  margin-top: 10px;
  font-style: italic;
  letter-spacing: .3px;
}

/* ============================================================
   MODO DRAMÁTICO — Rediseño completo
   ============================================================ */

/* ── Overlay con partículas ─────────────────────────────── */
.dramatic-overlay {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(180,10,10,.3) 0%, transparent 60%),
    radial-gradient(ellipse at 30% 70%, rgba(120,5,5,.25) 0%, transparent 50%),
    #080000;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  animation: dramaticReveal .5s ease both;
  padding: 24px;
}
.dramatic-overlay.hidden { display: none !important; }

@keyframes dramaticReveal {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: scale(1); }
}

/* Scanlines CRT */
.dramatic-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0,0,0,.12) 3px,
    rgba(0,0,0,.12) 4px
  );
  z-index: 2;
  animation: scanMove 8s linear infinite;
}
@keyframes scanMove {
  0% { background-position: 0 0; }
  100% { background-position: 0 100px; }
}

/* Partículas de alerta cayendo */
.dramatic-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.dramatic-particle {
  position: absolute;
  font-size: .7rem;
  animation: particleFall linear forwards;
  pointer-events: none;
}
@keyframes particleFall {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(105vh) rotate(720deg); opacity: 0; }
}

/* ── Card dramática ─────────────────────────────────────── */
.dramatic-content {
  text-align: center;
  max-width: 520px;
  width: 100%;
  position: relative;
  z-index: 3;
}

.dramatic-card {
  border-radius: 24px;
  background: rgba(20,0,0,.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1.5px solid rgba(255,60,60,.3);
  box-shadow:
    0 0 60px rgba(255,0,0,.15),
    0 0 0 1px rgba(255,40,40,.1) inset;
  overflow: hidden;
  animation: dramaticCardPulse 2s ease-in-out infinite;
}
@keyframes dramaticCardPulse {
  0%,100% { box-shadow: 0 0 60px rgba(255,0,0,.15), 0 0 0 1px rgba(255,40,40,.1) inset; }
  50%     { box-shadow: 0 0 80px rgba(255,0,0,.3),  0 0 0 1px rgba(255,40,40,.2) inset; }
}

.dramatic-card-inner {
  padding: 36px 32px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── Sirena ─────────────────────────────────────────────── */
.dramatic-siren {
  font-size: 2.4rem;
  margin-bottom: 10px;
  animation: sirenSpin .5s step-end infinite;
}
@keyframes sirenSpin {
  0%,100% { transform: scaleX(1); }
  50%     { transform: scaleX(-1); }
}

/* ── Warning ────────────────────────────────────────────── */
.dramatic-warning {
  font-size: clamp(1rem, 3.5vw, 1.35rem);
  font-weight: 900;
  color: #ff3333;
  letter-spacing: 3px;
  margin-bottom: 12px;
  animation: warnBlink .6s step-end infinite;
  text-transform: uppercase;
}
@keyframes warnBlink {
  0%,100% { opacity: 1; }
  50%     { opacity: .25; }
}

.dramatic-text {
  font-family: 'Nunito', sans-serif;
  font-size: 1.05rem;
  color: rgba(255,255,255,.75);
  margin-bottom: 12px;
}
.dramatic-text strong { color: #ff5555; }

/* ── Cuenta atrás con anillo ────────────────────────────── */
.dramatic-countdown-ring {
  position: relative;
  width: 140px; height: 140px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dramatic-ring-svg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  transform: rotate(-90deg);
}

.dramatic-ring-track {
  fill: none;
  stroke: rgba(255,255,255,.06);
  stroke-width: 4;
}

.dramatic-ring-fill {
  fill: none;
  stroke: #ff2d2d;
  stroke-width: 4;
  stroke-linecap: round;
  /* SVG circumference = 2*π*52 ≈ 326.73 */
  stroke-dasharray: 326.73;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear, stroke .5s;
  filter: drop-shadow(0 0 8px rgba(255,40,40,.6));
}

.dramatic-countdown {
  font-family: 'Playfair Display', serif;
  font-size: 3.8rem;
  font-weight: 700;
  color: #ff2d2d;
  line-height: 1;
  text-shadow: 0 0 30px rgba(255,0,0,.7), 0 0 60px rgba(255,0,0,.4);
  animation: countPulse 1s ease-in-out infinite;
  transition: color .4s;
  z-index: 1;
}
.dramatic-countdown.urgent {
  color: #ff6600;
  animation: countPulseUrgent .35s ease-in-out infinite;
}
@keyframes countPulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.07); }
}
@keyframes countPulseUrgent {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.12); }
}

/* ── Subtext dramático ──────────────────────────────────── */
.dramatic-subtext {
  color: rgba(255,255,255,.55);
  font-size: .9rem;
  margin-bottom: 20px;
  line-height: 1.6;
}

/* ── Input dramático ────────────────────────────────────── */
.dramatic-input-wrap {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
  width: 100%;
}

.dramatic-input-field {
  border-color: rgba(255,70,70,.5) !important;
  animation: borderPulseRed 1s ease-in-out infinite;
  flex: 1;
  min-width: 180px;
  max-width: 240px;
  padding-left: 20px !important; /* override icon padding */
}
@keyframes borderPulseRed {
  0%,100% { border-color: rgba(255,70,70,.4) !important; box-shadow: 0 0 15px rgba(255,0,0,.08) !important; }
  50%     { border-color: rgba(255,60,60,.9) !important; box-shadow: 0 0 25px rgba(255,0,0,.2) !important;  }
}

/* ── Botón dramático ────────────────────────────────────── */
.btn-dramatic-submit {
  background: linear-gradient(135deg, #ff3b3b, #b80000) !important;
  color: #fff !important;
  box-shadow: 0 4px 24px rgba(255,0,0,.45) !important;
  animation: dramaticBtnPulse 1.2s ease-in-out infinite;
}
.btn-dramatic-submit:hover {
  box-shadow: 0 8px 32px rgba(255,0,0,.6) !important;
  filter: brightness(1.15);
}
@keyframes dramaticBtnPulse {
  0%,100% { box-shadow: 0 4px 24px rgba(255,0,0,.45) !important; }
  50%     { box-shadow: 0 4px 36px rgba(255,0,0,.7) !important;  }
}

/* ── Error dramático ────────────────────────────────────── */
.dramatic-error {
  font-size: .9rem;
  color: #ff8888;
  margin-top: 4px;
  animation: fadeSlide .3s ease;
  font-weight: 600;
}

/* ── Screen flash ───────────────────────────────────────── */
@keyframes screenFlash {
  0%,100% { filter: brightness(1); }
  10%,30%,50%,70%,90% { filter: brightness(4) saturate(2); }
  20%,40%,60%,80%     { filter: brightness(.3); }
}
.screen-flash { animation: screenFlash .8s ease both; }

/* ============================================================
   MODO PORFI (post-destrucción) — Actualizado
   ============================================================ */
body.porfi-mode .access-bg {
  background:
    radial-gradient(ellipse at 50% 35%, rgba(255,180,200,.2) 0%, transparent 60%),
    radial-gradient(ellipse at 30% 70%, rgba(255,150,180,.15) 0%, transparent 50%),
    linear-gradient(150deg, #ffe8f2 0%, #ffd0e8 40%, #fce0f0 100%) !important;
}
body.porfi-mode .access-bg-lines { opacity: .03; }

body.porfi-mode .access-card {
  background: rgba(255,255,255,.5);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-color: rgba(200,60,110,.2);
  box-shadow: 0 8px 48px rgba(180,40,80,.12), 0 0 60px rgba(220,150,180,.1);
}
body.porfi-mode .access-card-aura {
  background: radial-gradient(circle, rgba(232,82,122,.1) 0%, transparent 70%);
}

body.porfi-mode .access-ring-track { stroke: rgba(200,60,110,.1); }
body.porfi-mode .access-ring-glow {
  stroke: rgba(232,82,122,.4);
  filter: drop-shadow(0 0 6px rgba(232,82,122,.4));
}

body.porfi-mode .access-lock-icon {
  filter: none;
  animation: heartbeat 1.4s ease-in-out infinite;
}

body.porfi-mode .access-title {
  color: var(--rose-dark);
  text-shadow: none;
  font-style: italic;
}

body.porfi-mode .access-sep-line { background: linear-gradient(90deg, transparent, rgba(232,82,122,.3), transparent); }
body.porfi-mode .access-sep-star { color: rgba(232,82,122,.5); }

body.porfi-mode .access-subtitle { color: var(--text-soft); }

body.porfi-mode .access-input {
  background: rgba(255,255,255,.65);
  border-color: rgba(232,82,122,.35);
  color: var(--text);
}
body.porfi-mode .access-input::placeholder { color: rgba(150,80,110,.4); }
body.porfi-mode .access-input:focus {
  border-color: var(--rose-dark);
  background: #fff;
  box-shadow: 0 0 20px rgba(232,82,122,.1), 0 0 0 3px rgba(232,82,122,.05);
}
body.porfi-mode .access-input-icon { opacity: .9; }

body.porfi-mode .btn-access {
  background: linear-gradient(135deg, #f06292, #c23560);
  color: #fff;
  box-shadow: 0 4px 20px rgba(200,50,100,.3);
}
body.porfi-mode .btn-access:hover {
  box-shadow: 0 10px 28px rgba(200,50,100,.45);
}

body.porfi-mode .access-error {
  color: var(--rose-dark);
  background: rgba(200,50,100,.08);
  border-color: rgba(200,50,100,.2);
}

body.porfi-mode .sparkle { filter: hue-rotate(0deg); }
body.porfi-mode #sparkles-access .sparkle { color: #e8527a; }


:root {
  --rose:       #e8527a;
  --rose-dark:  #c23560;
  --rose-light: #fde8ef;
  --gold:       #f5c842;
  --gold-dark:  #d4a017;
  --cream:      #fff8f0;
  --text:       #2d1b2e;
  --text-soft:  #6b4c6e;
  --locked:     #c9bfc9;
  --radius:     18px;
  --shadow:     0 8px 32px rgba(200,60,100,.18);
  --transition: .35s cubic-bezier(.4,0,.2,1);
}

html, body {
  height: 100%;
  font-family: 'Nunito', sans-serif;
  background: var(--cream);
  color: var(--text);
  overflow-x: hidden;
}

/* ---- SCREENS ---- */
.screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(24px);
  transition: opacity var(--transition), transform var(--transition);
  overflow-y: auto;
  padding: 24px 16px;
}

.screen.active {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
  z-index: 10;
}

/* Evita el parpadeo de la barra de scroll en la pantalla de premio */
#screen-prize {
  overflow: hidden;
  overscroll-behavior: none;
}

/* ============================================================
   WELCOME SCREEN — Rediseño completo
   ============================================================ */

/* ── Fondo multicapa ────────────────────────────────────── */
.welcome-bg {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255,200,180,.3) 0%, transparent 55%),
    radial-gradient(ellipse at 25% 75%, rgba(255,180,210,.2) 0%, transparent 45%),
    radial-gradient(ellipse at 80% 20%, rgba(220,180,240,.2) 0%, transparent 50%),
    linear-gradient(165deg, #fff0f5 0%, #fde8f0 30%, #fef5fa 60%, #fdf0f8 100%);
  z-index: -1;
}

/* Orbes de luz flotantes */
.welcome-orbs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.welcome-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  animation: orbFloat 8s ease-in-out infinite;
}
.welcome-orb--1 {
  width: 300px; height: 300px;
  background: rgba(255,180,160,.25);
  top: 10%; left: -5%;
  animation-delay: 0s;
}
.welcome-orb--2 {
  width: 250px; height: 250px;
  background: rgba(255,150,200,.2);
  bottom: 15%; right: -5%;
  animation-delay: -3s;
}
.welcome-orb--3 {
  width: 200px; height: 200px;
  background: rgba(200,160,240,.2);
  top: 55%; left: 40%;
  animation-delay: -5.5s;
}
@keyframes orbFloat {
  0%,100% { transform: translate(0, 0) scale(1); }
  25%     { transform: translate(30px, -20px) scale(1.1); }
  50%     { transform: translate(-15px, -40px) scale(.9); }
  75%     { transform: translate(-25px, 10px) scale(1.05); }
}

/* Sparkles (generadas por JS, el estilo .sparkle y @keyframes sparkleFly
   se definen al final del archivo para que el JS los use con inline styles) */
.sparkles {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* ── Contenedor principal ───────────────────────────────── */
.welcome-content {
  text-align: center;
  max-width: 560px;
  width: 100%;
  padding: 0 20px;
  animation: welcomeFloatIn .9s cubic-bezier(.2,1,.3,1) both;
  position: relative;
  z-index: 1;
}
@keyframes welcomeFloatIn {
  from { opacity: 0; transform: translateY(40px) scale(.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Card cristal ───────────────────────────────────────── */
.welcome-card {
  position: relative;
  border-radius: 32px;
  background: rgba(255,255,255,.45);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255,255,255,.6);
  box-shadow:
    0 12px 56px rgba(180,60,100,.1),
    0 0 0 1px rgba(255,220,235,.4) inset,
    0 0 80px rgba(255,180,200,.12);
  overflow: hidden;
}

/* Aura rosada detrás de la card */
.welcome-card-aura {
  position: absolute;
  top: -80px; left: 50%;
  transform: translateX(-50%);
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(255,150,180,.14) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  animation: welcomeAuraBreath 5s ease-in-out infinite;
}
@keyframes welcomeAuraBreath {
  0%,100% { transform: translateX(-50%) scale(1);   opacity: .6; }
  50%     { transform: translateX(-50%) scale(1.25); opacity: 1; }
}

.welcome-card-inner {
  position: relative;
  z-index: 1;
  padding: 48px 40px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── Anillo decorativo del corazón ──────────────────────── */
.welcome-heart-ring {
  position: relative;
  width: 130px; height: 130px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.welcome-ring-svg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  animation: welcomeRingPulse 4s ease-in-out infinite;
}
@keyframes welcomeRingPulse {
  0%,100% { transform: scale(1) rotate(0deg); }
  50%     { transform: scale(1.06) rotate(5deg); }
}

.welcome-ring-track {
  fill: none;
  stroke: rgba(200,60,110,.1);
  stroke-width: 2;
  stroke-dasharray: 8 4;
}

.welcome-ring-glow {
  fill: none;
  stroke: rgba(232,82,122,.3);
  stroke-width: 2.5;
  stroke-dasharray: 50 264;
  filter: drop-shadow(0 0 8px rgba(232,82,122,.35));
  animation: welcomeRingDash 3.5s ease-in-out infinite;
}
@keyframes welcomeRingDash {
  0%,100% { stroke-dashoffset: 0;   stroke: rgba(232,82,122,.3); }
  50%     { stroke-dashoffset: 35;  stroke: rgba(232,82,122,.6); }
}

/* Corazón grande */
.heart-big {
  font-size: 3.2rem;
  display: inline-block;
  position: relative;
  z-index: 2;
  animation: heartbeat 1.6s ease-in-out infinite;
  filter: drop-shadow(0 0 18px rgba(232,82,122,.4));
}
@keyframes heartbeat {
  0%,100% { transform: scale(1); }
  14%     { transform: scale(1.18); }
  28%     { transform: scale(1); }
  42%     { transform: scale(1.1); }
  70%     { transform: scale(1); }
}

/* ── Título ─────────────────────────────────────────────── */
.title-main {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.9rem, 5vw, 3rem);
  color: #b83055;
  line-height: 1.2;
  margin-bottom: 0;
  letter-spacing: .3px;
}

.title-main span {
  color: #c93860;
  position: relative;
  display: inline-block;
}
/* Subrayado decorativo sutil bajo el nombre */
.title-main span::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(232,82,122,.35), transparent);
  border-radius: 2px;
}

/* ── Separador floral ───────────────────────────────────── */
.welcome-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 18px 0 16px;
}
.welcome-sep-petal {
  font-size: .85rem;
  animation: petalWiggle 2.5s ease-in-out infinite;
}
.welcome-sep-petal:nth-child(1) { animation-delay: 0s; }
.welcome-sep-petal:nth-child(3) { animation-delay: -.8s; }
.welcome-sep-petal:nth-child(5) { animation-delay: -1.6s; }
@keyframes petalWiggle {
  0%,100% { transform: rotate(0deg) scale(1); }
  50%     { transform: rotate(12deg) scale(1.2); }
}
.welcome-sep-dot {
  font-size: .7rem;
  color: rgba(180,60,100,.25);
}

/* ── Subtítulos ─────────────────────────────────────────── */
.subtitle {
  font-size: 1.05rem;
  color: #7a5c6e;
  line-height: 1.75;
  margin-bottom: 8px;
  max-width: 420px;
}

.subtitle-small {
  font-size: .88rem;
  color: #b095a5;
  margin-bottom: 30px;
  font-style: italic;
}

/* ============================================================
   BUTTONS — Actualizados
   ============================================================ */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #e8527a, #b83055);
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 17px 44px;
  font-size: 1.1rem;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 28px rgba(200,50,100,.3);
  transition: transform .25s, box-shadow .25s, filter .25s;
  letter-spacing: .4px;
  position: relative;
  overflow: hidden;
}
/* Brillo sutil en hover */
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.15) 0%, transparent 60%);
  opacity: 0;
  transition: opacity .25s;
  border-radius: 50px;
  pointer-events: none;
}
.btn-primary:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 38px rgba(200,50,100,.4);
  filter: brightness(1.06);
}
.btn-primary:hover::after { opacity: 1; }
.btn-primary:active { transform: translateY(0) scale(.97); }

.btn-primary-label {}
.btn-primary-emoji {
  font-size: 1.2rem;
  animation: btnEmojiBounce 1.8s ease-in-out infinite;
}
@keyframes btnEmojiBounce {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-4px); }
}

.btn-back {
  background: none;
  border: 2px solid var(--rose-light);
  color: var(--rose-dark);
  border-radius: 50px;
  padding: 8px 20px;
  font-family: 'Nunito', sans-serif;
  font-size: .95rem;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  align-self: flex-start;
  margin-bottom: 16px;
}
.btn-back:hover { background: var(--rose-light); }

.btn-submit {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: var(--text);
  border: none;
  border-radius: 50px;
  padding: 12px 32px;
  font-family: 'Nunito', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 4px 16px rgba(200,160,0,.3);
}
.btn-submit:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(200,160,0,.4); }

/* ============================================================
   MAP SCREEN — Rediseño total "Constelación de Retos"
   ============================================================ */

/* ── Fondo cósmico ──────────────────────────────────────── */
#screen-map {
  background:
    radial-gradient(ellipse at 50% 20%, rgba(80,30,130,.35) 0%, transparent 55%),
    radial-gradient(ellipse at 25% 70%, rgba(30,10,70,.3) 0%, transparent 50%),
    radial-gradient(ellipse at 75% 40%, rgba(50,15,90,.25) 0%, transparent 50%),
    linear-gradient(170deg, #0c021c 0%, #15082e 35%, #0d0420 70%, #060210 100%);
  justify-content: flex-start;
  align-items: stretch;
  padding: 0;
}

.map-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

/* Floating star particles container */
.map-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

/* Nebulosa decorativa (manchas de color sutiles) */
.map-nebula {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .18;
  background:
    radial-gradient(ellipse 600px 400px at 20% 30%, rgba(120,80,200,.4), transparent),
    radial-gradient(ellipse 500px 350px at 75% 60%, rgba(60,30,140,.35), transparent),
    radial-gradient(ellipse 400px 300px at 50% 85%, rgba(40,20,100,.3), transparent);
  filter: blur(40px);
  animation: nebulaDrift 20s ease-in-out infinite;
}
@keyframes nebulaDrift {
  0%,100% { transform: translate(0, 0); }
  33%     { transform: translate(-15px, 10px); }
  66%     { transform: translate(10px, -8px); }
}

/* ── Contenedor principal ───────────────────────────────── */
.map-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 32px 32px 80px;
}

/* ── HEADER ─────────────────────────────────────────────── */
.map-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 36px;
  padding: 0 8px;
}

.map-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.3rem, 3.5vw, 1.75rem);
  color: rgba(255,255,255,.9);
  letter-spacing: .4px;
  margin: 0;
  font-weight: 400;
  position: relative;
  padding-left: 28px;
}
.map-title::before {
  content: '✦';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-55%);
  color: var(--gold);
  font-size: .9rem;
  animation: titleStarPulse 2.5s ease-in-out infinite;
}
@keyframes titleStarPulse {
  0%,100% { opacity: .5; transform: translateY(-55%) scale(1); }
  50%     { opacity: 1;  transform: translateY(-55%) scale(1.3); }
}

/* ── Pastilla de progreso con estrellas ─────────────────── */
.map-progress-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50px;
  padding: 8px 18px;
}
.map-progress-stars {
  display: flex;
  gap: 3px;
  font-size: .85rem;
}
.progress-star {
  color: rgba(255,255,255,.18);
  transition: color .4s, text-shadow .4s;
}
.progress-star.lit {
  color: var(--gold);
  text-shadow: 0 0 8px rgba(245,200,66,.6);
}
.map-progress-label {
  font-size: .8rem;
  font-weight: 700;
  color: rgba(255,255,255,.5);
  letter-spacing: .5px;
}

/* Botón testing en mapa */
.map-test-btn {
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.35);
  border-radius: 8px;
  padding: 4px 14px;
  font-size: .68rem;
  font-family: 'Nunito', sans-serif;
  cursor: pointer;
  transition: all .2s;
  opacity: 0;
  white-space: nowrap;
}
.map-header:hover .map-test-btn { opacity: .6; }
.map-test-btn:hover {
  opacity: 1 !important;
  background: rgba(0,0,0,.6);
  color: rgba(255,255,255,.7);
  border-color: rgba(245,200,66,.3);
}

/* ── GRID ────────────────────────────────────────────────── */
.map-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  width: 100%;
  padding: 4px 8px;
}

/* ═══════════════════════════════════════════════════════════
   STAR CARD — Tarjeta tipo constelación
   ═══════════════════════════════════════════════════════════ */
.star-card {
  position: relative;
  border-radius: 24px;
  cursor: pointer;
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
  transition:
    transform .45s cubic-bezier(.2,1,.3,1),
    box-shadow .45s ease,
    border-color .45s ease,
    background .45s ease;
  animation: starCardEnter .6s cubic-bezier(.2,1,.3,1) both;
  animation-delay: calc(var(--i, 0) * 80ms);
  min-height: 260px;
  display: flex;
  flex-direction: column;
}
@keyframes starCardEnter {
  from { opacity: 0; transform: translateY(32px) scale(.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Constelación decorativa (top) ──────────────────────── */
.star-card-constellation {
  position: absolute;
  top: 16px; left: 20px; right: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  height: 8px;
  z-index: 1;
  pointer-events: none;
  opacity: .5;
  transition: opacity .4s;
}
.star-card:hover .star-card-constellation { opacity: .85; }

.star-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent, rgba(255,255,255,.5));
  flex-shrink: 0;
  box-shadow: 0 0 6px var(--accent, rgba(255,255,255,.4));
}
.star-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--accent, rgba(255,255,255,.3)), transparent);
  opacity: .5;
}

/* ═══════════════════════════════════════════════════════════
   STAR CARD — Frame interior
   ═══════════════════════════════════════════════════════════ */
.star-card-frame {
  position: relative;
  z-index: 1;
  padding: 42px 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
}

/* ── Emoji en anillo ────────────────────────────────────── */
.star-card-emoji-wrap {
  position: relative;
  width: 88px; height: 88px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.star-card-emoji-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.1);
  box-shadow: 0 0 30px rgba(255,255,255,.04) inset;
  transition: border-color .4s, box-shadow .4s;
}
.star-card:hover .star-card-emoji-ring {
  border-color: var(--accent, rgba(255,255,255,.3));
  box-shadow:
    0 0 40px color-mix(in srgb, var(--accent, #fff) 15%, transparent) inset,
    0 0 30px color-mix(in srgb, var(--accent, #fff) 20%, transparent);
}

.star-card-emoji {
  font-size: 2.8rem;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 0 14px rgba(255,255,255,.12));
  transition: transform .35s, filter .35s;
}
.star-card:hover .star-card-emoji {
  transform: scale(1.15);
  filter: drop-shadow(0 0 20px color-mix(in srgb, var(--accent, #fff) 35%, transparent));
}

/* ── Cuerpo (tipo + título) ─────────────────────────────── */
.star-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.star-card-type {
  display: inline-block;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--accent, rgba(255,255,255,.6));
  opacity: .7;
  transition: opacity .3s;
}
.star-card:hover .star-card-type { opacity: 1; }

.star-card-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  color: rgba(255,255,255,.88);
  line-height: 1.35;
  margin: 0;
  font-weight: 400;
  max-width: 200px;
}

/* ── Footer ─────────────────────────────────────────────── */
.star-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.06);
}

.star-card-num {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-weight: 700;
  color: rgba(255,255,255,.2);
  letter-spacing: 1px;
  transition: color .3s;
}
.star-card:hover .star-card-num { color: rgba(255,255,255,.4); }

.star-card-cta {
  font-size: .8rem;
  font-weight: 700;
  color: var(--accent, #fff);
  letter-spacing: .4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap .3s, opacity .3s;
}
.star-card:hover .star-card-cta { gap: 10px; }

.star-card-done {
  font-size: .78rem;
  font-weight: 700;
  color: #5ddb8a;
  letter-spacing: .3px;
}

/* ── Glow al hover ──────────────────────────────────────── */
.star-card-glow {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background: radial-gradient(
    ellipse at 50% 30%,
    color-mix(in srgb, var(--accent, #fff) 12%, transparent),
    transparent 70%
  );
  opacity: 0;
  transition: opacity .45s;
  pointer-events: none;
  z-index: 0;
}
.star-card:hover .star-card-glow { opacity: 1; }

/* ── Hover completo ─────────────────────────────────────── */
.star-card:hover {
  transform: translateY(-8px);
  border-color: color-mix(in srgb, var(--accent, #fff) 40%, transparent);
  box-shadow:
    0 20px 60px rgba(0,0,0,.5),
    0 0 80px color-mix(in srgb, var(--accent, #fff) 10%, transparent);
}

/* ═══════════════════════════════════════════════════════════
   STAR CARD — Estados
   ═══════════════════════════════════════════════════════════ */

/* ── Completed ──────────────────────────────────────────── */
.star-card.completed {
  border-color: rgba(245,200,66,.2);
  background: rgba(255,255,255,.04);
}
.star-card.completed .star-card-emoji-ring {
  border-color: rgba(245,200,66,.35);
  box-shadow: 0 0 35px rgba(245,200,66,.08) inset;
}
.star-card.completed .star-card-num { color: rgba(245,200,66,.35); }

/* Shimmer dorado en completadas */
.star-card-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(245,200,66,.08) 48%,
    rgba(245,200,66,.04) 52%,
    transparent 65%
  );
  background-size: 250% 100%;
  background-position: -250% 0;
  animation: starShimmer 5s ease-in-out 2s infinite;
  pointer-events: none;
  border-radius: 24px;
  z-index: 0;
}
@keyframes starShimmer {
  0%       { background-position: -250% 0; }
  35%,100% { background-position: 250% 0; }
}

/* ── Secret hidden (placeholder invisible) ──────────────── */
.star-card.secret-hidden {
  visibility: hidden;
  pointer-events: none;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  min-height: 260px;
}

/* ── Secret revealed ────────────────────────────────────── */
.star-card.secret-revealed {
  --accent: #f5c842;
  border-color: rgba(245,200,66,.4);
  animation: secretReveal .9s cubic-bezier(.2,1.3,.5,1) both;
}
@keyframes secretReveal {
  0%   { opacity: 0; transform: scale(.35) rotate(-15deg); filter: brightness(3); }
  55%  { transform: scale(1.05) rotate(2deg); filter: brightness(1.15); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); filter: brightness(1); }
}
.star-card.secret-revealed .star-card-num {
  color: rgba(245,200,66,.5);
}
.star-card.secret-revealed .star-card-emoji-ring {
  border-color: rgba(245,200,66,.5);
  box-shadow: 0 0 45px rgba(245,200,66,.12) inset, 0 0 35px rgba(245,200,66,.15);
}
.star-card.secret-revealed:hover {
  box-shadow:
    0 20px 60px rgba(0,0,0,.5),
    0 0 100px rgba(245,200,66,.25);
}

/* Tarjeta especial (no es reto, es experiencia) */
.star-card.special-card {
  --accent: #f5c842;
}
.star-card.special-card .star-card-emoji-ring {
  border-color: rgba(245,200,66,.4);
  box-shadow: 0 0 45px rgba(245,200,66,.1) inset, 0 0 30px rgba(245,200,66,.12);
  animation: specialRingPulse 2s ease-in-out infinite;
}
@keyframes specialRingPulse {
  0%,100% { box-shadow: 0 0 45px rgba(245,200,66,.1) inset, 0 0 30px rgba(245,200,66,.12); }
  50%     { box-shadow: 0 0 60px rgba(245,200,66,.2) inset, 0 0 45px rgba(245,200,66,.25); }
}
.star-card.special-card .star-card-emoji {
  animation: specialEmojiSpin 4s ease-in-out infinite;
}
@keyframes specialEmojiSpin {
  0%,100% { transform: scale(1) rotate(0deg); }
  50%     { transform: scale(1.1) rotate(10deg); }
}
.star-card.special-card .star-card-title {
  color: #f0d878;
}
.star-card.special-card .star-card-cta {
  color: #f0d878;
  font-weight: 800;
}

/* ═══════════════════════════════════════════════════════════
   ANIMACIÓN DE REVELACIÓN ÉPICA — Tarjeta secreta
   ═══════════════════════════════════════════════════════════ */

/* ── Fase 1: Cartas se disuelven ── */
.star-card.dissolving {
  pointer-events: none !important;
  animation: cardDissolve .7s ease-in forwards;
}
.star-card.dissolving:nth-child(1)  { animation-delay: .05s; }
.star-card.dissolving:nth-child(2)  { animation-delay: .15s; }
.star-card.dissolving:nth-child(3)  { animation-delay: .25s; }
.star-card.dissolving:nth-child(4)  { animation-delay: .35s; }
.star-card.dissolving:nth-child(5)  { animation-delay: .45s; }
.star-card.dissolving:nth-child(6)  { animation-delay: .55s; }
.star-card.dissolving:nth-child(7)  { animation-delay: .65s; }
.star-card.dissolving:nth-child(8)  { animation-delay: .75s; }
.star-card.dissolving:nth-child(9)  { animation-delay: .85s; }

@keyframes cardDissolve {
  0%   { opacity: 1; transform: scale(1) translateY(0); filter: brightness(1) blur(0); }
  30%  { opacity: .8; filter: brightness(1.8) blur(0); }
  100% { opacity: 0; transform: scale(.5) translateY(-40px); filter: brightness(3) blur(4px); }
}

.star-card.dissolved {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden;
  max-height: 0;
  margin: 0;
  padding: 0;
  border: none;
  overflow: hidden;
  transition: max-height .5s ease .3s, margin .5s ease .3s, padding .5s ease .3s;
}

/* ── Fase 2: Overlay oscuro ── */
.map-dark-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: radial-gradient(ellipse at center, rgba(5,0,10,.7) 0%, rgba(0,0,0,.95) 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease;
}
.map-dark-overlay.active {
  opacity: 1;
}

/* ── Fase 3: Haz de luz ── */
.map-light-beam {
  position: fixed;
  top: 50%; left: 50%;
  width: 400px; height: 400px;
  transform: translate(-50%, -50%);
  z-index: 51;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(245,200,66,.18) 0%,
    rgba(245,200,66,.06) 30%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity .6s ease;
}
.map-light-beam.active {
  opacity: 1;
  animation: lightBeamPulse 2s ease-in-out infinite;
}
@keyframes lightBeamPulse {
  0%,100% { transform: translate(-50%, -50%) scale(1); opacity: .8; }
  50%     { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
}

/* Rayos de luz */
.map-light-rays {
  position: fixed;
  top: 50%; left: 50%;
  width: 600px; height: 600px;
  transform: translate(-50%, -50%);
  z-index: 51;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease .3s;
  background:
    conic-gradient(
      from 0deg,
      transparent 0deg, rgba(245,200,66,.08) 3deg, transparent 6deg,
      transparent 45deg, rgba(245,200,66,.12) 48deg, transparent 51deg,
      transparent 90deg, rgba(245,200,66,.06) 93deg, transparent 96deg,
      transparent 135deg, rgba(245,200,66,.1) 138deg, transparent 141deg,
      transparent 180deg, rgba(245,200,66,.07) 183deg, transparent 186deg,
      transparent 225deg, rgba(245,200,66,.11) 228deg, transparent 231deg,
      transparent 270deg, rgba(245,200,66,.05) 273deg, transparent 276deg,
      transparent 315deg, rgba(245,200,66,.09) 318deg, transparent 321deg
    );
  animation: raysSlowSpin 25s linear infinite;
}
.map-light-rays.active {
  opacity: 1;
}
@keyframes raysSlowSpin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ── Fase 4: Carta secreta épica ── */
.star-card.epic-center {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 55 !important;
  width: 340px;
  max-width: 90vw;
  min-height: 340px;
  animation: epicRise 1.2s cubic-bezier(.16,1,.3,1) both;
  border-color: rgba(245,200,66,.5) !important;
  box-shadow: 0 0 120px rgba(245,200,66,.2), 0 30px 80px rgba(0,0,0,.7) !important;
}
@keyframes epicRise {
  0%   { opacity: 0; filter: brightness(3) blur(6px); }
  40%  { opacity: 1; filter: brightness(1.4) blur(0); }
  60%  { opacity: 1; }
  100% { opacity: 1; filter: brightness(1); }
}

.star-card.epic-center .star-card-emoji-ring {
  animation: epicRingGlow 2s ease-in-out infinite;
  border-color: rgba(245,200,66,.6) !important;
  box-shadow:
    0 0 60px rgba(245,200,66,.35) inset,
    0 0 100px rgba(245,200,66,.25) !important;
}
@keyframes epicRingGlow {
  0%,100% {
    box-shadow: 0 0 60px rgba(245,200,66,.35) inset, 0 0 100px rgba(245,200,66,.25);
    border-color: rgba(245,200,66,.6);
  }
  50% {
    box-shadow: 0 0 100px rgba(245,200,66,.6) inset, 0 0 180px rgba(245,200,66,.45);
    border-color: rgba(245,200,66,.9);
  }
}

.star-card.epic-center .star-card-emoji {
  animation: epicEmojiFloat 2.5s ease-in-out infinite;
  filter: drop-shadow(0 0 25px rgba(245,200,66,.7)) !important;
}
@keyframes epicEmojiFloat {
  0%,100% { transform: scale(1); }
  30%     { transform: scale(1.2); }
  60%     { transform: scale(.95); }
}

/* Partículas que explotan desde el centro */
.reveal-particle {
  position: fixed;
  pointer-events: none;
  z-index: 999;
  animation: particleBurst ease-out forwards;
}
@keyframes particleBurst {
  0%   { transform: translate(0, 0) scale(1.2); opacity: 1; }
  60%  { opacity: .7; }
  100% { transform: translate(var(--dx, 80px), var(--dy, -80px)) scale(0); opacity: 0; }
}

/* Partículas tipo polvo de estrellas flotando */
.epic-floating-particle {
  position: fixed;
  pointer-events: none;
  z-index: 56;
  animation: floatUpFade linear forwards;
}
@keyframes floatUpFade {
  0%   { opacity: 0; transform: translateY(0) scale(0); }
  10%  { opacity: 1; transform: translateY(-20px) scale(1.3); }
  100% { opacity: 0; transform: translateY(-200px) scale(.3); }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — Mapa
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .map-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .map-container { padding: 24px 20px 40px; }
  .star-card { min-height: 230px; }
  .star-card-frame { padding: 36px 20px 20px; }
  .star-card-emoji-wrap { width: 72px; height: 72px; }
  .star-card-emoji { font-size: 2.2rem; }
  .star-card-title { font-size: 1rem; }
}
@media (max-width: 500px) {
  .map-grid { grid-template-columns: 1fr; gap: 18px; }
  .map-container { padding: 20px 12px 40px; }
  .map-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .star-card { min-height: 200px; }
  .star-card-frame { padding: 32px 18px 18px; }
}

/* ============================================================
   CHALLENGE SCREEN — Rediseño inmersivo
   Sin carta blanca, elementos flotando sobre fondo profundo
   ============================================================ */

/* ── Fondo profundo con textura ──────────────────────────── */
#screen-challenge {
  background:
    radial-gradient(ellipse at 50% 15%, rgba(160,100,40,.15) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 80%, rgba(100,50,70,.12) 0%, transparent 40%),
    radial-gradient(ellipse at 20% 70%, rgba(60,30,50,.1) 0%, transparent 35%),
    linear-gradient(172deg, #12061a 0%, #1a0a22 35%, #14081c 65%, #0e0414 100%);
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
}

/* Partículas doradas sutiles de fondo */
.challenge-bg-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .045;
  background-image:
    radial-gradient(circle at 18% 28%, #f5c842 1px, transparent 1px),
    radial-gradient(circle at 72% 55%, #d4a017 1px, transparent 1px),
    radial-gradient(circle at 45% 78%, #f5c842 1px, transparent 1px),
    radial-gradient(circle at 88% 22%, #c89818 1px, transparent 1px),
    radial-gradient(circle at 55% 12%, #d4a017 1px, transparent 1px);
  background-size: 200px 200px, 260px 260px, 220px 220px, 180px 180px, 240px 240px;
  background-position: 0 0, 30px 30px, 60px 40px, 20px 50px, 80px 10px;
}

/* ── Contenedor ──────────────────────────────────────────── */
.challenge-wrap {
  position: relative;
  z-index: 1;
  max-width: 580px;
  width: 100%;
  margin: 0 auto;
  padding: 22px 24px 80px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* ── Botón volver ────────────────────────────────────────── */
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.5);
  border-radius: 50px;
  padding: 8px 18px;
  font-family: 'Nunito', sans-serif;
  font-size: .84rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .25s;
  align-self: flex-start;
  margin-bottom: 32px;
}
.btn-back-arrow { font-size: 1rem; transition: transform .25s; }
.btn-back:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(245,200,66,.25);
  color: #e8c860;
}
.btn-back:hover .btn-back-arrow { transform: translateX(-3px); }

/* ── Cabecera centrada ──────────────────────────────────── */
.challenge-header {
  text-align: center;
  margin-bottom: 0;
}

.challenge-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(245,200,66,.08);
  color: #c8a030;
  border: 1px solid rgba(200,160,40,.18);
  border-radius: 50px;
  padding: 5px 16px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.challenge-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.5rem, 4vw, 2rem);
  color: #f0d878;
  margin-bottom: 8px;
  line-height: 1.2;
  text-shadow: 0 0 30px rgba(200,150,40,.15);
}

.challenge-desc {
  color: rgba(255,255,255,.45);
  font-size: .92rem;
  line-height: 1.6;
  max-width: 400px;
  margin: 0 auto;
}

/* ── Indicador de progreso (dots) ───────────────────────── */
.challenge-progress {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 22px 0 28px;
}
.challenge-progress.hidden { display: none !important; }

.progress-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.08);
  transition: all .35s ease;
}
.progress-dot.active {
  background: #e8c040;
  border-color: #e8c040;
  box-shadow: 0 0 12px rgba(220,170,40,.5);
  transform: scale(1.3);
}
.progress-dot.done {
  background: rgba(200,150,40,.35);
  border-color: rgba(200,150,40,.5);
}

/* ── Feedback flotante ──────────────────────────────────── */
.challenge-feedback {
  margin-top: 20px;
  padding: 13px 22px;
  border-radius: 14px;
  font-weight: 700;
  font-size: .92rem;
  text-align: center;
  animation: fadeSlide .3s ease;
  letter-spacing: .3px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.challenge-feedback.correct {
  background: rgba(40,180,90,.15);
  color: #7ff0a0;
  border: 1px solid rgba(60,210,110,.2);
}
.challenge-feedback.wrong {
  background: rgba(210,50,50,.13);
  color: #ffb0b0;
  border: 1px solid rgba(230,100,100,.18);
  animation: shake .4s ease;
}
@keyframes shake {
  0%,100%{ transform:translateX(0); }
  20%    { transform:translateX(-8px); }
  40%    { transform:translateX(8px); }
  60%    { transform:translateX(-5px); }
  80%    { transform:translateX(5px); }
}
@keyframes fadeSlide {
  from{ opacity:0; transform:translateY(8px); }
  to  { opacity:1; transform:translateY(0); }
}
.hidden { display: none !important; }

/* ═══════════════════════════════════════════════════════════
   TRIVIA — Opciones grandes y elegantes
   ═══════════════════════════════════════════════════════════ */
.trivia-question-card {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  line-height: 1.65;
  color: rgba(255,255,255,.85);
  text-align: center;
  margin-bottom: 28px;
  padding: 22px 24px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.trivia-step-badge {
  display: inline-block;
  font-family: 'Nunito', sans-serif;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #c8a030;
  background: rgba(200,150,40,.1);
  border-radius: 50px;
  padding: 5px 14px;
}

.trivia-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.trivia-option {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 18px 22px;
  cursor: pointer;
  font-size: 1rem;
  font-family: 'Nunito', sans-serif;
  font-weight: 500;
  transition: all .25s ease;
  text-align: left;
  position: relative;
  color: rgba(255,255,255,.8);
  letter-spacing: .2px;
}
/* Numerito sutil a la izquierda */
.trivia-option::before {
  content: attr(data-num);
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  font-size: .7rem;
  font-weight: 800;
  color: rgba(255,255,255,.15);
  transition: color .25s;
}
/* Ajuste de padding para el numerito */
.trivia-option {
  padding-left: 42px;
}

.trivia-option:hover:not(:disabled) {
  background: rgba(255,255,255,.08);
  border-color: rgba(200,160,40,.35);
  transform: translateX(5px);
  box-shadow: 0 0 30px rgba(200,150,40,.08);
}
.trivia-option:hover:not(:disabled)::before { color: rgba(200,160,40,.5); }
.trivia-option.correct {
  background: rgba(40,180,90,.12);
  border-color: rgba(60,210,110,.35);
  color: #b0ffc8;
}
.trivia-option.correct::before { color: rgba(80,220,130,.6); }
.trivia-option.wrong {
  background: rgba(210,50,50,.1);
  border-color: rgba(230,100,100,.3);
  color: #ffb8b8;
}
.trivia-option.wrong::before { color: rgba(240,120,120,.5); }
.trivia-option:disabled { cursor: default; }

/* ═══════════════════════════════════════════════════════════
   RIDDLE / PHOTO
   ═══════════════════════════════════════════════════════════ */
.riddle-question-card {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  line-height: 1.7;
  padding: 24px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 18px;
  margin-bottom: 24px;
  color: rgba(255,255,255,.85);
  text-align: center;
}

.riddle-input-row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  align-items: center;
}

.riddle-input-shell { flex: 1; }

.riddle-input {
  width: 100%;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50px;
  padding: 14px 22px;
  font-family: 'Nunito', sans-serif;
  font-size: 1rem;
  outline: none;
  transition: border-color .25s, box-shadow .25s, background .25s;
  background: rgba(255,255,255,.04);
  color: #fff;
  text-align: center;
  letter-spacing: .3px;
}
.riddle-input::placeholder { color: rgba(255,255,255,.2); font-style: italic; }
.riddle-input:focus {
  border-color: rgba(200,150,50,.35);
  box-shadow: 0 0 0 3px rgba(200,150,50,.06);
  background: rgba(255,255,255,.07);
}

.riddle-hint {
  font-size: .84rem;
  color: rgba(255,255,255,.4);
  font-style: italic;
  margin-top: 10px;
  padding-left: 14px;
  border-left: 2px solid rgba(200,150,50,.18);
  text-align: left;
}

/* Photo */
.photo-frame {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  position: relative;
}
.photo-frame::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 22px;
  border: 1px solid rgba(200,150,50,.12);
  pointer-events: none;
}
.photo-img {
  max-width: 100%;
  max-height: 380px;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  object-fit: cover;
  position: relative;
  z-index: 1;
}
.photo-question {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  color: rgba(255,255,255,.75);
  margin-bottom: 18px;
  text-align: center;
}

/* Botón submit dorado */
.btn-submit {
  background: linear-gradient(135deg, #e8c040, #b08818);
  color: #1a0e02;
  border: none;
  border-radius: 50px;
  padding: 13px 28px;
  font-family: 'Nunito', sans-serif;
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s, filter .2s;
  box-shadow: 0 4px 20px rgba(180,130,20,.25);
  white-space: nowrap;
  letter-spacing: .3px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-submit-arrow { font-size: 1.1rem; transition: transform .2s; }
.btn-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(180,130,20,.35);
  filter: brightness(1.08);
}
.btn-submit:hover .btn-submit-arrow { transform: translateX(3px); }
.btn-submit:active { transform: translateY(0) scale(.97); }
.btn-submit-full { width: 100%; margin-top: 8px; justify-content: center; }

/* ═══════════════════════════════════════════════════════════
   MEMORY GAME
   ═══════════════════════════════════════════════════════════ */
.minigame-intro {
  font-size: .92rem;
  color: rgba(255,255,255,.45);
  margin-bottom: 16px;
  line-height: 1.6;
  text-align: center;
}

.memory-stats-bar {
  display: flex;
  gap: 14px;
  margin-bottom: 20px;
  justify-content: center;
}
.memory-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 50px;
  padding: 7px 16px;
  font-size: .82rem;
  color: rgba(255,255,255,.5);
  font-weight: 500;
}
.memory-stat-icon { font-size: .85rem; }
.memory-stat b { color: #d4a830; }

.memory-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  max-width: 380px;
  margin: 0 auto;
}

.mem-card {
  aspect-ratio: 1;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  position: relative;
  transform-style: preserve-3d;
  transition: transform .15s;
}
.mem-card:hover:not(.matched):not(.flipped) { transform: scale(1.05); }

.mem-card .face,
.mem-card .back {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  transition: transform .45s cubic-bezier(.4,0,.2,1);
}
.mem-card .face {
  transform: rotateY(180deg);
  background: rgba(255,255,255,.92);
  border: 2px solid rgba(200,150,50,.2);
  font-size: 2rem;
}
.mem-card .back {
  background: linear-gradient(135deg, #c89818, #8b6810);
  font-size: 1.1rem;
  color: rgba(255,255,255,.5);
  box-shadow: 0 3px 14px rgba(120,80,10,.3);
  border: 1px solid rgba(255,255,255,.1);
}
.mem-card .back::after {
  content: '?';
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: rgba(255,255,255,.25);
}

.mem-card.flipped .face { transform: rotateY(0); }
.mem-card.flipped .back  { transform: rotateY(-180deg); }
.mem-card.matched { opacity: .7; cursor: default; }
.mem-card.matched .face {
  background: rgba(40,180,90,.15);
  border-color: rgba(80,220,130,.3);
}

/* ═══════════════════════════════════════════════════════════
   DRAG & DROP
   ═══════════════════════════════════════════════════════════ */
.drag-arena {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-bottom: 6px;
}

.drag-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 54px;
  padding: 14px;
  border: 1.5px dashed rgba(255,255,255,.1);
  border-radius: 16px;
  background: rgba(255,255,255,.02);
  transition: border-color .2s, background .2s;
}

.drag-targets {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.drag-item {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(200,150,50,.2);
  border-radius: 50px;
  padding: 11px 22px;
  font-size: .9rem;
  font-weight: 600;
  color: rgba(255,255,255,.75);
  cursor: grab;
  transition: box-shadow .2s, transform .15s, border-color .2s, background .2s;
  user-select: none;
}
.drag-item:hover {
  border-color: rgba(200,150,50,.45);
  background: rgba(255,255,255,.09);
  box-shadow: 0 0 20px rgba(200,150,40,.08);
}
.drag-item:active { cursor: grabbing; transform: scale(1.04); }
.drag-item.dragging { opacity: .4; }

.drop-zone {
  min-height: 52px;
  border: 1.5px dashed rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,.02);
  transition: background .2s, border-color .2s, box-shadow .2s;
}
.drop-zone.over {
  background: rgba(200,150,40,.06);
  border-color: rgba(200,150,50,.5);
  box-shadow: 0 0 0 3px rgba(200,150,50,.08);
}
.drop-zone .zone-label {
  font-size: .85rem;
  color: rgba(255,255,255,.25);
  font-style: italic;
  flex: 1;
}
.drop-zone .zone-prefix {
  font-weight: 700;
  color: #c89830;
  min-width: 30px;
  font-size: .88rem;
}

/* ═══════════════════════════════════════════════════════════
   ARTWORK — Revelación y sub-pregunta
   ═══════════════════════════════════════════════════════════ */

/* Frase reveladora */
.artwork-reveal {
  text-align: center;
  padding: 32px 20px;
}
.artwork-reveal-icon {
  font-size: 4rem;
  margin-bottom: 16px;
  animation: prizeBounce 1s ease-in-out infinite;
}
.artwork-reveal-text {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  color: rgba(255,255,255,.7);
  line-height: 1.6;
  margin: 0;
}
.artwork-reveal-answer {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  color: #f0d878;
  text-shadow: 0 0 40px rgba(245,200,66,.5), 0 0 80px rgba(245,200,66,.2);
  margin: 0 auto;
  max-width: 480px;
  line-height: 1.35;
  letter-spacing: .5px;
  animation: answerGlow 2s ease-in-out infinite;
}
@keyframes answerGlow {
  0%,100% { text-shadow: 0 0 40px rgba(245,200,66,.5), 0 0 80px rgba(245,200,66,.2); }
  50%     { text-shadow: 0 0 60px rgba(245,200,66,.8), 0 0 120px rgba(245,200,66,.35); }
}

/* ═══════════════════════════════════════════════════════════
   CINEMATIC REVEAL — Secuencia épica final del reto de arte
   ═══════════════════════════════════════════════════════════ */
.cinematic-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #030008;
  overflow: hidden;
}

/* ── Starfield ── */
.cinematic-stars {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.cinematic-star {
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: #fff;
  animation: starTwinkle 3s ease-in-out infinite;
}
@keyframes starTwinkle {
  0%,100% { opacity: .2; transform: scale(1); }
  50%     { opacity: .9; transform: scale(1.8); }
}

/* ── Vignette ── */
.cinematic-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,.9) 100%);
  pointer-events: none;
  z-index: 1;
}

/* ── Light rays ── */
.cinematic-rays {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 2s ease;
  background:
    conic-gradient(
      from 0deg,
      transparent 0deg, rgba(245,200,66,.03) 2deg, transparent 4deg,
      transparent 30deg, rgba(245,200,66,.04) 32deg, transparent 34deg,
      transparent 60deg, rgba(245,200,66,.02) 62deg, transparent 64deg,
      transparent 90deg, rgba(245,200,66,.05) 92deg, transparent 94deg,
      transparent 120deg, rgba(245,200,66,.03) 122deg, transparent 124deg,
      transparent 150deg, rgba(245,200,66,.04) 152deg, transparent 154deg,
      transparent 180deg, rgba(245,200,66,.02) 182deg, transparent 184deg,
      transparent 210deg, rgba(245,200,66,.05) 212deg, transparent 214deg,
      transparent 240deg, rgba(245,200,66,.03) 242deg, transparent 244deg,
      transparent 270deg, rgba(245,200,66,.04) 272deg, transparent 274deg,
      transparent 300deg, rgba(245,200,66,.02) 302deg, transparent 304deg,
      transparent 330deg, rgba(245,200,66,.05) 332deg, transparent 334deg
    );
  animation: raysSpin 30s linear infinite;
}
.cinematic-rays.active {
  opacity: 1;
}
@keyframes raysSpin {
  to { transform: rotate(360deg); }
}

/* ── Stage central ── */
.cinematic-stage {
  position: relative;
  z-index: 2;
  text-align: center;
  width: 100%;
  max-width: 680px;
  padding: 0 24px;
}

/* ── Fase 1: Obras flotantes ── */
.cinematic-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-bottom: 30px;
  perspective: 800px;
}
.cinematic-artwork-mini {
  width: 72px; height: 72px;
  border-radius: 14px;
  background-size: cover;
  background-position: center;
  border: 2px solid rgba(245,200,66,.25);
  box-shadow: 0 0 30px rgba(245,200,66,.12), 0 4px 20px rgba(0,0,0,.4);
  animation: artworkFloatIn .8s cubic-bezier(.2,1.3,.5,1) both;
  opacity: 0;
  transition: transform .3s ease;
}
.cinematic-artwork-mini:nth-child(1) { animation-delay: .08s; }
.cinematic-artwork-mini:nth-child(2) { animation-delay: .2s; }
.cinematic-artwork-mini:nth-child(3) { animation-delay: .32s; }
.cinematic-artwork-mini:nth-child(4) { animation-delay: .44s; }
.cinematic-artwork-mini:nth-child(5) { animation-delay: .56s; }
.cinematic-artwork-mini:nth-child(6) { animation-delay: .68s; }
.cinematic-artwork-mini:nth-child(7) { animation-delay: .8s; }
.cinematic-artwork-mini:nth-child(8) { animation-delay: .92s; }

@keyframes artworkFloatIn {
  0%   { opacity: 0; transform: translateY(80px) scale(.4) rotateY(50deg); }
  55%  { opacity: 1; transform: translateY(-10px) scale(1.1) rotateY(-3deg); }
  75%  { transform: translateY(3px) scale(.97); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotateY(0deg); }
}

/* ── Fase 2: Convergencia ── */
.cinematic-artwork-mini.converging {
  animation: artworkConverge .7s ease-in forwards !important;
}
@keyframes artworkConverge {
  0%   { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1); }
  100% { opacity: 0; transform: translateY(-40px) scale(.2) rotate(15deg); filter: brightness(4) blur(6px); }
}

/* ── Fase 3: Pregunta ── */
.cinematic-question-wrap {
  opacity: 0;
  transform: translateY(35px);
  transition: all .8s cubic-bezier(.16,1,.3,1);
}
.cinematic-question-wrap.visible {
  opacity: 1;
  transform: translateY(0);
}
.cinematic-question-icon {
  font-size: 2.8rem;
  display: block;
  margin-bottom: 20px;
  animation: cinematicIconPulse 2.5s ease-in-out infinite;
}
@keyframes cinematicIconPulse {
  0%,100% { transform: scale(1); filter: drop-shadow(0 0 20px rgba(245,200,66,.35)); }
  50%     { transform: scale(1.1); filter: drop-shadow(0 0 50px rgba(245,200,66,.6)); }
}
.cinematic-question-text {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.15rem, 2.5vw, 1.45rem);
  font-weight: 400;
  font-style: italic;
  color: rgba(255,255,255,.75);
  letter-spacing: .8px;
  margin: 0;
  line-height: 1.6;
}

/* ── Fase 4: Respuesta épica ── */
.cinematic-answer-stage {
  opacity: 0;
  transition: opacity .6s ease;
}
.cinematic-answer-stage.revealed {
  opacity: 1;
}

.cinematic-answer-frame {
  position: relative;
  display: inline-block;
  padding: 50px 40px;
  background: radial-gradient(ellipse at center, rgba(245,200,66,.06) 0%, transparent 70%);
  border: 2px solid rgba(245,200,66,.3);
  border-radius: 28px;
  box-shadow:
    0 0 100px rgba(245,200,66,.1),
    0 0 200px rgba(245,200,66,.04),
    inset 0 0 80px rgba(245,200,66,.02);
  animation: answerFrameGlow 2.5s ease-in-out infinite;
  overflow: hidden;
}
/* Inner shimmer */
.cinematic-answer-frame::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 28px;
  background: linear-gradient(
    135deg,
    transparent 30%,
    rgba(245,200,66,.08) 50%,
    transparent 70%
  );
  background-size: 300% 300%;
  animation: frameShimmer 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes frameShimmer {
  0%,100% { background-position: 0% 0%; }
  50%     { background-position: 100% 100%; }
}
@keyframes answerFrameGlow {
  0%,100% {
    box-shadow: 0 0 100px rgba(245,200,66,.1), 0 0 200px rgba(245,200,66,.04), inset 0 0 80px rgba(245,200,66,.02);
    border-color: rgba(245,200,66,.3);
  }
  50%     {
    box-shadow: 0 0 150px rgba(245,200,66,.2), 0 0 300px rgba(245,200,66,.08), inset 0 0 100px rgba(245,200,66,.05);
    border-color: rgba(245,200,66,.5);
  }
}

.cinematic-answer-icon {
  font-size: 2.4rem;
  display: block;
  margin-bottom: 12px;
  animation: cinematicIconPulse 2.5s ease-in-out infinite;
}

.cinematic-answer-line1 {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: clamp(2rem, 5vw, 2.8rem);
  font-weight: 700;
  color: #f0d878;
  margin: 0 0 6px;
  letter-spacing: 3px;
  text-shadow:
    0 0 20px rgba(245,200,66,.5),
    0 0 60px rgba(245,200,66,.25),
    0 2px 4px rgba(0,0,0,.5);
  animation: answerTextGlow 2s ease-in-out infinite;
  line-height: 1.2;
}
@keyframes answerTextGlow {
  0%,100% { text-shadow: 0 0 20px rgba(245,200,66,.5), 0 0 60px rgba(245,200,66,.25), 0 2px 4px rgba(0,0,0,.5); }
  50%     { text-shadow: 0 0 35px rgba(245,200,66,.8), 0 0 100px rgba(245,200,66,.4), 0 2px 4px rgba(0,0,0,.5); }
}

.cinematic-answer-line2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  font-weight: 400;
  font-style: italic;
  color: rgba(255,255,255,.7);
  margin: 0;
  letter-spacing: 2px;
}

/* ── Fase 5: Destino ── */
.cinematic-destiny {
  margin-top: 24px;
  opacity: 0;
  transform: translateY(15px);
  transition: all .8s cubic-bezier(.16,1,.3,1);
}
.cinematic-destiny.visible {
  opacity: 1;
  transform: translateY(0);
}
.cinematic-destiny-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(245,200,66,.08);
  border: 1px solid rgba(245,200,66,.2);
  border-radius: 50px;
  padding: 10px 26px;
  color: #f0d878;
  font-family: 'Nunito', sans-serif;
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .4px;
  animation: destinyGlow 2s ease-in-out infinite;
}
@keyframes destinyGlow {
  0%,100% { box-shadow: 0 0 20px rgba(245,200,66,.08); }
  50%     { box-shadow: 0 0 40px rgba(245,200,66,.2); }
}

/* ── Screen shake ── */
.cinematic-shake {
  animation: screenShake .5s ease-out;
}
@keyframes screenShake {
  0%,100% { transform: translate(0); }
  10%     { transform: translate(-6px, 3px); }
  20%     { transform: translate(5px, -2px); }
  30%     { transform: translate(-4px, -4px); }
  40%     { transform: translate(3px, 2px); }
  50%     { transform: translate(-2px, -1px); }
  60%     { transform: translate(1px, 2px); }
  70%     { transform: translate(-1px, -1px); }
  80%     { transform: translate(1px, 0); }
  90%     { transform: translate(0, 1px); }
}

/* ── Partículas ── */
.cinematic-particle {
  position: absolute;
  pointer-events: none;
  z-index: 3;
  animation: cinematicParticleFly linear forwards;
}
@keyframes cinematicParticleFly {
  0%   { opacity: 1; transform: translate(0, 0) scale(0); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--ex), var(--ey)) scale(0); }
}

/* ── Flash final ── */
.cinematic-flash {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: radial-gradient(circle, rgba(245,200,66,.5) 0%, rgba(245,200,66,.15) 30%, transparent 70%);
  pointer-events: none;
  opacity: 0;
  animation: cinematicFlash .7s ease-out forwards;
}
@keyframes cinematicFlash {
  0%   { opacity: 0; transform: scale(.8); }
  30%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.3); }
}

/* Botón de skip para testing (sutil, quitar antes de producción) */
.artwork-skip-btn {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 999;
  background: rgba(0,0,0,.5);
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.4);
  border-radius: 8px;
  padding: 4px 12px;
  font-size: .68rem;
  font-family: 'Nunito', sans-serif;
  cursor: pointer;
  transition: all .2s;
  opacity: 0;
  pointer-events: none;
}
.artwork-skip-btn:hover {
  opacity: 1;
  pointer-events: auto;
  background: rgba(0,0,0,.7);
  color: rgba(255,255,255,.8);
  border-color: rgba(245,200,66,.4);
}
/* Mostrar al hacer hover cerca */
#screen-challenge:hover .artwork-skip-btn {
  opacity: .5;
  pointer-events: auto;
}

/* Sub-pregunta post-revelación */
.artwork-subquestion {
  text-align: center;
}
.artwork-subq-text {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  color: rgba(255,255,255,.85);
  margin-bottom: 20px;
  line-height: 1.6;
}
.artwork-subq-response {
  margin-top: 16px;
  padding: 14px 22px;
  background: rgba(245,200,66,.1);
  border: 1px solid rgba(245,200,66,.2);
  border-radius: 14px;
  color: #f0d878;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .3px;
}
.artwork-subq-response.hidden { display: none !important; }

/* ============================================================
   PRIZE SCREEN — "La Bóveda" — Revelación en dos pasos
   ============================================================ */

/* ── Fondo dramático ────────────────────────────────────── */
.prize-bg {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(80,20,50,.4) 0%, transparent 60%),
    radial-gradient(ellipse at 30% 70%, rgba(40,15,30,.35) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 25%, rgba(60,20,40,.3) 0%, transparent 45%),
    linear-gradient(170deg, #0d0216 0%, #180820 40%, #0f0418 70%, #0a0210 100%);
  z-index: -1;
}

/* Confetti (generado por JS) */
.confetti-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 10;
}
.confetti-piece {
  position: absolute;
  top: -20px;
  width: 10px; height: 16px;
  border-radius: 3px;
  opacity: 0;
  animation: confettiFall linear forwards;
}
@keyframes confettiFall {
  0%   { opacity: 1; transform: translateY(0) rotate(0deg); }
  100% { opacity: 0; transform: translateY(110vh) rotate(720deg); }
}

/* Partículas doradas flotantes de fondo */
.prize-particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.prize-particle {
  position: absolute;
  color: rgba(245,200,66,.5);
  animation: prizeParticleFloat ease-in-out infinite;
}
@keyframes prizeParticleFloat {
  0%,100% { transform: translateY(0) scale(1);   opacity: .15; }
  50%     { transform: translateY(-18px) scale(1.4); opacity: .4; }
}

/* ═══════════════════════════════════════════════════════════
   PASO 1 — LA BÓVEDA
   ═══════════════════════════════════════════════════════════ */
.prize-vault {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  animation: vaultEnter .7s cubic-bezier(.2,1,.3,1) both;
  padding: 0 20px;
}
.prize-vault.hidden { display: none !important; }

@keyframes vaultEnter {
  from { opacity: 0; transform: scale(.85); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes vaultOpen {
  to { opacity: 0; transform: scale(1.3); filter: brightness(2.5); }
}

/* Aura alrededor del cofre */
.prize-vault-aura {
  position: absolute;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245,200,66,.12) 0%, transparent 65%);
  animation: vaultAuraPulse 2.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes vaultAuraPulse {
  0%,100% { transform: scale(1);   opacity: .6; }
  50%     { transform: scale(1.2); opacity: 1; }
}

/* Glow inferior */
.prize-vault-glow {
  position: absolute;
  bottom: -30px;
  width: 200px; height: 40px;
  background: radial-gradient(ellipse, rgba(245,200,66,.25) 0%, transparent 70%);
  border-radius: 50%;
  animation: vaultGlowPulse 2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes vaultGlowPulse {
  0%,100% { transform: scaleX(1);   opacity: .5; }
  50%     { transform: scaleX(1.3); opacity: .9; }
}

/* El cofre */
.prize-vault-chest {
  position: relative;
  font-size: 6rem;
  margin-bottom: 24px;
  animation: chestBounce 2.2s ease-in-out infinite;
  filter: drop-shadow(0 0 40px rgba(245,200,66,.5));
  cursor: default;
  z-index: 1;
}
@keyframes chestBounce {
  0%,100% { transform: translateY(0) scale(1); }
  30%     { transform: translateY(-16px) scale(1.06); }
  50%     { transform: translateY(0) scale(1); }
  70%     { transform: translateY(-8px) scale(1.03); }
}

.prize-vault-sparkle {
  position: absolute;
  top: -10px; right: -10px;
  font-size: 1.8rem;
  animation: vaultSparkle 1.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes vaultSparkle {
  0%,100% { opacity: 0; transform: scale(.5) rotate(0deg); }
  50%     { opacity: 1; transform: scale(1.2) rotate(20deg); }
}

.prize-vault-subtitle {
  font-family: 'Nunito', sans-serif;
  font-size: 1rem;
  color: rgba(255,255,255,.5);
  letter-spacing: .5px;
  margin-bottom: 6px;
}

.prize-vault-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  color: #f0d878;
  margin-bottom: 32px;
  text-shadow: 0 0 30px rgba(245,200,66,.4);
}

/* Botón abrir cofre */
.prize-open-btn {
  padding: 18px 50px !important;
  font-size: 1.15rem !important;
  animation: openBtnPulse 2s ease-in-out infinite;
}
@keyframes openBtnPulse {
  0%,100% { box-shadow: 0 8px 28px rgba(200,50,100,.3); }
  50%     { box-shadow: 0 8px 44px rgba(200,50,100,.55), 0 0 60px rgba(245,200,66,.2); }
}

/* ═══════════════════════════════════════════════════════════
   PASO 2 — LA REVELACIÓN
   ═══════════════════════════════════════════════════════════ */
.prize-reveal {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
}
.prize-reveal.hidden { display: none !important; }

.prize-reveal-content {
  text-align: center;
  max-width: 480px;
  width: 100%;
  animation: revealEnter .7s cubic-bezier(.2,1.3,.5,1) both;
}
@keyframes revealEnter {
  from { opacity: 0; transform: translateY(40px) scale(.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Icono del premio en anillo */
.prize-icon-wrap {
  position: relative;
  width: 100px; height: 100px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.prize-icon-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(245,200,66,.25);
  box-shadow: 0 0 40px rgba(245,200,66,.15) inset;
  animation: ringSpin 8s linear infinite;
}
@keyframes ringSpin {
  to { transform: rotate(360deg); }
}
.prize-icon {
  font-size: 3rem;
  position: relative;
  z-index: 1;
  animation: prizeBounce 1s ease-in-out infinite;
}
@keyframes prizeBounce {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-8px); }
}

/* Título */
.prize-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.5rem, 4vw, 2rem);
  color: #f0d878;
  margin-bottom: 24px;
  text-shadow: 0 0 30px rgba(245,200,66,.5);
}

/* Card del premio */
.prize-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(245,200,66,.2);
  border-radius: 22px;
  padding: 28px 28px 24px;
  margin-bottom: 28px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 8px 40px rgba(0,0,0,.3), 0 0 40px rgba(245,200,66,.06);
}

.prize-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  color: #fff;
  margin-bottom: 0;
  letter-spacing: .3px;
}

.prize-sep {
  display: block;
  font-size: .9rem;
  color: rgba(245,200,66,.4);
  margin: 12px 0 14px;
}

.prize-photo {
  width: 100%;
  max-height: 280px;
  object-fit: cover;
  border-radius: 14px;
  margin-bottom: 18px;
  box-shadow: 0 6px 28px rgba(0,0,0,.45);
  animation: photoReveal .6s cubic-bezier(.2,1.3,.5,1) both;
}
@keyframes photoReveal {
  from { opacity: 0; transform: scale(.9); }
  to   { opacity: 1; transform: scale(1); }
}

/* Botón descargar bono */
.prize-download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(245,200,66,.12);
  border: 1px solid rgba(245,200,66,.3);
  color: #f0d878;
  border-radius: 50px;
  padding: 8px 20px;
  font-family: 'Nunito', sans-serif;
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all .2s;
  margin-bottom: 16px;
}
.prize-download:hover {
  background: rgba(245,200,66,.2);
  border-color: rgba(245,200,66,.5);
  color: #fff;
}
.prize-download.hidden { display: none !important; }

.prize-details {
  color: rgba(255,255,255,.7);
  font-size: .98rem;
  line-height: 1.7;
}

/* Botón siguiente reto — oculto por defecto, se muestra vía JS */
.prize-next-btn {
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease, transform .5s ease;
}

/* Overlay de sub-pregunta sobre el premio */
.prize-sub-overlay {
  margin-top: 8px;
  text-align: center;
  animation: fadeSlide .5s ease both;
}
.prize-sub-overlay.hidden { display: none !important; }

.prize-sub-q {
  font-size: .82rem;
  color: rgba(255,255,255,.45);
  margin-bottom: 10px;
  font-style: italic;
}
.prize-sub-options {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.prize-sub-btn {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.75);
  border-radius: 50px;
  padding: 10px 24px;
  font-family: 'Nunito', sans-serif;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
}
.prize-sub-btn:hover {
  background: rgba(245,200,66,.14);
  border-color: rgba(245,200,66,.35);
  color: #f0d878;
}
.prize-sub-response {
  font-size: .92rem;
  color: #f0d878;
  font-weight: 700;
  margin-top: 10px;
  letter-spacing: .3px;
}

/* Botón siguiente reto — visible tras responder sub-pregunta */
.prize-next-btn.show {
  opacity: 1 !important;
  pointer-events: all !important;
  margin-top: 20px;
}

/* ============================================================
   FINAL SCREEN
   ============================================================ */
.final-bg {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, #4a1060 0%, #1a0530 100%);
  z-index: -1;
}

.final-sparkles {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.final-content {
  text-align: center;
  max-width: 600px;
  animation: floatUp .9s ease both;
  padding-bottom: 40px;
}

.final-emoji-row {
  font-size: 2rem;
  letter-spacing: 8px;
  margin-bottom: 16px;
  animation: glow 2s ease-in-out infinite;
}
@keyframes glow {
  0%,100%{ filter:drop-shadow(0 0 8px rgba(245,200,66,.5)); }
  50%    { filter:drop-shadow(0 0 24px rgba(245,200,66,.9)); }
}

.final-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.2rem, 7vw, 3.5rem);
  color: var(--gold);
  margin-bottom: 16px;
  text-shadow: 0 0 40px rgba(245,200,66,.5);
}

.final-subtitle {
  color: rgba(255,255,255,.7);
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 28px;
}

.final-message {
  background: rgba(255,255,255,.07);
  border: 1.5px solid rgba(245,200,66,.3);
  border-radius: 16px;
  padding: 24px 28px;
  color: #fff;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 28px;
}

.final-prizes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-bottom: 36px;
}

.final-prize-pill {
  background: rgba(245,200,66,.15);
  border: 1.5px solid rgba(245,200,66,.4);
  border-radius: 50px;
  padding: 8px 18px;
  color: var(--gold);
  font-size: .9rem;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════
   OVERLAY TARJETA ESPECIAL — Experiencia interactiva secreta
   ═══════════════════════════════════════════════════════════ */
.special-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 24px;
}
.special-overlay.hidden { display: none !important; }

.special-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(120,30,60,.45) 0%, transparent 60%),
    radial-gradient(ellipse at 30% 70%, rgba(60,15,40,.35) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 30%, rgba(80,20,50,.3) 0%, transparent 45%),
    #0a0212;
  z-index: -1;
}

.special-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* ── Cada paso ── */
.special-step {
  position: relative;
  z-index: 1;
  text-align: center;
  animation: specialStepIn .8s cubic-bezier(.2,1,.3,1) both;
}
.special-step.hidden { display: none !important; }
@keyframes specialStepIn {
  from { opacity: 0; transform: translateY(30px) scale(.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Paso 1: La pregunta ── */
.special-hearts {
  font-size: 1.5rem;
  letter-spacing: 8px;
  margin-bottom: 20px;
  animation: heartsFloat 2s ease-in-out infinite;
}
@keyframes heartsFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-10px); }
}

.special-question {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.6rem, 4.5vw, 2.4rem);
  color: #f0d878;
  text-shadow: 0 0 40px rgba(245,200,66,.4);
  margin-bottom: 36px;
  line-height: 1.3;
  max-width: 480px;
}

.special-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.special-yes {
  padding: 20px 50px !important;
  font-size: 1.2rem !important;
  animation: yesPulse 2s ease-in-out infinite;
}
@keyframes yesPulse {
  0%,100% { box-shadow: 0 8px 28px rgba(200,50,100,.3); }
  50%     { box-shadow: 0 8px 50px rgba(200,50,100,.55), 0 0 70px rgba(245,200,66,.25); }
}

.special-no {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.5);
  border-radius: 50px;
  padding: 16px 36px;
  font-family: 'Nunito', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
}
.special-no:hover {
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.8);
  border-color: rgba(255,255,255,.3);
}

/* ── Paso 2: La revelación ── */
.special-big-emoji {
  font-size: 5rem;
  margin-bottom: 20px;
  animation: prizeBounce 1s ease-in-out infinite;
}

.special-reveal-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  color: #f0d878;
  text-shadow: 0 0 50px rgba(245,200,66,.5);
  margin-bottom: 20px;
  line-height: 1.3;
}

.special-reveal-text {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 1.1rem;
  color: rgba(255,255,255,.65);
  line-height: 1.7;
  max-width: 420px;
  margin: 0 auto;
}

/* ── Paso 3: Despedida final ── */
.special-final-content {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  color: rgba(255,255,255,.8);
  line-height: 2;
  max-width: 460px;
  text-align: center;
  white-space: pre-line;
  padding: 32px 24px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(245,200,66,.15);
  border-radius: 20px;
}

/* ============================================================
   SPARKLE PARTICLES
   ============================================================ */
.sparkle {
  position: absolute;
  pointer-events: none;
  animation: sparkleFly linear forwards;
  opacity: 0;
}
@keyframes sparkleFly {
  0%  { opacity:1; transform: translate(0,0) scale(1) rotate(0deg); }
  100%{ opacity:0; transform: var(--spark-end) scale(0) rotate(180deg); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 480px) {
  .memory-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .map-grid    { grid-template-columns: 1fr; }
  .riddle-input-wrap { flex-direction: column; }
  .riddle-input { border-radius: 12px; }
  .btn-submit  { border-radius: 12px; }
}