:root {
    --casino-bg: #050505;
    --panel: #11100d;
    --panel-2: #181510;
    --gold: #f4c45b;
    --gold-2: #9c6419;
    --gold-3: #ffe39a;
    --line: rgba(244, 196, 91, .18);
    --muted: #b8aa88;
    --footer-h: 46px;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; overflow-x: hidden; }
body.casino-page {
    margin: 0;
    color: #fff8e7;
    font-family: Arial, Helvetica, sans-serif;
    background:
        radial-gradient(circle at 15% 8%, rgba(244, 196, 91, .13), transparent 26%),
        radial-gradient(circle at 90% 0%, rgba(180, 30, 38, .16), transparent 30%),
        linear-gradient(180deg, #1d1d1d 0%, #111 100%);
    padding-bottom: calc(var(--footer-h) + env(safe-area-inset-bottom));
}

a { color: inherit; }
.casino-shell {
    width: min(100%, 1420px);
    margin: 0 auto;
    padding: 8px 10px calc(var(--footer-h) + 16px);
}

.casino-topbar {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 58px;
}

.lobby-strip-title {
    min-height: 45px;
    margin: 0 -10px 10px;
    padding: 0 14px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    background: linear-gradient(90deg, #15110a 0%, #6c4511 48%, #15110a 100%);
    border-radius: 0;
    box-shadow: none;
}

.lobby-title-left {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 150px;
    font-size: 18px;
    font-weight: 950;
    color: #fff;
    text-shadow: 0 1px 0 rgba(0,0,0,.28);
}

.lobby-robot { font-size: 21px; line-height: 1; color: #ff381f; }

.lobby-live-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff8d8;
    font-size: clamp(16px, 2.2vw, 24px);
    font-weight: 950;
    text-align: center;
    text-shadow: 0 2px 0 rgba(0,0,0,.35), 0 0 12px rgba(255,214,84,.42);
}

.brand-kicker {
    color: var(--gold);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0;
}

.casino-topbar h1 {
    margin: 0;
    font-size: clamp(20px, 3vw, 32px);
    line-height: 1.05;
    font-weight: 950;
}

.icon-btn, .refresh-link {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(180deg, #1d1a12, #090807);
    color: var(--gold-3);
    text-decoration: none;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 0 16px rgba(244,196,91,.08);
}

.wallet-pill {
    min-width: 142px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(180deg, #1b160d, #0b0907);
    text-align: right;
}

.wallet-pill span, .wallet-pill strong { display: block; }
.wallet-pill span { color: var(--muted); font-size: 11px; }
.wallet-pill strong { color: var(--gold-3); font-size: 15px; }

.provider-strip {
    min-height: 48px;
    margin: 0 0 10px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: linear-gradient(90deg, rgba(31,31,31,.96), rgba(19,19,19,.98));
}

.provider-strip small { display: block; color: var(--muted); font-size: 11px; }
.live-dot {
    width: 8px;
    height: 8px;
    display: inline-block;
    margin-right: 6px;
    border-radius: 50%;
    background: #ff314d;
    box-shadow: 0 0 0 rgba(255, 49, 77, .55);
    animation: pulseDot 1.2s infinite;
}

.casino-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 1px 10px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.casino-tabs::-webkit-scrollbar, .chip-row::-webkit-scrollbar { display: none; }

.casino-tab {
    flex: 0 0 auto;
    min-width: 112px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    background: linear-gradient(180deg, #17140f, #0b0a08);
    color: #efe1bd;
    font-weight: 900;
    font-size: 12px;
    white-space: nowrap;
}
.casino-tab i { margin-right: 6px; color: var(--gold); }
.casino-tab.active {
    color: #1b1004;
    border-color: rgba(255, 230, 150, .8);
    background: linear-gradient(180deg, #ffe596, #f3bb45 55%, #ab6918);
    box-shadow: 0 0 18px rgba(244, 196, 91, .35);
}
.casino-tab.active i { color: #251504; }

.game-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
}

.game-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    text-decoration: none;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(180deg, #17130d, #070605);
    box-shadow: 0 10px 22px rgba(0,0,0,.28);
    transform: translateY(8px);
    opacity: 0;
    animation: fadeInCard .42s ease forwards;
}
.game-card:nth-child(2n) { animation-delay: .04s; }
.game-card:nth-child(3n) { animation-delay: .08s; }
.game-card:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 0 26px rgba(244,196,91,.28), 0 16px 28px rgba(0,0,0,.42); }
.game-card:active { transform: scale(.98); box-shadow: 0 0 24px rgba(244,196,91,.36); }

.card-art {
    position: relative;
    aspect-ratio: 1.75 / 1;
    overflow: hidden;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 50% 22%, rgba(255,255,255,.26), transparent 20%),
        radial-gradient(circle at 22% 75%, rgba(244, 196, 91, .16), transparent 32%),
        linear-gradient(135deg, #2b0f08 0%, var(--game-accent) 48%, #d99a2a 100%);
}

.lobby-live-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    filter: saturate(1.12) contrast(1.08);
}

.lobby-live-video + .shimmer,
.lobby-live-video ~ .game-icon {
    opacity: 0;
}

.lobby-live-video ~ .live-badge,
.lobby-live-video ~ .play-overlay {
    z-index: 2;
}

.lobby-live-video ~ .play-overlay {
    background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.58));
}

.game-icon {
    width: 72%;
    aspect-ratio: 1.8 / 1;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: radial-gradient(circle at 50% 48%, rgba(255,228,143,.28), rgba(0,0,0,.1) 52%, transparent 72%);
    border: 0;
    color: #fff2bd;
    font-size: clamp(42px, 5.2vw, 74px);
    text-shadow: 0 2px 0 #5a270c, 0 0 22px rgba(244,196,91,.5);
}

.shimmer {
    position: absolute;
    inset: -80% auto -80% -35%;
    width: 36%;
    transform: rotate(18deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.26), transparent);
    animation: shimmer 2.8s infinite;
}

.live-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 3px 7px;
    border-radius: 999px;
    background: #d71935;
    color: #fff;
    font-size: 10px;
    font-weight: 950;
    box-shadow: 0 0 0 rgba(215,25,53,.45);
    animation: pulseBadge 1.4s infinite;
}

.play-overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(0,0,0,.48);
    opacity: 0;
    transition: opacity .2s ease;
}
.game-card:hover .play-overlay { opacity: 1; }
.play-overlay span {
    min-width: 92px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #211306;
    background: linear-gradient(180deg, #ffe596, #d99428);
    font-weight: 950;
}

.card-title {
    min-height: 40px;
    padding: 7px 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #ff6616;
}
.card-title strong {
    font-size: 12px;
    line-height: 1.12;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 1px 0 rgba(0,0,0,.28);
}
.card-title small { display: none; }

.game-room-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 12px;
}

.live-stage, .panel-card, .result-strip {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(25,21,14,.96), rgba(7,6,5,.98));
    box-shadow: 0 18px 34px rgba(0,0,0,.32);
}

.live-stage { min-height: 590px; padding: 12px; overflow: hidden; }
.stage-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.round-clock {
    width: 76px;
    height: 76px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 4px solid var(--gold);
    color: var(--gold-3);
    box-shadow: 0 0 24px rgba(244,196,91,.24);
}
.round-clock span { display: block; font-size: 26px; font-weight: 950; line-height: 1; }
.round-clock small { display: block; margin-top: -12px; font-size: 10px; color: var(--muted); }
.live-activity { color: var(--muted); font-size: 12px; text-align: right; }

.animation-stage {
    position: relative;
    min-height: 310px;
    margin: 12px 0;
    display: grid;
    place-items: center;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.06);
    background:
        radial-gradient(circle at 50% 48%, rgba(244, 196, 91, .14), transparent 42%),
        linear-gradient(180deg, #15110a, #050504);
}
.stage-live-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    filter: saturate(1.12) contrast(1.08);
}
.animation-stage.has-live-video:after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.38));
    pointer-events: none;
}
.animation-stage.has-live-video .game-demo {
    visibility: hidden;
}
.game-demo { display: none; align-items: center; justify-content: center; gap: 14px; width: 100%; }
.game-demo.active { display: flex; }

.roulette-wheel {
    width: min(58vw, 300px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 14px solid #b48225;
    border-radius: 50%;
    background: conic-gradient(#0d602b 0 20deg, #9a1021 20deg 42deg, #111 42deg 66deg, #9a1021 66deg 96deg, #111 96deg 132deg, #0d602b 132deg 152deg, #9a1021 152deg 206deg, #111 206deg 258deg, #9a1021 258deg 310deg, #111 310deg 360deg);
    animation: wheelSpin var(--spin-speed, .8s) linear infinite;
    will-change: transform;
}
.roulette-wheel span { position: absolute; font-weight: 950; color: #fff; }
.roulette-ball {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transform: translate(110px, -40px);
    box-shadow: 0 0 12px #fff;
    animation: ballOrbit var(--ball-speed, .72s) linear infinite;
    will-change: transform;
}

.roulette-demo {
    position: relative;
    min-height: 310px;
}

.roulette-demo.roulette-locked .roulette-wheel {
    filter: drop-shadow(0 0 20px rgba(255, 59, 59, .18));
}

.roulette-demo.roulette-stopped .roulette-wheel,
.roulette-demo.roulette-stopped .roulette-ball {
    animation-play-state: paused;
}

.game-result-board,
.roulette-result-board {
    position: absolute;
    left: 50%;
    bottom: 18px;
    z-index: 4;
    min-width: 180px;
    padding: 10px 18px;
    border-radius: 8px;
    border: 1px solid rgba(255, 229, 150, .7);
    background: linear-gradient(180deg, rgba(23, 15, 5, .94), rgba(0, 0, 0, .92));
    box-shadow: 0 0 32px rgba(244, 196, 91, .35);
    transform: translateX(-50%);
    text-align: center;
    color: #fff;
}

.game-result-board small,
.roulette-result-board small {
    display: block;
    color: var(--muted);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.game-result-board strong,
.roulette-result-board strong {
    display: block;
    color: var(--gold-3);
    font-size: 25px;
    font-weight: 950;
    text-transform: uppercase;
}

.demo-card, .side-card {
    width: 78px;
    height: 112px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    border: 2px solid #f7d16b;
    background: linear-gradient(145deg, #fff, #eeddb6);
    color: #15100a;
    font-size: 30px;
    font-weight: 950;
    animation: cardDealLive var(--card-speed, 1.1s) linear infinite;
    will-change: transform, filter;
}
.cards-demo .demo-card:nth-child(2), .table-cards .demo-card:nth-child(2) { animation-delay: .2s; }
.cards-demo .demo-card:nth-child(3), .table-cards .demo-card:nth-child(3) { animation-delay: .4s; }
.cards-demo {
    align-items: center;
    justify-content: space-around;
    padding: 18px;
}
.baccarat-lane {
    min-width: 240px;
    display: grid;
    gap: 10px;
    place-items: center;
    padding: 14px;
    border-radius: 8px;
    border: 1px solid rgba(244,196,91,.18);
    background: radial-gradient(circle at 50% 20%, rgba(244,196,91,.12), rgba(0,0,0,.18) 65%);
}
.baccarat-lane span {
    color: var(--gold-3);
    font-size: 13px;
    font-weight: 950;
    text-transform: uppercase;
}
.baccarat-cards {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.baccarat-cards .demo-card {
    width: 66px;
    height: 96px;
    font-size: 22px;
}
.baccarat-cards .card-back {
    color: transparent;
    background:
        linear-gradient(135deg, rgba(255,255,255,.16), transparent 36%),
        repeating-linear-gradient(45deg, #102f75 0 8px, #0a1c4f 8px 16px);
    border-color: #f7d16b;
}
.baccarat-cards .card-back:before {
    content: "BABA";
    color: #f7d16b;
    font-size: 11px;
    letter-spacing: 1px;
}
.baccarat-cards .red-suit {
    color: #c5162c;
}
.hand-score {
    min-width: 42px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #211306;
    background: linear-gradient(180deg, #ffe596, #d99428);
    font-size: 18px;
    font-weight: 950;
}
.baccarat-lane.hand-winner {
    border-color: rgba(255,229,150,.9);
    box-shadow: 0 0 28px rgba(244,196,91,.28), inset 0 0 26px rgba(244,196,91,.1);
}
.baccarat-lane.hand-winner .hand-score {
    box-shadow: 0 0 18px rgba(244,196,91,.55);
}
.baccarat-vs {
    min-width: 46px;
    text-align: center;
}
.baccarat-variant-table-a .cards-demo {
    background: radial-gradient(circle at 50% 35%, rgba(30,84,201,.22), transparent 55%);
}
.baccarat-variant-table-a .baccarat-lane {
    border-color: rgba(90, 160, 255, .45);
    background: linear-gradient(145deg, rgba(14,35,84,.82), rgba(0,0,0,.2));
}
.baccarat-variant-table-a .baccarat-cards .card-back {
    background: repeating-linear-gradient(45deg, #0f4aa8 0 7px, #072861 7px 14px);
}
.baccarat-variant-table-b .cards-demo {
    flex-direction: row-reverse;
    background: radial-gradient(circle at 50% 35%, rgba(19,120,69,.22), transparent 55%);
}
.baccarat-variant-table-b .baccarat-lane {
    border-color: rgba(54, 207, 119, .42);
    background: linear-gradient(145deg, rgba(10,70,40,.78), rgba(0,0,0,.22));
}
.baccarat-variant-speed .cards-demo {
    gap: 34px;
}
.baccarat-variant-speed .baccarat-cards .demo-card {
    width: 78px;
    height: 112px;
}
.baccarat-variant-squeeze .baccarat-cards .demo-card {
    width: 56px;
    height: 88px;
    transform-origin: bottom center;
}
.baccarat-variant-squeeze .baccarat-lane {
    background: linear-gradient(145deg, rgba(53,31,12,.86), rgba(0,0,0,.25));
}
.baccarat-variant-lightning .baccarat-lane {
    box-shadow: inset 0 0 24px rgba(255,231,100,.15), 0 0 22px rgba(244,196,91,.12);
}
.baccarat-variant-lightning .baccarat-cards .card-back {
    background:
        linear-gradient(115deg, transparent 0 44%, rgba(255,255,255,.62) 45% 48%, transparent 49%),
        repeating-linear-gradient(45deg, #6a3a08 0 8px, #2c1602 8px 16px);
}
.baccarat-variant-golden .baccarat-lane {
    border-color: rgba(255, 214, 105, .72);
    background: linear-gradient(145deg, rgba(126,82,13,.82), rgba(20,10,2,.55));
}
.baccarat-variant-always8 .hand-score {
    border-radius: 8px;
}
.game-demo.demo-locked .demo-card,
.game-demo.demo-locked .side-card {
    --card-speed: .72s;
    filter: drop-shadow(0 0 16px rgba(255, 59, 59, .22));
}
.game-demo.demo-stopped .demo-card,
.game-demo.demo-stopped .side-card {
    animation-play-state: paused;
    transform: rotateY(0) translateY(0) scale(1.04);
    filter: brightness(1.08) drop-shadow(0 0 18px rgba(244,196,91,.42));
}
.vs { color: var(--gold); font-weight: 950; font-size: 26px; }
.dragon-card.winner, .tiger-card.winner { box-shadow: 0 0 28px rgba(244,196,91,.8); }

.lightning-demo {
    position: relative;
}
.lightning-flash {
    position: absolute;
    inset: 8%;
    opacity: .15;
    background:
        linear-gradient(115deg, transparent 0 42%, #fff4a7 43% 48%, transparent 49% 100%),
        linear-gradient(70deg, transparent 0 54%, #f4c45b 55% 59%, transparent 60% 100%);
    filter: drop-shadow(0 0 16px #f4c45b);
    animation: lightningFlash 1.35s infinite;
    pointer-events: none;
}

.dice {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #fafafa;
    color: #111;
    font-size: 34px;
    font-weight: 950;
    animation: diceRoll 1.05s ease-in-out infinite;
    transform: rotate(0deg);
    will-change: transform;
}
.game-demo.demo-stopped .dice {
    animation-play-state: paused;
    transform: rotate(0deg) translateY(0) scale(1.04);
}
.pitch { position: relative; width: min(92%, 480px); height: 160px; border-radius: 80px; background: #147041; display: grid; place-items: center; overflow: hidden; }
.bat { position: absolute; left: 35px; font-weight: 950; color: var(--gold-3); transform: rotate(-18deg); animation: batHit 1.4s infinite; }
.ball { position: absolute; left: 100px; width: 16px; height: 16px; border-radius: 50%; background: #fff; animation: ballRun 1.4s infinite; }
.pitch strong { color: #fff; font-size: 28px; }
.fire-pitch { background: linear-gradient(90deg, #1a6b3e, #9a2518); }
.fire-ball { background: #ffec8a; box-shadow: 0 0 16px #ff3b1f, 0 0 30px #f4c45b; }
.table-cards { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

.andar-demo {
    align-items: stretch;
    gap: 18px;
}
.deal-lane {
    min-width: 118px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid rgba(244,196,91,.2);
    background: rgba(0,0,0,.18);
}
.joker-card {
    width: 86px;
    min-height: 116px;
    display: grid;
    place-items: center;
    align-self: center;
    border-radius: 8px;
    border: 2px solid var(--gold);
    color: #211306;
    background: linear-gradient(145deg, #ffe596, #d28a24);
    font-size: 15px;
    font-weight: 950;
    box-shadow: 0 0 22px rgba(244,196,91,.34);
}

.lottery-ball {
    width: 76px;
    height: 76px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #1b1004;
    background: radial-gradient(circle at 35% 25%, #fff9d5, #f4c45b 54%, #9b6118);
    font-size: 28px;
    font-weight: 950;
    box-shadow: 0 0 24px rgba(244,196,91,.28);
    animation: lotteryBounce 1.4s infinite;
}
.lottery-ball:nth-child(2) { animation-delay: .16s; }
.lottery-ball:nth-child(3) { animation-delay: .32s; }

.bet-markets {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.market-btn {
    min-height: 54px;
    border: 1px solid rgba(244,196,91,.18);
    border-radius: 8px;
    background: #100d09;
    color: #fff8e7;
    font-weight: 900;
}
.market-btn strong { display: block; color: var(--gold); }
.market-btn.active { background: linear-gradient(180deg, #ffe596, #c98222); color: #1d1104; }
.market-btn.active strong { color: #281604; }
.roulette-red { background: linear-gradient(180deg, #70101a, #270609); }
.roulette-black { background: linear-gradient(180deg, #1d1d1d, #050505); }
.roulette-green { background: linear-gradient(180deg, #0b7b42, #06351f); }
.roulette-red.active, .roulette-black.active, .roulette-green.active {
    color: #fff;
    box-shadow: 0 0 20px rgba(244,196,91,.28), inset 0 0 0 1px rgba(255,255,255,.18);
}
.roulette-red.active strong, .roulette-black.active strong, .roulette-green.active strong { color: var(--gold-3); }
.dragon-market { background: linear-gradient(180deg, #8b151c, #31070a); }
.tiger-market { background: linear-gradient(180deg, #d3821e, #4c2207); }
.dragon-market.active, .tiger-market.active {
    color: #fff;
    box-shadow: 0 0 20px rgba(244,196,91,.28), inset 0 0 0 1px rgba(255,255,255,.18);
}
.dragon-market.active strong, .tiger-market.active strong { color: var(--gold-3); }
.sicbo-market {
    min-height: 48px;
    background: linear-gradient(180deg, #143b42, #061417);
}
.sicbo-market.active {
    color: #1b1004;
    background: linear-gradient(180deg, #fff0a8, #d79a28);
    box-shadow: 0 0 18px rgba(244,196,91,.26);
}
.sicbo-market.active strong { color: #281604; }
.teenpatti-market {
    background: linear-gradient(180deg, #6d113a, #270514);
}
.teenpatti-market.active {
    color: #fff;
    box-shadow: 0 0 20px rgba(244,196,91,.28), inset 0 0 0 1px rgba(255,255,255,.18);
}
.teenpatti-market.active strong { color: var(--gold-3); }
.teenpatti-stage .cards-demo {
    position: relative;
    background:
        radial-gradient(circle at 50% 38%, rgba(197,31,101,.25), transparent 52%),
        linear-gradient(145deg, rgba(49,7,31,.56), rgba(0,0,0,.08));
}
.teenpatti-stage .baccarat-lane {
    border-color: rgba(255, 100, 170, .38);
    background: linear-gradient(145deg, rgba(70,10,42,.84), rgba(0,0,0,.22));
}
.teenpatti-stage .baccarat-cards .demo-card {
    width: 72px;
    height: 106px;
    border-radius: 10px;
}
.teenpatti-stage .baccarat-cards .card-back {
    background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,.18), transparent 34%),
        repeating-linear-gradient(45deg, #7d1648 0 8px, #37071e 8px 16px);
}
.teenpatti-stage .hand-score {
    min-width: 86px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 13px;
}
.hilo-high { background: linear-gradient(180deg, #8b1e52, #30071c); }
.hilo-low { background: linear-gradient(180deg, #174e8f, #061b34); }
.hilo-high.active,
.hilo-low.active {
    color: #fff;
    box-shadow: 0 0 20px rgba(244,196,91,.28), inset 0 0 0 1px rgba(255,255,255,.18);
}
.hilo-high.active strong,
.hilo-low.active strong { color: var(--gold-3); }
.hilo-demo {
    position: relative;
    min-height: 250px;
    border-radius: 8px;
    background: radial-gradient(circle at 50% 42%, rgba(195,58,121,.2), transparent 48%);
}
.hilo-demo .demo-card {
    width: 112px;
    height: 158px;
    font-size: 38px;
}
.hilo-demo .card-back {
    color: transparent;
    background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,.18), transparent 32%),
        repeating-linear-gradient(45deg, #7d1648 0 8px, #280719 8px 16px);
}
.hilo-demo .card-back:before {
    content: "HI LO";
    color: #f7d16b;
    font-size: 13px;
    letter-spacing: 1px;
}
.hilo-result-label {
    display: grid;
    gap: 2px;
    color: #fff8dd;
    font-weight: 900;
}
.hilo-result-label span {
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
}
.hilo-result-label strong {
    color: var(--gold-3);
    font-size: 28px;
}
.andar-market { background: linear-gradient(180deg, #7b2cc8, #27083f); }
.bahar-market { background: linear-gradient(180deg, #c97a21, #442005); }
.andar-tie-market { background: linear-gradient(180deg, #1d5560, #071b20); }
.andar-market.active,
.bahar-market.active,
.andar-tie-market.active {
    color: #fff;
    box-shadow: 0 0 20px rgba(244,196,91,.28), inset 0 0 0 1px rgba(255,255,255,.18);
}
.andar-demo {
    position: relative;
}
.andar-demo .deal-lane {
    min-width: 230px;
    display: grid;
    gap: 8px;
}
.andar-demo .deal-lane span {
    color: var(--gold-3);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}
.andar-cards,
.bahar-cards {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    justify-content: center;
}
.andar-demo .demo-card {
    width: 58px;
    height: 84px;
    font-size: 19px;
}
.andar-demo .card-back,
.joker-card.card-back {
    color: transparent;
    background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,.18), transparent 32%),
        repeating-linear-gradient(45deg, #5f229d 0 8px, #220638 8px 16px);
}
.andar-demo .card-back:before,
.joker-card.card-back:before {
    content: "AB";
    color: #f7d16b;
    font-size: 12px;
}
.andar-result-label {
    display: grid;
    gap: 2px;
    color: #fff8dd;
    font-weight: 900;
}
.andar-result-label span {
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
}
.andar-result-label strong {
    color: var(--gold-3);
    font-size: 24px;
}
.blackjack-market { background: linear-gradient(180deg, #1f7d45, #08361e); }
.blackjack-market.active {
    color: #fff;
    box-shadow: 0 0 20px rgba(244,196,91,.28), inset 0 0 0 1px rgba(255,255,255,.18);
}
.blackjack-stage .cards-demo {
    background: radial-gradient(circle at 50% 48%, rgba(31,125,69,.24), transparent 58%);
}
.blackjack-stage .baccarat-cards .demo-card {
    width: 70px;
    height: 102px;
}
.blackjack-stage .hand-score:before {
    content: "Total ";
    color: var(--muted);
    font-size: 11px;
}

.game-room-page[data-game-type="baccarat"],
.game-room-page[data-game-type="lightning-baccarat"],
.game-room-page[data-game-type="blackjack"] {
    background:
        radial-gradient(circle at 18% 4%, rgba(255, 214, 105, .2), transparent 28%),
        radial-gradient(circle at 82% 0%, rgba(23, 88, 181, .22), transparent 26%),
        linear-gradient(180deg, #090b12 0%, #080604 100%);
}

.game-room-page[data-game-type="baccarat"] .live-stage,
.game-room-page[data-game-type="lightning-baccarat"] .live-stage,
.game-room-page[data-game-type="blackjack"] .live-stage {
    min-height: 610px;
    background:
        linear-gradient(135deg, rgba(255, 229, 150, .14), transparent 36%),
        radial-gradient(circle at 50% 35%, rgba(12, 96, 57, .58), rgba(5, 22, 18, .94) 62%),
        linear-gradient(180deg, #191009, #050403);
    border-color: rgba(255, 214, 105, .32);
    box-shadow: 0 22px 48px rgba(0,0,0,.44), inset 0 0 0 1px rgba(255,255,255,.04);
}

.game-room-page[data-game-type="lightning-baccarat"] .live-stage {
    background:
        linear-gradient(115deg, transparent 0 46%, rgba(255,255,255,.2) 47% 49%, transparent 50%),
        radial-gradient(circle at 52% 34%, rgba(229, 174, 28, .34), rgba(20, 12, 45, .95) 62%),
        linear-gradient(180deg, #190b2d, #050403);
}

.game-room-page[data-game-type="blackjack"] .live-stage {
    background:
        radial-gradient(circle at 50% 35%, rgba(23, 158, 84, .62), rgba(3, 40, 23, .95) 62%),
        linear-gradient(180deg, #0b1f14, #050403);
}

.game-room-page[data-game-type="baccarat"] .animation-stage,
.game-room-page[data-game-type="lightning-baccarat"] .animation-stage,
.game-room-page[data-game-type="blackjack"] .animation-stage {
    min-height: 354px;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 45%, rgba(255,255,255,.08), transparent 34%),
        radial-gradient(ellipse at 50% 50%, rgba(20, 112, 69, .72), rgba(2, 22, 17, .96) 64%),
        linear-gradient(180deg, #0f251b, #050403);
}

.game-room-page[data-game-type="baccarat"] .animation-stage:before,
.game-room-page[data-game-type="lightning-baccarat"] .animation-stage:before,
.game-room-page[data-game-type="blackjack"] .animation-stage:before {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 48%;
    border: 2px solid rgba(255, 214, 105, .34);
    box-shadow: inset 0 0 44px rgba(0,0,0,.32), 0 0 34px rgba(255,214,105,.08);
    pointer-events: none;
}

.game-room-page[data-game-type="baccarat"] .cards-demo,
.game-room-page[data-game-type="lightning-baccarat"] .cards-demo,
.game-room-page[data-game-type="blackjack"] .cards-demo {
    position: relative;
    z-index: 2;
    gap: 22px;
}

.game-room-page[data-game-type="baccarat"] .baccarat-lane,
.game-room-page[data-game-type="lightning-baccarat"] .baccarat-lane,
.game-room-page[data-game-type="blackjack"] .baccarat-lane {
    min-width: 260px;
    background: linear-gradient(145deg, rgba(3, 18, 15, .82), rgba(0,0,0,.34));
    border-color: rgba(255, 214, 105, .38);
    box-shadow: inset 0 0 22px rgba(255, 214, 105, .06);
}

.game-room-page[data-game-type="baccarat"] .baccarat-cards .demo-card,
.game-room-page[data-game-type="lightning-baccarat"] .baccarat-cards .demo-card,
.game-room-page[data-game-type="blackjack"] .baccarat-cards .demo-card {
    width: 76px;
    height: 108px;
    border-radius: 10px;
    box-shadow: 0 12px 20px rgba(0,0,0,.28);
}

.game-room-page[data-game-type="lightning-baccarat"] .baccarat-lane {
    border-color: rgba(255, 231, 100, .58);
    box-shadow: inset 0 0 28px rgba(255, 231, 100, .12), 0 0 26px rgba(255, 231, 100, .1);
}

.baccarat-player { background: linear-gradient(180deg, #164d9a, #071b3b); }
.baccarat-banker { background: linear-gradient(180deg, #8d1729, #310711); }
.baccarat-tie { background: linear-gradient(180deg, #0f7a56, #06271d); }
.baccarat-player.active,
.baccarat-banker.active,
.baccarat-tie.active {
    color: #fff;
    box-shadow: 0 0 20px rgba(244,196,91,.28), inset 0 0 0 1px rgba(255,255,255,.18);
}
.baccarat-player.active strong,
.baccarat-banker.active strong,
.baccarat-tie.active strong { color: var(--gold-3); }

.live-stage.result-loading .round-clock {
    border-color: #ff4d5f;
    color: #ffe7eb;
    box-shadow: 0 0 28px rgba(255, 77, 95, .38);
}

.live-stage.betting-open .round-clock {
    border-color: #38e88b;
    box-shadow: 0 0 28px rgba(56, 232, 139, .22);
}

.place-bet-btn:disabled {
    color: #ffe6e9;
    background: linear-gradient(180deg, #9b1c2e, #3a0810);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.poker-market { background: linear-gradient(180deg, #0f7d77, #062826); }
.poker-market.active {
    color: #fff;
    box-shadow: 0 0 20px rgba(244,196,91,.28), inset 0 0 0 1px rgba(255,255,255,.18);
}
.holdem-demo[data-demo="live-poker"] {
    position: relative;
    flex-direction: column;
    min-height: 310px;
    gap: 12px;
    background: radial-gradient(circle at 50% 45%, rgba(15,125,119,.24), transparent 55%);
}
.poker-hand {
    min-width: 230px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid rgba(244,196,91,.18);
    background: rgba(0,0,0,.18);
}
.poker-hand span {
    color: var(--gold-3);
    font-weight: 950;
    text-transform: uppercase;
    font-size: 12px;
}
.poker-hole,
.poker-community {
    display: flex;
    gap: 7px;
    justify-content: center;
    flex-wrap: wrap;
}
.poker-hand .demo-card,
.poker-community .demo-card {
    width: 56px;
    height: 82px;
    font-size: 18px;
}
.poker-hand strong {
    min-width: 78px;
    color: var(--gold-3);
    font-size: 12px;
    text-align: right;
}
.poker-hand.hand-winner {
    border-color: rgba(255,229,150,.82);
    box-shadow: 0 0 22px rgba(244,196,91,.26);
}
.poker-result-label {
    display: grid;
    gap: 2px;
    text-align: center;
    font-weight: 900;
}
.poker-result-label span {
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
}
.poker-result-label strong {
    color: var(--gold-3);
    font-size: 24px;
}
.sicbo-result-total {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    padding: 8px 18px;
    border-radius: 8px;
    border: 1px solid rgba(244,196,91,.45);
    color: #fff8dd;
    background: rgba(0,0,0,.7);
    font-weight: 900;
}
.sicbo-result-total strong {
    color: var(--gold-3);
    font-size: 24px;
}
.winner-dice {
    box-shadow: 0 0 24px rgba(244,196,91,.42);
}

.bet-panel { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.panel-card { padding: 12px; }
.balance-card span { display: block; color: var(--muted); font-size: 12px; }
.balance-card strong { display: block; color: var(--gold-3); font-size: 24px; }
.panel-title { margin-bottom: 8px; color: var(--gold-3); font-weight: 950; }
.chip-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
.chip {
    flex: 0 0 auto;
    min-width: 76px;
    height: 42px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: #12100c;
    color: #fff;
    font-weight: 950;
}
.chip.active { background: linear-gradient(180deg, #ffe596, #d28a24); color: #1c1104; }
.slip-line { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.slip-line span { color: var(--muted); }
.place-bet-btn {
    width: 100%;
    min-height: 46px;
    margin-top: 10px;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(180deg, #ffe596, #c77b20);
    color: #1d1104;
    font-weight: 950;
}
.compact-list { display: grid; gap: 6px; max-height: 152px; overflow: auto; }
.history-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 7px;
    background: rgba(255,255,255,.04);
    color: #f5ead0;
    font-size: 12px;
}
.win { color: #44e37f; }
.loss { color: #ff667b; }

.result-strip {
    margin-top: 12px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    overflow: hidden;
}
.result-history { display: flex; gap: 6px; overflow-x: auto; min-width: 0; }
.result-chip {
    flex: 0 0 auto;
    min-width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #1b1710;
    border: 1px solid var(--line);
    color: var(--gold-3);
    font-weight: 950;
}

.result-popup {
    position: fixed;
    z-index: 20;
    left: 50%;
    top: 18px;
    width: min(92vw, 360px);
    transform: translate(-50%, -140%);
    transition: transform .28s ease;
    pointer-events: none;
}
.result-popup.show { transform: translate(-50%, 0); }
.result-popup > div {
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(180deg, #221a0e, #070605);
    box-shadow: 0 0 26px rgba(244,196,91,.28);
    text-align: center;
}
.result-popup small, .result-popup span { display: block; color: var(--muted); }
.result-popup strong { display: block; color: var(--gold-3); font-size: 22px; }

.casino-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    min-height: calc(var(--footer-h) + env(safe-area-inset-bottom));
    padding: 14px 10px calc(12px + env(safe-area-inset-bottom));
    display: grid;
    place-items: center;
    border-top: 1px solid var(--line);
    background: rgba(5, 5, 5, .96);
    color: var(--gold-3);
    font-size: 12px;
    font-weight: 900;
}

@keyframes pulseDot { 70% { box-shadow: 0 0 0 10px rgba(255,49,77,0); } 100% { box-shadow: 0 0 0 0 rgba(255,49,77,0); } }
@keyframes pulseBadge { 70% { box-shadow: 0 0 0 8px rgba(215,25,53,0); } 100% { box-shadow: 0 0 0 0 rgba(215,25,53,0); } }
@keyframes shimmer { 0% { left: -45%; } 55%,100% { left: 125%; } }
@keyframes fadeInCard { to { opacity: 1; transform: translateY(0); } }
@keyframes wheelSpin { to { transform: rotate(360deg); } }
@keyframes ballOrbit {
    from { transform: rotate(0deg) translate(110px, -40px) rotate(0deg); }
    to { transform: rotate(-360deg) translate(110px, -40px) rotate(360deg); }
}
@keyframes cardFlip { 0%,24% { transform: rotateY(180deg) translateY(10px); filter: brightness(.55); } 45%,100% { transform: rotateY(0) translateY(0); filter: brightness(1); } }
@keyframes cardDealLive {
    0% { transform: translate3d(-18px, -10px, 0) rotate(-10deg) rotateY(180deg); filter: brightness(.72); }
    35% { transform: translate3d(0, 0, 0) rotate(0deg) rotateY(90deg); filter: brightness(.92); }
    70% { transform: translate3d(18px, 10px, 0) rotate(10deg) rotateY(0); filter: brightness(1.08); }
    100% { transform: translate3d(-18px, -10px, 0) rotate(-10deg) rotateY(180deg); filter: brightness(.72); }
}
@keyframes diceRoll {
    0%, 100% { transform: rotate(0deg) translateY(0); }
    25% { transform: rotate(-4deg) translateY(-8px); }
    50% { transform: rotate(0deg) translateY(0); }
    75% { transform: rotate(4deg) translateY(-6px); }
}
@keyframes batHit { 50% { transform: rotate(20deg) translateX(16px); } }
@keyframes ballRun { 0% { transform: translateX(0); } 100% { transform: translateX(320px) translateY(-45px); } }
@keyframes lightningFlash { 0%, 70%, 100% { opacity: .12; } 8%, 14% { opacity: .9; } 20% { opacity: .24; } }
@keyframes lotteryBounce { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-18px) rotate(22deg); } }

@media (max-width: 1180px) {
    .game-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .game-room-grid { grid-template-columns: 1fr; }
    .live-stage { min-height: 520px; }
}

@media (max-width: 768px) {
    .casino-shell { padding: 10px 10px calc(var(--footer-h) + 14px); }
    .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    .casino-topbar { grid-template-columns: 40px minmax(0, 1fr) auto; }
    .lobby-strip-title { grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
    .lobby-strip-title .wallet-pill { display: none; }
    .lobby-title-left { min-width: 126px; font-size: 15px; }
    .lobby-live-name { text-align: right; font-size: 15px; }
    .wallet-pill { min-width: 118px; padding: 7px 8px; }
    .wallet-pill strong { font-size: 13px; }
    .provider-strip { margin-top: 6px; }
    .casino-tab { min-width: 104px; height: 42px; font-size: 11px; }
    .card-title { min-height: 50px; padding: 7px; }
    .card-title strong { font-size: 11px; }
    .live-stage { min-height: calc(100svh - 330px); padding: 10px; }
    .animation-stage { min-height: 238px; }
    .cards-demo { flex-direction: column; gap: 8px; padding: 8px; }
    .baccarat-lane { min-width: 100%; padding: 9px; }
    .baccarat-cards .demo-card { width: 52px; height: 76px; font-size: 17px; }
    .bet-markets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .round-clock { width: 64px; height: 64px; border-width: 3px; }
    .round-clock span { font-size: 23px; }
    .demo-card, .side-card { width: 58px; height: 84px; font-size: 23px; }
    .dice { width: 58px; height: 58px; font-size: 28px; }
    .joker-card { width: 64px; min-height: 88px; font-size: 12px; }
    .deal-lane { min-width: 82px; padding: 7px; gap: 5px; }
    .andar-demo { gap: 8px; }
    .lottery-ball { width: 58px; height: 58px; font-size: 24px; }
    .result-strip { align-items: flex-start; flex-direction: column; }
    .game-room-page[data-game-type="baccarat"] .live-stage,
    .game-room-page[data-game-type="lightning-baccarat"] .live-stage,
    .game-room-page[data-game-type="blackjack"] .live-stage {
        min-height: auto;
    }
    .game-room-page[data-game-type="baccarat"] .animation-stage,
    .game-room-page[data-game-type="lightning-baccarat"] .animation-stage,
    .game-room-page[data-game-type="blackjack"] .animation-stage {
        min-height: 292px;
    }
    .game-room-page[data-game-type="baccarat"] .cards-demo,
    .game-room-page[data-game-type="lightning-baccarat"] .cards-demo,
    .game-room-page[data-game-type="blackjack"] .cards-demo {
        gap: 9px;
    }
    .game-room-page[data-game-type="baccarat"] .baccarat-lane,
    .game-room-page[data-game-type="lightning-baccarat"] .baccarat-lane,
    .game-room-page[data-game-type="blackjack"] .baccarat-lane {
        min-width: 100%;
    }
    .game-room-page[data-game-type="baccarat"] .baccarat-cards .demo-card,
    .game-room-page[data-game-type="lightning-baccarat"] .baccarat-cards .demo-card,
    .game-room-page[data-game-type="blackjack"] .baccarat-cards .demo-card {
        width: 54px;
        height: 78px;
        font-size: 18px;
    }
}

@media (max-width: 414px) {
    .casino-shell { padding-left: 8px; padding-right: 8px; }
    .game-grid { gap: 8px; }
    .casino-topbar h1 { font-size: 20px; }
    .icon-btn, .refresh-link { width: 38px; height: 38px; }
    .wallet-pill { min-width: 104px; }
    .wallet-pill span { font-size: 10px; }
    .wallet-pill strong { font-size: 12px; }
    .provider-strip { padding: 9px; }
    .casino-tab { min-width: 98px; padding: 0 9px; }
    .game-icon { font-size: 34px; }
    .live-badge { top: 6px; left: 6px; font-size: 9px; }
    .market-btn { min-height: 50px; font-size: 12px; }
}

@media (max-width: 340px) {
    .casino-topbar { gap: 6px; }
    .wallet-pill { min-width: 96px; padding: 6px; }
    .casino-tab { min-width: 92px; }
    .card-title strong { font-size: 10px; }
    .card-title small { font-size: 9px; }
    .bet-markets { gap: 6px; }
    .chip { min-width: 70px; }
}