/* D-INTRO-FLANAGAN (claude/_CLAUDE_D_INTRO_FLANAGAN_MESA.md) — la entrada con Flanagan por el chat (D-IF-3/10), el hada madrina
   (D-IF-5) y el indicador de saltar escenas con ESC (D-IF-7). */

/* ── D-IF-3 — el fundido y el chat a pantalla completa ── */
#introNegro {
  position: fixed; inset: 0; z-index: 8900; pointer-events: auto;
  background: radial-gradient(ellipse at 50% 45%, rgba(10, 8, 14, 0.88), rgba(0, 0, 0, 0.97));
  opacity: 0; transition: opacity 1500ms ease;
}
#introNegro.intro-negro--on { opacity: 1; }
.intro-reducida #introNegro { transition-duration: 200ms; }

#chroniclesSection.intro-pantalla {
  position: fixed !important; z-index: 9000;
  left: 12vw !important; right: 12vw !important; top: 9vh !important; bottom: 9vh !important;
  width: auto !important; max-width: none !important; height: auto !important; margin: 0 !important;
  display: flex; flex-direction: column;
  opacity: 0; transition: opacity 900ms ease 1200ms;
  box-shadow: 0 0 0 1px rgba(214, 170, 90, 0.35), 0 30px 90px rgba(0, 0, 0, 0.75);
}
#chroniclesSection.intro-pantalla.intro-pantalla--on { opacity: 1; }
/* durante la escena el chat va en <body> (fuera del marco): su aspecto lo pone esta hoja */
#chroniclesSection.intro-pantalla {
  align-items: stretch; padding: 1rem 1.3rem !important; border-radius: 12px;
  background: linear-gradient(180deg, rgba(16, 18, 28, 0.97), rgba(9, 10, 16, 0.97)) !important;
  border: 1px solid rgba(200, 168, 96, 0.55);
}
#chroniclesSection.intro-pantalla > .flex.gap-2 {
  display: flex !important; position: static !important; width: 100% !important; flex: 0 0 auto; gap: 0.7rem; margin-top: 0.8rem;
}
#chroniclesSection.intro-pantalla #cityChatInput {
  flex: 1 1 auto; width: auto !important; padding: 0 1rem;
  background: rgba(0, 0, 0, 0.55) !important; color: #fde9c0 !important;
  border: 1px solid rgba(217, 160, 70, 0.6) !important; border-radius: 8px;
}
#chroniclesSection.intro-pantalla #cityChatInput::placeholder { color: rgba(217, 160, 70, 0.6); }
#chroniclesSection.intro-pantalla #cityChatSendBtn { padding: 0 1.4rem; }
.intro-reducida #chroniclesSection.intro-pantalla { transition-duration: 200ms; transition-delay: 0ms; }
#chroniclesSection.intro-pantalla #logBox {
  max-height: none !important; min-height: 0 !important; flex: 1 1 0 !important; overflow-y: auto !important;
  font-size: 1.55rem; line-height: 1.55; padding: 1.2rem 1.4rem !important;
}
#chroniclesSection.intro-pantalla #logBox .intro-linea,
#chroniclesSection.intro-pantalla #logBox .intro-linea * { font-size: 1.55rem !important; line-height: 1.55; }
#chroniclesSection.intro-pantalla #logBox .intro-linea { padding: 0.3rem 0; }
#chroniclesSection.intro-pantalla #cityChatInput,
#chroniclesSection.intro-pantalla #cityChatSendBtn { font-size: 1.3rem !important; min-height: 3.2rem; }
#chroniclesSection.intro-pantalla .chat-canales,
#chroniclesSection.intro-pantalla #onlineUsersContainer { visibility: hidden; }
/* sólo las líneas de la intro: el resto se oculta (no se borra) */
body.intro-activa #logBox > :not(.intro-linea) { display: none !important; }
#cityChatInput.intro-campo-espera { opacity: 0.5; }
#chroniclesSection.intro-encoge { position: relative; z-index: 9000; }

/* ── D-IF-5 — el hada madrina ── */
.hada-capa { position: fixed; inset: 0; z-index: 9500; pointer-events: none; }
.hada-panel {
  position: fixed; pointer-events: auto;
  background: rgba(6, 5, 10, 0.55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.hada-anillo {
  position: fixed; pointer-events: none; border-radius: 12px;
  box-shadow: 0 0 0 2px rgba(255, 223, 140, 0.95), 0 0 22px 6px rgba(255, 214, 120, 0.55);
  animation: hada-late 1.6s ease-in-out infinite;
}
/* el objetivo queda en el hueco de los paneles (no se le cambia la posición: algunos van en absoluto) */
.hada-objetivo { filter: brightness(1.12); }
@keyframes hada-late { 0%, 100% { box-shadow: 0 0 0 2px rgba(255, 223, 140, 0.9), 0 0 16px 4px rgba(255, 214, 120, 0.4); } 50% { box-shadow: 0 0 0 3px rgba(255, 236, 180, 1), 0 0 30px 10px rgba(255, 214, 120, 0.7); } }
.hada-ventana {
  position: fixed; pointer-events: auto; display: flex; gap: 0.8rem; align-items: center;
  width: min(380px, calc(100vw - 32px)); padding: 0.8rem 1rem;
  border-radius: 14px; color: #fbf3df;
  background: linear-gradient(160deg, rgba(48, 36, 70, 0.96), rgba(22, 18, 34, 0.96));
  border: 1px solid rgba(255, 220, 150, 0.55);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(255, 220, 140, 0.25);
  animation: hada-entra 420ms ease-out;
}
@keyframes hada-entra { from { opacity: 0; transform: translateY(8px) scale(0.97); } to { opacity: 1; transform: none; } }
.hada-retrato { flex: 0 0 72px; width: 72px; height: 72px; display: grid; place-items: center; }
.hada-retrato img { width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 0 10px rgba(255, 230, 160, 0.7)); }
.hada-luz { width: 64px; height: 64px; animation: hada-brilla 2.4s ease-in-out infinite; }
.hada-luz__chispa { animation: hada-chispa 1.8s ease-in-out infinite; }
.hada-luz__chispa--2 { animation-delay: 0.6s; }
.hada-luz__chispa--3 { animation-delay: 1.2s; }
@keyframes hada-brilla { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 6px #ffe7a0); } 50% { transform: scale(1.07); filter: drop-shadow(0 0 14px #fff1c4); } }
@keyframes hada-chispa { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }
.hada-nombre { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: #f3d48d; margin-bottom: 0.15rem; }
.hada-texto { font-size: 1rem; line-height: 1.4; }
.ui-efectos-reducidos .hada-anillo, .ui-efectos-reducidos .hada-luz, .ui-efectos-reducidos .hada-luz__chispa, .ui-efectos-reducidos .hada-ventana { animation: none; }
@media (prefers-reduced-motion: reduce) { .hada-anillo, .hada-luz, .hada-luz__chispa, .hada-ventana { animation: none; } }

/* ── D-IF-7 — mantener ESC para saltar ── */
.escena-saltar {
  position: fixed; right: 22px; bottom: 22px; z-index: 9600;
  display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.75rem 0.35rem 0.35rem;
  border-radius: 999px; background: rgba(10, 8, 14, 0.55); color: rgba(255, 240, 210, 0.6);
  font-size: 0.85rem; user-select: none; cursor: pointer; touch-action: none;
  transition: color 200ms, background 200ms;
}
.escena-saltar svg { width: 38px; height: 38px; transform: rotate(-90deg); }
.escena-saltar svg text { transform: rotate(90deg); transform-origin: 20px 20px; font-size: 9px; font-weight: 700; fill: currentColor; }
.escena-saltar__fondo { fill: none; stroke: rgba(255, 255, 255, 0.18); stroke-width: 3; }
.escena-saltar__arco { fill: none; stroke: #f3d48d; stroke-width: 3; stroke-linecap: round; }
.escena-saltar--pulsado { color: #fff3d4; background: rgba(30, 22, 40, 0.85); }

/* ── D-IF-2 — la casilla de la creación ── */
.cre-intro-repetir { display: flex; align-items: center; gap: 0.45rem; justify-content: center; margin: 0.4rem 0; font-size: 0.85rem; opacity: 0.8; cursor: pointer; }