:root {
    --renowned-gradient: linear-gradient(
        135deg,
        #7a5f96 0%,
        #9277b3 25%,
        #6f5497 50%,
        #543a82 75%,
        #6f5497 100%
    );
    --seasoned-gradient: linear-gradient(
        135deg,
        #ffd700 0%,
        #ffed4e 25%,
        #ffb347 50%,
        #cd853f 75%,
        #b8860b 100%
    );
    --rookie-gradient: linear-gradient(
        135deg,
        #c0c0c0 0%,
        #e0e0e0 15%,
        #a0a0a0 30%,
        #d0d0d0 45%,
        #b0b0b0 60%,
        #e0e0e0 75%,
        #c0c0c0 100%
    );
    --past-gradient: linear-gradient(
        135deg,
        #cd7f32 0%,
        #d2691e 25%,
        #a0522d 50%,
        #8b4513 75%,
        #654321 100%
    );
}

h2 {
    font-size: 2.5rem;
    margin: 2rem 0 1rem;
    position: relative;
    text-align: center;
}

h3 {
    font-size: 2rem;
    margin: 2rem 0 1rem;
    position: relative;
    text-align: center;
    font-style: italic;
}

hr {
    border: 0;
    height: 2px;
    opacity: 0.7;
}

#wanderer-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin: 3rem 0;
    justify-content: center;
}

.wanderer-card {
    background: var(--card-bg);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.wanderer-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.wanderer-card.renowned-wanderer {
    border: 2px solid var(--primary);
}

.wanderer-card.seasoned-wanderer {
    border: 2px solid #ffd700;
}

.wanderer-card.rookie-wanderer {
    border: 2px solid #c0c0c0;
}

.wanderer-card.past-wanderer {
    border: 2px solid #cd7f32;
}

.card-header {
    padding: 1.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.card-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    transition: left 0.6s ease;
    z-index: 2;
    pointer-events: none;
}

.wanderer-card:hover .card-header::before {
    left: 100%;
}

.renowned-wanderer-header::before {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(146, 119, 179, 0.6),
        transparent
    );
}

.seasoned-wanderer-header::before {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 215, 0, 0.6),
        transparent
    );
}

.rookie-wanderer-header::before {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(192, 192, 192, 0.6),
        transparent
    );
}

.past-wanderer-header::before {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(205, 127, 50, 0.6),
        transparent
    );
}

.renowned-wanderer-header {
    background: var(--renowned-gradient);
}

.seasoned-wanderer-header {
    background: var(--seasoned-gradient);
}

.rookie-wanderer-header {
    background: var(--rookie-gradient);
}

.past-wanderer-header {
    background: var(--past-gradient);
}

.wanderer-name {
    font-size: 2rem;
    font-weight: bold;
}

.wanderer-rank {
    font-size: 1.5rem;
    font-style: italic;
}

.wanderer-name,
.wanderer-rank {
    color: black;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4), 0 -1px 0 rgba(0, 0, 0, 0.6),
        1px 0 0 rgba(255, 255, 255, 0.3), -1px 0 0 rgba(0, 0, 0, 0.5),
        0 2px 3px rgba(0, 0, 0, 0.3);
    margin: 0;
    position: relative;
    z-index: 3;
}

.card-badges {
    padding: 1.5rem;
}

.badge-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 1rem;
    color: var(--white);
}

.badge-label {
    font-size: 1.2rem;
    font-weight: bold;
    opacity: 0.9;
}

.icon-container {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}

.renowned-wanderer-badge::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--renowned-gradient);
    mask: url("/assets/icons/renowned-wanderer-badge.svg") no-repeat center;
    mask-size: contain;
}

.seasoned-wanderer-badge::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--seasoned-gradient);
    mask: url("/assets/icons/seasoned-wanderer-badge.svg") no-repeat center;
    mask-size: contain;
}

.rookie-wanderer-badge::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--rookie-gradient);
    mask: url("/assets/icons/rookie-wanderer-badge.svg") no-repeat center;
    mask-size: contain;
}

.past-wanderer-badge::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--past-gradient);
    mask: url("/assets/icons/past-wanderer-badge.svg") no-repeat center;
    mask-size: contain;
}

@media (max-width: 1026px) {
    #wanderer-cards {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 2rem;
        margin: 3rem 0;
        justify-content: center;
    }
}