/* Peg Solitaire — own styles, theme variables only. Root class: .ps */

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

.ps-board-wrap {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  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);
}

.ps-board {
  display: block;
  width: 100%;
  height: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  overflow: visible;
}

.ps-board:focus { outline: none; }

/* the wooden-feel board surface */
.ps-face {
  fill: var(--gm-sq-light, #e9e0cc);
  stroke: var(--gm-board-edge, rgba(0, 0, 0, 0.45));
  stroke-width: 2;
}

.ps-hole { cursor: pointer; outline: none; }

.ps-hole .ps-dish {
  fill: var(--gm-sq-dark, #6b3a44);
  opacity: 0.55;
  transition: opacity 0.15s ease;
}

.ps-hole .ps-ring {
  fill: none;
  stroke: var(--gm-accent-bright, #e0584a);
  stroke-width: 5;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.ps-hole .ps-peg {
  fill: var(--gm-accent, #c0392b);
  stroke: rgba(0, 0, 0, 0.35);
  stroke-width: 1.5;
  transition: opacity 0.12s ease;
}

.ps-hole .ps-shine {
  fill: rgba(255, 255, 255, 0.35);
  pointer-events: none;
}

.ps-hole.is-empty .ps-peg,
.ps-hole.is-empty .ps-shine { display: none; }

.ps-hole.is-goal .ps-dish { stroke: var(--gm-accent-bright, #e0584a); stroke-width: 3; stroke-dasharray: 6 5; opacity: 0.75; }

.ps-hole.is-selected .ps-ring { opacity: 1; }
.ps-hole.is-selected .ps-peg { fill: var(--gm-accent-bright, #e0584a); }

.ps-hole.is-target .ps-dish { fill: var(--gm-accent-bright, #e0584a); opacity: 0.45; }
.ps-hole.is-target .ps-ring { opacity: 0.9; stroke-dasharray: 4 4; }

.ps-hole.is-hint-from .ps-ring,
.ps-hole.is-hint-to .ps-ring { opacity: 1; stroke: var(--gm-good, #58be82); stroke-dasharray: none; }
.ps-hole.is-hint-to .ps-dish { fill: var(--gm-good, #58be82); opacity: 0.45; }

.ps-hole.is-last .ps-dish { opacity: 0.85; }

.ps-hole:focus-visible .ps-focus,
.ps-board.is-kb .ps-hole.is-focus .ps-focus {
  opacity: 1;
}

.ps-hole .ps-focus {
  fill: none;
  stroke: var(--gm-text, #f2eee6);
  stroke-width: 3;
  opacity: 0;
  pointer-events: none;
}

.ps-drag {
  fill: var(--gm-accent-bright, #e0584a);
  stroke: rgba(0, 0, 0, 0.35);
  stroke-width: 1.5;
  pointer-events: none;
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.35));
}

.ps-hole.is-shake { animation: ps-shake 0.35s ease; }

@keyframes ps-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

#gm-peg-solitaire .gm-status { margin-top: 12px; }

#ps-boards { border-radius: 16px; }
.gm-seg button, .gm-actions .gm-btn { min-height: 44px; }

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

@media (max-width: 480px) {
  .ps-board-wrap { padding: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .ps-hole .ps-dish, .ps-hole .ps-ring, .ps-hole .ps-peg { transition: none; }
  .ps-hole.is-shake { animation: none; }
  .gm-status.is-thinking .gm-dot { animation: none; }
}