body { gap: 18px; }

/* scoreboard chips (labels adapt to the mode in game.js) */
#score {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* mode + difficulty button groups */
#mode,
#difficulty {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.mode-btn,
.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);
}
.mode-btn:hover,
.diff-btn:hover { opacity: 1; background: var(--surface-3); }
.mode-btn.active,
.diff-btn.active {
  background: var(--accent);
  color: var(--accent-text);
  border-color: transparent;
}
/* difficulty group is only shown in vs-CPU mode */
#difficulty[hidden] { display: none; }

/* ---- the board ----
   A square arena holding the SVG line-work plus absolutely-positioned point
   buttons. The board scales with the viewport but never exceeds 460px. */
#board {
  position: relative;
  width: min(86vw, 460px);
  height: min(86vw, 460px);
  background: var(--surface);
  border-radius: 14px;
  padding: 6%;
  box-shadow: 0 10px 40px var(--shadow);
  touch-action: manipulation;
}

/* the line-work and the point layer share the same inset frame, so the
   SVG's 0–100 viewBox maps 1:1 onto the points' left/top percentages. */
.mm-svg,
.points {
  position: absolute;
  inset: 6%;            /* matches the #board padding */
  overflow: visible;
}
.mm-line {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.6;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* point hotspots — left/top are set inline (raw 0–100 as %) within .points,
   so each lands exactly on its SVG crossing. */
.point {
  position: absolute;
  width: 12%;
  height: 12%;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transform: translate(-50%, -50%);
}

/* empty crossings: a small dot you can aim at */
.point.empty::before {
  content: '';
  position: absolute;
  inset: 28%;
  border-radius: 50%;
  background: var(--muted);
  opacity: 0.45;
}
.point.empty:hover::before { opacity: 0.8; background: var(--accent); }

/* men */
.point.man::before {
  content: '';
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
}
.point.man.white::before {
  background: radial-gradient(circle at 34% 30%, #ffffff, #d4d4d4 60%, #b3b3b3);
}
.point.man.black::before {
  background: radial-gradient(circle at 34% 30%, #6b6b6b, #1a1a1a 60%, #000);
}

/* a man that is part of a completed mill glows */
.point.man.milled::before { box-shadow: 0 0 0 3px var(--accent), 0 2px 5px rgba(0, 0, 0, 0.45); }

/* the picked-up man (moving phase) */
.point.selected::after {
  content: '';
  position: absolute;
  inset: -2%;
  border-radius: 50%;
  border: 3px solid var(--accent);
  animation: pulse 0.9s ease-in-out infinite alternate;
}
@keyframes pulse { to { transform: scale(1.12); } }

/* legal destinations for the picked-up man */
.point.target::before {
  content: '';
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: var(--green);
  opacity: 0.85;
}
.point.target:hover::before { inset: 12%; }

/* enemy men you may remove after forming a mill */
.point.capturable { cursor: crosshair; }
.point.capturable::after {
  content: '';
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  border: 3px dashed var(--red);
  animation: pulse 0.9s ease-in-out infinite alternate;
}

/* responsive nudge for very small screens */
@media (max-width: 360px) {
  #board { width: 92vw; height: 92vw; }
}