/* Zigue: a grid of cells with thin lines between them, the path as a thick orange line through the centres of its
   cells (cells on the path tinted softly), and the numbers in plum circles above the line. No text under 1rem. */
.board.zigue { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(var(--n, 6), 1fr); grid-template-rows: repeat(var(--n, 6), 1fr); gap: 1px; background: #d9d0e2; border: 3px solid var(--ink); border-radius: 1rem; overflow: hidden; touch-action: none; cursor: pointer; }
.board.zigue:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.zigue .cell { display: grid; place-items: center; background: var(--card); }
.zigue .cell.on { background: #fbe4da; }
.zigue .line { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.zigue polyline { fill: none; stroke: var(--orange); stroke-width: .46; stroke-linecap: round; stroke-linejoin: round; }
.zigue .dot { position: relative; z-index: 2; display: grid; place-items: center; width: 66%; height: 66%;   /* both from the square cell: a width with aspect-ratio collapsed to one text line inside the cell's grid */
  border-radius: 50%; background: var(--brand); color: #fff; font: 900 clamp(1.25rem, 5.5vw, 1.75rem)/1 var(--title); }
.finished .zigue { pointer-events: none; cursor: default; }

/* the number to reach next: a light glowing border, twice (game.js glow) */
@keyframes next-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 196, 64, 0); }
  50% { box-shadow: 0 0 0 .3rem rgba(255, 196, 64, .95), 0 0 .9rem .25rem rgba(255, 196, 64, .55); }
}
.zigue .dot.next { animation: next-glow .8s ease-in-out 2; }
@media (prefers-reduced-motion: reduce) { .zigue .dot.next { animation: none; box-shadow: 0 0 0 .25rem rgba(255, 196, 64, .9); } }

/* the win (game.js celebratePath): a short bright piece of the line runs the path once from the 1 to the last number
   (RUN = 1.6 s each time), and every number's circle jumps when the light reaches it (--at) */
.zigue .shine { fill: none; stroke: #fff6c8; stroke-width: .3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 7 200; stroke-dashoffset: 7; opacity: 0; filter: drop-shadow(0 0 .08px #ffd34d); }
.zigue.won .shine { animation: path-run 1.6s linear 1; }   /* once (Daniel: "faz o brilho só 1x") */
@keyframes path-run { 0% { stroke-dashoffset: 7; opacity: 1; } 96% { opacity: 1; } 100% { stroke-dashoffset: -100; opacity: 0; } }
.zigue.won .dot { animation: dot-jump .45s ease-out var(--at, 0s); }   /* one jump when the light reaches it */
@keyframes dot-jump { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.3) translateY(-8%); box-shadow: 0 0 0 .25rem rgba(255, 196, 64, .9); } }
@media (prefers-reduced-motion: reduce) { .zigue.won .shine, .zigue.won .dot { animation: none; } }