/* Streamer64's board look on top of board64.css: squares, highlights, move dots, coordinate labels, touch. */
.b64 {
  --b64-light: #f0d9b5; --b64-dark: #b58863;
  --b64-frame: 4.5%;                 /* the page's .frame padding; board64.css reads it here */
  --s64-hl-move: 20 85 30;           /* dark green: move dots, selected square */
}

.b64-last-move { background: rgba(155, 199, 0, .41); }
.b64-check { background: radial-gradient(ellipse at center, rgba(255,0,0,1) 0%, rgba(231,0,0,1) 25%, rgba(169,0,0,0) 89%, rgba(158,0,0,0) 100%); }

/* destination dots, capture rings, hover and selected square (shape as Focus64's board.css) */
.b64-dest { background: radial-gradient(circle closest-side, rgb(var(--s64-hl-move) / 0.6) 0 26%, rgb(var(--s64-hl-move) / 0) 29%); }
.b64-dest.b64-capture { background: radial-gradient(circle closest-side, rgb(var(--s64-hl-move) / 0) 82%, rgb(var(--s64-hl-move) / 0.55) 85% 95%, rgb(var(--s64-hl-move) / 0) 98%); }
.b64-dest:hover { background: rgb(var(--s64-hl-move) / 0.28); }
.b64-selected { background: rgb(var(--s64-hl-move) / 0.5); }

/* labels sit in the frame, lowercase files, the frame's ink colour */
.b64-files .b64-coord { text-transform: none; }
.b64-coord { color: var(--frame-ink); font-weight: 700; font-size: 11px; opacity: 1; }

/* a view-only board must not trap a phone swipe: let the page scroll */
.b64[data-mode="view"] { touch-action: auto; }