.loop-play {
  background:
    linear-gradient(90deg, rgba(254,85,66,.15) 0 1px, transparent 1px 100%) 0 0 / 22px 100%,
    linear-gradient(rgba(254,85,66,.12) 0 1px, transparent 1px 100%) 0 0 / 100% 22px,
    #fff8f6;
}
.loop-board {
  --size: 5;
  --dots: 11;
  width:min(100%, 650px);
  aspect-ratio:1;
  margin:0 auto;
  padding:15px;
  border:2px solid var(--ink);
  border-radius:8px;
  background:
    radial-gradient(circle at 14% 16%, rgba(254,85,66,.11), transparent 22%),
    radial-gradient(circle at 80% 82%, rgba(245,212,109,.15), transparent 26%),
    var(--paper);
  box-shadow:0 16px 30px rgba(23,34,31,.12), 5px 5px 0 var(--ink);
  display:grid;
  grid-template-columns: repeat(var(--dots), 1fr);
  grid-template-rows: repeat(var(--dots), 1fr);
  gap:0;
}
.loop-dot { align-self:center;justify-self:center;width:8px;aspect-ratio:1;border-radius:50%;background:var(--ink);opacity:.85;z-index:2; }
.loop-cell { display:grid;place-items:center;color:var(--muted);font:950 clamp(1rem,3.5vw,1.7rem)/1 ui-monospace,monospace; }
.loop-cell.clue { color:var(--ink); position:relative; isolation:isolate; }
.loop-cell.clue::before { content:""; position:absolute; width:58%; aspect-ratio:1; border-radius:12px; background:rgba(245,212,109,.18); transform:rotate(-5deg); z-index:-1; }
.loop-cell.bad { color:var(--danger); text-shadow:0 0 0 var(--danger); }
.loop-edge {
  border:0;
  padding:0;
  background:transparent;
  cursor:pointer;
  border-radius:999px;
  position:relative;
}
.loop-edge::before {
  content:"";
  position:absolute;
  inset:33% 8%;
  border-radius:999px;
  background:rgba(23,35,31,.11);
  transition:.1s ease;
}
.loop-edge.v::before { inset:8% 33%; }
.loop-edge.active::before { background:var(--coral); box-shadow:2px 2px 0 var(--ink); }
.loop-edge:hover::before { box-shadow:0 0 0 5px rgba(119,188,210,.2); }
.loop-edge.hint::before { background:var(--yellow); box-shadow:0 0 0 6px rgba(245,212,109,.36), 2px 2px 0 var(--ink); animation: loop-hint .6s ease-in-out infinite alternate; }
.loop-edge.bad::before { background:var(--danger-soft); box-shadow:0 0 0 4px rgba(216,74,58,.22); }
.loop-example { display:grid;grid-template-columns:repeat(2,45px);gap:8px;margin-bottom:12px; }
.loop-example span { aspect-ratio:1;border:2px solid var(--ink);border-radius:10px;background:var(--paper);box-shadow:2px 2px 0 var(--ink);display:grid;place-items:center;font:950 1rem/1 ui-monospace,monospace; }
@keyframes loop-hint { to { transform:scale(1.1); } }
@media (max-width:600px){ .loop-board{ padding:9px;border-radius:8px; } .loop-dot{ width:6px; } }