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

* {
  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: scroll;
  overflow-x: hidden;
}

/*
 * 丝绸质感叠加。
 * 原来这层用了 mix-blend-mode: soft-light —— 全屏混合层会让底下每一次重绘
 * 都多一遍整屏混合计算，移动端上光这一层就能吃掉不少帧。
 * 现在改成普通叠加（alpha 调低补偿亮度差），视觉几乎无差，成本降到接近 0。
 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
      repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.022) 0 1px, rgba(255, 255, 255, 0) 1px 9px),
      repeating-linear-gradient(18deg, rgba(0, 0, 0, 0.035) 0 2px, rgba(0, 0, 0, 0) 2px 14px);
  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);
  /* 扫光只跑 3 轮就停：常驻 filter + background-position 动画会一直逼着移动端重绘字形 */
  animation: titleShine 6.5s ease-in-out 1.2s 3;
  filter:
      drop-shadow(0 2px 0 rgba(122, 16, 28, 0.9))
      drop-shadow(0 6px 14px rgba(60, 4, 10, 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;
}

/*
 * 盘面投影。
 * 原来挂在 .wheel-box 上是 filter: drop-shadow(...)，canvas 每帧旋转重绘时
 * 这层滤镜都要把整块位图（390pt × 3 倍屏 ≈ 1170px）重新做一次 34px 卷积，
 * 是转盘转动的主要成本。换成同轮廓的独立静态阴影层，只画一次。
 */
.wheel-shadow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

#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 10px rgba(255, 220, 150, 0.34),
      0 0 42px 10px rgba(255, 188, 84, 0.78),
      0 12px 28px rgba(0, 0, 0, 0.52),
      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;
}

/*
 * 金属高光扫过（在内层裁剪，不外溢）
 * 用 transform 位移而不是 left：left 属于布局属性，每次变化都要重新布局，
 * 整条动画链上还会把兄弟节点一起带进 layout。transform 走合成层，零布局成本。
 * 只扫 4 轮就停，避免按钮常驻重绘。
 */
.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: 0;
  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: translateX(-180%) rotate(14deg);
  animation: hubShine 4.2s ease-in-out 0.6s 4;
  pointer-events: none;
}

@keyframes hubShine {
  0%, 58% { transform: translateX(-180%) rotate(14deg); }
  82%, 100% { transform: translateX(215%) rotate(14deg); }
}

.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));
}

/*
 * 这里原来挂着 hubPulse：1.9s 无限循环改 7 层 box-shadow。
 * box-shadow 进不了合成层，等于每帧把整个按钮重绘一遍——页面静止也持续吃主线程。
 * 呼吸感交给 ::before 的 halo（纯 transform + opacity，合成器直接处理）就够了，
 * 静态阴影已取原脉冲的中间态，常亮观感更稳。
 */
.hub:disabled::before,
.hub:disabled .hub-text::after {
  animation: none;
  opacity: 0;
}

/* ---------------- 活动规则入口 ---------------- */
.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);
}

/* 中奖公示：固定高度观察窗，列表匀速向上循环滚动，无滚动条 */
/*
 * 上下渐隐原来是 mask-image —— 遮罩作用在滚动容器上，等于每帧都要对
 * 整块滚动内容重新做一次遮罩合成。换成两个静态渐变条，效果一样，成本接近 0。
 */
.board-body {
  position: relative;
  height: clamp(238px, 96vw, 318px);
  overflow: hidden;
}

.board-body::before,
.board-body::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 14px;
  pointer-events: none;
  z-index: 2;
}

.board-body::before {
  top: 0;
  background: linear-gradient(to bottom, rgba(120, 17, 33, 0.96), rgba(120, 17, 33, 0));
}

.board-body::after {
  bottom: 0;
  background: linear-gradient(to top, rgba(72, 8, 20, 0.96), rgba(72, 8, 20, 0));
}

.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);
}

/* ---------------- 弹窗 ---------------- */

/*
 * 弹窗打开时，把页面上所有常驻动画停掉。
 * 遮罩是不透明的，底下的转盘光圈、公示列表、标题扫光一点也看不见，
 * 但它们本来还在按帧跑。弹窗自身的入场 + 粒子上来以后，几套动画叠一起，
 * 移动端主线程就被占满了（实测打开弹窗时主线程占用 99%）。
 * animation-play-state 只是暂停时钟，不重建图层，切换成本接近 0。
 */
html.is-modal-open .board-track,
html.is-modal-open .hero-title,
html.is-modal-open .hub::before,
html.is-modal-open .hub-text::after,
html.is-modal-open .wheel-glow {
  animation-play-state: paused;
}

.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;
}

/*
 * 遮罩层。
 * 原来这里是 backdrop-filter: blur(3px) —— 全屏毛玻璃要每帧把下面整页重新采样再模糊，
 * 而弹窗打开时底下转盘、公示栏、标题都还在动，等于每帧做一次全屏卷积，
 * 这是「中奖弹窗特别卡」的头号原因。改用不透明一点的纯色遮罩，观感几乎一致，成本归零。
 */
.modal-mask {
  position: absolute;
  inset: 0;
  background: rgba(18, 2, 6, 0.8);
}

.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; }
}