/* =============================================
   HERO DASHBOARD - RPG Equipment & Stats UI
   Mobile-first design, Fairytale theme
   ============================================= */

/* ===== FULLSCREEN MODAL CONTAINER ===== */
.hero-dashboard-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* ===== FAIRYTALE WORLD BACKGROUND ===== */
.hero-fairytale-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: linear-gradient(180deg,
        #0a0a1a 0%,
        #1a1a3a 30%,
        #2a2050 60%,
        #1a1030 100%);
}

/* Magical Aurora Sky */
.hero-aurora {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background:
        radial-gradient(ellipse 80% 50% at 20% 20%, rgba(147, 112, 219, 0.4) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 30%, rgba(72, 209, 204, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse 100% 60% at 50% 0%, rgba(255, 182, 193, 0.25) 0%, transparent 60%);
    animation: heroAuroraPulse 8s ease-in-out infinite;
}

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

/* Enchanted Light Source */
.hero-light-source {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 120px;
    background: radial-gradient(circle,
        rgba(255, 248, 220, 0.9) 0%,
        rgba(147, 112, 219, 0.6) 25%,
        rgba(72, 209, 204, 0.4) 50%,
        rgba(255, 182, 193, 0.2) 70%,
        transparent 85%);
    border-radius: 50%;
    animation: heroLightPulse 4s ease-in-out infinite;
    filter: blur(15px);
}

.hero-light-source::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: radial-gradient(circle, #fff, rgba(147, 112, 219, 0.8));
    border-radius: 50%;
    filter: blur(3px);
    animation: heroCoreGlow 2s ease-in-out infinite;
}

@keyframes heroLightPulse {
    0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.8; }
    50% { transform: translateX(-50%) scale(1.15); opacity: 1; }
}

@keyframes heroCoreGlow {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.2); }
}

/* Light Rays */
.hero-rays {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
    width: 250px;
    height: 350px;
    background:
        conic-gradient(from 0deg at 50% 0%,
            transparent 0deg,
            rgba(147, 112, 219, 0.08) 15deg,
            transparent 30deg,
            rgba(72, 209, 204, 0.1) 50deg,
            transparent 65deg,
            rgba(255, 182, 193, 0.08) 85deg,
            transparent 100deg,
            rgba(147, 112, 219, 0.1) 120deg,
            transparent 135deg,
            rgba(72, 209, 204, 0.08) 155deg,
            transparent 170deg,
            rgba(255, 182, 193, 0.1) 190deg,
            transparent 205deg);
    animation: heroRaysRotate 25s linear infinite;
    opacity: 0.6;
}

@keyframes heroRaysRotate {
    from { transform: translateX(-50%) rotate(0deg); }
    to { transform: translateX(-50%) rotate(360deg); }
}

/* Magical Mist */
.hero-mist {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background:
        radial-gradient(ellipse 120% 50% at 20% 100%, rgba(147, 112, 219, 0.15) 0%, transparent 60%),
        radial-gradient(ellipse 100% 40% at 80% 100%, rgba(72, 209, 204, 0.1) 0%, transparent 50%),
        linear-gradient(180deg, transparent 0%, rgba(20, 16, 40, 0.6) 100%);
    animation: heroMistFloat 12s ease-in-out infinite;
}

@keyframes heroMistFloat {
    0%, 100% { opacity: 0.7; transform: translateY(0); }
    50% { opacity: 0.9; transform: translateY(-10px); }
}

/* Stars */
.hero-stars {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60%;
}

.hero-star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    animation: heroStarTwinkle 3s ease-in-out infinite;
}

@keyframes heroStarTwinkle {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.5); }
}

/* Bio Glow Orbs */
.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(20px);
    animation: heroOrbFloat 6s ease-in-out infinite;
}

@keyframes heroOrbFloat {
    0%, 100% { opacity: 0.3; transform: translateY(0) scale(1); }
    50% { opacity: 0.5; transform: translateY(-15px) scale(1.1); }
}

/* Floating Particles */
.hero-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hero-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(147, 112, 219, 0.8);
    border-radius: 50%;
    animation: heroParticleRise 10s ease-out infinite;
}

@keyframes heroParticleRise {
    0% { transform: translateY(100vh) scale(0); opacity: 0; }
    10% { opacity: 0.8; transform: translateY(90vh) scale(1); }
    90% { opacity: 0.6; }
    100% { transform: translateY(-20px) scale(0.5); opacity: 0; }
}

/* ===== MAIN DASHBOARD CONTAINER ===== */
.hero-dashboard-content {
    min-height: 100vh;
    background: transparent;
    position: relative;
    padding-bottom: env(safe-area-inset-bottom, 20px);
    z-index: 1;
}

/* ===== HEADER - BG3 Elegant Style ===== */
.hero-header {
    position: relative;
    padding: 18px 15px;
    background: linear-gradient(180deg,
        rgba(28, 24, 35, 0.98) 0%,
        rgba(22, 18, 28, 0.99) 50%,
        rgba(18, 15, 24, 1) 100%);
    border-bottom: 1px solid rgba(120, 100, 150, 0.35);
    z-index: 10;
}

/* Top gold accent line */
.hero-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 30px;
    right: 30px;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(180, 150, 100, 0.5),
        rgba(180, 150, 100, 0.5),
        transparent);
}

/* Bottom elegant border */
.hero-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50px;
    right: 50px;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(180, 150, 100, 0.3),
        rgba(180, 150, 100, 0.3),
        transparent);
}

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

/* Hero Portrait */
.hero-portrait {
    position: relative;
    width: 65px;
    height: 65px;
    flex-shrink: 0;
}

/* Portrait Frame - Elegant Gold Border */
.hero-portrait-frame {
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border: 2px solid rgba(180, 150, 100, 0.5);
    border-radius: 10px;
    background: linear-gradient(135deg,
        rgba(180, 150, 100, 0.15) 0%,
        transparent 50%,
        rgba(180, 150, 100, 0.1) 100%);
}

/* Corner accent - top left */
.hero-portrait-frame::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    width: 10px;
    height: 10px;
    border-left: 2px solid rgba(200, 170, 110, 0.7);
    border-top: 2px solid rgba(200, 170, 110, 0.7);
    border-radius: 4px 0 0 0;
}

/* Corner accent - bottom right */
.hero-portrait-frame::after {
    content: '';
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 10px;
    height: 10px;
    border-right: 2px solid rgba(200, 170, 110, 0.7);
    border-bottom: 2px solid rgba(200, 170, 110, 0.7);
    border-radius: 0 0 4px 0;
}

.hero-portrait-inner {
    width: 100%;
    height: 100%;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    position: relative;
    overflow: hidden;
}

.hero-portrait-inner.warrior {
    background: linear-gradient(135deg, #4a1c1c 0%, #8b3a3a 50%, #4a1c1c 100%);
}

.hero-portrait-inner.mage {
    background: linear-gradient(135deg, #1c1c4a 0%, #3a3a8b 50%, #1c1c4a 100%);
}

.hero-portrait-inner.bard {
    background: linear-gradient(135deg, #1c4a1c 0%, #3a8b3a 50%, #1c4a1c 100%);
}

.hero-details {
    flex: 1;
    min-width: 0;
}

/* Hero Name - Elegant Gold Gradient */
.hero-name {
    font-family: 'Cinzel', serif;
    font-size: 18px;
    font-weight: 700;
    background: linear-gradient(135deg, #e8dcc8, #c9b896, #e8dcc8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 3px;
    letter-spacing: 0.5px;
}

/* Class Title - Subtle Gold */
.hero-class-title {
    font-size: 10px;
    color: rgba(180, 150, 100, 0.85);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.hero-level-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Level Badge - Elegant Gold Circle */
.hero-level-badge {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg,
        rgba(35, 30, 42, 1) 0%,
        rgba(45, 38, 52, 1) 50%,
        rgba(35, 30, 42, 1) 100%);
    border: 2px solid rgba(180, 150, 100, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cinzel', serif;
    font-size: 11px;
    font-weight: 900;
    color: #e8dcc8;
    position: relative;
}

/* Inner highlight ring */
.hero-level-badge::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

/* XP Bar Container - Elegant Dark */
.hero-xp-bar-container {
    flex: 1;
    height: 8px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(120, 100, 150, 0.25);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

/* Inner depth effect */
.hero-xp-bar-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0.3),
        transparent);
    border-radius: 3px 3px 0 0;
    pointer-events: none;
}

/* XP Bar Fill - Elegant Gold */
.hero-xp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg,
        rgba(160, 130, 80, 0.9),
        rgba(200, 170, 100, 1),
        rgba(180, 150, 90, 0.95));
    border-radius: 3px;
    position: relative;
    transition: width 0.5s ease;
}

/* Top highlight on fill */
.hero-xp-bar-fill::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 2px;
    right: 2px;
    height: 2px;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.25),
        rgba(255, 255, 255, 0.15));
    border-radius: 2px;
}

/* Close Button - Elegant Style */
.hero-close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg,
        rgba(35, 30, 42, 0.9) 0%,
        rgba(28, 24, 35, 0.95) 100%);
    border: 1px solid rgba(120, 100, 150, 0.35);
    border-radius: 8px;
    color: rgba(180, 150, 100, 0.75);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    transition: all 0.2s;
}

.hero-close-btn:hover {
    background: linear-gradient(135deg,
        rgba(45, 38, 52, 0.95) 0%,
        rgba(35, 30, 42, 1) 100%);
    border-color: rgba(180, 150, 100, 0.5);
    color: rgba(200, 170, 110, 0.9);
}

/* ===== MAIN CONTENT ===== */
.hero-main-content {
    position: relative;
    z-index: 1;
    padding: 15px;
    padding-bottom: 80px;
}

/* ===== SECTION TITLE - Elegant Gold ===== */
.hero-section-title {
    font-family: 'Cinzel', serif;
    font-size: 11px;
    font-weight: 600;
    color: rgba(180, 150, 100, 0.85);
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
    margin-bottom: 12px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Decorative lines on each side */
.hero-section-title::before,
.hero-section-title::after {
    content: '';
    flex: 1;
    max-width: 40px;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(180, 150, 100, 0.4));
}

.hero-section-title::after {
    background: linear-gradient(90deg,
        rgba(180, 150, 100, 0.4),
        transparent);
}

/* ===== PAPER DOLL / EQUIPMENT SECTION - BG3 Elegant ===== */
.hero-equipment-section {
    position: relative;
    margin-bottom: 18px;
    background: linear-gradient(180deg,
        rgba(28, 24, 35, 0.98) 0%,
        rgba(22, 18, 28, 0.99) 50%,
        rgba(18, 15, 24, 1) 100%);
    border: 1px solid rgba(120, 100, 150, 0.35);
    border-radius: 14px;
    padding: 16px 14px;

    /* Subtle depth */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Top accent line */
.hero-equipment-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 40px;
    right: 40px;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(180, 150, 100, 0.4),
        rgba(180, 150, 100, 0.4),
        transparent);
}

/* Corner decorations */
.hero-equipment-section::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    width: 12px;
    height: 12px;
    border-left: 1px solid rgba(180, 150, 100, 0.35);
    border-top: 1px solid rgba(180, 150, 100, 0.35);
}

/* Section title */
.hero-equipment-section .hero-section-title {
    font-size: 12px;
    color: rgba(180, 150, 100, 0.9);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.hero-equipment-section .hero-section-title::before,
.hero-equipment-section .hero-section-title::after {
    content: '—';
    color: rgba(180, 150, 100, 0.4);
    font-weight: 300;
}

/* Equipment Layout - 2 columns + center silhouette */
.hero-equipment-container {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    max-width: 100%;
}

.hero-equip-column {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Character Silhouette - elegant frame */
.hero-character-silhouette {
    width: 85px;
    height: 145px;
    background: linear-gradient(180deg,
        rgba(40, 35, 50, 0.4) 0%,
        rgba(30, 25, 38, 0.5) 100%);
    border: 1px solid rgba(100, 85, 120, 0.3);
    border-radius: 42px 42px 22px 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}

/* Silhouette inner highlight */
.hero-character-silhouette::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 38px 38px 18px 18px;
}

.hero-silhouette-icon {
    font-size: 52px;
    opacity: 0.25;
    filter: grayscale(80%);
}

/* Weapons Row - elegant divider */
.hero-weapons-row {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 14px;
    padding-top: 14px;
    position: relative;
}

/* Ornate divider line */
.hero-weapons-row::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(120, 100, 150, 0.4),
        rgba(120, 100, 150, 0.4),
        transparent);
}

/* Center diamond on divider */
.hero-weapons-row::after {
    content: '◇';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 8px;
    color: rgba(180, 150, 100, 0.5);
    background: rgba(22, 18, 28, 1);
    padding: 0 6px;
}

.hero-weapons-row .hero-equip-slot {
    width: 62px;
    height: 62px;
}

/* ===== EQUIPMENT SLOT - BG3 Style ===== */
.hero-equip-slot {
    position: relative;
    width: 54px;
    height: 54px;
    background: linear-gradient(145deg,
        rgba(35, 30, 45, 0.95) 0%,
        rgba(25, 22, 32, 0.98) 50%,
        rgba(20, 18, 26, 1) 100%);
    border: 2px solid rgba(100, 85, 120, 0.55);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow:
        inset 0 2px 5px rgba(0, 0, 0, 0.5),
        inset 0 -1px 0 rgba(255, 255, 255, 0.04),
        0 3px 8px rgba(0, 0, 0, 0.35);
}

.hero-equip-slot::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    border: 1px solid rgba(120, 100, 140, 0.15);
    border-radius: 5px;
    pointer-events: none;
}

/* Slot type tooltip */
.hero-equip-slot[data-type]::after {
    content: attr(data-type);
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Cinzel', serif;
    font-size: 8px;
    color: rgba(232, 213, 232, 0.9);
    background: rgba(20, 18, 30, 0.95);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(147, 112, 219, 0.4);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    z-index: 10;
}

.hero-equip-slot:hover::after,
.hero-equip-slot:active::after,
.hero-equip-slot.touched::after {
    opacity: 1;
}

.hero-equip-slot:hover {
    border-color: rgba(147, 112, 219, 0.8);
    transform: scale(1.08);
    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, 0.4),
        0 4px 12px rgba(147, 112, 219, 0.3);
}

.hero-equip-slot:active {
    transform: scale(0.95);
}

/* Empty slot */
.hero-equip-slot:not(.equipped) {
    border-style: dashed;
    border-color: rgba(100, 90, 120, 0.35);
}

/* Equipped slot */
.hero-equip-slot.equipped {
    border-style: solid;
    border-color: rgba(140, 120, 160, 0.6);
    background: linear-gradient(145deg, rgba(30, 28, 38, 0.98) 0%, rgba(45, 40, 55, 0.98) 100%);
}

/* ===== RARITY STYLES - WoW Colors (Border Only) ===== */
.hero-equip-slot.common { border-color: #9d9d9d; }
.hero-equip-slot.uncommon { border-color: #1eff00; }
.hero-equip-slot.rare { border-color: #0070dd; }
.hero-equip-slot.epic { border-color: #a335ee; }
.hero-equip-slot.legendary { border-color: #ff8000; }

/* Slot icon */
.hero-slot-icon-svg {
    width: 26px;
    height: 26px;
    color: rgba(180, 160, 200, 0.5);
    transition: all 0.15s ease;
}

.hero-equip-slot.equipped .hero-slot-icon-svg {
    display: none;
}

.hero-equip-slot:not(.equipped) .hero-slot-icon-svg {
    color: rgba(120, 100, 140, 0.4);
}

/* Equipped item icon */
.hero-equipped-item-icon {
    font-size: 28px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

/* ===== EQUIPMENT BONUSES PANEL - BG3 Style ===== */
.hero-equipment-bonuses {
    position: relative;
    background: linear-gradient(180deg,
        rgba(28, 24, 35, 0.98) 0%,
        rgba(22, 18, 28, 0.99) 50%,
        rgba(18, 15, 24, 1) 100%);
    border: 1px solid rgba(147, 112, 219, 0.35);
    border-radius: 14px;
    padding: 16px 14px;
    margin-bottom: 20px;
    overflow: hidden;

    /* Depth shadows */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3),
        0 4px 15px rgba(0, 0, 0, 0.4);
}

/* Top glow decoration */
.hero-equipment-bonuses::before {
    content: '';
    position: absolute;
    top: 0;
    left: 30px;
    right: 30px;
    height: 2px;
    background: linear-gradient(90deg,
        transparent,
        rgba(72, 209, 204, 0.5),
        rgba(147, 112, 219, 0.4),
        rgba(72, 209, 204, 0.5),
        transparent);
    border-radius: 0 0 2px 2px;
}

/* Decorative corner */
.hero-equipment-bonuses::after {
    content: '⬢';
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 8px;
    color: rgba(72, 209, 204, 0.35);
}

.hero-bonuses-title {
    font-family: 'Cinzel', serif;
    font-size: 12px;
    font-weight: 600;
    color: #48d1cc;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 14px;
    text-align: center;
    text-shadow: 0 0 10px rgba(72, 209, 204, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.hero-bonuses-title::before,
.hero-bonuses-title::after {
    content: '◈';
    font-size: 8px;
    color: rgba(72, 209, 204, 0.5);
}

.hero-bonus-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

/* Base bonus tag - BG3 ornate style */
.hero-bonus-tag {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-family: 'Cinzel', serif;
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.2s ease;

    /* Default style */
    background: linear-gradient(135deg,
        rgba(72, 209, 204, 0.15) 0%,
        rgba(72, 209, 204, 0.08) 100%);
    border: 1px solid rgba(72, 209, 204, 0.4);
    color: #48d1cc;
    text-shadow: 0 0 8px rgba(72, 209, 204, 0.4);
}

.hero-bonus-tag:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(72, 209, 204, 0.25);
}

/* Icon before each stat */
.hero-bonus-tag::before {
    font-size: 14px;
}

/* Empty state */
.hero-bonus-tag.empty {
    background: linear-gradient(135deg,
        rgba(80, 70, 100, 0.15) 0%,
        rgba(60, 50, 80, 0.1) 100%);
    border: 1px dashed rgba(100, 90, 120, 0.4);
    color: rgba(180, 170, 200, 0.6);
    font-style: italic;
    font-weight: 400;
    text-shadow: none;
}

.hero-bonus-tag.empty::before {
    content: '○';
    font-size: 10px;
}

/* ===== STAT-SPECIFIC BONUS COLORS ===== */

/* Strength - Red */
.hero-bonus-tag.strength {
    background: linear-gradient(135deg,
        rgba(220, 38, 38, 0.18) 0%,
        rgba(220, 38, 38, 0.08) 100%);
    border-color: rgba(220, 38, 38, 0.5);
    color: #ff6b6b;
    text-shadow: 0 0 8px rgba(220, 38, 38, 0.4);
}

.hero-bonus-tag.strength::before {
    content: '💪';
}

.hero-bonus-tag.strength:hover {
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

/* Defense - Blue */
.hero-bonus-tag.defense {
    background: linear-gradient(135deg,
        rgba(37, 99, 235, 0.18) 0%,
        rgba(37, 99, 235, 0.08) 100%);
    border-color: rgba(37, 99, 235, 0.5);
    color: #60a5fa;
    text-shadow: 0 0 8px rgba(37, 99, 235, 0.4);
}

.hero-bonus-tag.defense::before {
    content: '🛡️';
}

.hero-bonus-tag.defense:hover {
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

/* Endurance - Green */
.hero-bonus-tag.endurance {
    background: linear-gradient(135deg,
        rgba(22, 163, 74, 0.18) 0%,
        rgba(22, 163, 74, 0.08) 100%);
    border-color: rgba(22, 163, 74, 0.5);
    color: #4ade80;
    text-shadow: 0 0 8px rgba(22, 163, 74, 0.4);
}

.hero-bonus-tag.endurance::before {
    content: '❤️';
}

.hero-bonus-tag.endurance:hover {
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.3);
}

/* Agility - Yellow/Gold */
.hero-bonus-tag.agility {
    background: linear-gradient(135deg,
        rgba(202, 138, 4, 0.18) 0%,
        rgba(202, 138, 4, 0.08) 100%);
    border-color: rgba(202, 138, 4, 0.5);
    color: #fbbf24;
    text-shadow: 0 0 8px rgba(202, 138, 4, 0.4);
}

.hero-bonus-tag.agility::before {
    content: '⚡';
}

.hero-bonus-tag.agility:hover {
    box-shadow: 0 4px 12px rgba(202, 138, 4, 0.3);
}

/* Intelligence - Purple */
.hero-bonus-tag.intelligence {
    background: linear-gradient(135deg,
        rgba(124, 58, 237, 0.18) 0%,
        rgba(124, 58, 237, 0.08) 100%);
    border-color: rgba(124, 58, 237, 0.5);
    color: #a78bfa;
    text-shadow: 0 0 8px rgba(124, 58, 237, 0.4);
}

.hero-bonus-tag.intelligence::before {
    content: '🧠';
}

.hero-bonus-tag.intelligence:hover {
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

/* Luck - Orange */
.hero-bonus-tag.luck {
    background: linear-gradient(135deg,
        rgba(234, 88, 12, 0.18) 0%,
        rgba(234, 88, 12, 0.08) 100%);
    border-color: rgba(234, 88, 12, 0.5);
    color: #fb923c;
    text-shadow: 0 0 8px rgba(234, 88, 12, 0.4);
}

.hero-bonus-tag.luck::before {
    content: '🍀';
}

.hero-bonus-tag.luck:hover {
    box-shadow: 0 4px 12px rgba(234, 88, 12, 0.3);
}

/* Set bonuses container */
.hero-set-bonuses {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(147, 112, 219, 0.2);
}

.hero-set-bonus-tag {
    background: linear-gradient(135deg,
        rgba(163, 53, 238, 0.15) 0%,
        rgba(72, 209, 204, 0.1) 100%) !important;
    border-radius: 8px !important;
}

/* ===== STATS PANEL - BG3 Elegant Style ===== */
.hero-stats-panel {
    position: relative;
    background: linear-gradient(180deg,
        rgba(28, 24, 35, 0.98) 0%,
        rgba(22, 18, 28, 0.99) 50%,
        rgba(18, 15, 24, 1) 100%);
    border: 1px solid rgba(120, 100, 150, 0.35);
    border-radius: 14px;
    padding: 18px 16px;
    margin-bottom: 20px;
    overflow: hidden;

    /* Subtle depth */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Top accent line */
.hero-stats-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 40px;
    right: 40px;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(180, 150, 100, 0.4),
        rgba(180, 150, 100, 0.4),
        transparent);
}

/* Section title styling */
.hero-stats-panel .hero-section-title {
    font-size: 12px;
    color: rgba(180, 150, 100, 0.9);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.hero-stats-panel .hero-section-title::before,
.hero-stats-panel .hero-section-title::after {
    content: '—';
    color: rgba(180, 150, 100, 0.4);
    font-weight: 300;
}

.hero-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

/* Stat item - elegant card */
.hero-stat-item {
    position: relative;
    text-align: center;
    padding: 14px 8px 12px;
    background: linear-gradient(180deg,
        rgba(40, 35, 50, 0.6) 0%,
        rgba(30, 25, 38, 0.8) 100%);
    border: 1px solid rgba(100, 85, 120, 0.3);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Subtle top highlight */
.hero-stat-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10px;
    right: 10px;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.08),
        transparent);
}

.hero-stat-item:hover {
    border-color: rgba(140, 120, 170, 0.5);
    background: linear-gradient(180deg,
        rgba(50, 42, 65, 0.7) 0%,
        rgba(35, 28, 45, 0.85) 100%);
}

.hero-stat-item:active {
    transform: scale(0.97);
}

/* Stat icon */
.hero-stat-icon {
    font-size: 20px;
    margin-bottom: 6px;
    display: block;
    opacity: 0.9;
}

/* Stat value - large and prominent */
.hero-stat-value {
    font-family: 'Cinzel', serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 4px;
}

/* Stat-specific colors - refined palette */
.hero-stat-item.strength .hero-stat-value { color: #e57373; }
.hero-stat-item.defense .hero-stat-value { color: #64b5f6; }
.hero-stat-item.intelligence .hero-stat-value { color: #b39ddb; }
.hero-stat-item.endurance .hero-stat-value { color: #81c784; }
.hero-stat-item.agility .hero-stat-value { color: #ffd54f; }
.hero-stat-item.luck .hero-stat-value { color: #ffb74d; }
.hero-stat-item.health .hero-stat-value { color: #ef5350; }
.hero-stat-item.mana .hero-stat-value { color: #42a5f5; }

/* Stat name - subtle label */
.hero-stat-name {
    font-size: 9px;
    font-weight: 500;
    color: rgba(200, 190, 210, 0.7);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* ===== ABILITIES SECTION - BG3 Style ===== */
.hero-abilities-section {
    margin-bottom: 24px;
    padding: 0 4px;
}

.hero-abilities-section .hero-section-title {
    font-family: 'Cinzel', serif;
    font-size: 16px;
    font-weight: 700;
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.hero-abilities-section .hero-section-title::before {
    content: '⚔️';
    font-size: 18px;
}

/* Abilities Container */
#heroAbilitiesContainer {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Ability Card - BG3 Spell Card Style */
.hero-ability-card {
    position: relative;
    background: linear-gradient(180deg,
        rgba(35, 28, 45, 0.98) 0%,
        rgba(25, 20, 35, 0.99) 50%,
        rgba(20, 15, 28, 1) 100%);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    gap: 14px;
    transition: all 0.25s ease;
    overflow: hidden;

    /* Ornate border */
    border: 1px solid rgba(147, 112, 219, 0.35);
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}

/* Top glow line */
.hero-ability-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20px;
    right: 20px;
    height: 2px;
    background: linear-gradient(90deg,
        transparent,
        rgba(147, 112, 219, 0.6),
        rgba(212, 168, 75, 0.5),
        rgba(147, 112, 219, 0.6),
        transparent);
    border-radius: 0 0 2px 2px;
}

/* Corner rune decorations */
.hero-ability-card::after {
    content: '◈';
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 10px;
    color: rgba(147, 112, 219, 0.4);
    text-shadow: 0 0 5px rgba(147, 112, 219, 0.3);
}

.hero-ability-card:active {
    transform: scale(0.98);
    border-color: rgba(212, 168, 75, 0.5);
    box-shadow:
        0 2px 10px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(147, 112, 219, 0.2),
        inset 0 0 30px rgba(147, 112, 219, 0.05);
}

/* Icon Frame - Hexagonal BG3 style */
.hero-ability-icon-frame {
    position: relative;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;

    /* Hexagonal-ish shape with rounded corners */
    background: linear-gradient(145deg,
        rgba(50, 40, 70, 0.95) 0%,
        rgba(35, 28, 50, 0.98) 100%);
    border: 2px solid rgba(147, 112, 219, 0.6);
    border-radius: 12px;

    /* Inner shadow for depth */
    box-shadow:
        inset 0 2px 8px rgba(0, 0, 0, 0.5),
        0 0 15px rgba(147, 112, 219, 0.25),
        0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Icon glow animation */
.hero-ability-icon-frame::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 14px;
    background: linear-gradient(45deg,
        rgba(147, 112, 219, 0.3),
        rgba(212, 168, 75, 0.2),
        rgba(147, 112, 219, 0.3));
    opacity: 0;
    animation: abilityIconPulse 3s ease-in-out infinite;
    z-index: -1;
}

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

/* Ability Content */
.hero-ability-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Ability Name - Larger, more readable */
.hero-ability-name {
    font-family: 'Cinzel', serif;
    font-size: 16px;
    font-weight: 700;
    color: #e8d5e8;
    margin: 0 0 4px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    line-height: 1.2;
}

/* Ability Type Badge */
.hero-ability-type {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    color: #d4a84b;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
    padding: 3px 10px;
    background: linear-gradient(90deg,
        rgba(212, 168, 75, 0.15),
        rgba(212, 168, 75, 0.08),
        transparent);
    border-left: 2px solid rgba(212, 168, 75, 0.6);
    border-radius: 0 6px 6px 0;
    width: fit-content;
}

.hero-ability-type::before {
    content: '✦';
    font-size: 8px;
}

/* Ability Description - Much more readable */
.hero-ability-desc {
    font-size: 14px;
    color: rgba(200, 190, 220, 0.9);
    line-height: 1.5;
    margin: 0;

    /* Subtle text shadow for readability */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Ability Bonus Tag */
.hero-ability-bonus {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg,
        rgba(72, 209, 204, 0.2) 0%,
        rgba(147, 112, 219, 0.15) 100%);
    border: 1px solid rgba(72, 209, 204, 0.4);
    border-radius: 8px;
    padding: 6px 12px;
    margin-top: 10px;
    font-size: 12px;
    font-weight: 600;
    color: #48d1cc;
    text-shadow: 0 0 8px rgba(72, 209, 204, 0.4);
    width: fit-content;
}

.hero-ability-bonus::before {
    content: '⚡';
    font-size: 11px;
}

/* Active ability indicator (for future use) */
.hero-ability-card.active {
    border-color: rgba(72, 209, 204, 0.6);
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.4),
        0 0 25px rgba(72, 209, 204, 0.2),
        inset 0 0 20px rgba(72, 209, 204, 0.05);
}

.hero-ability-card.active .hero-ability-icon-frame {
    border-color: rgba(72, 209, 204, 0.7);
    box-shadow:
        inset 0 2px 8px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(72, 209, 204, 0.4);
}

/* Responsive - even better on small phones */
@media (max-width: 380px) {
    .hero-ability-card {
        padding: 14px 12px;
        gap: 12px;
    }

    .hero-ability-icon-frame {
        width: 50px;
        height: 50px;
        font-size: 24px;
    }

    .hero-ability-name {
        font-size: 15px;
    }

    .hero-ability-desc {
        font-size: 13px;
    }
}

/* ===== INVENTORY TOGGLE BUTTON - BG3 Style ===== */
.hero-inventory-toggle {
    position: relative;
    width: 100%;
    padding: 16px 20px;
    background: linear-gradient(180deg,
        rgba(45, 38, 55, 0.95) 0%,
        rgba(30, 25, 38, 0.98) 50%,
        rgba(25, 20, 32, 1) 100%);
    border: 1px solid rgba(147, 112, 219, 0.4);
    border-radius: 12px;
    color: #e8d5e8;
    font-family: 'Cinzel', serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.25s ease;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    overflow: hidden;

    /* Ornate top glow line */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3),
        0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Top decorative line */
.hero-inventory-toggle::before {
    content: '';
    position: absolute;
    top: 0;
    left: 30px;
    right: 30px;
    height: 2px;
    background: linear-gradient(90deg,
        transparent,
        rgba(212, 168, 75, 0.5),
        rgba(147, 112, 219, 0.6),
        rgba(212, 168, 75, 0.5),
        transparent);
    border-radius: 0 0 2px 2px;
}

/* Corner runes */
.hero-inventory-toggle::after {
    content: '◆';
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    font-size: 8px;
    color: rgba(147, 112, 219, 0.5);
    transition: transform 0.3s ease, color 0.3s ease;
}

.hero-inventory-toggle:hover {
    border-color: rgba(147, 112, 219, 0.7);
    background: linear-gradient(180deg,
        rgba(55, 45, 70, 0.98) 0%,
        rgba(35, 28, 45, 0.99) 50%,
        rgba(28, 22, 38, 1) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 20px rgba(147, 112, 219, 0.25),
        0 6px 20px rgba(0, 0, 0, 0.4);
}

.hero-inventory-toggle:hover::after {
    color: rgba(212, 168, 75, 0.8);
}

.hero-inventory-toggle .arrow {
    transition: transform 0.3s ease;
    font-size: 10px;
    color: rgba(147, 112, 219, 0.8);
}

.hero-inventory-toggle.open .arrow {
    transform: rotate(180deg);
}

.hero-inventory-toggle.open::after {
    transform: translateY(-50%) rotate(90deg);
    color: rgba(72, 209, 204, 0.8);
}

/* Inventory count badge */
.hero-inventory-toggle #heroInventoryCount {
    color: #d4a84b;
    font-weight: 700;
}

/* ===== INVENTORY SECTION - BG3 Style ===== */
.hero-inventory-section {
    display: none;
    animation: heroSlideDown 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 20px;
}

.hero-inventory-section.open {
    display: block;
}

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

/* ===== INVENTORY CONTAINER - BG3 Panel ===== */
.hero-inventory-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    padding: 20px;
    margin-bottom: 0;

    /* BG3 Panel Background */
    background: linear-gradient(180deg,
        rgba(28, 24, 35, 0.98) 0%,
        rgba(22, 18, 28, 0.99) 50%,
        rgba(18, 15, 24, 1) 100%);

    /* Ornate border */
    border: 1px solid rgba(120, 100, 150, 0.35);
    border-radius: 14px;

    /* Depth and glow */
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.04),
        inset 0 -2px 0 rgba(0, 0, 0, 0.3),
        inset 0 0 30px rgba(0, 0, 0, 0.4),
        0 6px 25px rgba(0, 0, 0, 0.5);
}

/* Top glow decoration */
.hero-inventory-grid::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 40px;
    right: 40px;
    height: 3px;
    background: linear-gradient(90deg,
        transparent,
        rgba(147, 112, 219, 0.5),
        rgba(212, 168, 75, 0.4),
        rgba(147, 112, 219, 0.5),
        transparent);
    border-radius: 0 0 3px 3px;
    z-index: 1;
}

/* Bottom rune decoration */
.hero-inventory-grid::after {
    content: '⬡ ⬢ ⬡';
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 8px;
    color: rgba(147, 112, 219, 0.3);
    letter-spacing: 6px;
}

/* ===== INVENTORY SLOT - BG3 Style ===== */
.hero-inv-slot {
    aspect-ratio: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    /* BG3 slot background */
    background: linear-gradient(145deg,
        rgba(35, 30, 45, 0.95) 0%,
        rgba(25, 22, 32, 0.98) 50%,
        rgba(20, 18, 26, 1) 100%);

    /* Ornate border */
    border: 2px solid rgba(100, 85, 120, 0.5);
    border-radius: 10px;

    /* Depth shadows */
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.5),
        inset 0 -1px 0 rgba(255, 255, 255, 0.04),
        0 3px 8px rgba(0, 0, 0, 0.4);
}

/* Inner frame decoration */
.hero-inv-slot::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    border: 1px solid rgba(140, 120, 170, 0.15);
    border-radius: 7px;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.03) 0%,
        transparent 40%,
        rgba(0, 0, 0, 0.1) 100%);
}

/* Corner accents for filled slots */
.hero-inv-slot:not(.empty)::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 6px;
    height: 6px;
    border-left: 1px solid rgba(212, 168, 75, 0.4);
    border-top: 1px solid rgba(212, 168, 75, 0.4);
    border-radius: 2px 0 0 0;
    pointer-events: none;
}

/* Hover state - BG3 glow */
.hero-inv-slot:hover {
    border-color: rgba(147, 112, 219, 0.8);
    transform: scale(1.1) translateY(-3px);
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.4),
        0 6px 20px rgba(147, 112, 219, 0.4),
        0 0 30px rgba(147, 112, 219, 0.2);
}

/* Active/pressed state */
.hero-inv-slot:active {
    transform: scale(0.95);
    box-shadow:
        inset 0 4px 10px rgba(0, 0, 0, 0.7),
        0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Empty slot - subtle dashed border */
.hero-inv-slot.empty {
    opacity: 0.35;
    border-style: dashed;
    border-color: rgba(80, 70, 100, 0.4);
}

.hero-inv-slot.empty::before {
    border-color: rgba(80, 70, 100, 0.1);
}

.hero-inv-slot.empty::after {
    display: none;
}

/* ===== INVENTORY RARITY STYLES - BG3 Enhanced ===== */

/* Common - Gray subtle */
.hero-inv-slot.common {
    border-color: rgba(157, 157, 157, 0.7);
}

.hero-inv-slot.common:hover {
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.4),
        0 4px 15px rgba(157, 157, 157, 0.3);
}

/* Uncommon - Green */
.hero-inv-slot.uncommon {
    border-color: rgba(30, 255, 0, 0.7);
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.5),
        0 0 8px rgba(30, 255, 0, 0.2);
}

.hero-inv-slot.uncommon:hover {
    border-color: #1eff00;
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.4),
        0 4px 20px rgba(30, 255, 0, 0.4),
        0 0 30px rgba(30, 255, 0, 0.2);
}

/* Rare - Blue glow */
.hero-inv-slot.rare {
    border-color: rgba(0, 112, 221, 0.8);
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.5),
        0 0 10px rgba(0, 112, 221, 0.3),
        0 0 20px rgba(0, 112, 221, 0.15);
}

.hero-inv-slot.rare:hover {
    border-color: #0070dd;
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.4),
        0 6px 25px rgba(0, 112, 221, 0.5),
        0 0 40px rgba(0, 112, 221, 0.25);
}

/* Epic - Purple pulsing glow */
.hero-inv-slot.epic {
    border-color: rgba(163, 53, 238, 0.85);
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.5),
        0 0 12px rgba(163, 53, 238, 0.4),
        0 0 24px rgba(163, 53, 238, 0.2);
    animation: invEpicPulse 3s ease-in-out infinite;
}

@keyframes invEpicPulse {
    0%, 100% {
        box-shadow:
            inset 0 2px 6px rgba(0, 0, 0, 0.5),
            0 0 12px rgba(163, 53, 238, 0.4),
            0 0 24px rgba(163, 53, 238, 0.2);
    }
    50% {
        box-shadow:
            inset 0 2px 6px rgba(0, 0, 0, 0.5),
            0 0 18px rgba(163, 53, 238, 0.6),
            0 0 35px rgba(163, 53, 238, 0.3);
    }
}

.hero-inv-slot.epic:hover {
    border-color: #a335ee;
    animation: none;
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.4),
        0 6px 30px rgba(163, 53, 238, 0.6),
        0 0 50px rgba(163, 53, 238, 0.35);
}

/* Legendary - Orange/Gold intense glow with particles */
.hero-inv-slot.legendary {
    border-color: rgba(255, 128, 0, 0.9);
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.5),
        0 0 15px rgba(255, 128, 0, 0.5),
        0 0 30px rgba(255, 128, 0, 0.25),
        0 0 45px rgba(255, 128, 0, 0.15);
    animation: invLegendaryGlow 2.5s ease-in-out infinite;
}

@keyframes invLegendaryGlow {
    0%, 100% {
        box-shadow:
            inset 0 2px 6px rgba(0, 0, 0, 0.5),
            0 0 15px rgba(255, 128, 0, 0.5),
            0 0 30px rgba(255, 128, 0, 0.25),
            0 0 45px rgba(255, 128, 0, 0.15);
    }
    50% {
        box-shadow:
            inset 0 2px 6px rgba(0, 0, 0, 0.5),
            0 0 22px rgba(255, 128, 0, 0.7),
            0 0 45px rgba(255, 128, 0, 0.4),
            0 0 70px rgba(255, 128, 0, 0.2);
    }
}

/* Legendary sparkle particles overlay */
.hero-inv-slot.legendary::after {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: 12px;
    background:
        radial-gradient(circle at 15% 15%, rgba(255, 215, 0, 0.9) 0%, transparent 25%),
        radial-gradient(circle at 85% 20%, rgba(255, 128, 0, 0.7) 0%, transparent 20%),
        radial-gradient(circle at 25% 85%, rgba(255, 200, 50, 0.8) 0%, transparent 22%),
        radial-gradient(circle at 75% 75%, rgba(255, 150, 0, 0.6) 0%, transparent 18%);
    animation: invLegendarySparkle 4s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes invLegendarySparkle {
    0%, 100% {
        opacity: 0.4;
        transform: rotate(0deg);
    }
    25% { opacity: 0.9; }
    50% {
        opacity: 0.5;
        transform: rotate(180deg);
    }
    75% { opacity: 1; }
}

.hero-inv-slot.legendary:hover {
    border-color: #ff8000;
    animation: none;
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.4),
        0 6px 35px rgba(255, 128, 0, 0.65),
        0 0 60px rgba(255, 128, 0, 0.4),
        0 0 90px rgba(255, 128, 0, 0.2);
}

/* Legendary icon glow */
.hero-inv-slot.legendary .hero-item-icon {
    filter: drop-shadow(0 0 6px rgba(255, 200, 50, 0.9));
    position: relative;
    z-index: 2;
}

/* ===== EQUIPMENT SLOT RARITY EFFECTS ===== */

/* Equipment Epic Glow Effect */
.hero-equip-slot.epic {
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.5),
        0 0 10px rgba(163, 53, 238, 0.4),
        0 0 20px rgba(163, 53, 238, 0.2);
    animation: equipEpicPulse 3s ease-in-out infinite;
}

@keyframes equipEpicPulse {
    0%, 100% {
        box-shadow:
            inset 0 2px 4px rgba(0, 0, 0, 0.5),
            0 0 10px rgba(163, 53, 238, 0.4),
            0 0 20px rgba(163, 53, 238, 0.2);
    }
    50% {
        box-shadow:
            inset 0 2px 4px rgba(0, 0, 0, 0.5),
            0 0 15px rgba(163, 53, 238, 0.6),
            0 0 30px rgba(163, 53, 238, 0.3);
    }
}

/* Equipment Legendary Glow Effect */
.hero-equip-slot.legendary {
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.5),
        0 0 12px rgba(255, 128, 0, 0.5),
        0 0 25px rgba(255, 128, 0, 0.3),
        0 0 40px rgba(255, 128, 0, 0.15);
    animation: equipLegendaryGlow 2.5s ease-in-out infinite;
    position: relative;
}

@keyframes equipLegendaryGlow {
    0%, 100% {
        box-shadow:
            inset 0 2px 4px rgba(0, 0, 0, 0.5),
            0 0 12px rgba(255, 128, 0, 0.5),
            0 0 25px rgba(255, 128, 0, 0.3),
            0 0 40px rgba(255, 128, 0, 0.15);
    }
    50% {
        box-shadow:
            inset 0 2px 4px rgba(0, 0, 0, 0.5),
            0 0 18px rgba(255, 128, 0, 0.7),
            0 0 38px rgba(255, 128, 0, 0.4),
            0 0 55px rgba(255, 128, 0, 0.2);
    }
}

/* Equipment Legendary Sparkle Particles */
.hero-equip-slot.legendary::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 10px;
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 215, 0, 0.8) 0%, transparent 22%),
        radial-gradient(circle at 80% 30%, rgba(255, 128, 0, 0.6) 0%, transparent 18%),
        radial-gradient(circle at 30% 80%, rgba(255, 200, 50, 0.7) 0%, transparent 20%),
        radial-gradient(circle at 70% 70%, rgba(255, 150, 0, 0.5) 0%, transparent 15%);
    animation: equipLegendarySparkle 4s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes equipLegendarySparkle {
    0%, 100% { opacity: 0.35; transform: rotate(0deg); }
    25% { opacity: 0.85; }
    50% { opacity: 0.45; transform: rotate(180deg); }
    75% { opacity: 0.95; }
}

/* Equipment Legendary Icon Glow */
.hero-equip-slot.legendary .hero-equipped-item-icon {
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 0 5px rgba(255, 200, 50, 0.8));
}

/* Equipment Rare - Blue Glow */
.hero-equip-slot.rare {
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.5),
        0 0 8px rgba(0, 112, 221, 0.35),
        0 0 16px rgba(0, 112, 221, 0.18);
}

/* Equipment Uncommon - Green subtle */
.hero-equip-slot.uncommon {
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.5),
        0 0 6px rgba(30, 255, 0, 0.25);
}

/* ===== SET ITEM INDICATOR ===== */
/* Items that belong to a set get a special indicator */
.hero-inv-slot.has-set,
.hero-equip-slot.has-set {
    position: relative;
}

/* Set indicator badge - positioned as a floating element */
.hero-inv-slot.has-set .set-indicator,
.hero-equip-slot.has-set .set-indicator {
    position: absolute;
    top: -5px;
    right: -5px;
    font-size: 11px;
    z-index: 5;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.9));
}

/* ===== INVENTORY ITEM COUNT BADGE - BG3 Style ===== */
.hero-inv-slot .count {
    position: absolute;
    bottom: 2px;
    right: 3px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;

    /* BG3 badge style */
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    font-family: 'Cinzel', serif;

    /* Dark background with border */
    background: linear-gradient(180deg,
        rgba(35, 28, 45, 0.95) 0%,
        rgba(20, 16, 28, 0.98) 100%);
    border: 1px solid rgba(212, 168, 75, 0.6);
    border-radius: 8px;

    /* Glow effect */
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.9),
        0 0 6px rgba(212, 168, 75, 0.4);

    z-index: 3;
}

/* ===== ITEM ACTION MENU (Long-press) ===== */
.hero-action-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 20, 0.8);
    backdrop-filter: blur(4px);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}

.hero-action-overlay.show {
    opacity: 1;
    visibility: visible;
}

.hero-action-menu {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, rgba(30, 25, 45, 0.98) 0%, rgba(20, 18, 30, 0.99) 100%);
    border-top: 2px solid rgba(147, 112, 219, 0.5);
    border-radius: 20px 20px 0 0;
    padding: 20px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    z-index: 10001;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hero-action-menu.show {
    transform: translateY(0);
}

.hero-action-menu-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.hero-action-menu-icon {
    font-size: 36px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(147, 112, 219, 0.2), rgba(72, 209, 204, 0.1));
    border-radius: 10px;
    border: 2px solid rgba(147, 112, 219, 0.4);
}

.hero-action-menu-info {
    flex: 1;
}

.hero-action-menu-name {
    display: block;
    font-family: 'Cinzel', serif;
    font-size: 16px;
    font-weight: 600;
    color: #e8d5e8;
}

.hero-action-menu-rarity {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 2px;
}

.hero-action-menu-rarity.common { color: #9d9d9d; }
.hero-action-menu-rarity.uncommon { color: #1eff00; }
.hero-action-menu-rarity.rare { color: #0070dd; }
.hero-action-menu-rarity.epic { color: #a335ee; }
.hero-action-menu-rarity.legendary { color: #ff8000; }

.hero-action-menu-stats {
    font-size: 13px;
    color: rgba(72, 209, 204, 0.9);
    margin-bottom: 16px;
    padding: 8px 12px;
    background: rgba(72, 209, 204, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(72, 209, 204, 0.2);
}

.hero-action-menu-buttons {
    display: flex;
    gap: 10px;
}

.hero-action-btn {
    flex: 1;
    padding: 14px 10px;
    border: none;
    border-radius: 10px;
    font-family: 'Cinzel', serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hero-action-btn.equip-btn {
    background: linear-gradient(135deg, rgba(30, 255, 0, 0.3), rgba(0, 200, 100, 0.2));
    color: #1eff00;
    border: 1px solid rgba(30, 255, 0, 0.4);
}

.hero-action-btn.equip-btn:active {
    transform: scale(0.95);
    background: linear-gradient(135deg, rgba(30, 255, 0, 0.5), rgba(0, 200, 100, 0.4));
}

.hero-action-btn.info-btn {
    background: linear-gradient(135deg, rgba(0, 112, 221, 0.3), rgba(0, 150, 255, 0.2));
    color: #0070dd;
    border: 1px solid rgba(0, 112, 221, 0.4);
}

.hero-action-btn.info-btn:active {
    transform: scale(0.95);
}

.hero-action-btn.drop-btn {
    background: linear-gradient(135deg, rgba(255, 80, 80, 0.3), rgba(200, 50, 50, 0.2));
    color: #ff6b6b;
    border: 1px solid rgba(255, 80, 80, 0.4);
}

.hero-action-btn.drop-btn:active {
    transform: scale(0.95);
}

/* Use button for consumables (mystery box, potions) */
.hero-action-btn.use-btn {
    background: linear-gradient(135deg, rgba(212, 168, 75, 0.4), rgba(163, 53, 238, 0.3));
    color: #ffd700;
    border: 1px solid rgba(212, 168, 75, 0.5);
    text-shadow: 0 0 8px rgba(212, 168, 75, 0.5);
    animation: use-btn-glow 2s ease-in-out infinite;
}

@keyframes use-btn-glow {
    0%, 100% { box-shadow: 0 0 5px rgba(212, 168, 75, 0.3); }
    50% { box-shadow: 0 0 15px rgba(212, 168, 75, 0.5); }
}

.hero-action-btn.use-btn:active {
    transform: scale(0.95);
    background: linear-gradient(135deg, rgba(212, 168, 75, 0.6), rgba(163, 53, 238, 0.5));
}

.hero-action-menu-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 30px;
    height: 30px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hero-action-menu-close:active {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(0.9);
}

/* Long-press visual feedback */
.hero-inv-slot.pressing,
.hero-equip-slot.pressing {
    transform: scale(0.92);
    opacity: 0.7;
}

/* ===== CHANGE CLASS BUTTON ===== */
.hero-change-class-btn {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, rgba(80, 40, 80, 0.6) 0%, rgba(60, 30, 60, 0.8) 100%);
    border: 1px solid rgba(147, 112, 219, 0.3);
    border-radius: 10px;
    color: rgba(232, 213, 232, 0.9);
    font-family: 'Cinzel', serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.2s;
}

.hero-change-class-btn:hover {
    border-color: rgba(147, 112, 219, 0.6);
    box-shadow: 0 0 15px rgba(147, 112, 219, 0.3);
}

/* ===== LOADING STATE ===== */
.hero-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: rgba(147, 112, 219, 0.8);
}

.hero-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(147, 112, 219, 0.2);
    border-top-color: #9370db;
    border-radius: 50%;
    animation: heroSpin 1s linear infinite;
    margin-bottom: 15px;
}

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

/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 420px) {
    /* Inventory toggle button - smaller on mobile */
    .hero-inventory-toggle {
        padding: 14px 16px;
        font-size: 12px;
        letter-spacing: 1.5px;
    }

    /* Inventory grid - tighter spacing */
    .hero-inventory-grid {
        padding: 16px;
        gap: 8px;
    }

    /* Inventory slots - slightly larger touch targets */
    .hero-inv-slot {
        font-size: 20px;
    }

    /* Count badge - smaller */
    .hero-inv-slot .count {
        font-size: 10px;
        min-width: 14px;
        height: 14px;
        padding: 0 3px;
    }
}

@media (max-width: 390px) {
    /* Equipment slots - still readable on small phones */
    .hero-equip-slot {
        width: 50px;
        height: 50px;
    }

    .hero-weapons-row .hero-equip-slot {
        width: 58px;
        height: 58px;
    }

    .hero-slot-icon-svg {
        width: 24px;
        height: 24px;
    }

    .hero-equipped-item-icon {
        font-size: 26px;
    }

    .hero-character-silhouette {
        width: 70px;
        height: 125px;
    }

    .hero-silhouette-icon {
        font-size: 45px;
    }
}

@media (max-width: 360px) {
    /* Equipment slots - minimum readable size */
    .hero-equip-slot {
        width: 46px;
        height: 46px;
    }

    .hero-weapons-row .hero-equip-slot {
        width: 54px;
        height: 54px;
    }

    .hero-slot-icon-svg {
        width: 22px;
        height: 22px;
    }

    .hero-equipped-item-icon {
        font-size: 24px;
    }

    .hero-character-silhouette {
        width: 65px;
        height: 115px;
    }

    .hero-silhouette-icon {
        font-size: 40px;
    }

    /* Equipment container - tighter */
    .hero-equipment-container {
        gap: 6px;
    }

    .hero-equip-column {
        gap: 5px;
    }

    /* 4 columns on very small screens */
    .hero-inventory-grid {
        grid-template-columns: repeat(4, 1fr);
        padding: 14px;
        gap: 7px;
    }

    /* Inventory toggle - compact */
    .hero-inventory-toggle {
        padding: 12px 14px;
        font-size: 11px;
        letter-spacing: 1px;
    }

    .hero-inventory-toggle::before {
        left: 20px;
        right: 20px;
    }

    /* Smaller inventory slots */
    .hero-inv-slot {
        font-size: 18px;
        border-radius: 8px;
    }

    .hero-inv-slot::before {
        top: 2px;
        left: 2px;
        right: 2px;
        bottom: 2px;
        border-radius: 6px;
    }

    /* Smaller decorations */
    .hero-inventory-grid::after {
        font-size: 6px;
        letter-spacing: 4px;
    }
}

/* =============================================
   STAT TOOLTIP - Baldur's Gate 3 Style
   ============================================= */

.bg3-tooltip {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.bg3-tooltip.show {
    opacity: 1;
}

.bg3-tooltip-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
}

.bg3-tooltip-card {
    position: relative;
    width: 92%;
    max-width: 360px;
    background:
        linear-gradient(180deg,
            rgba(35, 30, 25, 0.98) 0%,
            rgba(25, 22, 18, 0.99) 50%,
            rgba(20, 18, 15, 1) 100%);
    border: 1px solid rgba(180, 150, 100, 0.3);
    border-radius: 4px;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.8),
        0 4px 20px rgba(0, 0, 0, 0.6),
        0 8px 40px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 230, 180, 0.1);
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}

.bg3-tooltip.show .bg3-tooltip-card {
    transform: scale(1) translateY(0);
}

/* Corner decorations */
.bg3-corner {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(180, 150, 100, 0.5);
    pointer-events: none;
}

.bg3-corner-tl { top: 8px; left: 8px; border-right: none; border-bottom: none; }
.bg3-corner-tr { top: 8px; right: 8px; border-left: none; border-bottom: none; }
.bg3-corner-bl { bottom: 8px; left: 8px; border-right: none; border-top: none; }
.bg3-corner-br { bottom: 8px; right: 8px; border-left: none; border-top: none; }

/* Header */
.bg3-tooltip-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px 16px;
}

.bg3-stat-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.bg3-stat-info {
    flex: 1;
}

.bg3-stat-name {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    color: #f5e6d3;
    font-family: 'Cinzel', 'Georgia', serif;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.5px;
}

.bg3-stat-value {
    font-size: 28px;
    font-weight: 700;
    font-family: 'Cinzel', 'Georgia', serif;
    text-shadow: 0 0 10px currentColor;
}

.bg3-capped {
    font-size: 14px;
    color: #888;
    font-weight: 400;
    margin-left: 4px;
}

/* Divider */
.bg3-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    margin: 4px 0 12px;
}

.bg3-divider::before,
.bg3-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(180, 150, 100, 0.4), transparent);
}

.bg3-divider-gem {
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
    margin: 0 12px;
    opacity: 0.8;
}

/* Description */
.bg3-description {
    margin: 0;
    padding: 0 24px 16px;
    color: #c4b89a;
    font-size: 14px;
    line-height: 1.6;
    font-style: italic;
}

/* Bonus Box */
.bg3-bonus-box {
    margin: 0 20px 16px;
    padding: 16px 20px;
    border: 1px solid;
    border-radius: 4px;
    text-align: center;
}

.bg3-bonus-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #998877;
    margin-bottom: 6px;
}

.bg3-bonus-value {
    font-size: 22px;
    font-weight: 700;
    font-family: 'Cinzel', 'Georgia', serif;
    text-shadow: 0 0 15px currentColor;
}

/* Progress Section */
.bg3-progress-section {
    padding: 0 24px 16px;
}

.bg3-progress-bar {
    position: relative;
    height: 6px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    border: 1px solid rgba(180, 150, 100, 0.2);
    overflow: hidden;
}

.bg3-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 2px;
    transition: width 0.5s ease;
}

.bg3-progress-glow {
    position: absolute;
    top: -2px;
    left: 0;
    height: 10px;
    filter: blur(4px);
    opacity: 0.6;
    transition: width 0.5s ease;
}

.bg3-progress-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 11px;
    color: #665544;
}

.bg3-progress-current {
    color: #b4a078;
    font-weight: 600;
}

/* Tip */
.bg3-tip {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 20px 20px;
    padding: 12px 16px;
    background: rgba(180, 150, 100, 0.08);
    border-radius: 4px;
    border-left: 3px solid rgba(180, 150, 100, 0.4);
}

.bg3-tip-icon {
    font-size: 18px;
}

.bg3-tip-text {
    font-size: 13px;
    color: #a89878;
    line-height: 1.4;
}

/* Close Button */
.bg3-close-btn {
    width: 100%;
    padding: 16px;
    background: linear-gradient(180deg, rgba(60, 50, 40, 0.9) 0%, rgba(40, 35, 28, 0.95) 100%);
    border: none;
    border-top: 1px solid rgba(180, 150, 100, 0.2);
    color: #d4c4a8;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Cinzel', 'Georgia', serif;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
}

.bg3-close-btn:hover {
    background: linear-gradient(180deg, rgba(80, 65, 50, 0.95) 0%, rgba(50, 42, 32, 0.98) 100%);
    color: #f5e6d3;
}

.bg3-close-btn:active {
    transform: scale(0.98);
}

/* Hover effect for stat items */
.hero-stat-item {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.hero-stat-item:active {
    transform: scale(0.95);
}

/* =============================================
   ITEM TOOLTIP - RPG Style (BG3/WoW/Diablo)
   Beautiful ornate tooltip for inventory items
   ============================================= */

/* Overlay with blur */
.rpg-tooltip-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.92) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s ease;
}

.rpg-tooltip-overlay.show {
    opacity: 1;
    visibility: visible;
}

/* Main tooltip container */
.rpg-item-tooltip {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10001;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.rpg-item-tooltip.show {
    transform: translateY(0);
}

/* Tooltip card */
.rpg-tooltip-card {
    position: relative;
    margin: 0 auto;
    max-width: 420px;
    background: linear-gradient(180deg,
        rgba(28, 24, 36, 0.98) 0%,
        rgba(18, 16, 24, 0.99) 50%,
        rgba(12, 10, 18, 1) 100%);
    border-radius: 20px 20px 0 0;
    overflow: hidden;
    box-shadow:
        0 -4px 30px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(100, 80, 120, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Rarity glow border at top */
.rpg-tooltip-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--rarity-color, #9d9d9d);
    box-shadow: 0 0 20px var(--rarity-color, #9d9d9d),
                0 0 40px var(--rarity-glow, rgba(157, 157, 157, 0.5));
}

/* Animated shimmer effect */
.rpg-tooltip-shimmer {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    animation: rpgShimmer 3s ease-in-out infinite;
}

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

/* Decorative corners */
.rpg-corner {
    position: absolute;
    width: 24px;
    height: 24px;
    pointer-events: none;
    z-index: 5;
}

.rpg-corner::before,
.rpg-corner::after {
    content: '';
    position: absolute;
    background: var(--rarity-color, #9d9d9d);
    opacity: 0.6;
}

.rpg-corner-tl { top: 12px; left: 12px; }
.rpg-corner-tr { top: 12px; right: 12px; }
.rpg-corner-tl::before { width: 16px; height: 2px; top: 0; left: 0; }
.rpg-corner-tl::after { width: 2px; height: 16px; top: 0; left: 0; }
.rpg-corner-tr::before { width: 16px; height: 2px; top: 0; right: 0; }
.rpg-corner-tr::after { width: 2px; height: 16px; top: 0; right: 0; }

/* Close button */
.rpg-tooltip-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rpg-tooltip-close:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.rpg-tooltip-close:active {
    transform: scale(0.9);
}

/* Item header */
.rpg-item-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 24px 16px;
    position: relative;
}

/* Item icon with animated frame */
.rpg-item-icon-frame {
    position: relative;
    width: 72px;
    height: 72px;
    flex-shrink: 0;
}

.rpg-item-icon-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, rgba(40, 35, 50, 0.95), rgba(25, 22, 32, 0.98));
    border-radius: 12px;
    border: 2px solid var(--rarity-color, #9d9d9d);
    box-shadow:
        inset 0 2px 8px rgba(0, 0, 0, 0.5),
        0 0 15px var(--rarity-glow, rgba(157, 157, 157, 0.3));
}

.rpg-item-icon {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    z-index: 2;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

/* Legendary/Epic animated border */
.rpg-item-icon-frame.legendary .rpg-item-icon-bg,
.rpg-item-icon-frame.epic .rpg-item-icon-bg {
    animation: rpgIconPulse 2s ease-in-out infinite;
}

@keyframes rpgIconPulse {
    0%, 100% { box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 15px var(--rarity-glow); }
    50% { box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 30px var(--rarity-glow), 0 0 50px var(--rarity-glow); }
}

/* Legendary sparkle particles */
.rpg-item-icon-frame.legendary::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 14px;
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 215, 0, 0.8) 0%, transparent 20%),
        radial-gradient(circle at 80% 30%, rgba(255, 128, 0, 0.6) 0%, transparent 15%),
        radial-gradient(circle at 30% 80%, rgba(255, 200, 50, 0.7) 0%, transparent 18%);
    animation: rpgSparkle 4s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes rpgSparkle {
    0%, 100% { opacity: 0.4; transform: rotate(0deg); }
    50% { opacity: 0.9; transform: rotate(180deg); }
}

/* Item info */
.rpg-item-info {
    flex: 1;
    min-width: 0;
}

.rpg-item-name {
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--rarity-color, #e8d5e8);
    margin: 0 0 4px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    line-height: 1.2;
}

.rpg-item-type {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.rpg-item-slot {
    font-size: 11px;
    color: rgba(200, 190, 220, 0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.rpg-item-rarity {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    background: var(--rarity-bg, rgba(157, 157, 157, 0.15));
    border: 1px solid var(--rarity-color, #9d9d9d);
    border-radius: 20px;
    font-size: 10px;
    font-weight: 600;
    color: var(--rarity-color, #9d9d9d);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.rpg-rarity-gem {
    width: 6px;
    height: 6px;
    background: var(--rarity-color, #9d9d9d);
    border-radius: 50%;
    box-shadow: 0 0 6px var(--rarity-color, #9d9d9d);
}

/* Divider */
.rpg-divider {
    display: flex;
    align-items: center;
    padding: 0 20px;
    margin: 0 0 12px;
}

.rpg-divider-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(147, 112, 219, 0.4), transparent);
}

.rpg-divider-gem {
    width: 8px;
    height: 8px;
    background: var(--rarity-color, rgba(147, 112, 219, 0.6));
    transform: rotate(45deg);
    margin: 0 12px;
    box-shadow: 0 0 8px var(--rarity-glow, rgba(147, 112, 219, 0.4));
}

/* Stats section */
.rpg-item-stats {
    padding: 0 20px 16px;
}

.rpg-stats-box {
    background: linear-gradient(135deg, rgba(72, 209, 204, 0.08), rgba(147, 112, 219, 0.05));
    border: 1px solid rgba(72, 209, 204, 0.25);
    border-radius: 8px;
    padding: 14px 16px;
}

.rpg-stats-title {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(72, 209, 204, 0.7);
    margin-bottom: 8px;
}

.rpg-stats-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.rpg-stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}

.rpg-stat-icon {
    font-size: 14px;
}

.rpg-stat-value {
    color: #90ee90;
    font-weight: 600;
    font-family: 'Cinzel', serif;
}

.rpg-stat-name {
    color: rgba(200, 200, 220, 0.8);
}

/* Description */
.rpg-item-description {
    padding: 0 20px 16px;
}

.rpg-description-box {
    background: rgba(0, 0, 0, 0.25);
    border-left: 3px solid var(--rarity-color, rgba(147, 112, 219, 0.5));
    border-radius: 0 6px 6px 0;
    padding: 12px 16px;
}

.rpg-description-text {
    margin: 0;
    font-size: 13px;
    color: #c4b89a;
    font-style: italic;
    line-height: 1.5;
}

/* Flavor text (for set items, special items) */
.rpg-flavor-text {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(147, 112, 219, 0.2);
    font-size: 12px;
    color: rgba(212, 168, 75, 0.8);
    font-style: italic;
}

/* Set bonus display */
.rpg-set-info {
    padding: 0 20px 16px;
}

.rpg-set-box {
    background: linear-gradient(135deg, rgba(163, 53, 238, 0.1), rgba(72, 209, 204, 0.05));
    border: 1px solid rgba(163, 53, 238, 0.3);
    border-radius: 8px;
    padding: 12px 16px;
}

.rpg-set-name {
    font-family: 'Cinzel', serif;
    font-size: 13px;
    font-weight: 600;
    color: #48d1cc;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.rpg-set-bonus {
    font-size: 12px;
    color: rgba(200, 190, 220, 0.8);
    line-height: 1.4;
}

/* Action buttons container */
.rpg-action-buttons {
    display: flex;
    gap: 10px;
    padding: 16px 20px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.3));
}

/* Base action button */
.rpg-action-btn {
    flex: 1;
    position: relative;
    padding: 14px 8px;
    border: none;
    border-radius: 10px;
    font-family: 'Cinzel', serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.rpg-action-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent);
    pointer-events: none;
}

.rpg-action-btn-icon {
    font-size: 18px;
}

.rpg-action-btn-text {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Use button - Gold/Purple gradient (for mystery box, consumables) */
.rpg-action-btn.use {
    background: linear-gradient(135deg, rgba(212, 168, 75, 0.4) 0%, rgba(163, 53, 238, 0.35) 100%);
    border: 1px solid rgba(212, 168, 75, 0.5);
    color: #ffd700;
    text-shadow: 0 0 10px rgba(212, 168, 75, 0.5);
    animation: rpgUseGlow 2.5s ease-in-out infinite;
}

@keyframes rpgUseGlow {
    0%, 100% { box-shadow: 0 0 10px rgba(212, 168, 75, 0.3), inset 0 0 20px rgba(212, 168, 75, 0.1); }
    50% { box-shadow: 0 0 25px rgba(212, 168, 75, 0.5), inset 0 0 30px rgba(212, 168, 75, 0.2); }
}

.rpg-action-btn.use:active {
    transform: scale(0.95);
    box-shadow: 0 0 30px rgba(212, 168, 75, 0.6);
}

/* Equip button - Green */
.rpg-action-btn.equip {
    background: linear-gradient(135deg, rgba(30, 255, 0, 0.25) 0%, rgba(0, 180, 100, 0.2) 100%);
    border: 1px solid rgba(30, 255, 0, 0.4);
    color: #1eff00;
    text-shadow: 0 0 8px rgba(30, 255, 0, 0.4);
}

.rpg-action-btn.equip:active {
    transform: scale(0.95);
    background: linear-gradient(135deg, rgba(30, 255, 0, 0.4), rgba(0, 180, 100, 0.35));
}

/* Info button - Blue */
.rpg-action-btn.info {
    background: linear-gradient(135deg, rgba(0, 112, 221, 0.25) 0%, rgba(0, 150, 255, 0.2) 100%);
    border: 1px solid rgba(0, 112, 221, 0.4);
    color: #0070dd;
    text-shadow: 0 0 8px rgba(0, 112, 221, 0.4);
}

.rpg-action-btn.info:active {
    transform: scale(0.95);
}

/* Drop button - Red */
.rpg-action-btn.drop {
    background: linear-gradient(135deg, rgba(255, 80, 80, 0.25) 0%, rgba(180, 50, 50, 0.2) 100%);
    border: 1px solid rgba(255, 80, 80, 0.4);
    color: #ff6b6b;
    text-shadow: 0 0 8px rgba(255, 80, 80, 0.4);
}

.rpg-action-btn.drop:active {
    transform: scale(0.95);
}

/* Quantity badge for consumables */
.rpg-item-quantity {
    position: absolute;
    bottom: 4px;
    right: 4px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(30, 25, 40, 0.95));
    border: 1px solid var(--rarity-color, rgba(147, 112, 219, 0.5));
    border-radius: 11px;
    font-family: 'Cinzel', serif;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Rarity color variables */
.rpg-rarity-common {
    --rarity-color: #9d9d9d;
    --rarity-glow: rgba(157, 157, 157, 0.4);
    --rarity-bg: rgba(157, 157, 157, 0.1);
}

.rpg-rarity-uncommon {
    --rarity-color: #1eff00;
    --rarity-glow: rgba(30, 255, 0, 0.4);
    --rarity-bg: rgba(30, 255, 0, 0.1);
}

.rpg-rarity-rare {
    --rarity-color: #0070dd;
    --rarity-glow: rgba(0, 112, 221, 0.4);
    --rarity-bg: rgba(0, 112, 221, 0.1);
}

.rpg-rarity-epic {
    --rarity-color: #a335ee;
    --rarity-glow: rgba(163, 53, 238, 0.5);
    --rarity-bg: rgba(163, 53, 238, 0.15);
}

.rpg-rarity-legendary {
    --rarity-color: #ff8000;
    --rarity-glow: rgba(255, 128, 0, 0.5);
    --rarity-bg: rgba(255, 128, 0, 0.15);
}

/* Responsive adjustments */
@media (max-width: 380px) {
    .rpg-item-name {
        font-size: 18px;
    }

    .rpg-item-icon-frame {
        width: 64px;
        height: 64px;
    }

    .rpg-item-icon {
        font-size: 34px;
    }

    .rpg-action-btn {
        padding: 12px 6px;
    }

    .rpg-action-btn-icon {
        font-size: 16px;
    }
}

/* =============================================
   GAME UNLOCK KEY - Special Button Style
   ============================================= */

.rpg-action-btn.use.unlock-key {
    background: linear-gradient(135deg, rgba(0, 255, 128, 0.3) 0%, rgba(0, 200, 255, 0.25) 100%);
    border: 1px solid rgba(0, 255, 128, 0.5);
    color: #00ff80;
    text-shadow: 0 0 10px rgba(0, 255, 128, 0.5);
    animation: unlockKeyGlow 2s ease-in-out infinite;
}

@keyframes unlockKeyGlow {
    0%, 100% {
        box-shadow: 0 0 10px rgba(0, 255, 128, 0.3), inset 0 0 20px rgba(0, 255, 128, 0.1);
    }
    50% {
        box-shadow: 0 0 25px rgba(0, 255, 128, 0.5), inset 0 0 30px rgba(0, 255, 128, 0.2);
    }
}

/* =============================================
   GAME UNLOCK CELEBRATION
   ============================================= */

.game-unlock-celebration {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.game-unlock-celebration.show {
    opacity: 1;
    visibility: visible;
}

.game-unlock-backdrop {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(0, 100, 50, 0.8) 0%, rgba(0, 0, 0, 0.95) 100%);
    backdrop-filter: blur(10px);
}

.game-unlock-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 40px 50px;
    background: linear-gradient(180deg, rgba(28, 40, 36, 0.98) 0%, rgba(18, 26, 24, 0.99) 100%);
    border-radius: 20px;
    border: 2px solid rgba(0, 255, 128, 0.4);
    box-shadow:
        0 0 50px rgba(0, 255, 128, 0.3),
        0 0 100px rgba(0, 255, 128, 0.2),
        inset 0 0 30px rgba(0, 255, 128, 0.1);
    transform: scale(0.8);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.game-unlock-celebration.show .game-unlock-content {
    transform: scale(1);
}

.game-unlock-icon {
    font-size: 72px;
    margin-bottom: 16px;
    animation: unlockBounce 1s ease-in-out infinite;
}

@keyframes unlockBounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-10px) scale(1.1); }
}

.game-unlock-title {
    font-family: 'Cinzel', serif;
    font-size: 28px;
    font-weight: 700;
    color: #00ff80;
    text-shadow: 0 0 20px rgba(0, 255, 128, 0.6);
    margin-bottom: 8px;
}

.game-unlock-name {
    font-family: 'Cinzel', serif;
    font-size: 22px;
    font-weight: 600;
    color: #ffd700;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
    margin-bottom: 16px;
}

.game-unlock-stars {
    display: flex;
    justify-content: center;
    gap: 20px;
    font-size: 32px;
    margin-bottom: 24px;
}

.game-unlock-stars span {
    animation: starTwinkle 1.5s ease-in-out infinite;
}

.game-unlock-stars span:nth-child(2) {
    animation-delay: 0.3s;
    font-size: 40px;
}

.game-unlock-stars span:nth-child(3) {
    animation-delay: 0.6s;
}

@keyframes starTwinkle {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.7; }
    50% { transform: scale(1.2) rotate(15deg); opacity: 1; }
}

.game-unlock-btn {
    padding: 14px 40px;
    background: linear-gradient(135deg, rgba(0, 255, 128, 0.4) 0%, rgba(0, 200, 100, 0.3) 100%);
    border: 2px solid rgba(0, 255, 128, 0.6);
    border-radius: 12px;
    color: #fff;
    font-family: 'Cinzel', serif;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.game-unlock-btn:active {
    transform: scale(0.95);
    background: linear-gradient(135deg, rgba(0, 255, 128, 0.6), rgba(0, 200, 100, 0.5));
}