/* Временный интерфейс ключей и инвентаря. */
.key-counter,
.get-key-btn,
.key-inventory,
.key-confirm-card{
    border:1px solid rgba(255,255,255,.24);
    background:rgba(255,255,255,.14);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    box-shadow:0 10px 28px rgba(72,23,52,.12);
}

.key-counter{
    position:fixed;
    top:22px;
    left:50%;
    transform:translateX(-50%);
    padding:9px 14px;
    border-radius:999px;
    color:white;
    font:inherit;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    z-index:2000;
}

.key-counter:hover{
    background:rgba(255,255,255,.22);
}

.key-test-panel{
    position:fixed;
    top:24px;
    right:24px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
    z-index:2000;
}

/* display:flex выше имеет тот же вес, что и атрибут [hidden] у браузера —
   без этого правила скрытая тестовая панель всё равно оставалась видна. */
.key-test-panel[hidden]{
    display:none;
}

.get-key-btn,
.inventory-key,
.key-confirm-btn{
    color:white;
    font:inherit;
    cursor:pointer;
}

.get-key-btn{
    padding:10px 14px;
    border-radius:12px;
    transition:transform .25s ease, background .25s ease;
}

.get-key-btn:hover{
    background:rgba(255,255,255,.24);
    transform:translateY(-2px);
}

.key-inventory{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    min-width:88px;
    padding:10px;
    border-radius:16px;
}

.inventory-key{
    position:relative;
    display:grid;
    place-items:center;
    width:58px;
    height:58px;
    border:1px solid rgba(255,255,255,.2);
    border-radius:12px;
    background:rgba(255,255,255,.08);
    opacity:.42;
    transition:transform .25s ease, opacity .25s ease, background .25s ease, box-shadow .25s ease;
}

.inventory-key:disabled{
    cursor:default;
}

.key-inventory.has-key .inventory-key{
    opacity:1;
    animation:keyAppear .45s cubic-bezier(.22,1,.36,1);
}

.key-inventory.has-key .inventory-key:hover{
    background:rgba(255,255,255,.18);
    transform:translateY(-2px) scale(1.04);
}

.key-inventory.key-selected .inventory-key{
    background:rgba(255,244,177,.28);
    box-shadow:0 0 0 2px rgba(255,245,190,.55), 0 0 22px rgba(255,222,105,.55);
}

.inventory-key-fallback{
    font-size:31px;
    filter:drop-shadow(0 3px 5px rgba(0,0,0,.16));
}

.inventory-key-image{
    position:absolute;
    width:42px;
    height:42px;
    object-fit:contain;
}

.inventory-key-image[hidden]{
    display:none;
}

.inventory-key-count{
    position:absolute;
    right:-7px;
    bottom:-7px;
    padding:2px 5px;
    border-radius:999px;
    background:rgba(88,35,66,.7);
    font-size:11px;
    font-weight:700;
}

.inventory-label{
    color:white;
    font-size:12px;
    font-weight:600;
}

.key-confirm-modal{
    position:fixed;
    inset:0;
    display:grid;
    place-items:center;
    padding:24px;
    background:rgba(45,12,34,.22);
    opacity:0;
    transition:opacity .25s ease;
    z-index:5000;
}

/* Скрытое окно не должно перекрывать страницу и перехватывать клики. */
.key-confirm-modal[hidden]{
    display:none !important;
    pointer-events:none;
}

.key-confirm-modal.is-visible{
    opacity:1;
}

.key-confirm-card{
    max-width:330px;
    padding:22px;
    border-radius:20px;
    color:white;
    text-align:center;
    transform:translateY(10px) scale(.97);
    transition:transform .25s ease;
}

.key-confirm-modal.is-visible .key-confirm-card{
    transform:translateY(0) scale(1);
}

.key-confirm-actions{
    display:flex;
    justify-content:center;
    gap:10px;
    margin-top:18px;
}

.key-confirm-btn{
    min-width:86px;
    padding:9px 14px;
    border:1px solid rgba(255,255,255,.26);
    border-radius:10px;
    background:rgba(255,255,255,.12);
    transition:background .2s ease, transform .2s ease;
}

.key-confirm-btn:hover{
    background:rgba(255,255,255,.23);
    transform:translateY(-1px);
}

.key-confirm-btn--yes{
    background:rgba(255,224,111,.28);
}

/* Выбранный ключ визуально находится «в руке» пользователя. */
.held-key-cursor{
    position:fixed;
    display:none;
    place-items:center;
    top:0;
    left:0;
    width:48px;
    height:48px;
    pointer-events:none;
    will-change:transform;
    backface-visibility:hidden;
    z-index:10000;
}

.held-key-cursor img{
    max-width:44px;
    max-height:44px;
    object-fit:contain;
    filter:drop-shadow(0 4px 5px rgba(0,0,0,.22));
    animation:heldKeyFloat .85s ease-in-out infinite alternate;
}

.held-key-cursor img[hidden]{
    display:none;
}

.held-key-fallback{
    position:absolute;
    font-size:34px;
    filter:drop-shadow(0 4px 5px rgba(0,0,0,.22));
    animation:heldKeyFloat .85s ease-in-out infinite alternate;
}

.key-cursor-active .held-key-cursor{
    display:grid;
}

.key-cursor-active,
.key-cursor-active *{
    cursor:none !important;
}

@keyframes keyAppear{
    from{ opacity:0; transform:scale(.55) rotate(-18deg); }
    to{ opacity:1; transform:scale(1) rotate(0); }
}

@keyframes heldKeyFloat{
    from{ transform:rotate(4deg) scale(1); }
    to{ transform:rotate(-4deg) scale(1.06); }
}

@media (prefers-reduced-motion: reduce){
    .key-inventory.has-key .inventory-key{
        animation:none;
    }

    .held-key-cursor img,
    .held-key-fallback{
        animation:none;
    }
}