.bs-card {
    --bs-card-red: #bd1d1d;
    --bs-card-black: #111827;
    --bs-card-ink: var(--bs-card-black);
    --bs-card-paper: #ffffff;
    --bs-card-border: #d8deea;
    --bs-card-accent: #1b2f7a;
    --bs-card-shadow: rgba(16, 24, 40, .16);
    position: relative;
    display: inline-flex;
    align-items: stretch;
    justify-content: stretch;
    width: var(--bs-card-w, 82px);
    aspect-ratio: 2.5 / 3.5;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--bs-card-ink);
    vertical-align: top;
    flex: 0 0 var(--bs-card-w, 82px);
}
.bs-card.is-red { --bs-card-ink: var(--bs-card-red); }
.bs-card.is-black { --bs-card-ink: var(--bs-card-black); }
.bs-card.is-disabled { opacity: .45; filter: saturate(.72); }
.bs-card-button { cursor: pointer; }
.bs-card-button:disabled { cursor: default; }
.bs-card-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 8px 14px var(--bs-card-shadow));
}
.bs-card-bg { fill: var(--bs-card-paper); stroke: var(--bs-card-border); stroke-width: 2; }
.bs-card-rank,
.bs-card-suit,
.bs-card-center-rank {
    font-family: "Segoe UI", Arial, sans-serif;
    font-weight: 900;
    fill: currentColor;
}
.bs-card-suit,
.bs-card-center-suit {
    font-family: "Segoe UI Symbol", "Arial Unicode MS", Georgia, serif;
    fill: currentColor;
}
.bs-card-back .bs-card-bg { fill: #1b2f7a; stroke: rgba(255,255,255,.55); }
.bs-card-back-pattern { fill: none; stroke: rgba(255,255,255,.45); stroke-width: 6; }
.bs-card-back-badge-bg { fill: rgba(255,255,255,.92); stroke: rgba(255,255,255,.45); stroke-width: 2; }
.bs-card-back-badge-text {
    fill: #1b2f7a;
    font-family: "Segoe UI", Arial, sans-serif;
    font-weight: 900;
}

.bs-card-set-gewoon {
    --bs-card-red: #b91c1c;
    --bs-card-black: #111827;
    --bs-card-paper: #ffffff;
    --bs-card-border: #d7dde8;
    --bs-card-shadow: rgba(16, 24, 40, .14);
}
.bs-card-set-gewoon .bs-card-bg { fill: #fff; stroke: #d7dde8; stroke-width: 2; }
.bs-card-set-gewoon .bs-card-accent { display: none; }
.bs-card-set-gewoon .bs-card-center-suit { opacity: .92; }
.bs-card-set-gewoon .bs-card-back .bs-card-bg { fill: #25314f; stroke: #d7dde8; stroke-width: 2; }
.bs-card-set-gewoon .bs-card-back-pattern { stroke: rgba(255,255,255,.5); stroke-width: 5; }
.bs-card-set-gewoon .bs-card-back-badge-text { fill: #25314f; }

.bs-card-set-barspelletjes .bs-card-bg { fill: #fffdfa; stroke: #d8deea; }
.bs-card-set-barspelletjes .bs-card-accent { fill: #eef3ff; opacity: .95; }
.bs-card-set-barspelletjes .bs-card-center-suit { opacity: .92; }
.bs-card-set-barspelletjes .bs-card-back .bs-card-bg { fill: #1b2f7a; }
.bs-card-set-barspelletjes .bs-card-back-pattern { stroke: rgba(245,214,75,.62); }

.bs-card-set-clear .bs-card-bg { fill: #f8fafc; stroke: #aeb8c8; stroke-width: 3; }
.bs-card-set-clear .bs-card-rank { font-size: 34px; }
.bs-card-set-clear .bs-card-suit { font-size: 24px; }
.bs-card-set-clear .bs-card-center-suit { opacity: .15; }
.bs-card-set-clear .bs-card-center-rank { fill: currentColor; }
.bs-card-set-clear .bs-card-back .bs-card-bg { fill: #111827; stroke: #cbd5e1; stroke-width: 3; }
.bs-card-set-clear .bs-card-back-pattern { stroke: rgba(255,255,255,.72); }
.bs-card-set-clear .bs-card-back-badge-text { fill: #111827; }

.bs-card-set-kerst {
    --bs-card-red: #b91c1c;
    --bs-card-black: #14532d;
    --bs-card-paper: #fffaf0;
    --bs-card-border: #b91c1c;
    --bs-card-shadow: rgba(20, 83, 45, .22);
}
.bs-card-set-kerst .bs-card-bg { fill: #fffaf0; stroke: #b91c1c; stroke-width: 3; }
.bs-card-set-kerst .bs-card-accent { fill: #dcfce7; opacity: 1; }
.bs-card-set-kerst .bs-card-center-suit { opacity: .9; }
.bs-card-set-kerst .bs-card-svg:before { content: ""; }
.bs-card-set-kerst .bs-card-back .bs-card-bg { fill: #14532d; stroke: #fee2e2; stroke-width: 3; }
.bs-card-set-kerst .bs-card-back-pattern { stroke: rgba(254, 226, 226, .78); stroke-width: 7; }
.bs-card-set-kerst .bs-card-back-badge-bg { fill: #fffaf0; stroke: #facc15; stroke-width: 3; }
.bs-card-set-kerst .bs-card-back-badge-text { fill: #14532d; }

.bs-cardset-picker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    color: #5d6785;
    font-size: 13px;
    font-weight: 900;
}
.bs-cardset-picker select {
    min-height: 32px;
    border: 1px solid #cfd8f1;
    border-radius: 8px;
    padding: 0 8px;
    background: #fff;
    color: #1b2f7a;
    font-weight: 900;
}

@media (max-width: 780px) {
    .bs-cardset-picker span { display: none; }
    .bs-cardset-picker select { min-height: 30px; max-width: 126px; font-size: 12px; }
}