:root{--bg:#0a0a0c;--bg2:#101013;--card:#16161a;--card2:#1d1d22;--line:#26262d;--tx:#f4f4f6;--mut:#9a9aa6;--red:#e11d2e;--red2:#ff3b4a;--green:#22c55e;--gold:#f5b942;--r:12px;--side:232px;--chat:320px}
*{box-sizing:border-box;margin:0}
html{scrollbar-color:#2a2a31 transparent;scrollbar-width:thin}
body{background:var(--bg);color:var(--tx);font:14px/1.5 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
svg.i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
:focus-visible{outline:2px solid var(--red2);outline-offset:2px}
[hidden]{display:none!important}
h1,h2,h3{line-height:1.2}
.mut{color:var(--mut)}.red{color:var(--red2)}.grn{color:var(--green)}.gold{color:var(--gold)}.tr{text-align:right}

#app{display:grid;grid-template-columns:var(--side) minmax(0,1fr) 0;min-height:100vh}
body.chat-open #app{grid-template-columns:var(--side) minmax(0,1fr) var(--chat)}
#side{position:sticky;top:0;height:100vh;background:var(--bg2);border-right:1px solid var(--line);padding:14px 10px;display:flex;flex-direction:column;gap:4px;overflow:auto}
#main{min-width:0;display:flex;flex-direction:column;min-height:100vh}
#top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;padding:10px 20px;background:rgba(10,10,12,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
#view{flex:1;padding:20px;max-width:1280px;width:100%;margin:0 auto}
#chat{position:sticky;top:0;height:100vh;background:var(--bg2);border-left:1px solid var(--line);display:none;flex-direction:column;overflow:hidden}
body.chat-open #chat{display:flex}

.logo{display:flex;align-items:center;gap:9px;font-weight:900;letter-spacing:.14em;font-size:20px;padding:6px 10px 14px}
.logo img{width:40px;height:40px;object-fit:contain}
.nav{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:#cfcfd6;font-weight:600}
.nav:hover{background:var(--card)}
.nav.on{background:var(--card2);color:#fff;box-shadow:inset 3px 0 var(--red)}
.nav.on svg{color:var(--red2)}
.side-sec{font-size:11px;letter-spacing:.1em;color:var(--mut);padding:14px 12px 4px;text-transform:uppercase}
.side-foot{margin-top:auto;padding:10px;font-size:12px;color:var(--mut)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:10px;padding:10px 18px;background:var(--card2);font-weight:700;transition:.15s;white-space:nowrap}
.btn:hover{background:#2a2a31}
.btn.red{background:var(--red);color:#fff}.btn.red:hover{background:var(--red2)}
.btn.ghost{background:transparent;border:1px solid var(--line)}
.btn.sm{padding:6px 12px;font-size:13px}.btn.lg{padding:14px 22px;font-size:16px}.btn.block{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed}
.icon-btn{width:38px;height:38px;border-radius:10px;border:0;background:var(--card);display:grid;place-items:center}
.icon-btn:hover{background:var(--card2)}
.sp{flex:1}

.bal{display:flex;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:10px;position:relative}
.bal-b{display:flex;align-items:center;gap:8px;padding:8px 12px;background:none;border:0;font-weight:700;min-width:150px}
.bal .usd{font-size:11px;color:var(--mut);font-weight:500;margin-left:4px}
.bal .wal{border-radius:0 9px 9px 0;align-self:stretch}
.coin{width:20px;height:20px;border-radius:50%;display:inline-grid;place-items:center;font-size:10px;font-weight:800;color:#fff;flex:none}
.dd{position:absolute;top:calc(100% + 6px);left:0;min-width:260px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:0 20px 50px #000a;z-index:30}
.dd button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;background:none;border-radius:8px;text-align:left}
.dd button:hover,.dd button.on{background:var(--card2)}
.dd .v{margin-left:auto;text-align:right}.dd .v small{display:block;color:var(--mut);font-size:11px}
.vipbar{display:flex;flex-direction:column;gap:3px;min-width:130px;font-size:11px;color:var(--mut)}
.bar{height:6px;border-radius:9px;background:#2a2a31;overflow:hidden}.bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--red),var(--gold));border-radius:9px;transition:width .4s}
.demo-tag{background:#3a1015;color:var(--red2);border:1px solid #6b1620;border-radius:6px;padding:1px 7px;font-size:11px;font-weight:800;letter-spacing:.06em}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.grid{display:grid;gap:14px}
.sec-h{display:flex;align-items:center;gap:10px;margin:26px 0 12px}
.sec-h h2{font-size:18px}.sec-h a{margin-left:auto;color:var(--mut);font-size:13px}
.hero{position:relative;overflow:hidden;border-radius:16px;padding:34px;background:radial-gradient(900px 300px at 85% -20%,#e11d2e66,transparent),linear-gradient(120deg,#17080a,#0e0e11 60%);border:1px solid #3a1519;display:flex;gap:20px;align-items:center;min-height:200px}
.hero h1{font-size:clamp(26px,4vw,42px);max-width:560px}.hero p{color:#d0d0d6;max-width:520px;margin:10px 0 18px}
.hero img.crown{position:absolute;right:20px;top:50%;transform:translateY(-50%);width:min(300px,40%);height:auto;opacity:.9;pointer-events:none}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.tile{position:relative;aspect-ratio:3/4;border-radius:14px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:12px;border:1px solid #ffffff14;transition:.18s;cursor:pointer;text-align:left;background:var(--card)}
.tile:hover{transform:translateY(-4px);border-color:var(--red)}
.tile .art{position:absolute;inset:0;display:grid;place-items:center;font-size:56px;filter:drop-shadow(0 6px 10px #0008)}
.tile b{position:relative;font-size:15px}.tile small{position:relative;color:#ffffffb0;font-size:11px}
.tile .tag{position:absolute;top:8px;left:8px;background:#000a;border-radius:6px;padding:1px 7px;font-size:10px;font-weight:800;letter-spacing:.06em}
.tile.off{filter:grayscale(.6) brightness(.7)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:7px 14px;border-radius:99px;background:var(--card);border:1px solid var(--line);font-weight:600;font-size:13px}
.chip.on{background:var(--red);border-color:var(--red)}
input[type=text],input[type=number],input[type=email],input[type=password],input[type=date],select,.field{background:#0c0c0f;border:1px solid var(--line);border-radius:10px;padding:10px 12px;width:100%}
input:focus,select:focus{outline:0;border-color:var(--red)}
label.l{display:block;font-size:12px;color:var(--mut);margin:12px 0 5px;font-weight:600}
.inp{display:flex;gap:6px}.inp input{flex:1;min-width:0}.inp button{background:var(--card2);border:0;border-radius:8px;padding:0 12px;font-weight:700}
input[type=range]{width:100%;accent-color:var(--red)}
.seg{display:flex;background:#0c0c0f;border-radius:10px;padding:3px;gap:3px}
.seg button{flex:1;border:0;background:none;padding:8px;border-radius:8px;font-weight:700;color:var(--mut)}
.seg button.on{background:var(--card2);color:#fff}

table{width:100%;border-collapse:collapse}
th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);text-align:left;padding:8px 10px;font-weight:600}
td{padding:9px 10px;border-top:1px solid var(--line)}
td.r,th.r{text-align:right}
.scroll-x{overflow-x:auto}
.pill{display:inline-block;padding:1px 9px;border-radius:99px;font-size:12px;font-weight:700;background:var(--card2)}
.pill.g{background:#12351f;color:var(--green)}.pill.r{background:#3a1015;color:var(--red2)}.pill.y{background:#3b2f10;color:var(--gold)}

/* games */
.game{display:grid;grid-template-columns:320px minmax(0,1fr);background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.ctrl{background:var(--bg2);padding:16px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
.stage{padding:20px;min-height:460px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:18px;position:relative;background:radial-gradient(600px 300px at 50% 0,#e11d2e14,transparent)}
.gtitle{display:flex;align-items:center;gap:12px;margin-bottom:14px}.gtitle h1{font-size:24px}
.gbar{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.statrow{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%}
.stat{background:#0c0c0f;border:1px solid var(--line);border-radius:10px;padding:8px 12px}.stat small{display:block;color:var(--mut);font-size:11px}.stat b{font-size:16px}
.big{font-size:clamp(48px,9vw,96px);font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.big.win{color:var(--green);text-shadow:0 0 40px #22c55e55}.big.lose{color:var(--red2);text-shadow:0 0 40px #e11d2e55}
.track{position:relative;width:100%;height:16px;border-radius:99px;background:var(--red);margin:30px 0 8px}
.track .ok{position:absolute;top:0;bottom:0;background:var(--green);border-radius:99px}
.track .mk{position:absolute;top:-26px;transform:translateX(-50%);transition:left .25s;background:#fff;color:#000;border-radius:8px;padding:1px 8px;font-weight:800;font-size:12px}
.track .mk:after{content:"";position:absolute;left:50%;bottom:-5px;margin-left:-5px;border:5px solid transparent;border-top-color:#fff;border-bottom:0}
.ticks{display:flex;justify-content:space-between;width:100%;color:var(--mut);font-size:11px}
.hist{display:flex;gap:6px;overflow:hidden;width:100%;justify-content:flex-end;min-height:26px}
.hist span{padding:2px 9px;border-radius:99px;background:var(--card2);font-weight:700;font-size:12px}.hist span.w{color:var(--green)}.hist span.l{color:var(--red2)}
canvas{max-width:100%;display:block}
.mines{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;width:min(100%,460px)}
.mine{aspect-ratio:1;border:0;border-radius:12px;background:var(--card2);font-size:30px;display:grid;place-items:center;transition:.15s;box-shadow:inset 0 -4px #0004}
.mine:hover:not(:disabled){background:#2f2f37;transform:translateY(-2px)}
.mine.gem{background:#12351f}.mine.bomb{background:#3a1015}.mine.dim{opacity:.45}
.keno{display:grid;grid-template-columns:repeat(8,1fr);gap:7px;width:min(100%,560px)}
.kn{aspect-ratio:1.2;border:0;border-radius:10px;background:var(--card2);font-weight:800;font-size:15px}
.kn:hover{background:#2f2f37}.kn.pick{background:#4a1a20;outline:2px solid var(--red)}.kn.hit{background:var(--green);color:#000;outline:0}.kn.drawn{background:#444}
.paytable{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}.paytable div{background:#0c0c0f;border:1px solid var(--line);border-radius:8px;padding:4px 10px;text-align:center;font-size:12px}.paytable div.on{border-color:var(--green);color:var(--green)}
.pl-b{display:flex;width:100%;gap:3px;justify-content:center}.pl-b span{flex:1;max-width:48px;text-align:center;font-size:11px;font-weight:800;padding:5px 0;border-radius:6px;color:#fff}
.fair{margin-top:16px}
.fair summary{cursor:pointer;font-weight:700}
.mono{font-family:ui-monospace,Consolas,monospace;font-size:12px;word-break:break-all;color:#cfcfd6}

/* chat */
.chat-h{display:flex;align-items:center;gap:8px;padding:12px;border-bottom:1px solid var(--line)}
.chat-h select{width:auto;padding:6px 8px}
.msgs{flex:1;overflow-y:auto;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.msg{font-size:13px;word-break:break-word}.msg b{cursor:pointer}.msg .lv{font-size:10px;padding:0 5px;border-radius:5px;background:var(--card2);margin-right:4px;color:var(--gold);font-weight:800}
.msg.sys{color:var(--gold);background:#2a210a;border-radius:8px;padding:6px 8px}
.chat-f{padding:10px;border-top:1px solid var(--line);display:flex;gap:6px}

/* modal / toast */
#modal{position:fixed;inset:0;z-index:100;background:#000b;display:grid;place-items:center;padding:16px;overflow:auto}
.mbox{background:var(--card);border:1px solid var(--line);border-radius:16px;width:min(560px,100%);max-height:92vh;overflow:auto;padding:22px;position:relative}
.mbox .x{position:absolute;top:12px;right:12px}
.mbox h2{margin-bottom:14px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:14px;overflow:auto}
.tabs button{background:none;border:0;padding:10px 14px;color:var(--mut);font-weight:700;border-bottom:2px solid transparent;white-space:nowrap}
.tabs button.on{color:#fff;border-color:var(--red)}
#toasts{position:fixed;right:16px;bottom:84px;z-index:200;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.toast{background:var(--card2);border:1px solid var(--line);border-left:4px solid var(--red);border-radius:10px;padding:10px 14px;box-shadow:0 10px 30px #000a;animation:tin .25s;max-width:340px}
.toast.ok{border-left-color:var(--green)}
@keyframes tin{from{transform:translateX(30px);opacity:0}}
.qr{width:150px;height:150px;border-radius:10px;background:#fff;padding:8px;image-rendering:pixelated}

/* sports */
.ev{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.odds{display:flex;gap:6px}.odd{min-width:70px;background:var(--card2);border:1px solid transparent;border-radius:8px;padding:6px 8px;text-align:center}.odd small{display:block;color:var(--mut);font-size:10px}.odd b{color:var(--gold)}
.odd:hover{border-color:var(--red)}.odd.on{background:var(--red);}.odd.on b,.odd.on small{color:#fff}
.live{color:var(--red2);font-weight:800;font-size:11px;animation:blink 1.4s infinite}@keyframes blink{50%{opacity:.4}}
.two{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
.vip-card{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center}
.faq details{border-top:1px solid var(--line);padding:10px 0}.faq summary{font-weight:700;cursor:pointer}
#foot{padding:26px 20px 90px;border-top:1px solid var(--line);color:var(--mut);font-size:12px;margin-top:30px}
#bottom{display:none}

@media(max-width:1500px){body.chat-open{--chat:300px}}
@media(max-width:1180px){
  #app,body.chat-open #app{grid-template-columns:minmax(0,1fr)}
  #side{position:fixed;left:0;top:0;z-index:60;width:260px;transform:translateX(-100%);transition:.2s}
  body.menu-open #side{transform:none;box-shadow:0 0 0 100vmax #000a}
  body.chat-open #chat{position:fixed;inset:0;z-index:70;height:100dvh}
  #bottom{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:40;background:var(--bg2);border-top:1px solid var(--line);padding:4px 4px calc(4px + env(safe-area-inset-bottom))}
  #bottom a,#bottom button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10px;padding:6px 0;color:var(--mut);background:none;border:0}
  #bottom .on{color:#fff}#bottom .on svg{color:var(--red2)}
  .game{grid-template-columns:1fr}.ctrl{border-right:0;border-bottom:1px solid var(--line)}
  .two{grid-template-columns:1fr}
  #top{padding:8px 12px}
}
@media(max-width:640px){
  #view{padding:12px}.hero{padding:20px}.hero img.crown{opacity:.25;width:50%}
  .vipbar,.hide-m,.demo-tag{display:none}#top{gap:6px}#top .btn.sm{padding:6px 9px}#langSel{padding:6px 4px!important}
  .bal-b{min-width:0;padding:8px}.bal .usd{display:none}
  .tiles{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
  .keno{gap:5px}.statrow{grid-template-columns:repeat(3,1fr)}
  .vip-card{grid-template-columns:auto 1fr}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
body.fast *{transition:none!important}

.gframe{width:100%;height:min(76vh,680px);border:0;border-radius:14px;background:#0b0b0e;display:block}
.tile{transition:transform .18s,box-shadow .18s}.tile:hover{transform:translateY(-3px);box-shadow:0 14px 34px #0009}

/* ---- polish pass: depth, focus, motion, small screens ---- */
:focus-visible{outline:2px solid var(--red,#e11d2e);outline-offset:2px;border-radius:8px}
::selection{background:#e11d2e66}
*{scrollbar-width:thin;scrollbar-color:#2d2d38 transparent}
.card{background:linear-gradient(180deg,#16161c,#121217);border:1px solid #25252e;box-shadow:0 1px 0 #ffffff06 inset,0 12px 30px #0004;transition:border-color .2s}
.card:hover{border-color:#34343f}
.btn.red{background:linear-gradient(#f0293b,#c3121f);box-shadow:0 8px 24px #e11d2e33,0 1px 0 #ffffff30 inset;transition:transform .12s,box-shadow .2s,filter .2s}
.btn.red:hover{filter:brightness(1.08);box-shadow:0 10px 30px #e11d2e55}.btn.red:active{transform:translateY(1px) scale(.99)}
.btn.ghost{transition:background .2s,border-color .2s}.btn.ghost:hover{background:#ffffff0a}
.hero{background:radial-gradient(900px 300px at 85% 0,#e11d2e26,transparent 60%),linear-gradient(135deg,#1a1015,#0f0f14 55%);border:1px solid #2a1a20;position:relative;overflow:hidden}
.hero h1{letter-spacing:-.02em;text-wrap:balance}
.tile{border:1px solid #ffffff12;overflow:hidden;position:relative}.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,#000a);pointer-events:none}.tile b,.tile small,.tile .tag{position:relative;z-index:1}
.tile:hover{border-color:#ffffff30}
.pill{backdrop-filter:blur(4px)}
table tbody tr{transition:background .15s}table tbody tr:hover{background:#ffffff06}
.modal-box,#modal .box{box-shadow:0 30px 90px #000c;border:1px solid #2a2a34}
input:focus,select:focus,textarea:focus{border-color:#e11d2e88;box-shadow:0 0 0 3px #e11d2e22;outline:none}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
@media (max-width:640px){.hero h1{font-size:26px}.tiles{gap:10px}.card{border-radius:14px}}
.sepv{width:1px;background:var(--line,#26262e);margin:0 4px;align-self:stretch}.ev .odds{display:flex;flex-wrap:wrap;gap:6px;align-items:stretch}

.qr svg{width:100%;height:100%;display:block}