/* ==========================================================================
   components.css — 基础交互件：按钮 · 胶囊 · 折扣角标 · 信任状条 · 顶栏盒子入口
   列表页的「导航 / 筛选」控件（标签墙 · 分段控件 · 筛选条 · 快捷筛片）已拆到 filters.css。
   依赖：tokens.css / base.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   按钮
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 44px;                       /* 触控目标下限 */
  padding: 10px var(--sp-6);
  border: 0;
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  transition: filter var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-in-out);
}

/* L2 主行动：实心渐变 + 琥珀发光。同屏只允许 1 个 */
.btn--primary {
  background: var(--grad-cta);
  color: var(--acc-ink);
  box-shadow: var(--glow-acc);
}
.btn--primary:hover { color: var(--acc-ink); filter: brightness(1.06); }
.btn--primary:active { transform: scale(.97); filter: brightness(.98); }

/* 次级：描边（不要用浅灰实心，看着像禁用态） */
.btn--ghost {
  background: var(--bg-3);
  color: var(--txt-1);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.btn--ghost:hover { color: var(--txt-1); box-shadow: inset 0 0 0 1px var(--acc-400); }

/* 幽灵文字按钮 */
.btn--text { background: none; color: var(--acc-400); padding-inline: var(--sp-3); }
.btn--text:hover { color: var(--acc-300); }

.btn--sm { min-height: 36px; padding: 7px var(--sp-4); font-size: 14px; }
.btn--block { width: 100%; }

.btn.is-busy { opacity: .72; pointer-events: none; }
.btn.is-used { opacity: .55; filter: grayscale(.35); pointer-events: none; }

/* L1 卡片 mini CTA：描边胶囊，不与角标抢注意力 */
.gcard-dl {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  margin-top: var(--sp-2);
  border-radius: var(--r-pill);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--acc-400);
  box-shadow: inset 0 0 0 1px rgba(255, 176, 32, .40);
}
.gcard-dl:hover { background: var(--acc-400); color: var(--acc-ink); }

/* 复制按钮 */
.btn-copy {
  flex: none;
  padding: 6px 12px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--bg-4);
  color: var(--txt-2);
  font-size: 12.5px;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: background var(--dur-2), color var(--dur-2);
}
.btn-copy:hover { color: var(--txt-1); }
.btn-copy.is-done { background: var(--ok-400); color: var(--acc-ink); }
.btn-copy.is-shake { animation: copy-shake 300ms var(--ease-in-out); }
@keyframes copy-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .btn--primary:active { transform: none; }
  .btn-copy.is-shake { animation: none; }
}

/* --------------------------------------------------------------------------
   胶囊 / 行内小标
   -------------------------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: rgba(255, 176, 32, .12);
  color: var(--acc-400);
  font-size: 12.5px;
  line-height: 1.5;
}
.pill--gray { background: var(--bg-5); color: var(--txt-2); }
.pill--cool { background: rgba(56, 182, 255, .12); color: var(--cool-300); }

/* L3 行内行动：小号实心琥珀 */
.pill--act {
  background: var(--acc-400);
  color: var(--acc-ink);
  font-weight: 700;
  min-height: 32px;
  padding-inline: var(--sp-3);
}
.pill--act:hover { background: var(--acc-300); color: var(--acc-ink); }

/* --------------------------------------------------------------------------
   客户端平台标（安卓 / iOS）
   口径：0=安卓 / 1=苹果 / 2=双端，与 src/api.py 的 DEVICE_TEXT 同源。
   两标只在「双端」时并排出现；数量随数据走，不预置固定个数。
   安卓=中性灰（放之四海皆通），iOS=冷蓝（与 .pill--cool 同族）。
   -------------------------------------------------------------------------- */
.plats { display: inline-flex; align-items: center; gap: 4px; }
.plat {
  display: inline-flex;
  align-items: center;
  height: 19px;
  padding: 0 6px;
  border-radius: var(--r-xs);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
}
.plat.is-android { background: var(--bg-5); color: var(--txt-2); }
.plat.is-ios { background: rgba(56, 182, 255, .12); color: var(--cool-300); }
/* 卡片里的形态：独立一行挂在「传奇 · 新区 30」下面。
   不跟 .tg 同行 —— 那行是 nowrap+省略号，挤进去会在窄卡上丢标。 */
.plats.is-card { display: flex; margin-top: 5px; }
/* 开服行的形态：独立一行挂在「区服 · 版本」下面（.sn-sub 是 nowrap+省略号，
   标塞进去会被裁）。比卡片里的再小一号 —— 开服表行高只有 28px。 */
.plats.is-row { display: flex; margin-top: 3px; }
.plats.is-row .plat { height: 17px; padding: 0 5px; font-size: 10.5px; }

/* --------------------------------------------------------------------------
   折扣角标（全站最高权重组件）
   三档色温 = 折扣力度；文字一律近黑墨色保证对比度 ≥4.5:1；霓虹底上禁白字
   -------------------------------------------------------------------------- */
.badge-discount {
  display: inline-flex;
  align-items: center;
  height: 19px;
  padding: 0 6px;
  border-radius: var(--r-xs);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  vertical-align: 1px;
  pointer-events: none;             /* 不可点击，点击穿透到卡片 */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .55);
}
.badge-discount.is-s {
  background: var(--grad-hot);
  color: #1b0a12;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .34),
    0 0 12px -2px rgba(255, 61, 110, .65);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}
.badge-discount.is-a {
  background: var(--grad-gold);
  color: #20140a;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .30),
    0 0 10px -4px rgba(255, 176, 32, .55);
}
.badge-discount.is-b {
  background: rgba(56, 182, 255, .12);
  color: var(--cool-300);
  border: 1px solid rgba(56, 182, 255, .42);
  border-radius: var(--r-pill);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0;
}
.badge-discount.is-neutral {
  background: var(--bg-5);
  color: var(--txt-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 10.5px;
  font-weight: 700;
}
/* 悬停只加强发光，角标本身不位移（避免网格一片抖动） */
@media (hover: hover) {
  .gcard:hover .is-s {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .34),
      0 0 18px -2px rgba(255, 61, 110, .80);
  }
  .gcard:hover .is-a {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .30),
      0 0 16px -4px rgba(255, 176, 32, .72);
  }
}
@media (max-width: 599px) {
  .badge-discount { height: 17px; padding: 0 5px; font-size: 10px; }
}
/* 详情页 H1 旁：大号 */
.badge-discount.is-lg {
  height: 26px;
  padding: 0 11px;
  border-radius: var(--r-sm);
  font-size: 14px;
  vertical-align: 4px;
  clip-path: none;
}
.badge-discount.is-lg.is-s { clip-path: polygon(0 0, 100% 0, 100% 100%, 9px 100%, 0 calc(100% - 9px)); }
/* 表格 / 列表行内：小号，紧跟游戏名（不用绝对定位） */
.badge-discount.is-inline {
  height: 17px;
  padding: 0 5px;
  font-size: 10.5px;
  margin-left: 6px;
  clip-path: none;
}

/* --------------------------------------------------------------------------
   信任状条（chips ≤5，每个都可点验证）
   -------------------------------------------------------------------------- */
.trust { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  color: var(--txt-2);
  font-size: 12.5px;
}
.trust-chip b { color: var(--acc-400); font-weight: 700; font-variant-numeric: tabular-nums; }
.trust-chip:hover { color: var(--txt-1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }

/* --------------------------------------------------------------------------
   顶栏「装盒子」入口（设计稿 01/07 站头右侧）
   窄屏（<420）只留图标：320~419px 一排同时塞下 LOGO + 搜索占位 + 图标+文字
   会把搜索占位挤掉，而 360 是国产安卓最常见宽度、320 是老机型下限，二者都不能破。
   -------------------------------------------------------------------------- */
.head-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: none;
  min-height: 34px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px rgba(255, 176, 32, .55);
  color: var(--acc-300);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.head-box:hover { color: var(--acc-200); background: rgba(255, 176, 32, .10); }
.head-box svg { width: 15px; height: 15px; flex: none; }
@media (max-width: 419px) {
  .head-box { width: 34px; padding: 0; }
  .head-box span { display: none; }
}