/* ==================================================================
   ui-fix.css —— 全局 UI 审计修复层（追加在页面末尾，优先级最高）
   覆盖：粘性表头 / 点击热区 / 按钮尺寸 / 表格溢出 / 对比度 / 占位
   ================================================================== */

/* 13.7-002 · 在线人数胶囊 / 服务状态指示（全站生效）
   原本只在 assets/misc.css 里定义，而 misc.css 仅 7 个页面加载；
   这里补一份，保证 app.js 在任意页面挂出的 .hd-status 观感一致。 */
.hd-status{display:flex;align-items:center;gap:8px;margin-right:2px}
.hd-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:999px;background:var(--wash);
  font-size:var(--t-xs);color:var(--t2);white-space:nowrap;
}
.hd-pill:hover{background:var(--blue-soft);color:var(--blue)}
.hd-pill b{font-family:var(--f-mono);font-weight:500;color:var(--ink)}
.hd-dot-wrap{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:999px;background:var(--wash);
  font-size:var(--t-xs);color:var(--t2);white-space:nowrap;
}
.hd-dot-wrap:hover{background:var(--blue-soft);color:var(--blue)}
/* 13.7-006：窄屏不再整块隐藏在线胶囊（原来 ≤680px 直接 display:none，
   全站页头都看不到「在线 N」，只有 status.html 自己的内容区有）。
   改为紧凑形态：隐藏状态文字，只留「在线 N」胶囊，保证页头仍单行不溢出。 */
@media (max-width:680px){
  .hd-status{gap:6px;margin-right:0}
  .hd-status .hd-dot-wrap{display:none}
  .hd-pill{padding:4px 9px}
  .hd-pill .hd-pill-t{display:none}
}
@media (max-width:430px){
  /* R8-C：10px 在手机上过小，提到 12px（胶囊已限高 44px，不会撑破页头单行） */
  .hd-pill{padding:4px 8px;font-size:12px}
}

/* 13.7-056 · 后台 tab 选中态（社交「在线/申请/好友」；VP雷达 R3-025 后不再有 tab）
   原来只靠 aria-selected 属性选择器，且 admin.css 的属性选择器在部分主题下观感不明显；
   这里用显式 .is-on 类给出全站一致的选中视觉（卡片底 + 主色描边 + 字重）。 */
.social-tabs button.is-on{
  background:var(--card);color:var(--ink);font-weight:600;
  box-shadow:var(--sh-1),inset 0 0 0 1px var(--blue-line);
}
.social-tabs button.is-on:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* 13.7-032 / 038 · 登录闸门（未登录空态、已登录提示） */
.login-gate{padding:22px;margin-bottom:var(--gap)}
.login-gate[hidden]{display:none}
.login-gate .gate-t{margin:0 0 6px;font-size:var(--t-h3);font-weight:600}
.login-gate .gate-b{margin:0;color:var(--t2);font-size:var(--t-sm)}
.login-gate .gate-note{margin:6px 0 0;color:var(--t3,var(--t2));font-size:var(--t-xs)}
.login-gate .gate-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.login-gate .gate-acts .btn{min-height:40px}
/* R25-1：已登录提示整块横向居中（标题 + 正文 + 按钮行），视觉重心落在水平中线。
   只作用于 data-gate-kind=logged-in，未登录闸门仍左对齐；不改容器宽度，窄屏靠 flex-wrap 自然换行不溢出。 */
.login-gate[data-gate-kind="logged-in"]{text-align:center}
.login-gate[data-gate-kind="logged-in"] .gate-acts{justify-content:center}
/* wide.css 的 .panel > p{max-width:76ch} 会命中 .gate-b，块本身左对齐会让文案整体偏左；
   这里把左右外边距改成 auto，让受限宽度的段落盒子也落在中线上（不改动 max-width 与栅格）。 */
.login-gate[data-gate-kind="logged-in"] .gate-b,
.login-gate[data-gate-kind="logged-in"] .gate-note{margin-left:auto;margin-right:auto}

/* 1) 粘性表头：长表格滚动时保留列含义 */
.table-scroll{overflow-x:auto!important}  /* important-ok: 窄屏必须横向可滚，压模块内 overflow:hidden */
/* R3-006b：顶到 top:0 会让表头停在视口最顶端、被 z-index:100 的 sticky 页头压住
   （表现为「页头悬浮在表头/内容上」）。统一按页头高度 --hd-h 下移。 */
table.tbl thead th,
table thead th{
  position:sticky;top:var(--hd-h,78px);z-index:3;
  background:var(--card);
  box-shadow:inset 0 -1px 0 var(--line);
}
/* R3-021 实测：.panel / 表格横滚包裹这类局部 overflow 容器会成为 sticky 的滚动参照，
   表头被下推 --hd-h（75px）后正好压在第一行上（admin-users / admin-vip 的按钮点不到）。
   这些容器内的表格一律不吸顶；只有 .table-scroll 保留吸顶，且它在容器内按 top:0 不错位。 */
.panel table thead th,
.vip-table-wrap table thead th,
.acct-scroll table thead th,
.admin-modal table thead th{position:static}
.table-scroll table.tbl thead th{position:sticky;top:0}

/* 2) 地图标记热区：视觉不变，可点区域撑到 44×44（WCAG 2.5.8）
   注意：不要把 .mappin 改成 position:relative —— arsenal.css 里它是 absolute，
   一旦回落到文本流，点位就会脱离坐标、在窄屏撑出容器（13.7-053 的根因） */
.map-pin,.map-point-button{position:relative}
.mappin::after,.map-pin::after,.map-point-button::after{
  content:"";position:absolute;left:50%;top:50%;
  /* --hit 由 JS 按最近邻距离下发（密集区自动收窄），缺省仍是 44×44 */
  width:var(--hit,44px);height:var(--hit,44px);transform:translate(-50%,-50%);
  border-radius:50%;
}

/* 3) 行内小按钮：桌面 32px / 移动 40px */
.btn-sm,.tbl .btn,.tbl button{min-height:32px}
@media (max-width:720px){
  .btn-sm,.tbl .btn,.tbl button{min-height:40px}
}

/* 4) 移动端表格：容器内横向滚动，不再撑破页面 */
@media (max-width:720px){
  .table-scroll{max-width:100%}
  table.tbl{min-width:0}
}

/* 5) 对比度：面包屑分隔符由 #C6DBEC(1.33) 提到 --t3 */
.crumb span,.crumb .sep{color:var(--t3)}

/* 6) 占位符「—」弱化：不删数据，仅降低视觉噪音 */
.dash-ph{color:var(--t3);opacity:.55}


/* 7) 首页工具卡一致性：高亮卡改为「白卡 + 蓝描边」，不再反色 */
.tool.hi{
  background:var(--card);
  border:1px solid var(--blue-line);
  box-shadow:var(--sh-1)}
.tool.hi .tool-i{background:var(--blue-soft)}
.tool.hi .tool-i svg{stroke:var(--blue)}
.tool.hi .tool-t{color:var(--ink)}
.tool.hi .tool-d{color:var(--t2)}

/* 8) 排行榜前三名统一版式：白卡 + 名次徽章色阶，不再换整套配色 */
.rank-card.is-1{
  background:var(--card);color:var(--ink);
  border:1px solid var(--blue-line)}
.rank-card.is-1 .rk-k,
.rank-card.is-1 .rk-name,
.rank-card.is-1 .rk-score{color:var(--ink)}
.rank-card.is-1 .rk-no{
  background:var(--blue-soft);color:var(--blue);
  padding:2px 8px;border-radius:var(--r-sm)}
.rank-card.is-2 .rk-no,.rank-card.is-3 .rk-no{
  background:var(--wash);color:var(--t2);
  padding:2px 8px;border-radius:var(--r-sm)}

/* 14.4-007 · 前三名卡片配色统一
   上面第 8) 条把 NO.01 从深色渐变卡改成白卡后，app.css 里 .is-1 的浅色文字
   （原本配深色底的 rgba(252,253,255,.78)）继续生效，实测「KD / 场次」和地区行
   变成白底白字、完全看不见；RP 值又被压成深墨色，与 NO.02/03 的蓝色不一致。
   这里把 NO.01 的文字色阶拉回与 NO.02/03 同一套，只保留名次徽章的色阶差异。 */
.rank-card.is-1 .rk-meta,
.rank-card.is-1 .rk-sub,
.rank-card.is-1 .rk-sub.is-on{color:var(--t2)}
.rank-card.is-1 .rk-score{color:var(--blue)}

/* 14.4-011 · 后台「基础服务状态」与「模块」各 4 张卡等宽对齐
   .svc-grid / .tools 默认都是 repeat(3,1fr)，4 张卡必然 3+1 折行，
   第 4 张单独成行且只有 1/3 宽。这里按后台实际卡片数给 4 列（窄屏 2×2）。 */
@media (min-width:1081px) and (max-width:1279px){
  .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  [data-page="admin"] .tools{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1280px){
  .svc-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  [data-page="admin"] .tools{grid-template-columns:repeat(4,minmax(0,1fr))}
}



/* 9) 监控页空态：图标 + 说明 + 主 CTA，替代原先一行破折号 */
.ui-empty-card{text-align:center;padding:36px 24px}
.ui-empty-ico{width:56px;height:56px;border-radius:var(--r-lg);background:var(--wash);
  display:grid;place-items:center;margin:0 auto 14px}
.ui-empty-ico svg{width:26px;height:26px;stroke:var(--t2);stroke-width:1.6;fill:none}
.ui-empty-card h4{font-size:var(--t-h3);font-weight:600;color:var(--ink)}
.ui-empty-card p{font-size:var(--t-sm);color:var(--t2);margin-top:8px;line-height:1.7;
  max-width:44ch;margin-inline:auto}
.ui-empty-card .btn{margin-top:16px}


/* 10) 赛季徽章与大标题：M1-314 起整体居中（徽章本身是 inline-flex，居中后与标题同轴）
      此前这里是 text-align:left —— 那是 R5-023 的配套，会让整块查询区靠左，用户反馈不居中 */
.hero-query{text-align:center}
.hero-query .hero-eye{display:inline-flex;margin-inline:auto}
.hero-query h1,.hero-query h2{text-align:center;margin-inline:auto}


/* ==================================================================
   查封禁页改造：状态配色 / 查询记录滚动 / 合并卡片布局
   ================================================================== */

/* 封禁状态背景色：暂未封禁=绿、临时封禁=黄、永久封禁=红 */
.verdict.is-ok{background:var(--ok-soft);border:1px solid var(--ok-line)}
.verdict.is-warn{background:var(--warn-soft);border:1px solid var(--warn-line)}
.verdict.is-bad,.verdict.is-plain.is-bad{background:var(--red-soft);border:1px solid var(--red-line)}
.verdict.is-ok .verdict-ico{background:var(--ok-soft)}
.verdict.is-warn .verdict-ico{background:var(--warn-soft)}
.verdict.is-bad .verdict-ico,.verdict.is-plain.is-bad .verdict-ico{background:var(--red-soft)}

/* 合并卡片：顶部图标+文案，下方明细表 */
.verdict{flex-wrap:wrap}
.verdict .verdict-body{flex:1;min-width:200px}
.verdict .verdict-tbl{width:100%;margin-top:12px;border-top:1px solid var(--line-2);padding-top:4px}
.verdict .verdict-tbl th,.verdict .verdict-tbl td{padding:7px 0;font-size:var(--t-lock-13)}

/* 本站查询记录：高度减半，悬停才滚动 */
.ban-tl-wrap{max-height:170px;overflow:hidden;transition:max-height .2s ease}
.ban-tl-wrap:hover{max-height:340px;overflow-y:auto}
.ban-tl-wrap::-webkit-scrollbar{width:6px}
.ban-tl-wrap::-webkit-scrollbar-thumb{background:var(--line);border-radius:var(--r-pill)}


/* ==================================================================
   二次确认弹层 + 破坏性操作危险样式（13.7-060 / 036 / 058）
   ================================================================== */
.hub-confirm-mask{
  position:fixed;inset:0;z-index:120;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:var(--mask);
}
.hub-confirm{
  width:100%;max-width:420px;background:var(--card);
  border-radius:var(--r-m);box-shadow:var(--sh-modal);
  padding:22px 22px 18px;
}
.hub-confirm-t{font-size:var(--t-h3);font-weight:600;color:var(--ink)}
.hub-confirm-b{
  margin-top:10px;font-size:var(--t-sm);line-height:1.75;color:var(--t1);
  white-space:pre-line;
}
.hub-confirm-acts{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}
.hub-confirm-acts .btn{min-height:40px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center}
.hub-confirm-ok.is-danger{background:var(--red);color:var(--card)}
.hub-confirm-ok.is-danger:hover{background:var(--red-hover)}

/* 破坏性操作：红色描边按钮 + 不小于 40px 热区（不做成易误触的实心大按钮） */
.acct-row .acct-acts button.is-red,
.task-acts button.is-red,
.tbl .acts-cell .more.is-red,
.btn.is-danger{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:40px;min-width:64px;padding:0 12px;
  border-radius:var(--r-s);box-shadow:inset 0 0 0 1px var(--red);
  color:var(--red);background:transparent;font-weight:500;
  transition:background var(--t-fast),color var(--t-fast);
}
.acct-row .acct-acts button.is-red:hover,
.task-acts button.is-red:hover,
.tbl .acts-cell .more.is-red:hover,
.btn.is-danger:hover{background:var(--red-soft);color:var(--red)}

/* 后台行内操作（设为管理员 / 解封等）同样补足热区与边界 */
.tbl .acts-cell .more{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:40px;padding:0 12px;
  border-radius:var(--r-s);box-shadow:inset 0 0 0 1px var(--line);
  transition:background var(--t-fast),color var(--t-fast);
}
.tbl .acts-cell .more:hover{background:var(--wash)}
.tbl .acts-cell .more[disabled]{box-shadow:inset 0 0 0 1px var(--line-soft)}

@media (max-width:720px){
  .acct-row .acct-acts button.is-red,
  .task-acts button.is-red,
  .tbl .acts-cell .more,
  .btn.is-danger,
  .hub-confirm-acts .btn{min-height:44px}
  .hd-icobtn{min-height:40px}
}

/* ==================================================================
   13.7-057 · 窄视口（<=768px）统一页头 / 页脚热区
   ------------------------------------------------------------------
   手机 UA 会放行 rank / weapons / map / status / profile / admin /
   dashboard / feedback / about 等桌面页，页面本身已有窄屏响应式，但页头
   与页脚控件仍偏小（实测 390 宽下 logo 104×32、登录按钮 38×40、
   管理后台/退出 28×32、页脚链接 24×32）。容器高度只能放 64px 时，
   用「视觉尺寸不变 + 伪元素把命中区外扩到 44×44」的方式补齐，
   避免为了热区把页头撑高、把窄屏排布挤乱。命中区互不重叠：
   页头右侧控件间距 6-8px、页脚行高 44px 均留有余量。
   ================================================================== */
@media (max-width:768px){
  /* 页头：logo / 登录 / 管理后台 / 退出 都是 44px 命中区 */
  .hd .logo{position:relative;min-height:44px}
  .hd .logo::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;
    height:44px;transform:translateY(-50%)}
  .hd .btn,.hd .hd-icobtn,.hd .hd-user,.hd .ic-btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  /* extra.css 用 display:grid 96px 列的 .hd-ctl 包住主题/语言按钮，窄屏会把圆钮压到 21px 宽；
     这里解除固定列宽，让两个 44px 圆钮恢复自然宽度 */
  .hd .hd-ctl{display:flex;flex-shrink:0}
  .hd .ic-btn{position:relative;width:auto;min-width:44px;padding-inline:6px}
  /* 页脚：链接行高 44px，左右留 12px 命中宽度 */
  .ft{padding-block:16px}
  .ft-in{gap:6px 18px}
  .ft-links{gap:4px 6px}
  .ft-links a,.ft-links button{display:inline-flex;align-items:center;min-height:44px;padding:0 6px}
  /* 通用按钮：窄屏一律不小于 44px 高（覆盖 btn-sm 的 40px） */
  .btn-sm,.tbl .btn,.tbl button{min-height:44px}
}


/* ==================================================================
   14.3 · 页头窄屏收敛（960 / 560 两档）
   ------------------------------------------------------------------
   问题：.hd-r 是 flex-shrink:0，且 13.7-057 在 <=768px 恢复了 .hd-ctl
   （主题色/语言圆钮）后，页头右侧内容最宽达 705px。实测 768 档页头内容
   右边缘 953 > 视口 768、390 档右边缘 549 > 视口 390，11 个主要页面全部
   横向溢出（stats/ban 档位差最大，275px）；同时「管理后台 / 退出登录」
   两个按钮在 390 档被 flex 压缩到 28px，文字被裁掉只剩两三个字。
   修法：只做尺寸与换行收敛，不删任何入口、不改 DOM 结构——
   960 档：状态指示只留在线数字胶囊、昵称可省略号截断、按钮不再被压缩；
   560 档：.hd-r 用 display:contents 把状态/圆钮/账号区交给 .hd-in 分行
   （第一行 logo+在线+圆钮，第二行账号区右对齐），页头仍然单行可读但
   自动折成两行，避免整页横向滚动。
   ================================================================== */
@media (max-width:1080px){
  /* R5-023：左右留白统一走 --pad，页头与主内容严格对齐，不再单独收窄 */
  .hd-in{gap:10px}
  .hd-r{min-width:0}
  /* 主题色/语言圆钮收到 40px，给右侧账号区腾出空间 */
  .hd .ic-btn{min-width:40px;padding-inline:4px}
  .hd-pill{padding:4px 8px}
  /* 状态指示：隐去状态文字，只留「在线 N」数字胶囊 */
  .hd-status .hd-dot-wrap{display:none}
  .hd-pill .hd-pill-t{display:none}
  .hd-pill{padding:5px 10px}
  /* 账号昵称过长时省略号截断，不再把右侧整块顶出视口 */
  .hd-auth{min-width:0}
  .hd-user{min-width:0}
  .hd-uname{
    min-width:0;max-width:clamp(40px,9vw,120px);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .hd-auth .tag{flex-shrink:0}
  /* 管理后台 / 退出登录：不再被压缩到 28px 导致文字被裁 */
  .hd-icobtn{flex:0 0 auto;padding:9px 10px;font-size:var(--t-lock-125);white-space:nowrap}
  /* 角色徽章各语言宽度差异大（超管 42px / Super admin 85px），窄屏按 5ch 截断 */
  .hd-auth .tag{display:inline-block;max-width:5ch;overflow:hidden;text-overflow:ellipsis}
}
@media (max-width:900px){
  .hd-uname{max-width:clamp(32px,6vw,90px)}
}
@media (max-width:560px){
  .hd-in{flex-wrap:wrap;height:auto;min-height:60px;padding-block:8px;row-gap:4px}
  /* display:contents：让状态/圆钮/账号区各自参与 .hd-in 换行 */
  .hd-r{display:contents}
  .hd-status{margin-left:auto}
  .hd-auth{margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
  .logo-t{font-size:var(--t-lock-15)}
  .hd .logo::after{height:40px}
}


/* ==================================================================
   14.3 · 窄屏栅格不再被 min-content 顶宽 + 长标签换行
   ------------------------------------------------------------------
   问题：app.css 在 <=1080px 把两栏/一栏栅格写成 grid-template-columns:1fr。
   CSS 里 1fr 等价于 minmax(auto,1fr)，轨道最小尺寸取内容 min-content，
   于是宽内容（统计页查询条 308px 提交按钮、状态页面板头长标签、地图容器
   371px）反过来把轨道撑宽，390 档实测 stats/ban 溢出 275px、status 溢出
   41px、map 溢出 5px。改成 minmax(0,1fr) 让轨道可以收缩，内容自己换行。
   ================================================================== */
@media (max-width:1080px){
  .split{grid-template-columns:minmax(0,1fr)}
  .mapwrap,.replay{grid-template-columns:minmax(0,1fr)}
  .dash-grid,.svc-grid,.detail,.doc-grid,.map-grid{grid-template-columns:minmax(0,1fr)}
}
/* 面板头部的长标签（如「Stats snapshots appear once…」）在窄屏不再顶破卡片 */
.panel-h{flex-wrap:wrap}
.panel-h .tag,.panel-h .more{max-width:100%;white-space:normal;text-align:left}
@media (max-width:680px){
  .legend{flex-wrap:wrap}
}


/* ==================================================================
   14.3 · 战绩/查封禁查询条在窄屏不再横向溢出
   ------------------------------------------------------------------
   问题：hero.css 在 <=720px 把 .hero-card .search 改成 flex-direction:column，
   但更高的 #main...form.search 规则又给了 flex-wrap:wrap，并且固定 height:56px。
   column + wrap + 固定高度 = 放不下的项会「换列」而不是换行，于是提交按钮被排到
   输入框右侧的第二个列里：390 档实测按钮 left=357 / w=308，整页溢出 275px。
   修法：窄屏明确 column + nowrap + 高度自适应，子项占满一行。
   ================================================================== */
@media (max-width:720px){
  .hero-card .search,
  #main .hero-card .search,
  #main .hero-card form.search,
  #main.is-initial .hero-card form.search{
    flex-direction:column;flex-wrap:nowrap;
    height:auto;min-height:0;gap:10px;align-items:stretch;
  }
  .hero-card .search > *,
  #main .hero-card .search > *,
  #main .hero-card form.search > *{width:100%;max-width:100%}
  .hero-card .search > .field,
  #main .hero-card form.search > .field{flex:0 0 auto;height:auto}
}
/* 服务行说明文字（Scope: ...）在窄屏不再顶宽：允许换行 */
.svc-foot,.svc-foot .svc-v{max-width:100%;white-space:normal;overflow-wrap:anywhere}
.svc-main,.svc-main .svc-v{max-width:100%;min-width:0;overflow-wrap:anywhere}
/* match.css 的 .panel .svc-row .svc-v 是 nowrap，窄屏长串（Scope: …）会把页面顶宽；
   这里用同等选择器解除 nowrap，并让 640px 以下该值换行左对齐 */
.panel .svc-row .svc-v,.panel .svc-row .svc-foot .svc-v{
  max-width:100%;min-width:0;white-space:normal;overflow-wrap:anywhere;
}
@media (max-width:640px){
  .panel .svc-row .svc-v{margin-left:0}
}
/* 14.3：768 档页头再收紧 8-10px（英文「Admin console / Log out」比中文宽） */
@media (max-width:820px){
  .hd-in{gap:8px}
  .hd-icobtn{padding:9px 8px}
  .hd-pill{padding:4px 7px}
  .hd .ic-btn{min-width:38px;padding-inline:3px}
}

/* ==================================================================
   R3-027 · 游客初入引导浮层
   ------------------------------------------------------------------
   与现站 tokens 一致（卡片 / 圆角 / 阴影 / 按钮尺寸），
   390 档按钮竖排、内容区可滚动，亮暗主题都走 var() 自动适配。
   ================================================================== */
.gg-mask {
  position: fixed;
  inset: 0;
  /* R4-003：必须低于页头（tokens.css .hd{z-index:100}），否则首屏浮层会把
     顶栏主题色 / 语言按钮整块盖住，点不动（这就是主题切换「点了没反应」的根因）。 */
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background:var(--mask);
  animation: gg-in var(--t-fast);
}
.gg {
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--card);
  border-radius: var(--r-l);
  box-shadow: var(--sh-2);
  padding: clamp(20px, 2.4vw, 30px);
}
/* R10-2：标题行右侧放关闭按钮（和「知道了」一样，关掉就不再弹） */
.gg-hd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.gg-t {
  font-size: var(--t-h3);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.01em;
}
.gg-x {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  margin: -4px -4px 0 0;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: var(--t-lock-20);
  line-height: 1;
  color: var(--t2);
}
.gg-x:hover { background: var(--wash); color: var(--ink); }
.gg-lead {
  margin-top: 8px;
  font-size: var(--t-sm);
  line-height: 1.7;
  color: var(--t2);
}
.gg-list {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gg-li {
  position: relative;
  padding-left: 18px;
  font-size: var(--t-sm);
  line-height: 1.65;
  color: var(--t2);
}
.gg-li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue);
}
.gg-links {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-xs);
}
.gg-links a { color: var(--blue); font-weight: 500; }
.gg-links a:hover { color: var(--blue-hover); }
.gg-links span { color: var(--ft-ink); }
.gg-acts {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.gg-acts .btn { flex: 1 1 auto; min-height: 44px; }
.gg-note {
  margin-top: 12px;
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--t2);
}
@keyframes gg-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .gg-mask { animation: none; }
}
@media (max-width: 560px) {
  .gg-acts { flex-direction: column; }
  .gg-acts .btn { width: 100%; }
}
body.gg-open { overflow: hidden; }



/* ==================================================================
   14.3 · 交互反馈统一层（hover / active / focus / disabled / 重试入口）
   ------------------------------------------------------------------
   此前只有 weapons 页的 arsenal.css 定义了 .btn:disabled，其余页面的禁用按钮
   没有任何视觉差异（如地图缩放到边界的按钮、加载中的提交按钮），用户点了没反应
   也看不出原因。这里在全站最高优先级层补齐：
   1) disabled / aria-disabled 一律降透明度 + not-allowed，并屏蔽 hover 位移；
   2) .btn 的 active 反馈（按下位移）此前只有 btn-blue 有，soft/quiet 缺失；
   3) 错误态新增的「重试」按钮 .hub-retry 给出可读样式与 44px 热区。
   ================================================================== */
.btn:disabled,.btn[aria-disabled="true"],
.ic-btn:disabled,.ic-btn[aria-disabled="true"],
button:disabled,button[aria-disabled="true"],
a.btn[aria-disabled="true"]{
  opacity:.45;cursor:not-allowed;pointer-events:auto;
}
.btn:disabled:hover,.btn[aria-disabled="true"]:hover,
button:disabled:hover{background:inherit;box-shadow:inset 0 0 0 1px var(--line);transform:none}
.btn-quiet:disabled:hover,.btn-quiet[aria-disabled="true"]:hover{background:transparent;box-shadow:none}
.btn-soft:active,.btn-quiet:active,.btn-sm:active{transform:translateY(1px)}
.btn:focus-visible,.ic-btn:focus-visible,.hub-retry:focus-visible{
  outline:2px solid var(--blue);outline-offset:2px;border-radius:var(--r-s)
}

/* 错误态内联「重试」按钮 */
.hub-retry{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:36px;margin-top:8px;padding:0 14px;border-radius:999px;
  background:var(--card);color:var(--blue);
  box-shadow:inset 0 0 0 1px var(--blue-line);
  font-size:var(--t-sm);font-weight:500;cursor:pointer;
  transition:background var(--t-fast),color var(--t-fast);
}
.hub-retry:hover{background:var(--blue-soft)}
.hub-retry:active{transform:translateY(1px)}
@media (max-width:768px){
  .hub-retry{min-height:44px;padding:0 18px}
}
/* 状态块内按钮换行后不与文案挤在一行 */
.hub-state{flex-wrap:wrap}
.hub-state .hub-retry{margin-left:4px}
/* 14.4-009：空态里的「去哪操作」入口用 <a>，去掉默认下划线与继承色 */
a.hub-retry{text-decoration:none;color:var(--blue)}


/* ==================================================================
   15.5-I10/C6 · 页头控件与弹出面板样式全站化
   ------------------------------------------------------------------
   根因：主题色圆钮 / 语言钮 / 弹出面板（.hd-ctl .ic-btn .ic-dot .pop
   .sw-* .lang-*）的样式只写在 extra.css 里，而 extra.css 只有 index.html
   与 updates.html 两个页面引用。其余 11 个页面拿不到这些规则，实测：
   主题圆钮被压成 0×0（.ic-dot 无尺寸）、语言钮 15×54（图标与「中」垂直
   堆叠、文字溢出按钮）、弹出面板透明无背景。这里把整套规则下沉到
   ui-fix.css（全站引用），所有页面的页头控件恢复一致：
   横排一行、整组 34px 高、垂直居中。
   ================================================================== */
.hd-ctl{display:flex;align-items:center;gap:6px;margin-right:2px}

.ic-btn{
  width:34px;height:34px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;gap:5px;flex-shrink:0;
  color:var(--t2);background:transparent;
  transition:background var(--t-fast),color var(--t-fast);
}
.ic-btn:hover{background:var(--wash);color:var(--ink)}
.ic-btn[aria-expanded="true"]{background:var(--wash);color:var(--ink)}
.ic-btn svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.ic-btn .ic-txt{
  font-size:var(--t-xs);font-weight:500;letter-spacing:.02em;color:inherit;
  line-height:1;white-space:nowrap;
}
.ic-btn.has-txt{width:auto;padding:0 11px;gap:8px}

/* 主题按钮上的当前色点 */
.ic-dot{
  width:15px;height:15px;border-radius:50%;flex-shrink:0;
  background:var(--blue);
  box-shadow:inset 0 0 0 1.5px var(--on-blue-hair);
  transition:background var(--t-fast);
}

/* ---------- 弹出面板 ---------- */
.pop{
  position:fixed;z-index:200;
  background:var(--card);
  border-radius:var(--r-m);
  box-shadow:var(--sh-pop);
  padding:14px;
  opacity:0;visibility:hidden;transform:translateY(-6px) scale(.985);
  transform-origin:top right;
  transition:opacity var(--t-fast),transform var(--t-fast),visibility var(--t-fast);
}
.pop.is-open{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.pop[hidden]{display:none}

.pop-hd{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:0 2px 10px;
}
.pop-hd h3{
  font-size:var(--t-xs);font-weight:500;color:var(--t2);
  letter-spacing:.06em;text-transform:uppercase;
}
.pop-x{
  width:22px;height:22px;border-radius:999px;display:grid;place-items:center;
  color:var(--t2);transition:background var(--t-fast),color var(--t-fast);
}
.pop-x:hover{background:var(--wash);color:var(--ink)}
.pop-x svg{width:12px;height:12px;stroke:currentColor;stroke-width:2;fill:none}

/* ---------- 主题网格 ---------- */
.sw-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:8px;width:246px;
}
.sw{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:10px 6px 9px;border-radius:var(--r-s);
  transition:background var(--t-fast);
  position:relative;
}
.sw:hover{background:var(--wash)}
.sw.is-on{background:var(--blue-soft)}
.sw-c{
  width:30px;height:30px;border-radius:50%;position:relative;
  display:grid;place-items:center;
  box-shadow:inset 0 0 0 1px var(--hairline);
}
.sw-c i{
  width:100%;height:100%;border-radius:50%;display:block;
}
.sw.is-on .sw-c::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1.5px solid var(--blue);
}
.sw-n{font-size:var(--t-xs);color:var(--t2);line-height:1.2;text-align:center}
.sw.is-on .sw-n{color:var(--blue);font-weight:500}

/* 深浅模式分段 */
.pop-seg{
  display:flex;gap:4px;margin-top:12px;padding-top:12px;
  border-top:1px solid var(--line-soft);
}
.pop-seg button{
  flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  height:32px;border-radius:var(--r-s);
  font-size:var(--t-xs);color:var(--t2);
  transition:background var(--t-fast),color var(--t-fast);
}
.pop-seg button svg{width:13px;height:13px;stroke:currentColor;stroke-width:1.8;fill:none}
.pop-seg button:hover{background:var(--wash);color:var(--ink)}
.pop-seg button[aria-pressed="true"]{background:var(--blue-soft);color:var(--blue);font-weight:500}

/* ---------- 语言列表 ---------- */
.lang-list{display:flex;flex-direction:column;gap:2px;width:196px}
.lang{
  display:flex;align-items:center;gap:9px;
  padding:9px 10px;border-radius:var(--r-s);
  transition:background var(--t-fast);
  text-align:left;width:100%;
}
.lang:hover{background:var(--wash)}
.lang.is-on{background:var(--blue-soft)}
.lang-t{flex:1;font-size:var(--t-sm);color:var(--t1);line-height:1.3}
.lang.is-on .lang-t{color:var(--blue);font-weight:500}
.lang-s{font-size:var(--t-xs);color:var(--t2);font-family:var(--f-mono);letter-spacing:-.01em}
.lang.is-on .lang-s{color:var(--blue)}
.lang-tick{
  width:14px;height:14px;flex-shrink:0;
  opacity:0;transition:opacity var(--t-fast);
}
.lang.is-on .lang-tick{opacity:1}
.lang-tick svg{width:14px;height:14px;stroke:var(--blue);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 遮罩 ----------
   15.5-C6：遮罩 z-index 必须低于页头（tokens.css .hd{z-index:100}）。
   旧值 190 盖在页头之上，弹窗打开后点另一个页头圆钮只会命中遮罩
   （表现为主题/语言按钮「点了没反应」），故下调到 90：仍能拦住页面
   内容区的点击，但不再挡住页头控件切换弹窗。 */
.pop-mask{
  position:fixed;inset:0;z-index:90;background:transparent;
  opacity:0;visibility:hidden;transition:opacity var(--t-fast),visibility var(--t-fast);
}
.pop-mask.is-open{opacity:1;visibility:visible}

/* 15.5-I8：公告摘要截断提示。.ucard-d 本身有 -webkit-line-clamp:3，
   但实测 10 张卡片里有 8 张被硬切断（溢出 21~149px）且看不到省略号，
   读者无法判断「还有内容」。这里给被截断的摘要补一层底部渐隐遮罩：
   只有真的被截断（JS 打 .is-clamped）才出现，未截断的短摘要不受影响。 */
.ucard-d{position:relative}
.ucard-d.is-clamped::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.7em;
  pointer-events:none;
  background:linear-gradient(to bottom,transparent 0%,var(--card) 88%);
}

/* 窄屏：面板通栏，页头控件由上面的 14.3 分档规则继续兜住（不在这里 display:none，
   否则会覆盖 13.7-057「窄屏恢复 .hd-ctl」的修复） */
@media (max-width:680px){
  .pop{left:12px!important;right:12px;width:auto}  /* important-ok: 下拉位置由 app.js 写行内 left，需压行内值 */
  .sw-grid,.lang-list{width:100%;grid-template-columns:repeat(3,1fr)}
}

/* ==================================================================
   R5-003 趋势样本明细表（stats.html 趋势视图）
   密度优先：行高与内边距收敛；数字列右对齐 + 等宽数字，纵向可直读；
   表头吸顶（容器限高滚动时仍能看到列名）；当前指标列淡蓝底色高亮。
   ================================================================== */
.wb-subhd{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  margin:18px 0 8px;
}
.wb-subhd-t{font-size:var(--t-sm);font-weight:500;color:var(--ink)}
.wb-subhd-s{font-size:var(--t-xs);color:var(--t2)}

.wb-table-scroll-trend{max-height:360px;overflow:auto}
/* 固定列宽：自动布局会把多余宽度全给「时间」列（实测 324px），
   其余列挤在一侧，读不出趋势；这里按内容长度分配百分比。 */
.wb-table-scroll .wb-tbl-trend{min-width:760px}
.wb-tbl-trend{table-layout:fixed;font-size:var(--t-sm)}
.wb-tbl-trend th:nth-child(1),.wb-tbl-trend td:nth-child(1){width:17%}
.wb-tbl-trend th:nth-child(2),.wb-tbl-trend td:nth-child(2){width:13%}
.wb-tbl-trend th:nth-child(3),.wb-tbl-trend td:nth-child(3){width:14%}
.wb-tbl-trend th:nth-child(4),.wb-tbl-trend td:nth-child(4){width:12%}
.wb-tbl-trend th:nth-child(5),.wb-tbl-trend td:nth-child(5){width:12%}
.wb-tbl-trend th:nth-child(6),.wb-tbl-trend td:nth-child(6){width:14%}
.wb-tbl-trend th:nth-child(7),.wb-tbl-trend td:nth-child(7){width:18%}
/* 选择器带 .panel：上面 ui-fix.css 第 67 行 .panel table thead th{position:static}
   的特异性是 (0,1,3)，表头放在 .panel 卡片里会被它压成 static；
   .panel + .wb-tbl-trend 两个类 (0,2,2) 才压得住，吸顶才生效。 */
.panel .wb-tbl-trend thead th{
  position:sticky;top:0;z-index:1;
  padding:8px 12px;
  background:var(--wash);
  box-shadow:inset 0 -1px 0 var(--line);
}
.wb-tbl-trend tbody td{
  padding:7px 12px;
  border-bottom:1px solid var(--line-soft);
  color:var(--t1);
}
.wb-tbl-trend tbody tr:last-child td{border-bottom:none}
.wb-tbl-trend td,.wb-tbl-trend th{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 表头与数据列同向：文字列左对齐，数字列右对齐（含表头），纵向才能直读 */
.panel .wb-tbl-trend thead th.l,.wb-tbl-trend td.l{text-align:left}
.panel .wb-tbl-trend thead th.r,.wb-tbl-trend td.r{text-align:right}
.wb-tbl-trend td.num{font-variant-numeric:tabular-nums}
/* 当前指标列高亮：hover 底色不能盖掉高亮，所以两条规则成对写 */
.wb-tbl-trend .is-cur{background:var(--blue-soft)}
.wb-tbl-trend tbody tr:hover td{background:var(--wash)}
.wb-tbl-trend tbody tr:hover td.is-cur{background:var(--blue-soft)}
@media (max-width:680px){
  .wb-table-scroll-trend{max-height:300px}
}

/* ==================================================================
   R5-004 赛季视图两张表（竞技排位 / 本赛季常规模式）
   原先表头左对齐、数据列右对齐，宽窄不一的列里数字贴右边，整块看着错位。
   这里把文字与单元格统一左对齐，收敛内边距，并用等宽数字让左对齐的
   数字列仍然纵向成列；列宽交给表格自身自动布局，表头与数据行同列同宽。
   ================================================================== */
[data-view-panel="season"] .wb-table-scroll{overflow-x:auto}
[data-view-panel="season"] .wb-table-scroll .tbl{min-width:840px}
[data-view-panel="season"] .wb-tbl th,
[data-view-panel="season"] .wb-tbl td{
  text-align:left;
  font-variant-numeric:tabular-nums;
}
[data-view-panel="season"] .wb-tbl thead th{
  padding:9px 12px;
  border-bottom:1px solid var(--line);
  color:var(--t2);font-weight:500;
}
[data-view-panel="season"] .wb-tbl tbody td{
  padding:10px 12px;
  border-bottom:1px solid var(--line-soft);
  color:var(--t1);
}
[data-view-panel="season"] .wb-tbl tbody tr:last-child td{border-bottom:none}
[data-view-panel="season"] .wb-tbl td,[data-view-panel="season"] .wb-tbl th{white-space:nowrap}