/* ═══ RESET & ROOT ══════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#03050e;--surf:#080c1a;--card:#0d1326;--card2:#111b30;
  --border:rgba(99,179,237,0.1);--border2:rgba(99,179,237,0.25);--border3:rgba(99,179,237,0.4);
  --cyan:#63b3ed;--cyan2:#90cdf4;--teal:#4fd1c5;
  --gold:#f6d860;--gold2:#fef3c7;
  --green:#68d391;--red:#fc8181;--purple:#b794f4;--pink:#f687b3;
  --text:#e2e8f0;--muted:#4a5568;--dim:#1a2332;--sub:#718096;
  --fh:'Unbounded',sans-serif;--fm:'Space Mono',monospace;
  --r8:8px;--r12:12px;--r16:16px;--r20:20px;
}
body{background:var(--bg);color:var(--text);font-family:var(--fh);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased}

/* BG */
.bg-grid{position:fixed;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(99,179,237,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(99,179,237,.03) 1px,transparent 1px);background-size:48px 48px}
.bg-orb1{position:fixed;top:-200px;left:20%;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(99,179,237,.06),transparent 70%);pointer-events:none;z-index:0}
.bg-orb2{position:fixed;bottom:-200px;right:5%;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(107,70,193,.07),transparent 70%);pointer-events:none;z-index:0}

/* LAYOUT */
#app{position:relative;z-index:1;display:flex;height:100vh;overflow:hidden}
.panel{display:none}.panel.active{display:block}

/* SIDEBAR */
#sidebar{width:220px;flex-shrink:0;background:var(--surf);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto}
#sidebar::-webkit-scrollbar{width:3px}#sidebar::-webkit-scrollbar-thumb{background:var(--dim)}
.sb-logo{padding:20px 18px 16px;border-bottom:1px solid var(--border)}
.logo-txt{font-size:20px;font-weight:900;letter-spacing:-1px;color:var(--cyan)}
.logo-txt span{color:var(--gold)}
.logo-sub{font-family:var(--fm);font-size:9px;color:var(--muted);letter-spacing:2px;margin-top:2px}
.sb-user{padding:14px 18px;border-bottom:1px solid var(--border)}
.sb-user-card{display:flex;align-items:center;gap:9px;padding:10px 12px;background:var(--card);border:1px solid var(--border);border-radius:var(--r12);cursor:pointer;transition:.2s}
.sb-user-card:hover{border-color:var(--border2)}
.avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--purple),var(--cyan));display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}
.sb-uname{font-size:11px;font-weight:700;color:var(--text);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.online-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 6px rgba(104,211,145,.6);flex-shrink:0}
.online-dot.off{background:var(--muted);box-shadow:none}
.sb-balance{padding:14px 18px;border-bottom:1px solid var(--border)}
.bal-num{font-size:22px;font-weight:900;color:var(--gold);letter-spacing:-1px}
.bal-usd{font-family:var(--fm);font-size:10px;color:var(--muted);margin-top:2px}
.sb-nav{flex:1;padding:10px}
.nav-sec{font-family:var(--fm);font-size:9px;color:var(--muted);letter-spacing:1.5px;text-transform:uppercase;padding:6px 8px 4px}
.nav-btn{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:var(--r8);cursor:pointer;transition:.15s;color:var(--sub);font-size:11px;font-weight:700;letter-spacing:.3px;border:1px solid transparent;background:transparent;width:100%;text-align:left}
.nav-btn:hover{background:rgba(99,179,237,.05);color:var(--text);border-color:var(--border)}
.nav-btn.active{background:rgba(99,179,237,.1);color:var(--cyan);border-color:var(--border2)}
.nav-icon{font-size:15px;width:18px;text-align:center;flex-shrink:0}
.nav-badge{margin-left:auto;font-family:var(--fm);font-size:9px;padding:2px 7px;border-radius:20px;background:rgba(246,216,96,.1);color:var(--gold);border:1px solid rgba(246,216,96,.2)}
.sb-footer{padding:12px 18px;border-top:1px solid var(--border)}
.sb-chip-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.chip{font-family:var(--fm);font-size:9px;padding:3px 9px;border-radius:20px;letter-spacing:.5px}
.chip.dev{background:rgba(99,179,237,.08);color:var(--cyan);border:1px solid rgba(99,179,237,.2)}
.chip.sol{background:rgba(246,216,96,.08);color:var(--gold);border:1px solid rgba(246,216,96,.2)}
.sb-stat-row{display:flex;justify-content:space-between;font-family:var(--fm);font-size:10px;padding:3px 0}
.sb-stat-l{color:var(--muted)}.sb-stat-v{font-weight:700;color:var(--text)}
.sb-stat-v.g{color:var(--green)}.sb-stat-v.r{color:var(--red)}.sb-stat-v.b{color:var(--cyan)}

/* MAIN */
#main{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}
#topbar{padding:12px 20px;background:var(--surf);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;flex-shrink:0}
.tb-title{font-size:13px;font-weight:700}
.tb-badge{font-family:var(--fm);font-size:10px;padding:3px 10px;background:rgba(99,179,237,.08);color:var(--cyan);border:1px solid var(--border2);border-radius:20px}
.tb-online{font-family:var(--fm);font-size:10px;color:var(--muted);display:flex;align-items:center;gap:5px}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:blink 1.5s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.4}}
.tb-spacer{flex:1}
.tb-bal{font-family:var(--fm);font-size:13px;color:var(--gold);font-weight:700}
.auth-btn{font-family:var(--fm);font-size:11px;padding:7px 14px;border-radius:var(--r8);border:1px solid var(--border2);background:transparent;color:var(--cyan);cursor:pointer;transition:.2s;font-weight:700}
.auth-btn:hover{background:rgba(99,179,237,.1)}
.auth-btn.primary{background:var(--cyan);color:#03050e;border-color:var(--cyan)}
.auth-btn.primary:hover{filter:brightness(1.1)}

/* CONTENT */
#content-area{flex:1;display:flex;overflow:hidden}
#game-area{flex:1;padding:18px 20px;overflow-y:auto;min-width:0}
#game-area::-webkit-scrollbar{width:4px}#game-area::-webkit-scrollbar-thumb{background:var(--dim)}

/* RIGHT PANEL */
#right-panel{width:300px;flex-shrink:0;display:flex;flex-direction:column;border-left:1px solid var(--border);background:var(--surf);overflow:hidden}

/* CARDS */
.g-card{background:var(--surf);border:1px solid var(--border);border-radius:var(--r20);overflow:hidden;margin-bottom:16px}
.g-card-hd{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:9px}
.g-card-ico{font-size:18px}.g-card-title{font-size:12px;font-weight:700;letter-spacing:.3px}
.g-card-sub{font-family:var(--fm);font-size:10px;color:var(--muted);margin-left:auto}
.g-card-bd{padding:20px}

/* GAME LAYOUT */
.game-layout{display:grid;grid-template-columns:1fr 340px;gap:16px;align-items:start}

/* BET PANEL */
.bet-panel{background:var(--surf);border:1px solid var(--border);border-radius:var(--r20);position:sticky;top:0}
.bp-hd{padding:16px 20px;border-bottom:1px solid var(--border)}
.bp-title{font-size:11px;font-weight:700;letter-spacing:.8px;color:var(--text)}
.bp-body{padding:18px 20px;display:flex;flex-direction:column;gap:12px}
.fl{font-family:var(--fm);font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px}
.inp-wr{position:relative}
.bet-inp{width:100%;padding:12px 56px 12px 13px;background:var(--card);border:1px solid var(--border);border-radius:var(--r8);color:var(--text);font-family:var(--fm);font-size:19px;font-weight:700;outline:none;transition:.2s;-moz-appearance:textfield}
.bet-inp::-webkit-outer-spin-button,.bet-inp::-webkit-inner-spin-button{-webkit-appearance:none}
.bet-inp:focus{border-color:var(--border3)}
.inp-suf{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-family:var(--fm);font-size:11px;color:var(--sub);font-weight:700}
.qrow{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.qb{padding:7px 4px;border-radius:6px;border:1px solid var(--border);background:transparent;color:var(--sub);font-family:var(--fm);font-size:11px;font-weight:700;cursor:pointer;transition:.15s;text-align:center}
.qb:hover{border-color:var(--border2);color:var(--text);background:rgba(99,179,237,.05)}
.pay-row{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;background:var(--card);border:1px solid var(--border);border-radius:var(--r8)}
.pay-l{font-family:var(--fm);font-size:11px;color:var(--muted)}
.pay-r{font-family:var(--fm);font-size:13px;font-weight:700;color:var(--green)}
.main-btn{width:100%;padding:15px;border-radius:var(--r12);border:none;font-family:var(--fh);font-size:13px;font-weight:900;cursor:pointer;transition:.2s;text-transform:uppercase;letter-spacing:.5px;background:var(--cyan);color:#03050e}
.main-btn:hover:not(:disabled){filter:brightness(1.1);transform:translateY(-1px);box-shadow:0 5px 20px rgba(99,179,237,.25)}
.main-btn:disabled{opacity:.4;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.main-btn.gold{background:var(--gold);color:#03050e}
.main-btn.gold:hover:not(:disabled){box-shadow:0 5px 20px rgba(246,216,96,.25)}
.main-btn.grn{background:var(--green);color:#03050e}
.main-btn.grn:hover:not(:disabled){box-shadow:0 5px 20px rgba(104,211,145,.25)}
.res-box{padding:11px;border-radius:var(--r8);border:1px solid var(--border);font-family:var(--fm);font-size:11px;text-align:center;min-height:44px;display:flex;align-items:center;justify-content:center;color:var(--muted);transition:.3s;line-height:1.4}
.res-box.win{background:rgba(104,211,145,.07);border-color:rgba(104,211,145,.3);color:var(--green)}
.res-box.lose{background:rgba(252,129,129,.07);border-color:rgba(252,129,129,.3);color:var(--red)}
.res-box.pending{background:rgba(99,179,237,.05);border-color:rgba(99,179,237,.2);color:var(--cyan)}

/* COINFLIP */
.coin-stage{display:flex;justify-content:center;padding:18px 0;perspective:900px}
.coin3{width:130px;height:130px;transform-style:preserve-3d;position:relative;transition:transform .05s}
.coin3.flip{animation:cf 1.9s cubic-bezier(.4,.05,.6,.95) forwards}
.cF,.cT{position:absolute;inset:0;border-radius:50%;backface-visibility:hidden;display:flex;align-items:center;justify-content:center}
.cF{background:conic-gradient(from 0deg,#c8960a,#f6d860,#c8960a,#a07808,#c8960a);box-shadow:0 0 50px rgba(246,216,96,.28);font-size:52px}
.cT{background:conic-gradient(from 0deg,#2563a8,#63b3ed,#2563a8,#1a4a7a,#2563a8);box-shadow:0 0 50px rgba(99,179,237,.28);transform:rotateY(180deg);font-size:34px;font-weight:900;color:#e2e8f0;font-family:var(--fm)}
@keyframes cf{0%{transform:rotateY(0)}100%{transform:rotateY(var(--r))}}
.side-row{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}
.sp{padding:13px 8px;border-radius:var(--r12);border:1px solid var(--border);background:transparent;cursor:pointer;transition:.2s;font-family:var(--fh);font-weight:700;font-size:12px;color:var(--sub);display:flex;flex-direction:column;align-items:center;gap:6px}
.sp:hover{border-color:var(--border2);color:var(--text)}
.sp.h{border-color:var(--gold);color:var(--gold);background:rgba(246,216,96,.06)}
.sp.t{border-color:var(--cyan);color:var(--cyan);background:rgba(99,179,237,.06)}
.sp-i{font-size:26px}
.streak{display:flex;gap:4px;justify-content:center;margin-top:10px;flex-wrap:wrap}
.sd{width:8px;height:8px;border-radius:2px}

/* DICE */
.dice-stage{display:flex;justify-content:center;gap:20px;padding:20px 0}
.die{width:82px;height:82px;background:var(--card2);border:2px solid var(--border2);border-radius:13px;display:grid;place-items:center;font-size:46px;transition:.3s}
.die.rolling{animation:dshk .12s linear infinite}
@keyframes dshk{0%{transform:rotate(-9deg) scale(1.07)}50%{transform:rotate(9deg) scale(.93)}100%{transform:rotate(-9deg) scale(1.07)}}
.rng-wr{margin:4px 0}
.rng-meta{display:flex;justify-content:space-between;font-family:var(--fm);font-size:11px;color:var(--muted);margin-bottom:7px}
.rng-meta b{color:var(--text)}
input[type=range].sldr{width:100%;accent-color:var(--cyan);cursor:pointer;height:4px}
.dice-info{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.di{background:var(--card);border:1px solid var(--border);border-radius:var(--r8);padding:9px;text-align:center}
.di-l{font-family:var(--fm);font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.di-v{font-size:15px;font-weight:700;color:var(--cyan);margin-top:3px}
.ou-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.ou{padding:10px;border-radius:var(--r8);border:1px solid var(--border);background:transparent;cursor:pointer;font-family:var(--fm);font-size:11px;font-weight:700;color:var(--sub);transition:.15s;text-align:center}
.ou:hover{border-color:var(--border2);color:var(--text)}
.ou.sel{border-color:var(--cyan);color:var(--cyan);background:rgba(99,179,237,.07)}

/* ROULETTE */
.wheel-wr{display:flex;justify-content:center;padding:14px 0}
.wheel-cont{position:relative;width:210px;height:210px}
.wheel-outer{width:100%;height:100%;border-radius:50%;border:3px solid var(--border2);overflow:hidden}
#roulCanvas{width:100%;height:100%}
.wheel-ptr{position:absolute;top:-13px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:18px solid var(--gold);z-index:10;filter:drop-shadow(0 2px 4px rgba(246,216,96,.4))}
.roul-types{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:10px}
.rb{padding:9px 5px;border-radius:var(--r8);border:1px solid var(--border);background:transparent;cursor:pointer;text-align:center;font-family:var(--fm);font-size:10px;font-weight:700;color:var(--sub);transition:.15s}
.rb:hover{border-color:var(--border2);color:var(--text)}
.rb.sel-rb{border-color:var(--gold)!important;color:var(--gold)!important;background:rgba(246,216,96,.08)!important}
.num-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:8px}
.rn{width:100%;aspect-ratio:1;border-radius:5px;border:1px solid var(--border);background:transparent;cursor:pointer;font-family:var(--fm);font-size:10px;font-weight:700;transition:.12s;color:var(--sub)}
.rn:hover{border-color:var(--border2);background:rgba(99,179,237,.05)}
.rn.pk{border-color:var(--gold);background:rgba(246,216,96,.1);color:var(--gold)}
.rn.nr{color:var(--red)}.rn.nb{color:var(--cyan)}.rn.ng{color:var(--green)}
.roul-sel-txt{font-family:var(--fm);font-size:11px;color:var(--muted);margin-bottom:12px}
.roul-sel-txt span{color:var(--cyan);font-weight:700}
.roul-timer{font-family:var(--fm);font-size:12px;font-weight:700;color:var(--gold);text-align:center;padding:8px;background:rgba(246,216,96,.06);border:1px solid rgba(246,216,96,.15);border-radius:var(--r8)}

/* CRASH */
.crash-graph{position:relative;height:210px;background:var(--card);border:1px solid var(--border);border-radius:var(--r12);overflow:hidden}
#crashCanvas{position:absolute;inset:0;width:100%;height:100%}
.crash-ov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.crash-num{font-size:56px;font-weight:900;letter-spacing:-3px;color:var(--cyan);text-shadow:0 0 40px rgba(99,179,237,.4);transition:color .15s}
.crash-num.bust{color:var(--red);text-shadow:0 0 40px rgba(252,129,129,.4)}
.crash-num.safe{color:var(--green);text-shadow:0 0 40px rgba(104,211,145,.4)}
.crash-sub{font-family:var(--fm);font-size:10px;color:var(--muted);margin-top:4px}
.crash-players-table{margin-top:12px}
.cpt-hd{display:grid;grid-template-columns:1fr 80px 80px;font-family:var(--fm);font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;padding:5px 0;border-bottom:1px solid var(--border)}
.cpt-row{display:grid;grid-template-columns:1fr 80px 80px;font-family:var(--fm);font-size:11px;padding:7px 0;border-bottom:1px solid var(--border);animation:fadein .3s}
.cpt-row:last-child{border-bottom:none}
.cpt-addr{color:var(--sub)}.cpt-bet{color:var(--text);font-weight:700}
.cpt-out.w{color:var(--green);font-weight:700}.cpt-out.b{color:var(--red);font-weight:700}.cpt-out.p{color:var(--muted)}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.auto-row{display:flex;align-items:center;gap:8px}
.auto-l{font-family:var(--fm);font-size:11px;color:var(--muted);white-space:nowrap}
.auto-inp{flex:1;padding:8px 11px;background:var(--card);border:1px solid var(--border);border-radius:var(--r8);color:var(--text);font-family:var(--fm);font-size:13px;outline:none;transition:.2s}
.auto-inp:focus{border-color:var(--border2)}

/* MINES */
.mines-hdr{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:13px}
.mh{background:var(--card);border:1px solid var(--border);border-radius:var(--r8);padding:9px 11px;text-align:center}
.mh-l{font-family:var(--fm);font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.mh-v{font-size:15px;font-weight:700;margin-top:3px}
.mine-cnt-row{display:flex;align-items:center;gap:9px;margin-bottom:13px}
.mc-l{font-family:var(--fm);font-size:11px;color:var(--muted);white-space:nowrap}
input[type=range].mine-sldr{flex:1;accent-color:var(--red);cursor:pointer}
.mc-v{font-family:var(--fm);font-size:13px;font-weight:700;color:var(--red);min-width:20px}
.mines-board{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:12px}
.mc{aspect-ratio:1;border-radius:var(--r12);border:1px solid var(--border);background:var(--card);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:21px;transition:.18s;user-select:none}
.mc:hover:not(.rev):not(.lk){border-color:var(--border2);background:var(--card2);transform:scale(1.06)}
.mc.gem{background:rgba(104,211,145,.1);border-color:rgba(104,211,145,.35);animation:gPop .3s cubic-bezier(.34,1.56,.64,1)}
.mc.bomb{background:rgba(252,129,129,.1);border-color:rgba(252,129,129,.35);animation:bShk .3s ease}
.mc.lk{cursor:default;opacity:.6}
@keyframes gPop{from{transform:scale(.6)}to{transform:scale(1)}}
@keyframes bShk{0%,100%{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}

/* RIGHT PANEL */
.panel-tabs{display:flex;border-bottom:1px solid var(--border);flex-shrink:0}
.ptab{flex:1;padding:12px;font-family:var(--fm);font-size:11px;font-weight:700;color:var(--muted);cursor:pointer;text-align:center;border-bottom:2px solid transparent;transition:.15s;background:transparent;border-top:none;border-left:none;border-right:none}
.ptab:hover{color:var(--text)}.ptab.active{color:var(--cyan);border-bottom-color:var(--cyan)}
.panel-section{display:none;flex:1;flex-direction:column;overflow:hidden;min-height:0}
.panel-section.active{display:flex}

/* LIVE BETS */
#livebets-section{overflow-y:auto}
#livebets-section::-webkit-scrollbar{width:3px}#livebets-section::-webkit-scrollbar-thumb{background:var(--dim)}
.lb-hd{display:grid;grid-template-columns:100px 1fr 76px;font-family:var(--fm);font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;padding:10px 14px;border-bottom:1px solid var(--border);flex-shrink:0;position:sticky;top:0;background:var(--surf);z-index:1}
.lb-row{display:grid;grid-template-columns:100px 1fr 76px;align-items:center;gap:6px;padding:9px 14px;border-bottom:1px solid var(--border);font-family:var(--fm);font-size:11px;animation:slideIn .25s ease}
@keyframes slideIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}
.lb-row:last-child{border-bottom:none}
.lb-user{display:flex;align-items:center;gap:6px;min-width:0}
.lb-av{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--purple),var(--cyan));display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;flex-shrink:0}
.lb-uname{color:var(--text);font-weight:700;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-game{color:var(--sub);font-size:10px}
.lb-out{text-align:right;font-weight:700}
.lb-out.w{color:var(--green)}.lb-out.l{color:var(--red)}

/* CHAT */
#chat-section{display:flex;flex-direction:column;overflow:hidden}
#chat-messages{flex:1;overflow-y:auto;padding:8px 12px;display:flex;flex-direction:column;gap:6px;min-height:0}
#chat-messages::-webkit-scrollbar{width:3px}#chat-messages::-webkit-scrollbar-thumb{background:var(--dim)}
.chat-msg{display:flex;gap:7px;animation:slideIn .2s ease}
.chat-av{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--purple),var(--cyan));display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;flex-shrink:0;margin-top:2px}
.chat-av.bot{background:linear-gradient(135deg,var(--gold),var(--teal))}
.chat-body{flex:1;min-width:0}
.chat-name{font-family:var(--fm);font-size:10px;font-weight:700;color:var(--cyan);display:flex;align-items:center;gap:5px}
.chat-name.bot-name{color:var(--gold)}
.chat-time{font-size:9px;color:var(--dim);margin-left:auto;white-space:nowrap}
.chat-bot-badge{font-size:8px;padding:1px 5px;border-radius:10px;background:rgba(246,216,96,.1);color:var(--gold);border:1px solid rgba(246,216,96,.2)}
.chat-text{font-family:var(--fm);font-size:11px;color:var(--text);line-height:1.5;word-break:break-word}
#chat-input-area{padding:10px 12px;border-top:1px solid var(--border);flex-shrink:0}
#chat-input-row{display:flex;gap:8px}
#chat-input{flex:1;padding:9px 12px;background:var(--card);border:1px solid var(--border);border-radius:var(--r8);color:var(--text);font-family:var(--fm);font-size:12px;outline:none;transition:.2s}
#chat-input:focus{border-color:var(--border2)}
#chat-send{padding:9px 14px;border-radius:var(--r8);border:none;background:var(--cyan);color:#03050e;font-family:var(--fm);font-size:11px;font-weight:700;cursor:pointer;transition:.2s}
#chat-send:hover{filter:brightness(1.1)}
.chat-not-logged{padding:16px;text-align:center;font-family:var(--fm);font-size:11px;color:var(--muted)}

/* AUTH MODAL */
.modal-ov{display:none;position:fixed;inset:0;z-index:500;background:rgba(3,5,14,.85);backdrop-filter:blur(8px);align-items:center;justify-content:center;padding:20px}
.modal-ov.open{display:flex}
.modal{background:var(--surf);border:1px solid var(--border2);border-radius:var(--r20);padding:28px;max-width:380px;width:100%;animation:mPop .3s cubic-bezier(.34,1.56,.64,1)}
@keyframes mPop{from{opacity:0;transform:scale(.8) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}
.modal-title{font-size:18px;font-weight:900;margin-bottom:6px;letter-spacing:-.5px}
.modal-sub{font-family:var(--fm);font-size:11px;color:var(--muted);margin-bottom:22px}
.modal-field{margin-bottom:14px}
.modal-label{font-family:var(--fm);font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.modal-input{width:100%;padding:11px 13px;background:var(--card);border:1px solid var(--border);border-radius:var(--r8);color:var(--text);font-family:var(--fm);font-size:13px;outline:none;transition:.2s}
.modal-input:focus{border-color:var(--border3)}
.modal-err{font-family:var(--fm);font-size:11px;color:var(--red);margin-bottom:10px;min-height:16px}
.modal-footer{margin-top:10px;text-align:center;font-family:var(--fm);font-size:11px;color:var(--muted)}
.modal-footer a{color:var(--cyan);cursor:pointer;text-decoration:underline}
.modal-close{position:absolute;top:16px;right:16px;background:none;border:none;color:var(--muted);cursor:pointer;font-size:18px;padding:4px;line-height:1}

/* RESULT MODAL */
.res-modal .m-ico{font-size:60px;margin-bottom:14px;text-align:center}
.res-modal .m-title{font-size:26px;font-weight:900;letter-spacing:-1px;text-align:center;margin-bottom:6px}
.res-modal .m-title.w{color:var(--green)}.res-modal .m-title.l{color:var(--red)}
.res-modal .m-sub{font-family:var(--fm);font-size:12px;color:var(--muted);text-align:center;margin-bottom:16px}
.res-modal .m-amt{font-size:34px;font-weight:900;letter-spacing:-1.5px;text-align:center;margin-bottom:18px}
.res-modal .m-amt.w{color:var(--green)}.res-modal .m-amt.l{color:var(--red)}
.m-btn-row{display:flex;flex-direction:column;gap:8px}
.m-btn{width:100%;padding:13px;border-radius:var(--r12);border:none;font-family:var(--fh);font-size:13px;font-weight:900;cursor:pointer;transition:.2s;letter-spacing:.3px}
.m-btn.primary{background:var(--cyan);color:#03050e}.m-btn.primary:hover{filter:brightness(1.1)}
.m-btn.ghost{background:transparent;color:var(--sub);border:1px solid var(--border)}.m-btn.ghost:hover{color:var(--text)}

/* HISTORY TABLE */
.hist-table{width:100%;border-collapse:collapse;font-family:var(--fm);font-size:11px}
.hist-table th{text-align:left;color:var(--muted);font-weight:700;font-size:9px;text-transform:uppercase;letter-spacing:.5px;padding:8px 6px;border-bottom:1px solid var(--border)}
.hist-table td{padding:9px 6px;border-bottom:1px solid var(--border);color:var(--sub)}
.hist-table tr:hover td{background:rgba(99,179,237,.02)}
.hist-table .win{color:var(--green);font-weight:700}
.hist-table .loss{color:var(--red);font-weight:700}
.hist-table .bet-amt{color:var(--text);font-weight:700}

/* LEADERBOARD */
.lb-table{width:100%;font-family:var(--fm);font-size:11px;border-collapse:collapse}
.lb-table th{text-align:left;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.5px;padding:8px 8px;border-bottom:1px solid var(--border)}
.lb-table td{padding:11px 8px;border-bottom:1px solid var(--border)}
.lb-table tr:hover td{background:rgba(99,179,237,.02)}
.lb-rank{font-weight:900;color:var(--cyan);width:30px}
.lb-rank.r1{color:var(--gold)}.lb-rank.r2{color:#c0c0c0}.lb-rank.r3{color:#cd7f32}

/* MOBILE */
#mob-nav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:100;background:var(--surf);border-top:1px solid var(--border);padding:6px 0 env(safe-area-inset-bottom,6px)}
.mob-nav-inner{display:flex;justify-content:space-around}
.mnav-btn{display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 10px;background:transparent;border:none;cursor:pointer;color:var(--muted);border-radius:var(--r8);transition:.15s}
.mnav-btn.active{color:var(--cyan)}
.mnav-ico{font-size:19px}.mnav-lbl{font-family:var(--fm);font-size:9px;font-weight:700;letter-spacing:.3px}

@media(max-width:1100px){#right-panel{width:260px}.game-layout{grid-template-columns:1fr 300px}}
@media(max-width:860px){
  #sidebar{display:none}#right-panel{display:none}#mob-nav{display:flex}
  #game-area{padding:14px 14px 80px}.game-layout{grid-template-columns:1fr}
}
@media(max-width:480px){.crash-num{font-size:44px}.coin3{width:100px;height:100px}.cF{font-size:42px}.cT{font-size:28px}}