/* ============================================================
   每日免费抽奖 · 大转盘页面样式
   风格：深红丝绒底 + 香槟金描边
   ============================================================ */

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "MiSans",
  "HarmonyOS Sans SC", "HONOR Sans CN", "Source Han Sans SC", "Noto Sans SC",
  "Microsoft YaHei UI", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "tnum" 1;
  color: #f9ecd2;
  background-color: #4a0813;
  background-image:
      radial-gradient(110% 62% at 50% -6%, rgba(214, 58, 78, 1) 0%, rgba(152, 26, 46, 0.6) 38%, rgba(74, 8, 19, 0) 72%),
      radial-gradient(56% 34% at 50% 6%, rgba(255, 196, 120, 0.3) 0%, rgba(255, 196, 120, 0) 70%),
      radial-gradient(80% 50% at 12% 18%, rgba(255, 130, 140, 0.2) 0%, rgba(255, 130, 140, 0) 60%),
      radial-gradient(90% 55% at 92% 76%, rgba(255, 176, 104, 0.17) 0%, rgba(255, 176, 104, 0) 62%),
      linear-gradient(180deg, #861626 0%, #61101c 46%, #3d0510 100%);
  background-attachment: fixed;
  overflow-x: hidden;
}

/* 丝绸质感叠加 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
      repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.035) 0 1px, rgba(255, 255, 255, 0) 1px 9px),
      repeating-linear-gradient(18deg, rgba(0, 0, 0, 0.06) 0 2px, rgba(0, 0, 0, 0) 2px 14px);
  mix-blend-mode: soft-light;
  z-index: 0;
}

.page {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: calc(24px + env(safe-area-inset-top)) clamp(12px, 4vw, 16px) calc(30px + env(safe-area-inset-bottom));
}

/* ---------------- 标题区 ---------------- */
.hero {
  text-align: center;
  padding-top: 4px;
}

.hero-title {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "MiSans",
  "HarmonyOS Sans SC", "Source Han Sans SC", "Noto Sans SC",
  "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  font-size: clamp(30px, 10.2vw, 40px);
  line-height: 1.18;
  font-weight: 900;
  letter-spacing: clamp(3px, 1.55vw, 6px);
  text-indent: clamp(3px, 1.55vw, 6px);
  background: linear-gradient(100deg, #ffe9b6 6%, #ffd07a 26%, #fffaf0 42%, #ffd888 58%, #eeae55 80%, #ffeec2 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 0.5px rgba(122, 62, 10, 0.18);
  animation: titleShine 6.5s ease-in-out infinite;
  filter:
      drop-shadow(0 2px 0 rgba(122, 16, 28, 0.9))
      drop-shadow(0 4px 6px rgba(60, 4, 10, 0.5))
      drop-shadow(0 14px 26px rgba(0, 0, 0, 0.45));
}

@keyframes titleShine {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.hero-sub {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin: clamp(10px, 3.4vw, 14px) auto 0;
  padding: clamp(6px, 1.8vw, 7px) clamp(14px, 5.2vw, 20px);
  border-radius: 999px;
  font-size: clamp(13px, 3.7vw, 14.5px);
  letter-spacing: 1.2px;
  color: #ffedc8;
  background: linear-gradient(180deg, rgba(255, 226, 170, 0.14), rgba(255, 226, 170, 0.05));
  border: 1px solid rgba(255, 226, 170, 0.3);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 244, 216, 0.18);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.hero-sub b {
  display: inline-block;
  min-width: 15px;
  margin: 0 1px 0 2px;
  font-size: clamp(17px, 5.1vw, 20px);
  line-height: 1;
  color: #ffdf94;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 14px rgba(255, 202, 110, 0.8), 0 1px 0 rgba(90, 30, 0, 0.4);
}

/* 机会用完：文字与数字整体压暗，避免 0 还发着金光 */
.hero-sub.is-empty {
  color: rgba(255, 237, 200, 0.55);
  border-color: rgba(255, 226, 170, 0.14);
}

.hero-sub.is-empty b {
  color: rgba(255, 223, 148, 0.5);
  text-shadow: none;
}

/* ---------------- 转盘 ---------------- */
.wheel-stage {
  position: relative;
  margin: clamp(10px, 3.6vw, 14px) auto 0;
  width: 100%;
  display: flex;
  justify-content: center;
}

.wheel-glow {
  position: absolute;
  inset: 4% 3% 10%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 46%, rgba(255, 196, 120, 0.55) 0%, rgba(255, 140, 80, 0.22) 34%, rgba(255, 120, 60, 0) 66%);
  filter: blur(16px);
  pointer-events: none;
}

.wheel-box {
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1 / 1;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.5));
}

#wheelCanvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* 中心按钮：亮金 + 呼吸光圈 */
.hub {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 29%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  background:
      radial-gradient(circle at 34% 24%, #ffffff 0%, #fffbe8 14%, #ffedb8 34%, #ffd276 56%, #f0ad46 76%, #c9862a 100%);
  box-shadow:
      0 0 0 2px rgba(255, 240, 200, 0.95),
      0 0 0 5px rgba(158, 96, 22, 0.55),
      0 0 0 8px rgba(255, 220, 150, 0.42),
      0 0 30px 6px rgba(255, 186, 82, 0.6),
      0 12px 26px rgba(0, 0, 0, 0.5),
      inset 0 -8px 18px rgba(178, 108, 20, 0.5),
      inset 0 8px 16px rgba(255, 255, 255, 0.95);
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
  overflow: visible;
}

.hub::before {
  /* 呼吸扩散光圈 */
  content: "";
  position: absolute;
  inset: -4%;
  border-radius: 50%;
  border: 2px solid rgba(255, 214, 130, 0.75);
  opacity: 0;
  animation: hubHalo 2.2s ease-out infinite;
  pointer-events: none;
}

@keyframes hubHalo {
  0% { transform: scale(0.96); opacity: 0.85; }
  70% { transform: scale(1.45); opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}

.hub:active {
  transform: translate(-50%, -50%) scale(0.955);
  filter: brightness(1.05);
}

.hub:disabled {
  cursor: default;
}

.hub-ring {
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 247, 216, 0.85);
  box-shadow:
      inset 0 0 10px rgba(255, 246, 210, 0.9),
      0 0 0 1px rgba(176, 110, 26, 0.35);
  pointer-events: none;
}

/* 金属高光扫过（在内层裁剪，不外溢） */
.hub-text {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 2px;
  border-radius: 50%;
  overflow: hidden;
}

.hub-text::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -120%;
  width: 70%;
  height: 240%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.65) 50%, rgba(255, 255, 255, 0) 100%);
  transform: rotate(14deg);
  animation: hubShine 4.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes hubShine {
  0%, 58% { left: -120%; }
  82%, 100% { left: 150%; }
}

.hub-text i {
  font-style: normal;
  font-size: clamp(18px, 5.8vw, 24px);
  font-weight: 900;
  letter-spacing: 3px;
  text-indent: 3px;
  line-height: 1.16;
  background: linear-gradient(180deg, #b3142e 0%, #8d1024 58%, #6a0818 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter:
      drop-shadow(0 1px 0 rgba(255, 252, 236, 1))
      drop-shadow(0 2px 3px rgba(110, 56, 6, 0.5));
}

/* 空闲时持续呼吸发光，转动中（disabled）停止，避免干扰 */
.hub:not(:disabled) {
  animation: hubPulse 1.9s ease-in-out infinite;
}

.hub:disabled {
  animation: none;
}

.hub:disabled::before,
.hub:disabled .hub-text::after {
  animation: none;
  opacity: 0;
}

@keyframes hubPulse {
  0%, 100% {
    box-shadow:
        0 0 0 2px rgba(255, 240, 200, .95),
        0 0 0 5px rgba(158, 96, 22, .55),
        0 0 0 8px rgba(255, 220, 150, .42),
        0 0 30px 6px rgba(255, 186, 82, .6),
        0 12px 26px rgba(0, 0, 0, .5),
        inset 0 -8px 18px rgba(178, 108, 20, .5),
        inset 0 8px 16px rgba(255, 255, 255, .95);
  }
  50% {
    box-shadow:
        0 0 0 2px rgba(255, 248, 220, 1),
        0 0 0 5px rgba(158, 96, 22, .5),
        0 0 0 12px rgba(255, 220, 150, .22),
        0 0 52px 14px rgba(255, 190, 86, .92),
        0 12px 30px rgba(0, 0, 0, .55),
        inset 0 -8px 18px rgba(178, 108, 20, .5),
        inset 0 8px 16px rgba(255, 255, 255, 1);
  }
}

/* ---------------- 活动规则入口 ---------------- */
.rule-entry {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(9px, 3.6vw, 14px);
  margin: clamp(16px, 5.6vw, 22px) 0 clamp(13px, 4.6vw, 18px);
  cursor: pointer;
  user-select: none;
}

.rule-entry .line {
  width: clamp(46px, 19vw, 74px);
  height: 1px;
  background: linear-gradient(90deg, rgba(217, 174, 106, 0) 0%, rgba(217, 174, 106, 0.85) 100%);
}

.rule-entry .line:last-child {
  background: linear-gradient(90deg, rgba(217, 174, 106, 0.85) 0%, rgba(217, 174, 106, 0) 100%);
}

.rule-entry .txt {
  position: relative;
  font-size: clamp(13.5px, 3.9vw, 15px);
  font-weight: 600;
  letter-spacing: 3px;
  color: #ffedbf;
  padding-bottom: 6px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.rule-entry .txt::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 34px;
  height: 2px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: linear-gradient(90deg, #f0c98a, #b57f2f);
}

/* ---------------- 中奖公示 ---------------- */
.board {
  border-radius: 16px;
  padding: 14px 12px 12px;
  background:
      linear-gradient(180deg, rgba(146, 27, 44, 0.92) 0%, rgba(96, 12, 26, 0.95) 55%, rgba(64, 6, 16, 0.96) 100%);
  border: 1px solid rgba(232, 194, 132, 0.42);
  box-shadow:
      0 0 0 3px rgba(255, 226, 176, 0.07),
      0 14px 30px rgba(0, 0, 0, 0.4),
      inset 0 1px 0 rgba(255, 236, 200, 0.22);
}

.board-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-bottom: 10px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(232, 194, 132, 0.22);
}

.board-head h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 3px;
  background: linear-gradient(180deg, #fff3d0, #ffdb96 60%, #e9b96a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}

.board-icon {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background:
      radial-gradient(circle at 30% 28%, #fff6dd 0%, #ffe4a4 45%, #d9a24a 100%);
  box-shadow: 0 0 8px rgba(255, 210, 130, 0.55), inset 0 0 0 1px rgba(140, 84, 16, 0.4);
}

/* 中奖公示：固定高度观察窗，列表匀速向上循环滚动，无滚动条 */
.board-body {
  height: clamp(238px, 96vw, 318px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}

.board-list {
  margin: 0;
  padding: 0;
}

/* 跑马灯轨道：内容渲染两份，translateY(-50%) 无缝循环 */
.board-track {
  animation: boardScroll 26s linear infinite;
  will-change: transform;
}

.board-body:hover .board-track {
  animation-play-state: paused;
}

@keyframes boardScroll {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .board-track { animation: none; }
}

.board-row {
  display: grid;
  grid-template-columns: clamp(58px, 19vw, 74px) 1fr auto;
  align-items: center;
  gap: 8px;
  padding: clamp(7px, 2.3vw, 9px) 10px;
  margin-bottom: 5px;
  border-radius: 9px;
  font-size: clamp(12px, 3.5vw, 13.5px);
  letter-spacing: .2px;
  background: rgba(255, 236, 205, 0.05);
  border: 1px solid rgba(255, 226, 176, 0.07);
  animation: rowIn .38s ease both;
}

.board-row.alt {
  background: rgba(255, 236, 205, 0.09);
}

@keyframes rowIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.board-list .u-name {
  color: #ffe9c2;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-list .u-prize {
  color: #ffdc95;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-list .u-prize em {
  font-style: normal;
  color: rgba(255, 233, 194, 0.62);
  font-size: 12px;
  margin-right: 2px;
}

.board-list .u-time {
  color: rgba(247, 227, 192, 0.62);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.board-list .board-empty {
  display: block;
  text-align: center;
  color: rgba(247, 227, 192, 0.55);
  padding: 26px 0;
  background: none;
  border: 0;
}

.foot-note {
  margin: 18px 0 0;
  text-align: center;
  font-size: 11px;
  letter-spacing: .5px;
  color: rgba(247, 227, 192, 0.38);
}

/* ---------------- 弹窗 ---------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 5vw, 24px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .24s ease, visibility .24s ease;
}

.modal.open {
  opacity: 1;
  visibility: visible;
}

.modal-mask {
  position: absolute;
  inset: 0;
  background: rgba(22, 2, 6, 0.72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.modal-card {
  position: relative;
  width: 100%;
  max-width: min(340px, 92vw);
  border-radius: clamp(16px, 5vw, 20px);
  padding: clamp(20px, 6vw, 26px) clamp(16px, 5.5vw, 22px) clamp(18px, 5.5vw, 22px);
  text-align: center;
  /* 中奖弹窗样式变量：默认值 = 内置「红包金」模板，
     后台「弹窗模板」里配置的配色由 wheel.js 写到 .result-card 上，只影响中奖弹窗 */
  --rm-bg-from: #c4384a;
  --rm-bg-mid: #7e1121;
  --rm-bg-to: #42060f;
  --rm-border: rgba(244, 206, 144, 0.55);
  --rm-title-from: #fffdf7;
  --rm-title-to: #e9b25c;
  --rm-name-from: #fffaea;
  --rm-name-to: #e0a850;
  --rm-desc: rgba(250, 232, 200, 0.78);
  --rm-line: rgba(255, 220, 162, 0.92);
  --rm-btn-from: #fff5d6;
  --rm-btn-mid: #f8d084;
  --rm-btn-to: #dd9f42;
  --rm-btn-text: #6d0d1c;
  background:
      radial-gradient(120% 80% at 50% 0%, var(--rm-bg-from) 0%, var(--rm-bg-mid) 45%, var(--rm-bg-to) 100%);
  border: 1px solid var(--rm-border);
  box-shadow:
      0 0 0 5px rgba(255, 226, 176, 0.06),
      0 26px 60px rgba(0, 0, 0, 0.6),
      inset 0 1px 0 rgba(255, 240, 210, 0.25);
  transform: scale(0.88) translateY(10px);
  transition: transform .32s cubic-bezier(.18, 1.4, .5, 1);
  overflow: hidden;
}

.modal.open .modal-card {
  transform: scale(1) translateY(0);
}

.result-rays {
  position: absolute;
  top: -40%;
  left: 50%;
  width: 220%;
  aspect-ratio: 1 / 1;
  transform: translateX(-50%);
  background: conic-gradient(from 0deg,
  rgba(255, 220, 150, 0.16) 0deg 6deg, rgba(255, 220, 150, 0) 6deg 18deg,
  rgba(255, 220, 150, 0.16) 18deg 24deg, rgba(255, 220, 150, 0) 24deg 36deg,
  rgba(255, 220, 150, 0.16) 36deg 42deg, rgba(255, 220, 150, 0) 42deg 54deg,
  rgba(255, 220, 150, 0.16) 54deg 60deg, rgba(255, 220, 150, 0) 60deg 72deg,
  rgba(255, 220, 150, 0.16) 72deg 78deg, rgba(255, 220, 150, 0) 78deg 90deg,
  rgba(255, 220, 150, 0.16) 90deg 96deg, rgba(255, 220, 150, 0) 96deg 108deg,
  rgba(255, 220, 150, 0.16) 108deg 114deg, rgba(255, 220, 150, 0) 114deg 126deg,
  rgba(255, 220, 150, 0.16) 126deg 132deg, rgba(255, 220, 150, 0) 132deg 144deg);
  animation: spinRays 16s linear infinite;
  opacity: .55;
  pointer-events: none;
}

@keyframes spinRays {
  to { transform: translateX(-50%) rotate(360deg); }
}

/* 中奖标题：纯文字标题 + 两侧渐隐分隔线，不做按钮/胶囊底 */
.result-title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 2px 0 0;
  padding: 0 2px;
  line-height: 1.3;
}

.result-title span {
  position: relative;
  font-size: clamp(17px, 4.9vw, 19px);
  font-weight: 800;
  letter-spacing: clamp(3px, 1.55vw, 6px);
  padding-left: clamp(3px, 1.55vw, 6px); /* 抵消末字 letter-spacing 造成的视觉偏移 */
  background: linear-gradient(180deg, var(--rm-title-from) 0%, var(--rm-title-to) 80%, var(--rm-title-to) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 3px rgba(56, 3, 9, 0.62));
}

.result-title::before,
.result-title::after {
  content: "";
  width: 34px;
  height: 1px;
  border-radius: 1px;
  background: linear-gradient(90deg, rgba(255, 214, 150, 0), var(--rm-line));
}

.result-title::after {
  background: linear-gradient(270deg, rgba(255, 214, 150, 0), var(--rm-line));
}

.result-icon {
  position: relative;
  margin: clamp(12px, 4vw, 16px) auto 10px;
  width: clamp(78px, 26vw, 96px);
  height: clamp(78px, 26vw, 96px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, rgba(255, 232, 184, 0.28) 0%, rgba(255, 200, 130, 0.06) 62%, transparent 72%);
}

.result-icon img {
  width: clamp(64px, 21.5vw, 80px);
  height: clamp(64px, 21.5vw, 80px);
  object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.45));
}

/* 模板装饰开关：关掉放射光 / 关掉图标光晕 */
.result-card.no-rays .result-rays {
  display: none;
}

.result-card.no-glow .result-icon {
  background: none;
}

.result-name {
  position: relative;
  font-size: clamp(20px, 6.2vw, 24px);
  font-weight: 900;
  letter-spacing: 1.5px;
  background: linear-gradient(180deg, var(--rm-name-from), var(--rm-name-to) 52%, var(--rm-name-to));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 2px rgba(60, 4, 10, 0.55));
}

.result-desc {
  position: relative;
  margin: 9px 0 20px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--rm-desc);
  min-height: 20px;
}

.result-actions {
  position: relative;
  display: flex;
  gap: 10px;
}

.btn-primary {
  flex: 1;
  border: 0;
  border-radius: 999px;
  padding: clamp(11px, 3.5vw, 13px) 18px;
  font-size: clamp(14px, 4vw, 15.5px);
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--rm-btn-text);
  cursor: pointer;
  background: linear-gradient(180deg, var(--rm-btn-from) 0%, var(--rm-btn-mid) 42%, var(--rm-btn-to) 100%);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35), 0 0 14px rgba(255, 206, 120, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: transform .1s ease, filter .2s ease;
}

.btn-primary:active {
  transform: scale(0.97);
  filter: brightness(0.96);
}

.btn-primary.wide {
  width: 100%;
  margin-top: 4px;
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  color: rgba(255, 226, 176, 0.7);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

/* 规则弹窗 */
.rule-card {
  text-align: left;
  padding: 24px 20px 20px;
}

.rule-card h3 {
  margin: 0 0 14px;
  text-align: center;
  font-size: clamp(17px, 4.9vw, 19px);
  letter-spacing: clamp(2px, 1vw, 4px);
  font-weight: 800;
  background: linear-gradient(180deg, #fff3d0, #ffdb96 60%, #e9b96a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}

.rule-content {
  max-height: 52vh;
  overflow-y: auto;
  font-size: 13.5px;
  line-height: 1.95;
  color: rgba(250, 234, 206, 0.86);
  white-space: pre-wrap;
  padding-right: 4px;
  margin-bottom: 18px;
}

.rule-content::-webkit-scrollbar {
  width: 4px;
}

.rule-content::-webkit-scrollbar-thumb {
  background: rgba(232, 194, 132, 0.4);
  border-radius: 4px;
}

/* 抽奖机会已用完 */
.chance-card {
  padding: clamp(22px, 6.4vw, 28px) clamp(18px, 5.6vw, 24px) clamp(18px, 5.4vw, 22px);
}

.chance-badge {
  width: clamp(54px, 15vw, 62px);
  height: clamp(54px, 15vw, 62px);
  margin: 0 auto clamp(12px, 3.6vw, 15px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, rgba(255, 232, 184, 0.24) 0%, rgba(255, 201, 128, 0.05) 68%);
  border: 1px solid rgba(244, 206, 144, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 242, 214, 0.22), 0 6px 18px rgba(0, 0, 0, 0.28);
}

.chance-badge svg {
  width: 46%;
  height: 46%;
  fill: #f8ddaa;
  opacity: .94;
}

.chance-title {
  margin: 0;
  font-size: clamp(16px, 4.7vw, 18px);
  font-weight: 800;
  letter-spacing: clamp(1px, .5vw, 2px);
  line-height: 1.4;
  background: linear-gradient(180deg, #fffdf6 0%, #ffeecd 50%, #f0c079 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 2px rgba(56, 3, 9, 0.6));
}

.chance-text {
  margin: clamp(9px, 2.8vw, 12px) 2px 0;
  font-size: clamp(12.5px, 3.6vw, 13.5px);
  line-height: 1.85;
  color: rgba(250, 234, 206, 0.82);
  letter-spacing: .2px;
  text-wrap: pretty;
}

.chance-tip {
  margin: clamp(7px, 2.2vw, 9px) 0 clamp(16px, 4.8vw, 20px);
  font-size: clamp(11px, 3.2vw, 11.5px);
  letter-spacing: .4px;
  color: rgba(250, 234, 206, 0.42);
}

/* ---------------- Toast ---------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 16%;
  transform: translateX(-50%) translateY(10px);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13.5px;
  color: #ffeccb;
  background: rgba(30, 4, 9, 0.9);
  border: 1px solid rgba(244, 206, 144, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 80;
  max-width: 80vw;
  text-align: center;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* 超小屏（≤340px，如 iPhone SE 一代）兜底微调 */
@media (max-width: 340px) {
  .board { padding: 12px 8px 10px; }
  .board-row { padding: 7px 7px; gap: 6px; }
  .hub-text i { font-size: 18px; letter-spacing: 2px; }
  .result-title span { letter-spacing: 2px; }
  .toast { font-size: 12.5px; }
}