@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

*{margin:0;padding:0;box-sizing:border-box;text-decoration:none;list-style:none}
:root{
  --bg-primary:#1B2D38;
  --bg-secondary:#0F202F;
  --bg-tertiary:#2F4553;
  --bg-deep:#0E212F;
  --bg-hover:#071824;
  --bg-input:#0E212F;
  --accent:#00e701;
  --accent-hover:#00c700;
  --accent-shadow:#006601;
  --blue:#4391e7;
  --blue-dark:#2b78ca;
  --orange:#f7931a;
  --red:#ed4245;
  --purple:#9c27b0;
  --text:#fff;
  --text-sec:#b1bad3;
  --text-muted:#557187;
  --border:#2F4553;
  --card:#213743;
  --font:'Poppins',-apple-system,BlinkMacSystemFont,sans-serif;
}
html,body{height:100%;font-family:var(--font);background:var(--bg-primary);color:var(--text);overflow:hidden;-webkit-font-smoothing:antialiased}

.app{display:flex;height:100vh;width:100vw;overflow:hidden}

/* ===== SIDEBAR ===== */
.app-sidebar{width:240px;min-width:240px;background:var(--bg-secondary);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden;z-index:100;border-right:1px solid rgba(255,255,255,.04)}
.sb-head{display:flex;height:60px;align-items:center;box-shadow:0 2px 4px rgba(0,0,0,.2);padding:0 4px 0 8px;position:relative}
.sb-head-tab{display:flex;align-items:center;justify-content:center;height:36px;padding:0 16px;border-radius:25px;cursor:pointer;font-size:13px;font-weight:600;color:var(--text-sec);transition:all .15s;white-space:nowrap}
.sb-head-tab:hover{background:var(--bg-hover)}
.sb-head-tab.active{background:var(--bg-tertiary);color:var(--text)}
.sb-head-toggle{position:absolute;right:8px;display:flex;align-items:center;justify-content:center;height:32px;width:32px;background:var(--bg-tertiary);border-radius:50%;cursor:pointer;transition:background .15s;border:none;color:var(--text-sec)}
.sb-head-toggle:hover{background:#415867;color:var(--text)}
.sb-body{flex:1;overflow-y:auto;padding:6px 6px;width:100%}
.sb-body::-webkit-scrollbar{width:4px}
.sb-body::-webkit-scrollbar-track{background:transparent}
.sb-body::-webkit-scrollbar-thumb{border-radius:25px;background:var(--border)}
.sb-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text-muted);padding:14px 10px 6px}
.sb-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:none;background:none;color:var(--text-sec);font-size:13px;font-weight:600;font-family:var(--font);cursor:pointer;border-radius:8px;transition:all .1s;text-align:left}
.sb-item:hover{background:var(--bg-hover);color:var(--text)}
.sb-item.active{background:var(--bg-tertiary);color:var(--text)}
.sb-item svg{width:18px;height:18px;flex-shrink:0;opacity:.6}
.sb-item.active svg{opacity:1;color:var(--accent)}
.sb-sep{width:90%;height:1px;background:var(--border);margin:8px auto}
.sb-footer{margin-top:auto;padding:12px 10px 16px;border-top:1px solid rgba(255,255,255,.04)}
.play-badge{display:inline-block;background:rgba(0,231,1,.08);color:var(--accent);font-size:10px;font-weight:700;padding:4px 10px;border-radius:4px;letter-spacing:.6px;margin-bottom:4px}
.sb-footer p{font-size:11px;color:var(--text-muted);line-height:1.4}

/* ===== MAIN ===== */
.app-main{display:flex;flex-direction:column;flex:1;overflow:hidden;min-width:0}

/* ===== HEADER ===== */
.header{display:flex;align-items:center;justify-content:space-between;padding:0 16px;height:60px;background:var(--bg-secondary);box-shadow:0 2px 4px rgba(0,0,0,.2);position:relative;z-index:100;flex-shrink:0}
.h-left{display:flex;align-items:center;gap:14px}
.menu-btn{display:none;background:none;border:none;color:var(--text-sec);cursor:pointer;padding:4px}
.logo{display:flex;align-items:center;gap:8px;cursor:pointer}
.logo-text{font-size:22px;font-weight:800;color:var(--text);letter-spacing:-.5px}
.h-center{flex:1;display:flex;justify-content:center;max-width:400px;margin:0 auto}
.search{display:flex;align-items:center;gap:8px;background:var(--bg-deep);border-radius:8px;padding:0 14px;height:40px;width:100%;transition:border .15s;border:1px solid transparent;cursor:text}
.search:focus-within{border-color:var(--blue)}
.search svg{color:var(--text-muted);flex-shrink:0}
.search input{background:none;border:none;outline:none;color:var(--text);font-size:13px;width:100%;font-family:var(--font)}
.search input::placeholder{color:var(--text-muted)}
.h-right{display:flex;align-items:center;gap:6px}
.wallet{display:flex;align-items:center;background:var(--bg-deep);border-radius:6px;height:40px;overflow:hidden}
.wallet-balance{display:flex;align-items:center;gap:6px;padding:0 12px;font-size:13px;font-weight:600;cursor:pointer;height:100%;transition:background .1s;border-radius:6px 0 0 6px}
.wallet-balance:hover{background:var(--bg-hover)}
.wallet-balance .icon{color:var(--accent);font-weight:800;font-size:14px}
.wallet-deposit{background:var(--blue-dark);color:#fff;border:none;padding:0 16px;height:100%;font-size:13px;font-weight:700;font-family:var(--font);cursor:pointer;transition:background .15s;border-radius:0 6px 6px 0}
.wallet-deposit:hover{background:#1f6cb8}
.nav-icon{display:flex;align-items:center;justify-content:center;height:36px;width:36px;border-radius:8px;background:none;border:none;color:var(--text-sec);cursor:pointer;transition:all .1s}
.nav-icon:hover{background:var(--bg-hover);color:var(--text)}

/* ===== GAME CONTAINER ===== */
.game-container{display:flex;flex:1;overflow:hidden}
.game-sidebar{width:350px;min-width:350px;background:var(--bg-deep);display:flex;flex-direction:column;overflow-y:auto;border-left:1px solid rgba(255,255,255,.04)}
.game-display{flex:1;display:flex;flex-direction:column;background:var(--bg-primary);overflow:auto;min-width:0}

/* ===== BET PANEL ===== */
.bet-panel{padding:16px;display:flex;flex-direction:column;gap:10px}
.mode-tabs{display:flex;background:var(--bg-primary);border-radius:25px;overflow:hidden;padding:3px}
.mode-tab{flex:1;padding:8px;border:none;background:none;color:var(--text-sec);font-size:12px;font-weight:700;font-family:var(--font);cursor:pointer;transition:all .15s;border-radius:25px}
.mode-tab.active{background:var(--accent);color:#000}
.bp-field{display:flex;flex-direction:column;gap:4px}
.bp-label{font-size:12px;font-weight:600;color:var(--text-sec)}
.bp-input-wrap{display:flex;background:var(--bg-input);border:1px solid var(--border);border-radius:25px;overflow:hidden;transition:border .15s}
.bp-input-wrap:focus-within{border-color:var(--accent)}
.bp-icon{display:flex;align-items:center;justify-content:center;width:38px;color:var(--accent);font-weight:800;font-size:13px;border-right:1px solid var(--border);flex-shrink:0}
.bp-input{flex:1;background:none;border:none;padding:10px;color:var(--text);font-size:13px;font-family:var(--font);outline:none;min-width:0}
.bp-input::placeholder{color:var(--text-muted)}
.bp-half,.bp-double{display:flex;align-items:center;justify-content:center;width:34px;background:none;border:none;color:var(--text-sec);font-size:11px;font-weight:700;font-family:var(--font);cursor:pointer;transition:color .12s;flex-shrink:0}
.bp-half:hover,.bp-double:hover{color:var(--text)}
.bp-half{border-right:1px solid var(--border)}
.bp-radio-group{display:flex;gap:4px}
.bp-radio{flex:1;padding:8px 4px;border:1px solid var(--border);background:var(--bg-input);color:var(--text-sec);font-size:11px;font-weight:600;font-family:var(--font);cursor:pointer;border-radius:25px;transition:all .15s}
.bp-radio.active{background:var(--accent);color:#000;border-color:var(--accent)}
.bp-radio:hover:not(.active){border-color:var(--text-muted)}
.bp-profit-box{background:var(--bg-primary);border:1px solid var(--border);border-radius:8px;padding:10px;text-align:center}
.bp-profit-label{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.3px;margin-bottom:2px}
.bp-profit-val{font-size:16px;font-weight:700;color:var(--accent)}
.btn-bet{background:var(--accent);color:#000;border:none;border-radius:25px;padding:12px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:1px;font-family:var(--font);cursor:pointer;width:100%;transition:all .15s}
.btn-bet:hover{background:var(--accent-hover)}
.btn-bet:active{transform:scale(.98)}
.btn-cashout{background:var(--red);color:#fff;border:none;border-radius:25px;padding:12px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:1px;font-family:var(--font);cursor:pointer;width:100%;transition:all .15s}
.btn-cashout:hover{background:#d63553}
.btn-cashout:active{transform:scale(.98)}

/* ===== PROVABLY FAIR FOOTER LINK ===== */
.bp-fair-wrap{margin-top:4px;padding-top:8px;border-top:1px solid rgba(255,255,255,.04)}
.bp-fair{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:8px;background:none;border:1px solid var(--border);border-radius:8px;color:var(--text-muted);font-size:11px;font-weight:600;font-family:var(--font);cursor:pointer;transition:all .15s}
.bp-fair:hover{color:var(--text-sec);border-color:var(--text-muted);background:rgba(255,255,255,.02)}
.bp-fair svg{opacity:.5}

/* ===== GAME DISPLAY ===== */
.game-top-bar{display:flex;align-items:center;justify-content:space-between;padding:0 20px;height:44px;border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0}
.game-top-bar h2{font-size:14px;font-weight:700}
.game-top-bar .info{font-size:12px;color:var(--text-muted)}
.game-center{flex:1;display:flex;align-items:center;justify-content:center;padding:20px;overflow:auto}

/* ===== MINES ===== */
.mines-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;width:100%;max-width:380px}
.mine-tile{aspect-ratio:1;background:var(--bg-tertiary);border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s;user-select:none;min-width:56px;min-height:56px;border:none;padding:0}
.mine-tile:hover:not(.revealed){background:#3a5565}
.mine-tile:active:not(.revealed){transform:scale(.95)}
.mine-tile.revealed{cursor:default}
.mine-tile.revealed.gem{background:rgba(0,231,1,.12);border:2px solid rgba(0,231,1,.3)}
.mine-tile.revealed.mine{background:rgba(237,66,69,.12);border:2px solid rgba(237,66,69,.3)}
.mine-tile svg{display:block}

/* ===== PLINKO ===== */
.plinko-wrap{display:flex;flex-direction:column;align-items:center;width:100%;height:100%}
.plinko-wrap canvas{border-radius:8px;display:block;max-width:100%}

/* ===== DICE ===== */
.dice-wrap{display:flex;flex-direction:column;align-items:center;gap:24px;width:100%;max-width:480px}
.dice-circle{width:140px;height:140px;border-radius:50%;background:var(--bg-secondary);border:3px solid var(--accent);display:flex;align-items:center;justify-content:center;font-size:38px;font-weight:800;color:var(--accent);transition:border-color .25s,color .25s}
.dice-toggles{display:flex;gap:6px}
.dice-toggles button{padding:10px 40px;border:1px solid var(--border);background:var(--bg-secondary);color:var(--text-sec);font-size:13px;font-weight:600;font-family:var(--font);cursor:pointer;border-radius:25px;transition:all .12s}
.dice-toggles button.active{background:var(--accent);color:#000;border-color:var(--accent)}
.dice-toggles button:hover:not(.active){border-color:var(--text-muted)}
.dice-slider-wrap{width:100%;padding:0 8px}
.dice-slider{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:4px;background:linear-gradient(to right,var(--accent) 0%,var(--accent) 50%,var(--bg-input) 50%);outline:none;cursor:pointer}
.dice-slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--accent);cursor:pointer;border:3px solid var(--bg-secondary)}
.dice-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--accent);cursor:pointer;border:3px solid var(--bg-secondary)}
.dice-labels{display:flex;justify-content:space-between;font-size:11px;color:var(--text-muted);margin-top:4px}

/* ===== LIMBO ===== */
.limbo-wrap{display:flex;flex-direction:column;align-items:center;gap:20px;flex:1;justify-content:center}
.limbo-result{font-size:64px;font-weight:800;color:var(--accent);transition:all .25s}
.limbo-result.lose{color:var(--red)}
.limbo-result.idle{color:var(--text-muted);font-size:20px;font-weight:500}
.limbo-target{font-size:14px;color:var(--text-sec)}

/* ===== CRASH ===== */
.crash-wrap{display:flex;flex-direction:column;align-items:center;width:100%;height:100%;position:relative}
.crash-wrap canvas{border-radius:8px;display:block;max-width:100%}
.crash-multiplier{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:52px;font-weight:800;color:var(--accent);text-shadow:0 4px 20px rgba(0,0,0,.5);pointer-events:none}

/* ===== KENO ===== */
.keno-wrap{display:flex;flex-direction:column;align-items:center;width:100%;max-width:500px}
.keno-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;width:100%}
.keno-tile{aspect-ratio:1;background:var(--bg-secondary);border:1px solid var(--border);border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:var(--text-sec);transition:all .12s;min-width:40px;min-height:40px}
.keno-tile:hover{border-color:var(--text-muted);color:var(--text)}
.keno-tile.picked{background:var(--accent);color:#000;border-color:var(--accent)}
.keno-tile.drawn{opacity:.4;pointer-events:none}
.keno-tile.hit{background:var(--accent);color:#000;border-color:var(--accent);opacity:1}
.keno-tile.miss{background:rgba(237,66,69,.15);border-color:rgba(237,66,69,.3);color:var(--red);opacity:1}

/* ===== BACCARAT ===== */
.baccarat-wrap{display:flex;align-items:center;gap:40px;flex:1;justify-content:center}
.bac-hand{display:flex;flex-direction:column;align-items:center;gap:12px}
.bac-label{font-size:16px;font-weight:700;color:var(--text-sec)}
.bac-cards{display:flex;gap:8px;min-height:120px}
.bac-card{width:80px;height:115px;background:#fff;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.3);position:relative}
.bac-card-back{background:linear-gradient(135deg,#1a5276 0%,#2e86c1 50%,#1a5276 100%);align-items:center;justify-content:center}
.bac-card-back-pattern{width:70%;height:70%;border:2px solid rgba(255,255,255,.2);border-radius:5px;background:repeating-linear-gradient(45deg,transparent,transparent 4px,rgba(255,255,255,.05) 4px,rgba(255,255,255,.05) 8px)}
.bac-card-rank{font-size:24px;font-weight:800}
.bac-card-suit{font-size:22px}
.bac-card-val{position:absolute;bottom:4px;right:4px;background:rgba(0,0,0,.06);border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:#333}
.bac-score{font-size:36px;font-weight:800;color:var(--accent)}
.bac-vs{font-size:24px;font-weight:800;color:var(--text-muted)}

/* ===== WHEEL ===== */
.wheel-wrap{display:flex;flex-direction:column;align-items:center;gap:20px;position:relative}
.wheel-pointer{position:absolute;top:-5px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-top:20px solid var(--accent);z-index:10}
.wheel-result{font-size:18px;font-weight:700;color:var(--text-sec)}

/* ===== HILO ===== */
.hilo-wrap{display:flex;flex-direction:row;align-items:center;gap:60px;flex:1;justify-content:center}
.hilo-current,.hilo-next{display:flex;align-items:center;justify-content:center;min-height:180px}
.hilo-card-wrap{perspective:800px;width:120px;height:170px;display:inline-block;position:relative}
.hilo-card-inner{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .5s ease}
.hilo-card-inner.flipped{transform:rotateY(0)}
.hilo-card-inner.not-flipped{transform:rotateY(180deg)}
.hilo-card{width:120px;height:170px;background:#fff;border-radius:10px;display:flex;flex-direction:column;position:relative;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.4);backface-visibility:hidden}
.hilo-card.face-up{padding:6px}
.hilo-card.face-down{background:linear-gradient(135deg,#1a5276 0%,#2e86c1 50%,#1a5276 100%);align-items:center;justify-content:center}
.card-back-pattern{width:80%;height:80%;border:3px solid rgba(255,255,255,.2);border-radius:6px;background:repeating-linear-gradient(45deg,transparent,transparent 5px,rgba(255,255,255,.05) 5px,rgba(255,255,255,.05) 10px)}
.card-corner{display:flex;flex-direction:column;align-items:center;line-height:1}
.card-rank{font-size:16px;font-weight:800}
.card-suit{font-size:14px}
.top-left{position:absolute;top:6px;left:6px}
.bottom-right{position:absolute;bottom:6px;right:6px;transform:rotate(180deg)}
.card-center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}
.card-center-rank{font-size:48px;font-weight:800;line-height:1}
.card-center-suit{font-size:32px;line-height:1}
.card-value-badge{position:absolute;bottom:4px;right:4px;background:rgba(0,0,0,.08);color:inherit;border-radius:50%;width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800}
.hilo-streak{font-size:14px;color:var(--text-sec)}
@keyframes cardDeal{0%{transform:translateY(-60px) scale(.85) rotate(-8deg);opacity:0}50%{transform:translateY(4px) scale(1.02) rotate(1deg);opacity:1}100%{transform:translateY(0) scale(1) rotate(0);opacity:1}}
.bac-deal{animation:cardDeal .35s cubic-bezier(.23,1,.32,1)}

/* ===== HOME PAGE ===== */
.home-content{flex:1;overflow-y:auto;padding:20px 24px}
.home-hero{background:linear-gradient(135deg,#071824 0%,#0F202F 30%,#1a1540 70%,#0F202F 100%);border-radius:12px;padding:36px 40px;margin-bottom:24px;display:flex;align-items:center;gap:40px;position:relative;overflow:hidden;min-height:240px}
.home-hero::before{content:'';position:absolute;top:-50%;right:-10%;width:500px;height:500px;background:radial-gradient(circle,rgba(0,231,1,.06) 0%,transparent 60%);border-radius:50%;pointer-events:none}
.home-hero::after{content:'';position:absolute;bottom:-30%;left:20%;width:300px;height:300px;background:radial-gradient(circle,rgba(67,145,231,.04) 0%,transparent 60%);border-radius:50%;pointer-events:none}
.hero-left{flex:1;z-index:1}
.hero-badge{display:inline-block;background:rgba(0,231,1,.1);color:var(--accent);font-size:10px;font-weight:700;padding:4px 12px;border-radius:25px;letter-spacing:1px;margin-bottom:14px}
.hero-left h1{font-size:32px;font-weight:800;line-height:1.15;margin-bottom:8px}
.hero-left h1 span{color:var(--accent)}
.hero-left p{color:var(--text-sec);font-size:14px;margin-bottom:18px}
.hero-stats{display:flex;gap:28px;margin-bottom:22px}
.hero-stat{display:flex;flex-direction:column}
.hs-val{font-size:20px;font-weight:800;color:var(--text)}
.hs-lbl{font-size:11px;color:var(--text-muted);margin-top:2px}
.hero-btns{display:flex;gap:10px}
.hero-btn-primary{background:var(--accent);color:#000;border:none;padding:12px 32px;border-radius:25px;font-size:14px;font-weight:700;font-family:var(--font);cursor:pointer;transition:all .15s}
.hero-btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px)}
.hero-btn-secondary{background:rgba(255,255,255,.06);color:var(--text);border:1px solid rgba(255,255,255,.1);padding:12px 28px;border-radius:25px;font-size:14px;font-weight:600;font-family:var(--font);cursor:pointer;transition:all .15s}
.hero-btn-secondary:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}
.hero-right{flex-shrink:0;z-index:1}
.hero-game-preview{display:flex;gap:12px}
.preview-card{width:130px;padding:20px 14px;background:rgba(33,55,67,.6);border:1px solid rgba(255,255,255,.06);border-radius:10px;cursor:pointer;transition:all .2s;text-align:center;backdrop-filter:blur(8px)}
.preview-card:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,231,1,.1)}
.pc-icon{font-size:36px;margin-bottom:8px}
.pc-name{font-size:13px;font-weight:700;margin-bottom:3px}
.pc-mult{font-size:11px;color:var(--accent);font-weight:600}
.pc-1{animation:float 3s ease-in-out infinite}
.pc-2{animation:float 3s ease-in-out infinite .5s}
.pc-3{animation:float 3s ease-in-out infinite 1s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

.home-section{margin-bottom:28px}
.sec-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.sec-title{font-size:16px;font-weight:700}
.sec-tabs{display:flex;gap:4px}
.sec-tab{padding:6px 14px;border-radius:25px;background:var(--bg-secondary);border:1px solid transparent;color:var(--text-muted);font-size:12px;font-weight:600;font-family:var(--font);cursor:pointer;transition:all .12s}
.sec-tab.active{background:rgba(0,231,1,.1);color:var(--accent);border-color:rgba(0,231,1,.2)}
.sec-tab:hover:not(.active){color:var(--text-sec);border-color:rgba(255,255,255,.06)}
.sec-link{font-size:12px;color:var(--text-muted);cursor:pointer;transition:color .12s}
.sec-link:hover{color:var(--accent)}

.game-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:10px;margin-bottom:28px}
.g-card{background:var(--card);border:1px solid rgba(15,32,47,.6);border-radius:10px;padding:18px 12px;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:10px}
.g-card:hover{border-color:#3a5565;transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.g-card-icon{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;transition:transform .2s}
.g-card:hover .g-card-icon{transform:scale(1.08)}
.gi-mines{background:rgba(245,158,11,.1)}.gi-plinko{background:rgba(156,39,176,.1)}.gi-dice{background:rgba(0,231,1,.1)}.gi-limbo{background:rgba(237,66,69,.1)}.gi-crash{background:rgba(247,147,26,.1)}.gi-keno{background:rgba(139,92,246,.1)}.gi-hilo{background:rgba(59,130,246,.1)}.gi-baccarat{background:rgba(245,158,11,.1)}.gi-wheel{background:rgba(236,72,153,.1)}
.g-card-name{font-weight:600;font-size:13px}
.g-card-badge{font-size:9px;font-weight:600;padding:2px 8px;border-radius:25px;background:rgba(0,231,1,.08);color:var(--accent);text-transform:uppercase;letter-spacing:.4px}

.live-bets-ticker{display:flex;gap:8px;overflow-x:auto;padding:4px 0;scrollbar-width:none}
.live-bets-ticker::-webkit-scrollbar{display:none}
.live-tick{flex-shrink:0;background:var(--card);border:1px solid rgba(15,32,47,.6);border-radius:8px;padding:10px 14px;display:flex;align-items:center;gap:10px;min-width:200px;animation:slideIn .4s ease}
@keyframes slideIn{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}
.lt-game{font-size:11px;font-weight:600;color:var(--text-sec)}
.lt-user{font-size:11px;color:var(--text-muted)}
.lt-mult{font-size:13px;font-weight:700;margin-left:auto}
.lt-mult.win{color:var(--accent)}
.lt-mult.lose{color:var(--red)}

/* ===== BETS TABLE ===== */
.bets-table{background:var(--card);border:1px solid rgba(15,32,47,.6);border-radius:8px;overflow:hidden;margin-bottom:20px}
.bets-header{display:grid;grid-template-columns:1fr 1.2fr .7fr .8fr .8fr 1fr 32px;padding:10px 16px;font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid var(--border)}
.bet-row{display:grid;grid-template-columns:1fr 1.2fr .7fr .8fr .8fr 1fr 32px;padding:8px 16px;font-size:12px;border-bottom:1px solid rgba(47,69,83,.3);transition:background .1s;align-items:center}
.bet-row:nth-child(even){background:rgba(33,55,67,.3)}
.bet-row:hover{background:rgba(255,255,255,.03)}
.bet-row .b-game{color:var(--text-sec);font-weight:500}.bet-row .b-user{color:var(--text-muted)}.bet-row .b-time{color:var(--text-muted);font-size:11px}.bet-row .b-amount{color:var(--text);font-weight:500}.bet-row .b-mult{color:var(--accent);font-weight:600}.bet-row .b-payout{font-weight:600}
.bet-row .b-payout.win{color:var(--accent)}.bet-row .b-payout.lose{color:var(--red)}
.b-pf{display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--text-muted);cursor:pointer;padding:4px;border-radius:4px;transition:all .12s}
.b-pf:hover{color:var(--accent);background:rgba(0,231,1,.08)}
.b-pf svg{opacity:.5;transition:opacity .12s}
.b-pf:hover svg{opacity:1}

/* ===== AUTH MODAL ===== */
.auth-modal{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:1000;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.auth-panel{background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;width:400px;max-width:90vw;padding:24px;position:relative}
.auth-close{position:absolute;top:12px;right:12px;background:none;border:none;color:var(--text-sec);font-size:22px;cursor:pointer;padding:0 4px;line-height:1}
.auth-close:hover{color:var(--text)}
.auth-tabs{display:flex;background:var(--bg-primary);border-radius:25px;padding:3px;margin-bottom:20px}
.auth-tab{flex:1;padding:10px;border:none;background:none;color:var(--text-sec);font-size:13px;font-weight:700;font-family:var(--font);cursor:pointer;border-radius:25px;transition:all .15s}
.auth-tab.active{background:var(--accent);color:#000}
.auth-field{margin-bottom:14px}
.auth-field label{display:block;font-size:12px;font-weight:600;color:var(--text-sec);margin-bottom:4px}
.auth-field input{width:100%;background:var(--bg-input);border:1px solid var(--border);border-radius:8px;padding:10px 14px;color:var(--text);font-size:13px;font-family:var(--font);outline:none;transition:border .15s}
.auth-field input:focus{border-color:var(--accent)}
.auth-error{color:var(--red);font-size:12px;margin-bottom:10px;min-height:16px}
.auth-submit{width:100%;background:var(--accent);color:#000;border:none;border-radius:25px;padding:12px;font-size:14px;font-weight:700;font-family:var(--font);cursor:pointer;transition:all .15s;margin-top:6px}
.auth-submit:hover{background:var(--accent-hover)}
.auth-demo{margin-top:12px;text-align:center;font-size:11px;color:var(--text-muted);line-height:1.6}
.auth-demo span{display:block}
.auth-demo a{color:var(--accent);text-decoration:none;font-weight:600}
.auth-demo a:hover{text-decoration:underline}

.verify-header{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:16px;gap:8px}
.verify-header h3{font-size:18px;font-weight:700;margin:0}
.verify-sub{font-size:12px;color:var(--text-sec);margin:0}

/* ===== CHAT PANEL ===== */
.chat-panel{position:fixed;right:0;top:60px;bottom:0;width:320px;background:var(--bg-secondary);border-left:1px solid rgba(255,255,255,.06);z-index:200;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .25s ease}
.chat-panel.open{transform:translateX(0)}
.chat-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border);flex-shrink:0}
.chat-title{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--text)}
.chat-close{background:none;border:none;color:var(--text-sec);font-size:20px;cursor:pointer;padding:2px 6px}
.chat-close:hover{color:var(--text)}
.chat-messages{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px}
.chat-msg{display:flex;gap:8px;animation:fadeIn .2s ease}
.chat-msg-avatar{width:28px;height:28px;border-radius:50%;background:var(--bg-tertiary);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--accent);flex-shrink:0}
.chat-msg-body{flex:1;min-width:0}
.chat-msg-user{font-size:11px;font-weight:700;color:var(--accent);margin-bottom:2px}
.chat-msg-text{font-size:12px;color:var(--text-sec);word-wrap:break-word}
.chat-msg-time{font-size:10px;color:var(--text-muted);margin-top:2px}
.chat-input-wrap{display:flex;gap:6px;padding:10px 12px;border-top:1px solid var(--border);flex-shrink:0}
.chat-input{flex:1;background:var(--bg-input);border:1px solid var(--border);border-radius:25px;padding:8px 14px;color:var(--text);font-size:12px;font-family:var(--font);outline:none;transition:border .15s}
.chat-input:focus{border-color:var(--accent)}
.chat-send{background:var(--accent);color:#000;border:none;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;flex-shrink:0}
.chat-send:hover{background:var(--accent-hover)}

/* ===== LEADERBOARD ===== */
.lb-tabs{display:flex;gap:6px;margin-bottom:20px}
.lb-tab{padding:8px 20px;border-radius:25px;background:var(--bg-secondary);border:1px solid transparent;color:var(--text-muted);font-size:13px;font-weight:600;font-family:var(--font);cursor:pointer;transition:all .12s}
.lb-tab.active{background:rgba(0,231,1,.1);color:var(--accent);border-color:rgba(0,231,1,.2)}
.lb-tab:hover:not(.active){color:var(--text-sec);border-color:rgba(255,255,255,.06)}
.lb-table{background:var(--card);border:1px solid rgba(15,32,47,.6);border-radius:10px;overflow:hidden}
.lb-header{display:grid;grid-template-columns:50px 1.5fr 1fr 1fr 1fr 1fr;padding:12px 16px;font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid var(--border)}
.lb-row{display:grid;grid-template-columns:50px 1.5fr 1fr 1fr 1fr 1fr;padding:10px 16px;font-size:13px;border-bottom:1px solid rgba(47,69,83,.3);align-items:center;transition:background .1s}
.lb-row:hover{background:rgba(255,255,255,.03)}
.lb-rank{font-weight:800;font-size:14px}
.lb-rank.gold{color:#f59e0b}.lb-rank.silver{color:#94a3b8}.lb-rank.bronze{color:#cd7f32}
.lb-user{font-weight:600;color:var(--text)}
.lb-profit{font-weight:700;color:var(--accent)}
.lb-profit.negative{color:var(--red)}
.lb-wagered{color:var(--text-sec)}
.lb-bets{color:var(--text-sec)}

/* ===== PROFILE MODAL ===== */
.profile-modal{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:1000;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.profile-panel{background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;width:400px;max-width:90vw;padding:24px;position:relative}
.profile-header{display:flex;flex-direction:column;align-items:center;margin-bottom:20px}
.profile-avatar{width:72px;height:72px;border-radius:50%;background:var(--bg-tertiary);display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:800;color:var(--accent);border:3px solid var(--accent);margin-bottom:10px}
.profile-name{font-size:20px;font-weight:800}
.profile-vip{font-size:11px;font-weight:700;padding:3px 10px;border-radius:25px;margin-top:6px}
.profile-vip.vip0{background:rgba(255,255,255,.06);color:var(--text-muted)}
.profile-vip.vip1{background:rgba(245,158,11,.1);color:#f59e0b}
.profile-vip.vip2{background:rgba(237,66,69,.1);color:#ed4245}
.profile-vip.vip3{background:rgba(156,39,176,.1);color:#9c27b0}
.profile-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
.profile-stat{background:var(--bg-primary);border-radius:8px;padding:12px;text-align:center}
.ps-val{font-size:18px;font-weight:800;color:var(--text)}
.ps-lbl{font-size:11px;color:var(--text-muted);margin-top:2px}
.profile-actions{display:flex;gap:8px}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-top:16px}
.stat-card{background:var(--card);border:1px solid rgba(15,32,47,.6);border-radius:8px;padding:18px}
.stat-card .val{font-size:26px;font-weight:800;margin-bottom:2px}
.stat-card .lbl{font-size:12px;color:var(--text-muted)}
.val.green{color:var(--accent)}.val.red{color:var(--red)}

/* ===== ABOUT ===== */
.about-box{max-width:560px}
.about-box h2{font-size:22px;margin-bottom:12px}
.about-box p{color:var(--text-sec);line-height:1.7;margin-bottom:10px;font-size:13px}
.about-box .disclaimer{background:rgba(237,66,69,.08);border:1px solid rgba(237,66,69,.2);border-radius:8px;padding:14px;margin-top:16px;font-size:12px;color:var(--red);line-height:1.6}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{border-radius:25px;background:var(--border)}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}

/* ===== RESPONSIVE ===== */
@media(max-width:1200px){.app-sidebar{width:60px;min-width:60px}.sb-label,.sb-item span,.sb-footer,.sb-head-tab span{display:none}.sb-item{justify-content:center;padding:10px}.sb-head{justify-content:center}.sb-head-tab{padding:0;margin:0 4px}.sb-head-toggle{display:none}.sb-body{padding:6px 4px;margin:0;width:100%}}
@media(max-width:768px){.app-sidebar{display:none}.game-sidebar{width:100%;min-width:auto;border-left:none;border-top:1px solid var(--border)}.game-container{flex-direction:column}.menu-btn{display:block}.h-center{display:none}.home-content{padding:12px}.hero{padding:28px 20px}.hero h1{font-size:22px}.mines-grid{max-width:300px}.mine-tile{min-width:48px;min-height:48px}.keno-grid{grid-template-columns:repeat(5,1fr)}}

/* ===== ANIMATIONS ===== */
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.anim-fade{animation:fadeIn .25s ease}
.anim-pop{animation:pop .25s ease}
.anim-shake{animation:shake .25s ease}

/* ===== PROVABLY FAIR MODAL ===== */
.fair-modal{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:1000;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.fair-panel{background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;width:90%;max-width:480px;max-height:85vh;overflow-y:auto}
.fair-header{display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid var(--border);font-size:14px;font-weight:600}
.fair-close{margin-left:auto;background:none;border:none;color:var(--text-sec);font-size:22px;cursor:pointer;padding:0 4px;line-height:1}
.fair-close:hover{color:var(--text)}
.fair-body{padding:16px 18px}
.fair-row{margin-bottom:10px}
.fair-label{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px}
.fair-val{font-family:monospace;font-size:12px;color:var(--text-sec);background:var(--bg-deep);padding:6px 8px;border-radius:6px;word-break:break-all}
.fair-divider{border:none;border-top:1px solid var(--border);margin:12px 0}
.fair-info{font-size:11px;color:var(--text-muted);line-height:1.5;margin-bottom:12px}
.fair-input-row{display:flex;gap:6px;align-items:center;margin-bottom:12px}
.fair-input-row label{font-size:12px;color:var(--text-sec);white-space:nowrap}
.fair-input{flex:1;background:var(--bg-deep);border:1px solid var(--border);border-radius:6px;padding:6px 10px;color:var(--text);font-size:12px;font-family:monospace;outline:none}
.fair-input:focus{border-color:var(--accent)}
.fair-set{background:var(--accent);color:#000;border:none;border-radius:6px;padding:6px 12px;font-size:11px;font-weight:600;cursor:pointer;white-space:nowrap}
.fair-set:hover{background:var(--accent-hover)}
.fair-current{background:var(--bg-deep);border-radius:8px;padding:10px 12px;font-size:12px;color:var(--text-sec)}
.fair-current span{font-weight:600;font-size:11px;color:var(--text-muted)}