@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

:root {
    --item-slot-width: 52px;
    --item-slot-height: 52px;
    --item-slot-font-size: 42px;
    --panel-background: #121212;
    --panel-border: #1f1f1f;
    --text-color: #e0e0e0;
    --accent-color: #d4af37; /* Gold */
    --accent-color-hover: #b8860b; /* Darker gold */
    --danger-color: #a83232;
    --success-color: #2c8c55;
    --neutral-color: #bfa730;
    --stat-green: #2c8c55;
    --dark-background: #121212;

    /* Item Rarity Colors */
    --common-color: #ede6d6; /* Cream white */
    --uncommon-color: #5fa238; /* Pastel green */
    --rare-color: #498ab4; /* Blizzard blue */
    --legendary-color: #ff9b48; /* Light gold */
}

/* Global styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--dark-background);
    color: var(--text-color);
    font-size: 14px;
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    padding-top: 50px; /* Increased space for header buttons */
}

.container {
    display: flex;
    height: calc(100% - 40px);
    padding: 10px;
    gap: 10px;
}

.main-panels-container {
    display: flex;
    height: calc(100vh - 40px);
    width: 100vw;
    padding: 10px;
    justify-content: center; /* Center panels horizontally */
    margin: 0 auto; /* Center container */
}

/* Base panel styles */
.panel {
    background-color: var(--panel-background);
    border: 2px solid var(--accent-color);
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    padding: 8px;
    color: var(--text-color);
    position: relative;
}

h2, h3, h4 {
    color: var(--accent-color);
    margin-bottom: 4px;
    font-weight: 500;
}

button {
    background-color: var(--accent-color);
    color: #121212;
    border: none;
    border-radius: 4px;
    padding: 8px 12px;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s;
}

button:hover {
    background-color: var(--accent-color-hover);
}

/* Stats panel */
.stats-panel {
    width: 200px;
    padding: 10px; /* Reduced padding */
    display: flex;
    flex-direction: column;
    gap: 5px; /* Reduced gap between elements */
}

.stats-panel h2 {
    font-size: 18px;
    text-align: center;
    border-bottom: 1px solid var(--accent-color);
    padding-bottom: 5px; /* Reduced padding */
    margin-bottom: 10px; /* Reduced margin */
}

#playerStats {
    display: flex;
    flex-direction: column;
    gap: 4px; /* Reduced gap between stat lines */
}

#playerStats p {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 0; /* Reduced vertical padding */
    margin-bottom: 0; /* Remove extra margin */
    font-size: 13px; /* Slightly smaller font */
}

.stat-container {
    position: relative;
    font-weight: 500;
    color: var(--stat-green);
    padding: 0 3px; /* Reduced horizontal padding */
}

.pop-effect {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    font-weight: bold;
    pointer-events: none;
    z-index: 1000;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

.pop-effect.positive {
    color: var(--success-color);
}

.pop-effect.negative {
    color: var(--danger-color);
}

.pop-effect.gold-positive {
    color: var(--accent-color);
    text-shadow: 0 0 3px rgba(212, 175, 55, 0.5);
}

.pop-effect.gold-negative {
    color: var(--danger-color);
    text-shadow: 0 0 3px rgba(168, 50, 50, 0.5);
}

/* Player Effects List */
.stats-panel h3 { /* Style for the "Active Effects" header */
    font-size: 14px; /* Slightly smaller header */
    text-align: center;
    margin-top: 10px; /* Space above the header */
    margin-bottom: 5px; /* Space below the header */
    padding-bottom: 3px; /* Space below text */
    border-bottom: 1px dashed var(--accent-color);
}

#activeEffects { /* Corrected ID selector */
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 12px;
    max-height: 100px; /* Limit height if many effects */
    overflow-y: auto; /* Add scroll if needed */
    padding-right: 5px; /* Space for scrollbar */
}

.effect-entry {
    display: flex;
    justify-content: space-between;
    padding: 1px 0; /* Minimal padding */
}

.effect-name {
    /* Style for effect name (e.g., Prayer) */
    color: var(--text-color);
}

.effect-duration {
    /* Style for effect duration (e.g., (2 turns)) */
    color: var(--accent-color);
    font-style: italic;
}

.effect-duration.infinite {
    /* Style for infinite duration (e.g., encounter) */
    font-style: normal; /* Not italic for infinite */
}
/* Removed extra closing brace */

/* Game info panel */
.game-info-panel {
    flex: 0 1 60%;
    display: flex;
    flex-direction: column;
    position: relative; /* Needed for absolute positioning of children */
    max-width: 60%;
}

#gameCanvas {
    border: 1px solid var(--accent-color);
    border-radius: 5px;
    background-color: #1a1a1a;
    width: 100%;
    max-width: 100%;
    max-height: calc(85vh - 100px); /* Adjust as needed */
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.event-log-panel {
    flex: 1;
    margin-top: 10px;
    border-radius: 5px;
    overflow: hidden;
    height: 10%; /* Reduce height of event log */
    min-height: 80px; /* Ensure it doesn't collapse too much */
}

.event-log-panel h3 {
    padding: 8px;
    background-color: var(--panel-border);
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    margin-bottom: 0;
}

#eventLog {
    height: calc(100% - 40px);
    overflow-y: auto;
    padding: 8px;
    background-color: #1a1a1a;
}

#eventLog div {
    margin-bottom: 4px;
    padding: 2px 0;
    border-bottom: 1px solid rgba(212, 175, 55, 0.1);
}

/* Inventory panel */
.inventory-panel {
    width: 300px;
    display: flex;
    flex-direction: column;
}

.inventory-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px; /* Further reduce gaps */
}

.equipment-panel {
    padding: 5px;
}

/* Reduce space between inventory sections */
.inventory-panel h2, /* Targets "Equipment" */
.inventory-panel h3 { /* Targets "Item Info", "Backpack" */
    margin-bottom: 2px; /* Reduced bottom margin */
    text-align: center; /* Center align all headers */
}

.inventory-panel h3 { /* Specifically target H3s if needed */
    margin-top: 3px; /* Keep existing top margin */
}

/* Make sure equipment slots don't take too much vertical space */
.equipment-slots {
    display: flex;
    justify-content: space-around;
    gap: 10px;
    margin-bottom: 5px;
}

.equipment-slot {
    width: 70px;
    height: 70px;
    background-color: rgba(212, 175, 55, 0.05);
    border: 1px solid var(--accent-color);
    border-radius: 5px;
    padding: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 28px;
}

.equipment-slot h4 {
    font-size: 12px;
    margin: 0;
}

.equipment-header { /* Style for "Equipment" header */
    font-size: 16px;
    text-align: center;
    margin: 3px 0 0 0; /* Reduced bottom margin */
}
.item-info-header { /* Style for "Item Info" header */
     font-size: 16px;
     text-align: center;
     margin: 3px 0 0 0; /* Reduced bottom margin */
     padding-bottom: 0; /* Remove extra padding */
}

/* Make item info panel more compact */
.item-info-panel {
    padding: 3px 6px; /* Reduced top/bottom padding */
    background-color: rgba(212, 175, 55, 0.05);
    border: 1px solid var(--accent-color);
    border-radius: 5px;
    height: 160px; /* Keep height */
    overflow: hidden;
    margin-bottom: 5px;
}

#itemInfo {
    display: flex;
    flex-direction: column;
    gap: 2px; /* Reduce gap between item properties */
    height: 100%;
    font-size: 14px;
}

.item-top-line {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
    justify-content: space-between; /* Push name and type apart */
}

.item-info-icon {
    font-size: 28px;
}

.item-info-name {
    font-size: 18px;
    font-weight: 500;
}

.item-info-type {
    font-style: italic;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    margin-bottom: 5px; /* Keep existing styles */
}

.item-info-type-right { /* New class for right-aligned type */
    font-style: italic;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    text-align: right; /* Align text to the right */
}

.item-info-property-line {
    display: flex;
    justify-content: space-between;
    padding: 2px 0; /* Reduce padding */
    border-bottom: 1px dashed rgba(212, 175, 55, 0.2);
}

.item-info-property-name {
    text-align: left;
}

.item-info-property-value {
    text-align: right;
}

.item-info-price-line {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
}

/* Adjust backpack grid to be more compact */
.inventory-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 6px;
    padding: 8px;
    background-color: rgba(212, 175, 55, 0.05);
    border: 1px solid var(--accent-color);
    border-radius: 5px;
    min-height: 160px;
}

/* New Resource Layout Styles */
.resources-and-backpack { /* Parent container for keys/gold and resource grid */
    display: flex; /* Arrange children horizontally */
    align-items: flex-start; /* Align items to the top */
    gap: 15px; /* Space between keys/gold group and resource grid */
    padding: 5px 8px;
    background-color: rgba(212, 175, 55, 0.05);
    border-top: 1px solid rgba(212, 175, 55, 0.2);
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
    margin-bottom: 5px;
}

.keys-gold-group { /* Vertical group on the left */
    display: flex;
    flex-direction: column; /* Stack keys and gold vertically */
    align-items: flex-start; /* Align text to the left */
    gap: 4px; /* Space between keys and gold */
    font-size: 1.1em;
    font-weight: 500;
    flex-shrink: 0; /* Prevent shrinking */
}

#playerKeys, #backpackGold {
    cursor: default; /* Indicate non-interactive */
}

#resourceGridContainer {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
    grid-template-rows: repeat(2, auto);    /* 2 rows, auto height */
    gap: 4px 10px; /* Row gap, Column gap */
    justify-items: start; /* Align items to the start (left) */
    align-items: center;
}

.resource-item {
    font-size: 1.1em;
    font-weight: 500;
    cursor: default; /* Indicate non-interactive */
}

.resource-icon-img { /* Style for resource images if used */
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-left: 3px; /* Space between count and icon */
}



/* Apply rarity colors to resource text */
#backpackGold { /* Keep gold color consistent */
    color: var(--accent-color);
}
#resourceCommon {
    color: var(--common-color);
}
#resourceUncommon {
    color: var(--uncommon-color);
}
#resourceRare {
    color: var(--rare-color);
}
#resourceLegendary {
    color: var(--legendary-color);
}

.item-slot {
    aspect-ratio: 1;
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.2);
    font-size: 30px;
    cursor: pointer;
    padding: 4px;
    min-height: 40px;
}

.item-slot:hover {
    background-color: rgba(212, 175, 55, 0.1);
    border-color: var(--accent-color);
}

/* Floating Encounter Window (Combat + Skills) */
#encounterWindow {
    position: fixed; /* Position relative to viewport */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center the element */
    /* Removed width: 70%; let it size based on content up to max-width */
    max-width: 500px; /* Set a max-width for the floating window */
    z-index: 500; /* <<<--- Ensure the entire window is above other page elements */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center children horizontally */
    gap: 2px; /* Reduced space between combat window and skill grid */
    z-index: 1001; /* Ensure it's above other elements */
    /* Initially hidden - controlled by JS */
    display: none;
    pointer-events: none; /* Allow clicks to pass through container if needed */
}

/* Combat Window (within the container) */
.combat-window {
    /* Removed fixed positioning properties - now positioned by parent */
    background-color: rgba(18, 18, 18, 0.95);
    border: 2px solid var(--accent-color);
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    z-index: 1000; /* Keep z-index if needed */
    padding: 8px; /* Reduced padding */
    display: flex;
    flex-direction: column;
    gap: 8px; /* Reduced gap */
    width: 100%; /* Take full width of the container */
    pointer-events: auto; /* Re-enable pointer events for the window */
}

.combat-window h3 {
    text-align: center;
    font-size: 20px;
    color: var(--accent-color);
    margin: 0 0 10px 0;
    border-bottom: 1px solid var(--accent-color);
    padding-bottom: 8px;
}

#enemyHpDisplay {
    display: flex;
    flex-direction: row; /* Arrange items horizontally */
    /* flex-wrap: wrap; Removed to prevent wrapping */
    justify-content: center; /* Center items horizontally */
    gap: 5px; /* Reduced gap */
    align-items: center; /* Center items vertically */
    overflow-x: auto; /* Enable horizontal scrolling if needed */
    padding-bottom: 5px; /* Reduced space for scrollbar */
}

#enemyHpDisplay .enemy-info-block { /* Target the container for each enemy */
    display: flex; /* Use flexbox for vertical layout and AP positioning */
    flex-direction: column; /* Stack children vertically */
    align-items: center; /* Center children horizontally */
    text-align: center;
    width: 180px; /* Give a fixed width for better alignment */
    min-height: 200px; /* Ensure enough space for AP at bottom */
    margin: 3px; /* Reduced margin */
    padding: 6px; /* Reduced padding */
    background-color: rgba(212, 175, 55, 0.08); /* Slightly adjusted background */
    border-radius: 5px;
    border: 1px solid rgba(212, 175, 55, 0.3); /* Slightly adjusted border */
    position: relative; /* Needed if we were using absolute positioning for AP */
}

/* Styles for the new individual info lines */
.enemy-icon {
    font-size: 24px; /* Make icon slightly larger */
    margin-bottom: 5px;
}

.enemy-name {
    font-weight: bold;
    font-size: 16px;
    color: var(--accent-color);
    margin-bottom: 5px;
}

.enemy-health {
    font-size: 13px;
    margin-bottom: 8px; /* More space after health */
}

.enemy-stat,
.enemy-vulnerabilities,
.enemy-resistances {
    font-size: 12px;
    margin-bottom: 3px; /* Tighter spacing for stats */
    width: 100%; /* Ensure they take full width for centering */
}

.enemy-vulnerabilities span, /* Example if using spans inside */
.enemy-resistances span {
    color: var(--neutral-color); /* Highlight vuln/resist values */
    font-weight: 500;
}

.enemy-ap {
    font-size: 14px;
    font-weight: bold;
    margin-top: auto; /* Pushes AP to the bottom */
    padding-top: 8px; /* Space above AP */
    border-top: 1px dashed rgba(212, 175, 55, 0.4); /* Separator line */
    width: 100%; /* Take full width for centering */
    color: var(--accent-color-hover); /* Different color for AP */
}

/* Remove rules for old structure */
/* .enemy-name-hp removed */
/* .enemy-stat-line removed */

.enemy-stat { /* Individual stat block (Label: Value) */
    font-size: 12px;
    white-space: nowrap; /* Prevent wrapping within a single stat */
}

.enemy-stat-label {
    font-weight: normal; /* Less emphasis than name */
    color: var(--text-color); /* Standard text color */
    margin-right: 4px;
}

.enemy-stat-value {
    font-weight: bold;
    color: var(--accent-color); /* Highlight value */
}

#combatLog {
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    padding: 6px; /* Reduced padding */
    max-height: 100px; /* Reduced max-height */
    overflow-y: auto;
    margin: 5px 0; /* Reduced margin */
}

/* Removed #combatExperienceDisplay rule */

.combat-actions {
    display: flex;
    justify-content: space-around; /* Distribute items horizontally */
    align-items: center; /* Vertically align items */
    gap: 5px; /* Reduced gap */
    margin-top: 5px; /* Reduced margin */
}

/* Style for the new AP display in combat */
.player-ap-display {
    margin-right: 10px; /* Space between AP display and Attack button */
    font-weight: 500;
    color: var(--accent-color); /* Use accent color for visibility */
    vertical-align: middle; /* Align vertically with button */
    font-size: 16px; /* Match attack button font size */
}

#attackButton {
    background-color: var(--danger-color);
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.2s;
    color: white;
    cursor: pointer;
}

#attackButton:hover {
    background-color: #8a2828;
    transform: scale(1.05);
}

/* Debug panel - Sliding drawer */
.debug-panel {
    position: fixed;
    right: -200px; /* Start off-screen */
    top: 40px;
    width: 200px;
    height: calc(100vh - 40px);
    transition: right 0.3s ease;
    z-index: 900;
}

.debug-panel:hover,
.debug-panel.active {
    right: 0; /* Slide in on hover or when active */
}

.debug-panel::before {
    content: none;
}

.scroll-container {
    height: 100%;
    overflow-y: auto;
}

#debugItems {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#debugItems > button {
    margin-bottom: 8px;
    padding: 8px 12px;
    font-size: 14px;
}

#debugItems > div {
    margin-top: 15px;
}

/* Header Buttons Container */
.header-buttons {
    position: absolute; /* Use absolute positioning within the body */
    top: 10px;
    left: 10px;
    z-index: 1001; /* Ensure it's above other elements */
    display: flex; /* Arrange buttons horizontally */
    gap: 10px; /* Space between buttons */
}

/* Individual Header Buttons (Compendium, Sounds) */
.top-left-button {
    /* Removed position: fixed */
    z-index: 100; /* Keep original z-index or adjust as needed */
    background-color: var(--accent-color);
    color: #121212;
    border: none;
    border-radius: 5px;
    padding: 8px 15px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.compendium-panel {
    position: fixed;
    top: 50px;
    left: 10px;
    width: 300px;
    max-height: 80vh;
    background-color: var(--panel-background);
    border: 2px solid var(--accent-color);
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    z-index: 99;
    display: none;
    /* overflow: hidden; */ /* Removed to allow inner scroll */
}

/* Sounds Panel (Mirrors Compendium) */
.sounds-panel {
    position: fixed;
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Fine-tune centering */
    width: 80%;
    max-width: 600px; /* Adjust max-width as needed */
    height: 70%;
    max-height: 500px; /* Adjust max-height as needed */
    background-color: var(--panel-background);
    border: 2px solid var(--accent-color);
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    z-index: 1000; /* Below header buttons but above most content */
    display: none; /* Start hidden */
    flex-direction: column; /* Stack title and content vertically */
}

.sounds-panel h2 {
    text-align: center;
    padding: 10px;
    border-bottom: 1px solid var(--accent-color);
    margin-bottom: 0; /* Remove default margin */
    color: var(--accent-color); /* Ensure title color */
    font-weight: 500; /* Match other panel titles */
}

#soundsScroll {
    flex-grow: 1; /* Allow the scroll container to take remaining space */
    overflow-y: auto;
    padding: 15px;
    display: flex; /* Use flexbox for button layout */
    flex-direction: column; /* Stack buttons vertically */
    gap: 8px; /* Space between sound buttons */
}

/* Styling for individual sound buttons within the panel */
#soundsScroll button {
    width: 100%; /* Make buttons fill the container width */
    text-align: left; /* Align text to the left */
    padding: 10px 15px; /* Adjust padding */
    background-color: rgba(212, 175, 55, 0.1); /* Lighter background */
    border: 1px solid rgba(212, 175, 55, 0.3);
    color: var(--text-color); /* Ensure text is visible */
    border-radius: 4px; /* Match other buttons */
    cursor: pointer; /* Standard cursor */
    font-weight: 400; /* Normal weight */
}

#soundsScroll button:hover {
    background-color: rgba(212, 175, 55, 0.2); /* Slightly darker on hover */
    border-color: var(--accent-color);
}

.sounds-panel h2 {
    text-align: center;
    padding: 10px;
    border-bottom: 1px solid var(--accent-color);
    margin-bottom: 0; /* Remove default margin */
}

#soundsScroll {
    flex-grow: 1; /* Allow the scroll container to take remaining space */
    overflow-y: auto;
    padding: 15px;
    display: flex; /* Use flexbox for button layout */
    flex-direction: column; /* Stack buttons vertically */
    gap: 8px; /* Space between sound buttons */
}

/* Styling for individual sound buttons within the panel */
#soundsScroll button {
    width: 100%; /* Make buttons fill the container width */
    text-align: left; /* Align text to the left */
    padding: 10px 15px; /* Adjust padding */
    background-color: rgba(212, 175, 55, 0.1); /* Lighter background */
    border: 1px solid rgba(212, 175, 55, 0.3);
}

#soundsScroll button:hover {
    background-color: rgba(212, 175, 55, 0.2); /* Slightly darker on hover */
    border-color: var(--accent-color);
}

#compendiumScroll { /* Changed selector from .compendium-scroll to #compendiumScroll */
    max-height: calc(80vh - 40px); /* Adjusted max-height considering panel padding/header */
    overflow-y: auto;
    padding: 15px;
}

/* Item entry in compendium */
.item-entry {
    padding: 12px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
    margin-bottom: 10px;
    font-size: 15px;
}

.item-entry .item-top-line {
    display: flex;
    align-items: center;
    font-family: monospace;
    font-size: 1.2em;
    margin-bottom: 2px;
    width: 100%;
    box-sizing: border-box;
}

.item-entry p {
    text-align: left;
    margin: 0;
    padding: 0;
}

.item-icon {
    font-size: 28px;
    margin-right: 10px;
}

/* Rarity colors */
.common { color: var(--common-color); }
.uncommon { color: var(--uncommon-color); }
.rare { color: var(--rare-color); }
.legendary { color: var(--legendary-color); }

/* Animation */
@keyframes popEffect {
    0% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-30px);
    }
}

/* Scrollbar customization */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(18, 18, 18, 0.3);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--accent-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-color-hover);
}

.compendium-scroll h2 {
    margin-bottom: 15px;
    text-align: center;
}

/* Debug panel tab */
.debug-tab {
    position: absolute;
    left: -40px;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--panel-background);
    border: 2px solid var(--accent-color);
    border-right: none;
    border-radius: 5px 0 0 5px;
    height: 100px;
    width: 40px;
    cursor: pointer;
    z-index: 901;
    display: flex;
    align-items: center;
    justify-content: center;
}

.debug-tab::after {
    content: "Debug";
    position: absolute;
    transform: rotate(-90deg);
    color: var(--accent-color);
    font-weight: 500;
    width: 80px;
    text-align: center;
}

/* Game over styling */
#gameInfo h2 {
    color: var(--accent-color);
    font-size: 28px;
    text-align: center;
    margin: 20px 0 10px;
}

.backpack-gold {
    float: right;
}

#gameInfo p {
    color: var(--text-color);
    font-size: 18px;
    text-align: center;
    margin-bottom: 20px;
}

/* Known Skills Section */
.known-skills-section {
    margin-top: 15px; /* Add some top margin */
    padding-top: 10px; /* Add padding above */
    border-top: 1px solid var(--panel-border); /* Add separator line */
}

.known-skills-section h3 {
    margin: 0 0 10px 0;
    color: var(--accent-color); /* Match other headers */
    font-size: 1.1em;
}

.known-skills-container {
    display: flex;
    flex-direction: column;
    gap: 5px; /* Space between skill entries */
}

.known-skill-entry {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95em;
    cursor: help; /* Indicate tooltip */
}

.known-skill-icon {
    font-size: 1.1em;
    min-width: 1.2em; /* Ensure space */
    text-align: center;
}

/* Active Effects Display */
.active-effects-section {
    margin-top: 15px; /* Consistent margin */
    padding-top: 10px; /* Consistent padding */
    border-top: 1px solid var(--panel-border); /* Use panel border color for separator */
}

.active-effects-section h3 {
    margin: 0 0 10px 0;
    color: var(--accent-color); /* Match other headers */
    font-size: 1.1em;
}

.active-effects-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.effect-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.9em;
    cursor: help;
    position: relative;
}

.effect-display.boon {
    background-color: rgba(0, 255, 0, 0.1);
    border: 1px solid rgba(0, 255, 0, 0.3);
}

.effect-display.bane {
    background-color: rgba(255, 0, 0, 0.1);
    border: 1px solid rgba(255, 0, 0, 0.3);
}

.effect-name {
    flex: 1;
}

.effect-duration {
    margin-left: 10px;
    color: #888;
}

.effect-stacks {
    margin-left: 5px;
    color: #888;
}

/* Effect Application Buttons */
.effect-buttons-container {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #444;
}

.effect-buttons-container h4 {
    margin: 0 0 10px 0;
    color: #ddd;
}

.effect-button-row {
    display: flex;
    gap: 10px;
    margin-bottom: 8px;
}

.effect-button {
    flex: 1;
    padding: 5px;
    background-color: #333;
    border: 1px solid #555;
    color: #ddd;
    cursor: pointer;
    transition: background-color 0.2s;
}

.effect-button:hover {
    background-color: #444;
}

.effect-button[data-effect^="b"] {
    background-color: #422;
    border-color: #633;
}

.effect-button[data-effect^="b"]:hover {
    background-color: #533;
}

.tooltip {
    position: fixed;
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 14px;
    max-width: 300px;
    z-index: 1000;
    pointer-events: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--accent-color);
}

.stat-container.modified {
    color: #4a9eff;
}

.stat-name {
    cursor: help;
    color: var(--accent-color);
    font-weight: 500;
}


/* Skill Grid Styles (within the container) */
#skill-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); /* Adjust 60px as needed */
    gap: 3px; /* Reduced gap */
    padding: 5px; /* Reduced padding */
    /* Removed margin-top, margin-left, margin-right - handled by parent */
    max-width: calc(6 * (60px + 3px)); /* Max width for 6 columns */
    background-color: rgba(0, 0, 0, 0.2); /* Optional background */
    border-radius: 5px;
    border: 1px solid rgba(212, 175, 55, 0.2); /* Optional border */
    width: 100%; /* Take full width of the container */
    margin-left: auto; /* Center within the container */
    margin-right: auto;
    pointer-events: auto; /* Re-enable pointer events for the grid */
}

/* Targeting Effect */
@keyframes glow {
  0% { box-shadow: 0 0 2px rgba(255, 221, 87, 0.7); } /* Lighter gold start */
  50% { box-shadow: 0 0 8px rgba(255, 221, 87, 1), 0 0 12px rgba(255, 221, 87, 0.8); } /* Brighter gold glow */
  100% { box-shadow: 0 0 2px rgba(255, 221, 87, 0.7); } /* Lighter gold end */
}

.combat-enemy-display {
    display: inline-block; /* Allow targeting glow */
    padding: 3px 6px;
    margin: 2px;
    border: 1px solid transparent; /* Placeholder for alignment */
    border-radius: 4px;
    transition: border-color 0.2s, background-color 0.2s;
    cursor: pointer; /* Already set in JS, but good fallback */
}

.combat-enemy-display:hover {
    background-color: rgba(212, 175, 55, 0.1); /* Subtle hover */
    border-color: rgba(212, 175, 55, 0.4);
}

.combat-enemy-icon {
    display: inline-block;
    min-width: 1.5em; /* Ensure space for icon */
    text-align: center;
}

.combat-enemy-info {
    margin-left: 5px;
}

.targeted-enemy {
    border: 1px solid var(--accent-color); /* Gold border */
    animation: glow 1.5s infinite ease-in-out;
    background-color: rgba(212, 175, 55, 0.15); /* Slightly stronger background when targeted */
}

.skill-slot {
    position: relative;
    width: 60px; /* Match minmax value */
    height: 60px;
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.3);
    font-size: 28px; /* Adjust emoji size */
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.skill-slot:hover {
    background-color: rgba(212, 175, 55, 0.1);
    border-color: var(--accent-color);
}

.skill-ap-cost {
    position: absolute;
    bottom: 2px;
    right: 2px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 10px;
    font-weight: 500;
    padding: 1px 3px;
    border-radius: 3px;
    pointer-events: none; /* Prevent AP cost from blocking hover/click on slot */
}

/* Context Menu Styles */
.context-menu-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto); /* Auto height based on content */
    gap: 6px;
    padding: 8px;
    margin-top: 8px; /* Space above the context menu */
    background-color: rgba(212, 175, 55, 0.05);
    border: 1px solid var(--accent-color);
    border-radius: 5px;
}

.context-menu-button {
    padding: 8px 5px; /* Adjust padding for smaller buttons */
    font-size: 12px; /* Smaller font size */
    text-align: center;
    border-radius: 4px;
    border: 1px solid transparent; /* Base border */
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
    min-height: 30px; /* Ensure buttons have some height */
    white-space: nowrap; /* Prevent text wrapping */
    overflow: hidden;
    text-overflow: ellipsis; /* Add ellipsis if text overflows */
}

.context-menu-button:disabled {
    background-color: #444; /* Dark gray background */
    color: #888; /* Lighter gray text */
    border-color: #555; /* Slightly darker border */
    cursor: not-allowed;
}

.context-menu-button:not(:disabled) {
    background-color: var(--accent-color); /* Use accent color for active buttons */
    color: #121212; /* Dark text on accent background */
    border-color: var(--accent-color);
    cursor: pointer;
}

.context-menu-button:not(:disabled):hover {
    background-color: var(--accent-color-hover); /* Darker accent on hover */
    border-color: var(--accent-color-hover);
}

/* Style for the empty placeholder buttons */
.context-menu-button:disabled:empty {
    background-color: rgba(0, 0, 0, 0.2); /* Make empty slots less prominent */
    border-color: rgba(212, 175, 55, 0.1);
}

/* Style for selected item slot */
.item-slot.selected {
    border-color: var(--accent-color); /* Highlight border */
    background-color: rgba(212, 175, 55, 0.15); /* Slightly different background */
    box-shadow: 0 0 5px var(--accent-color); /* Optional glow */
}

/* --- Merchant Window Styles --- */

#merchantWindow {
    /* Inherit base panel styles but override position/size */
    background-color: var(--panel-background);
    border: 2px solid var(--accent-color);
    border-radius: 8px; /* Match combat window */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
    padding: 15px;
    color: var(--text-color);
    position: fixed; /* Position relative to viewport */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%; /* Adjust width as needed */
    max-width: 600px; /* Max width */
    min-width: 450px; /* Min width */
    max-height: 85vh; /* Limit height */
    z-index: 1001; /* Above other elements */
    display: none; /* Initially hidden */
    pointer-events: auto; /* Allow clicks/hovers on the merchant window itself */
    flex-direction: column; /* Arrange content vertically */
    gap: 10px; /* Space between elements */
}

#merchantWindow h2 {
    text-align: center;
    font-size: 20px;
    margin: 0 0 10px 0;
    border-bottom: 1px solid var(--accent-color);
    padding-bottom: 8px;
}

.merchant-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--panel-border);
    padding-bottom: 10px;
}

.merchant-tab-button {
    padding: 8px 15px;
    background-color: #444; /* Inactive tab background */
    color: var(--text-color);
    border: 1px solid var(--panel-border);
    border-bottom: none; /* Remove bottom border for inactive */
    border-radius: 4px 4px 0 0; /* Rounded top corners */
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.merchant-tab-button:hover {
    background-color: #555;
}

.merchant-tab-button.active {
    background-color: var(--panel-background); /* Match panel background */
    color: var(--accent-color);
    border-color: var(--accent-color);
    border-bottom: 1px solid var(--panel-background); /* Hide bottom border visually */
    position: relative;
    top: 1px; /* Slightly overlap the content area border */
    font-weight: bold;
}

.merchant-tab-content {
    display: none; /* Hidden by default, shown by JS */
    flex-direction: column;
    gap: 10px;
}

.merchant-tab-content.active {
    display: flex; /* Show active tab content */
}

.merchant-tab-content h3 {
    font-size: 16px;
    text-align: center;
    margin-bottom: 5px;
}

.merchant-item-grid-container,
.player-sell-item-grid-container {
    /* Use existing scroll-container styles */
    height: 250px; /* Adjust height as needed */
    overflow-y: auto;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--panel-border);
    border-radius: 5px;
}

.merchant-item-grid,
.player-sell-item-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--item-slot-width, 52px), 1fr)); /* Use variable */
    gap: 8px;
}

.merchant-item {
    /* Reuse item-slot styles */
    aspect-ratio: 1;
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.2);
    font-size: var(--item-slot-font-size, 42px); /* Use variable */
    cursor: pointer;
    padding: 4px;
    position: relative; /* For potential overlays or rarity borders */
    transition: background-color 0.2s, border-color 0.2s;
    width: var(--item-slot-width, 52px); /* Use variable */
    height: var(--item-slot-height, 52px); /* Use variable */
}
.merchant-item .item-icon-img { /* Style for images within merchant items */
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}


.merchant-item:hover {
    background-color: rgba(212, 175, 55, 0.1);
    border-color: var(--accent-color);
}

/* Rarity borders/backgrounds for merchant items */
.merchant-item.rarity-common { border-color: var(--common-color); }
.merchant-item.rarity-uncommon { border-color: var(--uncommon-color); }
.merchant-item.rarity-rare { border-color: var(--rare-color); }
.merchant-item.rarity-legendary { border-color: var(--legendary-color); }

/* Use existing selected style */
.merchant-item.selected {
    border-color: var(--accent-color); /* Highlight border */
    background-color: rgba(212, 175, 55, 0.15); /* Slightly different background */
    box-shadow: 0 0 8px var(--accent-color); /* Optional glow */
    border-width: 2px;
}

.merchant-purchase-section,
.merchant-sell-controls {
    display: flex;
    justify-content: flex-end; /* Align controls to the right */
    align-items: center;
    gap: 15px;
    padding-top: 10px;
    border-top: 1px solid var(--panel-border);
    margin-top: 10px;
}

#merchantTotalCost,
#merchantSellTotal {
    font-size: 16px;
    font-weight: 500;
    color: var(--accent-color);
}

#merchantBuyButton,
#merchantSellButton {
    padding: 10px 20px;
    font-size: 16px;
}

#merchantBuyButton:disabled,
#merchantSellButton:disabled {
    background-color: #555;
    cursor: not-allowed;
}

/* Close Button Styling */
.window-close-button {
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: var(--danger-color);
    color: white;
    border: none;
    border-radius: 50%; /* Make it round */
    width: 28px;
    height: 28px;
    font-size: 16px;
    font-weight: bold;
    line-height: 26px; /* Center the 'X' */
    text-align: center;
    cursor: pointer;
    padding: 0; /* Remove default padding */
    transition: background-color 0.2s;
    z-index: 10; /* Ensure it's above other content */
}

.window-close-button:hover {
    background-color: #8a2828; /* Darker red */
}
/* --- End Merchant Window Styles --- */

/* --- Forge Window Styles --- */

#forgeWindow {
    /* Inherit base panel styles but override position/size */
    background-color: var(--panel-background);
    border: 2px solid var(--accent-color);
    border-radius: 8px; /* Match combat window */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
    padding: 15px;
    color: var(--text-color);
    position: fixed; /* Position relative to viewport */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%; /* Adjust width as needed */
    max-width: 600px; /* Max width */
    min-width: 450px; /* Min width */
    max-height: 85vh; /* Limit height */
    z-index: 1001; /* Above other elements */
    display: none; /* Initially hidden */
    pointer-events: auto; /* Allow clicks/hovers on the forge window itself */
    flex-direction: column; /* Arrange content vertically */
    gap: 10px; /* Space between elements */
}

#forgeWindow h2 {
    text-align: center;
    font-size: 20px;
    margin: 0 0 10px 0;
    border-bottom: 1px solid var(--accent-color);
    padding-bottom: 8px;
}

.forge-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--panel-border);
    padding-bottom: 10px;
}

.forge-tab-button {
    padding: 8px 15px;
    background-color: #444; /* Inactive tab background */
    color: var(--text-color);
    border: 1px solid var(--panel-border);
    border-bottom: none; /* Remove bottom border for inactive */
    border-radius: 4px 4px 0 0; /* Rounded top corners */
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.forge-tab-button:hover {
    background-color: #555;
}

.forge-tab-button.active {
    background-color: var(--panel-background); /* Match panel background */
    color: var(--accent-color);
    border-color: var(--accent-color);
    border-bottom: 1px solid var(--panel-background); /* Hide bottom border visually */
    position: relative;
    top: 1px; /* Slightly overlap the content area border */
    font-weight: bold;
}

.forge-tab-content {
    display: none; /* Hidden by default, shown by JS */
    flex-direction: column;
    gap: 10px;
}

.forge-tab-content.active {
    display: flex; /* Show active tab content */
}

.forge-tab-content h3 {
    font-size: 16px;
    text-align: center;
    margin-bottom: 5px;
}

.forge-item-grid-container {
    /* Use existing scroll-container styles */
    height: 250px; /* Adjust height as needed */
    overflow-y: auto;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--panel-border);
    border-radius: 5px;
}

.forge-item-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--item-slot-width, 52px), 1fr)); /* Use variable */
    gap: 8px;
}

.forge-item { /* Style for items in the forge grid */
    /* Reuse item-slot styles */
    aspect-ratio: 1;
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.2);
    font-size: var(--item-slot-font-size, 42px); /* Use variable */
    cursor: pointer;
    padding: 4px;
    position: relative; /* For potential overlays or rarity borders */
    transition: background-color 0.2s, border-color 0.2s;
    width: var(--item-slot-width, 52px); /* Use variable */
    height: var(--item-slot-height, 52px); /* Use variable */
}
.forge-item .item-icon-img { /* Style for images within forge items */
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}


.forge-item:hover {
    background-color: rgba(212, 175, 55, 0.1);
    border-color: var(--accent-color);
}

/* Rarity borders/backgrounds for forge items */
.forge-item.rarity-common { border-color: var(--common-color); }
.forge-item.rarity-uncommon { border-color: var(--uncommon-color); }
.forge-item.rarity-rare { border-color: var(--rare-color); }
.forge-item.rarity-legendary { border-color: var(--legendary-color); }

/* Use existing selected style */
.forge-item.selected {
    border-color: var(--accent-color); /* Highlight border */
    background-color: rgba(212, 175, 55, 0.15); /* Slightly different background */
    box-shadow: 0 0 8px var(--accent-color); /* Optional glow */
    border-width: 2px;
}

.forge-craft-section {
    display: flex;
    justify-content: flex-end; /* Align controls to the right */
    align-items: center;
    gap: 15px;
    padding-top: 10px;
    border-top: 1px solid var(--panel-border);
    margin-top: 10px;
}

#forgeCostDisplay {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-color); /* Default text color, can be updated by JS */
}

#forgeCraftButton {
    padding: 10px 20px;
    font-size: 16px;
}

#forgeCraftButton:disabled {
    background-color: #555;
    cursor: not-allowed;
}



/* Style for the dynamically added auto-target checkbox */
#useDefaultTargetCheckbox {
    accent-color: var(--accent-color); /* Use the gold theme color */
    /* Optional: Adjust size if needed */
    /* width: 16px; */
    /* height: 16px; */
}
/* --- End Merchant Window Styles --- */ /* This comment seems misplaced, should be End Checkbox Style */


/* === Forge Layout and Bottom Bar Styles === */

/* Adjust old section styles - they no longer hold the button/cost */
.forge-craft-section,
.forge-dismantle-section {
    padding: 0;
    border-top: none;
    margin-top: 0;
    /* Remove flex properties if they were used for button positioning */
    display: block;
    min-height: 0; /* Reset min-height */
}

/* Style the new bottom bar */
.forge-bottom-bar {
    display: flex;
    justify-content: space-between; /* Pushes cost left, buttons right */
    align-items: center; /* Vertically center items */
    padding: 10px 5px 5px 5px; /* Padding around the bar */
    border-top: 1px solid var(--panel-border); /* Separator line */
    margin-top: auto; /* Push to the bottom of the forge window flex container */
}

/* Style the cost container within the bottom bar */
.forge-bottom-bar #forgeCostContainer {
    display: flex;
    gap: 15px;
    align-items: center;
    flex-grow: 1; /* Allow it to take space but buttons push it left */
    justify-content: flex-start; /* Align cost items to the left */
}

/* Style EACH individual cost/yield item span within the container */
.forge-cost-item { /* Reusing this class for yield display */
    display: inline-block; /* Make spans behave like blocks for layout */
    font-weight: 500;
    font-size: 1.1em; /* Slightly larger font */
    /* JS will hide/show this element */
}

/* Style the INNER span added by JS for color */
.forge-cost-item span {
    vertical-align: middle; /* Align text and icon nicely if icon is image */
}

/* Ensure rarity colors are applied (keep these) */
.forge-cost-item span[style*="--common-color"] { color: var(--common-color) !important; }
.forge-cost-item span[style*="--uncommon-color"] { color: var(--uncommon-color) !important; }
.forge-cost-item span[style*="--rare-color"] { color: var(--rare-color) !important; }
.forge-cost-item span[style*="--legendary-color"] { color: var(--legendary-color) !important; }

/* Style the wrapper for the action buttons in the bottom bar */
.forge-action-buttons {
    display: flex;
    gap: 10px; /* Space between craft/dismantle buttons */
    flex-shrink: 0; /* Prevent buttons wrapper from shrinking */
}

/* Style the individual action buttons */
.forge-action-button { /* New common class for buttons */
    padding: 10px 20px;
    font-size: 16px;
    /* Add any other shared button styles here if needed */
}

.forge-action-button:disabled {
    background-color: #555;
    cursor: not-allowed;
}

/* Remove old specific button styles and yield container styles */
#forgeCraftButton,
#forgeDismantleButton {
    /* Remove specific margin/flex rules if they existed */
    margin-left: 0;
    flex-shrink: 1; /* Reset shrink property */
}

#forgeYieldContainer,
.forge-yield-item {
    display: none !important; /* Hide old yield elements */
}

/* Remove potentially conflicting old style for single cost display */
#forgeCostDisplay {
    display: none !important; /* Hide the old single display element if it still exists */
}
/* === End Forge Layout and Bottom Bar Styles === */