/* ═══════════════════════════════════════════════════════════════
   ROYAL PAI GOW POKER — style.css
   Niblem Game Studio · royalgame.fun
   Aesthetic: Luxury Casino · Art Deco · Dark Emerald + Gold
   Fonts: Cinzel (display) · Rajdhani (UI) · Orbitron (numbers)
═══════════════════════════════════════════════════════════════ */

/* ── Reset ─────────────────────────────────────────────────── */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-tap-highlight-color: transparent;
    touch-action: pan-y pinch-zoom;
}

::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-thumb {
    background: rgba(239, 191, 4, .2);
    border-radius: 2px;
}

/* ── Design Tokens ──────────────────────────────────────────── */
:root {
    /* Core palette */
    --gold: #EFBF04;
    --gold2: #c99403;
    --gold-dim: rgba(239, 191, 4, .22);
    --gold-glow: rgba(239, 191, 4, .45);

    --felt: #1a5c1a;
    --felt-dark: #0d2d0d;
    --felt-deeper: #061206;
    --felt-void: #020808;

    --red: #dc2626;
    --red-glow: rgba(220, 38, 38, .4);
    --gem: #00e5a0;
    --gem-dim: rgba(0, 229, 160, .25);

    --card-bg: #fcfbff;
    --card-border: #d4cef0;

    /* Spacing scale */
    --gap-xs: 4px;
    --gap-sm: 8px;
    --gap-md: 12px;
    --gap-lg: 16px;
    --gap-xl: 24px;

    /* Radii */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 18px;
    --r-xl: 24px;
    --r-card: clamp(7px, 1.8vw, 11px);

    /* Card dimensions — sm variant now calc()-based, see .card-face.small */
    --card-w: clamp(52px, 11vw, 72px);
    --card-h: clamp(74px, 15.5vw, 102px);

    /* Typography scale */
    --fs-xs: clamp(0.68em, 1.2vw, 0.75em);
    --fs-sm: clamp(.54em, 1.35vw, .72em);
    --fs-md: clamp(.68em, 1.7vw, .92em);
    --fs-lg: clamp(.85em, 2.1vw, 1.15em);
    --fs-xl: clamp(1.1em, 2.8vw, 1.5em);
    --fs-2xl: clamp(1.4em, 3.5vw, 2em);
    --fs-3xl: clamp(1.8em, 5vw, 3em);

    /* Shadows */
    --shadow-card: 0 6px 18px rgba(0, 0, 0, .65), 0 2px 4px rgba(0, 0, 0, .4);
    --shadow-gold: 0 0 20px rgba(239, 191, 4, .35);
    --shadow-inset: inset 0 0 60px rgba(0, 0, 0, .55);

    /* Transitions */
    --ease-spring: cubic-bezier(.175, .885, .32, 1.275);
    --ease-out: cubic-bezier(.25, .46, .45, .94);
    --ease-in: cubic-bezier(.55, .055, .675, .19);
}

/* ── Body & Background ──────────────────────────────────────── */
body {
    background:
        radial-gradient(ellipse 170% 200% at 50% -15%,
            #1c5c1c 0%, #0a2a0a 28%, #04100a 60%, #020808 100%);
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    font-family: 'Rajdhani', 'Arial Black', sans-serif;
    color: rgba(255, 255, 255, .88);
}

/* Subtle crosshatch texture overlay */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background:
        repeating-linear-gradient(45deg,
            rgba(255, 255, 255, .006) 0,
            rgba(255, 255, 255, .006) 1px,
            transparent 1px,
            transparent 10px),
        repeating-linear-gradient(-45deg,
            rgba(255, 255, 255, .006) 0,
            rgba(255, 255, 255, .006) 1px,
            transparent 1px,
            transparent 10px);
}

/* Art deco corner vignette */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(ellipse 100% 100% at 50% 50%,
            transparent 55%,
            rgba(2, 8, 8, .6) 100%);
}

/* ── App Shell ──────────────────────────────────────────────── */
#app {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(7px, 1.8vh, 13px);
    padding: clamp(10px, 2.5vw, 18px) clamp(10px, 3vw, 16px) 28px;
}

/* ── Header ─────────────────────────────────────────────────── */
.hdr {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-sm);
}

.logo {
    font-family: 'Cinzel', serif;
    font-size: clamp(1em, 4.5vw, 1.75em);
    font-weight: 900;
    color: var(--gold);
    letter-spacing: clamp(1px, .8vw, 5px);
    text-shadow:
        0 0 14px var(--gold2),
        0 0 40px rgba(239, 191, 4, .3);
    white-space: nowrap;
    animation: logoGlow 3s ease-in-out infinite;
}

.logo em {
    color: #fff;
    font-style: normal;
}

@keyframes logoGlow {

    0%,
    100% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.25);
    }
}

.hdr-right {
    display: flex;
    gap: var(--gap-xs);
    align-items: center;
    flex-shrink: 0;
}

/* Coin balance box */
.coins-box {
    background: linear-gradient(145deg, #061206, #0b1a0b);
    border: 1.5px solid rgba(239, 191, 4, .38);
    border-radius: var(--r-sm);
    padding: clamp(5px, 1.3vw, 8px) clamp(10px, 2.5vw, 16px);
    text-align: center;
    min-width: 80px;
}

.coins-box label {
    display: block;
    color: #3d5c3d;
    font-size: var(--fs-xs);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.cv {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(.75em, 2.4vw, 1em);
    font-weight: 900;
    color: var(--gold);
    text-shadow: 0 0 8px var(--gold);
}

@keyframes coinBump {
    0% {
        transform: scale(1);
    }

    45% {
        transform: scale(1.35);
        color: #fff;
        text-shadow: 0 0 22px var(--gold);
    }

    100% {
        transform: scale(1);
    }
}

.cv.bump {
    animation: coinBump .28s var(--ease-spring);
}

/* Icon buttons */
.icon-btn {
    background: linear-gradient(145deg, #0a1a0a, #061206);
    border: 1.5px solid rgba(239, 191, 4, .28);
    border-radius: var(--r-sm);
    color: var(--gold);
    font-size: .92em;
    width: 34px;
    height: 34px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .12s, transform .12s;
}

.icon-btn:hover {
    border-color: var(--gold);
    transform: scale(1.1);
}

.icon-btn:active {
    transform: scale(.95);
}

/* ── Ticker ─────────────────────────────────────────────────── */
.ticker-wrap {
    height: clamp(20px, 4vw, 26px);
    overflow: hidden;
    width: 100%;
    text-align: center;
}

/* ── Action Prompt ───────────────────────────────────────────── */
.action-prompt {
    width: 100%;
    background: linear-gradient(135deg, rgba(239, 191, 4, .08), rgba(239, 191, 4, .04));
    border: 1.5px solid rgba(239, 191, 4, .3);
    border-radius: var(--r-md);
    padding: clamp(8px, 2vw, 12px) clamp(12px, 3vw, 20px);
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all .35s;
    min-height: 46px;
}

.ap-icon {
    font-size: clamp(1.2em, 3.5vw, 1.6em);
    flex-shrink: 0;
    animation: apPulse 1.6s ease-in-out infinite;
}

@keyframes apPulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .65;
        transform: scale(1.15);
    }
}

.ap-text {
    font-family: 'Rajdhani', sans-serif;
    font-size: clamp(0.82em, 2vw, 1em);
    font-weight: 700;
    color: rgba(255, 255, 255, .9);
    letter-spacing: .4px;
    line-height: 1.35;
}

.action-prompt.state-deal {
    border-color: rgba(239, 191, 4, .45);
    background: linear-gradient(135deg, rgba(239, 191, 4, .1), rgba(239, 191, 4, .04));
}

.action-prompt.state-split {
    border-color: rgba(0, 229, 160, .35);
    background: linear-gradient(135deg, rgba(0, 229, 160, .07), transparent);
}

.action-prompt.state-split .ap-icon {
    animation: none;
}

.action-prompt.state-ready {
    border-color: rgba(0, 229, 160, .6);
    background: linear-gradient(135deg, rgba(0, 229, 160, .12), rgba(0, 229, 160, .04));
}

.action-prompt.state-ready .ap-icon {
    animation: apPulse .8s ease-in-out infinite;
}

.action-prompt.state-result {
    border-color: rgba(255, 255, 255, .15);
    background: transparent;
}

.action-prompt.state-result .ap-icon {
    animation: none;
}


.step-indicator {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px 0 2px;
}

.step {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(0.65em, 1.4vw, 0.72em);
    font-weight: 700;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, .22);
    transition: color .3s, text-shadow .3s;
    white-space: nowrap;
}

.step .step-num {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    border: 1.5px solid rgba(255, 255, 255, .14);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9em;
    transition: background .3s, border-color .3s;
}

.step.active {
    color: var(--gold);
    text-shadow: 0 0 10px rgba(239, 191, 4, .4);
}

.step.active .step-num {
    background: rgba(239, 191, 4, .2);
    border-color: var(--gold);
}

.step.done {
    color: rgba(0, 229, 160, .7);
}

.step.done .step-num {
    background: rgba(0, 229, 160, .15);
    border-color: rgba(0, 229, 160, .5);
}

.step-arrow {
    color: rgba(255, 255, 255, .12);
    font-size: .8em;
    flex-shrink: 0;
}

/* When the NEXT step is active, light up the arrow before it */
.step.done+.step-arrow {
    color: rgba(0, 229, 160, .4);
}

.step.active+.step-arrow {
    color: rgba(239, 191, 4, .25);
}

#ticker {
    color: var(--gold);
    font-size: clamp(0.65em, 1.75vw, .78em);
    letter-spacing: 2.5px;
    text-transform: uppercase;
    text-shadow: 0 0 10px var(--gold);
    line-height: clamp(20px, 4vw, 26px);
    transition: opacity .22s, transform .22s;
}

/* ── Paytable Wrapper (collapsible) ─────────────────────────── */
.paytable-wrap {
    width: 100%;
}

.paytable-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(145deg, #0d1a0a, #061206);
    border: 1.5px solid rgba(239, 191, 4, .2);
    border-radius: var(--r-sm);
    padding: clamp(7px, 1.8vw, 10px) clamp(10px, 2.5vw, 16px);
    cursor: pointer;
    transition: border-color .15s, background .15s;
    text-align: left;
}

.paytable-toggle:hover {
    border-color: rgba(239, 191, 4, .4);
    background: linear-gradient(145deg, #121f0f, #0a1a08);
}

.paytable-toggle[aria-expanded="true"] {
    border-color: rgba(239, 191, 4, .35);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
}

.pt-toggle-icon {
    font-size: clamp(.85em, 2.2vw, 1.05em);
    flex-shrink: 0;
}

.pt-toggle-label {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(0.65em, 1.4vw, 0.72em);
    font-weight: 700;
    color: rgba(239, 191, 4, .65);
    letter-spacing: 1.5px;
    flex: 1;
}

.pt-toggle-arrow {
    font-family: 'Cinzel', serif;
    font-size: clamp(0.75em, 2vw, 0.95em);
    color: rgba(239, 191, 4, .4);
    transition: transform .2s;
    flex-shrink: 0;
}

.paytable-toggle[aria-expanded="true"] .pt-toggle-arrow {
    transform: rotate(90deg);
}

/* ── Paytable (Fortune Bonus) ────────────────────────────────── */
.paytable {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    background: radial-gradient(ellipse 100% 100% at 50% 50%, #1a4a1a, #0a2a0a, #04100a);
    border-radius: 0 0 var(--r-sm) var(--r-sm);
    border: 1.5px solid rgba(239, 191, 4, .2);
    border-top: none;
    padding: clamp(5px, 1.4vw, 10px) clamp(9px, 2.2vw, 16px);
    box-shadow: var(--shadow-inset), 0 4px 24px rgba(0, 0, 0, .7);
    gap: 0;
    column-gap: 12px;
    /* Animate open/close */
    overflow: hidden;
    animation: ptSlideDown .2s ease-out;
}

.paytable[hidden] {
    display: none;
}

@keyframes ptSlideDown {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pt-hand {
    font-family: 'Cinzel', serif;
    font-size: clamp(0.65em, 1.2vw, .63em);
    font-weight: 700;
    color: rgba(255, 255, 255, .68);
    letter-spacing: .3px;
    padding: clamp(1.5px, .4vw, 2.5px) 0;
    border-bottom: 1px solid rgba(239, 191, 4, .07);
    align-self: center;
}

.pt-pay {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(0.65em, 1.2vw, .63em);
    font-weight: 900;
    color: var(--gold);
    text-align: right;
    padding: clamp(1.5px, .4vw, 2.5px) 0;
    border-bottom: 1px solid rgba(239, 191, 4, .07);
    align-self: center;
    letter-spacing: 1px;
}

/* Active hand highlight */
.pt-hit .pt-hand,
.pt-hit~.pt-pay {
    color: var(--gold);
    text-shadow: 0 0 10px var(--gold);
    font-size: clamp(0.65em, 1.3vw, .67em);
}

.pt-row.pt-hit {
    background: rgba(239, 191, 4, .09);
    border-radius: 4px;
    animation: ptHitPulse .7s ease-in-out 4;
}

.pt-row.pt-hit .pt-hand {
    color: var(--gold);
    text-shadow: 0 0 10px var(--gold);
    font-weight: 900;
}

.pt-row.pt-hit .pt-pay {
    color: #fff;
    text-shadow: 0 0 12px var(--gold), 0 0 24px var(--gold2);
}

@keyframes ptHitPulse {

    0%,
    100% {
        background: rgba(239, 191, 4, .09);
    }

    50% {
        background: rgba(239, 191, 4, .24);
    }
}

/* Five Aces pulse */
.pt-row.pt-top .pt-hand,
.pt-row.pt-top .pt-pay {
    animation: ptPulse 1s ease-in-out infinite alternate;
}

@keyframes ptPulse {
    from {
        text-shadow: 0 0 6px var(--gold);
    }

    to {
        text-shadow: 0 0 22px var(--gold), 0 0 44px var(--gold2);
    }
}

/* ── Casino Table ───────────────────────────────────────────── */
.table-area {
    width: 100%;
    background:
        radial-gradient(ellipse 110% 120% at 50% 40%,
            #1e5c1e 0%, #0e300e 50%, #061206 100%);
    border-radius: var(--r-xl);
    border: 3px solid rgba(239, 191, 4, .32);
    padding: clamp(10px, 2.5vw, 18px) clamp(8px, 2vw, 14px);
    box-shadow:
        var(--shadow-inset),
        0 8px 40px rgba(0, 0, 0, .8),
        0 0 0 1px rgba(239, 191, 4, .08);
    position: relative;
    overflow: hidden;
}

/* Felt texture radial highlight */
.table-area::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(ellipse 80% 50% at 50% 20%,
            rgba(239, 191, 4, .035) 0%,
            transparent 65%);
    pointer-events: none;
}

/* Art deco center line */
.table-area::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(to bottom,
            transparent 0%,
            rgba(239, 191, 4, .12) 20%,
            rgba(239, 191, 4, .12) 80%,
            transparent 100%);
    transform: translateX(-50%);
    pointer-events: none;
}

/* ── Dealer Zone ─────────────────────────────────────────────── */
.dealer-zone {
    margin-bottom: clamp(8px, 2vw, 14px);
}

.zone-label {
    font-family: 'Orbitron', sans-serif;
    font-size: var(--fs-xs);
    letter-spacing: 3px;
    text-transform: uppercase;
    text-align: center;
    color: rgba(239, 191, 4, .55);
    margin-bottom: clamp(6px, 1.5vw, 10px);
}

.dealer-cards {
    display: flex;
    justify-content: center;
    gap: clamp(4px, 1vw, 8px);
    flex-wrap: nowrap;
    width: 100%;
}

/* Dealer cards scale: 7 cards in full width */
.dealer-cards .card-back,
.dealer-cards .card-face {
    width: clamp(36px, calc((100vw - 80px) / 7.8), 66px);
    height: clamp(51px, calc(((100vw - 80px) / 7.8) * 1.43), 94px);
    flex-shrink: 0;
}

/* ── Divider ─────────────────────────────────────────────────── */
.table-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: clamp(6px, 1.5vw, 12px) 0;
}

.table-divider::before,
.table-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right,
            transparent,
            rgba(239, 191, 4, .3),
            rgba(239, 191, 4, .3),
            transparent);
}

.divider-text {
    font-family: 'Orbitron', sans-serif;
    font-size: var(--fs-xs);
    color: rgba(239, 191, 4, .5);
    letter-spacing: 3px;
    white-space: nowrap;
}

/* ── Player Split Zone ───────────────────────────────────────── */
.player-zone {
    display: grid;
    grid-template-columns: 1fr 28px 1fr;
    /* VS column fixed narrow */
    gap: clamp(4px, 1vw, 8px);
    align-items: start;
    width: 100%;
}

/* Hand drop zones */
.hand-zone {
    border: 2px dashed rgba(239, 191, 4, .18);
    border-radius: var(--r-lg);
    background: rgba(0, 0, 0, .18);
    padding: clamp(7px, 1.8vw, 11px) clamp(5px, 1.2vw, 9px);
    min-height: clamp(130px, 28vw, 190px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    position: relative;
    transition: border-color .2s, background .2s;
    overflow: hidden;
    min-width: 0;
    /* critical: prevents grid blowout */
}

.hand-zone.high-zone {
    grid-column: 1;
}

.hand-zone.low-zone {
    grid-column: 3;
}

.hand-zone.drag-over {
    border-color: var(--gold);
    background: rgba(239, 191, 4, .06);
}

.hand-zone.valid {
    border-color: rgba(0, 229, 160, .5);
}

.hand-zone.invalid {
    border-color: rgba(220, 38, 38, .5);
}

.hand-zone-label {
    font-family: 'Cinzel', serif;
    font-size: clamp(0.65em, 1.25vw, .68em);
    font-weight: 700;
    color: rgba(239, 191, 4, .5);
    letter-spacing: 2px;
    text-align: center;
    margin-bottom: 2px;
}

.hand-zone-sub {
    font-size: clamp(0.65em, 1vw, .54em);
    color: rgba(255, 255, 255, .28);
    letter-spacing: 1px;
    text-align: center;
}

/* Hand zone empty state */
.hand-zone-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.2em, 3vw, 1.8em);
    opacity: .12;
    pointer-events: none;
    user-select: none;
}

.hand-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(3px, .8vw, 6px);
    width: 100%;
}

/* Hand validity badge */
.hand-validity {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(0.65em, .95vw, .52em);
    padding: 3px 9px;
    border-radius: 20px;
    letter-spacing: 1px;
    transition: all .2s;
    white-space: nowrap;
}

.hand-validity.ok {
    background: rgba(0, 229, 160, .12);
    border: 1px solid rgba(0, 229, 160, .4);
    color: var(--gem);
}

.hand-validity.warn {
    background: rgba(220, 38, 38, .1);
    border: 1px solid rgba(220, 38, 38, .35);
    color: #ff6666;
}

.hand-validity.empty {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .25);
}

/* Vs divider between hands */
.vs-divider {
    grid-column: 2;
    align-self: center;
    font-family: 'Cinzel', serif;
    font-size: clamp(0.65em, 1.6vw, .85em);
    color: rgba(239, 191, 4, .35);
    letter-spacing: 1px;
    text-align: center;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    padding: 0;
    margin-top: 40px;
}

/* ── Player Hand (7 source cards) ───────────────────────────── */
.source-zone {
    width: 100%;
    margin-top: clamp(8px, 2vw, 14px);
}

.source-label {
    font-family: 'Orbitron', sans-serif;
    font-size: var(--fs-xs);
    letter-spacing: 3px;
    color: rgba(255, 255, 255, .3);
    text-align: center;
    margin-bottom: clamp(6px, 1.5vw, 10px);
    text-transform: uppercase;
}

.source-cards {
    display: flex;
    justify-content: center;
    gap: clamp(3px, 1vw, 7px);
    flex-wrap: nowrap;
    width: 100%;
    overflow: hidden;
    /* FIX: prevent 320px overflow */
    padding: 2px 0;
}

/* Each source card shrinks proportionally — never overflow container */
.source-cards .card-wrap {
    flex: 1 1 0;
    min-width: 0;
    max-width: clamp(44px, calc((100vw - 80px) / 7), 72px);
}

.source-cards .card-face,
.source-cards .card-back {
    width: 100%;
    max-width: clamp(38px, calc((100vw - 80px) / 7.5), 68px);
    height: clamp(54px, calc(((100vw - 80px) / 7.5) * 1.42), 96px);
}

/* Very narrow phones (320px): allow 2-row wrap as last resort */
@media (max-width: 340px) {
    .source-cards {
        flex-wrap: wrap;
        gap: 3px;
    }

    .source-cards .card-wrap {
        flex: 0 0 calc(14.2% - 3px);
        max-width: none;
    }
}

/* ── Hand result labels ──────────────────────────────────────── */
.hand-result-label {
    font-family: 'Cinzel', serif;
    font-size: clamp(0.65em, 1.1vw, .62em);
    font-weight: 700;
    color: rgba(239, 191, 4, .7);
    letter-spacing: 1.5px;
    text-align: center;
    min-height: 16px;
    transition: all .2s;
}

.hand-result-label.win {
    color: var(--gem);
}

.hand-result-label.lose {
    color: #ff6666;
}

.hand-result-label.push {
    color: rgba(239, 191, 4, .7);
}

/* ── Cards ───────────────────────────────────────────────────── */
.card-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    position: relative;
    transition: transform .15s var(--ease-out);
}

.card-wrap:hover .card-face {
    border-color: rgba(239, 191, 4, .5);
}

/* Card face */
.card-face {
    width: var(--card-w);
    height: var(--card-h);
    border-radius: var(--r-card);
    background: var(--card-bg);
    border: 2px solid var(--card-border);
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(3px, .8vw, 5px);
    font-family: 'Cinzel', serif;
    position: relative;
    overflow: hidden;
    transition: transform .18s var(--ease-out), box-shadow .18s, border-color .18s;
    will-change: transform;
    flex-shrink: 0;
    /* source row cards never shrink below their width */
}

/* Inner shimmer on card */
.card-face::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(145deg,
            rgba(255, 255, 255, .35) 0%,
            transparent 50%);
    pointer-events: none;
}

/*
  Small card variant — used inside hand zones.
  High zone holds 5 cards in ~44% of max-width 620px → ~273px usable.
  We need 5 cards + 4 gaps to fit: card-w = (273 - 4*6) / 5 ≈ 50px.
  Use fluid calc based on 44vw so it scales on all devices.
*/
.card-face.small {
    width: clamp(32px, calc((44vw - 52px) / 5), 52px);
    height: clamp(46px, calc(((44vw - 52px) / 5) * 1.44), 74px);
}

/* Card back */
.card-back {
    width: var(--card-w);
    height: var(--card-h);
    border-radius: var(--r-card);
    background: linear-gradient(145deg, #1a0040, #0d0020);
    border: 1.5px solid rgba(239, 191, 4, .28);
    box-shadow: var(--shadow-card);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}

.card-back::before {
    content: '♔';
    font-family: 'Cinzel', serif;
    font-size: clamp(1.1em, 3.2vw, 1.8em);
    opacity: .22;
    color: var(--gold);
}

.card-back::after {
    content: '';
    position: absolute;
    inset: 5px;
    border: 1px solid rgba(239, 191, 4, .12);
    border-radius: calc(var(--r-card) - 3px);
}

/* Card typography */
.card-rank-top {
    font-size: clamp(.65em, 1.6vw, .95em);
    font-weight: 900;
    line-height: 1;
    align-self: flex-start;
    letter-spacing: -1px;
}

.card-suit-center {
    font-size: clamp(1.15em, 3vw, 1.7em);
    line-height: 1;
    text-align: center;
    align-self: center;
}

.card-rank-bot {
    font-size: clamp(.65em, 1.6vw, .95em);
    font-weight: 900;
    line-height: 1;
    align-self: flex-end;
    transform: rotate(180deg);
    letter-spacing: -1px;
}

.red-suit {
    color: var(--red);
}

.black-suit {
    color: #111;
}

/* ── Card States ─────────────────────────────────────────────── */

/* Selected / In-hand state */
.card-wrap.selected .card-face {
    transform: translateY(-10px);
    box-shadow:
        0 0 0 2.5px var(--gold),
        0 0 22px var(--gold-glow),
        0 14px 30px rgba(0, 0, 0, .6);
    border-color: var(--gold);
}

/* Winning card glow */
.card-wrap.winning .card-face {
    animation: winGlow .65s ease-in-out infinite alternate;
    border-color: var(--gold);
}

.card-wrap.winning.red-win .card-face {
    animation: winGlowRed .65s ease-in-out infinite alternate;
}

@keyframes winGlow {
    from {
        box-shadow: 0 0 0 2px var(--gold), 0 0 12px rgba(239, 191, 4, .4);
    }

    to {
        box-shadow: 0 0 0 3px var(--gold), 0 0 30px rgba(239, 191, 4, .75), 0 0 55px rgba(239, 191, 4, .22);
    }
}

@keyframes winGlowRed {
    from {
        box-shadow: 0 0 0 2px var(--red), 0 0 12px rgba(220, 38, 38, .4);
    }

    to {
        box-shadow: 0 0 0 3px var(--red), 0 0 28px rgba(220, 38, 38, .75);
    }
}

/* Foul — invalid split */
.card-wrap.foul .card-face {
    border-color: rgba(220, 38, 38, .7);
    box-shadow: 0 0 0 2px rgba(220, 38, 38, .5), 0 0 12px rgba(220, 38, 38, .3);
}

/* Near-monster highlight */
.card-wrap.near-big .card-face {
    border-color: rgba(239, 191, 4, .85);
    box-shadow: 0 0 0 2px rgba(239, 191, 4, .6), 0 0 16px rgba(239, 191, 4, .35);
}

/* ── Double-Up Overlay ───────────────────────────────────────── */
#doubleUpOverlay {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(16px, 5vw, 32px);
    padding: clamp(10px, 2.5vw, 18px) 0;
}

@keyframes duFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Double-up card wrapper: normal size, never squeezed */
.du-card-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.du-card-wrap .card-face,
.du-card-wrap .card-back {
    width: clamp(58px, 15vw, 80px);
    height: clamp(83px, 21.5vw, 114px);
    flex-shrink: 0;
}

#dragGhost {
    pointer-events: none;
    z-index: 999;
}

.card-wrap.dragging {
    opacity: .35;
    cursor: grabbing;
}

.card-wrap.dragging .card-face,
.card-wrap.dragging .card-back {
    transform: scale(.9);
}

/* Drop zones: visual feedback when dragging over */
.hand-zone.drag-over {
    border-color: var(--gold) !important;
    background: rgba(239, 191, 4, .08) !important;
    transform: scale(1.02);
    transition: all .15s;
}

.hand-zone.drag-over::before {
    opacity: 1 !important;
}

/* Source cards: show grab cursor when splitting */
.splitting-phase .source-cards .card-wrap {
    cursor: grab;
}

.splitting-phase .source-cards .card-wrap:active {
    cursor: grabbing;
}

/* ── Card Animations ─────────────────────────────────────────── */
@keyframes dealDramatic {
    0% {
        transform: translateY(-90px) rotate(-12deg) scale(.68);
        opacity: 0;
        filter: blur(3px);
    }

    65% {
        filter: blur(0);
    }

    82% {
        transform: translateY(5px) scale(1.05);
    }

    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.card-face.dealing {
    animation: dealDramatic .42s var(--ease-out) both;
}

@keyframes cardDiscard {
    0% {
        transform: translateY(0) rotate(0);
        opacity: 1;
    }

    100% {
        transform: translateY(70px) rotate(20deg);
        opacity: 0;
    }
}

.card-face.discarding {
    animation: cardDiscard .3s var(--ease-in) forwards;
}

@keyframes cardDraw {
    from {
        transform: translateY(-50px) scale(.78);
        opacity: 0;
    }

    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.card-face.drawing {
    animation: cardDraw .35s var(--ease-out) both;
}

@keyframes cardToZone {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(.85);
    }

    100% {
        transform: scale(1);
    }
}

.card-face.moving {
    animation: cardToZone .25s var(--ease-spring);
}

/* Quads celebration */
@keyframes quadPop {
    0% {
        transform: translateY(-36px) scale(.6);
        opacity: 0;
    }

    100% {
        transform: translateY(-10px) scale(1);
        opacity: 1;
    }
}

.card-wrap.quads .card-face {
    animation: quadPop .52s var(--ease-spring);
}

/* ── Select Badge (on source cards) ─────────────────────────── */
.select-badge {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(0.65em, .9vw, .5em);
    font-weight: 900;
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 1px;
    opacity: 0;
    transform: translateY(3px);
    transition: opacity .18s, transform .18s;
}

.card-wrap.in-high .select-badge {
    opacity: 1;
    transform: translateY(0);
    background: var(--gold);
    color: #000;
    content: 'HIGH';
}

.card-wrap.in-low .select-badge {
    opacity: 1;
    transform: translateY(0);
    background: var(--gem);
    color: #000;
}

/* ── Bet Controls ────────────────────────────────────────────── */
.bet-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    align-items: center;
}

.bet-row {
    display: flex;
    align-items: center;
    gap: clamp(8px, 2vw, 14px);
    flex-wrap: wrap;
    justify-content: center;
}

.bet-label {
    font-family: 'Orbitron', sans-serif;
    font-size: var(--fs-xs);
    color: #3d5c3d;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}

.coin-row {
    display: flex;
    gap: clamp(5px, 1.2vw, 9px);
}

/* Coin buttons */
.coin-btn {
    width: clamp(32px, 7.5vw, 44px);
    height: clamp(32px, 7.5vw, 44px);
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(0.65em, 1.2vw, .62em);
    font-weight: 900;
    transition: transform .15s, box-shadow .15s;
    position: relative;
    box-shadow:
        0 4px 10px rgba(0, 0, 0, .55),
        inset 0 2px 0 rgba(255, 255, 255, .28),
        inset 0 -2px 0 rgba(0, 0, 0, .35);
}

.coin-btn::before {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    border: 2px dashed rgba(255, 255, 255, .22);
}

.coin-btn:hover {
    transform: translateY(-4px) scale(1.12);
}

.coin-btn.active {
    transform: translateY(-6px) scale(1.18);
    box-shadow:
        0 10px 24px rgba(0, 0, 0, .65),
        0 0 16px currentColor,
        inset 0 2px 0 rgba(255, 255, 255, .3);
}

.coin-btn:active {
    transform: scale(.95);
}

.c1 {
    background: radial-gradient(circle at 35% 35%, #ff6b6b, #cc0000);
    color: #fff;
}

.c2 {
    background: radial-gradient(circle at 35% 35%, #8888ff, #3333cc);
    color: #fff;
}

.c3 {
    background: radial-gradient(circle at 35% 35%, #66dd66, #228822);
    color: #fff;
}

.c4 {
    background: radial-gradient(circle at 35% 35%, #ff9944, #cc6600);
    color: #fff;
}

.c5 {
    background: radial-gradient(circle at 35% 35%, #ffe044, #cc9900);
    color: #333;
}

.bet-display {
    text-align: center;
}

.bet-display .bd-lbl {
    font-size: var(--fs-xs);
    color: #3d5c3d;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.bet-display .bd-val {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(.9em, 2.8vw, 1.4em);
    font-weight: 900;
    color: var(--gold);
    text-shadow: 0 0 9px var(--gold);
    line-height: 1.1;
}

.max-badge {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(0.65em, .85vw, .46em);
    background: var(--gold);
    color: #000;
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 900;
    letter-spacing: 1px;
    margin-left: 4px;
    vertical-align: middle;
}

/* ── Side Bet Toggle ──────────────────────────────────────────  */
.side-bet-row {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    width: 100%;
    justify-content: center;
}

.side-bet-btn {
    background: linear-gradient(145deg, #1a0a00, #0e0600);
    border: 1.5px solid rgba(239, 191, 4, .28);
    border-radius: var(--r-sm);
    padding: 5px 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: border-color .12s, box-shadow .12s;
}

.side-bet-btn:hover {
    border-color: rgba(239, 191, 4, .6);
    box-shadow: 0 0 12px rgba(239, 191, 4, .2);
}

.side-bet-btn.active {
    border-color: var(--gold);
    background: linear-gradient(145deg, #2a1500, #1a0d00);
    box-shadow: 0 0 16px rgba(239, 191, 4, .3);
}

.side-bet-label {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(0.65em, 1vw, .55em);
    color: rgba(239, 191, 4, .65);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.side-bet-btn.active .side-bet-label {
    color: var(--gold);
}

.side-bet-amount {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(0.65em, .95vw, .52em);
    color: rgba(239, 191, 4, .5);
    letter-spacing: 1px;
}

/* ── Action Buttons ─────────────────────────────────────────── */
.action-row {
    display: flex;
    gap: clamp(6px, 1.5vw, 10px);
    width: 100%;
    position: sticky;
    bottom: 12px;
    z-index: 50;
    /* subtle backdrop so button reads over content when sticky */
    filter: drop-shadow(0 -4px 12px rgba(2, 8, 8, .7));
}

.act-btn {
    flex: 1;
    min-width: 0;
    height: clamp(44px, 11vw, 56px);
    border-radius: var(--r-md);
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(0.65em, 1.75vw, .82em);
    font-weight: 900;
    letter-spacing: clamp(1px, .4vw, 3px);
    text-transform: uppercase;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform .12s, box-shadow .12s;
    border: 2.5px solid;
}

/* Sheen sweep */
.act-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 55%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, .16),
            transparent);
    animation: sheen 3.8s ease-in-out infinite;
}

@keyframes sheen {
    0% {
        left: -100%;
    }

    100% {
        left: 220%;
    }
}

.act-btn:hover:not(:disabled) {
    transform: translateY(-2px);
}

.act-btn:active:not(:disabled) {
    transform: translateY(1px);
}

.act-btn:disabled {
    opacity: .32;
    cursor: not-allowed;
}

/* Deal button */
.btn-deal {
    background: linear-gradient(145deg, #8a6200, #5a3e00);
    border-color: var(--gold);
    color: var(--gold);
    box-shadow: 0 0 20px rgba(239, 191, 4, .38), 0 5px 16px rgba(0, 0, 0, .6);
}

.btn-deal:hover:not(:disabled) {
    box-shadow: 0 0 36px rgba(239, 191, 4, .7);
}

/* Set / Confirm split */
.btn-set {
    background: linear-gradient(145deg, #004422, #002211);
    border-color: var(--gem);
    color: var(--gem);
    box-shadow: 0 0 16px rgba(0, 229, 160, .28);
}

.btn-set:hover:not(:disabled) {
    box-shadow: 0 0 30px rgba(0, 229, 160, .55);
}

/* Auto set (house way) */
.btn-auto {
    background: linear-gradient(145deg, #1a1a00, #0d0d00);
    border-color: rgba(239, 191, 4, .4);
    color: rgba(239, 191, 4, .75);
    flex: 0 0 auto;
    padding: 0 clamp(10px, 2.5vw, 18px);
}

.btn-auto:hover:not(:disabled) {
    border-color: var(--gold);
    color: var(--gold);
}

/* Pulse animation for CTA */
@keyframes btnPulse {

    0%,
    100% {
        box-shadow: 0 0 16px rgba(0, 229, 160, .28);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 36px rgba(0, 229, 160, .65);
        transform: scale(1.03);
    }
}

@keyframes dealPulse {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(239, 191, 4, .38);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 42px rgba(239, 191, 4, .8);
        transform: scale(1.03);
    }
}

.btn-set.pulse {
    animation: btnPulse .9s ease-in-out infinite;
}

/* Deal button pulses when idle on first hand */
.btn-deal.pulse-idle {
    animation: dealPulse 1.8s ease-in-out infinite;
}

/* ── Auto-Set Hint Bar ────────────────────────────────────────  */
#hintBar {
    width: 100%;
    min-height: 28px;
    background: linear-gradient(145deg, #061a1a, #031010);
    border: 1px solid var(--gem-dim);
    border-radius: var(--r-sm);
    padding: clamp(4px, 1vw, 7px) clamp(10px, 2.5vw, 18px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    transition: border-color .25s;
}

.hint-ico {
    font-size: clamp(.75em, 2.2vw, 1.1em);
}

.hint-txt {
    font-family: 'Rajdhani', sans-serif;
    font-size: clamp(0.65em, 1.65vw, .8em);
    color: rgba(0, 229, 160, .82);
    font-weight: 700;
    letter-spacing: .4px;
    flex: 1;
    line-height: 1.4;
}

.hint-toggle {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(0.65em, .95vw, .54em);
    color: rgba(0, 229, 160, .45);
    cursor: pointer;
    letter-spacing: 1px;
    white-space: nowrap;
    transition: color .12s;
}

.hint-toggle:hover {
    color: var(--gem);
}

/* ── Monster Hand Tracker ─────────────────────────────────────  */
.monster-tracker {
    width: 100%;
    background: linear-gradient(145deg, #1a0a00, #0e0600);
    border: 1.5px solid rgba(239, 191, 4, .32);
    border-radius: var(--r-sm);
    padding: clamp(5px, 1.3vw, 9px) clamp(10px, 2.5vw, 17px);
    display: flex;
    align-items: center;
    gap: 10px;
}

.mt-label {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(0.65em, 1vw, .56em);
    color: rgba(239, 191, 4, .65);
    letter-spacing: 1.5px;
    white-space: nowrap;
}

.mt-hands {
    display: flex;
    gap: 5px;
}

.mt-hand {
    background: rgba(0, 0, 0, .4);
    border: 1.5px solid rgba(239, 191, 4, .18);
    border-radius: 4px;
    padding: 3px 7px;
    font-family: 'Cinzel', serif;
    font-size: clamp(0.65em, .95vw, .54em);
    font-weight: 700;
    color: rgba(239, 191, 4, .28);
    transition: all .3s;
    white-space: nowrap;
}

.mt-hand.lit {
    background: rgba(239, 191, 4, .14);
    border-color: rgba(239, 191, 4, .75);
    color: var(--gold);
    box-shadow: 0 0 8px rgba(239, 191, 4, .38);
    animation: mtBounce .5s var(--ease-spring);
}

@keyframes mtBounce {
    0% {
        transform: scale(.78);
    }

    70% {
        transform: scale(1.18);
    }

    100% {
        transform: scale(1);
    }
}

.mt-count {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(0.65em, .88vw, .5em);
    color: rgba(239, 191, 4, .4);
    margin-left: auto;
    white-space: nowrap;
}

.monster-tracker.one-away {
    border-color: var(--gold);
    box-shadow: 0 0 22px rgba(239, 191, 4, .38);
    animation: trackerGlow .75s ease-in-out infinite alternate;
}

@keyframes trackerGlow {
    from {
        box-shadow: 0 0 10px rgba(239, 191, 4, .25);
    }

    to {
        box-shadow: 0 0 32px rgba(239, 191, 4, .65);
    }
}

/* ── Stats Row ───────────────────────────────────────────────── */
.stats-row {
    display: flex;
    gap: clamp(5px, 1.3vw, 9px);
    width: 100%;
}

.stat {
    flex: 1;
    background: linear-gradient(145deg, #061206, #0b1a0b);
    border: 1.5px solid rgba(239, 191, 4, .18);
    border-radius: clamp(6px, 1.5vw, 11px);
    padding: clamp(4px, 1vw, 7px) clamp(4px, 1vw, 8px);
    text-align: center;
}

.stat label {
    display: block;
    color: #3d5c3d;
    font-size: clamp(0.65em, 1vw, .54em);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.stat .sv {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(.66em, 2.1vw, .96em);
    font-weight: 900;
    color: var(--gold);
    text-shadow: 0 0 7px var(--gold);
}

/* ── Badge Row ───────────────────────────────────────────────── */
.badge-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 20px;
    width: 100%;
}

.streak-badge {
    background: rgba(255, 140, 0, .1);
    border: 1px solid rgba(255, 140, 0, .38);
    border-radius: var(--r-sm);
    padding: 2px 12px;
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(0.65em, 1.3vw, .66em);
    font-weight: 900;
    color: #ffaa00;
    display: none;
    letter-spacing: 1px;
}

.streak-badge.on {
    display: block;
    animation: streakGlow 1.1s ease-in-out infinite alternate;
}

@keyframes streakGlow {
    from {
        box-shadow: none;
    }

    to {
        box-shadow: 0 0 12px rgba(255, 140, 0, .42);
    }
}

.push-badge {
    background: rgba(0, 229, 160, .08);
    border: 1px solid rgba(0, 229, 160, .3);
    border-radius: var(--r-sm);
    padding: 2px 12px;
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(0.65em, 1.3vw, .66em);
    font-weight: 900;
    color: var(--gem);
    display: none;
    letter-spacing: 1px;
}

.push-badge.on {
    display: block;
}

/* ── Rank Row ────────────────────────────────────────────────── */
.rank-row {
    display: flex;
    align-items: center;
    gap: 9px;
    background: linear-gradient(145deg, #061206, #040d04);
    border: 1.5px solid rgba(239, 191, 4, .16);
    border-radius: var(--r-sm);
    padding: clamp(5px, 1.3vw, 9px) clamp(12px, 3vw, 20px);
    width: 100%;
}

.rank-icon {
    font-size: clamp(.95em, 2.8vw, 1.4em);
}

.rank-name {
    font-family: 'Cinzel', serif;
    font-size: clamp(0.65em, 1.8vw, .82em);
    font-weight: 900;
    color: rgba(239, 191, 4, .78);
    letter-spacing: 2px;
}

.rank-prog {
    height: 4px;
    flex: 1;
    background: rgba(239, 191, 4, .1);
    border-radius: 2px;
    overflow: hidden;
}

.rank-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold2), var(--gold));
    border-radius: 2px;
    transition: width .7s var(--ease-out);
}

/* ── Fortune Bonus Panel ─────────────────────────────────────── */
.fortune-panel {
    width: 100%;
    background: linear-gradient(145deg, #1a0a00, #0e0500);
    border: 1.5px solid rgba(239, 191, 4, .28);
    border-radius: var(--r-md);
    padding: clamp(7px, 1.8vw, 12px) clamp(10px, 2.5vw, 16px);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0;
    column-gap: 14px;
}

.fortune-panel .fp-hand {
    font-family: 'Cinzel', serif;
    font-size: clamp(0.65em, 1.05vw, .6em);
    font-weight: 700;
    color: rgba(255, 255, 255, .62);
    padding: clamp(1.5px, .4vw, 2.5px) 0;
    border-bottom: 1px solid rgba(239, 191, 4, .06);
}

.fortune-panel .fp-pay {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(0.65em, 1.05vw, .6em);
    font-weight: 900;
    color: var(--gold);
    text-align: right;
    padding: clamp(1.5px, .4vw, 2.5px) 0;
    border-bottom: 1px solid rgba(239, 191, 4, .06);
    letter-spacing: 1px;
}

.fortune-panel .fp-header {
    grid-column: 1 / -1;
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(0.65em, 1.05vw, .58em);
    color: rgba(239, 191, 4, .55);
    letter-spacing: 2px;
    text-align: center;
    margin-bottom: 5px;
    text-transform: uppercase;
}

/* ── Toast ────────────────────────────────────────────────────  */
#toast {
    position: fixed;
    bottom: 12%;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: linear-gradient(145deg, #1a2a0a, #0d1a05);
    border: 1.5px solid rgba(239, 191, 4, .48);
    border-radius: var(--r-md);
    padding: clamp(8px, 2vw, 13px) clamp(14px, 3.5vw, 28px);
    z-index: 310;
    pointer-events: none;
    opacity: 0;
    transition: opacity .22s, transform .22s;
    white-space: nowrap;
    max-width: 90vw;
}

#toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.toast-t {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(0.65em, 1.65vw, .8em);
    color: var(--gold);
    font-weight: 900;
    letter-spacing: 2px;
}

/* ── Win Overlay ─────────────────────────────────────────────── */
#winOverlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    z-index: 350;
    pointer-events: none;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

#winOverlay.pop {
    animation: wPop .52s var(--ease-spring) forwards;
}

#winOverlay.gone {
    animation: wGone .35s var(--ease-in) forwards;
}

@keyframes wPop {
    from {
        transform: translate(-50%, -50%) scale(0) rotate(-8deg);
    }

    to {
        transform: translate(-50%, -50%) scale(1) rotate(0);
    }
}

@keyframes wGone {
    from {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    to {
        transform: translate(-50%, -50%) scale(1.14);
        opacity: 0;
    }
}

.wo-e {
    font-size: clamp(2.2em, 9vw, 4.5em);
    animation: bob .7s ease-in-out infinite alternate;
}

@keyframes bob {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-10px);
    }
}

.wo-t {
    font-family: 'Cinzel', serif;
    font-size: clamp(1.5em, 6vw, 3.4em);
    font-weight: 900;
    color: var(--gold);
    text-shadow: 0 0 26px var(--gold), 0 0 65px var(--gold2);
    letter-spacing: 5px;
}

.wo-h {
    font-family: 'Rajdhani', sans-serif;
    font-size: clamp(.85em, 2.5vw, 1.4em);
    color: rgba(255, 255, 255, .8);
    letter-spacing: 2px;
}

.wo-sub {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(.7em, 2.1vw, 1.15em);
    font-weight: 900;
    color: rgba(255, 255, 255, .9);
}

.wo-coins {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(.9em, 2.8vw, 1.55em);
    font-weight: 900;
    color: #fff;
}

/* Push overlay */
.wo-push .wo-t {
    color: var(--gold);
    font-size: clamp(1.2em, 5vw, 2.6em);
    letter-spacing: 4px;
}

/* Big push streak (>=5) — emerald green */
.wo-pushbig .wo-t {
    color: var(--gem);
    font-size: clamp(1.4em, 5.5vw, 3em);
    letter-spacing: 4px;
    text-shadow: 0 0 26px var(--gem), 0 0 52px rgba(0, 229, 160, .4);
}

/* ── Level Up Toast ──────────────────────────────────────────── */
#lvToast {
    position: fixed;
    bottom: 8%;
    left: 50%;
    transform: translateX(-50%) scale(0);
    background: linear-gradient(145deg, #382200, #1c1000);
    border: 3px solid #ff8800;
    border-radius: var(--r-md);
    padding: clamp(10px, 2.5vw, 17px) clamp(18px, 4.5vw, 32px);
    text-align: center;
    z-index: 325;
    pointer-events: none;
    box-shadow: 0 0 35px rgba(255, 136, 0, .48);
}

#lvToast.pop {
    animation: lvIn .46s var(--ease-spring) forwards;
}

#lvToast.gone {
    animation: lvOut .3s var(--ease-in) forwards;
}

@keyframes lvIn {
    from {
        transform: translateX(-50%) scale(0);
    }

    to {
        transform: translateX(-50%) scale(1);
    }
}

@keyframes lvOut {
    from {
        transform: translateX(-50%) scale(1);
        opacity: 1;
    }

    to {
        transform: translateX(-50%) scale(0);
        opacity: 0;
    }
}

.lv-t {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(.72em, 2.1vw, .98em);
    color: #ff9900;
    font-weight: 900;
    letter-spacing: 2px;
}

.lv-n {
    font-family: 'Cinzel', serif;
    font-size: clamp(.92em, 2.7vw, 1.35em);
    color: #fff;
    font-weight: 900;
    margin-top: 3px;
}

/* ── Effects Layer ───────────────────────────────────────────── */
#flashEl {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 220;
    opacity: 0;
}

#flashEl.on {
    animation: flashAnim .58s ease-out forwards;
}

@keyframes flashAnim {
    0% {
        opacity: 0;
    }

    14% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

#rain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 218;
    overflow: hidden;
}

.rc {
    position: absolute;
    top: -70px;
    animation: rcFall var(--d) ease-in forwards;
}

@keyframes rcFall {
    0% {
        transform: translateY(0) rotate(0);
        opacity: 1;
    }

    85% {
        opacity: 1;
    }

    100% {
        transform: translateY(120vh) rotate(720deg) scale(.35);
        opacity: 0;
    }
}

#sparkCont {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 220;
    overflow: hidden;
}

.sp {
    position: fixed;
    pointer-events: none;
    animation: spFx var(--d, .48s) ease-out forwards;
}

@keyframes spFx {
    0% {
        transform: translate(0, 0) scale(1.4);
        opacity: 1;
    }

    100% {
        transform: translate(var(--dx), var(--dy)) scale(0);
        opacity: 0;
    }
}

/* Screen shake */
@keyframes screenShake {

    0%,
    100% {
        transform: translateX(0);
    }

    15% {
        transform: translateX(-7px);
    }

    30% {
        transform: translateX(7px);
    }

    45% {
        transform: translateX(-4px);
    }

    60% {
        transform: translateX(4px);
    }

    75% {
        transform: translateX(-2px);
    }

    90% {
        transform: translateX(2px);
    }
}

#app.shake {
    animation: screenShake .42s ease-out;
}

/* Streak shake for win/push streak milestones */
@keyframes streakShake {

    0%,
    100% {
        transform: translateX(0) rotate(0deg);
    }

    20% {
        transform: translateX(-4px) rotate(-1deg);
    }

    40% {
        transform: translateX(4px) rotate(1deg);
    }

    60% {
        transform: translateX(-3px) rotate(-.5deg);
    }

    80% {
        transform: translateX(3px) rotate(.5deg);
    }
}

#app.streak-shake {
    animation: streakShake .4s ease-in-out 2;
}

/* RF / Monster win logo flash */
@keyframes logoFlash {

    0%,
    100% {
        color: var(--gold);
        text-shadow: 0 0 14px var(--gold2);
    }

    50% {
        color: #fff;
        text-shadow: 0 0 32px var(--gold), 0 0 65px var(--gold2);
    }
}

#app.monster-win .logo {
    animation: logoFlash .4s ease-in-out 8;
}

/* ── Share Button ─────────────────────────────────────────────── */
#shareBtn {
    display: none;
    width: 100%;
    background: linear-gradient(145deg, #001a40, #000d22);
    border: 1.5px solid rgba(100, 160, 255, .38);
    border-radius: var(--r-sm);
    padding: clamp(7px, 1.8vw, 12px);
    color: #7eb8ff;
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(0.65em, 1.65vw, .76em);
    font-weight: 900;
    letter-spacing: 2px;
    cursor: pointer;
    transition: border-color .12s, box-shadow .12s;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

#shareBtn:hover {
    border-color: rgba(100, 160, 255, .75);
    box-shadow: 0 0 14px rgba(100, 160, 255, .28);
}

@keyframes shareGlow {

    0%,
    100% {
        box-shadow: 0 0 0 rgba(100, 160, 255, 0);
    }

    50% {
        box-shadow: 0 0 20px rgba(100, 160, 255, .55);
    }
}

/* ── Double-up UI ─────────────────────────────────────────────── */
.doubleup-area {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-md);
}

.doubleup-cards {
    display: flex;
    align-items: center;
    gap: clamp(10px, 3vw, 20px);
    justify-content: center;
}

.doubleup-vs {
    font-family: 'Cinzel', serif;
    font-size: clamp(1.1em, 3.5vw, 1.8em);
    color: var(--gold);
    letter-spacing: 3px;
}

.doubleup-player-label,
.doubleup-dealer-label {
    font-family: 'Orbitron', sans-serif;
    font-size: var(--fs-xs);
    color: rgba(239, 191, 4, .5);
    letter-spacing: 2px;
    text-align: center;
    margin-bottom: 5px;
}

/* ── Nav link ─────────────────────────────────────────────────── */
.nav-link {
    width: 100%;
    text-align: center;
    margin-top: 4px;
}

.nav-link a {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(.68em, 1.9vw, .92em);
    color: rgba(255, 215, 0, .38);
    text-decoration: none;
    letter-spacing: 2px;
    transition: color .2s;
}

.nav-link a:hover {
    color: rgba(255, 215, 0, .75);
}

/* ── Responsive Breakpoints ──────────────────────────────────── */

/* Tall mobile — comfortable spacing */
@media (min-height: 800px) {
    #app {
        gap: clamp(10px, 2vh, 16px);
    }
}

/* Short screen — compact everything */
@media (max-height: 700px) {
    #app {
        gap: 5px;
        padding-top: 6px;
        padding-bottom: 14px;
    }

    .table-area {
        padding: 7px 6px;
    }

    :root {
        --card-w: clamp(40px, 9vw, 56px);
        --card-h: clamp(57px, 13vw, 80px);
    }

    .coin-btn {
        width: 26px;
        height: 26px;
        font-size: .4em;
    }

    .coin-row {
        gap: 4px;
    }

    .stats-row {
        gap: 4px;
    }

    .stat {
        padding: 3px;
    }

    .paytable {
        padding: 3px 7px;
    }

    .pt-hand,
    .pt-pay {
        font-size: .4em;
    }

    .hand-zone {
        min-height: 100px;
    }
}

/* Very short screen */
@media (max-height: 580px) {
    .paytable-wrap {
        display: none;
    }

    /* hide entire toggle+table, not just table */
    .monster-tracker {
        display: none;
    }
}

/* Narrow phones */
@media (max-width: 360px) {
    .logo {
        font-size: clamp(.82em, 3.8vw, 1.2em);
    }

    :root {
        --card-w: clamp(36px, 8.5vw, 50px);
        --card-h: clamp(51px, 12vw, 71px);
    }

    .act-btn {
        font-size: .5em;
        letter-spacing: .5px;
    }

    .icon-btn {
        width: 29px;
        height: 29px;
        font-size: .84em;
    }

    .player-zone {
        gap: 3px;
    }

    .player-zone {
        grid-template-columns: 1fr 22px 1fr;
    }
}

/* Wider tablets/desktop */
@media (min-width: 640px) {
    #app {
        max-width: 620px;
    }

    :root {
        --card-w: clamp(60px, 9.5vw, 76px);
        --card-h: clamp(85px, 13.5vw, 108px);
    }
}

/* ── Accessibility ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* Focus rings for keyboard nav */
.act-btn:focus-visible,
.coin-btn:focus-visible,
.icon-btn:focus-visible,
.card-wrap:focus-visible .card-face {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* ── Utility Classes ──────────────────────────────────────────── */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.text-gold {
    color: var(--gold);
}

.text-gem {
    color: var(--gem);
}

.text-red {
    color: var(--red);
}

.text-muted {
    color: rgba(255, 255, 255, .38);
}

.fw-900 {
    font-weight: 900;
}

.font-orb {
    font-family: 'Orbitron', sans-serif;
}

.font-cin {
    font-family: 'Cinzel', serif;
}

.hidden {
    display: none !important;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}