/* ============================================================
   庙堂祭拜场景
   大殿（藻井 / 朱柱 / 帷幔 / 宫灯 / 青砖地）全由分层 div + 渐变画成，不依赖背景图；
   中间三栏：左画像卷轴（挂了图就挂图，没挂就写竖排名号）、中青石神像、右功德碑。
   神像仍是原来那套分层结构，只是多了一层 .idol-figure 把石色和凿痕压上去。
   ============================================================ */

.shrine {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  --robe-main: #8c1c22;
  --robe-dark: #5e0f13;
  --robe-accent: #c9a227;
  --halo: #ffd873;
  --skin: #f0c9a0;

  background:
    radial-gradient(ellipse 70% 50% at 50% 8%, rgba(255, 216, 115, .16), transparent 70%),
    radial-gradient(ellipse 100% 60% at 50% 100%, rgba(168, 35, 42, .30), transparent 70%),
    linear-gradient(180deg, #1a0d0a 0%, #2a1210 45%, #160a08 100%);
  animation: shrineIn .5s cubic-bezier(.2, .8, .3, 1);
}

@keyframes shrineIn {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: scale(1); }
}

.shrine.hidden { display: none !important; }

/* 场景整体可滚动，小屏也能看全 */
.shrine-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

.shrine-inner {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 20px 28px;
  box-sizing: border-box;
}

/* ---------------- 顶部栏 ---------------- */

.shrine-bar {
  position: relative;
  z-index: 6;
  width: 100%;
  max-width: 900px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.shrine-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border: 1px solid rgba(232, 200, 90, .45);
  border-radius: 999px;
  background: rgba(0, 0, 0, .28);
  color: var(--gold-light);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background .2s, transform .15s;
}
.shrine-back:hover { background: rgba(0, 0, 0, .5); transform: translateX(-2px); }

.shrine-title {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  line-height: 1.3;
}
.shrine-title .st-name {
  font-size: 17px;
  letter-spacing: 4px;
  color: var(--gold-light);
  font-weight: 600;
}
.shrine-title .st-sub {
  font-size: 11px;
  letter-spacing: 1px;
  color: rgba(253, 246, 232, .55);
}

/* ---------------- 庙堂大殿 ----------------
   原来的「神龛木阁」扩成一间大殿：藻井、朱柱、帷幔、宫灯、青砖地，
   中间三栏（左画像卷轴 / 中青石神像 / 右功德碑），香案横在最前面。

   三栏 .hall-cols 与香案 .altar-deck 都是 .hall 的绝对定位子层，
   香炉/供品/火盆那套按百分比定位的老规则参照系不变，换背景不会把它们挤偏。 */

.altar-stage {
  position: relative;
  width: 100%;
  max-width: 900px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0 4px;
}

.hall {
  position: relative;
  width: min(860px, 95vw);
  height: min(62vh, 580px);
  min-height: 380px;
  border-radius: 12px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 64% 50% at 50% 58%, rgba(126, 46, 32, .5), transparent 72%),
    linear-gradient(180deg, #170c09 0%, #2a1310 40%, #321a13 72%, #1b0d0a 100%);
  box-shadow:
    inset 0 0 90px rgba(0, 0, 0, .82),
    inset 0 -30px 60px rgba(0, 0, 0, .5),
    0 18px 50px rgba(0, 0, 0, .55);
}

/* 藻井：顶部方格井 + 井心金光，底下接一条金线额枋 */
.hall-ceiling {
  position: absolute;
  inset: 0 0 auto 0;
  height: 15%;
  background:
    radial-gradient(ellipse 34% 90% at 50% 0%, rgba(255, 216, 115, .34), transparent 72%),
    repeating-linear-gradient(90deg, rgba(201, 162, 39, .26) 0 1px, transparent 1px 6.25%),
    repeating-linear-gradient(0deg, rgba(201, 162, 39, .2) 0 1px, transparent 1px 40%),
    linear-gradient(180deg, #40150f, #250d0a 76%, #1b0b09);
  box-shadow: inset 0 -16px 26px rgba(0, 0, 0, .6);
  z-index: 1;
}
.hall-ceiling::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 16%;
  background: linear-gradient(180deg, #6b3a22, #3a1c10);
  box-shadow: inset 0 2px 0 rgba(201, 162, 39, .65), 0 6px 16px rgba(0, 0, 0, .55);
}

/* 帷幔：挂在额枋下，底边做成一排垂穗 */
.hall-valance {
  position: absolute;
  left: 0;
  top: 15%;
  width: 100%;
  height: 6%;
  background: linear-gradient(180deg, #a8232a, #7d1a1a 56%, #570f14);
  box-shadow: inset 0 2px 0 rgba(232, 200, 90, .5), inset 0 -8px 14px rgba(0, 0, 0, .45);
  z-index: 2;
}
.hall-valance::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 14px;
  background: radial-gradient(circle at 50% 0, #570f14 0 70%, transparent 72%) 0 0 / 26px 14px repeat-x;
}

/* 朱红大柱：从藻井一直立到青砖地 */
.hall-pillar {
  position: absolute;
  top: 14%;
  bottom: 9%;
  width: 5.2%;
  background: linear-gradient(90deg, #4a0e11, #9c2027 38%, #c8402f 52%, #6d1519 78%, #38090d);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, .55), 0 0 26px rgba(0, 0, 0, .5);
  z-index: 1;
}
.hall-pillar.l { left: 1.5%; }
.hall-pillar.r { right: 1.5%; }
/* 柱箍 */
.hall-pillar::before,
.hall-pillar::after {
  content: "";
  position: absolute;
  left: -8%;
  width: 116%;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #6b4a12, #f0d894, #6b4a12);
  opacity: .75;
}
.hall-pillar::before { top: 7%; }
.hall-pillar::after { bottom: 6%; }

/* 宫灯：柱前一左一右，轻轻摇晃 */
.hall-lantern {
  position: absolute;
  top: 9%;
  width: 5.5%;
  aspect-ratio: 1 / 1.18;
  border-radius: 46% 46% 46% 46% / 40% 40% 60% 60%;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .16) 0 2px, transparent 2px 13px),
    radial-gradient(circle at 34% 28%, rgba(255, 236, 180, .85), transparent 46%),
    linear-gradient(180deg, #d2342e, #a01a17 62%, #7d1310);
  box-shadow: 0 0 26px 8px rgba(255, 150, 60, .35), inset 0 -8px 14px rgba(0, 0, 0, .35);
  transform-origin: 50% -30px;
  animation: lanternSway 6.5s ease-in-out infinite;
  z-index: 4;
}
/* 灯绳（往上接藻井）与灯穗 */
.hall-lantern::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 2px;
  height: 40px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(232, 200, 90, .5), rgba(232, 200, 90, .15));
}
.hall-lantern::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 3px;
  height: 22px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #f0d894, rgba(201, 162, 39, .2));
}
.hall-lantern.l { left: 3.5%; }
.hall-lantern.r { right: 3.5%; }
@keyframes lanternSway {
  0%, 100% { transform: rotate(-1.6deg); }
  50%      { transform: rotate(1.6deg); }
}

/* 青砖地：柱础与须弥座踩在这层上，前面被香案挡住。
   正中加一道烛火反光，地面不平才能看出进深。 */
.hall-floor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 26%;
  background:
    radial-gradient(ellipse 46% 70% at 50% 18%, rgba(255, 190, 110, .12), transparent 70%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .45) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .4) 0 1px, transparent 1px 22px),
    linear-gradient(180deg, #3d3b35, #4a473f 26%, #2f2d2a);
  box-shadow: inset 0 14px 28px rgba(0, 0, 0, .65);
  z-index: 0;
}

/* 神光：给石像打的背光，颜色随神位（见下方 data-deity 规则） */
.hall-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 66%;
  height: 84%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
      rgba(255, 216, 115, .30) 0%,
      rgba(255, 190, 90, .16) 34%,
      rgba(200, 120, 50, .06) 58%,
      transparent 72%);
  animation: haloBreath 5.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes haloBreath {
  0%, 100% { opacity: .78; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.07); }
}

/* ---------------- 三栏：画像 / 石像 / 功德碑 ----------------
   夹在两根朱柱之间。上下各让开一段：上面给藻井与帷幔，
   下面让开香案的高度，否则须弥座和碑文的下半截会被香案吃掉。 */

.hall-cols {
  position: absolute;
  inset: 17% 8% 18% 8%;
  display: grid;
  grid-template-columns: 0.95fr 1.15fr 0.95fr;
  /* 行高写死成 100%：auto 行会被内容反向撑高，
     石像的百分比高度再反推回去，最后须弥座被顶进香案里 */
  grid-template-rows: 100%;
  gap: 2%;
  align-items: end;
  z-index: 2;
}

.hall-col { position: relative; }
/* 画像挂轴从额枋下一直垂下来，石像与功德碑立在砖地上 */
.hall-col-left {
  align-self: start;
  height: 86%;
  display: flex;
  justify-content: center;
}
.hall-col-center {
  align-self: stretch;
  /* 网格项的自动最小尺寸会让它被内容撑高、把须弥座顶到香案里去，
     这里必须拔掉；石像.height 是百分比，父级高度不确定就会连环失准。 */
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}
.hall-col-right { align-self: end; }

/* ---- 左：画像挂轴 ---- */

.hang-scroll {
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .6));
}
.scroll-cord {
  flex: 0 0 auto;
  width: 2px;
  height: 24px;
  background: linear-gradient(180deg, rgba(232, 200, 90, .55), rgba(232, 200, 90, .18));
}
.scroll-rod {
  flex: 0 0 auto;
  width: 116%;
  height: 9px;
  border-radius: 5px;
  background: linear-gradient(180deg, #d9b45c, #8a6a34 55%, #5c4520);
  box-shadow: inset 0 1px 0 rgba(255, 240, 190, .6), 0 2px 6px rgba(0, 0, 0, .5);
}
.scroll-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  background:
    repeating-linear-gradient(90deg, rgba(120, 90, 50, .07) 0 1px, transparent 1px 9px),
    linear-gradient(180deg, #f3e3c4, #e6d0a8 60%, #d9bf92);
  box-shadow: inset 0 0 0 1px rgba(120, 80, 40, .35), inset 0 0 22px rgba(120, 80, 40, .3);
}
/* 裱边：一圈双线，无论里面是画还是字都像正经装裱过的立轴 */
.scroll-body::after {
  content: "";
  position: absolute;
  inset: 6%;
  border: 1px solid rgba(120, 80, 40, .38);
  box-shadow: 0 0 0 3px rgba(120, 80, 40, .12);
  pointer-events: none;
}
.scroll-body img {
  display: block;
  width: 100%;
  height: 100%;
  /* contain：画像比例各不相同，宁可留一点纸边也不要裁掉神像的头 */
  object-fit: contain;
}
/* 没挂画像的神位：卷轴上写竖排名号。
   字少，卷轴也收窄，才像一块神位牌而不是一张空纸。 */
.hang-scroll.no-image { width: 152px; }
.scroll-name {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  font-size: clamp(17px, 1.8vw, 23px);
  letter-spacing: .42em;
  line-height: 1.25;
  color: #4a2c1c;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
}

/* ---- 中：青石神像 + 须弥座 ---- */

.idol-stand {
  position: relative;
  height: 100%;
  width: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}
.idol-stand .idol {
  width: auto;
  height: 87%;
  aspect-ratio: 3 / 5;
  /* 抬到须弥座上。margin 百分比是按宽度算的（≈0.52×父高），
     与须弥座的 13% 高度一比，神像底座正好沉进去约 1/5，像站上去的样子。 */
  margin-bottom: 20%;
}

/* 须弥座：上枋—束腰—下枋—圭角 的剪影，一块元素画完。
   明暗按层分好，否则缩到三百像素高就成一块灰条。 */
.pedestal {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 118%;
  height: 13%;
  transform: translateX(-50%);
  background:
    repeating-linear-gradient(70deg, rgba(255, 255, 255, .07) 0 2px, transparent 2px 9px),
    linear-gradient(180deg,
      #a9b1ac 0 6%,
      #8b948f 6% 10%,
      #5f6863 10% 17%,
      #737c77 17% 23%,
      #4f5853 23% 62%,
      #737c77 62% 70%,
      #5f6863 70% 79%,
      #8b948f 79% 92%,
      #434b47 92% 100%);
  clip-path: polygon(8% 0, 92% 0, 96% 7%, 88% 12%, 88% 64%, 96% 70%, 100% 88%, 100% 100%, 0 100%, 0 88%, 4% 70%, 12% 64%, 12% 12%, 4% 7%);
  /* clip-path 会把 box-shadow 一起剪掉，外投影只能用 drop-shadow */
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .55));
}

/* ---- 右：功德碑（青石碑，碑文阴刻描金） ---- */

.merit-stele {
  padding: 13px 15px 15px;
  border-radius: 5px 5px 2px 2px;
  background:
    repeating-linear-gradient(74deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 8px),
    repeating-linear-gradient(-58deg, rgba(0, 0, 0, .07) 0 2px, transparent 2px 11px),
    linear-gradient(180deg, #6d7672, #4f5854 55%, #3b423f);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .18),
    inset 0 -16px 26px rgba(0, 0, 0, .45),
    0 14px 30px rgba(0, 0, 0, .55);
}
.merit-title {
  margin: 0 0 8px;
  padding-bottom: 7px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .5em;
  text-align: center;
  text-indent: .5em;   /* 补掉末字多出来的字距，让「功德碑」真正居中 */
  color: var(--gold-light);
  border-bottom: 1px solid rgba(232, 200, 90, .3);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
.merit-counts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 6px;
  margin: 0 0 11px;
  font-size: 12px;
  color: rgba(238, 242, 238, .82);
  font-variant-numeric: tabular-nums;
}
.merit-counts b { font-size: 14px; color: var(--gold-light); }
.merit-label {
  margin: 0 0 3px;
  font-size: 11px;
  letter-spacing: .28em;
  color: rgba(232, 200, 90, .72);
}
.merit-desc,
.merit-bless {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.8;
  color: rgba(238, 242, 238, .86);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
}
.merit-bless { margin-bottom: 0; color: #ffe9b0; }

/* ---------------- 香案（三件陈设 + 供桌） ----------------
   单独包一层 .altar-deck 是为了窄屏：那时候整幕改成上下堆叠，
   这一层能整体落到石像下面，而不用把每件陈设的定位重写一遍。 */

.altar-deck {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

/* 供桌 */
.altar-table {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 13%;
  border-radius: 4px;
  background: linear-gradient(180deg, #6b3a22, #45210f 55%, #2c1408);
  box-shadow:
    inset 0 3px 0 rgba(201, 162, 39, .5),
    inset 0 -4px 10px rgba(0, 0, 0, .55),
    0 10px 26px rgba(0, 0, 0, .6);
  z-index: 4;
}

/* ------------------- 神像本体（青石） -------------------
   结构仍是原来那套分层 div，只是外面多裹了一层 .idol-figure：
   石色与凿痕都压在那一层上，头光/背光留在外层不被染灰。 */

.idol {
  position: relative;
  aspect-ratio: 3 / 5;
  z-index: 2;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .55));
}

.idol-figure {
  position: absolute;
  inset: 0;
}

/* 石色：对整层神像走 filter，不用 mix-blend-mode。
   blend 要拿背幕颜色算，而神像是很多块透明 div 拼的，
   矩形区域里没画到的地方会把身后的头光一起染成一块灰板（实测踩过）。
   filter 是自包含的，不会泄到神像以外。

   grayscale + sepia + hue-rotate 是经典的「双色调」配方：
   先把颜色抽干，再染一层青蓝，就是青石那种冷灰，不是白垩。 */
.idol.stone .idol-figure {
  filter:
    grayscale(.92) sepia(.3) hue-rotate(158deg) saturate(1.5) contrast(1.15) brightness(.95)
    /* 紧贴轮廓的一道暗边：石头跟背后的红墙明度差不大，没这道边就糊成一团 */
    drop-shadow(0 2px 3px rgba(0, 0, 0, .8));
}

/* 凿痕与石料颗粒只能叠在本来就实心的部件上：透明处叠上去会把光晕也抹脏。
   所以逐件把它们自己的渐变重写一遍，服色仍走 var，换神位不会失效。
   上面两层光照（左上一道柔光、右侧一道暗部）是石像体积感的来源，
   少了它，石头就只是一块平涂的灰。 */
/* 石像版把神袍拉长到箱底、并收窄肩膀：
   原图的神袍只占到箱体 77%，下面那一段空着（旧版有供桌遮着看不出来），
   现在下面是须弥座，空着就成了悬空；肩宽 96% 也远宽于头宽，看着像雪人。 */
.idol.stone .idol-figure .idol-robe {
  width: 78%;
  height: 72%;
  background:
    radial-gradient(ellipse 58% 42% at 30% 14%, rgba(255, 248, 226, .18), transparent 66%),
    /* 衣纹：两道软阴影就够了。画成等距的硬条纹会像件条纹衫，更不像石头 */
    linear-gradient(100deg,
      transparent 0 26%, rgba(0, 0, 0, .15) 26% 31%, transparent 31% 54%,
      rgba(0, 0, 0, .13) 54% 59%, transparent 59%),
    repeating-linear-gradient(72deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(-64deg, rgba(0, 0, 0, .1) 0 1px, transparent 1px 9px),
    linear-gradient(255deg, rgba(0, 0, 0, .4) 0 10%, transparent 55%),
    /* 下摆透出一点服色（非金）作领缘，石雕上就是一道浅刻线 */
    linear-gradient(180deg, rgba(255, 255, 255, .14) 0%, transparent 16%),
    linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .1) 50%, transparent 58%),
    linear-gradient(180deg, var(--robe-main), var(--robe-dark) 78%);
}
.idol.stone .idol-figure .idol-sleeve {
  background:
    radial-gradient(ellipse 60% 50% at 32% 24%, rgba(255, 248, 226, .16), transparent 66%),
    linear-gradient(100deg, transparent 30%, rgba(0, 0, 0, .22) 34% 40%, transparent 44%),
    repeating-linear-gradient(72deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(-64deg, rgba(0, 0, 0, .1) 0 1px, transparent 1px 9px),
    linear-gradient(180deg, var(--robe-main), var(--robe-dark));
}

/* 法器底座那圈金光在石头身上会变成两个灰色圆盘，改成极淡的一点石影 */
.idol.stone .idol-figure .idol-token {
  background: radial-gradient(circle, rgba(255, 255, 255, .07), transparent 70%);
  filter: none;
}

/* 交领、玉带、手卷、毛笔：这四样在彩塑上是描金髹漆，在青石上就是几道白得刺眼的条。
   不靠 filter 压——父层还有 contrast，压不干净——直接把底色换成石色。 */
.idol.stone .idol-figure .idol-collar {
  background:
    linear-gradient(72deg, transparent 46%, #8b948e 47%, #8b948e 53%, transparent 54%),
    linear-gradient(108deg, transparent 46%, #8b948e 47%, #8b948e 53%, transparent 54%);
  opacity: .5;
}
.idol.stone .idol-figure .idol-belt {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .3) 0 26%, transparent 30%),
    linear-gradient(90deg, #59615c, #8b948e 26%, #a9b2ac 50%, #8b948e 74%, #59615c);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
.idol.stone .idol-figure .idol-scroll {
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 7%),
    linear-gradient(180deg, #8d968f 0%, #737d76 55%, #5a635d 100%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(0, 0, 0, .35);
}
.idol.stone .idol-figure .idol-scroll::before,
.idol.stone .idol-figure .idol-scroll::after {
  background: linear-gradient(90deg, #4c544f, #79827c 40%, #8d968f 55%, #4c544f);
}
.idol.stone .idol-figure .idol-brush {
  background: linear-gradient(90deg, #4c544f, #7c857f 40%, #949d97 55%, #4c544f);
  box-shadow: none;
}

/* 头面：石胎不能像肤色那样白里透红，换成石材的明暗，再给一颗斜光。
   脸比衣褶亮——庙里烛光先照到脸，视线也先落到脸上。 */
.idol.stone .idol-figure .idol-head {
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 250, 232, .3), transparent 52%),
    repeating-linear-gradient(72deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 7px),
    radial-gradient(circle at 34% 28%, #b3bbb6, #8f9893 58%, #626b66);
  box-shadow:
    0 5px 9px -2px rgba(0, 0, 0, .55),
    inset -4px -4px 9px rgba(25, 34, 32, .5),
    inset 3px 3px 7px rgba(255, 255, 255, .14);
}

/* 长髯：原色是从深褐到浅黄，在石像上就是一撮白胡子，压成一道石刻 */
.idol.stone .idol-figure .idol-beard::after {
  background: linear-gradient(180deg, #3c4340 0%, #545c58 50%, #6b746f 100%);
}
.idol.stone .idol-figure .idol-beard::before {
  background:
    linear-gradient(78deg, transparent 0 40%, #2f3634 41% 55%, transparent 56%),
    linear-gradient(102deg, transparent 44% 59%, #2f3634 60% 74%, transparent 75%);
}

/* 乌纱帽：纯黑一块在石像上就是顶黑帽子，换成深青石，形状才看得出 */
.idol.stone .idol-figure .idol-crown {
  background:
    radial-gradient(circle at 50% 56%, rgba(255, 255, 255, .5) 0 3.6%, transparent 4.4%),
    linear-gradient(180deg, #4b534e 0%, #3a423e 52%, #262b29 100%);
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, .18),
    inset 0 -3px 6px rgba(0, 0, 0, .5),
    0 0 0 1.5px rgba(170, 180, 175, .45),
    0 0 12px rgba(120, 130, 125, .3);
}
.idol.stone .idol-figure .idol-crown::before,
.idol.stone .idol-figure .idol-crown::after {
  background: linear-gradient(90deg, #333a37, #4b534e);
  box-shadow: 0 0 0 1px rgba(170, 180, 175, .3);
}

/* 头光 */
.idol-halo {
  position: absolute;
  left: 50%;
  top: 2%;
  width: 58%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 235, 180, .92) 0%, rgba(255, 205, 110, .62) 38%, rgba(255, 180, 80, .16) 62%, transparent 74%);
  box-shadow: 0 0 46px 14px rgba(255, 205, 110, .45);
}

/* 身后圆光（莲座式光背） */
.idol-aura {
  position: absolute;
  left: 50%;
  top: 30%;
  width: 88%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 216, 115, .22), transparent 68%);
  border: 1px solid rgba(255, 216, 115, .22);
}

/* 头部 */
.idol-head {
  position: absolute;
  left: 50%;
  top: 12%;
  width: 25%;
  aspect-ratio: 1 / 1.12;
  transform: translateX(-50%);
  border-radius: 50% 50% 46% 46%;
  background: radial-gradient(circle at 36% 30%, #fbe0c2, var(--skin) 62%, #d9a377);
  box-shadow: inset -3px -3px 8px rgba(150, 90, 50, .28);
}

/* 发髻 / 冠 */
.idol-bun {
  position: absolute;
  left: 50%;
  top: 7.5%;
  width: 15%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #4a3a30, #211814);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, .75), 0 0 12px rgba(201, 162, 39, .5);
}

/* 五官 */
.idol-face {
  position: absolute;
  left: 50%;
  top: 12%;
  width: 25%;
  aspect-ratio: 1 / 1.12;
  transform: translateX(-50%);
}
.idol-face::before,
.idol-face::after {
  content: "";
  position: absolute;
  top: 45%;
  width: 21%;
  height: 7%;
  border-radius: 999px;
  background: #4a2c1c;
}
.idol-face::before { left: 15%; }
.idol-face::after  { right: 15%; }

.idol-mouth {
  position: absolute;
  left: 50%;
  top: 12%;
  width: 25%;
  aspect-ratio: 1 / 1.12;
  transform: translateX(-50%);
}
.idol-mouth::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 66%;
  width: 26%;
  height: 6%;
  transform: translateX(-50%);
  border-radius: 0 0 999px 999px;
  background: rgba(150, 70, 60, .7);
}

/* 肩部披风 */
.idol-robe {
  position: absolute;
  left: 50%;
  top: 27%;
  width: 96%;
  height: 50%;
  transform: translateX(-50%);
  border-radius: 46% 46% 14% 14% / 30% 30% 8% 8%;
  background:
    linear-gradient(180deg, var(--robe-accent) 0%, transparent 16%),
    linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .1) 50%, transparent 58%),
    linear-gradient(180deg, var(--robe-main), var(--robe-dark) 78%);
  box-shadow: inset 0 3px 10px rgba(255, 255, 255, .16), inset 0 -10px 22px rgba(0, 0, 0, .4);
}

/* 交领 */
.idol-collar {
  position: absolute;
  left: 50%;
  top: 30%;
  width: 40%;
  height: 26%;
  transform: translateX(-50%);
  background:
    linear-gradient(72deg,  transparent 46%, var(--robe-accent) 47%, var(--robe-accent) 53%, transparent 54%),
    linear-gradient(108deg, transparent 46%, var(--robe-accent) 47%, var(--robe-accent) 53%, transparent 54%);
  opacity: .9;
}

/* 袖 / 手 */
.idol-sleeve {
  position: absolute;
  top: 40%;
  width: 26%;
  height: 30%;
  border-radius: 50% 50% 42% 42%;
  background: linear-gradient(180deg, var(--robe-main), var(--robe-dark));
  box-shadow: inset 0 -6px 14px rgba(0, 0, 0, .35);
}
.idol-sleeve.l { left: -2%; }
.idol-sleeve.r { right: -2%; }

/* 神像显灵：金光扩散 + 上浮 */
.idol.revealing {
  animation: idolReveal 2.2s cubic-bezier(.25, .9, .3, 1);
}
@keyframes idolReveal {
  0%   { transform: translateY(0) scale(1); }
  30%  { transform: translateY(-14px) scale(1.045); filter: drop-shadow(0 0 34px rgba(255, 216, 115, .95)); }
  100% { transform: translateY(0) scale(1); }
}

.idol.revealing .idol-halo {
  animation: haloBurst 2.2s ease-out;
}
@keyframes haloBurst {
  0%   { box-shadow: 0 0 46px 14px rgba(255, 205, 110, .45); }
  35%  { box-shadow: 0 0 90px 40px rgba(255, 235, 160, .95); }
  100% { box-shadow: 0 0 46px 14px rgba(255, 205, 110, .45); }
}

/* 神光冲击波：以石像为中心往外扩 */
.divine-ring {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 34%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(.2);
  border-radius: 50%;
  border: 3px solid rgba(255, 235, 160, .9);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}
.divine-ring.burst {
  animation: ringBurst 1.5s ease-out;
}
@keyframes ringBurst {
  0%   { transform: translate(-50%, -50%) scale(.2); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(3.2); opacity: 0; }
}

/* ------------------- 神像手中的法器 ------------------- */

.idol-token {
  position: absolute;
  top: 33%;
  width: 13%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(13px, 3.4vw, 21px);
  line-height: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 216, 115, .34), transparent 70%);
  filter: drop-shadow(0 0 7px rgba(255, 216, 115, .8));
  z-index: 2;
}
.idol-token.l { left: -4%; }
.idol-token.r { right: -4%; }

/* ------------------- 每位神仙的专属服色 ------------------- */
/* 在容器上加 data-deity="<id>" 即可换装，避免为每个人都写一份结构 */

.shrine[data-deity="1"]  { --robe-main: #8c1c22; --robe-accent: #d4a72c; --halo: #ffd873; }
.shrine[data-deity="2"]  { --robe-main: #f3ece0; --robe-accent: #c9a227; --halo: #ffe9a8; }
.shrine[data-deity="3"]  { --robe-main: #1f5c3a; --robe-accent: #c9a227; --halo: #a8e6bd; }
.shrine[data-deity="4"]  { --robe-main: #c2455f; --robe-accent: #f0c4d0; --halo: #ffb6c8; }
.shrine[data-deity="5"]  { --robe-main: #3a4f8f; --robe-accent: #d4c47a; --halo: #b9c8ff; }
.shrine[data-deity="6"]  { --robe-main: #7a2f4a; --robe-accent: #e8c85a; --halo: #ffd0a8; }
.shrine[data-deity="7"]  { --robe-main: #6b4a2a; --robe-accent: #d4a72c; --halo: #ffcf8a; }
.shrine[data-deity="8"]  { --robe-main: #1d6b8a; --robe-accent: #cfe8f5; --halo: #9fe3ff; }
.shrine[data-deity="9"]  { --robe-main: #3b3f6b; --robe-accent: #b9c4d8; --halo: #c8d3ff; }
.shrine[data-deity="10"] { --robe-main: #7a7a3a; --robe-accent: #d4c47a; --halo: #e6e6a8; }
.shrine[data-deity="11"] { --robe-main: #d88fa8; --robe-accent: #f5e0b0; --halo: #ffc8dd; }
.shrine[data-deity="12"] { --robe-main: #8c7a2a; --robe-accent: #e0d090; --halo: #ffe9a8; }

/* 白衣观音：浅色法衣需要更深的描边，否则在暗景里糊成一片 */
.shrine[data-deity="2"] .idol-robe {
  box-shadow: inset 0 3px 10px rgba(255, 255, 255, .5), inset 0 -10px 22px rgba(120, 110, 90, .45);
}

/* 月老披红绸，光偏柔 */
.shrine[data-deity="4"] .hall-glow {
  background: radial-gradient(circle,
      rgba(255, 182, 200, .28) 0%,
      rgba(255, 150, 180, .14) 36%,
      transparent 70%);
}

/* 财神：金光更盛，突出「财源」 */
.shrine[data-deity="1"] .hall-glow {
  background: radial-gradient(circle,
      rgba(255, 216, 115, .36) 0%,
      rgba(255, 190, 90, .18) 34%,
      transparent 72%);
}

/* ------------------- 文昌帝君：儒冠长须 · 执笔持卷 -------------------
   通用神像是「一个发髻 + 两枚 emoji 法器」，套在文神身上太单薄。
   这里为它单独补一套儒士造型：乌纱儒巾、长髯、玉带、手卷与毛笔，
   并把 emoji 法器整个藏掉。所有部件只在 data-deity="5" 下显形，
   其余十一位神位仍用原来那套结构，样式不变。 */

.shrine[data-deity="5"] {
  --robe-dark: #1e2a52;
  --skin: #f3d3b0;
}

/* 背光换成清冷的文光，衬儒袍的靛蓝。石像本来就冷色，光要收着点，
   不然整尊像泡在一团紫雾里。 */
.shrine[data-deity="5"] .hall-glow {
  background: radial-gradient(circle,
      rgba(185, 200, 255, .16) 0%,
      rgba(130, 155, 235, .09) 34%,
      rgba(80, 100, 190, .03) 58%,
      transparent 72%);
}

.shrine[data-deity="5"] .idol-halo {
  background:
    radial-gradient(circle, rgba(236, 243, 255, .92) 0%, rgba(185, 200, 255, .58) 40%, rgba(140, 165, 235, .18) 64%, transparent 76%);
  box-shadow: 0 0 46px 14px rgba(185, 200, 255, .42);
}

/* 身后圆光：一圈放射状「文光」 */
.shrine[data-deity="5"] .idol-aura {
  background:
    repeating-conic-gradient(from 0deg,
      rgba(185, 200, 255, .13) 0deg 1.6deg, transparent 1.6deg 11deg),
    radial-gradient(circle, rgba(185, 200, 255, .24), transparent 68%);
  border-color: rgba(185, 200, 255, .34);
  animation: wenGlow 6s ease-in-out infinite;
}
@keyframes wenGlow {
  0%, 100% { opacity: .55; transform: translateX(-50%) scale(1); }
  50%      { opacity: .92; transform: translateX(-50%) scale(1.04); }
}

/* 乌纱儒巾：盖住通用发髻 */
.shrine[data-deity="5"] .idol-crown {
  position: absolute;
  left: 50%;
  top: 3.6%;
  width: 36%;
  height: 11.5%;
  transform: translateX(-50%);
  border-radius: 42% 42% 16% 16% / 48% 48% 20% 20%;
  background:
    radial-gradient(circle at 50% 56%, #ffd873 0 3.6%, transparent 4.4%),
    linear-gradient(180deg, #39456f 0%, #232c4c 52%, #141a2e 100%);
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, .22),
    inset 0 -3px 6px rgba(0, 0, 0, .5),
    0 0 0 1.5px rgba(212, 196, 122, .8),
    0 0 12px rgba(212, 196, 122, .35);
  z-index: 3;
}
/* 两侧帽翅 */
.shrine[data-deity="5"] .idol-crown::before,
.shrine[data-deity="5"] .idol-crown::after {
  content: "";
  position: absolute;
  top: 44%;
  width: 34%;
  height: 30%;
  border-radius: 3px 40% 40% 3px;
  background: linear-gradient(90deg, #232c4c, #39456f);
  box-shadow: 0 0 0 1px rgba(212, 196, 122, .45);
}
.shrine[data-deity="5"] .idol-crown::before { left: -30%; }
.shrine[data-deity="5"] .idol-crown::after  { right: -30%; transform: scaleX(-1); }

/* 剑眉：压住通用圆眼，添几分端正 */
.shrine[data-deity="5"] .idol-brows {
  position: absolute;
  left: 50%;
  top: 12%;
  width: 25%;
  aspect-ratio: 1 / 1.12;
  transform: translateX(-50%);
  z-index: 3;
}
.shrine[data-deity="5"] .idol-brows::before,
.shrine[data-deity="5"] .idol-brows::after {
  content: "";
  position: absolute;
  top: 34%;
  width: 24%;
  height: 2.4%;
  border-radius: 999px;
  background: linear-gradient(90deg, #2b2119, rgba(43, 33, 25, .35));
}
.shrine[data-deity="5"] .idol-brows::before { left: 13%; transform: rotate(-7deg); }
.shrine[data-deity="5"] .idol-brows::after  { right: 13%; transform: rotate(7deg) scaleX(-1); }

/* 长髯：八字胡 + 垂胸长须 */
.shrine[data-deity="5"] .idol-beard {
  position: absolute;
  left: 50%;
  top: 24%;
  width: 18%;
  height: 21%;
  transform: translateX(-50%);
  z-index: 4;
  pointer-events: none;
}
.shrine[data-deity="5"] .idol-beard::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: 0;
  height: 26%;
  background:
    linear-gradient(78deg, transparent 0 40%, #3b332c 41% 55%, transparent 56%),
    linear-gradient(102deg, transparent 44% 59%, #3b332c 60% 74%, transparent 75%);
  opacity: .9;
}
.shrine[data-deity="5"] .idol-beard::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 12%;
  width: 64%;
  height: 88%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #463d34 0%, #6d6459 48%, #aaa294 100%);
  clip-path: polygon(8% 0, 92% 0, 72% 58%, 50% 100%, 28% 58%);
  opacity: .92;
}

/* 玉带：拦腰一道，把上下袍身分开 */
.shrine[data-deity="5"] .idol-belt {
  position: absolute;
  left: 50%;
  top: 62%;
  width: 58%;
  height: 2.8%;
  transform: translateX(-50%);
  border-radius: 2px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .8) 0 26%, transparent 30%),
    linear-gradient(90deg, #8a7a3e, #d4c47a 26%, #f3e6b0 50%, #d4c47a 74%, #8a7a3e);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
  z-index: 3;
}

/* 袍身团花：靛蓝底上几点暗金纹样 */
.shrine[data-deity="5"] .idol-robe::after {
  content: "";
  position: absolute;
  inset: 8% 10% 12%;
  border-radius: inherit;
  background:
    radial-gradient(circle at 24% 24%, rgba(212, 196, 122, .30) 0 5%, transparent 6%),
    radial-gradient(circle at 66% 18%, rgba(212, 196, 122, .22) 0 4%, transparent 5%),
    radial-gradient(circle at 34% 62%, rgba(212, 196, 122, .24) 0 4.5%, transparent 5.5%),
    radial-gradient(circle at 74% 58%, rgba(212, 196, 122, .26) 0 5%, transparent 6%),
    radial-gradient(circle at 50% 88%, rgba(212, 196, 122, .18) 0 4%, transparent 5%);
  pointer-events: none;
}

/* 交领内衬：露出中衣的白边 */
.shrine[data-deity="5"] .idol-collar {
  background:
    linear-gradient(180deg, rgba(246, 243, 234, .92) 0 24%, transparent 25%),
    linear-gradient(72deg,  transparent 46%, #e8dfc4 47%, #e8dfc4 53%, transparent 54%),
    linear-gradient(108deg, transparent 46%, #e8dfc4 47%, #e8dfc4 53%, transparent 54%);
  opacity: .95;
}

/* 左手手卷：展开的简牍，两端辊轴 */
.shrine[data-deity="5"] .idol-scroll {
  position: absolute;
  left: -3%;
  top: 47%;
  width: 30%;
  height: 13%;
  transform: rotate(-7deg);
  border-radius: 2px;
  background:
    repeating-linear-gradient(90deg, rgba(122, 92, 40, .22) 0 1px, transparent 1px 7%),
    linear-gradient(180deg, #f6ecd4 0%, #e7d8b6 55%, #cdb98f 100%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(150, 120, 70, .45);
  z-index: 5;
}
.shrine[data-deity="5"] .idol-scroll::before,
.shrine[data-deity="5"] .idol-scroll::after {
  content: "";
  position: absolute;
  top: -10%;
  width: 9%;
  height: 120%;
  border-radius: 999px;
  background: linear-gradient(90deg, #6b4a2a, #c9a227 40%, #f0d894 55%, #8a6a34);
}
.shrine[data-deity="5"] .idol-scroll::before { left: -5%; }
.shrine[data-deity="5"] .idol-scroll::after  { right: -5%; }

/* 右手毛笔：竹管金箍，笔锋朝下 */
.shrine[data-deity="5"] .idol-brush {
  position: absolute;
  left: 79%;
  top: 34%;
  width: 2.4%;
  height: 27%;
  transform: rotate(7deg);
  border-radius: 999px;
  background: linear-gradient(90deg, #7a5a34, #c9a870 40%, #efd9a8 55%, #8a6a3c);
  box-shadow: 0 0 6px rgba(255, 216, 115, .35);
  z-index: 5;
}
.shrine[data-deity="5"] .idol-brush::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 96%;
  width: 190%;
  height: 16%;
  transform: translateX(-50%);
  border-radius: 1px;
  background: linear-gradient(90deg, #8a6a34, #f0d894, #8a6a34);
}
.shrine[data-deity="5"] .idol-brush::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 109%;
  width: 150%;
  height: 72%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #2b2b2b 0%, #4a4a4a 55%, #1a1a1a 100%);
  clip-path: polygon(50% 0, 100% 34%, 62% 100%, 38% 100%, 0 34%);
}

/* 藏掉通用 emoji 法器，改由手卷与毛笔出镜 */
.shrine[data-deity="5"] .idol-token {
  display: none;
}

/* 显灵时一并改成蓝白闪光，避免蓝袍上炸出一圈金光 */
.shrine[data-deity="5"] .idol.revealing {
  animation-name: idolRevealBlue;
}
@keyframes idolRevealBlue {
  0%   { transform: translateY(0) scale(1); }
  30%  { transform: translateY(-14px) scale(1.045); filter: drop-shadow(0 0 34px rgba(210, 226, 255, .95)); }
  100% { transform: translateY(0) scale(1); }
}
.shrine[data-deity="5"] .idol.revealing .idol-halo {
  animation: haloBurstBlue 2.2s ease-out;
}
@keyframes haloBurstBlue {
  0%   { box-shadow: 0 0 46px 14px rgba(185, 200, 255, .42); }
  35%  { box-shadow: 0 0 90px 40px rgba(224, 236, 255, .95); }
  100% { box-shadow: 0 0 46px 14px rgba(185, 200, 255, .42); }
}

/* ------------------- 香炉与香 -------------------
   三件陈设并排：香炉在左、供品居中、火盆在右，可以同时出现而不互相遮挡。
   香不再写死三炷，由 app.js 按用户所选香火注入 #incenseSlot。 */

.censer {
  position: absolute;
  bottom: 11%;
  left: 16%;
  transform: translateX(-50%);
  width: 24%;
  max-width: 108px;
  aspect-ratio: 2 / 1;
  z-index: 5;
}

.censer-body {
  position: absolute;
  inset: 0;
  border-radius: 12% 12% 46% 46% / 30% 30% 90% 90%;
  background: linear-gradient(180deg, #7a4a2a, #4a2412 55%, #2c1508);
  box-shadow:
    inset 0 4px 0 rgba(201, 162, 39, .6),
    inset 0 -8px 18px rgba(0, 0, 0, .5),
    0 6px 16px rgba(0, 0, 0, .5);
}
/* 炉身双耳 */
.censer-body::before,
.censer-body::after {
  content: "";
  position: absolute;
  top: 12%;
  width: 14%;
  aspect-ratio: 1;
  border: 3px solid #6b3a22;
  border-radius: 50%;
  background: transparent;
}
.censer-body::before { left: -10%; }
.censer-body::after  { right: -10%; }

/* 炉口 */
.censer-rim {
  position: absolute;
  top: -10%;
  left: -6%;
  width: 112%;
  height: 22%;
  border-radius: 999px;
  background: linear-gradient(180deg, #8f5a33, #3c1d0e);
  box-shadow: inset 0 2px 0 rgba(201, 162, 39, .7);
}

/* 场景里的三个「祭品槽」：香炉、供品台、火盆各一个，
   选中什么就往里放什么，多个商品并排占位互不遮挡 */
.ritual-slot {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  pointer-events: none;
}

/* 每个被选中的商品在槽里占一格 */
.ritual-item {
  position: relative;
  flex: 0 1 auto;
  height: 100%;
}

/* 件数角标：数量只体现为「×N」，不复制 N 个物体。
   绝对定位挂在摆件上方，不参与槽内的横向排布，也就不会把相邻摆件挤开。 */
.ritual-item .qty-badge {
  position: absolute;
  top: -14px;
  right: -6px;
  z-index: 3;
  padding: 1px 5px;
  border-radius: 9px;
  background: rgba(0, 0, 0, .55);
  border: 1px solid rgba(232, 200, 90, .5);
  color: var(--gold-light);
  font-size: 10px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
}

/* 香炉与火盆本身很窄，而同类多件商品要同时摆进去。
   让槽向器皿外扩出去：器物仍在原位，香/纸可以越过炉口两侧，
   否则三件并排时会被压进同一个宽度里互相叠住。 */
.censer .ritual-slot {
  left: -40%;
  right: -40%;
  gap: 2px;
}
.brazier .ritual-slot {
  left: -30%;
  right: -30%;
  gap: 2px;
}

/* =================== 香火：三种完全不同的形态 =================== */

/* --- 清香一炷：三根细香，青烟稀疏、飘得高 --- */
.incense-clear { width: 46px; }
.incense-clear .incense-stick {
  position: absolute;
  bottom: 78%;
  width: 2px;
  height: 150%;
  border-radius: 2px;
  background: linear-gradient(180deg, #b5533a, #7d3a26);
  transform-origin: bottom center;
  opacity: 0;
  transition: opacity .3s;
}
/* --tilt 与 transform 里的角度必须一致：stickIn 的 0% 帧用 var(--tilt) 当起点，
   没写这个变量的话动画会从竖直弹到倾斜，入炉瞬间明显一跳。 */
.incense-clear .incense-stick.s1 { left: 32%; --tilt: -9deg; transform: rotate(-9deg); }
.incense-clear .incense-stick.s2 { left: 48%; height: 165%; }
.incense-clear .incense-stick.s3 { left: 64%; --tilt: 9deg; transform: rotate(9deg); }

.incense-clear.placed .incense-stick { opacity: 1; animation: stickIn .55s cubic-bezier(.2, 1.4, .4, 1); }
.incense-clear .incense-stick.lit .incense-tip {
  opacity: 1;
  animation: emberPulse 1.6s ease-in-out infinite;
}

/* --- 三牲大香：三根粗香带金箍，烟柱又浓又直 --- */
.incense-thick { width: 54px; }
.incense-thick .incense-stick {
  position: absolute;
  bottom: 78%;
  width: 5px;
  height: 172%;
  border-radius: 3px;
  background: linear-gradient(90deg, #8a3520, #c96a45 40%, #7d3a26);
  transform-origin: bottom center;
  opacity: 0;
  transition: opacity .3s;
}
.incense-thick .incense-stick.s1 { left: 26%; transform: rotate(-7deg); }
.incense-thick .incense-stick.s2 { left: 45%; height: 186%; }
.incense-thick .incense-stick.s3 { left: 64%; transform: rotate(7deg); }
/* 金箍：粗香上的束带，与细香一眼区分 */
.incense-thick .stick-ring {
  position: absolute;
  left: 50%;
  bottom: 46%;
  width: 190%;
  height: 3px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: linear-gradient(90deg, #8a6a1a, #ffdc7a, #8a6a1a);
  box-shadow: 0 0 6px rgba(255, 216, 115, .7);
}
.incense-thick.placed .incense-stick { opacity: 1; animation: thickIn .6s cubic-bezier(.2, 1.3, .4, 1); }
.incense-thick .incense-stick.lit .incense-tip {
  opacity: 1;
  animation: emberBloom 1.2s ease-in-out infinite;
}
/* 大香点着时爆一圈火星 */
.incense-thick .spark {
  position: absolute;
  bottom: 232%;
  left: 48%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ffe9a8;
  box-shadow: 0 0 6px 2px rgba(255, 190, 80, .9);
  opacity: 0;
}
.incense-thick.lit-all .spark { animation: sparkBurst 1.4s ease-out infinite; }
.incense-thick.lit-all .spark:nth-child(2) { animation-delay: .18s; }
.incense-thick.lit-all .spark:nth-child(3) { animation-delay: .36s; }
.incense-thick.lit-all .spark:nth-child(4) { animation-delay: .54s; }
.incense-thick.lit-all .spark:nth-child(5) { animation-delay: .72s; }

/* --- 檀香一盘：平放的螺旋盘香，火点沿盘缘游走 --- */
.incense-coil { width: 52px; }
.incense-coil .coil-disc {
  position: absolute;
  left: 50%;
  bottom: 88%;
  width: 76%;
  aspect-ratio: 1;
  transform: translateX(-50%) scale(.4);
  border-radius: 50%;
  background:
    radial-gradient(circle,
      transparent 0 18%, #8a5432 18% 26%,
      transparent 26% 36%, #9a6040 36% 44%,
      transparent 44% 54%, #8a5432 54% 62%,
      transparent 62% 72%, #7a4a2c 72% 80%,
      transparent 80%);
  opacity: 0;
  transition: opacity .4s;
}
.incense-coil.placed .coil-disc {
  opacity: 1;
  animation: coilDrop .6s cubic-bezier(.2, 1.4, .4, 1) forwards;
}
/* 盘香上的火点 */
.incense-coil .coil-ember {
  position: absolute;
  left: 50%;
  bottom: 88%;
  width: 76%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  opacity: 0;
  animation: coilSpin 9s linear infinite;
}
.incense-coil .coil-ember::after {
  content: "";
  position: absolute;
  top: 6%;
  left: 50%;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff2c0, #ff9a2a 55%, transparent 75%);
  box-shadow: 0 0 7px 2px rgba(255, 150, 40, .8);
}
.incense-coil.lit .coil-ember { opacity: 1; }

/* 香头火星（细香 / 大香共用底子） */
.incense-tip {
  position: absolute;
  bottom: 130%;
  left: 50%;
  width: 300%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, #fff2c0 0%, #ffb03a 40%, rgba(255, 90, 20, .5) 65%, transparent 75%);
  opacity: 0;
  transition: opacity .4s;
}

@keyframes stickIn {
  0%   { transform: translateY(-46%) rotate(var(--tilt, 0deg)) scaleY(.4); opacity: 0; }
  100% { opacity: 1; }
}
@keyframes thickIn {
  0%   { transform: translateY(-60%) scaleY(.3); opacity: 0; }
  60%  { transform: translateY(4%) scaleY(1.06); opacity: 1; }
  100% { opacity: 1; }
}
@keyframes coilDrop {
  0%   { transform: translateX(-50%) scale(.4) rotate(-25deg); opacity: 0; }
  70%  { transform: translateX(-50%) scale(1.08) rotate(3deg); opacity: 1; }
  100% { transform: translateX(-50%) scale(1) rotate(0); opacity: 1; }
}
@keyframes coilSpin {
  from { transform: translateX(-50%) rotate(0); }
  to   { transform: translateX(-50%) rotate(360deg); }
}
@keyframes emberPulse {
  0%, 100% { transform: translateX(-50%) scale(1);    opacity: .86; }
  50%      { transform: translateX(-50%) scale(1.22); opacity: 1; }
}
/* 大香的火头更大、更亮，还带一点呼吸式膨胀 */
@keyframes emberBloom {
  0%, 100% { transform: translateX(-50%) scale(1.15); opacity: .9; }
  50%      { transform: translateX(-50%) scale(1.6);  opacity: 1; }
}
@keyframes sparkBurst {
  0%   { transform: translate(0, 0) scale(1);           opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translate(var(--sx, 10px), -34px) scale(.2); opacity: 0; }
}

/* 青烟：细香稀疏、大香浓密、盘香螺旋 */
.smoke {
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 10px;
  height: 90px;
  pointer-events: none;
  opacity: 0;
}
.incense-stick.lit .smoke { opacity: 1; }

.smoke i {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .5), rgba(220, 225, 235, .12) 60%, transparent 72%);
  filter: blur(2.5px);
  animation: smokeRise 3.4s linear infinite;
}
.smoke i:nth-child(2) { animation-delay: .65s; }
.smoke i:nth-child(3) { animation-delay: 1.3s; }
.smoke i:nth-child(4) { animation-delay: 1.95s; }
.smoke i:nth-child(5) { animation-delay: 2.6s; }

@keyframes smokeRise {
  0%   { transform: translate(0, 0) scale(.5);          opacity: 0; }
  12%  { opacity: .8; }
  45%  { transform: translate(-9px, -46px) scale(1.5);  opacity: .5; }
  75%  { transform: translate(8px, -84px) scale(2.2);   opacity: .26; }
  100% { transform: translate(-4px, -124px) scale(3);   opacity: 0; }
}

/* 大香的烟：更粗、更直、几乎不散 */
.incense-thick .smoke { width: 16px; }
.incense-thick .smoke i {
  width: 14px;
  height: 14px;
  margin-left: -7px;
  filter: blur(3.5px);
  animation: smokeThick 4.2s linear infinite;
}
.incense-thick .smoke i:nth-child(2) { animation-delay: .8s; }
.incense-thick .smoke i:nth-child(3) { animation-delay: 1.6s; }
.incense-thick .smoke i:nth-child(4) { animation-delay: 2.4s; }
.incense-thick .smoke i:nth-child(5) { animation-delay: 3.2s; }

@keyframes smokeThick {
  0%   { transform: translate(0, 0) scale(.7);             opacity: 0; }
  14%  { opacity: .95; }
  50%  { transform: translate(-3px, -52px) scale(1.7);     opacity: .7; }
  80%  { transform: translate(4px, -96px) scale(2.1);      opacity: .35; }
  100% { transform: translate(-2px, -140px) scale(2.6);    opacity: 0; }
}

/* 盘香的烟：沿螺旋往上卷 */
.incense-coil .coil-smoke {
  position: absolute;
  left: 50%;
  bottom: 150%;
  width: 60px;
  height: 60px;
  transform: translateX(-50%);
  opacity: 0;
}
.incense-coil.lit .coil-smoke { opacity: 1; }
.incense-coil .coil-smoke i {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .45), rgba(220, 225, 235, .1) 60%, transparent 72%);
  filter: blur(2.5px);
  animation: smokeSpiral 5s linear infinite;
}
.incense-coil .coil-smoke i:nth-child(2) { animation-delay: 1s; }
.incense-coil .coil-smoke i:nth-child(3) { animation-delay: 2s; }
.incense-coil .coil-smoke i:nth-child(4) { animation-delay: 3s; }
.incense-coil .coil-smoke i:nth-child(5) { animation-delay: 4s; }

@keyframes smokeSpiral {
  0%   { transform: translate(0, 0) scale(.5);                        opacity: 0; }
  15%  { opacity: .75; }
  30%  { transform: translate(16px, -30px) scale(1.2);                opacity: .55; }
  55%  { transform: translate(-14px, -66px) scale(1.6);               opacity: .4; }
  80%  { transform: translate(10px, -104px) scale(1.9);               opacity: .2; }
  100% { transform: translate(-6px, -140px) scale(2.2);               opacity: 0; }
}

/* ------------------- 烛台 ------------------- */

.candles {
  position: absolute;
  bottom: 12.5%;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  max-width: 260px;
  display: flex;
  justify-content: space-between;
  z-index: 4;
  pointer-events: none;
}

.candle {
  position: relative;
  width: 9px;
  height: 60px;
  border-radius: 3px;
  background: linear-gradient(90deg, #b8231f, #f0554a 40%, #a01a17);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .5);
}
/* 烛盘 */
.candle::after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: 50%;
  width: 30px;
  height: 9px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: linear-gradient(180deg, #8a5a2a, #3a1c0c);
}

/* 火苗 */
.candle-flame {
  position: absolute;
  top: -20px;
  left: 50%;
  width: 13px;
  height: 24px;
  transform: translateX(-50%) rotate(-2deg);
  border-radius: 50% 50% 44% 44% / 68% 68% 32% 32%;
  background: radial-gradient(ellipse at 50% 78%, #fffbe6 0%, #ffd85e 34%, #ff8c1a 68%, rgba(255, 90, 0, .35) 100%);
  box-shadow: 0 0 16px 6px rgba(255, 170, 60, .55);
  animation: flicker 1.1s ease-in-out infinite;
  transform-origin: 50% 100%;
}
.candle:nth-child(2) .candle-flame { animation-duration: 1.45s; animation-delay: .3s; }

@keyframes flicker {
  0%   { transform: translateX(-50%) rotate(-3deg) scaleY(1); }
  25%  { transform: translateX(-50%) rotate(2deg)  scaleY(1.09); }
  50%  { transform: translateX(-50%) rotate(-1deg) scaleY(.95); }
  75%  { transform: translateX(-50%) rotate(3deg)  scaleY(1.06); }
  100% { transform: translateX(-50%) rotate(-3deg) scaleY(1); }
}

/* ------------------- 供品（鲜果 + 寿桃 + 茶） -------------------
   供品台居中，选中的每件供品由 #offeringSlot 里的 .ritual-item 承载 */

.offerings {
  position: absolute;
  bottom: 12.2%;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  max-width: 220px;
  height: 92px;
  z-index: 6;
  pointer-events: none;
}

.offerings .ritual-slot {
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
}

.ritual-item.offer-variant {
  display: flex;
  align-items: flex-end;
  height: auto;
  opacity: 0;
  transform: translateY(16px) scale(.7);
  transition: opacity .5s, transform .55s cubic-bezier(.2, 1.3, .4, 1);
}
.ritual-item.offer-variant.shown { opacity: 1; transform: translateY(0) scale(1); }

/* --- 时令鲜果：果盘 + 三色果 --- */
.fruit-plate {
  position: relative;
  width: 76px;
  height: 32px;
}
.fruit-plate .plate {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 11px;
  border-radius: 50%;
  background: linear-gradient(180deg, #d8d2c4, #8a8072);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .45);
}
.fruit {
  position: absolute;
  bottom: 8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: inset -3px -3px 6px rgba(0, 0, 0, .28), 0 2px 5px rgba(0, 0, 0, .3);
}
.fruit.f1 { left: 5px;  background: radial-gradient(circle at 34% 30%, #ff9a8a, #d4342a); }
.fruit.f2 { left: 28px; background: radial-gradient(circle at 34% 30%, #ffe08a, #e0a11b); bottom: 12px; }
.fruit.f3 { left: 51px; background: radial-gradient(circle at 34% 30%, #b6e89a, #4e9b32); }
/* 果皮高光扫过：一条斜向亮带周期性掠过 */
.fruit-plate.shown-glow::after {
  content: "";
  position: absolute;
  inset: 0 0 6px 0;
  border-radius: 50%;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .55) 50%, transparent 60%);
  background-size: 240% 100%;
  animation: fruitSheen 3.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes fruitSheen {
  0%   { background-position: 160% 0; opacity: 0; }
  20%  { opacity: .8; }
  60%  { background-position: -40% 0; opacity: 0; }
  100% { background-position: -40% 0; opacity: 0; }
}
/* 果盘落桌后轻轻一颠 */
.ritual-item.offer-fruit.shown .fruit-plate { animation: fruitBounce .6s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes fruitBounce {
  0%   { transform: translateY(0); }
  45%  { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}

/* --- 寿桃面点：寿桃 + 两只小面点 + 「寿」字光环脉冲 --- */
.peach-set {
  position: relative;
  width: 62px;
  height: 50px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
}
.peach {
  position: relative;
  width: 42px;
  height: 37px;
  border-radius: 50% 50% 46% 46% / 58% 58% 42% 42%;
  background: radial-gradient(circle at 34% 28%, #ffd9d0, #f08a7c 45%, #d8524a);
  box-shadow: inset -4px -5px 10px rgba(0, 0, 0, .22), 0 3px 8px rgba(0, 0, 0, .3);
}
.peach::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 11px;
  height: 11px;
  transform: translateX(-50%) rotate(-18deg);
  border-radius: 50% 0;
  background: linear-gradient(135deg, #6cbf4a, #2f7a26);
}
.peach-set .bun {
  width: 17px;
  height: 14px;
  border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 36% 30%, #fff4e2, #e8cba4 60%, #c9a878);
  box-shadow: inset -2px -2px 4px rgba(120, 90, 50, .25);
}
/* 桃身粉色柔光呼吸 */
.ritual-item.offer-peach.shown .peach {
  animation: peachGlow 2.6s ease-in-out infinite;
}
@keyframes peachGlow {
  0%, 100% { box-shadow: inset -4px -5px 10px rgba(0, 0, 0, .22), 0 3px 8px rgba(0, 0, 0, .3); filter: brightness(1); }
  50%      { box-shadow: inset -4px -5px 10px rgba(0, 0, 0, .22), 0 0 18px 5px rgba(255, 160, 170, .55); filter: brightness(1.1); }
}
/* 「寿」字光环：一圈金环向外脉冲 */
.peach-halo {
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 46px;
  height: 16px;
  transform: translateX(-50%) scale(.7);
  border-radius: 50%;
  border: 1.5px solid rgba(255, 216, 115, .75);
  opacity: 0;
}
.ritual-item.offer-peach.shown .peach-halo { animation: peachHalo 2.8s ease-out infinite; }
@keyframes peachHalo {
  0%   { transform: translateX(-50%) scale(.7);  opacity: 0; }
  25%  { opacity: .85; }
  100% { transform: translateX(-50%) scale(1.9); opacity: 0; }
}

/* --- 清茶一盏：茶盏 + 螺旋热气 + 茶面涟漪 --- */
.tea-cup {
  position: relative;
  width: 40px;
  height: 44px;
}
.tea-cup .cup {
  position: absolute;
  bottom: 6px;
  left: 0;
  width: 100%;
  height: 24px;
  border-radius: 4px 4px 46% 46% / 4px 4px 78% 78%;
  background: linear-gradient(180deg, #f2ead8, #b9ad95);
  box-shadow: inset 0 -4px 8px rgba(0, 0, 0, .25);
}
/* 茶面 */
.tea-cup .tea-surface {
  position: absolute;
  bottom: 24px;
  left: 50%;
  width: 84%;
  height: 7px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, #c9a24a, #8a6a24 70%);
}
/* 涟漪 */
.tea-cup .ripple {
  position: absolute;
  bottom: 24px;
  left: 50%;
  width: 30%;
  height: 5px;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 1px solid rgba(230, 200, 130, .8);
  opacity: 0;
}
.ritual-item.offer-tea.shown .ripple { animation: teaRipple 3s ease-out infinite; }
.ritual-item.offer-tea.shown .ripple:nth-of-type(2) { animation-delay: 1.5s; }
@keyframes teaRipple {
  0%   { transform: translateX(-50%) scale(.5); opacity: 0; }
  25%  { opacity: .9; }
  100% { transform: translateX(-50%) scale(2.3); opacity: 0; }
}
.tea-cup .saucer {
  position: absolute;
  bottom: 0;
  left: -3px;
  width: 46px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(180deg, #d8cfba, #8a8072);
}
/* 热气：三缕，各自沿弧线上升 */
.tea-steam {
  position: absolute;
  bottom: 28px;
  left: 50%;
  width: 5px;
  height: 22px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: linear-gradient(0deg, rgba(255, 255, 255, .45), transparent);
  filter: blur(2px);
  opacity: 0;
}
.ritual-item.offer-tea.shown .tea-steam { animation: teaSteamArc 3.2s ease-in-out infinite; }
.ritual-item.offer-tea.shown .tea-steam:nth-of-type(2) { animation-delay: 1.05s; margin-left: -6px; }
.ritual-item.offer-tea.shown .tea-steam:nth-of-type(3) { animation-delay: 2.1s; margin-left: 6px; }
@keyframes teaSteamArc {
  0%   { opacity: 0; transform: translate(-50%, 8px) scaleY(.5); }
  30%  { opacity: .7; }
  70%  { opacity: .3; transform: translate(-50%, -22px) scaleY(1.2) translateX(4px); }
  100% { opacity: 0; transform: translate(-50%, -40px) scaleY(1.5) translateX(-4px); }
}

/* ------------------- 火盆（烧纸钱） -------------------
   移到右侧，与左侧香炉、中央供品同时出现 */

.brazier {
  position: absolute;
  bottom: 10.5%;
  left: 84%;
  transform: translateX(-50%);
  width: 96px;
  height: 52px;
  z-index: 7;
  pointer-events: none;
  opacity: 0;
  transition: opacity .42s;
}
.brazier.shown { opacity: 1; }

/* 盆内纸钱由 #paperSlot 注入，每件商品一个 .ritual-item */
.brazier .ritual-slot {
  bottom: 30px;
  top: auto;
  height: 60px;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
}

.brazier-body {
  position: absolute;
  bottom: 14px;
  left: 0;
  width: 100%;
  height: 36px;
  border-radius: 12% 12% 44% 44% / 26% 26% 88% 88%;
  background: linear-gradient(180deg, #55483f, #2a221c 60%, #17110d);
  box-shadow: inset 0 3px 0 rgba(140, 120, 100, .5), inset 0 -6px 14px rgba(0, 0, 0, .6);
}
/* 盆脚 */
.brazier-body::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  width: 46px;
  height: 12px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #1e1712;
}

.brazier-rim {
  position: absolute;
  top: 10px;
  left: -4%;
  width: 108%;
  height: 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, #6b5c50, #322820);
}

/* 盆中火焰 */
.brazier-flame {
  position: absolute;
  bottom: 30px;
  left: 50%;
  width: 46px;
  height: 54px;
  transform: translateX(-50%) scale(.3);
  transform-origin: 50% 100%;
  border-radius: 50% 50% 42% 42% / 66% 66% 34% 34%;
  background: radial-gradient(ellipse at 50% 76%, #fffceb 0%, #ffd85e 30%, #ff8c1a 60%, rgba(255, 70, 0, .3) 100%);
  filter: blur(.4px) drop-shadow(0 0 22px rgba(255, 150, 40, .85));
  opacity: 0;
  transition: opacity .3s;
}
.brazier.burning .brazier-flame {
  opacity: 1;
  animation: blaze 0.55s ease-in-out infinite, flameGrow .5s forwards;
}
@keyframes flameGrow { from { transform: translateX(-50%) scale(.3); } to { transform: translateX(-50%) scale(1); } }
@keyframes blaze {
  0%, 100% { transform: translateX(-50%) scale(1)    rotate(-3deg); }
  33%      { transform: translateX(-50%) scale(1.14) rotate(3deg); }
  66%      { transform: translateX(-50%) scale(.94)  rotate(-1deg); }
}

/* 灰烬 / 火星 */
.ash {
  position: absolute;
  bottom: 46px;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff1c4, #ff9a2e 55%, rgba(180, 70, 10, .2) 100%);
  filter: blur(.5px);
  opacity: 0;
  pointer-events: none;
}
.brazier.burning .ash { animation: ashFly 2.1s ease-out infinite; }
.brazier.burning .ash:nth-child(3) { animation-delay: .35s; }
.brazier.burning .ash:nth-child(4) { animation-delay: .72s; }
.brazier.burning .ash:nth-child(5) { animation-delay: 1.08s; }
.brazier.burning .ash:nth-child(6) { animation-delay: 1.45s; }
.brazier.burning .ash:nth-child(7) { animation-delay: 1.78s; }

@keyframes ashFly {
  0%   { transform: translate(0, 0) scale(1);              opacity: 0; }
  10%  { opacity: 1; }
  55%  { transform: translate(-16px, -54px) scale(.75);    opacity: .75; }
  100% { transform: translate(14px, -108px) scale(.3);     opacity: 0; }
}

/* =================== 纸钱：三种材质与燃法 =================== */

/* --- 黄纸钱一叠：黄纸叠起、边缘焦卷、金色灰烬 --- */
.paper-stack {
  position: relative;
  width: 36px;
  height: 46px;
  opacity: 0;
  transform: translateY(10px);
}
.paper-yellow.tossing .paper-stack { animation: paperToss 1.9s ease-in forwards; }
/* 一叠：三层错位的纸，厚度一眼可见 */
.paper-stack .sheet {
  position: absolute;
  left: 0;
  width: 100%;
  height: 38px;
  border-radius: 2px;
  background: linear-gradient(160deg, #e8d79a, #c9b06a 60%, #a88f4e);
  border: 1px solid rgba(120, 100, 50, .5);
  box-shadow: inset 0 0 8px rgba(120, 90, 30, .35);
}
.paper-stack .sheet:nth-child(1) { bottom: 0;  transform: rotate(-5deg); }
.paper-stack .sheet:nth-child(2) { bottom: 4px; transform: rotate(3deg); }
.paper-stack .sheet:nth-child(3) { bottom: 8px; transform: rotate(-1deg); }
/* 纸钱中央的方孔 */
.paper-stack .sheet:nth-child(3)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 11px;
  transform: translate(-50%, -50%);
  background: #3a2a10;
  box-shadow: 0 0 0 3px rgba(200, 170, 90, .55);
}
/* 燃烧：边缘先焦，整叠卷曲收缩 */
.paper-yellow.tossing .paper-stack {
  animation: paperToss 2s ease-in forwards;
}
@keyframes paperToss {
  0%   { transform: translateY(0) rotate(0) scale(1);                 opacity: 0; }
  16%  { transform: translateY(-26px) rotate(9deg) scale(1);          opacity: 1; filter: none; }
  55%  { transform: translateY(-46px) rotate(-7deg) scale(.88);       opacity: .94;
         filter: brightness(.7) sepia(.45) drop-shadow(0 0 6px rgba(255, 140, 40, .6)); }
  100% { transform: translateY(-68px) rotate(15deg) scale(.58);       opacity: 0;
         filter: brightness(.28) blur(2px); }
}
/* 金色灰烬 */
.paper-yellow .ash-grain {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe9a8, #d4a72c 60%, transparent 80%);
  opacity: 0;
}
.paper-yellow.burning .ash-grain { animation: ashUp 2.4s ease-out infinite; }
.paper-yellow.burning .ash-grain:nth-child(2) { animation-delay: .5s; }
.paper-yellow.burning .ash-grain:nth-child(3) { animation-delay: 1s; }
.paper-yellow.burning .ash-grain:nth-child(4) { animation-delay: 1.5s; }

/* --- 金元宝：金属光泽、融化塌缩成金液 --- */
.ingot-set {
  position: relative;
  width: 40px;
  height: 34px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  opacity: 0;
}
.ingot {
  position: relative;
  width: 15px;
  height: 11px;
  border-radius: 50% 50% 30% 30% / 70% 70% 30% 30%;
  background: linear-gradient(160deg, #ffeaa0, #d4a72c 45%, #8a6a1a);
  box-shadow: inset 0 -2px 4px rgba(90, 60, 0, .45), 0 0 8px rgba(255, 216, 115, .55);
}
.ingot::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 50%;
  width: 40%;
  height: 40%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(255, 255, 255, .6);
  filter: blur(1px);
}
.ingot-set .ingot:nth-child(2) { width: 18px; height: 13px; }
/* 三只元宝依次落入盆中，由金转白热，体积收缩融化 */
.paper-ingot.tossing .ingot-set { animation: ingotDrop 2.3s ease-in forwards; }
.paper-ingot.tossing .ingot:nth-child(1) { animation: ingotMelt 2.1s ease-in .1s forwards; }
.paper-ingot.tossing .ingot:nth-child(2) { animation: ingotMelt 2.1s ease-in .45s forwards; }
.paper-ingot.tossing .ingot:nth-child(3) { animation: ingotMelt 2.1s ease-in .8s forwards; }
@keyframes ingotDrop {
  0%   { transform: translateY(-6px) scale(1);   opacity: 0; }
  18%  { transform: translateY(-30px) scale(1);  opacity: 1; }
  60%  { transform: translateY(-40px) scale(.95); opacity: 1; }
  100% { transform: translateY(-50px) scale(.7); opacity: 0; }
}
@keyframes ingotMelt {
  0%   { filter: brightness(1);                       transform: scale(1); }
  45%  { filter: brightness(2.1) drop-shadow(0 0 10px rgba(255, 220, 120, 1)); transform: scale(1.1); }
  100% { filter: brightness(3) blur(1.5px);           transform: scale(.35) translateY(8px); opacity: 0; }
}
/* 金色火星颗粒 */
.paper-ingot .spark-gold {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ffe9a8;
  box-shadow: 0 0 6px 2px rgba(255, 200, 80, .85);
  opacity: 0;
}
.paper-ingot.burning .spark-gold { animation: sparkGoldUp 2.6s ease-out infinite; }
.paper-ingot.burning .spark-gold:nth-child(2) { animation-delay: .6s; }
.paper-ingot.burning .spark-gold:nth-child(3) { animation-delay: 1.2s; }
.paper-ingot.burning .spark-gold:nth-child(4) { animation-delay: 1.8s; }
@keyframes sparkGoldUp {
  0%   { transform: translate(0, 0) scale(1);                    opacity: 0; }
  12%  { opacity: 1; }
  60%  { transform: translate(-12px, -40px) scale(.8);           opacity: .8; }
  100% { transform: translate(10px, -84px) scale(.2);            opacity: 0; }
}

/* --- 往生金：银白纸幡飘落、冷白火焰、光点慢升 --- */
.spirit-banner {
  position: relative;
  width: 20px;
  height: 54px;
  opacity: 0;
}
.spirit-banner .banner {
  position: absolute;
  inset: 0;
  border-radius: 2px 2px 40% 40% / 2px 2px 18% 18%;
  background: linear-gradient(180deg, #f4f7fb, #d5dde8 55%, #a8b4c4);
  border: 1px solid rgba(150, 165, 185, .75);
  box-shadow: inset 0 0 10px rgba(160, 180, 210, .45);
}
/* 幡上的竖向纹路 */
.spirit-banner .banner::after {
  content: "";
  position: absolute;
  inset: 8% 30%;
  border-left: 1px solid rgba(120, 140, 170, .5);
  border-right: 1px solid rgba(120, 140, 170, .5);
}
.paper-spirit.tossing .spirit-banner { animation: bannerFlutter 2.6s ease-in forwards; }
@keyframes bannerFlutter {
  0%   { transform: translate(0, 0) rotate(0) skewX(0);                  opacity: 0; }
  15%  { transform: translate(4px, -22px) rotate(8deg) skewX(-6deg);     opacity: 1; }
  45%  { transform: translate(-5px, -38px) rotate(-6deg) skewX(7deg);    opacity: .95; }
  75%  { transform: translate(3px, -56px) rotate(10deg) skewX(-4deg);    opacity: .6;
         filter: brightness(1.6) drop-shadow(0 0 8px rgba(210, 230, 255, .9)); }
  100% { transform: translate(-2px, -74px) rotate(-8deg) skewX(0);       opacity: 0;
         filter: brightness(.7) blur(2px); }
}
/* 冷白火焰：与黄纸的暖橙形成明确对比 */
.paper-spirit .spirit-flame {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 26px;
  height: 32px;
  transform: translateX(-50%) scale(.4);
  transform-origin: 50% 100%;
  border-radius: 50% 50% 44% 44% / 66% 66% 34% 34%;
  background: radial-gradient(ellipse at 50% 76%, #ffffff 0%, #d8ecff 35%, #8ab8e8 68%, rgba(120, 170, 240, .25) 100%);
  filter: blur(.5px) drop-shadow(0 0 16px rgba(170, 210, 255, .9));
  opacity: 0;
}
.paper-spirit.burning .spirit-flame { animation: spiritBlaze .9s ease-in-out infinite; opacity: 1; }
@keyframes spiritBlaze {
  0%, 100% { transform: translateX(-50%) scale(.9)  rotate(-2deg); opacity: .85; }
  50%      { transform: translateX(-50%) scale(1.12) rotate(2deg);  opacity: 1; }
}
/* 上升光点：更亮、更慢，像引路的灯 */
.paper-spirit .spirit-mote {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff, #cfe6ff 50%, transparent 80%);
  box-shadow: 0 0 8px 3px rgba(200, 230, 255, .8);
  opacity: 0;
}
.paper-spirit.burning .spirit-mote { animation: moteDrift 3.6s ease-out infinite; }
.paper-spirit.burning .spirit-mote:nth-child(2) { animation-delay: .9s; }
.paper-spirit.burning .spirit-mote:nth-child(3) { animation-delay: 1.8s; }
.paper-spirit.burning .spirit-mote:nth-child(4) { animation-delay: 2.7s; }
@keyframes moteDrift {
  0%   { transform: translate(0, 0) scale(1);                    opacity: 0; }
  14%  { opacity: 1; }
  55%  { transform: translate(8px, -46px) scale(.9);             opacity: .85; }
  100% { transform: translate(-6px, -100px) scale(.5);           opacity: 0; }
}

/* 通用灰烬（黄纸以外的纸钱也复用一点） */
@keyframes ashUp {
  0%   { transform: translate(0, 0) scale(1);              opacity: 0; }
  12%  { opacity: 1; }
  55%  { transform: translate(-14px, -50px) scale(.8);     opacity: .8; }
  100% { transform: translate(12px, -98px) scale(.25);     opacity: 0; }
}

/* ------------------- 左内左内面板：选香火 ------------------- */

.shrine-panel {
  position: relative;
  z-index: 6;
  width: 100%;
  max-width: 900px;
  margin-top: 14px;
  padding: 18px 20px 20px;
  border-radius: 16px;
  background: rgba(253, 246, 232, .07);
  border: 1px solid rgba(232, 200, 90, .22);
  backdrop-filter: blur(6px);
}

.panel-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.panel-head h3 {
  margin: 0;
  font-size: 15px;
  letter-spacing: 3px;
  color: var(--gold-light);
  font-weight: 600;
}
.panel-head .panel-hint { font-size: 12px; color: rgba(253, 246, 232, .55); }

/* 香火选择条 */
.offering-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.offering-tab {
  padding: 5px 16px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  color: rgba(253, 246, 232, .68);
  background: rgba(0, 0, 0, .26);
  border: 1px solid rgba(232, 200, 90, .22);
  transition: all .2s;
}
.offering-tab.active {
  color: #4a3200;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  border-color: transparent;
  font-weight: 600;
}

/* 供奉之物横排 */
.offering-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: thin;
}
.offering-row::-webkit-scrollbar { height: 6px; }
.offering-row::-webkit-scrollbar-thumb {
  background: rgba(232, 200, 90, .35);
  border-radius: 999px;
}

.offering-item {
  position: relative;
  flex: none;
  width: 132px;
  padding: 12px 12px 10px;
  border-radius: 12px;
  cursor: pointer;
  text-align: center;
  background: rgba(255, 255, 255, .05);
  border: 2px solid rgba(232, 200, 90, .18);
  transition: transform .2s, border-color .2s, background .2s;
}
.offering-item:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
  background: rgba(255, 255, 255, .1);
}
.offering-item.selected {
  border-color: var(--gold-light);
  background: rgba(255, 216, 115, .16);
  box-shadow: 0 0 18px rgba(255, 216, 115, .28);
}
.offering-item .oi-icon { font-size: 26px; line-height: 1; }
.offering-item .oi-name {
  margin-top: 6px;
  font-size: 13px;
  color: var(--ink-paper, #fdf6e8);
  font-weight: 600;
}
.offering-item .oi-price { margin-top: 3px; font-size: 11px; }
.offering-item .oi-free { color: #7ee6a0; font-weight: 600; }
.offering-item .oi-old { color: rgba(253, 246, 232, .4); text-decoration: line-through; margin-left: 5px; }
.offering-item .oi-paid { color: var(--gold-light); font-weight: 600; }

/* 选中后右上角的对勾 */
.offering-item .oi-check {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 11px;
  color: #4a3200;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  opacity: 0;
  transform: scale(.6);
  transition: opacity .2s, transform .2s;
}
.offering-item.selected .oi-check { opacity: 1; transform: scale(1); }

/* 卡片内的数量控件：只在选中后出现，避免面板过高 */
.oi-qty {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(232, 200, 90, .25);
}
.offering-item.selected .oi-qty { display: flex; }
.qty-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(232, 200, 90, .45);
  background: rgba(0, 0, 0, .35);
  color: var(--gold-light);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  transition: background .2s;
}
.qty-btn:hover:not(:disabled) { background: rgba(232, 200, 90, .25); }
.qty-btn:disabled { opacity: .35; cursor: not-allowed; }
.qty-val {
  min-width: 22px;
  text-align: center;
  color: var(--gold-light);
  font-weight: 600;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
/* 单位跟在数字后面，小一号且不抢眼，读作「3 炷」 */
.qty-unit {
  color: rgba(253, 246, 232, .45);
  font-size: 11px;
  margin-left: -2px;
}

/* 汇总行：替代原来藏在底部的全局数量控件 */
.cart-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 13px;
  color: rgba(253, 246, 232, .78);
  background: rgba(0, 0, 0, .26);
  border: 1px solid rgba(232, 200, 90, .18);
  min-height: 20px;
}
.cart-summary { line-height: 1.5; }
.cart-summary b { color: var(--gold-light); font-weight: 700; }
.cart-summary .cart-free { color: #7ee6a0; font-weight: 600; }
.cart-clear {
  flex: none;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(232, 200, 90, .3);
  background: transparent;
  color: rgba(253, 246, 232, .65);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: all .2s;
}
.cart-clear:hover:not(:disabled) { color: var(--gold-light); background: rgba(232, 200, 90, .14); }
.cart-clear:disabled { opacity: .35; cursor: not-allowed; }

/* 祈愿 */
.shrine-wish {
  width: 100%;
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(232, 200, 90, .25);
  background: rgba(0, 0, 0, .3);
  color: #fdf6e8;
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
  min-height: 62px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.shrine-wish:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, .18);
}
.shrine-wish::placeholder { color: rgba(253, 246, 232, .34); }

.shrine-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.btn-ritual {
  flex: 1;
  padding: 15px;
  border: none;
  border-radius: 12px;
  font-family: inherit;
  font-size: 17px;
  letter-spacing: 6px;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #d4a72c, #a8232a 55%, #7d1a1a);
  box-shadow: 0 6px 24px rgba(168, 35, 42, .45);
  transition: transform .18s, box-shadow .18s, filter .18s;
}
.btn-ritual:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 34px rgba(212, 167, 44, .5);
  filter: brightness(1.06);
}
.btn-ritual:disabled { opacity: .5; cursor: not-allowed; letter-spacing: 3px; }

.btn-shrine-ghost {
  padding: 13px 20px;
  border-radius: 12px;
  border: 1px solid rgba(232, 200, 90, .35);
  background: transparent;
  color: rgba(253, 246, 232, .72);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: all .2s;
}
.btn-shrine-ghost:hover { background: rgba(232, 200, 90, .12); color: var(--gold-light); }

/* ------------------- 场景内的提示条 ------------------- */

.shrine-notice {
  width: 100%;
  max-width: 900px;
  margin-top: 12px;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 13px;
  text-align: center;
  color: #ffd873;
  background: rgba(255, 216, 115, .1);
  border: 1px solid rgba(255, 216, 115, .28);
}
.shrine-notice .link {
  color: var(--gold-light);
  text-decoration: underline;
  cursor: pointer;
  font-weight: 600;
}

/* ------------------- 祭拜进行中 -------------------
   不再弹遮罩挡画面：祭拜全程直接看香、火盆、神像的动画。
   面板只是暂时淡出并禁用点击，避免动画播放中误触下单。 */

.shrine.ritual-playing .shrine-panel {
  opacity: .18;
  filter: saturate(.45);
  transition: opacity .45s ease, filter .45s ease;
}
.shrine.ritual-playing .shrine-panel * {
  pointer-events: none;
}
/* 动画收尾时恢复原样 */
.shrine:not(.ritual-playing) .shrine-panel {
  transition: opacity .45s ease, filter .45s ease;
}

/* 祭拜时整座大殿略微放大，抬高一点视线焦点，纯 CSS 过渡，不遮挡任何内容 */
.shrine.ritual-playing .hall {
  transition: transform 1.1s cubic-bezier(.25, .8, .3, 1);
  transform: scale(1.03);
}

/* ------------------- 结果弹层 ------------------- */

/* fixed：无论滚动条停在神龛上方还是面板处，结果卡都稳稳盖在视口中央 */
.shrine-result {
  position: fixed;
  inset: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s;
}
.shrine-result.show { opacity: 1; pointer-events: auto; }

.result-card {
  width: 100%;
  max-width: 430px;
  padding: 30px 28px 26px;
  border-radius: 18px;
  text-align: center;
  background: linear-gradient(180deg, #2a1512, #1a0c0a);
  border: 1px solid rgba(232, 200, 90, .45);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .7), 0 0 60px rgba(255, 205, 110, .16) inset;
  transform: translateY(18px) scale(.96);
  transition: transform .5s cubic-bezier(.2, 1.2, .4, 1);
}
.shrine-result.show .result-card { transform: translateY(0) scale(1); }

.result-card h3 {
  margin: 0 0 12px;
  font-size: 20px;
  letter-spacing: 4px;
  color: var(--gold-light);
}
.result-bless {
  margin: 0 0 20px;
  padding: 13px 16px;
  border-radius: 10px;
  font-size: 15px;
  letter-spacing: 1px;
  color: #ffe9b0;
  background: rgba(255, 216, 115, .1);
  border: 1px solid rgba(255, 216, 115, .3);
}
.result-card .result-lines { text-align: left; margin-bottom: 22px; }
.result-card .result-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 2px;
  font-size: 13px;
  border-bottom: 1px dashed rgba(232, 200, 90, .2);
}
.result-card .result-line span:first-child { color: rgba(253, 246, 232, .5); }
.result-card .result-line span:last-child { color: #fdf6e8; font-weight: 600; text-align: right; }
.result-card .result-actions { display: flex; gap: 10px; }
.result-card .result-actions .btn { flex: 1; }

/* ------------------- 小屏适配 ------------------- */

@media (max-width: 640px) {
  .shrine-inner { padding: 12px 12px 20px; }
  .shrine-title .st-name { font-size: 15px; letter-spacing: 2px; }

  /* 三件陈设仍保持左中右并排，只是整体收窄，避免小屏互相压住 */
  .censer { width: 22%; max-width: 82px; }
  .offerings { width: 52%; max-width: 160px; height: 78px; }
  .brazier { width: 78px; height: 44px; }
  .brazier .ritual-slot { bottom: 26px; height: 50px; gap: 2px; }

  .candle { height: 46px; width: 7px; }
  .candle-flame { width: 11px; height: 19px; top: -16px; }

  /* 香火：同一炉里可能同时插着几种，统一缩一号 */
  .censer .ritual-item { transform-origin: 50% 100%; }
  .incense-clear { width: 34px; }
  .incense-thick { width: 40px; }
  .incense-coil { width: 40px; }

  /* 供品：果盘 66 / 寿桃 46 / 茶盏 28，等比缩小 */
  .ritual-item.offer-variant { transform-origin: 50% 100%; }
  .fruit-plate { width: 66px; height: 28px; }
  .fruit { width: 18px; height: 18px; }
  .fruit.f1 { left: 4px; } .fruit.f2 { left: 24px; bottom: 12px; } .fruit.f3 { left: 44px; }
  .peach-set { width: 46px; height: 40px; gap: 2px; }
  .peach { width: 34px; height: 30px; }
  .peach-set .bun { width: 14px; height: 12px; }
  .peach-halo { width: 38px; }
  .tea-cup { width: 28px; height: 36px; }
  .tea-cup .cup { height: 19px; }
  .tea-cup .saucer { width: 34px; left: -3px; }
  .tea-steam { height: 18px; }

  /* 纸钱：火盆变窄后纸样同步收一号 */
  .paper-stack { width: 28px; height: 38px; }
  .ingot-set { width: 32px; height: 28px; }
  .spirit-banner { width: 16px; height: 44px; }

  .shrine-panel { padding: 14px 14px 16px; border-radius: 12px; }
  .offering-item { width: 112px; padding: 10px 8px 8px; }
  .cart-row { font-size: 12px; padding: 8px 10px; }
  .shrine-actions { flex-direction: column-reverse; }
  .btn-shrine-ghost { width: 100%; }
  .btn-ritual { letter-spacing: 4px; font-size: 15px; padding: 14px; }
  .result-card { padding: 24px 20px 20px; }
}

/* ------------------- 窄屏：大殿上下堆叠 -------------------
   三栏并排在手机上排不下（每栏只剩一百来像素，碑文和画像都看不清），
   所以改成竖着走：石像 → 香案 → 功德碑 → 画像。

   做法是给 .hall-cols 上 display: contents，让三栏直接变成 .hall 的 flex 子项，
   这样香案（.altar-deck）能插在石像和另外两栏中间。
   藻井/帷幔/柱/地这些背景层本来就是绝对定位，不参与排列，不受影响。 */

@media (max-width: 760px) {
  .hall {
    display: flex;
    flex-direction: column;
    width: min(520px, 96vw);
    height: auto;
    min-height: 0;
  }
  .hall-cols { display: contents; }

  /* 石像在最上，顶上留出藻井与帷幔的位置 */
  .hall-col-center {
    order: 1;
    padding-top: 84px;
  }
  .idol-stand { height: min(52vh, 420px); }

  /* 香案紧跟在石像下面：祭拜动画就在这一屏，不用上下翻找 */
  .altar-deck {
    position: relative;
    inset: auto;
    order: 2;
    height: 250px;
  }
  .altar-table { height: 62px; }
  .candles { bottom: 54px; }
  .offerings { bottom: 58px; }
  .censer { bottom: 54px; }
  .brazier { bottom: 50px; }

  .hall-col-right { order: 3; padding: 20px 22px 0; }
  .hall-col-left {
    order: 4;
    height: auto;
    padding: 20px 22px 30px;
  }

  /* 挂轴改成由内容撑高（父级高度已经是 auto，不能再用 100%） */
  .hang-scroll { height: auto; }
  .scroll-body {
    flex: 0 0 auto;
    aspect-ratio: 3 / 4;
    min-height: 200px;
    max-width: 268px;
  }
  .scroll-rod { width: 100%; }

  /* 背景层改用固定高度，否则 15% / 24% 这种百分比在上下滚动的高度里会拉到离谱 */
  .hall-ceiling { height: 76px; }
  .hall-valance { top: 62px; height: 26px; }
  .hall-pillar { top: 70px; bottom: 0; }
  .hall-floor { height: 170px; }
  .hall-lantern { top: 56px; width: 30px; }

  /* 神光仍在石像背后：中心 = 84px 留白 + 石像高度的一半 */
  .hall-glow {
    top: calc(84px + min(26vh, 210px));
    height: min(56vh, 460px);
    width: 92%;
  }
}

/* ------------------- 减弱动效偏好 ------------------- */

/* 系统开启「减少动态效果」时，关键帧动画各走一遍就停，不再无限循环。
   不直接把 duration 压到 0：入炉、焚化这些一次性动画的终态是「消失」，
   瞬间跑完会让纸钱直接不见；跑一遍则仍有完整交代，只是不反复晃动。 */
@media (prefers-reduced-motion: reduce) {
  .censer *,
  .offerings *,
  .brazier *,
  .idol,
  .idol-aura,
  .divine-ring {
    animation-iteration-count: 1 !important;
  }
  .smoke,
  .coil-smoke {
    opacity: .5 !important;
  }
}