/* ==========================================================
   大安梟婆宮 — 官方網站
   Design system: 典雅 / 高級 / 廟堂編輯風
   ========================================================== */

:root{
  /* 紙 */
  --paper:        #f1e6c8;
  --paper-soft:   #ece0bb;
  --paper-deep:   #e3d3a3;
  --paper-warm:   #f7efd6;
  /* 墨 */
  --ink:          #1c140e;
  --ink-soft:     #3b2f24;
  --ink-mute:     #6a5a48;
  /* 朱砂 / 廟紅 */
  --vermillion:   #8b2323;
  --vermillion-d: #6e1a1a;
  --vermillion-l: #a8362c;
  /* 松綠 */
  --pine:         #2c4a3e;
  --pine-d:       #1d3329;
  --pine-l:       #466b59;
  /* 金 */
  --gold:         #b8924a;
  --gold-l:       #d6b878;
  --gold-d:       #8c6a31;

  --serif: "Noto Serif TC", "Source Han Serif TC", "PingFang TC", serif;
  --sans:  "Noto Sans TC",  "PingFang TC", system-ui, sans-serif;
  --brush: "Noto Serif TC", "Source Han Serif TC", serif;
  --latin: "Cormorant Garamond", "Noto Serif TC", serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
body{
  font-family: var(--serif);
  color: var(--ink);
  background: var(--paper);
  font-feature-settings: "palt";
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* 紙紋 — 整體背景上一層細微紋路 */
body::before{
  content:"";
  position: fixed; inset:0;
  pointer-events:none;
  z-index: 0;
  background-image:
    radial-gradient(rgba(110,90,55,0.08) 1px, transparent 1px),
    radial-gradient(rgba(110,90,55,0.05) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
  mix-blend-mode: multiply;
  opacity: 0.55;
}

/* ---------- 通用排版 ---------- */
.kicker{
  font-family: var(--latin);
  letter-spacing: 0.35em;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
}
.kicker .dot{
  display:inline-block; width:5px; height:5px;
  background: var(--vermillion);
  border-radius: 50%;
  vertical-align: middle;
  margin: 0 0.6em;
  transform: translateY(-2px);
}

h1,h2,h3,h4{ font-weight: 600; letter-spacing: 0.04em; margin: 0; }
.headline{
  font-family: var(--serif);
  font-size: clamp(36px, 4.2vw, 64px);
  line-height: 1.15;
  letter-spacing: 0.08em;
  color: var(--ink);
}
.subhead{
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 34px);
  letter-spacing: 0.12em;
  line-height: 1.3;
}
.body-text{
  font-size: 16px;
  line-height: 1.95;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}

/* 中式直書 */
.vertical{
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 0.5em;
}

/* ---------- 主容器 / 區塊 ---------- */
.shell{
  position: relative;
  z-index: 1;
}
section{ position: relative; }

.wrap{
  width: min(1200px, calc(100% - 64px));
  margin: 0 auto;
}
.wrap-wide{
  width: min(1400px, calc(100% - 48px));
  margin: 0 auto;
}

/* ---------- 頂部 nav ---------- */
.topbar{
  position: fixed; top:0; left:0; right:0;
  z-index: 80;
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 14px 32px;
  background: rgba(241,230,200,0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(28,20,14,0.08);
  transition: padding .3s ease;
}
.topbar.scrolled{ padding: 10px 32px; }
.topbar .brand{
  display:flex; align-items:center; gap: 12px;
  text-decoration:none; color: var(--ink);
}
.topbar .brand img{ height: 44px; width: auto; }
.topbar .brand .name{
  font-family: var(--brush);
  font-size: 20px;
  letter-spacing: 0.25em;
  color: var(--vermillion);
  line-height: 1;
}
.topbar .brand .name .small{
  display:block;
  font-size: 9px; letter-spacing: 0.4em;
  color: var(--ink-mute); margin-top:4px;
  font-family: var(--latin);
}
.menu-toggle{
  display: none;
  width: 44px;
  height: 34px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--vermillion);
  padding: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  position: relative;
  z-index: 81;
}
.menu-toggle span{
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}
.topbar.menu-open .menu-toggle span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.topbar.menu-open .menu-toggle span:nth-child(2){ opacity: 0; }
.topbar.menu-open .menu-toggle span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }
.topbar nav ul{
  display:flex; gap: 6px; list-style:none; margin:0; padding:0;
}
.topbar nav a{
  display:block;
  padding: 8px 14px;
  font-size: 14px;
  letter-spacing: 0.25em;
  color: var(--ink-soft);
  text-decoration:none;
  border-radius: 999px;
  transition: all .2s;
}
.topbar nav a:hover{ color: var(--vermillion); background: rgba(139,35,35,0.06); }
.topbar nav a.active{
  color: var(--vermillion);
  background: rgba(139,35,35,0.08);
  position: relative;
}
.topbar nav a.active::after{
  content:""; position: absolute;
  bottom: 2px; left: 50%; transform: translateX(-50%);
  width: 18px; height: 1px;
  background: var(--vermillion);
}
.topbar .cta{
  display: inline-flex; align-items:center; gap: 8px;
  padding: 9px 18px;
  background: var(--vermillion);
  color: var(--paper-warm);
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 0.25em;
  text-decoration:none;
  border: 1px solid var(--vermillion-d);
  box-shadow: 0 4px 14px -6px rgba(139,35,35,0.5);
  transition: transform .2s;
}
.topbar .cta:hover{ transform: translateY(-1px); }
.topbar .cta .icn{ font-size: 14px; }

/* ---------- HERO ---------- */
.hero{
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center;
  overflow: hidden;
  padding: 120px 0 80px;
}
.hero .bg{
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(241,230,200,0.55) 0%,
      rgba(241,230,200,0.35) 30%,
      rgba(241,230,200,0.88) 92%,
      var(--paper) 100%),
    url('assets/temple-hero.jpg') center/cover no-repeat;
  filter: saturate(0.85);
}
.hero .bg::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(ellipse at 50% 30%, transparent 40%, rgba(28,20,14,0.18) 100%);
}
.hero .inner{
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 40px;
  align-items: center;
  width: min(1300px, calc(100% - 64px));
  margin: 0 auto;
}
.hero .copy h1{
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(46px, 6vw, 86px);
  line-height: 1.05;
  letter-spacing: 0.08em;
  color: var(--ink);
  margin: 16px 0 22px;
  text-shadow: 0 2px 20px rgba(241,230,200,0.6);
}
.hero .copy h1 .accent{
  color: var(--vermillion);
}
.hero .copy .lead{
  font-size: 18px;
  line-height: 1.95;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  max-width: 520px;
  margin-bottom: 32px;
}
.hero-actions{
  display: flex; gap: 14px; flex-wrap: wrap;
}
.btn{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px;
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: 0.35em;
  text-decoration: none;
  border-radius: 2px;
  cursor: pointer;
  border: 0;
  transition: all .2s ease;
}
.btn-primary{
  background: var(--vermillion);
  color: var(--paper-warm);
  box-shadow: inset 0 0 0 1px rgba(255,238,200,0.2), 0 8px 26px -10px rgba(139,35,35,0.7);
}
.btn-primary:hover{ background: var(--vermillion-d); transform: translateY(-1px); }
.btn-ghost{
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink-soft);
}
.btn-ghost:hover{ background: var(--ink); color: var(--paper-warm); }
.btn .ar{ font-family: var(--latin); }

/* 印章 — 紅章 */
.seal{
  display:inline-flex;
  font-family: var(--serif); font-weight: 700;
  background: var(--vermillion);
  color: var(--paper-warm);
  padding: 6px 8px;
  font-size: 14px;
  letter-spacing: 0.25em;
  line-height: 1;
  writing-mode: vertical-rl;
  text-orientation: upright;
  border: 2px solid var(--vermillion-d);
  box-shadow: 0 0 0 1px var(--vermillion);
  transform: rotate(-3deg);
}

/* Hero 右側 logo 卡 */
.hero-logo-card{
  position: relative;
  aspect-ratio: 1/1;
  max-width: 520px;
  margin-left: auto;
  display: grid;
  place-items: center;
}
.hero-logo-card::before{
  content:"";
  position: absolute; inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(247,239,214,0.95), rgba(241,230,200,0.7) 60%, transparent 80%);
  filter: blur(8px);
}
.hero-logo-card img{
  position: relative;
  width: 88%;
  height: auto;
  z-index: 1;
  filter: drop-shadow(0 12px 30px rgba(28,20,14,0.18));
  animation: floaty 7s ease-in-out infinite;
}
@keyframes floaty{
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-10px); }
}
/* 環繞文字 */
.hero-logo-card .ring-text{
  position: absolute; inset: -2%;
  z-index: 0;
}
.hero-logo-card .ring-text svg{ width:100%; height:100%; }
.hero-logo-card .ring-text text{
  font-family: var(--serif);
  font-size: 8.5px;
  letter-spacing: 0.55em;
  fill: var(--pine);
  opacity: 0.7;
}

/* 漂浮的雲紋 */
.hero .cloud{
  position: absolute; opacity: 0.18;
  font-family: var(--brush);
  color: var(--pine);
  font-size: 110px;
  pointer-events:none;
  user-select:none;
}

/* 滾動提示 */
.scroll-hint{
  position: absolute; left: 50%; bottom: 28px;
  transform: translateX(-50%);
  font-family: var(--latin);
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--ink-mute);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  z-index: 3;
}
.scroll-hint::after{
  content:""; width: 1px; height: 32px;
  background: linear-gradient(180deg, var(--ink-mute), transparent);
  animation: drop 2s ease-in-out infinite;
}
@keyframes drop{
  0%   { transform: scaleY(0.3); transform-origin: top; opacity: 1; }
  50%  { transform: scaleY(1); }
  100% { transform: scaleY(0.3); transform-origin: bottom; opacity: 0.3; }
}

/* 紅燈籠 — Hero 上掛著 */
.lanterns{
  position: absolute; top: 70px; left: 0; right: 0;
  display: flex; justify-content: space-around;
  pointer-events:none;
  padding: 0 40px;
  z-index: 1;
}
.lantern{
  width: 38px; position: relative; top: 0;
  animation: sway 5s ease-in-out infinite;
  transform-origin: top center;
}
.lantern:nth-child(2){ animation-delay: -1.6s; }
.lantern:nth-child(3){ animation-delay: -3.2s; }
.lantern:nth-child(4){ animation-delay: -0.8s; }
.lantern:nth-child(5){ animation-delay: -2.4s; }
.lantern .string{
  width: 1px; height: 36px;
  background: rgba(28,20,14,0.4);
  margin: 0 auto;
}
.lantern .body{
  width: 38px; height: 46px;
  background: radial-gradient(ellipse at 50% 35%, #d83838, #8b2323 70%, #5a1414);
  border-radius: 50%;
  position: relative;
  box-shadow:
    inset 0 -6px 10px rgba(0,0,0,0.3),
    inset 0 4px 8px rgba(255,200,120,0.4),
    0 4px 16px rgba(139,35,35,0.4);
}
.lantern .body::before, .lantern .body::after{
  content:""; position: absolute; left:0; right:0;
  height: 4px; background: var(--gold-d);
}
.lantern .body::before{ top: 2px; border-radius: 50%; }
.lantern .body::after { bottom: 2px; border-radius: 50%; }
.lantern .tassel{
  width: 4px; height: 12px; background: var(--gold-d);
  margin: 0 auto;
}
.lantern .tassel::after{
  content:""; display:block; margin:0 auto;
  width: 10px; height: 14px;
  background: var(--gold-d);
  clip-path: polygon(50% 0, 100% 30%, 80% 100%, 50% 80%, 20% 100%, 0 30%);
}
@keyframes sway{
  0%,100% { transform: rotate(-3deg); }
  50%     { transform: rotate(3deg); }
}

/* ---------- 章節標題裝飾 ---------- */
.section-head{
  text-align: center;
  margin-bottom: 56px;
}
.section-head .ornament{
  display: flex; align-items: center; justify-content: center;
  gap: 18px;
  margin-bottom: 18px;
}
.section-head .ornament .line{
  width: 60px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ink-mute), transparent);
}
.section-head .ornament .glyph{
  font-family: var(--brush);
  color: var(--vermillion);
  font-size: 14px;
  letter-spacing: 0.5em;
}
.section-head h2{
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(34px, 4vw, 56px);
  letter-spacing: 0.15em;
  margin-bottom: 12px;
}
.section-head .lat{
  font-family: var(--latin);
  font-style: italic;
  font-size: 16px;
  letter-spacing: 0.3em;
  color: var(--ink-mute);
}

/* ---------- 沿革 ---------- */
.origin{
  padding: 120px 0 100px;
  background: var(--paper-warm);
  position: relative;
}
.origin::before, .origin::after{
  content:""; position: absolute; left:0; right:0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ink-mute), transparent);
  opacity: 0.4;
}
.origin::before{ top: 0; }
.origin::after { bottom: 0; }

.origin-grid{
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: 80px;
  align-items: start;
}
.origin .vert-block{
  display: flex; gap: 24px;
  padding: 32px 16px;
  background:
    linear-gradient(180deg, rgba(247,239,214,0.5), rgba(241,230,200,0.2)),
    var(--paper-deep);
  border: 1px solid rgba(28,20,14,0.08);
  position: relative;
}
.origin .vert-block::before{
  content:""; position: absolute; inset: 8px;
  border: 1px solid rgba(184,146,74,0.5);
  pointer-events: none;
}
.origin .vert-text{
  writing-mode: vertical-rl;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 2;
  letter-spacing: 0.4em;
  color: var(--ink);
  max-height: 480px;
  padding: 12px 8px;
}
.origin .vert-text.big{
  font-size: 22px;
  font-weight: 600;
  color: var(--vermillion);
  letter-spacing: 0.5em;
}
.origin .horiz-copy h3{
  font-family: var(--serif);
  font-size: 28px;
  letter-spacing: 0.15em;
  margin-bottom: 24px;
  color: var(--ink);
}
.origin .horiz-copy h3 span{ color: var(--vermillion); }
.origin .horiz-copy p{
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  margin: 0 0 16px;
}
.origin .stats{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; margin-top: 36px;
  padding-top: 28px;
  border-top: 1px dashed rgba(28,20,14,0.18);
}
.origin .stats .item .num{
  font-family: var(--latin);
  font-size: 38px;
  font-weight: 500;
  color: var(--vermillion);
  line-height: 1;
}
.origin .stats .item .lbl{
  font-size: 12px;
  letter-spacing: 0.3em;
  color: var(--ink-mute);
  margin-top: 8px;
}

/* ---------- 神祇 ---------- */
.deity{
  padding: 130px 0 120px;
  background: var(--paper);
  position: relative;
  overflow: hidden;
}
.deity-grid{
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 64px;
  align-items: center;
}
.shrine-frame{
  position: relative;
  aspect-ratio: 1/1.2;
  max-width: 520px;
  display: grid; place-items: center;
}
.shrine-frame .glow{
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 45%,
    rgba(184,146,74,0.35) 0%,
    rgba(184,146,74,0.12) 35%,
    transparent 65%);
  filter: blur(20px);
}
.shrine-frame img{
  position: relative;
  width: 88%;
  filter: drop-shadow(0 20px 40px rgba(28,20,14,0.25));
}
.shrine-frame .seal-stamp{
  position: absolute; top: 8%; right: 4%;
  z-index: 2;
}
.shrine-frame .floor-ring{
  position: absolute; bottom: 10%; left: 50%;
  transform: translateX(-50%);
  width: 80%; height: 30px;
  background: radial-gradient(ellipse, rgba(28,20,14,0.18), transparent 70%);
  filter: blur(8px);
}

.deity-copy .titles{
  display: flex; align-items: baseline; gap: 14px;
  margin-bottom: 16px;
}
.deity-copy .titles .ch{
  font-family: var(--brush);
  font-size: 54px;
  letter-spacing: 0.15em;
  color: var(--vermillion);
  line-height: 1;
}
.deity-copy .titles .en{
  font-family: var(--latin);
  font-style: italic;
  font-size: 18px;
  letter-spacing: 0.25em;
  color: var(--ink-mute);
}
.deity-copy h3{
  font-family: var(--serif);
  font-size: 28px;
  letter-spacing: 0.18em;
  margin: 4px 0 24px;
}
.deity-copy .desc{
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  margin-bottom: 32px;
  max-width: 540px;
}
.deity-attrs{
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 28px;
}
.deity-attrs .attr{
  border: 1px solid rgba(28,20,14,0.1);
  padding: 18px 20px;
  background: rgba(247,239,214,0.5);
  position: relative;
}
.deity-attrs .attr::before{
  content:""; position: absolute; top: 0; left: 0;
  width: 28px; height: 1px; background: var(--vermillion);
}
.deity-attrs .attr .lbl{
  font-family: var(--latin);
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--ink-mute);
  margin-bottom: 8px;
  text-transform: uppercase;
}
.deity-attrs .attr .val{
  font-family: var(--serif);
  font-size: 16px;
  letter-spacing: 0.2em;
  color: var(--ink);
}

/* ---------- 求籤 ---------- */
.fortune{
  padding: 130px 0 120px;
  background:
    linear-gradient(180deg, rgba(44,74,62,0.04), rgba(44,74,62,0.02)),
    var(--paper-soft);
  position: relative;
}
.fortune-stage{
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 64px;
  align-items: stretch;
  margin-top: 24px;
}
.bamboo-tube{
  position: relative;
  background: linear-gradient(180deg, #2a1a10 0%, #4a2818 50%, #2a1a10 100%);
  border-radius: 16px 16px 8px 8px;
  padding: 28px 24px;
  min-height: 360px;
  display: flex; flex-direction: column;
  box-shadow:
    inset 0 4px 8px rgba(0,0,0,0.4),
    inset 0 -4px 8px rgba(0,0,0,0.6),
    0 24px 48px -16px rgba(28,20,14,0.45);
  cursor: pointer;
  transition: transform .25s ease;
}
.bamboo-tube:hover{ transform: translateY(-4px); }
.bamboo-tube .rim{
  position: absolute; top:0; left:0; right:0;
  height: 18px;
  background: linear-gradient(180deg, #6b3a20, #2a1a10);
  border-radius: 16px 16px 0 0;
  box-shadow: inset 0 -2px 4px rgba(0,0,0,0.5);
}
.bamboo-tube .ribbon{
  position: absolute; top: 20px; left: -10px; right: -10px;
  height: 22px;
  background: var(--vermillion);
  border-top: 2px solid var(--gold-d);
  border-bottom: 2px solid var(--gold-d);
  font-family: var(--brush);
  color: var(--paper-warm);
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.6em;
  line-height: 18px;
  z-index: 2;
}
.bamboo-tube .sticks{
  margin-top: 36px;
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  position: relative;
}
.bamboo-tube .sticks .stick{
  width: 6px;
  background: linear-gradient(180deg, #f5d99e 0%, #e3b97a 50%, #b8924a 100%);
  border-radius: 3px 3px 0 0;
  box-shadow: inset 0 -2px 4px rgba(0,0,0,0.25);
  transition: transform .2s ease;
}
.bamboo-tube .sticks .stick:nth-child(odd){  height: 86%; }
.bamboo-tube .sticks .stick:nth-child(even){ height: 92%; }
.bamboo-tube .sticks .stick:nth-child(3n){   height: 80%; }
.bamboo-tube.shaking .sticks .stick{
  animation: shake 0.3s ease-in-out infinite;
}
.bamboo-tube.shaking{ animation: tube-shake 0.4s ease-in-out infinite; }
@keyframes shake{
  0%,100% { transform: translateY(0) rotate(0); }
  25%     { transform: translateY(-6px) rotate(-2deg); }
  75%     { transform: translateY(-3px) rotate(2deg); }
}
@keyframes tube-shake{
  0%,100% { transform: translateX(0) rotate(0); }
  25%     { transform: translateX(-2px) rotate(-1deg); }
  75%     { transform: translateX(2px) rotate(1deg); }
}
.bamboo-tube .prompt{
  text-align: center;
  font-family: var(--brush);
  color: var(--paper-warm);
  font-size: 16px;
  letter-spacing: 0.4em;
  margin-top: 18px;
  opacity: 0.9;
}

.fortune-result{
  position: relative;
  background:
    radial-gradient(ellipse at top, rgba(247,239,214,0.95), rgba(241,230,200,0.85)),
    var(--paper-warm);
  border: 1px solid rgba(184,146,74,0.45);
  padding: 36px 40px;
  display: flex; flex-direction: column;
  min-height: 360px;
}
.fortune-result::before, .fortune-result::after{
  content:""; position: absolute;
  width: 22px; height: 22px;
}
.fortune-result::before{
  top: 10px; left: 10px;
  border-top: 1px solid var(--gold-d);
  border-left: 1px solid var(--gold-d);
}
.fortune-result::after{
  bottom: 10px; right: 10px;
  border-bottom: 1px solid var(--gold-d);
  border-right: 1px solid var(--gold-d);
}
.fortune-result .top{
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 18px;
  border-bottom: 1px dashed rgba(28,20,14,0.15);
  padding-bottom: 14px;
}
.fortune-result .top .no{
  font-family: var(--brush);
  font-size: 18px;
  letter-spacing: 0.3em;
  color: var(--vermillion);
}
.fortune-result .top .grade{
  font-family: var(--brush);
  font-size: 28px;
  letter-spacing: 0.3em;
  color: var(--vermillion);
  border: 2px solid var(--vermillion);
  padding: 4px 14px;
}
.fortune-result .poem{
  font-family: var(--brush);
  font-size: 22px;
  letter-spacing: 0.35em;
  line-height: 2.2;
  text-align: center;
  color: var(--ink);
  margin: 14px 0 24px;
  white-space: pre-line;
}
.fortune-result .meaning{
  font-size: 14.5px;
  line-height: 1.95;
  color: var(--ink-soft);
  letter-spacing: 0.06em;
  padding-top: 16px;
  border-top: 1px dashed rgba(28,20,14,0.15);
}
.fortune-result .meaning b{ color: var(--vermillion); font-weight: 600; }
.fortune-result .empty{
  margin: auto;
  text-align: center;
  color: var(--ink-mute);
}
.fortune-result .empty .glyph{
  font-family: var(--brush);
  font-size: 64px;
  color: var(--vermillion);
  opacity: 0.25;
  letter-spacing: 0;
}
.fortune-result .empty .txt{
  font-size: 14px;
  letter-spacing: 0.3em;
  margin-top: 12px;
}

/* ---------- 線上參拜 ---------- */
.online{
  padding: 130px 0 120px;
  background: var(--ink);
  color: var(--paper-warm);
  position: relative;
  overflow: hidden;
}
.online::before{
  content:""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(139,35,35,0.25), transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(184,146,74,0.18), transparent 50%);
  pointer-events: none;
}
.online .section-head h2{ color: var(--paper-warm); }
.online .section-head .ornament .line{ background: linear-gradient(90deg, transparent, var(--paper-deep), transparent); }
.online .section-head .ornament .glyph{ color: var(--gold-l); }
.online .section-head .lat{ color: var(--paper-deep); opacity: 0.7; }

.online-grid{
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 80px;
  align-items: center;
  position: relative; z-index: 1;
}
.censer-stage{
  position: relative;
  display: grid; place-items: center;
}
.censer-stage img{
  width: 80%;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,0.6));
}
/* 三炷香煙裊裊 */
.smoke{
  position: absolute;
  left: 50%; top: 40%;
  width: 100px;
  height: 200px;
  transform: translateX(-50%);
  pointer-events: none;
}
.smoke .s{
  position: absolute; bottom: 0;
  width: 3px; height: 100%;
  background: linear-gradient(180deg, transparent, rgba(247,239,214,0.55) 30%, rgba(247,239,214,0.7) 60%, transparent);
  filter: blur(2px);
  animation: rise 5s ease-in infinite;
}
.smoke .s:nth-child(1){ left: 20%; animation-delay: 0s;   }
.smoke .s:nth-child(2){ left: 48%; animation-delay: -1.5s; }
.smoke .s:nth-child(3){ left: 78%; animation-delay: -3s;  }
@keyframes rise{
  0%   { transform: translateY(0) scaleX(1); opacity: 0; }
  20%  { opacity: 1; }
  60%  { transform: translateY(-100px) scaleX(2); opacity: 0.6; }
  100% { transform: translateY(-180px) scaleX(3); opacity: 0; }
}

.online-copy h3{
  font-family: var(--serif);
  font-size: 36px;
  letter-spacing: 0.15em;
  margin-bottom: 24px;
  color: var(--paper-warm);
}
.online-copy h3 .sub{
  display: block;
  font-family: var(--brush);
  color: var(--gold-l);
  font-size: 14px;
  letter-spacing: 0.4em;
  margin-bottom: 10px;
}
.online-copy p{
  font-size: 15.5px;
  line-height: 2;
  color: rgba(241,230,200,0.85);
  letter-spacing: 0.06em;
  margin-bottom: 28px;
  max-width: 560px;
}
.amount-row{
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.amount-row .a-btn{
  padding: 14px 8px;
  text-align: center;
  background: rgba(247,239,214,0.06);
  border: 1px solid rgba(247,239,214,0.18);
  cursor: pointer;
  font-family: var(--serif);
  color: var(--paper-warm);
  letter-spacing: 0.15em;
  transition: all .2s;
}
.amount-row .a-btn:hover{ background: rgba(247,239,214,0.12); }
.amount-row .a-btn.active{
  background: var(--vermillion);
  border-color: var(--gold-d);
  color: var(--paper-warm);
}
.amount-row .a-btn .num{ font-family: var(--latin); font-size: 22px; display: block; }
.amount-row .a-btn .lbl{ font-size: 11px; letter-spacing: 0.3em; opacity: 0.85; margin-top: 4px; }

.wish-input{
  width: 100%;
  background: rgba(247,239,214,0.05);
  border: 1px solid rgba(247,239,214,0.18);
  padding: 14px 16px;
  font-family: var(--serif);
  color: var(--paper-warm);
  font-size: 15px;
  letter-spacing: 0.1em;
  outline: none;
}
.wish-input::placeholder{ color: rgba(247,239,214,0.4); }

.pay-row{
  display: flex; align-items: center; gap: 16px; margin-top: 22px;
}
.pay-row .btn-light{
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 24px;
  background: var(--gold);
  color: var(--ink);
  border: 1px solid var(--gold-l);
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: 0.35em;
  cursor: pointer;
  transition: all .2s;
}
.pay-row .btn-light:hover{ background: var(--gold-l); }
.pay-row .note{
  font-size: 12px;
  letter-spacing: 0.25em;
  color: rgba(241,230,200,0.55);
  max-width: 140px;
  line-height: 1.6;
}

.online-foot{
  margin-top: 36px;
  display: flex; gap: 28px; flex-wrap: wrap;
  font-size: 12px;
  letter-spacing: 0.3em;
  color: rgba(241,230,200,0.55);
}
.online-foot span{ display: inline-flex; align-items: center; gap: 8px; }
.online-foot span::before{ content:"·"; color: var(--gold-l); }

/* ---------- 法會活動 ---------- */
.events{
  padding: 130px 0 120px;
  background: var(--paper);
}
.event-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.event-card{
  background: var(--paper-warm);
  border: 1px solid rgba(28,20,14,0.08);
  padding: 28px 28px 32px;
  position: relative;
  cursor: pointer;
  transition: all .3s ease;
}
.event-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 36px -16px rgba(28,20,14,0.2);
  border-color: var(--vermillion);
}
.event-card .date{
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(28,20,14,0.08);
}
.event-card .date .dd{
  font-family: var(--latin);
  font-size: 48px;
  line-height: 1;
  color: var(--vermillion);
  font-weight: 500;
}
.event-card .date .mm{
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: 0.25em;
  color: var(--ink-mute);
}
.event-card .lunar{
  font-family: var(--brush);
  font-size: 13px;
  letter-spacing: 0.3em;
  color: var(--pine);
  margin-left: auto;
}
.event-card h4{
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: 0.15em;
  margin: 0 0 12px;
  color: var(--ink);
}
.event-card .desc{
  font-size: 14px;
  line-height: 1.85;
  color: var(--ink-soft);
  letter-spacing: 0.05em;
  margin-bottom: 22px;
}
.event-card .meta{
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--latin);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--ink-mute);
  text-transform: uppercase;
  padding-top: 16px;
  border-top: 1px dashed rgba(28,20,14,0.15);
}
.event-card .tag{
  background: var(--vermillion);
  color: var(--paper-warm);
  padding: 4px 10px;
  font-family: var(--serif);
  font-size: 11px;
  letter-spacing: 0.3em;
}

/* ---------- 參拜資訊 ---------- */
.visit{
  padding: 130px 0 120px;
  background: var(--paper-warm);
  border-top: 1px solid rgba(28,20,14,0.08);
  border-bottom: 1px solid rgba(28,20,14,0.08);
}
.visit-grid{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 80px;
}
.visit-info .row{
  padding: 22px 0;
  border-bottom: 1px solid rgba(28,20,14,0.08);
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 24px;
  align-items: start;
}
.visit-info .row .label{
  font-family: var(--brush);
  font-size: 18px;
  letter-spacing: 0.35em;
  color: var(--vermillion);
}
.visit-info .row .value{
  font-family: var(--serif);
  font-size: 15.5px;
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.visit-info .row .value .sub{
  display: block;
  font-size: 13px;
  color: var(--ink-mute);
  letter-spacing: 0.1em;
  margin-top: 4px;
}

.map-card{
  position: relative;
  aspect-ratio: 1/1.15;
  background:
    linear-gradient(135deg, rgba(44,74,62,0.06), rgba(184,146,74,0.04)),
    var(--paper-deep);
  border: 1px solid rgba(28,20,14,0.08);
  padding: 24px;
  display: flex; flex-direction: column;
}
.map-card .map-vis{
  flex: 1;
  position: relative;
  background:
    repeating-linear-gradient(0deg, rgba(28,20,14,0.06) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(90deg, rgba(28,20,14,0.06) 0 1px, transparent 1px 60px),
    var(--paper-soft);
  overflow: hidden;
}
.map-card .road{
  position: absolute;
  background: rgba(28,20,14,0.12);
}
.map-card .road.h{ left: 0; right: 0; height: 4px; }
.map-card .road.v{ top: 0; bottom: 0; width: 4px; }
.map-card .pin{
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -100%);
}
.map-card .pin .dot{
  width: 16px; height: 16px;
  background: var(--vermillion);
  border-radius: 50%;
  border: 3px solid var(--paper-warm);
  box-shadow: 0 4px 12px rgba(139,35,35,0.4);
  position: relative;
  z-index: 2;
}
.map-card .pin .pulse{
  position: absolute; left: 50%; top: 100%;
  width: 16px; height: 16px;
  background: var(--vermillion);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.4;
  animation: pulse 2s ease-out infinite;
}
@keyframes pulse{
  0%   { transform: translate(-50%, -50%) scale(1);   opacity: 0.4; }
  100% { transform: translate(-50%, -50%) scale(4.5); opacity: 0; }
}
.map-card .pin .label{
  position: absolute; top: 22px; left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--ink);
  color: var(--paper-warm);
  padding: 4px 10px;
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: 0.25em;
}
.map-card .compass{
  position: absolute; top: 16px; right: 16px;
  font-family: var(--latin);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--ink-mute);
  text-align: center;
}
.map-card .compass .n{
  font-size: 20px; color: var(--vermillion);
  font-weight: 600;
  border: 1px solid var(--ink-mute);
  width: 24px; height: 24px;
  display: grid; place-items: center;
  margin: 0 auto 4px;
  border-radius: 50%;
}
.map-card .map-foot{
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 16px;
  font-family: var(--latin);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--ink-mute);
}

/* ---------- 平安符 / 神諭區 ---------- */
.charms{
  padding: 130px 0 120px;
  background:
    linear-gradient(180deg, rgba(139,35,35,0.04), transparent),
    var(--paper);
}
.charm-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 16px;
}
.charm-card{
  position: relative;
  aspect-ratio: 0.78;
  background:
    linear-gradient(180deg, rgba(139,35,35,0.95), rgba(110,26,26,0.95));
  color: var(--paper-warm);
  padding: 26px 18px;
  display: flex; flex-direction: column;
  border: 2px solid var(--gold-d);
  cursor: pointer;
  transition: all .25s ease;
  box-shadow: 0 10px 28px -14px rgba(139,35,35,0.6);
}
.charm-card:hover{ transform: translateY(-6px) rotate(-1deg); }
.charm-card::before{
  content:""; position: absolute; inset: 8px;
  border: 1px solid rgba(214,184,120,0.55);
  pointer-events: none;
}
.charm-card .crown{
  text-align: center;
  font-family: var(--brush);
  font-size: 13px;
  letter-spacing: 0.5em;
  color: var(--gold-l);
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(214,184,120,0.4);
}
.charm-card .glyph{
  text-align: center;
  font-family: var(--brush);
  font-size: 52px;
  letter-spacing: 0.15em;
  line-height: 1;
  margin: 22px 0 12px;
  color: var(--paper-warm);
  text-shadow: 0 0 14px rgba(247,239,214,0.4);
}
.charm-card .name{
  text-align: center;
  font-family: var(--serif);
  font-size: 17px;
  letter-spacing: 0.4em;
  margin-bottom: 6px;
}
.charm-card .desc{
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.15em;
  color: rgba(247,239,214,0.7);
  margin-bottom: auto;
}
.charm-card .price-row{
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 14px;
  border-top: 1px dashed rgba(214,184,120,0.4);
}
.charm-card .price{
  font-family: var(--latin);
  font-size: 22px;
  color: var(--gold-l);
}
.charm-card .price .cur{ font-size: 11px; letter-spacing: 0.25em; }
.charm-card .stock{
  font-size: 11px;
  letter-spacing: 0.25em;
  color: rgba(247,239,214,0.55);
}

/* ---------- Footer ---------- */
footer.foot{
  background: var(--ink);
  color: var(--paper-deep);
  padding: 80px 0 32px;
  position: relative;
}
.foot-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(247,239,214,0.1);
}
.foot-brand img{ height: 72px; margin-bottom: 18px; filter: brightness(1.05); }
.foot-brand .name{
  font-family: var(--brush);
  font-size: 22px;
  letter-spacing: 0.3em;
  color: var(--paper-warm);
  margin-bottom: 6px;
}
.foot-brand .lat{
  font-family: var(--latin);
  font-size: 11px;
  letter-spacing: 0.35em;
  color: var(--gold-l);
}
.foot-brand p{
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.9;
  letter-spacing: 0.08em;
  color: rgba(241,230,200,0.6);
  max-width: 320px;
}
.foot-col h5{
  font-family: var(--brush);
  font-size: 16px;
  letter-spacing: 0.35em;
  color: var(--paper-warm);
  margin: 0 0 18px;
}
.foot-col ul{ list-style: none; margin: 0; padding: 0; }
.foot-col li{ margin-bottom: 10px; }
.foot-col a{
  font-family: var(--serif);
  font-size: 13.5px;
  letter-spacing: 0.15em;
  color: rgba(241,230,200,0.65);
  text-decoration: none;
  transition: color .2s;
}
.foot-col a:hover{ color: var(--gold-l); }
.foot-col .social-icons{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-top: 4px;
}
.foot-col .social-icons a{
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(214,184,120,0.34);
  background: rgba(247,239,214,0.04);
  transition: border-color .2s, background .2s, transform .2s;
}
.foot-col .social-icons a:hover{
  border-color: var(--gold-l);
  background: rgba(214,184,120,0.12);
  transform: translateY(-1px);
}
.foot-col .social-icons img{
  width: 17px;
  height: 17px;
  display: block;
}

.foot-bottom{
  padding-top: 28px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--latin);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: rgba(241,230,200,0.4);
  flex-wrap: wrap;
  gap: 16px;
}
.foot-bottom .est{
  display: inline-flex; align-items: center; gap: 8px;
}

/* ---------- Toast ---------- */
.toast{
  position: fixed;
  left: 50%; bottom: 40px;
  transform: translate(-50%, 80px);
  background: var(--ink);
  color: var(--paper-warm);
  padding: 16px 28px;
  font-family: var(--serif);
  letter-spacing: 0.25em;
  font-size: 14px;
  border: 1px solid var(--gold-d);
  z-index: 200;
  opacity: 0;
  transition: all .35s ease;
  pointer-events: none;
}
.toast.show{ transform: translate(-50%, 0); opacity: 1; }
.toast .tag{
  display: inline-block;
  background: var(--vermillion);
  color: var(--paper-warm);
  padding: 2px 8px;
  font-size: 11px;
  letter-spacing: 0.3em;
  margin-right: 12px;
}

/* ---------- 響應 ---------- */
@media (max-width: 980px){
  .topbar{
    max-width: 100vw;
    padding: 10px 16px;
    flex-wrap: nowrap;
    gap: 12px;
  }
  .topbar.scrolled{ padding: 8px 16px; }
  .topbar .brand{ min-width: 0; flex: 1 1 auto; overflow: hidden; }
  .topbar .brand img{ height: 38px; }
  .topbar .brand .name{ font-size: 18px; letter-spacing: 0.14em; }
  .topbar .brand .name .small{ font-size: 8px; letter-spacing: 0.22em; }
  .menu-toggle{ display: inline-flex; flex: 0 0 44px; order: 2; }
  .topbar .cta{ display: none; }
  .topbar nav{
    position: fixed;
    inset: 0;
    z-index: 45;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 96px 18px 28px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(18px);
    transition: opacity .28s ease, transform .36s cubic-bezier(.16,.84,.24,1);
    background:
      radial-gradient(circle at 50% 100%, rgba(184,146,74,0.22), transparent 42%),
      linear-gradient(180deg, rgba(28,20,14,0.18), rgba(28,20,14,0.62)),
      rgba(18,12,8,0.34);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .topbar.menu-open nav{
    z-index: 45;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  .topbar nav ul{
    width: min(100%, 420px);
    max-height: calc(100dvh - 128px);
    overflow-y: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    padding: 18px;
    background:
      linear-gradient(180deg, rgba(247,239,214,0.98), rgba(232,211,158,0.96));
    border: 1px solid rgba(140,106,49,0.42);
    box-shadow:
      inset 0 0 0 1px rgba(255,248,225,0.5),
      0 28px 70px -28px rgba(0,0,0,0.55);
    transform: translateY(28px);
    transition: transform .38s cubic-bezier(.16,.84,.24,1);
  }
  .topbar.menu-open nav ul{
    transform: translateY(0);
  }
  .topbar nav a{
    text-align: center;
    padding: 16px 12px;
    background: rgba(247,239,214,0.42);
    border-radius: 0;
    border-bottom: 1px solid rgba(140,106,49,0.16);
    color: var(--ink);
    font-size: 17px;
    letter-spacing: 0.24em;
  }
  .topbar nav li:last-child a{
    border-bottom: 0;
  }
  .hero .inner,
  .origin-grid,
  .deity-grid,
  .fortune-stage,
  .online-grid,
  .visit-grid{ grid-template-columns: 1fr; gap: 40px; }
  .event-grid, .charm-grid{ grid-template-columns: repeat(2, 1fr); }
  .foot-grid{ grid-template-columns: 1fr 1fr; }
  .lanterns{ display: none; }
  .hero-logo-card{ max-width: 360px; margin: 0 auto; }
}
@media (max-width: 620px){
  .wrap,
  .wrap-wide,
  .hero .inner{ width: min(100% - 32px, 1200px); }
  .topbar{ padding-inline: 12px; }
  .topbar.scrolled{ padding-inline: 12px; }
  .topbar .brand img{ height: 34px; }
  .topbar .brand .name{ font-size: 17px; letter-spacing: 0.12em; white-space: nowrap; }
  .topbar .brand .name .small{ display: none; }
  .topbar nav ul{ grid-template-columns: 1fr; }
  .hero{
    min-height: auto;
    padding: 112px 0 56px;
  }
  .hero .copy h1{
    font-size: clamp(34px, 13vw, 54px);
    letter-spacing: 0.04em;
    line-height: 1.12;
  }
  .hero .copy .lead{
    font-size: 15.5px;
    letter-spacing: 0.03em;
    line-height: 1.85;
  }
  .hero-actions{ align-items: stretch; }
  .hero-actions .btn{
    flex: 1 1 100%;
    justify-content: center;
    letter-spacing: 0.18em;
    padding-inline: 18px;
  }
  .headline{ font-size: clamp(30px, 10vw, 42px); letter-spacing: 0.04em; }
  .subhead{ font-size: clamp(22px, 7vw, 30px); letter-spacing: 0.06em; }
  .body-text{ font-size: 15.5px; letter-spacing: 0.02em; }
  .origin{ padding: 76px 0 72px; }
  .origin-grid{ gap: 28px; }
  .origin .vert-block{
    display: block;
    padding: 28px 22px;
    overflow: hidden;
  }
  .origin .vert-text,
  .origin .vert-text.big{
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    max-height: none;
    padding: 0;
    letter-spacing: 0.04em;
    line-height: 1.9;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .origin .vert-text.big{
    font-size: 22px;
    letter-spacing: 0.14em;
    margin-bottom: 14px;
  }
  .origin .vert-text:not(.big){
    font-size: 15.5px;
    margin-top: 12px;
  }
  .origin .horiz-copy h3{
    font-size: 23px;
    letter-spacing: 0.06em;
    line-height: 1.45;
  }
  .origin .stats{
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .event-grid, .charm-grid, .foot-grid{ grid-template-columns: 1fr; }
  .amount-row{ grid-template-columns: 1fr 1fr; }
  .pay-row{ flex-direction: column; align-items: stretch; }
  .visit-list .row{ grid-template-columns: 1fr; gap: 6px; }
  .visit-list .label{ white-space: normal; }
  .music{
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
    width: 76px;
    height: 76px;
    display: grid;
    place-items: center;
    overflow: visible;
  }
  .music-toggle{ width: 56px; height: 56px; }
}

.brush-glyph{
  /* 用 Noto Serif 加粗模仿手寫感 */
  font-family: var(--brush);
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.1em;
}

.site-stage{
  transform-origin: 50% 42vh;
}
.site-stage.walking-in{
  animation: temple-walk-in 4.4s cubic-bezier(.16,.84,.24,1) both;
  will-change: transform, filter;
}
@keyframes temple-walk-in{
  0%{
    transform: scale(0.88) translateY(18px);
    filter: brightness(0.72) blur(1px);
  }
  72%{
    transform: scale(1.08) translateY(-10px);
    filter: brightness(1.06) blur(0);
  }
  100%{
    transform: scale(1) translateY(0);
    filter: brightness(1) blur(0);
  }
}

/* ===========================================================
   進站動畫 INTRO OVERLAY
   =========================================================== */
.intro{
  position: fixed; inset: 0; z-index: 300;
  background: transparent;
  display: grid; place-items: center;
  overflow: hidden;
  animation: intro-bg 1.2s ease-out;
}
.intro::before{
  content:""; position: absolute; inset:0; z-index: 1;
  background-image:
    radial-gradient(rgba(184,146,74,0.12) 1px, transparent 1px),
    radial-gradient(rgba(184,146,74,0.08) 1px, transparent 1px);
  background-size: 4px 4px, 9px 9px;
  background-position: 0 0, 2px 3px;
  opacity: 0.5;
  transition: opacity .8s ease;
}
.intro.opening::before{
  opacity: 0;
}
.intro-backdrop{
  position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)),
    url("assets/door-opening-BG.webp") center / cover no-repeat,
    #0d0805;
  transition: opacity .35s ease;
}
.intro.opening .intro-backdrop{
  opacity: 0.08;
}
.intro-door{
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.01;
  transform: scale(1.08);
  transition: opacity .18s ease, transform 1.5s cubic-bezier(.16,.84,.24,1);
  pointer-events: none;
}
.intro.opening .intro-door{
  opacity: 1;
  transform: scale(1.18);
}
.intro.leaving{
  animation: intro-out 0.9s ease forwards;
}
@keyframes intro-bg{
  from{ opacity: 0; }
  to  { opacity: 1; }
}
@keyframes intro-out{
  to{ opacity: 0; transform: scale(1.08); pointer-events: none; }
}

.intro .gates{
  position: absolute; inset: 0;
  display: flex;
  pointer-events: none;
}
.intro .gate{
  flex: 1; height: 100%;
  background: linear-gradient(180deg, #2a1a10 0%, #4a2818 50%, #2a1a10 100%);
  border: 1px solid #6b3a20;
  transition: transform 1.4s cubic-bezier(.7,0,.2,1);
}
.intro .gate.l{ border-right: 4px solid var(--gold-d); transform: translateX(0); }
.intro .gate.r{ border-left:  4px solid var(--gold-d); transform: translateX(0); }
.intro.opening .gate.l{ transform: translateX(-100%); }
.intro.opening .gate.r{ transform: translateX(100%);  }

.intro .core{
  position: relative; z-index: 4;
  text-align: center;
  padding: 40px;
  opacity: 0;
  transform: translateY(20px);
  animation: intro-in 1.4s ease 0.3s forwards;
}
@keyframes intro-in{
  to{ opacity: 1; transform: translateY(0); }
}
.intro.opening .core{
  animation: intro-fade 0.6s ease forwards;
}
@keyframes intro-fade{
  to{ opacity: 0; transform: scale(0.96); }
}

.intro .logo-wrap{
  position: relative;
  width: 220px; height: 220px;
  margin: 0 auto 32px;
}
.intro .logo-wrap img{
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 24px rgba(214,184,120,0.4));
}
.intro .logo-wrap::before{
  content:""; position: absolute; inset: -20px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(214,184,120,0.22), transparent 65%);
  filter: blur(8px);
}
.intro .ch{
  font-family: var(--serif);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 0.4em;
  color: var(--paper-warm);
  margin-bottom: 10px;
}
.intro .en{
  font-family: var(--latin);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.5em;
  color: var(--gold-l);
  margin-bottom: 32px;
  opacity: 0.8;
}
.intro .enter{
  display: inline-flex; align-items: center; gap: 16px;
  padding: 14px 36px;
  background: transparent;
  border: 1px solid var(--gold-d);
  color: var(--paper-warm);
  font-family: var(--serif);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.5em;
  cursor: pointer;
  transition: all .25s;
}
.intro .enter:hover{
  background: var(--gold-d);
  color: var(--ink);
  letter-spacing: 0.7em;
}
.intro .enter .stamp{
  display: inline-block;
  width: 10px; height: 10px;
  background: var(--vermillion);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(193,69,69,0.6);
}
.intro .skip{
  position: absolute;
  z-index: 5;
  bottom: 28px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--latin);
  font-size: 11px;
  letter-spacing: 0.35em;
  color: rgba(247,239,214,0.4);
  background: none; border: none;
  cursor: pointer;
}

@media (max-width: 620px){
  .intro-backdrop{
    background:
      linear-gradient(rgba(0,0,0,0.22), rgba(0,0,0,0.22)),
      url("assets/door-opening-BG.webp") 50% 50% / auto 100% no-repeat,
      #0d0805;
  }
  .intro-door{
    object-position: 50% 50%;
    transform: scale(1.34);
  }
  .intro.opening .intro-door{
    transform: scale(1.48);
  }
  .intro .core{
    width: min(100% - 32px, 360px);
    padding: 24px 0;
  }
  .intro .logo-wrap{
    width: min(58vw, 190px);
    height: min(58vw, 190px);
    margin-bottom: 24px;
  }
  .intro .ch{
    font-size: 24px;
    letter-spacing: 0.22em;
    text-indent: 0.22em;
  }
  .intro .en{
    font-size: 11px;
    letter-spacing: 0.24em;
    text-indent: 0.24em;
  }
  .intro .enter{
    width: 100%;
    justify-content: center;
    padding: 13px 18px;
    letter-spacing: 0.22em;
  }
}

/* ===========================================================
   音樂播放器 MUSIC PLAYER (右下) — 單顆按鈕版
   =========================================================== */
.music{
  position: fixed;
  right: 28px; bottom: 28px;
  z-index: 220;
}
.music-toggle{
  width: 64px; height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #c14545 0%, #8b2323 55%, #6e1a1a 100%);
  border: 2px solid var(--gold-d);
  color: var(--paper-warm);
  cursor: pointer;
  display: grid; place-items: center;
  position: relative;
  box-shadow:
    0 10px 28px -8px rgba(139,35,35,0.55),
    inset 0 -3px 6px rgba(0,0,0,0.3),
    inset 0 2px 4px rgba(255,200,120,0.25);
  transition: transform .2s;
}
.music-toggle:hover{ transform: scale(1.06); }
.music-toggle:active{ transform: scale(0.97); }
.music-toggle svg.icon{ width: 22px; height: 22px; position: relative; z-index: 2; }
.music-toggle .ring-progress{
  position: absolute; inset: -6px;
  width: 76px; height: 76px;
  transform: rotate(-90deg);
}
.music-toggle.playing::after{
  content:""; position: absolute; inset: -10px;
  border-radius: 50%;
  border: 1px solid var(--gold-l);
  animation: pulse-music 2.4s ease-out infinite;
  opacity: 0.7;
  pointer-events: none;
}
@keyframes pulse-music{
  0%   { transform: scale(1);    opacity: 0.7; }
  100% { transform: scale(1.45); opacity: 0;   }
}

/* ===========================================================
   子頁面 sub-page hero (求籤 / 綠界廟)
   =========================================================== */
.subhero{
  position: relative;
  padding: 160px 0 80px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(241,230,200,0.85), var(--paper)),
    linear-gradient(135deg, rgba(139,35,35,0.06), rgba(184,146,74,0.04));
}
.subhero .deco{
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.subhero .deco .ring{
  position: absolute;
  border: 1px solid rgba(28,20,14,0.1);
  border-radius: 50%;
}
.subhero .deco .ring.r1{
  width: 480px; height: 480px;
  right: -120px; top: -180px;
}
.subhero .deco .ring.r2{
  width: 280px; height: 280px;
  right: -40px; top: -60px;
  border-color: rgba(139,35,35,0.18);
}
.subhero .deco .ring.r3{
  width: 360px; height: 360px;
  left: -120px; bottom: -180px;
  border-color: rgba(44,74,62,0.18);
}
.subhero .inner{
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  align-items: center;
}
.subhero .breadcrumb{
  font-family: var(--latin);
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--ink-mute);
  margin-bottom: 18px;
}
.subhero .breadcrumb a{ color: inherit; text-decoration: none; }
.subhero .breadcrumb a:hover{ color: var(--vermillion); }
.subhero h1{
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(42px, 5vw, 72px);
  line-height: 1.1;
  letter-spacing: 0.12em;
  margin-bottom: 18px;
  color: var(--ink);
}
.subhero h1 .accent{ color: var(--vermillion); }
.subhero .lead{
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  max-width: 520px;
  margin-bottom: 28px;
}
.subhero .info-pills{
  display: flex; gap: 12px; flex-wrap: wrap;
}
.subhero .info-pills .p{
  padding: 8px 16px;
  border: 1px solid rgba(28,20,14,0.15);
  border-radius: 999px;
  background: var(--paper-warm);
  font-size: 12.5px;
  letter-spacing: 0.2em;
  color: var(--ink-soft);
}
.subhero .info-pills .p strong{
  color: var(--vermillion);
  font-weight: 600;
  letter-spacing: 0.15em;
}
.subhero .visual{
  position: relative;
  aspect-ratio: 1/1;
  display: grid; place-items: center;
}
.subhero .visual img{
  width: 78%;
  filter: drop-shadow(0 20px 36px rgba(28,20,14,0.2));
}
.subhero .visual::before{
  content:""; position: absolute; inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247,239,214,0.95), rgba(241,230,200,0.3) 60%, transparent 80%);
  filter: blur(10px);
}

/* ===========================================================
   發財金 紅包 lucky money
   =========================================================== */
.lucky{
  padding: 100px 0 100px;
  background: var(--paper-warm);
}
.lucky-stage{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  margin-top: 24px;
}
.envelope-wrap{
  position: relative;
  aspect-ratio: 1/1.25;
  display: grid; place-items: center;
  perspective: 1200px;
}
.envelope{
  position: relative;
  width: 80%; height: 80%;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform .6s ease;
}
.envelope:not(.open):hover{ transform: rotateY(-4deg) rotateX(2deg) translateY(-6px); }
.envelope-front, .envelope-back{
  position: absolute; inset: 0;
  background: linear-gradient(160deg, #a8362c 0%, #8b2323 40%, #6e1a1a 100%);
  border: 2px solid var(--gold-d);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px;
  box-shadow: 0 24px 48px -16px rgba(139,35,35,0.5);
}
.envelope-front::before{
  content:""; position: absolute; inset: 14px;
  border: 1px solid rgba(214,184,120,0.5);
  pointer-events: none;
}
.envelope-front .glyph{
  font-family: var(--serif);
  font-weight: 700;
  font-size: 110px;
  color: var(--gold-l);
  text-shadow: 0 0 24px rgba(214,184,120,0.4);
  line-height: 1;
}
.envelope-front .lbl{
  position: absolute;
  top: 24px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--serif);
  color: var(--gold-l);
  font-size: 14px;
  letter-spacing: 0.5em;
}
.envelope-front .foot{
  position: absolute;
  bottom: 28px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--latin);
  font-style: italic;
  color: var(--gold-l);
  font-size: 11px;
  letter-spacing: 0.4em;
  opacity: 0.7;
}
.envelope-front .seal-stamp{
  position: absolute;
  top: 50%; right: 20px;
  transform: translateY(-50%);
}
.envelope-front .tip{
  position: absolute;
  bottom: 12px; left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: rgba(247,239,214,0.55);
}
.envelope.open .envelope-front{
  animation: env-fly 0.7s ease forwards;
}
@keyframes env-fly{
  to{ transform: translateY(-40px) rotate(-6deg); opacity: 0; }
}
.envelope-card{
  position: absolute;
  inset: 8% 6% auto 6%;
  background: var(--paper-warm);
  border: 1px solid var(--gold-d);
  padding: 32px 28px;
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
}
.envelope.open .envelope-card{
  animation: card-rise 0.7s ease 0.25s forwards;
}
@keyframes card-rise{
  to{ opacity: 1; transform: translateY(0); }
}
.envelope-card::before, .envelope-card::after{
  content:""; position: absolute;
  width: 18px; height: 18px;
}
.envelope-card::before{
  top: 8px; left: 8px;
  border-top: 1px solid var(--gold-d);
  border-left: 1px solid var(--gold-d);
}
.envelope-card::after{
  bottom: 8px; right: 8px;
  border-bottom: 1px solid var(--gold-d);
  border-right: 1px solid var(--gold-d);
}
.envelope-card .head{
  font-family: var(--serif);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.4em;
  color: var(--ink-mute);
  margin-bottom: 12px;
}
.envelope-card .amount{
  font-family: var(--latin);
  font-weight: 500;
  font-size: 64px;
  line-height: 1;
  color: var(--vermillion);
  margin: 8px 0 14px;
}
.envelope-card .amount .cur{ font-size: 22px; vertical-align: top; }
.envelope-card .blessing{
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0.4em;
  color: var(--ink);
  margin-bottom: 12px;
}
.envelope-card .note{
  font-size: 13px;
  line-height: 1.8;
  color: var(--ink-soft);
  letter-spacing: 0.06em;
}

.lucky-copy h3{
  font-family: var(--serif);
  font-weight: 600;
  font-size: 36px;
  letter-spacing: 0.15em;
  margin: 0 0 18px;
}
.lucky-copy h3 .sub{
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  color: var(--vermillion);
  font-size: 14px;
  letter-spacing: 0.4em;
  margin-bottom: 10px;
}
.lucky-copy p{
  font-size: 15px;
  line-height: 2;
  color: var(--ink-soft);
  letter-spacing: 0.05em;
  margin: 0 0 16px;
  max-width: 480px;
}
.lucky-copy .rules{
  margin-top: 24px;
  padding: 18px 22px;
  background: rgba(247,239,214,0.6);
  border-left: 3px solid var(--vermillion);
}
.lucky-copy .rules h4{
  font-family: var(--serif);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.3em;
  color: var(--vermillion);
  margin: 0 0 10px;
}
.lucky-copy .rules ol{
  margin: 0; padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.95;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}

/* ===========================================================
   點光明燈 LAMP GRID
   =========================================================== */
.lamps{
  padding: 100px 0 100px;
  background: var(--ink);
  color: var(--paper-warm);
  position: relative;
  overflow: hidden;
}
.lamps::before{
  content:""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(184,146,74,0.18), transparent 60%);
  pointer-events: none;
}
.lamps .section-head h2{ color: var(--paper-warm); }
.lamps .section-head .ornament .line{ background: linear-gradient(90deg, transparent, var(--paper-deep), transparent); }
.lamps .section-head .ornament .glyph{ color: var(--gold-l); }
.lamps .section-head .lat{ color: var(--paper-deep); opacity: 0.7; }

.lamp-form{
  display: grid; grid-template-columns: 2fr 2fr 1fr 1fr;
  gap: 12px;
  margin: 0 auto 40px;
  max-width: 880px;
  position: relative; z-index: 2;
}
.lamp-form input, .lamp-form select{
  padding: 14px 16px;
  background: rgba(247,239,214,0.06);
  border: 1px solid rgba(247,239,214,0.18);
  color: var(--paper-warm);
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: 0.15em;
  outline: none;
}
.lamp-form input::placeholder{ color: rgba(247,239,214,0.4); }
.lamp-form button{
  background: var(--gold);
  border: 1px solid var(--gold-l);
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.3em;
  cursor: pointer;
  transition: background .2s;
}
.lamp-form button:hover{ background: var(--gold-l); }

.lamp-shelf{
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.4)),
    var(--ink);
  border: 1px solid rgba(184,146,74,0.3);
  padding: 32px 28px;
  z-index: 1;
}
.lamp-shelf .row{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(184,146,74,0.15);
}
.lamp-shelf .row:last-child{ border-bottom: 0; }
.lamp-shelf .row::before{
  content: attr(data-tier);
  position: absolute;
  left: -12px;
  writing-mode: vertical-rl;
  font-family: var(--serif);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--gold-l);
  opacity: 0.5;
}

.lamp{
  position: relative;
  aspect-ratio: 0.72;
  display: flex; flex-direction: column; align-items: center;
  cursor: default;
}
.lamp .top-cap{
  width: 18px; height: 4px;
  background: var(--gold-d);
}
.lamp .flame{
  position: relative;
  width: 14px; height: 22px;
  margin-bottom: 2px;
  background: radial-gradient(ellipse at 50% 70%, #fff5c2 0%, #ffd96b 30%, #ff8a30 70%, transparent 100%);
  border-radius: 50% 50% 30% 30% / 70% 70% 40% 40%;
  filter: blur(0.3px);
  animation: flicker 1.2s ease-in-out infinite alternate;
  box-shadow: 0 0 12px rgba(255,180,80,0.7), 0 0 24px rgba(255,180,80,0.3);
}
.lamp.empty .flame{
  background: rgba(247,239,214,0.08);
  box-shadow: none; animation: none; filter: none;
  border-radius: 50%;
}
@keyframes flicker{
  from{ transform: scaleY(0.95) scaleX(1.02); opacity: 0.85; }
  to  { transform: scaleY(1.05) scaleX(0.97); opacity: 1; }
}
.lamp .body-l{
  width: 100%;
  flex: 1;
  background: linear-gradient(180deg, #c14545 0%, #8b2323 50%, #6e1a1a 100%);
  border: 1px solid var(--gold-d);
  border-radius: 6px 6px 3px 3px;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 8px 4px;
  position: relative;
  box-shadow:
    inset 0 -4px 8px rgba(0,0,0,0.3),
    inset 0 2px 4px rgba(255,200,120,0.2);
}
.lamp .body-l::before, .lamp .body-l::after{
  content:""; position: absolute; left: -2px; right: -2px;
  height: 4px; background: var(--gold-d);
}
.lamp .body-l::before{ top: 4px; }
.lamp .body-l::after { bottom: 4px; }
.lamp.empty .body-l{
  background: rgba(247,239,214,0.04);
  border-color: rgba(247,239,214,0.12);
  box-shadow: none;
}
.lamp .name-l{
  writing-mode: vertical-rl;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--paper-warm);
  line-height: 1.2;
  max-height: 100%;
  overflow: hidden;
}
.lamp .base{
  width: 65%; height: 4px;
  background: var(--gold-d);
  margin-top: 1px;
}
.lamp.empty .name-l{ color: rgba(247,239,214,0.25); }
.lamp:hover .flame{ animation-duration: 0.4s; }
.lamp.mine{ transform: scale(1.05); }
.lamp.mine .body-l{ border-color: var(--gold-l); box-shadow: 0 0 18px rgba(214,184,120,0.5); }

.lamp-meta{
  margin-top: 24px;
  display: flex; justify-content: space-between;
  font-family: var(--latin);
  font-size: 12px;
  letter-spacing: 0.3em;
  color: rgba(247,239,214,0.55);
}
.lamp-meta b{ color: var(--gold-l); font-weight: 500; }

/* ===========================================================
   名簿牆 DONOR WALL
   =========================================================== */
.wall{
  padding: 100px 0 100px;
  background: var(--paper);
  position: relative;
}
.wall-grid{
  display: grid;
  grid-template-columns: 0.9fr 1.6fr;
  gap: 40px;
  margin-top: 24px;
}
.wall-aside h3{
  font-family: var(--serif);
  font-weight: 600;
  font-size: 28px;
  letter-spacing: 0.15em;
  margin: 0 0 16px;
}
.wall-aside p{
  font-size: 14.5px;
  line-height: 1.95;
  color: var(--ink-soft);
  letter-spacing: 0.05em;
}
.wall-aside .filters{
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 20px;
}
.wall-aside .filters .f{
  padding: 8px 14px;
  font-size: 12px;
  letter-spacing: 0.25em;
  border: 1px solid rgba(28,20,14,0.15);
  background: var(--paper-warm);
  color: var(--ink-soft);
  cursor: pointer;
}
.wall-aside .filters .f.active{
  background: var(--vermillion);
  color: var(--paper-warm);
  border-color: var(--vermillion-d);
}
.wall-aside .meta{
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px dashed rgba(28,20,14,0.2);
  display: flex; gap: 28px;
}
.wall-aside .meta .item .num{
  font-family: var(--latin);
  font-size: 28px;
  color: var(--vermillion);
  line-height: 1;
}
.wall-aside .meta .item .lbl{
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--ink-mute);
  margin-top: 6px;
}

.wall-board{
  background:
    linear-gradient(180deg, var(--paper-warm), var(--paper-deep));
  border: 1px solid rgba(28,20,14,0.1);
  padding: 24px;
  max-height: 540px;
  overflow-y: auto;
  position: relative;
}
.wall-board::-webkit-scrollbar{ width: 6px; }
.wall-board::-webkit-scrollbar-thumb{ background: var(--gold-d); border-radius: 3px; }
.wall-list{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px 18px;
}
.wall-list .name{
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(28,20,14,0.12);
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: 0.15em;
  color: var(--ink);
}
.wall-list .name .who{ font-weight: 500; }
.wall-list .name .what{
  font-family: var(--latin);
  font-size: 11px;
  letter-spacing: 0.25em;
  color: var(--ink-mute);
}
.wall-list .name.mine{
  background: var(--vermillion);
  color: var(--paper-warm);
  padding: 9px 12px;
  border: none;
  border-radius: 2px;
}
.wall-list .name.mine .what{ color: var(--gold-l); }

@media (max-width: 980px){
  .subhero .inner,
  .lucky-stage,
  .wall-grid{ grid-template-columns: 1fr; }
  .lamp-form{ grid-template-columns: 1fr 1fr; }
  .wall-list{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 620px){
  .lamp-form{ grid-template-columns: 1fr; }
  .wall-list{ grid-template-columns: 1fr; }
}

/* ===========================================================
   求籤頁：紅木供桌 + 擲筊 + 籤筒
   =========================================================== */
.altar-wrap{
  padding: 60px 0 80px;
  background: var(--paper);
}
.altar{
  position: relative;
  max-width: 940px;
  margin: 0 auto;
  padding: 56px 40px 32px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(139,35,35,0.05), transparent 60%),
    var(--paper-warm);
  border: 1px solid rgba(28,20,14,0.08);
}
.altar::before, .altar::after{ content:""; position: absolute; width: 28px; height: 28px; }
.altar::before{ top: 14px; left: 14px;
  border-top: 1px solid var(--gold-d); border-left: 1px solid var(--gold-d); }
.altar::after{ bottom: 14px; right: 14px;
  border-bottom: 1px solid var(--gold-d); border-right: 1px solid var(--gold-d); }
.altar-banner{ text-align: center; margin-bottom: 32px; }
.altar-banner .ch{
  font-family: var(--serif); font-weight: 700;
  font-size: 32px; letter-spacing: 0.4em; color: var(--vermillion);
  margin-bottom: 6px; text-indent: 0.4em;
}
.altar-banner .ch::before, .altar-banner .ch::after{
  content:"❖"; font-size: 14px; color: var(--gold-d);
  margin: 0 16px; vertical-align: middle;
}
.altar-banner .en{
  font-family: var(--latin); font-style: italic;
  font-size: 12px; letter-spacing: 0.5em; color: var(--ink-mute);
}

/* 紅布幔 */
.altar-curtain{
  position: relative; margin: 0 -8px 20px;
  height: 36px;
  background:
    linear-gradient(180deg, #6e1a1a 0%, #8b2323 40%, #8b2323 60%, transparent),
    var(--vermillion);
  border-top: 2px solid var(--gold-d);
  border-bottom: 2px solid var(--gold-d);
  text-align: center;
  font-family: var(--serif); font-weight: 600;
  font-size: 16px; letter-spacing: 0.6em;
  color: var(--paper-warm);
  line-height: 32px; text-indent: 0.6em;
  box-shadow: 0 6px 20px -4px rgba(139,35,35,0.5);
}

/* 供桌 */
.altar-table{
  position: relative;
  background:
    linear-gradient(180deg, #5a2a18 0%, #3a1c10 8%, #4a2412 50%, #2a140a 100%);
  border: 1px solid #1a0c06;
  height: 320px;
  margin: 0 -8px;
  padding: 24px;
  border-radius: 4px;
  box-shadow:
    inset 0 2px 8px rgba(255,200,120,0.12),
    inset 0 -4px 10px rgba(0,0,0,0.5),
    0 20px 40px -16px rgba(28,20,14,0.4);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: end;
}
.altar-table::before{
  content:""; position: absolute; left: 8px; right: 8px;
  top: 6px; height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold-d), var(--gold-l), var(--gold-d), transparent);
}

/* 籤筒 */
.tube-on-altar{
  position: relative;
  width: 110px; height: 220px;
  margin: 0 auto;
  background:
    linear-gradient(90deg, #3a1c10, #5a2a18 30%, #6a3520 50%, #5a2a18 70%, #3a1c10),
    #5a2a18;
  border-radius: 8px 8px 4px 4px;
  cursor: pointer;
  box-shadow:
    inset 2px 0 4px rgba(255,200,120,0.15),
    inset -2px 0 4px rgba(0,0,0,0.4),
    0 12px 24px rgba(0,0,0,0.4);
  transition: transform .2s;
  display: flex; flex-direction: column;
  padding-top: 18px;
}
.tube-on-altar:hover{ transform: translateY(-3px); }
.tube-on-altar .rim-band{
  position: absolute; top: -2px; left: -4px; right: -4px;
  height: 12px;
  background: linear-gradient(180deg, var(--gold-d), var(--gold-l) 50%, var(--gold-d));
  border-radius: 4px;
}
.tube-on-altar .ribbon-band{
  position: absolute; top: 16px; left: -6px; right: -6px;
  background: var(--vermillion);
  border-top: 1px solid var(--gold-d); border-bottom: 1px solid var(--gold-d);
  text-align: center; padding: 5px 0;
  font-family: var(--serif); font-weight: 600;
  font-size: 11px; letter-spacing: 0.5em;
  color: var(--paper-warm); text-indent: 0.5em;
}
.tube-on-altar .sticks-wrap{
  flex: 1; display: flex; align-items: flex-end;
  justify-content: center; gap: 3px;
  padding: 0 12px 8px;
  margin-top: 32px;
}
.tube-on-altar .stick{
  width: 5px;
  background: linear-gradient(180deg, #f5d99e 0%, #d4a76a 70%, #8c6a31 100%);
  border-radius: 2px 2px 0 0;
}
.tube-on-altar .stick:nth-child(odd) { height: 80%; }
.tube-on-altar .stick:nth-child(even){ height: 88%; }
.tube-on-altar .stick:nth-child(3n)  { height: 70%; }
.tube-on-altar.shaking{ animation: tube-rumble 0.3s ease-in-out infinite; }
@keyframes tube-rumble{
  0%,100% { transform: translateX(0) rotate(0); }
  25%     { transform: translateX(-3px) rotate(-1.5deg); }
  75%     { transform: translateX(3px) rotate(1.5deg); }
}

/* 香爐 */
.altar-censer{ position: relative; width: 80px; height: 130px; }
.altar-censer .pot{
  position: absolute; bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 70px; height: 50px;
  background: linear-gradient(180deg, #4a3a2a 0%, #2a1e14 100%);
  border-radius: 6px 6px 4px 4px;
  box-shadow:
    inset 0 -4px 8px rgba(0,0,0,0.5),
    inset 0 2px 4px rgba(255,200,120,0.1);
}
.altar-censer .pot .rim{
  position: absolute; top: -4px; left: -4px; right: -4px;
  height: 6px;
  background: linear-gradient(180deg, var(--gold-d), #5a3a1a);
  border-radius: 4px;
}
.altar-censer .stick3{
  position: absolute; bottom: 38px; left: 50%;
  width: 50px; height: 60px;
  transform: translateX(-50%);
}
.altar-censer .stick3 i{
  position: absolute;
  width: 2px; height: 52px;
  background: linear-gradient(180deg, #f5d99e 0%, #b8924a 60%, transparent);
  bottom: 0;
}
.altar-censer .stick3 i:nth-child(1){ left: 30%; transform: rotate(-6deg); }
.altar-censer .stick3 i:nth-child(2){ left: 50%; transform: translateX(-50%); }
.altar-censer .stick3 i:nth-child(3){ left: 70%; transform: rotate(6deg); }
.altar-censer .stick3 i::before{
  content:""; position: absolute; top: -4px; left: -2px;
  width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle, #ff8a30 0%, #c14545 60%, transparent);
  box-shadow: 0 0 8px rgba(255,180,80,0.7);
}
.altar-censer .wisp{
  position: absolute;
  width: 2px; height: 80px;
  bottom: 100px; left: 50%;
  background: linear-gradient(180deg, transparent, rgba(247,239,214,0.4) 30%, rgba(247,239,214,0.55) 60%, transparent);
  filter: blur(1.5px);
  animation: rise 4s ease-in infinite;
}
.altar-censer .wisp:nth-child(2){ left: 40%; animation-delay: -1.3s; }
.altar-censer .wisp:nth-child(3){ left: 60%; animation-delay: -2.6s; }

/* ===== 擲筊 ===== */
.jiao-stage{
  position: relative;
  margin: 28px auto 0;
  max-width: 940px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}
.jiao-arena{
  position: relative;
  height: 260px;
  background:
    radial-gradient(ellipse at 50% 60%, rgba(28,20,14,0.08), transparent 70%),
    var(--paper-warm);
  border: 1px solid rgba(28,20,14,0.08);
  display: flex; justify-content: center; align-items: flex-end;
  padding: 24px;
  gap: 24px;
  overflow: hidden;
}
.jiao-arena::before{
  content:""; position: absolute; bottom: 30px; left: 20%; right: 20%;
  height: 8px;
  background: radial-gradient(ellipse, rgba(28,20,14,0.18), transparent 70%);
  filter: blur(4px);
}
.jiao{
  position: relative;
  width: 88px; height: 56px;
  perspective: 200px;
  transform-style: preserve-3d;
  transition: transform 0.9s cubic-bezier(.3,1.4,.5,1);
  z-index: 2;
}
.jiao .face{
  position: absolute; inset: 0;
  border-radius: 50% 50% 8px 8px / 100% 100% 16px 16px;
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 13px;
  letter-spacing: 0.4em; color: var(--gold-l);
  backface-visibility: hidden;
}
.jiao .face.yin{
  background: radial-gradient(ellipse at 50% 30%, #c14545 0%, #8b2323 65%, #5a1414 100%);
  box-shadow:
    inset 0 -6px 10px rgba(0,0,0,0.45),
    inset 0 4px 8px rgba(255,200,120,0.2),
    0 6px 14px -4px rgba(139,35,35,0.5);
}
.jiao .face.yang{
  background: linear-gradient(180deg, #a8362c 0%, #8b2323 100%);
  transform: rotateX(180deg);
  box-shadow:
    inset 0 2px 4px rgba(255,200,120,0.25),
    0 6px 14px -4px rgba(139,35,35,0.4);
}
.jiao .face.yang::after{
  content:""; position: absolute; top: 6px; left: 12px; right: 12px;
  height: 1px;
  background: rgba(255,220,180,0.3);
  border-radius: 50%;
}
.jiao.is-yin  { transform: rotateX(0); }
.jiao.is-yang { transform: rotateX(180deg); }
.jiao.throwing{ animation: jiao-throw 1.4s cubic-bezier(.3,.7,.3,1) forwards; }
@keyframes jiao-throw{
  0%   { transform: translate(0, -200px) rotate(0)     rotateX(0)    ; opacity: 0; }
  20%  { transform: translate(-12px, -140px) rotate(-30deg) rotateX(360deg); opacity: 1; }
  60%  { transform: translate(8px, -50px)    rotate(20deg)  rotateX(720deg); }
}
.jiao.j2.throwing{ animation: jiao-throw2 1.4s cubic-bezier(.3,.7,.3,1) forwards; }
@keyframes jiao-throw2{
  0%   { transform: translate(0, -220px) rotate(0)     rotateX(0); opacity: 0; }
  20%  { transform: translate(14px, -160px) rotate(30deg)  rotateX(360deg); opacity: 1; }
  60%  { transform: translate(-10px, -60px) rotate(-25deg) rotateX(720deg); }
}
.jiao-call{
  position: absolute;
  top: 16px; left: 50%; transform: translateX(-50%);
  font-family: var(--serif); font-weight: 700;
  font-size: 28px; letter-spacing: 0.4em;
  padding: 6px 24px; z-index: 4;
  text-indent: 0.4em;
  opacity: 0;
  animation: call-in 0.5s 0.5s ease forwards;
}
@keyframes call-in{ to{ opacity: 1; transform: translate(-50%, 6px); } }
.jiao-call.sheng{ color: var(--vermillion); }
.jiao-call.xiao { color: var(--gold-d); }
.jiao-call.yin  { color: var(--pine); }

.jiao-panel h4{
  font-family: var(--serif); font-weight: 600;
  font-size: 22px; letter-spacing: 0.25em;
  margin: 0 0 12px; color: var(--ink);
}
.jiao-panel .verdict{
  padding: 16px 18px;
  background: var(--paper-warm);
  border-left: 3px solid var(--vermillion);
  margin-bottom: 18px;
}
.jiao-panel .verdict .lbl{
  font-family: var(--serif); font-weight: 700;
  font-size: 14px; letter-spacing: 0.4em;
  color: var(--vermillion); margin-bottom: 6px;
}
.jiao-panel .verdict .txt{
  font-size: 14px; line-height: 1.85;
  color: var(--ink-soft); letter-spacing: 0.05em;
}
.jiao-panel .step-list{
  margin-top: 16px; padding: 0 0 0 18px;
  font-size: 13.5px; line-height: 1.95;
  color: var(--ink-soft); letter-spacing: 0.04em;
}
.jiao-panel .step-list li{ margin-bottom: 4px; }
.jiao-panel .step-list li b{ color: var(--vermillion); }
.jiao-actions{
  display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px;
}
.btn-jiao{
  padding: 12px 22px;
  font-family: var(--serif); font-weight: 600;
  font-size: 14px; letter-spacing: 0.35em;
  border: 1px solid var(--vermillion);
  background: var(--vermillion);
  color: var(--paper-warm);
  cursor: pointer;
  transition: all .2s;
  text-indent: 0.35em;
}
.btn-jiao:hover{ background: var(--vermillion-d); transform: translateY(-1px); }
.btn-jiao.ghost{
  background: transparent;
  color: var(--ink-soft);
  border-color: var(--ink-mute);
}
.btn-jiao.ghost:hover{ background: var(--ink); color: var(--paper-warm); }
.btn-jiao:disabled{ opacity: 0.4; cursor: not-allowed; }

.rite-knowledge{
  margin: 80px auto 0;
  max-width: 1080px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
}
.rite-knowledge .col h3{
  font-family: var(--serif); font-weight: 700;
  font-size: 26px; letter-spacing: 0.2em;
  margin: 0 0 18px; color: var(--ink);
}
.rite-knowledge .col h3 span{ color: var(--vermillion); }
.rite-knowledge .col p{
  font-size: 14.5px; line-height: 2;
  color: var(--ink-soft); letter-spacing: 0.05em;
  margin: 0 0 14px;
}
.rite-knowledge .col p .em{
  background: linear-gradient(180deg, transparent 60%, rgba(184,146,74,0.3) 60%);
  font-weight: 600; color: var(--ink);
}
.rite-knowledge .terms{ display: grid; gap: 10px; margin-top: 16px; }
.rite-knowledge .term{
  padding: 14px 18px;
  background: var(--paper-warm);
  border: 1px solid rgba(28,20,14,0.08);
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
}
.rite-knowledge .term .k{
  font-family: var(--serif); font-weight: 700;
  font-size: 16px; letter-spacing: 0.3em;
  color: var(--vermillion);
}
.rite-knowledge .term .k .lat{
  display: block;
  font-family: var(--latin); font-style: italic;
  font-size: 11px; letter-spacing: 0.3em;
  color: var(--ink-mute); margin-top: 4px;
  font-weight: 400;
}
.rite-knowledge .term .v{
  font-size: 13.5px; line-height: 1.85;
  color: var(--ink-soft); letter-spacing: 0.04em;
}

.poem-card{
  margin: 36px auto 0;
  max-width: 720px;
  background:
    repeating-linear-gradient(0deg, rgba(110,90,55,0.04) 0 1px, transparent 1px 28px),
    var(--paper-warm);
  border: 1px solid rgba(184,146,74,0.45);
  padding: 40px 48px 36px;
  position: relative;
}
.poem-card::before, .poem-card::after{
  content:""; position: absolute; width: 22px; height: 22px;
}
.poem-card::before{ top: 10px; left: 10px;
  border-top: 1px solid var(--gold-d); border-left: 1px solid var(--gold-d);
}
.poem-card::after{ bottom: 10px; right: 10px;
  border-bottom: 1px solid var(--gold-d); border-right: 1px solid var(--gold-d);
}
.poem-card .head{
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px dashed rgba(28,20,14,0.18);
  padding-bottom: 14px;
  margin-bottom: 18px;
}
.poem-card .head .no{
  font-family: var(--serif); font-weight: 600;
  font-size: 18px; letter-spacing: 0.3em;
  color: var(--vermillion);
}
.poem-card .head .grade{
  font-family: var(--serif); font-weight: 700;
  font-size: 26px; letter-spacing: 0.35em;
  color: var(--vermillion);
  border: 2px solid var(--vermillion);
  padding: 4px 14px;
  text-indent: 0.35em;
}
.poem-card .poem{
  font-family: var(--serif); font-weight: 500;
  font-size: 22px; letter-spacing: 0.45em;
  line-height: 2.2; text-align: center;
  color: var(--ink); margin: 14px 0 24px;
  white-space: pre-line;
  text-indent: 0.45em;
}
.poem-card .meaning{
  font-size: 14.5px; line-height: 1.95;
  color: var(--ink-soft); letter-spacing: 0.06em;
  padding-top: 16px;
  border-top: 1px dashed rgba(28,20,14,0.18);
}
.poem-card .meaning b{ color: var(--vermillion); font-weight: 600; }

@media (max-width: 820px){
  .jiao-stage{ grid-template-columns: 1fr; }
  .rite-knowledge{ grid-template-columns: 1fr; gap: 32px; }
  .altar-table{ grid-template-columns: 1fr; height: auto; padding: 40px 24px; gap: 32px; }
  .altar-censer{ margin: 0 auto; }
}

/* ===========================================================
   財運卦 (取代發財金)
   =========================================================== */
.cardflip-wrap{ perspective: 1200px; }
.cardflip{
  position: relative;
  aspect-ratio: 1/1.4;
  max-width: 360px;
  margin: 0 auto;
  transform-style: preserve-3d;
  transition: transform 0.9s cubic-bezier(.5,1.2,.4,1);
  cursor: pointer;
}
.cardflip.flipped{ transform: rotateY(180deg); }
.cardflip-side{
  position: absolute; inset: 0;
  border: 2px solid var(--gold-d);
  padding: 28px 22px;
  display: flex; flex-direction: column;
  backface-visibility: hidden;
  box-shadow: 0 24px 48px -16px rgba(139,35,35,0.4);
}
.cardflip-side.front{
  background: linear-gradient(160deg, #a8362c 0%, #8b2323 50%, #6e1a1a 100%);
  color: var(--paper-warm);
  text-align: center;
  align-items: center; justify-content: center;
}
.cardflip-side.front::before{
  content:""; position: absolute; inset: 12px;
  border: 1px solid rgba(214,184,120,0.4);
}
.cardflip-side.front .glyph{
  font-family: var(--serif); font-weight: 700;
  font-size: 110px; color: var(--gold-l);
  line-height: 1;
  text-shadow: 0 0 18px rgba(214,184,120,0.4);
  margin-bottom: 14px;
}
.cardflip-side.front .lbl{
  font-family: var(--serif); font-weight: 600;
  font-size: 17px; letter-spacing: 0.5em;
  color: var(--gold-l); margin-bottom: 8px;
  text-indent: 0.5em;
}
.cardflip-side.front .sub{
  font-family: var(--latin); font-style: italic;
  font-size: 11px; letter-spacing: 0.4em;
  color: rgba(247,239,214,0.7);
}
.cardflip-side.front .tap{
  position: absolute; bottom: 24px; left: 50%;
  transform: translateX(-50%);
  font-size: 11px; letter-spacing: 0.4em;
  color: rgba(247,239,214,0.5);
}
.cardflip-side.back{
  background: var(--paper-warm);
  transform: rotateY(180deg);
  padding: 24px 22px;
}
.cardflip-side.back::before{
  content:""; position: absolute; inset: 10px;
  border: 1px solid rgba(184,146,74,0.5);
}
.cardflip-side.back .grade-row{
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px dashed rgba(28,20,14,0.18);
}
.cardflip-side.back .gname{
  font-family: var(--serif); font-weight: 600;
  font-size: 13px; letter-spacing: 0.3em;
  color: var(--ink-mute);
}
.cardflip-side.back .grade-pill{
  font-family: var(--serif); font-weight: 700;
  font-size: 22px; letter-spacing: 0.3em;
  color: var(--vermillion);
  border: 2px solid var(--vermillion);
  padding: 2px 10px;
  text-indent: 0.3em;
}
.cardflip-side.back .blessing{
  font-family: var(--serif); font-weight: 700;
  font-size: 22px; letter-spacing: 0.4em;
  color: var(--ink);
  text-align: center;
  margin: 6px 0 14px;
  text-indent: 0.4em;
}
.cardflip-side.back .attrs{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
.cardflip-side.back .attr{
  background: rgba(247,239,214,0.6);
  border: 1px solid rgba(28,20,14,0.08);
  padding: 10px 12px;
}
.cardflip-side.back .attr .k{
  font-family: var(--latin);
  font-size: 10px; letter-spacing: 0.3em;
  color: var(--ink-mute); margin-bottom: 4px;
}
.cardflip-side.back .attr .v{
  font-family: var(--serif); font-weight: 600;
  font-size: 16px; letter-spacing: 0.2em;
  color: var(--vermillion);
}
.cardflip-side.back .advice{
  margin-top: auto;
  font-size: 12.5px; line-height: 1.8;
  color: var(--ink-soft); letter-spacing: 0.04em;
  padding-top: 12px;
  border-top: 1px dashed rgba(28,20,14,0.18);
}

/* 三件式入口 */
.entry-rites{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 1200px;
  margin: 64px auto -40px;
}
.entry-rite{
  background: var(--paper-warm);
  border: 1px solid rgba(28,20,14,0.1);
  padding: 24px 22px;
  text-align: center;
  position: relative;
  cursor: pointer;
  transition: all .25s;
  text-decoration: none;
  color: inherit;
  display: block;
}
.entry-rite::before{
  content: attr(data-glyph);
  font-family: var(--serif); font-weight: 700;
  font-size: 64px; color: var(--vermillion);
  opacity: 0.1;
  position: absolute;
  top: 14px; right: 18px;
  line-height: 1;
}
.entry-rite:hover{
  transform: translateY(-3px);
  border-color: var(--vermillion);
  box-shadow: 0 14px 32px -16px rgba(139,35,35,0.3);
}
.entry-rite h4{
  font-family: var(--serif); font-weight: 600;
  font-size: 18px; letter-spacing: 0.25em;
  color: var(--ink); margin: 0 0 6px;
}
.entry-rite .lat{
  font-family: var(--latin); font-style: italic;
  font-size: 11px; letter-spacing: 0.3em;
  color: var(--ink-mute); margin-bottom: 14px;
}
.entry-rite .desc{
  font-size: 13px; line-height: 1.75;
  color: var(--ink-soft); letter-spacing: 0.04em;
}
@media (max-width: 820px){
  .entry-rites{ grid-template-columns: 1fr; }
}


body[data-mode="night"]{
  --paper:        #1c160e;
  --paper-soft:   #251d12;
  --paper-deep:   #2c2316;
  --paper-warm:   #29200f;
  --ink:          #f0e5c4;
  --ink-soft:     #d8c89a;
  --ink-mute:     #a89370;
  --vermillion:   #c14545;
  --vermillion-d: #9a2e2e;
  --vermillion-l: #d96565;
  --pine:         #6b9b85;
  --gold:         #d6b878;
  --gold-l:       #ecd6a4;
  --gold-d:       #b8924a;
}
body[data-mode="night"] .events,
body[data-mode="night"] .charms{ background: var(--paper); }
body[data-mode="night"] .visit{ background: var(--paper-warm); }
body[data-mode="night"] .topbar{ background: rgba(28,22,14,0.85); }
body[data-mode="night"] .topbar nav a{ color: var(--ink-soft); }
body[data-mode="night"] .event-card{ background: var(--paper-soft); }
body[data-mode="night"] .map-card .map-vis{ background:
    repeating-linear-gradient(0deg, rgba(247,239,214,0.06) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(90deg, rgba(247,239,214,0.06) 0 1px, transparent 1px 60px),
    rgba(247,239,214,0.04);
}

@media (max-width: 620px){
  html,
  body{
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  .site-stage{
    max-width: 100vw;
    overflow-x: hidden;
  }
  img, video, canvas, svg{ max-width: 100%; }
  section{ overflow-x: clip; }
  [style*="grid-template-columns"],
  [style*="gridTemplateColumns"]{
    grid-template-columns: 1fr !important;
  }
  [style*="width: 60%"]{
    width: min(100%, 280px) !important;
  }
  .subhero{
    min-height: auto;
    padding: 110px 0 64px;
  }
  .subhero .inner,
  .fortune-stage,
  .wall-grid,
  .rite-knowledge,
  .entry-rites,
  .jiao-stage{
    grid-template-columns: 1fr !important;
    gap: 28px;
  }
  .subhero h1{
    font-size: clamp(34px, 12vw, 50px);
    letter-spacing: 0.04em;
  }
  .subhero .lead,
  .subhero .breadcrumb{
    letter-spacing: 0.04em;
  }
  .subhero .visual{
    min-height: 220px;
  }
  .envelope-stage{
    grid-template-columns: 1fr !important;
  }
  .envelope-wrap,
  .altar-wrap,
  .donate-shell{
    max-width: 100%;
  }
  .poem-card{
    padding: 22px 18px;
  }
  .poem-card .head{
    align-items: center;
    gap: 12px;
  }
  .poem-card .head .grade{
    font-size: 22px;
    letter-spacing: 0.18em;
    padding-inline: 10px;
  }
  .poem-card .poem{
    font-size: 18px;
    letter-spacing: 0.22em;
    line-height: 2;
  }
  .cardflip{
    max-width: min(100%, 320px);
  }
  .wall-list,
  .lamp-form{
    grid-template-columns: 1fr !important;
  }
  .toast{
    width: calc(100% - 32px);
    left: 16px;
    bottom: 86px;
    transform: translate(0, 16px);
    white-space: normal;
  }
  .toast.show{ transform: translate(0, 0); }
}