/* ═══════════════════════════════════════════════
   Selah Puzzles — Untangle family styles
   Shared by UNTANGLE, RINGSWAP, KNOTPAR,
   KNOTRUSH, KNOTFIELD and KNOTLADDER.
   ═══════════════════════════════════════════════ */

.score-group{display:flex;flex-direction:column;align-items:center;gap:2px}
.score-label{font-size:9px;font-weight:600;letter-spacing:2px;color:var(--text-dim)}
.score-val{font-size:16px;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums}
.score-val.warn{color:var(--error)}
.score-val.good{color:var(--teal)}

.ug-wrap{width:100%;display:flex;flex-direction:column;align-items:center}

.ug-board{
  width:min(94vw,520px,64vh);
  aspect-ratio:1;
  display:block;
  margin:0 auto;
  border:2px solid rgba(45,50,112,0.12);
  border-radius:var(--radius-lg);
  background:#f4f4f8;
  touch-action:none;
  cursor:default;
}

.ug-edge{
  stroke:var(--blue-soft);
  stroke-width:4;
  stroke-opacity:1;
  stroke-linecap:round;
  pointer-events:none;
}
.ug-edge.crossed{stroke:var(--error);stroke-opacity:.45;stroke-width:3.5}

.ug-node{cursor:grab}
.ug-node:active{cursor:grabbing}
.ug-hit{fill:transparent}
.ug-dot{
  fill:var(--bg-white);
  stroke:var(--navy);
  stroke-width:4;
  transition:fill .12s,stroke .12s;
}
.ug-node.picked .ug-dot{fill:var(--sky);stroke:var(--navy)}
.ug-node:hover .ug-dot{fill:var(--teal-pale)}

.ug-hint{
  font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;
  color:var(--text-dim);min-height:16px;padding-top:12px;text-align:center;
}
.ug-hint.good{color:var(--teal)}
.ug-hint.warn{color:var(--error)}

.ug-bar{width:100%;height:3px;background:var(--bg-surface);border-radius:2px;overflow:hidden;margin-bottom:14px}
.ug-bar i{display:block;height:100%;width:0;background:var(--teal);border-radius:2px;transition:width .25s}
.ug-bar i.warn{background:var(--error)}

/* result card — matches the drill games */
.win-sub{font-size:12px;color:var(--text-mid);line-height:1.5;max-width:280px;margin:0 auto 18px}
.go-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px 28px;justify-content:center;margin-bottom:20px}
.go-stat{display:flex;flex-direction:column;align-items:center;gap:4px}
.go-stat-label{font-size:9px;font-weight:600;letter-spacing:2px;color:var(--text-dim)}
.go-stat-val{font-size:22px;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums}
.go-stat-val.good{color:var(--teal)}

.game{max-width:560px}
.game-hdr{gap:10px;flex-wrap:wrap}

.ug-loading{
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:600;letter-spacing:2px;color:var(--text-dim);
  min-height:40px;
}

@media (prefers-reduced-motion:reduce){.ug-dot,.ug-bar i{transition:none}}
@media (max-width:420px){
  .ug-board{width:min(96vw,520px,58vh)}
  .ug-edge{stroke-width:5}
}