/* ─── Liar's Dice SOLO: the setup card (old-games overhaul D2, 2026-10-06) ──────
   The September games' setup card (scuffle.css .sf-setup-*, swarm.css .sw-setup-*): eyebrow, title, blurb,
   option rows, a hint, one Start button. It sits in #ld-solo-setup on the Liar's Dice screen, which themes
   through GameTheme, so every colour here is a --pgr-* token with a dark fallback.

   ⛔ --pgr-selBg is a ~16% TINT of the accent, not a surface you can put text on with --pgr-sel
   (predicely_liars_dice_overhaul: the lobby's blank green ▶ Start). The chosen option is the tint plus an
   accent ring, with the ordinary text colour; the Start button is the --pgr-btn / --pgr-btnTxt pair.

   Its own file so the card does not need a hunk in the shared style.css.

   ⭐ SHARED since 2026-10-07: LCR's solo card (#lcr-solo-setup, lcr_mp.js lcrSolo*) uses these same .lds-*
   classes, and so does Jackpot's (#jackpot-solo-setup, jackpot_mp.js jackpotSolo*, 2026-10-07) and Horse Race's
   (#horserace-solo-setup, horserace_mp.js hrSolo*, 2026-10-08) and Crosswise's (#crosswise-solo-setup, crosswise_mp.js
   cwSolo*, 2026-10-08). One card look for every old game's Solo, not a copy each. */
#ld-solo-setup, #lcr-solo-setup, #jackpot-solo-setup, #horserace-solo-setup, #crosswise-solo-setup { width: 100%; }
.lds-card {
  box-sizing: border-box; max-width: 560px; margin: 24px auto; padding: 26px 28px;
  display: flex; flex-direction: column; gap: 10px;
  font-family: var(--pgr-font, 'Outfit', sans-serif);
  background: var(--pgr-panel, #1b1f27); color: var(--pgr-txt, #e9e8e4);
  border: 1px solid var(--pgr-line, rgba(255, 255, 255, .12));
}
.lds-eyebrow { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--pgr-dim, #9aa); font-weight: 700; }
.lds-title { margin: 0; font-size: 30px; }
.lds-blurb, .lds-hint { margin: 0; line-height: 1.55; font-size: 14px; }
.lds-hint { color: var(--pgr-dim, #9aa); font-size: 12.5px; }
/* The locked-layout hint: both copies in ONE grid cell, the invisible longest one sets the height. */
.lds-hintbox { display: grid; }
.lds-hintbox > .lds-hint { grid-area: 1 / 1; }
.lds-sizer { visibility: hidden; }
.lds-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0; }
.lds-lab { font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--pgr-dim, #9aa); min-width: 90px; }
.lds-opts { display: flex; gap: 6px; flex-wrap: wrap; }
.lds-opt {
  min-width: 48px; height: 38px; padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--pgr-line, rgba(255, 255, 255, .12)); background: transparent; color: var(--pgr-txt, #e9e8e4);
  font: 800 14px var(--pgr-font, 'Outfit', sans-serif); cursor: pointer;
  touch-action: manipulation;   /* a quick second tap is iOS double-tap-to-zoom otherwise */
  transition: background .15s, box-shadow .15s, transform .1s;
}
.lds-opt[data-on="1"] { background: var(--pgr-selBg, rgba(63, 191, 114, .16)); border-color: var(--pgr-sel, #3fbf72); box-shadow: 0 0 0 1px var(--pgr-sel, #3fbf72) inset; }
.lds-opt:not(:disabled):active { transform: translateY(1px); }
/* An option that does not apply to the current choice (Jackpot's round limit on a Chaos table). DISABLED, never
   hidden: the row keeps its size, so the card's height does not change with the choice (locked-layout rule). */
.lds-opt:disabled { opacity: .38; cursor: not-allowed; }
.lds-start {
  height: 48px; margin-top: 6px; border-radius: 12px;
  /* --pgr-btn is often a GRADIENT (Classic: #333841 → #22252b), so the accent ring is what says "primary" */
  background: var(--pgr-btn, #3fbf72); color: var(--pgr-btnTxt, #0d1a12);
  border: 1.5px solid var(--pgr-sel, #3fbf72); box-shadow: 0 0 16px var(--pgr-selBg, rgba(63, 191, 114, .16));
  font: 800 16px var(--pgr-font, 'Outfit', sans-serif); letter-spacing: .04em; cursor: pointer;
  touch-action: manipulation; transition: filter .15s, transform .1s;
}
.lds-start:active { transform: translateY(2px); filter: brightness(.9); }
.lds-start:disabled { cursor: progress; filter: saturate(.6) brightness(.9); }
/* Reserved even when empty, so a refusal never pushes the card taller (the locked-layout rule). */
.lds-err { margin: 0; min-height: 1.4em; font-size: 13px; color: #E24B4A; }
@media (hover: hover) { .lds-start:not(:disabled):hover { filter: brightness(1.1); } .lds-opt:not(:disabled):hover { box-shadow: 0 0 0 2px var(--pgr-sel, #3fbf72); } }
/* .ldt-wrap has no side padding of its own (the table is full-bleed on a phone), so the card brings its gutter. */
@media (max-width: 600px) { .lds-card { margin: 12px; padding: 20px 18px; } .lds-title { font-size: 26px; } }
/* LCR's card sits in the screen's ordinary .wrap, which already brings a side gutter: adding the card's own doubled
   it (36px a side at 375px, measured 2026-10-07). */
@media (max-width: 600px) { #lcr-solo-setup .lds-card, #jackpot-solo-setup .lds-card { margin: 12px 0; } }
/* Horse Race offers SEVEN opponent counts (1–7). At the shared 48px minimum they wrap onto a second line on a 375px
   phone; 38px keeps them on one line there (7 × 38 + 6 × 6 = 302px of the 313 the card has). Horse Race's card sits
   straight on the screen, like Liar's Dice's, so it keeps the card's own 12px gutter. */
#horserace-solo-setup .lds-opt { min-width: 38px; padding: 0 8px; }