/* ============================================================
   MISTERIO — lo que se cuela en la web cuando cae la noche
   ------------------------------------------------------------
   Susurros que aparecen y se van, un par de ojos que te miran
   desde el borde de la pantalla y el aviso grande de que el fin
   de Imaginitycraft depende de la gente que lee esto.

   Lo pinta misterio.js. Sin JavaScript no sale nada de lo que se
   mueve y el aviso se lee igual. Con "reducir movimiento" no hay
   susurros, ni ojos, ni parpadeos.
   ============================================================ */

/* ---------- susurros ---------- */
.mi-susurro {
  position: fixed; z-index: 900; pointer-events: none; max-width: min(78vw, 22rem);
  margin: 0; padding: 0.15rem 0.2rem;
  font: 700 clamp(0.8rem, 2.4vw, 1rem)/1.3 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: 0.22em; text-transform: uppercase; color: #ff4a2b;
  text-shadow: 0 0 10px rgba(255, 60, 20, 0.85), 0 0 28px rgba(209, 38, 10, 0.6);
  opacity: 0; transform: translateZ(0);
  mix-blend-mode: screen;
}
.mi-susurro.es-viva { animation: mi-susurra 2.6s steps(1, end) forwards; }
@keyframes mi-susurra {
  0%   { opacity: 0; transform: translateX(0); }
  6%   { opacity: 1; transform: translateX(-3px); }
  9%   { opacity: 0.2; transform: translateX(4px); }
  13%  { opacity: 1; transform: translateX(0); }
  62%  { opacity: 0.9; }
  66%  { opacity: 0.15; }
  70%  { opacity: 0.85; }
  82%  { opacity: 0.35; transform: translateX(2px); }
  90%  { opacity: 0.9; }
  100% { opacity: 0; transform: translateX(0); }
}

/* ---------- ojos en la oscuridad ---------- */
.mi-ojos {
  position: fixed; z-index: 890; pointer-events: none; display: flex; gap: clamp(0.9rem, 2.2vw, 1.5rem);
  opacity: 0; transition: opacity 0.9s ease;
}
.mi-ojos.es-vivo { opacity: 0.95; }
.mi-ojos.es-huye { opacity: 0; transition-duration: 0.18s; }
.mi-ojos i {
  display: block; width: clamp(1.2rem, 3vw, 1.9rem); height: clamp(0.45rem, 1.1vw, 0.7rem); border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, #fff3c4 0 22%, #ff4a1a 46%, #8a1405 100%);
  box-shadow: 0 0 14px 3px rgba(255, 60, 20, 0.85), 0 0 46px 10px rgba(209, 38, 10, 0.5);
  transform: rotate(var(--r, 6deg)); transform-origin: 50% 50%;
}
.mi-ojos i + i { --r: -6deg; }
.mi-ojos.es-parpadea i { animation: mi-parpadea 0.32s ease-in-out; }
@keyframes mi-parpadea { 50% { transform: rotate(var(--r, 6deg)) scaleY(0.08); } }

/* ---------- el aviso grande ---------- */
.dz-fin {
  position: relative; overflow: hidden; isolation: isolate; text-align: center;
  margin: 0 0 clamp(1.4rem, 3vw, 2.2rem);
  padding: clamp(2rem, 6vw, 3.6rem) clamp(1rem, 4vw, 2.6rem);
  border-radius: 18px;
  background:
    radial-gradient(70% 90% at 50% 120%, rgba(209, 38, 10, 0.5), transparent 70%),
    linear-gradient(180deg, #0a0507, #170709);
  box-shadow: inset 0 0 0 1px rgba(209, 38, 10, 0.55), 0 0 60px -14px rgba(255, 60, 20, 0.7);
}
.dz-fin::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 4px);
}
.dz-fin::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  box-shadow: inset 0 0 130px rgba(120, 8, 0, 0.75);
  animation: dz-fin-latido 2.4s ease-in-out infinite;
}
@keyframes dz-fin-latido { 0%, 100% { opacity: 0.35; } 14% { opacity: 1; } 28% { opacity: 0.45; } 42% { opacity: 0.95; } 60% { opacity: 0.3; } }
.dz-fin-pre {
  margin: 0; display: inline-flex; align-items: center; gap: 0.7em;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: #ff7a52;
}
.dz-fin-pre::before, .dz-fin-pre::after { content: ""; width: 2.2rem; height: 1px; background: linear-gradient(90deg, transparent, #ff4a1a); }
.dz-fin-pre::after { transform: scaleX(-1); }
.dz-fin-t {
  position: relative; margin: 0.9rem auto 0; max-width: 17ch;
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase; text-wrap: balance;
  font-size: clamp(2.1rem, 8.2vw, 5rem); line-height: 0.98; letter-spacing: 0.01em; color: #f3e6d2;
  text-shadow: 0 0 30px rgba(255, 60, 20, 0.35);
}
.dz-fin-t b { color: #ff4a1a; font-weight: inherit; text-shadow: 0 0 22px rgba(255, 60, 20, 0.9), 0 0 60px rgba(209, 38, 10, 0.8); }
.dz-fin-t b:last-child { animation: dz-fin-glitch 5.5s steps(1, end) infinite; }
@keyframes dz-fin-glitch {
  0%, 90%, 100% { transform: none; text-shadow: 0 0 22px rgba(255, 60, 20, 0.9), 0 0 60px rgba(209, 38, 10, 0.8); }
  91% { transform: translate(-3px, 1px); text-shadow: 3px 0 #29e7ff, -3px 0 #ff2a5f; }
  93% { transform: translate(3px, -1px); text-shadow: -3px 0 #29e7ff, 3px 0 #ff2a5f; }
  95% { transform: translate(0, 2px) skewX(-6deg); text-shadow: 2px 0 #29e7ff, -2px 0 #ff2a5f; }
  97% { transform: none; }
}
.dz-fin-sub { margin: 1.1rem 0 0; font-size: clamp(0.92rem, 2.4vw, 1.1rem); font-style: italic; color: #b7a99a; letter-spacing: 0.04em; }
.dz-fin-sub em { color: #ffc9a0; font-style: normal; }

/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  .mi-susurro, .mi-ojos, .dz-fin::after, .dz-fin-t b:last-child { animation: none !important; }
  .dz-fin::after { opacity: 0.7; }
}

.dz-fin .dz-botones { justify-content: center; margin-top: 1.4rem; }
.dz-fin-sub { margin-inline: auto; max-width: 60ch; }

/* ---------- la tira de los que han caído (portada y lore) ---------- */
.dz-caidos {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.5rem 1rem; min-height: 3rem; margin: 0 0 clamp(1.4rem, 3vw, 2.2rem);
  padding: 0.7rem 1.1rem; border-radius: 14px; text-decoration: none; text-align: center; color: #f3e6d2;
  background: linear-gradient(90deg, rgba(209, 38, 10, 0.1), rgba(209, 38, 10, 0.26), rgba(209, 38, 10, 0.1));
  box-shadow: inset 0 0 0 1px rgba(255, 90, 50, 0.5);
}
.dz-caidos:hover { box-shadow: inset 0 0 0 1px rgba(255, 130, 90, 0.9), 0 0 30px -8px rgba(255, 70, 20, 0.8); }
.dz-caidos-ico { flex: none; width: 1.6rem; height: 1.6rem; color: #ff6a4a; filter: drop-shadow(0 0 6px rgba(255, 70, 20, 0.7)); }
.dz-caidos-ico svg { display: block; width: 100%; height: 100%; }
.dz-caidos-t { font-size: 0.86rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.dz-caidos-t b { color: #ff7a52; font-weight: 800; margin-right: 0.5em; }
.dz-caidos-v { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: #ffb59c; border-bottom: 1px solid currentColor; }