/******************************************************************************
 *
 * File...........: lampboard.css
 * Project........: EnigmaJS
 * Description....: Estilos del panel de lámparas (Lampenfeld)
 *
 ******************************************************************************/

/*==========================================================================*/
/* CONTENEDOR PRINCIPAL                                                       */
/*==========================================================================*/

.lampboard {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 12px;

    padding: 24px;

    background: #0c0b09;

    border-radius: 12px;

    border: 1px solid #2a2620;

    box-shadow:
        inset 0 0 40px rgba(0, 0, 0, 0.8),
        0 4px 20px rgba(0, 0, 0, 0.5);

}


/*==========================================================================*/
/* FILAS                                                                      */
/*==========================================================================*/

.lampboard-row {

    display: flex;

    justify-content: center;

    gap: 14px;

}

/* Desplazamiento escalonado clásico del teclado Enigma */
.lampboard-row:nth-child(1) {
    transform: translateX(10px);
}

.lampboard-row:nth-child(2) {
    transform: translateX(0px);
}

.lampboard-row:nth-child(3) {
    transform: translateX(-10px);
}


/*==========================================================================*/
/* LÁMPARA INDIVIDUAL                                                         */
/*==========================================================================*/

.lamp {

    width: 46px;

    height: 46px;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    /* Vidrio opaco de la bombilla apagada */
    background: radial-gradient(circle at 38% 38%, #2a2820 0%, #0e0d0b 70%);

    border: 2px solid #3a3630;

    color: #4a4540;

    font-family: "Courier New", Courier, monospace;

    font-size: 18px;

    font-weight: bold;

    letter-spacing: 0;

    user-select: none;

    transition: background 0.08s ease, color 0.08s ease, box-shadow 0.08s ease, border-color 0.08s ease;

    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.6),
        0 1px 2px rgba(0, 0, 0, 0.4);

    cursor: default;

}


/*==========================================================================*/
/* LÁMPARA ENCENDIDA                                                          */
/*==========================================================================*/

.lamp--on {

    background: radial-gradient(circle at 38% 35%, #fff9c4 0%, #fde14a 35%, #d4a100 80%);

    border-color: #e8c030;

    color: #3d2800;

    text-shadow: 0 0 6px rgba(255, 220, 50, 0.6);

    box-shadow:
        0 0 12px 4px rgba(253, 213, 50, 0.55),
        0 0 28px 6px rgba(253, 213, 50, 0.2),
        inset 0 1px 3px rgba(255, 255, 200, 0.5);

}