/* The handwritten chess pages, after lib/theme.css and lib/games.css: the board, the pieces, the move pad. */
:root { --sqw: min(56px, calc((100vw - 48px) / 8)); --light: #f0e4cf; --dark: #b48a5a; --boxw: 48px; --boxh: 56px }
.chessboard { display: grid; grid-template-columns: repeat(8, var(--sqw)); grid-auto-rows: var(--sqw); border: 2px solid var(--fg); width: max-content; position: relative; user-select: none; -webkit-user-select: none }
.chessboard .sq { position: relative; display: flex; align-items: center; justify-content: center }
.chessboard .sq.light { background: var(--light) }
.chessboard .sq.dark { background: var(--dark) }
.chessboard .sq.last { box-shadow: inset 0 0 0 3px rgb(255 214 60 / .8) }
.chessboard .sq.check { background: color-mix(in srgb, var(--red) 55%, var(--light)) }
.chessboard .sq .rank { position: absolute; top: 1px; left: 3px; font-size: calc(var(--sqw) * .2); color: rgb(0 0 0 / .55); font-weight: 600; line-height: 1 }
.chessboard .sq .file { position: absolute; bottom: 1px; right: 3px; font-size: calc(var(--sqw) * .2); color: rgb(0 0 0 / .55); font-weight: 600; line-height: 1 }
.chessboard .pc { font-size: calc(var(--sqw) * .78); line-height: 1; pointer-events: none }
.chessboard .pc.b { color: #1a1a1a }
.chessboard .pc.w { color: #fff; -webkit-text-stroke: max(1px, calc(var(--sqw) * .025)) #1a1a1a; paint-order: stroke fill }
.chessboard .sq svg.ink { position: absolute; width: 70%; height: 70%; color: var(--blue) }
/* the move pad: five boxes in a row, the move written in algebraic notation */
.movepad { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 18px; margin-top: 12px }
.movepad .surface { display: flex; gap: 4px }
.movepad .box { border-radius: 6px; border-style: dashed; border-color: color-mix(in srgb, var(--accent) 55%, var(--edge)); background: var(--panel-2) }
.movepad .box .p { font-size: 1.5rem; color: var(--fg); position: relative; z-index: 1 }
.movepad .box svg.ink { position: absolute; inset: 4px; width: auto; height: auto; opacity: .35 }
.movepad .side { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 6px }
.movepad .hint { color: var(--dim); font-size: .88rem; min-height: 2.6em }
.movepad .hint.bad { color: var(--red) }
.movepad .chips button { font-size: 1rem; font-weight: 600 }
.layout { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 18px; align-items: start }
/* the text under the board wraps to the BOARD's width: it adds nothing to the column's max-content, then fills the column, and never passes the board */
.layout > div > .readout { width: 0; min-width: min(100%, calc(var(--sqw) * 8 + 4px)); margin-left: auto; margin-right: auto; box-sizing: border-box }   /* min() because a min-width beats a max-width */
.layout > div > .readout .hint { overflow-wrap: anywhere }
@media (max-width: 760px) { .layout { grid-template-columns: minmax(0, 1fr) } .chessboard { margin: 0 auto } }
.moves { font-variant-numeric: tabular-nums; font-size: .92rem; columns: 2; column-gap: 18px; max-height: 320px; overflow: auto }
.moves .mv { break-inside: avoid; display: flex; gap: 8px; align-items: center; padding: 1px 0 }
.moves .no { color: var(--dim); width: 2.2em; text-align: right }
.moves .san { min-width: 3.6em }
.moves .san svg.ink { width: 20px; height: 20px; vertical-align: middle; color: var(--blue) }
.moves .san.hand { display: inline-flex; gap: 1px; align-items: center }
.moves .san.theirs svg.ink { color: var(--theirs) }
.status { margin: 8px 0 0; font-size: .95rem; min-height: 1.5em }
.status.ok { color: var(--ok); font-weight: 600 } .status.bad { color: var(--red); font-weight: 600 }
.bar select { font: inherit; font-size: .84rem; padding: 4px 8px; border: 1px solid var(--edge); border-radius: var(--radius-sm); background: var(--panel); color: var(--fg) }
.who { color: var(--dim); font-size: .88rem; margin: 0 0 6px }
.who b { color: var(--fg) }
.thinking { color: var(--dim); font-style: italic }
/* the position builder */
.fenrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px }
.fenrow code { font-size: .86rem; padding: 6px 10px; border: 1px solid var(--edge); border-radius: var(--radius-sm); background: var(--panel); overflow-wrap: anywhere; flex: 1 1 260px }
.fenrow input { font: inherit; font-size: .86rem; padding: 6px 10px; border: 1px solid var(--edge); border-radius: var(--radius-sm); background: var(--panel); color: var(--fg); flex: 1 1 260px; min-width: 0 }
.opts { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: 10px; font-size: .9rem }
.opts label { display: inline-flex; align-items: center; gap: 4px }
.warn { color: var(--red); font-size: .88rem; margin: 6px 0 0; min-height: 1.3em }
.legend { color: var(--dim); font-size: .84rem; margin-top: 8px }
/* the builder: the piece a letter reads as fades in over the ink, in the square's own place for a piece */
.chessboard .sq .pc.preview { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0 }

/* the board as the pad: the overlap input sits over the board, its box the board's size, invisible but for the ink */
.boardwrap { position: relative; width: max-content }
.boardwrap .inkhost { position: absolute; inset: 0; z-index: 2; --mo-bg: transparent; --mo-line: transparent; --mo-radius: 0; --mo-ink: #1b3fd6; --mo-suspect: #6f7fd0; --mo-muted: #6f7fd0 }
.boardwrap .inkhost.done { pointer-events: none }
.moveline .cur { font-family: var(--mono); font-size: 1.45rem; font-weight: 700; min-width: 3ch; letter-spacing: .04em }
.moveline .chips { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center } .moveline .chips:empty { display: none }
.moveline .chips .lbl { color: var(--dim); font-size: .84rem } .moveline .chips button { font-size: 1rem; font-weight: 600 }
.moveline .hint { flex-basis: 100%; min-height: 2.6em } .moveline .hint.bad { color: var(--red) }