/* ============ 基础重置 ============ */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body {
  font-family: "STKaiti", "KaiTi", "FZShuTi", -apple-system, BlinkMacSystemFont,
               "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", serif;
  color: #fff8e7;
  user-select: none;
  -webkit-user-select: none;
}
button { border: none; background: none; cursor: pointer; font-family: inherit; }
svg { display: block; }

/* ============ 主容器：纯色朱红国潮 ============ */
.app {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background-color: #b8261c;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* 在纯色基础上叠加细微的暗角，更有质感 */
  box-shadow: inset 0 0 160px rgba(60, 8, 4, .55);
}

/* ============ 背景：远山 ============ */
.bg-mountains {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  height: 30%;
  z-index: 0;
  pointer-events: none;
}

/* ============ 背景：祥云 ============ */
.bg-cloud {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.bg-cloud-1 { top: 12%;  left: -10px;  width: 130px; animation: floatCloud 20s linear infinite; }
.bg-cloud-2 { top: 22%;  right: -20px; width: 110px; animation: floatCloud 26s linear infinite reverse; }
.bg-cloud-3 { top: 6%;   left: 38%;    width: 90px;  animation: floatCloud 30s linear infinite; }
@keyframes floatCloud {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(20px); }
  100% { transform: translateX(0); }
}

/* ============ 飘落金箔粒子 ============ */
.petals {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.petal {
  position: absolute;
  top: -10px;
  width: 6px; height: 6px;
  background: radial-gradient(circle, #ffe9a8, #c8a14a);
  border-radius: 50%;
  opacity: .8;
  box-shadow: 0 0 6px #f5d77a;
  animation: petalFall linear infinite;
}
.petal.p1 { left:  8%; width: 5px; height: 5px; animation-duration: 14s; animation-delay: 0s; }
.petal.p2 { left: 22%; width: 4px; height: 4px; animation-duration: 18s; animation-delay: -3s; }
.petal.p3 { left: 38%; width: 6px; height: 6px; animation-duration: 16s; animation-delay: -8s; }
.petal.p4 { left: 52%; width: 5px; height: 5px; animation-duration: 20s; animation-delay: -2s; }
.petal.p5 { left: 66%; width: 4px; height: 4px; animation-duration: 17s; animation-delay: -10s; }
.petal.p6 { left: 78%; width: 6px; height: 6px; animation-duration: 22s; animation-delay: -5s; }
.petal.p7 { left: 88%; width: 5px; height: 5px; animation-duration: 15s; animation-delay: -12s; }
.petal.p8 { left: 14%; width: 4px; height: 4px; animation-duration: 24s; animation-delay: -7s; }
@keyframes petalFall {
  0%   { transform: translateY(-20px) translateX(0)   rotate(0deg);   opacity: 0; }
  10%  { opacity: .9; }
  50%  { transform: translateY(50vh)  translateX(20px) rotate(180deg); }
  100% { transform: translateY(110vh) translateX(-10px) rotate(360deg); opacity: 0; }
}

/* ============ 顶部 / 底部 回纹边框 ============ */
.border-pattern {
  position: absolute;
  left: 0; right: 0;
  height: 18px;
  z-index: 2;
  background-image:
    /* 用线性渐变模拟回纹方块图案 */
    repeating-linear-gradient(90deg,
      transparent 0,
      transparent 14px,
      #f5d77a55 14px,
      #f5d77a55 16px,
      transparent 16px,
      transparent 30px
    );
  border-top: 1px solid #f5d77a55;
  border-bottom: 1px solid #f5d77a55;
}
.border-top    { top:    calc(env(safe-area-inset-top) + 0px); }
.border-bottom { bottom: calc(env(safe-area-inset-bottom) + 0px); }

/* ============ 顶部标题 ============ */
.top-bar {
  flex: 0 0 auto;
  padding: calc(env(safe-area-inset-top) + 36px) 0 0;
  text-align: center;
  position: relative;
  z-index: 3;
}
.title-row {
  display: flex; align-items: center; justify-content: center;
  gap: 14px;
}
.title-line {
  width: 38px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #f5d77a);
}
.title-row .title-line:last-child {
  background: linear-gradient(90deg, #f5d77a, transparent);
}
.brand {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: 14px;
  color: #ffe9a8;
  text-shadow:
    0 2px 0 #5a0c06,
    0 0 18px #f5d77a55,
    0 0 2px #fff5d0;
  font-family: "STKaiti", "KaiTi", serif;
  padding-left: 14px; /* letter-spacing 视觉补偿 */
}

.seal-row {
  margin-top: 12px;
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
}
.brand-sub {
  font-size: 12px;
  letter-spacing: 4px;
  color: #ffe9a8aa;
}
.seal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  background: #ffe9a8;
  color: #b8261c;
  font-weight: 800;
  font-size: 14px;
  border-radius: 3px;
  transform: rotate(-8deg);
  box-shadow: 0 0 0 1px #b8261c inset, 0 2px 4px rgba(0,0,0,.35);
  font-family: "STKaiti", "KaiTi", serif;
  letter-spacing: 0;
}

/* ============ 主舞台 ============ */
.stage {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 3;
}

/* 中心圆形光晕（祥光） */
.halo {
  position: absolute;
  width: 360px; height: 360px;
  border-radius: 50%;
  background:
    radial-gradient(circle, #ffe9a833 0%, #f5d77a15 35%, transparent 65%);
  filter: blur(2px);
  z-index: -1;
  animation: haloPulse 4s ease-in-out infinite;
}
@keyframes haloPulse {
  0%, 100% { transform: scale(1);    opacity: .85; }
  50%      { transform: scale(1.08); opacity: 1; }
}

/* ============ 红绳 + 流苏（签筒上方挂饰） ============ */
.rope-wrap {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 70px;
  z-index: 4;
  pointer-events: none;
}
.rope-line {
  position: absolute;
  top: 0;
  width: 2px;
  height: 30px;
  background: linear-gradient(180deg, #f5d77a, #c8a14a);
  border-radius: 1px;
}
.rope-line-l { left: 30px; transform: rotate(-12deg); transform-origin: top center; }
.rope-line-r { right: 30px; transform: rotate(12deg); transform-origin: top center; }
.rope-knot {
  position: absolute;
  top: 26px; left: 50%;
  transform: translateX(-50%);
  width: 14px; height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe9a8, #c8a14a 60%, #8a6a2a);
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.rope-bead {
  position: absolute;
  top: 40px; left: 50%;
  transform: translateX(-50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ff7252, #b8261c);
  box-shadow: 0 0 4px #ff725266;
}
.rope-tassel {
  position: absolute;
  top: 48px; left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 30px;
}
.tassel-head {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 18px; height: 10px;
  border-radius: 9px 9px 4px 4px;
  background: linear-gradient(180deg, #ff7252, #b8261c);
  box-shadow: inset 0 -2px 3px rgba(0,0,0,.3);
}
.tassel-strand {
  position: absolute;
  top: 8px;
  width: 1.5px;
  height: 22px;
  background: linear-gradient(180deg, #ff7252, #8a1a0e);
  border-radius: 1px;
}
.tassel-strand.t1 { left: 4px;  height: 18px; }
.tassel-strand.t2 { left: 8px;  height: 22px; }
.tassel-strand.t3 { left: 12px; height: 24px; }
.tassel-strand.t4 { left: 16px; height: 20px; }
.tassel-strand.t5 { left: 20px; height: 17px; }

/* ============ 签筒（精致升级） ============ */
.tube-wrap {
  position: relative;
  width: 180px;
  height: 260px;
  margin-top: 30px; /* 给上方红绳留位 */
}

.tube {
  position: relative;
  width: 100%;
  height: 100%;
  transform-origin: 50% 95%;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .55));
}

/* ----- 签筒口（金属箍） ----- */
.tube-rim {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 188px;
  height: 26px;
  border-radius: 50%;
  background:
    /* 三层渐变模拟金属厚度 */
    linear-gradient(180deg,
      #c8a14a 0%,
      #ffe9a8 30%,
      #f5d77a 50%,
      #c8a14a 75%,
      #8a6a2a 100%);
  box-shadow:
    inset 0 -2px 4px rgba(0,0,0,.4),
    inset 0 2px 0 #fff5d0,
    0 2px 4px rgba(0,0,0,.35);
  z-index: 3;
}
.tube-rim-inner {
  position: absolute;
  top: 6px; left: 50%;
  transform: translateX(-50%);
  width: 168px; height: 14px;
  border-radius: 50%;
  background: radial-gradient(ellipse, #1a0604 0%, #2a0e06 60%, #4a1c10 100%);
  box-shadow: inset 0 4px 6px rgba(0,0,0,.6);
}
.tube-rim-shine {
  position: absolute;
  top: 4px; left: 30%;
  width: 30%; height: 4px;
  background: linear-gradient(90deg, transparent, #fff5d0cc, transparent);
  border-radius: 50%;
  filter: blur(1px);
}

/* ----- 签筒主体 ----- */
.tube-body {
  position: absolute;
  top: 32px;
  left: 50%;
  transform: translateX(-50%);
  width: 178px;
  height: 200px;
  background:
    /* 多层木纹 + 立体感（左暗右亮） */
    linear-gradient(90deg,
      #2a0e06 0%,
      #4a1c10 8%,
      #6a2818 22%,
      #8a3a22 50%,
      #6a2818 78%,
      #4a1c10 92%,
      #2a0e06 100%),
    repeating-linear-gradient(180deg,
      transparent 0,
      transparent 6px,
      rgba(0,0,0,.05) 6px,
      rgba(0,0,0,.05) 7px);
  background-blend-mode: multiply;
  z-index: 2;
  overflow: hidden;
}

/* 木纹高光（上方光斑） */
.tube-shine {
  position: absolute;
  top: 0; left: 25%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 234, 168, .12) 40%,
    rgba(255, 234, 168, .06) 60%,
    transparent 100%);
  pointer-events: none;
}

/* 上下金线 */
.tube-line {
  position: absolute;
  left: 6px; right: 6px;
  height: 1.5px;
  background: linear-gradient(90deg,
    transparent 0%, #c8a14a 10%, #ffe9a8 50%, #c8a14a 90%, transparent 100%);
  opacity: .9;
}
.tube-line-top     { top: 14px; }
.tube-line-top2    { top: 22px; opacity: .55; }
.tube-line-bottom  { bottom: 14px; }
.tube-line-bottom2 { bottom: 22px; opacity: .55; }

/* ----- 雕花徽章（铜钱样式） ----- */
.tube-medallion {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 104px; height: 104px;
  display: flex; align-items: center; justify-content: center;
}
.medallion-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #c8a14a;
  box-shadow:
    inset 0 0 0 4px #4a1c10,
    inset 0 0 0 5px #c8a14a,
    0 0 14px #c8a14a55;
}
.medallion-coin {
  position: relative;
  width: 82px; height: 82px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, #ffe9a8 0%, #f5d77a 35%, #c8a14a 75%, #8a6a2a 100%);
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    inset 0 -2px 4px rgba(0,0,0,.35),
    inset 0 2px 0 #fff5d0;
}
/* 铜钱中心方孔 + 上下"求签"文字 */
.medallion-text {
  font-family: "STKaiti", "KaiTi", serif;
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  color: #6a0c06;
  text-shadow: 0 1px 0 #fff5d0;
  letter-spacing: 0;
}

/* ----- 签筒下端金属箍 ----- */
.tube-foot {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 188px;
  height: 16px;
  border-radius: 4px;
  background: linear-gradient(180deg,
    #8a6a2a 0%,
    #c8a14a 25%,
    #ffe9a8 50%,
    #f5d77a 75%,
    #8a6a2a 100%);
  box-shadow:
    inset 0 1px 0 #fff5d0,
    inset 0 -2px 3px rgba(0,0,0,.4),
    0 2px 4px rgba(0,0,0,.35);
  z-index: 2;
}
.tube-foot-inner {
  position: absolute;
  inset: 4px 8px;
  background: repeating-linear-gradient(90deg,
    #c8a14a 0, #c8a14a 4px,
    #8a6a2a 4px, #8a6a2a 6px);
  opacity: .55;
  border-radius: 2px;
}

/* ----- 签筒底座 ----- */
.tube-base {
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(180deg, #2a0e06 0%, #1a0604 60%, #0a0202 100%);
  border-top: 1px solid #c8a14a66;
  z-index: 1;
}

/* ----- 签筒投影（不跟随晃动） ----- */
.tube-shadow {
  position: absolute;
  bottom: -14px; left: 50%;
  transform: translateX(-50%);
  width: 230px; height: 16px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,.65), transparent 70%);
  z-index: 0;
}

/* ============ 签（露出顶部） ============ */
.sticks {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 150px;
  height: 50px;
  z-index: 4;
  pointer-events: none;
}
.stick {
  position: absolute;
  bottom: 0;
  width: 5px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #fff5d0 0%, #f5d77a 30%, #c8a14a 100%);
  box-shadow:
    0 0 4px #f5d77a99,
    inset -1px 0 0 #8a6a2a;
}
/* 签头朱红色（更精致） */
.stick .stick-tip {
  position: absolute;
  top: -3px; left: 50%;
  transform: translateX(-50%);
  width: 7px; height: 5px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, #ff7252, #b8261c);
}
.stick.s1 { left:  6px; height: 26px; transform: rotate(-12deg); }
.stick.s2 { left: 28px; height: 36px; transform: rotate(-6deg); }
.stick.s3 { left: 50px; height: 42px; transform: rotate(-2deg); }
.stick.s4 { left: 72px; height: 46px; transform: rotate(1deg); }
.stick.s5 { left: 94px; height: 38px; transform: rotate(5deg); }
.stick.s6 { left: 116px; height: 32px; transform: rotate(9deg); }
.stick.s7 { left: 134px; height: 22px; transform: rotate(13deg); }

/* ============ 摇签：左右剧烈晃动 1.5s ============ */
.tube.shaking {
  animation: tubeShake 1.5s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes tubeShake {
  0%   { transform: rotate(0deg); }
  6%   { transform: rotate(-18deg); }
  12%  { transform: rotate(16deg); }
  18%  { transform: rotate(-15deg); }
  24%  { transform: rotate(14deg); }
  30%  { transform: rotate(-13deg); }
  36%  { transform: rotate(12deg); }
  42%  { transform: rotate(-11deg); }
  48%  { transform: rotate(10deg); }
  54%  { transform: rotate(-9deg); }
  60%  { transform: rotate(8deg); }
  66%  { transform: rotate(-7deg); }
  72%  { transform: rotate(6deg); }
  78%  { transform: rotate(-4deg); }
  84%  { transform: rotate(3deg); }
  90%  { transform: rotate(-2deg); }
  96%  { transform: rotate(1deg); }
  100% { transform: rotate(0deg); }
}
.tube.shaking .stick {
  animation: stickJitter 0.18s linear infinite;
}
.tube.shaking .stick.s2 { animation-delay: -0.04s; }
.tube.shaking .stick.s3 { animation-delay: -0.08s; }
.tube.shaking .stick.s4 { animation-delay: -0.12s; }
.tube.shaking .stick.s5 { animation-delay: -0.16s; }
.tube.shaking .stick.s6 { animation-delay: -0.10s; }
.tube.shaking .stick.s7 { animation-delay: -0.06s; }
@keyframes stickJitter {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -2px; }
}

/* ============ 底部按钮（精致升级） ============ */
.bottom-bar {
  flex: 0 0 auto;
  padding: 0 28px calc(env(safe-area-inset-bottom) + 36px);
  text-align: center;
  position: relative;
  z-index: 3;
}
.shake-btn {
  width: 100%;
  height: 72px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, #ffe9a8 0%, #f5d77a 45%, #c8a14a 100%);
  box-shadow:
    0 0 0 2px #8a6a2a,           /* 外金边 */
    0 0 0 4px #5a0c06,           /* 朱红夹层 */
    0 0 0 5px #c8a14a,           /* 内金边 */
    0 6px 0 #5a0c06,             /* 立体下沉 */
    0 12px 22px rgba(0,0,0,.45),
    inset 0 1px 0 #fff5d0;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 12px;
  transition: transform .08s ease, box-shadow .08s ease, opacity .2s ease;
}
.shake-btn:active {
  transform: translateY(4px);
  box-shadow:
    0 0 0 2px #8a6a2a,
    0 0 0 4px #5a0c06,
    0 0 0 5px #c8a14a,
    0 2px 0 #5a0c06,
    0 6px 12px rgba(0,0,0,.45),
    inset 0 1px 0 #fff5d0;
}
.shake-btn[disabled] {
  opacity: .55;
  filter: saturate(.7);
  pointer-events: none;
}
.shake-btn-deco {
  font-size: 16px;
  color: #8a1a0e;
  opacity: .8;
}
.shake-btn-text {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 5px;
  color: #8a1a0e;
  text-shadow: 0 1px 0 #fff5d0;
}
.tip {
  margin-top: 16px;
  font-size: 12px;
  letter-spacing: 4px;
  color: #ffe9a8aa;
}

/* ============ 结果弹窗 ============ */
.result-mask {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 99;
  animation: maskFade .25s ease both;
}
.result-mask[hidden] { display: none; }
@keyframes maskFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.result-card {
  position: relative;
  width: 80%;
  max-width: 360px;
  padding: 30px 24px 22px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, #fff5d0 0%, #ffe9a8 100%);
  border: 2px solid #c8a14a;
  box-shadow:
    0 0 0 4px #b8261c,
    0 0 0 5px #c8a14a,
    0 22px 50px rgba(0,0,0,.55);
  text-align: center;
  color: #6a0c06;
  animation: cardPop .35s cubic-bezier(.2,1.2,.3,1) both;
}
@keyframes cardPop {
  from { transform: scale(.6); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}

/* 顶部小印章 */
.result-stamp {
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  width: 92px; height: 28px;
  background: #b8261c;
  color: #ffe9a8;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 4px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px;
  box-shadow: 0 0 0 1px #ffe9a8 inset, 0 4px 8px rgba(0,0,0,.3);
  font-family: "STKaiti", "KaiTi", serif;
}
.result-stamp span { padding-left: 4px; }

/* 日期：阳历 + 农历 */
.result-date {
  margin-top: 6px;
  font-family: "STKaiti", "KaiTi", serif;
}
.date-solar {
  font-size: 12px;
  letter-spacing: 2px;
  color: #8a3a22;
}
.date-lunar {
  margin-top: 4px;
  font-size: 14px;
  letter-spacing: 3px;
  color: #6a0c06;
  font-weight: 700;
}

/* 签等级 */
.result-title {
  margin-top: 16px;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 8px;
  color: #b8261c;
  font-family: "STKaiti", "KaiTi", serif;
  text-shadow: 0 1px 0 #fff5d0;
  padding-left: 8px;
}

/* 装饰分隔线 */
.result-divider {
  margin: 14px auto 12px;
  width: 70%;
  height: 12px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.result-divider::before, .result-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, #c8a14a, transparent);
}
.divider-dot {
  width: 6px; height: 6px;
  margin: 0 8px;
  background: #c8a14a;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff5d0, 0 0 0 3px #c8a14a;
}

/* 签诗 */
.result-poem {
  font-size: 17px;
  line-height: 1.75;
  letter-spacing: 2px;
  color: #6a0c06;
  font-family: "STKaiti", "KaiTi", serif;
  font-weight: 700;
}

/* 玄机箴言 */
.result-oracle {
  margin: 14px auto 18px;
  display: inline-block;
  padding: 6px 14px;
  font-size: 13px;
  letter-spacing: 4px;
  color: #8a1a0e;
  background: #ffe9a8;
  border: 1px dashed #c8a14a;
  border-radius: 4px;
  font-family: "STKaiti", "KaiTi", serif;
}

/* 宜 / 忌 */
.result-yi-ji {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 12px;
  border-top: 1px dashed #c8a14a;
  border-bottom: 1px dashed #c8a14a;
}
.yj-row { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.yj-label {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
  color: #fff5d0;
}
.yj-yi { background: #b8261c; }
.yj-ji { background: #3a3a3a; }
.yj-text { letter-spacing: 2px; color: #6a0c06; font-family: "STKaiti", "KaiTi", serif; }

.result-close {
  margin-top: 22px;
  padding: 12px 28px;
  border-radius: 999px;
  background: #b8261c;
  color: #ffe9a8;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 4px;
  box-shadow: 0 4px 0 #6a0c06;
  padding-left: 32px;
}
.result-close:active { transform: translateY(2px); box-shadow: 0 2px 0 #6a0c06; }

/* ============ 小屏适配 ============ */
@media (max-height: 680px) {
  .top-bar    { padding-top: calc(env(safe-area-inset-top) + 22px); }
  .brand      { font-size: 32px; letter-spacing: 12px; }
  .tube-wrap  { width: 160px; height: 230px; margin-top: 24px; }
  .tube-rim   { width: 168px; height: 22px; }
  .tube-rim-inner { width: 148px; height: 12px; }
  .tube-body  { width: 158px; height: 176px; top: 28px; }
  .tube-foot  { width: 168px; height: 14px; }
  .tube-base  { width: 180px; height: 12px; }
  .tube-medallion { width: 92px; height: 92px; }
  .medallion-coin { width: 72px; height: 72px; }
  .medallion-text { font-size: 26px; }
  .shake-btn  { height: 64px; }
  .shake-btn-text { font-size: 22px; letter-spacing: 4px; }
  .halo       { width: 280px; height: 280px; }
}
@media (max-height: 580px) {
  .brand      { font-size: 26px; letter-spacing: 8px; }
  .tube-wrap  { width: 140px; height: 200px; margin-top: 20px; }
  .tube-rim   { width: 148px; height: 20px; }
  .tube-body  { width: 138px; height: 152px; }
  .tube-foot  { width: 148px; }
  .tube-base  { width: 160px; }
  .tube-medallion { width: 78px; height: 78px; }
  .medallion-coin { width: 60px; height: 60px; }
  .medallion-text { font-size: 22px; }
  .rope-wrap  { height: 60px; }
  .shake-btn  { height: 58px; }
  .shake-btn-text { font-size: 20px; letter-spacing: 3px; }
  .bottom-bar { padding-bottom: calc(env(safe-area-inset-bottom) + 22px); }
}

/* ============================================== */
/* ============ Step 3: 海报模板 / 弹窗 ============ */
/* ============================================== */

/* ----- 操作按钮组 ----- */
.result-actions {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.btn-share {
  width: 80%;
  padding: 13px 20px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffd24a 0%, #f5a623 100%);
  color: #6a0c06;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 3px;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  box-shadow:
    0 0 0 2px #b8261c,
    0 4px 0 #8a1a0e,
    0 8px 18px rgba(0,0,0,.35);
  font-family: "STKaiti","KaiTi",serif;
}
.btn-share:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 2px #b8261c, 0 2px 0 #8a1a0e, 0 4px 10px rgba(0,0,0,.35);
}
.btn-share-icon { font-size: 16px; }

.result-actions .result-close {
  margin-top: 0;
  background: transparent;
  color: #b8261c;
  box-shadow: none;
  border: 1px solid #b8261c;
  padding: 10px 24px;
  font-size: 13px;
}
.result-actions .result-close:active { background: #b8261c11; transform: none; }

/* ============ 海报展示弹窗 ============ */
.poster-mask {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.85);
  display: flex; align-items: center; justify-content: center;
  z-index: 200;
  animation: maskFade .25s ease both;
  overflow-y: auto;
  padding: 24px 16px;
}
.poster-mask[hidden] { display: none; }

.poster-loading { text-align: center; color: #ffe9a8; }
.loading-spinner {
  width: 44px; height: 44px;
  margin: 0 auto;
  border: 3px solid #ffe9a833;
  border-top-color: #ffe9a8;
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text {
  margin-top: 12px;
  font-size: 14px;
  letter-spacing: 4px;
  color: #ffe9a8cc;
}

.poster-viewer {
  width: 100%;
  max-width: 360px;
  text-align: center;
  margin: auto 0;
}
.poster-viewer[hidden] { display: none; }
.poster-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0 16px 40px rgba(0,0,0,.6);
  /* —— 长按保存关键属性，覆盖全局禁用 —— */
  -webkit-touch-callout: default !important; /* 允许 iOS 长按菜单 */
  -webkit-user-select: auto !important;       /* 解除全局 none */
  user-select: auto !important;
  -webkit-user-drag: auto;                    /* 允许长按选中 */
  pointer-events: auto;
  touch-action: manipulation;                 /* 抑制双击缩放，但保留长按 */
  -webkit-tap-highlight-color: transparent;
}
.poster-tip {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 999px;
  background: #ffe9a8;
  color: #6a0c06;
  font-size: 13px;
  letter-spacing: 1px;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: "STKaiti","KaiTi",serif;
  font-weight: 700;
  animation: tipPulse 1.6s ease-in-out infinite;
}
@keyframes tipPulse {
  0%,100% { transform: scale(1);    box-shadow: 0 0 0 0 #ffe9a866; }
  50%     { transform: scale(1.04); box-shadow: 0 0 0 8px #ffe9a800; }
}
.poster-tip-icon { font-size: 14px; }

.poster-close {
  margin-top: 14px;
  padding: 9px 30px;
  font-size: 13px;
  color: #ffe9a8;
  letter-spacing: 6px;
  border: 1px solid #ffe9a866;
  border-radius: 999px;
  background: transparent;
  padding-left: 36px;
}
.poster-close:active { background: #ffe9a811; }

/* ============ 海报模板（离屏） ============ */
.poster-template {
  position: fixed;
  top: 0;
  left: -9999px;
  width: 375px;
  z-index: -1;
  pointer-events: none;
}
.poster-card {
  width: 375px;
  background: #fff5d0;
  font-family: "STKaiti","KaiTi","PingFang SC",serif;
  color: #6a0c06;
  position: relative;
  box-sizing: border-box;
}

/* 头部 朱红 */
.poster-header {
  background: #b8261c;
  padding: 22px 0 16px;
  text-align: center;
  position: relative;
  color: #ffe9a8;
}
.poster-pattern-top, .poster-pattern-bottom {
  position: absolute;
  left: 12px; right: 12px;
  height: 5px;
  background: repeating-linear-gradient(90deg,
    #ffe9a8 0, #ffe9a8 8px,
    transparent 8px, transparent 14px);
  opacity: .8;
}
.poster-pattern-top    { top: 8px; }
.poster-pattern-bottom { bottom: 8px; }
.poster-brand {
  font-size: 30px;
  letter-spacing: 12px;
  font-weight: 900;
  padding-left: 12px;
  margin: 4px 0 4px;
  text-shadow: 0 2px 0 #5a0c06;
}
.poster-brand-sub {
  font-size: 12px;
  letter-spacing: 5px;
  color: #ffe9a8cc;
}

/* 主体 米黄 */
.poster-body {
  padding: 18px 22px 16px;
  text-align: center;
  background: linear-gradient(180deg, #fff5d0 0%, #ffe9a8 100%);
  position: relative;
}
.poster-date-solar {
  font-size: 12px;
  letter-spacing: 2px;
  color: #8a3a22;
}
.poster-date-lunar {
  margin-top: 3px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 4px;
  color: #6a0c06;
}
.poster-title {
  margin-top: 10px;
  font-size: 42px;
  font-weight: 900;
  letter-spacing: 12px;
  color: #b8261c;
  padding-left: 12px;
  text-shadow: 0 2px 0 #fff5d0;
  font-family: "STKaiti","KaiTi",serif;
  line-height: 1;
}
.poster-seal-wrap { margin-top: 8px; }
.poster-seal-stamp {
  display: inline-block;
  padding: 6px 12px;
  background: #b8261c;
  color: #ffe9a8;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 4px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px #ffe9a8;
  transform: rotate(-4deg);
  font-family: "STKaiti","KaiTi",serif;
  padding-left: 16px;
}
.poster-poem {
  margin: 14px auto 12px;
  font-size: 19px;
  line-height: 1.55;
  letter-spacing: 3px;
  font-weight: 700;
  color: #6a0c06;
  font-family: "STKaiti","KaiTi",serif;
  max-width: 280px;
}
.poster-oracle {
  display: inline-block;
  padding: 6px 14px;
  font-size: 13px;
  letter-spacing: 4px;
  color: #8a1a0e;
  background: #fff5d0;
  border: 1px dashed #c8a14a;
  border-radius: 4px;
  margin-bottom: 14px;
  font-family: "STKaiti","KaiTi",serif;
}
.poster-yi-ji {
  display: flex; flex-direction: column; gap: 7px;
  padding: 11px 14px;
  border-top: 1px dashed #c8a14a;
  border-bottom: 1px dashed #c8a14a;
}
.poster-yj-row { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.poster-yj-label {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
  color: #fff5d0;
}
.poster-yj-yi { background: #b8261c; }
.poster-yj-ji { background: #3a3a3a; }
.poster-yj-text {
  letter-spacing: 3px;
  color: #6a0c06;
  font-family: "STKaiti","KaiTi",serif;
  font-weight: 700;
}

/* 底部 二维码 */
.poster-footer {
  background: #fff5d0;
  padding: 12px 22px 18px;
}
.poster-footer-divider {
  height: 5px;
  background: repeating-linear-gradient(90deg,
    #b8261c 0, #b8261c 8px,
    transparent 8px, transparent 14px);
  opacity: .85;
  margin-bottom: 12px;
}
.poster-qr-row { display: flex; align-items: center; gap: 12px; }
.poster-qr-text { flex: 1; min-width: 0; text-align: left; }
.poster-qr-title {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 5px;
  color: #b8261c;
  padding-left: 5px;
  font-family: "STKaiti","KaiTi",serif;
}
.poster-qr-desc {
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: 2px;
  color: #8a3a22;
}
.poster-qr-tip {
  margin-top: 7px;
  font-size: 10px;
  letter-spacing: 1px;
  color: #8a1a0e;
  line-height: 1.55;
  background: #ffe9a8;
  padding: 5px 7px;
  border-radius: 4px;
  display: inline-block;
}
.poster-qr-img-wrap {
  flex: 0 0 auto;
  width: 84px; height: 84px;
  padding: 3px;
  background: #fff;
  border: 1px solid #c8a14a;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.poster-qr-img {
  width: 100%; height: 100%;
  display: block;
  object-fit: contain;
}

/* ============================================ */
/* ============ Step 4: Toast / 短摇 ============ */
/* ============================================ */
.tube.shaking-quick {
  animation: tubeShakeQuick 0.6s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes tubeShakeQuick {
  0%, 100% { transform: rotate(0deg); }
  20%      { transform: rotate(-10deg); }
  45%      { transform: rotate(8deg); }
  70%      { transform: rotate(-5deg); }
  90%      { transform: rotate(2deg); }
}
.tube.shaking-quick .stick { animation: stickJitter 0.18s linear infinite; }

/* Toast：朱红胶囊从顶部下滑出现 */
.toast {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 30px);
  left: 50%;
  transform: translate(-50%, -50px);
  padding: 12px 24px;
  background: rgba(184, 38, 28, .95);
  color: #ffe9a8;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 4px;
  border-radius: 999px;
  box-shadow:
    0 0 0 1px #ffe9a8,
    0 8px 24px rgba(0,0,0,.45);
  font-family: "STKaiti", "KaiTi", serif;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: transform .35s cubic-bezier(.2,1.2,.3,1), opacity .25s ease;
  white-space: nowrap;
  padding-left: 28px; /* letter-spacing 视觉补偿 */
}
.toast.toast-show {
  transform: translate(-50%, 0);
  opacity: 1;
}


/* ============================================== */
/* ============ 店号落款（首页 + 海报） ============ */
/* ============================================== */

/* ----- 首页落款（底部 tip 下方） ----- */
.signature {
  margin: 10px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  opacity: .82;
}
.sig-line {
  flex: 0 0 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #f5d77a, transparent);
}
.sig-text {
  font-family: "STKaiti","KaiTi",serif;
  font-size: 12px;
  letter-spacing: 5px;
  color: #f5d77a;
  text-shadow: 0 1px 0 #5a0c06;
  padding-left: 5px;
}

/* 小屏适配 */
@media (max-height: 680px) {
  .signature  { margin-top: 8px; }
  .sig-text   { font-size: 11px; letter-spacing: 4px; }
  .sig-line   { flex-basis: 22px; }
}

/* ----- 海报落款（footer 二维码下方） ----- */
.poster-signature {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.poster-sig-line {
  flex: 0 0 36px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #b8261c, transparent);
  opacity: .55;
}
.poster-sig-text {
  font-family: "STKaiti","KaiTi",serif;
  font-size: 11px;
  letter-spacing: 4px;
  color: #b8261c;
  font-weight: 700;
  padding-left: 4px;
  opacity: .88;
}

/* ============ 签诗双行展示 ============ */
/* 用于将一句两段签诗（含中文逗号）的上下两段在视觉上分行 */
.result-poem .poem-line,
.poster-poem .poem-line {
  display: block;
  text-align: center;
}
/* 上句到下句间距 */
.result-poem .poem-line + .poem-line,
.poster-poem .poem-line + .poem-line {
  margin-top: 2px;
}