.chess-nav {
    display: flex; align-items: center; gap: 6px;
    padding: 0 clamp(12px, 3vw, 40px); margin: 0;
    border-bottom: 1px solid var(--line, #303b32);
    background: var(--ink, #0b0d11); color: var(--paper, #f3f0e7);
    font: 500 13px 'Space Grotesk', Arial, sans-serif;
}
.chess-nav a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; color: inherit; text-decoration: none; border-bottom: 2px solid transparent; }
.chess-nav a:hover { background: #9dff2210; }
.chess-nav a[aria-current="page"] { border-bottom-color: #9dff22; }
.chess-nav .chess-nav-league { color: var(--signal, #b7ff39); font-weight: 600; }
.chess-nav a:focus-visible { outline: 2px solid #9dff22; outline-offset: -4px; }
html[data-theme="light"] .chess-nav-league { color: #345f08; }
@media (max-width: 760px) {
    .chess-nav { display: grid; grid-template-columns: .7fr 1fr 1.2fr; gap: 0; padding-inline: 8px; }
    .chess-nav a { padding: 0 6px; font-size: 12px; }
}
/* Account for the always-visible chess navigation in the fitted desktop board. */
@media (min-width: 761px) and (min-height: 501px) {
    :root { --fit-chrome: 456px; --fit-chrome-game: 400px; }
}
@media (min-width: 761px) and (min-height: 501px) and (max-height: 800px) {
    :root { --fit-chrome: 416px; --fit-chrome-game: 384px; }
}