/* ==========================================================
   浪台灣 抽籤頁 /oracle/index.html
   ----------------------------------------------------------
   只服務這一頁，style.css 一行不動。三題的文字與 data-value 綁著配對演算法，
   這裡**只改外觀**，一個字都沒動。

   v2 設計方向：「一張籤紙」
   測驗區從「白底上的一排表單」改成一張浮在紙色地上的籤紙——
   紅頭、紙紋、墨字，跟結果頁的紙感能量卡同一套語彙。
   這頁是全站唯一的入口儀式，需要一個看得見、記得住的主體。
   ========================================================== */

/* ---------- 第一屏：加一顆起點 ---------- */
.oracle-start {
  margin-top: 26px; height: 52px; padding: 0 30px; font-size: 1.02rem;
}
.oracle-hero-note {
  margin: 14px 0 0; font-size: .84rem; letter-spacing: .04em; color: var(--c-text-muted);
}

/* ---------- 測驗區：紙色地，把籤紙托起來 ---------- */
.oracle-sec {
  padding-top: 56px; padding-bottom: 88px; scroll-margin-top: 76px;
  background: linear-gradient(180deg, #FBF7F6 0%, #F7F7F8 100%);
}
.oracle-question { max-width: 800px; }

/* ---------- 籤紙本體 ---------- */
.oracle-card {
  position: relative; overflow: hidden;
  padding: 30px 34px 32px; border-radius: 18px;
  background: linear-gradient(180deg, #FFFDFC 0%, #FFF9F7 58%, #FFFDFC 100%);
  border: 1px solid #F1E6E7;
  box-shadow: 0 14px 38px rgba(27, 26, 28, .08);
}
/* 給個底高，換題與進入「分析中」時籤紙不會忽然縮一截 */
@media (min-width: 640px) { .oracle-card { min-height: 470px; } }
/* 紅頭：籤紙最好認的一條 */
.oracle-card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 4px;
  background: linear-gradient(90deg, var(--c-accent) 0%, #F0798C 62%, #F7C2CB 100%);
}
@media (max-width: 640px) {
  .oracle-card { padding: 24px 20px 26px; border-radius: 14px; }
  .oracle-sec { padding-top: 40px; padding-bottom: 64px; }
}

/* 進度：數字 + 三段條，看得出第幾題／共幾題；下面壓一條紙紋橫線 */
.oracle-progress {
  display: flex; align-items: center; gap: 16px;
  padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid #F3E9EA;
}
.oracle-step-label {
  margin: 0; flex: none;
  font-family: var(--font-display); font-weight: 700; font-size: .92rem;
  color: var(--c-text-faint); letter-spacing: .06em;
}
.oracle-step-label span { font-size: 1.3rem; color: var(--c-accent); }
.oracle-bars { display: flex; gap: 8px; flex: 1; }
.oracle-bars span {
  flex: 1; height: 4px; border-radius: 2px; background: #EFE4E5;
  transition: background-color .3s var(--ease);
}
.oracle-bars span.done { background: var(--c-accent); }

.oracle-step h3 {
  margin: 0 0 18px; font-size: 1.36rem; line-height: 1.45; color: var(--c-ink);
  letter-spacing: -.01em;
}

/* ---------- 三題改成大卡片（只有外觀，文字與 data-value 未動）---------- */
.oracle-question .oracle-options { display: grid; gap: 12px; margin-top: 18px; }
@media (min-width: 640px) {
  .oracle-question .oracle-options { grid-template-columns: repeat(2, 1fr); }
}
.oracle-question .oracle-option {
  position: relative; display: flex; align-items: center; min-height: 76px;
  padding: 18px 46px 18px 22px; text-align: left;
  font-size: 1.04rem; line-height: 1.5; color: var(--c-ink);
  background: #fff; border: 1px solid #EEE4E5; border-radius: 14px;
  cursor: pointer;
  transition: border-color .18s var(--ease), background-color .18s var(--ease),
              transform .18s var(--ease), box-shadow .18s var(--ease);
}
/* 右側箭頭＝點了會前進的暗示（不用彩色 emoji，維持黑墨骨架） */
.oracle-question .oracle-option::after {
  content: "→"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-display); color: #D9CDCE; font-size: 1.05rem;
  transition: color .18s var(--ease), transform .18s var(--ease);
}
.oracle-question .oracle-option:hover {
  border-color: var(--c-accent); background: #FFF6F7;
  transform: translateY(-2px); box-shadow: 0 10px 24px rgba(226, 62, 92, .13);
}
.oracle-question .oracle-option:hover::after {
  color: var(--c-accent); transform: translate(3px, -50%);
}
.oracle-question .oracle-option.selected {
  border-color: var(--c-accent); background: rgba(226, 62, 92, .07);
}

/* 換題時整批選項錯開淡入：一次高潮動作，比到處放小動畫有感 */
@keyframes optIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
.oracle-step:not([hidden]) .oracle-option { animation: optIn .34s var(--ease) both; }
.oracle-option:nth-child(1)  { animation-delay: .02s; }
.oracle-option:nth-child(2)  { animation-delay: .06s; }
.oracle-option:nth-child(3)  { animation-delay: .10s; }
.oracle-option:nth-child(4)  { animation-delay: .14s; }
.oracle-option:nth-child(5)  { animation-delay: .18s; }
.oracle-option:nth-child(6)  { animation-delay: .22s; }
.oracle-option:nth-child(7)  { animation-delay: .26s; }
.oracle-option:nth-child(8)  { animation-delay: .30s; }
.oracle-option:nth-child(9)  { animation-delay: .34s; }
.oracle-option:nth-child(10) { animation-delay: .38s; }
.oracle-option:nth-child(11) { animation-delay: .42s; }
.oracle-option:nth-child(12) { animation-delay: .46s; }

/* 星座那題維持四欄小卡（12 個選項，做成大卡會太長） */
.oracle-question .oracle-options--zodiac { grid-template-columns: repeat(4, 1fr); gap: 10px; }
.oracle-question .oracle-options--zodiac .oracle-option {
  flex-direction: column; justify-content: center; gap: 6px;
  min-height: 92px; padding: 14px 8px; text-align: center; font-size: .94rem;
}
.oracle-question .oracle-options--zodiac .oracle-option::after { content: none; }
.oracle-question .oracle-options--zodiac .zodiac-sym {
  font-size: 1.7rem; line-height: 1; color: var(--c-slate);
  transition: color .18s var(--ease);
}
.oracle-question .oracle-options--zodiac .oracle-option:hover .zodiac-sym,
.oracle-question .oracle-options--zodiac .oracle-option.selected .zodiac-sym { color: var(--c-accent); }
@media (max-width: 560px) {
  .oracle-question .oracle-options--zodiac { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- 上一題：選錯了不用重整整頁 ---------- */
.oracle-backwrap { margin: 16px 0 0; min-height: 22px; }
.oracle-back {
  background: none; border: none; padding: 0; cursor: pointer;
  font-size: .92rem; color: var(--c-text-muted);
  transition: color .18s var(--ease);
}
.oracle-back:hover { color: var(--c-accent); }
.oracle-back[hidden] { display: none; }

/* ---------- 分析中（800–1200ms，逐項打勾）----------
   用詞只寫「分析中」——這裡沒有生成任何內容，寫「AI 正在生成」是不實陳述。
   已經在籤紙裡面了，不再自己套一層白框。 */
.oracle-analyzing { max-width: 400px; margin: 10px auto 6px; padding: 8px 0; }
.oa-t {
  margin: 0 0 18px; text-align: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.04rem;
  letter-spacing: .16em; color: var(--c-ink);
}
.oa-t::after {
  content: ""; display: inline-block; width: 1.4em; text-align: left;
  animation: oaDots 1s steps(4, end) infinite;
}
@keyframes oaDots { 0% { content: ""; } 25% { content: "・"; } 50% { content: "・・"; } 75% { content: "・・・"; } }
.oa-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.oa-list li {
  display: flex; align-items: center; gap: 11px;
  font-size: .95rem; color: var(--c-text-muted);
  opacity: .38; transition: opacity .25s var(--ease), color .25s var(--ease);
}
.oa-list li::before {
  content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid #E4D7D8; background: transparent;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.oa-list li.done { opacity: 1; color: var(--c-ink); }
.oa-list li.done::before {
  border-color: var(--c-accent); background: var(--c-accent);
  /* 打勾用遮罩畫，不放圖檔 */
  -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'><circle cx='9' cy='9' r='9' fill='black'/></svg>");
          mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'><circle cx='9' cy='9' r='9' fill='black'/></svg>");
}
.oa-list li.done::after {
  content: "✓"; margin-left: -29px; width: 18px; text-align: center;
  color: #fff; font-size: .74rem; line-height: 18px;
}
@media (prefers-reduced-motion: reduce) {
  .oa-t::after { animation: none; content: "・・・"; }
  .oa-list li { transition: none; }
  .oracle-step:not([hidden]) .oracle-option { animation: none; }
}

/* ---------- 抽籤頁底部：給不想做測驗的人一條路 ----------
   12 人格原本擠在這頁下半，跟測驗搶注意力，中間還得靠一條分隔線硬切。
   拆成獨立的 /oracle/personas.html 之後，這頁從頭到尾只做一件事：抽籤。 */
.oracle-alt {
  max-width: 800px; margin: 26px auto 0; text-align: center;
  font-size: .95rem; color: var(--c-text-muted);
}
.oracle-alt a { font-weight: 600; }

/* 頁尾全站有 96px 的上緣留白。平常最後一區是白底，看不出來；
   這頁最後一區有紙色底，那 96px 就變成頁尾上面一條白帶。
   （oracle.css 只有這兩頁載入，所以這條不會影響其他頁。）
   收掉之後紙色地直接接上頁尾底色（兩邊都是 #F7F7F8），留白改由區塊自己的內距負責。 */
.footer { margin-top: 0; }

/* ---------- 12 人格總覽頁 /oracle/personas.html ---------- */
.persona-page { padding-top: 56px; padding-bottom: 96px; }

/* style.css 的 .persona-card img 寫了 aspect-ratio:1/1，但 HTML 的 height="300"
   是呈現屬性、會把高度釘死成 300px，aspect-ratio 因此完全沒生效，圖被拉成直式。
   補 height:auto 讓正方形真的成立。（全站只有人格卡用 .persona-card） */
.persona-card img { height: auto; }

.persona-back {
  margin: 34px 0 0; text-align: center; font-size: .95rem; color: var(--c-text-muted);
}
.persona-back a { font-weight: 600; }