/* ==========================================================
   Card decks (Settings → "עיצוב הקלפים").
   A deck is just a set of CSS variables on <html> (or on a preview box);
   the nearest ancestor wins, so previews and the table never clash.
   ========================================================== */
:root, .deck-classic {
  --suit-s: #16161a; --suit-c: #16161a; --suit-h: #c8102e; --suit-d: #c8102e;
  --face: linear-gradient(165deg, #ffffff, #f6f2e8 60%, #ece6d6);
  --back: url(../assets/cards/back.webp) center / cover;
  --std: inline; --lp: none;
}
.deck-bright {
  --suit-s: #000; --suit-c: #000; --suit-h: #e3001b; --suit-d: #e3001b;
  --face: #ffffff;
  --back: url(../assets/cards/back-light.webp) center / cover;
  --std: inline; --lp: none;
}
.deck-four {
  --suit-s: #111; --suit-c: #138a3c; --suit-h: #d6001c; --suit-d: #1d4ed8;
  --face: #ffffff;
  --back: url(../assets/cards/back-light.webp) center / cover;
  --std: inline; --lp: none;
}
.deck-jumbo {
  --suit-s: #000; --suit-c: #138a3c; --suit-h: #d6001c; --suit-d: #1d4ed8;
  --face: #ffffff;
  --back: url(../assets/cards/back-light.webp) center / cover;
  --std: none; --lp: inline;
}
.deck-shmuel {
  --suit-s: #16161a; --suit-c: #16161a; --suit-h: #c8102e; --suit-d: #c8102e;
  --face: linear-gradient(165deg, #fffdf6, #fbf3df);
  --back: url(../assets/shmuel/coin-sm.webp) center / 46% no-repeat, url(../assets/cards/back-gold.webp) center / cover;
  --std: inline; --lp: none;
}

.card { background: var(--face); }
.card.back { background: var(--back); }
.card .std, .card .mid:not(.court) { display: var(--std); }
.card .lp { display: var(--lp); }
.card .idx.big { font-size: 30px; letter-spacing: -2px; }
.card .jumbo-rank { font-family: Georgia, 'Times New Roman', serif; font-weight: 700; font-size: 52px; letter-spacing: -3px; }

/* deck picker inside Settings */
.deck-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-top: 6px; }
.deck-opt {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border-radius: 14px;
  background: rgba(0, 0, 0, .25); border: 2px solid var(--line); text-align: center;
}
.deck-opt.on { border-color: var(--gold); background: rgba(247, 201, 72, .14); box-shadow: 0 0 16px rgba(247, 201, 72, .35); }
.deck-opt .pair { display: flex; gap: 4px; direction: ltr; --card-w: 44px; }
.deck-opt .card { box-shadow: 0 3px 8px rgba(0, 0, 0, .4); }
.deck-opt b { font-size: .95rem; }
.deck-opt small { color: var(--muted); font-size: .78rem; line-height: 1.2; }

/* the card shoe shows the chosen back too */
.card-shoe .shoe-cards { background: var(--back); }