:root{--bg:#000;--panel:#101010;--panel2:#1a1a1a;--line:#2b2b2b;--text:#f2f2f2;--mut:#8c8c8c;--acc:#ffb020;--acc2:#ff6a00;--green:#2fd67b;--red:#ff4d5e;
--common:#b0c3d9;--uncommon:#5e98d9;--rare:#4b69ff;--epic:#8847ff;--legendary:#d32ce6;--mythic:#eb4b4b;--gold:#e4ae39;
--grad:linear-gradient(135deg,var(--acc),var(--acc2));--r:14px}
*{box-sizing:border-box}
html{scrollbar-color:var(--line) transparent}
body{margin:0;min-height:100vh;color:var(--text);font:15px/1.45 Manrope,system-ui,Segoe UI,Roboto,sans-serif;
  background:radial-gradient(1100px 520px at 12% -10%,#ffffff1c,transparent 62%),radial-gradient(900px 520px at 100% 0,#ffffff10,transparent 60%),linear-gradient(#ffffff08 1px,transparent 1px) 0 0/100% 56px,linear-gradient(90deg,#ffffff08 1px,transparent 1px) 0 0/56px 100%,var(--bg);background-attachment:fixed}
a{color:inherit;text-decoration:none}
::selection{background:var(--acc);color:#000}

/* ---- header */
header{display:flex;align-items:center;gap:20px;padding:10px 24px;background:#000000d9;backdrop-filter:blur(14px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;flex-wrap:wrap}
.logo{font-weight:800;font-size:21px;letter-spacing:.5px;display:flex;align-items:center}
.logo span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
nav{display:flex;gap:2px;flex:1;flex-wrap:wrap}
nav a{position:relative;padding:9px 14px;border-radius:10px;color:var(--mut);font-weight:700;font-size:14px;transition:color .15s,background .15s}
nav a:hover{color:var(--text);background:var(--panel2)}
nav a.on{color:var(--text)}
nav a.on::after{content:"";position:absolute;left:14px;right:14px;bottom:2px;height:2px;border-radius:2px;background:var(--grad)}
#userbox{display:flex;align-items:center;gap:10px}
.online-presence{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid var(--line);border-radius:999px;color:var(--mut);font-size:12px;white-space:nowrap}
.online-presence i{width:7px;height:7px;border-radius:50%;background:#69d391;box-shadow:0 0 9px #69d391aa;animation:onlinePulse 1.8s ease-in-out infinite}
.online-presence b{color:var(--text);font-variant-numeric:tabular-nums}
@keyframes onlinePulse{50%{opacity:.45;box-shadow:0 0 2px #69d39155}}
@media(max-width:640px){.online-presence{margin-left:auto;padding:6px 8px;font-size:11px}}
.language-select{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:9px;padding:8px 9px;font:inherit;font-size:12px;font-weight:800;cursor:pointer}
.bal{background:var(--panel2);border:1px solid var(--line);padding:7px 14px;border-radius:10px;font-weight:800;color:var(--acc);white-space:nowrap;font-variant-numeric:tabular-nums}

.me{display:flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;border-radius:10px;transition:background .15s;max-width:190px}
.me:hover{background:var(--panel2)}.me b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ava{width:32px;height:32px;border-radius:9px;object-fit:cover;flex:none;display:inline-grid;place-items:center;background:var(--grad);color:#1a0d00;font-weight:800}
.prof .ava{width:72px;height:72px;border-radius:16px;font-size:30px}
.btn.steam{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:linear-gradient(135deg,#1b2838,#2a475e);color:#fff;border:1px solid #66c0f455;box-shadow:0 4px 18px #66c0f422}
.btn.steam:hover{box-shadow:0 6px 26px #66c0f455}
.btn.big{padding:13px 22px;font-size:16px;border-radius:12px}
.or{display:flex;align-items:center;gap:10px;color:var(--mut);font-size:12px}.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---- controls */
button,.btn{display:inline-block;font:inherit;font-weight:800;border:0;border-radius:10px;padding:9px 18px;cursor:pointer;background:var(--grad);color:#1a0d00;transition:filter .15s,transform .1s,box-shadow .15s;box-shadow:0 4px 18px #ff8a0030}
button:hover,.btn:hover{filter:brightness(1.1);box-shadow:0 6px 24px #ff8a0055}
button:active{transform:translateY(1px)}
button:disabled{opacity:.4;cursor:not-allowed;filter:none;box-shadow:none}
.ghost{background:var(--panel2);color:var(--text);border:1px solid var(--line);box-shadow:none}
.ghost:hover{border-color:#3a4158;box-shadow:none}
button.sm{padding:5px 11px;font-size:13px;border-radius:8px}
button.big{padding:14px 34px;font-size:17px;border-radius:12px}
button.red{background:var(--red);color:#fff;box-shadow:none}
input,select{font:inherit;background:#080808;color:var(--text);border:1px solid var(--line);border-radius:10px;padding:9px 12px;min-width:0;outline:0;transition:border-color .15s}
input:focus,select:focus{border-color:var(--acc)}
label{color:var(--mut);font-size:13px;display:flex;flex-direction:column;gap:4px}

/* ---- layout */
main{max-width:1240px;margin:0 auto;padding:24px 20px 80px}
h1{font-size:26px;font-weight:800;margin:6px 0 18px;letter-spacing:-.3px}
h2{font-size:18px;font-weight:800;margin:28px 0 12px}
.mut{color:var(--mut)}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.panel{background:linear-gradient(180deg,var(--panel),#0b0b0b);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
.grid.big{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.scroll{max-height:540px;overflow:auto;padding-right:4px}
.case-group-title{margin-top:34px}
.banana-case .item .ico img{filter:sepia(1) saturate(2.3) hue-rotate(-12deg)}

/* ---- live drops */
#drops{display:flex;gap:6px;overflow:hidden;padding:7px 24px;background:#050505;border-bottom:1px solid var(--line);min-height:50px;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
#drops:empty{display:none}
.drop{--c:var(--common);display:flex;gap:8px;align-items:center;white-space:nowrap;font-size:12px;line-height:1.25;padding:3px 12px 3px 6px;border-radius:8px;background:linear-gradient(90deg,color-mix(in srgb,var(--c) 22%,var(--panel)),var(--panel) 70%);border-left:3px solid var(--c)}
.drop.new{animation:dropin .5s cubic-bezier(.2,.8,.2,1)}
@keyframes dropin{from{opacity:0;transform:translateX(-36px) scale(.9)}}
.drop img{height:28px}.drop b{display:block}.drop .mut{font-size:11px}

/* ---- hero */
.hero{position:relative;overflow:hidden;border-radius:20px;padding:38px 36px;margin-bottom:26px;border:1px solid var(--line);
  background:radial-gradient(600px 300px at 85% 50%,#ffffff24,transparent 70%),linear-gradient(120deg,#1c1c1c,#0a0a0a)}
.hero h1{font-size:38px;line-height:1.1;margin:0 0 10px;max-width:560px}
.hero h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--mut);max-width:480px;margin:0 0 20px}
.hero .art{position:absolute;right:10px;top:50%;height:150%;transform:translateY(-50%) rotate(-14deg);opacity:.9;filter:drop-shadow(0 20px 40px #000);pointer-events:none}
@media(max-width:860px){.hero .art{opacity:.18;right:-60px}.hero h1{font-size:28px}.hero{padding:26px 22px}}

/* ---- case cards */
.case{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:18px;padding:18px 14px 16px;text-align:center;transition:transform .2s,border-color .2s,box-shadow .2s;display:block}
.case::before{content:"";position:absolute;left:50%;top:22px;width:190px;height:150px;transform:translateX(-50%);background:radial-gradient(closest-side,#ff8a0038,transparent);transition:opacity .2s;opacity:.55}
.case:hover{transform:translateY(-6px);border-color:var(--acc);box-shadow:0 14px 40px #000a,0 0 0 1px #ffb02040}
.case:hover::before{opacity:1}
.case .ico{position:relative;height:140px;display:grid;place-items:center;font-size:64px}
.case .ico img{max-height:130px;max-width:100%;object-fit:contain;filter:drop-shadow(0 10px 14px #000a);transition:transform .25s}
.case:hover .ico img{transform:scale(1.08) rotate(-4deg)}
.case .nm{font-weight:800;font-size:16px;margin:10px 0 8px}
.case .pr{display:inline-block;padding:5px 14px;border-radius:99px;background:#ffb0201c;border:1px solid #ffb02045;color:var(--acc);font-weight:800;font-size:14px}

/* ---- item cards */
.item{--c:var(--common);position:relative;overflow:hidden;border:1px solid var(--line);border-radius:12px;padding:10px 8px 9px;text-align:center;min-width:0;
  background:radial-gradient(120% 70% at 50% 100%,color-mix(in srgb,var(--c) 30%,transparent),transparent 70%),linear-gradient(180deg,var(--panel2),var(--panel));transition:border-color .15s,transform .15s}
.item::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--c);box-shadow:0 0 14px var(--c)}
.item .wear{position:absolute;left:7px;top:6px;font-size:10px;font-weight:800;color:var(--mut);letter-spacing:.5px}
.item .ico{font-size:34px;line-height:1.2;height:68px;display:grid;place-items:center}
.item .ico img{max-height:68px;max-width:100%;object-fit:contain;filter:drop-shadow(0 6px 8px #0009)}
.item .nm{margin-top:4px;line-height:1.25;white-space:nowrap}
.item .nm span{display:block;font-size:10.5px;color:var(--mut);overflow:hidden;text-overflow:ellipsis}
.item .nm b{display:block;font-size:12px;font-weight:700;overflow:hidden;text-overflow:ellipsis}
.item .pr{font-size:13px;font-weight:800;color:var(--acc);margin-top:3px;font-variant-numeric:tabular-nums}
.item .ch{font-size:11px;color:var(--mut)}
.item.click{cursor:pointer}.item.click:hover{border-color:var(--c);transform:translateY(-2px)}
.item.sel{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc) inset,0 0 18px #ffb02040}
.item.dim{opacity:.35}
.r-uncommon{--c:var(--uncommon)}.r-rare{--c:var(--rare)}.r-epic{--c:var(--epic)}.r-legendary{--c:var(--legendary)}.r-mythic{--c:var(--mythic)}.r-gold{--c:var(--gold)}

/* ---- case page */
.casehead{display:flex;gap:26px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.casehead .cover{height:150px;filter:drop-shadow(0 0 40px #ff8a0050) drop-shadow(0 12px 16px #000a)}
.reel{position:relative;overflow:hidden;height:164px;margin:12px 0;border-radius:var(--r);background:#050505;border:1px solid var(--line)}
.reel::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,#050505,transparent 18%,transparent 82%,#050505)}
.reel::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--acc);box-shadow:0 0 14px 2px var(--acc);z-index:3}
.strip{display:flex;gap:8px;padding:10px 0;will-change:transform}
.strip.go{transition:transform 5s cubic-bezier(.12,.6,.08,1)}
.strip .item{flex:0 0 120px;width:120px;height:142px}
#won .panel{border-color:#ffb02055;box-shadow:0 0 40px #ffb02018;animation:pop .3s}

/* ---- upgrader */
.up{display:grid;grid-template-columns:1fr 300px 1fr;gap:16px;align-items:start}
@media(max-width:900px){.up{grid-template-columns:1fr}}
.gauge{width:230px;height:230px;border-radius:50%;margin:8px auto 14px;position:relative;display:grid;place-items:center;box-shadow:0 0 50px #2fd67b18}
.gauge::before{content:"";position:absolute;inset:16px;border-radius:50%;background:radial-gradient(circle,#191919,#0b0b0b);box-shadow:inset 0 0 30px #000}
.gauge .pct{position:relative;font-size:38px;font-weight:800;font-variant-numeric:tabular-nums}
.gauge .ptr{position:absolute;inset:0}
.gauge .ptr::after{content:"";position:absolute;left:50%;top:-6px;margin-left:-8px;border:8px solid transparent;border-top:26px solid #fff;filter:drop-shadow(0 0 6px #fff8)}
.gauge .ptr.go{transition:transform 4s cubic-bezier(.15,.6,.1,1)}

/* ---- battles */
.battle-row{display:flex;gap:14px;align-items:center;padding:12px 16px;margin-bottom:8px;flex-wrap:wrap;transition:border-color .15s,transform .15s}
.battle-row:hover{border-color:#3a4158;transform:translateX(3px)}
.battle-row .cs{flex:1;min-width:120px}
.mini{display:inline-flex;gap:4px;align-items:center;flex-wrap:wrap}
.mini img{height:34px;vertical-align:middle;filter:drop-shadow(0 3px 4px #000a)}
button .mini img{height:22px}
.tag{font-size:11px;font-weight:800;letter-spacing:.6px;padding:4px 9px;border-radius:7px;background:var(--panel2);color:var(--mut)}
.tag.open{color:var(--green);background:#2fd67b1a}
.tag.open::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:6px;animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.25}}
.bcols{display:grid;gap:12px;grid-template-columns:repeat(var(--n),1fr);margin-top:16px}
@media(max-width:700px){.bcols{grid-template-columns:1fr 1fr}}
.bcol{text-align:center;padding:14px 10px}
.bcol.win{border-color:var(--green);box-shadow:0 0 0 1px var(--green) inset,0 0 40px #2fd67b22}
.bcol .who{font-weight:800;margin-bottom:4px}.bcol .tot{color:var(--acc);font-weight:800;margin-bottom:10px;font-variant-numeric:tabular-nums}
.bcol .item{margin-bottom:6px;animation:pop .35s}
@keyframes pop{from{transform:scale(.6);opacity:0}}

/* ---- weighted avatar roulette for skin battles */
.battle-wheel-wrap{width:244px;height:244px;position:relative;margin:28px auto 12px;display:grid;place-items:center}
.battle-wheel{position:relative;width:220px;height:220px;border-radius:50%;filter:drop-shadow(0 8px 20px #000b)}
.battle-wheel-wrap.is-spinning .battle-wheel{transition:transform 4.3s cubic-bezier(.12,.7,.08,1)}
.wheel-track{position:absolute;inset:0;border-radius:50%;border:8px solid #171717;box-shadow:0 0 0 1px #555, inset 0 0 0 1px #ffffff55}
.wheel-track::after{content:"";position:absolute;inset:32px;border:1px solid #ffffff55;border-radius:50%;box-shadow:0 0 16px #0008 inset}
.wheel-player{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px;display:grid;place-items:center;transform:rotate(var(--wa)) translateY(-87px) rotate(calc(-1 * var(--wa)));z-index:1}
.wheel-player .ava{width:43px;height:43px;border:3px solid var(--pc);border-radius:50%;box-shadow:0 2px 12px #000c;transition:box-shadow .25s,scale .25s}
.wheel-player.winner .ava{box-shadow:0 0 0 4px #fff,0 0 28px var(--green);scale:1.13}
.wheel-pointer{position:absolute;top:-4px;left:50%;width:0;height:0;z-index:3;transform:translateX(-50%);border-left:11px solid transparent;border-right:11px solid transparent;border-top:23px solid #fff;filter:drop-shadow(0 2px 6px #000)}
.wheel-odds{display:flex;justify-content:center;gap:9px 18px;flex-wrap:wrap;margin:0 auto 18px}
.wheel-odds>span{display:flex;align-items:center;gap:6px;border-left:2px solid var(--pc);padding:4px 8px;background:var(--panel);border-radius:6px;font-size:12px;color:var(--mut)}
.wheel-odds .ava{width:23px;height:23px;border-radius:50%}
.bcol{border-top:3px solid var(--pc,var(--line))}
.bcol .who{display:flex;align-items:center;justify-content:center;gap:8px}
.bcol .grid{grid-template-columns:repeat(auto-fill,minmax(98px,1fr));text-align:center}
.bcol .grid .item{margin:0}
.avas{display:flex}.avas .ava{margin-left:-8px;border:2px solid var(--panel)}.avas .ava:first-child{margin-left:0}

/* ---- modal, toasts, tables */
#modal{position:fixed;inset:0;background:#000b;backdrop-filter:blur(6px);display:grid;place-items:center;z-index:50;padding:16px}
#modal[hidden]{display:none}
#modal .panel{width:360px;max-width:100%;display:flex;flex-direction:column;gap:12px;padding:26px;animation:pop .2s;box-shadow:0 30px 80px #000}
#toasts{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:60}
.toast{background:var(--panel2);border:1px solid var(--line);border-left:4px solid var(--acc);padding:11px 16px;border-radius:10px;max-width:340px;animation:pop .2s;box-shadow:0 10px 30px #000a;font-weight:600}
.toast.err{border-left-color:var(--red)}.toast.ok{border-left-color:var(--green)}
table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line)}
th{color:var(--mut);font-size:12px;text-transform:uppercase;letter-spacing:.5px}tr:last-child td{border-bottom:0}
.panel:has(table){overflow-x:auto}
code{background:#07080c;padding:2px 6px;border-radius:5px;font-size:12px;word-break:break-all}
.pos{color:var(--green)}.neg{color:var(--red)}
footer{border-top:1px solid var(--line);padding:22px 24px;color:var(--mut);font-size:12px;text-align:center}
@media(max-width:640px){header{padding:10px 14px;gap:10px}nav{order:3;flex-basis:100%;flex-wrap:nowrap;overflow-x:auto}main{padding:16px 12px 60px}#drops{padding:7px 12px}
  .grid.big{grid-template-columns:1fr 1fr;gap:10px}.case .ico{height:100px}.case .ico img{max-height:92px}.case .nm{font-size:14px}.grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}}

/* ---- monochrome DROPZONE redesign */
:root{color-scheme:dark;--bg:#080808;--panel:#111;--panel2:#191919;--line:#303030;--text:#f7f7f7;--mut:#a0a0a0;
  --acc:#f5f5f5;--acc2:#bdbdbd;--green:#ededed;--red:#bdbdbd;--common:#bdbdbd;--uncommon:#d2d2d2;--rare:#e3e3e3;
  --epic:#f1f1f1;--legendary:#fff;--mythic:#d8d8d8;--gold:#fff;--grad:linear-gradient(135deg,#f4f4f4,#bcbcbc);--r:16px}
html{scrollbar-color:#555 #111;scroll-behavior:smooth}
body{background:radial-gradient(ellipse at 50% -28%,#ffffff13,transparent 54%),linear-gradient(180deg,#0b0b0b,#070707 65%);background-attachment:fixed}
::selection{background:#eee;color:#080808}
header{min-height:62px;padding:9px max(22px,calc((100vw - 1420px)/2));gap:18px;background:#080808ed;border-color:#292929;box-shadow:0 10px 30px #0007}
.logo{font-size:20px;letter-spacing:.8px}
.logo span,.hero h1 em{background:none;color:#aaa}
nav{gap:5px}nav a{border-radius:8px;padding:10px 13px;color:#888}nav a:hover{background:#1b1b1b;color:#fff}
nav a.on{color:#fff}nav a.on::after{left:13px;right:13px;height:2px;background:#fff}
.bal{background:#151515;border-color:#343434;color:#fff}
.ava{background:linear-gradient(145deg,#e5e5e5,#555);color:#111}
.btn.steam{background:#202020;border-color:#4a4a4a;color:#fff;box-shadow:none}.btn.steam:hover{background:#303030;box-shadow:0 0 0 1px #777}
button,.btn{background:linear-gradient(135deg,#f1f1f1,#c5c5c5);color:#111;box-shadow:none;border:1px solid #eee}
button:hover,.btn:hover{filter:brightness(1.08);box-shadow:0 8px 22px #fff1}
.ghost,button.red{background:#191919;color:#eee;border:1px solid #3a3a3a;box-shadow:none}
.ghost:hover{border-color:#888;background:#222}.red:hover{border-color:#aaa}
input,select{background:#090909;border-color:#383838}input:focus,select:focus{border-color:#ddd;box-shadow:0 0 0 3px #fff1}
main{max-width:1420px;padding:26px 26px 90px}
h1{font-size:30px;letter-spacing:-.7px}h2{font-size:20px;letter-spacing:-.3px}
.panel{background:linear-gradient(155deg,#151515,#0d0d0d 75%);border-color:#2e2e2e;box-shadow:0 12px 36px #0005}
.grid.big{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.case-group-title{position:relative;margin:44px 0 18px;padding:0 0 12px;border-bottom:1px solid #303030;font-size:24px;letter-spacing:-.5px}
.case-group-title::after{content:"";position:absolute;bottom:-1px;left:0;width:76px;height:2px;background:#eee}
#drops{padding:8px max(20px,calc((100vw - 1420px)/2));background:#0c0c0c;border-color:#262626;mask-image:linear-gradient(90deg,#000 0%,#000 94%,transparent)}
.drop{--c:#aaa;background:linear-gradient(90deg,#252525,#141414 78%);border-left-color:#ddd;border-radius:7px;color:#eee}
.hero{min-height:280px;display:flex;flex-direction:column;justify-content:center;padding:46px 50px;margin:8px 0 34px;border-radius:18px;border-color:#383838;
  background:radial-gradient(ellipse at 78% 48%,#ffffff14,transparent 34%),linear-gradient(112deg,#1b1b1b,#0b0b0b 72%);box-shadow:inset 0 1px #ffffff0b,0 18px 50px #0008}
.hero h1{font-size:clamp(34px,4vw,54px);line-height:1.06;max-width:660px;text-transform:uppercase;letter-spacing:-1.5px}
.hero h1 em{color:#aaa}.hero p{max-width:520px;color:#aaa;font-size:15px}.hero .art{right:5%;height:125%;max-width:46%;object-fit:contain;filter:grayscale(1) drop-shadow(0 22px 36px #000);opacity:.78}
.hero .row{gap:10px}.hero .btn{min-width:150px;text-align:center}
.case{border-radius:14px;padding:17px 14px 16px;background:linear-gradient(155deg,#191919,#101010 72%);border-color:#303030;box-shadow:inset 0 1px #ffffff08;}
.case::before{background:radial-gradient(closest-side,#fff2,transparent);opacity:.36}.case:hover{transform:translateY(-4px);border-color:#aaa;box-shadow:0 18px 38px #000a,0 0 0 1px #fff2}
.case .ico{height:156px}.case .ico img{filter:grayscale(.72) drop-shadow(0 12px 16px #000c)}.case:hover .ico img{filter:grayscale(.35) drop-shadow(0 14px 18px #000d)}
.case .nm{font-size:16px}.case .pr{background:#222;border:1px solid #414141;color:#fff;border-radius:7px;font-variant-numeric:tabular-nums}
.item{--c:#aaa;border-color:#353535;border-radius:10px;background:radial-gradient(120% 70% at 50% 100%,#ffffff20,transparent 72%),linear-gradient(180deg,#1a1a1a,#101010)}
.item::after{background:#bdbdbd;box-shadow:0 0 10px #fff5;height:2px}.item .pr{color:#eee}.item .ico img{filter:grayscale(.22) drop-shadow(0 6px 8px #0009)}
.item.click:hover,.item.sel{border-color:#eee}.item.sel{box-shadow:0 0 0 1px #eee inset,0 0 18px #fff2}
.r-uncommon,.r-rare,.r-epic,.r-legendary,.r-mythic,.r-gold{--c:#ddd}
.casehead .cover{filter:grayscale(.45) drop-shadow(0 16px 24px #000b)}
.reel{background:#080808;border-color:#353535}.reel::before{background:linear-gradient(90deg,#080808,transparent 18%,transparent 82%,#080808)}
.reel::after{background:#fff;box-shadow:0 0 16px 2px #fff8}#won .panel{border-color:#aaa;box-shadow:0 0 40px #fff1}
.gauge{box-shadow:0 0 50px #fff1}.gauge::before{background:radial-gradient(circle,#191919,#0b0b0b)}
.battle-row:hover{border-color:#777}.tag{background:#202020;color:#bbb}.tag.open{background:#222;color:#eee}
.tag.open::before{background:#eee}.bcol.win{border-color:#eee;box-shadow:0 0 0 1px #eee inset,0 0 32px #fff1}
.bcol .tot{color:#eee}.battle-wheel{filter:grayscale(1) drop-shadow(0 8px 20px #000b)}
.wheel-track{border-color:#292929;box-shadow:0 0 0 1px #777,inset 0 0 0 1px #ffffff66}.wheel-player .ava{border-color:#bbb}.wheel-player.winner .ava{box-shadow:0 0 0 4px #fff,0 0 24px #fff8}
.wheel-odds>span{border-left-color:#aaa;background:#171717}.bcol{border-top-color:#777}
#modal{background:#000d}#modal .panel{border-color:#444}.toast{border-left-color:#ddd}.toast.err,.toast.ok{border-left-color:#aaa}
th{color:#aaa}td{color:#eee}code{background:#202020}.pos,.neg{color:#ddd}
footer{background:#080808;border-color:#292929;color:#888}
@media(max-width:860px){.hero{min-height:250px;padding:32px 28px}.hero .art{opacity:.24;right:-4%;max-width:58%}}
@media(max-width:640px){header{padding:9px 12px}main{padding:16px 12px 60px}.hero{min-height:230px;padding:26px 20px;margin-top:0}.hero h1{font-size:30px;max-width:90%}.hero p{max-width:80%;font-size:13px}.hero .art{max-width:66%;right:-20%;opacity:.2}.grid.big{grid-template-columns:1fr 1fr;gap:10px}.case{padding:12px 9px}.case .ico{height:108px}.case .ico img{max-height:100px}.case-group-title{font-size:21px;margin-top:34px}.case .nm{font-size:13px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ---- smoother motion and page transitions */
:root{--ease-out:cubic-bezier(.2,.75,.25,1);--ease-spring:cubic-bezier(.2,1.25,.35,1)}
body{background-size:auto,auto;background-position:center,center;animation:ambient-in 1s var(--ease-out) both}
header{transition:background .3s,border-color .3s,box-shadow .3s}
nav a{transition:color .25s,background .25s,transform .25s var(--ease-out)}
nav a:hover{transform:translateY(-1px)}nav a.on::after{transform-origin:left;animation:underline-in .35s var(--ease-out) both}
button,.btn,.ghost{transition:color .25s,background .25s,border-color .25s,filter .25s,transform .25s var(--ease-out),box-shadow .3s}
button:not(:disabled):hover,.btn:hover{transform:translateY(-2px)}button:not(:disabled):active,.btn:active{transform:translateY(0) scale(.98)}
.panel{transition:border-color .3s,background .3s,box-shadow .35s,transform .35s var(--ease-out)}
main>#app>*{animation:page-enter .55s var(--ease-out) both}
main>#app>.hero{animation:hero-enter .75s var(--ease-out) both}
.hero{isolation:isolate}
.hero::after{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(105deg,transparent 28%,#ffffff0a 48%,transparent 67%);background-size:220% 100%;animation:hero-sheen 10s ease-in-out 1.2s infinite}
.hero .art{animation:art-float 7s ease-in-out infinite;transform-origin:center}
.hero .art:hover{filter:grayscale(.65) drop-shadow(0 24px 40px #fff2);transition:filter .5s}
.case-group-title{animation:page-enter .6s var(--ease-out) both}
.grid.big>.case{animation:card-enter .55s var(--ease-out) both;animation-delay:calc(min(var(--i, 0), 9) * 35ms)}
.grid.big>.case:nth-child(10n+1){--i:0}.grid.big>.case:nth-child(10n+2){--i:1}.grid.big>.case:nth-child(10n+3){--i:2}.grid.big>.case:nth-child(10n+4){--i:3}.grid.big>.case:nth-child(10n+5){--i:4}.grid.big>.case:nth-child(10n+6){--i:5}.grid.big>.case:nth-child(10n+7){--i:6}.grid.big>.case:nth-child(10n+8){--i:7}.grid.big>.case:nth-child(10n+9){--i:8}.grid.big>.case:nth-child(10n){--i:9}
.case{transition:transform .38s var(--ease-out),border-color .35s,box-shadow .4s,background .35s}
.case::before{transition:opacity .45s,transform .6s var(--ease-out)}
.case:hover::before{transform:translateX(-50%) scale(1.25)}
.case .ico img{transition:transform .5s var(--ease-spring),filter .4s}
.item{transition:transform .32s var(--ease-out),border-color .3s,box-shadow .35s,filter .3s}
.item.click:hover{transform:translateY(-3px) scale(1.015);box-shadow:0 12px 24px #0008}
.drop{animation:drop-glide 5s ease-in-out infinite alternate}
.drop:nth-child(2n){animation-delay:-2s}.drop:nth-child(3n){animation-delay:-3.5s}
.bal{transition:background .25s,border-color .25s,transform .25s var(--ease-out)}.bal:hover{transform:translateY(-1px);border-color:#888}
.ava{transition:filter .3s,transform .3s var(--ease-out)}.me:hover .ava{transform:scale(1.04);filter:contrast(1.08)}
.reel{box-shadow:inset 0 0 28px #fff06;transition:border-color .3s,box-shadow .4s}
.reel::after{animation:pointer-pulse 1.8s ease-in-out infinite}
.strip.go{transition-timing-function:cubic-bezier(.1,.72,.08,1)}
.battle-row{transition:background .3s,border-color .3s,transform .3s var(--ease-out),box-shadow .3s}
.battle-row:hover{transform:translateX(4px);box-shadow:0 12px 28px #0008}
.wheel-player .ava{transition:box-shadow .35s,transform .35s var(--ease-spring),filter .35s}
.wheel-player.winner .ava{transform:scale(1.12)}
.toast{animation:toast-enter .4s var(--ease-spring) both}
#modal:not([hidden]){animation:veil-in .25s ease-out both}
#modal:not([hidden]) .panel{animation:modal-enter .45s var(--ease-spring) both}
tr{transition:background .2s}tbody tr:hover{background:#ffffff08}
@keyframes ambient-in{from{opacity:.75}to{opacity:1}}
@keyframes underline-in{from{transform:scaleX(.2);opacity:0}to{transform:scaleX(1);opacity:1}}
@keyframes page-enter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes hero-enter{from{opacity:0;transform:translateY(20px) scale(.99);filter:blur(4px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
@keyframes card-enter{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes art-float{0%,100%{transform:translateY(-50%) rotate(-14deg)}50%{transform:translateY(calc(-50% - 7px)) rotate(-12deg)}}
@keyframes hero-sheen{0%,65%,100%{background-position:130% 0}82%{background-position:-20% 0}}
@keyframes drop-glide{from{transform:translateY(0)}to{transform:translateY(-2px)}}
@keyframes pointer-pulse{0%,100%{filter:brightness(1);box-shadow:0 0 12px 1px #fff7}50%{filter:brightness(1.3);box-shadow:0 0 19px 3px #fffa}}
@keyframes toast-enter{from{opacity:0;transform:translate(14px,10px) scale(.97)}to{opacity:1;transform:translate(0) scale(1)}}
@keyframes veil-in{from{opacity:0}to{opacity:1}}
@keyframes modal-enter{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:640px){.grid.big>.case{animation-duration:.4s}.hero .art{animation-duration:9s}.battle-row:hover{transform:none}}
@media(prefers-reduced-motion:reduce){body{animation:none}.drop,.hero .art,.hero::after,.reel::after{animation:none}.grid.big>.case,main>#app>*{animation:none}}

/* ---- profile and account activity */
.profile-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 30px;margin:4px 0 18px;border:1px solid #343434;border-radius:18px;background:radial-gradient(ellipse at 10% 0,#ffffff10,transparent 55%),linear-gradient(135deg,#191919,#0c0c0c);box-shadow:0 18px 48px #0008;animation:hero-enter .55s var(--ease-out) both}
.profile-identity{display:flex;align-items:center;gap:16px;min-width:0}.profile-identity>.ava{width:68px;height:68px;border-radius:50%;font-size:25px;border:2px solid #686868;box-shadow:0 0 0 5px #ffffff09}
.profile-identity h1{margin:3px 0 2px;font-size:27px}.profile-identity p{margin:0;color:#999}.profile-kicker{font-size:10px;letter-spacing:1.6px;color:#aaa;font-weight:800}
.profile-wallet{min-width:190px;padding:12px 16px;border:1px solid #3b3b3b;border-radius:12px;background:#111;display:flex;flex-direction:column;gap:3px;text-align:right}
.profile-wallet small,.profile-stats small{font-size:11px;color:#999;text-transform:uppercase;letter-spacing:.7px}.profile-wallet b{font-size:23px;font-variant-numeric:tabular-nums}.profile-wallet a{font-size:12px;color:#aaa;margin-top:2px}.profile-wallet a:hover{color:#fff}
.profile-tabs{display:flex;gap:5px;padding:5px;margin:0 0 18px;border:1px solid #2d2d2d;border-radius:12px;background:#0e0e0e;overflow:auto}
.profile-tabs .profile-tab{position:relative;flex:none;background:transparent;color:#999;border:0;box-shadow:none;padding:10px 15px;border-radius:8px;font-size:13px;transition:background .25s,color .25s,transform .25s var(--ease-out)}
.profile-tabs .profile-tab:hover{background:#1c1c1c;color:#fff;transform:none}.profile-tabs .profile-tab.active{background:#e6e6e6;color:#111}.profile-tabs .profile-tab.active:hover{background:#fff;color:#000}
.profile-content{animation:page-enter .4s var(--ease-out) both}.profile-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}.profile-stats.compact{grid-template-columns:repeat(3,minmax(0,1fr))}
.profile-stats>.panel{display:flex;flex-direction:column;gap:8px;padding:17px 18px;min-width:0}.profile-stats b{font-size:21px;line-height:1.15;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis}.profile-stats span{font-size:12px;color:#999}
.profile-block{padding:19px 22px}.profile-block-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.profile-block-head h2{margin:0 0 4px}.profile-block-head p{margin:0;font-size:12px}
.profile-history{display:flex;flex-direction:column}.history-row{display:flex;align-items:center;gap:13px;padding:13px 2px;border-bottom:1px solid #272727;min-width:0}.history-row:last-child{border-bottom:0}
.history-mark{width:35px;height:35px;flex:none;border:1px solid #424242;border-radius:10px;display:grid;place-items:center;background:#1b1b1b;color:#eee;font-size:17px;font-weight:700}
.history-mark.in{background:#222;border-color:#555}.history-mark.out{color:#aaa}.history-main{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}.history-main>b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.history-main small{font-size:11px;color:#888}.history-main small a{color:#ccc}.history-main small a:hover{color:#fff}
.history-values{display:flex;gap:18px;flex:none}.history-values span{display:flex;flex-direction:column;gap:3px;font-size:10px;color:#888}.history-values b{font-size:12px;color:#eee;font-variant-numeric:tabular-nums}.history-amount{flex:none;font-size:14px;font-variant-numeric:tabular-nums}.history-amount.positive{color:#eee}
.empty-state{display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;min-height:130px;color:#ddd}.profile-note{font-size:12px;margin:12px 3px}.profile-columns{display:grid;grid-template-columns:1fr 1fr;gap:18px}.profile-columns h2{margin-top:5px}
.bonus-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.bonus-grid>.profile-block{min-width:0;margin:0}.bonus-grid h2{margin:0 0 7px}.bonus-wide{grid-column:1/-1}.ref-code{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:12px 0}.ref-code code{font-size:15px;letter-spacing:1.2px;padding:9px 12px;border:1px solid var(--line);border-radius:9px;color:var(--text)}.bonus-icon,.level-badge{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--theme-line,var(--line));background:color-mix(in srgb,var(--theme-accent,var(--acc)) 15%,var(--theme-panel,var(--panel)));color:var(--theme-accent,var(--acc));font-weight:900}.level-badge{width:auto;height:auto;padding:8px 14px;border-radius:999px;font-size:12px;letter-spacing:.5px}.level-track{height:10px;overflow:hidden;border-radius:99px;background:var(--theme-bg,var(--panel2));border:1px solid var(--theme-line,var(--line))}.level-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--theme-secondary,var(--acc2)),var(--theme-accent,var(--acc)));box-shadow:0 0 14px color-mix(in srgb,var(--theme-accent,var(--acc)) 50%,transparent);transition:width .5s}.level-foot{justify-content:space-between;margin-top:8px;font-size:11px;color:var(--mut)}.bonus-inventory{max-height:340px;overflow:auto;padding:3px}.bonus-requests .history-row{align-items:flex-start}
@media(max-width:720px){.bonus-grid{grid-template-columns:1fr}.bonus-wide{grid-column:auto}}
@media(max-width:760px){.profile-stats{grid-template-columns:1fr 1fr}.profile-columns{grid-template-columns:1fr}.profile-hero{padding:20px;align-items:flex-start}.profile-wallet{min-width:0}.profile-identity>.ava{width:54px;height:54px}.profile-identity h1{font-size:22px}}
@media(max-width:520px){.profile-hero{flex-direction:column;gap:16px}.profile-wallet{width:100%;text-align:left}.profile-tabs{margin-left:-2px;margin-right:-2px}.profile-tabs .profile-tab{padding:9px 12px;font-size:12px}.profile-stats b{font-size:17px}.profile-stats>.panel{padding:14px 12px}.profile-block{padding:15px 12px}.history-row{gap:9px}.history-mark{width:30px;height:30px}.history-values{gap:8px;flex-direction:column}.history-main>b{font-size:12px}.history-main small{font-size:10px}.history-amount{font-size:12px}}

/* Combined balance and account chip in the header */
#userbox{gap:9px}
.account-chip{display:flex;align-items:center;gap:2px;padding:4px;border:1px solid #353535;border-radius:999px;background:linear-gradient(135deg,#1a1a1a,#101010);box-shadow:inset 0 1px #ffffff0a;transition:border-color .25s,background .25s,box-shadow .25s}
.account-chip:hover{border-color:#666;background:#1c1c1c;box-shadow:0 5px 20px #0007}
.account-chip .bal{background:transparent;border:0;border-radius:999px;padding:7px 11px;color:#f4f4f4;font-size:13px;transition:background .2s}
.account-chip .bal:hover{background:#ffffff12}
.account-chip .me{gap:8px;padding:2px 10px 2px 3px;border-radius:999px}
.account-chip .me:hover{background:#ffffff12}
.account-chip .ava{width:32px;height:32px;border-radius:50%;border:1px solid #5b5b5b;object-fit:cover}
@media(max-width:640px){.account-chip{padding:3px}.account-chip .bal{font-size:12px;padding:6px 8px}.account-chip .me{gap:0;padding-right:4px}.account-chip .me b{display:none}.account-chip .ava{width:31px;height:31px}#userbox{gap:6px}}

/* Map-inspired and custom appearance presets */
body[data-theme="graphite"]{--theme-bg:#080808;--theme-base:#252525;--theme-panel:#151515;--theme-line:#383838;--theme-accent:#f0f0f0}
body[data-theme="mirage"]{--theme-bg:#100e0c;--theme-base:#493523;--theme-panel:#1d1712;--theme-line:#493a2b;--theme-accent:#d9ad72}
body[data-theme="dust2"]{--theme-bg:#0e1114;--theme-base:#3e3327;--theme-panel:#171718;--theme-line:#454038;--theme-accent:#e2b86f}
body[data-theme="inferno"]{--theme-bg:#100b0b;--theme-base:#492522;--theme-panel:#1d1212;--theme-line:#482b29;--theme-accent:#e27b58}
body[data-theme="nuke"]{--theme-bg:#0b100f;--theme-base:#293d39;--theme-panel:#111918;--theme-line:#354944;--theme-accent:#84b6a1}
body[data-theme="ancient"]{--theme-bg:#0d100b;--theme-base:#34432d;--theme-panel:#151a12;--theme-line:#3a4932;--theme-accent:#9bb27a}
body[data-theme="anubis"]{--theme-bg:#0b1012;--theme-base:#304957;--theme-panel:#11191c;--theme-line:#344a51;--theme-accent:#76a9bd}
body[data-theme="arctic"]{--theme-bg:#0b0f12;--theme-base:#30404b;--theme-panel:#12181c;--theme-line:#3c4b55;--theme-accent:#a9d5e5}
body[data-theme="violet"]{--theme-bg:#100d14;--theme-base:#3c2d50;--theme-panel:#18131f;--theme-line:#49385e;--theme-accent:#b9a0e8}
body[data-theme="emerald"]{--theme-bg:#0b100d;--theme-base:#294238;--theme-panel:#121a16;--theme-line:#354b40;--theme-accent:#78c5a2}
body[data-theme="custom"]{--theme-bg:color-mix(in srgb,var(--theme-base,#252525) 18%,#080808);--theme-panel:color-mix(in srgb,var(--theme-base,#252525) 48%,#080808);--theme-line:color-mix(in srgb,var(--theme-base,#252525) 70%,#777);--theme-accent:#a9a9a9}
body[data-theme]:not([data-theme="graphite"]){--acc:var(--theme-accent);--acc2:var(--theme-accent);--grad:linear-gradient(135deg,var(--theme-accent),color-mix(in srgb,var(--theme-accent) 64%,#fff));
  background:radial-gradient(ellipse at 50% -28%,color-mix(in srgb,var(--theme-accent) 13%,transparent),transparent 54%),linear-gradient(180deg,var(--theme-bg),#070707 78%);transition:background .7s ease}
body[data-theme]:not([data-theme="graphite"]) header,body[data-theme]:not([data-theme="graphite"]) #drops{background:color-mix(in srgb,var(--theme-bg) 86%,#000);border-color:var(--theme-line)}
body[data-theme]:not([data-theme="graphite"]) .panel,body[data-theme]:not([data-theme="graphite"]) .case,body[data-theme]:not([data-theme="graphite"]) .item{background:linear-gradient(155deg,color-mix(in srgb,var(--theme-panel) 94%,#fff 6%),var(--theme-panel) 80%);border-color:var(--theme-line)}
body[data-theme]:not([data-theme="graphite"]) .hero,body[data-theme]:not([data-theme="graphite"]) .profile-hero{background:radial-gradient(ellipse at 78% 48%,color-mix(in srgb,var(--theme-accent) 20%,transparent),transparent 38%),linear-gradient(120deg,color-mix(in srgb,var(--theme-base) 55%,#161616),var(--theme-bg) 78%);border-color:var(--theme-line)}
body[data-theme]:not([data-theme="graphite"]) .case::before{background:radial-gradient(closest-side,color-mix(in srgb,var(--theme-accent) 28%,transparent),transparent)}
body[data-theme]:not([data-theme="graphite"]) .item{background:radial-gradient(120% 70% at 50% 100%,color-mix(in srgb,var(--theme-accent) 19%,transparent),transparent 72%),linear-gradient(180deg,var(--theme-panel),color-mix(in srgb,var(--theme-panel) 74%,#000))}
body[data-theme]:not([data-theme="graphite"]) .item::after{background:var(--theme-accent);box-shadow:0 0 11px color-mix(in srgb,var(--theme-accent) 60%,transparent)}
body[data-theme]:not([data-theme="graphite"]) .bal{color:var(--theme-accent)}
body[data-theme]:not([data-theme="graphite"]) button:not(.ghost),body[data-theme]:not([data-theme="graphite"]) .btn:not(.ghost){background:linear-gradient(135deg,var(--theme-accent),color-mix(in srgb,var(--theme-accent) 67%,#fff));border-color:color-mix(in srgb,var(--theme-accent) 75%,#fff)}
body[data-theme]:not([data-theme="graphite"]) nav a.on::after,body[data-theme]:not([data-theme="graphite"]) .case-group-title::after{background:var(--theme-accent)}
body[data-theme]:not([data-theme="graphite"]) .profile-tabs .profile-tab.active{background:var(--theme-accent);color:#101010}
body[data-theme]:not([data-theme="graphite"]) .account-chip{background:linear-gradient(135deg,var(--theme-panel),var(--theme-bg));border-color:var(--theme-line)}
body[data-theme="custom"] .profile-hero,body[data-theme="custom"] .hero{background:radial-gradient(ellipse at 78% 48%,color-mix(in srgb,var(--theme-accent) 19%,transparent),transparent 38%),linear-gradient(120deg,color-mix(in srgb,var(--theme-base) 56%,#161616),var(--theme-bg) 78%)}

.appearance-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin:4px 2px 16px}.appearance-heading h2{margin:4px 0}.appearance-heading p{margin:0;font-size:13px}.appearance-saved{flex:none;color:#999;font-size:11px}
.theme-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.theme-card{position:relative;overflow:hidden;text-align:left;background:#111;color:#fff;border:1px solid #343434;border-radius:13px;padding:7px;box-shadow:none;transition:transform .28s var(--ease-out),border-color .25s,background .25s,box-shadow .3s}
.theme-card:hover{transform:translateY(-3px);background:#171717;border-color:#777;box-shadow:0 12px 25px #0008}.theme-card.selected{border-color:var(--swatch-a);box-shadow:0 0 0 1px var(--swatch-a),0 10px 28px #0007}
.theme-preview{height:104px;position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:10px;border:1px solid #ffffff1c;border-radius:8px;background:radial-gradient(ellipse at 70% 20%,color-mix(in srgb,var(--swatch-a) 64%,transparent),transparent 45%),linear-gradient(145deg,var(--swatch-b),#0b0b0b 78%)}
.theme-preview::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 49%,#ffffff12 50%,transparent 51%),linear-gradient(0deg,transparent 49%,#ffffff12 50%,transparent 51%);background-size:34px 34px;opacity:.46}
.theme-preview::after{content:"";position:absolute;right:-10px;top:12px;width:100px;height:70px;border:1px solid color-mix(in srgb,var(--swatch-a) 55%,transparent);border-radius:35% 8% 25% 7%;transform:rotate(-18deg);box-shadow:0 0 20px color-mix(in srgb,var(--swatch-a) 22%,transparent)}
.theme-preview i{position:absolute;left:15%;right:15%;bottom:21px;height:18px;border-top:1px solid #ffffff45;border-bottom:1px solid #ffffff20;transform:skewY(-8deg)}
.theme-preview b{position:relative;z-index:1;font-size:9px;letter-spacing:1.2px;color:#fff;text-shadow:0 2px 8px #000}
.theme-copy{display:flex;flex-direction:column;gap:3px;padding:10px 5px 4px}.theme-copy strong{font-size:13px}.theme-copy small{font-size:10px;color:#999;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.theme-check{position:absolute;right:12px;top:12px;width:21px;height:21px;display:grid;place-items:center;border-radius:50%;background:var(--swatch-a);color:#111;font-size:12px;font-weight:900;opacity:0;transform:scale(.6);transition:opacity .2s,transform .25s var(--ease-spring)}.theme-card.selected .theme-check{opacity:1;transform:scale(1)}
.custom-colors{display:flex;align-items:center;gap:18px}.custom-colors>div{flex:1}.custom-colors p{font-size:12px;margin:5px 0 0}.custom-colors label{flex-direction:row;align-items:center;gap:10px;white-space:nowrap}.custom-colors input[type=color]{width:44px;height:36px;padding:3px;cursor:pointer;border-radius:9px}
.theme-mirage{background:radial-gradient(ellipse at 70% 15%,#daa96688,transparent 42%),linear-gradient(155deg,#584332,#29201a 70%,#0b0b0b)}
.theme-dust2{background:radial-gradient(ellipse at 76% 23%,#ebc77880,transparent 42%),linear-gradient(145deg,#445b68,#60503b 54%,#0b0b0b)}
.theme-inferno{background:radial-gradient(ellipse at 75% 22%,#f06c4c88,transparent 38%),linear-gradient(145deg,#572b28,#281514 70%,#090909)}
.theme-nuke{background:radial-gradient(ellipse at 72% 24%,#8bcaad88,transparent 38%),linear-gradient(145deg,#375a50,#1b2927 65%,#090909)}
.theme-ancient{background:radial-gradient(ellipse at 72% 22%,#a1b97977,transparent 40%),linear-gradient(145deg,#49533b,#222719 68%,#080908)}
.theme-anubis{background:radial-gradient(ellipse at 73% 22%,#8dc2d477,transparent 40%),linear-gradient(145deg,#3a6070,#403928 68%,#090909)}
.theme-arctic{background:radial-gradient(ellipse at 70% 18%,#c3efff88,transparent 40%),linear-gradient(145deg,#456173,#202b32 68%,#08090a)}
.theme-violet{background:radial-gradient(ellipse at 72% 20%,#c5a4f488,transparent 40%),linear-gradient(145deg,#584174,#241c31 68%,#09080a)}
.theme-emerald{background:radial-gradient(ellipse at 72% 20%,#83d6ad88,transparent 40%),linear-gradient(145deg,#38614f,#1c2b23 68%,#080a09)}
.theme-custom{background:radial-gradient(ellipse at 70% 22%,var(--swatch-a),transparent 42%),linear-gradient(145deg,var(--swatch-b),#0a0a0a 78%)}
@media(max-width:900px){.theme-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){.theme-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.theme-preview{height:84px}.appearance-heading{align-items:flex-start;flex-direction:column}.custom-colors{align-items:flex-start;flex-wrap:wrap}.custom-colors>div{flex-basis:100%}}

/* Complete theme tokens: every UI surface, state, and battle color follows the selected preset. */
body[data-theme="graphite"]{--theme-secondary:#c2c2c2;--theme-tertiary:#858585;--theme-accent-soft:#e0e0e0}
body[data-theme="mirage"]{--theme-secondary:#bd8550;--theme-tertiary:#efcf9f;--theme-accent-soft:#a98661}
body[data-theme="dust2"]{--theme-secondary:#9e855f;--theme-tertiary:#89a7b6;--theme-accent-soft:#c3a879}
body[data-theme="inferno"]{--theme-secondary:#b94d3c;--theme-tertiary:#efa17b;--theme-accent-soft:#995c4b}
body[data-theme="nuke"]{--theme-secondary:#547b72;--theme-tertiary:#c2d7ca;--theme-accent-soft:#71998b}
body[data-theme="ancient"]{--theme-secondary:#687e4e;--theme-tertiary:#c2ca8c;--theme-accent-soft:#889663}
body[data-theme="anubis"]{--theme-secondary:#4e7989;--theme-tertiary:#d1b878;--theme-accent-soft:#858b75}
body[data-theme="arctic"]{--theme-secondary:#638b9f;--theme-tertiary:#d5f0f8;--theme-accent-soft:#8aafc0}
body[data-theme="violet"]{--theme-secondary:#8065ae;--theme-tertiary:#dfc9fa;--theme-accent-soft:#9d80c5}
body[data-theme="emerald"]{--theme-secondary:#438564;--theme-tertiary:#b6e6c5;--theme-accent-soft:#5ca181}
body[data-theme="custom"]{--theme-secondary:color-mix(in srgb,var(--theme-accent) 70%,#202020);--theme-tertiary:color-mix(in srgb,var(--theme-accent) 45%,#fff);--theme-accent-soft:color-mix(in srgb,var(--theme-accent) 60%,#555)}
body[data-theme]{--bg:var(--theme-bg);--panel:var(--theme-panel);--panel2:color-mix(in srgb,var(--theme-panel) 58%,var(--theme-base));--line:var(--theme-line);
  --acc:var(--theme-accent);--acc2:var(--theme-secondary);--green:var(--theme-secondary);--red:var(--theme-tertiary);
  --common:var(--theme-accent-soft);--uncommon:var(--theme-secondary);--rare:var(--theme-accent);--epic:var(--theme-tertiary);--legendary:var(--theme-accent);--mythic:var(--theme-secondary);--gold:var(--theme-tertiary);
  --grad:linear-gradient(135deg,var(--theme-accent),var(--theme-secondary));--text:#f6f4f1;--mut:color-mix(in srgb,#f6f4f1 62%,var(--theme-bg));color:var(--text)}
body[data-theme]:not([data-theme="graphite"]){background-color:var(--theme-bg);background-image:linear-gradient(180deg,#05050566,#050505d9 62%,#05050585),radial-gradient(ellipse at 50% 0,color-mix(in srgb,var(--theme-accent) 24%,transparent),transparent 58%),var(--theme-map,linear-gradient(135deg,var(--theme-base),var(--theme-bg)));background-position:center;background-size:cover;background-attachment:fixed;transition:background-color .7s ease}
body[data-theme]:not([data-theme="graphite"]) header,body[data-theme]:not([data-theme="graphite"]) #drops,body[data-theme]:not([data-theme="graphite"]) footer{background:color-mix(in srgb,var(--theme-bg) 88%,transparent);border-color:color-mix(in srgb,var(--theme-line) 78%,transparent);backdrop-filter:blur(16px)}
body[data-theme] nav a.on::after,body[data-theme] .case-group-title::after{background:var(--grad);box-shadow:0 0 20px color-mix(in srgb,var(--theme-accent) 34%,transparent)}
body[data-theme] .logo span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
body[data-theme] button:not(.ghost),body[data-theme] .btn:not(.ghost){background:var(--grad);border:1px solid color-mix(in srgb,var(--theme-accent) 76%,#fff);color:#111}
body[data-theme] .ghost,body[data-theme] button.red{background:color-mix(in srgb,var(--theme-panel) 76%,var(--theme-base));color:var(--text);border-color:var(--theme-line)}
body[data-theme] button:hover:not(:disabled),body[data-theme] .btn:hover{box-shadow:0 8px 26px color-mix(in srgb,var(--theme-accent) 24%,transparent)}
body[data-theme] input,body[data-theme] select,body[data-theme] code{background:color-mix(in srgb,var(--theme-bg) 78%,var(--theme-base));color:var(--text);border-color:var(--theme-line)}
body[data-theme] input:focus,body[data-theme] select:focus{border-color:var(--theme-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--theme-accent) 22%,transparent)}
body[data-theme] .panel,body[data-theme] .case,body[data-theme] .item,body[data-theme] .battle-row,body[data-theme] .bcol,body[data-theme] .profile-hero,body[data-theme] .profile-wallet,body[data-theme] .profile-tabs,body[data-theme] .account-chip,body[data-theme] .theme-card,body[data-theme] .history-mark{
  background-color:color-mix(in srgb,var(--theme-panel) 90%,transparent);border-color:var(--theme-line);box-shadow:inset 0 1px color-mix(in srgb,var(--theme-tertiary) 9%,transparent),0 12px 36px #0005}
body[data-theme] .hero{background:radial-gradient(ellipse at 78% 48%,color-mix(in srgb,var(--theme-accent) 24%,transparent),transparent 38%),linear-gradient(120deg,color-mix(in srgb,var(--theme-base) 65%,transparent),color-mix(in srgb,var(--theme-bg) 87%,transparent));border-color:var(--theme-line)}
body[data-theme] .panel,body[data-theme] .case,body[data-theme] .item,body[data-theme] .profile-hero,body[data-theme] .profile-wallet,body[data-theme] .history-mark{backdrop-filter:blur(10px)}
body[data-theme] .case{background:linear-gradient(155deg,color-mix(in srgb,var(--theme-panel) 89%,var(--theme-tertiary) 11%),color-mix(in srgb,var(--theme-bg) 82%,transparent));}
body[data-theme] .case::before{background:radial-gradient(closest-side,color-mix(in srgb,var(--theme-accent) 40%,transparent),transparent)}
body[data-theme] .case:hover,body[data-theme] .item.click:hover,body[data-theme] .item.sel{border-color:var(--theme-accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--theme-accent) 50%,transparent),0 16px 36px #0009}
body[data-theme] .case .pr,body[data-theme] .tag,body[data-theme] .profile-tabs,body[data-theme] .theme-card{background-color:color-mix(in srgb,var(--theme-panel) 78%,var(--theme-base));border-color:var(--theme-line);color:var(--theme-accent)}
body[data-theme] .tag.open{background:color-mix(in srgb,var(--theme-secondary) 22%,var(--theme-panel));color:var(--theme-tertiary)}
body[data-theme] .tag.open::before{background:var(--theme-tertiary)}
body[data-theme] .drop{background:linear-gradient(90deg,color-mix(in srgb,var(--c) 25%,var(--theme-panel)),var(--theme-panel) 80%);border-left-color:var(--c)}
body[data-theme] .item::after{background:var(--c);box-shadow:0 0 14px color-mix(in srgb,var(--c) 50%,transparent)}
body[data-theme] .item .pr,body[data-theme] .bal,body[data-theme] .bcol .tot,body[data-theme] .history-amount.positive{color:var(--theme-accent)}
body[data-theme] .reel{background:color-mix(in srgb,var(--theme-bg) 84%,#000);border-color:var(--theme-line)}
body[data-theme] .reel::before{background:linear-gradient(90deg,var(--theme-bg),transparent 18%,transparent 82%,var(--theme-bg))}
body[data-theme] .reel::after{background:var(--theme-accent);box-shadow:0 0 16px 2px var(--theme-accent)}
body[data-theme] #won .panel,body[data-theme] .bcol.win{border-color:var(--theme-tertiary);box-shadow:0 0 0 1px color-mix(in srgb,var(--theme-tertiary) 54%,transparent) inset,0 0 34px color-mix(in srgb,var(--theme-tertiary) 18%,transparent)}
body[data-theme] .gauge{background:conic-gradient(var(--theme-accent) 0 var(--chance,0%),var(--theme-panel) 0);box-shadow:0 0 42px color-mix(in srgb,var(--theme-accent) 17%,transparent)}
body[data-theme] .gauge::before{background:radial-gradient(circle,var(--theme-panel),var(--theme-bg))}
body[data-theme] .battle-wheel{filter:drop-shadow(0 8px 20px #000b)}
body[data-theme] .wheel-track{border-color:var(--theme-line);box-shadow:0 0 0 1px var(--theme-secondary),inset 0 0 0 1px color-mix(in srgb,var(--theme-tertiary) 40%,transparent)}
body[data-theme] .wheel-player .ava{border-color:var(--pc)}body[data-theme] .wheel-player.winner .ava{box-shadow:0 0 0 4px var(--theme-tertiary),0 0 28px var(--theme-accent)}
body[data-theme] .bcol{border-top-color:var(--pc,var(--theme-line))}body[data-theme] .wheel-odds>span{border-left-color:var(--pc);background:var(--theme-panel)}
body[data-theme] #modal{background:color-mix(in srgb,var(--theme-bg) 80%,#000b)}body[data-theme] #modal .panel{border-color:var(--theme-line)}

/* Case reveal: one hinged case per result, arranged side by side for multi-open. */
.case-reveal-grid{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin:18px 0 24px}
#reels{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:10px}
#reels .reel{min-width:0}
.case-reveal-card{--c:var(--common);width:min(240px,100%);min-height:235px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;text-align:center;padding:15px;border:1px solid color-mix(in srgb,var(--c) 44%,var(--theme-line,var(--line)));border-radius:14px;background:radial-gradient(ellipse at 50% 58%,color-mix(in srgb,var(--c) 18%,transparent),transparent 65%),linear-gradient(160deg,var(--theme-panel,var(--panel)),var(--theme-bg,var(--bg)));opacity:0;transform:translateY(14px) scale(.96)}
.case-reveal-card.r-uncommon{--c:#5e98d9}.case-reveal-card.r-rare{--c:#4b69ff}.case-reveal-card.r-epic{--c:#8847ff}.case-reveal-card.r-legendary{--c:#d32ce6}.case-reveal-card.r-mythic{--c:#eb4b4b}.case-reveal-card.r-gold{--c:#e4ae39}
.case-reveal-grid.show .case-reveal-card{animation:reveal-card .5s var(--ease-out,ease) var(--reveal-delay) forwards}
@keyframes reveal-card{to{opacity:1;transform:translateY(0) scale(1)}}
.reveal-case{position:relative;width:184px;height:116px;margin-bottom:10px;perspective:600px;filter:drop-shadow(0 14px 18px #0009)}
.reveal-case>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.reveal-lid{position:absolute;z-index:2;left:10%;right:10%;top:14%;height:42%;border:1px solid color-mix(in srgb,var(--c) 75%,white);border-radius:12px 12px 5px 5px;background:linear-gradient(145deg,color-mix(in srgb,var(--c) 65%,#242424),#111 72%);box-shadow:inset 0 2px #ffffff40,0 0 16px color-mix(in srgb,var(--c) 40%,transparent);transform-origin:50% 100%;transform:rotateX(0);transition:transform .6s cubic-bezier(.2,.8,.2,1);backface-visibility:hidden}
.reveal-item{position:absolute;z-index:1;left:50%;top:28%;width:100px;height:70px;display:grid;place-items:center;opacity:0;transform:translate(-50%,25px) scale(.7);filter:drop-shadow(0 0 18px var(--c));}
.reveal-item img{max-width:100%;max-height:100%;object-fit:contain}
.case-reveal-grid.show .reveal-lid{animation:lid-open .7s cubic-bezier(.2,.8,.2,1) calc(var(--reveal-delay) + .28s) forwards}
.case-reveal-grid.show .reveal-item{animation:item-emerge .7s cubic-bezier(.2,.8,.2,1) calc(var(--reveal-delay) + .48s) forwards}
@keyframes lid-open{to{transform:rotateX(68deg) translateY(-10px)}}
@keyframes item-emerge{to{opacity:1;transform:translate(-50%,-12px) scale(1)}}
.rarity-label{color:var(--c);font-size:11px;text-transform:uppercase;letter-spacing:1.2px;font-weight:900;text-shadow:0 0 14px color-mix(in srgb,var(--c) 66%,transparent)}
.case-reveal-card> b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Real activity feed starts flush at the left edge; rarity hues stay recognizable in every theme. */
#drops{padding-left:0;padding-right:14px;mask-image:linear-gradient(90deg,#000 0%,#000 94%,transparent)}
.drop.r-common{--c:#b0c3d9}.drop.r-uncommon{--c:#5e98d9}.drop.r-rare{--c:#4b69ff}.drop.r-epic{--c:#8847ff}.drop.r-legendary{--c:#d32ce6}.drop.r-mythic{--c:#eb4b4b}.drop.r-gold{--c:#e4ae39}
body[data-theme] .drop{background:linear-gradient(90deg,color-mix(in srgb,var(--c) 25%,var(--theme-panel)),var(--theme-panel) 80%);border-left-color:var(--c)}
.hour-best{position:relative;flex:none;gap:9px;padding:4px 13px 4px 8px;border:1px solid color-mix(in srgb,var(--c) 70%,transparent);box-shadow:0 0 20px color-mix(in srgb,var(--c) 32%,transparent),inset 0 0 14px color-mix(in srgb,var(--c) 12%,transparent);animation:best-glow 1.8s ease-in-out infinite alternate}
.hour-best img{height:34px}.hour-best b{font-size:11px;color:var(--c)}.hour-best span:not(.hour-crown){display:block;font-size:11px;color:var(--text)}
.hour-crown{font-size:18px;color:var(--c);text-shadow:0 0 12px var(--c)}
@keyframes best-glow{to{box-shadow:0 0 30px color-mix(in srgb,var(--c) 48%,transparent),inset 0 0 18px color-mix(in srgb,var(--c) 18%,transparent)}}
.upgrade-mode,.upgrade-presets{display:flex;justify-content:center;align-items:end;gap:7px;flex-wrap:wrap;margin:8px 0 12px}
.upgrade-presets label{width:100px;text-align:left}.upgrade-presets input{width:100%;padding:6px 8px}.chance-control{max-width:190px;margin:8px auto 12px;text-align:left}
@media(max-width:640px){.case-reveal-card{width:calc(50% - 10px);min-height:205px;padding:10px}.reveal-case{width:145px;height:96px}.case-reveal-grid{gap:8px}.hour-best{max-width:86vw}.upgrade-mode .sm{padding:7px 9px}}
@media(prefers-reduced-motion:reduce){.case-reveal-grid.show .case-reveal-card,.case-reveal-grid.show .reveal-lid,.case-reveal-grid.show .reveal-item,.hour-best{animation:none;opacity:1;transform:none}}
body[data-theme] .toast{background:var(--theme-panel);border-color:var(--theme-line);border-left-color:var(--theme-accent)}body[data-theme] .toast.err{border-left-color:var(--theme-tertiary)}body[data-theme] .toast.ok{border-left-color:var(--theme-secondary)}
body[data-theme] tr:hover,body[data-theme] tbody tr:hover{background:color-mix(in srgb,var(--theme-accent) 10%,transparent)}body[data-theme] th,body[data-theme] .mut,body[data-theme] .theme-copy small{color:var(--mut)}
body[data-theme] .history-mark.in{background:color-mix(in srgb,var(--theme-secondary) 30%,var(--theme-panel));border-color:var(--theme-secondary)}
body[data-theme] .profile-tabs .profile-tab.active{background:var(--theme-accent);color:#111}
body[data-theme] .profile-stats>.panel,body[data-theme] .profile-block{background:linear-gradient(155deg,color-mix(in srgb,var(--theme-panel) 92%,var(--theme-accent) 8%),color-mix(in srgb,var(--theme-bg) 86%,transparent));border-color:var(--theme-line)}
body[data-theme] .theme-card.selected{border-color:var(--swatch-a);box-shadow:0 0 0 1px var(--swatch-a),0 10px 28px #0007}
.theme-preview[style*="--map-bg"]{background-image:linear-gradient(180deg,#08080812,#080808b8),var(--map-bg);background-position:center;background-size:cover}
body[data-theme="custom"]{--theme-map:none}
body[data-theme] a:hover{color:var(--theme-tertiary)}
body[data-theme] .profile-kicker,body[data-theme] .profile-wallet small,body[data-theme] .profile-stats small,body[data-theme] .profile-stats span,body[data-theme] .profile-wallet a,body[data-theme] .history-main small,body[data-theme] .history-values span,body[data-theme] .history-mark.out,body[data-theme] .appearance-saved{color:var(--mut)}
body[data-theme] .profile-identity p{color:var(--mut)}
body[data-theme] .history-row{border-color:color-mix(in srgb,var(--theme-line) 70%,transparent)}
body[data-theme] .history-values b,body[data-theme] .history-main>b,body[data-theme] .history-amount{color:var(--text)}
body[data-theme] .history-main small a{color:var(--theme-accent)}
body[data-theme] .wheel-pointer{border-top-color:var(--theme-accent);filter:drop-shadow(0 2px 7px color-mix(in srgb,var(--theme-accent) 50%,transparent))}
body[data-theme] .avas .ava{border-color:var(--theme-panel)}
body[data-theme] .case .pr{color:var(--theme-accent)}
body[data-theme] .theme-card{color:var(--text)}
body[data-theme] .theme-card:hover{border-color:var(--theme-accent);box-shadow:0 12px 25px #0008}
body[data-theme] .profile-tabs .profile-tab{color:var(--mut)}
body[data-theme] .profile-tabs .profile-tab.active{color:var(--theme-bg)}
body[data-theme] .profile-tabs .profile-tab:hover:not(.active){background:color-mix(in srgb,var(--theme-accent) 15%,var(--theme-panel));color:var(--text)}
body[data-theme] .profile-wallet,body[data-theme] .account-chip{background:linear-gradient(135deg,color-mix(in srgb,var(--theme-panel) 82%,var(--theme-base)),color-mix(in srgb,var(--theme-bg) 84%,transparent))}
body[data-theme] .theme-preview b{color:#fff}

/* ---- animated logo mark */
.logo-mark{display:block;width:40px;height:40px;margin:-6px 8px -6px 0;flex:none;transition:transform .35s var(--ease-spring,ease)}
.logo-mark svg{display:block;width:100%;height:100%}
.logo:hover .logo-mark{transform:scale(1.08) rotate(-4deg)}

/* ---- background music switch (only on themes that have music) */
.music-toggle{display:grid;place-items:center;width:36px;height:34px;padding:0;border-radius:9px;background:var(--panel);color:var(--acc);border:1px solid var(--line);font-size:16px;font-weight:800;box-shadow:none;cursor:pointer}
.music-toggle:hover{border-color:var(--acc);filter:none}
.music-toggle.off{color:var(--mut);text-decoration:line-through}
.music-toggle[hidden]{display:none}

.music-wrap{position:relative;display:inline-flex}
.music-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:40;width:250px;padding:12px 14px;border-radius:12px;box-shadow:0 18px 40px #000a}
.music-panel[hidden]{display:none}
.music-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.music-switch{padding:4px 12px;font-size:12px;border-radius:8px;background:var(--panel2);color:var(--mut);border:1px solid var(--line);box-shadow:none}
.music-switch.on{background:var(--acc);color:#111;border-color:var(--acc)}
.music-row{display:flex;flex-direction:row;align-items:center;gap:8px;color:var(--text)}
.music-row input{flex:1;accent-color:var(--acc);padding:0;border:0;background:none}
.music-row b{min-width:38px;text-align:right;font-variant-numeric:tabular-nums}
.music-panel p{margin:8px 0 0;font-size:11px}
@media(max-width:640px){.music-panel{position:fixed;left:12px;right:12px;top:70px;width:auto}}
.music-sep{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
/* the best drop of the hour stays pinned at the left edge of the feed */
#hour-best{order:-1;position:sticky;left:0;z-index:2}