/* 獎勵中心（健康積分）— additive page styles.
   只用 tokens.css 既有的設計變數，主題切換／長者模式（--scale）自動跟著走，
   不覆寫任何既有 class（全部 .rw- 前綴）。 */

.rw-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.rw-head h2 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-2xl);
  color: var(--content);
  margin: 0 0 var(--space-1);
}
.rw-head p {
  margin: 0;
  color: var(--content-muted);
  font-size: var(--text-sm);
}

.rw-card {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  box-shadow: var(--shadow-1);
}
.rw-card-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--content);
  margin: 0 0 var(--space-3);
}
.rw-card-title small {
  margin-left: auto;
  font-weight: 400;
  color: var(--content-subtle);
  font-size: var(--text-xs);
}

/* ── Hero：等級環 + 點數 ── */
.rw-hero {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  background: linear-gradient(135deg, var(--surface-1), var(--surface-2));
}
.rw-ring {
  flex: 0 0 auto;
  width: 132px;
  height: 132px;
  position: relative;
}
.rw-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.rw-ring-bg { fill: none; stroke: var(--line); stroke-width: 12; }
.rw-ring-fg {
  fill: none;
  stroke: var(--action);
  stroke-width: 12;
  stroke-linecap: round;
  transition: stroke-dashoffset var(--motion-slow) var(--ease-gentle);
}
.rw-ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.rw-ring-lv {
  font-size: var(--text-xs);
  color: var(--content-subtle);
  letter-spacing: .04em;
}
.rw-ring-name {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--primary);
  line-height: 1.1;
}

.rw-hero-meta { flex: 1 1 auto; min-width: 0; }
.rw-points {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.rw-points-big {
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--action);
}
.rw-points-unit { font-size: var(--text-sm); color: var(--content-muted); }
.rw-points-sub {
  font-size: var(--text-xs);
  color: var(--content-subtle);
  margin-top: 2px;
}
.rw-next {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--content-muted);
}
.rw-bar {
  margin-top: var(--space-1);
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  overflow: hidden;
}
.rw-bar > i {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--action);
  transition: width var(--motion-slow) var(--ease-gentle);
}

/* ── 連續打卡 + 明細 chips ── */
.rw-stat-row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.rw-stat {
  flex: 1 1 120px;
  background: var(--surface-2);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  text-align: center;
}
.rw-stat-num {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--primary);
}
.rw-stat-label { font-size: var(--text-xs); color: var(--content-muted); }

.rw-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.rw-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: var(--text-xs);
  color: var(--content);
}
.rw-chip b { color: var(--action); }

/* ── 徽章牆 ── */
.rw-badges {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--space-3);
}
.rw-badge {
  text-align: center;
  padding: var(--space-3) var(--space-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--surface-1);
}
.rw-badge-ic {
  width: 44px;
  height: 44px;
  margin: 0 auto var(--space-2);
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--action);
  color: #fff;
}
.rw-badge-ic svg { width: 22px; height: 22px; }
.rw-badge-name {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--content);
  line-height: 1.2;
}
.rw-badge-desc {
  font-size: 11px;
  color: var(--content-subtle);
  margin-top: 2px;
}
.rw-badge.locked { opacity: .55; }
.rw-badge.locked .rw-badge-ic { background: var(--surface-2); color: var(--content-subtle); }

/* ── 兌換清單 ── */
.rw-reward {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
}
.rw-reward:last-child { border-bottom: 0; }
.rw-reward-ic {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--action);
  display: flex;
  align-items: center;
  justify-content: center;
}
.rw-reward-body { flex: 1 1 auto; min-width: 0; }
.rw-reward-name { font-size: var(--text-sm); font-weight: 600; color: var(--content); }
.rw-reward-desc { font-size: var(--text-xs); color: var(--content-muted); }
.rw-reward-cost {
  font-size: var(--text-xs);
  color: var(--action);
  font-weight: 600;
  margin-top: 2px;
}
.rw-btn {
  flex: 0 0 auto;
  min-height: var(--touch-min);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--action);
  background: var(--action);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: filter var(--motion-fast) var(--ease);
}
.rw-btn:hover { filter: brightness(1.06); }
.rw-btn[disabled] {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--content-subtle);
  cursor: not-allowed;
}

/* ── 加分明細 ledger ── */
.rw-ledger { display: flex; flex-direction: column; }
.rw-led {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px dashed var(--line);
  font-size: var(--text-sm);
}
.rw-ledger .rw-led:last-child { border-bottom: 0; }
.rw-led-label { flex: 1 1 auto; color: var(--content); }
.rw-led-date { color: var(--content-subtle); font-size: var(--text-xs); }
.rw-led-pts { color: var(--action); font-weight: 700; white-space: nowrap; }

.rw-note {
  font-size: var(--text-xs);
  color: var(--content-subtle);
  line-height: 1.6;
  text-align: center;
}
.rw-empty {
  text-align: center;
  color: var(--content-muted);
  font-size: var(--text-sm);
  padding: var(--space-4);
}

@media (max-width: 480px) {
  .rw-hero { flex-direction: column; text-align: center; }
  .rw-hero-meta { width: 100%; }
  .rw-points { justify-content: center; }
}

/* ── 首頁入口卡（主畫面明顯位置）──────────────────────────────
   只用 tokens，主題／長者模式自動跟著走。手機與桌機共用同一張卡。 */
.rw-home {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  text-align: left;
  font: inherit;
  color: var(--content);
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-1);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-3) 0;
  cursor: pointer;
  min-height: var(--touch-min);
  transition: transform var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease);
}
.rw-home:hover { transform: translateY(-1px); box-shadow: var(--shadow-1); }
.rw-home:active { transform: translateY(0); }
.rw-home-ring { position: relative; width: 46px; height: 46px; flex: none; }
.rw-home-ring svg { width: 46px; height: 46px; transform: rotate(-90deg); }
.rw-home-ring .bg { fill: none; stroke: var(--line); stroke-width: 4; }
.rw-home-ring .fg {
  fill: none; stroke: var(--primary); stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: 113; stroke-dashoffset: 113;
  transition: stroke-dashoffset var(--motion-slow) var(--ease-gentle);
}
.rw-home-lv {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: var(--text-sm); font-weight: 700; color: var(--primary);
}
.rw-home-main { flex: 1; min-width: 0; }
.rw-home-title {
  display: flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-base); font-weight: 700; color: var(--content);
}
.rw-home-title svg { width: 16px; height: 16px; }
.rw-home-sub {
  font-size: var(--text-xs); color: var(--content-muted); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rw-home-pts { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; flex: none; }
.rw-home-pts b { font-size: var(--text-xl); font-weight: 800; color: var(--primary); }
.rw-home-pts span { font-size: var(--text-xs); color: var(--content-muted); }
.rw-home-chev { width: 18px; height: 18px; color: var(--content-subtle); flex: none; }

/* ── 療程拼圖（每月主題收藏）─────────────────────────────────
   3x3 grid，已解鎖片顯示插畫片段、未解鎖灰階＋鎖。全 .rw-pz- 前綴、
   只用 tokens、不覆寫既有 class。轉場克制，且尊重 prefers-reduced-motion。*/
.rw-pz-sub { font-size: var(--text-xs); color: var(--content-muted); margin: 2px 0 var(--space-3); }

.rw-pz-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  padding: 5px;
  background: var(--surface-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
}
.rw-pz-cell {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm, 10px);
  overflow: hidden;
  background: var(--surface-2) center / 300% 300% no-repeat;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--content-subtle);
  transition: transform var(--motion-fast, .18s) var(--ease, ease);
}
.rw-pz-cell:hover { transform: translateY(-1px); }
.rw-pz-cell:active { transform: translateY(0); }
/* 灰階：未解鎖片去飽和並蓋一層淡 surface，鎖頭浮在上面 */
.rw-pz-cell.locked { filter: grayscale(1); cursor: pointer; }
.rw-pz-cell.locked::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--surface-2);
  opacity: .66;
}
.rw-pz-lock {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.rw-pz-lock svg { width: 22px; height: 22px; opacity: .7; }

.rw-pz-progress {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--content);
  text-align: center;
}
.rw-pz-progress.done { color: var(--primary); font-weight: 600; }
.rw-pz-bar {
  margin-top: var(--space-2);
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  overflow: hidden;
}
.rw-pz-bar > i {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--action);
  transition: width var(--motion-slow, .5s) var(--ease-gentle, ease);
}
.rw-pz-reward {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: var(--text-xs);
  color: var(--content);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.rw-pz-reward svg { width: 16px; height: 16px; color: var(--action); flex: none; }
.rw-pz-hint {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--content-subtle);
  text-align: center;
}

/* 點某片彈出的「為什麼解鎖 / 還差什麼」說明（可解釋，憲法 2）*/
.rw-pz-detail {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: var(--text-sm);
  color: var(--content);
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}
.rw-pz-detail svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.rw-pz-detail.is-locked svg { color: var(--content-subtle); }
.rw-pz-detail.is-unlocked svg { color: var(--action); }

/* ── 旅程地圖：8 章節故事地圖（design-language.md §6）────────────────
   蜿蜒小徑：每章一個節點，沿左側點狀小徑串起。完成＝清晰＋緞帶；
   正在尋回＝發光；尚未尋回＝去飽和淡化；尚未展開（章 7/8）＝虛線。 */
.rw-jn-sub { font-size: var(--text-xs); color: var(--content-muted); margin: 2px 0 var(--space-3); }
.rw-journey { position: relative; }
/* 左側點狀小徑（穿過各章編號徽章中心，被徽章實底蓋住、僅章節間露出）*/
.rw-journey::before {
  content: "";
  position: absolute;
  left: 19px; top: 24px; bottom: 24px; width: 2px;
  background: repeating-linear-gradient(to bottom,
    var(--content-subtle) 0 4px, transparent 4px 10px);
  opacity: .5;
}
.rw-jn-node {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
}
.rw-jn-num {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif, serif);
  font-size: var(--text-sm); font-weight: 600;
  background: var(--surface-1);
  color: var(--content-muted);
  border: 1px solid var(--line);
  z-index: 1;
}
.rw-jn-art { position: relative; flex: none; }
.rw-jn-thumb {
  display: block;
  width: 56px; height: 56px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--surface-2) center / cover no-repeat;
}
.rw-jn-thumb.is-future {
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-1);
  border-style: dashed;
  color: var(--content-subtle);
}
.rw-jn-thumb.is-future svg { width: 22px; height: 22px; }
.rw-jn-ribbon {
  position: absolute;
  top: -6px; right: -6px;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--action);
  color: var(--primary-fg);
  box-shadow: var(--shadow-1);
}
.rw-jn-ribbon svg { width: 13px; height: 13px; }
.rw-jn-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rw-jn-name { font-family: var(--font-serif, serif); font-size: var(--text-base); color: var(--content); }
.rw-jn-state { font-size: var(--text-xs); color: var(--content-muted); }

/* 已尋回 */
.rw-jn-node.is-complete .rw-jn-num { background: var(--action); color: var(--primary-fg); border-color: transparent; }
/* 正在尋回：發光 */
.rw-jn-node.is-active .rw-jn-num {
  border-color: var(--action);
  color: var(--action-deep);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--action) 18%, transparent);
}
.rw-jn-node.is-active .rw-jn-thumb { box-shadow: 0 0 0 2px var(--action); }
.rw-jn-node.is-active .rw-jn-name { font-weight: 600; }
.rw-jn-node.is-active .rw-jn-state { color: var(--action-deep); }
/* 尚未尋回：去飽和淡化 */
.rw-jn-node.is-locked .rw-jn-thumb { filter: grayscale(1); opacity: .5; }
.rw-jn-node.is-locked .rw-jn-name,
.rw-jn-node.is-locked .rw-jn-num { color: var(--content-subtle); }
/* 尚未展開（章 7/8，插畫待補）*/
.rw-jn-node.is-future { opacity: .7; }
.rw-jn-node.is-future .rw-jn-num { border-style: dashed; }

/* ── 記憶尋回 toast（design-language.md §12）──────────────────────
   置中於頂端、與一般 showToast 分離；故事書語氣＋斜體英文副標＋sea-restore。 */
#mem-toast-container {
  position: fixed;
  top: 18px; left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  display: flex; flex-direction: column; gap: 10px; align-items: center;
  width: max-content; max-width: calc(100vw - 32px);
  pointer-events: none;
}
.mem-toast {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-card, 18px);
  background: var(--surface-1);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
  animation: sea-restore .55s var(--ease-gentle, ease) both;
}
.mem-toast.leaving { animation: sea-restore-out .5s var(--ease, ease) both; }
.mem-toast-seal {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--action);
}
.mem-toast-seal svg { width: 20px; height: 20px; }
.mem-toast-body { display: flex; flex-direction: column; gap: 1px; }
.mem-toast-title { font-family: var(--font-serif, serif); font-size: var(--text-base); color: var(--content); }
.mem-toast-sub { font-style: italic; font-size: var(--text-xs); color: var(--content-muted); }
@keyframes sea-restore {
  0% { opacity: 0; transform: translateY(-10px) scale(.96); }
  60% { opacity: 1; transform: translateY(0) scale(1.01); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes sea-restore-out { to { opacity: 0; transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) {
  .mem-toast, .mem-toast.leaving { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rw-pz-cell, .rw-pz-bar > i { transition: none; animation: none; }
}

/* ── 章節 hero 橫幅（拼圖板頂端的 painterly 場景插畫）──────────────
   呼應「海邊的記憶之書」：每月主題配一張章節插畫，標題壓在柔和漸層上。
   只用 tokens；長者模式（--scale）字級自動跟著走。 */
.rw-pz-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  background-size: cover;
  background-position: center;
  background-color: var(--surface-2);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.rw-pz-hero-scrim {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-4);
  background: linear-gradient(to top,
    rgba(20, 28, 34, .62) 0%, rgba(20, 28, 34, .26) 38%, rgba(20, 28, 34, 0) 64%);
}
.rw-pz-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, .9);
  letter-spacing: .06em;
}
.rw-pz-hero-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  margin-top: 2px;
  text-shadow: 0 1px 6px rgba(20, 28, 34, .45);
}

/* ── 首頁入口卡 → 當月章節 painterly hero（背景圖 + 漸層 scrim + 淺色字）──
   背景由 app.js 以當月主題插畫 inline 帶入；文字一律轉白以維持可讀。 */
.rw-home.rw-home-hero {
  position: relative;
  min-height: 88px;
  border: none;
  color: #fff;
  background-size: cover;
  background-position: center;
  background-color: var(--surface-2);
  overflow: hidden;
  box-shadow: var(--shadow-2);
}
.rw-home.rw-home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20,28,34,.74), rgba(20,28,34,.34) 58%, rgba(20,28,34,.56));
}
.rw-home.rw-home-hero > * { position: relative; z-index: 1; }
.rw-home-hero .rw-home-ring .bg { stroke: rgba(255,255,255,.32); }
.rw-home-hero .rw-home-ring .fg { stroke: #fff; }
.rw-home-hero .rw-home-lv,
.rw-home-hero .rw-home-title { color: #fff; }
.rw-home-hero .rw-home-title svg { color: #fff; }
.rw-home-hero .rw-home-sub { color: rgba(255,255,255,.86); }
.rw-home-hero .rw-home-pts b { color: #fff; }
.rw-home-hero .rw-home-pts span { color: rgba(255,255,255,.86); }
.rw-home-hero .rw-home-chev { color: rgba(255,255,255,.9); }