/* FelixChess Move Tree Search — Step 1 UI */
.fc-mtsearch {
    --fc-bg: #202020;
    --fc-panel: #3a3a3a;
    --fc-text: #f3f3f3;
    --fc-muted: #b7b7b7;
    --fc-border: rgba(255,255,255,0.12);
    --fc-border-strong: rgba(255,255,255,0.20);
    --fc-accent: #b9ff3b; /* Felix green */
    --fc-accent-2: #8adf26;
    --fc-black: #0f0f0f;

    background: #202020;
    color: var(--fc-text);
    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;
    overflow: hidden;
    min-height: 72vh;
    display: flex;
    flex-direction: column;
}

.fc-mtsearch__inner {
    padding: 18px 18px 20px;
    /* Allow inner layout to fill the component height */
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.fc-mtsearch__tabs {
    display: flex;
    gap: 10px;
    padding: 6px 6px 14px;
    border-bottom: 1px solid var(--fc-border);
    flex-wrap: wrap;
}

.fc-mtsearch__tab {
    appearance: none;
    border: 1px solid var(--fc-border);
    background: rgba(255,255,255,0.06);
    color: var(--fc-text);
    padding: 10px 14px;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.4px;
    cursor: pointer;
    transition: transform 140ms ease, background 140ms ease, border-color 140ms ease;
}

.fc-mtsearch__tab:hover {
    background: rgba(255,255,255,0.10);
    transform: translateY(-1px);
}

.fc-mtsearch__tab.is-active {
    background: rgba(185,255,59,0.18);
    border-color: rgba(185,255,59,0.55);
    box-shadow: 0 0 0 2px rgba(185,255,59,0.12) inset;
}

.fc-mtsearch__panel {
    padding-top: 16px;

    /* Panel grows and allows tree placeholder to fill remaining space */
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.fc-mtsearch__row {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 14px;
    align-items: start;
}

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

.fc-mtsearch__label {
    padding-top: 6px;
}

.fc-mtsearch__title {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
}

.fc-mtsearch__hint {
    margin-top: 6px;
    color: var(--fc-muted);
    font-size: 13px;
    line-height: 1.35;
}

.fc-mtsearch__controls {
    display: flex;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 10px;
    min-width: 0;
}

.fc-mtsearch__inputWrap {
    position: relative;
    flex: 1 1 0%;
    width: auto;
    min-width: 0;
    max-width: 100%;
}

.fc-mtsearch__input {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 44px;
    box-sizing: border-box;
    border-radius: 12px;
    border: 1px solid var(--fc-border);
    background: rgba(0,0,0,0.22);
    color: var(--fc-text);
    padding: 0 14px;
    outline: none;
    font-size: 14px;
}

.fc-mtsearch__input:focus {
    border-color: rgba(185,255,59,0.55);
    box-shadow: 0 0 0 3px rgba(185,255,59,0.14);
}

.fc-mtsearch__iconBtn {
    flex: 0 0 46px;
    width: 46px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid var(--fc-border);
    background: rgba(255,255,255,0.06);
    color: var(--fc-text);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 140ms ease, transform 140ms ease, border-color 140ms ease;
}

.fc-mtsearch__iconBtn svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
    opacity: 0.9;
}

.fc-mtsearch__iconBtn:hover:not(:disabled) {
    background: rgba(255,255,255,0.10);
    transform: translateY(-1px);
}

.fc-mtsearch__iconBtn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.fc-mtsearch__controls > .fc-mtsearch__clearInputBtn[hidden] {
    display: none !important;
}

.fc-mtsearch__controls > .fc-mtsearch__boardBtn {
    width: 46px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid var(--fc-border);
    background: rgba(255,255,255,0.06);
    color: var(--fc-text);
    cursor: pointer;
    display: grid;
    place-items: center;
    padding: 0;
    transition: background 140ms ease, transform 140ms ease, border-color 140ms ease;
}

.fc-mtsearch__controls > .fc-mtsearch__boardBtn svg {
    width: 22px;
    height: 22px;
    opacity: 0.9;
}

.fc-mtsearch__controls > .fc-mtsearch__boardBtn:hover:not(:disabled) {
    background: rgba(255,255,255,0.10);
    transform: translateY(-1px);
}

.fc-mtsearch__controls > .fc-mtsearch__boardBtn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.fc-mtsearch__controls > .fc-mtsearch__boardBtn[hidden] {
    display: none !important;
}

.fc-mtsearch__controls > .fc-mtsearch__boardBtn.is-active {
    background: rgba(185, 255, 59, 0.14);
    border-color: rgba(185, 255, 59, 0.55);
    color: var(--fc-accent, #b9ff3b);
    box-shadow: 0 0 0 2px rgba(185, 255, 59, 0.12) inset;
}

.fc-mtsearch__controls .fc-mtsearch__boardSquare--dark {
    fill: hsl(88.66deg 30.88% 42.55%);
}

.fc-mtsearch__controls .fc-mtsearch__boardSquare--light {
    fill: #ead9b2;
}

.fc-mtsearch__input[readonly] {
    opacity: 0.65;
    cursor: default;
}

/* Results dropdown */
.fc-mtsearch__results {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(44px + 8px);
    z-index: 20;
    background: rgba(22,22,22,0.98);
    border: 1px solid var(--fc-border-strong);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(0,0,0,0.45);
}

.fc-mtsearch__resultsHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 10px 10px 12px;
    border-bottom: 1px solid var(--fc-border);
}

.fc-opening-explorer .fc-mtsearch__alternatives {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 10px 9px 12px;
    border-bottom: 1px solid var(--fc-border);
    background: rgba(255,255,255,0.025);
}

.fc-opening-explorer .fc-mtsearch__alternatives[hidden] {
    display: none;
}

.fc-opening-explorer .fc-mtsearch__alternativesLabel {
    color: var(--fc-muted);
    font-size: 12px;
    font-weight: 700;
}

.fc-opening-explorer .fc-mtsearch__alternativesList {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.fc-opening-explorer .fc-mtsearch__alternativeBtn {
    border: 1px solid var(--fc-border);
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    color: var(--fc-text);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    padding: 6px 9px;
}

.fc-opening-explorer .fc-mtsearch__alternativeBtn:hover,
.fc-opening-explorer .fc-mtsearch__alternativeBtn:focus-visible {
    border-color: rgba(185,255,59,0.45);
    background: rgba(185,255,59,0.12);
    outline: none;
}

.fc-opening-explorer .fc-mtsearch__alternativeBtn.is-active {
    border-color: rgba(185,255,59,0.72);
    background: rgba(185,255,59,0.18);
    color: var(--fc-accent);
}

.fc-mtsearch__resultsClose {
    border: 1px solid var(--fc-border);
    background: rgba(255,255,255,0.06);
    color: var(--fc-text);
    border-radius: 10px;
    width: 34px;
    height: 30px;
    cursor: pointer;
}

.fc-mtsearch__resultsBody {
    max-height: 280px;
    overflow: auto;
}

@media (min-width: 901px) {
    .fc-opening-explorer .fc-mtsearch__results {
        display: flex;
        flex-direction: column;
        height: clamp(420px, 68vh, 700px);
        max-height: calc(100vh - 120px);
    }

    .fc-opening-explorer .fc-mtsearch__resultsBody {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
    }
}

.fc-mtsearch__resultItem {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    cursor: pointer;
    display: grid;
    gap: 4px;
}

.fc-mtsearch__resultItem:hover,
.fc-mtsearch__resultItem[aria-selected="true"] {
    background: rgba(185,255,59,0.12);
}

.fc-mtsearch__resultTop {
    display: flex;
    gap: 10px;
    align-items: baseline;
    justify-content: space-between;
}

.fc-mtsearch__resultPrimary {
    font-weight: 900;
    letter-spacing: 0.3px;
}

.fc-mtsearch__resultMeta {
    color: var(--fc-muted);
    font-size: 12px;
    white-space: nowrap;
}

/* Option B: accent color on the game count when games > 0 */
.fc-mtsearch__resultCount {
    color: var(--fc-muted);
}
.fc-mtsearch__resultCount.has-games {
    color: var(--fc-accent);
    font-weight: 600;
}
.fc-mtsearch__resultCountHint {
    opacity: 0.45;
    font-size: 0.8em;
    margin-left: 1px;
}

/* Best-match badge — pinned first entry when a move sequence resolves to an ECO code */
.fc-mtsearch__bestMatch {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--fc-accent, #b9ff3b);
    opacity: .85;
    margin-right: 7px;
    vertical-align: middle;
    white-space: nowrap;
}

/* Slightly brighter row background for the best-match entry */
.fc-mtsearch__resultItem[data-best-match="true"] {
    background: rgba(185, 255, 59, 0.07);
    border-left: 2px solid rgba(185, 255, 59, 0.45);
    padding-left: 10px; /* compensate for the 2px border */
}

.fc-mtsearch__resultItem[data-best-match="true"]:hover,
.fc-mtsearch__resultItem[data-best-match="true"][aria-selected="true"] {
    background: rgba(185, 255, 59, 0.16);
}

/* Option D: dim the entire row when no games found */
.fc-mtsearch__resultItem[data-has-games="false"] {
    opacity: 0.45;
}
/* restore full opacity on hover/focus so the entry remains readable on interaction */
.fc-mtsearch__resultItem[data-has-games="false"]:hover,
.fc-mtsearch__resultItem[data-has-games="false"][aria-selected="true"] {
    opacity: 1;
}

.fc-mtsearch__resultSecondary {
    color: rgba(255,255,255,0.86);
    font-size: 13px;
    line-height: 1.25;
}

.fc-opening-explorer .fc-mtsearch__alternativeSection {
    padding: 9px 12px;
    border-top: 1px solid rgba(185,255,59,0.18);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    color: var(--fc-accent);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    background: rgba(185,255,59,0.06);
}

.fc-mtsearch__resultsFooter {
    padding: 10px 12px;
    border-top: 1px solid var(--fc-border);
}

.fc-mtsearch__muted {
    color: var(--fc-muted);
    font-size: 12px;
}

/* Selected chip */
.fc-mtsearch__selected {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.fc-mtsearch__selectedLabel {
    color: var(--fc-muted);
    font-size: 13px;
}

.fc-mtsearch__chip {
    display: flex;                 /* vertical layout */
    flex-direction: column;
    gap: 4px;

    padding: 8px 12px;
    border-radius: 12px;           /* slightly less pill-like for multi-line */
    background: rgba(185,255,59,0.14);
    border: 1px solid rgba(185,255,59,0.38);

    font-weight: 800;
    line-height: 1.2;
    max-width: 520px;
}

.fc-mtsearch__selPrimary {
    font-weight: 800;
}

.fc-mtsearch__selSecondary {
    opacity: 0.95;
}

.fc-mtsearch__selMeta {
    opacity: 0.8;
    font-size: 0.9em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fc-opening-moves-summary {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    margin: 14px 0 0;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

.fc-opening-moves-summary[hidden] {
    display: none !important;
}

.fc-opening-moves-summary__title {
    color: var(--fc-text);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
}

.fc-opening-moves-summary__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    line-height: 1.35;
}

.fc-opening-moves-summary__label {
    color: rgba(255, 255, 255, 0.48);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.fc-opening-moves-summary__badge {
    padding: 1px 7px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    font-weight: 800;
}

.fc-opening-moves-summary__slash,
.fc-opening-moves-summary__dot {
    color: rgba(255, 255, 255, 0.42);
}

.fc-opening-moves-summary__moves {
    color: rgba(255, 255, 255, 0.84);
    font-size: 13px;
    font-weight: 750;
}

.fc-opening-moves-summary__counts {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 15px;
    line-height: 1.35;
}

.fc-opening-moves-summary__counts strong {
    color: var(--fc-text);
    font-size: 15px;
    font-weight: 800;
}

.fc-mtsearch__linkBtn {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--fc-accent);
    cursor: pointer;
    font-weight: 800;
    padding: 6px 8px;
}

/* Placeholder */
.fc-mtsearch__treePlaceholder {
    position: relative;
    margin-top: 16px;
    border-radius: 12px;
    border: 1px dashed rgba(255,255,255,0.18);
    background: rgba(0,0,0,0.12);
    padding: 14px;
    /* This is the main "canvas" area (tree later) */
    flex: 1;
    min-height: 320px;   /* enough space even before tree exists */
}

.fc-mtsearch__treeTitle {
    font-weight: 900;
    letter-spacing: 0.4px;
}

.fc-mtsearch__titleRow {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
}


.fc-mtsearch__treeHint {
    margin-top: 6px;
    color: var(--fc-muted);
    font-size: 13px;
    line-height: 1.35;
}

/* ── Intent badge (Opening / Moves unified tab) ─────────────────── */
.fc-mtsearch__intentBadge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    border: 1px solid transparent;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
    user-select: none;
    pointer-events: none; /* read-only indicator */
}

/* Ensure the HTML [hidden] attribute wins over display:inline-flex above */
.fc-mtsearch__intentBadge[hidden] {
    display: none;
}

.fc-mtsearch__intentBadge.is-eco {
    background: rgba(100, 180, 255, 0.12);
    border-color: rgba(100, 180, 255, 0.38);
    color: #7eceff;
}

.fc-mtsearch__intentBadge.is-moves {
    background: rgba(185, 255, 59, 0.12);
    border-color: rgba(185, 255, 59, 0.38);
    color: var(--fc-accent);
}

.fc-mtsearch__intentBadge.is-name {
    background: rgba(255, 200, 80, 0.12);
    border-color: rgba(255, 200, 80, 0.38);
    color: #ffc850;
}

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

.fc-mtsearch__intentLabel {
    line-height: 1;
}
/* ==========================================================================
   Player chip — rich display (flag · title badge · name · ELO + stats + sparkline)
   Applied when state.mode === "player" and a player has been selected.
   ========================================================================== */

/* Row 1: flag · title · name · ELO ---------------------------------------- */
.fc-mtsearch__playerChip-identity {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    line-height: 1.2;
}

/* Flag icon — mirrors fc-flagIcon sizing from board-captions / flag-icons lib */
.fc-mtsearch__playerFlag {
    width: 20px;
    height: 14px;
    border-radius: 2px;
    object-fit: cover;
    flex-shrink: 0;
    vertical-align: middle;
}

.fc-mtsearch__playerFlag--fide {
    /* FIDE SVG is wider */
    width: 24px;
    height: 14px;
}

/* FIDE title badge (GM, IM, WGM …) */
.fc-mtsearch__playerChip-title {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--fc-accent, #b9ff3b);
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(185, 255, 59, 0.38);
    padding: 1px 6px;
    border-radius: 4px;
    white-space: nowrap;
    line-height: 1.6;
    flex-shrink: 0;
}

/* Canonical name */
.fc-mtsearch__playerChip-name {
    font-weight: 800;
    font-size: 14px;
    line-height: 1.2;
}

/* Current ELO (ratingStandard) */
.fc-mtsearch__playerChip-elo {
    font-size: 12px;
    font-weight: 600;
    color: var(--fc-muted, #b7b7b7);
    white-space: nowrap;
}

/* Row 2: game count · peak rating ------------------------------------------ */
.fc-mtsearch__playerChip-stats {
    font-size: 12px;
    color: var(--fc-muted, #b7b7b7);
    line-height: 1.3;
    margin-top: 1px;
}

/* Row 3: mini year-sparkline ----------------------------------------------- */
.fc-mtsearch__playerChip-timeline {
    display: flex;
    align-items: flex-end;  /* bars grow upward from bottom */
    gap: 1px;
    height: 22px;
    margin-top: 4px;
    overflow: hidden;
    border-bottom: 1px solid rgba(185, 255, 59, 0.18);
}

.fc-mtsearch__playerChip-bar {
    flex: 1;
    min-width: 2px;
    max-width: 8px;
    background: rgba(185, 255, 59, 0.45);
    border-radius: 1px 1px 0 0;
    transition: background 120ms ease;
    cursor: default;
}

.fc-mtsearch__playerChip-bar:hover {
    background: rgba(185, 255, 59, 0.88);
}

/* ==========================================================================
   Board panel — "Select a move to begin" hint strip
   Shown automatically when the panel auto-opens in Player / Event mode
   before any tree node has been clicked. Hidden on first node click and on clear.
   ========================================================================== */
.fc-mtsearch__boardHint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 14px;
    background: rgba(185, 255, 59, 0.06);
    border-bottom: 1px solid rgba(185, 255, 59, 0.14);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.45px;
    color: rgba(185, 255, 59, 0.72);
    user-select: none;
    pointer-events: none; /* read-only indicator */
}

/* Ensure the HTML [hidden] attribute wins over display:flex above */
.fc-mtsearch__boardHint[hidden] {
    display: none;
}

.fc-mtsearch__boardHint svg {
    flex-shrink: 0;
    width: 13px;
    height: 13px;
}

/* ==========================================================================
   Player banner — compact root identity anchored at tree centerline
   ========================================================================== */
.fc-mt-playerBanner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: 10px;
    justify-content: center;
    padding: 0 4px 6px;
    margin-bottom: 6px;
    line-height: 1;
    user-select: none;
}

.fc-mt-playerBanner__spacer {
    min-width: 0;
}

/* Wraps flag · title badge · name · ELO — this is the tree anchor */
.fc-mt-playerBanner__info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    text-align: center;
}

/* ==========================================================================
   White / All / Black colour toggle
   Three pill buttons at the right edge of the player banner.
   All three must be clearly legible at all times — active and inactive.
   ========================================================================== */
.fc-mt-playerBanner__colorToggle {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
}

.fc-movetree-player-root {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: 10px;
    width: 100%;
    height: 100%;
    line-height: 1;
}

.fc-movetree-player-root__anchor {
    grid-column: 2;
    justify-self: center;
    min-width: 0;
}

.fc-movetree-player-root__identity {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(11, 107, 43, 0.24);
    border-radius: 999px;
    padding: 5px 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.10);
}

.fc-movetree-player-root__side-toggle {
    grid-column: 3;
    justify-self: start;
}

.fc-mt-colorBtn {
    appearance: none;
    /* Solid opaque border + background so buttons are always visible
       regardless of the placeholder colour beneath the banner */
    border: 1px solid rgba(255, 255, 255, 0.40);
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.85);
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
    white-space: nowrap;
    line-height: 1.5;
}

.fc-movetree-player-root .fc-mt-colorBtn {
    border-color: rgba(11, 107, 43, 0.28);
    background: rgba(255, 255, 255, 0.92);
    color: #244018;
    padding: 3px 9px;
}

.fc-mt-colorBtn:hover:not(.is-active) {
    background: rgba(255, 255, 255, 0.20);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.60);
}

.fc-movetree-player-root .fc-mt-colorBtn:hover:not(.is-active) {
    background: rgba(11, 107, 43, 0.10);
    border-color: rgba(11, 107, 43, 0.45);
    color: #0b6b2b;
}

/* White active — solid light fill */
.fc-mt-colorBtn[data-color="white"].is-active {
    background: rgba(255, 255, 255, 0.88);
    border-color: #ffffff;
    color: #1a1a1a;
}

.fc-movetree-player-root .fc-mt-colorBtn[data-color="white"].is-active {
    background: #ffffff;
    border-color: #111111;
    color: #111111;
}

/* All active — Felix green */
.fc-mt-colorBtn[data-color="all"].is-active {
    background: rgba(185, 255, 59, 0.22);
    border-color: rgba(185, 255, 59, 0.70);
    color: #b9ff3b;
}

.fc-movetree-player-root .fc-mt-colorBtn[data-color="all"].is-active {
    background: rgba(11, 107, 43, 0.88);
    border-color: #0b6b2b;
    color: #ffffff;
}

/* Black active — near-black fill with clear white border */
.fc-mt-colorBtn[data-color="black"].is-active {
    background: rgba(20, 20, 20, 0.95);
    border-color: rgba(255, 255, 255, 0.60);
    color: #ffffff;
}

.fc-movetree-player-root .fc-mt-colorBtn[data-color="black"].is-active {
    background: #141414;
    border-color: #141414;
    color: #ffffff;
}

/* ==========================================================================
   Recency dot — small coloured circle to the left of each move node.
   Signals how recently the position was played (player trees only for now).

   Positioning: cx = -40px (mirror of the ⓘ info dot at +40px), cy = 0.
   Size: r = 4px — unobtrusive but clearly visible at tree zoom levels.

   Colour bands:
     Green  (.--recent) — played within the last ~12 months
     Amber  (.--aging)  — last played 2–3 years ago
     Red    (.--stale)  — last played 4+ years ago
   ========================================================================== */
.fc-mt-recencyDot {
    /* Base styles shared by all three variants */
    stroke: none;
    opacity: 0.85;
    cursor: default;
    transition: opacity 120ms ease, r 120ms ease;
}

.fc-mt-recencyDot:hover {
    opacity: 1;
}

/* Green — active / recent repertoire */
.fc-mt-recencyDot--recent {
    fill: #6ee86e;   /* bright green, readable on dark SVG background */
}

/* Amber — aging but not abandoned */
.fc-mt-recencyDot--aging {
    fill: #f5c842;
}

/* Red — line appears to have been dropped */
.fc-mt-recencyDot--stale {
    fill: #e05c5c;
}

/* "Last seen: YYYY" row in the hover tooltip — inherits tooltip colour but
   carries the recency dot colour as a left accent border for quick scanning. */
.fc-mt-tooltip__row--recency {
    border-left: 3px solid rgba(255, 255, 255, 0.25);
    padding-left: 6px;
    margin-top: 2px;
}

/* ==========================================================================
   Year label — "↻ YYYY" shown below each move node in player trees.
   Sits at y=+14px below the node center, inside the enlarged nodeDX=34 gap.
   Coloured to match the companion recency dot so the two read as one unit.
   ========================================================================== */
.fc-mt-nodeYear {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.3px;
    /* Default / fallback colour when recency band is unknown */
    fill: rgba(255, 255, 255, 0.32);
    pointer-events: none;   /* year text is decorative — don't swallow clicks */
    user-select: none;
}

/* Match recency dot colours so dot + year read as a single indicator */
.fc-mt-nodeYear--recent { fill: #6ee86e; }   /* green  — active */
.fc-mt-nodeYear--aging  { fill: #f5c842; }   /* amber  — fading */
.fc-mt-nodeYear--stale  { fill: #e05c5c; }   /* red    — abandoned */

/* Ensure [hidden] always wins over display:flex on the hint strip */
.fc-mtsearch__boardHint[hidden] { display: none; }

/* ==========================================================================
   Position card — Result trend chart
   Vertical stacked W/D/L bars, one per year.
   Placed between the game-count timeline and the players table.

   Layout: flex row of equal-width columns, each containing:
     - a bar (fixed 42px tall) divided proportionally into W/D/L segments
     - a year label beneath (shown only for first, last, and midpoint years)

   Colour palette mirrors the existing WDB bar:
     W = near-white   (White wins)
     D = neutral gray (Draws)
     L = near-black   (Black wins / losses from White's perspective)
   ========================================================================== */
.fc-mt-poscard__rt-chart {
    display: flex;
    gap: 2px;
    padding: 4px 0 2px;
    align-items: flex-end;
}

.fc-mt-poscard__rt-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.fc-mt-poscard__rt-bar {
    width: 100%;
    height: 42px;
    display: flex;
    flex-direction: column;
    border-radius: 2px;
    overflow: hidden;
    cursor: default;
}

/* White-wins segment — top of bar */
.fc-mt-poscard__rt-w {
    background: rgba(240, 240, 230, 0.88);
    flex-shrink: 0;
}

/* Draws segment — middle */
.fc-mt-poscard__rt-d {
    background: rgba(140, 140, 140, 0.65);
    flex-shrink: 0;
}

/* Black-wins segment — bottom */
.fc-mt-poscard__rt-b {
    background: rgba(28, 28, 28, 0.90);
    flex-shrink: 0;
}

/* Year label beneath each bar */
.fc-mt-poscard__rt-yr {
    font-size: 8px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.38);
    white-space: nowrap;
    overflow: hidden;
    line-height: 1;
    min-height: 9px;   /* preserve row height even for hidden labels */
}

/* ==========================================================================
   Player Scout Panel
   A persistent, position:fixed left-side panel that accompanies the player
   move tree.  Opened automatically when a player is selected; updates on
   each tree-node click; closed on Clear.

   Colour palette and variable usage deliberately mirrors the position card
   (.fc-mt-poscard__*) so both surfaces feel like the same design system.
   ========================================================================== */
.fc-scout-panel {
    position: fixed;
    left: 16px;
    top: 88px;
    width: 288px;
    max-height: calc(100vh - 108px);
    overflow-y: auto;
    z-index: 1100;

    background: #2a2a2a;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    color: #f3f3f3;
    font-size: 13px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55);

    /* Custom scrollbar — subtle on dark background */
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
}

.fc-scout-panel::-webkit-scrollbar        { width: 4px; }
.fc-scout-panel::-webkit-scrollbar-thumb  { background: rgba(255,255,255,0.15); border-radius: 2px; }

/* ── Header ─────────────────────────────────────────────────────────── */
.fc-scout-panel__hd {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    position: sticky;
    top: 0;
    background: #2a2a2a;
    z-index: 1;
}

/* Stacks player ident row + optional color-filter badge vertically */
.fc-scout-panel__hd-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.fc-scout-panel__player {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

/* Color-filter badge (⬜ As White / ⬛ As Black) shown below player name */
.fc-scout-panel__color-filter { line-height: 1; }

.fc-scout-panel__color-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.fc-scout-panel__color-badge--white {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.30);
    color: #ffffff;
}

.fc-scout-panel__color-badge--black {
    background: rgba(0, 0, 0, 0.30);
    border-color: rgba(255, 255, 255, 0.22);
    color: rgba(255, 255, 255, 0.80);
}

/* "No games" empty state — styled to be legible but not alarming */
.fc-scout-panel__no-games {
    font-size: 12px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.45);
    padding: 4px 0 2px;
}

.fc-scout-panel__flag { flex-shrink: 0; }

.fc-scout-panel__title {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #b9ff3b;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(185, 255, 59, 0.38);
    padding: 1px 5px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}

.fc-scout-panel__name {
    font-weight: 800;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fc-scout-panel__elo {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
    flex-shrink: 0;
}

.fc-scout-panel__close {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.6);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 120ms ease;
}
.fc-scout-panel__close:hover { background: rgba(255, 255, 255, 0.12); }

/* ── Body ────────────────────────────────────────────────────────────── */
.fc-scout-panel__body { padding: 10px 0 6px; }

/* ── Hint (initial state) ─────────────────────────────────────────────── */
.fc-scout-panel__hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 20px 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: rgba(185, 255, 59, 0.55);
}
.fc-scout-panel__hint svg {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

/* ── Move label ──────────────────────────────────────────────────────── */
.fc-scout-panel__move-lbl {
    padding: 6px 14px 10px;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.3px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    margin-bottom: 4px;
}

/* ── Loading ──────────────────────────────────────────────────────────── */
.fc-scout-panel__loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 14px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 12px;
}

.fc-scout-panel__spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(185, 255, 59, 0.25);
    border-top-color: #b9ff3b;
    border-radius: 50%;
    animation: fc-scout-spin 0.7s linear infinite;
    flex-shrink: 0;
}
@keyframes fc-scout-spin { to { transform: rotate(360deg); } }

/* ── Error ────────────────────────────────────────────────────────────── */
.fc-scout-panel__err {
    padding: 12px 14px;
    font-size: 12px;
    color: #e05c5c;
    line-height: 1.4;
}

/* ── Sections ────────────────────────────────────────────────────────── */
.fc-scout-panel__section {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.fc-scout-panel__section:last-of-type { border-bottom: none; }

.fc-scout-panel__section-lbl {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.38);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── Player stats ─────────────────────────────────────────────────────── */
.fc-scout-panel__stat-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 8px;
}
.fc-scout-panel__stat-big {
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
}
.fc-scout-panel__stat-sub {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}
.fc-scout-panel__stat-sub.muted { color: rgba(255, 255, 255, 0.3); }

.fc-scout-panel__color-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    margin-bottom: 4px;
}
.fc-scout-panel__color-lbl { color: rgba(255, 255, 255, 0.5); width: 44px; flex-shrink: 0; }
.fc-scout-panel__color-g   { color: rgba(255, 255, 255, 0.4); width: 22px; text-align: right; flex-shrink: 0; }

/* Shared W/D/L colour classes */
.fc-scout-panel__body .wc { color: #d4edda; font-weight: 700; }
.fc-scout-panel__body .dc { color: #aaa;     font-weight: 700; }
.fc-scout-panel__body .lc { color: #e05c5c;  font-weight: 700; }

/* ── Recency badge ────────────────────────────────────────────────────── */
.fc-scout-panel__recency {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 999px;
    border: 1px solid transparent;
}
.fc-scout-panel__recency--recent { color: #6ee86e; border-color: rgba(110,232,110,0.35); }
.fc-scout-panel__recency--aging  { color: #f5c842; border-color: rgba(245,200,66,0.35);  }
.fc-scout-panel__recency--stale  { color: #e05c5c; border-color: rgba(224,92,92,0.35);   }
.fc-scout-panel__recency--unknown{ color: rgba(255,255,255,0.4); }

/* ── W/D/B bar ────────────────────────────────────────────────────────── */
.fc-scout-panel__wdb { margin-top: 6px; }

.fc-scout-panel__wdb-bar {
    display: flex;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
}
.fc-scout-panel__wdb-w { background: rgba(240, 240, 230, 0.88); }
.fc-scout-panel__wdb-d { background: rgba(140, 140, 140, 0.65); }
.fc-scout-panel__wdb-b { background: rgba(28,  28,  28,  0.90); border-left: 1px solid rgba(255,255,255,0.1); }

.fc-scout-panel__wdb-lbl {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    margin-top: 3px;
}
.fc-scout-panel__wdb-lbl .w { color: rgba(240,240,230,0.8); }
.fc-scout-panel__wdb-lbl .d { color: rgba(160,160,160,0.8); text-align: center; }
.fc-scout-panel__wdb-lbl .b { color: rgba(200,200,200,0.7); }

/* ── Result trend chart ───────────────────────────────────────────────── */
.fc-scout-panel__rt-chart {
    display: flex;
    gap: 2px;
    padding: 4px 0 2px;
    align-items: flex-end;
}
.fc-scout-panel__rt-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.fc-scout-panel__rt-bar {
    width: 100%;
    height: 36px;
    display: flex;
    flex-direction: column;
    border-radius: 2px;
    overflow: hidden;
    cursor: default;
}
.fc-scout-panel__rt-w { background: rgba(240,240,230,0.88); flex-shrink: 0; }
.fc-scout-panel__rt-d { background: rgba(140,140,140,0.65); flex-shrink: 0; }
.fc-scout-panel__rt-b { background: rgba(28,28,28,0.90);    flex-shrink: 0; }
.fc-scout-panel__rt-yr {
    font-size: 7px;
    font-weight: 600;
    color: rgba(255,255,255,0.35);
    white-space: nowrap;
    min-height: 8px;
}

/* ── Opponents table ──────────────────────────────────────────────────── */
.fc-scout-panel__opp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}
.fc-scout-panel__opp-table thead th {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255,255,255,0.38);
    text-align: left;
    padding: 0 4px 6px;
    border-bottom: 1px solid rgba(255,255,255,0.10);
}
.fc-scout-panel__opp-table tbody tr:hover { background: rgba(255,255,255,0.04); }
.fc-scout-panel__opp-table td { padding: 4px; vertical-align: middle; }

.fc-scout-panel__opp-flag { width: 20px; }
.fc-scout-panel__opp-name { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-scout-panel__opp-g    { text-align: right; color: rgba(255,255,255,0.5); width: 24px; }
.fc-scout-panel__opp-wdl  { font-size: 10px; white-space: nowrap; padding-left: 6px; }
.fc-scout-panel__opp-wdl .wc { color: #d4edda; }
.fc-scout-panel__opp-wdl .dc { color: #999; }
.fc-scout-panel__opp-wdl .lc { color: #e05c5c; }

/* ── Muted text ───────────────────────────────────────────────────────── */
.fc-scout-panel__muted {
    font-size: 12px;
    color: rgba(255,255,255,0.38);
    padding: 4px 0;
}

/* ── Actions ──────────────────────────────────────────────────────────── */
.fc-scout-panel__actions {
    padding: 10px 14px 12px;
}
.fc-scout-panel__btn {
    width: 100%;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(185, 255, 59, 0.38);
    background: rgba(185, 255, 59, 0.10);
    color: #b9ff3b;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    letter-spacing: 0.3px;
    transition: background 120ms ease;
}
.fc-scout-panel__btn:hover {
    background: rgba(185, 255, 59, 0.18);
}
/* ==========================================================================
   Move tree — empty state (opening in ECO database but no games uploaded yet)
   ========================================================================== */
.fc-mt-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 48px 24px;
    text-align: center;
    color: var(--fc-muted, #b7b7b7);
}

.fc-mt-empty__icon {
    font-size: 36px;
    color: var(--fc-muted, #b7b7b7);
    line-height: 1;
}

.fc-mt-empty__title {
    font-size: 16px;
    font-weight: 800;
    color: var(--fc-muted, #b7b7b7);
}

.fc-mt-empty__sub {
    font-size: 13px;
    line-height: 1.45;
    max-width: 340px;
    color: var(--fc-muted, #b7b7b7);
}

.fc-mt-fallback-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 8px 4px 10px;
    padding: 10px 12px;
    border: 1px solid rgba(79, 143, 0, 0.22);
    border-radius: 10px;
    background: rgba(79, 143, 0, 0.08);
    color: #4f5b3a;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 650;
}

.fc-mt-fallback-notice__content {
    flex: 1;
    min-width: 0;
}

.fc-mt-fallback-notice__close {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    opacity: 0.72;
    padding: 0 2px;
}

.fc-mt-fallback-notice__close:hover,
.fc-mt-fallback-notice__close:focus-visible {
    opacity: 1;
}

/* =============================================================================
   fc-entry — Mode B PGN / Move Sequence Entry Bar
   (movetree-entry.js + content.html)
   ============================================================================= */

.fc-entry {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 10px 0 0;
    border: 1px solid var(--fc-border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    overflow: hidden; /* clip children to rounded corners */
}

/* ── Textarea ──────────────────────────────────────────────────────────────── */

.fc-entry__pgn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    min-height: 52px;
    padding: 10px 12px;
    background: transparent;
    color: var(--fc-text);
    border: none;
    border-bottom: 1px solid var(--fc-border);
    font: 13px/1.5 var(--fc-mono, 'JetBrains Mono', 'Fira Mono', 'Courier New', monospace);
    outline: none;
    transition: border-color 140ms ease;
}

.fc-entry__pgn::placeholder {
    color: rgba(255, 255, 255, 0.28);
    font-style: italic;
}

.fc-entry__pgn:focus {
    border-bottom-color: rgba(185, 255, 59, 0.50);
    background: rgba(185, 255, 59, 0.03);
}

/* ── Feedback row ──────────────────────────────────────────────────────────── */
/* Hidden by default; movetree-entry.js reveals when moves are detected.        */

.fc-entry__feedback {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 6px 12px;
    border-bottom: 1px solid var(--fc-border);
    font-size: 12px;
    color: var(--fc-muted);
    min-height: 34px;
}

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

.fc-entry__moveCount {
    font-weight: 600;
    color: var(--fc-accent);
    letter-spacing: 0.2px;
}

/* "Analyze to move [N]" label + number input */
.fc-entry__plyLabel {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: default;
    user-select: none;
    color: var(--fc-muted);
}

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

.fc-entry__plyInput {
    appearance: textfield; /* remove spinner arrows on Firefox */
    -moz-appearance: textfield;
    width: 52px;
    padding: 2px 6px;
    border: 1px solid var(--fc-border-strong);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--fc-text);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    outline: none;
    transition: border-color 120ms ease, background 120ms ease;
}

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

.fc-entry__plyInput::-webkit-inner-spin-button,
.fc-entry__plyInput::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.fc-entry__plyInput:focus {
    border-color: rgba(185, 255, 59, 0.55);
    background: rgba(185, 255, 59, 0.07);
}

/* ── ECO / game metadata strip ─────────────────────────────────────────────── */
/* Hidden by default; shown when PGN tag pairs are detected.                   */

.fc-entry__eco {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    padding: 5px 12px;
    border-bottom: 1px solid var(--fc-border);
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--fc-muted);
}

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

/* ECO code pill — prominent green badge */
.fc-entry__ecoBadge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(185, 255, 59, 0.15);
    border: 1px solid rgba(185, 255, 59, 0.35);
    color: var(--fc-accent);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.5px;
}

/* Opening name — slightly brighter muted */
.fc-entry__ecoName {
    color: rgba(255, 255, 255, 0.70);
    font-weight: 500;
}

/* "White vs Black" player names */
.fc-entry__ecoPlayers {
    color: var(--fc-muted);
}

/* Event name and date */
.fc-entry__ecoEvent,
.fc-entry__ecoDate {
    color: rgba(255, 255, 255, 0.40);
    font-size: 11px;
}

/* Separator dot between chips */
.fc-entry__ecoSep {
    color: rgba(255, 255, 255, 0.20);
    user-select: none;
    font-size: 10px;
}

/* ── Action bar ────────────────────────────────────────────────────────────── */

.fc-entry__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
}

/* "Build Tree →" apply button */
.fc-entry__pgn-apply {
    appearance: none;
    border: 1px solid rgba(185, 255, 59, 0.45);
    background: rgba(185, 255, 59, 0.12);
    color: var(--fc-accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 5px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, transform 100ms ease;
    white-space: nowrap;
}

.fc-entry__pgn-apply:hover {
    background: rgba(185, 255, 59, 0.22);
    border-color: rgba(185, 255, 59, 0.70);
    transform: translateY(-1px);
}

.fc-entry__pgn-apply:active {
    transform: translateY(0);
}

/* ✕ clear button */
.fc-entry__clear-btn {
    appearance: none;
    border: 1px solid var(--fc-border);
    background: transparent;
    color: var(--fc-muted);
    font-size: 13px;
    font-weight: 700;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 120ms ease, color 120ms ease;
    flex-shrink: 0;
}

.fc-entry__clear-btn:hover {
    background: rgba(255, 255, 255, 0.10);
    color: var(--fc-text);
}

/* Prevent ghost layout when [hidden] meets display:flex */
.fc-entry__clear-btn[hidden] {
    display: none;
}

/* ── Inline error message ──────────────────────────────────────────────────── */

.fc-entry__error {
    padding: 5px 12px;
    font-size: 12px;
    color: #ff7070;
    border-top: 1px solid rgba(255, 100, 100, 0.20);
    background: rgba(255, 50, 50, 0.07);
    animation: fc-entry-fadeIn 200ms ease;
}

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

@keyframes fc-entry-fadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* =============================================================================
   PGN paste-detect UI — inline feedback inside fc-mtsearch__inputWrap
   Revealed by movetree-search.js when a PGN is pasted into the main input.
   ============================================================================= */

/* Input field visual state when a PGN summary is displayed */
.fc-mtsearch__input.is-pgn {
    color: var(--fc-accent);
    font-style: italic;
    font-weight: 600;
    letter-spacing: 0.2px;
}

/* ── Feedback row: move count + ply picker + Build Tree button ─────────────── */

.fc-mtsearch__pgnFeedback {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding: 7px 4px 4px;
    font-size: 12px;
    color: var(--fc-muted);
}

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

.fc-mtsearch__pgnMoveCount {
    font-weight: 600;
    color: var(--fc-accent);
    letter-spacing: 0.2px;
    white-space: nowrap;
}

/* "Analyze to move [N]" label + spinner */
.fc-mtsearch__pgnPlyLabel {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: default;
    user-select: none;
    white-space: nowrap;
}

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

.fc-mtsearch__pgnPlyInput {
    appearance: textfield;
    -moz-appearance: textfield;
    width: 52px;
    padding: 2px 6px;
    border: 1px solid var(--fc-border-strong);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--fc-text);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    outline: none;
    transition: border-color 120ms ease, background 120ms ease;
}

.fc-mtsearch__pgnPlyInput::-webkit-inner-spin-button,
.fc-mtsearch__pgnPlyInput::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.fc-mtsearch__pgnPlyInput:focus {
    border-color: rgba(185, 255, 59, 0.55);
    background: rgba(185, 255, 59, 0.07);
}

/* "Build Tree →" apply button inside the feedback row */
.fc-mtsearch__pgnApplyBtn {
    appearance: none;
    border: 1px solid rgba(185, 255, 59, 0.45);
    background: rgba(185, 255, 59, 0.12);
    color: var(--fc-accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 4px 14px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 120ms ease, border-color 120ms ease, transform 100ms ease;
}

.fc-mtsearch__pgnApplyBtn:hover {
    background: rgba(185, 255, 59, 0.22);
    border-color: rgba(185, 255, 59, 0.70);
    transform: translateY(-1px);
}

.fc-mtsearch__pgnApplyBtn:active {
    transform: translateY(0);
}

/* ── ECO / game metadata strip ─────────────────────────────────────────────── */

.fc-mtsearch__pgnMeta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    padding: 4px 2px 2px;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--fc-muted);
}

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

.fc-mtsearch__pgnBadge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(185, 255, 59, 0.15);
    border: 1px solid rgba(185, 255, 59, 0.35);
    color: var(--fc-accent);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.5px;
}

.fc-mtsearch__pgnName {
    color: rgba(255, 255, 255, 0.70);
    font-weight: 500;
}

.fc-mtsearch__pgnPlayers {
    color: var(--fc-muted);
}

.fc-mtsearch__pgnEvent,
.fc-mtsearch__pgnDate {
    color: rgba(255, 255, 255, 0.40);
    font-size: 11px;
}

.fc-mtsearch__pgnSep {
    color: rgba(255, 255, 255, 0.20);
    user-select: none;
    font-size: 10px;
}

/* "📋 PGN game" intent badge variant */
.fc-mtsearch__intentBadge.is-pgn {
    background: rgba(185, 255, 59, 0.10);
    border-color: rgba(185, 255, 59, 0.30);
    color: var(--fc-accent);
}
/* =============================================================================
   PGN paste UI — pgnMeta / pgnEcoInfo strips
   ============================================================================= */

/* "Analyzing game" fixed prefix chip */
.fc-mtsearch__pgnAnalyze {
    color: var(--fc-accent);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

/* ECO enrichment strip — resolved asynchronously */
.fc-mtsearch__pgnEcoInfo {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    padding: 5px 4px 3px;
    font-size: 11.5px;
    line-height: 1.5;
    border-top: 1px solid var(--fc-border);
}
.fc-mtsearch__pgnEcoInfo[hidden] { display: none; }

/* "B22 · B22a" ECO + SCID code pill */
.fc-mtsearch__ecoInfoCode {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(185, 255, 59, 0.12);
    border: 1px solid rgba(185, 255, 59, 0.30);
    color: var(--fc-accent);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

/* Opening name */
.fc-mtsearch__ecoInfoName {
    color: rgba(255, 255, 255, 0.75);
    font-weight: 500;
}

/* Canonical ECO move sequence */
.fc-mtsearch__ecoInfoSeq {
    color: rgba(255, 255, 255, 0.40);
    font-size: 11px;
    font-style: italic;
}

/* "📋 PGN game" intent badge variant */
.fc-mtsearch__intentBadge.is-pgn {
    background: rgba(185, 255, 59, 0.10);
    border-color: rgba(185, 255, 59, 0.30);
    color: var(--fc-accent);
}