/* ============================================================
   元件：匾額 · 神位牌 · 香爐 · 燈 · 按鈕 · 卡片 · 彈窗
   ============================================================ */

/* ================= 導航 ================= */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav);
  transition: background var(--t-base), border-color var(--t-base), backdrop-filter var(--t-base);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(244, 239, 227, .90);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--c-line);
}
.nav-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-6); max-width: var(--w-max); margin-inline: auto;
  padding: var(--s-4) var(--pad-x);
}
.nav-brand { display: flex; align-items: center; gap: var(--s-3); }
.nav-brand .tablet-mini { height: 46px; }
.nav-links { display: flex; align-items: center; gap: clamp(var(--s-3), 2.4vw, var(--s-8)); }
.nav-links a {
  position: relative; font-family: var(--f-title); font-size: var(--fs-small);
  letter-spacing: .12em; color: var(--c-fg-soft); padding-block: var(--s-1);
  transition: color var(--t-fast);
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -4px; height: 1px;
  background: linear-gradient(90deg, var(--c-gold-moon), var(--c-gold-dark));
  transition: right var(--t-base) var(--e-out);
}
.nav-links a:hover, .nav-links a.is-active { color: var(--c-gold-moon); }
.nav-links a:hover::after, .nav-links a.is-active::after { right: 0; }
.nav-toggle { display: none; width: 40px; height: 40px; color: var(--c-gold); }
.nav-toggle svg { width: 100%; height: 100%; }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed; inset: 0 0 0 auto; width: min(78vw, 320px);
    flex-direction: column; align-items: flex-start; justify-content: center;
    gap: var(--s-6); padding: var(--s-12) var(--s-8);
    background: var(--c-paper-2); border-left: 1px solid var(--c-line);
    transform: translateX(100%); transition: transform var(--t-base) var(--e-out);
  }
  .nav-links.is-open { transform: none; }
  .nav-links a { font-size: 1.15rem; }
}
.nav-sound {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-tiny); color: var(--c-fg-soft); letter-spacing: .08em;
}
.nav-sound .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-fg-soft); transition: background var(--t-fast), box-shadow var(--t-fast);
}
.nav-sound.is-on .dot { background: var(--c-gold); box-shadow: 0 0 8px var(--c-gold); }
/* 第三態「樂」：背景樂播放中，圓點緩緩呼吸 */
.nav-sound.is-bgm .dot {
  background: var(--c-gold);
  box-shadow: 0 0 10px var(--c-gold);
  animation: sound-breathe 3.4s ease-in-out infinite;
}
.nav-sound.is-bgm .lbl { color: var(--c-gold-moon); }
@keyframes sound-breathe {
  0%, 100% { opacity: .45; transform: scale(.82); }
  50%      { opacity: 1;   transform: scale(1.18); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-sound.is-bgm .dot { animation: none; opacity: 1; }
}

/* ================= 匾額（豎排） ================= */
.tablet-mini {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 5px; border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, rgba(242,199,92,.10), rgba(242,199,92,.02));
  font-family: var(--f-display); font-weight: 900;
  writing-mode: vertical-rl; text-orientation: upright;
  letter-spacing: .14em; color: var(--c-gold-moon);
}

.tablet {
  display: inline-flex; flex-direction: column; align-items: center; gap: var(--s-3);
}
.tablet-plate {
  position: relative;
  padding: clamp(var(--s-4), 3vw, var(--s-8)) clamp(var(--s-3), 2vw, var(--s-6));
  border: 1px solid var(--c-gold-dark);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(180deg, #3B5266 0%, #2E4A5F 100%);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.10), inset 0 0 0 4px rgba(200,164,92,.45),
              var(--shadow-lift);
}
.tablet-plate::before, .tablet-plate::after {
  content: ""; position: absolute; left: 8px; right: 8px; height: 1px;
  background: var(--c-line);
}
.tablet-plate::before { top: 6px; }
.tablet-plate::after { bottom: 6px; }
.tablet-text {
  writing-mode: vertical-rl; text-orientation: upright;
  font-family: var(--f-display); font-weight: 900;
  font-size: clamp(1.6rem, 5vw, 3rem); letter-spacing: .16em; line-height: 1.1;
}
.tablet-sub {
  font-family: var(--f-title); font-size: var(--fs-small);
  letter-spacing: var(--ls-wide); color: var(--c-gold);
}

/* ================= 神位牌 ================= */
.deity-tablet {
  position: relative; width: clamp(180px, 26vw, 260px); margin-inline: auto;
  aspect-ratio: 1 / 2.6;
  border: 1px solid var(--c-gold-dark);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--c-night-lift), var(--c-night));
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.10), inset 0 0 0 4px rgba(200,164,92,.38),
              var(--shadow-lift);
  overflow: hidden;
}
/* 牌後光暈 */
.deity-tablet::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 38%, rgba(242,199,92,.16), transparent 62%);
  animation: breathe 5s var(--e-inout) infinite;
  pointer-events: none;
}
.dt-inner {
  position: relative; height: 100%;
  display: grid; grid-template-rows: auto 1fr auto;
  padding: clamp(var(--s-3), 2vw, var(--s-5));
  gap: var(--s-3);
}
.dt-top, .dt-bottom { color: var(--c-gold); opacity: var(--o-orn-hi); }
.dt-top svg, .dt-bottom svg { width: 100%; height: auto; }
.dt-top svg { height: 26px; }
.dt-bottom svg { height: 46px; }
.dt-name {
  display: flex; align-items: center; justify-content: center;
  writing-mode: vertical-rl; text-orientation: upright;
  font-family: var(--f-display); font-weight: 900;
  font-size: clamp(1.05rem, 2.4vw, 1.5rem); letter-spacing: .14em; line-height: 1.35;
}
.dt-emblem {
  display: grid; place-items: center;
  color: var(--c-gold-dark); opacity: .95;
}
.dt-emblem svg { width: 62%; height: auto; }

/* ================= 殿堂卡片 ================= */
.hall-grid {
  display: grid; gap: var(--s-6);
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1000px) { .hall-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .hall-grid { grid-template-columns: 1fr; } }
/* 錯位排布：偶數項下移 */
.hall-grid > *:nth-child(even) { transform: translateY(32px); }
@media (max-width: 1000px) { .hall-grid > *:nth-child(even) { transform: none; } }

.hall-card {
  position: relative; display: block; padding: var(--s-6) var(--s-4) var(--s-5);
  border: 1px solid var(--c-line-soft); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--c-paper-2), var(--c-paper-3));
  text-align: center; overflow: hidden;
  transition: transform var(--t-base) var(--e-out), border-color var(--t-base), box-shadow var(--t-base);
}
.hall-card::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(242,199,92,.14), transparent 60%);
  opacity: 0; transition: opacity var(--t-base);
}
.hall-card:hover, .hall-card:focus-visible {
  transform: translateY(-6px);
  border-color: var(--c-gold-dark);
  box-shadow: var(--shadow-lift);
}
.hall-card:hover::before { opacity: 1; }
/* 描金流動邊框 */
.hall-card .stroke-flow {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; opacity: 0; transition: opacity var(--t-base);
}
.hall-card:hover .stroke-flow { opacity: 1; }
.hall-card .stroke-flow rect {
  fill: none; stroke: var(--c-gold); stroke-width: 1;
  stroke-dasharray: 90 460; stroke-dashoffset: 0;
  animation: stroke-run 1.1s linear infinite;
}
.hc-order {
  font-family: var(--f-mono); font-size: var(--fs-tiny);
  color: var(--c-gold); letter-spacing: .16em;
}
.hc-emblem {
  display: grid; place-items: center; height: 92px; margin-block: var(--s-3) var(--s-4);
  color: var(--c-gold);
}
.hc-emblem svg { width: 62px; height: 92px; transition: transform var(--t-base) var(--e-out); }
.hall-card:hover .hc-emblem svg { transform: translateY(-4px) scale(1.06); }
.hc-name {
  writing-mode: vertical-rl; text-orientation: upright; margin-inline: auto;
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem); letter-spacing: .18em;
  height: 5.2em; color: var(--c-gold-moon);
}
.hc-tag { margin-top: var(--s-3); font-size: var(--fs-tiny); color: var(--c-fg-soft); }

/* ================= 按鈕 ================= */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2); padding: var(--s-3) var(--s-8);
  border: 1px solid var(--c-gold-dark); border-radius: var(--radius-sm);
  font-family: var(--f-title); font-size: var(--fs-small);
  letter-spacing: .14em; color: var(--c-gold-moon);
  background: linear-gradient(180deg, rgba(242,199,92,.14), rgba(242,199,92,.03));
  overflow: hidden;
  transition: color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.btn::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,233,168,.45), transparent 60%);
  opacity: 0; transition: opacity var(--t-base);
}
.btn:hover { border-color: var(--c-zhuan-deep); color: var(--c-zhuan-deep); }
.btn:hover::after { opacity: .55; }
.btn:active { transform: scale(.985); }
.btn-solid {
  background: linear-gradient(180deg, var(--c-wa-lift), var(--c-wa) 55%, var(--c-wa-deep));
  color: #2B2B28; border-color: var(--c-wa-deep); font-weight: 700;
}
.btn-solid:hover { color: #1E1E1B; filter: brightness(1.06); }
.btn-ghost { background: none; border-color: var(--c-line); color: var(--c-fg-soft); }
.btn-ghost:hover { color: var(--c-gold-moon); border-color: var(--c-gold); }
.btn-sm { padding: var(--s-2) var(--s-4); font-size: var(--fs-tiny); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* ================= 香爐 ================= */
.incense-stage {
  position: relative; width: clamp(200px, 34vw, 300px);
  margin: var(--s-6) auto 0; aspect-ratio: 4 / 3;
}
.incense-stage svg { width: 100%; height: auto; color: var(--c-gold); }
.incense-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.incense-stage.is-lit .flame { animation: flame-dance 1.6s var(--e-inout) infinite; }
.incense-stage.is-lit .glow { opacity: 1; }
.glow { opacity: 0; transition: opacity var(--t-slow); }

/* ================= 燈盞 ================= */
.lamp {
  position: relative; width: clamp(88px, 14vw, 130px); aspect-ratio: 1 / 1.5;
  margin-inline: auto; color: var(--c-gold-dark);
}
.lamp svg { width: 100%; height: 100%; }
.lamp .halo {
  position: absolute; inset: -60%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,233,168,.55), rgba(242,199,92,.14) 45%, transparent 70%);
  opacity: 0; transform: scale(.5); pointer-events: none;
}
.lamp.is-lit .halo { animation: lamp-bloom 1.2s var(--e-out) forwards; }
.lamp.is-lit .wick { fill: var(--c-gold-moon); filter: drop-shadow(0 0 6px var(--c-gold-moon)); }

/* ================= 印章 ================= */
.seal {
  display: inline-grid; place-items: center;
  width: 54px; height: 54px; border: 2px solid var(--c-zhu); border-radius: 3px;
  color: var(--c-zhu); font-family: var(--f-display); font-weight: 900;
  font-size: .95rem; line-height: 1.05; letter-spacing: .02em;
  writing-mode: vertical-rl; text-orientation: upright;
  opacity: .9; transform: rotate(-4deg);
}

/* ================= 角飾 ================= */
.orn-corner { position: absolute; width: 46px; height: 46px; color: var(--c-gold); opacity: var(--o-orn); pointer-events: none; }
.orn-corner.tl { top: 8px; left: 8px; }
.orn-corner.tr { top: 8px; right: 8px; transform: scaleX(-1); }
.orn-corner.bl { bottom: 8px; left: 8px; transform: scaleY(-1); }
.orn-corner.br { bottom: 8px; right: 8px; transform: scale(-1); }

/* ================= 卡片通用 ================= */
.card {
  position: relative; padding: var(--s-6);
  border: 1px solid var(--c-line-soft); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--c-paper-2), var(--c-paper-3));
}
.card-quote {
  padding: var(--s-4) var(--s-6); margin: var(--s-6) 0;
  border-left: 2px solid var(--c-gold);
  background: linear-gradient(90deg, rgba(242,199,92,.07), transparent);
  font-family: var(--f-title); color: var(--c-gold-moon);
}

/* ================= 標籤 ================= */
.tag {
  display: inline-block; padding: 2px 10px;
  border: 1px solid var(--c-line); border-radius: 999px;
  font-size: var(--fs-tiny); color: var(--c-gold);
  background: rgba(242,199,92,.06); letter-spacing: .06em;
}
.tag-ink { border-color: var(--c-line-ink); color: var(--c-ink-soft); background: rgba(36,28,26,.04); }

/* ================= 表單 ================= */
.field { margin-bottom: var(--s-4); }
.field-label {
  display: block; margin-bottom: var(--s-2);
  font-family: var(--f-title); font-size: var(--fs-small);
  letter-spacing: .1em; color: var(--c-gold);
}
.input, .textarea, .select {
  width: 100%; padding: var(--s-3) var(--s-4);
  border: 1px solid var(--c-line-soft); border-radius: var(--radius-sm);
  background: rgba(255,255,255,.72); color: var(--c-fg);
  font-family: var(--f-body); font-size: var(--fs-small);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.input:focus, .textarea:focus, .select:focus {
  outline: none; border-color: var(--c-wa-deep); background: #fff;
}
.textarea { min-height: 120px; resize: vertical; line-height: 1.9; }
.textarea-tall { min-height: 180px; }
::placeholder { color: rgba(185,172,156,.45); }
.counter { text-align: right; font-family: var(--f-mono); font-size: var(--fs-tiny); color: var(--c-fg-soft); }

/* ================= 彈窗 ================= */
.modal {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: center; padding: var(--pad-x);
  background: var(--c-mask); backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity var(--t-base);
}
.modal.is-open { opacity: 1; pointer-events: auto; }
.modal-box {
  position: relative; width: min(520px, 100%); padding: var(--s-12) var(--s-8) var(--s-8);
  border: 1px solid var(--c-gold-dark); border-radius: var(--radius);
  background: var(--c-paper-2); box-shadow: var(--shadow-lift);
  text-align: center;
  transform: translateY(16px) scale(.98); transition: transform var(--t-base) var(--e-out);
}
.modal.is-open .modal-box { transform: none; }
.modal-close {
  position: absolute; top: var(--s-3); right: var(--s-3);
  width: 34px; height: 34px; color: var(--c-fg-soft);
}
.modal-close:hover { color: var(--c-gold); }

/* ================= 提示條 ================= */
.toast {
  position: fixed; left: 50%; bottom: var(--s-8); z-index: var(--z-toast);
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  padding: var(--s-3) var(--s-6);
  border: 1px solid var(--c-gold-dark); border-radius: var(--radius-sm);
  background: var(--c-paper-2); color: var(--c-mo); border-color: var(--c-line);
  font-size: var(--fs-small); letter-spacing: .06em;
  transition: opacity var(--t-base), transform var(--t-base) var(--e-out);
}
.toast.is-show { opacity: 1; transform: translate(-50%, 0); }

/* ================= 回應區（打字機） ================= */
.response {
  position: relative; margin-top: var(--s-6); padding: var(--s-8) var(--s-6);
  border: 1px solid var(--c-line-soft); border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(200,164,92,.06), transparent),
    var(--c-paper-2);
  min-height: 120px;
}
.response::before {
  content: ""; position: absolute; left: var(--s-6); right: var(--s-6); top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-line), transparent);
}
.response-text {
  font-family: var(--f-title); font-size: 1.0625rem; line-height: 2.15;
  color: var(--c-fg); white-space: pre-wrap;
}
.response-source {
  margin-top: var(--s-4); padding-top: var(--s-3);
  border-top: 1px dashed var(--c-line-soft);
  font-size: var(--fs-tiny); color: var(--c-gold); letter-spacing: .06em;
}
.caret {
  display: inline-block; width: 2px; height: 1.05em; margin-left: 3px;
  background: var(--c-gold); vertical-align: text-bottom;
  animation: blink 1s steps(2) infinite;
}

/* ================= 免責聲明 ================= */
.disclaimer {
  margin-top: var(--s-4); font-size: var(--fs-tiny); line-height: 1.9;
  color: var(--c-mo-faint);
}

/* ================= 進度條（建殿籌建） ================= */
.progress {
  position: relative; height: 8px; border-radius: 999px;
  background: rgba(242,199,92,.12); overflow: hidden;
}
.progress-bar {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--c-gold-dark), var(--c-gold-moon));
  border-radius: 999px;
  transition: width 1.4s var(--e-out);
}
.progress-bar::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  animation: sheen 2.4s linear infinite;
}

/* ================= 時間軸 ================= */
.timeline { position: relative; margin: 0; padding: 0; list-style: none; }
.timeline::before {
  content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 1px;
  background: linear-gradient(180deg, var(--c-gold), rgba(242,199,92,.1));
}
.timeline li { position: relative; padding-left: var(--s-8); margin-bottom: var(--s-8); }
.timeline li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 15px; height: 15px; border-radius: 50%;
  border: 1px solid var(--c-gold); background: var(--c-night);
}
.timeline li.is-done::before { background: var(--c-gold); box-shadow: 0 0 10px rgba(242,199,92,.6); }
.tl-date { font-family: var(--f-mono); font-size: var(--fs-tiny); color: var(--c-gold); letter-spacing: .1em; }
.tl-title { font-family: var(--f-title); font-size: 1.0625rem; margin: var(--s-1) 0 var(--s-2); }
.tl-desc { font-size: var(--fs-small); color: var(--c-fg-soft); }

/* ================= 數字統計 ================= */
.stat-grid { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.stat { text-align: center; padding: var(--s-6) var(--s-3); }
.stat-num {
  font-family: var(--f-display); font-weight: 900;
  font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1;
}
.stat-label { margin-top: var(--s-2); font-size: var(--fs-tiny); letter-spacing: .18em; color: var(--c-fg-soft); }

/* ================= 照片佔位 ================= */
.photo-slot {
  position: relative; margin: 0; overflow: hidden;
  aspect-ratio: 4 / 3; border: 1px dashed var(--c-line-soft);
  border-radius: var(--radius); background:
    linear-gradient(180deg, rgba(200,164,92,.05), rgba(46,74,95,.04));
  display: grid; place-items: center; color: var(--c-gold);
}
.photo-slot svg { width: 46%; height: auto; opacity: .45; }
.photo-slot figcaption {
  position: absolute; bottom: var(--s-2); left: 0; right: 0; text-align: center;
  font-family: var(--f-mono); font-size: var(--fs-tiny); letter-spacing: .1em;
  color: var(--c-mo-faint);
}

/* 匾額（深靛底）須用亮金；神位牌為紙底，沿用紙底深金即可 */
.tablet-plate .gilded {
  background: linear-gradient(180deg, #FFE9A8 0%, #F2C75C 45%, #C08A1E 100%);
  -webkit-background-clip: text;
  background-clip: text;
}