/* The custom CSS for the chessboard viewer */
/* =========================================================
   FelixChess board viewer shell
   ========================================================= */

.fc-boardViewer {
    box-sizing: border-box;
    width: 100%;
}

.fc-boardViewer:focus {
    outline: none;
    box-shadow: none;
}

.fc-boardViewer:focus-visible {
    outline: none;
    box-shadow: none;
}

.fc-boardViewer__topMeta[hidden],
.fc-boardViewer__nav[hidden],
.fc-boardViewer__moveList[hidden] {
    display: none !important;
}

.fc-boardViewer__main,
.fc-boardViewer__boardPane,
.fc-boardViewer__board {
    min-width: 0;
}

.fc-boardViewer__board {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: block;
    line-height: 0;
    position: relative;
}

/* cm-chessboard injects an inner div container.
   FIX: use !important to prevent the library from overriding dimensions
   with inline styles during its internal resize() calls. If clientWidth
   is read at an intermediate layout state (e.g. during animation or when
   a ResizeObserver fires mid-reflow), the library can permanently lock
   the inner div to a wrong pixel size. Anchoring it to 100%/100% !important
   keeps the board correctly sized regardless of what the library does. */
.fc-boardViewer__board > div {
    width: 100% !important;
    height: 100% !important;
    min-width: 100%;
    min-height: 100%;
}

/* Force the SVG to fill the board area cleanly.
   FIX: also !important here for the same reason — cm-chessboard sets
   explicit pixel width/height attributes (or inline styles) on the SVG
   element through its resize() method. CSS wins over presentation
   attributes, but !important wins over inline styles too. */
.fc-boardViewer__board svg.cm-chessboard {
    display: block;
    width: 100% !important;
    height: 100% !important;
    min-width: 100%;
    min-height: 100%;
    overflow: visible;
}

body .cm-chessboard .board .square.black,
.fc-boardViewer__board .cm-chessboard.default .board .square.black,
.fc-bmi__board .cm-chessboard.default .board .square.black {
    fill: hsl(88.66deg 30.88% 42.55%);
}

/*
 * IMPORTANT:
 * cm-chessboard uses generic inner SVG class names like:
 *   .board
 *   .coordinates
 * Those can easily collide with site-wide CSS.
 * Reset them inside the FelixChess board scope.
 */
.fc-boardViewer__board svg.cm-chessboard g.board,
.fc-boardViewer__board svg.cm-chessboard g.coordinates,
.fc-boardViewer__board svg.cm-chessboard g.markers,
.fc-boardViewer__board svg.cm-chessboard g.pieces {
    transform: none !important;
    transform-origin: center center !important;
    clip-path: none !important;
    filter: none !important;
    opacity: 1 !important;
}

/* Defensive reset in case some global ".board" rule leaks in */
.fc-boardViewer__board svg.cm-chessboard g.board {
    display: inline !important;
}

/* Make board use the full available width in Opening Explorer */
.fc-oe__boardWrap .fc-boardViewer__board {
    max-width: 100%;
}
.fc-oe__boardWrap .fc-boardViewer__analyzer {
    max-width: 100%;
}

.fc-oe__boardWrap .fc-boardViewer__boardPane {
    max-width: 100%;
}

/* =========================================================
   Captions / player metadata
   ========================================================= */

.fc-flag {
    display: inline-block;
    width: 16px;
    height: 12px;
    margin-right: 6px;
    vertical-align: -1px;
    object-fit: contain;
}

.fc-flag--fide {
    width: 18px;
    height: 12px;
}

.fc-boardViewer__topMeta {
    margin-bottom: 8px;
}

.fc-boardViewer__event {
    font-size: 13px;
    line-height: 1.3;
    font-weight: 600;
    opacity: 0.72;
    margin-bottom: 6px;
    text-align: left;
}

.fc-boardViewer__player {
    text-align: left;
    font-size: 13px;
    line-height: 1.3;
    margin: 4px 0;
    opacity: 0.95;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    white-space: nowrap;
    min-width: 0;
}
.fc-boardViewer__name {
    font-weight: 700;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fc-boardViewer__player-name {
    white-space: nowrap;
}

.fc-boardViewer__player-rating {
    white-space: nowrap;
}
.fc-boardViewer__player--black {
    margin-bottom: 6px;
}

.fc-boardViewer__player--white {
    margin-top: 6px;
    margin-bottom: 8px;
}

.fc-boardViewer__title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 18px;
    padding: 0 6px;
    border-radius: 5px;
    background: rgba(191, 74, 74, 0.9);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.fc-boardViewer__name {
    font-weight: 700;
}

.fc-boardViewer__rating {
    opacity: 0.78;
    font-weight: 600;
}

.fc-flagIcon {
    font-size: 14px;
    line-height: 1;
    margin-right: 2px;
}

.fc-boardViewer__event[hidden],
.fc-boardViewer__player[hidden],
.fc-boardViewer__topMeta[hidden] {
    display: none !important;
}

/* =========================================================
   Navigation
   ========================================================= */

.fc-boardViewer__nav {
    margin-top: 12px;
}

.fc-boardViewer__navInner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.fc-boardViewer__navBtn {
    min-width: 38px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    color: inherit;
    cursor: pointer;
}

.fc-boardViewer__navBtn:disabled {
    opacity: 0.4;
    cursor: default;
}

.fc-boardViewer__navBtn.fc-board-sound-toggle {
    font-size: 17px;
    line-height: 1;
    transition: color 140ms ease, opacity 140ms ease, border-color 140ms ease, background 140ms ease;
}

.fc-boardViewer__navBtn.fc-board-sound-toggle.is-on {
    color: #ffffff;
    opacity: 1;
}

.fc-boardViewer__navBtn.fc-board-sound-toggle.is-off {
    color: rgba(255,255,255,0.42);
    opacity: 0.72;
}

.fc-boardViewer__navStatus {
    min-width: 70px;
    text-align: center;
    opacity: 0.85;
    font-size: 13px;
}

/* =========================================================
   Move list
   ========================================================= */

.fc-boardViewer__moveList {
    box-sizing: border-box;
    min-width: 0;
    overflow: auto;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.4;
    position: relative;
}

.fc-boardViewer__moveListInner {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fc-boardViewer__moveRow {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px;
    align-items: center;
}

.fc-boardViewer__moveNo {
    font-size: 11px;
    opacity: 0.6;
    font-weight: 700;
    text-align: right;
    padding-right: 4px;
}

.fc-boardViewer__move {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    padding: 3px 6px;
    border-radius: 6px;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    /* Smooth opacity transitions as the user steps through the game */
    transition: opacity 120ms ease, background 120ms ease;
}

.fc-boardViewer__move:hover {
    background: rgba(255,255,255,0.08);
}

.fc-boardViewer__move:focus {
    outline: none;
}

.fc-boardViewer__move:focus-visible {
    background: rgba(140,190,70,0.18);
    outline: 1px solid rgba(140,190,70,0.85);
    outline-offset: 2px;
}

.fc-boardViewer__move.is-active {
    background: rgba(140,190,70,0.22);
    outline: 1px solid rgba(140,190,70,0.85);
}

/*
 * Past moves: played positions, dimmed to recede visually.
 * Opacity is intentionally not too low — moves must remain readable
 * and clickable for quick navigation back to earlier positions.
 * The active move overrides this, so the current position is always
 * full-brightness regardless of its position in the game.
 */
.fc-boardViewer__move.is-past {
    opacity: 0.38;
}

.fc-boardViewer__move.is-past:hover {
    opacity: 0.75;
}

.fc-boardViewer__move--empty {
    display: inline-block;
    min-height: 1px;
}

.fc-boardViewer__sideVariationRow {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 6px;
    align-items: start;
    margin: -1px 0 2px;
    color: rgba(230, 230, 230, 0.62);
    font-size: 12px;
    line-height: 1.35;
}

.fc-boardViewer__sideVariationBody {
    grid-column: 2;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 3px 8px;
    padding: 2px 0 2px 10px;
    border-left: 1px solid rgba(140, 190, 70, 0.38);
}

.fc-boardViewer__sideVariationMove {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    padding: 1px 4px;
    border-radius: 5px;
    white-space: nowrap;
}

.fc-boardViewer__sideVariationMove:hover {
    background: rgba(255,255,255,0.07);
}

.fc-boardViewer__sideVariationMove:focus {
    outline: none;
}

.fc-boardViewer__sideVariationMove:focus-visible {
    background: rgba(140,190,70,0.16);
    outline: 1px solid rgba(140,190,70,0.75);
    outline-offset: 2px;
}

.fc-boardViewer__sideVariationMove.is-active {
    background: rgba(140,190,70,0.18);
    outline: 1px solid rgba(140,190,70,0.62);
}

.fc-boardViewer__sideVariationMoveNo {
    color: rgba(230, 230, 230, 0.42);
    font-weight: 700;
}

.fc-boardViewer__sideVariationSan {
    color: rgba(230, 230, 230, 0.72);
    font-weight: 650;
}

.fc-boardViewer__moveFlow {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    align-items: center;
}

.fc-boardViewer__moveTokenWrap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.fc-boardViewer__comment {
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.84);
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.5;
}

.fc-boardViewer__comment[hidden] {
    display: none !important;
}

.fc-boardViewer__comment p {
    margin: 0 0 8px 0;
}

.fc-boardViewer__comment p:last-child {
    margin-bottom: 0;
}

.fc-boardViewer__comment ul {
    margin: 8px 0 0 0;
    padding-left: 18px;
}

.fc-boardViewer__comment li {
    margin: 3px 0;
}

.fc-boardViewer__comment-skeleton {
    display: grid;
    gap: 7px;
}

.fc-boardViewer__comment-skeleton span {
    display: block;
    height: 9px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0.08),
        rgba(255,255,255,0.16),
        rgba(255,255,255,0.08)
    );
}

/* slightly larger figurine/text presentation */
.fc-boardViewer__figurine {
    font-size: 16px;
    line-height: 1;
    vertical-align: -1px;
}

/* No movelist: keep current simple viewer */
.fc-boardViewer[data-movelist="false"] .fc-boardViewer__moveList {
    display: none !important;
}

/* =========================================================
   Layout modes
   Corrected meaning:
   - horizontal = move list below navigation
   - vertical   = move list right of the board
   ========================================================= */

/* Horizontal = move list below navigation */
.fc-boardViewer[data-movelist="true"][data-movelist-layout="horizontal"] {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "top"
        "main"
        "nav"
        "movelist";
    gap: 12px;
}

.fc-boardViewer[data-movelist="true"][data-movelist-layout="horizontal"] .fc-boardViewer__topMeta {
    grid-area: top;
}

.fc-boardViewer[data-movelist="true"][data-movelist-layout="horizontal"] .fc-boardViewer__main {
    grid-area: main;
}

.fc-boardViewer[data-movelist="true"][data-movelist-layout="horizontal"] .fc-boardViewer__nav {
    grid-area: nav;
    margin-top: 0;
}

.fc-boardViewer[data-movelist="true"][data-movelist-layout="horizontal"] .fc-boardViewer__moveList {
    grid-area: movelist;
}

/* Vertical = move list right of the board */
.fc-boardViewer[data-movelist="true"][data-movelist-layout="vertical"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(150px, 210px);
    grid-template-areas:
        "top top"
        "left movelist"
        "comment comment";
    gap: 12px;
    align-items: stretch;
}

.fc-boardViewer[data-movelist="true"][data-movelist-layout="vertical"] .fc-boardViewer__topMeta {
    grid-area: top;
}

/*
 * leftCol holds the board, nav, and analyzer as a flex column.
 * This is the key structural fix: previously main/nav/analyzer were
 * separate grid rows, so the movelist (spanning all three) forced
 * them to fill its full height — creating large empty gaps below the
 * board. Now the left side is a single grid cell whose height is
 * determined purely by its own content.
 */
.fc-boardViewer[data-movelist="true"][data-movelist-layout="vertical"] .fc-boardViewer__leftCol {
    grid-area: left;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.fc-boardViewer[data-movelist="true"][data-movelist-layout="vertical"] .fc-boardViewer__moveList {
    grid-area: movelist;
    align-self: stretch;
    /*
     * The scrollable-column fix for CSS Grid.
     *
     * Problem: align-self:stretch only works when the grid row has a
     * defined height. Without a height constraint the movelist itself
     * sets the row height, then "stretches" to fill it — a circular
     * reference that lets it grow to show every move.
     *
     * Fix: height:0 removes the movelist from the row-height calculation
     * entirely, so the row height is driven solely by leftCol (board +
     * nav + analyzer). min-height:100% then fills that resolved height.
     * overflow-y:auto clips the content and adds a scrollbar.
     */
    height: 0;
    min-height: 100%;
    overflow-y: auto;
}

.fc-boardViewer[data-movelist="true"][data-movelist-layout="vertical"] .fc-boardViewer__comment {
    grid-area: comment;
    min-width: 0;
}

.fc-boardViewer[data-movelist="true"][data-movelist-layout="vertical"] .fc-boardViewer__nav {
    margin-top: 0;
    width: 100%;
    max-width: 620px;
}

.fc-boardViewer[data-movelist="true"][data-movelist-layout="vertical"] .fc-boardViewer__analyzer {
    /*
     * Reserve a stable minimum height so the flex row never collapses.
     * max-height + overflow-y:auto means Stockfish output scrolls internally
     * rather than pushing the left column taller.
     *
     * flex-shrink: 0 prevents the left-column flex layout from compressing
     * the panel down to its minimum height when the right move list stretches.
     *
     * min-height : shows the header row plus the expected 3 MultiPV rows
     * max-height : clamps growth; tune this to taste (~3 analysis lines)
     */
    flex-shrink: 0;
    min-height: 116px;
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
}

.fc-boardViewer__moveRow--vertical {
    grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px;
}

.fc-boardViewer__boardPane {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 0;
    align-items: stretch;
    width: 100%;
    max-width: 620px;
}

/* playerWhite is appended as a child of .fc-boardViewer__boardPane
   which is a 2-col grid (evalbar | board).
   Without explicit placement it lands in col-1 (16px).
   Force it to span both columns across the full row. */
.fc-boardViewer__boardPane [data-role="playerWhite"] {
    grid-column: 1 / -1;          /* span evalbar + board columns */
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    white-space: nowrap;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    margin-top: 6px;
    margin-bottom: 4px;
    /* margin-bottom intentionally overrides .fc-boardViewer__player--white (8px → 4px)
because inside boardPane the tighter spacing is correct */
}

/* Stockfish Analyzer */
.fc-boardViewer__analyzer[hidden] {
    display: none !important;
}

/*
 * VERTICAL LAYOUT OVERRIDE — keep analyzer in flex flow when hidden.
 *
 * In vertical layout the analyzer lives inside .fc-boardViewer__leftCol
 * (a flex column). If display:none collapses it to 0px, the flex item
 * disappears and the movelist (which stretches to match leftCol height)
 * shrinks — then jumps back when Stockfish starts writing.
 *
 * Fix: switch from display:none → visibility:hidden so the flex item
 * keeps its reserved min-height. The analyzer is invisible but never
 * leaves the flow. Content is non-interactive while hidden.
 */
.fc-boardViewer[data-movelist-layout="vertical"] .fc-boardViewer__analyzer[hidden] {
    display: block !important;
    visibility: hidden;
    pointer-events: none;
    user-select: none;
}

.fc-boardViewer__analyzer {
    width: 100%;
    max-width: 620px;
    margin-top: 12px;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.4;
    box-sizing: border-box;
    container-type: inline-size;
}

.fc-boardViewer__analyzerInner {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fc-boardViewer__analyzerHeader {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "title threat"
        "meta meta";
    align-items: center;
    gap: 4px 12px;
}

.fc-boardViewer__analyzerTitle {
    grid-area: title;
    font-size: 13px;
    font-weight: 700;
    opacity: 0.95;
    min-width: 0;
}

.fc-boardViewer__analyzerMeta {
    grid-area: meta;
    font-size: 12px;
    opacity: 0.72;
    text-align: left;
    white-space: nowrap;
}

.fc-boardViewer__analyzerActions {
    grid-area: threat;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.fc-boardViewer__threatButton,
.fc-boardViewer__exportButton {
    appearance: none;
    border: 1px solid rgba(140, 190, 70, 0.35);
    background: rgba(140, 190, 70, 0.12);
    color: #d8efb8;
    border-radius: 7px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    padding: 6px 8px;
    white-space: nowrap;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

@container (min-width: 520px) {
    .fc-boardViewer__analyzerHeader {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "title meta threat";
    }

    .fc-boardViewer__analyzerMeta {
        text-align: right;
    }
}

.fc-boardViewer__threatButton:hover,
.fc-boardViewer__exportButton:hover {
    background: rgba(140, 190, 70, 0.18);
    border-color: rgba(140, 190, 70, 0.55);
    color: #f0ffdc;
}

.fc-boardViewer__threatButton:focus-visible,
.fc-boardViewer__exportButton:focus-visible {
    outline: 1px solid rgba(140,190,70,0.85);
    outline-offset: 2px;
}

.fc-boardViewer__analyzerStatus {
    font-size: 12px;
    opacity: 0.72;
}

.fc-boardViewer__threatPlaceholder {
    border: 1px solid rgba(140, 190, 70, 0.22);
    border-radius: 8px;
    background: rgba(140, 190, 70, 0.08);
    color: rgba(235, 245, 220, 0.9);
    font-size: 12px;
    padding: 8px 10px;
}

.fc-boardViewer__threatHeading {
    color: rgba(245, 255, 230, 0.96);
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 4px;
}

.fc-boardViewer__threatStatus {
    color: rgba(235, 245, 220, 0.78);
    font-size: 12px;
}

.fc-boardViewer__threatLines {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.fc-boardViewer__analysisLines {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fc-boardViewer__analysisRow {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) 24px;
    gap: 10px;
    align-items: start;
}

.fc-boardViewer__analysisRow--threat {
    grid-template-columns: 56px minmax(0, 1fr);
}

.fc-boardViewer__analysisScore {
    font-weight: 700;
    opacity: 0.95;
    text-align: left;
    white-space: nowrap;
}

.fc-boardViewer__analysisPv {
    min-width: 0;
    word-break: break-word;
    opacity: 0.92;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.fc-boardViewer__analysisRow.is-expanded .fc-boardViewer__analysisPv {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}

.fc-boardViewer__analysisToggle {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    opacity: 0.68;
    cursor: pointer;
    width: 24px;
    min-width: 24px;
    padding: 0;
    line-height: 1;
    font-size: 15px;
    text-align: center;
    border-radius: 6px;
    transition: background 120ms ease, opacity 120ms ease;
}

.fc-boardViewer__analysisToggle:hover {
    background: rgba(255,255,255,0.08);
    opacity: 1;
}

.fc-boardViewer__analysisToggle:focus-visible {
    outline: 1px solid rgba(140,190,70,0.85);
    background: rgba(140,190,70,0.14);
    opacity: 1;
}

.fc-boardViewer__analysisToggle {
    align-self: start;
}

/* eval bar */
.fc-boardViewer__evalBar[hidden] {
    display: none !important;
}

.fc-boardViewer__evalBar {
    position: relative;
    width: 16px;
    min-width: 16px;
    align-self: stretch;
}

.fc-boardViewer__evalBarInner {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100%;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    display: flex;
    flex-direction: column;
}

.fc-boardViewer__evalBarBlack,
.fc-boardViewer__evalBarWhite {
    width: 100%;
    transition: height 180ms ease, width 180ms ease;
}

.fc-boardViewer__evalBarBlack {
    background: #111;
}

.fc-boardViewer__evalBarWhite {
    background: #f5f5f5;
}

.fc-boardViewer__evalBarScore {
    display: none !important;   /* ← replaced by ::after tooltip; suppress permanently */
}

/* The tooltip uses a ::after on the inner container,
   reading the score from the parent's data-score attribute
   (evalbar.js already sets data-score on the evalBarEl) */
.fc-boardViewer__evalBar::after {
    content: attr(data-score);
    position: absolute;
    left: calc(100% + 8px);   /* 8px gap to the right of the bar */
    top: 50%;
    transform: translateY(-50%);

    background: rgba(30, 30, 30, 0.92);
    color: #f5f5f5;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 4px 7px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.12);
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;

    /* Hidden by default */
    opacity: 0;
    transition: opacity 140ms ease;
}

/* Reveal tooltip on hover */
.fc-boardViewer__evalBar:hover:not([data-score=""])::after {
    opacity: 1;
}

/* Last move highlight — semi-transparent yellow to match the board palette */
.marker-last-move {
    fill: #aed669;
    opacity: 0.55;
}

.marker-variation-selected {
    fill: #7dd3fc;
    opacity: 0.42;
    stroke: rgba(255, 255, 255, 0.44);
    stroke-width: 5px;
}

.marker-threat-from-1,
.marker-threat-to-1 {
    fill: #ff6b4a;
    opacity: 0.54;
}

.marker-threat-from-2,
.marker-threat-to-2 {
    fill: #ffb84d;
    opacity: 0.38;
}

.marker-threat-from-3,
.marker-threat-to-3 {
    fill: #ffd77a;
    opacity: 0.28;
}

.marker-threat-from-1,
.marker-threat-from-2,
.marker-threat-from-3 {
    stroke: rgba(255, 255, 255, 0.38);
    stroke-width: 5px;
}

.cm-chessboard .arrow-threat-1 .arrow-head,
.cm-chessboard .arrow-threat-1 .arrow-line {
    fill: #ff3f2f;
    stroke: #ff3f2f;
}

.cm-chessboard .arrow-threat-1 .arrow-line {
    opacity: 0.74;
    stroke-linecap: round;
}

.cm-chessboard .arrow-threat-2 .arrow-head,
.cm-chessboard .arrow-threat-2 .arrow-line {
    fill: #ffad33;
    stroke: #ffad33;
}

.cm-chessboard .arrow-threat-2 .arrow-line {
    opacity: 0.52;
    stroke-linecap: round;
}

.cm-chessboard .arrow-threat-3 .arrow-head,
.cm-chessboard .arrow-threat-3 .arrow-line {
    fill: #ffd166;
    stroke: #ffd166;
}

.cm-chessboard .arrow-threat-3 .arrow-line {
    opacity: 0.38;
    stroke-linecap: round;
}

.cm-chessboard .arrow-threat-1 .arrow-head { opacity: 0.88; }
.cm-chessboard .arrow-threat-2 .arrow-head { opacity: 0.66; }
.cm-chessboard .arrow-threat-3 .arrow-head { opacity: 0.48; }
/* Add grid-template-areas to boardPane */
.fc-boardViewer__boardPane {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    grid-template-areas: "evalbar board";   /* ← add this line */
    column-gap: 10px;
    row-gap: 0;
    align-items: stretch;
    width: 100%;
    max-width: 620px;
}

/* Anchor the eval bar to its column */
.fc-boardViewer__evalBar {
    grid-area: evalbar;     /* ← add */
    position: relative;
    width: 16px;
    min-width: 16px;
    align-self: stretch;
}

/* Anchor the board to its column — the key fix */
.fc-boardViewer__board {
    grid-area: board;       /* ← add */
    width: 100%;
    aspect-ratio: 1 / 1;
    display: block;
    line-height: 0;
    position: relative;
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 900px) {
    .fc-boardViewer[data-movelist="true"][data-movelist-layout="vertical"] {
        grid-template-columns: 1fr;
        grid-template-areas:
            "top"
            "left"
            "movelist"
            "comment";
    }

    .fc-boardViewer[data-movelist="true"][data-movelist-layout="vertical"] .fc-boardViewer__moveList {
        /* Revert to normal block flow on mobile; no stretch needed in single-column */
        align-self: auto;
        height: auto;
        min-height: 0;
        overflow-y: auto;
        max-height: 320px;
    }

    .fc-boardViewer[data-movelist="true"][data-movelist-layout="vertical"] .fc-boardViewer__nav,
    .fc-boardViewer[data-movelist="true"][data-movelist-layout="vertical"] .fc-boardViewer__analyzer {
        max-width: 100%;
    }

    .fc-boardViewer__boardPane {
        grid-template-columns: 14px minmax(0, 1fr);
        column-gap: 8px;
        max-width: 100%;
    }
}
/* ==========================================================================
   Variation block (fc-bv__var*)
   Rendered by FelixChessMoveList into [data-role="variationsBlock"].
   Shows the child moves of the current tree position — only used in the
   move-tree board panel context, not in the opening explorer or game viewer.
   ========================================================================== */

.fc-boardViewer__variations {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.fc-boardViewer__variations[hidden] {
    display: none !important;
}

/* "Next moves" label */
.fc-bv__varLabel {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: 5px;
    padding-left: 2px;
}

/* Wrapping flex row of variation buttons */
.fc-bv__varList {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

/* Individual variation button */
.fc-bv__varBtn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: inherit;
    font-size: 13px;
    font-family: dejavu_sans, system-ui, sans-serif;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
    white-space: nowrap;
}

.fc-bv__varBtn:hover {
    background: rgba(125, 200, 50, 0.18);
    border-color: rgba(125, 200, 50, 0.45);
    color: #c8ff60;
}

.fc-bv__varBtn:active {
    background: rgba(125, 200, 50, 0.28);
}

/* SAN text inside the button */
.fc-bv__varSan {
    font-weight: 600;
}

/* Game count badge inside the button */
.fc-bv__varGames {
    font-size: 10px;
    font-weight: 400;
    opacity: 0.55;
    font-family: system-ui, sans-serif;
}

/* ─────────────────────────────────────────────────────────────────────────
   fc-boardViewer__gameType  —  chip appended to the event / round line
   Add these rules to the component CSS (e.g. opening-explorer.css or the
   board-viewer component stylesheet).
   ───────────────────────────────────────────────────────────────────────── */

/* The event text and game-type chip sit side-by-side on one flex row */
.fc-boardViewer__event {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45em;
}

/* Game-type chip — base style */
.fc-boardViewer__gameType {
    display: inline-flex;
    align-items: center;
    padding: 0.1em 0.55em;
    border-radius: 3px;
    font-size: 0.75em;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.5;
    white-space: nowrap;
    /* Default colour (no recognised category) */
    color: #fff;
    background-color: #6b7280;
}

/* ── Per-category colour overrides ─────────────────────────────────── */

/* Bullet  — vivid red */
.fc-boardViewer__gameType--bullet {
    color: #fff;
    background-color: #dc2626;
}

/* Blitz   — orange (matches the screenshot highlight) */
.fc-boardViewer__gameType--blitz {
    color: #fff;
    background-color: #c47d1a;
}

/* Rapid   — amber */
.fc-boardViewer__gameType--rapid {
    color: #fff;
    background-color: #3a6fa8;
}

/* Classical / Standard / Correspondence — muted blue */
.fc-boardViewer__gameType--classical {
    color: #fff;
    background-color: #4a7c59;
}
/* =========================================================
   Clock display  (fc-boardViewer__clock)
   Sits at the far right of each player row.
   Active  = player whose turn it is to move.
   Inactive = player who just moved.
   ========================================================= */

.fc-boardViewer__clock {
    /* Push clock to the right edge of the flex player row */
    margin-inline-start: auto;
    flex-shrink: 0;

    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
    white-space: nowrap;

    padding: 2px 8px;
    border-radius: 6px;

    transition: background 140ms ease, color 140ms ease, opacity 140ms ease,
    outline-color 140ms ease;
}

.fc-boardViewer__clock[hidden] {
    display: none !important;
}

.fc-boardViewer__clock--board {
    width: max-content;
}

.fc-boardViewer__clock--blackBoard {
    grid-area: board;
    justify-self: end;
    align-self: start;
    transform: translateY(calc(-100% - 6px));
    z-index: 5;
    margin-inline-start: 0;
}

/* ── Active clock — it is this player's turn to move ── */
.fc-boardViewer__clock--active {
    background: rgba(140, 190, 70, 0.16);
    color: #c8ff60;
    outline: 1px solid rgba(140, 190, 70, 0.42);
    opacity: 1;
}

/* ── Inactive clock — player has moved, waiting for opponent ── */
.fc-boardViewer__clock--inactive {
    background: transparent;
    color: inherit;
    opacity: 0.42;
    outline: none;
}

.fc-boardViewer__timeSpent {
    font-size: 0.72em;
    opacity: 0.72;
    margin-left: 4px;
    font-weight: 500;
}

.fc-boardViewer__clock--active .fc-boardViewer__timeSpent {
    font-weight: 800;
    opacity: 0.95;
}

/* Ensure the player row stretches full width so the clock reaches the edge.
   The boardPane playerWhite rule already sets display:flex; we cover both
   player rows here explicitly. */
.fc-boardViewer__player {
    width: 100%;
}

/* ── Panel shell ─────────────────────────────────────────────────────────────── */

.fc-bmi__panel {
    /* Positioning set inline by BoardMoveInput._positionPanel()  */
    z-index: 1200;
    width: 280px;

    background: #1e1e1e;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    box-shadow:
            0 8px 32px rgba(0, 0, 0, 0.55),
            0 2px 8px  rgba(0, 0, 0, 0.35);

    /* Subtle slide-in from slightly above */
    animation: fc-bmi-enter 140ms ease forwards;
    overflow: hidden;   /* keep child corners clipped to border-radius */
}

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

/* ── Board mount point ───────────────────────────────────────────────────────── */

.fc-bmi__board {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: block;
    line-height: 0;
    position: relative;
    /* Border-radius on just the top two corners to match the panel */
    border-radius: 10px 10px 0 0;
    overflow: hidden;
}

/*
 * Apply the same critical !important guards used by .fc-boardViewer__board
 * to prevent cm-chessboard from locking the SVG to zero dimensions when it
 * calls its internal resize() at an intermediate layout state.
 * See felixchessboard.css comment block for the full explanation.
 */
.fc-bmi__board > div {
    width: 100% !important;
    height: 100% !important;
    min-width: 100%;
    min-height: 100%;
}

.fc-bmi__board svg.cm-chessboard {
    display: block;
    width: 100% !important;
    height: 100% !important;
    min-width: 100%;
    min-height: 100%;
    overflow: visible;
}

/* Same generic-name collision reset as the main board viewer */
.fc-bmi__board svg.cm-chessboard g.board,
.fc-bmi__board svg.cm-chessboard g.coordinates,
.fc-bmi__board svg.cm-chessboard g.markers,
.fc-bmi__board svg.cm-chessboard g.pieces {
    transform: none !important;
    transform-origin: center center !important;
    clip-path: none !important;
    filter: none !important;
    opacity: 1 !important;
}

.fc-bmi__board svg.cm-chessboard g.board {
    display: inline !important;
}

.fc-bmiMoveInputActive .cm-chessboard-draggable-piece {
    inline-size: auto !important;
    block-size: auto !important;
    max-inline-size: none !important;
    opacity: 1 !important;
    overflow: visible !important;
    pointer-events: none !important;
    z-index: 2147483647 !important;
}

/* ── Last-move markers ───────────────────────────────────────────────────────── */

/* 'from' square: slightly dimmer so the destination reads as primary */
.fc-bmi__marker--lastFrom {
    fill: #aed669;
    opacity: 0.35;
}

/* 'to' square: same green tint as the main board viewer's last-move marker */
.fc-bmi__marker--lastTo {
    fill: #aed669;
    opacity: 0.55;
}

.fc-bmi__marker--selected {
    fill: #b9ff3b;
    opacity: 0.32;
}

/* ── Navigator strip ─────────────────────────────────────────────────────────── */

.fc-bmi__nav {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.02);
}

/* ── Undo button ─────────────────────────────────────────────────────────────── */

.fc-bmi__navBtn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: inherit;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background 100ms ease, border-color 100ms ease, opacity 100ms ease;
}

.fc-bmi__navBtn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.22);
}

.fc-bmi__navBtn:active:not(:disabled) {
    background: rgba(255, 255, 255, 0.18);
}

.fc-bmi__navBtn:disabled {
    opacity: 0.28;
    cursor: default;
}

/* ── Hint text ───────────────────────────────────────────────────────────────── */

.fc-bmi__hint {
    flex: 1;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.38);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none;
}