/* Contenedor principal del pulsador, similar a la asignación de roles */
.pulsador-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--base-padding);
    text-align: center;
    user-select: none;
    z-index: 1000;
    cursor: pointer;
}

.pulsador-content {
    animation: fadeInAssignment 0.5s ease-out forwards; /* Reutilizamos animación de roles.css */
}

/* Estilos de texto dentro del pulsador */
#pulsador-status-text {
    font-size: clamp(2rem, 10vw, 4rem);
    font-weight: bold;
    color: var(--text-color-light);
    line-height: 1.2;
    margin: 0;
    border: none; /* Sobrescribimos h2 de main.css */
    padding: 0;
}

#pulsador-prompt-text {
    font-size: clamp(1rem, 4vw, 1.5rem);
    color: var(--front-darker);
    font-style: italic;
    margin-top: 1rem;
    max-width: 40ch;
}

/* --- Estados del Pulsador --- */

/* Verde: Eres el iniciador de la ronda o el ganador */
.state-initiator,
.state-winner {
    background-color: var(--primary-color-dark);
}

/* Rojo: Estás esperando a que comience la ronda o a pulsar */
.state-waiting,
.state-finished {
    background-color: var(--danger-color-dark);
}

/* Amarillo/Naranja: La ronda ha comenzado, ¡pulsa rápido! */
.state-armed {
    background-color: var(--warning-color-dark);
}

/* --- Acciones / Navegación en la pantalla del pulsador --- */
.pulsador-actions {
    position: absolute;
    bottom: var(--base-padding);
    left: 50%; /* Lo movemos al centro */
    transform: translateX(-50%); /* Ajustamos su posición para el centrado perfecto */
    gap: 0.5rem;
    z-index: 1010; /* Asegura que estén por encima del contenido principal */
}

.pulsador-actions .btn {
    padding: 0.5rem 0.8rem; /* Más pequeños que los botones normales */
    font-size: 1.5rem;      /* Aumenta el tamaño del emoji */
    line-height: 1;         /* Mejora la alineación vertical del emoji */
    background-color: rgba(0, 0, 0, 0.2); /* Semi-transparentes */
    border-color: rgba(255, 255, 255, 0.2);
}

.pulsador-actions .btn:hover {
    background-color: rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.4);
}