/* FACEIT + CS2 Premier badges. Shared by cabinet and tournaments. */

.steam-card-ratings,
.glhf-cs-ratings {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    max-width: 100%;
}

.cs-rating-wrap,
a.cs-rating-link {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    max-width: 100%;
    padding: 0;
    line-height: 0;
}

a.cs-rating-link,
a.cs-rating-link:link,
a.cs-rating-link:visited,
a.cs-rating-link:hover,
a.cs-rating-link:focus,
a.cs-rating-link:active {
    color: var(--cs-ink, #f6f7fb);
    text-decoration: none;
    background: none;
    filter: none;
    box-shadow: none;
    transform: none;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: normal;
    transition: none;
}

.cs-rating-link .wpel-icon,
.cs-rating .wpel-icon {
    display: none !important;
}

.cs-rating {
    --cs-angle: -12deg;
    --cs-pip-w: 6px;
    --cs-hue: #c8c8c8;
    --cs-pip: var(--cs-hue);
    --cs-ink: var(--cs-hue);
    --cs-body: color-mix(in srgb, var(--cs-hue) 32%, #1a1818);
    display: inline-flex;
    align-items: stretch;
    height: 1.5rem;
    gap: 3px;
    color: var(--cs-ink);
    transform: skewX(var(--cs-angle));
    transform-origin: center;
    filter: none;
}

a.cs-rating-link:hover .cs-rating,
a.cs-rating-link:focus-visible .cs-rating {
    --cs-pip: color-mix(in srgb, var(--cs-hue) 78%, #fff);
    --cs-ink: color-mix(in srgb, var(--cs-hue) 82%, #fff);
    --cs-body: color-mix(in srgb, var(--cs-hue) 42%, #1a1818);
    color: var(--cs-ink);
    filter: none;
    transform: skewX(var(--cs-angle));
}

a.cs-rating-link:hover .cs-rating-value,
a.cs-rating-link:focus-visible .cs-rating-value {
    color: var(--cs-ink);
    transform: skewX(calc(-1 * var(--cs-angle)));
}

a.cs-rating-link:focus-visible {
    outline: none;
}

a.cs-rating-link:focus-visible .cs-rating {
    outline: 2px solid color-mix(in srgb, var(--cs-hue) 75%, #fff);
    outline-offset: 3px;
}

.cs-rating-pip,
.cs-rating-edge {
    width: var(--cs-pip-w);
    flex: 0 0 var(--cs-pip-w);
    background: var(--cs-pip);
}

.cs-rating-plate {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 3.85rem;
    background: var(--cs-body);
    overflow: hidden;
}

.cs-rating-edge {
    align-self: stretch;
}

.cs-rating-hash {
    position: absolute;
    left: calc(var(--cs-pip-w) + 2px);
    top: 0;
    bottom: 0;
    width: 58%;
    pointer-events: none;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--cs-pip) 28%, transparent) 0,
        color-mix(in srgb, var(--cs-pip) 28%, transparent) 2px,
        transparent 2px,
        transparent 4px,
        color-mix(in srgb, var(--cs-pip) 18%, transparent) 4px,
        color-mix(in srgb, var(--cs-pip) 18%, transparent) 6px,
        transparent 6px,
        transparent 9px,
        color-mix(in srgb, var(--cs-pip) 12%, transparent) 9px,
        color-mix(in srgb, var(--cs-pip) 12%, transparent) 11px,
        transparent 11px,
        transparent 15px,
        color-mix(in srgb, var(--cs-pip) 8%, transparent) 15px,
        color-mix(in srgb, var(--cs-pip) 8%, transparent) 16.5px,
        transparent 16.5px,
        transparent 22px,
        color-mix(in srgb, var(--cs-pip) 5%, transparent) 22px,
        color-mix(in srgb, var(--cs-pip) 5%, transparent) 23.5px,
        transparent 23.5px,
        transparent 30px,
        color-mix(in srgb, var(--cs-pip) 3%, transparent) 30px,
        color-mix(in srgb, var(--cs-pip) 3%, transparent) 31.5px,
        transparent 32px
    );
}

.cs-rating-value {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: baseline;
    padding: 0.12rem 0.58rem 0.08rem 0.3rem;
    font-family: var(--glhf-font-heading);
    font-style: italic;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    color: var(--cs-ink);
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.35);
    transform: skewX(calc(-1 * var(--cs-angle)));
    line-height: 1;
    white-space: nowrap;
}

.cs-rating-k {
    font-size: 0.97rem;
    letter-spacing: 0.01em;
}

.cs-rating-sep {
    font-size: 0.64rem;
    margin: 0 0.03em 0 0.01em;
}

.cs-rating-rest {
    font-size: 0.74rem;
    letter-spacing: 0.02em;
}

.cs-rating--gray {
    --cs-hue: #d2d2d2;
}

.cs-rating--lightblue {
    --cs-hue: #7ec8f0;
}

.cs-rating--blue {
    --cs-hue: #7b8ef5;
}

.cs-rating--purple {
    --cs-hue: #d15cff;
}

.cs-rating--pink {
    --cs-hue: #ff4ad8;
}

.cs-rating--red {
    --cs-hue: #ff4040;
}

.cs-rating--gold {
    --cs-hue: #f5d430;
}

.faceit-elo {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    flex: 0 0 auto;
    min-height: 1.5rem;
    line-height: 1;
    color: #f4f6f8;
}

a.faceit-elo,
a.faceit-elo:link,
a.faceit-elo:visited,
a.faceit-elo:hover,
a.faceit-elo:focus,
a.faceit-elo:active {
    color: #f4f6f8;
    text-decoration: none;
    background: none;
    filter: none;
    box-shadow: none;
    transition: none;
}

.faceit-elo .wpel-icon {
    display: none !important;
}

.faceit-elo-level {
    display: block;
    width: auto;
    height: 2.05rem;
    max-width: 2.05rem;
    max-height: 2.05rem;
    object-fit: contain;
    flex-shrink: 0;
}

.faceit-elo-value {
    font-family: var(--glhf-font-heading);
    font-weight: 800;
    font-size: 0.92rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    color: #f4f6f8;
}

a.faceit-elo:hover .faceit-elo-level,
a.faceit-elo:focus-visible .faceit-elo-level {
    filter: brightness(1.12);
}

a.faceit-elo:hover .faceit-elo-value,
a.faceit-elo:focus-visible .faceit-elo-value {
    color: #ffffff;
}

a.faceit-elo:focus-visible {
    outline: none;
}

a.faceit-elo:focus-visible .faceit-elo-level {
    outline: 2px solid rgba(255, 85, 0, 0.75);
    outline-offset: 2px;
}

/* Compact row next to a nick (tournaments, match roster). Same HUD, smaller. */
.glhf-cs-ratings {
    gap: 0.42rem;
}

.glhf-cs-ratings .cs-rating {
    --cs-pip-w: 5px;
    height: 1.2rem;
    gap: 2px;
}

.glhf-cs-ratings .cs-rating-plate,
.cs-rating--compact .cs-rating-plate {
    width: calc(var(--cs-pip-w) + 0.32rem);
    min-width: 0;
}

.glhf-cs-ratings .cs-rating-k {
    font-size: 0.78rem;
}

.glhf-cs-ratings .cs-rating-sep {
    font-size: 0.5rem;
}

.glhf-cs-ratings .cs-rating-rest {
    font-size: 0.6rem;
}

.glhf-cs-ratings .faceit-elo {
    gap: 0.2rem;
    min-height: 1.2rem;
}

.glhf-cs-ratings .faceit-elo-level {
    height: 1.35rem;
    max-width: 1.35rem;
    max-height: 1.35rem;
}

.glhf-cs-ratings .faceit-elo-value {
    font-size: 0.78rem;
}

@media (max-width: 600px) {
    .steam-card-ratings,
    .glhf-cs-ratings {
        gap: 0.4rem;
    }

    .steam-card-ratings .faceit-elo-level,
    .faceit-elo-level {
        height: 1.8rem;
        max-width: 1.8rem;
        max-height: 1.8rem;
    }

    .steam-card-ratings .faceit-elo-value,
    .faceit-elo-value {
        font-size: 0.84rem;
    }

    .glhf-cs-ratings .faceit-elo-level {
        height: 1.25rem;
        max-width: 1.25rem;
        max-height: 1.25rem;
    }

    .glhf-cs-ratings .faceit-elo-value {
        font-size: 0.74rem;
    }
}