/* ==================================================================
   query 区域样式 · 战绩(stats) / 封禁(ban) / 排行(rank)
   只用 tokens.css 的令牌：不新增色值、字号档位、圆角与阴影
   ================================================================== */

/* ---------- 状态提示块（与 hub-data.js 的 statusBlock 产出一致） ---------- */
.hub-state{
  display:flex;align-items:center;gap:10px;
  margin-top:12px;padding:11px 14px;
  border-radius:var(--r-m);background:var(--wash);
  font-size:var(--t-sm);color:var(--t2);line-height:1.6;
}
.hub-state b{
  width:20px;height:20px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;
  background:var(--blue-soft);color:var(--blue);
  font-size:var(--t-xs);font-weight:500;
}
.hub-state.is-error{background:var(--red-soft);color:var(--red)}
.hub-state.is-error b{background:var(--red);color:var(--card)}
.hub-state.is-empty{background:var(--warn-soft);color:var(--warn)}
.hub-state.is-empty b{background:var(--warn);color:var(--card)}

/* ---------- 过期（stale）标注 ---------- */
.tag.is-stale{background:var(--warn-soft);color:var(--warn)}
.stale-note{margin-top:8px;font-size:var(--t-xs);color:var(--warn)}

/* ---------- 局部控件 ---------- */
.q-tabs{margin-bottom:var(--gap-s)}

.q-ctl{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-bottom:14px;
}
.q-ctl .field-sel{flex:0 0 auto}
.q-ctl .select{min-width:118px}

.q-list{display:flex;flex-direction:column;gap:8px}
.q-item{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 12px;border-radius:var(--r-m);background:var(--wash);
  font-size:var(--t-sm);color:var(--t1);
}
.q-item-n{
  flex:1;min-width:0;text-align:left;font-weight:500;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.q-item-m{
  font-family:var(--f-mono);font-size:var(--t-xs);color:var(--t2);
  white-space:nowrap;
}
.q-item-acts{display:flex;align-items:center;gap:6px;flex-shrink:0}

.q-note{margin-top:10px;font-size:var(--t-xs);color:var(--t2);line-height:1.8}
.q-empty{margin-top:8px;font-size:var(--t-sm);color:var(--t2)}
.q-inline{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}

@media (max-width:680px){
  .q-item{flex-wrap:wrap}
  .q-item-n{flex:1 1 100%}
}

/* ===== 查询页初始态：整页只留搜索框并居中（2026-10-21） ===== */
#main.is-initial{display:block}
#main.is-initial aside.stack{display:none}
#main.is-initial [data-result]{display:none}
#main.is-initial .prequery{margin-top:var(--gap);text-align:center}
#main.is-initial .prequery .pq-ico{margin:0 auto}
#main.is-initial .prequery h3{margin-top:10px}
#main.is-initial .prequery p{max-width:44ch;margin:6px auto 0}

/* 比赛行：地图缩略图 */
a.match.has-thumb{grid-template-columns:auto auto 1fr auto}
.match-thumb{width:46px;height:46px;border-radius:var(--r-s);object-fit:cover;background:var(--wash);flex:0 0 auto;display:block}
@media (max-width:640px){.match-thumb{width:36px;height:36px}}

/* 结果页侧栏：真实数据块 */
.pref-row{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center;padding:7px 0;border-bottom:1px dashed var(--line-soft)}
.pref-row:last-child{border-bottom:none}
.pref-row .pref-k{font-size:var(--t-sm);color:var(--t1)}
.pref-row .pref-v{font-family:var(--f-mono);font-size:var(--t-sm);color:var(--ink)}
.pref-row .pref-bar{grid-column:1 / -1;height:6px;border-radius:999px;background:var(--wash);overflow:hidden}
.pref-row .pref-bar i{display:block;height:100%;width:var(--w,0%);background:var(--blue);border-radius:999px}
.tool-actions{display:flex;flex-wrap:wrap;gap:8px}

/* ===== 查询页视觉重构（2026-10-21 第三版） ===== */

#main.is-initial .panel{background:var(--card);box-shadow:var(--sh-2);padding:clamp(20px,3vw,32px)}
#main.is-initial form.search{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center}
#main.is-initial form.search .input{height:52px;font-size:var(--t-h3)}
#main.is-initial form.search .select{height:52px}
#main.is-initial form.search .btn{height:52px;padding-inline:26px}
#main.is-initial .prequery{border:none;box-shadow:none;background:transparent;padding:0;margin-top:22px}
#main.is-initial .prequery .pq-ico{width:44px;height:44px;border-radius:var(--r-m)}
#main.is-initial .prequery h3{font-size:var(--t-h3);margin-top:14px}
#main.is-initial .prequery p{color:var(--t2)}

.query-hints{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:18px}
.query-hints button{font-size:var(--t-sm);padding:6px 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--t1);cursor:pointer}
.query-hints button:hover{border-color:var(--blue-line);color:var(--blue);background:var(--blue-soft)}

/* 结果页：玩家卡 */
.player{display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:var(--r-m);background:var(--card);box-shadow:var(--sh-1);flex-wrap:wrap}
.player-av{width:52px;height:52px;border-radius:var(--r-lg);display:grid;place-items:center;font-weight:600;letter-spacing:.02em;background:var(--blue-soft);color:var(--blue)}
.player-meta{flex:1 1 auto;min-width:0}
.player-meta .name{font-size:var(--t-h3);font-weight:600;color:var(--ink);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.player-meta .plat{margin-top:4px;font-size:var(--t-xs);color:var(--t2)}
.player-stats{display:grid;grid-template-columns:repeat(3,minmax(76px,auto));gap:clamp(12px,2vw,28px)}
.player-stats .ps-item{text-align:right}
.player-stats .k{font-size:var(--t-xs);color:var(--t2)}
.player-stats .v{font-family:var(--f-mono);font-size:var(--t-h3);font-weight:500;color:var(--ink);margin-top:2px}

/* KPI 四格 */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.kpi{padding:16px;border-radius:var(--r-m);background:var(--card);box-shadow:var(--sh-1)}
.kpi .k{font-size:var(--t-xs);color:var(--t2)}
.kpi .v{margin-top:6px;font-family:var(--f-mono);font-size:var(--t-h2);font-weight:500;color:var(--ink)}
@media (max-width:720px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.player-stats{width:100%;grid-template-columns:repeat(3,1fr)}.player-stats .ps-item{text-align:left}}

/* 玩家卡 + 4 项核心指标合并为同一个块 */
.player-card{display:flex;flex-direction:column;gap:var(--gap-s)}
.player-card .player{padding:0;background:none;box-shadow:none;border-radius:0}
.player-card .kpis{padding-top:var(--gap-s);border-top:1px solid var(--line-soft)}
@media (max-width:720px){
  .player-card .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* 比赛行 → 关联到战术地图 */
.match-map-link{
  flex:0 0 auto;padding:5px 11px;border-radius:999px;
  font-size:var(--t-xs);color:var(--blue);white-space:nowrap;
  box-shadow:inset 0 0 0 1px var(--blue-line);
}
.match-map-link:hover{background:var(--blue-soft)}

/* 比赛行 */
a.match{padding:12px 4px;border-radius:var(--r-s)}
a.match:hover{background:var(--wash);opacity:1}
.match-nums{min-width:170px;justify-content:flex-end}
.match-nums span{display:inline-flex;align-items:baseline;gap:4px}
.match-nums span b{min-width:2.2em;text-align:right;display:inline-block}

/* 分页居中 */
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pager .pg{display:flex;gap:6px}
.pager .pg button{min-width:44px;height:32px;border-radius:var(--r-s);border:1px solid var(--line);background:var(--card);font-size:var(--t-sm);cursor:pointer}
.pager .pg button[aria-current=true]{background:var(--blue);color:var(--on-blue);border-color:var(--blue)}

/* 侧栏面板间距 */
aside.stack .panel{padding:16px 18px}

/* ===== R1-001 趋势柱：一根柱子 = 一场比赛（含基线，单场也不铺满） ===== */
.bars.is-per-match{
  align-items:flex-end;justify-content:flex-start;
  gap:6px;height:104px;padding-top:20px;
  border-bottom:1px solid var(--line);
}
.bars.is-per-match.is-empty{
  padding-top:0;border-bottom-style:dashed;
  align-items:center;justify-content:center;
}
.bars-empty{margin:0;max-width:52ch;text-align:center;font-size:var(--t-xs);color:var(--t2);line-height:1.7}
.bars.is-per-match .bar-col{
  position:relative;flex:0 0 auto;height:100%;
  display:flex;align-items:flex-end;justify-content:center;
  min-width:6px;max-width:34px;
}
.bars.is-per-match .bar-col i{
  display:block;width:100%;flex:0 0 auto;min-height:2px;
  background:var(--blue-line);border-radius:var(--r-xs) var(--r-xs) 0 0;
}
.bars.is-per-match .bar-col i.is-hi{background:var(--blue)}
.bars.is-per-match .bar-col:hover i{background:var(--blue)}
.bars.is-per-match .bar-v{
  position:absolute;top:-17px;left:50%;transform:translateX(-50%);
  font-family:var(--f-mono);font-size:11px;font-weight:400;
  line-height:1;color:var(--t2);white-space:nowrap;
}
.bars-note{margin-top:8px;font-size:var(--t-xs);color:var(--t2);line-height:1.7}
@media (max-width:640px){
  .bars.is-per-match{gap:5px}
  .bars.is-per-match .bar-col{max-width:24px}
  /* 说明行在窄屏收成两行：左右端一行，中间说明整行居中，避免「仅 1 场」被拆行 */
  .bars-cap{flex-wrap:wrap;row-gap:2px}
  .bars-cap [data-bars-mid]{flex:1 1 100%;order:3;text-align:center}
}

/* ===== R1-002 未缓存比赛行：一个图标 + 一句说明，与有数据行同栅格 ===== */
.match-ico{
  width:38px;height:38px;border-radius:var(--r-s);flex:0 0 auto;
  display:grid;place-items:center;background:var(--wash);color:var(--t2);
}
.match-ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
a.match.is-uncached .match-mode{font-weight:500;color:var(--t1)}
a.match.is-uncached:hover .match-mode{color:var(--ink)}
a.match.is-uncached .tag{flex:0 0 auto;font-size:var(--t-xs)}
@media (max-width:640px){
  .match-ico{width:34px;height:34px}
  a.match.is-uncached .match-sub{white-space:normal}
}

/* ===== R1-003 分页：页码与按钮同一行对齐 ===== */
.pager.pager-inline{justify-content:flex-end;flex-wrap:nowrap}
.pager .pg{align-items:center}
.pager .pg .pg-note{
  margin-right:2px;padding-right:4px;font-family:var(--f-mono);
  font-size:var(--t-sm);color:var(--t2);white-space:nowrap;
}
.pager .pg button[disabled]{opacity:.45;cursor:default}
@media (max-width:640px){.pager.pager-inline{justify-content:flex-start}}

aside.stack .panel-h{margin-bottom:6px}

/* 查询框：内嵌清空 + 历史 */
form.search .search-box{position:relative;display:flex;align-items:center;flex:1 1 320px;min-width:0}
form.search .search-box .input{height:52px;padding-right:86px;border-radius:var(--r-m)}
/* 13.7-018：时钟按钮热区补到 40px（窄屏 44px），清空按钮同步右移避让 */
form.search .sb-x,form.search .sb-clock{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:none;background:var(--wash);display:grid;place-items:center;cursor:pointer;color:var(--t2)}
form.search .sb-x{right:56px}
form.search .sb-clock{right:10px;background:transparent}
form.search .sb-x svg,form.search .sb-clock svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round}
form.search .sb-x:hover,form.search .sb-clock:hover{color:var(--blue);background:var(--blue-soft)}
form.search .search-box:not(.has-value) .sb-x{opacity:0;pointer-events:none}
form.search .sb-history{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:30;background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);box-shadow:var(--sh-2);padding:8px;display:flex;flex-direction:column;gap:2px;max-height:280px;overflow:auto}
form.search .sb-history[hidden]{display:none}
form.search .sb-history-h{font-size:var(--t-xs);color:var(--t2);padding:6px 8px}
form.search .sb-history button{border:none;background:none;text-align:left;padding:8px;border-radius:var(--r-s);font-size:var(--t-sm);color:var(--t1);cursor:pointer}
form.search .sb-history button:hover{background:var(--wash);color:var(--ink)}
form.search .sb-history .sb-history-clr{color:var(--t2);font-size:var(--t-xs)}
@media (max-width:720px){
  form.search .search-box{flex:1 1 100%}
  form.search .sb-x,form.search .sb-clock{width:44px;height:44px}
  form.search .sb-clock{right:8px}
  form.search .sb-x{right:60px}
}

/* 查询框自适应宽度 */
form.search .field:has(.search-box){min-width:0;width:100%}
form.search .search-box{width:100%}
form.search .search-box .input{width:100%}
#main.is-initial form.search{grid-template-columns:minmax(0,1fr) auto auto}

/* 初始态：输入框独占一行，下拉与按钮并排 */
#main.is-initial form.search{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
#main.is-initial form.search .field:first-child{grid-column:1/-1}
#main.is-initial form.search .search-box{width:100%}
#main.is-initial form.search .field-sel{grid-column:1}
#main.is-initial form.search .btn[type=submit]{grid-column:2;width:100%}
/* ==================================================================
   战绩分析工作台（stats.html 六个视图）
   只用 tokens.css 的令牌：不新增色值、字号档位、圆角与阴影
   ================================================================== */

/* ---------- 视图 tab 条：桌面横向，390 可横滑 ---------- */
.wb-tabs{
  /* 结果态顶部常驻：吸顶在页头下方，滚到任意位置都能切视图；
     scroll-margin-top 保证 anchors / scrollIntoView 不会把它顶到页头背后 */
  position:sticky;top:74px;z-index:60;
  margin-bottom:var(--gap-s);
  padding-top:2px;padding-bottom:2px;
  background:var(--bg);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  scroll-margin-top:88px;
}
.wb-tabs[hidden]{display:none}
.wb-tabs::-webkit-scrollbar{display:none}
.wb-tabs .wb-seg{flex-wrap:nowrap}
@media (max-width:680px){
  /* 390 视口：6 个 tab 一行放不下，改为横向滚动（不换行，避免顶出两行） */
  .wb-tabs{margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad)}
}
.wb-view{display:flex;flex-direction:column;gap:var(--gap-s)}
.wb-view[hidden]{display:none}

/* ---------- 分组卡片 ---------- */
.wb-card{padding:clamp(18px,2vw,26px)}
.wb-card .panel-h{align-items:flex-start;flex-wrap:wrap;gap:8px 12px}
.wb-badges{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.wb-badge{
  display:inline-flex;align-items:center;
  padding:3px 9px;border-radius:999px;
  font-size:var(--t-xs);font-weight:500;white-space:nowrap;
  background:var(--wash);color:var(--t2);
}
.wb-badge.is-official{background:var(--blue-soft);color:var(--blue)}
.wb-badge.is-raw{background:var(--ok-soft);color:var(--ok)}
.wb-badge.is-partial{background:var(--warn-soft);color:var(--warn)}
/* R13-1 数据来源徽章 */
.wb-badge.is-fresh{background:var(--ok-soft);color:var(--ok)}
.wb-badge.is-cached{background:var(--wash);color:var(--t2)}
.wb-badge.is-stalec{background:var(--warn-soft);color:var(--warn)}
.wb-note{margin-top:10px}
.wb-note.is-stale{color:var(--warn)}
.wb-body{margin-top:var(--gap-s)}

/* ---------- 指标格 ---------- */
.wb-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:10px}
.wb-metric{
  padding:12px 14px;border-radius:var(--r-m);background:var(--wash);
  min-width:0;
}
.wb-metric-k{font-size:var(--t-xs);color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wb-metric-v{margin-top:4px;font-size:var(--t-h3);font-weight:500;color:var(--ink);word-break:break-word}
@media (max-width:520px){.wb-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- 键值行 ---------- */
.wb-kv{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:6px 0;border-bottom:1px dashed var(--line-soft);
}
.wb-kv:last-child{border-bottom:none}
.wb-kv-k{font-size:var(--t-xs);color:var(--t2);flex:0 0 auto}
.wb-kv-v{font-size:var(--t-sm);color:var(--ink);text-align:right;word-break:break-word}

/* 趋势入口 */
.wb-entry{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 14px;border-radius:var(--r-m);background:var(--wash)}
.wb-entry-t{font-size:var(--t-sm);font-weight:500;color:var(--ink)}

/* ---------- 趋势图 ---------- */
.wb-ctl{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:var(--gap-s)}
.wb-chart-wrap{border-radius:var(--r-m);background:var(--wash);padding:8px 4px;overflow:hidden}
.wb-chart{display:block;width:100%;height:auto;max-height:320px}
.wb-chart .wb-grid{stroke:var(--line);stroke-width:1}
.wb-chart .wb-line-raw{fill:none;stroke:var(--blue-lt);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;opacity:.75}
.wb-chart .wb-line-ma{fill:none;stroke:var(--blue);stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round}
.wb-chart .wb-dot{fill:var(--blue)}
.wb-chart .wb-axis{font-size:11px;fill:var(--t2)}
.wb-legend{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:8px;font-size:var(--t-xs);color:var(--t2)}
.wb-legend-i{display:inline-flex;align-items:center;gap:6px}
.wb-legend-i::before{content:"";width:16px;height:3px;border-radius:var(--r-xs);background:var(--blue-lt)}
.wb-legend-i.is-ma::before{background:var(--blue);height:4px}
.wb-legend-i.is-note::before{display:none}
.wb-summary{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:12px;padding:11px 14px;border-radius:var(--r-m);background:var(--blue-soft);font-size:var(--t-sm);color:var(--t1)}
.wb-summary b{font-weight:500;color:var(--blue)}
.wb-summary.is-ok{background:var(--ok-soft)}
.wb-summary.is-ok b{color:var(--ok)}
.wb-summary.is-red{background:var(--red-soft)}
.wb-summary.is-red b{color:var(--red)}
.wb-summary.is-warn{background:var(--warn-soft)}
.wb-summary.is-warn b{color:var(--warn)}

/* ---------- 空态 / 冷却态 ---------- */
.wb-empty{padding:14px 16px;border-radius:var(--r-m);background:var(--wash)}
.wb-empty.is-error{background:var(--red-soft)}
.wb-empty.is-error .note{color:var(--red)}
.wb-empty .note{max-width:64ch}
.wb-cooling{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 14px;border-radius:var(--r-m);background:var(--warn-soft)}
.wb-cooling .note{color:var(--warn)}
.wb-cooling-t{font-size:var(--t-sm);color:var(--warn);font-family:var(--f-mono)}

/* ---------- 表格（容器内横向滚动，整页不横溢） ---------- */
.wb-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-m)}
.wb-table-scroll .tbl{min-width:560px}
.wb-tbl td,.wb-tbl th{white-space:nowrap}


/* ---------- 玩家卡：三行式（R3-001） ---------- */
.wb-pcard{display:flex;flex-direction:column;gap:0}
/* ==================================================================
   R13-6 玩家卡重构：一张卡带出身份 / 核心指标 / 段位 / 生存等级
   只用现有令牌，不新增色值。
   ================================================================== */
.wb-pcard-v2{gap:12px}
/* R13-8：顶部一行四模块（身份 / 段位 / 生存等级 / 封禁大卡），内容全部左对齐 */
.wb-pc-grid4{
  display:grid;align-items:stretch;
  grid-template-columns:minmax(200px,1.5fr) minmax(160px,1fr) minmax(160px,1fr) minmax(150px,.9fr);
  gap:10px;
}
.wb-pc-mod,.wb-pc-grid4 > .wb-prow{
  background:var(--wash);border-radius:var(--r-m);
  padding:12px 14px;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:4px;
}
.wb-pc-grid4 > .wb-prow{border-top:none;margin:0;padding:12px 14px;flex-direction:column;align-items:stretch}
.wb-pc-grid4 .wb-pcell{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  padding:0;border:none;background:none;min-width:0;
}
.wb-pc-grid4 .wb-pk{margin:0}
.wb-ban-card{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;
  padding:14px;border-radius:var(--r-m);border:1px solid transparent;min-height:96px;min-width:0;
}
.wb-ban-card.is-ok{background:var(--ok-soft);border-color:var(--ok-soft);color:var(--ok)}
.wb-ban-card.is-warn{background:var(--warn-soft);border-color:var(--warn-soft);color:var(--warn)}
.wb-ban-card.is-red{background:var(--red-soft);border-color:var(--red-soft);color:var(--red)}
.wb-ban-card-line{display:flex;align-items:center;gap:8px;min-width:0}
.wb-ban-card-i{width:14px;height:14px;flex:0 0 auto;border-radius:50%;background:currentColor}
.wb-ban-card-v{font-size:var(--t-h3);font-weight:600;line-height:1.3;overflow-wrap:anywhere}
@media (max-width:1100px){
  .wb-pc-grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .wb-pc-grid4{grid-template-columns:1fr}
}

.wb-pc-head{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:12px 14px;border-radius:var(--r-m);background:var(--wash);
}
.wb-pav{
  width:56px;height:56px;flex:0 0 auto;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--blue-soft);color:var(--blue);
  font-size:var(--t-lock-22);font-weight:600;line-height:1;
}
.wb-pc-meta{flex:1 1 260px;min-width:0}
.wb-pc-name{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wb-pc-nick{font-size:var(--t-h3);font-weight:600;color:var(--ink);overflow-wrap:anywhere;line-height:1.35}
.wb-pc-sub{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px;min-width:0}
.wb-pc-status{display:flex;flex-direction:column;align-items:flex-end;gap:6px;margin-left:auto}
.wb-pc-status-k{font-size:var(--t-xs);color:var(--t2)}
.wb-pc-status-t{font-size:var(--t-xs);color:var(--t2);font-family:var(--f-mono)}
.wb-pc-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px}
.wb-pc-kpis .wb-metric{margin:0}
.wb-pc-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.wb-pc-row .wb-prow{margin:0;padding:0;border-top:none}
.wb-pc-row .wb-pcell{padding:0}
@media (max-width:720px){
  .wb-pc-status{margin-left:0;align-items:flex-start}
  .wb-pc-row{grid-template-columns:1fr}
  .wb-pc-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}

.wb-prow{
  display:flex;align-items:center;gap:10px 20px;flex-wrap:wrap;
  min-height:44px;padding:9px 0;line-height:1.45;
  border-top:1px solid var(--line-soft);
}
.wb-prow:first-child{border-top:none;padding-top:0}
.wb-pcell{
  display:flex;align-items:center;gap:8px;min-width:0;
  flex:0 1 auto;white-space:nowrap;
}
.wb-pk{font-size:var(--t-xs);color:var(--t2);flex:0 0 auto}
.wb-pv{display:flex;align-items:center;gap:8px;min-width:0;line-height:1.45}
.wb-pv-id{
  font-family:var(--f-mono);font-size:var(--t-xs);color:var(--t2);
  background:var(--wash);padding:3px 8px;border-radius:var(--r-s);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.wb-pv-strong{font-size:var(--t-h3);font-weight:500;color:var(--ink);line-height:1.45}
/* 段位图缺失时的降级徽标（同配色 CSS 方块，不用外链、不用占位图） */
.wb-tier-ico{
  width:44px;height:44px;border-radius:var(--r-md);flex:0 0 auto;
  display:grid;place-items:center;
  font-size:var(--t-sm);font-weight:600;color:var(--card);background:var(--t2);
}
.wb-tier-ico.is-bronze{background:var(--tier-bronze)}
.wb-tier-ico.is-silver{background:var(--tier-silver)}
.wb-tier-ico.is-gold{background:var(--tier-gold)}
.wb-tier-ico.is-plat{background:var(--tier-plat)}
.wb-tier-ico.is-crystal,.wb-tier-ico.is-dia{background:var(--tier-dia)}
.wb-tier-ico.is-master{background:var(--tier-master)}
.wb-tier-ico.is-pred{background:var(--tier-pred)}
.wb-pv-sub{font-size:var(--t-sm);color:var(--t2);line-height:1.45}
.wb-tier-img{width:44px;height:44px;flex:0 0 auto;display:block;object-fit:contain}
.tier-badge{vertical-align:middle}
@media (max-width:520px){
  /* 390 降级为分块：一块一个字段组，块内标签与数值仍在同一行同一基线 */
  .wb-prow{flex-direction:column;align-items:stretch;gap:8px;padding:10px 0}
  .wb-pcell{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:center;gap:8px;white-space:normal}
  .wb-pv{flex-wrap:wrap}
  .wb-pv-id{white-space:normal;word-break:break-all}
}

/* ---------- R13-9 武器胶囊卡：圆形武器图 + 名称 / 等级 + 经验进度 + 指标胶囊 ---------- */
.wb-wcaps{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:10px}
/* R14-3：同一行武器卡的进度条必须落在同一条水平线 —— 卡体拉伸到行高（grid stretch）
   + 内容顶部对齐 + 标题区恒单行，进度条 y 只由「上内边距 + 标题高度 + gap」决定，
   与武器名长短、指标胶囊换几行无关；缺图（图标占位固定 54px）、缺数据同样对齐。 */
.wb-wcap{
  display:flex;align-items:stretch;gap:10px;min-width:0;
  padding:10px 14px 10px 10px;border-radius:var(--r-l);background:var(--wash);
  box-shadow:inset 0 0 0 1px var(--line-soft);
  transition:background-color .16s ease,box-shadow .16s ease;
}
.wb-wcap:hover{background:var(--blue-soft);box-shadow:inset 0 0 0 1px var(--blue-line)}
.wb-wcap-ico{
  flex:0 0 auto;width:54px;height:54px;align-self:center;border-radius:50%;background:var(--card);
  box-shadow:inset 0 0 0 1px var(--line);display:grid;place-items:center;overflow:hidden;
}
.wb-wcap-img{width:44px;height:44px;object-fit:contain;display:block}
.wb-wcap-b{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:stretch;gap:5px}
/* 标题区恒为一行：名字超长省略（完整名在 title 里），等级标签不换行不压缩 */
.wb-wcap-hd{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;min-width:0;min-height:22px}
.wb-wcap-hd .tag{flex:0 0 auto;white-space:nowrap}
.wb-wcap-n{
  flex:1 1 auto;min-width:0;font-size:var(--t-sm);font-weight:500;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.wb-wbar{
  position:relative;width:100%;height:8px;border-radius:var(--r-pill);
  background:var(--line-soft);overflow:hidden;
}
.wb-wbar-fill{
  display:block;height:100%;border-radius:var(--r-pill);background:var(--blue);
  transition:width .35s ease;
}
.wb-wbar-fill.is-na{width:100% !important;background:var(--line)}  /* important-ok: 进度条宽度由 JS 写行内 width */
.wb-wcap-stats{display:flex;flex-wrap:wrap;gap:4px 6px;min-width:0;margin-top:auto}
.wb-wchip{
  display:inline-flex;align-items:baseline;gap:5px;padding:2px 8px;border-radius:var(--r-pill);
  background:var(--card);box-shadow:inset 0 0 0 1px var(--line-soft);
  font-size:11px;white-space:nowrap;
}
.wb-wchip i{font-style:normal;color:var(--t2)}
.wb-wchip b{font-weight:500;color:var(--ink);font-family:var(--f-mono)}
@media (max-width:520px){
  .wb-wcaps{grid-template-columns:1fr}
  .wb-wcap-ico{width:46px;height:46px}
  .wb-wcap-img{width:38px;height:38px}
}
/* ---------- R13-9 轻量比赛卡：地图图框 + 悬停蒙层显示「查看比赛详情页」 ---------- */
.wb-mcards{display:flex;flex-direction:column;gap:8px}
.wb-mcard{
  position:relative;
  border-radius:var(--r-m);background:var(--card);
  box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;
  transition:background-color .16s ease,box-shadow .16s ease;
}
.wb-mcard:hover{background:var(--blue-soft);box-shadow:inset 0 0 0 1px var(--blue-line)}
.wb-mcard-hit{display:flex;align-items:stretch;gap:12px;padding:10px;text-decoration:none;color:inherit}
.wb-mcard-hit:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.wb-mcard-media{
  position:relative;flex:0 0 auto;width:118px;min-height:84px;border-radius:var(--r-s);
  overflow:hidden;background:var(--wash-deep);display:flex;align-items:flex-end;
}
.wb-mcard-media.is-empty{background:var(--wash)}
.wb-mcard-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.wb-mcard-mapn{
  position:relative;z-index:1;margin:6px;padding:2px 8px;border-radius:var(--r-pill);
  background:var(--shade-62);color:var(--on-scrim);font-size:11px;line-height:1.5;
  max-width:calc(100% - 12px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* R13-9b：蒙层铺满整张卡居中显示，pointer-events:none 保证整卡可点 */
.wb-mcard-veil{
  position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;
  background:var(--shade-42);opacity:0;transition:opacity .16s ease;
  pointer-events:none;
}
.wb-mcard:hover .wb-mcard-veil,
.wb-mcard-hit:focus-visible .wb-mcard-veil{opacity:1}
.wb-mcard-cta{
  padding:5px 10px;border-radius:var(--r-pill);background:var(--card);color:var(--blue);
  font-size:var(--t-xs);font-weight:500;box-shadow:var(--sh-drop);white-space:nowrap;
}
.wb-mcard-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px;padding:2px 2px 0}
.wb-mcard-l1{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.wb-mcard-rk{font-family:var(--f-mono);font-size:var(--t-sm);font-weight:600;color:var(--t2)}
.wb-mcard-rk.is-top{color:var(--blue)}
.wb-mcard-mode{font-size:var(--t-sm);font-weight:500;color:var(--ink)}
.wb-mcard-sub{font-size:var(--t-xs);color:var(--t2);word-break:break-word}
.wb-mcard-nums{display:flex;flex-wrap:wrap;gap:4px 6px;margin-top:3px}
.wb-mchip{
  display:inline-flex;align-items:baseline;gap:5px;padding:2px 8px;border-radius:var(--r-pill);
  background:var(--wash);font-size:11px;white-space:nowrap;
}
.wb-mchip i{font-style:normal;color:var(--t2)}
.wb-mchip b{font-weight:500;color:var(--t1);font-family:var(--f-mono)}
.wb-mcard.is-uncached{display:flex;align-items:center;gap:12px;padding:10px}
.wb-mcard.is-uncached .wb-mcard-media{align-items:center;justify-content:center;width:92px}
@media (max-width:560px){
  .wb-mcard-hit{flex-direction:column;gap:8px}
  .wb-mcard-media{width:auto;min-height:0;height:128px}
  .wb-mcard-body{padding:0 2px 2px}
  .wb-mcard.is-uncached .wb-mcard-media{width:92px;height:84px}
}

/* ---------- 分页 ---------- */
.wb-pager{margin-top:var(--gap-s);justify-content:space-between}
.wb-pager .pg{flex-wrap:wrap}
.wb-pager .pg button{
  min-width:36px;height:32px;padding:0 9px;border-radius:var(--r-s);
  border:1px solid var(--line);background:var(--card);
  font-size:var(--t-xs);font-family:var(--f-mono);cursor:pointer;
}
.wb-pager .pg button[aria-current=true]{background:var(--blue);color:var(--card);border-color:var(--blue)}
.wb-pager .pg button[disabled]{opacity:.45;cursor:default}
.wb-pager .pg-gap{color:var(--t2);font-size:var(--t-xs);align-self:center;padding:0 2px}

/* ==================================================================
   R4-004 · 查询加载态骨架屏
   ------------------------------------------------------------------
   目标：点「查询」后内容区立刻占位（固定最小高度），loading 动效在
   内容区内跑，文档流不跳动，页脚始终留在页面底部。
   ================================================================== */
body.is-loading-view #main{min-height:calc(100vh - 132px)}
body.is-loading-view .prequery{display:none}

.wb-skel{
  min-height:clamp(420px,56vh,620px);
  display:flex;flex-direction:column;gap:var(--gap-s);
}
.wb-skel-top{display:flex;align-items:center;gap:10px;min-height:26px}
.wb-skel-tip{margin:0;font-size:var(--t-sm);color:var(--t2)}
.wb-skel-tip .mono{color:var(--blue);font-weight:500}
.wb-skel-spin{
  width:18px;height:18px;flex:0 0 auto;border-radius:50%;
  border:2px solid var(--blue-soft);border-top-color:var(--blue);
  animation:qs-rot .8s linear infinite;
}
.wb-skel-tabs{display:flex;gap:8px;flex-wrap:wrap}
.wb-skel-tab{width:64px;height:34px;border-radius:999px;background:var(--wash)}
.wb-skel-card{
  display:flex;flex-direction:column;gap:12px;
  min-height:150px;background:var(--card);
}
.wb-skel-hd{width:38%;height:16px;border-radius:var(--r-s);background:var(--wash)}
.wb-skel-rows{display:flex;flex-direction:column;gap:10px}
.wb-skel-row{display:block;height:44px;border-radius:var(--r-m);background:var(--wash)}
.wb-skel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--gap-s)}
.wb-skel-cell{display:block;height:66px;border-radius:var(--r-m);background:var(--wash)}

/* 骨架扫光：只动背景位置，不改尺寸，不引起回流 */
.wb-skel-tab,.wb-skel-hd,.wb-skel-row,.wb-skel-cell{
  position:relative;overflow:hidden;
  background-image:linear-gradient(90deg,var(--wash) 0%,var(--wash-deep) 45%,var(--wash) 90%);
  background-size:220% 100%;
  animation:wb-sk 1.25s var(--ease) infinite;
}
@keyframes wb-sk{0%{background-position:120% 0}100%{background-position:-40% 0}}

/* 骨架 → 内容：一次淡入 */
.wb-in{animation:wb-fade .28s var(--ease) both}
@keyframes wb-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .wb-skel-spin,.wb-skel-tab,.wb-skel-hd,.wb-skel-row,.wb-skel-cell{animation:none}
  .wb-in{animation:none}
}

/* ==================================================================
   R4-009 · 封禁结果卡：整卡只在正中显示大号状态字
   ------------------------------------------------------------------
   昵称 / 平台 / 地区 / 查询时间等次要信息全部移除，卡下不留任何内容。
   配色：正常 var(--ok) ｜ 临时封禁 #B45309（需求指定色）｜ 永久封禁 var(--red)
   深底时 #B45309 对比度不足，按同一色相提亮一档（仍沿用口吻一致的琥珀色）。
   ================================================================== */
.verdict-single{
  display:grid;place-items:center;
  min-height:172px;padding:24px;
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-l);box-shadow:var(--sh-1);
  text-align:center;
}
.verdict-word{
  font-size:clamp(32px,4.4vw,50px);font-weight:600;line-height:1.15;
  letter-spacing:.02em;color:var(--t2);
}
.verdict-word.is-ok{color:var(--ok)}
.verdict-word.is-warn{color:var(--ban-temp)}
.verdict-word.is-red{color:var(--red)}
[data-theme="dark"] .verdict-word.is-warn,[data-mode="dark"] .verdict-word.is-warn{color:var(--ban-temp-d)}

/* ==================================================================
   R4-011 · 封禁明细：默认 5 行高，容器内滚动（最多露出 10 行），
   超过 10 条走全站分页；悬停行高亮与「本站查询记录」一致（--wash）
   ================================================================== */
.ban-detail-wrap{
  --ban-row-h:50px;
  overflow-y:auto;overscroll-behavior:contain;
  max-height:calc(var(--ban-row-h) * 5);
  border:1px solid var(--line);border-radius:var(--r-m);
}
.ban-detail-wrap.is-paged{max-height:calc(var(--ban-row-h) * 10)}
.ban-detail{
  width:100%;border-collapse:separate;border-spacing:0;
}
.ban-detail thead th{
  position:sticky;top:0;z-index:1;
  background:var(--wash);
  font-size:var(--t-xs);font-weight:500;color:var(--t2);text-align:left;
  padding:8px 12px;height:38px;
  border-bottom:1px solid var(--line);white-space:nowrap;
}
.ban-detail tbody tr{height:var(--ban-row-h)}
.ban-detail tbody td{
  padding:5px 12px;height:var(--ban-row-h);
  font-size:var(--t-sm);color:var(--t1);vertical-align:middle;
  border-bottom:1px solid var(--line-soft);background:transparent;
}
.ban-detail tbody tr:last-child td{border-bottom:0}
/* 与「本站查询记录」同一套悬停高亮 */
.ban-detail tbody tr:hover td{background:var(--wash)}
.ban-detail .bd-name{font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
.ban-detail .bd-time{font-variant-numeric:tabular-nums;color:var(--t2);white-space:nowrap}
.ban-detail .bd-act{text-align:right;white-space:nowrap}
.ban-detail .bd-act .btn,.ban-detail .bd-act .more{margin-left:8px}
.ban-pager{margin-top:10px}
@media (max-width:720px){
  .ban-detail .bd-name{max-width:120px}
  .ban-detail .bd-act .btn,.ban-detail .bd-act .more{margin-left:4px}
}