/* =========================================================
   🧊 玻璃输入区（修正版：完美居中 + 无左右外溢）
========================================================= */
#inputSection {
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;

  /* ✅ 改这里：百分比宽度容易误差，改成精确算法 */
  width: min(100%, 380px);
  max-width: 92%;
  margin: 0 auto 80px auto;
  padding: 26px 20px;

  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);

  /* ✅ 改：去掉 inset 外扩导致的错位 */
  box-shadow: 0 0 18px rgba(0,255,255,0.08) inset;
  animation: glowPanel 6s ease-in-out infinite alternate;
  box-sizing: border-box;
}

@keyframes glowPanel {
  from { box-shadow: inset 0 0 15px rgba(0,255,255,0.08); }
  to { box-shadow: inset 0 0 25px rgba(0,255,255,0.22); }
}

/* =========================================================
   💡 输入框（左右对齐 + 自适应）
========================================================= */
input {
  display: block;
  margin: 0 auto 1.2rem auto;
  padding: 0.8rem 1.2rem;
  font-size: 1.05rem;
  border-radius: 14px;

  /* ✅ 改这里：固定 100% 宽 + 父容器限制，完全不偏 */
  width: 100%;
  max-width: 320px;

  border: 1px solid rgba(0,255,255,0.3);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-light);
  outline: none;
  text-align: center;
  box-shadow: inset 0 0 8px rgba(0,255,255,0.15);
  transition: all 0.25s ease;
  box-sizing: border-box;
}
input:focus {
  border-color: var(--blue-light);
  box-shadow: 0 0 12px rgba(0,255,255,0.4);
  background: rgba(255, 255, 255, 0.12);
}

/* =========================================================
   🎛 按钮统一基础
========================================================= */
button {
  display: block;
  margin: 1rem auto 0 auto;
  border: none;
  border-radius: 16px;
  padding: 0.8rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: 0.3s ease;
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 240px; /* ✅ 保持视觉统一居中 */
  box-sizing: border-box;
}

/* 💠 蓝光按钮 */
#verifyBtn {
  background: linear-gradient(90deg, var(--blue-light), var(--blue-deep));
  box-shadow: 0 0 18px rgba(0, 255, 255, 0.25);
}
#verifyBtn:hover {
  box-shadow: 0 0 25px rgba(0,255,255,0.6);
  transform: scale(1.05);
}

/* ⚡ 电光紫主要按钮（抽奖） */
#start {
  background: linear-gradient(90deg, var(--purple-electric), var(--blue-light));
  box-shadow: 0 0 25px rgba(155, 50, 255, 0.35);
}
#start::before {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 50%; height: 100%;
  background: linear-gradient(120deg, rgba(255,255,255,0.4), transparent);
  transform: skewX(-25deg);
  transition: 0.6s;
}
#start:hover::before { left: 120%; }
#start:hover { transform: scale(1.05); }

/* 💫 蓝金继续按钮 */
#againBtn {
  background: linear-gradient(90deg, var(--blue-deep), var(--gold));
  box-shadow: 0 0 25px rgba(255,215,0,0.25);
}
#againBtn:hover {
  box-shadow: 0 0 35px rgba(255,215,0,0.6);
}

/* ⚙️ 灰金信息按钮 */
#rewardListBtn, #rewardListBtn2 {
  background: linear-gradient(90deg, #3a3f45, #555b66);
  color: #e6e6e6;
  box-shadow: inset 0 0 10px rgba(255,215,0,0.1);
  width: 100%;
  max-width: 240px;
}
#rewardListBtn:hover {
  background: linear-gradient(90deg, #4a5058, #666c77);
}

/* =========================================================
   📱 手机端微调
========================================================= */
@media (max-width: 768px) {
  #inputSection {
    width: 92%;
    padding: 22px 16px;
    margin-bottom: 60px;
  }
  input {
    font-size: 1rem;
  }
  button {
    font-size: 0.95rem;
    max-width: 220px;
  }
}
/* =========================================================
   ⚡ 抽奖数字特效 — 电光立体版
   （厚度阴影 + 内部高压流光 + 空间深度）
========================================================= */
#number {
  position: relative;
  display: inline-block;
  font-family: var(--font-title);
  font-size: clamp(3.2rem, 7vw, 4.8rem);
  color: #bff7ff; /* 基底蓝白 */
  letter-spacing: 2px;
  text-shadow:
    0 0 4px #00ffff,
    0 0 8px #00e0ff,
    0 0 12px #0099ff,
    0 0 25px rgba(0,200,255,0.8),
    0 0 60px rgba(155,77,255,0.6),
    2px 2px 3px rgba(0,0,0,0.6); /* 内阴影制造厚度 */
  animation: numPulse3D 3.5s ease-in-out infinite alternate;
  perspective: 800px;
  transform-style: preserve-3d;
  mix-blend-mode: screen;
}

/* 💫 内部能量脉冲（深层光感） */
#number::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 12px;
  background: radial-gradient(circle at 50% 50%,
    rgba(0,255,255,0.15) 0%,
    rgba(155,77,255,0.1) 45%,
    transparent 100%);
  filter: blur(8px);
  animation: numCorePulse 5s ease-in-out infinite alternate;
  pointer-events: none;
}

/* 🌠 数字呼吸立体变化 */
@keyframes numPulse3D {
  0% {
    color: #aaf0ff;
    text-shadow:
      0 0 3px #00ffff,
      0 0 10px #00d9ff,
      0 0 25px #0077ff,
      0 0 50px rgba(155,77,255,0.5),
      2px 2px 5px rgba(0,0,0,0.7);
    transform: translateZ(0px) scale(0.98) rotateX(2deg);
    opacity: 0.85;
  }
  50% {
    color: #dfffff;
    text-shadow:
      0 0 6px #00ffff,
      0 0 15px #00eaff,
      0 0 35px #0099ff,
      0 0 70px rgba(155,77,255,0.7),
      2px 2px 6px rgba(0,0,0,0.5);
    transform: translateZ(10px) scale(1.02) rotateX(-2deg);
    opacity: 1;
  }
  100% {
    color: #bff7ff;
    text-shadow:
      0 0 5px #00eaff,
      0 0 20px #00ccff,
      0 0 40px #0066ff,
      0 0 80px rgba(155,77,255,0.5),
      2px 2px 5px rgba(0,0,0,0.6);
    transform: translateZ(0px) scale(1);
    opacity: 0.9;
  }
}

/* 💥 能量核心闪烁 */
@keyframes numCorePulse {
  0% { opacity: 0.25; filter: blur(8px) brightness(1.1); }
  100% { opacity: 0.6; filter: blur(10px) brightness(1.4); }
}