/* Chess game. The bundled rules library validates moves, a worker searches for computer moves, and Three.js renders the position.
 * Page-specific layout and controls; shared theme colors are supplied by /Theme.css.
 */
html, body { height: 100%; margin: 0; }
body { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
#nav-placeholder { flex: 0 0 auto; position: sticky; top: 0; z-index: 1030; background: var(--site-surface); }
.chess-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; flex: 1 1 0; min-height: 0; }
#chess-view { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
#chess-view canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; }
.chess-panel { overflow-y: auto; padding: 24px; background: var(--site-surface); border-left: 1px solid var(--site-border); }
.chess-panel h1 { font-size: 2rem; }
.chess-panel h2 { font-size: 1rem; margin: 24px 0 12px; }
#game-status { color: var(--site-accent); font-size: 1.15rem; font-weight: 600; }
#selection-status, .chess-panel small { color: var(--site-muted); font-size: .8rem; }
.chess-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.chess-actions button { font-size: .8rem; }
#move-history { max-height: 35vh; overflow-y: auto; margin-bottom: 20px; font-size: .85rem; }
.move-row { display: grid; grid-template-columns: 36px 1fr 1fr; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--site-border); }
.move-row span:first-child { color: var(--site-muted); }
#promotion-dialog { width: min(420px, 92vw); padding: 24px; background: var(--site-surface); color: var(--site-text); border: 1px solid var(--site-accent); border-radius: 12px; }
#promotion-dialog::backdrop { background: #0009; }
#promotion-dialog h2 { font-size: 1.4rem; }
.promotion-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#scene-error { position: absolute; z-index: 2; margin: 20px; padding: 20px; background: var(--site-surface); border: 1px solid var(--site-accent); }
/* Stack or resize the project layout on narrower screens. */
@media (max-width: 767.98px) {
    body { height: auto; min-height: 100dvh; }
    .chess-layout { display: flex; flex-direction: column; flex: 0 0 auto; }
    #chess-view { height: 60vh; min-height: 360px; }
    .chess-panel { overflow: visible; border-left: 0; border-top: 1px solid var(--site-border); }
}

.side-hint { color: var(--site-muted); font-size: .75rem; }

#promotion-dialog[open] {
    display: block;
    position: fixed;
    inset: 0;
    margin: auto;
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    box-shadow: 0 20px 70px #0009;
}
#promotion-dialog p { color: var(--site-text); }
#promotion-dialog button { min-height: 44px; }