/* ============================================================
   style.css  —  Path of Blood: Complete Stylesheet
   ============================================================
   Extracted and deduplicated from the original monolithic HTML.
   
   FIXES APPLIED:
   - Removed duplicate .action-icon-btn definition (was declared twice)
   - Removed duplicate .inv-slot definition (was declared twice)  
   - Removed duplicate .badge-item:hover (was declared twice)
   - Removed 3x duplicate .hidden-scrollbar inline <style> blocks
   - Fixed body: font-family fallback changed from serif → sans-serif
   - Fixed body: height:100vh → min-height:100vh (as noted in original comment)
   - Consolidated :root into single block
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700;900&display=swap');

        :root {
            --blood: #8b0000; --blood-glow: rgba(139, 0, 0, 0.6);
            --dark: #050505; --panel: #0d0d0d; --panel-border: #2a0808;
            --gold: #d4af37; --text: #dcdde1; --iron: #333;
            --slot-bg: rgba(5, 5, 5, 0.9);
        }

/* ═══════════════════════════════════════════════════════════
   IMAGE & SCALING LOCK - Prevents zoom/resize issues
   ═══════════════════════════════════════════════════════════ */
* {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: auto;
}

/* Lock all game images to prevent scaling */
.inv-item img,
.item-card-img,
.monster-card-img,
.train-info img,
.forge-material-cell img,
.forge-item-card img,
.badge-display-slot img,
.screenshot-area img,
.tower-monster-img,
.premium-shop-item img,
.wheel-slice-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    -webkit-transform: translateZ(0) scale(1) !important;
    transform: translateZ(0) scale(1) !important;
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: crisp-edges !important;
}

/* Paper-doll slot images: contain to fit full item in box */
.paper-slot img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.95));
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
}

/* Prevent hover scale on images that cause layout shifts */
.inv-item:hover img,
.item-card:hover img,
.monster-card:hover img {
    transform: translateZ(0) scale(1) !important;
    -webkit-transform: translateZ(0) scale(1) !important;
}
.paper-slot:hover img {
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
}

html, body { 
    font-family: 'Cairo', sans-serif; /* Fixed: Cairo is sans-serif */ 
    background: #0a0a0a url('assets/ui/bg.png') no-repeat center center fixed; 
    background-size: cover; /* Use cover instead of 100% 100% so the background doesn't warp */
    color: var(--text); 
    margin: 0;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
} 
    display: flex; 
    flex-direction: column; 
    
    /* Change 'height: 100vh' to 'min-height: 100vh' */
    min-height: 100vh; /* Fixed: was height:100vh, preventing scroll on zoom */
    
    /* Allow the page to scroll if the user zooms in massively */
    overflow-y: auto; 
    overflow-x: hidden;
}

*, button, input, select, textarea {
            font-family: 'Cairo', sans-serif !important;
        }

/* 1. Hide the old tooltips that are trapped inside the boxes */
.stat-tooltip .tooltip-text {
    display: none !important; 
}

/* 2. Make sure the mouse changes to a pointer on items */
.stat-tooltip {
    cursor: pointer;
}

.world-map-container {
    position: relative;
    width: 100%;
    max-width: 700px; /* Adjust size as needed */
    aspect-ratio: 1 / 1; /* Keeps it a perfect square/circle */
    margin: 20px auto;
    border-radius: 50%;
    border: 3px solid var(--gold);
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.2);
    background: #111; /* Placeholder background until you add your image */
    overflow: visible; /* Allows labels to spill outside the circle if needed */
}

/* Achievement Card Styling */
.achievement-card {
    background: rgba(0, 0, 0, 0.8) !important; /* 80% Dark, 20% Transparent */
    border: 1px solid var(--iron);
    border-radius: 8px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

/* 1px Black Border on White Words (Stroke) */
.achieve-text-stroke {
    color: #ffffff;
    font-weight: 700;
    text-shadow: 
        -1px -1px 0 #000,  
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000;
}

/* Fix for Market rendering transparency */
.market-item-card {
    background: rgba(0, 0, 0, 0.8) !important;
    border: 1px solid var(--gold);
    padding: 10px;
    border-radius: 6px;
    text-align: center;
}

/* Rarity Colors (Tiers 1 to 6) */
:root {
    --t1: #cccccc; /* White / Crude */
    --t2: #2ecc71; /* Green / Fine */
    --t3: #3498db; /* Blue / Superior */
    --t4: #9b59b6; /* Purple / Flawless */
    --t5: #e67e22; /* Orange / Perfect */
    --t6: #e74c3c; /* Red / Mythical (Using your blood theme) */
}

/* The Keyframes tell the browser HOW to animate */
@keyframes equipPop {
    0% { transform: scale(0.5); opacity: 0; }
    60% { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* We will attach this class to your equipment items */
.anim-equip {
    animation: equipPop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* ========================================= */
/* 🏆 PERFECT BADGE MEDALS 🏆 */
/* ========================================= */
/* Styling for the Achievement/Badge items */
.badge-item {
    background: rgba(0, 0, 0, 0.8) !important; /* 80% dark, 20% transparent */
    border: 1px solid var(--iron);
    border-radius: 6px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

/* The "1px Black Border" on the white words */
.badge-text-outline {
    color: #ffffff;
    font-weight: 700;
    text-shadow: 
        -1px -1px 0 #000,  
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000; /* This creates the 1px black stroke effect */
}

/* Make them glow and pop out when hovered! */
.badge-item:hover {
    transform: scale(1.15) translateY(-2px);
    box-shadow: 0 8px 15px rgba(212, 175, 55, 0.4), inset 0 0 12px rgba(212, 175, 55, 0.6);
    border-color: #ffe066;
}

/* Individual 30x30 Item Slot */
.inv-slot {
    /* 1. The Dark Glass Effect */
    background: rgba(15, 5, 5, 0.6); /* Deep bloody tint */
    border: 1px solid #3a0808;       /* Dark red border */
    border-radius: 8px;              /* Slightly rounded corners */
    box-shadow: inset 0 0 10px rgba(0,0,0,0.9); /* Shadow inside the box */
    backdrop-filter: blur(4px);      /* The frosted glass blur */
    
    /* 2. The Perfect Square Lock */
    width: 100%;
    aspect-ratio: 1 / 1; /* Forces height to perfectly match width! */
    
    /* 3. Internal Alignment (Centers your items) */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* Needed if you add item numbers/counts later */
    
    /* 4. Smooth Animations */
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}


.inv-slot:hover {
    background: rgba(40, 10, 10, 0.8);
    border-color: var(--gold); /* Border lights up gold */
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.3), inset 0 0 10px rgba(0,0,0,0.9);
    transform: scale(1.05); /* The item "pops" out slightly */
    z-index: 2; /* Ensures it pops OVER the other items */
}

/* The actual 30x30 Midjourney Icon */
.inv-icon {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

/* The Quantity Badge (Bottom Right) */
.inv-qty {
    position: absolute;
    bottom: -6px;
    right: -6px;
    background: var(--panel);
    color: white;
    font-size: 0.7em;
    font-family: monospace;
    font-weight: bold;
    padding: 2px 5px;
    border-radius: 10px;
    border: 1px solid var(--iron);
    z-index: 2;
}

/* Smooth transition for the normal state */
.raid-card {
    transition: all 0.3s ease-in-out;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    /* Merged from duplicate definition below: */
    padding: 15px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.raid-card, .glass-panel {
    /* Creates a subtle gradient from dark gray to pure black */
    background: linear-gradient(145deg, #111111, var(--dark));
    
    /* Adds an inner shadow to make it look like carved stone or thick iron */
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8), 0 4px 6px rgba(0,0,0,0.5);
    
    border-radius: 8px; /* Slightly rounded edges look more polished */
}

/* Reskins the main scrollbar track */
::-webkit-scrollbar {
    width: 10px;
    background-color: var(--dark);
}

/* Reskins the moving thumb part */
::-webkit-scrollbar-thumb {
    background-color: var(--panel-border); 
    border-radius: 5px;
    border: 1px solid var(--iron);
}

/* Adds a hover effect to the scrollbar thumb */
::-webkit-scrollbar-thumb:hover {
    background-color: var(--blood);
}

/* The magic happens on hover */
.raid-card:hover {
    transform: translateY(-5px); /* Lifts the card up slightly */
    box-shadow: 0 8px 15px var(--blood-glow); /* Adds that dark fantasy red glow */
    border-color: var(--blood); /* Highlights the border */
    cursor: pointer;
}

/* Make the buttons pop on hover too */
.raid-card .btn:hover {
    background-color: var(--blood);
    color: var(--text);
    box-shadow: 0 0 10px var(--blood-glow);
}


/* ========================================= */
/* 🩸 DYNAMIC STAT TOOLTIPS 🩸 */
/* ========================================= */
.stat-line.stat-tooltip {
    position: relative;
    cursor: help; 
}

.stat-line.stat-tooltip .tooltip-text {
    visibility: hidden;
    width: 220px;
    background-color: rgba(10, 5, 5, 0.95);
    color: #dcdde1 !important; /* Overrides the gold color */
    text-align: center;
    border: 1px solid var(--blood);
    padding: 8px;
    border-radius: 5px;
    position: absolute;
    z-index: 10000;
    bottom: 120%; /* Appears directly above the box */
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    font-size: 12px !important;
    font-family: 'Cairo', sans-serif !important;
    line-height: 1.5;
    pointer-events: none;
    box-shadow: 0 0 15px rgba(139, 0, 0, 0.8);
    float: none !important; /* Prevents layout breaking */
}

/* The small red triangle pointing down */
.stat-line.stat-tooltip .tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: var(--blood) transparent transparent transparent;
}

.stat-line.stat-tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

.stat-icon {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-left: 5px;
}

.npc-header {
    display: flex;
    align-items: center;
    gap: 15px;
    border-bottom: 1px solid #333;
    padding-bottom: 10px;
    margin-bottom: 15px;
    background: linear-gradient(90deg, rgba(20,0,0,0.8), transparent);
    padding: 10px;
    border-radius: 5px;
}

button, .btn, .item-card, .paper-slot, .map-node, .monster-card {
    cursor: url('assets/ui/cursor-hover.png'), pointer !important;
}

.npc-avatar {
    width: 64px;
    height: 64px;
    border-radius: 4px;
    border: 2px solid var(--gold);
    box-shadow: 0 0 10px #000;
    object-fit: cover;
}

.res-icon {
    width: 24px;
    height: 24px;
    vertical-align: middle;
    margin-left: 5px;
    filter: drop-shadow(0px 2px 2px #000);
}

/* The actual image class (you will add your image link here later) */
.world-map-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    opacity: 0.8;
}

/* The clickable dots on the map */
.map-node {
    position: absolute;
    width: 29px;
    height: 29px;
    background: var(--blood);
    border: 2px solid var(--gold);
    border-radius: 50%;
    cursor: pointer;
    transform: translate(-50%, -50%);
    transition: 0.3s;
    box-shadow: 0 0 18px var(--blood-glow);
    z-index: 5;
}

.map-node:hover {
    transform: translate(-50%, -50%) scale(1.3);
    background: #ff4d4d;
    box-shadow: 0 0 25px #ff4d4d;
}

.map-node.locked {
    background: #333;
    border-color: #555;
    box-shadow: none;
    cursor: not-allowed;
}

/* The floating text below the dot */
.map-node-label {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    color: var(--text);
    font-weight: bold;
    font-size: 0.9em;
    text-shadow: 2px 2px 4px #000, -1px -1px 4px #000;
    pointer-events: none; /* Stops the text from interfering with clicks */
}

        .glass-panel { background: rgba(15, 15, 15, 0.95); border: 1px solid var(--panel-border); box-shadow: inset 0 0 20px #000, 0 5px 15px rgba(0,0,0,0.5); border-radius: 5px; padding: 15px; margin-bottom: 15px; }
        .btn { background: linear-gradient(to bottom, #4a0000 0%, #220000 100%); border: 1px solid var(--blood); color: var(--text); padding: 8px 12px; cursor: pointer; font-family: 'Cairo', sans-serif; font-weight: bold; text-shadow: 1px 1px 2px black; transition: 0.2s; border-radius: 3px; outline: none; }
        .btn:hover:not(:disabled) { background: var(--blood); box-shadow: 0 0 10px var(--blood-glow); border-color: var(--gold); }
        .btn:active:not(:disabled) { transform: scale(0.95); }
        .btn:disabled { opacity: 0.5; cursor: not-allowed; border-color: #555; background: #222; }
        .hidden { display: none !important; }

.train-info img {
    width: 40px !important;  /* Change this number to make it bigger or smaller */
    height: 40px !important; /* Keep it the same as width for a perfect square */
    vertical-align: middle;
    margin-left: 10px; /* Adds a little breathing room between the icon and the text */
}

.header { 
    background: linear-gradient(180deg, #1a0a0a 0%, #050505 100%); /* Rich dark blood/iron gradient */
    padding: 10px 25px; 
    border-bottom: 3px solid var(--blood); 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    color: var(--gold); 
    box-shadow: 0 5px 20px rgba(139, 0, 0, 0.5), inset 0 -2px 10px rgba(0,0,0,0.8); 
    z-index: 10; 
    font-size: 1.1em; 
    font-weight: bold; 
}


.header-section { display: flex; align-items: center; gap: 15px; }

.progress-container { 
    width: 180px; /* Slightly wider */
    background: #0a0a0a; 
    border: 2px solid #333; 
    height: 24px; /* Thicker for better visibility */
    border-radius: 3px; /* Sharp Viking edges */
    position: relative; 
    overflow: hidden; 
    box-shadow: inset 0 0 10px #000, 0 0 5px rgba(0,0,0,0.5); 
    cursor: help; 
}

.progress-bar { height: 100%; transition: width 0.4s ease-out; }

@keyframes barShine {
    0% { background-position: 200% center; }
    100% { background-position: -200% center; }
}

.xp-bar { 
    background: linear-gradient(90deg, #8e44ad, #d2b4de, #8e44ad); 
    background-size: 200% auto;
    animation: barShine 3s linear infinite; /* Sweeping shine effect */
}

.hp-bar { 
    background: linear-gradient(90deg, #800, #ff4d4d, #800); 
    background-size: 200% auto;
    animation: barShine 3s linear infinite; /* Sweeping blood effect */
}

.progress-text { position: absolute; inset: 0; text-align: center; font-size: 0.9em; line-height: 24px; color: #fff; text-shadow: 1px 1px 3px #000; font-weight: bold; font-family: monospace; }

/* Pulsing Energy Text */
@keyframes energyPulse {
    0% { text-shadow: 0 0 5px #3498db; transform: scale(1); }
    50% { text-shadow: 0 0 15px #3498db; transform: scale(1.05); }
    100% { text-shadow: 0 0 5px #3498db; transform: scale(1); }
}
.energy-text {
    color: #3498db;
    font-weight: 900;
    display: inline-block;
    animation: energyPulse 2s infinite ease-in-out;
}

.header-badge {
    background: rgba(139, 0, 0, 0.2);
    border: 1px solid var(--blood);
    padding: 6px 15px;
    border-radius: 4px;
    box-shadow: inset 0 0 10px #000;
    text-shadow: 1px 1px 3px #000;
}


	#main-game-logo {
            max-width: 90%; /* Ensures it never spills out of its container */
            max-height: 120px; /* Limits how tall it can get */
            display: block; 
            margin: 0 auto 15px auto; /* Centers it perfectly and adds space below */
            filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.8)); /* Adds a cool dark shadow behind the logo */
            object-fit: contain; /* Prevents the image from stretching or looking squashed */
        }

        #global-tooltip { position: absolute; background: rgba(10, 10, 10, 0.95); border: 1px solid var(--gold); color: #fff; padding: 8px 12px; border-radius: 4px; font-size: 0.9em; pointer-events: none; z-index: 1000; box-shadow: 0 0 15px rgba(0,0,0,0.8); white-space: nowrap; font-family: 'Cairo', sans-serif; }

        .main-layout { display: flex; flex: 1; overflow: hidden; min-height: 0; }
	.sidebar {
            width: 250px;
            flex-shrink: 0;
            background: #111;
            border-left: 2px solid var(--iron);
            padding: 20px 10px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            overflow-y: auto;
            overflow-x: hidden;
            height: 100%;
            position: sticky;
            top: 0;
            align-self: flex-start;
            max-height: 100vh;
            background-image: url('assets/ui/panel.png');
            background-size: cover;
            background-position: center;
        }
        .sidebar::-webkit-scrollbar { width: 5px; } .sidebar::-webkit-scrollbar-thumb { background: var(--blood); border-radius: 5px; }
        .sidebar-header {
            border-radius: 6px;
            overflow: hidden;
            position: relative;
            height: 64px;
            min-height: 64px;
            flex-shrink: 0;
            border: 1px solid var(--blood);
            margin-top: 8px;
            margin-bottom: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }
        .sidebar-header .sh-bg {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            z-index: 0;
        }
        .sidebar-header::before {
            content: '';
            position: absolute;
            inset: 0;
            background: rgba(0,0,0,0.55);
        }
        .sidebar-header::after {
            content: '';
            position: absolute;
            inset: 0;
            opacity: 0.06;
            background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(212,175,55,0.4) 10px, rgba(212,175,55,0.4) 11px);
            pointer-events: none;
        }
        .sidebar-header .sh-text {
            position: relative;
            z-index: 1;
            font-size: 1.15em;
            font-weight: 900;
            letter-spacing: 4px;
            text-shadow: 0 2px 8px rgba(0,0,0,0.9), 0 0 20px rgba(0,0,0,0.6);
        }
        .sidebar-header .sh-line {
            position: relative;
            z-index: 1;
            width: 60%;
            height: 1px;
            margin-top: 4px;
        }
        .sidebar-header:first-child { margin-top: 0; }
        .sh-hero { border-color: #8b0000; }
        .sh-hero .sh-text { color: #d4af37; }
        .sh-hero .sh-line { background: linear-gradient(90deg, transparent, #d4af37, transparent); }
        .sh-hero::before { background: linear-gradient(135deg, rgba(26,5,5,0.85), rgba(0,0,0,0.55)); }
        .sh-battle { border-color: #b45309; }
        .sh-battle .sh-text { color: #f39c12; }
        .sh-battle .sh-line { background: linear-gradient(90deg, transparent, #f39c12, transparent); }
        .sh-battle::before { background: linear-gradient(135deg, rgba(26,15,5,0.85), rgba(0,0,0,0.55)); }
        .sh-city { border-color: #1a6585; }
        .sh-city .sh-text { color: #85c1e9; }
        .sh-city .sh-line { background: linear-gradient(90deg, transparent, #3498db, transparent); }
        .sh-city::before { background: linear-gradient(135deg, rgba(5,10,21,0.85), rgba(0,0,0,0.55)); }
        .sh-records { border-color: #7d6608; }
        .sh-records .sh-text { color: #d4af37; }
        .sh-records .sh-line { background: linear-gradient(90deg, transparent, #d4af37, transparent); }
        .sh-records::before { background: linear-gradient(135deg, rgba(15,13,5,0.85), rgba(0,0,0,0.55)); }
        .sidebar .btn { font-size: 1.1em; font-weight: 900; letter-spacing: 0.5px; padding: 10px; }
	.content { flex: 1; padding: 20px; overflow-y: auto; background: transparent; }

       #setup-screen {
            position: fixed;
            inset: 0;
            background: #000;
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            padding-top: 16vh;
            flex-direction: column;
            background-image: url('assets/ui/main.png');
            background-size: cover;
            background-position: center;
            overflow-x: hidden;
        }

/* ==========================================
   نظام التول تيب الموحد (Tooltip System)
========================================== */
.equip-tooltip {
    position: absolute;
display: none !important;
    top: 100%; /* يبدأ من الأسفل قليلاً */
    left: 50%;
    transform: translateX(-50%);
    width: max-content; 
    min-width: 180px; /* تم زيادة العرض قليلاً ليحتوي النصوص براحة */
    background: rgba(12, 5, 5, 0.98); /* خلفية داكنة جداً لسهولة القراءة */
    border: 1px solid var(--gold);
    border-radius: 6px;
    padding: 12px 15px;
    text-align: right; 
    direction: rtl;
    box-shadow: 0 10px 25px rgba(0,0,0,0.9), inset 0 0 10px #000;
    z-index: 10000 !important; /* ضمان بقائه فوق كل شيء */
    
    /* مخفي افتراضياً */
    opacity: 0;!important;
    visibility: hidden!important;
    transition: 0.2s all ease-in-out;
    pointer-events: none; /* يمنع التول تيب من إعاقة نقرات الماوس */
    
    /* أمر مهم جداً لمنع انهيار الارتفاع */
    bottom: auto !important; 
}

/* حركة الظهور الانسيابية لجميع أنواع العتاد (المخزن، السوق، واللبس) */
.paper-slot:hover > .equip-tooltip,
.item-card:hover > .equip-tooltip,
.inv-item:hover > .equip-tooltip,
.forge-item-card:hover > .equip-tooltip,
.dse-pick-card:hover > .equip-tooltip {
    opacity: 1;
    visibility: visible;
    top: 108%; /* ينزلق للأسفل قليلاً عند التأشير */
}

/* DSE picker card hover */
.dse-pick-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.8), inset 0 0 12px rgba(230,126,34,0.2) !important;
    z-index: 9999 !important;
}

        .class-grid { display: flex; gap: 15px; margin-top: 30px; }
        .class-card { background: var(--panel); border: 2px solid var(--blood); padding: 20px; width: 140px; text-align: center; cursor: pointer; transition: 0.3s; border-radius: 5px; box-shadow: 0 0 15px rgba(0,0,0,0.5); }
        .class-card:hover { transform: translateY(-10px); box-shadow: 0 0 20px var(--blood); border-color: var(--gold); }

        .char-main-container { display: grid; grid-template-columns: 350px 1fr; gap: 20px; }

.paperdoll-panel {
    background-image: url('assets/paperdoll2_bg.jpg'); 
    background-size: auto;
    background-position: center; 
    background-repeat: no-repeat;  
    height: clamp(300px, 65vh, 500px); 
    
    position: relative; 
    border-radius: 8px; 
    border: 1px solid var(--panel-border);
    box-shadow: inset 0 0 150px rgba(0, 0, 0, 0.95), inset 0 0 30px rgba(0, 0, 0, 0.8);
}

.equip-paper-doll {
    position: relative;
    width: 100%;
    height: 100%;
    flex-grow: 1;
    background-image: url('assets/ui/warriorpaperdoll.png'); /* overridden by JS per class */
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    box-shadow: inset 0 0 100px rgba(0,0,0,0.95), inset 0 0 30px rgba(0,0,0,0.8);
    overflow: hidden;
}
        /* Slots — % size so they scale with container at any zoom level */
        .paper-slot {
            position: absolute;
            width: 15%;
            height: 15%;
            min-width: 69px;
            min-height: 69px;
            max-width: 138px;
            max-height: 138px;
            background: transparent;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: 0.2s all;
            z-index: 5;
            border-radius: 10px;
            box-sizing: border-box;
        }

        .paper-slot:hover {
            background: rgba(255,255,255,0.05);
            box-shadow: inset 0 0 15px rgba(212,175,55,0.4);
        }

        .paper-slot img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            filter: drop-shadow(0 4px 8px rgba(0,0,0,0.95));
        }


        .shop-grid { 
            display: grid; 
            grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); 
            gap: 8px; 
            margin-top: 15px; 
        }
        

        
        .item-card:hover, .paper-slot:hover, .shop-item:hover, .inv-item:hover, .forge-item-card:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.8); z-index: 9999 !important; }
        .item-card-img { 
            width: 100%; 
            height: 100%; 
            display: block; 
            object-fit: cover; 
            border-radius: 4px; 
        }

        .action-icon-btn { position: absolute; bottom: 4px; left: 4px; width: 26px; height: 26px; background: rgba(15, 5, 5, 0.95); border: 1px solid var(--gold); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 0.9em; z-index: 50; transition: 0.2s; }
        .action-icon-btn:hover { background: var(--blood); transform: scale(1.15); }

        .action-price-tooltip { position: absolute; bottom: 130%; left: 50%; transform: translateX(-50%); background: #000; border: 1px solid var(--gold); color: #fff; padding: 4px 8px; border-radius: 4px; font-size: 0.8em; font-weight: bold; white-space: nowrap; opacity: 0; visibility: hidden; transition: 0.2s; pointer-events: none; z-index: 100; box-shadow: 0 2px 10px #000; }
        .action-icon-btn:hover .action-price-tooltip { opacity: 1; visibility: visible; }
        .item-card:hover > .equip-tooltip { opacity: 1; visibility: visible; top: 105%; }

        

	.slot-label { position: absolute; top: 4px; color: #777; font-size: 1.02em; font-weight: bold; }
        .slot-item-name { margin-top: 15px; color: var(--gold); font-weight: bold; text-align: center; font-size: 1.02em; }
        
        .stats-area { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
        .stat-line { background: #000; padding: 8px; border: 1px inset #222; font-size: 0.95em; border-right: 3px solid var(--iron); }
        .stat-line span { color: var(--gold); float: left; font-weight: bold; font-family: monospace; font-size: 1.1em;}

        .skills-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 15px; }
        .skill-card { background: #0a0a0a; border: 2px solid #333; border-radius: 5px; padding: 10px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: space-between; }
        .skill-card:hover { border-color: var(--gold); box-shadow: 0 0 10px rgba(212, 175, 55, 0.2); }
.skill-icon-placeholder { 
    width: 80px; 
    height: 80px; 
    background: #000; 
    border: 2px solid var(--blood); 
    border-radius: 4px;
    margin-bottom: 10px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 1.5em; 
    overflow: hidden; 
}
        .skill-title { color: var(--gold); font-size: 1em; font-weight: bold; margin-bottom: 5px; }
        .skill-desc { color: #888; font-size: 0.8em; margin-bottom: 10px; line-height: 1.2; height: 30px;}

        .inv-grid, .shop-grid { 
            display: grid; 
            grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); 
            gap: 15px; 
            margin-top: 15px; 
            padding: 15px; 
            background: rgba(0,0,0,0.2); 
        }
        
        /* كرت العتاد (المربع الكامل) والمربعات الفارغة */
        .item-card, .empty-slot {
            position: relative;
            width: 100%;
            aspect-ratio: 1 / 1; 
            border: 1px solid #333;
            border-radius: 6px;
            cursor: pointer;
            
            /* التعديل هنا: وضعنا صورة كخلفية للمربع بدلاً من اللون الأسود */
            background: url('assets/ui/slot_bg.png') no-repeat center center;
            background-size: cover;
            
            box-shadow: inset 0 0 15px rgba(0,0,0,0.8);
            transition: 0.2s;
            overflow: visible !important;
            padding: 2px 2px 1px 2px;
        }
        
        .item-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.8);
            z-index: 9999 !important;
        }

        .item-card-img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover; /* يخلي الصورة تملأ المربع بالكامل */
            border-radius: 4px;
        }

        /* .action-icon-btn duplicate removed — see definition above */


        /* تول تيب السعر الصغير (يظهر فوق الأيقونة) */
        .action-price-tooltip {
            position: absolute;
            bottom: 130%;
            left: 50%;
            transform: translateX(-50%);
            background: #000;
            border: 1px solid var(--gold);
            color: #fff;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 0.8em;
            font-weight: bold;
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            transition: 0.2s;
            pointer-events: none;
            z-index: 100;
            box-shadow: 0 2px 10px #000;
        }
        
        .action-icon-btn:hover .action-price-tooltip {
            opacity: 1;
            visibility: visible;
        }
        
        /* إظهار بطاقة العتاد الأساسية (Tooltip) عند الوقوف على المربع */
        .item-card:hover > .equip-tooltip {
            opacity: 1;
            visibility: visible;
            top: 105%; 
        }

	/* تأثير النبض (Glow Pulse) */
	@keyframes rarityGlow {
    0%   { box-shadow: 0 0 6px var(--tier-color); }
    50%  { box-shadow: 0 0 14px var(--tier-color); }
    100% { box-shadow: 0 0 6px var(--tier-color); }
	}

	@keyframes imgRarityGlow {
    0%   { filter: drop-shadow(0 0 4px var(--tier-color)); }
    50%  { filter: drop-shadow(0 0 12px var(--tier-color)) drop-shadow(0 0 6px var(--tier-color)); }
    100% { filter: drop-shadow(0 0 4px var(--tier-color)); }
	}

	/* Slot border glow (subtle) + img shape glow */
	.equipped-glow {
    animation: rarityGlow 2s infinite ease-in-out;
    border-width: 2px !important;
	}
	.equipped-glow img.anim-equip {
    animation: imgRarityGlow 2s infinite ease-in-out !important;
	}

        .farm-region { display: flex; align-items: center; justify-content: space-between; padding: 15px; border-bottom: 1px solid #222; transition: 0.2s; cursor: pointer; }
        .farm-region:hover { background: rgba(139, 0, 0, 0.1); }
        .monster-cards-grid { display: flex; flex-wrap: wrap; gap: 20px; padding: 20px 0; justify-content: center; }
        
        .monster-card { 
            background: #0a0a0a; 
            border: 2px solid #555; 
            border-radius: 6px; 
            width: 240px; /* 👈 تم زيادة العرض من 140 إلى 240 */
            display: flex; 
            flex-direction: column; 
            text-align: center; 
            box-shadow: 0 5px 15px rgba(0,0,0,0.8); 
            transition: 0.3s all; /* حركة انسيابية */
        }
        
        .monster-card:hover:not(.locked) {
            transform: translateY(-5px); /* ترتفع البطاقة للأعلى عند التأشير */
            box-shadow: 0 10px 25px rgba(139, 0, 0, 0.4); /* توهج أحمر خفيف */
        }

        .monster-card.locked { border-color: #333; opacity: 0.7; cursor: not-allowed; }
        
        .monster-card-title { 
            background: #500; 
            color: #fff; 
            padding: 12px 5px; /* زيادة المساحة المحيطة بالنص */
            font-weight: bold; 
            border-bottom: 2px solid var(--gold); 
            font-size: 1.2em; /* تكبير اسم الوحش */
        }
        
        .monster-card.locked .monster-card-title { background: #222; border-bottom-color: #444; color: #888; }
        
        .monster-img-area { 
            height: 220px; /* 👈 تم زيادة ارتفاع الصورة من 120 إلى 220 لتتناسب مع العرض الجديد */
            background: #000; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            font-size: 5em; /* تكبير علامة الاستفهام للوحوش المقفلة */
            color: #fff; 
            border-bottom: 1px solid #333; 
            position: relative; 
            overflow:hidden; 
        }
        
        .monster-card-img { width: 100%; height: 100%; object-fit: cover; transition: 0.3s; }
        .monster-card:hover:not(.locked) .monster-card-img { transform: scale(1.05); /* تقريب خفيف للصورة عند التأشير */ }
        
        .monster-card.locked .monster-img-area { color: #444; }
        
        .monster-card .btn { 
            margin: 15px; 
            font-size: 1.2em; /* تكبير زر الهجوم */
            padding: 10px;
        }

        .report-item { background: #0d0d0d; border: 1px solid #333; margin-bottom: 10px; border-radius: 4px; overflow: hidden; }
        .report-header { padding: 12px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; background: #151515; font-weight: bold; font-size: 1.1em; font-family: 'Cairo Play', 'Cairo', sans-serif;}
        .report-header:hover { background: #1a1a1a; }
        .report-body { padding: 15px; border-top: 1px dashed #333; background: #050505; color: #ccc; font-family: 'Cairo Play', 'Cairo', monospace; line-height: 1.6; display: none; font-size: 1.1em;}
        
        .train-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; padding: 10px; background: #000; border: 1px solid #222; }
        .train-info { flex: 1; display: flex; flex-direction: column; gap: 5px; }
        .train-actions { margin-right: 15px; display: flex; gap: 5px; }
        .train-progress-container { width: 100%; background: #1a1a1a; border: 1px solid #333; height: 14px; border-radius: 7px; position: relative; overflow: hidden; }
        .train-progress-bar { height: 100%; transition: width 0.3s; background: linear-gradient(90deg, #1e8449, #2ecc71); width: 0%; }
        .train-progress-text { position: absolute; inset: 0; text-align: center; font-size: 0.8em; line-height: 14px; color: #fff; text-shadow: 1px 1px 1px #000; font-family: monospace; font-weight: bold;}

        .battle-arena-container { display: grid; grid-template-columns: 450px 1fr 450px; gap: 15px; margin-top: 10px; min-height: 420px; }
        .battle-fighter-panel { background: rgba(10, 10, 10, 0.95); border: 2px solid var(--iron); border-radius: 5px; padding: 15px; display: flex; flex-direction: column; align-items: center; box-shadow: 0 0 15px #000; }
        .battle-fighter-panel.player { border-color: var(--gold); } .battle-fighter-panel.enemy { border-color: var(--blood); }
        .fighter-name { color: #fff; font-size: 1.3em; font-weight: bold; text-shadow: 0 0 5px #000; margin-bottom: 5px; }
        .fighter-meta { color: #888; font-size: 0.9em; font-weight: bold; margin-bottom: 10px; }
.fighter-img-frame { 
    width: 180px; 
    height: 180px; 
    border: 3px solid #333; 
    border-radius: 8px; 
    margin: 0 auto 15px auto; 
    background: #111; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    overflow: hidden; 
}
        .player .fighter-img-frame { border-color: var(--gold); } .enemy .fighter-img-frame { border-color: var(--blood); }
        .fighter-avatar { width: 100%; height: 100%; object-fit: cover; } .fighter-placeholder { font-size: 4em; color: #444; }
        .battle-hp-container { width: 100%; background: #222; border: 1px solid #444; height: 20px; border-radius: 10px; position: relative; overflow: hidden; margin-bottom: 15px; }
        .battle-hp-bar { height: 100%; background: linear-gradient(90deg, #800, #e74c3c); transition: width 0.3s ease-out; width: 100%; }
        .battle-hp-text { position: absolute; inset: 0; text-align: center; font-size: 0.9em; line-height: 20px; color: #fff; font-weight: bold; text-shadow: 1px 1px 2px #000; font-family: monospace;}
        .fighter-stats-grid { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 0.9em; border-top: 1px solid #333; padding-top: 10px; }
        .battle-stat-box { background: #000; padding: 6px; border: 1px solid #222; border-radius: 3px; }
        .battle-stat-box span { color: var(--gold); float: left; font-weight: bold; font-family: monospace; font-size: 1.1em;} 
        .battle-log-center { background: rgba(0,0,0,0.8); border: 1px solid var(--iron); border-radius: 5px; padding: 15px; display: flex; flex-direction: column; overflow: hidden; }
        .battle-log-content { flex: 1; overflow-y: auto; color: #ccc; font-family: monospace; line-height: 1.6; font-size: 1em; padding-right: 5px; min-height: 200px; max-height: 420px; text-align: center; }

        .log-hit { color: #e74c3c; font-weight: bold; } .log-bleed { color: #c0392b; font-style: italic; font-weight: bold;}
        .log-crit { color: #f39c12; font-weight: bold; text-shadow: 0 0 5px #f39c12; } .log-miss { color: #888; font-style: italic; } 

        .ach-card { border: 1px solid #333; padding: 10px; border-radius: 5px; background: rgba(0,0,0,0.5); display: flex; flex-direction: column; justify-content: space-between; font-weight: bold;}
        .ach-title { margin: 0; font-size: 1.1em; } .ach-desc { font-size: 0.9em; color: #aaa; margin: 5px 0 10px 0; }
        .album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
        .album-item { background: #111; border: 2px solid #333; height: 120px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 5px; border-radius: 5px; flex-direction: column; font-size: 0.9em; font-weight: bold;}
        .album-item.locked { filter: grayscale(100%) brightness(40%); color: #555; }
        .album-item.unlocked { border-color: var(--gold); color: #fff; background: #1a1a1a; box-shadow: inset 0 0 15px rgba(212, 175, 55, 0.2); }
        
        .rarity-White { color: #fff; } .rarity-Green { color: #2ecc71; } .rarity-Blue { color: #3498db; }
        .rarity-Purple { color: #9b59b6; } .rarity-Orange { color: #e67e22; } .rarity-Red { color: #e74c3c; text-shadow: 0 0 5px red; }
        .suffix-text { color: #eebb55; font-size: 1.02em; display: block; margin-top: 2px; }
        .prefix-text { color: #3498db; font-size: 1.02em; display: block; margin-top: 2px; }

        /* .raid-card duplicate merged into definition above */
        .tavern-bounty-card { border: 1px dashed var(--blood); background: #111; padding: 15px; border-radius: 3px; display:flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
        .tavern-drink-card { border: 1px solid #444; background: #0a0a0a; padding: 15px; border-radius: 5px; display:flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
        .buff-indicator { display: inline-block; background: #2ecc71; color: #000; padding: 2px 5px; border-radius: 3px; font-size: 0.8em; margin-left: 5px; }

        .blood-table { width: 100%; border-collapse: collapse; margin-top: 15px; font-size: 0.95em; }
        .blood-table th, .blood-table td { border: 1px solid #333; padding: 10px; text-align: center; }
        .blood-table th { background: #111; color: var(--gold); font-weight: bold; border-bottom: 2px solid var(--blood); }
        .blood-table tr:hover { background: #1a1a1a; }
/* --- EPIC BOSS BORDER STYLES --- */
@keyframes goldPulse {
    0% { box-shadow: 0 0 8px rgba(212, 175, 55, 0.5), inset 0 0 5px rgba(212, 175, 55, 0.3); }
    50% { box-shadow: 0 0 25px rgba(212, 175, 55, 1), inset 0 0 15px rgba(212, 175, 55, 0.6); }
    100% { box-shadow: 0 0 8px rgba(212, 175, 55, 0.5), inset 0 0 5px rgba(212, 175, 55, 0.3); }
}

.epic-boss-card {
    border: 2px solid var(--gold) !important;
    animation: goldPulse 2s infinite ease-in-out;
    transform: scale(1.02);
    z-index: 2;
}

.epic-boss-card .monster-card-title {
    background: linear-gradient(to right, #4a0000, #8b0000, #4a0000) !important;
    border-bottom: 2px solid var(--gold) !important;
    color: var(--gold) !important;
    text-shadow: 1px 1px 5px #000;
}
/* --- LUCKY WHEEL STYLES --- */
        .wheel-wrapper { position: relative; width: 320px; height: 320px; margin: 20px auto; }
        .wheel-pointer { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 40px solid var(--gold); z-index: 10; filter: drop-shadow(0 4px 4px rgba(0,0,0,0.8)); }
        .lucky-wheel { 
            width: 100%; 
            height: 100%; 
            border-radius: 50%; 
            border: 4px solid var(--gold); 
            box-shadow: 0 0 20px rgba(212, 175, 55, 0.3), inset 0 0 30px #000; 
            overflow: hidden; 
            transition: transform 4s cubic-bezier(0.25, 0.1, 0.25, 1); 
            background: conic-gradient(#600000 0deg 45deg, #111111 45deg 90deg, #600000 90deg 135deg, #111111 135deg 180deg, #600000 180deg 225deg, #111111 225deg 270deg, #600000 270deg 315deg, #111111 315deg 360deg); 
            position: relative; 
        }
        .wheel-slice { 
            position: absolute; 
            top: 0; left: 0; 
            width: 100%; height: 100%; 
        }
        .wheel-slice span { 
            position: absolute; 
            top: 15px; 
            left: 50%; 
            transform: translateX(-50%); 
            color: #fff; 
            font-weight: bold; 
            font-size: 1.8em; 
            text-shadow: 2px 2px 4px #000; 
        }
        .wheel-slice-img {
            clip-path: polygon(100% 0, 100% 100%, 0 100%);
            border: 1px solid rgba(212, 175, 55, 0.3);
        }
        .wheel-container {
            position: relative;
            width: 320px;
            height: 320px;
            margin: 20px auto;
        }
        
        /* --- PREMIUM SHOP STYLES --- */
        .premium-shop-item {
            transition: all 0.3s ease;
            cursor: pointer;
        }
        .premium-shop-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        }
        .premium-shop-item:hover img {
            transform: scale(1.1);
        }
        .premium-shop-item img {
            transition: transform 0.3s ease;
        }
        
        .class-change-card:hover {
            transform: translateY(-5px) scale(1.05);
            border-color: var(--gold) !important;
            box-shadow: 0 0 15px rgba(212,175,55,0.5);
        }
        
/* --- تنسيق مقارنة العتاد (Tooltip) --- */
#tooltip { 
    max-width: 600px !important; /* لكي يتسع لبطاقتين بجانب بعض */
}

.dual-tooltip {
    display: flex;
    gap: 15px;
    direction: rtl;
}

.tooltip-panel {
    flex: 1;
    min-width: 220px;
}

.tooltip-divider {
    width: 1px;
    background: var(--gold);
    margin: 0 5px;
}

.tooltip-badge-inv { color: var(--gold); text-align: center; font-size: 0.8em; margin-bottom: 5px; font-weight: bold; }
.tooltip-badge-eq { color: #2ecc71; text-align: center; font-size: 0.8em; margin-bottom: 5px; font-weight: bold; border-bottom: 1px solid #2ecc71; padding-bottom: 3px; }
 
/* ========================================= */
/* 🏅 BADGE SYSTEM CSS 🏅 */
/* ========================================= */
.badge-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 15px;
    padding: 15px;
    background: rgba(10, 5, 5, 0.8);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    min-height: 50px;
}

.badge-item {
    width: 45px;
    height: 45px;
    background: #0d0d0d;
    border: 1px solid var(--gold);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    box-shadow: 0 0 8px rgba(139, 0, 0, 0.4);
    cursor: help;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.badge-item:hover {
    transform: scale(1.15);
    box-shadow: 0 0 15px var(--blood);
}

#player-badges-ui {
    max-height: 120px; 
    overflow-y: auto;
}
/* .inv-slot (width:50% duplicate removed — correct definition with width:100% is above) */

/* When the player hovers over the square */
.inv-slot:hover {
    background: rgba(40, 10, 10, 0.8);
    border-color: var(--gold); /* Border lights up gold */
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.3), inset 0 0 10px rgba(0,0,0,0.9);
    transform: scale(1.05); /* The item "pops" out slightly */
    z-index: 2; /* Ensures it pops OVER the other items */
}

/* --- TOWER OF SPIRITS UI --- */
.tower-center-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 560px;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background-image: var(--tower-bg, none);
    background-size: cover;
    background-position: center;
}

.tower-center-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    pointer-events: none;
    z-index: 0;
}

.tower-center-wrapper > * {
    position: relative;
    z-index: 1;
}

.tower-monster-square {
    width: 380px;
    background: rgba(10, 3, 3, 0.88);
    border: 2px solid var(--panel-border);
    border-radius: 12px;
    padding: 24px 20px;
    box-shadow: 0 0 40px rgba(0,0,0,0.95), inset 0 0 20px rgba(0,0,0,0.7);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    backdrop-filter: blur(4px);
}

.tower-boss-square {
    border-color: var(--gold);
    border-width: 3px;
    box-shadow: 0 0 50px rgba(212, 175, 55, 0.5), inset 0 0 25px rgba(212, 175, 55, 0.15);
}

.tower-monster-name {
    font-size: 1.6em;
    font-weight: 900;
    color: var(--blood);
    margin-bottom: 15px;
    text-shadow: 2px 2px 4px #000;
}

.tower-boss-name {
    color: var(--gold);
}

.tower-monster-img-container {
    width: 260px;
    height: 260px;
    border: 3px solid #333;
    border-radius: 8px;
    background: rgba(0,0,0,0.8);
    margin-bottom: 15px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tower-boss-square .tower-monster-img-container {
    border-color: var(--gold);
}

.tower-monster-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tower-monster-stats {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 20px;
    font-size: 1em;
}

.tower-stat-box {
    background: #050505;
    border: 1px inset #333;
    padding: 6px;
    border-radius: 4px;
    color: #ccc;
}

.tower-stat-box span {
    color: var(--gold);
    font-weight: bold;
    float: left;
}

.tower-attack-btn {
    width: 100%;
    font-size: 1.3em;
    padding: 12px;
    letter-spacing: 1px;
}

.tower-catalogue-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0,0,0,0.8);
    border: 1px solid #9b59b6;
    color: #d2b4de;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.2s;
    font-weight: bold;
    z-index: 10;
}

.tower-catalogue-btn:hover {
    background: #9b59b6;
    color: #fff;
    box-shadow: 0 0 10px #9b59b6;
}

/* --- TOWER CATALOGUE OVERLAY --- */
.tower-catalogue-modal {
    position: absolute;
    inset: 0;
    background: rgba(10, 5, 5, 0.98);
    z-index: 50;
    display: flex;
    flex-direction: column;
    padding: 20px;
    border: 2px solid #9b59b6;
    border-radius: 8px;
    box-shadow: inset 0 0 50px rgba(0,0,0,0.9);
}

.tower-catalogue-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 8px;
    overflow-y: auto;
    flex: 1;
    padding-right: 5px;
}

.tower-cat-item {
    width: 100%;
    aspect-ratio: 1/1;
    border: 2px solid #444;
    background: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
}

.tower-cat-item.defeated {
    filter: grayscale(100%);
    opacity: 0.4;
    border-color: #222;
}

.tower-cat-item.boss {
    border-color: var(--gold);
}

.tower-cat-item.locked {
    background: #050505;
    border-color: #222;
}


/* ─── Hidden Scrollbar Utility ─────────────────────────────── */
.hidden-scrollbar::-webkit-scrollbar { display: none; }
.hidden-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ══════════════════════════════════════════════════════════════
   CITY VIEW — Hotspot buildings
══════════════════════════════════════════════════════════════ */
.city-hotspot {
    position: absolute;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: transform 0.2s;
}

.city-hotspot:hover {
    transform: translateY(-6px) scale(1.08);
}

.city-hotspot-icon {
    width: 62px;
    height: 62px;
    border-radius: 6px;
    border: 2px solid rgba(255,255,255,0.15);
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8em;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.6), inset 0 0 12px rgba(0,0,0,0.5);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.city-hotspot:hover .city-hotspot-icon {
    border-color: rgba(255,255,255,0.4);
    box-shadow: 0 6px 28px rgba(0,0,0,0.7), inset 0 0 12px rgba(0,0,0,0.3), 0 0 18px rgba(255,255,255,0.08);
}

.city-hotspot-glow {
    position: absolute;
    inset: 0;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.2s;
}

.city-hotspot:hover .city-hotspot-glow {
    opacity: 1;
}

.city-hotspot-label {
    color: #fff;
    font-size: 0.75em;
    font-weight: 900;
    letter-spacing: 1px;
    text-shadow: 0 0 8px rgba(0,0,0,0.9), 1px 1px 3px #000, 0 0 20px rgba(0,0,0,0.8);
    white-space: nowrap;
    background: rgba(0,0,0,0.55);
    padding: 2px 8px;
    border-radius: 3px;
    backdrop-filter: blur(3px);
}

/* Clickable sh-city header pulse hint */
.sh-city.clickable-hint::after {
    animation: cityPulse 2.5s infinite;
}

@keyframes cityPulse {
    0%, 100% { opacity: 0.06; }
    50%       { opacity: 0.18; }
}

.sh-city:hover {
    box-shadow: 0 0 16px rgba(52,152,219,0.45);
    border-color: #3498db;
}

.sh-battle:hover {
    box-shadow: 0 0 16px rgba(243,156,18,0.45);
    border-color: #f39c12;
}

.sh-battle.clickable-hint::after {
    animation: battlePulse 2.5s infinite;
}

@keyframes battlePulse {
    0%, 100% { opacity: 0.06; }
    50%       { opacity: 0.18; }
}

.clickable-region {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    overflow: hidden;
}

.clickable-region::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0.7) 100%);
    transition: all 0.4s ease;
    z-index: 1;
}

.clickable-region:hover::before {
    background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.05) 50%, rgba(0,0,0,0.3) 100%);
}

.clickable-region:hover {
    border-color: #f39c12;
    box-shadow: 0 0 30px rgba(243,156,18,0.5), inset 0 0 20px rgba(243,156,18,0.1);
    z-index: 50;
}

.clickable-region .region-label {
    position: relative;
    z-index: 2;
    background: linear-gradient(135deg, rgba(20,10,0,0.92), rgba(60,30,0,0.88));
    color: #f5d78e;
    padding: 10px 22px;
    border-radius: 4px;
    font-size: 1em;
    font-weight: 900;
    letter-spacing: 2px;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(10px) scale(0.9);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    text-shadow: 0 0 12px rgba(243,156,18,0.6), 0 2px 4px #000;
    border: 1px solid rgba(212,175,55,0.3);
    box-shadow: 0 4px 20px rgba(0,0,0,0.6), 0 0 15px rgba(243,156,18,0.15);
    backdrop-filter: blur(4px);
}

.clickable-region:hover .region-label {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.forge-resource-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.forge-resource-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #2c2c2c;
    background: linear-gradient(145deg, rgba(20, 10, 10, 0.95), rgba(5, 5, 5, 0.95));
    box-shadow: inset 0 0 12px rgba(0,0,0,0.75);
}

.forge-resource-icon {
    font-size: 1.4em;
    width: 34px;
    text-align: center;
}

.forge-resource-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    color: #ddd;
}

.forge-resource-copy strong {
    color: #fff;
    font-size: 0.95em;
}

.forge-resource-copy span {
    color: var(--gold);
    font-family: monospace;
    font-size: 1.05em;
    font-weight: bold;
}

.forge-resource-wood { border-color: #8e6e53; }
.forge-resource-iron { border-color: #95a5a6; }
.forge-resource-leather { border-color: #c39b77; }
.forge-resource-dust { border-color: #9b59b6; }
.forge-resource-gem { border-color: #3498db; }

.forge-material-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.forge-material-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.forge-material-label {
    min-width: 140px;
    color: #bbb;
    font-weight: bold;
}

.forge-material-cell {
    width: 64px;
    min-height: 64px;
    border-radius: 10px;
    border: 1px solid #333;
    background: rgba(12, 8, 8, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.9);
}

.forge-material-cell img {
    width: 70%;
    height: 70%;
    object-fit: contain;
}

.forge-material-qty {
    position: absolute;
    bottom: 4px;
    right: 6px;
    color: #fff;
    font-size: 0.8em;
    font-weight: bold;
    text-shadow: 0 0 6px #000;
}

.forge-item-card {
    position: relative;
    border: 1px solid #333;
    border-radius: 8px;
    overflow: visible;
    background: linear-gradient(180deg, rgba(20, 10, 10, 0.96), rgba(4, 4, 4, 0.98));
    box-shadow: inset 0 0 14px rgba(0,0,0,0.8);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 240px;
}

.forge-item-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(0,0,0,0.45);
}

.forge-item-copy {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.forge-item-cost {
    color: #aaa;
    font-size: 0.88em;
    line-height: 1.5;
}

.forge-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    color: #666;
    padding: 24px;
    border: 1px dashed #333;
    border-radius: 8px;
    background: rgba(0,0,0,0.2);
}

/* ═══ SELL MODE HEARTBEAT ═══ */
@keyframes sell-heartbeat {
    0%   { box-shadow: 0 0 8px rgba(212,175,55,0.3), inset 0 0 5px rgba(212,175,55,0.1); border-color: rgba(212,175,55,0.5); }
    50%  { box-shadow: 0 0 22px rgba(212,175,55,0.8), inset 0 0 12px rgba(212,175,55,0.3); border-color: rgba(212,175,55,1); }
    100% { box-shadow: 0 0 8px rgba(212,175,55,0.3), inset 0 0 5px rgba(212,175,55,0.1); border-color: rgba(212,175,55,0.5); }
}

.sell-selected {
    animation: sell-heartbeat 1.2s ease-in-out infinite !important;
    border-color: var(--gold) !important;
    position: relative;
}

.sell-selected::after {
    content: '✓';
    position: absolute;
    top: 4px;
    right: 4px;
    background: var(--gold);
    color: #000;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7em;
    font-weight: bold;
    z-index: 5;
}

/* ═══ FURNACE SECTION ═══ */
.furnace-section {
    position: relative;
    border-radius: 10px;
    overflow: visible;
    margin-top: 20px;
    border: 2px solid #5a2a00;
    box-shadow: 0 0 30px rgba(139,50,0,0.3), inset 0 0 40px rgba(0,0,0,0.8);
}

.furnace-bg-fallback {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #1a0800 0%, #2d0f00 20%, #1a0500 50%, #3d1500 75%, #0a0200 100%);
    z-index: 0;
    border-radius: 10px;
}

.furnace-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0.6) 100%);
    z-index: 1;
    border-radius: 10px;
}

.furnace-title {
    position: relative;
    z-index: 2;
    color: #e67e22;
    text-align: center;
    padding: 12px 0 8px 0;
    font-size: 1.1em;
    font-weight: 900;
    letter-spacing: 2px;
    text-shadow: 0 0 15px rgba(230,126,34,0.6), 2px 2px 4px #000;
}

.furnace-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
    padding: 12px 18px 22px 18px;
}

.furnace-slot {
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(4px);
    border: 2px solid #333;
    border-radius: 10px;
    min-height: 210px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 8px;
    transition: all 0.3s;
    position: relative;
}

.furnace-slot-empty {
    border-style: dashed;
    border-color: #2a1500;
}

.furnace-slot-active {
    border-style: solid;
    box-shadow: 0 0 15px rgba(230,126,34,0.3), inset 0 0 10px rgba(0,0,0,0.5);
}

.furnace-slot-done {
    border-color: #2ecc71 !important;
    box-shadow: 0 0 20px rgba(46,204,113,0.4), inset 0 0 10px rgba(46,204,113,0.1);
    animation: sell-heartbeat 1.5s ease-in-out infinite;
    --gold: #2ecc71;
}

@keyframes furnace-done-pulse {
    0%   { box-shadow: 0 0 10px rgba(46,204,113,0.3); }
    50%  { box-shadow: 0 0 25px rgba(46,204,113,0.7); }
    100% { box-shadow: 0 0 10px rgba(46,204,113,0.3); }
}

.furnace-slot-done {
    animation: furnace-done-pulse 1.5s ease-in-out infinite;
}

.furnace-ember {
    font-size: 2em;
    opacity: 0.25;
    color: #5a2a00;
}

.furnace-progress-bar {
    width: 90%;
    height: 6px;
    background: rgba(0,0,0,0.6);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 6px;
    border: 1px solid #333;
}

.furnace-progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 1s linear;
}

/* Smelt item cards in grid */
.smelt-item-card {
    background: rgba(10,5,5,0.8);
    border: 2px solid #555;
    border-radius: 8px;
    padding: 8px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    text-align: center;
}

.smelt-item-card:hover {
    transform: translateY(-3px);
    z-index: 9999 !important;
}

.smelt-item-card:hover > .equip-tooltip {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* furnace tooltips handled by global showTooltip system */

/* ═══ GAME MODAL ANIMATION ═══ */
@keyframes modalFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

#game-modal-box {
    animation: modalSlideIn 0.25s ease-out;
}

@keyframes modalSlideIn {
    0% { opacity: 0; transform: scale(0.92) translateY(15px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* ═══════════════════════════════════════════════════════════
   TOP BAR (thin, dark)
   ═══════════════════════════════════════════════════════════ */
/* ═══ ORNATE FRAME HEADER ═══════════════════════════════════════
   Uses mainheader.png as background, overlays 3 zones:
   Left square | Center rectangles | Right 2 squares
   ═══════════════════════════════════════════════════════════ */
.fh-frame {
    position: relative;
    width: 100%;
    min-height: 120px;
    overflow: hidden;
    border-bottom: 2px solid #3a2a18;
    box-shadow: 0 4px 20px rgba(0,0,0,0.6);
    z-index: 10;
    display: flex;
    align-items: stretch;
    gap: 0;
}
.fh-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}
.fh-zone {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px;
}

/* ── Left Square: Portrait ── */
.fh-left {
    flex: 0 0 160px;
    align-items: center;
    gap: 8px;
    border-left: 2px solid rgba(212,175,55,0.15);
}
.fh-portrait-ring {
    width: 50px; height: 50px;
    border-radius: 50%;
    padding: 3px;
    background: conic-gradient(from 0deg, #8b6914, #d4af37, #8b6914, #d4af37, #8b6914);
    flex-shrink: 0;
}
.fh-portrait {
    width: 100%; height: 100%;
    border-radius: 50%;
    background: #1a0f08;
    overflow: hidden;
    border: 2px solid #1a0f08;
}
.fh-portrait img { width:100%!important; height:100%!important; object-fit:cover!important; border-radius:50%; }
.fh-id { text-align: center; flex: 1; min-width: 0; }
.fh-name { font-size: 0.9em; font-weight: 700; color: #e8d5a3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 3px rgba(0,0,0,0.9); }
.fh-meta { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 2px; }
.fh-class { font-size: 0.7em; color: #b8956a; }
.fh-sep { color: #4a3520; font-size: 0.5em; }
.fh-lvl { font-size: 0.7em; color: #d4af37; font-weight: 700; background: rgba(212,175,55,0.08); padding: 1px 5px; border-radius: 3px; border: 1px solid rgba(212,175,55,0.2); }
.fh-buffs { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; margin-top: 3px; }

/* ── Center: Bars ── */
.fh-center {
    flex: 2;
    gap: 5px;
    border-left: 2px solid rgba(212,175,55,0.15);
    border-right: 2px solid rgba(212,175,55,0.15);
}
.fh-bar-group { padding: 2px 0; }
.fh-bar-head { display: flex; align-items: center; gap: 5px; margin-bottom: 2px; }
.fh-bar-label { font-size: 0.65em; font-weight: 700; color: #8b7340; letter-spacing: 1px; min-width: 20px; }
.fh-bar-text { font-size: 0.65em; font-weight: 600; color: #c9b896; font-family: 'Cairo', monospace; }
.fh-bonus { color: #7d6b3a; font-size: 0.55em; font-weight: 600; }
.fh-potions { display: flex; gap: 2px; margin-right: 4px; }
.fh-bar-track { position: relative; height: 12px; border-radius: 6px; overflow: hidden; border: 1px solid #2a1a10; background: linear-gradient(180deg, #1a0f08 0%, #0a0604 100%); box-shadow: inset 0 1px 3px rgba(0,0,0,0.6); }
.fh-bar-fill { height: 100%; border-radius: 6px; transition: width 0.4s ease-out; position: relative; }
.fh-bar-fill::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%; background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, transparent 100%); border-radius: 6px 6px 0 0; }
.fh-xp-fill { background: linear-gradient(90deg, #8b6914 0%, #c9a834 40%, #e8d060 100%); box-shadow: 0 0 8px rgba(201,168,52,0.25); }
.fh-hp-fill { background: linear-gradient(90deg, #6b0000 0%, #a01010 40%, #cc2020 100%); box-shadow: 0 0 8px rgba(180,20,20,0.25); }
.fh-resources { display: flex; align-items: center; gap: 8px; margin-top: 3px; padding-top: 3px; border-top: 1px solid rgba(74,53,32,0.3); }
.fh-res { display: flex; align-items: center; gap: 3px; }
.fh-gold { font-size: 0.75em; font-weight: 700; color: #d4af37; text-shadow: 0 0 4px rgba(212,175,55,0.2); }
.fh-energy { font-size: 0.75em; font-weight: 700; color: #c9b896; }
.fh-res-sep { width: 1px; height: 12px; background: rgba(74,53,32,0.4); }
.fh-buffs-row { display: flex; gap: 4px; flex-wrap: wrap; margin-right: auto; }

/* ── Right: Timers ── */
.fh-right {
    flex: 0 0 140px;
    gap: 4px;
    padding: 8px;
}
.fh-timers { display: flex; flex-direction: column; gap: 3px; }
.fh-timers .hr-timer-card { display: flex; align-items: center; gap: 5px; padding: 3px 6px; background: rgba(10,6,4,0.7); border: 1px solid #2a1a10; border-radius: 3px; font-size: 0.7em; cursor: pointer; transition: border-color 0.2s; }
.fh-timers .hr-timer-card:hover { border-color: rgba(212,175,55,0.25); }
.fh-timers .hr-timer-card.raid { border-color: rgba(52,152,219,0.2); color: #5dade2; }
.fh-timers .hr-timer-card.labor { border-color: rgba(230,126,34,0.2); color: #e67e22; }
.fh-timers .hr-timer-card.ready { animation: fhPulse 1.5s ease-in-out infinite; border-color: rgba(46,204,113,0.3); }
.fh-timers .hr-timer-icon { font-size: 1em; }
.fh-timers .hr-timer-label { flex: 1; font-weight: 700; }
.fh-timers .hr-timer-time { font-family: monospace; font-weight: 700; direction: ltr; }
.fh-timers .hr-timer-ready { color: #6b8e3a; font-weight: 800; }

@keyframes fhPulse { 0%,100%{box-shadow:0 0 0 rgba(46,204,113,0)} 50%{box-shadow:0 0 8px rgba(46,204,113,0.25)} }

@media (max-width: 700px) {
    .fh-frame { flex-wrap: wrap; min-height: unset; }
    .fh-left, .fh-right { flex: 1 1 100%; flex-direction: row; align-items: center; }
    .fh-left { border-left: none; border-bottom: 1px solid rgba(212,175,55,0.15); }
    .fh-center { flex: 1 1 100%; border-left: none; border-right: none; border-bottom: 1px solid rgba(212,175,55,0.15); }
    .fh-right { border-right: none; }
    .fh-portrait-ring { width: 36px; height: 36px; }
    .fh-id { text-align: right; }
}

/* ═══ GUILD WAREHOUSE STYLES ═══════════════════════════════════ */
.wh-slot {
    background: rgba(10,10,10,0.9);
    border: 1px solid #333;
    border-radius: 5px;
    padding: 8px 4px;
    text-align: center;
    min-height: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    transition: border-color 0.2s;
}
.wh-slot:hover { border-color: #555; }
.wh-filled { border-color: #4a3520; cursor: pointer; }
.wh-filled:hover { border-color: #8b6914; box-shadow: 0 0 6px rgba(212,175,55,0.15); }
.wh-empty { border-style: dashed; border-color: #222; }
.wh-empty-text { color: #333; font-size: 0.7em; }
.wh-item-icon { font-size: 1.4em; line-height: 1; }
.wh-item-icon img { width: 28px; height: 28px; object-fit: cover; border-radius: 3px; }
.wh-item-name { color: #ccc; font-size: 0.65em; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.wh-item-lvl { color: #888; font-size: 0.6em; }
.wh-item-owner { color: #666; font-size: 0.55em; }
.wh-withdraw-btn {
    background: rgba(46,204,113,0.1);
    border: 1px solid #2ecc71;
    color: #2ecc71;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 0.6em;
    cursor: pointer;
    margin-top: 2px;
    font-family: 'Cairo', sans-serif;
}
.wh-withdraw-btn:hover { background: rgba(46,204,113,0.2); }

/* ── Warehouse Player Inventory Slots ── */
.wh-inv-slot {
    background: rgba(10,10,10,0.9);
    border: 1px solid #222;
    border-radius: 5px;
    padding: 6px 4px;
    text-align: center;
    min-height: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}
.wh-inv-clickable { border-color: #4a3520; cursor: pointer; transition: border-color 0.2s; }
.wh-inv-clickable:hover { border-color: #8b6914; background: rgba(20,12,6,0.9); box-shadow: 0 0 6px rgba(212,175,55,0.1); }
.wh-inv-img { width: 26px; height: 26px; object-fit: cover; border-radius: 3px; }
.wh-inv-emoji { font-size: 1.3em; }
.wh-inv-name { color: #ccc; font-size: 0.6em; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.wh-inv-lvl { color: #666; font-size: 0.55em; }

/* ── Guild Members List ── */
.gr-member-card {
    background: rgba(15,10,6,0.9);
    border: 1px solid #333;
    border-radius: 6px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.gr-member-name { color: #ddd; font-weight: 700; font-size: 1.02em; }
.gr-member-role { font-size: 0.65em; padding: 2px 8px; border-radius: 10px; font-weight: 600; }
.gr-role-select {
    background: #111; color: #ccc; border: 1px solid #444; border-radius: 4px;
    padding: 2px 6px; font-size: 0.7em; font-family: 'Cairo', sans-serif; cursor: pointer;
}
.gr-kick-btn { color: #e74c3c; cursor: pointer; font-size: 0.9em; margin-right: 4px; }

/* ═══ GUILD ROLES STYLES ═══════════════════════════════════════ */
.gr-role-card {
    background: rgba(15,10,6,0.9);
    border: 1px solid #333;
    border-radius: 6px;
    padding: 10px;
}
.gr-role-header { margin-bottom: 8px; }
.gr-role-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 1.02em;
    font-weight: 700;
    color: #111;
    border: 2px solid;
}
.gr-permissions { margin-bottom: 8px; }
.gr-perm-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 6px;
    border-radius: 3px;
    font-size: 0.75em;
    color: #666;
    cursor: default;
}
.gr-perm-on { color: #aaa; }
.gr-perm-row[onclick] { cursor: pointer; }
.gr-perm-row[onclick]:hover { background: rgba(255,255,255,0.04); }
.gr-perm-label { flex: 1; }
.gr-perm-toggle { font-size: 0.9em; }
.gr-members { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.gr-member-chip {
    background: rgba(255,255,255,0.05);
    border: 1px solid #333;
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 0.7em;
    color: #ccc;
    display: flex;
    align-items: center;
    gap: 4px;
}
.gr-remove-btn {
    color: #e74c3c;
    cursor: pointer;
    font-size: 0.9em;
    margin-right: 2px;
}
.gr-add-btn {
    font-size: 0.75em !important;
    padding: 3px 10px !important;
    border-color: #555 !important;
    color: #888 !important;
}

@media (max-width: 600px) {
    .wh-slot { min-height: 70px; }
    .wh-item-icon img { width: 22px; height: 22px; }
    .gr-role-card { padding: 6px; }
}

/* ═══ TOP BAR — PARCHMENT STYLE ═════════════════════════════════
   (old header styles — kept for reference, currently not displayed)
   ═══════════════════════════════════════════════════════════ */
   ═══════════════════════════════════════════════════════════ */

.top-bar-parchment {
    display: flex;
    align-items: center;
    padding: 5px 0;
    background:
        linear-gradient(180deg, #3b1f0b 0%, #4a2a10 40%, #3b1f0b 100%);
    border-bottom: 2px solid #a78e3d;
    box-shadow: 0 2px 8px rgba(0,0,0,0.6), inset 0 -1px 0 rgba(167,142,61,0.3);
    z-index: 11;
    position: relative;
}
.tpb-deco-left, .tpb-deco-right {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M0,12 Q12,0 24,12 Q12,24 0,12Z' fill='%23a78e3d' opacity='0.3'/%3E%3C/svg%3E") center/contain no-repeat;
}
.tpb-center {
    flex: 1;
    text-align: center;
}
.tpb-title {
    color: #e8d5a3;
    font-size: 0.9em;
    font-weight: 800;
    letter-spacing: 3px;
    text-shadow: 0 0 8px rgba(167,142,61,0.5), 0 1px 2px rgba(0,0,0,0.9);
    text-transform: uppercase;
}
.tpb-actions { display: flex; gap: 6px; margin: 0 8px; }
.tpb-btn {
    background: rgba(167,142,61,0.1);
    border: 1px solid rgba(167,142,61,0.3);
    border-radius: 3px;
    padding: 2px 8px;
    cursor: pointer;
    font-size: 1.02em;
    color: #a78e3d;
    transition: all 0.2s;
}
.tpb-btn:hover {
    background: rgba(167,142,61,0.25);
    border-color: #d4af37;
    color: #d4af37;
    box-shadow: 0 0 6px rgba(167,142,61,0.3);
}

/* ═══════════════════════════════════════════════════════════
   HEADER — MEDIEVAL ORNATE
   Parchment scroll with gold filigree borders
   ═══════════════════════════════════════════════════════════ */

.header-medieval {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 14px 18px 10px 18px;
    z-index: 10;
    overflow: hidden;
    min-height: 100px;
}

/* Parchment background */
.hm-parchment {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, #1a0e05 0%, #2a1a0d 15%, #33200f 50%, #2a1a0d 85%, #1a0e05 100%);
    z-index: 0;
}
.hm-vignette {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(10,5,2,0.5) 100%);
    z-index: 1;
    pointer-events: none;
}

/* Ornate borders */
.hm-border-top {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, #a78e3d 15%, #d4af37 50%, #a78e3d 85%, transparent 100%);
    z-index: 5;
    box-shadow: 0 1px 4px rgba(167,142,61,0.4);
}
.hm-border-bottom {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, #a78e3d 15%, #d4af37 50%, #a78e3d 85%, transparent 100%);
    z-index: 5;
    box-shadow: 0 -1px 4px rgba(167,142,61,0.4);
}
.hm-border-left {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 3px;
    background: linear-gradient(180deg, transparent 0%, #a78e3d 15%, #d4af37 50%, #a78e3d 85%, transparent 100%);
    z-index: 5;
}
.hm-border-right {
    position: absolute;
    top: 0; bottom: 0; right: 0;
    width: 3px;
    background: linear-gradient(180deg, transparent 0%, #a78e3d 15%, #d4af37 50%, #a78e3d 85%, transparent 100%);
    z-index: 5;
}

/* Corner ornaments */
.hm-corner {
    position: absolute;
    width: 16px;
    height: 16px;
    z-index: 6;
    border-style: solid;
    border-color: #d4af37;
}
.hm-corner-tr { top: -1px; right: -1px; border-width: 3px 3px 0 0; border-radius: 0 6px 0 0; }
.hm-corner-tl { top: -1px; left: -1px; border-width: 3px 0 0 3px; border-radius: 6px 0 0 0; }
.hm-corner-br { bottom: -1px; right: -1px; border-width: 0 3px 3px 0; border-radius: 0 0 6px 0; }
.hm-corner-bl { bottom: -1px; left: -1px; border-width: 0 0 3px 3px; border-radius: 0 0 0 6px; }

/* ── Shared section ── */
.hm-section {
    position: relative;
    z-index: 3;
    padding: 6px 10px;
}

/* ── Divider between sections ── */
.hm-divider {
    width: 2px;
    align-self: stretch;
    background: linear-gradient(180deg, transparent 0%, rgba(167,142,61,0.4) 30%, rgba(167,142,61,0.15) 70%, transparent 100%);
    position: relative;
    z-index: 3;
    flex-shrink: 0;
    margin: 4px 2px;
}

/* ── Player Card ── */
.hm-player {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 170px;
}
.hm-portrait-frame {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    padding: 3px;
    background: conic-gradient(from 0deg, #8b6914, #d4af37, #8b6914, #d4af37, #8b6914);
    box-shadow: 0 0 12px rgba(212,175,55,0.4);
    flex-shrink: 0;
}
.hm-portrait {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(145deg, #1a0800, #0d0500);
    overflow: hidden;
}
.hm-player-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.hm-name {
    color: #e8d5a3;
    font-weight: 900;
    font-size: 1.05em;
    letter-spacing: 0.5px;
    text-shadow: 0 0 6px rgba(167,142,61,0.4), 0 1px 2px rgba(0,0,0,0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hm-player-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78em;
    color: #8b7340;
}
.hm-class {
    color: #a78e3d;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9em;
}
.hm-meta-dot { color: #5a4a28; font-size: 0.5em; }
.hm-lvl-badge {
    background: rgba(139,105,20,0.25);
    border: 1px solid rgba(167,142,61,0.5);
    border-radius: 3px;
    padding: 0 5px;
    font-size: 1.02em;
    font-weight: 800;
    color: #d4af37;
    white-space: nowrap;
    text-shadow: 0 0 4px rgba(212,175,55,0.3);
}
.hm-buffs { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 2px; }

/* ── Stats Center ── */
.hm-stats {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 220px;
}

.hm-bar-row {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0,0,0,0.3);
    border-radius: 3px;
    padding: 3px 8px;
    border: 1px solid rgba(167,142,61,0.1);
}
.hm-bar-icon { font-size: 0.8em; flex-shrink: 0; }
.hm-bar-track {
    flex: 1;
    height: 12px;
    background: rgba(0,0,0,0.6);
    border-radius: 2px;
    overflow: hidden;
    border: 1px solid rgba(167,142,61,0.15);
    position: relative;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}
.hm-bar-fill {
    height: 100%;
    border-radius: 1px;
    transition: width 0.5s ease;
}
.hm-bar-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: monospace;
    font-size: 0.6em;
    font-weight: 700;
    color: #e8d5a3;
    text-shadow: 0 0 4px rgba(0,0,0,1), 0 0 2px rgba(0,0,0,1);
    white-space: nowrap;
    direction: ltr;
    pointer-events: none;
}

/* XP bar — warm purple-gold */
.hm-xp-fill {
    background: linear-gradient(90deg, #6b3a8a, #9b59b6, #6b3a8a);
    background-size: 200% 100%;
    animation: gradientFlow 3s ease-in-out infinite;
    box-shadow: 0 0 6px rgba(155,89,182,0.4);
}
/* HP bar — deep crimson */
.hm-hp-fill {
    background: linear-gradient(90deg, #6b1010, #a93226, #6b1010);
    background-size: 200% 100%;
    animation: gradientFlow 3s ease-in-out infinite;
    box-shadow: 0 0 6px rgba(169,50,38,0.4);
}

.hm-bonus { color: #7d6b3a; font-size: 0.65em; font-weight: 600; }
.hm-potions { display: flex; gap: 2px; margin-right: 4px; }

/* ── Resource Row (Gold + Energy) ── */
.hm-resource-row {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 0.82em;
    background: rgba(0,0,0,0.25);
    border-radius: 3px;
    padding: 3px 8px;
    border: 1px solid rgba(167,142,61,0.08);
}
.hm-res-icon { font-size: 0.7em; }
.hm-res-val {
    font-family: monospace;
    font-size: 0.72em;
    font-weight: 700;
    color: #c4a35a;
    white-space: nowrap;
    direction: ltr;
    min-width: 36px;
}
.hm-gold { color: #d4af37; text-shadow: 0 0 4px rgba(212,175,55,0.3); }
.hm-res-sep { color: #5a4a28; margin: 0 2px; font-size: 0.6em; }
.hm-active-buffs { display: flex; gap: 4px; flex-wrap: wrap; }

/* ── Quick Access Tabs ── */
.hm-quick-tabs {
    display: flex;
    gap: 4px;
    margin-top: 2px;
}
.hm-qtab {
    flex: 1;
    padding: 3px 4px;
    font-size: 0.7em;
    font-weight: 700;
    background: rgba(59,31,11,0.6);
    border: 1px solid rgba(167,142,61,0.2);
    border-radius: 3px;
    color: #8b7340;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    font-family: inherit;
    white-space: nowrap;
}
.hm-qtab:hover {
    background: rgba(167,142,61,0.15);
    border-color: #d4af37;
    color: #d4af37;
    box-shadow: 0 0 8px rgba(167,142,61,0.2);
}

/* ── Activity Timers ── */
.hm-timers {
    min-width: 150px;
    max-width: 200px;
}
.hm-timer-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
/* Reuse timer card styles but with medieval palette */
.hm-timer-grid .hr-timer-card {
    background: rgba(59,31,11,0.4);
    border-color: rgba(167,142,61,0.12);
    color: #8b7340;
}
.hm-timer-grid .hr-timer-card:hover { border-color: rgba(167,142,61,0.3); background: rgba(59,31,11,0.6); }
.hm-timer-grid .hr-timer-card.raid   { border-color: rgba(52,152,219,0.25); color: #7fb3d8; }
.hm-timer-grid .hr-timer-card.labor  { border-color: rgba(230,126,34,0.25); color: #c4884a; }
.hm-timer-grid .hr-timer-card.craft  { border-color: rgba(155,89,182,0.25); color: #b08cc0; }
.hm-timer-grid .hr-timer-card.smelt  { border-color: rgba(230,126,34,0.25); color: #c4884a; }
.hm-timer-grid .hr-timer-card.ready  { animation: hmBadgePulse 1.5s ease-in-out infinite; cursor: pointer; }
.hm-timer-grid .hr-timer-icon { font-size: 1.1em; flex-shrink: 0; }
.hm-timer-grid .hr-timer-label { flex: 1; font-weight: 700; }
.hm-timer-grid .hr-timer-time { font-family: monospace; font-weight: 700; direction: ltr; font-size: 0.9em; color: #a78e3d; }
.hm-timer-grid .hr-timer-ready { color: #6b8e3a; font-weight: 800; }

@keyframes hmBadgePulse {
    0%, 100% { box-shadow: 0 0 4px rgba(107,142,58,0.15); }
    50% { box-shadow: 0 0 12px rgba(107,142,58,0.4); }
}

/* ── Header Timer Badges (Main Header) ── */
.hr-timer-card {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    background: rgba(10,6,4,0.85);
    border: 1px solid #2a1a10;
    border-radius: 4px;
    font-size: 0.75em;
    cursor: pointer;
    transition: all 0.2s;
}

.hr-timer-card:hover {
    border-color: rgba(212,175,55,0.3);
    background: rgba(20,12,8,0.9);
    transform: translateY(-1px);
}

.hr-timer-card.raid { 
    border-color: rgba(52,152,219,0.25); 
}

.hr-timer-card.labor { 
    border-color: rgba(230,126,34,0.25); 
}

.hr-timer-card.craft { 
    border-color: rgba(241,196,15,0.25); 
}

.hr-timer-card.smelt { 
    border-color: rgba(230,126,34,0.25); 
}

.hr-timer-card.ready {
    animation: headerBadgePulse 1.5s ease-in-out infinite;
    border-color: rgba(46,204,113,0.4);
}

.hr-timer-icon {
    font-size: 1.1em;
    flex-shrink: 0;
}

.hr-timer-label {
    font-weight: 600;
    color: #c4a460;
    font-size: 0.95em;
}

.hr-timer-time {
    font-family: monospace;
    font-weight: 700;
    direction: ltr;
    color: #e67e22;
    font-size: 0.9em;
}

.hr-timer-ready {
    color: #2ecc71;
    font-weight: 700;
    font-size: 0.9em;
}

@keyframes headerBadgePulse {
    0%, 100% { box-shadow: 0 0 4px rgba(46,204,113,0.2); }
    50% { box-shadow: 0 0 12px rgba(46,204,113,0.5); }
}

/* ── Text shadows for medieval feel ── */
.header-medieval * { text-shadow: 0 1px 3px rgba(0,0,0,0.9); }

/* ── Responsive ── */
@media (max-width: 900px) {
    .header-medieval { flex-wrap: wrap; gap: 4px; }
    .hm-player, .hm-stats, .hm-timers {
        min-width: unset; max-width: unset; flex: 1 1 100%;
    }
    .hm-divider { display: none; }
}

/* Modern Progress Bar System */
.modern-progress-wrapper {
    position: relative;
    width: 100%;
    min-width: 240px;
}

.modern-progress-bar {
    height: 28px;
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    position: relative;
    overflow: hidden;
    box-shadow: 
        inset 0 2px 8px rgba(0, 0, 0, 0.8),
        0 2px 8px rgba(0, 0, 0, 0.4);
}

.modern-progress-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, 
        rgba(255, 255, 255, 0.1) 0%, 
        transparent 50%, 
        rgba(0, 0, 0, 0.3) 100%
    );
    pointer-events: none;
    z-index: 3;
}

/* Progress Fill */
.progress-fill {
    height: 100%;
    border-radius: 12px;
    position: relative;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

/* XP Fill */
.xp-fill {
    background: linear-gradient(135deg, 
        #8e44ad 0%, 
        #a569bd 25%,
        #d2b4de 50%,
        #a569bd 75%,
        #8e44ad 100%
    );
    background-size: 200% 100%;
    animation: gradientFlow 3s ease-in-out infinite;
    box-shadow: 
        inset 0 1px 2px rgba(255, 255, 255, 0.3),
        0 0 12px rgba(142, 68, 173, 0.6);
}

/* HP Fill */
.hp-fill {
    background: linear-gradient(135deg, 
        #8b0000 0%, 
        #c92a2a 25%,
        #ff4d4d 50%,
        #c92a2a 75%,
        #8b0000 100%
    );
    background-size: 200% 100%;
    animation: gradientFlow 3s ease-in-out infinite;
    box-shadow: 
        inset 0 1px 2px rgba(255, 255, 255, 0.3),
        0 0 12px rgba(255, 77, 77, 0.6);
}

@keyframes gradientFlow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Progress Shine Effect */
.progress-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.3), 
        transparent
    );
    animation: shine 4s infinite;
    z-index: 2;
}

@keyframes shine {
    0% { left: -100%; }
    20%, 100% { left: 150%; }
}

/* Progress Particles */
.progress-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
}

/* HP Heartbeat Effect */
.hp-heartbeat {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(255, 77, 77, 0.4) 0%, transparent 70%);
    animation: heartbeat 2s ease-in-out infinite;
    pointer-events: none;
    z-index: 2;
}

@keyframes heartbeat {
    0%, 100% { opacity: 0; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.1); }
}

/* Progress Label */
.progress-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.9em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 6px;
    pointer-events: none;
}

.progress-icon {
    font-size: 1.1em;
    filter: drop-shadow(0 0 4px currentColor);
}

/* Bonus Text */
.bonus-text {
    color: #2ecc71;
    font-size: 1.02em;
    font-weight: 600;
    margin-top: 2px;
    text-shadow: 0 0 8px rgba(46, 204, 113, 0.5);
}

.gold-bonus {
    color: #f1c40f;
    text-shadow: 0 0 8px rgba(241, 196, 15, 0.5);
}

/* Health Container */
.health-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.quick-potions {
    display: flex;
    gap: 4px;
    align-items: center;
}

/* Resource Display */
.resource-display {
    position: relative;
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid;
    padding: 8px 16px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 
        inset 0 2px 8px rgba(0, 0, 0, 0.6),
        0 2px 12px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.resource-display:hover {
    transform: translateY(-2px);
    box-shadow: 
        inset 0 2px 8px rgba(0, 0, 0, 0.6),
        0 4px 16px rgba(0, 0, 0, 0.6);
}

.gold-display {
    border-color: var(--gold);
}

.energy-display {
    border-color: #3498db;
    flex-direction: column;
    align-items: stretch;
    padding: 8px 12px;
    gap: 6px;
}

.resource-icon-wrapper {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.resource-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}

.resource-emoji {
    font-size: 20px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}

.resource-value {
    font-family: 'Cairo', monospace;
    font-size: 1.25em;
    font-weight: 900;
    letter-spacing: 0.5px;
}

.gold-value {
    color: var(--gold);
    text-shadow: 0 0 12px rgba(212, 175, 55, 0.6);
}

/* Resource Shimmer Effect */
.resource-shimmer {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.2), 
        transparent
    );
    animation: shimmer 3s infinite;
    pointer-events: none;
}

@keyframes shimmer {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   NEW POINTS REGENERATION BAR
   Modern, animated progress indicator
   ═══════════════════════════════════════════════════════════ */

.points-regen-bar {
    width: 100%;
    height: 6px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8);
}

.regen-progress {
    height: 100%;
    background: linear-gradient(90deg, 
        #1e88e5 0%, 
        #42a5f5 50%, 
        #64b5f6 100%
    );
    border-radius: 3px;
    position: relative;
    transition: width 1s linear;
    box-shadow: 
        0 0 8px rgba(30, 136, 229, 0.8),
        inset 0 1px 1px rgba(255, 255, 255, 0.5);
}

.regen-progress::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.4) 50%, 
        transparent 100%
    );
    animation: regenPulse 2s ease-in-out infinite;
}

@keyframes regenPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

/* Regen Glow Effect */
.regen-glow {
    position: absolute;
    top: 50%;
    right: 0;
    width: 20px;
    height: 12px;
    background: radial-gradient(circle, 
        rgba(100, 181, 246, 1) 0%, 
        rgba(100, 181, 246, 0.5) 50%, 
        transparent 100%
    );
    transform: translateY(-50%);
    filter: blur(3px);
    animation: glowPulse 1.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes glowPulse {
    0%, 100% { opacity: 0.6; transform: translateY(-50%) scale(0.9); }
    50% { opacity: 1; transform: translateY(-50%) scale(1.2); }
}

/* Regen Particles */
.regen-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.regen-particles .particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(100, 181, 246, 0.8);
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(100, 181, 246, 1);
    animation: particleFloat 3s linear infinite;
}

.regen-particles .particle:nth-child(1) {
    left: 20%;
    animation-delay: 0s;
}

.regen-particles .particle:nth-child(2) {
    left: 50%;
    animation-delay: 1s;
}

.regen-particles .particle:nth-child(3) {
    left: 80%;
    animation-delay: 2s;
}

@keyframes particleFloat {
    0% {
        transform: translateY(6px);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateY(-6px);
        opacity: 0;
    }
}

/* Buff Icons Container */
.buff-icons-container {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.active-buffs-inline {
    display: flex;
    gap: 8px;
    align-items: center;
}

.header-improved {
    background: linear-gradient(180deg, 
        rgba(26, 10, 10, 0.98) 0%, 
        rgba(15, 5, 5, 0.95) 50%,
        rgba(5, 5, 5, 0.98) 100%
    );
    padding: 15px 30px; /* Reduced by 5% from 16px 32px */
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, 
        transparent, 
        var(--blood) 20%, 
        var(--gold) 50%, 
        var(--blood) 80%, 
        transparent
    ) 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    box-shadow: 
        0 4px 24px rgba(139, 0, 0, 0.3),
        0 8px 48px rgba(0, 0, 0, 0.6),
        inset 0 -2px 12px rgba(0, 0, 0, 0.8),
        inset 0 1px 1px rgba(212, 175, 55, 0.1);
    position: relative;
    z-index: 10;
    backdrop-filter: blur(10px);
}

.header-improved::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(212, 175, 55, 0.3) 50%, 
        transparent
    );
}

/* Header Sections with Dark Fantasy Pattern Backgrounds */
.header-section-left {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 280px;
    position: relative;
    padding: 12px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(15, 5, 5, 0.5), rgba(26, 10, 10, 0.5));
    overflow: hidden; /* Ensure pattern doesn't spill out */
}

/* Left Section Pattern Layer */
.header-section-left::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('assets/ui/header-pattern.png');
    background-size: 200px 200px;
    background-repeat: repeat;
    background-position: center;
    opacity: 0.5;
    border-radius: 8px;
    z-index: 0;
    filter: brightness(0.8) contrast(1.2);
    mix-blend-mode: overlay;
    pointer-events: none;
}

/* Ensure children are above pattern */
.header-section-left > * {
    position: relative;
    z-index: 1;
}

.header-section-center {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 8px;
    border-radius: 8px;
    overflow: hidden;
}

/* Center Section Pattern Layer - More Subtle */
.header-section-center::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('assets/ui/header-pattern.png');
    background-size: 150px 150px;
    background-repeat: repeat;
    background-position: center;
    opacity: 0.25;
    border-radius: 8px;
    z-index: 0;
    filter: brightness(0.6) hue-rotate(15deg);
    mix-blend-mode: soft-light;
    pointer-events: none;
}

/* Ensure children are above pattern */
.header-section-center > * {
    position: relative;
    z-index: 1;
}

.header-section-right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    position: relative;
    padding: 12px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(26, 10, 10, 0.5), rgba(15, 5, 5, 0.5));
    overflow: hidden;
}

/* Right Section Pattern Layer - Darker Variation */
.header-section-right::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('assets/ui/header-pattern.png');
    background-size: 180px 180px;
    background-repeat: repeat;
    background-position: center;
    opacity: 0.5;
    border-radius: 8px;
    z-index: 0;
    filter: brightness(0.7) contrast(1.3) hue-rotate(-10deg);
    mix-blend-mode: overlay;
    pointer-events: none;
}

/* Ensure children are above pattern */
.header-section-right > * {
    position: relative;
    z-index: 1;
}

/* Player Identity */
.player-identity {
    display: flex;
    align-items: center;
    gap: 12px;
}

.player-name-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.player-name {
    color: #ffffff;
    font-weight: 900;
    font-size: 1.3em;
    letter-spacing: 1.2px;
    text-shadow: 
        0 0 20px rgba(212, 175, 55, 0.6),
        0 2px 4px rgba(0, 0, 0, 0.8),
        0 0 40px rgba(212, 175, 55, 0.3);
    background: linear-gradient(135deg, #ffffff, var(--gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.player-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.02em;
    color: #aaa;
}

.player-class {
    color: var(--gold);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.separator {
    color: #555;
    font-size: 0.8em;
}

.player-level {
    color: #8e44ad;
    font-weight: 700;
}

/* Modern Progress Bar System */
.modern-progress-wrapper {
    position: relative;
    width: 100%;
    min-width: 240px;
}

.modern-progress-bar {
    height: 28px;
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    position: relative;
    overflow: hidden;
    box-shadow: 
        inset 0 2px 8px rgba(0, 0, 0, 0.8),
        0 2px 8px rgba(0, 0, 0, 0.4);
}

.modern-progress-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, 
        rgba(255, 255, 255, 0.1) 0%, 
        transparent 50%, 
        rgba(0, 0, 0, 0.3) 100%
    );
    pointer-events: none;
    z-index: 3;
}

/* Progress Fill */
.progress-fill {
    height: 100%;
    border-radius: 12px;
    position: relative;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

/* XP Fill */
.xp-fill {
    background: linear-gradient(135deg, 
        #8e44ad 0%, 
        #a569bd 25%,
        #d2b4de 50%,
        #a569bd 75%,
        #8e44ad 100%
    );
    background-size: 200% 100%;
    animation: gradientFlow 3s ease-in-out infinite;
    box-shadow: 
        inset 0 1px 2px rgba(255, 255, 255, 0.3),
        0 0 12px rgba(142, 68, 173, 0.6);
}

/* HP Fill */
.hp-fill {
    background: linear-gradient(135deg, 
        #8b0000 0%, 
        #c92a2a 25%,
        #ff4d4d 50%,
        #c92a2a 75%,
        #8b0000 100%
    );
    background-size: 200% 100%;
    animation: gradientFlow 3s ease-in-out infinite;
    box-shadow: 
        inset 0 1px 2px rgba(255, 255, 255, 0.3),
        0 0 12px rgba(255, 77, 77, 0.6);
}

@keyframes gradientFlow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Progress Shine Effect */
.progress-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.3), 
        transparent
    );
    animation: shine 4s infinite;
    z-index: 2;
}

@keyframes shine {
    0% { left: -100%; }
    20%, 100% { left: 150%; }
}

/* Progress Particles */
.progress-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
}

/* HP Heartbeat Effect */
.hp-heartbeat {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(255, 77, 77, 0.4) 0%, transparent 70%);
    animation: heartbeat 2s ease-in-out infinite;
    pointer-events: none;
    z-index: 2;
}

@keyframes heartbeat {
    0%, 100% { opacity: 0; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.1); }
}

/* Progress Label */
.progress-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.9em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 6px;
    pointer-events: none;
}

.progress-icon {
    font-size: 1.1em;
    filter: drop-shadow(0 0 4px currentColor);
}

/* Bonus Text */
.bonus-text {
    color: #2ecc71;
    font-size: 1.02em;
    font-weight: 600;
    margin-top: 2px;
    text-shadow: 0 0 8px rgba(46, 204, 113, 0.5);
}

.gold-bonus {
    color: #f1c40f;
    text-shadow: 0 0 8px rgba(241, 196, 15, 0.5);
}

/* Health Container */
.health-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.quick-potions {
    display: flex;
    gap: 4px;
    align-items: center;
}

/* Resource Display */
.resource-display {
    position: relative;
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid;
    padding: 8px 16px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 
        inset 0 2px 8px rgba(0, 0, 0, 0.6),
        0 2px 12px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.resource-display:hover {
    transform: translateY(-2px);
    box-shadow: 
        inset 0 2px 8px rgba(0, 0, 0, 0.6),
        0 4px 16px rgba(0, 0, 0, 0.6);
}

.gold-display {
    border-color: var(--gold);
}

.energy-display {
    border-color: #3498db;
    flex-direction: column;
    align-items: stretch;
    padding: 8px 12px;
    gap: 6px;
}

.resource-icon-wrapper {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.resource-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}

.resource-emoji {
    font-size: 20px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}

.resource-value {
    font-family: 'Cairo', monospace;
    font-size: 1.25em;
    font-weight: 900;
    letter-spacing: 0.5px;
}

.gold-value {
    color: var(--gold);
    text-shadow: 0 0 12px rgba(212, 175, 55, 0.6);
}

/* Resource Shimmer Effect */
.resource-shimmer {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.2), 
        transparent
    );
    animation: shimmer 3s infinite;
    pointer-events: none;
}

@keyframes shimmer {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   NEW POINTS REGENERATION BAR
   Modern, animated progress indicator
   ═══════════════════════════════════════════════════════════ */

.points-regen-bar {
    width: 100%;
    height: 6px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8);
}

.regen-progress {
    height: 100%;
    background: linear-gradient(90deg, 
        #1e88e5 0%, 
        #42a5f5 50%, 
        #64b5f6 100%
    );
    border-radius: 3px;
    position: relative;
    transition: width 1s linear;
    box-shadow: 
        0 0 8px rgba(30, 136, 229, 0.8),
        inset 0 1px 1px rgba(255, 255, 255, 0.5);
}

.regen-progress::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.4) 50%, 
        transparent 100%
    );
    animation: regenPulse 2s ease-in-out infinite;
}

@keyframes regenPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

/* Regen Glow Effect */
.regen-glow {
    position: absolute;
    top: 50%;
    right: 0;
    width: 20px;
    height: 12px;
    background: radial-gradient(circle, 
        rgba(100, 181, 246, 1) 0%, 
        rgba(100, 181, 246, 0.5) 50%, 
        transparent 100%
    );
    transform: translateY(-50%);
    filter: blur(3px);
    animation: glowPulse 1.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes glowPulse {
    0%, 100% { opacity: 0.6; transform: translateY(-50%) scale(0.9); }
    50% { opacity: 1; transform: translateY(-50%) scale(1.2); }
}

/* Regen Particles */
.regen-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.regen-particles .particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(100, 181, 246, 0.8);
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(100, 181, 246, 1);
    animation: particleFloat 3s linear infinite;
}

.regen-particles .particle:nth-child(1) {
    left: 20%;
    animation-delay: 0s;
}

.regen-particles .particle:nth-child(2) {
    left: 50%;
    animation-delay: 1s;
}

.regen-particles .particle:nth-child(3) {
    left: 80%;
    animation-delay: 2s;
}

@keyframes particleFloat {
    0% {
        transform: translateY(6px);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateY(-6px);
        opacity: 0;
    }
}

/* Responsive Adjustments */
@media (max-width: 1200px) {
    .header-improved {
        padding: 12px 20px;
        gap: 16px;
    }
    
    .header-section-left {
        min-width: 220px;
    }
    
    .modern-progress-wrapper {
        min-width: 200px;
    }
    
    .player-name {
        font-size: 1.1em;
    }
}

@media (max-width: 900px) {
    .header-improved {
        flex-wrap: wrap;
    }
    
    .header-section-left,
    .header-section-right {
        width: 100%;
    }
    
    .header-section-center {
        order: -1;
        width: 100%;
    }
}

/* ═══ BLOOD MAP — VIKING SEA MAP THEME ═══ */
.blood-map-container {
    position: relative;
    min-height: calc(100vh - 100px);
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid #5a0000;
    box-shadow: 0 0 40px rgba(139,0,0,0.3), inset 0 0 60px rgba(0,0,0,0.8);
}

.blood-map-fallback {
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(ellipse at 30% 20%, rgba(80,0,0,0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 60%, rgba(60,0,0,0.25) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 90%, rgba(100,20,0,0.2) 0%, transparent 40%),
        linear-gradient(180deg, #0a0200 0%, #1a0500 30%, #120300 60%, #080100 100%);
    z-index: 0;
}

.blood-map-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 30%, rgba(0,0,0,0.3) 70%, rgba(0,0,0,0.7) 100%);
    z-index: 1;
}

/* Animated fog layers */
.blood-fog {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0.12;
}

.blood-fog.fog-1 {
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 800 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='f'%3E%3CfeTurbulence baseFrequency='0.015' numOctaves='3' seed='1'/%3E%3CfeColorMatrix values='0 0 0 0 0.4 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E") repeat;
    background-size: 200% 200%;
    animation: fogDrift1 40s linear infinite;
}

.blood-fog.fog-2 {
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 800 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='f'%3E%3CfeTurbulence baseFrequency='0.02' numOctaves='2' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.05 0 0 0 0 0 0 0 0 0.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E") repeat;
    background-size: 250% 250%;
    animation: fogDrift2 55s linear infinite reverse;
    opacity: 0.08;
}

@keyframes fogDrift1 {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 50%; }
}

@keyframes fogDrift2 {
    0% { background-position: 100% 100%; }
    100% { background-position: 0% 0%; }
}

/* Blood map region cards */
.blood-region-card {
    position: relative;
    border: 2px solid #5a0000;
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s;
    overflow: hidden;
    backdrop-filter: blur(6px);
    background: rgba(10,2,2,0.7);
}

.blood-region-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: radial-gradient(ellipse at 50% 50%, rgba(139,0,0,0.1) 0%, transparent 70%);
    transition: all 0.3s;
    pointer-events: none;
}

.blood-region-card:hover {
    border-color: #ff4d4d;
    box-shadow: 0 0 30px rgba(255,0,0,0.3), inset 0 0 20px rgba(139,0,0,0.2);
    transform: translateY(-3px);
}

.blood-region-card:hover::before {
    background: radial-gradient(ellipse at 50% 50%, rgba(255,0,0,0.15) 0%, transparent 70%);
}

.blood-region-card.locked {
    opacity: 0.4;
    cursor: not-allowed;
    filter: grayscale(60%);
}

.blood-region-card.locked:hover {
    transform: none;
    box-shadow: none;
    border-color: #5a0000;
}

/* Pulsing blood path connector */
.blood-path-connector {
    width: 3px;
    height: 30px;
    margin: 0 auto;
    background: linear-gradient(to bottom, #8b0000, #ff4d4d, #8b0000);
    position: relative;
    animation: bloodPulse 2s ease-in-out infinite;
}

@keyframes bloodPulse {
    0%, 100% { opacity: 0.4; box-shadow: 0 0 5px rgba(255,0,0,0.2); }
    50% { opacity: 1; box-shadow: 0 0 15px rgba(255,0,0,0.6); }
}

/* Longship position marker */
.blood-map-ship {
    display: inline-block;
    font-size: 1.4em;
    animation: shipFloat 3s ease-in-out infinite;
    filter: drop-shadow(0 0 8px rgba(255,200,0,0.5));
}

@keyframes shipFloat {
    0%, 100% { transform: translateY(0px) rotate(-2deg); }
    50% { transform: translateY(-5px) rotate(2deg); }
}

/* Dungeon cards inside a region */
.blood-dungeon-card {
    background: rgba(5,0,0,0.75);
    border: 1px solid #4a0000;
    border-radius: 10px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.3s;
    backdrop-filter: blur(4px);
}

.blood-dungeon-card:hover {
    border-color: #ff4d4d;
    box-shadow: 0 0 20px rgba(255,0,0,0.25);
    background: rgba(20,0,0,0.8);
}

.blood-dungeon-card.locked {
    opacity: 0.35;
    cursor: not-allowed;
    filter: grayscale(50%);
}

/* ═══ LOOT DROP POPUP ═══ */
@keyframes lootPopIn {
    0% { opacity: 0; transform: scale(0.3) rotate(-5deg); }
    60% { transform: scale(1.05) rotate(1deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes lootShimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

.loot-item-glow {
    animation: lootGlowPulse 1.5s ease-in-out infinite;
}

@keyframes lootGlowPulse {
    0%, 100% { filter: drop-shadow(0 0 15px var(--loot-color)); }
    50% { filter: drop-shadow(0 0 35px var(--loot-color)) drop-shadow(0 0 60px var(--loot-color)); }
}

/* ═══ BADGE DISPLAY SLOTS ═══ */
.badge-display-slot {
    width: 100%;
    aspect-ratio: 1;
    border: 2px dashed #333;
    border-radius: 8px;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}

.badge-display-slot:hover {
    border-color: var(--gold);
    background: rgba(212,175,55,0.08);
}

.badge-display-slot.filled {
    border-style: solid;
    border-color: #555;
}

.badge-display-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.badge-selector-item {
    width: 40px;
    height: 40px;
    border: 2px solid #444;
    border-radius: 6px;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.3em;
    transition: all 0.2s;
}

.badge-selector-item:hover {
    border-color: var(--gold);
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(212,175,55,0.4);
}

/* ═══ NOTIFICATION BADGES ═══ */
.notif-dot {
    position: absolute;
    top: -4px;
    left: -4px;
    width: 12px;
    height: 12px;
    background: #e74c3c;
    border-radius: 50%;
    border: 2px solid #0a0a0a;
    z-index: 10;
    animation: notifPulse 2s ease-in-out infinite;
}

@keyframes notifPulse {
    0%, 100% { box-shadow: 0 0 3px rgba(231,76,60,0.5); }
    50% { box-shadow: 0 0 10px rgba(231,76,60,0.8); }
}

/* ═══ ENERGY PANEL — REDESIGNED ═══ */
.energy-panel {
    background: rgba(0,0,0,0.75);
    border: 2px solid #3498db;
    border-radius: 10px;
    padding: 10px 16px;
    min-width: 180px;
    box-shadow: 0 0 15px rgba(52,152,219,0.2), inset 0 0 10px rgba(0,0,0,0.6);
    transition: all 0.2s;
    cursor: help;
}

.energy-panel:hover {
    border-color: #5dade2;
    box-shadow: 0 0 25px rgba(52,152,219,0.35), inset 0 0 10px rgba(0,0,0,0.6);
    transform: translateY(-1px);
}

.energy-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.energy-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: drop-shadow(0 0 6px rgba(52,152,219,0.8));
}

.energy-value {
    font-family: monospace;
    font-size: 1.3em;
    font-weight: 900;
    color: #5dade2;
    text-shadow: 0 0 10px rgba(52,152,219,0.5);
    letter-spacing: 1px;
}

.energy-timer {
    margin-right: auto;
    font-family: monospace;
    font-size: 0.8em;
    color: #888;
    direction: ltr;
}

.energy-bar-track {
    width: 100%;
    height: 10px;
    background: rgba(0,0,0,0.6);
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #1a3a5c;
    position: relative;
    box-shadow: inset 0 1px 4px rgba(0,0,0,0.8);
}

.energy-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #1a5276, #2e86c1, #5dade2);
    border-radius: 5px;
    transition: width 0.5s ease;
    position: absolute;
    top: 0;
    left: 0;
    box-shadow: 0 0 8px rgba(52,152,219,0.5);
}

.energy-regen-tick {
    height: 100%;
    background: linear-gradient(90deg, rgba(93,173,226,0.3), rgba(93,173,226,0.7));
    border-radius: 5px;
    transition: width 0.1s linear;
    position: absolute;
    top: 0;
    left: 0;
    animation: energyTickPulse 1s ease-in-out infinite;
}

@keyframes energyTickPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* Full energy glow */
.energy-panel.energy-full {
    border-color: #2ecc71;
    box-shadow: 0 0 15px rgba(46,204,113,0.25), inset 0 0 10px rgba(0,0,0,0.6);
}

.energy-panel.energy-full .energy-value {
    color: #2ecc71;
    text-shadow: 0 0 10px rgba(46,204,113,0.5);
}

.energy-panel.energy-full .energy-bar-fill {
    background: linear-gradient(90deg, #1d8348, #27ae60, #2ecc71);
    box-shadow: 0 0 8px rgba(46,204,113,0.5);
}

/* Low energy warning */
.energy-panel.energy-low {
    border-color: #e74c3c;
    animation: energyLowPulse 2s ease-in-out infinite;
}

@keyframes energyLowPulse {
    0%, 100% { box-shadow: 0 0 10px rgba(231,76,60,0.2), inset 0 0 10px rgba(0,0,0,0.6); }
    50% { box-shadow: 0 0 20px rgba(231,76,60,0.4), inset 0 0 10px rgba(0,0,0,0.6); }
}

.energy-panel.energy-low .energy-value {
    color: #e74c3c;
}

.energy-panel.energy-low .energy-bar-fill {
    background: linear-gradient(90deg, #922b21, #c0392b, #e74c3c);
}

/* ═══════════════════════════════════════════════════════════
   PAGE FOOTER
   ═══════════════════════════════════════════════════════════ */
.page-footer {
    background: linear-gradient(180deg, #0a0a0a 0%, #060606 100%);
    border-top: 2px solid var(--iron);
    padding: 24px 30px 16px 30px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-top: auto;
    direction: rtl;
}

.page-footer-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 150px;
}

.page-footer-section h4 {
    color: var(--gold);
    font-size: 0.9em;
    font-weight: 900;
    letter-spacing: 1px;
    margin: 0 0 4px 0;
    padding-bottom: 4px;
    border-bottom: 1px solid #333;
    text-transform: uppercase;
}

.page-footer-section a,
.page-footer-section .footer-link {
    color: #999;
    font-size: 1.02em;
    text-decoration: none;
    transition: color 0.2s, text-shadow 0.2s;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

.page-footer-section a:hover,
.page-footer-section .footer-link:hover {
    color: var(--gold);
    text-shadow: 0 0 8px rgba(212,175,55,0.4);
}

.footer-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    vertical-align: middle;
}

.page-footer-screenshot {
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.page-footer-screenshot h4 {
    color: var(--gold);
    font-size: 0.9em;
    font-weight: 900;
    letter-spacing: 1px;
    margin: 0 0 4px 0;
    padding-bottom: 4px;
    border-bottom: 1px solid #333;
    text-transform: uppercase;
}

.screenshot-area {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.screenshot-area img {
    width: 220px;
    height: 130px;
    object-fit: cover;
    border-radius: 6px;
    border: 2px solid #333;
    cursor: pointer;
    transition: all 0.3s;
}

.screenshot-area img:hover {
    border-color: var(--gold);
    box-shadow: 0 0 15px rgba(212,175,55,0.3);
    transform: scale(1.03);
}

.screenshot-placeholder {
    color: #555;
    font-size: 1.02em;
    padding: 20px;
    border: 2px dashed #333;
    border-radius: 8px;
    text-align: center;
    width: 100%;
}

.page-footer-copy {
    width: 100%;
    text-align: center;
    color: #555;
    font-size: 0.78em;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #222;
}

/* ═══════════════════════════════════════════════════════════
   VIEW TRANSITIONS
   ═══════════════════════════════════════════════════════════ */
.view-fade-in {
    animation: viewFadeIn 0.3s ease-out forwards;
}

@keyframes viewFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════
   TOAST NOTIFICATION SYSTEM
   ═══════════════════════════════════════════════════════════ */
#toast-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    direction: rtl;
}

.toast {
    pointer-events: auto;
    min-width: 280px;
    max-width: 420px;
    padding: 12px 20px 12px 16px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Cairo', sans-serif;
    font-size: 0.92em;
    font-weight: 700;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05);
    animation: toastIn 0.35s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
    cursor: default;
    border: 1px solid;
    position: relative;
    overflow: hidden;
}

.toast-icon {
    font-size: 1.4em;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

.toast-msg {
    flex: 1;
    line-height: 1.4;
    color: #eee;
}

.toast-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.4);
    font-size: 1.1em;
    cursor: pointer;
    padding: 0 4px;
    transition: color 0.2s;
    flex-shrink: 0;
}

.toast-close:hover { color: #fff; }

.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    border-radius: 0 0 10px 10px;
    animation: toastProgress linear forwards;
}

.toast-success {
    background: rgba(15, 60, 30, 0.92);
    border-color: rgba(46, 204, 113, 0.4);
}
.toast-success .toast-icon { color: #2ecc71; }
.toast-success .toast-progress { background: #2ecc71; }

.toast-info {
    background: rgba(15, 30, 60, 0.92);
    border-color: rgba(52, 152, 219, 0.4);
}
.toast-info .toast-icon { color: #3498db; }
.toast-info .toast-progress { background: #3498db; }

.toast-warning {
    background: rgba(60, 40, 10, 0.92);
    border-color: rgba(243, 156, 18, 0.4);
}
.toast-warning .toast-icon { color: #f39c12; }
.toast-warning .toast-progress { background: #f39c12; }

.toast-error {
    background: rgba(60, 10, 10, 0.92);
    border-color: rgba(231, 76, 60, 0.4);
}
.toast-error .toast-icon { color: #e74c3c; }
.toast-error .toast-progress { background: #e74c3c; }

.toast-loot {
    background: rgba(50, 20, 60, 0.92);
    border-color: rgba(155, 89, 182, 0.5);
}
.toast-loot .toast-icon { color: #d2b4de; }
.toast-loot .toast-progress { background: #9b59b6; }

.toast-level {
    background: rgba(50, 40, 10, 0.94);
    border-color: rgba(212, 175, 55, 0.5);
    box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 20px rgba(212,175,55,0.15), inset 0 1px 0 rgba(255,255,255,0.05);
}
.toast-level .toast-icon { color: #d4af37; }
.toast-level .toast-progress { background: #d4af37; }

@keyframes toastIn {
    from { opacity: 0; transform: translateY(-20px) scale(0.9); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toastOut {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(-15px) scale(0.9); }
}

@keyframes toastProgress {
    from { width: 100%; }
    to   { width: 0%; }
}

/* ═══════════════════════════════════════════════════════════
   WELCOME MODAL
   ═══════════════════════════════════════════════════════════ */
.welcome-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(8px);
    z-index: 55000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: welcomeFadeIn 0.5s ease-out;
}

@keyframes welcomeFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.welcome-box {
    background: linear-gradient(145deg, rgba(15,8,8,0.98), rgba(25,12,12,0.98));
    border: 2px solid var(--gold);
    border-radius: 16px;
    max-width: 560px;
    width: 92%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 0 80px rgba(139,0,0,0.4), 0 0 120px rgba(0,0,0,0.8), inset 0 0 30px rgba(0,0,0,0.6);
    direction: rtl;
    padding: 0;
    animation: welcomeSlideIn 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

@keyframes welcomeSlideIn {
    from { opacity: 0; transform: scale(0.85) translateY(20px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.welcome-header {
    background: linear-gradient(90deg, transparent, rgba(212,175,55,0.15), transparent);
    border-bottom: 1px solid rgba(212,175,55,0.3);
    padding: 20px 24px;
    text-align: center;
}

.welcome-header h2 {
    color: var(--gold);
    margin: 0;
    font-size: 1.5em;
    letter-spacing: 2px;
    text-shadow: 0 0 15px rgba(212,175,55,0.4);
}

.welcome-body {
    padding: 24px;
    color: #ccc;
    font-size: 0.95em;
    line-height: 1.8;
}

.welcome-body h3 {
    color: var(--gold);
    margin: 16px 0 8px 0;
    font-size: 1.1em;
}

.welcome-body ul {
    margin: 6px 0 12px 0;
    padding-right: 20px;
    color: #bbb;
}

.welcome-body li {
    margin-bottom: 4px;
}

.welcome-goals {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 16px 0;
}

.welcome-goal {
    background: rgba(0,0,0,0.4);
    border: 1px solid #333;
    border-radius: 8px;
    padding: 12px;
    text-align: center;
}

.welcome-goal-icon {
    font-size: 2em;
    margin-bottom: 4px;
}

.welcome-goal-label {
    color: #ddd;
    font-size: 1.02em;
    font-weight: 700;
}

.welcome-footer {
    padding: 16px 24px 20px 24px;
    text-align: center;
    border-top: 1px solid #333;
}

/* ═══════════════════════════════════════════════════════════
   FAST TRAIN TOGGLE
   ═══════════════════════════════════════════════════════════ */
#fast-train-toggle:checked + span {
    color: #2ecc71;
    text-shadow: 0 0 8px rgba(46,204,113,0.4);
}

/* ═══════════════════════════════════════════════════════
   HUD HEADER — Complete Redesign
   Dark steel RPG HUD, 6 zones, horizontal, compact
═══════════════════════════════════════════════════════ */

.hud-header {
    display: flex;
    align-items: center;
    gap: 0;
    background:
        linear-gradient(180deg, rgba(8,4,4,0.99) 0%, rgba(14,6,6,0.97) 60%, rgba(5,2,2,0.99) 100%);
    border-bottom: 1px solid #2a1010;
    box-shadow: 0 2px 20px rgba(0,0,0,0.8), 0 0 40px rgba(139,0,0,0.12), inset 0 -1px 0 rgba(212,175,55,0.15);
    position: relative;
    z-index: 100;
    min-height: 62px;
    overflow: visible;
}

/* Top gold accent line */
.hud-header::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(212,175,55,0.4) 30%, rgba(212,175,55,0.6) 50%, rgba(212,175,55,0.4) 70%, transparent 100%);
    pointer-events: none;
}

/* Each zone */
.hud-zone {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8px 14px;
    flex-shrink: 0;
    position: relative;
}

/* Thin vertical dividers between zones */
.hud-divider {
    width: 1px;
    height: 36px;
    background: linear-gradient(to bottom, transparent, rgba(139,0,0,0.5) 30%, rgba(212,175,55,0.2) 50%, rgba(139,0,0,0.5) 70%, transparent);
    flex-shrink: 0;
    align-self: center;
}

/* ── Zone 1: Player Card ── */
.hud-zone-player {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    min-width: 185px;
    padding-right: 18px;
}

.hud-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid #8b0000;
    background: radial-gradient(circle at 40% 35%, rgba(139,0,0,0.4), rgba(0,0,0,0.8));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 10px rgba(139,0,0,0.3), inset 0 0 6px rgba(0,0,0,0.6);
}

.hud-avatar-glyph {
    font-size: 1.2em;
    filter: drop-shadow(0 0 4px rgba(212,175,55,0.4));
}

.hud-player-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hud-name {
    font-size: 0.95em;
    font-weight: 900;
    letter-spacing: 0.5px;
    color: #fff;
    text-shadow: 0 0 12px rgba(212,175,55,0.3);
    /* gold gradient text */
    background: linear-gradient(135deg, #fff 30%, #d4af37 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hud-meta-row {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.73em;
}

.hud-class {
    color: #d4af37;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hud-dot {
    color: #444;
}

.hud-lvl {
    color: #9b59b6;
    font-weight: 700;
}

/* ── Zones 2/3/4: Bar Zones ── */
.hud-zone-xp     { min-width: 170px; }
.hud-zone-hp     { min-width: 165px; }
.hud-zone-energy { min-width: 160px; }

.hud-bar-header {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 5px;
}

.hud-bar-label {
    font-size: 0.68em;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    flex-shrink: 0;
}

.hud-bar-value {
    font-family: monospace;
    font-size: 0.75em;
    color: #bbb;
    flex: 1;
    text-align: left;
    direction: ltr;
}

.hud-bar-bonus {
    font-size: 0.65em;
    color: #2ecc71;
    flex-shrink: 0;
}

/* The track */
.hud-bar-track {
    width: 100%;
    height: 11px;
    background: rgba(0,0,0,0.7);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.05);
    box-shadow: inset 0 1px 4px rgba(0,0,0,0.9);
    position: relative;
}

/* Fill layer */
.hud-bar-fill {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    border-radius: 6px;
    transition: width 0.4s ease;
}

/* Gloss reflection */
.hud-bar-gloss {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 45%;
    background: linear-gradient(to bottom, rgba(255,255,255,0.12), transparent);
    border-radius: 6px 6px 0 0;
    pointer-events: none;
}

/* XP fill — gold */
.hud-xp-fill {
    background: linear-gradient(90deg, #7d5a00, #c9940a, #f1c40f, #c9940a);
    background-size: 200% 100%;
    animation: hudXpShimmer 3s linear infinite;
    box-shadow: 0 0 8px rgba(241,196,15,0.4);
}
@keyframes hudXpShimmer {
    0% { background-position: 0% 0; }
    100% { background-position: 200% 0; }
}

/* HP fill — blood red → green */
.hud-hp-fill {
    background: linear-gradient(90deg, #6b0000, #c0392b, #e74c3c);
    box-shadow: 0 0 8px rgba(231,76,60,0.35);
    transition: width 0.4s ease, background 0.6s ease;
}

/* Energy fill — blue */
.hud-energy-fill {
    background: linear-gradient(90deg, #0d3b5e, #1a6fa8, #3498db);
    box-shadow: 0 0 8px rgba(52,152,219,0.35);
}

/* Energy regen tick */
.hud-energy-tick {
    position: absolute;
    top: 0;
    height: 100%;
    background: rgba(93,173,226,0.5);
    border-radius: 0 6px 6px 0;
    transition: width 0.1s linear, left 0.1s linear;
    animation: hudTickPulse 1s ease-in-out infinite;
}
@keyframes hudTickPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.9; }
}

/* Potions row */
.hud-potions {
    display: flex;
    gap: 3px;
    margin-top: 4px;
    align-items: center;
}

/* ── Zone 5: Resources ── */
.hud-zone-resources {
    min-width: 130px;
}

.hud-res-row {
    display: flex;
    align-items: center;
    gap: 5px;
}

.hud-res-img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    filter: drop-shadow(0 0 4px rgba(241,196,15,0.4));
}

.hud-res-emoji {
    font-size: 0.9em;
}

.hud-gold {
    font-family: monospace;
    font-size: 1em;
    font-weight: 900;
    color: #d4af37;
    text-shadow: 0 0 10px rgba(212,175,55,0.4);
    letter-spacing: 0.5px;
}

.hud-gems {
    font-family: monospace;
    font-size: 1.02em;
    font-weight: 700;
    color: #ff9999;
}

/* ── Zone 6: Buffs ── */
.hud-zone-buffs {
    flex: 1;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    justify-content: flex-end;
    padding-left: 18px;
    min-width: 60px;
}

.hud-buffs-row {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
}

/* ── Activity Ticker ── */
.hud-ticker {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 16px;
    background: rgba(0,0,0,0.55);
    border-bottom: 1px solid rgba(50,20,20,0.8);
    min-height: 22px;
    overflow: hidden;
}

.hud-ticker-label {
    color: #3a1a1a;
    font-size: 0.7em;
    flex-shrink: 0;
}

.hud-ticker-items {
    display: flex;
    gap: 12px;
    align-items: center;
    font-size: 0.72em;
    flex-wrap: nowrap;
    overflow: hidden;
}

.hud-ticker-empty {
    color: #2a1212;
    font-size: 0.9em;
}

/* HP fill color change at low health */
.hud-hp-fill.hp-low {
    background: linear-gradient(90deg, #3a0000, #8b0000, #c0392b);
    animation: hudHpLowPulse 1.5s ease-in-out infinite;
}
@keyframes hudHpLowPulse {
    0%, 100% { box-shadow: 0 0 6px rgba(139,0,0,0.4); }
    50% { box-shadow: 0 0 16px rgba(231,76,60,0.7); }
}

/* Energy zone state classes */
.hud-zone-energy.energy-full .hud-energy-fill {
    background: linear-gradient(90deg, #0d5c2e, #1a8a44, #2ecc71);
    box-shadow: 0 0 8px rgba(46,204,113,0.4);
}
.hud-zone-energy.energy-full .hud-bar-label { color: #2ecc71 !important; }
.hud-zone-energy.energy-low { animation: hudEnergyWarn 2s ease-in-out infinite; }
@keyframes hudEnergyWarn {
    0%, 100% { background: transparent; }
    50% { background: rgba(231,76,60,0.06); }
}


/* ═══════════════════════════════════════════════════════════════
   STONE MEDIEVAL HEADER — Reference Implementation
   Based on tan/brown stone texture with bevel gradient
═══════════════════════════════════════════════════════════════ */

/* WRAPPER */
.game-header-inner {
    display: flex;
    align-items: stretch;
    border-radius: 6px;
    /* Background removed - using new compact design */
    box-shadow: 0 0 0 2px rgba(139,0,0,0.3), 0 2px 4px rgba(0,0,0,0.6);
    overflow: hidden;
    min-height: 56px;
    font-family: 'Cairo', sans-serif; /* Cairo font for all header */
}

/* SECTIONS */
.gh-section {
    display: flex;
    align-items: center;
    padding: 3px 12px;
    gap: 8px;
    font-family: 'Cairo', sans-serif;
}

.gh-left {
    flex: 0 0 auto;
    border-left: 2px solid #3e3017;
}

.gh-middle {
    flex: 0 0 auto;
    border-left: 2px solid #3e3017;
    border-right: 2px solid #3e3017;
    margin-left: -50px;
}

.gh-right {
    flex: 1 1 auto;
    justify-content: space-between;
    border-left: 2px solid #3e3017;
}

/* COLUMNS */
.gh-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

/* ── PLAYER CARD ── */
.gh-player-card {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gh-avatar {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    background: radial-gradient(circle at 40% 35%, rgba(139,0,0,0.4), rgba(0,0,0,0.7));
    border: 2px solid #3e3017;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: inset 0 0 4px rgba(0,0,0,0.6);
}

.gh-class-glyph {
    font-size: 1.2em;
    filter: drop-shadow(0 0 3px rgba(212,175,55,0.4));
}

.gh-player-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gh-player-name {
    color: #f7e9b3;
    font-weight: 700;
    font-size: 0.95em;
    text-shadow: 0 0 3px #000;
    letter-spacing: 0.5px;
}

.gh-player-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75em;
}

.gh-class-tag {
    color: #d4af37;
    font-weight: 700;
    text-transform: uppercase;
    text-shadow: 0 0 3px #000;
}

.gh-sep {
    color: #5a4a2a;
}

.gh-lvl-tag {
    color: #f7e9b3;
    font-weight: 700;
    text-shadow: 0 0 3px #000;
}

/* ── LABELS & STATS ── */
.gh-label-row {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 3px;
}

.gh-label-text {
    color: #f7e9b3;
    font-size: 0.72em;
    font-weight: 700;
    text-shadow: 0 0 3px #000;
}

.gh-stat-value {
    color: #f7e9b3;
    font-size: 0.75em;
    font-weight: 700;
    font-family: monospace;
    text-shadow: 0 0 3px #000;
    direction: ltr;
}

.gh-bonus-text {
    color: #2ecc71;
    font-size: 0.65em;
    font-weight: 700;
    text-shadow: 0 0 3px #000;
}

.gh-timer-text {
    color: #888;
    font-size: 0.65em;
    font-weight: 700;
    direction: ltr;
}

/* ── PROGRESS BARS ── */
.gh-bar {
    height: 6px;
    border-radius: 3px;
    background: #5e1a12;
    box-shadow: inset 0 0 2px #000;
    position: relative;
    overflow: hidden;
    min-width: 120px;
}

.gh-bar-fill {
    position: absolute;
    inset: 0;
    border-radius: 2px;
    transition: width 0.4s ease;
}

/* XP bar: yellow gradient */
.gh-bar-xp {
    background: linear-gradient(to right, #cc9900 0%, #ffef75 70%);
    box-shadow: 0 0 4px rgba(255,204,0,0.3);
}

/* HP bar: red to yellow */
.gh-bar-hp {
    background: linear-gradient(to right, #cc1919 0%, #ffcc00 80%);
    box-shadow: 0 0 4px rgba(204,25,25,0.3);
}

.gh-bar-hp.hp-low {
    background: linear-gradient(to right, #8b0000 0%, #cc1919 100%);
    animation: hpLowPulse 1.5s ease-in-out infinite;
}

@keyframes hpLowPulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

/* Energy bar: blue */
.gh-bar-energy {
    background: linear-gradient(to right, #1a5fa8 0%, #3498db 70%);
    box-shadow: 0 0 4px rgba(52,152,219,0.3);
}

.gh-energy-tick {
    position: absolute;
    top: 0;
    height: 100%;
    background: rgba(93,173,226,0.5);
    border-radius: 0 2px 2px 0;
    transition: width 0.1s linear, left 0.1s linear;
}

/* ── POTIONS ── */
.gh-potions-row {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
}

/* ── RESOURCES ── */
.gh-right-stats {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-inline-end: 12px;
}

.gh-res-line {
    display: flex;
    align-items: center;
    gap: 5px;
}

.gh-res-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    filter: drop-shadow(0 0 3px rgba(212,175,55,0.4));
}

.gh-res-emoji {
    font-size: 0.9em;
}

.gh-num {
    color: #f7e9b3;
    font-size: 1.02em;
    font-weight: 700;
    font-family: monospace;
    text-shadow: 0 0 3px #000;
}

.gh-num-gems {
    color: #ff9999;
}

.gh-res-label {
    color: #aa7777;
    font-size: 0.65em;
    text-shadow: 0 0 3px #000;
}

/* ── BUFFS ── */
.gh-right-icons {
    display: flex;
    align-items: center;
    gap: 6px;
}

.gh-buff-row {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
}

/* ── ACTIVITY TICKER ── */
.gh-ticker {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 16px;
    background: rgba(0,0,0,0.3);
    border-top: 1px solid rgba(212,175,55,0.2);
    min-height: 22px;
}

.gh-ticker-mark {
    color: #5a4a2a;
    font-size: 0.7em;
    flex-shrink: 0;
}

.gh-ticker-content {
    display: flex;
    gap: 12px;
    align-items: center;
    font-size: 0.72em;
    flex-wrap: nowrap;
    overflow: hidden;
}

.gh-ticker-empty {
    color: #ffffff;
    font-size: 0.9em;
}

/* Energy zone state classes */
.gh-section.energy-full .gh-bar-energy {
    background: linear-gradient(to right, #1a8a44 0%, #2ecc71 70%);
    box-shadow: 0 0 8px rgba(46,204,113,0.6), 0 0 12px rgba(46,204,113,0.3);
}

.gh-section.energy-low {
    animation: energyWarnPulse 2s ease-in-out infinite;
}

@keyframes energyWarnPulse {
    0%, 100% { background: transparent; }
    50% { background: rgba(231,76,60,0.1); }
}


/* ═══════════════════════════════════════════════════════════════
   COMPACT BARS HEADER — 165×20px bars with rounded corners
   Gradient customizable via CSS variable
═══════════════════════════════════════════════════════════════ */

/* HEADER GRADIENT — Change this to customize the background */
:root {
    --header-gradient-start: #2a0a0a;  /* Dark red */
    --header-gradient-end: #0a0a0a;    /* Black */
}

/* To change gradient, update these two colors:
   --header-gradient-start: red/gold/blue starting color
   --header-gradient-end: black/dark ending color
   
   Examples:
   Gold: --header-gradient-start: #7d5a00; --header-gradient-end: #1a1410;
   Blue: --header-gradient-start: #0d3b5e; --header-gradient-end: #0a0a0a;
   Green: --header-gradient-start: #1a4d2e; --header-gradient-end: #0a0a0a;
*/

.game-header {
    direction: rtl;
    font-family: "Tahoma", "Cairo", sans-serif;
    background-image: url('assets/ui/header_bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 6px 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
    position: relative;
}

.game-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(42,10,10,0.4), rgba(10,10,10,0.6));
    pointer-events: none;
    z-index: 0;
}

.game-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    position: relative;
    z-index: 1;
}

/* SECTIONS */
.gh-section {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gh-right-player {
    flex: 0 0 auto;
    gap: 12px;
}

.gh-middle-bars {
    flex: 0 0 auto;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
}

.gh-left-resources {
    flex: 1 1 auto;
    justify-content: flex-end;
    gap: 15px;
}

/* ── PLAYER CARD ── */
.gh-player-card {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gh-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, rgba(139,0,0,0.4), rgba(0,0,0,0.8));
    border: 2px solid #8b0000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 10px rgba(139,0,0,0.3), inset 0 0 6px rgba(0,0,0,0.6);
}

.gh-class-glyph {
    font-size: 1.3em;
    filter: drop-shadow(0 0 4px rgba(212,175,55,0.4));
}

.gh-player-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gh-player-name {
    color: #f7e9b3;
    font-weight: 700;
    font-size: 1em;
    text-shadow: 0 0 8px rgba(212,175,55,0.4);
    letter-spacing: 0.5px;
}

.gh-player-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75em;
}

.gh-class-tag {
    color: #d4af37;
    font-weight: 700;
    text-transform: uppercase;
    text-shadow: 0 0 3px #000;
}

.gh-sep {
    color: #444;
}

.gh-lvl-tag {
    color: #9b59b6;
    font-weight: 700;
    text-shadow: 0 0 3px #000;
}

/* ── COMPACT BARS (165×20px) ── */
.gh-compact-bar {
    width: 165px;
    height: 20px;
    background: rgba(0,0,0,0.6);
    border-radius: 25px;
    padding: 2px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: visible;
    box-shadow: inset 0 1px 4px rgba(0,0,0,0.8), 0 0 8px rgba(0,0,0,0.3);
    transition: all 0.2s;
}

.gh-compact-bar:hover {
    box-shadow: inset 0 1px 4px rgba(0,0,0,0.8), 0 0 12px rgba(255,255,255,0.15);
}

/* ── SEGMENTED BAR ── */
.gh-seg-bar {
    width: 165px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.gh-seg-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.65em;
    font-weight: 700;
    text-shadow: 0 0 3px #000, 0 1px 2px #000;
    pointer-events: none;
}

.gh-seg-track {
    display: flex;
    gap: 2px;
    height: 7px;
}

.gh-seg {
    flex: 1;
    border-radius: 2px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.04);
    transition: background 0.3s, box-shadow 0.3s;
}

/* HP segments — lit */
.gh-seg.hp-seg.seg-on {
    background: #c0392b;
    border-color: #e74c3c;
    box-shadow: 0 0 4px rgba(231,76,60,0.7);
    animation: hpSegPulse 2s ease-in-out infinite;
}

/* HP low — flicker red */
.gh-seg.hp-seg.seg-on.seg-low {
    background: #8b0000;
    border-color: #c0392b;
    animation: hpSegLow 1.2s ease-in-out infinite;
}

/* Energy segments — lit */
.gh-seg.en-seg.seg-on {
    background: #2471a3;
    border-color: #3498db;
    box-shadow: 0 0 4px rgba(52,152,219,0.7);
    animation: enSegPulse 2.5s ease-in-out infinite;
}

/* XP segments — lit */
.gh-seg.xp-seg.seg-on {
    background: #7d3c98;
    border-color: #9b59b6;
    box-shadow: 0 0 4px rgba(155,89,182,0.7);
    animation: xpSegPulse 3s ease-in-out infinite;
}

/* Stagger glow so segments don't all pulse together */
.gh-seg:nth-child(2).seg-on  { animation-delay: 0.1s; }
.gh-seg:nth-child(3).seg-on  { animation-delay: 0.2s; }
.gh-seg:nth-child(4).seg-on  { animation-delay: 0.3s; }
.gh-seg:nth-child(5).seg-on  { animation-delay: 0.4s; }
.gh-seg:nth-child(6).seg-on  { animation-delay: 0.5s; }
.gh-seg:nth-child(7).seg-on  { animation-delay: 0.6s; }
.gh-seg:nth-child(8).seg-on  { animation-delay: 0.7s; }
.gh-seg:nth-child(9).seg-on  { animation-delay: 0.8s; }
.gh-seg:nth-child(10).seg-on { animation-delay: 0.9s; }
.gh-seg:nth-child(11).seg-on { animation-delay: 1.0s; }
.gh-seg:nth-child(12).seg-on { animation-delay: 1.1s; }
.gh-seg:nth-child(13).seg-on { animation-delay: 1.2s; }
.gh-seg:nth-child(14).seg-on { animation-delay: 1.3s; }
.gh-seg:nth-child(15).seg-on { animation-delay: 1.4s; }
.gh-seg:nth-child(16).seg-on { animation-delay: 1.5s; }
.gh-seg:nth-child(17).seg-on { animation-delay: 1.6s; }
.gh-seg:nth-child(18).seg-on { animation-delay: 1.7s; }
.gh-seg:nth-child(19).seg-on { animation-delay: 1.8s; }
.gh-seg:nth-child(20).seg-on { animation-delay: 1.9s; }

@keyframes hpSegPulse {
    0%, 100% { box-shadow: 0 0 3px rgba(231,76,60,0.5); opacity: 0.85; }
    50%       { box-shadow: 0 0 7px rgba(231,76,60,0.9); opacity: 1; }
}

@keyframes hpSegLow {
    0%, 100% { box-shadow: 0 0 4px rgba(139,0,0,0.6); opacity: 0.7; background: #6b0000; }
    50%       { box-shadow: 0 0 10px rgba(231,76,60,0.9); opacity: 1; background: #c0392b; }
}

@keyframes enSegPulse {
    0%, 100% { box-shadow: 0 0 3px rgba(52,152,219,0.5); opacity: 0.85; }
    50%       { box-shadow: 0 0 7px rgba(52,152,219,0.9); opacity: 1; }
}

@keyframes xpSegPulse {
    0%, 100% { box-shadow: 0 0 3px rgba(155,89,182,0.5); opacity: 0.85; }
    50%       { box-shadow: 0 0 7px rgba(155,89,182,0.9); opacity: 1; }
}

.gh-compact-label {
    display: flex;
    align-items: center;
    gap: 4px;
    position: relative;
    z-index: 2;
    font-size: 0.65em;
    font-weight: 700;
    text-shadow: 0 0 3px #000, 0 1px 2px #000;
    pointer-events: none;
}

.gh-compact-value {
    color: #f7e9b3;
    font-family: monospace;
    font-size: 1em;
    direction: ltr;
}

.gh-compact-bonus {
    color: #2ecc71;
    font-size: 0.9em;
}

.gh-compact-timer {
    color: #888;
    font-size: 1.02em;
    direction: ltr;
}

.gh-compact-track {
    position: absolute;
    inset: 0;
    border-radius: 25px;
    overflow: hidden;
    z-index: 1;
}

.gh-compact-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 25px;
    transition: width 0.5s ease;
}

/* XP Gradient */
.gh-xp-gradient {
    background: linear-gradient(90deg, #8e44ad 0%, #c39bd3 50%, #f8c471 100%);
    box-shadow: 0 0 8px rgba(142,68,173,0.4);
    animation: xpShimmer 3s linear infinite;
}

@keyframes xpShimmer {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 1; }
}

/* HP Gradient with pulse */
.gh-hp-gradient {
    background: linear-gradient(90deg, #6b0000, #c0392b, #e74c3c);
    box-shadow: 0 0 8px rgba(231,76,60,0.4);
    animation: hpPulse 2s ease-in-out infinite;
}

@keyframes hpPulse {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 1; }
}

.gh-hp-gradient.hp-low {
    background: linear-gradient(90deg, #4a0000, #8b0000, #c0392b);
    animation: hpLowPulse 1.5s ease-in-out infinite;
}

@keyframes hpLowPulse {
    0%, 100% { 
        opacity: 0.8; 
        box-shadow: 0 0 6px rgba(139,0,0,0.4);
    }
    50% { 
        opacity: 1; 
        box-shadow: 0 0 16px rgba(231,76,60,0.7);
    }
}

/* Energy Gradient */
.gh-energy-gradient {
    background: linear-gradient(90deg, #1a5fa8 0%, #3498db 50%, #5dade2 100%);
    box-shadow: 0 0 8px rgba(52,152,219,0.4);
}

.gh-energy-tick {
    position: absolute;
    top: 0;
    height: 100%;
    background: rgba(93,173,226,0.5);
    border-radius: 0 25px 25px 0;
    transition: width 0.1s linear, left 0.1s linear;
    animation: energyTickPulse 1s ease-in-out infinite;
}

@keyframes energyTickPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.9; }
}

/* ── RESOURCES BLOCK ── */
.gh-resources-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gh-res-line {
    display: flex;
    align-items: center;
    gap: 5px;
}

.gh-res-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    filter: drop-shadow(0 0 3px rgba(212,175,55,0.4));
}

.gh-res-emoji {
    font-size: 0.9em;
}

.gh-num {
    color: #f7e9b3;
    font-size: 1.02em;
    font-weight: 700;
    font-family: monospace;
    text-shadow: 0 0 3px #000;
}

.gh-num-gems {
    color: #ff9999;
}

.gh-bonus-mini {
    color: #2ecc71;
    font-size: 0.65em;
    font-weight: 700;
    text-shadow: 0 0 3px #000;
}

/* ── BUFFS BLOCK ── */
.gh-buffs-block {
    display: flex;
    align-items: center;
    gap: 6px;
}

.gh-buff-row {
    display: flex;
    gap: 4px;
    align-items: center;
}

/* ── ACTIVITY TICKER ── */
.gh-ticker {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 16px;
    background: rgba(0,0,0,0.4);
    border-top: 1px solid rgba(139,0,0,0.3);
    min-height: 22px;
}

.gh-ticker-mark {
    color: #5a2a2a;
    font-size: 0.7em;
    flex-shrink: 0;
}

.gh-ticker-content {
    display: flex;
    gap: 12px;
    align-items: center;
    font-size: 0.72em;
    flex-wrap: nowrap;
    overflow: hidden;
}

.gh-ticker-empty {
    color: #ffffff;
    font-size: 0.9em;
}


/* Potions inline with HP/Energy */
.gh-potions-inline {
    display: flex;
    gap: 4px;
    align-items: center;
    margin-top: 2px;
}


/* Header separators and new sections */
.gh-separator {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, transparent, rgba(139,0,0,0.5), transparent);
    margin: 0 8px;
}

.gh-player-section {
    flex: 0 0 auto;
    gap: 12px;
}

.gh-bars-section {
    flex: 0 0 auto;
    gap: 8px;
}

.gh-bars-wrapper {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gh-icons-section {
    flex: 0 0 auto;
    gap: 6px;
}

.gh-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0,0,0,0.6);
    border: 2px solid rgba(139,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.gh-icon-btn:hover {
    background: rgba(139,0,0,0.3);
    border-color: rgba(139,0,0,0.8);
    transform: scale(1.1);
    box-shadow: 0 0 12px rgba(139,0,0,0.4);
}

.gh-resources-section {
    flex: 1 1 auto;
    justify-content: flex-end;
    gap: 15px;
}

.gh-potions-inline {
    display: flex;
    gap: 4px;
    align-items: center;
}


/* Header sections restructure */
.gh-player-section {
    flex: 0 0 auto;
    gap: 12px;
}

.gh-bars-section {
    flex: 0 0 auto;
    gap: 8px;
}

.gh-bars-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gh-potions-beside {
    display: flex;
    align-items: center;
    gap: 4px;
}

.gh-icons-section {
    flex: 0 0 auto;
    gap: 6px;
}

.gh-resources-section {
    flex: 1 1 auto;
    justify-content: flex-end;
    gap: 15px;
}

/* Separator */
.gh-separator {
    width: 1px;
    height: 50px;
    background: linear-gradient(to bottom, transparent, rgba(139,0,0,0.3), transparent);
    flex-shrink: 0;
}

/* Icon cards (vertical layout with label) */
.gh-icon-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 2px;
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(139,0,0,0.3);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 100px;
    width: 100px;
    height: 90px;
}

.gh-icon-card:hover {
    background: rgba(139,0,0,0.2);
    border-color: rgba(139,0,0,0.6);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.4);
}

.gh-icon-img {
    width: 100%;
    height: 90px;
    position: relative;
    padding: 0;
    overflow: hidden;
}

.gh-icon-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: drop-shadow(0 0 3px rgba(212,175,55,0.3));
}

.gh-icon-emoji {
    font-size: 3em;
}

.gh-icon-label {
    color: #d4af37;
    font-size: 1em;
    font-weight: 700;
    text-shadow: 0 0 3px #000;
    white-space: nowrap;
    padding: 2px 4px;
    width: 100%;
    text-align: center;
    line-height: 1.1;
}


/* Icon cards - stacked vertically */
.gh-icons-section {
    flex-direction: row;
    gap: 6px;
}

.gh-icon-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(139,0,0,0.3);
    border-radius: 8px;
    padding: 6px;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 50px;
    position: relative;
    margin-bottom: 20px;
}

.gh-icon-card:hover {
    background: rgba(139,0,0,0.2);
    border-color: rgba(139,0,0,0.6);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.6);
}

.gh-icon-img {
    width: 100%;
    height: 100%;
    max-width: 40px;
    max-height: 40px;
    object-fit: contain;
    filter: drop-shadow(0 0 4px rgba(212,175,55,0.4));
}

.gh-icon-emoji {
    font-size: 2em;
    filter: drop-shadow(0 0 4px rgba(212,175,55,0.4));
}

.gh-icon-label {
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    color: #d4af37;
    font-size: 0.65em;
    font-weight: 700;
    text-shadow: 
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000,
        0 0 3px #000;
    white-space: nowrap;
    pointer-events: none;
}



/* Resource names */
.gh-res-name {
    color: #888;
    font-size: 0.65em;
    font-weight: 600;
    text-shadow: 0 0 3px #000;
    margin-right: 4px;
}


/* Horizontal icons layout */
.gh-icons-horizontal {
    flex-direction: row;
    gap: 4px;
}

/* Resource name - appears first in RTL */
.gh-res-name {
    color: #888;
    font-size: 0.65em;
    font-weight: 600;
    text-shadow: 0 0 3px #000;
    margin-left: 4px;
}


/* Larger icons for horizontal test buttons */
.gh-icons-horizontal .gh-icon-card {
    min-width: 100px;
    width: 100px;
    height: 90px;
    padding: 2px;
    gap: 3px;
}

.gh-icons-horizontal .gh-icon-img {
    width: 100%;
    height: 90px;
    padding: 0;
    overflow: hidden;
}

.gh-icons-horizontal .gh-icon-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gh-icons-horizontal .gh-icon-emoji {
    font-size: 3em;
}


/* Player card - vertical layout with class icon */
.gh-avatar {
    width: 68px;
    height: auto;
    border-radius: 6px;
    background: rgba(0,0,0,0.6);
    border: 2px solid rgba(139,0,0,0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 2px;
    box-shadow: 0 0 8px rgba(139,0,0,0.3), inset 0 0 4px rgba(0,0,0,0.6);
}

.gh-class-icon {
    width: 64px;
    height: 64px;
    object-fit: cover;
    object-position: center;
    filter: drop-shadow(0 0 4px rgba(212,175,55,0.5));
}

.gh-player-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    align-items: flex-start;
}

.gh-player-title {
    color: #9b59b6;
    font-size: 0.65em;
    font-weight: 700;
    font-style: italic;
    text-shadow: 0 0 4px rgba(155,89,182,0.6);
}

.gh-lvl-tag {
    color: #f7e9b3;
    font-size: 0.7em;
    font-weight: 700;
    text-shadow: 0 0 3px #000;
}

/* Resource name glow effects */
.gh-res-glow {
    color: #d4af37;
    font-size: 0.7em;
    font-weight: 700;
    text-shadow: 
        0 0 4px rgba(212,175,55,0.8),
        0 0 8px rgba(212,175,55,0.4);
    animation: goldPulse 2s ease-in-out infinite;
}

.gh-res-glow-blood {
    color: #ff6b9d;
    font-size: 0.7em;
    font-weight: 700;
    text-shadow: 
        0 0 4px rgba(255,107,157,0.8),
        0 0 8px rgba(139,0,0,0.6);
    animation: bloodPulse 2s ease-in-out infinite;
}

@keyframes goldPulse {
    0%, 100% { 
        text-shadow: 
            0 0 4px rgba(212,175,55,0.8),
            0 0 8px rgba(212,175,55,0.4);
    }
    50% { 
        text-shadow: 
            0 0 8px rgba(212,175,55,1),
            0 0 16px rgba(212,175,55,0.6);
    }
}

@keyframes bloodPulse {
    0%, 100% { 
        text-shadow: 
            0 0 4px rgba(255,107,157,0.8),
            0 0 8px rgba(139,0,0,0.6);
    }
    50% { 
        text-shadow: 
            0 0 8px rgba(255,107,157,1),
            0 0 16px rgba(139,0,0,0.8);
    }
}

/* Bar glow animations with color shifts */
.gh-xp-gradient {
    background: linear-gradient(90deg, #8e44ad 0%, #c39bd3 50%, #f8c471 100%);
    background-size: 200% 100%;
    box-shadow: 
        0 0 8px rgba(142,68,173,0.6),
        inset 0 0 8px rgba(248,196,113,0.3);
    animation: xpGlow 3s linear infinite, xpColorShift 4s ease-in-out infinite;
}

@keyframes xpGlow {
    0%, 100% { 
        box-shadow: 
            0 0 8px rgba(142,68,173,0.6),
            inset 0 0 8px rgba(248,196,113,0.3);
    }
    50% { 
        box-shadow: 
            0 0 16px rgba(142,68,173,0.9),
            inset 0 0 12px rgba(248,196,113,0.5);
    }
}

@keyframes xpColorShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.gh-hp-gradient {
    background: linear-gradient(90deg, #6b0000, #c0392b, #e74c3c, #c0392b, #6b0000);
    background-size: 200% 100%;
    box-shadow: 
        0 0 8px rgba(231,76,60,0.6),
        inset 0 0 8px rgba(231,76,60,0.3);
    animation: hpGlow 2s ease-in-out infinite, hpColorShift 3s ease-in-out infinite;
}

@keyframes hpGlow {
    0%, 100% { 
        box-shadow: 
            0 0 8px rgba(231,76,60,0.6),
            inset 0 0 8px rgba(231,76,60,0.3);
    }
    50% { 
        box-shadow: 
            0 0 16px rgba(231,76,60,0.9),
            inset 0 0 12px rgba(231,76,60,0.5);
    }
}

@keyframes hpColorShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.gh-hp-gradient.hp-low {
    background: linear-gradient(90deg, #4a0000, #8b0000, #c0392b, #8b0000, #4a0000);
    background-size: 200% 100%;
    animation: hpLowGlow 1.5s ease-in-out infinite, hpLowColorShift 2s ease-in-out infinite;
}

@keyframes hpLowGlow {
    0%, 100% { 
        box-shadow: 
            0 0 6px rgba(139,0,0,0.6),
            inset 0 0 6px rgba(139,0,0,0.4);
    }
    50% { 
        box-shadow: 
            0 0 20px rgba(231,76,60,0.9),
            inset 0 0 16px rgba(231,76,60,0.6);
    }
}

@keyframes hpLowColorShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.gh-energy-gradient {
    background: linear-gradient(90deg, #1a5fa8 0%, #3498db 50%, #5dade2 100%, #3498db 50%, #1a5fa8 0%);
    background-size: 200% 100%;
    box-shadow: 
        0 0 8px rgba(52,152,219,0.6),
        inset 0 0 8px rgba(93,173,226,0.3);
    animation: energyGlow 2.5s ease-in-out infinite, energyColorShift 3.5s ease-in-out infinite;
}

@keyframes energyGlow {
    0%, 100% { 
        box-shadow: 
            0 0 8px rgba(52,152,219,0.6),
            inset 0 0 8px rgba(93,173,226,0.3);
    }
    50% { 
        box-shadow: 
            0 0 16px rgba(52,152,219,0.9),
            inset 0 0 12px rgba(93,173,226,0.5);
    }
}

@keyframes energyColorShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Gear Level Badge */
.gear-level-badge {
    position: absolute;
    bottom: 2px;
    right: 2px;
    background: rgba(0, 0, 0, 0.85);
    color: #ffd700;
    font-size: 0.7em;
    font-weight: bold;
    padding: 1px 4px;
    border-radius: 3px;
    border: 1px solid #ffd700;
    pointer-events: none;
    z-index: 5;
    font-family: monospace;
}

/* Equip Animation */
@keyframes equipFly {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    50% {
        opacity: 0.7;
        transform: translate(var(--fly-x), var(--fly-y)) scale(0.8);
    }
    100% {
        opacity: 0;
        transform: translate(var(--fly-x), var(--fly-y)) scale(0.3);
    }
}

.item-equipping {
    animation: equipFly 0.6s ease-out;
    pointer-events: none;
    z-index: 9999;
}


/* ═══════════════════════════════════════════════
   CLASS SELECTION — Tall Portrait Cards
═══════════════════════════════════════════════ */
.class-grid-new {
    display: flex;
    gap: 96px;
    justify-content: center;
    flex-wrap: nowrap;
    padding: 10px 20px 30px 20px;
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    align-items: flex-end;
}

.class-card-new {
    position: relative;
    width: 198px;
    height: 384px;
    border-radius: 14px;
    overflow: visible;
    cursor: pointer;
    border: 2px solid #333;
    background: #0a0a0f;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    filter: grayscale(70%) brightness(0.65);
    flex-shrink: 0;
    vertical-align: bottom;
    display: inline-block;
}

.class-card-new:hover {
    transform: translateY(-12px) scale(1.04);
    border-color: var(--glow, #c0392b);
    box-shadow: 0 0 30px var(--glow, #c0392b), 0 0 60px rgba(0,0,0,0.8), inset 0 0 20px rgba(0,0,0,0.5);
    filter: grayscale(0%) brightness(1);
    z-index: 100;
}

.ccn-glow {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    opacity: 0;
    transition: opacity 0.3s ease;
    background: radial-gradient(ellipse at bottom, var(--glow, #c0392b) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}
.class-card-new:hover .ccn-glow { opacity: 0.25; }

.ccn-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    z-index: 0;
}

.ccn-overlay {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.1) 100%);
    z-index: 2;
}

.ccn-body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 10px;
    z-index: 3;
    text-align: center;
}

.ccn-name {
    color: #fff;
    font-size: 1.05em;
    font-weight: bold;
    font-family: 'Cairo', sans-serif;
    margin-bottom: 2px;
    text-shadow: 0 0 10px rgba(0,0,0,0.8);
}

.ccn-sub {
    color: #aaa;
    font-size: 0.72em;
    letter-spacing: 1px;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.ccn-stats {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: center;
}

.ccn-stat {
    font-size: 0.68em;
    color: #ccc;
    background: rgba(0,0,0,0.5);
    padding: 2px 8px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.1);
}

/* ── Tooltip ── */
.ccn-tooltip {
    position: absolute;
    bottom: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    width: 240px;
    background: linear-gradient(135deg, rgba(10,10,18,0.98), rgba(25,10,10,0.98));
    border: 1px solid var(--glow, #c0392b);
    border-radius: 12px;
    padding: 14px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 9999;
    box-shadow: 0 0 25px var(--glow, #c0392b), 0 8px 32px rgba(0,0,0,0.9);
    direction: rtl;
}

.class-card-new:hover .ccn-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* arrow under tooltip */
.ccn-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 7px solid transparent;
    border-top-color: var(--glow, #c0392b);
}

.ccn-tt-title {
    font-size: 1em;
    font-weight: bold;
    margin-bottom: 6px;
    font-family: 'Cairo', sans-serif;
}

.ccn-tt-desc {
    font-size: 0.8em;
    color: #aaa;
    margin-bottom: 12px;
    line-height: 1.5;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-bottom: 10px;
}

.ccn-tt-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 0.75em;
    color: #ccc;
}

.ccn-tt-row span {
    width: 40px;
    flex-shrink: 0;
    text-align: right;
}

.ccn-bar {
    flex: 1;
    height: 5px;
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
    overflow: hidden;
}

.ccn-bar div {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}

/* ═══════════════════════════════════════════════
   BLOODY TITLE — Class Selection
═══════════════════════════════════════════════ */
@keyframes bloodPulse {
    0%, 100% { text-shadow: 0 0 20px rgba(180,0,0,0.9), 0 0 40px rgba(180,0,0,0.5), 0 0 80px rgba(180,0,0,0.2), 2px 2px 0 #1a0000; }
    50%       { text-shadow: 0 0 30px rgba(220,0,0,1),   0 0 60px rgba(180,0,0,0.8), 0 0 100px rgba(180,0,0,0.4), 2px 2px 0 #1a0000; }
}
@keyframes fogDrift {
    0%   { opacity: 0.18; transform: translateX(-8px) scaleY(1); }
    50%  { opacity: 0.28; transform: translateX(6px)  scaleY(1.05); }
    100% { opacity: 0.18; transform: translateX(-8px) scaleY(1); }
}

.bloody-title {
    font-family: 'Cairo', sans-serif;
    font-size: 1.44em;
    font-weight: 900;
    letter-spacing: 3px;
    color: #cc0000;
    margin: 0;
    padding: 12px 20px;
    position: relative;
    display: inline-block;
    animation: bloodPulse 3s ease-in-out infinite;
    -webkit-text-stroke: 0.5px #8b0000;
}

.bloody-title::before,
.bloody-title::after {
    content: '';
    position: absolute;
    left: -10%;
    width: 120%;
    height: 30px;
    background: radial-gradient(ellipse at center, rgba(120,0,0,0.5) 0%, transparent 70%);
    border-radius: 50%;
    animation: fogDrift 4s ease-in-out infinite;
    pointer-events: none;
}
.bloody-title::before { top: -10px; animation-delay: 0s; }
.bloody-title::after  { bottom: -10px; animation-delay: 2s; }

/* ══════════════════════════════════════════════════════════════
   DAILY LOGIN CALENDAR STYLES
   ══════════════════════════════════════════════════════════════ */

.calendar-day {
    aspect-ratio: 1;
    background: linear-gradient(135deg, rgba(20,20,25,0.95), rgba(30,25,25,0.95));
    border: 2px solid #444;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    font-family: 'Cairo', sans-serif;
    padding: 6px;
    min-height: 70px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.calendar-day:hover {
    transform: translateY(-2px) scale(1.03);
    border-color: #d4af37;
    box-shadow: 0 4px 12px rgba(212,175,55,0.35);
}

.calendar-day-number {
    font-size: 1em;
    font-weight: 900;
    color: #ddd;
    margin-bottom: 2px;
    background: rgba(0,0,0,0.3);
    padding: 2px 6px;
    border-radius: 4px;
    min-width: 24px;
    text-align: center;
}

.calendar-day-status {
    font-size: 1.1em;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

.calendar-day.claimed {
    background: linear-gradient(135deg, rgba(46,204,113,0.2), rgba(39,174,96,0.2));
    border-color: #2ecc71;
    box-shadow: 0 4px 12px rgba(46,204,113,0.3), inset 0 1px 0 rgba(46,204,113,0.1);
}

.calendar-day.claimed:hover {
    box-shadow: 0 6px 16px rgba(46,204,113,0.5), inset 0 1px 0 rgba(46,204,113,0.2);
}

.calendar-day.claimed .calendar-day-status {
    color: #2ecc71;
}

.calendar-day.missed {
    background: linear-gradient(135deg, rgba(192,57,43,0.2), rgba(231,76,60,0.2));
    border-color: #e74c3c;
    cursor: not-allowed;
    box-shadow: 0 4px 12px rgba(231,76,60,0.3), inset 0 1px 0 rgba(231,76,60,0.1);
}

.calendar-day.missed:hover {
    transform: none;
}

.calendar-day.missed .calendar-day-status {
    color: #e74c3c;
}

.calendar-day.current {
    background: linear-gradient(135deg, rgba(212,175,55,0.3), rgba(241,196,15,0.3));
    border-color: #d4af37;
    box-shadow: 0 6px 20px rgba(212,175,55,0.6), inset 0 2px 0 rgba(241,196,15,0.2);
    animation: calendarPulse 2s ease-in-out infinite;
}

.calendar-day.current:hover {
    box-shadow: 0 8px 25px rgba(212,175,55,0.8), inset 0 2px 0 rgba(241,196,15,0.3);
}

.calendar-day.current .calendar-day-number {
    color: #d4af37;
    background: rgba(212,175,55,0.2);
    font-size: 1.05em;
}

.calendar-day.future {
    opacity: 0.4;
    cursor: not-allowed;
}

.calendar-day.future:hover {
    transform: none;
}

.calendar-day.future .calendar-day-number {
    color: #666;
}

.calendar-day-reward {
    font-size: 0.65em;
    color: #bbb;
    margin-top: 2px;
    text-align: center;
    line-height: 1.2;
    font-weight: 600;
}

.calendar-day.day-30 {
    background: linear-gradient(135deg, rgba(230,126,34,0.3), rgba(211,84,0,0.3));
    border-color: #e67e22;
    border-width: 3px;
}

.calendar-day.day-30 .calendar-day-number {
    color: #e67e22;
    font-size: 1.1em;
    background: rgba(230,126,34,0.3);
}

.calendar-day.day-30::before {
    content: '🔥';
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 1em;
    filter: drop-shadow(0 0 5px rgba(230,126,34,0.8));
}

@keyframes calendarPulse {
    0%, 100% { 
        box-shadow: 0 6px 20px rgba(212,175,55,0.6), inset 0 2px 0 rgba(241,196,15,0.2); 
    }
    50% { 
        box-shadow: 0 8px 30px rgba(212,175,55,0.9), inset 0 3px 0 rgba(241,196,15,0.4); 
    }
}

/* Market Tab Buttons */
.market-tab-btn {
    font-size: 0.95em;
    padding: 8px 14px;
    transition: all 0.2s ease;
    border-color: #555;
    color: #aaa;
}

.market-tab-btn:hover {
    border-color: #2ecc71 !important;
    color: #2ecc71 !important;
    background: rgba(46, 204, 113, 0.05) !important;
}

/* Admin Glow Animation */
.admin-glow {
    animation: adminColorShift 3s infinite;
    font-weight: 900;
    filter: drop-shadow(0 0 8px currentColor);
    position: relative;
}

@keyframes adminColorShift {
    0% { 
        color: #FFD700; 
        text-shadow: 0 0 10px #FFD700, 0 0 20px rgba(255, 215, 0, 0.5); 
    }
    25% { 
        color: #FFA500; 
        text-shadow: 0 0 15px #FFA500, 0 0 25px rgba(255, 165, 0, 0.6); 
    }
    50% { 
        color: #FF6347; 
        text-shadow: 0 0 10px #FF6347, 0 0 20px rgba(255, 99, 71, 0.5); 
    }
    75% { 
        color: #FFA500; 
        text-shadow: 0 0 15px #FFA500, 0 0 25px rgba(255, 165, 0, 0.6); 
    }
    100% { 
        color: #FFD700; 
        text-shadow: 0 0 10px #FFD700, 0 0 20px rgba(255, 215, 0, 0.5); 
    }
}

/* Inbox Badge */
.inbox-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #e74c3c;
    color: #fff;
    font-size: 0.7em;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
    box-shadow: 0 0 10px rgba(231, 76, 60, 0.8);
    animation: pulseBadge 2s infinite;
    z-index: 100;
    pointer-events: none;
}

@keyframes pulseBadge {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Batch Message Toolbar */
.batch-toolbar {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 10px;
    background: rgba(0,0,0,0.2);
    border: 1px solid #333;
    border-radius: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.batch-checkbox-label {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    color: #aaa;
    font-size: 0.9em;
}

.batch-action-btn {
    font-size: 0.8em;
    padding: 4px 12px;
    background: rgba(0,0,0,0.3);
}

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

.batch-selected-count {
    color: #888;
    font-size: 0.8em;
    margin-right: auto;
}

/* Message Checkboxes */
.msg-checkbox {
    cursor: pointer;
    transform: scale(1.15);
    accent-color: #3498db;
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes slideIn {
    from { transform: translateY(-50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Admin Badge */
.admin-badge {
    display: inline-block;
    font-size: 1.2em;
    margin-left: 5px;
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.8));
    animation: rotateCrown 4s infinite;
}

@keyframes rotateCrown {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-10deg); }
    75% { transform: rotate(10deg); }
}

/* Message Type Badges */
.message-broadcast {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 165, 0, 0.2));
    border-left: 4px solid #FFD700;
}

.message-friend {
    background: rgba(52, 152, 219, 0.1);
    border-left: 4px solid #3498db;
}

.message-system {
    background: rgba(149, 165, 166, 0.1);
    border-left: 4px solid #95a5a6;
}

/* ── Void map nodes — fire glow style ─────────────────────────────────────── */
.void-map-node {
    width: 30px !important;
    height: 30px !important;
    background: radial-gradient(circle, #ff6600 0%, #cc2200 60%, #8b0000 100%) !important;
    border-color: #ff9900 !important;
    box-shadow:
        0 0 10px #ff6600,
        0 0 22px rgba(255,100,0,0.7),
        0 0 40px rgba(255,50,0,0.4),
        inset 0 0 8px rgba(255,200,0,0.3) !important;
    animation: voidNodePulse 2s ease-in-out infinite !important;
    z-index: 6 !important;
}

.void-map-node:hover {
    transform: translate(-50%, -50%) scale(1.4) !important;
    box-shadow:
        0 0 20px #ff6600,
        0 0 40px rgba(255,100,0,0.9),
        0 0 70px rgba(255,50,0,0.6) !important;
}

.void-map-locked {
    background: radial-gradient(circle, #444 0%, #222 100%) !important;
    border-color: #555 !important;
    box-shadow: none !important;
    animation: none !important;
}

@keyframes voidNodePulse {
    0%, 100% {
        box-shadow:
            0 0 10px #ff6600,
            0 0 22px rgba(255,100,0,0.7),
            0 0 40px rgba(255,50,0,0.4);
    }
    50% {
        box-shadow:
            0 0 18px #ff9900,
            0 0 35px rgba(255,150,0,0.9),
            0 0 60px rgba(255,80,0,0.6);
    }
}

/* ════════════════════════════════════════════════════════════════
   NEWS & ANNOUNCEMENTS SYSTEM
   ════════════════════════════════════════════════════════════════ */

.news-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 10px 0;
}

.news-card {
    background: linear-gradient(135deg, rgba(10, 10, 10, 0.7) 0%, rgba(26, 26, 26, 0.8) 100%);
    border: 2px solid #444;
    border-radius: 12px;
    padding: 25px;
    position: relative;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

.news-card:hover {
    transform: translateY(-2px);
    border-color: var(--gold);
    box-shadow: 0 8px 25px rgba(139, 0, 0, 0.4), 0 0 15px rgba(255, 215, 0, 0.15);
}

.news-unread {
    border-color: var(--gold);
    background: linear-gradient(135deg, #1a0a00 0%, #2a1a0a 100%);
}

.news-unread::before {
    content: '🔔';
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 1.2em;
    animation: newsNotifPulse 2s infinite;
}

@keyframes newsNotifPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.1); }
}

.news-pinned-badge {
    position: absolute;
    top: -10px;
    left: 20px;
    background: var(--gold);
    color: #000;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75em;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(255, 215, 0, 0.5);
}

.news-header {
    display: flex;
    gap: 15px;
    align-items: start;
    margin-bottom: 15px;
}

.news-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 215, 0, 0.1);
    border-radius: 50%;
    border: 2px solid var(--gold);
    font-size: 2em;
}

.news-title-section {
    flex: 1;
}

.news-title {
    margin: 0 0 8px 0;
    color: var(--gold);
    font-size: 1.2em;
    font-weight: bold;
}

.news-meta {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.news-category {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75em;
    font-weight: bold;
    color: #000;
}

.news-time {
    color: #888;
    font-size: 0.85em;
}

.news-image {
    width: 100%;
    border-radius: 8px;
    margin: 15px 0;
    border: 2px solid #333;
    max-height: 250px;
    object-fit: cover;
}

.news-content {
    color: #ccc;
    line-height: 1.6;
    margin: 15px 0;
    white-space: pre-wrap;
    font-size: 0.95em;
}

.news-footer {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #333;
}

.news-like-btn {
    background: transparent;
    border: 2px solid #555;
    color: #ccc;
    padding: 6px 15px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 5px;
}

.news-like-btn:hover {
    border-color: #e74c3c;
    background: rgba(231, 76, 60, 0.1);
}

.news-like-btn.liked {
    border-color: #e74c3c;
    background: rgba(231, 76, 60, 0.2);
    color: #e74c3c;
}

.btn-small {
    padding: 5px 12px;
    font-size: 0.85em;
    border: 1px solid #555;
    background: #1a1a1a;
    color: #ccc;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-small:hover {
    border-color: var(--gold);
    background: rgba(255, 215, 0, 0.1);
}

.admin-subsection {
    background: rgba(0, 0, 0, 0.3);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #333;
    margin-top: 15px;
}

.notif-dot {
    position: absolute;
    top: 5px;
    right: 5px;
    background: #e74c3c;
    color: #fff;
    font-size: 0.7em;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
    box-shadow: 0 0 10px rgba(231, 76, 60, 0.8);
    animation: badgePulse 2s infinite;
}

@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* ═══════════════════════════════════════════════════════════════
   LEGENDARY AUCTION
   ═══════════════════════════════════════════════════════════════ */

/* Header nav button fire glow */
.legendary-auction-nav {
    animation: legNavPulse 2s ease-in-out infinite;
    border: 1px solid rgba(255,107,0,0.5) !important;
}
@keyframes legNavPulse {
    0%,100% { box-shadow: 0 0 8px rgba(255,107,0,0.5), 0 0 16px rgba(255,107,0,0.3); border-color: rgba(255,107,0,0.5) !important; }
    50%      { box-shadow: 0 0 18px rgba(255,107,0,0.9), 0 0 35px rgba(255,107,0,0.6); border-color: #ff6b00 !important; }
}

/* ── Legendary item card ─────────────────────────────── */
.leg-item-card {
    position: relative;
    background: linear-gradient(160deg, rgba(18,6,0,0.97) 0%, rgba(28,12,0,0.97) 100%);
    border-radius: 14px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: default;
    min-width: 0; /* allow shrinking in grid */
}
.leg-item-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(255,107,0,0.06) 0%, transparent 70%);
    pointer-events: none;
}
.leg-item-card.orange {
    border: 2px solid #e67e22;
    box-shadow: 0 0 14px rgba(230,126,34,0.3), inset 0 0 30px rgba(0,0,0,0.5);
    animation: orangeCardGlow 3s ease-in-out infinite;
}
.leg-item-card.red {
    border: 2px solid #e74c3c;
    box-shadow: 0 0 18px rgba(231,76,60,0.4), inset 0 0 30px rgba(0,0,0,0.5);
    animation: redCardGlow 2.5s ease-in-out infinite;
}
.leg-item-card:hover { transform: translateY(-5px); }
.leg-item-card.orange:hover { box-shadow: 0 8px 30px rgba(230,126,34,0.6), inset 0 0 20px rgba(0,0,0,0.4); }
.leg-item-card.red:hover    { box-shadow: 0 8px 32px rgba(231,76,60,0.7), inset 0 0 20px rgba(0,0,0,0.4); }

@keyframes orangeCardGlow {
    0%,100% { box-shadow: 0 0 14px rgba(230,126,34,0.3), inset 0 0 30px rgba(0,0,0,0.5); }
    50%      { box-shadow: 0 0 26px rgba(230,126,34,0.6), inset 0 0 20px rgba(0,0,0,0.4); }
}
@keyframes redCardGlow {
    0%,100% { box-shadow: 0 0 18px rgba(231,76,60,0.4), inset 0 0 30px rgba(0,0,0,0.5); }
    50%      { box-shadow: 0 0 35px rgba(231,76,60,0.8), 0 0 60px rgba(231,76,60,0.25), inset 0 0 20px rgba(0,0,0,0.4); }
}

/* Fire corner badge */
.leg-fire-badge {
    position: absolute;
    top: -2px; right: 6px;
    font-size: 1.4em;
    filter: drop-shadow(0 0 8px rgba(231,76,60,0.9));
    animation: fireBadge 1.5s ease-in-out infinite;
}
@keyframes fireBadge {
    0%,100% { transform: scale(1) rotate(-5deg); }
    50%      { transform: scale(1.2) rotate(5deg); }
}

/* Card header: image + title */
.leg-card-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

/* Big centered icon layout */
.leg-icon-center {
    display: flex;
    justify-content: center;
    padding: 4px 0;
}
.leg-title-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}
.leg-icon-wrap {
    width: 96px;
    height: 96px;
    flex-shrink: 0;
    border: 2px solid;
    border-radius: 14px;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.leg-icon-img {
    width: 88%;
    height: 88%;
    object-fit: contain;
}
.leg-icon-fallback {
    font-size: 3.5em;
    align-items: center;
    justify-content: center;
}
.leg-title-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.leg-item-name {
    font-weight: bold;
    font-size: 0.97em;
    line-height: 1.3;
    word-break: break-word;
}
.leg-item-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}
.leg-rarity-chip {
    border: 1px solid;
    border-radius: 4px;
    padding: 1px 7px;
    font-size: 0.72em;
    font-weight: bold;
}
.leg-level-chip {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 4px;
    padding: 1px 7px;
    font-size: 0.72em;
    color: #aaa;
}
.leg-rare-chip {
    background: rgba(231,76,60,0.15);
    border: 1px solid rgba(231,76,60,0.4);
    border-radius: 4px;
    padding: 1px 7px;
    font-size: 0.72em;
    color: #e74c3c;
}
.leg-affix-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
}
.leg-affix-badge {
    border-radius: 4px;
    padding: 1px 7px;
    font-size: 0.7em;
    font-weight: bold;
}
.leg-prefix {
    background: rgba(230,126,34,0.18);
    border: 1px solid rgba(230,126,34,0.45);
    color: #e67e22;
}
.leg-suffix {
    background: rgba(22,160,133,0.18);
    border: 1px solid rgba(22,160,133,0.45);
    color: #1abc9c;
}

/* Stats box */
.leg-stats-box {
    background: rgba(0,0,0,0.45);
    border: 1px solid;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.83em;
    flex: 1;            /* grows to fill available space — aligns power badge + bid across all cards */
    min-height: 120px;  /* ensures a minimum height even for items with few stats */
}

/* Power badge */
.leg-power-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background: linear-gradient(90deg, rgba(255,107,0,0.12), rgba(255,107,0,0.05), rgba(255,107,0,0.12));
    border: 1px solid rgba(255,107,0,0.28);
    border-radius: 7px;
    padding: 6px 10px;
    font-size: 0.73em;
    color: #ff9944;
    text-align: center;
}

/* Bid area */
.leg-winning-badge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(46,204,113,0.15);
    border: 1px solid #2ecc71;
    border-radius: 8px;
    padding: 9px 12px;
    color: #2ecc71;
    font-weight: bold;
    font-size: 0.88em;
}
.leg-bid-area {
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.leg-current-bid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(230,126,34,0.08);
    border: 1px solid rgba(230,126,34,0.2);
    border-radius: 6px;
    padding: 5px 10px;
    gap: 6px;
}
.leg-bid-input {
    width: 100%;
    background: rgba(0,0,0,0.65);
    border: 1px solid;
    color: #fff;
    padding: 8px 10px;
    border-radius: 7px;
    font-size: 0.88em;
    text-align: center;
    box-sizing: border-box;
    outline: none;
}
.leg-bid-input:focus { filter: brightness(1.2); }
.leg-btn-row {
    display: flex;
    gap: 7px;
}
.leg-bid-btn {
    flex: 1;
    padding: 8px;
    font-size: 0.85em;
    font-weight: bold;
}
.leg-bs-btn {
    flex: 0 0 auto;
    padding: 8px 12px;
    font-size: 0.85em;
    border-color: #9b59b6 !important;
    color: #d2b4de !important;
}

/* Stat line (kept for legacy use) */
.leg-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 0.82em;
}
.leg-stat-row:last-child { border-bottom: none; }

/* Legendary auction grid — responsive */
@media (max-width: 1200px) {
    #leg-auction-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 800px) {
    #leg-auction-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 500px) {
    #leg-auction-grid { grid-template-columns: 1fr !important; }
}

/* ── Skill Tree page fixes ───────────────────────────────────────────── */
#view-skills {
    width: 100%;
    box-sizing: border-box;
}
.skills-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 12px;
    margin-top: 10px;
    width: 100%;
}
#skills-grid-ui {
    width: 100%;
}
.skill-card {
    background: #0a0a0a;
    border: 2px solid #333;
    border-radius: 6px;
    padding: 12px 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 220px;
}
.skill-card:hover {
    border-color: var(--gold);
    box-shadow: 0 0 10px rgba(212,175,55,0.2);
}
.skill-desc {
    color: #888;
    font-size: 0.8em;
    margin-bottom: 10px;
    line-height: 1.3;
    min-height: 30px;
    height: auto !important;
}

/* Progress tab — 2 column layout, collapses on smaller screens */
@media (max-width: 960px) {
    #view-skills .sp-progress-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── Stats panel fixes ───────────────────────────────────────────────── */
.stat-line {
    background: #000;
    padding: 8px 10px;
    border: 1px inset #222;
    font-size: 0.95em;
    border-right: 3px solid var(--iron);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    min-width: 0;
    white-space: nowrap;
}
.stat-line span[dir="ltr"] {
    color: var(--gold);
    font-weight: bold;
    font-family: monospace;
    font-size: 1.1em;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: 4px;
}
/* Widen the stats glass panel */
.glass-panel:has(#detailed-stats),
.glass-panel:has(#advanced-stats) {
    min-width: 260px;
}
/* Responsive fallback for :has() */
#detailed-stats, #advanced-stats {
    width: 100%;
}

/* ── Header: XP+HP+Energy stacked in player section ─────────────────── */
.gh-player-section {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
}
/* Stack the bars vertically beside the player card */
.gh-player-section .gh-seg-bar {
    min-width: 180px;
}
/* Wrap bars in a column */
.gh-player-bars-col {
    display: flex;
    flex-direction: column;
    gap: 3px;
    justify-content: center;
}
/* Icons section takes remaining space — pushes toward center (right in LTR = left in RTL) */
.gh-icons-horizontal {
    flex: 1;
    justify-content: flex-end;
}
/* Potions inline with icons */
.gh-potions-beside {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── Stats panel — fixed overflow, proper fit ─────────────────────────── */
.stat-line {
    white-space: normal !important;   /* allow wrap so text doesn't escape box */
    overflow: hidden;
    min-width: 0;
    width: 100%;
    padding: 5px 7px;
    box-sizing: border-box;
    word-break: break-word;
}
.stat-line span[dir="ltr"] {
    min-width: 32px;
    text-align: left;
    flex-shrink: 0;
}
#detailed-stats, #advanced-stats {
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

/* ── Premium package cards — button always at bottom ────────────────── */
#treasury-bs-grid .glass-panel {
    display: flex;
    flex-direction: column;
}
#treasury-bs-grid .glass-panel > div:last-child {
    display: flex;
    flex-direction: column;
    flex: 1;
}
#treasury-bs-grid .glass-panel > div:last-child > button {
    margin-top: auto;
}

/* ── Title cards — glow effects ─────────────────────────────────────── */
#title-card-bloody-king {
    box-shadow: 0 0 18px rgba(231,76,60,0.35), inset 0 0 30px rgba(139,0,0,0.15);
    animation: pulse-blood 3s ease-in-out infinite;
}
@keyframes pulse-blood {
    0%,100% { box-shadow: 0 0 18px rgba(231,76,60,0.35), inset 0 0 30px rgba(139,0,0,0.15); }
    50%      { box-shadow: 0 0 32px rgba(231,76,60,0.6),  inset 0 0 40px rgba(139,0,0,0.3);  }
}

#title-card-legend-hunter {
    box-shadow: 0 0 18px rgba(46,204,113,0.3), inset 0 0 30px rgba(26,110,60,0.12);
    animation: pulse-hunter 3.5s ease-in-out infinite;
}
@keyframes pulse-hunter {
    0%,100% { box-shadow: 0 0 18px rgba(46,204,113,0.3),  inset 0 0 30px rgba(26,110,60,0.12); }
    50%      { box-shadow: 0 0 32px rgba(46,204,113,0.55), inset 0 0 40px rgba(26,110,60,0.25); }
}

#title-card-shadow-blade {
    box-shadow: 0 0 18px rgba(155,89,182,0.35), inset 0 0 30px rgba(80,20,120,0.15);
    animation: pulse-shadow 4s ease-in-out infinite;
}
@keyframes pulse-shadow {
    0%,100% { box-shadow: 0 0 18px rgba(155,89,182,0.35), inset 0 0 30px rgba(80,20,120,0.15); }
    50%      { box-shadow: 0 0 32px rgba(155,89,182,0.65), inset 0 0 40px rgba(80,20,120,0.3);  }
}

/* Title purchased state — shown via JS after buy */
.title-card-owned {
    opacity: 0.7;
    pointer-events: none;
}
.title-card-owned::after {
    content: '✓ مملوك';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.55);
    color: #2ecc71;
    font-size: 1.1em;
    font-weight: bold;
    border-radius: 10px;
}

/* ── Smelt card redesign ───────────────────────────────────────────── */
.smelt-item-card {
    background: rgba(8,4,4,0.88) !important;
    border-radius: 10px !important;
    padding: 0 !important;
    overflow: visible !important;  /* must be visible so tooltip escapes the card */
    min-height: 210px;
}
.smelt-item-card:hover {
    transform: translateY(-4px);
    z-index: 9999 !important;
    overflow: visible !important;
}

/* Furnace slots — smaller, tighter */
.furnace-slot {
    min-height: 155px !important;
    padding: 8px 6px !important;
    border-radius: 8px !important;
}
.furnace-slot img {
    width: 48px !important;
    height: 48px !important;
}

/* Auction grid — uniform row heights */
#auction-grid {
    align-items: start !important;
    grid-auto-rows: auto !important;
}
#auction-grid .item-card {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: auto !important;
}

/* ── Furnace slots full-bleed fix ─────────────────────────────────── */
.furnace-slot {
    min-height: 140px !important;
    height: 140px !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: relative !important;
}
.furnace-slot-empty {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ── Auction card uniform grid ────────────────────────────────────── */
.auction-item-card {
    height: 100%;
}
#auction-grid {
    grid-auto-rows: auto !important;
    align-items: start !important;
}

/* ── Auction grid — override inv-grid/item-card conflicts ─────────── */
#auction-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
    gap: 10px !important;
    align-items: start !important;
}
#auction-grid .item-card,
#auction-grid .auction-item-card {
    aspect-ratio: unset !important;
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    overflow: hidden !important;
}
#view-auction {
    overflow: visible !important;
    min-height: 0 !important;
}
#auction-grid .equip-tooltip {
    overflow: visible !important;
}

/* ── Furnace slot — full bleed bg fix ─────────────────────────────── */
.furnace-slot {
    position: relative !important;
    overflow: hidden !important;
    padding: 0 !important;
    min-height: 140px !important;
    height: 140px !important;
    display: block !important;  /* remove flex so absolute children work */
}
.furnace-slot-empty {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.furnace-progress-bar {
    width: 90% !important;
    margin: 2px auto 0 !important;
}

/* ── Auction card uniform height ──────────────────────────────────── */
#auction-grid .item-card,
#auction-grid .auction-item-card {
    min-height: 220px !important;
}
/* Name area fixed height — 2 lines always, no card stretching */
#auction-grid .auction-item-card .item-name-area {
    height: 2.6em !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

/* ── Paperdoll item glow — traces PNG shape via drop-shadow ────────── */
@keyframes itemGlowPulse {
    0%,100% { opacity: 0.85; }
    50%      { opacity: 1.0;  }
}
.equipped-glow img.anim-equip,
.equipped-glow > img {
    animation: itemGlowPulse 2s ease-in-out infinite !important;
    filter: var(--item-glow, drop-shadow(0 0 6px #c8a96e)) !important;
}
/* Remove box-shadow from slot when equipped — glow is on img only */
.equipped-glow {
    box-shadow: none !important;
    animation: none !important;
    border-width: 2px !important;
}

/* ── Specific guild tabs — centered box + bigger font ──────────────── */
#guild-tab-missions,
#guild-tab-contribution,
#guild-tab-members,
#guild-tab-perms {
    max-width: 680px;
    margin: 0 auto;
    font-size: 1.15em;
}