/* Rainbow Checkers — Custom CSS
 * Layered on top of Tailwind (loaded via CDN or compiled).
 * Covers: board surface, piece slot scaling, animations, theme tokens.
 */

:root {
  /* Board surface (set/overridden by RainbowPieces.setBoardSkin) */
  --rp-board-light: #EBD8B4;
  --rp-board-dark:  #8A5A2B;
  --rp-board-edge:  #4B2E14;

  /* Piece colors (single source of truth — mirrors rainbow-pieces.js) */
  --rp-red:    #E5484D;
  --rp-blue:   #3E63DD;
  --rp-green:  #30A46C;
  --rp-yellow: #FFB224;
}

/* ─── Page layout (board + sidebar) ─────────────────────────── */
.board-layout {
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .board-layout {
    grid-template-columns: minmax(0, 1fr) 340px;
  }
}

/* ─── Board grid ────────────────────────────────────────────── */
.checkers-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows:    repeat(8, 1fr);
  background: var(--rp-board-edge);
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(0,0,0,.06),
    0 20px 40px -20px rgba(0,0,0,.25);
  aspect-ratio: 1 / 1;
  width: 100%;
}
.checkers-board .square {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.checkers-board .square.light { background: var(--rp-board-light); }
.checkers-board .square.dark  { background: var(--rp-board-dark);  }

/* Coordinate labels (only on edges) */
.checkers-board .coord {
  position: absolute;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,.65);
  text-shadow: 0 1px 1px rgba(0,0,0,.4);
  pointer-events: none;
}
.checkers-board .square.light .coord { color: rgba(0,0,0,.4); text-shadow: none; }
.checkers-board .coord.file { left: 4px; bottom: 2px; }
.checkers-board .coord.rank { right: 4px; top:    2px; }

/* Highlight squares (legal moves / selection) */
.checkers-board .square.highlight::before {
  content: '';
  position: absolute; inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,178,36,.5) 0%, rgba(255,178,36,0) 70%);
  pointer-events: none;
}
.checkers-board .square.last-from { box-shadow: inset 0 0 0 3px rgba(99,102,241,.45); }
.checkers-board .square.last-to   { box-shadow: inset 0 0 0 3px rgba(34,197,94,.55); }

/* ─── AI move highlights ─────────────────────────────────────── */
.checkers-board .square.ai-move-from {
  background-color: rgba(251,191,36,.35) !important;
  box-shadow: inset 0 0 0 3px rgba(251,191,36,.75);
}
.checkers-board .square.ai-move-to {
  animation: ai-land-pulse 2s ease-out forwards;
}
@keyframes ai-land-pulse {
  0%   { box-shadow: inset 0 0 0 4px rgba(251,191,36,1);   background-color: rgba(251,191,36,.45); }
  50%  { box-shadow: inset 0 0 0 4px rgba(251,191,36,.5);  background-color: rgba(251,191,36,.2); }
  100% { box-shadow: none;                                  background-color: transparent; }
}
.rp-piece.ai-piece-landed {
  animation: ai-piece-bounce .45s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes ai-piece-bounce {
  0%   { transform: scale(.4); opacity: .4; }
  100% { transform: scale(1);  opacity: 1; }
}

/* Piece slot: lets pieces scale relative to their square */
.checkers-board .rp-piece {
  width: 78% !important;
  height: 78% !important;
  transition: transform .15s ease;
}
.checkers-board .rp-piece:hover { transform: translateY(-2px); }
.checkers-board .rp-piece svg   { width: 100% !important; height: 100% !important; }

/* Selection animation */
.rp-piece .rp-selected {
  animation: rp-dash 0.6s linear infinite;
}
@keyframes rp-dash {
  to { stroke-dashoffset: -14; }
}

/* ─── Captured pieces strip ─────────────────────────────────── */
.captured-pieces {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.captured-pieces .rp-piece { width: 22px !important; height: 22px !important; cursor: default; }
.captured-pieces .rp-piece:hover { transform: none; }

/* ─── AI thinking ring around board ─────────────────────────── */
.checkers-board.ai-thinking {
  animation: rp-thinking 2s ease-in-out infinite;
}
@keyframes rp-thinking {
  0%, 100% { box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 20px 40px -20px rgba(0,0,0,.25), 0 0 0 0 rgba(99,102,241,.0); }
  50%      { box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 20px 40px -20px rgba(0,0,0,.25), 0 0 0 4px rgba(99,102,241,.35); }
}

/* ─── Toast / move history scroll niceties ──────────────────── */
.move-history { max-height: 320px; overflow-y: auto; scrollbar-width: thin; }
.move-history::-webkit-scrollbar         { width: 6px; }
.move-history::-webkit-scrollbar-thumb   { background: rgba(0,0,0,.15); border-radius: 3px; }

/* ─── Mobile tweaks ─────────────────────────────────────────── */
@media (max-width: 640px) {
  .checkers-board .coord { font-size: 8px; }
  .captured-pieces .rp-piece { width: 18px !important; height: 18px !important; }
}

/* ─── Animations from the prior AI move feedback ────────────── */
@keyframes rp-pulse-from { 0%,100% { background: rgba(252,211,77,.4) } 50% { background: rgba(252,211,77,.7) } }
@keyframes rp-pulse-to   { 0%,100% { background: rgba(74,222,128,.4) } 50% { background: rgba(74,222,128,.7) } }
.checkers-board .square.ai-from { animation: rp-pulse-from 1s ease-in-out 2; }
.checkers-board .square.ai-to   { animation: rp-pulse-to   1s ease-in-out 2; }