/* 中二 battle-HUD: night arena, manga-serif titles, rarity frames. Loud parts: rarity + price plate. */
:root{color-scheme:dark;--bg:#09090D;--panel:#13131B;--panel2:#1B1B26;--line:#2A2A38;--ink:#F3F1EA;--muted:#9B98A8;--pop:#FFE600;--red:#FF2E3B;--cyan:#3CF0FF;--ssr:#FFC83D;--sr:#C77DFF;--r:#4DA3FF;
--disp:"Noto Serif TC","Songti TC","PMingLiU",serif;--body:"PingFang TC","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;--num:"Anton","Impact",sans-serif;--hud:"Chakra Petch","Anton",sans-serif;
--cut:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px))}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;
background-image:radial-gradient(rgba(255,255,255,.045) 1px,transparent 1.2px),linear-gradient(115deg,transparent 0 62%,rgba(255,46,59,.07) 62% 63%,transparent 63% 71%,rgba(255,230,0,.05) 71% 71.6%,transparent 71.6%);background-size:6px 6px,100% 100vh;background-attachment:fixed}
a{color:inherit}img,video{max-width:100%;display:block}
.w{max-width:1240px;margin:0 auto;padding-inline:16px}
.kick{display:block;font:700 .78rem/1 var(--hud);letter-spacing:.32em;color:var(--red);margin-bottom:8px;text-transform:uppercase}
/* header */
.hd{position:sticky;top:0;z-index:20;background:rgba(9,9,13,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.hd::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:linear-gradient(90deg,var(--red),var(--pop) 40%,transparent 70%)}
.hd .w{display:flex;align-items:center;gap:14px;min-height:64px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.logo b{width:42px;height:42px;background:var(--pop);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);display:grid;place-items:center;font:900 .7rem/1.05 var(--disp);text-align:center;color:#09090D}
.logo span{font:900 1.2rem var(--disp);letter-spacing:.06em}
.sbox{flex:1;position:relative;max-width:560px}
.sbox input{width:100%;min-height:44px;border:1px solid var(--line);border-radius:4px;background:var(--panel);color:var(--ink);font:inherit;padding:0 16px;clip-path:var(--cut)}
.sbox input::placeholder{color:var(--muted)}
.sbox input:focus-visible{outline:2px solid var(--pop);outline-offset:2px}
.sres{position:absolute;left:0;right:0;top:50px;background:var(--panel);border:1px solid var(--pop);max-height:70vh;overflow:auto;display:none}
.sres.on{display:block}.sres a{display:flex;gap:10px;align-items:center;padding:8px 12px;text-decoration:none;border-bottom:1px solid var(--line)}
.sres a:hover{background:var(--panel2)}
.sres img{width:44px;height:44px;object-fit:cover}.sres .sp{margin-left:auto;font:1.05rem var(--num);color:var(--pop)}
.nav{display:flex;gap:2px}.nav a{text-decoration:none;font:700 .95rem var(--body);padding:8px 12px;color:var(--muted)}
.nav a:hover{color:var(--ink)}.nav a[aria-current="page"]{color:var(--pop);box-shadow:inset 0 -2px var(--pop)}
@media (max-width:760px){.hd .w{flex-wrap:wrap;padding-block:8px}.sbox{order:3;flex-basis:100%;max-width:none}.nav{margin-left:auto}.nav a{padding:6px 7px;font-size:.86rem}}
/* hero */
.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px;align-items:center;padding-block:44px 30px;position:relative}
@media (max-width:900px){.hero{grid-template-columns:1fr;padding-block:26px 18px}}
.hero h1{font:900 clamp(2.6rem,6.4vw,5rem)/1.04 var(--disp);margin:0 0 16px;letter-spacing:.01em;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--pop);text-shadow:3px 3px 0 var(--red)}
.hero p{margin:0 0 20px;color:var(--muted);max-width:30em}
.stats{display:flex;flex-wrap:wrap;gap:10px}
.stat{border:1px solid var(--line);background:var(--panel);padding:8px 14px;clip-path:var(--cut);font:700 .85rem var(--body);color:var(--muted)}
.stat strong{display:block;font:1.7rem/1 var(--num);color:var(--ink);letter-spacing:.03em}
.stat:first-child strong{color:var(--pop)}
.reels{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,200px);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
.reel{scroll-snap-align:start;position:relative;overflow:hidden;background:#000;aspect-ratio:9/16;text-decoration:none;clip-path:var(--cut);outline:1px solid var(--line)}
.reel video,.reel img{width:100%;height:100%;object-fit:cover}
/* category bar */
.cats{display:flex;gap:8px;overflow-x:auto;padding:4px 0 14px;scrollbar-width:none}.cats::-webkit-scrollbar{display:none}
.chip{flex:none;border:1px solid var(--line);background:var(--panel);color:var(--ink);padding:7px 14px;font:700 .9rem var(--body);text-decoration:none;cursor:pointer;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.chip small{font:.95rem var(--num);margin-left:6px;color:var(--muted);letter-spacing:.03em}
.chip:hover{border-color:var(--muted)}
.chip[aria-pressed="true"],.chip.on{background:var(--pop);color:#09090D;border-color:var(--pop)}.chip[aria-pressed="true"] small,.chip.on small{color:#09090D}
h2{font:900 clamp(1.7rem,3.4vw,2.5rem)/1.15 var(--disp);margin:56px 0 14px;letter-spacing:.02em}
.sub{color:var(--muted);margin:-6px 0 18px}
/* top 10 */
.rank{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px 18px;counter-reset:r}
.rank li{counter-increment:r;display:grid;grid-template-columns:58px 72px minmax(0,1fr);gap:12px;align-items:center;background:var(--panel);padding:10px 12px 10px 4px;clip-path:var(--cut)}
.rank li::before{content:counter(r,decimal-leading-zero);font:2.5rem/1 var(--num);color:var(--muted);text-align:right;font-style:italic}
.rank li:nth-child(1)::before{color:var(--ssr)}.rank li:nth-child(2)::before{color:#D8DCE6}.rank li:nth-child(3)::before{color:#E08A4A}
.rank img{width:72px;height:72px;object-fit:cover}
.rank a{text-decoration:none;min-width:0}.rank .t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.92rem;line-height:1.4}
.rank .m{font-size:.8rem;color:var(--muted)}.rank .m b{font:1.15rem var(--num);color:var(--pop);letter-spacing:.02em}
/* grid */
.tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:16px}
.tools select{min-height:40px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:700 .9rem var(--body);padding:0 10px}
.tools .cnt{margin-left:auto;color:var(--muted);font:600 .85rem var(--hud);letter-spacing:.08em}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:22px 14px}
@media (max-width:520px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 10px}}
.it{text-decoration:none;display:grid;gap:6px;min-width:0;align-content:start}
.it .ph{position:relative;aspect-ratio:1;overflow:hidden;background:var(--panel2);clip-path:var(--cut)}
.it .ph::after{content:"";position:absolute;inset:0;border:2px solid transparent;clip-path:var(--cut);pointer-events:none}
.it .ph img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.it:hover .ph img{transform:scale(1.05)}
.it:hover .ph::after{border-color:var(--pop)}
.it:focus-visible{outline:2px solid var(--pop);outline-offset:3px}
.rar{position:absolute;top:0;left:0;font:700 .78rem/1 var(--hud);letter-spacing:.12em;padding:6px 10px 6px 8px;color:#09090D;clip-path:polygon(0 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.r-ur{background:linear-gradient(90deg,#FF5CA8,#FFE600 35%,#3CF0FF 70%,#C77DFF)}.r-ssr{background:linear-gradient(90deg,#FFE27A,var(--ssr) 50%,#FF9F1C)}.r-sr{background:var(--sr)}.r-r{background:var(--r)}.r-n{background:#5B5B6B;color:#fff}
.it:has(.r-ssr) .ph::after{border-color:rgba(255,200,61,.5)}.it:has(.r-ur) .ph::after{border-color:rgba(60,240,255,.6)}
.off{position:absolute;bottom:8px;left:8px;background:var(--red);color:#fff;padding:2px 9px;font:700 .8rem var(--body);clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%)}
.off b{font:1rem var(--num);letter-spacing:.02em;margin-right:1px}
.vid{position:absolute;top:6px;right:6px;background:rgba(0,0,0,.7);color:var(--pop);font:700 .7rem var(--hud);letter-spacing:.08em;padding:3px 7px}
.tag{justify-self:start;display:inline-flex;align-items:baseline;gap:2px;background:var(--pop);color:#09090D;padding:0 12px 0 10px;margin:-18px 0 0 8px;position:relative;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%)}
.tag .d{font:1rem var(--num)}.tag .v{font:1.6rem/1.3 var(--num);letter-spacing:.02em}
.it .n{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.9rem;line-height:1.45}
.it .s{font:600 .78rem var(--body);color:var(--muted)}.it .s b{font:.95rem var(--num);color:var(--cyan);letter-spacing:.03em;margin-left:2px}
.more{display:block;margin:28px auto 0;border:0;background:var(--pop);color:#09090D;font:900 1rem var(--disp);padding:14px 34px;cursor:pointer;clip-path:var(--cut);letter-spacing:.1em}
.more:hover{background:#fff}
.more:focus-visible,.chip:focus-visible,.cta:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
/* product */
.pd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;padding-block:28px}
@media (max-width:860px){.pd{grid-template-columns:1fr;gap:18px}}
.pd .media{display:grid;gap:12px;align-content:start}.pd .media img{aspect-ratio:1;object-fit:cover;width:100%;clip-path:var(--cut)}
.pd .media video{max-height:70vh;margin:0 auto;clip-path:var(--cut)}
.pd h1{font:900 clamp(1.35rem,2.6vw,1.9rem)/1.35 var(--disp);margin:6px 0 16px}
.pd .tag{margin:0 0 16px;padding:2px 18px}.pd .tag .v{font-size:3.2rem}.pd .tag .d{font-size:1.6rem}
.pd .rar{position:static;display:inline-block;margin-bottom:8px}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;padding:0;list-style:none}
.facts li{border:1px solid var(--line);background:var(--panel);padding:3px 12px;font-size:.9rem}
.cta{display:flex;justify-content:center;align-items:center;gap:8px;min-height:58px;background:var(--pop);color:#09090D;font:900 1.15rem var(--disp);text-decoration:none;clip-path:var(--cut);letter-spacing:.06em}
.cta:hover{background:#fff}
.cta[aria-disabled="true"]{background:var(--panel2);color:var(--muted);pointer-events:none}
.fine{font-size:.8rem;color:var(--muted);margin:12px 0 0}
.crumb{font-size:.85rem;color:var(--muted)}.crumb a{color:var(--muted)}
/* trending: social quests */
.qs{display:grid;gap:26px}
.q{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:20px;background:var(--panel);padding:18px;clip-path:var(--cut);position:relative}
.q::before{content:attr(data-no);position:absolute;right:14px;top:-6px;font:900 5.5rem/1 var(--num);color:rgba(255,255,255,.04);pointer-events:none}
@media (max-width:860px){.q{grid-template-columns:1fr;padding:14px}}
.q h3{font:900 clamp(1.35rem,2.6vw,1.9rem)/1.25 var(--disp);margin:0 0 6px}
.q h3 small{display:block;font:700 .75rem var(--hud);letter-spacing:.28em;color:var(--red);margin-bottom:6px}
.q .why{color:var(--muted);font-size:.92rem;margin:0 0 12px}
.emb{position:relative;clip-path:var(--cut);background:#000}
.emb>button{all:unset;cursor:pointer;display:block;position:relative;width:100%;box-sizing:border-box}
.emb>button:focus-visible{outline:3px solid var(--pop);outline-offset:-3px}
.emb.yt.big{aspect-ratio:16/9;overflow:hidden}.emb.yt.big>button{position:absolute;inset:0}
.emb.yt.big img{width:100%;height:100%;object-fit:cover;opacity:.85;transition:opacity .2s}.emb.yt.big button:hover img{opacity:1}
.play{position:absolute;left:50%;top:50%;width:76px;height:54px;transform:translate(-50%,-50%);background:var(--red);clip-path:polygon(0 0,100% 12%,100% 88%,0 100%)}
.play::after{content:"";position:absolute;left:30px;top:15px;border-style:solid;border-width:12px 0 12px 20px;border-color:transparent transparent transparent #fff}
.emb iframe{display:block;width:100%;border:0}
.emb.yt iframe{aspect-ratio:16/9;height:auto}
.emb.tt iframe{aspect-ratio:9/16;height:auto;max-height:640px;max-width:360px;margin:0 auto}
.emb.th.on{background:transparent;clip-path:none}.emb.th blockquote{margin:0}.emb.th.on:has(iframe) blockquote{display:none}.intel .emb.on{grid-column:1/-1;max-width:560px}.intel .emb.tt.on{max-width:360px}
.emb.card{background:var(--panel2);display:grid}
.emb.card>button{padding:12px 12px 10px;display:grid;gap:4px;align-content:start;min-height:120px}
.emb.card>button:hover{background:#22222F}
.emb.card img{width:100%;aspect-ratio:16/9;object-fit:cover;margin-bottom:4px}
.emb.card.on{background:#000}.emb.card.on .orig{display:none}
.emb.card.big{max-width:420px;background:linear-gradient(160deg,#1B1B26 0%,#121219 55%,rgba(60,240,255,.18) 100%)}.emb.card.big>button{min-height:300px;padding:18px;align-content:end;gap:6px}.emb.card.big>button::before{content:'';position:absolute;left:50%;top:38%;width:84px;height:84px;transform:translate(-50%,-50%);border-radius:50%;background:var(--cyan);box-shadow:0 0 0 10px rgba(60,240,255,.15)}.emb.card.big>button::after{content:'';position:absolute;left:calc(50% + 4px);top:38%;transform:translate(-50%,-50%);border-style:solid;border-width:16px 0 16px 26px;border-color:transparent transparent transparent #09090D}.emb.card.big .au{font-size:1.05rem}.emb.card.big .nt{font-size:.95rem;color:var(--ink)}.emb.card.big.on{max-width:360px;background:#000}.emb.card.big.on>button::before,.emb.card.big.on>button::after{display:none}
.ch{display:flex;gap:6px;align-items:center}
.pf{font:700 .7rem/1 var(--hud);letter-spacing:.1em;padding:4px 7px;color:#09090D}.pf-yt{background:#FF3B3B;color:#fff}.pf-tt{background:var(--cyan)}.pf-th{background:#F3F1EA}
.lg{font:600 .72rem var(--body);color:var(--muted);border:1px solid var(--line);padding:1px 6px}
.au{font:700 .86rem var(--body)}.nt{font-size:.84rem;color:var(--muted);line-height:1.45}
.op{font:700 .8rem var(--body);color:var(--pop);margin-top:4px}
.orig{font-size:.74rem;color:var(--muted);padding:0 12px 10px;text-decoration:none}.orig:hover{color:var(--ink)}
.ih{margin:16px 0 8px;font:700 .78rem var(--hud);letter-spacing:.24em;color:var(--cyan);display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.ih span{font:600 .74rem var(--body);letter-spacing:0;color:var(--muted)}
.intel{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;align-items:start}
.src .pf,.src .lg{vertical-align:1px;margin-right:2px}
.src{font-size:.78rem;color:var(--muted);margin:8px 0 0}.src a{color:var(--muted)}
.loot{display:grid;gap:10px;align-content:start}
.loot h4{margin:0;font:700 .78rem var(--hud);letter-spacing:.28em;color:var(--pop)}
.li{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;align-items:center;text-decoration:none;background:var(--panel2);padding:8px;clip-path:var(--cut)}
.li:hover{outline:1px solid var(--pop)}
.li img{width:76px;height:76px;object-fit:cover}
.li .t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.86rem;line-height:1.4}
.li .m{font-size:.78rem;color:var(--muted)}.li .m b{font:1.1rem var(--num);color:var(--pop);margin-right:6px;letter-spacing:.02em}
.li .go{display:block;font:700 .76rem var(--body);color:var(--cyan);margin-top:2px}
.qnote{font-size:.8rem;color:var(--muted);border-left:3px solid var(--red);padding-left:10px;margin:18px 0 0}
/* guides */
.gl{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.gc{background:var(--panel);padding:16px 18px;text-decoration:none;display:grid;gap:4px;clip-path:var(--cut)}
.gc:hover{background:var(--panel2);box-shadow:inset 3px 0 var(--pop)}.gc .k{font:700 .78rem var(--hud);letter-spacing:.2em;color:var(--red)}.gc .t{font:900 1.08rem/1.4 var(--disp)}
.art{max-width:760px}.art h1{font:900 clamp(1.6rem,3.4vw,2.4rem)/1.3 var(--disp);margin:8px 0 12px}
.art .tbl{overflow-x:auto;border:1px solid var(--line)}.art table{border-collapse:collapse;width:100%;min-width:560px;font-size:.92rem}
.art th,.art td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}.art th{background:var(--pop);color:#09090D}
.art .crit{display:grid;gap:10px;padding-left:1.2em}.art dt{font-weight:700;margin-top:12px}.art dd{margin:4px 0 0}
.art .cta{display:inline-flex;padding:0 22px}
.note{border:1px dashed var(--line);padding:10px 14px;font-size:.86rem;color:var(--muted)}
.ft{border-top:1px solid var(--line);margin-top:64px;padding-block:22px 40px;font-size:.85rem;color:var(--muted)}
.ft a{color:var(--muted)}
@media (prefers-reduced-motion:reduce){.it .ph img,.emb img{transition:none}}