:root{
  --bg:#05070c; --bg2:#0a0e1a; --panel:#0f1524; --panel2:#151c2f; --line:#1e2940; --line2:#2b3a57;
  --text:#eef3fb; --text2:#b4c1d6; --muted:#7b8aa3;
  --cyan:#49b6ff; --violet:#8b5cf6; --pink:#ff5fa8; --good:#4fd08a; --warn:#ffc857; --bad:#ff6b81;
  --accent:linear-gradient(135deg,var(--cyan),var(--violet) 60%,var(--pink));
  --font:"Anuphan","Segoe UI",Tahoma,sans-serif; --display:"Chakra Petch","Anuphan",sans-serif;
  --r:16px; color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:radial-gradient(120% 60% at 50% -10%,#1a2448 0%,var(--bg2) 45%,var(--bg) 100%) fixed,var(--bg);
  color:var(--text);font:16px/1.6 var(--font);overflow-x:hidden}
body.locked{overflow:hidden}
a{color:inherit}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
select,option,optgroup{background:var(--panel);color:var(--text)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
mark{background:rgba(255,200,87,.3);color:inherit;border-radius:3px;padding:0 2px}
.ic{width:20px;height:20px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.skip{position:absolute;left:-999px;top:8px;z-index:99;padding:8px 14px;border-radius:10px;background:var(--cyan);color:#081022}
.skip:focus{left:8px}

/* ---------- top bar ---------- */
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;padding:10px max(16px,calc((100% - 1280px)/2));
  background:rgba(5,7,12,.84);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto}
.brand img{height:38px;width:auto}
.brand .word{height:18px}
.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav a,.morebtn{padding:8px 10px;border-radius:10px;white-space:nowrap;text-decoration:none;color:var(--text2);font:600 14.5px var(--display);letter-spacing:.02em;border:0;background:none;cursor:pointer}
.nav a:hover,.morebtn:hover{color:var(--text);background:rgba(255,255,255,.05)}
.nav > a.on{color:#081022;background:var(--accent)}
.morewrap{position:relative}
.more{position:absolute;right:0;top:calc(100% + 8px);min-width:220px;display:flex;flex-direction:column;padding:6px;border-radius:14px;background:var(--bg2);border:1px solid var(--line2);box-shadow:0 18px 40px rgba(0,0,0,.55)}
.more[hidden]{display:none}
.more a{padding:9px 12px}
.more a.on{color:var(--cyan)}
.iconbtn{display:flex;align-items:center;justify-content:center;height:40px;min-width:40px;padding:0 10px;border-radius:12px;border:1px solid var(--line2);background:var(--panel);cursor:pointer;font:700 13px var(--display)}
.navbtn{display:none}
.acctbtn{display:flex;align-items:center;height:40px;max-width:170px;padding:0 14px;border-radius:12px;border:1px solid var(--line2);background:var(--panel);text-decoration:none;font:600 14px var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acctbtn.on{border-color:rgba(73,182,255,.5)}
.cartbtn{position:relative;display:flex;align-items:center;justify-content:center;width:42px;height:40px;border-radius:12px;border:1px solid var(--line2);background:var(--panel);cursor:pointer}
.cartbtn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cartbtn span{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:99px;background:var(--pink);color:#fff;font-size:12px;font-weight:700;line-height:20px;text-align:center}
.cartbtn span[hidden]{display:none}
.announce{padding:9px 16px;text-align:center;background:linear-gradient(90deg,rgba(73,182,255,.18),rgba(139,92,246,.18),rgba(255,95,168,.18));border-bottom:1px solid var(--line);font-size:14px}

/* ---------- page ---------- */
.view{flex:1 0 auto;width:100%;max-width:1280px;margin:0 auto;padding:28px 16px 64px}
h1,h2,h3{font-family:var(--display);line-height:1.25;margin:0 0 10px}
h1{font-size:clamp(28px,4.6vw,50px)}
h2{font-size:clamp(21px,2.6vw,26px)}
h3{font-size:18px}
.phead{margin-bottom:18px}
.sub{color:var(--text2);margin:0 0 20px;max-width:780px}
.center{text-align:center}
.pre{white-space:pre-wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;border-radius:12px;border:1px solid var(--line2);background:var(--panel2);
  font:600 15px var(--display);text-decoration:none;cursor:pointer;color:var(--text);white-space:nowrap;transition:border-color .15s,transform .15s}
.btn:hover{border-color:#3b4f74}
.btn:active{transform:translateY(1px)}
.btn.primary{border:0;background:var(--accent);color:#081022}
.btn.small{height:34px;padding:0 12px;font-size:13.5px;border-radius:10px}
.btn.big{height:52px;padding:0 26px;font-size:17px}
.btn.ghost{background:none}
.btn.danger{color:var(--bad)}
.btn.on{border-color:var(--cyan);color:var(--cyan)}
.btn:disabled{opacity:.5;cursor:default}
.btn .ic{width:18px;height:18px}
.kicker{display:inline-block;padding:4px 12px;border-radius:99px;border:1px solid var(--line2);color:var(--text2);font-size:12.5px;letter-spacing:.14em;margin-bottom:12px}
.section{margin-top:40px}
.section > header{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.section > header h2{margin:0}
.section > header a{color:var(--cyan);text-decoration:none;font-weight:600}
.empty{padding:56px 16px;text-align:center;color:var(--muted)}
.hint{font-size:13px;color:var(--muted)}
.err{color:var(--bad);font-size:14px}
.okbar{padding:10px 14px;border-radius:12px;background:rgba(79,208,138,.1);border:1px solid rgba(79,208,138,.35);color:#9ef0bf;margin:8px 0}
.appbox{white-space:pre-wrap;margin:8px 0;padding:10px 12px;border-radius:10px;background:rgba(255,200,87,.08);border:1px solid rgba(255,200,87,.25);font-size:14px}
.alertbar{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;margin-bottom:16px;border-radius:14px;background:linear-gradient(135deg,rgba(79,208,138,.16),rgba(73,182,255,.1));border:1px solid rgba(79,208,138,.4)}
.alertbar a{display:block;color:var(--cyan)}
.panel{border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(180deg,var(--panel2),var(--panel));padding:18px;margin-bottom:16px}
.panel.slim{padding:14px 16px}
.panel.muted,.review.muted{opacity:.6}
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.tabs button{height:38px;padding:0 16px;border-radius:10px;border:1px solid var(--line2);background:var(--panel);cursor:pointer;font:600 14px var(--display)}
.tabs button.on{background:var(--accent);color:#081022;border:0}
.f{display:flex;flex-direction:column;gap:5px;margin-bottom:12px;min-width:0}
.f label{font-size:13px;color:var(--muted);font-weight:600}
.f input,.f select,.f textarea{padding:10px 12px;border-radius:10px;border:1px solid var(--line2);background:var(--bg2);min-width:0;width:100%}
.f textarea{min-height:90px;resize:vertical}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 14px}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;color:var(--muted);font-weight:600;padding:8px;border-bottom:1px solid var(--line)}
.tbl td{padding:8px;border-bottom:1px solid rgba(255,255,255,.04);vertical-align:middle}
.tbl img{width:46px;height:auto}
.tokenbox{padding:12px;border-radius:10px;background:#081022;border:1px dashed var(--cyan);font-family:monospace;word-break:break-all}
.login{max-width:400px;margin:30px auto}
.check{display:flex;align-items:flex-start;gap:6px;margin:4px 0 12px;font-size:14px;color:var(--text2)}
.check input{margin-top:4px;accent-color:var(--cyan)}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px}
.lrow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 0;flex-wrap:wrap}
.ownerhead{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.acgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:16px;align-items:start}
.order{border-bottom:1px solid var(--line);padding:12px 0}
.panel.order{border-bottom:1px solid var(--line);padding:14px 18px}
.price{font:700 22px var(--display)}
.order .price.small,.price.small{font-size:17px}
.ordertext{width:100%;min-height:150px;padding:12px;border-radius:12px;border:1px solid var(--line2);background:var(--panel);resize:vertical}
.ordertext.small{min-height:0;white-space:pre-wrap;font:13px/1.5 var(--font);margin:8px 0}
.tag{display:inline-block;align-self:flex-start;padding:2px 10px;border-radius:99px;font-size:12px;font-weight:700;white-space:nowrap}
.tag.in{background:rgba(79,208,138,.15);color:var(--good)} .tag.pre{background:rgba(255,200,87,.15);color:var(--warn)} .tag.out{background:rgba(255,107,129,.15);color:var(--bad)}
.tag.r-none{background:var(--panel2);color:var(--muted)} .tag.r-pending,.tag.o-new{background:rgba(255,200,87,.15);color:var(--warn)}
.tag.r-approved,.tag.o-paid,.tag.o-done{background:rgba(79,208,138,.15);color:var(--good)} .tag.r-rejected,.tag.o-cancelled{background:rgba(255,107,129,.15);color:var(--bad)}
.tag.o-shipped{background:rgba(73,182,255,.15);color:var(--cyan)}
.tag.k-news{background:rgba(73,182,255,.15);color:var(--cyan)} .tag.k-event{background:rgba(255,95,168,.15);color:var(--pink)}
.tag.k-update{background:rgba(139,92,246,.18);color:#c4b2ff} .tag.k-preorder{background:rgba(255,200,87,.15);color:var(--warn)} .tag.k-errata{background:rgba(255,107,129,.15);color:#ffb3bf}
.tag.pin{background:var(--panel2);color:var(--text2)}
.meta{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 12px}
.meta span{padding:3px 10px;border-radius:99px;background:var(--panel2);border:1px solid var(--line);font-size:13px}
.imgpick{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:12px}
.imgpick img{width:110px;height:auto;border-radius:8px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:16px}
.kpi{padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:linear-gradient(180deg,var(--panel2),var(--panel))}
.kpi span{display:block;font-size:12.5px;color:var(--muted)}
.kpi b{font:700 22px var(--display)}
.crumb,.crumbs > a:first-child{color:var(--cyan);text-decoration:none;font-weight:600;display:inline-block;margin-bottom:14px}
.crumbs{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}
.pn{display:flex;gap:8px}
.toc{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 10px}
.toc a{padding:6px 14px;border-radius:99px;border:1px solid var(--line2);background:var(--panel);text-decoration:none;font-size:14px;cursor:pointer}
.toc a:hover{border-color:var(--violet)}
.toc.sticky{position:sticky;top:64px;z-index:5;padding:8px 0;background:linear-gradient(var(--bg2) 70%,transparent)}
.seg{display:inline-flex;padding:3px;border-radius:11px;border:1px solid var(--line2);background:var(--bg2)}
.seg button{height:28px;padding:0 11px;border-radius:8px;border:0;background:none;cursor:pointer;font:600 12.5px var(--display);color:var(--text2)}
.seg button.on{background:var(--panel2);color:var(--text);box-shadow:inset 0 0 0 1px var(--line2)}

/* ---------- search + filters ---------- */
.searchbar{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 14px;margin-bottom:12px;border-radius:14px;border:1px solid var(--line2);background:var(--panel)}
.searchbar .sicon{color:var(--muted)}
.searchbar input{flex:1 1 auto;min-width:0;height:40px;border:0;background:none;outline:none;font-size:16px}
.searchbar select{height:38px;padding:0 10px;border-radius:10px;border:1px solid var(--line2);background:var(--bg2);max-width:46%}
.searchbar.small input{height:34px;font-size:15px}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;align-items:center}
.filters input,.filters select{height:40px;padding:0 10px;border-radius:11px;border:1px solid var(--line2);background:var(--panel);min-width:0}
.filters > input{flex:1 1 220px}
.costrange{display:flex;align-items:center;gap:6px;padding:0 6px 0 12px;height:40px;border-radius:11px;border:1px solid var(--line2);background:var(--panel);font-size:13.5px;color:var(--muted)}
.costrange input{width:64px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--bg2);padding:0 6px}
.costrange i{font-style:normal}
.elrow{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.elbtn{--ec:var(--cyan);display:flex;align-items:center;gap:6px;height:38px;padding:0 12px 0 6px;border-radius:99px;border:1px solid var(--line2);background:var(--panel);cursor:pointer;font:600 13.5px var(--display);color:var(--text2);transition:all .15s}
.elbtn img{width:26px;height:auto;aspect-ratio:124/140;object-fit:contain}
.elbtn small{font-size:11px;color:var(--muted)}
.elbtn.all{padding:0 14px}
.elbtn:hover{border-color:var(--ec)}
.elbtn.on{border-color:var(--ec);color:#fff;background:color-mix(in srgb,var(--ec) 22%,var(--panel));box-shadow:0 0 18px color-mix(in srgb,var(--ec) 35%,transparent)}
.elrow.small .elbtn{padding:0 6px;height:34px}
.count{color:var(--muted);font-size:14px;margin-bottom:12px}

/* ---------- card tiles ---------- */
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:18px 16px}
.cgrid.small{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.ccard{--glow:var(--cyan);position:relative;display:block;text-decoration:none;cursor:pointer}
.cframe{position:relative;border-radius:4.5%/3.2%;overflow:hidden;transition:transform .2s,box-shadow .2s;box-shadow:0 10px 22px rgba(0,0,0,.5)}
.ccard img{width:100%;height:auto;aspect-ratio:744/1040;object-fit:contain}
.ccard:hover .cframe{transform:translateY(-5px);box-shadow:0 16px 30px rgba(0,0,0,.55),0 0 26px color-mix(in srgb,var(--glow) 45%,transparent)}
.ccap{margin-top:8px}
.ccap b{display:block;font-size:14.5px;line-height:1.35}
.ccap span{font-size:12.5px;color:var(--muted)}
.cnum{position:absolute;top:8px;right:8px;z-index:2;padding:2px 9px;border-radius:99px;background:rgba(5,7,12,.88);border:1px solid var(--line2);font:700 13px var(--display);font-style:normal}
.cown{position:absolute;top:8px;left:8px;z-index:2;padding:2px 8px;border-radius:99px;background:rgba(79,208,138,.92);color:#04140b;font:700 11.5px var(--display);font-style:normal}
.cown.none{background:rgba(5,7,12,.82);color:var(--muted);border:1px solid var(--line2)}
.why{display:inline-block;margin-top:4px;padding:1px 8px;border-radius:99px;background:var(--panel2);border:1px solid var(--line);font-size:11.5px;color:var(--text2);font-style:normal}
/* foil: a moving rainbow sheen on the rare cards */
.foil{position:absolute;inset:0;pointer-events:none;mix-blend-mode:color-dodge;opacity:.35;
  background:linear-gradient(115deg,transparent 20%,rgba(255,0,140,.55) 32%,rgba(255,220,0,.5) 42%,rgba(0,255,170,.5) 52%,rgba(0,170,255,.55) 62%,transparent 75%) 0 0/300% 300%;
  animation:foil 5s linear infinite}
@keyframes foil{from{background-position:100% 100%}to{background-position:0 0}}
.ccard.shiny .cframe::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);pointer-events:none}
.elchip{--ec:var(--cyan);display:inline-flex;align-items:center;gap:6px;padding:3px 12px 3px 4px;border-radius:99px;border:1px solid color-mix(in srgb,var(--ec) 55%,transparent);background:color-mix(in srgb,var(--ec) 16%,transparent);font:600 13.5px var(--display)}
.elchip img{width:24px;height:auto;aspect-ratio:124/140;object-fit:contain}
.elchip.small{font-size:12px;padding:2px 10px 2px 3px}
.elchip.small img{width:18px}
.elline{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}

/* Passive tags */
.kwtag{--kc:var(--cyan);position:relative;display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:8px;border:0;background:var(--kc);color:#fff;cursor:pointer;font:700 13px var(--display);letter-spacing:.03em;vertical-align:middle}
.kwtag.art{padding:0;background:none;height:30px}
.kwtag.art img{height:100%;width:auto}
.kwtag.big{height:38px}
.kwtag:hover{filter:brightness(1.15)}
.kwnum{position:absolute;right:-6px;top:-6px;min-width:18px;height:18px;padding:0 4px;border-radius:99px;background:#fff;color:#081022;font:800 11px/18px var(--display);font-style:normal;text-align:center}
.kwrow,.kwstrip{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 12px}
.kwpop{position:absolute;z-index:70;padding:12px 14px;border-radius:14px;background:var(--bg2);border:1px solid var(--line2);box-shadow:0 18px 40px rgba(0,0,0,.6);font-size:14px}
.kwpop p{margin:6px 0 8px;color:var(--text2)}
.kwpop a{color:var(--cyan);text-decoration:none;font-size:13px}
.kwin{color:color-mix(in srgb,var(--kc) 60%,#fff);font-weight:700}
b.num{color:#ffe08a;font-weight:800;padding:0 2px;border-radius:4px;background:rgba(255,200,87,.1)}
.cref{color:var(--cyan);text-decoration:none;border-bottom:1px dashed rgba(73,182,255,.5)}

/* ---------- the card page ---------- */
.cdetail{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:28px;align-items:start}
.cpic{--glow:var(--cyan);position:relative;position:sticky;top:76px}
.cpic img{width:100%;height:auto;border-radius:4.5%/3.2%;cursor:zoom-in;box-shadow:0 22px 50px rgba(0,0,0,.6),0 0 60px color-mix(in srgb,var(--glow) 30%,transparent)}
.cpic .foil{border-radius:4.5%/3.2%;bottom:auto;aspect-ratio:744/1040}
.zoombtn{position:absolute;right:10px;bottom:10px;background:rgba(5,7,12,.85)}
.kickrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.kickrow .kicker{margin:0}
.rar{display:inline-block;padding:3px 10px;border-radius:8px;font:800 12.5px var(--display);background:var(--panel2);border:1px solid var(--line2)}
.rar.r-SR,.rar.r-SSR{background:linear-gradient(135deg,#ffd76a,#ff9f43);color:#2a1600;border:0}
.rar.r-SEC,.rar.r-L,.rar.r-SP{background:var(--accent);color:#081022;border:0}
.rar.r-R{background:rgba(73,182,255,.2);color:var(--cyan)}
.cname{font-size:clamp(28px,4vw,44px);margin:10px 0 2px}
.cstats{display:grid;grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:8px;margin:14px 0}
.cstats div{padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--panel)}
.cstats span{display:block;font-size:12px;color:var(--muted)}
.cstats b{font:700 17px var(--display)}
.tribechip{display:inline-block;padding:4px 12px;border-radius:99px;background:rgba(139,92,246,.14);border:1px solid rgba(139,92,246,.4);color:#d5c8ff;text-decoration:none;font-size:13.5px}
.tribechip:hover{border-color:var(--violet)}
.box{margin-top:16px;padding:16px 18px;border-radius:var(--r);border:1px solid var(--line);background:linear-gradient(180deg,var(--panel2),var(--panel))}
.boxhead{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.box h3{font-size:17px;margin:0}
.efftext{white-space:pre-wrap;color:var(--text);line-height:1.8}
.box.lore{border-color:rgba(139,92,246,.35);background:linear-gradient(160deg,rgba(139,92,246,.14),rgba(15,21,36,.9))}
.loretext{font-style:italic;color:var(--text);line-height:1.85}
.loretext p{margin:0 0 10px}
.artist{margin:10px 0 0;font-size:13.5px;color:var(--muted)}
.artist b{color:var(--text)}
.colbtns{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.colbtns b{min-width:22px;text-align:center;font:700 16px var(--display)}
.colbtns .btn.small{height:32px;padding:0 9px}
.btn.tog.on{border-color:var(--pink);color:var(--pink)}
.inprod{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.inp{display:flex;gap:12px;align-items:center;padding:10px;border-radius:14px;border:1px solid var(--line);background:var(--panel);text-decoration:none}
.inp:hover{border-color:var(--line2)}
.inpic{width:64px;height:64px;flex:0 0 auto;border-radius:10px;background:#0b1020 center/contain no-repeat}
.inp b{display:block}
.errata,.review{padding:14px 16px;margin-bottom:10px;border-radius:14px;border:1px solid var(--line);background:var(--panel)}
.errhead{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:8px}
.errname{font:700 16px var(--display);color:var(--cyan);text-decoration:none}
.errline{display:grid;grid-template-columns:90px minmax(0,max-content) auto minmax(0,1fr);gap:8px;align-items:start;padding:6px 0;border-top:1px solid rgba(255,255,255,.04);font-size:14px}
.errline small{color:var(--muted)}
.errline del{color:#ff9aa9;white-space:pre-wrap}
.errline ins{color:#9ef0bf;text-decoration:none;white-space:pre-wrap}
.errline i{color:var(--muted);font-style:normal}

/* full screen view with a tilt and a shine */
.modal-in.zoom{width:min(560px,100%);background:radial-gradient(80% 70% at 50% 40%,#18213f,var(--bg) 80%)}
.zstage{display:flex;justify-content:center;padding:18px 0;perspective:1100px;touch-action:none}
.zcard{--rx:0deg;--ry:0deg;--mx:50%;--my:50%;--glow:var(--cyan);position:relative;width:min(420px,78vw);border-radius:4.5%/3.2%;transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .08s;
  box-shadow:0 30px 70px rgba(0,0,0,.7),0 0 80px color-mix(in srgb,var(--glow) 40%,transparent);overflow:hidden}
.zcard img{width:100%;height:auto}
.zshine{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.35),transparent 45%);mix-blend-mode:overlay}
.zfoil{position:absolute;inset:0;pointer-events:none;opacity:0}
.zcard.shiny .zfoil{opacity:.55;mix-blend-mode:color-dodge;background:linear-gradient(115deg,transparent 15%,#ff2d95 30%,#ffd400 40%,#29ffb0 50%,#2fb3ff 60%,#b44dff 70%,transparent 85%);
  background-size:250% 250%;background-position:calc(var(--pos) * 1%) 50%;filter:saturate(1.3)}

/* ---------- decks ---------- */
.builder{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,400px);gap:18px;align-items:start}
.poolgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px;max-height:calc(100vh - 230px);overflow:auto;padding:2px 4px 2px 0}
.pcard{position:relative;cursor:pointer;border-radius:6px;transition:transform .12s}
.pcard img{width:100%;height:auto;aspect-ratio:744/1040;border-radius:5px}
.pcard:hover{transform:translateY(-3px)}
.pcount{position:absolute;left:6px;top:6px;padding:1px 8px;border-radius:99px;background:var(--cyan);color:#081022;font:800 13px var(--display);font-style:normal}
.pinfo{position:absolute;right:5px;top:5px;width:24px;height:24px;border-radius:50%;border:1px solid var(--line2);background:rgba(5,7,12,.85);cursor:pointer;font:700 12px var(--display);opacity:0;transition:opacity .15s}
.pcard:hover .pinfo,.pinfo:focus{opacity:1}
.deckside{position:sticky;top:72px;max-height:calc(100vh - 88px);overflow:auto;padding:16px;border-radius:var(--r);border:1px solid var(--line2);background:linear-gradient(180deg,var(--panel2),var(--panel))}
.deckname{width:100%;height:42px;padding:0 12px;border-radius:10px;border:1px solid var(--line2);background:var(--bg2);font:700 18px var(--display);margin-bottom:10px}
.dkpis{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:10px}
.dkpis div{padding:6px 8px;border-radius:10px;background:var(--bg2);border:1px solid var(--line);text-align:center}
.dkpis span{display:block;font-size:11px;color:var(--muted)}
.dkpis b{font:700 16px var(--display)}
.verdict{padding:10px 12px;border-radius:12px;margin-bottom:12px;font-size:13.5px}
.verdict > b{display:block;margin-bottom:4px;font-family:var(--display)}
.verdict.ok{background:rgba(79,208,138,.1);border:1px solid rgba(79,208,138,.4)} .verdict.ok > b{color:#9ef0bf}
.verdict.warn{background:rgba(255,200,87,.08);border:1px solid rgba(255,200,87,.35)} .verdict.warn > b{color:var(--warn)}
.verdict.bad{background:rgba(255,107,129,.08);border:1px solid rgba(255,107,129,.4)} .verdict.bad > b{color:#ff9aa9}
.verdict .warn{color:#ffe1a6}
.dlist{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.dtype{margin:16px 0 8px;color:var(--text2);font:700 14px var(--display);letter-spacing:.03em}
.dlist .dtype{margin:10px 0 2px;font-size:12.5px;color:var(--muted)}
.drow{--ec:var(--cyan);display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:8px;align-items:center;padding:4px 6px;border-radius:10px;background:var(--bg2);border-left:3px solid var(--ec)}
.drow img{width:34px;height:auto;aspect-ratio:744/1040;object-fit:cover;object-position:top;border-radius:3px}
.dn b{display:block;font-size:13.5px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dn span{font-size:11.5px;color:var(--muted)}
.qty{display:flex;align-items:center;gap:6px}
.qty .btn{height:28px;width:28px;padding:0;border-radius:8px}
.qty .btn .ic{width:15px;height:15px}
.qty b{min-width:18px;text-align:center}
.qty.big .btn{height:40px;width:40px}
.qty.big b{min-width:30px;font:700 18px var(--display)}
.deckfab{display:none;position:fixed;right:14px;bottom:14px;z-index:25;height:48px;padding:0 18px;border-radius:99px;border:0;background:var(--accent);color:#081022;font:700 15px var(--display);box-shadow:0 10px 26px rgba(0,0,0,.5);cursor:pointer}
.deckfab.bad{background:linear-gradient(135deg,#ffc857,#ff6b81)}
.dstats{display:flex;flex-direction:column;gap:14px}
.chart > b{display:block;font:700 13px var(--display);color:var(--text2);margin-bottom:6px}
.bars{display:flex;align-items:flex-end;gap:5px;height:120px;padding:4px 0}
.bars.wide{height:150px}
.bar{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:3px;min-width:0}
.bar i{display:block;width:100%;max-width:34px;border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,var(--cyan),var(--violet))}
.bar small{font-size:11px;color:var(--text2)}
.bar span{font-size:11px;color:var(--muted)}
.chart2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.strip{display:flex;height:12px;border-radius:99px;overflow:hidden;background:var(--bg2)}
.legend{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:6px;font-size:12px;color:var(--text2)}
.legend u{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:4px}
.probs{display:flex;flex-direction:column;gap:6px}
.prob{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(60px,1fr) 52px;gap:8px;align-items:center;font-size:12.5px}
.prob span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text2)}
.prob b{text-align:right;font-family:var(--display)}
.ptrack{height:8px;border-radius:99px;background:var(--bg2);overflow:hidden}
.ptrack i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--cyan),var(--violet))}
.modal-in.wide{width:min(1100px,100%)}
.hand{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin:12px 0}
.hcard img{width:100%;height:auto;border-radius:6px;box-shadow:0 8px 18px rgba(0,0,0,.5);animation:deal .35s ease both}
@keyframes deal{from{opacity:0;transform:translateY(-14px) rotate(-3deg)}to{opacity:1;transform:none}}
.dgridx{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.dcard{display:flex;flex-direction:column;border-radius:var(--r);border:1px solid var(--line);background:linear-gradient(180deg,var(--panel2),var(--panel));overflow:hidden;text-decoration:none;transition:transform .15s,border-color .15s}
.dcard:hover{transform:translateY(-3px);border-color:var(--line2)}
.dpic{position:relative;height:150px;background:#0b1020;overflow:hidden}
.dpic img:first-child{width:100%;height:auto;transform:translateY(-12%);opacity:.9}
.dpic .del{position:absolute;bottom:8px;width:26px;height:auto;aspect-ratio:124/140;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.7))}
.dpic .del:nth-of-type(2){left:8px}.dpic .del:nth-of-type(3){left:38px}.dpic .del:nth-of-type(4){left:68px}
.featb{position:absolute;top:8px;left:8px;padding:2px 10px;border-radius:99px;background:var(--accent);color:#081022;font:700 11.5px var(--display);font-style:normal}
.dbody{padding:12px 14px}
.dbody b{display:block;font:700 16px var(--display)}
.dmeta{display:flex;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin-top:4px;align-items:center}
.likes{display:inline-flex;align-items:center;gap:3px;color:var(--pink)}
.likes .ic{width:15px;height:15px}
.likebtn.on{border-color:var(--pink);color:var(--pink)}
.likebtn.on .ic{fill:var(--pink)}
.deckview{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start;margin-top:16px}
.panel.deck header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap}
.dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:12px}
.dgrid .ccap b{font-size:13px}
.mydecks .lrow{border-bottom:1px solid var(--line)}

/* ---------- collection + profile ---------- */
.setbars{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px 18px;margin-bottom:18px}
.setbar{display:grid;grid-template-columns:minmax(60px,auto) minmax(0,1fr) auto;gap:10px;align-items:center;font-size:13.5px}
.coltile{display:flex;flex-direction:column;gap:6px}
.coltile .colbtns{justify-content:center}
.coltile .colbtns .hint{display:none}
.profile{display:flex;gap:18px;align-items:center;margin-bottom:10px}
.avatar{width:84px;height:84px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;border-radius:24px;background:var(--accent) center/cover;color:#081022;font:800 36px var(--display)}
.badges{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.badge{padding:3px 10px;border-radius:99px;background:rgba(139,92,246,.18);border:1px solid rgba(139,92,246,.45);font:700 12.5px var(--display);color:#d5c8ff}
.badge.gold{background:rgba(255,200,87,.15);border-color:rgba(255,200,87,.45);color:var(--warn)}

/* ---------- how to play ---------- */
.rsec{padding-top:24px;margin-top:10px;scroll-margin-top:110px}
.rsec > header{margin-bottom:12px}
.rsec > header h2{margin:0}
.gsec{border:1px solid var(--line);border-radius:14px;background:var(--panel);margin-bottom:8px}
.gsec summary{cursor:pointer;padding:12px 16px;font:700 16px var(--display);list-style:none}
.gsec summary::before{content:"▸ ";color:var(--cyan)}
.gsec[open] summary::before{content:"▾ "}
.gsec .storytext{padding:0 16px 14px}
.steps3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.step{position:relative;display:block;padding:18px 18px 16px 64px;border-radius:var(--r);border:1px solid var(--line);background:linear-gradient(160deg,var(--panel2),var(--panel));text-decoration:none;transition:border-color .15s}
.step:hover{border-color:var(--cyan)}
.step i{position:absolute;left:16px;top:16px;width:36px;height:36px;border-radius:50%;background:var(--accent);color:#081022;font:800 18px/36px var(--display);text-align:center;font-style:normal}
.step b{display:block;font:700 17px var(--display)}
.step p{margin:4px 0 0;color:var(--text2);font-size:14px}
.rsumw{margin-top:14px}
.rsum{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
.rsum div{padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--panel)}
.rsum span{display:block;font-size:12px;color:var(--muted)}
.rsum b{font:700 18px var(--display)}
.rsum small{display:block;font-size:11.5px;color:var(--muted)}
.matwrap{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;align-items:start}
.mat{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line2);user-select:none}
.mat img{width:100%;height:auto;pointer-events:none}
.zone{position:absolute;display:flex;align-items:flex-start;justify-content:flex-start;padding:4px;border:2px solid rgba(73,182,255,.55);background:rgba(73,182,255,.08);border-radius:8px;cursor:pointer;transition:background .15s}
.zone span{padding:1px 7px;border-radius:6px;background:rgba(5,7,12,.85);font:700 12px var(--display);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.zone:hover,.zone.on{background:rgba(73,182,255,.25);border-color:var(--cyan);box-shadow:0 0 20px rgba(73,182,255,.4)}
.zone.ghost{border-style:dashed;pointer-events:none}
.mat.edit{cursor:crosshair}
.matinfo{padding:16px;border-radius:14px;border:1px solid var(--line);background:var(--panel);min-height:120px}
.matinfo > b{font:700 18px var(--display);color:var(--cyan)}
.turn{padding:16px;border-radius:var(--r);border:1px solid var(--line);background:var(--panel)}
.tdots{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.tdots button{width:28px;height:6px;border-radius:99px;border:0;background:var(--line2);cursor:pointer;padding:0}
.tdots button.on{background:var(--cyan)}
.timg{width:100%;max-width:720px;height:auto;border-radius:12px;margin:8px 0}
.kwgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.kwcard{--kc:var(--cyan);display:grid;grid-template-columns:minmax(0,1fr);gap:8px;align-items:start;padding:12px;border-radius:14px;border:1px solid var(--line);background:var(--panel);border-left:3px solid var(--kc);scroll-margin-top:110px}
.kwart{display:flex;align-items:center;justify-content:flex-start;min-height:36px}
.kwart img{height:36px;width:auto;max-width:100%}
.kwart b{padding:6px 10px;border-radius:8px;background:var(--kc);font-family:var(--display)}
.kwcard p{margin:2px 0 4px;font-size:14px;color:var(--text2)}
.kwcard a{font-size:13px;color:var(--cyan);text-decoration:none}
.glossary{display:grid;grid-template-columns:minmax(120px,200px) minmax(0,1fr);gap:0;margin:0;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.glossary dt,.glossary dd{padding:10px 14px;border-bottom:1px solid var(--line);margin:0}
.glossary dt{font:700 15px var(--display);background:var(--panel2)}
.glossary dd{background:var(--panel)}
.glossary dd p{margin:0}
.ruling{border:1px solid var(--line);border-radius:14px;background:var(--panel);margin-bottom:8px;padding:0 14px}
.ruling summary{display:flex;gap:10px;align-items:flex-start;padding:12px 0;cursor:pointer;font-weight:600;list-style:none}
.ruling summary::-webkit-details-marker{display:none}
.ra{display:flex;gap:10px;padding-bottom:10px}
.rq{flex:0 0 auto;width:26px;height:26px;border-radius:8px;background:var(--cyan);color:#081022;font:800 14px/26px var(--display);text-align:center}
.rq.a{background:var(--good)}
.files{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.file{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--panel);text-decoration:none}
.file:hover{border-color:var(--cyan)}
.file b{display:block}

/* ---------- events ---------- */
.egrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.ecard{display:flex;gap:14px;align-items:flex-start;padding:14px;border-radius:var(--r);border:1px solid var(--line);background:linear-gradient(180deg,var(--panel2),var(--panel));text-decoration:none;transition:border-color .15s}
.ecard:hover{border-color:var(--pink)}
.edate{flex:0 0 58px;padding:8px 0;border-radius:12px;background:var(--bg2);border:1px solid var(--line2);text-align:center}
.edate b{display:block;font:800 24px/1 var(--display)}
.edate span{font-size:12px;color:var(--pink)}
.ebody h3{margin:6px 0 2px;font-size:17px}
.calgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.calh{text-align:center;font-size:12px;color:var(--muted);padding:4px 0}
.calc{min-height:78px;padding:4px 6px;border-radius:10px;background:var(--panel);border:1px solid var(--line);font-size:12px;overflow:hidden}
.calc.blank{background:none;border:0}
.calc.today{border-color:var(--cyan)}
.calc > span{color:var(--muted)}
.calev{display:block;margin-top:3px;padding:2px 6px;border-radius:6px;background:rgba(255,95,168,.18);color:#ffc2dd;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.evdetail{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px;align-items:start}
.evdetail aside{position:sticky;top:76px}
.regbox{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.standings tr.top1 td{color:#ffe08a;font-weight:700}
.standings tr.top2 td,.standings tr.top3 td{font-weight:600}
.winners{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.winner{display:flex;gap:12px;align-items:center;padding:12px;border-radius:14px;border:1px solid var(--line);background:var(--panel)}
.wrank{font:800 26px var(--display);background:var(--accent);-webkit-background-clip:text;background-clip:text;color:transparent}
.winner .hint{display:block}

/* ---------- shop ---------- */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.prod{display:flex;flex-direction:column;border-radius:var(--r);border:1px solid var(--line);background:linear-gradient(180deg,var(--panel2),var(--panel));overflow:hidden}
.prod .pic{position:relative;display:block;aspect-ratio:4/3;background:#0b1020 center/contain no-repeat;border-bottom:1px solid var(--line)}
.pkind{position:absolute;left:10px;top:10px;padding:2px 10px;border-radius:99px;background:rgba(5,7,12,.85);border:1px solid var(--line2);font:700 12px var(--display);font-style:normal}
.prod .body{display:flex;flex-direction:column;gap:6px;padding:14px 16px 16px;flex:1}
.ptitle{font:700 18px var(--display);text-decoration:none}
.prod p{margin:0;color:var(--text2);font-size:14px;flex:1}
.prod .row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px;flex-wrap:wrap}
.stars{color:var(--warn);letter-spacing:1px}
.stars i{font-style:normal;color:var(--line2)}
.stars i.on{color:var(--warn)}
.starsline{display:flex;gap:8px;align-items:center;margin:4px 0}
.countdown{margin:8px 0}
.countdown .cdl{display:block;font-size:12.5px;color:var(--muted);margin-bottom:4px}
.cdrow{display:flex;gap:6px}
.cdrow div{min-width:52px;padding:6px 4px;border-radius:10px;background:var(--bg2);border:1px solid var(--line2);text-align:center}
.cdrow b{display:block;font:800 20px/1.1 var(--display)}
.cdrow span{font-size:11px;color:var(--muted)}
.countdown.done .cdrow{opacity:.5}
.shophelp{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;margin:22px 0}
.helpcard{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:var(--panel);text-decoration:none}
.helpcard:hover{border-color:var(--cyan)}
.helpcard .ic{width:28px;height:28px;color:var(--cyan)}
.helpcard b{display:block}
.helpcard span{font-size:13px;color:var(--muted)}
.pdetail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}
.gmain{aspect-ratio:1/1;border-radius:var(--r);border:1px solid var(--line);background:#0b1020 center/contain no-repeat}
.gthumbs{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.gthumbs button{width:64px;height:64px;border-radius:10px;border:1px solid var(--line2);background:#0b1020 center/cover no-repeat;cursor:pointer}
.gthumbs button.on{border-color:var(--cyan)}
.pprice{display:flex;gap:10px;align-items:baseline;margin:8px 0}
.rates{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 10px}
.rates div{display:flex;gap:8px;align-items:center;padding:6px 10px;border-radius:10px;background:var(--panel);border:1px solid var(--line);font-size:13.5px}
.starpick{display:flex;gap:2px;margin:6px 0}
.starpick button{border:0;background:none;font-size:26px;cursor:pointer;color:var(--line2);padding:0 2px}
.starpick button.on{color:var(--warn)}
.drawer,.modal{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.62)}
.drawer-in{position:absolute;top:0;right:0;bottom:0;width:min(440px,100%);display:flex;flex-direction:column;gap:12px;padding:18px;background:var(--bg2);border-left:1px solid var(--line2);overflow:auto}
.drawhead{display:flex;justify-content:space-between;align-items:center}
.drawhead h2{margin:0}
.modal{display:flex;align-items:center;justify-content:center;padding:16px}
.modal[hidden],.drawer[hidden]{display:none}
.modal-in{width:min(900px,100%);max-height:92vh;overflow:auto;padding:22px;border-radius:18px;background:var(--bg2);border:1px solid var(--line2)}
.modal-in.popup{max-width:620px}
.close{float:right}
.citem{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--panel)}
.cipic{width:64px;height:64px;border-radius:10px;background:#0b1020 center/contain no-repeat}
.citem .qty{margin-top:6px}
.coupon{display:flex;gap:8px}
.coupon input{flex:1;min-width:0;height:36px;padding:0 10px;border-radius:10px;border:1px solid var(--line2);background:var(--panel);text-transform:uppercase}
.sum{padding:10px 0;border-top:1px solid var(--line)}
.sum .lrow{padding:3px 0}
.sum .good b{color:var(--good)}
.sum .total b{font:700 22px var(--display)}
.osteps{padding-left:20px;color:var(--text2)}
.ppqr{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding:14px;margin:10px 0;border-radius:14px;border:1px solid rgba(73,182,255,.4);background:rgba(73,182,255,.06)}
.qrimg{width:200px;height:200px;padding:6px;border-radius:12px;background:#fff}
.qrimg svg{width:100%;height:100%;display:block}
.slipbox{display:flex;flex-direction:column;gap:6px;padding:12px 14px;margin:10px 0;border-radius:14px;border:1px dashed var(--line2)}
.slipbox.ok{border-color:var(--good)}
.slipimg{max-width:320px;border-radius:10px;margin:8px 0}
.tracking{display:flex;gap:10px;align-items:center;margin:8px 0;padding:10px 12px;border-radius:12px;background:rgba(73,182,255,.08);border:1px solid rgba(73,182,255,.3)}
.tracking a{display:block;color:var(--cyan);text-decoration:none;font-size:13.5px}
.otl{display:flex;gap:4px;align-items:flex-start;margin:10px 0;flex-wrap:wrap}
.otl div{flex:1 1 0;min-width:64px;text-align:center;font-size:11.5px;color:var(--muted)}
.otl div i{display:block;height:5px;border-radius:99px;background:var(--line2);margin-bottom:4px}
.otl div.on{color:var(--text)}
.otl div.on i{background:linear-gradient(90deg,var(--cyan),var(--violet))}
.otl.cancelled div i{background:var(--line2)}
.trackbox{max-width:640px}
.shopgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.shopcard{padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:var(--panel)}
.shopcard b{font:700 16px var(--display)}
.shopcard p{margin:4px 0}
.tiers{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-bottom:20px}
.tier{padding:18px;border-radius:var(--r);border:1px solid var(--line2);background:linear-gradient(160deg,var(--panel2),var(--panel))}
.tier b{display:block;font:800 30px var(--display)}
.tier.t1{border-color:rgba(73,182,255,.5)} .tier.t2{border-color:rgba(255,200,87,.6)}

/* ---------- home ---------- */
.hero2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:center;padding:10px 0 26px}
.herotext h1{font-size:clamp(34px,5.6vw,64px);background:linear-gradient(180deg,#fff,#c9d6ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.herostage{position:relative;height:clamp(300px,38vw,470px)}
.herostage .emb{position:absolute;left:50%;top:50%;width:min(80%,420px);transform:translate(-50%,-50%);opacity:.95;filter:drop-shadow(0 20px 60px rgba(73,182,255,.35));animation:spin 60s linear infinite}
.herostage.has .emb{opacity:.35;width:min(95%,480px)}
@keyframes spin{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
.float{--glow:var(--cyan);position:absolute;width:clamp(120px,15vw,190px);border-radius:4.5%/3.2%;overflow:hidden;box-shadow:0 24px 50px rgba(0,0,0,.6),0 0 46px color-mix(in srgb,var(--glow) 55%,transparent);transition:transform .25s}
.float img{width:100%;height:auto}
.float.f0{left:50%;top:50%;z-index:3;transform:translate(-50%,-50%);animation:bob 6s ease-in-out infinite}
.float.f1{left:6%;top:16%;z-index:2;transform:rotate(-12deg);animation:bob1 7s ease-in-out infinite}
.float.f2{right:6%;top:22%;z-index:2;transform:rotate(11deg);animation:bob2 8s ease-in-out infinite}
.float:hover{z-index:4}
@keyframes bob{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,-56%)}}
@keyframes bob1{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(-9deg) translateY(-10px)}}
@keyframes bob2{0%,100%{transform:rotate(11deg)}50%{transform:rotate(8deg) translateY(-12px)}}
.hero2 .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.stats{display:flex;gap:26px;margin-top:24px;flex-wrap:wrap}
.stats div{display:flex;flex-direction:column}
.stats b{font:700 28px var(--display);background:var(--accent);-webkit-background-clip:text;background-clip:text;color:transparent}
.stats span{font-size:13px;color:var(--muted)}
.cdbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:14px 18px;border-radius:var(--r);text-decoration:none;
  border:1px solid rgba(255,200,87,.4);background:linear-gradient(110deg,rgba(255,200,87,.14),rgba(255,95,168,.1) 60%,rgba(139,92,246,.12))}
.cdbar .kicker{margin:0 10px 0 0}
.cdbar b{font:700 18px var(--display)}
.cdbar .countdown{margin:0}
.spot{--glow:var(--cyan);display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:28px;align-items:center;padding:24px;border-radius:22px;border:1px solid var(--line2);
  background:radial-gradient(60% 90% at 15% 50%,color-mix(in srgb,var(--glow) 22%,transparent),transparent 70%),linear-gradient(180deg,var(--panel2),var(--panel))}
.spotpic{position:relative;display:block;border-radius:4.5%/3.2%;overflow:hidden;box-shadow:0 24px 50px rgba(0,0,0,.6),0 0 50px color-mix(in srgb,var(--glow) 45%,transparent);transform:rotate(-2deg);transition:transform .25s}
.spotpic:hover{transform:rotate(0) scale(1.02)}
.spotpic img{width:100%;height:auto}
.spottext h2{font-size:clamp(26px,3.4vw,38px)}
.spottext .efftext{margin:10px 0;padding:12px 14px;border-radius:12px;background:rgba(5,7,12,.45);border:1px solid var(--line)}
.elgrid{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:10px}
.eltile{--ec:var(--cyan);display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 6px 12px;border-radius:16px;text-decoration:none;border:1px solid color-mix(in srgb,var(--ec) 30%,var(--line));
  background:radial-gradient(80% 70% at 50% 25%,color-mix(in srgb,var(--ec) 24%,transparent),transparent 75%),var(--panel);transition:transform .2s,box-shadow .2s}
.eltile:hover{transform:translateY(-4px);box-shadow:0 0 30px color-mix(in srgb,var(--ec) 40%,transparent)}
.eltile img{width:44px;height:auto;aspect-ratio:124/140;object-fit:contain;filter:drop-shadow(0 4px 10px color-mix(in srgb,var(--ec) 60%,transparent))}
.eltile b{font:700 14px var(--display);text-align:center;line-height:1.2;word-break:break-word}
.eltile span{font-size:11.5px;color:var(--muted)}
.ngrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.ngrid.feat{grid-template-columns:repeat(3,minmax(0,1fr))}
.ngrid.feat .ncard.big{grid-column:span 2;grid-row:span 2}
.ncard{display:flex;flex-direction:column;border-radius:var(--r);border:1px solid var(--line);background:linear-gradient(180deg,var(--panel2),var(--panel));overflow:hidden;text-decoration:none;transition:border-color .15s,transform .15s}
.ncard:hover{border-color:#3b4f74;transform:translateY(-2px)}
.npic{aspect-ratio:16/9;background:#0b1020 center/cover no-repeat}
.ncard.big .npic{flex:1;min-height:220px}
.npic.none{background:radial-gradient(80% 90% at 30% 20%,rgba(73,182,255,.25),transparent 60%),radial-gradient(80% 90% at 80% 80%,rgba(255,95,168,.2),transparent 60%),#0b1020}
.nbody{padding:14px 16px 16px}
.nbody h3{font-size:18px;margin:6px 0}
.ncard.big h3{font-size:24px}
.nbody p{margin:0;color:var(--text2);font-size:14px}
.nmeta{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.newsfull{max-width:820px}
.nimg{width:100%;height:auto;border-radius:14px;margin:14px 0}
.starter{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:24px;align-items:center;padding:22px;border-radius:22px;border:1px solid rgba(79,208,138,.35);
  background:radial-gradient(70% 90% at 0% 50%,rgba(79,208,138,.14),transparent 70%),linear-gradient(180deg,var(--panel2),var(--panel))}
.spic{display:block;aspect-ratio:4/3;border-radius:16px;background:#0b1020 center/contain no-repeat}
.starter .price{margin-right:8px}
.discordcta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:24px;border-radius:var(--r);border:1px solid var(--line2);
  background:linear-gradient(135deg,rgba(88,101,242,.24),rgba(139,92,246,.12))}
.discordcta .sub{margin:0}

/* ---------- the world ---------- */
.storyintro{max-width:880px;font-size:18px;line-height:1.9;color:var(--text)}
.chapter{max-width:880px;margin:40px 0;padding-top:10px;border-top:1px solid var(--line);scroll-margin-top:80px}
.chimg{width:100%;height:auto;border-radius:16px;margin-bottom:16px}
.storytext{line-height:1.9;color:var(--text2)}
.storytext h3{color:var(--text);margin:22px 0 8px}
.storytext h4{color:var(--text);margin:18px 0 6px}
.storytext p{margin:0 0 12px}
.wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.wcard{border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(180deg,var(--panel2),var(--panel));padding:14px 16px;scroll-margin-top:90px}
.wcard summary{display:flex;gap:12px;align-items:center;cursor:pointer;list-style:none}
.wcard summary::-webkit-details-marker{display:none}
.wcard summary img{width:64px;height:64px;object-fit:cover;border-radius:12px;flex:0 0 auto}
.wcard summary h3{margin:0}
.wcard summary p{margin:2px 0 0}
.wcard[open]{border-color:rgba(139,92,246,.45)}
.wcard .storytext{margin-top:10px}
.wcard > a{color:var(--cyan);text-decoration:none;font-size:14px}
.timeline{position:relative;max-width:880px;padding-left:22px;border-left:2px solid var(--line2)}
.tlitem{position:relative;display:grid;grid-template-columns:120px 1fr;gap:14px;margin-bottom:22px}
.tlitem::before{content:"";position:absolute;left:-29px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--accent)}
.tlera{font:700 14px var(--display);color:var(--cyan)}
.tlitem h3{margin:0 0 4px}
.section[id]{scroll-margin-top:80px}
.relwrap{border:1px solid var(--line);border-radius:var(--r);background:radial-gradient(70% 70% at 50% 50%,rgba(139,92,246,.1),transparent),var(--panel);overflow:auto}
.relgraph{width:100%;min-width:620px;height:auto;display:block}
.relgraph .rel{stroke:rgba(180,193,214,.28);stroke-width:1.5}
.relgraph .rell{fill:var(--muted);font:11px var(--font);text-anchor:middle}
.relgraph .ring{fill:none;stroke:var(--cyan);stroke-width:2}
.relgraph .tribe .ring{stroke:var(--violet)}
.relgraph .dot{fill:var(--panel2);stroke:var(--cyan);stroke-width:2}
.relgraph .tribe .dot{stroke:var(--violet)}
.relgraph .nodel{fill:var(--text);font:600 13px var(--display);text-anchor:middle;paint-order:stroke;stroke:var(--bg);stroke-width:4px}
.relgraph .node{cursor:pointer}
.relgraph .node:hover .ring,.relgraph .node:hover .dot{stroke:#fff}
.wmap{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;align-items:start}
.wmapstage{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line2)}
.wmapstage img{width:100%;height:auto}
.wmapstage.edit{cursor:crosshair}
.wpin{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;border:0;background:none;cursor:pointer;padding:0}
.wpin::after{content:"";width:14px;height:14px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--pink);box-shadow:0 0 0 3px rgba(5,7,12,.7),0 0 14px var(--pink)}
.wpin.tribe::after{background:var(--violet);box-shadow:0 0 0 3px rgba(5,7,12,.7),0 0 14px var(--violet)}
.wpin.character::after{background:var(--cyan);box-shadow:0 0 0 3px rgba(5,7,12,.7),0 0 14px var(--cyan)}
.wpin span{margin-bottom:4px;padding:1px 8px;border-radius:6px;background:rgba(5,7,12,.85);font:700 12px var(--display);white-space:nowrap}
.wpin.on span{background:var(--accent);color:#081022}
.tribegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}
.tribetile{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid rgba(139,92,246,.35);background:rgba(139,92,246,.08);text-decoration:none}
.tribetile:hover{border-color:var(--violet)}
.tribetile span{font-size:12.5px;color:var(--muted)}
.tribehead{display:flex;gap:18px;align-items:center;margin-bottom:10px}
.tribehead img{width:110px;height:110px;object-fit:cover;border-radius:22px}

/* ---------- studio, about, press, contact ---------- */
.studiohero{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:24px;align-items:center}
.studioshot{width:100%;height:auto;border-radius:16px;border:1px solid var(--line2);box-shadow:0 30px 60px rgba(0,0,0,.5)}
.verline{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.verline .kicker{align-self:flex-start;margin-bottom:4px}
.verline b{font:700 20px var(--display)}
.featgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.feat{padding:16px;border-radius:var(--r);border:1px solid var(--line);background:linear-gradient(160deg,var(--panel2),var(--panel))}
.feat i{display:inline-block;width:30px;height:30px;border-radius:9px;background:var(--accent);color:#081022;font:800 15px/30px var(--display);text-align:center;font-style:normal;margin-bottom:8px}
.feat b{display:block;font:700 16px var(--display)}
.feat p{margin:4px 0 0;font-size:14px;color:var(--text2)}
.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.shots figure{margin:0}
.shots img{width:100%;height:auto;border-radius:12px;border:1px solid var(--line2)}
.shots figcaption{font-size:13px;color:var(--muted);margin-top:6px}
.changelog{max-width:880px}
.clitem{padding:12px 0;border-bottom:1px solid var(--line)}
.clitem b{margin-right:10px;font-family:var(--display)}
.about{max-width:880px;font-size:17px}
.teamgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.member{padding:16px;border-radius:var(--r);border:1px solid var(--line);background:var(--panel);text-align:center}
.member .avatar{margin:0 auto 10px;border-radius:50%}
.member b{display:block;font:700 16px var(--display)}
.member p{font-size:13.5px;color:var(--text2)}
.member a{color:var(--cyan);text-decoration:none;font-size:13.5px}
.faq{max-width:880px}
.pressgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.presscard{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:var(--r);border:1px solid var(--line);background:var(--panel)}
.presspic{display:flex;align-items:center;justify-content:center;height:150px;border-radius:12px;background:repeating-conic-gradient(#121a2e 0 25%,#0d1424 0 50%) 0 0/20px 20px}
.presspic img{max-height:130px;width:auto}
.presscard .btn{align-self:flex-start}
.swatches{display:flex;flex-wrap:wrap;gap:10px}
.swatch{--c:#fff;display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:130px;padding:8px;border-radius:12px;border:1px solid var(--line);background:var(--panel);cursor:pointer}
.swatch i{display:block;width:100%;height:56px;border-radius:8px;background:var(--c);border:1px solid var(--line2)}
.swatch span{font:12px monospace;color:var(--muted)}
.contactgrid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;align-items:start}

/* ---------- legal ---------- */
.legal{max-width:880px}
.legal h3{margin-top:26px}
.legal p,.legal li{color:var(--text2)}
.legal a{color:var(--cyan)}

/* ---------- owner ---------- */
.ownerlink{opacity:.55}
.ownertabs{position:sticky;top:62px;z-index:6;padding:8px 0;background:var(--bg2)}
.imgrow{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 10px}
.imgthumb{position:relative}
.imgthumb img{width:90px;height:90px;object-fit:cover;border-radius:8px}
.imgthumb .btn{position:absolute;right:2px;top:2px;height:24px;width:24px;padding:0}

/* ---------- toast + footer ---------- */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:80;padding:10px 18px;border-radius:12px;background:var(--panel2);border:1px solid var(--line2);box-shadow:0 10px 30px rgba(0,0,0,.5);max-width:calc(100% - 32px)}
.toast[hidden]{display:none}
.foot{padding:30px max(16px,calc((100% - 1280px)/2)) 22px;border-top:1px solid var(--line);color:var(--muted);font-size:14px;background:rgba(5,7,12,.5)}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:20px;margin-bottom:22px}
.foot-grid > div{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.foot-grid b{color:var(--text);font-family:var(--display);margin-bottom:4px}
.foot-grid a{text-decoration:none}
.foot-grid a:hover{color:var(--text)}
.foot-brand img{height:18px;width:auto}
.foot-brand p{margin:6px 0}
.foot-copy{font-size:12.5px;border-top:1px solid var(--line);padding-top:14px}
.seo{max-width:880px}

/* ---------- narrower screens ---------- */
@media(max-width:1180px){
  .nav a,.morebtn{padding:8px 8px;font-size:14px}
  .elgrid{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media(max-width:1020px){
  .navbtn{display:flex}
  .nav{position:fixed;left:0;right:0;top:61px;bottom:0;z-index:29;flex-direction:column;align-items:stretch;gap:2px;margin:0;padding:12px 16px 30px;background:rgba(5,7,12,.97);overflow:auto;transform:translateX(-100%);transition:transform .22s}
  body.navopen .nav{transform:none}
  .nav a,.morebtn{padding:12px 14px;font-size:16px;text-align:left}
  .morebtn{display:none}
  .more,.more[hidden]{position:static;display:flex;min-width:0;padding:0;border:0;background:none;box-shadow:none}
  .brand{margin-right:auto}
  .builder,.deckview,.evdetail{grid-template-columns:1fr}
  .deckside,.evdetail aside{position:static;max-height:none}
  .poolgrid{max-height:none}
  .deckfab{display:block}
  .cdetail{grid-template-columns:minmax(0,300px) minmax(0,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
}
@media(max-width:820px){
  .hero2,.spot,.starter,.pdetail,.studiohero,.matwrap,.wmap,.contactgrid,.acgrid{grid-template-columns:1fr}
  .herostage{order:-1;height:300px}
  .cdetail{grid-template-columns:1fr}
  .cpic{position:static;max-width:360px;margin:0 auto}
  .brand .word{display:none}
  .spot{padding:16px}
  .spotpic{max-width:260px;margin:0 auto}
  .ngrid.feat{grid-template-columns:1fr}
  .ngrid.feat .ncard.big{grid-column:auto;grid-row:auto}
  .steps3{grid-template-columns:1fr}
  .kwcard{grid-template-columns:120px minmax(0,1fr)}
  .errline{grid-template-columns:1fr;gap:2px}
  .errline i{display:none}
  .glossary{grid-template-columns:1fr}
  .glossary dt{border-bottom:0}
}
@media(max-width:620px){
  .top{gap:8px;padding-top:8px;padding-bottom:8px}
  .acctbtn{max-width:120px;padding:0 10px;font-size:13px}
  .nav{top:57px}
  .view{padding:20px 16px 56px}
  .stats{gap:18px}
  .cgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}
  .cgrid.small,.dgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .poolgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pgrid{grid-template-columns:1fr}
  .elgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .searchbar{flex-wrap:wrap}
  .searchbar input{flex-basis:calc(100% - 40px)}
  .searchbar select{max-width:none;flex:1 1 100%}
  .filters select,.costrange{flex:1 1 calc(50% - 8px)}
  .float{width:118px}
  .float.f1{left:2%}.float.f2{right:2%}
  .chart2{grid-template-columns:1fr}
  .calc{min-height:56px;font-size:11px;padding:3px}
  .calev{padding:1px 3px;font-size:10px}
  .tlitem{grid-template-columns:1fr;gap:2px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .profile{flex-direction:column;align-items:flex-start}
  .modal{padding:8px}
  .modal-in{padding:16px}
  .cdbar{flex-direction:column;align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}