@font-face{font-family:"Huangyou";src:url("fonts/huangyou-sub.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Bebas";src:url("fonts/bebas.woff2") format("woff2");font-display:swap}
:root{
  --bg:#141A1C; --panel:#1E2729; --panel2:#232E31; --line:#3A4749;
  --ink:#F3E7D3; --muted:#9C9284; --dim:#6E7C7D;
  --accent:#E2572B; --accent-dark:#8C3B2E; --gold:#F0C070;
  --n:#8E8B84; --r:#5C8FA8; --sr:#9A7BC0; --ssr:#E0AE58;
  --serif:"Source Han Serif SC","Noto Serif CJK SC","Songti SC",SimSun,serif;
  --disp:"Huangyou","ZCOOL QingKe HuangYou","Source Han Serif SC",serif;
  --sans:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans)}
body{padding:0 0 60px}
.app{max-width:620px;margin:0 auto;padding:22px 18px 70px}

/* 顶部 */
.top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding-bottom:14px}
h1{font-family:var(--disp);font-size:clamp(27px,7.1vw,36px);line-height:1.24;margin:0;letter-spacing:.04em}
.ghost{background:transparent;color:var(--muted);border:1px solid var(--line);
  padding:10px 14px;font-size:13px;letter-spacing:.06em;cursor:pointer;
  box-shadow:0 6px 14px rgba(0,0,0,.35);transition:transform .08s ease,color .15s}
.ghost:hover{color:var(--ink)}
.ghost:active{transform:translateY(3px)}

/* 保底 */
.pity{margin:6px 0 18px;color:var(--gold);font-size:14px;letter-spacing:.04em}

/* 主按钮：方块 + 底座 + 下压 */
.draw{position:relative;width:100%;border:0;padding:22px 0;background:var(--accent);
  color:#FFF6E9;font-family:var(--disp);font-size:26px;letter-spacing:.34em;cursor:pointer;
  box-shadow:0 10px 0 var(--accent-dark),0 20px 32px rgba(0,0,0,.45);
  transition:transform .08s ease,box-shadow .08s ease}
.draw:active{transform:translateY(8px);
  box-shadow:0 2px 0 var(--accent-dark),0 8px 16px rgba(0,0,0,.45)}
.draw[disabled]{opacity:.45;cursor:not-allowed}
.left{margin:14px 0 4px;font-size:13px;color:var(--muted);letter-spacing:.05em}

/* 结果卡 */
.result{margin-top:18px;background:var(--panel);border:1px solid var(--line);
  padding:16px;box-shadow:0 14px 28px rgba(0,0,0,.45);animation:pop .18s ease}
@keyframes pop{from{transform:translateY(6px);opacity:0}to{transform:none;opacity:1}}
.panels{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:14px;margin-top:2px}
.panel{background:var(--panel2);border:1px solid var(--line);padding:12px}
.panel h3{font-family:var(--serif);font-size:15px;margin:0 0 2px;letter-spacing:.06em}
.tiny{margin:0 0 4px;font-size:10px;color:var(--dim);letter-spacing:.1em}
#radar{width:100%;height:auto;display:block}
.bars{list-style:none;margin:6px 0 0;padding:0}
.bars li{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted);margin-bottom:7px}
.bars .nm{width:44px;flex:none}
.bars .track{flex:1;height:6px;background:#182022;position:relative}
.bars .fill{position:absolute;left:0;top:0;bottom:0;background:var(--accent)}
.bars .v{width:24px;text-align:right;color:var(--ink);font-size:11px}
.acts{display:grid;grid-template-columns:1.4fr 1fr;gap:10px;margin-top:14px}
.primary{border:0;background:var(--accent);color:#FFF6E9;padding:15px 0;font-family:var(--disp);font-size:17px;
  letter-spacing:.2em;cursor:pointer;box-shadow:0 8px 0 var(--accent-dark);
  transition:transform .08s ease,box-shadow .08s ease}
.primary:active{transform:translateY(6px);box-shadow:0 2px 0 var(--accent-dark)}

/* 列表 */
.listwrap{margin-top:34px}
.filters{display:flex;gap:8px;overflow-x:auto;padding-bottom:12px;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.chip{flex:none;border:1px solid var(--line);background:transparent;color:var(--muted);
  font-size:12px;padding:8px 12px;cursor:pointer;letter-spacing:.06em}
.chip.on{color:var(--ink);border-color:var(--ink)}
.list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.list li{display:flex;align-items:center;gap:12px;background:var(--panel);
  border:1px solid var(--line);border-left:5px solid var(--n);
  padding:12px 14px;cursor:pointer;box-shadow:0 10px 20px rgba(0,0,0,.35);
  transition:transform .08s ease}
.list li:active{transform:translateY(3px)}
.list li[data-r="R"]{border-left-color:var(--r)}
.list li[data-r="SR"]{border-left-color:var(--sr)}
.list li[data-r="SSR"]{border-left-color:var(--ssr)}
.list .tag{font-family:var(--serif);font-weight:700;font-size:12px;width:34px;flex:none;letter-spacing:.08em}
.list .nm{flex:1;font-family:var(--disp);font-size:17px;letter-spacing:.04em}
.list .cu{font-size:11px;color:var(--dim);margin-left:6px;font-family:var(--sans)}
.list .sc{font-family:var(--serif);font-size:20px;color:var(--muted)}

/* SSR 全屏 */
.overlay{position:fixed;inset:0;background:radial-gradient(circle at 50% 45%,rgba(46,32,10,.97) 0%,rgba(5,7,8,.995) 64%);z-index:80;
  height:100dvh;display:flex;align-items:center;justify-content:center;animation:fade .12s ease;overflow:hidden;isolation:isolate}
@keyframes fade{from{opacity:0}to{opacity:1}}
/* 全屏闪光 */
.ssrFlash{position:absolute;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(circle at 50% 45%,rgba(255,240,205,.92),rgba(255,220,150,0) 62%);
  animation:flash .6s ease-out forwards}
@keyframes flash{0%{opacity:.9}40%{opacity:.22}100%{opacity:0}}
/* 旋转光芒 */
.ssrRay{position:absolute;width:150vmax;height:150vmax;left:50%;top:45%;transform:translate(-50%,-50%);
  background:conic-gradient(from 0deg,rgba(224,174,88,0) 0deg,rgba(224,174,88,.22) 6deg,rgba(224,174,88,0) 12deg,
    rgba(224,174,88,0) 30deg,rgba(224,174,88,.14) 36deg,rgba(224,174,88,0) 42deg,
    rgba(224,174,88,0) 60deg,rgba(224,174,88,.2) 66deg,rgba(224,174,88,0) 72deg,
    rgba(224,174,88,0) 90deg,rgba(224,174,88,.16) 96deg,rgba(224,174,88,0) 102deg,
    rgba(224,174,88,0) 120deg,rgba(224,174,88,.22) 126deg,rgba(224,174,88,0) 132deg,
    rgba(224,174,88,0) 150deg,rgba(224,174,88,.14) 156deg,rgba(224,174,88,0) 162deg,
    rgba(224,174,88,0) 180deg,rgba(224,174,88,.2) 186deg,rgba(224,174,88,0) 192deg,
    rgba(224,174,88,0) 210deg,rgba(224,174,88,.16) 216deg,rgba(224,174,88,0) 222deg,
    rgba(224,174,88,0) 240deg,rgba(224,174,88,.22) 246deg,rgba(224,174,88,0) 252deg,
    rgba(224,174,88,0) 270deg,rgba(224,174,88,.14) 276deg,rgba(224,174,88,0) 282deg,
    rgba(224,174,88,0) 300deg,rgba(224,174,88,.2) 306deg,rgba(224,174,88,0) 312deg,
    rgba(224,174,88,0) 330deg,rgba(224,174,88,.16) 336deg,rgba(224,174,88,0) 342deg);
  animation:spin 9s linear infinite;filter:blur(1px);pointer-events:none;z-index:0}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
#particles{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.overlay[data-tier="SR"]{background:radial-gradient(circle at 50% 45%,rgba(34,24,52,.96) 0%,rgba(6,6,10,.99) 64%)}
.overlay[data-tier="SR"] .ssrRay{filter:hue-rotate(248deg) saturate(.75) blur(1px);opacity:.8}
.overlay[data-tier="SR"] .ssrBox{background:rgba(20,15,30,.97);border-color:var(--sr);
  box-shadow:0 0 120px rgba(154,123,192,.55),0 0 34px rgba(154,123,192,.75) inset,0 40px 80px rgba(0,0,0,.7)}
.overlay[data-tier="SR"] .ssrTag{color:var(--sr)}
.overlay[data-tier="SR"] .ssrBox h2{font-size:44px;color:#F4ECFF}
.overlay[data-tier="SR"] .ssrFlash{background:radial-gradient(circle at 50% 45%,rgba(220,205,255,.85),rgba(180,150,240,0) 62%)}
.overlay[data-tier="SR"] .ssrJoke{color:#DCCDF5;border-top-color:rgba(154,123,192,.45)}
.overlay[data-tier="SR"] .ssrLine{color:#C9B6E8}
.ssrBox{position:relative;z-index:3;text-align:center;padding:64px 56px 56px;border:3px solid var(--ssr);
  background:rgba(22,17,9,.97);
  box-shadow:0 0 140px rgba(224,174,88,.6),0 0 40px rgba(224,174,88,.8) inset,0 40px 80px rgba(0,0,0,.7);
  animation:grow .45s cubic-bezier(.2,.9,.2,1),shake .5s .45s ease-in-out 1}
@keyframes grow{from{transform:scale(.7) rotate(-2deg);opacity:0;border-width:1px}
  60%{transform:scale(1.04) rotate(.4deg)}
  to{transform:none;opacity:1}}
@keyframes shake{0%,100%{transform:none}20%{transform:translate(-6px,3px)}40%{transform:translate(5px,-3px)}
  60%{transform:translate(-4px,2px)}80%{transform:translate(3px,-2px)}}
.ssrTag{margin:0 0 12px;color:var(--ssr);letter-spacing:.62em;font-size:19px;font-weight:700;
  font-family:var(--disp)}
.ssrBox h2{font-family:var(--disp);font-size:58px;margin:0;letter-spacing:.2em;color:#FFF9E8;
  text-shadow:0 5px 0 rgba(0,0,0,.38)}
.ssrLine{margin:20px 0 0;color:#E9CE9A;font-size:14px;letter-spacing:.36em}
.ssrJoke{margin:22px auto 0;max-width:520px;color:#FFE6B0;font-size:15px;line-height:1.6;
  letter-spacing:.04em;border-top:1px dashed rgba(224,174,88,.45);padding-top:16px}

/* 图鉴 */
.modal{position:fixed;inset:0;background:rgba(8,11,12,.9);z-index:90;display:flex;
  align-items:flex-end;justify-content:center;animation:fade .16s ease}
.modalBox{width:100%;max-width:620px;max-height:88vh;overflow:auto;background:var(--panel);
  border:1px solid var(--line);padding:18px}
.modalBox header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.modalBox h3{font-family:var(--disp);font-size:20px;margin:0}
.dex{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.dex div{position:relative;aspect-ratio:4/3;background:var(--panel2);border:1px solid var(--line);
  display:flex;align-items:flex-end;padding:4px;font-size:9px;color:var(--muted);overflow:hidden}
.dex div.got{border-color:var(--sr);color:var(--ink)}
.dex img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dex span{position:relative;background:rgba(10,14,15,.72);width:100%;padding:2px 3px;
  font-size:9px;line-height:1.3}

@media (max-width:420px){
  h1{font-size:32px}
  .panels{grid-template-columns:1fr}
  .ssrBox h2{font-size:36px}
}

/* 结果卡：稀有度徽章填充 + 名称独占一行 + 图与点评并排 */
.rhead{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.badge{font-family:"Bebas","Arial Black",system-ui,sans-serif;font-weight:400;font-size:26px;letter-spacing:.12em;
  padding:7px 18px 5px;border:0;background:var(--n);color:#141A1C;line-height:1}
.sub{font-size:12px;color:var(--muted);letter-spacing:.04em;flex:1}
.rtitle{display:none}
.result h2{font-family:var(--disp);font-size:34px;margin:2px 0 14px;line-height:1.18;letter-spacing:.1em}
.mediaRow{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:14px;align-items:start}
.rimg img{width:100%;display:block;border:1px solid var(--line);
  box-shadow:0 24px 44px rgba(0,0,0,.62),0 6px 14px rgba(0,0,0,.5);}
.quote{margin:0;height:100%;display:flex;flex-direction:column}
.quote h3{display:inline-block;align-self:flex-start;background:var(--accent);color:#141A1C;
  font-family:var(--disp);font-size:17px;letter-spacing:.16em;padding:6px 12px;margin:0 0 2px}
.quote p{margin:10px 0 0;font-size:15px;line-height:1.62;color:var(--ink)}
.score{text-align:right;line-height:1}
.score b{font-family:var(--serif);font-size:38px;color:var(--gold)}
.score span{display:block;font-size:10px;color:var(--muted);margin-top:3px;letter-spacing:.2em}
.why{margin:12px 0 14px;font-size:12px;color:var(--muted)}