/* =====================================================================
   Board overlay — SINGLE SOURCE OF TRUTH
   Shared by the quiz player (courses/champion-track.html) and the analysis
   board (analysis/board.html). Both pages run the same Board engine
   (src/ui/board.js), which emits the SAME DOM classes; the only difference
   is the host container (#boardwrap in the quiz, #board in analysis), so
   every rule below targets both.

   Highlight colors are THEME-DRIVEN: boardTheme.js sets data-cc-theme on
   <html> whenever a board design is applied (persisted across every board
   page). Last-move from/to + piece-tap (selected) squares use those values.
   See website/docs/board-theme-colors.md for the full chess.com per-theme
   color map (extracted from the decompiled APK / web client chunk).
   ===================================================================== */

/* ---------- layers ---------- */
#board .highlights,
#board .pieces,
#boardwrap .highlights,
#boardwrap .pieces { position: absolute; inset: 0; pointer-events: none; }
#board .highlights,
#boardwrap .highlights { z-index: 2; }
#board .pieces,
#boardwrap .pieces { z-index: 3; }

/* ---------- theme highlight colors ---------- */
:root {
  /* app defaults (green/icy base) — pinned by earlier user rulings */
  --hl-last-move: rgba(246, 246, 105, 0.45);
  --hl-selected: rgba(246, 246, 105, 0.65);
  /* rounded board corners — universal across every board + future themes */
  --board-radius: 6px;
}
/* walnut: EXACT chess.com web-client value — theme highlightColor #d1a52d,
   painted at highlightOpacity .5 (both last-move and selection) */
:root[data-cc-theme='walnut'] {
  --hl-last-move: rgba(209, 165, 45, 0.5);
  --hl-selected: rgba(209, 165, 45, 0.5);
}

/* ---------- board grid container (rounded corners, universal across themes) ---------- */
#board .board,
#boardwrap .board {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  border-radius: var(--board-radius, 6px);
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  user-select: none;
  touch-action: none;
}

/* ---------- highlight squares (last move from/to + piece tap) ---------- */
#board .hl,
#boardwrap .hl {
  position: absolute;
  top: 0;
  left: 0;
  width: 12.5%;
  height: 12.5%;
}
#board .hl.last-move,
#boardwrap .hl.last-move { background: var(--hl-last-move); }
#board .hl.selected,
#boardwrap .hl.selected { background: var(--hl-selected); }
#board .hl.premain,
#board .hl.premove,
#boardwrap .hl.premain,
#boardwrap .hl.premove { background-color: rgba(200, 50, 50, 0.4); }
#board .hl.check,
#boardwrap .hl.check { background: none; }
#board .hl.check::after,
#boardwrap .hl.check::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at center,
    rgba(255, 42, 42, 1) 10%,
    rgba(224, 24, 24, 0.78) 36%,
    rgba(160, 0, 0, 0) 72%
  );
  animation:
    cc-check-thump 0.3s ease-out both,
    cc-check-breathe 1.6s ease-in-out 0.3s infinite;
}
@keyframes cc-check-thump {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
@keyframes cc-check-breathe {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.25; }
}

/* ---------- move dots / capture rings (legal-move indicators) ---------- */
#board .move-dot,
#boardwrap .move-dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 12.5%;
  height: 12.5%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#board .move-dot::before,
#boardwrap .move-dot::before {
  content: '';
  width: 31%;
  height: 31%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.1); /* adj 54 (2026-08-28): 10% (was 15.5%) */
}
#board .capture-indicator,
#boardwrap .capture-indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 12.5%;
  height: 12.5%;
}
#board .capture-indicator::before,
#boardwrap .capture-indicator::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: clamp(2px, 0.67vmin, 5px) solid rgba(0, 0, 0, 0.1); /* adj 54 (2026-08-28): 10% (was 14%) */
}

/* ---------- pieces ---------- */
#board .piece,
#boardwrap .piece {
  position: absolute;
  top: 0;
  left: 0;
  width: 12.5%;
  height: 12.5%;
  /* chess.com 1:1 (APK setPieceResource): sprite fills the WHOLE square -
     the piece's visual inset is the art's own transparent margin (measured:
     king 78x83%, queen 79x80%, pawn 53x68%, shadow gap 9% bottom).
     No CSS drop-shadow (their shadow is baked into the sprite);
     transition:none cancels any global background cross-fade. */
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  will-change: transform;
  transition: none;
  cursor: grab;
}
#board .piece.dragging,
#boardwrap .piece.dragging { z-index: 20; transition: none; }
#board .piece.lifted,
#boardwrap .piece.lifted { filter: drop-shadow(0 7px 9px rgba(0, 0, 0, 0.5)); }
#board .piece.snapping,
#boardwrap .piece.snapping { transition: transform 0.17s cubic-bezier(0.25, 1.2, 0.4, 1); }
/* standard (non-spring) go-back — used for quiz wrong-move returns where the
   springy overshoot of .snapping feels wrong (user ruling) */
#board .piece.returning,
#boardwrap .piece.returning { transition: transform 0.17s ease-out; }
#board .piece.ghost-drag,
#boardwrap .piece.ghost-drag { opacity: 0.32; z-index: 4; }
#board .piece.sliding,
#boardwrap .piece.sliding { transition: transform 0.145s cubic-bezier(0.37, 0, 0.63, 1); z-index: 6; }
#board .piece.captured-fade,
#boardwrap .piece.captured-fade { animation: cc-capture-vanish 0.2s ease-out both; }
#board .piece.springing,
#boardwrap .piece.springing { z-index: 6; transition: none; }
@keyframes cc-capture-vanish {
  from { opacity: 1; }
  to { opacity: 0; }
}
#board .piece.ghost-premove,
#boardwrap .piece.ghost-premove { opacity: 0.45; z-index: 5; pointer-events: none; }

/* ---------- arrow layer (src/ui/arrows.js) ---------- */
#board .shape-layer,
#boardwrap .shape-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 8;
  overflow: visible;
}

/* ---------- promotion picker (built by src/ui/controller.js openPromotionPicker) ----------
   chess.com vertical column drawn on the promotion square. Lives in the SHARED board sheet
   so every board page — analysis, quiz AND the game-review variations — gets the same picker
   (the review page only loads this sheet, which is why its picker was invisible before). */
.promo-backdrop { position: absolute; inset: 0; z-index: 40; }
.promo-picker {
  position: absolute;
  z-index: 41;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.promo-choice {
  background-size: 78% 78%;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .promo-choice:hover { background-color: rgba(244, 42, 50, 0.25); }
}