/* dungeon.css */

/* CUSTOM BASELINE - START */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
    background-color: #0f0;
    font-size: 1rem;
    overflow: hidden;
    font-family: 'Verdana', Roboto, sans-serif;
    user-select:none;
}

div {
    margin: 0;
    padding: 0;
    border: none;
}

table {
    border-spacing: 0.625rem;
    border-collapse: separate;
}

th {
    text-align: center;
    font-weight: bold;
    font-size: 1.6rem;
}

td, li {
    text-align: justify;
    vertical-align: top;
    padding-left: 3.125rem;
    line-height: 160%;
    font-size: 1.5rem;
}

hr {
    border: 0;
    border-top: .0625rem solid #0f0;
    height: 0.0625rem;
    margin: 0.625rem 0;
}
/* CUSTOM BASELINE - END */


/* SPLASH - START */
#splash {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to bottom right, #d4af3730 15%, #3c2f2f30 100%);
    color: #0f0;
    font-family: 'Verdana', Roboto, sans-serif;
    z-index: 1000;
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    pointer-events: auto;
}

#splash-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.splash-title {
    position: absolute;
    top: 11%;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Zukarii', 'Verdana', Roboto, sans-serif;
    font-size: 4.5rem;
    font-weight: 999;
    color: #121c12;
    text-shadow: 0 0 4px #00ff0099;
    z-index: 10;
}

.splash-menu {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
    background: rgba(20, 30, 20, 0.4);
    border: 0.125rem solid #0f0;
    border-radius: 0.625rem;
    padding: 0.25rem .75rem;
    width: 15rem;
}

    .splash-menu ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .splash-menu li {
        font-size: 1.5rem;
        color: #288628e1;
        background: rgba(20, 30, 20, 0.3);
        border: 0.125rem solid #0f0;
        border-radius: 0.3125rem;
        padding: 0.5rem;
        margin: 0.5rem 0;
        cursor: pointer;
        transition: color 0.3s, background 0.3s;
        pointer-events: auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .splash-menu li:hover, .splash-menu li.selected {
            color: #0f0;
            background: #2c672c;
        }

.splash-lore {
    position: absolute;
    bottom: 25%;
    left: 50%;
    transform: translateX(-50%);
    color: #121c12;
    text-shadow: 0 0 5px #00ff00aa;
    font-size: 1.75rem;
    font-weight:bold;
    font-family: 'Zukarii', 'Verdana', Roboto, sans-serif;
    text-align: center;
    opacity: 0.95;
    max-width: 600px;
    animation: fadeIn 10s ease-in;
}

.splash-credits {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #0f0;
    font-size: 1.5rem;
    background: rgba(20, 30, 20, 0.7);
    padding: 2rem;
    border: 0.125rem solid #0f0;
    border-radius: 0.625rem;
    animation: fadeIn 0.5s ease-in;
}
/* SPlASH - END */



/*  GENERAL UI - START  */
#game {
display: flex;
flex-direction: row;
background-color: #000;
margin: 0;
position:relative;
width: calc(100vw - .15rem) ;
height: calc(100vh - .15rem);
z-index:1;

}

#ui-layer {
position: absolute;
top: 0;
left: 0;
width: calc(100vw - 0.15rem); /* Account for border (1px each side) */
height: calc(100vh - 0.15rem); /* Account for border (1px each side) */
background: transparent;
pointer-events: none; /* Non-clickable, children can override */
z-index: 1100; /* Above game and splash */
overflow: hidden; /* Prevent child overflow */
}

#hud-layer {
    position: absolute;
    opacity: 0.85;
    top: 0;
    left: 0;
    width: calc(100vw - 0.15rem); /* Account for border (1px each side) */
    height: calc(100vh - 0.15rem); /* Account for border (1px each side) */
    background: transparent;
    pointer-events: none; /* Non-clickable, children can override */
    z-index: 100; /* Above game but below splash */
    overflow: hidden; /* Prevent child overflow */
}



#player-info {
position: absolute;
display: flex;
justify-content: space-evenly;
top: 0;
left: 0;
width: calc(100vw - 0.15rem); /* Account for border (1px each side) */
margin: 0.0625rem;
    

height: 3rem; /* ~48px */
background-color: #000000cc;
pointer-events: none; /* Non-clickable, children can override */
z-index: 500; /* Above game but below splash */
overflow: hidden; /* Prevent child overflow */
}

#player-info > * {
font-weight: bold;
text-align: center;
color: #0f0;
z-index: 1000;
padding: 0.625rem; /* ~10px */
}

#minimap-canvas {
    position: absolute;
    top: 3.5rem;
    right: 0;
    width: 248px;
    height: 138px;
    padding: 2px;
    border: 1px solid #0f0;
    border-radius: 0.625rem;
    background: #222;
    z-index: 600;
    pointer-events: none;
}

    #minimap-canvas.hidden {
        display: none;
    }

#player-status {
position: absolute;
display: flex;
justify-content: space-evenly;
bottom: 0;
left: 0;
width: calc(100vw - 0.125rem); /* Account for border (1px each side) */
margin: 0.0625rem;
height: 3rem; /* ~48px */
background-color: #000000cc;
pointer-events: none; /* Non-clickable, children can override */
z-index: 500; /* Above game but below splash */
overflow: hidden; /* Prevent child overflow */
}

#player-status > * {
font-weight: bold;
text-align: center;
color: #0f0;
z-index: 1000;
padding: 0.5rem;
}
/* Container for the progress bar */
.progress-bar {
width: 100%; /* Full width of the parent */
max-width: 15rem; /* Adjust this to fit your UI */
height: .5rem; /* Bar height */
background-color: #333; /* Gray background for empty portion */
border-radius: .325rem; /* Rounded edges */
overflow: hidden; /* Keeps fill inside */
}

.bar {
width: 15rem;
}

/* The filled portion of the bar */
.progress-fill {
height: 100%;
transition: width 0.2s ease; /* Smooth fill animation */
}

/* Specific colors for each stat */
.hp-fill {
background-color: #e63946; /* Red for HP */
}

.mana-fill {
background-color: #1d4ed8; /* Blue for Mana */
}

.xp-fill {
    background-color: #facc15; /* Yellow for XP */
    transition: width 0.5s ease; /* Slower xp fill animation */
}

#tabs {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 70vw;
height: 75vh;
background: rgba(20, 30, 20, 0.7);
border: 0.125rem solid #060; /* ~1px */
border-radius: .625rem;
color: #0f0;
display: none; /* Hidden by default */
font-family: 'Verdana', Roboto, sans-serif;
font-size: 0.875rem; /* ~14px */
padding: .75rem; /* ~16px */
pointer-events: auto; /* Clickable children */
z-index: 2000; /* Increased to appear above #splash */
}

#tabs.hidden {
display: none;
}

.tabs-button {
flex: 0 0 auto;
}

#close-tabs {
background: #000;
color: #0f0;
border: 0.125rem solid #0f0; /* ~1px */
padding: 0.3125rem 0.625rem; /* ~5px 10px */
cursor: pointer;
font-size: 1rem; /* ~16px */
width:1rem;

}

#close-tabs:hover {
background: #0f0;
color: #000;
}

#game-over {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    font-size: 1.125rem; /* ~18px */
    z-index: 10;
    text-align: center;
    padding: 1.25rem; /* ~20px */
    border-radius: 0.625rem; /* ~10px */
    border: 0.125rem solid #2c672c;
    pointer-events: auto; /* Clickable children */
    /* ~1px */
}

    #game-over h1 {
        font-size: 3rem; /* ~48px */
        margin: .625rem; /* ~5px */
    }

#game-over-message {
    margin: .625rem; /* ~5px */
}
#game-over button {
    margin: .625rem; /* ~5px */
    padding: 0.625rem 1.25rem; /* ~10px 20px */
    background: #2c672c;
    color: #000;
    border-radius: 0.3125rem; /* ~5px */
    cursor: pointer;
    font-family: 'Verdana', Roboto, sans-serif;
}

    #game-over button:hover {
        background: #0f0;
    }

#game-over.death {
color: red;
background: rgba(0, 0, 0, 0.7);
animation: fadeIn 0.5s ease-in;
}

#game-over.victory {
color: #0f0;
background: rgba(0, 0, 0, 0.5);
text-shadow: 0 0 0.625rem #0f0; /* ~10px */
animation: victoryPulse 1.5s infinite ease-in-out;
}

@keyframes fadeIn {
from {
opacity: 0;
}

to {
opacity: 1;
}
}

@keyframes victoryPulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.9;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

#stats-overlay {
position: absolute;
bottom: 0.625rem; /* ~10px */
left: 50%;
transform: translateX(-50%);
width: 90%;
background: rgba(0, 0, 0, 0.7);
padding: 0.3125rem; /* ~5px */
color: #0f0;
font-size: 0.875rem; /* ~14px */
display: flex;
justify-content: space-around;
z-index: 500; /* Above map but below tooltips */
}

#stats-overlay div div {
transition: width 0.3s; /* Smooth bar animations */
}

/*  GENERAL UI - END  */


/*   TABS DIV - START  */

#tabs div.col-50-wrapper {
display: flex;
justify-content: space-between;
}

#tabs col-50 {
width: 50%;
}

#tab-menu {
    display: flex;
    align-content: flex-start;
    gap: 1rem; /* ~10px */
}


#tab-menu button.tabs-button {
    flex: 15;
    cursor: pointer;
    width:20%;
}
#close-tabs {
flex: 1;
cursor: pointer;
}

#tab-wrapper {
    height: 100%;
    width: 100%; /* Ensure it takes the full width of #tabs */
    padding: 0 0.3125rem 0 0.3125rem;
    padding-top: 0;
    margin: 0;
    overflow-y: hidden;
    display: flex; /* Ensure it supports the flex layout of its children */
    flex-direction: column; /* Stack #tab-menu and the content vertically */
}

#log-content {
height: 30rem; /* ~400px */
width: 100%;
overflow-y: hidden;
}

#log {
display: flex;
flex-direction:column;
width: 100%;
height: 27rem; /* Keep max height but let content dictate rows */
padding: 0.625rem; /* Outer padding */
border: 0.125rem solid #0f0;
border-radius: .625rem;
overflow-y: auto;
scrollbar-color: #0f0 #111;
scrollbar-width: thin;
scrollbar-gutter: stable;
background: rgba(20, 30, 20, 0.9);
}

#log p {
display: flex;
margin-bottom: 0.3125rem; /* ~5px */
line-height: 1.2;
}






#character-content {
height: 30rem; /* ~400px */
width: 100%;
display: flex; /* overwritten in line with none when hide is triggered*/
justify-content: space-between;
    
}
#character {
display: flex;
flex-direction: column;
height: 30rem; /* ~400px */
width: 29%;
margin-top: 0.625rem; /* ~10px */
}


#tabs h2 {
    font-size: 1.375rem; /* ~22px */
    font-weight: bold;
    text-align: center;
    margin: 0 0 0.625rem 0; /* ~5px */
}

#tabs h3 {
    font-size: 1.25rem; /* ~20px */
    font-weight: bold;
    text-align: center;
    margin: 0 0 0.625rem 0; /* ~5px */
}

#tabs h4 {
    font-size: 1.125rem; /* ~18px */
    font-weight: bold;
    text-align: center;
    margin: 0 0 0.625rem 0; /* ~5px */
}

#tabs button {
    
    margin: 0.3125rem 0; /* ~5px vertical margin */
    padding: 0.625rem; /* ~10px */
    background: #2c672c;
    color: #000;
    border-radius: .3125rem; /* ~5px */
    cursor: pointer;
    font-family: 'Verdana', Roboto, sans-serif;
    text-align: center;
    font-weight: bold;
}

#character-stat-wrapper {
display: flex;
flex-wrap: wrap; /* Allows items to wrap into multiple columns */
width: 100%;
gap: 0; /* Optional: controls spacing between items */
justify-content: center;
align-items: center;
flex-wrap: wrap;
font-size: 0.75rem; /* ~12px */
padding: 0.625rem; /* ~10px */
background: rgba(20, 30, 20, 0.7);
border: 0.125rem solid #0f0; /* ~1px */
border-radius: .625rem;
}

#character-stat-wrapper > div {
padding: .125rem 0 .125rem 0; /* ~2px */
width: 50%; /* 50% width minus border width (3px * 2) */
box-sizing: border-box; /* Ensures padding/border don't increase width */
margin: 0;
justify-content: center;
align-content: center;
}

    #character-stat-wrapper > div > span {
        width: 1rem; /* ~24px */
        text-align: right;
        font-weight: bold;
        display: inline-block;
    }
        #character-stat-wrapper > div > span.increment {
            width: .7rem; /* ~24px */
            text-align: left;
            cursor: pointer;
            /*visibility: hidden;*/
        }

        #character-stat-wrapper > div > span.increment.hidden {
            width: .7rem; /* ~24px */
            text-align: left;
            visibility: hidden;
        }
    
#equipped-items {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 0.75rem; /* ~12px */
    padding: 0.625rem; /* ~10px */
    background: rgba(20, 30, 20, 0.7);
    border: 0.125rem solid #0f0; /* ~1px */
    border-radius: .625rem;
    margin-bottom: 0.625rem; /* ~10px */
}


#equipped-items div.col {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 33% !important;
}


#tabs #equipped-items div.equipped-item {
    display: flex;
    flex-direction: column;
    padding: .3125rem; /* ~5px */
    height: 6.75rem;
    width: 5rem;
}

#tabs #equipped-items p {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: .3125rem; /* ~5px */
    height: 6rem;
    width: 5rem;
}

#tabs #equipped-items p.equipped {
    padding: 0;
    margin: 0;
    text-align: center;
    width: 4.25rem; /* ~68px */
    height: 4.25rem; /* ~68px */
}

#tabs #equipped-items p.equip-slot.equipped img.item {
    width: 4rem; /* ~64px */
    height: 4rem; /* ~64px */
    border-radius: .3125rem; /* ~5px */
    padding: 0;
    margin: 0;
    border: 0.125rem solid #ccc; /* ~1px */

}

    #tabs #equipped-items p.empty {
        width: 4.25rem;
        height: 4.25rem;
        background-size: 4.25rem;
        border-radius: .3125rem; /* ~5px */
        box-shadow: inset 0 0 10px #000;
        border: 0.125rem solid #ccc; /* ~1px */
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center center;
    }

#tabs #equipped-items p.empty img.item {
    width: 4rem; /* ~64px */
    height: 4rem; /* ~64px */
    padding: 0;
    margin: 0;
    border-radius: .3125rem; /* ~5px */
}

#tabs #equipped-items span {
    margin: 0;
    padding: .25rem 0 .5rem 0;
    text-align: center;
    font-size: 0.75rem; /* ~12px */
    width: 100% /* ~68px */
}

#tabs #equipped-items p.mainhand.empty {
    background-image: url("img/icons/item_slots/mainhand.svg");
}
#tabs #equipped-items p.offhand.empty {
    background-image: url("img/icons/item_slots/offhand.svg");
}
#tabs #equipped-items p.amulet.empty {
    background-image: url("img/icons/item_slots/amulet.svg");
}
#tabs #equipped-items p.leftring.empty {
    background-image: url("img/icons/item_slots/leftring.svg");
}
#tabs #equipped-items p.rightring.empty {
    background-image: url("img/icons/item_slots/rightring.svg");
}
#tabs #equipped-items p.armor.empty {
    background-image: url("img/icons/item_slots/armor.svg");
}
#tabs  #equipped-items p.equip-slot.head {
background-image: url('img/icons/item-slots/head.svg');
}
#tabs  #equipped-items p.equip-slot.gloves {
background-image: url('img/icons/item-slots/gloves.svg');
}
#tabs  #equipped-items p.equip-slot.belt {
background-image: url('img/icons/item-slots/belt.svg');
}
#tabs #equipped-items p.equip-slot.legs {
background-image: url('img/icons/item-slots/legs.svg');
}
#tabs  #equipped-items p.equip-slot.boots {
background-image: url('img/icons/item-slots/boots.svg');
}

#menu-content {
    height: 30rem; /* ~400px, matches #character-content */
    width: 100%;
    display: flex; /* Ensure flexbox is applied */
    flex-direction: row; /* Explicitly set to row to ensure side-by-side layout */
    justify-content: space-between; /* Distribute space between the two columns */
    gap: 0.625rem; /* ~10px, add a small gap between columns */
    flex-wrap: nowrap; /* Prevent wrapping */
}

#game-menu {
    display: flex;
    flex-direction: column;
    height: 30rem; /* ~400px */
    width: 20%;
    margin-top: 0.625rem; /* ~10px */
}

#menu-buttons {
    width: 100%;
    display: flex;
    flex-direction: column; /* Stack buttons vertically */
    justify-content: flex-start; /* Align buttons at the top */
    align-items: center; /* Center buttons horizontally */
    padding: 0.625rem; /* ~10px */
    background: rgba(20, 30, 20, 0.7);
    border: 0.125rem solid #0f0; /* ~1px */
    border-radius: .625rem;
    margin-bottom: 0.625rem; /* ~10px */
    height: 100%; /* Ensure it stretches to fill #game-menu */
    box-sizing: border-box;
}

    #menu-buttons button {
        width: 90%; /* Full width of the container */
        margin: 0.3125rem 0; /* ~5px vertical margin */
        padding: 0.625rem; /* ~10px */
        background: #2c672c;
        color: #000;
        border-radius: .3125rem; /* ~5px */
        cursor: pointer;
        font-family: 'Verdana', Roboto, sans-serif;
        text-align: center;
    }

    #menu-buttons button:hover {
        background: #0f0;
    }
        #menu-buttons button:active {
            background: #0f0;
        }
#menu-panel {
    display: flex;
    flex-direction: column;
    height: 30rem; /* ~400px, matches #inventory */
    width: 78%; /* Matches #inventory’s width */
    margin-top: 0.625rem; /* ~10px, matches #inventory */
}

#menu-data-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%; /* Fill the height of #menu-panel */
    width: 100%;
    padding: 0.625rem; /* ~10px */
    background: rgba(20, 30, 20, 0.7);
    border: 0.125rem solid #0f0; /* ~1px */
    border-radius: .625rem;
    overflow-y: auto;
    scrollbar-color: #0f0 #111;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
}

    #menu-data-wrapper h3 {
        text-align: left;
        padding-bottom: .3125rem; /* ~5px */
        border-bottom: 0.125rem solid #2c672c; /* ~2px */
    }

    #menu-data-wrapper h4 {
        margin: 0.625rem 0; /* ~10px */
    }

    #menu-data-wrapper li {
        margin: 0;
        padding: 0.3125rem; /* ~5px */
        font-size: 1rem;
        line-height: 1.2;
        line-height: 1.2;
    }

    #menu-data-wrapper button {
        padding: 0.1625rem 0.625rem; /* ~10px */
        margin: 0 0.3125rem; /* ~5px vertical margin */
    }

li.new-save-game {
    padding-bottom: .625rem; /* ~10px */
    border-bottom: 0.125rem solid #2c672c; /* ~1px */
}

#save-name-input, #character-select{
    border: 0.125rem solid #ccc;
    background-color: #2c672c80;
    color: #080;
}
.save-game-name {
    display: inline-block;
    width: 30rem;
}

#character-select {
    padding: 0.3125rem; /* ~5px */
    margin-bottom: 0.625rem; /* ~10px */
}


#menu-data-wrapper button:disabled {
    background: #555;
    color: #999;
    cursor: not-allowed;
}
#about-data ul li, #about-data h4 {
    width: 100%;
    margin-top: .625rem; /* ~10px */
    text-align: center;
}
#about-data h4 {
    margin-top: 1.3125rem;
}

#journey-content {
    height: 30rem; /* ~400px */
    width: 100%;
    display: flex; /* overwritten in line with none when hide is triggered*/
    justify-content: space-between;
}


#journey {
    display: flex;
    flex-direction: column;
    height: 31.75rem; /* ~400px */
    width: 98%;
    margin-top: 0.625rem; /* ~10px */
}

    #journey p {
        display: flex;
        margin-bottom: 0.3125rem; /* ~5px */
        line-height: 1.2;
    }


/* Journey Tab Styles */
#journey-window-wrapper {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 30rem; /* Keep max height but let content dictate rows */
    border-radius: .625rem;
    background: rgba(20, 30, 20, 0.7);
}

#journey-tabs {
    padding: 0;
    margin: 0;
    -moz-border-radius: inherit;
    -webkit-border-radius: inherit;
    border-radius: inherit;
    width: 100%;
    height: 1.75rem;
    display: flex;
    align-content: flex-start;
    gap: .325rem; /* ~5px */
}

    #journey-tabs button.tab {
        padding: 0.125rem 0.625rem; /* ~2px 10px */
        cursor: pointer;
        margin: 0;
        background: #2c672c;
        color: #000;
        border-bottom: none;
        -moz-border-radius: 0px;
        -webkit-border-radius: .325rem .325rem 0px 0px;
        border-radius: .325rem .325rem 0px 0px;
    }



        #journey-tabs button.tab {
            flex: 1;
            margin: 0; /* Equal width for all tabs */
        }

        #journey-tabs button.active {
            background: #0f0;
        }

#tabs #journey-items-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.625rem; /* ~5px */
    width: 100%;
    height: 27.25rem; /* Keep max height but let content dictate rows */
    padding: 0.625rem; /* Outer padding */
    border: 0.125rem solid #0f0;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px 0px .625rem .625rem;
    border-radius: 0px 0px .625rem .625rem;
    overflow-y: auto;
    scrollbar-color: #0f0 #111;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
    background: rgba(20, 30, 20, 0.7);
}

    #tabs #journey-items-wrapper p {
        margin-bottom: 0.3125rem; /* ~5px */
        line-height: 1.2;
    }

.journey-section {
    margin-bottom: 20px;
}

.side-path {
    margin-left: 20px;
    margin-top: 10px;
}

    #inventory {
        display: flex;
        flex-direction: column;
        height: 31.75rem; /* ~400px */
        width: 68%;
        margin-top: 0.625rem; /* ~10px */
    }

#inventory-window-wrapper {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 30rem; /* Keep max height but let content dictate rows */
    
    border-radius: .625rem;
    background: rgba(20, 30, 20, 0.7);
}


#inventory-tabs {
    padding: 0;
    margin: 0;
    -moz-border-radius: inherit;
    -webkit-border-radius: inherit;
    border-radius: inherit;
    width: 100%;
    height: 1.75rem;
    display: flex;
    align-content: flex-start;
    gap: .325rem; /* ~5px */
}

    #inventory-tabs button {
        padding: 0.125rem 0.625rem; /* ~2px 10px */
        cursor: pointer;
        margin: 0;
        background: #2c672c;
        color: #000;
        border-bottom:none;
        -moz-border-radius: 0px;
        -webkit-border-radius: .325rem .325rem 0px 0px;
        border-radius: .325rem .325rem 0px 0px;
    }
        #inventory-tabs button.tab {flex: 12;}
        #inventory-tabs button.sort {flex: 2;}
        #inventory-tabs button.active {background: #0f0;}

#tabs #inventory-item-wrapper {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    -ms-align-content: flex-start;
    -webkit-align-content: flex-start;
    align-content: flex-start;
    gap: 0.625rem; /* ~5px */
    width: 100%;
    height: 27.25rem; /* Keep max height but let content dictate rows */
    padding: 0.625rem; /* Outer padding */
    border: 0.125rem solid #0f0;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px 0px .625rem .625rem;
    border-radius: 0px 0px .625rem .625rem;
    overflow-y: auto;
    scrollbar-color: #0f0 #111;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
    background: rgba(20, 30, 20, 0.7);
}

#tabs div.inventory-item {
padding: 0;
display: flex;
flex-direction: column;
min-height: 4.1rem;
width: 4.1rem;  
margin: 0; /* Remove any default margins */
box-sizing: border-box; /* Include padding/border in height */
}

#tabs p.inventory-slot {
display:block;
align-items: center;
margin: 0;
padding: 0;
 
}

#tabs p.inventory-slot img.item {
width: 3.85rem; /* Match the 64px design */
height: 3.85rem; /* Match the 64px design */
border: 0.125rem solid #0f0;
padding: 0;
margin: 0;
border-radius: .3125rem;
}

    #tabs p.inventory-slot span.item-label {
        display: block;
        color: #0f0;
        font-size: .75rem;
        width: 4rem; /* ~64px */
        text-align: center;
    } 

.item-tooltip-class {
padding: 0.625rem; /* ~5px */
font-size: 0.875rem; /* ~14px */
color: #0f0;
z-index: 3000;
max-width: 15rem; /* ~200px */
background: rgba(20, 30, 20, 1);
border: 0.125rem solid #060; /* ~1px */
border-radius: .625rem;
}

.item-icon[icon="golden-skin.png"] {
    animation: tackySparkle 1.5s infinite;
}

@keyframes tackySparkle {
    0%, 100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(5px, -5px);
        box-shadow: 0 0 15px gold;
    }
}

.artifact,
.artifact hr,
.item-tooltip-class.artifact,
.item-tooltip-class p img.item-tooltip-icon.artifact,
#tabs #equipped-items p.equip-slot.equipped img.item.artifact,
#tabs p.inventory-slot.artifact img.item,
#tabs p.inventory-slot span.item-label.artifact {
    color: GoldenRod !important;
    border-color: GoldenRod !important;
}

    .artifact hr, .item-tooltip-icon-wrap.artifact,
    #tabs #equipped-items p.equip-slot.equipped img.artifact.item,
    #tabs p.inventory-slot.artifact img.item {
        background-color: GoldenRod !important;
    }

.relic,
.relic hr,
.item-tooltip-class.relic, 
.item-tooltip-class p img.item-tooltip-icon.relic,
#tabs #equipped-items p.equip-slot.equipped img.item.relic,
#tabs p.inventory-slot.relic img.item,
#tabs p.inventory-slot span.item-label.relic {
    color: gold !important;
    border-color: gold !important;
}

    .relic hr, .item-tooltip-icon.relic,
    #tabs #equipped-items p.equip-slot.equipped img.relic.item,
    #tabs p.inventory-slot.relic img.item {
        background-color: gold !important;
    }

.legendary,
.legendary hr,
.item-tooltip-class.legendary,
.item-tooltip-class p img.item-tooltip-icon.legendary,
#tabs #equipped-items p.equip-slot.equipped img.item.legendary,
#tabs p.inventory-slot.legendary img.item,
#tabs p.inventory-slot span.item-label.legendary {
    color: darkorange !important;
    border-color: darkorange !important;
}

    .legendary hr, .item-tooltip-icon.legendary,
    #tabs #equipped-items p.equip-slot.equipped img.legendary.item,
    #tabs p.inventory-slot.legendary img.item {
        background-color: darkorange !important;
    }

.mastercraft,
.mastercraft hr,
.item-tooltip-class.mastercraft,
#tabs #equipped-items p.equip-slot.equipped img.mastercraft.item,
#tabs p.inventory-slot.mastercraft img.item,
#tabs p.inventory-slot span.item-label.mastercraft {
    color: darkmagenta !important;
    border-color: darkmagenta !important;
}
    .mastercraft hr, .item-tooltip-icon.mastercraft,
    #tabs #equipped-items p.equip-slot.equipped img.mastercraft.item,
    #tabs p.inventory-slot.mastercraft img.item {
        background-color: darkmagenta !important;
    }

.magic,
.magic hr,
.item-tooltip-class.magic,
#tabs #equipped-items p.equip-slot.equipped img.magic.item,
#tabs p.inventory-slot.magic img.item,
#tabs p.inventory-slot span.item-label.magic {
    color: blueviolet !important;
    border-color: Blueviolet !important;
}

    .magic hr, .item-tooltip-icon.magic,
    #tabs #equipped-items p.equip-slot.equipped img.magic.item,
    #tabs p.inventory-slot.magic img.item {
        background-color: BlueViolet !important;
    }

.rare,
.rare hr,
.item-tooltip-class.rare,
#tabs #equipped-items p.equip-slot.equipped img.rare.item,
#tabs p.inventory-slot.rare img.item,
#tabs p.inventory-slot span.item-label.rare {
    color: blue !important;
    border-color: blue !important;
}

    .rare hr, .item-tooltip-icon.rare,
    #tabs #equipped-items p.equip-slot.equipped img.rare.item,
    #tabs p.inventory-slot.rare img.item {
        background-color: blue !important;
    }


.common,
.common hr,
.item-tooltip-class.common,
#tabs #equipped-items p.equip-slot.equipped img.common.item,
#tabs p.inventory-slot.common img.item,
#tabs p.inventory-slot span.item-label.common {
    color: #0f0 !important;
    border-color: #0f0 !important;
}

    .common hr, .item-tooltip-icon.common,
    #tabs #equipped-items p.equip-slot.equipped img.common.item,
    #tabs p.inventory-slot.common img.item {
        background-color: #0f0 !important;
    }



.junk,
.junk hr,
.item-tooltip-class.junk,
#tabs #equipped-items p.equip-slot.equipped img.junk.item,
#tabs p.inventory-slot.junk img.item,
#tabs p.inventory-slot span.item-label.junk {
color: whitesmoke !important;
border-color: whitesmoke !important;
}

    .junk hr, .item-tooltip-icon.junk,
    #tabs #equipped-items p.equip-slot.equipped img.junk.item,
    #tabs p.inventory-slot.junk img.item {
        background-color: whitesmoke !important;
    }


.item-tooltip-name {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-weight: bold;
    font-size: 1.125rem; /* ~18px */
    margin-bottom: 0.6125rem; /* ~10px */
    line-height: 1.33;
}

.item-tooltip-icon-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 8rem;
    margin: .1625rem;
}

.item-tooltip-icon {
    width: 8rem;
    height: 8rem;
    border-radius: .3125rem; /* ~5px */
    padding: 0;
    margin: 0;
    border: 0.125rem solid #ccc; /* ~1px */
}

.item-tooltip-type-tier {
    width: 100%;
    text-align: center;
    font-size: 1rem; /* ~16px */
    font-weight: bold;
    margin-bottom: 0.3125rem; /* ~5px */
}


tooltip-description {
width: 100%;
text-align: left;
font-size: 0.75rem; /* ~12px */
font-style: italic;
}


#player-name {
text-align: center;
font-size: 1.5rem; /* ~24px */
}


#stats {
margin: 0;
padding: 0.625rem; /* ~10px */
}

/*   TABS DIV - END  */