/* Enhanced Visual Overhaul CSS */
.visual-enhanced {
    /* Large dragon display */
    .dragon-large {
        width: 300px !important;
        height: 225px !important;
        object-fit: cover;
        border-radius: 12px;
        box-shadow: 0 8px 32px rgba(0,0,0,0.3);
        transition: all 0.4s ease;
    }
    
    .dragon-large:hover {
        transform: scale(1.05);
        box-shadow: 0 12px 48px rgba(122, 166, 255, 0.4);
    }
    
    /* Medium dragon display for cards */
    .dragon-medium {
        width: 200px !important;
        height: 150px !important;
        object-fit: cover;
        border-radius: 8px;
    }
    
    /* Large hero portraits */
    .hero-large {
        width: 250px !important;
        height: 333px !important;
        object-fit: cover;
        border-radius: 12px;
    }
    
    /* Enhanced building visuals */
    .building-large {
        width: 400px !important;
        height: 300px !important;
        object-fit: cover;
        border-radius: 8px;
    }
    
    /* Market dragon display */
    .market-dragon-image {
        width: 280px !important;
        height: 210px !important;
        object-fit: cover;
        border-radius: 10px;
        margin: 10px auto;
    }
    
    /* Village dragon display */
    .village-dragon-image {
        width: 320px !important;
        height: 240px !important;
        object-fit: cover;
        border-radius: 12px;
    }
    
    /* Card backgrounds */
    .dragon-card, .hero-card, .building-card {
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        backdrop-filter: blur(2px);
        position: relative;
        overflow: hidden;
    }
    
    .dragon-card::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: linear-gradient(135deg, 
            rgba(0,0,0,0.1) 0%, 
            rgba(255,255,255,0.05) 50%, 
            rgba(0,0,0,0.2) 100%);
        z-index: 1;
    }
    
    .dragon-card > * {
        position: relative;
        z-index: 2;
    }
}

/* Responsive visual scaling */
@media (max-width: 768px) {
    .visual-enhanced .dragon-large {
        width: 250px !important;
        height: 187px !important;
    }
    
    .visual-enhanced .market-dragon-image {
        width: 220px !important;
        height: 165px !important;
    }
}