:root{--bg:#070910;--p:#121728;--p2:#1a2036;--t:#eaf0ff;--m:#8d96b8;--a:#ff8a1f;--c1:#38e1ff;color-scheme:dark;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--t);font-family:Rajdhani,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:17px;font-weight:600;overflow:hidden}
canvas#c{display:block;width:100%;height:100%}
button{font:inherit;font-weight:700;cursor:pointer;color:var(--t);background:var(--p2);border:1px solid #2f3a62;border-radius:10px;padding:9px 16px;transition:.15s}
button:hover:not(:disabled){border-color:var(--a);transform:translateY(-1px)}
button:disabled{cursor:default}
.big{background:linear-gradient(135deg,#ffa23a,#ff6a1a);color:#1a0d00;border:0;font-family:Orbitron,sans-serif;font-weight:800;font-size:17px;letter-spacing:1px;padding:14px 36px;box-shadow:0 0 24px #ff8a1f66}
.sm{padding:4px 10px;font-size:13px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.logo{font-family:Orbitron,sans-serif;font-weight:800;font-size:24px;letter-spacing:2px}.logo span,.big2 span{color:var(--a)}
.big2{font-size:54px;text-shadow:0 0 30px #ff8a1f55}
/* HUD */
#hud{position:fixed;inset:0;pointer-events:none;display:none;font-family:Orbitron,sans-serif}
#xh{position:absolute;left:50%;top:50%;width:0;height:0;--sp:6px}
#xh i{position:absolute;background:#fff;box-shadow:0 0 4px #000}
#xh i:nth-child(1){width:2px;height:9px;left:-1px;top:calc(-9px - var(--sp))}#xh i:nth-child(2){width:2px;height:9px;left:-1px;top:var(--sp)}
#xh i:nth-child(3){height:2px;width:9px;top:-1px;left:calc(-9px - var(--sp))}#xh i:nth-child(4){height:2px;width:9px;top:-1px;left:var(--sp)}
#hm{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px;opacity:0;color:#ff3b3b;font-size:28px;line-height:30px;text-align:center;text-shadow:0 0 8px #f00}
#top{position:absolute;top:14px;left:50%;transform:translateX(-50%);display:flex;gap:2px;background:#0a0e1acc;border:1px solid #ffffff22;border-radius:14px;overflow:hidden;backdrop-filter:blur(6px)}
#top div{padding:6px 18px;text-align:center}#top small{display:block;font-size:10px;color:var(--m);letter-spacing:2px}#top b{font-size:22px}
#radar{position:absolute;right:16px;top:16px;border-radius:50%;background:radial-gradient(#0e1a2fdd,#060a14dd);border:2px solid #38e1ff66;box-shadow:0 0 20px #38e1ff33}
#feed{position:absolute;right:16px;top:170px;text-align:right}
#feed div{color:var(--a);font-size:15px;text-shadow:0 1px 4px #000;animation:fd 1.6s forwards}
@keyframes fd{0%{opacity:0;transform:translateX(20px)}10%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0}}
#hpw{position:absolute;left:18px;bottom:18px;width:300px;height:26px;background:#0a0e1acc;border:1px solid #ffffff2a;border-radius:13px;overflow:hidden;transform:skewX(-8deg)}
#hp{height:100%;background:linear-gradient(90deg,#ff3b3b,#2fe07a);transition:width .2s}
#hpw.low #hp{background:#ff3b3b;animation:pl .6s infinite alternate}@keyframes pl{to{opacity:.55}}
#hpn{position:absolute;left:14px;top:2px;font-weight:800;font-size:15px;text-shadow:0 1px 3px #000}#hpw em{position:absolute;right:12px;top:4px;font-size:12px;font-style:normal;color:#ffffffaa}
#wpn{position:absolute;right:18px;bottom:18px;background:#0a0e1acc;border:1px solid #ffffff2a;border-radius:12px;padding:10px 16px;text-align:right;font-size:18px}
#flash{position:absolute;inset:0;background:radial-gradient(transparent 40%,#f003);opacity:0}
#msg{position:absolute;left:0;right:0;top:20%;text-align:center;font-size:44px;font-weight:800;letter-spacing:6px;color:var(--a);text-shadow:0 0 24px #ff8a1f;opacity:0}
#msg.pop{animation:pp 1.8s forwards}@keyframes pp{0%{opacity:0;transform:scale(1.8)}15%{opacity:1;transform:scale(1)}80%{opacity:1}100%{opacity:0}}
/* menu */
#menu{position:fixed;inset:0;background:radial-gradient(circle at 20% 0,#1b2347cc,#070910f2 60%);display:none;justify-content:center;overflow:auto;padding:18px 12px;backdrop-filter:blur(4px)}
.shell{max-width:900px;width:100%}
header{display:flex;align-items:center;gap:16px;flex-wrap:wrap}header .logo{flex:1}
.pill{background:var(--p);border:1px solid #ffd23f55;border-radius:20px;padding:6px 16px;font-size:20px;color:#ffd23f}
#chip{display:flex;align-items:center;gap:10px;background:var(--p);border:1px solid #2f3a62;border-radius:14px;padding:6px 12px}
.av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--c1),#b45cff);display:grid;place-items:center;font-weight:800;font-size:18px;color:#08101a}
.who small{display:block;color:var(--m);font-size:12px}.xp{height:4px;background:#0006;border-radius:2px;overflow:hidden;margin-top:3px}.xp i{display:block;height:100%;background:var(--c1)}
nav{display:flex;gap:6px;margin:16px 0;border-bottom:1px solid #2f3a62}
.tab{background:none;border:0;border-bottom:3px solid transparent;border-radius:0;padding:10px 20px;font-family:Orbitron,sans-serif;font-size:14px;letter-spacing:1px;color:var(--m);text-transform:uppercase}
.tab.on{color:var(--a);border-bottom-color:var(--a)}
.hero{padding:34px;border-radius:18px;background:linear-gradient(120deg,#1b2347,#2a1b3d 60%,#3a1f12);border:1px solid #ffffff1a}
.hero h1{font-family:Orbitron,sans-serif;font-size:34px;margin:0 0 6px}.hero p{color:var(--m);margin:0 0 22px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin-top:16px}
.stats div{background:var(--p);border:1px solid #2f3a62;border-radius:12px;padding:14px;color:var(--m);text-align:center}.stats b{display:block;font-family:Orbitron,sans-serif;font-size:26px;color:var(--t)}
.hint{color:var(--m);font-size:14px;margin-top:18px}h3{color:var(--m);text-transform:uppercase;letter-spacing:2px;font-size:14px;margin:18px 0 10px}
.crates{align-items:stretch}.crate{flex:1;min-width:250px;background:var(--p);border:1px solid var(--c);border-radius:16px;padding:22px;text-align:center;box-shadow:0 0 30px color-mix(in srgb,var(--c) 25%,transparent)}
.crate>b{display:block;font-family:Orbitron,sans-serif;font-size:18px;margin-bottom:10px}
.cbox{width:96px;height:84px;margin:14px auto 22px;position:relative;border-radius:8px;background:linear-gradient(135deg,#8a5a30,#5a3a1c);border:3px solid #2a2f3d;box-shadow:0 0 34px var(--c),inset 0 0 0 4px #0003;animation:fl 3s ease-in-out infinite}
.cbox:before{content:"";position:absolute;left:-6px;right:-6px;top:-10px;height:22px;border-radius:6px;background:linear-gradient(#a06a3a,#6b4a2a);border:3px solid #2a2f3d}
.cbox:after{content:"";position:absolute;left:50%;top:28px;width:18px;height:18px;margin-left:-9px;background:var(--c);border-radius:3px;box-shadow:0 0 14px var(--c)}
@keyframes fl{50%{transform:translateY(-8px)}}
.odds{margin:10px 0 16px;text-align:left;font-size:14px}.odds div{display:grid;grid-template-columns:92px 1fr 44px;gap:8px;align-items:center;margin:4px 0}.odds span{text-transform:capitalize}
.odds i,.bar i{height:6px;background:#0007;border-radius:3px;overflow:hidden;display:block}.odds u,.bar u{display:block;height:100%}.odds em{font-style:normal;color:var(--m);text-align:right}
.g{display:flex;gap:12px;flex-wrap:wrap}
.wcard{width:var(--cw,150px);background:var(--p);border:1px solid var(--c);border-radius:14px;padding:12px;box-shadow:0 0 18px color-mix(in srgb,var(--c) 22%,transparent)}
.wcard.on{background:linear-gradient(160deg,var(--p),color-mix(in srgb,var(--c) 28%,var(--p)))}.wcard.lock{opacity:.5}
.wcard svg{width:100%;height:60px}.wcard b{display:block}.wcard small{color:var(--c);text-transform:uppercase;font-size:11px;letter-spacing:1px}
.wcard button{width:100%;margin-top:8px}.bar{display:grid;grid-template-columns:42px 1fr;gap:6px;align-items:center;margin:5px 0;font-size:11px;color:var(--m)}.bar em{font-style:normal}.bar u{background:var(--c1)}
.sw2{width:128px;text-align:left;border-color:var(--c)}.sw2.on{background:color-mix(in srgb,var(--c) 30%,var(--p2))}.sw2.lock{opacity:.4}
.sw2 span{display:block;width:100%;height:26px;border-radius:6px;margin-bottom:6px}.sw2 small{display:block;color:var(--m);font-size:11px;text-transform:uppercase}
.opt{display:flex;justify-content:space-between;align-items:center;background:var(--p);border:1px solid #2f3a62;border-radius:12px;padding:14px 18px;margin-bottom:10px}.opt input[type=range]{width:240px;accent-color:var(--a)}.opt input[type=checkbox]{width:22px;height:22px;accent-color:var(--a)}
/* gate (login) */
#gate{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;text-align:center;
 background:radial-gradient(circle at 50% 30%,#2a1b3dcc,#070910 70%),linear-gradient(#0000 0,#0000),repeating-linear-gradient(0deg,#ffffff08 0 1px,#0000 1px 48px),repeating-linear-gradient(90deg,#ffffff08 0 1px,#0000 1px 48px),#070910;animation:gd 20s linear infinite;background-size:auto,auto,48px 48px,48px 48px,auto}
@keyframes gd{to{background-position:0 0,0 0,0 48px,48px 0,0 0}}
.gbox{padding:24px;max-width:480px}.gbox p{color:var(--m);margin:6px 0 30px;font-size:19px}
#g-btns{display:none;flex-direction:column;gap:14px;align-items:center}
.gbtn{background:#fff;color:#1f1f1f;border:0;font-size:19px;padding:14px 30px;border-radius:12px;display:flex;align-items:center;gap:12px;box-shadow:0 0 30px #ffffff33}
.gg{width:28px;height:28px;border-radius:50%;background:#4285f4;color:#fff;display:grid;place-items:center;font-weight:800}
.link{background:none;border:0;color:var(--m);text-decoration:underline;font-size:15px}
.spin{color:var(--m);animation:pl 1s infinite alternate}#g-err{color:#ff6b6b;margin-top:16px;font-size:15px;min-height:20px}
/* reveal + results + toast */
#reveal,#results{position:fixed;inset:0;z-index:40;display:none;align-items:center;justify-content:center;overflow:hidden}
#reveal{background:radial-gradient(circle,color-mix(in srgb,var(--g,#555) 35%,#000) 0,#000e 70%)}
.r-common{--g:#9aa4c4}.r-rare{--g:#3b9cff}.r-epic{--g:#b45cff}.r-legendary{--g:#ffb81f}
.shake{animation:sk .25s infinite}@keyframes sk{25%{transform:rotate(-6deg) scale(1.1)}75%{transform:rotate(6deg) scale(1.1)}}
.beam{position:absolute;width:160vmax;height:160vmax;background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--g) 40%,transparent) 0 8deg,#0000 8deg 24deg);animation:rt 14s linear infinite;mask-image:radial-gradient(circle,#000 0,#0000 50%)}
@keyframes rt{to{transform:rotate(360deg)}}
.rcard{position:relative;width:320px;padding:24px;text-align:center;background:linear-gradient(160deg,#151a2e,#0c0f1c);border:2px solid var(--c);border-radius:18px;box-shadow:0 0 60px var(--c);animation:pop .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{from{transform:scale(.3) rotate(-8deg);opacity:0}}
.rcard small{color:var(--c);letter-spacing:3px}.rcard h2{font-family:Orbitron,sans-serif;margin:10px 0}.rcard p{color:var(--m)}.rcard svg{width:100%;height:90px}.rcard .swc{height:70px;border-radius:12px;margin:12px 0;box-shadow:0 0 30px var(--c)}
#results{background:#000c}.panel{background:var(--p);border:1px solid #ff3b3b66;border-radius:18px;padding:28px 36px;text-align:center;box-shadow:0 0 50px #ff3b3b33}
.panel h2{font-family:Orbitron,sans-serif;font-size:36px;color:#ff4a3a;margin:0 0 16px}.panel .stats{margin:0 0 20px}.panel i{display:block;font-size:11px;color:var(--a);font-style:normal}
#toasts{position:fixed;left:50%;bottom:40px;transform:translateX(-50%);z-index:60}.toast{background:#1a2036;border:1px solid var(--a);border-radius:10px;padding:10px 18px;margin-top:8px;animation:fd 2.6s forwards}

/* crate roll */
.rtitle{position:absolute;top:16%;font-family:Orbitron,sans-serif;letter-spacing:4px;font-size:22px;color:var(--a);text-shadow:0 0 18px #ff8a1f}
.roll{position:relative;width:min(92vw,900px);overflow:hidden;padding:22px 0;border-top:1px solid #ffffff22;border-bottom:1px solid #ffffff22;background:#0008;-webkit-mask-image:linear-gradient(90deg,#0000,#000 10%,#000 90%,#0000);mask-image:linear-gradient(90deg,#0000,#000 10%,#000 90%,#0000)}
.marker{position:absolute;left:50%;top:0;bottom:0;width:3px;margin-left:-1px;background:#ffd23f;box-shadow:0 0 16px #ffd23f,0 0 40px #ffd23f88;z-index:3}
.strip{display:flex;width:max-content;will-change:transform}
.rc{flex:0 0 130px;height:150px;margin-right:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:2px solid var(--c);border-radius:12px;background:linear-gradient(180deg,#121728,color-mix(in srgb,var(--c) 32%,#0c0f1c));box-shadow:inset 0 -20px 30px color-mix(in srgb,var(--c) 25%,transparent)}
.rc b{font-family:Orbitron,sans-serif;font-size:56px;color:var(--c);text-shadow:0 0 22px var(--c)}
.rc small{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--c);text-align:center}
.rc svg{width:112px;height:52px}.rc .swc{width:92px;height:44px;border-radius:8px;box-shadow:0 0 24px var(--c)}
.rc.win{transform:scale(1.14);z-index:2;box-shadow:0 0 50px var(--c),inset 0 0 30px color-mix(in srgb,var(--c) 40%,transparent);transition:transform .35s cubic-bezier(.2,1.6,.4,1)}
.strip.done .rc:not(.win){opacity:.22;filter:grayscale(.6);transition:opacity .5s}
#reveal.hit:after{content:"";position:absolute;inset:0;background:#fff;pointer-events:none;animation:ff .7s forwards}@keyframes ff{from{opacity:.85}to{opacity:0}}
#skip{position:absolute;bottom:14%}

.note{color:var(--m);font-size:14px}

.opt.nick label{display:block}.opt.nick small{display:block;color:var(--m);font-size:12px;font-weight:500;margin-top:2px}.nr{display:flex;gap:8px}.nr input{width:180px;background:#0006;border:1px solid #2f3a62;border-radius:8px;padding:8px 10px;color:inherit;font:inherit}

#hotbar{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:8px}
.hb{position:relative;width:96px;height:62px;background:#0a0e1acc;border:1px solid #ffffff2a;border-bottom:3px solid var(--c);border-radius:10px;padding:4px 6px;text-align:center;opacity:.75}
.hb.on{opacity:1;transform:translateY(-6px);box-shadow:0 0 14px var(--c);border-color:var(--c)}
.hb svg{width:100%;height:30px}.hb b{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hb em{position:absolute;left:5px;top:2px;font-style:normal;font-size:11px;color:var(--m)}.hb.em{opacity:.35}
.hotl{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.hs{position:relative;width:118px;min-height:62px;background:var(--p);border:1px solid var(--c);border-radius:12px;padding:8px;cursor:pointer;text-align:center}
.hs.sel{box-shadow:0 0 0 2px #fff,0 0 16px var(--c)}.hs em{position:absolute;left:7px;top:4px;font-style:normal;color:var(--m);font-size:12px}
.hs b{display:block;font-size:13px;margin-top:10px}.hs small{display:block;color:var(--c);text-transform:uppercase;font-size:10px;letter-spacing:1px;margin-top:6px}.hs b+small{margin-top:0}
.hs .x{position:absolute;right:4px;top:4px;width:20px;height:20px;padding:0;font-size:10px;line-height:1}
.wcard button.ghost{background:transparent;border:1px solid #ffffff2a;font-size:12px}
@media(max-width:700px){.hb{width:60px}.hb b{display:none}}

.crate.ltd{position:relative}.crate .tag{position:absolute;top:10px;right:10px;background:var(--c);color:#150a00;font-weight:800;font-size:11px;letter-spacing:1px;padding:3px 8px;border-radius:20px}

.ltag{display:inline-block;background:#ff6a00;color:#190a00;font-weight:800;font-size:9px;letter-spacing:1px;padding:2px 6px;border-radius:10px;margin:3px 0;line-height:1.2;font-style:normal}
.wcard,.hs,.hb{position:relative}.rcard .ltag{font-size:11px;padding:3px 10px;margin:0 0 6px}.rc .ltag{font-size:9px}
.hb .ltag{position:absolute;right:3px;top:3px;font-size:7px;padding:1px 4px;margin:0}

#tinv{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:60;background:#12182c;border:1px solid var(--a,#38e1ff);border-radius:12px;padding:10px 16px;display:flex;gap:10px;align-items:center;box-shadow:0 0 30px #000a}
.tw{display:flex;gap:16px;flex-wrap:wrap}.tcol{flex:1;min-width:280px}.tcol h4{margin:10px 0 6px}
.tl{display:flex;flex-wrap:wrap;gap:6px;min-height:38px}.tl em{color:var(--m);font-size:13px}
.tg{background:var(--p);border:1px solid var(--c);border-radius:10px;padding:6px 10px;font-size:13px}.tg[onclick]{cursor:pointer}.tg b{display:block}.tg small{display:block;color:var(--c);text-transform:uppercase;font-size:10px;letter-spacing:1px}
.tg.sel{background:color-mix(in srgb,var(--c) 28%,var(--p));box-shadow:0 0 0 2px var(--c)}

/* locker: resizable cards, duplicate count */
#inv{--cw:150px}
.wcard{padding:10px;font-size:calc(var(--cw,150px) / 11.5)}
.wcard b{font-size:1.1em}.wcard small{font-size:.8em}
.wcard button{font-size:max(11px,.85em);padding:5px 6px}
.wcard .cnt{position:absolute;right:8px;top:6px;font-style:normal;font-family:Orbitron,sans-serif;font-weight:800;font-size:12px;color:#150a00;background:var(--c);padding:1px 7px;border-radius:10px}
#inv.tiny .bars{display:none}#inv.tiny .wcard svg{height:44px}

/* coin icon: drawn with CSS, so it never depends on an emoji font */
.coin{display:inline-block;width:.85em;height:.85em;margin:0 .3em 0 0;vertical-align:-.1em;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3b0,#ffd23f 45%,#d99a00);border:2px solid #b87a00;box-shadow:inset 0 0 0 2px #ffe680aa;font-style:normal}

/* crates: equal-height cards, buttons pinned to the bottom */
.crate{display:flex;flex-direction:column}
.crate .odds{flex:1;width:100%}.odds span{white-space:nowrap}.odds em{white-space:nowrap}
.cbtns{display:flex;flex-direction:column;gap:8px;margin-top:auto}
.cbtns .big{width:100%;padding:12px 16px;font-size:16px}.cbtns .ten{background:linear-gradient(135deg,#38e1ff,#3b7cff);box-shadow:0 0 24px #38e1ff55;color:#021018}
/* open x10 */
.tenp{position:relative;max-height:92vh;overflow:auto;width:min(94vw,900px);padding:18px;text-align:center;background:#0c0f1cee;border:1px solid #ffffff22;border-radius:18px}
.tenp h2{font-family:Orbitron,sans-serif;margin:0 0 12px}
.teng{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin-bottom:14px}
.tc{position:relative;background:linear-gradient(180deg,#121728,color-mix(in srgb,var(--c) 28%,#0c0f1c));border:2px solid var(--c);border-radius:12px;padding:8px;box-shadow:0 0 16px color-mix(in srgb,var(--c) 35%,transparent)}
.tc svg{width:100%;height:44px}.tc .swc{height:36px;border-radius:8px;margin:4px 0}.tc b{display:block;font-size:13px}.tc small{display:block;color:var(--c);text-transform:uppercase;font-size:10px;letter-spacing:1px}.tc em{display:block;font-style:normal;font-size:11px;color:var(--m)}
/* leaderboard */
.lbh,.lbr{display:grid;grid-template-columns:44px 1fr 90px 90px;gap:8px;padding:10px 14px;align-items:center}
.lbh{color:var(--m);font-size:12px;text-transform:uppercase;letter-spacing:2px}
.lbr{background:var(--p);border:1px solid #2f3a62;border-radius:10px;margin-bottom:6px}.lbr.me{border-color:var(--a);background:color-mix(in srgb,var(--a) 14%,var(--p))}
.lbr span:first-child{font-family:Orbitron,sans-serif;color:var(--a)}.lbr:nth-child(2) span:first-child{color:#ffd23f}

/* open x10: ten rolls at once */
.r10wrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;width:min(96vw,1100px);max-height:96vh}
.r10wrap .rtitle{position:static;font-size:18px}.r10wrap #skip{position:static}
.rolls10{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;width:100%;max-height:78vh;overflow:hidden}
.roll.mini{width:100%;padding:8px 0}
.mini .rc{flex:0 0 78px;height:84px;margin-right:6px;gap:2px;border-radius:9px}
.mini .rc b{font-size:30px}.mini .rc small{font-size:8px;letter-spacing:1px}.mini .rc svg{width:66px;height:30px}.mini .rc .swc{width:56px;height:26px}
.mini .rc.win{transform:scale(1.08)}
@media(max-width:700px){.rolls10{gap:5px 6px}}

.cbtns .hund{background:linear-gradient(135deg,#b45cff,#ff3b8a);box-shadow:0 0 24px #b45cff55;color:#fff}
.tc .cnt2{position:absolute;right:6px;top:4px;font-family:Orbitron,sans-serif;font-weight:800;font-size:12px;color:#150a00;background:var(--c);padding:1px 7px;border-radius:10px}