/* ═══════════════════════════════════════════════════════════════════
   ROYAL THREE CARD POKER — style.css
   Royal Game · niblem.com
   Tasarım: Casino luxury dark, gold/emerald palette
   ═══════════════════════════════════════════════════════════════════ */

/* ── FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700;900&family=Rajdhani:wght@500;600;700&family=Orbitron:wght@700;900&display=swap');

/* ══════════════════════════════════════════════
   1. CSS VARIABLES & RESET
══════════════════════════════════════════════ */
:root {
    /* Palette */
    --gold: #EFBF04;
    --gold2: #c99403;
    --gold-dim: rgba(239, 191, 4, .18);
    --gem: #00e5a0;
    --gem2: #00b87c;
    --gem-dim: rgba(0, 229, 160, .15);
    --red: #e03030;
    --red2: #ff5555;
    --red-dim: rgba(224, 48, 48, .18);
    --felt: #041208;
    --felt2: #071a0d;
    --felt3: #0a2412;
    --felt4: #0d2e16;
    --surface: rgba(255, 255, 255, .04);
    --surface2: rgba(255, 255, 255, .07);
    --border: rgba(239, 191, 4, .22);
    --border2: rgba(239, 191, 4, .10);
    --text: rgba(255, 255, 255, .88);
    --text-dim: rgba(255, 255, 255, .50);
    --text-muted: rgba(255, 255, 255, .28);

    /* Card */
    --card-bg: #fcfbff;
    --card-border: #d0cce8;
    --card-red: #cc1111;
    --card-black: #111111;

    /* Timing */
    --ease-bounce: cubic-bezier(.175, .885, .32, 1.275);
    --ease-snap: cubic-bezier(.25, .46, .45, .94);
    --ease-out: cubic-bezier(.22, .61, .36, 1);

    /* Sizes */
    --card-w: clamp(58px, 13vw, 80px);
    --card-h: clamp(84px, 18.5vw, 114px);
    --card-r: clamp(6px, 1.5vw, 10px);
    --gap-cards: clamp(6px, 1.8vw, 14px);
    --app-max: 560px;
    --section-pad: clamp(8px, 2.5vw, 16px);
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

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

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

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

/* ══════════════════════════════════════════════
   2. BODY & BACKGROUND
══════════════════════════════════════════════ */
body {
    background:
        radial-gradient(ellipse 170% 200% at 50% -12%,
            #1e6030 0%, #0d3018 28%, #051508 60%, var(--felt) 100%);
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    font-family: 'Rajdhani', 'Arial Black', sans-serif;
    color: var(--text);
}

/* Subtle grid texture */
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);
}

/* ══════════════════════════════════════════════
   3. APP WRAPPER
══════════════════════════════════════════════ */
#app {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(6px, 1.6vh, 11px);
    padding: clamp(8px, 2vw, 14px) clamp(8px, 2.5vw, 14px) 28px;
    width: 100%;
    max-width: var(--app-max);
}

/* Screen shake animation */
#app.shake {
    animation: screenShake .45s ease-out;
}

@keyframes screenShake {

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

    12% {
        transform: translateX(-7px)
    }

    28% {
        transform: translateX(7px)
    }

    44% {
        transform: translateX(-5px)
    }

    60% {
        transform: translateX(5px)
    }

    76% {
        transform: translateX(-2px)
    }

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

/* ══════════════════════════════════════════════
   4. HEADER
══════════════════════════════════════════════ */
.hdr {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    /* Prevent any child from overflowing */
    overflow: hidden;
}

.logo {
    font-family: 'Cinzel', serif;
    /* Shrinks aggressively on narrow screens */
    font-size: clamp(.72em, 3.4vw, 1.5em);
    font-weight: 900;
    color: var(--gold);
    letter-spacing: clamp(0px, .4vw, 3px);
    text-shadow: 0 0 14px var(--gold2), 0 0 36px rgba(239, 191, 4, .3);
    white-space: nowrap;
    /* Allow logo to shrink so hdr-right always fits */
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    animation: logoPulse 3.2s ease-in-out infinite;
}

@keyframes logoPulse {

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

    50% {
        filter: brightness(1.22)
    }
}

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

.hdr-right {
    display: flex;
    gap: 4px;
    align-items: center;
    /* NEVER shrink — coins box always visible */
    flex-shrink: 0;
}

/* Coins box */
.coins-box {
    background: linear-gradient(145deg, #061206, #0b1a0b);
    border: 1.5px solid rgba(239, 191, 4, .38);
    border-radius: 10px;
    padding: clamp(4px, 1vw, 8px) clamp(7px, 1.8vw, 14px);
    text-align: center;
    min-width: clamp(62px, 16vw, 80px);
    flex-shrink: 0;
}

.coins-box label {
    display: block;
    color: #3a5a3a;
    font-size: clamp(.38em, .95vw, .54em);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.cv {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(.65em, 2vw, .95em);
    font-weight: 900;
    color: var(--gold);
    text-shadow: 0 0 7px var(--gold);
}

.cv.bump {
    animation: cvBump .24s ease-out
}

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

    50% {
        transform: scale(1.32);
        color: #fff
    }

    100% {
        transform: scale(1)
    }
}

/* Icon buttons */
.icon-btn {
    background: linear-gradient(145deg, #0a1a0a, #061206);
    border: 1.5px solid rgba(239, 191, 4, .28);
    border-radius: 8px;
    color: var(--gold);
    font-size: .88em;
    /* Slightly smaller on very small screens */
    width: clamp(28px, 7vw, 32px);
    height: clamp(28px, 7vw, 32px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .13s;
    flex-shrink: 0;
}

.icon-btn:hover {
    border-color: var(--gold);
    transform: scale(1.08);
    box-shadow: 0 0 10px rgba(239, 191, 4, .3);
}

/* Extra narrow: hide mute btn label text if needed, keep coins always */
@media (max-width:340px) {
    .hdr-right {
        gap: 3px;
    }

    .icon-btn {
        width: 26px;
        height: 26px;
        font-size: .78em;
    }

    .logo {
        font-size: .66em;
        letter-spacing: 0;
    }
}

/* ══════════════════════════════════════════════
   5. TICKER / MARQUEE
══════════════════════════════════════════════ */
.ticker-wrap {
    height: clamp(18px, 3.6vw, 24px);
    overflow: hidden;
    width: 100%;
    text-align: center;
}

#ticker {
    color: var(--gold);
    font-size: clamp(.54em, 1.7vw, .76em);
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 0 8px var(--gold);
    line-height: clamp(18px, 3.6vw, 24px);
    transition: opacity .22s, transform .22s;
}

#ticker.fade-out {
    opacity: 0;
    transform: translateY(6px)
}

/* ══════════════════════════════════════════════
   6. PAYTABLE
══════════════════════════════════════════════ */
.paytable {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    background: radial-gradient(ellipse 100% 100% at 50% 50%,
            #1a4a1a, #0a2a0a, #041008);
    border-radius: clamp(10px, 3vw, 16px);
    border: 2px solid rgba(239, 191, 4, .28);
    padding: clamp(5px, 1.2vw, 8px) clamp(8px, 2vw, 14px);
    box-shadow: inset 0 0 40px rgba(0, 0, 0, .5),
        0 4px 20px rgba(0, 0, 0, .7);
    gap: 0;
}

/* Column headers */
.pt-col-hdr {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(.36em, .95vw, .5em);
    font-weight: 900;
    color: var(--text-muted);
    letter-spacing: 1.5px;
    text-align: center;
    padding: clamp(2px, .5vw, 4px) 0 clamp(4px, 1vw, 6px);
    border-bottom: 1px solid rgba(239, 191, 4, .15);
    text-transform: uppercase;
}

.pt-col-hdr:first-child {
    text-align: left
}

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

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

.pt-pp {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(.40em, 1.1vw, .58em);
    font-weight: 900;
    color: var(--gem);
    text-align: center;
    padding: clamp(1.5px, .4vw, 2.5px) 4px;
    letter-spacing: .8px;
    border-bottom: 1px solid rgba(239, 191, 4, .07);
    align-self: center;
}

/* SF row — always pulsing */
.pt-sf .pt-hand,
.pt-sf .pt-ante,
.pt-sf .pt-pp {
    animation: sfPulse 1.1s ease-in-out infinite alternate;
}

@keyframes sfPulse {
    from {
        text-shadow: 0 0 5px var(--gold)
    }

    to {
        text-shadow: 0 0 20px var(--gold), 0 0 40px var(--gold2)
    }
}

/* Hit highlight */
.pt-hit .pt-hand {
    color: var(--gold);
    text-shadow: 0 0 8px var(--gold);
    font-size: clamp(.46em, 1.25vw, .64em);
}

.pt-hit .pt-ante {
    color: #fff;
    text-shadow: 0 0 8px var(--gold);
    font-size: clamp(.44em, 1.2vw, .62em);
}

.pt-hit .pt-pp {
    color: #fff;
    text-shadow: 0 0 8px var(--gem);
    font-size: clamp(.44em, 1.2vw, .62em);
}

/* ══════════════════════════════════════════════
   7. BET AREA
══════════════════════════════════════════════ */
.bet-area {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 1.5vw, 10px);
    align-items: center;
}

/* Pair Plus toggle — slot-style on/off */
.pp-toggle-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(145deg, #071a12, #04110c);
    border: 1.5px solid rgba(0, 229, 160, .28);
    border-radius: 10px;
    padding: clamp(7px, 1.8vw, 11px) clamp(10px, 2.5vw, 16px);
    gap: 8px;
    position: relative;
    overflow: hidden;
}

/* Slot machine shimmer on PP row */
.pp-toggle-row::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            transparent 0%, rgba(0, 229, 160, .06) 50%, transparent 100%);
    animation: ppShimmer 3s ease-in-out infinite;
}

@keyframes ppShimmer {
    0% {
        transform: translateX(-100%)
    }

    100% {
        transform: translateX(100%)
    }
}

.pp-label-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pp-title {
    font-family: 'Cinzel', serif;
    font-size: clamp(.58em, 1.7vw, .82em);
    font-weight: 900;
    color: var(--gem);
    letter-spacing: 1px;
}

.pp-sub {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(.35em, .85vw, .46em);
    color: rgba(0, 229, 160, .5);
    letter-spacing: 1.5px;
}

/* Toggle switch */
.toggle-switch {
    position: relative;
    width: 52px;
    height: 28px;
    flex-shrink: 0;
    cursor: pointer;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-track {
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background: #1a3a2a;
    border: 1.5px solid rgba(0, 229, 160, .3);
    transition: all .25s;
}

.toggle-track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(0, 229, 160, .4);
    transition: all .25s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .4);
}

.toggle-switch input:checked+.toggle-track {
    background: rgba(0, 229, 160, .18);
    border-color: var(--gem);
    box-shadow: 0 0 12px rgba(0, 229, 160, .4);
}

.toggle-switch input:checked+.toggle-track::after {
    transform: translateX(24px);
    background: var(--gem);
    box-shadow: 0 0 8px var(--gem);
}

/* PP payout mini strip */
.pp-pay-strip {
    display: flex;
    gap: 5px;
    align-items: center;
    flex-wrap: wrap;
}

.pp-pay-item {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(.32em, .8vw, .44em);
    font-weight: 900;
    color: rgba(0, 229, 160, .6);
    letter-spacing: .5px;
    background: rgba(0, 229, 160, .08);
    border: 1px solid rgba(0, 229, 160, .18);
    border-radius: 3px;
    padding: 1px 5px;
}

.pp-pay-item.top {
    color: var(--gem);
    border-color: rgba(0, 229, 160, .4)
}

/* Chip row */
.chip-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(4px, 1.2vw, 9px);
    flex-wrap: wrap;
}

.chip-label {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(.38em, .95vw, .52em);
    color: #3a5a3a;
    letter-spacing: 2px;
    white-space: nowrap;
}

.chip-btn {
    width: clamp(32px, 7.8vw, 44px);
    height: clamp(32px, 7.8vw, 44px);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(.42em, 1.1vw, .58em);
    font-weight: 900;
    transition: all .15s;
    position: relative;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .6),
        inset 0 2px 0 rgba(255, 255, 255, .28),
        inset 0 -2px 0 rgba(0, 0, 0, .4);
}

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

.chip-btn:hover {
    transform: translateY(-3px) scale(1.1)
}

.chip-btn.active {
    transform: translateY(-6px) scale(1.18);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .7), 0 0 16px currentColor;
}

.chip-btn.c1 {
    background: radial-gradient(circle at 35% 35%, #ff7070, #cc1111);
    color: #fff
}

.chip-btn.c2 {
    background: radial-gradient(circle at 35% 35%, #9999ff, #3344cc);
    color: #fff
}

.chip-btn.c3 {
    background: radial-gradient(circle at 35% 35%, #66cc77, #228833);
    color: #fff
}

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

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

/* Bet display row */
.bet-display-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 3vw, 22px);
}

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

.bet-lbl {
    display: block;
    font-size: clamp(.38em, .9vw, .50em);
    color: #3a5a3a;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.bet-val {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(.82em, 2.5vw, 1.22em);
    font-weight: 900;
    color: var(--gold);
    text-shadow: 0 0 8px var(--gold);
    line-height: 1;
}

.bet-val.gem {
    color: var(--gem);
    text-shadow: 0 0 8px var(--gem)
}

.bet-sep {
    width: 1px;
    height: 32px;
    background: linear-gradient(180deg, transparent, rgba(239, 191, 4, .2), transparent);
}

/* Max badge */
.max-badge {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(.32em, .8vw, .44em);
    background: var(--gold);
    color: #000;
    padding: 1px 5px;
    border-radius: 3px;
    font-weight: 900;
    letter-spacing: 1px;
    vertical-align: middle;
    margin-left: 4px;
}

/* ══════════════════════════════════════════════
   8. TABLE AREA
══════════════════════════════════════════════ */
.table-area {
    width: 100%;
    background: radial-gradient(ellipse 100% 100% at 50% 50%,
            #1a4a1a 0%, #0d2d0d 55%, #061206 100%);
    border-radius: clamp(12px, 3.5vw, 20px);
    border: 3px solid rgba(239, 191, 4, .32);
    padding: clamp(8px, 2vw, 14px) clamp(6px, 1.5vw, 10px);
    box-shadow: inset 0 0 60px rgba(0, 0, 0, .6),
        0 6px 32px rgba(0, 0, 0, .8);
    position: relative;
}

.table-area::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(ellipse 90% 55% at 50% 30%,
            rgba(239, 191, 4, .04) 0%, transparent 70%);
    pointer-events: none;
}

/* ── Section labels inside table ── */
.hand-label {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(.38em, .9vw, .52em);
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    padding: 2px 0 4px;
}

.hand-label.dealer {
    color: rgba(255, 255, 255, .35)
}

.hand-label.player {
    color: rgba(239, 191, 4, .6)
}

/* ── Cards row ── */
.cards-row {
    display: flex;
    gap: var(--gap-cards);
    justify-content: center;
    align-items: flex-end;
    min-height: calc(var(--card-h) + 20px);
    padding: 4px 0;
}

/* Dealer row — slightly smaller */
.cards-row.dealer-row {
    min-height: calc(var(--card-h) * .88 + 14px);
}

/* Table divider */
.table-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg,
            transparent, rgba(239, 191, 4, .18), transparent);
    margin: clamp(4px, 1vw, 8px) 0;
}

/* ── Vs badge ── */
.vs-badge {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
}

.vs-badge .vs-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(239, 191, 4, .2), transparent);
}

.vs-badge .vs-text {
    font-family: 'Cinzel', serif;
    font-size: clamp(.58em, 1.6vw, .78em);
    font-weight: 900;
    color: rgba(255, 255, 255, .28);
    letter-spacing: 2px;
}

/* ══════════════════════════════════════════════
   9. PLAYING CARDS
══════════════════════════════════════════════ */
.card-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    -webkit-user-select: none;
    user-select: none;
    position: relative;
}

/* Card face */
.card-face {
    width: var(--card-w);
    height: var(--card-h);
    border-radius: var(--card-r);
    background: var(--card-bg);
    border: 2px solid var(--card-border);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .7),
        inset 0 1px 0 rgba(255, 255, 255, .9);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(3px, .8vw, 5px);
    font-family: 'Cinzel', serif;
    position: relative;
    overflow: hidden;
    transition: transform .2s var(--ease-snap),
        box-shadow .2s,
        border-color .2s;
    will-change: transform;
}

/* Dealer cards — slightly smaller */
.dealer-row .card-face {
    width: calc(var(--card-w) * .88);
    height: calc(var(--card-h) * .88);
}

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

.card-suit-center {
    font-size: clamp(1.2em, 3.2vw, 1.75em);
    line-height: 1;
    text-align: center;
    align-self: center;
}

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

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

.black-suit {
    color: var(--card-black)
}

/* Card back */
.card-back {
    width: var(--card-w);
    height: var(--card-h);
    border-radius: var(--card-r);
    background: linear-gradient(145deg, #1a0050, #0d0028);
    border: 2px solid rgba(239, 191, 4, .3);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .8),
        inset 0 0 0 3px rgba(239, 191, 4, .07);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.dealer-row .card-back {
    width: calc(var(--card-w) * .88);
    height: calc(var(--card-h) * .88);
}

.card-back::before {
    content: '♛';
    font-size: clamp(1.1em, 3vw, 1.7em);
    opacity: .22;
    position: absolute;
    color: var(--gold);
}

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

/* Animated shimmer on card backs */
.card-back .cb-shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            transparent 40%, rgba(255, 255, 255, .07) 50%, transparent 60%);
    animation: cbShimmer 3.5s ease-in-out infinite;
}

@keyframes cbShimmer {
    0% {
        transform: translateX(-120%) rotate(135deg)
    }

    100% {
        transform: translateX(120%) rotate(135deg)
    }
}

/* ── CARD ANIMATIONS ── */

/* Deal animation — dramatic */
@keyframes cardDealDramatic {
    0% {
        transform: translateY(-80px) rotate(-14deg) scale(.68);
        opacity: 0;
        filter: blur(4px);
    }

    55% {
        filter: blur(0)
    }

    80% {
        transform: translateY(4px) scale(1.04)
    }

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

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

.card-back.dealing {
    animation: cardDealDramatic .38s var(--ease-out) both;
}

/* Reveal — flip animation */
@keyframes cardRevealFlip {
    0% {
        transform: rotateY(90deg) scale(.9);
        opacity: .3
    }

    40% {
        transform: rotateY(0deg) scale(1.06)
    }

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

.card-face.revealing {
    animation: cardRevealFlip .36s var(--ease-bounce) both;
    transform-origin: center center;
    backface-visibility: hidden;
}

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

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

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

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

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

.card-face.discarding {
    animation: cardDiscard .28s ease-in forwards;
}

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

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

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

    to {
        box-shadow: 0 0 0 3.5px var(--gold), 0 0 32px rgba(239, 191, 4, .75), 0 0 55px rgba(239, 191, 4, .25)
    }
}

@keyframes winGlowRed {
    from {
        box-shadow: 0 0 0 2.5px #ef4444, 0 0 14px rgba(239, 68, 68, .4)
    }

    to {
        box-shadow: 0 0 0 3.5px #ef4444, 0 0 32px rgba(239, 68, 68, .75)
    }
}

/* Near-miss — border flash */
.card-wrap.near-sf .card-face {
    border-color: rgba(0, 229, 160, .9) !important;
    box-shadow: 0 0 0 2px rgba(0, 229, 160, .6), 0 0 18px rgba(0, 229, 160, .4) !important;
}

/* Qualifier fail glow (dealer) */
.card-face.fail-glow {
    animation: failGlow .5s ease-out;
}

@keyframes failGlow {
    0% {
        box-shadow: 0 0 0 3px rgba(255, 50, 50, .9), 0 0 20px rgba(255, 50, 50, .6)
    }

    100% {
        box-shadow: 0 0 0 0 transparent
    }
}

/* ══════════════════════════════════════════════
   10. HINT BAR
══════════════════════════════════════════════ */
#hintBar {
    width: 100%;
    min-height: 28px;
    background: linear-gradient(145deg, #061a1a, #031010);
    border: 1px solid rgba(0, 229, 160, .22);
    border-radius: 8px;
    padding: clamp(4px, 1vw, 6px) clamp(10px, 2.5vw, 16px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    transition: all .25s;
}

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

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

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

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

/* ══════════════════════════════════════════════
   11. ACTION BUTTONS
══════════════════════════════════════════════ */
.action-row {
    display: flex;
    gap: clamp(5px, 1.4vw, 9px);
    width: 100%;
}

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

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

@keyframes btnSheen {
    0% {
        left: -100%
    }

    100% {
        left: 200%
    }
}

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

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

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

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

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

.btn-play {
    background: linear-gradient(145deg, #1a4400, #0d2a00);
    border-color: var(--gem);
    color: var(--gem);
    box-shadow: 0 0 16px rgba(0, 229, 160, .28);
}

.btn-play:hover:not(:disabled) {
    box-shadow: 0 0 32px rgba(0, 229, 160, .58);
}

.btn-play.pulse {
    animation: playPulse .9s ease-in-out infinite;
}

@keyframes playPulse {

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

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

.btn-fold {
    flex: 0 0 auto;
    min-width: clamp(60px, 16vw, 90px);
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .18);
    color: rgba(255, 255, 255, .55);
}

.btn-fold:hover:not(:disabled) {
    border-color: rgba(255, 80, 80, .5);
    color: rgba(255, 120, 120, .8);
    box-shadow: 0 0 12px rgba(255, 50, 50, .2);
}

/* ══════════════════════════════════════════════
   12. STATS ROW
══════════════════════════════════════════════ */
.stats-row {
    display: flex;
    gap: clamp(4px, 1.2vw, 8px);
    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, 10px);
    padding: clamp(4px, 1vw, 6px) clamp(3px, .8vw, 6px);
    text-align: center;
}

.stat label {
    display: block;
    color: #3a5a3a;
    font-size: clamp(.38em, .9vw, .52em);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.stat .sv {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(.64em, 2vw, .92em);
    font-weight: 900;
    color: var(--gold);
    text-shadow: 0 0 6px var(--gold);
}

/* ══════════════════════════════════════════════
   13. BADGES
══════════════════════════════════════════════ */
.badge-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 20px;
    width: 100%;
}

.streak-badge {
    background: rgba(255, 140, 0, .1);
    border: 1px solid rgba(255, 140, 0, .38);
    border-radius: 8px;
    padding: 2px 12px;
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(.48em, 1.3vw, .64em);
    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: 0 0 0 rgba(255, 140, 0, 0)
    }

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

.qualify-fail-badge {
    background: rgba(255, 50, 50, .1);
    border: 1px solid rgba(255, 80, 80, .35);
    border-radius: 8px;
    padding: 2px 12px;
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(.48em, 1.3vw, .64em);
    font-weight: 900;
    color: #ff6666;
    display: none;
    letter-spacing: 1px;
}

.qualify-fail-badge.on {
    display: block;
    animation: qfBadge .5s var(--ease-bounce);
}

@keyframes qfBadge {
    from {
        transform: scale(0) rotate(-5deg)
    }

    to {
        transform: scale(1) rotate(0)
    }
}

/* ══════════════════════════════════════════════
   14. RANK PROGRESS
══════════════════════════════════════════════ */
.rank-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(145deg, #061206, #040d04);
    border: 1.5px solid rgba(239, 191, 4, .16);
    border-radius: 10px;
    padding: clamp(5px, 1.3vw, 8px) clamp(12px, 3vw, 20px);
    width: 100%;
}

.rank-icon {
    font-size: clamp(.9em, 2.7vw, 1.35em)
}

.rank-name {
    font-family: 'Cinzel', serif;
    font-size: clamp(.58em, 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, .08);
    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);
}

/* ══════════════════════════════════════════════
   15. NEAR-MISS TRACKER (SF / Mini Royal)
══════════════════════════════════════════════ */
.sf-tracker {
    width: 100%;
    background: linear-gradient(145deg, #071a12, #04110c);
    border: 1.5px solid rgba(0, 229, 160, .28);
    border-radius: 10px;
    padding: clamp(5px, 1.2vw, 8px) clamp(10px, 2.5vw, 16px);
    display: flex;
    align-items: center;
    gap: 8px;
}

.sf-tracker.one-away {
    border-color: var(--gem) !important;
    box-shadow: 0 0 22px rgba(0, 229, 160, .4);
    animation: sfTrackerGlow .8s ease-in-out infinite alternate;
}

@keyframes sfTrackerGlow {
    from {
        box-shadow: 0 0 12px rgba(0, 229, 160, .3)
    }

    to {
        box-shadow: 0 0 32px rgba(0, 229, 160, .7)
    }
}

.sf-label {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(.38em, 1vw, .54em);
    color: rgba(0, 229, 160, .65);
    letter-spacing: 1px;
    white-space: nowrap;
}

.sf-pips {
    display: flex;
    gap: 5px;
    align-items: center;
}

.sf-pip {
    width: clamp(10px, 2.5vw, 15px);
    height: clamp(10px, 2.5vw, 15px);
    border-radius: 50%;
    border: 1.5px solid rgba(0, 229, 160, .2);
    background: rgba(0, 0, 0, .4);
    transition: all .3s;
}

.sf-pip.lit {
    background: rgba(0, 229, 160, .2);
    border-color: rgba(0, 229, 160, .8);
    box-shadow: 0 0 8px rgba(0, 229, 160, .5);
    animation: sfPipBounce .45s var(--ease-bounce);
}

@keyframes sfPipBounce {
    0% {
        transform: scale(.7)
    }

    65% {
        transform: scale(1.2)
    }

    100% {
        transform: scale(1)
    }
}

.sf-count {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(.36em, .88vw, .50em);
    color: rgba(0, 229, 160, .45);
    margin-left: auto;
    white-space: nowrap;
}

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

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

.toast-t {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(.56em, 1.6vw, .78em);
    color: var(--gold);
    font-weight: 900;
    letter-spacing: 2px;
    text-align: center;
}

/* ══════════════════════════════════════════════
   17. WIN OVERLAY
══════════════════════════════════════════════ */
#winOverlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    z-index: 360;
    pointer-events: none;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

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

#winOverlay.gone {
    animation: wGone .32s 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: woBob .7s ease-in-out infinite alternate;
}

@keyframes woBob {
    from {
        transform: translateY(0)
    }

    to {
        transform: translateY(-9px)
    }
}

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

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

.wo-a {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(.85em, 2.7vw, 1.45em);
    font-weight: 900;
    color: #fff;
}

/* ══════════════════════════════════════════════
   18. QUALIFY FAIL OVERLAY — DRAMATIQUE
══════════════════════════════════════════════ */
#qualifyOverlay {
    position: fixed;
    top: 35%;
    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: 4px;
    background: linear-gradient(145deg, rgba(70, 0, 0, .88), rgba(30, 0, 0, .92));
    border: 2px solid rgba(255, 80, 80, .6);
    border-radius: 18px;
    padding: clamp(14px, 3.5vw, 22px) clamp(24px, 6vw, 40px);
    backdrop-filter: blur(6px);
    box-shadow: 0 0 50px rgba(255, 50, 50, .4), 0 8px 32px rgba(0, 0, 0, .8);
}

#qualifyOverlay.pop {
    animation: qoPop .5s var(--ease-bounce) forwards;
}

#qualifyOverlay.gone {
    animation: qoGone .35s ease-in forwards;
}

@keyframes qoPop {
    from {
        transform: translate(-50%, -50%) scale(0) rotate(6deg)
    }

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

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

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

.qo-ico {
    font-size: clamp(2em, 7vw, 3.5em)
}

.qo-t {
    font-family: 'Cinzel', serif;
    font-size: clamp(1.1em, 4vw, 2em);
    font-weight: 900;
    color: #ff4444;
    text-shadow: 0 0 20px rgba(255, 50, 50, .8);
    letter-spacing: 3px;
}

.qo-sub {
    font-family: 'Rajdhani', sans-serif;
    font-size: clamp(.72em, 2vw, 1.1em);
    color: rgba(255, 200, 200, .75);
    letter-spacing: 1px;
}

.qo-rescue {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(.65em, 1.8vw, .9em);
    font-weight: 900;
    color: #ffcc00;
    text-shadow: 0 0 10px rgba(255, 200, 0, .6);
    letter-spacing: 1px;
    margin-top: 4px;
}

/* ══════════════════════════════════════════════
   19. LEVEL UP TOAST
══════════════════════════════════════════════ */
#lvToast {
    position: fixed;
    bottom: 9%;
    left: 50%;
    transform: translateX(-50%) scale(0);
    background: linear-gradient(145deg, #382200, #1c1000);
    border: 3px solid #ff8800;
    border-radius: 14px;
    padding: clamp(10px, 2.5vw, 16px) clamp(18px, 4.5vw, 30px);
    text-align: center;
    z-index: 335;
    pointer-events: none;
    box-shadow: 0 0 32px rgba(255, 136, 0, .52);
}

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

#lvToast.gone {
    animation: lvOut .3s 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, .96em);
    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;
}

/* ══════════════════════════════════════════════
   20. EFFECTS — FLASH, RAIN, SPARKS
══════════════════════════════════════════════ */
#flashEl {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 230;
    opacity: 0;
}

#flashEl.on {
    animation: flashA .55s ease-out forwards;
}

@keyframes flashA {
    0% {
        opacity: 0
    }

    12% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

/* Red flash for dealer fail */
#flashEl.fail-on {
    animation: flashFail .6s ease-out forwards;
}

@keyframes flashFail {
    0% {
        opacity: 0
    }

    8% {
        opacity: .7
    }

    100% {
        opacity: 0
    }
}

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

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

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

    85% {
        opacity: 1
    }

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

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

.sp {
    position: fixed;
    pointer-events: none;
    animation: spfx var(--d, .45s) 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
    }
}

/* ══════════════════════════════════════════════
   21. NEAR-MISS REVEAL ANIMATION
══════════════════════════════════════════════ */
/* The "what could have been" card */
.ghost-card {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(var(--card-w) * .7);
    height: calc(var(--card-h) * .7);
    border-radius: 5px;
    background: rgba(0, 229, 160, .08);
    border: 1.5px dashed rgba(0, 229, 160, .5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'Cinzel', serif;
    font-size: .65em;
    color: rgba(0, 229, 160, .6);
    pointer-events: none;
    animation: ghostIn .4s var(--ease-bounce) forwards,
        ghostOut .3s ease-in 1.8s forwards;
    z-index: 10;
}

@keyframes ghostIn {
    from {
        transform: translateX(-50%) translateY(-20px) scale(0);
        opacity: 0
    }

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

@keyframes ghostOut {
    from {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

/* Near-miss banner */
#nearMissBanner {
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    z-index: 345;
    pointer-events: none;
    background: linear-gradient(145deg, rgba(0, 60, 30, .92), rgba(0, 40, 20, .95));
    border: 2px solid rgba(0, 229, 160, .6);
    border-radius: 14px;
    padding: clamp(10px, 2.5vw, 16px) clamp(18px, 5vw, 32px);
    text-align: center;
    backdrop-filter: blur(6px);
    box-shadow: 0 0 40px rgba(0, 229, 160, .35), 0 8px 28px rgba(0, 0, 0, .8);
}

#nearMissBanner.pop {
    animation: nmPop .46s var(--ease-bounce) forwards;
}

#nearMissBanner.gone {
    animation: nmGone .32s ease-in forwards;
}

@keyframes nmPop {
    from {
        transform: translate(-50%, -50%) scale(0) rotate(-4deg)
    }

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

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

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

.nm-ico {
    font-size: clamp(1.6em, 5.5vw, 2.8em)
}

.nm-t {
    font-family: 'Cinzel', serif;
    font-size: clamp(.88em, 3vw, 1.6em);
    font-weight: 900;
    color: var(--gem);
    text-shadow: 0 0 18px rgba(0, 229, 160, .7);
    letter-spacing: 3px;
}

.nm-sub {
    font-family: 'Rajdhani', sans-serif;
    font-size: clamp(.68em, 1.9vw, 1em);
    color: rgba(255, 255, 255, .65);
    letter-spacing: 1px;
}

/* ══════════════════════════════════════════════
   22. SHARE BUTTON
══════════════════════════════════════════════ */
#shareBtn {
    display: none;
    width: 100%;
    background: linear-gradient(145deg, #001a40, #000d22);
    border: 1.5px solid rgba(100, 160, 255, .38);
    border-radius: 10px;
    padding: clamp(7px, 1.8vw, 10px);
    color: #7eb8ff;
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(.56em, 1.6vw, .74em);
    font-weight: 900;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all .13s;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

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

/* ══════════════════════════════════════════════
   23. DAILY GOAL PROGRESS BAR
══════════════════════════════════════════════ */
.goal-bar {
    width: 100%;
    background: linear-gradient(145deg, #1a0a00, #0e0600);
    border: 1.5px solid rgba(239, 191, 4, .3);
    border-radius: 10px;
    padding: clamp(5px, 1.2vw, 8px) clamp(10px, 2.5vw, 16px);
    display: flex;
    align-items: center;
    gap: 10px;
}

.goal-icon {
    font-size: clamp(.85em, 2.4vw, 1.2em);
    flex-shrink: 0
}

.goal-info {
    flex: 1;
    min-width: 0
}

.goal-label {
    font-family: 'Rajdhani', sans-serif;
    font-size: clamp(.52em, 1.4vw, .7em);
    color: rgba(239, 191, 4, .75);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.goal-track {
    height: 5px;
    width: 100%;
    background: rgba(239, 191, 4, .1);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 3px;
}

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

.goal-count {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(.42em, 1.05vw, .56em);
    font-weight: 900;
    color: var(--gold);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════
   24. QUALIFY STATUS BAR (dealer)
══════════════════════════════════════════════ */
.qualify-bar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 20px;
}

.qualify-label {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(.38em, .9vw, .52em);
    letter-spacing: 1.5px;
    padding: 2px 10px;
    border-radius: 4px;
    font-weight: 900;
    animation: qLabelIn .35s var(--ease-bounce);
}

@keyframes qLabelIn {
    from {
        transform: scale(0);
        opacity: 0
    }

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

.qualify-label.yes {
    background: rgba(0, 229, 160, .12);
    border: 1px solid rgba(0, 229, 160, .35);
    color: var(--gem);
}

.qualify-label.no {
    background: rgba(255, 50, 50, .12);
    border: 1px solid rgba(255, 80, 80, .35);
    color: #ff6666;
}

/* ══════════════════════════════════════════════
   25. BG PARTICLE CANVAS
══════════════════════════════════════════════ */
#bgCanvas {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

/* ══════════════════════════════════════════════
   26. FOOTER NAV LINK
══════════════════════════════════════════════ */
.back-link {
    width: 100%;
    text-align: center;
    margin-top: 4px;
}

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

.back-link a:hover {
    color: rgba(255, 215, 0, .8)
}

/* ══════════════════════════════════════════════
   27. RESPONSIVE — SHORT SCREENS
══════════════════════════════════════════════ */
@media (max-height:740px) {
    #app {
        gap: 4px;
        padding-top: 5px;
        padding-bottom: 12px
    }

    .table-area {
        padding: 5px
    }

    .cards-row {
        min-height: calc(var(--card-h) * .75 + 10px)
    }

    :root {
        --card-w: clamp(44px, 10.5vw, 62px);
        --card-h: clamp(64px, 15vw, 90px);
    }

    .paytable {
        padding: 3px 7px
    }

    .pt-hand,
    .pt-ante,
    .pt-pp {
        font-size: .38em
    }

    .stats-row {
        gap: 3px
    }

    .stat {
        padding: 3px
    }
}

/* ══════════════════════════════════════════════
   28. RESPONSIVE — NARROW PHONES
══════════════════════════════════════════════ */
@media (max-width:360px) {

    /* logo/icon-btn sizing handled by clamp values above */
    :root {
        --card-w: clamp(42px, 10vw, 58px);
        --card-h: clamp(60px, 14vw, 84px);
    }

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

    .bet-val {
        font-size: .76em
    }
}

/* ══════════════════════════════════════════════
   29. ACCESSIBILITY
══════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {

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

/* ══════════════════════════════════════════════
   30. UTILITY CLASSES
══════════════════════════════════════════════ */
.hidden {
    display: none !important
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ══════════════════════════════════════════════
   31. PAYTABLE HIT — direct child class fix
   (display:contents parent, class on children)
══════════════════════════════════════════════ */
.pt-hand.pt-hit {
    color: var(--gold);
    text-shadow: 0 0 8px var(--gold);
    font-size: clamp(.46em, 1.25vw, .64em);
}

.pt-ante.pt-hit {
    color: #fff;
    text-shadow: 0 0 8px var(--gold);
    font-size: clamp(.44em, 1.2vw, .62em);
}

.pt-pp.pt-hit {
    color: #fff;
    text-shadow: 0 0 8px var(--gem);
    font-size: clamp(.44em, 1.2vw, .62em);
}

/* ══════════════════════════════════════════════
   32. WIN OVERLAY — LOSS MODE (💔 red variant)
══════════════════════════════════════════════ */
#winOverlay.loss-mode .wo-e {
    filter: grayscale(.3);
}

#winOverlay.loss-mode .wo-a {
    color: rgba(255, 120, 120, .85);
}

/* ══════════════════════════════════════════════
   33. PAYTABLE — hover / clickable state
══════════════════════════════════════════════ */
.paytable {
    transition: border-color .18s, box-shadow .18s;
}

.paytable:hover {
    border-color: rgba(239, 191, 4, .52);
    box-shadow: inset 0 0 40px rgba(0, 0, 0, .5),
        0 4px 20px rgba(0, 0, 0, .7),
        0 0 18px rgba(239, 191, 4, .12);
}

.paytable:active {
    transform: scale(.99);
}

/* Paytable modal scrollbar */
#ptModal div::-webkit-scrollbar {
    width: 3px
}

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

/* ══════════════════════════════════════════════
   34. PAYTABLE TRIGGER BUTTON
══════════════════════════════════════════════ */
.paytable-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: clamp(8px, 2vw, 14px);
    background: linear-gradient(145deg, #0a1a0a, #061206);
    border: 1.5px solid rgba(239, 191, 4, .28);
    border-radius: clamp(10px, 2.5vw, 14px);
    padding: clamp(9px, 2.2vw, 13px) clamp(12px, 3vw, 20px);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
    text-align: left;
}

.paytable-btn:hover {
    border-color: rgba(239, 191, 4, .6);
    box-shadow: 0 0 14px rgba(239, 191, 4, .15);
}

.paytable-btn:active {
    transform: scale(.99)
}

.pt-btn-icon {
    font-size: clamp(1em, 2.8vw, 1.3em);
    flex-shrink: 0;
}

.pt-btn-label {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(.52em, 1.4vw, .72em);
    font-weight: 900;
    color: var(--gold);
    letter-spacing: 2px;
    flex: 1;
}

.pt-btn-top {
    font-family: 'Rajdhani', sans-serif;
    font-size: clamp(.5em, 1.3vw, .68em);
    font-weight: 600;
    color: rgba(0, 229, 160, .55);
    letter-spacing: 1px;
    white-space: nowrap;
}