/* ===========================================================
   Nim — game-specific styles only.
   Chrome (body, h1, button, #status, .hint, .score-box) comes
   from shared.css. Everything below is the board + tokens.
   =========================================================== */

/* A little tighter than the global 20px so the board feels compact */
body { gap: 16px; }

/* ---------- the board: a stack of pile rows ---------- */
#board {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--surface);
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 4px 16px var(--shadow);
  width: min(92vw, 460px);
}

/* ---------- one pile / row ---------- */
.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 10px;
  background: var(--surface-2);
  transition: background 0.15s, box-shadow 0.15s;
}

/* The row the player is currently pulling from gets a clear ring */
.row.active {
  background: var(--surface-3);
  box-shadow: inset 0 0 0 2px var(--accent);
}

/* Once a player has committed to a row this turn, the others dim */
#board.row-locked .row:not(.active) { opacity: 0.45; }

/* ---------- individual tokens ---------- */
.token {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  padding: 0;
  flex: 0 0 auto;
  background: var(--accent);
  box-shadow: 0 2px 5px var(--shadow);
  cursor: pointer;
  transition: transform 0.12s, opacity 0.2s, background 0.15s;
}
.token:hover { opacity: 1; }            /* cancel the global button hover-fade */
.token:not(.removed):hover { transform: translateY(-3px); }

/* Tokens the player has staged for removal (this turn, not yet committed) */
.token.pending {
  background: var(--red);
  transform: scale(0.7);
  opacity: 0.7;
}

/* Tokens already gone — faded, flat, inert */
.token.removed {
  background: var(--surface-3);
  box-shadow: none;
  opacity: 0.25;
  cursor: default;
  transform: scale(0.55);
}

/* While it is the CPU's turn, freeze all interaction on the board */
#board.locked { pointer-events: none; }

/* ---------- confirm / clear buttons ---------- */
#controls {
  display: flex;
  gap: 10px;
}
#controls button {
  padding: 8px 22px;
  font-size: 0.95rem;
}
#controls button:disabled {
  opacity: 0.4;
  cursor: default;
}
/* "Clear" reads as a secondary action */
button.ghost {
  background: var(--surface-3);
  color: var(--text);
}

/* ---------- tally row ---------- */
#tally {
  display: flex;
  gap: 12px;
}

/* ---------- tidy up on small screens ---------- */
@media (max-width: 380px) {
  .token { width: 28px; height: 28px; }
  #board { padding: 12px; }
  .row { gap: 6px; padding: 6px; }
}