/*
    BOARD COLUMN
    The same frame as the puzzles: player strip, slim eval bar beside the board, player strip, nav row.
    Strips and nav row line up with the board, not the eval bar.
*/
#board {
    max-width: none;
    width: var(--board-size);
    height: var(--board-size);
}

/* Eval bar: slim, as tall as the board. The value shows on hover, drawn from the same text spans the script fills. */
#evaluation-bar-wrap {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--bar);
    border: 1px solid var(--hair-strong);
    border-radius: 3px;
    background: var(--surface-2);
}

#evaluation-bar {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 2px;
    overflow: hidden;
}

#black-rect,
#white-rect {
    transition: all 0.4s ease;
}

.eval-tip {
    font-family: var(--font-mono);
    font-weight: 500;
}

/* The script colours these for the old bar; the tip is always light on dark */
#evaluation-bar-wrap .eval-tip { color: var(--ink) !important; }
#evaluation-bar-wrap:hover .eval-tip { display: block; }

.navtext {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    margin-left: auto;
    padding: 0 var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--radius-ctl);
    background: transparent;
    color: var(--ink-2);
    font-family: var(--font);
    font-size: var(--fs-sm);
    font-weight: 500;
    cursor: pointer;
}

.navtext:hover { color: var(--ink); }

/* Practice from here is a real button; Exit practice stays quiet text */
#practice-from-here-button {
    border-color: var(--hair-strong);
    background: var(--surface-2);
    color: var(--ink);
}

#practice-from-here-button:hover { background: #1e1f23; }

/* Eval graph under the nav row (review only) */
#evalgraph-container {
    overflow: hidden;
    background: var(--surface);
    border-top: 1px solid var(--hair);
    border-bottom: 1px solid var(--hair);
}

#evaluation-graph {
    display: block;
    width: 100%;
    height: auto;
    cursor: none;
}

@media (max-width: 760px) {
    /* The bar is too thin for a hover value on a phone */
    #evaluation-bar-wrap .eval-tip { display: none !important; }

    /* "Practice from here" shares the row with six icon buttons */
    .navtext {
        padding: 0 var(--space-2);
        white-space: nowrap;
    }

    #practice-from-here-button .ic { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    #black-rect,
    #white-rect {
        transition: none;
    }
}