/*
 * Premium competitive rank card + reusable tier
 * badge (unified profile template).
 *
 * Two surfaces live here:
 *   1. .pe-rank-badge — AUTONOMOUS, reusable tier badge (sizes sm | md).
 *      The `sm` size is reused on the lobby + table seat, so it must
 *      stand on its own (no dependency on the rank-card wrapper).
 *   2. .tpl-unified__rank — the profile rank card that frames the badge.
 *
 * Theme-safe: every surface color rides on --pe-profile-* / --pe-tpl-*.
 * The ONLY hard color is the per-tier accent (--pe-rank-tier-accent), a
 * centralized semantic token injected inline by rankBadgeRender.js. Every
 * metallic effect is derived from that single accent via color-mix, so a
 * new tier needs zero extra CSS.
 */

/* ─────────────────────────────────────────────────────────────────────
 * 1. Tier badge (reusable — profile card + lobby/table seat in 2b)
 * ──────────────────────────────────────────────────────────────────── */

.pe-rank-badge {
    --pe-rank-badge-size: 52px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.pe-rank-badge--sm {
    --pe-rank-badge-size: 34px;
    gap: 9px;
}

/* Engraved metallic medallion — gradient + bevel + halo all from one
 * accent. Reads as a struck coin: bright top-left highlight, accent face,
 * darker pavilion at the bottom, soft accent halo. */
.pe-rank-badge__medal {
    position: relative;
    width: var(--pe-rank-badge-size);
    height: var(--pe-rank-badge-size);
    flex: 0 0 var(--pe-rank-badge-size);
    border-radius: var(--pe-tpl-radius-pill, 999px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: color-mix(in srgb, var(--pe-rank-tier-accent, #888) 60%, #1b1206);
    background:
        radial-gradient(
            128% 128% at 30% 22%,
            color-mix(in srgb, var(--pe-rank-tier-accent, #888) 28%, #ffffff) 0%,
            var(--pe-rank-tier-accent, #888) 46%,
            color-mix(in srgb, var(--pe-rank-tier-accent, #888) 64%, #000000) 100%
        );
    box-shadow:
        inset 0 1px 1px color-mix(in srgb, #ffffff 60%, transparent),
        inset 0 -2px 5px color-mix(in srgb, #000000 42%, transparent),
        0 2px 7px color-mix(in srgb, var(--pe-rank-tier-accent, #888) 42%, transparent),
        0 0 0 1px color-mix(in srgb, var(--pe-rank-tier-accent, #888) 62%, transparent),
        0 0 0 4px color-mix(in srgb, var(--pe-rank-tier-accent, #888) 14%, transparent);
}

/* Thin specular arc across the top of the coin for a polished sheen. */
.pe-rank-badge__medal::before {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: inherit;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, #ffffff 38%, transparent) 0%,
        transparent 42%
    );
    pointer-events: none;
}

.pe-rank-badge__glyph {
    position: relative;
    width: 58%;
    height: 58%;
    display: block;
    filter: drop-shadow(0 1px 0 color-mix(in srgb, #ffffff 34%, transparent));
}

.pe-rank-badge__image {
    position: relative;
    display: block;
    width: 76%;
    height: 76%;
    object-fit: contain;
    border-radius: 50%;
    filter: drop-shadow(0 1px 0 color-mix(in srgb, #ffffff 24%, transparent));
}

.pe-rank-badge__text {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.pe-rank-badge__tier {
    color: var(--pe-profile-fg, var(--pe-platform-module-text, var(--pe-platform-text, var(--demo-fg, #f4f4f4))));
    font-size: 16px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pe-rank-badge--sm .pe-rank-badge__tier {
    font-size: 13px;
}

.pe-rank-badge__div {
    color: var(--pe-profile-muted, var(--pe-platform-module-muted, var(--demo-muted, rgba(244, 244, 244, 0.68))));
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pe-rank-badge--sm .pe-rank-badge__div {
    font-size: 9.5px;
    letter-spacing: 0.05em;
}

/* Provisional reads as an accent-tinted pill, not a muted afterthought. */
.pe-rank-badge__mark {
    display: inline-block;
    padding: 1px 7px;
    border-radius: var(--pe-tpl-radius-pill, 999px);
    color: color-mix(
        in srgb,
        var(--pe-rank-tier-accent, #888) 72%,
        var(--pe-profile-fg, var(--pe-platform-module-text, var(--pe-platform-text, var(--demo-fg, #f4f4f4))))
    );
    background: color-mix(in srgb, var(--pe-rank-tier-accent, #888) 16%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pe-rank-tier-accent, #888) 32%, transparent);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* Unranked — neutral, clearly "no rank yet", never a fake tier. */
.pe-rank-badge--unranked .pe-rank-badge__medal {
    color: var(--pe-profile-muted, var(--pe-platform-module-muted, var(--demo-muted, rgba(244, 244, 244, 0.68))));
    background:
        radial-gradient(
            128% 128% at 30% 22%,
            var(--pe-profile-card-bg-hover, var(--pe-platform-module-bg, var(--demo-card-bg, rgba(255, 255, 255, 0.08)))) 0%,
            var(--pe-profile-card-bg, var(--pe-platform-module-bg, var(--demo-card-bg, rgba(255, 255, 255, 0.04)))) 100%
        );
    box-shadow:
        inset 0 1px 1px color-mix(in srgb, #ffffff 18%, transparent),
        0 0 0 1px var(--pe-profile-border, var(--pe-platform-module-border, var(--demo-border, rgba(255, 255, 255, 0.16)))),
        0 0 0 4px color-mix(
            in srgb,
            var(--pe-profile-border, var(--pe-platform-module-border, var(--demo-border, rgba(255, 255, 255, 0.16)))) 50%,
            transparent
        );
}

.pe-rank-badge--unranked .pe-rank-badge__medal::before {
    opacity: 0.4;
}

.pe-rank-badge--unranked .pe-rank-badge__glyph {
    filter: none;
}

/* ─────────────────────────────────────────────────────────────────────
 * 1b. Nav variant — compact rank chip for the platform top bar.
 * A small medallion + the tier name only; the division / provisional state
 * lives in the title + aria-label tooltip. Theme-safe via --demo-* (the nav
 * has no --pe-profile-* scope). Stays discreet so it never dominates the
 * player name; removal is local to userIdentityHtml.
 * ──────────────────────────────────────────────────────────────────── */
.pe-rank-badge--nav {
    gap: 6px;
    padding: 2px 9px 2px 3px;
    border-radius: var(--pe-tpl-radius-pill, 999px);
    background: color-mix(in srgb, var(--pe-rank-tier-accent, #888) 12%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pe-rank-tier-accent, #888) 26%, transparent);
}

.pe-rank-badge--nav .pe-rank-badge__medal {
    --pe-rank-badge-size: 20px;
    /* Flatter, crisper coin at chip scale — drop the wide accent halo
     * the profile-card medallion uses so the nav chip reads discreet. */
    box-shadow:
        inset 0 1px 1px color-mix(in srgb, #ffffff 55%, transparent),
        inset 0 -1px 3px color-mix(in srgb, #000000 38%, transparent),
        0 0 0 1px color-mix(in srgb, var(--pe-rank-tier-accent, #888) 55%, transparent);
}

.pe-rank-badge--nav .pe-rank-badge__tier {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0;
    color: color-mix(
        in srgb,
        var(--pe-rank-tier-accent, #888) 42%,
        var(--pe-profile-fg, var(--pe-platform-module-text, var(--pe-platform-text, var(--demo-fg, #f4f4f4))))
    );
}

/* Unranked nav chip — neutral, no tier accent. */
.pe-rank-badge--nav.pe-rank-badge--unranked {
    background: color-mix(in srgb, currentColor 6%, transparent);
    box-shadow: inset 0 0 0 1px var(--pe-profile-border, var(--pe-platform-module-border, var(--demo-border, rgba(255, 255, 255, 0.16))));
}

.pe-rank-badge--nav.pe-rank-badge--unranked .pe-rank-badge__tier {
    color: var(--pe-profile-muted, var(--pe-platform-module-muted, var(--demo-muted, rgba(244, 244, 244, 0.68))));
}

/* ─────────────────────────────────────────────────────────────────────
 * 2. Rank card — frames the badge, the rating and the ladder progress.
 * ──────────────────────────────────────────────────────────────────── */

.tpl-unified__rank {
    display: flex;
    flex-direction: column;
    gap: var(--pe-tpl-space-4);
    position: relative;
    overflow: hidden;
    border-color: color-mix(
        in srgb,
        var(--pe-rank-tier-accent, var(--pe-profile-border)) 40%,
        var(--pe-profile-border)
    );
    box-shadow:
        var(--pe-tpl-shadow-sm),
        inset 0 0 0 1px color-mix(
            in srgb,
            var(--pe-rank-tier-accent, transparent) 10%,
            transparent
        );
}

/* Faint corner halo in the tier accent — present but never theme-breaking. */
.tpl-unified__rank::after {
    content: "";
    position: absolute;
    top: -40%;
    right: -20%;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--pe-rank-tier-accent, transparent) 18%, transparent) 0%,
        transparent 70%
    );
    pointer-events: none;
}

.tpl-unified__rank > * {
    position: relative;
    z-index: 1;
}

.tpl-unified__rank-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pe-tpl-space-3);
}

/* Unranked has no rating to balance against the badge — stack the badge
 * above its message so the neutral badge keeps its full label. */
.tpl-unified__rank[data-rank-state="unranked"] .tpl-unified__rank-main {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--pe-tpl-space-3);
}

.tpl-unified__rank[data-rank-state="unranked"] .pe-rank-badge {
    width: 100%;
}

.tpl-unified__rank-rating-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1;
}

.tpl-unified__rank-rating {
    font-size: 38px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--pe-profile-fg);
}

.tpl-unified__rank-rating-cap {
    margin-top: 4px;
    color: var(--pe-profile-muted);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.tpl-unified__rank-empty {
    margin: 0;
    color: var(--pe-profile-muted);
    font-size: 12px;
    line-height: 1.45;
}

.tpl-unified__rank-kpis {
    display: flex;
    gap: var(--pe-tpl-space-2);
    flex-wrap: wrap;
}

.tpl-unified__rank-kpis span {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid var(--pe-profile-border);
    border-radius: var(--pe-tpl-radius-md);
    background: var(--pe-profile-card-bg);
}

.tpl-unified__rank-kpis b {
    color: var(--pe-profile-fg);
    font-size: 14px;
    font-weight: 700;
}

.tpl-unified__rank-kpis small {
    color: var(--pe-profile-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ── Progress to next tier ─────────────────────────────────────────── */
.tpl-unified__rank-progress {
    display: grid;
    gap: var(--pe-tpl-space-2);
}

.tpl-unified__rank-progress-bar {
    position: relative;
    height: 10px;
    overflow: hidden;
    border-radius: var(--pe-tpl-radius-pill);
    background: var(--pe-profile-card-bg-hover);
    box-shadow: inset 0 1px 2px color-mix(in srgb, #000000 22%, transparent);
}

.tpl-unified__rank-progress-fill {
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--pe-rank-tier-accent, var(--pe-profile-accent)) 72%, #000000) 0%,
        var(--pe-rank-tier-accent, var(--pe-profile-accent)) 100%
    );
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 30%, transparent),
        0 0 8px color-mix(in srgb, var(--pe-rank-tier-accent, var(--pe-profile-accent)) 45%, transparent);
}

.tpl-unified__rank-progress-note {
    margin: 0;
    color: var(--pe-profile-muted);
    font-size: 12px;
    line-height: 1.45;
}

.tpl-unified__rank-progress-note b,
.tpl-unified__rank-progress-note strong {
    color: var(--pe-profile-fg);
    font-weight: 700;
}

/* Max-tier celebratory note picks up the accent without a bar. */
.tpl-unified__rank[data-rank-state="ranked"] .tpl-unified__rank-progress-note:only-child {
    color: color-mix(in srgb, var(--pe-rank-tier-accent, var(--pe-profile-fg)) 60%, var(--pe-profile-fg));
    font-weight: 600;
}

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .tpl-unified__rank-main {
        align-items: center;
    }

    .tpl-unified__rank-rating {
        font-size: 32px;
    }

    .pe-rank-badge:not(.pe-rank-badge--nav) {
        --pe-rank-badge-size: 46px;
    }

    .pe-rank-badge:not(.pe-rank-badge--nav) .pe-rank-badge__tier {
        font-size: 15px;
    }
}

@media (max-width: 420px) {
    .pe-rank-badge:not(.pe-rank-badge--nav) {
        --pe-rank-badge-size: 42px;
        gap: 10px;
    }
}