/*
 * LA MAZMORRA DEL DRAGÓN
 * Imagen de sala junto al área de escritura.
 */

.mazmorra-scene-card-mount,
.mazmorra-imagen-junto-textarea {
    margin-top: 0.75rem !important;
    margin-bottom: 0.75rem !important;
}

.mazmorra-imagen-junto-textarea {
    scroll-margin-top: 1rem;
}

.mazmorra-imagen-junto-textarea img,
.mazmorra-imagen-junto-textarea #imagen_ilustrativa,
.mazmorra-scene-card-mount img,
.mazmorra-scene-card-mount #imagen_ilustrativa {
    display: block;
    width: 100%;
    max-width: 760px;
    max-height: 40vh;
    object-fit: contain;
    margin-left: auto;
    margin-right: auto;
}

/* Si la tarjeta trae textos propios, compactamos un poco para que no robe altura. */
.mazmorra-imagen-junto-textarea h1,
.mazmorra-imagen-junto-textarea h2,
.mazmorra-imagen-junto-textarea h3,
.mazmorra-scene-card-mount h1,
.mazmorra-scene-card-mount h2,
.mazmorra-scene-card-mount h3 {
    margin-top: 0.35rem !important;
    margin-bottom: 0.35rem !important;
}

.mazmorra-imagen-junto-textarea p,
.mazmorra-scene-card-mount p {
    margin-bottom: 0.45rem !important;
}

@media (max-width: 768px) {
    .mazmorra-scene-card-mount,
    .mazmorra-imagen-junto-textarea {
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    .mazmorra-imagen-junto-textarea img,
    .mazmorra-imagen-junto-textarea #imagen_ilustrativa,
    .mazmorra-scene-card-mount img,
    .mazmorra-scene-card-mount #imagen_ilustrativa {
        max-height: 32vh;
    }
}

/* ==========================================================
   V4: imagen arriba y textarea siempre abajo, también en PC
   ========================================================== */

/*
 * Evita que Bootstrap/grid o algún layout flexible coloque el textarea
 * a la derecha de la imagen en pantallas grandes.
 */
.mazmorra-imagen-junto-textarea,
.mazmorra-scene-card-mount {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: both !important;
    flex: 0 0 100% !important;
    grid-column: 1 / -1 !important;
}

/* El bloque que queda justo después de la imagen, normalmente el de entrada, baja debajo. */
.mazmorra-imagen-junto-textarea + *,
.mazmorra-scene-card-mount + * {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: both !important;
    flex: 0 0 100% !important;
    grid-column: 1 / -1 !important;
}

/* Si hay filas/columnas alrededor, forzamos composición vertical para la zona de juego. */
main[role="main"] .row,
main[role="main"] form,
main[role="main"] .form-group,
main[role="main"] .input-group,
main[role="main"] .zona-comandos,
main[role="main"] .entrada-jugador,
main[role="main"] .zona-escritura,
main[role="main"] .comandos {
    flex-direction: column !important;
    align-items: stretch !important;
}

/* El textarea debe verse como en móvil: ancho completo, debajo, sin esquinas ovaladas. */
main[role="main"] textarea,
textarea#messages,
textarea#messages2,
textarea[id*="message"],
textarea[id*="mensaje"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    float: none !important;
    clear: both !important;

    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    appearance: none;
    -webkit-appearance: none;

    resize: none;
}

/* Inputs de texto asociados: también rectos, no tipo píldora. */
main[role="main"] input[type="text"],
main[role="main"] input:not([type]) {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    box-sizing: border-box !important;
}

/* Botones rápidos: si están en la misma línea, que bajen debajo y no empujen al textarea a un lateral. */
main[role="main"] button,
main[role="main"] .btn {
    border-radius: 0.15rem !important;
}

/* En pantallas grandes limitamos el ancho visual para que no quede desparramado. */
@media (min-width: 992px) {
    main[role="main"] {
        max-width: 980px;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .mazmorra-imagen-junto-textarea img,
    .mazmorra-imagen-junto-textarea #imagen_ilustrativa,
    .mazmorra-scene-card-mount img,
    .mazmorra-scene-card-mount #imagen_ilustrativa {
        max-width: 760px;
        max-height: 34vh;
    }

    main[role="main"] textarea,
    textarea#messages,
    textarea#messages2,
    textarea[id*="message"],
    textarea[id*="mensaje"] {
        max-height: 20vh;
    }
}



.mazmorra-bloque-entrada-detectado {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: both !important;
    flex: 0 0 100% !important;
    grid-column: 1 / -1 !important;
}

/* ==========================================================
   V5: proteger el textarea de mensajes dinámicos
   ========================================================== */

/*
 * El textarea de mensajes puede recibir texto por JavaScript.
 * No lo ocultamos, no lo convertimos en flex raro y no permitimos que quede sin altura.
 */
textarea.mazmorra-textarea-mensajes-protegido,
#messages,
#messages2,
textarea[id*="message"],
textarea[id*="mensaje"] {
    display: block !important;
    width: 100% !important;
    min-height: 5.5rem !important;
    height: auto;
    max-height: 24vh !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    white-space: pre-wrap !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: inherit;
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
}

/*
 * Solo el textarea queda sin esquinas ovaladas.
 * Evitamos reglas agresivas que puedan afectar al script de escritura.
 */
main[role="main"] textarea {
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
}

/*
 * Mantener la escena en bloque completo, nunca a la derecha.
 */
.mazmorra-imagen-junto-textarea,
.mazmorra-scene-card-mount {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: both !important;
    flex: 0 0 100% !important;
    grid-column: 1 / -1 !important;
}

/*
 * En index y salas con texto dinámico damos prioridad a mensajes + entrada.
 */
@media (min-width: 992px) {
    textarea.mazmorra-textarea-mensajes-protegido,
    #messages,
    #messages2,
    textarea[id*="message"],
    textarea[id*="mensaje"] {
        min-height: 6rem !important;
        max-height: 22vh !important;
    }
}

/* ==========================================================
   V7: fondo feérico nocturno + scroll permitido
   ========================================================== */

/*
 * Importante:
 * Ya NO prohibimos el scroll. Lo dejamos natural para poder ver la parte superior.
 * Solo procuramos compactar para que normalmente no haga falta desplazarse demasiado.
 */
html,
body {
    min-height: 100%;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    color: #efe9cf;
    background:
        radial-gradient(circle at 15% 18%, rgba(129, 97, 209, 0.28) 0 5%, transparent 6% 100%),
        radial-gradient(circle at 82% 16%, rgba(82, 190, 174, 0.20) 0 6%, transparent 7% 100%),
        radial-gradient(circle at 76% 82%, rgba(154, 89, 198, 0.22) 0 8%, transparent 9% 100%),
        radial-gradient(circle at 18% 84%, rgba(72, 147, 127, 0.18) 0 7%, transparent 8% 100%),
        linear-gradient(180deg, #070912 0%, #0b1320 28%, #102019 62%, #07100d 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

body {
    min-height: 100dvh;
}

/* Brillos tipo luciérnagas / polvo feérico nocturno */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.65;
    background:
        radial-gradient(circle at 8% 88%, rgba(190, 255, 218, 0.75) 0 0.35%, transparent 0.55% 100%),
        radial-gradient(circle at 16% 78%, rgba(210, 187, 255, 0.62) 0 0.28%, transparent 0.48% 100%),
        radial-gradient(circle at 27% 91%, rgba(255, 236, 171, 0.58) 0 0.25%, transparent 0.45% 100%),
        radial-gradient(circle at 73% 84%, rgba(167, 255, 226, 0.60) 0 0.32%, transparent 0.52% 100%),
        radial-gradient(circle at 88% 74%, rgba(215, 190, 255, 0.58) 0 0.28%, transparent 0.48% 100%),
        radial-gradient(circle at 94% 91%, rgba(255, 235, 166, 0.55) 0 0.25%, transparent 0.45% 100%),
        linear-gradient(115deg, rgba(198, 255, 225, 0.055) 0 1px, transparent 1px 100%),
        linear-gradient(65deg, rgba(184, 141, 255, 0.055) 0 1px, transparent 1px 100%);
    background-size:
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        30px 30px,
        42px 42px;
    mix-blend-mode: screen;
}

/* Neblina mágica superior y viñeta suave */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse at top center, rgba(135, 108, 219, 0.28) 0%, rgba(61, 122, 128, 0.16) 28%, transparent 58%),
        radial-gradient(ellipse at bottom center, rgba(4, 8, 7, 0.50) 0%, transparent 52%),
        linear-gradient(90deg, rgba(0,0,0,0.35) 0%, transparent 18%, transparent 82%, rgba(0,0,0,0.35) 100%);
}

/* El contenido por encima del fondo */
body > * {
    position: relative;
    z-index: 1;
}

/* Mantener barra superior oculta si alguna sala la pinta. */
header,
.navbar,
.navbar-fixed-top,
.fixed-top,
.sticky-top,
.topbar,
.site-header,
.app-header,
#header,
#navbar,
#topbar,
#barra-superior,
.barra-superior {
    display: none !important;
}

/* El main ya no bloquea scroll: solo compacta y centra. */
main[role="main"],
main {
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding-top: 0.35rem !important;
    padding-bottom: 0.65rem !important;
}

/* Paneles con estilo cristal nocturno feérico */
main[role="main"],
.container,
.card,
.panel,
.panel-body,
.card-body,
.form-group,
#messages2,
textarea,
input[type="text"],
input:not([type]) {
    background-color: rgba(10, 18, 24, 0.68) !important;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    color: #f2ead2 !important;
}

/* Bordes luminosos discretos */
.card,
.panel,
.panel-body,
.card-body,
textarea,
input[type="text"],
input:not([type]) {
    border: 1px solid rgba(153, 235, 213, 0.25) !important;
    box-shadow:
        0 0 0 1px rgba(144, 107, 215, 0.10),
        0 8px 24px rgba(0, 0, 0, 0.28),
        0 0 18px rgba(94, 214, 188, 0.08);
}

/* Texto con brillo suave, sin perder legibilidad */
h1, h2, h3, h4, h5, h6 {
    color: #f7e7a6 !important;
    text-shadow:
        0 0 8px rgba(198, 164, 255, 0.28),
        0 2px 0 rgba(0, 0, 0, 0.35);
}

p, label, span, div {
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

/* Textarea recto, como en móvil, pero legible en nocturno */
textarea,
#messages,
#messages2,
textarea[id*="message"],
textarea[id*="mensaje"] {
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    color: #f4eedc !important;
    background-color: rgba(5, 10, 14, 0.76) !important;
    border-color: rgba(174, 244, 225, 0.28) !important;
    overflow-y: auto !important;
}

/* Placeholder / inputs */
input::placeholder,
textarea::placeholder {
    color: rgba(239, 233, 207, 0.62) !important;
}

/* Botones más integrados en el tema nocturno */
button,
.btn {
    border-radius: 0.15rem !important;
    background-image: linear-gradient(180deg, rgba(65, 86, 96, 0.92), rgba(31, 45, 52, 0.94));
    border-color: rgba(186, 242, 224, 0.22) !important;
    color: #f4ead0 !important;
}

/*
 * Compactación, pero sin prohibir desplazamiento.
 * En pantallas grandes evitamos que se desparrame demasiado.
 */
@media (min-width: 992px) {
    main[role="main"] {
        max-width: 980px;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .mazmorra-imagen-junto-textarea img,
    .mazmorra-imagen-junto-textarea #imagen_ilustrativa,
    .mazmorra-scene-card-mount img,
    .mazmorra-scene-card-mount #imagen_ilustrativa {
        max-width: 760px;
        max-height: 34vh;
    }
}

@media (max-height: 760px) {
    .mazmorra-imagen-junto-textarea img,
    .mazmorra-imagen-junto-textarea #imagen_ilustrativa,
    .mazmorra-scene-card-mount img,
    .mazmorra-scene-card-mount #imagen_ilustrativa {
        max-height: 26vh;
    }

    main[role="main"] h1,
    main[role="main"] h2,
    main[role="main"] h3,
    main[role="main"] p {
        margin-top: 0.22rem !important;
        margin-bottom: 0.22rem !important;
    }
}

/* En móviles mantenemos el scroll natural, con tacto suave. */
@media (max-width: 768px) {
    html,
    body {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .mazmorra-imagen-junto-textarea img,
    .mazmorra-imagen-junto-textarea #imagen_ilustrativa,
    .mazmorra-scene-card-mount img,
    .mazmorra-scene-card-mount #imagen_ilustrativa {
        max-height: 30vh;
    }
}

/* ==========================================================
   V8: no hacer scroll automático al recargar
   ========================================================== */

html {
    scroll-behavior: auto !important;
}

/* El scroll vertical sigue permitido, pero no se fuerza desde CSS/JS. */
html,
body {
    overflow-y: auto !important;
}

/* Evita que un ancla o elemento enfocado quede tapado si el navegador decide restaurar posición. */
:target {
    scroll-margin-top: 0 !important;
}

/* ==========================================================
   V12: fondo feérico nocturno con animación suave
   ========================================================== */

html,
body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

body {
    position: relative;
    background:
        radial-gradient(circle at 18% 20%, rgba(93, 145, 129, 0.16) 0%, transparent 26%),
        radial-gradient(circle at 82% 16%, rgba(114, 92, 173, 0.12) 0%, transparent 24%),
        radial-gradient(circle at 78% 84%, rgba(62, 129, 113, 0.12) 0%, transparent 22%),
        linear-gradient(180deg, #05080c 0%, #0b1218 24%, #0d1818 58%, #09100f 100%) !important;
    background-attachment: fixed !important;
}

/* Capas suaves animadas */
body::before,
body::after {
    content: "";
    position: fixed;
    inset: -8%;
    pointer-events: none;
    z-index: 0;
}

body::before {
    opacity: .58;
    background:
        radial-gradient(ellipse at 22% 28%, rgba(164, 255, 226, 0.08) 0%, transparent 20%),
        radial-gradient(ellipse at 70% 22%, rgba(185, 164, 255, 0.07) 0%, transparent 22%),
        radial-gradient(ellipse at 34% 78%, rgba(162, 255, 226, 0.06) 0%, transparent 18%),
        radial-gradient(ellipse at 80% 74%, rgba(123, 199, 255, 0.05) 0%, transparent 20%);
    filter: blur(18px);
    animation: mazmorraAuroraShift 34s ease-in-out infinite alternate;
}

body::after {
    opacity: .55;
    background:
        radial-gradient(circle at 16% 84%, rgba(255, 242, 179, 0.18) 0 0.10%, transparent 0.36% 100%),
        radial-gradient(circle at 24% 76%, rgba(172, 255, 225, 0.16) 0 0.09%, transparent 0.34% 100%),
        radial-gradient(circle at 73% 82%, rgba(185, 164, 255, 0.14) 0 0.08%, transparent 0.32% 100%),
        radial-gradient(circle at 88% 68%, rgba(172, 255, 225, 0.15) 0 0.10%, transparent 0.34% 100%),
        radial-gradient(circle at 56% 18%, rgba(255, 242, 179, 0.10) 0 0.08%, transparent 0.28% 100%);
    filter: blur(0.2px);
    animation: mazmorraFirefliesDrift 26s ease-in-out infinite alternate;
}

@keyframes mazmorraAuroraShift {
    0% {
        transform: translate3d(-1.2%, 0%, 0) scale(1);
        opacity: .48;
    }
    50% {
        transform: translate3d(1.5%, -1%, 0) scale(1.03);
        opacity: .62;
    }
    100% {
        transform: translate3d(-0.6%, 1.2%, 0) scale(1.05);
        opacity: .54;
    }
}

@keyframes mazmorraFirefliesDrift {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: .40;
    }
    50% {
        transform: translate3d(-0.8%, -1.2%, 0) scale(1.02);
        opacity: .58;
    }
    100% {
        transform: translate3d(1.2%, 0.9%, 0) scale(1.04);
        opacity: .45;
    }
}

/* Contenido por encima del fondo animado */
body > * {
    position: relative;
    z-index: 1;
}

/* Paneles algo más serenos */
main[role="main"],
.container,
.card,
.panel,
.panel-body,
.card-body,
.form-group,
#messages2,
textarea,
input[type="text"],
input:not([type]) {
    background-color: rgba(8, 14, 18, 0.62) !important;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.20),
        0 0 16px rgba(92, 206, 170, 0.05) !important;
    border-color: rgba(150, 230, 207, 0.18) !important;
}

h1, h2, h3, h4, h5, h6 {
    color: #efe3b1 !important;
    text-shadow:
        0 0 8px rgba(160, 120, 220, 0.16),
        0 1px 0 rgba(0, 0, 0, 0.30);
}

@media (prefers-reduced-motion: reduce) {
    body::before,
    body::after {
        animation: none !important;
    }
}

/* ==========================================================
   V15: estado AJAX sin transiciones animadas de sala
   ========================================================== */

html.mazmorra-ajax-cargando main {
    opacity: 0.88;
}

html.mazmorra-ajax-cargando,
html.mazmorra-ajax-cargando body {
    cursor: progress;
}

/* ==========================================================
   V16: Amo del Calabozo y conversación medieval
   ========================================================== */

.mazmorra-cronica-amo {
    margin: 0.75rem auto 1rem auto;
    padding: 0.85rem 1rem;
    max-width: 900px;
    background: rgba(5, 12, 14, 0.72) !important;
    border: 1px solid rgba(177, 241, 218, 0.22);
    box-shadow:
        0 8px 26px rgba(0,0,0,0.28),
        inset 0 0 20px rgba(119, 225, 190, 0.04);
}

.mazmorra-cronica-amo h2 {
    margin-top: 0;
    color: #efe3b1 !important;
}

.mazmorra-cronica-amo pre {
    white-space: pre-wrap;
    color: #efe9cf;
    margin-bottom: 0;
    font-family: inherit;
}

html.mazmorra-ajax-cargando main {
    opacity: 0.92;
}

html.mazmorra-ajax-cargando,
html.mazmorra-ajax-cargando body {
    cursor: progress;
}

/* ==========================================================
   V20: botones del Grimorio blindados
   ========================================================== */

.grimorio-portal,
.grimorio-portal * {
    pointer-events: auto !important;
}

.grimorio-portal__actions form[hidden] {
    display: none !important;
}

.grimorio-portal__actions form:not([hidden]) {
    display: inline-block !important;
}

/* ==========================================================
   V21: Acta final ampliada del Amo del Calabozo
   ========================================================== */

.mazmorra-acta-amo-ampliada {
    margin: 0.85rem auto 1.1rem auto;
    padding: 1rem 1.1rem;
    max-width: 980px;
    background:
        linear-gradient(180deg, rgba(7, 18, 18, 0.82), rgba(5, 10, 13, 0.78)) !important;
    border: 1px solid rgba(184, 244, 220, 0.25);
    box-shadow:
        0 10px 30px rgba(0,0,0,0.32),
        inset 0 0 26px rgba(106, 218, 184, 0.05);
}

.mazmorra-acta-amo-ampliada h2 {
    margin-top: 0;
    color: #f2e5ae !important;
}

.mazmorra-acta-amo-ampliada pre {
    white-space: pre-wrap;
    font-family: inherit;
    color: #f4eedc;
    line-height: 1.45;
    margin: 0;
}

/* ==========================================================
   V22: Acta final visible desactivada
   ========================================================== */

#mazmorra-acta-amo-ampliada,
.mazmorra-acta-amo-ampliada {
    display: none !important;
}