@charset "UTF-8";
/* ==================================================================
   比赛 / 回放 / 状态 / 关于 · 页面补充样式
   ------------------------------------------------------------------
   只引用 tokens.css 的设计令牌，不新增与基线不同的版式结构。
   这里放两类东西：
     1. 数据接入需要的状态提示（加载 / 无数据 / 失败）
     2. 基线里用行内样式表达的数据驱动尺寸，改成 class
   ================================================================== */

/* ---------- 状态提示块（与 hub-data.js 的 statusBlock 配套） ---------- */
.hub-state{
  display:flex;align-items:flex-start;gap:10px;
  margin:0 0 var(--gap-s);
  padding:12px 14px;
  border-radius:var(--r-m);
  background:var(--wash);
  box-shadow:inset 0 0 0 1px var(--line);
  font-size:var(--t-sm);line-height:1.7;color:var(--t2);
}
.hub-state:last-child{margin-bottom:0}
.hub-state > b{
  flex-shrink:0;width:19px;height:19px;margin-top:.35em;
  border-radius:50%;
  display:grid;place-items:center;
  background:var(--card);
  box-shadow:inset 0 0 0 1px var(--line);
  font-family:var(--f-mono);font-size:var(--t-xs);font-weight:500;
}
.hub-state.is-loading > b{color:var(--blue)}
.hub-state.is-empty > b{color:var(--t2)}
.hub-state.is-error{
  background:var(--red-soft);
  box-shadow:inset 0 0 0 1px var(--red);
  color:var(--red);
}
.hub-state.is-error > b{background:var(--card);color:var(--red)}

/* ---------- 贴边表格卡片（u-flush：表格铺满卡片宽度） ---------- */
.panel.u-flush > .panel-h{
  padding:clamp(20px,2.2vw,28px) clamp(20px,2.2vw,28px) 0;
}
.panel.u-flush > .tbl{margin-top:8px}
.panel.u-flush > .note{
  margin-top:0;
  padding:0 clamp(20px,2.2vw,28px) clamp(16px,2vw,20px);
}

/* ---------- 正文链接（替掉基线的行内 color/font-weight） ---------- */
.u-link{color:var(--blue);font-weight:500}
.u-link:hover{color:var(--blue-hover)}

/* ---------- 参赛者表：本人所在行 ---------- */
.tbl tbody tr.is-me td{background:var(--blue-soft)}
.tbl tbody tr.is-me:hover td{background:var(--wash)}

/* ---------- 回放台：无轨迹时的角标 ---------- */
.plan-badge.is-warn{background:var(--warn-soft);color:var(--warn)}

/* ---------- 状态页：时间范围条 ---------- */
.rangebar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-bottom:var(--gap);
}
.rangebar .btn{flex-shrink:0}
.rangebar .seg{flex-wrap:wrap}

/* ---------- 在线趋势：采样不足时的说明 ---------- */
.bars-note{margin-top:8px}
.bars.is-empty{
  align-items:center;justify-content:center;
  border-radius:var(--r-s);
  box-shadow:inset 0 0 0 1px var(--line);
}

/* ---------- 关于页：来源清单 ---------- */
.doc-body li > b{font-weight:500;color:var(--ink)}
.doc-body .src-t{font-size:var(--t-sm);font-weight:500;color:var(--ink)}
.doc-body .src-d{margin-top:1px;font-size:var(--t-xs);color:var(--t2)}

/* 服务可用性行：标签与数值对齐（2026-10-21） */
.panel .svc-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.panel .svc-row .svc-main{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 auto}
.panel .svc-row .svc-n{font-size:var(--t-sm);color:var(--ink);white-space:nowrap}
.panel .svc-row .tag{flex:0 0 auto;white-space:nowrap}
.panel .svc-row .svc-v{margin-left:auto;font-family:var(--f-mono);font-size:var(--t-sm);color:var(--t1);white-space:nowrap;flex:0 0 auto}
@media (max-width:640px){.panel .svc-row{align-items:flex-start;flex-direction:column;gap:6px}.panel .svc-row .svc-v{margin-left:0}}

/* 队伍成员 */
.team-members{display:flex;flex-wrap:wrap;gap:4px 10px}
.team-members span{font-size:var(--t-sm);color:var(--t1)}
.team-members span.is-me{color:var(--blue);font-weight:500}
.tbl tr.is-me td{background:var(--blue-soft)}

/* ==================================================================
   R13-3 比赛概要 · 五项同一行铺满容器
   地图不再是整幅大图卡，降级为与模式 / 比赛时间 / 场次时长 / 本队名次
   平级的一格：缩略图 + 真实地图名；缩略图取不到就只显示地图名，不放占位图。
   ================================================================== */
/* 五项等宽：5 列铺满整个概要宽度（窄屏由 replay.css 降为 2 / 1 列） */
.md-summary{grid-template-columns:repeat(5,minmax(0,1fr))}
/* R13-9c：地图格 = 一个图框，预览图铺满整框、无留白，框内不放任何文字 */
.md-sum-map{
  position:relative;min-width:0;min-height:76px;
  border-radius:var(--r-s);overflow:hidden;
  background:var(--wash);box-shadow:inset 0 0 0 1px var(--line);
}
.md-map-thumb{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;display:block;
}
@media (max-width:1100px){
  .md-summary{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:720px){
  .md-sum-map{min-height:64px}
}

/* ==================================================================
   R5-006 队伍总览 · 可点选队员 chip + 成员详情区
   ================================================================== */
.md-chips{display:flex;flex-wrap:wrap;gap:8px}
.md-chip{
  display:inline-flex;align-items:center;gap:8px;
  min-height:36px;padding:6px 14px;
  border:0;border-radius:999px;cursor:pointer;
  background:var(--wash);box-shadow:inset 0 0 0 1px var(--line);
  font-family:inherit;font-size:var(--t-sm);color:var(--t1);
}
.md-chip:hover{background:var(--card);box-shadow:inset 0 0 0 1px var(--blue-line)}
.md-chip:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.md-chip.is-on{
  background:var(--blue-soft);color:var(--blue);font-weight:500;
  box-shadow:inset 0 0 0 2px var(--blue);
}
.md-chip-n{
  max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.md-chip.is-on .md-chip-n{text-decoration:underline;text-underline-offset:3px}
.md-chip-k{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-size:var(--t-xs);color:var(--t2)}
.md-chip.is-on .md-chip-k{color:var(--blue)}
.md-chip-me{
  flex:0 0 auto;padding:1px 6px;border-radius:999px;
  background:var(--blue);color:var(--on-blue);
  font-size:var(--t-xs);line-height:1.6;
}
.md-member{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  gap:var(--gap-s);margin-top:var(--gap-s);
}
.md-member-acts{margin-top:10px}
.md-member-acts:empty{display:none}
@media (max-width:640px){
  .md-member{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md-chip-n{max-width:120px}
}

/* ==================================================================
   R5-007 查封禁状态 · 语义底色状态卡
   正常 = var(--ok) 系 / 封禁 = var(--red) 系 / 未知 = 中性灰；
   深浅两套令牌都在 tokens.css 里成对定义，深底不会白底黑字打架。
   ================================================================== */
.md-ban-card{
  border-radius:var(--r-m);
  padding:14px 16px;
  background:var(--wash);color:var(--t2);
  border-left:4px solid var(--line);
  box-shadow:inset 0 0 0 1px var(--line);
}
.md-ban-card.is-ok{
  background:var(--ok-soft);color:var(--ok);
  border-left-color:var(--ok);
  box-shadow:inset 0 0 0 1px var(--ok-line);
}
.md-ban-card.is-bad{
  background:var(--red-soft);color:var(--red);
  border-left-color:var(--red);
  box-shadow:inset 0 0 0 1px var(--red-line);
}
.md-ban-card.is-unknown{
  background:var(--wash);color:var(--t2);
  border-left-color:var(--line);
}
.md-ban-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.md-ban-h b{font-size:var(--t-body);font-weight:500}
.md-ban-sub{font-size:var(--t-xs);opacity:.85;overflow-wrap:anywhere}
.md-ban-meta{margin-top:4px;font-size:var(--t-xs);opacity:.92;line-height:1.7;overflow-wrap:anywhere}

/* ==================================================================
   R5-009 段位图徽标（全站共用 window.__tier，素材 /assets/tier/*.webp）
   ================================================================== */
.md-tier{display:inline-flex;align-items:center;vertical-align:middle;flex:0 0 auto}
.md-tier img{width:auto;object-fit:contain;vertical-align:middle}
/* R5-009c：chip 徽标 28px（chip 自身 36px 高，不撑高）；列表 32px */
.md-tier.is-name img{height:28px}
.md-tier.is-list img{height:32px}
.md-tier-fb{
  display:inline-flex;align-items:center;
  padding:1px 8px;border-radius:999px;
  background:var(--wash);box-shadow:inset 0 0 0 1px var(--line);
  font-size:var(--t-xs);color:var(--t1);white-space:nowrap;
}
.md-tier.is-list .md-tier-fb{font-size:11px;padding:1px 6px}


/* ==================================================================
   R10-4 选手数据三合一子标签（队伍总览 / 封禁状态 / 技术指标）
   触控高度 44px；选中态走 --blue 系令牌，与全站 seg / chip 同一套观感。
   ================================================================== */
.md-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--gap-s)}
.md-tab{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:8px 18px;
  border:0;border-radius:999px;cursor:pointer;
  background:var(--wash);box-shadow:inset 0 0 0 1px var(--line);
  font-family:inherit;font-size:var(--t-sm);color:var(--t1);
}
.md-tab:hover{background:var(--card);box-shadow:inset 0 0 0 1px var(--blue-line)}
.md-tab:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.md-tab.is-on{
  background:var(--blue-soft);color:var(--blue);font-weight:500;
  box-shadow:inset 0 0 0 2px var(--blue);
}
.md-pane-h{margin-bottom:8px}
.md-pane-h:empty{display:none}
@media (max-width:640px){
  .md-tabs{gap:6px}
  .md-tab{flex:1 1 auto;min-width:0;padding:8px 10px}
}

/* R10-4：本局信息里的 36 位比赛 ID 截断显示（完整值走 title + 复制按钮） */
.md-id-v{
  display:inline-block;max-width:140px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  vertical-align:middle;
}
/* 复制成功的播报区域：视觉上不占位，只给读屏与辅助技术 */
.md-copy-live{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ==================================================================
   状态页走查修复（2026-10-22）
   5.1 绿框（.overall）文字：标题不再被 ensureH2() 降级丢属性而停在「—」；
       文本块 min-width:0，窄屏数值块独占一行且不右对齐孤行。
   5.2 历史事件：时间 + 状态标签 + 摘要 同一行展示，摘要尾部省略 / 可点击展开。
   5.3 字体：本页正文只用 --f-sans；数字与时间用全站同一套 --f-mono，
       并统一 tabular-nums，保证单行对齐不再跳动。
   ================================================================== */

/* ---------- 5.1 总览绿框 ---------- */
.overall{align-items:center}
.overall .overall-body{flex:1 1 0;min-width:0}
.overall .overall-t{
  margin:0;
  font-size:var(--t-h3);font-weight:500;color:var(--ink);line-height:1.45;
  overflow-wrap:anywhere;
}
.overall .overall-d{
  margin-top:2px;font-size:var(--t-sm);color:var(--t1);
  line-height:1.7;overflow-wrap:anywhere;min-width:0;
}
.overall .overall-n{flex:0 0 auto}
.overall .overall-n .v,.overall .overall-n .k{white-space:nowrap}
@media (max-width:720px){
  /* 数值块独占一行、左对齐，避免窄屏被挤到右下角形成孤行 */
  .overall .overall-n{
    margin-left:0;flex:1 0 100%;text-align:left;
    display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  }
  .overall .overall-n .k{margin-top:0}
}

/* 服务可用性行：名称过长时省略而不是溢出 */
.panel .svc-row .svc-n{
  min-width:0;overflow:hidden;text-overflow:ellipsis;
}

/* ---------- 5.2 历史事件：一行一条 ---------- */
.events{display:block}
.ev{
  display:grid;
  grid-template-columns:auto auto auto minmax(0,1fr);
  align-items:center;gap:10px;
  padding:11px 0;border-bottom:1px solid var(--line-soft);
  cursor:default;
}
.ev:last-child{border-bottom:none}
.ev .ev-d{margin-top:0}
.ev .ev-time{
  font-size:var(--t-xs);color:var(--t2);white-space:nowrap;
}
.ev .ev-tag{flex:0 0 auto;white-space:nowrap}
.ev .ev-s{
  min-width:0;font-size:var(--t-sm);color:var(--t1);line-height:1.7;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ev.is-open .ev-s{
  white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;
}
@media (max-width:720px){
  .ev{gap:8px;padding:12px 0}
  .ev .ev-s{font-size:var(--t-xs)}
}

/* ---------- 5.3 字体统一 ---------- */
.overall,.overall-body,.overall-t,.overall-d,
.panel,.svc-row,.svc-main,.svc-foot,.svc-n,
.events,.ev,.ev-s,.kpis,.kpi,.kpi .k,.rangebar,.bars-cap,.hub-state{
  font-family:var(--f-sans);
}
.svc-v,.ev .ev-time,.kpi .v,.overall .overall-n .v,.bars-cap span{
  font-family:var(--f-mono);font-variant-numeric:tabular-nums;
}