/* ============================================================
   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;
    background: #0a0a0a url('assets/ui/bg.png') no-repeat center center fixed;
    background-size: cover;
    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; /* ضمان بقائه فوق كل شيء */
    font-family: 'Cairo', sans-serif;
    
    /* مخفي افتراضياً */
    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;
}

.shadow-layout {
    display: grid;
    grid-template-columns: minmax(260px, 360px) 1fr;
    gap: 16px;
    height: calc(100vh - 110px);
    overflow: hidden;
}

.shadow-regions {
    padding: 14px;
    overflow-y: auto;
    background: linear-gradient(180deg, rgba(12, 4, 18, 0.94), rgba(4, 0, 0, 0.96));
    border-color: #5b2c83;
}

.shadow-regions h2 {
    margin: 0 0 10px;
    color: #d7b8ff;
    text-align: center;
}

.shadow-team-status {
    color: #aaa;
    font-size: 0.85em;
    text-align: center;
    border: 1px solid #2b173a;
    background: rgba(0,0,0,0.35);
    padding: 8px;
    border-radius: 6px;
    margin-bottom: 10px;
}

.shadow-region-card {
    width: 100%;
    min-height: 82px;
    display: grid;
    grid-template-columns: 72px 1fr;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding: 8px;
    background: linear-gradient(135deg, rgba(28, 8, 40, 0.85), rgba(8, 0, 0, 0.92));
    border: 1px solid #5b2c83;
    border-radius: 6px;
    cursor: pointer;
    text-align: right;
    color: #ddd;
    font-family: 'Cairo', sans-serif;
}

.shadow-region-card:hover {
    border-color: #d7b8ff;
    transform: translateY(-2px);
    box-shadow: 0 0 18px rgba(142, 68, 173, 0.25);
}

.shadow-region-card.locked {
    opacity: 0.45;
    filter: grayscale(0.8);
}

.shadow-region-card img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border: 1px solid #333;
    border-radius: 5px;
}

.shadow-region-card h3 {
    margin: 0;
    color: #fff;
    font-size: 1em;
}

.shadow-region-card p,
.shadow-region-card small {
    display: block;
    margin: 3px 0 0;
    color: #999;
}

.shadow-doll-wrap {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 10px;
    min-width: 0;
}

.shadow-role-tabs {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.shadow-role-tabs .btn {
    min-width: 110px;
}

.shadow-role-tabs .btn.active {
    background: rgba(215, 184, 255, 0.12);
    box-shadow: 0 0 14px rgba(142, 68, 173, 0.25);
}

.shadow-paper-panel {
    padding: 0;
    min-height: 520px;
    overflow: hidden;
    border-color: #2d163d;
}

.shadow-paper-doll {
    min-height: 520px;
    background-size: cover;
    background-position: center top;
}

.shadow-soldier-info {
    padding: 12px;
    background: rgba(0,0,0,0.65);
}

.shadow-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

.shadow-stat-grid span {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    background: rgba(0,0,0,0.5);
    border: 1px solid #252525;
    border-radius: 4px;
    padding: 6px 8px;
    color: #aaa;
    font-size: 0.84em;
}

.shadow-stat-grid b {
    color: var(--gold);
}

.shadow-soldier-card {
    background: linear-gradient(180deg, rgba(12, 6, 12, 0.96), rgba(0,0,0,0.94));
    border: 2px solid #333;
    border-radius: 6px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-height: 310px;
    font-family: 'Cairo', sans-serif;
}

.shadow-soldier-card h3 {
    margin: 0;
    font-size: 0.98em;
    line-height: 1.3;
}

.shadow-soldier-card p {
    color: #888;
    font-size: 0.78em;
    min-height: 34px;
    margin: 0;
    font-family: 'Cairo', sans-serif;
}

.shadow-soldier-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: radial-gradient(circle at 50% 20%, rgba(215,184,255,0.18), rgba(0,0,0,0.75));
    border: 1px solid #292929;
    border-radius: 5px;
    overflow: hidden;
}

.shadow-soldier-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.shadow-soldier-info {
    font-family: 'Cairo', sans-serif;
}

.shadow-stat-grid.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.shadow-battle-icons {
    display: grid;
    grid-template-columns: repeat(5, minmax(72px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.shadow-battle-icons div {
    background: rgba(0,0,0,0.45);
    border: 1px solid #333;
    border-radius: 6px;
    padding: 6px;
    text-align: center;
}

.shadow-battle-icons img {
    width: 54px;
    height: 54px;
    object-fit: cover;
    border-radius: 5px;
    display: block;
    margin: 0 auto 4px;
}

.shadow-battle-icons span {
    color: #ccc;
    font-size: 0.75em;
}

.shadow-round {
    color: #d7b8ff;
    border-top: 1px dashed #333;
    margin-top: 10px;
    padding-top: 8px;
    font-weight: bold;
}

.shadow-report-table {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.shadow-report-table div {
    background: rgba(0,0,0,0.45);
    border: 1px solid #333;
    border-radius: 6px;
    padding: 8px;
}

.shadow-report-table span {
    display: block;
    color: #aaa;
    font-size: 0.8em;
    margin-top: 3px;
}
        /* 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', sans-serif; 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: 'Cairo', sans-serif; font-weight:600; line-height: 1.75; font-size: 1em; padding-right: 5px; min-height: 200px; max-height: 420px; text-align: center; }
        .team-arena-lineup { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
        .team-arena-unit-card { background: linear-gradient(180deg, rgba(18,18,18,0.98), rgba(6,6,6,0.98)); border: 1px solid #2a2a2a; border-radius: 6px; padding: 6px; display: flex; align-items: center; gap: 6px; min-height: 58px; box-shadow: inset 0 0 10px rgba(0,0,0,0.35); }
        .team-arena-unit-card.is-dead { opacity: 0.45; filter: grayscale(1); }
        .team-arena-unit-face { width: 38px; height: 38px; border-radius: 6px; overflow: hidden; background: #0c0c0c; border: 2px solid #333; flex: 0 0 38px; display: flex; align-items: center; justify-content: center; }
        .team-arena-unit-face img { width: 100%; height: 100%; object-fit: cover; }
        .team-arena-unit-body { flex: 1; min-width: 0; text-align: right; }
        .team-arena-unit-name { color: #f5e6b5; font-size: 0.72em; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .team-arena-unit-role { color: #777; font-size: 0.62em; margin-top: 1px; }
        .team-arena-unit-hp { width: 100%; height: 8px; margin-top: 5px; border-radius: 999px; background: #1b1b1b; border: 1px solid #2c2c2c; overflow: hidden; }
        .team-arena-unit-fill { height: 100%; background: linear-gradient(90deg, #8b0000, #e74c3c); transition: width 0.25s ease-out; }
        .team-arena-opponent-card { position: relative; overflow: hidden; }
        .team-arena-opponent-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(192,57,43,0.08), transparent 55%); pointer-events: none; }

        .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;
    align-items: stretch;
    width: 100%;
}

.tooltip-panel {
    flex: 1 0 220px;
    min-width: 0;
    overflow-wrap: anywhere;
}

#game-global-tooltip.comparison-tooltip-wide .tooltip-panel {
    min-width: 235px;
}

.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; }

.battle-drop-strip {
    display: flex;
    direction: rtl;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 100%;
    margin: 14px auto 2px;
    padding: 8px 2px;
    overflow-x: auto;
}

.battle-drop-separator {
    flex: 0 0 1px;
    width: 1px;
    height: 52px;
    background: #9b0e23;
    box-shadow: 0 0 4px rgba(155,14,35,0.45);
}

.battle-drop-icon {
    position: relative;
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    box-sizing: border-box;
    border: 1px solid #666;
    background: #090909;
    overflow: hidden;
    cursor: help;
    transition: border-color 0.16s ease, filter 0.16s ease;
}

.battle-drop-icon:hover {
    border-color: #888;
    filter: brightness(1.12);
}

.battle-drop-icon img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.battle-drop-qty {
    position: absolute;
    right: 3px;
    bottom: 2px;
    min-width: 16px;
    padding: 0 3px;
    color: #fff;
    background: rgba(0,0,0,0.88);
    font: 700 11px/16px 'Cairo', sans-serif;
    text-align: center;
}

.battle-drop-icon > .equip-tooltip {
    display: none;
}

.battle-drop-tooltip-panel {
    min-width: 240px;
    max-width: 330px;
    font-family: 'Cairo', sans-serif;
    white-space: normal;
    overflow-wrap: anywhere;
}

.battle-drop-tooltip-amount {
    margin-top: 7px;
    padding-top: 6px;
    border-top: 1px solid #444;
    color: #f1c40f;
    text-align: center;
    font-weight: 800;
}

.tooltip-unidentified-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 6px auto 4px;
    padding: 2px 10px;
    border: 1px solid rgba(241, 196, 15, 0.35);
    border-radius: 999px;
    background: rgba(241, 196, 15, 0.08);
    color: #f7d774;
    font-size: 0.78em;
    font-weight: bold;
}

.tooltip-unidentified-hint {
    margin-top: 8px;
    color: #9fc4ff;
    font-size: 0.82em;
}

.tooltip-keycap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    padding: 1px 8px;
    margin: 0 4px;
    border: 1px solid rgba(255,255,255,0.2);
    border-bottom-color: rgba(0,0,0,0.55);
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03));
    color: #fff;
    font-weight: bold;
    font-size: 0.9em;
}

.tooltip-alt-preview {
    display: none;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(212, 175, 55, 0.2);
    text-align: right;
}

.alt-tooltip-preview-active .tooltip-alt-preview {
    display: block;
}

.tooltip-alt-preview-title {
    color: var(--gold);
    font-weight: bold;
    text-align: center;
    margin-bottom: 8px;
}

.tooltip-alt-preview-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 520px;
}

.tooltip-affix-preview-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tooltip-affix-preview-label {
    color: #b8b8b8;
    font-size: 0.78em;
    font-weight: bold;
}

.tooltip-affix-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tooltip-affix-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.74em;
    line-height: 1.2;
    white-space: nowrap;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
}

.tooltip-affix-chip.prefix {
    color: #85c1e9;
    border-color: rgba(133, 193, 233, 0.35);
    background: rgba(52, 152, 219, 0.1);
}

.tooltip-affix-chip.suffix {
    color: #f4d03f;
    border-color: rgba(244, 208, 63, 0.35);
    background: rgba(244, 208, 63, 0.1);
}

/* ========================================= */
/* 🏅 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: normal;
    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: normal;
    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;
  position: relative;
  z-index: 1;
}

.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;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1; 
  background-image: linear-gradient(rgba(42, 10, 10, 0.4), rgba(10, 10, 10, 0.6));
}

.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(0,0,0,0.7);
    border-color: rgba(212,175,55,0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.6);
}

.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: 0;
    overflow: hidden;
}

.gh-icon-card:hover {
    background: rgba(0,0,0,0.7);
    border-color: rgba(212,175,55,0.5);
    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 */
.header-player-card-art {
    position: absolute;
    top: 0;
    right: 0;
    width: 310px;
    height: 294px;
    z-index: 1;
    pointer-events: none;
    background: url('assets/ui/YOUR_HEADER_IMAGE.png') right center / auto 294px no-repeat;
    transform: scaleX(1.14);
    transform-origin: right center;
}

.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;
}

/* ── Header Gradient Bars ────────────────────────────────────────────── */
.gh-grad-bar {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
}
.gh-grad-track {
    width: 100%;
    height: 8px;
    background: rgba(0,0,0,0.5);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: inset 0 1px 4px rgba(0,0,0,0.8);
    position: relative;
}
.gh-grad-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease-out;
    position: relative;
}
.gh-grad-fill::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.15) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: gradShine 2.5s linear infinite;
    border-radius: 4px;
}
@keyframes gradShine {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
/* XP — purple */
.xp-grad {
    background: linear-gradient(90deg, #6c3483, #9b59b6, #d2b4de);
    box-shadow: 0 0 8px rgba(155,89,182,0.5);
}
/* HP — red */
.hp-grad {
    background: linear-gradient(90deg, #7b241c, #c0392b, #e74c3c);
    box-shadow: 0 0 8px rgba(231,76,60,0.5);
}
.hp-grad.grad-low {
    background: linear-gradient(90deg, #4a0000, #922b21, #e74c3c);
    animation: lowPulse 1s ease-in-out infinite;
}
@keyframes lowPulse {
    0%, 100% { box-shadow: 0 0 6px rgba(231,76,60,0.4); }
    50%       { box-shadow: 0 0 14px rgba(231,76,60,0.9); }
}
/* Energy — blue */
.en-grad {
    background: linear-gradient(90deg, #1a5276, #2e86c1, #5dade2);
    box-shadow: 0 0 8px rgba(52,152,219,0.5);
}

/* ══ Nav Icon Cards — hover effects + notification states ══════════════ */
.gh-icons-horizontal, .gh-icons-section, .gh-small-grid {
    isolation: isolate;
}
.gh-icon-card {
    overflow: hidden;
    isolation: isolate;
}
.gh-icon-card .img-wrap {
    width: 100%;
    flex: 1;
    overflow: hidden;
    position: relative;
}
.gh-icon-card .img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: filter 0.3s, transform 0.3s;
    filter: saturate(0.85) brightness(0.88);
}
.gh-icon-card:hover .img-wrap img {
    filter: saturate(1.2) brightness(1.15);
    transform: scale(1.07);
}
.gh-icon-card:active {
    transform: translateY(-1px) scale(0.97) !important;
}

/* Notification pulse — red glow on card border, not filter bleed */
.has-notif {
    animation: navNotifPulse 2.5s ease-in-out infinite;
}
@keyframes navNotifPulse {
    0%, 100% { box-shadow: 0 0 4px rgba(231,76,60,0.3); }
    50%       { box-shadow: 0 0 14px rgba(231,76,60,0.8), 0 0 4px rgba(231,76,60,0.5); }
}

/* Claimable pulse — green (calendar, quests) */
.claimable-card {
    animation: navClaimPulse 2s ease-in-out infinite;
}
@keyframes navClaimPulse {
    0%, 100% { box-shadow: 0 0 4px rgba(46,204,113,0.3); }
    50%       { box-shadow: 0 0 14px rgba(46,204,113,0.8), 0 0 4px rgba(46,204,113,0.5); }
}

/* Legendary auction shimmer */
.legendary-auction-nav {
    border-color: rgba(255,107,0,0.5) !important;
    background: rgba(60,20,0,0.4) !important;
}
.legendary-auction-nav {
    animation: navLegendaryShimmer 1.8s ease-in-out infinite;
}
.legendary-auction-nav .gh-icon-label {
    color: #ff6b00 !important;
}
@keyframes navLegendaryShimmer {
    0%, 100% { box-shadow: 0 0 8px rgba(255,107,0,0.4); }
    50%       { box-shadow: 0 0 20px rgba(255,107,0,0.9), 0 0 6px rgba(255,107,0,0.6); }
}
.legendary-auction-nav:hover {
    border-color: #ff6b00 !important;
    box-shadow: 0 6px 20px rgba(255,107,0,0.35) !important;
}

/* ── Nav icon label — bottom bar, white text + shadow ───────────────── */
.gh-icon-card {
    overflow: hidden !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    height: 90px !important;
}
.gh-icon-card .img-wrap {
    flex: 1;
    width: 100%;
    overflow: hidden;
    border-radius: 7px 7px 0 0;
    position: relative;
}
.gh-icon-card .img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.gh-icon-card .gh-icon-label,
.gh-icon-card .gh-icon-label {
    position: static !important;
    transform: none !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    flex-shrink: 0 !important;
    padding: 3px 4px !important;
    font-size: 0.68em !important;
    font-weight: 700 !important;
    text-align: center !important;
    white-space: nowrap !important;
    color: #fff !important;
    background: rgba(139,0,0,0.55) !important;
    border-top: 1px solid rgba(139,0,0,0.8) !important;
    border-radius: 0 0 7px 7px !important;
    text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 0 0 6px rgba(0,0,0,0.9) !important;
    pointer-events: none !important;
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-bottom: 0 !important;
}
.gh-icons-horizontal .gh-icon-label,
.gh-icons-section .gh-icon-label {
    position: static !important;
    transform: none !important;
}

/* Direct img child (no img-wrap wrapper in actual HTML) */
.gh-icon-card > img {
    flex: 1;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 7px 7px 0 0 !important;
    overflow: hidden;
    transition: filter 0.3s, transform 0.3s;
    filter: saturate(0.85) brightness(0.88);
}
.gh-icon-card:hover > img {
    filter: saturate(1.2) brightness(1.15);
    transform: scale(1.06);
}

/* ══ Utility Pill Icons (two-tier header) ═══════════════════════════════ */
.util-pill {
    display: flex;
    align-items: stretch;
    background: rgba(0,0,0,0.45);
    border: 1px solid rgba(139,0,0,0.18);
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
    transition: border-color 0.25s;
}
.util-pill:hover {
    border-color: rgba(212,175,55,0.3);
}
.util-icon {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 4px;
    cursor: pointer;
    position: relative;
    transition: background 0.2s;
    filter: grayscale(0.7);
    opacity: 0.55;
}
.util-icon:hover {
    background: rgba(0,0,0,0.6);
    filter: grayscale(0);
    opacity: 1;
}
.util-icon > img {
    width: 28px;
    height: 28px;
    object-fit: cover;
    border-radius: 5px;
    transition: transform 0.2s, filter 0.2s;
}
.util-icon:hover > img {
    transform: scale(1.12);
    filter: drop-shadow(0 0 6px rgba(212,175,55,0.6));
}
.util-emoji {
    font-size: 1.3em;
    line-height: 1;
}
.util-label {
    font-family: 'Cairo', sans-serif;
    font-size: 0.6em;
    font-weight: 700;
    color: #888;
    white-space: nowrap;
    transition: color 0.2s;
}
.util-icon:hover .util-label {
    color: var(--gold);
}
.util-divider {
    width: 1px;
    background: rgba(139,0,0,0.25);
    margin: 6px 0;
    flex-shrink: 0;
}
/* Notification on util icons */
.util-icon .inbox-badge {
    top: 2px;
    right: 2px;
    font-size: 0.5em;
    min-width: 14px;
    height: 14px;
}
.util-icon .notif-dot {
    top: 2px;
    right: 2px;
    width: 8px;
    height: 8px;
}
/* has-notif on util icon */
.util-icon.has-notif {
    filter: grayscale(0);
    opacity: 0.85;
}
.util-icon.has-notif .util-emoji,
.util-icon.has-notif > img {
    animation: navNotifPulse 2.5s ease-in-out infinite;
}
.util-icon.claimable-card {
    filter: grayscale(0);
    opacity: 0.85;
}

/* ── Small icons wrapper — 3x2 grid, same size as one big icon ─────── */
.gh-small-grid {
    display: flex;
    flex-direction: row;
    gap: 3px;
    height: 90px;
    flex-shrink: 0;
}
.gh-icon-card.gh-icon-small {
    min-width: 58px !important;
    width: 58px !important;
    height: 90px !important;
    filter: grayscale(0.65);
    opacity: 0.5;
    border-color: rgba(80,80,80,0.2) !important;
    background: rgba(0,0,0,0.4) !important;
    border-radius: 5px !important;
}
.gh-icon-card.gh-icon-small .gh-icon-label {
    font-size: 0.5em !important;
    padding: 1px 2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    background: rgba(100,0,0,0.5) !important;
}
.gh-icon-card.gh-icon-small > img {
    filter: saturate(0.6) brightness(0.75);
    transition: filter 0.2s, transform 0.2s;
    border-radius: 4px 4px 0 0 !important;
}
.gh-icon-card.gh-icon-small:hover {
    filter: grayscale(0) !important;
    opacity: 1 !important;
    border-color: rgba(212,175,55,0.5) !important;
    background: rgba(139,0,0,0.2) !important;
    z-index: 2;
}
.gh-icon-card.gh-icon-small:hover > img {
    filter: saturate(1.2) brightness(1.1) drop-shadow(0 0 5px rgba(212,175,55,0.5)) !important;
    transform: scale(1.05);
}
.gh-icon-card.gh-icon-small:hover .gh-icon-label {
    color: #fff !important;
    background: rgba(139,0,0,0.6) !important;
}

/* ── Combat button cooldown overlay ──────────────────────────────────── */
.nav-cd-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cairo', sans-serif;
    font-size: 0.72em;
    font-weight: 900;
    color: #e74c3c;
    text-shadow: 0 0 8px #e74c3c;
    border-radius: 7px 7px 0 0;
    pointer-events: none;
    z-index: 3;
}
.nav-combat-btn.on-cooldown {
    opacity: 0.7;
}
.nav-combat-btn.on-cooldown > img {
    filter: grayscale(0.6) brightness(0.7) !important;
}

/* ── Soldier doll toggle buttons ────────────────────────────────────── */
.doll-toggle-btn {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid #2a0000;
    background: rgba(0,0,0,0.5);
    color: #888;
    font-size: 1em;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
}
.doll-toggle-btn:hover {
    border-color: #d4af37;
    background: rgba(212,175,55,0.1);
    color: #d4af37;
    transform: scale(1.08);
}
.doll-toggle-btn.active {
    border-color: #d4af37;
    background: rgba(212,175,55,0.15);
    color: #d4af37;
    box-shadow: 0 0 8px rgba(212,175,55,0.3);
}
.soldier-doll {
    background: rgba(0,0,0,0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    font-family: 'Cairo', sans-serif;
}
.soldier-doll.hidden { display: none !important; }

/* ── Shadow Cave Sphere ─────────────────────────────────────────────── */
@keyframes spherePulse {
    0%, 100% { opacity: 0.6; }
    50%       { opacity: 1; }
}
.sphere-outer:hover {
    box-shadow: 0 0 60px rgba(200,0,0,0.8), inset -20px -20px 40px rgba(0,0,0,0.8), inset 10px 10px 20px rgba(220,60,60,0.4) !important;
}

/* ── Shadow Cave Sphere ─────────────────────────────────────────────── */
@keyframes spherePulse {
    0%,100% { opacity:0.5; }
    50%      { opacity:1; }
}
@keyframes sphereDotPulse {
    0%,100% { box-shadow:0 0 8px currentColor; }
    50%      { box-shadow:0 0 20px currentColor, 0 0 40px currentColor; }
}
@keyframes sphereTravel {
    0%   { transform:rotate(0deg); }
    100% { transform:rotate(360deg); }
}

.shadow-cave-shell {
    position: relative;
    min-height: 920px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 12%, rgba(140, 45, 45, 0.18), transparent 22%),
        radial-gradient(circle at 52% 52%, rgba(96, 58, 130, 0.10), transparent 32%),
        linear-gradient(180deg, #08050b 0%, #050309 58%, #030205 100%);
    font-family: 'Cairo', sans-serif;
}

.shadow-cave-shell::before,
.shadow-cave-shell::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.shadow-cave-shell::before {
    background:
        radial-gradient(circle at 50% 42%, rgba(255, 205, 112, 0.06), transparent 22%),
        radial-gradient(circle at 50% 60%, rgba(163, 45, 45, 0.10), transparent 32%);
    filter: blur(8px);
    opacity: 0.9;
}

.shadow-cave-shell::after {
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.28), transparent 12%, transparent 88%, rgba(0, 0, 0, 0.28)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 18%, transparent 82%, rgba(255, 255, 255, 0.02));
}

.shadow-cave-topbar {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 16px 18px 0;
}

.shadow-cave-topbar h2 {
    margin: 0;
    color: #f2dfb1;
    font-size: 1.55em;
    letter-spacing: 0;
}

.shadow-cave-topbar p {
    margin: 4px 0 0;
    color: #8f8297;
    font-size: 0.8em;
}

.shadow-cave-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.shadow-cave-badge {
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(212, 175, 55, 0.18);
    border-radius: 999px;
    color: #ddd;
    padding: 7px 12px;
    font-size: 0.76em;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

.shadow-cave-layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) 320px;
    gap: 14px;
    padding: 16px 18px 18px;
}

.shadow-cave-rail,
.shadow-cave-detail {
    background: linear-gradient(180deg, rgba(11, 7, 13, 0.88), rgba(18, 11, 22, 0.84));
    border: 1px solid rgba(212, 175, 55, 0.10);
    border-radius: 18px;
    padding: 12px;
    min-height: 0;
}

.shadow-cave-rail-title {
    color: #d6b86a;
    font-size: 0.74em;
    letter-spacing: 2px;
    margin: 4px 0 12px;
}

.shadow-cave-region-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.shadow-cave-region-chip {
    position: relative;
    border-radius: 14px;
    border: 1px solid #2b1c31;
    background: linear-gradient(180deg, rgba(31, 20, 34, 0.72), rgba(7, 5, 9, 0.88));
    padding: 12px 12px 12px 14px;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}

.shadow-cave-region-chip:hover {
    transform: translateY(-2px);
    border-color: rgba(212, 175, 55, 0.42);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

.shadow-cave-region-chip.active {
    border-color: #d4af37;
    box-shadow: 0 0 0 1px rgba(212,175,55,0.12), 0 0 24px rgba(212,175,55,0.08);
    background: linear-gradient(180deg, rgba(67, 46, 20, 0.62), rgba(10, 7, 11, 0.94));
}

.shadow-cave-region-name {
    font-weight: 700;
    color: #f5e4bf;
    font-size: 0.98em;
    margin-bottom: 4px;
}

.shadow-cave-region-meta {
    color: #b8abc1;
    font-size: 0.74em;
}

.shadow-cave-region-progress {
    height: 6px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255,255,255,0.05);
    margin-top: 10px;
}

.shadow-cave-region-progress > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(212,175,55,0.92), rgba(163,45,45,0.92));
}

.shadow-cave-map-panel {
    position: relative;
    min-height: 780px;
    border-radius: 22px;
    border: 1px solid rgba(212,175,55,0.12);
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 44%, rgba(163,45,45,0.12), transparent 24%),
        linear-gradient(180deg, rgba(8,7,12,0.9), rgba(2,2,4,0.98));
    box-shadow: inset 0 0 32px rgba(0,0,0,0.35);
}

.shadow-cave-map-bg,
.shadow-cave-map-lamp,
.shadow-cave-map-fog {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.shadow-cave-map-bg {
    background: var(--shadow-map-bg, linear-gradient(180deg, rgba(10,7,12,0.92), rgba(4,3,6,0.98)));
    background-size: cover;
    background-position: center;
    filter: saturate(0.84) contrast(1.04) brightness(0.72);
    opacity: 0.95;
}

.shadow-cave-map-fog {
    background:
        radial-gradient(circle at 22% 24%, rgba(255,255,255,0.03), transparent 18%),
        radial-gradient(circle at 76% 62%, rgba(255,255,255,0.03), transparent 20%),
        linear-gradient(90deg, rgba(0,0,0,0.2), transparent 16%, transparent 84%, rgba(0,0,0,0.2));
    filter: blur(8px);
    opacity: 0.85;
}

.shadow-cave-map-lamp {
    --lamp-x: 50%;
    --lamp-y: 50%;
    --lamp-opacity: 0.95;
    background:
        radial-gradient(circle at var(--lamp-x) var(--lamp-y), rgba(255,214,140,0.16) 0%, rgba(255,214,140,0.09) 11%, rgba(255,214,140,0.03) 22%, transparent 34%),
        radial-gradient(circle at var(--lamp-x) var(--lamp-y), rgba(212,175,55,0.08) 0%, transparent 18%);
    mix-blend-mode: screen;
    opacity: var(--lamp-opacity);
    transition: opacity 0.18s ease;
}

.shadow-cave-map-route {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.shadow-cave-map-route path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.shadow-cave-map-route .shadow-cave-map-route-glow {
    stroke: rgba(163,45,45,0.24);
    stroke-width: 10;
    filter: blur(7px);
}

.shadow-cave-map-route .shadow-cave-map-route-line {
    stroke: rgba(212,175,55,0.34);
    stroke-width: 3.5;
    stroke-dasharray: 12 14;
}

.shadow-cave-map-node {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 122px;
    cursor: pointer;
    text-align: center;
    z-index: 3;
}

.shadow-cave-map-node .dot-wrap {
    position: relative;
    width: 42px;
    height: 42px;
    margin: 0 auto 8px;
}

.shadow-cave-map-node .dot-glow {
    position: absolute;
    inset: -9px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212,175,55,0.18) 0%, transparent 68%);
    opacity: 0;
    transition: opacity 0.18s ease;
}

.shadow-cave-map-node .dot {
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    border: 2px solid rgba(212,175,55,0.55);
    background:
        radial-gradient(circle at 35% 35%, rgba(255,255,255,0.22), transparent 26%),
        radial-gradient(circle at 50% 50%, rgba(90,18,25,0.98), rgba(23,8,18,0.98));
    box-shadow: 0 0 0 1px rgba(255,255,255,0.03), 0 0 10px rgba(212,175,55,0.08);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.shadow-cave-map-node .dot::after {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: inherit;
    background: radial-gradient(circle at 50% 50%, transparent 42%, rgba(255,255,255,0.04) 100%);
}

.shadow-cave-map-node .label {
    font-size: 0.72em;
    font-weight: 700;
    color: #efe0c0;
    text-shadow: 0 0 8px rgba(0,0,0,0.95);
    line-height: 1.35;
}

.shadow-cave-map-node .sub {
    color: #998ba6;
    font-size: 0.66em;
    margin-top: 3px;
}

.shadow-cave-map-node:hover .dot,
.shadow-cave-map-node.active .dot {
    transform: scale(1.08);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 0 14px rgba(212,175,55,0.18), 0 0 30px rgba(212,175,55,0.10);
}

.shadow-cave-map-node:hover .dot-glow,
.shadow-cave-map-node.active .dot-glow {
    opacity: 1;
}

.shadow-cave-map-node.locked {
    opacity: 0.42;
    filter: grayscale(0.68);
}

.shadow-cave-map-node.current .dot {
    border-color: #d4af37;
    background:
        radial-gradient(circle at 35% 35%, rgba(255,255,255,0.24), transparent 26%),
        radial-gradient(circle at 50% 50%, rgba(123, 52, 21, 0.98), rgba(31, 10, 13, 0.98));
}

.shadow-cave-map-node.current .dot::before {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 2px solid rgba(212,175,55,0.6);
    animation: shadowNodePulse 1.8s ease-in-out infinite;
}

@keyframes shadowNodePulse {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.08); opacity: 1; }
}

.shadow-cave-map-preview {
    position: absolute;
    right: 18px;
    bottom: 18px;
    width: min(320px, calc(100% - 36px));
    z-index: 4;
    border: 1px solid rgba(212,175,55,0.12);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(9,7,12,0.9), rgba(12,8,14,0.96));
    box-shadow: 0 18px 40px rgba(0,0,0,0.34);
    padding: 14px;
    transform: translateY(10px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease, transform 0.28s ease;
}

.shadow-cave-map-preview.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.shadow-cave-preview-square {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(212,175,55,0.14);
    background: linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.82));
    margin-bottom: 12px;
}

.shadow-cave-preview-square img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    filter: brightness(0.88) saturate(0.92);
}

.shadow-cave-preview-title {
    color: #f5dfb0;
    font-size: 1.02em;
    font-weight: 700;
    margin-bottom: 6px;
}

.shadow-cave-preview-text {
    color: #b7a8bd;
    font-size: 0.78em;
    line-height: 1.7;
}

.shadow-cave-preview-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.shadow-cave-preview-stats div {
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    padding: 7px 9px;
    color: #bbb;
    font-size: 0.72em;
}

.shadow-cave-preview-stats b {
    display: block;
    color: #d4af37;
    margin-top: 3px;
    font-size: 0.98em;
}

.shadow-cave-detail-title {
    color: #f0ddb0;
    font-size: 1.05em;
    font-weight: 700;
    margin: 0 0 8px;
}

.shadow-cave-detail-box {
    background: linear-gradient(180deg, rgba(18,12,23,0.92), rgba(8,6,10,0.96));
    border: 1px solid rgba(212,175,55,0.12);
    border-radius: 16px;
    padding: 14px;
    margin-bottom: 12px;
}

.shadow-cave-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.shadow-cave-detail-grid div {
    background: rgba(0,0,0,0.45);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    padding: 8px 9px;
    color: #bfb6c7;
    font-size: 0.74em;
}

.shadow-cave-detail-grid b {
    display: block;
    color: #fff1c9;
    margin-top: 3px;
}

.shadow-cave-travel-modal,
.shadow-cave-arrival-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.86);
    padding: 18px;
}

.shadow-cave-travel-card,
.shadow-cave-arrival-card {
    width: min(920px, 100%);
    border-radius: 20px;
    border: 1px solid rgba(212,175,55,0.18);
    background: linear-gradient(180deg, rgba(14,9,16,0.98), rgba(5,3,7,0.98));
    box-shadow: 0 30px 90px rgba(0,0,0,0.55);
    overflow: hidden;
}

.shadow-cave-travel-card .inner,
.shadow-cave-arrival-card .inner {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 14px;
    padding: 18px;
}

.shadow-cave-travel-thumb,
.shadow-cave-arrival-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(212,175,55,0.16);
    background: rgba(0,0,0,0.45);
}

.shadow-cave-travel-thumb img,
.shadow-cave-arrival-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

.shadow-cave-travel-meta,
.shadow-cave-arrival-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.shadow-cave-travel-meta div,
.shadow-cave-arrival-meta div {
    background: rgba(0,0,0,0.42);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    padding: 8px 9px;
    color: #bfb6c7;
    font-size: 0.74em;
}

.shadow-cave-travel-meta b,
.shadow-cave-arrival-meta b {
    display: block;
    color: #d4af37;
    margin-top: 3px;
}

.shadow-cave-battle-hero {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    margin-bottom: 14px;
}

.shadow-cave-battle-square {
    border-radius: 16px;
    border: 1px solid rgba(212,175,55,0.14);
    overflow: hidden;
    background: rgba(0,0,0,0.45);
    aspect-ratio: 1 / 1;
}

.shadow-cave-battle-square img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

.shadow-cave-battle-summary {
    background: linear-gradient(180deg, rgba(10,7,12,0.92), rgba(16,10,18,0.96));
    border: 1px solid rgba(212,175,55,0.12);
    border-radius: 16px;
    padding: 14px;
}

.shadow-cave-battle-summary h3 {
    margin: 0 0 8px;
    color: #f0ddb0;
    font-size: 1.02em;
}

.shadow-cave-battle-summary p {
    margin: 0;
    color: #b8a9c0;
    line-height: 1.65;
    font-size: 0.8em;
}

.shadow-cave-battle-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.shadow-cave-battle-badges .badge {
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(212,175,55,0.12);
    color: #e8dcc2;
    font-size: 0.72em;
}

@media (max-width: 1200px) {
    .shadow-cave-layout {
        grid-template-columns: 1fr;
    }

    .shadow-cave-map-panel {
        min-height: 700px;
    }

    .shadow-cave-map-preview {
        width: min(90%, 380px);
        left: 18px;
        right: 18px;
    }
}

@media (max-width: 720px) {
    .shadow-cave-layout {
        padding: 12px;
    }

    .shadow-cave-topbar {
        padding: 12px 12px 0;
    }

    .shadow-cave-map-panel {
        min-height: 940px;
    }

    .shadow-cave-travel-card .inner,
    .shadow-cave-arrival-card .inner,
    .shadow-cave-battle-hero {
        grid-template-columns: 1fr;
    }

    .shadow-cave-map-node {
        width: 124px;
    }
}


/* ════════════════════════════════════════════════════════
   CUSTOM HEADER LAYOUT — overrides default .game-header
   Applied only when class game-header-custom is present
   ════════════════════════════════════════════════════════ */
.game-header.game-header-custom {
    padding: 0 !important;
    background-image: none !important;
    background: none !important;
    box-shadow: none !important;
    min-height: unset !important;
    overflow: visible !important;
}

/* Override game-header-inner so it doesn't flex-wrap or add spacing */
.game-header.game-header-custom .game-header-inner {
    display: none !important;
}

/* Gradient bars inside the overlay */
.game-header.game-header-custom .gh-grad-bar {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.game-header.game-header-custom .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;
    font-family: 'Cairo', sans-serif;
}

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

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

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

.game-header.game-header-custom .gh-grad-track {
    width: 100%;
    height: 8px;
    background: rgba(0,0,0,.5);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.06);
    box-shadow: inset 0 1px 4px rgba(0,0,0,.8);
    position: relative;
}

.game-header.game-header-custom .gh-res-line {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    font-family: 'Cairo', sans-serif;
}

.game-header.game-header-custom .gh-res-name {
    font-size: 0.8em;
    font-weight: 700;
    text-shadow: 0 0 3px #000;
}

.game-header.game-header-custom .gh-logout-button {
    width: 120px;
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid rgba(190, 205, 220, 0.46);
    border-radius: 5px;
    background: rgba(5, 10, 16, 0.78);
    color: #e8f2f8;
    font-family: 'Cairo', sans-serif;
    font-size: 0.9em;
    font-weight: 800;
    letter-spacing: 0;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.025), 0 2px 7px rgba(0,0,0,0.48);
    transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.game-header.game-header-custom .gh-logout-button:hover,
.game-header.game-header-custom .gh-logout-button:focus-visible {
    border-color: rgba(170, 220, 245, 0.78);
    color: #fff;
    background: rgba(24, 55, 72, 0.9);
    box-shadow: 0 0 16px rgba(120,140,160,0.22), inset 0 0 0 1px rgba(160,220,255,0.28);
    outline: none;
}

/* nav-cd-overlay inside custom zones */
.game-header.game-header-custom [id^="nav-btn-"] {
    position: absolute;
}

.game-header.game-header-custom [id^="nav-btn-"],
.game-header.game-header-custom [id^="nav-zone-"],
.game-header.game-header-custom #__header_public_spots > button {
    border-radius: 8px;
    transition: box-shadow 0.18s ease, background 0.18s ease, outline-color 0.18s ease;
    outline: 1px solid transparent;
    outline-offset: 0;
}

.game-header.game-header-custom [id^="nav-btn-"]:hover,
.game-header.game-header-custom [id^="nav-zone-"]:hover {
    box-shadow: 0 0 16px rgba(90,150,200,0.32), inset 0 0 0 1px rgba(160,220,255,0.28);
    background: rgba(90,150,200,0.06);
}

.game-header.game-header-custom #__header_public_spots > button:hover {
    box-shadow: 0 0 16px rgba(90,150,200,0.32), inset 0 0 0 1px rgba(160,220,255,0.28);
    background: rgba(90,150,200,0.06);
    outline-color: rgba(160,220,255,0.22);
}

.game-header.game-header-custom .nav-cd-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.75);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    font-size: 0.65em;
    color: #ff9900;
    font-weight: 900;
    font-family: 'Cairo', sans-serif;
}
.currency-mode-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 16px;
}

.currency-mode-btn {
    min-width: 132px;
    padding: 8px 16px;
    border-color: #555;
    color: #aaa;
    transition: all 0.18s ease;
}

.currency-mode-btn.is-active,
.currency-mode-btn:hover {
    border-color: var(--gold) !important;
    color: var(--gold) !important;
    box-shadow: 0 0 14px rgba(212,175,55,0.22), inset 0 0 10px rgba(212,175,55,0.08);
}

.currency-submode-tabs {
    margin-top: 4px;
    margin-bottom: 18px;
}

.currency-submode-btn {
    min-width: 156px;
}

.currency-tab-pane.hidden {
    display: none !important;
}

.currency-reforge-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 18px;
    align-items: start;
    direction: ltr;
}

.currency-inventory-panel,
.currency-reforge-panel {
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.42);
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    box-shadow: inset 0 0 18px rgba(0,0,0,0.85);
    padding: 12px;
}

.currency-panel-title {
    color: var(--gold);
    font-weight: 900;
    border-bottom: 1px solid #333;
    padding-bottom: 7px;
    margin-bottom: 12px;
    text-align: center;
    direction: rtl;
}

.currency-inventory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 12px;
    max-height: calc(100vh - 230px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px;
    direction: rtl;
}

.currency-inventory-card.currency-selected {
    box-shadow: 0 0 16px rgba(212,175,55,0.72), inset 0 0 18px rgba(212,175,55,0.22);
}

.currency-reforge-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    direction: rtl;
}

.currency-item-slot {
    width: 236px;
    height: 236px;
    border: 2px solid #8b0000;
    border-radius: 7px;
    background: url('assets/ui/slot_bg.png') center/cover no-repeat;
    box-shadow: inset 0 0 26px rgba(0,0,0,0.95), 0 0 14px rgba(139,0,0,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.currency-selected-item {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
}

.currency-item-empty,
.currency-empty-note {
    color: #777;
    font-weight: 700;
    text-align: center;
}

.currency-icons-title {
    width: 100%;
    margin-top: 2px;
}

.currency-icon-grid {
    display: grid;
    grid-template-columns: repeat(5, 64px);
    grid-auto-rows: 64px;
    gap: 9px;
    justify-content: center;
}

.currency-token-slot {
    width: 64px;
    height: 64px;
    border: 1px solid #3a2a12;
    border-radius: 6px;
    background: radial-gradient(circle at 50% 35%, rgba(212,175,55,0.16), transparent 48%), url('assets/ui/slot_bg.png') center/cover no-repeat;
    box-shadow: inset 0 0 16px rgba(0,0,0,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8f7a4a;
    font-size: 0.72em;
    font-weight: 900;
    text-align: center;
    line-height: 1.1;
    position: relative;
    cursor: pointer;
    overflow: visible;
}

.currency-token-slot img {
    width: 54px;
    height: 54px;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 0 6px rgba(0,0,0,0.85));
}

.currency-token-fallback {
    display: none;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    padding: 4px;
    box-sizing: border-box;
}

.currency-token-qty {
    position: absolute;
    left: 2px;
    bottom: 1px;
    min-width: 18px;
    height: 17px;
    padding: 0 3px;
    border-radius: 4px;
    background: rgba(0,0,0,0.82);
    color: #fff;
    border: 1px solid rgba(212,175,55,0.45);
    font-size: 0.64em;
    line-height: 17px;
    text-align: center;
}

.currency-token-empty {
    opacity: 0.42;
    cursor: default;
}

.currency-token-danger {
    box-shadow: inset 0 0 16px rgba(0,0,0,0.9), 0 0 12px rgba(231,76,60,0.24);
}

.currency-token-allowed {
    border-width: 2px;
    box-shadow: inset 0 0 18px rgba(0,0,0,0.92), 0 0 14px rgba(46,204,113,0.72), 0 0 4px rgba(212,175,55,0.7);
}

.currency-token-allowed::after {
    content: '';
    position: absolute;
    inset: -4px;
    border: 1px solid rgba(46,204,113,0.62);
    border-radius: 8px;
    pointer-events: none;
}

.currency-token-slot:hover > .currency-token-tooltip {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    top: 108%;
}

.currency-selected-badges {
    position: absolute;
    right: 6px;
    bottom: 6px;
    left: 6px;
    padding: 3px 5px;
    border-radius: 4px;
    background: rgba(0,0,0,0.75);
    color: #d4af37;
    font-size: 0.68em;
    line-height: 1.25;
    text-align: center;
    z-index: 2;
}

.currency-inventory-badges,
.currency-equipped-badges,
.currency-market-badges,
.currency-wh-badges {
    position: absolute;
    right: 4px;
    left: 4px;
    bottom: 3px;
    z-index: 6;
    padding: 2px 4px;
    border-radius: 4px;
    background: rgba(0,0,0,0.78);
    color: #d4af37;
    font-size: 0.58em;
    line-height: 1.18;
    text-align: center;
    font-weight: 900;
    pointer-events: none;
}

.currency-equipped-badges {
    font-size: 0.52em;
    bottom: 2px;
    right: 2px;
    left: 2px;
}

.currency-market-badges,
.currency-wh-badges {
    font-size: 0.48em;
    bottom: 1px;
    right: 1px;
    left: 1px;
    padding: 1px 2px;
    line-height: 1.08;
}

.item-card:has(> .currency-socket-row) > .currency-inventory-badges {
    bottom: 24px;
}

.paper-slot:has(> .currency-socket-row) > .currency-equipped-badges,
.stat-tooltip:has(> .currency-socket-row) > .currency-market-badges,
.stat-tooltip:has(> .currency-socket-row) > .currency-wh-badges,
.item-card:has(> .currency-socket-row) > .currency-wh-badges {
    bottom: 22px;
}

.currency-socket-row {
    position: absolute;
    inset: 8px;
    display: block;
    z-index: 3;
    pointer-events: none;
}

.item-card > .currency-socket-row,
.paper-slot > .currency-socket-row,
.stat-tooltip > .currency-socket-row {
    inset: 4px;
}

.currency-socket-row > .currency-socket-hole {
    position: absolute;
}

.currency-socket-row > .currency-socket-hole:nth-child(1) { top: 0; left: 0; }
.currency-socket-row > .currency-socket-hole:nth-child(2) { top: 0; right: 0; }
.currency-socket-row > .currency-socket-hole:nth-child(3) { bottom: 0; left: 0; }
.currency-socket-row > .currency-socket-hole:nth-child(4) { bottom: 0; right: 0; }

.item-card > .currency-socket-row .currency-socket-hole,
.paper-slot > .currency-socket-row .currency-socket-hole,
.stat-tooltip > .currency-socket-row .currency-socket-hole {
    width: 14.7px;
    height: 14.7px;
    border-width: 1px;
}

.item-card > .currency-socket-row .currency-socket-hole.linked::after,
.paper-slot > .currency-socket-row .currency-socket-hole.linked::after,
.stat-tooltip > .currency-socket-row .currency-socket-hole.linked::after {
    display: none;
}

.currency-socket-hole {
    width: 24.15px;
    height: 24.15px;
    border-radius: 50%;
    border: 2px solid rgba(212,175,55,0.85);
    background: radial-gradient(circle at 50% 45%, rgba(0,0,0,0.94) 0 42%, rgba(80,0,0,0.85) 67%, rgba(212,175,55,0.35) 100%);
    box-shadow: inset 0 0 9px rgba(0,0,0,0.95), 0 0 7px rgba(212,175,55,0.35);
    position: relative;
    pointer-events: none;
}

.currency-socket-hole:not(.filled) {
    opacity: 0.38;
    filter: grayscale(1);
    border-color: rgba(145,145,145,0.72);
    background: radial-gradient(circle at 50% 45%, rgba(0,0,0,0.96) 0 42%, rgba(70,70,70,0.78) 67%, rgba(160,160,160,0.3) 100%);
    box-shadow: inset 0 0 9px rgba(0,0,0,0.98), 0 0 5px rgba(160,160,160,0.22);
    transition: opacity 0.16s ease, filter 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.item-card:hover > .currency-socket-row .currency-socket-hole:not(.filled),
.paper-slot:hover > .currency-socket-row .currency-socket-hole:not(.filled),
.stat-tooltip:hover > .currency-socket-row .currency-socket-hole:not(.filled),
.currency-selected-item:hover > .currency-socket-row .currency-socket-hole:not(.filled) {
    opacity: 0.95;
    filter: grayscale(0.2);
    border-color: rgba(212,175,55,0.82);
    box-shadow: inset 0 0 9px rgba(0,0,0,0.96), 0 0 7px rgba(212,175,55,0.35);
}

.currency-socket-hole.linked::after {
    display: none;
}

.currency-socket-hole.filled {
    border-color: #9b59b6;
    box-shadow: inset 0 0 8px rgba(0,0,0,0.9), 0 0 10px rgba(155,89,182,0.75);
    pointer-events: auto;
    cursor: help;
    z-index: 7;
    opacity: 1;
    filter: none;
}

.currency-socket-hole img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
    pointer-events: none;
}

.socket-rune-tooltip {
    top: auto !important;
    bottom: calc(100% + 8px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    min-width: 210px;
    max-width: 250px;
    padding: 10px 12px;
    text-align: right;
    direction: rtl;
    pointer-events: none !important;
    z-index: 2147482000 !important;
}

#game-global-tooltip {
    box-sizing: border-box;
    z-index: 2147483000 !important;
}

.item-card:has(> .currency-socket-row):hover,
.paper-slot:has(> .currency-socket-row):hover,
.stat-tooltip:has(> .currency-socket-row):hover {
    z-index: 100000 !important;
}

.rune-manage-layout,
.rune-mixer-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 18px;
    align-items: start;
    direction: ltr;
}

.rune-focus-panel,
.rune-mixer-panel {
    min-height: 100%;
}

.rune-item-slot {
    margin-bottom: 14px;
}

.rune-panel-note,
.rune-mixer-result {
    width: 100%;
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(212,175,55,0.22);
    border-radius: 6px;
    background: rgba(0,0,0,0.34);
    color: #a8a8a8;
    text-align: center;
    line-height: 1.65;
    font-size: 0.82em;
}

.rune-inventory-panel {
    margin-top: 18px;
}

.rune-gear-grid {
    max-height: calc(100vh - 290px);
}

.rune-inventory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
    gap: 12px;
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px;
    direction: rtl;
}

.rune-token-slot {
    width: 74px;
    height: 74px;
    border: 1px solid #3a2a12;
    border-radius: 6px;
    background: radial-gradient(circle at 50% 35%, rgba(155,89,182,0.18), transparent 48%), url('assets/ui/slot_bg.png') center/cover no-repeat;
    box-shadow: inset 0 0 16px rgba(0,0,0,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    overflow: visible;
}

.rune-token-slot img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 0 6px rgba(0,0,0,0.85));
}

.rune-token-slot .currency-token-fallback {
    font-size: 0.62em;
    padding: 4px;
}

.rune-token-slot .currency-token-qty {
    right: 3px;
    bottom: 3px;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    font-size: 0.66em;
}

.rune-token-allowed {
    border-width: 2px;
    box-shadow: inset 0 0 18px rgba(0,0,0,0.92), 0 0 14px rgba(155,89,182,0.72), 0 0 4px rgba(212,175,55,0.7);
}

.rune-token-allowed::after {
    content: '';
    position: absolute;
    inset: -4px;
    border: 1px solid rgba(155,89,182,0.62);
    border-radius: 8px;
    pointer-events: none;
}

.rune-token-selected {
    border-color: #f1c40f !important;
    box-shadow: inset 0 0 16px rgba(0,0,0,0.92), 0 0 16px rgba(241,196,15,0.82);
}

.rune-token-disabled {
    opacity: 0.38;
    cursor: default;
}

.rune-token-slot:hover > .currency-token-tooltip {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    top: 108%;
}

.rune-socket-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    justify-items: center;
}

.rune-socket-card {
    width: 100%;
    max-width: 96px;
    min-height: 102px;
    padding: 8px 6px 10px;
    border: 1px solid #4b3920;
    border-radius: 6px;
    background: rgba(0,0,0,0.45);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.rune-socket-card:hover {
    border-color: #c59d46;
    transform: translateY(-1px);
}

.rune-socket-card.is-selected {
    border-color: #9b59b6;
    box-shadow: 0 0 16px rgba(155,89,182,0.4), inset 0 0 14px rgba(155,89,182,0.16);
}

.rune-socket-card.is-filled {
    border-color: rgba(155,89,182,0.65);
}

.rune-socket-orb {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 2px solid rgba(212,175,55,0.85);
    background: radial-gradient(circle at 50% 45%, rgba(0,0,0,0.94) 0 42%, rgba(80,0,0,0.85) 67%, rgba(212,175,55,0.35) 100%);
    box-shadow: inset 0 0 9px rgba(0,0,0,0.95), 0 0 7px rgba(212,175,55,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.rune-socket-orb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
}

.rune-socket-label {
    color: #d4af37;
    font-size: 0.72em;
    font-weight: 900;
    text-align: center;
    line-height: 1.2;
}

.rune-socket-name {
    color: #999;
    font-size: 0.66em;
    text-align: center;
    line-height: 1.2;
    min-height: 2.4em;
}

.rune-mixer-slots {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 14px;
}

.rune-mixer-slot {
    min-height: 122px;
    border: 1px solid #4b3920;
    border-radius: 6px;
    background: rgba(0,0,0,0.45);
    box-shadow: inset 0 0 18px rgba(0,0,0,0.75);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 8px;
    text-align: center;
}

.rune-mixer-slot img {
    width: 58px;
    height: 58px;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(0,0,0,0.8));
}

.rune-mixer-slot-name {
    color: #d8d8d8;
    font-size: 0.74em;
    line-height: 1.25;
}

.rune-mixer-slot-empty {
    color: #707070;
    font-size: 0.76em;
    font-weight: 700;
}

.rune-mixer-btn {
    width: 100%;
    max-width: 220px;
    margin-top: 4px;
}

@media (max-width: 900px) {
    .currency-reforge-layout,
    .rune-manage-layout,
    .rune-mixer-layout {
        grid-template-columns: 1fr;
    }

    .currency-reforge-panel,
    .rune-focus-panel,
    .rune-mixer-panel {
        order: initial;
    }

    .rune-socket-grid {
        grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    }

    .rune-mixer-slots {
        grid-template-columns: 1fr;
    }
}

/* Currency and rune workbench layouts */
.currency-workbench-shell {
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    overflow: visible;
    direction: rtl;
}

.currency-workbench-header {
    display: grid;
    grid-template-columns: minmax(100px, auto) minmax(260px, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 2px 2px 13px;
    border-bottom: 1px solid rgba(212,175,55,0.24);
    margin-bottom: 14px;
}

.currency-workbench-header h2 {
    margin: 0;
    color: var(--gold);
    font-size: 1.25em;
    text-align: right;
}

.currency-workbench-header .currency-mode-tabs {
    margin: 0;
}

.currency-layout-switch {
    display: inline-grid;
    grid-template-columns: repeat(3, minmax(62px, 1fr));
    border: 1px solid #3e3320;
    border-radius: 6px;
    overflow: hidden;
    background: #080808;
}

.currency-layout-btn {
    min-height: 32px;
    padding: 5px 10px;
    border: 0;
    border-left: 1px solid #302719;
    background: transparent;
    color: #777;
    font-family: inherit;
    font-weight: 900;
    cursor: pointer;
}

.currency-layout-btn:last-child { border-left: 0; }
.currency-layout-btn:hover { color: #eee; background: rgba(255,255,255,0.04); }
.currency-layout-btn.is-active {
    color: #f4d77c;
    background: #241b0c;
    box-shadow: inset 0 -2px 0 #b98a2f;
}

.currency-layout-host {
    direction: ltr;
    width: 100%;
    min-width: 0;
}

.currency-reforge-layout {
    grid-template-columns: minmax(270px, 30%) minmax(0, 1fr);
    gap: 14px;
}

.currency-side-inventory {
    min-width: 0;
    direction: rtl;
    align-self: stretch;
    display: flex;
    flex-direction: column;
}

.currency-panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.currency-panel-title > b {
    color: #8e8e8e;
    font-size: 0.72em;
    white-space: nowrap;
}

.currency-side-inventory .currency-inventory-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(7, minmax(46px, 1fr));
    gap: 6px;
    max-height: none;
    overflow: hidden;
    padding: 2px;
    flex: 1 1 auto;
    align-content: start;
}

.currency-inventory-card {
    width: 100%;
    min-width: 0;
    aspect-ratio: 1;
    transition: opacity 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.currency-inventory-card .currency-inventory-badges {
    display: none;
}

.currency-inventory-card.is-transferring {
    opacity: 0.16;
    transform: scale(0.9);
}

.currency-pagination {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
    direction: ltr;
}

.currency-pagination button {
    width: 32px;
    height: 30px;
    border: 1px solid #554526;
    border-radius: 5px;
    background: #0b0b0b;
    color: #d4af37;
    font-size: 1.15em;
    cursor: pointer;
}

.currency-pagination button:hover:not(:disabled) { border-color: #d4af37; background: #18130a; }
.currency-pagination button:disabled { color: #444; border-color: #292929; cursor: default; }
.currency-pagination span { color: #8d8d8d; font-size: 0.78em; min-width: 54px; text-align: center; }
.currency-pagination span b { color: #eee; }

.currency-focus-workspace {
    display: grid;
    grid-template-columns: minmax(250px, 0.72fr) minmax(390px, 1.28fr);
    gap: 16px;
    align-items: start;
    direction: ltr;
}

.currency-item-stage,
.currency-catalog-stage {
    min-width: 0;
    direction: rtl;
}

.currency-item-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.currency-icon-grid {
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    grid-auto-rows: auto;
    gap: 11px;
    width: 100%;
    align-items: start;
}

.currency-token-slot {
    width: 100%;
    height: 122px;
    display: grid;
    grid-template-rows: 90px 26px;
    align-items: center;
    justify-items: center;
    gap: 4px;
    padding: 4px 4px 2px;
    box-sizing: border-box;
    background: #090909 url('assets/ui/slot_bg.png') center top/90px 90px no-repeat;
}

.currency-token-icon {
    width: 88px;
    height: 88px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.currency-token-slot img {
    width: 76px;
    height: 76px;
}

.currency-token-name,
.rune-token-name {
    width: 100%;
    color: #cfcfcf;
    font-size: 0.72em;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    overflow-wrap: anywhere;
}

.currency-token-slot:hover {
    transform: translateY(-1px);
    border-color: var(--currency-accent) !important;
    box-shadow: inset 0 0 18px rgba(0,0,0,0.92), 0 0 13px color-mix(in srgb, var(--currency-accent) 50%, transparent);
}

.currency-token-slot .currency-token-qty {
    left: 1px;
    bottom: 1px;
}

.currency-catalog-tooltip,
.rune-catalog-tooltip {
    box-shadow: 0 14px 34px rgba(0,0,0,0.92), 0 0 0 1px rgba(212,175,55,0.25);
}

.rune-manage-layout {
    grid-template-columns: minmax(270px, 30%) minmax(255px, 0.78fr) minmax(360px, 1.22fr);
    gap: 14px;
}

.rune-focus-panel,
.rune-catalog-panel,
.rune-mixer-panel {
    direction: rtl;
    min-width: 0;
}

.rune-inventory-panel { margin-top: 0; }

.rune-inventory-grid {
    grid-template-columns: repeat(auto-fill, minmax(94px, 1fr));
    gap: 9px;
    max-height: calc(100vh - 280px);
    padding: 3px;
}

.rune-category-heading {
    grid-column: 1 / -1;
    padding: 7px 10px;
    border-right: 3px solid currentColor;
    border-bottom: 1px solid #292929;
    background: rgba(255,255,255,0.025);
    font-size: 0.78em;
    font-weight: 900;
    text-align: right;
}

.rune-category-weapon { color: #e56b61; }
.rune-category-armor { color: #62a8db; }
.rune-category-accessory { color: #e4c65c; }

.rune-token-slot {
    width: 100%;
    height: 116px;
    display: grid;
    grid-template-rows: 82px 28px;
    align-items: center;
    justify-items: center;
    gap: 3px;
    padding: 3px;
    box-sizing: border-box;
    background: #080808;
}

.rune-token-icon {
    width: 80px;
    height: 80px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--rune-accent) 16%, #080808), #050505 68%);
}

.rune-token-slot img {
    width: 66px;
    height: 66px;
}

.rune-token-slot .currency-token-qty {
    right: auto;
    left: 2px;
    bottom: 1px;
}

.rune-token-unowned {
    opacity: 0.48;
    cursor: default;
}

.rune-token-unowned img {
    filter: grayscale(1) brightness(0.52);
}

.rune-token-unowned .rune-token-name { color: #777; }
.rune-token-slot:hover { opacity: 1; }
.rune-token-slot:hover img { filter: none; }

.rune-token-selected-count {
    position: absolute;
    right: 2px;
    top: 2px;
    min-width: 28px;
    padding: 2px 4px;
    border-radius: 4px;
    background: #241b07;
    border: 1px solid #d4af37;
    color: #f8dc7b;
    font-size: 0.62em;
    font-weight: 900;
}

.rune-mixer-layout {
    grid-template-columns: minmax(270px, 30%) minmax(0, 1fr);
    gap: 14px;
}

.rune-mixer-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 420px;
}

/* Vault: dense catalog below a centered item altar. */
#view-currencies[data-layout-mode="vault"] .currency-focus-workspace {
    grid-template-columns: 1fr;
    grid-template-areas: "item" "catalog";
}

#view-currencies[data-layout-mode="vault"] .currency-item-stage { grid-area: item; }
#view-currencies[data-layout-mode="vault"] .currency-catalog-stage { grid-area: catalog; }
#view-currencies[data-layout-mode="vault"] .currency-item-slot { width: 205px; height: 205px; }
#view-currencies[data-layout-mode="vault"] .currency-icon-grid { grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); }

#view-currencies[data-layout-mode="vault"] .rune-manage-layout {
    grid-template-columns: minmax(270px, 30%) minmax(0, 1fr);
    grid-template-areas: "inventory focus" "inventory catalog";
}

#view-currencies[data-layout-mode="vault"] .rune-manage-layout > .currency-side-inventory { grid-area: inventory; }
#view-currencies[data-layout-mode="vault"] .rune-focus-panel { grid-area: focus; }
#view-currencies[data-layout-mode="vault"] .rune-manage-layout > .rune-catalog-panel { grid-area: catalog; }
#view-currencies[data-layout-mode="vault"] .rune-focus-panel { display: grid; grid-template-columns: 230px 1fr; gap: 12px; align-items: start; }
#view-currencies[data-layout-mode="vault"] .rune-focus-panel > .currency-panel-title:first-child { grid-column: 1 / -1; }
#view-currencies[data-layout-mode="vault"] .rune-focus-panel .currency-icons-title,
#view-currencies[data-layout-mode="vault"] .rune-focus-panel .rune-panel-note { grid-column: 2; }
#view-currencies[data-layout-mode="vault"] .rune-inventory-grid { max-height: 330px; }

/* Arcane: a narrow item altar on the far right and a broad working field. */
#view-currencies[data-layout-mode="arcane"] .currency-focus-workspace {
    grid-template-columns: minmax(0, 1fr) 270px;
    grid-template-areas: "catalog item";
}

#view-currencies[data-layout-mode="arcane"] .currency-item-stage { grid-area: item; }
#view-currencies[data-layout-mode="arcane"] .currency-catalog-stage { grid-area: catalog; }
#view-currencies[data-layout-mode="arcane"] .currency-item-stage { padding: 12px; border-right: 1px solid #392913; }

#view-currencies[data-layout-mode="arcane"] .rune-manage-layout {
    grid-template-columns: minmax(270px, 30%) minmax(0, 1fr) 280px;
    grid-template-areas: "inventory catalog focus";
}

#view-currencies[data-layout-mode="arcane"] .rune-manage-layout > .currency-side-inventory { grid-area: inventory; }
#view-currencies[data-layout-mode="arcane"] .rune-manage-layout > .rune-catalog-panel { grid-area: catalog; }
#view-currencies[data-layout-mode="arcane"] .rune-focus-panel { grid-area: focus; border-color: rgba(155,89,182,0.46); }
#view-currencies[data-layout-mode="arcane"] .rune-token-slot { background: #070508; }
#view-currencies[data-layout-mode="arcane"] .rune-mixer-panel { border-color: rgba(155,89,182,0.46); }

@media (max-width: 1180px) {
    .currency-reforge-layout,
    .rune-mixer-layout { grid-template-columns: minmax(250px, 32%) minmax(0, 1fr); }
    .rune-manage-layout,
    #view-currencies[data-layout-mode="arcane"] .rune-manage-layout {
        grid-template-columns: minmax(250px, 32%) minmax(0, 1fr);
        grid-template-areas: "inventory focus" "inventory catalog";
    }
    .rune-manage-layout > .currency-side-inventory { grid-area: inventory; }
    .rune-focus-panel { grid-area: focus; }
    .rune-manage-layout > .rune-catalog-panel { grid-area: catalog; }
    .currency-focus-workspace { grid-template-columns: 230px minmax(0, 1fr); }
    .currency-icon-grid { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); }
    .rune-inventory-grid { max-height: 350px; }
}

@media (max-width: 760px) {
    .currency-workbench-header { grid-template-columns: 1fr; justify-items: stretch; }
    .currency-workbench-header h2 { text-align: center; }
    .currency-layout-switch { width: 100%; }
    .currency-reforge-layout,
    .rune-manage-layout,
    .rune-mixer-layout,
    #view-currencies[data-layout-mode="vault"] .rune-manage-layout,
    #view-currencies[data-layout-mode="arcane"] .rune-manage-layout {
        grid-template-columns: 1fr;
        grid-template-areas: none;
    }
    .currency-side-inventory,
    .rune-focus-panel,
    .rune-catalog-panel { grid-area: auto !important; }
    .currency-side-inventory .currency-inventory-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto; }
    .currency-focus-workspace,
    #view-currencies[data-layout-mode="arcane"] .currency-focus-workspace { grid-template-columns: 1fr; grid-template-areas: "item" "catalog"; }
    #view-currencies[data-layout-mode="vault"] .rune-focus-panel { display: flex; }
    .currency-item-slot { width: min(236px, 72vw); height: min(236px, 72vw); }
    .currency-icon-grid { grid-template-columns: repeat(3, minmax(88px, 1fr)); }
    .rune-inventory-grid { grid-template-columns: repeat(3, minmax(86px, 1fr)); max-height: 430px; }
}

/* Locked currency/rune layouts and premium interaction pass */
.currency-workbench-header {
    grid-template-columns: minmax(110px, auto) minmax(280px, 1fr);
}

.currency-workbench-header .currency-primary-tabs {
    justify-content: flex-start;
}

.currency-side-inventory {
    max-height: 390px;
}

.currency-side-inventory .currency-inventory-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(34px, 1fr));
    gap: 4px;
    flex: 0 0 auto;
    overflow: hidden;
}

.currency-side-inventory .currency-inventory-card {
    min-height: 34px;
}

.currency-side-inventory .gear-level-badge {
    min-width: 12px;
    height: 12px;
    padding: 0 1px;
    font-size: 0.43em;
    line-height: 12px;
}

#view-currencies[data-layout-mode="vault"] .currency-reforge-layout {
    grid-template-columns: minmax(285px, 30%) minmax(0, 1fr);
}

#view-currencies[data-layout-mode="vault"] .currency-focus-workspace {
    grid-template-columns: minmax(220px, 0.55fr) minmax(0, 1.45fr);
    grid-template-areas: "item catalog";
    min-height: 410px;
}

#view-currencies[data-layout-mode="vault"] .currency-item-slot {
    width: 218px;
    height: 218px;
}

.currency-item-slot {
    position: relative;
    isolation: isolate;
}

.currency-craft-effect {
    position: absolute;
    inset: -18px;
    z-index: 40;
    pointer-events: none;
    display: grid;
    place-items: center;
}

.currency-craft-effect > img {
    width: 62px;
    height: 62px;
    object-fit: contain;
    z-index: 3;
    animation: currencyCraftIcon 0.82s cubic-bezier(.2,.8,.2,1) both;
}

.currency-craft-ring {
    position: absolute;
    width: 68%;
    aspect-ratio: 1;
    border: 2px solid #d4af37;
    border-radius: 50%;
    box-shadow: 0 0 24px rgba(212,175,55,.7), inset 0 0 18px rgba(212,175,55,.35);
    animation: currencyCraftRing .82s ease-out both;
}

.currency-craft-flash {
    position: absolute;
    inset: 12%;
    border: 1px solid rgba(255,255,255,.8);
    box-shadow: 0 0 42px rgba(255,255,255,.72), inset 0 0 38px rgba(212,175,55,.32);
    animation: currencyCraftFlash .72s ease-out both;
}

.currency-craft-effect i {
    --angle: calc(var(--particle) * 30deg);
    position: absolute;
    width: 5px;
    height: 13px;
    border-radius: 2px;
    background: #f5d76e;
    box-shadow: 0 0 9px currentColor;
    transform: rotate(var(--angle)) translateY(-18px);
    animation: currencyCraftParticle .72s ease-out both;
}

.currency-craft-tier-4,
.currency-craft-tier-5 { color: #c57cff; }
.currency-craft-tier-4 .currency-craft-ring,
.currency-craft-tier-5 .currency-craft-ring { border-color:#b76cff; box-shadow:0 0 30px rgba(183,108,255,.82),inset 0 0 22px rgba(183,108,255,.38); }
.currency-craft-tier-5 > img { width:74px; height:74px; }
.currency-item-slot.currency-craft-success { animation: currencySlotSuccess .88s ease-out; }

@keyframes currencyCraftIcon {
    0% { opacity:0; transform:scale(.35) rotate(-20deg); }
    36% { opacity:1; transform:scale(1.16) rotate(6deg); }
    100% { opacity:0; transform:scale(.86) rotate(0); }
}
@keyframes currencyCraftRing {
    0% { opacity:0; transform:scale(.25) rotate(0); }
    45% { opacity:1; }
    100% { opacity:0; transform:scale(1.35) rotate(90deg); }
}
@keyframes currencyCraftFlash {
    0%,100% { opacity:0; transform:scale(.7); }
    35% { opacity:1; transform:scale(1); }
}
@keyframes currencyCraftParticle {
    0% { opacity:0; transform:rotate(var(--angle)) translateY(-18px) scale(.4); }
    35% { opacity:1; }
    100% { opacity:0; transform:rotate(var(--angle)) translateY(-112px) scale(1); }
}
@keyframes currencySlotSuccess {
    0%,100% { box-shadow:inset 0 0 26px rgba(0,0,0,.95),0 0 14px rgba(139,0,0,.35); }
    40% { box-shadow:inset 0 0 30px rgba(212,175,55,.25),0 0 34px rgba(212,175,55,.78); }
}

.currency-catalog-tooltip,
.rune-catalog-tooltip,
#game-global-tooltip .tooltip-panel {
    box-sizing: border-box;
    max-width: min(380px, calc(100vw - 28px)) !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
}

.rune-manage-layout {
    grid-template-columns: minmax(285px, 30%) minmax(270px, .72fr) minmax(0, 1.28fr);
}

.rune-focus-panel {
    position: relative;
    overflow: hidden;
    border-color: rgba(155,89,182,.48);
    background: #080609 url('assets/ui/slot_bg.png') center/220px 220px no-repeat;
    box-shadow: inset 0 0 32px rgba(0,0,0,.94), 0 0 18px rgba(155,89,182,.14);
}

.rune-focus-panel::after {
    content: '';
    position: absolute;
    right: 12%;
    left: 12%;
    top: 52px;
    height: 1px;
    background: #b76cff;
    box-shadow: 0 0 12px #b76cff;
    opacity: .55;
    animation: runeAltarScan 3.2s ease-in-out infinite;
    pointer-events: none;
}

.rune-focus-panel .rune-item-slot,
.rune-focus-panel .rune-socket-grid,
.rune-focus-panel .currency-panel-title,
.rune-focus-panel .rune-panel-note { position:relative; z-index:1; }

.rune-focus-panel .rune-item-slot {
    width: 205px;
    height: 205px;
    border-color: #8f55bd;
    box-shadow: inset 0 0 26px rgba(0,0,0,.95), 0 0 20px rgba(155,89,182,.32);
}

.rune-socket-orb { animation: runeSocketPulse 2.6s ease-in-out infinite; }
@keyframes runeAltarScan { 0%,100% { transform:translateY(0); opacity:.18; } 50% { transform:translateY(260px); opacity:.65; } }
@keyframes runeSocketPulse { 0%,100% { box-shadow:inset 0 0 9px rgba(0,0,0,.95),0 0 7px rgba(212,175,55,.25); } 50% { box-shadow:inset 0 0 9px rgba(0,0,0,.95),0 0 13px rgba(155,89,182,.55); } }

.rune-accessory-columns {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    direction: rtl;
}

.rune-accessory-group {
    min-width: 0;
    border: 1px solid rgba(241,196,15,.18);
    border-radius: 6px;
    background: rgba(241,196,15,.025);
    padding: 6px;
}

.rune-accessory-group .rune-category-heading { margin-bottom: 7px; }
.rune-accessory-token-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(94px, 1fr));
    gap: 8px;
}

.rune-mixer-layout {
    grid-template-columns: minmax(280px, .68fr) minmax(480px, 1.32fr);
    grid-template-areas: "mixer catalog";
}

.rune-mixer-layout > .rune-mixer-catalog { grid-area:catalog; }
.rune-mixer-layout > .rune-mixer-panel { grid-area:mixer; }
.rune-mixer-panel { min-height: 330px; }
.rune-mixer-panel .rune-mixer-slots {
    max-width: 330px;
    gap: 8px;
}
.rune-mixer-panel .rune-mixer-slot {
    min-height: 96px;
    padding: 7px 5px;
}
.rune-mixer-panel .rune-mixer-slot img { width:46px; height:46px; }
.rune-mixer-catalog .rune-inventory-grid { max-height: 510px; }

/* Dynamic training cards */
.training-dynamic-page {
    padding: 16px;
    overflow: hidden;
    background: #080808;
}

.training-dynamic-header { margin-top:0; }

#training-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.training-stat-card.train-row {
    --training-accent:#c63d3d;
    position: relative;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-areas: "icon info" "actions actions";
    align-items: start;
    gap: 10px 12px;
    min-height: 190px;
    margin: 0;
    padding: 14px;
    box-sizing: border-box;
    border: 1px solid color-mix(in srgb, var(--training-accent) 45%, #252525);
    border-radius: 7px;
    background: #0a0a0a;
    box-shadow: inset 0 0 22px rgba(0,0,0,.85);
}

.training-stat-card[data-training-stat="str"] { --training-accent:#d55242; }
.training-stat-card[data-training-stat="skl"] { --training-accent:#c99335; }
.training-stat-card[data-training-stat="hrd"] { --training-accent:#4c89b8; }
.training-stat-card[data-training-stat="sta"] { --training-accent:#43a66a; }
.training-stat-card[data-training-stat="acc"] { --training-accent:#b35eaa; }
.training-stat-card[data-training-stat="int"] { --training-accent:#6b78c7; }

.training-stat-icon {
    grid-area: icon;
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border: 1px solid var(--training-accent);
    border-radius: 6px;
    color: #fff;
    background: #111;
    box-shadow: inset 0 0 14px rgba(0,0,0,.8),0 0 12px color-mix(in srgb,var(--training-accent) 35%,transparent);
    font-size: 1.65em;
}
.training-stat-icon img {
    width:78%;
    height:78%;
    object-fit:contain;
    display:block;
}

.training-stat-card .train-info { grid-area:info; min-width:0; }
.training-stat-heading { display:flex; justify-content:space-between; align-items:center; gap:8px; color:var(--training-accent); font-weight:900; }
.training-stat-heading b { color:#777; font-size:.68em; }
.training-stat-description { min-height:2.8em; margin:5px 0 9px; color:#aaa; font-size:.78em; line-height:1.5; }
.training-stat-values { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin-bottom:8px; }
.training-stat-values span { padding:4px; border:1px solid #272727; border-radius:4px; color:#777; font-size:.66em; text-align:center; }
.training-stat-values b { display:block; color:#eee; font-size:1.18em; }

.training-stat-card .train-progress-container {
    height: 17px;
    border-radius: 5px;
    border-color: color-mix(in srgb,var(--training-accent) 45%,#333);
    background:#050505;
    box-shadow: inset 0 0 8px #000;
}

.training-stat-card .train-progress-bar {
    position: relative;
    background: var(--training-accent);
    box-shadow: 0 0 13px color-mix(in srgb,var(--training-accent) 78%,transparent);
    animation: trainingBarGlow 1.9s ease-in-out infinite;
}

.training-stat-card .train-progress-bar::after {
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.48),transparent);
    animation:trainingBarSweep 2.1s linear infinite;
}

.training-stat-card .train-progress-text { line-height:17px; }
.training-stat-card .train-actions { grid-area:actions; margin:0; display:grid !important; grid-template-columns:1fr 96px; }
.training-stat-card .train-actions .btn { min-height:34px; }

@keyframes trainingBarGlow { 0%,100% { filter:brightness(.82); } 50% { filter:brightness(1.22); } }
@keyframes trainingBarSweep { from { transform:translateX(-120%); } to { transform:translateX(120%); } }

@media (max-width: 980px) {
    #training-list { grid-template-columns:1fr; }
    .rune-accessory-columns { grid-template-columns:1fr; }
    .rune-mixer-layout { grid-template-columns:1fr; grid-template-areas:"catalog" "mixer"; }
}

@media (max-width: 760px) {
    .currency-workbench-header { grid-template-columns:1fr; }
    .currency-workbench-header .currency-primary-tabs { justify-content:center; }
    .currency-side-inventory { max-height:390px; }
    .currency-side-inventory .currency-inventory-grid { grid-template-columns:repeat(7,minmax(0,1fr)); grid-template-rows:repeat(4,minmax(42px,1fr)); }
    #view-currencies[data-layout-mode="vault"] .currency-focus-workspace { grid-template-columns:1fr; grid-template-areas:"item" "catalog"; }
    .training-stat-card.train-row { grid-template-columns:48px minmax(0,1fr); padding:11px; }
    .training-stat-icon { width:46px; height:46px; }
}

/* Training theme laboratory - test channel */
.training-dynamic-page {
    --training-frame:#59452b;
    --training-surface:#0b0b0b;
    --training-surface-2:#11100e;
    --training-muted:#9b958a;
    --training-action:#d4af37;
    position:relative;
    padding:14px;
    border-color:var(--training-frame);
    background:var(--training-surface);
    transition:border-color .25s ease,background-color .25s ease,box-shadow .25s ease;
}

.training-dynamic-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin:0 0 10px;
    padding:0 0 10px;
    border-bottom:1px solid color-mix(in srgb,var(--training-frame) 55%,#222);
}
.training-title-block h2 { margin:0; color:#eee; font-size:1.12em; letter-spacing:0; }
.training-title-block > span { display:block; margin-top:3px; color:var(--training-muted); font-size:.72em; }
.training-fast-toggle {
    display:flex;
    align-items:center;
    gap:7px;
    min-height:28px;
    padding:3px 8px;
    border:1px solid color-mix(in srgb,var(--training-frame) 55%,#292929);
    border-radius:5px;
    color:#aaa;
    background:#080808;
    cursor:pointer;
    font-size:.72em;
}

.training-theme-picker {
    display:grid;
    grid-template-columns:repeat(5,minmax(88px,1fr));
    gap:5px;
    margin-bottom:10px;
    padding:5px;
    border:1px solid #242424;
    border-radius:5px;
    background:#060606;
}
.training-theme-btn {
    min-height:29px;
    border:1px solid #303030;
    border-radius:4px;
    color:#888;
    background:#0d0d0d;
    cursor:pointer;
    font:700 .72em Cairo,sans-serif;
    letter-spacing:0;
    transition:color .18s ease,border-color .18s ease,box-shadow .18s ease,background-color .18s ease;
}
.training-theme-btn:hover { color:#eee; border-color:var(--training-frame); }
.training-theme-btn.is-active {
    color:#fff;
    border-color:var(--training-action);
    background:color-mix(in srgb,var(--training-action) 14%,#090909);
    box-shadow:inset 0 0 10px rgba(0,0,0,.72),0 0 8px color-mix(in srgb,var(--training-action) 35%,transparent);
}

#training-list { gap:9px; }
.training-stat-card.train-row {
    min-height:164px;
    grid-template-columns:50px minmax(0,1fr);
    gap:7px 10px;
    padding:11px;
    border-color:color-mix(in srgb,var(--training-accent) 38%,var(--training-frame));
    background:var(--training-surface-2);
    box-shadow:inset 0 0 18px rgba(0,0,0,.78);
    transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.training-stat-card.train-row:hover {
    transform:translateY(-1px);
    border-color:var(--training-accent);
    box-shadow:inset 0 0 20px rgba(0,0,0,.82),0 0 10px color-mix(in srgb,var(--training-accent) 20%,transparent);
}
.training-stat-icon { width:48px; height:48px; font-size:1.32em; }
.training-stat-description { min-height:auto; margin:3px 0 6px; font-size:.71em; }
.training-stat-values { margin-bottom:6px; }
.training-stat-values span { padding:3px; }

.training-stat-card .train-progress-container {
    height:14px;
    overflow:hidden;
    border-radius:3px;
    border:1px solid color-mix(in srgb,var(--training-accent) 42%,#292929);
    background:#030303;
    box-shadow:inset 0 0 7px #000;
}
.training-stat-card .train-progress-bar {
    min-width:0;
    background:var(--training-accent);
    box-shadow:0 0 12px color-mix(in srgb,var(--training-accent) 78%,transparent);
    animation:trainingFillPulse 1.2s ease-in-out infinite;
    transition:width .35s cubic-bezier(.2,.75,.25,1);
}
.training-stat-card .train-progress-bar::after {
    background:linear-gradient(90deg,transparent 0,rgba(255,255,255,.12) 35%,rgba(255,255,255,.78) 50%,rgba(255,255,255,.12) 65%,transparent 100%);
    animation:trainingBarSweep 1.65s linear infinite;
}
.training-stat-card .train-progress-text { line-height:14px; font-size:.66em; }
.training-stat-card.is-capped .train-progress-bar {
    background:#d4af37;
    box-shadow:0 0 15px rgba(212,175,55,.7);
}
.training-stat-card.is-capped .train-progress-container { border-color:#d4af37; }

.training-stat-card .train-actions {
    display:flex !important;
    grid-template-columns:none;
    justify-content:flex-end;
    gap:5px !important;
    min-height:28px;
}
.training-stat-card .train-actions .train-upgrade-btn {
    width:auto;
    min-width:132px;
    min-height:27px;
    padding:3px 9px;
    border-color:color-mix(in srgb,var(--training-accent) 62%,#333);
    color:#ddd;
    background:#0b0b0b;
    font-size:.68em;
    line-height:1.2;
}
.training-stat-card .train-actions .train-upgrade-ten {
    min-width:112px;
    border-color:#9d6b27;
    color:#e7b766;
}
.training-stat-card.is-capped .train-upgrade-btn { opacity:.45; filter:grayscale(.6); }

@keyframes trainingFillPulse {
    0%,100% { filter:brightness(.72); box-shadow:0 0 5px color-mix(in srgb,var(--training-accent) 45%,transparent); }
    50% { filter:brightness(1.35); box-shadow:0 0 16px color-mix(in srgb,var(--training-accent) 90%,transparent); }
}

/* 1: forged iron */
.training-dynamic-page[data-training-theme="forge"] {
    --training-frame:#665034;
    --training-surface:#090909;
    --training-surface-2:#11100e;
    --training-muted:#9a9285;
    --training-action:#d19b47;
    box-shadow:inset 0 0 34px #000;
}
.training-dynamic-page[data-training-theme="forge"] .training-stat-card { border-left-width:3px; }

/* 2: blood ritual */
.training-dynamic-page[data-training-theme="blood"] {
    --training-frame:#721f27;
    --training-surface:#0d0607;
    --training-surface-2:#14090b;
    --training-muted:#b49396;
    --training-action:#cf3341;
    box-shadow:inset 0 0 38px rgba(75,0,8,.45);
}
.training-dynamic-page[data-training-theme="blood"] .training-stat-card { border-right-width:4px; }
.training-dynamic-page[data-training-theme="blood"] .training-stat-icon { border-radius:50%; }

/* 3: arcane workshop */
.training-dynamic-page[data-training-theme="arcane"] {
    --training-frame:#72509b;
    --training-surface:#09070d;
    --training-surface-2:#100c16;
    --training-muted:#aaa0ba;
    --training-action:#9d6ce2;
    box-shadow:inset 0 0 35px rgba(76,36,112,.35);
}
.training-dynamic-page[data-training-theme="arcane"] .training-stat-card { border-style:double; }
.training-dynamic-page[data-training-theme="arcane"] .training-stat-icon {
    border-radius:0;
    clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
    text-shadow:0 0 8px currentColor;
    line-height:1;
}

/* 4: royal discipline */
.training-dynamic-page[data-training-theme="royal"] {
    --training-frame:#997c32;
    --training-surface:#0b0b09;
    --training-surface-2:#12110c;
    --training-muted:#b0a681;
    --training-action:#e0bd52;
    box-shadow:inset 0 0 36px rgba(116,89,19,.24);
}
.training-dynamic-page[data-training-theme="royal"] .training-stat-card { border-top-color:#a88a3e; }
.training-dynamic-page[data-training-theme="royal"] .training-stat-heading { color:#e0bd52; }

/* 5: tactical ledger */
.training-dynamic-page[data-training-theme="tactical"] {
    --training-frame:#427464;
    --training-surface:#070b0a;
    --training-surface-2:#0b1210;
    --training-muted:#8fa8a0;
    --training-action:#4ca889;
    box-shadow:inset 0 0 32px rgba(25,75,60,.28);
}
.training-dynamic-page[data-training-theme="tactical"] #training-list { grid-template-columns:1fr; gap:6px; }
.training-dynamic-page[data-training-theme="tactical"] .training-stat-card.train-row {
    min-height:112px;
    grid-template-columns:44px minmax(0,1fr) auto;
    grid-template-areas:"icon info actions";
    align-items:center;
}
.training-dynamic-page[data-training-theme="tactical"] .training-stat-icon { width:42px; height:42px; }
.training-dynamic-page[data-training-theme="tactical"] .train-actions { align-self:center; }

@media (max-width: 760px) {
    .training-dynamic-header { align-items:flex-start; flex-direction:column; }
    .training-theme-picker { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .training-stat-card .train-actions { justify-content:flex-end; }
    .training-stat-card .train-actions .train-upgrade-btn { flex:0 1 auto; min-width:118px; }
    .training-dynamic-page[data-training-theme="tactical"] .training-stat-card.train-row {
        grid-template-columns:44px minmax(0,1fr);
        grid-template-areas:"icon info" "actions actions";
    }
}

/* Training layouts - structural theme pass */
.training-theme-summary {
    min-height:24px;
    margin:0 0 9px;
    padding:5px 9px;
    border-right:3px solid var(--training-action);
    color:#a8a39a;
    background:#080808;
    font-size:.7em;
    line-height:1.55;
}

.training-theme-picker {
    border-radius:2px;
    border-color:#292929;
    padding:3px;
}
.training-theme-btn {
    position:relative;
    min-height:31px;
    border-radius:2px;
    background:#0d0d0d;
    box-shadow:none;
}
.training-theme-btn::after {
    content:'';
    position:absolute;
    right:18%;
    bottom:-1px;
    left:18%;
    height:2px;
    background:transparent;
}
.training-theme-btn.is-active {
    color:#f2ead8;
    border-color:#6a604d;
    background:#171510;
    box-shadow:none;
}
.training-theme-btn.is-active::after { background:var(--training-action); }

.training-stat-card.train-row {
    min-height:242px;
    grid-template-columns:52px minmax(0,1fr);
    grid-template-areas:"icon info" "actions actions";
    border-radius:3px;
    box-shadow:inset 0 0 18px rgba(0,0,0,.74);
}
.training-stat-card.train-row:hover {
    transform:none;
    box-shadow:inset 0 0 18px rgba(0,0,0,.82);
}
.training-stat-heading { font-size:.94em; }
.training-stat-description { color:#b4b0a8; }
.training-combat-detail {
    display:grid;
    gap:4px;
    margin:6px 0 7px;
    min-width:0;
}
.training-rule-line,
.training-example-line {
    display:grid;
    grid-template-columns:66px minmax(0,1fr);
    align-items:start;
    gap:7px;
    min-width:0;
    padding:5px 6px;
    border:1px solid #252525;
    background:#090909;
    color:#aaa;
    font-size:.66em;
    line-height:1.55;
}
.training-rule-line b,
.training-example-line b { color:#d0c5ab; font-size:.94em; }
.training-rule-line span,
.training-example-line span { min-width:0; overflow-wrap:anywhere; }
.training-example-line { border-right:2px solid var(--training-accent); color:#c3c0b9; }

.training-stat-card .train-actions {
    display:flex !important;
    justify-content:flex-end;
    gap:6px !important;
    min-height:38px;
}
.train-command {
    display:grid;
    grid-template-columns:34px minmax(82px,1fr);
    align-items:stretch;
    min-width:138px;
    height:36px;
    padding:0;
    border:1px solid #4a453c;
    border-radius:2px;
    color:#ddd5c4;
    background:#11100e;
    box-shadow:inset 0 1px rgba(255,255,255,.035),inset 0 -1px rgba(0,0,0,.8);
    cursor:pointer;
    font-family:Cairo,sans-serif;
    letter-spacing:0;
    transition:border-color .15s ease,background-color .15s ease,color .15s ease;
}
.train-command:hover:not(:disabled) { border-color:#8d8068; color:#fff; background:#181611; }
.train-command:active:not(:disabled) { background:#090909; }
.train-command:disabled { cursor:not-allowed; opacity:.42; filter:grayscale(.7); }
.train-command-mark {
    display:grid;
    place-items:center;
    border-left:1px solid #4a453c;
    color:#e2be68;
    background:#080808;
    font:900 .88em Arial,sans-serif;
}
.train-command-copy {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:2px 7px;
    white-space:nowrap;
}
.train-command-copy b { font-size:.66em; }
.train-command-copy small { color:#a89467; font-size:.58em; }
.train-command-ten { border-color:#55452f; }
.train-command-ten .train-command-mark { color:#ca934c; }

/* Forge: paired metal work orders. */
.training-dynamic-page[data-training-theme="forge"] #training-list {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
}
.training-dynamic-page[data-training-theme="forge"] .training-stat-card {
    border-top:2px solid #4f4435;
    border-left:1px solid #302b25;
}
.training-dynamic-page[data-training-theme="forge"] .training-stat-icon {
    border-radius:2px;
    background:#15120e;
    box-shadow:inset 0 0 0 3px #090909;
}

/* Blood: a single vertical progression path with side controls. */
.training-dynamic-page[data-training-theme="blood"] #training-list {
    display:grid;
    grid-template-columns:1fr;
    gap:7px;
    padding-right:14px;
    border-right:1px solid #5d1b23;
}
.training-dynamic-page[data-training-theme="blood"] .training-stat-card.train-row {
    min-height:178px;
    grid-template-columns:52px minmax(0,1fr) 286px;
    grid-template-areas:"icon info actions";
    align-items:center;
    border-right:4px solid #7d202a;
    border-left:1px solid #291418;
}
.training-dynamic-page[data-training-theme="blood"] .training-stat-card::before {
    content:'';
    position:absolute;
    right:-22px;
    top:50%;
    width:9px;
    height:9px;
    border:2px solid #7d202a;
    border-radius:50%;
    background:#0d0607;
}
.training-dynamic-page[data-training-theme="blood"] .train-actions {
    flex-direction:column;
    align-items:stretch;
}
.training-dynamic-page[data-training-theme="blood"] .train-command { width:100%; }
.training-dynamic-page[data-training-theme="blood"] .train-command-mark { color:#d4636c; }

/* Arcane: six centered seals. */
.training-dynamic-page[data-training-theme="arcane"] #training-list {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:9px;
}
.training-dynamic-page[data-training-theme="arcane"] .training-stat-card.train-row {
    min-height:338px;
    grid-template-columns:1fr;
    grid-template-areas:"icon" "info" "actions";
    justify-items:center;
    text-align:center;
    border:1px solid #4d3a67;
}
.training-dynamic-page[data-training-theme="arcane"] .training-stat-icon { margin:2px auto; }
.training-dynamic-page[data-training-theme="arcane"] .train-info { width:100%; }
.training-dynamic-page[data-training-theme="arcane"] .training-stat-heading { justify-content:center; flex-direction:column; gap:1px; }
.training-dynamic-page[data-training-theme="arcane"] .training-rule-line,
.training-dynamic-page[data-training-theme="arcane"] .training-example-line {
    display:block;
    text-align:right;
}
.training-dynamic-page[data-training-theme="arcane"] .training-rule-line b,
.training-dynamic-page[data-training-theme="arcane"] .training-example-line b { display:block; margin-bottom:2px; }
.training-dynamic-page[data-training-theme="arcane"] .train-actions { width:100%; justify-content:center; }
.training-dynamic-page[data-training-theme="arcane"] .train-command-mark { color:#bba1dd; }

/* Royal: a three-column command ledger with framed headings. */
.training-dynamic-page[data-training-theme="royal"] #training-list {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
}
.training-dynamic-page[data-training-theme="royal"] .training-stat-card.train-row {
    min-height:312px;
    grid-template-columns:48px minmax(0,1fr);
    border:1px solid #35322d;
    background:#0b0b0a;
    box-shadow:inset 0 1px rgba(255,255,255,.025),inset 0 0 18px rgba(0,0,0,.8);
}
.training-dynamic-page[data-training-theme="royal"] .training-stat-card.train-row:hover { border-color:#504b42; }
.training-dynamic-page[data-training-theme="royal"] .training-stat-heading { color:var(--training-accent); }
.training-dynamic-page[data-training-theme="royal"] .training-stat-icon {
    border-color:#3b3832;
    background:#10100f;
    box-shadow:inset 0 0 0 2px #080808,inset 0 0 12px rgba(255,255,255,.025);
}
.training-dynamic-page[data-training-theme="royal"] .training-stat-values span { border-color:#2f2e2b; background:#0e0e0d; }
.training-dynamic-page[data-training-theme="royal"] .training-rule-line,
.training-dynamic-page[data-training-theme="royal"] .training-example-line { border-color:#292826; border-right-width:1px; }
.training-dynamic-page[data-training-theme="royal"] .training-stat-card .train-progress-container { border-color:#34322e; }
.training-dynamic-page[data-training-theme="royal"] .train-actions { justify-content:center; }
.training-dynamic-page[data-training-theme="royal"] .train-command {
    min-width:145px;
    height:39px;
    border-color:#514a3c;
    border-radius:3px;
    color:#e1dccf;
    background:linear-gradient(180deg,#1b1915,#100f0d);
    box-shadow:inset 0 1px rgba(255,255,255,.075),inset 0 -2px rgba(0,0,0,.55),0 2px 4px rgba(0,0,0,.3);
    transition:transform .12s ease,border-color .15s ease,background-color .15s ease;
}
.training-dynamic-page[data-training-theme="royal"] .train-command:hover:not(:disabled) {
    transform:translateY(-1px);
    border-color:#756b55;
    background:linear-gradient(180deg,#242019,#14120f);
}
.training-dynamic-page[data-training-theme="royal"] .train-command:active:not(:disabled) {
    transform:translateY(1px);
    box-shadow:inset 0 2px 4px rgba(0,0,0,.65);
}
.training-dynamic-page[data-training-theme="royal"] .train-command-mark {
    color:#d9bd75;
    border-left-color:#514a3c;
    background:#0b0b0a;
    font-size:1em;
}
.training-dynamic-page[data-training-theme="royal"] .train-command-copy b { font-size:.7em; }
.training-dynamic-page[data-training-theme="royal"] .train-command-copy small { color:#b6a77f; }

/* Tactical: dense full-width combat report rows. */
.training-dynamic-page[data-training-theme="tactical"] #training-list {
    display:grid;
    grid-template-columns:1fr;
    gap:5px;
}
.training-dynamic-page[data-training-theme="tactical"] .training-stat-card.train-row {
    min-height:164px;
    grid-template-columns:44px minmax(0,1fr) 286px;
    grid-template-areas:"icon info actions";
    align-items:center;
    border-radius:0;
    border-right:3px solid #477867;
}
.training-dynamic-page[data-training-theme="tactical"] .training-stat-icon { width:40px; height:40px; border-radius:0; box-shadow:none; }
.training-dynamic-page[data-training-theme="tactical"] .training-combat-detail { grid-template-columns:1fr 1fr; }
.training-dynamic-page[data-training-theme="tactical"] .train-actions { flex-direction:column; align-items:stretch; }
.training-dynamic-page[data-training-theme="tactical"] .train-command { width:100%; border-radius:0; }
.training-dynamic-page[data-training-theme="tactical"] .train-command-mark { color:#73a995; }

@media (max-width: 1180px) {
    .training-dynamic-page[data-training-theme="arcane"] #training-list,
    .training-dynamic-page[data-training-theme="royal"] #training-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .training-dynamic-page[data-training-theme="blood"] .training-stat-card.train-row,
    .training-dynamic-page[data-training-theme="tactical"] .training-stat-card.train-row {
        grid-template-columns:48px minmax(0,1fr);
        grid-template-areas:"icon info" "actions actions";
    }
    .training-dynamic-page[data-training-theme="blood"] .train-actions,
    .training-dynamic-page[data-training-theme="tactical"] .train-actions { flex-direction:row; justify-content:flex-end; }
    .training-dynamic-page[data-training-theme="blood"] .train-command,
    .training-dynamic-page[data-training-theme="tactical"] .train-command { width:auto; }
}

@media (max-width: 760px) {
    .training-dynamic-page[data-training-theme="forge"] #training-list,
    .training-dynamic-page[data-training-theme="arcane"] #training-list,
    .training-dynamic-page[data-training-theme="royal"] #training-list { grid-template-columns:1fr; }
    .training-stat-card.train-row,
    .training-dynamic-page[data-training-theme="arcane"] .training-stat-card.train-row,
    .training-dynamic-page[data-training-theme="royal"] .training-stat-card.train-row { min-height:0; }
    .training-rule-line,
    .training-example-line { grid-template-columns:58px minmax(0,1fr); }
    .training-dynamic-page[data-training-theme="tactical"] .training-combat-detail { grid-template-columns:1fr; }
    .train-command { min-width:118px; }
    .train-command-copy { gap:3px; padding:2px 5px; }
}

/* Abyss Region */
.abyss-page {
    position: relative;
    min-height: calc(100vh - 115px);
    overflow: hidden;
    border: 1px solid rgba(111,60,255,0.35);
    border-radius: 8px;
    background: #030107;
    color: #e8ddff;
    font-family: Cairo, sans-serif;
    isolation: isolate;
}

.abyss-bg-img,
.abyss-background,
.abyss-fog-layer,
.abyss-particle-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.abyss-bg-img {
    z-index: -4;
    background-size: cover;
    background-position: center;
    opacity: 0.2;
}

.abyss-background {
    z-index: -3;
    background:
        radial-gradient(circle at 50% 20%, rgba(112,54,255,0.28), transparent 28%),
        radial-gradient(circle at 18% 66%, rgba(145,0,45,0.24), transparent 24%),
        linear-gradient(180deg, rgba(4,0,12,0.96), rgba(0,0,0,0.98) 58%, rgba(18,0,24,0.96));
}

.abyss-fog-layer {
    z-index: -2;
    opacity: 0.75;
    background:
        radial-gradient(ellipse at 20% 30%, rgba(134,86,255,0.18), transparent 36%),
        radial-gradient(ellipse at 80% 70%, rgba(70,0,90,0.28), transparent 34%),
        repeating-linear-gradient(102deg, transparent 0 42px, rgba(190,160,255,0.035) 43px 88px);
    animation: abyssFogDrift 18s ease-in-out infinite alternate;
}

.abyss-particle-layer {
    z-index: -1;
    background-image:
        radial-gradient(circle, rgba(214,190,255,0.5) 0 1px, transparent 2px),
        radial-gradient(circle, rgba(180,0,80,0.4) 0 1px, transparent 2px);
    background-size: 76px 76px, 119px 119px;
    animation: abyssParticles 16s linear infinite;
}

.abyss-header {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    padding: 18px 22px 12px;
    border-bottom: 1px solid rgba(145,110,255,0.2);
}

.abyss-kicker {
    color: #a98cff;
    font-size: 0.75em;
    font-weight: 900;
    letter-spacing: 0;
}

.abyss-title {
    margin: 0;
    color: #eee7ff;
    font-size: 2.1em;
    line-height: 1.1;
    text-shadow: 0 0 18px rgba(125,80,255,0.7), 0 2px 0 #000;
}

.abyss-subtitle {
    margin-top: 4px;
    color: #b9a6e8;
    font-size: 0.9em;
}

.abyss-header-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(82px, 1fr));
    gap: 8px;
}

.abyss-header-stats div,
.abyss-stat-line,
.abyss-preview-card {
    border: 1px solid rgba(148,112,255,0.22);
    background: linear-gradient(145deg, rgba(10,4,20,0.82), rgba(0,0,0,0.72));
    border-radius: 6px;
    box-shadow: inset 0 0 18px rgba(0,0,0,0.5);
}

.abyss-header-stats div {
    padding: 8px 10px;
    text-align: center;
}

.abyss-header-stats span {
    display: block;
    color: #f2d37a;
    font-weight: 900;
}

.abyss-header-stats small {
    display: block;
    color: #817099;
    font-size: 0.7em;
}

.abyss-layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(190px, 0.72fr) minmax(430px, 2.1fr) minmax(230px, 0.9fr);
    gap: 14px;
    padding: 14px;
}

.abyss-panel {
    border: 1px solid rgba(111,60,255,0.32);
    border-radius: 8px;
    padding: 14px;
    background: linear-gradient(180deg, rgba(9,3,18,0.86), rgba(2,0,7,0.92));
    box-shadow: inset 0 0 28px rgba(0,0,0,0.62), 0 0 22px rgba(80,40,180,0.12);
}

.abyss-panel-title {
    color: #d9c8ff;
    font-weight: 900;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(150,115,255,0.22);
    padding-bottom: 8px;
}

.abyss-stat-line,
.abyss-preview-card {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 10px;
    margin-bottom: 8px;
    color: #8d7ca8;
    font-size: 0.82em;
}

.abyss-stat-line b,
.abyss-preview-card b {
    color: #f1d27a;
}

.abyss-preview-card.muted b {
    color: #b7a9cf;
    font-size: 0.9em;
}

.abyss-log {
    margin-top: 14px;
    max-height: 150px;
    overflow: auto;
    color: #8f80a9;
    font-size: 0.78em;
    line-height: 1.7;
}

.abyss-map-shell {
    min-height: 620px;
}

.abyss-map {
    position: relative;
    height: 100%;
    min-height: 620px;
    border: 1px solid rgba(158,120,255,0.28);
    border-radius: 8px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 12%, rgba(147,87,255,0.22), transparent 24%),
        linear-gradient(180deg, rgba(12,6,22,0.78), rgba(0,0,0,0.92));
    box-shadow: inset 0 0 60px rgba(0,0,0,0.9), 0 0 28px rgba(77,34,160,0.15);
}

.abyss-descent-map {
    min-height: 720px;
    background:
        linear-gradient(90deg, rgba(0,0,0,0.94), rgba(28,10,48,0.7) 18%, rgba(7,1,16,0.92) 50%, rgba(30,8,48,0.72) 82%, rgba(0,0,0,0.96)),
        radial-gradient(ellipse at 50% 8%, rgba(143,94,255,0.24), transparent 28%),
        radial-gradient(ellipse at 50% 96%, rgba(220,50,110,0.28), transparent 30%);
}

.abyss-map-asset,
.abyss-map-vignette {
    position: absolute;
    inset: 0;
}

.abyss-map-asset {
    background-size: cover;
    background-position: center;
    opacity: 0.16;
    filter: saturate(0.9) contrast(1.12);
}

.abyss-map-vignette {
    background:
        radial-gradient(ellipse at 50% 45%, transparent 26%, rgba(0,0,0,0.42) 72%, rgba(0,0,0,0.86) 100%),
        repeating-linear-gradient(90deg, transparent 0 68px, rgba(134,86,255,0.04) 69px 70px);
}

.abyss-shaft-core {
    position: absolute;
    top: 5%;
    bottom: 5%;
    right: 21%;
    left: 21%;
    border-inline: 1px solid rgba(166,128,255,0.18);
    background:
        radial-gradient(ellipse at 50% 0%, rgba(196,172,255,0.12), transparent 20%),
        linear-gradient(180deg, rgba(72,26,120,0.2), rgba(0,0,0,0.18) 45%, rgba(124,16,74,0.18)),
        repeating-linear-gradient(180deg, rgba(255,255,255,0.028) 0 1px, transparent 1px 54px);
    box-shadow: inset 0 0 55px rgba(0,0,0,0.92), 0 0 38px rgba(90,48,180,0.18);
    clip-path: polygon(18% 0, 82% 0, 95% 100%, 5% 100%);
}

.abyss-shaft-core::before,
.abyss-shaft-core::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 42%;
    opacity: 0.48;
    background:
        linear-gradient(140deg, transparent 0 26%, rgba(210,180,255,0.07) 27% 28%, transparent 29% 100%),
        repeating-linear-gradient(115deg, rgba(0,0,0,0.0) 0 36px, rgba(130,100,160,0.08) 37px 39px, rgba(0,0,0,0.0) 40px 82px);
}

.abyss-shaft-core::before {
    right: 0;
}

.abyss-shaft-core::after {
    left: 0;
    transform: scaleX(-1);
}

.abyss-depth-ruler {
    position: absolute;
    inset: 7% auto 7% 14px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: rgba(217,200,255,0.52);
    font-size: 0.68em;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    border-right: 1px solid rgba(217,200,255,0.18);
    padding-right: 8px;
}

.abyss-final-throne-glow {
    position: absolute;
    z-index: 1;
    right: 35%;
    left: 35%;
    bottom: 1%;
    height: 18%;
    background: radial-gradient(ellipse at 50% 80%, rgba(220,50,110,0.32), rgba(128,70,255,0.16) 45%, transparent 72%);
    filter: blur(6px);
    animation: abyssThroneBreathe 3.6s ease-in-out infinite;
}

.abyss-node-line {
    position: absolute;
    height: 2px;
    transform-origin: right center;
    background: rgba(65,48,95,0.65);
    box-shadow: 0 0 8px rgba(90,70,130,0.3);
    z-index: 2;
}

.abyss-node-line--active {
    background: linear-gradient(90deg, rgba(200,0,90,0.85), rgba(174,137,255,0.85));
    box-shadow: 0 0 12px rgba(148,90,255,0.75);
    animation: abyssLinePulse 2.2s ease-in-out infinite;
}

.abyss-node {
    position: absolute;
    z-index: 4;
    width: 44px;
    height: 44px;
    transform: translate(50%, -50%);
    border: 1px solid rgba(160,130,255,0.55);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(30,12,52,0.96), rgba(0,0,0,0.94));
    color: #d9c8ff;
    cursor: pointer;
    box-shadow: inset 0 0 14px rgba(0,0,0,0.85), 0 0 15px rgba(112,54,255,0.25);
}

.abyss-descent-map .abyss-node {
    border-radius: 12px 12px 18px 18px;
    background:
        radial-gradient(circle at 50% 38%, rgba(190,160,255,0.18), transparent 35%),
        linear-gradient(180deg, rgba(28,12,48,0.98), rgba(3,0,8,0.98));
    transform: translate(50%, -50%) rotate(45deg);
}

.abyss-descent-map .abyss-node-core {
    transform: rotate(-45deg);
}

.abyss-descent-map .abyss-tooltip {
    transform: translateX(50%) rotate(-45deg);
}

.abyss-descent-map .abyss-node:hover .abyss-tooltip {
    transform: translateX(50%) translateY(-2px) rotate(-45deg);
}

.abyss-node-core {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    text-shadow: 0 0 8px currentColor;
}

.abyss-node--unlocked {
    color: #d9c8ff;
    animation: abyssNodePulse 1.9s ease-in-out infinite;
}

.abyss-node--locked {
    opacity: 0.42;
    cursor: not-allowed;
    filter: grayscale(1);
}

.abyss-node--completed {
    color: #f1d27a;
    border-color: rgba(241,210,122,0.85);
    box-shadow: inset 0 0 14px rgba(0,0,0,0.85), 0 0 15px rgba(241,210,122,0.35);
}

.abyss-node--boss,
.abyss-node--final-boss {
    width: 54px;
    height: 54px;
    border-color: rgba(211,53,116,0.8);
}

.abyss-node--final-boss {
    color: #ffb3d0;
    box-shadow: 0 0 24px rgba(211,53,116,0.45), inset 0 0 20px #000;
}

.abyss-node--selected {
    outline: 2px solid rgba(241,210,122,0.85);
    outline-offset: 4px;
}

.abyss-tooltip {
    position: absolute;
    right: 50%;
    bottom: calc(100% + 10px);
    transform: translateX(50%);
    min-width: 145px;
    pointer-events: none;
    opacity: 0;
    border: 1px solid rgba(190,160,255,0.35);
    border-radius: 6px;
    background: rgba(5,2,12,0.96);
    padding: 8px 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.55);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.abyss-tooltip b,
.abyss-tooltip small {
    display: block;
    white-space: nowrap;
}

.abyss-tooltip small {
    color: #8d7ca8;
    font-size: 0.72em;
}

.abyss-node:hover .abyss-tooltip {
    opacity: 1;
    transform: translateX(50%) translateY(-2px);
}

.abyss-node-preview,
.abyss-fighter-art,
.abyss-monster-art,
.abyss-reward-icon {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background: linear-gradient(145deg, rgba(16,8,32,0.95), rgba(2,0,8,0.98));
}

.abyss-node-preview {
    height: 148px;
    margin-bottom: 12px;
    border: 1px solid rgba(155,120,255,0.26);
}

.abyss-node-preview img,
.abyss-fighter-art img,
.abyss-monster-art img,
.abyss-reward-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.abyss-asset-fallback {
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    padding: 14px;
    text-align: center;
    color: #d9c8ff;
    font-weight: 900;
    background:
        radial-gradient(circle at 50% 40%, rgba(112,54,255,0.26), transparent 42%),
        linear-gradient(145deg, rgba(20,8,38,0.98), rgba(0,0,0,0.98));
    text-shadow: 0 0 10px rgba(160,120,255,0.75);
}

.abyss-detail-title {
    color: #eee7ff;
    margin: 0 0 4px;
}

.abyss-detail-meta,
.abyss-detail-text {
    color: #9284aa;
    font-size: 0.82em;
    line-height: 1.6;
}

.abyss-enter-btn,
.abyss-back-map,
.abyss-action-button {
    border: 1px solid rgba(165,128,255,0.65);
    border-radius: 6px;
    color: #eee7ff;
    background: linear-gradient(145deg, rgba(75,31,148,0.92), rgba(18,4,40,0.96));
    box-shadow: 0 0 14px rgba(112,54,255,0.28), inset 0 0 16px rgba(0,0,0,0.42);
    font-family: Cairo, sans-serif;
    font-weight: 900;
    cursor: pointer;
}

.abyss-enter-btn {
    width: 100%;
    padding: 12px;
    margin-top: 8px;
}

.abyss-enter-btn:disabled,
.abyss-action-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(1);
}

.abyss-transition {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: rgba(0,0,0,0.74);
}

.abyss-transition.is-active {
    display: flex;
}

.abyss-portal-ring {
    width: 180px;
    height: 180px;
    border: 3px solid rgba(166,120,255,0.75);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(176,90,255,0.34), rgba(0,0,0,0.9) 60%);
    box-shadow: 0 0 45px rgba(146,83,255,0.75), inset 0 0 45px rgba(0,0,0,0.9);
    animation: abyssPortal 1s ease-in-out infinite alternate;
}

.abyss-transition-text {
    color: #eee7ff;
    margin-top: 18px;
    font-weight: 900;
}

.abyss-encounter {
    min-height: calc(100vh - 115px);
}

.abyss-encounter-top {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    padding: 18px 22px;
}

.abyss-back-map {
    padding: 9px 14px;
}

.abyss-arena {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(210px, 0.9fr) minmax(310px, 1.2fr) minmax(230px, 0.9fr);
    gap: 14px;
    padding: 12px 18px 22px;
}

.abyss-combatant,
.abyss-center-stage {
    border: 1px solid rgba(148,112,255,0.3);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(8,2,18,0.88), rgba(0,0,0,0.92));
    box-shadow: inset 0 0 32px rgba(0,0,0,0.72);
    padding: 14px;
}

.abyss-combatant-name {
    color: #f1d27a;
    font-weight: 900;
    text-align: center;
    margin-bottom: 10px;
}

.abyss-fighter-art,
.abyss-monster-art {
    height: 285px;
    border: 1px solid rgba(150,115,255,0.25);
}

.abyss-monster-art {
    animation: abyssMonsterIdle 3.2s ease-in-out infinite;
}

.abyss-hp-bar {
    position: relative;
    height: 22px;
    margin-top: 12px;
    border: 1px solid #21152f;
    border-radius: 12px;
    overflow: hidden;
    background: #07030c;
}

.abyss-hp-fill {
    height: 100%;
    background: linear-gradient(90deg, #6f3cff, #d33574);
    transition: width 0.28s ease;
}

.abyss-hp-bar.enemy .abyss-hp-fill {
    background: linear-gradient(90deg, #68112d, #d33574);
}

.abyss-hp-bar span {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 0.78em;
    text-shadow: 0 1px 2px #000;
}

.abyss-center-stage {
    display: flex;
    flex-direction: column;
    min-height: 410px;
}

.abyss-battle-log {
    flex: 1;
    max-height: 270px;
    overflow: auto;
    color: #c7b8df;
    line-height: 1.7;
    font-size: 0.86em;
    border-bottom: 1px solid rgba(148,112,255,0.22);
    padding-bottom: 10px;
}

.abyss-action-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 12px;
}

.abyss-action-button {
    min-height: 42px;
}

.abyss-reward-preview,
.abyss-enemy-desc {
    color: #8d7ca8;
    font-size: 0.78em;
    line-height: 1.6;
    margin-top: 12px;
    text-align: center;
}

.abyss-damage-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.abyss-damage-number {
    position: absolute;
    z-index: 6;
    color: #fff;
    font-weight: 900;
    font-size: 1.4em;
    text-shadow: 0 0 10px #d33574, 0 2px 0 #000;
    animation: abyssDamageFloat 0.9s ease-out forwards;
}

.abyss-damage-number--crit {
    color: #f1d27a;
    font-size: 1.75em;
}

.abyss-monster--dead {
    animation: abyssDeath 0.8s ease forwards;
}

.abyss-screen-shake {
    animation: abyssScreenShake 0.42s ease-in-out 2;
}

.abyss-loot-modal {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: grid;
    place-items: center;
    background: rgba(0,0,0,0.72);
}

.abyss-cinematic-page {
    display: grid;
    place-items: center;
    min-height: calc(100vh - 115px);
    background: #020006;
}

.abyss-descent-video,
.abyss-descent-video-fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.abyss-descent-video {
    z-index: 2;
    opacity: 0.92;
}

.abyss-descent-video-fallback {
    z-index: 1;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 12%, rgba(165,120,255,0.28), transparent 24%),
        radial-gradient(ellipse at 50% 88%, rgba(180,30,86,0.25), transparent 32%),
        linear-gradient(180deg, #05000c, #000 48%, #100016);
}

.abyss-fall-tunnel {
    position: absolute;
    inset: -18%;
    background:
        conic-gradient(from 0deg at 50% 50%, rgba(151,99,255,0.0), rgba(151,99,255,0.16), rgba(0,0,0,0.75), rgba(210,40,110,0.16), rgba(151,99,255,0.0)),
        radial-gradient(circle at 50% 50%, transparent 0 12%, rgba(20,4,34,0.88) 36%, #000 72%);
    animation: abyssFallTunnel 2.8s linear infinite;
}

.abyss-fall-runes {
    position: absolute;
    inset: -10% 18%;
    background:
        repeating-linear-gradient(180deg, transparent 0 52px, rgba(230,210,255,0.12) 53px 55px, transparent 56px 110px),
        repeating-linear-gradient(90deg, transparent 0 86px, rgba(182,80,255,0.08) 87px 89px, transparent 90px 160px);
    transform: perspective(420px) rotateX(62deg);
    animation: abyssFallRunes 1.2s linear infinite;
}

.abyss-fall-dust {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(255,255,255,0.5) 0 1px, transparent 2px),
        radial-gradient(circle, rgba(214,70,140,0.45) 0 1px, transparent 2px);
    background-size: 82px 82px, 141px 141px;
    animation: abyssFallDust 0.72s linear infinite;
}

.abyss-cinematic-copy {
    position: relative;
    z-index: 4;
    width: min(680px, calc(100% - 32px));
    padding: 28px;
    text-align: center;
    background: linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.46));
    text-shadow: 0 2px 12px #000;
}

.abyss-loot-card {
    position: relative;
    width: min(420px, calc(100% - 28px));
    border: 1px solid rgba(241,210,122,0.55);
    border-radius: 8px;
    padding: 22px;
    text-align: center;
    background: linear-gradient(145deg, rgba(18,6,30,0.98), rgba(0,0,0,0.98));
    box-shadow: 0 0 38px rgba(241,210,122,0.18), inset 0 0 32px rgba(0,0,0,0.7);
    overflow: hidden;
    animation: abyssLootIn 0.35s ease-out;
}

.abyss-loot-glow {
    position: absolute;
    inset: -40%;
    background: conic-gradient(from 0deg, transparent, rgba(241,210,122,0.18), transparent, rgba(116,70,255,0.2), transparent);
    animation: abyssSpin 5s linear infinite;
}

.abyss-loot-card h3,
.abyss-reward-list,
.abyss-loot-card button {
    position: relative;
    z-index: 2;
}

.abyss-loot-card h3 {
    color: #f1d27a;
    margin-top: 0;
}

.abyss-reward-list {
    display: grid;
    gap: 10px;
    margin: 16px 0;
}

.abyss-reward-item {
    display: grid;
    grid-template-columns: 54px 1fr auto;
    gap: 10px;
    align-items: center;
    border: 1px solid rgba(241,210,122,0.24);
    border-radius: 6px;
    padding: 8px;
    background: rgba(0,0,0,0.48);
    text-align: right;
}

.abyss-reward-icon {
    width: 54px;
    height: 54px;
}

.abyss-reward-item b {
    color: #eee7ff;
}

.abyss-reward-item span {
    color: #f1d27a;
    font-weight: 900;
}

@keyframes abyssFogDrift {
    from { transform: translate3d(-2%, -1%, 0) scale(1); }
    to { transform: translate3d(2%, 1%, 0) scale(1.04); }
}

@keyframes abyssParticles {
    from { background-position: 0 0, 0 0; }
    to { background-position: 0 -260px, 0 -390px; }
}

@keyframes abyssNodePulse {
    0%, 100% { box-shadow: inset 0 0 14px rgba(0,0,0,0.85), 0 0 12px rgba(112,54,255,0.32); }
    50% { box-shadow: inset 0 0 14px rgba(0,0,0,0.85), 0 0 28px rgba(168,128,255,0.76); }
}

@keyframes abyssLinePulse {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
}

@keyframes abyssThroneBreathe {
    0%, 100% { opacity: 0.42; transform: scaleX(0.92); }
    50% { opacity: 0.9; transform: scaleX(1.06); }
}

@keyframes abyssPortal {
    from { transform: scale(0.94) rotate(0deg); filter: brightness(0.95); }
    to { transform: scale(1.06) rotate(18deg); filter: brightness(1.35); }
}

@keyframes abyssMonsterIdle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@keyframes abyssDamageFloat {
    from { opacity: 0; transform: translateY(10px) scale(0.8); }
    20% { opacity: 1; }
    to { opacity: 0; transform: translateY(-48px) scale(1.1); }
}

@keyframes abyssDeath {
    to { opacity: 0.38; filter: grayscale(1) blur(1px); transform: scale(0.98); }
}

@keyframes abyssScreenShake {
    0%, 100% { transform: translate3d(0, 0, 0); }
    20% { transform: translate3d(2px, -1px, 0); }
    40% { transform: translate3d(-2px, 1px, 0); }
    60% { transform: translate3d(1px, 2px, 0); }
    80% { transform: translate3d(-1px, -2px, 0); }
}

@keyframes abyssLootIn {
    from { opacity: 0; transform: translateY(16px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes abyssSpin {
    to { transform: rotate(360deg); }
}

@keyframes abyssFallTunnel {
    from { transform: rotate(0deg) scale(1); filter: brightness(0.9); }
    to { transform: rotate(360deg) scale(1.08); filter: brightness(1.18); }
}

@keyframes abyssFallRunes {
    from { background-position: 0 0, 0 0; }
    to { background-position: 0 220px, 0 0; }
}

@keyframes abyssFallDust {
    from { background-position: 0 0, 0 0; }
    to { background-position: 0 180px, 0 260px; }
}

@media (max-width: 1050px) {
    .abyss-layout,
    .abyss-arena {
        grid-template-columns: 1fr;
    }

    .abyss-map-shell,
    .abyss-map {
        min-height: 560px;
    }

    .abyss-descent-map {
        min-height: 660px;
    }

    .abyss-panel-left {
        order: 2;
    }

    .abyss-panel-right {
        order: 3;
    }
}

@media (max-width: 720px) {
    .abyss-header {
        align-items: stretch;
        flex-direction: column;
    }

    .abyss-header-stats {
        grid-template-columns: repeat(3, 1fr);
    }

    .abyss-title {
        font-size: 1.6em;
    }

    .abyss-layout {
        padding: 10px;
    }

    .abyss-map-shell,
    .abyss-map {
        min-height: 510px;
    }

    .abyss-descent-map {
        min-height: 620px;
    }

    .abyss-depth-ruler {
        display: none;
    }

    .abyss-action-bar {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .abyss-fog-layer,
    .abyss-particle-layer,
    .abyss-node--unlocked,
    .abyss-node-line--active,
    .abyss-portal-ring,
    .abyss-monster-art,
    .abyss-loot-glow,
    .abyss-final-throne-glow,
    .abyss-fall-tunnel,
    .abyss-fall-runes,
    .abyss-fall-dust,
    .abyss-screen-shake {
        animation: none !important;
    }
}

/* Soldier skill details shown above Black Market cards without being clipped. */
.soldier-skill-hover {
    position: relative;
    cursor: help;
    outline: none;
    border-bottom: 1px dotted rgba(212, 175, 55, 0.35);
}

.soldier-skill-hover:hover,
.soldier-skill-hover:focus-visible {
    background: rgba(212, 175, 55, 0.08);
    border-bottom-color: #d4af37;
}

.soldier-skill-float-tooltip {
    position: fixed;
    z-index: 1000000;
    width: max-content;
    max-width: min(260px, calc(100vw - 16px));
    box-sizing: border-box;
    padding: 7px 9px;
    direction: rtl;
    text-align: right;
    color: #f3ead6;
    background: rgba(9, 8, 7, 0.98);
    border: 1px solid #8d6e2f;
    border-radius: 4px;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.75), inset 0 0 10px rgba(212, 175, 55, 0.08);
    font-family: 'Cairo', sans-serif;
    font-size: 12px;
    line-height: 1.65;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease;
}

.soldier-skill-float-tooltip.is-visible {
    opacity: 1;
    visibility: visible;
}

/* Blood Encyclopedia: soldier properties */
.soldier-encyclopedia {
    color: #ccc;
    font-family: 'Cairo', sans-serif;
}

.soldier-enc-section {
    padding: 14px 2px 18px;
    border-bottom: 1px solid #30291d;
}

.soldier-enc-section h3,
.soldier-enc-section h4 {
    margin: 0 0 10px;
    color: #d4af37;
    font-size: 1em;
}

.soldier-enc-summary {
    border-top: 2px solid #8d6e2f;
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.06), rgba(80, 14, 14, 0.08));
    padding-inline: 12px;
}

.soldier-enc-rule-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: #30291d;
    border: 1px solid #30291d;
}

.soldier-enc-rule-grid > div {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 8px;
    padding: 9px;
    background: #0c0b0a;
    min-width: 0;
}

.soldier-enc-rule-grid b {
    color: #d4af37;
}

.soldier-enc-rule-grid span {
    color: #aaa;
    min-width: 0;
}

.soldier-enc-special-names {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    color: #aaa;
}

.soldier-enc-special-names > b {
    color: #e67e22;
    margin-left: 4px;
}

.soldier-enc-special-name {
    padding: 2px 7px;
    border: 1px solid;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.5);
    font-size: 0.78em;
    white-space: nowrap;
}

.soldier-enc-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #29251e;
}

.soldier-enc-table {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
    font-size: 0.82em;
}

.soldier-enc-table th {
    padding: 8px 7px;
    color: #d4af37;
    background: #15120d;
    border-bottom: 1px solid #53431f;
    text-align: center;
    white-space: nowrap;
}

.soldier-enc-table td {
    padding: 7px;
    color: #bbb;
    background: rgba(5, 5, 5, 0.72);
    border-bottom: 1px solid #1e1b17;
    border-left: 1px solid #1e1b17;
    text-align: center;
}

.soldier-enc-table tbody tr:hover td {
    background: rgba(212, 175, 55, 0.07);
}

.soldier-enc-tier {
    display: inline-block;
    min-width: 70px;
    font-weight: 700;
}

.soldier-enc-tier-veryhigh { color: #f39c12; }
.soldier-enc-tier-high { color: #2ecc71; }
.soldier-enc-tier-medium { color: #85c1e9; }
.soldier-enc-tier-low { color: #aaa; }
.soldier-enc-tier-verylow { color: #7b7d7d; }

.soldier-enc-base-note {
    margin-bottom: 8px;
    color: #999;
    font-size: 0.82em;
}

.soldier-enc-list {
    border-top: 1px solid #29251e;
}

.soldier-enc-list-row {
    display: grid;
    grid-template-columns: minmax(130px, 0.32fr) minmax(0, 1fr);
    gap: 12px;
    padding: 8px 6px;
    border-bottom: 1px solid #211e19;
    background: rgba(4, 4, 4, 0.62);
}

.soldier-enc-list-row:nth-child(even) {
    background: rgba(255, 255, 255, 0.018);
}

.soldier-enc-list-row b {
    color: #c39bd3;
}

.soldier-enc-list-row span {
    color: #aaa;
    min-width: 0;
}

.soldier-enc-list-row.soldier-enc-special {
    border-right: 3px solid #e67e22;
}

.soldier-enc-list-row.soldier-enc-special b {
    color: #f5b041;
}

@media (max-width: 760px) {
    .soldier-enc-rule-grid {
        grid-template-columns: 1fr;
    }

    .soldier-enc-rule-grid > div,
    .soldier-enc-list-row {
        grid-template-columns: 1fr;
        gap: 3px;
    }
}

/* Header alignment refinements from the admin layout export. */
.game-header-custom .header-vital-wrap {
    transform: scale(1.2);
    transform-origin: left top;
}

.game-header-custom #ui-class {
    font-size: 0.9em;
}

.game-header-custom #gh-avatar-el.header-card-avatar {
    width: 64px !important;
    height: 84px !important;
    box-sizing: border-box;
    padding: 0 !important;
    overflow: hidden;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: scaleX(1.2);
    transform-origin: center center;
}

.game-header-custom #gh-avatar-el.header-card-avatar #hud-class-icon {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top;
    border-radius: 50%;
}

/* Full soldier profile tooltip on the character paperdoll. */
#game-global-tooltip.soldier-paperdoll-global-tooltip {
    width: min(520px, calc(100vw - 24px)) !important;
    min-width: min(460px, calc(100vw - 24px)) !important;
    padding: 14px !important;
    border-color: #8d6e2f !important;
    background: rgba(7, 6, 5, 0.985) !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.9), inset 0 0 24px rgba(212, 175, 55, 0.07) !important;
}

.soldier-paperdoll-tip {
    direction: rtl;
    color: #ccc;
    font-family: 'Cairo', sans-serif;
}

.soldier-paperdoll-tip-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 0 0 10px;
    border-bottom: 2px solid;
}

.soldier-paperdoll-tip-head > div {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.soldier-paperdoll-tip-head strong {
    font-size: 1.08em;
    line-height: 1.4;
}

.soldier-paperdoll-tip-head span {
    color: #888;
    font-size: 0.76em;
}

.soldier-paperdoll-tip-head .soldier-paperdoll-gear-count {
    flex-shrink: 0;
    padding: 3px 7px;
    color: #d4af37;
    border: 1px solid #5d4a22;
    border-radius: 3px;
    background: rgba(212, 175, 55, 0.06);
}

.soldier-paperdoll-tip-group,
.soldier-paperdoll-tip-skills {
    padding-top: 10px;
}

.soldier-paperdoll-tip-group h4,
.soldier-paperdoll-tip-skills h4 {
    margin: 0 0 6px;
    color: #d4af37;
    font-size: 0.82em;
    border-bottom: 1px solid #29231a;
    padding-bottom: 4px;
}

.soldier-paperdoll-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px 8px;
}

.soldier-paperdoll-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 4px 6px;
    background: rgba(255, 255, 255, 0.025);
    border-bottom: 1px solid #1d1a16;
    font-size: 0.77em;
}

.soldier-paperdoll-stat span {
    color: #8f8f8f;
    min-width: 0;
}

.soldier-paperdoll-stat b {
    direction: ltr;
    flex-shrink: 0;
}

.soldier-paperdoll-tip-skills > div {
    margin-top: 0 !important;
    border-top: 0 !important;
    font-size: 0.78em !important;
}

@media (max-width: 560px) {
    #game-global-tooltip.soldier-paperdoll-global-tooltip {
        min-width: calc(100vw - 24px) !important;
    }

    .soldier-paperdoll-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* Special S-tier soldiers keep a hollow rarity-colored market glow. */
.shadow-soldier-market-card {
    position: relative;
    isolation: isolate;
}

.shadow-soldier-market-card--s-tier::after {
    content: '';
    position: absolute;
    inset: 5px;
    z-index: 5;
    pointer-events: none;
    border: 1px solid var(--soldier-rarity-color, #d4af37);
    border-radius: 7px;
    box-shadow:
        inset 0 0 10px var(--soldier-rarity-color, #d4af37),
        0 0 10px var(--soldier-rarity-color, #d4af37);
    animation: shadowSoldierHollowGlow 2.1s ease-in-out infinite;
}

@keyframes shadowSoldierHollowGlow {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 0.95; }
}

@media (prefers-reduced-motion: reduce) {
    .shadow-soldier-market-card--s-tier::after {
        animation: none;
        opacity: 0.75;
    }

    .market-card-featured { animation:none; }
}

/* Skill progress design samples */
.sp-progress-page {
    --sp-paper:#121110;
    --sp-line:#34302a;
    --sp-ink:#e7e1d5;
    color:var(--sp-ink);
    width:100%;
    min-width:0;
    font-family:'Cairo',sans-serif;
}

.sp-sample-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:12px 0 14px;
    border-bottom:1px solid #2c2925;
    margin-bottom:18px;
}

.sp-sample-head > div:first-child {
    display:flex;
    flex-direction:column;
    min-width:175px;
}

.sp-sample-head b { color:#e7d49b; font-size:.98em; }
.sp-sample-head > div:first-child span { color:#77736c; font-size:.72em; }

.sp-progress-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:12px 16px;
    margin-bottom:10px;
    border:1px solid #3b433d;
    border-right:4px solid #8ea28f;
    background:#111512;
}
.sp-progress-head > div { display:flex; flex-direction:column; }
.sp-progress-head b { color:#e2e9e1; font-size:1.08em; }
.sp-progress-head span { color:#89968b; font-size:.82em; }
.sp-progress-head > strong { color:#d7e1d7; font:700 1.3em monospace; white-space:nowrap; }
.sp-progress-head > strong small { color:#879288; font:600 .62em 'Cairo',sans-serif; }

.sp-theme-picker {
    display:grid;
    grid-template-columns:repeat(5,minmax(108px,1fr));
    gap:5px;
    width:min(720px,100%);
}

.sp-theme-option {
    position:relative;
    min-height:38px;
    border:1px solid #3a3732;
    border-radius:4px;
    background:#111;
    color:#8b8881;
    font:600 .75em 'Cairo',sans-serif;
    cursor:pointer;
    transition:border-color .18s ease,color .18s ease,background .18s ease;
}

.sp-theme-option > span {
    display:inline-grid;
    place-items:center;
    width:18px;
    height:18px;
    margin-left:6px;
    border:1px solid #47433c;
    color:#77736c;
    font:700 .72em monospace;
}

.sp-theme-option:hover,
.sp-theme-option.is-active { border-color:#a48a50; color:#f0dfad; background:#1a1814; }
.sp-theme-option.is-active::after {
    content:'';
    position:absolute;
    right:10px;
    left:10px;
    bottom:-1px;
    height:2px;
    background:#c4a45d;
}

.sp-source-icon,
.sp-route-icon,
.sp-arcane-icon {
    display:grid;
    place-items:center;
    flex:0 0 auto;
    width:46px;
    height:46px;
    border:1px solid color-mix(in srgb,var(--sp-accent) 65%,#24211d);
    background:#090909;
    overflow:hidden;
}

.sp-source-icon img,
.sp-route-icon img,
.sp-arcane-icon img { width:84%; height:84%; object-fit:contain; }

.sp-meter {
    position:relative;
    height:9px;
    overflow:hidden;
    border:1px solid #302e2a;
    background:#080808;
}

.sp-meter-fill {
    display:block;
    width:var(--sp-progress);
    height:100%;
    background:var(--sp-accent);
    box-shadow:inset 0 1px rgba(255,255,255,.16);
}
.sp-meter.is-compact { height:6px; }

/* Sample 1: Royal ledger */
.sp-progress-page[data-progress-theme="royal"] { --sp-paper:#15130f; }
.sp-royal-layout {
    display:grid;
    grid-template-columns:minmax(0,1fr) 270px;
    gap:16px;
    align-items:start;
}
.sp-royal-ledger,
.sp-royal-summary {
    border:1px solid #4a402b;
    background:linear-gradient(180deg,#17150f,#0d0c0a);
    box-shadow:inset 0 0 0 3px #0a0908;
}
.sp-section-title {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:13px 16px;
    border-bottom:1px solid #4a402b;
    color:#ddc47d;
}
.sp-section-title small { color:#746d5c; font-size:.72em; }
.sp-royal-row {
    display:grid;
    grid-template-columns:48px minmax(0,1fr) minmax(110px,auto) 62px;
    gap:12px;
    align-items:center;
    min-height:76px;
    padding:9px 12px;
    border-bottom:1px solid #29251c;
    border-right:3px solid var(--sp-accent);
}
.sp-royal-row:last-child { border-bottom:0; }
.sp-source-copy { min-width:0; }
.sp-source-copy b { display:block; color:#ddd7c9; font-size:.86em; }
.sp-source-copy > span { display:block; color:#777269; font-size:.68em; margin-bottom:7px; }
.sp-source-record { text-align:center; }
.sp-source-record b { display:block; color:#c7c1b5; font-size:.78em; direction:ltr; }
.sp-source-record span { color:#706c64; font-size:.66em; }
.sp-point-seal {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:58px;
    height:52px;
    border:1px solid color-mix(in srgb,var(--sp-accent) 55%,#403b31);
    background:#11100d;
}
.sp-point-seal strong { color:var(--sp-accent); font-size:1.05em; }
.sp-point-seal span { color:#777166; font-size:.62em; }
.sp-royal-summary {
    position:sticky;
    top:12px;
    padding:16px;
}
.sp-royal-summary::before {
    content:'ميزان النقاط';
    display:block;
    color:#d5bd78;
    border-bottom:1px solid #443b29;
    padding-bottom:10px;
    margin-bottom:10px;
    font-weight:700;
}
.sp-royal-summary > div {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 4px;
    border-bottom:1px solid #27231b;
}
.sp-royal-summary span { color:#888176; font-size:.75em; }
.sp-royal-summary strong { color:#e3cb87; font-size:1.25em; direction:ltr; }

/* Sample 2: Campaign route */
.sp-campaign-layout { border:1px solid #30332f; background:#0c0e0d; padding:14px; }
.sp-campaign-banner {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    padding:14px 18px;
    margin-bottom:12px;
    border:1px solid #3b433d;
    border-right:4px solid #718b74;
    background:#141916;
}
.sp-campaign-banner > div:first-child { display:flex; flex-direction:column; }
.sp-campaign-banner small { color:#92a395; font-size:.82em; }
.sp-campaign-banner b { color:#dbe1da; font-size:1.12em; }
.sp-campaign-totals { display:flex; gap:16px; }
.sp-campaign-totals > div { display:flex; flex-direction:column; min-width:82px; text-align:center; }
.sp-campaign-totals span { color:#87958b; font-size:.73em; }
.sp-campaign-totals strong { color:#e4e8e3; direction:ltr; font-size:1.08em; }
.sp-campaign-route { position:relative; padding:2px 28px 2px 0; }
.sp-campaign-route::before {
    content:'';
    position:absolute;
    top:16px;
    bottom:16px;
    right:14px;
    width:2px;
    background:#3e4a41;
}
.sp-campaign-stop {
    position:relative;
    display:grid;
    grid-template-columns:34px 48px minmax(0,1fr) 112px;
    align-items:center;
    gap:12px;
    min-height:80px;
    margin-bottom:7px;
    padding:10px 12px;
    border:1px solid #292e2a;
    background:#101311;
}
.sp-campaign-stop::before {
    content:'';
    position:absolute;
    right:-21px;
    width:10px;
    height:10px;
    border:2px solid var(--sp-accent);
    background:#0c0e0d;
    transform:rotate(45deg);
}
.sp-route-index { color:#738077; font:700 .82em monospace; }
.sp-route-icon { width:44px; height:44px; border-radius:50%; }
.sp-route-copy { display:flex; flex-direction:column; min-width:0; }
.sp-route-copy small { color:var(--sp-accent); font-size:.8em; }
.sp-route-copy b { color:#e0e4df; font-size:1em; direction:rtl; }
.sp-route-copy > span { color:#859087; font-size:.76em; margin-top:5px; }
.sp-route-reward { text-align:center; border-right:1px solid #2f3530; }
.sp-route-reward strong { display:block; color:var(--sp-accent); font-size:1.2em; }
.sp-route-reward span { color:#7e8a81; font-size:.72em; }

/* Training/progress readability and one consistent Arabic typeface. */
.training-stat-heading > span {
    font-size:1.28em;
    line-height:1.35;
    font-weight:900;
    text-shadow:0 1px 2px #000;
}
.training-stat-heading > b { font-size:.82em; font-weight:700; }
.training-stat-values span { font-size:.72em; font-weight:700; }
.training-stat-values b { font-size:1.2em; font-weight:900; }

/* Final training treatment: calm pulse, clean titles, and blood-red commands. */
.training-stat-card::before {
    content:none !important;
    display:none !important;
}
.training-stat-card .train-progress-container {
    margin:7px 0 8px;
}
.training-stat-card .train-progress-bar::after {
    content:none !important;
    display:none !important;
    animation:none !important;
}
.training-dynamic-page .training-stat-card .train-command {
    min-width:145px;
    height:39px;
    border:1px solid #8d3035;
    border-radius:4px;
    color:#f4ded8;
    background:linear-gradient(180deg,#54191e 0%,#310c10 54%,#1b0608 100%);
    box-shadow:inset 0 1px rgba(255,220,210,.14),inset 0 -2px rgba(0,0,0,.65),0 3px 7px rgba(0,0,0,.4);
    transition:transform .12s ease,border-color .15s ease,box-shadow .15s ease,filter .15s ease;
}
.training-dynamic-page .training-stat-card .train-command:hover:not(:disabled) {
    transform:translateY(-1px);
    border-color:#dc6a67;
    color:#fff;
    background:linear-gradient(180deg,#6d2428 0%,#421116 54%,#25080b 100%);
    box-shadow:inset 0 1px rgba(255,230,220,.2),inset 0 -2px rgba(0,0,0,.65),0 0 13px rgba(151,37,43,.48),0 4px 8px rgba(0,0,0,.42);
}
.training-dynamic-page .training-stat-card .train-command:active:not(:disabled) {
    transform:translateY(1px);
    filter:brightness(.9);
}
.training-dynamic-page .training-stat-card .train-command-mark {
    color:#ffd0c6;
    border-left-color:#8d3035;
    background:#1a0507;
}
.training-dynamic-page .training-stat-card .train-command-copy small {
    color:#e5a39b;
}
.training-dynamic-page .training-stat-card .train-command-ten {
    border-color:#a7443f;
}
.sp-campaign-banner b { font-size:1.28em; font-weight:900; }
.sp-route-copy small { font-size:1em; font-weight:900; }
.sp-route-copy b { font-size:1.14em; font-weight:900; }
.sp-route-copy > span { font-size:.84em; font-weight:700; }
.sp-route-reward strong { font-weight:900; }

html, body, body *, button, input, select, textarea,
.battle-log-content, .battle-log-content *, .abyss-battle-log, .abyss-battle-log * {
    font-family:'Cairo', sans-serif !important;
    letter-spacing:0 !important;
}

.labor-leave-btn {
    margin-top:14px;
    border-color:#8f4d45 !important;
    color:#d9a097 !important;
    background:#1a1110 !important;
    padding:8px 22px !important;
}
.labor-leave-btn:hover { border-color:#d16b5e !important; color:#fff !important; }

.market-card-featured {
    position:relative;
    isolation:isolate;
    animation:marketFeaturedPulse 2.2s ease-in-out infinite;
}
.market-card-featured::after {
    content:'';
    position:absolute;
    inset:3px;
    z-index:4;
    pointer-events:none;
    border:1px solid var(--market-rarity,#d4af37);
    box-shadow:inset 0 0 10px color-mix(in srgb,var(--market-rarity,#d4af37) 60%,transparent);
}
.market-featured-mark {
    position:absolute;
    top:5px;
    right:5px;
    z-index:12;
    min-width:30px;
    padding:2px 5px;
    border:1px solid #d4af37;
    background:#090806;
    color:#f0d77d;
    font:700 .7em monospace;
    text-align:center;
}
.market-bloodstone-cost { color:#ef7770; font-weight:900; white-space:nowrap; }
@keyframes marketFeaturedPulse {
    0%,100% { box-shadow:0 0 5px color-mix(in srgb,var(--market-rarity,#d4af37) 38%,transparent); }
    50% { box-shadow:0 0 15px color-mix(in srgb,var(--market-rarity,#d4af37) 72%,transparent); }
}

/* Sample 3: Command dashboard */
.sp-command-layout { padding:2px; }
.sp-command-kpis {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    margin-bottom:10px;
}
.sp-command-kpis > div {
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    padding:12px 14px;
    border:1px solid #333941;
    border-top:3px solid #68788b;
    background:#11151a;
}
.sp-command-kpis span { color:#84909c; font-size:.7em; }
.sp-command-kpis b { grid-row:span 2; color:#dce5ed; font:700 1.55em monospace; }
.sp-command-kpis small { color:#59636c; font-size:.62em; }
.sp-command-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
}
.sp-command-card {
    min-width:0;
    padding:13px;
    border:1px solid #2e343a;
    border-bottom:3px solid var(--sp-accent);
    background:#0e1216;
}
.sp-command-card-head { display:flex; align-items:center; gap:10px; }
.sp-command-card-head .sp-source-icon { width:38px; height:38px; }
.sp-command-card-head > span { display:flex; flex-direction:column; min-width:0; }
.sp-command-card-head small { color:#75808a; font-size:.65em; }
.sp-command-card-head b { color:var(--sp-accent); font-size:.8em; }
.sp-command-value { display:flex; align-items:baseline; gap:5px; margin:13px 0 7px; direction:ltr; }
.sp-command-value strong { color:#e2e8ed; font:700 1.35em monospace; }
.sp-command-value span { color:#56616b; font-size:.7em; }
.sp-command-value em { margin-left:auto; color:var(--sp-accent); font:normal 700 .75em monospace; }
.sp-command-card p { color:#66717a; font-size:.65em; margin:8px 0 0; min-height:34px; }

/* Sample 4: Arcane constellation */
.sp-arcane-layout {
    position:relative;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-template-rows:repeat(3,minmax(125px,auto));
    gap:10px;
    padding:18px;
    border:1px solid #3e3547;
    background:radial-gradient(circle at center,#1a1520 0,#0d0b10 46%,#09090a 100%);
    overflow:hidden;
}
.sp-arcane-layout::before,
.sp-arcane-layout::after {
    content:'';
    position:absolute;
    pointer-events:none;
    border:1px solid rgba(142,113,153,.18);
    transform:rotate(45deg);
}
.sp-arcane-layout::before { width:350px; height:350px; left:calc(50% - 175px); top:calc(50% - 175px); }
.sp-arcane-layout::after { width:240px; height:240px; left:calc(50% - 120px); top:calc(50% - 120px); }
.sp-arcane-core {
    z-index:2;
    grid-column:2;
    grid-row:2;
    align-self:center;
    justify-self:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:150px;
    height:150px;
    border:1px solid #765e82;
    border-radius:50%;
    background:#15101a;
    box-shadow:inset 0 0 24px rgba(136,94,157,.2),0 0 18px rgba(112,77,128,.16);
}
.sp-arcane-core small { color:#957da0; font-size:.64em; }
.sp-arcane-core strong { color:#eadcf0; font:700 2em monospace; }
.sp-arcane-core span { color:#b89dc2; font-size:.7em; }
.sp-arcane-core em { color:#6f6274; font:normal .62em 'Cairo',sans-serif; }
.sp-arcane-node {
    z-index:2;
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
    padding:8px;
}
.sp-arcane-node-1 { grid-column:1; grid-row:1; }
.sp-arcane-node-2 { grid-column:3; grid-row:1; }
.sp-arcane-node-3 { grid-column:1; grid-row:2; }
.sp-arcane-node-4 { grid-column:3; grid-row:2; }
.sp-arcane-node-5 { grid-column:1; grid-row:3; }
.sp-arcane-node-6 { grid-column:3; grid-row:3; }
.sp-arcane-ring {
    display:grid;
    place-items:center;
    flex:0 0 auto;
    width:68px;
    height:68px;
    border-radius:50%;
    background:conic-gradient(var(--sp-accent) var(--sp-ring),#28232b 0);
}
.sp-arcane-ring::before {
    content:'';
    grid-area:1/1;
    width:58px;
    height:58px;
    border-radius:50%;
    background:#0b090d;
}
.sp-arcane-icon { grid-area:1/1; z-index:1; width:46px; height:46px; border:0; border-radius:50%; }
.sp-arcane-node > div:last-child { display:flex; flex-direction:column; min-width:0; }
.sp-arcane-node b { color:var(--sp-accent); font-size:.78em; }
.sp-arcane-node span { color:#aaa0ad; font:700 .72em monospace; direction:ltr; }
.sp-arcane-node small { color:#6e6372; font-size:.62em; }

/* Sample 5: War archive */
.sp-archive-layout { border:1px solid #3a3631; background:#0d0d0c; }
.sp-archive-totals {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    border-bottom:1px solid #3a3631;
    background:#151411;
}
.sp-archive-totals > div { display:flex; align-items:center; justify-content:center; gap:10px; padding:11px; border-left:1px solid #34312d; }
.sp-archive-totals > div:last-child { border-left:0; }
.sp-archive-totals span { color:#77736d; font-size:.68em; }
.sp-archive-totals strong { color:#d8d2c5; font:700 1.1em monospace; }
.sp-archive-heading,
.sp-archive-row {
    display:grid;
    grid-template-columns:minmax(250px,1.6fr) minmax(110px,.55fr) minmax(170px,1fr) 90px;
    align-items:center;
}
.sp-archive-heading {
    min-height:34px;
    color:#66625c;
    font-size:.64em;
    border-bottom:1px solid #34312d;
    background:#10100f;
}
.sp-archive-heading span { padding:0 12px; }
.sp-archive-row { min-height:68px; border-bottom:1px solid #282622; border-right:3px solid var(--sp-accent); }
.sp-archive-row:last-child { border-bottom:0; }
.sp-archive-source { display:flex; align-items:center; gap:10px; padding:8px 12px; min-width:0; }
.sp-archive-source .sp-source-icon { width:38px; height:38px; }
.sp-archive-source > span { display:flex; flex-direction:column; min-width:0; }
.sp-archive-source b { color:#d1ccc2; font-size:.76em; }
.sp-archive-source small { color:#69655f; font-size:.61em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sp-archive-record { display:flex; flex-direction:column; padding:8px 12px; border-right:1px solid #282622; }
.sp-archive-record b { color:#ddd8ce; font:700 .85em monospace; }
.sp-archive-record small { color:#66615b; font-size:.61em; }
.sp-archive-progress { display:grid; grid-template-columns:minmax(80px,1fr) 38px; align-items:center; gap:8px; padding:8px 12px; }
.sp-archive-progress > span { color:var(--sp-accent); font:700 .68em monospace; }
.sp-archive-points { display:flex; flex-direction:column; align-items:center; padding:8px; border-right:1px solid #282622; }
.sp-archive-points strong { color:var(--sp-accent); font:700 1em monospace; }
.sp-archive-points small { color:#68635d; font-size:.59em; }

@media (max-width:1050px) {
    .sp-sample-head { align-items:flex-start; flex-direction:column; }
    .sp-theme-picker { width:100%; }
    .sp-royal-layout { grid-template-columns:1fr; }
    .sp-royal-summary { position:static; display:grid; grid-template-columns:repeat(3,1fr); }
    .sp-royal-summary::before { grid-column:1/-1; }
    .sp-royal-summary > div { padding:8px; border-left:1px solid #27231b; }
    .sp-command-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:760px) {
    .sp-theme-picker { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .sp-theme-option:last-child { grid-column:1/-1; }
    .sp-progress-head { align-items:flex-start; }
    .sp-progress-head > strong { font-size:1.08em; }
    .sp-royal-row { grid-template-columns:44px minmax(0,1fr) 58px; }
    .sp-source-record { display:none; }
    .sp-campaign-banner { align-items:flex-start; flex-direction:column; }
    .sp-campaign-totals { width:100%; justify-content:space-between; }
    .sp-campaign-stop { grid-template-columns:28px 42px minmax(0,1fr); }
    .sp-route-reward { grid-column:3; border-right:0; text-align:right; }
    .sp-command-kpis { grid-template-columns:1fr; }
    .sp-command-grid { grid-template-columns:1fr; }
    .sp-arcane-layout { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:auto; padding:10px; }
    .sp-arcane-layout::before,.sp-arcane-layout::after { display:none; }
    .sp-arcane-core { grid-column:1/-1; grid-row:auto; width:132px; height:132px; }
    .sp-arcane-node-1,.sp-arcane-node-2,.sp-arcane-node-3,.sp-arcane-node-4,.sp-arcane-node-5,.sp-arcane-node-6 { grid-column:auto; grid-row:auto; }
    .sp-arcane-node { border:1px solid #302a34; background:#100d12; }
    .sp-archive-table { overflow-x:auto; }
    .sp-archive-heading,.sp-archive-row { min-width:680px; }
}

@media (max-width:480px) {
    .sp-sample-head { margin-bottom:12px; }
    .sp-progress-head { flex-direction:column; }
    .sp-theme-picker { grid-template-columns:1fr; }
    .sp-theme-option:last-child { grid-column:auto; }
    .sp-royal-row { grid-template-columns:38px minmax(0,1fr) 48px; gap:8px; padding:8px; }
    .sp-source-icon { width:36px; height:36px; }
    .sp-point-seal { width:46px; height:44px; }
    .sp-royal-summary { grid-template-columns:1fr; }
    .sp-royal-summary > div { border-left:0; }
    .sp-campaign-totals { gap:4px; }
    .sp-campaign-totals > div { min-width:0; }
    .sp-campaign-stop { grid-template-columns:30px minmax(0,1fr); }
    .sp-route-index { display:none; }
    .sp-route-reward { grid-column:2; }
    .sp-arcane-layout { grid-template-columns:1fr; }
    .sp-archive-totals { grid-template-columns:1fr; }
    .sp-archive-totals > div { border-left:0; border-bottom:1px solid #292722; }
}

/* Player market preview: five switchable structures sharing one trading model. */
.pm-market {
    --pm-accent: #c8a85b;
    --pm-accent-soft: rgba(200, 168, 91, 0.16);
    --pm-panel: #121313;
    --pm-panel-raised: #191a19;
    --pm-line: #3a382f;
    width: min(100%, 2100px);
    min-height: 680px;
    margin: 0 auto;
    padding: 18px;
    color: #e7e2d5;
    background: #090a0a;
    border: 1px solid #403a2b;
    border-radius: 4px;
    box-sizing: border-box;
    direction: rtl;
    font-family: "Cairo", sans-serif;
}
.pm-market-header { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:70px; padding:0 6px 14px; border-bottom:1px solid var(--pm-line); }
.pm-market-title { display:flex; align-items:center; gap:12px; }
.pm-market-mark { display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--pm-accent); color:var(--pm-accent); font-size:1.35rem; font-weight:900; transform:rotate(45deg); }
.pm-market-mark::first-letter { transform:rotate(-45deg); }
.pm-market-title h2 { margin:0; color:#f0e8d4; font-size:1.5rem; letter-spacing:0; }
.pm-market-title p { margin:3px 0 0; color:#86837b; font-size:.78rem; }
.pm-market-summary { display:flex; gap:8px; }
.pm-market-summary span { min-width:110px; padding:8px 12px; border:1px solid #34342f; background:#101111; color:#8e8d87; font-size:.72rem; text-align:center; }
.pm-market-summary b { display:block; color:var(--pm-accent); font-size:1rem; }
.content:has(#view-player-market:not(.hidden)) { padding:8px; }
.pm-market-tabs { display:flex; min-height:40px; border-bottom:1px solid var(--pm-line); background:#0b0c0c; }
.pm-market-tab { min-width:170px; padding:7px 18px; border:0; border-bottom:2px solid transparent; background:transparent; color:#77766f; font:800 .75rem "Cairo", sans-serif; cursor:pointer; }
.pm-market-tab:hover { color:#d3cec3; background:#151414; }
.pm-market-tab.is-active { color:#d6b071; border-bottom-color:#a8473d; background:rgba(168,71,61,.09); }
.pm-market-tab span { display:inline-grid; place-items:center; min-width:19px; height:19px; margin-right:5px; border:1px solid #4c4038; color:#bda67d; font-size:.62rem; }
.pm-layout-picker { display:grid; grid-template-columns:repeat(5, 1fr); gap:1px; margin:12px 0; padding:3px; background:#1a1b1a; border:1px solid #30312e; }
.pm-layout-btn { min-height:38px; padding:6px 10px; border:0; border-bottom:2px solid transparent; color:#888982; background:#101111; font:700 .75rem "Cairo", sans-serif; cursor:pointer; }
.pm-layout-btn:hover { color:#ddd8ca; background:#191a19; }
.pm-layout-btn.is-active { color:var(--pm-accent); border-bottom-color:var(--pm-accent); background:var(--pm-accent-soft); }
.pm-workspace { display:grid; grid-template-columns:minmax(0, 1fr) 350px; gap:12px; height:calc(100vh - 300px); min-height:510px; direction:ltr; }
.pm-bazaar-panel, .pm-sell-panel { min-width:0; min-height:0; border:1px solid var(--pm-line); background:var(--pm-panel); direction:rtl; }
.pm-bazaar-panel { display:flex; flex-direction:column; overflow:hidden; }
.pm-filter-bar { display:grid; grid-template-columns:minmax(190px, 1fr) repeat(3, minmax(105px, auto)) 40px; gap:6px; padding:10px; border-bottom:1px solid var(--pm-line); background:#0d0e0e; }
.pm-filter-bar select, .pm-search-wrap { height:38px; border:1px solid #393a37; border-radius:2px; background:#151616; color:#c9c5b9; font:600 .73rem "Cairo", sans-serif; box-sizing:border-box; }
.pm-filter-bar select { padding:0 9px; outline:none; }
.pm-search-wrap { display:flex; align-items:center; gap:8px; padding:0 10px; }
.pm-search-wrap span { color:var(--pm-accent); font-size:1.1rem; }
.pm-search-wrap input { width:100%; min-width:0; border:0; outline:0; background:transparent; color:#f1eee6; font:600 .75rem "Cairo", sans-serif; }
.pm-refresh-btn { width:40px; border:1px solid var(--pm-accent); border-radius:2px; color:var(--pm-accent); background:var(--pm-accent-soft); font-size:1.25rem; cursor:pointer; }
.pm-listing-viewport { flex:1; min-height:0; overflow:hidden; }
.pm-listing-grid { display:flex; flex-direction:column; gap:4px; height:100%; padding:8px; box-sizing:border-box; }
.pm-listing-card { display:grid; grid-template-columns:58px minmax(0, 1fr) 100px 88px; align-items:center; gap:10px; min-height:66px; padding:7px 10px; border:1px solid #2e302e; border-right:3px solid var(--pm-rarity); background:#151616; box-sizing:border-box; transition:border-color .18s ease, background-color .18s ease; }
.pm-listing-card:hover { background:#1b1c1b; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--pm-rarity) 35%, transparent); }
.pm-listing-image-wrap { position:relative; width:52px; height:52px; border:1px solid #3a3b38; background:#090a0a; }
.pm-listing-image { width:100%; height:100%; padding:4px; object-fit:contain; box-sizing:border-box; }
.pm-listing-tooltip { width:280px; right:0; left:auto; bottom:calc(100% + 8px); top:auto; z-index:20050; text-align:center; overflow-wrap:anywhere; }
.pm-listing-copy { min-width:0; }
.pm-listing-category { color:#74766f; font-size:.62rem; }
.pm-listing-name { margin:2px 0; overflow:hidden; font-size:.86rem; font-weight:900; text-overflow:ellipsis; white-space:nowrap; }
.pm-listing-seller { color:#7e807a; font-size:.66rem; }
.pm-listing-seller b { color:#b8b5ac; }
.pm-listing-seller span { color:#72c690; }
.pm-listing-trade { text-align:center; }
.pm-listing-price b { display:block; color:#efcf64; font-size:.9rem; }
.pm-listing-price span, .pm-listing-trade small { color:#777970; font-size:.61rem; }
.pm-listing-actions { display:flex; flex-direction:column; align-items:stretch; gap:5px; min-width:66px; }
.pm-listing-action { min-height:30px; padding:4px 8px; border:1px solid #5b9e72; border-radius:2px; background:rgba(71,131,91,.13); color:#8ed0a4; font:800 .67rem "Cairo", sans-serif; cursor:pointer; }
.pm-listing-action:hover { background:#356348; color:#fff; }
.pm-listing-action.is-cancel { border-color:#8e4949; background:rgba(142,73,73,.12); color:#d28c8c; }
.pm-listing-action.is-offer { border-color:#9c7747; background:rgba(156,119,71,.12); color:#d6b47a; }
.pm-listing-action.is-offer:hover { background:#72542f; color:#fff; }
.pm-listing-action:disabled { border-color:#373735; background:#161616; color:#555; cursor:not-allowed; }
.pm-listing-action:disabled:hover { background:#161616; color:#555; }
.pm-offers-open { margin-top:3px; color:#ba9562; font-size:.59rem; }
.pm-sell-panel { display:flex; flex-direction:column; }
.pm-sell-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:48px; padding:0 12px; border-bottom:1px solid var(--pm-line); }
.pm-sell-heading span { color:var(--pm-accent); font-size:.9rem; font-weight:900; }
.pm-sell-heading small { color:#696b66; font-size:.62rem; }
.pm-inventory-tabs { display:grid; grid-template-columns:repeat(5, 1fr); gap:1px; padding:5px; background:#0d0e0e; border-bottom:1px solid #2c2d2b; }
.pm-inv-tab { min-width:0; min-height:34px; padding:4px 2px; border:0; border-bottom:2px solid transparent; background:#171818; color:#74766f; font:700 .62rem "Cairo", sans-serif; cursor:pointer; }
.pm-inv-tab.is-active { color:var(--pm-accent); border-bottom-color:var(--pm-accent); background:var(--pm-accent-soft); }
.pm-inventory-stage { flex:1; min-height:0; overflow:hidden; }
.pm-inventory-section { height:100%; padding:8px; overflow:auto; box-sizing:border-box; align-content:start; }
#pm-inv-gear-section, #pm-inv-scrolls-section, #pm-inv-currencies-section, #pm-inv-runes-section { display:grid; grid-template-columns:repeat(auto-fill, minmax(72px, 1fr)); gap:6px; }
#pm-inv-mats-section { display:flex; flex-direction:column; gap:3px; }
.pm-inventory-section.hidden { display:none !important; }
.pm-inventory-token { position:relative; display:grid; grid-template-rows:50px auto auto; align-items:center; justify-items:center; min-width:0; min-height:92px; padding:6px 3px; border:1px solid color-mix(in srgb, var(--pm-item-color) 65%, #222); border-radius:3px; background:#111212; color:#d8d5cc; font:700 .61rem "Cairo", sans-serif; cursor:pointer; }
.pm-inventory-token:hover { background:#1d1e1d; box-shadow:inset 0 -2px 0 var(--pm-item-color); }
.pm-inventory-token img { width:48px; height:48px; object-fit:contain; }
.pm-inventory-token b { width:100%; overflow:hidden; color:var(--pm-item-color); text-overflow:ellipsis; white-space:nowrap; }
.pm-inventory-token > span { color:#878981; font-size:.58rem; }
.pm-inventory-tooltip { width:250px; right:0; left:auto; bottom:calc(100% + 6px); top:auto; z-index:20060; white-space:normal; overflow-wrap:anywhere; }
.pm-inventory-tooltip p, .pm-tooltip-description { margin:6px 0; color:#d0cdc4; line-height:1.7; }
.pm-inventory-tooltip small, .pm-tooltip-quantity { display:block; margin-top:5px; color:#a9a69d; }
.pm-empty-inventory { grid-column:1/-1; padding:40px 10px; color:#686a65; text-align:center; }
.pm-price-modal { display:none; position:fixed; inset:0; z-index:20080; align-items:center; justify-content:center; padding:16px; background:rgba(0,0,0,.88); }
.pm-price-dialog { width:min(100%, 400px); padding:24px; border:1px solid var(--pm-accent, #c8a85b); border-radius:4px; background:#111313; box-shadow:0 18px 70px #000; text-align:center; }
.pm-pagination { display:flex; align-items:center; justify-content:center; gap:5px; min-height:42px; padding:4px 10px; border-top:1px solid var(--pm-line); background:#0b0c0c; direction:rtl; box-sizing:border-box; }
.pm-pagination.is-empty { min-height:0; padding:0; border:0; }
.pm-pagination button { min-width:34px; height:29px; padding:3px 9px; border:1px solid #3b3934; background:#151616; color:#97938a; font:700 .66rem "Cairo", sans-serif; cursor:pointer; }
.pm-pagination button:hover:not(:disabled), .pm-pagination button.is-active { border-color:#9b5147; color:#efe2d1; background:#2a1816; }
.pm-pagination button:disabled { opacity:.35; cursor:not-allowed; }
.pm-pagination span { margin-right:8px; color:#696760; font-size:.62rem; }
.pm-market-empty { display:flex; grid-column:1/-1; flex-direction:column; align-items:center; justify-content:center; height:100%; min-height:250px; color:#74716a; text-align:center; }
.pm-market-empty-mark { display:grid; place-items:center; width:52px; height:52px; margin-bottom:13px; border:1px solid #4b3733; color:#9f4c43; font-size:1.5rem; }
.pm-market-empty b { color:#b9b3a9; font-size:.88rem; }
.pm-market-empty span { margin-top:5px; color:#64615c; font-size:.68rem; }
.pm-filter-bar.is-disabled { opacity:.32; pointer-events:none; }
.pm-flexibility-control { margin:0 0 12px; padding:10px; border:1px solid #352d29; background:#0c0d0d; text-align:right; }
.pm-flexibility-control label { display:flex; justify-content:space-between; color:#bcb6aa; font-size:.78rem; font-weight:800; }
.pm-flexibility-control label span { color:#d0a562; }
.pm-flexibility-control input { width:100%; margin:8px 0 2px; accent-color:#b34b3f; }
.pm-flexibility-control small { display:block; color:#77736d; font-size:.64rem; line-height:1.6; }
.pm-offer-dialog h3 { margin:0 0 8px; color:#c79a59; }
.pm-offer-item-name { color:#eee0c5; font-weight:900; }
.pm-offer-note { color:#878078; font-size:.72rem; line-height:1.7; }
.pm-offer-field { margin:10px 0; text-align:right; }
.pm-offer-field label { display:block; margin-bottom:4px; color:#aaa39a; font-size:.72rem; }
.pm-offer-field input { width:100%; height:38px; padding:4px 10px; border:1px solid #4a4037; background:#090a0a; color:#fff; font:700 .85rem "Cairo", sans-serif; box-sizing:border-box; }
.pm-offer-actions, .pm-message-offer-actions { display:flex; gap:8px; }
.pm-offer-actions .btn, .pm-message-offer-actions .btn { flex:1; }
.pm-offer-submit, .pm-message-offer-accept { border-color:#4d9466 !important; color:#8ed0a4 !important; }
.pm-message-offer-actions { margin:14px 0 2px; padding:12px; border:1px solid #49382e; background:#100e0d; }
.pm-message-offer-decline { border-color:#8e4949 !important; color:#d28c8c !important; }
.pm-message-offer-status { margin:12px 0 2px; padding:9px; border:1px solid #4d4941; color:#b9b3a8; text-align:center; }

/* 2: War table - inventory command rail and broad tactical cards. */
.pm-market[data-pm-layout="war"] { --pm-accent:#b34b3f; --pm-accent-soft:rgba(179,75,63,.14); --pm-panel:#141212; --pm-panel-raised:#1d1716; --pm-line:#49312d; background:#0c0909; }
.pm-market[data-pm-layout="war"] .pm-market-header { border-right:5px solid var(--pm-accent); padding-right:16px; }
.pm-market[data-pm-layout="war"] .pm-market-mark { border-radius:50%; transform:none; }
.pm-market[data-pm-layout="war"] .pm-workspace { grid-template-columns:minmax(0, 1fr) 330px; }
.pm-market[data-pm-layout="war"] .pm-bazaar-panel { order:1; }
.pm-market[data-pm-layout="war"] .pm-sell-panel { order:2; }
.pm-market[data-pm-layout="war"] .pm-listing-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); grid-template-rows:repeat(4, minmax(76px,1fr)); gap:7px; }
.pm-market[data-pm-layout="war"] .pm-listing-card { grid-template-columns:70px minmax(0,1fr) 78px 68px; grid-template-areas:"image copy trade actions"; min-height:0; border-right-width:1px; border-top:1px solid var(--pm-rarity); }
.pm-market[data-pm-layout="war"] .pm-listing-image-wrap { grid-area:image; width:66px; height:66px; }
.pm-market[data-pm-layout="war"] .pm-listing-copy { grid-area:copy; }
.pm-market[data-pm-layout="war"] .pm-listing-trade { grid-area:trade; }
.pm-market[data-pm-layout="war"] .pm-listing-actions { grid-area:actions; }

/* 3: Merchant ledger - compact, full-width trading sheet. */
.pm-market[data-pm-layout="ledger"] { --pm-accent:#8fb19a; --pm-accent-soft:rgba(143,177,154,.12); --pm-panel:#111514; --pm-panel-raised:#18201d; --pm-line:#31433d; background:#0a0e0d; }
.pm-market[data-pm-layout="ledger"] .pm-market-mark { width:58px; height:34px; transform:none; }
.pm-market[data-pm-layout="ledger"] .pm-workspace { display:flex; flex-direction:column; height:calc(100vh - 300px); }
.pm-market[data-pm-layout="ledger"] .pm-sell-panel { order:1; flex:0 0 168px; }
.pm-market[data-pm-layout="ledger"] .pm-bazaar-panel { order:2; flex:1; }
.pm-market[data-pm-layout="ledger"] .pm-sell-heading { min-height:38px; }
.pm-market[data-pm-layout="ledger"] .pm-inventory-tabs { position:absolute; left:34px; margin-top:-1px; width:min(48%, 510px); }
.pm-market[data-pm-layout="ledger"] .pm-inventory-stage { margin-top:2px; }
.pm-market[data-pm-layout="ledger"] .pm-inventory-section { display:flex; flex-wrap:nowrap; gap:5px; overflow-x:auto; overflow-y:hidden; }
.pm-market[data-pm-layout="ledger"] .pm-inventory-token { flex:0 0 84px; }
.pm-market[data-pm-layout="ledger"] .pm-listing-grid { gap:1px; padding:4px; }
.pm-market[data-pm-layout="ledger"] .pm-listing-card { min-height:48px; grid-template-columns:42px minmax(0,1fr) 110px 82px; padding:3px 8px; border-right-width:1px; border-left:3px solid var(--pm-rarity); }
.pm-market[data-pm-layout="ledger"] .pm-listing-image-wrap { width:38px; height:38px; }

/* 4: Caravan - horizontal market stalls with inventory below. */
.pm-market[data-pm-layout="caravan"] { --pm-accent:#d88a4d; --pm-accent-soft:rgba(216,138,77,.14); --pm-panel:#171310; --pm-panel-raised:#211a15; --pm-line:#4c392b; background:#0e0b09; }
.pm-market[data-pm-layout="caravan"] .pm-layout-picker { border-radius:20px; padding:4px; }
.pm-market[data-pm-layout="caravan"] .pm-layout-btn { border-radius:16px; border-bottom:0; }
.pm-market[data-pm-layout="caravan"] .pm-workspace { display:flex; flex-direction:column; height:calc(100vh - 300px); }
.pm-market[data-pm-layout="caravan"] .pm-bazaar-panel { flex:1 1 62%; }
.pm-market[data-pm-layout="caravan"] .pm-sell-panel { flex:1 1 38%; min-height:190px; }
.pm-market[data-pm-layout="caravan"] .pm-listing-grid { display:flex; flex-direction:row; align-items:stretch; gap:8px; min-width:min-content; height:100%; }
.pm-market[data-pm-layout="caravan"] .pm-listing-card { grid-template-columns:1fr; grid-template-rows:96px auto auto auto; align-content:start; width:210px; min-height:235px; padding:10px; border:1px solid #4c392b; border-bottom:4px solid var(--pm-rarity); text-align:center; }
.pm-market[data-pm-layout="caravan"] .pm-listing-image-wrap { width:92px; height:92px; margin:auto; }
.pm-market[data-pm-layout="caravan"] .pm-listing-action { width:100%; }
.pm-market[data-pm-layout="caravan"] .pm-inventory-section { display:flex; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; }
.pm-market[data-pm-layout="caravan"] .pm-inventory-token { flex:0 0 86px; }

/* 5: Auction hall - gallery with a featured first listing. */
.pm-market[data-pm-layout="auction"] { --pm-accent:#b496d2; --pm-accent-soft:rgba(180,150,210,.12); --pm-panel:#131217; --pm-panel-raised:#1b1820; --pm-line:#3d3547; background:#0b0a0d; }
.pm-market[data-pm-layout="auction"] .pm-market-header { justify-content:center; text-align:center; }
.pm-market[data-pm-layout="auction"] .pm-market-title { flex-direction:column; gap:5px; }
.pm-market[data-pm-layout="auction"] .pm-market-mark { width:38px; height:38px; transform:rotate(45deg); }
.pm-market[data-pm-layout="auction"] .pm-market-summary { position:absolute; left:max(24px, calc((100vw - 1540px)/2 + 24px)); }
.pm-market[data-pm-layout="auction"] .pm-workspace { grid-template-columns:290px minmax(0,1fr); }
.pm-market[data-pm-layout="auction"] .pm-sell-panel { order:1; }
.pm-market[data-pm-layout="auction"] .pm-bazaar-panel { order:2; }
.pm-market[data-pm-layout="auction"] .pm-listing-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:7px; }
.pm-market[data-pm-layout="auction"] .pm-listing-card { grid-template-columns:64px minmax(0,1fr); grid-template-areas:"image copy" "trade action"; min-height:134px; border-right-width:1px; border-bottom:3px solid var(--pm-rarity); }
.pm-market[data-pm-layout="auction"] .pm-listing-card:first-child { grid-column:span 2; grid-row:span 2; grid-template-columns:130px minmax(0,1fr); min-height:275px; }
.pm-market[data-pm-layout="auction"] .pm-listing-card:first-child .pm-listing-image-wrap { width:122px; height:122px; }
.pm-market[data-pm-layout="auction"] .pm-listing-image-wrap { grid-area:image; width:60px; height:60px; }
.pm-market[data-pm-layout="auction"] .pm-listing-copy { grid-area:copy; }
.pm-market[data-pm-layout="auction"] .pm-listing-trade { grid-area:trade; }
.pm-market[data-pm-layout="auction"] .pm-listing-action { grid-area:action; }

@media (max-width: 1050px) {
    .pm-market { padding:10px; min-height:0; }
    .pm-market-summary { display:none; }
    .pm-layout-picker { grid-template-columns:repeat(3, 1fr); }
    .pm-workspace, .pm-market[data-pm-layout] .pm-workspace { display:flex; flex-direction:column; height:auto; min-height:0; }
    .pm-bazaar-panel, .pm-market[data-pm-layout] .pm-bazaar-panel { order:1; min-height:520px; }
    .pm-sell-panel, .pm-market[data-pm-layout] .pm-sell-panel { order:2; min-height:260px; max-height:380px; }
    .pm-market[data-pm-layout="ledger"] .pm-inventory-tabs { position:static; width:auto; }
    .pm-market[data-pm-layout="auction"] .pm-listing-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
    .pm-market[data-pm-layout="auction"] .pm-market-header { justify-content:flex-start; text-align:right; }
}
@media (max-width: 680px) {
    .pm-market-header { min-height:56px; }
    .pm-market-title h2 { font-size:1.15rem; }
    .pm-market-mark { width:34px; height:34px; }
    .pm-layout-picker { grid-template-columns:repeat(2, 1fr); }
    .pm-filter-bar { grid-template-columns:1fr 1fr 40px; }
    .pm-search-wrap { grid-column:1/-1; }
    .pm-filter-bar #pm-rarity { display:none; }
    .pm-listing-card, .pm-market[data-pm-layout] .pm-listing-card { grid-template-columns:50px minmax(0,1fr) 70px; grid-template-areas:"image copy trade" "actions actions actions"; min-height:96px; padding:6px; }
    .pm-listing-image-wrap, .pm-market[data-pm-layout] .pm-listing-image-wrap { grid-area:image; width:46px; height:46px; }
    .pm-listing-copy { grid-area:copy; }
    .pm-listing-trade { grid-area:trade; }
    .pm-listing-actions { grid-area:actions; flex-direction:row; justify-content:flex-end; }
    .pm-listing-action { width:auto; min-width:68px; }
    .pm-market[data-pm-layout] .pm-listing-grid { display:flex; flex-direction:column; min-width:0; height:auto; }
    .pm-market[data-pm-layout="auction"] .pm-listing-card:first-child { grid-column:auto; grid-row:auto; min-height:96px; grid-template-columns:50px minmax(0,1fr) 70px; }
    .pm-market[data-pm-layout="auction"] .pm-listing-card:first-child .pm-listing-image-wrap { width:46px; height:46px; }
}