/* =====================================================================
   LEL 赛事报名系统 —— 主题样式
   WE 粉丝赛配色：黑 + WE 红为主，金/冰蓝退为辅助
   全部装饰由 CSS 与 SVG 绘制，不使用任何未经授权的官方原画与队标。
   ===================================================================== */

:root {
  --bg: #08070a;
  --bg-soft: #100e13;
  --panel: #17141b;
  --panel-2: #1f1a23;
  --panel-3: #2a222d;
  --border: #33262f;
  --border-soft: #251d26;

  /* 文本层级：深色底上的可读性由这四档决定，任何主题调整都不能删 */
  --text: #eef2f8;
  --text-soft: #b9c3d8;
  --muted: #8a96b0;
  --muted-2: #6f7893;

  /* 品牌主色：WE 红。变量名沿用历史命名，全站按钮/链接会自动跟随 */
  --gold: #e60012;
  --gold-light: #ff6b74;
  --gold-dark: #8f000b;
  --violet: #ff2d3f;
  --violet-soft: #ff6b74;
  --cyan: #ffb3b8;

  /* 语义色保持可辨：成功=绿，警告=琥珀，错误=偏橙的红 */
  --success: #2ecc8f;
  --warn: #f5a623;
  --danger: #ff6b52;
  --info: #ffb3b8;

  /* WE 主题专用 */
  --we-red: #e60012;
  --we-red-deep: #8f000b;
  --we-red-soft: rgba(230, 0, 18, 0.16);
  --we-ink: #05040a;

  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  --shadow-soft: 0 4px 14px rgba(0, 0, 0, 0.35);
  --maxw: 1180px;

  /* 拍卖分组用色（2026-09-27）：登峰 = 金 #f2c14e，涅槃 = 蓝紫 #8ea2ff。
     刻意不复用主题里的红（品牌）/ 绿（成交）/ 琥珀（队长），
     否则现场看一眼颜色根本分不清「这人是登峰还是刚成交」。
     拍卖页与后台都读这两个变量，改色只改这一处。 */
  --grp-dengfeng: #f2c14e;
  --grp-niepan: #8ea2ff;

  /* 封面指针视差位移：由 index.html 的脚本写行内值覆盖，这里是静止默认值 */
  --cover-x: 0px;
  --cover-y: 0px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background:
    radial-gradient(1100px 600px at 12% -12%, rgba(230, 0, 18, 0.22), transparent 62%),
    radial-gradient(900px 520px at 92% -4%, rgba(143, 0, 11, 0.28), transparent 58%),
    linear-gradient(180deg, #120a0e 0%, var(--bg) 42%);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB',
    Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* 顶部 WE 红条：所有页面统一，无需逐个改 HTML */
body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--we-red-deep), var(--we-red) 35%, #ff4d5c 50%, var(--we-red) 65%, var(--we-red-deep));
  z-index: 60;
}

/* WE 粉丝赛角标：首页 hero 用 */
.we-badge {
  display: inline-block;
  padding: 3px 12px;
  margin-bottom: 12px;
  font-size: 12.5px;
  letter-spacing: 0.12em;
  color: #fff;
  background: linear-gradient(90deg, var(--we-red-deep), var(--we-red));
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

a {
  color: var(--gold);
  text-decoration: none;
}
a:hover {
  color: var(--gold-light);
}

/* ------------------------------------------------------------- 布局 */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 16px 64px;
}
.wrap-narrow {
  max-width: 760px;
}
.row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.grid {
  display: grid;
  gap: 14px;
}
.grid-2 {
  grid-template-columns: 1fr;
}
.grid-3 {
  grid-template-columns: 1fr;
}
.grid-4 {
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 720px) {
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ------------------------------------------------------------- 顶栏 */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(8, 12, 22, 0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-soft);
}
.topbar-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--gold-light);
}
.brand-mark {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
}
.nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.nav a {
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-soft);
  font-size: 14px;
  white-space: nowrap;
}
.nav a:hover {
  background: var(--panel-2);
  color: var(--gold-light);
}
.nav a.active {
  background: linear-gradient(135deg, rgba(200, 170, 110, 0.18), rgba(123, 92, 255, 0.18));
  color: var(--gold-light);
  border: 1px solid var(--border);
}

/* ------------------------------------------------------------- 卡片 */
.card {
  background: linear-gradient(180deg, var(--panel), var(--bg-soft));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow-soft);
}
.card + .card {
  margin-top: 14px;
}
.card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--gold-light);
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-sub {
  color: var(--muted);
  font-size: 13px;
  margin: 0 0 14px;
}
.card-flush {
  padding: 0;
  overflow: hidden;
}

.hero {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 26px 20px;
  margin: 18px 0;
  overflow: hidden;
  background:
    radial-gradient(700px 300px at 10% 0%, rgba(123, 92, 255, 0.22), transparent 65%),
    radial-gradient(700px 300px at 95% 100%, rgba(200, 170, 110, 0.16), transparent 60%),
    linear-gradient(180deg, #121c33, #0a1020);
}
.hero h1 {
  margin: 0 0 6px;
  font-size: 24px;
  line-height: 1.3;
  color: var(--gold-light);
  letter-spacing: 0.5px;
}
.hero .sub {
  color: var(--text-soft);
  font-size: 14px;
  margin: 0;
}
/* 红色立体 LEL 标识：hero 右上角水印位（2026-09-22 替换原自绘六边形 WE 徽章） */
.hero-mark {
  position: absolute;
  right: -34px;
  top: -26px;
  width: 216px;
  height: auto;
  opacity: 0.2;
  pointer-events: none;
  filter: drop-shadow(0 12px 30px rgba(230, 0, 18, 0.35));
}

/* ------------------------------------------------------------- 按钮 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.12s ease, background 0.12s ease;
  text-align: center;
  line-height: 1.4;
}
.btn:hover:not(:disabled) {
  filter: brightness(1.15);
}
.btn:active:not(:disabled) {
  transform: translateY(1px);
}
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.btn-gold {
  background: linear-gradient(135deg, #7a6231, #c8aa6e);
  border-color: #d8bd82;
  color: #1a1408;
}
.btn-violet {
  background: linear-gradient(135deg, #4c34c9, #7b5cff);
  border-color: #9b86ff;
  color: #fff;
}
.btn-ghost {
  background: transparent;
  color: var(--text-soft);
}
.btn-danger {
  background: rgba(255, 92, 108, 0.14);
  border-color: rgba(255, 92, 108, 0.45);
  color: #ff9aa4;
}
.btn-success {
  background: rgba(46, 204, 143, 0.14);
  border-color: rgba(46, 204, 143, 0.45);
  color: #7ce0b8;
}
.btn-sm {
  padding: 6px 12px;
  font-size: 13px;
}
.btn-block {
  width: 100%;
}
.btn-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ------------------------------------------------------------- 表单 */
.field {
  margin-bottom: 16px;
}
.label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-soft);
  margin-bottom: 6px;
}
.label .req {
  color: var(--danger);
  margin-left: 2px;
}
.hint {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 5px;
}
.err {
  font-size: 12.5px;
  color: #ff8b97;
  margin-top: 5px;
  display: none;
}
.field.has-error .err {
  display: block;
}
.field.has-error .input,
.field.has-error .select,
.field.has-error .textarea {
  border-color: rgba(255, 92, 108, 0.6);
}

.input,
.select,
.textarea {
  width: 100%;
  padding: 11px 12px;
  background: #0a1120;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  appearance: none;
}
.select {
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
}
.select option {
  background: #0a1120;
  color: var(--text);
}
.textarea {
  min-height: 96px;
  resize: vertical;
  line-height: 1.6;
}
.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--gold-dark);
  box-shadow: 0 0 0 3px rgba(200, 170, 110, 0.14);
}
.input::placeholder,
.textarea::placeholder {
  color: var(--muted-2);
}

.check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #0a1120;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-soft);
  line-height: 1.5;
}
.check:hover {
  border-color: var(--gold-dark);
}
.check input {
  margin-top: 3px;
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  accent-color: var(--gold);
}
.check.checked {
  border-color: var(--gold-dark);
  background: rgba(200, 170, 110, 0.07);
  color: var(--text);
}
.check-list {
  display: grid;
  gap: 8px;
}

/* 单选组 */
.radio-group {
  display: grid;
  gap: 8px;
}
.radio-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #0a1120;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-soft);
}
.radio-pill input {
  accent-color: var(--gold);
}
.radio-pill.active {
  border-color: var(--gold-dark);
  background: rgba(200, 170, 110, 0.08);
  color: var(--text);
}
@media (min-width: 620px) {
  .radio-group.inline {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
}

/* ------------------------------------------------------------- 步骤条 */
.steps {
  margin: 16px 0;
}
.steps-bar {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
}
.steps-bar span {
  height: 5px;
  flex: 1;
  border-radius: 3px;
  background: var(--panel-3);
  transition: background 0.25s ease;
}
.steps-bar span.done {
  background: linear-gradient(90deg, var(--gold-dark), var(--gold));
}
.steps-bar span.current {
  background: linear-gradient(90deg, var(--violet), var(--gold));
}
.steps-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--muted);
}
.steps-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--gold-light);
  margin: 4px 0 2px;
}

/* ------------------------------------------------------------- 徽章与状态 */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12.5px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text-soft);
  white-space: nowrap;
}
.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 12px;
  background: var(--panel-3);
  color: var(--text-soft);
  border: 1px solid var(--border-soft);
}
.tag-gold {
  background: rgba(200, 170, 110, 0.14);
  color: var(--gold);
  border-color: rgba(200, 170, 110, 0.35);
}
.tag-violet {
  background: rgba(123, 92, 255, 0.16);
  color: var(--violet-soft);
  border-color: rgba(123, 92, 255, 0.35);
}

.st-draft { background: rgba(138, 150, 176, 0.16); color: #b9c3d8; border-color: rgba(138,150,176,0.3); }
.st-submitted { background: rgba(57, 208, 255, 0.14); color: #7fdcff; border-color: rgba(57,208,255,0.32); }
.st-pending { background: rgba(245, 166, 35, 0.14); color: #ffc66a; border-color: rgba(245,166,35,0.32); }
.st-resubmitted { background: rgba(245, 166, 35, 0.14); color: #ffc66a; border-color: rgba(245,166,35,0.32); }
.st-needs_info { background: rgba(255, 92, 108, 0.14); color: #ff9aa4; border-color: rgba(255,92,108,0.32); }
.st-approved { background: rgba(46, 204, 143, 0.14); color: #7ce0b8; border-color: rgba(46,204,143,0.32); }
.st-in_pool { background: rgba(123, 92, 255, 0.16); color: #b7a5ff; border-color: rgba(123,92,255,0.35); }
.st-confirmed { background: rgba(46, 204, 143, 0.2); color: #93ecc8; border-color: rgba(46,204,143,0.42); }
.st-substitute { background: rgba(200, 170, 110, 0.16); color: var(--gold); border-color: rgba(200,170,110,0.35); }
.st-rejected { background: rgba(138, 150, 176, 0.14); color: #a8b2c8; border-color: rgba(138,150,176,0.28); }
.st-cancelled_by_player { background: rgba(138, 150, 176, 0.12); color: #9aa5bd; border-color: rgba(138,150,176,0.24); }
.st-disqualified { background: rgba(255, 92, 108, 0.18); color: #ff8b97; border-color: rgba(255,92,108,0.4); }

/* 粉丝认证状态 */
.st-fan-passed { background: rgba(46, 204, 143, 0.16); color: #7ce0b8; border-color: rgba(46,204,143,0.34); }
.st-fan-pending { background: rgba(245, 166, 35, 0.14); color: #ffc66a; border-color: rgba(245,166,35,0.32); }
.st-fan-review { background: rgba(230, 0, 18, 0.18); color: #ff8b97; border-color: rgba(230,0,18,0.4); }

/* ------------------------------------------------------------- 统计卡 */
.stat {
  background: linear-gradient(180deg, var(--panel), var(--bg-soft));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
}
.stat .k {
  font-size: 12.5px;
  color: var(--muted);
}
.stat .v {
  font-size: 26px;
  font-weight: 800;
  color: var(--gold-light);
  line-height: 1.25;
}
.stat .v.violet {
  color: var(--violet-soft);
}
.stat .v.green {
  color: #7ce0b8;
}
.stat .v.warn {
  color: #ffc66a;
}

/* ------------------------------------------------------------- 表格 */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
}
table.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  min-width: 980px;
}
table.tbl th {
  position: sticky;
  top: 0;
  background: var(--panel-2);
  color: var(--gold);
  font-weight: 600;
  text-align: left;
  padding: 10px 12px;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
  cursor: default;
}
table.tbl th.sortable {
  cursor: pointer;
  user-select: none;
}
table.tbl th.sortable:hover {
  color: var(--gold-light);
}
table.tbl td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-soft);
  vertical-align: middle;
}
table.tbl tbody tr:hover td {
  background: rgba(123, 92, 255, 0.05);
}
table.tbl tbody tr:last-child td {
  border-bottom: none;
}
/* 「本局资源」小表（后台「编辑本局」弹窗内）：只有 5 列，**不能继承 table.tbl 的
   min-width: 980px** —— 那会让它在 560px 宽的弹窗里横向溢出，「小龙 / 大龙」两列
   直接被裁到可视区外（2026-10-07 实测踩到）。改固定布局 + 等比列宽，输入框占满单元格。 */
table.tbl.tbl-res {
  min-width: 0;
  table-layout: fixed;
}
table.tbl.tbl-res th,
table.tbl.tbl-res td {
  padding: 7px 6px;
}
table.tbl.tbl-res th:first-child,
table.tbl.tbl-res td:first-child {
  width: 36%;
}
table.tbl.tbl-res .input {
  padding: 7px 8px;
  font-size: 13.5px;
}
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
}

/* 报名管理大表（tbl-fit）：换行 + 紧凑内边距，把 15 列压进一屏宽，不再横向拉滚动条；
   min-width 640px 仅作为极窄屏的保底（此时才允许出现横向滚动） */
table.tbl.tbl-fit {
  min-width: 640px;
  font-size: 12.5px;
}
table.tbl.tbl-fit th,
table.tbl.tbl-fit td {
  padding: 8px 8px;
}
table.tbl.tbl-fit th {
  white-space: normal;
}
table.tbl.tbl-fit td {
  word-break: break-word;
}
table.tbl.tbl-fit td .badge {
  font-size: 11.5px;
  padding: 2px 7px;
}
table.tbl.tbl-fit .mono {
  font-size: 12px;
}
/* 操作列按钮不换行（审核保持横排）、提交时间表头不拆字 */
table.tbl.tbl-fit td:last-child {
  white-space: nowrap;
}
/* 尾列（提交时间）表头不拆字：列数为 15，所以是第 15 个子元素。
   ⚠️ 新增/删除列时必须同步改这个序号（tests/frontend-check.js 有断言盯住）。
   2026-10-10：删掉「最高段位/首选位置/次选位置」、加入「认定段位/最终参赛位置」，
   净减 1 列 ⇒ 16 → 15。 */
table.tbl.tbl-fit th:nth-child(15) {
  white-space: nowrap;
}

/* ------------------------------------------------------------- 详情列表 */
.kv {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 640px) {
  .kv {
    grid-template-columns: repeat(2, 1fr);
    gap: 0 20px;
  }
}
.kv-item {
  padding: 9px 0;
  border-bottom: 1px dashed var(--border-soft);
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.kv-item .k {
  flex: 0 0 120px;
  color: var(--muted);
  font-size: 13px;
}
.kv-item .v {
  flex: 1;
  color: var(--text);
  font-size: 13.5px;
  word-break: break-word;
  white-space: pre-wrap;
}
.kv-full {
  grid-column: 1 / -1;
}

/* ------------------------------------------------------------- 时间线 */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 18px;
  border-left: 2px solid var(--border);
}
.timeline li {
  position: relative;
  padding: 0 0 16px 16px;
}
.timeline li:last-child {
  padding-bottom: 0;
}
.timeline li::before {
  content: '';
  position: absolute;
  left: -25px;
  top: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--panel-3);
  border: 2px solid var(--border);
}
.timeline li.now::before {
  background: var(--gold);
  border-color: var(--gold-light);
  box-shadow: 0 0 0 3px rgba(200, 170, 110, 0.18);
}
.timeline .t {
  font-size: 13.5px;
  color: var(--text);
  font-weight: 600;
}
.timeline .d {
  font-size: 12.5px;
  color: var(--muted);
}
.timeline .r {
  font-size: 13px;
  color: #ffb4bc;
  margin-top: 4px;
  background: rgba(255, 92, 108, 0.08);
  border-left: 2px solid rgba(255, 92, 108, 0.5);
  padding: 6px 10px;
  border-radius: 0 6px 6px 0;
}

/* ------------------------------------------------------------- 提示条 */
.alert {
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 13.5px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text-soft);
  margin-bottom: 14px;
}
.alert b {
  color: var(--gold-light);
}
.alert-gold {
  border-color: rgba(200, 170, 110, 0.4);
  background: rgba(200, 170, 110, 0.08);
}
.alert-danger {
  border-color: rgba(255, 92, 108, 0.4);
  background: rgba(255, 92, 108, 0.08);
  color: #ffc3c9;
}
.alert-success {
  border-color: rgba(46, 204, 143, 0.4);
  background: rgba(46, 204, 143, 0.08);
  color: #a9ecd1;
}
.alert-info {
  border-color: rgba(57, 208, 255, 0.35);
  background: rgba(57, 208, 255, 0.07);
  color: #b7e8ff;
}

/* --------------------------------------------- 审核表单防误触（改动提示） */
/* 有未保存的改动时，审核卡片顶部出现的提示条 */
.alert-warn {
  border-color: rgba(230, 0, 18, 0.45);
  background: rgba(230, 0, 18, 0.08);
  color: var(--text);
}
/* 被改动的字段：左侧红条 + 淡底，一眼能看出「这里动过」 */
.field-changed {
  border-left: 3px solid var(--gold);
  padding-left: 8px;
  border-radius: 4px;
  background: rgba(230, 0, 18, 0.05);
}
/* 确认框里的改动清单 */
.change-list {
  max-height: 220px;
  overflow: auto;
  padding: 8px 10px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
}
.change-list .small + .small {
  margin-top: 4px;
}
/* 禁用的联动控件（如非大师段位时的分数框）弱化显示，避免误以为能点 */
.input:disabled,
.select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ------------------------------------------------------------- 空态 / 加载 */
.empty,
.loading {
  text-align: center;
  padding: 40px 16px;
  color: var(--muted);
  font-size: 14px;
}
.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(200, 170, 110, 0.25);
  border-top-color: var(--gold);
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
  margin-right: 8px;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.skeleton {
  background: linear-gradient(90deg, var(--panel-2) 25%, var(--panel-3) 50%, var(--panel-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 6px;
  height: 14px;
}
@keyframes shimmer {
  to {
    background-position: -200% 0;
  }
}

/* ------------------------------------------------------------- 弹层 */
.toast-box {
  position: fixed;
  left: 50%;
  top: 18px;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(92vw, 460px);
  pointer-events: none;
}
.toast {
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: #16223c;
  color: var(--text);
  font-size: 13.5px;
  box-shadow: var(--shadow);
  animation: toastIn 0.22s ease;
  word-break: break-word;
}
.toast.error {
  border-color: rgba(255, 92, 108, 0.5);
  background: #2a1622;
}
.toast.success {
  border-color: rgba(46, 204, 143, 0.5);
  background: #10281f;
}
.toast.info {
  border-color: rgba(57, 208, 255, 0.4);
  background: #10212e;
}
@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

.modal-mask {
  position: fixed;
  inset: 0;
  background: rgba(3, 6, 12, 0.72);
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.modal {
  width: min(96vw, 560px);
  max-height: 88vh;
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 20px;
}
.modal h3 {
  margin: 0 0 12px;
  color: var(--gold-light);
  font-size: 17px;
}

/* ------------------------------------------------------------- 分页 */
.pager {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  padding: 14px;
  flex-wrap: wrap;
}
.pager .info {
  color: var(--muted);
  font-size: 13px;
}
.pager .page-jump {
  width: 64px;
  padding: 6px 8px;
  font-size: 13px;
  text-align: center;
}

/* ------------------------------------------------------------- 标签页 */
.tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
  padding-bottom: 0;
}
.tabs button {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.tabs button:hover {
  color: var(--text);
}
.tabs button.active {
  color: var(--gold-light);
  border-bottom-color: var(--gold);
}

/* ------------------------------------------------------------- 查询码展示 */
.code-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px;
  border-radius: var(--radius);
  border: 1px dashed rgba(200, 170, 110, 0.5);
  background: rgba(200, 170, 110, 0.08);
  margin: 12px 0;
  flex-wrap: wrap;
}
.code-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 26px;
  letter-spacing: 3px;
  font-weight: 800;
  color: var(--gold-light);
}
.code-label {
  font-size: 12.5px;
  color: var(--muted);
  width: 100%;
  text-align: center;
}

/* ------------------------------------------------------------- 进度条 */
.bar {
  height: 8px;
  border-radius: 4px;
  background: var(--panel-3);
  overflow: hidden;
}
.bar > i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--violet), var(--gold));
  border-radius: 4px;
  transition: width 0.4s ease;
}
.bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 13px;
}
.bar-row .name {
  flex: 0 0 84px;
  color: var(--text-soft);
}
.bar-row .num {
  flex: 0 0 42px;
  text-align: right;
  color: var(--muted);
  font-family: ui-monospace, monospace;
}

/* ------------------------------------------------------------- 粉丝答题 */
.quiz-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}
.quiz-progress-text {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.quiz-clock {
  font-size: 14px;
  font-family: ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  color: var(--text-soft);
}
.quiz-bar {
  height: 6px;
  border-radius: 99px;
  background: var(--panel-3);
  overflow: hidden;
  margin-bottom: 16px;
}
.quiz-bar-fill {
  height: 100%;
  border-radius: 99px;
  background: var(--we-red);
  transition: width 0.1s linear;
}

/* 题面：字号略大、行距放宽，长题干也能一眼读完 */
.quiz-question {
  font-size: 17px;
  line-height: 1.75;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 16px;
  word-break: break-word;
}

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* 选项整行可点、热区足够大，减少误触 */
.quiz-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  color: var(--text);
  font-family: inherit;
  font-size: 15.5px;
  line-height: 1.6;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.quiz-option:hover {
  border-color: var(--we-red);
  background: var(--we-red-soft);
}
.quiz-option:active {
  transform: scale(0.99);
}
.quiz-option-key {
  flex: 0 0 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--panel-3);
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 700;
  line-height: 26px;
  text-align: center;
}
.quiz-option:hover .quiz-option-key {
  background: var(--we-red);
  color: #fff;
}
.quiz-option-text {
  flex: 1 1 auto;
  word-break: break-word;
}
@media (max-width: 420px) {
  .quiz-question {
    font-size: 16px;
  }
  .quiz-option {
    font-size: 15px;
    padding: 12px 13px;
  }
}

/* ------------------------------------------------------------- 页脚 */
.footer {
  margin-top: 28px;
  padding: 18px 0;
  border-top: 1px solid var(--border-soft);
  color: var(--muted-2);
  font-size: 12.5px;
  text-align: center;
  line-height: 1.8;
}

/* ------------------------------------------------------------- 手机端固定操作条 */
.mobile-bar {
  display: none;
}
@media (max-width: 767px) {
  .mobile-bar {
    display: flex;
    gap: 10px;
    position: sticky;
    bottom: 0;
    padding: 12px 0 14px;
    background: linear-gradient(180deg, rgba(7, 11, 20, 0), rgba(7, 11, 20, 0.96) 40%);
    z-index: 30;
  }
  .mobile-bar .btn {
    flex: 1;
  }
  .hero h1 {
    font-size: 20px;
  }
  .hide-mobile {
    display: none !important;
  }
}
@media (min-width: 768px) {
  .only-mobile {
    display: none !important;
  }
}

/* ------------------------------------------------------------- 后台 */
.admin-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 1000px) {
  .admin-shell {
    grid-template-columns: 210px minmax(0, 1fr);
    align-items: start;
  }
  .admin-side {
    position: sticky;
    top: 74px;
  }
}
.admin-side .menu {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 4px;
}
@media (min-width: 1000px) {
  .admin-side .menu {
    flex-direction: column;
    overflow: visible;
    padding-bottom: 0;
  }
}
.admin-side .menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-soft);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  text-align: left;
}
.admin-side .menu button:hover {
  background: var(--panel-2);
  color: var(--gold-light);
}
.admin-side .menu button.active {
  background: linear-gradient(135deg, rgba(200, 170, 110, 0.16), rgba(123, 92, 255, 0.16));
  border-color: var(--border);
  color: var(--gold-light);
}
.admin-side .menu button .coin {
  font-size: 12px;
  color: var(--muted);
  margin-left: auto;
}

.filter-bar {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .filter-bar {
    grid-template-columns: repeat(4, 1fr);
  }
  .filter-bar .wide {
    grid-column: span 2;
  }
}
.detail-split {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 1080px) {
  .detail-split {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: start;
  }
}

.chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.chip {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text-soft);
  font-size: 13px;
  cursor: pointer;
}
.chip.active {
  border-color: var(--gold-dark);
  background: rgba(200, 170, 110, 0.14);
  color: var(--gold-light);
}

.pill-group {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.pill {
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-size: 12.5px;
  cursor: pointer;
  font-family: inherit;
}
.pill.active {
  background: var(--panel-3);
  color: var(--gold-light);
  border-color: var(--gold-dark);
}

.section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--gold);
  margin: 20px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-soft);
}

.divider {
  height: 1px;
  background: var(--border-soft);
  margin: 16px 0;
}

.muted {
  color: var(--muted);
}
.small {
  font-size: 12.5px;
}
.nowrap {
  white-space: nowrap;
}
.right {
  text-align: right;
}
.center {
  text-align: center;
}
.hidden {
  display: none !important;
}

/* =====================================================================
   WE 品牌视觉层
   —— 本段覆盖前文同名规则，品牌相关样式统一在此维护。
   —— 图形来源：自制矢量（徽章/水印/纹理）+ 抽象氛围图，
      不含任何未经授权的官方队标与原画。
   ===================================================================== */

/* ------------------------------------------------ 全局：菱形网格 + 右下 WE 水印 */
body {
  background-color: var(--bg);
  background-image:
    url('/assets/brand/bg-grid.svg'),
    url('/assets/brand/we-mark-ghost.svg'),
    radial-gradient(1100px 600px at 12% -12%, rgba(230, 0, 18, 0.24), transparent 62%),
    radial-gradient(900px 520px at 92% -4%, rgba(143, 0, 11, 0.3), transparent 58%),
    linear-gradient(180deg, #120a0e 0%, var(--bg) 42%);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: 0 0, right -80px bottom -96px, 0 0, 0 0, 0 0;
  background-size: 48px 48px, 460px 460px, auto, auto, auto;
  background-attachment: scroll, fixed, fixed, fixed, fixed;
}
@media (max-width: 720px) {
  body {
    background-size: 36px 36px, 230px 230px, auto, auto, auto;
    background-position: 0 0, right -70px bottom -70px, 0 0, 0 0, 0 0;
  }
}

/* ------------------------------------------------ 顶栏品牌 */
.topbar {
  background: rgba(8, 5, 8, 0.92);
}
.topbar::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(230, 0, 18, 0.6), transparent);
  pointer-events: none;
}
.brand {
  gap: 11px;
  color: #fff;
}
.brand-mark {
  width: auto;
  height: 36px;
  flex: 0 0 auto;
  filter: drop-shadow(0 3px 10px rgba(230, 0, 18, 0.5));
}
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.16;
}
.brand-name {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.05em;
}
.brand-sub {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.26em;
  color: #ff8b97;
}
.nav a.active {
  background: linear-gradient(135deg, rgba(230, 0, 18, 0.26), rgba(143, 0, 11, 0.2));
  border: 1px solid rgba(230, 0, 18, 0.42);
  color: #ffd7da;
}

/* ------------------------------------------------ 首页 hero：竞技场大图 */
.hero {
  padding: 34px 24px;
  background-color: #07040a;
  background-image:
    linear-gradient(100deg, rgba(5, 4, 7, 0.97) 0%, rgba(11, 6, 10, 0.86) 42%, rgba(96, 0, 9, 0.42) 100%),
    url('/assets/brand/bg-arena.jpg');
  background-size: cover, cover;
  background-position: center, center 42%;
  background-repeat: no-repeat, no-repeat;
  box-shadow: var(--shadow);
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/assets/brand/bg-grid.svg');
  background-size: 44px 44px;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
.hero > * {
  position: relative;
  z-index: 1;
}
.hero h1 {
  font-size: 27px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.7);
}
.hero .sub {
  color: #e6d4d8;
}
@media (min-width: 720px) {
  .hero {
    padding: 44px 34px;
  }
  .hero h1 {
    font-size: 36px;
  }
}
.we-badge {
  background: linear-gradient(90deg, #8f000b, #e60012 55%, #ff4d5c);
  box-shadow: 0 6px 20px rgba(230, 0, 18, 0.4);
  font-weight: 700;
}

/* ------------------------------------------------ 卡片：左侧 WE 红描边 + 六边形角标 */
.card {
  position: relative;
  overflow: hidden;
}
.card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--we-red), rgba(230, 0, 18, 0));
  opacity: 0.55;
  pointer-events: none;
}
.card::after {
  content: '';
  position: absolute;
  right: -26px;
  bottom: -30px;
  width: 132px;
  height: 132px;
  background: url('/assets/brand/we-mark-ghost.svg') center / contain no-repeat;
  opacity: 0.55;
  pointer-events: none;
}
.card-flush::before,
.card-flush::after {
  display: none;
}

/* ------------------------------------------------ 统计卡：六边形底纹 */
.stat {
  position: relative;
  overflow: hidden;
}
.stat::after {
  content: '';
  position: absolute;
  right: -30px;
  bottom: -34px;
  width: 116px;
  height: 116px;
  background: url('/assets/brand/bg-hex.svg') center / contain no-repeat;
  opacity: 0.5;
  pointer-events: none;
}

/* ------------------------------------------------ 章节标题：小 WE 竖条 */
.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gold-light);
}
.section-title::before {
  content: '';
  width: 4px;
  height: 14px;
  border-radius: 2px;
  background: linear-gradient(180deg, #ff6b74, var(--we-red));
  flex: 0 0 4px;
}

/* ------------------------------------------------ 表单与答题：WE 水印面板 */
.we-panel {
  position: relative;
  isolation: isolate;
}
.we-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/assets/brand/we-mark-ghost.svg') right -40px bottom -46px / 260px 260px no-repeat;
  opacity: 0.85;
  pointer-events: none;
  z-index: -1;
  border-radius: inherit;
}
.we-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/assets/brand/bg-grid.svg');
  background-size: 40px 40px;
  opacity: 0.4;
  pointer-events: none;
  z-index: -1;
  border-radius: inherit;
}

/* 答题进度条：WE 红高光 */
.quiz-bar-fill {
  background: linear-gradient(90deg, var(--we-red-deep), var(--we-red) 60%, #ff6b74);
  box-shadow: 0 0 12px rgba(230, 0, 18, 0.55);
}

/* ------------------------------------------------ 页脚 */
.footer {
  background-image: linear-gradient(180deg, rgba(230, 0, 18, 0), rgba(230, 0, 18, 0.06));
}
.footer-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-bottom: 8px;
  color: #ff8b97;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
}
.footer-brand img {
  width: 24px;
  height: 24px;
  opacity: 0.9;
}
/* LEL 立体标识是瘦高形，页脚小图标要按比例给高度，别压扁 */
.footer-brand img.footer-mark {
  width: auto;
  height: 26px;
}

/* ------------------------------------------------ 封面入口页
   全幅奖杯渲染大图当主角，内容分左右两块浮在上面（中间留给奖杯）。
   动效两层：图片自身「呼吸缩放」走 CSS keyframes，指针视差由 JS 写
   --cover-x / --cover-y 两个变量，互不覆盖 transform；开「减少动态效果」
   时进 still 态直接静止（按钮仍可手动开）。 */
.cover-screen {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  overflow: hidden;
  background: #05040a;
}
body.cover-open {
  overflow: hidden;
}
body.cover-open .cover-screen {
  display: block;
}
.cover-screen[data-state='in'] .cover-frame {
  animation: coverIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes coverIn {
  from {
    opacity: 0;
    transform: scale(1.012);
  }
}

.cover-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* 背景大图：inset -3% 留出视差位移的余量，边缘不会露底；
   2026-09-21 用户要求「奖杯和整体缩小一点」⇒ 内缩 10%（留出上下左右余量），
   并下移让奖杯居中偏下、上方露出灯光架 */
.cover-bg {
  position: absolute;
  inset: -3%;
  z-index: 0;
  transform: translate3d(var(--cover-x, 0px), var(--cover-y, 0px), 0);
  transition: transform 1s ease-out;
  will-change: transform;
}
.cover-bg img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center 62%;
  animation: coverBreath 26s ease-in-out infinite alternate;
}
@keyframes coverBreath {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.06);
  }
}
.cover-screen.still .cover-bg {
  transition: none;
}
.cover-screen.still .cover-bg img {
  animation-play-state: paused;
}

/* 压暗层：2026-09-22 用户要求「两边暗淡的黑色取消掉，保留底色纯背景的红色和清晰度」
   ⇒ 两侧压暗（90deg 渐晕）整体移除，底图本身的暗角也已在 v2 图里修掉；
   只保留上下极轻的过渡（顶部给标题行、底部给工具行一点可读性），中央完全不动。 */
.cover-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.4s ease;
  background-image: linear-gradient(
    180deg,
    rgba(4, 3, 6, 0.18) 0%,
    rgba(4, 3, 6, 0) 14%,
    rgba(4, 3, 6, 0) 78%,
    rgba(4, 3, 6, 0.26) 100%
  );
}
.cover-screen.solid .cover-scrim {
  opacity: 0.16;
}
.cover-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: url('/assets/brand/bg-grid.svg');
  background-size: 48px 48px;
  opacity: 0.08;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.cover-screen.solid .cover-frame::after {
  opacity: 0;
}
.cover-topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  height: 3px;
  background: linear-gradient(90deg, var(--we-red-deep), var(--we-red) 35%, #ff4d5c 50%, var(--we-red) 65%, var(--we-red-deep));
  box-shadow: 0 0 12px rgba(230, 0, 18, 0.55);
}

/* 顶部一行：左品牌、右赛事定位 */
.cover-head {
  position: absolute;
  top: 22px;
  left: 5%;
  right: 5%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: opacity 0.3s ease;
}
.cover-head-l {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.26em;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85);
}
.cover-head-r {
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: #e7d2d6;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85);
}

/* 左右两块内容：完全无边框、无底色、无遮罩，直接吃背景亮度（用户明确要求）；
   可读性只靠文字描边 + 投影（游戏 HUD 做法），不靠任何暗色底。
   2026-09-22 按用户参考排版重排 + 二次调整：
   - 左侧 = LEL 主标题（原「银色标识 + 标题」两段中的银标已按用户要求删除）；
   - 右侧容器 = 报名人数，移到奖杯正上方居中；
   - 四个入口独立成层（.cover-actions），立体徽章按钮，左右各两个围绕奖杯对称。 */
.cover-side {
  position: absolute;
  z-index: 3;
  padding: 0;
  border: 0;
  background: none;
  display: flex;
  flex-direction: column;
  transition: opacity 0.3s ease;
}
/* 左侧主标题区（cover-side-left / cover-title）已于 2026-09-22 按用户要求整体删除 */
.cover-side-right {
  left: 50%;
  right: auto;
  top: 6.5%;
  transform: translateX(-50%);
  width: auto;
  align-items: center;
  text-align: center;
}
.cover-screen.solid .cover-side,
.cover-screen.solid .cover-head,
.cover-screen.solid .cover-actions {
  opacity: 0;
  pointer-events: none;
}

.cover-count {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #fff;
  text-shadow:
    0 0 3px rgba(0, 0, 0, 0.98),
    0 2px 12px rgba(0, 0, 0, 0.95),
    0 0 28px rgba(230, 0, 18, 0.6);
  white-space: nowrap;
}
.cover-count b {
  font-size: 42px;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: #fff;
  text-shadow:
    0 0 3px rgba(0, 0, 0, 1),
    0 0 26px rgba(230, 0, 18, 0.95),
    0 4px 14px rgba(0, 0, 0, 0.95);
  margin: 0 8px;
}

/* 4 个入口：整层铺满、每颗绝对定位在奖杯两侧（参考用户排版图）；
   2026-09-22 用户要求「加点颜色、立体一点」：改成红漆徽章式立体按钮 ——
   红色渐变底 + 金色描边 + 顶部高光棱线 + 底部暗边 + 外投影，主入口「立即报名」用最亮的正红 */
.cover-actions {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  display: block;
}
.cover-link {
  display: block;
  position: absolute;
  pointer-events: auto;
  padding: 11px 18px;
  border: 1px solid rgba(255, 204, 158, 0.4);
  border-radius: 10px;
  background: linear-gradient(180deg, #b01824 0%, #8a0d18 52%, #56060e 100%);
  color: #fff;
  font-family: inherit;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1.2;
  cursor: pointer;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7), 0 0 12px rgba(255, 140, 140, 0.35);
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -3px 8px rgba(0, 0, 0, 0.42);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
/* 位置：左右各一列、垂直排列在奖杯两侧的空白通道里
   （左列 31.8%≈龙旗与奖杯之间，右列 62.8% 与左列镜像对称）；
   上颗 42%、下颗 52%，间距均匀，不压奖杯也不压龙旗。
   「立即报名」是主入口，单独提亮成正红；其余三颗用深一档的绯红。 */
.cover-link-register {
  left: 31.8%;
  top: 42%;
  background: linear-gradient(180deg, #ff5760 0%, #e60012 50%, #a3000e 100%);
  border-color: rgba(255, 216, 170, 0.6);
}
.cover-link-query  { left: 31.8%; top: 52%; }
.cover-link-roster { left: 62.8%; top: 42%; }
.cover-link-enter  { left: 62.8%; top: 52%; }
/* 悬停：整颗上浮提亮 + 红色辉光扩散；按下：下沉 + 投影收紧（实体按压感） */
.cover-link:hover,
.cover-link:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.14);
  box-shadow:
    0 16px 30px rgba(0, 0, 0, 0.6),
    0 0 26px rgba(230, 0, 18, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -3px 8px rgba(0, 0, 0, 0.42);
  outline: none;
}
.cover-link:active {
  transform: translateY(1px);
  filter: brightness(0.96);
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.5),
    inset 0 2px 6px rgba(0, 0, 0, 0.45);
}
/* 入口不可用态（报名关闭 / 赛事未开放）
   2026-10-09 用户要求：**保留按钮界面**，只把按钮灰化、不可点，
   不要像以前那样直接 .hidden 把按钮整颗藏掉（版式会缺一颗、露出空洞）。
   灰化后按钮仍占原位，颜色退成无彩；pointer-events:none 同时掐掉点击与悬停动效。
   跳转由 JS 侧负责：<a> 去掉 href + tabindex=-1 + aria-disabled（键盘/右键也进不去）。 */
.cover-link.is-disabled,
.btn.is-disabled {
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(1) brightness(0.68);
  opacity: 0.55;
  text-shadow: none;
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* 底部角标：左上免责、右下工具 + 后台入口（后台移出主视觉，收进边角）
   2026-09-22 用户要求两者都往中间收一档（不再贴屏幕边缘） */
.cover-note {
  position: absolute;
  left: 72px;
  bottom: 18px;
  z-index: 4;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.72);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95), 0 0 18px rgba(0, 0, 0, 0.7);
}
.cover-tools {
  position: absolute;
  right: 68px;
  bottom: 16px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cover-tools button,
.cover-admin {
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  background: rgba(10, 8, 11, 0.42);
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
  transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
}
.cover-tools button:hover,
.cover-admin:hover {
  border-color: #ff8b97;
  background: rgba(230, 0, 18, 0.62);
  color: #fff;
}
.cover-admin {
  letter-spacing: 0.08em;
}

/* --------------------------------------------------- 过场：银龙杯周围火花燃起
   点击任意入口时触发：中央亮起一束暖光，10 簇火星向外飞散并淡出，
   同时整体轻微推近 —— 营造「进入」的氛围转换。纯 CSS 动画，JS 只加 class。 */
.cover-sparks {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  opacity: 0;
}
/* 中央暖光：从奖杯位置亮起 */
.spark-core {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 46vmin;
  height: 46vmin;
  margin: -23vmin 0 0 -23vmin;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 236, 200, 0.9) 0%,
    rgba(255, 150, 60, 0.55) 26%,
    rgba(230, 0, 18, 0.3) 48%,
    rgba(230, 0, 18, 0) 72%
  );
  filter: blur(6px);
  transform: scale(0.2);
}
/* 火星：以奖杯为圆心向外飞散，每簇角度/距离/延迟各不相同 */
.spark {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff3d6;
  box-shadow: 0 0 10px 3px rgba(255, 186, 92, 0.95), 0 0 22px 6px rgba(230, 0, 18, 0.7);
}
.spark:nth-child(2)  { --tx: -34vmin; --ty: -20vmin; --d: 0s; }
.spark:nth-child(3)  { --tx:  36vmin; --ty: -18vmin; --d: 0.04s; }
.spark:nth-child(4)  { --tx: -22vmin; --ty: -34vmin; --d: 0.08s; }
.spark:nth-child(5)  { --tx:  24vmin; --ty: -32vmin; --d: 0.02s; }
.spark:nth-child(6)  { --tx: -44vmin; --ty:   6vmin; --d: 0.1s; }
.spark:nth-child(7)  { --tx:  46vmin; --ty:   8vmin; --d: 0.06s; }
.spark:nth-child(8)  { --tx: -30vmin; --ty:  30vmin; --d: 0.12s; }
.spark:nth-child(9)  { --tx:  32vmin; --ty:  32vmin; --d: 0.09s; }
.spark:nth-child(10) { --tx:  -8vmin; --ty: -40vmin; --d: 0.05s; }
.spark:nth-child(11) { --tx:  10vmin; --ty:  40vmin; --d: 0.11s; }

.cover-screen.leaving .cover-sparks {
  opacity: 1;
}
.cover-screen.leaving .spark-core {
  animation: sparkCore 0.72s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}
.cover-screen.leaving .spark {
  animation: sparkFly 0.82s cubic-bezier(0.15, 0.85, 0.3, 1) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes sparkCore {
  0% {
    transform: scale(0.2);
    opacity: 0;
  }
  28% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}
@keyframes sparkFly {
  0% {
    transform: translate3d(0, 0, 0) scale(0.6);
    opacity: 0;
  }
  22% {
    opacity: 1;
  }
  100% {
    transform: translate3d(var(--tx, 0), var(--ty, 0), 0) scale(2.2);
    opacity: 0;
  }
}
/* 过场期间整体轻微推近 + 压暗，强化「穿过画面进去」的感觉 */
.cover-screen.leaving .cover-bg img {
  animation: none;
  transform: scale(1.06);
  transition: transform 0.8s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.cover-screen.leaving .cover-side,
.cover-screen.leaving .cover-actions,
.cover-screen.leaving .cover-head,
.cover-screen.leaving .cover-tools,
.cover-screen.leaving .cover-note {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* 窄屏：左右两块改纵向堆叠，大图钉在视口上当底 */
@media (max-width: 980px) {
  .cover-screen {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .cover-frame {
    position: relative;
    inset: auto;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    padding: 76px 18px calc(96px + env(safe-area-inset-bottom));
    overflow: visible;
  }
  .cover-bg,
  .cover-scrim {
    position: fixed;
    inset: 0;
  }
  /* 竖屏改 cover 铺满：横版大图 contain 会在手机上留上下大黑边；
     cover 后窗口只显示原图中间约 26% 宽度，恰好聚焦奖杯主体与底座 LEL */
  .cover-bg img {
    object-fit: cover;
    object-position: center;
  }
  /* 人数条在竖屏会压到浅色龙身上：加半透明胶囊底保证可读 */
  .cover-count {
    background: rgba(10, 8, 11, 0.52);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    padding: 9px 20px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .cover-head {
    top: 16px;
    left: 18px;
    right: 18px;
  }
  .cover-head-r {
    display: none;
  }
  .cover-side {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    align-items: center;
    text-align: center;
  }
  .cover-side-right {
    align-items: center;
  }
  /* 四个入口在窄屏回到常规流：纵向一列，居中（立体徽章样式与桌面端一致） */
  .cover-actions {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    pointer-events: auto;
  }
  .cover-link,
  .cover-link-register,
  .cover-link-query,
  .cover-link-roster,
  .cover-link-enter {
    position: static;
    text-align: center;
    padding: 11px 26px;
  }
  .cover-mark {
    width: 62px;
    height: 62px;
  }
  .cover-note {
    left: 28px;
    right: 28px;
    /* 工具行在窄屏会折成两行，说明文字要跟着抬高，否则会和第二行按钮叠在一起 */
    bottom: 84px;
  }
  /* 窄屏工具行允许换行：2026-10-07 加入「积分榜」后一行放不下了。
     换行后右对齐、并收紧内边距，保证 6 颗都能完整显示。 */
  .cover-tools {
    right: 28px;
    left: 28px;
    bottom: 14px;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
  }
  .cover-tools button,
  .cover-admin {
    padding: 6px 10px;
    font-size: 10.5px;
  }
}

/* 系统开了「减少动态效果」：入场不做位移，呼吸与视差全部静止 */
@media (prefers-reduced-motion: reduce) {
  .cover-screen[data-state='in'] .cover-frame {
    animation: none;
  }
  .cover-bg {
    transition: none;
    transform: none;
  }
  .cover-bg img {
    animation: none;
  }
}

/* ------------------------------------------------ 后台登录页品牌头 */
.login-brand {
  text-align: center;
  margin-bottom: 18px;
}
/* LEL 立体标识是瘦高形（约 0.82:1），用高度定尺寸、宽度自适应，避免被压扁 */
.login-brand img {
  width: auto;
  height: 74px;
  filter: drop-shadow(0 8px 22px rgba(230, 0, 18, 0.46));
}
.login-brand .t {
  margin-top: 12px;
  font-size: 19px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.06em;
}
.login-brand .s {
  margin-top: 4px;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: #ff8b97;
}

/* ------------------------------------------------ 主色统一：清掉残留的金 / 紫配色 */
.btn-gold {
  background: linear-gradient(135deg, #a3000e, #e60012 52%, #ff2d3f);
  border-color: #ff6b74;
  color: #fff;
  box-shadow: 0 8px 22px rgba(230, 0, 18, 0.32);
}
.btn-violet {
  background: linear-gradient(135deg, #6e0009, #c2000f);
  border-color: #ff4d5c;
  color: #fff;
}
.input:focus,
.select:focus,
.textarea:focus {
  border-color: var(--we-red);
  box-shadow: 0 0 0 3px rgba(230, 0, 18, 0.18);
}
.check.checked,
.radio-pill.active {
  border-color: rgba(230, 0, 18, 0.55);
  background: rgba(230, 0, 18, 0.1);
}
.chip.active {
  border-color: rgba(230, 0, 18, 0.5);
  background: rgba(230, 0, 18, 0.16);
  color: #ffd7da;
}
.pill.active {
  border-color: rgba(230, 0, 18, 0.5);
  background: rgba(230, 0, 18, 0.14);
  color: #ffd7da;
}
.admin-side .menu button.active {
  background: linear-gradient(135deg, rgba(230, 0, 18, 0.24), rgba(143, 0, 11, 0.2));
  border-color: rgba(230, 0, 18, 0.42);
  color: #ffd7da;
}
table.tbl tbody tr:hover td {
  background: rgba(230, 0, 18, 0.06);
}
.spinner {
  border-color: rgba(230, 0, 18, 0.25);
  border-top-color: var(--we-red);
}
.bar > i {
  background: linear-gradient(90deg, var(--we-red-deep), var(--we-red) 70%, #ff4d5c);
}
.steps-bar span.done {
  background: linear-gradient(90deg, rgba(143, 0, 11, 0.85), var(--we-red));
}
.steps-bar span.current {
  background: linear-gradient(90deg, var(--we-red), #ff6b74);
  box-shadow: 0 0 10px rgba(230, 0, 18, 0.5);
}
.code-box {
  border-color: rgba(230, 0, 18, 0.5);
  background: rgba(230, 0, 18, 0.09);
}
.code-value {
  color: #ffd7da;
  text-shadow: 0 0 18px rgba(230, 0, 18, 0.5);
}
.alert-gold {
  border-color: rgba(230, 0, 18, 0.42);
  background: rgba(230, 0, 18, 0.08);
}
.alert-info {
  border-color: rgba(255, 107, 116, 0.36);
  background: rgba(230, 0, 18, 0.07);
  color: #ffc9ce;
}
.tag-gold {
  background: rgba(230, 0, 18, 0.16);
  color: #ffb3b8;
  border-color: rgba(230, 0, 18, 0.4);
}
.tag-violet {
  background: rgba(230, 0, 18, 0.12);
  color: #ff8b97;
  border-color: rgba(230, 0, 18, 0.32);
}
/* 「替补」标签 —— 整站主色为 WE 红，队长与段位都是红系，
   替补若也用红会分不出来；改用站内已保留的功能色琥珀（与 .st-pending 同款），
   加粗 + 描边 + 微光，扫一眼就能认出候补身份 */
.tag-sub {
  background: rgba(245, 166, 35, 0.22);
  color: #ffd08a;
  border-color: rgba(245, 166, 35, 0.62);
  padding: 2px 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  box-shadow: 0 0 10px rgba(245, 166, 35, 0.28);
}
/* 「队长」标签 —— 实心正红底 + 亮白粗体字，和替补的琥珀描边一眼分得开。
   ⚠️ 刻意不复用 .tag-gold：它还被后台分组标签（admin.js）与查询页步骤条（query.html）共用，
   改它会把那两处一起变成实心红块 */
.tag-capt {
  background: var(--we-red);
  color: #fff;
  border-color: #ff6b74;
  padding: 2px 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  box-shadow: 0 0 10px rgba(230, 0, 18, 0.45);
}
.stat .v.violet {
  color: #ff8b97;
}
.toast.info {
  border-color: rgba(230, 0, 18, 0.4);
  background: #26101a;
}
.timeline li.now::before {
  box-shadow: 0 0 0 3px rgba(230, 0, 18, 0.2);
}

/* ------------------------------------------------ 装饰强度收敛
   水印只做氛围，绝不能压过正文；答题时需要专注，面板内不放徽章水印。 */
body {
  background-position: 0 0, right -70px bottom -84px, 0 0, 0 0, 0 0;
  background-size: 48px 48px, 250px 250px, auto, auto, auto;
}
@media (max-width: 720px) {
  body {
    background-position: 0 0, right -56px bottom -62px, 0 0, 0 0, 0 0;
    background-size: 36px 36px, 168px 168px, auto, auto, auto;
  }
}
.card::after {
  opacity: 0.9;
}
.we-panel::before {
  display: none;
}
.we-panel::after {
  opacity: 0.22;
}

/* =====================================================================
   拍卖会板块（2026-09-24 新增）
   用途：拍卖师现场投屏，一位选手一整屏，远距离可读。
   设计取向：舞台感 —— 深底、红色主光、超大字重；成交后整张卡片转为成功色。
   只使用 :root 里已有的变量，方便主题统一调整。
   ===================================================================== */

/* 2026-10-08：拍卖页整页底图 —— 长安盛典主视觉（we-changan-v20-lighting.jpg）。
   取向：整页固定铺满 + 重暗化，只做氛围、绝不抢正文。
   层级（自上而下）：菱形网格 → WE 水印 → 暗化遮罩 → 长安主视觉 → 底色兜底。
   即：主视觉垫在最底层，网格与水印仍浮在其上，遮罩把亮度压下来保证文字对比度。
   注意 —— 本规则 specificity 高于全局 body（含 720px 断点里的水印微调），
   所以水印的位置/尺寸必须在这里照抄一份，窄屏另给一份，别让它们失效。 */
body.page-auction {
  background-color: var(--bg);
  background-image:
    url('/assets/brand/bg-grid.svg'),
    url('/assets/brand/we-mark-ghost.svg'),
    linear-gradient(180deg, rgba(8, 7, 10, 0.74) 0%, rgba(8, 7, 10, 0.86) 42%, rgba(8, 7, 10, 0.93) 100%),
    url('/assets/brand/we-changan-v20-lighting.jpg'),
    linear-gradient(180deg, #120a0e 0%, var(--bg) 42%);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: 0 0, right -70px bottom -84px, 0 0, center 28%, 0 0;
  background-size: 48px 48px, 250px 250px, auto, cover, auto;
  background-attachment: scroll, fixed, fixed, fixed, fixed;
}

@media (max-width: 720px) {
  body.page-auction {
    background-position: 0 0, right -56px bottom -62px, 0 0, center 24%, 0 0;
    background-size: 36px 36px, 168px 168px, auto, cover, auto;
  }
}

/* 2026-09-27：现场反馈「右边一大片空着、下面战队一屏看不到几支」——
   去掉定宽上限，把整页宽度都用上（左右留白随视口伸缩），
   卡片各尺寸同步收小一档（约 0.85），一屏能同时装下主卡与更多战队。 */
.auc-stage {
  max-width: none;
  margin: 0 auto;
  padding: 14px clamp(14px, 2vw, 44px) 40px;
}

.auc-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.auc-title {
  font-size: 23px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--text);
  margin: 0;
}

.auc-sub {
  color: var(--muted);
  font-size: 13px;
  margin-top: 6px;
}

.auc-progress {
  text-align: right;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.auc-progress b {
  color: var(--gold-light);
  font-size: 18px;
}

/* ------------------------------------------------ 选手主卡 */
.auc-card {
  position: relative;
  background: linear-gradient(165deg, var(--panel-2) 0%, var(--panel) 62%, var(--bg-soft) 100%);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 18px 13px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* 顶部一道红色主光，投屏时给卡片一个明确的「舞台焦点」 */
.auc-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--we-red), var(--gold-light), var(--we-red), transparent);
  opacity: 0.85;
}

.auc-card.is-sold {
  border-color: var(--success);
  box-shadow: 0 0 0 1px rgba(46, 204, 143, 0.25), var(--shadow);
}

.auc-card.is-sold::before {
  background: linear-gradient(90deg, transparent, var(--success), var(--success), transparent);
}

.auc-top {
  display: flex;
  gap: 15px;
  align-items: center;
  flex-wrap: wrap;
}

.auc-avatar-wrap {
  position: relative;
  width: 102px;
  height: 102px;
  flex: 0 0 auto;
}

.auc-avatar {
  width: 102px;
  height: 102px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--panel-3);
  border: 2px solid var(--gold);
  box-shadow: var(--shadow-soft);
  display: block;
}

.auc-avatar-fallback {
  width: 102px;
  height: 102px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 39px;
  font-weight: 800;
  color: var(--text);
  background: linear-gradient(160deg, var(--we-red-deep), var(--panel-3));
  border: 2px solid var(--gold);
}

.auc-identity {
  flex: 1 1 260px;
  min-width: 0;
}

.auc-name {
  font-size: 29px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--text);
  letter-spacing: 1px;
  word-break: break-word;
  margin: 0;
}

.auc-gameid {
  font-family: ui-monospace, 'Consolas', monospace;
  color: var(--muted);
  font-size: 12.5px;
  margin-top: 4px;
  letter-spacing: 0.5px;
  word-break: break-all;
}

.auc-regno {
  color: var(--muted-2);
  font-size: 11.5px;
  margin-top: 3px;
  font-family: ui-monospace, 'Consolas', monospace;
}

.auc-tags {
  display: flex;
  flex-wrap: wrap;
  /* 分组徽章比其它小签高一档，必须 center 才不会把小签拉高变形 */
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.auc-tag {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--panel-3);
  color: var(--text-soft);
}

.auc-tag-role {
  color: var(--gold-light);
  border-color: rgba(230, 0, 18, 0.45);
  background: var(--we-red-soft);
}

.auc-tag-rank {
  color: var(--cyan);
  border-color: rgba(255, 179, 184, 0.3);
}

/* 涅槃组填了「最终评级」时用这一档（S/A/B 之类），一眼能和真段位区分开 */
.auc-tag-rank.is-grade {
  color: var(--gold-light);
  border-color: rgba(200, 170, 110, 0.55);
  background: rgba(200, 170, 110, 0.1);
}

/* 队长 / 替补：与公开名单页同一套视觉语言（队长=实心红、替补=琥珀描边），
   改的时候两页一起改，否则同一个人在两个页面长得不一样 */
.auc-tag-captain {
  background: var(--we-red);
  color: #fff;
  border-color: #ff6b74;
  font-weight: 700;
  letter-spacing: 0.3px;
  box-shadow: 0 0 10px rgba(230, 0, 18, 0.45);
}

.auc-tag-sub {
  background: rgba(245, 166, 35, 0.22);
  color: #ffd08a;
  border-color: rgba(245, 166, 35, 0.62);
  font-weight: 700;
  letter-spacing: 0.3px;
  box-shadow: 0 0 10px rgba(245, 166, 35, 0.28);
}

/* 已成交绶带 */
.auc-sold-badge {
  position: absolute;
  top: 12px;
  right: -32px;
  transform: rotate(38deg);
  background: var(--success);
  color: #05231a;
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: 2px;
  padding: 5px 36px;
  box-shadow: var(--shadow-soft);
}

/* ------------------------------------------------ 介绍与宣言 */
.auc-quote {
  margin-top: 11px;
  padding: 9px 12px;
  border-left: 3px solid var(--gold);
  background: var(--bg-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--text);
  font-size: 14px;
  font-style: italic;
  line-height: 1.55;
}

.auc-intro {
  margin-top: 7px;
  color: var(--text-soft);
  font-size: 12.5px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ------------------------------------------------ 英雄池（报名表「英雄熟练度」） */
/* 现场介绍选手时最直观的一块：把 O 列那一串名字拆成胶囊，扫一眼就知道擅长什么 */
.auc-heroes {
  margin-top: 11px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-soft);
}

.auc-heroes-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
}

/* 小圆点用品牌红，和「起拍价」区块呼应，避免整块太素 */
.auc-heroes-head::before {
  content: '';
  width: 3px;
  height: 13px;
  border-radius: 2px;
  background: var(--gold);
}

.auc-heroes-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-soft);
}

.auc-heroes-count {
  font-size: 11px;
  color: var(--muted);
}

.auc-hero-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.auc-hero {
  display: inline-block;
  padding: 4px 11px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  border: 1px solid var(--border);
  background: var(--panel-3);
}

/* ------------------------------------------------ 起拍价与成交 */
.auc-fee {
  margin-top: 11px;
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  background: var(--we-red-soft);
  padding: 8px 12px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.auc-fee-label {
  color: var(--muted);
  font-size: 12px;
}

.auc-fee-value {
  color: var(--text);
  font-size: 19px;
  font-weight: 800;
}

.auc-fee-unit {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin-left: 6px;
}

/* ------------------------------------------------ 实时竞价（2026-10-10）
   大屏、队长手机、观众看的是同一块面板：
   · 状态 / 当前最高价 —— 所有人可见，每 1.5s 更新（只改文本，不重建 DOM）
   · 队长区（口令输入框 / 出价框）—— 只在状态变化时重建，避免打断输入
   · 场控区（开始拍卖 / 口令列表 / 开始-结束竞价）—— 仅超管可见
   颜色一律取自主题变量，不新增自定义变量（自校验会断言变量都已定义）。 */
.auc-live {
  /* 2026-10-11 移到标题栏正下方后，块间距改由 margin-bottom 提供（与下方面板统一 14px）。
     原来靠 margin-top，提上来会与 .auc-head 的 margin-bottom 叠加成 28px。 */
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 14px 16px;
}

/* 竞价进行中：红边 + 光晕，现场扫一眼就知道「现在正在拍」 */
.auc-live.is-open {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--we-red-soft), var(--shadow-soft);
}

.auc-live-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.auc-live-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
}

.auc-chip {
  font-size: 12px;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
  background: var(--panel-3);
}

.auc-chip.is-live {
  color: var(--text);
  border-color: var(--gold);
  background: var(--we-red-soft);
}

.auc-live-main {
  margin-top: 11px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.auc-live-price {
  flex: 1 1 240px;
  min-width: 200px;
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  background: var(--we-red-soft);
  padding: 10px 14px;
}

.auc-live-price .k {
  color: var(--muted);
  font-size: 12px;
}

.auc-live-price .v {
  color: var(--text);
  font-size: clamp(22px, 5vw, 30px);
  font-weight: 900;
  line-height: 1.15;
  margin-top: 2px;
}

.auc-live-price .lead {
  color: var(--gold-light);
  font-size: 13.5px;
  font-weight: 700;
  margin-top: 3px;
}

.auc-live-extra {
  flex: 1 1 200px;
  color: var(--text-soft);
  font-size: 13.5px;
  line-height: 1.9;
}

/* 两个倒计时（2026-10-16）：本轮计时（只显示）+ 落锤倒计时（归零且无人出价 ⇒ 自动结束本轮） */
.auc-timers {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.auc-timer {
  flex: 1 1 130px;
  min-width: 118px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;   /* 落锤那格下面还要放「有人出价即停止」和「开始落锤」按钮 */
  gap: 4px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--bg-soft);
  padding: 7px 12px;
}

.auc-timer .k {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.auc-timer .v {
  margin-left: auto;
  color: var(--text);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.auc-timer .u {
  color: var(--muted);
  font-size: 12px;
}

/* 本轮计时到点：变灰，不再抢注意力（到点不自动做任何事） */
.auc-timer.is-over .v {
  color: var(--muted);
}

/* 落锤倒计时：金色描边（主持人在倒数时一眼可见） */
.auc-timer.is-hammer.is-on {
  border-color: var(--gold);
  background: var(--we-red-soft);
}

.auc-timer.is-hammer.is-on .k,
.auc-timer.is-hammer.is-on .v {
  color: var(--gold-light);
}

/* 最后 3 秒：变红 + 呼吸闪烁（现场要的就是这种压迫感） */
.auc-timer.is-hammer.is-urgent {
  animation: auc-hammer-pulse 0.8s ease-in-out infinite;
}

.auc-timer.is-hammer.is-urgent .v {
  color: var(--danger);
}

@keyframes auc-hammer-pulse {
  0%, 100% { box-shadow: 0 0 0 1px var(--danger); }
  50% { box-shadow: 0 0 14px rgba(230, 0, 18, 0.55); }
}

.auc-timer .hint {
  width: 100%;
  color: var(--muted);
  font-size: 11px;
}

/* 「点我开始落锤」—— 只有主持人看得到 */
.auc-hammer-btn {
  flex-basis: 100%;
  margin-top: 2px;
}

/* 场控区：两个倒计时的时长设置 */
.auc-timerset {
  margin-top: 12px;
  border-top: 1px dashed var(--border);
  padding-top: 11px;
}

.auc-timersec-label {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.auc-timersec {
  width: 74px;
  flex: 0 0 auto;
}

.auc-bid {
  margin-top: 12px;
  border-top: 1px dashed var(--border);
  padding-top: 11px;
}

.auc-bid-hint {
  color: var(--muted);
  font-size: 13px;
}

/* 位置唯一 / 选手唯一：本队本轮不可出价时的原因条（2026-10-10） */
.auc-bid-blocked {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--danger);
  background: var(--we-red-soft);
  border: 1px solid var(--border-soft);
}

/* 队长已占位置一览：现场据此理解「为什么这个位置不能再出价」 */
.auc-bid-occ {
  color: var(--muted);
  font-size: 12px;
}

/* 队长资金条（2026-10-15 规则②）：总额 / 已花费 / 本轮可用。
   只在主持人打开「预留底价」总开关时显示（前端按 funds.enabled 切 display）。 */.auc-live-funds {
  margin-top: 12px;
}

.auc-funds-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.auc-funds-cell {
  flex: 1 1 100px;
  min-width: 88px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--bg-soft);
  padding: 7px 11px;
}

.auc-funds-cell .k {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.auc-funds-cell .v {
  color: var(--text);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  margin-top: 2px;
}

/* 「本轮可用」是队长真正能花的数，视觉上要比另外两格突出 */
.auc-funds-cell.is-avail {
  border-color: var(--gold);
  background: var(--we-red-soft);
}

.auc-funds-cell.is-avail .v {
  color: var(--gold-light);
}

.auc-funds-note {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

/* 填了超过本轮可用资金的即时提示（不提交，页面不刷新） */
.auc-bid-over {
  margin-top: 7px;
  color: var(--danger);
  font-size: 13px;
}

.auc-bid-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.auc-bid-row .input {
  flex: 1 1 170px;
  min-width: 130px;
}

.auc-code-input {
  letter-spacing: 6px;
  font-size: 19px;
  font-weight: 800;
  text-align: center;
  max-width: 240px;
}

.auc-bid-input {
  font-size: 19px;
  font-weight: 800;
  max-width: 240px;
}

.auc-bid-me {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.auc-bid-team {
  color: var(--text);
  font-weight: 800;
  font-size: 14.5px;
}

/* 场控区（仅超管可见） */
.auc-ctl {
  margin-top: 12px;
  border-top: 1px dashed var(--border);
  padding-top: 11px;
}

.auc-ctl-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--gold-light);
  letter-spacing: 0.5px;
}

.auc-ctl-actions {
  display: flex;
  gap: 8px;
  margin-top: 9px;
  flex-wrap: wrap;
  align-items: center;
}

.auc-ctl-note {
  color: var(--muted);
  font-size: 12px;
}

/* 「预留底价」面板（2026-10-15 规则③）：总开关 + 各位次均价维护 */
.auc-fundcap {
  margin-top: 12px;
  border-top: 1px dashed var(--border);
  padding-top: 11px;
}

.auc-fundcap-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--text-soft);
  cursor: pointer;
}

.auc-fundcap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 9px;
  margin-top: 9px;
}

.auc-fundcap-cell {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--bg-soft);
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.auc-fundcap-cell .k {
  width: 100%;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.auc-fundcap-input {
  width: 88px;
  flex: 0 0 auto;
}

.auc-fundcap-src {
  width: 100%;
  color: var(--muted);
  font-size: 11.5px;
}

.auc-seats {
  margin-top: 10px;
}

.auc-seats-head {
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 7px;
}

/* 收起/展开那颗按钮（2026-10-16 用户要求「口令增加隐藏窗口，可以收起来」）：
   标题行改成「标题在左、按钮在右」，按钮不许把标题挤掉（标题可省略号截断）。 */
.auc-seats-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.auc-seats-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn.auc-seats-fold {
  flex: 0 0 auto;
  border-color: var(--gold);
  color: var(--gold-light);
}

.auc-seats.is-collapsed .auc-seats-head {
  margin-bottom: 0;
}

.auc-seats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 7px;
}

.auc-seat {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel-3);
  padding: 6px 9px;
}

/* 已经用口令认领过的席位：绿边，主持人一眼看出谁还没进来 */
.auc-seat.is-claimed {
  border-color: var(--success);
}

.auc-seat-team {
  flex: 1 1 auto;
  color: var(--text-soft);
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auc-seat-code {
  color: var(--text);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 2px;
}

.auc-result {
  margin-top: 9px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.auc-result-cell {
  background: var(--panel-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
}

.auc-result-cell .k {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 1px;
}

.auc-result-cell .v {
  color: var(--text);
  font-size: 16.5px;
  font-weight: 700;
  margin-top: 3px;
  word-break: break-word;
}

.auc-result-cell.is-empty .v {
  color: var(--muted-2);
  font-weight: 400;
  font-style: italic;
  font-size: 14.5px;
}

.auc-card.is-sold .auc-result-cell .v {
  color: var(--success);
}

/* ------------------------------------------------ 翻页与控制 */
.auc-nav {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.auc-nav-btn {
  min-width: 100px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.15s ease;
}

.auc-nav-btn:hover:not(:disabled) {
  background: var(--panel-3);
  border-color: var(--gold);
}

.auc-nav-btn:active:not(:disabled) {
  transform: translateY(2px);
}

.auc-nav-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.auc-nav-btn.auc-primary {
  background: var(--we-red);
  border-color: var(--we-red);
  color: #fff;
}

/* 选手卡跟随「正在拍的选手」（2026-10-16）：
   跟随中=一句说明；手动翻过后=「已暂停跟随」+ 一键回到正在拍。
   宽度比普通翻页按钮窄，别把三个主按钮挤到第二行。 */
.auc-nav-btn.auc-follow-back {
  min-width: 0;
  padding: 6px 13px;
  font-size: 12.5px;
  border-color: var(--gold);
  color: var(--gold-light);
}

.auc-follow-note {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.3px;
}

.auc-hint {
  text-align: center;
  color: var(--muted-2);
  font-size: 12px;
  margin-top: 12px;
}

/* ------------------------------------------------ 宽屏布局
   （2026-09-26）现场投屏反馈：卡片占屏太大、战队一览在页面最底部，
   每拍完一个人都要拉到底下核对战队名单 ⇒ 当时改成「左栏拍卖 / 右栏战队」双栏。
   （2026-09-27）断点由 1080 下调到 1000、左栏收窄到 560px。
   （2026-10-15）用户拍板改回单栏：主界面还是要拍卖（竞价 + 选手卡 + 名单），
   战队一览整块放到主视图之下、全宽，往下滚动查看 —— 竞价面板的吸顶行程
   依然来自同一列里的选手卡与名单（.auc-left 整列结构不变，见下方注释）。 */
@media (min-width: 1000px) {
  .auc-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'head'
      'draw'
      'left'
      'admin'
      'teams'
      'footer';
    align-items: start;
  }
  .auc-head {
    grid-area: head;
  }
  /* 抽签面板横跨整宽、压在标题栏正下方（2026-10-13 用户要求「抽签还是放在最上面」）：
     先拍哪一组、抽到哪个位置，开拍前要投屏公示。 */
  #aucDrawWrap {
    grid-area: draw;
  }
  /* 主视图（实时竞价 + 当前选手卡 + 名单）必须包在同一个 grid 项里：
     给单个 grid 项做 sticky 是无效的（包含块只有它自己那一格高，行程为 0），
     包成整列之后，里面那块吸顶的实时竞价才有可滚的行程。
     2026-10-15 用户要求「实时竞价和拍卖信息一左一右，空间充分使用起来」：
     左＝实时竞价（560px，够放「最高价 + 领先战队 + 出队数」与队长的口令/出价行），
     右＝当前选手卡（拍卖信息），余下宽度全给它。
     ⚠️ 这里用 **flex + wrap**，不要改成 grid：sticky 的包含块必须撑满整列才有行程，
     一旦换成 grid，实时竞价只占第一格，行程为 0，吸顶立刻失效。
     名单用 `flex-basis: 100%` 强制换到第二行整宽 —— 于是 .auc-left 整列依然足够高，
     滚名单时实时竞价照样吸住。 */
  .auc-left {
    grid-area: left;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: 24px;
  }
  /* 实时竞价：吸顶浮窗（2026-10-13 现场反馈「做成浮窗，跟着鼠标滑轮一起滑动」；
     2026-10-15 起固定在左侧，与右侧选手卡并排）。
     名单往下滚的时候它一直挂在视野里 —— 当前最高价 / 领先战队 / 队长的出价框永远在首屏。
     🔴 z-index 不能省：sticky 不设 z-index 时，后面的兄弟（选手卡、名单）会盖在它上面，
     一滚过去就被糊掉。 */
  #aucLiveWrap {
    flex: 0 0 560px;
    position: sticky;
    top: 12px;
    z-index: 5;
  }
  /* 当前选手卡（拍卖信息）：吃掉剩余宽度 */
  #aucBody {
    flex: 1 1 0;
    min-width: 0;
  }
  /* 名单：整块换行到第二行、占满整宽（auto-fill 列数自动变多） */
  #aucGridWrap {
    flex: 1 1 100%;
    min-width: 0;
  }
  #aucAdminWrap {
    grid-area: admin;
  }
  #footer {
    grid-area: footer;
  }
  /* 战队一览：全宽、正常文档流，跟在主视图（与场控面板）之下。
     2026-10-15 起不再做「右栏吸顶 + 自带滚动条」—— 那是 9-26 双栏方案的产物，
     现在它回到页面下方，用整页滚动看（用户：下拉下去查看）。 */
  .auc-teams {
    grid-area: teams;
  }
}

/* 1000px 以下的单栏区不再给主卡限宽：
   限宽的本意是「别把卡片拉得过宽」，可现场看到的是右边白着一大片、
   下面战队一屏只有几支 —— 铺满更实用（卡片本身已整体收小一档）。 */

/* ------------------------------------------------ 全部选手网格 */
.auc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.auc-grid-item {
  position: relative;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 8px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.12s ease, transform 0.12s ease;
}

.auc-grid-item:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
}

.auc-grid-item.is-current {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold);
}

.auc-grid-item.is-sold {
  border-color: rgba(46, 204, 143, 0.5);
}

.auc-grid-item .n {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auc-grid-item .m {
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auc-grid-item .s {
  font-size: 10px;
  color: var(--success);
  margin-top: 3px;
}

.auc-grid-item .idx {
  position: absolute;
  top: 4px;
  left: 6px;
  font-size: 10px;
  color: var(--muted-2);
}

/* ------------------------------------------------ 管理员录入区 */
.auc-admin {
  margin-top: 18px;
  border: 1px dashed var(--gold);
  border-radius: var(--radius);
  padding: 16px;
  background: var(--panel);
}

.auc-admin-title {
  color: var(--gold-light);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.auc-admin-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.auc-admin-row .field {
  margin: 0;
}

.auc-admin-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.auc-admin-note {
  color: var(--muted-2);
  font-size: 12px;
  margin-top: 10px;
  line-height: 1.6;
}

/* ------------------------------------------------ 空态 */
.auc-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
  font-size: 15px;
  line-height: 2;
}

.auc-empty b {
  color: var(--text);
}

/* 后台拍卖名单里的小头像：和展示页的 168px 大图共用同一张图，只是缩小 */
.auc-admin-avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  background: var(--panel-3);
  border: 1px solid var(--border);
  display: block;
}

/* ------------------------------------------------ 手机端 */
@media (max-width: 720px) {
  .auc-stage {
    padding: 12px 12px 96px;
  }
  .auc-title {
    font-size: 20px;
  }
  .auc-card {
    padding: 16px 14px;
    border-radius: 16px;
  }
  .auc-avatar-wrap,
  .auc-avatar,
  .auc-avatar-fallback {
    width: 100px;
    height: 100px;
  }
  .auc-avatar-fallback {
    font-size: 38px;
  }
  .auc-name {
    font-size: 26px;
  }
  .auc-quote {
    font-size: 15px;
  }
  .auc-fee-value {
    font-size: 20px;
  }
  .auc-result {
    grid-template-columns: 1fr;
  }
  .auc-nav-btn {
    min-width: 0;
    flex: 1;
    padding: 11px 14px;
    font-size: 13.5px;
  }
  .auc-sold-badge {
    font-size: 11px;
    padding: 5px 34px;
  }
}

/* =============================================================== 拍卖会战队
   （2026-09-25）战队徽标 + 战队一览 + 卡片上的归属展示。

   设计口径：
   - 队标一律用「方形圆角 + 细金边」的徽章形，和选手的圆形头像区分开 ——
     现场投影时一眼能分清「这是人」还是「这是队」。
   - 没上传图标时不画破图，用队名首字占位（与头像占位同一套处理方式）。
   - 战队一览区是给投屏看的，字号比正文大一档，队员行用等宽对齐便于竖着核对。 */

/* ------------------------------------------------ 队标 */
.auc-team-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 8px;
  overflow: hidden;
  background: var(--panel-3);
  border: 1px solid var(--gold);
  vertical-align: middle;
}

.auc-team-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.auc-team-icon.is-lg {
  width: 46px;
  height: 46px;
  border-radius: 10px;
}

.auc-team-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 14px;
  font-weight: 800;
  color: var(--gold-light);
  background: linear-gradient(150deg, var(--we-red-deep), var(--panel-3));
}

.auc-team-icon.is-lg .auc-team-initial {
  font-size: 20px;
}

/* ------------------------------------------------ 卡片上的「队长」标记 */
.auc-card.is-captain {
  border-color: var(--warn);
  box-shadow: 0 0 0 1px rgba(245, 166, 35, 0.22), var(--shadow);
}

.auc-card.is-captain::before {
  background: linear-gradient(90deg, transparent, var(--warn), var(--gold-light), var(--warn), transparent);
}

.auc-captain-badge {
  position: absolute;
  top: 12px;
  right: -32px;
  transform: rotate(38deg);
  background: var(--warn);
  color: #2a1a02;
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: 2px;
  padding: 5px 36px;
  box-shadow: var(--shadow-soft);
}

.auc-captain-note {
  margin-top: 22px;
  border: 1px solid var(--warn);
  border-radius: var(--radius);
  background: rgba(245, 166, 35, 0.09);
  padding: 14px 18px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.auc-captain-note .k {
  color: var(--muted);
  font-size: 13px;
}

.auc-captain-note .v {
  color: var(--warn);
  font-size: 20px;
  font-weight: 700;
}

/* 成交队伍格：图标 + 队名并排，字号比普通格小一点，给图标留位置 */
.auc-result-team {
  display: flex;
  align-items: center;
  gap: 8px;
}

.auc-result-team-name {
  word-break: break-word;
}

/* ------------------------------------------------ 战队一览 */
.auc-teams {
  margin-top: 18px;
}

.auc-teams-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.auc-teams-title {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
}

.auc-teams-sub {
  color: var(--muted);
  font-size: 12.5px;
}

.auc-teams-grid {
  display: grid;
  /* 180px 一列：右侧栏宽一点就能一行放 4~6 支战队，现场不用来回滚 */
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}

.auc-team-card {
  background: linear-gradient(160deg, var(--panel-2) 0%, var(--panel) 70%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px 8px;
}

.auc-team-top {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--border-soft);
}

.auc-team-meta {
  min-width: 0;
  flex: 1 1 auto;
}

.auc-team-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  word-break: break-word;
  line-height: 1.2;
}

.auc-team-captain {
  font-size: 12px;
  color: var(--warn);
  margin-top: 3px;
}

.auc-team-count {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
}

.auc-team-members {
  margin-top: 7px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* 2026-10-07：原来一行硬塞「名字 / 段位 / 价格」三列（1fr auto 64px）。
   卡片实际只有 ~188px 宽，名字列被挤到 20px —— 实测 79 行里 68 行只剩一个
   字加省略号（「超绝千禧年代香槟超新星大侦探」只显示出 1 个字），现场根本认不出人。
   改成两行两列：第一行「名字 + 价格（右）」，第二行单独放段位。
   名字因此拿到整张卡的宽度，且**超长不再省略号**（宁可换行，也不许显示不全）。 */
.auc-team-member {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'nm pr'
    'pos pr';
  column-gap: 8px;
  align-items: start;
  padding: 4px 0;
  font-size: 12px;
  border-bottom: 1px dashed var(--border-soft);
}

.auc-team-member:last-child {
  border-bottom: none;
}

.auc-team-member .nm {
  grid-area: nm;
  min-width: 0;
  color: var(--text-soft);
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.auc-team-member .pos {
  grid-area: pos;
  color: var(--muted-2);
  font-size: 11px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.auc-team-member .pr {
  grid-area: pr;
  align-self: start;
  color: var(--gold-light);
  font-family: ui-monospace, 'Consolas', monospace;
  font-size: 11.5px;
  line-height: 1.35;
  text-align: right;
  white-space: nowrap;
}

.auc-team-member.is-captain .nm {
  color: var(--warn);
}

.auc-team-member.is-captain .pr {
  color: var(--warn);
}

.auc-team-empty {
  padding: 14px 0 6px;
  color: var(--muted-2);
  font-size: 12.5px;
  text-align: center;
}

/* 网格里的队长格：用橙色描边和「已成交」的绿色区分开 */
.auc-grid-item.is-captain {
  border-color: rgba(245, 166, 35, 0.5);
}

.auc-grid-item .s.is-captain {
  color: var(--warn);
}

/* ------------------------------------------------ 分组（登峰 / 涅槃）配色 */
/* 2026-09-27 新增。分组是拍卖现场最容易搞错的一件事（跨组成交会被服务端拒），
   所以从抽签面板、选手标签、名单网格到战队分块，全都带同一个色。
   两个色值定义在 :root（--grp-dengfeng / --grp-niepan），后台也复用：
   - 登峰 = 金（登峰造极，往上走）
   - 涅槃 = 蓝紫（冷色，与暖色金形成最大对比） */

/* ---- 抽签面板 ---- */
.auc-draw {
  margin-bottom: 14px;
  padding: 13px 15px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(160deg, var(--panel-2) 0%, var(--panel) 72%);
  box-shadow: var(--shadow-soft);
}

.auc-draw-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.auc-draw-title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--text);
}

.auc-draw-sub {
  font-size: 12.5px;
  color: var(--muted);
}

.auc-draw-grid {
  display: grid;
  /* 280px 起：宽屏左右各一张抽签卡，窄屏自动叠成一列 */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
}

.auc-draw-card {
  position: relative;
  padding: 11px 13px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: rgba(16, 14, 19, 0.55);
}

/* 左侧竖条 = 分组主色，抽签卡与名单里的小格子用同一个色，现场不用记名字 */
.auc-draw-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 12px 0 0 12px;
  background: var(--border);
}

.auc-draw-card.is-dengfeng::before {
  background: var(--grp-dengfeng);
}

.auc-draw-card.is-niepan::before {
  background: var(--grp-niepan);
}

/* 「先拍」的那一组描一圈主色光，避免现场问「先拍哪个」 */
.auc-draw-card.is-first {
  box-shadow: 0 0 0 1px rgba(230, 0, 18, 0.32);
}

.auc-draw-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.auc-draw-group {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--text);
}

.auc-draw-card.is-dengfeng .auc-draw-group {
  color: var(--grp-dengfeng);
}

.auc-draw-card.is-niepan .auc-draw-group {
  color: var(--grp-niepan);
}

.auc-draw-first {
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #fff;
  background: linear-gradient(180deg, var(--we-red), var(--we-red-deep));
}

.auc-draw-count {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted);
}

.auc-draw-seq {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}

.auc-draw-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(31, 26, 35, 0.85);
}

.auc-draw-chip .k {
  font-size: 11px;
  color: var(--muted-2);
}

.auc-draw-chip .v {
  font-size: 13px;
  font-weight: 800;
  color: var(--gold-light);
}

.auc-draw-card.is-dengfeng .auc-draw-chip .v {
  color: var(--grp-dengfeng);
}

.auc-draw-card.is-niepan .auc-draw-chip .v {
  color: var(--grp-niepan);
}

.auc-draw-none {
  font-size: 12.5px;
  color: var(--muted-2);
}

/* 抽签区的「拍卖进度」（2026-10-16 用户要求「拍卖跟着抽签流程走」）：
   正在拍这一抽 = 金色高亮 + 光晕（现场一眼看到拍到第几抽）
   已拍完的那几抽 = 变暗 + 打勾
   还没轮到 = 保持原样 */
.auc-draw-chip.is-current {
  border-color: var(--gold);
  background: var(--we-red-soft);
  box-shadow: 0 0 0 1px var(--gold), 0 0 12px rgba(230, 0, 18, 0.35);
}

.auc-draw-chip.is-current .k {
  color: var(--gold-light);
}

.auc-draw-chip.is-done {
  opacity: 0.5;
  border-style: dashed;
}

.auc-draw-chip.is-done .k,
.auc-draw-chip.is-done .v {
  color: var(--muted);
}

/* 已拍完的打勾 + 正在拍的小标 */
.auc-draw-chip-tick {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.auc-draw-chip-live {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: var(--gold-light);
  white-space: nowrap;
}

/* 未抽到的位置：占满整行，跟在已抽序号后面 */
.auc-draw-left {
  flex-basis: 100%;
  font-size: 11.5px;
  color: var(--muted-2);
}

.auc-draw-acts {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* ---- 选手卡上的分组标签 ---- */
/* 2026-10-08：分组徽章升级为「卡片第一视觉」——
   现场投屏要能一眼看出「此人是登峰还是涅槃」，所以它必须：
   ① 排在标签行第一位（JS 插在 position:first，见 auction.html playerTags）；
   ② 比旁边的小签大一圈（16px vs 11.5px）且加字距；
   ③ 用实心亮色压深色字 —— 远距离比浅底浅字清楚得多；
   ④ 带外发光，在深底上「跳」出来。
   两个色值是 :root 里专为分组预留的 --grp-dengfeng（金）/ --grp-niepan（蓝紫），
   与抽签卡色条、网格左描边、战队分块同源，改色只改那两个变量。 */
.auc-tag-group {
  padding: 3px 14px;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 2px;
  border-radius: 999px;
}

.auc-tag-group.is-dengfeng {
  color: #241a04;
  border-color: #ffe9b0;
  background: linear-gradient(180deg, #ffd873, #eab432);
  box-shadow: 0 0 14px rgba(242, 193, 78, 0.5);
}

.auc-tag-group.is-niepan {
  color: #0b1130;
  border-color: #d2dcff;
  background: linear-gradient(180deg, #b7c5ff, #8098ff);
  box-shadow: 0 0 14px rgba(142, 162, 255, 0.5);
}

/* ---- 进度条上的「当前批次」 ---- */
.auc-progress-batch {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-soft);
}

/* ---- 全部选手网格：批次标题 + 分组左描边 ---- */
.auc-grid-batch {
  grid-column: 1 / -1;
  margin-top: 8px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--muted);
}

.auc-grid-batch:first-child {
  margin-top: 0;
}

/* 用 border-left 而不是 box-shadow：.is-current 已经占了 box-shadow，两者不能互相吃掉 */
.auc-grid-item.grp-dengfeng {
  border-left: 3px solid var(--grp-dengfeng);
}

.auc-grid-item.grp-niepan {
  border-left: 3px solid var(--grp-niepan);
}

/* 2026-10-08 晚：网格小卡的「登峰 / 涅槃」文字徽章已按用户要求撤掉
   （小卡密集，右上角多一枚徽章显得杂乱）。分组仍靠左侧 3px 色条区分，
   见上面 .auc-grid-item.grp-dengfeng / .grp-niepan。
   ⚠️ 选手大卡的实心分组徽章保留，未受影响。 */

/* ---- 战队一览：分组选项卡（登峰 / 涅槃 各一屏）—— 2026-10-11 ----
   原先两组竖着堆在同一页，现场投屏要往下滚才看得到第二组，容易讲串；
   改成选项卡后一次只显示一组，点一下即切。选项卡本身按「先拍的组」排前。 */
.auc-teams-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.auc-teams-tab {
  appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-soft);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
}

.auc-teams-tab:hover {
  border-color: var(--muted-2);
  color: var(--text);
}

.auc-teams-tab .ct {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
}

/* 选中态：登峰金 / 涅槃蓝紫实心填充，与选手大卡上的分组徽章同色，一眼对得上 */
.auc-teams-tab.is-active {
  border-color: var(--muted-2);
  background: var(--panel-3);
  color: var(--text);
}

.auc-teams-tab.is-active .ct {
  color: var(--text-soft);
}

.auc-teams-tab.is-dengfeng.is-active {
  border-color: var(--grp-dengfeng);
  background: var(--grp-dengfeng);
  color: var(--we-ink);
}

.auc-teams-tab.is-niepan.is-active {
  border-color: var(--grp-niepan);
  background: var(--grp-niepan);
  color: var(--we-ink);
}

.auc-teams-tab.is-dengfeng.is-active .ct,
.auc-teams-tab.is-niepan.is-active .ct {
  color: var(--we-ink);
  opacity: 0.78;
}

.auc-teams-block {
  margin-bottom: 14px;
}

/* ------------------------------------------------ 后台「战队管理」表格 */
.team-icon-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.team-icon-actions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

/* 战队表里的按钮标签一律不折行：列被压窄时「清空」会被拆成「清 / 空」、
   「换图标」拆成「换图 / 标」，2026-10-14 加「清空」按钮后实测踩到。 */
.team-icon-actions .btn,
.team-actions .btn {
  white-space: nowrap;
}

/* 后台的分组标识（统计条里的分组单元 / 名单表与战队表里的分组徽标） */
.grp-dengfeng {
  color: var(--grp-dengfeng);
}

.grp-niepan {
  color: var(--grp-niepan);
}

/* 统计条里的分组单元：小标题与数字都跟着分组色走（金色 / 蓝紫），一眼分清两组 */
.grp-dengfeng .small.muted,
.grp-niepan .small.muted {
  font-weight: 600;
}

@media (max-width: 720px) {
  .auc-teams-grid {
    grid-template-columns: 1fr;
  }
  /* 2026-10-07：原来这里把队员行改成两列、并把「段位」整行下折 —— 那时基准样式是
     `1fr auto 64px` 三列。现在基准样式本身就是两行两列（名字独占一行、段位在第二行），
     这些覆盖已多余；而 `grid-column: 1 / -1` 会让段位跨到价格格上**互相压字**，故删掉。 */
  .auc-captain-badge {
    font-size: 11px;
    padding: 5px 34px;
  }
}

/* =====================================================================
   冠军殿堂（历届冠军展示）—— 2026-09-25
   布局：一届一整屏（左视觉 / 右档案）+ 底部素材缩略条 + 届次切换条。
   为什么不做「三届并排」：素材里有大图和动图，并排会把图压到看不清，
   动图也会同时播放；一次只挂一届，舞台才撑得开、翻页才有仪式感。
   ===================================================================== */
.chl-stage {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 30px 18px 44px;
}

/* ------------------------------------------------------------- 页头 */
.chl-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.chl-h {
  margin: 0 0 4px;
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: 3px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 18px rgba(230, 0, 18, 0.45);
}

.chl-h-sub {
  margin: 0;
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--muted);
}

/* ------------------------------------------------------------- 届次切换条 */
.chl-switch {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chl-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 66px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(23, 20, 27, 0.72);
  color: var(--text-soft);
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.chl-chip:hover {
  border-color: rgba(230, 0, 18, 0.5);
  transform: translateY(-1px);
}

.chl-chip.is-active {
  border-color: rgba(230, 0, 18, 0.8);
  background: linear-gradient(180deg, rgba(230, 0, 18, 0.3), rgba(143, 0, 11, 0.16));
  color: #fff;
  box-shadow: 0 0 0 1px rgba(230, 0, 18, 0.32), 0 8px 22px rgba(230, 0, 18, 0.2);
}

.chl-chip-no {
  font-size: 17px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: 1px;
}

.chl-chip-period {
  font-size: 11px;
  color: var(--muted-2);
}

.chl-chip.is-active .chl-chip-period {
  color: rgba(255, 217, 220, 0.8);
}

/* ------------------------------------------------------------- 一届一整屏 */
.chl-season {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}

@media (max-width: 900px) {
  .chl-season {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------- 主视觉 */
.chl-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 440px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: #0b090d;
  overflow: hidden;
}

/* 竖构图的皮肤原画放进横屏舞台会留白，垫一层自身的放大模糊版撑住画面。
   亮度不能压太狠 —— 压到 0.4 时两侧基本全黑，看起来像图没铺满。 */
.chl-visual-blur {
  position: absolute;
  left: -15%;
  top: -15%;
  width: 130%;
  height: 130%;
  object-fit: cover;
  filter: blur(34px) saturate(1.5) brightness(0.62);
  opacity: 1;
  z-index: 0;
}

.chl-visual-hit {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 440px;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.chl-visual-main {
  display: block;
  max-width: 100%;
  max-height: 64vh;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 20px 36px rgba(0, 0, 0, 0.62));
  transition: transform 0.35s ease;
}

.chl-visual-hit:hover .chl-visual-main {
  transform: scale(1.015);
}

.chl-visual-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  background: linear-gradient(0deg, rgba(5, 4, 10, 0.95), rgba(5, 4, 10, 0));
  font-size: 13px;
  pointer-events: none;
}

.chl-cap-kind {
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid rgba(230, 0, 18, 0.5);
  background: rgba(230, 0, 18, 0.22);
  color: #ffd9dc;
  font-size: 12px;
  font-weight: 600;
}

.chl-cap-title {
  color: var(--text);
  font-weight: 600;
}

.chl-cap-hint {
  margin-left: auto;
  color: var(--muted-2);
  font-size: 12px;
}

/* 无素材时的空舞台 */
.chl-visual-empty {
  position: relative;
  z-index: 1;
  padding: 40px 24px;
  text-align: center;
}

.chl-visual-empty-mark {
  font-size: 76px;
  font-weight: 800;
  font-style: italic;
  line-height: 1;
  color: rgba(230, 0, 18, 0.2);
  -webkit-text-stroke: 1px rgba(230, 0, 18, 0.42);
}

.chl-visual-empty-text {
  margin-top: 12px;
  color: var(--muted);
  font-size: 14px;
  letter-spacing: 1px;
}

/* ------------------------------------------------------------- 右侧档案 */
.chl-info {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 22px 22px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(31, 26, 35, 0.94), rgba(16, 14, 19, 0.94));
  overflow: hidden;
}

/* 左侧一道红边：让右侧卡片和主视觉有同一条视觉基准线 */
.chl-info::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--we-red), rgba(230, 0, 18, 0));
}

/* 右下角巨大的届次水印 */
.chl-seal {
  position: absolute;
  right: 16px;
  top: 10px;
  font-size: 46px;
  font-weight: 800;
  font-style: italic;
  line-height: 1;
  color: rgba(230, 0, 18, 0.16);
  -webkit-text-stroke: 1px rgba(230, 0, 18, 0.34);
  pointer-events: none;
  user-select: none;
}

.chl-season-title {
  margin: 0;
  font-size: 23px;
  line-height: 1.35;
  letter-spacing: 1px;
  color: #fff;
}

.chl-season-sub {
  font-size: 14px;
  letter-spacing: 4px;
  color: var(--gold-light);
}

.chl-season-period {
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--muted);
}

.chl-team {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.025);
}

.chl-team-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(230, 0, 18, 0.45);
  background: #0d0b10;
}

.chl-team-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.chl-team-initial {
  font-size: 30px;
  font-weight: 800;
  color: var(--gold-light);
}

.chl-team-text {
  min-width: 0;
}

.chl-team-label {
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--muted-2);
}

.chl-team-name {
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chl-honors {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chl-honor {
  padding: 4px 13px;
  border-radius: 999px;
  border: 1px solid rgba(245, 166, 35, 0.45);
  background: rgba(245, 166, 35, 0.12);
  color: #f7cf8f;
  font-size: 13px;
  font-weight: 600;
}

.chl-summary {
  margin: 0;
  padding-left: 14px;
  border-left: 2px solid rgba(230, 0, 18, 0.4);
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.9;
  /* 致辞里的换行由录入者决定，原样保留 */
  white-space: pre-line;
}

/* ------------------------------------------------------------- 视频卡（封面 + 播放） */
.chl-video {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  min-height: 78px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.38);
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.chl-video:hover {
  border-color: rgba(230, 0, 18, 0.62);
  transform: translateY(-1px);
}

.chl-video-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.36;
}

.chl-video-play {
  position: relative;
  z-index: 1;
  flex: 0 0 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 180, 186, 0.6);
  background: linear-gradient(135deg, var(--we-red), var(--we-red-deep));
  box-shadow: 0 6px 18px rgba(230, 0, 18, 0.42);
}

.chl-video-tri {
  font-size: 15px;
  color: #fff;
  transform: translateX(1px);
}

.chl-video-meta {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.chl-video-k {
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--gold-light);
}

.chl-video-v {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chl-video-how {
  font-size: 11px;
  color: var(--muted-2);
}

.chl-foot-note {
  display: flex;
  gap: 16px;
  margin-top: auto;
  padding-top: 6px;
  color: var(--muted-2);
  font-size: 12px;
}

/* ------------------------------------------------------------- 素材缩略条 */
.chl-thumbs {
  margin-top: 18px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--border-soft);
  background: rgba(16, 14, 19, 0.62);
}

.chl-thumbs-inner {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
}

.chl-thumb {
  flex: 0 0 auto;
  width: 134px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #0d0b10;
  color: var(--text-soft);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.chl-thumb:hover {
  transform: translateY(-2px);
}

.chl-thumb.is-active {
  border-color: var(--we-red);
  box-shadow: 0 0 0 1px rgba(230, 0, 18, 0.5), 0 8px 20px rgba(230, 0, 18, 0.16);
}

.chl-thumb-pic {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  background: #08070a;
}

.chl-thumb-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chl-thumb-cap {
  display: block;
  padding: 8px 10px 9px;
}

.chl-thumb-kind {
  display: block;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--gold-light);
}

.chl-thumb-title {
  display: block;
  font-size: 12.5px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 破图兜底：服务端保证有图，这里只是最后一道防线 */
.chl-img-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 84px;
  background: #0d0b10;
  color: var(--muted-2);
  font-size: 22px;
  font-weight: 700;
}

/* ------------------------------------------------------------- 空态 */
.chl-empty {
  padding: 70px 24px;
  border-radius: 16px;
  border: 1px dashed var(--border);
  background: rgba(16, 14, 19, 0.5);
  text-align: center;
}

.chl-empty-mark {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 4px;
  color: rgba(255, 217, 220, 0.75);
}

.chl-empty-text {
  margin-top: 12px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.9;
}

/* ------------------------------------------------------------- 灯箱 */
.chl-lb {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px;
  background: rgba(4, 3, 7, 0.94);
  animation: chlFade 0.18s ease;
}

/* hidden 属性优先于 display:flex —— 不加这条，灯箱一进页面就盖住整屏 */
.chl-lb[hidden] {
  display: none;
}

.chl-lb-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
}

.chl-lb-img {
  max-width: 92vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.72);
}

.chl-lb-frame {
  width: 82vw;
  height: 78vh;
  max-width: 1160px;
  border: 0;
  border-radius: 10px;
  background: #000;
}

.chl-lb-close {
  position: absolute;
  right: 20px;
  top: 18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(23, 20, 27, 0.92);
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.chl-lb-close:hover {
  border-color: rgba(230, 0, 18, 0.6);
}

body.is-locked {
  overflow: hidden;
}

/* ------------------------------------------------------------- 动效 */
@keyframes chlFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes chlRise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* 只在「切换届次」时播；首次进页面不播，免得像加载卡顿 */
.chl-season.is-swap {
  animation: chlRise 0.42s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.chl-season.is-swap .chl-info {
  animation: chlRise 0.42s 0.06s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .chl-season.is-swap,
  .chl-season.is-swap .chl-info {
    animation: none;
  }
}

/* ------------------------------------------------------------- 窄屏 */
@media (max-width: 900px) {
  .chl-visual,
  .chl-visual-hit {
    min-height: 300px;
  }
  .chl-visual-main {
    max-height: 46vh;
  }
  .chl-h {
    font-size: 24px;
    letter-spacing: 2px;
  }
  .chl-seal {
    font-size: 34px;
  }
  .chl-info {
    padding: 20px 16px 18px;
  }
  .chl-season-title {
    font-size: 20px;
  }
}

@media (max-width: 560px) {
  .chl-stage {
    padding: 20px 12px 34px;
  }
  .chl-thumb {
    width: 110px;
  }
  .chl-chip {
    min-width: 58px;
    padding: 7px 11px;
  }
  .chl-lb {
    padding: 14px;
  }
  .chl-lb-frame {
    width: 94vw;
    height: 54vh;
  }
  .chl-team-icon {
    width: 60px;
    height: 60px;
    border-radius: 13px;
  }
}

/* ------------------------------------------------------------- 后台：历届冠军 */
.chl-admin-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border-soft);
}

.chl-admin-seal {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid rgba(230, 0, 18, 0.5);
  background: rgba(230, 0, 18, 0.16);
  color: #ffd9dc;
  font-size: 17px;
  font-weight: 800;
  font-style: italic;
}

.chl-admin-htext {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.chl-admin-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}

.chl-admin-head .btn {
  margin-left: auto;
  flex: 0 0 auto;
}

.chl-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.chl-admin-grid .chl-full {
  grid-column: 1 / -1;
}

.chl-admin-imgs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.chl-img-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.02);
}

.chl-img-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 108px;
  border-radius: 8px;
  border: 1px dashed var(--border);
  background: #0b090d;
  overflow: hidden;
}

.chl-img-preview.is-square {
  width: 108px;
  height: 108px;
}

.chl-img-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.chl-img-preview.is-square img {
  object-fit: cover;
}

.chl-img-none {
  color: var(--muted-2);
  font-size: 13px;
}

.chl-uploader {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.chl-img-acts {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.chl-asset-sec {
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
}

.chl-asset-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.chl-asset-upload {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px;
  margin-bottom: 14px;
  border-radius: 10px;
  border: 1px dashed var(--border);
  background: rgba(255, 255, 255, 0.015);
}

.chl-asset-upload select.input {
  flex: 0 0 auto;
  width: 118px;
}

.chl-asset-upload input.input {
  flex: 1 1 200px;
  min-width: 140px;
}

.chl-asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.chl-asset-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.02);
}

.chl-asset-pic {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  background: #08070a;
}

.chl-asset-pic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chl-asset-main {
  position: absolute;
  left: 6px;
  top: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(230, 0, 18, 0.86);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}

.chl-asset-acts {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.chl-admin-foot {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
}

@media (max-width: 560px) {
  .chl-asset-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
  .chl-img-preview.is-square {
    width: 88px;
    height: 88px;
  }
}

/* ---- 后台：冠军英雄台（一位一行：位次 / 英雄名 / 召唤师名 / 立绘 / 模型 / 清空） ---- */
.chl-hero-edit-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1.3fr) auto;
  gap: 8px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px dashed var(--border-soft);
}

.chl-hero-edit-row:last-child {
  border-bottom: 0;
}

.chl-hero-slot {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--gold-light);
  white-space: nowrap;
}

.chl-hero-edit-row .input {
  margin: 0;
  padding: 7px 9px;
  font-size: 13px;
}

/* 立绘格：左边一张小预览（深色底，方便看透明立绘），右边选图 / 清除 */
.chl-hero-poster-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.chl-hero-poster-thumb {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 52px;
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  background: #120e18;
  overflow: hidden;
}

.chl-hero-poster-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.chl-hero-poster-none {
  font-size: 12px;
  color: var(--muted-2);
}

.chl-hero-poster-input {
  min-width: 0;
  max-width: 100%;
  font-size: 12px;
  color: var(--muted);
}

@media (max-width: 720px) {
  .chl-hero-edit-row {
    grid-template-columns: 58px minmax(0, 1fr);
  }
  .chl-hero-edit-row .chl-hero-model,
  .chl-hero-edit-row .chl-hero-poster-cell,
  .chl-hero-edit-row .btn {
    grid-column: 2;
  }
}

/* ------------------------------------------------------------- 冠军英雄台 */
/* 5 个位置各一个可旋转 3D 模型（model-viewer），模型下方是底座铭牌。
   台子用「顶面高光 + 金色台缘 + 底部阴影」三段堆出立体感 —— 
   单靠一块渐变会像贴纸，不像台阶。 */
.chl-heroes {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid rgba(230, 0, 18, 0.18);
}

.chl-heroes-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}

.chl-heroes-title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 3px;
  color: var(--gold-light);
}

.chl-heroes-hint {
  font-size: 12px;
  color: var(--muted-2);
}

.chl-hero-row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  /* 聚焦位会放大并向两侧 / 上方溢出，这里留出余量，别顶到上一块内容 */
  padding: 22px 0 10px;
}

.chl-hero {
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* 聚光灯：放大走 transform，不参与布局 ⇒ 邻位不会被挤动、页面不重排。
     原点定在底边中点，放大时台座留在原地、人物往上长，像被灯打亮。 */
  transition: transform 0.28s ease, opacity 0.28s ease, filter 0.28s ease;
  transform-origin: 50% 100%;
}

/* 有立绘的位次才可点开大图（3D 位次要留着拖动） */
.chl-hero.is-art {
  cursor: pointer;
}

.chl-hero.is-art:focus-visible {
  outline: 2px solid rgba(230, 0, 18, 0.72);
  outline-offset: 4px;
  border-radius: 6px;
}

/* 聚光灯：被指到的那位立起打亮，其余后退变暗 */
.chl-hero-row.has-focus .chl-hero {
  opacity: 0.46;
  filter: saturate(0.65);
  transform: scale(0.94);
}

.chl-hero-row.has-focus .chl-hero.is-active {
  opacity: 1;
  filter: none;
  transform: scale(1.14);
  z-index: 3;
}

/* 立绘是透明底，投影要用 drop-shadow 才会沿着人物轮廓走；
   用 box-shadow 只会得到一块方影子。 */
.chl-hero.is-art .chl-hero-poster {
  filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.55));
  transition: filter 0.28s ease;
}

.chl-hero-row.has-focus .chl-hero.is-active .chl-hero-poster {
  filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 26px rgba(255, 214, 140, 0.22));
}

.chl-hero-stage {
  position: relative;
  height: 232px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* 模型加载前 / 加载中，台位不是一块空洞：一层聚光 + 一圈地面反光。
   两个伪元素都压在模型下面（模型带 z-index），所以不会挡住拖动。
   pointer-events:none 是必须的，否则拖不动模型。 */
.chl-hero-stage::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 84%;
  height: 66%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 80%, rgba(230, 0, 18, 0.24), rgba(230, 0, 18, 0) 70%);
  pointer-events: none;
}

.chl-hero-stage::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 64%;
  height: 14px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 214, 140, 0.2), rgba(255, 214, 140, 0) 72%);
  pointer-events: none;
}

.chl-hero-model {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: transparent;
  --poster-color: transparent;
  --progress-bar-color: rgba(230, 0, 18, 0.6);
}

.chl-hero-poster,
.chl-hero-blank {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  object-fit: contain;
  font-size: 46px;
  font-weight: 800;
  color: var(--gold-light);
}

.chl-hero-podium {
  position: relative;
  margin-top: -18px;
  padding: 12px 10px 13px;
  text-align: center;
  border: 1px solid rgba(230, 0, 18, 0.35);
  border-radius: 4px 4px 10px 10px;
  background:
    linear-gradient(180deg, rgba(255, 214, 140, 0.16), rgba(255, 214, 140, 0) 42%),
    linear-gradient(180deg, #241d2c, #141019 62%, #0c0910);
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* 台缘金线：让它读起来是「台阶」而不是一块平板 */
.chl-hero-podium::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.55;
}

.chl-hero-name {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--gold-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chl-hero-summoner {
  margin-top: 3px;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 窄屏：5 个并排会被压成牙签 ⇒ 改成固定宽度横向滚动 */
@media (max-width: 980px) {
  .chl-hero-row {
    grid-template-columns: repeat(5, 152px);
    overflow-x: auto;
    /* 横向滚动容器按规范会把纵向也变成 auto，放大后的卡片会被裁掉，
       所以纵向要留出比放大溢出量更多的内边距（内边距区不参与裁切） */
    padding: 20px 0 10px;
    scrollbar-width: thin;
  }
  .chl-hero-stage {
    height: 190px;
  }
  .chl-hero-model {
    --min-hotspot-opacity: 0;
  }
  /* 窄屏本来就窄，放大倍数收一点，免得一聚焦整屏只剩一位 */
  .chl-hero-row.has-focus .chl-hero.is-active {
    transform: scale(1.06);
  }
}

/* 英雄大图灯箱：立绘居中，下面一块铭牌，两侧箭头翻看 */
.chl-lb-stage.is-hero {
  flex-direction: column;
}

.chl-hero-lb {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  max-height: 94vh;
}

.chl-hero-lb-img {
  max-height: 74vh;
  max-width: 82vw;
  object-fit: contain;
  filter: drop-shadow(0 26px 48px rgba(0, 0, 0, 0.72));
}

.chl-hero-lb-cap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
  padding: 10px 24px;
  border: 1px solid rgba(255, 214, 140, 0.32);
  border-radius: 999px;
  background: rgba(20, 16, 25, 0.86);
}

.chl-hero-lb-slot,
.chl-hero-lb-count {
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--muted-2);
}

.chl-hero-lb-name {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--gold-light);
}

.chl-hero-lb-summoner {
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--text);
}

/* 箭头只是两个圆钮，中间那一片不挡点击 */
.chl-lb-nav {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.chl-lb-step {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(23, 20, 27, 0.92);
  color: var(--text);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
}

.chl-lb-step:first-child {
  left: 20px;
}

.chl-lb-step:last-child {
  right: 20px;
}

.chl-lb-step:hover {
  border-color: rgba(230, 0, 18, 0.6);
}

/* ---- 拍卖名单筛选栏（2026-09-27）---- */
.auc-filter-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.auc-filter-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.auc-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  flex-wrap: wrap;
}
.auc-filter-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.auc-filter-count {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  padding-left: 8px;
  border-left: 1px solid var(--border);
  margin-left: 4px;
}
.auc-filter-count:empty {
  display: none;
}

/* =====================================================================
   赛事积分榜（登峰 / 涅槃 的 RANKING 卡片）
   2026-10-07 新增。这一套原本写在 standings.html 的页内 <style> 里，
   现在首页也要展示同一块内容（且每行可点进积分榜页），故上移到主题 ——
   留在页面里就等于第二套设计系统，改一处必漏一处。
   分组色取 :root 里**专为分组预留**的 --grp-dengfeng（金）/ --grp-niepan（蓝紫）；
   旧的 tag-gold / tag-violet 在 WE 红主题下会被统一成红色，两组分不出来。
   ===================================================================== */

/* 积分榜：仿「RANKING」双列排版 —— 排名块 + 队标 + 队名，右侧收拢数据列。
   双列是为了 12 支战队能一屏看完，不用上下滚。 */
.stb-rank-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(160deg, var(--bg-soft) 0%, var(--panel) 58%, var(--panel-2) 100%);
  /* 2026-10-07 整体放大一档：字号 / 队标 / 行高一起抬（用户反馈「看不清」）。
     关键点：放大字号的同时**没有压缩队名列** —— 原先把 W/L 给了 50px、+/- 给了 44px，
     都超出实际数字所需，这里把富余的宽度还给了队名（固定列合计 292px vs 原 286px），
     所以字大了、队名反而更不容易被截断。 */
  padding: 18px 20px 13px;
  margin-bottom: 18px;
}
/* 卡片按分组微微染色：描边 + 极淡的底色偏色，与头部徽章同一色系，
   让「这一整块属于哪一组」不用读字也能感觉出来（浓度刻意压得很低，不抢数据） */
.stb-rank-card.is-dengfeng {
  border-color: rgba(242, 193, 78, 0.26);
  background-image: linear-gradient(160deg, rgba(242, 193, 78, 0.06) 0%, var(--panel) 56%, var(--panel-2) 100%);
}
.stb-rank-card.is-niepan {
  border-color: rgba(142, 162, 255, 0.26);
  background-image: linear-gradient(160deg, rgba(142, 162, 255, 0.06) 0%, var(--panel) 56%, var(--panel-2) 100%);
}
.stb-rank-head {
  display: flex; align-items: center; gap: 16px;
  padding-bottom: 13px; border-bottom: 1px solid var(--border);
}
/* 登峰 / 涅槃 组徽章。
   造型：左侧方形徽记（内嵌图标）+ 右侧中英双行；对角金属渐变 + 上沿内高光 + 同色外辉光，
   在暗色卡片上既有分量、又能一眼分清是哪一组。 */
.stb-grp-badge {
  display: inline-flex; align-items: center; gap: 11px; flex: none;
  padding: 8px 18px 8px 10px; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.28);
}
.stb-grp-ico {
  width: 31px; height: 31px; flex: none; border-radius: 9px;
  display: grid; place-items: center;
  background: rgba(10, 8, 4, 0.26);
  border: 1px solid rgba(255, 255, 255, 0.34);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.28);
}
.stb-grp-txt { display: flex; flex-direction: column; }
.stb-grp-txt b {
  font-size: 20px; font-weight: 900; line-height: 1.06;
  letter-spacing: 3px; text-indent: 3px; /* 抵掉末字后多出的字距，视觉居中 */
}
.stb-grp-txt i {
  margin-top: 3px; font-size: 9px; font-weight: 700; font-style: normal;
  line-height: 1; letter-spacing: 2.5px; text-indent: 2.5px; opacity: 0.72;
}
.stb-grp-badge.is-dengfeng {
  background-image: linear-gradient(145deg, #ffe79f 0%, #f2c14e 44%, #c99227 100%);
  color: #2c1d04;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62), inset 0 -2px 6px rgba(88, 56, 0, 0.22),
              0 5px 22px rgba(242, 193, 78, 0.32);
}
.stb-grp-badge.is-niepan {
  background-image: linear-gradient(145deg, #ced7ff 0%, #8ea2ff 44%, #5c71d5 100%);
  color: #0b1130;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62), inset 0 -2px 6px rgba(14, 24, 88, 0.26),
              0 5px 22px rgba(142, 162, 255, 0.3);
}
.stb-grp-badge.is-ungrouped {
  padding: 8px 16px; background-image: none; background-color: var(--panel-3);
  color: var(--text-soft); border-color: var(--border); box-shadow: none;
  font-size: 15px; font-weight: 700; letter-spacing: 2px;
}
.stb-rank-title {
  margin: 0; font-size: 30px; line-height: 0.95; font-weight: 900; font-style: italic;
  letter-spacing: 1.5px; color: var(--gold-light);
  text-shadow: 0 2px 12px var(--we-red-soft);
}
.stb-rank-meta { margin-left: auto; text-align: right; line-height: 1.5; }
.stb-rank-meta b { display: block; font-size: 15px; font-weight: 700; color: var(--text); }
.stb-rank-meta span { font-size: 12.5px; color: var(--muted); }
.stb-rank-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 34px; }
.stb-rank-thead,
.stb-rank-row {
  display: grid;
  grid-template-columns: 34px 30px minmax(0, 1fr) 48px 42px 56px 34px;
  align-items: center; gap: 8px;
}
.stb-rank-thead {
  padding: 10px 0 8px; font-size: 12px; letter-spacing: 0.5px;
  color: var(--muted-2); text-transform: uppercase; text-align: center;
  border-bottom: 1px solid var(--border);
}
.stb-rank-thead .stb-th-team { text-align: left; }
.stb-rank-row { padding: 9px 0; border-bottom: 1px solid var(--border-soft); }
.stb-rank-row:hover { background: var(--panel-2); }
/* 首页把整行做成链接（点进完整积分榜页）—— 去掉链接默认下划线，颜色仍由行内各块自己定义 */
a.stb-rank-row { color: inherit; text-decoration: none; }
.stb-rk-badge {
  display: grid; place-items: center;
  height: 30px; border-radius: 4px;
  background: var(--gold-dark); color: var(--text);
  font-size: 15px; font-weight: 800; font-style: italic;
  transform: skewX(-10deg);
}
.stb-rk-badge > span { display: block; transform: skewX(10deg); }
.stb-rank-row.is-top .stb-rk-badge { background: var(--gold); color: var(--text); }
.stb-rk-logo {
  width: 32px; height: 32px; border-radius: 8px; object-fit: cover;
  background: var(--panel-3); border: 1px solid var(--border);
}
.stb-rk-logo-ph {
  display: grid; place-items: center;
  font-size: 14px; font-weight: 700; color: var(--muted);
}
.stb-rk-name {
  font-size: 16px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stb-rk-cell {
  text-align: center; font-size: 15.5px; color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}
.stb-rk-pts { color: var(--gold-light); font-weight: 800; }
.stb-rk-streak.up { color: var(--gold-light); font-weight: 700; }
.stb-rk-streak.down { color: var(--muted-2); }
.stb-rank-foot { margin-top: 11px; font-size: 12.5px; color: var(--muted-2); }
@media (max-width: 900px) {
  /* 窄屏折成单列：两列上下相接，第二段不再重复表头，序号自然连成一串 */
  .stb-rank-cols { grid-template-columns: 1fr; }
  .stb-rank-col + .stb-rank-col .stb-rank-thead { display: none; }
  .stb-rank-title { font-size: 24px; }
  .stb-rank-head { align-items: center; }
  .stb-grp-badge { padding: 6px 13px 6px 8px; gap: 8px; border-radius: 9px; }
  .stb-grp-badge.is-ungrouped { padding: 6px 12px; font-size: 13px; }
  .stb-grp-ico { width: 24px; height: 24px; border-radius: 7px; }
  .stb-grp-ico svg { width: 13px; height: 13px; }
  .stb-grp-txt b { font-size: 15px; letter-spacing: 2px; text-indent: 2px; }
  .stb-grp-txt i { margin-top: 2px; font-size: 7px; letter-spacing: 1.5px; text-indent: 1.5px; }
}
/* 赛果条里的分组徽章：沿用同一套（图标 + 中英双行 + 金属渐变），整体收小一档 */
.stb-grp-badge.is-mini { padding: 4px 12px 4px 6px; gap: 8px; border-radius: 9px; }
.stb-grp-badge.is-mini .stb-grp-ico { width: 21px; height: 21px; border-radius: 6px; }
.stb-grp-badge.is-mini .stb-grp-ico svg { width: 12px; height: 12px; }
.stb-grp-badge.is-mini .stb-grp-txt b { font-size: 13px; letter-spacing: 1.5px; text-indent: 1.5px; }
.stb-grp-badge.is-mini .stb-grp-txt i { margin-top: 1.5px; font-size: 6.5px; letter-spacing: 1.1px; text-indent: 1.1px; }
.stb-grp-badge.is-mini.is-ungrouped { padding: 4px 11px; font-size: 12px; letter-spacing: 1.5px; }
@media (max-width: 680px) {
  /* 极窄屏：徽章再收一档，去掉英文副标（信息由中文组名承载） */
  .stb-grp-badge.is-mini { padding: 3px 9px 3px 5px; gap: 6px; border-radius: 8px; }
  .stb-grp-badge.is-mini .stb-grp-ico { width: 17px; height: 17px; border-radius: 5px; }
  .stb-grp-badge.is-mini .stb-grp-ico svg { width: 10px; height: 10px; }
  .stb-grp-badge.is-mini .stb-grp-txt b { font-size: 11.5px; letter-spacing: 1px; text-indent: 1px; }
  .stb-grp-badge.is-mini .stb-grp-txt i { display: none; }
}