/* 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;
    cursor: pointer;
}

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 */

.flex-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    width: 100%;
    height: 100%;
    margin:0;
    padding:0;
}

#splash, #game, #hud-layer, #ui-layer {
    border-radius: .3125rem;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    width: calc(100vw - .185rem);
    height: calc(100vh - .185rem);
}

/* 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;
    pointer-events: auto;
}

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

.zfont {
    font-family: 'Zukarii', 'Verdana', Roboto, sans-serif;
    font-size: .85rem;
}

.splash-title {
    position: absolute;
    top: 11%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: 'Zukarii', 'Verdana', Roboto, sans-serif;
    font-size: clamp(1rem, 5.5vw, 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;
    position: relative;
    z-index: 1;
}

#ui-layer {
    background: transparent;
    pointer-events: none; /* Non-clickable, children can override */
    z-index: 1100; /* Above game and splash */
    overflow: hidden; /* Prevent child overflow */
}

#hud-layer {
    opacity: 0.75;
    background: transparent;
    pointer-events: none; /* Non-clickable, children can override */
    z-index: 100; /* Above game but below splash */
    overflow: hidden; /* Prevent child overflow */
}

    #hud-layer > * {
        font-weight: bold;
        text-align: center;
        color: #0f0;
        z-index: 510;
        padding: 0.5rem;
    }

.status-divider {
    position: absolute;
    top: 0;
    width: 1px;
    height: 100%;
    background: #ddd;
    opacity: 0.7;
}


#hud-top-left {
    position: absolute;
    top: .5rem;
    left: .5rem;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    z-index: 599;
    gap: .625rem; /* ~5px */
    width: 254px;
}



#player-info {
    display: flex;
    flex-direction: row;
    /* width: calc(100vw - 0.15rem);*/ /* Account for border (1px each side) */

    width:100%;
    padding: .3125rem;
    pointer-events: none;
    margin: 0;
    border: 2px solid #0f0;
    border-radius: 0.625rem;
    background-color: #222222cc;
    overflow: hidden; /* Prevent child overflow */
    box-shadow: 0 0 6px rgba(0, 255, 0, 0.8);
    gap: .625rem; /* ~5px */
}
    #player-info .player {
        font-size: 1.5rem; /* ~24px */
    }
    #player-info .level {
        font-size: .75rem; /* ~12px */
    }
    #player-info .resource {
        font-size: 0.725rem; /* ~12px */
    }
    #player-info > * {
        font-weight: bold;
        text-align: left;
        color: #0f0;
        z-index: 600;
        padding: 0.1725rem;
        margin: 0;
        pointer-events: none;
    }

#nameplate_icon {
    height: 3rem; /* ~48px */
    width: 3rem; /* ~48px */
    padding: 0.125rem; /* ~2px */
    background-color: black;
    border: 1px solid #0f0; /* ~1px */
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(0, 255, 0, 0.8);
}

    #nameplate_icon img {
        height: 2.625rem;
        border-radius: 50%;
        margin:0;padding:0;
    }


#nameplate-text {
    display: flex;
    flex-direction: column;
    /* width: calc(100vw - 0.15rem);*/ /* Account for border (1px each side) */
}

#hp-mana {
    width:100%;
    display: flex;
    flex-direction: column;
    gap: .625rem; /* ~10px */
}


#hud-top-center{
    position: absolute;
    top: .5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    z-index: 599;
    gap: .625rem; /* ~5px */
}
#target-info {
    width: 254px;
    padding: .3125rem;
    pointer-events: none;
    margin: 0;
    display: none;
    flex-direction: row;
    border: 2px solid #0f0;
    border-radius: 0.625rem;
    background-color: #222222cc;
    overflow: hidden; /* Prevent child overflow */
    box-shadow: 0 0 6px rgba(0, 255, 0, 0.8);
    gap: .625rem; /* ~5px */
}


#target-nameplate-icon {
    height: 1.5rem; /* ~48px */
    width: 1.5rem; /* ~48px */
    padding: 0.125rem; /* ~2px */
    background-color: black;
    border: 1px solid #0f0; /* ~1px */
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(0, 255, 0, 0.8);
}

    #target-nameplate-icon img {
        height: 1.3125rem;
        border-radius: 50%;
        margin: 0;
        padding: 0;
    }
#target-nameplate-text {
    display: flex;
    flex-direction: row;
    width:100%;
}

    #target-name {
        font-size: 1.25rem; /* ~24px */
    }
    #target-nameplace-text > * {
        font-weight: bold;
        text-align: center;
        color: #ff000088;
        z-index: 600;
        padding: 0.1725rem;
        margin: 0;
        pointer-events: none;
    }


#hud-top-right {
    position: absolute;
    top: .5rem;
    right: .2rem;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    z-index: 599;
    gap: .625rem; /* ~5px */
}
#minimap-canvas {
    width: 248px;
    height: 138px;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid #0f0;
    border-radius: 0.625rem 0.625rem 0 0 ;
    z-index: 597;
    pointer-events: none;
    background: rgba(134, 134, 134, 1);
}
#minimap-wrapper {
    width: 252px;
    height: 162px;
    padding: 0px;
    margin: 0;
    border: 2px solid #0f0;
    border-radius: 0.625rem;
    background: #222222cc;
    z-index: 598;
    pointer-events: none;
    box-shadow: 0 0 6px rgba(0, 255, 0, 0.8);
}
    #minimap-wrapper #tierInfo {
        position: absolute;
        display: flex;
        justify-content: space-evenly;
        bottom: 0;
        padding: 2px;
        margin: 0px;
        width: 100%;
        text-align: center;
        z-index: 599;
        pointer-events: none;
        color: #0f0;
        font-weight: bold;
        font-size: .725rem;
    }

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



/* Container for the progress bar */
.progress-bar {
    position: relative;
    width: 100%; /* Full width of the parent */
    max-width: 15rem; /* Adjust this to fit your UI */
    height: 1rem;
    border: 2px solid #0f0;
    border-radius: .575rem;
    box-shadow: 0 0 6px rgba(0, 255, 0, 0.5);
    overflow: hidden; /* Keeps fill inside */
}

.progress-bar div span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0f0;
    font-weight: bold;
    text-shadow: 0 0 2px #000;
}

.bar {
    width: 15rem;
}

#xp-bar-container.bar {
    width:19rem;
   
}
#xp-bar-container .progress-bar {
    max-width: 19rem;
    height: 1rem;
}
/* The filled portion of the bar */
.progress-fill {
    height: 100%;
    transition: width 0.2s ease; /* Smooth fill animation */
    font-size: 0.6125rem; /* ~12px */
}

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

.mana-fill {
    background-color: #163aa0; 
}

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

/* Bottom-Left Section (Log Messages with Tabs) */
#hud-log-window {
    position: absolute;
    bottom: 0;
    left: 1.5rem;
    width: 375px;
    height: 175px;
    border: none;
    
    z-index: 1000;
    margin: 0;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}



#hud-log-tabs {
    display: flex;
    gap: 5px;

    border: none; /* Remove all borders from container */
    padding: 0; /* Remove padding */
}

.hud-log-tab {
    flex: 1;
    padding: 5px;
    background: #2c672c;
    color: #000;
    border: 2px solid #0f0; /* Keep outline around each tab */
    border-bottom: none; /* Remove bottom border to blend with container */
    border-radius: 6px 6px 0 0;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    text-shadow: none;
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.4);
}

    .hud-log-tab.active {
        background: #0f0;
        border: 2px solid #0f0; /* Keep outline for active tab */
        border-bottom: none; /* Remove bottom border */
    }


hud-log-content-wrapper {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    background: rgba(25, 30, 20, .99);
}
#hud-log-content {
    height: calc(100% - 30px); /* Subtract tab height */
    overflow-y: auto;
    scrollbar-color: #0f0 #111;
    scrollbar-width: thin;
    padding: 10px;
    border: 2px solid #0f0; /* Border on text window */
    border-radius: 0 0 8px 8px; /* Bottom-left and bottom-right radius */
    background: rgba(20, 25, 20, 1);
    text-align: left;
    padding: .3125rem;
    gap: .1625rem;
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.4);
}

    #hud-log-content p {
        font-size: 12px;
        margin-bottom: 4px;
        text-shadow: 0 0 1px #000;
        line-height: 1.25;
        font-weight:300;
    }

.channel-system {
    color: #fff;
}
.channel-loot {
    color: #fbd013;
}
.channel-combat {
    color: #ff0022;
}
    .channel-combat.player {
        color: #00e000;
    }
.channel-journey {
    color:#6969f3;
}
#bottom-hud-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 10rem;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
    z-index: 500;
    gap: 0;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    margin-bottom: .5rem;
}

#xp-hotbars {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    height: 10rem;
    pointer-events: none;
    z-index: 510;
    padding: 0;
    margin: 0;
    gap: .5rem;

}

#hotbarwrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

#hotbar {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0.3125rem;
    background: rgba(20, 30, 20, 0.7);
    border: 0.125rem solid #0f0;
    border-radius: .625rem;
    font-size: .725rem;
    pointer-events: auto;
    box-shadow: 0 0 6px rgba(0, 255, 0, 0.8);
    gap:.5rem;
    height:3.5rem;
}

.hotbar-slot {
    height: 2.6625rem;
    width: 2.6625rem;
    margin: 0;
    padding: 0;
    text-align: center;
    pointer-events: auto;
}

.hotbar-slot.drag-over .hotbar-icon-wrapper {
    border-color: #fff;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
}

.hotbar-icon-wrapper {
    position: relative;
    border: 1px solid #0f0;
    border-radius: .3125rem; /* ~5px */
    height: 2.75rem; /* ~40px */
    width: 2.75rem;
    padding: 1px;
}

.hotbar-icon {
    height: 2.5rem; /* ~40px */
    width: 2.5rem;
    border: 2px solid #222;
}

.hotbar-slot-label {
    position: absolute;
    bottom: .06125rem;
    left: .06125rem;
    height: .725rem;
    width: .725rem;
    text-align: center;
    font-size: .625rem; /* ~12px */
    color: #0f0;
    background: rgba(0, 0, 0, 0.6);
    padding: .06125rem; /* ~2px */
    border-radius: 50%;
}
#resources {
    position: absolute;
    bottom: 0;
    right: 1.5rem;
    width: 180px;
    height: 125px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    z-index: 510;
    font-size: .725rem;
    border: 2px solid #0f0;
    pointer-events: none;
    border-radius: .575rem;
    box-shadow: 0 0 6px rgba(0, 255, 0, 0.5);
    overflow: hidden;
    margin: 0;
    background: rgba(26, 42, 26, 0.8);
    text-align: left;
    padding: .3125rem;
    gap: .1625rem;
}

#tabs {
    position: absolute;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50.25%);
    width: 68.5vw;
    min-height: auto; /* Allow height to adjust based on content */
    max-height: 95vh;
    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: .625rem;
    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%;
    min-height: 32rem;
    max-height: 95vh; /* Prevents overflow */
    width: 100%; /* Ensure it takes the full width of #tabs */
    padding: 0;
    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: 28.625rem; /* ~400px */
    width: 100%;
    overflow-y: hidden;
}

#log-wrap {
    display: flex;
    flex-direction: column;
    height: 28rem; /* ~400px */
    width: 100%;
    margin-top: 0.625rem; /* ~10px */
}

#log-window-wrapper {
    padding: 0;
    margin: 0;
    border-radius:.625rem;
    height: 25rem;
    width: 100%;
}
#log-tabs {
    height: 0rem;
    padding: 0;
    margin: 0;
    display: flex;
    gap: .3125rem; /* ~5px */
    border-radius: inherit;
    width: 100%;    
}

#log {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 25.75rem; /* 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: 28rem; /* ~400px */
    width: 100%;
    display: flex; /* overwritten in line with none when hide is triggered*/
    flex-direction: row;
    gap: 0.875rem; /* ~10px */
}

#character > .flex-container:first-child {
    flex: none;
    width: 20%;
}

#character > .flex-container:last-child {
    flex: 1;
}

#inventory-content {
    height: 28rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

#equipped-panel {
    display: flex;
    flex-direction: column;
    height: 28rem;
    width: 30%;
    margin-top: 0.625rem;
}

#inventory {
    display: flex;
    flex-direction: column;
    height: 28rem;
    width: 68%;
    margin-top: 0.625rem;
}

#character {
    flex: 44; /* Takes 4/5 of the width */   
    display: flex;
    flex-direction: row;
    height: 28rem; /* ~400px */
    margin-top: 0.625rem; /* ~10px */
    gap: 0.875rem; /* ~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-direction: column;
    height: 28rem; 
    width: 100%;
    gap: .125rem; /* Optional: controls spacing between items */
    font-size: 0.75rem; /* ~12px */
    padding: 0.3125rem;
    background: rgba(20, 30, 20, 0.7);
    border: 0.125rem solid #0f0; /* ~1px */
    border-radius: .625rem;
    justify-content: center; /* Centers child divs horizontally */
    align-items: center; /* Centers child divs vertically */
    overflow-y: auto; /* Allows scrolling if content exceeds height */
    scroll-behavior: smooth; /* Smooth scrolling for overflow */
}

    #character-stat-wrapper > div {
        padding: .125rem 0 .125rem 0; /* ~2px */
        
        margin: 0;
        text-align: left;
        width: 100%; /* Full width of the parent */
    }

        #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%;
    height:28rem;
    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;
   
}

    #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.empty {
    background-image: url("img/icons/item_slots/head.svg");
}

#tabs #equipped-items p.equip-slot.gloves.empty {
    background-image: url("img/icons/item_slots/gloves.svg");
}

#tabs #equipped-items p.equip-slot.belt.empty {
    background-image: url("img/icons/item_slots/belt.svg");
}

#tabs #equipped-items p.equip-slot.legs.empty {
    background-image: url("img/icons/item_slots/legs.svg");
}

#tabs #equipped-items p.equip-slot.boots.empty {
    background-image: url("img/icons/item_slots/boots.svg");
}

#menu-content {
    height: 28rem; /* ~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: 28rem; /* ~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;
    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: 28rem; /* ~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, #player-name-input, #character-select, #save-notes {
    border: 0.125rem solid #ccc;
    background-color: #2c672c80;
    color: #080;
}

.save-game-input, #save-notes {
    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: 28rem; /* ~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: 28rem; /* ~400px */
    width: 100%;
    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: 25rem; /* 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: 24rem; /* 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;
    }

#skills-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;
}

    #skills-tabs button.tab {
        padding: 0.125rem 0.625rem;
        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;
        flex: 1;
    }

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

#tabs #skills-items-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    width: 100%;
    height: 24rem;
    padding: 0.625rem;
    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 #skills-items-wrapper p {
        margin-bottom: 0.3125rem;
        line-height: 1.2;
    }

.mastery-card {
    background: rgba(0, 80, 0, 0.3);
    border: 1px solid #0f0;
    border-radius: 0.375rem;
    padding: 0.625rem;
    margin-bottom: 0.625rem;
}

.mastery-card-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.25rem;
}

.mastery-card-name {
    font-weight: bold;
    color: #0f0;
    font-size: 1rem;
}

.mastery-card-school {
    font-size: 0.75rem;
    color: #aaa;
}

.mastery-card-desc {
    color: #ccc;
    font-size: 0.8rem;
    margin-bottom: 0.375rem;
}

.mastery-card-stats {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    color: #aaa;
}

.mastery-card-stats strong {
    color: #0f0;
}

.skill-card {
    background: rgba(0, 60, 0, 0.3);
    border: 1px solid #2c672c;
    border-radius: 0.375rem;
    padding: 0.5rem 0.625rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.skill-card-icon-wrapper {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid #0f0;
    border-radius: 0.3125rem;
    padding: 1px;
    box-sizing: border-box;
}

.skill-card-icon {
    width: 100%;
    height: 100%;
    display: block;
    image-rendering: pixelated;
    border: 2px solid #222;
    cursor: grab;
}

.skill-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.skill-card-title-line {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
}

.skill-card-title-line .skill-card-name {
    font-weight: bold;
    color: #0f0;
    flex-shrink: 0;
}

.skill-card-title-line .skill-card-desc {
    color: #ccc;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.skill-card-title-line .skill-card-type {
    flex-shrink: 0;
    margin-left: auto;
    font-size: 0.75rem;
    color: #aaa;
}

.skill-card-stats {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem 1rem;
    font-size: 0.8rem;
    color: #aaa;
    white-space: nowrap;
}

.skill-card-stats strong {
    color: #0f0;
}

.skill-increment-wrap {
    display: inline-flex;
    align-items: baseline;
    gap: 0.15rem;
}

.skill-level-val {
    display: inline-block;
    min-width: 1.5rem;
    color: #0f0;
    font-weight: bold;
    text-align: right;
}

.skill-increment {
    width: 0.7rem;
    text-align: left;
    cursor: pointer;
    color: #0f0;
    font-weight: bold;
}

.skill-increment.hidden {
    width: 0.7rem;
    visibility: hidden;
}

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

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

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

#inventory-tabs, #shop-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, #shop-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, #shop-inventory-tabs button.tab {
            flex: 12;
        }

        #inventory-tabs button.sort, #shop-inventory-tabs button.sort {
            flex: 2;
        }

        #inventory-tabs button.active, #shop-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;
    height: 24rem; /* 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;
    min-width: 12rem; /* ~200px */
    max-width: 15rem; /* ~240px */
    max-height: 45rem;
    background: rgba(20, 30, 20, 1);
    border: 0.125rem solid #060; /* ~1px */
    border-radius: .625rem;
}

.tooltip-sellInfo {
    font-size: .6rem !important;
}

.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,
.shop-item .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,
    .shop-item img.item-icon.artifact {
        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,
.shop-item .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,
    .shop-item img.item-icon.relic {
        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,
.shop-item .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,
    .shop-item img.item-icon.legendary {
        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,
.shop-item .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,
    .shop-item img.item-icon.mastercraft {
        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,
.shop-item .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,
    .shop-item img.item-icon.magic {
        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,
.shop-item .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,
    .shop-item img.item-icon.rare {
        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,
.shop-item .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,
    .shop-item img.item-icon.common {
        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,
.shop-item .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,
    .shop-item img.item-icon.junk {
        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  */

/* Dialogue System Start */

/* Dialogue Window */
#dialogue-window {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 480px;
    height: 270px;
    background: rgba(25, 30, 20, 0.80);
    border: 2px solid #0f0;
    border-radius: 10px;
    color: #0f0;
    font-family: 'Verdana', Roboto, sans-serif;
    font-size: 14px;
    padding: 0;
    pointer-events: auto;
    z-index: 2100;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.sharp-text {
    text-shadow: -1px -1px 0 black, /* Top-left */
    1px -1px 0 black, /* Top-right */
    -1px 1px 0 black, /* Bottom-left */
    1px 1px 0 black; /* Bottom-right */
}

#dialogue-text {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: .625rem; /* Space between buttons */
    font-weight: 100;
   
    text-align: left;
   
    background: rgba(20, 25, 20, .90);
    border-radius: .625rem .625rem 0 0;
    padding: .625rem;
    overflow-y: auto; /* Allow scrolling if buttons overflow */
    scrollbar-color: #0f0 #111;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
}

#dialogue-buttons {
    display: flex;
    flex-direction: row;
    background: rgba(20, 25, 20, .80);
    flex-wrap: wrap;
    gap: .625rem; /* Space between buttons */
    border-top: 1px solid #00ff0066;
    align-items: center;
    justify-content: center; /* Center buttons horizontally */
    padding: .4rem;
    min-height: 2.75rem;
    max-height: 3.0rem; /* Default: 1 row for standard dialogues */
    overflow-y: auto; /* Allow scrolling if buttons overflow */
    scrollbar-color: #0f0 #111;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
}

/* Portal tier selection - 2 rows, more buttons visible */
#dialogue-buttons.portal-tier-buttons {
    padding: .25rem;
    min-height: 7.25rem;
    max-height: 7.5rem; /* ~2 rows instead of 1 */
    align-content: flex-start; /* Align rows to top */
}

#dialogue-close {
    background: #000;
    color: #0f0;
    border: 2px solid #0f0;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 16px;
    border-radius: 5px;
    
}

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

#dialogue-view-wares {
    background: #000;
    color: #0f0;
    border: 2px solid #0f0;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 16px;
    border-radius: 5px;
}

    #dialogue-view-wares:hover {
        background: #0f0;
        color: #000;
    }
/* Dialogue System END */

/* Shop Tab Styles */
/* Shop Tab Styles */
#shop-content {
    height: 28rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

#shop-left {
    display: flex;
    flex-direction: column;
    height: 28rem;
    width: 30%;
    margin-top: 0.625rem;
}

#shop-info {
    padding-bottom: 0.625rem;
}

    #shop-info p {
        font-size: .625rem;
        width: 100%;
        text-align: center;
        color: #0f0;
    }

#shop-items {
    width: 100%;
    height: 100%;
    padding: 0.625rem;
    border: 0.125rem solid #0f0;
    border-radius: .625rem;
    overflow-y: auto;
    scrollbar-color: #0f0 #111;
    scrollbar-width: thin;
    background: rgba(20, 30, 20, 0.7);
}

    #shop-items.drag-over {
        border-color: #0f0;
        border-width: 2px;
    }

#shop-inventory-wrapper {
    display: flex;
    flex-direction: column;
    height: 28rem;
    width: 68%;
    margin-top: 0.625rem;
}

    #shop-inventory-wrapper div.inventory-item {
        padding: 0;
        display: flex;
        flex-direction: column;
        min-height: 4.1rem;
        width: 4.1rem;
        margin: 0;
        box-sizing: border-box;
    }

#tabs #shop-inventory-wrapper-inner {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: flex-start;
    gap: 0.625rem;
    width: 100%;
    height: 24rem;
    padding: 0.625rem;
    border: 0.125rem solid #0f0;
    border-radius: 0px 0px .625rem .625rem;
    overflow-y: auto;
    scrollbar-color: #0f0 #111;
    scrollbar-width: thin;
    background: rgba(20, 30, 20, 0.7);
}

/* Shop Item Card */
.shop-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0.625rem;
    margin-bottom: 0.625rem;
    background: rgba(20, 30, 20, 0.7);
    border: 0.125rem solid #0f0;
    border-radius: 0.625rem;
    color: #0f0;
    font-size: 0.875rem;
}

.item-name {
    font-size: 1.125rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 0.3125rem;
}

.shop-item-details {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 0.625rem;
}

.shop-item-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 40%;
}

.shop-item-right {
    display: flex;
    flex-direction: column;
    width: 60%;
}

.tier-type {
    text-align: left;
    margin-bottom: 0.3125rem;
}

.item-stats, .item-affixes {
    text-align: left;
    margin-bottom: 0.3125rem;
    font-size: 0.75rem;
}

.item-price {
    text-align: center;
    margin: 0.3125rem 0;
    font-weight: bold;
}

.shop-item .item-icon {
    width: 4rem;
    height: 4rem;
    border: 0.125rem solid #0f0;
    border-radius: 0.3125rem;
    margin: 0.3125rem 0;
}

.buy-item {
    padding: 0.1625rem 0.625rem !important;
    margin-top: 0.3125rem;
    background: #2c672c;
    color: #000;
    border: 0.125rem solid #0f0;
    border-radius: 0.3125rem;
    cursor: pointer;
    font-size: 0.875rem;
}

    .buy-item:hover {
        background: #0f0;
    }

/* Tier-based coloring for shop items */
.shop-item .artifact {
    color: GoldenRod !important;
    border-color: GoldenRod !important;
}

.shop-item img.item-icon.artifact {
    background-color: GoldenRod !important;
}

.shop-item .relic {
    color: gold !important;
    border-color: gold !important;
}

.shop-item img.item-icon.relic {
    background-color: gold !important;
}

.shop-item .legendary {
    color: darkorange !important;
    border-color: darkorange !important;
}

.shop-item img.item-icon.legendary {
    background-color: darkorange !important;
}

.shop-item .mastercraft {
    color: darkmagenta !important;
    border-color: darkmagenta !important;
}

.shop-item img.item-icon.mastercraft {
    background-color: darkmagenta !important;
}

.shop-item .magic {
    color: blueviolet !important;
    border-color: Blueviolet !important;
}

.shop-item img.item-icon.magic {
    background-color: BlueViolet !important;
}

.shop-item .rare {
    color: blue !important;
    border-color: blue !important;
}

.shop-item img.item-icon.rare {
    background-color: blue !important;
}

.shop-item .common {
    color: #0f0 !important;
    border-color: #0f0 !important;
}

.shop-item img.item-icon.common {
    background-color: #0f0 !important;
}

.shop-item .junk {
    color: whitesmoke !important;
    border-color: whitesmoke !important;
}

.shop-item img.item-icon.junk {
    background-color: whitesmoke !important;
}


/* added in bugfix */

/* Stash Tab Styles - Mirror Shop Layout */
#stash-content {
    height: 28rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

#stash-left {
    display: flex;
    flex-direction: column;
    height: 28rem;
    width: 49%;
    margin-top: 0.625rem;
}

    #stash-left h2 {
        margin-bottom: 0.625rem;
        text-align: center;
    }

#stash-info {
    padding-bottom: 0.625rem;
}

    #stash-info h2 {
        margin-bottom: 0.3125rem;
    }

    #stash-info p {
        font-size: .625rem;
        width: 100%;
        text-align: center;
        color: #0f0;
        margin: 0.125rem 0;
    }

    #stash-info .stash-capacity {
        font-size: .875rem;
        font-weight: bold;
        color: #0f0;
    }

    #stash-info #sort-stash {
        width: 100%;
        padding: 0.3125rem;
        margin-top: 0.3125rem;
        background: #2c672c;
        color: #000;
        border: 0.125rem solid #0f0;
        border-radius: 0.3125rem;
        cursor: pointer;
    }

        #stash-info #sort-stash:hover {
            background: #0f0;
        }

#stash-items {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: flex-start;
    gap: 0.625rem;
    width: 100%;
    height: 24rem;
    padding: 0.625rem;
    border: 0.125rem solid #0f0;
    border-radius: 0px 0px .625rem .625rem;
    overflow-y: auto;
    scrollbar-color: #0f0 #111;
    scrollbar-width: thin;
    background: rgba(20, 30, 20, 0.7);
}

#stash-window-wrapper {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    border-radius: .625rem;
    background: rgba(20, 30, 20, 0.7);
}

#stash-tabs {
    padding: 0;
    margin: 0;
    border-radius: inherit;
    width: 100%;
    height: 1.75rem;
    display: flex;
    align-content: flex-start;
    gap: .325rem;
}

    #stash-tabs button {
        padding: 0.125rem 0.625rem;
        cursor: pointer;
        margin: 0;
        background: #2c672c;
        color: #000;
        border-bottom: none;
        border-radius: .325rem .325rem 0px 0px;
    }

        #stash-tabs button.tab {
            flex: 12;
        }

        #stash-tabs button.sort {
            flex: 2;
        }

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

#stash-inventory-wrapper {
    display: flex;
    flex-direction: column;
    height: 28rem;
    width: 49%;
    margin-top: 0.625rem;
}

    #stash-inventory-wrapper h2 {
        margin-bottom: 0.625rem;
        text-align: center;
    }

    #stash-inventory-wrapper div.inventory-item {
        padding: 0;
        display: flex;
        flex-direction: column;
        min-height: 4.1rem;
        width: 4.1rem;
        margin: 0;
        box-sizing: border-box;
    }

#stash-inventory-tabs {
    padding: 0;
    margin: 0;
    border-radius: inherit;
    width: 100%;
    height: 1.75rem;
    display: flex;
    align-content: flex-start;
    gap: .325rem;
}

    #stash-inventory-tabs button {
        padding: 0.125rem 0.625rem;
        cursor: pointer;
        margin: 0;
        background: #2c672c;
        color: #000;
        border-bottom: none;
        border-radius: .325rem .325rem 0px 0px;
    }

        #stash-inventory-tabs button.tab {
            flex: 12;
        }

        #stash-inventory-tabs button.sort {
            flex: 2;
        }

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

#tabs #stash-inventory-wrapper-inner {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: flex-start;
    gap: 0.625rem;
    width: 100%;
    height: 24rem;
    padding: 0.625rem;
    border: 0.125rem solid #0f0;
    border-radius: 0px 0px .625rem .625rem;
    overflow-y: auto;
    scrollbar-color: #0f0 #111;
    scrollbar-width: thin;
    background: rgba(20, 30, 20, 0.7);
}