/* Game page layout and panels. These rules were an inline <style> in
   core/templates/core/games/game_detail.html, re-sent with every game page
   (about 3.9 KB gzip each); as a stylesheet the browser caches them once.
   The template links this file exactly where the inline block stood, after
   the per-request board-theme variables, so the cascade is unchanged.
   The page-width rules key on the server-rendered body.game-detail-page
   class rather than a :has() test for the game shell: a first paint can
   happen before the shell is parsed, and the :has() form then widened the
   page from 1100px to 1480px after that paint (a 0.11 layout shift). */
body.game-detail-page .page {
    max-width: 1480px;
    padding-top: clamp(68px, 5vw, 82px);
}
/* Like Lichess, the board starts just under the header on a desktop, so
   the room above it is not a dead band the board can never use (owner,
   2026-09-23: "like there is a cap above it"). The header's buttons end
   52px down. */
@media(min-width: 901px) {
    body.game-detail-page .page {
        padding-top: 62px;
    }
    body.game-board-page .game-detail-shell .pgn-container {
        padding-top: 0;
    }
}
body.game-detail-page .footer {
    margin-top: 46px;
}
.game-archive-return {
    max-width: 1480px;
    margin: 0 auto 14px;
}
/* A list's return link arrives with the playlist fetch. When the address
   predicts it, the page holds its row unseen from the first paint, so the
   board does not drop about 50px when it appears. */
.game-archive-return.is-pending {
    visibility: hidden;
}
body.game-board-page .game-detail-shell .history-column.info-visible .move-panel,
body.game-board-page .game-detail-shell .history-column.share-visible .move-panel,
body.game-board-page .game-detail-shell .history-column.source-visible .move-panel {
    display: none;
}
.game-rail-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    padding: 12px;
}
.game-rail-panel[hidden] {
    display: none;
}
/* Inside the scrollable rail panel the notebook-save menu expands in
   flow; a floating popup would be clipped by the column's overflow. */
.game-rail-panel .game-save-notebook-menu {
    position: static;
    width: auto;
    margin-top: 8px;
}
.game-underboard-actions {
    display: grid;
    gap: 12px;
}
.game-share-group {
    display: grid;
    gap: 6px;
}
.game-share-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.game-share-tiles:has(> :nth-child(4)) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.game-share-tiles-copy {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.game-share-tile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    min-height: 60px;
    text-align: center;
}
.game-share-tile svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.game-share-tile span {
    min-width: 0;
    overflow-wrap: anywhere;
}
.game-info-table {
    overflow: hidden;
    border: 1px solid rgba(var(--tint-rgb), 0.13);
    background: rgba(0, 0, 0, 0.18);
}
.game-info-row {
    display: grid;
    grid-template-columns: minmax(105px, 18%) minmax(0, 1fr);
    min-height: 39px;
    align-items: center;
    padding: 7px 14px;
    color: var(--data-secondary);
    font-family: 'Share Tech Mono', monospace;
    font-size: 13px;
}
.game-info-row:nth-child(even) {
    background: rgba(255, 255, 255, 0.035);
}
.game-info-label {
    color: var(--muted);
    font-weight: 700;
}
.game-info-value {
    min-width: 0;
    overflow-wrap: anywhere;
}
.game-info-value a,
.game-related-links a {
    color: var(--cyan);
    text-decoration: none;
}
.game-info-value a:hover,
.game-info-value a:focus-visible,
.game-related-links a:hover,
.game-related-links a:focus-visible {
    color: var(--white);
    text-decoration: underline;
    outline: none;
}
.game-related-links {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 8px;
    align-items: baseline;
    padding: 11px 4px 1px;
    color: var(--muted);
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
}
.game-share-fen {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.game-share-fen label {
    color: var(--muted);
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
}
.game-share-fen-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px;
    align-items: stretch;
    min-width: 0;
}
.game-share-fen textarea {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 38px;
    padding: 7px 8px;
    border: 1px solid rgba(var(--tint-rgb), 0.2);
    background: rgba(0, 0, 0, 0.34);
    color: var(--data-secondary);
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    resize: none;
}
.game-share-fen textarea:focus {
    border-color: var(--cyan);
    outline: none;
}
.game-share-fen-copy {
    width: 40px;
    min-height: 38px;
    padding: 0;
    border-left: 0;
    justify-content: center;
}
.game-share-fen-copy svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.game-save-notebook {
    position: relative;
}
.game-save-notebook summary {
    list-style: none;
}
.game-save-notebook summary::-webkit-details-marker {
    display: none;
}
.game-save-notebook-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    z-index: 45;
    width: min(360px, calc(100vw - 42px));
    padding: 12px;
    border: 1px solid rgba(var(--tint-rgb), 0.42);
    background: rgba(var(--ink-rgb), 0.98);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.58);
}
.game-save-notebook-title {
    margin: 0 0 10px;
    color: var(--white);
    font-family: 'Orbitron', sans-serif;
    font-size: 11px;
    letter-spacing: 0.7px;
}
.game-save-notebook-menu form {
    display: grid;
    gap: 9px;
    margin: 0;
}
.game-save-choice {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    color: var(--data-secondary);
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
}
.game-save-choice select,
.game-save-choice input {
    grid-column: 2;
    width: 100%;
    min-width: 0;
    height: 34px;
    border: 1px solid rgba(var(--tint-rgb), 0.24);
    background: rgb(var(--ink-rgb));
    color: var(--white);
    font-family: inherit;
    box-sizing: border-box;
}
.game-save-choice select {
    padding: 5px 32px 5px 9px;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--tint) 50%),
        linear-gradient(135deg, var(--tint) 50%, transparent 50%);
    background-position:
        calc(100% - 15px) calc(50% - 2px),
        calc(100% - 10px) calc(50% - 2px);
    background-repeat: no-repeat;
    background-size: 5px 5px, 5px 5px;
    appearance: none;
    cursor: pointer;
}
.game-save-choice input {
    padding: 5px 9px;
}
.game-save-choice select:focus,
.game-save-choice input:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 0 2px rgba(var(--tint-rgb), 0.1);
    outline: none;
}
.game-save-choice select option,
.game-save-choice select optgroup {
    background: rgb(var(--ink-rgb));
    color: var(--white);
    font-family: 'Share Tech Mono', monospace;
}
.game-save-choice select option:disabled {
    color: var(--muted);
}
.game-save-choice[hidden] {
    display: none;
}
.game-save-notebook-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 3px;
}
.game-save-notebook-actions .game-share-action {
    justify-content: center;
}
.game-save-notebook-confirm {
    border-color: rgba(var(--tint-rgb), 0.66);
    background: rgba(var(--tint-rgb), 0.12);
    color: var(--white);
}
.game-share-action {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 11px;
    border: 1px solid rgba(var(--tint-rgb), 0.3);
    background: rgba(0, 0, 0, 0.26);
    color: var(--chrome);
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.7px;
    text-decoration: none;
    cursor: pointer;
}
.game-share-action:hover,
.game-share-action:focus-visible {
    border-color: var(--cyan);
    background: rgba(var(--tint-rgb), 0.08);
    outline: none;
}
.game-share-action span {
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
}
.game-share-action.is-pending {
    cursor: wait;
    opacity: 0.78;
}
.game-detail-shell a.player-name {
    text-decoration: none;
    text-underline-offset: 3px;
}
.game-detail-shell a.player-name:hover,
.game-detail-shell a.player-name:focus-visible {
    color: var(--cyan);
    text-decoration: underline;
    outline: none;
}
body.game-board-page .game-detail-shell .pgn-container {
    border-radius: 4px;
    margin-top: 0;
    padding: 12px;
}
@media(min-width: 901px) {
    body.game-board-page .game-detail-shell .history-column {
        margin-top: 36px;
    }
}
body.game-board-page .game-detail-shell .board-column { position: relative; }
body.game-board-page .game-detail-shell .board-resize-handle::before,
body.game-board-page .game-detail-shell .board-resize-handle::after {
    filter: drop-shadow(0 0 5px rgba(var(--tint-rgb), 0.55));
}
body.game-board-page .game-detail-shell .position-action {
    color: var(--chrome);
    text-decoration: none;
    border-color: rgba(var(--tint-rgb), 0.35);
}
body.game-board-page .game-detail-shell .position-action:hover {
    border-color: var(--cyan);
    box-shadow: 0 0 15px var(--cyan-glow);
}
.position-tool-form {
    margin: 0;
    display: contents;
}
.save-popover-shell {
    position: relative;
    display: inline-grid;
    width: 34px;
    height: 34px;
}
.save-popover {
    position: absolute;
    left: 0;
    bottom: 42px;
    z-index: 40;
    display: flex;
    flex-direction: column;
    width: min(320px, calc(100vw - 36px));
    max-height: 310px;
    padding: 10px;
    border: 1px solid rgba(var(--tint-rgb), 0.42);
    background: rgba(var(--ink-rgb), 0.96);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5), 0 0 28px rgba(var(--tint-rgb), 0.16);
}
.save-popover[hidden] {
    display: none;
}
.engine-bookmark-control .save-popover {
    top: 42px;
    bottom: auto;
}
body.game-board-page .game-detail-shell .analysis-panel:has(.engine-bookmark-control .save-popover:not([hidden])),
body.game-board-page .game-detail-shell .history-column:has(.engine-bookmark-control .save-popover:not([hidden])) {
    overflow: visible;
    z-index: 35;
}
.save-popover-title {
    margin: 2px 0 8px;
    color: var(--muted);
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
}
/* Only the shelves scroll. The create control is the reason the menu can be
   opened at all, so it stays on screen however many collections there are —
   fourteen of them used to push it past the bottom of the display. */
.save-popover-collections {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.save-popover-create {
    flex: 0 0 auto;
    margin-top: 6px;
}
/* A group passes the column's shrink through to the shelves inside it, so
   the shelves still scroll and the create control still stays on screen. */
.save-popover-group {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
}
.save-popover-group-shelves {
    flex: 0 1 auto;
    min-height: 0;
}
.collection-toggle-form {
    margin: 0 0 6px;
}
.collection-toggle-form:last-child {
    margin-bottom: 0;
}
/* The charcoal theme draws each row's checkbox in this span; the base
   look keeps its Add/Remove verbs instead and hides it. */
.save-row-check {
    display: none;
}
.collection-toggle-form button,
.save-popover-create > summary {
    width: 100%;
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 9px;
    border: 1px solid rgba(var(--tint-rgb), 0.24);
    background: rgba(0, 0, 0, 0.24);
    color: var(--cyan);
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    letter-spacing: 1px;
    text-decoration: none;
    cursor: pointer;
    list-style: none;
}
.save-popover-create > summary::-webkit-details-marker {
    display: none;
}
.save-popover-create > summary::after {
    content: '+';
    color: var(--muted);
    font-size: 13px;
    line-height: 1;
}
.save-popover-create[open] > summary::after {
    content: '\2212';
}
.save-popover-create-form {
    display: grid;
    gap: 6px;
    margin: 6px 0 0;
}
.save-popover-create-form input {
    width: 100%;
    min-height: 32px;
    padding: 6px 9px;
    border: 1px solid rgba(var(--tint-rgb), 0.3);
    background: rgba(0, 0, 0, 0.32);
    color: var(--white);
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
}
.save-popover-create-form input:focus {
    outline: none;
    border-color: var(--cyan);
}
.save-popover-create-form button {
    width: 100%;
    min-height: 32px;
}
.collection-toggle-form button.active {
    border-color: rgba(var(--mint-rgb), 0.46);
    color: var(--mint);
    background: rgba(var(--mint-rgb), 0.06);
}
.collection-toggle-form span {
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
}
body.game-board-page .game-detail-shell .history-column.annotations-visible .move-panel {
    display: none;
}
.annotation-rail {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    padding: 14px 14px 16px;
    font-family: 'Rajdhani', sans-serif;
    color: var(--muted);
}
.annotation-rail[hidden] {
    display: none;
}
.annotation-rail-title {
    margin: 0 0 10px;
    color: var(--chrome);
    font-family: 'Orbitron', sans-serif;
    font-size: 0.95rem;
    letter-spacing: 3px;
    text-transform: uppercase;
}
.annotation-rail-intro {
    margin: 0 0 14px;
    color: var(--white);
    font-size: 0.98rem;
    line-height: 1.55;
    opacity: 0.86;
}
.annotation-rail-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
}
.annotation-rail-note {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 12px;
    padding: 13px 8px;
    border-top: 1px solid rgba(var(--tint-rgb), 0.16);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.annotation-rail-note:hover {
    background: rgba(var(--tint-rgb), 0.06);
}
.annotation-rail-note.current {
    border-color: rgba(var(--tint-rgb), 0.55);
    background: rgba(var(--tint-rgb), 0.12);
    box-shadow: inset 2px 0 0 rgba(var(--tint-rgb), 0.85);
}
.annotation-rail-move {
    color: var(--gold);
    font-family: 'Share Tech Mono', monospace;
    font-weight: 700;
    line-height: 1.35;
}
.annotation-rail-text {
    min-width: 0;
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.55;
}
.annotation-rail-source {
    margin: 14px 2px 0;
    color: var(--muted);
    font-size: 0.85rem;
    font-style: italic;
    line-height: 1.45;
}
.annotation-rail-source a {
    color: var(--cyan);
    text-decoration: none;
}
.annotation-toggle {
    font-size: 14px;
}
/* Comments are interrupt sub-lines, exactly like variations (lichess
   .tview2-column > interrupt): a full-bleed zebra band spanning the
   whole row — no side margins, no radius, no floating card — with the
   same hairline top/bottom borders the variation blocks use and a 2px
   left accent on the comment itself. Flush left edge, straight lines. */
.annotation-inline-line {
    width: auto;
    grid-column: 1 / -1;
    display: block;
    margin: 0;
    padding: 4px 10px 4px calc(8px + (var(--variation-depth, 1) - 1) * 14px);
    border: 0;
    border-top: 1px solid rgba(var(--gold-rgb), 0.22);
    border-bottom: 1px solid rgba(var(--gold-rgb), 0.16);
    border-left: 2px solid rgba(var(--gold-rgb), 0.3);
    border-radius: 0;
    background: rgba(var(--gold-rgb), 0.035);
    color: var(--muted);
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.95rem;
    line-height: 1.5;
    text-align: left;
    cursor: pointer;
}
.annotation-inline-line + .annotation-inline-line {
    border-top: 0;
}
.annotation-inline-line:hover,
.annotation-inline-line.current {
    background: rgba(var(--gold-rgb), 0.09);
    color: var(--chrome);
}
.annotation-inline-move {
    display: inline;
    margin-right: 4px;
    color: var(--gold);
    font-family: 'Share Tech Mono', monospace;
    font-weight: 700;
}
.annotation-inline-text {
    display: inline;
    min-width: 0;
}
#debug-node {
    font-family: monospace;
    font-size: 10px;
    color: var(--danger);
    text-align: center;
    margin-top: 10px;
    opacity: 0.8;
}
@media(max-width: 900px) {
    body.game-detail-page .page {
        padding-top: 64px;
    }
}
@media(max-width: 560px) {
    .game-info-row {
        grid-template-columns: 96px minmax(0, 1fr);
        padding-inline: 10px;
        font-size: 12px;
    }
    .game-save-notebook-menu {
        position: fixed;
        right: 16px;
        bottom: 76px;
        left: 16px;
        width: auto;
    }
    body.game-board-page .game-detail-shell .pgn-container {
        padding: 0;
        gap: 0;
    }
    body.game-board-page .game-detail-shell .controls {
        gap: 6px;
    }
    body.game-board-page .game-detail-shell .controls .btn-node {
        min-width: 0;
        padding: 0;
        font-size: 15px;
    }
    body.game-board-page .game-detail-shell .move-navigation .btn-node {
        padding: 0;
    }
}