/* =====================================================================
   inventory.css — the look of sky/inventory.js.
   (it used to be written inside the script, as strings; same rules, now here)
   ===================================================================== */

.hotbar {
    position: fixed;
    left: 50%;
    bottom: var(--bar-bottom, 12px);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 7px;
    border-radius: 12px;
    background: rgba(26, 18, 12, .92);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(243, 230, 194, .18);
    /* (tucked away below the screen while the bag's empty: as far again as it's lifted, or on a phone, perched above the
       corner buttons, an empty hotbar sat right on "leave a message") */
    transform: translate(-50%, calc(170% + var(--bar-bottom, 12px)));
    transition: transform .35s cubic-bezier(.3, 1.4, .5, 1), opacity .3s;
    font-family: "IM Fell English", Georgia, serif;
}
.hotbar.has {
    transform: translate(-50%, 0);
}
.hotbar .hb-bag {
    width: 30px;
    height: 30px;
    margin-right: 3px;
    flex: none;
}
.hotbar .hb-bag>svg,
.hotbar .hb-bag>.art {
    width: 100%;
    height: 100%;
    display: block;
}
.hotbar .hb-slot {
    position: relative;
    width: 44px;
    height: 44px;
    padding: 4px;
    flex: none;
    border: 2px solid rgba(243, 230, 194, .28);
    border-radius: 6px;
    background: rgba(243, 230, 194, .1) var(--slot-art, none) center / 100% 100% no-repeat;
    cursor: pointer;
    color: #f3e6c2;
}
.hotbar .hb-slot:hover {
    border-color: rgba(243, 230, 194, .6);
    background-color: rgba(243, 230, 194, .16);
}
.hotbar .hb-slot.on {
    border-color: #f3e6c2;
    box-shadow: 0 0 0 2px rgba(30, 21, 14, .9), 0 0 0 4px #f3e6c2;
    background-color: rgba(243, 230, 194, .22);
}
.hotbar .hb-slot:empty::after,
.hotbar .hb-slot.empty::after {
    content: "";
}
.hotbar .hb-slot>svg,
.hotbar .hb-slot>img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    pointer-events: none;
}
.hotbar .hb-num {
    position: absolute;
    left: 3px;
    top: 0;
    font: bold 11px/1.2 Georgia, serif;
    color: rgba(243, 230, 194, .75);
    text-shadow: 0 1px 2px #000;
    pointer-events: none;
}
.hotbar .hb-name {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translateX(-50%);
    white-space: nowrap;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(30, 21, 14, .85);
    color: #f3e6c2;
    font-style: italic;
    font-size: .85rem;
    opacity: 0;
    transition: opacity .2s;
    pointer-events: none;
}
.hotbar .hb-slot:hover .hb-name {
    opacity: 1;
}
/* (the place tabs used to be lifted above the hotbar here, on phones: they're at the top now, sky.css) */
@media (max-width: 620px) {
    .hotbar {
        gap: 2px;
        padding: 4px 5px;
    }
    .hotbar .hb-slot {
        width: 38px;
        height: 38px;
        padding: 3px;
    }
    .hotbar .hb-bag {
        display: none;
    }
}
.inv-cursor {
    position: fixed;
    z-index: 11;
    width: 56px;
    pointer-events: none;
    transform: translate(-50%, -50%) rotate(-10deg);
    display: none;
    filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .4));
}
.inv-cursor>svg,
.inv-cursor>img {
    width: 100%;
    display: block;
}
body.inv-holding:not(.inv-reticle) .inv-cursor {
    display: block;
}
body.inv-holding,
body.inv-holding * {
    cursor: crosshair !important;
}
body.inv-reticle,
body.inv-reticle * {
    cursor: var(--reticle) 20 20, crosshair !important;
}
.inv-note {
    position: fixed;
    left: 50%;
    bottom: calc(var(--bar-bottom, 12px) + 72px);
    z-index: 10;
    transform: translateX(-50%);
    padding: 4px 14px;
    border-radius: 999px;
    background: rgba(40, 28, 18, .85);
    color: #f3e6c2;
    font: italic .95rem "IM Fell English", Georgia, serif;
    opacity: 0;
    transition: opacity .3s;
    pointer-events: none;
    white-space: nowrap;
    max-width: 92vw;
    overflow: hidden;
    text-overflow: ellipsis;
}
.inv-note.on {
    opacity: 1;
}
@media (max-width: 620px) {
    .inv-note {
        white-space: normal;
        width: max-content;
        max-width: 88vw;
        text-align: center;
        border-radius: 14px;
    }
}
/* (a long line wraps on a phone, not cut off) */
/* things you can pick up: a little glint now and then */
.pickup {
    cursor: pointer;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .4));
    transition: transform .2s;
}
.pickup:hover,
.pickup:focus-visible {
    transform: translateY(-3px) rotate(-4deg);
    outline: none;
}
.pickup>svg,
.pickup>.art {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.pickup::after {
    content: "";
    position: absolute;
    right: -4px;
    top: -6px;
    width: 10px;
    height: 10px;
    pointer-events: none;
    background: radial-gradient(circle, #fff 0 20%, rgba(255, 240, 180, .8) 30%, transparent 70%);
    opacity: 0;
    animation: pk-glint 3.2s ease-in-out infinite;
}
@keyframes pk-glint {
    0%,
    80%,
    100% {
        opacity: 0;
        transform: scale(.4);
    }
    88% {
        opacity: 1;
        transform: scale(1.3) rotate(45deg);
    }
}
.pickup .pk-hint {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);
    transform: translateX(-50%);
    white-space: nowrap;
    font-style: italic;
    font-size: .9rem;
    color: #f3e6c2;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
    opacity: 0;
    transition: opacity .25s;
    pointer-events: none;
}
.pickup:hover .pk-hint {
    opacity: 1;
}
.pickup.taken {
    display: none !important;
}
body.mirror-open .hotbar,
body.leaving .hotbar,
body.sky-view .hotbar,
body.records-open .hotbar,
body.crate-open .hotbar,
body.peep-view .hotbar,
body.peep-close .hotbar,
body.paint-open .hotbar,
body.frame-open .hotbar,
body.paper-open .hotbar,
body.book-open .hotbar {
    opacity: 0;
    pointer-events: none;
}