/* =========================================================
   STERHALMA — ster met pionnen (SVG, 1 eenheid = afstand
   tussen twee gaatjes)
   ========================================================= */

.sh-board{
  /* breedte volgt ook de schermhoogte, zodat de hele ster in beeld past */
  width: min(100%, 600px, calc(74vh * 0.87));
  margin: 0 auto;
}
.sh-board svg{
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.sh-star-edge{
  fill: none;
  stroke: #17251f;
  stroke-width: 0.5;
  stroke-linejoin: round;
}
.sh-star-face{ fill: var(--surface); }
.sh-home{ opacity: 0.16; }

.sh-hole{
  fill: #dbe5d7;
  stroke: rgba(23, 37, 31, 0.28);
  stroke-width: 0.04;
}

/* ---------- pionnen ---------- */
.sh-hit{ fill: transparent; }
.sh-body{
  stroke: #17251f;
  stroke-width: 0.07;
}
.sh-shine{
  fill: #fff;
  opacity: 0.55;
  pointer-events: none;
}
.sh-ring{
  fill: none;
  stroke: var(--accent-dark);
  stroke-width: 0.09;
  opacity: 0;
  transition: opacity .15s;
}
.sh-piece:focus{ outline: none; }
.sh-piece.is-movable{ cursor: pointer; }
.sh-piece.is-movable:hover .sh-ring,
.sh-piece.is-movable:focus-visible .sh-ring{ opacity: 0.6; }
.sh-piece.is-selected .sh-ring{
  opacity: 1;
  stroke-width: 0.12;
}
/* pionnen van wie niet meer meedoet: blijven staan als obstakel */
.sh-piece.is-out{ opacity: 0.4; }

/* ---------- mogelijke zetten ---------- */
.sh-dest{ cursor: pointer; }
.sh-dest:focus{ outline: none; }
.sh-dest-dot{
  fill: var(--accent);
  stroke: #17251f;
  stroke-width: 0.05;
  transform-box: fill-box;
  transform-origin: center;
  animation: sh-pulse 1.2s ease-in-out infinite;
}
.sh-dest:hover .sh-dest-dot,
.sh-dest:focus-visible .sh-dest-dot{
  animation: none;
  transform: scale(1.5);
  fill: #fff3c4;
}
@keyframes sh-pulse{
  0%, 100%{ transform: scale(1); }
  50%{ transform: scale(1.25); }
}

.sh-preview-line{
  fill: none;
  stroke-width: 0.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.75;
  pointer-events: none;
}

/* vorige zet */
.sh-trail{ pointer-events: none; }
.sh-trail-line{
  fill: none;
  stroke-width: 0.1;
  stroke-dasharray: 0.22 0.18;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.5;
}
.sh-trail-start{
  fill: none;
  stroke-width: 0.07;
  opacity: 0.6;
}

@media (prefers-reduced-motion: reduce){
  .sh-dest-dot{ animation: none; }
}