/* ============================================
   LuckyCoin.bet - Premium Casino Theme
   ============================================ */
:root {
    --gold-l:#ffd700; --gold:#daa520; --gold-d:#b8860b;
    --green:#2ecc40; --green-d:#1a8c2a;
    --bg:#0a0e17; --bg2:rgba(15,20,35,0.85); --bg3:#0f1423; --bg-in:rgba(10,14,23,0.9);
    --br-gold:rgba(218,165,32,0.4); --br-sub:rgba(255,215,0,0.15);
    --tx:#fff; --tx2:#b0b8c8; --tx-gold:#ffd700; --tx-green:#2ecc40;
    --fd:'Orbitron',sans-serif; --fh:'Rajdhani',sans-serif; --fb:'Inter',sans-serif;
    --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:20px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
    font-family:var(--fb);background:var(--bg);color:var(--tx);min-height:100vh;overflow-x:hidden;position:relative;
    background-image:
        radial-gradient(ellipse at 15% 15%, rgba(255,215,0,0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 25%, rgba(46,204,64,0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 85%, rgba(218,165,32,0.05) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 60%, rgba(255,215,0,0.03) 0%, transparent 40%);
}
#particleCanvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;}

.page{display:none;position:relative;z-index:1;min-height:100vh;padding-bottom:80px;}
.page.active{display:block;animation:fadeUp .4s ease;}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

/* ===== LOGO ===== */
.logo-wrap{display:flex;align-items:center;gap:8px;user-select:none;}
.logo-coin{width:auto;height:75px;max-width:250px;object-fit:contain;filter:drop-shadow(0 0 10px rgba(255,215,0,0.5));}
.logo-brand{display:none;}
.lk{display:none;}
.cn{display:none;}
.dt{display:none;}

/* Hero Logo */
.hero-logo-area{text-align:center;margin-bottom:24px;position:relative;display:flex;flex-direction:column;align-items:center;}
.hero-glow-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-60%);width:240px;height:240px;background:radial-gradient(circle,rgba(255,215,0,0.2) 0%,rgba(255,215,0,0.05) 40%,transparent 70%);border-radius:50%;pointer-events:none;animation:glowPulse 3s ease-in-out infinite alternate;}
@keyframes glowPulse{0%{transform:translate(-50%,-60%) scale(.9);opacity:.5;}100%{transform:translate(-50%,-60%) scale(1.3);opacity:1;}}
.hero-coin{width:auto;height:180px;max-width:450px;object-fit:contain;position:relative;z-index:2;filter:drop-shadow(0 0 35px rgba(255,215,0,0.5));animation:coinFloat 3s ease-in-out infinite;}
@keyframes coinFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}
.hero-brand-lg{display:none;}
.hero-tagline{display:none;}
.footer-logo-row{display:flex;align-items:center;gap:8px;justify-content:center;margin-bottom:12px;}
.footer-coin{width:auto;height:55px;max-width:200px;object-fit:contain;}

/* ===== HEADER ===== */
.header{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;position:sticky;top:0;z-index:100;background:linear-gradient(180deg,rgba(10,14,23,0.97),rgba(10,14,23,0.85));backdrop-filter:blur(20px);border-bottom:1px solid var(--br-sub);}
.header::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.5;}
.header-right{display:flex;gap:10px;align-items:center;}
.sub-header{padding:6px 20px;display:flex;gap:10px;}
.breadcrumb{padding:6px 20px;font-size:12px;color:var(--tx2);}
.user-pill{display:flex;align-items:center;gap:6px;padding:6px 14px;border:1px solid rgba(255,215,0,.25);border-radius:8px;color:#daa520;font-size:13px;font-weight:600;cursor:pointer;background:rgba(255,215,0,.05);}
.bal-pill{display:flex;align-items:center;gap:6px;padding:6px 14px;border:1px solid rgba(46,204,64,.35);border-radius:8px;color:#2ecc40;font-size:14px;font-weight:700;background:rgba(46,204,64,.08);}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--fd);font-weight:700;letter-spacing:1.5px;text-transform:uppercase;border:none;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden;text-decoration:none;}
.btn::after{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent,rgba(255,255,255,.15),transparent);transform:rotate(45deg) translateX(-100%);transition:transform .6s ease;}
.btn:hover::after{transform:rotate(45deg) translateX(100%);}
.btn-sm{padding:8px 22px;font-size:11px;border-radius:var(--r-sm);}
.btn-md{padding:12px 32px;font-size:13px;border-radius:var(--r-md);}
.btn-lg{padding:18px 52px;font-size:17px;border-radius:var(--r-md);}
.btn-xl{padding:20px 48px;font-size:18px;border-radius:var(--r-md);}
.btn-full{width:100%;padding:16px;font-size:16px;border-radius:var(--r-md);}
.btn-wide{flex:1;padding:14px 24px;font-size:14px;border-radius:var(--r-md);}

.btn-gold{
    background:linear-gradient(180deg,#ffd700 0%,#daa520 30%,#c5a028 60%,#7a6b1e 100%);
    color:#1a1a00;border:2px solid var(--gold-l);
    text-shadow:0 1px 2px rgba(0,0,0,.3);
    box-shadow:0 0 15px rgba(255,215,0,.4),0 0 30px rgba(255,215,0,.2),inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-gold:hover{transform:translateY(-3px);border-color:var(--gold-l);box-shadow:0 0 25px rgba(255,215,0,.7),0 0 50px rgba(255,215,0,.4),0 0 75px rgba(255,215,0,.2);}

.btn-outline-gold{background:transparent;color:var(--gold);border:2px solid var(--br-gold);}
.btn-outline-gold:hover{background:rgba(255,215,0,.1);border-color:var(--gold);box-shadow:0 0 15px rgba(255,215,0,.3),0 0 30px rgba(255,215,0,.15);}

.btn-green{
    background:linear-gradient(180deg,#2ecc40 0%,#27ae60 50%,#1a8c2a 100%);
    color:#fff;border:2px solid var(--green);
    text-shadow:0 1px 2px rgba(0,0,0,.3);
    box-shadow:0 0 15px rgba(46,204,64,.4),0 0 30px rgba(46,204,64,.2),inset 0 1px 0 rgba(255,255,255,.2);
}
.btn-green:hover{transform:translateY(-3px);box-shadow:0 0 25px rgba(46,204,64,.7),0 0 50px rgba(46,204,64,.4),0 0 75px rgba(46,204,64,.2);}

/* ===== INTENSE GLOW ANIMATIONS ===== */
.glow-gold{animation:glowG 1.5s ease-in-out infinite alternate;}
.glow-green{animation:glowGr 1.5s ease-in-out infinite alternate;}
@keyframes glowG{
    0%{box-shadow:0 0 10px rgba(255,215,0,.5),0 0 20px rgba(255,215,0,.3),0 0 30px rgba(255,215,0,.15),inset 0 1px 0 rgba(255,255,255,.3);}
    100%{box-shadow:0 0 20px rgba(255,215,0,.8),0 0 40px rgba(255,215,0,.5),0 0 60px rgba(255,215,0,.3),0 0 80px rgba(255,215,0,.15),inset 0 1px 0 rgba(255,255,255,.3);}
}
@keyframes glowGr{
    0%{box-shadow:0 0 10px rgba(46,204,64,.5),0 0 20px rgba(46,204,64,.3),inset 0 1px 0 rgba(255,255,255,.2);}
    100%{box-shadow:0 0 20px rgba(46,204,64,.7),0 0 40px rgba(46,204,64,.4),0 0 60px rgba(46,204,64,.2),inset 0 1px 0 rgba(255,255,255,.2);}
}

/* ===== HERO ===== */
.hero{text-align:center;padding:30px 20px 30px;}
.hero-title{font-family:var(--fh);font-size:26px;font-weight:700;color:var(--tx);margin-bottom:28px;text-shadow:0 0 25px rgba(255,215,0,.25);line-height:1.3;}
.green-i{color:var(--tx-green);font-style:italic;text-shadow:0 0 20px rgba(46,204,64,.4);}
.hero .btn-lg{margin-bottom:24px;}
.hero-btns{display:flex;gap:12px;max-width:500px;margin:0 auto;padding:0 10px;}
.hero::after{content:'';display:block;width:60%;max-width:300px;height:1px;background:linear-gradient(90deg,transparent,rgba(46,204,64,.4),rgba(255,215,0,.4),transparent);margin:30px auto 0;}

/* ===== GAMES ===== */
.games-sec{padding:30px 20px;position:relative;}
.sec-title{font-family:var(--fh);font-size:22px;font-weight:700;color:var(--tx);margin-bottom:20px;}
.text-gold{color:var(--tx-gold)!important;} .text-green{color:var(--tx-green)!important;} .text-red{color:#e74c3c!important;}
.games-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px;}
.game-card{
    position:relative;border-radius:var(--r-lg);overflow:hidden;cursor:pointer;
    transition:all .3s ease;aspect-ratio:1;
    border:1.5px solid rgba(255,215,0,.2);background:rgba(15,20,35,.8);
    box-shadow:0 4px 15px rgba(0,0,0,.4);
}
.game-card:hover{transform:translateY(-5px) scale(1.03);border-color:var(--gold);box-shadow:0 8px 30px rgba(0,0,0,.6),0 0 25px rgba(255,215,0,.25);}
.gc-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:12px;gap:8px;}
.gc-icon{filter:drop-shadow(0 4px 12px rgba(0,0,0,.5));transition:transform .3s ease;}
.game-card:hover .gc-icon{transform:scale(1.15);}
.gc-name{font-family:var(--fd);font-size:11px;font-weight:600;color:var(--tx);letter-spacing:1px;}
.gc-glow{position:absolute;bottom:0;left:0;right:0;height:55%;opacity:.35;transition:opacity .3s ease;}
.gc-glow-gold{background:radial-gradient(ellipse at center bottom,rgba(255,215,0,.5),transparent);}
.gc-glow-green{background:radial-gradient(ellipse at center bottom,rgba(46,204,64,.5),transparent);}
.gc-glow-red{background:radial-gradient(ellipse at center bottom,rgba(255,69,60,.5),transparent);}
.gc-glow-orange{background:radial-gradient(ellipse at center bottom,rgba(255,165,0,.5),transparent);}
.game-card:hover .gc-glow{opacity:.7;}
.search-box{margin-bottom:16px;}
.filter-row{display:flex;gap:6px;justify-content:center;margin-bottom:24px;flex-wrap:wrap;}
.fbtn{padding:6px 16px;border:1px solid rgba(255,215,0,.2);border-radius:6px;background:transparent;color:#aab;font-size:12px;cursor:pointer;transition:all .2s;}
.fbtn.active{background:rgba(255,215,0,.12);color:#ffd700;border-color:#ffd700;box-shadow:0 0 8px rgba(255,215,0,.2);}
.fbtn:hover{border-color:#ffd700;color:#ffd700;}

/* ===== REFERRAL ===== */
.referral-sec{padding:40px 20px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--br-sub);position:relative;}
.ref-title{font-family:var(--fh);font-size:24px;font-weight:700;margin-bottom:16px;}
.ref-right{display:flex;position:relative;}
.coin-float{animation:coinBounce 2s ease-in-out infinite;filter:drop-shadow(0 4px 15px rgba(255,215,0,.5));margin-left:-8px;}
.coin-float:first-child{margin-left:0;} .c1{animation-delay:0s;z-index:3;} .c2{animation-delay:.3s;z-index:2;} .c3{animation-delay:.6s;z-index:1;}
@keyframes coinBounce{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}

/* ===== FEATURES ===== */
.features-sec{padding:40px 20px;border-top:1px solid var(--br-sub);}
.feat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:24px;}
.feat-card{background:var(--bg2);border:1px solid var(--br-sub);border-radius:var(--r-lg);padding:24px 16px;text-align:center;cursor:pointer;transition:all .3s;position:relative;overflow:hidden;}
.feat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#ffd700,#2ecc40,#ffd700);opacity:0;transition:opacity .3s;}
.feat-card:hover{border-color:var(--br-gold);transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.4),0 0 15px rgba(255,215,0,.1);}
.feat-card:hover::before{opacity:1;}
.feat-ico{margin-bottom:12px;display:flex;justify-content:center;}
.feat-card h3{font-family:var(--fh);font-size:16px;font-weight:600;color:var(--tx-gold);margin-bottom:8px;}
.feat-card p{font-size:12px;color:var(--tx2);line-height:1.5;}

/* ===== AUTH ===== */
.auth-center{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 90px);padding:20px;}
.auth-card{width:100%;max-width:420px;background:var(--bg2);border:2px solid var(--br-gold);border-radius:var(--r-xl);padding:40px 28px;position:relative;overflow:hidden;animation:cardPop .5s ease;box-shadow:0 0 50px rgba(255,215,0,.1),0 0 100px rgba(255,215,0,.05);}
.auth-card::before{content:'';position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;border-radius:var(--r-xl);background:linear-gradient(135deg,var(--gold),transparent 40%,transparent 60%,var(--gold-d));z-index:-1;opacity:.4;animation:borderGlow 3s ease-in-out infinite alternate;}
@keyframes borderGlow{0%{opacity:.3;}100%{opacity:.7;}}
@keyframes cardPop{from{opacity:0;transform:translateY(20px) scale(.98);}to{opacity:1;transform:translateY(0) scale(1);}}
.auth-glow-top{position:absolute;top:-2px;left:50%;transform:translateX(-50%);width:60%;height:4px;background:linear-gradient(90deg,#ffd700,#daa520,#ffd700);border-radius:0 0 4px 4px;box-shadow:0 0 25px rgba(255,215,0,.7),0 0 50px rgba(255,215,0,.4),0 0 75px rgba(255,215,0,.2);animation:topBar 2s ease-in-out infinite alternate;}
@keyframes topBar{0%{box-shadow:0 0 15px rgba(255,215,0,.4);width:55%;}100%{box-shadow:0 0 35px rgba(255,215,0,.8),0 0 70px rgba(255,215,0,.4);width:65%;}}
.auth-title{font-family:var(--fh);font-size:28px;text-align:center;color:var(--tx-gold);margin-bottom:30px;text-shadow:0 0 30px rgba(255,215,0,.3);}
.auth-form{display:flex;flex-direction:column;gap:18px;}
.inp-wrap{position:relative;display:flex;align-items:center;background:var(--bg-in);border:1.5px solid var(--br-gold);border-radius:var(--r-md);overflow:hidden;transition:all .3s;}
.inp-wrap:focus-within{border-color:var(--gold);box-shadow:0 0 15px rgba(255,215,0,.3);}
.inp-ico{padding:0 8px 0 14px;display:flex;align-items:center;min-width:40px;}
.inp-field{flex:1;background:transparent;border:none;outline:none;padding:14px 14px 14px 0;color:var(--tx);font-family:var(--fb);font-size:14px;}
.inp-field::placeholder{color:var(--tx2);}
.inp-select{appearance:none;cursor:pointer;padding-right:30px;}
.sel-arrow{position:absolute;right:14px;color:var(--gold);pointer-events:none;font-size:12px;}
.eye-btn{background:none;border:none;cursor:pointer;padding:0 12px;display:flex;align-items:center;transition:opacity .2s;}
.eye-btn:hover{opacity:.7;}
.auth-opts{display:flex;align-items:center;justify-content:space-between;font-size:13px;}
.chk-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--tx2);position:relative;padding-left:28px;}
.chk-label input[type="checkbox"]{display:none;}
.chk-box{position:absolute;left:0;width:18px;height:18px;border:1.5px solid var(--br-gold);border-radius:4px;transition:all .2s;}
.chk-label input:checked+.chk-box{background:var(--green);border-color:var(--green);box-shadow:0 0 8px rgba(46,204,64,.4);}
.chk-label input:checked+.chk-box::after{content:'✓';display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:700;width:100%;height:100%;}
.forgot{color:var(--tx2);text-decoration:none;transition:color .2s;} .forgot:hover{color:var(--gold);}
.auth-bottom{margin-top:24px;text-align:center;}
.auth-2fa{font-size:13px;color:var(--tx2);margin-bottom:12px;}
.auth-sw{font-size:14px;color:var(--tx2);}
.auth-sw a{font-weight:600;text-decoration:none;transition:text-shadow .2s;}
.auth-sw a:hover{text-shadow:0 0 15px currentColor;}

/* ===== COLOR GAME ===== */
.cg-section{padding:16px 20px;}
.cg-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px;flex-wrap:wrap;gap:12px;}
.cg-heading{font-family:var(--fh);font-size:22px;font-weight:700;}
.cg-sub{font-size:12px;color:var(--tx2);margin-top:4px;}
.cg-round-box{text-align:right;}
.cg-rlabel{font-size:11px;color:var(--tx2);display:block;}
.cg-timer{font-family:var(--fd);font-size:24px;font-weight:700;color:var(--tx-gold);text-shadow:0 0 15px rgba(255,215,0,.4);}
.cg-timer small{font-size:12px;}
.cg-dots{display:flex;gap:4px;justify-content:flex-end;margin-top:4px;}
.cg-prev{font-size:10px;color:var(--tx2);display:block;margin-top:2px;}
.d-r,.d-g,.d-dk{width:14px;height:14px;border-radius:50%;display:inline-block;vertical-align:middle;}
.d-r{background:radial-gradient(circle at 35% 35%,#ff6b6b,#e74c3c,#c0392b);box-shadow:0 0 4px rgba(231,76,60,.5);}
.d-g{background:radial-gradient(circle at 35% 35%,#6bff6b,#2ecc40,#1a8c2a);box-shadow:0 0 4px rgba(46,204,64,.5);}
.d-dk{background:radial-gradient(circle at 35% 35%,#5a6a7a,#2c3e50,#1a252f);box-shadow:0 0 4px rgba(0,0,0,.5);}

.cg-strip-bar{display:flex;align-items:center;gap:12px;background:rgba(15,20,35,.8);border:1px solid var(--br-sub);border-radius:var(--r-md);padding:12px 16px;margin-bottom:24px;overflow-x:auto;}
.cg-strip-label{font-size:10px;color:var(--tx2);min-width:50px;}
.cg-strip-balls{display:flex;gap:5px;flex:1;align-items:center;}
.sb{width:24px;height:24px;border-radius:50%;flex-shrink:0;}
.sb.r{background:radial-gradient(circle at 35% 35%,#ff6b6b,#e74c3c,#c0392b);box-shadow:0 2px 8px rgba(231,76,60,.5);}
.sb.g{background:radial-gradient(circle at 35% 35%,#6bff6b,#2ecc40,#1a8c2a);box-shadow:0 2px 8px rgba(46,204,64,.5);}
.sb.dk{background:radial-gradient(circle at 35% 35%,#5a6a7a,#2c3e50,#1a252f);box-shadow:0 2px 8px rgba(0,0,0,.5);}
.cg-strip-info{font-size:11px;color:var(--tx2);min-width:50px;text-align:right;}

.cg-balls{display:flex;justify-content:center;gap:30px;margin-bottom:24px;padding:20px 0;}
.cg-ball-col{text-align:center;}
.ball-3d{width:100px;height:100px;border-radius:50%;margin:0 auto 12px;cursor:pointer;transition:transform .3s,box-shadow .3s;}
.ball-3d:hover{transform:scale(1.15);}
.b-red{background:radial-gradient(circle at 35% 30%,#ff8a8a,#e74c3c 40%,#8b0000);box-shadow:0 8px 35px rgba(231,76,60,.6),0 0 20px rgba(231,76,60,.4),inset 0 -5px 15px rgba(0,0,0,.3);}
.b-red:hover{box-shadow:0 8px 50px rgba(231,76,60,.8),0 0 40px rgba(231,76,60,.6),inset 0 -5px 15px rgba(0,0,0,.3);}
.b-green{background:radial-gradient(circle at 35% 30%,#8aff8a,#2ecc40 40%,#0a5c18);box-shadow:0 8px 35px rgba(46,204,64,.6),0 0 20px rgba(46,204,64,.4),inset 0 -5px 15px rgba(0,0,0,.3);}
.b-green:hover{box-shadow:0 8px 50px rgba(46,204,64,.8),0 0 40px rgba(46,204,64,.6),inset 0 -5px 15px rgba(0,0,0,.3);}
.b-dark{background:radial-gradient(circle at 35% 30%,#8a9aaa,#4a5568 40%,#1a202c);box-shadow:0 8px 35px rgba(0,0,0,.6),0 0 20px rgba(100,120,140,.3),inset 0 -5px 15px rgba(0,0,0,.3);}
.b-dark:hover{box-shadow:0 8px 50px rgba(0,0,0,.8),0 0 40px rgba(100,120,140,.4),inset 0 -5px 15px rgba(0,0,0,.3);}
.ball-mult{font-family:var(--fd);font-size:28px;font-weight:900;color:var(--tx-gold);text-shadow:0 0 15px rgba(255,215,0,.4);}
.ball-label{font-family:var(--fd);font-size:12px;font-weight:700;letter-spacing:2px;margin-top:4px;}

.cg-bets{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:10px;}
.cg-bet-card{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-radius:var(--r-md);background:var(--bg-in);font-family:var(--fd);font-size:11px;font-weight:700;letter-spacing:1px;cursor:pointer;transition:all .3s;}
.cg-bet-card:hover{transform:translateY(-2px);}
.red-b{border:1.5px solid rgba(231,76,60,.5);color:#e74c3c;} .red-b:hover{box-shadow:0 0 18px rgba(231,76,60,.4);}
.green-b{border:1.5px solid rgba(46,204,64,.5);color:#2ecc40;} .green-b:hover{box-shadow:0 0 18px rgba(46,204,64,.4);}
.dark-b{border:1.5px solid rgba(138,154,170,.4);color:#8a9aaa;} .dark-b:hover{box-shadow:0 0 18px rgba(138,154,170,.3);}

.cg-amts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px;}
.cg-amt-group{display:flex;gap:6px;justify-content:center;}
.amt-btn{padding:6px 14px;border:1px solid var(--br-sub);border-radius:6px;background:transparent;color:var(--tx2);font-size:11px;font-family:var(--fb);cursor:pointer;transition:all .2s;}
.amt-btn:hover{border-color:var(--gold);color:var(--gold);background:rgba(255,215,0,.06);box-shadow:0 0 10px rgba(255,215,0,.2);}

.cg-action-row{display:flex;align-items:center;gap:16px;margin-bottom:30px;}
.auto-bet-label{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--tx);font-family:var(--fd);letter-spacing:1px;cursor:pointer;}
.toggle-sw{width:36px;height:20px;background:rgba(46,204,64,.35);border-radius:10px;position:relative;display:inline-block;border:1px solid rgba(46,204,64,.5);}
.toggle-dot{width:16px;height:16px;background:#2ecc40;border-radius:50%;position:absolute;top:1px;left:18px;box-shadow:0 0 10px rgba(46,204,64,.6);transition:left .2s;}
.cg-bet-btn{flex:1;}

.cg-history-card{background:rgba(15,20,35,.8);border:1px solid var(--br-sub);border-radius:var(--r-lg);padding:18px;}
.cg-hist-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
.cg-hist-head h3{font-family:var(--fh);font-size:18px;font-weight:700;}

/* ===== DATA TABLE ===== */
.dtable{width:100%;border-collapse:collapse;font-size:12px;}
.dtable thead th{text-align:left;padding:8px 10px;color:#88899a;font-weight:600;border-bottom:1px solid rgba(255,215,0,.1);font-size:11px;text-transform:uppercase;letter-spacing:.5px;}
.dtable tbody td{padding:10px;border-bottom:1px solid rgba(255,255,255,.04);color:#ccd;vertical-align:middle;}
.dtable tbody tr:hover{background:rgba(255,215,0,.04);}

/* ===== WALLET / PROFILE ===== */
.tx-row{display:flex;justify-content:space-between;align-items:center;padding:12px;background:rgba(255,255,255,.03);border-radius:8px;margin-bottom:10px;border:1px solid rgba(255,255,255,.04);}
.tx-left{display:flex;align-items:center;gap:12px;} .tx-ico{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;}
.tx-in{background:rgba(46,204,64,.1);color:#2ecc40;} .tx-out{background:rgba(231,76,60,.1);color:#e74c3c;}
.tx-type{font-size:14px;font-weight:600;} .tx-time{font-size:11px;color:var(--tx2);} .tx-right{text-align:right;}
.profile-avatar{width:80px;height:80px;border-radius:50%;background:var(--bg-in);border:2px solid var(--gold);margin:0 auto 16px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 25px rgba(255,215,0,.2);}
.profile-menu{display:flex;flex-direction:column;gap:10px;}
.pmenu-btn{display:flex;align-items:center;gap:12px;padding:16px;font-size:14px;background:transparent;border:1.5px solid var(--br-gold);border-radius:var(--r-md);color:var(--tx);cursor:pointer;font-family:var(--fb);transition:all .3s;}
.pmenu-btn:hover{background:rgba(255,215,0,.06);border-color:var(--gold);box-shadow:0 0 15px rgba(255,215,0,.2);}
.pmenu-btn.logout-btn{background:rgba(231,76,60,.08);color:#e74c3c;border-color:rgba(231,76,60,.3);margin-top:10px;}
.pmenu-btn.logout-btn:hover{background:rgba(231,76,60,.15);box-shadow:0 0 15px rgba(231,76,60,.3);}

/* ===== MODAL ===== */
.modal-bg{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.88);backdrop-filter:blur(12px);z-index:9999;align-items:center;justify-content:center;padding:20px;}
.modal-bg.active{display:flex;animation:mFade .4s ease;}
@keyframes mFade{from{opacity:0;}to{opacity:1;}}
.modal-box{width:100%;max-width:480px;max-height:90vh;overflow-y:auto;background:linear-gradient(145deg,rgba(15,20,35,.98),rgba(10,14,23,.99));border:2px solid rgba(255,215,0,.7);border-radius:var(--r-xl);padding:40px 20px 30px;text-align:center;position:relative;animation:mSlide .5s ease;box-shadow:0 0 50px rgba(255,215,0,.3),0 0 100px rgba(255,215,0,.15);-webkit-overflow-scrolling:touch;}
@keyframes mSlide{from{transform:scale(.9) translateY(20px);opacity:0;}to{transform:scale(1) translateY(0);opacity:1;}}
.modal-glow-bar{position:absolute;top:-2px;left:50%;transform:translateX(-50%);width:70%;height:3px;background:linear-gradient(90deg,#ffd700,#daa520,#ffd700);box-shadow:0 0 30px rgba(255,215,0,.7),0 0 60px rgba(255,215,0,.4);animation:topBar 2s ease-in-out infinite alternate;}
.modal-x{position:absolute;top:16px;right:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:var(--tx2);width:36px;height:36px;border-radius:50%;font-size:16px;cursor:pointer;transition:all .3s;display:flex;align-items:center;justify-content:center;z-index:10;}
.modal-x:hover{background:rgba(255,215,0,.15);border-color:var(--gold);color:var(--gold);transform:rotate(90deg);}
.modal-rings{display:none;}
.m-ring{position:absolute;border:2px solid var(--gold);border-radius:50%;animation:ringP 2s ease-in-out infinite;}
.m-ring.r1{width:80px;height:80px;opacity:.6;} .m-ring.r2{width:95px;height:95px;opacity:.3;animation-delay:.5s;border-color:var(--gold-d);} .m-ring.r3{width:110px;height:110px;opacity:.15;animation-delay:1s;border-color:var(--gold-l);}
@keyframes ringP{0%,100%{transform:scale(1);opacity:.6;}50%{transform:scale(1.1);opacity:.2;}}
.m-rocket{position:relative;z-index:2;animation:rFloat 3s ease-in-out infinite;}
@keyframes rFloat{0%,100%{transform:translateY(0);}25%{transform:translateY(-8px) rotate(5deg);}75%{transform:translateY(4px) rotate(-3deg);}}
.modal-heading{font-family:var(--fd);font-size:32px;font-weight:800;background:linear-gradient(135deg,#ffd700,#daa520,#b8860b,#daa520);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:10px;filter:drop-shadow(0 0 25px rgba(255,215,0,.4));}
.modal-sub{font-size:14px;color:var(--tx2);margin-bottom:30px;line-height:1.6;}
.modal-timer{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:30px;}
.t-block{display:flex;flex-direction:column;align-items:center;background:rgba(255,215,0,.06);border:1px solid var(--br-gold);border-radius:var(--r-md);padding:12px 16px;min-width:65px;}
.t-num{font-family:var(--fd);font-size:28px;font-weight:800;color:var(--tx-gold);line-height:1;text-shadow:0 0 12px rgba(255,215,0,.4);}
.t-label{font-size:10px;color:var(--tx2);text-transform:uppercase;letter-spacing:1px;margin-top:4px;}
.t-sep{font-family:var(--fd);font-size:24px;color:var(--gold);animation:blink 1s ease-in-out infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.3;}}
.modal-notify{display:flex;gap:8px;margin-bottom:24px;}
.notify-inp{flex:1;background:var(--bg-in);border:1.5px solid var(--br-gold);border-radius:var(--r-md);padding:12px 16px;color:var(--tx);font-family:var(--fb);font-size:13px;outline:none;transition:all .3s;}
.notify-inp:focus{border-color:var(--gold);box-shadow:0 0 15px rgba(255,215,0,.3);}
.notify-inp::placeholder{color:var(--tx2);}

/* ===== BOTTOM NAV ===== */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-around;background:linear-gradient(180deg,rgba(10,14,23,.97),rgba(10,14,23,1));border-top:1px solid var(--br-sub);padding:8px 0;z-index:500;backdrop-filter:blur(20px);}
.bottom-nav::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.5;}
.bnav-item{display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:none;color:var(--tx2);cursor:pointer;padding:6px 16px;transition:all .3s;font-size:10px;font-family:var(--fb);font-weight:500;}
.bnav-item.active{color:var(--tx-gold);} .bnav-item:hover{color:var(--tx-gold);}
.bnav-item svg{transition:transform .2s;} .bnav-item:hover svg{transform:scale(1.1);}

/* ===== FOOTER ===== */
.site-footer{border-top:1px solid var(--br-sub);padding:40px 20px;text-align:center;}
.footer-copy{font-size:12px;color:var(--tx2);margin-bottom:16px;}
.footer-links{display:flex;justify-content:center;gap:24px;}
.footer-links a{color:var(--tx2);text-decoration:none;font-size:13px;transition:color .2s;} .footer-links a:hover{color:var(--gold);}

/* ===== TOAST ===== */
.toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%) translateY(20px);background:linear-gradient(135deg,rgba(46,204,64,.9),rgba(39,174,96,.9));color:#fff;padding:14px 28px;border-radius:var(--r-md);font-family:var(--fb);font-weight:600;font-size:14px;z-index:10000;opacity:0;transition:all .4s;box-shadow:0 8px 30px rgba(46,204,64,.4);}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar{width:6px;} ::-webkit-scrollbar-track{background:var(--bg);} ::-webkit-scrollbar-thumb{background:var(--gold-d);border-radius:3px;} ::-webkit-scrollbar-thumb:hover{background:var(--gold);}

/* ===== RESPONSIVE ===== */
@media(max-width:380px){.hero-title{font-size:20px;}.hero-brand-lg{font-size:30px;}.hero-coin{width:90px;height:90px;}.hero-btns{flex-direction:column;}.games-grid{grid-template-columns:repeat(2,1fr);}.auth-card{padding:30px 20px;}.referral-sec{flex-direction:column;text-align:center;}.cg-balls{gap:16px;}.ball-3d{width:70px;height:70px;}.cg-bets,.cg-amts{grid-template-columns:1fr;}.t-block{min-width:55px;padding:10px 12px;}.t-num{font-size:22px;}}
@media(min-width:600px){.hero-title{font-size:34px;}.hero-brand-lg{font-size:52px;}.hero-coin{width:140px;height:140px;}.sec-title{font-size:28px;}.feat-grid{grid-template-columns:repeat(4,1fr);}.games-grid{max-width:500px;margin-left:auto;margin-right:auto;}.auth-card{padding:50px 40px;}}
@media(min-width:900px){.page{max-width:600px;margin:0 auto;}.bottom-nav{max-width:600px;left:50%;transform:translateX(-50%);border-radius:16px 16px 0 0;}.header{max-width:600px;margin:0 auto;border-radius:0 0 16px 16px;}.modal-box{max-width:500px;}}