.ausbia-gongfo-root {
  position: relative;
  max-width: 960px;
  margin: 2rem auto;
  padding: 1rem;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.ausbia-gongfo-stage {
  position: relative;
  width: 100%;
  /* 默认 16:9，当 JS 提供 layout.aspectRatio 时，会被内联样式覆盖 */
  padding-top: 56.25%;
  border-radius: 12px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 0%, #ffe9b3 0, #e8c27c 40%, #c89d63 85%, #7d5b35 100%);
}

/* 内层填满 stage，有明确宽高，作为 cqw/cqh 的尺寸容器 */
.ausbia-gongfo-stage-inner {
  position: absolute;
  inset: 0;
  container-type: size;
  container-name: gongfo-stage;
}

.ausbia-gongfo-background {
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.9;
}

/* 使用内层容器放置所有供奉元素，避免被背景遮挡 */
.ausbia-gongfo-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.35), transparent 40%);
  pointer-events: none;
}

/* 行内 gap 用容器单位，随 stage 缩放 */
.ausbia-gongfo-lamps,
.ausbia-gongfo-waterbowls,
.ausbia-gongfo-flowerpots,
.ausbia-gongfo-offerings,
.ausbia-gongfo-incense-area {
  position: absolute;
  left: 6%;
  right: 6%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 1.25cqw; /* 约 0.75rem @ 960px 宽，随 stage 缩放 */
  pointer-events: none; /* 容器不响应，内部按钮响应 */
  filter: brightness(1.3);
}

/* 粗略布局：上花，中灯，下水，更下供品和香 */
.ausbia-gongfo-flowerpots {
  top: 15%;
  justify-content: space-between;
}

.ausbia-gongfo-lamps {
  top: 32%;
}

.ausbia-gongfo-waterbowls {
  top: 52%;
}

.ausbia-gongfo-offerings {
  top: 68%;
  gap: 5cqw; /* 约 3rem @ 960px 宽，随 stage 缩放 */
}

.ausbia-gongfo-incense-area {
  top: 80%;
}

.ausbia-gongfo-lamp-slot,
.ausbia-gongfo-water-slot,
.ausbia-gongfo-flower-slot,
.ausbia-gongfo-food-slot,
.ausbia-gongfo-mandala-slot,
.ausbia-gongfo-incense-slot {
  pointer-events: auto;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  position: relative;
  outline: none;
}

/* 槽位尺寸用容器单位，随 stage 缩放（参考 960×540） */
.ausbia-gongfo-lamp-slot,
.ausbia-gongfo-water-slot {
  width: 3.96cqw;
  height: 8.52cqh;
}

.ausbia-gongfo-flower-slot {
  width: 6.25cqw;
  height: 14.81cqh;
}

.ausbia-gongfo-food-slot,
.ausbia-gongfo-mandala-slot {
  width: 7.29cqw;
  height: 9.26cqh;
}

.ausbia-gongfo-incense-slot {
  width: 12.5cqw;
  height: 7.41cqh;
}

/* 不支持容器单位时回退为固定 px（与参考 960×540 下比例一致） */
@supports not (width: 1cqw) {
  .ausbia-gongfo-lamp-slot,
  .ausbia-gongfo-water-slot {
    width: 38px;
    height: 46px;
  }
  .ausbia-gongfo-flower-slot {
    width: 60px;
    height: 80px;
  }
  .ausbia-gongfo-food-slot,
  .ausbia-gongfo-mandala-slot {
    width: 70px;
    height: 50px;
  }
  .ausbia-gongfo-incense-slot {
    width: 120px;
    height: 40px;
  }
  .ausbia-gongfo-lamps,
  .ausbia-gongfo-waterbowls,
  .ausbia-gongfo-flowerpots,
  .ausbia-gongfo-offerings,
  .ausbia-gongfo-incense-area {
    gap: 0.75rem;
  }
  .ausbia-gongfo-offerings {
    gap: 3rem;
  }
}

/* 占位视觉：无虚线框、无背景、无阴影 */
.ausbia-gongfo-lamp-slot::before,
.ausbia-gongfo-water-slot::before,
.ausbia-gongfo-flower-slot::before,
.ausbia-gongfo-food-slot::before,
.ausbia-gongfo-mandala-slot::before,
.ausbia-gongfo-incense-slot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: none;
  outline: none;
  background: transparent;
  box-shadow: none;
}

/* 默认供水碗：无自定义图时使用内建 SVG 碗形（无虚线） */
.ausbia-gongfo-water-slot:not(.has-custom-bowl)::before {
  border: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 46'%3E%3Cdefs%3E%3CradialGradient id='b' cx='50%25' cy='45%25' r='55%25'%3E%3Cstop offset='0%25' stop-color='%23f5e6d3'/%3E%3Cstop offset='70%25' stop-color='%23d4b896'/%3E%3Cstop offset='100%25' stop-color='%238b6914'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cellipse cx='19' cy='28' rx='16' ry='12' fill='url(%23b)' stroke='%236b5344' stroke-width='0.6'/%3E%3C/svg%3E") center / contain no-repeat;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

/* 有自定义供水碗图时，空状态露出 slot 的背景图（无虚线） */
.ausbia-gongfo-water-slot.has-custom-bowl::before {
  border: none;
  background: transparent;
  box-shadow: none;
}

/* 灯台有酥油灯 */
.ausbia-gongfo-lamp-slot.has-lamp::before {
  border-style: solid;
  background: radial-gradient(circle at 50% 20%, #fff7da 0, #f3cf80 50%, #b8893a 100%);
}

/* 自定义酥油灯图：有灯时露出 slot 背景图 */
.ausbia-gongfo-lamp-slot.has-custom-lamp.has-lamp::before {
  background: transparent;
  border: none;
  box-shadow: none;
}

/* 点燃后的火焰效果：尺寸与位置用百分比，随槽位缩放 */
.ausbia-gongfo-lamp-slot.is-lit::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 6%;
  width: 19%;
  height: 18%;
  margin-left: -14%;
  background: radial-gradient(circle at 50% 0%, #ffffff 0, #ffef9c 40%, #ffb347 75%, transparent 100%);
  border-radius: 50% 50% 50% 50%;
  filter: blur(0.5px);
  animation: ausbia-gongfo-flame 1.3s infinite ease-in-out alternate;
}

/* 自定义火焰图时隐藏默认 ::after，改用下方 .ausbia-gongfo-flame-img 并保留同一套动画 */
.ausbia-gongfo-lamp-slot.has-custom-flame.is-lit::after {
  display: none;
}

.ausbia-gongfo-flame-img {
  position: absolute;
  left: 50%;
  top: -39%;
  width: 37%;
  height: 57%;
  margin-left: -18.5%;
  object-fit: contain;
  pointer-events: none;
  animation: ausbia-gongfo-flame 1.3s infinite ease-in-out alternate;
}

@keyframes ausbia-gongfo-flame {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.9;
  }
  100% {
    transform: translateY(-10%) scale(1.12);
    opacity: 0.7;
  }
}

/* 供水碗注水效果：默认碗满水时保留碗形+水层；自定义碗满水时仅水层（碗由 slot 背景露出），无虚线 */
.ausbia-gongfo-water-slot:not(.has-custom-bowl).is-filled::before {
  border: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 46'%3E%3Cdefs%3E%3CradialGradient id='b' cx='50%25' cy='45%25' r='55%25'%3E%3Cstop offset='0%25' stop-color='%23f5e6d3'/%3E%3Cstop offset='70%25' stop-color='%23d4b896'/%3E%3Cstop offset='100%25' stop-color='%238b6914'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cellipse cx='19' cy='28' rx='16' ry='12' fill='url(%23b)' stroke='%236b5344' stroke-width='0.6'/%3E%3C/svg%3E") center / contain no-repeat,
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.8) 0, transparent 55%),
    linear-gradient(to top, #2f6fba, #7ec8ff);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.ausbia-gongfo-water-slot.has-custom-bowl.is-filled:not(.use-filled-image)::before {
  border: none;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.8) 0, transparent 55%),
    linear-gradient(to top, #2f6fba, #7ec8ff);
}

/* 使用自定义满水碗图时隐藏 ::before 水层，露出 slot 的 background-image */
.ausbia-gongfo-water-slot.use-filled-image.is-filled::before {
  background: transparent;
  border: none;
  box-shadow: none;
}

/* 花盆与花，无虚线 */
.ausbia-gongfo-flower-slot::before {
  border-radius: 0 0 999px 999px;
  border: none;
  background: linear-gradient(to top, #8c5a34, #f3d2a3);
}

/* 自定义花盆图：露出 slot 背景图 */
.ausbia-gongfo-flower-slot.has-custom-pot::before {
  background: transparent;
  border: none;
  box-shadow: none;
}

.ausbia-gongfo-flower-slot.has-flower::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 40%;
  width: 52px;
  height: 52px;
  margin-left: -26px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 20%, #ffffff 0, #ffe5f2 30%, #ff9ac4 65%, #ff4f88 100%);
  box-shadow: 0 0 18px rgba(255, 144, 200, 0.9);
  animation: ausbia-gongfo-flower-bloom 1.8s ease-out forwards;
}

@keyframes ausbia-gongfo-flower-bloom {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 供食子与曼扎 */
.ausbia-gongfo-food-slot.is-placed::before {
  border-style: solid;
  background:
    radial-gradient(circle at 50% 20%, #ffffff 0, #ffe2be 30%, #f2a15b 65%, #d96c2a 100%);
}

.ausbia-gongfo-mandala-slot.is-placed::before {
  border-style: solid;
  background:
    radial-gradient(circle at 50% 15%, #ffffff 0, #f3f2ff 25%, #b6a7ff 55%, #5a4bd8 100%);
}

/* 自定义供食子/曼扎图：摆放后露出 slot 背景图 */
.ausbia-gongfo-food-slot.has-custom-food.is-placed::before {
  background: transparent;
  border: none;
  box-shadow: none;
}

.ausbia-gongfo-mandala-slot.has-custom-mandala.is-placed::before {
  background: transparent;
  border: none;
  box-shadow: none;
}

/* 香炉与香的视觉，无虚线 */
.ausbia-gongfo-incense-slot::before {
  border-radius: 30px;
  border: none;
  background: linear-gradient(to top, #6f4b2b, #f1d3a8);
}

/* 自定义香炉图：露出 slot 背景图 */
.ausbia-gongfo-incense-slot.has-custom-burner::before {
  background: transparent;
  border: none;
  box-shadow: none;
}

.ausbia-gongfo-incense-slot.has-incense::after,
.ausbia-gongfo-incense-slot.is-burning::after {
  content: "";
  position: absolute;
  left: 16%;
  bottom: 13px;
  width: 70%;
  height: 3px;
  border-radius: 999px;
  background:
    linear-gradient(to right, #c2b9ac, #fdfaf5, #c2b9ac);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
}

/* 自定义香条图时隐藏默认 ::after */
.ausbia-gongfo-incense-slot.has-custom-stick.has-incense::after,
.ausbia-gongfo-incense-slot.has-custom-stick.is-burning::after {
  display: none;
}

.ausbia-gongfo-incense-stick-img {
  position: absolute;
  left: 16%;
  bottom: 13px;
  width: 70%;
  height: auto;
  max-height: 12px;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
}

.ausbia-gongfo-incense-slot.is-burning::before {
  /* 加一点光晕 */
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.8);
}

.ausbia-gongfo-incense-slot.is-burning::after {
  /* 香体本身稍微更亮一点 */
  background:
    linear-gradient(to right, #ece3d4, #ffffff, #d7cabb);
}

/* 一缕从左侧飘起的烟，使用额外伪元素模拟 */
.ausbia-gongfo-incense-slot.is-burning::before {
  position: relative;
}

.ausbia-gongfo-incense-slot.is-burning::before {
  /* 保留原有光晕的基础上，再通过内层绝对元素画烟 */
}

.ausbia-gongfo-incense-slot.is-burning::after {
  /* 香条维持在香炉中，烟由额外元素绘制 */
}

.ausbia-gongfo-incense-slot.is-burning .ausbia-gongfo-incense-smoke {
  position: absolute;
  left: 18%;
  bottom: 16px;
  width: 18px;
  height: 60px;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 100%, rgba(255, 255, 255, 0.95) 0, rgba(255, 255, 255, 0.5) 25%, transparent 60%);
  opacity: 0.8;
  filter: blur(0.5px);
  animation: ausbia-gongfo-wisp 3.2s infinite ease-in-out;
}

@keyframes ausbia-gongfo-wisp {
  0% {
    transform: translate(0, 0) scale(0.6, 0.9);
    opacity: 0.7;
  }
  40% {
    transform: translate(-6px, -16px) scale(0.8, 1.05);
    opacity: 0.9;
  }
  80% {
    transform: translate(-10px, -30px) scale(1, 1.15);
    opacity: 0.4;
  }
  100% {
    transform: translate(-12px, -36px) scale(1.05, 1.25);
    opacity: 0;
  }
}

/* 工具栏样式 */
.ausbia-gongfo-toolbar {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.ausbia-gongfo-toolbar-title {
  font-weight: 600;
  color: #7a4b16;
  white-space: nowrap;
}

.ausbia-gongfo-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.ausbia-gongfo-toolbar-actions {
  display: flex;
  align-items: center;
}

.ausbia-gongfo-tool,
.ausbia-gongfo-reset {
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 0.3rem 0.9rem;
  background: #f8f5ff;
  color: #50301b;
  font-size: 0.85rem;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease, color 0.18s ease;
  white-space: nowrap;
}

.ausbia-gongfo-tool:hover,
.ausbia-gongfo-reset:hover {
  background: #fffdf4;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

.ausbia-gongfo-tool.is-active {
  background: #f8e0a6;
  color: #5b3614;
  border-color: rgba(137, 75, 16, 0.6);
  box-shadow: 0 4px 15px rgba(137, 75, 16, 0.4);
}

.ausbia-gongfo-reset {
  background: #f4f4f7;
}

.ausbia-gongfo-reset:hover {
  background: #ffffff;
}

/* 使用说明（可折叠） */
.ausbia-gongfo-usage {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 0.9rem;
  color: #3d2a14;
}

.ausbia-gongfo-usage summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  padding: 0.2rem 0;
}

.ausbia-gongfo-usage summary::-webkit-details-marker {
  display: none;
}

.ausbia-gongfo-usage summary::before {
  content: "▶ ";
  font-size: 0.7em;
  opacity: 0.7;
}

.ausbia-gongfo-usage[open] summary::before {
  content: "▼ ";
}

.ausbia-gongfo-usage-content {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.ausbia-gongfo-usage-content p {
  margin: 0 0 0.5rem;
}

.ausbia-gongfo-usage-content ul {
  margin: 0;
  padding-left: 1.2rem;
}

.ausbia-gongfo-usage-content li {
  margin-bottom: 0.35rem;
  line-height: 1.45;
}

/* 多种花型/香型的小圆点选择器 */
.ausbia-gongfo-tool-group {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.ausbia-gongfo-variants {
  display: inline-flex;
  gap: 0.25rem;
}

.ausbia-gongfo-variant-btn {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-color: #fff8f0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0;
  cursor: pointer;
  outline: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  transition: transform 0.12s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.ausbia-gongfo-variant-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.ausbia-gongfo-variant-btn.is-active {
  border-color: #b98536;
  box-shadow: 0 0 0 2px rgba(185, 133, 54, 0.15);
}

/* 倒水动画层：覆盖在 stage 上，高于器具 */
.ausbia-gongfo-pour-layer {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}

/* 右手倒：茶壶水平镜像，壶嘴在左；以壶嘴为轴向左倾斜 */
.ausbia-gongfo-pour-teapot {
  position: absolute;
  width: 224px;
  height: 192px;
  /* 轴心在壶嘴侧（镜像后左侧约 14%），倾斜时壶嘴基本不动 */
  transform-origin: 23% 95%;
  transition: transform 0.7s ease-out;
  transform: scaleX(-1);
}

.ausbia-gongfo-pour-teapot.is-pouring {
  /* 先顺时针再镜像 = 视觉向左倾斜，壶嘴朝下对准水流 */
  transform: scaleX(-1) rotate(25deg);
}

.ausbia-gongfo-pour-stream {
  position: absolute;
  width: 8px;
  /* 浓茶色水流：上浅下深的棕金色渐变 */
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.9),
    #f3d8a2,
    #c28a3a,
    #8b5a1e
  );
  border-radius: 1px 1px 4px 4px;
  transform-origin: top center;
  opacity: 0;
  transition: opacity 0.2s ease, height 0s linear 0.35s;
}

.ausbia-gongfo-pour-stream.is-active {
  opacity: 0.95;
  transition: opacity 0.15s ease, height 0.5s ease-out 0.25s;
}

/* 右手倒：酥油瓶水平镜像，瓶嘴在左；以瓶嘴为轴向左倾斜 */
.ausbia-gongfo-pour-oil-bottle {
  position: absolute;
  width: 224px;
  height: 192px;
  transform-origin: 14% 85%;
  transition: transform 0.7s ease-out;
  transform: scaleX(-1);
}

.ausbia-gongfo-pour-oil-bottle.is-pouring {
  transform: scaleX(-1) rotate(25deg);
}

.ausbia-gongfo-pour-oil-stream {
  position: absolute;
  width: 8px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.631), #e8d67c, #e3c83c);
  border-radius: 1px 1px 4px 4px;
  transform-origin: top center;
  opacity: 0;
  transition: opacity 0.2s ease, height 0s linear 0.35s;
}

.ausbia-gongfo-pour-oil-stream.is-active {
  opacity: 0.95;
  transition: opacity 0.15s ease, height 0.5s ease-out 0.25s;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .ausbia-gongfo-root {
    padding: 0.75rem;
  }

  .ausbia-gongfo-toolbar {
    border-radius: 16px;
    flex-direction: column;
    align-items: stretch;
  }

  .ausbia-gongfo-toolbar-title {
    text-align: center;
  }

  .ausbia-gongfo-tools {
    justify-content: center;
  }

  .ausbia-gongfo-toolbar-actions {
    justify-content: center;
  }
}