/* Low Poly on the pencil-puzzle kit (games/static/games/puzzles/kit/puzzles.css
   and kit.css, loaded before this): its accent, a raspberry beside the other
   puzzles' inks, and its board: dots in graphite on the kit's paper, and the
   picture's own colors filling in as its triangles are found. The art is the
   loud thing here; the dots and lines stay quiet. Board units are hundredths
   of a cell: a dot's disc has a radius of 30. */
:root {
  --accent: #a8235a;          /* the one filled button: 6.6:1 with white */
  --accent-ink: #ffffff;
  --lp-coral: #f0705e;        /* the emblem's facets */
  --lp-amber: #f5b83d;
  --lp-teal: #2aa79a;
  --lp-violet: #7b5cc2;
}

/* ── the emblem ─────────────────────────────────────────────────────────── */
.mark { display: block; overflow: visible; }
.lp-mark .lp-m1 { fill: var(--lp-coral); }
.lp-mark .lp-m2 { fill: var(--lp-amber); }
.lp-mark .lp-m3 { fill: var(--lp-violet); }
.lp-mark .lp-m4 { fill: var(--lp-teal); }
.lp-mark .lp-m-edge { fill: none; stroke: var(--paper-2); stroke-width: .9; stroke-linejoin: round; }

/* ── the board ──────────────────────────────────────────────────────────── */
.lp-board { overflow: visible; }
/* The picture's triangles, waiting under the dots until their lines are drawn.
   Each is stroked in its own color, so filled neighbors meet without a seam. */
.lp-board .lp-tri { opacity: 0; stroke-width: 2.5; stroke-linejoin: round; pointer-events: none; }
.lp-board .lp-tri.on { opacity: 1; }

/* Lines in graphite, the same weight however far it's zoomed. Once a
   triangle fills, its lines become its facets: a faint light edge. */
.lp-board .lp-line { stroke: var(--ink); stroke-width: 2px; stroke-linecap: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.lp-board .lp-line.fixed { stroke: #ffffff; stroke-opacity: .32; stroke-width: 1px; }
/* The line a drag is drawing, in signal blue: yours. */
.lp-board .lp-band { stroke: var(--pick); stroke-width: 2.5px; stroke-dasharray: 6 5; stroke-linecap: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.lp-board .lp-band.snapped { stroke-dasharray: none; }
.lp-board .lp-band.refused { stroke: var(--bad); }

/* Dots: a paper disc ringed in graphite, its number of lines still to draw. */
.lp-board .lp-dot { cursor: pointer; }
.lp-board .lp-disc { fill: var(--paper-2); stroke: var(--ink); stroke-width: 1.6px; vector-effect: non-scaling-stroke; transition: fill var(--m-quick, 150ms) ease, r var(--m-quick, 150ms) ease; }
.lp-board .lp-num { font: 700 38px/1 var(--ui); font-variant-numeric: proportional-nums lining-nums; fill: var(--ink); text-anchor: middle; dominant-baseline: alphabetic; pointer-events: none; }
/* A dot with all its lines: a small graphite point (with "Fade finished dots" on). */
.lp-board .lp-dot.dim .lp-disc { r: 11px; fill: var(--ink); stroke: none; opacity: .55; }
.lp-board .lp-dot.full:not(.dim) .lp-num { fill: var(--soft); }
/* Picked (a tap waiting for its other end), and where a drag would land: signal blue, yours. */
.lp-board .lp-dot.picked .lp-disc { fill: var(--pick); stroke: var(--pick); }
.lp-board .lp-dot.picked .lp-num { fill: var(--paper-2); }
.lp-board .lp-dot.snap .lp-disc { stroke: var(--pick); stroke-width: 3px; }
.lp-board .lp-cursor { fill: none; stroke: var(--pick); stroke-width: 2.5px; vector-effect: non-scaling-stroke; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .pk .play:not(.solved) .lp-board .lp-dot:not(.dim):hover .lp-disc { stroke-width: 3px; }
}

/* Solved: the dots and lines lift away, leaving the picture. */
.lp-board.done .lp-dots, .lp-board.done .lp-lines, .lp-board.done .lp-band { opacity: 0; }
.lp-board.done .lp-dot { cursor: default; }

@media (prefers-reduced-motion: no-preference) {
  .lp-board .lp-tri { transition: opacity var(--m-pop, 200ms) ease-out; }
  .lp-board .lp-tri.pop { animation: lp-fill calc(var(--m-pop, 200ms) * 1.6) cubic-bezier(.2, .9, .3, 1.25) both; transform-box: fill-box; transform-origin: center; }
  .lp-board .lp-dot.nope > * { animation: lp-nope var(--m-nope, 360ms) ease-in-out; }
  .lp-board.done .lp-dots, .lp-board.done .lp-lines { transition: opacity .5s ease .1s; }
  /* The reveal: a glint crosses the picture from its top left. */
  .lp-board.win .lp-tri.on { animation: lp-glint .9s ease-in-out calc(var(--d, 0ms) + 250ms) both; }
}
@keyframes lp-fill { from { scale: .55; opacity: 0; } }
@keyframes lp-nope { 20% { translate: -14px 0; } 40% { translate: 11px 0; } 60% { translate: -7px 0; } 80% { translate: 4px 0; } }
@keyframes lp-glint { 45% { filter: brightness(1.28) saturate(1.1); } }

/* ── small pictures: a daily's card, How to play, the result ────────────── */
.lp-pic { display: block; overflow: visible; }
.lp-pic .lp-thumb-lines line { stroke: var(--ink); stroke-width: 5; stroke-linecap: round; opacity: .7; }
.lp-pic .lp-thumb-dots circle { fill: var(--ink); }
.house-sheet .example.lp-example svg { width: min(100%, 220px); }
.lp-example-art { min-height: 120px; display: grid; place-items: center; }
.lp-pic .counted circle { fill: var(--paper-2); stroke: var(--ink); stroke-width: 3; }
.lp-pic .counted circle.done { fill: var(--ink); stroke: none; opacity: .55; }
.lp-pic .counted text { font: 700 38px/1 var(--ui); fill: var(--ink); text-anchor: middle; dominant-baseline: alphabetic; }
.lp-pic .lp-thumb-lines line.fixed { stroke: #ffffff; opacity: .35; stroke-width: 2; }
/* The result sheet shows what was made, in place of an emblem. */
.win-art { display: grid; place-items: center; }
.win-art .lp-reveal { width: 150px; height: 130px; filter: drop-shadow(0 6px 10px rgba(60, 48, 20, .22)); }
@media (max-height: 700px) { .win-art .lp-reveal { width: 110px; height: 96px; } }
@media (max-height: 520px) { .win-art .lp-reveal { width: 72px; height: 64px; } }
.pk .solved-title { font-weight: 700; color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .win-art .lp-reveal { animation: lp-reveal calc(var(--m-celebrate, 1000ms) * .7) cubic-bezier(.2, .9, .3, 1.15) both; }
}
@keyframes lp-reveal { from { scale: .6; opacity: 0; } }