/* =========================================
   LOBBY.CSS - CYBERPUNK VIP STYLE (FULL)
   ========================================= */

.lobby-content { 
    position: relative; 
    z-index: 10; 
    padding: 20px; 
    max-width: 1600px; 
    margin: 0 auto; 
    padding-bottom: 80px; 
}

/* --- HEADER & TITLE --- */
.lobby-header { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    margin-bottom: 40px; 
    position: relative; 
    z-index: 20; 
}

#authSection { 
    width: 100%; 
    display: flex; 
    justify-content: flex-end; /* Căn phải nút user */
    padding-right: 20px; 
    margin-bottom: 10px;
}

.glitch-text { 
    font-size: 3.5rem; 
    font-weight: 900; 
    color: #fff; 
    text-shadow: 0 0 10px var(--neon-green), 0 0 20px var(--neon-green); 
    margin: 0; 
    letter-spacing: 5px; 
    text-transform: uppercase; 
    text-align: center;
    animation: textPulse 3s infinite alternate;
}

@media screen and (max-width: 768px) { 
    .glitch-text { font-size: 1.8rem; letter-spacing: 2px; } 
}

@keyframes textPulse { 
    from { text-shadow: 0 0 10px var(--neon-green); } 
    to { text-shadow: 0 0 30px var(--neon-green), 0 0 10px #fff; } 
}

.server-info {
    margin-top: 15px; 
    font-size: 1rem; 
    letter-spacing: 2px; 
    color: #aaa;
    background: rgba(0,0,0,0.6); 
    padding: 8px 25px; 
    border-radius: 4px; 
    border: 1px solid #333;
    display: flex; 
    gap: 15px;
    align-items: center;
}
.blink { animation: blinkStatus 1s infinite; }
@keyframes blinkStatus { 50% { opacity: 0.5; } }

/* --- USER PANEL --- */
.btn-join { 
    background: rgba(0, 255, 65, 0.1); 
    border: 1px solid var(--neon-green); 
    color: var(--neon-green); 
    padding: 10px 25px; 
    font-family: var(--font-display); 
    cursor: pointer; 
    transition: 0.3s; 
    font-weight: bold; 
    border-radius: 4px;
}
.btn-join:hover { background: var(--neon-green); color: #000; box-shadow: 0 0 20px var(--neon-green); }

.user-panel-cyber { 
    display: flex; 
    align-items: center; 
    gap: 15px; 
    background: rgba(0,20,0,0.8); 
    padding: 8px 15px; 
    border-radius: 4px; 
    border: 1px solid #00ff41; 
    box-shadow: 0 0 10px rgba(0,255,65,0.2);
}
.user-name { font-weight: bold; color: #fff; font-size: 1rem; }
.token-badge { 
    background: #003b0f; 
    color: #00ff41; 
    padding: 4px 10px; 
    border-radius: 2px; 
    font-weight: bold; 
    font-family: var(--font-main); 
    border: 1px solid #00ff41;
}
.btn-logout-cyber { 
    background: #d00; 
    color: #fff; 
    border: none; 
    padding: 5px 10px; 
    cursor: pointer; 
    font-weight: bold; 
    border-radius: 2px;
}

/* --- GRID SYSTEM --- */
.tables-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); 
    gap: 30px; 
    padding: 0 10px;
}
@media screen and (max-width: 600px) { .tables-grid { grid-template-columns: 1fr; } }

/* --- CARD BÀN VIP (CYBER STYLE) --- */
.casino-card { 
    background: #050505; /* Nền đen sâu */
    border: 1px solid #333; 
    position: relative; 
    height: 230px; 
    cursor: pointer;
    transition: all 0.3s ease;
    /* Cắt góc kiểu công nghệ (Vát góc) */
    clip-path: polygon(
        15px 0, 100% 0, 
        100% calc(100% - 15px), calc(100% - 15px) 100%, 
        0 100%, 0 15px
    );
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

/* Hiệu ứng Hover: Sáng viền xanh */
.casino-card:hover { 
    transform: translateY(-5px); 
    border-color: var(--neon-green);
    box-shadow: 0 0 20px rgba(0, 255, 65, 0.3); 
}

/* Trang trí góc thẻ bằng pseudo-elements */
.casino-card::before {
    content: ''; position: absolute; top: 0; left: 0; width: 20px; height: 20px;
    border-top: 3px solid var(--neon-green); border-left: 3px solid var(--neon-green);
}
.casino-card::after {
    content: ''; position: absolute; bottom: 0; right: 0; width: 20px; height: 20px;
    border-bottom: 3px solid var(--neon-green); border-right: 3px solid var(--neon-green);
}

/* HEADER CỦA CARD */
.cc-header { 
    background: linear-gradient(90deg, #0a200a, #000); 
    border-bottom: 1px solid #222;
    padding: 0 20px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    height: 50px;
}
.cc-name { 
    font-family: var(--font-display); 
    font-weight: 900; 
    color: #fff; 
    font-size: 1.1rem; 
    letter-spacing: 1px; 
    text-shadow: 0 0 5px rgba(255,255,255,0.5);
}

/* BODY CỦA CARD */
.cc-body { 
    display: flex; 
    height: calc(100% - 50px); 
    background: #0b0b0b; 
}

/* BẢNG CẦU (GRID AREA) */
.cc-grid-area { 
    flex: 1; 
    background: #fff; /* Nền trắng cho hạt cầu nổi */
    display: flex; 
    border-right: 2px solid #222;
    overflow: hidden; 
} 
.road-grid-wrapper { display: flex; height: 100%; width: 100%; }
.road-col { 
    width: 16.66%; /* Chia đều 6 cột */
    border-right: 1px solid #ccc; 
    display: flex; flex-direction: column; 
}
.road-cell { 
    flex: 1; 
    border-bottom: 1px solid #ccc; 
    display: flex; justify-content: center; align-items: center; 
}

/* HẠT CẦU */
.bead { 
    width: 16px; height: 16px; 
    border-radius: 50%; 
    border: 3px solid; 
    position: relative; 
}
.bead.p { border-color: #007bff; } /* Player xanh dương */
.bead.b { border-color: #dc3545; } /* Banker đỏ */
.bead.has-tie::after {
    content: ''; position: absolute; width: 3px; height: 20px; background: #28a745; 
    top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg);
}

/* KHUNG DỰ ĐOÁN (BÊN PHẢI) */
.cc-predict-area { 
    width: 120px; 
    background: #000; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    text-align: center; 
    position: relative;
    padding: 10px;
}
/* Hiệu ứng nền lưới mờ */
.cc-predict-area::before {
    content: ''; position: absolute; top:0; left:0; width:100%; height:100%;
    background-image: linear-gradient(#111 1px, transparent 1px), linear-gradient(90deg, #111 1px, transparent 1px);
    background-size: 10px 10px; opacity: 0.5; z-index: 0;
}

.cc-rate { 
    position: relative; z-index: 1;
    font-family: var(--font-display); 
    font-weight: 900; 
    color: #000; 
    background: var(--neon-green); 
    padding: 12px 0; 
    width: 100%; 
    font-size: 1.4rem; 
    margin-top: 5px; 
    /* Cắt góc nút WIN */
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    box-shadow: 0 0 15px var(--neon-green);
    animation: glowRate 2s infinite alternate;
}
@keyframes glowRate { 
    from { box-shadow: 0 0 10px var(--neon-green); opacity: 0.9; } 
    to { box-shadow: 0 0 25px var(--neon-green); opacity: 1; } 
}

/* --- MODAL (POPUP XÁC NHẬN) --- */
.custom-modal-overlay {
    display: none; 
    position: fixed; top: 0; left: 0; 
    width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.9); 
    z-index: 99999; 
    justify-content: center; align-items: center;
    backdrop-filter: blur(5px);
}
.custom-modal-box {
    background: #050505; 
    border: 2px solid var(--neon-green);
    padding: 30px; 
    width: 90%; max-width: 450px;
    box-shadow: 0 0 50px rgba(0, 255, 65, 0.2);
    text-align: center; 
    position: relative;
    border-radius: 8px;
}
.modal-title { 
    font-family: var(--font-display); 
    font-size: 1.5rem; 
    color: var(--neon-green); 
    margin-bottom: 20px; 
    border-bottom: 1px solid #333; 
    padding-bottom: 10px;
}
.modal-actions { display: flex; gap: 10px; margin-top: 20px; }
.btn-modal { 
    flex: 1; padding: 12px; border: none; font-weight: bold; cursor: pointer; 
    font-family: var(--font-display); 
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    transition: 0.2s;
}
.btn-cancel { background: #333; color: #fff; border: 1px solid #555; }
.btn-cancel:hover { background: #555; }
.btn-confirm { background: var(--neon-green); color: #000; box-shadow: 0 0 15px var(--neon-green); }
.btn-confirm:hover { transform: translateY(-2px); box-shadow: 0 0 25px var(--neon-green); }
/* --- CẬP NHẬT LOBBY CSS (RATE COLORS & VIP EFFECT) --- */

/* 1. MÀU SẮC TỶ LỆ THẮNG */

/* Mặc định (70% - 90%): Xanh Neon (Giữ nguyên class .cc-rate cũ) */

/* Tỷ lệ thấp (< 70%): MÀU ĐỎ */
.cc-rate.rate-low {
    background: #ff003c !important;
    color: #fff !important;
    box-shadow: 0 0 10px #ff003c !important;
}

/* Tỷ lệ cao (> 90%): MÀU VÀNG GOLD + NHẤP NHÁY */
.cc-rate.rate-high {
    background: #ffd700 !important;
    color: #000 !important;
    box-shadow: 0 0 15px #ffd700, 0 0 30px #ffd700 !important;
    animation: pulseGold 1s infinite alternate;
}
@keyframes pulseGold {
    0% { transform: scale(1); box-shadow: 0 0 15px #ffd700; }
    100% { transform: scale(1.05); box-shadow: 0 0 30px #ffd700; }
}

/* 2. HIỆU ỨNG CARD VIP (CHO BÀN > 90%) - LED CHẠY VIỀN */
.casino-card.card-vip {
    /* Xóa border cũ để dùng border led */
    border: none;
    /* Padding tạo khoảng cách cho viền LED */
    padding: 3px; 
    background: transparent;
    overflow: hidden;
    position: relative;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.2); /* Glow vàng nhẹ */
    /* Bỏ clip-path cũ nếu muốn viền chạy vuông vức đẹp hơn, hoặc giữ lại tùy ý */
    clip-path: none; 
    border-radius: 6px;
}

/* Lớp LED chạy bên dưới */
.casino-card.card-vip::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    /* Gradient vàng + xanh tạo hiệu ứng VIP */
    background: conic-gradient(
        transparent, 
        transparent, 
        transparent, 
        #ffd700,
        #00ff41
    );
    animation: rotateCardBorder 3s linear infinite;
    z-index: 0;
}

/* Lớp nền che ở giữa để lộ viền */
.casino-card.card-vip::after {
    content: '';
    position: absolute;
    inset: 3px; /* Khớp với padding */
    background: #050505;
    border-radius: 4px;
    z-index: 0;
}

/* Đảm bảo nội dung nổi lên trên nền giả */
.casino-card.card-vip .cc-header,
.casino-card.card-vip .cc-body {
    position: relative;
    z-index: 1;
}

@keyframes rotateCardBorder {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}