/* NLauncher cases page (/cases) v6 — e2 design (file v8: тема кейса «Кибер» — art-cyber, карточка и комната открытия). Versioned filename: never edit in place (front proxy ignores ?v=). */
:root{
--bg:#F6F7F9; --panel:#FFFFFF; --panel2:#F3F5F9; --ink:#0B0B0F; --ink2:#4A4F5A; --mut:#6B7280; --mut2:#8A909C;
--bd:rgba(11,11,15,.08); --bd2:rgba(11,11,15,.14); --ac:#2E6CF6; --ac2:#1E56D6; --ac-soft:rgba(46,108,246,.10); --ac-tx:#1E56D6;
--ok:#16A34A; --ok-soft:rgba(22,163,74,.11); --bad:#DC2626;
--shadow:0 1px 2px rgba(11,18,32,.04),0 10px 30px -14px rgba(11,18,32,.16); --shadow-lg:0 30px 70px -24px rgba(11,18,32,.35);
--r-common:#8A909C; --r-rare:#2E6CF6; --r-epic:#8B5CF6; --r-legendary:#E59A0C; --r-mythic:#E6397A;
--sans:'Onest',-apple-system,system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
color-scheme:light;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
--bg:#0B0B0F; --panel:#14151C; --panel2:#1A1C24; --ink:#F3F6FC; --ink2:#C9CDD6; --mut:#8A909C; --mut2:#6B7280;
--bd:rgba(255,255,255,.07); --bd2:rgba(255,255,255,.13); --ac:#4C82FF; --ac2:#2E6CF6; --ac-soft:rgba(76,130,255,.14); --ac-tx:#93B8FF;
--ok:#6FE3A0; --ok-soft:rgba(111,227,160,.12); --bad:#FF6B6B;
--shadow:0 1px 2px rgba(0,0,0,.3); --shadow-lg:0 30px 70px -24px rgba(0,0,0,.8);
--r-common:#9AA1AD; --r-rare:#6F9BFF; --r-epic:#B794FF; --r-legendary:#F5C445; --r-mythic:#FF6FA5;
color-scheme:dark; } }
:root[data-theme="dark"]{
--bg:#0B0B0F; --panel:#14151C; --panel2:#1A1C24; --ink:#F3F6FC; --ink2:#C9CDD6; --mut:#8A909C; --mut2:#6B7280;
--bd:rgba(255,255,255,.07); --bd2:rgba(255,255,255,.13); --ac:#4C82FF; --ac2:#2E6CF6; --ac-soft:rgba(76,130,255,.14); --ac-tx:#93B8FF;
--ok:#6FE3A0; --ok-soft:rgba(111,227,160,.12); --bad:#FF6B6B;
--shadow:0 1px 2px rgba(0,0,0,.3); --shadow-lg:0 30px 70px -24px rgba(0,0,0,.8);
--r-common:#9AA1AD; --r-rare:#6F9BFF; --r-epic:#B794FF; --r-legendary:#F5C445; --r-mythic:#FF6FA5;
color-scheme:dark; }
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--ac);color:#fff}
a{color:var(--ac-tx);text-decoration:none}
img{max-width:100%}
button{font:inherit;color:inherit}
.nli{display:inline-block;vertical-align:-.16em;flex:none}
[hidden]{display:none!important}
a,button{transition:background .16s ease,color .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease,opacity .16s ease}
:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.r-common{--rc:var(--r-common)} .r-rare{--rc:var(--r-rare)} .r-epic{--rc:var(--r-epic)} .r-legendary{--rc:var(--r-legendary)} .r-mythic{--rc:var(--r-mythic)}
/* ===== top bar (same as /wardrobe) ===== */
.top{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--bd)}
.top nav{max-width:1240px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);flex:none}
.brand img{width:34px;height:34px;border-radius:9px;display:block}
.brand span{font-weight:900;font-size:18px;letter-spacing:-.03em}
.tabs{display:flex;gap:2px;padding:4px;border-radius:14px;background:var(--bd);font-size:14.5px;font-weight:600}
.tabs a{padding:8px 14px;border-radius:10px;color:var(--ink2)}
.tabs a:hover{background:var(--panel);color:var(--ink)}
.tabs a.on{background:var(--panel);color:var(--ink);box-shadow:var(--shadow)}
.top .right{margin-left:auto;display:flex;align-items:center;gap:10px;min-width:0}
.icon-btn{width:40px;height:40px;border-radius:12px;border:1px solid var(--bd2);background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;flex:none}
.icon-btn:hover{border-color:var(--ac);color:var(--ac)}
.me{display:flex;align-items:center;gap:9px;height:40px;padding:0 12px 0 5px;border-radius:12px;border:1px solid var(--bd2);color:var(--ink);font-weight:700;font-size:14px;min-width:0}
.me:hover{border-color:var(--ac)}
.me .av{width:30px;height:30px;border-radius:8px;background:var(--ac);color:#fff;display:grid;place-items:center;font-weight:900;font-size:13px;flex:none;overflow:hidden}
.me .av canvas{width:30px;height:30px;image-rendering:pixelated;display:block}
.me span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}
/* ===== buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;border-radius:12px;border:1px solid var(--bd2);background:var(--panel);color:var(--ink);font-weight:700;font-size:14.5px;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--ac);color:var(--ac-tx)}
.btn.pri{background:var(--ac);border-color:var(--ac);color:#fff}
.btn.pri:hover{background:var(--ac2);border-color:var(--ac2);color:#fff}
.btn.lg{height:52px;padding:0 24px;font-size:15.5px;border-radius:14px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn .coin{width:16px;height:16px}
.coin{width:16px;height:16px;flex:none;image-rendering:pixelated}
.mono{font-family:var(--mono)}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--mut);text-transform:uppercase;font-weight:700}
.wrap{max-width:1240px;margin:0 auto;padding:36px 24px 64px}
/* ===== page head ===== */
.head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end;margin-bottom:28px}
.head h1{margin:6px 0 10px;font-size:clamp(36px,5vw,56px);font-weight:900;letter-spacing:-.05em;line-height:.95}
.head p{margin:0;font-size:16px;color:var(--ink2);max-width:520px;line-height:1.5}
.wallet{display:flex;align-items:center;gap:16px;padding:14px 14px 14px 18px;border-radius:18px;background:var(--panel);border:1px solid var(--bd);box-shadow:var(--shadow)}
.wallet .v{display:flex;flex-direction:column;gap:2px;min-width:0}
.wallet .v small{font-size:12px;font-weight:700;color:var(--mut)}
.wallet .v b{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.wallet .v b img{width:22px;height:22px}
.wallet.guest .v b{font-family:var(--sans);font-size:15.5px;font-weight:800;letter-spacing:-.01em}
/* ===== shelf ===== */
.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,460px),1fr));gap:20px}
.case{--a:#2E6CF6;--art-bg:#EAF0FD;--art-ink:#1E3A8A;--pat:rgba(46,108,246,.12);
position:relative;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--bd);border-radius:24px;overflow:hidden;box-shadow:var(--shadow);min-width:0}
.case:hover{border-color:color-mix(in srgb,var(--a) 45%,transparent)}
.art{position:relative;height:272px;background:var(--art-bg);overflow:hidden;cursor:pointer;display:block;width:100%;border:0;padding:0;text-align:left;color:var(--art-ink)}
.art::before{content:"";position:absolute;inset:0;pointer-events:none}
.art .k{position:absolute;left:20px;top:18px;z-index:2;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:.8}
.art .n{position:absolute;right:18px;top:16px;z-index:2;font-family:var(--mono);font-size:11px;font-weight:700;padding:5px 9px;border-radius:8px;background:color-mix(in srgb,var(--art-bg) 60%,transparent);border:1px solid color-mix(in srgb,var(--art-ink) 16%,transparent);backdrop-filter:blur(4px)}
.art .hero{position:absolute;z-index:1;inset:0;display:flex;align-items:flex-end;justify-content:center;pointer-events:none}
.art .hero img{position:absolute;bottom:0;object-fit:contain;image-rendering:auto;filter:drop-shadow(0 18px 18px rgba(0,0,0,.28));transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.art .hero .h0{height:244px;left:50%;transform:translateX(-50%);z-index:3}
.art .hero .h1{height:170px;left:calc(50% - 205px);bottom:8px;opacity:.95;z-index:2}
.art .hero .h2{height:170px;left:calc(50% + 50px);bottom:8px;opacity:.95;z-index:2}
.case:hover .art .hero .h0{transform:translateX(-50%) translateY(-4px)}
.art .glyph{position:absolute;z-index:0;pointer-events:none}
.art:focus-visible{outline-offset:-3px}
/* art directions */
.case.art-wardrobe .art::before{background-image:linear-gradient(var(--pat) 1px,transparent 1px),linear-gradient(90deg,var(--pat) 1px,transparent 1px);background-size:26px 26px;mask-image:linear-gradient(to top,#000 10%,transparent 90%);-webkit-mask-image:linear-gradient(to top,#000 10%,transparent 90%)}
.case.art-anime{--a:#D9432A;--art-bg:#F7EEE3;--art-ink:#5A2217;--pat:rgba(217,67,42,.16)}
.case.art-anime .art::before{background:
radial-gradient(circle at 50% 100%,transparent 9px,var(--pat) 10px,var(--pat) 11px,transparent 12px,transparent 17px,var(--pat) 18px,var(--pat) 19px,transparent 20px) 0 0/40px 20px;
mask-image:linear-gradient(to top,#000,transparent 75%);-webkit-mask-image:linear-gradient(to top,#000,transparent 75%)}
.case.art-anime .art .glyph{right:-30px;top:-50px;width:240px;height:240px;border-radius:50%;background:#D9432A;opacity:.9}
.case.art-halloween{--a:#F08A24;--art-bg:#1D1522;--art-ink:#F6E6D2;--pat:rgba(240,138,36,.10)}
.case.art-halloween .art::before{background:repeating-linear-gradient(135deg,var(--pat) 0 1px,transparent 1px 11px);mask-image:radial-gradient(120% 90% at 50% 100%,#000 30%,transparent 80%);-webkit-mask-image:radial-gradient(120% 90% at 50% 100%,#000 30%,transparent 80%)}
.case.art-halloween .art .glyph{left:26px;top:52px;width:86px;height:86px;border-radius:50%;background:#F4D9A6;box-shadow:0 0 60px 10px rgba(244,217,166,.18)}
.case.art-halloween .art .glyph::after{content:"";position:absolute;left:24px;top:-6px;width:86px;height:86px;border-radius:50%;background:var(--art-bg)}
.case.art-space{--a:#7B6CFF;--art-bg:#0A0D22;--art-ink:#DCE0FF;--pat:rgba(220,224,255,.75)}
.case.art-space .art{background:radial-gradient(60% 80% at 18% 110%,rgba(123,108,255,.38),transparent 70%),radial-gradient(45% 60% at 85% 0%,rgba(56,189,248,.16),transparent 70%),var(--art-bg)}
.case.art-space .art::before{background:
radial-gradient(1px 1px at 12% 22%,var(--pat),transparent),radial-gradient(1px 1px at 34% 12%,rgba(220,224,255,.5),transparent),
radial-gradient(1.5px 1.5px at 58% 30%,var(--pat),transparent),radial-gradient(1px 1px at 77% 18%,rgba(220,224,255,.45),transparent),
radial-gradient(1px 1px at 90% 46%,var(--pat),transparent),radial-gradient(1px 1px at 8% 64%,rgba(220,224,255,.4),transparent),
radial-gradient(1.5px 1.5px at 46% 58%,rgba(220,224,255,.35),transparent),radial-gradient(1px 1px at 66% 74%,var(--pat),transparent);
background-size:220px 180px}
.case.art-space .art .glyph{right:34px;top:40px;width:74px;height:74px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#B8B0FF,#5B4FD6 55%,#231C66);box-shadow:0 0 50px 6px rgba(123,108,255,.25)}
.case.art-space .art .glyph::after{content:"";position:absolute;left:-26px;top:30px;width:126px;height:16px;border-radius:50%;border:2px solid rgba(220,224,255,.45);transform:rotate(-16deg);border-top-color:transparent}
.case.art-inferno{--a:#F2551D;--art-bg:#120C0B;--art-ink:#FFE3D1;--pat:rgba(255,106,26,.5)}
.case.art-inferno .art{background:radial-gradient(90% 55% at 50% 118%,rgba(255,84,20,.55),rgba(160,30,10,.25) 45%,transparent 75%),radial-gradient(40% 40% at 10% 0%,rgba(255,90,31,.10),transparent 70%),var(--art-bg)}
.case.art-inferno .art::before{background:radial-gradient(1.5px 1.5px at 14% 78%,rgba(255,150,60,.9),transparent),radial-gradient(1px 1px at 28% 52%,rgba(255,120,40,.7),transparent),radial-gradient(2px 2px at 46% 70%,rgba(255,170,80,.8),transparent),radial-gradient(1px 1px at 62% 34%,rgba(255,110,40,.55),transparent),radial-gradient(1.5px 1.5px at 78% 60%,rgba(255,150,60,.75),transparent),radial-gradient(1px 1px at 90% 24%,rgba(255,120,40,.45),transparent),radial-gradient(1px 1px at 38% 16%,rgba(255,140,60,.4),transparent) 0 0/190px 210px,url("data:image/svg+xml;utf8,") 0 100%/260px 170px repeat-x;mask-image:linear-gradient(to top,#000 20%,rgba(0,0,0,.35) 90%);-webkit-mask-image:linear-gradient(to top,#000 20%,rgba(0,0,0,.35) 90%)}
.case.art-inferno .art .glyph{right:18px;top:44px;width:150px;height:150px;background:url("data:image/svg+xml;utf8,") center/contain no-repeat;opacity:.11}
.sheet .case.art-inferno .stage .glyph{opacity:.07}
.case.art-pirates{--a:#E2A53A;--art-bg:#0A1A2A;--art-ink:#F4E6C8;--pat:rgba(102,208,214,.5)}
.case.art-pirates .art{background:radial-gradient(34% 44% at 16% 8%,rgba(255,226,160,.20),transparent 70%),radial-gradient(90% 55% at 50% 118%,rgba(38,164,174,.34),rgba(10,70,96,.18) 45%,transparent 75%),linear-gradient(to bottom,#0B1626,#0A1E30 62%,#08283A)}
.case.art-pirates .art::before{background:radial-gradient(1px 1px at 14% 18%,rgba(255,240,210,.75),transparent),radial-gradient(1px 1px at 36% 9%,rgba(255,240,210,.5),transparent),radial-gradient(1.5px 1.5px at 62% 24%,rgba(255,240,210,.6),transparent),radial-gradient(1px 1px at 84% 12%,rgba(255,240,210,.45),transparent),radial-gradient(1px 1px at 48% 36%,rgba(255,240,210,.35),transparent) 0 0/230px 150px no-repeat,url("data:image/svg+xml;utf8,") 0 100%/240px 76px repeat-x;mask-image:linear-gradient(to top,#000 30%,rgba(0,0,0,.55) 90%);-webkit-mask-image:linear-gradient(to top,#000 30%,rgba(0,0,0,.55) 90%)}
.case.art-pirates .art .glyph{right:14px;top:38px;width:156px;height:156px;background:url("data:image/svg+xml;utf8,") center/contain no-repeat;opacity:.13}
.sheet .case.art-pirates .stage .glyph{opacity:.07}
@media (prefers-reduced-motion:no-preference){.case.art-pirates .art .glyph{animation:nl-helm 90s linear infinite}.case.art-pirates:hover .art .glyph{animation-duration:30s}}
@keyframes nl-helm{to{transform:rotate(360deg)}}
.case.art-cyber{--a:#E0249A;--art-bg:#08071C;--art-ink:#E6F4FF;--pat:rgba(34,230,255,.5)}
.case.art-cyber .art{background:radial-gradient(70% 42% at 50% 100%,rgba(255,61,184,.42),rgba(120,24,170,.20) 50%,transparent 78%),radial-gradient(38% 46% at 10% 2%,rgba(34,230,255,.16),transparent 70%),linear-gradient(to bottom,#07061A,#0D0A2C 58%,#1C0C38)}
.case.art-cyber .art::before{background:repeating-linear-gradient(to bottom,rgba(230,244,255,.035) 0 1px,transparent 1px 4px),url("data:image/svg+xml;utf8,") 0 100%/100% 76px no-repeat,url("data:image/svg+xml;utf8,") 0 calc(100% - 75px)/320px 92px repeat-x}
.case.art-cyber .art .glyph{right:26px;top:34px;width:128px;height:128px;background:url("data:image/svg+xml;utf8,") center/contain no-repeat;opacity:.42;filter:drop-shadow(0 0 22px rgba(255,61,184,.45))}
.sheet .case.art-cyber .stage .glyph{opacity:.14}
@media (prefers-reduced-motion:no-preference){.case.art-cyber .art .glyph{animation:nl-neon 7s linear infinite}.case.art-cyber:hover .art .glyph{animation-duration:2.4s}}
@keyframes nl-neon{0%,89%,100%{opacity:.42}90%{opacity:.16}91.5%{opacity:.46}93%{opacity:.22}95%{opacity:.42}}
.case.art-cosmetic{--a:#0B0B0F;--art-bg:#EEF0F4;--art-ink:#2A2E37;--pat:rgba(11,11,15,.06)}
.case.art-cosmetic .art::before{background:radial-gradient(var(--pat) 1.2px,transparent 1.4px) 0 0/16px 16px}
.art .swatches{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:14px;z-index:1}
.art .swatches span{width:68px;height:68px;border-radius:18px;background:var(--panel);display:grid;place-items:center;font-weight:900;font-size:20px;box-shadow:0 14px 26px -16px rgba(11,18,32,.5)}
.art .swatches span:nth-child(2){width:86px;height:86px;border-radius:22px}
:root[data-theme="dark"] .case.art-wardrobe{--art-bg:#121A2E;--art-ink:#C9D8FF;--pat:rgba(120,160,255,.09)}
:root[data-theme="dark"] .case.art-anime{--a:#FF6A4D;--art-bg:#1F1614;--art-ink:#F4D7CC;--pat:rgba(255,106,77,.14)}
:root[data-theme="dark"] .case.art-anime .art .glyph{opacity:.75}
:root[data-theme="dark"] .case.art-cosmetic{--a:#F3F6FC;--art-bg:#1A1C24;--art-ink:#C9CDD6;--pat:rgba(255,255,255,.06)}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) .case.art-wardrobe{--art-bg:#121A2E;--art-ink:#C9D8FF;--pat:rgba(120,160,255,.09)}
:root:not([data-theme="light"]) .case.art-anime{--a:#FF6A4D;--art-bg:#1F1614;--art-ink:#F4D7CC;--pat:rgba(255,106,77,.14)}
:root:not([data-theme="light"]) .case.art-cosmetic{--a:#F3F6FC;--art-bg:#1A1C24;--art-ink:#C9CDD6;--pat:rgba(255,255,255,.06)}
}
.case .body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:14px;flex:1}
.case h3{margin:0;font-size:21px;font-weight:900;letter-spacing:-.03em;line-height:1.1}
.case .desc{margin:5px 0 0;font-size:13.5px;color:var(--mut);line-height:1.45}
.split{display:flex;flex-direction:column;gap:7px}
.split .bar{display:flex;height:6px;border-radius:99px;overflow:hidden;gap:2px}
.split .bar i{display:block;height:100%;background:var(--rc);min-width:3px}
.split .lg{display:flex;flex-wrap:wrap;gap:4px 12px;font-family:var(--mono);font-size:11.5px;color:var(--ink2);font-weight:700}
.split .lg span{display:inline-flex;align-items:center;gap:5px}
.split .lg span::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--rc)}
.pity{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink2);font-weight:600}
.pity .ticks{display:flex;gap:2px;flex:none}
.pity .ticks i{width:4px;height:12px;border-radius:2px;background:var(--bd2)}
.pity .ticks i.on{background:var(--r-epic)}
.pity b{color:var(--ink);font-weight:800}
.case .foot{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:14px;border-top:1px solid var(--bd)}
.case .price{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:19px;font-weight:700;letter-spacing:-.02em;margin-right:auto}
.case .price img{width:20px;height:20px}
.case .foot .btn{height:42px}
.case .foot .btn.pri{background:var(--a);border-color:var(--a);color:#fff}
.case.art-cosmetic .foot .btn.pri{color:var(--bg)}
.case .foot .btn.pri:hover{filter:brightness(1.08)}
.case.soon .art{cursor:default}
.case.soon .foot .tag{font-size:13px;font-weight:700;color:var(--mut)}
.sk{border-radius:24px;background:var(--panel);border:1px solid var(--bd);height:470px;position:relative;overflow:hidden}
.sk::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--panel2) 80%,transparent),transparent);animation:sk 1.3s linear infinite;transform:translateX(-100%)}
@keyframes sk{to{transform:translateX(100%)}}
/* ===== facts ===== */
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:26px;border:1px solid var(--bd);border-radius:18px;background:var(--panel)}
.facts div{padding:16px 18px;border-left:1px solid var(--bd);font-size:13.5px;color:var(--ink2);line-height:1.5}
.facts div:first-child{border-left:0}
.facts b{display:block;color:var(--ink);font-size:14px;margin-bottom:3px}
/* ===== feed ===== */
.sec{margin-top:48px}
.sec-head{display:flex;align-items:flex-end;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.sec-head h2{margin:4px 0 0;font-size:clamp(22px,2.6vw,28px);font-weight:900;letter-spacing:-.035em;line-height:1.05}
.sec-head .sp{flex:1}
.sec-head .live{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--mut)}
.sec-head .live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok)}
.feed{background:var(--panel);border:1px solid var(--bd);border-radius:20px;overflow:hidden}
.drop{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:14px;padding:10px 16px;border-top:1px solid var(--bd);position:relative}
.drop:first-child{border-top:0}
.drop::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--rc)}
.drop .th{width:48px;height:48px;border-radius:12px;background:radial-gradient(80% 80% at 50% 70%,color-mix(in srgb,var(--rc) 22%,var(--panel2)),var(--panel2));display:grid;place-items:center;overflow:hidden}
.drop .th img{width:44px;height:44px;object-fit:contain}
.drop .t{min-width:0}
.drop .t b{display:block;font-size:14.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drop .t small{display:block;font-size:12.5px;color:var(--mut);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drop .t small a{color:var(--ink2);font-weight:700}
.drop .t small em{font-style:normal;color:var(--rc);font-weight:800}
.drop .w{font-family:var(--mono);font-size:12px;color:var(--mut);text-align:right;white-space:nowrap}
.more{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-top:1px solid var(--bd);font-size:13px;font-weight:600;color:var(--mut)}
.side .list .more{border-top:0;padding:18px 0 4px}
.more .btn{height:38px}
.empty{padding:26px 18px;text-align:center;color:var(--mut);font-size:14px}
.foot-site{border-top:1px solid var(--bd);margin-top:56px}
.foot-site>div{max-width:1240px;margin:0 auto;padding:22px 24px;display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;color:var(--mut);font-size:13px}
.foot-site nav{display:flex;gap:16px;flex-wrap:wrap}
.foot-site a{color:var(--ink2)}
/* ===== sheet (detail + gate) ===== */
body.lock{overflow:hidden}
body.lock #supportchat-widget-container{display:none!important}
.drop .th .cs{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-weight:900;font-size:12px;background:var(--panel)}
.sheet{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(8,10,16,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.sheet .box{position:relative;width:min(1120px,100%);height:min(760px,calc(100vh - 48px));display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);overflow:hidden;background:var(--panel);border-radius:26px;box-shadow:var(--shadow-lg);border:1px solid var(--bd)}
.x{position:absolute;top:12px;right:12px;z-index:5;width:40px;height:40px;border-radius:12px;border:1px solid var(--bd2);background:var(--panel);color:var(--ink);cursor:pointer;display:grid;place-items:center}
.x:hover{border-color:var(--ac);color:var(--ac)}
.stage{position:relative;overflow:hidden;background:var(--art-bg,#EAF0FD);color:var(--art-ink,#1E3A8A)}
.stage::before{content:"";position:absolute;inset:0;pointer-events:none}
.stage canvas{position:absolute;inset:0;z-index:1;display:block;width:100%!important;height:100%!important;cursor:grab;touch-action:pan-y}
.stage .flat{position:absolute;inset:0;margin:auto;z-index:1;width:64%;max-width:280px;height:auto;max-height:70%;object-fit:contain}
.stage .cap{position:absolute;left:18px;right:18px;bottom:16px;z-index:2;display:flex;align-items:flex-end;gap:10px;pointer-events:none}
.stage .cap b{display:block;font-size:20px;font-weight:900;letter-spacing:-.03em;line-height:1.1}
.stage .cap small{display:block;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--rc);margin-bottom:4px;filter:brightness(1.05)}
.stage .ld{position:absolute;inset:0;display:grid;place-items:center;font-size:13px;font-weight:600;opacity:.6}
.stage .shadow{position:absolute;left:50%;bottom:64px;width:180px;height:22px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.28),transparent);z-index:0}
.sheet .stage.art{height:auto;cursor:default}
.side{display:flex;flex-direction:column;min-width:0;min-height:0}
.side .hd{padding:24px 28px 16px;border-bottom:1px solid var(--bd)}
.side .hd h2{margin:4px 48px 6px 0;font-size:28px;font-weight:900;letter-spacing:-.04em;line-height:1.05}
.side .hd p{margin:0;font-size:13.5px;color:var(--ink2);line-height:1.5}
.side .list{flex:1;overflow-y:auto;padding:6px 28px 20px;overscroll-behavior:contain}
.tier{margin-top:16px}
.tier .th{display:flex;align-items:center;gap:10px;margin-bottom:8px;position:sticky;top:0;background:var(--panel);padding:8px 0;z-index:1}
.tier .th b{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--rc)}
.tier .th .ln{flex:1;height:1px;background:linear-gradient(90deg,var(--rc),transparent);opacity:.5}
.tier .th span{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--ink2)}
.tier .items{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.itm{display:flex;align-items:center;gap:10px;padding:7px 10px 7px 7px;border-radius:13px;border:1px solid var(--bd);background:var(--panel2);cursor:pointer;text-align:left;min-width:0;color:var(--ink)}
.itm:hover,.itm.on{border-color:var(--rc);background:color-mix(in srgb,var(--rc) 8%,var(--panel))}
.itm .th2{width:42px;height:42px;flex:none;border-radius:10px;background:radial-gradient(80% 80% at 50% 70%,color-mix(in srgb,var(--rc) 24%,var(--panel)),var(--panel));display:grid;place-items:center;overflow:hidden;position:relative}
.itm .th2 img{width:40px;height:40px;object-fit:contain}
.itm .th2 .cs{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;font-weight:900;font-size:12px}
.itm .t{min-width:0;flex:1}
.itm .t b{display:block;font-size:13px;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.itm .t small{display:flex;gap:6px;font-size:11.5px;color:var(--mut);font-weight:600;margin-top:2px;white-space:nowrap}
.itm .t small .p{font-family:var(--mono);color:var(--ink2);font-weight:700}
.itm .own{position:absolute;right:2px;bottom:2px;width:12px;height:12px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 2px var(--panel)}
.side .ft{padding:14px 28px 18px;border-top:1px solid var(--bd);display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--panel)}
.side .ft .note{flex:1 1 220px;font-size:12.5px;color:var(--mut);line-height:1.45;margin:0}
.side .ft .btn.pri{background:var(--a,var(--ac));border-color:var(--a,var(--ac))}
.gate .box{display:block;width:min(440px,100%);height:auto;padding:26px}
.gate h2{margin:0 0 10px;font-size:22px;font-weight:900;letter-spacing:-.03em}
.gate p{margin:0 0 18px;color:var(--ink2);font-size:14.5px;line-height:1.55}
.gate .acts{display:flex;gap:10px;flex-wrap:wrap}
.gate .acts .btn{flex:1 1 160px}
/* ===== opening room ===== */
.room{position:fixed;inset:0;z-index:110;display:flex;flex-direction:column;background:#0A0C12;color:#F3F6FC;--a:#4C82FF}
.room::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.9}
.room.art-anime{--a:#FF6A4D;background:#1A1210}
.room.art-anime::before{background:radial-gradient(circle at 50% 100%,transparent 9px,rgba(255,106,77,.10) 10px,rgba(255,106,77,.10) 11px,transparent 12px,transparent 17px,rgba(255,106,77,.10) 18px,rgba(255,106,77,.10) 19px,transparent 20px) 0 0/40px 20px;mask-image:linear-gradient(to top,#000,transparent 60%);-webkit-mask-image:linear-gradient(to top,#000,transparent 60%)}
.room.art-halloween{--a:#F08A24;background:#150F19}
.room.art-halloween::before{background:repeating-linear-gradient(135deg,rgba(240,138,36,.07) 0 1px,transparent 1px 11px);mask-image:radial-gradient(90% 70% at 50% 100%,#000 20%,transparent 80%);-webkit-mask-image:radial-gradient(90% 70% at 50% 100%,#000 20%,transparent 80%)}
.room.art-wardrobe::before,.room.art-cosmetic::before{background-image:linear-gradient(rgba(120,160,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(120,160,255,.06) 1px,transparent 1px);background-size:28px 28px;mask-image:linear-gradient(to top,#000,transparent 70%);-webkit-mask-image:linear-gradient(to top,#000,transparent 70%)}
.room.art-inferno{--a:#FF5A1F;background:radial-gradient(90% 50% at 50% 115%,rgba(255,84,20,.38),rgba(140,24,8,.16) 45%,transparent 75%),#0E0908}
.room.art-inferno::before{background:radial-gradient(1.5px 1.5px at 14% 78%,rgba(255,150,60,.9),transparent),radial-gradient(1px 1px at 28% 52%,rgba(255,120,40,.7),transparent),radial-gradient(2px 2px at 46% 70%,rgba(255,170,80,.8),transparent),radial-gradient(1px 1px at 62% 34%,rgba(255,110,40,.55),transparent),radial-gradient(1.5px 1.5px at 78% 60%,rgba(255,150,60,.75),transparent),radial-gradient(1px 1px at 90% 24%,rgba(255,120,40,.45),transparent),radial-gradient(1px 1px at 38% 16%,rgba(255,140,60,.4),transparent) 0 0/220px 240px,url("data:image/svg+xml;utf8,") 0 100%/260px 170px repeat-x;opacity:.75;mask-image:linear-gradient(to top,#000 10%,transparent 85%);-webkit-mask-image:linear-gradient(to top,#000 10%,transparent 85%)}
.room.art-pirates{--a:#E8B04A;background:radial-gradient(40% 40% at 14% 6%,rgba(255,226,160,.12),transparent 70%),radial-gradient(90% 50% at 50% 115%,rgba(38,164,174,.26),rgba(10,70,96,.12) 45%,transparent 75%),#06121E}
.room.art-pirates::before{background:url("data:image/svg+xml;utf8,") 0 100%/240px 76px repeat-x;opacity:.7;mask-image:linear-gradient(to top,#000 10%,transparent 60%);-webkit-mask-image:linear-gradient(to top,#000 10%,transparent 60%)}
.room.art-cyber{--a:#FF3DB8;background:radial-gradient(80% 46% at 50% 108%,rgba(255,61,184,.30),rgba(120,24,170,.14) 48%,transparent 76%),radial-gradient(40% 40% at 12% 4%,rgba(34,230,255,.10),transparent 70%),#07061A}
.room.art-cyber::before{background:url("data:image/svg+xml;utf8,") 0 100%/100% 150px no-repeat,url("data:image/svg+xml;utf8,") 0 calc(100% - 149px)/320px 92px repeat-x;opacity:.55;mask-image:linear-gradient(to top,#000 20%,transparent 75%);-webkit-mask-image:linear-gradient(to top,#000 20%,transparent 75%)}
.room.art-space{--a:#8B7DFF;background:radial-gradient(70% 60% at 20% 100%,rgba(123,108,255,.22),transparent 70%),radial-gradient(50% 50% at 90% 0%,rgba(56,189,248,.10),transparent 70%),#070A1A}
.room.art-space::before{background:radial-gradient(1px 1px at 12% 22%,rgba(220,224,255,.6),transparent),radial-gradient(1px 1px at 58% 30%,rgba(220,224,255,.45),transparent),radial-gradient(1.5px 1.5px at 80% 70%,rgba(220,224,255,.5),transparent),radial-gradient(1px 1px at 30% 80%,rgba(220,224,255,.4),transparent);background-size:260px 220px;opacity:.8}
.room .bar{position:relative;z-index:3;display:flex;align-items:center;gap:10px;padding:16px 24px}
.room .bar .t{min-width:0;margin-right:auto}
.room .bar .t small{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(243,246,252,.55);font-weight:700}
.room .bar .t b{display:block;font-size:18px;font-weight:800;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.room .ib{width:40px;height:40px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#F3F6FC;display:grid;place-items:center;cursor:pointer;flex:none}
.room .ib:hover{border-color:var(--a)}
.room .ib[aria-pressed="true"]{background:rgba(255,255,255,.12)}
.room .main{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0}
.reel{position:relative;height:216px;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.track{position:absolute;left:0;top:18px;display:flex;gap:12px;will-change:transform}
.tile{flex:none;width:156px;height:180px;border-radius:18px;position:relative;overflow:hidden;background:linear-gradient(to top,color-mix(in srgb,var(--rc) 30%,#12151D),#161A23 70%);border:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 10px 14px;gap:6px}
.tile::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--rc);box-shadow:0 0 16px 2px var(--rc)}
.tile img{position:absolute;left:50%;top:16px;width:108px;height:108px;transform:translateX(-50%);object-fit:contain;filter:drop-shadow(0 10px 14px rgba(0,0,0,.45))}
.tile .cs{position:absolute;left:50%;top:30px;transform:translateX(-50%);width:70px;height:70px;border-radius:18px;display:grid;place-items:center;font-weight:900;font-size:22px;background:#fff}
.tile b{position:relative;font-size:13px;font-weight:700;text-align:center;line-height:1.2;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:rgba(243,246,252,.92)}
.tile.win{border-color:var(--rc)}
.mark{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--a);z-index:2;box-shadow:0 0 14px var(--a)}
.mark::before,.mark::after{content:"";position:absolute;left:50%;margin-left:-7px;border-left:7px solid transparent;border-right:7px solid transparent}
.mark::before{top:0;border-top:10px solid var(--a)}
.mark::after{bottom:0;border-bottom:10px solid var(--a)}
.room .under{display:flex;justify-content:center;gap:10px;padding:22px 16px 0;min-height:66px}
.room .under .hint{font-size:13px;color:rgba(243,246,252,.55);font-weight:600;align-self:center}
.room .btn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#F3F6FC}
.room .btn:hover{border-color:var(--a);color:#fff}
.room .btn.pri{background:var(--a);border-color:var(--a);color:#fff}
.room .btn.pri:hover{filter:brightness(1.08)}
.reveal{position:absolute;inset:0;z-index:3;display:grid;grid-template-columns:minmax(0,620px) minmax(0,440px);justify-content:center;column-gap:32px;align-items:stretch;opacity:0;pointer-events:none;transition:opacity .45s ease}
.reveal.on{opacity:1;pointer-events:auto}
.reveal .flash{position:absolute;inset:0;pointer-events:none;background:radial-gradient(50% 55% at 38% 52%,var(--rc),transparent 70%);opacity:0}
.reveal.on .flash{animation:flash 1.1s ease-out forwards}
.reveal.r-legendary.on .flash,.reveal.r-mythic.on .flash{animation-duration:1.6s}
@keyframes flash{0%{opacity:0}18%{opacity:.55}100%{opacity:.12}}
.reveal .st{position:relative;min-height:0}
.reveal .st canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;cursor:grab}
.reveal .st .flat{position:absolute;inset:0;margin:auto;width:52%;max-width:300px;max-height:60%;object-fit:contain}
.reveal .st .ring{position:absolute;left:50%;bottom:10%;width:260px;height:40px;transform:translateX(-50%);border-radius:50%;border:1px solid var(--rc);opacity:.5;box-shadow:0 0 40px 6px color-mix(in srgb,var(--rc) 40%,transparent)}
.reveal .info{position:relative;display:flex;flex-direction:column;justify-content:center;gap:16px;padding:24px 24px 40px 0}
.reveal .rl{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--rc);display:flex;align-items:center;gap:10px}
.reveal .rl::before{content:"";width:28px;height:2px;background:var(--rc)}
.reveal h2{margin:0;font-size:clamp(30px,4vw,48px);font-weight:900;letter-spacing:-.045em;line-height:1}
.reveal .sub{margin:0;font-size:15px;color:rgba(243,246,252,.7);line-height:1.5}
.reveal .sub b{color:#F3F6FC}
.reveal .dupe{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);font-size:14px;line-height:1.45;color:rgba(243,246,252,.85)}
.reveal .dupe img{width:18px;height:18px;margin-top:1px}
.reveal .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.reveal .acts .btn.pri{flex:1 1 150px}
.reveal .meta{display:flex;gap:18px;font-size:12.5px;color:rgba(243,246,252,.55);font-weight:600}
.reveal .meta b{color:rgba(243,246,252,.9);font-family:var(--mono)}
.e2-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:200;max-width:calc(100% - 32px);padding:12px 16px;border-radius:12px;background:var(--ink);color:var(--bg);font-weight:700;font-size:14px;box-shadow:var(--shadow-lg)}
.e2-toast.err{background:#B42318;color:#fff}
.e2-toast.ok{background:#146C43;color:#fff}
@media (max-width:980px){
.sheet{padding:0;align-items:stretch}
.sheet .box{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);height:100%;border-radius:0}
.sheet .stage.art{height:min(40vh,320px)}
.gate{padding:16px;align-items:center}
.gate .box{height:auto;border-radius:22px}
.reveal{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;column-gap:0}
.reveal .info{padding:0 20px 24px;gap:12px}
}
@media (max-width:860px){ .tabs{display:none} }
@media (max-width:720px){
.head{grid-template-columns:minmax(0,1fr);gap:18px}
.facts{grid-template-columns:minmax(0,1fr)}
.facts div{border-left:0;border-top:1px solid var(--bd)}
.facts div:first-child{border-top:0}
}
@media (max-width:560px){
.top nav{padding:10px 16px;gap:10px}
.brand span{display:none}
.me span:last-child{display:none}
.me{padding:0 5px}
.wrap{padding:22px 16px 48px}
.head h1{font-size:40px}
.head p{font-size:15px}
.wallet{padding:12px 12px 12px 14px}
.wallet .v b{font-size:21px}
.wallet .btn{margin-left:auto}
.shelf{gap:14px}
.art{height:200px}
.art .hero .h0{height:180px}
.art .hero .h1,.art .hero .h2{height:120px}
.art .hero .h1{left:calc(50% - 150px)}
.art .hero .h2{left:calc(50% + 34px)}
.case .body{padding:16px}
.case .foot{flex-wrap:wrap}
.case .foot .btn{flex:1 1 0}
.case .price{flex:1 1 100%;margin-bottom:2px}
.side .hd{padding:18px 18px 12px}
.side .hd h2{font-size:23px}
.side .list{padding:4px 18px 16px}
.tier .items{grid-template-columns:minmax(0,1fr)}
.side .ft{padding:12px 18px 16px}
.side .ft .btn{flex:1 1 100%}
.room .bar{padding:12px 16px}
.reel{height:180px}
.track{top:14px}
.tile{width:124px;height:150px;border-radius:16px}
.tile img{width:84px;height:84px;top:12px}
.reveal .acts .btn{flex:1 1 100%}
.drop{grid-template-columns:44px minmax(0,1fr);padding:10px 14px}
.drop .th{width:44px;height:44px}
.drop .w{display:none}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{transition:none!important;animation:none!important}
.reveal.on .flash{opacity:.18}
}