/*
 * Doge Soda — twenty-one (Diner Twenty-One) board.
 * Diner counter in grape-cola: dealer row on top, your hands below, candy
 * action buttons under them.
 */
.dgs-blackjack-table {
    --bj-card: clamp(54px, 13cqi, 92px);
    container-type: inline-size;
    display: grid;
    gap: clamp(10px, 2.5cqi, 18px);
    width: 100%;
    box-sizing: border-box;
    padding: clamp(12px, 3.5cqi, 26px);
    border-radius: var(--dgs-radius, 18px);
    color: var(--dgs-on-night, #fff4e6);
    font-family: var(--dgs-body, system-ui);
    background:
        radial-gradient(120% 70% at 50% 100%, color-mix(in srgb, var(--tone, #16a34a) 28%, transparent), transparent 70%),
        linear-gradient(180deg, var(--dgs-night-2, #2d1450), var(--dgs-night, #1e0b33));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), 0 12px 30px rgb(8 0 20 / 0.4);
}
.dgs-blackjack-rules {
    margin: 0;
    font-size: 0.82rem;
    text-align: center;
    opacity: 0.78;
}
.dgs-blackjack-side,
.dgs-blackjack-hand { display: grid; justify-items: center; gap: 8px; }
.dgs-blackjack-sidehead { display: flex; align-items: center; gap: 8px; }
.dgs-blackjack-who {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.85;
}
.dgs-blackjack-total {
    min-width: 34px;
    padding: 3px 10px;
    border-radius: 999px;
    font-family: var(--dgs-display, system-ui);
    font-weight: 900;
    text-align: center;
    color: #2a1046;
    background: linear-gradient(180deg, #fff, #ffe2b8);
    box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.15);
}
.dgs-blackjack-cards {
    display: flex;
    justify-content: center;
    min-height: calc(var(--bj-card) * 1.4);
    padding-left: calc(var(--bj-card) * 0.42);
}
.dgs-blackjack-cards .dgs-blackjack-card {
    --card-w: var(--bj-card);
    margin-left: calc(var(--bj-card) * -0.42);
}
.dgs-blackjack-note {
    min-height: 1.3em;
    margin: 0;
    font-size: 0.85rem;
    font-weight: 700;
    text-align: center;
    color: var(--dgs-sun, #ff8a00);
}
.dgs-blackjack-hands {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    min-height: calc(var(--bj-card) * 1.4 + 60px);
}
.dgs-blackjack-hand {
    min-width: min(100%, 150px);
    padding: 10px 12px;
    box-sizing: border-box;
    border-radius: var(--dgs-radius, 18px);
    transition: box-shadow 0.2s ease-out;
}
.dgs-blackjack-hand.is-active { box-shadow: inset 0 0 0 2px var(--dgs-sun, #ff8a00), 0 0 18px color-mix(in srgb, var(--dgs-sun, #ff8a00) 35%, transparent); }
.dgs-blackjack-handfoot { font-size: 0.8rem; opacity: 0.8; }
.dgs-blackjack-tag {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 800;
    text-align: center;
}
.dgs-blackjack-tag--up { color: #183300; background: var(--dgs-lime, #7cc520); }
.dgs-blackjack-tag--even { color: #fff; background: var(--dgs-sky, #1a9be0); }
.dgs-blackjack-tag--down { color: var(--dgs-on-night, #fff4e6); background: rgb(255 255 255 / 0.14); }

.dgs-blackjack-controls {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}
.dgs-blackjack-btn {
    position: relative;
    min-height: 48px;
    overflow: hidden;
    border: 0;
    border-radius: 14px;
    color: #fff;
    font-family: var(--dgs-display, system-ui);
    font-size: 1rem;
    font-weight: 900;
    cursor: pointer;
    box-shadow: inset 0 -4px 0 rgb(0 0 0 / 0.25), 0 4px 12px rgb(8 0 20 / 0.35);
    transition: transform 0.16s ease-out, opacity 0.2s ease-out, filter 0.2s ease-out;
}
.dgs-blackjack-btn::before {
    content: '';
    position: absolute;
    inset: 3px 6px 55% 6px;
    border-radius: 10px 10px 40% 40%;
    background: linear-gradient(180deg, rgb(255 255 255 / 0.45), rgb(255 255 255 / 0));
    pointer-events: none;
}
.dgs-blackjack-btn--hit { background: linear-gradient(180deg, #ffb347, var(--dgs-sun, #ff8a00)); }
.dgs-blackjack-btn--stand { background: linear-gradient(180deg, #ff4b6e, var(--dgs-acc, #d0103a)); }
.dgs-blackjack-btn--double { background: linear-gradient(180deg, #a777ff, var(--dgs-grape, #7b2ff7)); }
.dgs-blackjack-btn--split { background: linear-gradient(180deg, #5cc6ff, var(--dgs-sky, #1a9be0)); }
.dgs-blackjack-btn:hover:not(:disabled) { transform: translateY(-1px); }
.dgs-blackjack-btn:active:not(:disabled) { transform: scale(0.97); }
.dgs-blackjack-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.dgs-blackjack-btn:disabled { cursor: default; opacity: 0.38; filter: saturate(0.4); }

@container (max-width: 420px) {
    .dgs-blackjack-table { --bj-card: clamp(48px, 17cqi, 70px); }
    .dgs-blackjack-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dgs-blackjack-hands { gap: 6px; }
    .dgs-blackjack-hand { min-width: 0; padding: 8px 6px; }
}
@media (prefers-reduced-motion: reduce) {
    .dgs-blackjack-btn,
    .dgs-blackjack-hand { transition: none; }
}

/* ---------- playing cards (markup from cardkit.js) ---------- */
.dgs-blackjack-card {
    --card-w: clamp(56px, 16cqi, 112px);
    position: relative;
    flex: none;
    width: var(--card-w);
    aspect-ratio: 5 / 7;
    perspective: 700px;
}
.dgs-blackjack-card.is-small { --card-w: clamp(30px, 7.5cqi, 46px); }
.dgs-blackjack-card-in {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transition: transform 0.42s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.dgs-blackjack-card.is-down .dgs-blackjack-card-in { transform: rotateY(180deg); }
.dgs-blackjack-card-face,
.dgs-blackjack-card-back {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: calc(var(--card-w) * 0.12);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.dgs-blackjack-card-face {
    color: #24123d;
    background: linear-gradient(165deg, #fffdf7 0%, #fff3e2 58%, #f6e6ff 100%);
    box-shadow: 0 6px 14px rgb(8 0 20 / 0.45), inset 0 0 0 1px rgb(255 255 255 / 0.9),
        inset 0 -4px 0 rgb(123 47 247 / 0.12);
}
.dgs-blackjack-card.is-red .dgs-blackjack-card-face { color: var(--dgs-acc, #d0103a); }
.dgs-blackjack-card-face::after {
    content: '';
    position: absolute;
    inset: 0 0 62% 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgb(255 255 255 / 0.55), rgb(255 255 255 / 0));
    pointer-events: none;
}
.dgs-blackjack-card-corner {
    position: absolute;
    z-index: 1;
    top: 6%;
    left: 8%;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: var(--dgs-display, system-ui);
    font-size: calc(var(--card-w) * 0.21);
    font-weight: 800;
    line-height: 0.95;
}
.dgs-blackjack-card-corner--end {
    top: auto;
    left: auto;
    right: 8%;
    bottom: 6%;
    transform: rotate(180deg);
}
.dgs-blackjack-card-suit { font-size: 0.85em; }
.dgs-blackjack-card-pip {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: calc(var(--card-w) * 0.5);
    line-height: 1;
}
.dgs-blackjack-card.is-small .dgs-blackjack-card-pip,
.dgs-blackjack-card.is-small .dgs-blackjack-card-corner--end { display: none; }
.dgs-blackjack-card.is-small .dgs-blackjack-card-corner {
    inset: 0;
    justify-content: center;
    font-size: calc(var(--card-w) * 0.36);
}
.dgs-blackjack-card-back {
    transform: rotateY(180deg);
    background:
        radial-gradient(circle at 28% 24%, rgb(255 255 255 / 0.4) 0 6%, transparent 7%),
        radial-gradient(circle at 70% 58%, rgb(255 255 255 / 0.22) 0 10%, transparent 11%),
        radial-gradient(circle at 38% 80%, rgb(255 255 255 / 0.18) 0 5%, transparent 6%),
        radial-gradient(circle at 76% 22%, rgb(255 255 255 / 0.16) 0 4%, transparent 5%),
        linear-gradient(150deg, var(--tone, #7b2ff7), var(--dgs-grape, #7b2ff7) 55%, var(--dgs-night-2, #2d1450));
    box-shadow: inset 0 0 0 3px rgb(255 244 230 / 0.9), 0 6px 14px rgb(8 0 20 / 0.45);
}
.dgs-blackjack-card--slot {
    border: 2px dashed rgb(255 244 230 / 0.28);
    border-radius: calc(var(--card-w) * 0.12);
}
.dgs-blackjack-card.is-fresh { animation: dgs-blackjack-deal 0.32s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes dgs-blackjack-deal {
    from { opacity: 0; transform: translateY(-18px) scale(0.95); }
}
@media (prefers-reduced-motion: reduce) {
    .dgs-blackjack-card.is-fresh { animation: none; }
    .dgs-blackjack-card-in { transition: none; }
}