/**
 * =============================================================================
 *  style.css — 療癒綠洲塔羅 AMIN 樣式表
 * =============================================================================
 *  排列順序（方便日後查找）：
 *    1. 設計變數（顏色、字型、間距）
 *    2. 基礎重置與版面
 *    3. 頁首／頁尾
 *    4. SPA 畫面切換
 *    5. 首頁：引導、牌陣選擇、問題輸入
 *    6. 按鈕
 *    7. 洗牌動畫
 *    8. 抽牌區（背面朝上的牌）
 *    9. 塔羅牌本體與 3D 翻牌效果
 *   10. 解讀結果
 *   11. RWD 響應式斷點
 *   12. 無障礙：尊重「減少動態效果」的系統設定
 * =============================================================================
 */

/* ===========================================================================
   1. 設計變數
   把顏色與尺寸集中管理，之後想換色只要改這一區即可。

   【配色原則】淺灰底 × 深金字
   淺色背景最容易踩的坑是「金色文字看不清楚」——
   亮金（例如 #e6cd90）在淺灰底上對比度只有 1.5:1 左右，幾乎讀不到。
   所以這裡把金色拆成三階，並明確規定各自的用途：
     --gold-light 只能用在漸層與裝飾，絕不用於文字
     --gold       用於邊框與分隔線
     --gold-deep  才是文字專用的金色（對比度 5.3:1，通過 WCAG AA）
   =========================================================================== */
:root {
  /* 淺灰色系（由淺到深）＝ 頁面主調 */
  --gray-lightest: #f7f8fa;
  --gray-light: #eceef2;
  --gray: #dfe2e9;
  --gray-deep: #cdd2dc;

  /* 金色系 ＝ 標題、邊框、重點文字（用途見上方說明） */
  --gold-light: #d9bd80;
  --gold: #b08d4f;
  --gold-deep: #7a5c28;
  --gold-dim: rgba(176, 141, 79, 0.38);
  --gold-wash: rgba(176, 141, 79, 0.09);
  /* 金色按鈕上的文字色，用偏暖的深褐色和金底更協調 */
  --gold-ink: #3a2c10;

  /* 墨色系 ＝ 內文，避免用純黑，深藍灰讀起來較柔和 */
  --ink: #262c3a;
  --ink-soft: #515a6d;
  /* 這階用在頁尾、註記等小字上，色階刻意壓到剛好通過 AA 對比（4.6:1） */
  --ink-dim: #626a7c;

  /*
   * 牌背圖樣：珍珠白底 + 金色斜紋。
   * 洗牌動畫、抽牌區、翻牌的背面三處共用，集中成一個變數方便統一調整。
   */
  --card-back:
    radial-gradient(circle at 50% 50%, rgba(176, 141, 79, 0.22) 0%, transparent 44%),
    repeating-linear-gradient(45deg, rgba(176, 141, 79, 0.16) 0 5px, transparent 5px 10px),
    linear-gradient(160deg, #ffffff, var(--gray-deep));

  /* 陰影：淺色版面靠陰影製造層次，色調用內文的深藍灰而非純黑 */
  --shadow-sm: 0 2px 8px rgba(38, 44, 58, 0.07);
  --shadow-md: 0 10px 28px rgba(38, 44, 58, 0.10);
  --shadow-lg: 0 16px 34px rgba(38, 44, 58, 0.14);

  /* 字型：標題用優雅襯線，中文內文用思源宋體 */
  --font-display: 'Cormorant Garamond', 'Noto Serif TC', Georgia, serif;
  --font-body: 'Noto Serif TC', 'Cormorant Garamond', Georgia, serif;

  /* 版面 */
  --max-width: 1040px;
  --radius: 14px;
  --radius-sm: 8px;

  /* 塔羅牌的長寬比（偉特牌約為 1 : 1.7） */
  --card-ratio: 500 / 850;

  /* 動畫時間，統一管理讓節奏一致 */
  --t-fast: 0.25s;
  --t-mid: 0.5s;
  --t-flip: 0.8s;
}

/* ===========================================================================
   2. 基礎重置與版面
   =========================================================================== */

/* border-box 讓 padding 不會把元素撐大，是最常用的版面設定 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  /* 直向 flex 版面，搭配下方 .app 的 flex: 1，讓頁尾永遠貼在畫面底部 */
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  /*
   * 深字淺底時字重不能太細，否則中文筆畫會顯得虛。
   * （深色背景才適合用 300 這種細字重）
   */
  font-weight: 400;
  line-height: 1.85;
  color: var(--ink);
  /* 由上而下的淺灰漸層，上方偏白、下方稍深，讓版面有自然的縱深 */
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, #ffffff, transparent 70%),
    linear-gradient(180deg, var(--gray-lightest) 0%, var(--gray) 100%);
  background-attachment: fixed;
  text-rendering: optimizeLegibility;
}

/*
 * 背景光暈層，純裝飾。
 * 深色版本這裡原本是閃爍的星點，但淺底上的「星星」不合理也看不見，
 * 改成上方柔白、下方淡金的漸層光暈，維持一樣安靜的氛圍。
 */
.page-glow {
  position: fixed;
  inset: 0;
  pointer-events: none; /* 不攔截滑鼠事件，確保下層元素可點 */
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 45% at 50% 0%, rgba(255, 255, 255, 0.85), transparent 72%),
    radial-gradient(ellipse 65% 40% at 50% 100%, rgba(176, 141, 79, 0.08), transparent 72%);
  animation: glow-breathe 8s ease-in-out infinite alternate;
}

@keyframes glow-breathe {
  from { opacity: 0.7; }
  to   { opacity: 1; }
}

/* ===========================================================================
   3. 頁首／頁尾
   =========================================================================== */
.site-header {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 3.2rem 1.25rem 1.6rem;
}

.site-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  /* clamp(最小值, 隨螢幕縮放的值, 最大值)：一行搞定 RWD 字級 */
  font-size: clamp(1.9rem, 6vw, 3rem);
  line-height: 1.25;
  color: var(--gold-deep);
  letter-spacing: 0.12em;
}

.site-title__zh {
  display: block;
}

/* 英文副標：小字、寬字距，營造精品感 */
.site-title__en {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.38em;
  letter-spacing: 0.72em;
  /* 字距會讓最後一個字母右邊多出空白，往左推回來讓它視覺置中 */
  text-indent: 0.72em;
  color: var(--gold);
}

/* 標題下方的細金線裝飾 */
.site-header::after {
  content: '';
  display: block;
  width: 88px;
  height: 1px;
  margin: 1.4rem auto 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.site-tagline {
  margin: 1rem 0 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
  letter-spacing: 0.08em;
}

.site-footer {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 3rem 1.25rem 2.5rem;
  margin-top: 2rem;
  font-size: 0.82rem;
  color: var(--ink-dim);
  border-top: 1px solid var(--gold-dim);
}

.site-footer p {
  margin: 0.35rem 0;
}

.site-footer__sub {
  font-size: 0.78rem;
  opacity: 0.8;
}

/* ===========================================================================
   4. SPA 畫面切換
   三個 .screen 都存在於 DOM 中，只有帶 .screen--active 的那個會顯示。
   =========================================================================== */
.app {
  position: relative;
  z-index: 1;
  /* 內容不足一頁時撐開剩餘高度，把頁尾推到底部 */
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.screen {
  display: none;
}

.screen--active {
  display: block;
  /* 切換畫面時淡入，避免生硬的瞬間跳轉 */
  animation: screen-in var(--t-mid) ease both;
}

@keyframes screen-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===========================================================================
   5. 首頁：引導、牌陣選擇、問題輸入
   =========================================================================== */

/* ---- 新手三步驟引導 ---- */
.guide {
  max-width: 760px;
  margin: 0 auto 2.6rem;
  padding: 1.6rem 1.4rem;
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--shadow-sm);
}

.guide__title {
  margin: 0 0 1.3rem;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.28rem;
  letter-spacing: 0.1em;
  color: var(--gold-deep);
}

.guide__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  text-align: center;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* 步驟編號的金色圓圈 */
.guide__num {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--gold-deep);
  background: rgba(255, 255, 255, 0.8);
}

.guide__text strong {
  display: inline-block;
  font-weight: 600;
  color: var(--ink);
}

/* ---- 牌陣選擇 ---- */
.spread-picker {
  margin: 0 0 2.2rem;
  padding: 0;
  border: none;
}

.spread-picker__legend {
  display: block;
  width: 100%;
  margin-bottom: 1.1rem;
  padding: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--gold-deep);
}

.spread-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem;
}

.spread-option {
  display: block;
  cursor: pointer;
}

/* 隱藏原生 radio，但保留它在無障礙樹與鍵盤操作中的功能 */
.spread-option__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.spread-option__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  height: 100%;
  padding: 1.6rem 1.3rem;
  text-align: center;
  border: 1px solid rgba(176, 141, 79, 0.3);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.6);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--t-fast), background var(--t-fast),
              transform var(--t-fast), box-shadow var(--t-fast);
}

.spread-option:hover .spread-option__body {
  border-color: var(--gold);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* :checked 選到的是 input，用 + 選取它後面的 body 來套用選中樣式 */
.spread-option__input:checked + .spread-option__body {
  border-color: var(--gold);
  background: #ffffff;
  /* 內圈金線 + 外圈陰影，讓選中狀態在淺色版面上依然明顯 */
  box-shadow: 0 0 0 1px var(--gold-dim), var(--shadow-md);
}

/* 鍵盤 Tab 聚焦時給明顯的外框，這是無障礙的基本要求 */
.spread-option__input:focus-visible + .spread-option__body {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
}

/* 牌陣的小圖示：用幾個迷你長方形代表張數 */
.spread-option__icon {
  display: flex;
  gap: 4px;
  height: 42px;
  margin-bottom: 0.3rem;
}

.mini-card {
  width: 26px;
  height: 42px;
  border: 1px solid var(--gold);
  border-radius: 3px;
  background: linear-gradient(160deg, #ffffff, var(--gray-deep));
}

.spread-option__name {
  font-family: var(--font-display);
  font-size: 1.16rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--gold-deep);
}

.spread-option__desc {
  font-size: 0.86rem;
  line-height: 1.75;
  color: var(--ink-soft);
}

.spread-option__meta {
  margin-top: 0.15rem;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  color: var(--ink-dim);
}

/* ---- 問題輸入框 ---- */
.question-box {
  max-width: 540px;
  margin: 0 auto 2rem;
  text-align: center;
}

.question-box__label {
  display: block;
  margin-bottom: 0.6rem;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  color: var(--gold-deep);
}

.question-box__optional {
  font-size: 0.8rem;
  color: var(--ink-dim);
}

.question-box__input {
  width: 100%;
  padding: 0.8rem 1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  text-align: center;
  background: #ffffff;
  border: 1px solid rgba(176, 141, 79, 0.4);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.question-box__input::placeholder {
  color: var(--ink-dim);
  opacity: 0.75;
}

.question-box__input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-wash);
}

.question-box__hint {
  margin: 0.6rem 0 0;
  font-size: 0.78rem;
  color: var(--ink-dim);
}

/* ===========================================================================
   6. 按鈕
   =========================================================================== */
.btn {
  display: block;
  margin: 0 auto;
  padding: 0.85rem 2.6rem;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-indent: 0.22em; /* 補償字距造成的視覺偏移 */
  color: var(--gold-ink);
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  border: 1px solid var(--gold);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-fast), opacity var(--t-fast);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn:active {
  transform: translateY(0);
}

.btn:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 4px;
}

/* 次要按鈕：只有外框，不搶主按鈕的視覺焦點 */
.btn--ghost {
  margin-top: 1.1rem;
  padding: 0.6rem 1.8rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
  background: transparent;
  border-color: rgba(176, 141, 79, 0.45);
  box-shadow: none;
}

.btn--ghost:hover {
  color: var(--gold-deep);
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.6);
  box-shadow: none;
}

/* ===========================================================================
   7. 洗牌動畫
   五張牌疊在一起，用不同的 animation-delay 錯開，形成流動的洗牌感。
   =========================================================================== */
.draw-status {
  text-align: center;
  margin-bottom: 1.6rem;
}

.draw-status__title {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 4vw, 1.7rem);
  letter-spacing: 0.14em;
  color: var(--gold-deep);
}

.draw-status__hint {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.shuffle-stage {
  position: relative;
  height: 220px;
  margin: 0 auto 1.5rem;
  display: none; /* 預設隱藏，洗牌時由 JS 加上 .is-shuffling 顯示 */
}

.shuffle-stage.is-shuffling {
  display: block;
}

.shuffle-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 92px;
  height: 156px;
  margin: -78px 0 0 -46px;
  border: 1px solid var(--gold);
  border-radius: var(--radius-sm);
  background: var(--card-back);
  box-shadow: var(--shadow-md);
  animation: shuffle-move 1.5s ease-in-out infinite;
}

/* :nth-child 讓每張牌延遲不同時間，動作才會錯落有致 */
.shuffle-card:nth-child(1) { animation-delay: 0s; }
.shuffle-card:nth-child(2) { animation-delay: 0.12s; }
.shuffle-card:nth-child(3) { animation-delay: 0.24s; }
.shuffle-card:nth-child(4) { animation-delay: 0.36s; }
.shuffle-card:nth-child(5) { animation-delay: 0.48s; }

@keyframes shuffle-move {
  0%   { transform: translateX(0) rotate(0deg); }
  25%  { transform: translateX(-88px) rotate(-11deg); }
  50%  { transform: translateX(0) rotate(0deg); }
  75%  { transform: translateX(88px) rotate(11deg); }
  100% { transform: translateX(0) rotate(0deg); }
}

/* ===========================================================================
   8. 抽牌區：一整排背面朝上的牌
   =========================================================================== */
.card-fan {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  min-height: 150px;
  /*
   * 限制寬度讓 22 張牌剛好排成整齊的兩列（11 + 11）。
   * 算式：11 張 × 74px + 10 個間隔 × 8px = 894px，所以取 900px。
   */
  max-width: 900px;
  margin: 0 auto 1.4rem;
}

/* 單張可點選的牌（由 JS 生成 22 個） */
.fan-card {
  width: 74px;
  aspect-ratio: var(--card-ratio);
  padding: 0;
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius-sm);
  background: var(--card-back);
  /* 淺底上的牌要靠陰影才浮得起來，否則會和背景糊在一起 */
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  /* 逐張浮現的入場動畫，delay 由 JS 以 inline style 指定 */
  opacity: 0;
  animation: fan-in 0.45s ease forwards;
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}

@keyframes fan-in {
  from { opacity: 0; transform: translateY(26px) rotate(-6deg); }
  to   { opacity: 1; transform: translateY(0) rotate(0deg); }
}

.fan-card:hover:not(.is-picked),
.fan-card:focus-visible:not(.is-picked) {
  transform: translateY(-14px);
  border-color: var(--gold);
  box-shadow: var(--shadow-lg);
  outline: none;
}

/*
 * 已被選走的牌：改成「空位」的樣子。
 *
 * 深色版面可以單純把牌調淡來表示已取走，但淺色版面行不通——
 * 淡掉的淺色牌會直接融進淺灰背景，使用者根本看不出自己選了哪幾張。
 * 所以這裡改用虛線外框 + 淡金底 + 內陰影（凹陷感），
 * 讓它明確讀起來是「這個位置的牌已經被抽走了」。
 */
.fan-card.is-picked {
  cursor: default;
  transform: translateY(6px) scale(0.94);
  border: 1px dashed var(--gold);
  background: var(--gold-wash);
  box-shadow: inset 0 2px 6px rgba(38, 44, 58, 0.09);
}

/* 抽滿後整區停用，避免多抽 */
.card-fan.is-locked .fan-card {
  cursor: default;
  pointer-events: none;
}

.draw-progress {
  text-align: center;
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--gold-deep);
  min-height: 1.6em; /* 預留高度，文字出現時不會把版面推動 */
}

/* ===========================================================================
   9. 塔羅牌本體與 3D 翻牌效果
   原理：外層建立 3D 空間，內層 rotateY(180deg) 翻轉，
        正反兩面用 backface-visibility: hidden 互相遮蔽。
   =========================================================================== */
.tarot-card {
  width: 100%;
  aspect-ratio: var(--card-ratio);
  /* perspective 決定 3D 透視的強度，數字越小翻轉越誇張 */
  perspective: 1200px;
}

.tarot-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  /* 讓子元素保留在 3D 空間中，這是翻牌能成立的關鍵 */
  transform-style: preserve-3d;
  transition: transform var(--t-flip) cubic-bezier(0.4, 0.05, 0.2, 1);
}

/* 加上 .is-flipped 就翻到正面 */
.tarot-card.is-flipped .tarot-card__inner {
  transform: rotateY(180deg);
}

.tarot-card__face {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  /* 背對觀眾的那一面不繪製，才不會兩面疊在一起 */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* 牌背 */
.tarot-card__face--back {
  border: 1px solid var(--gold-dim);
  background: var(--card-back);
  box-shadow: var(--shadow-sm);
}

/* 牌面（正面）：預先轉 180 度，等外層翻轉後剛好轉正 */
.tarot-card__face--front {
  transform: rotateY(180deg);
  border: 1px solid var(--gold);
  background: var(--gray-lightest);
  box-shadow: var(--shadow-md);
}

.tarot-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-mid) ease;
}

/**
 * 逆位：把牌面圖旋轉 180 度。
 * 實體塔羅本來就沒有另一套逆位牌圖，逆位就是同一張牌上下顛倒，
 * 所以這裡用 CSS 旋轉處理，而不是另外準備 22 張逆位圖檔。
 */
.tarot-card__img--reversed {
  transform: rotate(180deg);
}

/* 圖片載入失敗時的替代牌面（顯示羅馬數字與牌名） */
.card-fallback {
  display: none;
  position: absolute;
  inset: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  text-align: center;
  background: linear-gradient(160deg, #ffffff, var(--gray));
}

/* JS 偵測到圖片載入失敗時，會在 face 上加這個 class */
.tarot-card__face--img-error .tarot-card__img { display: none; }
.tarot-card__face--img-error .card-fallback { display: flex; }

.card-fallback__numeral {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--gold-deep);
}

.card-fallback__name {
  font-size: 0.95rem;
  color: var(--ink);
}

.card-fallback__en {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--ink-dim);
}

/* ===========================================================================
   10. 解讀結果
   =========================================================================== */
.result-heading {
  margin: 0 0 0.6rem;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 5vw, 2rem);
  letter-spacing: 0.16em;
  color: var(--gold-deep);
}

.result-question {
  margin: 0 auto 2.2rem;
  max-width: 620px;
  text-align: center;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.result-question::before { content: '「'; color: var(--gold); }
.result-question::after  { content: '」'; color: var(--gold); }

.result-list {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  margin-bottom: 2.6rem;
}

/* 單筆結果：左邊是牌、右邊是文字 */
.result-item {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 1.8rem;
  align-items: start;
  padding: 1.6rem;
  border: 1px solid rgba(176, 141, 79, 0.25);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.75);
  box-shadow: var(--shadow-sm);
  /* 多張牌時逐一浮現，delay 由 JS 指定 */
  opacity: 0;
  animation: result-in 0.6s ease forwards;
}

@keyframes result-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 位置標籤（過去／現在／未來）*/
.result-item__position {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: var(--gold-deep);
}

.result-item__position-hint {
  margin: 0 0 1rem;
  font-size: 0.78rem;
  color: var(--ink-dim);
}

.result-item__name {
  margin: 0 0 0.3rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.6rem;
  letter-spacing: 0.06em;
  color: var(--gold-deep);
}

.result-item__name-en {
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--ink-dim);
}

/* 正位／逆位徽章 */
.orientation {
  display: inline-block;
  margin: 0.2rem 0 0.9rem;
  padding: 0.2rem 0.9rem;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  border-radius: 999px;
  border: 1px solid;
}

.orientation--upright {
  color: var(--gold-deep);
  border-color: var(--gold);
  background: var(--gold-wash);
}

/* 逆位用紫色和正位的金色區隔，色階同樣調深以符合淺底的對比需求 */
.orientation--reversed {
  color: #5f4f8a;
  border-color: rgba(95, 79, 138, 0.5);
  background: rgba(95, 79, 138, 0.08);
}

/* 關鍵字標籤 */
.keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 1.1rem;
  padding: 0;
  list-style: none;
}

.keywords__item {
  padding: 0.15rem 0.7rem;
  font-size: 0.76rem;
  color: var(--ink-soft);
  border: 1px solid rgba(176, 141, 79, 0.3);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
}

.result-item__summary {
  margin: 0 0 1.1rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--gold);
  font-size: 1.02rem;
  color: var(--ink);
}

/* 「牌義解釋」「建議的綠洲療癒香支」「給你的建議」 */
.meaning-block {
  margin-bottom: 1.1rem;
}

.meaning-block:last-child {
  margin-bottom: 0;
}

.meaning-block__label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  color: var(--gold-deep);
}

.meaning-block__text {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.95;
  color: var(--ink-soft);
}

/* 建議區塊用淡金底色，和解釋區分開 */
.meaning-block--advice .meaning-block__text {
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-sm);
  background: var(--gold-wash);
  border: 1px solid rgba(176, 141, 79, 0.22);
  color: var(--ink);
}

/* 香支名稱連到商品頁，顏色沿用窗格文字，底線提示可以點 */
.incense-link {
  color: inherit;
  text-decoration-color: rgba(122, 92, 40, 0.55);
  text-underline-offset: 0.18em;
}

.incense-link:hover {
  color: var(--gold-deep);
}

.incense-link:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 2px;
  border-radius: 2px;
}

.result-item__element {
  margin: 1.1rem 0 0;
  font-size: 0.75rem;
  color: var(--ink-dim);
}

.result-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.result-actions .btn--ghost {
  margin-top: 0.8rem;
}

/* 按下截圖後的狀態文字（產生中／已儲存／失敗） */
.save-status {
  margin: 0.7rem 0 0;
  min-height: 1.4em; /* 預留高度，文字出現時不會把下方按鈕推動 */
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--gold-deep);
  text-align: center;
}

.save-status--error {
  color: #a33f38;
}

/* 停用中的按鈕（截圖產生期間） */
.btn:disabled {
  cursor: default;
  opacity: 0.65;
  transform: none;
  box-shadow: var(--shadow-sm);
}

/* ---- 官網連結 ---- */
.site-link {
  max-width: 520px;
  margin: 2.2rem auto 0;
  padding-top: 1.8rem;
  text-align: center;
  border-top: 1px solid var(--gold-dim);
}

.site-link__label {
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
  color: var(--ink-dim);
}

.site-link__url {
  display: inline-block;
  padding: 0.55rem 1.5rem;
  font-family: var(--font-display);
  font-size: 0.98rem;
  letter-spacing: 0.06em;
  color: var(--gold-deep);
  text-decoration: none;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  transition: background var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}

.site-link__url:hover {
  background: #ffffff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.site-link__url:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
}

.result-note {
  max-width: 520px;
  margin: 2.4rem auto 0;
  text-align: center;
  font-size: 0.82rem;
  line-height: 1.9;
  color: var(--ink-dim);
}

/* ===========================================================================
   11. RWD 響應式斷點
   桌機優先撰寫，往下逐層調整成適合平板與手機的版面。
   =========================================================================== */

/* ---- 平板以下（≤ 768px）---- */
@media (max-width: 768px) {
  /* 結果改為上下堆疊：牌在上、文字在下 */
  .result-item {
    grid-template-columns: 1fr;
    gap: 1.3rem;
    padding: 1.3rem;
  }

  /*
   * 手機上牌不需要占滿整個寬度，置中並縮小。
   * 這裡必須用 width（而非 max-width）給一個明確寬度：
   * 內層 .tarot-card 的寬度是 100%，百分比需要有確定的父層寬度才能計算，
   * 若只寫 max-width，這個 grid 項目會變成 fit-content 而塌陷成 0 寬。
   */
  .result-item__card-wrap {
    width: min(210px, 60%);
    margin: 0 auto;
  }

  .fan-card {
    width: 60px;
  }

  /* 牌變小了，寬度上限也跟著縮，維持 11 + 11 的兩列排法 */
  .card-fan {
    gap: 6px;
    max-width: 720px;
  }

  .shuffle-card {
    width: 78px;
    height: 132px;
    margin: -66px 0 0 -39px;
  }

  @keyframes shuffle-move {
    0%   { transform: translateX(0) rotate(0deg); }
    25%  { transform: translateX(-62px) rotate(-10deg); }
    50%  { transform: translateX(0) rotate(0deg); }
    75%  { transform: translateX(62px) rotate(10deg); }
    100% { transform: translateX(0) rotate(0deg); }
  }
}

/* ---- 手機（≤ 560px）---- */
@media (max-width: 560px) {
  body {
    line-height: 1.8;
  }

  .site-header {
    padding: 2.2rem 1rem 1.2rem;
  }

  /* 牌陣選項改為單欄，避免兩欄擠成細長條 */
  .spread-options {
    grid-template-columns: 1fr;
  }

  /* 三步驟引導改為直式排列，文字才不會斷得太碎 */
  .guide__steps {
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }

  .guide__step {
    flex-direction: row;
    align-items: center;
    gap: 0.9rem;
    text-align: left;
  }

  .guide__num {
    flex-shrink: 0; /* 避免圓圈被文字擠扁 */
  }

  .fan-card {
    width: 48px;
  }

  .card-fan {
    gap: 0.35rem;
  }

  .btn {
    width: 100%;
    max-width: 320px;
    padding: 0.85rem 1rem;
  }

  .result-item__name {
    font-size: 1.4rem;
  }
}

/* ---- 小尺寸手機（≤ 380px）---- */
@media (max-width: 380px) {
  .fan-card {
    width: 42px;
  }
}

/* ===========================================================================
   12. 無障礙：尊重系統的「減少動態效果」設定
   部分使用者會因前庭功能敏感而對動畫不適，作業系統提供了這個偏好設定，
   網站應該要遵守。這裡把所有動畫縮到幾乎瞬間完成，但功能完全不受影響。
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* 動畫被關閉時，確保原本靠動畫淡入的元素仍然看得見 */
  .fan-card,
  .result-item {
    opacity: 1 !important;
  }
}