/* La vista de juego ocupa toda la pantalla para un ambiente inmersivo */
#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;
    background-color: #1a1a1a; /* Un fondo oscuro y neutro */
    color: #e0d6c3; /* Color arena/pergamino para el texto */
    user-select: none; /* Evitar selección de texto durante el juego */
}

#phase-display {
    font-size: clamp(1.5rem, 5vw, 2.5rem); /* Tamaño de fuente adaptable */
    font-weight: bold;
    margin-bottom: 1rem;
    opacity: 0.9;
    color: var(--warning-color-light); /* Un color de acento para la fase */
}

#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);
}

/* Ajuste de contraste para los botones en el fondo oscuro */
.game-controls .btn-warning {
    background-color: var(--warning-color-dark);
}
.game-controls .btn-danger {
    background-color: var(--danger-color-dark);
}