/* ============================================================
   LUMICHESS PROFILE REPORT PAGE
   Semantic CSS classes replacing Tailwind utility classes.
   All values reference tokens.css custom properties.
   Prefix: pr- (profile report)
   ============================================================ */

/* ── Page Layout ──────────────────────────────────────────── */

/* Body-level horizontal-overflow protection for the profile-report
   page only. Applied via :has() so we don't disturb other surfaces.
   This is the right level to clip horizontal overflow without
   creating a scroll context inside .pr-page (which would break
   position: sticky for the drill-down back button). */
body:has(.pr-page) { overflow-x: hidden; }

/* Disable the global `html { scroll-behavior: smooth }` on this page
   so back-to-report scroll restoration snaps instantly instead of
   animating across the entire report. Per the user, "it should
   directly show without scrolling but the transition should be
   smooth" — the smooth feel comes from React swapping views, not
   from a scroll-animated restore. */
html:has(.pr-page) { scroll-behavior: auto; }

.pr-page {
    min-height: 100vh;
    padding-bottom: 64px;
    /* Override the global `html { scroll-behavior: smooth }` so the
       browser-native scroll restoration on history.back() snaps
       instantly instead of animating. */
    scroll-behavior: auto;
    /* Type scale calibrated against the Aimchess report (Inter @ 16px
       body / 21px section title / 12px fine print, letter-spacing
       -0.5px) — premium-SaaS density. We bump the report a tier above
       the rest of the app: body 16px, sub-heading 17px, section title
       21px, hero stat 32px, fine print 13px. */
    --lumi-text-xs:   13px;
    --lumi-text-sm:   16px;
    --lumi-text-base: 16px;
    --lumi-text-lg:   18px;
    --lumi-text-xl:   21px;

    /* No body-text tracking tighten — on non-retina desktops, even
       -0.011em squeezes letterforms enough to read as fuzzy. Section
       titles still tighten via .pr-heading--xl below; body stays at
       normal tracking so each glyph has room to breathe. */
    letter-spacing: normal;
    line-height: 1.55;
    font-size: var(--lumi-text-base);

    /* Warm-grey text tier scale used across the report. Solid hex
       (no rgba opacity) reads as opaque + intentional instead of
       "frosted/translucent" — the look premium dark UIs (Linear,
       Vercel, Chess.com) all use. Slight warmth pulls toward the
       Lumichess amber/warm-dark family instead of pure neutral.
       Brightness pushed up vs the Mac-retina-calibrated values so
       body copy reads cleanly on lower-DPI desktops too. */
    --pr-text-primary:   #F5F1EA;   /* headings, key stat values */
    --pr-text-body:      #EAE3D6;   /* paragraphs, commentary */
    --pr-text-secondary: #E8E0CF;   /* sub-labels, captions — brightened from #D2C9B9 for legibility */
    --pr-text-tertiary:  #CFC6B6;   /* uppercase meta, zero-state — brightened from #ABA293 */

    /* Font smoothing on dark bg — pure-white aliased text reads
       as harsh stair-step pixels without this. */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Uppercase labels (Aimchess uses regular case for these so they
   actually look heavier — but our brand calls for SMALL CAPS look.
   Bump tracking so they have presence at 12-13px instead of looking
   crammed.) */
.pr-page .pr-label,
.pr-page .pr-label--no-margin {
    letter-spacing: 0.08em;
}

.pr-container {
    max-width: 1024px;
    margin: 0 auto;
    padding: var(--lumi-space-6) var(--lumi-space-4);
}

@media (min-width: 640px) {
    .pr-container {
        padding: var(--lumi-space-6) var(--lumi-space-6);
    }
}

/* ── Stack / Flex / Grid Layouts ──────────────────────────── */

.pr-stack {
    display: flex;
    flex-direction: column;
    gap: var(--lumi-space-5);
}

.pr-stack--sm {
    display: flex;
    flex-direction: column;
    gap: var(--lumi-space-4);
}

.pr-stack--xs {
    display: flex;
    flex-direction: column;
    gap: var(--lumi-space-3);
}

.pr-stack--2 {
    display: flex;
    flex-direction: column;
    gap: var(--lumi-space-2);
}

.pr-stack--1 {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pr-row {
    display: flex;
    align-items: center;
    gap: var(--lumi-space-2);
}

.pr-row--3 {
    display: flex;
    align-items: center;
    gap: var(--lumi-space-3);
}

.pr-row--4 {
    display: flex;
    align-items: center;
    gap: var(--lumi-space-4);
}

.pr-row--between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pr-row--center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--lumi-space-2);
}

.pr-row--start {
    display: flex;
    align-items: flex-start;
}

.pr-row--wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--lumi-space-2);
}

.pr-row--wrap-3 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--lumi-space-3);
}

.pr-grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--lumi-space-3);
}
.pr-grid-2 > * { min-width: 0; }

@media (min-width: 640px) {
    .pr-grid-2 { grid-template-columns: repeat(2, 1fr); }
}

.pr-grid-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--lumi-space-3);
}
.pr-grid-3 > * { min-width: 0; }

@media (min-width: 640px) {
    .pr-grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* Mobile responsive guard for inline grids built with style={{
   display: 'grid', gridTemplateColumns: 'repeat(2|3, 1fr)' or
   '1fr 1fr [1fr]'. There are ~30 such inline grids across the
   report (per-phase tiles, conversion tiers, comparison cards,
   etc.); they all need to collapse to one column below 640px so
   the cards don't overflow the viewport. */
@media (max-width: 639px) {
    .pr-card [style*="grid-template-columns: repeat(2"],
    .pr-card [style*="grid-template-columns: repeat(3"],
    .pr-card [style*="grid-template-columns: 1fr 1fr"],
    .pr-card [style*="grid-template-columns:1fr 1fr"],
    .pr-card [style*="gridTemplateColumns: 'repeat(2"],
    .pr-card [style*="gridTemplateColumns: 'repeat(3"],
    .pr-card [style*="grid-template-columns: \"repeat"] {
        grid-template-columns: 1fr !important;
    }
    /* Section card padding tightens on mobile too. */
    .pr-card { padding: 18px !important; }
    .pr-card--p8 { padding: 18px !important; }
    .pr-card--p10 { padding: 18px !important; }
}

.pr-grid-4 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--lumi-space-3);
}

@media (min-width: 640px) {
    .pr-grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

.pr-grid-2--sm {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: var(--lumi-space-6);
}

@media (min-width: 640px) {
    .pr-grid-2--sm {
        grid-template-columns: repeat(2, 1fr);
    }
}

.pr-grid-2--lg {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--lumi-space-6);
}
/* Default min-width: auto on grid items lets a chart's min-content
   force the cell wider than its track. Override so cells respect the
   1fr / 50% width on every breakpoint. */
.pr-grid-2--lg > * { min-width: 0; }

@media (min-width: 1024px) {
    .pr-grid-2--lg {
        grid-template-columns: repeat(2, 1fr);
    }
}

.pr-grid-3--sm {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--lumi-space-3);
}

/* ── Card Components ──────────────────────────────────────── */

.pr-card {
    /* Outer section card uses the left-nav background so the report
       reads as one surface family with the chrome. Inner stat tiles
       (.pr-stat-box, .pr-stat-box--center, .pr-elevated) still pop
       because they sit on bg-elevated (a tier lighter). */
    background: var(--lumi-bg-nav);
    /* Min-width 0 lets flex children shrink below their natural
       content width — without it, a single long word or wide chart
       pushes the card past its grid cell on mobile. Overflow hidden
       caps the visual damage if a child still escapes. */
    min-width: 0;
    overflow: hidden;
    border-radius: var(--lumi-radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    padding: var(--lumi-space-6);
}

.pr-card--p8 {
    padding: var(--lumi-space-8);
}

.pr-card--p10 {
    padding: var(--lumi-space-10);
}

.pr-card--error {
    background: var(--lumi-bg-card);
    border-radius: var(--lumi-radius-xl);
    border: 1px solid rgba(207,110,110,0.2);
    padding: var(--lumi-space-8);
    text-align: center;
}

.pr-stat-box {
    /* Stat boxes nest inside .pr-card. Card now uses bg-nav (matching
       the side nav), so these tiles step up to bg-elevated with a
       subtle warm-amber inner glow + soft hover lift — reads as a
       crafted card rather than a flat panel. */
    background: linear-gradient(180deg, #5b5752 0%, #4f4b46 100%);
    border-radius: 14px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 1px 2px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.pr-stat-box:hover {
    transform: translateY(-1px);
    border-color: rgba(212, 164, 75, 0.25);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 4px 12px rgba(0, 0, 0, 0.35);
}

/* Rating & Momentum compresses its stat boxes so all 3 rows fit inside
   the chart's 192px height — keeps the section short enough for the
   Skill Profile section below it to be visible above the fold. */
.pr-rm-grid .pr-stat-box {
    padding: 10px 14px;
}
.pr-rm-grid .pr-stat-value {
    font-size: 20px;
    line-height: 1.1;
}
.pr-rm-grid .pr-stat-value--lg {
    font-size: 24px;
    line-height: 1.1;
}
.pr-rm-grid .pr-stack--sm {
    gap: 8px;
}
.pr-rm-grid .pr-grid-2,
.pr-rm-grid .pr-grid-3 {
    gap: 8px;
}

.pr-stat-box--center {
    background: var(--lumi-bg-elevated);
    border-radius: var(--lumi-radius-xl);
    padding: var(--lumi-space-4);
    border: 1px solid var(--lumi-border);
    text-align: center;
}

.pr-elevated {
    background: var(--lumi-bg-elevated);
    border-radius: var(--lumi-radius-xl);
    padding: var(--lumi-space-3);
    border: 1px solid var(--lumi-border);
}

.pr-elevated--p4 {
    background: var(--lumi-bg-elevated);
    border-radius: var(--lumi-radius-xl);
    padding: var(--lumi-space-4);
    border: 1px solid var(--lumi-border);
}

/* ── Card Header ──────────────────────────────────────────── */

.pr-card__header {
    display: flex;
    align-items: center;
    gap: var(--lumi-space-2);
    margin-bottom: var(--lumi-space-4);
}

/* ── Typography ───────────────────────────────────────────── */

.pr-label {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--lumi-text-primary);
    margin-bottom: 4px;
}

.pr-label--no-margin {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--lumi-text-primary);
}

.pr-stat-value {
    /* Aimchess writes stat values at ~21-23px / 400-700 — confident
       copy, not billboard. Was 24px / 800 — too aggressive against
       16px body. */
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.pr-stat-value--lg {
    /* Was 32px / 800. Aimchess hero-stats sit ~24-28px — keeps the
       hierarchy without screaming. */
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.018em;
}

.pr-heading {
    font-size: 20px;
    font-weight: 700;
    color: var(--lumi-text-primary);
    letter-spacing: -0.02em;
}

.pr-heading--lg {
    /* Aimchess sub-headers ("Interpretation") use 18px / 500. Was
       17px / 700 — too bold for a sub-heading. */
    font-size: var(--lumi-text-lg);
    font-weight: 500;
    color: var(--lumi-text-primary);
}

.pr-heading--xl {
    /* Aimchess section titles ("Overview") use 21px / 400 (regular!).
       Was 700 — felt heavy + shouty. 500 keeps presence without the
       boldness. */
    font-size: var(--lumi-text-xl);
    font-weight: 500;
    color: var(--lumi-text-primary);
}

.pr-heading--2xl {
    font-size: var(--lumi-text-2xl);
    font-weight: 800;
    color: var(--lumi-text-primary);
    letter-spacing: -0.02em;
}

.pr-heading--3xl {
    font-size: var(--lumi-text-3xl);
    font-weight: 800;
    color: var(--lumi-text-primary);
}

.pr-title {
    font-size: var(--lumi-text-sm);
    font-weight: 600;
    color: var(--lumi-text-secondary);
}

.pr-title--white {
    font-size: var(--lumi-text-sm);
    font-weight: 600;
    color: var(--lumi-text-primary);
}

.pr-body {
    font-size: var(--lumi-text-sm);
    color: var(--lumi-text-secondary);
}

.pr-meta {
    /* Sub-text inside stat tiles / inline annotations — bumped so the
       "win rate next game" / "losses in a row" / "X games" subtitles
       are legible alongside the big stat number. */
    font-size: 15px;
    font-weight: 600;
    color: var(--pr-text-body);
}

.pr-meta--10 {
    /* Uppercase mini-label like "ANALYZED" / "ACCURACY". Tracked. */
    font-size: 13px;
    font-weight: 700;
    color: var(--pr-text-body);
    letter-spacing: 0.04em;
}

.pr-dim {
    /* Used as StatBox `sub` line — was 13px / muted, hard to read at
       desktop DPIs. Up to 15px / weight 500 / primary, the same recipe
       the user explicitly liked from the Key Takeaway callouts. */
    font-size: 15px;
    font-weight: 500;
    color: var(--pr-text-primary);
}

.pr-text-white {
    color: var(--lumi-text-primary);
}

.pr-text-muted {
    color: var(--lumi-text-muted);
}

.pr-text-secondary {
    color: var(--lumi-text-secondary);
}

.pr-text-dim {
    color: var(--lumi-text-dim);
}

.pr-font-semibold {
    font-weight: 600;
}

.pr-font-bold {
    font-weight: 700;
}

.pr-font-extrabold {
    font-weight: 800;
}

.pr-font-black {
    font-weight: 900;
}

.pr-text-xs {
    font-size: var(--lumi-text-xs);
}

.pr-text-sm {
    font-size: var(--lumi-text-sm);
}

.pr-text-base {
    font-size: var(--lumi-text-base);
}

.pr-text-lg {
    font-size: var(--lumi-text-lg);
}

.pr-text-xl {
    font-size: var(--lumi-text-xl);
}

.pr-text-2xl {
    font-size: var(--lumi-text-2xl);
}

.pr-text-3xl {
    font-size: var(--lumi-text-3xl);
}

/* ── Badge ────────────────────────────────────────────────── */

.pr-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: var(--lumi-radius-md);
    font-size: var(--lumi-text-xs);
    font-weight: 600;
}

.pr-badge--pill {
    display: inline-flex;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 9999px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pr-badge--severity {
    font-size: var(--lumi-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 6px;
    border-radius: var(--lumi-radius-xs);
}

/* ── Buttons ──────────────────────────────────────────────── */

.pr-btn {
    padding: 10px 24px;
    border-radius: var(--lumi-radius-xl);
    font-weight: 700;
    font-size: var(--lumi-text-sm);
    border: none;
    cursor: pointer;
    font-family: var(--lumi-font);
    transition: background 0.15s, color 0.15s, opacity 0.15s;
    color: var(--lumi-text-primary);
}

.pr-btn--primary {
    padding: 6px 20px;
    border-radius: var(--lumi-radius-lg);
    font-weight: 700;
    font-size: var(--lumi-text-sm);
    color: var(--lumi-text-primary);
    border: none;
    cursor: pointer;
    font-family: var(--lumi-font);
    transition: all 0.15s;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--lumi-space-2);
    min-width: 120px;
}

.pr-btn--primary:disabled {
    opacity: 0.3;
}

.pr-btn--link {
    font-size: var(--lumi-text-sm);
    color: var(--lumi-text-muted);
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--lumi-font);
    transition: color 0.15s;
}

.pr-btn--link:hover {
    color: var(--lumi-text-primary);
}

.pr-cta-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: var(--lumi-radius-md);
    font-size: var(--lumi-text-xs);
    font-weight: 700;
    transition: filter 0.15s;
    text-decoration: none;
}

.pr-cta-link:hover {
    filter: brightness(1.1);
}

/* ── Tooltip ──────────────────────────────────────────────── */

.pr-tooltip {
    background: var(--lumi-bg-surface);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--lumi-radius-lg);
    font-size: 12px;
}

/* ── Control Bar ──────────────────────────────────────────── */

.pr-control-bar {
    position: sticky;
    top: 0;
    z-index: 40;
    border-bottom: 1px solid var(--lumi-border);
    background: var(--lumi-bg-nav);
}

.pr-control-bar__inner {
    max-width: 1024px;
    margin: 0 auto;
    padding: 0 var(--lumi-space-4);
}

@media (min-width: 640px) {
    .pr-control-bar__inner {
        padding: 0 var(--lumi-space-6);
    }
}

.pr-control-bar__row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--lumi-space-2);
    padding: 10px 0;
}

@media (min-width: 640px) {
    .pr-control-bar__row {
        flex-direction: row;
        align-items: center;
        gap: var(--lumi-space-3);
    }
}

.pr-control-bar__spacer {
    display: none;
    flex: 1;
}

@media (min-width: 640px) {
    .pr-control-bar__spacer {
        display: block;
    }
}

/* ── Platform Toggle ──────────────────────────────────────── */

.pr-platform-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.pr-platform-toggle__btn {
    padding: 6px 12px;
    font-size: var(--lumi-text-xs);
    font-weight: 600;
    border: 1px solid var(--lumi-border);
    border-radius: var(--lumi-radius-lg);
    background: transparent;
    cursor: pointer;
    font-family: var(--lumi-font);
    transition: all 0.15s;
}

.pr-platform-toggle__btn:disabled {
    opacity: 0.4;
}

/* ── Input ────────────────────────────────────────────────── */

.pr-input {
    box-sizing: border-box;
    background: var(--lumi-bg-elevated);
    border: 1px solid var(--lumi-border);
    border-radius: var(--lumi-radius-lg);
    padding: 6px 12px;
    color: var(--lumi-text-primary);
    font-size: var(--lumi-text-sm);
    font-family: var(--lumi-font);
    width: 100%;
    flex-shrink: 0;
}

@media (min-width: 640px) {
    .pr-input {
        width: 176px;
    }
}

.pr-input:focus {
    outline: none;
    border-color: rgba(93,182,125,0.5);
}

.pr-input:disabled {
    opacity: 0.4;
}

.pr-input--sm {
    background: var(--lumi-bg-elevated);
    border: 1px solid var(--lumi-border);
    border-radius: var(--lumi-radius-md);
    padding: 4px 8px;
    color: var(--lumi-text-primary);
    font-size: var(--lumi-text-xs);
    font-weight: 700;
    font-family: var(--lumi-font);
    width: 48px;
    text-align: center;
}

.pr-input--sm:focus {
    outline: none;
    border-color: rgba(107,159,212,0.5);
}

.pr-input--sm:disabled {
    opacity: 0.4;
}

/* ── Format Pills ─────────────────────────────────────────── */

.pr-pill-group {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.pr-pill-btn {
    padding: 4px 10px;
    border-radius: var(--lumi-radius-md);
    font-size: var(--lumi-text-xs);
    font-weight: 600;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    font-family: var(--lumi-font);
    transition: all 0.15s;
}

.pr-pill-btn:disabled {
    opacity: 0.4;
}

/* ── Depth Slider ─────────────────────────────────────────── */

.pr-depth-group {
    display: flex;
    align-items: center;
    gap: var(--lumi-space-2);
    flex-shrink: 0;
}

.pr-depth-group__label {
    font-size: var(--lumi-text-xs);
    color: var(--lumi-text-muted);
    white-space: nowrap;
}

.pr-depth-group__slider {
    width: 80px;
}

@media (min-width: 640px) {
    .pr-depth-group__slider {
        width: 96px;
    }
}

.pr-depth-group__value {
    font-size: var(--lumi-text-xs);
    font-weight: 700;
    width: 56px;
    text-align: right;
}

.pr-depth-group__quality {
    color: var(--lumi-text-dim);
    font-weight: 400;
}

/* ── Game Count ───────────────────────────────────────────── */

.pr-count-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.pr-count-group__label {
    font-size: var(--lumi-text-xs);
    color: var(--lumi-text-muted);
    white-space: nowrap;
}

/* ── Progress Bar ─────────────────────────────────────────── */

.pr-progress-track {
    height: 2px;
    width: 100%;
    background: rgba(255,255,255,0.03);
}

.pr-progress-fill {
    height: 100%;
    transition: width 0.5s;
}

.pr-progress-bar {
    border-radius: 9999px;
    overflow: hidden;
}

.pr-progress-bar__fill {
    height: 100%;
    border-radius: 9999px;
    transition: all 0.7s;
}

/* ── Spinner ──────────────────────────────────────────────── */

.pr-spinner {
    border: 2px solid var(--lumi-success);
    border-top-color: transparent;
    border-radius: 9999px;
    animation: pr-spin 1s linear infinite;
}

.pr-spinner--sm {
    width: 14px;
    height: 14px;
    border-width: 2px;
    display: inline-block;
}

.pr-spinner--lg {
    width: 56px;
    height: 56px;
    border-width: 2px;
    margin: 0 auto;
}

/* ── Alert Boxes ──────────────────────────────────────────── */

.pr-alert {
    border-radius: var(--lumi-radius-xl);
    padding: var(--lumi-space-4);
}

.pr-alert--danger {
    background: rgba(207,110,110,0.1);
    border: 1px solid rgba(207,110,110,0.2);
}

.pr-alert--warning {
    background: rgba(212,164,75,0.08);
    border: 1px solid rgba(212,164,75,0.15);
}

.pr-alert--success {
    background: rgba(93,182,125,0.08);
    border: 1px solid rgba(93,182,125,0.15);
}

.pr-alert--gradient {
    background: linear-gradient(to right, rgba(212,164,75,0.1), rgba(107,159,212,0.1));
    border: 1px solid rgba(212,164,75,0.15);
    border-radius: var(--lumi-radius-xl);
    padding: var(--lumi-space-5);
}

/* ── Strength / Weakness Items ────────────────────────────── */

.pr-strength-item {
    display: flex;
    align-items: center;
    gap: var(--lumi-space-3);
    background: rgba(93,182,125,0.08);
    border: 1px solid rgba(93,182,125,0.15);
    border-radius: var(--lumi-radius-lg);
    padding: var(--lumi-space-3);
    margin-bottom: var(--lumi-space-2);
}

.pr-weakness-item {
    background: rgba(207,110,110,0.08);
    border: 1px solid rgba(207,110,110,0.15);
    border-radius: var(--lumi-radius-lg);
    padding: var(--lumi-space-3);
    margin-bottom: var(--lumi-space-2);
}

/* ── Hero Icon Box ────────────────────────────────────────── */

.pr-hero-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--lumi-radius-xl);
    background: linear-gradient(135deg, rgba(93,182,125,0.2), rgba(107,159,212,0.2));
    border: 1px solid var(--lumi-border);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--lumi-space-5);
}

.pr-avatar {
    width: 80px;
    height: 80px;
    border-radius: var(--lumi-radius-xl);
    background: linear-gradient(135deg, rgba(93,182,125,0.2), rgba(107,159,212,0.2));
    border: 1px solid var(--lumi-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--lumi-text-3xl);
    font-weight: 900;
    flex-shrink: 0;
}

.pr-error-icon {
    width: 48px;
    height: 48px;
    border-radius: 9999px;
    background: rgba(207,110,110,0.1);
    border: 1px solid rgba(207,110,110,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--lumi-space-4);
}

/* ── Opening Table ────────────────────────────────────────── */

.pr-table {
    width: 100%;
    font-size: var(--lumi-text-sm);
}

.pr-table th {
    text-align: left;
    font-size: var(--lumi-text-xs);
    color: var(--lumi-text-muted);
    padding: var(--lumi-space-2) var(--lumi-space-2);
    border-bottom: 1px solid var(--lumi-border);
}

.pr-table th.text-center {
    text-align: center;
}

.pr-table td {
    padding: 10px var(--lumi-space-2);
    border-bottom: 1px solid rgba(255,255,255,0.03);
}

.pr-table td.text-center {
    text-align: center;
}

.pr-table tbody tr:hover {
    background: rgba(93,182,125,0.03);
}

.pr-table__name {
    font-weight: 500;
    color: var(--lumi-text-secondary);
    font-size: var(--lumi-text-xs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
}

/* ── Game List ────────────────────────────────────────────── */

.pr-game-list {
    max-height: 384px;
    overflow-y: auto;
}

.pr-game-list__item {
    display: flex;
    align-items: center;
    gap: var(--lumi-space-3);
    padding: 10px 12px;
    border-radius: var(--lumi-radius-lg);
    border: 1px solid transparent;
    transition: all 0.15s;
}

.pr-game-list__item--clickable {
    cursor: pointer;
}

.pr-game-list__item--clickable:hover {
    border-color: var(--lumi-border);
    background: var(--lumi-bg-elevated);
}

.pr-game-list__result {
    width: 28px;
    height: 28px;
    border-radius: var(--lumi-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--lumi-text-xs);
    font-weight: 700;
    color: var(--lumi-text-primary);
    flex-shrink: 0;
}

.pr-game-list__info {
    flex: 1;
    min-width: 0;
}

.pr-game-list__name {
    font-size: 16px;
    font-weight: 600;
    color: var(--pr-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pr-game-list__detail {
    font-size: 14px;
    color: var(--pr-text-secondary);
    font-weight: 500;
    margin-top: 2px;
}

.pr-game-list__acc {
    text-align: right;
    flex-shrink: 0;
}

/* ── Key Moments ──────────────────────────────────────────── */

.pr-moments {
    max-height: 256px;
    overflow-y: auto;
}

.pr-moment-row {
    display: flex;
    align-items: center;
    gap: var(--lumi-space-3);
    padding: var(--lumi-space-2) var(--lumi-space-3);
    border-radius: var(--lumi-radius-lg);
}

/* ── Chart Height Helpers ─────────────────────────────────── */

.pr-chart-h48 { height: 192px; }
.pr-chart-h52 { height: 208px; }
.pr-chart-h56 { height: 224px; }
.pr-chart-h40 { height: 160px; }
.pr-chart-h44 { height: 176px; }
.pr-chart-h72 { height: 288px; }

/* ── Correlation Card ────────────────────────────────────── */

.pr-correlation-card {
    background: var(--lumi-bg-elevated);
    border-radius: var(--lumi-radius-xl);
    padding: var(--lumi-space-4);
    border: 1px solid var(--lumi-border);
}

.pr-correlation-dot {
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    flex-shrink: 0;
}

/* ── Pattern Card ────────────────────────────────────────── */

.pr-pattern-card {
    border-radius: var(--lumi-radius-xl);
    padding: var(--lumi-space-4);
    border-width: 1px;
    border-style: solid;
}

/* ── Phase Card ──────────────────────────────────────────── */

.pr-phase-card {
    background: var(--lumi-bg-elevated);
    border-radius: var(--lumi-radius-xl);
    padding: var(--lumi-space-4);
}

/* ── Game Drill-Down ─────────────────────────────────────── */

.pr-drilldown-back {
    /* Sticky so the back affordance is always visible while the user
       scrolls through the eval graph + per-move table. Without it,
       you had to scroll back to the top to leave the drill-down. */
    position: sticky;
    top: 8px;
    z-index: 20;
    align-self: flex-start;
    font-size: var(--lumi-text-sm);
    color: var(--pr-text-primary);
    background: var(--lumi-bg-nav, #1e1e1b);
    border: 1px solid rgba(255,255,255,0.08);
    cursor: pointer;
    font-family: var(--lumi-font);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
    padding: 8px 14px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.pr-drilldown-back:hover {
    color: #fff;
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.16);
}

.pr-drilldown-back--blue {
    font-size: var(--lumi-text-sm);
    color: #60a5fa;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--lumi-font);
    text-decoration: none;
    padding: 0;
    margin-bottom: var(--lumi-space-4);
    display: inline-block;
}

.pr-drilldown-back--blue:hover {
    text-decoration: underline;
}

/* ── Accuracy Result Card ────────────────────────────────── */

.pr-acc-result-card {
    background: var(--lumi-bg-elevated);
    border-radius: var(--lumi-radius-xl);
    padding: var(--lumi-space-4);
    text-align: center;
}

/* ── Best/Worst Piece Cards ──────────────────────────────── */

.pr-piece-best {
    background: rgba(93,182,125,0.1);
    border: 1px solid rgba(93,182,125,0.2);
    border-radius: var(--lumi-radius-lg);
    padding: var(--lumi-space-3);
}

.pr-piece-worst {
    background: rgba(207,110,110,0.1);
    border: 1px solid rgba(207,110,110,0.2);
    border-radius: var(--lumi-radius-lg);
    padding: var(--lumi-space-3);
}

/* ── Status Bar Info ─────────────────────────────────────── */

.pr-status-info {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--lumi-space-3);
}

/* ── Piece Accuracy Bar ───────────────────────────────────── */

.pr-piece-bar {
    display: flex;
    align-items: center;
    gap: var(--lumi-space-3);
}

.pr-piece-bar__label {
    width: 64px;
    font-size: 13px;
    color: var(--lumi-text-secondary);
    font-weight: 600;
}

.pr-piece-bar__track {
    flex: 1;
    height: 24px;
    border-radius: var(--lumi-radius-xs);
    background: var(--lumi-bg-body);
    overflow: hidden;
    position: relative;
}

.pr-piece-bar__fill {
    height: 100%;
    border-radius: var(--lumi-radius-xs);
    opacity: 0.7;
}

.pr-piece-bar__count {
    position: absolute;
    right: 8px;
    top: 0;
    font-size: 12px;
    color: var(--lumi-text-secondary);
    line-height: 24px;
}

.pr-piece-bar__pct {
    position: absolute;
    left: 8px;
    top: 0;
    font-size: 12px;
    color: var(--lumi-text-primary);
    line-height: 24px;
    font-weight: 600;
}

/* ── Move Quality Distribution ────────────────────────────── */

.pr-quality-row {
    display: flex;
    align-items: center;
    gap: var(--lumi-space-3);
}

.pr-quality-row__label {
    width: 95px;
    font-size: 14px;
    font-weight: 600;
}

.pr-quality-row__bar {
    flex: 1;
    height: 28px;
    border-radius: var(--lumi-radius-xs);
    background: var(--lumi-bg-body);
    overflow: hidden;
    position: relative;
}

/* Reuse the piece-bar's pct/count overlay classes inside the quality
   row, but the row's track is taller (28px vs piece-accuracy's 24px) —
   override line-height so the overlay numbers center vertically and
   bump font size to match the bigger row label. */
.pr-quality-row__bar .pr-piece-bar__pct,
.pr-quality-row__bar .pr-piece-bar__count {
    line-height: 28px;
    font-size: 13px;
}

/* ── Progress Tracking Delta ──────────────────────────────── */

.pr-delta-row {
    display: flex;
    align-items: center;
    gap: var(--lumi-space-3);
    background: var(--lumi-bg-elevated);
    border-radius: var(--lumi-radius-lg);
    padding: var(--lumi-space-3);
    border: 1px solid var(--lumi-border);
}

.pr-delta-row__label {
    font-size: var(--lumi-text-xs);
    color: var(--lumi-text-muted);
    width: 80px;
}

.pr-delta-row__value {
    font-size: var(--lumi-text-sm);
    font-weight: 700;
    width: 48px;
    text-align: right;
}

/* ── Overflow helper ──────────────────────────────────────── */

.pr-overflow-x {
    overflow-x: auto;
}

.pr-overflow-y {
    overflow-y: auto;
}

/* ── Utility Spacing ──────────────────────────────────────── */

.pr-mb-1 { margin-bottom: 4px; }
.pr-mb-2 { margin-bottom: var(--lumi-space-2); }
.pr-mb-3 { margin-bottom: var(--lumi-space-3); }
.pr-mb-4 { margin-bottom: var(--lumi-space-4); }
.pr-mb-5 { margin-bottom: var(--lumi-space-5); }
.pr-mb-6 { margin-bottom: var(--lumi-space-6); }
.pr-mt-1 { margin-top: 4px; }
.pr-mt-2 { margin-top: var(--lumi-space-2); }
.pr-mt-3 { margin-top: var(--lumi-space-3); }
.pr-mt-4 { margin-top: var(--lumi-space-4); }
.pr-mt-5 { margin-top: var(--lumi-space-5); }
.pr-mt-6 { margin-top: var(--lumi-space-6); }
.pr-ml-2 { margin-left: var(--lumi-space-2); }
.pr-ml-auto { margin-left: auto; }
.pr-pt-8 { padding-top: var(--lumi-space-8); }
.pr-pb-4 { padding-bottom: var(--lumi-space-4); }
.pr-py-6 { padding-top: var(--lumi-space-6); padding-bottom: var(--lumi-space-6); }

/* ── Utilities ────────────────────────────────────────────── */

.pr-text-center { text-align: center; }
.pr-text-right { text-align: right; }
.pr-flex-1 { flex: 1; }
.pr-min-w-0 { min-width: 0; }
.pr-shrink-0 { flex-shrink: 0; }
.pr-nowrap { white-space: nowrap; }
.pr-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-w-full { width: 100%; }
.pr-max-w-lg { max-width: 512px; margin: 0 auto; }

/* ── Range Slider ─────────────────────────────────────────── */

input[type="range"] {
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.08);
    cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--lumi-accent);
    border: 2px solid var(--lumi-bg-body);
    cursor: pointer;
}

/* ── Eval Bar Backgrounds ─────────────────────────────────── */

.eval-bar-pos { background: linear-gradient(90deg, rgba(93,182,125,0.15), rgba(93,182,125,0.05)); }
.eval-bar-neg { background: linear-gradient(90deg, rgba(207,110,110,0.05), rgba(207,110,110,0.15)); }

/* ── Recharts Overrides ───────────────────────────────────── */

.recharts-text {
    fill: var(--lumi-text-muted) !important;
    font-size: var(--lumi-text-xs) !important;
}

.recharts-cartesian-grid line {
    stroke: var(--lumi-border) !important;
}

.recharts-polar-grid circle,
.recharts-polar-grid line {
    stroke: var(--lumi-border) !important;
}

.recharts-polar-angle-axis-tick text {
    fill: var(--lumi-text-muted) !important;
    font-size: var(--lumi-text-xs) !important;
}

.recharts-tooltip-wrapper {
    outline: none !important;
}

/* ── Animations ───────────────────────────────────────────── */

@keyframes pr-fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.pr-animate-section {
    animation: pr-fadeInUp 0.5s ease-out both;
}

.pr-animate-delay-1 { animation-delay: 0.1s; }
.pr-animate-delay-2 { animation-delay: 0.2s; }
.pr-animate-delay-3 { animation-delay: 0.3s; }

@keyframes pr-pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(212,164,75,0.2); }
    50% { box-shadow: 0 0 20px 4px rgba(212,164,75,0.1); }
}

.pr-glow-accent { animation: pr-pulse-glow 3s ease-in-out infinite; }

@keyframes pr-spin {
    to { transform: rotate(360deg); }
}

@keyframes pr-progress-pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

.pr-progress-pulse { animation: pr-progress-pulse 1.5s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
    .pr-animate-section, .pr-glow-accent, .pr-spinner, .pr-progress-pulse {
        animation: none;
        opacity: 1;
    }
}

/* ── Scrollbar ────────────────────────────────────────────── */

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }

/* ── Footer ───────────────────────────────────────────────── */

.pr-footer {
    text-align: center;
    padding-top: var(--lumi-space-8);
    padding-bottom: var(--lumi-space-4);
}

.pr-footer__text {
    color: var(--lumi-text-dim);
    font-size: var(--lumi-text-xs);
}

/* ── Radar Interpretation Panel ───────────────────────────── */

.pr-interp-context {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.pr-interp-username {
    font-size: 12px;
    font-weight: 700;
    color: var(--lumi-accent);
}

.pr-interp-sep {
    font-size: 11px;
    color: var(--lumi-text-dim);
}

.pr-interp-meta {
    font-size: 12px;
    font-weight: 500;
    color: var(--lumi-text-muted);
    text-transform: capitalize;
}

.pr-interp-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pr-interp-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.05);
    transition: background 0.15s;
}

.pr-interp-row:hover {
    background: rgba(255,255,255,0.04);
}

.pr-interp-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pr-interp-name {
    flex: 1;
    font-size: 16px;
    font-weight: 500;
    color: var(--lumi-text-primary);
}

.pr-interp-score {
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    min-width: 30px;
    text-align: right;
    line-height: 1;
}

.pr-interp-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

/* ── Action items (clickable cards linking to training pages) ── */
.pr-action-item {
    display: block;
    padding: 14px 16px;
    background: #272522;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.pr-action-item:hover {
    border-color: rgba(93, 182, 125, 0.35);
    background: rgba(93, 182, 125, 0.04);
}

.pr-text-xxs {
    font-size: 12px;
}

/* ════════════════════════════════════════════════════════════
   VANILLA SELECTION SCREEN
   The profile-report config screen is rendered as plain HTML on
   page load so users see it instantly — no Babel runtime compile.
   React only loads when the user clicks "Create Profile Report"
   (or visits /profile-report/<id>). The .prs-* namespace keeps it
   isolated from the React-era .pr-* classes above.
   ════════════════════════════════════════════════════════════ */

.prs-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 56px 20px 80px;
    min-height: 60vh;
    font-family: 'Satoshi', sans-serif;
    /* Gentle entry: page eases up + in over ~280ms on first paint so
       the form reads as "arriving" rather than slapping into place.
       Latency itself is unchanged — purely a perception polish. */
    animation: prs-screen-in 320ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes prs-screen-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Subtle inner stagger — title first, card a beat later, past-reports
   last. Each is short enough that the perceived load stays under 400ms. */
.prs-hero      { animation: prs-fade-in 280ms ease-out 0ms   both; }
.prs-sub       { animation: prs-fade-in 280ms ease-out 60ms  both; }
.prs-card      { animation: prs-card-in 360ms cubic-bezier(0.22, 0.61, 0.36, 1) 120ms both; }
.prs-past      { animation: prs-fade-in 320ms ease-out 220ms both; }

@keyframes prs-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes prs-card-in {
    from { opacity: 0; transform: translateY(12px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Respect reduced-motion preference — instant render, no animation. */
@media (prefers-reduced-motion: reduce) {
    .prs-screen, .prs-hero, .prs-sub, .prs-card, .prs-past {
        animation: none;
    }
}

.prs-hero {
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--lumi-amber-200, #E8C06A);
    letter-spacing: -0.015em;
    text-align: center;
    line-height: 1.2;
}

.prs-sub {
    font-size: 16px;
    font-weight: 450;
    margin: 0 0 32px;
    color: var(--lumi-text-secondary, #E8E4E0);
    letter-spacing: 0.005em;
    text-align: center;
    line-height: 1.5;
    max-width: 620px;
}

.prs-card {
    position: relative;
    width: 100%;
    max-width: 540px;
    background: var(--lumi-bg-nav);
    border: 1px solid rgba(212, 164, 75, 0.22);
    border-radius: 22px;
    /* Asymmetric vertical padding — bottom is tighter so the gold CTA
       doesn't sit in a sea of empty space below it. */
    padding: clamp(24px, 3vw, 36px) clamp(24px, 3.2vw, 40px) clamp(18px, 2.2vw, 24px);
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.03) inset,
        0 0 0 1px rgba(0,0,0,0.20) inset,
        0 12px 36px rgba(0,0,0,0.28);
}

/* During the making phase we keep .prs-card-formfields in layout (only
   visibility:hidden) so the card's width + height stays IDENTICAL to the
   prod form-state. The loading slot is absolutely positioned over the
   form area so it never affects layout. .prs-card is already relative. */
.prs-card-loading:not([hidden]) {
    position: absolute;
    inset: clamp(24px, 3vw, 36px) clamp(24px, 3.2vw, 40px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.prs-card-highlight {
    position: absolute;
    left: 32px;
    right: 32px;
    top: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(212,164,75,0.55) 40%, rgba(212,164,75,0.55) 60%, transparent 100%);
    pointer-events: none;
}

/* Form-field wrapper. Wrapping the fields in this div (so the loading
   slot can overlay them) broke the gap they inherited from .prs-card —
   restore vertical rhythm here. */
.prs-card-formfields {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.prs-card-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 4px;
}

.prs-logomark {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}
.prs-logomark svg { width: 100%; height: 100%; display: block; }

.prs-card-title {
    margin: 0;
    font-family: 'Satoshi', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.012em;
    color: var(--lumi-text-primary, #F0EDE8);
}

.prs-field-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lumi-text-secondary, #E8E4E0);
    margin-bottom: 8px;
}

/* Platform & format pill groups */
.prs-pill-group {
    display: flex;
    gap: 10px;
    width: 100%;
}

.prs-pill {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(255,255,255,0.045);
    border: 1.5px solid rgba(255,255,255,0.10);
    border-radius: 12px;
    color: var(--pr-text-primary);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    padding: 12px 14px;
    cursor: pointer;
    transition:
        opacity 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.22s ease,
        transform 0.18s ease,
        color 0.18s ease;
    opacity: 0.85;
}
.prs-pill:hover { opacity: 1; }

.prs-pill--platform { height: 56px; }
.prs-pill--format   { height: 48px; gap: 8px; }

/* Active states — platform-tinted border + amber outer ring + lift. */
.prs-pill[aria-pressed="true"] {
    transform: translateY(-1px);
    opacity: 1;
    box-shadow: 0 0 0 3px rgba(212,164,75,0.22), 0 8px 18px rgba(0,0,0,0.30);
}
.prs-pill--platform[data-id="chesscom"][aria-pressed="true"] {
    background: rgba(129,182,76,0.16);
    border-color: #81B64C;
    color: #fff;
}
.prs-pill--platform[data-id="lichess"][aria-pressed="true"] {
    background: rgba(255,255,255,0.10);
    border-color: var(--lumi-amber-300, #E0B35A);
    color: #fff;
}
.prs-pill--format[data-id="rapid"][aria-pressed="true"]  { background: rgba(129,182,76,0.15); border-color: #81B64C; color: #81B64C; }
.prs-pill--format[data-id="blitz"][aria-pressed="true"]  { background: rgba(255,191,0,0.15); border-color: #FFBF00; color: #FFBF00; }
.prs-pill--format[data-id="bullet"][aria-pressed="true"] { background: rgba(232,160,53,0.15); border-color: #E8A035; color: #E8A035; }
.prs-pill--format[aria-pressed="true"] {
    box-shadow: 0 0 0 3px rgba(212,164,75,0.18), 0 6px 14px rgba(0,0,0,0.25);
}

.prs-chesscom-logo { height: 22px; width: auto; display: block; opacity: 0.78; }
.prs-pill[aria-pressed="true"] .prs-chesscom-logo { opacity: 1; }

.prs-input {
    box-sizing: border-box;
    width: 100%;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 8px;
    color: var(--lumi-text-primary, #F0EDE8);
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.01em;
    outline: none;
    transition: border-color 0.15s;
}
.prs-input:hover { border-color: rgba(255, 255, 255, 0.16); }
.prs-input:focus { border-color: var(--lumi-border-focus, rgba(212, 164, 75, 0.55)); }
.prs-input:focus-visible { outline: none; }
.prs-input::placeholder { color: var(--lumi-text-muted, #E2DFDA); }

.prs-username-form { margin: 0; }
.prs-honeypot {
    position: absolute;
    left: -10000px;
    top: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

/* Primary CTA — bright amber 3D button matching the React version. */
.prs-cta {
    width: 100%;
    margin-top: 12px;
    background: linear-gradient(180deg, #EAC178 0%, #D4A44B 50%, #B6862B 100%);
    color: #1a1a14;
    font-family: inherit;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.01em;
    padding: 18px 20px;
    border-radius: 12px;
    border: 1px solid #B6862B;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.35),
        inset 0 -2px 0 rgba(0,0,0,0.18),
        0 5px 0 #7B5A1C,
        0 12px 24px rgba(0,0,0,0.40);
    transform: translateY(0);
    transition: transform 0.05s ease-out, box-shadow 0.05s ease-out;
}
.prs-cta:active {
    transform: translateY(3px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.35),
        inset 0 -2px 0 rgba(0,0,0,0.18),
        0 2px 0 #7B5A1C,
        0 4px 10px rgba(0,0,0,0.35);
}

.prs-error {
    margin-top: -4px;
    font-size: 13px;
    color: #CF6E6E;
    font-family: 'Satoshi', sans-serif;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 18px;
}
.prs-error[hidden] { display: none; }

/* Past reports table */
.prs-past {
    width: 100%;
    max-width: 720px;
    margin-top: 40px;
}
.prs-past[hidden] { display: none; }

.prs-past-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 12px;
}
.prs-past-title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #D4A44B;
}
.prs-past-count {
    font-size: 14px;
    color: var(--pr-text-body);
}

.prs-past-table {
    background: #1e1e1b;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    overflow: hidden;
}

.prs-past-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr 0.8fr 0.6fr 0.8fr;
    gap: 10px;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 18px;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    color: var(--pr-text-body);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: 15px;
    transition: background 0.12s;
}
.prs-past-row:last-child { border-bottom: none; }
.prs-past-row:hover { background: rgba(212,164,75,0.05); }

.prs-past-row--head {
    background: rgba(255,255,255,0.025);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding: 12px 18px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pr-text-body);
    cursor: default;
}
.prs-past-row--head:hover { background: rgba(255,255,255,0.025); }

.prs-past-cell-user {
    font-weight: 600;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.prs-past-cell-platform,
.prs-past-cell-format {
    display: flex;
    align-items: center;
    gap: 8px;
}
.prs-past-cell-format { text-transform: capitalize; }
.prs-past-cell-right {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--pr-text-primary);
}
.prs-past-cell-date {
    text-align: right;
    color: var(--pr-text-body);
    font-size: 14px;
}

/* Initial state of the React mount point — hidden until lazy-load fires. */
#root[hidden] { display: none; }
#pr-vanilla-selection[hidden] { display: none; }

/* ── Mobile (≤ 639px) ─────────────────────────────────────────
   Profile-report config + report pages — keep everything inside
   the viewport, in clean stacked boxes. */
/* ════════════════════════════════════════════════════════════════
   MOBILE DESIGN SYSTEM (≤ 639px)
   Premium iOS-inspired card chrome + tactile stat tiles + tight
   typographic hierarchy. Desktop styles are unaffected — every rule
   in this block is mobile-scoped only.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 639px) {

    /* ── CONFIG SCREEN ─────────────────────────────────────── */
    .prs-screen {
        padding: 28px 16px 60px !important;
    }
    .prs-card {
        max-width: none;
        min-height: 0;
        padding: 24px 20px !important;
        border-radius: 18px;
        box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset,
                    0 8px 24px rgba(0,0,0,0.32);
    }
    .prs-hero { font-size: 24px; letter-spacing: -0.02em; }
    .prs-sub  { font-size: 15px; max-width: none; padding: 0 4px; margin-bottom: 24px; }

    /* Past-reports → stacked cards. Each row is its own touch-target
       tile with a clear hierarchy: username top, meta row bottom. */
    .prs-past {
        max-width: none;
    }
    .prs-past-table {
        background: transparent;
        border: none;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .prs-past-row {
        grid-template-columns: 1fr auto;
        grid-auto-rows: auto;
        gap: 8px 12px;
        padding: 14px 16px;
        background: var(--lumi-bg-nav);
        border: 1px solid rgba(255,255,255,0.06);
        border-radius: 14px;
        box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 2px 8px rgba(0,0,0,0.22);
    }
    .prs-past-row--head { display: none; }
    .prs-past-cell-user {
        grid-column: 1 / -1;
        font-size: 16px;
        font-weight: 700;
        color: var(--pr-text-primary);
        margin-bottom: 2px;
    }
    .prs-past-cell-platform,
    .prs-past-cell-format,
    .prs-past-cell-right,
    .prs-past-cell-date {
        font-size: 13px;
        text-align: left;
        color: var(--pr-text-secondary);
    }
    .prs-past-cell-right { grid-column: 2; text-align: right; font-weight: 600; }
    .prs-past-cell-date  { grid-column: 2; text-align: right; }

    /* ── REPORT PAGE ──────────────────────────────────────── */

    /* Outer page container hugs the viewport with comfortable gutters. */
    .pr-container {
        padding: 20px 14px 80px;
        max-width: 100%;
    }
    .pr-stack { gap: 16px; }   /* tighter section spacing */

    /* SECTION CARD — iOS-style: bigger radius, soft shadow, inset
       highlight, no harsh borders. Reads as a deliberate "card" not
       a panel. */
    .pr-card,
    .pr-card--p8,
    .pr-card--p10 {
        padding: 20px !important;
        border-radius: 18px !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset,
                    0 6px 20px rgba(0, 0, 0, 0.32) !important;
    }

    /* Section heading sits HERO-style at top of each card. Mobile
       presence > desktop rhythm. */
    .pr-card .pr-heading,
    .pr-card .pr-heading--lg,
    .pr-card .pr-heading--xl {
        font-size: 22px !important;
        font-weight: 700 !important;
        letter-spacing: -0.01em !important;
        line-height: 1.2 !important;
    }
    .pr-card__header { margin-bottom: 18px; }

    /* STAT TILES — touch-friendly minimum height + tactile chrome.
       Brighter inner gradient so they pop off the card surface; soft
       inner border that catches the eye on tap. */
    .pr-stat-box {
        min-height: 68px;
        padding: 14px 16px !important;
        border-radius: 14px !important;
        background: linear-gradient(180deg, #5c5853 0%, #4e4a45 100%) !important;
        border: 1px solid rgba(255, 255, 255, 0.07) !important;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
                    0 2px 6px rgba(0, 0, 0, 0.25) !important;
    }
    .pr-stat-box:active { transform: scale(0.98); }

    .pr-label {
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: 0.08em !important;
        text-transform: uppercase;
        color: var(--pr-text-secondary) !important;
        margin-bottom: 6px;
    }

    /* Hero stat numbers — drop a notch so they don't dwarf the
       narrow viewport. */
    .pr-stat-value     { font-size: 22px; line-height: 1.1; }
    .pr-stat-value--lg { font-size: 26px; line-height: 1.1; }
    .pr-dim            { font-size: 13px !important; }

    /* RATING MOMENTUM specifically — the row of 5 mini boxes
       (Won/Lost/Drawn/Win % colour) become 2-col on mobile, tighter
       padding. */
    .pr-rm-grid .pr-stat-box { padding: 12px 14px !important; }
    .pr-rm-grid .pr-stat-value     { font-size: 22px !important; }
    .pr-rm-grid .pr-stat-value--lg { font-size: 24px !important; }

    /* INTERP ROWS (Skill Profile right-side list) — tighter vertical
       rhythm + sharper hierarchy. */
    .pr-interp-row {
        padding: 12px 14px !important;
        border-radius: 12px;
    }
    .pr-interp-name { font-size: 15px !important; }
    .pr-interp-score { font-size: 17px !important; min-width: 28px; }
    .pr-interp-badge { font-size: 10px !important; padding: 3px 7px !important; }

    /* DRILL-DOWN — sticky back is full-width pill, well above the
       fold so the user always sees a way out. */
    .pr-drilldown-back {
        align-self: stretch;
        justify-content: center;
        padding: 12px 16px !important;
        border-radius: 12px !important;
        font-size: 15px !important;
        top: 12px !important;
    }

    /* GAME-BY-GAME LIST — each row reads as a tappable card. */
    .pr-game-list { max-height: none; }
    .pr-game-list__item {
        padding: 14px 14px !important;
        border-radius: 14px;
        background: rgba(255,255,255,0.025);
        margin-bottom: 8px;
        min-height: 56px;
    }
    .pr-game-list__item:active { transform: scale(0.99); }
    .pr-game-list__name { font-size: 15px !important; }
    .pr-game-list__detail { font-size: 13px !important; }

    /* CHART HEIGHTS — make charts breathe without dominating. */
    .pr-chart-h44, .pr-chart-h48, .pr-chart-h52, .pr-chart-h72 {
        height: 240px;
    }

    /* KEY TAKEAWAY callouts gain rounder corners + tighter padding. */
    .pr-card div[style*="border-left: 4px solid"][style*="rgba(212, 164, 75"] {
        border-radius: 14px !important;
        padding: 14px 16px !important;
    }

    /* PIE CHART labels can wrap awkwardly when too wide. Bring them
       inside the chart area by reducing the outer radius slightly. */
    .recharts-pie-label-text { font-size: 13px !important; }

    /* Animate sections in as the user scrolls (browser-native: just
       give each card a small entry. Already had pr-animate-section;
       just tighten timing for mobile). */
    .pr-animate-section {
        animation-duration: 240ms !important;
    }
}

/* ════════════════════════════════════════════════════════════
   Mobile Phase 1 — selection-screen polish.
   Appended at end of file so source-order wins over earlier rules.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Kill the 4px horizontal overflow: .prs-card was content-box, so
       width:100% + padding + border exceeded the parent's content area. */
    .prs-card,
    .prs-card-formfields,
    .prs-card-loading,
    .prs-card-header,
    .prs-pill-group,
    .prs-input,
    .prs-cta,
    .prs-username-form,
    .prs-past-row,
    .prs-past-table {
        box-sizing: border-box;
    }

    /* Reduce vertical space — the page lands too low on first paint. */
    .prs-screen {
        padding: 12px 14px 80px !important;
        align-items: stretch;
    }

    /* Hero: tighter, more confident weight. */
    .prs-hero {
        font-size: 22px;
        font-weight: 800;
        margin: 0 0 6px;
        text-align: left;
        padding: 0 2px;
    }
    .prs-sub {
        font-size: 14px;
        font-weight: 450;
        line-height: 1.45;
        max-width: none;
        text-align: left;
        margin: 0 0 18px;
        padding: 0 2px;
        color: rgba(232, 228, 224, 0.78);
    }

    /* The card itself — full-bleed within the page padding, softer radius. */
    .prs-card {
        max-width: none;
        width: 100%;
        padding: 18px 16px !important;
        border-radius: 16px;
        gap: 14px;
    }
    /* The inline logo + title row inside the card is redundant now that
       we have the page-level brand header at the top. Hide it on mobile. */
    .prs-card-header { display: none; }
    .prs-card-formfields {
        padding: 0;
        gap: 14px;
    }

    /* Field labels — quieter, all-caps, tight. */
    .prs-field-label {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.08em;
        margin-bottom: 8px;
        color: rgba(232, 228, 224, 0.55);
    }

    /* Pill group fills the row and pills share width equally. */
    .prs-pill-group {
        display: flex;
        gap: 8px;
        width: 100%;
    }
    .prs-pill {
        flex: 1 1 0;
        min-width: 0;
        min-height: 46px;
        padding: 0 10px;
        border-radius: 12px;
        font-size: 14px;
    }

    /* Username input — match pill height. */
    .prs-input {
        width: 100%;
        min-height: 50px;
        padding: 0 14px;
        font-size: 15px;
        border-radius: 12px;
    }

    /* CTA — full-width, prominent. */
    .prs-cta {
        width: 100%;
        min-height: 54px;
        font-size: 16px;
        font-weight: 700;
        border-radius: 14px;
        margin-top: 4px;
    }

    /* Past reports list — already styled as stacked cards in the existing
       @max-width:639px block. Tighten the surrounding header label. */
    .prs-past {
        margin-top: 24px;
    }
}

/* ════════════════════════════════════════════════════════════
   Mobile Phase 2 — stat-box grids stay multi-column.
   The default `.pr-grid-2` / `.pr-grid-3` collapse to 1fr below 640px,
   which makes Rating & Momentum's 7 stat boxes stack one-per-line.
   On mobile we keep 2 / 3 columns so the section reads as grouped
   tiles, not a long list.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .pr-grid-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .pr-grid-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }
    /* StatBox compact mode — smaller padding + tighter type so the
       3-col Won/Lost/Drawn row fits a 358-wide card without clipping. */
    .pr-stat-box {
        padding: 10px 10px !important;
        border-radius: 12px !important;
    }
    .pr-stat-label {
        font-size: 10px !important;
        letter-spacing: 0.04em !important;
        margin-bottom: 4px !important;
    }
    .pr-stat-value,
    .pr-stat-value--lg {
        font-size: 20px !important;
        font-weight: 700 !important;
    }
    .pr-stat-sub {
        font-size: 11px !important;
        margin-top: 2px !important;
    }
    /* Rating & Momentum stat-box row: keep tight gaps, allow even smaller
       text so 3 cols never overflow on narrow Galaxy/Android widths. */
    .pr-rm-grid .pr-grid-3 .pr-stat-box {
        padding: 8px 8px !important;
    }
    .pr-rm-grid .pr-grid-3 .pr-stat-value,
    .pr-rm-grid .pr-grid-3 .pr-stat-value--lg {
        font-size: 18px !important;
    }
    .pr-rm-grid .pr-grid-3 .pr-stat-label {
        font-size: 9.5px !important;
    }
    /* The 2-col stat rows (top + bottom) can stay slightly bigger since
       they have more space per cell. */
    .pr-rm-grid .pr-grid-2 .pr-stat-value,
    .pr-rm-grid .pr-grid-2 .pr-stat-value--lg {
        font-size: 22px !important;
    }
}

/* ════════════════════════════════════════════════════════════
   Mobile Phase 3 — preserve multi-column inline grids.
   The line-201 rule force-collapsed every inline grid to 1fr on
   mobile, so 2/3/4-cell stat rows (Tactics, Endgame, Capitalization,
   Resourcefulness, Phases, By Color, etc.) read as long stacked
   lists. Restore the intended multi-column layouts with mobile-tuned
   gaps + cell padding. repeat(4) wraps to a 2x2 grid since 4 cols at
   358px-wide card = 80px/cell which is too tight.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 639px) {
    .pr-card [style*="grid-template-columns: 1fr 1fr"],
    .pr-card [style*="grid-template-columns:1fr 1fr"],
    .pr-card [style*="grid-template-columns: repeat(2"],
    .pr-card [style*="gridTemplateColumns: 'repeat(2"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
    .pr-card [style*="grid-template-columns: 1fr 1fr 1fr"],
    .pr-card [style*="grid-template-columns:1fr 1fr 1fr"],
    .pr-card [style*="grid-template-columns: repeat(3"],
    .pr-card [style*="gridTemplateColumns: 'repeat(3"] {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }
    .pr-card [style*="grid-template-columns: repeat(4"],
    .pr-card [style*="gridTemplateColumns: 'repeat(4"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
    /* Tighten every tile inside an inline-style grid so the smaller
       cells don't burst with content. */
    .pr-card [style*="grid-template-columns"] > div,
    .pr-card [style*="gridTemplateColumns"] > div {
        min-width: 0;
    }
    /* Section titles slightly smaller on mobile so they don't gobble
       vertical space. */
    .pr-card h3,
    .pr-section-title {
        font-size: 18px;
    }
    /* Tighten body / number tiles inside cells to fit narrower widths. */
    .pr-card [style*="grid-template-columns: repeat(3"] [class*="value"],
    .pr-card [style*="grid-template-columns: 1fr 1fr 1fr"] [class*="value"],
    .pr-card [style*="grid-template-columns: repeat(4"] [class*="value"] {
        font-size: 18px;
    }
}

/* ════════════════════════════════════════════════════════════
   Mobile Phase 4 — make charts/tiles square-ish + readable.
   Recharts ResponsiveContainer sizes to its parent. On mobile the
   wider charts use widths that crop axis labels. Add safe min/max
   heights so radar + line/area charts remain legible without
   horizontal scroll.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .pr-chart-h48 { height: 220px !important; }
    .pr-chart-h56 { height: 240px !important; }
    .pr-chart-h64 { height: 260px !important; }
    /* Radar chart wraps inside ResponsiveContainer — give it room. */
    .pr-radar-wrap { aspect-ratio: 1 / 1; max-height: 340px; }
    /* Performance Radar tile titles + values */
    .pr-radar-summary { gap: 8px; }
    .pr-radar-summary > * { min-width: 0; }
}

/* ════════════════════════════════════════════════════════════
   Mobile Phase 5 — sections with their own table-y rows
   (Game-by-Game Results, Castling, etc.) collapse to single-line
   "ticket" rows so they're scannable, not table cells overflowing.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 639px) {
    .pr-card table {
        font-size: 12px;
    }
    .pr-card table th,
    .pr-card table td {
        padding: 8px 6px !important;
    }
    /* Game list rows: tighten so opponent name + result fit a 358px card */
    .pr-card [class*="game-row"],
    .pr-card [class*="GameRow"] {
        flex-wrap: wrap;
        gap: 6px;
    }
}

/* ════════════════════════════════════════════════════════════
   Mobile Phase 6 — recursive min-width: 0 on inline-grid descendants.
   Phase 3 set min-width:0 on direct children only. Tiles that have
   internal flex/grid layouts (e.g. Tactics/Endgame/Phases 3-col grids
   with [big-number / "accuracy" sub-label]) still overflow because
   the deeper descendants don't shrink. Reset min-width on ALL
   descendants so tiles fit a 100px-wide cell without horizontal
   scroll, and add word-break so longer labels wrap instead of
   pushing the column wider.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 639px) {
    .pr-card [style*="grid-template-columns"] *,
    .pr-card [style*="gridTemplateColumns"] * {
        min-width: 0;
        max-width: 100%;
    }
    /* Numbers stay center-aligned; labels wrap on whitespace. */
    .pr-card [style*="grid-template-columns: repeat(3"] > *,
    .pr-card [style*="grid-template-columns: 1fr 1fr 1fr"] > *,
    .pr-card [style*="grid-template-columns: repeat(4"] > * {
        overflow: hidden;
        word-break: break-word;
        text-align: center;
    }
    /* Cap font-size of small label elements in dense 3-col tiles. */
    .pr-card [style*="grid-template-columns: repeat(3"] [style*="fontSize"],
    .pr-card [style*="grid-template-columns: 1fr 1fr 1fr"] [style*="fontSize"] {
        font-size: 11px !important;
    }
}

/* ════════════════════════════════════════════════════════════
   Mobile Phase 7 — Per-section beautification fixes for issues
   uncovered in the visual eyeball pass:
   1. Game Phases tiles & Conversion by Advantage Size tiles:
      .pr-rate-tile-grid stacks to single column on mobile so
      inner flex headers (icon+title / count) have enough room
      to render without char-per-line wrapping.
   2. Performance by Color (.pr-pbc-grid): keep 2-col but shrink
      the big accuracy number so it no longer overlaps the
      "accuracy" label inside the narrow ~165px box.
   3. Recharts pie/radar text: cap font-size so labels fit
      inside the small card width without horizontal clipping.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 639px) {
    /* Stack the rate-tile grids to 1 col so each tile gets full
       row width — sufficient room for header + accuracy + win
       rate without text breaking char-by-char. */
    .pr-card .pr-rate-tile-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    /* Phase 6 forced text-align:center on direct children of
       repeat(3/4) grids; restore left-align for the now-1-col
       tiles so internal flex headers render naturally. */
    .pr-card .pr-rate-tile-grid > * {
        text-align: left;
    }

    /* Performance by Color — keep side-by-side but shrink so
       the 32px value + 15px "accuracy" fit in the narrow box. */
    .pr-card .pr-pbc-grid {
        gap: 8px !important;
    }
    .pr-card .pr-pbc-grid > div {
        padding: 14px 12px !important;
    }
    .pr-card .pr-pbc-grid [style*="font-size: 32"],
    .pr-card .pr-pbc-grid [style*="font-size:32"] {
        font-size: 24px !important;
    }
    .pr-card .pr-pbc-grid [style*="font-size: 15"],
    .pr-card .pr-pbc-grid [style*="font-size:15"] {
        font-size: 12px !important;
    }
    .pr-card .pr-pbc-grid [style*="font-size: 16"],
    .pr-card .pr-pbc-grid [style*="font-size:16"] {
        font-size: 13px !important;
    }
    .pr-card .pr-pbc-grid [style*="font-size: 13"],
    .pr-card .pr-pbc-grid [style*="font-size:13"] {
        font-size: 11px !important;
    }

    /* Skill Profile radar — long labels like "Resourcefulness"
       clipped at left edge. Shrink axis text so they fit. */
    .pr-card .recharts-polar-angle-axis text {
        font-size: 11px !important;
    }

    /* Pie chart labels (extra defensive — JSX label callbacks
       already pass mobile fontSize, this is a safety net). */
    .pr-card .recharts-pie text {
        font-size: 11px !important;
    }
}