/* ==============================================
   ESCENA — Composición visual + texto + opciones
   ============================================== */

/* ---- Fondo de la escena ---- */
/* Transición de opacidad controlada por JS */
#escena {
    transition: opacity 400ms ease-in-out;
}

.escena-fondo {
    position: absolute;
    inset: 0;
    z-index: var(--z-fondo);
}

.escena-fondo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.escena-fondo video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    transition: opacity 300ms ease-in-out;
}

/* ---- Contenedor de efectos (luciérnagas, clima, etc) ---- */
.escena-efectos {
    position: absolute;
    inset: 0;
    z-index: var(--z-efectos);
    pointer-events: none;
    overflow: hidden;
}

/* Área donde ocurre un efecto (posicionable y redimensionable) */
.efecto-contenedor {
    position: absolute;
    left: calc(var(--x) * 1%);
    bottom: calc((100 - var(--y)) * 1%);
    width: calc(var(--ancho) * 1%);
    height: calc(var(--alto, 100) * 1%);
    z-index: var(--z-index, var(--z-efectos));
    transform: translateX(-50%);
    pointer-events: none;
    overflow: hidden;
}

/* ---- Contenedor de elementos (personajes/objetos) ---- */
.escena-elementos {
    position: absolute;
    inset: 0;
    z-index: var(--z-elementos);
    pointer-events: none;
}

/* ---- Elemento visual individual ---- */
.elemento-visual {
    position: absolute;
    /* Posicionamiento por custom properties del JSON */
    left: calc(var(--x) * 1%);
    bottom: calc((100 - var(--y)) * 1%);
    width: calc(var(--ancho) * 1%);
    height: auto;
    z-index: var(--z-index);
    /* Centrar horizontalmente respecto a x */
    transform: translateX(-50%);
    pointer-events: none;
}

.elemento-visual img {
    width: 100%;
    height: auto;
    display: block;
}

/* ---- Panel de texto narrativo ---- */
#panel-texto {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-panel-texto);
    padding: var(--espaciado-lg) var(--espaciado-xl);
    /* padding-bottom dinámico: lo setea SceneRenderer.js según la altura real del panel-opciones */
    background: var(--color-fondo-panel);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(167, 243, 208, 0.1);
    max-height: calc(100% - 70px);
    overflow-y: auto;
    transition: transform var(--transicion-escena), opacity var(--transicion-base);
}

#panel-texto.oculto {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
}

#panel-texto .texto-narrativo {
    font-size: var(--tamano-texto-base);
    line-height: var(--line-height-texto);
    color: var(--color-texto-principal);
    text-shadow: 0 1px 3px var(--color-texto-sombra);
}

/* ---- Panel de opciones (SIEMPRE visible) ---- */
#panel-opciones {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-panel-opciones);
    padding: var(--espaciado-md) var(--espaciado-xl);
    padding-bottom: calc(var(--espaciado-md) + env(safe-area-inset-bottom, 8px));
    display: flex;
    flex-direction: column;
    gap: var(--espaciado-sm);
    align-items: center;
}

/* ---- Botón de opción/decisión ---- */
.btn-opcion {
    width: 100%;
    max-width: 500px;
    min-height: var(--boton-min-alto);
    padding: var(--boton-padding);
    background: var(--boton-bg);
    border: 2px solid var(--boton-borde);
    border-radius: var(--boton-radio);
    color: var(--color-texto-principal);
    font-size: var(--tamano-boton);
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.3px;
    box-shadow: var(--boton-sombra);
    transition:
        background var(--transicion-base),
        box-shadow var(--transicion-base),
        transform 150ms ease;
}

.btn-opcion:hover {
    background: var(--boton-bg-hover);
    box-shadow: var(--boton-sombra-hover);
    transform: translateY(-2px);
}

.btn-opcion:active {
    background: var(--boton-bg-activo);
    transform: translateY(0);
    box-shadow: var(--boton-sombra);
}

/* ---- Panel de desafío (overlay) ---- */
#panel-desafio {
    position: absolute;
    inset: 0;
    z-index: var(--z-panel-desafio);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--color-fondo-oscuro);
}

#panel-desafio.activo {
    display: flex;
}

/* ---- Pantalla de inicio ---- */
#pantalla-inicio {
    position: absolute;
    inset: 0;
    z-index: var(--z-pantalla-inicio);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--color-fondo-oscuro);
    transition: opacity var(--transicion-lenta);
}

#pantalla-inicio.oculto {
    opacity: 0;
    pointer-events: none;
}

/* ---- Responsive ---- */
@media (max-width: 900px),
(max-height: 600px) {
    .btn-opcion {
        min-height: 44px;
        padding: 10px 20px;
        font-size: clamp(0.9rem, 2.5vw, 1.1rem);
        border-radius: 8px;
    }

    #panel-texto .texto-narrativo {
        font-size: clamp(0.9rem, 2.5vw, 1.15rem);
    }

    #panel-opciones {
        gap: 6px;
        padding: var(--espaciado-sm) var(--espaciado-md);
        padding-bottom: calc(var(--espaciado-sm) + env(safe-area-inset-bottom, 8px));
    }
}