/* 老師端新樣式（賽馬圖效能優化、賽後逐題報表）。
   依賴 base.css / live.css 的 token，只新增或覆蓋，不改 live.css 本身。 */

/* ---------- 賽馬圖效能 ----------
   .lane 加 contain：一條賽道的重排/重繪不會波及其他賽道或整頁，
   300 人團體戰同時開很多條賽道時尤其重要。 */
#race .lane { contain: layout paint style; }

/* 進度條改用 transform: scaleX() 取代 live.css 原本的 width。
   width 的 transition 每一幀都要走 layout，300 條賽道一起跑會卡成投影片；
   transform 只走合成層，交給 GPU 處理。用 #race 前綴墊高權重蓋過 live.css。 */
#race .track .bar {
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.22, .8, .3, 1);
  will-change: transform;
}

/* live.css 的 shake 是為了 .feedback（本體用 translateX(-50%) 置中）寫的，
   直接套在賽道的 .track 上會讓賽道整條跳掉半個寬度（.track 本來就不是置中定位）。
   這裡開一組「只做水平位移、不帶 -50% 基準」的版本，專門給賽道用。 */
@keyframes lane-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  75% { transform: translateX(10px); }
}
#race .lane[data-reset='true'] .track { animation: lane-shake .4s ease; }

/* ---------- 賽後逐題報表 ---------- */
.statlist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.statlist li {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-lg);
  background: var(--c-surface-2);
}
.statlist .rank {
  font-size: var(--fs-2xl);
  font-weight: 900;
  color: var(--c-text-dim);
  text-align: center;
}
.statlist .q { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.statlist .term {
  font-size: var(--fs-xl);
  font-weight: 800;
  overflow-wrap: anywhere;
}
.statlist .def {
  font-size: var(--fs-lg);
  color: var(--c-text-dim);
  overflow-wrap: anywhere;
}
.statlist .rate {
  font-size: var(--fs-lg);
  font-weight: 900;
  color: var(--c-danger);
  white-space: nowrap;
  text-align: right;
}

/* 投影用：大螢幕再放大一階，跟 live.css 裡 .stage 的規則同一個斷點。 */
@media (min-width: 1200px) {
  .statlist .rank { font-size: 40px; }
  .statlist .term { font-size: 30px; }
  .statlist .def { font-size: 22px; }
  .statlist .rate { font-size: 24px; }
}

/* 窄螢幕（老師用平板看結算）跟 .lane 一樣改兩列，數字獨佔一整行不擠標題 */
@media (max-width: 560px) {
  .statlist li {
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    grid-template-areas: 'rank q' '. rate';
    row-gap: var(--sp-2);
  }
  .statlist .rank { grid-area: rank; }
  .statlist .q { grid-area: q; }
  .statlist .rate { grid-area: rate; text-align: left; }
}