/* =============================================================
   GAME: Loop (Slitherlink)
   ============================================================= */
.board-loop {
  --lp-glow: #b07cff;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.lp-frame {
  --cols: 8; --rows: 8;
  --cell: min(calc((100vw - 64px) / (var(--cols) + 1)), 54px);
  width: calc(var(--cell) * (var(--cols) + 1)); height: calc(var(--cell) * (var(--rows) + 1));
  border-radius: 16px;
  box-shadow: 0 0 0 2px var(--lp-glow), 0 0 28px rgba(176, 124, 255, .35), 0 12px 30px rgba(0, 0, 0, .35);
}
.lp-svg { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; border-radius: 16px; }
.lp-svg:focus { outline: none; }
.lp-svg:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.lp-frame .lp-bg { fill: #170d30; }
.lp-cell { fill: #22163f; }
.lp-dot { fill: #d9c8ff; }
.lp-dot.lp-bad { fill: var(--t-red); r: .14; }
.lp-clue {
  fill: #f1e9ff; font: 700 .56px var(--font-body); text-anchor: middle; dominant-baseline: middle;
  transition: fill .2s ease, opacity .2s ease;
}
.lp-clue.lp-met { fill: #8a7bb0; }
.lp-clue.lp-bad { fill: var(--t-red); }
.lp-line {
  stroke: #ffd36b; stroke-width: .15; stroke-linecap: round;
  filter: drop-shadow(0 0 .1px rgba(255, 211, 107, .9));
}
.lp-x { stroke: #9b8cc7; stroke-width: .06; stroke-linecap: round; fill: none; }
.lp-pop { animation: lppop .3s ease; }
@keyframes lppop { from { opacity: .2; } }
.lp-cursor { fill: none; stroke: var(--focus); stroke-width: .06; opacity: 0; }
.lp-kb .lp-cursor { opacity: 1; }
.lp-done .lp-line { animation: lpwin 1.2s ease both; }
@keyframes lpwin { 40% { stroke: #fff; stroke-width: .22; } 100% { stroke: #7dffb0; } }
.lp-loading .lp-dot { animation: lpload 1.1s ease-in-out infinite alternate; }
@keyframes lpload { to { fill: #6b5aa0; } }

/* tool switch */
.lp-tools { display: flex; gap: 8px; width: min(100%, 340px); }
.lp-tool {
  flex: 1; min-height: 44px; border: 0; cursor: pointer; border-radius: 12px; color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255, 255, 255, .08), 0 2px 0 rgba(0, 0, 0, .35);
  font: 700 .95rem/1 var(--font-body); transition: transform .1s, box-shadow .15s, background .15s;
}
.lp-tool:hover { box-shadow: inset 0 0 0 1px var(--lp-glow); }
.lp-tool:active { transform: translateY(2px); }
.lp-tool[aria-pressed="true"] { background: linear-gradient(135deg, #8a4dff, #5a24c0); color: #fff; box-shadow: 0 0 0 1px var(--lp-glow), 0 0 16px rgba(176, 124, 255, .45); }
.lp-tool:disabled { opacity: .45; cursor: default; transform: none; }
.lp-tool:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.lp-ico-line { width: 20px; height: 4px; border-radius: 2px; background: #ffd36b; box-shadow: 0 0 6px rgba(255, 211, 107, .7); }
.lp-ico-cross { font-size: 1.3rem; line-height: 1; color: #c9bdf0; }
.lp-hint { text-wrap: balance; margin: 0; font-size: .82rem; color: var(--muted); text-align: center; max-width: 440px; }
.lp-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }
.lp-clock { font-variant-numeric: tabular-nums; }
.lp-count { color: var(--muted); font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .lp-clue { transition: none; }
}