/* =============================================================
   GAME: Peg Solitaire
   ============================================================= */
.board-pegsolitaire { --cell: min(calc((100vw - 80px) / 7), 58px); --pg-glow: #ffc93d; }
.board-pegsolitaire.pg-triangle { --cell: min(calc((100vw - 80px) / 5), 72px); }
.pg-grid {
  display: grid; grid-template-columns: repeat(7, var(--cell)); grid-template-rows: repeat(7, var(--cell));
  padding: calc(var(--cell) * .2); border-radius: 26px;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(255, 210, 140, .16), transparent 60%),
    repeating-linear-gradient(97deg, rgba(255, 220, 170, .035) 0 2px, transparent 2px 9px),
    radial-gradient(circle at 50% 45%, #55330f, #2a180a 72%);
  box-shadow: 0 0 0 2px var(--pg-glow), 0 0 28px rgba(255, 201, 61, .35), inset 0 2px 0 rgba(255, 220, 160, .18), inset 0 -6px 0 rgba(0, 0, 0, .28), 0 14px 30px rgba(0, 0, 0, .4);
}
.pg-triangle .pg-grid { grid-template-columns: repeat(10, calc(var(--cell) / 2)); grid-template-rows: repeat(5, var(--cell)); border-radius: 22px; }
.pg-hole {
  --pc: #ffc93d;
  position: relative; border: 0; padding: 0; margin: 0; background: transparent; cursor: pointer;
  display: grid; place-items: center; border-radius: 50%;
}
/* drilled hole: dark inside, lit lower rim */
.pg-hole::before {
  content: ""; width: 44%; height: 44%; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #050201, #1a0e05 70%, #2a170a);
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, .85), 0 1px 0 rgba(255, 220, 160, .22), 0 -1px 0 rgba(0, 0, 0, .35);
}
.pg-hole:focus { outline: none; }
.pg-hole:focus-visible { box-shadow: 0 0 0 2px var(--focus); }
/* glossy marble in its own colour (--pc) */
.pg-peg {
  position: absolute; width: 70%; height: 70%; border-radius: 50%; opacity: 0; transform: scale(.4);
  background:
    radial-gradient(circle at 33% 27%, rgba(255, 255, 255, .95) 0 7%, rgba(255, 255, 255, .4) 13%, transparent 28%),
    radial-gradient(circle at 62% 78%, color-mix(in srgb, var(--pc) 45%, #fff) 0, transparent 32%),
    radial-gradient(circle at 42% 38%, color-mix(in srgb, var(--pc) 88%, #fff) 0, var(--pc) 38%, color-mix(in srgb, var(--pc) 45%, #0a0412) 100%);
  box-shadow: 0 4px 5px rgba(0, 0, 0, .5), 0 0 12px color-mix(in srgb, var(--pc) 38%, transparent), inset 0 -2px 3px rgba(0, 0, 0, .25);
  transition: transform .16s ease, opacity .16s ease, box-shadow .16s ease;
}
.pg-full .pg-peg { opacity: 1; transform: none; }
.pg-full:hover .pg-peg { transform: translateY(-2px); }
.pg-sel .pg-peg { transform: translateY(-4px) scale(1.08); box-shadow: 0 0 0 3px #fff, 0 0 22px color-mix(in srgb, var(--pc) 90%, #fff), 0 9px 8px rgba(0, 0, 0, .45); }
.pg-last .pg-peg::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--pc) 60%, transparent); }
.pg-target::after {
  content: ""; position: absolute; inset: 14%; border-radius: 50%; border: 3px dashed var(--pg-glow);
  box-shadow: 0 0 14px rgba(255, 201, 61, .6); animation: pgspin 4s linear infinite;
}
@keyframes pgspin { to { transform: rotate(360deg); } }
.pg-hint-from .pg-peg { box-shadow: 0 0 0 3px #3df5ff, 0 0 22px rgba(61, 245, 255, .9); }
.pg-hint-from.pg-sel .pg-peg { box-shadow: 0 0 0 3px #3df5ff, 0 0 22px rgba(61, 245, 255, .9), 0 9px 8px rgba(0, 0, 0, .45); }
.pg-hint-to::after { border-color: #3df5ff; box-shadow: 0 0 14px rgba(61, 245, 255, .7); }
.pg-hint-to:not(.pg-target)::after { content: ""; position: absolute; inset: 14%; border-radius: 50%; border: 3px dashed #3df5ff; }
.pg-end .pg-peg { animation: pgpulse .9s ease-in-out infinite alternate; }
@keyframes pgpulse { to { transform: scale(.88); box-shadow: 0 0 24px color-mix(in srgb, var(--pc) 90%, transparent); } }
.pg-dot { background: radial-gradient(circle at 33% 28%, #fff 0 12%, transparent 30%), radial-gradient(circle at 42% 38%, #ffe7a0, #ffc93d 40%, #8a5a06); }
.pg-note { color: #ffe08a; font-weight: 600; }
.pg-hint-btn { margin-left: 8px; }