/* Squink styles */

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

/* Grid base comes from sq-board/sq-cell. */
.squink-cell{
  display:flex;
  align-items:center;
  justify-content:center;
  font-family: var(--mono);
  color: rgba(230,237,246,0.90);
  border: none;
  position: relative;
}

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

/* Clue feedback (live)
   Prefer changing the number color; outlines are easy to miss/confuse with grid. */
.squink-cell.clue-ok .squink-num{ color: rgba(94,242,194,0.95); }
.squink-cell.clue-over .squink-num{ color: rgba(255,107,107,0.95); }

/* Edge overlays inside cell (same geometry as Loop) */
.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; }

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