/*
 * hands.css — Dealer row + Active player hand row.
 *
 * Both rows have the SAME structural pattern (label · cards · meta) so the
 * layout reads as predictable stacked rows, not floating panels. The active
 * player row is slightly taller with bigger cards and the gold border that
 * marks "this is the hand you act on".
 *
 * Card image assets:
 *   blackjack/assets/cards/<RANK><SUIT>.png   e.g. AS.png, 10H.png
 *   Face-down cards are rendered as an inline SVG card back (no asset).
 *
 * Stack order:
 *
 *   ──────── (stream bottom — top: var(--stream-height)) ────────
 *     #bj-slot-phase       status pill
 *     #bj-slot-dealer      DEALER · [c c c] · 18           (~54px)
 *     #bj-slot-hand        YOU    · [c c c] · $50 · 17 PL  (~70px, gold)
 *     #bj-slot-rail        compact seats
 *     #bj-slot-actions     chips / hit / stand / etc.
 */

/* ── Dealer row — flex child of #bj-slot-dealer ──────────────────────────── */
#bj-dealer-well {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 10px;
    background: rgba(20, 20, 26, 0.75);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: none;
    transition: opacity var(--t-med) var(--ease-out-quint);
}

.bj-dealer-well__label {
    font-size: 10px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--text-tertiary);
    font-weight: 700;
    flex-shrink: 0;
    padding-right: 8px;
    border-right: 1px solid var(--hairline);
}

.bj-dealer-well__cards {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-height: 44px;
    overflow: hidden;
}

.bj-dealer-well__cards .bj-card {
    width: 32px;
    height: 44px;
    margin-left: -12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
}

.bj-dealer-well__cards .bj-card:first-child {
    margin-left: 0;
}

.bj-dealer-well__cards.bj-cards--4 .bj-card { margin-left: -18px; }
.bj-dealer-well__cards.bj-cards--5 .bj-card { margin-left: -22px; }
.bj-dealer-well__cards.bj-cards--6 .bj-card { margin-left: -24px; }
.bj-dealer-well__cards.bj-cards--4 .bj-card:first-child,
.bj-dealer-well__cards.bj-cards--5 .bj-card:first-child,
.bj-dealer-well__cards.bj-cards--6 .bj-card:first-child { margin-left: 0; }

.bj-dealer-well__value {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--gold);
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
    padding: 2px 8px;
    background: var(--gold-soft);
    border-radius: var(--r-sm);
    min-width: 28px;
    text-align: center;
}

.bj-dealer-well__value--em {
    background: var(--gold);
    color: #0a0a0d;
}

/* ── Active hand row — flex child of #bj-slot-hand ───────────────────────── */
/*
 * Full-width row, same structural pattern as the dealer row but taller,
 * gold-bordered, with bet + state alongside the value. Not a floating
 * panel — anchors edge to edge of its slot.
 */
#bj-hand-display {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    pointer-events: none;
}

.bj-hand {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 5px 10px;
    background: rgba(10, 10, 13, 0.55);
    border: 1px solid var(--gold-soft);
    border-radius: var(--r-md);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: var(--shadow-card);
}

.bj-hand--active {
    border-color: var(--gold);
    box-shadow: 0 0 0 1px rgba(201, 165, 106, 0.25),
                var(--shadow-card);
}

/* Left section — name / role label */
.bj-hand__name {
    flex-shrink: 0;
    padding-right: 8px;
    border-right: 1px solid var(--hairline-strong);
    min-width: 36px;
}

.bj-hand__name-label {
    font-size: 10px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 700;
}

/* Middle section — cards row */
.bj-hand__cards {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-height: 60px;
    overflow: hidden;
}

.bj-hand__cards .bj-card {
    width: 44px;
    height: 60px;
    margin-left: -16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.bj-hand__cards .bj-card:first-child { margin-left: 0; }
.bj-hand__cards.bj-cards--4 .bj-card { margin-left: -22px; }
.bj-hand__cards.bj-cards--5 .bj-card { margin-left: -26px; }
.bj-hand__cards.bj-cards--6 .bj-card { margin-left: -28px; }
.bj-hand__cards.bj-cards--4 .bj-card:first-child,
.bj-hand__cards.bj-cards--5 .bj-card:first-child,
.bj-hand__cards.bj-cards--6 .bj-card:first-child { margin-left: 0; }

/* Right section — bet · value · state.
 * min-width:0 lets the meta group give ground before the card row does; the
 * card row is the payload and must never be squeezed to nothing. */
.bj-hand__meta {
    flex-shrink: 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 8px;
    border-left: 1px solid var(--hairline-strong);
}

.bj-hand__meta-bet {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 600;
}

.bj-hand__meta-value {
    font-family: var(--font-mono);
    font-size: 14px;
    color: #0a0a0d;
    background: var(--gold-strong);
    font-weight: 700;
    line-height: 1;
    padding: 2px 8px;
    border-radius: var(--r-sm);
    min-width: 28px;
    text-align: center;
}

.bj-hand__meta-state {
    font-size: 9px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 700;
}

/* Split hands — two hands sit SIDE BY SIDE, three or four wrap to a 2x2
   grid. Stacking them vertically cost 124px (2 hands) to 252px (4 hands) in
   a slot that has ~76px to give, which is what buried the second hand row
   under the seat rail. Wrapping keeps any split shape inside ~2 rows. */
#bj-hand-display.bj-hand-display--split {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
}

#bj-hand-display.bj-hand-display--split .bj-hand {
    flex: 1 1 calc(50% - 2px);
    min-width: 0;
    padding: 4px 8px;
    gap: 6px;
}

#bj-hand-display.bj-hand-display--split .bj-hand__name {
    padding-right: 6px;
    min-width: 0;
}

#bj-hand-display.bj-hand-display--split .bj-hand__name-label {
    font-size: 9px;
    letter-spacing: 0.8px;
}

#bj-hand-display.bj-hand-display--split .bj-hand__cards {
    min-height: 50px;
}

#bj-hand-display.bj-hand-display--split .bj-hand__cards .bj-card {
    width: 36px;
    height: 50px;
    margin-left: -18px;
}

#bj-hand-display.bj-hand-display--split .bj-hand__cards .bj-card:first-child {
    margin-left: 0;
}

#bj-hand-display.bj-hand-display--split .bj-hand__meta {
    gap: 5px;
    padding-left: 6px;
}

#bj-hand-display.bj-hand-display--split .bj-hand__meta-bet,
#bj-hand-display.bj-hand-display--split .bj-hand__meta-state {
    display: none;   /* bet is in the top HUD; "SPLIT" is self-evident here */
}

/* Short viewports — trim both card rows a notch. */
@media (max-height: 800px) {
    .bj-dealer-well__cards { min-height: 40px; }
    .bj-dealer-well__cards .bj-card { width: 29px; height: 40px; }
    .bj-hand__cards { min-height: 54px; }
    .bj-hand__cards .bj-card { width: 40px; height: 54px; }
    #bj-hand-display.bj-hand-display--split .bj-hand__cards { min-height: 44px; }
    #bj-hand-display.bj-hand-display--split .bj-hand__cards .bj-card {
        width: 32px; height: 44px;
    }
}

/* ── Card (image-or-svg) ─────────────────────────────────────────────────── */
.bj-card {
    position: relative;
    border-radius: 6px;
    background: var(--surface-card);
    overflow: hidden;
    flex-shrink: 0;
    display: block;
    border: 1px solid rgba(0, 0, 0, 0.1);
    animation: bj-card-enter var(--t-med) var(--ease-out-quint);
}

.bj-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bj-card__face-down {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1c2440, #0b1430);
    display: flex;
    align-items: center;
    justify-content: center;
}

.bj-card__face-down svg {
    width: 78%;
    height: 78%;
    opacity: 0.92;
}

.bj-card__placeholder {
    width: 100%;
    height: 100%;
    background: var(--surface-card);
    color: var(--suit-black);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 11px;
}

@keyframes bj-card-enter {
    from {
        transform: translateY(-8px) rotate(-2deg);
        opacity: 0;
    }
    to {
        transform: translateY(0) rotate(0);
        opacity: 1;
    }
}

/* ── 3-2-1 chip-style turn countdown — floats over the action area ──────── */
/*
 * Absolutely positioned over the stack, never participates in row layout
 * so it can't displace any slot heights.
 */
#bj-turn-countdown {
    position: absolute;
    bottom: calc(var(--safe-bottom) + 180px);
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-toast);
    pointer-events: none;
    width: 78px;
    height: 78px;
}

.bj-countdown-chip {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 220ms var(--ease-out-quint),
                transform 220ms var(--ease-out-quint);
}

.bj-countdown-chip.is-visible {
    opacity: 1;
    transform: scale(1);
}