/* =====================================================
   WebChess Pro — Board & Piece Themes
   ===================================================== */

/* ===================================================
   BOARD THEMES
   =================================================== */

/* Classic (Brown/Cream) */
.board-theme-classic .sq.light { background-color: #f0d9b5; }
.board-theme-classic .sq.dark  { background-color: #b58863; }
.board-theme-classic .sq.light.selected { background-color: #f6f669 !important; }
.board-theme-classic .sq.dark.selected  { background-color: #baca2b !important; }
/* Classic last-move: bold yellow-green highlight */
.board-theme-classic .sq.light.highlight-last { background-color: #e8e84a !important; }
.board-theme-classic .sq.dark.highlight-last  { background-color: #c0b030 !important; }

/* Liquid Glass board — purely translucent, shows the live gradient through */
.board-theme-liquid-glass .sq.light {
  background-color: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px) saturate(180%);
  -webkit-backdrop-filter: blur(8px) saturate(180%);
  position: relative;
}
.board-theme-liquid-glass .sq.dark {
  background-color: rgba(100, 80, 200, 0.22);
  backdrop-filter: blur(8px) saturate(180%);
  -webkit-backdrop-filter: blur(8px) saturate(180%);
  position: relative;
}
/* Subtle top-edge gloss on each square */
.board-theme-liquid-glass .sq.light::before,
.board-theme-liquid-glass .sq.dark::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.35);
  pointer-events: none;
  z-index: 1;
}
.board-theme-liquid-glass .sq.light.selected {
  background-color: rgba(160, 200, 255, 0.55) !important;
  box-shadow: inset 0 0 12px rgba(160,196,255,0.40);
}
.board-theme-liquid-glass .sq.dark.selected {
  background-color: rgba(120, 160, 255, 0.55) !important;
  box-shadow: inset 0 0 12px rgba(120,160,255,0.40);
}
.board-theme-liquid-glass .sq.light.highlight-last {
  background-color: rgba(255, 215, 50, 0.50) !important;
  box-shadow: inset 0 0 10px rgba(255,215,50,0.30);
}
.board-theme-liquid-glass .sq.dark.highlight-last  {
  background-color: rgba(220, 180, 30, 0.55) !important;
  box-shadow: inset 0 0 10px rgba(220,180,30,0.30);
}
/* Liquid Glass legal moves: bright glow dots */
.board-theme-liquid-glass .sq.highlight-legal::after {
  background: radial-gradient(circle, rgba(200,220,255,0.75) 28%, transparent 58%) !important;
}
.board-theme-liquid-glass .sq.highlight-capture::after {
  background: radial-gradient(circle, rgba(255,160,180,0.75) 28%, transparent 58%) !important;
}

/* Monochrome board — pure B&W, no hues */
.board-theme-monochrome .sq.light { background-color: #d8d8d8; }
.board-theme-monochrome .sq.dark  { background-color: #3a3a3a; }
.board-theme-monochrome .sq.light.selected {
  background-color: #a0a0a0 !important;
  outline: 3px solid #555;
  outline-offset: -3px;
}
.board-theme-monochrome .sq.dark.selected {
  background-color: #686868 !important;
  outline: 3px solid #bbb;
  outline-offset: -3px;
}
/* Monochrome last-move: very visible golden-yellow tint */
.board-theme-monochrome .sq.light.highlight-last {
  background-color: #d4c860 !important;
  outline: 2px solid #b0a820;
  outline-offset: -2px;
}
.board-theme-monochrome .sq.dark.highlight-last  {
  background-color: #8a8020 !important;
  outline: 2px solid #c0b030;
  outline-offset: -2px;
}
/* Monochrome legal moves: high-contrast dot — dark on light, light on dark */
.board-theme-monochrome .sq.light.highlight-legal::after {
  background: radial-gradient(circle, rgba(0,0,0,0.60) 28%, transparent 56%) !important;
}
.board-theme-monochrome .sq.dark.highlight-legal::after {
  background: radial-gradient(circle, rgba(255,255,255,0.70) 28%, transparent 56%) !important;
}
/* Monochrome capture: bold ring — dark on light, light on dark */
.board-theme-monochrome .sq.light.highlight-capture {
  outline: 4px solid rgba(0,0,0,0.65) !important;
  outline-offset: -4px;
}
.board-theme-monochrome .sq.dark.highlight-capture {
  outline: 4px solid rgba(255,255,255,0.75) !important;
  outline-offset: -4px;
}
/* Clear the base ::after radial gradient on monochrome captures */
.board-theme-monochrome .sq.highlight-capture::after {
  background: none !important;
}


/* ===================================================
   PIECE THEMES
   =================================================== */

/*
  Standard: Uses CSS-rendered Unicode chess symbols with
  white pieces having a white fill + dark outline,
  black pieces having dark fill. Works in all browsers.
*/

/* --- Standard Theme (default) --- */
.piece-theme-standard .piece[data-color="w"] {
  color: #fff;
  text-shadow:
    0 0 3px #000,
    0 1px 2px rgba(0,0,0,0.8),
    1px 1px 0 #333,
   -1px -1px 0 #333,
    1px -1px 0 #333,
   -1px  1px 0 #333;
}

.piece-theme-standard .piece[data-color="b"] {
  color: #1a1a1a;
  text-shadow:
    0 1px 3px rgba(0,0,0,0.6),
    0 0 2px rgba(255,255,255,0.3);
}

/* --- Unicode Theme (plain colored symbols) --- */
.piece-theme-unicode .piece[data-color="w"] {
  color: #ffd700;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}
.piece-theme-unicode .piece[data-color="b"] {
  color: #8b00ff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* --- Simple Theme (flat colored) --- */
.piece-theme-simple .piece[data-color="w"] {
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.9);
}
.piece-theme-simple .piece[data-color="b"] {
  color: #2c2c2c;
  text-shadow: 0 1px 3px rgba(255,255,255,0.2);
}

/* --- Monochrome Theme (pure B&W pieces) --- */
.piece-theme-monochrome .piece[data-color="w"] {
  color: #ffffff;
  text-shadow:
    0 0 0 #000,
    1px  1px 0 #000,
   -1px -1px 0 #000,
    1px -1px 0 #000,
   -1px  1px 0 #000,
    2px  2px 0 #000,
   -2px -2px 0 #000,
    0 2px 4px rgba(0,0,0,0.9);
}
.piece-theme-monochrome .piece[data-color="b"] {
  color: #111111;
  text-shadow:
    1px  1px 0 #fff,
   -1px -1px 0 #fff,
    1px -1px 0 #fff,
   -1px  1px 0 #fff,
    0 2px 4px rgba(0,0,0,0.5);
}

/* ===================================================
   ACTIVE TURN GLOW
   =================================================== */
.player-white.active-turn { border-color: #5c7cfa; box-shadow: 0 0 16px rgba(92,124,250,0.3); }
.player-black.active-turn { border-color: #845ef7; box-shadow: 0 0 16px rgba(132,94,247,0.3); }

/* Monochrome theme: gray glow */
.theme-monochrome .player-white.active-turn { border-color: #c0c0c0; box-shadow: 0 0 16px rgba(200,200,200,0.3); }
.theme-monochrome .player-black.active-turn { border-color: #888888; box-shadow: 0 0 16px rgba(140,140,140,0.3); }


/* ===================================================
   ANALYSIS MODE OVERLAY
   =================================================== */
.analysis-mode .chessboard { box-shadow: 0 0 0 3px var(--accent-yellow), 0 8px 40px rgba(0,0,0,0.6); }
.analysis-mode .status-bar { border-color: var(--accent-yellow); }

/* ===================================================
   PUZZLE MODE OVERLAY
   =================================================== */
.puzzle-mode .chessboard { box-shadow: 0 0 0 3px var(--accent-green), 0 8px 40px rgba(0,0,0,0.6); }
.puzzle-mode .status-bar { border-color: var(--accent-green); }

/* ===================================================
   CHECK WARNING FLASH
   =================================================== */
@keyframes check-flash {
  0%   { box-shadow: 0 0 0 3px var(--accent-red); }
  50%  { box-shadow: 0 0 20px 6px var(--accent-red); }
  100% { box-shadow: 0 0 0 3px var(--accent-red); }
}
.in-check .chessboard { animation: check-flash 0.6s ease-in-out 2; }