/* Reset Básico y Fuente Temática */
body {
    margin: 0;
    font-family: serif; /* Usar una fuente que evoque Harry Potter (como 'Georgia' o una webfont) */
    background-color: #1a1a1a;
    color: #f0e68c; /* Dorado pálido/Marrón claro para el texto */
    text-align: center;
}

/* Marco fijo para toda la aplicación */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: url('../imagen/fondo_espejo.png') no-repeat center center; */
    background-size: contain;
    z-index: 1000;
    pointer-events: none;
    margin: 0;
    padding: 0;
}

/* Estilo para las Vistas (Simulación de Páginas) */
.view {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: none; /* Por defecto, todas ocultas */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    z-index: 1000; /* Aumentado significativamente */
}

/* Contenedor central de contenido */
.content {
    max-width: 90%;
    position: relative;
    z-index: 1001; /* Aumentado para asegurar que esté por encima de todo */
    background-color: rgba(26, 26, 26, 0.8);
    padding: 20px;
    border-radius: 10px;
}

/* Click blocker overlay */
.click-blocker {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    z-index: 9999;
    display: none;
}

/* Make specific elements clickable even when the blocker is active */
.click-blocker.allow-clicks {
    pointer-events: none;
}

.click-blocker.allow-clicks .allow-click {
    pointer-events: auto;
    position: relative;
    z-index: 10000;
}

h1 {
    font-size: 2.5em;
    margin-bottom: 20px;
}

/* Estilos de Botones */
.primary-button, .guest-name-button {
    background-color: #7b0000; /* Rojo Gryffindor / Color principal */
    color: white;
    border: 3px solid #ffcc00; /* Borde dorado */
    padding: 10px 20px;
    margin: 5px;
    cursor: pointer;
    font-size: 1.2em;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.primary-button:hover, .guest-name-button:hover {
    background-color: #9f0000;
}

/* Lista de Invitados */
.list-container {
    max-height: 60vh;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid #ffcc0040;
}

.guest-name-button {
    display: block;
    width: 80%;
    margin: 10px auto;
    background-color: #2c2c2c;
    border-color: #ffcc0080;
}

/* Vídeos a Pantalla Completa */
.video-view {
    background-color: black;
    position: relative;
}

.fullscreen-video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que el vídeo cubre la pantalla */
    display: block;
}

.mobile-tap-hint {
    position: absolute;
    bottom: 30px;
    left: 0;
    right: 0;
    text-align: center;
    color: white;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 10px;
    font-size: 1.2em;
    z-index: 100;
    animation: pulse 2s infinite;
    display: none; /* Hidden by default, shown by JavaScript */
}

@keyframes pulse {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}

/* Show tap hint only on mobile */
@media (max-width: 768px) {
    .mobile-tap-hint {
        display: block;
    }
}

/* VISTA de Reflexión */
.reflection-view {
    background-color: #333;
    font-size: 2em;
    padding: 50px;
}

/* Estilos para el Mensaje Final (opcional, por casa) */
.final-message-container {
    padding: 30px;
    border-radius: 10px;
    margin-top: 20px;
}

.house-name-display {
    font-size: 3em;
    font-weight: bold;
    margin: 15px 0;
}

/* Colores de las Casas (Añadir más estilos para el toque final) */
.gryffindor {
    background-color: #740001; /* Rojo */
    border: 4px solid #d3a625; /* Dorado */
}
.slytherin {
    background-color: #1a472a; /* Verde */
    border: 4px solid #aaaaaa; /* Plateado */
}
.ravenclaw {
    background-color: #0e1a40; /* Azul */
    border: 4px solid #946b2d; /* Bronce */
}
.hufflepuff {
    background-color: #f0c70e; /* Amarillo */
    color: #333; /* Texto oscuro */
    border: 4px solid #000000; /* Negro */
}

/* === NUEVOS ESTILOS PARA EL MARCO (FRAME) === */

/* === NUEVOS ESTILOS PARA EL MARCO (FRAME) === */

#harry-potter-frame {
    /* Posicionamiento y Tamaño */
    position: fixed; 
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none; /* Crucial: Permite hacer clic a través del marco */
    
    /* Imagen y Apariencia */
    background-size: 100% 100%; 
    background-repeat: no-repeat;
    
    /* Z-Index: El marco está por encima del fondo pero debajo del contenido */
    z-index: 100; /* Aumentado, pero menos que el contenido */

    /* Por defecto (Móvil) */
    background-image: url('../imagen/fondo_espejo_movil.png'); 
}

/* === AJUSTE DE CAPAS PARA EL CONTENIDO Y VÍDEOS === */

/* El contenido (texto, botones) debe estar SOBRE el marco (z-index 11) */
.view {
    /* ... (Estilos anteriores) ... */
    z-index: 1100; /* AHORA: El contenido está ENCIMA del marco (10) */
}

/* Los vídeos deben estar DETRÁS de todo (z-index 1) */
.video-view {
    /* ... (Estilos anteriores) ... */
    z-index: 1; 
}
.fullscreen-video {
    /* ... (Estilos anteriores) ... */
    z-index: 1; /* Asegura que el video está en la capa más baja */
}

/* === RESPONSIVIDAD DEL MARCO (Media Queries) === */

/* Tablet (768px y más grandes) */
@media (min-width: 768px) {
    #harry-potter-frame {
        background-image: url('../imagen/fondo_espejo_movil.png');
    }
}

/* PC (1024px y más grandes) */
@media (min-width: 1024px) {
    #harry-potter-frame {
        background-image: url('../imagen/fondo_espejo.png');
    }
}