/**
 * Levels Page - Specific Styles
 */

/* Level card with subtle gradient border */
.level-card {
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
    padding: 0.25rem;
    background-image: 
        linear-gradient(var(--surface), var(--surface)),
        linear-gradient(135deg, var(--primary), var(--accent));
    background-origin: border-box;
    background-clip: padding-box, border-box;
    transition: all var(--transition-base);
}

.level-card:hover {
    border-color: transparent;
    transform: translateY(-4px);
    box-shadow: 0 12px 24px -8px rgba(244, 63, 94, 0.3);
}

[data-theme="dark"] .level-card:hover {
    box-shadow: 0 12px 28px -8px rgba(168, 85, 247, 0.5);
}

/* Ensure badge stays on top during hover - badge must not be covered by image */
.level-card .level-badge {
    z-index: 20;
    pointer-events: none;
}

/* Ensure card image is below the badge */
.level-card .card-image {
    position: relative;
    z-index: 1;
    border-radius: var(--radius-md);
    border: none;
}

/* Scale image on hover but keep it behind badge */
.level-card .card-image.group-hover\:scale-105 {
    transform-origin: center;
}

.level-card:hover .card-image {
    z-index: 1;
}

/* Tab buttons specific to levels page */
.levels-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 2rem;
}