/* ===========================================================
   Player profile page (`/profile/{steamId}`) — local additions
   on top of glass-card, stat-card, market-tab, inv-showcase-card,
   inv-stat-chip, server-table-glassy, etc. New CSS here covers
   patterns the existing component classes do not:
       - Radial dial gauge (KPI dials on the Stats tab)
       - Hero card treatment + large avatar
       - Sticky tab strip helper
       - Performance-tier color classes
       - Clickable per-server scorecard + active state
       - Loadout empty-slot placeholder
       - Playtime bar row (Activity tab)
       - Timeline rail (Activity tab session list)
       - Empty state container
       - Tab body fade-in
       - Globally-banned banner pulse
   All classes use the `.profile-` prefix.
   No font-size declarations — sizing belongs in markup via fs-*.
   =========================================================== */

/* ---- Radial dial (conic-gradient) ---- */
.profile-dial {
    --profile-dial-pct: 0;
    --profile-dial-color: #0dcaf0;
    --profile-dial-track: rgba(255, 255, 255, 0.06);

    width: 6.5rem;
    height: 6.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: conic-gradient(
        var(--profile-dial-color) calc(var(--profile-dial-pct) * 1%),
        var(--profile-dial-track) 0
    );
    box-shadow: 0 0 18px rgba(13, 202, 240, 0.05);
}

    /* Center cutout — turns the disc into a donut so the value sits in a clean well. */
    .profile-dial::before {
        content: "";
        position: absolute;
        inset: 0.5rem;
        background: rgba(15, 22, 33, 0.92);
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.06);
    }

.profile-dial-value {
    position: relative;
    z-index: 1;
    color: #fff;
    text-align: center;
    line-height: 1;
}

.profile-dial-label {
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Larger / smaller dial sizes. The ::before inset stays proportional to the
   dial diameter so the donut ring keeps its visual weight. */
.profile-dial-lg {
    width: 11rem;
    height: 11rem;
}

    .profile-dial-lg::before {
        inset: 0.85rem;
    }

/* ---- Hero card treatment ---- */
.profile-hero {
    background:
        radial-gradient(circle at 100% 0%, rgba(13, 202, 240, 0.14), transparent 55%),
        radial-gradient(circle at 0% 100%, rgba(255, 203, 49, 0.06), transparent 55%),
        rgba(15, 22, 33, 0.7);
    overflow: hidden;
    position: relative;
}

.profile-hero-avatar {
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
    border: 1px solid rgba(13, 202, 240, 0.25);
    box-shadow: 0 0 12px rgba(13, 202, 240, 0.12), inset 0 0 0 1px rgba(15, 22, 33, 0.85);
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(15, 22, 33, 0.85);
}

.profile-hero-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 575.98px) {
    .profile-hero-avatar {
        width: 6.5rem;
        height: 6.5rem;
    }
}

/* ---- Sticky tab strip ---- */
.profile-tabs-sticky {
    position: sticky;
    top: 0;
    z-index: 5;
    background: rgba(15, 22, 33, 0.85);
    backdrop-filter: blur(14px);
}

/* ---- Globally banned banner — pulse glow ---- */
.profile-banned-banner {
    border-color: rgba(255, 19, 19, 0.45) !important;
    box-shadow: 0 0 24px rgba(255, 19, 19, 0.18);
    animation: profile-banned-pulse 2.4s ease-in-out infinite;
}

@keyframes profile-banned-pulse {
    0%, 100% { box-shadow: 0 0 24px rgba(255, 19, 19, 0.18); }
    50%      { box-shadow: 0 0 36px rgba(255, 19, 19, 0.36); }
}

/* ---- Performance tier color classes ---- */
.profile-tier-good { color: #19ee19 !important; }
.profile-tier-mid  { color: #fff !important; }
.profile-tier-bad  { color: #ffcb31 !important; }

/* ---- Per-server scorecard (clickable card grid + active state) ---- */
.profile-server-card {
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

    .profile-server-card:hover {
        transform: translateY(-2px);
        border-color: rgba(13, 202, 240, 0.4);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 16px rgba(13, 202, 240, 0.08);
    }

    .profile-server-card:focus-visible {
        outline: none;
        border-color: rgba(13, 202, 240, 0.6);
        box-shadow: 0 0 0 0.15rem rgba(13, 202, 240, 0.25);
    }

    .profile-server-card.active {
        border-color: rgba(13, 202, 240, 0.6);
        box-shadow: 0 8px 28px rgba(13, 202, 240, 0.2),
                    inset 0 0 0 1px rgba(13, 202, 240, 0.35);
    }

/* ---- Playtime bar row (Activity tab) ---- */
.profile-playtime-row {
    display: grid;
    grid-template-columns: minmax(8rem, 1fr) minmax(0, 3fr) minmax(5rem, auto);
    gap: 0.85rem;
    align-items: center;
    padding: 0.65rem 0.95rem;
    border-radius: 0.55rem;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 0.15s ease, border-color 0.15s ease;
}

    .profile-playtime-row:hover {
        background: rgba(13, 202, 240, 0.08);
        border-color: rgba(13, 202, 240, 0.25);
    }

.profile-playtime-track {
    height: 0.55rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    overflow: hidden;
    position: relative;
}

.profile-playtime-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(13, 202, 240, 0.5), rgba(13, 202, 240, 1));
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 575.98px) {
    .profile-playtime-row {
        grid-template-columns: 1fr auto;
    }

        .profile-playtime-row .profile-playtime-track {
            grid-column: 1 / -1;
        }
}

/* ---- Timeline (Activity tab session list) ---- */
.profile-timeline {
    position: relative;
    padding-left: 1.85rem;
}

    .profile-timeline::before {
        content: "";
        position: absolute;
        left: 0.6rem;
        top: 0.5rem;
        bottom: 0.5rem;
        width: 2px;
        background: linear-gradient(180deg, rgba(13, 202, 240, 0.45), rgba(13, 202, 240, 0.05));
    }

.profile-timeline-item {
    position: relative;
    margin-bottom: 0.85rem;
}

    .profile-timeline-item:last-child {
        margin-bottom: 0;
    }

.profile-timeline-dot {
    position: absolute;
    left: -1.6rem;
    top: 1rem;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    background: rgba(15, 22, 33, 0.95);
    border: 2px solid #0dcaf0;
    box-shadow: 0 0 8px rgba(13, 202, 240, 0.45);
}

/* ---- Empty state container ---- */
.profile-empty {
    padding: 2.5rem 1rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
}

.profile-empty-icon {
    opacity: 0.45;
    margin-bottom: 0.85rem;
}

/* ---- Tab body fade-in ---- */
.profile-tab-body {
    animation: profile-tab-fade-in 0.22s ease-out;
}

@keyframes profile-tab-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- Rarity color (Restricted only — Bootstrap has no purple utility) ---- */
.profile-rarity-restricted {
    background-color: #8e44ad !important;
    color: #fff;
}

/* ---- Roulette net P/L color helpers (text only) ---- */
.profile-roulette-pl-positive { color: #19ee19 !important; }
.profile-roulette-pl-negative { color: #ff5a5a !important; }
.profile-roulette-pl-neutral  { color: #fff !important; }

/* ===========================================================
   Hero banner — the player profile's only hero treatment.
   The base `.profile-hero` and `.profile-hero-avatar` rules above
   provide the shell; the rules below add the tier-tinted gradient,
   the chip strip dividers, and the icon-button styling for the
   Steam-profile + Share-profile buttons.

   Tier color is driven by `.profile-hero-tier-*` modifier classes
   (set from `HeroTierModifierCssClass` in PlayerProfile.razor.cs)
   which expose `--profile-tier-color` as an `r,g,b` triplet so any
   rule below can wrap it in `rgba(...)` at the opacity it wants.
   =========================================================== */

/* ---- Tier color modifier (drives layered gradient + avatar fill) ----
   `--profile-tier-color` is an `r,g,b` triplet so we can compose
   `rgba(var(--profile-tier-color), 0.18)` etc. throughout. */
.profile-hero-tier-default {
    --profile-tier-color: 13, 202, 240;
}

.profile-hero-tier-vip {
    --profile-tier-color: 25, 238, 25;
}

.profile-hero-tier-donate {
    --profile-tier-color: 255, 193, 7;
}

.profile-hero-tier-admin {
    --profile-tier-color: 255, 19, 19;
}

.profile-hero-tier-hadmin {
    --profile-tier-color: 255, 87, 51;
}

.profile-hero-tier-manager {
    --profile-tier-color: 33, 150, 243;
}

.profile-hero-tier-developer {
    --profile-tier-color: 142, 68, 173;
}

.profile-hero-tier-owner {
    --profile-tier-color: 184, 134, 11;
}

/* ---- Avatar tier rings (override border-color from .profile-hero-avatar) ---- */
.profile-hero-avatar-vip {
    border-color: rgba(25, 238, 25, 0.45);
    box-shadow: 0 0 16px rgba(25, 238, 25, 0.2), inset 0 0 0 1px rgba(15, 22, 33, 0.85);
}

.profile-hero-avatar-donate {
    border-color: rgba(255, 193, 7, 0.45);
    box-shadow: 0 0 16px rgba(255, 193, 7, 0.18), inset 0 0 0 1px rgba(15, 22, 33, 0.85);
}

.profile-hero-avatar-admin {
    border-color: rgba(255, 19, 19, 0.45);
    box-shadow: 0 0 16px rgba(255, 19, 19, 0.18), inset 0 0 0 1px rgba(15, 22, 33, 0.85);
}

.profile-hero-avatar-hadmin {
    border-color: rgba(255, 87, 51, 0.55);
    box-shadow: 0 0 18px rgba(255, 87, 51, 0.22), inset 0 0 0 1px rgba(15, 22, 33, 0.85);
}

.profile-hero-avatar-manager {
    border-color: rgba(33, 150, 243, 0.5);
    box-shadow: 0 0 16px rgba(33, 150, 243, 0.2), inset 0 0 0 1px rgba(15, 22, 33, 0.85);
}

.profile-hero-avatar-developer {
    border-color: rgba(142, 68, 173, 0.5);
    box-shadow: 0 0 18px rgba(142, 68, 173, 0.22), inset 0 0 0 1px rgba(15, 22, 33, 0.85);
}

.profile-hero-avatar-owner {
    border-color: rgba(184, 134, 11, 0.6);
    box-shadow: 0 0 20px rgba(184, 134, 11, 0.28), inset 0 0 0 1px rgba(15, 22, 33, 0.85);
}

/* ---- VIP badge (single highest tier, replaces N-per-server chips) ----
   `position: relative; overflow: hidden` so the ::before shine sweep
   stays clipped to the pill silhouette. Sized to read as a status
   indicator, not a CTA. */
.profile-vip-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(15, 22, 33, 0.6);
    color: #fff;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

    /* Diagonal shine stripe: sweeps across in 5s, sits off-screen the
       remaining 4s of the 9s loop so the badge feels alive without being
       distracting. Pseudo is pointer-events:none so it can't intercept
       hover or clicks. */
    .profile-vip-badge::before {
        content: "";
        position: absolute;
        top: -25%;
        bottom: -25%;
        left: -40%;
        width: 30%;
        background: linear-gradient(115deg,
            transparent 0%,
            rgba(255, 255, 255, 0.05) 35%,
            rgba(255, 255, 255, 0.25) 50%,
            rgba(255, 255, 255, 0.05) 65%,
            transparent 100%);
        transform: translateX(-150%);
        pointer-events: none;
        z-index: 0;
        animation: profile-vip-shine 9s ease-in-out infinite;
    }

@keyframes profile-vip-shine {
    0%   { transform: translateX(-150%); }
    55%  { transform: translateX(450%); }
    100% { transform: translateX(450%); }
}

.profile-vip-badge-vip {
    border-color: rgba(25, 238, 25, 0.55);
    background: linear-gradient(135deg, rgba(25, 238, 25, 0.24) 0%, rgba(25, 238, 25, 0.08) 100%);
    box-shadow: 0 0 18px rgba(25, 238, 25, 0.2);
}

.profile-vip-badge-donate {
    border-color: rgba(255, 193, 7, 0.6);
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.28) 0%, rgba(255, 152, 0, 0.12) 100%);
    box-shadow: 0 0 22px rgba(255, 193, 7, 0.2);
}

.profile-vip-badge-admin {
    border-color: rgba(255, 19, 19, 0.55);
    background: linear-gradient(135deg, rgba(255, 19, 19, 0.25) 0%, rgba(255, 19, 19, 0.08) 100%);
    box-shadow: 0 0 20px rgba(255, 19, 19, 0.18);
}

.profile-vip-badge-hadmin {
    border-color: rgba(255, 87, 51, 0.65);
    background: linear-gradient(135deg, rgba(255, 87, 51, 0.3) 0%, rgba(255, 87, 51, 0.1) 100%);
    box-shadow: 0 0 22px rgba(255, 87, 51, 0.22);
}

.profile-vip-badge-manager {
    border-color: rgba(33, 150, 243, 0.6);
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.28) 0%, rgba(33, 150, 243, 0.1) 100%);
    box-shadow: 0 0 22px rgba(33, 150, 243, 0.22);
}

.profile-vip-badge-developer {
    border-color: rgba(142, 68, 173, 0.7);
    background: linear-gradient(135deg, rgba(142, 68, 173, 0.32) 0%, rgba(142, 68, 173, 0.1) 100%);
    box-shadow: 0 0 22px rgba(142, 68, 173, 0.22);
}

.profile-vip-badge-owner {
    border-color: rgba(184, 134, 11, 0.8);
    background: linear-gradient(135deg, rgba(184, 134, 11, 0.4) 0%, rgba(120, 80, 0, 0.15) 100%);
    box-shadow: 0 0 26px rgba(184, 134, 11, 0.32);
}

/* ---- Hero banner — cinematic horizontal banner ----
   Layered gradient: tier-tint at top-left, info-cyan at bottom-right,
   over a deep glass base. The tier tint pulls the banner toward the
   player's status (gold for donate, red for admin, purple for dev)
   while the cyan keeps the brand grounded. */
.profile-hero-banner {
    background:
        radial-gradient(circle at 20% 20%, rgba(var(--profile-tier-color, 13, 202, 240), 0.18), transparent 55%),
        radial-gradient(circle at 80% 80%, rgba(13, 202, 240, 0.12), transparent 60%),
        rgba(15, 22, 33, 0.7);
}

/* Borderless inline stat (banner chip strip — playtime / 30-day playtime
   / member-since / last-seen / clan TAG+NAME). */
.profile-hero-banner-stat {
    display: inline-flex;
    align-items: center;
}

/* Vertical separators between consecutive chips in the banner stat strip.
   Adjacent-sibling combinator so the first chip stays unmarked; subsequent
   chips get a thin half-height white line preceding their content, giving
   the strip a credits-roll feel rather than floating fragments. */
.profile-hero-banner-stat + .profile-hero-banner-stat::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 1.4rem;
    margin: 0 1rem 0 0;
    background: rgba(255, 255, 255, 0.32);
}

/* SteamID inline-copy button — strips the default btn-link underline
   and adds a subtle hover/focus highlight. */
.profile-copy-btn {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    border: none;
    background: transparent;
}

    .profile-copy-btn:hover,
    .profile-copy-btn:focus {
        color: #0dcaf0;
        text-decoration: none;
    }

/* ---- Hero icon button (Steam-profile + Share-profile) ----
   Square 2.25rem icon button beside the persona name. Glass aesthetic
   (cyan border, dark glass bg, lift-on-hover) so it reads as an
   interactive surface. Icon size set in markup via Bootstrap `fs-*`. */
.profile-hero-steam-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(13, 202, 240, 0.25);
    background: rgba(15, 22, 33, 0.55);
    color: #0dcaf0;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

    .profile-hero-steam-btn:hover {
        border-color: rgba(13, 202, 240, 0.55);
        color: #0dcaf0;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), 0 0 12px rgba(13, 202, 240, 0.18);
    }

    .profile-hero-steam-btn:focus-visible {
        outline: none;
        border-color: rgba(13, 202, 240, 0.65);
        box-shadow: 0 0 0 0.15rem rgba(13, 202, 240, 0.3);
    }

/* ---- Mobile breakpoint sanity (hero only) ---- */
@media (max-width: 575.98px) {
    /* Chips wrap onto multiple lines on mobile, where vertical separators
       read as orphan bars. Hide them. */
    .profile-hero-banner-stat + .profile-hero-banner-stat::before {
        display: none;
    }
}

/* ============================================================
   Clan display (hero-only)
   ------------------------------------------------------------
   Stacked under the avatar inside the avatar's column.
   Constrained to avatar width so the block visually anchors
   to the avatar rather than spilling sideways.
   ============================================================ */

.profile-clan-stack-column {
    max-width: 9rem;
    flex-shrink: 0;
}

.profile-clan-stack-under-avatar {
    width: 100%;
}

.profile-clan-stack-kicker {
    letter-spacing: 0.12em;
    margin-bottom: 0.15rem;
}

.profile-clan-stack-tag {
    line-height: 1.1;
}

.profile-clan-stack-name {
    line-height: 1.2;
    word-break: break-word;
}


/* ============================================================
   Hitbox silhouette heat-map
   ============================================================ */
.profile-hitbox-silhouette {
    width: 11rem;
    aspect-ratio: 200 / 450;
    flex-shrink: 0;
}

.profile-hitbox-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.profile-hitbox-region {
    cursor: help;
    transition: filter 0.15s ease;
}

    .profile-hitbox-region:hover {
        filter: brightness(1.5) drop-shadow(0 0 3px rgba(13, 202, 240, 0.7));
    }

/* 2-column legend grid beneath the figure */
.profile-hitbox-legend {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem 1.5rem;
    width: 100%;
    max-width: 22rem;
}

.profile-hitbox-legend-item {
    display: grid;
    grid-template-columns: 0.65rem 1fr auto auto;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0;
}

.profile-hitbox-legend-dot {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 2px;
    flex-shrink: 0;
}

.profile-hitbox-legend-label {
    color: rgba(255, 255, 255, 0.8);
}

.profile-hitbox-legend-count {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #fff;
    text-align: right;
    min-width: 2.2rem;
}

.profile-hitbox-legend-pct {
    color: rgba(255, 255, 255, 0.45);
    font-variant-numeric: tabular-nums;
    text-align: right;
    min-width: 2.8rem;
}




/* ============================================================
   Stats tab layout
   ------------------------------------------------------------
   profile-stats-hero*    - flex row pairing fixed-width side
                            column (hitbox) with flexible main
                            column (stats table).
   profile-stats-table    - vertically compact stats table.
   profile-stats-section  - section heading row inside the table.
   profile-server-chip    - clickable per-server chip below.
   ============================================================ */

/* Compact server chip below the hero row. */
.profile-server-chip {
    flex: 0 0 auto;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.profile-server-chip:hover {
    transform: translateY(-1px);
    border-color: rgba(13, 202, 240, 0.5);
}

/* Hero row - side at content width, main fills the rest. */
.profile-stats-hero {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: stretch;
    margin-bottom: 0.5rem;
}

/* Vertical stack of top-level stat cards (header + hero + weekly/trend row +
   weapons). Without this gap the cards visually clump against each other. */
.profile-stats-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.profile-stats-hero-side {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Grid layout so the counter card (row 2) stretches to fill the remaining
   space below the rings grid (row 1) when the hitbox column on the left is
   taller. Flex with `flex: 1 1 auto` doesn't reliably make table cards grow,
   so use grid + 1fr for predictable height parity with the hitbox.
   Third row stays `auto` to accommodate optional content (e.g. the roulette
   card on the stats tab) without forcing it to share the stretched height. */
.profile-stats-hero-main {
    flex: 1 1 0;
    min-width: 0;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 1rem;
}

.profile-stats-hero-main > .glass-card {
    height: 100%;
}

@media (max-width: 767.98px) {
    .profile-stats-hero-side,
    .profile-stats-hero-main { flex: 1 1 100%; }
}

/* Tight stats table - half the vertical rhythm of default Bootstrap rows. */
.profile-stats-table .server-table > tbody > tr > td {
    padding: 0.3rem 0.6rem;
    vertical-align: middle;
}

/* Section header bar above each stats sub-table. */
.profile-stats-section-head {
    background: rgba(13, 202, 240, 0.1);
    color: #fff;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid rgba(13, 202, 240, 0.2);
}

/* Sub-column header inside the Combat table separating
   "generic counters" (left) from "calculated values" (right). */
.profile-stats-subhead > th {
    background: rgba(255, 255, 255, 0.03);
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.25rem 0.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Tighter silhouette to match compressed layout. */
.profile-hitbox-silhouette {
    width: 10rem;
}

/* ── Weapons table thumbnails (catalog images from SkinsData) ─────────── */
.profile-weapon-thumb {
    width: 3.5rem;
    height: 2rem;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

.profile-weapon-thumb-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 0.3rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

/* ── Roulette bets history modal (time-series chart) ──────────────────── */
/* The modal is a self-contained viewport box: the chart absorbs whatever
   vertical space is left after the chips/meta/axis rows, rather than
   dictating the modal's height via a fixed-aspect viewBox. */
.bm-container .blazored-modal.profile-bets-modal {
    width: 85vw !important;
    max-width: 85vw !important;
    max-height: 85vh !important;
    display: flex !important;
    flex-direction: column !important;
}

.profile-bets-modal .modal-body-scrollable {
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* Safety net: if a truly tiny viewport can't fit everything, allow
       scroll instead of clipping. On normal viewports nothing overflows. */
    overflow-y: auto;
    padding: 1rem;
}

.profile-bets-summary .profile-bets-chip {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.55rem 0.7rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.5rem;
    height: 100%;
}

.profile-bets-summary {
    flex: 0 0 auto;
}

.profile-bets-chart-wrap {
    background: rgba(0, 0, 0, 0.35);
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Grafana-style chart layout: chart-area is a fixed positioning context
   that hosts four absolutely-positioned children (Y gutter, plot, X gutter,
   optional empty overlay). The SVG viewBox is pure 0..100 in both axes;
   percent-coord coords for both data points and gridlines means the SVG
   stretches with the plot div and never clips edge markers — those live in
   the HTML dots layer above the SVG and stay perfectly circular regardless
   of the plot's aspect ratio. */
.profile-bets-chart-area {
    position: relative;
    flex: 1 1 auto;
    min-height: 220px;
}

.profile-bets-y-labels {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 22px;
    width: 42px;
    pointer-events: none;
}

.profile-bets-y-label {
    position: absolute;
    right: 4px;
    color: rgba(255, 255, 255, 0.55);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    line-height: 1;
    /* 0.7rem matches the existing chip-and-axis label scale in this feature
       (see .profile-bets-chip .small). Bootstrap's .small (0.875rem) is too
       wide for the 42px gutter. */
    font-size: 0.7rem;
}

.profile-bets-y-label.profile-bets-y-anchor-start  { transform: translateY(0); }
.profile-bets-y-label.profile-bets-y-anchor-middle { transform: translateY(-50%); }
.profile-bets-y-label.profile-bets-y-anchor-end    { transform: translateY(-100%); }

.profile-bets-plot {
    position: absolute;
    left: 42px;
    right: 8px;
    top: 0;
    bottom: 22px;
    cursor: crosshair;
    /* touch-action: none keeps the page from scrolling while the user drags
       horizontally on mobile to zoom. */
    touch-action: none;
}

.profile-bets-plot > svg {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.profile-bets-dots-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.profile-bets-dot-marker {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    transition: filter 100ms ease, transform 100ms ease;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
}

.profile-bets-dot-marker.is-won  { background: #19ee19; }
.profile-bets-dot-marker.is-lost { background: #ff5a5a; }

.profile-bets-dot-marker:hover {
    filter: brightness(1.4) drop-shadow(0 0 4px currentColor);
    transform: translate(-50%, -50%) scale(1.4);
    z-index: 2;
}

.profile-bets-x-labels {
    position: absolute;
    left: 42px;
    right: 8px;
    bottom: 0;
    height: 22px;
    pointer-events: none;
}

.profile-bets-x-label {
    position: absolute;
    top: 4px;
    color: rgba(255, 255, 255, 0.55);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    line-height: 1;
    font-size: 0.7rem;
}

.profile-bets-x-label.profile-bets-x-anchor-start  { transform: translateX(0); }
.profile-bets-x-label.profile-bets-x-anchor-middle { transform: translateX(-50%); }
.profile-bets-x-label.profile-bets-x-anchor-end    { transform: translateX(-100%); }

/* Reset-zoom button floats over the top-right of the chart area. z-index
   keeps it above both the SVG and the empty-state overlay so the user can
   always escape a zoom window with no data. */
.profile-bets-zoom-reset {
    position: absolute;
    top: 4px;
    right: 6px;
    z-index: 3;
}

.profile-bets-chart-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 1;
    text-align: center;
}

.profile-bets-legend {
    flex: 0 0 auto;
}

.profile-bets-footer-hint {
    flex: 0 0 auto;
}

/* Translucent selection rectangle drawn by /js/roulette-chart-zoom.js while
   the user drags. pointer-events: none so the rect never swallows the
   pointerup that ends the drag. */
.profile-bets-zoom-rect {
    fill: rgba(13, 202, 240, 0.18);
    stroke: rgba(13, 202, 240, 0.65);
    stroke-width: 1;
    pointer-events: none;
}

@media (max-width: 768px) {
    .bm-container .blazored-modal.profile-bets-modal {
        width: 95vw !important;
        max-width: 95vw !important;
        max-height: 92vh !important;
    }

    .profile-bets-modal .modal-body-scrollable {
        padding: 0.75rem;
    }

    .profile-bets-chip {
        padding: 0.35rem 0.5rem;
    }

    .profile-bets-chip strong {
        font-size: 0.95rem;
    }

    .profile-bets-chip .small {
        font-size: 0.7rem;
    }

    .profile-bets-y-labels { width: 36px; }
    .profile-bets-plot     { left: 36px; }
    .profile-bets-x-labels { left: 36px; }

    .profile-bets-y-label,
    .profile-bets-x-label {
        font-size: 0.65rem;
    }

    /* Drops the 25% and 75% labels so the three remaining ticks (0%, 50%,
       100%) don't visually collide on narrow viewports. */
    .profile-bets-x-labels .profile-bets-x-label:nth-child(even) {
        display: none;
    }

    .profile-bets-footer-hint {
        display: none;
    }
}

@media (max-width: 576px) {
    .profile-bets-legend {
        display: none;
    }
}

.profile-bets-dot {
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 0.35rem;
}

.profile-bets-dot-win  { background: #19ee19; }
.profile-bets-dot-loss { background: #ff5a5a; }

.profile-bets-line {
    display: inline-block;
    width: 1.2rem;
    height: 2px;
    background: #0dcaf0;
    vertical-align: middle;
    margin-right: 0.35rem;
}

/* ── Trend bar (cyan gradient, used in 12-week tendency chart) ────────── */
.profile-trend-bar {
    background: linear-gradient(180deg, #0dcaf0 0%, rgba(13, 202, 240, 0.3) 100%);
    min-height: 4px;
    transition: filter 120ms ease;
}

.profile-trend-bar:hover {
    filter: brightness(1.35);
}

/* ============================================================================
   Stats-tab shared bits (used by RenderStatsTab in PlayerProfile.razor).
   ========================================================================= */

/* Section header pill — gradient bg + icon circle + title. */
.profile-section-pill {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.85rem;
    background: linear-gradient(90deg, rgba(13, 202, 240, 0.18), rgba(13, 202, 240, 0.04));
    border-bottom: 1px solid rgba(13, 202, 240, 0.25);
}

.profile-section-pill-icon {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: rgba(13, 202, 240, 0.18);
    box-shadow: 0 0 0 1px rgba(13, 202, 240, 0.35) inset;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Tabular-nums for clean alignment of numeric columns. */
.profile-tab-num {
    font-variant-numeric: tabular-nums;
}

/* Subtle left-stripe row hover. */
.profile-row-hover {
    transition: background-color 120ms ease, box-shadow 120ms ease;
}

.profile-row-hover:hover {
    background: rgba(13, 202, 240, 0.05);
    box-shadow: inset 3px 0 0 #0dcaf0;
}

/* ── Spotlight hero rings (4 stat cards above the counter table) ──────── */
.profile-spotlight-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.profile-spotlight-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.85rem 0.5rem 0.75rem;
}

.profile-spotlight-ring {
    --fill: 0%;
    --tone: #0dcaf0;
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        conic-gradient(var(--tone) 0 var(--fill), rgba(255, 255, 255, 0.08) var(--fill) 100%);
    box-shadow: 0 0 18px rgba(13, 202, 240, 0.18);
    position: relative;
}

.profile-spotlight-ring::before {
    content: "";
    position: absolute;
    inset: 0.55rem;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(15, 22, 33, 0.95), rgba(15, 22, 33, 0.85));
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

.profile-spotlight-ring-value {
    position: relative;
    z-index: 1;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-align: center;
}

.profile-spotlight-label {
    letter-spacing: 0.06em;
    font-weight: 600;
}

.profile-spotlight-sub {
    font-variant-numeric: tabular-nums;
}

@media (max-width: 767.98px) {
    .profile-spotlight-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}