/* Nine Men's Morris — own styles, theme variables only. Root class: .nm */

.nm {
  width: 100%;
  max-width: 560px;
}

.nm-board-wrap {
  position: relative;
  width: 100%;
  padding: 12px;
  background: var(--gm-surface, #1b2740);
  border: 1px solid var(--gm-line, rgba(255, 255, 255, 0.09));
  border-radius: var(--gm-radius, 12px);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.5);
}

.nm-board {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  background: var(--gm-bg-2, #131c2b);
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.nm-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.nm-lines rect,
.nm-lines path {
  fill: none;
  stroke: var(--gm-muted, rgba(242, 238, 230, 0.66));
  stroke-width: 0.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Each of the 24 spots is a real button, 14% of the board wide (>= 44 px on a 360 px phone). */
.nm-spot {
  position: absolute;
  width: 14%;
  aspect-ratio: 1;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  transform: translate(-50%, -50%);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-appearance: none;
  appearance: none;
}

.nm-spot::before {
  content: "";
  position: absolute;
  inset: 40%;
  border-radius: 50%;
  background: var(--gm-muted, rgba(242, 238, 230, 0.66));
  transition: inset 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.nm-spot:focus-visible {
  outline: 3px solid var(--gm-accent-bright, #e0584a);
  outline-offset: -2px;
  z-index: 3;
}

.nm-piece {
  position: absolute;
  inset: 16%;
  display: none;
  border-radius: 50%;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.35), inset 0 0 0 2px rgba(0, 0, 0, 0.22), inset 0 0 0 6px rgba(255, 255, 255, 0.14);
}

.nm-spot.has-w .nm-piece,
.nm-spot.has-b .nm-piece { display: block; }

.nm-spot.has-w::before,
.nm-spot.has-b::before { opacity: 0; }

.nm-spot.has-w .nm-piece { background: var(--gm-piece-w, #f7f3ea); }
.nm-spot.has-b .nm-piece { background: var(--gm-piece-b, #14161c); }

.nm-spot.is-new .nm-piece { animation: nm-pop 0.22s ease-out; }

/* the "last move" ring */
.nm-spot.is-last::after {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  border: 2px solid var(--gm-last, rgba(240, 192, 74, 0.75));
  pointer-events: none;
}

/* men that may move now */
.nm-spot.is-movable .nm-piece { box-shadow: 0 3px 5px rgba(0, 0, 0, 0.35), 0 0 0 3px var(--gm-accent-line, rgba(192, 57, 43, 0.42)); }

/* the selected man */
.nm-spot.is-sel .nm-piece { box-shadow: 0 3px 5px rgba(0, 0, 0, 0.35), 0 0 0 4px var(--gm-accent-bright, #e0584a); }

/* placing phase: every empty spot is open, shown quietly */
.nm-spot.is-legal::before {
  inset: 36%;
  background: var(--gm-accent, #c0392b);
  opacity: 0.75;
}
.nm-spot.is-legal:hover::before,
.nm-spot.is-legal:focus-visible::before { inset: 26%; opacity: 1; }

/* a spot the selected man may go to */
.nm-spot.is-target::before {
  inset: 30%;
  background: var(--gm-accent, #c0392b);
  box-shadow: 0 0 0 5px var(--gm-accent-soft, rgba(192, 57, 43, 0.16));
}
.nm-spot.is-target:hover::before { inset: 24%; }

/* opposing men that may be taken after a mill */
.nm-spot.is-removable .nm-piece {
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.35), 0 0 0 4px var(--gm-take, #e0584a);
}
.nm-spot.is-removable .nm-piece::after {
  content: "";
  position: absolute;
  inset: 28%;
  background:
    linear-gradient(45deg, transparent 44%, var(--gm-take, #e0584a) 44%, var(--gm-take, #e0584a) 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, var(--gm-take, #e0584a) 44%, var(--gm-take, #e0584a) 56%, transparent 56%);
}

.nm-spot.is-shake .nm-piece,
.nm-spot.is-shake::before { animation: nm-shake 0.35s ease; }

@keyframes nm-pop {
  0% { transform: scale(0.7); }
  100% { transform: scale(1); }
}

@keyframes nm-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8%); }
  75% { transform: translateX(8%); }
}

.nm .gm-status { margin-top: 14px; }

.gm-seg button,
.gm-actions .gm-btn { min-height: 44px; }

@media (max-width: 991px) {
  .nm { margin: 0 auto; }
}

@media (max-width: 480px) {
  .nm-board-wrap { padding: 6px; }
  .nm-lines rect, .nm-lines path { stroke-width: 0.9; }
}

@media (prefers-reduced-motion: reduce) {
  .nm-spot.is-new .nm-piece, .nm-spot.is-shake .nm-piece, .nm-spot.is-shake::before { animation: none; }
  .nm-spot::before { transition: none; }
  .gm-status.is-thinking .gm-dot { animation: none; }
}