/* ============ 高级黑金渐变风 · 转盘抽奖 ============ */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; }
body {
  font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  background:
    radial-gradient(1200px 700px at 80% -10%, #3b1a63 0%, transparent 55%),
    radial-gradient(900px 600px at -10% 30%, #1a3a6e 0%, transparent 55%),
    linear-gradient(180deg, #0d0b1e 0%, #151029 55%, #0a0818 100%);
  color:#f3ecff;
  min-height:100vh;
  overflow-x:hidden;
}

.bg-glow {
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(255,213,74,.12), transparent 70%);
}

.page { position:relative; z-index:1; max-width:480px; margin:0 auto; padding:18px 18px 60px; }

/* ---------- 头部 ---------- */
.top { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.brand { display:flex; align-items:center; gap:10px; }
.logo {
  width:46px; height:46px; border-radius:14px;
  background:linear-gradient(135deg,#ffd54a,#ff8a3d);
  display:flex; align-items:center; justify-content:center; font-size:24px;
  box-shadow:0 8px 24px rgba(255,170,60,.35);
}
.brand-title { font-size:18px; font-weight:800; letter-spacing:1px; }
.brand-sub { font-size:11px; color:#b9a9d8; margin-top:2px; }

.user-bar { display:flex; flex-direction:column; gap:6px; font-size:12px; color:#cbbde6; text-align:right; }
.user-item b { color:#fff; }
.gold { color:#ffd54a !important; font-size:15px !important; }

/* ---------- 转盘 ---------- */
.wheel-section { display:flex; justify-content:center; margin:28px 0 18px; }
.wheel-wrap { position:relative; width:340px; height:340px; }
.wheel-light {
  position:absolute; inset:-18px; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(255,213,74,.25), transparent 60%);
  filter:blur(6px);
}
#wheel {
  position:absolute; inset:0; width:340px; height:340px;
  border-radius:50%;
  box-shadow:0 0 0 6px #2a1d4d, 0 0 0 9px #ffd54a, 0 18px 50px rgba(0,0,0,.55);
  transition:transform 5s cubic-bezier(.12,.72,.08,1);
}
.pointer { position:absolute; top:-10px; left:50%; transform:translateX(-50%); z-index:5; filter:drop-shadow(0 4px 8px rgba(0,0,0,.5)); }

.spin-btn {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:86px; height:86px; border-radius:50%; border:3px solid #fff8d6;
  background:linear-gradient(160deg,#ffd54a,#ff8a3d);
  color:#5a2c00; font-size:17px; font-weight:900; letter-spacing:2px;
  line-height:1.1; cursor:pointer; z-index:4;
  box-shadow:0 0 0 6px rgba(255,213,74,.35), 0 10px 24px rgba(255,138,61,.45);
  transition:transform .15s;
}
.spin-btn:active { transform:translate(-50%,-50%) scale(.94); }
.spin-btn:disabled { filter:grayscale(.5); opacity:.7; cursor:not-allowed; }

/* ---------- 状态面板 ---------- */
.action-panel {
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:20px; padding:18px; backdrop-filter:blur(10px);
}
.status-line { text-align:center; font-size:14px; color:#d8ccee; margin-bottom:12px; }

.confirm-block { text-align:center; margin:8px 0; }
.confirm-tip { font-size:13px; color:#b9a9d8; margin-bottom:12px; line-height:1.6; }

.btn-confirm {
  background:linear-gradient(135deg,#6c4dff,#9b5cff);
  color:#fff; border:none; padding:13px 34px; border-radius:999px;
  font-size:15px; font-weight:700; cursor:pointer;
  box-shadow:0 10px 24px rgba(124,92,255,.4);
}
.btn-confirm:active { transform:scale(.97); }
.btn-ghost {
  background:transparent; color:#e8ddff; border:1px solid rgba(255,255,255,.2);
  padding:11px 24px; border-radius:999px; font-size:14px; cursor:pointer;
}
.btn-row { display:flex; justify-content:center; margin-top:14px; }

/* ---------- 奖品列表 ---------- */
.prize-list { margin-top:24px; }
.prize-list-title { font-size:15px; font-weight:700; margin-bottom:12px; color:#fff; }
.prize-list ul { list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
#prizeList li {
  display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  border-radius:14px; padding:12px; font-size:14px;
}
#prizeList .dot { width:12px; height:12px; border-radius:50%; }
#prizeList li b { color:#ffd54a; margin-left:auto; }

/* ---------- 弹窗 ---------- */
.modal-mask {
  position:fixed; inset:0; background:rgba(5,3,15,.78); z-index:50;
  display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px);
}
.modal-box {
  width:86%; max-width:340px; background:linear-gradient(180deg,#2a1d4d,#171029);
  border:1px solid rgba(255,213,74,.3); border-radius:24px; padding:28px 22px; text-align:center;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.modal-fire { font-size:46px; }
.modal-title { font-size:18px; font-weight:800; margin:10px 0; }
.modal-prize {
  font-size:26px; font-weight:900; color:#ffd54a;
  background:linear-gradient(90deg,#ffd54a,#ff8a3d);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  margin:12px 0 22px;
}
.modal-prize-box .my-prize-list { max-height:300px; overflow-y:auto; text-align:left; margin:14px 0; }
.my-prize-row {
  display:flex; justify-content:space-between; padding:11px 4px;
  border-bottom:1px dashed rgba(255,255,255,.12); font-size:14px;
}
.my-prize-row .amt { color:#ffd54a; font-weight:700; }
.my-prize-row .time { color:#9887bd; font-size:12px; }
.empty-tip { text-align:center; color:#9887bd; padding:30px 0; font-size:14px; }

/* ---------- 封禁 / 待激活 遮罩 ---------- */
.ban-mask, .pending-mask {
  position:fixed; inset:0; background:rgba(5,3,15,.95); z-index:60;
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.ban-box { text-align:center; max-width:320px; }
.ban-icon { font-size:54px; margin-bottom:14px; }
.ban-title { font-size:22px; font-weight:900; margin-bottom:10px; color:#ff4d6d; }
#banMask .ban-title { color:#ff4d6d; }
#pendingMask .ban-title { color:#ffd54a; }
.ban-text { font-size:15px; color:#cbbde6; line-height:1.7; }