/* 织梦星图 · stats page (2026-10-01, Raymond). Tabs are the glass switch of 麒麟颂歌 / the guestbook; everything inside
   the tabs sits on present paper like the guide and 我的 pages: white cards with the dark brown line, crimson numbers,
   brown number badges. Top three wear gold, silver and bronze. */
.stats-switch{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;width:min(760px,100%);margin:4px auto 0;padding:5px;border:1px solid #ffffff33;border-radius:20px;background:linear-gradient(160deg,#ffffff1c,#ffffff06 55%,#ffffff0d),#2a2320c7;-webkit-backdrop-filter:blur(24px) saturate(145%) brightness(.85);backdrop-filter:blur(24px) saturate(145%) brightness(.85);box-shadow:inset 0 1px 0 #fff2,inset 0 -1px 0 #ffffff0d,0 14px 34px #1e120e59;scroll-margin-top:130px}
.stats-switch button{display:grid;gap:3px;justify-items:center;align-content:center;min-height:66px;padding:10px 14px;border:0;border-radius:15px;background:transparent;color:#e7d3c0;font:inherit;cursor:pointer;transition:background-color .2s,box-shadow .2s,color .2s}
.stats-switch strong{font-family:var(--serif);font-weight:800;font-size:19px;letter-spacing:.14em;line-height:1.3}
.stats-switch small{font-size:12px;letter-spacing:.08em;opacity:.78}
.stats-switch button:hover{background-color:#ffffff14}
.stats-switch button[aria-selected="true"]{color:var(--gold);background:linear-gradient(#8456418c,#4c282b9e),url('assets/art/silk-pattern.webp?v=ce71f709ec') center/cover;box-shadow:inset 0 0 0 1px #e2c39873,inset 0 1px 0 #ffffff1f,0 2px 8px #1e120e4d}
.stats-switch button[aria-selected="true"] small{opacity:.95}
.stats-switch button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.stats-switch .glide-thumb{background:linear-gradient(#8456418c,#4c282b9e),url('assets/art/silk-pattern.webp?v=ce71f709ec') center/cover;box-shadow:inset 0 0 0 1px #e2c39873,inset 0 1px 0 #ffffff1f,0 2px 8px #1e120e4d}
.stats-switch.has-glide button[aria-selected="true"],.stats-switch.has-glide button[aria-selected="true"]:hover{background:transparent;box-shadow:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.stats-switch{background-color:#2a2320f2}}
.catalog-page .stats-section.era-section[data-era]{margin-top:22px;scroll-margin-top:130px}
.stats-section[hidden],.stats-boards[hidden]{display:none}
.stats-section.is-entering{animation:stats-enter .42s cubic-bezier(.22,1,.36,1)}
@keyframes stats-enter{from{opacity:.35;transform:translateY(10px)}to{opacity:1;transform:none}}

/* range 近 30 天 / 总榜 */
.stats-range{position:relative;display:flex;width:max-content;gap:3px;margin:0 0 16px;padding:3px;border-radius:999px;background:#efe2dc;box-shadow:inset 0 0 0 1px #e1cbc2}
.stats-range button{min-height:32px;padding:3px 18px;border:0;border-radius:999px;background:transparent;color:var(--p-muted);font:14px/1.5 var(--sans);letter-spacing:.04em;cursor:pointer;transition:background-color .2s,color .3s}
.stats-range button:hover{color:var(--p-ink);background:#ffffff99}
.stats-range button[aria-pressed="true"]{background:var(--p-brown);color:#fbf1ea}
.stats-range button:focus-visible{outline:2px solid var(--p-brown);outline-offset:2px}
.stats-range .glide-thumb{background:linear-gradient(#8a5256d9,#45342ee6),url('assets/art/silk-pattern.webp?v=ce71f709ec') center/cover;box-shadow:inset 0 0 0 1px #e2c39880,inset 0 1px 0 #ffffff26,0 2px 6px #45342e33}
.stats-range.has-glide button[aria-pressed="true"],.stats-range.has-glide button[aria-pressed="true"]:hover{background:transparent}
.stats-range.has-glide button[aria-pressed="true"]{transition:background-color .2s,color .28s ease .12s}

/* summary tiles */
.stats-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 18px}
.stats-tile{position:relative;display:grid;gap:2px;align-content:start;min-width:0;padding:14px 18px 16px;background:#fffdfb;border:1.5px solid #7c6462;border-radius:22px;overflow:hidden}
.stats-tile:after{content:"";position:absolute;right:-18px;top:-18px;width:64px;height:64px;border-radius:50%;background:radial-gradient(circle,#f3d7c966,#f3d7c900 70%);pointer-events:none}
.stats-tile small{color:var(--p-muted);font-size:13px;letter-spacing:.06em}
.stats-tile strong{color:var(--p-crimson);font-family:var(--serif);font-weight:800;font-size:30px;line-height:1.3;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.stats-tile strong em{margin-left:4px;color:var(--p-brown);font-style:normal;font-size:15px;font-weight:800}
.stats-tile>span{color:var(--p-ink);font-size:13.5px;line-height:1.6;overflow-wrap:anywhere}
.stats-tile>span:empty{display:none}
.stats-luck{display:flex;align-items:baseline;gap:8px;min-width:0}
.stats-luck em{flex:none;padding:0 8px;border-radius:6px;font-style:normal;font-family:var(--serif);font-weight:800;font-size:12px;line-height:20px}
.stats-luck:nth-of-type(1) em{background:#e3efe2;color:#3f6a45}
.stats-luck:nth-of-type(2) em{background:#f5dcdc;color:var(--p-crimson)}
.stats-luck b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--p-ink);font-weight:600;font-size:14px;line-height:1.9}
.stats-tile--luck{gap:4px}

/* boards */
.stats-boards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.stats-board{min-width:0;padding:18px 18px 14px;background:#fffdfbcc;border:1.5px solid #7c6462;border-radius:24px}
.stats-board[data-board="luck"]{grid-column:1/-1}
.stats-board h3{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:0 0 12px;color:var(--p-brown-deep);font-family:var(--serif);font-weight:800;font-size:19px;letter-spacing:.08em}
.stats-board h3:before{content:"";align-self:center;width:8px;height:8px;border-radius:2px;background:var(--p-crimson);transform:rotate(45deg)}
.stats-board h3 small{color:var(--p-muted);font-family:var(--sans);font-weight:400;font-size:12.5px;letter-spacing:.04em}
.stats-luck-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.stats-luck-head{margin:0 0 8px;font-family:var(--serif);font-weight:800;font-size:14px;letter-spacing:.12em}
.stats-luck-cols>div:nth-child(1) .stats-luck-head{color:#3f6a45}
.stats-luck-cols>div:nth-child(2) .stats-luck-head{color:var(--p-crimson)}
.stats-rows{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.stats-row{position:relative;display:grid;grid-template-columns:34px 38px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:52px;padding:6px 14px 6px 8px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1px #ead9d2;overflow:hidden;isolation:isolate}
.stats-row:before{content:"";position:absolute;inset:0 auto 0 0;z-index:-1;width:var(--w,0%);background:linear-gradient(90deg,#f7e4dc,#f7e4dc00);transform-origin:left;transition:width .6s cubic-bezier(.22,1,.36,1)}
.stats-row.is-me{box-shadow:inset 0 0 0 1.5px var(--p-rose-deep)}
.stats-row.is-me .stats-name:after{content:"我";margin-left:6px;padding:0 6px;border-radius:999px;background:var(--p-crimson);color:#fff4f1;font-size:11px;line-height:18px;vertical-align:2px}
.stats-rank{display:grid;place-items:center;width:30px;height:26px;border-radius:6px;background:#efe2dc;color:var(--p-brown);font-family:var(--serif);font-weight:800;font-size:13px;font-variant-numeric:tabular-nums}
.stats-row[data-rank="1"] .stats-rank{background:linear-gradient(#f9e2a8,#e0b25c);color:#6b3f12;box-shadow:inset 0 0 0 1px #c68a34}
.stats-row[data-rank="2"] .stats-rank{background:linear-gradient(#f1f0ee,#c9c5c0);color:#4d4843;box-shadow:inset 0 0 0 1px #a7a19b}
.stats-row[data-rank="3"] .stats-rank{background:linear-gradient(#f3d2b6,#c98a5a);color:#5a2f14;box-shadow:inset 0 0 0 1px #a86a3e}
.stats-row[data-rank="1"]{box-shadow:inset 0 0 0 1.5px #e0b25c}
.stats-face{position:relative;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;overflow:hidden;background:var(--p-blush);color:var(--p-brown);font-family:var(--serif);font-weight:800;font-size:15px;box-shadow:0 0 0 2px #fff,0 0 0 3px #e2cfc6}
.stats-face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s}
.stats-face img.is-loaded{opacity:1}
.stats-row[data-rank="1"] .stats-face{box-shadow:0 0 0 2px #fff,0 0 0 3.5px #e0b25c}
.stats-who{min-width:0}
.stats-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--p-ink);font-weight:600;font-size:15px;line-height:1.5}
.stats-extra{display:block;color:var(--p-muted);font-size:12.5px;line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stats-extra:empty{display:none}
.stats-val{color:var(--p-crimson);font-family:var(--serif);font-weight:800;font-size:17px;font-variant-numeric:tabular-nums;white-space:nowrap}
.stats-val small{margin-left:2px;color:var(--p-muted);font-family:var(--sans);font-weight:400;font-size:12px}
.stats-val.is-up{color:#3f6a45}
.stats-all{margin-top:6px}
.stats-all>summary{display:flex;justify-content:center;align-items:center;gap:6px;min-height:36px;margin:2px 0 0;border-radius:999px;color:var(--p-brown);font-size:13.5px;cursor:pointer;list-style:none;transition:background-color .2s,color .2s}
.stats-all>summary::-webkit-details-marker{display:none}
.stats-all>summary:after{content:"";width:7px;height:7px;border:solid currentColor;border-width:0 1.6px 1.6px 0;transform:translateY(-2px) rotate(45deg);transition:transform .3s}
.stats-all[open]>summary:after{transform:translateY(2px) rotate(-135deg)}
.stats-all>summary:hover,.stats-all>summary:focus-visible{background:#efe2dc;color:var(--p-brown-deep)}
.stats-all>summary:focus-visible{outline:2px solid var(--p-brown);outline-offset:2px}
.stats-all .stats-rows{margin-top:6px}
.stats-empty{margin:0;padding:22px 16px;border:1.5px dashed #d7bba9;border-radius:18px;color:var(--p-muted);font-size:14px;line-height:1.8;text-align:center}
.stats-note{margin:16px 0 0;color:var(--p-muted);font-size:13px;line-height:1.9;text-align:center}
.stats-note:empty{display:none}

/* odds */
.stats-boxes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.stats-box{min-width:0;padding:18px;background:#fffdfb;border:1.5px solid #7c6462;border-radius:24px}
.stats-box-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.stats-box-icon{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:linear-gradient(145deg,#8a5256,#45342e);color:#f3d7a0;box-shadow:inset 0 0 0 1px #e2c39880}
.stats-box-name{flex:1;min-width:0}
.stats-box-name strong{display:block;color:var(--p-brown-deep);font-family:var(--serif);font-weight:800;font-size:18px;line-height:1.4}
.stats-box-name small{color:var(--p-muted);font-size:12.5px}
.stats-pct{flex:none;padding:3px 10px;border-radius:999px;font-family:var(--serif);font-weight:800;font-size:14px;font-variant-numeric:tabular-nums}
.stats-pct.is-up{background:#e3efe2;color:#3f6a45}
.stats-pct.is-down{background:#f5dcdc;color:var(--p-crimson)}
.stats-box-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 12px;padding:0}
.stats-box-facts div{padding:8px 10px;border-radius:12px;background:var(--p-blush);text-align:center}
.stats-box-facts dt{color:var(--p-muted);font-size:12px}
.stats-box-facts dd{margin:0;color:var(--p-ink);font-family:var(--serif);font-weight:800;font-size:16px;font-variant-numeric:tabular-nums}
.stats-gifts{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.stats-gift{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:6px 12px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px #ead9d2;overflow:hidden;isolation:isolate;font-size:14px}
.stats-gift:before{content:"";position:absolute;inset:0 auto 0 0;z-index:-1;width:var(--w,0%);background:linear-gradient(90deg,#f3dfc0,#f3dfc000);transition:width .6s cubic-bezier(.22,1,.36,1)}
.stats-gift span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--p-ink)}
.stats-gift span small{margin-left:6px;color:var(--p-muted);font-size:12px}
.stats-gift em{color:var(--p-muted);font-style:normal;font-size:12.5px;font-variant-numeric:tabular-nums}
.stats-gift b{min-width:56px;color:var(--p-crimson);font-family:var(--serif);font-weight:800;text-align:right;font-variant-numeric:tabular-nums}

/* SC wall: the top band's color follows the amount like Bilibili's own SC tiers, in the site's warmer tones */
.stats-sc{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));align-items:start;gap:14px}
.stats-sc-card{min-width:0;border-radius:18px;overflow:hidden;background:#fffdfb;border:1.5px solid var(--sc,#7c6462);break-inside:avoid;box-shadow:0 6px 16px #45342e14}
.stats-sc-card header{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:8px 14px;background:var(--sc,#7c6462);color:#fffaf5}
.stats-sc-card header b{font-family:var(--serif);font-weight:800;font-size:16px;font-variant-numeric:tabular-nums}
.stats-sc-card header b small{margin-left:3px;font-family:var(--sans);font-weight:400;font-size:12px;opacity:.9}
.stats-sc-card time{font-size:12px;opacity:.9;font-variant-numeric:tabular-nums}
.stats-sc-card p{margin:0;padding:12px 14px 14px;color:var(--p-ink);font-size:15px;line-height:1.8;overflow-wrap:anywhere;white-space:pre-wrap}
.stats-sc-card[data-tier="1"]{--sc:#5d8a9e}
.stats-sc-card[data-tier="2"]{--sc:#6f7fae}
.stats-sc-card[data-tier="3"]{--sc:#c3913f}
.stats-sc-card[data-tier="4"]{--sc:#c46a3a}
.stats-sc-card[data-tier="5"]{--sc:#a8323f}
.stats-sc-card[data-tier="6"]{--sc:#6e2433}
.stats-more-row{margin:6px 0 0;text-align:center}
.stats-more,.stats-retry{padding:8px 22px;border:1.5px solid var(--p-brown);border-radius:999px;background:transparent;color:var(--p-brown);font:14px var(--sans);cursor:pointer;transition:background-color .2s,color .2s}
.stats-more:hover,.stats-more:focus-visible,.stats-retry:hover,.stats-retry:focus-visible{background:var(--p-brown);color:#fbf1ea}
.stats-more:focus-visible,.stats-retry:focus-visible{outline:2px solid var(--p-crimson);outline-offset:2px}
.stats-more[hidden]{display:none}
.stats-more:disabled{opacity:.6;cursor:default}

/* loading shimmer and the entrance of freshly drawn rows */
.stats-skel{height:52px;border-radius:16px;background:linear-gradient(90deg,#f4e9e4 20%,#fbf4f1 40%,#f4e9e4 60%) 0 0/300% 100%;animation:stats-skel 1.3s linear infinite}
@keyframes stats-skel{to{background-position:-150% 0}}
.stats-in{animation:stats-in .5s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--i,0) * 35ms)}
@keyframes stats-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.stats-offline{display:grid;justify-items:center;gap:12px;padding:30px 16px;color:var(--p-muted);text-align:center}
.stats-offline p{margin:0}

@media(max-width:900px){.stats-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.stats-boxes{grid-template-columns:minmax(0,1fr)}}
@media(max-width:760px){
 .stats-switch{border-radius:18px}
 .stats-switch button{min-height:58px;padding:8px 6px;border-radius:13px}
 .stats-switch strong{font-size:16px;letter-spacing:.06em}
 .stats-switch small{display:none}
 .stats-switch button{min-height:48px}
 .stats-range{width:100%;box-sizing:border-box}.stats-range button{flex:1}
 .stats-tile{padding:12px 14px 14px;border-radius:18px}
 .stats-tile strong{font-size:24px}
 .stats-boards,.stats-luck-cols{grid-template-columns:minmax(0,1fr)}
 .stats-board{padding:14px 12px 10px;border-radius:20px}
 .stats-row{grid-template-columns:30px 34px minmax(0,1fr) auto;gap:8px;padding:6px 10px 6px 6px}
 .stats-face{width:34px;height:34px}
 .stats-box{padding:14px;border-radius:20px}
 .stats-sc{grid-template-columns:minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){.stats-face img{transition:none}.stats-in,.stats-section.is-entering,.stats-skel{animation:none}.stats-row:before,.stats-gift:before,.stats-switch button,.stats-range button,.stats-more,.stats-retry{transition:none}}
.motion-paused .stats-in,.motion-paused .stats-section.is-entering,.motion-paused .stats-skel{animation:none}
.motion-paused .stats-row:before,.motion-paused .stats-gift:before{transition:none}