/* ═══════════════════════════════════════════════
   Selah Puzzles — Ladder styles
   Shared by KNOTLADDER and FLOWLADDER: the level
   grid on the menu, the header stat groups and
   the result card.
   ═══════════════════════════════════════════════ */

/* ── menu: level picker ── */
.ld-progress{font-size:11px;font-weight:600;letter-spacing:2px;color:var(--text-dim);text-transform:uppercase;margin-top:6px}
.ld-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;width:min(94vw,440px)}
.ld-lvl{
  aspect-ratio:1;border-radius:10px;border:1.5px solid var(--border-md);
  background:var(--bg-white);color:var(--navy);font-family:var(--font);
  font-size:13px;font-weight:700;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;
  transition:all var(--transition);font-variant-numeric:tabular-nums;
}
.ld-lvl:hover{background:var(--bg-subtle);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.ld-lvl.done{background:var(--teal);border-color:var(--teal);color:#fff}
.ld-lvl.done:hover{background:var(--teal-light);border-color:var(--teal-light)}
.ld-lvl.next{border-color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--navy)}
.ld-lvl.next:hover{background:var(--navy);color:#fff}

/* ── game header stat groups (same rules as the untangle family) ── */
.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)}

/* ── result card ── */
.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}

@media (max-width:420px){
  .ld-grid{gap:5px;width:min(96vw,440px)}
  .ld-lvl{font-size:12px;border-radius:8px}
}