@charset "UTF-8";
/* ==================================================================
   战术中心 · 设计系统 v1.0
   ------------------------------------------------------------------
   这是从 v7 定稿里抽出来的唯一真源（single source of truth）。
   所有页面只引这一个文件，不写任何行内样式。

   规则（改版时请遵守，否则设计会失控）：
   1. 颜色只用令牌，禁止出现十六进制字面量
   2. 字重只有 400 / 500 / 600 三档，语义固定：
        400 = 正文、说明
        500 = 小标题、按钮、强调、卡片标题
        600 = 仅页面主标题（h1 / h2）
   3. 字号只用 --t-* 七档，不写 px
   4. 圆角只用 --r-s / --r-m / --r-l
   5. 禁止 box-shadow 做「立体感」，只允许极淡纸片阴影（已内置在 --sh-1 / --sh-2）
   ================================================================== */

:root{
  color-scheme: light;

  /* ---------- 背景层 ---------- */
  --bg:#F4F8FC;          /* 页面底：晨雾蓝 */
  --card:#FCFDFF;        /* 卡片 */
  --wash:#E9F1F9;        /* 区块底（替代 v6 的沙色） */
  --wash-deep:#DCE8F4;   /* 页脚等更深一档 */

  /* ---------- 文字 ---------- */
  --ink:#1F2E3D;         /* 标题 12.98:1 */
  --t1:#36485A;          /* 正文 8.82:1 */
  --t2:#57697B;          /* 说明 5.30:1 / 深底 4.96:1 */

  /* ---------- 主色 ---------- */
  --blue:#28628E;        /* 5.23:1（最深底）· 6.10:1（页面底），可承载文字 */
  --blue-hover:#20527A;
  --blue-lt:#3E8BBF;     /* 仅图标与图表线，不承载文字 */
  --blue-soft:#E4EFF8;
  --blue-line:#C6DBEC;
  --blue-deep-1:#3579AB; /* 深色卡渐变起点 */
  --blue-deep-2:#1E5A85; /* 深色卡渐变终点 */

  /* ---------- 状态色 ---------- */
  /* 均已按四层背景（card / bg / wash / wash-deep）中最深一层复算 */
  --red:#9F4635;         /* 4.97:1，唯一「注意」色 */
  --red-soft:#FAECE8;
  --ok:#33684E;          /* 5.23:1 */
  --ok-soft:#E7F1EB;
  --warn:#735312;        /* 5.68:1 */
  --warn-soft:#FBF2DF;

  /* ---------- 段位色（仅用于段位徽章底色 + 白色图标，图标对比度 ≥3:1） ---------- */
  --tier-bronze:#8A6A4E;   /* 青铜 */
  --tier-silver:#6E7C8C;   /* 白银 */
  --tier-gold:#8A6516;     /* 黄金 · 同 darkened warn */
  --tier-plat:#3E8BBF;     /* 铂金 · 同 blue-lt */
  --tier-dia:#5A82AE;      /* 钻石 */
  --tier-master:#6B4E9B;   /* 大师 */
  --tier-pred:#9F4635;     /* 生存者 · 同 red */

  /* ---------- 地图点位分色（R3-016：与点位 type 一一对应，地图图标与复选框色块同色） ----------
     选色原则：跨色相分布（蓝 / 紫 / 灰蓝 / 青绿 / 棕 / 金 / 赭红 / 深青 / 玫红 / 橙 / 橄榄 / 深绿 / 砖红），
     不只靠红绿区分；icons 另有形状（圆 / 方 / 菱 / 三角）作第二重区分，色弱可辨。 */
  --pt-location:#0072B2;        /* 主要地点 · 深蓝 */
  --pt-secret_room:#6B4E9B;     /* 密室 · 紫 */
  --pt-bunker:#4F5D75;          /* 地堡 · 石板灰蓝 */
  --pt-lab_camp:#00785A;        /* 实验营地 · 青绿 */
  --pt-bear_cave:#8A6A4E;       /* 熊洞 · 棕 */
  --pt-crowbar:#C9A227;         /* 撬棍点 · 金 */
  --pt-car_fixed:#C1440E;       /* 固定载具 · 赭红 */
  --pt-boat:#1F7A8C;            /* 船只 · 深青 */
  --pt-garage:#B4548A;          /* 车库 · 玫红 */
  --pt-gas_station:#E67E00;     /* 加油站 · 橙 */
  --pt-glider:#5A6E1F;          /* 滑翔机 · 橄榄 */
  --pt-revive_station:#33684E;  /* 复活站 · 深绿 */
  --pt-jump_tower:#9F4635;      /* 跳伞塔 · 砖红 */

  /* ---------- 小队队标色（R4-005：回放地图按队着色，同一队同一色，12 色循环） ----------
     选色原则与 --pt-* 一致：跨色相分布（蓝/金/绿/红/紫/青/棕/石板灰/玫红/橄榄/钢蓝/兰紫），
     不只靠红绿区分；深浅两套严格成对，浅底用加深档，深底用提亮档。 */
  --team-1:#28628E;   /* 蓝 */
  --team-2:#8A6516;   /* 金 */
  --team-3:#2F7A55;   /* 绿 */
  --team-4:#9F4635;   /* 红 */
  --team-5:#6B4E9B;   /* 紫 */
  --team-6:#0F7C74;   /* 青 */
  --team-7:#8A5A2B;   /* 棕 */
  --team-8:#4F5D75;   /* 石板灰 */
  --team-9:#9C3F68;   /* 玫红 */
  --team-10:#5A6E2E;  /* 橄榄 */
  --team-11:#2E6FA8;  /* 钢蓝 */
  --team-12:#7A4B8F;  /* 兰紫 */

  /* ---------- 线 ---------- */
  --line:#DEE8F2;
  --line-soft:#EBF2F9;

  /* ---------- 字体（13.7-007：全局只一种字体族） ----------
     --f-sans 是唯一的字体族；--f-mono 不是第二种字体族，而是「数字专用同族变体」：
     它与 --f-sans 完全相同，配合 .num 的 font-variant-numeric:tabular-nums 让数字等宽对齐。
     任何页面都不得再引入 JetBrains Mono / 系统等宽族，避免两种字体族混用。 */
  --f-sans:"Inter","PingFang SC","HarmonyOS Sans SC","Noto Sans SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  --f-mono:var(--f-sans);

  /* ---------- 字号 7 档（全部流式） ---------- */
  --t-mega:clamp(40px,4.8vw,60px);   /* 首页 h1 */
  --t-h2:clamp(26px,2.6vw,34px);     /* 区块标题 */
  --t-h3:clamp(17px,1.3vw,19px);     /* 卡片标题 */
  --t-lead:clamp(16px,1.3vw,18px);   /* 引导段 */
  --t-body:clamp(15px,1.05vw,16px);  /* 正文 */
  --t-sm:clamp(14px,1vw,15px);       /* 次要文字 */
  --t-xs:clamp(12px,.9vw,12.5px);    /* 标签、注释 */

  /* ---------- 锁定档（不走七档） ----------
     这几个字号受功能或品牌约束，不能跟随视口伸缩：搜索框锁 16px 防 iOS 聚焦时整页
     缩放；页头字标在窄屏固定 18px；图标字形、后台表格微调同理。统一登记在此，
     值与原实现逐条一致，使用处只写 var()，不得再出现裸 px 字号。 */
  --t-lock-115:11.5px;
  --t-lock-125:12.5px;
  --t-lock-13:13px;
  --t-lock-15:15px;
  --t-lock-16:16px;
  --t-lock-18:18px;
  --t-lock-20:20px;
  --t-lock-22:22px;

  /* ---------- 功能色（有明确用途，不随主题变化） ----------
     扫码/远程操控面板、封禁口径、等级徽标这类颜色是功能语义而非装饰，
     值固定、不参与换肤。集中登记在此，模块里只写 var()，禁止再出现裸色值。 */
  --qr-bg:#FFFFFF;                /* 二维码底板：必须有纯白静区 */
  --stage-bg:#000000;             /* 画面/截图留底，不是页面背景 */
  --btn-active:#6B4E9B;           /* 启动态按钮 · 紫（与 --pt-secret_room 同值） */
  --scrim-45:rgba(0,0,0,.45);     /* 高亮挖孔遮罩 */
  --scrim-62:rgba(0,0,0,.62);     /* 扫描态遮罩 */
  --scrim-72:rgba(0,0,0,.72);     /* 坐标浮签底 */
  --on-scrim:#FFFFFF;             /* 遮罩上的文字 */
  --shade-62:rgba(16,36,54,.62);  /* 战绩弹层压底 */
  --shade-42:rgba(16,36,54,.42);
  --ban-temp:#B45309;             /* 临时封禁（需求指定色） */
  --ban-temp-d:#E0A458;           /* 深底同色相提亮一档 */
  --rk-2:#9AA6B2;                 /* 排位徽标 2 档 · 浅底 */
  --rk-2-d:#5A6673;               /* 排位徽标 2 档 · 深底 */
  --mb-desk-bg:#E6EDF4;           /* 手机壳在桌面端的衬底 */
  --mb-dark-bg:#0E131A;           /* 手机壳深色衬底 */
  /* 画面标注色：叠在深色截图/视频画面上，必须保持高亮（不做浅色化），
     只用于取景十字线与命中框，不承载正文。面板底色/文字一律走 --card/--wash/--t2。 */
  --adm-ok:#3DDC84;
  --adm-warn:#FFB020;
  --adm-red:#FF5C5C;

  /* ---------- 页头高度（sticky 元素统一按它下移，避免被页头压住） ---------- */
  --hd-h:clamp(66px,5.2vw,78px);

  /* ---------- 间距 ---------- */
  --pad:clamp(20px,3.6vw,72px);      /* 页面左右留白（R5-023 收紧） */
  --shell:1920px;                    /* 全站统一内容外框上限（页头/主内容/页脚共用，R5-023） */
  --gap:clamp(18px,2.4vw,28px);      /* 卡片间距 */
  --gap-s:clamp(10px,1.2vw,14px);
  --sec:clamp(56px,6.4vw,96px);      /* 区块垂直间距 */

  /* ---------- 圆角（R4-001：补齐全站实际在用的一档，禁止再写 px 字面量） ---------- */
  --r-xs:2px;    /* 进度条 / 细条 / 微元素 */
  --r-sm:5px;    /* 小徽标、图标底 */
  --r-s:8px;     /* 卡片内元素、按钮、输入框小圆角 */
  --r-md:11px;   /* 中等面板 */
  --r-m:14px;    /* 弹层、下拉 */
  --r-lg:16px;   /* 大面板 */
  --r-l:22px;    /* 卡片 */
  --r-pill:999px;/* 胶囊 */

  /* ---------- 阴影（只做纸片感，不做立体感） ---------- */
  --sh-1:0 1px 2px rgba(31,46,61,.04),0 18px 44px -30px rgba(31,46,61,.26);
  --sh-2:0 2px 4px rgba(31,46,61,.05),0 22px 46px -26px rgba(31,46,61,.32);
  --sh-blue:0 2px 10px -4px rgba(44,110,158,.42);
  --sh-blue-h:0 4px 14px -4px rgba(44,110,158,.5);

  /* R4-001：下面几个阴影原本散落在各页 CSS 里写成 rgba 字面量，统一收成令牌 */
  --sh-3:0 1px 2px rgba(31,46,61,.06);
  --sh-4:0 1px 2px rgba(31,46,61,.14);
  --sh-float:0 4px 14px -6px rgba(31,46,61,.4);
  --sh-pop:0 2px 6px rgba(31,46,61,.06),0 24px 56px -24px rgba(31,46,61,.34);
  --sh-modal:0 18px 48px rgba(31,46,61,.24);
  --sh-drop:0 2px 8px rgba(16,36,54,.18);   /* 小浮层（下拉、气泡） */
  --sh-hero:0 1px 2px rgba(31,46,61,.04),0 24px 56px -32px rgba(31,46,61,.22);
  --sh-hero-s:0 1px 2px rgba(31,46,61,.04),0 18px 44px -30px rgba(31,46,61,.20);
  --mask:rgba(31,46,61,.42);
  --hairline:rgba(31,46,61,.08);
  --on-blue:#FCFDFF;
  --on-blue-2:rgba(252,253,255,.84);
  --on-blue-3:rgba(252,253,255,.72);
  --on-blue-wash:rgba(252,253,255,.2);
  --on-blue-hair:rgba(252,253,255,.75);
  --glass:rgba(252,253,255,.9);
  --on-tier:#FCFDFF;
  --ok-line:rgba(61,122,92,.16);
  --warn-line:rgba(138,101,22,.18);
  --red-line:rgba(178,83,64,.18);
  --red-hover:#8C3C2D;
  --ft-ink:#4E6172;
  /* R4-001：以下三个是各处已经在用、但 tokens.css 一直没定义的令牌，补齐并成对 */
  --t3:#6E8091;                 /* 最弱一级文字：占位符 / 分隔符 / 角标 */
  --line-2:var(--line);         /* 卡内次级分割线 */
  --err:var(--red);
  --err-soft:var(--red-soft);
  --err-line:var(--red-line);
  /* ---------- 动效 ---------- */
  --ease:cubic-bezier(.22,.61,.36,1);
  --t-fast:160ms var(--ease);
  --t-base:300ms var(--ease);
}

/* ==================================================================
   R4-003 · 深色令牌（与上面 :root 严格成对）
   ------------------------------------------------------------------
   挂在 :root 上：html 同时带 data-theme="dark" 与 data-mode="dark"；
   主题色（--blue 系）由 assets/extra.css 的 [data-theme=dark][data-accent=x]
   覆盖，因此「深底 + 任意主题色」可自由组合，不会互相顶掉。
   底：#141821 系（禁止纯黑）；字：高亮白 / 浅灰蓝。
   ================================================================== */
[data-theme="dark"]:root,[data-mode="dark"]:root{
  color-scheme: dark;
  --bg:#141821;
  --card:#1B222C;
  --wash:#222B37;
  --wash-deep:#0F141B;
  --ink:#F2F6FA;
  --t1:#CBD6E1;
  --t2:#93A4B5;
  --blue:#5C9BCB;
  --blue-hover:#4C89B7;
  --blue-lt:#7FB6DE;
  --blue-soft:#1B2C3A;
  --blue-line:#2E4557;
  --blue-deep-1:#3E7EA8;
  --blue-deep-2:#275A7C;
  --red:#D98A73;
  --red-soft:#31201C;
  --ok:#79B694;
  --ok-soft:#1B2E24;
  --warn:#D6AC5C;
  --warn-soft:#2E2718;
  --team-1:#5C9BCB;
  --team-2:#D9A85C;
  --team-3:#6FB08A;
  --team-4:#D98A73;
  --team-5:#A896DC;
  --team-6:#4FB3A8;
  --team-7:#C79A6B;
  --team-8:#9BAEC4;
  --team-9:#DE90AE;
  --team-10:#A8BE6A;
  --team-11:#7FB6DE;
  --team-12:#C79ADE;
  --line:#2A3542;
  --line-soft:#232D38;
  --sh-1:0 1px 2px rgba(0,0,0,.3),0 18px 44px -30px rgba(0,0,0,.7);
  --sh-2:0 2px 4px rgba(0,0,0,.34),0 22px 46px -26px rgba(0,0,0,.75);
  --sh-blue:0 2px 10px -4px rgba(92,155,203,.42);
  --sh-blue-h:0 4px 14px -4px rgba(92,155,203,.5);
  --sh-3:0 1px 2px rgba(0,0,0,.34);
  --sh-4:0 1px 2px rgba(0,0,0,.5);
  --sh-float:0 4px 14px -6px rgba(0,0,0,.6);
  --sh-pop:0 2px 6px rgba(0,0,0,.4),0 24px 56px -24px rgba(0,0,0,.66);
  --sh-modal:0 18px 48px rgba(0,0,0,.55);
  --sh-hero:0 1px 2px rgba(0,0,0,.3),0 24px 56px -32px rgba(0,0,0,.6);
  --sh-hero-s:0 1px 2px rgba(0,0,0,.3),0 18px 44px -30px rgba(0,0,0,.55);
  --mask:rgba(8,12,18,.62);
  --hairline:rgba(226,236,246,.1);
  --on-blue:#141821;
  --on-blue-2:rgba(20,24,33,.86);
  --on-blue-3:rgba(20,24,33,.74);
  --on-blue-wash:rgba(20,24,33,.18);
  --on-blue-hair:rgba(20,24,33,.7);
  --glass:rgba(20,24,33,.82);
  --on-tier:#FCFDFF;
  --ok-line:rgba(121,182,148,.26);
  --warn-line:rgba(214,172,92,.26);
  --red-line:rgba(217,138,115,.26);
  --red-hover:#C97A63;
  --ft-ink:#9FB0C1;
  --t3:#8296A8;
  --line-2:var(--line);
}

/* R4-003：切换深浅 / 主题色的瞬间给 <html> 挂 340ms 全局过渡，之后自动移除 ——
   既不长期占用 hover / 展开的 160ms 动效，也保证切主题时全站不闪变。 */
.hub-theme-anim,.hub-theme-anim *,.hub-theme-anim *::before,.hub-theme-anim *::after{
  transition:background-color var(--t-base),border-color var(--t-base),color var(--t-base),
             fill var(--t-base),stroke var(--t-base),box-shadow var(--t-base)!important;
}
@media (prefers-reduced-motion:reduce){
  .hub-theme-anim,.hub-theme-anim *,.hub-theme-anim *::before,.hub-theme-anim *::after{transition:none!important}
}

/* ==================================================================
   基础
   ================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* R3-006b：sticky 页头高 --hd-h，锚点跳转 / scrollIntoView 一律预留这段高度，
   否则目标标题会停在页头下面被压住（回放页能看到「页头悬浮在地图上」）。 */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--hd-h)}

body{
  background:var(--bg);color:var(--t1);
  font-family:var(--f-sans);font-size:var(--t-body);font-weight:400;
  line-height:1.8;letter-spacing:0;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  min-height:100svh;overflow-x:hidden;
  /* 内容不足一屏时把页脚顶到视口底部（此前页脚悬在半空、下方留一大片空白） */
  display:flex;flex-direction:column;
}

a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:var(--r-s)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* R4-001：数字列统一等宽数字（表格数值 / KPI 大数字 / 排行榜 / 分页），
   避免数字跳动与列宽抖动；字母与汉字不受影响。 */
.tbl td,.tbl th,
.kpi .v,.kpi-v,.kpi-note,
.rk-no,.rk-v,.rk-meta,.rk-sub,
.ps-v,.stat-v,.big,.pg button,.season-cur,[data-num]{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* 无障碍跳转链接：常态用 sr 裁剪（1px 且 clip-path 裁掉），既不占位也不可见，
   但仍留在 Tab 序列里；仅键盘聚焦（:focus-visible）时浮出完整胶囊。
   不用 :focus —— 鼠标点击后会残留显示并遮挡面包屑（R2-003）；
   不用 visibility:hidden —— 那样会脱离 Tab 序列，键盘用户反而用不上。 */
.skip{
  position:fixed;left:20px;top:20px;z-index:999;
  width:1px;height:1px;overflow:hidden;white-space:nowrap;
  clip-path:inset(50%);
  background:var(--blue);color:var(--card);
  font-size:var(--t-sm);font-weight:500;
  transition:transform var(--t-fast);
}
.skip:focus-visible{
  width:auto;height:auto;overflow:visible;clip-path:none;
  padding:11px 20px;border-radius:999px;
  outline:2px solid var(--card);outline-offset:2px;
  box-shadow:var(--sh-float);
}

/* ==================================================================
   页头（全站统一）
   ================================================================== */
.hd{
  position:sticky;top:0;z-index:100;width:100%;
  /* R3-006b：底色与页面底（--bg）同色改为不透明 —— 半透明时滚动中的地图/内容会
     透过页头，看起来像「页头悬浮在地图上」；颜色不变，只是不再透出下面的内容。 */
  background:var(--bg);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
}
.hd-in{
  width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad);
  display:flex;align-items:center;gap:clamp(14px,3vw,40px);
  height:var(--hd-h);
}

.logo{display:flex;align-items:center;gap:9px;flex-shrink:0}
.logo-m{
  width:28px;height:28px;border-radius:var(--r-s);
  background:var(--blue);
  display:grid;place-items:center;
  font-size:var(--t-sm);font-weight:600;color:var(--card);
  letter-spacing:-.02em;
}
.logo-t{
  font-size:clamp(19px,1.55vw,23px);font-weight:600;color:var(--ink);
  letter-spacing:-.012em;
}

.nav{display:flex;align-items:center;gap:2px;min-width:0;overflow:hidden}
.nav a{
  padding:8px 13px;border-radius:999px;
  font-size:var(--t-sm);font-weight:400;color:var(--t2);
  transition:color var(--t-fast),background var(--t-fast);
  white-space:nowrap;
}
.nav a:hover{color:var(--ink);background:var(--wash)}
.nav a[aria-current="page"]{color:var(--ink);background:var(--wash);font-weight:500}

.hd-r{margin-left:auto;display:flex;align-items:center;gap:8px;flex-shrink:0}

/* 页头操作按钮（管理后台 / 退出登录）：图标 + 文字，窄屏只留图标保证整行平齐 */
.hd-icobtn{display:inline-flex;align-items:center;gap:6px}
.hd-btn-i{width:16px;height:16px;flex:0 0 auto;stroke:currentColor;stroke-width:1.7;fill:none}

/* 用户区容器：只装头像区 + 管理后台/退出等按钮，主题与语言控件在容器外 */
.hd-auth{display:flex;align-items:center;gap:8px;min-width:0}

/* 登录态页头用户区（整体可点击）
   头像框 .hd-av-wrap / 头像 .hd-av-img / 昵称 .hd-uname / 标签 .tag
   四者严格同一行：inline-flex + align-items:center + nowrap + 不收缩 */
.hd-user{
  display:inline-flex;align-items:center;gap:8px;min-width:0;
  flex:0 0 auto;flex-wrap:nowrap;white-space:nowrap;
  padding:4px 12px 4px 4px;border-radius:999px;
  line-height:1;
  transition:background var(--t-fast);
}
.hd-user:hover{background:var(--wash)}
.hd-user > *{flex:0 0 auto}
.hd-user .hd-uname{flex:0 1 auto}
.hd-av-wrap{
  position:relative;
  width:34px;height:34px;border-radius:50%;padding:2px;
  background:linear-gradient(140deg,var(--blue),var(--blue-soft) 62%,var(--wash));
  box-shadow:0 0 0 1px var(--line);
  display:grid;place-items:center;overflow:hidden;
}
.hd-av-img{
  width:100%;height:100%;border-radius:50%;
  object-fit:cover;object-position:center;
  display:block;background:var(--card);
}
.hd-av-fb{
  width:100%;height:100%;border-radius:50%;
  display:grid;place-items:center;
  background:var(--card);color:var(--blue);
  font-family:var(--f-mono);font-size:var(--t-xs);font-weight:500;
}
.hd-av-fb[hidden]{display:none}
.hd-uname{
  font-size:var(--t-sm);font-weight:500;color:var(--ink);
  max-width:14ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tag.is-super{box-shadow:inset 0 0 0 1px var(--blue-line)}
.av-lg{width:46px;height:46px;font-size:var(--t-h3)}

/* ==================================================================
   按钮
   ================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:999px;
  font-size:var(--t-sm);font-weight:500;
  transition:background var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast),color var(--t-fast);
  white-space:nowrap;
}
.btn-quiet{padding:9px 16px;color:var(--t2)}
.btn-quiet:hover{background:var(--wash);color:var(--ink)}

.btn-blue{
  padding:11px 22px;background:var(--blue);color:var(--card);
  box-shadow:var(--sh-blue);
}
.btn-blue:hover{background:var(--blue-hover);box-shadow:var(--sh-blue-h)}
.btn-blue:active{transform:translateY(1px)}

.btn-violet{
  padding:11px 22px;background:var(--btn-active);color:var(--card);
  box-shadow:var(--sh-blue);
}
.btn-violet:hover{background:var(--btn-active);box-shadow:var(--sh-blue-h)}
.btn-violet:active{transform:translateY(1px)}

.btn-soft{
  padding:11px 20px;background:var(--card);color:var(--t1);
  box-shadow:inset 0 0 0 1px var(--line);
}
.btn-soft:hover{background:var(--wash);box-shadow:inset 0 0 0 1px var(--blue-line)}

/* 幽灵按钮：无底色，仅文字，hover 出浅底 */
.btn-ghost{padding:11px 20px;color:var(--t1)}
.btn-ghost:hover{background:var(--wash);color:var(--ink)}

.btn-lg{padding:14px 26px;font-size:var(--t-body)}

/* 小尺寸按钮（面板头部动作位） */
.btn-sm{padding:7px 14px;font-size:var(--t-xs)}

.btn svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none}

/* ==================================================================
   通用卡片 / 标签 / 徽章
   ================================================================== */
.card{
  background:var(--card);
  border-radius:var(--r-l);
  box-shadow:var(--sh-1);
}

.eye{
  display:inline-flex;align-items:center;gap:8px;
  padding:4px 12px;border-radius:999px;
  background:var(--blue-soft);
  font-size:var(--t-xs);font-weight:500;color:var(--blue);
}
.eye i{width:5px;height:5px;border-radius:50%;background:var(--blue)}

.tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 9px;border-radius:999px;
  background:var(--wash);
  font-size:var(--t-xs);color:var(--t2);
  white-space:nowrap;
}
.tag.is-blue{background:var(--blue-soft);color:var(--blue)}
.tag.is-ok{background:var(--ok-soft);color:var(--ok)}
.tag.is-warn{background:var(--warn-soft);color:var(--warn)}
.tag.is-red{background:var(--red-soft);color:var(--red)}

.dot-ok,.dot-red,.dot-warn{
  width:6px;height:6px;border-radius:50%;flex-shrink:0;
}
.dot-ok{background:var(--ok)}
.dot-red{background:var(--red)}
.dot-warn{background:var(--warn)}

/* ==================================================================
   区块标题
   ================================================================== */
.sec-h{margin-bottom:clamp(22px,2.6vw,32px)}
.sec-h h2{
  font-size:var(--t-h2);font-weight:600;letter-spacing:-.014em;
  color:var(--ink);line-height:1.4;
}
.sec-h p{margin-top:8px;font-size:var(--t-body);color:var(--t2);max-width:44ch}

.main{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad)}

/* R5-023 全站统一内容外框：页头 / 主内容 / 页脚 三者内容盒左右边界严格对齐（偏差 0） */
.page-hd,.split,.doc-grid,.ft-in{
  width:100%;max-width:var(--shell);margin-inline:auto;
}

/* 全宽区块（突破左右 padding） */
.band{
  margin-inline:calc(var(--pad) * -1);
  padding:clamp(48px,5.6vw,84px) var(--pad);
  background:var(--wash);
}
.band--top{border-radius:clamp(24px,2.6vw,38px) clamp(24px,2.6vw,38px) 0 0}

/* ==================================================================
   页脚
   ================================================================== */
.ft{
  width:100%;margin-top:auto;
  padding:clamp(26px,3vw,38px) 0;
  background:var(--wash-deep);
  font-size:var(--t-xs);color:var(--ft-ink);
}
.ft-in{
  width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.ft-links{display:flex;gap:clamp(14px,2vw,24px);flex-wrap:wrap}
.ft-links a:hover{color:var(--blue)}
/* R10-6 页脚三件套：版权 / 免责说明 / ICP 备案占位，独占一行，与上方链接行分开 */
.ft-legal{
  width:100%;display:flex;align-items:center;gap:6px 18px;flex-wrap:wrap;
  margin-top:12px;padding-top:10px;border-top:1px solid var(--line);
  color:var(--t3);
}
.ft-legal a{color:var(--t2)}
.ft-legal a:hover{color:var(--blue)}

/* ==================================================================
   表单元素（各模块共用）
   ================================================================== */
.field{display:flex;flex-direction:column;gap:6px}
.field > label{font-size:var(--t-sm);font-weight:500;color:var(--ink)}
.field .hint{font-size:var(--t-xs);color:var(--t2)}

.input,.select{
  width:100%;height:46px;
  padding:0 14px;border-radius:var(--r-m);
  background:var(--card);
  border:1px solid var(--line);
  font-family:var(--f-sans);font-size:var(--t-body);color:var(--ink);
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.input::placeholder{color:var(--t2)}
.input:hover,.select:hover{border-color:var(--blue-line)}
.input:focus,.select:focus{
  outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px var(--blue-soft);
}
.select{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:
    linear-gradient(45deg,transparent 50%,var(--t2) 50%),
    linear-gradient(135deg,var(--t2) 50%,transparent 50%);
  background-position:calc(100% - 19px) 21px,calc(100% - 14px) 21px;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  padding-right:38px;
}

/* 分段控制器 */
.seg{
  display:inline-flex;gap:2px;padding:3px;
  background:var(--wash);border-radius:999px;
}
.seg button{
  padding:7px 15px;border-radius:999px;
  font-size:var(--t-sm);font-weight:400;color:var(--t2);
  transition:color var(--t-fast),background var(--t-fast),box-shadow var(--t-fast);
  white-space:nowrap;
}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{
  background:var(--card);color:var(--ink);font-weight:500;
  box-shadow:var(--sh-3);
}

/* ==================================================================
   表格（排行榜、状态页共用）
   ================================================================== */
.tbl{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
.tbl thead th{
  text-align:left;padding:12px 14px;
  font-size:var(--t-xs);font-weight:500;color:var(--t2);
  background:var(--wash);
  white-space:nowrap;
}
.tbl thead th:first-child{border-radius:var(--r-s) 0 0 var(--r-s)}
.tbl thead th:last-child{border-radius:0 var(--r-s) var(--r-s) 0}
.tbl tbody td{
  padding:14px;border-bottom:1px solid var(--line-soft);
  color:var(--t1);vertical-align:middle;
}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr:hover td{background:var(--wash)}
.tbl .r{text-align:right}
.tbl .num{color:var(--ink);font-weight:500;letter-spacing:-.01em}

/* ==================================================================
   平面图（地图页 / 回放页共用）
   ================================================================== */
.plan{
  position:relative;width:100%;aspect-ratio:4/3;
  background:var(--wash);
  border-radius:var(--r-m);
  overflow:hidden;
  border:1px solid var(--line);
}
.plan .grid-line{stroke:var(--line);stroke-width:1}
.plan .road{stroke:var(--blue-line);fill:none;stroke-linecap:round}
.plan .pin{fill:var(--blue);cursor:pointer;transition:fill var(--t-fast)}
.plan .pin:hover{fill:var(--red)}
.plan .pin-label{
  font-family:var(--f-mono);font-size:9px;fill:var(--t2);
}
.plan-badge{
  position:absolute;left:12px;top:12px;
  padding:4px 10px;border-radius:999px;
  background:var(--glass);
  backdrop-filter:blur(8px);
  font-size:var(--t-xs);color:var(--t2);
  /* 13.7-008：角标只是说明文字，不能挡住它下面的点位热区 */
  pointer-events:none;
}

/* ==================================================================
   状态空位 / 骨架
   ================================================================== */
.empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(36px,5vw,64px) 24px;gap:8px;
  color:var(--t2);text-align:center;
}
.empty svg{width:28px;height:28px;stroke:var(--blue-line);stroke-width:1.6;fill:none;margin-bottom:4px}
.empty p{font-size:var(--t-sm)}

/* 段位徽章（后续换成图片时，保留 .tier 尺寸即可） */
.tier{
  width:26px;height:26px;border-radius:var(--r-s);flex-shrink:0;
  display:grid;place-items:center;
}
.tier > svg{width:15px;height:15px;stroke:var(--on-tier);stroke-width:1.8;fill:none;stroke-linejoin:round}
.tier > img{width:100%;height:100%;object-fit:contain}
.tier-lg{width:34px;height:34px;border-radius:var(--r-s)}
.tier-lg > svg{width:19px;height:19px}
.tier-bronze{background:var(--tier-bronze)}
.tier-silver{background:var(--tier-silver)}
.tier-gold{background:var(--tier-gold)}
.tier-plat{background:var(--tier-plat)}
.tier-dia{background:var(--tier-dia)}
.tier-master{background:var(--tier-master)}
.tier-pred{background:var(--tier-pred)}

/* 2.7 段位图标：列表行玩家名字前的内联徽标（图片优先，缺失降级为同配色 CSS 徽标）
   高 18px（区间 16-20px）· 与名字垂直居中 · 右侧间距 7px（区间 6-8px）· 不裁切 */
.tier.tier-img{
  width:18px;height:18px;max-width:18px;
  display:inline-flex;align-items:center;justify-content:center;
  vertical-align:middle;margin-right:7px;flex-shrink:0;border-radius:var(--r-sm);
  object-fit:contain;object-position:center;   /* 图标自身也可能是 img，居中且不裁切 */
}
.tier.tier-img > svg{width:12px;height:12px}

/* ==================================================================
   响应式（通用）
   ================================================================== */
@media (max-width:1080px){
  .nav a:nth-child(n+5){display:none}
}
@media (max-width:680px){
  .hd-in{height:64px;gap:10px}
  .nav{display:none}
  .ft-in{flex-direction:column;align-items:flex-start;gap:10px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* 小屏页头：整行保持平齐（logo / 导航 / 右侧操作同一条基线），只压缩间距与字号 */
@media (max-width: 720px){
  .hd-in{flex-wrap:nowrap;gap:clamp(8px,2.2vw,10px)}
  .hd-r{margin-left:auto;flex-shrink:1;flex-wrap:nowrap;justify-content:flex-end;gap:5px}
  .hd-r .btn{padding-inline:8px}
  .hd-auth{flex-wrap:nowrap;justify-content:flex-end;min-width:0}
  /* 四元素仍在同一行，只让昵称变窄 */
  .hd-user{gap:6px;padding-right:8px}
  .hd-user .hd-uname{max-width:8ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media (max-width: 430px){
  /* 只留有图标的按钮收成图标，占位按钮（无图标）保留文字 */
  .hd-icobtn.has-icon .hd-btn-t{display:none}
  .hd-icobtn.has-icon{padding-inline:8px}
}
@media (max-width: 560px){
  .logo{gap:7px}
  .logo-t{font-size:var(--t-lock-18)}
  .logo-m{width:26px;height:26px;border-radius:var(--r-s)}
  .hd-r .btn{font-size:var(--t-xs);padding-inline:7px}
  .hd-av-wrap{width:30px;height:30px}
  .hd-user{gap:5px;padding:3px 7px 3px 3px}
  .hd-user .hd-uname{font-size:var(--t-xs);max-width:5ch}
  .tag.is-super{padding:3px 7px;font-size:11px}
}