:root{
    --accent-1:#5b8cff;
    --accent-2:#7c5cff;
    --bg-1:#0b0e1a;
    --bg-2:#12162a;
    --glass-bg:rgba(255,255,255,.07);
    --glass-border:rgba(255,255,255,.12);
    --text-1:#fff;
    --text-2:#aeb7d0;
    --good:#37d67a;
    --bad:#ff5c7a;
    --gold:#ffd76a;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",sans-serif;
    background:
        radial-gradient(circle at 15% 5%,rgba(91,140,255,.16),transparent 30%),
        radial-gradient(circle at 85% 70%,rgba(124,92,255,.15),transparent 35%),
        var(--bg-1);
    color:var(--text-1)}
body{overflow-x:hidden}
button,input{font:inherit}
button{cursor:pointer;border:0}
.wrap{width:min(640px,100%);margin:auto;padding:12px;position:relative;z-index:2}

.orb{position:fixed;border-radius:50%;pointer-events:none;filter:blur(85px);opacity:.35}
.orb1{width:180px;height:180px;background:#5b8cff;top:-80px;left:-80px}
.orb2{width:220px;height:220px;background:#7c5cff;top:35%;right:-110px}
.orb3{width:150px;height:150px;background:#00c6ff;bottom:-50px;left:-80px}

.navbar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 3px 15px}
.brand{display:flex;align-items:center;gap:9px;font-size:20px;font-weight:900}
.brand-icon{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;
    background:linear-gradient(135deg,var(--accent-1),var(--accent-2));
    box-shadow:0 10px 35px rgba(91,140,255,.25);font-size:22px}
.nav-right{display:flex;align-items:center;gap:7px}
.handle{max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    color:var(--text-2);font-size:11px}
.account-mini,.theme-btn{height:36px;border-radius:12px;color:var(--text-1);
    background:var(--glass-bg);border:1px solid var(--glass-border)}
.account-mini{padding:0 11px;font-size:11px}
.theme-btn{width:36px;padding:0}

.glass{background:var(--glass-bg);border:1px solid var(--glass-border);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    border-radius:23px;box-shadow:0 15px 55px rgba(0,0,0,.18)}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.stat{padding:13px 8px;text-align:center}
.stat small{display:block;color:var(--text-2);font-size:10px;margin-bottom:4px}
.stat strong{font-size:17px}

.table{padding:13px;margin-bottom:12px}
.table-title{display:flex;justify-content:space-between;align-items:center;
    min-height:37px;margin-bottom:11px}
.phase{padding:7px 11px;border-radius:10px;background:rgba(91,140,255,.12);
    color:#8eb2ff;font-size:11px;font-weight:800}
.countdown{min-width:35px;text-align:right;color:var(--gold);font-size:24px;font-weight:900}
.hands{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.hand{min-height:205px;padding:11px;border-radius:19px;background:rgba(0,0,0,.14);
    border:1px solid var(--glass-border)}
.hand-head{display:flex;justify-content:space-between;align-items:center;
    color:var(--text-2);font-size:12px;font-weight:700;margin-bottom:10px}
.score{color:var(--text-1);font-size:18px;font-weight:900}
.cards{min-height:145px;display:flex;align-items:center;justify-content:center;
    flex-wrap:wrap;gap:7px}

.card{width:57px;height:82px;perspective:800px;animation:cardIn .7s cubic-bezier(.2,.8,.2,1)}
.flip-card-inner{position:relative;width:100%;height:100%;
    transition:transform .9s cubic-bezier(.4,.15,.2,1);
    transform-style:preserve-3d;will-change:transform}
.card.flipped .flip-card-inner{transform:rotateY(180deg)}
.flip-card-face{position:absolute;inset:0;-webkit-backface-visibility:hidden;
    backface-visibility:hidden;border-radius:11px;display:flex;flex-direction:column;
    align-items:center;justify-content:center;font-size:17px;font-weight:900;
    box-shadow:0 8px 22px rgba(0,0,0,.28)}
.flip-card-back{background:linear-gradient(135deg,#18254b,#4b5ca3);color:white;
    border:2px solid rgba(255,255,255,.25)}
.flip-card-front{background:#fff;color:#111;transform:rotateY(180deg)}
.flip-card-front.red{color:#d92c50}
@keyframes cardIn{0%{opacity:0;transform:translateY(-25px) scale(.7)}
    70%{opacity:1;transform:translateY(4px) scale(1.03)}
    100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes resultPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
.hand.winner{animation:resultPulse .7s ease}

.bet-panel{padding:13px;margin-bottom:13px}
.chips{display:flex;gap:7px;overflow-x:auto;padding-bottom:3px;margin-bottom:11px;
    scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;min-width:55px;height:40px;border-radius:13px;color:var(--text-1);
    background:rgba(255,255,255,.06);border:1px solid var(--glass-border);
    font-size:13px;font-weight:700}
.chip.active{background:linear-gradient(135deg,var(--accent-1),var(--accent-2));
    border-color:transparent;box-shadow:0 8px 20px rgba(91,140,255,.2)}
.bet-options{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.bet-option{min-height:72px;border-radius:17px;color:var(--text-1);
    background:rgba(255,255,255,.06);border:1px solid var(--glass-border);
    padding:9px;transition:.2s}
.bet-option strong{display:block;font-size:13px}
.bet-option span{display:block;margin-top:5px;color:var(--text-2);font-size:11px}
.bet-option.active{background:linear-gradient(135deg,rgba(91,140,255,.28),rgba(124,92,255,.28));
    border-color:#7198ff}
.bet-option.locked{opacity:.25;filter:grayscale(.4);pointer-events:none}
.bet-option.disabled{opacity:.4;pointer-events:none}
.clear-btn{width:100%;height:40px;margin-top:9px;border-radius:13px;
    color:var(--text-2);background:rgba(255,255,255,.05);
    border:1px solid var(--glass-border)}

.section-title{display:flex;align-items:center;justify-content:space-between;
    margin:16px 2px 9px}
.section-title h3{margin:0;font-size:16px}
.section-title .section-right{display:flex;align-items:center;gap:8px;
    color:var(--text-2);font-size:10px}
.section-title.clickable{cursor:pointer;user-select:none;padding:4px 2px;border-radius:10px;
    transition:background .15s}
.section-title.clickable:hover{background:rgba(255,255,255,.04)}
.toggle-chevron{display:inline-block;font-size:12px;
    transition:transform .25s cubic-bezier(.4,.15,.2,1);
    color:var(--text-2)}
.section-title.collapsed .toggle-chevron{transform:rotate(-90deg)}
.collapsible{overflow:hidden;max-height:2000px;
    transition:max-height .35s cubic-bezier(.4,.15,.2,1),
               opacity .25s ease,
               margin .25s ease;
    opacity:1;margin-bottom:0}
.collapsible.collapsed{max-height:0;opacity:0;pointer-events:none}

.leaderboard{padding:9px;max-height:340px;overflow-y:auto}
.leaderboard-item{
    display:grid;
    grid-template-columns:34px 38px 1fr auto;
    align-items:center;
    gap:9px;padding:10px 6px;
    border-bottom:1px solid rgba(255,255,255,.06);
    border-radius:12px;transition:background .15s;
    animation:lbSlideIn .35s cubic-bezier(.2,.8,.2,1);
}
.leaderboard-item:last-child{border-bottom:0}
.leaderboard-item:hover{background:rgba(255,255,255,.05)}
.leaderboard-item.me{background:linear-gradient(135deg,rgba(91,140,255,.14),rgba(124,92,255,.14));
    border:1px solid rgba(91,140,255,.35)}
.leaderboard-rank{width:30px;height:30px;border-radius:50%;display:grid;
    place-items:center;font-size:12px;font-weight:900;color:var(--text-1);
    background:rgba(255,255,255,.06);border:1px solid var(--glass-border)}
.leaderboard-rank.rank-1{background:linear-gradient(135deg,#ffd76a,#ff9f43);
    color:#101522;border-color:transparent;box-shadow:0 0 20px rgba(255,215,106,.4)}
.leaderboard-rank.rank-2{background:linear-gradient(135deg,#d0d4e0,#9099b3);
    color:#101522;border-color:transparent}
.leaderboard-rank.rank-3{background:linear-gradient(135deg,#d9a15a,#b87333);
    color:#101522;border-color:transparent}
.leaderboard-avatar{
    width:34px;height:34px;
    border-radius:50%;
    display:grid;place-items:center;
    color:white;
    background:linear-gradient(135deg,var(--accent-1),var(--accent-2));
    font-weight:900;font-size:13px;
    overflow:hidden;flex-shrink:0;
    border:2px solid rgba(255,255,255,.15);
}
.leaderboard-avatar img{width:100%;height:100%;object-fit:cover}
.leaderboard-main strong{display:block;font-size:13px;color:var(--text-1)}
.leaderboard-main small{display:block;margin-top:3px;color:var(--text-2);font-size:10px;
    display:flex;gap:8px;flex-wrap:wrap}
.leaderboard-main small span{display:inline-flex;align-items:center;gap:3px}
.lb-dot{width:7px;height:7px;border-radius:50%;display:inline-block}
.lb-dot.p{background:#8eb2ff}
.lb-dot.b{background:#ff8ca1}
.lb-dot.t{background:#ffd76a}
.leaderboard-total{font-size:14px;font-weight:900;color:var(--gold);text-align:right}
.leaderboard-total small{display:block;color:var(--text-2);font-size:9px;
    font-weight:400;margin-top:2px}
.leaderboard-new{animation:lbPulse .6s ease}
@keyframes lbSlideIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}
@keyframes lbPulse{0%{transform:scale(1)}50%{transform:scale(1.03);background:rgba(91,140,255,.15)}100%{transform:scale(1)}}

.top-players{padding:9px}
.top-tabs{
    display:grid;grid-template-columns:repeat(4,1fr);
    gap:4px;padding:4px;margin-bottom:10px;
    border-radius:12px;background:rgba(255,255,255,.05);
}
.top-tab{
    height:32px;border-radius:8px;
    color:var(--text-2);background:transparent;
    font-size:10px;font-weight:700;padding:0 4px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.top-tab.active{
    color:var(--text-1);
    background:linear-gradient(135deg,var(--accent-1),var(--accent-2));
    box-shadow:0 4px 14px rgba(91,140,255,.3);
}
.top-list{display:flex;flex-direction:column}
.top-item{
    display:grid;grid-template-columns:34px 40px 1fr auto;
    align-items:center;gap:9px;padding:10px 6px;
    border-bottom:1px solid rgba(255,255,255,.06);
    border-radius:12px;transition:background .15s;
    animation:lbSlideIn .35s cubic-bezier(.2,.8,.2,1);
}
.top-item:last-child{border-bottom:0}
.top-item:hover{background:rgba(255,255,255,.05)}
.top-item.me{
    background:linear-gradient(135deg,rgba(91,140,255,.14),rgba(124,92,255,.14));
    border:1px solid rgba(91,140,255,.35);
}
.top-rank{
    width:30px;height:30px;border-radius:50%;
    display:grid;place-items:center;
    font-size:12px;font-weight:900;color:var(--text-1);
    background:rgba(255,255,255,.06);border:1px solid var(--glass-border);
}
.top-rank.rank-1{background:linear-gradient(135deg,#ffd76a,#ff9f43);
    color:#101522;border-color:transparent;
    box-shadow:0 0 20px rgba(255,215,106,.4)}
.top-rank.rank-2{background:linear-gradient(135deg,#d0d4e0,#9099b3);
    color:#101522;border-color:transparent}
.top-rank.rank-3{background:linear-gradient(135deg,#d9a15a,#b87333);
    color:#101522;border-color:transparent}
.top-avatar{
    width:38px;height:38px;border-radius:50%;
    display:grid;place-items:center;color:white;
    background:linear-gradient(135deg,var(--accent-1),var(--accent-2));
    font-weight:900;font-size:15px;
    overflow:hidden;flex-shrink:0;
}
.top-avatar img{width:100%;height:100%;object-fit:cover}
.top-main strong{display:block;font-size:13px;color:var(--text-1)}
.top-main small{display:block;margin-top:3px;color:var(--text-2);font-size:10px}
.top-value{font-size:14px;font-weight:900;color:var(--gold);text-align:right}
.top-value small{display:block;color:var(--text-2);font-size:9px;
    font-weight:400;margin-top:2px}

.history{padding:9px}
.history-item{display:grid;grid-template-columns:38px 1fr auto;align-items:center;
    gap:9px;padding:9px 5px;border-bottom:1px solid rgba(255,255,255,.06);
    cursor:pointer;transition:background .15s;border-radius:12px}
.history-item:hover,.history-item:active{background:rgba(255,255,255,.05)}
.history-item:last-child{border-bottom:0}
.result-ball{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
    font-size:12px;font-weight:900}
.result-player{background:rgba(91,140,255,.2);color:#8eb2ff}
.result-banker{background:rgba(255,92,122,.18);color:#ff8ca1}
.result-tie{background:rgba(255,215,106,.17);color:var(--gold)}
.history-main strong{display:block;font-size:12px}
.history-main small{display:block;margin-top:2px;color:var(--text-2);font-size:9px}
.history-score{font-size:13px;font-weight:900}

.online-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;
    border-radius:20px;background:rgba(55,214,122,.14);color:#6ee79c;
    font-size:10px;font-weight:700;border:1px solid rgba(55,214,122,.3)}
.online-badge::before{content:"";width:7px;height:7px;border-radius:50%;
    background:#37d67a;box-shadow:0 0 8px #37d67a;
    animation:onlinePulse 1.6s ease-in-out infinite}
@keyframes onlinePulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.85)}}

.static-card{width:50px;height:72px;border-radius:11px;background:#fff;color:#111;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    font-size:15px;font-weight:900;box-shadow:0 8px 22px rgba(0,0,0,.28)}
.static-card.red{color:#d92c50}
#historyOverlay .hand{min-height:auto;padding:10px}
#historyOverlay .cards{min-height:88px}
#historyOverlay .account-modal{padding-bottom:26px}

.account-overlay{position:fixed;inset:0;z-index:1000;display:flex;
    justify-content:center;align-items:center;padding:18px;
    background:rgba(0,0,0,.62);backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);opacity:0;visibility:hidden;transition:.2s}
.account-overlay.show{opacity:1;visibility:visible}
.account-modal{position:relative;width:min(100%,430px);padding:22px;
    border-radius:27px;background:var(--bg-2);border:1px solid var(--glass-border);
    box-shadow:0 30px 90px rgba(0,0,0,.5);max-height:90vh;overflow-y:auto}
.account-close{position:absolute;top:14px;right:14px;width:34px;height:34px;
    border-radius:11px;color:var(--text-1);background:rgba(255,255,255,.06);font-size:22px}
.account-logo{width:55px;height:55px;margin-bottom:12px;border-radius:17px;
    display:grid;place-items:center;color:white;
    background:linear-gradient(135deg,var(--accent-1),var(--accent-2));font-size:25px}
.account-modal h2{margin:0;font-size:22px}
.account-sub{margin:5px 0 17px;color:var(--text-2);font-size:11px}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:4px;
    margin-bottom:12px;border-radius:14px;background:rgba(255,255,255,.05)}
.auth-tab{height:38px;border-radius:10px;color:var(--text-2);
    background:transparent;font-size:12px}
.auth-tab.active{color:var(--text-1);background:rgba(255,255,255,.1);font-weight:800}
.auth-message{min-height:17px;margin-bottom:5px;font-size:10px}
.auth-form{display:none;gap:9px}
.auth-form.active{display:grid}
.auth-form input{width:100%;height:45px;padding:0 13px;outline:none;
    border-radius:13px;border:1px solid var(--glass-border);
    color:var(--text-1);background:rgba(255,255,255,.06)}
.main-btn{height:45px;border-radius:13px;color:white;
    background:linear-gradient(135deg,var(--accent-1),var(--accent-2));font-weight:800}
.account-profile{display:flex;align-items:center;gap:12px;padding:13px;
    margin-bottom:10px;border-radius:17px;background:rgba(255,255,255,.05)}
.account-avatar{width:48px;height:48px;border-radius:15px;display:grid;
    place-items:center;color:white;
    background:linear-gradient(135deg,var(--accent-1),var(--accent-2));font-weight:900;
    overflow:hidden}
.account-avatar img{width:100%;height:100%;object-fit:cover}
.account-info strong{display:block;font-size:15px}
.account-info small{display:block;margin-top:3px;color:var(--text-2);font-size:10px}
.logout-btn{width:100%;height:43px;border-radius:13px;color:#ff8ca1;
    background:rgba(255,92,122,.1);border:1px solid rgba(255,92,122,.25)}

.avatar-editor{display:flex;flex-direction:column;align-items:center;
    gap:12px;padding:10px 0}
.avatar-preview{width:120px;height:120px;border-radius:50%;
    display:grid;place-items:center;color:white;
    background:linear-gradient(135deg,var(--accent-1),var(--accent-2));
    font-size:44px;font-weight:900;overflow:hidden;
    border:3px solid var(--glass-border);
    box-shadow:0 10px 30px rgba(91,140,255,.3)}
.avatar-preview img{width:100%;height:100%;object-fit:cover}
.avatar-hint{font-size:10px;color:var(--text-2);text-align:center;line-height:1.5}
#chooseAvatarBtn{width:100%}
#backFromAvatar{width:100%}

.result-toast{position:fixed;top:14px;left:50%;z-index:1200;padding:12px 22px;
    border-radius:16px;font-size:14px;font-weight:800;color:var(--text-1);
    background:var(--glass-bg);border:1px solid var(--glass-border);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    box-shadow:0 15px 45px rgba(0,0,0,.3);opacity:0;pointer-events:none;
    white-space:nowrap;transform:translateX(-50%) translateY(-30px);
    transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .35s ease}
.result-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.result-toast.win{color:var(--good);border-color:rgba(55,214,122,.4)}
.result-toast.lose{color:var(--bad);border-color:rgba(255,92,122,.4)}
.result-toast.push,.result-toast.neutral{color:var(--gold);
    border-color:rgba(255,215,106,.4)}

.result-flash{position:fixed;inset:0;z-index:1100;
    display:none;align-items:center;justify-content:center;
    pointer-events:none;padding:20px}
.result-flash.show{display:flex}
.result-flash-content{
    padding:24px 44px;border-radius:26px;text-align:center;
    background:rgba(10,12,25,.92);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border:2px solid var(--glass-border);
    animation:flashIn 2.6s cubic-bezier(.2,.8,.2,1) forwards;
    min-width:220px;
}
.result-flash.win .result-flash-content{
    border-color:rgba(55,214,122,.55);
    box-shadow:0 0 80px rgba(55,214,122,.5), inset 0 0 40px rgba(55,214,122,.08);
}
.result-flash.lose .result-flash-content{
    border-color:rgba(255,92,122,.55);
    box-shadow:0 0 80px rgba(255,92,122,.5), inset 0 0 40px rgba(255,92,122,.08);
}
.result-flash.push .result-flash-content{
    border-color:rgba(255,215,106,.55);
    box-shadow:0 0 80px rgba(255,215,106,.5), inset 0 0 40px rgba(255,215,106,.08);
}
.result-flash-icon{font-size:52px;line-height:1;margin-bottom:10px}
.result-flash-title{font-size:22px;font-weight:900;letter-spacing:2px;
    margin-bottom:6px;text-transform:uppercase}
.result-flash-amount{font-size:34px;font-weight:900}
.result-flash.win .result-flash-icon,
.result-flash.win .result-flash-title,
.result-flash.win .result-flash-amount{color:var(--good)}
.result-flash.lose .result-flash-icon,
.result-flash.lose .result-flash-title,
.result-flash.lose .result-flash-amount{color:var(--bad)}
.result-flash.push .result-flash-icon,
.result-flash.push .result-flash-title,
.result-flash.push .result-flash-amount{color:var(--gold)}
@keyframes flashIn{
    0%  { opacity:0; transform:scale(.4) rotate(-8deg); }
    15% { opacity:1; transform:scale(1.08) rotate(2deg); }
    25% { transform:scale(1) rotate(0); }
    80% { opacity:1; transform:scale(1); }
    100%{ opacity:0; transform:scale(1.15); }
}

.chat-fab{
    position:fixed;right:20px;bottom:20px;
    width:56px;height:56px;border-radius:50%;
    background:linear-gradient(135deg,var(--accent-1),var(--accent-2));
    color:white;font-size:24px;
    box-shadow:0 10px 30px rgba(91,140,255,.45);
    z-index:996;display:grid;place-items:center;
    transition:transform .2s, box-shadow .2s;padding:0;
}
.chat-fab:hover{transform:scale(1.08);box-shadow:0 14px 40px rgba(91,140,255,.6)}
.chat-fab:active{transform:scale(.95)}
.chat-fab::after{
    content:"";position:absolute;top:6px;right:6px;
    width:11px;height:11px;background:#ff5c7a;
    border-radius:50%;border:2px solid var(--bg-1);
    opacity:0;transform:scale(0);
    transition:opacity .2s, transform .2s;
}
.chat-fab.has-unread::after{opacity:1;transform:scale(1)}

.chat-float{
    position:fixed;right:20px;bottom:90px;
    width:330px;height:480px;
    max-height:calc(100vh - 120px);
    background:var(--bg-2);border:1px solid var(--glass-border);
    border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.6);
    z-index:997;display:flex;flex-direction:column;
    overflow:hidden;opacity:0;visibility:hidden;
    transform:translateY(15px) scale(.95);
    transform-origin:bottom right;
    transition:opacity .22s ease, transform .22s cubic-bezier(.2,.8,.2,1), visibility .22s;
}
.chat-float.show{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.chat-float.dragging{transition:none !important;user-select:none}
.chat-float.dragging *{cursor:grabbing !important}

.chat-float-header{
    padding:12px 14px;display:flex;justify-content:space-between;
    align-items:center;
    background:linear-gradient(135deg,var(--accent-1),var(--accent-2));
    color:white;cursor:move;user-select:none;touch-action:none;
}
.chat-float-title{display:flex;align-items:center;gap:8px;
    font-weight:800;font-size:13px}
.chat-online{font-size:10px;font-weight:600;
    padding:2px 7px;border-radius:20px;background:rgba(255,255,255,.22)}
.chat-float-close{
    width:26px;height:26px;border-radius:8px;
    background:rgba(255,255,255,.22);color:white;
    font-size:16px;display:grid;place-items:center;
    padding:0;line-height:1;transition:background .15s;
}
.chat-float-close:hover{background:rgba(255,255,255,.35)}

.chat-float-body{
    flex:1;overflow-y:auto;padding:10px;
    scroll-behavior:smooth;background:rgba(0,0,0,.15);
}
.chat-float-footer{
    padding:10px;border-top:1px solid var(--glass-border);background:var(--bg-2);
}

.chat-empty{height:100%;display:grid;place-items:center;
    color:var(--text-2);font-size:12px}
.chat-message{display:flex;align-items:flex-start;gap:8px;margin:8px 2px}
.chat-message.mine{flex-direction:row-reverse}
.chat-avatar{flex:0 0 31px;width:31px;height:31px;border-radius:50%;display:grid;
    place-items:center;color:white;
    background:linear-gradient(135deg,var(--accent-1),var(--accent-2));
    font-size:11px;font-weight:900;overflow:hidden}
.chat-avatar img{width:100%;height:100%;object-fit:cover}
.chat-content{max-width:78%}
.chat-name{margin:0 4px 3px;color:var(--text-2);font-size:9px}
.chat-bubble{padding:9px 11px;border-radius:15px;color:var(--text-1);
    background:rgba(255,255,255,.07);border:1px solid var(--glass-border);
    font-size:12px;word-break:break-word}
.mine .chat-bubble{background:linear-gradient(135deg,rgba(91,140,255,.28),rgba(124,92,255,.28))}
.chat-time{display:block;margin:3px 4px 0;color:var(--text-2);font-size:8px}
.chat-input-row{display:flex;gap:7px}
.chat-input{flex:1;min-width:0;height:40px;padding:0 12px;outline:none;
    border-radius:12px;border:1px solid var(--glass-border);
    background:rgba(255,255,255,.06);color:var(--text-1);font-size:13px}
.chat-input::placeholder{color:var(--text-2)}
.chat-send{width:44px;height:40px;border-radius:12px;color:white;padding:0;
    background:linear-gradient(135deg,var(--accent-1),var(--accent-2))}

/* ========== CUSTOM BET + ALL-IN ========== */
.chip-custom{
    background:linear-gradient(135deg,rgba(255,215,106,.15),rgba(255,159,67,.15)) !important;
    border-color:rgba(255,215,106,.4) !important;
    color:var(--gold) !important;
    min-width:48px;
}
.chip-custom:hover{
    background:linear-gradient(135deg,rgba(255,215,106,.3),rgba(255,159,67,.3)) !important;
}
.chip-custom.active{
    background:linear-gradient(135deg,var(--gold),#ff9f43) !important;
    border-color:transparent !important;
    color:#101522 !important;
    box-shadow:0 8px 20px rgba(255,215,106,.35) !important;
}

.chip-allin{
    background:linear-gradient(135deg,#ff5c7a,#ff9f43) !important;
    border-color:transparent !important;
    color:white !important;
    font-weight:900 !important;
    min-width:85px;
    box-shadow:0 8px 20px rgba(255,92,122,.3);
}
.chip-allin:hover{filter:brightness(1.1)}
.chip-allin:active{transform:scale(.96)}

.custom-bet-row{
    display:flex;
    gap:7px;
    margin-bottom:11px;
    animation:customBetIn .25s cubic-bezier(.2,.8,.2,1);
}
@keyframes customBetIn{
    from{opacity:0;transform:translateY(-8px)}
    to{opacity:1;transform:translateY(0)}
}
.custom-bet-input{
    flex:1;
    min-width:0;
    height:40px;
    padding:0 13px;
    outline:none;
    border-radius:12px;
    border:1px solid var(--glass-border);
    background:rgba(255,255,255,.06);
    color:var(--text-1);
    font-size:14px;
    font-weight:700;
}
.custom-bet-input:focus{
    border-color:var(--gold);
    box-shadow:0 0 0 2px rgba(255,215,106,.2);
}
.custom-bet-input::-webkit-outer-spin-button,
.custom-bet-input::-webkit-inner-spin-button{
    -webkit-appearance:none;
    margin:0;
}
.custom-bet-input[type=number]{-moz-appearance:textfield}
.custom-bet-ok{
    padding:0 16px;
    height:40px;
    border-radius:12px;
    color:#101522;
    font-weight:800;
    background:linear-gradient(135deg,var(--gold),#ff9f43);
}
.custom-bet-cancel{
    width:40px;
    height:40px;
    border-radius:12px;
    color:var(--text-2);
    background:rgba(255,255,255,.06);
    border:1px solid var(--glass-border);
    font-size:14px;
}

footer{padding:18px 5px 30px;text-align:center;color:var(--text-2);
    font-size:9px;line-height:1.7}

@media(prefers-color-scheme:light){
    :root{--bg-1:#f3f6fc;--bg-2:#fff;--glass-bg:rgba(255,255,255,.72);
        --glass-border:rgba(20,30,60,.1);--text-1:#101522;--text-2:#667085}
    .hand{background:rgba(255,255,255,.55)}
    .chat-bubble,.chat-input{background:rgba(20,30,60,.04)}
    .chat-float-body{background:rgba(20,30,60,.04)}
}
/* Tỉ lệ trả thưởng trên nút cược */
.bet-option .bet-rate{
    display:block;
    font-style:normal;
    font-size:10px;
    color:var(--gold);
    margin-top:3px;
    opacity:.85;
    font-weight:700;
    letter-spacing:.3px;
}
.bet-option.active .bet-rate{
    color:#fff;
    opacity:1;
}

/* Nút All-In active state */
.chip-allin.active{
    filter:brightness(1.15);
    box-shadow:0 0 0 2px #ffd76a, 0 8px 24px rgba(255,92,122,.5) !important;
    animation:allInPulse 1.5s ease-in-out infinite;
}
@keyframes allInPulse{
    0%,100%{box-shadow:0 0 0 2px #ffd76a, 0 8px 24px rgba(255,92,122,.5)}
    50%    {box-shadow:0 0 0 3px #ffd76a, 0 8px 30px rgba(255,92,122,.8)}
}
@media(max-width:430px){
    .wrap{padding:9px}
    .handle{display:none}
    .brand{font-size:18px}
    .hands{gap:7px}
    .hand{min-height:190px;padding:9px}
    .card{width:51px;height:74px}
    .flip-card-face{font-size:15px}
    .cards{gap:5px}
    .bet-option{min-height:66px}
    .online-badge{font-size:9px;padding:3px 7px}
    .chat-fab{width:50px;height:50px;font-size:22px;right:14px;bottom:14px}
    .chat-float{width:calc(100vw - 20px);right:10px;bottom:80px;
        height:60vh;max-height:520px}
    .result-flash-content{padding:20px 32px}
    .result-flash-icon{font-size:42px}
    .result-flash-title{font-size:18px}
    .result-flash-amount{font-size:28px}
    .top-tab{font-size:9px;padding:0 2px}
    .top-item{grid-template-columns:28px 34px 1fr auto;gap:6px;padding:8px 4px}
    .top-avatar{width:32px;height:32px;font-size:13px}
    .top-rank{width:26px;height:26px;font-size:10px}
    .leaderboard-item{grid-template-columns:28px 32px 1fr auto;gap:6px;padding:8px 4px}
    .leaderboard-avatar{width:30px;height:30px;font-size:11px}
    .chip-allin{font-size:11px;min-width:70px;padding:0 10px}
    .chip-custom{font-size:14px;min-width:42px}
}
/* ========== CODE SYSTEM ========== */
.code-btn{
    background:linear-gradient(135deg,rgba(255,215,106,.2),rgba(255,159,67,.2)) !important;
    border-color:rgba(255,215,106,.4) !important;
    color:var(--gold) !important;
    font-weight:800;
}
.code-btn:hover{
    background:linear-gradient(135deg,rgba(255,215,106,.35),rgba(255,159,67,.35)) !important;
}

.code-input{
    width:100%;
    height:55px;
    padding:0 16px;
    margin:8px 0;
    outline:none;
    border-radius:14px;
    border:2px solid var(--glass-border);
    background:rgba(255,255,255,.06);
    color:var(--text-1);
    font-size:20px;
    font-weight:900;
    text-align:center;
    letter-spacing:3px;
    text-transform:uppercase;
    font-family:monospace;
}
.code-input:focus{
    border-color:var(--gold);
    box-shadow:0 0 0 3px rgba(255,215,106,.2);
}
.code-input::placeholder{
    color:var(--text-2);
    text-transform:none;
    letter-spacing:0;
    font-weight:400;
    font-size:14px;
    font-family:inherit;
}

.code-msg{
    min-height:20px;
    margin:8px 0;
    font-size:12px;
    text-align:center;
    font-weight:700;
    line-height:1.5;
}

.code-history{
    margin-top:16px;
    padding-top:14px;
    border-top:1px solid var(--glass-border);
}
.code-history-title{
    font-size:11px;
    color:var(--text-2);
    margin-bottom:8px;
    text-transform:uppercase;
    letter-spacing:1px;
    font-weight:700;
}
.code-history-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:8px 10px;
    margin-bottom:5px;
    border-radius:10px;
    background:rgba(255,255,255,.04);
    font-size:12px;
}
.code-history-item strong{
    color:var(--gold);
    font-family:monospace;
    letter-spacing:1px;
}
.code-history-item small{
    color:var(--text-2);
    font-size:10px;
}
/* ========== DEALER ZONE (nằm trên cùng table, không che bài) ========== */
.dealer-zone{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 14px;
    margin-bottom:12px;
    border-radius:18px;
    background:linear-gradient(135deg,rgba(91,140,255,.08),rgba(124,92,255,.08));
    border:1px solid rgba(255,215,106,.25);
    position:relative;
    z-index:1;
    animation:dealerZoneIn .4s cubic-bezier(.2,.8,.2,1);
    min-height:76px;
    max-height:120px;
}
@keyframes dealerZoneIn{
    from{opacity:0;transform:translateY(-8px)}
    to{opacity:1;transform:translateY(0)}
}

.dealer-avatar{
    width:60px;
    height:60px;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-size:30px;
    background:linear-gradient(135deg,#2a3050,#4b5ca3);
    border:3px solid rgba(255,215,106,.45);
    cursor:pointer;
    transition:transform .3s, box-shadow .3s, border-color .3s;
    box-shadow:0 0 20px rgba(255,215,106,.2);
    user-select:none;
    flex-shrink:0;
    position:relative;
    overflow:hidden;
}
.dealer-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:50%;
}
.dealer-avatar:hover{
    transform:scale(1.06);
    box-shadow:0 0 30px rgba(255,215,106,.5);
    border-color:rgba(255,215,106,.7);
}
.dealer-avatar::after{
    content:"✎";
    position:absolute;
    bottom:-2px;
    right:-2px;
    width:20px;
    height:20px;
    border-radius:50%;
    background:var(--gold);
    color:#101522;
    font-size:11px;
    font-weight:900;
    display:grid;
    place-items:center;
    border:2px solid var(--bg-2);
    opacity:0;
    transition:opacity .2s;
    z-index:2;
}
.dealer-avatar:hover::after{ opacity:1; }

.dealer-avatar.dealing{
    animation:dealerDeal .6s cubic-bezier(.2,.8,.2,1);
}
@keyframes dealerDeal{
    0%  { transform:scale(1) rotate(0); }
    25% { transform:scale(1.15) rotate(-8deg); box-shadow:0 0 40px rgba(255,215,106,.8); }
    50% { transform:scale(1.15) rotate(8deg); }
    75% { transform:scale(1.1) rotate(-5deg); }
    100%{ transform:scale(1) rotate(0); box-shadow:0 0 20px rgba(255,215,106,.2); }
}
.dealer-avatar.talking{ animation:dealerTalk .5s ease; }
@keyframes dealerTalk{
    0%,100%{ transform:scale(1); }
    50%    { transform:scale(1.08); }
}

.dealer-bubble{
    position:relative;
    padding:10px 16px;
    border-radius:14px;
    background:rgba(255,255,255,.08);
    border:1px solid var(--glass-border);
    font-size:12.5px;
    font-weight:600;
    max-width:calc(100% - 90px);
    color:var(--text-1);
    line-height:1.4;
    transition:transform .3s, background .3s;
    word-break:break-word;
}
.dealer-bubble::before{
    content:"";
    position:absolute;
    left:-6px;
    top:50%;
    transform:translateY(-50%) rotate(45deg);
    width:10px;
    height:10px;
    background:rgba(255,255,255,.08);
    border-left:1px solid var(--glass-border);
    border-bottom:1px solid var(--glass-border);
}
.dealer-bubble.updating{ animation:bubblePulse .4s cubic-bezier(.2,.8,.2,1); }
@keyframes bubblePulse{
    0%  { transform:scale(1); background:rgba(255,255,255,.08); }
    50% { transform:scale(1.04); background:rgba(255,215,106,.15); }
    100%{ transform:scale(1); background:rgba(255,255,255,.08); }
}

/* ========== DEALER PICKER ========== */
.dealer-upload-row{
    display:flex;
    gap:8px;
    margin-bottom:6px;
}
.dealer-upload-row .main-btn,
.dealer-upload-row .danger-btn{
    flex:1;
    height:44px;
    border-radius:12px;
    font-weight:800;
    font-size:13px;
}
.danger-btn{
    background:rgba(255,92,122,.15);
    color:#ff8ca1;
    border:1px solid rgba(255,92,122,.3);
    cursor:pointer;
    padding:0 16px;
    transition:background .2s;
}
.danger-btn:hover{ background:rgba(255,92,122,.28); }

.dealer-upload-hint{
    font-size:10px;
    color:var(--text-2);
    text-align:center;
    margin-bottom:8px;
    line-height:1.5;
}

.dealer-picker{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    padding:12px 0;
}
.dealer-option{
    aspect-ratio:1;
    border-radius:16px;
    background:rgba(255,255,255,.05);
    border:2px solid var(--glass-border);
    display:grid;
    place-items:center;
    font-size:34px;
    cursor:pointer;
    transition:all .2s cubic-bezier(.2,.8,.2,1);
    user-select:none;
}
.dealer-option:hover{
    transform:scale(1.08);
    border-color:rgba(255,215,106,.5);
    background:rgba(255,215,106,.1);
}
.dealer-option.active{
    border-color:var(--gold);
    background:linear-gradient(135deg,rgba(255,215,106,.2),rgba(255,159,67,.2));
    box-shadow:0 0 24px rgba(255,215,106,.4);
    transform:scale(1.05);
}

/* ========== SOUND SETTINGS ========== */
.sound-master{
    padding:12px 14px;
    border-radius:14px;
    background:rgba(255,255,255,.05);
    border:1px solid var(--glass-border);
    margin-bottom:12px;
}
.sound-toggle{
    display:flex;
    align-items:center;
    gap:10px;
    cursor:pointer;
    user-select:none;
}
.sound-toggle input{ display:none; }
.sound-toggle-slider{
    position:relative;
    width:44px;
    height:24px;
    border-radius:20px;
    background:rgba(255,255,255,.15);
    transition:background .25s;
    flex-shrink:0;
}
.sound-toggle-slider::after{
    content:"";
    position:absolute;
    top:2px;
    left:2px;
    width:20px;
    height:20px;
    border-radius:50%;
    background:#fff;
    transition:transform .25s cubic-bezier(.4,.15,.2,1);
}
.sound-toggle input:checked + .sound-toggle-slider{
    background:linear-gradient(135deg,var(--accent-1),var(--accent-2));
}
.sound-toggle input:checked + .sound-toggle-slider::after{
    transform:translateX(20px);
}
.sound-toggle-label{
    font-size:14px;
    font-weight:700;
}

.sound-volume-row{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 14px;
    border-radius:14px;
    background:rgba(255,255,255,.05);
    border:1px solid var(--glass-border);
    margin-bottom:14px;
}
.sound-volume-label{
    font-size:12px;
    color:var(--text-2);
    font-weight:700;
    flex-shrink:0;
}
.sound-volume-slider{
    flex:1;
    -webkit-appearance:none;
    height:6px;
    border-radius:4px;
    background:rgba(255,255,255,.15);
    outline:none;
}
.sound-volume-slider::-webkit-slider-thumb{
    -webkit-appearance:none;
    width:18px;
    height:18px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--accent-1),var(--accent-2));
    cursor:pointer;
    box-shadow:0 2px 8px rgba(91,140,255,.4);
}
.sound-volume-slider::-moz-range-thumb{
    width:18px;
    height:18px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--accent-1),var(--accent-2));
    cursor:pointer;
    border:0;
}
.sound-volume-value{
    font-size:12px;
    color:var(--gold);
    font-weight:800;
    min-width:42px;
    text-align:right;
}

.sound-slots{
    display:flex;
    flex-direction:column;
    gap:8px;
}
.sound-slot{
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-rows:auto auto;
    gap:6px 10px;
    padding:10px 12px;
    border-radius:14px;
    background:rgba(255,255,255,.04);
    border:1px solid var(--glass-border);
    transition:border-color .2s;
}
.sound-slot.has-sound{
    border-color:rgba(55,214,122,.4);
    background:rgba(55,214,122,.06);
}
.sound-slot-info{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}
.sound-slot-icon{
    font-size:22px;
    flex-shrink:0;
}
.sound-slot-text strong{
    display:block;
    font-size:13px;
    color:var(--text-1);
}
.sound-slot-text small{
    display:block;
    font-size:10px;
    color:var(--text-2);
    margin-top:2px;
}
.sound-slot-actions{
    display:flex;
    gap:5px;
    align-items:center;
}
.sound-btn{
    width:32px;
    height:32px;
    border-radius:9px;
    background:rgba(255,255,255,.06);
    border:1px solid var(--glass-border);
    color:var(--text-1);
    font-size:14px;
    display:grid;
    place-items:center;
    padding:0;
    cursor:pointer;
    transition:background .2s;
}
.sound-btn:hover{
    background:rgba(255,255,255,.15);
}
.sound-btn.upload{
    background:linear-gradient(135deg,rgba(91,140,255,.2),rgba(124,92,255,.2));
    border-color:rgba(91,140,255,.3);
}
.sound-btn.delete{
    background:rgba(255,92,122,.12);
    border-color:rgba(255,92,122,.25);
}
.sound-btn.delete:hover{
    background:rgba(255,92,122,.3);
}
.sound-slot-status{
    grid-column:1 / -1;
    font-size:10px;
    color:var(--text-2);
    padding-left:32px;
    word-break:break-all;
}
.sound-slot.has-sound .sound-slot-status{
    color:#6ee79c;
}

/* Mobile */
@media(max-width:430px){
    .dealer-zone{gap:9px;padding:9px 11px;margin-bottom:10px;min-height:68px}
    .dealer-avatar{width:52px;height:52px;font-size:26px;border-width:2.5px}
    .dealer-avatar::after{width:18px;height:18px;font-size:10px}
    .dealer-bubble{padding:8px 13px;font-size:11.5px;max-width:calc(100% - 75px)}
    .dealer-picker{grid-template-columns:repeat(4,1fr);gap:8px}
    .dealer-option{font-size:28px;border-radius:14px}
    .sound-slot-icon{font-size:18px}
    .sound-slot-text strong{font-size:12px}
    .sound-btn{width:30px;height:30px;font-size:13px}
}
/* ========== SOUND AVAILABLE LIST ========== */
.sound-available{
    margin-top:14px;
    display:flex;
    flex-direction:column;
    gap:6px;
}
.sound-available-item{
    display:flex;
    align-items:center;
    gap:10px;
    padding:9px 12px;
    border-radius:12px;
    background:rgba(255,255,255,.04);
    border:1px solid var(--glass-border);
    font-size:12px;
}
.sound-available-item.has-sound{
    border-color:rgba(55,214,122,.35);
    background:rgba(55,214,122,.06);
}
.sound-available-icon{font-size:18px;flex-shrink:0}
.sound-available-name{flex:1;font-weight:700;color:var(--text-1)}
.sound-available-status{
    font-size:10px;
    color:var(--text-2);
}
.sound-available-item.has-sound .sound-available-status{
    color:#6ee79c;
}
.sound-available-test{
    width:30px;height:30px;
    border-radius:9px;
    background:rgba(91,140,255,.15);
    border:1px solid rgba(91,140,255,.3);
    color:var(--text-1);
    font-size:12px;
    display:grid;place-items:center;
    padding:0;
    cursor:pointer;
}
.sound-available-test:disabled{
    opacity:.3;
    cursor:not-allowed;
}
.sound-available-test:not(:disabled):hover{
    background:rgba(91,140,255,.3);
}
.sound-note{
    margin-top:14px;
    padding:10px 12px;
    border-radius:12px;
    background:rgba(255,215,106,.08);
    border:1px solid rgba(255,215,106,.2);
    color:var(--text-2);
    font-size:10.5px;
    line-height:1.55;
    text-align:center;
}