:root {
    --parchment: #f4e8d0;
    --ink: #1a1a1a;
    --blood: #8b0000;
    --gold: #d4af37;
    --shadow: rgba(0, 0, 0, 0.6);
    --grid-line: rgba(26, 26, 26, 0.1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    touch-action: manipulation;
}

body {
    background-color: #120d0a;
    color: var(--parchment);
    font-family: 'Crimson Text', serif;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    display: flex;
}

/* --- Sidebar Stats (Always Visible) --- */
.sidebar {
    display: none !important; /* Hidden as requested */
    width: 320px;
    background: url('assets/images/individuals/block_007.png') repeat;
    border-right: 4px solid #000;
    display: flex;
    flex-direction: column;
    padding: 20px;
    z-index: 2000;
    box-shadow: 5px 0 15px rgba(0, 0, 0, 0.8);
    transition: transform 0.3s ease;
}

.title-area {
    text-align: center;
    margin-bottom: 30px;
    border-bottom: 2px solid var(--gold);
    padding-bottom: 15px;
}

h1 {
    font-family: 'Cinzel', serif;
    font-size: 2.2rem;
    color: var(--gold);
    text-shadow: 2px 2px 2px #000;
}

.stat-block {
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid var(--gold);
    padding: 15px;
    margin-bottom: 20px;
    position: relative;
    box-shadow: inset 0 0 10px #000;
}

.stat-label {
    font-family: 'Special Elite', cursive;
    font-size: 0.9rem;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.stat-value {
    font-size: 2.8rem;
    font-weight: 700;
    text-align: right;
    line-height: 1;
}

.health-bar {
    height: 12px;
    background: #000;
    border: 1px solid #444;
    margin-top: 10px;
    width: 100%;
}

.health-fill {
    height: 100%;
    background: linear-gradient(to right, #800, #d00);
    transition: width 0.4s ease;
}

.weapon-card-mini {
    margin-top: 10px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px dashed var(--gold);
    font-size: 1.1rem;
    animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.log-container {
    flex-grow: 1;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px;
    font-size: 0.9rem;
    overflow-y: auto;
    border: 1px solid #333;
    font-style: italic;
}

/* --- Main Map Area --- */
.map-viewport {
    flex-grow: 1;
    position: relative;
    background: #1a1a1a;
    overflow: hidden;
}

#dungeonCanvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* --- Combat Modal (Pokemon Style) --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    z-index: 6000;
    /* Raised above FX canvas so it properly darkens the 3D map */
    display: none;
    justify-content: flex-end;
    /* Keep sidebar visible or simulate it */
}

/* UI FX elements (spawned during modal interactions) */
.ui-fx {
    position: fixed;
    pointer-events: none;
    will-change: transform, opacity;
    transform-origin: center;
    mix-blend-mode: screen;
    /* more visible on dark modal background */
}

.ui-fx img {
    display: block;
    width: 48px;
    height: 48px;
    user-select: none;
    pointer-events: none;
    filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.7)) brightness(1.6) saturate(1.2);
}

/* UI projectile specific */
.ui-projectile {
    z-index: 99990;
    /* well above modal overlay content */
}

.ui-projectile img {
    width: auto;
    height: auto;
    max-width: 96px;
    max-height: 96px;
    filter: brightness(1.9) saturate(1.3) drop-shadow(0 12px 36px rgba(0, 0, 0, 0.8));
}

/* Small full-screen hit flash for impact clarity */
.ui-hit-flash {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    mix-blend-mode: screen;
    background: radial-gradient(circle at var(--fx-x, 50%) var(--fx-y, 50%), rgba(255, 220, 180, 0.45) 0%, rgba(255, 160, 120, 0.12) 20%, transparent 45%);
    opacity: 0;
    transition: opacity 240ms ease-out, transform 240ms ease-out;
    z-index: 99999;
    /* above ui canvas */
}

.ui-hit-flash.show {
    opacity: 1;
    transform: scale(1.01);
}

/* Subtle flash used when impact is over the player's HP UI */
.ui-hit-flash.small {
    mix-blend-mode: normal;
    /* avoid strong brightening */
    background: radial-gradient(circle at var(--fx-x, 50%) var(--fx-y, 50%), rgba(255, 220, 180, 0.18) 0%, rgba(255, 160, 120, 0.06) 12%, transparent 28%);
    transition: opacity 120ms ease-out, transform 120ms ease-out;
}

.ui-hit-flash.small.show {
    opacity: 1;
    transform: scale(1.0);
}

/* UI FX canvas styling */
#uiFxCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 99980;
    /* above modal overlay but below full-screen flash */
    mix-blend-mode: screen;
    /* helps UI particles read over dark modal */
}



/* --- New Compact Combat Layout --- */

.combat-container {
    /* Override existing styles for the redesign */
    width: 100% !important;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 20px;
    justify-content: space-between;
    pointer-events: none; /* Let clicks pass through empty spaces */
}

/* Ensure interactive elements re-enable pointer events */
.enemy-area, .dashboard-wrapper {
    pointer-events: auto;
}

.dashboard-wrapper {
    align-self: center;
    display: none !important; /* Deprecated UI, always hide */
    gap: 15px;
    width: auto; /* Shrink to fit content */
    margin-top: auto; /* Push to bottom */
    margin-bottom: 20px; /* Small gap from edge */
    z-index: 100; /* Ensure dashboard is above cards if they overlap */
}

/* Base Enemy Area (Container for all layouts) */
.enemy-area {
    width: 100%;
    /* Flex to allow centering content (default) or grid */
    flex-grow: 1; /* Take up available space */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    /* Remove padding-bottom hacks if flex works */
}

/* Standard panel look */
.dash-panel {
    background: rgba(12, 10, 8, 0.95);
    border: 1px solid var(--gold);
    border-radius: 4px;
    padding: 12px;
    box-shadow: 0 0 20px rgba(0,0,0,0.8);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* LEFT PANEL: Hero Plate */
.hero-plate {
    width: 380px;
    gap: 10px;
}

/* Vitality Row: HP Bar + Big HP Number */
.vitality-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}
.hp-big {
    font-family: 'Crimson Text', serif;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    min-width: 40px;
    text-align: right;
}
.hp-label-small {
    font-size: 0.75rem;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.8;
}
.hp-bar-compact {
    flex-grow: 1;
    height: 12px;
    background: #111;
    border: 1px solid #444;
    position: relative;
}
.hp-fill-compact {
    height: 100%;
    background: linear-gradient(to right, #800, #b00);
    width: 100%; /* JS updates this */
    transition: width 0.3s ease;
}

/* Info Grid: 2 columns */
.hero-info-grid {
    display: flex;
    gap: 12px;
}

/* Weapon Box */
.weapon-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.03);
    padding: 4px 8px;
    border-radius: 4px;
    flex-grow: 1;
}
.weapon-icon-sq {
    width: 42px;
    height: 42px;
    background-color: #000;
    border: 1px solid #666;
    background-size: cover;
    flex-shrink: 0;
}
.weapon-details {
    display: flex;
    flex-direction: column;
    font-size: 0.85rem;
    line-height: 1.2;
}
.durability-text { color: #aaa; }
.soul-coins-text { color: var(--gold); font-weight: bold; margin-top: 2px; }

/* Meta Info (Floor/Deck) */
.meta-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 0.8rem;
    color: #ccc;
    min-width: 80px;
    text-align: right;
}
.meta-row { margin-bottom: 2px; }
.meta-val { color: #fff; font-weight: bold; }

/* Action Footer */
.hero-actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}
.btn-compact {
    flex: 1;
    background: #333;
    color: #ddd;
    border: 1px solid #555;
    padding: 6px;
    font-family: inherit;
    text-transform: uppercase;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-compact:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-compact:hover:not(:disabled) { border-color: var(--gold); color: #fff; background: #444; }
.btn-descend { background: var(--gold); color: #000; border-color: var(--gold); font-weight: bold; }

/* RIGHT PANEL: Loot Locker */
.loot-locker {
    width: auto;
    min-width: 320px;
}
.loot-header {
    font-family: 'Special Elite', cursive;
    text-align: center;
    color: var(--gold);
    font-size: 0.9rem;
    margin-bottom: 8px;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(212,175,55,0.2);
    padding-bottom: 4px;
}
.loot-flex {
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: center;
}
.vertical-divider {
    width: 1px;
    height: 40px;
    background: rgba(255,255,255,0.2);
}
/* Recycled classes tweaks */
.combat-inventory-grid { justify-content: center; }
.trophy-container { justify-content: center; }

/* Fuel Gauge (Integrated in Hero Plate) */
.fuel-gauge-container {
    width: 20px; /* Slim vertical */
    background: #000;
    border: 1px solid #444;
    position: relative;
    height: 52px; /* Match weapon/button height roughly */
    display: flex;
    flex-direction: column-reverse; /* Fill from bottom */
}
.fuel-fill {
    width: 100%;
    background: #ffaa44;
    transition: height 0.3s;
}
.fuel-label {
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.6rem;
    color: #888;
}



/* --- Card Random Layouts --- */

/* Layout for Soul Broker (Merchant) - 2x2 Centered Grid */
.enemy-area.layout-merchant {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    width: 320px;
    height: 380px;
    gap: 20px;
    justify-items: center;
    align-items: center;
    margin: auto; /* Center in parent */
}
.enemy-area.layout-merchant .card { transform: none !important; }

/* Layout 1: Linear (Horizontal Row) */
.enemy-area.layout-linear {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 3%; /* Relative gap */
    width: 100%;
}

/* Layout 2: Staggered / scattered */
.enemy-area.layout-scatter {
    display: grid;
    grid-template-columns: repeat(4, 150px);
    grid-template-rows: repeat(2, 200px);
    width: 100%;
    align-content: center;
    justify-content: center;
    gap: 20px;
}

/* Map the 4 cards to positions */
/* Inner 2 on Top */
.enemy-area.layout-scatter .card:nth-child(2) { grid-column: 2; grid-row: 1; transform: translateY(40px) rotate(-3deg); }
.enemy-area.layout-scatter .card:nth-child(3) { grid-column: 3; grid-row: 1; transform: translateY(40px) rotate(3deg); }

/* Outer 2 on Bottom */
.enemy-area.layout-scatter .card:nth-child(1) { grid-column: 1; grid-row: 2; transform: translateY(-30px) rotate(-6deg); }
.enemy-area.layout-scatter .card:nth-child(4) { grid-column: 4; grid-row: 2; transform: translateY(-30px) rotate(6deg); }


/* Layout 3: Corners (Maximum Spread) */
.enemy-area.layout-corners {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    width: 80%; /* Use most of the width */
    height: 70%;
    justify-items: center;
    align-items: center;
    gap: 0;
}
.enemy-area.layout-corners .card { transform: scale(1.1); box-shadow: 0 0 30px #000; } 

/* Layout 4: The Inverted V (Surrounded top) */
.enemy-area.layout-introverted {
    display: grid;
    width: 60%;
    height: 50%;
    grid-template-areas: 
        "c1 . . c4"
        ". c2 c3 .";
    justify-items: center;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.enemy-area.layout-introverted .card:nth-child(1) { grid-area: c1; transform: rotate(-15deg) translateY(20px); }
.enemy-area.layout-introverted .card:nth-child(2) { grid-area: c2; transform: translateY(-40px); }
.enemy-area.layout-introverted .card:nth-child(3) { grid-area: c3; transform: translateY(-40px); }
.enemy-area.layout-introverted .card:nth-child(4) { grid-area: c4; transform: rotate(15deg) translateY(20px); }


/* Layout 5: Diagonal Staircase (Full Screen) */
.enemy-area.layout-diagonal {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 30px; /* Wider gap */
    width: 90%;
    height: 100%;
}
.enemy-area.layout-diagonal .card:nth-child(1) { transform: translateY(-150px); }
.enemy-area.layout-diagonal .card:nth-child(2) { transform: translateY(-50px); }
.enemy-area.layout-diagonal .card:nth-child(3) { transform: translateY(50px); }
.enemy-area.layout-diagonal .card:nth-child(4) { transform: translateY(150px); }


/* Boss Fight Grid Layout */
.enemy-area.boss-grid {
    display: grid;
    grid-template-columns: 160px 220px 160px;
    grid-template-rows: 220px 140px 140px;
    gap: 20px;
    justify-content: center;
    align-content: center;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.card.boss-guardian {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    align-self: center;
    z-index: 10;
    border-color: #ff0000;
    box-shadow: 0 0 30px #8b0000;
}

.card.boss-weapon,
.card.boss-potion,
.card.boss-armor {
    border-color: #8b0000;
    box-shadow: 0 0 15px rgba(139, 0, 0, 0.6);
}

.card.boss-weapon {
    grid-column: 1;
    grid-row: 2;
    justify-self: end;
}

.card.boss-potion {
    grid-column: 3;
    grid-row: 2;
    justify-self: start;
}

.card.boss-armor {
    grid-column: 2;
    grid-row: 3;
    justify-self: center;
}

/* Bottom: Player Combat Info (Redesigned as 3 segments) */
.player-combat-area {
    align-self: stretch;
    background: rgba(0, 0, 0, 0.45);
    border-top: 4px solid var(--gold);
    display: none !important; /* Hidden as replaced by new UI */
    padding: 0;
    /* Remove padding to handle segments internally */
    min-height: 120px;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
}

/* New Dock Mode for Player Area */
.player-combat-area.dock-mode {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 7000; /* Above modal overlay */
    background: rgba(0, 0, 0, 0.9);
    border-top: 2px solid var(--gold);
    box-shadow: 0 -5px 25px rgba(0,0,0,0.8);
}

.combat-segment-stats,
.combat-segment-inventory,
.combat-segment-trophies {
    flex: 1;
    padding: 10px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(212, 175, 55, 0.2);
}

.combat-segment-trophies {
    border-right: none;
}

.combat-segment-stats {
    flex: 1.6;
    /* More room for consolidated info */
    justify-content: flex-start;
}

.stat-subgrid {
    display: flex;
    gap: 20px;
    margin-top: 5px;
    align-items: flex-start;
}

.stat-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.stat-inline-header {
    display: flex;
    justify-content: space-between;
}

.stat-main-values {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
}

.stat-meta-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--gold);
    margin-top: 5px;
    opacity: 0.9;
}

.weapon-info-row {
    display: flex;
    gap: 12px;
    align-items: center;
}

.weapon-art-combat {
    width: 42px;
    height: 42px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--gold);
    background-size: 900% 100%;
    flex-shrink: 0;
}

.weapon-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.soul-coins-modal {
    margin-top: 4px;
    color: var(--gold);
    font-size: 0.9rem;
    font-weight: 700;
}

.health-bar-container {
    height: 10px;
    background: #000;
    border: 1px solid #444;
    margin-top: 5px;
    position: relative;
    overflow: hidden;
}

.weapon-name {
    font-weight: 700;
    font-size: 1rem;
    color: var(--gold);
    text-transform: uppercase;
}

.weapon-detail {
    font-size: 0.8rem;
    font-style: italic;
    opacity: 0.7;
}

/* Middle: Inventory Flex Row */
.combat-segment-inventory {
    flex: 1.5;
    justify-content: center;
    align-items: center;
}

.combat-inventory-grid {
    display: grid;
    grid-template-columns: repeat(3, 48px);
    grid-template-rows: repeat(2, 48px);
    gap: 6px;
    justify-content: center;
    justify-items: center;
}

.combat-inventory-grid>div {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(212, 175, 55, 0.4);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
}

/* Right: Trophy Shelf */
.trophy-container {
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 0;
    overflow-y: auto;
    align-content: flex-start;
}

.mini-trophy {
    width: 32px;
    height: 44px;
    padding: 2px;
}

.card {
    width: 160px;
    aspect-ratio: 2.5/3.5;
    background: rgba(244, 232, 208, 0.1);
    /* Very faint parchment tint */
    color: var(--parchment);
    border-radius: 8px;
    border: 6px solid #222;
    padding: 12px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    /* Keep art inside */
    transform-style: preserve-3d;
    /* allow 3D flip */
    backface-visibility: hidden;
}

/* Card death flip (3D) */
.card.dead-flip {
    transform-origin: center;
    transform: rotateX(90deg) scale(0.6);
    opacity: 0;
    transition: transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 320ms ease;
}

.card:hover {
    transform: translateY(-20px) scale(1.05);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.8), 0 0 20px var(--gold);
}

.card.monster {
    background-color: rgba(139, 0, 0, 0.2);
    color: var(--parchment);
    border-color: #8b0000;
}

.card.weapon {
    background-color: rgba(68, 68, 68, 0.4);
    color: var(--parchment);
    border-color: #444;
}

.card.potion {
    background-color: rgba(0, 102, 0, 0.2);
    color: var(--parchment);
    border-color: #006600;
}

.card.gift {
    background-color: rgba(212, 175, 55, 0.2);
    color: var(--gold);
    border-color: var(--gold);
    box-shadow: 0 0 15px var(--gold);
}

.card.bonfire {
    background-color: rgba(255, 102, 0, 0.2);
    color: #ff6600;
    border-color: #ff6600;
    box-shadow: 0 0 15px #ff6600;
}

.card .suit {
    font-size: 2.5rem;
    line-height: 1;
    margin-bottom: 5px;
}

.card .val {
    font-family: 'Cinzel', serif;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
}

.card .name {
    font-family: 'Special Elite', cursive;
    font-size: 0.85rem;
    margin-top: auto;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 5px;
    text-transform: uppercase;
    border-top: 1px solid var(--gold);
}

.card-art-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 900% 100%;
    z-index: 0;
    filter: brightness(0.7);
}

.card .suit,
.card .val,
.card .name {
    position: relative;
    z-index: 1;
    text-shadow: 2px 2px 4px #000;
}

/* Trophy Styles */
.trophy-container {
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-left: 20px;
    border-left: 1px solid rgba(212, 175, 55, 0.3);
    max-height: 90px;
    overflow-y: auto;
    align-content: flex-start;
}

.mini-trophy {
    width: 32px;
    height: 44px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 2px;
}
/*    position: relative;
}*/

.mini-trophy .suit {
    font-size: 0.9rem;
    line-height: 1;
    margin-bottom: 1px;
}

.mini-trophy .val {
    font-weight: bold;
    font-size: 0.8rem;
    line-height: 1;
}

.mini-trophy.red {
    color: #800;
    border-color: #800;
    background: #fff;
}

.mini-trophy.black {
    color: #333;
    border-color: #333;
    background: #eee;
}

/* Deal Animation */
@keyframes cardDeal {
    from {
        transform: translate(-300px, -200px) rotate(-45deg);
        opacity: 0;
    }

    to {
        transform: translate(0, 0) rotate(0deg);
        opacity: 1;
    }
}

.card.dealing {
    animation: cardDeal 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) backwards;
}

.combat-message {
    font-family: 'Special Elite', cursive;
    font-size: 1.5rem;
    color: var(--parchment);
    margin-bottom: 10px;
    min-height: 2em;
    /* Ensure stability during text updates */
    display: flex;
    align-items: center;
}

.btn-group {
    display: flex;
    gap: 15px;
}

.v2-btn {
    background: var(--gold);
    color: #000;
    border: none;
    padding: 12px 24px;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 4px 4px 0 var(--ink);
}

.v2-btn:hover {
    background: #fff;
}

.v2-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Mobile Adjustments */
@media (max-width: 900px) {
    body {
        flex-direction: column-reverse;
    }

    .sidebar {
        width: 100%;
        height: 200px;
        border-right: none;
        border-top: 4px solid var(--ink);
    }

    .combat-container {
        width: 100%;
    }
}

/* Avatar Selection */
.avatar-modal {
    position: fixed;
    top: 0;;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 6000;
}

.avatar-options {
    display: flex;
    gap: 40px;
    max-width: 900px;
}

.avatar-card {
    width: 300px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    border: 4px solid transparent;
    text-align: center;
}

.avatar-card:hover {
    transform: scale(1.05);
    border-color: var(--gold);
    box-shadow: 0 0 30px var(--gold);
}

.avatar-img {
    width: 100%;
    aspect-ratio: 2/3;
    background-size: cover;
    background-position: center;
    margin-bottom: 20px;
}

.avatar-card span {
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    color: var(--gold);
    display: block;
}

/* Animated Card */
@keyframes anime-card-art {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 100% 0%;
    }
}

.animated-card-art {
    animation: anime-card-art 2s steps(24) infinite !important;
}

#merchantPortrait {
    position: fixed;
    z-index: 6001;
    pointer-events: none;
    display: none;
    /* Controlled by JS */
    flex-direction: column;
    justify-content: flex-end;
    transition: height 0.3s ease-out, bottom 0.3s ease-out;
}

#merchantPortrait img {
    height: 100%;
    width: auto;
    filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.6));
    object-fit: contain;
}

/* Floating Control Box */
.control-box {
    position: fixed;
    top: 20px;
    left: 20px;
    width: 320px;
    max-height: 400px;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid var(--gold);
    padding: 15px;
    z-index: 5000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: auto;
}

/* --- Bonfire UI --- */
#bonfireUI {
    position: fixed;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 6500; /* Above modal overlay (6000), below Dock (7000) */
    display: none; /* Toggled by JS */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 220px; /* Increased to ensure buttons clear the dock */
    pointer-events: auto;
}

#bonfireUI h2 {
    color: var(--gold);
    font-family: 'Cinzel', serif;
    font-size: 3rem;
    margin-bottom: 20px;
    text-shadow: 0 2px 4px #000;
}

#bonfireStatus {
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 30px;
}

#bonfireImage {
    width: 300px;
    height: 300px;
    margin-bottom: 30px;
}

/* --- Title Screen / Attract Mode --- */
#gameLogo {
    position: fixed;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    max-width: 90%;
    z-index: 5500; /* Below modal (6000), above 3D (0) */
    pointer-events: none;
    filter: drop-shadow(0 0 20px #000);
    transition: opacity 1s ease;
}

/* --- Inventory Modal (Diablo Style) --- */
#inventoryModal {
    display: none; /* Toggled by JS */
    align-items: center;
    justify-content: center;
    z-index: 7500; /* Above dock (7000) */
}

.inventory-content {
    width: 900px;
    max-width: 95vw;
    height: 790px;
    max-height: 90vh;
    background: rgba(10, 10, 10, 0.95);
    border: 2px solid var(--gold);
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 120px;
    padding: 20px;
    gap: 20px;
    position: relative;
}

.inventory-left {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    border: 1px solid #333;
    background: #151515;
    display: flex;
    justify-content: center;
    align-items: center;
}

.paper-doll {
    width: 300px;
    height: 450px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}

/* Equipment Slots positioned over the doll */
.equip-slot {
    position: absolute;
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--gold);
    box-shadow: inset 0 0 10px #000;
    cursor: pointer;
}

.equip-slot.head { top: 10px; left: 118px; }
.equip-slot.chest { top: 100px; left: 118px; }
.equip-slot.hands { top: 180px; left: 20px; } /* Left side */
.equip-slot.weapon { top: 180px; right: 20px; } /* Right side (Main Hand) */
.equip-slot.legs { top: 300px; left: 118px; }

.inventory-right {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
}

.backpack-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 5px;
    margin-top: 10px;
}

.inv-slot {
    aspect-ratio: 1;
    background: rgba(50, 50, 50, 0.3);
    border: 1px solid #444;
    cursor: pointer;
    position: relative;
}

.inv-slot:hover { border-color: #888; }

.inventory-bottom {
    grid-column: 1 / span 2;
    grid-row: 2;
    border-top: 1px solid #333;
    padding-top: 10px;
}

.hotbar-grid {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

/* --- Inventory Modal (Diablo Style) --- */
#inventoryModal {
    display: none; /* Toggled by JS */
    align-items: center;
    justify-content: center;
    z-index: 7500; /* Above dock (7000) */
}

.inventory-content {
    width: 900px;
    max-width: 95vw;
    height: 790px;
    max-height: 90vh;
    background: rgba(10, 10, 10, 0.95);
    border: 2px solid var(--gold);
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 120px;
    padding: 20px;
    gap: 20px;
    position: relative;
}

.inventory-left {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    border: 1px solid #333;
    background: #151515;
    display: flex;
    justify-content: center;
    align-items: center;
}

.paper-doll {
    width: 300px;
    height: 450px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}

/* Equipment Slots positioned over the doll */
.equip-slot {
    position: absolute;
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--gold);
    box-shadow: inset 0 0 10px #000;
    cursor: pointer;
}

.equip-slot.head { top: 10px; left: 118px; }
.equip-slot.chest { top: 100px; left: 118px; }
.equip-slot.hands { top: 180px; left: 20px; } /* Left side */
.equip-slot.weapon { top: 180px; right: 20px; } /* Right side (Main Hand) */
.equip-slot.legs { top: 300px; left: 118px; }

.inventory-right {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
}

.backpack-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 5px;
    margin-top: 10px;
}

.inv-slot {
    aspect-ratio: 1;
    background: rgba(50, 50, 50, 0.3);
    border: 1px solid #444;
    cursor: pointer;
    position: relative;
}

.inv-slot:hover { border-color: #888; }

.inventory-bottom {
    grid-column: 1 / span 2;
    grid-row: 2;
    border-top: 1px solid #333;
    padding-top: 10px;
    display: flex;
    gap: 20px;
}

.hotbar-grid {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.inventory-hotbar-section {
    flex: 0 0 auto;
}

.inventory-desc-section {
    flex: 1;
    border-left: 1px solid #333;
    padding-left: 20px;
    color: #ccc;
    font-family: 'Special Elite', cursive;
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.desc-title {
    color: var(--gold);
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
    margin-bottom: 5px;
}

/* --- Class & Mode Selection --- */
.class-selection-container {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
    max-width: 800px;
}

.class-card {
    width: 220px;
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid #444;
    padding: 15px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.class-card:hover, .class-card.selected {
    border-color: var(--gold);
    background: rgba(212, 175, 55, 0.1);
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.2);
}

.class-name {
    font-family: 'Cinzel', serif;
    font-size: 1.4rem;
    color: var(--gold);
    margin-bottom: 10px;
}

.class-desc {
    font-size: 0.9rem;
    color: #ccc;
    line-height: 1.4;
}

.mode-selection {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-bottom: 30px;
    font-family: 'Cinzel', serif;
}

.mode-option label {
    cursor: pointer;
    color: var(--parchment);
    font-size: 1.1rem;
}

.class-icon-display {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 48px;
    height: 48px;
    background-size: 900% 100%;
    border: 2px solid var(--gold);
    background-color: rgba(0,0,0,0.5);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
    z-index: 10;
}

.item-durability {
    position: absolute;
    bottom: 2px;
    right: 2px;
    font-size: 10px;
    color: #fff;
    background: rgba(0,0,0,0.7);
    padding: 1px 3px;
    border-radius: 3px;
    pointer-events: none;
    font-family: 'Cinzel', serif;
}

/* --- Trap UI --- */
#trapUI {
    position: fixed;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 6500;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 220px;
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.85);
}

.trap-option-btn {
    width: 300px;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* --- Intro Sequence --- */
#introModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 8000; /* Above everything */
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.intro-panel {
    width: 800px;
    max-width: 95vw;
    height: 500px;
    max-height: 60vh;
    background-size: cover;
    background-position: center;
    border: 2px solid var(--gold);
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.intro-text-overlay {
    background: rgba(0, 0, 0, 0.85);
    color: var(--parchment);
    padding: 20px;
    font-family: 'Crimson Text', serif;
    font-size: 1.2rem;
    text-align: center;
    border-top: 1px solid var(--gold);
    min-height: 120px;
    max-height: 180px;
    overflow-y: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 0 2px 4px #000;
}

.intro-controls {
    margin-top: 20px;
    display: flex;
    gap: 20px;
}

/* --- Lockpick Minigame --- */
#lockpickUI {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 7000;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#lockpickCanvas {
    border: 4px solid var(--gold);
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.2);
    background: #000;
    cursor: crosshair;
}

.sell-slot {
    margin-top: 10px;
    border: 1px dashed var(--gold);
    background: rgba(212, 175, 55, 0.1);
    color: var(--gold);
    text-align: center;
    padding: 15px;
    font-family: 'Cinzel', serif;
    cursor: pointer;
    transition: background 0.2s;
}

.sell-slot:hover {
    background: rgba(212, 175, 55, 0.3);
}

/* --- Anvil / Crafting --- */
.anvil-section {
    margin-top: 15px;
    border-top: 1px solid #333;
    padding-top: 10px;
    text-align: center;
}
.anvil-slots {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 10px 0;
}
.anvil-slot {
    width: 64px;
    height: 64px;
    border: 1px dashed #666;
    background: rgba(0,0,0,0.3);
    position: relative;
    cursor: pointer;
}
.anvil-slot:hover {
    border-color: var(--gold);
    background: rgba(212, 175, 55, 0.1);
}

/* --- Boss HP Bar (Fake/Cinematic) --- */
#bossHpContainer {
    display: none;
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    max-width: 90%;
    z-index: 9000;
    text-align: center;
    pointer-events: none;
}
#bossHpLabel {
    font-family: 'Special Elite', cursive;
    color: var(--gold);
    font-size: 1.8rem;
    text-shadow: 0 2px 4px #000;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 2px;
}
#bossHpBarFrame {
    width: 100%;
    height: 24px;
    background: #110000;
    border: 2px solid var(--gold);
    box-shadow: 0 0 20px #000;
    position: relative;
}
#bossHpFill {
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #8b0000, #ff0000);
    transition: width 1s ease-out;
    box-shadow: 0 0 10px #ff0000;
}

/* --- GOTHIC MASTER HUD OVERRIDE --- */
#gameplayInventoryBar.gothic-hud-active {
    background: url('assets/images/ui/combat/gothic_master_hud.png') no-repeat center bottom !important;
    background-size: 667px 256px !important;
    width: 667px !important;
    height: 256px !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    gap: 0 !important;
    /* Reset flex layout to allow absolute positioning of children */
    display: block !important; 
    /* Ensure it stays fixed at bottom center */
    bottom: 0px !important; 
    left: 50% !important;
    transform: translateX(-50%) !important;
    /* Ensure pointer events work on children */
    pointer-events: none; 
}

#gameplayInventoryBar.gothic-hud-active > * {
    pointer-events: auto; /* Re-enable clicks on children */
    position: absolute !important;
}

/* 1. The Orb (Weapon Button) */
#gameplayInventoryBar.gothic-hud-active #mapWeaponBtn {
    /* Position for the large circular area on the left */
    width: 116px !important; 
    height: 116px !important;
    border-radius: 50% !important;
    border: none !important;
    /* Adjust these based on the image layout */
    left: 43px !important; 
    top: 57px !important;
    /* Ensure image covers the circle */
    background-color: transparent !important;
    /* Remove default border/background constraints */
    box-shadow: none !important;
    z-index: 10;
}

/* 2. The Hotbar Slots */
#gameplayInventoryBar.gothic-hud-active #mapHotbar {
    /* Container for the 6 slots */
    display: flex !important;
    gap: 18px !important; /* Estimated gap between slots in image */
    left: 192px !important; /* Start to the right of the orb */
    top: 120px !important;   /* Vertical alignment */
    width: auto !important;
    height: auto !important;
}

/* Individual Slots */
#gameplayInventoryBar.gothic-hud-active #mapHotbar > div {
    /* Make them transparent to show the HUD background slots */
    width: 58px !important;
    height: 58px !important;
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    
    /* Ensure item icons inside are centered/sized correctly */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* #gameplayInventoryBar.gothic-hud-active #mapInventoryBtn {
    /* Maybe hide it for now, or position it creatively */
    /* display: none !important; */
/* } */ 

/* Override the generic pointer-events:auto for the container */
#gameplayInventoryBar.gothic-hud-active #hudBarContainer {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 667px !important;
    height: 256px !important;
    z-index: 1 !important;
    pointer-events: none !important; 
}

/* 4. HP Bar adjustments (Container positions the bar area) */
#gameplayInventoryBar.gothic-hud-active #hudHpContainer {
    /* Position relative to the Full HUD Container */
    position: absolute !important;
    top: 210px !important;
    
    /* Center it at the bottom where the red graphic is */
    left: 80px !important; 
    width: 550px !important; /* Approximate width of the red bottom bar area */
    bottom: 12px !important; /* Sit right near the bottom edge */
    height: 14px !important;
    background: rgba(0, 0, 0, 0.6) !important; /* Dark background for empty portion */
    border-radius: 4px !important;
    overflow: hidden !important;
}

/* The actual fill bar inside */
#gameplayInventoryBar.gothic-hud-active #hudHpBar {
    height: 100% !important;
    background: linear-gradient(to right, #aa0000, #ff3333) !important;
    opacity: 0.7 !important; /* Let the graphic show through a bit */
    border-radius: 4px !important;
    box-shadow: 0 0 10px red !important;
}


/* 5. AP Bar adjustments (Container) */
#gameplayInventoryBar.gothic-hud-active #hudApContainer {
    position: absolute !important;
    top: 90px !important; /* Positioned ABOVE the hotbar slots */
    bottom: auto !important;
    
    /* Align with the top trim above the slots */
    left: 176px !important;
    width: 460px !important;
    height: 8px !important;
    background: rgba(0, 0, 0, 0.6) !important; /* Dark background for empty portion */
    border-radius: 2px !important;
    overflow: hidden !important;
}

#gameplayInventoryBar.gothic-hud-active #hudApBar {
    height: 100% !important;
    background: linear-gradient(to right, #cca300, #ffe600) !important; 
    opacity: 0.9 !important;
    border-radius: 2px !important;
    box-shadow: 0 0 5px gold !important;
}

/* 6. Fuel Meter (Now Visible & Movable) */
#gameplayInventoryBar.gothic-hud-active .fuel-meter-container {
    display: block !important;
    position: absolute !important;
    /* Default position: Right side of the HUD */
    left: 635px !important; 
    top: 100px !important;
    width: 20px !important;
    height: 100px !important;
    z-index: 20 !important;
    border: 1px solid #444 !important;
    background: rgba(0,0,0,0.5) !important;
}

/* Restore default behavior for non-gothic mode (width:100% of container is default) */
/* The container is 100% width/height of parent by defaultJS, so no change needed there */


/* ═══════════════════════════════════════════════════════════════════════════
   QPERF MODE  —  window.qperf(true/false)
   Shrinks the 3D canvas to the top 68 % of the viewport.  All UI elements
   reflow into a dedicated dark strip at the bottom.  Fewer pixels rendered
   = higher FPS on lower-end machines.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Strip background — body bg colour shows below the canvas */
body.qperf {
    background: #0d0d0f;
}

/* Gold divider line between canvas and UI strip */
body.qperf::after {
    content: '';
    position: fixed;
    top: 68vh;
    left: 0; right: 0;
    height: 2px;
    background: linear-gradient(to right,
        transparent,
        rgba(212,175,55,0.55) 15%,
        rgba(212,175,55,0.55) 85%,
        transparent);
    z-index: 9999;
    pointer-events: none;
}

/* Shrink 3D canvas to top 68 % of viewport */
body.qperf #v3-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 68vh !important;
}

/* Gothic bar — centred in strip, scaled down */
body.qperf #gameplayInventoryBar.gothic-hud-active {
    top: calc(68vh + 6px) !important;
    bottom: auto !important;
    left: 50% !important;
    transform: translateX(-50%) scale(0.78) !important;
    transform-origin: top center !important;
}

/* Combat menu — left side of strip (JS still sets left:20px when shown) */
body.qperf #combatMenuGrid {
    top: calc(68vh + 10px) !important;
    bottom: auto !important;
    transform: scale(0.82) !important;
    transform-origin: top left !important;
}

/* Combat tracker — right side of strip */
body.qperf #combatTracker {
    top: calc(68vh + 10px) !important;
    bottom: auto !important;
    right: 20px !important;
    left: auto !important;
}

/* ── CSS Fog Overlay ─────────────────────────────────────────── */
@keyframes fogDriftA {
    0%   { transform: translate(0%,0%) rotate(0deg); }
    25%  { transform: translate(3%,2%) rotate(2deg); }
    50%  { transform: translate(-1%,4%) rotate(-1deg); }
    75%  { transform: translate(-3%,1%) rotate(1.5deg); }
    100% { transform: translate(0%,0%) rotate(0deg); }
}
@keyframes fogDriftB {
    0%   { transform: translate(0%,0%) rotate(0deg) scaleX(-1); }
    25%  { transform: translate(-3%,-2%) rotate(-2deg) scaleX(-1); }
    50%  { transform: translate(2%,-4%) rotate(1.5deg) scaleX(-1); }
    75%  { transform: translate(3%,-1%) rotate(-1deg) scaleX(-1); }
    100% { transform: translate(0%,0%) rotate(0deg) scaleX(-1); }
}
#fogOverlay {
    position: fixed; inset: 0; pointer-events: none; z-index: 50;
    overflow: hidden; display: none; opacity: 0;
    transition: opacity 3s ease;
}
#fogTint { position: absolute; inset: 0; transition: background-color 8s ease; }
.fog-layer {
    position: absolute; inset: -25%; width: 150%; height: 150%;
    background-image: url('assets/images/textures/large-smoke.png');
    background-size: 60% 60%; background-repeat: repeat; opacity: 0.55;
}
#fogLayerA { animation: fogDriftA 50s ease-in-out infinite; }
#fogLayerB { animation: fogDriftB 70s ease-in-out infinite; opacity: 0.45; }
body.modal-open #fogOverlay { opacity: 0 !important; transition: opacity 0.25s ease !important; }
/* ── End CSS Fog Overlay ─────────────────────────────────────── */

/* ≤1080px wide: tighter scaling to avoid overlap */
@media (max-width: 1080px) {
    body.qperf #gameplayInventoryBar.gothic-hud-active {
        transform: translateX(-50%) scale(0.62) !important;
    }
    body.qperf #combatMenuGrid {
        transform: scale(0.72) !important;
    }
    body.qperf #combatTracker {
        transform: scale(0.82) !important;
        transform-origin: top right !important;
    }
}