/* =========================================================
   Opening Explorer – Clean modern layout
   Games (left) + Details (right)
   ========================================================= */

.fc-opening-explorer {
    background: #202020;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    min-height: 645.8px;
}

.fc-opening-explorer.fc-oe--board-expanded {
    --board-column-width: min(900px, calc(100vw - 80px));
}

/*
 * .fc-oe__layout — shared two-column grid used by the Game Analyzer
 * (fc-game-analyzer-ai-component). Do NOT use this class in the Opening
 * Explorer HTL; use .fc-oe__twoCol instead (see below).
 */
.fc-oe__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(560px, 36vw, 720px);
    gap: 18px;
    margin-top: 14px;
    align-items: start;
}

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

/* =========================================================
   Opening Explorer two-column flex layout
   LEFT  — game-list table (flex:1, fills all width left of board)
   RIGHT — fixed to board natural width; search results card +
           board viewer (nav + analysis bar inside boardviewer)

   Rules:
   - Right column width = board natural width (--board-column-width).
     Changing this value also changes the board size — leave at default
     unless a designer explicitly resizes the board.
   - Left column gets every remaining pixel: flex:1 1 0.
   - gap: 0 — game list right edge is flush with board left edge.
   - On narrow viewports (≤ 1100 px) the layout stacks vertically.
   ========================================================= */

.fc-oe__twoCol {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
    margin-top: 14px;
}

@media (max-width: 1100px) {
    .fc-oe__twoCol {
        flex-direction: column;
    }
}

/* Left column — expands to fill all space left of the board.
   min-width:0 prevents table overflow from escaping the flex item. */
.fc-oe__main {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Right column — fixed to the board natural width.
   Search results card sits at the top; board viewer (which contains
   the move navigator and analysis bar internally) sits below it. */
.fc-oe__rightPane {
    flex: 0 0 auto;
    width: var(--board-column-width, 600px);
    display: flex;
    flex-direction: column;
    min-width: 0;
}

@media (max-width: 1100px) {
    .fc-oe__rightPane {
        width: 100%;
    }
}

.fc-oe__side {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.fc-oe__mainTitle,
.fc-oe__sideTitle {
    font-weight: 800;
    font-size: 16px;
    line-height: 1.25;
    letter-spacing: 0.01em;
    margin-bottom: 4px;
}

.fc-opening-explorer .fc-oe__main,
.fc-opening-explorer .fc-oe__side {
    gap: 12px;
}

.fc-opening-explorer .fc-oe__main {
    margin-right: 22px;
}

@media (max-width: 1100px) {
    .fc-opening-explorer .fc-oe__main {
        margin-right: 0;
    }
}

.fc-opening-explorer .fc-oe__mainTitle,
.fc-opening-explorer .fc-oe__sideTitle {
    margin-bottom: 0;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.25;
}

/* Empty state — centered icon + message in the Games panel */
.fc-oe__emptyState {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 16px;
    text-align: center;
}

.fc-oe__emptyIcon {
    width: 32px;
    height: 32px;
    fill: currentColor;
    opacity: 0.18;
    flex-shrink: 0;
}

.fc-oe__emptyText {
    font-size: 13px;
    opacity: 0.38;
    letter-spacing: 0.01em;
}

/* Left: Games panel (dominant) */
.fc-oe__gamesPanel {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 14px;
    padding: 12px;
    max-height: 720px;
    overflow: auto;
}

/* Right: details card */
.fc-oe__card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 14px;
    padding: 14px;
}

.fc-oe__placeholder {
    opacity: 0.75;
    font-size: 14px;
    line-height: 1.35;
}

.fc-oe__detailTitle {
    font-weight: 800;
    font-size: 14px;
    margin-bottom: 10px;
}

.fc-oe__kv {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 6px 10px;
    font-size: 13px;
}

.fc-oe__k { opacity: 0.7; }
.fc-oe__v { opacity: 0.95; word-break: break-word; }

/* Action area – reserved for future buttons */
.fc-oe__rightActions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.fc-opening-explorer .fc-mtsearch__panel {
    padding-top: 0;
}

.fc-opening-explorer .fc-mtsearch__titleRow {
    align-items: flex-start;
}

/* Opening Explorer: input is clipped before the icon buttons */
.fc-opening-explorer .fc-mtsearch__controls {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    min-width: 0;
}

.fc-opening-explorer .fc-mtsearch__inputWrap {
    min-width: 0;
    max-width: none;
}

.fc-opening-explorer .fc-mtsearch__input {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.fc-opening-explorer .fc-mtsearch__iconBtn,
.fc-opening-explorer .fc-oe__clearBtn {
    flex: 0 0 46px;
    width: 46px;
    height: 44px;
    position: relative;
    z-index: 2;
}

/* ── Clear (×) button ── */
.fc-oe__clearBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 46px;
    height: 44px;   /* match input height */
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    padding: 0;
}

.fc-oe__clearBtn svg {
    width: 22px;
    height: 22px;
}

.fc-oe__clearBtn:hover {
    background: rgba(220, 60, 60, 0.18);
    border-color: rgba(220, 60, 60, 0.45);
    color: #ff7070;
}

/* native [hidden] override — clearBtn uses display:inline-flex which beats [hidden] */
.fc-oe__clearBtn[hidden] { display: none !important; }

/* Games table cosmetics */
.fc-oe__gamesTable td,
.fc-oe__gamesTable th {
    padding: 4px 6px;
    font-size: 12px;
}

.fc-oe__gamesTable thead th {
    user-select: none;
    white-space: nowrap;
    font-size: 11px;
}

.fc-oe__gamesTable th:nth-child(4),
.fc-oe__gamesTable td:nth-child(4) {
    width: 22%;
}

.fc-oe__gamesTable th:nth-child(6),
.fc-oe__gamesTable td:nth-child(6) {
    width: 76px;
    min-width: 76px;
    white-space: nowrap;
}

.fc-oe__gamesTable tbody tr {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    cursor: pointer;
}

.fc-oe__gamesTable tbody tr td:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.fc-oe__gamesTable tbody tr td:last-child  {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.fc-oe__gamesTable tbody tr.is-selected {
    outline: 1px solid rgba(140, 190, 70, 0.9);
    background: rgba(140, 190, 70, 0.14);
}

/* Time-category badge — single letter, colour-coded by speed */
.fc-oe__tcBadge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 5px;
    color: #fff;
    background: var(--color-gray-40, #555);
}
.fc-oe__tcBadge svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}
.fc-oe__tcBadge--classic   { background: #4a7c59; }   /* muted green  — slow & deep  */
.fc-oe__tcBadge--rapid     { background: #3a6fa8; }   /* steel blue   — medium pace  */
.fc-oe__tcBadge--blitz     { background: #c47d1a; }   /* amber/orange — fast         */
.fc-oe__tcBadge--bullet    { background: #dc2626; }   /* red          — very fast    */

/* Sortable table headers */
.fc-oe__thBtn {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    opacity: 0.9;
}

.fc-oe__thBtn:hover { opacity: 1; }

.fc-oe__sortIcon {
    display: inline-flex;
    flex-direction: column;
    line-height: 10px;
    font-size: 10px;
    opacity: 0.55;
    transform: translateY(-1px);
}

.fc-oe__thBtn[data-sort-active="true"] .fc-oe__sortIcon {
    opacity: 0.95;
}

/* Wrapper styles for chessboard viewer */
.fc-oe__boardWrap {
    position: relative;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 14px;
    padding: 14px;
    /*
     * The boardviewer manages its own internal height via the vertical grid
     * (board + nav + bounded analyzer). Let it size the wrapper naturally —
     * no overflow:hidden here that would clip the eval-bar tooltip, and no
     * fixed height that would fight the viewer's stable bounding box.
     */
    min-width: 0;
}

.fc-oe__boardWrap .fc-boardViewer {
    width: 100%;
}

.fc-oe__boardToggle {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(30, 30, 30, 0.85);
    color: #aaa;
    font-size: 14px;
    line-height: 1;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
    backdrop-filter: blur(4px);
}

.fc-oe__boardToggle:hover {
    background: rgba(50, 50, 50, 0.95);
    color: #e8e8e8;
}

/* =========================================================
   Opening Profile Card
   Rendered by renderProfileCard() into [data-role="ecoDetail"]
   Replaces the identity-only card shown by renderEcoDetail()
   once the byPosition response arrives.

   Layout (top to bottom):
     .fc-oe__pcIdentity   — Row 1: ECO title, SCID, main line
     .fc-oe__pcStatsRow   — Row 2: game count, avg/peak Elo, year range pills
     .fc-oe__pcWDB        — Row 3: W/D/B segmented bar + percentage labels
     .fc-oe__pcBands      — Row 4: Elo band proportional bars
     .fc-oe__pcTimeline   — Row 5: scrollable SVG bar chart
   ========================================================= */

/* ── Card container ── */
.fc-oe__profileCard {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Row 1: Identity ── */
.fc-oe__pcIdentity {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fc-oe__pcTitle {
    font-weight: 800;
    font-size: 14px;
    color: #e0e0e0;
    line-height: 1.35;
    word-break: break-word;
}

.fc-oe__pcMeta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
    color: #888;
}

.fc-oe__pcMetaItem {
    display: flex;
    gap: 4px;
    align-items: baseline;
}

/* "SCID" label prefix inside a meta item */
.fc-oe__pcMetaK {
    color: #555;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ── Row 2: Stats pills ── */
.fc-oe__pcStatsRow {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-end;
}

.fc-oe__pcStat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

/* Value — large, accent-coloured number */
.fc-oe__pcStatV {
    font-size: 16px;
    font-weight: 700;
    color: #c8ff60;
    line-height: 1.15;
    white-space: nowrap;
}

/* Label — small dimmed caption below value */
.fc-oe__pcStatL {
    font-size: 10px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
}

/* ── Row 3: W/D/B bar ── */
.fc-oe__pcWDB {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.fc-oe__pcCodeLine {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: monospace;
    font-size: 11px;
    letter-spacing: .03em;
}

.fc-oe__pcCodeLabel,
.fc-oe__pcCodeSep {
    color: #888;
}

.fc-oe__pcCodeBadge {
    color: #cfcfcf;
    background: rgba(255,255,255,.08);
    border-radius: 4px;
    padding: 1px 6px;
}

.fc-oe__pcMoveBadge {
    color: #cfcfcf;
    font-family: monospace;
    font-size: 11px;
    letter-spacing: .03em;
    font-weight: 700;
}

/*
 * Segmented bar: three divs share the same row.
 * Background provides the "empty" fill for rounding errors
 * when percentages don't sum to exactly 100.
 */
.fc-oe__wdbBar {
    display: flex;
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    background: #2a2a2a;
}

.fc-oe__wdbScope {
    margin-bottom: 5px;
    color: #8d8d8d;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.fc-oe__wdbUnavailable {
    color: #888;
    font-size: 11px;
    line-height: 1.4;
}

/* White segment — light ivory */
.fc-oe__wdbW {
    background: #c9c6b8;
    transition: width .35s ease;
    flex-shrink: 0;
}

/* Draw segment — mid grey */
.fc-oe__wdbD {
    background: #636363;
    transition: width .35s ease;
    flex-shrink: 0;
}

/* Black segment — dark charcoal with a subtle left border so it's
   visible against the bar background even at small widths */
.fc-oe__wdbB {
    background: #2e2e2e;
    border-left: 1px solid #555;
    transition: width .35s ease;
    flex-shrink: 0;
}

/* Percentage labels below the bar */
.fc-oe__wdbLabels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    padding: 0 1px;
}

.fc-oe__wdbLW { color: #b8b5a8; }
.fc-oe__wdbLD { color: #777;    }
.fc-oe__wdbLB { color: #888;    }

/* ── Section labels (shared by Elo Range and Game Timeline) ── */
.fc-oe__pcSection {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fc-oe__pcSectionLabel {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #555;
}

.fc-oe__pcSectionHeader {
    display: grid;
    grid-template-columns: 44px 1fr 42px;
    align-items: center;
    gap: 7px;
}

/* Align labels with band layout */
.fc-oe__pcSectionHeader .fc-oe__pcSectionLabel:first-child {
    grid-column: 1 / 3;
}

.fc-oe__pcSectionHeader .fc-oe__pcSectionLabel:last-child {
    text-align: right;
}

/* ── Row 4: Elo bands ── */
.fc-oe__pcBands {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/*
 * Three-column grid: label | track | count
 * Label is right-aligned so numbers line up neatly.
 */
.fc-oe__bandRow {
    display: grid;
    grid-template-columns: 44px 1fr 42px;
    align-items: center;
    gap: 7px;
}

.fc-oe__bandLabel {
    font-size: 11px;
    color: #777;
    text-align: right;
    white-space: nowrap;
}

.fc-oe__bandTrack {
    height: 6px;
    background: #252525;
    border-radius: 3px;
    overflow: hidden;
}

/* Fill width is set inline as a % of the max-band count */
.fc-oe__bandFill {
    height: 100%;
    background: #6aaa20;
    border-radius: 3px;
    transition: width .35s ease;
}

.fc-oe__bandCount {
    font-size: 11px;
    color: #888;
    text-align: right;
    white-space: nowrap;
}

/* ── Row 5: Timeline ── */
.fc-oe__pcTimeline {
    padding-top: 2px;
}

/*
 * Wrapper clips the SVG and shows a horizontal scrollbar when the chart
 * is wider than the card (many years of data).
 * overflow-y: hidden prevents a phantom vertical scrollbar.
 */
.fc-oe__tlWrap {
    overflow-x: auto;
    overflow-y: hidden;
    /* Thin custom scrollbar — matches the dark theme */
    scrollbar-width: thin;
    scrollbar-color: #444 transparent;
    padding-bottom: 4px;
}

.fc-oe__tlWrap::-webkit-scrollbar        { height: 4px; }
.fc-oe__tlWrap::-webkit-scrollbar-thumb  { background: #444; border-radius: 2px; }
.fc-oe__tlWrap::-webkit-scrollbar-track  { background: transparent; }

.fc-oe__tlSvg {
    display: block;
    flex-shrink: 0;
    /* Width and height are set as inline styles from renderTimeline() so they
       always override any global svg { width:100% } rules in the host stylesheet.
       The rules below are a secondary guard. */
    max-width: none;
    overflow: visible;
}

/* Bar rectangles */
.fc-oe__tlBar {
    /* SVG <g> grouping element — no visual styles needed,
       but declared for completeness and future hover expansion. */
}

.fc-oe__tlRect {
    fill: #6aaa20;
    opacity: .8;
    cursor: default;
    transition: opacity .15s;
}

.fc-oe__tlRect:hover {
    opacity: 1;
}

/* Year label text below each bar */
.fc-oe__tlLabel {
    font-size: 11px;
    fill: #666;
    font-family: inherit;
    user-select: none;
}

/* X-axis baseline */
.fc-oe__tlAxisLine {
    stroke: #444;
    stroke-width: 1;
}

/* Y-axis tick labels */
.fc-oe__tlAxisY {
    font-size: 11px;
    fill: #555;
    font-family: inherit;
    user-select: none;
}

/* Horizontal guide lines at y-axis ticks */
.fc-oe__tlGuide {
    stroke: #2a2a2a;
    stroke-width: 1;
    stroke-dasharray: 2 3;
}
/* =========================================================
   Exact-line vs Position view — toggle pill + dual badge
   ========================================================= */

/* ── View toggle pill (above the games table) ── */
.fc-oe__viewToggle {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.fc-oe__viewToggleBtn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.65);
    border-radius: 999px;
    padding: 5px 13px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
    white-space: nowrap;
}

.fc-oe__viewToggleBtn:hover {
    background: rgba(255, 255, 255, 0.09);
    color: rgba(255, 255, 255, 0.9);
}

.fc-oe__viewToggleBtn.is-active {
    background: rgba(185, 255, 59, 0.14);
    border-color: rgba(185, 255, 59, 0.48);
    color: #d6ff80;
}

/* Dimmed styling when exact count is 0 */
.fc-oe__viewToggleBtn.is-zero {
    opacity: 0.55;
}

/* Non-interactive state for depth-1 openings (gamesDisabled=true).
   The button is rendered so the count remains visible, but clicking
   is prevented — the user needs to select a deeper variation. */
.fc-oe__viewToggleBtn.is-disabled,
.fc-oe__viewToggleBtn[disabled] {
    opacity: 0.40;
    cursor: not-allowed;
    pointer-events: none;
}

/* Count badge inside each toggle button */
.fc-oe__viewToggleCount {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    line-height: 1.5;
}

.fc-oe__viewToggleBtn.is-active .fc-oe__viewToggleCount {
    background: rgba(185, 255, 59, 0.20);
    color: #c8ff60;
}

/* ⓘ info icon next to the toggle */
.fc-oe__viewToggleInfo {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.3);
    cursor: help;
    user-select: none;
    line-height: 1;
    transition: color 140ms ease;
}

.fc-oe__viewToggleInfo:hover {
    color: rgba(255, 255, 255, 0.65);
}

/* ── Dual count badge in the repoCount element ── */
.fc-oe__repoCountHead {
    display: block;
}

.fc-oe__dualCount {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.fc-oe__dualCountItem {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}

.fc-oe__dualCountN {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.fc-oe__dualCountL {
    font-size: 0.85em;
    opacity: 0.6;
}

/* Both counts use the same inherited white — colour comes from the parent repoCount element */
.fc-oe__dualCountItem--exact .fc-oe__dualCountN,
.fc-oe__dualCountItem--position .fc-oe__dualCountN {
    color: inherit;
}

.fc-oe__dualCountSep {
    opacity: 0.35;
    font-size: 0.9em;
}

/* =========================================================
   Profile Card — LINE section (exact move order)
   Sits between pcIdentity and pcStatsRow.
   ========================================================= */

.fc-oe__pcLineSection {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
}

/* "This exact line" section label reuses fc-oe__pcSectionLabel */

.fc-oe__pcLineStat {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.fc-oe__pcLineCount {
    font-size: 18px;
    font-weight: 700;
    color: #e0e0e0;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.fc-oe__pcLineCountL {
    font-size: 12px;
    color: #888;
}

/* Transposition note */
.fc-oe__pcTransNote {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #6aaa20;
    margin-top: 2px;
}

.fc-oe__pcTransIcon {
    font-size: 13px;
    line-height: 1;
}

/* "This position (all move orders)" label above the stats row */
.fc-oe__pcPositionLabel {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #555;
    margin-top: 2px;
}

/* =========================================================
   Depth-1 disabled state
   Shown instead of the games table when gamesDisabled=true
   (e.g. "1.e4" — too many games to list meaningfully).
   Displays the total game count prominently alongside a
   note directing the user to select a deeper variation.
   ========================================================= */

.fc-oe__disabledState {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 36px 24px;
    text-align: center;
}

/* Large game count — the main piece of useful information */
.fc-oe__disabledCount {
    font-size: 22px;
    font-weight: 700;
    color: #d0d0d0;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

/* Explanatory note below the count */
.fc-oe__disabledNote {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.42);
    line-height: 1.6;
    max-width: 340px;
}

.fc-oe__aliasList { display: flex; flex-wrap: wrap; gap: 4px; }

.fc-oe__aliasBadge {
    font-size: 11px;
    padding: 1px 7px;
    border-radius: var(--radius-pill);
    background: var(--color-gray-20);
    color: var(--color-gray-80);
    cursor: default;
}

/* Aliases row inside the profile card identity block */
.fc-oe__pcAliases {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.fc-oe__pcAliasesLabel {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #555;
    white-space: nowrap;
}
/* ── Dual count display in the KV identity card (renderEcoDetail "Games" row) ── */
[data-role="detailGamesCount"] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.fc-oe__kvDualItem {
    white-space: nowrap;
}

.fc-oe__kvDualItem strong {
    color: #c8ff60;   /* same accent as pcStatV */
    font-weight: 700;
}

.fc-oe__kvDualSep {
    color: #444;
    font-size: 10px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   WS curation notice banner
   Shown only for anonymous (WS) visitors — data-sly-test gates the element
   server-side so UA and SUB never receive this markup.
   ═══════════════════════════════════════════════════════════════════════════ */

.fc-oe__wsNotice {
    font-size: 0.82rem;
    color: #ffaa40;
    padding: 6px 0 4px 0;
    line-height: 1.5;
}

.fc-oe__wsNotice__link {
    color: #ffaa40;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(255, 170, 64, 0.5);
    transition: color 0.15s, text-decoration-color 0.15s;
}

.fc-oe__wsNotice__link:hover {
    color: #ffc870;
    text-decoration-color: rgba(255, 200, 112, 0.8);
}

/* ═══════════════════════════════════════════════════════════════════════════
   WS nudge popover
   ═══════════════════════════════════════════════════════════════════════════ */

.fc-oe__nudge {
    position: fixed;
    z-index: 900;
    background: #1a1f1a;
    border: 1px solid rgba(200, 255, 96, 0.35);
    border-radius: 10px;
    padding: 14px 16px;
    min-width: 260px;
    max-width: 320px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
    display: flex;
    flex-direction: column;
    gap: 12px;
    animation: fc-nudge-in 0.15s ease-out;
}

@keyframes fc-nudge-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fc-oe__nudge[hidden] {
    display: none;
}

.fc-oe__nudge__msg {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.80);
    line-height: 1.45;
}

.fc-oe__nudge__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.fc-oe__nudge__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 14px;
    border-radius: 7px;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    cursor: pointer;
    border: none;
    line-height: 1;
}

.fc-oe__nudge__cta--primary {
    background: #c8ff60;
    color: #0a0c0a;
}

.fc-oe__nudge__cta--primary:hover {
    background: #d8ff80;
}

.fc-oe__nudge__cta--secondary {
    background: transparent;
    color: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.20);
}

.fc-oe__nudge__cta--secondary:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
}

.fc-oe__nudge__dismiss {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.35);
    font-size: 1rem;
    cursor: pointer;
    padding: 2px 4px;
    line-height: 1;
}

.fc-oe__nudge__dismiss:hover {
    color: rgba(255, 255, 255, 0.75);
}