/* DraftOS keyboard shortcuts */

.keyboard-shortcut-bar{
    min-height:34px;
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    padding:5px 12px;
    border-bottom:1px solid rgba(201,170,113,.12);
    background:#040d13;
    color:#708793;
    font-size:.54rem;
}

.keyboard-shortcut-bar .shortcut-bar-title{
    color:#c8b27d;
    font-size:.53rem;
    font-weight:900;
    letter-spacing:.12em;
    margin-right:3px;
}

.keyboard-shortcut-bar>span{
    display:inline-flex;
    align-items:center;
    gap:3px;
    white-space:nowrap;
}

.keyboard-shortcut-bar>i{
    width:1px;
    height:16px;
    background:rgba(255,255,255,.08);
    margin:0 2px;
}

.keyboard-shortcut-bar kbd{
    min-width:19px;
    height:19px;
    display:inline-grid;
    place-items:center;
    padding:0 4px;
    border:1px solid rgba(201,170,113,.24);
    border-radius:2px;
    background:#071821;
    box-shadow:none;
    color:#dbc790;
    font-family:inherit;
    font-size:.52rem;
    font-weight:900;
}

.keyboard-shortcut-bar .ban-shortcut-help kbd:first-child{
    min-width:29px;
}

/* role/enemy slot shortcut badges */
.draft-slot{
    position:relative;
}

.slot-shortcut{
    position:absolute;
    top:5px;
    right:5px;
    min-width:19px;
    height:19px;
    display:grid;
    place-items:center;
    padding:0 4px;
    border:1px solid rgba(201,170,113,.22);
    background:rgba(3,12,18,.86);
    color:#ccb77f;
    font-size:.49rem;
    font-weight:900;
    line-height:1;
    z-index:3;
}

.enemy-shortcut{
    border-color:rgba(209,91,101,.22);
    color:#c9858d;
}

/* YOUR PICK shortcut badge */
.my-pick-slot{
    grid-template-columns:44px 24px 1fr 24px !important;
}

.my-pick-shortcut{
    width:22px;
    height:22px;
    display:grid;
    place-items:center;
    border:1px solid rgba(201,170,113,.36);
    background:rgba(201,170,113,.08);
    color:#e4cf98;
    font-size:.58rem;
    font-weight:900;
}

/* bans now show their shortcut without taking too much room */
.ban-slot{
    grid-template-columns:24px auto 1fr 18px !important;
}

.ban-shortcut{
    color:#805f67;
    font-size:.43rem;
    font-weight:900;
    letter-spacing:.02em;
    white-space:nowrap;
}

/* visual confirmation after keyboard activation */
@keyframes draftShortcutFlash{
    0%{
        box-shadow:
            0 0 0 0 rgba(201,170,113,.55),
            inset 0 0 0 1px rgba(201,170,113,.75);
    }
    100%{
        box-shadow:
            0 0 0 12px rgba(201,170,113,0),
            inset 0 0 0 1px rgba(201,170,113,0);
    }
}

[data-draft-target].shortcut-flash{
    animation:draftShortcutFlash .42s ease-out;
}

@media(max-width:1100px){
    .keyboard-shortcut-bar{
        gap:5px 7px;
    }

    .keyboard-shortcut-bar>i{
        display:none;
    }
}