/* ==========================================================================
   FelixChess Statistics Component
   BEM prefix: fc-stats
   Relies on CSS custom properties defined at site level:
     --color-green, --color-gray-{10..95},
     --radius-card, --radius-pill,
     --transition-time, --font-family-default
   ========================================================================== */

/* ── Component-local tokens ── */
.fc-stats {
    --fc-stats-white-color : #f0ede8;
    --fc-stats-draw-color  : #8b9aad;
    --fc-stats-black-color : #0f1115;
    --fc-stats-accent      : #b7f34a;
    --fc-stats-page        : #202020;
    --fc-stats-surface     : #2a2a2a;
    --fc-stats-surface-alt : #303030;
    --fc-stats-border      : rgba(255, 255, 255, 0.08);
    --fc-stats-text        : #ffffff;
    --fc-stats-muted       : rgba(255, 255, 255, 0.72);
    --fc-stats-soft        : rgba(255, 255, 255, 0.52);
    --fc-stats-panel-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
    --fc-stats-gap         : 1.5rem;
    --fc-stats-card-pad    : 1.75rem 2rem;
}

@media (prefers-color-scheme: dark) {
    .fc-stats {
        --color-gray-10       : #f3f5f1;
        --color-gray-20       : #e1e7dc;
        --color-gray-30       : #cbd4c5;
        --color-gray-40       : #b4beb0;
        --color-gray-50       : #a6b0ba;
        --color-gray-60       : #818b95;
        --color-gray-70       : #626c76;
        --color-gray-80       : #444d57;
        --color-gray-85       : #343c45;
        --color-gray-90       : #20262d;
        --color-gray-95       : #171b20;
        --fc-stats-surface     : #2a2a2a;
        --fc-stats-surface-alt : #303030;
        --fc-stats-border      : rgba(255, 255, 255, 0.08);
        --fc-stats-text        : #ffffff;
        --fc-stats-muted       : rgba(255, 255, 255, 0.72);
    }
}

/* ── Hidden-state overrides ── */
/* display:flex on .fc-stats__loading overrides the browser's native         */
/* [hidden] { display:none } — must be re-declared explicitly here.          */
.fc-stats__loading[hidden],
.fc-stats__error[hidden],
.fc-stats__content[hidden] {
    display: none;
}

/* ── Root ── */
.fc-stats {
    font-family : var(--font-family-default, 'Georgia', serif);
    color       : var(--fc-stats-text);
    background  : var(--fc-stats-page);
    box-sizing  : border-box;
    inline-size : 100%;
    margin-inline : 0;
    margin-block  : 0;
    padding     : 2rem 0 3rem;
    border      : 1px solid rgba(255, 255, 255, 0.08);
    border-bottom : 1px solid rgba(255, 255, 255, 0.12);
    border-radius : 0;
    box-shadow  : none;
    overflow    : hidden;
}

.fc-stats__content,
.fc-stats__loading,
.fc-stats__error,
.fc-stats__updated {
    box-sizing : border-box;
    inline-size : min(calc(100% - 60px), var(--fc-stats-page-max-width, 87.5rem));
    margin-inline : auto;
}

/* ── Loading ── */
.fc-stats__loading {
    display         : flex;
    align-items     : center;
    gap             : .75rem;
    justify-content : center;
    padding         : 4rem 0;
    color           : var(--fc-stats-muted);
    font-size       : .9rem;
    letter-spacing  : .04em;
}

.fc-stats__spinner {
    display       : inline-block;
    width         : 18px;
    height        : 18px;
    border        : 2px solid rgba(255, 255, 255, 0.18);
    border-top-color : var(--fc-stats-accent);
    border-radius : 50%;
    animation     : fc-stats-spin .8s linear infinite;
}

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

/* ── Error ── */
.fc-stats__error {
    text-align  : center;
    padding     : 3rem;
    color       : var(--fc-stats-muted);
    font-size   : .95rem;
}

/* ── Hero strip ── */
.fc-stats__heroes {
    display               : grid;
    grid-template-columns : repeat(3, 1fr);
    gap                   : var(--fc-stats-gap);
    margin-bottom         : var(--fc-stats-gap);
}

.fc-stats__hero {
    display        : flex;
    flex-direction : column;
    align-items    : stretch;
    padding        : 2rem 1rem;
    background     : var(--fc-stats-surface);
    border-radius  : 0;
    border         : 1px solid var(--fc-stats-border);
    box-shadow     : var(--fc-stats-panel-shadow);
    text-align     : left;
}

.fc-stats__hero-value {
    align-self     : center;
    display        : inline-block;
    position       : relative;
    font-size      : clamp(2rem, 4vw, 3.25rem);
    font-weight    : 700;
    letter-spacing : -.03em;
    line-height    : 1;
    color          : var(--fc-stats-text);
    font-variant-numeric : tabular-nums;
    text-align     : center;
}

.fc-stats__hero-value[data-fc-tooltip] {
    cursor : help;
}

.fc-stats__hero-value[data-fc-tooltip]::after {
    content         : attr(data-fc-tooltip);
    position        : absolute;
    z-index         : 5;
    inset-block-start: calc(100% + .625rem);
    inset-inline-start: 50%;
    inline-size     : max-content;
    max-inline-size : min(18rem, 80vw);
    padding         : .65rem .75rem;
    border-radius   : 12px;
    background      : rgba(18, 18, 18, 0.96);
    color           : #ffffff;
    font-size       : .8rem;
    font-weight     : 500;
    letter-spacing  : 0;
    line-height     : 1.35;
    text-align      : center;
    white-space     : normal;
    box-shadow      : 0 10px 24px rgba(0, 0, 0, .38);
    opacity         : 0;
    pointer-events  : none;
    transform       : translate(-50%, -.25rem);
    transition      : opacity .15s ease, transform .15s ease;
}

.fc-stats__hero-value[data-fc-tooltip]:hover::after,
.fc-stats__hero-value[data-fc-tooltip]:focus-visible::after {
    opacity   : 1;
    transform : translate(-50%, 0);
}

.fc-stats__hero-label {
    order        : -1;
    margin-bottom : .75rem;
    font-size    : .75rem;
    font-weight  : 600;
    letter-spacing : .1em;
    text-transform : uppercase;
    color        : var(--fc-stats-muted);
    text-align   : center;
}

/* ── Summary card breakdowns ── */
.fc-stats__summary-list {
    display        : flex;
    flex-direction : column;
    gap            : .35rem;
    width          : 100%;
    margin         : 1rem 0 0;
    padding        : .8rem 0 0;
    border-top     : 1px solid var(--fc-stats-border);
}

.fc-stats__summary-row {
    display         : flex;
    justify-content : space-between;
    align-items     : baseline;
    gap             : .75rem;
    min-width       : 0;
    font-size       : .78rem;
}

.fc-stats__summary-row dt,
.fc-stats__summary-row dd {
    margin : 0;
}

.fc-stats__summary-row dt {
    color       : var(--fc-stats-muted);
    font-weight : 500;
}

.fc-stats__summary-row dd {
    font-weight          : 600;
    color                : var(--fc-stats-text);
    font-variant-numeric : tabular-nums;
    text-align           : right;
}

/* ── Row layout ── */
.fc-stats__row {
    display               : grid;
    grid-template-columns : 1fr 1fr;
    gap                   : var(--fc-stats-gap);
    margin-bottom         : var(--fc-stats-gap);
}

/* ── Cards ── */
.fc-stats__card {
    background    : var(--fc-stats-surface);
    border        : 1px solid var(--fc-stats-border);
    border-radius : 0;
    padding       : var(--fc-stats-card-pad);
    margin-bottom : var(--fc-stats-gap);
    box-shadow    : var(--fc-stats-panel-shadow);
}

.fc-stats__card--full {
    margin-bottom : var(--fc-stats-gap);
}

.fc-stats__card-title {
    font-size      : .7rem;
    font-weight    : 700;
    letter-spacing : .12em;
    text-transform : uppercase;
    color          : var(--fc-stats-muted);
    margin         : 0 0 1.25rem;
    padding-bottom : .75rem;
    border-bottom  : 1px solid var(--fc-stats-border);
}

/* ── Matrix tables ── */
.fc-stats__matrix-note {
    margin     : -.35rem 0 1rem;
    color      : var(--fc-stats-muted);
    font-size  : .8rem;
    line-height: 1.45;
}

.fc-stats__matrix-wrap {
    width      : 100%;
    overflow-x : auto;
}

.fc-stats__matrix-table {
    width           : 100%;
    min-width       : 680px;
    border-collapse : collapse;
    font-size       : .875rem;
}

.fc-stats__matrix-table thead th {
    padding        : .75rem .85rem;
    background     : var(--fc-stats-surface-alt);
    color          : var(--fc-stats-muted);
    border-bottom  : 1px solid var(--fc-stats-border);
    font-size      : .68rem;
    font-weight    : 700;
    letter-spacing : .08em;
    text-transform : uppercase;
    white-space    : nowrap;
}

.fc-stats__matrix-table thead th:first-child {
    text-align : left;
}

.fc-stats__matrix-table tbody th,
.fc-stats__matrix-table tbody td {
    padding       : .8rem .85rem;
    border-bottom : 1px solid var(--fc-stats-border);
}

.fc-stats__matrix-table tbody th {
    text-align  : left;
    color       : var(--fc-stats-text);
    font-weight : 600;
    white-space : nowrap;
}

.fc-stats__matrix-table tbody tr:last-child th,
.fc-stats__matrix-table tbody tr:last-child td {
    border-bottom : none;
}

.fc-stats__matrix-table tbody tr:hover {
    background : var(--fc-stats-surface-alt);
}

.fc-stats__matrix-number {
    text-align           : right;
    font-variant-numeric : tabular-nums;
    white-space          : nowrap;
}

.fc-stats__matrix-row--all th,
.fc-stats__matrix-row--all td {
    font-weight : 700;
}

.fc-stats__matrix-unavailable {
    margin    : 0;
    color     : var(--fc-stats-muted);
    font-size : .875rem;
}

.fc-stats__outcome-breakdown {
    margin-top  : 1.5rem;
    padding-top : 1.25rem;
    border-top  : 1px solid var(--fc-stats-border);
}

.fc-stats__outcome-insights {
    display               : grid;
    grid-template-columns : repeat(4, minmax(0, 1fr));
    gap                   : 1rem;
    margin-top            : 1.35rem;
}

.fc-stats__outcome-insight {
    display        : flex;
    flex-direction : column;
    gap            : .35rem;
    padding        : 1rem;
    background     : var(--fc-stats-surface-alt);
    border         : 1px solid var(--fc-stats-border);
    border-radius  : 0;
}

.fc-stats__outcome-insight-label {
    color          : var(--fc-stats-muted);
    font-size      : .62rem;
    font-weight    : 700;
    letter-spacing : .1em;
    text-transform : uppercase;
}

.fc-stats__outcome-insight-title {
    color       : var(--fc-stats-text);
    font-size   : .95rem;
    font-weight : 700;
    line-height : 1.2;
}

.fc-stats__outcome-insight-value {
    color                : var(--fc-stats-accent);
    font-size            : 1.05rem;
    font-weight          : 800;
    font-variant-numeric : tabular-nums;
}

.fc-stats__outcome-insight-detail {
    color                : var(--fc-stats-muted);
    font-size            : .78rem;
    font-variant-numeric : tabular-nums;
}

.fc-stats__subsection-title {
    margin         : 0 0 1rem;
    color          : var(--fc-stats-muted);
    font-size      : .72rem;
    font-weight    : 700;
    letter-spacing : .1em;
    text-transform : uppercase;
}

.fc-stats__outcome-table {
    min-width : 880px;
}

.fc-stats__outcome-table tbody td {
    vertical-align : middle;
}

.fc-stats__outcome-row--all th,
.fc-stats__outcome-row--all td {
    border-top : 2px solid var(--fc-stats-border);
}

.fc-stats__outcome-label-cell {
    min-width : 12rem;
}

.fc-stats__outcome-row-title {
    display : block;
}

.fc-stats__sample-badge {
    display        : inline-block;
    margin-top     : .35rem;
    padding        : .12rem .4rem;
    border         : 1px solid var(--fc-stats-border);
    border-radius  : var(--radius-pill, 999px);
    color          : var(--fc-stats-muted);
    font-size      : .6rem;
    font-weight    : 700;
    letter-spacing : .05em;
    text-transform : uppercase;
}

.fc-stats__outcome-games,
.fc-stats__white-score {
    font-weight : 700;
}

.fc-stats__outcome-mini-track {
    display       : flex;
    width         : 100%;
    min-width     : 260px;
    height        : 10px;
    overflow      : hidden;
    border-radius : var(--radius-pill, 999px);
    background    : rgba(255, 255, 255, 0.12);
}

.fc-stats__outcome-mini-seg {
    display : block;
    height  : 100%;
}

.fc-stats__outcome-mini-seg--white {
    background : var(--fc-stats-white-color);
    border-right : 1px solid rgba(0, 0, 0, 0.16);
}

.fc-stats__outcome-mini-seg--draw {
    background : var(--fc-stats-draw-color);
}

.fc-stats__outcome-mini-seg--black {
    background : var(--fc-stats-black-color);
}

.fc-stats__outcome-result-labels {
    margin-top            : .45rem;
    color                 : var(--fc-stats-muted);
    font-size             : .76rem;
    line-height           : 1.35;
    font-variant-numeric  : tabular-nums;
}

/* ── Outcome bar ── */
.fc-stats__outcome-track {
    display       : flex;
    height        : 12px;
    border-radius : var(--radius-pill, 999px);
    overflow      : hidden;
    margin-bottom : 1.25rem;
    background    : rgba(255, 255, 255, 0.12);
}

.fc-stats__outcome-seg {
    height     : 100%;
    transition : width var(--transition-time, 300ms) ease;
}

.fc-stats__outcome-seg--white { background: var(--fc-stats-white-color); border-right: 1px solid rgba(0, 0, 0, 0.16); }
.fc-stats__outcome-seg--draw  { background: var(--fc-stats-draw-color); }
.fc-stats__outcome-seg--black { background: var(--fc-stats-black-color); }

/* ── Outcome legend ── */
.fc-stats__outcome-legend {
    display        : flex;
    gap            : 1.5rem;
    flex-wrap      : wrap;
    margin         : 0;
}

.fc-stats__legend-item {
    display   : flex;
    flex-direction : column;
    gap       : .15rem;
}

.fc-stats__legend-item dt {
    display     : flex;
    align-items : center;
    gap         : .4rem;
    font-size   : .7rem;
    font-weight : 600;
    letter-spacing : .08em;
    text-transform : uppercase;
    color       : var(--fc-stats-muted);
}

.fc-stats__legend-item dd {
    margin    : 0;
    font-size : 1.1rem;
    font-weight : 700;
    color     : var(--fc-stats-text);
    font-variant-numeric : tabular-nums;
}

.fc-stats__legend-dot {
    display       : inline-block;
    width         : 8px;
    height        : 8px;
    border-radius : 50%;
    flex-shrink   : 0;
}

.fc-stats__legend-item--white .fc-stats__legend-dot { background: var(--fc-stats-white-color); border: 1px solid rgba(0, 0, 0, 0.24); }
.fc-stats__legend-item--draw  .fc-stats__legend-dot { background: var(--fc-stats-draw-color); }
.fc-stats__legend-item--black .fc-stats__legend-dot { background: var(--fc-stats-black-color); }

.fc-stats__pct {
    font-size   : .8rem;
    font-weight : 400;
    color       : var(--fc-stats-soft);
    margin-left : .2rem;
}

/* ── Chart wrappers ── */
.fc-stats__chart-wrap {
    width    : 100%;
    min-height : 200px;
    overflow : hidden;
}

.fc-stats__timeline-filters {
    display     : flex;
    flex-wrap   : wrap;
    gap         : .5rem;
    margin      : 0 0 1rem;
}

.fc-stats__timeline-filter {
    padding        : .35rem .75rem;
    border         : 1px solid var(--fc-stats-border);
    border-radius  : var(--radius-pill, 999px);
    background     : var(--fc-stats-surface-alt);
    color          : var(--fc-stats-muted);
    cursor         : pointer;
    font-size      : .72rem;
    font-weight    : 800;
    letter-spacing : .06em;
    text-transform : uppercase;
}

.fc-stats__timeline-filter[aria-pressed="true"] {
    background   : var(--fc-stats-accent);
    border-color : var(--fc-stats-accent);
    color        : #111111;
}

/* D3 SVG styles */
.fc-stats__chart-wrap svg {
    display : block;
    width   : 100%;
    overflow: visible;
}

.fc-stats-bar { fill: var(--fc-stats-accent); }
.fc-stats-bar:hover { opacity: .8; }

.fc-stats__timeline-stack rect:hover {
    opacity : .82;
}

.fc-stats__timeline-legend {
    display     : flex;
    flex-wrap   : wrap;
    gap         : .85rem;
    margin-top  : .75rem;
    color       : var(--fc-stats-muted);
    font-size   : .75rem;
    font-weight : 650;
}

.fc-stats__timeline-legend-item {
    display     : inline-flex;
    align-items : center;
    gap         : .3rem;
}

.fc-stats__timeline-legend-dot {
    display       : inline-block;
    width         : .65rem;
    height        : .65rem;
    border-radius : 2px;
}

/* ── Opening insights ── */
.fc-stats__opening-list {
    display        : flex;
    flex-direction : column;
    gap            : .85rem;
}

.fc-stats__opening-row {
    display        : flex;
    flex-direction : column;
    gap            : .4rem;
}

.fc-stats__opening-main {
    display               : grid;
    grid-template-columns : 2rem minmax(4rem, .45fr) minmax(8rem, 1fr) minmax(5rem, auto) minmax(3.5rem, auto);
    align-items           : baseline;
    gap                   : .75rem;
}

.fc-stats__opening-rank {
    color                : var(--fc-stats-muted);
    font-size            : .78rem;
    font-weight          : 700;
    font-variant-numeric : tabular-nums;
}

.fc-stats__opening-move {
    color       : var(--fc-stats-text);
    font-size   : .94rem;
    font-weight : 800;
}

.fc-stats__opening-label {
    min-width     : 0;
    overflow      : hidden;
    color         : var(--fc-stats-text);
    font-size     : .86rem;
    font-weight   : 650;
    text-overflow : ellipsis;
    white-space   : nowrap;
}

.fc-stats__opening-games,
.fc-stats__opening-percent {
    color                : var(--fc-stats-text);
    font-size            : .84rem;
    font-weight          : 800;
    font-variant-numeric : tabular-nums;
    text-align           : right;
}

.fc-stats__opening-percent {
    color : var(--fc-stats-accent);
}

.fc-stats__opening-bar {
    height        : .42rem;
    overflow      : hidden;
    background    : rgba(255, 255, 255, 0.10);
    border-radius : var(--radius-pill, 999px);
}

.fc-stats__opening-bar-fill {
    display       : block;
    height        : 100%;
    background    : var(--fc-stats-accent);
    border-radius : inherit;
}

.fc-stats-axis text {
    font-family : var(--font-family-default, 'Georgia', serif);
    font-size   : 11px;
    fill        : var(--fc-stats-muted);
}

.fc-stats-axis line,
.fc-stats-axis path {
    stroke : rgba(255, 255, 255, 0.14);
}

.fc-stats-bar-label {
    font-family  : var(--font-family-default, 'Georgia', serif);
    font-size    : 11px;
    fill         : var(--fc-stats-muted);
    font-variant-numeric : tabular-nums;
}

.fc-stats-fed-label {
    font-family : var(--font-family-default, 'Georgia', serif);
    font-size   : 12px;
    fill        : var(--fc-stats-text);
    font-weight : 600;
}

/* ── Flag icons (flag-icons 7.5.0) ── */
/* Ensures fi/fi-* classes render at a consistent size within the component. */
.fc-stats .fi {
    display        : inline-block;
    vertical-align : middle;
    font-size      : 14px;
    line-height    : 1;
    flex-shrink    : 0;
}

/* Flag next to the federation badge in the players table */
.fc-stats__fed-flag {
    margin-right : .35rem;
    border-radius: 2px;
}

/* ── Players table ── */
.fc-stats__players {
    width           : 100%;
    border-collapse : collapse;
    font-size       : .875rem;
}

.fc-stats__players thead th {
    padding        : 0 .75rem .6rem;
    text-align     : left;
    font-size      : .65rem;
    font-weight    : 700;
    letter-spacing : .1em;
    text-transform : uppercase;
    color          : var(--fc-stats-muted);
    border-bottom  : 1px solid var(--fc-stats-border);
}

.fc-stats__col-num { text-align: right !important; }

.fc-stats__players tbody tr {
    border-bottom : 1px solid var(--fc-stats-border);
    transition    : background var(--transition-time, 200ms);
}

.fc-stats__players tbody tr:last-child { border-bottom: none; }
.fc-stats__players tbody tr:hover { background: var(--fc-stats-surface-alt); }

.fc-stats__players tbody td {
    padding : .6rem .75rem;
    color   : var(--fc-stats-text);
}

.fc-stats__rank-cell {
    font-size    : .75rem;
    font-weight  : 600;
    color        : var(--fc-stats-muted) !important;
    width        : 2rem;
    font-variant-numeric : tabular-nums;
}

.fc-stats__player-name {
    font-weight : 600;
}

.fc-stats__player-title {
    font-size   : .7rem;
    font-weight : 600;
    color       : var(--fc-stats-accent);
    margin-left : .3rem;
    letter-spacing : .04em;
}

.fc-stats__fed-badge {
    display       : inline-block;
    padding       : .15rem .45rem;
    background    : rgba(255, 255, 255, 0.10);
    border-radius : var(--radius-pill, 999px);
    font-size     : .65rem;
    font-weight   : 700;
    letter-spacing : .06em;
    text-transform : uppercase;
    color         : var(--fc-stats-muted);
}

.fc-stats__games-cell {
    text-align           : right !important;
    font-weight          : 600;
    font-variant-numeric : tabular-nums;
}

/* ── Top players / federations cards ── */
.fc-stats__top-grid {
    display               : grid;
    grid-template-columns : repeat(3, minmax(0, 1fr));
    gap                   : var(--fc-stats-gap);
}

.fc-stats__top-card {
    display        : flex;
    flex-direction : column;
    min-width      : 0;
    padding        : 1rem;
    background     : var(--fc-stats-surface-alt);
    border         : 1px solid var(--fc-stats-border);
    border-radius  : 0;
}

.fc-stats__top-card-title {
    margin         : 0 0 .75rem;
    color          : var(--fc-stats-text);
    font-size      : .75rem;
    font-weight    : 800;
    letter-spacing : .08em;
    text-transform : uppercase;
}

.fc-stats__top-list {
    display        : flex;
    flex-direction : column;
    gap            : .15rem;
    margin         : 0;
    padding        : 0;
    list-style     : none;
}

.fc-stats__top-row {
    display               : grid;
    grid-template-columns : 1.75rem 1.45rem minmax(0, 1fr) max-content;
    align-items           : center;
    gap                   : .35rem;
    min-height            : 2rem;
    padding               : .35rem 0;
    border-bottom         : 1px solid var(--fc-stats-border);
}

.fc-stats__top-row:last-child {
    border-bottom : none;
}

.fc-stats__top-rank {
    color                : var(--fc-stats-muted);
    font-size            : .72rem;
    font-weight          : 700;
    font-variant-numeric : tabular-nums;
}

.fc-stats__top-label {
    min-width     : 0;
    overflow      : hidden;
    color         : var(--fc-stats-text);
    font-size     : .82rem;
    font-weight   : 650;
    line-height   : 1.25;
    text-overflow : ellipsis;
    white-space   : nowrap;
}

.fc-stats__top-label .fc-stats__player-title {
    margin-left  : 0;
    margin-right : .35rem;
}

.fc-stats__top-code {
    color       : var(--fc-stats-muted);
    font-weight : 600;
}

.fc-stats__top-games {
    color                : var(--fc-stats-text);
    font-size            : .82rem;
    font-weight          : 800;
    font-variant-numeric : tabular-nums;
    text-align           : right;
}

.fc-stats__top-empty {
    margin    : auto 0;
    padding   : 1.4rem .25rem;
    color     : var(--fc-stats-muted);
    font-size : .85rem;
}

.fc-stats__top-flag-placeholder {
    display : inline-block;
    width   : 14px;
}

/* ── Last updated ── */
.fc-stats__updated {
    margin-top  : 1rem;
    font-size   : .75rem;
    color       : var(--fc-stats-soft);
    text-align  : right;
}

/* ── Fun Facts (Phase 3 extremes) ── */

[data-fc-extremes][hidden] { display: none; }

.fc-stats__facts {
    display               : grid;
    grid-template-columns : repeat(4, 1fr);
    gap                   : var(--fc-stats-gap);
}

.fc-stats__fact {
    display        : flex;
    flex-direction : column;
    padding        : 1.25rem 1rem 1.25rem;
    background     : var(--fc-stats-surface-alt);
    border-radius  : 0;
    border         : 1px solid var(--fc-stats-border);
    position       : relative;
    transition     : border-color var(--transition-time, 200ms);
}

.fc-stats__fact:hover {
    border-color : var(--fc-stats-accent);
}

.fc-stats__fact-icon {
    font-size   : 1.3rem;
    line-height : 1;
    margin-bottom : .6rem;
    user-select : none;
}

.fc-stats__fact-number {
    font-size            : clamp(1.6rem, 3vw, 2.4rem);
    font-weight          : 800;
    letter-spacing       : -.03em;
    line-height          : 1;
    color                : var(--fc-stats-text);
    font-variant-numeric : tabular-nums;
    margin-bottom        : .3rem;
}

.fc-stats__fact-label {
    font-size      : .65rem;
    font-weight    : 700;
    letter-spacing : .1em;
    text-transform : uppercase;
    color          : var(--fc-stats-muted);
    margin-bottom  : .75rem;
}

.fc-stats__fact-sublabel {
    font-size   : .65rem;
    color       : var(--fc-stats-accent);
    font-weight : 600;
    margin-top  : -.5rem;
    margin-bottom : .6rem;
}

.fc-stats__fact-detail {
    margin-top  : auto;
    font-size   : .78rem;
    color       : var(--fc-stats-muted);
    line-height : 1.5;
}

.fc-stats__fact-game-title {
    display     : block;
    margin-top  : .15rem;
    font-weight : 700;
    color       : var(--fc-stats-text);
    line-height : 1.35;
}

.fc-stats__fact-event,
.fc-stats__fact-meta,
.fc-stats__fact-moves {
    display     : block;
    margin-top  : .1rem;
    color       : var(--fc-stats-soft);
}

.fc-stats__fact-meta {
    color       : var(--fc-stats-soft);
    font-size   : .74rem;
}

.fc-stats__fact-opening {
    display       : block;
    margin-bottom : .25rem;
    color         : var(--fc-stats-accent);
    font-size     : .76rem;
    font-weight   : 750;
    line-height   : 1.35;
}

.fc-stats__fact-players {
    display     : block;
    font-weight : 600;
    color       : var(--fc-stats-text);
}

.fc-stats__fact-year {
    display     : inline-block;
    font-size   : .7rem;
    color       : var(--fc-stats-soft);
    margin-top  : .15rem;
}

.fc-stats__fact-result {
    display       : inline-block;
    margin-left   : .4rem;
    padding       : .1rem .35rem;
    border-radius : var(--radius-pill, 999px);
    font-size     : .6rem;
    font-weight   : 700;
    letter-spacing : .05em;
    vertical-align : middle;
}

.fc-stats__fact-result--white {
    background : rgba(255, 255, 255, 0.12);
    color      : var(--fc-stats-text);
    border     : 1px solid var(--fc-stats-border);
}

.fc-stats__fact-result--black {
    background : var(--fc-stats-black-color);
    color      : #fff;
}

.fc-stats__fact-eco {
    display       : inline-block;
    font-weight   : 700;
    font-size     : .75rem;
    color         : var(--fc-stats-accent);
    margin-bottom : .2rem;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .fc-stats {
        padding-block : 1.25rem 2rem;
        border-radius : 0;
    }

    .fc-stats__content,
    .fc-stats__loading,
    .fc-stats__error,
    .fc-stats__updated {
        inline-size : calc(100% - 24px);
    }

    .fc-stats__heroes {
        grid-template-columns : 1fr 1fr;
    }

    .fc-stats__heroes .fc-stats__hero:last-child {
        grid-column : span 2;
    }

    .fc-stats__row {
        grid-template-columns : 1fr;
    }

    .fc-stats__card {
        padding : 1.25rem;
    }

    .fc-stats__facts {
        grid-template-columns : 1fr 1fr;
    }

    .fc-stats__top-grid {
        grid-template-columns : 1fr;
    }

    .fc-stats__opening-main {
        grid-template-columns : 1.7rem 4.5rem 1fr;
    }

    .fc-stats__opening-games,
    .fc-stats__opening-percent {
        grid-column : 3;
        text-align  : left;
    }

    .fc-stats__outcome-insights {
        grid-template-columns : 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .fc-stats__heroes {
        grid-template-columns : 1fr;
    }

    .fc-stats__heroes .fc-stats__hero:last-child {
        grid-column : auto;
    }

    .fc-stats__facts {
        grid-template-columns : 1fr;
    }

    .fc-stats__outcome-insights {
        grid-template-columns : 1fr;
    }
}