/* stats.css —— 瓦帮手风 · 亮色 · 页面组件（配合 wwq_theme.css）*/

/* ===== 顶栏用户菜单 ===== */
.user-menu{position:relative}
.user-btn{display:flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--line);color:var(--ink2);padding:8px 14px;font-size:12.5px;font-weight:700;cursor:pointer;border-radius:2px;transition:.15s}
.user-btn:hover{border-color:var(--ink3);color:var(--ink)}
.user-btn i{font-style:normal;font-size:9px;opacity:.6;transition:.2s}
.user-btn.open i{transform:rotate(180deg)}
.user-drop{position:absolute;right:0;top:calc(100% + 8px);min-width:190px;background:var(--surface);border:1px solid var(--line);box-shadow:0 16px 40px rgba(30,45,60,.14);padding:6px;border-radius:3px;animation:dropIn .15s ease}
.user-drop[hidden]{display:none}
@keyframes dropIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.user-drop .drop-head{padding:9px 11px;border-bottom:1px solid var(--line2);margin-bottom:4px}
.user-drop .drop-head b{display:block;color:var(--ink);font-size:13.5px}
.user-drop .drop-head span{color:var(--ink3);font-size:11px}
.user-drop a,.user-drop button{display:block;width:100%;text-align:left;background:transparent;border:0;color:var(--ink2);padding:9px 11px;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;border-radius:2px}
.user-drop a:hover,.user-drop button:hover{background:var(--surface2);color:var(--ink)}
.user-drop form{margin-top:3px;border-top:1px solid var(--line2);padding-top:3px}
.user-drop form button{color:var(--lose)}

/* ===== 搜索表单 ===== */
.search{width:100%}
.search.compact{margin:18px 0 6px}
.search-row{display:flex;align-items:stretch;gap:10px}
.search:not(.compact) .search-row{max-width:560px;margin:0 auto}
.in-wrap{position:relative;flex:1;min-width:0}
.in-wrap.tag{flex:0 0 96px}
.search.compact .in-wrap.tag{flex:0 0 84px}
.in-lb{position:absolute;top:9px;left:15px;font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--ink3);font-weight:700;pointer-events:none}
.in-name,.in-tag{width:100%;height:64px;padding:24px 16px 8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:18px;font-weight:600;border-radius:2px;transition:.15s}
.search.compact .in-name,.search.compact .in-tag{height:52px;padding:18px 13px 5px;font-size:16px}
.in-name:focus,.in-tag:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(26,39,51,.08)}
.hash{align-self:center;color:var(--ink3);font-weight:800;font-size:20px}
.btn-go{flex:0 0 auto;padding:0 30px;border:0;background:var(--accent);color:#fff;font-size:16px;font-weight:700;letter-spacing:1px;cursor:pointer;border-radius:2px;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));transition:.15s}
.search.compact .btn-go{padding:0 22px;font-size:15px}
.btn-go.btn-block{display:block;width:100%;max-width:560px;margin:12px auto 0;height:58px;font-size:18px;letter-spacing:3px;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))}
.btn-go:hover{background:#000}
.btn-go:active{transform:translateY(1px)}
.search-hint{text-align:center;margin-top:12px;color:var(--ink3);font-size:12.5px}
.search-hint b{color:var(--ink2)}

.err-box{background:var(--lose-bg);border:1px solid #e0483c44;border-left:4px solid var(--lose);color:#b23227;padding:13px 16px;font-size:13.5px;font-weight:600;margin:16px 0;border-radius:2px}

/* ===== Hero 首页 ===== */
.hero{position:relative;overflow:hidden;padding:64px 0 56px;border-bottom:1px solid var(--line)}
.hero-bg{position:absolute;inset:0;background:
  radial-gradient(1000px 340px at 50% -10%,rgba(26,39,51,.06),transparent 70%),
  linear-gradient(180deg,var(--bg2),var(--bg));z-index:-1}
.hero-in{text-align:center}
.hero-kicker{display:inline-block;font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--ink3);padding:5px 14px;border:1px solid var(--line);border-radius:2px}
.hero-title{font-size:clamp(30px,7vw,50px);color:var(--ink);margin:18px 0 10px;letter-spacing:1px}
.hero-sub{font-size:14px;color:var(--ink2);margin-bottom:26px;display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap}
.hero-sub strong{color:var(--lose);letter-spacing:.5px}
.hero-sub span{color:var(--ink3)}
.hero-archive{display:block;margin-top:18px;font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--ink3)}

/* ===== 玩家档案 ===== */
.profile{display:flex;align-items:center;gap:18px;padding:20px;position:relative;overflow:hidden}
.profile.has-card>*:not(.pf-cardbg){position:relative;z-index:1}
.pf-cardbg{position:absolute;top:0;right:0;bottom:0;width:60%;z-index:0;background-image:var(--cardimg);background-size:cover;background-position:right center;-webkit-mask-image:linear-gradient(90deg,transparent,#000 55%);mask-image:linear-gradient(90deg,transparent,#000 55%);opacity:.55}
.pf-avatar{flex:0 0 72px;width:72px;height:72px;background:var(--surface2);border:2px solid var(--rc,var(--accent));display:grid;place-items:center;overflow:hidden;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px))}
.pf-avatar img{width:100%;height:100%;object-fit:cover}
.pf-avatar span{font-size:30px;font-weight:800;color:var(--ink3)}
.pf-main{flex:1;min-width:0}
.pf-label{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--ink3);font-weight:700}
.pf-name{font-size:28px;color:var(--ink);line-height:1.1;margin:2px 0 8px}
.pf-name i{font-style:normal;font-size:16px;color:var(--ink3);margin-left:5px}
.pf-tags{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pf-tier{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:800;color:var(--rc,var(--accent));background:color-mix(in srgb,var(--rc,#888) 12%,transparent);border:1px solid color-mix(in srgb,var(--rc,#888) 35%,transparent);padding:3px 9px 3px 5px;border-radius:2px}
.pf-tier img{width:18px;height:18px;object-fit:contain}
.pf-sync{flex:0 0 auto;align-self:flex-start;font-size:11px;color:var(--ink3);display:flex;align-items:center;gap:6px}
.pf-sync .dot{width:7px;height:7px;border-radius:50%;background:var(--win);box-shadow:0 0 0 3px var(--win-bg)}

/* ===== 数据格 ===== */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px}
.stat{padding:14px 12px;text-align:center;position:relative}
.stat .lb{display:block;font-size:9.5px;letter-spacing:1px;text-transform:uppercase;color:var(--ink3);font-weight:700;margin-bottom:6px}
.stat b{display:block;font-size:26px;color:var(--ink);line-height:1}
.stat small{display:block;font-size:10.5px;color:var(--ink3);margin-top:5px}

/* ===== 排位分趋势 · 折线图 ===== */
.trend-card{overflow:hidden}
.trend-header{display:flex;justify-content:space-between;align-items:flex-start;padding:14px 16px 10px;gap:12px;flex-wrap:wrap}
.trend-title-group{display:flex;flex-direction:column;gap:2px}
.trend-title{font-size:14px;font-weight:700;color:var(--ink)}
.trend-subtitle{font-size:11px;color:var(--ink3)}
.trend-rank-group{display:flex;align-items:center;gap:10px}
.trend-tier-icon{width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 2px 6px color-mix(in srgb,var(--rc) 30%,transparent))}
.trend-rank-label{font-size:10px;color:var(--ink3);text-transform:uppercase;letter-spacing:.8px;font-weight:600;display:block}
.trend-rank-value{font-size:15px;font-weight:800;color:var(--ink)}
.trend-rank-value .rr{color:var(--gold)}
.trend-chart-wrap{padding:0 8px 6px}
.trend-svg{width:100%;height:auto;display:block}
.trend-svg .trend-grid{stroke:var(--border);stroke-width:1;stroke-dasharray:2,3;opacity:.5}
.trend-svg .trend-line{fill:none;stroke:var(--gold);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.trend-svg .trend-area{fill:url(#trendArea)}
.trend-grad-top{stop-color:var(--gold);stop-opacity:.22}
.trend-grad-bot{stop-color:var(--gold);stop-opacity:0}
.trend-svg .trend-dot.win{fill:#17a2b8;stroke:var(--surface);stroke-width:1.5}
.trend-svg .trend-dot.lose{fill:var(--lose);stroke:var(--surface);stroke-width:1.5}
.trend-svg .trend-peak-label{font-size:9.5px;fill:var(--gold);font-weight:700}
.trend-svg .trend-x-label{font-size:9.5px;fill:var(--ink3)}

/* ===== 常用英雄 ===== */
.agents{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.agent{display:flex;align-items:center;gap:11px;padding:12px}
.ag-av{flex:0 0 44px;width:44px;height:44px;background:var(--surface2);overflow:hidden;clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px))}
.ag-av img{width:100%;height:100%;object-fit:cover}
.ag-info{flex:1;min-width:0}
.ag-name{font-size:16px;color:var(--ink);line-height:1}
.ag-stats{display:flex;gap:8px;flex-wrap:wrap;font-size:11px;color:var(--ink3);margin-top:4px}
.ag-acs{flex:0 0 auto;text-align:right}
.ag-acs b{display:block;font-size:19px;color:var(--gold);line-height:1}
.ag-acs span{font-size:9px;letter-spacing:1px;color:var(--ink3)}

/* ===== 模式筛选 ===== */
.match-filter{display:flex;gap:7px;margin-bottom:14px;flex-wrap:wrap}
.mf{padding:7px 15px;border:1px solid var(--line);background:var(--surface);color:var(--ink2);font-size:12.5px;font-weight:700;cursor:pointer;border-radius:2px;transition:.15s}
.mf:hover{border-color:var(--ink3)}
.mf.active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ===== 对局卡 ===== */
.match-list{display:flex;flex-direction:column;gap:9px}
.match{position:relative}
.m-card{position:relative;overflow:hidden;min-height:128px;border:1px solid var(--line);border-radius:2px;background:var(--surface);clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));transition:box-shadow .15s}
.match:hover .m-card{box-shadow:0 6px 20px rgba(30,45,60,.13)}
.m-mapbg{position:absolute;inset:0;z-index:0;background-image:var(--mmap);background-size:cover;background-position:center;filter:saturate(1.15) contrast(1.05)}
.m-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(247,249,251,.97) 0%,rgba(247,249,251,.93) 42%,rgba(247,249,251,.45) 78%,rgba(247,249,251,.15) 100%)}
.m-card>*:not(.m-mapbg):not(.m-shade):not(.m-bar){position:relative;z-index:2}
.m-bar{position:absolute;left:0;top:0;bottom:0;width:4px;z-index:3}
.match.win .m-bar{background:var(--win)}
.match.lose .m-bar{background:var(--lose)}
.m-top-row{display:flex;align-items:flex-start;gap:12px;padding:14px 14px 0 18px}
.m-agent-av{flex:0 0 44px;width:44px;height:44px;background:var(--surface2);overflow:hidden;clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px))}
.m-agent-av img{width:100%;height:100%;object-fit:cover}
.m-agent-av span{display:grid;place-items:center;width:100%;height:100%;font-size:20px;font-weight:800;color:var(--ink3)}
.m-main{flex:1;min-width:0}
.m-top{display:flex;align-items:center;gap:9px}
.m-res{font-size:15px}
.m-res.win{color:var(--win)} .m-res.lose{color:var(--lose)}
.m-mode{font-size:11px;color:var(--ink2);font-weight:500}
.m-map{font-size:14px;color:var(--ink);margin:3px 0 0;font-weight:700}
.m-mapname{font-size:15px}
.m-agentname{color:var(--ink3);font-weight:400;font-size:12px}
.m-when{font-size:11px;color:var(--ink3);margin-top:3px;display:flex;gap:12px}
.m-bot-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;padding:8px 10px 8px 18px;border-top:1px solid rgba(120,140,160,.16)}
.m-stat{font-size:12px;color:var(--ink2);font-weight:600}
.m-stat-ex{color:var(--ink3);font-weight:400}
.m-expand{flex:0 0 34px;width:34px;height:34px;border:1px solid var(--line);background:rgba(255,255,255,.75);color:var(--ink2);cursor:pointer;border-radius:2px;font-size:14px;transition:.2s}
.m-expand:hover{border-color:var(--ink3);color:var(--ink)}
.m-expand.open{transform:rotate(180deg);background:var(--accent);color:#fff;border-color:var(--accent)}
.m-detail{margin-top:9px}
.m-detail[hidden]{display:none}

/* ===== 战绩指南 ===== */
.guides{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
.guide{display:block;padding:16px 18px;text-decoration:none;transition:.15s;cursor:pointer}
.guide:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(30,45,60,.10)}
.guide strong{display:block;font-size:17px;color:var(--ink);margin-bottom:6px}
.guide span{font-size:12.5px;color:var(--ink2);line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.site-foot{text-align:center;color:var(--ink3);font-size:11.5px;padding:28px 0;border-top:1px solid var(--line);margin-top:10px}
.foot{text-align:center;color:var(--ink3);font-size:11.5px;padding:20px 0 4px}

/* ===== 响应式 ===== */
@media(max-width:720px){
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .agents{grid-template-columns:1fr}
  .guides{grid-template-columns:1fr}
  .profile{flex-wrap:wrap}
  .pf-sync{width:100%;order:3}
}
@media(max-width:480px){
  .m-agent-av{flex-basis:40px;width:40px;height:40px}
  .m-stat-ex{display:none}
  .hero{padding:44px 0 40px}
}

/* ===== 对局详情面板 ===== */
.d-loading,.d-err,.dt-ev-none{padding:18px;text-align:center;color:var(--ink3);font-size:13px}
.d-err{color:var(--lose)}
.detail-inner{animation:dFade .2s ease}
@keyframes dFade{from{opacity:0}to{opacity:1}}

.dt-scoreline{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:14px}
.dt-sc{font-size:32px;line-height:1}
.dt-sc.win{color:var(--win)} .dt-sc.lose{color:var(--lose)}
.dt-vs{font-size:12px;color:var(--ink3);letter-spacing:1px}
.dt-rounds{margin-left:8px;font-size:11px;color:var(--ink3);background:var(--surface2);border:1px solid var(--line);padding:2px 9px;border-radius:2px}

.dt-tabs{display:flex;gap:7px;margin-bottom:12px;justify-content:center}
.dt-tab{padding:6px 16px;border:1px solid var(--line);background:var(--surface);color:var(--ink2);font-size:12.5px;font-weight:700;cursor:pointer;border-radius:2px}
.dt-tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* 记分板 */
.dt-team{margin-bottom:14px}
.dt-team-head{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;border-left:3px solid var(--ink3);margin-bottom:6px}
.dt-team.win .dt-team-head{border-left-color:var(--win);background:var(--win-bg)}
.dt-team.lose .dt-team-head{border-left-color:var(--lose);background:var(--lose-bg)}
.dt-team-name{font-size:14px;color:var(--ink);letter-spacing:1px}
.dt-team-score{font-size:20px}
.dt-team-score.win{color:var(--win)} .dt-team-score.lose{color:var(--lose)}
.dt-rows{display:flex;flex-direction:column;gap:4px}
.dt-party-tag{flex:0 0 auto;display:inline-block;font-size:9px;font-weight:600;color:#2f80d8;background:#eef6ff;border:1px solid #d0e0f7;border-radius:8px;padding:0 5px;margin-left:4px;vertical-align:middle;line-height:1.5}
.dt-row{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--surface2);border:1px solid var(--line2);border-radius:2px}
.dt-row.me{background:#fff7e6;border-color:#e8c884}
.dt-row.mate{background:#eef6ff;border-color:var(--mate,#2f80d8);box-shadow:inset 3px 0 0 var(--mate,#2f80d8)}
.dt-p-av{flex:0 0 34px;width:34px;height:34px;background:var(--surface);overflow:hidden;border-radius:2px}
.dt-p-av img{width:100%;height:100%;object-fit:cover}
.dt-p-id{flex:1;min-width:0}
.dt-p-name{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;max-width:100%}
.dt-p-name-txt{overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;min-width:0}
.dt-mate{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:10px;font-weight:800;color:#fff;background:var(--mate,#2f80d8);border-radius:50%;line-height:1}
.dt-p-sub{display:flex;align-items:center;gap:3px;font-size:11px;color:var(--ink3)}
.dt-tier{width:15px;height:15px;object-fit:contain;vertical-align:middle}
.dt-tier-t{font-weight:700;color:var(--ink2)}
.dt-p-acs{flex:0 0 auto;text-align:center;font-size:18px;color:var(--gold);line-height:1}
.dt-p-acs i{display:block;font-style:normal;font-size:8px;letter-spacing:1px;color:var(--ink3)}
.dt-p-kda{flex:0 0 auto;text-align:right;min-width:88px}
.dt-p-kda b{font-size:14px;color:var(--ink);font-weight:800}
.dt-p-kda span{display:block;font-size:9.5px;color:var(--ink3);margin-top:1px}

/* 死斗 FFA 排行 */
.dt-scoreline-dm{gap:10px}
.dt-dm-badge{font-size:12px;font-weight:800;letter-spacing:1px;color:#fff;background:linear-gradient(135deg,#e0483c,#ff7a45);padding:4px 12px;border-radius:2px}
.dt-dm-rank{font-size:15px;color:var(--ink2)}
.dt-dm-rank b{font-size:24px;color:var(--gold);margin:0 2px}
.dt-dm-rank i{font-style:normal;font-size:12px;color:var(--ink3)}
.dt-ffa .dt-team-head{border-left-color:var(--gold);background:var(--surface2)}
.dt-ffa-row{position:relative}
.dt-ffa-rank{flex:0 0 26px;width:26px;text-align:center;font-size:16px;font-weight:800;color:var(--ink3)}
.dt-ffa-row.rank1 .dt-ffa-rank{color:#f5a623}
.dt-ffa-row.rank2 .dt-ffa-rank{color:#8e9bad}
.dt-ffa-row.rank3 .dt-ffa-rank{color:#b87333}
.dt-ffa-row.rank1{border-color:#f5a62366;box-shadow:inset 3px 0 0 #f5a623}
.dt-ffa-row.rank2{border-color:#8e9bad55;box-shadow:inset 3px 0 0 #8e9bad}
.dt-ffa-row.rank3{border-color:#b8733355;box-shadow:inset 3px 0 0 #b87333}
.dt-tl-head.dm{border-left:3px solid var(--gold);background:var(--surface2)}

/* 回合网格 */
.dt-round-grid{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:16px}
.dt-rd{flex:0 0 auto;width:34px;padding:5px 0;text-align:center;border:1px solid var(--line);border-radius:2px;background:var(--surface2)}
.dt-rd.win{border-color:#0ea67e55;background:var(--win-bg)}
.dt-rd.lose{border-color:#e0483c44;background:var(--lose-bg)}
.dt-rd-num{display:block;font-size:14px;color:var(--ink)}
.dt-rd-res{display:block;font-size:8px;color:var(--ink3);margin-top:1px}

/* 时间轴 */
.dt-timeline{display:flex;flex-direction:column;gap:10px}
.dt-tl-round{border:1px solid var(--line);border-radius:2px;overflow:hidden}
.dt-tl-head{display:flex;align-items:center;justify-content:space-between;padding:7px 11px}
.dt-tl-head.win{background:var(--win-bg);border-left:3px solid var(--win)}
.dt-tl-head.lose{background:var(--lose-bg);border-left:3px solid var(--lose)}
.dt-tl-head .font-display{font-size:14px;color:var(--ink)}
.dt-tl-res{font-size:11px;color:var(--ink2)}
.dt-tl-events{padding:8px 11px;display:flex;flex-direction:column;gap:5px}
.dt-ev{display:flex;align-items:center;gap:8px;font-size:12px}
.dt-ev-t{flex:0 0 42px;color:var(--ink3);font-size:11px}
.dt-ev-k,.dt-ev-v{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34%}
.dt-ev-k.win,.dt-ev-v.win{color:var(--win)}
.dt-ev-k.lose,.dt-ev-v.lose{color:var(--lose)}
.dt-ev-w{width:34px;height:16px;object-fit:contain;flex:0 0 auto;filter:brightness(.4)}
.dt-ev-wt{font-size:10px;color:var(--ink3);flex:0 0 auto}
.dt-ev::after{content:"";flex:1}

@media(max-width:480px){
  .dt-p-acs{display:none}
  .dt-p-kda{min-width:74px}
  .dt-row{gap:7px;padding:7px}
}

/* ===== 详情地图背景（整个面板背景大图，仿上游 z-index垫底）===== */
.detail-inner{position:relative}
.detail-inner.has-map{overflow:hidden}
.dt-mapbg{position:absolute;inset:0;background-image:var(--mapimg);background-size:cover;background-position:center;z-index:0;opacity:.16;filter:saturate(1.2) contrast(1.05)}
.detail-inner.has-map>*:not(.dt-mapbg){position:relative;z-index:1}
.detail-inner.has-map .dt-scoreline,.detail-inner.has-map .dt-panel{background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border-radius:3px}
.dt-map-name{margin-left:12px;font-size:15px;color:var(--ink2);letter-spacing:1px;align-self:center}


/* ===== 分页 · 页码翻页 ===== */
.pager-wrap{display:flex;justify-content:center;gap:6px;padding:16px 0 6px;flex-wrap:wrap}
.pg-btn,.pg-num{
  min-width:38px;height:38px;padding:0 11px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink2);font-size:14px;font-weight:700;
  cursor:pointer;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;
  transition:transform .12s ease,box-shadow .12s ease,background .15s ease;
  font-family:inherit;
}
.pg-btn:hover,.pg-num:hover{border-color:var(--ink3);color:var(--ink);box-shadow:0 2px 8px rgba(26,39,51,.08)}
.pg-btn:active,.pg-num:active{transform:translateY(1px)}
.pg-num.active{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 2px 10px rgba(26,39,51,.18)}
.pg-dis{opacity:.35;cursor:default;pointer-events:none}
.pg-dots{padding:0 2px;color:var(--ink3);font-size:14px;display:inline-flex;align-items:center}
.pg-num.loading{position:relative;color:transparent;border-color:var(--line2)}
.pg-num.loading::after{
  content:"";position:absolute;width:14px;height:14px;border-radius:50%;
  border:2px solid rgba(26,39,51,.18);border-top-color:var(--accent);
  animation:pg-spin .7s linear infinite;
}
@keyframes pg-spin{to{transform:rotate(360deg);}}

/* 站点公告横幅 */
.notice-bar{max-width:1080px;margin:12px auto 0;padding:10px 16px;background:linear-gradient(90deg,#0ea67e14,#0ea67e08);border:1px solid #0ea67e40;border-left:4px solid var(--win);border-radius:8px;color:#0b7a5c;font-size:13.5px;font-weight:600;line-height:1.6;display:flex;gap:6px;align-items:flex-start}
.notice-bar span{flex:1}
@media(max-width:640px){.notice-bar{margin:10px 12px 0}}

/* 单局详细 — 未登录/次数用完 锁定提示 */
.d-locked{padding:28px 20px;text-align:center;background:linear-gradient(180deg,#fff,#f7faf9);border:1px dashed #0ea67e55;border-radius:12px;margin:6px}
.d-locked .dl-ico{font-size:34px;line-height:1;margin-bottom:10px}
.d-locked .dl-t{font-size:15px;font-weight:700;color:#14342b;margin-bottom:6px}
.d-locked .dl-s{font-size:12.5px;color:#5c6b66;line-height:1.7;max-width:420px;margin:0 auto 14px}
.d-locked .dl-btn{display:inline-block;padding:9px 26px;background:var(--win,#0ea67e);color:#fff;font-size:13.5px;font-weight:700;border-radius:8px;text-decoration:none;box-shadow:0 4px 12px #0ea67e40;transition:transform .15s}
.d-locked .dl-btn:hover{transform:translateY(-1px)}

/* 缓存兜底提示条（上游繁忙时展示旧数据） */
.stale-box{max-width:1080px;margin:10px auto 0;padding:10px 16px;background:linear-gradient(90deg,#f59e0b18,#f59e0b08);border:1px solid #f59e0b55;border-left:4px solid #f59e0b;border-radius:8px;color:#92600a;font-size:13px;font-weight:600;line-height:1.6}
@media(max-width:640px){.stale-box{margin:8px 12px 0}}

/* ══════════════ 骨架屏（异步战绩填充，套路同上游）══════════════ */
.sk-wrap{padding:4px 0 8px}
.sk-card,.sk-line{
  background:linear-gradient(100deg,var(--surface2) 30%,#ffffffcc 50%,var(--surface2) 70%);
  background-size:220% 100%;
  animation:skShine 1.15s linear infinite;
  border:1px solid var(--line2);border-radius:2px;
}
.sk-line{border:0;border-radius:2px}
@keyframes skShine{0%{background-position:120% 0}100%{background-position:-120% 0}}
.sk-profile{height:104px;margin-bottom:12px}
.sk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.sk-stat{height:76px}
.sk-match{height:82px;margin-bottom:8px}
.sk-hint{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:18px;font-size:12.5px;color:var(--ink3)}
.sk-hint b{color:var(--ink2)}
.sk-spin{flex:0 0 15px;width:15px;height:15px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:skSpin .7s linear infinite}
/* 顶部加载横幅：单独框住，居中，页面最上方 */
.load-banner{display:flex;align-items:center;justify-content:center;gap:10px;
  margin:0 auto 18px;padding:13px 18px;max-width:520px;
  background:var(--surface2);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:8px;font-size:13px;color:var(--ink2);
  box-shadow:0 2px 10px rgba(0,0,0,.18)}
.load-banner .sk-spin{flex:0 0 16px;width:16px;height:16px}
.load-banner-txt b{color:var(--ink);font-weight:700}
@keyframes skSpin{to{transform:rotate(360deg)}}
@media(max-width:640px){
  .sk-grid{grid-template-columns:repeat(2,1fr)}
  .sk-profile{height:118px}
}
/* 真实内容淡入 */
#resultHost.rh-in{animation:rhIn .22s ease}
@keyframes rhIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.err-retry{display:inline-block;margin-left:8px;padding:2px 10px;background:var(--lose);color:#fff;font-size:12px;font-weight:700;border-radius:2px;text-decoration:none}
.err-retry:hover{opacity:.86}
/* 无 JS 兜底：隐藏骨架，提示走同步链接 */
.nojs-fallback{display:none}

/* ============ 弹窗公告 ============ */
.popup-overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  background:rgba(26,39,51,.35);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  animation:popupFadeIn .25s ease}
@keyframes popupFadeIn{from{opacity:0}to{opacity:1}}
.popup-modal{position:relative;width:400px;max-width:92vw;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:0 20px 60px rgba(26,39,51,.18),0 4px 12px rgba(0,0,0,.06);
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
  animation:popupSlideIn .3s cubic-bezier(.22,1,.36,1)}
@keyframes popupSlideIn{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:none}}
/* 顶部条 */
.popup-banner{display:flex;align-items:center;gap:9px;padding:14px 18px;
  background:var(--accent);border-bottom:1px solid var(--line)}
.popup-icon{display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:2px;
  background:rgba(255,255,255,.12);color:#fff;flex-shrink:0}
.popup-label{font-size:12px;font-weight:700;letter-spacing:.06em;
  color:rgba(255,255,255,.85);text-transform:uppercase}
.popup-close{margin-left:auto;background:transparent;border:0;cursor:pointer;
  width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  border-radius:2px;color:rgba(255,255,255,.45);transition:.15s}
.popup-close:hover{background:rgba(255,255,255,.1);color:#fff}
/* 正文 */
.popup-body{padding:24px 24px 20px;text-align:center}
.popup-title{margin:0 0 10px;font-size:18px;font-weight:700;color:var(--ink);
  letter-spacing:.01em}
.popup-text{margin:0;font-size:14px;line-height:1.8;color:var(--ink2);
  white-space:pre-wrap;word-break:break-word}
/* 底部按钮 */
.popup-footer{padding:0 24px 22px}
.popup-confirm{width:100%;height:44px;border:none;border-radius:2px;
  font-size:14.5px;font-weight:700;letter-spacing:1px;cursor:pointer;transition:all .2s;
  background:#d0d5da;color:#8a99a6}
.popup-confirm:not(:disabled){
  background:var(--accent);color:#fff}
.popup-confirm:not(:disabled):hover{
  background:#0d1620;transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(26,39,51,.25)}
.popup-confirm:disabled{cursor:not-allowed}
@media(max-width:480px){
  .popup-modal{width:94vw}
  .popup-body{padding:18px 20px 16px}
  .popup-title{font-size:16px}
  .popup-text{font-size:13px}
  .popup-footer{padding:0 20px 18px}
}