/* The handwritten chess pages on rnbqkbnr.com: the games' own tokens (from digitizer.fun's
 * games/lib/site/millirec.css) mapped onto the site's palette (shioh-style.css + site-theme.css),
 * plus the few pieces of the games' chrome the pages use. Loaded after /site.css, before
 * lib/games.css and chess.css. */
:root {
	--fg: var(--ss-ink);
	--dim: var(--ss-muted);
	--bg: #fff;                          /* text on a dark fill (the "on" mode button) */
	--panel: #fff;                       /* inputs, chips, selects: white, as the site's inputs */
	--panel-2: rgb(255 255 255 / 0.6);
	--edge: rgb(34 34 34 / 0.35);
	--accent: var(--ss-accent);          /* dark walnut */
	--accent-ink: #fff;
	--accent-soft: rgb(92 51 23 / 0.12);
	--blue: #1f3f8f;                     /* the player's handwriting */
	--theirs: #6b2f8f;
	--red: var(--ss-red);
	--bad: var(--ss-red);
	--ok: #1d5e2a;
	--radius: var(--ss-radius);
	--radius-sm: var(--ss-radius-sm);
	--mono: var(--ss-font-mono);
	--shadow-lift: 0 6px 20px rgb(0 0 0 / 0.32);
}

/* Small buttons in the option bar and under the board. */
.ss-btn.sm { padding: 0.3rem 0.75rem; font-size: 0.88rem; }
a.ss-btn.sm { text-decoration: none; }

/* The cell holding a board: the bar on top, then board + moves. */
.hw-intro p:last-child { margin-bottom: 0; }
.hw-game .bar { margin-bottom: 0.9rem; }
.hw-game h3 { font-family: var(--ss-font-head); font-size: 1rem; }
.hw-note { font-size: 0.88rem; color: var(--ss-muted); text-align: center; }

/* The games' segmented control, in the site's square-cornered look. */
.modes { border-radius: var(--ss-radius-sm) !important; border-color: #222 !important; }
.modes button { background: #fff !important; color: var(--ss-ink) !important; font-weight: 600; }
.modes button + button { border-left-color: #222 !important; }
.modes button.on { background: var(--ss-accent) !important; color: #fff !important; }

/* Chips (the moves a reading could be, a misread letter's runners-up): the site's chip look. */
.chips button { border: var(--ss-chip-border) !important; border-radius: var(--ss-chip-radius) !important; background: #fff; }
.chips button:hover { background: #f3f1f7; color: var(--ss-ink) !important; }
.chips .ss-btn { border: 1px solid #222 !important; border-radius: var(--ss-radius-sm) !important; font-size: 0.88rem !important; }
.chips .ss-btn-primary, .chips .ss-btn-primary:hover { background: var(--ss-accent); border-color: var(--ss-accent) !important; color: #fff !important; }

/* The move list and FEN boxes sit on a light panel inside the cell. */
.moves { background: var(--ss-panel); border-radius: var(--ss-radius-sm); padding: 0.4rem 0.6rem; }
.fenrow code { background: #fff !important; }
.status.ok { color: var(--ok); }
.moves:empty { display: none; }

/* The sidebar's "Handwritten chess" cell. */
.hw-card .ss-band { font-size: 1.15rem; }
.hw-card .ss-band a { color: inherit; text-decoration: none; }

@media (max-width: 860px) {
	html:root { --sqw: min(56px, calc((100vw - 34px) / 8)); }
	.hw-game { --ss-pad-x: 0.4rem; }
	.boardwrap, .setup .surface { width: max-content; margin-left: auto; margin-right: auto; }
	.hw-game .bar { gap: 6px 8px; }
}