// BASALT'S SHIELD LOCK KEYPAD — KeypadMenu's state, drawn: a fixed 400x540 box in the shield's cyan, four tinted slots
// (their colours set inline, from the tiles' own hues), eight glyph keys and three controls — and, while a wrong code has
// jammed the lock, a line saying so and the keys dimmed.

root
{
    position: absolute;
    width: 100%;
    height: 100%;
}

.keypad
{
    // ⛔ CENTRED BY HALF-SIZE NEGATIVE MARGINS, NOT BY THE PARENT'S FLEX — the Wunderfizz panel records the parent's
    // centring not taking, three times; a fixed size and negative margins does not depend on it
    position: absolute;
    left: 50%;
    top: 50%;
    width: 400px;
    height: 540px;
    margin-left: -200px;
    margin-top: -270px;

    flex-direction: column;
    align-items: center;
    padding: 18px;

    background-color: rgba( 6, 14, 18, 0.95 );
    border: 2px solid rgba( 90, 220, 235, 0.85 );
    border-radius: 6px;

    font-family: Inter;
    color: rgba( 225, 245, 248, 1 );
    pointer-events: all;
}

.title
{
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 3px;
    color: rgba( 110, 230, 245, 1 );
    margin-bottom: 14px;
}

.slots
{
    flex-direction: row;
    justify-content: center;
    margin-bottom: 8px;
}

.slot
{
    width: 76px;
    height: 76px;
    margin: 0px 6px;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.glyph
{
    width: 64px;
    height: 64px;
}

.status
{
    height: 26px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 2px;
    color: rgba( 235, 120, 110, 1 );
    margin-bottom: 6px;
}

.jammed
{
    height: 22px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    color: rgba( 245, 190, 90, 1 );
    margin-bottom: 4px;
}

.keys
{
    width: 360px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

// ⚠️ DIMMED, AND NO HOVER: a jammed lock takes no glyph (`KeypadMenu.Press`), so its keys must not look pressable
.keys.dead .key
{
    opacity: 0.3;
    cursor: default;
}

.keys.dead .key:hover
{
    background-color: rgba( 18, 40, 46, 0.95 );
    border: 1px solid rgba( 90, 220, 235, 0.5 );
}

.key
{
    width: 78px;
    height: 78px;
    margin: 6px;
    align-items: center;
    justify-content: center;

    background-color: rgba( 18, 40, 46, 0.95 );
    border: 1px solid rgba( 90, 220, 235, 0.5 );
    border-radius: 4px;
    cursor: pointer;

    &:hover { background-color: rgba( 40, 95, 108, 1 ); border: 1px solid rgba( 120, 240, 250, 0.9 ); }
    &:active { background-color: rgba( 70, 150, 165, 1 ); }
}

.controls
{
    flex-direction: row;
    justify-content: center;
    margin-top: 14px;
}

.control
{
    margin: 0px 6px;
    padding: 7px 18px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    color: rgba( 110, 230, 245, 1 );
    border: 1px solid rgba( 90, 220, 235, 0.7 );
    border-radius: 3px;
    cursor: pointer;

    &:hover { background-color: rgba( 40, 95, 108, 1 ); }

    &.close
    {
        color: rgba( 8, 20, 24, 1 );
        background-color: rgba( 110, 230, 245, 1 );

        &:hover { background-color: rgba( 160, 245, 255, 1 ); }
    }
}