/* ===========================================================
   Reversi — game-specific styles only.
   Chrome, buttons, #status, .score-box etc. come from shared.css
   =========================================================== */

body { gap: 16px; }

/* ---------- score chips row ---------- */
#scores {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ---------- the board ----------
   A responsive square that scales with the viewport but never
   gets too big on desktop. CSS grid lays out the 64 cells. */
#board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  gap: 3px;                         /* the gap shows as grid lines */
  width: min(92vw, 460px);
  aspect-ratio: 1 / 1;
  padding: 10px;
  background: var(--green);         /* classic felt board */
  border-radius: 12px;
  box-shadow: 0 10px 40px var(--shadow);
  border-bottom: 6px solid rgba(0, 0, 0, 0.25);
  touch-action: manipulation;      /* snappier taps on mobile */
}

/* ---------- a single square ---------- */
.cell {
  position: relative;
  background: rgba(0, 0, 0, 0.16);  /* darker felt squares between lines */
  border-radius: 3px;
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* squares the player can legally move into */
.cell.legal { cursor: pointer; }
.cell.legal:hover { background: rgba(255, 255, 255, 0.12); }

/* faint dot marking a legal move */
.cell.legal::after {
  content: "";
  width: 30%;
  height: 30%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transition: transform 0.12s ease;
}
.cell.legal:hover::after { transform: scale(1.25); }

/* ---------- discs ---------- */
.disc {
  width: 80%;
  height: 80%;
  border-radius: 50%;
  /* pop-in when placed or flipped */
  animation: place 0.22s cubic-bezier(0.34, 1.3, 0.7, 1);
}
/* Fixed black/white discs (classic Othello) so colours never invert with the
   theme and always match the "Dark" / "Light" labels in the score panel. */
.disc.dark {
  background: #23272e;
  box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.55),
              inset 0 2px 4px rgba(255, 255, 255, 0.10);
}
.disc.light {
  background: #f4f6fb;
  box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.28),
              0 1px 2px rgba(0, 0, 0, 0.25);
}

/* a flipped disc spins as it changes colour */
.disc.flip { animation: flip 0.35s ease; }

@keyframes place { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes flip {
  0%   { transform: scale(1)   rotateY(0deg); }
  50%  { transform: scale(0.6) rotateY(90deg); }
  100% { transform: scale(1)   rotateY(0deg); }
}

/* lock the board visually while the CPU is thinking */
#board.locked .cell.legal { cursor: default; }
#board.locked .cell.legal::after { opacity: 0; }

/* ---------- New Game button ---------- */
#reset { padding: 10px 24px; }