/* Colours and weights match the figure library and widgets/graph-walk: dark green final, light green progress, red only for a wrong move, grey neutral. */
* { box-sizing: border-box; }
html, body { margin: 0; overflow: hidden; background: transparent; font: 500 12px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; }
.w { position: relative; width: 100%; max-width: 720px; margin: 0 auto; background: #fff; border-radius: 6px; }
#map { display: block; width: 100%; height: auto; user-select: none; -webkit-user-select: none; }
#map text { font-family: "New Computer Modern", "Latin Modern Roman", "CMU Serif", "Times New Roman", serif; font-variant-numeric: lining-nums; }
.edge { stroke: #6e7781; stroke-width: 1.8; transition: stroke .25s, stroke-width .25s, opacity .25s; }
.edge.light { stroke: #4ac26b; stroke-width: 4; }
.edge.dark { stroke: #1a7f37; stroke-width: 4; }
.edge.wrong { stroke: #cf222e; stroke-width: 4; }
.edge.fade { stroke: #d0d7de; }
.hit { stroke: transparent; stroke-width: 22; cursor: pointer; }
.weight { fill: #6e7781; font-size: 15px; text-anchor: middle; dominant-baseline: central; paint-order: stroke; stroke: #fff; stroke-width: 6px; stroke-linejoin: round; pointer-events: none; }
.weight.light, .weight.dark { fill: #1a7f37; font-weight: 700; }
.weight.wrong { fill: #cf222e; font-weight: 700; }
.weight.fade { fill: #afb8c1; }
.node { cursor: pointer; outline: none; }
.node circle { fill: #fff; stroke: #1f2328; stroke-width: 2; transition: fill .15s, stroke .15s; }
.node text { font-size: 21px; text-anchor: middle; dominant-baseline: central; fill: #1f2328; pointer-events: none; }
.node:hover circle, .node:focus-visible circle { stroke: #0969da; stroke-width: 3; }
.node.light circle { fill: #dafbe1; stroke: #4ac26b; stroke-width: 3; }
.node.dark circle { fill: #dafbe1; stroke: #1a7f37; stroke-width: 3.5; }
.node.dark { cursor: default; }
.node.wrong circle { fill: #ffd8d3; stroke: #cf222e; stroke-width: 3.5; }
.node.last circle { stroke-width: 4.5; }
.tag rect { fill: #f6f8fa; stroke: #8c959f; stroke-width: 1.5; transition: fill .25s, stroke .25s; }
.tag .val { font-size: 18px; text-anchor: middle; dominant-baseline: central; fill: #1f2328; font-weight: 600; }
.tag.changed rect { fill: #fff; stroke: #1a7f37; stroke-width: 2.5; }
.tag.changed .val { fill: #1a7f37; font-weight: 700; }
.tag.final rect { fill: #1a7f37; stroke: #1a7f37; }
.tag.final .val { fill: #fff; }
.old { font-size: 14px; fill: #6e7781; font-weight: 400; text-decoration: line-through; }
.box rect { fill: #fff; stroke: #d0d7de; stroke-width: 1.5; transition: fill .2s, stroke .2s; }
.box.full rect { fill: #f6f8fa; stroke: #8c959f; }
.box text { font-size: 18px; text-anchor: middle; dominant-baseline: central; fill: #1f2328; }
.box.light rect { fill: #dafbe1; stroke: #4ac26b; stroke-width: 2.5; }
.box.dark rect { fill: #1a7f37; stroke: #1a7f37; }
.box.dark text { fill: #fff; }
.box.wrong rect { fill: #ffd8d3; stroke: #cf222e; stroke-width: 2.5; }
.btn { cursor: pointer; outline: none; }
.btn circle { fill: #fff; stroke: #1f2328; stroke-width: 2; transition: fill .15s, stroke .15s; }
.btn path { fill: none; stroke: #1f2328; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.btn:hover circle, .btn:focus-visible circle { stroke: #0969da; stroke-width: 3; }
.btn.wrong circle { fill: #ffd8d3; stroke: #cf222e; stroke-width: 3.5; }
.btn.off { opacity: .35; cursor: default; }
/* progress sits over the empty bottom-right corner of the stage */
.bar { position: absolute; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 4px 0 12px; border-radius: 9999px;
  background: rgb(0 0 0 / 0.7); color: #fff; font-variant-numeric: tabular-nums; }
#dots { display: flex; gap: 5px; }
#dots span { width: 10px; height: 10px; border-radius: 9999px; border: 2px solid rgb(255 255 255 / .7); transition: background .2s; }
#dots span.on { background: #4ac26b; border-color: #4ac26b; }
#misses { min-width: 2.5em; color: #ff8182; font-size: 13px; }
#misses:empty { min-width: 0; }
#reset { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 9999px;
  background: transparent; color: #fff; cursor: pointer; }
#reset:hover { background: rgb(255 255 255 / .15); }
#reset svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.w.complete #dots span.on { animation: pop .4s ease-out both; }
@keyframes pop { 50% { transform: scale(1.5); } }
/* lineup: arcs over one row of tasks; an arc pointing left is broken (amber), a picked task is outlined blue */
.arc { fill: none; stroke: #424a53; stroke-width: 1.8; }
.arc.bad { stroke: #bf8700; stroke-width: 3; }
.w.complete .arc { stroke: #1a7f37; stroke-width: 2.6; }
.node.pick circle { fill: #ddf4ff; stroke: #0969da; stroke-width: 3.5; }
.w.complete .node circle { fill: #dafbe1; stroke: #1a7f37; stroke-width: 3.5; }
.w.complete .node { cursor: default; }
#count { display: flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 700; color: #ffd33d; }
#count svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
#star { display: none; color: #4ac26b; font-size: 17px; line-height: 1; }
.w.complete #count { color: #4ac26b; }
.w.complete #star { display: inline; animation: pop .4s ease-out both; }