/* ==================== TOKENS + BASE ==================== */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800;900&family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  --azul-profundo: #050a1f;
  --azul-noche: #0a1230;
  --azul-noche-2: #101c46;
  --dorado: #d4af37;
  --dorado-claro: #f4d675;
  --dorado-suave: #ecc978;
  --blanco-calido: #f7ecd9;
  --arcana: #6b2fa0; --arcana-glow: #a56bea;
  --fortis: #8a1c2b; --fortis-glow: #e0495e;
  --lumen: #d4af37; --lumen-glow: #ffe9a8;
  --natura: #1f5c3d; --natura-glow: #4fbf83;
  --accent: var(--dorado);
  --accent-glow: var(--dorado-claro);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden;
  background: radial-gradient(ellipse at 50% 30%, var(--azul-noche-2) 0%, var(--azul-noche) 45%, var(--azul-profundo) 100%);
  color: var(--blanco-calido);
  font-family: 'Montserrat', sans-serif;
  -webkit-font-smoothing: antialiased;
}

body[data-casa="ARCANA"] { --accent: var(--arcana); --accent-glow: var(--arcana-glow); }
body[data-casa="FORTIS"] { --accent: var(--fortis); --accent-glow: var(--fortis-glow); }
body[data-casa="LUMEN"] { --accent: var(--lumen); --accent-glow: var(--lumen-glow); }
body[data-casa="NATURA"] { --accent: var(--natura); --accent-glow: var(--natura-glow); }

#stage { position: relative; width: 100vw; height: 100vh; }
canvas#fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.castillo-silueta {
  position: absolute; bottom: 0; left: 0; right: 0; height: 22vh;
  background: linear-gradient(to top, rgba(2, 5, 15, 0.92), transparent);
  z-index: 2; pointer-events: none;
}

/* Viñeta: oscurece los bordes para que el centro (texto y símbolos) resalte más */
.vineta {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 35%, rgba(2,5,15,0.35) 78%, rgba(2,5,15,0.75) 100%);
}

/* Resplandor cálido detrás de los símbolos centrales — sensación de luz mágica real */
.resplandor {
  position: absolute; z-index: -1; top: 50%; left: 50%;
  width: 160%; height: 160%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(244,214,117,0.5) 0%, rgba(212,175,55,0.22) 35%, transparent 70%);
  filter: blur(6px);
  animation: resplandor-pulso 3.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes resplandor-pulso {
  0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(0.96); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
}

.escena {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; opacity: 0; pointer-events: none;
  transition: opacity 0.9s ease; padding: 2.5vh 6vw;
}
.escena.activa { opacity: 1; pointer-events: auto; }

.eyebrow {
  font-family: 'Cinzel', serif; font-weight: 600; letter-spacing: 0.5em; font-size: clamp(0.75rem, 1.15vw, 1.05rem);
  color: var(--dorado-suave); text-transform: uppercase; margin-bottom: 1.4vh;
  text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}
.titulo-mayor {
  font-family: 'Cinzel', serif; font-weight: 900;
  font-size: clamp(2.6rem, 6.4vw, 5.6rem); color: var(--blanco-calido);
  text-shadow: 0 3px 0 rgba(0,0,0,0.55), 0 0 24px rgba(0,0,0,0.65), 0 0 46px rgba(212, 175, 55, 0.75), 0 0 100px rgba(212, 175, 55, 0.35);
  letter-spacing: 0.04em; margin: 0; line-height: 1.05;
}
.titulo-dorado {
  background: linear-gradient(180deg, var(--dorado-claro) 0%, var(--dorado) 55%, #a97f1f 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.subtitulo {
  font-family: 'Cinzel', serif; font-weight: 600; font-size: clamp(0.9rem, 1.35vw, 1.35rem);
  letter-spacing: 0.42em; color: var(--dorado-suave); text-transform: uppercase; margin-top: 2.2vh;
  text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}

.rosa-contenedor {
  position: relative; width: clamp(180px, 24vw, 380px); height: clamp(180px, 24vw, 380px);
  margin: 2vh auto; display: flex; align-items: center; justify-content: center;
}

/* Contenedor del Castillo — proporción vertical (retrato), a diferencia de la
   Rosa (circular). Se dimensiona por ALTURA, pensado para monitores anchos
   16:9 / 16:10, donde el espacio vertical es el que hay que cuidar. */
.castillo-contenedor {
  position: relative;
  height: clamp(170px, 30vh, 380px);
  width: auto;
  margin: 1.5vh auto;
  display: flex; align-items: center; justify-content: center;
}
.castillo-img {
  height: 100%; width: auto; display: block;
  filter: drop-shadow(0 10px 28px rgba(0,0,0,0.55)) drop-shadow(0 0 24px rgba(212,175,55,0.35));
}
#escena-decision .castillo-contenedor { transform: scale(0.88); }

.anillo { position: absolute; border: 1px solid rgba(212, 175, 55, 0.35); border-radius: 50%; inset: 0; will-change: transform; }
.anillo.a2 { inset: -8%; border-color: rgba(212, 175, 55, 0.2); animation: girar 34s linear infinite; }
.anillo.a1 { animation: girar 22s linear infinite reverse; border-style: dashed; }
/* Sin rotación ni glow animado sobre la imagen (costoso en dispositivos modestos):
   solo los anillos —livianos, son simples bordes— giran. La rosa queda fija con un brillo fijo. */
.rosa-svg, .rosa-img {
  width: 100%; height: 100%;
  filter: drop-shadow(0 0 26px rgba(212, 175, 55, 0.6));
}
@keyframes girar { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Truco visual: el script todavía inyecta la imagen del Castillo en estos dos
   contenedores — acá la ocultamos y mostramos la Rosa Luterana en su lugar,
   sin tocar ni una línea de JavaScript. */
#castillo-intro, #castillo-decision {
  width: 100%; height: 100%;
  background-image: url('/img/rosa-luterana.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
#castillo-intro img, #castillo-decision img { display: none; }

/* Castillo estático (sin animación) — solo en la escena "El Castillo está listo" */
.castillo-estatico-cont {
  position: relative;
  height: clamp(150px, 24vh, 300px);
  width: auto;
  margin: 1.2vh auto;
  display: flex; align-items: center; justify-content: center;
}
.castillo-estatico-img {
  height: 100%;
  width: clamp(140px, 20vw, 300px);
  background-image: url('/img/castillo.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.5)) drop-shadow(0 0 20px rgba(212,175,55,0.3));
}

#escena-intro .titulo-mayor { margin-top: 1.5vh; }
.subtitulo2 {
  font-family: 'Cinzel', serif; font-weight: 700; font-size: clamp(1.7rem, 3.6vw, 3.1rem);
  color: var(--dorado-claro); margin: 1.2vh 0 0; line-height: 1.15;
  text-shadow: 0 3px 0 rgba(0,0,0,0.55), 0 0 20px rgba(0,0,0,0.6), 0 0 40px rgba(212, 175, 55, 0.6);
}

.nombre-protagonista {
  font-family: 'Cinzel', serif; font-weight: 900; font-size: clamp(3.4rem, 9.5vw, 8.4rem);
  background: linear-gradient(180deg, #fff 0%, var(--dorado-claro) 45%, var(--dorado) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 1.5px rgba(40, 25, 0, 0.35);
  filter: drop-shadow(0 4px 0 rgba(0,0,0,0.5)) drop-shadow(0 0 50px rgba(212, 175, 55, 0.65));
  margin: 1.5vh 0; letter-spacing: 0.03em;
}
.frases-progresivas {
  min-height: 6vh; font-family: 'Montserrat', sans-serif; font-style: italic; font-weight: 500;
  font-size: clamp(1.2rem, 2.1vw, 1.8rem); color: var(--blanco-calido);
  text-shadow: 0 2px 10px rgba(0,0,0,0.7);
}

.barra-energia-cont { width: min(60vw, 700px); margin-top: 3vh; }
.barra-energia-marco {
  width: 100%; height: 22px; border: 1.5px solid var(--dorado); border-radius: 30px; padding: 3px;
  background: rgba(5, 10, 31, 0.6); box-shadow: 0 0 30px rgba(212, 175, 55, 0.25) inset;
}
.barra-energia-relleno {
  height: 100%; width: 0%; border-radius: 30px;
  background: linear-gradient(90deg, #7c5c14, var(--dorado) 45%, var(--dorado-claro));
  box-shadow: 0 0 22px var(--dorado-claro); transition: width 1.1s cubic-bezier(.4, .2, .2, 1);
}
.energia-porcentaje {
  margin-top: 1.4vh; font-family: 'Cinzel', serif; font-weight: 700; letter-spacing: 0.25em;
  font-size: clamp(1.5rem, 2.5vw, 2.3rem); color: var(--dorado-claro);
  text-shadow: 0 2px 10px rgba(0,0,0,0.8), 0 0 24px rgba(212,175,55,0.5);
}

#escena-decision .rosa-contenedor { transform: scale(0.9); }
.simbolos-orbitando { position: absolute; inset: -10%; pointer-events: none; }
.simbolo-orbital {
  position: absolute; width: 52px; height: 52px; opacity: 0;
  animation: aparecer-fugaz 4.6s ease-in-out infinite; filter: drop-shadow(0 0 12px rgba(212, 175, 55, 0.6));
}
.simbolo-orbital.s1 { top: -6%; left: 50%; transform: translateX(-50%); animation-delay: 0s; }
.simbolo-orbital.s2 { top: 50%; right: -6%; transform: translateY(-50%); animation-delay: 1.1s; }
.simbolo-orbital.s3 { bottom: -6%; left: 50%; transform: translateX(-50%); animation-delay: 2.2s; }
.simbolo-orbital.s4 { top: 50%; left: -6%; transform: translateY(-50%); animation-delay: 3.3s; }
@keyframes aparecer-fugaz { 0%, 100% { opacity: 0; } 15%, 35% { opacity: 0.9; } }
.pulso-suspenso { animation: pulso-lento 2.6s ease-in-out infinite; }
@keyframes pulso-lento { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.tu-casa-cerca {
  margin-top: 2vh; font-style: italic; font-weight: 600; font-size: clamp(1.15rem, 1.9vw, 1.6rem);
  color: var(--dorado-suave); text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}

#escena-revelacion { background: radial-gradient(ellipse at center, rgba(255, 236, 179, 0.08) 0%, transparent 60%); }
.flash-dorado {
  position: fixed; inset: 0;
  background: radial-gradient(circle, rgba(255, 250, 230, 0.95) 0%, rgba(255, 230, 150, 0.6) 35%, transparent 70%);
  z-index: 50; opacity: 0; pointer-events: none;
}
.flash-dorado.disparar { animation: flash 1.3s ease-out forwards; }
@keyframes flash { 0% { opacity: 0; } 8% { opacity: 1; } 22% { opacity: 0.75; } 100% { opacity: 0; } }

.revelacion-nombre {
  font-family: 'Cinzel', serif; font-weight: 700; letter-spacing: 0.3em; font-size: clamp(1.2rem, 2.2vw, 1.9rem);
  color: var(--blanco-calido); text-transform: uppercase; text-shadow: 0 2px 12px rgba(0,0,0,0.8);
}
.revelacion-pertenece {
  font-family: 'Montserrat', sans-serif; font-weight: 500; font-style: italic;
  font-size: clamp(1rem, 1.6vw, 1.4rem); color: var(--accent-glow); margin-top: 0.6vh;
  text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}
.escudo-grande-cont {
  position: relative;
  width: clamp(200px, 26vw, 360px); margin: 1vh auto;
  filter: drop-shadow(0 0 34px var(--accent-glow));
  animation: escudo-entrada 1s cubic-bezier(.2, .9, .25, 1.2) both, escudo-glow 1.2s ease-in-out 3 1s;
}
@keyframes escudo-entrada {
  0% { transform: scale(0.25) rotate(-10deg); opacity: 0; }
  60% { transform: scale(1.12) rotate(3deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes escudo-glow {
  0%, 100% { filter: drop-shadow(0 0 34px var(--accent-glow)); }
  50% { filter: drop-shadow(0 0 70px var(--accent-glow)); }
}
.casa-nombre-grande {
  font-family: 'Cinzel', serif; font-weight: 900; font-size: clamp(2.2rem, 5.8vw, 4.8rem);
  letter-spacing: 0.05em; color: var(--accent-glow);
  text-shadow: 0 3px 0 rgba(0,0,0,0.6), 0 0 30px rgba(0,0,0,0.7), 0 0 55px var(--accent), 0 0 110px var(--accent);
}
.casa-valor {
  font-family: 'Cinzel', serif; font-weight: 700; letter-spacing: 0.35em; font-size: clamp(1rem, 1.7vw, 1.45rem);
  color: var(--dorado-claro); margin-top: 1.2vh; text-shadow: 0 2px 10px rgba(0,0,0,0.75);
}
.casa-lema {
  font-style: italic; font-weight: 600; font-size: clamp(1.1rem, 1.85vw, 1.6rem);
  color: var(--blanco-calido); margin-top: 0.5vh; text-shadow: 0 2px 10px rgba(0,0,0,0.75);
}

.escudo-mediano-cont { position: relative; width: clamp(150px, 18vw, 260px); margin: 2vh auto; filter: drop-shadow(0 0 34px var(--accent-glow)); }
.escudo-svg, .escudo-svg-mini { width: 100%; height: 100%; display: block; }

/* Orbe liviano (sin imagen) para las escenas donde no hace falta repetir la Rosa completa */
.orbe-simple {
  width: 58%; height: 58%; border-radius: 50%;
  background: radial-gradient(circle at 45% 40%, #fff6df 0%, var(--dorado-claro) 35%, var(--dorado) 70%, #7c5c14 100%);
  box-shadow: 0 0 30px rgba(244, 214, 117, 0.6);
}

.casas-final-grid { display: flex; gap: clamp(1rem, 3vw, 3rem); margin: 3vh 0; flex-wrap: wrap; justify-content: center; }
.casas-final-grid .escudo-final { position: relative; width: clamp(90px, 12vw, 170px); }
.casas-final-grid figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.casas-final-grid figcaption { font-family: 'Cinzel', serif; font-weight: 700; letter-spacing: 0.2em; font-size: clamp(0.85rem, 1.3vw, 1.1rem); text-shadow: 0 2px 8px rgba(0,0,0,0.75); }
.casas-final-grid .arcana-cap { color: var(--arcana-glow); }
.casas-final-grid .fortis-cap { color: var(--fortis-glow); }
.casas-final-grid .lumen-cap { color: var(--lumen-glow); }
.casas-final-grid .natura-cap { color: var(--natura-glow); }

.listo-txt {
  margin-top: 1vh; font-style: italic; font-weight: 500; color: var(--blanco-calido);
  text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}

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

/* Marca de ensayo */
#marca-ensayo {
  position: fixed;
  top: 18px;
  right: 26px;
  z-index: 80;
  font-family: 'Cinzel', serif;
  letter-spacing: 0.3em;
  font-size: 0.8rem;
  color: var(--azul-profundo);
  background: var(--dorado-claro);
  padding: 6px 16px;
  border-radius: 20px;
  display: none;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}
#marca-ensayo.visible { display: block; }

/* Red de seguridad para pantallas más bajas de lo esperado (algunos monitores,
   notebooks, o ventanas sin pantalla completa): compacta lo justo para que
   nada se corte arriba ni abajo. */
@media (max-height: 800px) {
  .escena { padding: 1.5vh 6vw; }
  .rosa-contenedor { transform: scale(0.82); }
  .escudo-grande-cont { width: clamp(170px, 22vw, 300px); margin: 0.6vh auto; }
  .casa-nombre-grande { font-size: clamp(1.9rem, 5vw, 3.6rem); }
  .subtitulo2 { font-size: clamp(1.4rem, 3vw, 2.4rem); margin-top: 0.6vh; }
  .castillo-estatico-cont { height: clamp(110px, 18vh, 220px); }
}