/* ==========================================================================
   SICBO CASINO – FULL REWRITE & OPTIMIZED 3D
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700;900&family=Rajdhani:wght@600;700&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }

body, html {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: #0a0a0a;
    font-family: 'Rajdhani', 'Segoe UI', sans-serif;
}

/* ── Canvas bụi vàng ─────────────────────────────────────────── */
#dustCanvas {
    position: fixed; top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: 2; pointer-events: none;
}

/* ── Flash khi mở bát ────────────────────────────────────────── */
.flash-layer {
    position: fixed; top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: radial-gradient(ellipse at center, #ffe88a 0%, #fff 40%, transparent 70%);
    opacity: 0; pointer-events: none; z-index: 999;
}
.flash-on { animation: flashAnim 0.9s ease-out forwards; }
@keyframes flashAnim {
    0%   { opacity: 0.95; }
    40%  { opacity: 0.6; }
    100% { opacity: 0; }
}

/* ── Header ──────────────────────────────────────────────────── */
.casino-header {
    position: absolute; top: 0; left: 0; width: 100%; height: 62px;
    background: linear-gradient(180deg, rgba(0,0,0,0.92) 0%, transparent 100%);
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 28px; z-index: 50;
    border-bottom: 1px solid rgba(255,200,50,0.15);
}
.brand-title {
    color: #ffd700; font-size: 20px; font-weight: bold;
    letter-spacing: 1.5px;
    text-shadow: 0 0 12px rgba(255,215,0,0.6), 0 2px 4px rgba(0,0,0,0.9);
    font-family: 'Cinzel', serif;
}
.balance-box {
    background: linear-gradient(135deg, rgba(0,0,0,0.8), rgba(30,20,0,0.8));
    border: 1px solid rgba(255,215,0,0.5);
    padding: 7px 18px; border-radius: 22px;
    color: #00ffcc; font-weight: bold; font-size: 15px;
    box-shadow: 0 0 12px rgba(255,215,0,0.15), inset 0 1px 0 rgba(255,255,255,0.05);
    transition: transform 0.2s ease;
}
.balance-box.bump { transform: scale(1.08); }

/* ── Game Meta ───────────────────────────────────────────────── */
.game-meta {
    position: absolute; top: 68px; left: 50%;
    transform: translateX(-50%); text-align: center; z-index: 40;
}
.round-id {
    color: #fff; background: rgba(0,0,0,0.55);
    padding: 3px 14px; border-radius: 10px;
    font-weight: bold; font-size: 14px; letter-spacing: 1.5px;
    border: 1px solid rgba(255,215,0,0.35); margin-bottom: 8px;
    text-shadow: 0 1px 3px #000;
}
.timer-ring {
    background: radial-gradient(circle, rgba(20,10,0,0.95) 0%, rgba(0,0,0,0.9) 100%);
    border: 3px solid #ffd700; width: 54px; height: 54px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    margin: 0 auto;
    box-shadow: 0 0 18px rgba(255,215,0,0.5), inset 0 0 10px rgba(255,215,0,0.1);
}
.timer-ring span { color: #fff; font-size: 22px; font-weight: bold; }
.timer-ring.danger {
    border-color: #ff2244;
    box-shadow: 0 0 20px rgba(255,34,68,0.7), inset 0 0 8px rgba(255,0,0,0.2);
    animation: pulseDanger 0.45s infinite alternate;
}
@keyframes pulseDanger {
    from { transform: scale(1); }
    to   { transform: scale(1.1); }
}

/* ==========================================================================
   VÙNG KÍNH BÁT – TỌA ĐỘ CHÍNH XÁC THEO bg-sicbo.webp
   ========================================================================== */
.glass-dome-anchor{
    position:absolute;
    top:33%;
    left:50%;
    transform:translate(-50%,-50%);
    width:230px;
    height:260px;
    z-index:10;
    overflow:hidden;
}

/* ── 3 Viên xí ngầu (TO RÕ – 68px, đổ bóng mạnh, góc camera casino) ───────── */
.dice-container {
    position: absolute;
    z-index: 15;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: perspective(320px) rotateX(48deg) rotate(0deg);
    transition: left 0.3s cubic-bezier(0.25, 1, 0.5, 1),
                top  0.3s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform, left, top;
    transform-origin:center center;
}
.dice-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* CHỈNH LẠI 2 DÒNG DROP-SHADOW DƯỚI ĐÂY */
    filter: drop-shadow(0px 3px 2px rgba(0, 0, 0, 0.9)) 
            drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.5))
            brightness(1.18) contrast(1.08);
}

/* Bóng bát kính */
.dome-glass-layer {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 20;
    pointer-events: none;
    background: radial-gradient(
        ellipse 68% 52% at 50% 48%,
        rgba(255,255,255,0.03) 0%,
        rgba(200,220,255,0.04) 40%,
        rgba(150,180,255,0.02) 70%,
        transparent 100%
    );
    border-radius: 50%;
    transition: transform 0.7s cubic-bezier(0.22,1,0.36,1),
                opacity 0.5s ease;
    transform-origin: center bottom;
}

.dome-glass-layer.dome-open {
    transform: translateY(-90px) scaleX(0.85) scaleY(0.6);
    opacity: 0;
}

.glass-dome-anchor.dome-shake {
    animation: bowlShake 0.07s infinite alternate;
}
@keyframes bowlShake {
    0%   { transform: translate(calc(-50% - 2px), calc(-50% + 1px)); }
    100% { transform: translate(calc(-50% + 2px), calc(-50% - 1px)); }
}

/* ==========================================================================
   ANIMATION XÍ NGẦU – 3 HỘT BAY LUNG TUNG THỰC TẾ LIVE CASINO
   ========================================================================== */

/* Lắc idle nhẹ khi chờ */
@keyframes diceIdleWobble {
    0%   { transform: perspective(320px) rotateX(48deg) rotate(0deg)  translateY(0); }
    30%  { transform: perspective(320px) rotateX(50deg) rotate(4deg)  translateY(-2px); }
    60%  { transform: perspective(320px) rotateX(46deg) rotate(-3deg) translateY(1px); }
    100% { transform: perspective(320px) rotateX(48deg) rotate(0deg)  translateY(0); }
}

/* === HỘT 1: Nảy lên/xuống trong bát + xoay mạnh, lệch trái chút ===
   translateX tối đa ±12px, translateY tối đa -28px → KHÔNG ra ngoài bát */
@keyframes diceBounce1 {
    0%   { transform: perspective(320px) rotateX(48deg) rotate(0deg)   translateX(0px)   translateY(0px)  scale(1);    }
    10%  { transform: perspective(320px) rotateX(22deg) rotate(95deg)  translateX(-8px)  translateY(-26px) scale(1.12); }
    20%  { transform: perspective(320px) rotateX(68deg) rotate(185deg) translateX(10px)  translateY(6px)  scale(0.9);  }
    32%  { transform: perspective(320px) rotateX(18deg) rotate(295deg) translateX(-12px) translateY(-22px) scale(1.1); }
    44%  { transform: perspective(320px) rotateX(70deg) rotate(400deg) translateX(8px)   translateY(5px)  scale(0.92); }
    54%  { transform: perspective(320px) rotateX(25deg) rotate(490deg) translateX(-6px)  translateY(-18px) scale(1.07); }
    64%  { transform: perspective(320px) rotateX(62deg) rotate(575deg) translateX(7px)   translateY(4px)  scale(0.95); }
    74%  { transform: perspective(320px) rotateX(36deg) rotate(648deg) translateX(-5px)  translateY(-12px) scale(1.03); }
    84%  { transform: perspective(320px) rotateX(55deg) rotate(710deg) translateX(4px)   translateY(3px)  scale(0.98); }
    92%  { transform: perspective(320px) rotateX(44deg) rotate(758deg) translateX(-3px)  translateY(-6px) scale(1.01); }
    100% { transform: perspective(320px) rotateX(48deg) rotate(792deg) translateX(0px)   translateY(0px)  scale(1);    }
}

/* === HỘT 2: Nảy thẳng đứng trong bát + xoay ngược chiều ===
   Lệch phải nhẹ, nảy cao hơn hột 1 một chút */
@keyframes diceBounce2 {
    0%   { transform: perspective(320px) rotateX(48deg) rotate(0deg)    translateX(0px)  translateY(0px)  scale(1);    }
    8%   { transform: perspective(320px) rotateX(15deg) rotate(-110deg) translateX(9px)  translateY(-30px) scale(1.14); }
    20%  { transform: perspective(320px) rotateX(72deg) rotate(-225deg) translateX(-7px) translateY(7px)  scale(0.88); }
    30%  { transform: perspective(320px) rotateX(20deg) rotate(-340deg) translateX(11px) translateY(-25px) scale(1.1); }
    42%  { transform: perspective(320px) rotateX(66deg) rotate(-455deg) translateX(-8px) translateY(5px)  scale(0.93); }
    52%  { transform: perspective(320px) rotateX(24deg) rotate(-555deg) translateX(7px)  translateY(-20px) scale(1.08); }
    62%  { transform: perspective(320px) rotateX(60deg) rotate(-640deg) translateX(-5px) translateY(4px)  scale(0.96); }
    72%  { transform: perspective(320px) rotateX(38deg) rotate(-712deg) translateX(6px)  translateY(-13px) scale(1.03); }
    82%  { transform: perspective(320px) rotateX(53deg) rotate(-770deg) translateX(-3px) translateY(2px)  scale(0.98); }
    92%  { transform: perspective(320px) rotateX(46deg) rotate(-810deg) translateX(2px)  translateY(-5px) scale(1.01); }
    100% { transform: perspective(320px) rotateX(48deg) rotate(-840deg) translateX(0px)  translateY(0px)  scale(1);    }
}

/* === HỘT 3: Nảy nhanh nhất, lệch phải, xoay chéo ===
   Chu kỳ ngắn nhất → tạo cảm giác 3 hột lộn xộn không đều */
@keyframes diceBounce3 {
    0%   { transform: perspective(320px) rotateX(48deg) rotate(0deg)   translateX(0px)  translateY(0px)  scale(1);    }
    12%  { transform: perspective(320px) rotateX(20deg) rotate(130deg) translateX(10px) translateY(-28px) scale(1.13); }
    22%  { transform: perspective(320px) rotateX(65deg) rotate(248deg) translateX(-9px) translateY(6px)  scale(0.89); }
    34%  { transform: perspective(320px) rotateX(16deg) rotate(375deg) translateX(12px) translateY(-24px) scale(1.09); }
    46%  { transform: perspective(320px) rotateX(68deg) rotate(490deg) translateX(-7px) translateY(5px)  scale(0.93); }
    56%  { transform: perspective(320px) rotateX(22deg) rotate(590deg) translateX(8px)  translateY(-19px) scale(1.06); }
    66%  { transform: perspective(320px) rotateX(60deg) rotate(678deg) translateX(-6px) translateY(3px)  scale(0.96); }
    76%  { transform: perspective(320px) rotateX(40deg) rotate(752deg) translateX(5px)  translateY(-11px) scale(1.02); }
    86%  { transform: perspective(320px) rotateX(54deg) rotate(814deg) translateX(-3px) translateY(2px)  scale(0.99); }
    94%  { transform: perspective(320px) rotateX(47deg) rotate(854deg) translateX(2px)  translateY(-4px) scale(1.01); }
    100% { transform: perspective(320px) rotateX(48deg) rotate(882deg) translateX(0px)  translateY(0px)  scale(1);    }
}

/* Xóc nhẹ khi chờ (idle shaking state) */
@keyframes diceShakeInBowl {
    0%   { transform: perspective(320px) rotateX(48deg) rotate(0deg)   translateX(0px)  translateY(0px);  }
    15%  { transform: perspective(320px) rotateX(38deg) rotate(55deg)  translateX(-10px) translateY(-14px) scale(1.04); }
    30%  { transform: perspective(320px) rotateX(60deg) rotate(130deg) translateX(8px)  translateY(4px)  scale(0.96); }
    45%  { transform: perspective(320px) rotateX(32deg) rotate(215deg) translateX(-12px) translateY(-16px) scale(1.04); }
    60%  { transform: perspective(320px) rotateX(62deg) rotate(290deg) translateX(9px)  translateY(5px)  scale(0.96); }
    75%  { transform: perspective(320px) rotateX(42deg) rotate(360deg) translateX(-7px)  translateY(-10px) scale(1.02); }
    88%  { transform: perspective(320px) rotateX(55deg) rotate(420deg) translateX(5px)   translateY(3px); }
    100% { transform: perspective(320px) rotateX(48deg) rotate(450deg) translateX(0px)   translateY(0px);  }
}

/* Áp dụng animation riêng cho từng hột – lệch pha, tốc độ khác nhau */
#d1.dice-bouncing-active {
    animation: diceBounce1 0.82s cubic-bezier(0.15, 0.85, 0.35, 1.1) infinite !important;
    animation-delay: 0s !important;
}
#d2.dice-bouncing-active {
    animation: diceBounce2 0.78s cubic-bezier(0.2, 0.8, 0.3, 1.05) infinite !important;
    animation-delay: 0.09s !important;
}
#d3.dice-bouncing-active {
    animation: diceBounce3 0.86s cubic-bezier(0.18, 0.88, 0.32, 1.08) infinite !important;
    animation-delay: 0.18s !important;
}

.dice-idle    { animation: diceIdleWobble 3.2s ease-in-out infinite; }
.dice-shaking { animation: diceShakeInBowl 0.55s cubic-bezier(0.36,0.07,0.19,0.97) infinite !important; }

#d1.dice-idle     { animation-delay: 0s;    }
#d2.dice-idle     { animation-delay: 0.42s; }
#d3.dice-idle     { animation-delay: 0.85s; }

#d1.dice-shaking  { animation-delay: 0s;    }
#d2.dice-shaking  { animation-delay: 0.08s; }
#d3.dice-shaking  { animation-delay: 0.16s; }

/* ── Kết quả ─────────────────────────────────────────────────── */
.result-wrapper {
    position: absolute; bottom: 205px; left: 50%;
    transform: translateX(-50%); z-index: 30; width: 100%; text-align: center;
}
.result-status {
    color: #fff; font-size: 26px; font-weight: 900;
    letter-spacing: 3px; font-family: 'Cinzel', serif;
    text-shadow: 0 2px 6px rgba(0,0,0,0.95), 0 0 8px rgba(0,0,0,0.7);
    transition: all 0.4s ease;
}
.tai-text {
    color: #00ff99 !important;
    text-shadow: 0 0 20px rgba(0,255,140,0.7), 0 0 40px rgba(0,255,140,0.3), 0 2px 5px #000 !important;
    animation: resultPop 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
.xiu-text {
    color: #ff4466 !important;
    text-shadow: 0 0 20px rgba(255,60,90,0.7), 0 0 40px rgba(255,60,90,0.3), 0 2px 5px #000 !important;
    animation: resultPop 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes resultPop {
    0%   { transform: scale(0.5); opacity: 0; }
    70%  { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

/* ── Nút cược ────────────────────────────────────────────────── */
.bet-actions-zone {
    position: absolute; bottom: 84px; left: 50%;
    transform: translateX(-50%); display: flex; gap: 36px; z-index: 30;
}
.bet-trigger {
    width: 148px; height: 50px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-weight: 800; font-size: 22px; color: #fff;
    box-shadow: 0 6px 20px rgba(0,0,0,0.6);
    transition: all 0.12s ease;
    user-select: none; letter-spacing: 2px;
    font-family: 'Cinzel', serif;
    position: relative; overflow: hidden;
}
.bet-trigger::before {
    content: ''; position: absolute; top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    transition: left 0.4s ease;
}
.bet-trigger:hover::before { left: 160%; }
.tai-btn {
    background: linear-gradient(180deg, #27d66d 0%, #0f7a35 50%, #0a5a25 100%);
    border: 1.5px solid #4dffa0;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.xiu-btn {
    background: linear-gradient(180deg, #f05060 0%, #a01830 50%, #7a1020 100%);
    border: 1.5px solid #ff6680;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.bet-trigger:hover  { filter: brightness(1.12); transform: translateY(-2px); }
.bet-trigger:active { transform: scale(0.94) translateY(0); }

/* ── Chip chọn ───────────────────────────────────────────────── */
.chips-selection-bar {
    position: absolute; bottom: 20px; left: 50%;
    transform: translateX(-50%); display: flex; gap: 18px; z-index: 30;
}
.chip {
    width: 48px; height: 48px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 12px; color: #fff; cursor: pointer;
    border: 2.5px dashed rgba(255,255,255,0.5);
    box-shadow: 0 4px 12px rgba(0,0,0,0.6);
    transition: all 0.2s cubic-bezier(0.175,0.885,0.32,1.275);
    position: relative;
}
.chip::after {
    content: ''; position: absolute; inset: 4px;
    border-radius: 50%; border: 1px solid rgba(255,255,255,0.25);
}
.chip-10  { background: radial-gradient(circle at 40% 35%, #ffcc00 0%, #8a6500 100%); }
.chip-50  { background: radial-gradient(circle at 40% 35%, #00b4b4 0%, #004848 100%); }
.chip-100 { background: radial-gradient(circle at 40% 35%, #0077ee 0%, #002266 100%); }
.chip-500 { background: radial-gradient(circle at 40% 35%, #cc00cc 0%, #500050 100%); }
.chip.active {
    transform: translateY(-12px) scale(1.2);
    border: 2.5px solid #fff;
    box-shadow: 0 12px 25px rgba(255,215,0,0.5), 0 0 15px rgba(255,215,0,0.3);
}

/* ── Lịch sử (cầu bài) ───────────────────────────────────────── */
.bridge-history-wrapper {
    position: absolute; bottom: 75px; right: 16px;
    width: 140px; z-index: 30;
}
.bridge-container {
    display: flex; flex-wrap: wrap; gap: 4px;
    max-height: 76px; overflow: hidden;
    flex-direction: row-reverse;
}
.bead {
    width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800; color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    flex-shrink: 0;
}
.bead.tai  { background: radial-gradient(circle at 40% 35%, #27d66d, #0a5a25); }
.bead.xiu  { background: radial-gradient(circle at 40% 35%, #f05060, #7a1020); }

/* ── Bảng chơi ───────────────────────────────────────────────── */
.casino-table-container {
    position: relative; width: 100vw; height: 100vh;
    background: url('../images/bg-sicbo.webp') no-repeat center center;
    background-size: cover;
    display: flex; flex-direction: column;
}

/* ================= MOBILE ================= */

@media (max-width:768px){

    .glass-dome-anchor{

        top:35%;

        left:50%;

        transform: translate(-50%, -50%);

        width:260px;

        height:290px;
    }

}