/* ==========================================================================
 * ui-kit.css — 全站 UI 统一规范层（唯一真源）
 * --------------------------------------------------------------------------
 * 加载顺序必须**最后**（race.html 里排在 game.css / mp-teaser.css 之后）：
 *   早于任何组件样式，都会被组件自己的 font-size / border-radius 覆盖
 *   （实测：mp-teaser.css 的 .mp-btn{font-size:11.5px} 曾把统一层顶掉）。
 *
 * 只放「跨组件一致性」规则：圆角 / 字重 / 四态 / 禁用 / 焦点。
 * 不放布局尺寸 —— 尺寸属于各组件自己的容器约束。
 * ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
 * 按钮 / 页签 统一规范 v1（2026-10-28）
 * --------------------------------------------------------------------------
 * 诊断依据（_diag/ui/button-stats.json，6 个面板实测）：
 *   · 高度 8 种：30 / 32 / 35 / 36 / 40 / 44 / 48 / 52
 *   · 内边距 11 种、字号 6 种（11 / 11.5 / 12 / 13 / 13.33 / 16）、圆角 3 种
 *   · 66 个按钮规则里只有 11 个写了 :hover、4 个写了 :active，
 *     :focus / :disabled **一个都没有**
 *   → 后果：点「开始比赛」是斜切 + 放大 4%，点车库小按钮毫无反馈，
 *     点联机按钮（<a> 标签）连 :active 都不触发 —— 同一套 UI 手感各不相同。
 *
 * 本层只归「视觉语言」，**不动高度与内边距**：车库三栏宽度由 --pane-w
 * 黄金比例算出来，改按钮尺寸会连带挪整个布局。尺寸归并另做（STEP 2）。
 *
 * 两种形态并存，且各自内部必须完全一致：
 *   · 斜切（.btn 家族）＝ 主行动，保留品牌切角。
 *     ⚠ clip-path 会把 border-radius 裁掉，所以斜切类**不加圆角**。
 *   · 圆角矩形（其余全部）＝ 导航 / 次级 / 分段 / chip，统一 10px（chip 8px）。
 * ══════════════════════════════════════════════════════════════════════════ */

:root {
  --ui-r-btn: 10px;
  --ui-r-chip: 8px;
  --ui-line: rgba(255, 255, 255, .14);
  --ui-line-hi: rgba(255, 255, 255, .30);
  --ui-bg-1: rgba(255, 255, 255, .045);
  --ui-bg-2: rgba(255, 255, 255, .095);
  --ui-bg-3: rgba(255, 255, 255, .155);
  --ui-focus: rgba(255, 74, 52, .92);
  --ui-off: .38;
  --ui-t: 140ms cubic-bezier(.22, .82, .24, 1);
}

/* ── 1. 圆角矩形家族：统一圆角 / 字重 / 光标 ─────────────────────────── */
.mtab, .gtab, .mp-btn, .seg button, .drawer-tab,
.gbtn-mini, .gbtn-wide, .gpanel-fold, .asw,
.lb-actions .btn, .garage-center .btn,
#menu .mpane button:not(.btn):not(.t-btn):not(.mtab):not(.gtab) {
  border-radius: var(--ui-r-btn);
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.car-chip, .paint-chip, .gbolt-chip { border-radius: var(--ui-r-chip); font-weight: 600; cursor: pointer; }

/* ── 2. 四态归一：hover 只提亮不位移，active 统一 .98 ────────────────── */
.mtab, .gtab, .mp-btn, .seg button, .drawer-tab,
.gbtn-mini, .gbtn-wide, .gpanel-fold, .asw,
#menu .mpane button:not(.btn):not(.t-btn):not(.mtab):not(.gtab) {
  transition: background-color var(--ui-t), color var(--ui-t),
              border-color var(--ui-t), outline-color var(--ui-t),
              box-shadow var(--ui-t), filter var(--ui-t), transform var(--ui-t);
}
.mtab:active, .gtab:active, .mp-btn:active, .seg button:active, .drawer-tab:active,
.gbtn-mini:active, .gbtn-wide:active, .gpanel-fold:active, .asw:active,
#menu .mpane button:not(.btn):not(.t-btn):not(.mtab):not(.gtab):active {
  transform: scale(.98);
}

/* 斜切主按钮：保留切角动效，但把幅度收窄——原来 hover 放大 4% 是全站最大跳动，
   和其他按钮的 .985 不是一个量级，正是「点不同按钮样式会变」的主要观感来源。 */
.btn:hover { transform: scale(1.02) skewX(-1deg); }
.btn:active { transform: scale(.98) skewX(-1.5deg); }

/* ── 3. 键盘可达性：全站统一焦点环（原来只有 6 个类有） ───────────────── */
.mtab:focus-visible, .gtab:focus-visible, .mp-btn:focus-visible,
.seg button:focus-visible, .drawer-tab:focus-visible,
.gbtn-mini:focus-visible, .gbtn-wide:focus-visible, .gpanel-fold:focus-visible,
.asw:focus-visible, .car-chip:focus-visible, .paint-chip:focus-visible,
.gbolt-chip:focus-visible, .btn:focus-visible,
#menu .mpane button:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 2px;
}
/* 鼠标点击后不留焦点环，只有键盘 Tab 才显示（否则点一下按钮就多一圈框） */
.mtab:focus:not(:focus-visible), .gtab:focus:not(:focus-visible),
.mp-btn:focus:not(:focus-visible), .btn:focus:not(:focus-visible),
.drawer-tab:focus:not(:focus-visible), .seg button:focus:not(:focus-visible),
.gbtn-mini:focus:not(:focus-visible), .gbtn-wide:focus:not(:focus-visible),
.asw:focus:not(:focus-visible) {
  outline: none;
}

/* ── 4. 禁用态：全站原本 0 定义，之前只能靠 opacity 手写 ───────────────── */
.mtab:disabled, .gtab:disabled, .mp-btn:disabled, .seg button:disabled,
.drawer-tab:disabled, .gbtn-mini:disabled, .gbtn-wide:disabled,
.gpanel-fold:disabled, .btn:disabled,
#menu .mpane button:disabled,
.mp-btn.is-disabled, .asw[aria-disabled="true"], .car-chip.is-disabled {
  opacity: var(--ui-off);
  cursor: not-allowed;
  filter: grayscale(.35);
  transform: none !important;
  box-shadow: none;
}

/* ── 5. 分段控件（.seg）：⚠ 判定修正 ────────────────────────────────────
 * game.css 里 .seg 是 `display:flex; gap:6px; flex-wrap:wrap`，每个 button
 * 各自带 1px 边框 —— 它们是**并排的独立小按钮**，不是连体分段控件。
 * 所以这里**不能**给 .seg 加 overflow:hidden + 首尾圆角（会把中间格子
 * 变成直角、两头变圆角，反而更乱）。统一由第 1 段的 10px 圆角覆盖即可。 */

/* ── 6. 页签圆角：.mtab 被 #menu .menu-tabs .mtab 的 8px 压住，必须同级覆盖 ── */
#menu .menu-tabs .mtab,
#menu.is-garage .menu-tabs .mtab,
#menu.is-showcase .menu-tabs .mtab,
#menu.is-garage.is-showcase .menu-tabs .mtab,
#menu .menu-tabs.is-garage .mtab {
  border-radius: var(--ui-r-btn);
}

/* ── 7. 字号收口：全站实测 6 种字号，其中两个是「野生值」—— ──────────────
 *   · 13.33px = 浏览器 <button> 默认字号，说明 .gpanel-fold 从没设过字体
 *   · 11.5px  = 半像素，非标度体系里的值
 * 都归到 12px。.mtab(13) / .gtab(11) / .asw(16) 是有层级语义的，保留。 */
.gpanel-fold { font-size: 12px; }
.mp-btn { font-size: 12px; letter-spacing: .12em; }

/* ══════════════════════════════════════════════════════════════════════════
 * STEP 2 —— 尺寸与间距体系（2026-10-28）
 * --------------------------------------------------------------------------
 * 实测有 8 种高度（30/32/35/36/40/44/48/52）、11 种内边距，收成 4 档：
 *
 *   档位    高度   水平内边距   适用范围
 *   sm      32px   12px        折叠按钮、迷你按钮
 *   md      40px   16px        内页签、分段按钮、联机按钮、次级按钮
 *   lg      48px   16px        列表项 .asw
 *   nav     44px   16px        主菜单页签 .mtab（独立档：撑的是 96px 左侧导轨）
 *
 * 斜切族 .btn 的 48px 高度与内边距不动 —— clip-path 的切角要吃掉水平空间。
 *
 * ⚠ 只在 ≥861px 生效：≤860 是触摸端，热区要求 ≥44px 且有独立断点规则，
 *   在这里改会顶掉移动端适配。
 * ⚠ 一律用 min-height，不用 height：文案换行时不能被裁。
 * ⚠ 只改按钮自身盒模型，**不碰任何 grid / gap / 容器宽度** ——
 *   车库三栏由 --pane-w 黄金比例算出，动容器会把三栏挤变形。
 * ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 861px) {
  :root {
    --ui-h-sm: 32px; --ui-px-sm: 12px;
    --ui-h-md: 40px; --ui-px-md: 16px;
    --ui-h-lg: 48px;
    --ui-h-nav: 44px; --ui-px-nav: 16px;
  }

  /* —— sm 档 —— */
  .gpanel-fold {
    width: var(--ui-h-sm);
    height: var(--ui-h-sm);
    min-height: var(--ui-h-sm);
  }
  .gbtn-mini {
    min-height: var(--ui-h-sm);
    padding: 0 var(--ui-px-sm);
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* —— md 档（.gtab 是 flex:1 1 0 等分，加大内边距只缩内容区，不会撑破行） —— */
  .gtab {
    min-height: var(--ui-h-md);
    padding: 0 var(--ui-px-md);
    font-size: 12px;
  }
  .seg button {
    min-height: var(--ui-h-md);
    padding: 0 var(--ui-px-md);
  }
  .mp-btn {
    min-height: var(--ui-h-md);
    padding: 0 var(--ui-px-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .gbtn-wide {
    min-height: var(--ui-h-md);
    padding: 0 var(--ui-px-md);
  }
  /* 面板里没挂 .btn/.mtab/.gtab/.t-btn 的裸按钮（排行「刷新」等） */
  #menu .mpane button:not(.btn):not(.t-btn):not(.mtab):not(.gtab) {
    min-height: var(--ui-h-md);
    padding: 0 var(--ui-px-md);
  }

  /* —— lg 档：列表项保持自己的 flex 布局，只收高度与左右留白 —— */
  .asw {
    min-height: var(--ui-h-lg);
    padding: 8px var(--ui-px-md);
  }

  /* —— nav 档：左右留白从 10px 提到 16px，与 md 档对齐（宽度仍由 --u-rail 锁定） —— */
  #menu .menu-tabs .mtab {
    min-height: var(--ui-h-nav);
    padding: 0 var(--ui-px-nav);
  }
}