@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@400;600;700;900&family=Noto+Sans+TC:wght@300;400;500;700;900&display=swap');
html {
  color-scheme: dark;
  scroll-behavior: smooth;
}

body {
  background: #0C0805;
  font-family: var(--font-tc-sans);
  color: #CBBFA8;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: rgba(201, 162, 39, 0.85);
  color: #17110B;
}

/* ---- 捲軸 ---- */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 162, 39, 0.4) #14100B;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: #14100B; }
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(201,162,39,.55), rgba(168,134,31,.35));
  border-radius: 8px;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(201, 162, 39, 0.7); }

/* ---- 金色文字 ---- */
.gold-text {
  background: linear-gradient(178deg, #FBF3DC 0%, #EAD196 34%, #C9A227 66%, #8F6D14 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gold-text-soft {
  background: linear-gradient(178deg, #F5E7C1 0%, #DDB968 50%, #A8861F 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- 金色髮絲線 ---- */
.gold-hairline {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(201,162,39,.55) 50%, transparent 100%);
}
.gold-hairline-v {
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, rgba(201,162,39,.45) 50%, transparent 100%);
}

/* ---- 紋路分隔線（回紋 + 菱形寶珠） ---- */
.ornament-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  --og: rgba(201,162,39,.75);
}
.ornament-divider::before,
.ornament-divider::after {
  content: "";
  height: 1px;
  width: min(180px, 28vw);
  background: linear-gradient(90deg, transparent, rgba(201,162,39,.6));
}
.ornament-divider::after { background: linear-gradient(90deg, rgba(201,162,39,.6), transparent); }
.ornament-divider .od-gem {
  width: 9px; height: 9px;
  transform: rotate(45deg);
  border: 1px solid var(--og);
  background: linear-gradient(135deg, rgba(234,209,150,.9), rgba(168,134,31,.7));
  box-shadow: 0 0 8px rgba(201,162,39,.5);
}
.ornament-divider .od-gem.small { width: 5px; height: 5px; opacity: .65; }

/* ---- 廟宇如意雲紋：雙勾雲頭、內捲雲心、首尾相接的雲氣 ---- */
.fret-strip {
  height: 24px;
  min-height: 24px;
  background-image: url("./temple-assets/cloud-scroll.svg");
  background-size: 90px 24px;
  background-repeat: repeat-x;
  background-position: center;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 16px, black calc(100% - 16px), transparent);
  mask-image: linear-gradient(90deg, transparent, black 16px, black calc(100% - 16px), transparent);
  opacity: .8;
}

/* ---- 金框（雙層邊 + 四角托角） ----
   圓角規則（外圓內圓 / 外方內方）：
   - 外層圓角由 --gfr 控制（預設 12px），內層細框自動內縮 5px 並同步圓角；
   - 四角托角為「騎在內框角上」的金屬托件，圓角版的彎曲弧度對齊內框圓角；
   - 方角卡片加 .gold-sq：--gfr 歸零，外框、內框、托角全數轉為直角。 */
.gold-frame {
  --gfr: 12px;
  position: relative;
  border: 1px solid rgba(201, 162, 39, 0.35);
  border-radius: var(--gfr);
  background: linear-gradient(160deg, rgba(38,29,18,.92) 0%, rgba(23,17,11,.94) 55%, rgba(20,15,9,.96) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(201, 162, 39, 0.10),
    inset 0 1px 0 rgba(245, 231, 193, 0.06),
    0 10px 40px rgba(0, 0, 0, 0.45);
}
.gold-frame::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(201, 162, 39, 0.16);
  pointer-events: none;
  border-radius: max(calc(var(--gfr) - 5px), 0px);
}
/* 四角金色托角（圓角版）：弧度 = 內框圓角（--gfr − 5px），外圓 → 內圓 */
.gold-corners::after {
  content: "";
  position: absolute;
  inset: 5px;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='M1 13 V8 Q1 1 8 1 H13' fill='none' stroke='%23DDB968' stroke-opacity='0.92' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='M21 13 V8 Q21 1 14 1 H9' fill='none' stroke='%23DDB968' stroke-opacity='0.92' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='M1 9 V14 Q1 21 8 21 H13' fill='none' stroke='%23DDB968' stroke-opacity='0.92' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='M21 9 V14 Q21 21 14 21 H9' fill='none' stroke='%23DDB968' stroke-opacity='0.92' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 22px 22px;
  background-position: left top, right top, left bottom, right bottom;
}
/* 方角版：外框方角 → 內框方角、四托角直角（外方 → 內方） */
.gold-sq { --gfr: 0px; }
.gold-sq.gold-corners::after {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='M1 13 V1 H13' fill='none' stroke='%23DDB968' stroke-opacity='0.92' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='M21 13 V1 H9' fill='none' stroke='%23DDB968' stroke-opacity='0.92' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='M1 9 V21 H13' fill='none' stroke='%23DDB968' stroke-opacity='0.92' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='M21 9 V21 H9' fill='none' stroke='%23DDB968' stroke-opacity='0.92' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---- 表單：金邊紋路輸入框 ---- */
.t-input, .t-select, .t-textarea {
  width: 100%;
  background: #150F09;
  border: 1px solid rgba(201, 162, 39, 0.28);
  border-radius: 0.5rem;
  padding: 0.7rem 0.95rem;
  color: #EDE3CC;
  font-size: 0.95rem;
  line-height: 1.5;
  transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.5);
}
.t-input::placeholder, .t-textarea::placeholder { color: rgba(203, 191, 168, 0.38); }
.t-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23C9A227' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; padding-right: 2.4rem; }
.t-select option { background: #1C150E; color: #EDE3CC; }
.t-textarea { min-height: 108px; resize: vertical; }
.t-input:focus, .t-select:focus, .t-textarea:focus {
  outline: none;
  border-color: rgba(221, 185, 104, 0.75);
  box-shadow:
    inset 0 1px 3px rgba(0,0,0,.5),
    0 0 0 1px rgba(201, 162, 39, 0.35),
    0 0 22px rgba(201, 162, 39, 0.14);
}
.t-input.t-error, .t-select.t-error, .t-textarea.t-error {
  border-color: rgba(201, 74, 62, 0.85);
  box-shadow: 0 0 0 1px rgba(201, 74, 62, 0.3), 0 0 16px rgba(201, 74, 62, 0.12);
}
.t-input:disabled, .t-textarea:disabled, .t-select:disabled {
  opacity: .55; cursor: not-allowed; background: #120D08;
}

/* ---- 按鈕 ---- */
.btn-gold {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  background: linear-gradient(175deg, #F0DA9C 0%, #DDB968 38%, #C9A227 72%, #A8861F 100%);
  color: #2A1E08;
  font-weight: 700;
  letter-spacing: 0.06em;
  border: 1px solid rgba(251, 243, 220, 0.5);
  border-radius: 0.5rem;
  padding: 0.72rem 1.6rem;
  box-shadow: 0 4px 18px rgba(201, 162, 39, 0.28), inset 0 1px 0 rgba(255, 248, 220, 0.6);
  transition: transform 0.18s ease, box-shadow 0.22s ease, filter 0.2s ease;
  cursor: pointer;
}
.btn-gold:hover { filter: brightness(1.06); box-shadow: 0 6px 26px rgba(201, 162, 39, 0.42), inset 0 1px 0 rgba(255,248,220,.6); transform: translateY(-1px); }
.btn-gold:active { transform: translateY(0); filter: brightness(.97); }
.btn-gold:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.btn-red {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  background: linear-gradient(172deg, #C93A34 0%, #B42318 45%, #8E1F1F 100%);
  color: #F9EDD4;
  font-weight: 600;
  letter-spacing: 0.08em;
  border: 1px solid rgba(234, 209, 150, 0.45);
  border-radius: 0.5rem;
  padding: 0.72rem 1.6rem;
  box-shadow: 0 4px 20px rgba(148, 24, 18, 0.35), inset 0 1px 0 rgba(255, 200, 160, 0.22);
  transition: transform 0.18s ease, box-shadow 0.22s ease, filter 0.2s ease;
  cursor: pointer;
}
.btn-red:hover { filter: brightness(1.12); box-shadow: 0 6px 28px rgba(148, 24, 18, 0.5); transform: translateY(-1px); }
.btn-red:active { transform: translateY(0); }
.btn-red:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  background: rgba(23, 17, 11, 0.55);
  color: #EAD196;
  font-weight: 500;
  letter-spacing: 0.08em;
  border: 1px solid rgba(201, 162, 39, 0.4);
  border-radius: 0.5rem;
  padding: 0.66rem 1.5rem;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.btn-ghost:hover { border-color: rgba(221, 185, 104, 0.8); background: rgba(42, 32, 21, 0.7); box-shadow: 0 0 20px rgba(201, 162, 39, 0.15); }
.btn-ghost:disabled { opacity: .55; cursor: not-allowed; }

/* ---- 狀態徽章 ---- */
.badge { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 3px 12px; font-size: 12.5px; font-weight: 500; letter-spacing: .04em; border: 1px solid transparent; }
.badge-warning { color: #EAD196; background: rgba(201,162,39,.12); border-color: rgba(201,162,39,.45); }
.badge-info { color: #A8C8E8; background: rgba(96,150,210,.10); border-color: rgba(96,150,210,.4); }
.badge-success { color: #9FD8A6; background: rgba(72,160,88,.10); border-color: rgba(72,160,88,.42); }
.badge-danger { color: #F0A9A3; background: rgba(180,35,24,.14); border-color: rgba(201,74,62,.5); }
.badge-muted { color: #A99F8C; background: rgba(160,150,130,.08); border-color: rgba(160,150,130,.3); }

/* ---- 燈籠光暈質感 ---- */
.glow-gold { box-shadow: 0 0 24px rgba(201, 162, 39, 0.25), 0 0 60px rgba(201, 162, 39, 0.1); }
.glow-red { box-shadow: 0 0 26px rgba(180, 35, 24, 0.4), 0 0 70px rgba(180, 35, 24, 0.16); }

/* ---- 雲紋底紋（低調） ---- */
.pattern-cloud {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%23C9A227' stroke-opacity='0.05' stroke-width='1.1'%3E%3Cpath d='M10 84c0-10 8-18 18-18 2-11 11-19 22-19 10 0 19 6 23 15 9 1 16 9 16 18 0 10-8 18-18 18H28c-10 0-18-6-18-14z'/%3E%3Cpath d='M96 30c0-6 5-11 11-11 1-6 7-11 13-11 6 0 11 4 13 9 5 1 9 5 9 11 0 6-5 11-11 11h-22c-7 0-13-4-13-9z'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---- Hero 輪播 ---- */
.kenburns { animation: kenburns 9s ease-out forwards; }
@keyframes kenburns {
  from { transform: scale(1.02) translateX(0); }
  to { transform: scale(1.14) translateX(-1.5%); }
}
.fade-enter-active, .fade-leave-active { transition: opacity 1.1s ease; }
.fade-enter-from, .fade-leave-to { opacity: 0; }

.hero-vignette {
  background:
    radial-gradient(ellipse 90% 65% at 50% 38%, transparent 0%, rgba(12,8,5,.55) 78%, rgba(12,8,5,.92) 100%),
    linear-gradient(180deg, rgba(12,8,5,.72) 0%, rgba(12,8,5,.18) 32%, rgba(12,8,5,.42) 62%, #0C0805 100%);
}

/* ---- Hero 金紙火絮 ----
   燒金紙的餘燼：起於右下、乘熱氣飄向左上，一路翻轉並明滅，尾段燒盡。
   拆成兩層是因為「飛行位移」與「自轉／明滅」節奏不同，而同一元素的 transform
   只能由一個動畫控制。全程只動 transform / opacity，不觸發重繪或重排。 */
.ember {
  position: absolute;
  pointer-events: none;
  animation: emberFly var(--dur, 10s) linear var(--delay, 0s) infinite;
}
@keyframes emberFly {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  7% { opacity: 1; }
  /* 尾段先黯下來再消失，才像燒盡而不是被關掉 */
  74% { opacity: .72; }
  100% { transform: translate3d(var(--dx, -50vw), var(--dy, -60vh), 0); opacity: 0; }
}
.ember > .ember-core {
  display: block;
  width: var(--w, 4px);
  height: var(--h, 5px);
  /* 不規則輪廓：金紙燒剩的是碎片，不是圓點 */
  border-radius: 42% 58% 53% 47% / 56% 44% 60% 40%;
  /* 一點小火光，不是火球：亮心壓在很小的範圍，其餘很快收進橘紅並散掉 */
  background: radial-gradient(circle at 40% 34%,
    rgba(255,234,186,.92) 0%,
    rgba(255,172,72,.82) 38%,
    rgba(226,98,26,.56) 68%,
    rgba(150,36,12,.2) 87%,
    transparent 100%);
  box-shadow: 0 0 var(--glow, 4px) rgba(255,150,54,.36);
  animation:
    emberSpin var(--spind, 5s) linear var(--delay, 0s) infinite,
    emberFlicker var(--flick, 1s) ease-in-out var(--delay, 0s) infinite alternate;
}
/* --spin 固定為 360 的倍數，循環接回原點才不會每圈跳一下 */
@keyframes emberSpin {
  to { transform: rotate(var(--spin, 360deg)); }
}
@keyframes emberFlicker {
  0% { opacity: .42; }
  100% { opacity: 1; }
}
@media (max-width: 640px) {
  /* 手機：火絮數量由 JS 減半，這裡再收斂光暈，降低每顆的繪製成本 */
  .ember > .ember-core { box-shadow: 0 0 var(--glow, 5px) rgba(255,150,54,.42); }
}
@media (prefers-reduced-motion: reduce) {
  .ember { display: none; }
}

/* ---- 頁面轉場 ---- */
.page-fade-enter-active, .page-fade-leave-active { transition: opacity .34s ease, transform .34s ease; }
.page-fade-enter-from { opacity: 0; transform: translateY(14px); }
.page-fade-leave-to { opacity: 0; transform: translateY(-8px); }

/* ---- 換頁香煙：單一即時煙流畫布，只在換頁期間繪製 ---- */
.smoke-veil {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
  visibility: hidden;
}
.smoke-veil.is-active { visibility: visible; }
.smoke-veil canvas {
  display: block;
  width: 100%;
  height: 100%;
}
/* 無 WebGL 時使用短淡場；不遮住操作，也不延長路由交換。 */
.smoke-veil.is-fallback.is-active {
  background: rgb(28 23 19 / .2);
  animation: smoke-fallback 320ms ease-out both;
}
@keyframes smoke-fallback {
  0%, 100% { opacity: 0; }
  35% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .smoke-veil { display: none; }
}

/* ---- 月曆活動閃爍點 ---- */
@keyframes eventBlink {
  0%, 100% { opacity: .3; transform: scale(.75); }
  50% { opacity: 1; transform: scale(1.05); }
}
.event-blink { animation: eventBlink 1.7s ease-in-out infinite; }

/* ---- 叫號 LED ---- */
.led-number {
  font-family: var(--font-tc-serif);
  font-weight: 900;
  color: #FFD98A;
  text-shadow:
    0 0 8px rgba(255, 217, 138, .55),
    0 0 28px rgba(201, 162, 39, .5),
    0 0 80px rgba(180, 35, 24, .45),
    0 2px 0 rgba(87, 32, 8, .8);
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
}
.led-pulse { animation: ledPulse 2.6s ease-in-out infinite; }
@keyframes ledPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.22); }
}

/* ---- 公告跑馬燈 ---- */
.marquee-track {
  display: inline-flex;
  white-space: nowrap;
  animation: marquee 18s linear infinite;
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee-track:hover { animation-play-state: paused; }

/* ---- 如意雲紋表單框：四邊接續、四角收雲，中央保持乾淨 ---- */
.form-panel {
  position: relative;
  border: 1px solid rgba(201, 162, 39, 0.42);
  border-radius: 0.75rem;
  background: linear-gradient(160deg, rgba(36, 27, 16, .96) 0%, rgba(22, 16, 10, .97) 60%);
  box-shadow: inset 0 0 0 1px rgba(201, 162, 39, 0.1), 0 16px 50px rgba(0, 0, 0, .5);
}
/* 九宮格切片只重複邊段，表單變高時不拉長雲頭，也不將橫紋裁成側邊。 */
.form-panel::before {
  content: "";
  position: absolute;
  inset: 5px;
  pointer-events: none;
  border: 16px solid transparent;
  border-image: url("./temple-assets/cloud-frame.svg") 30 / 16px / 0 round;
  opacity: .85;
}
/* 與既有 p-5 / p-6 / p-8 共存，為雲紋和欄位焦點光暈留出空間。 */
.form-panel.gold-corners {
  padding: clamp(1.75rem, 3vw, 2rem);
}
.form-panel.gold-corners::after {
  content: none;
}

/* ---- 卡片 hover ---- */
.card-lift { transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; }
.card-lift:hover { transform: translateY(-5px); box-shadow: 0 18px 46px rgba(0,0,0,.55), 0 0 30px rgba(201,162,39,.09); }

/* ---- 旋轉載入 ---- */
.spin-loader {
  width: 34px; height: 34px;
  border: 3px solid rgba(201, 162, 39, 0.18);
  border-top-color: rgba(221, 185, 104, 0.9);
  border-radius: 999px;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Toast ---- */
.toast-pop { animation: toastIn .3s cubic-bezier(.21,1.02,.73,1) both; }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* ---- 數字字體 ---- */
.num { font-variant-numeric: tabular-nums; }

/* ---- 日期輸入的暗色處理 ---- */
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.8) sepia(0.6) saturate(3) hue-rotate(2deg);
  cursor: pointer;
}
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(0.8) sepia(0.6) saturate(3) hue-rotate(2deg);
  cursor: pointer;
}

/* ===== vue-island 轉寫補丁 ===== */
/* body 取代原 App 根 div 的 min-h-screen flex-col（chrome 改為靜態標記） */
body { display: flex; flex-direction: column; min-height: 100vh; }
#app { flex: 1; display: flex; flex-direction: column; }
/* LINE 行動版路由：隱藏官網靜態 chrome（header/公告列/footer），
   由 LineLayout 在 shell 內自行渲染行動版外框 */
body.line-mode .site-chrome { display: none !important; }