/* Bliss Strokes: the figure, its points and the ink. By Luke Steuber. */
#stage{min-height:0;min-width:0;overflow:hidden}
.strokes-wrap{display:flex;flex-direction:column;align-items:center}
.strokes{position:relative;touch-action:none;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:pointer}
.strokes-svg{position:absolute;inset:0;display:block;overflow:visible;pointer-events:none}
.strokes-svg .rule{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
/* The character's lines stay hidden until found; a found line is full ink. */
.strokes-svg path{fill:none;stroke-width:var(--ink-w);stroke-linecap:round;stroke-linejoin:round}
.inked path{stroke:var(--ink);stroke-dasharray:1 1;stroke-dashoffset:0}
.inked path.fresh{animation:strokes-ink .24s cubic-bezier(.3,.7,.2,1) both}
@keyframes strokes-ink{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
/* A miss: a dotted hairline in pencil, so the same guess is not made twice. */
.missed path{stroke:var(--guide);stroke-width:2;stroke-dasharray:2 6;vector-effect:non-scaling-stroke}
.missed path.fresh{animation:strokes-miss .5s ease-out both}
@keyframes strokes-miss{from{stroke:var(--ink);stroke-width:4}to{stroke:var(--guide);stroke-width:2}}
/* Joints: a ring with the count of lines still hidden there, a solid disc for the pen, nothing but ink once all are found. */
.marks circle{vector-effect:non-scaling-stroke;transition:opacity .6s}
.marks circle.live{fill:var(--bg);stroke:var(--ink);stroke-width:2}
.marks circle.pen{fill:var(--ink);stroke:var(--ink);stroke-width:2}
.marks circle.spent{fill:none;stroke:none}
.marks text{font-family:"Plex Mono",ui-monospace,monospace;font-weight:500;text-anchor:middle;dominant-baseline:central;fill:var(--ink);transition:opacity .6s}
.marks text.pen{fill:var(--bg)}
.marks .hint-ring{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-dasharray:5 5;animation:strokes-pulse 1.2s ease-in-out 3}
@keyframes strokes-pulse{0%,100%{stroke-opacity:1}50%{stroke-opacity:.12}}
/* Found: the joints, the numbers and the misses fade and the character stands alone. */
.strokes.won .marks circle,.strokes.won .marks text,.strokes.won .missed path{opacity:0;transition:opacity .6s}
.strokes.won{cursor:default}
.pt{position:absolute;padding:0;margin:0;border:0;border-radius:0;background:none;pointer-events:none;display:grid;place-items:center}
.pt:focus-visible{outline:none}
.pt .focus{width:var(--focus);height:var(--focus)}
.pt:focus-visible .focus{outline:2px solid var(--ink);outline-offset:2px}
.strokes-gloss{margin:0;padding-top:6px;font-size:clamp(20px,3.2vh,28px);line-height:1.2;color:var(--text)}