/* 定义CSS变量，完全保留原版 + 新增移动端缩放变量 */
:root {
  --deng-main-color: rgba(216, 0, 15, 0.8);
  --deng-border-color: #dc8f03;
  --deng-light-color: #ffa500;
  --deng-shadow-color1: rgba(250, 108, 0, 1);
  --deng-shadow-color2: rgba(252, 144, 61, 1);
  --deng-text-color: #dc8f03;
  --deng-animation-speed: 3s;
  --deng-animation-speed-slow: 5s;
  --deng-swing-angle: 10deg;
  --mobile-scale: 0.7; /* 移动端整体缩放0.7倍，可按需调整 */
}

/* 基础灯笼容器样式 - 完全保留原版 */
.deng-box {
  position: fixed;
  top: -30px;
  z-index: 9999;
  pointer-events: none;
}

/* 左侧灯笼位置 - 原版值 */
.deng-box--left {
  left: -20px;
}

/* 右侧灯笼位置 - 原版值 */
.deng-box--right {
  right: -20px;
}

/* 灯笼核心样式 - 完全保留原版 */
.deng {
  position: relative;
  width: 120px;
  height: 90px;
  margin: 50px;
  background: var(--deng-main-color);
  border-radius: 50% 50%;
  transform-origin: 50% -100px;
  animation: swing var(--deng-animation-speed) infinite ease-in-out;
  box-shadow: -5px 5px 50px 4px var(--deng-shadow-color1);
  will-change: transform;
  backface-visibility: hidden;
  pointer-events: inherit;
}

/* 第二个灯笼的慢动画 - 原版 */
.deng--slow {
  animation-duration: var(--deng-animation-speed-slow);
  box-shadow: -5px 5px 30px 4px var(--deng-shadow-color2);
}

/* 灯笼内部装饰 - 1:1还原原版纹理粗细/位置 */
.deng-a {
  width: 100px;
  height: 90px;
  background: rgba(216, 0, 15, 0.1);
  margin: 12px 8px 8px 10px;
  border-radius: 50% 50%;
  border: 2px solid var(--deng-border-color);
}

.deng-b {
  width: 45px;
  height: 90px;
  background: rgba(216, 0, 15, 0.1);
  margin: -4px 8px 8px 26px;
  border-radius: 50% 50%;
  border: 2px solid var(--deng-border-color);
}

/* 灯笼挂线 - 1:1还原原版位置 */
.xian {
  position: absolute;
  top: -20px;
  left: 60px;
  width: 2px;
  height: 20px;
  background: var(--deng-border-color);
}

/* 灯笼坠子 - 1:1还原原版位置 */
.shui-a {
  position: relative;
  width: 5px;
  height: 20px;
  margin: -5px 0 0 59px;
  animation: swing 4s infinite ease-in-out;
  transform-origin: 50% -45px;
  background: var(--deng-light-color);
  border-radius: 0 0 5px 5px;
  will-change: transform;
  backface-visibility: hidden;
}

/* 坠子小球 - 原版位置 */
.shui-b {
  position: absolute;
  top: 14px;
  left: -2px;
  width: 10px;
  height: 10px;
  background: var(--deng-border-color);
  border-radius: 50%;
}

/* 坠子条 - 原版位置 */
.shui-c {
  position: absolute;
  top: 18px;
  left: -2px;
  width: 10px;
  height: 35px;
  background: var(--deng-light-color);
  border-radius: 0 0 0 5px;
}

/* 灯笼上下装饰条 - 完全保留原版 */
.deng::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 29px;
  height: 12px;
  width: 60px;
  display: block;
  z-index: 1;
  border-radius: 5px 5px 0 0;
  border: solid 1px var(--deng-border-color);
  background: linear-gradient(to right, var(--deng-border-color), var(--deng-light-color), var(--deng-border-color), var(--deng-light-color), var(--deng-border-color));
}

.deng::after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: 30px;
  height: 12px;
  width: 60px;
  display: block;
  z-index: 1;
  border-radius: 0 0 5px 5px;
  border: solid 1px var(--deng-border-color);
  background: linear-gradient(to right, var(--deng-border-color), var(--deng-light-color), var(--deng-border-color), var(--deng-light-color), var(--deng-border-color));
}

/* 灯笼文字 - 完全保留原版 */
.deng-t {
  font-family: 华文行楷, Arial, "Lucida Grande", Tahoma, sans-serif;
  font-size: 2.5rem;
  color: var(--deng-text-color);
  font-weight: bold;
  line-height: 90px;
  text-align: center;
  pointer-events: none;
}

/* 夜间模式适配 - 原版 */
.night .deng-t,
.night .deng-box {
  background: transparent !important;
}

/* 摆动动画 - 原版 */
@keyframes swing {
  0% { transform: rotate(calc(var(--deng-swing-angle) * -1)); }
  50% { transform: rotate(var(--deng-swing-angle)); }
  100% { transform: rotate(calc(var(--deng-swing-angle) * -1)); }
}

/* ================= 移动端精准适配（等比缩小） ================= */
@media screen and (max-width: 768px) {
  /* 容器位置微调，避免超出屏幕 */
  .deng-box {
    top: calc(-30px * var(--mobile-scale));
  }
  .deng-box--left {
    left: calc(-20px * var(--mobile-scale));
  }
  .deng-box--right {
    right: calc(-20px * var(--mobile-scale));
  }

  /* 灯笼主体等比缩小 */
  .deng {
    width: calc(120px * var(--mobile-scale));
    height: calc(90px * var(--mobile-scale));
    margin: calc(50px * var(--mobile-scale));
    transform-origin: 50% calc(-100px * var(--mobile-scale));
    box-shadow: -3px 3px calc(50px * var(--mobile-scale)) calc(4px * var(--mobile-scale)) var(--deng-shadow-color1);
  }
  .deng--slow {
    box-shadow: -3px 3px calc(30px * var(--mobile-scale)) calc(4px * var(--mobile-scale)) var(--deng-shadow-color2);
  }

  /* 纹理等比缩小 + 粗细同步 + 位置校准 */
  .deng-a {
    width: calc(100px * var(--mobile-scale));
    height: calc(90px * var(--mobile-scale));
    margin: calc(12px * var(--mobile-scale)) calc(8px * var(--mobile-scale)) calc(8px * var(--mobile-scale)) calc(10px * var(--mobile-scale));
    border-width: calc(2px * var(--mobile-scale));
  }
  .deng-b {
    width: calc(45px * var(--mobile-scale));
    height: calc(90px * var(--mobile-scale));
    margin: calc(-4px * var(--mobile-scale)) calc(8px * var(--mobile-scale)) calc(8px * var(--mobile-scale)) calc(26px * var(--mobile-scale));
    border-width: calc(2px * var(--mobile-scale));
  }

  /* 吊绳等比缩小 + 位置校准 */
  .xian {
    top: calc(-20px * var(--mobile-scale));
    left: calc(60px * var(--mobile-scale));
    width: calc(2px * var(--mobile-scale));
    height: calc(20px * var(--mobile-scale));
  }

  /* 坠子等比缩小 + 位置校准 */
  .shui-a {
    width: calc(5px * var(--mobile-scale));
    height: calc(20px * var(--mobile-scale));
    margin: calc(-5px * var(--mobile-scale)) 0 0 calc(59px * var(--mobile-scale));
    transform-origin: 50% calc(-45px * var(--mobile-scale));
  }
  .shui-b {
    top: calc(14px * var(--mobile-scale));
    left: calc(-2px * var(--mobile-scale));
    width: calc(10px * var(--mobile-scale));
    height: calc(10px * var(--mobile-scale));
  }
  .shui-c {
    top: calc(18px * var(--mobile-scale));
    left: calc(-2px * var(--mobile-scale));
    width: calc(10px * var(--mobile-scale));
    height: calc(35px * var(--mobile-scale));
  }

  /* 装饰条等比缩小 + 位置校准 */
  .deng::before {
    top: calc(-7px * var(--mobile-scale));
    left: calc(29px * var(--mobile-scale));
    height: calc(12px * var(--mobile-scale));
    width: calc(60px * var(--mobile-scale));
    border-width: calc(1px * var(--mobile-scale));
  }
  .deng::after {
    bottom: calc(-7px * var(--mobile-scale));
    left: calc(30px * var(--mobile-scale));
    height: calc(12px * var(--mobile-scale));
    width: calc(60px * var(--mobile-scale));
    border-width: calc(1px * var(--mobile-scale));
  }

  /* 文字等比缩小 + 行高校准 */
  .deng-t {
    font-size: calc(2.5rem * var(--mobile-scale));
    line-height: calc(90px * var(--mobile-scale));
  }
}

/* 小屏手机额外微调（缩放0.6倍） */
@media screen and (max-width: 480px) {
  :root {
    --mobile-scale: 0.6; /* 小屏手机缩放到0.6倍 */
  }
}