/* css/app.css — 版面與元件 */

/* ---------------------------------------------------------------------- */
/* Reset / 基礎                                                           */
/* ---------------------------------------------------------------------- */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
  /* 排版紀律：中文詞內不斷行（人名／英數與中文詞之間仍可在空白處斷），
     真的塞不下時才整詞換行，避免任何地方單獨剩一個中文字。 */
  word-break: keep-all;
  overflow-wrap: break-word;
}

h1,
h2,
h3,
p {
  margin: 0;
}

/* 標題儘量兩行平衡、內文儘量避免末行只剩孤字孤符號（不支援的瀏覽器會忽略，安全降級） */
h1,
h2,
h3,
.hero-card__name,
.sheet__title,
.empty-state__title,
.celebration__title,
.celebration__next {
  text-wrap: balance;
}

p,
.hero-card__focus,
.settings-card__row,
.about-card__note,
.empty-state__desc,
.confirm-card p,
.challenge-note,
.sheet-note__text,
.mode-card__focus,
.secondary-card__focus {
  text-wrap: pretty;
}

/* 資訊單元（數字＋單位／符號）整體不可拆行，例如 59%、53/90 投中、約 30 分、第 3/9 輪 */
.nowrap {
  white-space: nowrap;
}

button,
input {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* HTML hidden 屬性必須永遠贏：任何帶 display 的 class（如 .btn 的
   inline-flex）都會蓋掉 UA 樣式表的 [hidden]，這裡拉回來。 */
[hidden] {
  display: none !important;
}

/* 數字一律等寬，避免練球時數字跳動 */
.today-summary__value,
.today-summary__pct,
.active-header__time,
.makes-btn,
.stepper-btn,
.round-row__score,
.history-row__score,
.summary__total-num,
.type-row__score,
.type-row__pct,
.spot-heat-pct,
.court-info__score,
.court-info__pct {
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------- */
/* App Shell                                                              */
/* ---------------------------------------------------------------------- */

.app-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.app-main {
  flex: 1;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-4) calc(var(--tabbar-height) + var(--safe-bottom) + var(--space-6));
  min-height: 100dvh;
}

@media (min-width: 481px) {
  .app-main {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }
}

.page {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  animation: page-in var(--transition-med);
}

@keyframes page-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.page-header h1 {
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: 0.03em;
}

.page-header--with-back {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* 練球頁標題列右側的回首頁入口（SPEC_M6 §1：裸網址仍直接進練球，
   但已在使用的人隨時回得去首頁介紹）。低調字標，不跟 h1 搶。 */
.page-header--train {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.home-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  /* 觸控面積靠 min-height 撐到 44px（鐵律），視覺上仍只是一行小字 */
  min-height: 44px;
  padding: 0 var(--space-2);
  margin-right: calc(var(--space-2) * -1);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast);
}

.home-link:hover,
.home-link:focus-visible {
  color: var(--color-accent-text);
}

.home-link__icon {
  width: 15px;
  height: 15px;
  flex: none;
}

.back-btn {
  width: var(--touch-min);
  height: var(--touch-min);
  min-width: var(--touch-min);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  border-radius: var(--radius-full);
  color: var(--color-text);
}

.back-btn:active {
  background: var(--color-surface-sunken);
}

/* ---------------------------------------------------------------------- */
/* Tab bar                                                                */
/* ---------------------------------------------------------------------- */

.tab-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  height: calc(var(--tabbar-height) + var(--safe-bottom));
  padding: var(--space-2) var(--space-4) var(--safe-bottom);
  background: rgba(250, 249, 247, 0.92);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-top: 1px solid var(--color-border);
}

/* 深色：毛玻璃底色改跟隨暖黑背景（#16130F），否則會在暗色頁面上留一條半透明亮塊 */
:root[data-theme="dark"] .tab-bar {
  background: rgba(22, 19, 15, 0.92);
}

.tab-bar > .tab-item {
  flex: 1;
  max-width: 140px;
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--touch-min);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.tab-item:active {
  transform: scale(0.94);
}

.tab-item.is-active {
  color: var(--color-accent-text);
}

.tab-item__icon {
  width: 24px;
  height: 24px;
}

.tab-item__icon-wrap {
  position: relative;
  display: inline-flex;
}

.tab-item__dot {
  position: absolute;
  top: -1px;
  right: -3px;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-danger);
  border: 1.5px solid var(--color-bg);
}

.tab-item__label {
  font-size: var(--text-xs);
  font-weight: 600;
}

/* ---------------------------------------------------------------------- */
/* 按鈕 / Chip                                                            */
/* ---------------------------------------------------------------------- */

.btn {
  min-height: var(--touch-min);
  padding: 0 var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--text-md);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-fast), opacity var(--transition-fast), background var(--transition-fast);
}

.btn:active {
  transform: scale(0.97);
}

.btn:disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* 動作族大鈕比照 SHOT 圓鈕：膠囊圓角＋字重 800＋字距拉開（SPEC M4.2 §3） */
.btn--primary,
.btn--secondary {
  position: relative;
  border-radius: var(--radius-full);
  font-weight: 800;
  letter-spacing: 0.02em;
}

.btn--primary {
  background: var(--color-fill-accent);
  color: var(--color-on-fill);
}

/* 外圈 offset ring，呼應 .hero-card__cta-circle::after；只有 primary（層級最高）才加 */
.btn--primary::after {
  content: '';
  position: absolute;
  inset: -5px;
  border: 1.5px solid var(--color-accent);
  opacity: 0.3;
  border-radius: var(--radius-full);
  pointer-events: none;
}

.btn--primary:active {
  background: var(--color-accent-dark);
}

/* 描邊版：同膠囊形與字重，accent 細框＋accent 字，不加 ring（層級低一階） */
.btn--secondary {
  background: var(--color-surface);
  border: 1.5px solid var(--color-accent);
  color: var(--color-accent-text);
}

/* ghost／danger 只跟進膠囊圓角，維持低調 */
.btn--ghost,
.btn--ghost-danger,
.btn--danger {
  border-radius: var(--radius-full);
}

.btn--ghost {
  background: transparent;
  color: var(--color-text-muted);
}

.btn--ghost-danger {
  background: transparent;
  color: var(--color-danger-text);
}

.btn--danger {
  background: var(--color-danger);
  color: var(--color-on-fill);
}

.chip {
  min-height: 40px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  transition: all var(--transition-fast);
}

.chip:active {
  background: var(--color-accent-tint);
  border-color: var(--color-accent);
  color: var(--color-accent-text);
}

/* 選中態：accent 實色膠囊（非淡底），呼應「選項族」設計語彙（SPEC M4.2 §1） */
.chip--active {
  background: var(--color-fill-accent);
  border-color: var(--color-fill-accent);
  color: var(--color-on-fill);
}

.chip--attempts {
  color: var(--color-text);
}

/* 選項族共用膠囊 segmented（同快速／逐球切換語彙）：外框 sunken 底、
   選中格 accent 實色膠囊、未選中無框淡字。用於自由練習球種選擇／
   統計趨勢球種篩選／每週目標快選（SPEC M4.2 §1）。 */
.option-segmented {
  display: flex;
  background: var(--color-surface-sunken);
  border-radius: var(--radius-full);
  padding: 3px;
  gap: 2px;
}

.option-segmented__btn {
  flex: 1;
  min-height: 40px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-muted);
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.option-segmented__btn.is-active {
  background: var(--color-fill-accent);
  color: var(--color-on-fill);
  box-shadow: var(--shadow-sm);
}

/* 超過 4 格（含「全部」）時允許橫向捲動＋字級縮一級，不換行跑版（統計趨勢球種篩選，§1） */
.option-segmented--scroll {
  overflow-x: auto;
  scrollbar-width: none;
}

.option-segmented--scroll::-webkit-scrollbar {
  display: none;
}

.option-segmented--scroll .option-segmented__btn {
  flex: 0 0 auto;
  padding: 0 var(--space-3);
  font-size: var(--text-xs);
}

/* ---------------------------------------------------------------------- */
/* 今日小結 / 模式卡片                                                     */
/* ---------------------------------------------------------------------- */

.today-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.today-summary__row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

.today-summary__value {
  font-size: var(--text-lg);
  font-weight: 800;
}

.today-summary__pct {
  margin-left: auto;
  font-size: var(--text-xl);
  font-weight: 800;
}

.today-summary__lifetime,
.today-summary__weekly {
  font-size: var(--text-xs);
  font-weight: 600;
  opacity: 0.85;
}

.today-summary--empty {
  background: var(--color-surface);
  color: var(--color-text-muted);
  border: 1.5px dashed var(--color-border-strong);
  font-weight: 600;
  text-align: center;
}

.today-summary--empty .today-summary__row {
  justify-content: center;
}

.today-summary--empty .today-summary__lifetime,
.today-summary--empty .today-summary__weekly {
  color: var(--color-text-muted);
  opacity: 1;
  text-align: center;
}

.mode-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.mode-card {
  text-align: left;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  transition: transform var(--transition-fast);
}

.mode-card:active {
  transform: scale(0.985);
}

.mode-card__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.mode-card__name {
  font-size: var(--text-lg);
  font-weight: 800;
}

.mode-card__est {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 600;
  white-space: nowrap;
}

.mode-card__focus {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.mode-card__meta {
  margin-top: var(--space-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.mode-card__rounds {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-accent-text);
  background: var(--color-accent-tint);
  padding: 3px var(--space-2);
  border-radius: var(--radius-full);
}

.mode-card__inspired {
  font-size: 11px;
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------------------- */
/* 繼續上次練習                                                            */
/* ---------------------------------------------------------------------- */

.page--confirm {
  min-height: calc(100dvh - var(--tabbar-height) - var(--safe-bottom) - var(--space-8));
  display: flex;
  align-items: center;
}

.confirm-card {
  width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.confirm-card h2 {
  font-size: var(--text-lg);
  font-weight: 800;
}

.confirm-card p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.confirm-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.confirm-actions .btn {
  flex: 1;
}

/* ---------------------------------------------------------------------- */
/* 練球中                                                                  */
/* ---------------------------------------------------------------------- */

.active-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.active-header__mode {
  font-size: var(--text-lg);
  font-weight: 800;
}

.active-header__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-muted);
}

.active-header__time {
  padding: 4px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-surface-sunken);
}

.active-header__round {
  color: var(--color-accent-text);
  white-space: nowrap;
}

.court-wrap {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.court-svg {
  width: 100%;
  height: auto;
  display: block;
  touch-action: manipulation;
}

.court-spot {
  cursor: pointer;
}

.court-spot.is-locked {
  cursor: default;
}

/* heat 模式：只有有出手資料的點可點，沒資料的縮小點維持預設游標 */
.court-spot--heat {
  cursor: default;
}

.court-spot--heat.is-clickable {
  cursor: pointer;
}

.spot-dot {
  transition: r var(--transition-fast), fill var(--transition-fast);
  stroke: var(--color-surface);
  stroke-width: 2;
}

.court-spot--pick .spot-dot {
  fill: var(--color-spot-idle);
}

/* 正在投的點：柔和光暈＋緩慢呼吸，動線提示用、幅度不搶眼 */
.court-spot--pick.is-selected .spot-dot {
  fill: var(--color-accent);
  stroke: var(--color-accent-dark);
  filter: drop-shadow(0 0 6px var(--color-accent));
  animation: spot-glow-breathe 2.6s ease-in-out infinite;
}

@keyframes spot-glow-breathe {
  0%,
  100% {
    filter: drop-shadow(0 0 4px var(--color-accent));
  }
  50% {
    filter: drop-shadow(0 0 9px var(--color-accent));
  }
}

/* 點擊／觸控不畫 UA 的黑色 focus 矩形（SVG g 有 tabindex，Chromium 連滑鼠
   點擊都會畫）；鍵盤操作維持看得見的 focus 框（無障礙）。 */
.court-spot:focus {
  outline: none;
}

.court-spot:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* heat 模式：環底圓平常不描邊（stroke 色由 court.js 內聯成該點熱度色），
   點擊選中時加寬成同色光圈，兩套主題都清楚 */
.court-spot--heat.is-clickable .spot-dot {
  stroke-width: 0;
}

.court-spot--heat.is-clickable.is-selected .spot-dot {
  stroke-width: 4px;
}

/* 15px→26px：SVG 座標，手機實際約 12px 太小看不清，放大到位（SPEC M4.2 §4）。
   白暈 stroke 跟著加粗到 5px，字放大後仍要壓得住球場線／熱區色維持可讀。 */
.spot-label {
  font-size: 26px;
  font-weight: 700;
  fill: var(--color-text);
  opacity: 0;
  transition: opacity var(--transition-fast);
  pointer-events: none;
  paint-order: stroke;
  stroke: var(--color-surface);
  stroke-width: 5px;
}

.court-spot.is-selected .spot-label {
  opacity: 1;
}

.court-spot--heat .spot-label {
  display: none;
}

/* 熱區「填色進度環」（取代舊的白字貫穿實心圓點）：環的長度＝命中率、
   環內鋪熱度色淡底、數字用熱度色（不含 %，完整數據在點擊後的資訊列）。
   顏色都由 court.js 依熱度內聯指定，這裡只管幾何與透明度。
   SVG viewBox 750 寬，手機上球場約縮到 0.46 倍，27px 字實際約 12.5px，
   數字純兩位數＋高對比色字仍可讀；與分享卡 drawMiniCourt 同步。 */
.spot-heat-pct {
  font-size: 27px;
  font-weight: 800;
  pointer-events: none;
}

/* 「100」三位數縮一級才住得進環內 */
.spot-heat-pct--tight {
  font-size: 23px;
}

/* 環內熱度色淡底 */
.spot-ring-tint {
  opacity: 0.14;
  pointer-events: none;
}

/* 進度環軌道（未達成的部分）：淡出的中性環 */
.spot-ring-track {
  fill: none;
  stroke: var(--color-border);
  stroke-width: 8;
  opacity: 0.4;
  pointer-events: none;
}

/* 進度弧：長度＝命中率（stroke-dasharray 由 court.js 內聯），圓頭收尾 */
.spot-ring-arc {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  pointer-events: none;
}

/* heat 模式的點擊資訊列：court.js 在 container 內 svg 後面自己加這個 div，
   不改 renderCourt 對外介面。min-height 固定，切換點時版面不跳動。 */
.court-info {
  min-height: 52px;
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.court-info__placeholder {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.court-info__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--text-md);
}

.court-info__label {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--color-text);
}

/* 數字同級：跟點名一樣粗體、同字級，整列一眼可讀（SPEC M4.2 §4） */
.court-info__score {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--color-text-muted);
}

.court-info__dot {
  color: var(--color-text-faint);
}

.court-info__pct {
  font-size: var(--text-lg);
  font-weight: 800;
}

.spot-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.round-input {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.round-input__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.round-input__headline {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* 輪次標示：移進輸入區塊、跟點位名稱同區，字級不小於 text-sm、粗體（§3） */
.round-input__round {
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--color-accent-text);
  white-space: nowrap;
}

.round-input__spot {
  min-width: 0;
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* M5 §2：本輪最低達標球數提示——純資訊小膠囊，非可點控制項，不套用 .chip
   的按鈕語彙／44px 觸控高度。 */
.round-input__forecast-chip {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  margin-top: 2px;
  padding: 2px var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-accent-tint);
  color: var(--color-accent-text);
  font-size: var(--text-xs);
  font-weight: 700;
  white-space: nowrap;
}

.round-input__question {
  font-size: var(--text-lg);
  font-weight: 800;
  text-align: center;
}

/* 列式排版：每列最多 6 顆，末列不足 6 顆時整列置中（SPEC M4.3 §1）。
   列距與顆距共用同一 gap 值，視覺節奏一致。 */
.makes-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.makes-grid__row {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
}

/* 圓形數字鈕，比照球的意象；窄螢幕被 flex 壓縮時用 aspect-ratio 鎖正圓
   （不然一排 6 顆會被壓成橢圓），觸控目標維持 ≥44px。
   flex 置中＋清 UA padding＋nowrap：iOS 按鈕預設左右內距大，被壓到
   min-width 時「10」會被擠成兩行、數字也不在圓心。 */
.makes-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  white-space: nowrap;
  width: 48px;
  height: auto;
  aspect-ratio: 1;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  background: var(--color-surface-sunken);
  border: 1.5px solid var(--color-border);
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--color-text);
  transition: transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.makes-btn:hover {
  border-color: var(--color-accent);
}

.makes-btn:active {
  transform: scale(0.92);
  background: var(--color-fill-accent);
  color: var(--color-on-fill);
  border-color: var(--color-fill-accent);
}

.makes-btn.is-active {
  background: var(--color-fill-accent);
  color: var(--color-on-fill);
  border-color: var(--color-fill-accent);
}

.makes-btn:disabled {
  opacity: 0.35;
  pointer-events: none;
}

.completed-rounds {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.completed-rounds__title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-muted);
}

.round-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  overflow: hidden;
}

.round-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  min-height: var(--touch-min);
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.round-row:last-child {
  border-bottom: none;
}

.round-row:active {
  background: var(--color-surface-sunken);
}

.round-row__idx {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text-muted);
  min-width: 26px;
}

.round-row__spot {
  flex: 1;
  font-weight: 600;
}

.round-row__score {
  font-weight: 800;
  color: var(--color-accent-text);
}

/* 已完成清單每列右側的可點提示（鉛筆），讓「點一下可修改」更明顯 */
.round-row__edit-icon {
  flex: 0 0 auto;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* 菜單全部輪次完成後的完成面板（取代輸入區，§4）：不再自動結算，
   等使用者確認無誤後自己按「結束並結算」。 */
.completion-panel {
  align-items: center;
  text-align: center;
  gap: var(--space-3);
}

.completion-panel__title {
  font-size: var(--text-lg);
  font-weight: 800;
}

.completion-panel__hint {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.completion-panel__finish {
  width: 100%;
}

.active-footer {
  display: flex;
  gap: var(--space-3);
  position: sticky;
  bottom: 0;
}

.active-footer .btn--primary {
  flex: 1;
}

/* ---------------------------------------------------------------------- */
/* Sheet（實投數 / 修改輪次）＋ Toast                                       */
/* ---------------------------------------------------------------------- */

.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(32, 26, 21, 0.4);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: backdrop-in var(--transition-fast);
}

@keyframes backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.sheet {
  width: 100%;
  max-width: 480px;
  background: var(--color-surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: var(--space-5) var(--space-4) calc(var(--space-6) + var(--safe-bottom));
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  animation: sheet-in var(--transition-med);
  max-height: 80dvh;
  overflow-y: auto;
}

@keyframes sheet-in {
  from {
    transform: translateY(24px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

.sheet__title {
  font-size: var(--text-lg);
  font-weight: 800;
  text-align: center;
}

/* 模式說明（menu.focus）：接在標題下，讓人在選簡易／完整之前先知道這個模式在做什麼。
   跟 .sheet__sub 同樣以負 margin 收緊與標題的距離，兩者並存時（挑戰菜單）依序疊放。 */
.sheet__focus {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
  margin-top: calc(var(--space-2) * -1);
  text-wrap: pretty;
}

.sheet__sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
  margin-top: calc(var(--space-2) * -1);
}

/* 列式排版：每列 5 顆、末列不足 5 顆置中，同 .makes-grid 邏輯（SPEC M4.3 §1）。 */
.stepper-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.stepper-grid__row {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
}

/* 圓形數字鈕（比照 .makes-btn／.seq-ball），被壓縮時同樣鎖正圓；
   同樣 flex 置中＋清 UA padding＋nowrap，避免兩位數換行、數字偏心 */
.stepper-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  white-space: nowrap;
  width: 48px;
  height: auto;
  aspect-ratio: 1;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  background: var(--color-surface-sunken);
  border: 1.5px solid var(--color-border);
  font-weight: 700;
}

.stepper-btn.is-active {
  background: var(--color-fill-accent);
  color: var(--color-on-fill);
  border-color: var(--color-fill-accent);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabbar-height) + var(--safe-bottom) + var(--space-4));
  transform: translate(-50%, 10px);
  opacity: 0;
  background: var(--color-text);
  color: #fff;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: var(--text-sm);
  box-shadow: var(--shadow-md);
  z-index: 80;
  transition: opacity var(--transition-med), transform var(--transition-med);
  pointer-events: none;
}

.toast--show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* 深色：toast 背景直接沿用 --color-text 在深色主題下會變亮色，白字會讀不到，
   改用比 surface 更淺一階的底＋一般文字色，維持「浮起的提示條」感 */
:root[data-theme="dark"] .toast {
  background: var(--color-surface-sunken);
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
}

/* ---------------------------------------------------------------------- */
/* 本節統計（練球結束頁 / 紀錄詳情共用）                                     */
/* ---------------------------------------------------------------------- */

.summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.summary__header {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.summary__header h2 {
  font-size: var(--text-xl);
  font-weight: 800;
}

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

.summary__meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.summary__totals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-3);
}

.summary__total {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.summary__total-num {
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.summary__total-num--accent {
  color: var(--color-accent-text);
}

.summary__total-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 600;
}

.type-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.type-row {
  display: grid;
  grid-template-columns: 3.5em 4em 3em 1fr;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
}

.type-row--empty {
  display: block;
  text-align: center;
  color: var(--color-text-muted);
  padding: var(--space-5);
}

.type-row__label {
  font-weight: 800;
}

.type-row__score {
  color: var(--color-text-muted);
}

.type-row__pct {
  font-weight: 800;
}

.stat-diff {
  justify-self: end;
  min-width: 0;
  max-width: 100%;
  font-size: var(--text-xs);
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat-diff--up {
  color: var(--color-success);
}

.stat-diff--down {
  color: var(--color-danger);
}

.stat-diff--flat,
.stat-diff--none {
  color: var(--color-text-muted);
}

.summary__court {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  padding: var(--space-3);
}

.backup-nudge {
  transition: opacity var(--transition-med);
}

.backup-nudge--leaving {
  opacity: 0;
}

.backup-nudge__row {
  background: var(--color-surface-sunken);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.backup-nudge__num {
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--color-accent-text);
  line-height: 1;
  flex-shrink: 0;
}

.backup-nudge__title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}

.backup-nudge__sub {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 2px 0 0;
}

.backup-nudge__btn {
  flex-shrink: 0;
  min-height: 40px;
  padding: 0 var(--space-4);
  font-size: var(--text-sm);
}

.backup-nudge__dismiss {
  text-align: center;
}

.backup-nudge__dismiss button {
  border: none;
  background: none;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  padding: var(--space-1);
  cursor: pointer;
}

.backup-nudge__done {
  font-size: var(--text-sm);
  color: var(--color-success);
  margin: 0;
}

/* ---------------------------------------------------------------------- */
/* 加到主畫面引導（SPEC_M14 §4.2b）                                         */
/*                                                                        */
/* 與 backup-nudge 同一個家族（結算頁的提醒卡），但這張用 accent-tint 打底、    */
/* 不畫框線——它是「建議你做一件對自己好的事」，不是警告，所以不用 danger 色，    */
/* 也不做成跟資料統計卡一樣的白底卡片（避免看起來像又一區數據）。              */
/* ---------------------------------------------------------------------- */

.save-card {
  background: var(--color-accent-tint);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: opacity var(--transition-med);
}

.save-card--leaving {
  opacity: 0;
}

.save-card__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.save-card__icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  color: var(--color-accent-text);
}

.save-card__icon svg {
  width: 100%;
  height: 100%;
}

.save-card__title {
  font-size: var(--text-md);
  font-weight: 800;
  color: var(--color-text);
}

.save-card__sub {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* 操作步驟另起一塊白底：它是「照著做」的指令，跟上面的說明理由分開讀 */
.save-card__how {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
}

.save-card__dismiss {
  text-align: center;
}

.save-card__dismiss button {
  border: none;
  background: none;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  padding: var(--space-1);
  cursor: pointer;
}

.summary__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.summary__actions-share {
  width: 100%;
}

.summary__actions-row {
  display: flex;
  gap: var(--space-3);
}

.summary__actions-row .btn {
  flex: 1;
}

/* ---------------------------------------------------------------------- */
/* 紀錄分頁                                                                */
/* ---------------------------------------------------------------------- */

.history-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.history-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  min-height: var(--touch-min);
  cursor: pointer;
  transition: transform var(--transition-fast);
}

.history-row:active {
  transform: scale(0.985);
}

.history-row__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 64px;
  padding-right: var(--space-3);
  border-right: 1px solid var(--color-border);
}

.history-row__day {
  font-weight: 800;
  font-size: var(--text-sm);
  white-space: nowrap;
}

.history-row__time {
  font-size: 11px;
  color: var(--color-text-muted);
}

.history-row__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.history-row__mode {
  font-weight: 700;
}

.history-row__score {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.history-row__duration {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------- */
/* 空狀態                                                                  */
/* ---------------------------------------------------------------------- */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-4);
  color: var(--color-text-muted);
}

.empty-state__icon {
  margin-bottom: var(--space-2);
  opacity: 0.8;
}

.empty-state__title {
  font-weight: 800;
  font-size: var(--text-lg);
  color: var(--color-text);
}

.empty-state__desc {
  font-size: var(--text-sm);
  max-width: 30em;
}

/* ---------------------------------------------------------------------- */
/* 設定分頁                                                                */
/* ---------------------------------------------------------------------- */

.settings-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.settings-card--danger {
  border-color: var(--color-danger-tint);
  background: var(--color-danger-tint);
}

.settings-card__title {
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.settings-card__row {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* 「建議加到主畫面」那行（SPEC_M14 §4.2c）：多行說明，要有行高才讀得下去 */
.settings-card__row--hint {
  line-height: var(--leading-normal);
}

.settings-card__row--hint strong {
  color: var(--color-text);
}

.settings-storage-note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

.settings-storage-note strong {
  color: var(--color-text);
}

.settings-persist {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.settings-persist__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-success);
}

.settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.settings-actions .btn {
  flex: 1;
  min-width: 120px;
  padding: 0 var(--space-3);
}

.settings-clear-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.text-input {
  flex: 1;
  min-width: 0;
  min-height: var(--touch-min);
  padding: 0 var(--space-4);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border-strong);
  background: var(--color-surface);
}

.text-input:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.settings-footer {
  text-align: center;
  padding: var(--space-5) var(--space-3) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.settings-footer__app {
  font-weight: 700;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.settings-footer__note {
  font-size: 11px;
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

.settings-toast {
  background: var(--color-success-tint);
  color: var(--color-success);
  font-weight: 700;
  font-size: var(--text-sm);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
}

/* ---------------------------------------------------------------------- */
/* 共用：小節標題 / variant tag                                            */
/* ---------------------------------------------------------------------- */

.section-title {
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* 雜誌欄目記號：小節標題前的方塊眉標，全域套用所有 .section-title */
.section-title::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 1px;
  background: var(--color-accent);
  transform: translateY(-1px);
}

.variant-tag {
  display: inline-flex;
  align-items: center;
  margin-left: var(--space-2);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-accent-tint);
  color: var(--color-accent-text);
  font-size: var(--text-xs);
  font-weight: 700;
  vertical-align: middle;
}

.variant-tag--sm {
  font-size: 10px;
  padding: 1px 6px;
  margin-left: var(--space-1);
}

/* 紀錄列表：標籤獨立一行（固定顯示在模式名稱下方、命中率上方），
   一行內可並排多顆 tag（完整＋達標）。 */
.history-row__tags {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.history-row__tags .variant-tag {
  margin-left: 0;
}

/* 紀錄列表：挑戰達標標記（只出現在挑戰菜單的完整版紀錄） */
.variant-tag--pass {
  background: var(--color-success-tint);
  color: var(--color-success);
}

.variant-tag--miss {
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
}

.summary__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* ---------------------------------------------------------------------- */
/* 首頁：挑戰主視覺 Hero Card                                              */
/* ---------------------------------------------------------------------- */

.hero-card {
  position: relative;
  background: linear-gradient(160deg, var(--color-surface) 0%, var(--color-accent-tint) 130%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* 雜誌刊號感：右上角超大關卡數字浮水印，氛圍用、永遠壓在內容下層 */
.hero-card__bignum {
  position: absolute;
  top: 4px;
  right: 16px;
  z-index: 0;
  font-size: 84px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--color-accent-tint);
  user-select: none;
}

.hero-card > :not(.hero-card__bignum) {
  position: relative;
  z-index: 1;
}

.hero-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hero-card__tier-group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.hero-card__tier {
  font-size: var(--text-xs);
  font-weight: 800;
  color: var(--color-accent-text);
  background: var(--color-surface);
  border: 1px solid var(--color-accent);
  padding: 2px var(--space-3);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

/* 關卡星數：乾淨為準，只在拿到至少 1 顆星時渲染（見 session.js renderHeroCard） */
.hero-card__stars {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text-muted);
}

.hero-card__passed {
  font-size: var(--text-xs);
  font-weight: 800;
  color: var(--color-success);
}

.hero-card__name {
  /* 窄螢幕（375-390px）縮字級，讓「人名＋中文詞」盡量一行放得下人名部分，
     中文詞（不可斷詞內）需要換行時完整移到下一行，不會只剩單字孤字。 */
  font-size: clamp(24px, 6.8vw, var(--text-2xl));
  font-weight: 800;
  letter-spacing: -0.01em;
  word-break: keep-all;
}

/* 生涯數據面板「夜幕數據面板」：深藍面板內嵌在米白 hero 卡裡，
   呼應品牌夜幕深藍（favicon / OG 圖夜空同色系）。取代舊版米色 pill 列。 */
/* 生涯數據面板：預設收合的 <details>（UX 走查——第一屏讓位給 SHOT 鈕），
   summary 是一行低調的刊物欄目標題，開合狀態不持久化。 */
.career-details {
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
}

.career-details__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  cursor: pointer;
  list-style: none;
}

.career-details__summary::-webkit-details-marker {
  display: none;
}

.career-details__marker {
  color: var(--color-text-faint);
  transition: transform var(--transition-fast);
}

.career-details[open] .career-details__marker {
  transform: rotate(90deg);
}

.career-panel {
  margin-top: var(--space-2);
  background: var(--color-night);
  border: 1px solid var(--color-night-line);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.career-panel__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-1);
}

.career-panel__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  text-align: center;
}

.career-panel__stat-value {
  font-size: var(--text-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-on-night);
}

.career-panel__stat-value.is-accent {
  color: var(--color-accent-on-night);
}

.career-panel__stat-label {
  margin-top: 2px;
  font-size: var(--text-xs);
  color: var(--color-on-night-muted);
}

.career-panel__fact {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  padding-left: var(--space-2);
  border-top: 1px solid var(--color-night-line);
  border-left: 3px solid var(--color-accent);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-on-night);
}

/* 375px 上下：4 欄夠窄時，標籤字級／字距略縮，仍不低於 11px、不換行。 */
@media (max-width: 380px) {
  .career-panel__stat-label {
    font-size: 11px;
    letter-spacing: -0.01em;
  }
}

.hero-card__player {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-muted);
}

.hero-card__status {
  color: var(--color-text-muted);
  font-weight: 600;
}

.hero-card__focus {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* 底部一列：左「個人最佳」＋右圓形 CTA，差距進度條（gapHtml）維持在這一列之上、滿版不動 */
.hero-card__bottom-row {
  margin-top: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.hero-card__best {
  flex: 1;
  min-width: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.hero-card__best strong {
  color: var(--color-text);
  font-size: var(--text-md);
}

.hero-card__best-date {
  font-weight: 500;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.hero-card__gap-empty {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* 簽名元素：圓形「開始挑戰」按鈕，取代舊版滿版 CTA（球場中圈語彙的外圈細環見 ::after） */
.hero-card__cta-circle {
  position: relative;
  flex: 0 0 auto;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--color-fill-accent);
  color: var(--color-on-fill);
  /* 單字口令「SHOT」：字距拉開往右多出一格視覺寬，用 text-indent 補回置中 */
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  line-height: 1;
  transition: transform var(--transition-fast), background var(--transition-fast);
}

.hero-card__cta-circle::after {
  content: '';
  position: absolute;
  inset: -7px;
  border: 1.5px solid var(--color-accent);
  opacity: 0.3;
  border-radius: 50%;
}

.hero-card__cta-circle:active {
  transform: scale(0.96);
  background: var(--color-accent-dark);
}

/* 籃球條紋：絕對定位鋪滿圓鈕，z 序在「SHOT」文字之下（SPEC M4.2 §2）。
   四條線用 SVG 座標幾何保證落在圓內，不需要另外裁切。 */
.hero-card__cta-stripes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.hero-card__cta-text {
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------------------- */
/* 首頁：快速重開（極速啟動，1 點直開上次菜單＋變體）                          */
/* ---------------------------------------------------------------------- */

.quick-restart {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  width: 100%;
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast);
}

.quick-restart:active {
  transform: scale(0.985);
}

.quick-restart__icon {
  flex: 0 0 auto;
  color: var(--color-accent-text);
  font-weight: 800;
}

.quick-restart__label {
  flex: 1;
  min-width: 0;
  text-align: left;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-restart__label strong {
  color: var(--color-text);
}

/* ---------------------------------------------------------------------- */
/* passRule 迷你進度條（Hero / 即時挑戰進度共用）                            */
/* ---------------------------------------------------------------------- */

.rule-bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.rule-bar__label {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text-muted);
  margin-bottom: 3px;
}

.rule-bar__label span {
  white-space: nowrap;
}

.rule-bar__track {
  position: relative;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-surface-sunken);
  overflow: visible;
}

.rule-bar__fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--color-heat-warm);
  transition: width var(--transition-med);
}

.rule-bar.is-met .rule-bar__fill {
  background: var(--color-success);
}

.rule-bar__need {
  position: absolute;
  top: -2px;
  width: 2px;
  height: 12px;
  background: var(--color-text);
  opacity: 0.5;
}

/* M5 §2：rule bar 下的達標預估小字（還需 X 球／已達標／已無法達標） */
.rule-bar__forecast {
  margin-top: 4px;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.rule-bar__forecast.is-success {
  color: var(--color-success);
  font-weight: 700;
}

.rule-bar__forecast.is-danger {
  color: var(--color-danger);
  font-weight: 700;
}

.live-progress {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* M5 §2：整體不可達標橫幅——低調紙感卡片＋danger 色標題文字，不做成警告框
   （這個 App 的品味不是 alert 風）。一列兩顆半寬鈕，不新增全寬主鈕（M4.4）。 */
.forecast-banner {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.forecast-banner__title {
  font-size: var(--text-md);
  font-weight: 800;
  color: var(--color-danger);
}

.forecast-banner__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.forecast-banner__actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-1);
}

.forecast-banner__actions .btn {
  flex: 1;
}

/* ---------------------------------------------------------------------- */
/* 首頁：挑戰階梯列                                                        */
/* ---------------------------------------------------------------------- */

/* 從射手檔案點「在 App 裡打開這一關」但還沒解鎖時的說明（SPEC_M19 §1）。
   不做成 accent 滿版的警告卡——它不是錯誤，是「這一關在前面等你」。 */
.focus-note {
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.focus-note__kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--color-accent-text);
}

.focus-note__body {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text);
}

.focus-note__hint {
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

.ladder-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ladder-scroll {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: var(--space-1);
  scrollbar-width: thin;
}

/* 迷你刊號卡：右上角浮水印大數字（呼應 .hero-card__bignum 的雜誌刊號語言）＋
   左下角錨定的內容。狀態靠浮水印色與邊框表達。 */
.ladder-tile {
  flex: 0 0 auto;
  width: 84px;
  min-height: 104px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-align: left;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.ladder-tile:active {
  transform: scale(0.96);
}

.ladder-tile.is-current {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent-tint), var(--shadow-sm);
}

/* 從射手檔案指過來的那一關（SPEC_M19）：用虛線框而不是實線——它不是「你現在在這」
   （那是 is-current 的實線 accent 框），只是「你剛剛在讀的是這一關」。 */
.ladder-tile.is-focus {
  border-style: dashed;
  border-color: var(--color-accent);
}

.ladder-tile.is-passed {
  background: var(--color-surface);
  border-color: var(--color-success);
}

.ladder-tile.is-locked {
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
}

/* 浮水印關卡數字：氛圍用、永遠壓在內容下層 */
.ladder-tile__tier {
  position: absolute;
  top: 2px;
  right: 6px;
  z-index: 0;
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--color-border);
  user-select: none;
}

.ladder-tile.is-current .ladder-tile__tier {
  color: var(--color-accent-tint);
}

.ladder-tile.is-passed .ladder-tile__tier {
  color: var(--color-success-tint);
}

.ladder-tile.is-locked .ladder-tile__tier {
  color: var(--color-border);
}

.ladder-tile__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: var(--space-1);
  text-align: left;
}

.ladder-tile__name {
  font-size: 13px;
  font-weight: 700;
  line-height: var(--leading-tight);
  text-align: left;
}

/* 已通過徽章：左上角小圓（右上讓給浮水印） */
.ladder-tile__check {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 1;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-success);
  color: var(--color-on-fill);
  font-size: 10px;
  font-weight: 800;
}

.ladder-tile__lock {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.lock-icon {
  width: 12px;
  height: 12px;
  color: var(--color-text-faint);
}

/* 鎖定格的解鎖條件：一條件一行（雙條件菜單如 Curry 試煉不再擠成一團長句） */
.ladder-tile__cond {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 11px;
  line-height: 1.3;
  text-align: left;
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------------------- */
/* 三星制：共用星列（.star-row）——階梯磁磚 / hero card / 結算頁挑戰結果共用   */
/* ---------------------------------------------------------------------- */

/* 未拿到的星維持同一個 ★ 字符、只是用邊框色畫成輪廓感，不畫 ☆ 避免字重跳動 */
.star-row {
  display: inline-flex;
  gap: 1px;
  line-height: 1;
}

.star-row .star {
  font-size: 10px;
  color: var(--color-border-strong);
}

.star-row .star.is-on {
  color: var(--color-accent-text);
}

.star-row .star.is-on.is-on-passed {
  color: var(--color-success);
}

/* 階梯磁磚上的星列：小尺寸、不與浮水印大數字搶版面 */
.ladder-tile__stars {
  margin-top: 1px;
}

/* ---------------------------------------------------------------------- */
/* 首頁：非挑戰小卡（自由練習 / 綜合巡迴）                                    */
/* ---------------------------------------------------------------------- */

.secondary-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.secondary-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.secondary-card {
  text-align: left;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.secondary-card__name {
  font-size: var(--text-md);
  font-weight: 700;
}

.secondary-card__focus {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------------------- */
/* 變體選擇 Sheet（簡易 / 完整）                                            */
/* ---------------------------------------------------------------------- */

/* 並排方卡（取代舊版全寬長條），比照 SHOT 圓形 CTA 的質感：外圈細 ring＋按壓 scale */
.variant-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.variant-option {
  position: relative;
  min-height: 108px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--color-surface-sunken);
  border: 1.5px solid var(--color-border);
  text-align: center;
  transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

/* 外圈 ring，呼應 .hero-card__cta-circle::after */
.variant-option::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: calc(var(--radius-lg) - 3px);
  border: 1.5px solid var(--color-accent);
  opacity: 0.16;
  pointer-events: none;
}

.variant-option:active {
  border-color: var(--color-accent);
  background: var(--color-accent-tint);
  transform: scale(0.97);
}

.variant-option__name {
  font-weight: 800;
  font-size: var(--text-lg);
}

.variant-option__meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* 單一選項（挑戰的「開始挑戰」、自由練習）撐滿整列；雙欄 grid 只留給簡易／完整並排。 */
.variant-option--solo {
  grid-column: 1 / -1;
  min-height: 92px;
}

/* 變體 sheet 的說明區：整段散文改成小卡結構（眉標＋內文），質感與可掃讀性
   都比三段連續小字好（使用者回饋：說明字太多、不好讀）。 */
.sheet-note {
  background: var(--color-surface-sunken);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-sm) var(--radius-md) var(--radius-md) var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.sheet-note__title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--color-accent-text);
}

.sheet-note__text {
  font-size: var(--text-xs);
  line-height: 1.7;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.sheet-note__list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--color-text-muted);
}

.sheet-note__list li::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  vertical-align: 2px;
}


/* accent 在 sunken 底只有 3.12:1（11px 連結，AA 要 4.5）→ accent-dark 5.4:1 */
.sheet-note__link{
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-accent-text);
  white-space: nowrap;
}

/* 「三星目標」卡的星等列（.star-row 已被三星制星列用走，這裡另開 sheet-goals）：
   星號欄固定寬，三行內文左緣才會對齊（★／★★／★★★ 寬度不同，行內排版會參差）。 */
.sheet-goals {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sheet-goals__row {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 6px;
  font-size: var(--text-xs);
  line-height: 1.7;
  color: var(--color-text-muted);
}


/* ★ 欄同理：它標的是第幾顆星，是資訊不是裝飾 */
.sheet-goals__stars{
  color: var(--color-accent-text);
  font-weight: 700;
  letter-spacing: 1px;
}

.sheet__honesty-line {
  font-size: var(--text-xs);
  font-weight: 700;
  text-align: center;
  color: var(--color-accent-text);
}

/* ---------------------------------------------------------------------- */
/* 鬼影對照（SPEC_M20 §2）：練習中跟個人最佳的同期比                          */
/*                                                                        */
/* 刻意做得比連莊 rail 安靜——連莊是「現在正在發生的事」（會跳、會斷），       */
/* 鬼影是背景參照，給一眼掃過的資訊量就好，不要跟挑戰進度條搶注意力。          */
/* ---------------------------------------------------------------------- */

.ghost-rail {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
}

.ghost-rail__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}

.ghost-rail__label {
  font-size: 11px;
  color: var(--color-text-muted);
}

.ghost-rail__cmp {
  font-size: var(--text-sm);
  color: var(--color-text);
}

.ghost-rail__cmp strong {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* 差距用「顏色＋正負號」雙重編碼：色盲使用者只看符號也讀得出領先或落後 */
.ghost-rail__delta {
  flex-shrink: 0;
  font-size: var(--text-sm);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-surface-sunken);
}

.ghost-rail__delta.is-ahead {
  color: var(--color-success);
  background: var(--color-success-tint);
}

.ghost-rail__delta.is-behind {
  color: var(--color-danger-text);
  background: var(--color-danger-tint);
}

/* ---------------------------------------------------------------------- */
/* 連莊 rail（練習中）＋ pip（SPEC_M14 §1.3）                                */
/*                                                                        */
/* pip 刻意用小方塊而不是圓點：球場圖的熱區點與三星都已經是圓／星，方塊才不會   */
/* 被誤讀成同一套語彙——它要像紙上一格一格的劃記。                            */
/* accent 只在真的有連莊時出現（is-live）；「開莊門檻」狀態故意留在灰階，       */
/* 免得一開節就有一個橘色數字在慶祝還沒發生的事。                             */
/* ---------------------------------------------------------------------- */

.streak-rail {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-sunken);
  border-radius: var(--radius-md);
}

.streak-rail.is-live {
  background: var(--color-accent-tint);
}

.streak-rail__num {
  font-size: var(--text-xl);
  font-weight: 800;
  line-height: 1;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.streak-rail.is-live .streak-rail__num {
  color: var(--color-accent-text);
}

.streak-rail__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}

.streak-rail__label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text);
}

.streak-rail__hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.streak-rail__hint strong {
  font-weight: 800;
  color: var(--color-text);
}

.streak-pips {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 46%;
}

.streak-pip {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  border: 1px solid var(--color-border-strong);
  flex-shrink: 0;
}

.streak-pip.is-on {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

/* 下一輪的位置：虛線框＝「還沒投」，讓 rail 有一個往前的空格 */
.streak-pip--next {
  border-style: dashed;
  border-color: var(--color-text-faint);
}

.streak-pips__clip {
  font-size: 10px;
  line-height: 1;
  color: var(--color-text-faint);
}

/* ---------------------------------------------------------------------- */
/* 快速／逐球輸入切換 ＋ 逐球球圖                                            */
/* ---------------------------------------------------------------------- */

.input-mode-toggle {
  display: flex;
  align-self: center;
  background: var(--color-surface-sunken);
  border-radius: var(--radius-full);
  padding: 3px;
  gap: 2px;
}

.input-mode-btn {
  min-height: 36px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-muted);
  transition: all var(--transition-fast);
}

.input-mode-btn.is-active {
  background: var(--color-fill-accent);
  color: var(--color-on-fill);
  box-shadow: var(--shadow-sm);
}

/* 快速／逐球：切換下方一行說明，依模式即時更新（§5） */
.input-mode-hint {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.seq-balls {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: center;
}

.seq-ball-row {
  display: flex;
  gap: var(--space-2);
}

.seq-ball {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  white-space: nowrap;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  border-radius: 50%;
  background: var(--color-surface-sunken);
  border: 2px solid var(--color-border-strong);
  font-weight: 800;
  color: var(--color-text-muted);
  transition: transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.seq-ball:active {
  transform: scale(0.9);
}

.seq-ball.is-made {
  background: var(--color-fill-accent);
  border-color: var(--color-accent-text);
  color: var(--color-on-fill);
}

.seq-summary {
  text-align: center;
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--color-text-muted);
}

.seq-summary strong {
  color: var(--color-accent-text);
  font-size: var(--text-lg);
}

.round-row__seq-tag {
  margin-left: var(--space-2);
  font-size: 10px;
  font-weight: 700;
  color: var(--color-accent-text);
  background: var(--color-accent-tint);
  padding: 1px 6px;
  border-radius: var(--radius-full);
}

/* ---------------------------------------------------------------------- */
/* 本節統計：輪次曲線                                                      */
/* ---------------------------------------------------------------------- */

.curve-section,
.split-section,
.challenge-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.curve-chart {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  overflow-x: auto;
  padding-top: var(--space-4);
  min-height: 120px;
}

.curve-bar {
  flex: 0 0 auto;
  width: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.curve-bar__track {
  width: 14px;
  height: 72px;
  display: flex;
  align-items: flex-end;
  background: var(--color-surface-sunken);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.curve-bar__fill {
  width: 100%;
  background: var(--color-accent);
  border-radius: var(--radius-full);
  transition: height var(--transition-med);
}

.curve-bar__pct {
  font-size: 10px;
  font-weight: 700;
  color: var(--color-text-muted);
}

.curve-bar__idx {
  font-size: 10px;
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------------------- */
/* 本節統計：前後段對比                                                    */
/* ---------------------------------------------------------------------- */

.split-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.split-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: var(--color-surface-sunken);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.split-col__label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 700;
}

.split-col__pct {
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--color-accent-text);
}

.split-col__score {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------------------- */
/* 本節統計：連莊卡（SPEC_M14 §1.3）                                        */
/*                                                                        */
/* 版面思路同 hero 卡與徽章數字盤：讓數字自己當主角，說明退成旁邊的小字。      */
/* 右欄（pip ＋ 生涯最佳／門檻）靠右對齊，與左邊的大數字形成一條可讀的軸線。    */
/* ---------------------------------------------------------------------- */

.streak-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.streak-card__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

/* 副標與門檻行都用 muted 而不是 faint：深色模式實測 faint 在 11〜12px 只有 4.06
   對比（AA 小字要 4.5），而這兩行是「第一次看懂連莊是什麼」的關鍵說明，不是裝飾。
   層級改用字級與字重拉開，不用犧牲可讀性換對比度。 */
.streak-card__sub {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* 底色用 accent-dark：11px 白字壓在 accent 上只有 3.6:1，壓在 accent-dark 上是 5.2:1。
   （全站的主要按鈕維持 accent——那是 16px 粗體＋大點擊區的既有樣式，不在這裡改。） */
.streak-card__pb {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--color-on-fill);
  background: var(--color-fill-accent);
  border-radius: var(--radius-full);
  padding: 2px var(--space-2);
}

/* 大數字與右欄「垂直居中對齊」而不是對齊基線：右欄是兩行小字，基線對齊會讓
   整張卡下重上輕（大數字下方留一片空白，小字卻掉到它下面去）。 */
.streak-card__body {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* 數字與單位自己一組，內部才對齊基線（「輪」要坐在 4 的腳下，不是它的正中間） */
.streak-card__value {
  display: flex;
  align-items: baseline;
  gap: 3px;
  flex-shrink: 0;
}

.streak-card__num {
  font-size: var(--text-3xl);
  font-weight: 800;
  line-height: 0.9;
  color: var(--color-accent-text);
  font-variant-numeric: tabular-nums;
}

/* 0 輪不塗橘色：沒發生的事不慶祝（同 rail 的 is-idle 邏輯） */
.streak-card__num.is-zero {
  color: var(--color-text-faint);
}

.streak-card__unit {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.streak-card__right {
  margin-left: auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.streak-card__right .streak-pips {
  max-width: 100%;
}

/* 生涯最佳與門檻是刻意排的兩行（不是同一行擠到自動換行）：層級不同，字級也不同 */
.streak-card__meta {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text-muted);
  text-align: right;
}

/* 門檻說明改成整卡寬的註腳（原本擠在右欄，一行縮寫看不懂——見 streakBarNote 的
   註記）：一條細線隔開、置左、給它足夠的寬度把完整句子講完。 */
.streak-card__bar {
  margin-top: var(--space-1);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  text-align: left; /* 明寫：它從右欄搬出來，別讓任何祖先的對齊殘留 */
}

.streak-card__bar strong {
  font-weight: 800;
  color: var(--color-text);
}

/* ---------------------------------------------------------------------- */
/* 本節統計：可收合分析區（SPEC_M14 §2.2）                                  */
/*                                                                        */
/* 曲線與前後段是「回頭分析」用的，預設收起來，把上半頁讓給挑戰結果與連莊。     */
/* summary 的預設 marker 各家瀏覽器長得不一樣，一律關掉、自己畫一個轉角箭頭。   */
/* ---------------------------------------------------------------------- */

.summary-fold {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.summary-fold__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  padding: 0 var(--space-4);
  cursor: pointer;
  list-style: none;
}

.summary-fold__head::-webkit-details-marker {
  display: none;
}

.summary-fold__title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
}

.summary-fold__hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.summary-fold__chev {
  margin-left: auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--color-text-faint);
  border-bottom: 2px solid var(--color-text-faint);
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform var(--transition-fast);
}

.summary-fold[open] .summary-fold__chev {
  transform: rotate(-135deg);
}

.summary-fold__body {
  padding: 0 var(--space-4) var(--space-4);
}

/* ---------------------------------------------------------------------- */
/* 本節統計：射手小語（SPEC_M14 §2.3）                                      */
/*                                                                        */
/* 刻意不是卡片：周圍全是 surface 卡，這一段留在頁面底色上、只用一條細線分隔，   */
/* 才有雜誌「編按」的節奏感，也讓結算頁在往下捲時有一個明顯的段落換氣。        */
/* ---------------------------------------------------------------------- */

.shooter-note {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* accent-dark 而不是 accent：11px 的 accent 在淺色底只有 3.4:1（AA 小字要 4.5），
   accent-dark 是 5.19:1；深色模式的 accent-dark 是 #E8590C，同樣過關。 */
.shooter-note__kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--color-accent-text);
}

.shooter-note__fact {
  font-size: var(--text-md);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--color-text);
}

.shooter-note__body {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

/* 出處是可點的連結，不能比周圍的說明文字更難讀（faint 在深色模式只有 4.4） */
.shooter-note__src {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------------------------------------------------------------------- */
/* 本節統計：挑戰結果區                                                    */
/* ---------------------------------------------------------------------- */

.rule-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* 三星狀態列：本關目前累積的星星（不隨這次是否過關而改變顏色，見 renderChallengeSection） */
.challenge-stars {
  display: flex;
  justify-content: center;
}

.challenge-stars .star {
  font-size: 14px;
}

.rule-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-surface-sunken);
  font-size: var(--text-sm);
}

.rule-row.is-met {
  background: var(--color-success-tint);
}

.rule-row.is-unmet {
  background: var(--color-danger-tint);
}

.rule-row__icon {
  font-weight: 800;
}

.rule-row.is-met .rule-row__icon {
  color: var(--color-success);
}

.rule-row.is-unmet .rule-row__icon {
  color: var(--color-danger);
}

.rule-row__type {
  font-weight: 800;
  min-width: 3.5em;
}

.rule-row__value {
  flex: 1;
  min-width: 0;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rule-row__gap {
  flex: 0 0 auto;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-danger);
  white-space: nowrap;
}

.challenge-note {
  font-size: var(--text-sm);
  font-weight: 700;
  text-align: center;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
}

.challenge-note--neutral {
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
  font-weight: 600;
}

/* 節奏/時長不合格：中性徽章＋原因說明，不畫 ✓ 也不用 danger（UX 走查） */
.challenge-note--ineligible {
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
  font-weight: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
}

.ineligible-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 700;
}

.challenge-note__desc {
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: var(--leading-normal);
}

.rule-row--ineligible {
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
}

/* 誠實機制 2.0 詢問卡：節奏 30〜60 秒、未回答過時在結算頁問一次。
   中性紙感卡片，不做警告框；「不列入」是較中性的預設選項。 */
.pace-ask {
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.pace-ask__text {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text);
}

.pace-ask__actions {
  display: flex;
  gap: var(--space-2);
}

.pace-ask__actions .btn {
  flex: 1;
}

.challenge-note--pass {
  background: var(--color-success-tint);
  color: var(--color-success);
}

.challenge-note--fail {
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
}

.challenge-note--record {
  background: var(--color-accent-tint);
  color: var(--color-accent-text);
}

.retry-btn {
  align-self: center;
}

/* ---------------------------------------------------------------------- */
/* 自訂節：等級對照卡（純對照，不解鎖——free / world 結束頁與節詳情用）        */
/* ---------------------------------------------------------------------- */

.equivalent-card {
  background: var(--color-accent-tint);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.equivalent-card__headline {
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--color-accent-text);
}

.equivalent-card__note {
  font-size: 11px;
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------------------- */
/* 解鎖慶祝動效（尊重 prefers-reduced-motion）                              */
/* ---------------------------------------------------------------------- */

.celebration {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(32, 26, 21, 0.45);
  animation: backdrop-in var(--transition-med);
}

.confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.confetti-piece {
  position: absolute;
  top: -10px;
  width: 9px;
  height: 14px;
  opacity: 0.9;
  border-radius: 2px;
  animation: confetti-fall 2.2s linear 3 forwards;
}

@keyframes confetti-fall {
  from {
    transform: translateY(-10vh) rotate(0deg);
  }
  to {
    transform: translateY(110vh) rotate(360deg);
  }
}

.celebration__card {
  position: relative;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  box-shadow: var(--shadow-lg);
  text-align: center;
  max-width: 320px;
  animation: sheet-in var(--transition-med);
}

.celebration__title {
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--color-accent-text);
}

.celebration__next {
  margin-top: var(--space-2);
  font-weight: 700;
}

.celebration__badge {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.celebration__close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  line-height: 1;
  cursor: pointer;
}

.celebration__close:hover {
  background: var(--color-surface-alt, rgba(0, 0, 0, 0.06));
  color: var(--color-text);
}

.celebration__view {
  margin-top: var(--space-4);
  width: 100%;
}

/* ---------------------------------------------------------------------- */
/* 設定分頁：徽章 / 關於                                                   */
/* ---------------------------------------------------------------------- */

/* 徽章牆（進度獎章）：3 欄圓形獎章＋進度環圈，未獲得的看得到離下一顆多近；
   全破階梯（--capstone）跨滿整列當壓軸橫幅。 */
.badge-wall {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4) var(--space-2);
}

.badge-medal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
}

.badge-medal__disc {
  position: relative;
  width: 68px;
  height: 68px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 徽面暖光：surface → accent-tint 的放射漸層，深淺色主題都由 tokens 帶動 */
.badge-medal--earned .badge-medal__disc {
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, var(--color-surface), var(--color-accent-tint));
}

.badge-medal__ring {
  position: absolute;
  inset: 0;
}

.badge-medal__ring-track {
  stroke: var(--color-border);
}

.badge-medal__ring-fill {
  stroke: var(--color-accent);
  stroke-linecap: round;
}

.badge-medal__icon {
  width: 30px;
  height: 30px;
  color: var(--color-accent-text);
}

.badge-medal--locked .badge-medal__icon {
  color: var(--color-text-faint);
}

/* 刊號數字盤（SPEC_M12）：圓盤中央數字＋單位、下方家族小標記，取代原本的單一
   線條圖示。共用 class，成就條（44px）與徽章牆（68px）都用同一套，顏色靠外層
   .badge-medal--earned/--locked／.badge-strip__disc 帶動，字級由 badges.js 依
   圓盤直徑量測後用 inline style 帶進來（同尺寸下 17 顆共用一個字級）。 */
.badge-numeral {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}


/* 徽章盤面的門檻數字：18px 粗體仍在 AA 小字範圍（大字門檻是 18.66px） */
.badge-numeral__num{
  display: inline-flex;
  align-items: baseline;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--color-accent-text);
}

.badge-numeral__unit {
  font-weight: 700;
  opacity: 0.76;
  margin-left: 0.04em;
}

.badge-numeral__mark {
  display: flex;
  margin-top: 2px;
  color: var(--color-accent-text);
}

.badge-numeral__mark svg {
  display: block;
  width: 100%;
  height: 100%;
}

.badge-medal__disc .badge-numeral__mark {
  margin-top: 3px;
}

/* 未獲得的徽章：門檻數字是資訊（「還差多少」），家族小標記才是裝飾——
   兩者拆開，數字用 muted、標記維持 faint（SPEC_M18 §5 的分類原則）。 */
.badge-medal--locked .badge-numeral__num {
  color: var(--color-text-muted);
}

.badge-medal--locked .badge-numeral__mark {
  color: var(--color-text-faint);
}

.badge-strip__disc .badge-numeral__num,
.badge-strip__disc .badge-numeral__mark {
  color: var(--color-text-muted);
}

.badge-medal__name {
  font-size: var(--text-xs);
  font-weight: 800;
  color: var(--color-text);
  line-height: 1.4;
}

.badge-medal--locked .badge-medal__name {
  font-weight: 700;
  color: var(--color-text-muted);
}

.badge-medal__meta {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: -4px;
}

.badge-medal__meta--earned {
  color: var(--color-accent-text);
  font-weight: 700;
}

.badge-medal--capstone {
  grid-column: 1 / -1;
  flex-direction: row;
  justify-content: flex-start;
  gap: var(--space-4);
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
}

.badge-medal--capstone .badge-medal__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.badge-medal--capstone .badge-medal__name {
  font-size: var(--text-sm);
}

/* 練球頁成就條：顯示最接近到手的下一顆徽章＋迷你進度環，點擊跳統計頁徽章牆。 */
.badge-strip {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: var(--space-3);
  align-items: center;
  width: 100%;
  text-align: left;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  transition: transform var(--transition-fast);
}

.badge-strip:active {
  transform: scale(0.99);
}

.badge-strip__disc {
  position: relative;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.badge-strip__ring {
  position: absolute;
  inset: 0;
}

.badge-strip__ring-track {
  stroke: var(--color-border);
}

.badge-strip__ring-fill {
  stroke: var(--color-accent);
  stroke-linecap: round;
}

.badge-strip__icon {
  width: 20px;
  height: 20px;
  color: var(--color-text-muted);
}

.badge-strip__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.badge-strip__label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--color-accent-text);
}

.badge-strip__name {
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--color-text);
}

.badge-strip__meta {
  font-size: 11px;
  color: var(--color-text-muted);
}

.badge-strip__count {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.badge-strip__count::after {
  content: ' ›';
}

.about-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
}

.about-card__summary {
  font-size: var(--text-sm);
  font-weight: 800;
  cursor: pointer;
  min-height: var(--touch-min);
  display: flex;
  align-items: center;
}

.about-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.about-card__lead {
  font-weight: 700;
  color: var(--color-text);
}

.about-card__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-weight: 600;
}

.about-card__list li::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--color-accent);
  vertical-align: 2px;
}

/* 補充注記群：分隔線隔開主規則，行距放寬、段落間距拉開，長文不再糊成一片 */
.about-card__notes {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.about-card__note {
  font-size: var(--text-xs);
  line-height: 1.75;
  color: var(--color-text-muted);
}

/* 掛名菜單依據與出處（M3）：每一關一個區塊，名稱＋依據文字＋出處連結 */
.basis-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.basis-item__name {
  font-weight: 800;
  color: var(--color-text);
  font-size: var(--text-sm);
}

.basis-item__text {
  margin-top: 2px;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  text-wrap: pretty;
}

/* ---------------------------------------------------------------------- */
/* M2：統計分頁共用元件（區塊卡 / 期間切換 / chip 列 / 空狀態）                */
/* ---------------------------------------------------------------------- */

.page--stats {
  gap: var(--space-4);
}

/* M5.1：生涯累計卡（統計頁最上方，回答「總球數去哪看」；視覺沿用 .summary__totals 節奏） */
.lifetime-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.lifetime-card__totals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.lifetime-card__total {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.lifetime-card__num {
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.lifetime-card__num--accent {
  color: var(--color-accent-text);
}

.lifetime-card__label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 600;
}

.lifetime-card__meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: center;
}

/* 上籃另計（SPEC_M20 §1）：獨立一行、上方一條細線隔開——它跟上面那組數字不是
   同一個口徑，排在一起會被誤讀成「總投裡面有含」。 */
.lifetime-card__layup {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.lifetime-card__layup-label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text-muted);
}

/* M10：生涯累計卡標題列（左標題右分享鈕，語彙照 .goal-card__head／.goal-card__edit） */
.lifetime-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.lifetime-card__share {
  min-height: var(--touch-min);
  padding: 0 var(--space-3);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-accent-text);
  border-radius: var(--radius-full);
}

.lifetime-card__share:active {
  background: var(--color-accent-tint);
}

.stats-block {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.stats-subsection {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.stats-subtitle {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-muted);
}

.stats-empty-note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
  padding: var(--space-4) var(--space-2);
}

/* 期間切換（7天 / 30天 / 全部）：與 .input-mode-toggle 同款視覺，獨立命名避免耦合輸入模式元件 */
.segmented {
  display: flex;
  background: var(--color-surface-sunken);
  border-radius: var(--radius-full);
  padding: 3px;
  gap: 2px;
}

.segmented__btn {
  flex: 1;
  min-height: 40px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-muted);
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.segmented__btn.is-active {
  background: var(--color-surface);
  color: var(--color-accent-text);
  box-shadow: var(--shadow-sm);
}

/* ---------------------------------------------------------------------- */
/* M2：命中率趨勢／疲勞趨勢共用的手繪 SVG 折線                                */
/* ---------------------------------------------------------------------- */

.pct-chart {
  width: 100%;
  height: auto;
  display: block;
}

.pct-chart__line {
  stroke: var(--color-accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pct-chart__dot {
  fill: var(--color-accent);
  stroke: var(--color-surface);
  stroke-width: 1.5;
}

.pct-chart__grid-line {
  stroke: var(--color-border);
  stroke-width: 1;
}

.pct-chart__grid-label,
.pct-chart__x-label {
  font-size: 9px;
  fill: var(--color-text-muted);
}

.round-chart__band {
  opacity: 0.6;
}

.round-chart__band--early {
  fill: var(--color-accent-tint);
}

.round-chart__band--late {
  fill: var(--color-surface-sunken);
}

.fatigue-summary {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-muted);
  text-align: center;
}

/* M10：「單場逐輪」場次切換列（SPEC_M10 §1.1／§2.6） */
.fatigue-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.fatigue-nav__btn {
  flex-shrink: 0;
  width: var(--touch-min);
  height: var(--touch-min);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-surface-sunken);
  color: var(--color-text);
  font-size: var(--text-lg);
  font-weight: 700;
}

.fatigue-nav__btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.fatigue-nav__title {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
}

.fatigue-nav__count {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: right;
}

.stats-heat-summary {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
}

/* ---------------------------------------------------------------------- */
/* M2：熱力格日曆（GitHub 式，固定近 26 週，自身可橫向捲動）                    */
/* ---------------------------------------------------------------------- */

.heat-cal {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.heat-cal__scroll {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.heat-cal__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
}

.heat-cal__month {
  font-size: 9px;
  font-weight: 700;
  color: var(--color-text-muted);
  height: 12px;
}

.heat-cal__days {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.heat-cal__cell {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--color-surface-sunken);
}

.heat-cal__cell[data-level="1"] {
  background: color-mix(in srgb, var(--color-accent) 30%, var(--color-surface-sunken));
}

.heat-cal__cell[data-level="2"] {
  background: color-mix(in srgb, var(--color-accent) 62%, var(--color-surface-sunken));
}

.heat-cal__cell[data-level="3"] {
  background: var(--color-accent);
}

.heat-cal__cell.is-today {
  outline: 1px solid var(--color-accent-dark);
  outline-offset: -1px;
}

.heat-cal__cell.is-future {
  background: transparent;
}

.heat-cal__legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.heat-cal__legend-cell {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--color-surface-sunken);
}

.heat-cal__legend-cell[data-level="1"] {
  background: color-mix(in srgb, var(--color-accent) 30%, var(--color-surface-sunken));
}

.heat-cal__legend-cell[data-level="2"] {
  background: color-mix(in srgb, var(--color-accent) 62%, var(--color-surface-sunken));
}

.heat-cal__legend-cell[data-level="3"] {
  background: var(--color-accent);
}

/* ---------------------------------------------------------------------- */
/* M2：週目標卡                                                            */
/* ---------------------------------------------------------------------- */

.goal-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.goal-card--empty {
  align-items: center;
  text-align: center;
}

.goal-card__prompt {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: 600;
}

.goal-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.goal-card__title {
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.goal-card__edit {
  min-height: 40px;
  padding: 0 var(--space-3);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-accent-text);
  border-radius: var(--radius-full);
}

.goal-card__edit:active {
  background: var(--color-accent-tint);
}

.goal-card__track {
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--color-surface-sunken);
  overflow: hidden;
}

.goal-card__fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  transition: width var(--transition-med);
}

.goal-card.is-achieved .goal-card__fill {
  background: var(--color-success);
}

.goal-card__line {
  font-size: var(--text-md);
  font-weight: 800;
}

.goal-card.is-achieved .goal-card__line {
  color: var(--color-success);
}

.goal-card__days {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* 選項排掃描：每週目標快選也是「選一個」，統一成膠囊 segmented（SPEC M4.2 §1） */
.goal-quick-options {
  display: flex;
  gap: 2px;
  background: var(--color-surface-sunken);
  border-radius: var(--radius-full);
  padding: 3px;
}

.goal-quick-btn {
  flex: 1;
  min-height: var(--touch-min);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-muted);
  font-weight: 700;
  transition: all var(--transition-fast);
}

.goal-quick-btn.is-active {
  background: var(--color-fill-accent);
  color: var(--color-on-fill);
  box-shadow: var(--shadow-sm);
}

.goal-quick-btn:active {
  background: var(--color-accent-tint);
  color: var(--color-accent-text);
}

.goal-custom-row {
  display: flex;
  gap: var(--space-2);
}

/* ---------------------------------------------------------------------- */
/* M2：成績分享卡（全螢幕 sheet：canvas 預覽 + 分享／下載／關閉）              */
/* ---------------------------------------------------------------------- */

.share-sheet-backdrop {
  align-items: stretch;
}

.share-sheet {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  border-radius: 0;
  height: 100dvh;
  max-height: 100dvh;
  justify-content: space-between;
}

.share-sheet__preview {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--color-surface-sunken);
  border-radius: var(--radius-lg);
}

.share-sheet__preview img {
  width: 100%;
  height: auto;
  max-height: 100%;
  display: block;
  border-radius: var(--radius-lg);
  object-fit: contain;
}

/* 按鈕層級重整（SPEC M4.4 §2）：全寬主鈕最多一顆，其餘半寬並排分層。
   三列固定順序：照片列（半寬×2）／主鈕列（全寬×1）／次要列（半寬×2）；
   openShareSheet 只切換 hidden 屬性＋class，DOM 結構本身不變。 */
.share-sheet__row {
  display: flex;
  gap: var(--space-2);
}

.share-sheet__row .btn {
  flex: 1;
  min-width: 0;
}

/* 單顆時不拉滿：置中、限制在半寬左右（未選照片時的照片鈕、無分享 API 時的
   關閉鈕都走這個模式），避免長鈕孤零零撐滿整列。 */
.share-sheet__row--single {
  justify-content: center;
}

.share-sheet__row--single .btn {
  flex: 0 1 auto;
  min-width: 50%;
  max-width: 80%;
}

.share-sheet__full {
  width: 100%;
}

/* 底圖選擇列（SPEC M5 §3）：取代舊版「用自己的照片當背景」／「移除照片」
   兩顆按鈕。一列水平捲動 tile：紙感／bg1~5／自訂照片，觸控目標 64px（＞44px
   下限）。選中態用 accent 外框標示，深淺色都吃 tokens 變數不必另外覆寫。 */
.share-sheet__bgrow {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding: 4px 2px 8px;
  -webkit-overflow-scrolling: touch;
}

.share-sheet__bgtile {
  position: relative;
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0;
  overflow: hidden;
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
  color: inherit;
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

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

.share-sheet__bgtile-swatch {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  /* 與 sharecard.js 紙感版的暖沙漸層同色（COLORS.paperTop→paperBottom），
     縮圖要預告實際輸出的色調，不再用 App 背景色代打。 */
  background: linear-gradient(180deg, #F3EADC 0%, #E6D6C0 100%);
  border: 1px solid var(--color-border);
}

.share-sheet__bgtile-label {
  font-size: 11px;
  line-height: 1;
  color: var(--color-text-muted);
}

.share-sheet__bgtile-plus {
  font-size: 22px;
  line-height: 1;
  color: var(--color-text-faint);
}

/* 選中態：accent 外框，用 outline 而非再疊一層 border 才不改變 tile 尺寸。 */
.share-sheet__bgtile--active {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------- */
/* 動效尊重 prefers-reduced-motion                                        */
/* ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .page,
  .backdrop-in,
  .sheet,
  .mode-card,
  .makes-btn,
  .toast,
  .history-row,
  .tab-item,
  .ladder-tile,
  .seq-ball,
  .rule-bar__fill,
  .curve-bar__fill,
  .goal-card__fill,
  .celebration,
  .celebration__card,
  .confetti-piece,
  .court-spot--pick.is-selected .spot-dot {
    animation: none !important;
    transition: none !important;
  }

  .confetti-piece {
    display: none !important;
  }
}

/* ---------------------------------------------------------------------- */
/* 首頁 landing（#/home，SPEC_M6）                                          */
/* 三段全屏照片 ＋ 一屏入口。滿版：body.is-home 收掉 tab bar 與 main padding。 */
/* ---------------------------------------------------------------------- */

body.is-home .tab-bar {
  display: none;
}

body.is-home .app-main {
  max-width: none;
  padding: 0;
}

.page--landing {
  gap: 0;
  /* 首頁三屏是暗照片，字一律白色；不隨深淺主題翻轉（第四屏入口才回到主題色）。 */
  color: #fff;
}

/* ---- 三段照片 ---- */

.home-hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* 文字靠底：垂直置中會跟照片主體（球／框）打架 */
  overflow: hidden;
  padding: var(--space-7) var(--space-5) var(--space-8);
}

.home-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.12); /* JS 視差會覆寫成 translate3d + 同倍率；這是無 JS / reduced-motion 的靜態值 */
  will-change: transform;
  z-index: 0;
}

/* scrim 逐段配色：三張照片的亮部位置不同，統一壓一層半透明黑會把照片壓髒。 */
.home-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* 01 暗場館：本來就暗，只需要底部把字托起來 ＋ 頂部一點點壓住白色籃板 */
.home-hero--1 .home-hero__scrim {
  background:
    linear-gradient(to top, rgba(10, 8, 6, 0.82) 0%, rgba(10, 8, 6, 0.45) 38%, rgba(10, 8, 6, 0) 62%),
    linear-gradient(to bottom, rgba(10, 8, 6, 0.45) 0%, rgba(10, 8, 6, 0) 26%);
}

/* 02 俯視球場：色塊亮，左下角是深藍、右下是亮橘——底部漸層之外再從左下補一顆 radial */
.home-hero--2 .home-hero__scrim {
  background:
    radial-gradient(120% 80% at 8% 100%, rgba(10, 8, 6, 0.6) 0%, rgba(10, 8, 6, 0) 70%),
    linear-gradient(to top, rgba(10, 8, 6, 0.8) 0%, rgba(10, 8, 6, 0.42) 42%, rgba(10, 8, 6, 0) 68%);
}

/* 03 夕陽逆光：天空極亮，底部漸層要更厚一點才吃得住白字 */
.home-hero--3 .home-hero__scrim {
  background: linear-gradient(
    to top,
    rgba(10, 8, 6, 0.86) 0%,
    rgba(10, 8, 6, 0.5) 40%,
    rgba(10, 8, 6, 0) 70%
  );
}

.home-hero__text,
.home-wordmark,
.home-scroll-hint {
  position: relative;
  z-index: 2;
}

.home-hero__text {
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
}

/* 序號：細字 ＋ 大字距 ＋ 前置短橫線，等寬數字避免 0/1 抖動 */
.home-hero__num {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.28em;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.62);
}

.home-hero__num::before {
  content: '';
  width: 24px;
  height: 1px;
  background: rgba(255, 255, 255, 0.45);
}

.home-hero__title {
  font-size: clamp(30px, 8vw, 44px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: #fff;
  /* 靠陰影撐對比，不用描邊（描邊在照片上會顯髒——M4.4 已全面移除描邊） */
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.35);
}

.home-hero__body {
  margin-top: var(--space-4);
  max-width: 19em; /* 一行約 19 個中文字 */
  font-size: var(--text-lg);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.35);
}

/* 字標：只在第一屏。left/right 0 ＋ 內縮到與 .home-hero__text 同一條 480px 欄，
   否則寬螢幕上字標會貼在最左邊、內文卻置中，兩者對不齊。 */
.home-wordmark {
  position: absolute;
  top: calc(var(--space-7) + env(safe-area-inset-top, 0px));
  left: 0;
  right: 0;
  width: 100%;
  max-width: calc(480px + var(--space-5) * 2);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

/* 字標：桌面上要撐得住滿版照片，所以跟著視窗放大（手機 26px → 桌面 38px）。
   name 與 sub 之間用一條短橫線分隔，是版式而不是兩行字疊著。 */
.home-wordmark__name {
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: #fff;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.45);
}

.home-wordmark__sub {
  display: inline-block;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  font-size: clamp(11px, 1vw, 13px);
  font-weight: 500;
  letter-spacing: 0.34em;
  /* letter-spacing 會在最後一個字後面也加一格，看起來像沒對齊左緣的右側留白——
     負 margin 補回來 */
  margin-right: -0.34em;
  color: rgba(255, 255, 255, 0.66);
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.45);
}

/* 捲動提示：一條會呼吸的細線，不是彈跳箭頭 */
.home-scroll-hint {
  position: absolute;
  left: 50%;
  bottom: var(--space-5);
  transform: translateX(-50%);
  width: var(--touch-min);
  height: var(--space-6);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  cursor: pointer;
}

.home-scroll-hint__line {
  width: 1px;
  height: 20px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8));
  animation: home-hint 2.4s ease-in-out infinite;
  transform-origin: bottom;
}

@keyframes home-hint {
  0%, 100% { transform: scaleY(0.4); opacity: 0.35; }
  50% { transform: scaleY(1); opacity: 1; }
}

/* ---- 進場：序號 → 標題 → 內文，錯開 60ms ---- */

.page--landing:not(.is-static) [data-reveal] > * {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 520ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.page--landing:not(.is-static) [data-reveal].is-revealed > * {
  opacity: 1;
  transform: none;
}

.page--landing:not(.is-static) [data-reveal] > *:nth-child(2) { transition-delay: 60ms; }
.page--landing:not(.is-static) [data-reveal] > *:nth-child(3) { transition-delay: 120ms; }
.page--landing:not(.is-static) [data-reveal] > *:nth-child(4) { transition-delay: 180ms; }

/* ---- 第四屏：入口（回到 App 的紙感語彙） ---- */

.home-entries {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  background: var(--color-bg);
  color: var(--color-text);
  padding: var(--space-8) var(--space-5) calc(var(--space-8) + var(--safe-bottom));
}

.home-entries__inner {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}

.home-entries__kicker {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.28em;
  color: var(--color-accent-text);
}

.home-entries__title {
  margin-top: var(--space-3);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
}

/* 目錄式列表：拿掉卡片間距，改由每列自己的底線分隔，第一條線落在 list 上緣 */
.home-entries__list {
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-border);
}

.home-entry {
  display: grid;
  grid-template-columns: auto 1fr auto;
  /* baseline 而不是 start：三欄字級不同（14／18／11px），盒子頂端對齊會讓序號與標籤往上飄 */
  align-items: baseline;
  column-gap: var(--space-4);
  width: 100%;
  min-height: 76px;
  padding: var(--space-5) var(--space-2);
  background: none;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  cursor: pointer;
  position: relative; /* 給 ::after 的橘線定位 */
}

/* 這條線取代箭頭：hover / focus 時從左往右畫滿，蓋在底線上當作「可點」回饋。
   左右撐滿後用 scaleX 縮放，而不是動 width——縮放只跑合成層，不會每一幀觸發重排。 */
.home-entry::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-med);
}

.home-entry:hover::after,
.home-entry:focus-visible::after {
  transform: scaleX(1);
}

.home-entry:hover .home-entry__num,
.home-entry:hover .home-entry__tag,
.home-entry:focus-visible .home-entry__num,
.home-entry:focus-visible .home-entry__tag {
  color: var(--color-accent-text);
}

/* 手機沒有 hover，按壓時整列鋪一層很淡的暖色底當回饋（專案已用過 color-mix，故不退回 rgba） */
.home-entry:active {
  background: color-mix(in srgb, var(--color-accent) 6%, transparent);
}

.home-entry__num {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.2em;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}

.home-entry__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.home-entry__title {
  font-size: var(--text-lg);
  font-weight: 700;
}

.home-entry__sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.home-entry__tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--color-text-muted);
  /* letter-spacing 會在最後一個字後面多加一格，看起來像沒貼齊右緣——負 margin 補回來（同 .home-wordmark__sub） */
  margin-right: -0.24em;
}

.home-entries__credit {
  margin-top: var(--space-6);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .home-entry::after {
    transition: none;
  }

  .home-hero__img {
    transform: scale(1.02) !important; /* 視差關閉，只留極輕微的裁切餘裕 */
  }

  .home-scroll-hint__line {
    animation: none !important;
    opacity: 0.7;
  }
}

/* ---------------------------------------------------------------------- */
/* 分頁照片橫幅（SPEC_M6.2）                                                */
/* 滿版出血：用負 margin 抵銷 .app-main 的 padding，讓照片貼齊螢幕邊緣，     */
/* 內容區維持原本的紙感卡片。                                               */
/* ---------------------------------------------------------------------- */

.page-banner {
  position: relative;
  height: 196px;
  margin: calc(var(--space-5) * -1) calc(var(--space-4) * -1) 0;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  isolation: isolate;
  /* 底部一條 accent 髮絲線，把照片與紙感內容區「收邊」——沒有這條線，
     照片會像貼上去的，有了就像印刷品的版式。 */
  border-bottom: 2px solid var(--color-accent);
}

@media (min-width: 481px) {
  .page-banner {
    margin-left: calc(var(--space-5) * -1);
    margin-right: calc(var(--space-5) * -1);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  }
}

.page-banner__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

/* 壓字層：底部厚、上方薄。四張照片的暗部位置不同，但文字一律壓在左下，
   所以統一走「底部漸層 ＋ 左下 radial 加深」，比整片半透明黑乾淨。 */
.page-banner__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 90% at 0% 100%, rgba(10, 8, 6, 0.72) 0%, rgba(10, 8, 6, 0) 72%),
    linear-gradient(to top, rgba(10, 8, 6, 0.85) 0%, rgba(10, 8, 6, 0.42) 46%, rgba(10, 8, 6, 0.08) 100%);
}

.page-banner__title {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: #fff;
  text-shadow: 0 1px 20px rgba(0, 0, 0, 0.4);
}

.page-banner__sub {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.76);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.4);
}

/* 紀錄／統計這兩張是亮圖（拋光木地板有高光），左下角要壓得更重，白字才吃得住。
   只加強文字所在的那一角，右半邊的照片維持原本亮度——不是整片壓黑。 */
.page-banner--history .page-banner__scrim {
  background:
    radial-gradient(130% 110% at 0% 100%, rgba(10, 8, 6, 0.9) 0%, rgba(10, 8, 6, 0.5) 48%, rgba(10, 8, 6, 0) 80%),
    linear-gradient(to top, rgba(10, 8, 6, 0.9) 0%, rgba(10, 8, 6, 0.5) 46%, rgba(10, 8, 6, 0.1) 100%);
}

.page-banner--stats .page-banner__scrim {
  background:
    radial-gradient(130% 110% at 0% 100%, rgba(10, 8, 6, 0.85) 0%, rgba(10, 8, 6, 0.45) 48%, rgba(10, 8, 6, 0) 78%),
    linear-gradient(to top, rgba(10, 8, 6, 0.88) 0%, rgba(10, 8, 6, 0.45) 46%, rgba(10, 8, 6, 0.08) 100%);
}

/* 右上角插槽（練球頁的回首頁連結） */
.page-banner__slot {
  position: absolute;
  top: var(--space-3);
  right: var(--space-4);
}

/* 橫幅上的回首頁連結：白字版（原本是紙感底上的灰字） */
.page-banner__slot .home-link {
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

.page-banner__slot .home-link:hover,
.page-banner__slot .home-link:focus-visible {
  color: #fff;
}

/* 橫幅是 .page 的第一個孩子，但 .page 的 gap 會在它下面多墊一段——收掉，
   讓照片與第一張卡之間只有一個標準間距。 */
.page > .page-banner {
  margin-bottom: 0;
}