/* File: wp-content/plugins/checkers-game/static/css/checkers.css */

/* Wrapper around board + reset button */
.checkers-wrapper {
  background: #fafafa;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  padding: 20px;
  display: inline-block;
  text-align: center;
  margin-top: 10px;
  /* Ensure lots of space below the board for the button */
  padding-bottom: 100px;
}

/* Board container styling */
#checkers-container {
  display: block;
  border: 4px solid #333;
  border-radius: 8px;
  overflow: hidden;
  margin: 0 auto  /* no bottom margin needed anymore */;
}

/* Board table: collapse and remove default margins */
#checkers-container table {
  border-collapse: collapse;
  margin: 0;
}

/* Black & white squares */
.light {
  background: #ffffff;
  width: 60px;
  height: 60px;
}

.dark {
  background: #000000;
  width: 60px;
  height: 60px;
}

/* Thin border between squares */
#checkers-container td {
  border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Highlight available moves & selected piece */
.available {
  box-shadow: inset 0 0 0 4px rgba(255, 255, 0, 0.8);
  animation: glow 1.2s infinite ease-in-out;
}

.selected {
  outline: 3px solid #f00;
}

/* Piece styling (3D effect & hover lift) */
.piece {
  width: 50px;
  height: 50px;
  margin: 5px auto;
  border-radius: 50%;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
  position: relative;
  background: radial-gradient(circle at 35% 35%, #fff, #888);
  transition: transform 0.2s, box-shadow 0.2s;
}

.piece:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.5);
}

/* King styling: gold outline + glow + scale */
.king {
  border: 3px solid gold;
  box-shadow:
    0 6px 12px rgba(0, 0, 0, 0.4),
    0 0 10px gold;
  transform: scale(1.2);
}

/* Red side: Bitcoin logo on orange */
.piece.r {
  background: #FF9800 /* orange */
    url('https://upload.wikimedia.org/wikipedia/commons/4/46/Bitcoin.svg')
    center/60% no-repeat;
}

/* Black side: solid green circle with white “$” */
.piece.b {
  background-color: #4caf50;   /* green circle */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
  width: 50px;
  height: 50px;
  margin: 5px auto;
  border-radius: 50%;
  position: relative;          /* needed for ::after */
}

/* White “$” sign on green circle */
.piece.b::after {
  content: "$";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #228B22;                 /* white dollar sign */
  font-size: 28px;
  font-weight: bold;
  font-family: 'Segoe UI', sans-serif;
}

/* Black‐team king: keep green + add gold glow */
.piece.b.king {
  background-color: #4caf50;
  box-shadow:
    0 6px 12px rgba(0, 0, 0, 0.4),
    0 0 10px gold;
  transform: scale(1.2);
}

/* Reset button styling */
.reset-button {
  display: block;
  margin: 0 auto 0;    /* vertical spacing handled by wrapper’s padding */
  padding: 10px 20px;
  background: #e91e63;
  color: #fff;
  border: 2px solid #c2185b;
  border-radius: 6px;
  font-family: 'Segoe UI', sans-serif;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.1s;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.reset-button:hover {
  background: #c2185b;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.reset-button:active {
  transform: translateY(2px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}

/* Pulse animation for selected piece */
@keyframes pulse {
  0% {
    transform: scale(1.2) translateY(-2px);
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.5), 0 0 10px gold;
  }
  50% {
    transform: scale(1.3) translateY(-4px);
    box-shadow: 0 14px 24px rgba(0, 0, 0, 0.6), 0 0 20px gold;
  }
  100% {
    transform: scale(1.2) translateY(-2px);
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.5), 0 0 10px gold;
  }
}

.selected .piece {
  animation: pulse 1s infinite ease-in-out;
}

/* Glow animation for available squares */
@keyframes glow {
  0%   { box-shadow: inset 0 0 0 4px rgba(255, 255, 0, 0.6); }
  50%  { box-shadow: inset 0 0 0 4px rgba(255, 255, 0, 1); }
  100% { box-shadow: inset 0 0 0 4px rgba(255, 255, 0, 0.6); }
}