/* Import a fantasy-style font */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap');

/* --- START OF SCALING MODIFICATION --- */
/* 
  Set the root font-size based on viewport width. 
  All other 'rem' units will scale relative to this.
  clamp(min, preferred, max)
  - 10px: The absolute smallest the font can get.
  - 0.8333vw: The ideal size (scales to 16px on a 1920px wide screen).
  - 16px: The absolute largest the font can get.
*/
html {
    font-size: clamp(10px, 1.2vh, 16px);
}

:root {
    /* Converted from 70px and 4px */
    --grid-cell-size: 4.375rem; 
    --grid-gap: 0.25rem;
}
/* --- END OF SCALING MODIFICATION --- */


/* Universal box-sizing for more predictable layouts */
* {
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #1a1a1a;
    background-image: radial-gradient(circle, #2c3e50, #1a1a1a 80%);
    color: #ecf0f1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 1.25rem; /* 20px */
    min-height: 100vh;
    margin: 0;
    /* MODIFICATION 1: Allow vertical scrolling if content wraps, but prevent horizontal scrollbars */
    overflow-y: auto;
    overflow-x: hidden;
}

h2, h3, h4 { font-family: 'Cinzel', serif; color: #f1c40f; text-shadow: 0.0625rem 0.0625rem 0.125rem #000; } /* 1px, 2px */
.panel p, .panel small {
    margin-top: 0;
    margin-bottom: 0.625rem; /* 10px */
}
.panel .view-sub-text {
    color: #ecf0f1; 
    margin: 0 0 0.625rem 0; /* 10px */
    padding: 0; 
}
.panel h4 + .view-sub-text {
    margin-top: -0.625rem; /* -10px */
    margin-bottom: 0.3125rem; /* 5px */
}
.panel .view-sub-text:has(+ .view-sub-text) {
    margin-bottom: 0.125rem; /* 2px */
}
.panel .view-sub-text b {
    color: #ecf0f1;
    font-weight: bold;
}
.panel small.view-sub-text {
    font-size: 0.85em;
    font-style: italic;
    color: #95a5a6; 
}

.game-container { 
    display: flex; 
    /* MODIFICATION 2: Allow panels to wrap and center them */
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem; /* 20px */
    width: 95%; 
    max-width: 112.5rem; /* 1800px */
    height: calc(100vh - 2.5rem); /* 40px */
    align-items: flex-start;
    position: relative; 
}
.panel { 
    background-color: rgba(30, 40, 50, 0.7); 
    padding: 1.25rem; 
    border-radius: 0.75rem; 
    box-shadow: 0 0.375rem 0.75rem rgba(0,0,0,0.5); 
    border: 0.0625rem solid #4a637e; 
    
    /* backdrop-filter: blur(0.3125rem); */ /* <-- COMMENT THIS LINE OUT */
    
    display: flex; 
    flex-direction: column; 
    overflow: hidden; 
    height: 100%; 
    min-height: 0; 
}
.left-panel { flex: 2; min-width: 25rem; } /* 400px */
.middle-panel { flex: 3; min-width: 41.25rem; } /* 660px */
.actions-panel { flex: 1.5; min-width: 15.625rem; } /* 250px */
.upgrades-panel { flex: 1.75; min-width: 18.75rem; } /* 300px */


button, select {
    font-family: 'Cinzel', serif; background: linear-gradient(145deg, #3498db, #2980b9); color: white; border: none; padding: 0.625rem 0.9375rem; border-radius: 0.3125rem; /* 10px, 15px, 5px */
    cursor: pointer; font-size: 1rem; transition: all 0.2s ease; box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.3); border-bottom: 0.125rem solid #20638f; margin: 0.3125rem; } /* 16px, 2px, 4px, 5px */
button:hover, select:hover { background: linear-gradient(145deg, #4aa9e8, #3a90c9); transform: translateY(-0.125rem); box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.3); } /* 2px, 4px, 8px */
button:active { transform: translateY(0.0625rem); box-shadow: 0 0.0625rem 0.125rem rgba(0,0,0,0.3); } /* 1px, 2px */
button:disabled, select:disabled { background: #7f8c8d; cursor: not-allowed; border-bottom: 0.125rem solid #6c7a7b; transform: none; box-shadow: none; } /* 2px */

select option {
    background-color: #2c3e50;
    color: white;
}

.control-group { display: flex; align-items: center; gap: 0.5rem; margin: 0 0.625rem; } /* 8px, 10px */

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem; /* 20px */
    flex-shrink: 0;
}
.panel-header h2, .panel-header h3 {
    margin: 0;
}

.icon-btn {
    background: transparent;
    border: none;
    box-shadow: none;
    color: #bdc3c7;
    font-size: 1.5em;
    padding: 0.3125rem; /* 5px */
    margin: 0;
    line-height: 1;
    width: 2.1875rem; /* 35px */
    height: 2.1875rem; /* 35px */
}
.icon-btn:hover {
    color: #f1c40f;
    transform: scale(1.1);
    background: transparent;
}
#settings-close-btn {
    font-size: 2em;
}

.accordion-item .accordion-header {
    background: #34495e;
    padding: 0.625rem 0.9375rem; /* 10px, 15px */
    border-radius: 0.3125rem; /* 5px */
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s, text-shadow 0.3s;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.accordion-item .accordion-header:hover {
    background: #4a637e;
}
.accordion-item .accordion-header.active {
    background: linear-gradient(145deg, #4a637e, #34495e);
    color: #f1c40f;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.accordion-item .accordion-header.active-fighting-realm {
    color: #2ecc71;
    text-shadow: 0 0 0.5rem #2ecc71; /* 8px */
}
.accordion-item .accordion-header::after {
    content: '\f078'; /* Font Awesome down arrow */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    transition: transform 0.3s ease;
}
.accordion-item .accordion-header.active::after {
    transform: rotate(180deg);
}
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    background-color: rgba(0,0,0,0.2);
    border: 0.0625rem solid #4a637e; /* 1px */
    border-top: none;
    border-radius: 0 0 0.3125rem 0.3125rem; /* 5px */
    padding: 0.9375rem; /* 15px */
}
/* --- END: Map Accordion System --- */

#map-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.625rem; padding: 0; } /* 10px */
#map-header h2 { margin: 0; }
#back-to-world-map-btn { padding: 0.3125rem 0.625rem; font-size: 0.875rem; margin: 0; } /* 5px, 10px, 14px */

#map-container { width: 100%; aspect-ratio: 16 / 9; background-image: url('images/world_map.png'); background-size: cover; background-position: center; position: relative; border-radius: 0.5rem; overflow: hidden; border: 0.125rem solid #4a637e; margin: 0; } /* 8px, 2px */
.map-node {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s ease;
    z-index: 1;
    /* --- FIX: Tell the browser to optimize this element for transforms --- */
    will-change: transform;
}
.map-node:hover { transform: translate(-50%, -50%) scale(1.1); }
.map-node.locked { cursor: not-allowed; filter: grayscale(80%) brightness(0.7); }
.map-node.locked:hover { transform: translate(-50%, -50%); }
.map-node-icon {
    width: 3.75rem; /* 60px */
    height: 3.75rem; /* 60px */
    background-color: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    object-fit: contain;
    filter: drop-shadow(0.125rem 0.125rem 0.1875rem rgba(0, 0, 0, 0.7)); /* 2px, 3px */
    -webkit-user-select: none;
    -ms-user-select: none;    
    user-select: none;        
}
.map-node-icon.locked { border-color: transparent; box-shadow: none; }
.map-node-icon.completed { border-color: transparent; box-shadow: none; }
.map-node-lock-icon, .map-node-completed-icon { position: absolute; top: -0.1875rem; right: -0.1875rem; font-size: 0.75rem; color: white; text-shadow: 0 0 0.1875rem black; background-color: rgba(0,0,0,0.5); border-radius: 50%; padding: 0.1875rem; } /* -3px, 12px, 3px */
.map-node-completed-icon { color: #2ecc71; }
.map-node-label {
    background-color: rgba(0,0,0,0.7);
    padding: 0.0625rem 0.3125rem; /* 1px, 5px */
    border-radius: 0.25rem; /* 4px */
    margin-top: 0.125rem; /* 2px */
    color: white;
    font-weight: bold;
    font-family: 'Cinzel', serif;
    font-size: 0.5625rem; /* 9px */
    white-space: nowrap;
    text-align: center;
    -webkit-user-select: none;
    -ms-user-select: none;    
    user-select: none;        
}
.map-node.active-zone .map-node-icon { animation: pulse-red 2s infinite; }
.map-node.active-fighting-zone .map-node-icon { animation: pulse-green-border 2s infinite; }
.map-node.boss-node .map-node-icon {
    width: 4.6875rem; /* 75px */
    height: 4.6875rem; /* 75px */
    border-width: 0;
    border-color: transparent;
    box-shadow: none;
}
.map-node.boss-node.locked .map-node-icon { border-color: transparent; box-shadow: none; }
.map-node.boss-node.completed .map-node-icon { border-color: transparent; box-shadow: none; }
.map-node.boss-node .map-node-label { 
    font-size: 0.625rem; 
    color: #e74c3c; 
    /* The text-shadow line has been removed */
}
@keyframes pulse-red {
  0% { filter: drop-shadow(0.125rem 0.125rem 0.1875rem rgba(0, 0, 0, 0.7)) drop-shadow(0 0 0.125rem rgba(231, 76, 60, 0.7)); } /* 2px, 3px */
  50% { filter: drop-shadow(0.125rem 0.125rem 0.1875rem rgba(0, 0, 0, 0.7)) drop-shadow(0 0 0.625rem rgba(231, 76, 60, 1)) drop-shadow(0 0 0.9375rem rgba(231, 76, 60, 0.5)); } /* 10px, 15px */
  100% { filter: drop-shadow(0.125rem 0.125rem 0.1875rem rgba(0, 0, 0, 0.7)) drop-shadow(0 0 0.125rem rgba(231, 76, 60, 0.7)); }
}

@keyframes pulse-green-border {
  0% { filter: drop-shadow(0.125rem 0.125rem 0.1875rem rgba(0, 0, 0, 0.7)) drop-shadow(0 0 0.125rem rgba(46, 204, 113, 0.7)); }
  50% { filter: drop-shadow(0.125rem 0.125rem 0.1875rem rgba(0, 0, 0, 0.7)) drop-shadow(0 0 0.625rem rgba(46, 204, 113, 1)) drop-shadow(0 0 0.9375rem rgba(46, 204, 113, 0.5)); }
  100% { filter: drop-shadow(0.125rem 0.125rem 0.1875rem rgba(0, 0, 0, 0.7)) drop-shadow(0 0 0.125rem rgba(46, 204, 113, 0.7)); }
}

.map-path-svg { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    pointer-events: none; 
    z-index: 0;
}
.map-path-line { fill: none; stroke: rgba(241, 196, 15, 0.7); stroke-width: 0.375rem; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 0.9375rem, 0.625rem; animation: dash-flow 60s linear infinite; } /* 6px, 15px, 10px */
@keyframes dash-flow { to { stroke-dashoffset: -1000; } }

#modal-backdrop { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(0,0,0,0.7); 
    z-index: 10003; /* <<< CHANGE THIS VALUE from 10002 to 10003 */
    display: flex; 
    justify-content: center; 
    align-items: center; 
}
#modal-content { background-color: #2c3e50; padding: 1.5625rem; border-radius: 0.75rem; border: 0.125rem solid #f1c40f; box-shadow: 0 0 1.25rem rgba(241, 196, 15, 0.5); min-width: 21.875rem; text-align: center; } /* 25px, 12px, 2px, 20px, 350px */
#modal-body { margin: 1.25rem 0; display: flex; flex-direction: column; gap: 0.9375rem; } /* 20px, 15px */
#modal-close-btn { margin-top: 0.9375rem; background: #c0392b; border-bottom-color: #922b21; } /* 15px */

#monster-area {
    flex-shrink: 0;
    position: relative;
    padding: 0.9375rem; /* 15px */
    border-radius: 0.5rem; /* 8px */
    background-size: cover;
    background-position: center;
    box-shadow: inset 0 0 0.625rem rgba(0,0,0,0.7); /* 10px */
}

#monster-info {
    font-family: 'Cinzel', serif;
    color: #f1c40f;
    text-shadow: 0.0625rem 0.0625rem 0.125rem #000; /* 1px, 2px */
    text-align: center;
    font-size: 1.2em;
    margin-bottom: 0.3125rem; /* 5px */
    -webkit-user-select: none;
    -ms-user-select: none;    
    user-select: none;        
}

#monster-display { 
    position: relative; 
    width: 12.5rem; /* 200px */
    height: 12.5rem; /* 200px */
    margin: 0.625rem auto; /* 10px */
    z-index: 1;
}
#monster-image {
    width: 100%;
    height: 100%;
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.2s ease;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;    
    user-select: none;        
}
.monster-hit { animation: monster-hit-anim 0.2s ease; }
@keyframes monster-hit-anim { 0% { transform: scale(1); } 50% { transform: scale(0.9); filter: brightness(1.5); } 100% { transform: scale(1); } }
#monster-image.boss-image { transform: scale(1.3); }
#monster-image.boss-image.monster-hit { animation: boss-hit-anim 0.2s ease; }
@keyframes boss-hit-anim { 0% { transform: scale(1.3); } 50% { transform: scale(1.2); filter: brightness(1.5); } 100% { transform: scale(1.3); } }
#monster-health-bar-container {
    background-color: #1a1a1a;
    border-radius: 0.3125rem; /* 5px */
    overflow: hidden;
    height: 1.5625rem; /* 25px */
    border: 0.125rem solid #4a637e; /* 2px */
    box-shadow: inset 0 0 0.3125rem rgba(0,0,0,0.5); /* 5px */
    position: relative;
}
#monster-health-bar { height: 100%; width: 100%; background: linear-gradient(to right, #2ecc71, #27ae60); transition: width 0.2s linear, background 0.5s linear; }
#monster-health-text {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    line-height: 1.5625rem; /* 25px */
    font-size: 0.875rem; /* 14px */
    color: white;
    text-shadow: 0.0625rem 0.0625rem 0.125rem #000; /* 1px, 2px */
    text-align: center;
    pointer-events: none;
    -webkit-user-select: none;
    -ms-user-select: none;    
    user-select: none;        
}
#popup-container { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    pointer-events: none; 
    z-index: 10;
}
.damage-popup { position: absolute; font-size: 1.5rem; font-weight: bold; color: #f1c40f; text-shadow: 0.125rem 0.125rem 0.125rem #000; animation: float-up 1s ease-out forwards; user-select: none; } /* 24px, 2px */
.gold-popup { position: absolute; font-size: 1.25rem; font-weight: bold; color: #ffd700; animation: float-up 1.5s ease-out forwards; user-select: none; } /* 20px */
.dps-popup { position: absolute; font-size: 1.25rem; font-weight: bold; color: #ffffff; text-shadow: 0.125rem 0.125rem 0.125rem #000; animation: float-up 0.8s ease-out forwards; user-select: none; } /* 20px, 2px */
.poison-popup { position: absolute; font-size: 1.4rem; font-weight: bold; color: #6ab04c; text-shadow: 0.0625rem 0.0625rem 0.125rem #000; animation: float-up-poison 0.8s ease-out forwards; user-select: none; } /* 22.4px, 1px, 2px */


.item-drop-wrapper {
    position: fixed; /* Changed from absolute */
    width: 5rem; /* 80px */
    height: 5rem; /* 80px */
    z-index: 10006; /* Must be on top of animation container */
    animation: item-drop-path 1.5s ease-out forwards;
    transform: translate(-50%, -50%); /* Center the wrapper on its coordinates */
}
.item-drop-wrapper.boss-unique-drop {
    width: 10rem; /* 160px */
    height: 10rem; /* 160px */
}
.item-drop-animation {
    width: 100%;
    height: 100%;
    animation: continuous-spin 1.5s linear infinite;
}
.sparkle-animation {
    animation-name: continuous-spin, sparkle;
    animation-duration: 1.5s, 0.5s;
    animation-timing-function: linear, linear;
    animation-iteration-count: infinite, infinite;
}

@keyframes float-up { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-6.25rem); opacity: 0; } } /* 100px */
@keyframes float-up-poison { 0% { transform: translate(0, 0) scale(0.9); opacity: 1; } 100% { transform: translate(1.25rem, -5rem) scale(1.1); opacity: 0; } } /* 20px, 80px */

/* --- START OF CORRECTED ANIMATION --- */
@keyframes item-drop-path {
    0% {
        left: var(--start-x);
        top: var(--start-y);
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 1;
    }
    50% {
        left: var(--peak-x);
        top: var(--peak-y);
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 1;
        animation-timing-function: cubic-bezier(0.3, 0, 0.8, 0.2);
    }
    100% {
        left: var(--end-x);
        top: var(--end-y);
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0;
    }
}
/* --- END OF CORRECTED ANIMATION --- */

@keyframes continuous-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(720deg); }
}
@keyframes sparkle {
    0%, 100% {
        filter: drop-shadow(0 0 0.125rem #fff) drop-shadow(0 0 0.3125rem #f1c40f) drop-shadow(0 0 0.5rem #e67e22); /* 2px, 5px, 8px */
    }
    50% {
        filter: drop-shadow(0 0 0.3125rem #fff) drop-shadow(0 0 0.625rem #f1c40f) drop-shadow(0 0 0.9375rem #e67e22) brightness(1.2); /* 5px, 10px, 15px */
    }
}

.damage-popup.crit { font-size: 2rem; color: #e74c3c; animation: float-up 1.2s ease-out forwards; } /* 32px */
.dps-popup.crit { font-size: 1.625rem; color: #f39c12; } /* 26px */
.info-popup { position: absolute; font-family: 'Cinzel', serif; font-weight: bold; text-shadow: 0.125rem 0.125rem 0.25rem #000; animation: float-up 2s ease-out forwards; user-select: none; } /* 2px, 4px */


.tabs { display: flex; border-bottom: 0.125rem solid #4a637e; margin-bottom: 0.9375rem; } /* 2px, 15px */
.tab-button { flex-grow: 1; padding: 0.625rem; margin: 0; border-radius: 0.3125rem 0.3125rem 0 0; border-bottom: none; background: #34495e; font-size: 1em; } /* 10px, 5px */
.tab-button.active { background: linear-gradient(145deg, #4a637e, #34495e); color: #f1c40f; }
.view { display: none; }
.view.active { display: flex; flex-direction: column; flex-grow: 1; min-height: 0; }

#currency-display { display: flex; flex-wrap: wrap; justify-content: space-around; background-color: rgba(0,0,0,0.3); padding: 0.625rem; border-radius: 0.5rem; margin-bottom: 1.25rem; border: 0.0625rem solid #4a637e; gap: 0.5rem 1rem; }
#currency-display p { margin: 0; font-size: 1.2em; font-family: 'Cinzel', serif; flex-basis: 45%; }
#currency-display i {
    margin-right: 0.5rem;
    color: #f1c40f;
    width: 1.25rem; /* ADD THIS: Gives all icons a consistent width */
    text-align: center; /* ADD THIS: Centers the icon within the new width */
}
/* Currency Milestone Colors */
.currency-tier-0 { color: #ecf0f1; text-shadow: none; }
.currency-tier-1 { color: #2ecc71; text-shadow: none; } /* K */
.currency-tier-2 { color: #3498db; text-shadow: none; } /* M */
.currency-tier-3 { color: #9b59b6; text-shadow: 0 0 0.4375rem #8e44ad; } /* 7px */
.currency-tier-4 { color: #f1c40f; text-shadow: 0 0 0.5rem #f39c12; } /* 8px */
.currency-tier-5 { color: #e74c3c; text-shadow: 0 0 0.5625rem #c0392b; } /* 9px */
.currency-tier-6 { color: #1abc9c; text-shadow: 0 0 0.625rem #16a085; } /* 10px */


#bottom-view-controls { 
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 0.9375rem;  /* 15px */
    margin-bottom: 0.9375rem;  /* 15px */
    flex-shrink: 0; 
}
.toggle-control-group {
    display: flex;
    align-items: center;
    gap: 0.625rem; /* 10px */
}
.toggle-switch-img {
    height: 1.875rem; /* 30px */
    cursor: pointer;
    transition: transform 0.2s, filter 0.2s;
}
.toggle-switch-img:hover {
    transform: scale(1.1);
    filter: brightness(1.2);
}

#toggle-loot-log-btn { width: 50%; margin: 0; background: #34495e; }
#toggle-loot-log-btn.active { background: linear-gradient(145deg, #4a637e, #34495e); color: #f1c40f; }

#game-log-container, #loot-view { flex-grow: 1; display: flex; flex-direction: column; min-height: 0; }
#game-log-container { position: relative; }
#game-log { 
    flex-grow: 1; 
    overflow-y: auto; 
    background-color: rgba(0,0,0,0.2); 
    padding: 0.625rem; /* 10px */
    border-radius: 0.5rem; /* 8px */
    border: 0.0625rem solid #4a637e; /* 1px */
}

#game-log p.log-entry {
    line-height: 1.4;
}

#game-log p.log-entry > b {
    font-weight: bold;
}

#game-log p.uncommon { text-shadow: 0 0 0.3125rem #2ecc71; } /* 5px */
#game-log p.rare { text-shadow: 0 0 0.3125rem #3498db; } /* 5px */
#game-log p.epic { text-shadow: 0 0 0.375rem #3498db; } /* 6px */
#game-log p.legendary { text-shadow: 0 0 0.4375rem #f39c12; } /* 7px */

#game-log .golden-streak-text {
    color: #f1c40f;
    font-weight: normal;
    text-shadow: none;
}


#hero-level-info { margin-bottom: 1.25rem; } /* 20px */
#hero-xp-bar-container { width: 100%; height: 1.5625rem; background-color: #1a1a1a; border: 0.125rem solid #4a637e; border-radius: 0.3125rem; position: relative; text-align: center; } /* 25px, 2px, 5px */
#hero-xp-bar { height: 100%; background: linear-gradient(to right, #9b59b6, #8e44ad); transition: width 0.5s ease-in-out; }
#hero-xp-text { position: absolute; top: 0; left: 0; right: 0; line-height: 1.5625rem; font-size: 0.875rem; color: white; text-shadow: 0.0625rem 0.0625rem 0.125rem #000; } /* 25px, 14px, 1px, 2px */
#attributes-area { background-color: rgba(0,0,0,0.2); border-radius: 0.3125rem; padding: 0.9375rem; margin-top: 0.625rem; } /* 5px, 15px, 10px */
.attribute-row { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 0.625rem; /* 10px */
    font-size: 1em; 
}

.attribute-buy-btn {
    padding: 0.5rem 1rem; /* 8px, 16px */
    font-size: 1em;    
    line-height: 1;
    margin: 0;
    min-width: 5rem; /* 80px */
    text-align: center;
}

.attribute-buy-btn:not(:disabled) { 
    background: linear-gradient(145deg, #27ae60, #2ecc71); 
    border-bottom-color: #229954; 
    animation: pulse-green 2s infinite; 
}

@keyframes pulse-green { 0% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7); } 70% { box-shadow: 0 0 0 0.625rem rgba(46, 204, 113, 0); } 100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); } } /* 10px */

#derived-stats-area {
    background-color: rgba(0,0,0,0.2);
    border-radius: 0.3125rem; /* 5px */
    padding: 0.9375rem; /* 15px */
    margin-top: 0.625rem; /* 10px */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9375rem; /* 15px */
}
#derived-stats-area p, #equipment-stats-list p, #absorbed-stats-list .prestige-stat-entry {
    margin: 0;
    font-family: 'Cinzel', serif;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem; /* 2px */
}
#derived-stats-area p span, #equipment-stats-list p span, #absorbed-stats-list .prestige-stat-entry span {
    display: flex;
    align-items: center;
    gap: 0.625rem; /* 10px */
    font-size: 1.1em;
}
#derived-stats-area small, #equipment-stats-list small, #absorbed-stats-list small {
    font-size: 0.7em;
    color: #bdc3c7;
    margin-left: 1.875rem; /* 30px */
}
#derived-stats-area i, #equipment-stats-list i, #absorbed-stats-list i {
    color: #f1c40f;
    width: 1.25rem; /* 20px */
    text-align: center;
}

#prestige-stats-area { 
    background-color: rgba(0,0,0,0.2); 
    border-radius: 0.3125rem; /* 5px */
    padding: 0.9375rem; /* 15px */
    margin-top: 0.625rem; /* 10px */
}
#absorbed-stats-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem; /* 12px */
}
#absorbed-stats-list .prestige-stat-entry {
    gap: 0;
}
#absorbed-stats-list .prestige-stat-text {
    flex-grow: 1;
    justify-content: space-between;
}
#absorbed-stats-list .prestige-stat-text .toggle-switch-img {
    height: 1.5rem; /* 24px */
}


#loot-view { padding-top: 0; }
#loot-table-display { display: flex; flex-direction: column; gap: 0.5rem; background-color: rgba(0,0,0,0.2); padding: 0.625rem; border-radius: 0.3125rem; margin-top: 0.625rem; overflow-y: auto; flex-grow: 1; } /* 8px, 10px, 5px */
.loot-table-entry { display: flex; align-items: center; gap: 0.9375rem; padding: 0.3125rem; background-color: rgba(0,0,0,0.2); border-radius: 0.3125rem; border: 0.0625rem solid transparent; } /* 15px, 5px, 1px */
.loot-item-icon { width: 2.5rem; height: 2.5rem; background-color: rgba(0,0,0,0.4); border: 0.0625rem solid #4a637e; border-radius: 0.5rem; padding: 0.3125rem; object-fit: contain; flex-shrink: 0; } /* 40px, 1px, 8px, 5px */
.loot-item-details { flex-grow: 1; }
.loot-item-details .item-name { font-weight: bold; }
.loot-item-details .drop-chance { font-size: 0.9em; color: #bdc3c7; }

#equipment-view-content {
    display: flex;
    flex-direction: row;
    gap: 1.25rem; /* 20px */
    height: 100%;
    align-items: flex-start;
}

#equipment-info-column {
    flex: 0 0 12.5rem; /* 200px */
    display: flex;
    flex-direction: column;
    gap: 1.25rem; /* 20px */
}

#preset-controls {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#preset-controls h4 {
    margin: 0 0 0.3125rem 0; /* 5px */
}

#preset-controls .preset-btn {
    width: 80%;
}

#equipment-stats-summary {
    background-color: rgba(0,0,0,0.2);
    border-radius: 0.5rem; /* 8px */
    border: 0.0625rem solid #4a637e; /* 1px */
    padding: 0.9375rem; /* 15px */
    width: 100%;
}

#equipment-stats-summary h4 {
    margin-top: 0;
    margin-bottom: 0.625rem; /* 10px */
}

#equipment-stats-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem; /* 12px */
}

#equipment-paperdoll {
    flex-grow: 1;
    position: relative;
    width: 100%;
    max-width: 25rem; /* 400px */
    margin: 0 auto;
    aspect-ratio: 400 / 600;
    background-image: url('images/paperdoll-bg.png');
    background-size: contain;
    background-position: top center;
    background-repeat: no-repeat;
}

.equipment-slot { position: absolute; background-color: rgba(0, 0, 0, 0.5); border: 0.0625rem solid #4a637e; box-shadow: inset 0 0 0.625rem rgba(0,0,0,0.7); border-radius: 0.5rem; display: flex; justify-content: center; align-items: center; } /* 1px, 10px, 8px */
.equipment-slot:hover { background-color: rgba(0, 0, 0, 0.3); border-color: #f1c40f; }

/* --- Proportional Equipment Slot Sizes --- */
#slot-helmet, #prestige-slot-helmet, #unlock-slot-helmet, #view-slot-helmet { width: 24%; height: 16%; top: 7%; left: 50%; transform: translateX(-50%); }
#slot-necklace, #prestige-slot-necklace, #unlock-slot-necklace, #view-slot-necklace { width: 24%; height: 16%; top: 7%; right: 13%; }
#slot-platebody, #prestige-slot-platebody, #unlock-slot-platebody, #view-slot-platebody { width: 24%; height: 24%; top: 24%; left: 50%; transform: translateX(-50%); }
#slot-sword, #prestige-slot-sword, #unlock-slot-sword, #view-slot-sword { width: 24%; height: 24%; top: 24%; left: 13%; }
#slot-shield, #prestige-slot-shield, #unlock-slot-shield, #view-slot-shield { width: 24%; height: 24%; top: 24%; right: 13%; }
#slot-platelegs, #prestige-slot-platelegs, #unlock-slot-platelegs, #view-slot-platelegs { width: 24%; height: 24%; top: 58%; left: 50%; transform: translateX(-50%); }
#slot-belt, #prestige-slot-belt, #unlock-slot-belt, #view-slot-belt { width: 24%; height: 8%; top: 49%; left: 50%; transform: translateX(-50%); }
#slot-ring1, #prestige-slot-ring1, #unlock-slot-ring1, #view-slot-ring1 { width: 12%; height: 8%; top: 49%; left: 25%; }
#slot-ring2, #prestige-slot-ring2, #unlock-slot-ring2, #view-slot-ring2 { width: 12%; height: 8%; top: 49%; right: 25%; }


.equipment-slot .item-icon { width: 90%; height: 90%; object-fit: contain; -webkit-user-drag: none; cursor: pointer; opacity: 1; }
.equipment-slot .placeholder-icon { width: 60%; height: 60%; opacity: 0.5; filter: invert(100%) brightness(0.8); }

/* --- UNIFIED GRID SYSTEM --- */
.grid-scroll-container { 
    flex-grow: 1; 
    overflow-y: auto; 
    background-color: rgba(0,0,0,0.3); 
    padding: 0.625rem; /* 10px */
    border-radius: 0.3125rem; /* 5px */
    margin-top: 0.625rem; /* 10px */
}

.item-grid { 
    display: grid; 
    grid-template-columns: repeat(8, 1fr); /* 8 flexible columns that always fit */
    gap: var(--grid-gap); 
    background-color: #1c2833; 
    background-image: linear-gradient(to right, #2f3e4e 0.0625rem, transparent 0.0625rem), linear-gradient(to bottom, #2f3e4e 0.0625rem, transparent 0.0625rem); 
    background-position: -0.0625rem -0.0625rem; 
    min-height: calc(10 * (var(--grid-cell-size) + var(--grid-gap))); /* Keep the tall container */
    /* background-size will be set by JS */
}

.item-wrapper { 
    cursor: pointer; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    transition: transform 0.2s ease, box-shadow 0.2s ease; 
    padding: 0.125rem; /* 2px */
    /* aspect-ratio has been removed to support rectangular items */
}
.item-wrapper:hover { transform: scale(1.05); z-index: 10; }
.item-wrapper:hover .item { border-color: #f1c40f; }

.item { width: 100%; height: 100%; padding: 0.3125rem; border-radius: 0.5rem; background: rgba(0, 0, 0, 0.4); text-align: left; transition: all 0.2s ease; box-shadow: inset 0 0 0.5rem rgba(0,0,0,0.7); position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; } /* 5px, 8px */
.item-header, .item ul { display: none; }
.item-bg-icon { display: none; }
.item-icon { width: 90%; height: 90%; object-fit: contain; }

.common { border: 0.125rem solid #bdc3c7; } /* 2px */
.uncommon { border: 0.125rem solid #2ecc71; box-shadow: 0 0 0.3125rem #2ecc71; } /* 2px, 5px */
.rare { border: 0.125rem solid #3498db; box-shadow: 0 0 0.5rem #3498db; } /* 2px, 8px */
.epic { border: 0.125rem solid #9b59b6; box-shadow: 0 0 0.75rem #9b59b6; } /* 2px, 12px */
.legendary { border: 0.125rem solid #f39c12; box-shadow: 0 0 0.9375rem #f39c12; animation: legendary-glow 2s ease-in-out infinite alternate; } /* 2px, 15px */
.gem-quality { border: 0.125rem solid #c0392b; box-shadow: 0 0 0.75rem #e74c3c; } /* 2px, 12px */

@keyframes legendary-glow { from { box-shadow: 0 0 0.3125rem #f39c12; } to { box-shadow: 0 0 1.25rem #f0b75a; } } /* 5px, 20px */
.selected-for-prestige { box-shadow: 0 0 0.9375rem #f1c40f !important; } /* 15px */
.equipment-slot.selected-for-prestige { border: 0.125rem solid #f1c40f; box-shadow: 0 0 0.9375rem #f1c40f !important; } /* 2px, 15px */
.hidden { display: none !important; }
#prestige-button:not(:disabled) { animation: pulse 2s infinite; background: linear-gradient(145deg, #f1c40f, #e67e22); border-bottom: 0.125rem solid #d35400; } /* 2px */

@keyframes pulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(241, 196, 15, 0.7); } 70% { box-shadow: 0 0 0 0.625rem rgba(241, 196, 15, 0); } 100% { box-shadow: 0 0 0 0 rgba(241, 196, 15, 0); } } /* 10px */

#upgrades-area { margin-top: 1.25rem; padding-top: 0.9375rem; border-top: 0.0625rem solid #4a637e; } /* 20px, 15px, 1px */
.upgrade-button { background: linear-gradient(145deg, #2c3e50, #34495e); border: 0.0625rem solid #7f8c8d; padding: 0.625rem; margin-bottom: 0.625rem; border-radius: 0.3125rem; cursor: pointer; text-align: center; transition: all 0.2s ease; position: relative; padding-right: 3.75rem; } /* 1px, 10px, 5px, 60px */
.upgrade-button:hover { border-color: #f1c40f; transform: scale(1.02); }
.upgrade-button.disabled { background: #566573; color: #95a5a6; cursor: not-allowed; border-color: #566573; }
.upgrade-button.disabled:hover { transform: none; }
.upgrade-button.disabled .buy-max-btn { background-color: #95a5a6; cursor: not-allowed; }
.upgrade-button p { margin: 0 0 0.3125rem 0; font-weight: bold; } /* 5px */
.inventory-actions { display: flex; flex-wrap: wrap; justify-content: space-around; margin-bottom: 0.9375rem; } /* 15px */
#auto-salvage-filter-btn.btn-pressed {
    background: linear-gradient(145deg, #27ae60, #2ecc71);
    border-bottom-color: #229954;
    box-shadow: 0 0 0.5rem #2ecc71; /* 8px */
    transform: translateY(1px);
}


.buy-max-btn { position: absolute; top: 50%; right: 0.625rem; transform: translateY(-50%); background-color: #f1c40f; color: #1a1a1a; padding: 0.5rem 0.75rem; border-radius: 0.3125rem; font-weight: bold; font-size: 0.875rem; cursor: pointer; transition: background-color 0.2s; } /* 10px, 8px, 12px, 5px, 14px */
.buy-max-btn:hover { background-color: #f39c12; }

.lock-icon { position: absolute; top: 0.3125rem; right: 0.3125rem; font-size: 1.1em; color: #bdc3c7; text-shadow: 0.0625rem 0.0625rem 0.125rem #000; padding: 0.3125rem; z-index: 10; transition: all 0.2s ease; opacity: 0.7; } /* 5px, 1px, 2px */
.lock-icon:hover { color: #f1c40f; transform: scale(1.2); opacity: 1; }
#equipment-paperdoll .lock-icon { display: none; }
.item-wrapper.locked-item .item { box-shadow: 0 0 0.625rem #7f8c8d, inset 0 0 0.5rem rgba(0,0,0,0.7); } /* 10px, 8px */
body.salvage-mode-active .item-grid .item-wrapper:not(.locked-item) { animation: salvage-pulse 1.5s infinite alternate; }
@keyframes salvage-pulse { from { box-shadow: 0 0 0.3125rem rgba(231, 76, 60, 0.5); } to   { box-shadow: 0 0 0.9375rem rgba(231, 76, 60, 1); } } /* 5px, 15px */
#salvage-mode-btn.active { background: #c0392b; border-bottom-color: #922b21; }
#confirm-salvage-btn { background: linear-gradient(145deg, #27ae60, #2ecc71); border-bottom-color: #229954; }

#salvage-by-rarity-controls { border-top: 0.0625rem solid #4a637e; padding-top: 0.9375rem; margin-top: 0.9375rem; } /* 1px, 15px */
.salvage-rarity-btn { padding: 0.5rem 0.75rem; font-size: 0.875rem; } /* 8px, 12px, 14px */
.salvage-rarity-btn[data-rarity="common"] { background: #bdc3c7; border-bottom-color: #a1a6a9; color: #1a1a1a; }
.salvage-rarity-btn[data-rarity="uncommon"] { background: #2ecc71; border-bottom-color: #25a25a; }
.salvage-rarity-btn[data-rarity="rare"] { background: #3498db; border-bottom-color: #2980b9; }

#save-indicator { position: fixed; bottom: 1.25rem; right: 1.25rem; background-color: #2ecc71; color: white; padding: 0.625rem 1.25rem; border-radius: 0.3125rem; box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.3); z-index: 2000; opacity: 0; transition: opacity 0.5s ease-in-out; pointer-events: none; } /* 20px, 10px, 5px, 4px, 8px */
#save-indicator.visible { opacity: 1; }

#item-tooltip { position: fixed; width: auto; min-width: 13.75rem; background-color: rgba(10, 15, 20, 0.95); border: 0.0625rem solid #f1c40f; border-radius: 0.5rem; box-shadow: 0 0.375rem 0.75rem rgba(0,0,0,0.5); padding: 0.625rem; z-index: 10003; pointer-events: none; backdrop-filter: blur(0.3125rem); transition: opacity 0.1s ease; } /* 220px, 1px, 8px, 6px, 12px, 10px, 5px */
#item-tooltip .item-header { font-size: 1em; padding-bottom: 0.3125rem; border-bottom: 0.0625rem solid #4a637e; margin-bottom: 0.3125rem; display: block !important; } /* 5px, 1px */
#item-tooltip ul { list-style: none; padding: 0; margin: 0; font-size: 0.9em; display: block !important; }
#item-tooltip.common { border-color: #bdc3c7; }
#item-tooltip.uncommon { border-color: #2ecc71; }
#item-tooltip.rare { border-color: #3498db; }
#item-tooltip.epic { border-color: #9b59b6; }
#item-tooltip.legendary { border-color: #f39c12; }
#item-tooltip.gem-quality { border-color: #c0392b; }
#item-tooltip .item-header .common { color: #bdc3c7; border: none; box-shadow: none; text-shadow: none; }
#item-tooltip .item-header .uncommon { color: #2ecc71; border: none; box-shadow: none; text-shadow: none; }
#item-tooltip .item-header .rare { color: #3498db; border: none; box-shadow: none; text-shadow: none; }
#item-tooltip .item-header .epic { color: #9b59b6; border: none; box-shadow: none; text-shadow: none; }
#item-tooltip .item-header .legendary { color: #f1c40f; border: none; box-shadow: none; text-shadow: none; animation: none; }
#item-tooltip .item-header.gem-tooltip { color: #e74c3c; border: none; box-shadow: none; text-shadow: 0 0 0.3125rem #c0392b; } /* 5px */
#item-tooltip .stat-better { color: #2ecc71; font-weight: bold; }
#item-tooltip .stat-worse { color: #e74c3c; font-weight: bold; }
#item-tooltip.simple-tooltip {
    min-width: unset;
}
.tooltip-shift-hint { font-size: 0.8em; color: #7f8c8d; font-style: normal; font-weight: normal; }
.tooltip-subheader {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.9em;
    color: #95a5a6;
    margin-bottom: 0.5rem; /* 8px */
}
#item-tooltip .possible-stats-header {
    margin-top: 0.5rem; /* 8px */
    font-size: 0.9em;
    color: #bdc3c7;
    font-style: italic;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tooltip-comparison-container, .tooltip-ring-comparison { display: flex; gap: 0.9375rem; } /* 15px */
.tooltip-comparison-container > div, .tooltip-ring-comparison > div { flex: 1; }
.tooltip-comparison-container > div:first-child { 
    padding-right: 0.9375rem; /* 15px */
    border-right: 0.0625rem solid #4a637e; /* 1px */
}
.tooltip-ring-comparison {
    margin-top: 0.5rem; /* 8px */
    padding-top: 0.5rem; /* 8px */
    border-top: 0.0625rem solid #4a637e; /* 1px */
}
.tooltip-ring-comparison > div:not(:last-child) {
    padding-right: 0.625rem; /* 10px */
    border-right: 0.0625rem solid #4a637e; /* 1px */
}

/* CORRECTED: Styles for Gem Stat breakdown in tooltip */
.tooltip-gem-stats {
    margin-top: 0.625rem; /* 10px */
    padding-top: 0.625rem; /* 10px */
    border-top: 0.0625rem solid #4a637e; /* 1px */
}
.tooltip-gem-stats-header {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* 8px */
    font-size: 0.9em;
    color: #bdc3c7;
    margin-bottom: 0.3125rem; /* 5px */
}
.tooltip-gem-stats-header img {
    width: 1.25rem; /* 20px */
    height: 1.25rem; /* 20px */
}
.tooltip-gem-stats ul {
    list-style: none;
    padding-left: 1.75rem; /* 28px */
    margin: 0 0 0.3125rem 0; /* 5px */
    font-size: 0.85em;
}
.tooltip-gem-stats li {
    color: #3498db; 
}
.tooltip-gem-stats li.stat-special {
    color: #9b59b6;
    font-style: italic;
}


h5 { margin: 0 0 0.3125rem 0; font-size: 0.9em; color: #95a5a6; } /* 5px */
h5 > span { font-weight: bold; }
h5 .common { color: #bdc3c7; }
h5 .uncommon { color: #2ecc71; }
h5 .rare { color: #3498db; }
h5 .epic { color: #9b59b6; }
h5 .legendary { color: #f39c12; }

.unique-item-name { color: #f39c12 !important; text-shadow: 0 0 0.3125rem #f39c12; } /* 5px */

.tooltip-unique-effect {
    margin-top: 0.625rem; /* 10px */
    padding-top: 0.625rem; /* 10px */
    border-top: 0.0625rem solid #f39c12; /* 1px */
}
.tooltip-unique-effect h4 {
    margin: 0 0 0.3125rem 0; /* 5px */
    color: #f1c40f;
    text-shadow: 0 0 0.3125rem #f39c12; /* 5px */
}
.tooltip-unique-effect p {
    margin: 0;
    font-size: 0.9em;
    color: #ecf0f1;
}

#stat-tooltip { position: fixed; width: auto; min-width: 15rem; background-color: rgba(10, 15, 20, 0.95); border: 0.0625rem solid #7f8c8d; border-radius: 0.5rem; box-shadow: 0 0.375rem 0.75rem rgba(0,0,0,0.5); padding: 0.9375rem; z-index: 9999; pointer-events: none; backdrop-filter: blur(0.3125rem); font-size: 0.95em; line-height: 1.5; } /* 240px, 1px, 8px, 6px, 12px, 15px, 5px */
#stat-tooltip h4 { margin: 0 0 0.625rem 0; padding-bottom: 0.3125rem; border-bottom: 0.0625rem solid #4a637e; } /* 10px, 5px, 1px */
#stat-tooltip ul { list-style: none; padding: 0; margin: 0; }
.preset-btn.active { background: linear-gradient(145deg, #e67e22, #f1c40f); border-bottom-color: #d35400; box-shadow: 0 0 0.5rem #f1c40f; } /* 8px */
.equipment-slot.ring-equip-pending { border-color: #f1c40f; box-shadow: 0 0 0.9375rem #f1c40f; animation: pulse 2s infinite; } /* 15px */
#ring-selection-modal-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); z-index: 10001; display: flex; justify-content: center; align-items: center; }
#ring-selection-modal { background-color: #2c3e50; padding: 1.5625rem; border-radius: 0.75rem; border: 0.125rem solid #f1c40f; box-shadow: 0 0 1.25rem rgba(241, 196, 15, 0.5); width: 90%; max-width: 31.25rem; text-align: center; } /* 25px, 12px, 2px, 20px, 500px */
#ring-selection-title { margin-top: 0; }
#ring-selection-options { display: flex; justify-content: space-around; gap: 1.25rem; margin: 1.5625rem 0; } /* 20px, 25px */
.ring-selection-option { flex: 1; min-height: 9.375rem; cursor: pointer; } /* 150px */
.ring-selection-option .item:hover { transform: scale(1.05); }
#ring-selection-cancel-btn { background: #c0392b; border-bottom-color: #922b21; }
#offline-progress-modal-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); z-index: 10002; display: flex; justify-content: center; align-items: center; }
#offline-progress-modal { background-color: #2c3e50; padding: 1.5625rem 2.1875rem; border-radius: 0.75rem; border: 0.125rem solid #2ecc71; box-shadow: 0 0 1.25rem rgba(46, 204, 113, 0.5); width: 90%; max-width: 28.125rem; text-align: center; } /* 25px, 35px, 12px, 2px, 20px, 450px */
#offline-progress-modal h3 { color: #2ecc71; margin-top: 0; }
#offline-rewards { margin: 1.5625rem 0; text-align: left; display: inline-block; } /* 25px */
#offline-rewards p { font-size: 1.2em; margin: 0.625rem 0; } /* 10px */
#offline-rewards i { margin-right: 0.75rem; color: #f1c40f; width: 1.25rem; text-align: center; } /* 12px, 20px */
#offline-progress-close-btn { background: linear-gradient(145deg, #27ae60, #2ecc71); border-bottom-color: #229954; padding: 0.75rem 1.5625rem; font-size: 1.1em; } /* 12px, 25px */

.item-sockets { position: absolute; bottom: 0.3125rem; left: 50%; transform: translateX(-50%); display: flex; gap: 0.25rem; z-index: 3; } /* 5px, 4px */
.socket { width: 1.125rem; height: 1.125rem; border-radius: 50%; border: 0.0625rem solid #7f8c8d; background-color: rgba(0,0,0,0.5); box-shadow: inset 0 0 0.1875rem #000; display: flex; justify-content: center; align-items: center; flex-shrink: 0; } /* 18px, 1px, 3px */
.socket img { width: 0.875rem; height: 0.875rem; } /* 14px */

.gem-wrapper { 
    cursor: pointer; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    position: relative;
}
.gem-wrapper:hover .gem { 
    transform: scale(1.1); 
    box-shadow: 0 0 0.5rem #f1c40f; /* 8px */
}
.gem-wrapper:hover {
    z-index: 10;
}

.gem { width: 100%; height: 100%; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; border-radius: 0.5rem; background-color: rgba(0,0,0,0.4); border: 0.125rem solid #d41b07; padding: 0.3125rem; display: flex; justify-content: center; align-items: center; } /* 8px, 2px, 5px */
.gem img { width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; }

.gem-wrapper.selected-gem .gem {
    box-shadow: 0 0 0.9375rem #f1c40f; /* 15px */
    border-color: #f1c40f;
    animation: pulse 1.5s infinite;
}

.item-grid .item-wrapper.socket-target .item,
#equipment-paperdoll .equipment-slot.socket-target { 
    animation: pulse-green 1.5s infinite; 
}

.equipment-slot.socket-target {
    border: 0.125rem solid #2ecc71; /* 2px */
}

.item-grid .item-wrapper.socket-target .item {
    border-color: #2ecc71 !important;
}

#gem-crafter { border-top: 0.125rem solid #4a637e; padding-top: 0.9375rem; } /* 2px, 15px */
#gem-crafting-slots { display: flex; justify-content: center; gap: 0.9375rem; margin: 0.9375rem 0; } /* 15px */
.gem-crafting-slot { width: 4.375rem; height: 4.375rem; border: 0.125rem dashed #4a637e; border-radius: 0.625rem; display: flex; justify-content: center; align-items: center; background-color: rgba(0,0,0,0.2); cursor: pointer; } /* 70px, 2px, 10px */
.gem-crafting-slot:hover { border-color: #f1c40f; background-color: rgba(241, 196, 15, 0.1); }
.gem-crafting-slot .gem { pointer-events: none; }
#gem-craft-btn { background: linear-gradient(145deg, #e67e22, #f39c12); border-bottom-color: #d35400; }
.gem-wrapper.selected-for-bulk-combine .gem {
    border-color: #3498db;
    box-shadow: 0 0 0.9375rem #3498db; /* 15px */
    animation: pulse-blue 1.5s infinite;
}

.gem-controls {
    display: flex;
    align-items: center;
    gap: 0.625rem; /* 10px */
    margin-bottom: 0.625rem; /* 10px */
}
.gem-controls label {
    font-family: 'Cinzel', serif;
    font-size: 1em;
}
.gem-controls select {
    flex: 0 1 auto;
    max-width: 18.75rem; /* 300px */
    margin: 0;
}

@keyframes pulse-blue {
    0% { box-shadow: 0 0 0.3125rem rgba(52, 152, 219, 0.6); } /* 5px */
    50% { box-shadow: 0 0 0.9375rem rgba(52, 152, 219, 1); } /* 15px */
    100% { box-shadow: 0 0 0.3125rem rgba(52, 152, 219, 0.6); } /* 5px */
}

/* --- FORGE STYLES (MODIFIED) --- */
#forge-main-area {
    display: flex;
    gap: 1.25rem; /* 20px */
    align-items: flex-start;
    justify-content: center;
    margin-bottom: 0.9375rem; /* 15px */
    padding: 0.9375rem; /* 15px */
    background: rgba(0,0,0,0.2);
    border: 0.0625rem solid #4a637e; /* 1px */
    border-radius: 0.5rem; /* 8px */
    min-height: 11.25rem; /* 180px */
}

#forge-selected-item {
    flex-shrink: 0;
    width: 9.375rem; /* 150px */
    height: 9.375rem; /* 150px */
}
#forge-selected-item .item-wrapper {
    position: static;
    width: 100%;
    height: 100%;
    cursor: help;
}
#forge-selected-item .item {
    cursor: help;
}
#forge-selected-item .item:hover {
    transform: none;
}
#forge-stat-list {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* 8px */
    max-width: 21.875rem; /* 350px */
}

.forge-stat-entry {
    background-color: rgba(44, 62, 80, 0.7);
    border: 0.0625rem solid #4a637e; /* 1px */
    border-radius: 0.3125rem; /* 5px */
    padding: 0.625rem 0.625rem 0.625rem 0.9375rem; /* 10px, 15px */
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    border-left: 0.3125rem solid transparent; /* 5px */
}
.forge-stat-entry:hover {
    background-color: #4a637e;
    border-color: #bdc3c7;
}
.forge-stat-entry.selected {
    background-color: rgba(241, 196, 15, 0.15);
    border-color: #f1c40f;
    border-left-color: #f1c40f;
    transform: scale(1.02);
}
.stat-improvement-indicator {
    position: absolute;
    right: 0.625rem; /* 10px */
    top: 50%;
    transform: translateY(-50%);
    color: #2ecc71;
    font-weight: bold;
    font-size: 1.1em;
    animation: fade-in-out 1.5s ease-out forwards;
}
@keyframes fade-in-out {
    0% { opacity: 0; transform: translateY(-50%) scale(0.8); }
    20% { opacity: 1; transform: translateY(-50%) scale(1.1); }
    80% { opacity: 1; transform: translateY(-50%) scale(1); }
    100% { opacity: 0; transform: translateY(-60%); }
}

#forge-reroll-btn {
    width: 80%;
    max-width: 31.25rem; /* 500px */
    align-self: center;
    padding: 0.9375rem; /* 15px */
    font-size: 1.2em;
    background: linear-gradient(145deg, #e67e22, #f39c12);
    border-bottom-color: #d35400;
}
.item-wrapper.selected-for-forge .item {
    border: 0.1875rem solid #f1c40f !important; /* 3px */
}
/* --- Item Quantity Display --- */
.item-quantity-display {
    position: absolute;
    bottom: 0.125rem; /* 2px */
    right: 0.25rem; /* 4px */
    background-color: rgba(0, 0, 0, 0.8);
    color: #ecf0f1;
    font-size: 0.8em;
    font-weight: bold;
    padding: 0.0625rem 0.3125rem; /* 1px, 5px */
    border-radius: 0.25rem; /* 4px */
    border: 0.0625rem solid #7f8c8d; /* 1px */
    z-index: 4;
    pointer-events: none;
}

/* --- PRESTIGE VIEW --- */
.game-container:has(#prestige-view.active) .middle-panel {
    flex-grow: 1;
    flex-shrink: 1;
    min-width: 62.5rem; /* 1000px */
}
.game-container:has(#prestige-view.active) .left-panel {
    flex-grow: 0;
    flex-shrink: 0;
}


#prestige-view {
    text-align: center;
}
#prestige-instructions {
    margin-bottom: 0.9375rem; /* 15px */
}
#prestige-main-content {
    display: flex;
    flex-grow: 1;
    gap: 1.25rem; /* 20px */
    min-height: 0;
    justify-content: center;
}
#prestige-equipment-side {
    flex: 0 0 26.25rem; /* 420px */
    display: flex;
    flex-direction: column;
}
#prestige-equipment-paperdoll {
    position: relative;
    width: 100%;
    aspect-ratio: 400 / 600;
    margin: 0 auto;
    background-image: url('images/backgrounds/bg_prestige.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 0.5rem; /* 8px */
    border: 0.125rem solid #4a637e; /* 2px */
}
#prestige-equipment-side .equipment-slot {
    cursor: pointer;
    position: absolute;
    transition: all 0.2s ease-in-out;
}
#prestige-equipment-side .equipment-slot.prestige-locked {
    background-color: rgba(0, 0, 0, 0.7);
    filter: grayscale(1);
    cursor: not-allowed;
    pointer-events: none;
}
#prestige-equipment-side .equipment-slot.prestige-unlocked {
    animation: prestige-glow 2.5s infinite alternate;
}
@keyframes prestige-glow {
    from { box-shadow: 0 0 0.5rem rgba(241, 196, 15, 0.4); border-color: rgba(241, 196, 15, 0.6); } /* 8px */
    to { box-shadow: 0 0 1.25rem rgba(241, 196, 15, 0.9); border-color: rgba(241, 196, 15, 1); } /* 20px */
}

#prestige-inventory-side {
    flex: 0 0 38.75rem; /* 620px */
    display: flex;
    flex-direction: column;
}
#prestige-inventory-side .grid-scroll-container {
    flex-grow: 1;
    margin-top: 0;
}
.small-text-hint {
    font-size: 0.85em;
    color: #bdc3c7;
    font-style: italic;
    margin-top: -0.625rem; /* -10px */
    margin-bottom: 0.625rem; /* 10px */
}
#prestige-actions {
    margin-top: 1.25rem; /* 20px */
    display: flex;
    justify-content: center;
    gap: 1.25rem; /* 20px */
    width: 100%;
}
#cancel-prestige-btn {
    background: #7f8c8d;
    border-bottom-color: #6c7a7b;
}
#confirm-prestige-btn {
    background: linear-gradient(145deg, #f1c40f, #e67e22);
    border-bottom-color: #d35400;
}

/* --- PERMANENT UPGRADES PANEL --- */
.upgrades-panel h3, .upgrades-panel p {
    text-align: center;
}

.permanent-upgrades-scroll-container {
    flex-grow: 1;
    overflow-y: auto;
    background-color: rgba(0,0,0,0.2);
    padding: 0.625rem; /* 10px */
    border-radius: 0.5rem; /* 8px */
    margin-top: 0.625rem; /* 10px */
}

#permanent-upgrades-container {
    display: flex;
    flex-direction: column;
    gap: 0.625rem; /* 10px */
}

.permanent-upgrade-card {
    display: flex;
    gap: 0.9375rem; /* 15px */
    align-items: center;
    background-color: rgba(44, 62, 80, 0.6);
    border: 0.0625rem solid #4a637e; /* 1px */
    border-radius: 0.5rem; /* 8px */
    padding: 0.9375rem; /* 15px */
    transition: all 0.2s ease;
}

.permanent-upgrade-card:not(.disabled):hover {
    border-color: #f1c40f;
    transform: scale(1.02);
}

.permanent-upgrade-card.disabled {
    filter: grayscale(70%);
    opacity: 0.6;
}

.permanent-upgrade-card.maxed {
    border-color: #f1c40f;
    background: linear-gradient(to right, rgba(44, 62, 80, 0.6), rgba(241, 196, 15, 0.1));
}

.upgrade-icon {
    flex-shrink: 0;
    font-size: 2em;
    width: 3.75rem; /* 60px */
    height: 3.75rem; /* 60px */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0,0,0,0.3);
    border-radius: 50%;
    color: #f1c40f;
    border: 0.125rem solid #4a637e; /* 2px */
}

.upgrade-details {
    flex-grow: 1;
}

.upgrade-details h4 {
    margin: 0 0 0.3125rem 0; /* 5px */
}

.upgrade-details p {
    margin: 0;
    font-size: 0.9em;
    color: #bdc3c7;
    text-align: left;
}

.upgrade-details p span {
    color: #2ecc71;
    font-weight: bold;
}

.upgrade-level {
    font-size: 0.85em;
    color: #95a5a6;
    margin-top: 0.3125rem; /* 5px */
}

.upgrade-buy-section {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.3125rem; /* 5px */
}

.upgrade-cost {
    font-size: 0.9em;
    font-family: 'Cinzel', serif;
    color: #ffd700;
}

.buy-permanent-upgrade-btn {
    padding: 0.5rem 1rem; /* 8px, 16px */
    font-size: 1em;
    background: linear-gradient(145deg, #27ae60, #2ecc71);
    border-bottom-color: #229954;
}

.permanent-upgrade-card.maxed .upgrade-buy-section {
    font-size: 1.2em;
    font-weight: bold;
    color: #f1c40f;
}

.permanent-upgrade-card.maxed .buy-permanent-upgrade-btn {
    display: none;
}

/* --- UNLOCK SLOT MODAL --- */
#unlock-slot-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.85);
    z-index: 10001;
    display: flex;
    justify-content: center;
    align-items: center;
}
#unlock-slot-modal {
    background-color: #2c3e50;
    padding: 1.5625rem; /* 25px */
    border-radius: 0.75rem; /* 12px */
    border: 0.125rem solid #f1c40f; /* 2px */
    box-shadow: 0 0 1.25rem rgba(241, 196, 15, 0.5); /* 20px */
    width: 90%;
    max-width: 31.25rem; /* 500px */
    text-align: center;
}
#unlock-slot-paperdoll-container {
    width: 100%;
    max-width: 25rem; /* 400px */
    margin: 1.25rem auto; /* 20px */
}
#unlock-slot-paperdoll {
    position: relative;
    width: 100%;
    aspect-ratio: 400 / 600;
    background-image: url('images/paperdoll-bg.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
#unlock-slot-paperdoll .equipment-slot {
    position: absolute;
}
#unlock-slot-paperdoll .equipment-slot.prestige-unlocked {
    filter: brightness(0.6) grayscale(0.5);
    cursor: not-allowed;
}
#unlock-slot-paperdoll .equipment-slot.prestige-unlocked::after {
    content: 'UNLOCKED';
    position: absolute;
    font-size: 1em;
    color: #2ecc71;
    text-shadow: 0.0625rem 0.0625rem 0.125rem black; /* 1px, 2px */
}
#unlock-slot-paperdoll .equipment-slot:not(.prestige-unlocked) {
    cursor: pointer;
}
#unlock-slot-paperdoll .equipment-slot:not(.prestige-unlocked)::after {
    content: '\f09c'; /* fa-unlock */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    font-size: 2.5em;
    color: rgba(241, 196, 15, 0.7);
    opacity: 0;
    transition: all 0.2s ease;
}
#unlock-slot-paperdoll .equipment-slot:not(.prestige-unlocked):hover::after {
    opacity: 1;
    transform: scale(1.1);
}
#unlock-slot-cancel-btn {
    margin-top: 0.9375rem; /* 15px */
    background: #c0392b;
    border-bottom-color: #922b21;
}

/* --- SALVAGE FILTER MODAL --- */
#salvage-filter-modal-backdrop {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background-color: rgba(0,0,0,0.7); 
    z-index: 10002; 
    display: flex; justify-content: center; align-items: center;
}
#salvage-filter-modal {
    background-color: #2c3e50; 
    padding: 1.5625rem; /* 25px */
    border-radius: 0.75rem; /* 12px */
    border: 0.125rem solid #8e44ad; /* 2px */
    box-shadow: 0 0 1.25rem rgba(142, 68, 173, 0.5); /* 20px */
    width: 90%; max-width: 34.375rem; text-align: center; /* 550px */
}
#salvage-filter-modal-body {
    margin: 1.25rem 0; /* 20px */
    text-align: left;
}
#salvage-filter-controls {
    padding: 0.9375rem; /* 15px */
    border: 0.0625rem solid #34495e; /* 1px */
    border-radius: 0.5rem; /* 8px */
    background-color: rgba(0,0,0,0.2);
    margin-top: 0.9375rem; /* 15px */
}
.filter-master-control {
    display: flex;
    align-items: center;
    gap: 0.625rem; /* 10px */
    font-size: 1.2em;
    margin-bottom: 0.625rem; /* 10px */
}
.filter-master-control input[type="checkbox"] {
    width: 1.25rem; /* 20px */
    height: 1.25rem; /* 20px */
}
.filter-group {
    display: flex;
    align-items: center;
    gap: 0.9375rem; /* 15px */
    padding: 0.625rem 0; /* 10px */
    border-bottom: 0.0625rem solid #34495e; /* 1px */
}
.filter-group:last-child {
    border-bottom: none;
}
.filter-group label {
    flex-basis: 12.5rem; /* 200px */
    flex-shrink: 0;
}
.filter-group select, .filter-group input {
    flex-grow: 1;
}
.filter-group.stats-filter-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem; /* 2px */
}
.stats-filter-group > label {
    flex-basis: auto;
    margin-bottom: 0;
}
#filter-keep-stats-container {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(9.375rem, 1fr)); /* 150px */
    gap: 0.625rem 0.9375rem; /* 10px, 15px */
}
#filter-keep-stats-container div {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* 8px */
}
#salvage-filter-close-btn {
    margin-top: 0.9375rem; /* 15px */
    background: #c0392b;
    border-bottom-color: #922b21;
}

/* --- GOLDEN SLIME STREAK --- */
#golden-slime-streak {
    position: absolute;
    bottom: 0.3125rem; /* 5px */
    left: 0.3125rem; /* 5px */
    font-family: 'Cinzel', serif;
    font-size: 1.2em;
    font-weight: bold;
    color: #ffd700;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 0.125rem 0.5rem; /* 2px, 8px */
    border-radius: 0.5rem; /* 8px */
    border: 0.0625rem solid #f1c40f; /* 1px */
    text-shadow: -0.0625rem -0.0625rem 0 #000, 0.0625rem -0.0625rem 0 #000, -0.0625rem 0.0625rem 0 #000, 0.0625rem 0.0625rem 0 #000; /* 1px */
    animation: golden-shimmer 2s infinite;
    pointer-events: none;
}

#golden-slime-streak.streak-fade-out {
    animation: streak-fade-out 2s forwards;
}


@keyframes golden-shimmer {
    0%   { opacity: 0.7; transform: scale(1); }
    50%  { opacity: 1; transform: scale(1.05); }
    100% { opacity: 0.7; transform: scale(1); }
}
@keyframes streak-fade-out {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(2); }
}

/* --- GOLDEN SLIME RECORDS --- */
#golden-slime-records {
    text-align: center;
    font-size: 1em;
    color: #bdc3c7;
    margin-bottom: 0.625rem; /* 10px */
    padding: 0.1875rem 0.5rem; /* 3px, 8px */
    background-color: rgba(0,0,0,0.2);
    border-radius: 0.3125rem; /* 5px */
    border: 0.0625rem solid #4a637e; /* 1px */
    pointer-events: none;
}
#golden-slime-records span {
    color: #f1c40f;
    font-weight: bold;
}


/* --- SCROLL TO BOTTOM BUTTON --- */
#scroll-to-bottom-btn {
    position: absolute;
    bottom: 0.625rem; /* 10px */
    right: 0.9375rem; /* 15px */
    z-index: 10;
    border-radius: 50%;
    width: 2.5rem; /* 40px */
    height: 2.5rem; /* 40px */
    padding: 0;
    margin: 0;
    font-size: 1.2em;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(44, 62, 80, 0.8);
    border: 0.0625rem solid #7f8c8d; /* 1px */
    box-shadow: 0 0.125rem 0.3125rem rgba(0,0,0,0.5); /* 2px, 5px */
    animation: pulse-blue 2s infinite;
}

#scroll-to-bottom-btn i {
    transition: transform 0.2s ease-in-out;
}

#scroll-to-bottom-btn:hover i {
    transform: scale(1.2);
}

/* --- VIEW SLOTS MODAL --- */
#view-slots-modal-backdrop {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background-color: rgba(0,0,0,0.8); 
    z-index: 10003; 
    display: flex; justify-content: center; align-items: center;
}
#view-slots-modal {
    background-color: #2c3e50; 
    padding: 1.5625rem; /* 25px */
    border-radius: 0.75rem; /* 12px */
    border: 0.125rem solid #bdc3c7; /* 2px */
    box-shadow: 0 0 1.25rem rgba(189, 195, 199, 0.3); /* 20px */
    width: 90%; max-width: 31.25rem; /* 500px */
    text-align: center;
}
#view-slots-modal h3 {
    margin-top: 0;
    color: #ecf0f1;
}
#view-slots-paperdoll-container {
    width: 100%;
    max-width: 25rem; /* 400px */
    margin: 1.25rem auto; /* 20px */
}
#view-slots-paperdoll {
    position: relative;
    width: 100%;
    aspect-ratio: 400 / 600;
    background-image: url('images/paperdoll-bg.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
#view-slots-paperdoll .equipment-slot {
    position: absolute;
    transition: all 0.2s ease;
}
#view-slots-paperdoll .equipment-slot.view-unlocked {
    border-color: #f1c40f;
}
#view-slots-paperdoll .equipment-slot.view-locked {
    filter: grayscale(1) brightness(0.6);
}
#view-slots-paperdoll .equipment-slot.view-locked::after {
    content: '\f023'; /* fa-lock */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.5em;
    color: rgba(236, 240, 241, 0.5);
    text-shadow: 0.0625rem 0.0625rem 0.1875rem rgba(0,0,0,0.7); /* 1px, 3px */
    pointer-events: none;
}
#view-slots-close-btn {
    margin-top: 0.9375rem; /* 15px */
    background: #7f8c8d; border-bottom-color: #6c7a7b;
}

/* --- Slime Split Toggle Button --- */
.slime-split-toggle-btn {
    padding: 0.1875rem 0.5rem; /* 3px, 8px */
    font-size: 0.8em;
    margin-right: 0.625rem; /* 10px */
    min-width: 2.8125rem; /* 45px */
}

.slime-split-toggle-btn.toggle-on {
    background: linear-gradient(145deg, #27ae60, #2ecc71);
    border-bottom-color: #229954;
}

.slime-split-toggle-btn.toggle-off {
    background: linear-gradient(145deg, #c0392b, #e74c3c);
    border-bottom-color: #922b21;
}

/* --- BESTIARY / WIKI VIEW --- */
#wiki-view {
    gap: 0.9375rem; /* 15px */
}

#wiki-controls {
    display: flex;
    flex-direction: column;
    gap: 0.625rem; /* 10px */
    padding: 0.9375rem; /* 15px */
    background-color: rgba(0,0,0,0.2);
    border: 0.0625rem solid #4a637e; /* 1px */
    border-radius: 0.5rem; /* 8px */
    flex-shrink: 0;
    position: relative;
    padding-bottom: 2.5rem; /* 40px */
}

.wiki-filter-row {
    display: flex;
    gap: 0.9375rem; /* 15px */
    align-items: center;
    flex-wrap: wrap;
}

#wiki-search-input, #wiki-type-filter, #wiki-sockets-filter {
    background-color: #1c2833;
    color: #ecf0f1;
    border: 0.0625rem solid #4a637e; /* 1px */
    padding: 0.5rem 0.75rem; /* 8px, 12px */
    border-radius: 0.3125rem; /* 5px */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1rem; /* 16px */
    margin: 0;
}

#wiki-search-input { flex-grow: 1; min-width: 12.5rem; } /* 200px */
#wiki-sockets-filter { width: 7.5rem; } /* 120px */
.wiki-actions-row {
    justify-content: flex-start;
    border-top: 0.0625rem solid #4a637e; /* 1px */
    padding-top: 0.625rem; /* 10px */
    margin-top: 0.3125rem; /* 5px */
}
#wiki-dev-tool-btn { 
    position: absolute;
    bottom: 0.5rem; /* 8px */
    right: 0.5rem; /* 8px */
    background: #e74c3c; 
    border-bottom-color: #c0392b;
    padding: 0.3125rem 0.625rem; /* 5px, 10px */
    font-size: 0.875rem; /* 14px */
    margin: 0;
}

#wiki-show-favorites-btn {
    background: #3498db;
    border-bottom-color: #2980b9;
}
#wiki-show-favorites-btn.active {
    background: linear-gradient(145deg, #e67e22, #f1c40f);
    border-bottom-color: #d35400;
    color: #1a1a1a;
}

#wiki-show-upgrades-btn.active {
    background: linear-gradient(145deg, #27ae60, #2ecc71);
    border-bottom-color: #229954;
    box-shadow: 0 0 0.5rem #2ecc71; /* 8px */
    transform: translateY(1px);
    color: white;
}

#wiki-stats-filter-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr)); /* 280px */
    gap: 0.5rem 0.9375rem; /* 8px, 15px */
    width: 100%;
}

.wiki-stat-filter {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* 8px */
}

.wiki-stat-filter input[type="number"] {
    width: 5rem; /* 80px */
    background-color: #1c2833;
    color: #ecf0f1;
    border: 0.0625rem solid #4a637e; /* 1px */
    padding: 0.25rem 0.5rem; /* 4px, 8px */
    border-radius: 0.3125rem; /* 5px */
    font-size: 0.875rem; /* 14px */
}

#wiki-results-container {
    flex-grow: 1;
    overflow-y: auto;
    background-color: rgba(0,0,0,0.3);
    padding: 0.625rem; /* 10px */
    border-radius: 0.3125rem; /* 5px */
    display: flex;
    flex-direction: column;
    gap: 0.625rem; /* 10px */
}

.wiki-item-card {
    background-color: rgba(44, 62, 80, 0.7);
    border: 0.0625rem solid #4a637e; /* 1px */
    border-radius: 0.5rem; /* 8px */
    padding: 0.9375rem; /* 15px */
    display: flex;
    gap: 1.25rem; /* 20px */
    cursor: default;
    transition: border-color 0.2s;
    position: relative;
}

.wiki-favorite-star {
    position: absolute;
    top: 0.625rem; /* 10px */
    right: 0.625rem; /* 10px */
    font-size: 1.5em;
    cursor: pointer;
    z-index: 5;
    color: #bdc3c7;
    transition: color 0.2s, transform 0.2s;
}

.wiki-favorite-star:hover {
    transform: scale(1.2);
    color: #f1c40f;
}

.wiki-favorite-star.favorited {
    color: #f1c40f;
}

.wiki-item-card:hover {
    border-color: #f1c40f;
}

.wiki-item-header {
    flex: 0 0 7.5rem; /* 120px */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: none;
    background: transparent;
    cursor: pointer;
}

.wiki-item-header .item-icon {
    width: 4.375rem; /* 70px */
    height: 4.375rem; /* 70px */
    border: 0.125rem solid #bdc3c7; /* 2px */
    border-radius: 0.5rem; /* 8px */
    padding: 0.3125rem; /* 5px */
    background-color: rgba(0,0,0,0.4);
    margin-bottom: 0.625rem; /* 10px */
}

.wiki-item-header.common .item-icon { border-color: #bdc3c7; }
.wiki-item-header.uncommon .item-icon { border-color: #2ecc71; }
.wiki-item-header.rare .item-icon { border-color: #3498db; }
.wiki-item-header.epic .item-icon { border-color: #9b59b6; }
.wiki-item-header.legendary .item-icon { border-color: #f39c12; }
.wiki-item-header.gem-quality .item-icon { border-color: #e74c3c; }


.wiki-item-header .item-name {
    font-family: 'Cinzel', serif;
    font-weight: bold;
}

.wiki-item-details {
    flex-grow: 1;
    display: flex;
    gap: 1.25rem; /* 20px */
    cursor: pointer;
}

.wiki-item-stats, .wiki-item-drops {
    flex: 1;
}

.wiki-item-details h4 {
    margin-top: 0;
    margin-bottom: 0.625rem; /* 10px */
    color: #f1c40f;
    border-bottom: 0.0625rem solid #4a637e; /* 1px */
    padding-bottom: 0.3125rem; /* 5px */
}

.wiki-item-details ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wiki-drop-source {
    display: flex;
    align-items: center;
    gap: 0.625rem; /* 10px */
    font-size: 0.9em;
    margin-bottom: 0.3125rem; /* 5px */
}

.wiki-drop-source img {
    width: 1.5rem; /* 24px */
    height: 1.5rem; /* 24px */
}

.wiki-drop-source-details {
    display: flex;
    flex-direction: column;
}

.wiki-monster-name {
    font-weight: bold;
}

.wiki-monster-location {
    font-size: 0.9em;
    color: #95a5a6;
}


.wiki-drop-source .drop-chance {
    color: #bdc3c7;
    margin-left: auto;
    font-size: 0.9em;
}

/* --- WIKI TRAVEL MODAL --- */
.wiki-travel-options-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem; /* 10px */
    max-height: 25rem; /* 400px */
    overflow-y: auto;
}

.wiki-travel-option {
    display: flex;
    align-items: center;
    gap: 0.9375rem; /* 15px */
    background: rgba(0,0,0,0.2);
    padding: 0.625rem; /* 10px */
    border-radius: 0.3125rem; /* 5px */
    border: 0.0625rem solid #34495e; /* 1px */
}

.wiki-travel-monster-icon {
    width: 2.5rem; /* 40px */
    height: 2.5rem; /* 40px */
    flex-shrink: 0;
}

.wiki-travel-monster-details {
    flex-grow: 1;
    text-align: left;
}

.wiki-travel-btn {
    padding: 0.5rem 1rem; /* 8px, 16px */
    font-size: 1em;
    flex-shrink: 0;
    background: linear-gradient(145deg, #27ae60, #2ecc71);
    border-bottom-color: #229954;
}

.item-wrapper:hover { 
    transform: scale(1.05); 
    z-index: 10;
}

.gem-wrapper:hover {
    z-index: 10;
}

.permanent-upgrade-card.disabled {
    filter: grayscale(70%);
    opacity: 0.6;
}

/* --- DEV TOOL MODAL --- */
#dev-tool-modal-backdrop {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background-color: rgba(0,0,0,0.85); 
    z-index: 10004; 
    display: flex; justify-content: center; align-items: center;
}
#dev-tool-modal {
    background-color: #1c2833; 
    padding: 1.5625rem; /* 25px */
    border-radius: 0.75rem; /* 12px */
    border: 0.125rem solid #e74c3c; /* 2px */
    box-shadow: 0 0 1.25rem rgba(231, 76, 60, 0.5); /* 20px */
    width: 90%; max-width: 56.25rem; /* 900px */
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}
#dev-tool-modal h3 {
    margin-top: 0;
    color: #e74c3c;
    text-align: center;
}
#dev-tool-content {
    display: flex;
    gap: 1.25rem; /* 20px */
    overflow-y: auto;
    flex-grow: 1;
}
.dev-tool-section {
    flex: 1;
    background-color: rgba(0,0,0,0.2);
    padding: 0.9375rem; /* 15px */
    border-radius: 0.5rem; /* 8px */
}
.dev-tool-section h4 {
    margin-top: 0;
    border-bottom: 0.0625rem solid #4a637e; /* 1px */
    padding-bottom: 0.625rem; /* 10px */
}
.dev-tool-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-family: 'Courier New', Courier, monospace;
}
.dev-tool-list li {
    padding: 0.3125rem; /* 5px */
    border-bottom: 0.0625rem solid #2f3e4e; /* 1px */
}
.dev-tool-list li:last-child {
    border-bottom: none;
}
#dev-tool-close-btn {
    margin-top: 1.25rem; /* 20px */
    background: #c0392b;
    border-bottom-color: #922b21;
    align-self: center;
}

/* --- Locked / Tutorial View --- */
.tab-button.disabled-tab {
    color: #7f8c8d;
    background: #2c3e50;
    cursor: pointer;
    border-bottom: none;
    box-shadow: none;
}

.tab-button.disabled-tab:hover {
    background: #34495e;
    transform: none;
}

#locked-view {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2.5rem; /* 40px */
    gap: 0.9375rem; /* 15px */
    color: #95a5a6;
    height: 100%;
    flex-grow: 1;
}

#locked-view.active {
    display: flex;
}

#locked-view-icon {
    font-size: 5em;
    color: #4a637e;
    margin-bottom: 1.25rem; /* 20px */
}

#locked-view-title {
    font-size: 2em;
    color: #ecf0f1;
}

#locked-view-message {
    font-size: 1.2em;
    max-width: 25rem; /* 400px */
}

/* --- Flashing Animation for Unlocked Tabs --- */
.newly-unlocked-flash {
    animation: flash-tab 1.5s ease-in-out;
    animation-iteration-count: 3;
}

@keyframes flash-tab {
    0% {
        box-shadow: 0 0 0 0 rgba(241, 196, 15, 0);
    }
    50% {
        box-shadow: 0 0 1.25rem 0.3125rem rgba(241, 196, 15, 0.7); /* 20px, 5px */
    }
    100% {
        box-shadow: 0 0 0 0 rgba(241, 196, 15, 0);
    }
}
/* --- START: Inventory Sub-Tab Styles --- */
.sub-tabs {
    display: flex;
    border-bottom: 0.125rem solid #34495e; /* 2px */
    margin-bottom: 0.9375rem; /* 15px */
    flex-shrink: 0;
}

.sub-tab-button {
    flex-grow: 1;
    padding: 0.5rem; /* 8px */
    margin: 0;
    border-radius: 0.3125rem 0.3125rem 0 0; /* 5px */
    border-bottom: none;
    background: #2c3e50;
    font-size: 0.9em;
    box-shadow: none;
    border-bottom: 0.125rem solid transparent; /* 2px */
}

.sub-tab-button:hover {
    background: #34495e;
}

.sub-tab-button.active {
    background: #34495e;
    color: #f1c40f;
    border-bottom-color: #f1c40f;
}

.sub-tab-button.disabled-tab {
    color: #7f8c8d;
    background: #2c3e50;
    cursor: pointer;
    box-shadow: none;
}

.sub-tab-button.disabled-tab:hover {
    background: #34495e;
}


.sub-view-container {
    flex-grow: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.sub-view {
    display: none;
    flex-grow: 1;
    flex-direction: column;
    min-height: 0;
}

.sub-view.active {
    display: flex;
}

.sub-view h3 {
    margin-top: 0;
    text-align: center;
}

#inventory-gear-view .grid-scroll-container,
#inventory-gems-view .grid-scroll-container,
#inventory-consumables-view .grid-scroll-container {
    margin-top: 0;
}

.tab-button[data-view="gems-view"],
.tab-button[data-view="consumables-view"] {
    display: none;
}

#inventory-locked-sub-view {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2.5rem; /* 40px */
    gap: 0.9375rem; /* 15px */
    color: #95a5a6;
    height: 100%;
    flex-grow: 1;
}

#inventory-locked-sub-view.active {
    display: flex;
}

#inventory-locked-sub-view-icon {
    font-size: 5em;
    color: #4a637e;
    margin-bottom: 1.25rem; /* 20px */
}

#inventory-locked-sub-view-title {
    font-size: 2em;
    color: #ecf0f1;
}

#inventory-locked-sub-view-message {
    font-size: 1.2em;
    max-width: 25rem; /* 400px */
}
/* --- HUNTS MODAL & SHOP (NEW & MODIFIED) --- */
#hunts-btn {
    width: 100%;
    margin: 0.625rem 0; /* 10px */
}

#hunts-modal-backdrop {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background-color: rgba(0,0,0,0.8); 
    z-index: 10002; 
    display: flex; 
    justify-content: center; 
    align-items: flex-start; /* Aligns modal to the top */
    padding-top: 12.5vh; /* Pushes the modal down from the top edge */
}

#hunts-modal {
    background-color: #2c3e50; 
    padding: 1.5625rem; /* 25px */
    border-radius: 0.75rem; /* 12px */
    border: 0.125rem solid #e67e22; /* 2px */
    box-shadow: 0 0 1.25rem rgba(230, 126, 34, 0.5); /* 20px */
    width: 90%; max-width: 56.25rem; /* 900px */
    max-height: 75vh; /* Adjusted to leave a bottom margin */
    display: flex;
    flex-direction: column;
}


#hunts-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.9375rem; /* 15px */
    padding-bottom: 0.9375rem; /* 15px */
    border-bottom: 1px solid #4a637e;
}

#hunts-modal-title {
    margin: 0;
}

#hunt-tokens-display {
    display: flex;
    align-items: center;
    gap: 0.625rem; /* 10px */
    background-color: rgba(0,0,0,0.3);
    padding: 0.5rem 0.75rem; /* 8px, 12px */
    border-radius: 0.5rem; /* 8px */
    border: 1px solid #4a637e;
}

#hunt-tokens-display img {
    height: 1.5rem; /* 24px */
}
#total-hunts-display img {
    height: 1.5rem; /* 24px */
}

#hunt-tokens-amount {
    font-size: 1.2em;
    font-weight: bold;
    color: #f1c40f;
    font-family: 'Cinzel', serif;
}

#hunts-tabs {
    margin-bottom: 0.625rem; /* 10px */
}

#hunts-modal-body {
    overflow-y: auto;
    flex-grow: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.hunts-sub-view {
    display: none;
    flex-direction: column;
    gap: 1.5625rem; /* 25px */
}

.hunts-sub-view.active {
    display: flex;
}

/* --- START: Add these new rules here --- */
.hunts-main-view {
    display: none;
    flex-direction: column;
    gap: 1.5625rem; /* 25px */
}

.hunts-main-view.active {
    display: flex;
}
#active-hunt-section {
    padding: 0.9375rem; /* 15px */
    border: 0.0625rem solid #34495e; /* 1px */
    border-radius: 0.5rem; /* 8px */
    background-color: rgba(0,0,0,0.2);
}

#active-hunt-section h4, #available-hunts-section h4 {
    margin-top: 0;
    margin-bottom: 0.625rem; /* 10px */
}

.available-hunts-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.625rem; /* 10px */
}

#reroll-hunts-btn {
    margin: 0;
    font-size: 0.875rem; /* 14px */
    padding: 0.5rem 0.75rem; /* 8px, 12px */
}

#available-hunts-container {
    display: flex;
    flex-direction: column;
    gap: 0.625rem; /* 10px */
}

.hunt-card {
    background-color: rgba(44, 62, 80, 0.7);
    border: 0.0625rem solid #4a637e; /* 1px */
    border-radius: 0.5rem; /* 8px */
    padding: 0.9375rem; /* 15px */
    display: flex;
    align-items: center;
    gap: 0.625rem; /* 10px */
}

.hunt-title { font-family: 'Cinzel', serif; font-size: 1.1em; font-weight: bold; color: #f1c40f; margin: 0 0 0.3125rem 0; }
.hunt-description { margin: 0 0 0.625rem 0; color: #bdc3c7; }
.hunt-reward { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; font-size: 0.9em; text-align: center; width: 6.25rem; flex-shrink: 0; }
.hunt-reward img { width: 3rem; height: 3rem; border-radius: 0.25rem; background: rgba(0,0,0,0.5); padding: 0.125rem; }
.hunt-reward-name { color: #ecf0f1; font-weight: bold; }
.hunt-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3125rem;
    margin-top: auto; /* This is the key: it pushes the button to the bottom */
    padding-top: 0.625rem; /* Adds space between description and button */
}
.hunt-progress-bar-container { width: 6.25rem; height: 0.625rem; background-color: #1a1a1a; border-radius: 0.3125rem; overflow: hidden; }
.hunt-progress-bar { width: 0%; height: 100%; background: linear-gradient(to right, #2ecc71, #27ae60); transition: width 0.3s ease; }
.hunt-progress-text { font-size: 0.8em; color: #95a5a6; }
#hunts-close-btn { margin-top: 1.25rem; background: #c0392b; border-bottom-color: #922b21; align-self: center; }
#hunts-btn:disabled { background: #566573; color: #95a5a6; cursor: not-allowed; border-bottom-color: #43515c; transform: none; box-shadow: none; }

#hunts-btn.hunt-ready-glow {
    background: linear-gradient(145deg, #e67e22, #f39c12);
    border-bottom-color: #d35400;
    animation: pulse-orange 2s infinite;
}

#hunt-stats-display {
    display: flex;
    align-items: center;
    gap: 1rem; /* 16px */
}

#total-hunts-display {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* 8px */
    background-color: rgba(0,0,0,0.3);
    padding: 0.5rem 0.75rem; /* 8px, 12px */
    border-radius: 0.5rem; /* 8px */
    border: 1px solid #4a637e;
}

#total-hunts-display i {
    color: #bdc3c7;
    font-size: 1.1em;
}

#total-hunts-completed {
    font-size: 1.2em;
    font-weight: bold;
    color: #ecf0f1;
    font-family: 'Cinzel', serif;
}

.hunt-shop-item.locked {
    cursor: not-allowed;
}

.hunt-token-reward {
    display: flex;
    flex-direction: row; /* Align number and icon horizontally */
    align-items: center;
    justify-content: center;
    gap: 0.5rem; /* 8px - A bit more space for horizontal layout */
    width: 5rem; /* 80px - A bit wider to prevent cramping */
    flex-shrink: 0;
    font-size: 1.2em;
    font-weight: bold;
    color: #f1c40f;
}

.hunt-token-reward img {
    height: 2rem; /* 32px */
    width: 2rem; /* 32px */
}

@keyframes pulse-orange {
    0% { box-shadow: 0 0 0 0 rgba(230, 126, 34, 0.7); }
    70% { box-shadow: 0 0 0 0.625rem rgba(230, 126, 34, 0); }
    100% { box-shadow: 0 0 0 0 rgba(230, 126, 34, 0); }
}

/* Shop specific styles */
#shop-view {
    padding: 0.3125rem; /* 5px */
}

#hunt-shop-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr)); /* 280px */
    gap: 0.9375rem; /* 15px */
}

.hunt-shop-item {
    background-color: rgba(30, 40, 50, 0.8);
    border: 1px solid #4a637e;
    border-radius: 0.5rem; /* 8px */
    padding: 0.9375rem; /* 15px */
    display: flex;
    gap: 0.9375rem; /* 15px */
    align-items: center;
    position: relative;
    transition: background-color 0.2s, border-color 0.2s;
}

.shop-item-icon-container {
    flex-shrink: 0;
    width: 4.375rem; /* 70px */
    height: 4.375rem; /* 70px */
    background-color: rgba(0,0,0,0.4);
    border: 1px solid #34495e;
    border-radius: 0.5rem; /* 8px */
    display: flex;
    justify-content: center;
    align-items: center;
}

.shop-item-icon {
    width: 3.75rem; /* 60px */
    height: 3.75rem; /* 60px */
}

.shop-item-details {
    flex-grow: 1;
}

.shop-item-name {
    font-family: 'Cinzel', serif;
    font-weight: bold;
    font-size: 1.1em;
    color: #ecf0f1;
    margin-bottom: 0.3125rem; /* 5px */
}

.shop-item-desc {
    font-size: 0.85em;
    color: #bdc3c7;
    line-height: 1.4;
}

.shop-item-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem; /* 8px */
    min-width: 6.25rem; /* 100px */
}

.shop-item-buy-btn {
    width: 100%;
    margin: 0;
    padding: 0.5rem; /* 8px */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem; /* 8px */
}

.shop-item-buy-btn img {
    height: 1.25rem; /* 20px */
}

/* Locked & Purchased States */
.hunt-shop-item.locked, .hunt-shop-item.purchased {
    filter: grayscale(1);
    opacity: 0.7;
    cursor: not-allowed;
}

.hunt-shop-item.locked .shop-item-buy-btn,
.hunt-shop-item.purchased .shop-item-buy-btn {
    background: #566573;
    cursor: not-allowed;
    border-bottom-color: #43515c;
}

.shop-item-unlock-req {
    font-size: 0.8em;
    color: #e74c3c;
    text-align: center;
    font-weight: bold;
}

/* --- Active Buffs Display --- */
#active-buffs-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem; /* 8px */
    margin-bottom: 0.9375rem; /* 15px */
    padding: 0.625rem; /* 10px */
    background-color: rgba(0,0,0,0.2);
    border: 0.0625rem solid #4a637e; /* 1px */
    border-radius: 0.5rem; /* 8px */
    flex-shrink: 0;
}

.active-buff {
    position: relative;
    width: 3.125rem; /* 50px */
    height: 3.125rem; /* 50px */
    cursor: help;
}

.active-buff img {
    width: 100%;
    height: 100%;
    border-radius: 0.3125rem; /* 5px */
    border: 0.0625rem solid #7f8c8d; /* 1px */
}

.buff-timer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.8);
    color: #ecf0f1;
    font-size: 0.8em;
    text-align: center;
    padding: 0.125rem 0; /* 2px */
    border-bottom-left-radius: 0.3125rem; /* 5px */
    border-bottom-right-radius: 0.3125rem; /* 5px */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-shadow: 0.0625rem 0.0625rem 0.0625rem #000; /* 1px */
}

.hunt-action-buttons {
    display: flex;
    justify-content: center;
    width: 100%;
    gap: 0.5rem; /* 8px */
    margin-top: 0.3125rem; /* 5px */
}

.hunt-action-buttons button {
    flex: 1;
    margin: 0;
    padding: 0.5rem 0.25rem; /* 8px 4px */
    font-size: 0.8em;
}

#travel-to-hunt-btn {
    background: #3498db;
    border-bottom-color: #2980b9;
}
.hunt-action-buttons button.hunt-travel-locked {
    cursor: not-allowed;
}
#travel-to-hunt-btn:disabled {
    background: #7f8c8d;
    border-bottom-color: #6c7a7b;
}
/* --- Reset Attributes Button (Updated) --- */
.attributes-header-container {
    display: flex;
    justify-content: space-between; /* Pushes items to opposite ends */
    align-items: center;        /* Vertically aligns them */
    margin-bottom: 0.625rem;      /* 10px, creates space below */
}

.attributes-header-container h4 {
    margin: 0; /* Remove default margin for better flex alignment */
}

#reset-attributes-btn {
    background: #c0392b;
    border-bottom-color: #922b21;
    margin: 0; /* Remove default button margin */
}

#reset-attributes-btn:hover {
    background: #e74c3c;
}
.hunt-details {
    flex-grow: 1;
    flex-direction: column; /* Stack its children (title, description) vertically */
    justify-content: center; /* Vertically center the stacked children */
}
.hunt-details p {
    margin: 0;
    padding: 0;
}
.hunt-main-content {
    flex-grow: 1; /* Allows this section to fill the available space */
    display: flex;
    justify-content: space-between; /* Pushes text left and button right */
    align-items: center; /* Vertically centers the text and button against each other */
    gap: 0.9375rem; /* 15px, adds space between text and button */
}
.loot-table-entry.obtained {
    opacity: 0.6;
    filter: grayscale(80%);
    cursor: not-allowed;
}

.loot-table-entry.obtained .item-name {
    text-decoration: line-through;
    color: #95a5a6; /* A muted grey color */
}

/* --- Settings Panel --- */
#advanced-audio-toggle-btn {
    width: 100%;
    margin: 1rem 0 0 0;
    background: #34495e;
    border-bottom-color: #2c3e50;
}

#advanced-audio-toggle-btn.active {
    background: linear-gradient(145deg, #27ae60, #2ecc71);
    border-bottom-color: #229954;
}

#advanced-audio-controls {
    padding-left: 1rem;
    margin-top: 1rem;
    border-left: 2px solid #34495e;
    /* Adding a transition for a smooth slide-down effect */
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
    max-height: 0;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
}

#advanced-audio-controls:not(.hidden) {
    max-height: 500px; /* A large enough value to not clip content */
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.settings-panel {
    position: fixed;
    top: 1.25rem; /* 20px */
    right: 0;
    width: 21.875rem; /* 350px */
    height: calc(100vh - 2.5rem); /* 40px */
    transform: translateX(100%);
    transition: transform 0.4s ease-in-out;
    z-index: 1001;
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.settings-panel.open {
    transform: translateX(0);
}
.settings-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* 24px */
    overflow-y: auto;
}
#volume-controls, #other-settings {
    background-color: rgba(0,0,0,0.2);
    border: 1px solid #34495e;
    border-radius: 0.5rem; /* 8px */
    padding: 0.9375rem; /* 15px */
}
#volume-controls h4, #other-settings h4 {
    margin-top: 0;
    margin-bottom: 0.9375rem; /* 15px */
    text-align: center;
}
#other-settings #reset-game-btn {
    width: 100%;
    margin: 0;
    background: #c0392b;
    border-bottom-color: #922b21;
}

/* --- Volume Sliders --- */
.volume-slider-group {
    margin-bottom: 0.9375rem; /* 15px */
}
.volume-slider-group:last-child {
    margin-bottom: 0;
}
.volume-slider-group label {
    display: block;
    margin-bottom: 0.5rem; /* 8px */
    font-family: 'Cinzel', serif;
}
.slider-wrapper {
    display: flex;
    align-items: center;
    gap: 0.9375rem; /* 15px */
}
.mute-toggle-btn {
    background: transparent;
    border: none;
    box-shadow: none;
    color: #bdc3c7;
    font-size: 1.2em;
    padding: 0;
    margin: 0;
    width: 1.875rem; /* 30px */
    height: 1.875rem; /* 30px */
}
.mute-toggle-btn:hover {
    color: #f1c40f;
    transform: scale(1.1);
    background: transparent;
}
.mute-toggle-btn.muted i {
    color: #e74c3c;
}

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    flex-grow: 1;
    background: transparent;
    cursor: pointer;
}
input[type="range"]:focus {
    outline: none;
}

/* Chrome, Safari, Opera, Edge */
input[type="range"]::-webkit-slider-runnable-track {
    height: 0.5rem; /* 8px */
    background: #1a1a1a;
    border: 1px solid #4a637e;
    border-radius: 0.25rem; /* 4px */
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    margin-top: -0.375rem; /* (track-height - thumb-height) / 2 * -1 ... (8px - 20px) / 2 = -6px */
    height: 1.25rem; /* 20px */
    width: 0.75rem; /* 12px */
    background-color: #bdc3c7;
    border-radius: 0.1875rem; /* 3px */
    border: 1px solid #1a1a1a;
}
input[type="range"]:focus::-webkit-slider-thumb {
    background-color: #f1c40f;
    box-shadow: 0 0 5px #f1c40f;
}

/* Firefox */
input[type="range"]::-moz-range-track {
    height: 0.5rem; /* 8px */
    background: #1a1a1a;
    border: 1px solid #4a637e;
    border-radius: 0.25rem; /* 4px */
}
input[type="range"]::-moz-range-thumb {
    height: 1.25rem; /* 20px */
    width: 0.75rem; /* 12px */
    background-color: #bdc3c7;
    border-radius: 0.1875rem; /* 3px */
    border: 1px solid #1a1a1a;
}
input[type="range"]:focus::-moz-range-thumb {
    background-color: #f1c40f;
    box-shadow: 0 0 5px #f1c40f;
}

.item-drop-wrapper {
    position: fixed; /* Changed from absolute */
    width: 5rem; /* 80px */
    height: 5rem; /* 80px */
    z-index: 10006; /* Must be on top of animation container */
    animation: item-drop-path 1.5s ease-out forwards;
    transform: translate(-50%, -50%); /* Center the wrapper on its coordinates */
}
.item-drop-wrapper.boss-unique-drop {
    width: 10rem; /* 160px */
    height: 10rem; /* 160px */
}
.item-drop-animation {
    width: 100%;
    height: 100%;
    animation: continuous-spin 1.5s linear infinite;
}
.sparkle-animation {
    animation-name: continuous-spin, sparkle;
    animation-duration: 1.5s, 0.5s;
    animation-timing-function: linear, linear;
    animation-iteration-count: infinite, infinite;
}

.item-drop-wrapper {
    position: fixed;
    /* Set a base position for the transform to originate from */
    top: 0;
    left: 0;
    width: 5rem; /* 80px */
    height: 5rem; /* 80px */
    z-index: 10006;
    animation: item-drop-path 1.5s ease-out forwards;
    /* Hint to the browser that transform will be animated for better performance */
    will-change: transform;
}

/* --- START OF GPU-ACCELERATED ANIMATION --- */
@keyframes item-drop-path {
    0% {
        transform: translate(var(--start-x), var(--start-y)) scale(0.5);
        opacity: 1;
    }
    50% {
        transform: translate(var(--peak-x), var(--peak-y)) scale(1.1);
        opacity: 1;
        animation-timing-function: cubic-bezier(0.3, 0, 0.8, 0.2);
    }
    100% {
        transform: translate(var(--end-x), var(--end-y)) scale(0.8);
        opacity: 0;
    }
}
/* --- END OF CORRECTED ANIMATION --- */
.advanced-audio-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #4a637e;
}

.advanced-audio-toggle label {
    cursor: pointer;
    font-family: 'Cinzel', serif;
}

.advanced-audio-toggle input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
}
#advanced-audio-controls {
    padding-left: 1rem;
    margin-top: 1rem;
    border-left: 2px solid #34495e;
}

/* In file: style.css (at the end) */

/* --- START: Generic Prompt Modal --- */
#prompt-modal-backdrop {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.8);
    z-index: 10004; /* On top of other modals */
    display: flex; justify-content: center; align-items: center;
}
#prompt-modal {
    background-color: #2c3e50;
    padding: 1.5625rem; /* 25px */
    border-radius: 0.75rem; /* 12px */
    border: 0.125rem solid #3498db; /* 2px */
    box-shadow: 0 0 1.25rem rgba(52, 152, 219, 0.5); /* 20px */
    width: 90%; max-width: 25rem; /* 400px */
    text-align: center;
}
#prompt-modal h3 {
    margin-top: 0;
    color: #ecf0f1;
}
#prompt-input {
    width: 100%;
    padding: 0.625rem; /* 10px */
    margin: 1.25rem 0; /* 20px */
    font-size: 1.1em;
    background-color: #1c2833;
    border: 0.0625rem solid #4a637e; /* 1px */
    color: #ecf0f1;
    border-radius: 0.3125rem; /* 5px */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#prompt-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.9375rem; /* 15px */
}
#prompt-cancel-btn {
    background: #c0392b; border-bottom-color: #922b21;
}
#prompt-confirm-btn {
    background: #27ae60; border-bottom-color: #229954;
}
/* --- END: Generic Prompt Modal --- */

/* --- START: Custom Scrollbar Styles --- */
/* This targets the scrollbar in any of our main scrolling containers */
.grid-scroll-container::-webkit-scrollbar,
.permanent-upgrades-scroll-container::-webkit-scrollbar,
#game-log::-webkit-scrollbar {
    width: 0.75rem; /* 12px */
}

/* Style the track (the background of the scrollbar) */
.grid-scroll-container::-webkit-scrollbar-track,
.permanent-upgrades-scroll-container::-webkit-scrollbar-track,
#game-log::-webkit-scrollbar-track {
    background: #1c2833; /* A dark color that matches your grid background */
    border-radius: 0.625rem; /* 10px */
}

/* Style the draggable handle (the thumb) */
.grid-scroll-container::-webkit-scrollbar-thumb,
.permanent-upgrades-scroll-container::-webkit-scrollbar-thumb,
#game-log::-webkit-scrollbar-thumb {
    background-color: #4a637e; /* A blue-gray from your theme */
    border-radius: 0.625rem; /* 10px */
    border: 0.1875rem solid #1c2833; /* Creates a nice padding effect */
    transition: background-color 0.2s ease; /* Smooth hover effect */
}

/* Make the handle a brighter color when you hover over it */
.grid-scroll-container::-webkit-scrollbar-thumb:hover,
.permanent-upgrades-scroll-container::-webkit-scrollbar-thumb:hover,
#game-log::-webkit-scrollbar-thumb:hover {
    background-color: #7f8c8d; /* A lighter gray */
}
/* --- END: Custom Scrollbar Styles --- */