/* 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 ── */
/* D-INTRO-2 D-I2-1 — negro puro (no se ve nada detrás) y un fundido de 4,5 s con curva suave, que empieza en la creación */
#introNegro {
  position: fixed; inset: 0; z-index: 8900; pointer-events: auto;
  background: #000;
  opacity: 0; transition: opacity 4500ms cubic-bezier(.45, 0, .55, 1);
}
#introNegro.intro-negro--on { opacity: 1; }
#introNegro.intro-negro--sale { transition-duration: 700ms; }
.intro-reducida #introNegro { transition-duration: 200ms; }

/* D-I2-1 — sólo el chat, a pantalla completa, sobre casi negro; aparece cuando lo dice el guion (sin retardo de CSS) */
#chroniclesSection.intro-pantalla {
  position: fixed !important; z-index: 9000 !important; /* D-I2-1 — en pantalla estrecha, style_v0.8.9.css lo bajaba a 50 y quedaba bajo el negro */
  left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !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;
}
#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: 5vh 8vw !important; border-radius: 0;
  background: #060609 !important;
  border: 0; box-shadow: none;
}
#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; }
/* D-KITS-EQ (D-S2-5) — el campo encoge y «Enviar» no se sale nunca (en 279 px de ancho el campo medía 286) */
#chroniclesSection.intro-pantalla { box-sizing: border-box; }
#chroniclesSection.intro-pantalla #cityChatInput { min-width: 0 !important; }
#chroniclesSection.intro-pantalla #cityChatSendBtn { flex: 0 0 auto; }
@media (max-width: 640px) {
  #chroniclesSection.intro-pantalla { padding: 3vh 3vw !important; }
  #chroniclesSection.intro-pantalla > .flex.gap-2 { gap: 0.4rem; }
  #chroniclesSection.intro-pantalla #cityChatInput { padding: 0 0.6rem; }
  #chroniclesSection.intro-pantalla #cityChatSendBtn { padding: 0 0.8rem; }
}
.intro-reducida #chroniclesSection.intro-pantalla { transition-duration: 200ms; }
#chroniclesSection.intro-pantalla #logBox { background: transparent !important; border: 0 !important; }
#chroniclesSection.intro-pantalla #logBox {
  max-height: none !important; min-height: 0 !important; flex: 1 1 0 !important; overflow-y: auto !important;
  overflow-anchor: none; /* D-SMOKE-PH4 S-2b: sin anclaje de scroll; la baja a la última línea src/ui/pegar_abajo.ts */
  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 ── */
/* D-INTRO-ARREGLOS D-IA-1 — la capa no hace caja (display: contents) para que cada pieza lleve su z: los paneles y el anillo, por
   debajo del indicador de saltar (9600); la ventana, por encima (sus botones no los tapa nunca) */
.hada-capa { display: contents; pointer-events: none; }
/* D-SMOKE-9 D-SM9-2 — tapada (Diario, escena) o buscando lo que señalaba: la capa entera fuera, sin cerrarse */
.hada-capa--espera > * { display: none !important; }
.hada-panel {
  position: fixed; pointer-events: auto; z-index: 9500;
  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; z-index: 9500;
  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); } }
/* D-HADA-CAJA D-HC-2 — más ancha y aireada; border-box (antes el padding la sacaba de la pantalla en 375 px); el alto máximo lo
   pone colocar() con altoMaximoVentana (D-HC-3), y el texto hace scroll dentro */
.hada-ventana {
  position: fixed; z-index: 9700; pointer-events: auto; display: flex; gap: 1rem; align-items: flex-start; box-sizing: border-box;
  width: min(640px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 1.4rem 1.7rem;
  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 96px; width: 96px; height: 96px; display: grid; place-items: center; }
.hada-retrato img { width: 96px; height: 96px; object-fit: contain; filter: drop-shadow(0 0 10px rgba(255, 230, 160, 0.7)); }
.hada-luz { width: 84px; height: 84px; 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; } }
/* D-HADA-CAJA D-HC-1 — sólo el rótulo en la letra de títulos; el cuerpo, en la letra de lectura de los diálogos (gana a la regla
   `*` del tema v2, que desde D-LETRA da la letra de texto, Nunito; antes, Cinzel Decorative: versalitas) */
.hada-cuerpo { flex: 1 1 auto; min-width: 0; align-self: stretch; display: flex; flex-direction: column; min-height: 0; }
.hada-nombre { font-family: var(--rpg-font-ui) !important; font-size: 0.92rem; letter-spacing: 0.1em; text-transform: uppercase; color: #f3d48d; margin-bottom: 0.45rem; }
.hada-texto {
  font-family: 'EB Garamond', Garamond, Georgia, serif !important; text-transform: none; font-variant: normal;
  font-size: 1.3rem; line-height: 1.6; letter-spacing: 0.01em; color: #fbf3df;
  white-space: pre-line; /* D-TUTORIAL-CHAT D-TC-2: los saltos de línea de la lista de comandos */
  flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 0.35rem;
  scrollbar-width: thin; scrollbar-color: rgba(243, 212, 141, 0.55) transparent;
}
.hada-botones { flex: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }
/* D-SMOKE-4 D-SM4-6 — la línea del hada al pulsar fuera de lo que señala, y el anillo que late más fuerte */
.hada-aviso { flex: none; margin-top: 0.55rem; padding: 0.3rem 0.6rem; border-radius: 8px; font-size: 1rem; color: #ffe9b0;
  font-family: 'EB Garamond', Garamond, Georgia, serif !important; text-transform: none; font-variant: normal; font-style: italic;
  background: rgba(255, 214, 120, 0.12); border: 1px solid rgba(255, 223, 140, 0.45); }
.hada-aviso[hidden] { display: none; }
.hada-aviso--late { animation: hada-aviso 520ms ease-out; }
@keyframes hada-aviso { 0% { transform: translateX(0); } 20% { transform: translateX(-5px); } 45% { transform: translateX(5px); } 70% { transform: translateX(-3px); } 100% { transform: none; } }
.hada-anillo--late { animation: hada-late-fuerte 520ms ease-out 2, hada-late 1.6s ease-in-out 1.04s infinite; }
@keyframes hada-late-fuerte { 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 5px rgba(255, 240, 190, 1), 0 0 44px 16px rgba(255, 214, 120, 0.85); } }
.ui-efectos-reducidos .hada-aviso--late, .ui-efectos-reducidos .hada-anillo--late { animation: none; }
@media (prefers-reduced-motion: reduce) { .hada-aviso--late, .hada-anillo--late { animation: none; } }
@media (max-width: 480px) {
  .hada-ventana { gap: 0.75rem; padding: 0.95rem 1rem; }
  .hada-retrato, .hada-retrato img { flex-basis: 52px; width: 52px; height: 52px; }
  .hada-luz { width: 48px; height: 48px; }
  .hada-texto { font-size: 1.04rem; line-height: 1.55; }
}
/* D-VIAJE-FONDO D-VF-12 — el botón propio del hada («Ir al mapa») */
.hada-boton {
  padding: 0.5rem 1.2rem; border-radius: 8px; cursor: pointer;
  font-size: 1.05rem; color: #2a1d08; background: linear-gradient(180deg, #f6dc98, #d9b25c);
  border: 1px solid rgba(255, 236, 180, 0.9); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.hada-boton:hover, .hada-boton:focus-visible { filter: brightness(1.1); outline: none; }
.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 ── */
/* D-INTRO-ARREGLOS D-IA-1 — el sitio lo pone escenas_saltables.ts (left/top: donde no tape nada que se pueda pulsar); por encima
   de los paneles del hada (en móvil se sigue pudiendo mantener pulsado con un paso que bloquea) y por debajo de su ventana */
.escena-saltar {
  position: fixed; right: auto; bottom: auto; left: auto; top: auto; 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-IA-1 — compacto (sólo el círculo) cuando con el texto no hay sitio libre; la etiqueta accesible se queda en el role=button */
.escena-saltar.escena-saltar--compacta { padding: 2px; gap: 0; }
.escena-saltar--compacta .escena-saltar__texto { display: none; }
.escena-saltar--compacta svg { width: 34px; height: 34px; }
/* y en pantalla estrecha, siempre */
@media (max-width: 640px) {
  .escena-saltar { padding: 2px; gap: 0; }
  .escena-saltar__texto { display: none; }
  .escena-saltar svg { width: 34px; height: 34px; }
}

/* ── D-INTRO-2 D-I2-4 — los botones de acción dentro del chat («[Darle la nota a Apenao]») ── */
.chat-acciones { display: flex; flex-wrap: wrap; gap: 0.35rem 0.6rem; padding: 0.25rem 0 0.35rem 0.5rem; }
.chat-accion {
  background: none; border: 0; padding: 0.05rem 0.15rem; cursor: pointer; font: inherit; font-weight: 600;
  color: #f3d48d; text-decoration: underline; text-decoration-color: rgba(243, 212, 141, 0.45); text-underline-offset: 3px;
  border-radius: 4px;
}
.chat-accion:hover:not(:disabled), .chat-accion:focus-visible { color: #fff1c4; background: rgba(243, 212, 141, 0.12); outline: none; }
/* D-COMERCIO-C1 D-CC1-6 — comprar desde el chat: apagado de paso (fuera, combate, sin platino) sin `disabled`, que se vuelve a mirar */
.chat-accion.chat-accion--off { color: rgba(200, 190, 170, 0.6); cursor: default; text-decoration-color: transparent; }
.chat-accion.chat-accion--off:hover { background: none; color: rgba(200, 190, 170, 0.75); }
.chat-comprar { margin-left: 0.4rem; padding: 0 0.25rem; }
.chat-accion:disabled { color: rgba(200, 190, 170, 0.45); cursor: default; text-decoration-color: transparent; }
.chat-acciones--apagada .chat-accion { color: rgba(200, 190, 170, 0.35); }


/* ── D-CHAT-12 D-C12-2 — la ventana de chat por personaje (chat/ventana.ts) ──
   Por encima de la ciudad y del chat, por debajo de la intro (8900) y del hada (9500): el hada la puede señalar. */
.vchat { position: fixed; inset: 0; z-index: 8000; display: flex; align-items: center; justify-content: center; padding: 16px; pointer-events: none;
  font-family: var(--ui-fuente-texto, "Nunito", sans-serif); text-transform: none; letter-spacing: normal; }
/* v2-theme pone «* { font-family: … !important }»: la ventana, como el registro del chat, con la letra de texto */
.vchat, .vchat * { font-family: var(--ui-fuente-texto, "Nunito", sans-serif) !important; }
.vchat input, .vchat button { text-transform: none; letter-spacing: normal; }
.vchat[hidden] { display: none !important; }
.vchat__panel {
  pointer-events: auto; display: flex; width: min(920px, 100%); height: min(620px, 100%);
  background: #0c0906; color: #eadfc6; border: 1px solid rgba(214, 170, 92, 0.55); border-radius: 10px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.7); overflow: hidden;
}
.vchat__figura {
  flex: 0 0 38%; position: relative; display: flex; align-items: flex-end; justify-content: center; overflow: hidden;
  background: radial-gradient(ellipse at 50% 85%, rgba(214, 170, 92, 0.18), rgba(0, 0, 0, 0) 60%), linear-gradient(180deg, #1c150d, #0b0805);
  border-right: 1px solid rgba(214, 170, 92, 0.3);
}
.vchat__lienzo { height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: bottom; }
.vchat__lado { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.vchat__barra { display: flex; align-items: stretch; gap: 4px; border-bottom: 1px solid rgba(214, 170, 92, 0.3); background: rgba(0, 0, 0, 0.35); }
.vchat__pestanas { flex: 1 1 auto; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: thin; }
.vchat__pestana {
  position: relative; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 8px 10px;
  color: rgba(234, 223, 198, 0.7); font-size: 13px; border-bottom: 2px solid transparent; background: transparent;
}
.vchat__pestana.on { color: #fff1c4; border-bottom-color: #d6aa5c; background: rgba(214, 170, 92, 0.08); }
.vchat__punto { width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 6px #f59e0b; }
.vchat__punto[hidden] { display: none; }
.vchat__x { opacity: 0.55; padding: 0 2px; cursor: pointer; }
.vchat__x:hover { opacity: 1; color: #fff; }
.vchat__cerrar { flex: 0 0 auto; width: 40px; font-size: 22px; line-height: 1; color: rgba(234, 223, 198, 0.75); background: transparent; }
.vchat__cerrar:hover, .vchat__cerrar:focus-visible { color: #fff; background: rgba(214, 170, 92, 0.12); outline: none; }
/* D-CHAT-SIN-IA D-CSI-3 — «Hablar con el grupo» */
.vchat__grupo { flex: 0 0 auto; width: 40px; font-size: 18px; line-height: 1; color: rgba(234, 223, 198, 0.75); background: transparent; }
.vchat__grupo:hover, .vchat__grupo:focus-visible { color: #fff; background: rgba(214, 170, 92, 0.12); outline: none; }
.vchat__grupo[hidden] { display: none; }
.vchat__cabecera { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px 8px; border-bottom: 1px solid rgba(214, 170, 92, 0.18); }
.vchat .vchat__nombre { font-family: var(--ui-fuente-titulo, 'Cinzel', serif) !important; font-size: 18px; letter-spacing: 0.06em; color: #f3d48d; }
.vchat__sub { font-size: 12px; color: rgba(234, 223, 198, 0.65); }
/* D-SMOKE-PH4 S-2b: sin anclaje de scroll; la baja a la última línea src/ui/pegar_abajo.ts */
.vchat__mensajes { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-anchor: none; padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; }
.vchat__msg { max-width: 88%; padding: 6px 10px; border-radius: 8px; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.vchat__msg--el { align-self: flex-start; background: rgba(167, 139, 250, 0.12); border: 1px solid rgba(167, 139, 250, 0.25); }
.vchat__msg--yo { align-self: flex-end; background: rgba(214, 170, 92, 0.12); border: 1px solid rgba(214, 170, 92, 0.25); }
.vchat__msg--sistema, .vchat__msg--escribe { align-self: center; background: transparent; color: rgba(234, 223, 198, 0.55); font-style: italic; font-size: 12px; }
.vchat__quien { font-weight: 600; color: #c4b5fd; margin-right: 4px; }
.vchat__msg--yo .vchat__quien { color: #f3d48d; }
.vchat__acciones { display: flex; flex-wrap: wrap; gap: 0.35rem 0.6rem; padding: 4px 14px 6px; border-top: 1px dashed rgba(214, 170, 92, 0.2); }
.vchat__acciones[hidden] { display: none; }
.vchat__campo { display: flex; gap: 8px; padding: 10px 14px 12px; border-top: 1px solid rgba(214, 170, 92, 0.25); }
.vchat__entrada {
  flex: 1 1 auto; min-width: 0; padding: 8px 10px; border-radius: 8px; font-size: 14px;
  background: rgba(0, 0, 0, 0.5); color: #f5ead2; border: 1px solid rgba(214, 170, 92, 0.5); outline: none;
}
.vchat__entrada:focus { border-color: #d6aa5c; box-shadow: 0 0 0 1px rgba(214, 170, 92, 0.45); }
.vchat__enviar { flex: 0 0 auto; padding: 8px 14px; border-radius: 8px; font-weight: 600; color: #1b1206; background: linear-gradient(180deg, #f3d48d, #c99a4a); }
/* el botón del chat que vuelve a abrirla (con su punto de «nuevo mensaje») */
.vchat-abrir { position: relative; flex: 0 0 auto; padding: 0 6px; font-size: 15px; line-height: 1.6; border-radius: 6px; background: transparent; }
.vchat-abrir:hover, .vchat-abrir:focus-visible { background: rgba(214, 170, 92, 0.15); outline: none; }
.vchat-abrir[hidden] { display: none; }
.vchat-abrir__punto { position: absolute; top: 0; right: 0; width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 6px #f59e0b; }
.vchat-abrir__punto[hidden] { display: none; }
/* pantalla estrecha: la figura arriba, en una franja; la ventana ocupa la pantalla */
@media (max-width: 559px) {
  .vchat { padding: 6px; }
  .vchat__panel { flex-direction: column; height: 100%; }
  .vchat__figura { flex: 0 0 26%; border-right: 0; border-bottom: 1px solid rgba(214, 170, 92, 0.3); }
  .vchat__cabecera { padding: 6px 10px; }
  .vchat .vchat__nombre { font-size: 16px; }
  .vchat__mensajes { padding: 8px 10px; }
  .vchat__campo { padding: 8px 10px; }
  .vchat__enviar { padding: 8px 10px; }
}
@media (max-height: 420px) and (min-width: 560px) {
  .vchat { padding: 6px; }
  .vchat__panel { height: 100%; }
}

/* D-CHAT-12 D-C12-9 — el botón de fichar en la respuesta del chat que escucha */
.chat-fichar { margin-left: 0.4rem; }