/* ==========================================================================
   MAATIAAK Y OUJAAK · estilos base
   Sistema de tema por "hora" (amanecer, mediodía, atardecer, noche)
   ========================================================================== */

:root {
  /* Tipografía */
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --font-sans: "Inter", system-ui, sans-serif;

  /* Tokens de espaciado */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* Radios */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 32px;

  /* Durations */
  --dur-fast: 180ms;
  --dur-med: 360ms;
  --dur-slow: 800ms;

  /* Tema por default (amanecer) */
  --c-bg-1: #f8e8c8;
  --c-bg-2: #e5b873;
  --c-bg-3: #a8663a;
  --c-ink: #2a1508;
  --c-ink-soft: #5a3820;
  --c-accent: #c44a1a;
  --c-gold: #e8a13b;
  --c-panel: rgba(255, 243, 220, 0.92);
  --c-panel-border: rgba(90, 56, 32, 0.2);
  --c-shadow: rgba(90, 56, 32, 0.25);
  --particle-color: 232, 161, 59;
}

/* Tema: Amanecer (Nivel 1) */
body[data-hora="amanecer"] {
  --c-bg-1: #f8e8c8;
  --c-bg-2: #e5b873;
  --c-bg-3: #a8663a;
  --c-ink: #2a1508;
  --c-ink-soft: #5a3820;
  --c-accent: #c44a1a;
  --c-gold: #e8a13b;
  --c-panel: rgba(255, 243, 220, 0.92);
  --c-panel-border: rgba(90, 56, 32, 0.2);
  --c-shadow: rgba(90, 56, 32, 0.25);
  --particle-color: 232, 161, 59;
}

/* Tema: Mediodía (Nivel 2) */
body[data-hora="mediodia"] {
  --c-bg-1: #bde0fe;
  --c-bg-2: #6097d4;
  --c-bg-3: #1d3a6e;
  --c-ink: #0d1b3d;
  --c-ink-soft: #2d4a80;
  --c-accent: #ffb627;
  --c-gold: #ffd166;
  --c-panel: rgba(240, 248, 255, 0.92);
  --c-panel-border: rgba(29, 58, 110, 0.2);
  --c-shadow: rgba(29, 58, 110, 0.25);
  --particle-color: 255, 209, 102;
}

/* Tema: Atardecer (Nivel 3) */
body[data-hora="atardecer"] {
  --c-bg-1: #f4a261;
  --c-bg-2: #e76f51;
  --c-bg-3: #264653;
  --c-ink: #0d2a33;
  --c-ink-soft: #2a4a58;
  --c-accent: #e9c46a;
  --c-gold: #f4a261;
  --c-panel: rgba(240, 230, 210, 0.92);
  --c-panel-border: rgba(13, 42, 51, 0.25);
  --c-shadow: rgba(13, 42, 51, 0.35);
  --particle-color: 233, 196, 106;
}

/* Tema: Noche (Nivel 4) */
body[data-hora="noche"] {
  --c-bg-1: #1a1a3e;
  --c-bg-2: #0f1028;
  --c-bg-3: #050518;
  --c-ink: #e8e4d6;
  --c-ink-soft: #a8a2b8;
  --c-accent: #c9b1ff;
  --c-gold: #e8d58f;
  --c-panel: rgba(30, 25, 55, 0.88);
  --c-panel-border: rgba(201, 177, 255, 0.3);
  --c-shadow: rgba(0, 0, 0, 0.5);
  --particle-color: 232, 213, 143;
}

/* ==========================================================================
   Reset + base
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* El atributo [hidden] debe ganarle a cualquier display CSS */
[hidden] {
  display: none !important;
}

html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--font-sans);
  color: var(--c-ink);
  background: var(--c-bg-3);
  transition: background var(--dur-slow) ease, color var(--dur-slow) ease;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  touch-action: manipulation;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: 0;
  background: transparent;
  color: inherit;
}

/* ==========================================================================
   Fondo dinámico
   ========================================================================== */

.sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.sky-layer {
  position: absolute;
  inset: 0;
}

.sky-gradient {
  background: linear-gradient(
    180deg,
    var(--c-bg-1) 0%,
    var(--c-bg-2) 45%,
    var(--c-bg-3) 100%
  );
  transition: background var(--dur-slow) ease;
}

.sky-particles {
  background-image:
    radial-gradient(circle at 15% 20%, rgba(var(--particle-color), 0.35) 0%, transparent 2%),
    radial-gradient(circle at 35% 70%, rgba(var(--particle-color), 0.25) 0%, transparent 1.5%),
    radial-gradient(circle at 60% 35%, rgba(var(--particle-color), 0.3) 0%, transparent 2%),
    radial-gradient(circle at 80% 80%, rgba(var(--particle-color), 0.2) 0%, transparent 1.5%),
    radial-gradient(circle at 25% 90%, rgba(var(--particle-color), 0.25) 0%, transparent 1.8%),
    radial-gradient(circle at 85% 15%, rgba(var(--particle-color), 0.3) 0%, transparent 2%);
  background-size: 300% 300%;
  animation: float 40s ease-in-out infinite;
  opacity: 0.9;
}

@keyframes float {
  0%, 100% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
}

/* Noche: estrellas extra */
body[data-hora="noche"] .sky-particles {
  background-image:
    radial-gradient(circle at 10% 10%, white 0%, transparent 0.3%),
    radial-gradient(circle at 25% 40%, white 0%, transparent 0.2%),
    radial-gradient(circle at 50% 15%, white 0%, transparent 0.3%),
    radial-gradient(circle at 75% 25%, white 0%, transparent 0.2%),
    radial-gradient(circle at 90% 60%, white 0%, transparent 0.3%),
    radial-gradient(circle at 15% 80%, white 0%, transparent 0.2%),
    radial-gradient(circle at 65% 85%, white 0%, transparent 0.3%),
    radial-gradient(circle at 40% 55%, rgba(var(--particle-color), 0.4) 0%, transparent 1.5%);
  background-size: 200% 200%;
  animation: twinkle 6s ease-in-out infinite;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* Partículas extra: arena cayendo en amanecer */
.sand-particles {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s;
}

body[data-hora="amanecer"] .sand-particles {
  opacity: 0.7;
}

.sand-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(var(--particle-color), 0.7);
  top: -10px;
  animation: sandFall linear infinite;
}

@keyframes sandFall {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 0.8; }
  90% { opacity: 0.6; }
  100% { transform: translateY(105vh) translateX(20px); opacity: 0; }
}

/* Estrellas titilantes en noche */
body[data-hora="noche"] .sand-particles {
  opacity: 1;
}

body[data-hora="noche"] .sand-particle {
  background: white;
  box-shadow: 0 0 4px white, 0 0 8px rgba(255, 255, 255, 0.5);
  animation: starTwinkle ease-in-out infinite;
  top: auto;
}

@keyframes starTwinkle {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.3); }
}

/* ==========================================================================
   HUD
   ========================================================================== */

.hud {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  background: linear-gradient(180deg, var(--c-panel) 0%, transparent 100%);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--c-panel-border);
  animation: slideDown var(--dur-med) ease;
}

@keyframes slideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.hud-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  color: var(--c-ink);
  font-weight: 500;
  font-size: 15px;
  transition: background var(--dur-fast);
}

.hud-btn:hover {
  background: var(--c-panel-border);
}

.hud-icon {
  font-size: 18px;
  line-height: 1;
}

.hud-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}

.hud-hora {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--c-ink-soft);
}

.hora-icon {
  font-size: 20px;
}

.hud-vinculo {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 200px;
}

.vinculo-track {
  flex: 1;
  height: 8px;
  background: var(--c-panel-border);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

.vinculo-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--c-accent), var(--c-gold));
  width: 50%;
  transition: width var(--dur-slow) cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 10px rgba(var(--particle-color), 0.5);
}

.vinculo-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-ink-soft);
  min-width: 32px;
  text-align: right;
}

.hud-stats {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.hud-stat {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  font-weight: 600;
  color: var(--c-ink);
  font-size: 15px;
  transition: color var(--dur-fast);
}

.hud-stat.pop {
  animation: statPop 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
  color: var(--c-accent);
}

.hud-btn.pop {
  animation: statPop 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes statPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); text-shadow: 0 0 20px var(--c-gold); }
  100% { transform: scale(1); }
}

.vinculo-fill.pop-up {
  animation: vinculoPop 700ms ease-out;
}

.vinculo-fill.pop-down {
  animation: vinculoDown 700ms ease-out;
}

@keyframes vinculoPop {
  0% { filter: brightness(1); box-shadow: 0 0 10px rgba(var(--particle-color), 0.5); }
  50% { filter: brightness(1.5); box-shadow: 0 0 25px rgba(var(--particle-color), 1); }
  100% { filter: brightness(1); box-shadow: 0 0 10px rgba(var(--particle-color), 0.5); }
}

@keyframes vinculoDown {
  0% { filter: brightness(1) hue-rotate(0deg); }
  50% { filter: brightness(0.6) hue-rotate(-30deg); }
  100% { filter: brightness(1) hue-rotate(0deg); }
}

/* ==========================================================================
   Stage / escenas
   ========================================================================== */

#stage {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  padding: var(--sp-7) var(--sp-5) var(--sp-7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.scene {
  width: 100%;
  max-width: 760px;
  margin: auto;
  opacity: 0;
  transform: translateY(12px);
  animation: sceneIn var(--dur-med) cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.scene.active {
  opacity: 1;
  transform: none;
}

@keyframes sceneIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.scene.leaving {
  animation: sceneOut var(--dur-fast) forwards;
}

@keyframes sceneOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-12px); }
}

/* ==========================================================================
   Splash
   ========================================================================== */

.scene-splash {
  min-height: calc(100vh - 160px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.splash-inner {
  padding: var(--sp-7);
}

.splash-eyebrow {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 20px;
  color: var(--c-ink-soft);
  margin-bottom: var(--sp-4);
  letter-spacing: 0.05em;
}

.splash-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(48px, 10vw, 96px);
  line-height: 1;
  color: var(--c-ink);
  margin-bottom: var(--sp-4);
  letter-spacing: -0.02em;
}

.title-line-1,
.title-line-2 {
  display: block;
  opacity: 0;
  animation: titleReveal 900ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.title-line-1 { animation-delay: 200ms; }

.title-and {
  display: block;
  font-style: italic;
  font-size: 0.5em;
  color: var(--c-accent);
  margin: var(--sp-1) 0;
  opacity: 0;
  animation: titleReveal 700ms ease-out forwards;
  animation-delay: 600ms;
}

.title-line-2 { animation-delay: 900ms; }

@keyframes titleReveal {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.9);
    filter: blur(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.splash-eyebrow,
.splash-subtitle {
  opacity: 0;
  animation: fadeUp 600ms ease-out forwards;
}
.splash-eyebrow { animation-delay: 0ms; }
.splash-subtitle { animation-delay: 1200ms; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.splash-ornament {
  opacity: 0;
  animation: ornamentSpin 1s ease-out 1400ms forwards, ornamentFloat 6s ease-in-out infinite 2400ms;
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

@keyframes ornamentSpin {
  from { opacity: 0; transform: rotate(-90deg) scale(0.3); }
  to { opacity: 0.6; transform: rotate(0) scale(1); }
}

@keyframes ornamentFloat {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-6px) rotate(45deg); }
}

.splash-actions,
.splash-footer {
  opacity: 0;
  animation: fadeUp 700ms ease-out forwards;
  animation-delay: 1700ms;
}

.splash-footer { animation-delay: 1900ms; }

.splash-subtitle {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(18px, 3vw, 24px);
  color: var(--c-ink-soft);
  margin-bottom: var(--sp-5);
}

.splash-ornament {
  font-size: 24px;
  color: var(--c-accent);
  margin: var(--sp-5) auto;
  opacity: 0.6;
}

.splash-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  align-items: center;
  margin-top: var(--sp-6);
}

.splash-footer {
  margin-top: var(--sp-6);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--c-ink-soft);
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   Escena narrativa (diálogo + opciones)
   ========================================================================== */

.scene-card {
  background: var(--c-panel);
  border: 1px solid var(--c-panel-border);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  box-shadow: 0 8px 32px var(--c-shadow);
  backdrop-filter: blur(12px);
  overflow: hidden;
}

/* Ilustración estilo libro */
.scene-illustration {
  width: calc(100% + var(--sp-6) * 2);
  margin: calc(var(--sp-6) * -1) calc(var(--sp-6) * -1) var(--sp-5);
  aspect-ratio: 16 / 9;
  background: linear-gradient(180deg, rgba(0,0,0,0.08) 0%, transparent 100%);
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 -12px 24px -12px var(--c-shadow);
  opacity: 0;
  transform: scale(0.96) translateY(-8px);
  animation: illustrationReveal 900ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.scene-illustration video,
.scene-illustration img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* Modo "contain": muestra la imagen completa sin recortar */
.scene-illustration.illustration--contain {
  background: #1a0f08;
}

.scene-illustration.illustration--contain video,
.scene-illustration.illustration--contain img {
  object-fit: contain;
}

/* SVG: llena el contenedor respetando viewBox (sin crop como object-fit) */
.scene-illustration svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Vignette cinemático sobre video/imagen */
.scene-illustration-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.25) 100%),
    linear-gradient(180deg, transparent 70%, rgba(0,0,0,0.15) 100%);
  mix-blend-mode: multiply;
}

.scene-illustration--video,
.scene-illustration--image {
  background: #2a1508;
}

/* ==========================================================================
   Efecto: Tormenta de arena
   Capa sobre video/imagen con partículas volando y tinte ocre
   ========================================================================== */

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

/* Tinte ocre ambiental DENSO que respira */
.sandstorm-tint {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(196, 110, 40, 0.45) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 50%, rgba(232, 161, 59, 0.4) 0%, transparent 55%),
    linear-gradient(90deg, rgba(196, 130, 50, 0.35) 0%, rgba(232, 161, 59, 0.28) 50%, rgba(196, 130, 50, 0.4) 100%);
  mix-blend-mode: multiply;
  animation: stormTint 5s ease-in-out infinite;
}

@keyframes stormTint {
  0%, 100% { opacity: 0.85; }
  40% { opacity: 1; }
  60% { opacity: 0.7; }
}

/* Ráfagas generales — más densas, más rápidas */
.sandstorm-gusts {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, transparent 0%, rgba(255, 220, 150, 0.28) 20%, rgba(255, 215, 140, 0.45) 50%, rgba(255, 220, 150, 0.28) 80%, transparent 100%),
    linear-gradient(90deg, transparent 0%, rgba(230, 170, 90, 0.22) 30%, rgba(230, 170, 90, 0.35) 50%, rgba(230, 170, 90, 0.22) 70%, transparent 100%);
  background-size: 70% 100%, 50% 100%;
  background-repeat: no-repeat;
  background-position: -70% 0, -50% 0;
  animation: stormGusts 3s linear infinite;
  mix-blend-mode: screen;
  opacity: 1;
}

@keyframes stormGusts {
  0% { background-position: -70% 25%, -50% 60%; }
  100% { background-position: 170% 25%, 150% 60%; }
}

/* Neblina de polvo al fondo (base) */
.sandstorm-haze {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 30%, rgba(200, 140, 60, 0.4) 75%, rgba(180, 110, 40, 0.6) 100%);
  animation: stormHaze 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes stormHaze {
  0%, 100% { opacity: 0.7; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-3px); }
}

/* Ráfagas grandes — streaks rectangulares de polvo denso */
.sandstorm-streaks {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.sand-streak {
  position: absolute;
  left: 105%;
  width: 50vw;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(232, 161, 59, 0.25) 20%,
    rgba(255, 210, 130, 0.55) 50%,
    rgba(232, 161, 59, 0.25) 80%,
    transparent 100%
  );
  filter: blur(10px);
  border-radius: 50%;
  animation-name: streakBlow;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  mix-blend-mode: screen;
}

@keyframes streakBlow {
  0% { transform: translateX(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateX(-220vw); opacity: 0; }
}

/* Partículas individuales — más y más rápidas */
.sandstorm-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.sand-speck {
  position: absolute;
  left: 105%;
  border-radius: 50%;
  background: #f3d27a;
  box-shadow: 0 0 4px rgba(255, 215, 130, 1);
  animation-name: sandBlow;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  will-change: transform, opacity;
}

@keyframes sandBlow {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  5% { opacity: 1; }
  50% {
    transform: translate(-100vw, -12px);
  }
  95% { opacity: 0.9; }
  100% {
    transform: translate(-220vw, 10px);
    opacity: 0;
  }
}

/* Variación de partículas */
.sand-speck:nth-child(3n) {
  filter: blur(0.8px);
  background: #e8b873;
  box-shadow: 0 0 6px rgba(232, 184, 115, 1);
}

.sand-speck:nth-child(5n) {
  background: #d49a52;
  filter: blur(1.5px);
  box-shadow: 0 0 8px rgba(212, 154, 82, 0.9);
}

.sand-speck:nth-child(7n) {
  filter: blur(2.5px);
  background: #c98a2a;
}

/* Flash sutil — relámpagos de viento fuerte */
.sandstorm-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 220, 140, 0.15), transparent 60%);
  mix-blend-mode: screen;
  animation: stormFlash 4s ease-in-out infinite;
  opacity: 0;
}

@keyframes stormFlash {
  0%, 90%, 100% { opacity: 0; }
  45% { opacity: 0; }
  50% { opacity: 1; }
  55% { opacity: 0.3; }
  60% { opacity: 0.8; }
  65% { opacity: 0; }
}

@keyframes illustrationReveal {
  0% { opacity: 0; transform: scale(0.96) translateY(-8px); filter: blur(12px); }
  40% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}

/* Cuando hay ilustración, la narración aparece DESPUÉS */
.scene-illustration + .narration > *:nth-child(1) { animation-delay: 900ms; }
.scene-illustration + .narration > *:nth-child(2) { animation-delay: 1020ms; }
.scene-illustration + .narration > *:nth-child(3) { animation-delay: 1140ms; }
.scene-illustration + .narration > *:nth-child(4) { animation-delay: 1260ms; }
.scene-illustration + .narration > *:nth-child(5) { animation-delay: 1380ms; }
.scene-illustration + .narration > *:nth-child(6) { animation-delay: 1500ms; }
.scene-illustration + .narration > *:nth-child(7) { animation-delay: 1620ms; }
.scene-illustration + .narration > *:nth-child(8) { animation-delay: 1740ms; }
.scene-illustration + .narration > *:nth-child(9) { animation-delay: 1860ms; }
.scene-illustration + .narration > *:nth-child(10) { animation-delay: 1980ms; }
.scene-illustration + .narration > *:nth-child(n+11) { animation-delay: 2100ms; }

/* Animaciones internas de la ilustración */
@keyframes illusFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes illusBreathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.04); opacity: 0.9; }
}

@keyframes illusDustRise {
  0% { transform: translateY(0); opacity: 0; }
  20% { opacity: 0.6; }
  100% { transform: translateY(-80px); opacity: 0; }
}

@keyframes illusShine {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

@keyframes illusSway {
  0%, 100% { transform: rotate(-1deg); }
  50% { transform: rotate(1deg); }
}

@keyframes illusPulseRadius {
  0%, 100% { r: 8; }
  50% { r: 11; }
}

@keyframes illusSandDrop {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(50px); opacity: 0; }
}

@keyframes illusSealClose {
  0% { stroke-dashoffset: 360; opacity: 0.3; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes illusStarBlink {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

.illus-dust { animation: illusDustRise 6s ease-out infinite; }
.illus-eye { animation: illusShine 3s ease-in-out infinite; }
.illus-float { animation: illusFloat 5s ease-in-out infinite; }
.illus-breathe { animation: illusBreathe 4s ease-in-out infinite; }
.illus-sway { animation: illusSway 6s ease-in-out infinite; transform-origin: center; }
.illus-sand { animation: illusSandDrop 2s linear infinite; }
.illus-star { animation: illusStarBlink 2.5s ease-in-out infinite; }

.narration {
  font-family: var(--font-serif);
  font-size: clamp(18px, 2.4vw, 22px);
  line-height: 1.55;
  color: var(--c-ink);
  margin-bottom: var(--sp-4);
}

.narration p {
  margin-bottom: var(--sp-3);
}

.narration em {
  color: var(--c-accent);
}

.narration .mantra {
  display: block;
  font-weight: 600;
  font-style: italic;
  color: var(--c-accent);
  padding: var(--sp-3) var(--sp-4);
  margin: var(--sp-4) 0;
  border-left: 3px solid var(--c-accent);
  background: rgba(var(--particle-color), 0.08);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}

/* Bocadillo de diálogo */
.dialogue-bubble {
  display: flex;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  align-items: flex-start;
  opacity: 0;
  transform: translateY(10px);
  animation: dialogueIn var(--dur-med) cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: var(--delay, 0ms);
}

@keyframes dialogueIn {
  to { opacity: 1; transform: translateY(0); }
}

/* Narración párrafo por párrafo */
.narration > p,
.narration > .dialogue-bubble,
.narration > .mantra,
.narration > div {
  opacity: 0;
  transform: translateY(10px);
  animation: dialogueIn 500ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.narration > *:nth-child(1) { animation-delay: 60ms; }
.narration > *:nth-child(2) { animation-delay: 180ms; }
.narration > *:nth-child(3) { animation-delay: 300ms; }
.narration > *:nth-child(4) { animation-delay: 420ms; }
.narration > *:nth-child(5) { animation-delay: 540ms; }
.narration > *:nth-child(6) { animation-delay: 660ms; }
.narration > *:nth-child(7) { animation-delay: 780ms; }
.narration > *:nth-child(8) { animation-delay: 900ms; }
.narration > *:nth-child(9) { animation-delay: 1020ms; }
.narration > *:nth-child(10) { animation-delay: 1140ms; }
.narration > *:nth-child(n+11) { animation-delay: 1260ms; }

/* Botón de avance aparece al final */
.btn-advance {
  opacity: 0;
  transform: translateY(10px);
  animation: dialogueIn 400ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: 1500ms;
}

.dialogue-avatar {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--c-accent);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 600;
  box-shadow: 0 2px 8px var(--c-shadow);
}

.dialogue-avatar.maatiaak {
  background: linear-gradient(135deg, #c44a1a, #8b3510);
}

.dialogue-avatar.oujaak {
  background: linear-gradient(135deg, #2a6fb5, #164780);
}

.dialogue-avatar.maat {
  background: linear-gradient(135deg, #e8a13b, #b47820);
  animation: maatGlow 3s ease-in-out infinite;
  position: relative;
}

.dialogue-avatar.maat::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(232, 161, 59, 0.4);
  animation: maatRing 3s ease-in-out infinite;
}

@keyframes maatGlow {
  0%, 100% { box-shadow: 0 2px 8px var(--c-shadow), 0 0 16px rgba(232, 161, 59, 0.3); }
  50% { box-shadow: 0 2px 8px var(--c-shadow), 0 0 32px rgba(232, 161, 59, 0.7); }
}

@keyframes maatRing {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(1.15); opacity: 0.15; }
}

.dialogue-avatar.nadir {
  background: linear-gradient(135deg, #2a2a2a, #000);
  color: #ccc;
}

.dialogue-avatar.tenok {
  background: linear-gradient(135deg, #6097d4, #2a5d9e);
}

.dialogue-content {
  flex: 1;
}

.dialogue-speaker {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin-bottom: var(--sp-1);
}

.dialogue-text {
  font-family: var(--font-serif);
  font-size: clamp(17px, 2.2vw, 20px);
  line-height: 1.5;
  color: var(--c-ink);
}

/* Opciones */
.choices {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

.choice {
  width: 100%;
  text-align: left;
  padding: var(--sp-4) var(--sp-5);
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid var(--c-panel-border);
  border-radius: var(--r-md);
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--c-ink);
  transition: all var(--dur-fast);
  position: relative;
}

.choice::before {
  content: "→";
  position: absolute;
  left: var(--sp-3);
  opacity: 0;
  color: var(--c-accent);
  transform: translateX(-4px);
  transition: all var(--dur-fast);
}

.choice:hover,
.choice:focus-visible {
  background: var(--c-panel);
  border-color: var(--c-accent);
  padding-left: calc(var(--sp-5) + 14px);
  outline: none;
}

.choice:hover::before,
.choice:focus-visible::before {
  opacity: 1;
  transform: translateX(0);
}

.choice.disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* ==========================================================================
   Botones
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  transition: all var(--dur-fast);
  border: 1px solid transparent;
}

.btn-primary {
  background: var(--c-ink);
  color: var(--c-bg-1);
  box-shadow: 0 4px 16px var(--c-shadow);
}

.btn-primary:hover {
  background: var(--c-accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--c-shadow);
}

.btn-ghost {
  background: transparent;
  color: var(--c-ink-soft);
  border-color: var(--c-panel-border);
}

.btn-ghost:hover {
  color: var(--c-ink);
  border-color: var(--c-ink-soft);
}

.btn-large {
  padding: var(--sp-4) var(--sp-7);
  font-size: 18px;
  border-radius: var(--r-lg);
}

.btn-advance {
  margin-top: var(--sp-5);
  display: flex;
  margin-left: auto;
}

/* ==========================================================================
   Modales
   ========================================================================== */

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  animation: fadeIn var(--dur-fast);
}

/* [hidden] debe ganarle a display:flex */
.modal[hidden] {
  display: none;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-card {
  background: var(--c-panel);
  border-radius: var(--r-xl);
  max-width: 560px;
  width: 100%;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
  animation: modalIn var(--dur-med) cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes modalIn {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--c-panel-border);
}

.modal-header h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--c-ink);
}

.btn-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 18px;
  color: var(--c-ink-soft);
  transition: all var(--dur-fast);
}

.btn-close:hover {
  background: var(--c-panel-border);
  color: var(--c-ink);
}

.modal-body {
  padding: var(--sp-5);
  overflow-y: auto;
  font-family: var(--font-serif);
  color: var(--c-ink);
}

.empty {
  text-align: center;
  color: var(--c-ink-soft);
  font-style: italic;
  padding: var(--sp-6);
}

.diario-entry {
  padding: var(--sp-3) 0;
  border-bottom: 1px dashed var(--c-panel-border);
}

.diario-entry:last-child {
  border-bottom: none;
}

.diario-when {
  font-size: 12px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-ink-soft);
  margin-bottom: var(--sp-1);
}

.insignia-card {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: rgba(var(--particle-color), 0.1);
  margin-bottom: var(--sp-2);
}

.insignia-icon {
  font-size: 32px;
}

.insignia-name {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--c-ink);
}

.insignia-desc {
  font-size: 13px;
  color: var(--c-ink-soft);
  font-style: italic;
}

/* ==========================================================================
   Celebración de insignia
   ========================================================================== */

.celebrate {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.9) 100%);
  animation: fadeIn var(--dur-med);
}

.celebrate-card {
  text-align: center;
  padding: var(--sp-7);
  animation: celebrateIn 800ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.celebrate-icon {
  font-size: 120px;
  line-height: 1;
  display: block;
  margin-bottom: var(--sp-4);
  animation: celebrateSpin 1.2s cubic-bezier(0.34, 1.56, 0.64, 1),
    celebrateGlow 2s ease-in-out infinite 1.2s;
  filter: drop-shadow(0 0 20px var(--c-gold));
}

.celebrate-label {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: var(--sp-3);
  animation: fadeUp 500ms ease-out 600ms backwards;
}

.celebrate-name {
  font-family: var(--font-serif);
  font-size: clamp(28px, 5vw, 42px);
  font-weight: 600;
  color: white;
  margin-bottom: var(--sp-3);
  animation: fadeUp 500ms ease-out 800ms backwards;
}

.celebrate-desc {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  color: rgba(255, 255, 255, 0.75);
  max-width: 420px;
  margin: 0 auto var(--sp-5);
  animation: fadeUp 500ms ease-out 1000ms backwards;
}

.celebrate-close {
  animation: fadeUp 500ms ease-out 1200ms backwards;
}

@keyframes celebrateIn {
  from { opacity: 0; transform: scale(0.7); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes celebrateSpin {
  0% { transform: rotate(-180deg) scale(0); opacity: 0; }
  70% { transform: rotate(20deg) scale(1.3); opacity: 1; }
  100% { transform: rotate(0) scale(1); opacity: 1; }
}

@keyframes celebrateGlow {
  0%, 100% { filter: drop-shadow(0 0 20px var(--c-gold)); }
  50% { filter: drop-shadow(0 0 40px var(--c-gold)) drop-shadow(0 0 60px rgba(255, 209, 102, 0.5)); }
}

/* Chispas de la celebración */
.celebrate-sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.spark {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-gold);
  box-shadow: 0 0 8px var(--c-gold);
  animation: sparkBurst 1.2s ease-out forwards;
}

@keyframes sparkBurst {
  0% {
    transform: translate(-50%, -50%) translate(0, 0) scale(0);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(0);
    opacity: 0;
  }
}

/* ==========================================================================
   Toast
   ========================================================================== */

.toast {
  position: fixed;
  bottom: var(--sp-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  padding: var(--sp-3) var(--sp-5);
  background: var(--c-ink);
  color: var(--c-bg-1);
  border-radius: var(--r-lg);
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  animation: toastIn var(--dur-med) cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes toastIn {
  from { transform: translate(-50%, 20px); opacity: 0; }
  to { transform: translate(-50%, 0); opacity: 1; }
}

.toast.fading {
  animation: toastOut var(--dur-med) forwards;
}

@keyframes toastOut {
  to { transform: translate(-50%, 20px); opacity: 0; }
}

/* ==========================================================================
   PUZZLES
   ========================================================================== */

.puzzle {
  margin: var(--sp-5) 0;
}

.puzzle-title {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-accent);
  margin-bottom: var(--sp-3);
}

.puzzle-instructions {
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--c-ink-soft);
  margin-bottom: var(--sp-4);
  font-style: italic;
}

/* --- Puzzle: Secuencia (Reto 1 Columna del Titán) --- */

.seq-slots {
  display: flex;
  gap: var(--sp-2);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--sp-5);
}

.seq-slot {
  width: clamp(56px, 11vw, 80px);
  height: clamp(56px, 11vw, 80px);
  border-radius: var(--r-md);
  background: var(--c-panel);
  border: 2px solid var(--c-panel-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: clamp(22px, 4vw, 32px);
  font-weight: 600;
  color: var(--c-ink);
  transition: all var(--dur-fast);
}

.seq-slot.empty {
  background: transparent;
  border-style: dashed;
  color: var(--c-ink-soft);
  opacity: 0.5;
}

.seq-slot.filled {
  animation: slotFill var(--dur-med) cubic-bezier(0.4, 0, 0.2, 1);
  background: linear-gradient(135deg, var(--c-panel), var(--c-bg-1));
  border-color: var(--c-accent);
  box-shadow: 0 4px 12px var(--c-shadow);
}

.seq-slot.correct {
  background: linear-gradient(135deg, #9ddb8b, #4caf50);
  border-color: #2e7d32;
  color: white;
}

.seq-slot.wrong {
  background: linear-gradient(135deg, #ff8a80, #d32f2f);
  border-color: #b71c1c;
  color: white;
  animation: shake 0.4s;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

@keyframes slotFill {
  from { transform: scale(1.2); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.seq-options {
  display: flex;
  gap: var(--sp-3);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--sp-3);
}

.seq-option {
  width: clamp(56px, 11vw, 80px);
  height: clamp(56px, 11vw, 80px);
  border-radius: var(--r-md);
  background: var(--c-panel);
  border: 2px solid var(--c-panel-border);
  font-family: var(--font-serif);
  font-size: clamp(22px, 4vw, 32px);
  font-weight: 600;
  color: var(--c-ink);
  transition: all var(--dur-fast);
  cursor: pointer;
}

.seq-option:hover {
  border-color: var(--c-accent);
  transform: translateY(-3px);
  box-shadow: 0 6px 16px var(--c-shadow);
}

.seq-option.used {
  opacity: 0.3;
  pointer-events: none;
}

/* Botón cambiar reto (máx 2 cambios) */
.btn-cambiar {
  display: flex;
  margin: var(--sp-5) auto 0;
  padding: var(--sp-2) var(--sp-4);
  background: transparent;
  border: 1.5px dashed var(--c-panel-border);
  border-radius: var(--r-lg);
  color: var(--c-ink-soft);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  transition: all var(--dur-fast);
  align-items: center;
  gap: var(--sp-2);
}

.btn-cambiar:hover {
  border-color: var(--c-accent);
  border-style: solid;
  color: var(--c-accent);
  background: rgba(var(--particle-color), 0.08);
}

.btn-cambiar .cambiar-count {
  font-size: 12px;
  opacity: 0.7;
  font-weight: 400;
}

/* ==========================================================================
   Escena: Las Tres Lunas (Reto 4)
   ========================================================================== */

.lunas-stage {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
  margin: var(--sp-5) 0;
}

.luna {
  text-align: center;
  padding: var(--sp-3);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(4px);
}

.luna-body {
  width: clamp(70px, 16vw, 110px);
  height: clamp(70px, 16vw, 110px);
  border-radius: 50%;
  margin: 0 auto var(--sp-3);
  box-shadow: 0 4px 16px var(--c-shadow), inset -8px -8px 20px rgba(0,0,0,0.3);
  animation: lunaFloat 5s ease-in-out infinite;
}

.luna-a .luna-body { animation-delay: 0s; }
.luna-b .luna-body { animation-delay: 1.5s; }
.luna-c .luna-body { animation-delay: 3s; }

@keyframes lunaFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.luna-label {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--c-ink-soft);
  margin-bottom: var(--sp-2);
}

.luna-label em {
  opacity: 0.7;
  font-size: 11px;
  display: block;
  font-style: italic;
}

.luna-say {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--c-ink);
  line-height: 1.4;
}

/* ==========================================================================
   Puzzle: Orbit Order (Reto 6 Fase 1)
   ========================================================================== */

.orbit-axis-label {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--c-ink-soft);
  text-align: center;
  margin-bottom: var(--sp-3);
  letter-spacing: 0.05em;
}

.orbit-slots {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: var(--sp-1);
  margin-bottom: var(--sp-5);
}

.orbit-slot {
  aspect-ratio: 1 / 1.3;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  transition: all var(--dur-fast);
  background: rgba(255, 255, 255, 0.2);
  border: 2px dashed var(--c-panel-border);
  color: var(--c-ink-soft);
  padding: 2px;
  overflow: hidden;
  text-align: center;
}

.orbit-slot.filled {
  background: var(--c-panel);
  border-style: solid;
  border-color: var(--c-accent);
  color: var(--c-ink);
  cursor: pointer;
  animation: slotFill var(--dur-med);
}

.orbit-slot.correct {
  background: linear-gradient(135deg, #9ddb8b, #4caf50);
  border-color: #2e7d32;
  color: white;
}

.orbit-slot.wrong {
  background: linear-gradient(135deg, #ff8a80, #d32f2f);
  border-color: #b71c1c;
  color: white;
  animation: shake 0.4s;
}

.orbit-slot-num {
  font-size: 16px;
  font-weight: 700;
  color: var(--c-ink-soft);
}

.orbit-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  white-space: normal;
  word-break: break-word;
  line-height: 1.1;
}

.orbit-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
}

.orbit-option {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-panel);
  border: 2px solid var(--c-panel-border);
  border-radius: var(--r-lg);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--c-ink);
  cursor: pointer;
  transition: all var(--dur-fast);
}

.orbit-option:hover {
  border-color: var(--c-accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--c-shadow);
}

.orbit-option.used {
  opacity: 0.3;
  pointer-events: none;
}

.orbit-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(0,0,0,0.2);
  flex-shrink: 0;
}

/* ==========================================================================
   Puzzle: Group (Reto 6 Fase 2 — Enanos en regiones)
   ========================================================================== */

.pista-list {
  list-style: none;
  padding: 0;
  margin: var(--sp-3) 0;
}

.pista-list li {
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-2);
  background: rgba(var(--particle-color), 0.08);
  border-left: 3px solid var(--c-accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-family: var(--font-serif);
  font-size: 15px;
  font-style: italic;
  color: var(--c-ink);
}

.group-zones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.group-zone {
  padding: var(--sp-3);
  background: var(--c-panel);
  border: 2px dashed var(--c-panel-border);
  border-radius: var(--r-lg);
  min-height: 140px;
  cursor: pointer;
  transition: all var(--dur-fast);
  display: flex;
  flex-direction: column;
}

.group-zone:hover {
  border-color: var(--c-accent);
  border-style: solid;
  background: rgba(var(--particle-color), 0.1);
}

.group-zone-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-1);
}

.group-zone-emoji {
  font-size: 22px;
}

.group-zone-name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 15px;
  color: var(--c-ink);
}

.group-zone-hint {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 12px;
  color: var(--c-ink-soft);
  margin-bottom: var(--sp-3);
}

.group-zone-body {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  flex: 1;
  align-items: flex-start;
}

.group-zone-empty {
  color: var(--c-ink-soft);
  opacity: 0.4;
}

.group-placed {
  display: inline-flex;
  align-items: center;
  padding: 3px var(--sp-2);
  background: var(--c);
  color: white;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-sans);
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  cursor: pointer;
  transition: transform var(--dur-fast);
}

.group-placed:hover {
  transform: scale(0.95);
}

.group-placed.correct {
  box-shadow: 0 0 0 2px #2e7d32, 0 0 12px rgba(76, 175, 80, 0.5);
}

.group-placed.wrong {
  animation: shake 0.4s;
  box-shadow: 0 0 0 2px #b71c1c;
}

.group-items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
  margin-bottom: var(--sp-3);
}

.group-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: var(--c-panel);
  border: 2px solid var(--c-panel-border);
  border-radius: var(--r-lg);
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--c-ink);
  cursor: pointer;
  transition: all var(--dur-fast);
}

.group-item:hover {
  border-color: var(--c-accent);
}

.group-item.selected {
  border-color: var(--c-gold);
  background: rgba(var(--particle-color), 0.2);
  box-shadow: 0 0 0 3px rgba(var(--particle-color), 0.4);
}

.group-item.assigned {
  opacity: 0.5;
}

.group-item-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.group-verify {
  text-align: center;
  margin-top: var(--sp-3);
}

.group-help {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--c-ink-soft);
  text-align: center;
}

/* Móvil: orbit-slots más grande */
@media (max-width: 640px) {
  .orbit-slots {
    grid-template-columns: repeat(4, 1fr);
  }
  .orbit-slot {
    aspect-ratio: 1 / 1;
  }
}

/* ==========================================================================
   Puzzle: Pick (identificar correctos con feedback educativo)
   ========================================================================== */

.pick-progress {
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--c-ink-soft);
  margin-bottom: var(--sp-3);
}

.pick-progress strong {
  color: var(--c-accent);
  font-style: normal;
}

.pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.pick-item {
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-panel);
  border: 2px solid var(--c-panel-border);
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  color: var(--c-ink);
  cursor: pointer;
  transition: all var(--dur-fast);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}

.pick-item:hover:not(:disabled) {
  border-color: var(--c-accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--c-shadow);
}

.pick-item:disabled {
  cursor: default;
  transform: none;
}

.pick-item.pick-correct {
  background: linear-gradient(135deg, #9ddb8b, #4caf50);
  border-color: #2e7d32;
  color: white;
  animation: slotFill var(--dur-med);
}

.pick-item.pick-wrong {
  background: linear-gradient(135deg, #ffb3b3, #d87a7a);
  border-color: #b71c1c;
  color: white;
  opacity: 0.7;
  animation: shake 0.4s;
}

.pick-mark {
  font-weight: 700;
  font-size: 16px;
  color: white;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.pick-message {
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.5;
  animation: sceneIn var(--dur-med);
}

.pick-message.good {
  background: rgba(76, 175, 80, 0.15);
  border-left: 4px solid #4caf50;
  color: var(--c-ink);
}

.pick-message.bad {
  background: rgba(215, 122, 122, 0.15);
  border-left: 4px solid #d87a7a;
  color: var(--c-ink);
}

.pick-message strong {
  color: var(--c-accent);
}

/* --- Puzzle: Memoria (Reto 2 Cráneos) --- */

.memo-grid {
  display: flex;
  gap: var(--sp-3);
  justify-content: center;
  flex-wrap: wrap;
  margin: var(--sp-5) 0;
}

.memo-cell {
  width: clamp(56px, 13vw, 90px);
  height: clamp(56px, 13vw, 90px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(28px, 6vw, 40px);
  transition: all var(--dur-fast);
  cursor: pointer;
  user-select: none;
  border-width: 4px;
  border-style: solid;
}

/* Estado apagado: borde a color pleno + tinte suave */
.memo-cell[data-color="rojo"]     { background: rgba(231, 76, 60, 0.18);  border-color: #e74c3c; }
.memo-cell[data-color="azul"]     { background: rgba(52, 152, 219, 0.18); border-color: #3498db; }
.memo-cell[data-color="amarillo"] { background: rgba(241, 196, 15, 0.18); border-color: #f1c40f; }
.memo-cell[data-color="verde"]    { background: rgba(39, 174, 96, 0.18);  border-color: #27ae60; }
.memo-cell[data-color="morado"]   { background: rgba(142, 68, 173, 0.18); border-color: #8e44ad; }
.memo-cell[data-color="naranja"]  { background: rgba(230, 126, 34, 0.18); border-color: #e67e22; }

/* Estado encendido: relleno pleno + glow */
.memo-cell[data-color="rojo"].lit     { background: #e74c3c; border-color: #c0392b; box-shadow: 0 0 20px #e74c3c; }
.memo-cell[data-color="azul"].lit     { background: #3498db; border-color: #2874a6; box-shadow: 0 0 20px #3498db; }
.memo-cell[data-color="amarillo"].lit { background: #f1c40f; border-color: #b7950b; box-shadow: 0 0 20px #f1c40f; }
.memo-cell[data-color="verde"].lit    { background: #27ae60; border-color: #196f3d; box-shadow: 0 0 20px #27ae60; }
.memo-cell[data-color="morado"].lit   { background: #8e44ad; border-color: #5b2c6f; box-shadow: 0 0 20px #8e44ad; }
.memo-cell[data-color="naranja"].lit  { background: #e67e22; border-color: #a04000; box-shadow: 0 0 20px #e67e22; }

.memo-cell.lit {
  transform: scale(1.1);
}

.memo-cell.input-mode:hover {
  transform: scale(1.05);
  border-color: var(--c-accent);
}

.memo-cell.disabled {
  pointer-events: none;
  opacity: 0.5;
}

.memo-status {
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--c-ink-soft);
  margin: var(--sp-3) 0;
}

.memo-progress {
  display: flex;
  gap: var(--sp-2);
  justify-content: center;
  margin-top: var(--sp-3);
}

.memo-progress-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--c-panel-border);
}

.memo-progress-dot.done {
  background: var(--c-accent);
}

/* --- Puzzle: Timer (Reloj de Arena) --- */

.hourglass {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: var(--sp-5) 0;
}

.hourglass-visual {
  font-size: 80px;
  animation: wobble 3s ease-in-out infinite;
  margin-bottom: var(--sp-3);
}

@keyframes wobble {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}

.hourglass-progress {
  width: 260px;
  max-width: 100%;
  height: 10px;
  background: var(--c-panel-border);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: var(--sp-3);
}

.hourglass-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--c-gold), var(--c-accent));
  width: 0%;
  transition: width 100ms linear;
}

.hourglass-seconds {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--c-ink-soft);
  font-style: italic;
}

.hourglass-secret {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  background: rgba(var(--particle-color), 0.15);
  border-radius: var(--r-md);
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--c-ink);
  text-align: center;
  animation: sceneIn var(--dur-slow);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 640px) {
  .hud {
    padding: var(--sp-2) var(--sp-3);
    gap: var(--sp-2);
  }

  .hud-hora {
    font-size: 14px;
  }

  .hud-vinculo {
    min-width: 120px;
  }

  #stage {
    padding: var(--sp-6) var(--sp-3) var(--sp-5);
  }

  .scene-card {
    padding: var(--sp-4);
  }

  .dialogue-avatar {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
}

/* Landscape móvil */
@media (max-height: 500px) and (orientation: landscape) {
  .splash-title { font-size: 48px; }
  .splash-subtitle { font-size: 18px; }
  #stage { padding-top: var(--sp-5); }
}

/* Accesibilidad: reducir motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}