:root{
    --nw-border-inventory: #2c2c2c;
}

/* take the superior half part of the image */
.gui_inv_icons-default{
    object-fit: cover;
    clip-path: inset(0 0 50% 0);
    transform-origin: 0 0;
    transform: translate(0%, 25%);
}
.gui_inv_icons-tab-close{
    object-fit: cover;
    clip-path: inset(0 0 50% 0);
    transform-origin: 0 0;
    transform: translate(-50%, 25%);
}

.gui_inv_icons-selected{
    object-fit: cover;
    clip-path: inset(50% 0 0% 0);
    transform-origin: 0 0;
    transform: translate(10%, -25%);
}
.gui_inv_icons-tab-close-selected{
    object-fit: cover;
    clip-path: inset(0 0 50% 0);
    transform-origin: 0 0;
    transform: translate(-0%, 25%);
}


.game_inventory {  
        background-color: black;
        /* border-bottom: 1px solid var(--nw-border-inventory); */
        /* border-top: 1px solid var(--nw-border-inventory); */
    display: grid;
    position: relative; /* Allow absolute positioning of children */
  grid-template-columns: 60px 60px 60px 60px 60px 60px 60px 60px 60px 60px 60px 60px;
  grid-template-rows: 60px 60px 60px 60px 60px 60px;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "inv00 inv01 inv02 inv03 inv04 inv05 inv06 inv07 inv08 inv09 inv_tab0"
    "inv10 inv11 inv12 inv13 inv14 inv15 inv16 inv17 inv18 inv19 inv_tab1"
    "inv20 inv21 inv22 inv23 inv24 inv25 inv26 inv27 inv28 inv29 inv_tab2"
    "inv30 inv31 inv32 inv33 inv34 inv35 inv36 inv37 inv38 inv39 inv_tab3"
    "inv40 inv41 inv42 inv43 inv44 inv45 inv46 inv47 inv48 inv49 inv_tab4"
    "inv50 inv51 inv52 inv53 inv54 inv55 inv56 inv57 inv58 inv59 inv_tab5";
    width: 660px; /* 11 columns × 60px = 720px */
    height: 360px; /* 6 rows × 60px = 360px */   
}
.inv_cell{
    border: 1px solid var(--nw-border-inventory) !important;
}
.inv_tab{
    cursor: pointer;
    border: 1px solid var(--nw-border-inventory) !important;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: hidden;
    border-image: linear-gradient(to right, var(--nw-border-inventory) 36%, transparent 50%) 100% 1;
}
.inv_tab-selected{
    border-image: linear-gradient(to right, var(--nw-border-inventory) 65%, transparent 50%) 100% 1;
}

.inv-item-selected{
    display: block;
}
.inv-item-hidden{
    display: none;
}

.inv_tab img:first-child {
    width: 50%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.inv_tab img:last-child {
    width: 50%;
    height: 202%;
    object-fit: contain;
    object-position: center;
}

.inv_tab0 { grid-area: inv_tab0; }

.inv_tab1 { grid-area: inv_tab1; }

.inv_tab2 { grid-area: inv_tab2; }

.inv_tab3 { grid-area: inv_tab3; }

.inv_tab4 { grid-area: inv_tab4; }

.inv_tab5 { grid-area: inv_tab5; }

.inv00 { grid-area: inv00; }
.inv01 { grid-area: inv01; }
.inv02 { grid-area: inv02; }
.inv03 { grid-area: inv03; }
.inv04 { grid-area: inv04; }
.inv05 { grid-area: inv05; }
.inv06 { grid-area: inv06; }
.inv07 { grid-area: inv07; }
.inv08 { grid-area: inv08; }
.inv09 { grid-area: inv09; }

.inv10 { grid-area: inv10; }
.inv11 { grid-area: inv11; }
.inv12 { grid-area: inv12; }
.inv13 { grid-area: inv13; }
.inv14 { grid-area: inv14; }
.inv15 { grid-area: inv15; }
.inv16 { grid-area: inv16; }
.inv17 { grid-area: inv17; }
.inv18 { grid-area: inv18; }
.inv19 { grid-area: inv19; }

.inv20 { grid-area: inv20; }
.inv21 { grid-area: inv21; }
.inv22 { grid-area: inv22; }
.inv23 { grid-area: inv23; }
.inv24 { grid-area: inv24; }
.inv25 { grid-area: inv25; }
.inv26 { grid-area: inv26; }
.inv27 { grid-area: inv27; }
.inv28 { grid-area: inv28; }
.inv29 { grid-area: inv29; }

.inv30 { grid-area: inv30; }
.inv31 { grid-area: inv31; }
.inv32 { grid-area: inv32; }
.inv33 { grid-area: inv33; }
.inv34 { grid-area: inv34; }
.inv35 { grid-area: inv35; }
.inv36 { grid-area: inv36; }
.inv37 { grid-area: inv37; }
.inv38 { grid-area: inv38; }
.inv39 { grid-area: inv39; }

.inv40 { grid-area: inv40; }
.inv41 { grid-area: inv41; }
.inv42 { grid-area: inv42; }
.inv43 { grid-area: inv43; }
.inv44 { grid-area: inv44; }
.inv45 { grid-area: inv45; }
.inv46 { grid-area: inv46; }
.inv47 { grid-area: inv47; }
.inv48 { grid-area: inv48; }
.inv49 { grid-area: inv49; }

.inv50 { grid-area: inv50; }
.inv51 { grid-area: inv51; }
.inv52 { grid-area: inv52; }
.inv53 { grid-area: inv53; }
.inv54 { grid-area: inv54; }
.inv55 { grid-area: inv55; }
.inv56 { grid-area: inv56; }
.inv57 { grid-area: inv57; }
.inv58 { grid-area: inv58; }
.inv59 { grid-area: inv59; }

#container-header-bar{
    position: absolute;
    top: 0px;
    height: 61px;
    width: 660px;
    background-color: black;
    border: 2px solid var(--nw-border-inventory);
}

#container-display {
    position: absolute;
    height: 293px;
    margin-top: 4px;
    top: 59px;
    left: 424px; /* Position anchored to inv06 which is at column 6 (6 * 60px = 360px) */
    width: 232px;    
    background-color: black;
    border: 2px solid var(--nw-border-inventory);
    border-radius: 4px;
    z-index: 100;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1.5fr 0.3fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        "container-icon"
        "container-close-button";
}

#container-icon { 
    grid-area: container-icon;
    flex: 1;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 56px;
}

#container-close-button {
    grid-area: container-close-button; 
    display: flex;              /* use flexbox for centering */
    justify-content: center;    /* horizontal center */
    align-items: center;
}


#container-close-btn {
    background-color: #000;
    color: #fff;
    font-family: "DejaVu Serif", "Liberation Serif", serif;
    font-size: 24px;
    padding: 6px 20px;
    border: 2px solid #c08a3f;
    border-radius: 2px;
    text-shadow: 0 0 2px #000;
    box-shadow: 
    0 0 0 1px #fff inset,
    0 0 6px rgba(0,0,0,0.8);
    cursor: pointer;
    width: 100%;
    height: 100%;
}

#container-close-btn:hover {
    background-color: #111;
    border-color: #e0b95d;
}

.inv-item-container{
    cursor: pointer;
}