/* ==========================================================================
   PUBG Looker — Player Comparison Page (V1)
   All styles namespaced under `cmp-` so they cannot collide with the
   player profile (`pv-`) or homepage (`hp-`) systems. Re-uses the V2
   design tokens (`--pv-*`) that player_v2.css already declares so the
   visual language stays consistent across pages.
   Powered by NXDPRO Solutions | https://www.nxdpro.com/
   ========================================================================== */

/* ---------- Page shell -------------------------------------------------- */
.cmp-page {
    color: var(--pv-text, #f0f2f5);
    min-height: 60vh;
}

/* ---------- Header / kicker -------------------------------------------- */
.cmp-header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0.25rem 0 1.25rem;
}
.cmp-header__title-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.85rem;
}
.cmp-header__kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.22rem 0.7rem;
    background: rgba(79, 139, 255, 0.12);
    color: var(--pv-accent, #4f8bff);
    border: 1px solid rgba(79, 139, 255, 0.3);
    border-radius: var(--pv-radius-pill, 999px);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.cmp-header__title {
    margin: 0;
    font-size: clamp(1.4rem, 2.6vw, 1.85rem);
    font-weight: 800;
    color: var(--pv-text, #f0f2f5);
    line-height: 1.15;
    font-family: var(--font-secondary, 'Montserrat', sans-serif);
}
.cmp-header__sub {
    margin: 0;
    color: var(--pv-text-muted, rgba(255,255,255,0.62));
    font-size: 0.9rem;
    max-width: 70ch;
}
.cmp-header__hint {
    color: var(--pv-text-dim, rgba(255,255,255,0.38));
    font-size: 0.82rem;
    margin-left: 0.4rem;
}
.cmp-header__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.4rem;
}

/* ---------- Generic button (matches .pv-btn) --------------------------- */
.cmp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    background: var(--pv-bg-elevated-2, rgba(255,255,255,0.05));
    color: var(--pv-text, #f0f2f5);
    border: 1px solid var(--pv-border, rgba(255,255,255,0.08));
    border-radius: var(--pv-radius, 12px);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: 180ms cubic-bezier(0.22, 1, 0.36, 1);
    text-decoration: none;
}
.cmp-btn:hover:not(:disabled) {
    background: var(--pv-bg-elevated-3, rgba(255,255,255,0.08));
    border-color: var(--pv-border-strong, rgba(255,255,255,0.16));
    color: #fff;
    transform: translateY(-1px);
}
.cmp-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.cmp-btn--primary {
    background: var(--pv-accent, #4f8bff);
    border-color: var(--pv-accent, #4f8bff);
    color: #fff;
}
.cmp-btn--primary:hover:not(:disabled) {
    background: var(--pv-accent-strong, #3b6fe0);
    border-color: var(--pv-accent-strong, #3b6fe0);
}
.cmp-btn--sm {
    padding: 0.32rem 0.65rem;
    font-size: 0.74rem;
}
.cmp-btn:focus-visible {
    outline: 2px solid var(--pv-accent, #4f8bff);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(79, 139, 255, 0.18);
}

/* ---------- Slots row (Slot A | VS | Slot B) --------------------------- */
.cmp-slots {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0.85rem;
    align-items: stretch;
    margin-bottom: 1.25rem;
}
.cmp-slot {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 220px;
    padding: 1.1rem;
    background: var(--pv-bg-elevated, rgba(255,255,255,0.03));
    border: 1px solid var(--pv-border, rgba(255,255,255,0.08));
    border-radius: var(--pv-radius-lg, 18px);
    /* Intentionally NO overflow:hidden here. The autocomplete dropdown
       inside .cmp-slot__empty extends below the slot when there are
       more than ~3 results, and clipping it to the slot makes the
       lower entries unreachable. The mini-hero card has its own
       overflow:hidden + border-radius so the inner gradient still
       clips correctly. */
    transition: 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cmp-slot[data-state="filled"] {
    background: var(--pv-bg-elevated-2, rgba(255,255,255,0.05));
    border-color: var(--pv-border-strong, rgba(255,255,255,0.16));
}
.cmp-slot__side-label {
    position: absolute;
    top: 0.55rem;
    left: 0.85rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--pv-text-dim, rgba(255,255,255,0.38));
    pointer-events: none;
}
.cmp-slot[data-side="b"] .cmp-slot__side-label {
    left: auto;
    right: 0.85rem;
}

/* Tier-tinted accent on a filled slot — purely cosmetic, mirrors the
   tier border idea from the player hero so a Diamond player visibly
   reads as Diamond. NOTE: this only applies when there's no
   comparison verdict yet (no `data-result` attribute). Once the
   verdict is in, the green/red/amber result border below takes over
   so visitors don't have to mentally untangle "is the border green
   because they're winning or because they're Crystal tier?" */
.cmp-slot[data-tier="bronze"]:not([data-result])   { border-color: rgba(205, 127, 50, 0.45); }
.cmp-slot[data-tier="silver"]:not([data-result])   { border-color: rgba(192, 192, 192, 0.45); }
.cmp-slot[data-tier="gold"]:not([data-result])     { border-color: rgba(255, 215, 0, 0.45); }
.cmp-slot[data-tier="platinum"]:not([data-result]) { border-color: rgba(174, 214, 241, 0.45); }
.cmp-slot[data-tier="crystal"]:not([data-result])  { border-color: rgba(0, 229, 204, 0.5); }
.cmp-slot[data-tier="diamond"]:not([data-result])  { border-color: rgba(93, 173, 226, 0.5); }
.cmp-slot[data-tier="master"]:not([data-result])   { border-color: rgba(255, 138, 76, 0.55); }
.cmp-slot[data-tier="survivor"]:not([data-result]) { border-color: rgba(255, 107, 157, 0.6); }

/* ---------- Comparison verdict border + winner celebration ------------
   Once both slots have data and the comparison has tallied which side
   leads, we paint the slots' borders to match the verdict:
     winner → green border + soft glow + slow pulse + one-time burst
     loser  → red border (no animation -- losing shouldn't draw the eye)
     tied   → amber border (matching the scoreboard's "Dead even" pill)
   These selectors win over the tier-tinted rules above thanks to
   higher specificity (`[data-result]` + `[data-tier]`).
   The pulse animation runs forever at 3.2s per cycle so it stays
   subtle; the entry burst plays once when the result is first applied
   to give a tiny "winner reveal" moment. Both respect the user's
   `prefers-reduced-motion` setting. */
.cmp-slot[data-result="winner"] {
    border-color: rgba(61, 220, 151, 0.65);
    box-shadow: 0 0 22px rgba(61, 220, 151, 0.18);
    animation:
        cmpSlotWinnerEnter 700ms cubic-bezier(0.34, 1.56, 0.64, 1) both,
        cmpSlotWinnerPulse 3.2s ease-in-out 700ms infinite;
}
.cmp-slot[data-result="loser"] {
    border-color: rgba(255, 107, 107, 0.55);
    box-shadow: 0 0 16px rgba(255, 107, 107, 0.10);
}
.cmp-slot[data-result="tied"] {
    border-color: rgba(255, 200, 87, 0.55);
    box-shadow: 0 0 14px rgba(255, 200, 87, 0.10);
}

/* Decorative result badges, centred at the TOP of each slot card.
   Both sides get a pill so the row reads symmetrically:
     winner → bright green "★" pill, with a celebratory bounce-in
              and a continuous gentle pulse to draw the eye
     loser  → muted red  "▼" pill, fades in once with no pulse so
              it feels like a quiet indicator rather than a callout
   We use `left: 50%` + `translateX(-50%)` to centre horizontally;
   every animation keyframe must therefore preserve the `-50%`
   translate, otherwise the badge would jump back to the left edge
   while the keyframe runs. */
.cmp-slot[data-result="winner"]::after,
.cmp-slot[data-result="loser"]::after {
    position: absolute;
    top: -13px;
    left: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 800;
    line-height: 1;
    border-radius: 50%;
    z-index: 5;
    pointer-events: none;
    /* The 3px outer ring uses the page background colour so the badge
       reads as "floating above" the card instead of "stuck to" the
       border, even when the card border itself is a glowing colour. */
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.5),
        0 0 0 3px rgba(13, 17, 23, 1);
}

/* Winner badge — bright, animated, centred up top */
.cmp-slot[data-result="winner"]::after {
    content: '★';
    background: linear-gradient(135deg, #4adba2 0%, #2ba76e 100%);
    box-shadow:
        0 4px 12px rgba(61, 220, 151, 0.45),
        0 0 0 3px rgba(13, 17, 23, 1);
    transform: translateX(-50%);
    animation: cmpWinnerBadgeIn 700ms cubic-bezier(0.34, 1.56, 0.64, 1) both,
               cmpWinnerBadgePulse 2.4s ease-in-out 700ms infinite;
}

/* Loser badge — muted, fades in once, no pulse. The "▼" reads as
   "lower" / "second place" without being mean-spirited. */
.cmp-slot[data-result="loser"]::after {
    content: '▼';
    background: linear-gradient(135deg, rgba(255, 130, 130, 0.85) 0%, rgba(200, 80, 80, 0.85) 100%);
    font-size: 0.7rem;
    box-shadow:
        0 3px 10px rgba(255, 107, 107, 0.32),
        0 0 0 3px rgba(13, 17, 23, 1);
    transform: translateX(-50%);
    /* Slightly smaller than the winner so the visual hierarchy stays
       intact (winner draws the eye first). */
    width: 24px;
    height: 24px;
    top: -11px;
    opacity: 0.85;
    animation: cmpLoserBadgeIn 500ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes cmpSlotWinnerEnter {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(61, 220, 151, 0);
    }
    55% {
        transform: scale(1.015);
        box-shadow: 0 0 38px rgba(61, 220, 151, 0.42);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 22px rgba(61, 220, 151, 0.18);
    }
}
@keyframes cmpSlotWinnerPulse {
    0%, 100% { box-shadow: 0 0 18px rgba(61, 220, 151, 0.14); }
    50%      { box-shadow: 0 0 28px rgba(61, 220, 151, 0.30); }
}
@keyframes cmpWinnerBadgeIn {
    0%   { transform: translateX(-50%) scale(0) rotate(-180deg); opacity: 0; }
    100% { transform: translateX(-50%) scale(1) rotate(0deg);    opacity: 1; }
}
/* Subtle pulse on the winner badge — uses both translateX (to keep
   the centring) and scale (the actual visual effect). 4% scale at
   the peak is enough to read as "alive" without becoming distracting. */
@keyframes cmpWinnerBadgePulse {
    0%, 100% { transform: translateX(-50%) scale(1);    box-shadow: 0 4px 12px rgba(61, 220, 151, 0.45), 0 0 0 3px rgba(13, 17, 23, 1); }
    50%      { transform: translateX(-50%) scale(1.06); box-shadow: 0 6px 18px rgba(61, 220, 151, 0.65), 0 0 0 3px rgba(13, 17, 23, 1); }
}
@keyframes cmpLoserBadgeIn {
    0%   { transform: translateX(-50%) translateY(-6px); opacity: 0; }
    100% { transform: translateX(-50%) translateY(0);    opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) {
    .cmp-slot[data-result="winner"] { animation: none; }
    .cmp-slot[data-result="winner"]::after,
    .cmp-slot[data-result="loser"]::after { animation: none; }
}

/* ---------- Empty state inside a slot ---------------------------------- */
.cmp-slot__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.7rem;
    padding: 0.5rem;
}
.cmp-slot[data-state="filled"]  .cmp-slot__empty,
.cmp-slot[data-state="loading"] .cmp-slot__empty,
.cmp-slot[data-state="error"]   .cmp-slot__empty { display: none; }

.cmp-slot__empty-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--pv-bg-elevated-3, rgba(255,255,255,0.08));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--pv-text-dim, rgba(255,255,255,0.38));
    font-size: 1.15rem;
}
.cmp-slot__empty-msg {
    margin: 0;
    color: var(--pv-text-muted, rgba(255,255,255,0.62));
    font-size: 0.92rem;
    font-weight: 600;
}

/* Search input + button.
   IMPORTANT: do NOT set `overflow: hidden` on the form. The autocomplete
   dropdown (.autocomplete-results) is appended inside the form by
   compare.js, positioned absolutely below the input. Any `overflow:
   hidden` on an ancestor would clip it to the input's height and the
   suggestions would be invisible (which is exactly the bug we hit on
   the first ship -- screenshot showed an empty search box because the
   list was being painted but immediately cropped to 0px). The pill
   look is preserved by giving the input AND the button each their own
   border-radius half so the rounded outer shape still reads cleanly. */
.cmp-search {
    position: relative;
    display: flex;
    width: min(100%, 340px);
    background: var(--pv-bg-elevated-3, rgba(255,255,255,0.08));
    border: 1px solid var(--pv-border-strong, rgba(255,255,255,0.16));
    border-radius: var(--pv-radius-pill, 999px);
    transition: 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cmp-search:focus-within {
    border-color: var(--pv-accent, #4f8bff);
    box-shadow: 0 0 0 3px rgba(79, 139, 255, 0.18);
}
.cmp-search__input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    color: var(--pv-text, #f0f2f5);
    padding: 0.55rem 0.95rem;
    font-size: 0.92rem;
    outline: none;
    /* Round only the LEFT side so the input matches the pill's left
       half. The right side is square so it abuts the button cleanly. */
    border-top-left-radius: var(--pv-radius-pill, 999px);
    border-bottom-left-radius: var(--pv-radius-pill, 999px);
}
.cmp-search__input::placeholder {
    color: var(--pv-text-dim, rgba(255,255,255,0.38));
}
.cmp-search__btn {
    flex-shrink: 0;
    background: var(--pv-accent, #4f8bff);
    color: #fff;
    border: 0;
    padding: 0 1.1rem;
    cursor: pointer;
    transition: 180ms cubic-bezier(0.22, 1, 0.36, 1);
    /* Round only the RIGHT side so the button matches the pill's right
       half. The left side is square so it abuts the input cleanly. */
    border-top-right-radius: var(--pv-radius-pill, 999px);
    border-bottom-right-radius: var(--pv-radius-pill, 999px);
}
.cmp-search__btn:hover { background: var(--pv-accent-strong, #3b6fe0); }
.cmp-search__btn:disabled { opacity: 0.5; cursor: progress; }

/* Autocomplete dropdown.
   Lives inside .cmp-search and is positioned absolutely just below the
   input. We give it a real card-style background + border + shadow so
   it visually detaches from the form (the global .autocomplete-results
   styles in styles.css were tuned for the homepage hero where the
   parent already has a dark frame; on the comparison slot the bare
   list-group looked too washed out against the slot background). */
.cmp-search .autocomplete-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 50;
    text-align: left;
    /* Cap the height so a wide query that returns 10+ rows can scroll
       inside the dropdown instead of pushing the comparison cards off
       the bottom of the viewport. */
    max-height: 340px;
    overflow-y: auto;
    background: #1A1C25;
    border: 1px solid var(--pv-border-strong, rgba(255,255,255,0.16));
    border-radius: var(--pv-radius, 12px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
}
/* Override the global .list-group-item dark theme so each suggestion
   row sits flush inside our card-style dropdown. */
.cmp-search .autocomplete-results .list-group {
    background: transparent;
    border: 0;
    border-radius: var(--pv-radius, 12px);
}
.cmp-search .autocomplete-results .list-group-item {
    background: transparent;
    color: var(--pv-text, #f0f2f5);
    border: 0;
    border-bottom: 1px solid var(--pv-border, rgba(255,255,255,0.08));
    padding: 0.55rem 0.85rem;
    font-size: 0.85rem;
    transition: background 120ms ease;
}
.cmp-search .autocomplete-results .list-group-item:last-child { border-bottom: 0; }
.cmp-search .autocomplete-results .list-group-item-action:hover,
.cmp-search .autocomplete-results .list-group-item-action:focus,
.cmp-search .autocomplete-results .list-group-item-action.active {
    background: var(--pv-bg-elevated-3, rgba(255,255,255,0.08));
    color: #fff;
}
.cmp-search .autocomplete-results .list-group-item strong { color: #fff; font-weight: 700; }
.cmp-search .autocomplete-results .badge { font-size: 0.66rem; vertical-align: middle; }
.cmp-search .autocomplete-results .text-muted { color: var(--pv-text-muted, rgba(255,255,255,0.62)) !important; }

/* ---------- Filled state: mini-hero card ------------------------------- */
.cmp-slot__filled { display: none; }
.cmp-slot[data-state="filled"] .cmp-slot__filled { display: block; }

.cmp-mini-hero {
    position: relative;
    border-radius: var(--pv-radius, 12px);
    overflow: hidden;
}
.cmp-mini-hero__bg {
    position: absolute;
    inset: 0;
    background: var(--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%));
    opacity: 0.7;
    z-index: 0;
}
.cmp-mini-hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.95rem;
    align-items: center;
    padding: 0.4rem 0.4rem 0.6rem 0.4rem;
}
.cmp-mini-hero__remove {
    position: absolute;
    top: -0.1rem;
    right: -0.1rem;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid var(--pv-border, rgba(255,255,255,0.08));
    color: var(--pv-text-muted, rgba(255,255,255,0.62));
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cmp-mini-hero__remove:hover {
    background: var(--pv-danger, #ff6b6b);
    color: #fff;
    border-color: var(--pv-danger, #ff6b6b);
}
.cmp-mini-hero__tier {
    width: 64px;
    height: 64px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
}
.cmp-mini-hero__main { min-width: 0; }
.cmp-mini-hero__name-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.15rem;
    flex-wrap: wrap;
}
.cmp-mini-hero__flag .fi {
    font-size: 1.05rem;
    border-radius: 2px;
    box-shadow: var(--pv-shadow-1, 0 1px 2px rgba(0,0,0,0.3));
}
.cmp-mini-hero__name {
    font-family: var(--font-secondary, 'Montserrat', sans-serif);
    font-weight: 800;
    font-size: clamp(1rem, 2.4vw, 1.25rem);
    color: var(--pv-text, #f0f2f5);
    text-decoration: none;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.cmp-mini-hero__name:hover { color: var(--pv-accent, #4f8bff); }
.cmp-mini-hero__status {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.5rem;
    background: rgba(61, 220, 151, 0.12);
    color: var(--pv-success, #3ddc97);
    border: 1px solid rgba(61, 220, 151, 0.3);
    border-radius: var(--pv-radius-pill, 999px);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.cmp-mini-hero__status[data-state="banned"] {
    background: rgba(255, 107, 107, 0.12);
    color: var(--pv-danger, #ff6b6b);
    border-color: rgba(255, 107, 107, 0.3);
}
.cmp-mini-hero__status[data-state="temp_banned"] {
    background: rgba(255, 200, 87, 0.12);
    color: var(--pv-warn, #ffc857);
    border-color: rgba(255, 200, 87, 0.3);
}
.cmp-mini-hero__status[data-state="dormant"] {
    background: rgba(255, 255, 255, 0.06);
    color: var(--pv-text-dim, rgba(255,255,255,0.38));
    border-color: var(--pv-border, rgba(255,255,255,0.08));
}
.cmp-mini-hero__status[data-state="live"] {
    background: rgba(168, 107, 255, 0.12);
    color: var(--pv-purple, #a86bff);
    border-color: rgba(168, 107, 255, 0.3);
}
.cmp-mini-hero__sub {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: baseline;
    color: var(--pv-text-muted, rgba(255,255,255,0.62));
    font-size: 0.78rem;
    margin-bottom: 0.45rem;
}
.cmp-mini-hero__sub > span:empty { display: none; }
.cmp-mini-hero__clan { color: var(--pv-text-secondary, rgba(255,255,255,0.78)); font-weight: 600; }
.cmp-mini-hero__tier-name { color: var(--pv-text-secondary, rgba(255,255,255,0.78)); font-weight: 700; }
.cmp-mini-hero__rp { color: var(--pv-accent, #4f8bff); font-weight: 700; }

.cmp-mini-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.cmp-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    padding: 0.2rem 0.55rem;
    background: var(--pv-bg-elevated-2, rgba(255,255,255,0.05));
    border: 1px solid var(--pv-border, rgba(255,255,255,0.08));
    border-radius: var(--pv-radius-pill, 999px);
    font-size: 0.74rem;
    color: var(--pv-text-muted, rgba(255,255,255,0.62));
}
.cmp-chip i { color: var(--pv-text-dim, rgba(255,255,255,0.38)); font-size: 0.7rem; }
.cmp-chip__val {
    color: var(--pv-text, #f0f2f5);
    font-weight: 700;
}
.cmp-chip__lbl {
    color: var(--pv-text-dim, rgba(255,255,255,0.38));
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ---------- Loading skeleton inside a slot ----------------------------- */
.cmp-slot__loading {
    display: none;
    grid-template-columns: auto 1fr;
    gap: 0.95rem;
    align-items: center;
    padding: 0.4rem;
}
.cmp-slot[data-state="loading"] .cmp-slot__loading { display: grid; }

.cmp-skel {
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.04) 100%);
    background-size: 200% 100%;
    animation: cmpShimmer 1.5s ease-in-out infinite;
    border-radius: var(--pv-radius-sm, 6px);
}
.cmp-skel--avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
}
.cmp-skel-lines { display: flex; flex-direction: column; gap: 0.5rem; }
.cmp-skel--line { height: 12px; width: 100%; }
.cmp-skel--line-lg { height: 18px; width: 65%; }
.cmp-skel--line-sm { height: 10px; width: 40%; }
@keyframes cmpShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---------- Error state inside a slot ---------------------------------- */
.cmp-slot__error {
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.55rem;
    color: var(--pv-text-muted, rgba(255,255,255,0.62));
}
.cmp-slot[data-state="error"] .cmp-slot__error { display: flex; }
.cmp-slot__error i {
    font-size: 1.6rem;
    color: var(--pv-warn, #ffc857);
}
.cmp-slot__error-msg { margin: 0; font-weight: 600; }

/* ---------- VS badge between the two slots ----------------------------- */
.cmp-vs {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    pointer-events: none;
}
.cmp-vs__inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pv-accent, #4f8bff), var(--pv-purple, #a86bff));
    color: #fff;
    font-family: var(--font-secondary, 'Montserrat', sans-serif);
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: 0.05em;
    box-shadow: 0 6px 18px rgba(79, 139, 255, 0.35);
    border: 3px solid var(--pv-bg-page, #0d1117);
}

/* ---------- Empty hero (visible only when both slots are empty) -------- */
.cmp-empty-hero {
    text-align: center;
    padding: 1.6rem 1rem;
    margin-bottom: 1.25rem;
    background: var(--pv-bg-elevated, rgba(255,255,255,0.03));
    border: 1px dashed var(--pv-border-strong, rgba(255,255,255,0.16));
    border-radius: var(--pv-radius-lg, 18px);
}
.cmp-empty-hero__icon {
    font-size: 2rem;
    color: var(--pv-text-dim, rgba(255,255,255,0.38));
    margin-bottom: 0.5rem;
}
.cmp-empty-hero__title {
    margin: 0 0 0.4rem;
    font-family: var(--font-secondary, 'Montserrat', sans-serif);
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--pv-text, #f0f2f5);
}
.cmp-empty-hero__sub {
    margin: 0 auto 0.8rem;
    color: var(--pv-text-muted, rgba(255,255,255,0.62));
    max-width: 60ch;
    font-size: 0.9rem;
}
.cmp-empty-hero__sub-label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pv-text-dim, rgba(255,255,255,0.38));
}
.cmp-empty-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: center;
}
.cmp-empty-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    background: var(--pv-bg-elevated-2, rgba(255,255,255,0.05));
    border: 1px solid var(--pv-border, rgba(255,255,255,0.08));
    color: var(--pv-text-secondary, rgba(255,255,255,0.78));
    border-radius: var(--pv-radius-pill, 999px);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cmp-empty-chip:hover {
    background: var(--pv-bg-elevated-3, rgba(255,255,255,0.08));
    border-color: var(--pv-accent, #4f8bff);
    color: var(--pv-accent, #4f8bff);
    transform: translateY(-1px);
}
.cmp-empty-chip i { font-size: 0.7rem; opacity: 0.7; }

/* ---------- Mode bar (Total / Normal / Ranked) ------------------------- */
.cmp-mode-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.7rem;
    padding: 0.65rem 0.85rem;
    background: var(--pv-bg-elevated, rgba(255,255,255,0.03));
    border: 1px solid var(--pv-border, rgba(255,255,255,0.08));
    border-radius: var(--pv-radius, 12px);
    margin-bottom: 1rem;
}
.cmp-mode-bar__label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pv-text-muted, rgba(255,255,255,0.62));
}
.cmp-mode-bar__hint {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--pv-text-dim, rgba(255,255,255,0.38));
    font-size: 0.74rem;
    margin-left: auto;
}
.cmp-mode-switch {
    display: inline-flex;
    background: var(--pv-bg-elevated-2, rgba(255,255,255,0.05));
    border: 1px solid var(--pv-border, rgba(255,255,255,0.08));
    border-radius: var(--pv-radius-pill, 999px);
    padding: 3px;
    overflow: hidden;
}
.cmp-mode-switch__opt {
    background: transparent;
    border: 0;
    color: var(--pv-text-muted, rgba(255,255,255,0.62));
    padding: 0.32rem 0.85rem;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--pv-radius-pill, 999px);
    transition: 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cmp-mode-switch__opt:hover { color: var(--pv-text, #f0f2f5); }
.cmp-mode-switch__opt.active {
    background: var(--pv-accent, #4f8bff);
    color: #fff;
}
.cmp-mode-switch__opt:focus-visible {
    outline: 2px solid var(--pv-accent, #4f8bff);
    outline-offset: 2px;
}

/* ---------- Scoreboard (categories won) --------------------------------
   Layout grid:  [ A counter pill + meta ] [ verdict pill + ties ] [ B counter pill + meta ]
   The big numeric pills sit on the outside so they're the first thing
   the eye locks onto; the verdict pill in the middle delivers the
   one-line headline ("Player A leads by 4 / Dead even / ..."); the
   ties counter is a small caption underneath the verdict.
   ---------------------------------------------------------------------- */
.cmp-scoreboard {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    background: var(--pv-bg-elevated, rgba(255,255,255,0.03));
    border: 1px solid var(--pv-border, rgba(255,255,255,0.08));
    border-radius: var(--pv-radius, 12px);
    align-items: center;
}
.cmp-scoreboard__cell {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}
/* Side A is unstyled here -- the default `justify-content: flex-start`
   already packs the pill against the LEFT edge of its 1fr column. */
.cmp-scoreboard__cell[data-side="b"] {
    /* Side B mirrors side A: pill flush to the RIGHT edge, meta to its
       LEFT. We use `flex-direction: row-reverse` to swap the visual
       order of the two children (DOM stays count-block → meta), and
       `justify-content: flex-start` to push the whole group toward
       the visual RIGHT.
       NOTE: in `row-reverse` flex direction, `flex-start` is the
       visual RIGHT (start of the right-to-left main axis). The
       previous version used `flex-end` which in `row-reverse` is
       the visual LEFT — that's why the right cell's pill wasn't
       hugging the cell's right edge, making the layout look
       lopsided when compared to the perfectly-left-aligned A cell
       (2026-04-22 polish). */
    flex-direction: row-reverse;
    justify-content: flex-start;
}
.cmp-scoreboard__count-block {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    padding: 0.35rem 0.85rem;
    background: var(--pv-accent, #4f8bff);
    color: #fff;
    border-radius: var(--pv-radius-pill, 999px);
    line-height: 1;
    transition: 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cmp-scoreboard__cell[data-side="b"] .cmp-scoreboard__count-block {
    background: var(--pv-purple, #a86bff);
}
.cmp-scoreboard__count {
    font-family: var(--font-secondary, 'Montserrat', sans-serif);
    font-weight: 800;
    font-size: 1.45rem;
}
.cmp-scoreboard__count-of {
    font-size: 0.85rem;
    font-weight: 600;
    opacity: 0.7;
}
.cmp-scoreboard__cell.is-leader .cmp-scoreboard__count-block {
    box-shadow: 0 0 0 4px rgba(79, 139, 255, 0.22), 0 6px 18px rgba(79, 139, 255, 0.25);
    transform: scale(1.04);
}
.cmp-scoreboard__cell[data-side="b"].is-leader .cmp-scoreboard__count-block {
    box-shadow: 0 0 0 4px rgba(168, 107, 255, 0.22), 0 6px 18px rgba(168, 107, 255, 0.25);
}
.cmp-scoreboard__meta {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}
.cmp-scoreboard__cell[data-side="b"] .cmp-scoreboard__meta {
    align-items: flex-end;
    text-align: right;
}
.cmp-scoreboard__name {
    font-family: var(--font-secondary, 'Montserrat', sans-serif);
    font-weight: 700;
    color: var(--pv-text, #f0f2f5);
    font-size: 0.95rem;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 28vw;
}
.cmp-scoreboard__lbl {
    color: var(--pv-text-muted, rgba(255,255,255,0.62));
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1;
}
.cmp-scoreboard__divider {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.75rem;
    text-align: center;
    border-left: 1px solid var(--pv-border, rgba(255,255,255,0.08));
    border-right: 1px solid var(--pv-border, rgba(255,255,255,0.08));
    min-width: 0;
}
.cmp-scoreboard__verdict {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.32rem 0.85rem;
    background: var(--pv-bg-elevated-2, rgba(255,255,255,0.05));
    color: var(--pv-text, #f0f2f5);
    border: 1px solid var(--pv-border, rgba(255,255,255,0.08));
    border-radius: var(--pv-radius-pill, 999px);
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    transition: 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cmp-scoreboard__verdict strong { font-weight: 800; color: #fff; }
.cmp-scoreboard__verdict[data-state="leader-a"] {
    background: rgba(79, 139, 255, 0.14);
    border-color: rgba(79, 139, 255, 0.45);
    color: var(--pv-accent, #4f8bff);
}
.cmp-scoreboard__verdict[data-state="leader-a"] strong { color: var(--pv-accent, #4f8bff); }
.cmp-scoreboard__verdict[data-state="leader-b"] {
    background: rgba(168, 107, 255, 0.14);
    border-color: rgba(168, 107, 255, 0.45);
    color: var(--pv-purple, #a86bff);
}
.cmp-scoreboard__verdict[data-state="leader-b"] strong { color: var(--pv-purple, #a86bff); }
.cmp-scoreboard__verdict[data-state="tied"] {
    background: rgba(255, 200, 87, 0.14);
    border-color: rgba(255, 200, 87, 0.4);
    color: var(--pv-warn, #ffc857);
}
.cmp-scoreboard__verdict[data-state="pending"] {
    color: var(--pv-text-dim, rgba(255,255,255,0.38));
}
.cmp-scoreboard__ties {
    color: var(--pv-text-muted, rgba(255,255,255,0.62));
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.cmp-scoreboard__ties strong {
    color: var(--pv-text, #f0f2f5);
    font-weight: 800;
    font-size: 0.85rem;
}

/* ---------- Comparison groups ------------------------------------------ */
.cmp-results {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.cmp-group {
    background: var(--pv-bg-elevated, rgba(255,255,255,0.03));
    border: 1px solid var(--pv-border, rgba(255,255,255,0.08));
    border-radius: var(--pv-radius-lg, 18px);
    padding: 1rem 1.1rem;
    /* Subtle staggered fade-in so the page reveals one group at a time
       instead of a wall of stats appearing at once. The `:nth-child`
       delays cap at 6 children — one per metric group today, with a
       fallback that stops adding delay if a future revamp adds more
       (so we never get a 2-second total reveal). */
    animation: cmpGroupMount 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.cmp-results > .cmp-group:nth-child(1) { animation-delay: 60ms; }
.cmp-results > .cmp-group:nth-child(2) { animation-delay: 130ms; }
.cmp-results > .cmp-group:nth-child(3) { animation-delay: 200ms; }
.cmp-results > .cmp-group:nth-child(4) { animation-delay: 260ms; }
.cmp-results > .cmp-group:nth-child(5) { animation-delay: 320ms; }
.cmp-results > .cmp-group:nth-child(6) { animation-delay: 380ms; }
@keyframes cmpGroupMount {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .cmp-group { animation: none; }
}
.cmp-group__head {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.7rem;
    row-gap: 0.1rem;
    align-items: center;
    margin-bottom: 0.85rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--pv-border, rgba(255,255,255,0.08));
}
.cmp-group__head > i {
    grid-row: span 2;
    font-size: 1.4rem;
    color: var(--pv-accent, #4f8bff);
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(79, 139, 255, 0.12);
}
.cmp-group__title {
    margin: 0;
    font-family: var(--font-secondary, 'Montserrat', sans-serif);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--pv-text, #f0f2f5);
    line-height: 1.2;
}
.cmp-group__sub {
    margin: 0;
    color: var(--pv-text-muted, rgba(255,255,255,0.62));
    font-size: 0.78rem;
}

/* ---------- Stat row (3-col layout: A | label+bar | B) ----------------- */
.cmp-row {
    display: grid;
    grid-template-columns: 1fr 1.25fr 1fr;
    align-items: center;
    column-gap: 0.7rem;
    padding: 0.55rem 0.4rem;
    margin: 0 -0.4rem; /* pull the hover halo flush with the card edge */
    border-bottom: 1px dashed var(--pv-border, rgba(255,255,255,0.08));
    border-radius: var(--pv-radius-sm, 6px);
    transition: background 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cmp-row:last-child { border-bottom: 0; }
/* Subtle row hover: brings the eye to a single row when the user
   sweeps down a group of stats. Pure visual feedback -- rows are not
   clickable today, but the hover helps with horizontal scanning when
   reading the bar that connects two values. */
@media (hover: hover) {
    .cmp-row:hover {
        background: rgba(255, 255, 255, 0.025);
    }
}

.cmp-row__cell {
    display: flex;
    flex-direction: row;
    align-items: center;
    /* Cell A: value on the LEFT (outer edge), hint on its RIGHT (inner
       edge, between value and centre bar). DOM order matches the
       visual order, so we just pack to flex-start. */
    justify-content: flex-start;
    gap: 0.55rem;
    min-width: 0;
    /* Same min-height for every row so the page reads as a tidy table.
       The Tier row contains a 32-px tier badge (renderTierCell) and
       was previously ~14 px taller than the text-only rows above and
       below it. We now reserve a 36-px content area on every cell so
       short numeric values like "2.97" sit at exactly the same height
       as the tier badge -- the page now scans like a spreadsheet
       column instead of a list with hiccups (2026-04-22 polish per
       user request). */
    min-height: 36px;
    padding: 0.25rem 0.55rem;
    border-radius: var(--pv-radius-sm, 6px);
    transition: background 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Cell B: value on the RIGHT (outer edge), hint on its LEFT (inner
   edge). DOM order is `hint, value` so a flex-start alignment in the
   default `row` direction doesn't work -- we use flex-end so the
   pair is packed against the right edge. */
.cmp-row__cell[data-side="b"] { justify-content: flex-end; }

/* Three-state colour signal on each cell. We rely on COLOUR ALONE for
   the per-row outcome (no text badges) -- the user explicitly asked
   for less visual noise (2026-04-22). The 1px inset shadow doubles
   as a subtle border that survives on both light and dark wallpapers
   (custom hero backgrounds in claimed profiles can otherwise wash
   out a flat tint). */
.cmp-row__cell.is-winner {
    background: rgba(61, 220, 151, 0.10);
    box-shadow: inset 0 0 0 1px rgba(61, 220, 151, 0.28);
}
.cmp-row__cell.is-loser {
    background: rgba(255, 107, 107, 0.07);
    box-shadow: inset 0 0 0 1px rgba(255, 107, 107, 0.20);
}
.cmp-row__cell.is-tied {
    background: rgba(255, 200, 87, 0.07);
    box-shadow: inset 0 0 0 1px rgba(255, 200, 87, 0.22);
}

.cmp-row__val {
    font-family: var(--font-secondary, 'Montserrat', sans-serif);
    font-weight: 800;
    font-size: clamp(0.95rem, 1.6vw, 1.1rem);
    color: var(--pv-text, #f0f2f5);
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
/* Winner value text gets the full-strength accent green so the eye
   immediately locks onto it. Loser uses a soft red tint -- not so
   bright that a "-5% behind" feels like a defeat, but enough to
   visually pair with the cell's red wash. Tied uses amber to match
   the cell tint. */
.cmp-row__cell.is-winner .cmp-row__val { color: var(--pv-success, #3ddc97); }
.cmp-row__cell.is-loser  .cmp-row__val { color: rgba(255, 145, 145, 0.90); }
.cmp-row__cell.is-tied   .cmp-row__val { color: var(--pv-warn, #ffc857); }

/* Subtle "−25% behind" / "+24% ahead" / "5× less" hint shown next to
   the value (NOT below it). Both winner and loser get a hint so the
   row reads symmetrically: the winner sees how much they're ahead by,
   the loser sees how far behind they are. Dim + small on purpose --
   the value is the headline, the hint is secondary "context".
   Layout-wise the hint sits on the INNER edge of its cell (toward
   the centre bar), so for Player A the hint is to the RIGHT of the
   value and for Player B the hint is to the LEFT of the value. */
.cmp-row__hint {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    /* Tabular numerals so a column of "−12%", "−5%", "−87%" lines
       up cleanly to the eye. */
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    color: var(--pv-text-dim, rgba(255,255,255,0.45));
}
/* Tint the winner hint slightly green (matching the winner cell) and
   the loser hint slightly red (matching the loser cell), but kept
   muted so they don't compete with the bold value text next to them. */
.cmp-row__hint--win  { color: rgba(61, 220, 151, 0.70); }
.cmp-row__hint--loss { color: rgba(255, 145, 145, 0.65); }

/* Center column: stat label + comparison bar.
   The bar is built from two stacked elements so the colour for each side
   can be themed independently and the overlap looks natural. */
.cmp-row__center {
    text-align: center;
    min-width: 0;
}
.cmp-row__label {
    display: block;
    color: var(--pv-text-muted, rgba(255,255,255,0.62));
    font-size: 0.78rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
}
.cmp-row__label-help {
    color: var(--pv-text-dim, rgba(255,255,255,0.38));
    font-size: 0.65rem;
    font-weight: 400;
    display: block;
    margin-top: 0.05rem;
}
.cmp-row__bar {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    height: 6px;
    background: var(--pv-bg-elevated-2, rgba(255,255,255,0.05));
    border-radius: var(--pv-radius-pill, 999px);
    overflow: hidden;
}
.cmp-row__bar-a,
.cmp-row__bar-b {
    height: 100%;
    /* Mount animation: bars scale-in from 0 to their inline `width`
       value over ~500ms with a smooth ease. We use `transform` instead
       of animating `width` directly because:
         - GPU-accelerated → no jank on slower phones
         - We already have a `transition: width` (below) so any later
           width updates from a mode switch animate naturally. */
    transform-origin: 50% 50%;
    animation: cmpBarMount 540ms cubic-bezier(0.22, 1, 0.36, 1) both;
    transition: width 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cmp-row__bar-a { transform-origin: 100% 50%; } /* grow from the centre outward */
.cmp-row__bar-b { transform-origin: 0% 50%; }
@keyframes cmpBarMount {
    from { transform: scaleX(0); opacity: 0; }
    to   { transform: scaleX(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .cmp-row__bar-a, .cmp-row__bar-b { animation: none; }
}
.cmp-row__bar-a {
    margin-left: auto;
    background: var(--pv-accent, #4f8bff);
    border-radius: var(--pv-radius-pill, 999px) 0 0 var(--pv-radius-pill, 999px);
}
.cmp-row__bar-b {
    background: var(--pv-purple, #a86bff);
    border-radius: 0 var(--pv-radius-pill, 999px) var(--pv-radius-pill, 999px) 0;
}
/* When a side has 0% width, force the corner radius back so the other
   side gets a clean pill shape instead of a sharp corner. */
.cmp-row__bar-a[style*="width: 0%"] + .cmp-row__bar-b,
.cmp-row__bar-b:first-child {
    border-radius: var(--pv-radius-pill, 999px);
}

/* Tied row marker. We give the bar track a slightly brighter neutral
   colour so the "no winner" state still feels distinct from a normal
   row — but the actual outcome cue lives on the cell itself via
   `.is-tied` (amber tint), which is rendered directly by the JS and
   handled in the cell rules above. */
.cmp-row[data-tied="true"] .cmp-row__bar {
    background: var(--pv-bg-elevated-3, rgba(255,255,255,0.08));
}

/* Empty placeholder rendered when ONE side has the data and the other
   doesn't — keeps the column heights symmetric. */
.cmp-row__cell--empty .cmp-row__val {
    color: var(--pv-text-dim, rgba(255,255,255,0.38));
    font-weight: 600;
}

/* Highlight bar on the row when only ONE slot is filled — the values
   collapse to a single column so the layout still reads. */
.cmp-row[data-mode="single"] .cmp-row__bar {
    visibility: hidden;
}

/* ---------- Foot hint + links ------------------------------------------ */
.cmp-foot-hint {
    margin: 1rem 0 0;
    color: var(--pv-text-muted, rgba(255,255,255,0.62));
    font-size: 0.82rem;
    text-align: center;
}
.cmp-foot-hint i { color: var(--pv-info, #57d6ff); margin-right: 0.25rem; }
.cmp-link {
    color: var(--pv-accent, #4f8bff);
    font-weight: 600;
    text-decoration: none;
}
.cmp-link:hover { text-decoration: underline; }

/* ---------- Responsive layout ------------------------------------------
   Below 768px the side-by-side grid would crush the slot cards into
   tiny columns. Stack them vertically with a smaller VS chip in
   between. The comparison rows below stay 3-col because the values
   are short numbers (4 chars max) and reading two columns of stats
   on mobile is exactly the use-case the user asked for.
   ---------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .cmp-slots {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }
    .cmp-vs {
        min-width: 0;
        margin: -0.2rem 0;
    }
    .cmp-vs__inner {
        width: 40px;
        height: 40px;
        font-size: 0.85rem;
        border-width: 2px;
    }
    .cmp-slot { min-height: 0; padding: 0.85rem; }
    .cmp-slot__side-label { font-size: 0.6rem; }

    .cmp-mode-bar { gap: 0.5rem; }
    .cmp-mode-bar__hint { display: none; }

    .cmp-scoreboard {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 0.5rem;
    }
    .cmp-scoreboard__cell { justify-content: center; }
    .cmp-scoreboard__cell[data-side="b"] {
        justify-content: center;
        flex-direction: row; /* undo the row-reverse from desktop */
    }
    .cmp-scoreboard__cell[data-side="b"] .cmp-scoreboard__meta {
        align-items: flex-start;
        text-align: left;
    }
    .cmp-scoreboard__divider {
        border: 0;
        border-top: 1px solid var(--pv-border, rgba(255,255,255,0.08));
        border-bottom: 1px solid var(--pv-border, rgba(255,255,255,0.08));
        padding: 0.5rem 0;
    }
    .cmp-scoreboard__verdict { font-size: 0.78rem; padding: 0.28rem 0.7rem; }
    .cmp-scoreboard__count { font-size: 1.2rem; }

    .cmp-row {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "center center"
            "a b";
        column-gap: 0.5rem;
        /* The desktop min-height (36px) is comfortable when the centre
           label + bar share the row, but on mobile the centre slot
           moves above into its own grid row, so the cells only need
           to be as tall as the value+hint pair. Drop the floor so we
           don't waste vertical space. */
        min-height: 0;
    }
    .cmp-row__cell {
        min-height: 0;
        /* Allow the hint to wrap below the value on very narrow
           viewports (≤ 360 px) so neither gets clipped. */
        flex-wrap: wrap;
        gap: 0.3rem;
    }
    .cmp-row__cell[data-side="a"] { grid-area: a; }
    .cmp-row__cell[data-side="b"] { grid-area: b; }
    .cmp-row__center { grid-area: center; margin-bottom: 0.25rem; }
    .cmp-row__val { font-size: 0.95rem; }
    .cmp-row__hint { font-size: 0.65rem; }

    .cmp-mini-hero__inner { grid-template-columns: 56px 1fr; padding: 0.3rem; }
    .cmp-mini-hero__tier { width: 56px; height: 56px; }
    .cmp-mini-hero__name { font-size: 1rem; }
}

/* Small-phone tweak — drop the chips' label so the row breathes. */
@media (max-width: 380px) {
    .cmp-chip__lbl { display: none; }
    .cmp-mini-hero__chips { gap: 0.25rem; }
    .cmp-chip { padding: 0.18rem 0.45rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .cmp-skel { animation: none; }
    .cmp-row__bar-a, .cmp-row__bar-b { transition: none; }
}