/* smart-lotto.css: the Smart Lotto strip, badge and board rows (prompt 147).
   Every color is a palette variable, so theme-light.css flips it with no
   patch of its own. Loaded by every page that draws the strip. */
.sl-strip { display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; margin:8px 0 10px; padding:8px 10px;
  border:1px solid var(--gold); border-radius:10px; background:var(--bg3); font-size:13px; line-height:1.3;
  font-variant-numeric:tabular-nums; }
.sl-strip .sl-tag { font-size:11px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:var(--gold); }
.sl-strip .sl-cell { display:inline-flex; align-items:baseline; gap:4px; white-space:nowrap; }
.sl-strip .sl-k { color:var(--muted); font-size:12px; }
.sl-strip b { color:var(--text); font-weight:800; font-size:15px; }
.sl-strip b.sl-win { color:var(--green); }
.sl-strip b.sl-mult { color:var(--gold); }
.sl-badge { display:inline-flex; align-items:center; min-height:22px; padding:1px 8px; border:1px solid var(--gold);
  border-radius:999px; color:var(--gold); font-size:11px; font-weight:800; letter-spacing:.3px; white-space:nowrap; text-decoration:none; }
.sl-badge:hover { color:var(--gold-lt, var(--gold)); }

/* The board (templates/smart_lotto.html): stacked rows like Trends. */
.sl-sub { color:var(--gold); font-weight:700; font-size:15px; margin:0 0 4px; }
.sl-explain { color:var(--muted); font-size:13px; margin:0 0 14px; max-width:90ch; }
.sl-inputs { display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; }
.sl-field { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); }
.sl-field input[type="number"] { width:86px; min-height:36px; font:inherit; font-size:16px; color:var(--text); background:var(--bg3);
  border:1px solid var(--border); border-radius:20px; padding:4px 12px; }
.sl-field input[type="range"] { width:150px; accent-color:var(--gold); }
.sl-field output { color:var(--text); font-weight:700; min-width:48px; font-variant-numeric:tabular-nums; }
.sl-row { padding:14px; border-top:1px solid var(--border); }
.sl-row:first-child { border-top:0; }
.sl-row.sl-hl { outline:2px solid var(--gold); outline-offset:-2px; border-radius:12px; }
.sl-row .sl-h { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; }
.sl-row .sl-h a { font-weight:700; font-size:15px; }
.sl-row .sl-meta { color:var(--muted); font-size:12.5px; }
.sl-row .sl-legs { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; margin:8px 0 0; }
.sl-row .sl-leg { border:1px solid var(--border); border-radius:10px; background:var(--bg2); padding:8px 10px; font-size:13px; }
.sl-row .sl-leg b { display:block; font-size:14px; }
.sl-row .sl-leg span { color:var(--muted); }
.sl-row .sl-win-line { font-size:13px; margin:8px 0 0; }
.sl-row .sl-be { font-size:12.5px; color:var(--muted); margin:4px 0 0; }
.sl-row .sl-acts { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 0; }
.sl-row .sl-acts a, .sl-row .sl-acts button { display:inline-flex; align-items:center; min-height:36px; padding:4px 12px; border:1px solid var(--border);
  border-radius:999px; background:var(--bg3); color:var(--text); font:inherit; font-size:13px; font-weight:700; cursor:pointer; text-decoration:none; }
.sl-row .sl-acts a:hover, .sl-row .sl-acts button:hover { border-color:var(--gold); color:var(--gold); }
.sl-more { display:block; margin:12px auto 0; min-height:40px; padding:6px 18px; border:1px solid var(--border); border-radius:999px;
  background:var(--bg3); color:var(--text); font:inherit; font-weight:700; cursor:pointer; }
/* A game page's Smart Lotto section (templates/matchup.html). */
.sl-game .sl-row { padding:10px 0; }
section.copy.sl-game p.sl-gh { color:var(--text); font-size:1.1rem; font-weight:700; margin:20px 0 8px; }
@media (max-width:600px) {
  .sl-strip { gap:4px 10px; padding:8px; }
  .sl-strip b { font-size:14px; }
  .sl-row { padding:12px; }
  .sl-row .sl-legs { grid-template-columns:minmax(0, 1fr); }
  .sl-field input[type="range"] { width:120px; }
}