/* ============================================================
   battle.css — IELTS Battle 首页专属样式
   ------------------------------------------------------------
   承载三样东西：
     1. Hero 的竞赛理念支柱（Points / Badges / Leadership）
     2. 「竞技场」板块的底色与标题
     3. 班级排行榜的领奖台
   其余页面不引入本文件。
   ============================================================ */

/* ---------------- Hero 竞赛理念支柱 ---------------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}
.pillar {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  box-shadow: var(--sh-sm);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.pillar:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
  border-color: var(--brand-200);
}
.pillar__ic {
  width: 34px; height: 34px;
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  font-size: 17px; color: #fff;
  box-shadow: var(--sh-sm);
  margin-bottom: var(--sp-3);
}
.pillar__en {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--brand-600);
}
.pillar h4 { font-size: var(--fs-base); margin-top: 2px; color: var(--text-strong); }
.pillar p {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: var(--lh-normal);
  margin-top: var(--sp-1);
}

/* Hero 里的小战绩行（设备模型最后一格，用于点出「答题即计入榜单」） */
.mini-row--score {
  background: linear-gradient(135deg, var(--brand-50), #fff7ed);
  border-color: var(--brand-200);
}

/* ---------------- 竞技场（排行榜板块） ---------------- */
.section--arena {
  position: relative;
  overflow: hidden;
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.section--arena::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(1000px 320px at 10% -12%, var(--brand-50), transparent 62%),
    radial-gradient(760px 260px at 92% 0%, #fff7ed, transparent 60%);
  pointer-events: none;
}
.section--arena > .container { position: relative; }

.arena__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
  margin-bottom: var(--sp-8);
}
.arena__head .section__head { margin-bottom: 0; }

/* 竞技场顶部三枚小指标 */
.arena__facts { display: flex; gap: var(--sp-6); }
.arena__fact { text-align: right; }
.arena__fact b {
  display: block;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--brand-700);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.arena__fact span { font-size: var(--fs-xs); color: var(--text-muted); }

/* ---------------- 领奖台 ---------------- */
.lb-podium {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  align-items: end;
  padding: var(--sp-8) var(--sp-6) 0;
  background: linear-gradient(180deg, var(--gray-50), var(--bg-surface));
  border-bottom: 1px solid var(--border);
}
.lb-podium:empty { display: none; }

.podium { text-align: center; }
.podium__av {
  width: 64px; height: 64px;
  border-radius: var(--r-full);
  object-fit: cover;
  display: grid; place-items: center;
  margin: 0 auto var(--sp-3);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  background: var(--brand-100);
  color: var(--brand-700);
  border: 3px solid var(--bg-surface);
  box-shadow: var(--sh-md);
}
.podium__name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.podium__cls { font-size: var(--fs-xs); color: var(--text-faint); margin-top: 1px; }
.podium__val {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--brand-700);
  font-variant-numeric: tabular-nums;
  margin-top: var(--sp-1);
}
.podium__base {
  margin-top: var(--sp-3);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  display: grid; place-items: center;
  color: #fff;
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
.podium--1 .podium__base { height: 92px; background: linear-gradient(180deg, #fbbf24, #d97706); }
.podium--2 .podium__base { height: 68px; background: linear-gradient(180deg, #cbd5e1, #94a3b8); }
.podium--3 .podium__base { height: 52px; background: linear-gradient(180deg, #e0a45e, #b45309); }
.podium--1 .podium__av {
  border-color: #fbbf24;
  box-shadow: 0 0 0 4px rgba(251,191,36,.20), var(--sh-lg);
}
.podium--1 .podium__val { color: #b45309; }
.podium.is-me .podium__name::after {
  content: "我";
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: var(--r-full);
  background: var(--brand-600);
  color: #fff;
  font-size: 10px;
  font-weight: var(--fw-semibold);
  vertical-align: 2px;
}

/* ---------------- 响应式 ---------------- */
@media (max-width: 900px) {
  .pillars { grid-template-columns: 1fr; }
  .lb-podium { gap: var(--sp-2); padding-left: var(--sp-3); padding-right: var(--sp-3); }
  .podium__av { width: 52px; height: 52px; font-size: var(--fs-base); }
  .podium__base { height: 52px !important; }
  .arena__facts { display: none; }
}