/* ===========================================================
   森之召喚師工坊 · 主樣式
   Vanilla CSS，無框架、無預處理器、無依賴
   =========================================================== */

/* ---------- 變數 ---------- */
:root {
  --forest-black:    #0a0e0c;
  --forest-deep:     #121a15;
  --forest-dark:     #1a2921;
  --forest-mid:      #2d4a3e;
  --forest-moss:     #4a6b5a;
  --forest-mist:     rgba(167, 196, 178, 0.08);
  --parchment:       #e8dcc0;
  --parchment-soft:  #d4c598;
  --parchment-dark:  #baa875;
  --ink:             #1a1410;
  --ink-soft:        #4a4035;
  --gold:            #c9a24d;
  --gold-soft:       #d4b572;
  --gold-faint:      rgba(201, 162, 77, 0.15);
  --mist-blue:       #6b8a99;
  --firefly:         #f5e6a3;

  --serif-en:  "Cinzel", "Cormorant Garamond", "IM Fell English", Georgia, serif;
  --serif-it:  "Cormorant Garamond", "IM Fell English", Georgia, serif;
  --serif-zh:  "Noto Serif TC", "Source Han Serif TC", "PingFang TC", serif;
  --mono:      "Menlo", "Fira Code", Consolas, monospace;

  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-dramatic: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---------- Reset & 基底 ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: var(--forest-black);
  color: var(--parchment);
  font-family: var(--serif-zh);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* 隱藏系統游標，讓 Mori 成為視覺焦點 */
  cursor: none;
}

body { position: relative; }

a { color: var(--gold-soft); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--parchment); }

/* 徹底重置 button 避免瀏覽器預設在 :active 時套 OS 按鈕樣式（黑底黑字） */
button {
  font-family: inherit;
  cursor: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  color: inherit;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
button:focus-visible {
  outline: 2px solid var(--gold-soft);
  outline-offset: 2px;
}

/* ---------- Mori 精靈游標（魔杖） ---------- */
.mori-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 64px; height: 64px;
  pointer-events: none;
  z-index: 10000;
  /* 對齊：杖尖位於 (12, 12)，讓杖尖對齊滑鼠實際點擊位置 */
  transform: translate(-12px, -12px);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
  transition: transform 0.1s var(--ease-soft);
}
.mori-wand {
  width: 100%;
  height: 100%;
  display: block;
  animation: wandTipPulse 2.5s ease-in-out infinite;
}
@keyframes wandTipPulse {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(245,230,163,0.6)); }
  50%      { filter: drop-shadow(0 0 12px rgba(245,230,163,1)) drop-shadow(0 0 24px rgba(201,162,77,0.6)); }
}
.mori-cursor-core {
  position: fixed;
  top: 0; left: 0;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--firefly);
  box-shadow: 0 0 8px var(--firefly), 0 0 16px rgba(245,230,163,0.5);
  pointer-events: none;
  z-index: 10001;
  transform: translate(-50%, -50%);
  opacity: 0.4;
}
.mori-cursor.hover-active {
  transform: translate(-12px, -12px) rotate(-8deg) scale(1.08);
}
.mori-cursor.hover-active .mori-wand {
  animation-duration: 1.2s;
}

/* ---------- 環境粒子（螢火） ---------- */
.particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}
.particle {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--firefly);
  box-shadow: 0 0 8px var(--firefly);
  opacity: 0;
  animation: firefly linear infinite;
}
@keyframes firefly {
  0%   { transform: translateY(100vh) translateX(0) scale(0.6); opacity: 0; }
  10%  { opacity: 0.8; }
  50%  { transform: translateY(50vh) translateX(20px) scale(1); opacity: 1; }
  90%  { opacity: 0.6; }
  100% { transform: translateY(-10vh) translateX(-20px) scale(0.4); opacity: 0; }
}

/* ---------- 音訊切換鈕 ---------- */
.audio-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 42px; height: 42px;
  background: rgba(10,14,12,0.6);
  border: 1px solid rgba(201,162,77,0.3);
  border-radius: 50%;
  color: var(--gold-soft);
  backdrop-filter: blur(6px);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s ease;
}
.audio-toggle:hover {
  background: rgba(201,162,77,0.15);
  border-color: var(--gold);
}

/* ===========================================================
   Scene 架構
   =========================================================== */
.scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.2s var(--ease-soft), visibility 1.2s var(--ease-soft);
  z-index: 1;
}
.scene.active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}
.scene.exiting {
  opacity: 0;
  z-index: 1;
}

/* ===========================================================
   Scene 1: Boot
   =========================================================== */
.scene--boot {
  background: var(--forest-black);
  display: flex;
  align-items: center;
  justify-content: center;
}
.boot-text {
  font-family: var(--serif-en);
  color: var(--gold-faint);
  font-size: 2rem;
  letter-spacing: 1rem;
  animation: bootPulse 3s ease-in-out infinite;
}
@keyframes bootPulse {
  0%, 100% { opacity: 0.2; }
  50%      { opacity: 0.8; }
}

/* ===========================================================
   森林背景共用
   =========================================================== */
.forest-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.forest-layer {
  position: absolute;
  inset: 0;
  transition: transform 6s var(--ease-soft);
}
/* 天空 */
.forest-layer--sky {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(201,162,77,0.08) 0%, transparent 50%),
    linear-gradient(to bottom,
      #0d1612 0%,
      #142018 40%,
      #1a2921 70%,
      #0f1914 100%);
}
/* 霧氣 */
.forest-layer--mist {
  background:
    radial-gradient(ellipse 120% 40% at 50% 70%, var(--forest-mist) 0%, transparent 60%);
  mix-blend-mode: screen;
  animation: mistDrift 18s ease-in-out infinite alternate;
}
.mist--back  { opacity: 0.7; }
.mist--mid   { opacity: 0.5; animation-duration: 26s; }
@keyframes mistDrift {
  0%   { transform: translateX(-3%) scale(1); }
  100% { transform: translateX(3%) scale(1.1); }
}
/* 後排樹 — 用 CSS gradient 模擬剪影 */
.forest-layer--trees-back {
  background:
    /* 樹幹剪影 */
    linear-gradient(to right,
      transparent 0%,
      rgba(10,14,12,0.85) 8%, transparent 10%,
      transparent 18%,
      rgba(10,14,12,0.85) 22%, transparent 24%,
      transparent 35%,
      rgba(10,14,12,0.85) 40%, transparent 42%,
      transparent 55%,
      rgba(10,14,12,0.85) 62%, transparent 64%,
      transparent 75%,
      rgba(10,14,12,0.85) 82%, transparent 84%,
      transparent 95%,
      rgba(10,14,12,0.85) 98%),
    linear-gradient(to top,
      rgba(10,14,12,0.9) 0%,
      rgba(10,14,12,0.5) 40%,
      transparent 60%);
  filter: blur(3px);
  opacity: 0.8;
}
/* 前排樹 — 更深色 */
.forest-layer--trees-front {
  background:
    linear-gradient(to right,
      transparent 0%,
      rgba(0,0,0,0.95) 4%, transparent 6%,
      transparent 15%,
      rgba(0,0,0,0.95) 20%, transparent 22%,
      transparent 48%,
      rgba(0,0,0,0.95) 55%, transparent 57%,
      transparent 72%,
      rgba(0,0,0,0.95) 80%, transparent 82%,
      transparent 92%,
      rgba(0,0,0,0.95) 96%),
    linear-gradient(to top,
      rgba(0,0,0,0.95) 0%,
      rgba(0,0,0,0.7) 30%,
      transparent 55%);
  filter: blur(1px);
}
/* 地面 */
.forest-layer--ground {
  background:
    linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 100%);
  height: 25vh;
  top: auto;
  bottom: 0;
}

/* ===========================================================
   Scene 2: Title
   =========================================================== */
.scene--title { display: flex; align-items: center; justify-content: center; }

.title-content {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 2rem;
  max-width: 700px;
}
.crest {
  margin: 0 auto 1.5rem;
  display: block;
  opacity: 0;
  animation: crestFadeIn 2.2s var(--ease-soft) 0.5s forwards;
  filter: drop-shadow(0 0 20px rgba(201,162,77,0.4));
}
@keyframes crestFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.title {
  opacity: 0;
  animation: fadeUp 2s var(--ease-soft) 1.2s forwards;
}
.title-zh {
  display: block;
  font-family: var(--serif-zh);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--parchment);
  text-shadow: 0 0 30px rgba(201,162,77,0.3);
  margin-bottom: 0.5rem;
}
.title-en {
  display: block;
  font-family: var(--serif-en);
  font-style: italic;
  font-size: clamp(0.9rem, 1.5vw, 1.1rem);
  letter-spacing: 0.15em;
  color: var(--gold-soft);
  opacity: 0.9;
}
.lore {
  opacity: 0;
  animation: fadeUp 2s var(--ease-soft) 2.2s forwards;
  margin: 2.5rem auto 3rem;
  font-size: 1rem;
  line-height: 2;
  color: var(--parchment);
  opacity: 0.9;
  max-width: 560px;
}
.ink-gold { color: var(--gold-soft); font-weight: 500; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 0.95; transform: translateY(0); }
}

/* Enter 按鈕 */
.enter-btn {
  opacity: 0;
  animation: fadeUp 2s var(--ease-soft) 3.2s forwards, btnPulse 4s ease-in-out 5s infinite;
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 1.2rem 3rem;
  background: transparent;
  border: 1px solid var(--gold-soft);
  color: var(--parchment);
  font-family: var(--serif-zh);
  letter-spacing: 0.3em;
  font-size: 1rem;
  transition: all 0.4s var(--ease-soft);
  overflow: hidden;
}
.enter-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(201,162,77,0.25) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.enter-btn:hover::before { opacity: 1; }
.enter-btn:hover {
  border-color: var(--gold);
  color: var(--gold-soft);
}
.enter-btn-en {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--gold-soft);
  opacity: 0.7;
}
@keyframes btnPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,162,77,0.3); }
  50%      { box-shadow: 0 0 30px 5px rgba(201,162,77,0.15); }
}

/* Title scene 白話解釋（奇幻 lore 之後） */
.plain-explainer {
  opacity: 0;
  animation: fadeUp 2s var(--ease-soft) 3s forwards;
  margin: 1.5rem auto 2rem;
  max-width: 540px;
  padding: 1rem 1.4rem;
  background: rgba(10,14,12,0.5);
  border-left: 2px solid var(--gold-soft);
  border-right: 2px solid rgba(201,162,77,0.3);
  border-radius: 2px;
  text-align: left;
  backdrop-filter: blur(4px);
}
.plain-en {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--gold-soft);
  margin-bottom: 0.4rem;
  text-transform: uppercase;
}
.plain-body {
  font-family: var(--serif-zh);
  font-size: 0.9rem;
  line-height: 1.85;
  color: var(--parchment);
  opacity: 0.95;
}
.plain-body strong {
  color: var(--firefly);
  font-weight: 500;
}

/* Workshop 白話三欄介紹（頂部第一眼看到） */
.ws-plain-intro {
  max-width: 1280px;
  margin: 1rem auto 2.5rem;
  padding: 0 2rem;
}
.ws-plain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  background: linear-gradient(to bottom,
    rgba(30,44,36,0.4) 0%,
    rgba(10,14,12,0.5) 100%);
  border-top: 1px solid rgba(201,162,77,0.3);
  border-bottom: 1px solid rgba(201,162,77,0.3);
}
.ws-plain-col {
  padding: 1.2rem 1.4rem;
  border-right: 1px solid rgba(201,162,77,0.15);
}
.ws-plain-col:last-child { border-right: none; }
.ws-plain-label {
  font-family: var(--serif-en);
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.6rem;
  font-style: italic;
}
.ws-plain-text {
  font-family: var(--serif-zh);
  font-size: 0.82rem;
  line-height: 1.8;
  color: var(--parchment);
  opacity: 0.9;
}
.ws-plain-text strong {
  color: var(--firefly);
  font-weight: 500;
}

/* Niche plate 加「這個幹嘛的」一行 */
.plate-effect {
  font-family: var(--serif-zh);
  font-size: 0.72rem;
  line-height: 1.65;
  color: rgba(242, 230, 198, 0.82);
  text-shadow: 0 1px 0 rgba(0,0,0,0.5);
  margin: 0.4rem 0;
  padding: 0 0.3rem;
  position: relative;
  z-index: 2;
  min-height: 2.6em; /* 兩行的穩定高度 */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.niche:hover .plate-effect {
  color: var(--parchment);
}

/* RWD: 三欄變一欄 */
@media (max-width: 820px) {
  .ws-plain-grid { grid-template-columns: 1fr; }
  .ws-plain-col {
    border-right: none;
    border-bottom: 1px solid rgba(201,162,77,0.15);
  }
  .ws-plain-col:last-child { border-bottom: none; }
}

/* Title scene 的「第一次來？」連結 */
.first-timer-link {
  opacity: 0;
  animation: fadeUp 2s var(--ease-soft) 3.8s forwards, firstTimerBreath 3.5s ease-in-out 5s infinite;
  margin-top: 2rem;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.8rem 1.5rem;
  background: transparent;
  border: none;
  color: var(--firefly);
  font-family: var(--serif-zh);
  letter-spacing: 0.2em;
  font-size: 0.88rem;
  cursor: pointer;
  position: relative;
  transition: all 0.3s var(--ease-soft);
}
.first-timer-link::before {
  content: "✧";
  position: absolute;
  left: -1.2rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--firefly);
  font-size: 1rem;
}
.first-timer-link::after {
  content: "✧";
  position: absolute;
  right: -1.2rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--firefly);
  font-size: 1rem;
}
.first-timer-link:hover { color: var(--parchment); transform: translateY(-1px); }
.first-timer-zh { font-weight: 500; }
.first-timer-en {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--gold-soft);
  opacity: 0.75;
}
@keyframes firstTimerBreath {
  0%, 100% { text-shadow: 0 0 0 rgba(245,230,163,0); }
  50%      { text-shadow: 0 0 12px rgba(245,230,163,0.5), 0 0 24px rgba(245,230,163,0.3); }
}

.title-footer {
  opacity: 0;
  animation: fadeUp 2s var(--ease-soft) 4.4s forwards;
  margin-top: 2rem;
  font-family: var(--serif-en);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--mist-blue);
}

/* Workshop 頂部歡迎 banner */
.ws-welcome {
  max-width: 1280px;
  margin: 0 auto 2rem;
  padding: 0 2rem;
}
.ws-welcome-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
  padding: 1.6rem 2rem;
  background:
    radial-gradient(ellipse at 30% 0%, rgba(201,162,77,0.12) 0%, transparent 60%),
    linear-gradient(to bottom, rgba(30,44,36,0.55) 0%, rgba(18,26,21,0.75) 100%);
  border: 1px solid rgba(201,162,77,0.3);
  border-left: 3px solid var(--gold);
  border-radius: 3px;
  box-shadow:
    0 4px 20px rgba(0,0,0,0.5),
    inset 0 0 40px rgba(201,162,77,0.05);
}
.ws-welcome-heading {
  font-family: var(--serif-zh);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--parchment);
  margin-bottom: 0.5rem;
}
.ws-welcome-body {
  font-family: var(--serif-zh);
  font-size: 0.88rem;
  line-height: 1.85;
  color: var(--parchment);
  opacity: 0.8;
}
.ws-welcome-cta {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 1rem 1.8rem;
  background: linear-gradient(to bottom,
    rgba(201,162,77,0.2) 0%,
    rgba(90,65,30,0.35) 100%);
  border: 1px solid var(--gold-soft);
  color: var(--parchment);
  font-family: var(--serif-zh);
  letter-spacing: 0.25em;
  font-size: 0.95rem;
  transition: all 0.3s var(--ease-soft);
  white-space: nowrap;
}
.ws-welcome-cta:hover {
  background: linear-gradient(to bottom,
    rgba(245,230,163,0.3) 0%,
    rgba(120,90,40,0.45) 100%);
  border-color: var(--firefly);
  color: var(--firefly);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(245,230,163,0.2);
}
.ws-welcome-cta-en {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--gold-soft);
  opacity: 0.9;
}

/* 浮動幫助按鈕 — 全 scene 右下角 */
.help-fab {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9500;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.1rem 0.7rem 0.9rem;
  background: linear-gradient(to bottom,
    rgba(30,44,36,0.95) 0%,
    rgba(10,14,12,0.95) 100%);
  border: 1px solid var(--gold-soft);
  border-radius: 999px;
  color: var(--parchment);
  font-family: var(--serif-zh);
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: all 0.3s var(--ease-soft);
  animation: helpFabBreath 3s ease-in-out infinite;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.help-fab:hover {
  border-color: var(--firefly);
  color: var(--firefly);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(245,230,163,0.25);
}
.help-fab-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--forest-deep);
  font-family: var(--serif-en);
  font-weight: 600;
  font-size: 1rem;
  flex-shrink: 0;
}
.help-fab-label {
  font-size: 0.72rem;
  line-height: 1.2;
  text-align: left;
}
@keyframes helpFabBreath {
  0%, 100% { box-shadow: 0 4px 16px rgba(0,0,0,0.5), 0 0 0 0 rgba(201,162,77,0); }
  50%      { box-shadow: 0 4px 16px rgba(0,0,0,0.5), 0 0 20px 2px rgba(201,162,77,0.3); }
}

/* RWD */
@media (max-width: 720px) {
  .ws-welcome-inner { grid-template-columns: 1fr; gap: 1.2rem; }
  .ws-welcome-cta { width: 100%; }
  .help-fab {
    bottom: 12px; right: 12px;
    padding: 0.55rem 0.9rem 0.55rem 0.75rem;
    font-size: 0.75rem;
  }
  .help-fab-label { display: none; }
  .help-fab-mark { width: 22px; height: 22px; font-size: 0.9rem; }
}
.meta-sep { margin: 0 0.6rem; opacity: 0.5; }

/* ===========================================================
   Scene 3: Forest Path
   =========================================================== */
.scene--path .path-bg {
  animation: pathAdvance 4s var(--ease-dramatic) forwards;
}
@keyframes pathAdvance {
  0%   { transform: scale(1);   filter: brightness(1); }
  100% { transform: scale(1.3); filter: brightness(0.85); }
}
.path-back { animation: layerFloatBack 4s ease-in-out forwards; }
.path-front { animation: layerFloatFront 4s ease-in-out forwards; }
.path-mist  { animation: pathMist 4s ease-in-out forwards; }
@keyframes layerFloatBack {
  from { transform: scale(1);   }
  to   { transform: scale(1.15); }
}
@keyframes layerFloatFront {
  from { transform: scale(1);   }
  to   { transform: scale(1.4); }
}
@keyframes pathMist {
  0%   { opacity: 0.4; transform: scale(1); }
  100% { opacity: 0.9; transform: scale(1.3); }
}

.path-narration {
  position: absolute;
  bottom: 15%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-family: var(--serif-zh);
  font-size: 1.1rem;
  letter-spacing: 0.25em;
  color: var(--parchment);
  z-index: 10;
  width: 80%;
  max-width: 600px;
}
.narration-line {
  opacity: 0;
  margin-bottom: 0.8rem;
  text-shadow: 0 2px 15px rgba(0,0,0,0.8);
}
.scene--path.active .narration-line {
  animation: narrationFade 1.8s var(--ease-soft) forwards;
}
.scene--path.active .narration-line:nth-child(1) { animation-delay: 0.3s; }
.scene--path.active .narration-line:nth-child(2) { animation-delay: 1.7s; }
.scene--path.active .narration-line:nth-child(3) { animation-delay: 3.1s; }
@keyframes narrationFade {
  0%   { opacity: 0; }
  25%, 75% { opacity: 1; }
  100% { opacity: 0; }
}

/* ===========================================================
   Scene 4: Shoji Door · 障子拉門（水平滑動）
   =========================================================== */
.scene--door {
  background: radial-gradient(ellipse at center, #15100a 0%, var(--forest-black) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.door-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 60%, rgba(201,162,77,0.06) 0%, transparent 50%),
    linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 40%);
  pointer-events: none;
}

/* 障子場景容器 */
.shoji-scene {
  position: relative;
  width: min(640px, 92vw);
  height: min(580px, 75vh);
  display: flex;
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
}

/* 門內光暈 — 先渲染，會從障子和紙透出來 */
.inner-light {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 55%, rgba(245,230,163,0.4) 0%, rgba(201,162,77,0.15) 30%, transparent 65%),
    radial-gradient(ellipse at 50% 80%, rgba(201,162,77,0.25) 0%, transparent 40%);
  opacity: 0.7;
  animation: innerLightBreath 5s ease-in-out infinite;
  z-index: 1;
}
@keyframes innerLightBreath {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.85; }
}
.scene--door.opening .inner-light {
  animation: innerLightBurst 2.2s ease-out forwards;
}
@keyframes innerLightBurst {
  0%   { opacity: 0.7; }
  50%  { opacity: 1.2; filter: blur(0); }
  100% { opacity: 1; }
}

/* 障子面板 */
.shoji-panel {
  flex: 1;
  position: relative;
  z-index: 2;
  transition: transform 2.4s var(--ease-dramatic);
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.shoji-panel:active { cursor: grabbing; }
.shoji-panel svg {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none; /* 讓 pointer 事件落在 .shoji-panel 本體上 */
  filter:
    drop-shadow(0 4px 20px rgba(0,0,0,0.6))
    drop-shadow(0 0 30px rgba(201,162,77,0.08));
}

/* hover 時微微外張（預告可拉開） */
.scene--door:not(.opening) .shoji-panel:hover:not(:active) {
  transform: translateX(var(--hover-nudge, 0));
}
.shoji-left:hover:not(:active)  { --hover-nudge: -8px; }
.shoji-right:hover:not(:active) { --hover-nudge:  8px; }

/* 開門動畫：水平滑動 */
.scene--door.opening .shoji-left  { transform: translateX(-100%); }
.scene--door.opening .shoji-right { transform: translateX( 100%); }

/* 地板 / 門檻陰影 */
.shoji-floor {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 28%;
  background:
    linear-gradient(to top,
      rgba(0,0,0,0.8) 0%,
      rgba(0,0,0,0.3) 50%,
      transparent 100%);
  pointer-events: none;
  z-index: 3;
}

.door-prompt {
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 10;
}
.door-hint {
  font-family: var(--serif-zh);
  font-size: 0.9rem;
  letter-spacing: 0.3em;
  color: var(--parchment);
  opacity: 0.7;
  margin-bottom: 1rem;
  animation: hintPulse 2s ease-in-out infinite;
}
@keyframes hintPulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}
.door-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 1rem 2.5rem;
  background: transparent;
  border: 1px solid var(--gold-soft);
  color: var(--parchment);
  font-family: var(--serif-zh);
  letter-spacing: 0.2em;
  font-size: 1rem;
  transition: all 0.3s var(--ease-soft);
}
.door-btn:hover {
  background: rgba(201,162,77,0.15);
  color: var(--gold-soft);
}
.door-btn-en {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--gold-soft);
  opacity: 0.7;
}

/* ===========================================================
   Scene 5: Workshop Interior
   =========================================================== */
.scene--workshop {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(201,162,77,0.04) 0%, transparent 50%),
    linear-gradient(to bottom, var(--forest-deep) 0%, var(--forest-black) 100%);
  overflow-y: auto;
  overflow-x: hidden;
}
.scene--workshop::-webkit-scrollbar { width: 8px; }
.scene--workshop::-webkit-scrollbar-track { background: var(--forest-black); }
.scene--workshop::-webkit-scrollbar-thumb { background: var(--forest-mid); border-radius: 4px; }

.ws-header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 2rem;
  background: rgba(10,14,12,0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(201,162,77,0.15);
  z-index: 50;
}
.ws-back {
  display: flex; align-items: center; gap: 0.5rem;
  background: transparent;
  border: none;
  color: var(--gold-soft);
  font-family: var(--serif-zh);
  letter-spacing: 0.15em;
  font-size: 0.85rem;
  transition: color 0.2s;
}
.ws-back:hover { color: var(--parchment); }
.ws-title-bar { text-align: center; }
.ws-title-zh {
  font-family: var(--serif-zh);
  font-size: 1.1rem;
  letter-spacing: 0.5em;
  color: var(--parchment);
  font-weight: 500;
  padding-left: 0.5em; /* 抵消 letter-spacing 造成的右偏 */
}
.ws-title-en {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--gold-soft);
  margin-top: 2px;
}
.ws-counter {
  font-family: var(--serif-en);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--mist-blue);
}

.ws-intro {
  text-align: center;
  padding: 4rem 2rem 3rem;
  font-family: var(--serif-zh);
  font-size: 1rem;
  color: var(--parchment);
  opacity: 0.85;
  line-height: 2;
  max-width: 700px;
  margin: 0 auto;
}

/* ===========================================================
   Artifact Cabinet · Wunderkammer
   12 個珍寶展示櫃，每件魔道具有自己的 niche（凹槽）
   =========================================================== */

/* 工坊背景：深色木紋 + 微弱光照 */
.ws-grid.artifact-cabinet {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem;
  padding: 2rem 2rem 4rem;
  max-width: 1280px;
  margin: 0 auto;
  /* 木質櫃子背景 */
  background:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,0.1) 0px,
      transparent 1px,
      transparent 3px,
      rgba(0,0,0,0.05) 4px),
    radial-gradient(ellipse at 50% 0%, rgba(201,162,77,0.06) 0%, transparent 70%),
    linear-gradient(to bottom, #1d130a 0%, #0f0905 100%);
  border-radius: 4px;
  box-shadow:
    inset 0 2px 8px rgba(0,0,0,0.8),
    inset 0 0 60px rgba(0,0,0,0.4),
    0 10px 40px rgba(0,0,0,0.6);
}

/* === 單一 niche（凹槽） === */
.niche {
  position: relative;
  padding: 0;
  background: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  opacity: 0;
  animation: nicheEnter 1s var(--ease-soft) forwards;
}
@keyframes nicheEnter {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 凹槽主體 — 內凹效果（inner shadow 製造深度） */
.niche-chamber {
  position: relative;
  height: 220px;
  /* 內部：深木 + 微弱暖光從中心滲出 */
  background:
    radial-gradient(ellipse at 50% 55%, rgba(245,230,163,0.10) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 80%, rgba(201,162,77,0.06) 0%, transparent 55%),
    linear-gradient(to bottom, #0a0604 0%, #140d07 50%, #08050a 100%);
  border: 1px solid rgba(0,0,0,0.8);
  border-top: 1px solid rgba(0,0,0,0.95);
  border-radius: 3px 3px 0 0;
  /* 內凹陰影：上深下淺 */
  box-shadow:
    inset 0 4px 12px rgba(0,0,0,0.9),
    inset 0 -2px 6px rgba(0,0,0,0.6),
    inset 3px 0 8px rgba(0,0,0,0.5),
    inset -3px 0 8px rgba(0,0,0,0.5);
  overflow: hidden;
  transition: all 0.5s var(--ease-soft);
}
/* 背景牆紋理 */
.niche-backwall {
  position: absolute;
  inset: 6px;
  background:
    linear-gradient(to bottom, rgba(40,26,16,0.4) 0%, transparent 30%),
    linear-gradient(135deg, rgba(0,0,0,0.3) 0%, transparent 50%);
  pointer-events: none;
  opacity: 0.6;
}

/* 暖光圈 — 從底座後方投射 */
.niche-lighting {
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 70%;
  background:
    radial-gradient(ellipse at center 80%,
      rgba(245,230,163,0.25) 0%,
      rgba(201,162,77,0.12) 30%,
      transparent 65%);
  filter: blur(6px);
  pointer-events: none;
  animation: nicheLightBreath 6s ease-in-out infinite;
  animation-delay: var(--float-delay, 0ms);
}
@keyframes nicheLightBreath {
  0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(0.95); }
  50%      { opacity: 1;   transform: translateX(-50%) scale(1.02); }
}

/* 魔道具本體（icon 浮在 niche 中） */
.niche-artifact {
  position: absolute;
  top: 28%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 64px;
  height: 64px;
  color: var(--gold-soft);
  z-index: 2;
  animation: nicheFloat 5s ease-in-out infinite;
  animation-delay: var(--float-delay, 0ms);
  filter:
    drop-shadow(0 4px 10px rgba(0,0,0,0.7))
    drop-shadow(0 0 12px rgba(201,162,77,0.25));
  transition: all 0.4s var(--ease-soft);
}
.niche-artifact svg {
  width: 100%;
  height: 100%;
  display: block;
}
@keyframes nicheFloat {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, -5px); }
}

/* 底座 — 石頭 / 木質小檯 */
.niche-pedestal {
  position: absolute;
  bottom: 16%;
  left: 32%;
  right: 32%;
  height: 10px;
  background:
    linear-gradient(to bottom, #3a2a18 0%, #1d1308 70%, #000 100%);
  border-radius: 1px;
  box-shadow:
    0 -1px 0 rgba(201,162,77,0.15),
    0 4px 10px rgba(0,0,0,0.8);
  z-index: 1;
}
.niche-pedestal::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    rgba(0,0,0,0.3) 0px,
    transparent 1px,
    transparent 2px);
  opacity: 0.6;
}

/* 地面陰影（魔道具下方的暗影） */
.niche-floor-shadow {
  position: absolute;
  bottom: 14%;
  left: 38%;
  right: 38%;
  height: 5px;
  background: radial-gradient(ellipse at center,
    rgba(0,0,0,0.8) 0%,
    transparent 70%);
  z-index: 1;
  filter: blur(2px);
}

/* 銅色名牌 */
.niche-plate {
  position: relative;
  padding: 0.7rem 0.6rem 0.8rem;
  background:
    linear-gradient(to bottom,
      #8b6d35 0%,
      #6b5128 20%,
      #5c4421 50%,
      #4a3618 80%,
      #3a2a13 100%);
  border-radius: 0 0 3px 3px;
  box-shadow:
    0 4px 8px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(201,162,77,0.3),
    inset 0 -1px 0 rgba(0,0,0,0.5);
  text-align: center;
  /* 銅紋 */
  position: relative;
}
.niche-plate::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    rgba(0,0,0,0.05) 0px,
    transparent 1px,
    transparent 3px,
    rgba(255,255,255,0.03) 4px);
  border-radius: inherit;
  pointer-events: none;
}
.plate-name-zh {
  font-family: var(--serif-zh);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: #f2e6c6;
  text-shadow:
    0 1px 0 rgba(0,0,0,0.5),
    0 2px 4px rgba(0,0,0,0.4);
  margin-bottom: 0.15rem;
  position: relative;
  z-index: 2;
}
.plate-name-en {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: rgba(242, 230, 198, 0.8);
  text-shadow: 0 1px 0 rgba(0,0,0,0.5);
  position: relative;
  z-index: 2;
  margin-bottom: 0.55rem;
}
/* 系別標記 — 底部一行，icon + 文字居中 */
.plate-school {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.2rem 0.65rem;
  margin: 0.1rem auto 0;
  border-top: 1px solid rgba(201,162,77,0.35);
  border-bottom: 1px solid rgba(0,0,0,0.5);
  font-family: var(--serif-zh);
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  color: #f7e8bf;
  background: linear-gradient(to bottom,
    rgba(201,162,77,0.25) 0%,
    rgba(90,65,30,0.35) 100%);
  text-shadow:
    0 1px 0 rgba(0,0,0,0.6),
    0 0 8px rgba(201,162,77,0.3);
  position: relative;
  z-index: 2;
  min-height: 22px;
}
.plate-school-icon {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #f7e8bf;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.6));
}
.plate-school-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.plate-school-name {
  padding-right: 0.05rem; /* 抵消 letter-spacing 造成的右偏 */
}
.niche:hover .plate-school {
  background: linear-gradient(to bottom,
    rgba(245,230,163,0.35) 0%,
    rgba(120,90,40,0.45) 100%);
  color: #fff;
}
.niche:hover .plate-school-icon { color: #fff; }

/* === Hover 互動 === */
.niche:hover .niche-chamber {
  box-shadow:
    inset 0 4px 12px rgba(0,0,0,0.9),
    inset 0 -2px 6px rgba(0,0,0,0.6),
    inset 3px 0 8px rgba(0,0,0,0.5),
    inset -3px 0 8px rgba(0,0,0,0.5),
    0 0 30px rgba(245,230,163,0.15);
}
.niche:hover .niche-lighting {
  animation: nicheLightBright 0.6s forwards;
}
@keyframes nicheLightBright {
  to {
    opacity: 1.3;
    background:
      radial-gradient(ellipse at center 80%,
        rgba(245,230,163,0.5) 0%,
        rgba(201,162,77,0.25) 30%,
        transparent 65%);
  }
}
.niche:hover .niche-artifact {
  animation-play-state: paused;
  transform: translate(-50%, -10px) scale(1.08);
  color: var(--firefly);
  filter:
    drop-shadow(0 6px 12px rgba(0,0,0,0.8))
    drop-shadow(0 0 20px rgba(245,230,163,0.6));
}
.niche:hover .plate-name-zh { color: #fff; }

/* Active（點擊時的抓取感） */
.niche:active .niche-artifact {
  transform: translate(-50%, -14px) scale(1.12);
  transition: all 0.15s ease-out;
}

/* 每系別的微調色溫（subtle, 不搶戲） */
.niche[data-school="summoning"]    .niche-lighting { background: radial-gradient(ellipse at center 80%, rgba(255,210,140,0.25) 0%, transparent 65%); }
.niche[data-school="illusion"]     .niche-lighting { background: radial-gradient(ellipse at center 80%, rgba(200,220,240,0.22) 0%, transparent 65%); }
.niche[data-school="creation"]     .niche-lighting { background: radial-gradient(ellipse at center 80%, rgba(245,200,160,0.25) 0%, transparent 65%); }
.niche[data-school="transmutation"].niche-lighting { background: radial-gradient(ellipse at center 80%, rgba(230,220,150,0.25) 0%, transparent 65%); }
.niche[data-school="dimensional"]  .niche-lighting { background: radial-gradient(ellipse at center 80%, rgba(180,190,240,0.22) 0%, transparent 65%); }
.niche[data-school="binding"]      .niche-lighting { background: radial-gradient(ellipse at center 80%, rgba(220,180,140,0.25) 0%, transparent 65%); }
.niche[data-school="incantation"]  .niche-lighting { background: radial-gradient(ellipse at center 80%, rgba(230,200,240,0.22) 0%, transparent 65%); }

/* RWD */
@media (max-width: 640px) {
  .ws-grid.artifact-cabinet {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 1rem;
  }
  .niche-chamber { height: 180px; }
  .niche-artifact { width: 52px; height: 52px; }
}

/* Modal 裡的 scroll-icon（保留） */
.scroll-content .scroll-icon svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 8px rgba(26,20,16,0.2));
}

/* ===========================================================
   Title Actions（兩個按鈕並列）
   =========================================================== */
.title-actions {
  display: flex;
  gap: 1.2rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  opacity: 0;
  animation: fadeUp 2s var(--ease-soft) 3.2s forwards;
}
.title-actions .enter-btn,
.title-actions .profile-btn {
  animation: none;  /* 由父容器統一淡入 */
  opacity: 1;
}
.profile-btn {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 1.2rem 2.5rem;
  background: transparent;
  border: 1px solid rgba(201,162,77,0.5);
  color: var(--parchment);
  font-family: var(--serif-zh);
  letter-spacing: 0.3em;
  font-size: 0.92rem;
  transition: all 0.4s var(--ease-soft);
  overflow: hidden;
}
.profile-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(107,138,153,0.2) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.profile-btn:hover::before { opacity: 1; }
.profile-btn:hover {
  border-color: var(--mist-blue);
  color: var(--gold-soft);
}

/* ===========================================================
   Character Scene · 召喚師檔案
   =========================================================== */
.scene--character {
  background: linear-gradient(to bottom, var(--forest-deep) 0%, var(--forest-black) 100%);
  overflow-y: auto;
  overflow-x: hidden;
}
.char-forest-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  z-index: 0;
}
/* 僅在此 scene 啟用時顯示，避免跟其他 scene 的背景疊加 */
.scene:not(.active) .char-forest-bg { opacity: 0; }

.char-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 2rem;
  background: rgba(10,14,12,0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(201,162,77,0.15);
}
.char-back {
  display: flex; align-items: center; gap: 0.5rem;
  background: transparent;
  border: none;
  color: var(--gold-soft);
  font-family: var(--serif-zh);
  letter-spacing: 0.15em;
  font-size: 0.85rem;
}
.char-back:hover { color: var(--parchment); }
.char-title-zh {
  font-family: var(--serif-zh);
  font-size: 1.1rem;
  letter-spacing: 0.5em;
  color: var(--parchment);
  padding-left: 0.5em;
  text-align: center;
}
.char-title-en {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--gold-soft);
  text-align: center;
}
.char-header-spacer { width: 120px; }

.char-layout {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: 280px 1fr 320px;
  gap: 1.5rem;
  padding: 2rem;
  max-width: 1400px;
  margin: 0 auto;
  min-height: calc(100% - 70px);
}

/* 召喚師卡（左欄） */
.char-card {
  align-self: start;
  background: linear-gradient(to bottom, rgba(30,44,36,0.6) 0%, rgba(10,14,12,0.8) 100%);
  border: 1px solid rgba(201,162,77,0.25);
  border-radius: 3px;
  padding: 2rem 1.5rem;
  position: sticky;
  top: 90px;
}
.char-avatar-frame {
  width: 80px; height: 80px;
  margin: 0 auto 1rem;
  color: var(--gold-soft);
  filter: drop-shadow(0 0 15px rgba(201,162,77,0.3));
}
.char-avatar-crest { width: 100%; height: 100%; }
.char-name-zh {
  font-family: var(--serif-zh);
  font-size: 1.3rem;
  letter-spacing: 0.2em;
  color: var(--parchment);
  text-align: center;
  font-weight: 500;
}
.char-name-en {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--gold-soft);
  text-align: center;
  margin-top: 0.3rem;
}
.char-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(201,162,77,0.4), transparent);
  margin: 1.2rem 0;
}
.char-stats { font-family: var(--serif-zh); font-size: 0.8rem; }
.stat-row {
  display: flex;
  justify-content: space-between;
  padding: 0.45rem 0;
  color: var(--parchment);
  opacity: 0.9;
}
.stat-label {
  color: var(--mist-blue);
  letter-spacing: 0.2em;
  font-size: 0.72rem;
}
.stat-value {
  color: var(--parchment);
  letter-spacing: 0.05em;
}
.char-hint {
  font-family: var(--serif-it);
  font-style: italic;
  font-size: 0.8rem;
  color: var(--gold-soft);
  opacity: 0.7;
  text-align: center;
  line-height: 1.8;
}

/* 技能樹（中欄） */
.skill-tree-wrap {
  position: relative;
  padding: 1rem 0 2rem;
}
.skill-tree {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  min-height: 100%;
  position: relative;
  padding: 2rem 0;
}
/* 一條連續的金色主幹貫穿整棵樹 */
.skill-tree::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 3rem;
  bottom: 3rem;
  width: 2px;
  transform: translateX(-1px);
  background: linear-gradient(to bottom,
    rgba(201,162,77,0.6) 0%,
    rgba(201,162,77,0.4) 50%,
    rgba(201,162,77,0.25) 100%);
  z-index: 0;
}
/* 從 root 流向 leaf 的螢火光 */
.skill-tree::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 3rem;
  width: 2px;
  height: 80px;
  transform: translateX(-1px);
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(245,230,163,0.9) 50%,
    transparent 100%);
  filter: blur(1px);
  animation: treeLight 5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  z-index: 1;
  pointer-events: none;
}
@keyframes treeLight {
  0%   { top: 3rem; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: calc(100% - 3rem - 80px); opacity: 0; }
}

.tree-row {
  display: grid;
  grid-template-columns: 1fr 120px 1fr;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: 500px;
  position: relative;
  z-index: 2; /* 在金色主幹之上 */
}

.tree-node {
  grid-column: 2;
  justify-self: center;
  position: relative;
  width: 96px; height: 96px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.node-glow {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,162,77,0.35) 0%, transparent 65%);
  filter: blur(10px);
  animation: nodeGlowPulse 4s ease-in-out infinite;
}
@keyframes nodeGlowPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.08); }
}
.node-ring {
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  border: 2px solid var(--gold-soft);
  background:
    radial-gradient(circle at 40% 35%, rgba(245,230,163,0.2) 0%, transparent 60%),
    radial-gradient(circle, #1a1410 0%, #08050a 100%);
  box-shadow:
    inset 0 0 12px rgba(0,0,0,0.8),
    0 4px 12px rgba(0,0,0,0.6);
  transition: all 0.3s var(--ease-soft);
}
.node-glyph {
  position: relative;
  z-index: 2;
  width: 36px; height: 36px;
  color: var(--gold-soft);
  transition: all 0.3s var(--ease-soft);
}
.node-glyph svg { width: 100%; height: 100%; }
.node-level {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, #5c4421 0%, #3a2a13 100%);
  color: #f2e6c6;
  font-family: var(--serif-en);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  padding: 0.15rem 0.5rem;
  border-radius: 2px;
  border: 1px solid rgba(201,162,77,0.5);
  z-index: 3;
  white-space: nowrap;
}

.tree-node:hover .node-ring {
  border-color: var(--firefly);
  background:
    radial-gradient(circle at 40% 35%, rgba(245,230,163,0.4) 0%, transparent 60%),
    radial-gradient(circle, #1d1810 0%, #0a060a 100%);
}
.tree-node:hover .node-glyph {
  color: var(--firefly);
  transform: scale(1.1);
}

/* 狀態：current（當前階級） */
[data-status="current"] .node-ring {
  border-color: var(--firefly);
  animation: currentPulse 2s ease-in-out infinite;
}
[data-status="current"] .node-glyph { color: var(--firefly); }
[data-status="current"] .node-glow {
  background: radial-gradient(circle, rgba(245,230,163,0.6) 0%, transparent 65%);
}
@keyframes currentPulse {
  0%, 100% { box-shadow: inset 0 0 12px rgba(0,0,0,0.8), 0 0 20px rgba(245,230,163,0.4); }
  50%      { box-shadow: inset 0 0 12px rgba(0,0,0,0.8), 0 0 40px rgba(245,230,163,0.7); }
}

/* 狀態：locked（未達成） */
[data-status="locked"] .node-ring {
  border-color: rgba(201,162,77,0.25);
  background:
    radial-gradient(circle, #0a0604 0%, #030203 100%);
}
[data-status="locked"] .node-glyph { color: rgba(201,162,77,0.3); }
[data-status="locked"] .node-glow { opacity: 0.2; }

/* 節點右側標籤（奇數列居左，偶數列居右 — 視覺對稱） */
.tree-row:nth-child(even) .node-label { grid-column: 3; justify-self: start; text-align: left; padding-left: 1rem; }
.tree-row:nth-child(odd) .node-label  { grid-column: 1; justify-self: end;   text-align: right; padding-right: 1rem; }
.node-label-zh {
  font-family: var(--serif-zh);
  font-size: 1.1rem;
  letter-spacing: 0.2em;
  color: var(--parchment);
  margin-bottom: 0.15rem;
}
.node-label-en {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--gold-soft);
}
[data-status="locked"] .node-label-zh { color: rgba(232,220,192,0.4); }
[data-status="locked"] .node-label-en { color: rgba(201,162,77,0.3); }

/* 任務詳情（右欄，sticky） */
.quest-detail {
  align-self: start;
  position: sticky;
  top: 90px;
  background:
    radial-gradient(ellipse at top, rgba(201,162,77,0.18) 0%, transparent 60%),
    linear-gradient(to bottom, #efe3c7 0%, #d4c598 100%);
  color: var(--ink);
  border: 1px solid var(--parchment-dark);
  border-radius: 2px;
  padding: 2rem 1.5rem 1.8rem;
  box-shadow:
    0 8px 30px rgba(0,0,0,0.5),
    0 0 60px rgba(201,162,77,0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateX(16px);
  transition: all 0.5s var(--ease-soft);
}
.quest-detail.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
.detail-close {
  position: absolute;
  top: 0.6rem;
  right: 0.8rem;
  width: 28px; height: 28px;
  background: transparent;
  border: 1px solid rgba(26,20,16,0.25);
  border-radius: 50%;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1;
}
.detail-close:hover { background: rgba(26,20,16,0.08); }
.detail-level-badge {
  display: inline-block;
  font-family: var(--serif-en);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  color: var(--gold);
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--gold);
  background: rgba(201,162,77,0.1);
  margin-bottom: 1rem;
}
.detail-title {
  font-family: var(--serif-zh);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--ink);
  margin-bottom: 0.2rem;
}
.detail-title-en {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-bottom: 1rem;
}
.detail-divider {
  height: 1px;
  background: var(--parchment-dark);
  margin-bottom: 1rem;
}
.detail-section-label {
  font-family: var(--serif-en);
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.4rem;
  margin-top: 1rem;
}
.detail-section-label:first-of-type { margin-top: 0; }
.detail-body,
.detail-deliverable {
  font-family: var(--serif-zh);
  font-size: 0.88rem;
  line-height: 1.85;
  color: var(--ink);
}
.detail-deliverable { color: var(--ink-soft); font-style: italic; }

/* Transformation（before/after）敘事 */
.transformation { display: flex; flex-direction: column; gap: 0.3rem; }
.transformation-label {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 0.72rem;
  letter-spacing: 0.25em;
  color: var(--gold);
  text-transform: uppercase;
  margin-top: 0.4rem;
}
.transformation-label:first-child { margin-top: 0; }
.transformation-before {
  color: var(--ink-soft);
  padding-left: 0.8rem;
  border-left: 2px solid rgba(26,20,16,0.15);
  font-style: italic;
}
.transformation-arrow {
  text-align: center;
  color: var(--gold);
  font-size: 1.2rem;
  margin: 0.2rem 0;
}
.transformation-after {
  color: var(--ink);
  padding-left: 0.8rem;
  border-left: 2px solid var(--gold);
  font-weight: 500;
}
.transformation-after strong {
  color: var(--forest-deep);
  background: rgba(201,162,77,0.2);
  padding: 0.1rem 0.3rem;
  border-radius: 2px;
}
.detail-link {
  display: block;
  margin-top: 1.5rem;
  padding: 0.6rem;
  text-align: center;
  background: var(--forest-deep);
  color: var(--gold-soft);
  border: 1px solid var(--forest-deep);
  font-family: var(--serif-en);
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-decoration: none;
  transition: all 0.2s;
}
.detail-link:hover { background: var(--forest-mid); color: var(--parchment); text-decoration: none; }

/* RWD */
@media (max-width: 960px) {
  .char-layout {
    grid-template-columns: 1fr;
    padding: 1rem;
  }
  .char-card { position: static; }
  .quest-detail { position: static; }
  .tree-row { grid-template-columns: 1fr 100px 1fr; }
}
@media (max-width: 640px) {
  .title-actions { flex-direction: column; align-items: center; }
  /* 對稱 grid：線在 50% 才會對齊節點中心 */
  .tree-row { grid-template-columns: 1fr 80px 1fr; }
  .tree-node { width: 80px; height: 80px; }
  .node-ring { inset: 8px; }
  .node-glyph { width: 28px; height: 28px; }
  /* 手機：所有 label 統一置於右欄（col3），方便閱讀 */
  .tree-row:nth-child(odd) .node-label,
  .tree-row:nth-child(even) .node-label {
    grid-column: 3;
    justify-self: start;
    text-align: left;
    padding-left: 0.5rem;
    padding-right: 0;
  }
  .node-label-zh { font-size: 0.9rem; }
  .node-label-en { font-size: 0.7rem; }
}

.ws-footer {
  padding: 2rem;
  text-align: center;
  border-top: 1px solid rgba(201,162,77,0.1);
}
.ws-quote {
  font-family: var(--serif-it);
  font-style: italic;
  font-size: 1rem;
  color: var(--gold-soft);
  opacity: 0.8;
  margin-bottom: 1rem;
}
.ws-links {
  font-family: var(--serif-zh);
  font-size: 0.85rem;
  color: var(--parchment);
  opacity: 0.7;
}
.ws-links span { margin: 0 0.5rem; opacity: 0.5; }

/* ===========================================================
   Artifact Modal（卷軸）
   =========================================================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10,14,12,0.85);
  backdrop-filter: blur(8px);
  z-index: 500;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  opacity: 0;
  transition: opacity 0.4s;
}
.modal-backdrop.active {
  display: flex;
  opacity: 1;
}

.scroll-modal {
  position: relative;
  max-width: 560px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  background:
    radial-gradient(ellipse at top, rgba(201,162,77,0.15) 0%, transparent 50%),
    linear-gradient(to bottom, #efe3c7 0%, #d4c598 100%);
  color: var(--ink);
  border: 1px solid var(--parchment-dark);
  border-radius: 2px;
  padding: 3rem 2.5rem 2.5rem;
  box-shadow:
    0 20px 60px rgba(0,0,0,0.6),
    0 0 100px rgba(201,162,77,0.25);
  animation: scrollOpen 0.6s var(--ease-soft);
}
@keyframes scrollOpen {
  from { opacity: 0; transform: scale(0.96) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.scroll-modal::-webkit-scrollbar { width: 6px; }
.scroll-modal::-webkit-scrollbar-thumb { background: var(--parchment-dark); }

.scroll-close {
  position: absolute;
  top: 0.8rem;
  right: 1rem;
  width: 32px; height: 32px;
  background: transparent;
  border: 1px solid rgba(26,20,16,0.2);
  border-radius: 50%;
  color: var(--ink);
  font-size: 1.2rem;
  line-height: 1;
  transition: all 0.2s;
}
.scroll-close:hover {
  background: rgba(26,20,16,0.08);
  border-color: var(--ink);
}

/* Modal 裡的連結：羊皮紙背景（淺色）上，要用深色 */
/* 高特異度確保覆蓋全域 a:hover */
.scroll-modal .scroll-content a:not(.scroll-btn),
.scroll-modal .scroll-lore a,
.scroll-modal .scroll-effect a,
.scroll-modal .scroll-deliverable a,
.scroll-modal p a,
.scroll-modal .register-lore a,
.scroll-modal .register-note a,
.scroll-modal .step-desc a,
.scroll-modal .step-checklist a,
.register-step a {
  color: #1a3d2d;
  text-decoration: none;
  border-bottom: 1.5px solid rgba(201,162,77,0.6);
  padding-bottom: 1px;
  font-weight: 500;
  transition: all 0.2s;
}
.scroll-modal .scroll-content a:not(.scroll-btn):hover,
.scroll-modal .scroll-lore a:hover,
.scroll-modal .scroll-effect a:hover,
.scroll-modal .scroll-deliverable a:hover,
.scroll-modal p a:hover,
.scroll-modal .register-lore a:hover,
.scroll-modal .register-note a:hover,
.scroll-modal .step-desc a:hover,
.scroll-modal .step-checklist a:hover,
.register-step a:hover {
  color: #8b5a00;
  border-bottom-color: #8b5a00;
  background: rgba(201,162,77,0.15);
  padding: 1px 3px;
  margin: 0 -3px;
  border-radius: 2px;
}
/* scroll-btn 是獨立按鈕（非連結樣式），維持自己的樣式 */
.scroll-btn {
  border-bottom: none;
}

.scroll-content .artifact-school-tag {
  display: inline-block;
  font-family: var(--serif-zh);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  color: var(--gold);
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--gold);
  background: rgba(201,162,77,0.1);
  margin-bottom: 1.2rem;
}
.scroll-content .scroll-icon {
  width: 80px;
  height: 80px;
  margin: 0.5rem auto 1rem;
  color: var(--forest-deep);
  display: flex;
  align-items: center;
  justify-content: center;
}
.scroll-content .scroll-icon svg {
  width: 100%;
  height: 100%;
}
.scroll-content .scroll-icon-text-old {
  font-size: 3.5rem;
  text-align: center;
  margin: 0.5rem 0 1rem;
}
.scroll-content .scroll-name-zh {
  font-family: var(--serif-zh);
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--ink);
  text-align: center;
  margin-bottom: 0.3rem;
}
.scroll-content .scroll-name-en {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-soft);
  text-align: center;
  margin-bottom: 0.3rem;
}
.scroll-content .scroll-repo {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-soft);
  text-align: center;
  opacity: 0.6;
  margin-bottom: 2rem;
}
.scroll-content .scroll-section-label {
  font-family: var(--serif-en);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.6rem;
}
.scroll-content .scroll-lore {
  font-family: var(--serif-zh);
  font-size: 1rem;
  line-height: 2;
  font-style: italic;
  color: var(--ink);
  padding-left: 1rem;
  border-left: 2px solid var(--gold);
  margin-bottom: 2rem;
}
.scroll-content .scroll-effect {
  font-family: var(--serif-zh);
  font-size: 0.88rem;
  line-height: 1.9;
  color: var(--ink-soft);
  margin-bottom: 2.2rem;
}
.scroll-content .scroll-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding-top: 1.2rem;
  border-top: 1px dashed var(--parchment-dark);
}
.scroll-btn {
  font-family: var(--serif-en);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.55rem 1.2rem;
  border-radius: 2px;
  text-decoration: none;
  transition: all 0.2s;
}
.scroll-btn-primary {
  background: var(--forest-deep);
  color: var(--gold-soft);
  border: 1px solid var(--forest-deep);
}
.scroll-btn-primary:hover {
  background: var(--forest-mid);
  color: var(--parchment);
}
.scroll-btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink-soft);
}
.scroll-btn-secondary:hover {
  background: rgba(26,20,16,0.08);
}

/* ===========================================================
   Start Your Journey Modal
   =========================================================== */
.register-modal { text-align: center; max-width: 620px; }
.register-crest-svg {
  margin: 0 auto 1rem;
  color: var(--gold);
  display: block;
  filter: drop-shadow(0 0 10px rgba(201,162,77,0.3));
}
.register-title {
  font-family: var(--serif-zh);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  color: var(--ink);
  margin-bottom: 1rem;
}
.register-lore {
  font-family: var(--serif-zh);
  font-size: 0.95rem;
  line-height: 2;
  color: var(--ink-soft);
  margin-bottom: 2rem;
}
.register-steps {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0 auto 1.5rem;
  text-align: left;
}
.register-step {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 1rem;
  padding: 1rem 1.2rem;
  background: rgba(255,255,255,0.3);
  border: 1px solid var(--parchment-dark);
  border-left: 3px solid var(--gold);
  border-radius: 2px;
}
.step-num {
  font-family: var(--serif-zh);
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--gold);
  text-align: center;
  line-height: 1;
  padding-top: 0.3rem;
}
.step-title {
  font-family: var(--serif-zh);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--ink);
  margin-bottom: 0.3rem;
}
.step-desc {
  font-family: var(--serif-zh);
  font-size: 0.82rem;
  line-height: 1.75;
  color: var(--ink-soft);
  margin-bottom: 0.5rem;
}
.step-link {
  font-family: var(--serif-en);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--forest-deep);
  text-decoration: none;
  border-bottom: 1px dotted var(--forest-moss);
}
.step-link:hover { color: var(--gold); text-decoration: none; }
.register-note {
  font-family: var(--serif-it);
  font-style: italic;
  font-size: 0.78rem;
  color: var(--ink-soft);
  opacity: 0.7;
  line-height: 1.8;
}
.register-note a {
  color: var(--forest-deep);
  border-bottom: 1px dotted var(--forest-moss);
}
.register-note a:hover { color: var(--gold); }

/* Step 0 · 準備工具：略帶警示色 */
.register-step.step-prep {
  background: rgba(201,162,77,0.12);
  border-left: 3px solid var(--mist-blue);
}
.step-prep .step-num {
  color: var(--mist-blue);
}
.step-checklist {
  list-style: none;
  padding: 0.6rem 0 0;
  margin: 0.4rem 0 0.6rem;
}
.step-checklist li {
  padding: 0.3rem 0;
  font-family: var(--serif-zh);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--ink);
}
.step-checklist a {
  color: var(--forest-deep);
  border-bottom: 1px dotted var(--forest-moss);
  font-weight: 500;
}
.step-checklist a:hover { color: var(--gold); }

/* Step 2 的指令區塊 */
.step-commands {
  margin: 0.6rem 0 0.8rem;
  padding: 0.8rem 1rem;
  background: rgba(10, 14, 12, 0.9);
  border-radius: 3px;
  border: 1px solid rgba(201, 162, 77, 0.2);
}
.step-commands-label {
  font-family: var(--serif-en);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin: 0 0 0.4rem 0;
  font-style: italic;
}
.step-commands-label:not(:first-child) { margin-top: 0.8rem; }
.step-cmd-block {
  background: transparent;
  color: #e8dcc0;
  font-family: "SF Mono", "Monaco", "Menlo", "Fira Code", Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.7;
  padding: 0.5rem 0;
  margin: 0;
  overflow-x: auto;
  white-space: pre;
  max-width: 100%;
}

/* 手機：modal 緊貼視窗寬度 + 指令區塊允許換行 */
@media (max-width: 640px) {
  .modal-backdrop { padding: 1rem 0.5rem; }
  .scroll-modal {
    padding: 2.2rem 1.2rem 1.8rem;
    max-width: 100%;
    max-height: 90vh;
  }
  .register-modal { max-width: 100%; }
  .register-step {
    grid-template-columns: 36px 1fr;
    gap: 0.6rem;
    padding: 0.8rem 0.8rem;
  }
  .step-num { font-size: 1.4rem; }
  .step-title { font-size: 0.95rem; }
  .step-desc { font-size: 0.78rem; }
  .step-commands { padding: 0.7rem 0.8rem; }
  .step-cmd-block {
    font-size: 0.72rem;
    /* 強制換行避免撐破 modal */
    white-space: pre-wrap;
    word-break: break-all;
    overflow-x: visible;
  }
  .step-cmd-prompt { font-size: 0.78rem; }
  .step-checklist li { font-size: 0.78rem; }
  .step-sublist { padding-left: 0.8rem; }
}
.step-cmd-block code {
  font-family: inherit;
  color: inherit;
  background: transparent;
  padding: 0;
}
.step-cmd-prompt {
  color: var(--firefly);
  border-left: 2px solid var(--firefly);
  padding-left: 0.6rem;
  font-style: italic;
  font-family: var(--serif-zh);
  font-size: 0.85rem;
  line-height: 1.85;
  white-space: pre-wrap;
}


/* ===========================================================
   Workshop big CTA + journey footer
   =========================================================== */
.ws-journey-cta {
  padding: 2.5rem 1rem 2rem;
  text-align: center;
  border-top: 1px solid rgba(201,162,77,0.15);
  margin-top: 2rem;
}
.ws-big-cta {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 1.2rem 3rem;
  margin-top: 1.5rem;
  background: transparent;
  border: 1px solid var(--gold-soft);
  color: var(--parchment);
  font-family: var(--serif-zh);
  letter-spacing: 0.3em;
  font-size: 0.95rem;
  transition: all 0.4s var(--ease-soft);
  position: relative;
  overflow: hidden;
}
.ws-big-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(201,162,77,0.25) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.ws-big-cta:hover::before { opacity: 1; }
.ws-big-cta:hover {
  border-color: var(--gold);
  color: var(--gold-soft);
  letter-spacing: 0.4em;
}
.cta-zh { position: relative; z-index: 2; }
.cta-en {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--gold-soft);
  opacity: 0.8;
  position: relative;
  z-index: 2;
}

/* ===========================================================
   RWD
   =========================================================== */
@media (max-width: 720px) {
  html, body { font-size: 15px; }
  .ws-header { padding: 1rem; }
  .ws-title-zh { font-size: 0.95rem; letter-spacing: 0.3em; }
  .ws-grid { grid-template-columns: 1fr; gap: 1.2rem; padding: 0 1rem 3rem; }
  .scroll-modal { padding: 2.5rem 1.5rem 2rem; }
  .lore { font-size: 0.9rem; }
  body { cursor: auto; } /* 手機用系統游標 */
  button { cursor: pointer; }
  .mori-cursor, .mori-cursor-core { display: none; }
}

/* 偏好：關閉動畫（無障礙） */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01s !important;
    transition-duration: 0.01s !important;
  }
}