body { gap: 18px; }

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

/* difficulty (board) button group — copied from connect-four */
#difficulty {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.diff-btn {
  padding: 8px 18px;
  font-size: 0.9rem;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px var(--shadow);
}
.diff-btn:hover { opacity: 1; background: var(--surface-3); }
.diff-btn.active {
  background: var(--accent);
  color: var(--accent-text);
  border-color: transparent;
}
#difficulty[hidden] { display: none; }

.actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* board: a CSS-grid of fixed-size cells; column/row counts set inline by game.js */
#board {
  display: grid;
  gap: 8px;
  padding: 16px;
  background: var(--surface);
  border-radius: 16px;
  box-shadow: 0 10px 40px var(--shadow);
  --cell: 52px;
}

/* every grid slot is a cell; blocked slots are invisible spacers */
.cell {
  width: var(--cell);
  height: var(--cell);
}
.cell.blocked {
  visibility: hidden;
}

/* a playable hole (well sunk into the board) */
.cell.hole {
  border-radius: 50%;
  background: var(--surface-2);
  box-shadow: inset 0 3px 6px var(--shadow);
  position: relative;
  cursor: default;
  transition: transform 0.1s;
}

/* the peg sitting in a hole */
.cell.peg .peg {
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.35), 0 2px 5px var(--shadow);
  cursor: pointer;
  transition: transform 0.1s, background 0.15s;
}
.cell.peg .peg:hover { transform: scale(1.06); }

/* the currently selected peg */
.cell.selected .peg {
  background: var(--green);
  transform: scale(1.08);
  box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.35), 0 0 0 3px var(--green), 0 2px 6px var(--shadow);
}

/* a legal landing hole for the selected peg */
.cell.target {
  cursor: pointer;
}
.cell.target::after {
  content: "";
  position: absolute;
  inset: 24%;
  border-radius: 50%;
  background: var(--green);
  opacity: 0.45;
  animation: pegPulse 0.9s ease-in-out infinite alternate;
}
@keyframes pegPulse {
  from { transform: scale(0.7); opacity: 0.30; }
  to   { transform: scale(1);   opacity: 0.55; }
}

/* finished board, last peg celebration */
#board.done .cell.peg .peg { cursor: default; }
.cell.win .peg {
  background: var(--green);
  animation: pegWin 0.7s ease-in-out infinite alternate;
}
@keyframes pegWin {
  from { transform: scale(1); }
  to   { transform: scale(0.82); filter: brightness(1.4); }
}

@media (max-width: 560px) {
  #board { --cell: 38px; gap: 5px; padding: 10px; }
}
@media (max-width: 420px) {
  #board { --cell: 32px; gap: 4px; padding: 8px; }
}