/* ============================================================
   蛋仔抽奖 · 糖果乐园主题（覆盖层，加载于 app.css 之后）
   设计语言：奶油天空 + 波点 + 云朵；白胖卡片 + 粗描边 + 厚底阴影；
             糖果果冻按钮，按压回弹；原创蛋形角色，不含官方素材。
   注意：转盘扇区底色由 app.js 写进 .wheel 的 inline style，
        本文件只加描边与阴影，绝不覆盖 background。
   ============================================================ */

:root {
  --ink: #3a2a52;
  --ink-2: #5a477c;
  --muted: #8c7ba9;
  --line: #f1e7ff;
  --card: #ffffff;
  --sun: #ffd84d;
  --sun-deep: #ff9e1b;
  --sky: #4fc3ff;
  --pink: #ff7fb8;
  --grape: #9b7bff;
  --grape-deep: #7a57f0;
  --mint: #3fd69b;
  --shadow-card: 0 6px 0 rgba(226, 208, 255, 0.85), 0 16px 28px rgba(122, 87, 240, 0.13);
  --shadow-pop: 0 8px 0 rgba(220, 200, 255, 0.9), 0 24px 44px rgba(122, 87, 240, 0.2);

  /* 糖果色板 */
  --egg-cream: #fffaf0;
  --egg-butter: #fff3cc;
  --egg-peach: #ffe0ec;
  --egg-mint: #d8f8e9;
  --egg-sky: #ddf3ff;
  --egg-lilac: #ece3ff;
  --egg-line: #f0e4ff;
  --egg-edge: #ffffff;
  --egg-sugar: #ffb020;
}

html { background: #a9e7ff; }

body {
  color: var(--ink);
  background:
    radial-gradient(420px 260px at 10% 2%, rgba(255, 255, 255, 0.92), transparent 70%),
    radial-gradient(520px 320px at 94% 10%, rgba(255, 204, 232, 0.7), transparent 70%),
    radial-gradient(640px 420px at 50% 108%, rgba(255, 243, 190, 0.8), transparent 72%),
    linear-gradient(180deg, #a9e7ff 0%, #cbe9ff 26%, #ffe6f3 58%, #fff8de 100%);
  background-attachment: scroll;
}

/* 波点糖纸底纹 */
body::before {
  content: "";
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.85) 3px, transparent 3.4px),
    radial-gradient(rgba(255, 190, 220, 0.5) 2.4px, transparent 2.8px);
  background-size: 46px 46px, 62px 62px;
  background-position: 0 0, 23px 31px;
  opacity: 0.55;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.35) 62%, transparent);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.35) 62%, transparent);
}

/* ---------- 背景装饰层：糖果光斑 / 波点网格 / 糖纸星星 ---------- */
.fx-bg {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  z-index: 0; pointer-events: none; overflow: hidden;
}
.fx-orb {
  position: absolute; border-radius: 50%; filter: blur(38px); opacity: 0.62;
  animation: orbFloat 18s ease-in-out infinite alternate;
}
.fx-orb.o1 { width: 300px; height: 300px; left: -110px; top: -70px; background: radial-gradient(circle, rgba(120, 214, 255, 0.9), transparent 68%); }
.fx-orb.o2 { width: 250px; height: 250px; right: -90px; top: 30%; background: radial-gradient(circle, rgba(255, 176, 214, 0.85), transparent 68%); animation-delay: -6s; animation-duration: 22s; }
.fx-orb.o3 { width: 290px; height: 290px; left: 28%; bottom: -120px; background: radial-gradient(circle, rgba(255, 226, 120, 0.8), transparent 70%); animation-delay: -11s; animation-duration: 26s; }
@keyframes orbFloat {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(24px, -30px, 0) scale(1.1); }
}
.fx-grid {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.75) 2px, transparent 2.4px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(ellipse 120% 72% at 50% 0%, #000 8%, transparent 76%);
  mask-image: radial-gradient(ellipse 120% 72% at 50% 0%, #000 8%, transparent 76%);
  opacity: 0.5;
}
/* 糖纸星星（原玻璃碎片位置） */
.fx-shard {
  position: absolute; width: 34px; height: 34px;
  background: linear-gradient(150deg, #fff3a8, #ffb7d8 58%, #9ee0ff);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  opacity: 0.72;
  animation: starFloat 7s ease-in-out infinite;
  filter: drop-shadow(0 4px 8px rgba(255, 170, 210, 0.45));
}
.fx-shard.sh1 { left: 14px; top: 17%; transform: rotate(-14deg); }
.fx-shard.sh2 { right: 18px; top: 44%; width: 26px; height: 26px; transform: rotate(22deg); animation-delay: -2.4s; }
.fx-shard.sh3 { left: 12%; bottom: 8%; width: 22px; height: 22px; transform: rotate(34deg); animation-delay: -4.6s; opacity: 0.55; }
.fx-shard.sh4 { right: 15%; bottom: 24%; width: 18px; height: 18px; transform: rotate(-38deg); animation-delay: -1.2s; opacity: 0.5; }
@keyframes starFloat {
  0%, 100% { translate: 0 0; rotate: 0deg; opacity: 0.45; }
  50% { translate: 0 -12px; rotate: 14deg; opacity: 0.85; }
}
.fx-sparkles {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  z-index: 0; pointer-events: none;
}
.fx-burst {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  z-index: 88; pointer-events: none;
}
.app { position: relative; z-index: 1; }

/* ---------- 白胖卡片 ---------- */
.card {
  background: var(--card);
  border: 3px solid var(--egg-edge);
  outline: 1.5px solid var(--egg-line);
  outline-offset: -1.5px;
  box-shadow: var(--shadow-card);
  color: var(--ink);
  overflow: hidden;
  border-radius: 30px;
}
.card::after {
  content: ""; position: absolute; top: -60%; left: -70%; width: 38%; height: 220%;
  background: linear-gradient(100deg, transparent, rgba(255, 240, 190, 0.55), transparent);
  transform: rotate(14deg); pointer-events: none;
  animation: cardSheen 9.5s ease-in-out infinite;
}
.card:nth-of-type(2)::after { animation-delay: 2.2s; }
.card:nth-of-type(3)::after { animation-delay: 4.4s; }
@keyframes cardSheen {
  0%, 62% { left: -70%; }
  88%, 100% { left: 140%; }
}
.card > * { position: relative; z-index: 1; }

.card-title { color: var(--ink); }
.card-title .dot {
  width: 11px; height: 11px; border-radius: 5px;
  background: linear-gradient(140deg, var(--sun), var(--pink));
  box-shadow: 0 0 0 4px rgba(255, 214, 77, 0.24);
}
.card-sub, .invite-desc, .hint { color: var(--muted); }

.section-head h2 {
  color: var(--ink);
  background: linear-gradient(transparent 62%, rgba(255, 214, 77, 0.85) 62%);
  text-shadow: none;
}
.section-head span {
  color: var(--grape-deep); font-weight: 900; letter-spacing: 0.5px;
  background: #fff;
  border: 2px solid var(--egg-line);
  padding: 2px 11px; border-radius: 999px;
  box-shadow: 0 3px 0 rgba(226, 208, 255, 0.8);
}

/* ---------- 头图：糖果舞台 ---------- */
.hero {
  background:
    radial-gradient(120% 110% at 12% -10%, rgba(255, 255, 255, 0.55), transparent 52%),
    radial-gradient(120% 120% at 104% 8%, rgba(255, 236, 150, 0.75), transparent 56%),
    linear-gradient(158deg, #ff9ec4 0%, #ffb07a 46%, #ffd84d 100%);
  border: 4px solid #fff;
  box-shadow:
    0 10px 0 #e8a33c,
    0 22px 40px rgba(232, 140, 60, 0.32),
    inset 0 2px 0 rgba(255, 255, 255, 0.7);
  border-radius: 34px;
}
.hero::before {
  background: conic-gradient(from 0deg,
    rgba(255, 255, 255, 0.3) 0 9deg, transparent 9deg 30deg,
    rgba(255, 255, 255, 0.12) 30deg 34deg, transparent 34deg 60deg);
  animation-duration: 30s;
  opacity: 0.75;
}
.hero::after {
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.95) 2.4px, transparent 2.8px),
    radial-gradient(rgba(255, 255, 255, 0.5) 1.8px, transparent 2.2px);
  background-size: 30px 30px, 52px 52px;
  background-position: 0 0, 15px 19px;
  opacity: 0.55;
}
/* 云朵只从顶边露出一角，且必须半透明——不透明的白云会变成压在胶囊后面的白条 */
.cloud {
  background: rgba(255, 255, 255, 0.55);
  box-shadow: none;
  filter: blur(1px);
  opacity: 1;
}
.cloud.c1 { left: -28px; top: -14px; width: 128px; height: 38px; }
.cloud.c2 { right: -22px; top: 6px; width: 96px; height: 30px; }
.cloud.c1::before, .cloud.c2::before {
  content: ""; position: absolute; left: 18%; top: -46%; width: 56%; height: 130%;
  background: rgba(255, 255, 255, 0.55); border-radius: 999px;
}
.spark { background: #fffbe0; box-shadow: 0 0 12px rgba(255, 248, 190, 0.95); }
.mascot { opacity: 1; filter: drop-shadow(0 8px 12px rgba(190, 110, 40, 0.28)); }

/* 标题用八向描边，别用「向下堆叠」——堆叠会在浅底上显出双层重影 */
.hero h1 {
  background: none;
  color: #fff;
  -webkit-text-fill-color: #fff;
  text-shadow:
    -2px -2px 0 #c25e18, 2px -2px 0 #c25e18, -2px 2px 0 #c25e18, 2px 2px 0 #c25e18,
    -2px 0 0 #c25e18, 2px 0 0 #c25e18, 0 -2px 0 #c25e18, 0 2px 0 #c25e18,
    0 7px 12px rgba(150, 70, 20, 0.32);
  animation: none;
  letter-spacing: 0.8px;
}
.hero .sub {
  color: #8a3d00;
  font-weight: 800;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

.avatar {
  background: linear-gradient(150deg, #fff6cf, #ffd166);
  color: #7a4a00;
  border: 3px solid #fff;
  box-shadow: 0 5px 0 rgba(214, 140, 0, 0.45), 0 10px 18px rgba(160, 90, 10, 0.22);
  font-weight: 900;
}
.who-name { text-shadow: 0 2px 0 rgba(190, 90, 30, 0.45); }
.who-name .tag {
  background: #fff; color: var(--pink);
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 0 rgba(200, 90, 50, 0.3);
  font-weight: 900;
}
.who-sub { color: rgba(255, 250, 236, 0.92); text-shadow: 0 1px 0 rgba(180, 90, 30, 0.4); }

.status-pill {
  background: rgba(255, 255, 255, 0.94);
  border: 2px solid #fff;
  color: #5a477c;
  box-shadow: 0 3px 0 rgba(200, 120, 40, 0.28);
  font-weight: 900;
}
.status-pill i { background: #34d98d; box-shadow: 0 0 0 3px rgba(52, 217, 141, 0.22); }

/* 下移让开「进行中」胶囊，右移量收紧避免被 hero 的 overflow 裁掉 */
.stk {
  top: 80px; right: 12px;
  background: #fff; color: #e0661b;
  border: 2px solid #fff;
  box-shadow: 0 4px 0 rgba(214, 130, 30, 0.35), 0 8px 16px rgba(160, 80, 10, 0.18);
  font-weight: 900;
  transform: rotate(-3deg);
}

.countdown {
  background: rgba(255, 255, 255, 0.28);
  border: 2px solid rgba(255, 255, 255, 0.75);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5);
}
.countdown .label { color: #8a3d00; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55); font-weight: 900; }
.cd-cell {
  background: #fff;
  border: 2px solid #fff;
  box-shadow: 0 4px 0 rgba(214, 140, 40, 0.35);
}
.cd-cell b { color: #e0661b; text-shadow: none; font-variant-numeric: tabular-nums; font-weight: 900; }
.cd-cell span { color: #b08a6a; font-weight: 800; }
.hero-note { color: rgba(255, 250, 236, 0.85); }

/* ---------- 公告条 ---------- */
.notice {
  background: #fff8e0;
  border: 2.5px solid #ffd479;
  color: #8a5a12;
  box-shadow: 0 4px 0 rgba(255, 208, 120, 0.6), 0 10px 20px rgba(200, 150, 40, 0.14);
  border-radius: 18px;
}
.notice svg { color: #f0a020; }

/* ---------- 兑换码 ---------- */
.invite-state {
  background: #f4eeff; color: var(--grape-deep);
  border: 2px solid var(--egg-line);
  font-weight: 900;
}
.invite-state.ok {
  background: #ddfaec; color: #128a5c;
  border-color: #a8edd0;
  box-shadow: 0 3px 0 rgba(120, 220, 180, 0.5);
}
.input-wrap {
  background: #fff;
  border: 2.5px solid var(--egg-line);
  box-shadow: inset 0 3px 0 rgba(240, 228, 255, 0.7), 0 3px 0 rgba(232, 218, 255, 0.6);
  border-radius: 18px;
}
.input-wrap:focus-within {
  border-color: #ffb0d4;
  background: #fff;
  box-shadow: 0 0 0 5px rgba(255, 176, 212, 0.22), 0 3px 0 rgba(255, 176, 212, 0.4);
}
.input-wrap.error {
  border-color: #ff8aa8;
  background: #fff5f8;
  box-shadow: 0 0 0 5px rgba(255, 120, 150, 0.16);
}
.input-wrap input { color: var(--ink); font-weight: 800; }
.input-wrap input::placeholder { color: #b9a8d2; font-weight: 600; }
.field-error { color: #e0506f; font-weight: 800; }
.invite-ok {
  background: #e6fbf1;
  border: 2px solid #a8edd0;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.8), 0 4px 0 rgba(150, 225, 190, 0.45);
  border-radius: 18px;
}
.invite-ok .ico { background: #fff; color: #16a86e; box-shadow: 0 3px 0 rgba(120, 220, 180, 0.5); }
.invite-ok b { color: #0f7a53; }
.invite-ok small { color: #4f9a7c; }

/* ---------- 糖果果冻按钮 ---------- */
.btn {
  font-weight: 900;
  transition: transform 0.12s ease, box-shadow 0.16s ease, filter 0.16s ease;
}
.btn-primary {
  background: linear-gradient(180deg, #ffe066 0%, #ffc247 48%, #ff9e1b 100%);
  color: #6b3d00;
  border: 3px solid #fff;
  box-shadow:
    0 6px 0 #d97a00,
    0 14px 26px rgba(255, 150, 20, 0.32),
    inset 0 2px 0 rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 0 rgba(255, 246, 214, 0.9);
  position: relative; overflow: hidden;
  border-radius: 999px;
}
.btn-primary::after {
  content: ""; position: absolute; top: -30%; left: -70%; width: 40%; height: 170%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  transform: rotate(16deg); animation: btnShine 4.6s ease-in-out infinite; pointer-events: none;
}
@keyframes btnShine { 0%, 55% { left: -70%; } 82%, 100% { left: 150%; } }
.btn-primary:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #d97a00, 0 6px 12px rgba(255, 150, 20, 0.24), inset 0 2px 0 rgba(255, 255, 255, 0.7);
}
.btn-primary:disabled {
  background: linear-gradient(180deg, #e6e0f0, #cdc4dd);
  color: #9b8fb0;
  border-color: #fff;
  box-shadow: 0 5px 0 #b8aec9;
}
.btn-primary:disabled::after { display: none; }
.btn-ghost {
  background: #fff;
  color: var(--grape-deep);
  border: 2.5px solid var(--egg-line);
  box-shadow: 0 4px 0 rgba(226, 208, 255, 0.85);
  border-radius: 999px;
}
.btn-soft {
  background: #fff3cc;
  color: #a05e00;
  border: 2px solid #ffdf94;
  box-shadow: 0 3px 0 rgba(255, 214, 120, 0.7);
  border-radius: 999px;
}

/* ---------- 奖品 ---------- */
.prize-note {
  background: #f7f1ff;
  border: 2px dashed #dcc8ff;
  color: #6b5396;
  border-radius: 14px;
}
.prize-card {
  background: #fff;
  border: 2.5px solid var(--egg-line);
  box-shadow: 0 5px 0 rgba(232, 218, 255, 0.8), 0 10px 18px rgba(122, 87, 240, 0.08);
  color: var(--ink);
  border-radius: 20px;
  -webkit-appearance: none; appearance: none;
}
.prize-card:active { transform: scale(0.97) translateY(2px); }
.prize-card.q1 { border-color: #ffd479; box-shadow: 0 5px 0 #ffe9b0, 0 12px 22px rgba(255, 170, 40, 0.18); }
.prize-card.q2 { border-color: #cdb8ff; box-shadow: 0 5px 0 #e2d6ff, 0 12px 22px rgba(130, 90, 255, 0.16); }
.prize-card.q3 { border-color: #9fdcff; box-shadow: 0 5px 0 #cdeeff, 0 12px 22px rgba(40, 150, 255, 0.14); }
.prize-card.q4 { border-color: #a8edd0; box-shadow: 0 5px 0 #cdf6e3, 0 12px 22px rgba(30, 190, 140, 0.14); }
.prize-card.q5 { border-color: #e4dcef; box-shadow: 0 5px 0 #f0ebf7; }

/* 图片区统一纯白：品级色只留在边框与标签上。
   否则带透明通道的 PNG（如捕梦软软）会透出品级底色，看着像「背后发黄」。 */
.prize-media, .sheet-media {
  background: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  position: relative;
  border-radius: 16px;
}
/* 浅色主题：只保留内白边；不再给白底立绘垫任何底色或渐隐，
   否则十张图会看起来「有的发紫、有的发黄」。 */
.prize-media::before, .sheet-media::before, .win-media::before {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  border-radius: inherit; pointer-events: none; z-index: 2;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.95);
}
.prize-card.q1 .prize-media,
.prize-card.q2 .prize-media,
.prize-card.q3 .prize-media,
.prize-card.q4 .prize-media { background: #fff; }
.prize-media::after { background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.85), transparent); }
.prize-card.q1 .prize-media::after { animation: sheen 4.6s ease-in-out infinite; }

.q-chip {
  background: linear-gradient(140deg, #ffe08a, #ffb020);
  color: #6b3d00;
  box-shadow: 0 3px 0 rgba(214, 140, 0, 0.55);
  border: 2px solid #fff;
  font-weight: 900;
}
.q-chip.q2 { background: linear-gradient(140deg, #d8c6ff, #9b7bff); color: #fff; box-shadow: 0 3px 0 rgba(110, 70, 220, 0.5); }
.q-chip.q3 { background: linear-gradient(140deg, #b8e8ff, #4fc3ff); color: #fff; box-shadow: 0 3px 0 rgba(30, 140, 220, 0.45); }
.q-chip.q4 { background: linear-gradient(140deg, #b8f5da, #3fd69b); color: #fff; box-shadow: 0 3px 0 rgba(20, 170, 120, 0.45); }
.q-chip.q5 { background: linear-gradient(140deg, #e4dcef, #b9aec9); color: #fff; box-shadow: none; }

.prize-name { color: var(--ink); }
.prize-meta span { color: var(--muted); }
.prize-meta .stock { color: #d97706; text-shadow: none; font-weight: 800; }
.prize-meta .stock.out { color: #b3a8c4; }
.mode-chip {
  background: #f4eeff; color: #6b5396;
  border: 1.5px solid var(--egg-line);
  font-weight: 800;
}

/* ---------- 转盘 ---------- */
.chance {
  background: #e6f7ff;
  color: #0b7ea8;
  border: 2px solid #a8e2ff;
  box-shadow: 0 3px 0 rgba(140, 215, 255, 0.6);
  font-weight: 900;
}
.chance.zero { background: #f1ecf8; color: var(--muted); border-color: #e2d9f0; box-shadow: none; }
.sound-btn {
  border: 2px solid var(--egg-line);
  background: #fff;
  color: var(--grape-deep);
  box-shadow: 0 3px 0 rgba(226, 208, 255, 0.8);
}
.wheel-rim {
  background: conic-gradient(from 0deg, #ffd84d, #ff9ec4, #9b7bff, #4fc3ff, #3fd69b, #ffd84d);
  box-shadow:
    0 10px 0 rgba(180, 140, 255, 0.38),
    0 22px 40px rgba(122, 87, 240, 0.22),
    inset 0 0 0 5px #fff,
    inset 0 0 0 6px rgba(255, 214, 120, 0.5);
}
.wheel-rim .bulb {
  background: #fff;
  box-shadow: 0 0 8px 2px rgba(255, 236, 160, 0.95), 0 0 16px 4px rgba(255, 190, 80, 0.4);
}
.wheel {
  box-shadow: inset 0 0 0 4px #fff, 0 6px 16px rgba(122, 87, 240, 0.18);
}
.wheel-slot img {
  background: #fff;
  box-shadow: 0 2px 6px rgba(90, 60, 140, 0.18), 0 0 0 2px rgba(255, 255, 255, 0.9);
}
.wheel-slot span {
  color: #3a2a52;
  text-shadow: 0 1px 0 #fff, 0 0 6px rgba(255, 255, 255, 0.95), 0 2px 4px rgba(255, 255, 255, 0.9);
  font-weight: 900;
}
.wheel-pointer {
  top: -12px;
  border-left-width: 15px; border-right-width: 15px;
  border-top: 33px solid #ff5b8a;
  filter:
    drop-shadow(0 0 0 #fff)
    drop-shadow(0 3px 0 #d63b69)
    drop-shadow(0 6px 10px rgba(190, 40, 90, 0.35));
}
.wheel-pointer::before {
  left: -10px; top: -38px;
  width: 20px; height: 20px;
  background: radial-gradient(circle at 35% 30%, #fff, #ffd0e0);
  box-shadow: 0 2px 0 rgba(214, 59, 105, 0.5), 0 0 0 3px #fff;
}
.wheel-pointer::after {
  content: ''; position: absolute; left: -15px; top: -8px;
  width: 0; height: 0;
  border-left: 15px solid transparent; border-right: 15px solid transparent;
  border-top: 33px solid rgba(255, 255, 255, 0.35);
  transform: scale(0.6); transform-origin: 50% 0; pointer-events: none;
}
.wheel-go {
  border: 5px solid #fff;
  background: linear-gradient(180deg, #ffe066 0%, #ffc247 46%, #ff9e1b 100%);
  color: #6b3d00;
  box-shadow:
    0 7px 0 #d97a00,
    0 16px 28px rgba(255, 150, 20, 0.35),
    0 0 0 9px rgba(255, 214, 120, 0.28),
    inset 0 3px 0 rgba(255, 255, 255, 0.85);
}
.wheel-go b { color: #6b3d00; text-shadow: 0 1px 0 rgba(255, 246, 214, 0.9); }
.wheel-go small { color: rgba(107, 61, 0, 0.72); font-weight: 800; }
.wheel-go:active {
  transform: translate(-50%, -50%) translateY(4px);
  box-shadow: 0 3px 0 #d97a00, 0 8px 16px rgba(255, 150, 20, 0.28), inset 0 3px 0 rgba(255, 255, 255, 0.8);
}
.wheel-go:disabled {
  background: linear-gradient(180deg, #e6e0f0, #cdc4dd);
  color: #9b8fb0;
  border-color: #fff;
  box-shadow: 0 6px 0 #b8aec9;
}
.wheel-go:disabled b { color: #9b8fb0; text-shadow: none; }
.wheel-go:disabled small { color: #b0a4c2; }

/* 遮罩要能透出糖果扇区：0.9 的白会把整盘盖成灰饼 */
.wheel-lock {
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.8) 0 22%, rgba(255, 250, 240, 0.26) 68%, rgba(255, 250, 240, 0.12) 100%);
}
.wheel-lock .lock-ico {
  background: #fff;
  color: var(--grape-deep);
  border: 2.5px solid var(--egg-line);
  box-shadow: 0 4px 0 rgba(226, 208, 255, 0.85);
}
.wheel-lock b { color: var(--ink); text-shadow: 0 1px 0 #fff; }
.locked-panel {
  background: #fdf9ff;
  border: 2px dashed #dcc8ff;
  color: #6b5396;
  border-radius: 18px;
}
.locked-panel .lock-ico { background: #f0e7ff; color: var(--grape-deep); }
.locked-panel p { color: var(--muted); }

/* ---------- 规则 / 概率 ---------- */
.agree-row {
  background: #f8f3ff;
  border: 2px solid var(--egg-line);
  color: #6b5396;
  border-radius: 16px;
}
.agree-row.invalid { border-color: #ff9db5; background: #fff2f6; }
.checkbox {
  border: 2.5px solid #cbb6ee;
  background: #fff;
}
.checkbox.checked {
  background: linear-gradient(140deg, #ffb0d4, #9b7bff);
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(255, 176, 212, 0.3);
}
.checkbox.checked svg { stroke: #fff; }
.agree-row a { color: var(--grape-deep); font-weight: 900; }

.result-bar {
  background: #eef9ff;
  border: 2px solid #b8e6ff;
  border-radius: 18px;
}
.result-bar .txt { color: #5a7a92; }
.result-bar .txt b { color: #1a5f80; }
/* 让「查看结果」像一个真按钮，别和正文挤成一团 */
.result-bar button {
  color: var(--grape-deep); font-weight: 900;
  background: #fff; border: 2px solid var(--egg-line);
  border-radius: 999px; padding: 6px 13px;
  box-shadow: 0 3px 0 rgba(226, 208, 255, 0.8);
  white-space: nowrap;
}

.state-banner {
  background: #f6f1ff;
  border: 2px solid var(--egg-line);
  color: #6b5396;
  border-radius: 16px;
}
.state-banner.warn { background: #fff8e0; border-color: #ffd479; color: #8a5a12; }
.state-banner.danger { background: #fff0f4; border-color: #ffb3c7; color: #b03050; }
.state-banner.info { background: #eef9ff; border-color: #b8e6ff; color: #1a5f80; }

.rule-item { border-bottom-color: #f3ecff; }
.rule-item dt { color: var(--grape-deep); letter-spacing: 0.5px; font-weight: 900; }
.rule-item dd { color: var(--ink-2); }

.prob-table { border: 2px solid var(--egg-line); background: #fdfaff; border-radius: 16px; }
.prob-head { background: #f4eeff; color: #6b5396; font-weight: 900; }
.prob-row { background: transparent; border-top-color: #f3ecff; color: var(--ink-2); }
.prob-row .bar { background: #f0e8ff; }
.prob-row .bar i { background: linear-gradient(90deg, #ffd84d, #ff9ec4 52%, #9b7bff); box-shadow: none; }
.prob-row em { color: #d97706; font-weight: 900; }

.statement-box { background: #f8f3ff; border-color: var(--egg-line); color: #6b5396; border-radius: 16px; }
.statement-box b { color: var(--ink); }
.disclaimer { background: #fff8e6; border-color: #ffe0a0; color: #8a6412; border-radius: 16px; }
.disclaimer b { color: #a05e00; }
.privacy { color: #a99cbb; }
.foot { color: #8c7ba9; }
.foot b { color: #e0506f; }
.foot .links button { color: var(--grape-deep); font-weight: 900; }

/* ---------- 弹层 / 弹窗 ---------- */
.overlay {
  background: rgba(58, 32, 84, 0.42);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.sheet {
  background: #fff;
  border: 4px solid #fff;
  box-shadow: 0 -18px 50px rgba(90, 50, 140, 0.28);
  color: var(--ink);
  border-radius: 34px 34px 0 0;
  position: relative;
}
.sheet::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px;
  background: linear-gradient(90deg, #ffd84d, #ff9ec4 40%, #9b7bff 72%, #4fc3ff);
  border-radius: 34px 34px 0 0;
}
.sheet-handle { background: #e2d3fa; }
.sheet-head h3 { color: var(--ink); }
.icon-btn {
  background: #f7f1ff;
  color: var(--grape-deep);
  border: 2px solid var(--egg-line);
  box-shadow: 0 3px 0 rgba(226, 208, 255, 0.7);
}
.sheet-media {
  /* 同上：白底立绘配纯白容器，contain 后的留白不可见 */
  background: #fff;
  border: 2px solid #ffe0a0;
}
.ph-chip { background: #fff; border-color: #ffd479; color: #a05e00; }
.sheet-title-row h4 { color: var(--ink); }
.badge { background: linear-gradient(140deg, #ffe08a, #ffa726); color: #6b3d00; box-shadow: 0 3px 0 rgba(214, 140, 0, 0.45); border: 2px solid #fff; font-weight: 900; }
.badge.gray { background: linear-gradient(140deg, #e4dcef, #b9aec9); color: #fff; box-shadow: none; }
.sheet-desc { color: var(--ink-2); }
.kv-list { border-top-color: #f1e7ff; }
.kv { border-bottom-color: #f3ecff; }
.kv dt { color: var(--muted); }
.kv dd { color: var(--ink); }

.modal {
  background: #fff;
  border: 4px solid #fff;
  box-shadow: 0 24px 60px rgba(90, 50, 140, 0.35);
  color: var(--ink);
  border-radius: 32px;
  position: relative;
}
.modal::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px;
  background: linear-gradient(90deg, #ffd84d, #ff9ec4 40%, #9b7bff 72%, #4fc3ff);
}
.modal .close {
  background: #fff; color: var(--grape-deep);
  border: 2px solid var(--egg-line);
  box-shadow: 0 3px 0 rgba(226, 208, 255, 0.7);
}
.win-head {
  background:
    radial-gradient(120% 130% at 12% 0%, rgba(255, 255, 255, 0.55), transparent 58%),
    radial-gradient(120% 120% at 100% 10%, rgba(255, 236, 150, 0.75), transparent 58%),
    linear-gradient(160deg, #ff9ec4, #ffb07a 52%, #ffd84d);
  border-radius: 24px;
}
.win-kicker { background: #fff; color: #e0661b; box-shadow: 0 3px 0 rgba(214, 130, 30, 0.35); font-weight: 900; }
.win-head h3 {
  background: none;
  color: #fff;
  -webkit-text-fill-color: #fff;
  text-shadow: 0 2px 0 #e07a2e, 0 8px 16px rgba(160, 70, 20, 0.32);
  animation: none;
}
.win-head p { color: #fff8ea; text-shadow: 0 1px 0 rgba(180, 90, 30, 0.4); }
.win-media {
  /* 纯白：立绘本身是白底，容器一旦是奶油渐变，宽高不等时会露出两条色带 */
  background: #fff;
  border: 3px solid #fff;
  box-shadow: 0 6px 0 rgba(255, 214, 120, 0.7), 0 0 0 2px #ffe0a0;
  border-radius: 18px;
}
.win-name { color: var(--ink); }
.win-quality { color: var(--muted); }
.code-box {
  background: #fff8e6;
  border: 2px dashed #ffd479;
  border-radius: 16px;
}
.code-box .k { color: #a08a5a; }
.code-box .v { color: #a05e00; text-shadow: none; font-weight: 900; }
.code-box .copy { background: #fff; color: #a05e00; border-color: #ffd479; }
.code-box.q { background: #eef9ff; border-color: #a8e2ff; }
.code-box.q .v { color: #0b7ea8; text-shadow: none; }
.code-box.q .copy { color: #0b7ea8; border-color: #a8e2ff; }
.deadline { color: #e0506f; font-weight: 800; }
.win-demo {
  color: #8a6412 !important;
  background: #fff8e6 !important;
  border: 2px solid #ffe0a0 !important;
  border-radius: 14px; padding: 9px 11px; margin-top: 10px;
}
.state-tag { background: #f4eeff; color: #6b5396; font-weight: 800; }
.state-tag.ok { background: #ddfaec; color: #0f7a53; }
.state-tag.wait { background: #fff8e0; color: #8a5a12; }
.state-tag.bad { background: #fff0f4; color: #b03050; }
.lose-egg {
  background: linear-gradient(160deg, #fffdf6, #ffeec8 62%, #ffd9a8);
  box-shadow: inset -6px -8px 0 rgba(214, 160, 80, 0.22), 0 6px 0 rgba(232, 200, 150, 0.5);
}
.confetti i:nth-child(1) { background: #ffd84d; }
.confetti i:nth-child(2) { background: #ff7fb8; }
.confetti i:nth-child(3) { background: #9b7bff; }
.confetti i:nth-child(4) { background: #4fc3ff; }
.confetti i:nth-child(5) { background: #3fd69b; }
.confetti i:nth-child(6) { background: #ffb020; }
.confetti i:nth-child(7) { background: #ff9ec4; }
.confetti i:nth-child(8) { background: #7ad8ff; }

/* ---------- 表单 ---------- */
.field label { color: var(--ink-2); font-weight: 800; }
.field label em { color: #b3a4c9; }
.field input, .field textarea {
  background: #fff;
  border: 2.5px solid var(--egg-line);
  color: var(--ink);
  box-shadow: inset 0 3px 0 rgba(240, 228, 255, 0.7);
  border-radius: 16px;
}
.field input:focus, .field textarea:focus {
  border-color: #ffb0d4;
  background: #fff;
  box-shadow: 0 0 0 5px rgba(255, 176, 212, 0.2);
}
.field input::placeholder, .field textarea::placeholder { color: #b9a8d2; }
.field .err { color: #e0506f; font-weight: 800; }
.field.invalid input { border-color: #ff9db5; background: #fff5f8; }
.form-note {
  background: #f8f3ff;
  border: 2px dashed #dcc8ff;
  color: #6b5396;
  border-radius: 14px;
}

/* ---------- 其他 ---------- */
.toast {
  background: #fff;
  border: 2.5px solid var(--egg-line);
  box-shadow: 0 8px 0 rgba(226, 208, 255, 0.8), 0 18px 36px rgba(90, 50, 140, 0.22);
  color: var(--ink);
  font-weight: 800;
  border-radius: 18px;
}
.toast.ok { border-color: #a8edd0; box-shadow: 0 8px 0 rgba(150, 225, 190, 0.6), 0 18px 36px rgba(40, 160, 120, 0.16); }
.toast.err { border-color: #ffb3c7; box-shadow: 0 8px 0 rgba(255, 180, 200, 0.6), 0 18px 36px rgba(200, 60, 100, 0.16); }
.skeleton { background: linear-gradient(90deg, #f4eeff 25%, #fbf7ff 37%, #f4eeff 63%); }
.stage-text { color: var(--ink); text-shadow: 0 2px 0 #fff; font-weight: 900; }
.stage-sub { color: var(--muted); }
.stage-dots i { background: #ff9ec4; }

/* 无 backdrop-filter 的内核：本来就是实底，无需降级 */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .overlay { background: rgba(58, 32, 84, 0.5); }
}

/* 小屏微调 */
@media (max-width: 360px) {
  .hero h1 { font-size: 23px; letter-spacing: 0; }
  .who-name { gap: 5px; font-size: 14px; }
  #streamerName { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .who-name .tag { flex: none; font-size: 8.5px; padding: 1px 5px; letter-spacing: 0.5px; }
  .who-sub { font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .avatar { width: 46px; height: 46px; border-radius: 16px; font-size: 18px; }
  .stk { display: none; }
  .countdown { gap: 5px; }
  .fx-shard.sh4 { display: none; }
  .card::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-sparkles, .fx-burst { display: none; }
  .fx-orb, .fx-shard { animation: none; }
}

/* ============================================================
   性能层：移动端关掉高开销效果，但保持明亮糖果色，不再压成深底
   ============================================================ */
.card::after { left: -70%; animation: cardSheenX 11s ease-in-out infinite; }
@keyframes cardSheenX {
  0%, 66% { transform: rotate(14deg) translateX(0); }
  90%, 100% { transform: rotate(14deg) translateX(520%); }
}
.btn-primary::after { left: -70%; animation: btnShineX 5.6s ease-in-out infinite; }
@keyframes btnShineX {
  0%, 55% { transform: rotate(16deg) translateX(0); }
  85%, 100% { transform: rotate(16deg) translateX(560%); }
}
.prize-card.q1 .prize-media::after { left: -70%; animation: sheenX 5.2s ease-in-out infinite; }
@keyframes sheenX {
  0%, 60% { transform: skewX(-18deg) translateX(0); }
  88%, 100% { transform: skewX(-18deg) translateX(430%); }
}

@media (max-width: 700px), (pointer: coarse) {
  .card, .status-pill, .countdown, .notice, .input-wrap, .toast,
  .sheet, .modal, .state-banner, .prize-card, .sheet-media, .prize-media, .win-media, .overlay, .wheel-lock {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .fx-orb { animation: none; filter: blur(30px); opacity: 0.5; }
  .fx-orb.o3 { display: none; }
  .fx-shard.sh3, .fx-shard.sh4 { display: none; }
  .card::after { display: none; }
  .hero::before { animation: none; opacity: 0.4; }
  .btn-primary::after { display: none; }
  .prize-card.q1 .prize-media::after { animation: none; }
  .wheel-rim { animation: none; }
}

/* 头图蛋形小伙伴（原创糖果蛋，无官方素材） */
/* 位置夹在「粉丝专属福利」标签与倒计时之间，避免压住标签或第 4 个格 */
.mascot.m1.eggy-buddy {
  right: 8px; top: 124px; width: 48px; height: 52px;
  filter: drop-shadow(0 7px 10px rgba(190, 110, 40, 0.3));
  animation: buddyBob 3.6s ease-in-out infinite;
}
@keyframes buddyBob {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-8px) rotate(4deg); }
}
@media (max-width: 360px) {
  .mascot.m1.eggy-buddy { width: 44px; height: 48px; top: 124px; right: 6px; }
}

/* 主播名过长时省略，不换行挤压标签 */
.who-name { min-width: 0; }
/* 主播昵称常常 8~12 个字：单行会被截成「快手主播@那个…」，改成最多两行，
   两侧仍有状态胶囊与「主播」标签占位，所以两行封顶并保留省略号。 */
#streamerName {
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  line-height: 1.18;
}
.who-name .tag { flex: none; white-space: nowrap; }

/* 联系客服领取：点击后到真正跳转之间有 1~2 秒（等目标站首字节），
   按钮必须立刻给出「正在打开」的反馈，否则会被当成卡死。 */
.btn.is-loading {
  pointer-events: none;
  filter: saturate(0.92) brightness(0.98);
}
.btn .spinner {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.55);
  border-top-color: #fff;
  animation: kefuSpin 0.7s linear infinite;
}
@keyframes kefuSpin { to { transform: rotate(360deg); } }