/* La vista de juego ocupa toda la pantalla para controlar el fondo */
#game-view {
    position: fixed;
    inset: 0; /* Equivalente a top:0, right:0, bottom:0, left:0 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    z-index: 100;
    transition: background-color 0.5s ease, color 0.5s ease;
    user-select: none; /* Evitar selección de texto durante el juego */
}

/* Estilo para la fase de noche */
#game-view.night-phase {
    background-color: #000000;
    color: var(--text-color-light);
}

/* Estilo para la fase de día */
#game-view.day-phase {
    background-color: #87CEEB; /* Celeste Cielo */
    color: var(--bg-darkest);  /* Texto oscuro para contraste */
}

#phase-display {
    font-size: clamp(1.5rem, 5vw, 2.5rem); /* Tamaño de fuente adaptable */
    font-weight: bold;
    margin-bottom: 1rem;
    opacity: 0.9;
}

#time-display {
    font-size: clamp(5rem, 25vw, 12rem); /* Muy grande y adaptable */
    font-weight: bold;
    line-height: 1;
    font-variant-numeric: tabular-nums; /* Ancho de números fijo */
}

.game-controls {
    position: absolute;
    bottom: 5vh; /* Posicionado en la parte inferior de la pantalla */
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.game-controls .btn {
    min-width: 140px;
    box-shadow: var(--box-shadow-md);
}

/* Asegurar que los botones de la noche tengan buen contraste */
.night-phase .game-controls .btn-warning {
    background-color: var(--warning-color-dark);
}
.night-phase .game-controls .btn-danger {
    background-color: var(--danger-color-dark);
}