/* ============================================================================
   pages-practice-fx.css —— 原 pages.css 的第 5/6 段（2026-09-19 拆分）

   原文件 3,696 行，把六种板块的样式装在了一起（《模型档位与代码质量_操作准则》
   §5 点名的技术债）。现按文件自己的 ===== 横幅拆成六段，index.html 按
   原顺序引入 —— 层叠顺序与拆分前完全一致（拆分脚本做过逐行相等校验）：

     1 pages-login.css → 2 pages-store.css → 3 pages-practice.css
     → 4 pages-identity.css → 5 pages-practice-fx.css → 6 pages-learn.css

   本段：挑战模式的计时与星级（老师 2026-09-19 那层）
   ============================================================================ */

/* ==========================================================================
   挑战模式的计时与星级（老师 2026-09-19）

   计时器要「看起来在走」—— 数字等宽、位置固定，不跳动。
   星级要「一眼看出差多少」—— 亮星 / 暗星对比拉满，不靠颜色深浅猜。
   ========================================================================== */

/* 挑战的秒表。★ 老师 2026-09-19：它搬进了**主窗口**（题目卡右上角），
   不再挂在顶部计数条上 —— 做题时眼睛就在卡片里，表也该在那儿。
   等宽数字 + 一块淡底 + 稍大的字号，扫一眼就能读到，不用去找。 */
.pc-clock {
  color: var(--c-accent);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* 只在题目卡里的那个才是「主窗口秒表」——留一条限定，
   免得将来别处再用 .pc-clock 时被这套内边距撑歪。 */
.pc-card .pc-clock {
  margin-left: 10px;
  padding: 3px 10px;
  border-radius: var(--r-sm);
  background: var(--c-input);
  font-size: var(--fs-lg);
}

/* ---- 开局倒计时 3 → 2 → 1 → 开始 ---- */
.pc-countdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 260px;
  padding: 40px 20px;
  background: var(--c-card);
  border-radius: var(--r-md);
}

.pc-cd-n {
  font-size: clamp(72px, 14vw, 132px);
  font-weight: 700;
  line-height: 1;
  color: var(--t-bright);
  font-variant-numeric: tabular-nums;
  animation: cd-pop 0.7s ease-out;
}

/* 「开始！」那一跳：绿 + 稍微大一点，和数字区分开 */
.pc-cd-n.is-go {
  color: var(--c-green-a);
  font-size: clamp(56px, 11vw, 104px);
}

@keyframes cd-pop {
  from { transform: scale(0.72); opacity: 0.15; }
  to   { transform: scale(1); opacity: 1; }
}

.pc-cd-hint {
  color: var(--t-dim);
  font-size: var(--fs-sm);
}

/* ---- 星级结算面板 ---- */
.pc-stars { margin-top: 18px; }

.pc-stars-top {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.pc-stars-row {
  display: flex;
  gap: 6px;
  line-height: 1;
}

/* 暗星用描边色 —— 不用 opacity，暗星在深底上太淡会看不见「一共几颗」 */
.pc-star {
  font-size: 34px;
  color: var(--c-line);
  transition: color 0.18s ease, transform 0.18s ease;
}

.pc-star.is-on {
  color: var(--c-gold);
  transform: scale(1.06);
}

.pc-stars-n {
  font-size: var(--fs-lg);
  color: var(--t-primary);
  font-weight: 600;
}

.pc-stars-parts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
  margin: 16px 0 4px;
}

.pc-spart {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  background: var(--c-input);
  border-radius: var(--r-sm);
}

.pc-spart .k { color: var(--t-muted); font-size: var(--fs-xs); }
.pc-spart .v { color: var(--t-bright); font-size: var(--fs-lg); }
.pc-spart .n { color: var(--t-dim); font-size: var(--fs-xs); }

/* 发音按钮里的文字标签：冷却时会换成「稍等 Ns」，宽度变化不能把按钮挤跳 */
.pc-audio-lab {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* 「听音拼写」档只给一个播放按钮 —— 那就把它做大，别让它在空题面里显得可怜 */
.pc-prompt.is-bare .pc-speak {
  padding: 22px 40px;
  font-size: var(--fs-xl);
}