/* GROUPFINDER v2.4.16 - homepage carousel arrows + compact profile level badge */

/* Desktop: small, unobtrusive arrows placed directly on the featured article. */
.gf-home-carousel-arrow {
    position: absolute;
    z-index: 8;
    top: 50%;
    width: 30px;
    height: 54px;
    padding: 0;
    border: 0;
    display: none;
    place-items: center;
    transform: translateY(-50%);
    background: transparent;
    color: #c6b2ff;
    cursor: pointer;
    opacity: .88;
    transition: opacity .16s ease, color .16s ease, transform .16s ease;
}

.gf-home-carousel-arrow::before {
    content: "";
    width: 11px;
    height: 11px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
}

.gf-home-carousel-arrow.is-prev {
    left: 4px;
}

.gf-home-carousel-arrow.is-prev::before {
    transform: rotate(-135deg);
}

.gf-home-carousel-arrow.is-next {
    right: 4px;
}

.gf-home-carousel-arrow.is-next::before {
    transform: rotate(45deg);
}

.gf-home-carousel-arrow:hover,
.gf-home-carousel-arrow:focus-visible {
    color: #eadfff;
    opacity: 1;
    outline: 0;
}

.gf-home-carousel-arrow.is-prev:hover {
    transform: translate(-2px, -50%);
}

.gf-home-carousel-arrow.is-next:hover {
    transform: translate(2px, -50%);
}

@media (min-width: 821px) {
    .gf-home-feature-carousel:has([data-home-article-slide] + [data-home-article-slide]) .gf-home-carousel-arrow {
        display: grid;
    }
}

/* Touch devices: vertical page scrolling stays natural, horizontal swipe changes article. */
@media (max-width: 820px) {
    .gf-home-feature-carousel {
        touch-action: pan-y pinch-zoom;
    }

    .gf-home-carousel-arrow {
        display: none !important;
    }
}

/* Profile: level behaves like a small gaming badge attached to the avatar. */
.gf-profile-avatar-large {
    overflow: visible;
}

.gf-profile-avatar-large .gf-profile-level-badge {
    position: absolute;
    z-index: 4;
    left: 8px;
    bottom: -11px;
    min-height: 24px;
    padding: 0 9px;
    border: 1px solid rgba(198, 178, 255, .52);
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 14, 20, .94);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .32);
    color: #e2d7ff;
    font: 700 10px/1 "Barlow", sans-serif;
    letter-spacing: .07em;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    backdrop-filter: blur(8px);
}

.gf-profile-avatar-large .gf-profile-level-badge:hover {
    border-color: rgba(198, 178, 255, .84);
    background: rgba(28, 24, 37, .97);
    color: #fff;
}

@media (max-width: 720px) {
    .gf-profile-avatar-large .gf-profile-level-badge {
        left: 6px;
        bottom: -9px;
        min-height: 22px;
        padding: 0 8px;
        font-size: 9px;
    }
}