/* Jumps board. Inherits the existing theme tokens (--text, --muted, --line, --accent, --action-text). */
.jumps { display: grid; justify-items: center; gap: .9rem; width: min(100%, 30rem); margin-inline: auto; color: inherit; }
/* The board keeps the shape its own geometry declares, so a triangle of ten and a cross of
   nineteen need one rule between them rather than one each. */
.jumps-board { position: relative; width: min(100%, clamp(16rem, calc(var(--board-w, 400) * 1px), 24rem)); aspect-ratio: var(--board-w, 1) / var(--board-h, 1); margin-inline: auto; }
.jumps-links { position: absolute; inset: 0; width: 100%; height: 100%; }
.jumps-links line { stroke: var(--line, #c2ccbd); stroke-width: 3; }
/* Every hole is the same target, whatever is in it: a peg is a filled circle and an empty hole an
   open one, and the difference is the fill rather than the size, so nothing moves as the board
   empties. The 44px minimum is the deployed touch target and holds at every board size. */
.jumps-hole { position: absolute; width: clamp(44px, 13%, 58px); aspect-ratio: 1; margin: 0; padding: 0; font: inherit; color: inherit; background: var(--canvas, #fff); border: 2px solid var(--line, #c2ccbd); border-radius: 50%; transform: translate(-50%, -50%); cursor: pointer; }
.jumps-hole[data-peg="true"] { background: var(--accent, currentColor); border-color: var(--accent, currentColor); }
.jumps-hole.can-move { border-color: var(--text, currentColor); }
.jumps-hole.is-chosen { outline: 3px solid var(--text, currentColor); outline-offset: 2px; }
/* A hole a chosen peg can land in is drawn as a ring rather than filled, so it reads as somewhere
   to go and never as a peg. */
.jumps-hole.is-target { border-style: dashed; border-color: var(--text, currentColor); box-shadow: inset 0 0 0 4px color-mix(in srgb, currentColor 12%, transparent); }
/* Where the last peg has to be left, on the boards that name it. Printed on the board, because a
   rule the visitor cannot see is not a rule they can play to. */
.jumps-hole.is-finish::after { content: ""; position: absolute; inset: -7px; border: 2px dotted var(--text, currentColor); border-radius: 50%; }
.jumps-hole:hover:not([aria-disabled="true"]) { border-color: var(--accent, currentColor); }
.jumps-hole:focus-visible { outline: 3px solid var(--text, currentColor); outline-offset: 3px; }
.jumps-hole[aria-disabled="true"] { cursor: default; }
/* A hole with nothing to do is quiet, not gone: it keeps its place in the tab order so the board
   can be read, and only the pointer is told there is nothing to press. */
.jumps-hole[aria-disabled="true"]:not([data-peg="true"]) { border-color: color-mix(in srgb, var(--line, #c2ccbd) 70%, transparent); }
.jumps-choice { min-height: 1.4rem; max-width: 34rem; margin: 0; font-size: .9375rem; line-height: 1.4; text-align: center; color: var(--muted, currentColor); }
.jumps-choice[data-carrying="true"] { color: var(--text, currentColor); }
.jumps-tally { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.75rem; margin: 0; font-size: .875rem; }
.jumps-metric { display: inline-flex; align-items: baseline; gap: .5rem; }
.jumps-label { color: var(--muted, currentColor); }
.jumps-value { font-size: var(--type-title); font-variant-numeric: tabular-nums; }
.jumps-hint { max-width: 34rem; margin: 0; font-size: .875rem; line-height: 1.5; text-align: center; color: var(--muted, currentColor); }
.jumps[data-state="solved"] .jumps-hole[data-peg="true"] { outline: 3px solid var(--accent, currentColor); outline-offset: 3px; }
.jumps[data-state="blocked"] .jumps-hole, .jumps[data-state="waiting"] .jumps-hole { cursor: default; }
@media (prefers-reduced-motion: no-preference) {
  .jumps-hole { transition: background-color .18s ease, border-color .18s ease; }
}
@media (max-width: 380px) {
  .jumps { gap: .7rem; width: 100%; }
  .jumps-board { width: 100%; }
  .jumps-hole { width: clamp(38px, 13%, 52px); }
  .jumps-tally { gap: .3rem 1.1rem; }
}
@media (forced-colors: active) {
  .jumps-hole { background: Canvas; border-color: CanvasText; }
  .jumps-hole[data-peg="true"] { background: CanvasText; }
  .jumps-hole.is-chosen { outline-color: Highlight; }
  .jumps-links line { stroke: CanvasText; }
}