@import url('../global.css');

/* =============================================================================
   Peg Solitaire — a drilled wooden board rather than a flat grid: honey-toned
   timber holes bored into a darker frame, with pegs cast as glossy glass
   marbles instead of plain colour discs.
   ========================================================================== */

:root {
  --title-color: var(--color-pegsolitaire);
  --peg-wood: #b98a4a;
  --peg-wood-dark: #7a5626;
  --peg-hole: #3a2810;
}

.pegsolitaire-board[data-visual-theme='arcade'] {
  --peg-wood: #a13c88;
  --peg-wood-dark: #571f49;
  --peg-hole: #240a1e;
}

.pegsolitaire-board[data-visual-theme='midnight'] {
  --peg-wood: #2f6690;
  --peg-wood-dark: #163a54;
  --peg-hole: #0a1926;
}

.pegsolitaire-board[data-visual-theme='daylight'] {
  --peg-wood: #9d7de0;
  --peg-wood-dark: #5b3aa8;
  --peg-hole: #2c1b52;
}

.pegsolitaire-board[data-visual-theme='amber'] {
  --peg-wood: #c98a2e;
  --peg-wood-dark: #7a4f11;
  --peg-hole: #2e1b04;
}

.pegsolitaire-board {
  display: grid;
  grid-template-columns: repeat(var(--peg-size, 7), 1fr);
  grid-template-rows: repeat(var(--peg-size, 7), 1fr);
  gap: 4px;
  aspect-ratio: 1;
  place-content: center;
  padding: var(--spacing-md);
  background:
    repeating-linear-gradient(95deg, rgba(0, 0, 0, 0.06) 0 2px, transparent 2px 12px),
    linear-gradient(155deg, var(--peg-wood), var(--peg-wood-dark));
  border: 3px solid color-mix(in srgb, black 30%, var(--peg-wood-dark));
  border-radius: var(--border-radius-lg);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    var(--shadow);
}

/* Off-board corners: invisible spacers keeping the cross shape. */
.peg-off {
  visibility: hidden;
}

.peg-cell {
  position: relative;
  aspect-ratio: 1;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition:
    background 0.12s ease,
    box-shadow 0.12s ease;
}

/* A hole (empty) reads as a drilled bore in the wood. */
.peg-cell.is-empty {
  background: radial-gradient(circle at 45% 40%, var(--peg-hole), #1c1206);
  box-shadow:
    inset 0 3px 5px rgba(0, 0, 0, 0.7),
    0 1px 0 rgba(255, 255, 255, 0.08);
}

/* A peg is a glossy glass marble resting in its bore. */
.peg-cell.is-peg {
  background: radial-gradient(circle at 45% 40%, var(--peg-hole), #1c1206);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.6);
}
.peg-cell.is-peg::after {
  content: '';
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 32% 28%,
    color-mix(in srgb, white 55%, var(--color-pegsolitaire)),
    var(--color-pegsolitaire) 65%,
    color-mix(in srgb, black 30%, var(--color-pegsolitaire))
  );
  box-shadow:
    inset 0 -3px 4px rgba(0, 0, 0, 0.4),
    inset 0 2px 2px rgba(255, 255, 255, 0.4),
    0 2px 3px rgba(0, 0, 0, 0.5);
}

.peg-cell.is-selected::after {
  box-shadow:
    0 0 0 3px var(--white-color),
    inset 0 -3px 4px rgba(0, 0, 0, 0.4);
}
.peg-cell.is-target {
  background: radial-gradient(
    circle at 45% 40%,
    color-mix(in srgb, var(--color-pegsolitaire) 45%, var(--peg-hole)),
    var(--peg-hole)
  );
}