/* Session controls */
[hidden] { display: none !important; }
.settings-divider { border-top: 1px solid #444; margin: 12px 0; }
#custom-clock-fields input { width: 55%; box-sizing: border-box; background: #333; border: 1px solid #444; border-radius: 4px; color: #eee; font: inherit; padding: 6px; }
#custom-clock-fields input:disabled { opacity: .55; }
#clock-error { color: #e98b80; font-size: 12px; margin: 8px 0; }
#clock-display { display: flex; gap: 8px; width: 100%; box-sizing: border-box; margin: 0; order: 3; }
#clock-display[data-position=bottom] { order: 6; }
#clock-display[data-arrangement=stack] { flex-direction: column; }
.player-clock { flex: 1; min-width: 0; padding: 7px 10px; background: #2c2c2c; border: 1px solid #444; border-radius: 4px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.player-clock span { text-transform: capitalize; color: #aaa; font-size: 12px; }
.player-clock strong { font-size: 24px; font-variant-numeric: tabular-nums; }
.player-clock.ticking { border-color: #888; background: #383838; box-shadow: inset 3px 0 #e74c3c; }
.player-clock.low-time strong { color: #ee8b7f; }
#clock-display[data-size=compact] .player-clock { padding: 4px 8px; }
#clock-display[data-size=compact] strong { font-size: 18px; }
#clock-display[data-size=large] .player-clock { padding: 12px; }
#clock-display[data-size=large] strong { font-size: 32px; }
.status-info { min-width: 0; flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
#variant-status { color: #bbb; font-size: 12px; line-height: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-info:has(#variant-status:not([hidden])) #status-text { -webkit-line-clamp: 1; max-height: 20px; }
.square.hill { outline: 3px solid #e9bd4d; outline-offset: -4px; }
#board-column #status-bar-container { order: 1; margin-bottom: 0; }
#board-column.history-top #history-nav { order: 2; }
#board-column.statusbar-bottom #status-bar-container { order: 7; }
#board-column #board { order: 5; }
#board-column:not(.history-top) #history-nav { order: 8; }
@media (min-width: 901px) {
    #movelist-column { display: flex; flex-direction: column; width: 580px; gap: 10px; box-sizing: border-box; }
    #game-area.movelist-left #board-column, #game-area.movelist-right #board-column { align-self: flex-start; }
    #game-area.movelist-left #movelist-column, #game-area.movelist-right #movelist-column { width: 280px; }
    #movelist-column #clock-display { order: 0; }
    #movelist-column #log-area { order: 1; }
    #movelist-column #history-nav { order: 2; margin: 0; }
}
@media (max-width: 900px) {
    #custom-clock-fields input { width: 100%; }
    #clock-display { flex-shrink: 0; }
    .player-clock { padding: 5px 8px; }
    .player-clock strong { font-size: 21px; }
}

@media (max-width: 600px) {
    #clock-display[data-players="4"][data-arrangement=row] { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* Fixed chrome geometry: game messages never resize the board column. */
html { scrollbar-gutter: stable; color-scheme: dark; }
#status-bar-container { height: 60px; min-height: 60px; flex: 0 0 60px; min-width: 0; overflow: visible; position: relative; z-index: 20; gap: 8px; }
#status-text { min-width: 0; flex: 1; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; line-height: 20px; max-height: 40px; }
.status-actions { flex-shrink: 0; }
#clock-display .player-clock { box-sizing: border-box; height: 60px; flex-wrap: nowrap; }
#clock-display[data-size=compact] .player-clock { height: 40px; }
#clock-display[data-size=large] .player-clock { height: 80px; }
.player-clock span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-clock strong { flex-shrink: 0; }
input[type=number] { appearance: textfield; -moz-appearance: textfield; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { appearance: none; margin: 0; }
@media (max-width: 900px) {
    #board-column #status-bar-container { height: 96px; min-height: 96px; flex-basis: 96px; }
    #status-text { flex: none; width: 100%; }
    .status-info { min-height: 0; }
    #variant-status { white-space: normal; max-height: 32px; }
}

/* Preserve the normal toolbar typography and buttons. Long summaries remain
   available inside the status area without resizing the board. */
.analysis-status #status-text { display: block; white-space: normal; overflow-y: auto; scrollbar-width: none; }
.analysis-status #status-text::-webkit-scrollbar { display: none; }

.settings-section-label { display: block; color: #e74c3c; text-transform: uppercase; font-size: 11px; letter-spacing: 1px; margin-bottom: 10px; }

/* The top toolbar sits close to the viewport edge. Show labels below it;
   the bottom-positioned toolbar has room above. */
#board-column:not(.statusbar-bottom) #status-bar-container .icon-btn::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

/* Four clocks use two rows when the available column is narrow. */
#clock-display[data-players="4"][data-arrangement="row"] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr));
}
#clock-display[data-players="4"][data-arrangement="row"] .player-clock {
    container-type: inline-size;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}
#clock-display[data-players="4"][data-arrangement="row"] .player-clock strong {
    font-size: clamp(12px, 22cqi, 24px);
    line-height: 1;
}
#clock-display[data-players="4"][data-arrangement="row"][data-size="compact"] .player-clock strong { font-size: clamp(12px, 22cqi, 18px); }
#clock-display[data-players="4"][data-arrangement="row"][data-size="large"] .player-clock strong { font-size: clamp(12px, 26cqi, 32px); }

#clock-display[data-players="4"][data-arrangement="row"] .player-clock[data-long-time="true"] strong { font-size: clamp(12px, 16cqi, 24px); }
#clock-display[data-players="4"][data-arrangement="row"][data-size="compact"] .player-clock[data-long-time="true"] strong { font-size: clamp(12px, 16cqi, 18px); }
#clock-display[data-players="4"][data-arrangement="row"][data-size="large"] .player-clock[data-long-time="true"] strong { font-size: clamp(12px, 16cqi, 32px); }

.move-item:has(.move-clock) { gap: 2px; padding-left: 3px; padding-right: 3px; }
.move-clock { color: #aaa; font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0; margin-left: auto; }

/* Keep four-player notation readable in narrow move lists. */
#log-area { container-type: inline-size; }
.move-row.four-player { gap: 2px; padding: 3px 1px; }
.move-row.four-player .move-item { justify-content: flex-start; padding: 5px 1px; gap: 1px; }
.move-row.four-player .move-piece-icon { margin-left: -2px; margin-right: -1px; }
.move-row.four-player .move-notation { flex: 1; min-width: 0; white-space: nowrap; text-align: left; }
.move-notation-text { display: inline-block; transform-origin: left center; white-space: nowrap; }
@container (max-width: 480px) {
    .move-row.four-player .move-clock { display: none; }
}

.variant-pocket { display: flex; align-items: center; gap: 6px; padding: 5px 8px; width: 100%; box-sizing: border-box; background: #292929; border: 1px solid #444; border-radius: 4px; }
#pocket-top { order: 4; }
#pocket-bottom { order: 5; }
.variant-pocket[hidden] { display: none; }
.variant-pocket > span { color: #999; font-size: 12px; margin-right: auto; text-transform: capitalize; }
.pocket-piece { display: flex; align-items: center; gap: 3px; background: #333; border: 1px solid #505050; border-radius: 3px; color: #ddd; padding: 3px 6px; cursor: pointer; }
.pocket-piece img { width: 22px; height: 22px; object-fit: contain; }
.pocket-piece:disabled { opacity: .4; cursor: default; }
.pocket-piece.selected { border-color: #4da6ff; background: #3c4550; }