:root {
    --bg-dark: #050505;
    --text-light: #f5f5f5;
    --glass-bg: rgba(25, 25, 25, 0.4);
    --glass-border: rgba(255, 255, 255, 0.1);
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Outfit', sans-serif;
    background-color: var(--bg-dark);
    background-image: radial-gradient(circle at center, #111 0%, #000 100%);
    color: var(--text-light);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: hidden;
}

/* Efectos de Magia (Fondo) */
.magic-particles {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    overflow: hidden;
    z-index: 1; 
    pointer-events: none;
}
.particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 10px #fff, 0 0 20px #d4af37, 0 0 30px #d4af37;
    animation: floatParticle 8s infinite linear, glowParticle 2s infinite alternate;
}
@keyframes floatParticle {
    0% { transform: translateY(100vh) translateX(0) scale(0.5); opacity: 0; }
    10% { opacity: 0.8; }
    50% { transform: translateY(50vh) translateX(50px) scale(1.2); }
    90% { opacity: 0.8; }
    100% { transform: translateY(-10vh) translateX(-50px) scale(0.5); opacity: 0; }
}
@keyframes glowParticle {
    from { filter: brightness(1) drop-shadow(0 0 5px var(--accent-gold)); }
    to { filter: brightness(1.5) drop-shadow(0 0 15px var(--accent-gold)); }
}

header {
    text-align: center;
    margin: 2rem 0;
    animation: fadeInDown 1s ease;
    z-index: 2;
}

header h1 {
    font-family: 'Cinzel', serif;
    font-size: 3.5rem;
    color: #d4af37;
    margin: 0;
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
    letter-spacing: 2px;
}

header p {
    font-size: 1.2rem;
    color: #aaa;
    letter-spacing: 4px;
    text-transform: uppercase;
}

/* Modificamos dashboard-container para que NUNCA colapse las columnas (flex-wrap: nowrap) */
.dashboard-container {
    display: flex;
    justify-content: center; /* Centrar todo horizontalmente */
    align-items: stretch; /* Estirar alturas iguales */
    gap: 20px; /* Espacio uniforme entre ellas */
    padding: 1rem 2rem;
    width: 100%;
    max-width: 1600px;
    flex-wrap: nowrap; /* 🔥 Esta es la clave para que estén lado a lado */
    z-index: 2;
}

.house-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 2rem;
    flex: 1; /* Esto hace que se dividan el ancho equitativamente (25% cada uno aprox) */
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    transition: transform 0.3s ease;
    position: relative;
    /* Un pequeño min-width para evitar que se aplasten demasiado */
    min-width: 200px; 
}

.house-column:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(212, 175, 55, 0.2);
}

.house-logo-dash {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    margin-bottom: 1rem;
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 20px rgba(255,255,255,0.3);
}

.house-name {
    font-family: 'Cinzel', serif;
    font-size: 1.8rem;
    margin-top: 0;
    margin-bottom: 2rem;
    text-transform: uppercase;
    color: #fff;
    /* El shadow se inyectará en PHP para usar el color de la casa */
}

/* ========================================================
   RELOJ DE ARENA REALISTA 
   ======================================================== */
.hourglass-wrapper {
    position: relative;
    width: 120px;
    height: 380px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.hourglass-base {
    width: 130px;
    height: 15px;
    background: linear-gradient(to bottom, #f0ca45, #b8860b);
    border-radius: 6px;
    border: 1px solid #5a4200;
    box-shadow: 0 5px 15px rgba(0,0,0,0.8), inset 0 2px 5px rgba(255,255,255,0.5);
    z-index: 3;
}

.glass-bulb {
    width: 100px;
    height: 150px;
    background: rgba(255, 255, 255, 0.03);
    border: 3px solid rgba(255, 255, 255, 0.3);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    box-shadow: inset 0 0 30px rgba(0,0,0,0.9), inset 0 0 15px rgba(255,255,255,0.1);
}

/* Bombilla superior (vacia o llena) */
.bulb-top {
    border-radius: 50% 50% 20% 20% / 80% 80% 20% 20%;
    border-bottom: none;
}

/* Bombilla inferior (se llena de arena) */
.bulb-bottom {
    border-radius: 20% 20% 50% 50% / 20% 20% 80% 80%;
    border-top: none;
    display: flex;
    align-items: flex-end; /* Hace que el DIV de arena crezca de abajo hacia arriba */
}

/* Cuello del reloj (donde cae la arena) */
.glass-neck {
    width: 25px;
    height: 30px;
    background: rgba(255, 255, 255, 0.03);
    border-left: 3px solid rgba(255, 255, 255, 0.3);
    border-right: 3px solid rgba(255, 255, 255, 0.3);
    z-index: 2;
    position: relative;
    overflow: hidden;
}

/* Efecto 3D de brillo en el cristal */
.glass-bulb::after {
    content: '';
    position: absolute;
    top: 5%; left: 5%;
    width: 30%;
    height: 90%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%);
    border-radius: 50%;
    pointer-events: none;
    transform: rotate(-10deg);
}

/* La arena llenando la parte inferior */
.sand {
    width: 100%;
    height: 0%; /* JS manipula esto de 0 a 100% */
    transition: height 2s cubic-bezier(0.2, 0.8, 0.2, 1);
    position: relative;
    border-radius: 0 0 50px 50px;
}

/* Hilo de arena cayendo (Animado cuando suman puntos) */
.sand-stream {
    position: absolute;
    width: 6px;
    height: 100%;
    top: 0; left: 50%;
    transform: translateX(-50%);
    opacity: 0; /* Oculto por defecto, se activa con JS */
    z-index: 1;
    transition: opacity 0.5s ease;
}
.sand-stream.active {
    opacity: 0.9;
    animation: flow 0.5s infinite linear;
}
@keyframes flow {
    from { transform: translateX(-50%) translateY(-20px); }
    to { transform: translateX(-50%) translateY(20px); }
}

/* Estilos mágicos por casa */
.gryffindor-sand { background: linear-gradient(to bottom, #ff3333, #740001); box-shadow: 0 0 30px #740001; }
.slytherin-sand { background: linear-gradient(to bottom, #4df083, #1A472A); box-shadow: 0 0 30px #1A472A; }
.ravenclaw-sand { background: linear-gradient(to bottom, #5980ff, #0E1A40); box-shadow: 0 0 30px #0E1A40; }
.hufflepuff-sand { background: linear-gradient(to bottom, #ffea5c, #d49a00); box-shadow: 0 0 30px #d49a00; }

.score-display {
    margin-top: 2rem;
    font-size: 2.5rem;
    font-weight: 700;
    color: #fff;
    font-family: 'Outfit', sans-serif;
    text-shadow: 0 2px 10px rgba(0,0,0,0.8);
    transition: all 0.3s ease;
}

/* Responsividad mejorada para 4 columnas fijas */
@media (max-width: 1200px) {
    .dashboard-container { gap: 10px; padding: 10px; }
    .house-column { min-width: 150px; padding: 1rem; }
    .hourglass-wrapper { transform: scale(0.8); } /* Escala el reloj en vez de deformarlo */
}
@media (max-width: 800px) {
    .dashboard-container {
        flex-wrap: wrap; /* En móviles muy pequeños sí debe wrapear */
    }
    .house-column { min-width: 40%; }
}