.backpack-launcher {
    position: fixed;

    right:
        max(
            18px,
            env(safe-area-inset-right)
        );

    bottom:
        max(
            18px,
            env(safe-area-inset-bottom)
        );

    z-index: 600;

    width: 82px;
    height: 82px;

    border:
        1px solid
        rgba(245, 204, 111, 0.58);

    border-radius: 50%;

    padding: 0;

    background:
        radial-gradient(
            circle at 45% 40%,
            rgba(45, 84, 106, 0.92),
            rgba(6, 18, 31, 0.96) 66%
        );

    box-shadow:
        0 0 28px
        rgba(66, 180, 255, 0.27),
        inset 0 0 22px
        rgba(241, 198, 97, 0.10);

    cursor: pointer;
}

.backpack-launcher__pack {
    position: relative;

    display: block;

    width: 42px;
    height: 48px;

    margin: auto;
}

.backpack-launcher__body {
    position: absolute;

    left: 6px;
    right: 6px;
    bottom: 1px;

    height: 36px;

    border:
        2px solid #d7a450;

    border-radius:
        9px 9px 12px 12px;

    background:
        linear-gradient(
            #765029,
            #3c2718
        );

    box-shadow:
        0 5px 10px
        rgba(0, 0, 0, 0.42);
}

.backpack-launcher__flap {
    position: absolute;

    z-index: 2;

    top: 5px;
    left: 7px;
    right: 7px;

    height: 20px;

    transform-origin:
        50% 100%;

    border:
        2px solid #e0ad58;

    border-radius:
        12px 12px 7px 7px;

    background:
        #62401f;

    transition:
        transform
        280ms ease;
}

.backpack-launcher__strap {
    position: absolute;

    z-index: 3;

    top: 17px;

    width: 5px;
    height: 25px;

    border-radius: 4px;

    background:
        #d4a04d;

    transition:
        transform 260ms ease,
        opacity 260ms ease;
}

.backpack-launcher__strap--left {
    left: 14px;
}

.backpack-launcher__strap--right {
    right: 14px;
}

.backpack-launcher[
    data-state="unbuckling"
]
.backpack-launcher__strap--left {
    transform:
        rotate(-28deg)
        translateX(-4px);
}

.backpack-launcher[
    data-state="unbuckling"
]
.backpack-launcher__strap--right {
    transform:
        rotate(28deg)
        translateX(4px);
}

.backpack-launcher[
    data-state="opening"
]
.backpack-launcher__flap,
.backpack-launcher[
    data-state="open"
]
.backpack-launcher__flap {
    transform:
        rotateX(145deg);
}

.backpack-launcher[
    data-state="opening"
]
.backpack-launcher__strap,
.backpack-launcher[
    data-state="open"
]
.backpack-launcher__strap {
    opacity: 0.25;
}

.backpack-panel {
    position: fixed;

    inset:
        max(
            18px,
            env(safe-area-inset-top)
        )
        max(
            18px,
            env(safe-area-inset-right)
        )
        max(
            18px,
            env(safe-area-inset-bottom)
        )
        max(
            18px,
            env(safe-area-inset-left)
        );

    z-index: 590;

    overflow: auto;

    border:
        1px solid
        rgba(226, 179, 89, 0.40);

    border-radius: 22px;

    padding:
        clamp(
            18px,
            4vw,
            36px
        );

    background:
        linear-gradient(
            145deg,
            rgba(4, 13, 25, 0.97),
            rgba(8, 27, 43, 0.95)
        );

    box-shadow:
        0 25px 80px
        rgba(0, 0, 0, 0.68),
        inset 0 0 50px
        rgba(62, 161, 214, 0.06);

    backdrop-filter:
        blur(14px);
}

.backpack-panel[hidden] {
    display: none;
}

.backpack-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 22px;

    border-bottom:
        1px solid
        rgba(199, 220, 241, 0.16);

    padding-bottom: 16px;
}

.backpack-panel__header h2 {
    margin: 4px 0 0;

    color: #f2cb72;
}

.backpack-panel__header small {
    color:
        rgba(
            218,
            234,
            249,
            0.66
        );

    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.backpack-panel__close {
    width: 44px;
    height: 44px;

    border:
        1px solid
        rgba(255, 255, 255, 0.24);

    border-radius: 50%;

    background:
        rgba(5, 15, 27, 0.75);

    color: #ffffff;

    font-size: 1.7rem;

    cursor: pointer;
}

.backpack-categories {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 20px;
}

.backpack-categories button {
    border:
        1px solid
        rgba(180, 211, 235, 0.25);

    border-radius: 999px;

    padding: 9px 15px;

    background:
        rgba(8, 22, 38, 0.78);

    color:
        rgba(239, 246, 253, 0.88);

    cursor: pointer;
}

.backpack-categories
button.is-active {
    border-color:
        rgba(240, 193, 87, 0.75);

    color: #f6d887;
}

.backpack-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.4fr)
        minmax(220px, 0.7fr);

    gap:
        clamp(
            18px,
            3vw,
            34px
        );
}

.backpack-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(104px, 1fr)
        );

    gap: 12px;

    align-content: start;
}

.backpack-item {
    position: relative;

    display: grid;
    place-items: center;

    gap: 8px;

    min-height: 118px;

    padding: 12px;

    border:
        1px solid
        rgba(176, 205, 230, 0.22);

    border-radius: 13px;

    background:
        rgba(4, 15, 27, 0.76);

    color: #eef6ff;

    cursor: pointer;
}

.backpack-item.is-selected {
    border-color:
        rgba(241, 193, 84, 0.86);

    box-shadow:
        0 0 18px
        rgba(241, 193, 84, 0.12);
}

.backpack-item__glyph {
    font-size: 2rem;

    color: #f2c665;
}

.backpack-item__quantity {
    position: absolute;

    top: 8px;
    right: 9px;

    font-size: 0.75rem;

    opacity: 0.82;
}

.backpack-item__name {
    font-size: 0.78rem;

    text-align: center;
}

.backpack-detail {
    min-height: 240px;

    border:
        1px solid
        rgba(176, 205, 230, 0.17);

    border-radius: 14px;

    padding: 20px;

    background:
        rgba(3, 12, 23, 0.62);
}

.backpack-detail__glyph {
    margin-bottom: 14px;

    color: #f0c35f;

    font-size: 4rem;
}

.backpack-detail h3 {
    color: #f4d37e;
}

.backpack-detail p {
    color:
        rgba(231, 242, 251, 0.75);

    line-height: 1.55;
}

.backpack-detail dl > div {
    display: flex;
    justify-content: space-between;

    gap: 16px;

    padding:
        9px 0;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.08);
}

.backpack-detail dt {
    opacity: 0.65;
}

.backpack-detail dd {
    margin: 0;
}

body[
    data-queenk-view="inventory"
]
#answer-area,

body[
    data-queenk-view="inventory"
]
#current-word,

body[
    data-queenk-view="inventory"
]
#wheel,

body[
    data-queenk-view="inventory"
]
#shuffle,

body[
    data-queenk-view="inventory"
]
#hint {
    visibility: hidden;
    pointer-events: none;
}

@media (max-width: 700px) {
    .backpack-launcher {
        width: 68px;
        height: 68px;
    }

    .backpack-layout {
        grid-template-columns:
            1fr;
    }

    .backpack-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

    .backpack-detail {
        min-height: 170px;
    }
}

/* =========================================================
   Generic inventory action
   ========================================================= */

.backpack-detail__use {
    width: 100%;

    margin-top: 18px;
    padding: 12px 18px;

    border:
        1px solid
        rgba(242, 199, 102, 0.72);

    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            rgba(139, 96, 38, 0.92),
            rgba(69, 44, 21, 0.96)
        );

    color: #fff1bd;

    font: inherit;
    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 0 18px
        rgba(240, 190, 84, 0.12);
}

.backpack-detail__use:hover {
    box-shadow:
        0 0 24px
        rgba(240, 190, 84, 0.28);
}

/*
 * QueenK teaches inventory through experimentation.
 *
 * Quest objects are dragged into the world rather than
 * displaying a permanent explicit "Use Key" solution.
 */
.backpack-detail__use {
    display: none;
}


/* =========================================================
   Backpack world-mode presentation
   ========================================================= */

body.queenk-world-active
.backpack-overlay,
body.queenk-world-active
.inventory-overlay {
    z-index:
        9800 !important;

    position:
        fixed !important;

    inset:
        0 !important;

    overflow:
        auto;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(28, 61, 78, 0.24),
            transparent 32rem
        ),
        rgba(2, 10, 17, 0.92) !important;

    backdrop-filter:
        blur(12px);
}


body.queenk-world-active
.backpack-panel,
body.queenk-world-active
.inventory-panel {
    width:
        min(
            1180px,
            calc(100vw - 2rem)
        );

    min-height:
        min(
            720px,
            calc(100vh - 3rem)
        );

    margin:
        1.5rem
        auto;

    border:
        1px solid
        rgba(142, 202, 226, 0.28);

    border-radius:
        1.5rem;

    background:
        linear-gradient(
            145deg,
            rgba(4, 22, 31, 0.98),
            rgba(4, 13, 23, 0.98)
        );

    box-shadow:
        0 2rem 6rem
        rgba(0, 0, 0, 0.48);
}


/*
 * Make inventory cards visibly game-like instead of
 * bare text floating in a large panel.
 */
.backpack-item,
.inventory-item,
[data-inventory-item] {
    border:
        1px solid
        rgba(156, 201, 218, 0.24);

    border-radius:
        1rem;

    background:
        linear-gradient(
            145deg,
            rgba(9, 30, 40, 0.96),
            rgba(7, 19, 27, 0.96)
        );

    box-shadow:
        inset 0 1px
        rgba(255, 255, 255, 0.04);

    transition:
        transform 150ms ease,
        border-color 150ms ease;
}


.backpack-item:hover,
.inventory-item:hover,
[data-inventory-item]:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(232, 200, 101, 0.62);
}


/* =========================================================
   QueenK Backpack - 3D world modal layer
   =========================================================

   The Three.js world runs at z-index 5000.

   The normal Backpack panel historically lived at 590,
   which is correct for puzzle mode but places the inventory
   underneath WebGL while QueenK is exploring a 3D area.

   Keep the existing puzzle layering unchanged and elevate
   only the Backpack panel while world mode is active.

   Layer contract:
       WebGL world        5000
       world HUD          8200
       Backpack launcher  8500
       dialogue           9000
       world map          9600
       Backpack panel    11000
       item reward       12000
*/
body.queenk-world-active .backpack-panel {
    z-index: 11000;
    pointer-events: auto;
}