/* ==========================================================================
   PUBG Looker — Player Profile V2 (Redesign Preview)
   All styles namespaced under `pv-` so they cannot collide with the
   existing player.php (`cv-`, `player-*`) design system.
   Powered by NXDPRO Solutions | https://www.nxdpro.com/
   ========================================================================== */

/* ---------- Design tokens (V2 scope) ----------------------------------- */
:root {
    --pv-bg-page:          #0d1117;
    --pv-bg-elevated:      rgba(255, 255, 255, 0.03);
    --pv-bg-elevated-2:    rgba(255, 255, 255, 0.05);
    --pv-bg-elevated-3:    rgba(255, 255, 255, 0.08);
    --pv-border:           rgba(255, 255, 255, 0.08);
    --pv-border-strong:    rgba(255, 255, 255, 0.16);
    --pv-text:             #f0f2f5;
    /* --pv-text-secondary sits between --pv-text and --pv-text-muted: used
       on labels/captions where --pv-text-muted is too dim but --pv-text
       is too loud. Was referenced in 4 places (sync banner, hero tier
       meta, nav, bio row) without ever being declared, causing those
       rules to silently fall through to inherited values. */
    --pv-text-secondary:   rgba(255, 255, 255, 0.78);
    --pv-text-muted:       rgba(255, 255, 255, 0.62);
    --pv-text-dim:         rgba(255, 255, 255, 0.38);

    --pv-accent:           #4f8bff;
    --pv-accent-strong:    #3b6fe0;
    --pv-success:          #3ddc97;
    --pv-warn:             #ffc857;
    --pv-danger:           #ff6b6b;
    --pv-info:             #57d6ff;
    --pv-purple:           #a86bff;
    --pv-pink:             #ff78c7;

    --pv-gradient-hero:    linear-gradient(135deg, rgba(79, 139, 255, 0.18) 0%, rgba(168, 107, 255, 0.10) 50%, rgba(255, 120, 199, 0.06) 100%);
    --pv-gradient-combat:  linear-gradient(135deg, rgba(255, 107, 107, 0.12), rgba(255, 200, 87, 0.06));
    --pv-gradient-survival:linear-gradient(135deg, rgba(61, 220, 151, 0.12), rgba(87, 214, 255, 0.06));
    --pv-gradient-support: linear-gradient(135deg, rgba(168, 107, 255, 0.12), rgba(79, 139, 255, 0.06));
    --pv-gradient-movement:linear-gradient(135deg, rgba(255, 200, 87, 0.10), rgba(255, 120, 199, 0.06));

    --pv-radius-sm:        6px;
    --pv-radius:           12px;
    --pv-radius-lg:        18px;
    --pv-radius-pill:      999px;

    /* Type scale tokens (declared 2026-04-19).
       The legacy stylesheet uses 40+ distinct font-size values, which is
       design-system rot. These tokens are the target stepped scale for
       future refactors -- new rules SHOULD use them, existing rules can
       be migrated incrementally without breaking visuals.
       Steps map to: 0.72 / 0.82 / 0.92 / 1.05 / 1.25 / 1.5 / 1.85 rem. */
    --pv-fs-xs:            0.72rem;
    --pv-fs-sm:            0.82rem;
    --pv-fs-base:          0.92rem;
    --pv-fs-md:            1.05rem;
    --pv-fs-lg:            1.25rem;
    --pv-fs-xl:            1.5rem;
    --pv-fs-2xl:           1.85rem;

    /* Spacing tokens (declared 2026-04-19).
       Same pattern: existing rules use 30+ distinct gap values; these
       tokens are the target scale for new rules. */
    --pv-gap-xs:           0.25rem;
    --pv-gap-sm:           0.45rem;
    --pv-gap-md:           0.7rem;
    --pv-gap-lg:           1rem;
    --pv-gap-xl:           1.5rem;

    --pv-shadow-1:         0 1px 2px rgba(0, 0, 0, 0.3);
    --pv-shadow-2:         0 4px 14px rgba(0, 0, 0, 0.35);
    --pv-shadow-3:         0 12px 32px rgba(0, 0, 0, 0.45);

    --pv-dur:              180ms;
    --pv-ease:             cubic-bezier(0.22, 1, 0.36, 1);

    --pv-tier-bronze:      #cd7f32;
    --pv-tier-silver:      #c0c0c0;
    --pv-tier-gold:        #ffd700;
    --pv-tier-platinum:    #aed6f1;
    --pv-tier-crystal:     #00e5cc;
    --pv-tier-diamond:     #5dade2;
    --pv-tier-master:      #ff8a4c;
    --pv-tier-survivor:    #ff6b9d;
    --pv-tier-unranked:    #8b92a8;
}

@media (prefers-reduced-motion: reduce) {
    :root { --pv-dur: 0ms; }
}

/* ---------- Recently viewed strip --------------------------------------- */
.pv-recent {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding: 0.55rem 0.85rem;
    background: var(--pv-bg-elevated);
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-radius);
    margin-bottom: 0.85rem;
    font-size: 0.82rem;
}
.pv-recent__label {
    display: inline-flex;
    align-items: center;
    color: var(--pv-text-muted);
    font-size: 0.95rem;
    line-height: 1;
    padding-right: 0.1rem;
    flex-shrink: 0;
}
.pv-recent__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    background: var(--pv-bg-elevated-2);
    color: var(--pv-text);
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-radius-pill);
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 600;
    transition: var(--pv-dur) var(--pv-ease);
    max-width: 22ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pv-recent__chip:hover {
    background: var(--pv-bg-elevated-3);
    border-color: var(--pv-accent);
    color: var(--pv-accent);
    transform: translateY(-1px);
}
.pv-recent__chip i { color: var(--pv-text-dim); font-size: 0.72rem; }
.pv-recent__tier {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex: 0 0 18px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}
.pv-recent__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pv-recent__clear {
    margin-left: auto;
    background: transparent;
    border: 1px solid var(--pv-border);
    color: var(--pv-text-muted);
    padding: 0.18rem 0.55rem;
    border-radius: var(--pv-radius-pill);
    font-size: 0.72rem;
    cursor: pointer;
    transition: var(--pv-dur) var(--pv-ease);
}
.pv-recent__clear:hover { color: var(--pv-danger); border-color: var(--pv-danger); }
@media (max-width: 575.98px) {
    .pv-recent__label { border-right: 0; padding-right: 0; padding-bottom: 0.2rem; width: 100%; }
    .pv-recent__clear { margin-left: 0; }
}

/* ---------- Notice banners (sync queued, etc.) ------------------------- */
.pv-notice {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    padding: 0.85rem 1rem;
    border-radius: var(--pv-radius);
    margin-bottom: 0.85rem;
    border: 1px solid;
}
.pv-notice--info {
    background: rgba(87, 214, 255, 0.06);
    border-color: rgba(87, 214, 255, 0.2);
    color: var(--pv-text);
}
.pv-notice > i { font-size: 1rem; color: var(--pv-info); margin-top: 0.15rem; }
.pv-notice__title { font-weight: 700; font-size: 0.85rem; }
.pv-notice__body { font-size: 0.82rem; color: var(--pv-text-muted); }

/* ---------- Creator banner ---------------------------------------------- */
.pv-creator-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1.25rem;
    background: linear-gradient(135deg, rgba(145, 70, 255, 0.08), rgba(0, 229, 255, 0.04));
    border: 1px solid rgba(145, 70, 255, 0.2);
    border-radius: var(--pv-radius);
    margin-bottom: 0.85rem;
    color: var(--pv-text);
    text-decoration: none;
    transition: var(--pv-dur) var(--pv-ease);
}
.pv-creator-banner:hover {
    border-color: rgba(145, 70, 255, 0.4);
    transform: translateY(-1px);
    color: var(--pv-text);
}
.pv-creator-banner > div { flex: 1; }
.pv-creator-banner__kicker {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #9146FF;
    margin-bottom: 0.2rem;
}
.pv-creator-banner__title {
    font-size: 0.95rem;
    color: var(--pv-text);
}
.pv-creator-banner > i { color: #9146FF; font-size: 1.1rem; }

/* ---------- Syncing state (full page, when no data yet) -------------- */
.pv-sync-state {
    background: var(--pv-bg-elevated);
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-radius-lg);
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--pv-text);
    box-shadow: var(--pv-shadow-2);
}
.pv-sync-state__spinner {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    border: 4px solid var(--pv-bg-elevated-3);
    border-top-color: var(--pv-accent);
    animation: pv-spin 1s linear infinite;
}
@keyframes pv-spin {
    to { transform: rotate(360deg); }
}
.pv-sync-state__title {
    margin: 0 0 0.6rem;
    font-size: 1.25rem;
    font-weight: 800;
    color: #fff;
}
.pv-sync-state__sub {
    margin: 0 auto;
    max-width: 480px;
    color: var(--pv-text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}
.pv-sync-state__sub strong { color: var(--pv-text); }
.pv-sync-state__attempt {
    margin: 0.85rem 0 0;
    font-size: 0.78rem;
    color: var(--pv-text-dim);
}
@media (prefers-reduced-motion: reduce) {
    .pv-sync-state__spinner { animation-duration: 4s; }
}

/* ---------- Syncing banner (subtle, when refresh is in progress) ----- */
.pv-sync-banner {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.95rem;
    margin-bottom: 0.85rem;
    background: rgba(87, 214, 255, 0.08);
    border: 1px solid rgba(87, 214, 255, 0.25);
    border-radius: var(--pv-radius);
    color: var(--pv-info);
    font-size: 0.82rem;
    font-weight: 600;
    animation: pv-slide-in 240ms var(--pv-ease);
}
.pv-sync-banner > i { font-size: 0.95rem; }
.pv-sync-banner > span { color: var(--pv-text-secondary); font-weight: 500; }

/* ---------- Apply update button ---------------------------------------- */
.pv-apply-update {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 1040;
    background: var(--pv-accent);
    color: #fff;
    border: none;
    padding: 0.65rem 1rem;
    border-radius: var(--pv-radius-pill);
    box-shadow: var(--pv-shadow-3);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    animation: pv-slide-in 360ms var(--pv-ease);
}
.pv-apply-update:hover {
    background: var(--pv-accent-strong);
    transform: translateY(-1px);
}
@keyframes pv-slide-in {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* ---------- Freshness pill --------------------------------------------- */
.pv-hero__freshness {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.18rem 0.55rem;
    border-radius: var(--pv-radius-pill);
    font-size: 0.7rem;
    font-weight: 600;
    background: var(--pv-bg-elevated-2);
    border: 1px solid var(--pv-border);
    color: var(--pv-text-muted);
    cursor: help;
}
.pv-hero__freshness[data-state="fresh"] {
    background: rgba(61, 220, 151, 0.12);
    border-color: rgba(61, 220, 151, 0.3);
    color: var(--pv-success);
}
.pv-hero__freshness[data-state="stale"] {
    background: rgba(255, 200, 87, 0.12);
    border-color: rgba(255, 200, 87, 0.3);
    color: var(--pv-warn);
}
.pv-hero__freshness[data-state="checking"] {
    background: rgba(87, 214, 255, 0.12);
    border-color: rgba(87, 214, 255, 0.3);
    color: var(--pv-info);
}

/* ---------- Sticky mini header ----------------------------------------- */
.pv-mini-header {
    position: sticky;
    top: 0;
    z-index: 1020;
    background: #16191f;
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border-bottom: 1px solid var(--pv-border-strong);
    padding: 0.55rem 0;
    transform: translateY(-100%);
    transition: transform var(--pv-dur) var(--pv-ease), opacity var(--pv-dur) var(--pv-ease);
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}
.pv-mini-header.is-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}
.pv-mini-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.pv-mini-header__identity {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}
.pv-mini-header__tier-img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}
.pv-mini-header__flag .fi { font-size: 1.1rem; border-radius: 2px; }
.pv-mini-header__name {
    color: var(--pv-text);
    font-weight: 700;
    text-decoration: none;
    font-size: 0.95rem;
    max-width: 32ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pv-mini-header__name:hover { color: var(--pv-accent); }
.pv-mini-header__tier {
    font-size: 0.72rem;
    color: var(--pv-text-muted);
    padding: 0.1rem 0.5rem;
    border-radius: var(--pv-radius-pill);
    background: var(--pv-bg-elevated-2);
    border: 1px solid var(--pv-border);
}
.pv-mini-header__metrics { display: flex; gap: 0.85rem; }
.pv-mini-header__metric {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    font-size: 0.78rem;
}
.pv-mini-header__metric .lbl {
    color: var(--pv-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.65rem;
    font-weight: 600;
}
.pv-mini-header__metric .val {
    color: var(--pv-text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ---------- Page wrapper ----------------------------------------------- */
.pv-page { color: var(--pv-text); }

/* ---------- Skeleton loaders ------------------------------------------- */
.pv-loading { display: grid; gap: 1rem; }
.pv-skel {
    background: linear-gradient(90deg,
        var(--pv-bg-elevated) 0%,
        var(--pv-bg-elevated-2) 50%,
        var(--pv-bg-elevated) 100%);
    background-size: 200% 100%;
    border-radius: var(--pv-radius);
    animation: pv-shimmer 1.6s linear infinite;
}
.pv-skel--hero { height: 200px; }
.pv-skel--strip { height: 56px; }
.pv-skel--card { height: 120px; }
.pv-skel-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}
@keyframes pv-shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}
@media (max-width: 768px) {
    .pv-skel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- HERO ------------------------------------------------------- */
.pv-hero {
    position: relative;
    border-radius: var(--pv-radius-lg);
    background: var(--pv-bg-elevated);
    border: 1px solid var(--pv-border);
    overflow: hidden;
    box-shadow: var(--pv-shadow-2);
}
/* ----- Hero background ------------------------------------------------
   Default-look: a clean tier-tinted gradient (no raster image) so the
   stat chips, action buttons and Survival Mastery row stand out crisply
   against a calm surface. The previous look layered a /hero-bg.webp
   photo under each tier glow, which competed visually with the badges
   and lowered button contrast.

   For users who uploaded a custom background, we still honour it via
   the `[data-has-custom-bg="true"]` rule farther down -- their image
   wins over the gradient with the same vignette overlay as before, so
   their personal artwork keeps full prominence.
*/
.pv-hero__bg {
    position: absolute;
    inset: 0;
    /* Subtle three-stop gradient as the unranked / no-tier baseline.
       Tier rules below override this via specificity. */
    background:
        radial-gradient(ellipse at 25% 30%, rgba(79, 139, 255, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 70%, rgba(168, 107, 255, 0.14) 0%, transparent 55%),
        linear-gradient(135deg, #131922 0%, #1a2230 50%, #131822 100%);
    opacity: 1;
    z-index: 0;
    transition: background 600ms var(--pv-ease);
}
.pv-hero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Soft top-bottom darkening so titles + small text pop without
       dimming the gradient itself. */
    background: linear-gradient(180deg, rgba(13,17,23,0.10) 0%, rgba(13,17,23,0.55) 100%);
}

/* ----- Tier-tinted hero gradients ------------------------------------
   Each ranked tier gets a distinct three-stop radial-gradient glow on
   top of a deep base so the profile feels personalised AND keeps the
   white text + glassy badges legible. Active state set via JS:
     hero.dataset.tier = "bronze" | "silver" | ... | "survivor" | "unranked".
*/
.pv-hero[data-tier="bronze"] .pv-hero__bg {
    background:
        radial-gradient(ellipse at 25% 35%, rgba(205, 127, 50, 0.42) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 75%, rgba(255, 165, 80, 0.22) 0%, transparent 55%),
        linear-gradient(135deg, #1a1410 0%, #221915 50%, #181210 100%);
}
.pv-hero[data-tier="silver"] .pv-hero__bg {
    background:
        radial-gradient(ellipse at 25% 35%, rgba(192, 192, 192, 0.32) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 75%, rgba(220, 220, 220, 0.18) 0%, transparent 55%),
        linear-gradient(135deg, #161821 0%, #1c1f29 50%, #14171f 100%);
}
.pv-hero[data-tier="gold"] .pv-hero__bg {
    background:
        radial-gradient(ellipse at 25% 35%, rgba(255, 215, 0, 0.34) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 75%, rgba(255, 180, 50, 0.24) 0%, transparent 55%),
        linear-gradient(135deg, #1a1810 0%, #221f12 50%, #181610 100%);
}
.pv-hero[data-tier="platinum"] .pv-hero__bg {
    background:
        radial-gradient(ellipse at 25% 35%, rgba(174, 214, 241, 0.36) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 75%, rgba(210, 230, 255, 0.22) 0%, transparent 55%),
        linear-gradient(135deg, #131a22 0%, #18222e 50%, #131922 100%);
}
.pv-hero[data-tier="crystal"] .pv-hero__bg {
    background:
        radial-gradient(ellipse at 25% 35%, rgba(0, 229, 204, 0.36) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 75%, rgba(80, 240, 220, 0.22) 0%, transparent 55%),
        linear-gradient(135deg, #0f1d1c 0%, #142826 50%, #0d1817 100%);
}
.pv-hero[data-tier="diamond"] .pv-hero__bg {
    background:
        radial-gradient(ellipse at 25% 35%, rgba(93, 173, 226, 0.40) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 75%, rgba(140, 200, 255, 0.24) 0%, transparent 55%),
        linear-gradient(135deg, #11192a 0%, #182238 50%, #0f1726 100%);
}
.pv-hero[data-tier="master"] .pv-hero__bg {
    background:
        radial-gradient(ellipse at 25% 35%, rgba(255, 138, 76, 0.42) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 75%, rgba(255, 90, 50, 0.28) 0%, transparent 55%),
        linear-gradient(135deg, #1d1410 0%, #281814 50%, #1a1210 100%);
}
.pv-hero[data-tier="survivor"] .pv-hero__bg {
    background:
        radial-gradient(ellipse at 25% 35%, rgba(255, 107, 157, 0.46) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 75%, rgba(255, 75, 180, 0.30) 0%, transparent 55%),
        linear-gradient(135deg, #1d1018 0%, #28141f 50%, #1a0e16 100%);
}

/* ----- Custom user-uploaded hero background --------------------------
   When the player has uploaded their own background through the profile
   editor, we honour it instead of the tier-tinted gradient. The image
   is set via the `--pv-custom-bg` CSS variable from JS, and we attach
   a richer vignette overlay on top so badges and the username stay
   readable. This wins over any tier rule via specificity + !important. */
.pv-hero[data-has-custom-bg="true"] .pv-hero__bg {
    background: var(--pv-custom-bg) center/cover no-repeat !important;
    opacity: 1 !important;
}
.pv-hero[data-has-custom-bg="true"] .pv-hero__bg::after {
    /* Vignette overlay: very dark almost everywhere, with just a thin
       lighter band in the middle so the user's image acts as a subtle
       hint rather than dominating the hero card. */
    background: linear-gradient(
        180deg,
        rgba(13, 17, 23, 0.97) 0%,
        rgba(13, 17, 23, 0.93) 30%,
        rgba(13, 17, 23, 0.62) 50%,
        rgba(13, 17, 23, 0.93) 70%,
        rgba(13, 17, 23, 0.97) 100%
    );
}

/* Tier-coloured top border accent on the hero card itself (subtle). */
.pv-hero[data-tier]:not([data-tier="unranked"]):not([data-tier=""]) {
    box-shadow: var(--pv-shadow-2), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}
.pv-hero[data-tier="bronze"]   { border-color: rgba(205, 127, 50, 0.35); }
.pv-hero[data-tier="silver"]   { border-color: rgba(192, 192, 192, 0.35); }
.pv-hero[data-tier="gold"]     { border-color: rgba(255, 215, 0, 0.35); }
.pv-hero[data-tier="platinum"] { border-color: rgba(174, 214, 241, 0.35); }
.pv-hero[data-tier="crystal"]  { border-color: rgba(0, 229, 204, 0.4); }
.pv-hero[data-tier="diamond"]  { border-color: rgba(93, 173, 226, 0.4); }
.pv-hero[data-tier="master"]   { border-color: rgba(255, 138, 76, 0.45); }
.pv-hero[data-tier="survivor"] { border-color: rgba(255, 107, 157, 0.5); }
.pv-hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2rem;
    padding: 1.25rem 1.5rem;
    align-items: center;
}
/* `min-width: 0` was redeclared further down (right after the tier-rp
   block) so that flex children can shrink below their intrinsic min
   content width and the long player name can wrap/ellipsis cleanly.
   Merged into the canonical block to keep the selector single-source. */
.pv-hero__main { padding-left: 0.75rem; min-width: 0; }
.pv-hero__tier-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    width: 215px;
    flex-shrink: 0;
    position: relative;
    padding-right: 1.5rem;
}
/* Vertical separator with top/bottom fade — visually divides the tier block
   from the player info column on the right. */
.pv-hero__tier-block::after {
    content: '';
    position: absolute;
    right: 0;
    top: 8%;
    bottom: 8%;
    width: 1px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(255, 255, 255, 0.18) 25%,
        rgba(255, 255, 255, 0.28) 50%,
        rgba(255, 255, 255, 0.18) 75%,
        transparent 100%
    );
    pointer-events: none;
}
.pv-hero__tier-img {
    width: 140px;
    height: 140px;
    object-fit: contain;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.55));
}
.pv-hero__tier-progress { width: 100%; }
.pv-hero__tier-bar {
    width: 100%;
    height: 7px;
    background: var(--pv-bg-elevated-3);
    border-radius: var(--pv-radius-pill);
    overflow: hidden;
    margin-bottom: 0.35rem;
}
.pv-hero__tier-bar > span {
    display: block;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--pv-tier-gold), var(--pv-tier-platinum));
    transition: width 600ms var(--pv-ease);
    border-radius: inherit;
}
.pv-hero__tier-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    color: var(--pv-text-secondary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.pv-hero__tier-meta > span {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.pv-hero__tier-meta .muted { color: var(--pv-text-dim); flex-shrink: 0; }
.pv-hero__tier-rp {
    text-align: center;
    font-size: 0.72rem;
    color: var(--pv-text-muted);
    margin-top: 0.25rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.35;
    white-space: normal;
}

.pv-hero__name-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.35rem;
}
.pv-hero__flag .fi { font-size: 1.4rem; border-radius: 3px; box-shadow: var(--pv-shadow-1); }
.pv-hero__name {
    margin: 0;
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #fff;
    line-height: 1.1;
    word-break: break-word;
}
.pv-hero__platform {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.18rem 0.55rem;
    background: var(--pv-bg-elevated-3);
    border: 1px solid var(--pv-border);
    color: var(--pv-text-muted);
    border-radius: var(--pv-radius-sm);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.pv-hero__status {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.18rem 0.6rem;
    border-radius: var(--pv-radius-pill);
    font-size: 0.72rem;
    font-weight: 700;
}
.pv-hero__status[data-state="active"] {
    background: rgba(61, 220, 151, 0.15);
    color: var(--pv-success);
    border: 1px solid rgba(61, 220, 151, 0.35);
}
.pv-hero__status[data-state="banned"] {
    background: rgba(255, 107, 107, 0.15);
    color: var(--pv-danger);
    border: 1px solid rgba(255, 107, 107, 0.35);
}
/* Temporary bans are rehabilitative, not final. We tint them amber so
   they don't read as harshly as a permanent ban (which keeps the red
   tone) -- matches PUBG's own community guidance copy that distinguishes
   "permanent" from "temporary suspension". JS sets data-state="temp_banned". */
.pv-hero__status[data-state="temp_banned"] {
    background: rgba(255, 200, 87, 0.16);
    color: var(--pv-warn);
    border: 1px solid rgba(255, 200, 87, 0.4);
}
.pv-hero__status[data-state="dormant"] {
    background: rgba(255, 200, 87, 0.15);
    color: var(--pv-warn);
    border: 1px solid rgba(255, 200, 87, 0.35);
}
.pv-hero__status[data-state="live"] {
    background: rgba(255, 107, 107, 0.18);
    color: #ff8c8c;
    border: 1px solid rgba(255, 107, 107, 0.4);
}
.pv-hero__status[data-state="live"] .pv-pulse {
    width: 7px; height: 7px; background: #ff5252;
    border-radius: 50%; box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.6);
    animation: pv-pulse 1.6s infinite;
}
@keyframes pv-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.6); }
    70%  { box-shadow: 0 0 0 8px rgba(255, 82, 82, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 82, 82, 0); }
}

.pv-hero__sub {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    color: var(--pv-text-muted);
    font-size: 0.82rem;
    margin-bottom: 0.7rem;
}
.pv-hero__sub > span:not(:empty) {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.pv-hero__sub i { color: var(--pv-text-dim); }

/* Tagline ----------------------------------------------------------
   Sits between the name row and the sub-line. Italicised + a leading
   quote glyph so it visually reads as the player's "voice", not a
   stat. Word-wraps on narrow screens; never grows beyond 80 chars
   from the source. */
.pv-hero__tagline {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0.1rem 0 0.5rem;
    color: #d9dde6;
    font-size: 0.92rem;
    font-style: italic;
    line-height: 1.4;
    max-width: 60ch;
}
.pv-hero__tagline-ico {
    color: var(--pv-text-dim);
    font-size: 0.78rem;
    margin-top: 0.25rem;
    flex-shrink: 0;
}
.pv-hero__tagline-txt { word-break: break-word; }

/* Favourites strip --------------------------------------------------
   Three pill-style chips (Map / Weapon / Vehicle). Hidden when the
   player has set none. Uses the same elevated background as other
   chips for visual consistency. */
.pv-hero__favorites {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0.55rem 0 0.25rem;
}
.pv-hero__fav {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.28rem 0.7rem;
    border-radius: var(--pv-radius-pill);
    font-size: 0.74rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--pv-border);
    color: var(--pv-text-muted);
}
.pv-hero__fav i { color: var(--pv-accent); font-size: 0.78rem; }
.pv-hero__fav-lbl {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    opacity: 0.7;
    font-size: 0.65rem;
}
.pv-hero__fav-val { font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }

.pv-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    align-items: center;
    margin-bottom: 0.6rem;
}
.pv-hero__stat {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
}
.pv-hero__stat-icon {
    color: var(--pv-accent);
    font-size: 0.95rem;
}
.pv-hero__stat-val {
    font-size: 1.25rem;
    font-weight: 800;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.pv-hero__stat-lbl {
    font-size: 0.7rem;
    color: var(--pv-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.pv-hero__badges { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.pv-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    border-radius: var(--pv-radius-pill);
    font-size: 0.7rem;
    font-weight: 600;
    background: var(--pv-bg-elevated-2);
    color: var(--pv-text-muted);
    border: 1px solid var(--pv-border);
}
.pv-badge--accent { background: rgba(79, 139, 255, 0.15); color: var(--pv-accent); border-color: rgba(79, 139, 255, 0.3); }
.pv-badge--success { background: rgba(61, 220, 151, 0.15); color: var(--pv-success); border-color: rgba(61, 220, 151, 0.3); }
.pv-badge--purple { background: rgba(168, 107, 255, 0.15); color: var(--pv-purple); border-color: rgba(168, 107, 255, 0.3); }
.pv-badge--warn { background: rgba(255, 200, 87, 0.15); color: var(--pv-warn); border-color: rgba(255, 200, 87, 0.3); }
.pv-badge--danger { background: rgba(255, 107, 107, 0.15); color: var(--pv-danger); border-color: rgba(255, 107, 107, 0.3); }
.pv-badge a { color: inherit; text-decoration: none; }
.pv-badge a:hover { text-decoration: underline; }

/* --- Site Founder badge ---------------------------------------------
   Shown only on the profile designated by `site_owner_pubg_id` in the
   admin Settings table. Uses a richer gold gradient + glow so it
   visually outranks Partner / Esports / Verified, in line with its
   "this is the person who built the site" meaning.
-------------------------------------------------------------------- */
.pv-badge--founder {
    background: linear-gradient(135deg, rgba(255, 196, 0, 0.22) 0%, rgba(255, 138, 0, 0.22) 100%);
    color: #ffd166;
    border-color: rgba(255, 196, 0, 0.55);
    box-shadow: 0 0 0 1px rgba(255, 196, 0, 0.12), 0 4px 12px -6px rgba(255, 196, 0, 0.6);
    cursor: help;
    position: relative;
}
.pv-badge--founder i { color: #ffd166; }
.pv-badge--founder:hover {
    box-shadow: 0 0 0 1px rgba(255, 196, 0, 0.3), 0 6px 18px -6px rgba(255, 196, 0, 0.85);
}

/* --- Community Scout badge ------------------------------------------
   Rendered on the profiles of trusted community contributors whose
   Steam ID is in `trusted_contributor_steam_ids`. Uses a cool teal/
   blue gradient so it reads as "helper / navigator" and is visually
   distinct from the gold Founder badge. The compass icon echoes the
   "scouts players' countries for us" meaning.
--------------------------------------------------------------------- */
.pv-badge--scout {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.22) 0%, rgba(79, 139, 255, 0.22) 100%);
    color: #93e1ff;
    border-color: rgba(56, 189, 248, 0.55);
    box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.14), 0 4px 12px -6px rgba(56, 189, 248, 0.6);
    cursor: help;
    position: relative;
}
.pv-badge--scout i { color: #93e1ff; }
.pv-badge--scout:hover {
    box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.32), 0 6px 18px -6px rgba(56, 189, 248, 0.85);
}

/* --- Creator code chip ----------------------------------------------
   Click-to-copy. Available for every player who has a creator code
   set in the admin player_manager. The `--owner-code` modifier paints
   it gold on the founder profile when the admin enabled the CTA in
   Site Settings.
-------------------------------------------------------------------- */
.pv-badge--creator-code {
    background: rgba(64, 192, 87, 0.12);
    color: #5fdc80;
    border-color: rgba(64, 192, 87, 0.35);
    cursor: pointer;
    font-family: 'JetBrains Mono', 'Menlo', 'Consolas', monospace;
    letter-spacing: 0.02em;
    transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.pv-badge--creator-code:hover {
    background: rgba(64, 192, 87, 0.2);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px -6px rgba(64, 192, 87, 0.65);
}
.pv-badge--creator-code:active { transform: translateY(0); }
.pv-badge--creator-code.is-copied {
    background: rgba(61, 220, 151, 0.22);
    color: #b6ffd6;
    border-color: rgba(61, 220, 151, 0.55);
}
.pv-badge--creator-code .pv-badge__lbl {
    opacity: 0.7;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}
.pv-badge--creator-code .pv-badge__val {
    font-size: 0.78rem;
    font-weight: 700;
    color: #ffffff;
}
.pv-badge--creator-code .pv-badge__copy-ico {
    opacity: 0.55;
    font-size: 0.7rem;
    margin-left: 0.15rem;
}
.pv-badge--creator-code:hover .pv-badge__copy-ico { opacity: 0.95; }

/* Founder-profile flavour: gold tint, slightly larger, subtle glow.
   Composes with .pv-badge--creator-code by being applied alongside it. */
.pv-badge--owner-code {
    background: linear-gradient(135deg, rgba(255, 196, 0, 0.18) 0%, rgba(255, 138, 0, 0.18) 100%);
    color: #ffd479;
    border-color: rgba(255, 196, 0, 0.5);
    padding: 0.28rem 0.7rem;
    font-size: 0.74rem;
    box-shadow: 0 0 0 1px rgba(255, 196, 0, 0.1), 0 4px 12px -6px rgba(255, 196, 0, 0.55);
}
.pv-badge--owner-code:hover {
    background: linear-gradient(135deg, rgba(255, 196, 0, 0.28) 0%, rgba(255, 138, 0, 0.28) 100%);
    box-shadow: 0 0 0 1px rgba(255, 196, 0, 0.32), 0 6px 18px -6px rgba(255, 196, 0, 0.8);
}
.pv-badge--owner-code .pv-badge__val { color: #ffe9b3; }

.pv-hero__actions {
    position: absolute;
    top: 0.85rem;
    right: 0.95rem;
    display: flex;
    gap: 0.35rem;
    flex-shrink: 0;
    z-index: 2;
}
.pv-hero__actions .pv-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    background: rgba(13, 17, 23, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-color: rgba(255, 255, 255, 0.15);
}
.pv-hero__actions .pv-btn:hover:not(:disabled) {
    background: rgba(13, 17, 23, 0.85);
    border-color: var(--pv-border-strong);
}
.pv-hero__actions .pv-btn--primary {
    background: var(--pv-accent);
    border-color: var(--pv-accent);
}
.pv-hero__actions .pv-btn--primary:hover:not(:disabled) {
    background: var(--pv-accent-strong);
    border-color: var(--pv-accent-strong);
}

/* ---------- Buttons ---------------------------------------------------- */
.pv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    background: var(--pv-bg-elevated-2);
    color: var(--pv-text);
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-radius);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--pv-dur) var(--pv-ease);
    text-decoration: none;
}
.pv-btn:hover:not(:disabled) {
    background: var(--pv-bg-elevated-3);
    border-color: var(--pv-border-strong);
    transform: translateY(-1px);
    color: #fff;
}
.pv-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.pv-btn--primary {
    background: var(--pv-accent);
    border-color: var(--pv-accent);
    color: #fff;
}
.pv-btn--primary:hover:not(:disabled) {
    background: var(--pv-accent-strong);
    border-color: var(--pv-accent-strong);
    color: #fff;
}

/* ---------- Keyboard focus rings (a11y) -------------------------------
   Consolidated `:focus-visible` styling for every interactive control on
   the V2 page. Until 2026-04-19 the only focus rule in the entire 4k+
   line stylesheet was `.pv-modal__select:focus`; everything else fell
   back to whatever the browser's default outline looks like, which on a
   dark theme is often invisible. WCAG 2.4.7 requires a visible focus
   indicator on every interactive element, so we paint a 2px accent ring
   on the controls users can tab through:
     - .pv-btn family (hero actions, share, refresh, generic buttons)
     - .pv-nav__link (in-page sticky nav)
     - .pv-bottom-tabs__link (mobile bottom bar)
     - .pv-mode-switch__opt (Total/Normal/Ranked selector)
     - .pv-submode__opt (Solo/Duo/Squad TPP/FPP)
     - .pv-mfilter (match-type filter pills)
     - .pv-wgtab (weapon-group tabs)
     - .pv-section-refresh (per-section refresh circle)
     - .pv-link (text links inside cards)
     - .pv-recent__chip / .pv-recent__clear (recently viewed strip)
     - .pv-highlight (achievement chip when rendered as <a>)
   `outline-offset: 2px` keeps the ring clear of round-pill borders. */
.pv-btn:focus-visible,
.pv-btn--primary:focus-visible,
.pv-btn--ghost:focus-visible,
.pv-nav__link:focus-visible,
.pv-bottom-tabs__link:focus-visible,
.pv-mode-switch__opt:focus-visible,
.pv-submode__opt:focus-visible,
.pv-mfilter:focus-visible,
.pv-wgtab:focus-visible,
.pv-section-refresh:focus-visible,
.pv-link:focus-visible,
.pv-recent__chip:focus-visible,
.pv-recent__clear:focus-visible,
a.pv-highlight:focus-visible {
    outline: 2px solid var(--pv-accent);
    outline-offset: 2px;
    /* Make sure the ring is never clipped by overflow:hidden ancestors. */
    box-shadow: 0 0 0 4px rgba(79, 139, 255, 0.18);
}

/* The legacy `.pv-dna` chip strip lived here. Folded into the unified
   Quick Facts row rendered by renderHighlights() so the DNA chips no
   longer stack twice. Removed in the 2026-04-19 V2 cleanup -- saves a
   54-line block we were paying for an always-hidden container. */

/* ---------- 4 SMART HERO METRICS -------------------------------------- */
.pv-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
    margin-top: 1rem;
}
.pv-metric {
    background: var(--pv-bg-elevated);
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-radius);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    transition: var(--pv-dur) var(--pv-ease);
}
.pv-metric:hover {
    background: var(--pv-bg-elevated-2);
    border-color: var(--pv-border-strong);
    transform: translateY(-2px);
}
.pv-metric__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.pv-metric__icon {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(79, 139, 255, 0.12);
    color: var(--pv-accent);
    border-radius: var(--pv-radius-sm);
    font-size: 0.95rem;
}
.pv-metric__delta {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.12rem 0.4rem;
    border-radius: var(--pv-radius-pill);
}
.pv-metric__delta[data-tone="up"]   { background: rgba(61, 220, 151, 0.15); color: var(--pv-success); }
.pv-metric__delta[data-tone="down"] { background: rgba(255, 107, 107, 0.15); color: var(--pv-danger); }
.pv-metric__delta[data-tone="flat"] { background: var(--pv-bg-elevated-3); color: var(--pv-text-muted); }
.pv-metric__value {
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}
.pv-metric__label {
    font-size: 0.72rem;
    color: var(--pv-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.pv-metric__pctl {
    font-size: 0.72rem;
    color: var(--pv-text-dim);
}
.pv-metric__pctl strong { color: var(--pv-text); font-weight: 700; }
.pv-metric__sparkline { margin-top: 0.4rem; height: 28px; }

/* ---------- STICKY SECTION NAV ---------------------------------------- */
.pv-nav {
    display: flex;
    gap: 0.3rem;
    margin: 1.25rem 0 1rem;
    padding: 0.5rem;
    /* Translucent purple tint (--pv-purple @ ~30% alpha) so the nav has
       a subtle brand-color presence while still letting the backdrop
       blur preserve readability over content underneath when sticky. */
    background: #a86bff4d;
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid rgba(168, 107, 255, 0.35);
    border-radius: var(--pv-radius);
    position: sticky;
    top: 0;
    z-index: 1015;
    overflow-x: auto;
    scrollbar-width: none;
    /* Purple-tinted shadow so the bar visually "lifts" above content
       and the lift color matches the new background hue. */
    box-shadow:
        0 4px 14px rgba(168, 107, 255, 0.25),
        0 1px 0 rgba(255, 255, 255, 0.04) inset;
    transition:
        top var(--pv-dur) var(--pv-ease),
        box-shadow var(--pv-dur) var(--pv-ease),
        background var(--pv-dur) var(--pv-ease);
}
.pv-nav::-webkit-scrollbar { display: none; }
/* When the mini-header pill is visible, drop the nav below it so they stack
   instead of overlapping. */
body.pv-mini-visible .pv-nav {
    top: 56px;
    box-shadow:
        0 6px 20px rgba(168, 107, 255, 0.35),
        0 1px 0 rgba(255, 255, 255, 0.06) inset;
}
/* Add a subtle accent stripe under the nav while pinned, so users see the
   boundary between nav and the section content scrolling underneath. */
.pv-nav::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(168, 107, 255, 0.5) 30%,
        rgba(168, 107, 255, 0.7) 70%,
        transparent 100%);
    opacity: 0;
    transition: opacity var(--pv-dur) var(--pv-ease);
    pointer-events: none;
}
body.pv-mini-visible .pv-nav::after { opacity: 1; }

.pv-nav__link {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 0.9rem;
    border-radius: var(--pv-radius-sm);
    color: var(--pv-text-secondary);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    transition: var(--pv-dur) var(--pv-ease);
    white-space: nowrap;
    border: 1px solid transparent;
}
.pv-nav__link i { color: var(--pv-text-muted); transition: color var(--pv-dur) var(--pv-ease); }
.pv-nav__link:hover {
    background: rgba(168, 107, 255, 0.18);
    color: var(--pv-text);
    border-color: rgba(168, 107, 255, 0.45);
}
.pv-nav__link:hover i { color: var(--pv-purple); }
.pv-nav__link.active {
    background: var(--pv-purple);
    color: #fff;
    border-color: var(--pv-purple);
    box-shadow: 0 2px 10px rgba(168, 107, 255, 0.5);
}
.pv-nav__link.active i { color: #fff; }

/* ---------- SECTIONS --------------------------------------------------- */
.pv-section {
    /* `position: relative` was previously redeclared further down (next
       to the syncing-shimmer rules) which cascaded the same selector
       twice. Merged here as the single source of truth. */
    position: relative;
    padding-top: 0.5rem;
    margin-top: 1.5rem;
    scroll-margin-top: 130px;
}
/* Section head with a soft gradient underline used as a visual divider
   between sections. The underline fades from purple on the left to
   transparent on the right, mirroring the brand-color (--pv-purple)
   used in the sticky nav and hero gradient. */
.pv-section__head {
    position: relative;
    margin-bottom: 1.1rem;
    padding-bottom: 0.85rem;
}
.pv-section__head::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg,
        rgba(168, 107, 255, 0.55) 0%,
        rgba(168, 107, 255, 0.18) 35%,
        transparent 100%);
    pointer-events: none;
}
.pv-section__head--with-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.pv-section__title {
    margin: 0 0 0.3rem;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
}
/* Icon "tile" — wraps the FA icon in a rounded square with a tinted
   purple background, matching the new nav theme. Replaces the previous
   bare-icon look for a more dashboard-grade visual anchor per section. */
.pv-section__title i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: linear-gradient(135deg,
        rgba(168, 107, 255, 0.22),
        rgba(168, 107, 255, 0.08));
    border: 1px solid rgba(168, 107, 255, 0.35);
    color: var(--pv-purple);
    font-size: 0.95rem;
    box-shadow:
        0 2px 8px rgba(168, 107, 255, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition:
        box-shadow var(--pv-dur) var(--pv-ease),
        transform var(--pv-dur) var(--pv-ease),
        background var(--pv-dur) var(--pv-ease);
}
.pv-section__sub {
    margin: 0;
    color: var(--pv-text-muted);
    font-size: 0.85rem;
}

/* ---------- PROSE block (educational analysis sections) ----------------
   Used by the "Understanding [player]'s Stats" section in player_v2.php.
   Styled for comfortable long-form reading at desktop width while still
   working on mobile. */
.pv-prose {
    color: var(--pv-text);
    font-size: 0.95rem;
    line-height: 1.7;
    max-width: 75ch;
}
.pv-prose h3 {
    color: var(--pv-text);
    font-size: 1.05rem;
    font-weight: 700;
    margin: 1.75rem 0 0.6rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--pv-border);
    letter-spacing: 0.2px;
}
.pv-prose h3:first-child {
    margin-top: 0;
}
.pv-prose p {
    margin: 0 0 0.85rem;
    color: var(--pv-text-muted);
}
.pv-prose strong {
    color: var(--pv-text);
    font-weight: 600;
}
.pv-prose em {
    color: var(--pv-text);
    font-style: italic;
}
.pv-prose a {
    color: var(--pv-accent);
    text-decoration: none;
    border-bottom: 1px dotted var(--pv-accent);
    transition: color 0.15s ease, border-color 0.15s ease;
}
.pv-prose a:hover {
    color: var(--pv-text);
    border-bottom-color: var(--pv-text);
}
@media (max-width: 575px) {
    .pv-prose {
        font-size: 0.9rem;
        line-height: 1.65;
    }
    .pv-prose h3 {
        font-size: 1rem;
    }
}

/* ---------- EDU block (compact "Understanding [player]'s Stats") ------
   Replaces what used to be a single ~600-word .pv-prose column. Same SEO
   copy, but laid out as a tight intro line + 2x2 responsive card grid
   with inline benchmark chips. Roughly halves the section's vertical
   footprint while keeping every H3 / target keyword indexable.

   Namespaced under .pv-edu* on purpose: the previously-attempted
   .pv-insight* namespace collided with the existing .pv-insight chip
   class (display:flex), which made the section's children render as
   side-by-side columns. Keep this namespace dedicated to the
   educational/SEO guide block. */
.pv-edu__intro {
    color: var(--pv-text-muted);
    font-size: 0.92rem;
    line-height: 1.65;
    max-width: 80ch;
    margin: 0 0 1rem;
}
.pv-edu__intro p { margin: 0; }
.pv-edu__intro strong { color: var(--pv-text); font-weight: 600; }
.pv-edu__intro em { color: var(--pv-text); font-style: italic; }

.pv-edu__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.85rem;
}

.pv-edu__card {
    position: relative;
    background: var(--pv-bg-elevated);
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-radius);
    padding: 0.85rem 1rem 0.95rem;
    overflow: hidden;
    transition: border-color var(--pv-dur) var(--pv-ease),
                transform   var(--pv-dur) var(--pv-ease);
}
.pv-edu__card::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
}
.pv-edu__card[data-kind="combat"]::before   { background: var(--pv-gradient-combat);   }
.pv-edu__card[data-kind="survival"]::before { background: var(--pv-gradient-survival); }
.pv-edu__card[data-kind="ranked"]::before   { background: var(--pv-gradient-support);  }
.pv-edu__card[data-kind="coaching"]::before { background: var(--pv-gradient-movement); }
.pv-edu__card > * { position: relative; z-index: 1; }
.pv-edu__card:hover {
    border-color: var(--pv-border-strong);
    transform: translateY(-1px);
}

.pv-edu__card-head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.55rem;
}
.pv-edu__card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--pv-bg-elevated-3);
    border: 1px solid var(--pv-border);
    color: var(--pv-accent);
    font-size: 0.82rem;
    flex: 0 0 auto;
}
.pv-edu__card[data-kind="combat"]   .pv-edu__card-icon { color: var(--pv-danger);  }
.pv-edu__card[data-kind="survival"] .pv-edu__card-icon { color: var(--pv-success); }
.pv-edu__card[data-kind="ranked"]   .pv-edu__card-icon { color: var(--pv-warn);    }
.pv-edu__card[data-kind="coaching"] .pv-edu__card-icon { color: var(--pv-purple);  }
.pv-edu__card-head h3 {
    margin: 0;
    color: var(--pv-text);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1.3;
}
.pv-edu__card-body {
    color: var(--pv-text-muted);
    font-size: 0.86rem;
    line-height: 1.55;
}
.pv-edu__card-body p {
    margin: 0 0 0.65rem;
}
.pv-edu__card-body p:last-child { margin-bottom: 0; }
.pv-edu__card-body strong { color: var(--pv-text); font-weight: 600; }
.pv-edu__card-body em     { color: var(--pv-text); font-style: italic; }

/* Benchmark mini-table: a label on the left and a row of color-coded
   chips on the right. Implemented with a description-list so it is still
   semantic for screen readers and crawlers. */
.pv-bench {
    margin: 0.55rem 0 0;
    padding: 0.55rem 0.65rem;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-radius-sm);
    display: grid;
    gap: 0.3rem;
}
.pv-bench__row {
    display: grid;
    grid-template-columns: 44px 1fr;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
}
.pv-bench__lbl {
    margin: 0;
    color: var(--pv-text);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.pv-bench__val {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}
.pv-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: var(--pv-radius-pill);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    border: 1px solid var(--pv-border);
    background: var(--pv-bg-elevated-2);
    color: var(--pv-text);
    white-space: nowrap;
}
.pv-chip--good { color: var(--pv-success); border-color: rgba(61, 220, 151, 0.35); background: rgba(61, 220, 151, 0.10); }
.pv-chip--mid  { color: var(--pv-info);    border-color: rgba(87, 214, 255, 0.30); background: rgba(87, 214, 255, 0.08); }
.pv-chip--warn { color: var(--pv-warn);    border-color: rgba(255, 200, 87, 0.35); background: rgba(255, 200, 87, 0.10); }
.pv-chip--bad  { color: var(--pv-danger);  border-color: rgba(255, 107, 107, 0.35); background: rgba(255, 107, 107, 0.10); }

.pv-edu__foot {
    margin-top: 1rem;
    padding: 0.7rem 0.9rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.85rem;
    background: var(--pv-bg-elevated);
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-radius);
    font-size: 0.82rem;
}
.pv-edu__foot-lbl {
    color: var(--pv-text-muted);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.pv-edu__foot-lbl i { color: var(--pv-accent); }
.pv-edu__foot-link {
    color: var(--pv-text);
    text-decoration: none;
    border-bottom: 1px dotted var(--pv-accent);
    transition: color var(--pv-dur) var(--pv-ease),
                border-color var(--pv-dur) var(--pv-ease);
}
.pv-edu__foot-link:hover {
    color: var(--pv-accent);
    border-bottom-color: var(--pv-text);
}

@media (max-width: 575px) {
    .pv-edu__intro     { font-size: 0.88rem; }
    .pv-edu__grid      { gap: 0.65rem; }
    .pv-edu__card      { padding: 0.75rem 0.85rem 0.85rem; }
    .pv-edu__card-head h3 { font-size: 0.88rem; }
    .pv-edu__card-body    { font-size: 0.83rem; }
    .pv-bench__row {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
    .pv-bench__lbl { font-size: 0.68rem; }
    .pv-chip       { font-size: 0.68rem; }
    .pv-edu__foot  { gap: 0.4rem 0.7rem; padding: 0.6rem 0.75rem; }
}

/* ---------- CARD primitive -------------------------------------------- */
.pv-card {
    background: var(--pv-bg-elevated);
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-radius);
    overflow: hidden;
}
.pv-card__head {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--pv-border);
    background: var(--pv-bg-elevated-2);
}
.pv-card__head h3 {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--pv-text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.pv-card__head h3 i { color: var(--pv-accent); }
.pv-card__body {
    padding: 1rem;
}

/* ---------- GRID utilities -------------------------------------------- */
.pv-grid { display: grid; gap: 1rem; }
.pv-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pv-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pv-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pv-grid--2-1 { grid-template-columns: 2fr 1fr; }
.pv-grid--4-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------- MODE SWITCH ----------------------------------------------- */
.pv-mode-switch {
    display: inline-flex;
    background: var(--pv-bg-elevated);
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-radius-pill);
    padding: 0.2rem;
}
.pv-mode-switch__opt {
    background: transparent;
    border: 0;
    color: var(--pv-text-muted);
    padding: 0.35rem 0.85rem;
    border-radius: var(--pv-radius-pill);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--pv-dur) var(--pv-ease);
}
.pv-mode-switch__opt:hover { color: var(--pv-text); }
.pv-mode-switch__opt.active {
    background: var(--pv-accent);
    color: #fff;
}

/* ---------- PERFORMANCE HISTORY TABS ---------------------------------
   Tab strip that lives in the Performance History card head. Mirrors
   .pv-mode-switch visually (so the page stays cohesive) but uses its
   own class name to avoid the global click-binder in attachModeSwitch
   from hijacking these buttons.

   The tabs sit on the right of the card head on desktop and wrap to a
   horizontally scrollable strip on narrow screens so they never push
   the card title off-screen. */
.pv-perf-head {
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    align-items: flex-start;
}
.pv-perf-head__title {
    min-width: 0;
    flex: 1 1 auto;
}
.pv-perf-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    background: var(--pv-bg-elevated);
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-radius-pill);
    padding: 0.2rem;
    gap: 0.15rem;
    max-width: 100%;
}
.pv-perf-tabs__opt {
    background: transparent;
    border: 0;
    color: var(--pv-text-muted);
    padding: 0.35rem 0.75rem;
    border-radius: var(--pv-radius-pill);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--pv-dur) var(--pv-ease);
    white-space: nowrap;
}
.pv-perf-tabs__opt:hover:not(.active) {
    color: var(--pv-text);
    background: rgba(255, 255, 255, 0.04);
}
.pv-perf-tabs__opt.active {
    background: var(--pv-accent);
    color: #fff;
}
.pv-perf-tabs__opt:focus-visible {
    outline: 2px solid var(--pv-accent);
    outline-offset: 2px;
}
.pv-perf-tabs__opt[hidden] { display: none; }

@media (max-width: 575.98px) {
    .pv-perf-head { flex-direction: column; align-items: stretch; }
    .pv-perf-tabs {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .pv-perf-tabs__opt { flex: 0 0 auto; }
}

/* ---------- CAREER PROFILE CARD --------------------------------------
   New section (2026-04-21) backed by the rich `stats[]` array we now
   persist from /players/{id}/survival_mastery. The card has three
   stacked zones (hero tiles, travel breakdown bar, footer chip grid).
   All three are vanilla flexbox; no JS-driven layout. */
.pv-career__hero {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
}
.pv-career__hero-tile {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem 0.95rem;
    background: var(--pv-bg-elevated);
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-radius);
    min-width: 0; /* let flex children shrink instead of overflowing */
    transition: border-color var(--pv-dur) var(--pv-ease),
                background     var(--pv-dur) var(--pv-ease);
}
.pv-career__hero-tile:hover {
    border-color: var(--pv-border-strong);
    background: var(--pv-bg-elevated-2);
}
.pv-career__hero-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(79, 139, 255, 0.12);
    color: var(--pv-accent);
    border-radius: 10px;
    font-size: 1.05rem;
    flex-shrink: 0;
}
.pv-career__hero-meta { min-width: 0; }
.pv-career__hero-val {
    color: #fff;
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pv-career__hero-lbl {
    color: var(--pv-text-muted);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.15rem;
}
.pv-career__hero-hint {
    color: var(--pv-text);
    font-size: 0.72rem;
    opacity: 0.75;
    margin-top: 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- Travel breakdown bar ---------------------------------- */
.pv-career__travel {
    margin-top: 1rem;
    padding: 0.85rem 0.95rem;
    background: var(--pv-bg-elevated);
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-radius);
}
.pv-career__travel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.55rem;
}
.pv-career__travel-title {
    color: var(--pv-text);
    font-size: 0.82rem;
    font-weight: 600;
}
.pv-career__travel-title i {
    color: var(--pv-accent);
    margin-right: 0.35rem;
}
.pv-career__travel-total {
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
}
.pv-career__travel-bar {
    display: flex;
    width: 100%;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.04);
}
.pv-career__travel-seg {
    height: 100%;
    transition: filter var(--pv-dur) var(--pv-ease);
}
.pv-career__travel-seg:hover { filter: brightness(1.25); }
.pv-career__travel-seg--walk    { background: linear-gradient(90deg, #4f8bff, #6aa3ff); }
.pv-career__travel-seg--vehicle { background: linear-gradient(90deg, #e040fb, #ff5cd6); }
.pv-career__travel-seg--swim    { background: linear-gradient(90deg, #00d4aa, #4ce0c0); }
.pv-career__travel-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-top: 0.6rem;
    font-size: 0.78rem;
    color: var(--pv-text-muted);
}
.pv-career__travel-key i { margin-right: 0.3rem; opacity: 0.85; }
.pv-career__travel-key--walk    i { color: #4f8bff; }
.pv-career__travel-key--vehicle i { color: #e040fb; }
.pv-career__travel-key--swim    i { color: #00d4aa; }

/* ---------- Footer chip grid ------------------------------------- */
.pv-career__chips {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.6rem;
}
.pv-career__chip {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.7rem;
    background: var(--pv-bg-elevated);
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-radius);
    min-width: 0;
}
.pv-career__chip-icon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--pv-text-muted);
    font-size: 0.9rem;
    flex-shrink: 0;
}
.pv-career__chip-meta { min-width: 0; }
.pv-career__chip-val {
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pv-career__chip-lbl {
    color: var(--pv-text-muted);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-top: 0.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 991.98px) {
    .pv-career__hero  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pv-career__chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    .pv-career__hero { grid-template-columns: 1fr; }
}

/* ---------- COMBAT GROUP PANELS --------------------------------------- */
.pv-group {
    background: var(--pv-bg-elevated);
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-radius);
    padding: 1rem;
    position: relative;
    overflow: hidden;
}
.pv-group::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.6;
    pointer-events: none;
    z-index: 0;
}
.pv-group[data-kind="combat"]::before    { background: var(--pv-gradient-combat); }
.pv-group[data-kind="survival"]::before  { background: var(--pv-gradient-survival); }
.pv-group[data-kind="support"]::before   { background: var(--pv-gradient-support); }
.pv-group[data-kind="movement"]::before  { background: var(--pv-gradient-movement); }

.pv-group > * { position: relative; z-index: 1; }

.pv-group__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--pv-border);
}
.pv-group__icon {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--pv-radius-sm);
    font-size: 0.95rem;
}
.pv-group[data-kind="combat"]   .pv-group__icon { background: rgba(255, 107, 107, 0.18); color: var(--pv-danger); }
.pv-group[data-kind="survival"] .pv-group__icon { background: rgba(61, 220, 151, 0.18); color: var(--pv-success); }
.pv-group[data-kind="support"]  .pv-group__icon { background: rgba(168, 107, 255, 0.18); color: var(--pv-purple); }
.pv-group[data-kind="movement"] .pv-group__icon { background: rgba(255, 200, 87, 0.18); color: var(--pv-warn); }

.pv-group__title {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.pv-group__sub {
    margin-left: auto;
    font-size: 0.72rem;
    color: var(--pv-text-muted);
}

/* "Spreadsheet pro" stat layout (refactor 2026-04-21).
   Each stat is a single row with the label flush-left and the value
   flush-right, separated by a hairline divider. The 2-column grid
   gives a balanced look for groups of 5–8 stats without leaving the
   visible empty cells the previous 3-column layout had at the bottom
   of cards with odd counts. Mobile collapses to 1 column. */
.pv-group__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1.25rem;
}
.pv-stat {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.85rem;
    min-width: 0;
    padding: 0.6rem 0.55rem;
    border-radius: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background var(--pv-dur) var(--pv-ease);
}
/* Drop the divider on the trailing rows so the card bottom edge stays
   clean. Parity classes are added by renderGroup() in player_v2.js
   based on stat count: even-count groups drop the last 2 (the full
   bottom row); odd-count groups drop only the last 1 (the lone item
   in the half row), letting its partner cell above keep its divider
   so the line still spans the full width of the second-to-last row. */
.pv-group__stats--even .pv-stat:nth-last-child(-n+2) {
    border-bottom: none;
}
.pv-group__stats--odd .pv-stat:last-child {
    border-bottom: none;
}
.pv-stat:hover {
    background: rgba(255, 255, 255, 0.03);
}
.pv-stat__label {
    font-size: 0.78rem;
    color: var(--pv-text-muted);
    font-weight: 500;
    letter-spacing: 0;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Value column right-aligned, baseline-aligned with the label, with
   wrap support so an optional `__hint` can drop to a second line
   below the number while staying right-justified. */
.pv-stat__value {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0 0.3rem;
    flex-shrink: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.pv-stat__num {
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    letter-spacing: -0.01em;
}
.pv-stat__unit {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--pv-text-muted);
    letter-spacing: 0.02em;
}
.pv-stat__hint {
    width: 100%;
    text-align: right;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--pv-text-dim);
    letter-spacing: 0.02em;
    margin-top: 0.05rem;
}

/* ---------- RANKED snapshot ------------------------------------------- */
.pv-snap {
    background: var(--pv-bg-elevated);
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-radius);
    padding: 1rem 0.85rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
/* Subtle tier-tinted glow on the current rank card */
.pv-snap--bronze   { border-color: rgba(205, 127, 50, 0.4);  box-shadow: inset 0 0 32px rgba(205, 127, 50, 0.07); }
.pv-snap--silver   { border-color: rgba(192, 192, 192, 0.4); box-shadow: inset 0 0 32px rgba(192, 192, 192, 0.07); }
.pv-snap--gold     { border-color: rgba(255, 215, 0, 0.4);   box-shadow: inset 0 0 32px rgba(255, 215, 0, 0.07); }
.pv-snap--platinum { border-color: rgba(174, 214, 241, 0.4); box-shadow: inset 0 0 32px rgba(174, 214, 241, 0.07); }
.pv-snap--crystal  { border-color: rgba(0, 229, 204, 0.4);   box-shadow: inset 0 0 32px rgba(0, 229, 204, 0.07); }
.pv-snap--diamond  { border-color: rgba(93, 173, 226, 0.4);  box-shadow: inset 0 0 32px rgba(93, 173, 226, 0.07); }
.pv-snap--master   { border-color: rgba(255, 138, 76, 0.4);  box-shadow: inset 0 0 32px rgba(255, 138, 76, 0.07); }
.pv-snap--survivor { border-color: rgba(255, 107, 157, 0.4); box-shadow: inset 0 0 32px rgba(255, 107, 157, 0.07); }

.pv-snap__icon     { color: var(--pv-accent); font-size: 1rem; margin-bottom: 0.4rem; height: 56px; display: flex; align-items: center; justify-content: center; }
.pv-snap__tier-img {
    height: 56px;
    margin-bottom: 0.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pv-snap__tier-img img {
    height: 56px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}
.pv-snap__value {
    font-size: 1.45rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    word-break: break-word;
}
.pv-snap__label {
    font-size: 0.7rem;
    color: var(--pv-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-top: 0.2rem;
}

/* ---------- PAST SEASONS ---------------------------------------------- */
.pv-seasons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.85rem;
}
.pv-season {
    background: var(--pv-bg-elevated-2);
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-radius);
    padding: 0.85rem;
    transition: var(--pv-dur) var(--pv-ease);
    border-left-width: 3px;
}
.pv-season:hover { border-color: var(--pv-border-strong); transform: translateY(-1px); }
/* Tier-coloured left border so users instantly recognise rank at a glance. */
.pv-season[data-tier="bronze"]   { border-left-color: var(--pv-tier-bronze); }
.pv-season[data-tier="silver"]   { border-left-color: var(--pv-tier-silver); }
.pv-season[data-tier="gold"]     { border-left-color: var(--pv-tier-gold); }
.pv-season[data-tier="platinum"] { border-left-color: var(--pv-tier-platinum); }
.pv-season[data-tier="crystal"]  { border-left-color: var(--pv-tier-crystal); }
.pv-season[data-tier="diamond"]  { border-left-color: var(--pv-tier-diamond); }
.pv-season[data-tier="master"]   { border-left-color: var(--pv-tier-master); }
.pv-season[data-tier="survivor"] { border-left-color: var(--pv-tier-survivor); }
.pv-season[data-tier="bronze"]   .pv-season__tier { background: rgba(205, 127, 50, 0.18);  color: var(--pv-tier-bronze); }
.pv-season[data-tier="silver"]   .pv-season__tier { background: rgba(192, 192, 192, 0.18); color: var(--pv-tier-silver); }
.pv-season[data-tier="gold"]     .pv-season__tier { background: rgba(255, 215, 0, 0.18);   color: var(--pv-tier-gold); }
.pv-season[data-tier="platinum"] .pv-season__tier { background: rgba(174, 214, 241, 0.18); color: var(--pv-tier-platinum); }
.pv-season[data-tier="crystal"]  .pv-season__tier { background: rgba(0, 229, 204, 0.18);   color: var(--pv-tier-crystal); }
.pv-season[data-tier="diamond"]  .pv-season__tier { background: rgba(93, 173, 226, 0.18);  color: var(--pv-tier-diamond); }
.pv-season[data-tier="master"]   .pv-season__tier { background: rgba(255, 138, 76, 0.18);  color: var(--pv-tier-master); }
.pv-season[data-tier="survivor"] .pv-season__tier { background: rgba(255, 107, 157, 0.18); color: var(--pv-tier-survivor); }
.pv-season__head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.6rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--pv-border);
}
.pv-season__tier-img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}
.pv-season__head-text { min-width: 0; flex: 1; }
.pv-season__name {
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}
.pv-season__tier-name {
    font-size: 0.7rem;
    color: var(--pv-text-muted);
    font-weight: 600;
    margin-top: 0.1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
/* Legacy badge style retained for backwards-compat in case other code paths
   still emit pv-season__tier instead of the new tier-img/text combo. */
.pv-season__tier {
    font-size: 0.7rem;
    padding: 0.12rem 0.45rem;
    border-radius: var(--pv-radius-pill);
    background: var(--pv-bg-elevated-3);
    color: var(--pv-text);
    font-weight: 700;
}
.pv-season__row {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    color: var(--pv-text-muted);
    padding: 0.18rem 0;
}
.pv-season__row strong { color: var(--pv-text); font-variant-numeric: tabular-nums; }

/* ---------- MATCHES list ---------------------------------------------- */
.pv-matches { display: flex; flex-direction: column; gap: 0.6rem; }
.pv-match {
    display: grid;
    grid-template-columns: 84px 1fr auto auto;
    gap: 0.85rem;
    align-items: center;
    background: var(--pv-bg-elevated-2);
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-radius);
    padding: 0.6rem;
    transition: var(--pv-dur) var(--pv-ease);
}
.pv-match:hover { border-color: var(--pv-border-strong); transform: translateY(-1px); }
.pv-match__map {
    position: relative;
    width: 84px;
    height: 64px;
    border-radius: var(--pv-radius-sm);
    overflow: hidden;
    background: var(--pv-bg-elevated-3);
}
.pv-match__map img { width: 100%; height: 100%; object-fit: cover; }
.pv-match__placement {
    position: absolute;
    top: 4px; left: 4px;
    padding: 0.1rem 0.4rem;
    background: rgba(13, 17, 23, 0.85);
    border-radius: var(--pv-radius-pill);
    font-size: 0.7rem;
    font-weight: 800;
    color: #fff;
}
.pv-match__placement[data-tier="gold"]   { background: rgba(255, 215, 0, 0.85); color: #000; }
.pv-match__placement[data-tier="silver"] { background: rgba(192, 192, 192, 0.85); color: #000; }
.pv-match__placement[data-tier="bronze"] { background: rgba(205, 127, 50, 0.85); color: #fff; }
.pv-match__main { min-width: 0; }
.pv-match__title {
    font-weight: 700;
    color: #fff;
    margin: 0;
    font-size: 0.92rem;
}
.pv-match__sub {
    color: var(--pv-text-muted);
    font-size: 0.75rem;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.85rem;
}
.pv-match__sub i { color: var(--pv-text-dim); margin-right: 0.2rem; }
.pv-match__numbers {
    display: flex;
    gap: 0.85rem;
    align-items: center;
}
.pv-match__num { text-align: center; }
.pv-match__num-val {
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.pv-match__num-lbl {
    font-size: 0.62rem;
    color: var(--pv-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.pv-match__action {
    display: flex;
    align-items: center;
}
.pv-match__time {
    font-size: 0.72rem;
    color: var(--pv-text-muted);
    text-align: right;
    min-width: 80px;
}

/* ---------- Inline per-match teammates (squad chips under match title) ---
   Rendered inside .pv-match__main, below .pv-match__sub. Suppressed in
   JS for arcade / training / tdm / war / zombie matches because their
   "teammates" are random-lobby pairings rather than the player's actual
   squad. Banned squadmates inherit a red/orange tint via the modifier
   classes so they're visually flagged without an extra DB round-trip
   (the ban_type is sourced from the existing teammate_stats payload). */
.pv-match__teammates {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.4rem;
    margin-top: 0.45rem;
    padding-right: 2.5rem; /* leave room for the absolute open-hint icon */
}
.pv-match__teammates-lbl {
    color: var(--pv-text-dim);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.pv-match__teammates-lbl i { color: var(--pv-text-dim); font-size: 0.7rem; }
.pv-match__teammate {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.18rem 0.55rem;
    background: var(--pv-bg-elevated-3);
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-radius-pill);
    color: var(--pv-text);
    font-size: 0.74rem;
    text-decoration: none;
    transition: var(--pv-dur) var(--pv-ease);
    line-height: 1.2;
    max-width: 160px;
}
.pv-match__teammate-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Tiny rank-tier badge prepended to each teammate chip on a match row.
   Sized to roughly the cap-height of the surrounding text so it reads
   as an inline glyph instead of a separate visual block. The drop
   shadow keeps the icon legible on every tinted chip variant
   (default / banned / temp-banned). */
.pv-match__teammate-tier {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55));
}
.pv-match__teammate:hover {
    border-color: var(--pv-accent);
    color: var(--pv-accent);
    background: var(--pv-bg-elevated-2);
    transform: translateY(-1px);
}
.pv-match__teammate--banned {
    border-color: rgba(255, 107, 107, 0.4);
    background: rgba(255, 107, 107, 0.08);
    color: rgba(255, 200, 200, 0.95);
}
.pv-match__teammate--banned:hover {
    border-color: var(--pv-danger);
    background: rgba(255, 107, 107, 0.16);
    color: var(--pv-danger);
}
.pv-match__teammate--temp-banned {
    border-color: rgba(255, 200, 87, 0.4);
    background: rgba(255, 200, 87, 0.08);
    color: rgba(255, 220, 150, 0.95);
}
.pv-match__teammate--temp-banned:hover {
    border-color: var(--pv-warn);
    background: rgba(255, 200, 87, 0.16);
    color: var(--pv-warn);
}
.pv-match__teammate-ban { font-size: 0.65rem; }

/* ---------- TEAMMATES ------------------------------------------------- */
.pv-teammates { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pv-teammate {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.7rem 0.35rem 0.4rem;
    background: var(--pv-bg-elevated-2);
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-radius-pill);
    color: var(--pv-text);
    font-size: 0.82rem;
    text-decoration: none;
    transition: var(--pv-dur) var(--pv-ease);
}
.pv-teammate:hover {
    border-color: var(--pv-accent);
    background: var(--pv-bg-elevated-3);
    color: var(--pv-accent);
    transform: translateY(-1px);
}
.pv-teammate--banned {
    border-color: rgba(255, 107, 107, 0.4);
    background: rgba(255, 107, 107, 0.06);
}
.pv-teammate--banned:hover {
    border-color: var(--pv-danger);
    background: rgba(255, 107, 107, 0.12);
    color: var(--pv-danger);
}
.pv-teammate--temp-banned {
    border-color: rgba(255, 200, 87, 0.45);
    background: rgba(255, 200, 87, 0.07);
}
.pv-teammate--temp-banned:hover {
    border-color: var(--pv-warn);
    background: rgba(255, 200, 87, 0.12);
    color: var(--pv-warn);
}
.pv-teammate__avatar {
    width: 26px; height: 26px;
    background: var(--pv-accent);
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 800;
    flex-shrink: 0;
}
/* Tier-icon variant of the avatar slot. The chip background is dropped
   in favour of the rank icon's own art, with a subtle drop-shadow so
   the icon reads cleanly over both the normal pill background and the
   tinted banned/temp-banned variants. The container is slightly larger
   so the tier badge has room to breathe vs. a 26px monogram. */
.pv-teammate__avatar--tier {
    width: 30px;
    height: 30px;
    background: transparent;
    border-radius: 0;
    overflow: visible;
    margin-right: -0.05rem;
}
.pv-teammate__avatar--tier img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}
.pv-teammate--banned .pv-teammate__avatar {
    background: var(--pv-danger);
}
.pv-teammate--banned .pv-teammate__avatar--tier {
    background: transparent;
}
.pv-teammate--temp-banned .pv-teammate__avatar {
    background: var(--pv-warn);
    color: #111827;
}
.pv-teammate--temp-banned .pv-teammate__avatar--tier {
    background: transparent;
}
.pv-teammate__name {
    font-weight: 600;
    max-width: 18ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pv-teammate__ban {
    color: var(--pv-danger);
    font-size: 0.75rem;
}
.pv-teammate__ban--temp {
    color: var(--pv-warn);
}
.pv-teammate__count {
    color: var(--pv-text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    padding-left: 0.45rem;
    border-left: 1px solid var(--pv-border);
    margin-left: 0.15rem;
}

/* ---------- MINI ROWS (Top Maps / Top Weapons in Overview) ----------- */
.pv-mini-row {
    display: grid;
    grid-template-columns: 38px 1fr auto;
    gap: 0.7rem;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--pv-border);
}
.pv-mini-row:last-child { border-bottom: 0; }
.pv-mini-row__icon {
    width: 38px;
    height: 28px;
    border-radius: var(--pv-radius-sm);
    overflow: hidden;
    background: var(--pv-bg-elevated-3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pv-text-muted);
    flex-shrink: 0;
}
.pv-mini-row__icon img { width: 100%; height: 100%; object-fit: cover; }
.pv-mini-row__icon--weapon {
    background: var(--pv-bg-elevated-2);
    padding: 0.15rem;
}
.pv-mini-row__icon--weapon img { object-fit: contain; }
.pv-mini-row__main { min-width: 0; }
.pv-mini-row__name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--pv-text);
    margin-bottom: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pv-mini-row__bar {
    height: 5px;
    background: var(--pv-bg-elevated-3);
    border-radius: var(--pv-radius-pill);
    overflow: hidden;
}
.pv-mini-row__bar > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--pv-accent), var(--pv-purple));
    border-radius: inherit;
    transition: width 600ms var(--pv-ease);
}
.pv-mini-row__val {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--pv-text);
    font-variant-numeric: tabular-nums;
    text-align: right;
    min-width: 70px;
}
.pv-mini-row__val small {
    display: block;
    font-size: 0.62rem;
    color: var(--pv-text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ---------- Snap card hint (used in Ranked snapshot) ----------------- */
.pv-snap__hint {
    margin-top: 0.25rem;
    font-size: 0.66rem;
    color: var(--pv-text-dim);
    font-weight: 500;
}

/* ---------- Empty state card ---------------------------------------- */
.pv-empty--card {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--pv-bg-elevated);
    border: 1px dashed var(--pv-border-strong);
    border-radius: var(--pv-radius);
    color: var(--pv-text-muted);
    font-style: normal;
}
.pv-empty--card > i {
    font-size: 1.75rem;
    color: var(--pv-text-dim);
}
.pv-empty--card strong {
    color: var(--pv-text);
}

/* ---------- WEAPONS top 3 --------------------------------------------- */
.pv-weapon-top {
    background: var(--pv-bg-elevated);
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-radius);
    padding: 1rem;
    transition: var(--pv-dur) var(--pv-ease);
}
.pv-weapon-top:hover { border-color: var(--pv-border-strong); transform: translateY(-2px); }
.pv-weapon-top__head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 0.85rem;
}
.pv-weapon-top__img {
    width: 96px;
    height: 48px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}
.pv-weapon-top__info { min-width: 0; flex: 1; }
.pv-weapon-top__name {
    margin: 0 0 0.15rem;
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
}
.pv-weapon-top__meta {
    margin: 0;
    font-size: 0.75rem;
    color: var(--pv-text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}
.pv-weapon-top__meta strong { color: var(--pv-text); }

.pv-weapon-bar {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 0.6rem;
    align-items: center;
    padding: 0.4rem 0;
    font-size: 0.78rem;
}
.pv-weapon-bar__lbl { color: var(--pv-text-muted); }
.pv-weapon-bar__track {
    height: 6px;
    background: var(--pv-bg-elevated-3);
    border-radius: var(--pv-radius-pill);
    overflow: hidden;
}
.pv-weapon-bar__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--pv-accent), var(--pv-purple));
    border-radius: inherit;
    transition: width 600ms var(--pv-ease);
}
/* Per-metric gradient fills — picked so the colour reads "right" for
   the metric at a glance without learning a legend:
     - Kills      = red    (lethal / damage to opponents)
     - Headshots  = gold   (precision / accuracy)
     - Damage     = blue   (bulk volume, neutral aggression)
     - Longest    = green  (range / cool sniper distance)
   These map to the existing semantic palette tokens so they stay in
   sync if the design system tokens are ever retuned. */
.pv-weapon-bar[data-metric="kills"] .pv-weapon-bar__fill {
    background: linear-gradient(90deg, #ff8a8a, var(--pv-danger));
}
.pv-weapon-bar[data-metric="headshots"] .pv-weapon-bar__fill {
    background: linear-gradient(90deg, #ffd680, var(--pv-warn));
}
.pv-weapon-bar[data-metric="damage"] .pv-weapon-bar__fill {
    background: linear-gradient(90deg, #80c0ff, var(--pv-accent));
}
.pv-weapon-bar[data-metric="longest"] .pv-weapon-bar__fill {
    background: linear-gradient(90deg, #80f0c8, var(--pv-success));
}
/* Tinted label colour echoes the bar fill so the eye links the
   metric name to its bar without needing the user to re-read the
   gradient swatch. Subtle — uses the same semantic tokens as above. */
.pv-weapon-bar[data-metric="kills"]     .pv-weapon-bar__lbl { color: rgba(255, 138, 138, 0.85); }
.pv-weapon-bar[data-metric="headshots"] .pv-weapon-bar__lbl { color: rgba(255, 214, 128, 0.85); }
.pv-weapon-bar[data-metric="damage"]    .pv-weapon-bar__lbl { color: rgba(128, 192, 255, 0.85); }
.pv-weapon-bar[data-metric="longest"]   .pv-weapon-bar__lbl { color: rgba(128, 240, 200, 0.85); }
.pv-weapon-bar__val { color: var(--pv-text); font-weight: 700; font-variant-numeric: tabular-nums; min-width: 50px; text-align: right; }

.pv-weapon-top__rank {
    font-size: 0.85rem;
    margin-left: 0.4rem;
}

/* ---------- Weapon group breakdown (per category) ------------------- */
.pv-wgroup {
    background: var(--pv-bg-elevated-2);
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-radius);
    padding: 0.85rem;
    margin-bottom: 0.85rem;
}
.pv-wgroup:last-child { margin-bottom: 0; }
.pv-wgroup__head {
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.7rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--pv-border);
}
.pv-wgroup__head > i {
    color: var(--pv-accent);
    font-size: 0.95rem;
}
.pv-wgroup__head strong {
    color: var(--pv-text);
    font-size: 0.92rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.pv-wgroup__total {
    color: var(--pv-text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    margin-left: 0.7rem;
    font-variant-numeric: tabular-nums;
}
.pv-wgroup__bar {
    grid-column: 1 / -1;
    height: 4px;
    background: var(--pv-bg-elevated-3);
    border-radius: var(--pv-radius-pill);
    overflow: hidden;
    margin-top: 0.4rem;
}
.pv-wgroup__bar > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--pv-accent), var(--pv-purple));
    border-radius: inherit;
    transition: width 600ms var(--pv-ease);
}
.pv-wgroup__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.55rem;
}
.pv-weapon-row {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 0.55rem;
    align-items: center;
    padding: 0.45rem;
    background: var(--pv-bg-elevated);
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-radius-sm);
    transition: var(--pv-dur) var(--pv-ease);
}
.pv-weapon-row:hover {
    border-color: var(--pv-border-strong);
    background: var(--pv-bg-elevated-3);
}
.pv-weapon-row__img {
    width: 56px;
    height: 28px;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}
.pv-weapon-row__name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--pv-text);
    line-height: 1.2;
    margin-bottom: 0.1rem;
}
.pv-weapon-row__lvl {
    font-size: 0.65rem;
    color: var(--pv-text-muted);
    font-weight: 600;
    background: var(--pv-bg-elevated-3);
    padding: 0.05rem 0.35rem;
    border-radius: var(--pv-radius-pill);
    margin-left: 0.3rem;
}
.pv-weapon-row__meta {
    font-size: 0.72rem;
    color: var(--pv-text-muted);
}

/* Category breakdown rows */
.pv-cat-row {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 0.85rem;
    align-items: center;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--pv-border);
}
.pv-cat-row:last-child { border-bottom: 0; }
.pv-cat-row__name {
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pv-cat-row__bar {
    height: 8px;
    background: var(--pv-bg-elevated-3);
    border-radius: var(--pv-radius-pill);
    overflow: hidden;
}
.pv-cat-row__bar > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--pv-accent), var(--pv-purple));
    border-radius: inherit;
    transition: width 600ms var(--pv-ease);
}
.pv-cat-row__val {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--pv-text);
    font-variant-numeric: tabular-nums;
    min-width: 110px;
    text-align: right;
}
.pv-cat-row__val small {
    display: block;
    font-size: 0.65rem;
    color: var(--pv-text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ---------- CLIPS ---------------------------------------------------- */
.pv-clips-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}
.pv-clip {
    background: var(--pv-bg-elevated-2);
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-radius);
    overflow: hidden;
    text-decoration: none;
    color: var(--pv-text);
    display: flex;
    flex-direction: column;
    transition: var(--pv-dur) var(--pv-ease);
}
.pv-clip:hover {
    border-color: rgba(145, 70, 255, 0.4);
    transform: translateY(-2px);
    color: var(--pv-text);
}
.pv-clip__thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--pv-bg-elevated-3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9146FF;
    font-size: 1.5rem;
    overflow: hidden;
}
.pv-clip__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pv-clip__embed-slot {
    width: 100%;
    height: 100%;
    position: relative;
}
.pv-clip__embed-slot iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.pv-clip__poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(1.02) contrast(1.02);
}
.pv-clip__embed-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.8rem;
    text-align: center;
    color: #dbe7f3;
    background:
        linear-gradient(180deg, rgba(8, 18, 31, 0.88), rgba(10, 22, 37, 0.92)),
        radial-gradient(circle at top, rgba(145, 70, 255, 0.28), transparent 52%);
    font-size: 0.78rem;
}
.pv-clip__embed-placeholder i {
    color: #9146FF;
    font-size: 1.6rem;
}
.pv-clip__play {
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    background: rgba(7, 12, 21, 0.78);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    backdrop-filter: blur(6px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
    transition: var(--pv-dur) var(--pv-ease);
}
.pv-clip__play:hover {
    background: rgba(145, 70, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translate(-50%, -50%) scale(1.03);
}
.pv-clip__play i {
    font-size: 0.78rem;
}
.pv-clip__duration {
    position: absolute;
    bottom: 0.4rem;
    left: 0.4rem;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.1rem 0.4rem;
    border-radius: var(--pv-radius-sm);
}
.pv-clip__tier {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    background: rgba(145, 70, 255, 0.88);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 0.15rem 0.45rem;
    border-radius: var(--pv-radius-sm);
}
.pv-clip__main { padding: 0.6rem 0.7rem; }
.pv-clip__title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--pv-text);
    line-height: 1.3;
    margin-bottom: 0.3rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pv-clip__streamer {
    font-size: 0.72rem;
    color: var(--pv-text-muted);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.pv-clip__streamer i { color: #9146FF; }
.pv-clip__player {
    margin-top: 0.28rem;
    font-size: 0.72rem;
    color: var(--pv-text-muted);
    display: flex;
    align-items: center;
    gap: 0.32rem;
}
.pv-clip__player i {
    color: rgba(255, 255, 255, 0.82);
}
.pv-clip__profiles {
    margin-top: 0.28rem;
    font-size: 0.72rem;
    color: var(--pv-text-muted);
    display: flex;
    align-items: center;
    gap: 0.32rem;
    flex-wrap: wrap;
}
.pv-clip__profiles i {
    color: rgba(255, 255, 255, 0.82);
}
.pv-clip__profiles-sep {
    color: var(--pv-text-dim);
}
.pv-clip__profile-link {
    color: #8bc4ff;
    text-decoration: none;
    font-weight: 600;
}
.pv-clip__profile-link:hover {
    color: #b9dcff;
    text-decoration: underline;
}
.pv-clip__meta {
    margin-top: 0.45rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.55rem;
    font-size: 0.72rem;
    color: var(--pv-text-muted);
}
.pv-clip__meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
}
.pv-clip__meta i {
    color: rgba(255, 255, 255, 0.82);
}
.pv-clip__actions {
    margin-top: 0.6rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--pv-border);
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}
.pv-clip__action {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    padding: 0.35rem 0.62rem;
    border-radius: var(--pv-radius-pill);
    border: 1px solid rgba(145, 70, 255, 0.35);
    background: rgba(145, 70, 255, 0.12);
    color: #e8ddff;
    text-decoration: none;
    font-size: 0.74rem;
    font-weight: 600;
    transition: var(--pv-dur) var(--pv-ease);
}
.pv-clip__action:hover {
    color: #fff;
    border-color: rgba(145, 70, 255, 0.58);
    background: rgba(145, 70, 255, 0.18);
    transform: translateY(-1px);
}
.pv-clip__action--profile {
    border-color: rgba(79, 139, 255, 0.35);
    background: rgba(79, 139, 255, 0.12);
    color: #d9eaff;
}
.pv-clip__action--profile:hover {
    border-color: rgba(79, 139, 255, 0.58);
    background: rgba(79, 139, 255, 0.18);
    color: #fff;
}
@media (max-width: 991.98px) {
    .pv-clips-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .pv-clips-grid { grid-template-columns: 1fr; }
}

/* ---------- BIO socials --------------------------------------------- */
.pv-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: flex-end;
}
.pv-social {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    background: var(--pv-bg-elevated-2);
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-radius-pill);
    color: var(--pv-text);
    font-size: 0.72rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--pv-dur) var(--pv-ease);
}
.pv-social:hover { transform: translateY(-1px); border-color: var(--pv-border-strong); color: var(--pv-text); }
.pv-social--twitch { color: #9146FF; border-color: rgba(145, 70, 255, 0.3); }
.pv-social--yt     { color: #ff4d4d; border-color: rgba(255, 77, 77, 0.3); }
.pv-social--x      { color: var(--pv-text); }
.pv-social--tt     { color: #00f2ea; border-color: rgba(0, 242, 234, 0.3); }
.pv-social--ig     { color: #e1306c; border-color: rgba(225, 48, 108, 0.3); }
.pv-social--dc     { color: #5865F2; border-color: rgba(88, 101, 242, 0.3); }
.pv-profile-bio {
    text-align: left;
    padding: 0.5rem 0.7rem;
    background: var(--pv-bg-elevated-2);
    border-left: 3px solid var(--pv-accent);
    border-radius: var(--pv-radius-sm);
    font-size: 0.85rem;
    color: var(--pv-text-secondary);
    line-height: 1.5;
    max-width: 100%;
    word-break: break-word;
}

/* Bio rows: allow socials to take full width on mobile */
@media (max-width: 575.98px) {
    .pv-bio-row { flex-wrap: wrap; }
    .pv-socials { justify-content: flex-start; width: 100%; margin-top: 0.3rem; }
    .pv-profile-bio { width: 100%; margin-top: 0.3rem; }
}

/* ---------- BIO ------------------------------------------------------- */
.pv-bio-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--pv-border);
    font-size: 0.85rem;
}
.pv-bio-row:last-child { border-bottom: 0; }
.pv-bio-row__lbl { color: var(--pv-text-muted); }
.pv-bio-row__val { color: var(--pv-text); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

.pv-history-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--pv-border);
    font-size: 0.85rem;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.pv-history-row:last-child { border-bottom: 0; }
.pv-history-row__main { min-width: 0; flex: 1; }
.pv-history-row__main del { color: var(--pv-text-muted); margin-right: 0.4rem; }
.pv-history-row__main strong { color: var(--pv-text); }
.pv-history-row__time { color: var(--pv-text-dim); font-size: 0.72rem; }

/* ----------------------------------------------------------------
   BIO HISTORY EVENTS (Nickname & Ban) -- redesigned 2026-04-22.

   Replaces the flat .pv-history-row layout for the Bio & History
   cards with a richer "event timeline" pattern: each row carries
   an icon disc on the left (color-coded by event tone) and a
   two-line body (title with optional status pill, then a meta
   line with the exact date / duration / time-ago). Highlights:

   * Visual hierarchy first -- the reader can scan icons + tone to
     understand "active ban / resolved / current name" without
     reading the words.
   * Side-rail tinting (.pv-event--current / --danger-active /
     --warning-active) makes high-attention rows pop without using
     a heavy box-shadow or full-row background.
   * Date + duration are now first-class metadata instead of being
     hidden inside relative-time labels: visitors see "Apr 18,
     2026 · lasted 25 min · 4d ago" so both precise audit info
     and a quick "how long ago" are visible at once.
   * The empty-state block now explains what we have actually
     observed so a clean record (especially Ban History) reads as
     a positive signal instead of "no data".
   ---------------------------------------------------------------- */

/* Card-head meta badge (e.g. "13 events · 1 active") shown right
   of the H3 title. Pairs with .pv-card__head--with-actions which
   makes the head a flex container. */
.pv-card__head-meta {
    color: var(--pv-text-muted);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}
.pv-card__head-meta--active {
    color: #ef6b78;
}

/* One row of the timeline. */
.pv-event {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--pv-border);
}
.pv-event:last-child { border-bottom: 0; }

/* Icon disc. The variant classes (--current / --permanent / --temporary
   / --muted) are appended by the JS based on the event tone. */
.pv-event__icon {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.74rem;
    background: var(--pv-bg-soft);
    color: var(--pv-text-dim);
}
.pv-event__icon--muted     { background: var(--pv-bg-soft);           color: var(--pv-text-dim); }
.pv-event__icon--current   { background: rgba(40, 167, 69, 0.15);     color: #5cd87a; }
.pv-event__icon--permanent { background: rgba(220, 53, 69, 0.15);     color: #ef6b78; }
.pv-event__icon--temporary { background: rgba(255, 193, 7, 0.15);     color: #f3c95b; }

.pv-event__body { flex: 1; min-width: 0; }

.pv-event__title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 0.86rem;
    color: var(--pv-text);
    line-height: 1.35;
}
.pv-event__title del {
    color: var(--pv-text-muted);
    text-decoration: line-through;
    text-decoration-color: rgba(255, 255, 255, 0.3);
}
.pv-event__title strong { color: var(--pv-text); font-weight: 600; }
.pv-event__arrow { font-size: 0.65rem; color: var(--pv-text-dim); }

.pv-event__meta {
    margin-top: 0.15rem;
    color: var(--pv-text-dim);
    font-size: 0.72rem;
    line-height: 1.45;
}
.pv-event__ago {
    color: var(--pv-text-muted);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* Highlight rows. Negative inline margin + matched padding makes
   the side-rail extend to the card body's edge while keeping the
   text aligned with the rest of the column. */
.pv-event--current {
    background: rgba(40, 167, 69, 0.05);
    border-left: 2px solid rgba(40, 167, 69, 0.55);
    margin: 0 -1rem;
    padding-left: calc(1rem - 2px);
    padding-right: 1rem;
}
.pv-event--danger-active {
    background: rgba(220, 53, 69, 0.05);
    border-left: 2px solid rgba(220, 53, 69, 0.55);
    margin: 0 -1rem;
    padding-left: calc(1rem - 2px);
    padding-right: 1rem;
}
.pv-event--warning-active {
    background: rgba(255, 193, 7, 0.05);
    border-left: 2px solid rgba(255, 193, 7, 0.55);
    margin: 0 -1rem;
    padding-left: calc(1rem - 2px);
    padding-right: 1rem;
}

/* Status pills (Current / Active / Resolved). Sit inline next to
   the title text and are color-coded by tone. */
.pv-status-pill {
    display: inline-block;
    padding: 0.08rem 0.45rem;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.5;
    white-space: nowrap;
}
.pv-status-pill--success { background: rgba(40, 167, 69, 0.18);  color: #5cd87a; }
.pv-status-pill--danger  { background: rgba(220, 53, 69, 0.18);  color: #ef6b78; }
.pv-status-pill--warning { background: rgba(255, 193, 7, 0.18);  color: #f3c95b; }
.pv-status-pill--muted   { background: var(--pv-bg-soft);        color: var(--pv-text-dim); }

/* Empty-state block. Used when a player has zero nickname changes
   (informative, not sad) or zero bans (positive, "Clean record").
   The --success modifier tints the icon green for the no-bans
   case so the absence of bans reads as the good news it is. */
.pv-history-empty {
    text-align: center;
    padding: 1.25rem 0.5rem 0.75rem;
}
.pv-history-empty__icon {
    font-size: 1.5rem;
    color: var(--pv-text-dim);
    opacity: 0.55;
    margin-bottom: 0.5rem;
}
.pv-history-empty--success .pv-history-empty__icon {
    color: #5cd87a;
    opacity: 0.85;
}
.pv-history-empty__title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--pv-text);
    margin-bottom: 0.2rem;
}
.pv-history-empty__sub {
    font-size: 0.78rem;
    color: var(--pv-text-dim);
    line-height: 1.5;
}

/* ---------- LINKS / EMPTY ---------------------------------------------
   `.pv-link` was redeclared further down (next to the per-section
   refresh button styles) with the same base properties plus a hover
   `color: #fff;`. Merged here as the canonical source of truth so
   there is only one selector definition in the file. */
.pv-link {
    color: var(--pv-accent);
    text-decoration: none;
    font-weight: 600;
}
.pv-link:hover { color: #fff; text-decoration: underline; }
.pv-empty {
    text-align: center;
    color: var(--pv-text-dim);
    padding: 1rem;
    font-size: 0.85rem;
    font-style: italic;
}

/* ---------- RESPONSIVE ------------------------------------------------ */
@media (max-width: 991.98px) {
    .pv-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pv-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pv-grid--2-1 { grid-template-columns: 1fr; }
    .pv-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* .pv-group__stats stays at its 2-col default at this breakpoint;
       the table-row stat layout (label left / value right) reads fine
       in narrow columns. Drops to 1-col below 576px (see next block). */
}

@media (max-width: 575.98px) {
    .pv-hero__inner {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 1.25rem 1rem;
        padding-top: 3.5rem; /* leave space for the absolute actions */
    }
    .pv-hero__tier-block {
        width: 100%;
        max-width: 240px;
        margin: 0 auto;
        align-items: center;
        padding-right: 0;
        padding-bottom: 1rem;
    }
    .pv-hero__tier-img { width: 120px; height: 120px; }
    /* Switch the divider to a horizontal line beneath the tier block in
       single-column mobile layouts. */
    .pv-hero__tier-block::after {
        right: auto;
        left: 8%;
        top: auto;
        bottom: 0;
        width: auto;
        right: 8%;
        height: 1px;
        background: linear-gradient(
            90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.18) 25%,
            rgba(255, 255, 255, 0.28) 50%,
            rgba(255, 255, 255, 0.18) 75%,
            transparent 100%
        );
    }
    .pv-hero__name-row { justify-content: center; }
    .pv-hero__sub { justify-content: center; }
    .pv-hero__stats { justify-content: center; }
    .pv-hero__name { font-size: 1.5rem; }
    .pv-grid--3, .pv-grid--4 { grid-template-columns: 1fr; }
    .pv-metric__value { font-size: 1.6rem; }
    .pv-match {
        grid-template-columns: 64px 1fr;
        grid-template-rows: auto auto;
    }
    .pv-match__map { width: 64px; height: 48px; }
    .pv-match__numbers, .pv-match__action {
        grid-column: 1 / -1;
        justify-content: space-around;
    }
    .pv-section__head--with-actions { flex-direction: column; align-items: flex-start; }
    /* Tighter section head sizing on phones — keeps the icon-tile +
       gradient underline pattern but reclaims a few px of vertical space
       since mobile real estate is precious. */
    .pv-section__head { margin-bottom: 0.9rem; padding-bottom: 0.7rem; }
    .pv-section__title { font-size: 1.18rem; gap: 0.55rem; }
    .pv-section__title i { width: 30px; height: 30px; border-radius: 8px; font-size: 0.85rem; }
    /* Stat groups: drop to 1 column so each label/value row gets the
       full card width on phones — keeps the table-style alignment
       intact without squeezing long values like "10,676.6 km". In a
       single-column layout the parity logic above doesn't apply
       anymore: every row except the literal last one needs a divider
       regardless of even/odd count. */
    .pv-group__stats { grid-template-columns: 1fr; gap: 0; }
    .pv-group__stats--even .pv-stat:nth-last-child(-n+2),
    .pv-group__stats--odd  .pv-stat:last-child {
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }
    .pv-group__stats .pv-stat:last-child { border-bottom: none; }
    .pv-stat__num { font-size: 1.1rem; }
}

/* Tablet: keep tier block reasonable but slightly narrower than desktop. */
@media (min-width: 576px) and (max-width: 991.98px) {
    .pv-hero__tier-block { width: 170px; }
    .pv-hero__tier-img   { width: 124px; height: 124px; }
}

/* =====================================================================
   PER-SECTION REFRESH BUTTONS
   Small circular icon buttons next to section titles. They share a
   single per-player cooldown via /api/refresh_player_section.php and
   render the remaining seconds inside the button while disabled.
   ===================================================================== */
.pv-section-refresh {
    --pv-srf-size: 36px;
    width: var(--pv-srf-size);
    height: var(--pv-srf-size);
    min-width: var(--pv-srf-size);
    border-radius: 50%;
    border: 1px solid var(--pv-border);
    background: var(--pv-bg-elevated-2);
    color: var(--pv-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    cursor: pointer;
    transition: var(--pv-dur) var(--pv-ease);
    flex-shrink: 0;
    padding: 0;
}
.pv-section-refresh:hover:not(:disabled) {
    background: var(--pv-bg-elevated-3);
    border-color: var(--pv-accent);
    color: var(--pv-accent);
    transform: rotate(45deg);
}
.pv-section-refresh:disabled {
    cursor: not-allowed;
    opacity: 0.7;
    transform: none;
}
.pv-section-refresh.is-loading {
    color: var(--pv-accent);
    border-color: var(--pv-accent);
}
.pv-section-refresh.is-cooldown {
    background: rgba(255, 193, 7, 0.08);
    border-color: rgba(255, 193, 7, 0.35);
    color: #ffc107;
    width: auto;
    min-width: var(--pv-srf-size);
    padding: 0 0.6rem;
    border-radius: var(--pv-radius-pill);
}
.pv-section-refresh__count {
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

/* The hero refresh button picks up the same cooldown chrome when the
   shared cooldown timer takes it over. */
.pv-btn.is-cooldown {
    background: rgba(255, 193, 7, 0.08);
    border-color: rgba(255, 193, 7, 0.35);
    color: #ffc107;
}

/* =====================================================================
   SECTION SYNCING / JUST-UPDATED VISUAL FEEDBACK
   While pollUntilFresh() is waiting for the worker to write new data
   the affected section gets a thin animated shimmer bar across the
   top edge so the user has live feedback. The moment fresh data
   lands, .pv-section--just-updated paints a brief green halo so the
   user notices the section actually changed.
   Both classes are toggled by player_v2.js via add/removeSection*().
   The `position: relative` declaration `.pv-section--*::before` needs
   lives in the canonical `.pv-section` block earlier in the file.
   ===================================================================== */
.pv-section--syncing::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        rgba(79, 139, 255, 0)  0%,
        rgba(79, 139, 255, 0.95) 50%,
        rgba(79, 139, 255, 0)  100%
    );
    background-size: 220% 100%;
    animation: pv-section-shimmer 1.4s linear infinite;
    border-radius: 2px;
    pointer-events: none;
    z-index: 2;
}
@keyframes pv-section-shimmer {
    0%   { background-position: -120% 50%; }
    100% { background-position:  220% 50%; }
}

.pv-section--just-updated {
    animation: pv-section-flash 1.6s ease-out;
}
@keyframes pv-section-flash {
    0%   { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.55); }
    25%  { box-shadow: 0 0 0 6px rgba(46, 204, 113, 0.30); }
    100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}
/* If the user prefers reduced motion, skip the animations but still
   give a subtle persistent indicator. */
@media (prefers-reduced-motion: reduce) {
    .pv-section--syncing::before { animation: none; opacity: 0.6; }
    .pv-section--just-updated     { animation: none; outline: 2px solid rgba(46, 204, 113, 0.4); outline-offset: 4px; }
}

/* =====================================================================
   SURVIVAL MASTERY CARD
   Renders the player's long-term Survival progression: tier badge
   (1-5) coloured per tier, big stat tiles (Level / Total XP /
   Matches), and a progress bar showing position in the current tier.
   Each tier holds Lvl 1-499 (Tier 5 caps at 500).
   ===================================================================== */
.pv-mastery {
    overflow: hidden;
    position: relative;
}
.pv-mastery__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.pv-mastery__head h3 {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
}
.pv-mastery__head h3 i { color: #ff6b9d; }
.pv-mastery__hint {
    font-size: 0.74rem;
    color: var(--pv-text-muted);
    max-width: 60%;
    text-align: right;
    line-height: 1.35;
}
.pv-mastery__body {
    display: grid;
    grid-template-columns: 130px 1fr;
    grid-template-rows: auto auto;
    gap: 1rem 1.25rem;
    /* `stretch` makes every cell in the row inherit the row's full
       height so the badge ends up exactly the same height as the
       adjacent stat cards -- no more "badge taller than stats" gap
       the user flagged on 2026-04-19. */
    align-items: stretch;
}
/* Mastery tier badge.
   Visual style matches the surrounding stat cards (same border, same
   radius, same elevation) so the badge feels like part of the same
   row instead of a competing focal point. We KEEP the tier-coloured
   background tint (subtle radial overlay below) and the official
   PUBG icon, but drop the heavy 3px currentColor border + blurred
   conic glow halo that used to set it apart -- per the user's
   redesign request: "border kaneto opos ta ipolipa cards me tin
   diafora na kratisoume to background color kai to icon". */
.pv-mastery__badge {
    grid-row: 1;
    /* No align-self override -- the parent body's
       `align-items: stretch` already makes the badge inherit the
       same row height as the adjacent stat cards. */
    border-radius: var(--pv-radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    color: #fff;
    /* Calm card surface (same as the stat cards) with a small
       tier-tinted radial overlay so the per-tier identity still
       comes through. The `currentColor` carries the tier hue --
       actual values are set by .pv-mastery__badge[data-tier="N"]. */
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0) 60%),
        var(--pv-bg-elevated-2);
    border: 1px solid var(--pv-border);
    position: relative;
}
/* Subtle tier-coloured wash on top of the base card surface. We use
   the ::before so the data-tier "color" property still drives the
   tint, just at a much softer intensity than the old hard border. */
.pv-mastery__badge::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, currentColor 0%, transparent 65%);
    opacity: 0.18;
    pointer-events: none;
}
.pv-mastery__tier-num {
    font-size: 2.6rem;
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
    font-variant-numeric: tabular-nums;
}
.pv-mastery__tier-lbl {
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    margin-top: 0.2rem;
    opacity: 0.85;
    font-weight: 700;
}

/* Tier-specific colours -- match PUBG's in-game palette as closely as
   we can. Used for the glow + numeric fallback when the official PNG
   icon is missing. Bronze through Diamond. */
.pv-mastery__badge[data-tier="1"] { color: #cd7f32; }   /* Bronze   */
.pv-mastery__badge[data-tier="2"] { color: #c0c0c0; }   /* Silver   */
.pv-mastery__badge[data-tier="3"] { color: #ffd700; }   /* Gold     */
.pv-mastery__badge[data-tier="4"] { color: #aed6f1; }   /* Platinum */
.pv-mastery__badge[data-tier="5"] { color: #5dade2; }   /* Diamond  */

/* Mastery tier badge -- icon variant.
   The .pv-mastery__body grid uses `align-items: stretch` so the
   badge auto-matches the height of the stat cards to its right;
   we don't set min-height here on purpose. The min-width keeps the
   badge from collapsing too narrow when the row has lots of stats. */
.pv-mastery__badge--icon {
    min-width: 88px;
}
.pv-mastery__badge--icon .pv-mastery__tier-num {
    /* Hide the numeric fallback -- the icon now owns the badge. */
    display: none;
}
.pv-mastery__tier-img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    /* Slight upscale (40 → 44) to give the icon more breathing room
       inside the larger square; the difference is a single CSS pixel
       step on most displays so quality loss is imperceptible. */
    image-rendering: -webkit-optimize-contrast;
    /* PUBG mastery icons already carry their own glow inside the
       artwork; we only add a soft drop shadow so the icon lifts off
       the dark badge interior. */
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
    transition: transform 240ms var(--pv-ease);
}
.pv-mastery__badge--icon:hover .pv-mastery__tier-img {
    transform: scale(1.06);
}
@media (max-width: 575.98px) {
    .pv-mastery__badge--icon {
        min-width: 72px;
        min-height: 64px;
        border-radius: 12px;
    }
    .pv-mastery__tier-img {
        width: 38px;
        height: 38px;
    }
}

.pv-mastery__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
}

/* ----- Career Overview variant ---------------------------------------
   The badge and the 6 stat slots need to sit on the SAME grid so they
   share a single, consistent gap (otherwise the badge has the body's
   gap to its right and the first stat has the inner stats-grid gap on
   its left -- which is exactly what produced the "the badge is glued
   to the Tier 1 card" gap mismatch the user flagged on 2026-04-19).

   Trick: set `display: contents` on the inner `.pv-mastery__stats`
   wrapper so its 6 children are promoted into the parent grid, and
   re-define `.pv-mastery--career .pv-mastery__body` as a 7-column
   grid that holds the badge + all 6 stats as direct cells. Result:
   one grid, one gap value, perfect alignment.
-------------------------------------------------------------------- */
.pv-mastery--career .pv-mastery__body {
    grid-template-columns: minmax(110px, 130px) repeat(6, minmax(0, 1fr));
    gap: 0.6rem;
}
.pv-mastery--career .pv-mastery__stats {
    display: contents;
}
@media (max-width: 991.98px) {
    .pv-mastery--career .pv-mastery__body {
        grid-template-columns: minmax(96px, 110px) repeat(3, minmax(0, 1fr));
    }
    .pv-mastery--career .pv-mastery__badge {
        grid-row: 1 / span 2;
    }
    .pv-mastery--career .pv-mastery__stat:nth-of-type(n+4) {
        /* Stats 4-6 wrap to a second row when the grid collapses to
           3 stat columns. */
        grid-row: 2;
    }
}
@media (max-width: 575.98px) {
    .pv-mastery--career .pv-mastery__body {
        grid-template-columns: 1fr 1fr;
    }
    .pv-mastery--career .pv-mastery__badge {
        grid-column: 1 / -1;
        grid-row: 1;
        max-width: 220px;
        margin: 0 auto;
    }
    .pv-mastery--career .pv-mastery__stat:nth-of-type(n+1) {
        grid-row: auto;
    }
}
.pv-mastery__stat {
    background: var(--pv-bg-elevated-2);
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-radius);
    padding: 0.65rem 0.8rem;
    text-align: center;
}
.pv-mastery__stat-val {
    font-size: 1.25rem;
    font-weight: 800;
    color: #fff;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.pv-mastery__stat-lbl {
    font-size: 0.7rem;
    color: var(--pv-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 0.2rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.pv-mastery__stat-lbl i { font-size: 0.7rem; opacity: 0.85; }

.pv-mastery__progress-wrap {
    /* Span both columns (badge + stats) so the progress bar is
       full-width and visually anchors the whole card. Keeps the bar
       aligned with the card edges instead of starting after the
       badge. */
    grid-column: 1 / -1;
}
.pv-mastery__progress-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.78rem;
    color: var(--pv-text-muted);
    margin-bottom: 0.35rem;
}
.pv-mastery__progress-meta span:last-child {
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.pv-mastery__progress-track {
    width: 100%;
    height: 10px;
    background: var(--pv-bg-elevated-3);
    border-radius: var(--pv-radius-pill);
    overflow: hidden;
    border: 1px solid var(--pv-border);
}
.pv-mastery__progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff6b9d, #ffd54f, #80deea);
    background-size: 200% 100%;
    animation: pv-mastery-shimmer 6s linear infinite;
    transition: width 0.6s var(--pv-ease);
}
@keyframes pv-mastery-shimmer {
    0%   { background-position:   0% 50%; }
    100% { background-position: 200% 50%; }
}

@media (max-width: 575.98px) {
    .pv-mastery__body {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .pv-mastery__badge {
        grid-row: auto;
        margin: 0 auto;
        width: 110px;
        height: 110px;
    }
    .pv-mastery__tier-num { font-size: 2.2rem; }
    .pv-mastery__hint { max-width: 100%; text-align: left; }
    .pv-mastery__progress-wrap { grid-column: 1; }
}

/* =====================================================================
   SURVIVAL MASTERY — embedded inside the player hero card
   When the mastery block lives inside .pv-hero (right under the
   tier/name row) we drop the standalone card chrome (border, panel
   background) since the hero is already a card, and we shrink the
   badge a bit so it doesn't overpower the player's name above it.
   The wrapper sits above .pv-hero__bg via z-index, and a soft top
   divider visually separates it from the hero's primary row.
   ===================================================================== */
.pv-hero__mastery {
    position: relative;
    z-index: 1;
    padding: 0.95rem 1.5rem 1.15rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(13, 17, 23, 0.30) 0%, rgba(13, 17, 23, 0.55) 100%);
}
.pv-hero__mastery .pv-mastery__head {
    margin-bottom: 0.7rem;
}
/* Hero-embedded variant tweaks. We INTENTIONALLY do NOT override
   .pv-mastery__body's grid-template-columns here -- the 7-column
   Career Overview grid (badge + 6 stats) defined above is what makes
   every cell share the same gap. The earlier `96px 1fr` override was
   what produced the "badge glued to Tier 1 card" gap mismatch the
   user flagged on 2026-04-19, because it forced the badge into one
   column and the 6 stats into a separate sub-grid with its own
   smaller gap. Now everything lives in a single grid. */
.pv-hero__mastery .pv-mastery__tier-num {
    font-size: 2.2rem;
}
.pv-hero__mastery .pv-mastery__stat-val {
    font-size: 1.15rem;
}

@media (max-width: 575.98px) {
    .pv-hero__mastery {
        padding: 0.85rem 1rem 1rem;
    }
    .pv-hero__mastery .pv-mastery__tier-num {
        font-size: 1.9rem;
    }
}

/* =====================================================================
   PARITY ADDITIONS — V2.1
   Brings back features from the legacy player.php (per-mode lifetime
   sub-tabs, country-suggest fallback, highlights ribbon, smart insights,
   ranked trends/percentiles/career RP, match summary/highlights/heatmap,
   map performance bars, weapon group tabs, modals, mobile bottom tabs,
   keyboard shortcuts, etc.) — all using existing pv- design tokens so
   the look stays consistent with the rest of the page.
   ===================================================================== */

/* ---------- Section action button cluster --------------------------- */
.pv-section__actions {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.pv-card__head--with-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.pv-card__sub {
    display: block;
    color: var(--pv-text-muted);
    font-size: 0.75rem;
    margin-top: 0.15rem;
}
.pv-card__footer {
    padding: 0.65rem 0.85rem;
    border-top: 1px solid var(--pv-border);
    background: var(--pv-bg-elevated);
    border-bottom-left-radius: var(--pv-radius);
    border-bottom-right-radius: var(--pv-radius);
}

/* Ghost button variant — quieter than --primary, used for inline action chips. */
.pv-btn--ghost {
    background: var(--pv-bg-elevated-2);
    border: 1px solid var(--pv-border);
    color: var(--pv-text);
    padding: 0.42rem 0.75rem;
    font-size: 0.8rem;
    border-radius: var(--pv-radius);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    line-height: 1.1;
    transition: var(--pv-dur) var(--pv-ease);
}
.pv-btn--ghost:hover:not(:disabled) {
    background: var(--pv-bg-elevated-3);
    border-color: var(--pv-border-strong);
    color: var(--pv-text);
}
.pv-btn--ghost:disabled { opacity: 0.55; cursor: progress; }

/* Subtle text link style with chevron toggle. The base `.pv-link` and
   `:hover` rules live in the canonical block earlier in the file under
   `LINKS / EMPTY`. Only the `--toggle` modifier lives here. */
.pv-link--toggle {
    background: transparent;
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-radius-pill);
    padding: 0.3rem 0.7rem;
    font-size: 0.78rem;
    color: var(--pv-text-muted);
    cursor: pointer;
    transition: var(--pv-dur) var(--pv-ease);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.pv-link--toggle:hover {
    color: var(--pv-text);
    border-color: var(--pv-accent);
}

/* ---------- Hero: missing-country fallback button ------------------- */
.pv-hero__flag.pv-hero__flag--missing { display: inline-flex; }
.pv-hero__flag-suggest {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--pv-bg-elevated-2);
    border: 1px dashed var(--pv-border-strong);
    color: var(--pv-text-muted);
    padding: 0.18rem 0.55rem;
    border-radius: var(--pv-radius-pill);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--pv-dur) var(--pv-ease);
}
.pv-hero__flag-suggest:hover {
    color: var(--pv-accent);
    border-color: var(--pv-accent);
    background: var(--pv-bg-elevated-3);
}
.pv-hero__clan-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted transparent;
}
.pv-hero__clan-link:hover {
    color: var(--pv-accent);
    border-bottom-color: currentColor;
}
.pv-hero__status-link {
    color: inherit;
    margin-left: 0.25rem;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.pv-hero__status-link:hover { color: #fff; }

/* ---------- Highlights ribbon -------------------------------------- */
.pv-highlights {
    margin: 0.85rem 0 0.4rem;
    padding: 0.7rem 0.9rem;
    background: var(--pv-bg-elevated);
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-radius);
}
.pv-highlights__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.pv-highlight {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.32rem 0.7rem;
    border-radius: var(--pv-radius-pill);
    background: var(--pv-bg-elevated-2);
    border: 1px solid var(--pv-border);
    font-size: 0.78rem;
    color: var(--pv-text);
    text-decoration: none;
    transition: var(--pv-dur) var(--pv-ease);
}
a.pv-highlight:hover { transform: translateY(-1px); border-color: var(--pv-accent); }
.pv-highlight i { font-size: 0.78rem; opacity: 0.95; }
.pv-highlight[data-tone="success"] { border-color: rgba(61, 220, 151, 0.4); color: var(--pv-success); }
.pv-highlight[data-tone="warn"]    { border-color: rgba(255, 200, 87, 0.4); color: var(--pv-warn); }
.pv-highlight[data-tone="danger"]  { border-color: rgba(255, 107, 107, 0.4); color: var(--pv-danger); }
.pv-highlight[data-tone="info"]    { border-color: rgba(87, 214, 255, 0.4); color: var(--pv-info); }
.pv-highlight[data-tone="purple"]  { border-color: rgba(168, 107, 255, 0.4); color: var(--pv-purple); }
.pv-highlight[data-tone="accent"]  { border-color: rgba(79, 139, 255, 0.45); color: var(--pv-accent); background: rgba(79, 139, 255, 0.1); }
/* Empty-state chip for new players with no achievements yet. Renders
   muted so it doesn't pretend to be an actual highlight. */
.pv-highlight--empty {
    color: var(--pv-text-muted);
    background: transparent;
    border-style: dashed;
    cursor: default;
}
.pv-highlight--empty i { color: var(--pv-text-dim); }

/* ---------- At-a-glance smart insights ----------------------------- */
.pv-insights {
    margin: 0.6rem 0;
    padding: 0.85rem 1rem;
    background: var(--pv-gradient-support);
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-radius);
}
.pv-insights__head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.55rem;
}
/* When the head is also a <summary>, hide the native disclosure
   triangle and make the whole row clickable like a button. The
   chevron at the end rotates 180° when the section is opened. */
.pv-insights__head--toggle {
    cursor: pointer;
    list-style: none;
    user-select: none;
    margin-bottom: 0; /* the list below provides its own top spacing */
}
.pv-insights__head--toggle::-webkit-details-marker { display: none; }
.pv-insights__head--toggle::marker                 { content: ''; }
.pv-insights__hint {
    margin-left: auto;
    font-size: 0.78rem;
    color: var(--pv-text-muted);
    font-weight: 500;
}
.pv-insights__chev {
    color: var(--pv-text-dim);
    font-size: 0.85rem;
    transition: transform 240ms var(--pv-ease);
}
.pv-insights__details[open] .pv-insights__chev {
    transform: rotate(180deg);
}
.pv-insights__details[open] .pv-insights__head--toggle {
    margin-bottom: 0.6rem; /* breathing room before the bullet list */
}
.pv-insights__icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(168, 107, 255, 0.18);
    color: var(--pv-purple);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pv-insights__title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--pv-text);
    letter-spacing: 0.02em;
}
.pv-insights__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 0.45rem 0.85rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.pv-insight {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.45rem 0.6rem;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-radius);
    color: var(--pv-text);
    font-size: 0.83rem;
    line-height: 1.35;
}
.pv-insight i {
    margin-top: 2px;
    width: 18px;
    text-align: center;
    color: var(--pv-text-muted);
}
.pv-insight[data-tone="up"]   i { color: var(--pv-success); }
.pv-insight[data-tone="down"] i { color: var(--pv-danger); }
.pv-insight[data-tone="info"] i { color: var(--pv-info); }
/* Empty-state insight for sparse-data players. Same muted treatment
   as the highlight empty chip so the two strips read consistently. */
.pv-insight--empty {
    color: var(--pv-text-muted);
    background: transparent;
    border-style: dashed;
    font-style: italic;
}
.pv-insight--empty i { color: var(--pv-text-dim); }

/* ---------- Lifetime per-queue sub-tabs ---------------------------- */
.pv-submode {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.5rem 0.7rem;
    margin: 0.65rem 0 0.4rem;
    background: var(--pv-bg-elevated);
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-radius);
}
.pv-submode__opt {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.36rem 0.75rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--pv-radius-pill);
    color: var(--pv-text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--pv-dur) var(--pv-ease);
}
.pv-submode__opt:hover {
    color: var(--pv-text);
    background: var(--pv-bg-elevated-2);
}
.pv-submode__opt.active {
    color: #fff;
    background: rgba(79, 139, 255, 0.18);
    border-color: rgba(79, 139, 255, 0.45);
}
.pv-submode__count {
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--pv-radius-pill);
    padding: 0.05rem 0.45rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--pv-text-dim);
    font-variant-numeric: tabular-nums;
}
.pv-submode__opt.active .pv-submode__count { color: #fff; background: rgba(0, 0, 0, 0.35); }

/* ---------- Sync progress banner (ranked full history) ------------- */
.pv-sync-progress {
    margin: 0.7rem 0;
    padding: 0.8rem 0.95rem;
    background: linear-gradient(135deg, rgba(79, 139, 255, 0.12), rgba(87, 214, 255, 0.06));
    border: 1px solid rgba(79, 139, 255, 0.3);
    border-radius: var(--pv-radius);
}
.pv-sync-progress__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    color: var(--pv-text);
}
.pv-sync-progress__head i { color: var(--pv-accent); }
.pv-sync-progress__pct { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--pv-accent); }
.pv-sync-progress__track {
    width: 100%;
    height: 8px;
    background: rgba(0, 0, 0, 0.35);
    border-radius: var(--pv-radius-pill);
    overflow: hidden;
}
.pv-sync-progress__track > span {
    display: block;
    height: 100%;
    width: 4%;
    background: linear-gradient(90deg, var(--pv-accent), var(--pv-info));
    border-radius: var(--pv-radius-pill);
    transition: width 0.4s var(--pv-ease);
}
.pv-sync-progress__sub {
    margin: 0.4rem 0 0;
    font-size: 0.78rem;
    color: var(--pv-text-muted);
}

/* ---------- Ranked snapshot card extras (trend/pctile) ------------- */
.pv-snap__trend {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-left: 0.4rem;
    padding: 0.05rem 0.45rem;
    border-radius: var(--pv-radius-pill);
    font-size: 0.65rem;
    font-weight: 700;
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}
.pv-snap__trend[data-tone="up"]   { background: rgba(61, 220, 151, 0.18); color: var(--pv-success); }
.pv-snap__trend[data-tone="down"] { background: rgba(255, 107, 107, 0.18); color: var(--pv-danger); }
.pv-snap__trend[data-tone="flat"] { background: rgba(255, 255, 255, 0.08); color: var(--pv-text-dim); }
.pv-snap__pctile {
    display: inline-block;
    padding: 0.08rem 0.5rem;
    border-radius: var(--pv-radius-pill);
    font-size: 0.68rem;
    font-weight: 700;
}
.pv-snap__pctile[data-tone="up"]   { background: rgba(61, 220, 151, 0.18); color: var(--pv-success); }
.pv-snap__pctile[data-tone="down"] { background: rgba(255, 107, 107, 0.18); color: var(--pv-danger); }
.pv-snap__pctile[data-tone="flat"] { background: rgba(255, 255, 255, 0.08); color: var(--pv-text-muted); }

/* ---------- Career RP sparkline (past seasons) --------------------- */
.pv-career-rp {
    margin: 0 0 0.85rem;
    padding: 0.7rem 0.9rem;
    background: var(--pv-bg-elevated);
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-radius);
    color: var(--pv-accent);
}
.pv-career-rp__head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--pv-text);
    margin-bottom: 0.35rem;
}
.pv-career-rp__head i { color: var(--pv-accent); }
.pv-career-rp__chart {
    height: 38px;
    width: 100%;
}
.pv-career-rp__chart svg { width: 100%; height: 100%; }
.pv-career-rp__legend {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--pv-text-dim);
    margin-top: 0.2rem;
}

/* ---------- Match summary tiles ------------------------------------ */
.pv-match-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    gap: 0.55rem;
    margin: 0 0 0.85rem;
}
.pv-msum {
    background: var(--pv-bg-elevated);
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-radius);
    padding: 0.7rem 0.7rem;
    text-align: center;
    transition: var(--pv-dur) var(--pv-ease);
}
.pv-msum:hover { border-color: var(--pv-accent); transform: translateY(-1px); }
.pv-msum__icon {
    width: 28px;
    height: 28px;
    margin: 0 auto 0.35rem;
    border-radius: 50%;
    background: rgba(79, 139, 255, 0.16);
    color: var(--pv-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pv-msum__val {
    font-size: 1.25rem;
    font-weight: 800;
    color: #fff;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.pv-msum__lbl {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pv-text-muted);
    margin-top: 0.2rem;
    font-weight: 600;
}
.pv-msum__sub {
    font-size: 0.7rem;
    color: var(--pv-text-dim);
    margin-top: 0.1rem;
}

/* ---------- Match highlights (Best/Toughest/Form) ----------------- */
.pv-match-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 0.65rem;
    margin: 0 0 0.85rem;
}
.pv-mhl {
    background: var(--pv-bg-elevated);
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-radius);
    padding: 0.7rem 0.85rem;
}
.pv-mhl__head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--pv-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    margin-bottom: 0.45rem;
}
.pv-mhl__head i { color: var(--pv-warn); }
.pv-mhl__body { font-size: 0.92rem; color: var(--pv-text); line-height: 1.4; }
.pv-mhl__body strong { color: #fff; font-weight: 800; }
.pv-mhl__sub { margin-top: 0.25rem; font-size: 0.72rem; color: var(--pv-text-muted); }
.pv-form { display: flex; gap: 0.25rem; }
.pv-form__pip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 800;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.pv-form__pip[data-tone="win"]  { background: var(--pv-success); }
.pv-form__pip[data-tone="top"]  { background: var(--pv-warn); color: #1a1300; }
.pv-form__pip[data-tone="loss"] { background: rgba(255, 107, 107, 0.5); }

/* ---------- Match Insights card (added 2026-04-21) -------------------
   Aggregate widgets for the per-match detail fields we now persist
   (death_type, headshot_kills, longest_kill_m, kill_streaks,
   kill_place, walk/ride/swim distance). Each widget sits in a
   responsive grid -- 4 cols on wide desktops, 2 on tablets, 1 on
   phones. */
.pv-mins__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 0.7rem;
}
.pv-mins__widget {
    background: var(--pv-bg-elevated);
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-radius);
    padding: 0.75rem 0.85rem;
    min-width: 0;
    /* Use flex column so the body always fills the bottom of the
       widget regardless of header length — keeps all 4 widgets
       visually aligned at the bottom of the row. */
    display: flex;
    flex-direction: column;
}
.pv-mins__widget-head {
    margin-bottom: 0.6rem;
    border-bottom: 1px solid var(--pv-border);
    padding-bottom: 0.45rem;
}
.pv-mins__widget-title {
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    /* Title shouldn't truncate — keep it short and fully visible. */
    min-width: 0;
}
.pv-mins__widget-title i { color: var(--pv-accent); flex-shrink: 0; }
.pv-mins__widget-sub {
    color: var(--pv-text-muted);
    font-size: 0.7rem;
    margin-top: 0.2rem;
    /* Allow the sub line to wrap to 2 lines on narrow widgets so
       phrases like "Total 84.8 km across these matches" don't get
       chopped mid-word. */
    line-height: 1.3;
}
.pv-mins__widget-body {
    flex: 1;
    min-height: 0;
}

/* ---- Death cause breakdown ---- */
.pv-mins__causes { display: flex; flex-direction: column; gap: 0.5rem; }
.pv-mins__cause-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.2rem;
    /* Cause head should never wrap — when the widget is narrow we
       trade the label for ellipsis instead of pushing the value off
       the row. */
    flex-wrap: nowrap;
}
.pv-mins__cause-lbl {
    color: var(--pv-text);
    font-size: 0.78rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    /* Allow the label to truncate before the value disappears off
       the right edge of the widget. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 1;
}
.pv-mins__cause-lbl i { flex-shrink: 0; }
.pv-mins__cause-val {
    color: #fff;
    font-weight: 700;
    font-size: 0.82rem;
    white-space: nowrap;
    flex-shrink: 0;
}
.pv-mins__cause-val small {
    color: var(--pv-text-muted);
    font-weight: 500;
    margin-left: 0.2rem;
}
.pv-mins__cause-bar {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 999px;
    overflow: hidden;
}
.pv-mins__cause-bar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    transition: width 0.4s ease;
}

/* ---- Personal records ----
   Stacked vertically inside the widget so each record gets the full
   column width. The previous 3-column grid squeezed each tile into
   ~70px which truncated values like "276 m" -> "2..." and labels
   like "Longest Kill" -> "L...". Now: icon + label on the left,
   value bold-right-aligned. Reads like a leaderboard line item. */
.pv-mins__records {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.pv-mins__rec {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.65rem;
    background: var(--pv-bg-elevated-2);
    border: 1px solid var(--pv-border);
    border-radius: 8px;
    min-width: 0;
}
.pv-mins__rec-icon {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 215, 0, 0.12);
    color: var(--pv-warn);
    border-radius: 7px;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.pv-mins__rec-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    flex: 1;
    min-width: 0;
}
.pv-mins__rec-lbl {
    color: var(--pv-text-muted);
    font-size: 0.78rem;
    line-height: 1.2;
    /* Lower priority than the value: label is allowed to truncate
       before the value does, because "276 m" being readable matters
       more than "Longest Kill" being readable. */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pv-mins__rec-val {
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.15;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ---- Headshot rate ring ---- */
.pv-mins__hs {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}
.pv-mins__hs-ring { flex-shrink: 0; }
.pv-mins__hs-meta { min-width: 0; flex: 1; }
.pv-mins__hs-headline {
    color: #fff;
    font-weight: 700;
    font-size: 0.88rem;
    line-height: 1.25;
}
.pv-mins__hs-sub {
    color: var(--pv-text-muted);
    font-size: 0.7rem;
    margin-top: 0.2rem;
    line-height: 1.35;
}

/* ---- Movement profile ---- */
.pv-mins__move-bar {
    display: flex;
    width: 100%;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.04);
    margin-top: 0.2rem;
}
.pv-mins__move-seg { height: 100%; transition: filter var(--pv-dur) var(--pv-ease); }
.pv-mins__move-seg:hover { filter: brightness(1.25); }
.pv-mins__move-seg--walk    { background: linear-gradient(90deg, #4f8bff, #6aa3ff); }
.pv-mins__move-seg--vehicle { background: linear-gradient(90deg, #e040fb, #ff5cd6); }
.pv-mins__move-seg--swim    { background: linear-gradient(90deg, #00d4aa, #4ce0c0); }
.pv-mins__move-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-top: 0.55rem;
    font-size: 0.74rem;
    color: var(--pv-text-muted);
}
.pv-mins__move-key i { margin-right: 0.3rem; }

/* ---------- Map performance bars panel ----------------------------- */
.pv-mp {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--pv-border);
}
.pv-mp:last-child { border-bottom: 0; }
.pv-mp__icon { width: 36px; height: 36px; border-radius: 8px; overflow: hidden; background: var(--pv-bg-elevated-2); display: inline-flex; align-items: center; justify-content: center; color: var(--pv-text-dim); }
.pv-mp__icon img { width: 100%; height: 100%; object-fit: cover; }
.pv-mp__main { min-width: 0; }
.pv-mp__name { font-size: 0.85rem; font-weight: 700; color: var(--pv-text); margin-bottom: 0.2rem; }
.pv-mp__bar { height: 6px; background: rgba(255, 255, 255, 0.05); border-radius: var(--pv-radius-pill); overflow: hidden; }
.pv-mp__bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--pv-accent), var(--pv-info)); border-radius: var(--pv-radius-pill); transition: width 0.5s var(--pv-ease); }
.pv-mp__nums { display: flex; gap: 0.6rem; }
.pv-mp__nums > div { text-align: center; min-width: 48px; }
.pv-mp__nums strong { display: block; font-size: 0.9rem; color: #fff; font-variant-numeric: tabular-nums; }
.pv-mp__nums small { display: block; font-size: 0.65rem; color: var(--pv-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }

/* ---------- Drop heatmap ------------------------------------------- */
.pv-hm {
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow-x: auto;
}
.pv-hm__row, .pv-hm__ruler {
    display: grid;
    grid-template-columns: 36px repeat(24, 1fr);
    gap: 3px;
    align-items: center;
    min-width: 540px;
}
.pv-hm__day {
    font-size: 0.7rem;
    color: var(--pv-text-muted);
    font-weight: 700;
    text-align: right;
    padding-right: 0.4rem;
}
.pv-hm__hour {
    font-size: 0.62rem;
    color: var(--pv-text-dim);
    text-align: center;
}
.pv-hm__cell {
    height: 18px;
    border-radius: 3px;
    background: rgba(79, 139, 255, calc(var(--pv-hm-i, 0) * 0.85));
    border: 1px solid rgba(255, 255, 255, calc(var(--pv-hm-i, 0) * 0.15));
    transition: transform 100ms var(--pv-ease);
}
.pv-hm__cell:hover { transform: scale(1.4); z-index: 2; position: relative; }
.pv-hm__legend { font-size: 0.72rem; color: var(--pv-text-muted); margin: 0.5rem 0 0; }

/* ---------- Match filter pills ------------------------------------- */
.pv-match-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 0.7rem;
    padding: 0.5rem 0.6rem;
    background: var(--pv-bg-elevated);
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-radius);
}
.pv-mfilter {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--pv-radius-pill);
    color: var(--pv-text-muted);
    font-size: 0.77rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--pv-dur) var(--pv-ease);
}
.pv-mfilter:hover { color: var(--pv-text); background: var(--pv-bg-elevated-2); }
.pv-mfilter.active {
    color: #fff;
    background: rgba(79, 139, 255, 0.2);
    border-color: rgba(79, 139, 255, 0.45);
}
.pv-mfilter i { font-size: 0.78rem; opacity: 0.95; }
.pv-mfilter__count {
    padding: 0.05rem 0.45rem;
    font-size: 0.68rem;
    font-weight: 700;
    border-radius: var(--pv-radius-pill);
    background: rgba(255, 255, 255, 0.08);
    color: var(--pv-text-dim);
    font-variant-numeric: tabular-nums;
}
.pv-mfilter.active .pv-mfilter__count { color: #fff; background: rgba(0, 0, 0, 0.35); }

/* ---------- Clickable match card + "open in new tab" hint ----------
   The whole .pv-match div is the click target — clicking anywhere
   that isn't a nested <a>/<button> opens the dedicated match-analysis
   page (/match/<id>/<nickname>) in a new tab. We use cursor:pointer
   only on cards that actually have a match id (.pv-match--clickable)
   so the empty-state placeholder doesn't show a misleading hand
   cursor. Keyboard users get a visible :focus-visible ring courtesy
   of the role="link" tabindex="0" attributes set in JS. */
.pv-match { position: relative; }
.pv-match--clickable { cursor: pointer; }
.pv-match--clickable:hover .pv-match__open-hint {
    color: var(--pv-accent);
    border-color: var(--pv-accent);
    background: rgba(13, 17, 23, 0.85);
    opacity: 1;
}
.pv-match--clickable:focus-visible {
    outline: 2px solid var(--pv-accent);
    outline-offset: 2px;
}
.pv-match__open-hint {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 26px;
    height: 26px;
    border: 1px solid var(--pv-border);
    background: rgba(13, 17, 23, 0.55);
    color: var(--pv-text-dim);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    transition: var(--pv-dur) var(--pv-ease);
    backdrop-filter: blur(4px);
    opacity: 0.7;
    pointer-events: none; /* never intercept the card's own click */
}
.pv-match__type {
    /* Distinct mode pill (Normal / Ranked / Arcade) sitting next to the
       game-mode label. Slightly tinted so the eye separates "what type
       of match" from "what queue" at a glance. */
    color: var(--pv-text);
    font-weight: 600;
}
.pv-match__type i { color: var(--pv-accent); }

.pv-matches-pagination {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ---------- Weapon group tabs -------------------------------------- */
.pv-wgroup-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.85rem 0 0;
    padding: 0.5rem 0.6rem;
    background: var(--pv-bg-elevated);
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-radius);
}
.pv-wgtab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.36rem 0.75rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--pv-radius-pill);
    color: var(--pv-text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--pv-dur) var(--pv-ease);
}
.pv-wgtab:hover { color: var(--pv-text); background: var(--pv-bg-elevated-2); }
.pv-wgtab.active {
    color: #fff;
    background: rgba(168, 107, 255, 0.2);
    border-color: rgba(168, 107, 255, 0.45);
}
.pv-wgtab__count {
    padding: 0.05rem 0.45rem;
    font-size: 0.68rem;
    font-weight: 700;
    border-radius: var(--pv-radius-pill);
    background: rgba(255, 255, 255, 0.08);
    color: var(--pv-text-dim);
    font-variant-numeric: tabular-nums;
}
.pv-wgtab.active .pv-wgtab__count { color: #fff; background: rgba(0, 0, 0, 0.35); }

/* ---------- "How to read" collapsible ------------------------------ */
.pv-howto {
    background: var(--pv-bg-elevated);
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-radius);
    margin-bottom: 0.85rem;
    overflow: hidden;
}
.pv-howto__summary {
    list-style: none;
    cursor: pointer;
    padding: 0.6rem 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--pv-text);
    font-size: 0.85rem;
    font-weight: 600;
    transition: var(--pv-dur) var(--pv-ease);
}
.pv-howto__summary::-webkit-details-marker { display: none; }
.pv-howto__summary > i:first-child { color: var(--pv-info); }
.pv-howto__summary:hover { background: var(--pv-bg-elevated-2); }
.pv-howto__chev {
    margin-left: auto;
    transition: transform var(--pv-dur) var(--pv-ease);
    color: var(--pv-text-dim);
    font-size: 0.78rem;
}
.pv-howto[open] .pv-howto__chev { transform: rotate(180deg); }
.pv-howto__body {
    padding: 0 0.85rem 0.85rem;
    color: var(--pv-text-muted);
    font-size: 0.82rem;
    line-height: 1.55;
}
.pv-howto__body ul { margin: 0; padding-left: 1.1rem; }
.pv-howto__body li { margin-bottom: 0.3rem; }
.pv-howto__body kbd {
    background: var(--pv-bg-elevated-3);
    border: 1px solid var(--pv-border-strong);
    color: #fff;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.75rem;
}

/* ---------- Mobile bottom tab bar ---------------------------------- */
.pv-bottom-tabs {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    background: rgba(13, 17, 23, 0.95);
    border-top: 1px solid var(--pv-border);
    backdrop-filter: blur(8px);
    padding: 0.3rem 0.4rem calc(0.3rem + env(safe-area-inset-bottom));
}
.pv-bottom-tabs__link {
    flex: 1;
    text-align: center;
    color: var(--pv-text-muted);
    text-decoration: none;
    padding: 0.45rem 0.2rem;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 8px;
    transition: var(--pv-dur) var(--pv-ease);
}
.pv-bottom-tabs__link i {
    display: block;
    font-size: 1.05rem;
    margin-bottom: 0.15rem;
    color: var(--pv-text-muted);
}
.pv-bottom-tabs__link.active {
    color: var(--pv-accent);
    background: rgba(79, 139, 255, 0.12);
}
.pv-bottom-tabs__link.active i { color: var(--pv-accent); }
@media (max-width: 767.98px) {
    .pv-bottom-tabs { display: flex; }
    /* Make sure floating bar doesn't cover content */
    .pv-page { padding-bottom: 70px; }
    /* Hide the desktop sticky nav on mobile to avoid visual duplication */
    .pv-nav { display: none; }
}

/* ---------- Mobile a11y + perf overrides --------------------------------
   Touch-target sizes follow the WCAG 2.5.5 / Apple HIG / Material Design
   recommendation of >= 44x44px. The desktop dimensions are intentionally
   compact (36px refresh circles, narrow chips) because pointer hits are
   precise; on phones we widen the same controls with no visual change to
   desktop. Backdrop-filter is removed from the fixed bottom bar on the
   smallest screens because it is the most expensive composited element
   on a typical Android browser (it re-rasterises every scroll frame).
   The solid 96%-opacity background reads identically with no GPU cost. */
@media (max-width: 575.98px) {
    .pv-section-refresh {
        --pv-srf-size: 44px;
        font-size: 1rem;
    }
    .pv-section-refresh.is-cooldown {
        padding: 0 0.85rem;
        min-width: 44px;
    }
    .pv-bottom-tabs__link {
        min-height: 56px;
        padding: 0.5rem 0.3rem;
        font-size: 0.62rem;
    }
    .pv-bottom-tabs__link i {
        font-size: 1.15rem;
        margin-bottom: 0.2rem;
    }
    .pv-recent__clear {
        padding: 0.45rem 0.85rem;
        font-size: 0.78rem;
    }
    /* Drop the backdrop-filter on the fixed bottom bar -- the solid
       background gives a near-identical visual at zero compositing
       cost. Saves a full-width raster every scroll frame on phones. */
    .pv-bottom-tabs {
        background: rgba(13, 17, 23, 0.96);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

/* ---------- Modal base styles -------------------------------------- */
.pv-modal__content {
    background: var(--pv-bg-page);
    color: var(--pv-text);
    border: 1px solid var(--pv-border-strong);
    border-radius: var(--pv-radius-lg);
    box-shadow: var(--pv-shadow-3);
}
.pv-modal__head {
    border-bottom: 1px solid var(--pv-border);
    padding: 0.85rem 1rem;
}
.pv-modal__head .modal-title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    color: #fff;
}
.pv-modal__body {
    padding: 1rem 1.1rem;
}
.pv-modal__foot {
    border-top: 1px solid var(--pv-border);
    padding: 0.7rem 1rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
}
.pv-modal__select {
    background: var(--pv-bg-elevated-2);
    color: var(--pv-text);
    border: 1px solid var(--pv-border-strong);
    border-radius: var(--pv-radius);
    padding: 0.5rem 0.7rem;
}
.pv-modal__select:focus {
    border-color: var(--pv-accent);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(79, 139, 255, 0.18);
}
.pv-modal__notice {
    margin-top: 0.6rem;
    padding: 0.5rem 0.7rem;
    border-radius: var(--pv-radius);
    font-size: 0.82rem;
    border: 1px solid var(--pv-border);
    background: var(--pv-bg-elevated-2);
}
.pv-modal__notice[data-tone="ok"]   { border-color: rgba(61, 220, 151, 0.4); background: rgba(61, 220, 151, 0.1); color: var(--pv-success); }
.pv-modal__notice[data-tone="warn"] { border-color: rgba(255, 200, 87, 0.4); background: rgba(255, 200, 87, 0.1); color: var(--pv-warn); }
.pv-modal__notice[data-tone="err"]  { border-color: rgba(255, 107, 107, 0.4); background: rgba(255, 107, 107, 0.1); color: var(--pv-danger); }

/* ---------- Share / QR modal --------------------------------------- */
.pv-share__qr { width: 240px; height: 240px; background: #f0f2f5; padding: 8px; border-radius: 12px; display: block; margin: 0 auto 0.6rem; }
.pv-share__url { font-size: 0.78rem; color: var(--pv-text-muted); word-break: break-all; padding: 0.4rem 0.5rem; background: var(--pv-bg-elevated-2); border-radius: 6px; }

/* ---------- Telemetry modal v2.1 ----------------------------------- */
.pv-tg__section {
    background: var(--pv-bg-elevated);
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-radius);
    padding: 0.85rem 0.95rem;
    margin-top: 0.7rem;
}
.pv-tg__title {
    margin: 0 0 0.55rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.pv-tg__title i:first-child { color: var(--pv-accent); }
.pv-tg__count {
    margin-left: auto;
    font-size: 0.68rem;
    background: var(--pv-bg-elevated-3);
    padding: 0.08rem 0.5rem;
    border-radius: var(--pv-radius-pill);
    color: var(--pv-text-muted);
}
.pv-tg__row-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 0.7rem;
}
.pv-tg__row-2 .pv-tg__section { margin-top: 0.7rem; }
.pv-tg__row-2 .pv-tg__section:first-child { margin-top: 0.7rem; }

/* Top stat tiles */
.pv-tg--summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr));
    gap: 0.55rem;
    margin-bottom: 0;
}
.pv-tg-stat {
    background: var(--pv-bg-elevated);
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-radius);
    padding: 0.7rem 0.6rem;
    text-align: center;
}
.pv-tg-stat__icon {
    color: var(--pv-accent);
    font-size: 1rem;
    margin-bottom: 0.3rem;
}
.pv-tg-stat[data-tone="warn"] .pv-tg-stat__icon  { color: var(--pv-warn); }
.pv-tg-stat__val {
    font-size: 1.3rem;
    font-weight: 800;
    color: #fff;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.pv-tg-stat[data-tone="warn"] .pv-tg-stat__val { color: var(--pv-warn); }
.pv-tg-stat__lbl {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pv-text-muted);
    margin-top: 0.2rem;
    font-weight: 600;
}

/* Death info banner */
.pv-tg-death {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: 0.85rem;
    margin-top: 0.7rem;
    padding: 0.75rem 0.95rem;
    border-radius: var(--pv-radius);
    border: 1px solid var(--pv-border);
}
.pv-tg-death[data-state="dead"] {
    background: linear-gradient(90deg, rgba(255, 107, 107, 0.15), rgba(255, 107, 107, 0.04));
    border-color: rgba(255, 107, 107, 0.35);
}
.pv-tg-death[data-state="survived"] {
    background: linear-gradient(90deg, rgba(61, 220, 151, 0.18), rgba(61, 220, 151, 0.04));
    border-color: rgba(61, 220, 151, 0.4);
}
.pv-tg-death__icon {
    width: 44px; height: 44px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
}
.pv-tg-death[data-state="dead"]     .pv-tg-death__icon { background: rgba(255, 107, 107, 0.18); color: var(--pv-danger); }
.pv-tg-death[data-state="survived"] .pv-tg-death__icon { background: rgba(61, 220, 151, 0.2);  color: var(--pv-success); }
.pv-tg-death__lbl  { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--pv-text-muted); font-weight: 700; }
.pv-tg-death__name { font-size: 1.05rem; font-weight: 800; color: #fff; margin-top: 0.1rem; }
.pv-tg-death__name small { font-size: 0.78rem; font-weight: 500; color: var(--pv-text-muted); }
.pv-tg-death__time { font-variant-numeric: tabular-nums; color: var(--pv-text-muted); font-size: 0.85rem; }

/* Damage breakdown stacked bar (body-part split) */
.pv-tg-dmgbar {
    height: 32px;
    display: flex;
    border-radius: var(--pv-radius);
    overflow: hidden;
    border: 1px solid var(--pv-border-strong);
    background: var(--pv-bg-elevated-3);
}
.pv-tg-dmgbar__seg {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(13, 17, 23, 0.85);
    font-size: 0.7rem;
    font-weight: 800;
    transition: width 0.4s var(--pv-ease);
    white-space: nowrap;
    overflow: hidden;
}
.pv-tg-dmgbar__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.8rem;
    margin-top: 0.55rem;
    font-size: 0.78rem;
    color: var(--pv-text-muted);
}
.pv-tg-dmgbar__leg {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.pv-tg-dmgbar__leg i {
    width: 10px; height: 10px;
    border-radius: 2px;
    background: var(--pv-leg-c, var(--pv-text-dim));
    display: inline-block;
}
.pv-tg-dmgbar__leg strong { color: #fff; margin-left: 0.15rem; font-variant-numeric: tabular-nums; }

/* Weapon summary */
.pv-tg-weapons {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.45rem;
}
.pv-tg-weapon {
    background: var(--pv-bg-elevated-2);
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-radius);
    padding: 0.55rem 0.7rem;
}
.pv-tg-weapon__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.3rem;
}
.pv-tg-weapon__head strong { color: #fff; font-size: 0.92rem; }
.pv-tg-weapon__dmg { font-size: 0.78rem; color: var(--pv-warn); font-variant-numeric: tabular-nums; font-weight: 700; }
.pv-tg-weapon__bar {
    height: 5px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--pv-radius-pill);
    overflow: hidden;
    margin-bottom: 0.4rem;
}
.pv-tg-weapon__bar > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--pv-accent), var(--pv-warn));
    border-radius: var(--pv-radius-pill);
}
.pv-tg-weapon__nums {
    display: flex;
    gap: 0.85rem;
    font-size: 0.75rem;
    color: var(--pv-text-muted);
}
.pv-tg-weapon__nums strong { color: #fff; font-variant-numeric: tabular-nums; margin-right: 0.15rem; }

/* Combat log */
.pv-tg-log {
    max-height: 280px;
    overflow-y: auto;
    padding: 0.2rem;
}
.pv-tg-log__row {
    display: grid;
    grid-template-columns: 24px 56px 1fr;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.55rem;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
    font-size: 0.82rem;
    color: var(--pv-text);
}
.pv-tg-log__row:last-child { border-bottom: 0; }
.pv-tg-log__row[data-headshot="1"] { background: rgba(255, 107, 107, 0.08); border-radius: var(--pv-radius); }
.pv-tg-log__row[data-type="dbno"]  { color: var(--pv-text-muted); }
.pv-tg-log__icon { display: inline-flex; justify-content: center; }
.pv-tg-log__time { font-variant-numeric: tabular-nums; color: var(--pv-text-dim); font-size: 0.78rem; }
.pv-tg-log__text strong { color: #fff; font-weight: 700; }
.pv-tg-log__dist { color: var(--pv-text-dim); font-size: 0.74rem; }

/* Damage received */
.pv-tg-taken {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.3rem;
}
.pv-tg-taken__row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 0.7rem;
    padding: 0.45rem 0.7rem;
    background: var(--pv-bg-elevated-2);
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-radius);
    color: var(--pv-text);
    text-decoration: none;
    transition: var(--pv-dur) var(--pv-ease);
    align-items: center;
}
.pv-tg-taken__row:hover { border-color: var(--pv-accent); transform: translateX(2px); }
.pv-tg-taken__name { color: #fff; font-weight: 700; font-size: 0.86rem; }
.pv-tg-taken__hits { color: var(--pv-text-muted); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.pv-tg-taken__dmg  { color: var(--pv-danger); font-weight: 800; font-variant-numeric: tabular-nums; font-size: 0.85rem; }

/* Consumables */
.pv-tg-consume {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.pv-tg-consume__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    background: var(--pv-bg-elevated-2);
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-radius-pill);
    font-size: 0.8rem;
    color: var(--pv-text);
}
.pv-tg-consume__chip i { color: var(--pv-success); font-size: 0.8rem; }
.pv-tg-consume__chip strong { color: #fff; margin-left: 0.15rem; font-variant-numeric: tabular-nums; }

/* Teammates */
.pv-tg-team {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.pv-tg-team__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.32rem 0.7rem;
    background: var(--pv-bg-elevated-2);
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-radius-pill);
    font-size: 0.8rem;
    color: var(--pv-text);
    text-decoration: none;
    transition: var(--pv-dur) var(--pv-ease);
}
.pv-tg-team__chip:hover { color: var(--pv-accent); border-color: var(--pv-accent); }
.pv-tg-team__chip i { color: var(--pv-text-muted); font-size: 0.78rem; }

/* ============= EXTENDED TELEMETRY (added 2026-04-19) =================
   Sections:
   - .pv-tg-empty       : Friendly "no telemetry" panel (e.g. >14d retention)
   - .pv-tg-drop        : Drop analysis (player drop + hot-drop tier)
   - .pv-tg-map         : Mini-map preview with all landings
   - .pv-tg-vehicletypes: Vehicle types list under stat grid
   - .pv-tg-loot        : Loot pickup chips (color-coded by rarity)
   - .pv-tg-killmap     : Full-width kill positions heatmap
   - .pv-tg-chip        : Generic small badge (used by vehicle types)
   - .pv-tg__minigrid   : 3-up stat grid (used by vehicle stats)
   - .pv-tg__section--full : Full-width section row (kill map)
   - .pv-tg__sub        : Subtitle text inside section title
   ==================================================================== */

/* "Open full page" banner inside the modal -- nudges users toward the
   dedicated /match/{id} page where everything has room to breathe. */
.pv-tg__fullpage-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem;
    background: linear-gradient(90deg, rgba(45,212,191,0.10), rgba(45,212,191,0.02) 80%);
    border: 1px solid rgba(45,212,191,0.3);
    border-radius: var(--pv-radius-md);
    color: var(--pv-text);
    font-size: 0.86rem;
    line-height: 1.4;
}
.pv-tg__fullpage-banner i { color: #2dd4bf; flex: 0 0 auto; }
.pv-tg__fullpage-banner a {
    color: #2dd4bf;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(45,212,191,0.4);
}
.pv-tg__fullpage-banner a:hover { color: #5eead4; border-bottom-color: #5eead4; }

/* Friendly empty/error state replacing the raw "Could not analyze..." */
.pv-tg-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.2rem 1.4rem;
    background: var(--pv-bg-elevated);
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-radius-md);
    gap: 0.75rem;
}
.pv-tg-empty__icon { font-size: 2rem; opacity: 0.85; }
.pv-tg-empty__msg  { color: var(--pv-text-muted); margin: 0; font-size: 0.92rem; line-height: 1.5; max-width: 36rem; }
/* Slightly different framing for retention-expired so it reads more like an FYI than an error */
.pv-tg-empty--retention_expired { background: linear-gradient(180deg, rgba(255,193,7,0.04), transparent 70%); }

/* ============= DROP ANALYSIS ====================================== */
.pv-tg-drop {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.pv-tg-drop__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    align-items: baseline;
    justify-content: space-between;
}
.pv-tg-drop__map {
    font-weight: 600;
    color: var(--pv-text);
    font-size: 0.95rem;
}
.pv-tg-drop__map i { color: var(--pv-text-muted); margin-right: 0.35rem; }
.pv-tg-drop__tier {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.25rem 0.6rem;
    border-radius: var(--pv-radius-pill);
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--pv-tier-c, var(--pv-text));
    background: color-mix(in srgb, var(--pv-tier-c, var(--pv-text)) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--pv-tier-c, var(--pv-text)) 35%, transparent);
}
.pv-tg-drop__tier small { color: var(--pv-text-muted); font-weight: 500; margin-left: 0.15rem; }

/* Mini-map preview: 1:1 ratio square that holds positional dots */
.pv-tg-map {
    position: relative;
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,0.04), transparent 60%),
        radial-gradient(circle at 70% 75%, rgba(255,255,255,0.03), transparent 60%),
        var(--pv-bg-elevated-2);
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-radius-md);
    overflow: hidden;
}
.pv-tg-map::before {
    /* Subtle grid overlay so positional context reads even without an actual map image */
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 25% 25%;
}
.pv-tg-map__dot {
    position: absolute;
    width: 7px;
    height: 7px;
    margin: -3.5px 0 0 -3.5px;
    background: var(--pv-text-muted);
    border-radius: 50%;
    opacity: 0.55;
    cursor: help;
    transition: transform 120ms ease, opacity 120ms ease;
}
.pv-tg-map__dot:hover { opacity: 1; transform: scale(1.4); z-index: 2; }
.pv-tg-map__player {
    position: absolute;
    transform: translate(-50%, -100%);
    color: var(--pv-accent);
    font-size: 1.4rem;
    text-shadow: 0 0 6px rgba(0,0,0,0.7);
    z-index: 3;
    cursor: help;
}

/* ============= VEHICLE STATS ====================================== */
.pv-tg__minigrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
    margin-bottom: 0.7rem;
}
.pv-tg-vehicletypes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    font-size: 0.83rem;
}
.pv-tg-vehicletypes .pv-empty__lbl {
    color: var(--pv-text-muted);
    font-size: 0.78rem;
    margin-right: 0.2rem;
}
.pv-tg-chip {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    background: var(--pv-bg-elevated-2);
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-radius-pill);
    font-size: 0.78rem;
    color: var(--pv-text);
}

/* ============= LOOT FOUND ========================================= */
.pv-tg-loot {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.pv-tg-loot__chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    padding: 0.32rem 0.65rem;
    background: var(--pv-bg-elevated-2);
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-radius-pill);
    font-size: 0.8rem;
    color: var(--pv-text);
    cursor: help;
}
.pv-tg-loot__chip small { color: var(--pv-text-muted); font-weight: 500; }
.pv-tg-loot__chip--legendary {
    color: #ffb547;
    border-color: rgba(255,181,71,0.5);
    background: rgba(255,181,71,0.08);
}
.pv-tg-loot__chip--rare {
    color: #b08bff;
    border-color: rgba(176,139,255,0.45);
    background: rgba(176,139,255,0.08);
}
.pv-tg-loot__chip--uncommon {
    color: #74c0fc;
    border-color: rgba(116,192,252,0.4);
    background: rgba(116,192,252,0.07);
}
.pv-tg-loot__chip--common {
    /* default styling (no color override) so common items don't draw the eye */
}
.pv-tg-loot__more {
    align-self: center;
    padding: 0.2rem 0.55rem;
    color: var(--pv-text-muted);
    font-size: 0.78rem;
    font-style: italic;
}

/* ============= KILL MAP =========================================== */
.pv-tg__section--full { grid-column: 1 / -1; }
.pv-tg__sub {
    color: var(--pv-text-muted);
    font-weight: 500;
    margin-left: 0.5rem;
    font-size: 0.78rem;
}
.pv-tg-killmap {
    position: relative;
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: 420px;
    margin: 0.5rem auto 0;
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,0.03), transparent 60%),
        radial-gradient(circle at 70% 75%, rgba(255,255,255,0.025), transparent 60%),
        var(--pv-bg-elevated-2);
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-radius-md);
    overflow: hidden;
}
.pv-tg-killmap::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 12.5% 12.5%;
}
.pv-tg-killmap__pin {
    position: absolute;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    background: var(--pv-danger);
    box-shadow: 0 0 8px rgba(220,53,69,0.55);
    border-radius: 50%;
    cursor: help;
    transition: transform 120ms ease;
    z-index: 2;
}
.pv-tg-killmap__pin:hover { transform: scale(1.6); z-index: 3; }
.pv-tg-killmap__pin--hs {
    background: #ffc107;
    box-shadow: 0 0 10px rgba(255,193,7,0.7);
    width: 12px; height: 12px; margin: -6px 0 0 -6px;
}

/* ---------- Icon-only social media buttons -------------------------
   Idle state shows the official brand colour for each platform so the
   row is instantly scannable ("oh that's their Twitch / YouTube /
   etc."). Hover deepens the brand colour by filling the background
   with a translucent slab and bumping the icon up a pixel.

   Brand references (verified from official press kits, 2025-2026):
     • Twitch   #9146FF  (purple)
     • YouTube  #FF0033  (red)
     • X / Twitter — black brand on light, white brand on dark; we use
       white because the page background is dark.
     • TikTok   teal #00F2EA + magenta #FE2C55 (dual-tone brand);
       the icon glyph itself only carries one colour, so we use teal
       as the primary and add a second-shadow magenta hover.
     • Instagram — official logo is the sunset gradient
       #FEDA75 → #FA7E1E → #D62976 → #962FBF → #4F5BD5; we replicate
       it with a CSS conic gradient and a transparent icon mask so
       the icon "absorbs" the gradient. Falls back to the magenta
       midpoint on browsers that don't support background-clip:text.
     • Discord  #5865F2  (blurple)
*/
.pv-hero__socials {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: 0.25rem;
    padding-left: 0.4rem;
    border-left: 1px solid var(--pv-border);
}
.pv-soc-icon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--pv-bg-elevated-2);
    border: 1px solid currentColor;
    color: var(--pv-text-muted);
    text-decoration: none;
    transition: transform 180ms var(--pv-ease),
                background 180ms var(--pv-ease),
                box-shadow 180ms var(--pv-ease);
    font-size: 0.9rem;
}
.pv-soc-icon:hover {
    transform: translateY(-2px);
}

/* Twitch ---------------------------------------------------------- */
.pv-soc-icon--twitch       { color: #9146FF; border-color: rgba(145, 70, 255, 0.55); }
.pv-soc-icon--twitch:hover { background: rgba(145, 70, 255, 0.18);
                             box-shadow: 0 4px 14px -6px rgba(145, 70, 255, 0.7); }

/* YouTube --------------------------------------------------------- */
.pv-soc-icon--yt           { color: #FF0033; border-color: rgba(255, 0, 51, 0.55); }
.pv-soc-icon--yt:hover     { background: rgba(255, 0, 51, 0.18);
                             box-shadow: 0 4px 14px -6px rgba(255, 0, 51, 0.7); }

/* X / Twitter ----------------------------------------------------- */
.pv-soc-icon--x            { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.45); }
.pv-soc-icon--x:hover      { background: rgba(255, 255, 255, 0.10);
                             box-shadow: 0 4px 14px -6px rgba(255, 255, 255, 0.55); }

/* TikTok ---------------------------------------------------------- */
.pv-soc-icon--tt           { color: #00F2EA; border-color: rgba(0, 242, 234, 0.55); }
.pv-soc-icon--tt:hover     { background: rgba(0, 242, 234, 0.16);
                             /* Dual-tone shadow: cyan above + magenta below
                                mirrors the official TikTok logo offset. */
                             box-shadow: -2px 0 10px -4px rgba(254, 44, 85, 0.55),
                                          2px 0 10px -4px rgba(0, 242, 234, 0.7); }

/* Instagram --------------------------------------------------------
   The "official" gradient (sunset purple→pink→orange) is hard to
   apply cleanly to a Font Awesome glyph because background-clip:text
   has spotty cross-browser fallback and conflicts with our circular
   border. So we use the most recognisable single-tone Instagram
   colour for the idle state (E1306C, the magenta midpoint of the
   gradient) and unleash the full sunset gradient as a soft fill +
   glow on hover -- which is plenty for the chip to read as IG. */
.pv-soc-icon--ig           { color: #E1306C; border-color: rgba(225, 48, 108, 0.55); }
.pv-soc-icon--ig:hover     {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, #FEDA75 0%, #FA7E1E 25%, #D62976 50%, #962FBF 75%, #4F5BD5 100%);
    box-shadow: 0 4px 14px -6px rgba(214, 41, 118, 0.85);
}

/* Discord --------------------------------------------------------- */
.pv-soc-icon--dc           { color: #5865F2; border-color: rgba(88, 101, 242, 0.55); }
.pv-soc-icon--dc:hover     { background: rgba(88, 101, 242, 0.18);
                             box-shadow: 0 4px 14px -6px rgba(88, 101, 242, 0.75); }

/* Bio "Socials" row uses larger icons but same icon-only look. */
.pv-socials.pv-socials--icons {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}
.pv-socials.pv-socials--icons .pv-soc-icon {
    width: 36px;
    height: 36px;
    font-size: 0.95rem;
}

/* Highlights ribbon icon-only chip variant. */
.pv-highlight.pv-highlight--icon {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
}
.pv-highlight.pv-highlight--icon i { font-size: 0.85rem; }

/* Hero status: keep "LIVE on Twitch" text but Twitch icon-only link. */
.pv-hero__status-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: 0.4rem;
    border-radius: 50%;
    background: rgba(145, 70, 255, 0.2);
    color: #fff;
    text-decoration: none;
    transition: var(--pv-dur) var(--pv-ease);
}
.pv-hero__status-link:hover { background: #9146ff; transform: scale(1.08); }
.pv-hero__status-link i { font-size: 0.7rem; }

/* ---------- Keyboard shortcuts list -------------------------------- */
.pv-shortcuts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1rem; }
.pv-shortcuts__row { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.5rem; background: var(--pv-bg-elevated); border-radius: var(--pv-radius); }
.pv-shortcuts__row kbd {
    background: var(--pv-bg-elevated-3);
    border: 1px solid var(--pv-border-strong);
    border-bottom-width: 2px;
    color: #fff;
    padding: 1px 7px;
    border-radius: 4px;
    font-size: 0.78rem;
    min-width: 28px;
    text-align: center;
}
@media (max-width: 575.98px) {
    .pv-shortcuts { grid-template-columns: 1fr; }
}

/* ---------- Trust state subtle hue on status pill ------------------ */
.pv-hero__status[data-trust="low"]  { box-shadow: inset 0 0 0 1px rgba(255, 107, 107, 0.4); }
.pv-hero__status[data-trust="med"]  { box-shadow: inset 0 0 0 1px rgba(255, 200, 87, 0.4); }
.pv-hero__status[data-trust="high"] { box-shadow: inset 0 0 0 1px rgba(61, 220, 151, 0.3); }

/* ---------- Player Not Found page ---------------------------------
 * Empty state shown when the URL nickname doesn't resolve to a tracked
 * PUBG account. Used to render fully unstyled in production because the
 * <link rel="stylesheet" href="player_v2.css"> tag in player_v2.php sat
 * AFTER the early `exit` in the not-found block, so none of these rules
 * ever made it to the DOM. Fixed in player_v2.php (link is now emitted
 * inside the if-block, before the markup). The styles below were also
 * polished at the same time: soft glow card, animated icon, semi-pill
 * chips with last-seen meta, and an inline retry search.
 * ----------------------------------------------------------------- */
.pv-notfound {
    position: relative;
    max-width: 720px;
    margin: 2.5rem auto;
    padding: 2.25rem 1.75rem 2rem;
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(79, 139, 255, 0.08), transparent 60%),
        var(--pv-bg-elevated);
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-radius-lg);
    text-align: center;
    color: var(--pv-text);
    box-shadow: var(--pv-shadow-3);
    overflow: hidden;
    animation: pv-nf-in 380ms var(--pv-ease) both;
}
/* Soft accent line across the very top edge — subtle but defines the
 * card and matches the "premium card" treatment on the rest of the
 * page (hero, ranked panel etc.). */
.pv-notfound::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(79, 139, 255, 0.6) 35%,
        rgba(168, 107, 255, 0.6) 65%,
        transparent 100%);
    opacity: 0.7;
    pointer-events: none;
}
@keyframes pv-nf-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.pv-notfound__icon {
    position: relative;
    width: 76px;
    height: 76px;
    margin: 0 auto 1.1rem;
    border-radius: 50%;
    background: rgba(255, 200, 87, 0.14);
    color: var(--pv-warn);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.85rem;
    box-shadow:
        inset 0 0 0 1px rgba(255, 200, 87, 0.35),
        0 6px 22px rgba(255, 200, 87, 0.12);
}
.pv-notfound__icon::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1px solid rgba(255, 200, 87, 0.25);
    animation: pv-nf-pulse 2.4s ease-out infinite;
    pointer-events: none;
}
@keyframes pv-nf-pulse {
    0%   { transform: scale(0.92); opacity: 0.55; }
    70%  { transform: scale(1.18); opacity: 0;    }
    100% { transform: scale(1.18); opacity: 0;    }
}
@media (prefers-reduced-motion: reduce) {
    .pv-notfound { animation: none; }
    .pv-notfound__icon::after { animation: none; opacity: 0; }
}
.pv-notfound__title {
    font-size: 1.45rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 0.4rem;
    line-height: 1.25;
    word-break: break-word;
}
.pv-notfound__sub {
    color: var(--pv-text-muted);
    font-size: 0.95rem;
    margin: 0 auto 1.4rem;
    max-width: 540px;
    line-height: 1.5;
}
.pv-notfound__reasons {
    list-style: none;
    padding: 0;
    margin: 0 auto 1.4rem;
    text-align: left;
    max-width: 560px;
    display: grid;
    gap: 0.5rem;
}
.pv-notfound__reasons li {
    display: grid;
    grid-template-columns: 22px 1fr;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.65rem 0.85rem;
    background: var(--pv-bg-elevated-2);
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-radius);
    color: var(--pv-text-muted);
    font-size: 0.88rem;
    line-height: 1.5;
    transition: border-color var(--pv-dur) var(--pv-ease),
                background var(--pv-dur) var(--pv-ease);
}
.pv-notfound__reasons li:hover {
    border-color: var(--pv-border-strong);
    background: var(--pv-bg-elevated-3);
}
.pv-notfound__reasons li i {
    color: var(--pv-info);
    margin-top: 3px;
    font-size: 0.95rem;
    text-align: center;
}
.pv-notfound__reasons li strong { color: #fff; font-weight: 700; }
.pv-notfound__reasons li kbd {
    background: var(--pv-bg-elevated-3);
    border: 1px solid var(--pv-border-strong);
    color: #fff;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.78rem;
    font-family: 'Menlo', 'Consolas', monospace;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}

/* Inline retry search — saves the user a round-trip to the homepage. */
.pv-notfound__retry {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 0;
    max-width: 480px;
    margin: 0 auto 1.4rem;
    background: var(--pv-bg-elevated-2);
    border: 1px solid var(--pv-border-strong);
    border-radius: var(--pv-radius-pill);
    padding: 4px 4px 4px 0.95rem;
    transition: border-color var(--pv-dur) var(--pv-ease),
                box-shadow var(--pv-dur) var(--pv-ease);
}
.pv-notfound__retry:focus-within {
    border-color: var(--pv-accent);
    box-shadow: 0 0 0 3px rgba(79, 139, 255, 0.18);
}
.pv-notfound__retry-icon {
    display: inline-flex;
    align-items: center;
    color: var(--pv-text-dim);
    font-size: 0.92rem;
    margin-right: 0.55rem;
}
.pv-notfound__retry:focus-within .pv-notfound__retry-icon { color: var(--pv-accent); }
.pv-notfound__retry-input {
    flex: 1 1 auto;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: none;
    color: var(--pv-text);
    font-size: 0.95rem;
    font-weight: 500;
    padding: 0.35rem 0;
}
.pv-notfound__retry-input::placeholder { color: var(--pv-text-dim); }
.pv-notfound__retry-btn {
    flex: 0 0 auto;
    background: var(--pv-accent);
    color: #fff;
    border: 0;
    border-radius: var(--pv-radius-pill);
    padding: 0.5rem 1.2rem;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    min-width: 92px;
    transition: background var(--pv-dur) var(--pv-ease),
                transform var(--pv-dur) var(--pv-ease);
}
.pv-notfound__retry-btn:hover:not(:disabled) {
    background: var(--pv-accent-strong);
    transform: translateY(-1px);
}
.pv-notfound__retry-btn:disabled { opacity: 0.7; cursor: wait; }
.pv-notfound__retry-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    animation: pv-spin 0.75s linear infinite;
    vertical-align: -2px;
}

.pv-notfound__suggest {
    background:
        linear-gradient(180deg, rgba(79, 139, 255, 0.08), rgba(79, 139, 255, 0.03));
    border: 1px solid rgba(79, 139, 255, 0.28);
    padding: 1rem 1.1rem;
    border-radius: var(--pv-radius);
    margin: 0 auto 1.4rem;
    max-width: 580px;
}
.pv-notfound__suggest-lbl {
    font-size: 0.85rem;
    color: var(--pv-text-secondary);
    margin: 0 0 0.65rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.pv-notfound__suggest-lbl i { color: var(--pv-warn); }
.pv-notfound__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    justify-content: center;
}
.pv-notfound__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.38rem 0.85rem;
    background: var(--pv-bg-elevated-2);
    border: 1px solid var(--pv-border-strong);
    border-radius: var(--pv-radius-pill);
    text-decoration: none;
    color: var(--pv-text);
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.2;
    transition: var(--pv-dur) var(--pv-ease);
}
.pv-notfound__chip:hover,
.pv-notfound__chip:focus-visible {
    color: #fff;
    background: rgba(79, 139, 255, 0.12);
    border-color: var(--pv-accent);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(79, 139, 255, 0.18);
    outline: none;
}
.pv-notfound__chip > i { color: var(--pv-text-dim); font-size: 0.78rem; }
.pv-notfound__chip:hover > i { color: var(--pv-accent); }
.pv-notfound__chip-name { color: inherit; }
.pv-notfound__chip-meta {
    color: var(--pv-text-dim);
    font-size: 0.72rem;
    font-weight: 500;
    padding-left: 0.35rem;
    border-left: 1px solid var(--pv-border-strong);
    margin-left: 0.15rem;
}

.pv-notfound__cta {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    justify-content: center;
}
.pv-notfound__cta .pv-btn {
    padding: 0.58rem 1.1rem;
    text-decoration: none;
    font-size: 0.9rem;
}

@media (max-width: 575.98px) {
    .pv-notfound {
        margin: 1.25rem auto;
        padding: 1.6rem 1.1rem 1.4rem;
        border-radius: var(--pv-radius);
    }
    .pv-notfound__icon { width: 64px; height: 64px; font-size: 1.55rem; margin-bottom: 0.85rem; }
    .pv-notfound__title { font-size: 1.2rem; }
    .pv-notfound__sub { font-size: 0.88rem; margin-bottom: 1.1rem; }
    .pv-notfound__reasons li { font-size: 0.82rem; padding: 0.55rem 0.7rem; }
    .pv-notfound__retry {
        flex-wrap: wrap;
        border-radius: var(--pv-radius);
        padding: 0.55rem;
        gap: 0.5rem;
    }
    .pv-notfound__retry-icon { display: none; }
    .pv-notfound__retry-input {
        flex: 1 1 100%;
        padding: 0.4rem 0.55rem;
        background: var(--pv-bg-elevated);
        border-radius: var(--pv-radius-sm);
    }
    .pv-notfound__retry-btn {
        flex: 1 1 100%;
        border-radius: var(--pv-radius-sm);
        padding: 0.55rem 1rem;
    }
    .pv-notfound__cta { display: flex; width: 100%; }
    .pv-notfound__cta .pv-btn { flex: 1 1 auto; justify-content: center; }
}

/* ---------- Auto-syncing freshness pill state ---------------------- */
/*
 * The hero already has a freshness pill (#pv-hero-freshness). We add a
 * "syncing" sub-state so the auto-refresh can communicate that we're
 * fetching newer data in the background — without scaring the user
 * that anything is broken. Pulses softly until the pill flips back
 * to "fresh".
 */
.pv-hero__freshness[data-state="syncing"] {
    color: var(--pv-info);
    background: rgba(87, 214, 255, 0.12);
    border: 1px solid rgba(87, 214, 255, 0.35);
}
.pv-hero__freshness[data-state="syncing"] i {
    animation: pv-spin 1.4s linear infinite;
}
@keyframes pv-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}