/* Loop (Slitherlink) styles */

.loop-wrap{ display:flex; flex-direction:column; gap:14px; }

/* Grid base now comes from /assets/square_grid.css via .sq-board/.sq-cell.
   Keep .loop-grid/.loop-cell only for Loop-specific decoration. */

.loop-cell{
  display:flex;
  align-items:center;
  justify-content:center;
  font-family: var(--mono);
  color: rgba(230,237,246,0.85);
  border: none;
  position: relative;
}


.loop-num{ font-size: 14px; }

/* Edge overlays inside cell */
.edge{
  position:absolute;
  background: rgba(230,237,246,0.10);
}
.edge.h{ left:0; right:0; height: 10px; cursor:pointer; }
.edge.v{ top:0; bottom:0; width: 10px; cursor:pointer; }
.edge.top{ top:-5px; }
.edge.bottom{ bottom:-5px; }
.edge.left{ left:-5px; }
.edge.right{ right:-5px; }

.edge.line{ background: rgba(94,242,194,0.85); }
.edge.x{ background: rgba(255,255,255,0.05); }
.edge.x::after{
  content: '×';
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(255,255,255,0.60);
  font-weight:800;
}

.edge.err{ box-shadow: 0 0 0 2px rgba(255,107,107,0.7) inset; }

.loop-legend{ color: var(--text-2); font-size: 13px; line-height: 1.4; }