:root{
  --bg:#08090c;
  --bg2:#0d0f14;
  --panel:rgba(20,23,30,.72);
  --panel-solid:#12151b;
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.16);
  --text:#eef1f6;
  --muted:#8b93a3;
  --dim:#5f6675;
  --red:#e4453a;
  --red-soft:#ff6b5e;
  --bronze:#c98247;
  --silver:#b9c6d6;
  --gold:#e8b64c;
  --standard:#6d8ba6;
  --common:#8e97a6;
  --uncommon:#4ecb71;
  --rare:#4a9eff;
  --veryrare:#b06cff;
  --legendary:#ffb02e;
  --radius:16px;
  --shadow:0 18px 50px rgba(0,0,0,.55);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(1100px 620px at 12% -10%, rgba(228,69,58,.18), transparent 60%),
    radial-gradient(900px 600px at 92% 0%, rgba(74,158,255,.10), transparent 62%),
    linear-gradient(180deg,#0a0b0f 0%, #08090c 45%, #06070a 100%);
  color:var(--text);
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:15px;
  line-height:1.55;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%}
.bg-grid{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse at 50% 0%, #000 0%, transparent 72%);
}

/* ---------- topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px clamp(16px,4vw,44px);
  background:rgba(8,9,12,.72);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand-mark{
  width:38px;height:38px;flex:none;display:grid;place-items:center;
  border-radius:11px;
  background:linear-gradient(145deg,#e4453a,#8e1b14);
  box-shadow:0 8px 22px rgba(228,69,58,.35), inset 0 1px 0 rgba(255,255,255,.35);
  font-family:"Arial Black","Impact",sans-serif;
  font-size:22px;font-weight:900;color:#fff;letter-spacing:-.5px;
}
.brand-text{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.brand-text b{font-size:16px;letter-spacing:.5px}
.brand-text i{font-style:normal;font-size:11px;color:var(--dim);letter-spacing:.6px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-meta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);white-space:nowrap}
.live-dot{width:7px;height:7px;border-radius:50%;background:#37d67a;box-shadow:0 0 0 4px rgba(55,214,122,.14);animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- layout ---------- */
main{max-width:1360px;margin:0 auto;padding:0 clamp(16px,4vw,44px) 40px}
.hero{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:28px;align-items:center;
  padding:clamp(28px,5vw,54px) 0 26px;
}
.hero h1{
  margin:0 0 10px;font-size:clamp(28px,4.4vw,46px);line-height:1.1;letter-spacing:-.5px;font-weight:800;
}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(92deg,#ff8b7f,#e4453a 55%,#ffb02e);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero p{margin:0;color:var(--muted);max-width:640px;font-size:14.5px}
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stat{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:16px 14px;text-align:center;backdrop-filter:blur(8px);
}
.stat b{display:block;font-size:clamp(22px,2.6vw,30px);font-weight:800;letter-spacing:-.5px}
.stat span{font-size:12px;color:var(--muted)}

/* ---------- toolbar ---------- */
.toolbar{
  position:sticky;top:63px;z-index:30;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 0;margin-bottom:8px;
  background:linear-gradient(180deg,rgba(8,9,12,.94),rgba(8,9,12,.86) 70%,rgba(8,9,12,0));
  backdrop-filter:blur(10px);
}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.03);
  font-size:13.5px;color:var(--muted);transition:.18s;white-space:nowrap;
}
.chip:hover{border-color:var(--line-strong);color:var(--text)}
.chip.is-active{background:rgba(228,69,58,.14);border-color:rgba(228,69,58,.55);color:#fff}
.chip i{font-style:normal;font-size:11.5px;color:var(--dim);font-variant-numeric:tabular-nums}
.chip.is-active i{color:rgba(255,255,255,.65)}
.tools{display:flex;gap:10px;align-items:center;flex:1 1 340px;justify-content:flex-end}
.search{
  display:flex;align-items:center;gap:8px;min-width:0;flex:1 1 260px;max-width:420px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:0 12px;height:42px;
}
.search:focus-within{border-color:rgba(228,69,58,.5);box-shadow:0 0 0 3px rgba(228,69,58,.1)}
.search svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--dim);stroke-width:2;stroke-linecap:round}
.search input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--text);font-size:14px}
.search input::placeholder{color:var(--dim)}
select{
  height:42px;border-radius:12px;background:var(--panel);border:1px solid var(--line);
  color:var(--text);padding:0 12px;font-size:13.5px;outline:none;max-width:190px;
}

/* ---------- sections / grid ---------- */
.section{margin-top:18px}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:20px 0 12px}
.section-head h2{margin:0;font-size:19px;letter-spacing:.2px}
.muted{color:var(--muted);font-size:12.5px}
.grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(208px,1fr));gap:14px;
}
.grid--items{grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}

/* ---------- card ---------- */
.card{
  position:relative;display:flex;flex-direction:column;text-align:left;
  background:linear-gradient(180deg,rgba(24,27,35,.86),rgba(15,17,22,.92));
  border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.card:hover{transform:translateY(-3px);border-color:var(--line-strong);box-shadow:var(--shadow)}
.card-tier{
  position:absolute;top:10px;left:10px;z-index:2;
  font-size:10.5px;letter-spacing:.8px;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;font-weight:700;
  background:rgba(0,0,0,.55);border:1px solid var(--line-strong);backdrop-filter:blur(6px);
}
.card-art{
  position:relative;display:grid;place-items:center;height:202px;padding:18px 14px 8px;
}
.card-art::before{
  content:"";position:absolute;inset:14% 18% 8%;border-radius:50%;
  background:radial-gradient(circle,rgba(228,69,58,.22),transparent 68%);
  filter:blur(16px);
}
.card-art img{position:relative;max-height:178px;width:auto;object-fit:contain;filter:drop-shadow(0 12px 22px rgba(0,0,0,.6))}
.card-body{display:flex;flex-direction:column;gap:5px;padding:10px 14px 14px;border-top:1px solid var(--line)}
.card-name{font-size:14.5px;font-weight:700;line-height:1.3;letter-spacing:.1px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-sub{font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.2px}
.card-foot{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:4px}
.price{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.2px}
.price small{font-size:10px;font-weight:600;color:var(--dim);margin-left:3px}
.chg{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.chg.up{color:#3ddc84}.chg.down{color:#ff5f56}.chg.flat{color:var(--dim)}
.card-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px;min-height:18px}
.tag{font-size:10.5px;padding:2px 7px;border-radius:6px;background:rgba(255,255,255,.05);color:var(--muted);border:1px solid transparent}
.badge-rare{font-weight:700}

/* tier accents */
.card.tier-bronze{border-top:2px solid rgba(201,130,71,.75)}
.card.tier-bronze .card-tier{color:#e6a874}
.card.tier-silver{border-top:2px solid rgba(185,198,214,.8)}
.card.tier-silver .card-tier{color:#d6e0ec}
.card.tier-gold{border-top:2px solid rgba(232,182,76,.9)}
.card.tier-gold .card-tier{color:#ffd27a}
.card.tier-standard{border-top:2px solid rgba(109,139,166,.75)}
.card.tier-standard .card-tier{color:#9fb9d1}

/* ---------- drawer ---------- */
.drawer{position:fixed;inset:0;z-index:60;display:grid}
.drawer[hidden]{display:none}
.drawer-scrim{position:absolute;inset:0;background:rgba(3,4,6,.72);backdrop-filter:blur(4px);animation:fade .2s ease}
.drawer-panel{
  position:absolute;top:0;right:0;bottom:0;width:min(980px,100%);
  background:linear-gradient(180deg,#0e1015,#0a0b0f 60%);
  border-left:1px solid var(--line-strong);
  box-shadow:-30px 0 80px rgba(0,0,0,.6);
  overflow-y:auto;overscroll-behavior:contain;
  animation:slide .24s cubic-bezier(.22,.8,.3,1);
}
@keyframes slide{from{transform:translateX(40px);opacity:.4}to{transform:none;opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.drawer-close{
  position:sticky;top:0;margin-left:auto;z-index:3;display:grid;place-items:center;
  width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.06);border:1px solid var(--line);margin-top:10px;margin-right:12px;
  font-size:15px;color:var(--muted);
}
.drawer-close:hover{color:#fff;background:rgba(255,255,255,.12)}
.d-body{padding:6px clamp(16px,3.4vw,34px) 48px}

.d-hero{display:grid;grid-template-columns:240px minmax(0,1fr);gap:22px;align-items:center;padding:6px 0 20px;border-bottom:1px solid var(--line)}
.d-art{position:relative;display:grid;place-items:center;height:230px}
.d-art::before{content:"";position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle,rgba(228,69,58,.24),transparent 70%);filter:blur(18px)}
.d-art img{position:relative;max-height:216px;filter:drop-shadow(0 16px 30px rgba(0,0,0,.7))}
.d-title{min-width:0}
.d-eyebrow{display:flex;gap:8px;align-items:center;font-size:11.5px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.d-eyebrow .pill{padding:3px 9px;border-radius:999px;border:1px solid var(--line-strong);font-weight:700}
.d-title h2{margin:0 0 4px;font-size:clamp(22px,3vw,30px);line-height:1.15;letter-spacing:-.3px}
.d-title .en{color:var(--dim);font-size:12.5px;letter-spacing:.3px;word-break:break-word}
.d-price{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:16px 0 6px}
.d-price b{font-size:32px;font-weight:800;letter-spacing:-1px;font-variant-numeric:tabular-nums}
.d-price small{font-size:12px;color:var(--muted)}
.d-facts{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:12.5px;color:var(--muted)}
.d-facts b{color:var(--text);font-weight:600}

.d-section{margin-top:24px}
.d-section h3{margin:0 0 12px;font-size:15px;letter-spacing:.4px;display:flex;align-items:center;gap:8px}
.d-section h3::before{content:"";width:3px;height:14px;border-radius:2px;background:var(--red)}
.family{display:flex;flex-wrap:wrap;gap:8px}
.fam-btn{display:flex;flex-direction:column;gap:2px;padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.03);min-width:96px;text-align:left}
.fam-btn small{font-size:10.5px;color:var(--dim)}
.fam-btn b{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.fam-btn:hover{border-color:var(--line-strong)}
.fam-btn.is-current{border-color:rgba(228,69,58,.6);background:rgba(228,69,58,.12)}

.rarity-bars{display:grid;gap:8px}
.rb{display:grid;grid-template-columns:74px 1fr 58px;align-items:center;gap:10px;font-size:12.5px}
.rb span:first-child{font-weight:700}
.rb .bar{height:7px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden}
.rb .bar i{display:block;height:100%;border-radius:999px}
.rb b{text-align:right;font-variant-numeric:tabular-nums;color:var(--text)}
.rarity-Common,.rarity-common{color:var(--common)}
.rarity-Uncommon{color:var(--uncommon)}
.rarity-Rare{color:var(--rare)}
.rarity-VeryRare{color:var(--veryrare)}
.rarity-Legendary{color:var(--legendary)}

.rewards{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px}
.reward{
  background:rgba(255,255,255,.025);border:1px solid var(--line);border-radius:12px;
  padding:10px 8px 9px;text-align:center;position:relative;transition:.16s;
}
.reward:hover{background:rgba(255,255,255,.05);border-color:var(--line-strong);transform:translateY(-2px)}
.reward img{width:104px;height:104px;object-fit:contain;margin:0 auto 6px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.55))}
.reward .r-name{font-size:12px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:30px}
.reward .r-en{font-size:9.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.reward .r-rate{margin-top:5px;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}
.reward .r-rar{font-size:9.5px;letter-spacing:.3px;margin-top:1px}
.reward.is-top::after{content:"最高掉率";position:absolute;top:-6px;right:6px;font-size:9px;background:rgba(228,69,58,.9);color:#fff;padding:1px 6px;border-radius:999px}

.chart{width:100%;height:150px;display:block}
.chart-empty{color:var(--dim);font-size:12px;padding:20px 0}


/* ---------- hover preview ---------- */
.hover-card{
  position:fixed;z-index:55;width:340px;
  background:linear-gradient(180deg,rgba(22,25,33,.98),rgba(13,15,20,.99));
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  box-shadow:0 26px 60px rgba(0,0,0,.62), 0 0 0 1px rgba(0,0,0,.4);
  padding:12px 12px 10px;
  backdrop-filter:blur(10px);
  animation:hpIn .13s ease-out;
  pointer-events:auto;
}
@keyframes hpIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.hp-head{display:flex;gap:10px;align-items:center;padding-bottom:10px;border-bottom:1px solid var(--line)}
.hp-art{width:54px;height:54px;flex:none;display:grid;place-items:center;border-radius:10px;background:rgba(255,255,255,.04);font-size:22px;color:var(--dim)}
.hp-art img{max-height:48px;width:auto;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6))}
.hp-title{min-width:0;display:flex;flex-direction:column;gap:3px;flex:1}
.hp-title b{font-size:13.5px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp-title i{font-style:normal;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.hp-track{display:flex;height:4px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.07);margin-top:3px}
.hp-seg{height:100%}
.hp-body{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:10px 0 8px}
.hp-item{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;min-width:0}
.hp-thumb{
  width:60px;height:60px;display:grid;place-items:center;border-radius:10px;
  background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid var(--line);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);
}
.hp-thumb img{max-width:52px;max-height:52px;object-fit:contain;filter:drop-shadow(0 5px 9px rgba(0,0,0,.6))}
.hp-ph{font-size:18px;color:var(--dim)}
.hp-meta{display:flex;flex-direction:column;gap:1px;min-width:0;width:100%}
.hp-meta b{font-size:10.5px;font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp-meta i{font-style:normal;font-size:9.5px;font-variant-numeric:tabular-nums}
.hp-foot{display:flex;justify-content:space-between;gap:8px;font-size:10.5px;color:var(--dim);border-top:1px solid var(--line);padding-top:8px}
.hp-hint{color:var(--red-soft)}
@media (max-width:900px){ .hover-card{display:none!important} }

/* ---------- item cards ---------- */
.item-card{padding:0}
.item-card .card-art{height:172px;padding:14px 12px 4px}
.item-card .card-art img{max-height:148px}
.item-card .card-body{padding:9px 11px 12px;border-top:1px solid var(--line)}

/* ---------- footer ---------- */
.foot{max-width:1360px;margin:0 auto;padding:26px clamp(16px,4vw,44px) 46px;border-top:1px solid var(--line);font-size:12px;color:var(--dim);display:grid;gap:6px}
.foot a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.foot .muted{color:var(--dim);font-size:11.5px}

.empty{padding:60px 0;text-align:center;color:var(--dim)}

/* skeleton */
.sk{background:linear-gradient(90deg,rgba(255,255,255,.03),rgba(255,255,255,.07),rgba(255,255,255,.03));background-size:200% 100%;animation:sh 1.4s infinite;border-radius:12px}
@keyframes sh{0%{background-position:200% 0}100%{background-position:-200% 0}}
.sk-card{height:320px}

@media (max-width:860px){
  .hero{grid-template-columns:1fr;gap:20px}
  .hero-stats{grid-template-columns:repeat(3,1fr)}
  .toolbar{top:59px;align-items:stretch}
  .tools{flex:1 1 100%;justify-content:stretch}
  .search{max-width:none}
  .d-hero{grid-template-columns:1fr;gap:8px;text-align:center}
  .d-art{height:190px}
  .d-art img{max-height:176px}
  .d-facts{justify-content:center}
  .d-price{justify-content:center}
  .d-eyebrow{justify-content:center}
  .rb{grid-template-columns:64px 1fr 52px}
  .rewards{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
  .reward img{width:86px;height:86px}
  .drawer-panel{border-left:0}
}
@media (max-width:560px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .grid--items{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card-art{height:156px}
  .card-art img{max-height:134px}
  .card-name{font-size:13px}
  .price{font-size:15px}
  .brand-text i{display:none}
  .top-meta{font-size:11px}
  .section-head{margin:16px 0 10px}
}