:root{--bg:#0b0b0c;--hdr:#141415;--panel:#171718;--row:#1b1b1d;--line:#2b2b2e;--dim:#8e8e95;
--g:#5bd53a;--o:#f59a1c;--r:#ff4a3d;--red:#ff5a36;--b:#34b4ff;--p:#b46cff;--m:#e83fd6;
--flame:linear-gradient(135deg,#ff5c7a 0%,#e50539 60%,#b3022a 100%);
--fd:Unbounded,"Arial Black","Segoe UI",Arial,sans-serif;
--fb:Manrope,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px);background:var(--bg)}
*,*:before,*:after{box-sizing:inherit}
body{margin:0;min-height:100vh;background:var(--bg);color:#fff;font:600 13px/1.3 var(--fb);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;overscroll-behavior-y:none;overflow-x:hidden}
input{-webkit-user-select:text;user-select:text;font-family:inherit}
button,.lnk{touch-action:manipulation;font-family:inherit}
button:focus-visible,.lnk:focus-visible{outline:2px solid #e50539;outline-offset:2px}
body.demo .real,body:not(.demo) .guest{display:none}
/* header */
header{position:sticky;top:0;z-index:8;display:flex;align-items:center;gap:10px;height:52px;padding:0 12px;background:linear-gradient(180deg,#1a1a1c,#141415);border-bottom:1px solid var(--line)}
header:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--flame)}
.logo{display:flex;align-items:baseline;font:800 21px var(--fd);letter-spacing:-.045em;white-space:nowrap;color:#fff}
.logo b{font-weight:800;background:var(--flame);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-right:.06em}
header .hr{display:flex;align-items:center;gap:10px;margin-left:auto;min-width:0}
.bal{color:var(--g);font-weight:800;font-size:14px;white-space:nowrap;padding:0 4px;font-variant-numeric:tabular-nums}
body.demo .bal{display:none}
.bal small{color:var(--dim);font-weight:600;font-size:11px;margin-left:3px}
.lnk{cursor:pointer;color:var(--dim);font-size:11px;margin-left:6px;text-decoration:underline}
.hb{border:0;border-radius:10px;padding:0 14px;height:34px;font:800 13px var(--fb);color:#fff;cursor:pointer;transition:filter .15s,transform .1s;white-space:nowrap}
.hb:hover{filter:brightness(1.1)}.hb:active{transform:scale(.96)}
.hb.rd,.hb.d{background:var(--flame);color:#fff}
.hb.w{background:linear-gradient(180deg,#46c926,#2a9a0e);color:#032b1e}
.hb.g{background:none;border:1px solid #404044;color:#e6e6ea}
.mn{width:34px;height:34px;border:0;background:#262628;border-radius:10px;cursor:pointer;display:grid;place-items:center;padding:0;flex:none}
.mn i{display:block;width:16px;height:2px;background:#d6d6db;box-shadow:0 5px #d6d6db,0 -5px #d6d6db}
/* layout */
.app{display:grid;grid-template-columns:1fr;gap:5px;max-width:1280px;margin:6px auto 2px;padding:0 6px}
.main{min-width:0;display:flex;flex-direction:column;gap:6px}
.strip{display:flex;gap:6px;align-items:center;height:26px}
.hist{flex:1;min-width:0;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}.hist::-webkit-scrollbar{display:none}
.hist span{flex:none;padding:3px 9px;border-radius:999px;background:#101011;border:1px solid var(--line);font:800 12px var(--fb);font-variant-numeric:tabular-nums}
.b{color:var(--b)}.p{color:var(--p)}.m{color:var(--m)}
.stage{position:relative;border-radius:12px;height:clamp(190px,32vh,380px);background:#08080a;border-radius:16px;border:1px solid var(--line);overflow:hidden}
canvas{display:block;width:100%;height:100%}
.toast{position:absolute;top:10px;left:50%;transform:translate(-50%,-20px);max-width:92%;background:#17330f;border:1px solid #3f8f1f;border-radius:20px;padding:7px 16px;font-size:13px;font-weight:700;opacity:0;transition:.25s;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:3}
.toast.on{opacity:1;transform:translate(-50%,0)}.toast b{color:var(--g)}

.nlb{position:absolute;right:10px;bottom:12px;z-index:5;border:0;border-radius:14px;padding:11px 16px;font:800 12px Manrope,sans-serif;cursor:pointer;color:#fff;background:linear-gradient(135deg,#1db954,#0d8f3c);border:2px solid #7dff9a;box-shadow:0 0 18px #2ecc7188,0 0 36px #2ecc7144,0 4px 14px #000a;letter-spacing:.03em;text-transform:uppercase;transition:.15s;animation:nlpulse 1.8s ease-in-out infinite}
.nlb:hover{filter:brightness(1.12);transform:scale(1.03)}.nlb:active{transform:scale(.97)}
.nlb.on{background:linear-gradient(135deg,#2ecc71,#19a34a);color:#04210f;border-color:#c8ffd4;box-shadow:0 0 22px #2ecc71cc,0 0 40px #2ecc7166;animation:nlpulse 1.2s ease-in-out infinite}
.nlb small{display:block;font-size:10px;font-weight:700;opacity:.9;text-transform:none;letter-spacing:0;margin-top:2px}
@keyframes nlpulse{0%,100%{box-shadow:0 0 14px #2ecc7188,0 0 28px #2ecc7140,0 4px 14px #000a}50%{box-shadow:0 0 26px #2ecc71cc,0 0 48px #2ecc7166,0 4px 14px #000a}}

/* bet panels */
#panels{display:grid;grid-template-columns:1fr;gap:6px}
.bp{background:linear-gradient(180deg,#1a1a1c,#171718);border:1px solid var(--line);border-radius:12px;padding:6px;transition:border-color .2s,box-shadow .2s}
.bp.won{border-color:var(--g)}.bp.lock .sk{opacity:.4;pointer-events:none}
.top{display:grid;grid-template-columns:1fr 1.1fr;gap:8px}
.stake{display:flex;align-items:center;background:#0b0b0c;border:1px solid var(--line);border-radius:10px;height:30px;padding:0 4px}
.stake:focus-within{border-color:#e50539}
.stake button{width:24px;height:24px;border-radius:50%;border:1px solid #404044;background:none;color:#d6d6db;font-size:16px;cursor:pointer;line-height:1;padding:0;flex:none}
.stake button:active{transform:scale(.9)}
.stake input{flex:1;min-width:0;width:100%;background:none;border:0;outline:0;color:#fff;text-align:center;font:800 16px var(--fb);-moz-appearance:textfield}
.stake input::-webkit-inner-spin-button{-webkit-appearance:none}
.quick{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:4px}
.quick button{height:22px;background:#262628;border:0;border-radius:10px;color:var(--dim);font:700 13px var(--fb);cursor:pointer;transition:background .15s,color .15s}
.quick button:hover{color:#fff;background:#303033}.quick button:active{transform:scale(.95)}
.act{border:2px solid;border-radius:14px;color:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:56px;padding:3px;overflow:hidden;transition:transform .12s,filter .12s;font-family:var(--fb)}
.act:hover{filter:brightness(1.06)}.act:active{transform:scale(.98)}
.act b,.act span{color:inherit}.act b{font:900 20px var(--fb);letter-spacing:.02em;text-transform:uppercase;}.act span{font-size:16px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.act.green{background:linear-gradient(180deg,#46c926,#2a9a0e);border-color:#8be86f;color:#fff}
.act.orange{background:linear-gradient(180deg,#f59a1c,#d07206);border-color:#ffdc94;color:#fff}
.act.red{background:linear-gradient(180deg,#e0243f,#b3011a);border-color:#ffa59c;color:#fff}
.act.orange b{font-size:15px}.act.orange span{font-size:24px;font-weight:900;line-height:1}
.act.orange{border-width:3px;border-color:#fff3c4}
@keyframes cashglow{0%,100%{box-shadow:0 0 0 0 #ffb12e00,0 0 10px #ffb12e88}50%{box-shadow:0 0 0 4px #ffb12e44,0 0 24px #ffb12ecc}}
.act.red span{font-size:14px;font-weight:800}
.auto{display:flex;align-items:center;gap:8px;margin-top:4px;padding:3px 10px;background:var(--row);border-radius:12px;font-size:12px;font-weight:700;color:var(--dim)}
.auto input[type=checkbox]{-webkit-appearance:none;appearance:none;width:38px;height:21px;border-radius:12px;background:#303033;position:relative;cursor:pointer;transition:.2s;flex:none;margin:0}
.auto input[type=checkbox]:after{content:"";position:absolute;top:3px;left:3px;width:15px;height:15px;border-radius:50%;background:#fff;transition:.2s}
.auto input[type=checkbox]:checked{background:var(--g)}.auto input[type=checkbox]:checked:after{left:20px}
.auto input[type=checkbox]:focus-visible{outline:2px solid #e50539;outline-offset:2px}
.auto input[type=number]{width:72px;margin-left:auto;background:#0b0b0c;border:1px solid var(--line);border-radius:12px;color:#fff;padding:3px 10px;font:800 15px var(--fb)}
.auto input[type=number]:focus{outline:0;border-color:#e50539}
/* live bets */
.side{background:var(--panel);border:1px solid var(--line);border-radius:16px;display:flex;flex-direction:column;order:3;height:320px;overflow:hidden}
.tabs{display:flex;margin:8px;background:#0c0c0d;border-radius:12px;padding:3px}
.tabs button{flex:1;border:0;background:none;color:var(--dim);padding:7px 0;border-radius:9px;font:700 12px var(--fb);cursor:pointer;transition:background .15s,color .15s}
.tabs button:hover{color:#fff}.tabs .on{background:#363639;color:#fff}
.hd #tw{color:var(--g);font-weight:800}.hd{display:flex;justify-content:space-between;padding:0 12px 6px;color:var(--dim);font-size:12px;font-weight:700}
.th,.r{display:grid;grid-template-columns:1.5fr 1fr .8fr 1fr;align-items:center;gap:4px;font-size:12px}
.th{color:var(--dim);font-size:11px;padding:0 12px 4px}
.th span:nth-child(n+2),.r>span:nth-child(n+2){text-align:right}
#rows{flex:1;overflow-y:auto;padding:0 6px 6px;scrollbar-width:thin;scrollbar-color:#363639 transparent}
.r{height:26px;background:var(--row);border-radius:8px;margin-bottom:2px;padding:0 6px;font-variant-numeric:tabular-nums}
.r.w{background:#17330f;box-shadow:inset 0 0 0 1px #3f8f1f}
.u{display:flex;align-items:center;gap:6px;overflow:hidden;white-space:nowrap}
.u i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font:800 10px var(--fb);text-transform:uppercase;flex:none}
.bd{display:inline-block;padding:2px 7px;border-radius:10px;background:#0b0b0c;font-weight:800;font-size:11px}
/* drawer + modals */
.dr{position:fixed;top:0;right:0;bottom:0;width:min(300px,86vw);background:var(--hdr);border-left:1px solid var(--line);z-index:10;transform:translateX(100%);transition:.25s;padding:calc(16px + env(safe-area-inset-top,0px)) 16px 16px;overflow-y:auto;box-shadow:-8px 0 24px #000a}
.dr.on{transform:none}
.sh{position:fixed;inset:0;background:#000000b3;z-index:9;display:none}.sh.on{display:block}
h4{margin:4px 40px 12px 0;font:800 17px var(--fd);letter-spacing:-.03em}
.x{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;border:0;background:#262628;color:#d6d6db;font-size:20px;line-height:1;cursor:pointer;padding:0}
.x:hover{background:#303033;color:#fff}
.mi{display:flex;justify-content:space-between;align-items:center;width:100%;background:none;border:0;border-bottom:1px solid var(--line);color:#fff;padding:13px 8px;font:700 14px var(--fb);cursor:pointer;text-align:left;border-radius:8px}
.mi:hover{background:#222224}.mi[data-i]:after{content:"\203A";color:var(--dim);font-size:18px}
.mi span{background:#0b0b0c;border-radius:10px;padding:2px 10px;font-size:12px;color:var(--g)}
.inf{display:none;background:var(--row);border-radius:10px;padding:10px 12px;margin:6px 0;line-height:1.5;color:var(--dim);font-size:12px;font-weight:600}.inf.on{display:block}
.md{position:fixed;inset:0;z-index:12;background:#000000bb;display:none;place-items:start center;padding:calc(env(safe-area-inset-top,0px) + 7vh) 12px 12px;overflow-y:auto;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.md.on{display:grid}
.mb{position:relative;width:100%;max-width:380px;border-radius:20px;padding:24px 18px 18px;background:linear-gradient(180deg,#1a1a1c,#141415);border:1px solid var(--line);box-shadow:0 20px 50px #000c;animation:pop .22s ease-out}
.mb:before{content:"";position:absolute;left:18px;right:18px;top:-1px;height:2px;border-radius:2px;background:var(--flame)}
@keyframes pop{from{opacity:0;transform:translateY(-14px) scale(.97)}to{opacity:1;transform:none}}
.mb h4{font-size:17px;margin:0 36px 4px 0}.mb .sub{margin:0 0 10px;color:#fff;font-size:13px;font-weight:600}
.mb label{display:block;font-weight:700;margin-top:10px;color:#fff}
.mb input{width:100%;background:#111114;border:1px solid #55555a;border-radius:12px;color:#fff;padding:12px 14px;font:700 16px var(--fb);margin:6px 0;transition:.15s}
.mb input::placeholder{color:#ccc}
.mb input:focus{outline:0;border-color:#e50539;border-width:2px}
.mb .full{width:100%;height:46px;margin-top:16px;font-size:14px}.mb .full:disabled{opacity:.6;cursor:wait}
.mb .lk{display:flex;justify-content:space-between;padding-top:10px}.mb .lnk{color:#fff;text-decoration:underline}.mb .lnk:hover{color:#e50539}
/* compact registration form */
.mb.compact{padding:16px 14px 14px;max-width:360px}
.mb.compact h4{font-size:16px;margin:0 36px 2px 0}
.mb.compact .sub{margin:0 0 6px;font-size:12px;color:#fff}
.mb.compact label{margin-top:6px;font-size:13px;color:#fff}
.mb.compact input{padding:9px 12px;margin:2px 0;font-size:15px;border-color:#666;background:#0e0e10}
.mb.compact .full{height:42px;margin-top:10px;font-size:15px}
.mb.compact .lk{padding-top:6px;justify-content:center}
.tx{text-align:center;padding:4px 0 2px}.tx .sub{margin:4px 0 10px}.ti{width:64px;height:64px;margin:6px auto 12px;border-radius:50%;display:grid;place-items:center;border:3px solid;font:900 28px var(--fb)}
.ti.wait{border-color:#f59a1c33;border-top-color:#f59a1c;animation:txsp 1s linear infinite}.ti.ok{border-color:#5bd53a;color:#5bd53a;background:#5bd53a1a}.ti.fail{border-color:#ff4a3d;color:#ff4a3d;background:#ff4a3d1a}
@keyframes txsp{to{transform:rotate(360deg)}}.txa{font:800 26px var(--fd);margin:2px 0 4px;color:#5bd53a}.tx .hb{margin-top:6px}
.msg:empty{display:none}.msg{background:#dc2626;color:#fff;border:2px solid #f87171;border-radius:12px;padding:12px 14px;margin-top:12px;font-weight:800;font-size:14px;text-align:center;box-shadow:0 4px 12px #0006}
footer{max-width:1280px;margin:0 auto;padding:6px 14px 18px;text-align:center;color:var(--dim);font-size:11px;font-weight:600}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
@media(min-width:521px){.md{place-items:center}}
@media(min-width:621px){#panels{grid-template-columns:1fr 1fr}.app{padding:0 8px}}
@media(min-width:861px){.app{grid-template-columns:min(310px,30%) 1fr;gap:8px}.side{order:0;height:min(690px,calc(100vh - 90px))}.stage{height:clamp(280px,46vh,420px)}}
@media(max-width:420px){.logo{font-size:16px}.bal{padding:0}.bal small{font-size:10px;margin-left:2px}.hb{padding:0 9px;font-size:11px;height:32px}header{gap:6px;padding:0 8px}header .hr{gap:5px;margin-left:auto}.bal{font-size:13px;line-height:1.1}.act b{font-size:19px}.act span{font-size:14px}.mn{width:32px;height:32px}}
@media(max-width:360px){header{gap:4px;padding:0 6px}header .hr{gap:4px}.logo{font-size:12.5px}.hb{padding:0 6px;font-size:10.5px;height:30px}.bal{font-size:11px}.bal small{font-size:9px}.mn{width:30px;height:30px}}


/* ===== Deposit progress overlay ===== */
.dep-tx{padding-top:2px}
.dep-steps{display:flex;align-items:flex-start;justify-content:space-between;gap:0;margin:16px 4px 18px;position:relative}
.dep-step{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;position:relative;z-index:1}
.dep-dot{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:800 13px var(--fb);border:2px solid #3a3a3e;background:#1a1a1c;color:#888;transition:.35s}
.dep-meta{display:flex;flex-direction:column;gap:2px;min-height:36px}
.dep-meta b{font-size:11px;color:#aaa;font-weight:800;letter-spacing:.02em}
.dep-meta span{font-size:10px;color:#666;font-weight:600;line-height:1.2}
.dep-step.on .dep-dot{border-color:#e50539;background:linear-gradient(145deg,#e50539,#9a0326);color:#fff;box-shadow:0 0 0 4px #e5053922,0 6px 16px #e5053944;animation:depPop .4s ease}
.dep-step.on .dep-meta b{color:#fff}
.dep-step.on .dep-meta span{color:#c9c9ce}
.dep-step.done .dep-dot{border-color:#3f8f1f;background:#1a3a12;color:#5bd53a}
.dep-step.done .dep-meta b{color:#8fdf6a}
.dep-line{flex:0 0 12px;height:2px;background:#2a2a2e;margin-top:16px;align-self:flex-start;border-radius:2px;position:relative;overflow:hidden}
.dep-step.done + .dep-line{background:#3f8f1f}
.dep-phone{font-size:42px;line-height:1;margin:8px 0 4px;animation:depBounce 1.2s ease-in-out infinite}
.dep-pulse{display:flex;gap:8px;justify-content:center;margin:14px 0 8px}
.dep-pulse span{width:10px;height:10px;border-radius:50%;background:#e50539;opacity:.35;animation:depPulse 1.2s ease-in-out infinite}
.dep-pulse span:nth-child(2){animation-delay:.2s}
.dep-pulse span:nth-child(3){animation-delay:.4s}
@keyframes depPop{0%{transform:scale(.7);opacity:.5}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
@keyframes depBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes depPulse{0%,100%{opacity:.25;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
.ti.wait{border-color:#e50539;color:#e50539;background:radial-gradient(circle at 50% 50%,#e5053922,transparent 70%);animation:txsp 1s linear infinite}
.ti.wait:before{content:"";width:22px;height:22px;border:3px solid #e5053944;border-top-color:#e50539;border-radius:50%;animation:txsp .8s linear infinite}

.r.flash{animation:cashFlash .9s ease;background:linear-gradient(90deg,#1a3a1222,#1a3a1200)}
@keyframes cashFlash{0%{background:#1a3a1266}100%{background:transparent}}