/* board.css — chessboard styles (owner: board). Everything is scoped with the .cb- prefix.
   Theme colours arrive as CSS variables set by board.js from the catalog theme:
   --cb-light-bg / --cb-dark-bg (colour or gradient), --cb-coord-light / --cb-coord-dark,
   --cb-last, --cb-sel, --cb-dot, --cb-frame. Sizes: --cb-fw (frame width), --cb-sq (square size).
   Fallbacks and chrome follow the platform board (catalog chess.board.pvf, SPEC §12.1): navy frame, blue
   selection/focus, orange accents — no gold. */

.cb-board {
  --cb-fw: 6px;
  --cb-sq: 44px;
  --cb-ease: var(--ease, cubic-bezier(.2, .8, .2, 1));
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  box-sizing: border-box;
  border-radius: 16px;
  background: var(--cb-frame, #262a50);
  box-shadow:
    0 14px 34px rgba(5, 7, 20, .38),
    0 3px 10px rgba(5, 7, 20, .24),
    inset 0 1px 0 rgba(255, 255, 255, .16),
    inset 0 -1px 0 rgba(0, 0, 0, .25);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  isolation: isolate;
}

/* Square aspect ratio that works on every WebView (no aspect-ratio dependency). */
.cb-board::before {
  content: '';
  display: block;
  padding-top: 100%;
}

/* Subtle sheen on the frame. */
.cb-board::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: inherit;
  background: linear-gradient(160deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, 0) 38%, rgba(0, 0, 0, .12) 100%);
  pointer-events: none;
  z-index: 0;
}

.cb-inner {
  position: absolute;
  top: var(--cb-fw); left: var(--cb-fw); right: var(--cb-fw); bottom: var(--cb-fw);
  border-radius: 10px;
  overflow: hidden;
  z-index: 1;
  touch-action: none;
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
  /* Own compositing layer: transforms of pieces stay on the GPU. */
  transform: translateZ(0);
}

.cb-dragging .cb-inner { cursor: grabbing; }

/* Inner shadow above squares/marks, below pieces. */
.cb-inner::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .22),
    inset 0 2px 10px rgba(0, 0, 0, .22),
    inset 0 -1px 0 rgba(255, 255, 255, .06);
  pointer-events: none;
  z-index: 2;
}

/* Edge-to-edge variant (host sets --cb-frameless: 1; board.js then measures a 0 px frame). */
.cb-board.cb-frameless { border-radius: 0; box-shadow: none; background: transparent; }
.cb-board.cb-frameless::after { display: none; }
.cb-board.cb-frameless .cb-inner { border-radius: 0; }
.cb-board.cb-frameless .cb-inner::after { box-shadow: none; }

/* ---- squares & coordinates ---- */

.cb-squares {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  z-index: 0;
}

.cb-sq { position: relative; min-width: 0; min-height: 0; }
.cb-sq.cb-l { background: var(--cb-light-bg, #c3c9e6); }
.cb-sq.cb-d { background: var(--cb-dark-bg, #5a619e); }

/* Coordinates hug the square corners (rank: top-left of the first file, file: bottom-right of the first rank, in
   both orientations) and stay small enough to clear the piece bases — the widest bases (rook, king, queen) end
   ~18 % from the square's side, the letters live in the outer ~14 %. 8 px on a 320 px board, ~9.5 px at 375 px,
   13 px max on desktop; bold, theme colours (light-square / dark-square contrast from the catalog). */
.cb-coord {
  position: absolute;
  font-family: var(--font, 'Golos Text', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: clamp(8px, calc(var(--cb-sq) * .2), 13px);
  line-height: 1;
  letter-spacing: 0;
  pointer-events: none;
  opacity: 1;
}
.cb-l .cb-coord { color: var(--cb-coord-light, #535a94); }
.cb-d .cb-coord { color: var(--cb-coord-dark, #dfe3f5); }
.cb-rank { top: 3%; left: 4%; }
.cb-file { bottom: 1%; right: 4%; }

/* ---- marks ---- */

.cb-marks {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 1;
  pointer-events: none;
}

.cb-mark {
  position: absolute;
  width: 12.5%;
  height: 12.5%;
  pointer-events: none;
}
.cb-mark[hidden] { display: none; }

.cb-last { background: var(--cb-last); }
/* Premove (queued move while it is not this side's turn): a deeper blue than the platform selection. */
.cb-premove { background: rgba(40, 96, 214, .5); }
.cb-selected.cb-pre { background: rgba(24, 70, 170, .55); }
.cb-dest.cb-pre::after { background: rgba(24, 70, 170, .55); }
.cb-dest.cb-capture.cb-pre::after { background: transparent; border-color: rgba(24, 70, 170, .6); }
.cb-selected { background: var(--cb-sel); }

.cb-check {
  background: radial-gradient(ellipse at center,
    rgba(255, 48, 48, 1) 0%, rgba(231, 0, 0, .95) 25%, rgba(169, 0, 0, 0) 89%, rgba(158, 0, 0, 0) 100%);
  animation: cb-check-in .32s var(--cb-ease);
}

.cb-dest::after {
  content: '';
  position: absolute;
  left: 34%; top: 34%;
  width: 32%; height: 32%;
  border-radius: 50%;
  background: var(--cb-dot);
  animation: cb-dot-in .14s var(--cb-ease);
}

.cb-dest.cb-capture::after {
  left: 3%; top: 3%;
  width: 94%; height: 94%;
  box-sizing: border-box;
  background: transparent;
  border: calc(var(--cb-sq) * .085) solid var(--cb-dot);
}

/* Square under the dragged piece. */
.cb-hover {
  box-shadow: inset 0 0 0 calc(var(--cb-sq) * .06) rgba(255, 255, 255, .55);
}
.cb-hover.cb-is-dest { box-shadow: inset 0 0 0 calc(var(--cb-sq) * .06) var(--cb-dot); background: rgba(255, 255, 255, .08); }
/* On touch the finger hides the square: show a soft halo instead. */
.cb-hover.cb-touch { box-shadow: none; }
.cb-hover.cb-touch::before {
  content: '';
  position: absolute;
  left: -50%; top: -50%;
  width: 200%; height: 200%;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
}
.cb-hover.cb-touch.cb-is-dest::before { background: var(--cb-dot); opacity: .55; }

/* ---- pieces ---- */

.cb-pieces {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 3;
  pointer-events: none;
}

.cb-piece {
  position: absolute;
  left: 0; top: 0;
  width: 12.5%;
  height: 12.5%;
  pointer-events: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.cb-piece-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 calc(var(--cb-sq) * .025) calc(var(--cb-sq) * .02) rgba(0, 0, 0, .3));
}

.cb-piece.cb-anim { z-index: 2; will-change: transform; }
.cb-piece.cb-fading { z-index: 1; }
.cb-piece.cb-ghost { opacity: .3; }
.cb-piece.cb-pop .cb-piece-svg { animation: cb-pop .3s var(--cb-ease); }

/* Unicode fallback when the sprite cannot be loaded. */
.cb-glyph { font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "DejaVu Sans", serif; stroke-width: 1.2px; paint-order: stroke; }
.cb-glyph-w { fill: #fff; stroke: #1a1a1a; }
.cb-glyph-b { fill: #1a1a1a; stroke: #1a1a1a; }

/* ---- arrows ---- */

.cb-arrows {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  pointer-events: none;
  overflow: visible;
}
.cb-arrow { opacity: .9; animation: cb-fade-in .16s ease-out; }

/* ---- drag ---- */

/* Lives on .cb-board (not inside the clipping .cb-inner) with the same inset, so a lifted piece can
   overflow the board edge instead of being cut off. */
.cb-drag-layer {
  position: absolute;
  top: var(--cb-fw); left: var(--cb-fw); right: var(--cb-fw); bottom: var(--cb-fw);
  z-index: 3;
  overflow: visible;
  pointer-events: none;
}

.cb-piece.cb-floating {
  z-index: 6;
  transform-origin: 50% 50%;
  will-change: transform;
}
.cb-piece.cb-floating .cb-piece-svg {
  filter: drop-shadow(0 calc(var(--cb-sq) * .12) calc(var(--cb-sq) * .1) rgba(0, 0, 0, .38));
}

/* ---- promotion picker ---- */

.cb-promo {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 8;
  background: rgba(14, 16, 36, .58);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  touch-action: none;
  cursor: default;
  animation: cb-fade-in .14s ease-out;
}

.cb-promo-btn {
  position: absolute;
  width: 12.5%;
  height: 12.5%;
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #ffffff 0%, #eceef8 55%, #b9bed6 100%);
  box-shadow: 0 6px 16px rgba(5, 7, 20, .42), inset 0 -2px 0 rgba(20, 22, 43, .12);
  cursor: pointer;
  transform: scale(.88);
  transition: transform .14s var(--cb-ease), border-radius .14s var(--cb-ease), background .14s;
  animation: cb-promo-in .2s var(--cb-ease) backwards;
}
.cb-promo-btn:focus-visible { box-shadow: 0 0 0 3px #2f7bff, 0 6px 16px rgba(5, 7, 20, .42); }
.cb-promo-btn .cb-piece-svg { width: 88%; height: 88%; filter: none; pointer-events: none; }
.cb-promo-btn:active { transform: scale(.98); border-radius: 24%; background: radial-gradient(circle at 50% 40%, #ffffff 0%, #a9c6ff 100%); }
@media (hover: hover) {
  .cb-promo-btn:hover { transform: scale(.98); border-radius: 24%; background: radial-gradient(circle at 50% 40%, #ffffff 0%, #a9c6ff 100%); }
}

/* ---- keyframes ---- */

@keyframes cb-dot-in { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes cb-check-in { 0% { opacity: 0; transform: scale(.5); } 60% { opacity: 1; transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes cb-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes cb-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes cb-promo-in { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(.88); } }

@media (prefers-reduced-motion: reduce) {
  .cb-check, .cb-dest::after, .cb-arrow, .cb-promo, .cb-promo-btn, .cb-piece.cb-pop .cb-piece-svg { animation: none; }
}