/* SIAC 官方投票 · 活动浮窗（参考礼品活动稿，桌面 + 手机通用） */
#promo-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  /* 整体滚动 + margin:auto 居中：修复某些浏览器弹窗不居中、要下滑很久才看到；
     滚动条落在深色遮罩上，卡片内部不再出现白色滚动条 */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  background: rgba(40, 15, 60, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.28s ease;
}
#promo-overlay.show { opacity: 1; }

.promo-card {
  position: relative;
  margin: auto;
  width: 100%;
  max-width: 460px;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 24px 64px rgba(60, 20, 90, 0.4);
  transform: translateY(18px) scale(0.98);
  transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.3, 1);
  overscroll-behavior: contain;
}
#promo-overlay.show .promo-card { transform: none; }

.promo-lang {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  display: flex;
  gap: 2px;
  padding: 3px;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  backdrop-filter: blur(2px);
}
.promo-lang button {
  border: none;
  background: transparent;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
  padding: 3px 11px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.promo-lang button.active {
  background: #fff;
  color: #7c3aed;
}

.promo-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  color: #fff;
  font-size: 22px;
  line-height: 34px;
  cursor: pointer;
  z-index: 3;
  transition: background 0.15s ease;
}
.promo-close:hover { background: rgba(255, 255, 255, 0.5); }

/* ── 头部 ── */
.promo-head {
  position: relative;
  padding: 26px 22px 24px;
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, #a15be0 0%, #7c3aed 55%, #b23ea8 100%);
  border-radius: 24px 24px 0 0;
  overflow: hidden;
}
.promo-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 214, 102, 0.5) 0, transparent 22%),
    radial-gradient(circle at 88% 12%, rgba(255, 122, 205, 0.5) 0, transparent 24%),
    radial-gradient(circle at 78% 82%, rgba(120, 220, 255, 0.35) 0, transparent 22%);
  pointer-events: none;
}
.promo-badge {
  position: relative;
  display: inline-block;
  padding: 5px 18px;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #fff;
  background: linear-gradient(135deg, #ff7ac5, #e0559f);
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(224, 85, 159, 0.4);
}
.promo-title {
  position: relative;
  margin: 0;
  font-size: 27px;
  font-weight: 900;
  line-height: 1.28;
  text-shadow: 0 2px 8px rgba(60, 10, 90, 0.35);
}
.promo-hl {
  color: #ffe14d;
  text-shadow: 0 2px 6px rgba(120, 60, 0, 0.3);
}
.promo-ribbon {
  position: absolute;
  top: 58px;
  right: -2px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px 7px 12px;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.2;
  color: #fff;
  text-align: left;
  background: linear-gradient(135deg, #2ecf6b, #12b257);
  border-radius: 12px 0 0 12px;
  box-shadow: 0 6px 14px rgba(18, 178, 87, 0.45);
}
.promo-ribbon span { font-size: 18px; }
.promo-sub {
  position: relative;
  margin: 14px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  opacity: 0.96;
}

/* ── 主体 ── */
.promo-body { padding: 20px 20px 22px; }

/* 三步 */
.promo-steps {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 18px;
}
.promo-step {
  position: relative;
  padding: 26px 8px 12px;
  background: #faf7ff;
  border: 1px solid #efe6fb;
  border-radius: 14px;
  text-align: center;
}
.promo-step-no {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 11px;
  font-weight: 900;
  color: #fff;
  background: #7c3aed;
  padding: 2px 7px;
  border-radius: 6px;
}
.promo-step-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin: 0 auto 8px;
  font-size: 24px;
  border-radius: 12px;
  background: linear-gradient(135deg, #f3ecff, #ede2ff);
}
.promo-step-icon svg { width: 30px; height: 30px; }
.promo-step-title { font-size: 13px; font-weight: 800; color: #2a1a44; margin-bottom: 4px; }
.promo-step-desc { font-size: 11px; line-height: 1.45; color: #7a6c92; margin: 0; }

/* 奖池横幅 */
.promo-trophy {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  margin-bottom: 20px;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #9d4edd);
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.28);
}
.promo-trophy-emoji { font-size: 42px; line-height: 1; flex: 0 0 auto; }
.promo-trophy-text { font-size: 13.5px; line-height: 1.55; font-weight: 600; }
.promo-hl2 { color: #ffe14d; font-weight: 900; }
.promo-trophy-note {
  margin-top: 8px;
  padding: 6px 10px;
  font-size: 12.5px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #ff7ac5, #e0559f);
  border-radius: 8px;
  display: inline-block;
}

/* 礼品 */
.promo-gifts-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 900;
  color: #7c3aed;
}
.promo-gifts-title::before,
.promo-gifts-title::after {
  content: "";
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #f0c6e8, transparent);
}
.promo-gifts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.promo-gift {
  position: relative;
  padding: 10px 8px 12px;
  border: 1.5px solid #f3e2ee;
  border-radius: 16px;
  background: linear-gradient(180deg, #fff, #fdf5fb);
  text-align: center;
}
.promo-gift-no {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 24px;
  line-height: 24px;
  font-size: 13px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, #ff7ac5, #e0559f);
  border-radius: 50%;
  box-shadow: 0 3px 8px rgba(224, 85, 159, 0.4);
}
.promo-gift-media {
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 6px 0 8px;
  border-radius: 12px;
  overflow: hidden;
  background: #f6f0f4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
}
.promo-gift-media img { width: 100%; height: 100%; object-fit: cover; }
.promo-gift-name { font-size: 12.5px; font-weight: 700; color: #4a3555; }

/* CTA + 免责 */
.promo-cta {
  width: 100%;
  padding: 15px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #25d366, #009e63);
  color: #fff;
  font-size: 17px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0, 158, 99, 0.36);
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.promo-cta:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(0, 158, 99, 0.46); }
.promo-cta:active { transform: translateY(0); }
.promo-disclaimer {
  margin: 12px 0 2px;
  text-align: center;
  font-size: 10.5px;
  line-height: 1.5;
  color: #a99bb8;
}

@media (max-width: 400px) {
  .promo-title { font-size: 23px; }
  .promo-ribbon { top: 50px; font-size: 11px; padding: 6px 10px; }
  .promo-step { padding: 24px 5px 10px; }
  .promo-step-desc { font-size: 10px; }
  .promo-trophy-emoji { font-size: 34px; }
}