/* =============================================================
   GAME: Number Link
   ============================================================= */
.board-numberlink { --cell: min(calc((100vw - 64px) / var(--n, 5)), 60px); --nl-glow: #ff3dd2; }
.nl-grid {
  position: relative; display: grid; grid-template-columns: repeat(var(--n), var(--cell)); grid-auto-rows: var(--cell);
  border-radius: 12px; overflow: hidden; touch-action: none;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255, 61, 210, .08), transparent 65%),
    #0e0b22;
  box-shadow: 0 0 0 2px var(--nl-glow), 0 0 26px rgba(255, 61, 210, .35), 0 14px 30px rgba(0, 0, 0, .45);
}
.nl-row { display: contents; }
.nl-cell {
  position: relative; cursor: pointer; outline: none;
  background: color-mix(in srgb, var(--pc, transparent) 16%, transparent);
  box-shadow: inset 0 0 0 .5px rgba(190, 170, 255, .14);
  transition: background-color .15s;
}
.nl-cell.nl-full { background: color-mix(in srgb, var(--pc) 24%, transparent); }
.nl-cell:focus-visible { box-shadow: inset 0 0 0 3px var(--focus); z-index: 1; }
.nl-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.nl-glow { fill: none; stroke: var(--pc); stroke-width: .58; stroke-linecap: round; stroke-linejoin: round; opacity: .22; }
.nl-line { fill: none; stroke: var(--pc); stroke-width: .3; stroke-linecap: round; stroke-linejoin: round; }
.nl-line.nl-done { stroke-width: .34; }
.nl-dot circle { fill: var(--pc); stroke: rgba(255, 255, 255, .55); stroke-width: .035; }
.nl-dot.nl-done circle { stroke: #fff; stroke-width: .06; }
.nl-dot text {
  font: 800 .36px var(--font-body, sans-serif); fill: #0b0820; text-anchor: middle; dominant-baseline: central;
}
.nl-dot.nl-active circle { animation: nlpulse .7s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes nlpulse { to { transform: scale(1.12); } }
.nl-win { animation: nlwin 1s ease-in-out infinite alternate; }
@keyframes nlwin { to { filter: brightness(1.35) saturate(1.2); } }
.nl-loading {
  width: calc(var(--cell) * var(--n)); height: calc(var(--cell) * var(--n)); border-radius: 12px;
  background: linear-gradient(110deg, #120e2a 30%, #221a48 50%, #120e2a 70%) 0 0 / 300% 100%;
  box-shadow: 0 0 0 2px rgba(255, 61, 210, .5);
  animation: nlshimmer 1.2s linear infinite;
}
@keyframes nlshimmer { to { background-position: -150% 0; } }
.nl-sdot { background: conic-gradient(#ff3b5c 0 25%, #3d8bff 0 50%, #3ddc5c 0 75%, #ffd93d 0); }
.nl-note { color: #ffb3ec; }
.nl-lvl select { max-width: 11em; }