/* Board page: fill remaining viewport below navbar */
body { overflow: hidden; }
#app {
    display: flex;
    width: 100%;
    height: calc(100svh - 57px);
}

/* Landscape: panel on the right, iframe fills remaining */
@media (orientation: landscape) {
    #app { flex-direction: row; }
    #game-frame { flex: 1; height: 100%; border: none; }
    #panel {
        width: 320px; height: 100%;
        border-left: 1px solid var(--bs-border-color);
        flex-direction: column;
        flex-shrink: 0;
    }
    #panel-body { flex-direction: column; }
    #panel-splitter { height: 5px; cursor: row-resize; }
    #node-comment {
        height: 80px;
        min-height: 40px;
    }
}

/* Portrait: panel on the bottom, iframe fills remaining */
@media (orientation: portrait) {
    body { overflow: auto; }
    #app { flex-direction: column; height: auto; min-height: calc(100svh - 57px); }
    #game-frame { width: 100%; height: calc(100svh - 57px - 170px); flex-shrink: 0; border: none; }
    #panel {
        width: 100%; max-height: 600px;
        border-top: 1px solid var(--bs-border-color);
        flex-direction: column;
        flex-shrink: 0;
    }
    #panel-body { flex-direction: row; flex: 1; }
    #panel-splitter { width: 5px; cursor: col-resize; }
    #node-comment {
        width: 120px;
        min-width: 60px;
    }
}

#panel {
    display: flex;
    background: var(--bs-body-bg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 13px;
    color: var(--bs-body-color);
}

/* ── Game info header ───────────────────────────────────────────── */
#game-info {
    padding: 8px 10px 6px;
    border-bottom: 1px solid var(--bs-border-color);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
#game-info input, #game-info select {
    background: transparent;
    border: none;
    outline: none;
    color: inherit;
    font: inherit;
    padding: 0;
    min-width: 0;
}
#game-info:not(.editing) {
    color: #888;
}
#game-info input:disabled, #game-info select:disabled {
    opacity: 1;
    cursor: default;
    -webkit-text-fill-color: currentColor;
}
#game-info select:disabled {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
#game-info.editing input:not(:disabled):hover,
#game-info.editing select:not(:disabled):hover { background: rgba(255,255,255,0.05); }
#game-info.editing input:not(:disabled):focus,
#game-info.editing select:not(:disabled):focus { background: rgba(255,255,255,0.08); }
#game-info.editing select:not(:disabled) { cursor: pointer; }
#game-info select option { background: var(--bs-body-bg, #1d2021); color: var(--bs-body-color, #ebdbb2); }
#game-info-header {
    display: flex;
    align-items: center;
    gap: 4px;
}
.gi-group { display: flex; align-items: center; gap: 4px; }
#gi-time-base, #gi-time-inc {
    font-weight: 600;
    text-align: center;
    -moz-appearance: textfield;
}
#game-info.editing #gi-time-base,
#game-info.editing #gi-time-inc { width: 32px; }
#game-info:not(.editing) #gi-time-base,
#game-info:not(.editing) #gi-time-inc { width: calc(var(--ch, 4) * 1ch); text-align: left; padding: 0 !important; }
#game-info:not(.editing) #game-info-header { gap: 0; justify-content: space-between; }
#game-info:not(.editing) .gi-group { gap: 0; }
.gi-sep { flex-shrink: 0; color: #888; }
.gi-sep::before { content: "\b7"; }
#game-info.editing .gi-sep { display: none; }
#gi-time-base::-webkit-inner-spin-button,
#gi-time-base::-webkit-outer-spin-button,
#gi-time-inc::-webkit-inner-spin-button,
#gi-time-inc::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.gi-plus { color: #888; font-weight: 600; flex-shrink: 0; }
#game-info:not(.editing) .no-base-time #gi-time-base,
#game-info:not(.editing) .no-base-time .gi-plus { display: none; }
#game-info:not(.editing) .no-base-time #gi-time-inc { text-align: left; }
#gi-game-type { text-align: right; }
#game-info:not(.editing) #gi-game-type { display: none; }
#game-info.editing #gi-type-display { display: none; }
#gi-type-group { margin-left: auto; }
#game-info:not(.editing) #gi-type-group { margin-left: 0; }
#gi-date-display { font-size: 11px; flex-shrink: 0; }
#game-info:not(.editing) #gi-date,
#game-info:not(.editing) #gi-time { display: none; }
#game-info.editing #gi-date-display { display: none; }
#game-info.editing #gi-date,
#game-info.editing #gi-time { flex: 1; }
#game-info:not(.editing) .gi-player { gap: 0; }
#game-info:not(.editing) .gi-rating { padding: 0 !important; width: calc(var(--ch, 4) * 1ch); flex: none !important; }
#game-info:not(.editing) .gi-change { padding: 0 !important; width: calc(var(--ch, 3) * 1ch + 0.5em); flex: none !important; }
#game-info.editing .gi-player { gap: 4px; }
.gi-player {
    display: flex;
    align-items: center;
}
.gi-color {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid #888;
    margin-right: 1ch;
}
.gi-color.white { background: #ddd; }
.gi-color.black { background: #333; }
.gi-player input { flex: 1; }
.gi-player-link {
    flex: 1;
    min-width: 0;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gi-player-link:hover { text-decoration: underline; }
.gi-player-link:empty { display: none; }
#game-info.editing .gi-player-link { display: none; }
#game-info:not(.editing) .gi-player-link:not(:empty) + input { display: none; }
.gi-rating { width: 50px; flex: 0 0 50px !important; color: #aaa; text-align: right; margin-left: auto; }
.gi-change {
    font-size: 11px;
    width: 36px;
    flex: 0 0 36px;
    text-align: right;
    flex-shrink: 0;
}
.gi-change.positive { color: #6a6 !important; -webkit-text-fill-color: #6a6 !important; }
.gi-change.negative { color: #c66 !important; -webkit-text-fill-color: #c66 !important; }
#game-info:not(.editing) .gi-rating,
#game-info:not(.editing) #gi-result-outcome,
#game-info:not(.editing) #gi-result-method { color: inherit; }
#gi-result-row {
    display: flex;
    gap: 6px;
    border-top: 1px solid var(--bs-border-color);
    margin-top: 2px;
    padding-top: 4px;
}
#gi-result-outcome, #gi-result-method {
    flex: 1;
    font-size: 12px;
    color: #aaa;
}
#gi-result-method { text-align: right; }

/* ── HOP notation bar ──────────────────────────────────────────── */
#hop-bar {
    display: flex;
    align-items: center;
    padding: 3px 10px;
    border-bottom: 1px solid var(--bs-border-color);
    flex-shrink: 0;
    gap: 8px;
    font-size: 12px;
}
#hop-bar > span {
    font-weight: 700;
    color: var(--bs-secondary-color);
    flex-shrink: 0;
    user-select: none;
}
#hop-input {
    flex: 1;
    width: 0;
    min-width: 0;
    font-family: "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;
    font-size: 11px;
    background: transparent;
    border: none;
    outline: none;
    color: var(--bs-body-color);
    padding: 2px 4px;
    border-radius: 3px;
    text-overflow: ellipsis;
}
#hop-input:hover {
    background: rgba(128,128,128,0.08);
}
#hop-input:focus {
    background: rgba(128,128,128,0.12);
}

#panel-body {
    display: flex;
    flex: 1;
    min-height: 0;
    min-width: 0;
}

#node-comment {
    display: block;
    box-sizing: border-box;
    padding: 8px;
    margin: 0;
    border: none;
    outline: none;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-family: inherit;
    font-size: 12px;
    line-height: 1.4;
    flex-shrink: 0;
    resize: none;
}
#node-comment::placeholder {
    color: var(--bs-secondary-color);
    opacity: 0.6;
}

#panel-splitter {
    flex-shrink: 0;
    background: var(--bs-border-color);
}
#panel-splitter:hover {
    background: var(--bs-secondary-color);
}

body.panel-dragging {
    user-select: none;
    -webkit-user-select: none;
}
body.panel-dragging #game-frame {
    pointer-events: none;
}

#tree-nav {
    position: relative;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 4px 0;
    background: var(--hl-surface);
    border-bottom: 1px solid var(--bs-border-color);
    flex-shrink: 0;
}
#tree-nav button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 28px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--bs-secondary-color);
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
}
#tree-nav button:hover {
    background: var(--bs-table-hover-bg);
    color: var(--bs-body-color);
}
#tree-nav > button.active {
    background: var(--bs-body-color);
    color: var(--bs-body-bg);
}
#tree-nav svg { width: 16px; height: 16px; flex-shrink: 0; }
#btn-annotation-color {
    width: 20px !important; height: 20px !important;
    min-width: 20px; padding: 0;
    border-radius: 4px;
    border: 2px solid var(--bs-secondary-color) !important;
}

#menu-dropdown {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,.4);
    z-index: 100;
    padding: 4px 0;
}
#menu-dropdown.open { display: flex; flex-direction: column; }
#menu-dropdown button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 12px;
    border: none;
    background: transparent;
    color: var(--bs-body-color);
    cursor: pointer;
    font-size: 12px;
    white-space: nowrap;
    text-align: left;
    text-decoration: none;
    transition: background 0.1s;
}
#menu-dropdown a {
    width: 100%;
    padding: 6px 12px;
    border: none;
    background: transparent;
    color: var(--bs-body-color);
    cursor: pointer;
    font-size: 12px;
    white-space: nowrap;
    text-align: center;
    text-decoration: none;
    transition: background 0.1s;
}
#menu-dropdown a span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
#menu-dropdown button:hover,
#menu-dropdown a:hover { background: var(--bs-table-hover-bg); }
#menu-dropdown button.active { color: #6a6; background: transparent; }
#menu-dropdown button svg,
#menu-dropdown a svg { width: 16px; height: 16px; flex-shrink: 0; }

#game-tree {
    flex: 1;
    min-height: 0;
    min-width: 0;
    padding: 8px;
    overflow-y: auto;
    overflow-x: auto;
    display: grid;
    grid-auto-columns: min-content;
    align-content: start;
    align-items: center;
    gap: 4px 4px;
    position: relative;
}

.tree-move-num {
    font-size: 10px;
    color: #888;
    user-select: none;
    white-space: nowrap;
}
.tree-node {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 3px;
    border-radius: 3px;
    cursor: pointer;
    user-select: none;
    transition: background 0.1s;
}
.tree-node:hover { background: var(--bs-table-hover-bg); }
.tree-node.current {
    outline: 2px solid var(--hl-accent-orange);
    outline-offset: 1px;
}
.tree-node.pass-node { font-style: italic; color: #888; font-size: 11px; }
.tree-node.has-comment { position: relative; }
.tree-node.has-comment::after {
    content: "";
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 6px;
    height: 6px;
    background: white;
    border: 1px solid black;
}
.tree-text-node { color: #666; font-style: italic; font-size: 11px; }
.tree-node.current.tree-text-node { color: var(--hl-accent-orange); }
.tree-node.selected {
    outline: 2px solid red;
    outline-offset: 1px;
}
.tree-node.selected.tree-text-node { color: red; }

.tree-context-menu {
    position: absolute;
    z-index: 100;
    background: var(--bs-body-bg, #1d2021);
    border: 1px solid #555;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    padding: 2px 0;
    min-width: 140px;
    font-size: 13px;
}
.tree-context-menu button {
    display: block;
    width: 100%;
    padding: 6px 12px;
    border: none;
    background: none;
    color: var(--bs-body-color, #ebdbb2);
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
}
.tree-context-menu button:hover {
    background: var(--bs-table-hover-bg, #3c3836);
}

.piece-token {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
}
.piece-token.white { background: #f0d9a0; }
.piece-token.black { background: #555; border: 1px solid #777; }
.piece-token img { width: 170%; height: 170%; flex-shrink: 0; transform: translateX(1px); }

/* ── Share modal ───────────────────────────────────────────────── */
#share-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    align-items: center;
    justify-content: center;
}
#share-modal.open { display: flex; }
#share-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.55);
}
#share-content {
    position: relative;
    background: var(--bs-body-bg, #1d2021);
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,.5);
    width: 480px;
    max-width: calc(100vw - 32px);
    max-height: calc(100svh - 64px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#share-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--bs-border-color);
    font-weight: 600;
    font-size: 14px;
}
#share-close {
    background: none;
    border: none;
    color: var(--bs-secondary-color);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}
#share-close:hover { color: var(--bs-body-color); }
#share-body {
    overflow-y: auto;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.share-section > label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    margin-bottom: 6px;
    letter-spacing: .5px;
}
#share-pgn {
    width: 100%;
    height: 140px;
    resize: vertical;
    font-family: "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;
    font-size: 11px;
    line-height: 1.5;
    background: rgba(128,128,128,.08);
    border: 1px solid var(--bs-border-color);
    border-radius: 4px;
    color: var(--bs-body-color);
    padding: 8px;
    outline: none;
}
#share-pgn:focus { border-color: var(--bs-secondary-color); }
#share-image-wrap {
    border: 1px solid var(--bs-border-color);
    border-radius: 4px;
    overflow: hidden;
    background: rgba(128,128,128,.08);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
}
#share-preview {
    display: block;
    max-width: 100%;
    height: auto;
}
#share-image-error {
    display: none;
    color: var(--bs-secondary-color);
    font-size: 12px;
    padding: 16px;
}
.share-actions {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}
.share-actions button {
    flex: 1;
    padding: 5px 10px;
    border: 1px solid var(--bs-border-color);
    border-radius: 4px;
    background: transparent;
    color: var(--bs-body-color);
    font-size: 12px;
    cursor: pointer;
    transition: background .1s;
}
.share-actions button:hover { background: var(--bs-table-hover-bg); }
.share-actions button.copied {
    border-color: #6a6;
    color: #6a6;
}