/*
 * Joe's Peg Board — styles (loaded alongside joe-games.css).
 * Brand palette: cream #FAF3E7, maroon #7B2D26, gold #C98A2D,
 * charcoal #2B2320. Headings Rokkitt, body Nunito Sans — inherited
 * from the .jg-game card in joe-games.css.
 *
 * Sizing follows the v1.0.2 house rule: everything is sized relative
 * to its container (width: 100% with a max-width cap) — never in
 * viewport units. The board is a single SVG with a viewBox, so it
 * scales itself exactly to the card's content box at any width,
 * including a 320px phone.
 */

/* ---------- board ---------- */

.jp-board-wrap {
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
}

.jp-board {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

.jp-wood {
  stroke: #7A4E21;
  stroke-width: 12;
  stroke-linejoin: round;
}

.jp-grain {
  fill: none;
  stroke: rgba(90, 55, 15, 0.18);
  stroke-width: 3;
  stroke-linecap: round;
}

.jp-hole-c {
  fill: #33200E;
  stroke: #1F1206;
  stroke-width: 2;
}

/* Pegs: maroon wood-tee dots; the inner pieces never take taps
   (the transparent .jp-hit circle on top does). */
.jp-peg { pointer-events: none; }

.jp-peg-c {
  fill: #7B2D26;
  stroke: #5E1F19;
  stroke-width: 2;
}

.jp-peg-hl { fill: rgba(255, 240, 210, 0.55); }

.jp-peg-shadow { fill: rgba(40, 20, 0, 0.25); }

/* Pegs that still have a jump get a quiet gold ring, so players can
   see their options without tapping around. */
.jp-peg.jp-movable .jp-peg-c {
  stroke: #C98A2D;
  stroke-width: 2.5;
}

/* The chosen peg turns gold, ready to jump. */
.jp-peg.jp-selected .jp-peg-c {
  fill: #C98A2D;
  stroke: #8A5E14;
  stroke-width: 2.5;
}

/* Landing holes for the chosen peg: pulsing gold outlines. */
.jp-target {
  display: none;
  fill: rgba(201, 138, 45, 0.35);
  stroke: #C98A2D;
  stroke-width: 2.5;
  pointer-events: none;
}

.jp-target.on {
  display: block;
  animation: jp-pulse 0.9s ease-in-out infinite;
}

/* Start-phase suggestion: a dashed gold ring around the apex peg —
   the classic starting hole. Any peg may be tapped instead. */
.jp-ring {
  fill: none;
  stroke: #C98A2D;
  stroke-width: 2;
  stroke-dasharray: 3 5;
  opacity: 0;
  pointer-events: none;
}

.jp-ring.on {
  opacity: 0.9;
  animation: jp-pulse 1.2s ease-in-out infinite;
}

@keyframes jp-pulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

.jp-hit {
  fill: #fff;
  opacity: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- message, stats, controls ---------- */

.jp-message {
  min-height: 1.4em;
  text-align: center;
  font-weight: 700;
  color: #9A3B26;
  margin: 8px 0 4px;
}

.jp-stats {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 12px auto 4px;
  width: 100%;
  max-width: 420px;
}

.jp-stats > div {
  flex: 1;
  min-width: 0;
  text-align: center;
  background: #FFF9EF;
  border: 1px solid #e0d0ab;
  border-radius: 10px;
  padding: 8px 4px;
}

.jp-stats strong {
  display: block;
  font-family: Rokkitt, Georgia, serif;
  font-size: 1.3rem;
  color: #7B2D26;
}

.jp-stats span {
  font-size: 0.75rem;
  color: #5c5148;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.jp-controls {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.jp-controls .jg-btn[disabled] {
  opacity: 0.45;
  cursor: default;
}

/* ---------- end panel ---------- */

.jp-end { text-align: center; margin-top: 14px; }
.jp-end[hidden] { display: none; }

.jp-end-title {
  font-family: Rokkitt, Georgia, serif;
  font-size: 1.4rem;
  color: #7B2D26;
  margin: 0 0 6px;
}

.jp-joe-line {
  font-family: Rokkitt, Georgia, serif;
  font-size: 1.15rem;
  color: #7B2D26;
  margin: 0 0 8px;
}

.jp-final { margin: 0 0 12px; font-weight: 700; }

/* ---------- small screens ---------- */
/* The SVG board scales itself; only type and the stats strip need a
   trim so a 320px phone keeps everything in the card. */
@media (max-width: 400px) {
  .jp-stats strong { font-size: 1.1rem; }
  .jp-stats span { font-size: 0.68rem; }
  .jp-end-title { font-size: 1.25rem; }
  .jp-joe-line { font-size: 1.05rem; }
}