/* Chess Puzzles on the pencil-puzzle kit's look (games/static/games/puzzles/kit/puzzles.css
   and kit.css, loaded before this): its accent, an olive green beside Star
   Battle's indigo, Fillomino's terracotta, Hashi's teal, Yin-Yang's plum and
   Galaxies' night sky; and its board, a diagram printed in the book: paper
   squares and sage ones, Cburnett's pieces (pieces/LICENSE.txt). */
:root {
  --accent: #4d6a1f;         /* the one filled button: 6.2:1 with white */
  --accent-ink: #ffffff;
  --sq-light: #efe8d4;       /* the paper, a shade warmer */
  --sq-dark: #a3b07f;        /* sage: the accent washed into the paper */
  --sq-light-ink: #5b6542;   /* a coordinate on a light square: 5.1:1, 4.5 on a hinted one */
  --sq-dark-ink: #2f3620;    /* and on a dark one: 5.4:1, 5.7 on a last move (the paper's white was 2.2) */
  --sq-last: rgba(214, 178, 52, .46);   /* the last move's squares */
  --sq-pick: color-mix(in srgb, var(--pick) 34%, transparent);
  --sq-dot: rgba(34, 38, 43, .26);
  --sq-hint: var(--pick);
  /* a king in check: Chess Puzzles' own red glow, warmer than the paper's
     --bad, which is for a mistake */
  --sq-check: radial-gradient(circle, rgba(214, 40, 30, .9) 0, rgba(214, 40, 30, .6) 30%, rgba(214, 40, 30, 0) 72%);
}

/* ── the emblem ─────────────────────────────────────────────────────────── */
.mark { display: block; overflow: visible; }
.mark-disc { fill: var(--paper-2); }
.mark-ring { fill: none; stroke: var(--accent); stroke-width: 2.4; }

/* ── the board ──────────────────────────────────────────────────────────── */
.cb { position: relative; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; line-height: 1; --sq: 40px; }
.cb.hidden { visibility: hidden; }
.cb-squares { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); width: 100%; height: 100%; outline: 2px solid var(--line-bold); }
.cb-row { display: contents; }
.cb-sq { position: relative; background: var(--sq-light); }
.cb-sq.dark { background: var(--sq-dark); }
.cb-sq:focus { outline: none; }
.cb-sq:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--focus), inset 0 0 0 5px var(--paper-2); z-index: 1; }
/* The last move, then a picked piece, then check: each its own wash. */
.cb-sq.last { background-image: linear-gradient(var(--sq-last), var(--sq-last)); }
.cb-sq.sel { background-image: linear-gradient(var(--sq-pick), var(--sq-pick)); }
.cb-sq.check { background-image: var(--sq-check); }
/* Where a picked piece can go: a dot on an empty square, a ring round a piece it can take. */
.cb-sq.dot::after { content: ""; position: absolute; left: 50%; top: 50%; width: 28%; height: 28%; translate: -50% -50%; border-radius: 50%; background: var(--sq-dot); pointer-events: none; }
.cb-sq.cap::after { content: ""; position: absolute; inset: 3%; border-radius: 50%; border: calc(var(--sq) * .08) solid var(--sq-dot); pointer-events: none; }
.cb-sq.over { box-shadow: inset 0 0 0 calc(var(--sq) * .06) color-mix(in srgb, var(--ink) 45%, transparent); }
/* The hint: a ring round the piece to move, then a ring on its square. */
.cb-sq.hint-from::before, .cb-sq.hint-to::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; border: calc(var(--sq) * .07) solid var(--sq-hint); pointer-events: none; z-index: 2; }
.cb-sq.hint-to::before { border-style: dashed; }
@media (prefers-reduced-motion: no-preference) {
  .cb-sq.hint-from::before, .cb-sq.hint-to::before { animation: cb-hint var(--m-pop, 200ms) cubic-bezier(.2, .9, .3, 1.4); }
}
@keyframes cb-hint { from { scale: .5; opacity: 0; } }
/* Coordinates, in the corners of the edge squares, in each square's ink. */
.cb-rank, .cb-file { position: absolute; font: 700 max(10px, calc(var(--sq) * .22))/1 var(--ui); color: var(--sq-light-ink); pointer-events: none; }
.cb-sq.light .cb-rank, .cb-sq.light .cb-file { color: var(--sq-light-ink); }
.cb-sq.dark .cb-rank, .cb-sq.dark .cb-file { color: var(--sq-dark-ink); }
.cb-rank { left: 4%; top: 4%; }
.cb-file { right: 5%; bottom: 3%; }
.cb.no-coords .cb-rank, .cb.no-coords .cb-file { display: none; }

.cb-pieces { position: absolute; inset: 0; pointer-events: none; }
.cb-piece { position: absolute; left: 0; top: 0; width: 12.5%; height: 12.5%; z-index: 1; }
.cb-piece .cb-art { display: block; width: 100%; height: 100%; }
.cb-piece.moving { z-index: 3; }
.cb-piece.drag { z-index: 5; }
.cb-piece.drag .cb-art { scale: 1.12; filter: drop-shadow(0 6px 6px rgba(34, 30, 20, .35)); }
.cb.dragging { cursor: grabbing; }
@media (hover: hover) and (pointer: fine) { .cb-play:not(.solved) .cb:not(.dragging) { cursor: pointer; } }

/* The promotion picker: the four pieces in a column over the square, on a veil. */
.cb-picker { position: absolute; inset: 0; z-index: 6; background: color-mix(in srgb, var(--paper-2) 55%, transparent); }
.cb-promo {
  position: absolute; width: 12.5%; height: 12.5%; padding: calc(var(--sq) * .08); border: 0; border-radius: 50%; cursor: pointer;
  background: var(--paper-2); box-shadow: 0 2px 8px rgba(34, 30, 20, .35), inset 0 0 0 2px var(--line);
}
.cb-promo .cb-art { width: 100%; height: 100%; display: block; }
@media (hover: hover) { .cb-promo:hover { background: color-mix(in srgb, var(--accent) 14%, var(--paper-2)); } }
.cb-promo:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }

/* Whose move it is, in the folio: a small disc of the solver's color. */
.cb-turn { display: inline-block; width: .9em; height: .9em; margin-right: .5em; vertical-align: -.12em; border-radius: 50%; border: 1.5px solid var(--ink); }
.cb-turn.to-w { background: #fff; }
.cb-turn.to-b { background: var(--ink); }

/* The board needs no zoom and fills the desk; the paper keeps the kit's margins. */
.cb-play .neatline { outline-offset: 5px; }
.cb-play.revealed .stamp { display: none; }
.cb-about { margin: var(--s2) 0 0; font-size: var(--t-note); color: var(--soft); }
.cb-about a { color: var(--accent); font-weight: 600; }
/* Share result takes Pause's slot once it's over: the slot fits either, so the clock never moves. */
@media (max-width: 640px) { .pk .cb-play .bar .pause, .pk .cb-play .bar .copy { min-width: 56px; } }
/* (room for "Show solution?" when it asks, so Hint never moves) */
.pk .moves .btn.show { margin-left: var(--s2); min-width: 9.8em; }

/* ── a small board: a daily's card, How to play ─────────────────────────── */
.mini { display: block; overflow: visible; }
.cb-mini .mini-light { fill: var(--sq-light); }
.cb-mini .mini-dark { fill: var(--sq-dark); }
.cb-mini .mini-last { fill: var(--sq-last); }
.cb-mini .mini-frame { fill: none; stroke: var(--line-bold); stroke-width: .06; }
.cb-mini .mini-arrow { fill: none; stroke: var(--accent); stroke-width: .2; stroke-linecap: round; opacity: .85; }
.cb-mini .mini-arrow-head { fill: var(--accent); opacity: .85; }
/* (a board is square: the card's art box keeps the kit's size, the board sits in its middle) */
.pk .daily-art .cb-mini { inset: var(--gap) 0; width: 100%; }

/* ── its leaderboard (static/puzzles/pages.css draws the rest) ──────────── */
.pz-board td.clean { color: var(--good); font-weight: 700; }

/* ── a band's Lichess ratings, in small text under or after its name ───────
   (the home's band picker, a daily's card, the leaderboard's switches) */
.elo { font: 500 12px/1.2 var(--ui); font-variant-numeric: tabular-nums; color: var(--soft); letter-spacing: .01em; }
.pk .house-setting[data-option="band"] .house-setting-text { flex: none; }
.pk .house-setting[data-option="band"] .house-seg > button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-block: 5px; }
.pk .house-setting[data-option="band"] .house-seg > button[aria-pressed="true"] .elo { color: var(--ink); }
.pk .daily-label b .elo { margin-left: var(--s2); }
.pz-switches .seg > a:has(.elo) { flex-direction: column; gap: 1px; padding-block: 5px; min-height: 48px; }
.pz-board-head .elo { font-size: var(--t-note); margin-left: var(--s1); }
/* Five bands: on a phone they take two rows rather than squeezing a name. */
@media (max-width: 640px) {
  .pk .house-setting[data-option="band"] .house-seg { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); }
}