/* ============================================================
   OpenBook — redesign
   Vanilla CSS. All class names match what board.js / openings.js
   manipulate, so the JS contract is preserved.
   ============================================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    /* Surface */
    --bg:        #1b1a18;
    --bg-2:      #232120;
    --bg-3:      #2b2826;
    --bg-4:      #34302d;
    --line:      #3a3633;
    --line-soft: #2f2c2a;

    /* Text */
    --fg:        #ece6d8;
    --fg-2:      #b9b2a3;
    --fg-3:      #807a6f;
    --fg-4:      #5a554d;

    /* Accents */
    --acc:       #a3c46a;
    --acc-2:     #8aae54;
    --acc-dim:   rgba(163, 196, 106, 0.16);
    --warn:      #d97b5a;
    --warn-dim:  rgba(217, 123, 90, 0.16);
    --gold:      #d4a851;
    --info:      #79b0c4;
    --info-dim:  rgba(121, 176, 196, 0.14);

    /* Board */
    --sq-light:    #ecd9b8;
    --sq-dark:     #a87b54;
    --sq-selected: rgba(20, 85, 200, 0.45);
    --sq-legal:    rgba(20, 85, 30, 0.4);
    --sq-last-move: rgba(155, 199, 0, 0.41);
    --sq-check:    rgba(255, 0, 0, 0.5);
    --sq-correct:  rgba(80, 200, 80, 0.5);
    --sq-wrong:    rgba(220, 80, 80, 0.5);

    /* Legacy aliases — older selectors still reference these */
    --bg-panel: var(--bg-2);
    --text: var(--fg);
    --text-dim: var(--fg-3);
    --accent: var(--acc);
    --danger: var(--warn);
    --muted: var(--fg-3);
    --border: var(--line);

    /* Geometry */
    --rad:    6px;
    --rad-sm: 4px;
    --header-h: 48px;
    --nav-h:    72px;
    /* width term leaves room for the ranks coords + the eval bar column and its gap */
    --board-size: min(calc(100vw - 1.5rem - 34px), calc(100dvh - var(--header-h) - var(--nav-h) - 200px));

    /* Type */
    --sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

html, body { height: 100%; }

body {
    font-family: var(--sans);
    background: var(--bg);
    color: var(--fg);
    font-size: 14px;
    line-height: 1.4;
    touch-action: manipulation;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

button, input, textarea, select { font-family: inherit; color: inherit; }
a { color: inherit; }

.hidden { display: none !important; }
.desktop-only { display: none; }

/* ── Login ─────────────────────────────────────────── */

.login-screen {
    position: fixed;
    inset: 0;
    background: var(--bg);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 200;
    padding: 20px 20px 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 56px;
}
.login-screen > .login-card { margin-top: max(20px, 6vh); }

.login-card {
    width: min(380px, 100%);
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 28px 24px 22px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 14px 40px -14px rgba(0, 0, 0, 0.6);
}

.login-logo {
    display: block;
    width: 100%;
    max-width: 120px;
    height: auto;
    margin: -4px auto 0;
}

.login-title {
    font-family: var(--sans);
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: #8ab98a;
    line-height: 1.05;
    /* Pulls title up under the icon's transparent bottom-padding so the
       mark and wordmark read as a single locked-up logo. */
    margin: -22px 0 4px;
}

.login-card p { color: var(--fg-2); font-size: 13.5px; }

.login-error {
    width: 100%;
    padding: 0.5rem 0.7rem;
    margin-top: 4px;
    background: var(--warn-dim);
    border: 1px solid var(--warn);
    border-radius: var(--rad-sm);
    font-size: 0.82rem;
    color: var(--warn);
    text-align: left;
}

.login-form { display: flex; flex-direction: column; gap: 0.6rem; width: 100%; margin-top: 14px; }

.login-btn {
    display: block;
    width: 100%;
    padding: 0.75rem;
    background: var(--fg);
    color: #14140f;
    font-weight: 700;
    font-size: 0.95rem;
    border: none;
    border-radius: var(--rad-sm);
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background 0.12s;
}
.login-btn:hover { background: #ffffff; }

.token-help { font-size: 12px; color: var(--fg-3); line-height: 1.55; margin-top: 4px; }
.login-legal { font-size: 11.5px; color: var(--fg-3); line-height: 1.5; margin-top: 14px; }
.login-legal a { color: var(--fg-2); }
.login-legal a:hover { color: var(--fg); }

.login-learn-more {
    margin-top: 18px;
    font-size: 12.5px;
    color: var(--fg-3);
    text-decoration: none;
    border-top: 1px solid var(--line-soft);
    padding-top: 14px;
    width: 100%;
    transition: color 0.12s;
}
.login-learn-more:hover { color: var(--acc); }

/* ── Login info / landing section ─────────────────── */

.login-info {
    width: min(960px, 100%);
    color: var(--fg);
    display: flex;
    flex-direction: column;
    gap: 48px;
    scroll-margin-top: 24px;
}

.login-info-intro { text-align: center; max-width: 640px; margin: 0 auto; }
.login-info-intro h2 {
    font-size: clamp(22px, 3.4vw, 30px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 12px;
}
.login-info-intro p { color: var(--fg-2); font-size: 15px; line-height: 1.6; }

.login-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.login-feature {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 22px 22px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.login-feature-eyebrow {
    font-size: 11px;
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--acc);
}
.login-feature h3 {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.015em;
}
.login-feature p { color: var(--fg-2); font-size: 13.5px; line-height: 1.6; flex: 1 0 auto; }

.login-shot {
    margin-top: 6px;
    width: 100%;
    display: block;
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: var(--rad);
    object-fit: cover;
}

.login-free {
    text-align: center;
    padding: 28px 22px;
    background: var(--bg-2);
    border: 1px solid var(--acc);
    border-radius: 10px;
}
.login-free h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--acc);
    margin-bottom: 8px;
    letter-spacing: -0.015em;
}
.login-free p { color: var(--fg-2); font-size: 14px; max-width: 480px; margin: 0 auto 18px; line-height: 1.55; }
.login-free p a { color: var(--acc); text-decoration: underline; }
.login-free p a:hover { color: var(--acc-2); }
.login-free-cta { width: auto; display: inline-block; padding: 0.75rem 1.6rem; }

@media (max-width: 640px) {
    .login-features { grid-template-columns: 1fr; }
    .login-screen { gap: 40px; }
}

/* ── Loading ───────────────────────────────────────── */

.loading-screen {
    position: fixed;
    inset: 0;
    background: var(--bg);
    display: grid;
    place-items: center;
    z-index: 190;
}

.loading-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255, 255, 255, 0.08);
    border-top-color: var(--acc);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Menu drawer ───────────────────────────────────── */

.menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
    z-index: 150;
}

.menu-drawer {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(360px, 92vw);
    background: var(--bg-2);
    border-left: 1px solid var(--line);
    z-index: 160;
    display: flex;
    flex-direction: column;
    box-shadow: -16px 0 32px -16px rgba(0, 0, 0, 0.6);
}

.menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}

.menu-title { font-weight: 700; font-size: 14px; }

.menu-close {
    background: transparent;
    border: 1px solid transparent;
    color: var(--fg);
    cursor: pointer;
    padding: 0;
    width: 32px; height: 32px;
    border-radius: var(--rad-sm);
    display: grid; place-items: center;
    font-size: 14px;
    transition: background 0.12s, border-color 0.12s;
}
.menu-close:hover { background: var(--bg-3); border-color: var(--line); }

.menu-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.menu-section { display: flex; flex-direction: column; gap: 8px; }

.menu-section-label {
    font: 600 10.5px/1 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-3);
}

.menu-action-btn {
    width: 100%;
    padding: 9px 10px;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--rad-sm);
    color: var(--fg);
    font-size: 13.5px;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s, border-color 0.12s;
}
.menu-action-btn:hover { background: var(--bg-3); border-color: var(--fg-4); }

/* Two file-type buttons (JSON / PGN) side by side, to keep the menu compact. */
.menu-btn-row { display: flex; gap: 8px; }
.menu-btn-row .menu-action-btn { flex: 1; }
.menu-io-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    text-align: left;
}
.menu-io-type { font-weight: 600; font-size: 13.5px; }
.menu-io-hint { font-size: 11px; color: var(--fg-3); }

/* Log out + Delete account share a row; colored differently so the
   destructive action can't be hit by reflex. */
.menu-account-row { display: flex; gap: 8px; }
.menu-account-row > .menu-action-btn { flex: 1; margin: 0; }
a.menu-action-btn { display: block; text-decoration: none; }
.menu-action-btn.active,
.menu-action-btn.flagged {
    background: rgba(212, 168, 81, 0.14);
    border-color: rgba(212, 168, 81, 0.55);
    color: var(--gold);
}

.menu-logout-section { margin-top: auto; }

.menu-setting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: var(--rad-sm);
    font-size: 13.5px;
    color: var(--fg);
}
.menu-setting select {
    background: var(--bg-2);
    color: var(--fg);
    border: 1px solid var(--line);
    border-radius: var(--rad-sm);
    padding: 4px 8px;
    font: inherit;
    cursor: pointer;
}
.gaps-find-btn {
    background: transparent;
    color: var(--fg);
    border: 1px solid var(--line);
    border-radius: var(--rad-sm);
    padding: 4px 10px;
    font: 600 11px/1 var(--mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
.gaps-find-btn:hover { background: var(--bg-3); border-color: var(--fg-4); }
.gaps-find-btn:disabled { opacity: 0.55; cursor: default; }

.gaps-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
    padding: 0 14px 14px;
}
.gaps-actions { display: inline-flex; gap: 6px; }
.gaps-close-btn { font-size: 12px; padding: 4px 8px; }
.gap-opening {
    font-size: 11.5px;
    color: var(--fg-3);
    margin-left: 22px;
}
/* When the gap list is showing, the explorer/notes sections
   are taken out of the panel so the list takes the full panel space
   (and the panel's normal scroll works as expected). */
.gap-hidden { display: none !important; }
.gap-empty {
    font-size: 12.5px;
    color: var(--fg-3);
    padding: 8px 4px;
    line-height: 1.4;
}
.gap-row {
    width: 100%;
    text-align: left;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--rad-sm);
    padding: 8px 10px;
    color: var(--fg);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 3px;
    transition: background 0.12s, border-color 0.12s;
    font: inherit;
}
.gap-row:hover { background: var(--bg-3); border-color: var(--fg-4); }
.gap-row.gap-row-primed {
    background: var(--bg-3);
    border-color: var(--gold);
    box-shadow: inset 0 0 0 1px var(--gold);
}
.gap-row-top {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13.5px;
}
.gap-rank {
    color: var(--fg-3);
    font: 600 11px/1 var(--mono);
    min-width: 14px;
}
.gap-path { font-family: var(--mono); font-weight: 500; }
.gap-row-bot {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 11.5px;
    color: var(--fg-3);
}
.gap-games { color: var(--gold); }

.menu-setting-hint {
    font-size: 11.5px;
    color: var(--fg-3);
    line-height: 1.4;
    padding: 0 2px;
}

/* Log out — the safe, everyday action: neutral filled button. */
.menu-logout {
    color: var(--fg);
    background: var(--bg-3);
    text-decoration: none;
    text-align: center;
}
.menu-logout:hover { background: var(--bg-2); border-color: var(--fg-4); }

/* Delete account — destructive: red text, kept visually distinct from Log out
   so it can't be hit by reflex. */
.menu-action-btn.menu-delete-account {
    color: var(--warn);
    text-align: center;
}
.menu-action-btn.menu-delete-account:hover {
    background: var(--warn-dim);
    border-color: var(--warn);
}

.menu-credits {
    margin: 0.5rem 0 0;
    font-size: 11.5px;
    color: var(--fg-3);
    text-align: center;
}
.menu-credits a { color: var(--fg-2); text-decoration: none; }
.menu-credits a:hover { color: var(--fg); text-decoration: underline; }

/* ── App shell ─────────────────────────────────────── */

.app {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-h);
    padding: 0 16px;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}

.brand {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.01em;
}
.brand-name { color: var(--acc); }
.header-logo {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: block;
    object-fit: contain;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.username {
    font-size: 13px;
    color: var(--fg-2);
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.username::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--acc);
    box-shadow: 0 0 0 3px var(--acc-dim);
    flex-shrink: 0;
}

.menu-btn {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    color: var(--fg);
    width: 32px; height: 32px;
    border-radius: var(--rad-sm);
    display: grid; place-items: center;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    transition: background 0.12s, border-color 0.12s;
}
.menu-btn:hover { background: var(--bg-3); border-color: var(--line); }

/* ── Main layout (mobile default) ──────────────────── */

main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    min-height: 0;
}

.board-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 100%;
    padding: 12px 12px 6px;
    gap: 8px;
}

.board-area {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.eval-bar {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.eval-track {
    width: 14px;
    height: var(--board-size);
    position: relative;
    overflow: hidden;
    border-radius: var(--rad-sm);
    background: #26241f;                 /* Black's portion */
    box-shadow: 0 0 0 1px var(--line);
}
.eval-fill {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50%;
    background: #e9e3d5;                  /* White's portion */
    transition: height 0.2s ease;
}
.eval-score {
    font: 700 10px/1 var(--mono);
    color: var(--fg-2);
    white-space: nowrap;
    letter-spacing: -0.3px;
}

.board-wrapper {
    display: grid;
    grid-template-columns: 0.9rem var(--board-size);
    grid-template-rows: var(--board-size) 1.2rem;
    user-select: none;
    -webkit-user-select: none;
    flex-shrink: 0;
}

.board {
    width: var(--board-size);
    height: var(--board-size);
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    border-radius: var(--rad);
    overflow: hidden;
    position: relative;
    box-shadow:
        0 1px 0 rgba(0, 0, 0, 0.4),
        0 8px 24px -8px rgba(0, 0, 0, 0.5),
        0 0 0 1px var(--line);
    touch-action: none;
}

.arrow-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

.coords {
    display: flex;
    color: var(--fg-3);
    font: 500 10px/1 var(--mono);
}
.coords-ranks {
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding-right: 2px;
}
.coords-files {
    grid-column: 2;
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-start;
    padding-top: 4px;
}

/* ── Nav bar ───────────────────────────────────────── */

.nav-bar {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px;
    padding: 0;
    width: var(--board-size);
    height: var(--nav-h);
    flex-shrink: 0;
}

.nav-buttons {
    display: grid;
    /* Three squares (width = height = nav-h). Letting them flow at
       fixed width keeps the right-hand 2x2 grid as the flex axis. */
    grid-template-columns: repeat(3, var(--nav-h));
    gap: 6px;
}

.nav-mode-grid {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 6px;
    min-width: 0;
}
.nav-sub-tabs,
.nav-color-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    min-width: 0;
}

.nav-btn {
    height: 100%;
    border: 1px solid var(--line);
    border-radius: var(--rad-sm);
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    background: var(--bg-2);
    color: var(--fg);
    transition: background 0.12s, border-color 0.12s;
    display: grid;
    place-items: center;
}
.nav-btn:hover { background: var(--bg-3); border-color: var(--fg-4); }
.nav-btn:active { background: var(--bg-4); }

/* .nav-mode-btn styles are placed after .sub-tab-btn / .color-btn
   so they win on source order when the same button carries both
   classes. See further down. */

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

.panel {
    flex: 1;
    width: 100%;
    background: var(--bg-2);
    border-top: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/* Top row: sub-tabs + color */
.panel-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}

.sub-tabs {
    display: inline-flex;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--rad-sm);
    padding: 2px;
}
.sub-tab-btn {
    appearance: none;
    background: transparent;
    color: var(--fg-2);
    border: none;
    font-weight: 600;
    font-size: 12.5px;
    padding: 6px 12px;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.sub-tab-btn:hover { color: var(--fg); }

/* Due-line count on the Practice tab. .hidden (set by JS at count 0) wins. */
.practice-badge {
    display: inline-block;
    margin-left: 5px;
    min-width: 16px;
    padding: 0 5px;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    color: var(--bg);
    background: var(--acc);
    border-radius: 8px;
    vertical-align: middle;
}
.practice-badge.hidden { display: none; }

/* The mobile Practice button (nav bar) is tight, so the badge needs to be
   more compact there to fit cleanly alongside the label. */
@media (max-width: 699.98px) {
    .practice-badge {
        margin-left: 3px;
        min-width: 13px;
        padding: 0 3px;
        font-size: 9px;
        line-height: 13px;
        border-radius: 7px;
    }
}

/* Pulse when the due count changes, to draw the eye to the new number. */
@keyframes badge-flash {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.45); background: var(--gold); }
    100% { transform: scale(1); }
}
.practice-badge.badge-flash { animation: badge-flash 0.45s ease; }
@media (prefers-reduced-motion: reduce) {
    .practice-badge.badge-flash { animation: none; }
}
.sub-tab-btn.active {
    background: var(--bg-3);
    color: var(--fg);
    box-shadow: inset 0 0 0 1px var(--line);
}

.color-selector {
    display: inline-flex;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--rad-sm);
    padding: 2px;
}
.color-sel-label { display: none; }

.color-btn {
    appearance: none;
    background: transparent;
    color: var(--fg-2);
    border: none;
    font-weight: 600;
    font-size: 12.5px;
    padding: 6px 12px;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.color-btn:hover { color: var(--fg); }
.color-btn.active {
    background: var(--bg-3);
    color: var(--fg);
    box-shadow: inset 0 0 0 1px var(--line);
}

/* Buttons inside the under-board .nav-bar carry .sub-tab-btn or
   .color-btn for state-toggling code, but need a different chrome
   (squared chip with a visible border) since they're not in the
   panel-top group. Placed after the base rules to win on source
   order. */
.nav-mode-btn {
    appearance: none;
    border: 1px solid var(--line);
    background: var(--bg-2);
    color: var(--fg-2);
    font-weight: 600;
    font-size: 13px;
    border-radius: var(--rad-sm);
    box-shadow: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nav-mode-btn:hover { color: var(--fg); background: var(--bg-3); border-color: var(--fg-4); }
.nav-mode-btn.active {
    background: var(--bg-3);
    color: var(--fg);
    border-color: var(--fg-4);
    box-shadow: none;
}

/* ── Opening name ──────────────────────────────────── */

.opening {
    padding: 12px 14px 10px;
    border-bottom: 1px solid var(--line-soft);
    flex-shrink: 0;
}
.opening-eyebrow {
    font: 600 10.5px/1 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-3);
    margin-bottom: 6px;
}
.opening-name {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--fg);
    line-height: 1.25;
    min-height: 1.25em;
}

.cache-indicator { display: none; }

/* ── Practice info (practice mode only) ────────────── */

.practice-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 14px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}
.practice-info .practice-strip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
#practice-line-info > div:first-child {
    font-size: 13px;
    color: var(--fg);
    font-weight: 600;
}
.practice-meta {
    font-size: 11px;
    color: var(--fg-3);
    margin-top: 2px;
    font-family: var(--mono);
    letter-spacing: 0.02em;
}
.practice-line-num {
    color: var(--fg-3);
    font-family: var(--mono);
    font-size: 11px;
    margin-right: 4px;
}

.stats {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-shrink: 0;
}
.stat {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font: 600 10.5px/1 var(--sans);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fg-3);
}
.stat-value {
    font: 700 16px/1 var(--mono);
    color: var(--fg);
    letter-spacing: 0;
}
.stat:nth-child(1) .stat-value { color: var(--acc); }
.stat:nth-child(2) .stat-value { color: var(--warn); }
.stat-label { color: var(--fg-3); }

/* ── Status ────────────────────────────────────────── */

.status {
    margin: 12px 14px 0;
    padding: 10px 12px;
    border-radius: var(--rad-sm);
    font-size: 13px;
    line-height: 1.4;
    background: var(--bg-3);
    border: 1px solid var(--line);
    color: var(--fg-2);
    flex-shrink: 0;
}
.status.correct {
    background: color-mix(in oklab, var(--bg-3) 80%, var(--acc) 20%);
    border-color: var(--acc);
    color: var(--fg);
}
.status.wrong {
    background: color-mix(in oklab, var(--bg-3) 80%, var(--warn) 20%);
    border-color: var(--warn);
    color: var(--fg);
}
.status.info {
    background: var(--info-dim);
    border-color: var(--info);
    color: var(--fg);
}
.status.error {
    background: var(--warn-dim);
    border-color: var(--warn);
    color: var(--warn);
}

.status-link-btn {
    display: inline-block;
    background: transparent;
    border: 1px solid currentColor;
    border-radius: var(--rad-sm);
    padding: 6px 10px;
    font: 600 12px/1.2 var(--sans);
    color: inherit;
    cursor: pointer;
    transition: background 0.12s;
    white-space: nowrap;
}
.status-link-btn:hover { background: rgba(255, 255, 255, 0.06); }

.status-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.status-actions .status-link-btn { margin: 0; }

/* ── Build prompt ──────────────────────────────────── */

.build-prompt {
    margin: 12px 14px 0;
    padding: 10px 12px;
    background: var(--acc-dim);
    border: 1px solid var(--acc);
    border-radius: var(--rad-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    color: var(--fg);
    flex-shrink: 0;
}
.build-prompt.danger {
    background: rgba(224, 85, 85, 0.15);
    border-color: rgba(224, 85, 85, 0.7);
}
.build-prompt-btns { display: flex; gap: 6px; flex-shrink: 0; }
.build-prompt-btn {
    padding: 6px 12px;
    border: 1px solid transparent;
    border-radius: var(--rad-sm);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
.build-prompt-btn.add { background: var(--acc); color: #14140f; }
.build-prompt-btn.add:hover { background: var(--acc-2); }
.build-prompt-btn.skip {
    background: transparent;
    border-color: var(--line);
    color: var(--fg-2);
}
.build-prompt-btn.skip:hover { background: var(--bg-3); color: var(--fg); }

/* ── Section heading (Explorer label + level toggle) ── */

.section-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px 6px;
    font: 600 11px/1 var(--sans);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-3);
    flex-shrink: 0;
}

.explorer-level-toggle {
    display: inline-flex;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--rad-sm);
    overflow: hidden;
    text-transform: none;
    letter-spacing: 0.02em;
}
.explorer-level-btn {
    appearance: none;
    background: transparent;
    color: var(--fg-2);
    border: none;
    padding: 5px 10px;
    font: 600 11px/1 var(--sans);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.explorer-level-btn + .explorer-level-btn { border-left: 1px solid var(--line); }
.explorer-level-btn:hover { color: var(--fg); }
.explorer-level-btn.active { background: var(--bg-3); color: var(--fg); }

/* ── Explorer / move list ──────────────────────────── */

#explorer-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.explorer-moves {
    flex: 1;
    /* Single grid that all .move-row children participate in via subgrid,
       so every row uses identical column widths — that's what keeps the
       W/D/L bars and games counts perfectly aligned across rows even when
       SAN text varies in width. */
    display: grid;
    /* cols: san | bar | games | rep-mark | rep-btn | spacer(1fr) */
    grid-template-columns: max-content max-content max-content max-content max-content 1fr;
    align-content: start;
    row-gap: 1px;
    overflow-y: auto;
    min-height: 0;
    padding: 0 8px 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
/* Non-row container children (loading, empty state, out-of-prep banner)
   span the full grid width so they don't get squeezed into one column. */
.explorer-moves > .explorer-loading,
.explorer-moves > .explorer-empty,
.explorer-moves > .out-of-prep { grid-column: 1 / -1; }
.explorer-moves::-webkit-scrollbar { width: 4px; }
.explorer-moves::-webkit-scrollbar-thumb { background: var(--bg-4); border-radius: 4px; }
.explorer-moves::-webkit-scrollbar-track { background: transparent; }

.explorer-loading,
.explorer-empty {
    font-size: 13px;
    color: var(--fg-3);
    padding: 8px 12px;
}

.move-row {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: var(--rad-sm);
    cursor: pointer;
    transition: background 0.1s;
}
/* Explicitly place each child so the empty 1fr spacer stays empty and
   bar/games/badges hug the right side identically on every row. */
.move-row > .move-san   { grid-column: 1; }
.move-row > .move-bar   { grid-column: 2; }
.move-row > .move-games { grid-column: 3; }
.move-row > .rep-mark,
.move-row > .rep-warn   { grid-column: 4; justify-self: end; }
.move-row > .rep-btn    { grid-column: 5; justify-self: end; }
.move-row:hover  { background: var(--bg-3); }
.move-row.in-rep { background: rgba(163, 196, 106, 0.10); box-shadow: inset 2px 0 0 var(--acc); }
.move-row.in-rep:hover { background: rgba(163, 196, 106, 0.16); }
.move-row.dimmed { opacity: 0.45; }
.move-row.dimmed:hover { opacity: 0.75; }

.move-san {
    font: 600 14px/1 var(--mono);
    color: var(--fg);
}
.move-num {
    font: 500 11px/1 var(--mono);
    color: var(--fg-3);
    margin-right: 2px;
    font-weight: 400;
}

.top-star {
    /* Inline so the star participates in .move-san's intrinsic width and
       pushes the bar over instead of bleeding into it. Subgrid + max-content
       on col 1 makes starless rows pick up the same width. */
    display: inline-block;
    margin-left: 4px;
    color: var(--gold);
    font-size: 11px;
    font-weight: 700;
    pointer-events: none;
    line-height: 1;
    vertical-align: baseline;
}
.engine-star {
    /* Green companion to .top-star: Stockfish's best move(s) for this position. */
    display: inline-block;
    margin-left: 3px;
    color: var(--acc);
    font-size: 11px;
    font-weight: 700;
    pointer-events: none;
    line-height: 1;
    vertical-align: baseline;
}

/* Win/Draw/Loss bar — fixed width, segments use flex-basis: <pct>%.
   Numbers live inside their own segments. Segments below ~12% don't
   have room for two digits, so we omit the text but keep a title attr
   for hover. The bar sits in its own subgrid column so its left and
   right edges land at exactly the same x on every row. */
.move-bar {
    width: 130px;
    height: 18px;
    display: flex;
    overflow: hidden;
    border-radius: 3px;
    background: var(--bg-3);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.bar-seg {
    flex-grow: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 600 10.5px/1 var(--mono);
    color: rgba(0, 0, 0, 0.78);
    overflow: hidden;
    min-width: 0;
}
.bar-w { background: #e6dcc6; }
.bar-d { background: #6b6660; color: var(--fg); }
.bar-l { background: #14110f; color: var(--fg-2); }
/* 1px dark seam between adjacent segments. Inset so it sits on the
   right neighbor's left edge — keeps the boundary readable even when
   the draw segment is only a few pixels wide. */
.bar-seg + .bar-seg { box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.45); }
.move-bar.best-move .bar-seg { font-weight: 800; }

.move-games {
    font: 500 11px/1 var(--mono);
    color: var(--fg-3);
    text-align: right;
}

.rep-mark {
    font-size: 13px;
    color: var(--acc);
    font-weight: 700;
    min-width: 1rem;
    text-align: center;
    display: flex;
    align-items: center;
    gap: 0.15rem;
}
.rep-mark.hidden { visibility: hidden; }
.rep-warn { font-size: 13px; color: var(--gold); min-width: 1rem; text-align: center; }
.rep-line-count { font-size: 10.5px; font-weight: 600; opacity: 0.85; font-family: var(--mono); }

.rep-btn {
    width: 26px; height: 26px;
    border: 1px solid var(--line);
    border-radius: 3px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    background: transparent;
    color: var(--fg-3);
    display: grid;
    place-items: center;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    position: relative;
}
/* Expand the hit area beyond the visual button so a finger tap on
   mobile doesn't need pixel precision. The extension reaches into the
   row's vertical padding and into the empty spacer column to the
   right, so it doesn't overlap any other tap target. */
.rep-btn::before {
    content: '';
    position: absolute;
    top: -10px; bottom: -10px; left: -8px; right: -16px;
}
.rep-btn-remove:hover {
    background: var(--warn-dim);
    color: var(--warn);
    border-color: var(--warn);
}

/* ── Inline remove confirmation ────────────────────────
   Injected directly after the move row being deleted (spans the full
   grid width like the out-of-prep banner). Keeps the confirm where the
   user tapped instead of in a banner above the scrolled-away board. */
.move-confirm {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 2px 4px 5px;
    padding: 9px 11px;
    background: var(--warn-dim);
    border: 1px solid var(--warn);
    border-radius: var(--rad-sm);
    font-size: 12.5px;
    color: var(--fg);
}
.move-confirm.danger {
    background: rgba(224, 85, 85, 0.16);
    border-color: rgba(224, 85, 85, 0.7);
}
.move-confirm-text { line-height: 1.35; }
.move-confirm-text strong { font-family: var(--mono); font-weight: 700; }
.move-confirm-btns { display: flex; gap: 6px; flex-shrink: 0; }
.move-confirm-btn {
    padding: 6px 12px;
    border: 1px solid transparent;
    border-radius: var(--rad-sm);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s, filter 0.12s;
}
.move-confirm-btn.remove { background: var(--warn); color: #14110f; }
.move-confirm-btn.remove:hover { filter: brightness(1.08); }
.move-confirm-btn.cancel {
    background: transparent;
    border-color: var(--line);
    color: var(--fg-2);
}
.move-confirm-btn.cancel:hover { background: var(--bg-3); color: var(--fg); }

.move-row.confirming-remove {
    background: var(--warn-dim);
    box-shadow: inset 2px 0 0 var(--warn);
}
.move-row.confirming-remove:hover { background: var(--warn-dim); }

/* ── Out of prep ───────────────────────────────────── */

.out-of-prep {
    margin: 6px 14px 0;
    padding: 8px 12px;
    background: rgba(212, 168, 81, 0.10);
    border: 1px solid rgba(212, 168, 81, 0.45);
    border-radius: var(--rad-sm);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--gold);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
.out-of-prep:hover {
    background: rgba(212, 168, 81, 0.18);
    border-color: rgba(212, 168, 81, 0.75);
}
.out-of-prep:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 1px;
}

/* ── Practice actions / review buttons ─────────────── */

.practice-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    flex-shrink: 0;
}

.hint-btn,
.flag-btn,
.filter-btn {
    appearance: none;
    background: var(--bg);
    border: 1px solid var(--line);
    color: var(--fg);
    font: 600 12.5px/1 var(--sans);
    padding: 8px 12px;
    border-radius: var(--rad-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.hint-btn:hover,
.flag-btn:hover,
.filter-btn:hover { background: var(--bg-3); border-color: var(--fg-4); }

.flag-btn-compact,
.filter-btn-compact {
    padding: 4px 8px;
    min-width: 28px;
    font-size: 13px;
}
.flag-btn.flagged,
.filter-btn.active {
    background: rgba(212, 168, 81, 0.12);
    border-color: rgba(212, 168, 81, 0.55);
    color: var(--gold);
}

.practice-review-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px 0;
    flex-shrink: 0;
}
.review-line-btn {
    flex: 1;
    appearance: none;
    background: var(--bg);
    border: 1px solid var(--line);
    color: var(--fg-2);
    font: 600 12px/1.3 var(--sans);
    padding: 8px 10px;
    border-radius: var(--rad-sm);
    cursor: pointer;
    text-align: center;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    white-space: nowrap;
}
.review-line-btn:hover {
    background: var(--bg-3);
    border-color: var(--fg-4);
    color: var(--fg);
}

.review-line-prompt {
    flex: 1 1 100%;
    padding: 10px 12px;
    background: var(--bg);
    border: 1px solid var(--acc);
    border-radius: var(--rad-sm);
}
.review-prompt-label {
    display: block;
    font-size: 12px;
    color: var(--fg-2);
    margin-bottom: 6px;
}
.review-prompt-btns {
    display: flex;
    gap: 6px;
}
.review-prompt-btns button {
    flex: 1;
    padding: 6px 8px;
    border: 1px solid var(--acc);
    border-radius: var(--rad-sm);
    background: var(--acc-dim);
    color: var(--acc);
    cursor: pointer;
    font: 600 12px/1 var(--sans);
    transition: background 0.12s;
}
.review-prompt-btns button:hover { background: rgba(163, 196, 106, 0.22); }
.review-prompt-cancel {
    flex: 0 0 auto !important;
    color: var(--fg-3) !important;
    border-color: transparent !important;
    background: transparent !important;
}
.review-prompt-cancel:hover { background: var(--bg-3) !important; color: var(--fg) !important; }

/* ── Notes ─────────────────────────────────────────── */

.notes-wrapper {
    margin: 10px 14px 0;
    border: 1px solid var(--line);
    background: var(--bg);
    border-radius: var(--rad-sm);
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.menu-body .notes-wrapper { margin: 0; }

.notes-area {
    width: 100%;
    min-height: 72px;
    max-height: 180px;
    resize: vertical;
    background: transparent;
    border: none;
    color: var(--fg);
    font-size: 13px;
    font-family: inherit;
    line-height: 1.5;
    padding: 0;
    outline: none;
}
.notes-area::placeholder { color: var(--fg-4); }

.notes-toolbar {
    display: flex;
    gap: 6px;
    justify-content: space-between;
    align-items: center;
    padding-top: 6px;
    border-top: 1px solid var(--line-soft);
}
.notes-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.notes-btn {
    width: 26px;
    height: 26px;
    border: 1px solid var(--line);
    background: transparent;
    border-radius: var(--rad-sm);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: grid;
    place-items: center;
    color: var(--fg-2);
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.notes-btn:hover { color: var(--fg); border-color: var(--fg-4); }
.notes-cancel:hover { color: var(--warn); border-color: var(--warn); }
.notes-save { color: var(--acc); border-color: var(--acc); }
.notes-save:hover { background: var(--acc-dim); }

/* ── Trash / Flagged lists ─────────────────────────── */

.trash-list,
.flagged-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 200px;
    overflow-y: auto;
}
.trash-item,
.flagged-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: var(--bg);
    border: 1px solid var(--line-soft);
    border-radius: var(--rad-sm);
    font-size: 12.5px;
}
.trash-desc,
.flagged-line-moves {
    flex: 1;
    color: var(--fg);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.flagged-line-moves { cursor: pointer; }
.flagged-line-moves:hover { color: var(--acc); }
.trash-ago {
    color: var(--fg-3);
    font: 500 10.5px/1 var(--mono);
    flex-shrink: 0;
}

.trash-restore,
.flagged-unflag {
    padding: 4px 8px;
    border: 1px solid var(--line);
    border-radius: var(--rad-sm);
    font: 600 11px/1 var(--sans);
    cursor: pointer;
    background: transparent;
    color: var(--fg-2);
    flex-shrink: 0;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.trash-restore:hover {
    border-color: var(--acc);
    color: var(--acc);
    background: var(--acc-dim);
}
.flagged-unflag:hover {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(212, 168, 81, 0.12);
}

/* ── Panel footer ──────────────────────────────────── */

.panel-foot {
    margin-top: auto;
    padding: 10px 14px;
    border-top: 1px solid var(--line-soft);
    font-size: 11px;
    color: var(--fg-3);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-shrink: 0;
}
.panel-foot a { color: var(--fg-2); text-decoration: none; }
.panel-foot a:hover { color: var(--fg); }

/* ── Squares ───────────────────────────────────────── */

.square {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: default;
}
.square.light { background: var(--sq-light); }
.square.dark  { background: var(--sq-dark); }

.square.selected.light { background: color-mix(in srgb, var(--sq-light), var(--sq-selected)); }
.square.selected.dark  { background: color-mix(in srgb, var(--sq-dark),  var(--sq-selected)); }

.square.last-move.light { background: color-mix(in srgb, var(--sq-light), var(--sq-last-move)); }
.square.last-move.dark  { background: color-mix(in srgb, var(--sq-dark),  var(--sq-last-move)); }

.square.check.light { background: radial-gradient(ellipse at center, var(--sq-check), transparent 80%), var(--sq-light); }
.square.check.dark  { background: radial-gradient(ellipse at center, var(--sq-check), transparent 80%), var(--sq-dark); }

.square.correct.light { background: color-mix(in srgb, var(--sq-light), var(--sq-correct)); }
.square.correct.dark  { background: color-mix(in srgb, var(--sq-dark),  var(--sq-correct)); }

.square.wrong.light { background: color-mix(in srgb, var(--sq-light), var(--sq-wrong)); }
.square.wrong.dark  { background: color-mix(in srgb, var(--sq-dark),  var(--sq-wrong)); }

.square.legal-move::after {
    content: '';
    position: absolute;
    width: 30%;
    height: 30%;
    border-radius: 50%;
    background: var(--sq-legal);
    pointer-events: none;
}
.square.legal-move.has-piece::after {
    width: 88%;
    height: 88%;
    background: transparent;
    border: 5px solid var(--sq-legal);
    border-radius: 50%;
}

/* ── Pieces ────────────────────────────────────────── */

.piece {
    width: 85%;
    height: 85%;
    z-index: 1;
    pointer-events: none;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.15));
    /* iOS Safari otherwise treats a long-press on the piece <img> as
       "save image" and hijacks the touch before it reaches our
       pointerdown handler. */
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
}
.square.has-piece { cursor: grab; }

.piece.dragging {
    width: calc(var(--board-size) / 8 * 0.9);
    height: calc(var(--board-size) / 8 * 0.9);
    cursor: grabbing;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.5));
}
.piece.ghost { opacity: 0.3; }

/* ── Promotion modal ───────────────────────────────── */

.modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    display: grid;
    place-items: center;
    z-index: 2000;
    padding: 20px;
}
.modal.hidden { display: none; }

.modal-content {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 18px 18px 16px;
    text-align: center;
    width: min(340px, 100%);
    box-shadow: 0 18px 50px -16px rgba(0, 0, 0, 0.8);
}
.modal-content h3 {
    margin-bottom: 12px;
    font: 600 11px/1 var(--sans);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-3);
    text-align: center;
}

.promotion-choices {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.promotion-choices button {
    appearance: none;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--rad-sm);
    aspect-ratio: 1 / 1;
    width: auto;
    height: auto;
    cursor: pointer;
    display: grid;
    place-items: center;
    padding: 6px;
    transition: background 0.12s, border-color 0.12s, transform 0.08s;
}
.promotion-choices button img {
    width: 76%;
    height: 76%;
    object-fit: contain;
    pointer-events: none;
}
.promotion-choices button:hover {
    background: var(--bg-3);
    border-color: var(--acc);
}
.promotion-choices button:active { transform: scale(0.96); }

/* ── Welcome modal ─────────────────────────────────── */

.welcome-modal-content {
    width: min(380px, 100%);
    text-align: left;
    padding: 22px 22px 18px;
}
.welcome-modal-content h3 { text-align: center; margin-bottom: 14px; }
.welcome-body {
    font: 400 14px/1.45 var(--sans);
    color: var(--fg-2);
    margin: 0 0 14px;
    text-align: center;
}
.welcome-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}
.welcome-field span {
    font: 600 11px/1 var(--sans);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fg-3);
}
.welcome-field select {
    background: var(--bg-3);
    color: var(--fg);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 8px 10px;
    font: 400 14px var(--sans);
}
.welcome-hint {
    font: 400 12px/1.4 var(--sans);
    color: var(--fg-3);
    margin: 0 0 14px;
    text-align: center;
}
.welcome-continue {
    width: 100%;
    background: var(--acc);
    color: #fff;
    border: 0;
    border-radius: 6px;
    padding: 10px 14px;
    font: 600 14px var(--sans);
    cursor: pointer;
}
.welcome-continue:hover { filter: brightness(1.08); }

/* ── PGN color picker ──────────────────────────────── */

.pgn-color-choices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}
.pgn-color-choices button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: var(--bg-3);
    color: var(--fg);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 14px 10px;
    font: 600 15px var(--sans);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
.pgn-color-choices button:hover { background: var(--bg); border-color: var(--acc); }
/* Real board pieces on a light tile so both white and black kings read clearly
   on the dark UI (a bare black-king glyph/SVG blends into the dark background). */
.pgn-color-choices button img {
    width: 40px;
    height: 40px;
    padding: 4px;
    background: #ece6d8;
    border-radius: 6px;
}
.pgn-color-cancel {
    width: 100%;
    background: transparent;
    color: var(--fg-3);
    border: 0;
    padding: 8px;
    font: 500 13px var(--sans);
    cursor: pointer;
}
.pgn-color-cancel:hover { color: var(--fg); }

/* ── Empty-repertoire invite ───────────────────────── */

.empty-rep-invite {
    margin: 6px 12px 10px;
    padding: 12px 14px;
    background: var(--bg-3);
    border: 1px dashed var(--line);
    border-radius: 8px;
    text-align: center;
}
.empty-rep-invite.hidden { display: none; }
.empty-rep-title {
    font: 600 13px/1.2 var(--sans);
    color: var(--fg);
    margin-bottom: 4px;
}
.empty-rep-body {
    font: 400 12px/1.45 var(--sans);
    color: var(--fg-2);
    margin-bottom: 10px;
}
.empty-rep-tour-btn {
    background: var(--acc);
    color: #fff;
    border: 0;
    border-radius: 6px;
    padding: 7px 14px;
    font: 600 12px var(--sans);
    cursor: pointer;
}
.empty-rep-tour-btn:hover { filter: brightness(1.08); }

/* ── Tutorial coach-marks ──────────────────────────── */

.tutorial-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    pointer-events: none;
}
/* Lock page + panel scrolling while the tutorial is active so the
   layout doesn't shift out from under the spotlight. start() snaps
   everything to the top before adding this class. Mobile-only because
   desktop already keeps everything visible without scrolling. */
@media (max-width: 699.98px) {
    body.tutorial-active { overflow: hidden; touch-action: none; }
    body.tutorial-active .panel,
    body.tutorial-active .explorer-moves { overflow: hidden !important; }
}
/* The tutorial forces White so "your move"/"opponent's move" ordering
   matches the copy. Block the color buttons (header + menu) so a tap
   on Black doesn't desync the board from the tutorial steps. */
body.tutorial-active .color-selector .color-btn:not(.active),
body.tutorial-active .nav-color-selector .color-btn:not(.active),
body.tutorial-active #menu-color-b,
body.tutorial-active #menu-color-w:not(.active) {
    pointer-events: none;
    opacity: 0.4;
    cursor: default;
}
.tutorial-overlay.hidden { display: none; }
.tutorial-dim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    pointer-events: auto;
}
.tutorial-spotlight,
.tutorial-board-half {
    position: absolute;
    border-radius: 8px;
    box-shadow: 0 0 0 2px var(--acc);
    pointer-events: none;
    transition: top 0.18s, left 0.18s, width 0.18s, height 0.18s;
    display: none;
}
.tutorial-board-half { border-radius: 4px; }
.tutorial-card {
    position: absolute;
    width: min(320px, calc(100vw - 24px));
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 14px 16px 12px;
    box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.85);
    pointer-events: auto;
    z-index: 1;
}
.tutorial-card-centered {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%);
}
.tutorial-step {
    font: 600 10px/1 var(--sans);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-3);
    margin-bottom: 6px;
}
.tutorial-title {
    font: 600 15px/1.2 var(--sans);
    color: var(--fg);
    margin-bottom: 6px;
}
.tutorial-body {
    font: 400 13px/1.45 var(--sans);
    color: var(--fg-2);
    margin-bottom: 12px;
}
.tutorial-body p + p { margin-top: 8px; }
.tutorial-actions {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}
.tutorial-skip, .tutorial-next, .tutorial-back {
    border: 0;
    border-radius: 6px;
    padding: 7px 14px;
    font: 600 12px var(--sans);
    cursor: pointer;
}
.tutorial-skip {
    background: transparent;
    color: var(--fg-3);
}
.tutorial-skip:hover { color: var(--fg); }
.tutorial-back {
    background: transparent;
    color: var(--fg-3);
}
.tutorial-back:hover { color: var(--fg); }
.tutorial-back[disabled] { opacity: 0.35; cursor: default; }
.tutorial-back[disabled]:hover { color: var(--fg-3); }
.tutorial-actions-right {
    display: flex;
    gap: 8px;
    align-items: center;
}
.tutorial-next {
    background: var(--acc);
    color: #fff;
}
.tutorial-next:hover { filter: brightness(1.08); }

/* ── Animations ────────────────────────────────────── */

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60%  { transform: translateX(-4px); }
    40%, 80%  { transform: translateX(4px); }
}
.shake { animation: shake 0.3s; }

@keyframes hint-pulse {
    0%, 100% { box-shadow: inset 0 0 0 4px rgba(121, 176, 196, 0.95); }
    50% { box-shadow: inset 0 0 0 4px rgba(121, 176, 196, 0.3); }
}
.square.hint-square { animation: hint-pulse 0.9s ease-in-out infinite; }

.practice-line-num {
    font-size: 11px;
    color: var(--fg-3);
    font-family: var(--mono);
}

/* ── Desktop layout (≥700px) ───────────────────────── */

@media (min-width: 700px) {
    :root {
        --board-size: min(calc(100vw - 420px), calc(100dvh - var(--header-h) - 2rem));
    }

    .desktop-only { display: flex; }

    main {
        flex-direction: row;
        align-items: stretch;
        justify-content: center;
        gap: 0;
        overflow: hidden;
    }

    .board-col {
        flex-shrink: 0;
        width: auto;
        align-items: center;
        justify-content: center;
        padding: 18px;
    }

    .panel {
        width: 380px;
        flex-shrink: 0;
        background: var(--bg-2);
        border-top: none;
        border-left: 1px solid var(--line);
        height: 100%;
        max-height: none;
    }

    .nav-bar { display: none; }  /* desktop uses keyboard / hover */
}

/* Mobile: let the panel scroll as a single unit instead of clipping.
   The desktop layout (>=700px) keeps its in-place scrolling region inside
   .explorer-moves and a fixed-height panel. On mobile the panel sits
   below the board with limited vertical room, so #explorer-section was
   getting squeezed to ~0 in build mode and overflowing children were
   being clipped in practice mode. */
@media (max-width: 699.98px) {
    .panel {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    #explorer-section {
        flex: 0 0 auto;
        overflow: visible;
        min-height: 0;
    }
    .explorer-moves {
        flex: 0 0 auto;
        overflow: visible;
        min-height: 180px;
    }

    /* Tighten practice-mode chrome so the typical state
       (opening + practice-info + status) fits in the space
       reserved below the board without scrolling. The mode/color
       controls live in the .nav-bar on mobile, not in panel-top. */
    .panel-top { display: none; }
    .opening { padding: 8px 14px 6px; }
    .opening-eyebrow { display: none; }
    .opening-name { font-size: 16px; line-height: 1.2; }
    .practice-info { padding: 6px 12px; gap: 6px; }
    .stat-value { font-size: 14px; }
    .status { margin-top: 6px; padding: 7px 10px; font-size: 12.5px; }
}

/* Small phones */
@media (max-width: 380px) {
    header { padding: 0 12px; }
    .username { max-width: 80px; font-size: 12px; }
    /* .panel-top is hidden on mobile (see >= max-width 699.98px rule);
       its small-phone tweaks were dropped with it. */
    .opening { padding: 10px 12px 8px; }
    .opening-name { font-size: 17px; }
    .practice-info { padding: 8px 12px; }
    .status,
    .build-prompt,
    .notes-wrapper { margin-left: 10px; margin-right: 10px; }
    .practice-review-btns { padding-left: 10px; padding-right: 10px; }
    .panel-foot { padding: 10px 12px; flex-wrap: wrap; gap: 4px; }
}