* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #c81d1d;
  color:#fff;
  overflow-x:hidden;
}
.page {
  max-width: 500px;
  margin: 0 auto;
  min-height: 100vh;
  position: relative;
  background: radial-gradient(circle at 50% 0%, #e6432b 0%, #c81d1d 45%, #a80f0f 100%);
  background-size: cover;
  background-position: top center;
  padding-bottom: 40px;
  overflow: hidden;
}
.page::before, .page::after{
  content:"";
  position:absolute;
  border-radius:50%;
  opacity:.5;
  filter: blur(1px);
}
.page::before{ width:120px;height:120px; background:radial-gradient(circle,#ffd77a,#ff8a3d); top:60px; left:-40px; }
.page::after{ width:90px;height:90px; background:radial-gradient(circle,#7fd6ff,#ff7ab8); top:340px; right:-30px; }

.confetti { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.confetti span{
  position:absolute; width:8px; height:14px; opacity:.85;
  animation: fall linear infinite;
}
@keyframes fall {
  0% { transform: translateY(-20px) rotate(0deg); opacity:0; }
  10%{ opacity:.9; }
  100%{ transform: translateY(650px) rotate(360deg); opacity:0; }
}

.music-btn {
  position:absolute; top:16px; right:16px; z-index:20;
  width:52px;height:52px;border-radius:50%;
  background: rgba(70,10,10,.55);
  border:2px solid rgba(255,215,120,.6);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
}
.music-btn svg{ width:24px;height:24px; }
.music-btn.spinning svg{ animation: spin 3s linear infinite; }
@keyframes spin { from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }

.header { position:relative; text-align:center; padding: 34px 20px 8px; z-index:5; }
.title-main {
  font-size: 40px;
  font-weight: 900;
  letter-spacing: 4px;
  background: linear-gradient(180deg, #fff6d8 0%, #ffe28a 45%, #ffb238 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
  text-shadow: 0 3px 0 rgba(120,20,10,.5);
  display:inline-block;
  position:relative;
}
.title-main::before{
  content:"";
  position:absolute; left:50%; top:-14px; transform:translateX(-50%);
  width:220px;height:60px;
  border:3px solid rgba(255,214,120,.5);
  border-bottom:none;
  border-radius:120px 120px 0 0;
}
.subtitle {
  margin-top:10px;
  font-size:14px;
  color:#ffe9c2;
  background: rgba(0,0,0,.15);
  display:inline-block;
  padding:4px 16px;
  border-radius:20px;
}

.wheel-wrap {
  position:relative;
  width: 320px; height: 320px;
  margin: 30px auto 10px;
  z-index:5;
}
.wheel-outer{
  position:absolute; inset:-14px;
  border-radius:50%;
  background: linear-gradient(145deg,#ffe08a,#ff9d2e);
  box-shadow: 0 10px 24px rgba(0,0,0,.35), inset 0 0 0 4px rgba(255,255,255,.25);
}
.wheel-outer::before{
  content:"";
  position:absolute; inset:6px;
  border-radius:50%;
  background: repeating-conic-gradient(#fff4d6 0deg 6deg, transparent 6deg 18deg);
  opacity:.5;
}
.pointer {
  position:absolute; top:-26px; left:50%; transform:translateX(-50%);
  width:0;height:0;
  border-left:16px solid transparent;
  border-right:16px solid transparent;
  border-top:30px solid #fff2c9;
  filter: drop-shadow(0 3px 3px rgba(0,0,0,.4));
  z-index:10;
}
.wheel {
  position:absolute; inset:6px;
  border-radius:50%;
  overflow:hidden;
  background:#fff6e5;
  transition: transform 4s cubic-bezier(.17,.67,.16,.99);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.6);
}
.wheel-seg-label{
  position:absolute; left:50%; top:50%;
  width:50%; height:2px;
  transform-origin: left center;
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
}
.wheel-seg-label .seg-inner{
  position:absolute; left:14%;
  width:80px; margin-left:-40px;
  top:-38px;
  display:flex; flex-direction:column; align-items:center;
}
.wheel-seg-label img{ width:34px;height:34px;object-fit:contain; filter:drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
.wheel-seg-label .seg-emoji{ font-size:26px; line-height:1; }
.wheel-seg-label .seg-name{
  font-size:11px; color:#7a2b0a; font-weight:700; margin-top:2px;
  max-width:70px; line-height:1.2;
}

.center-btn{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:92px;height:92px;border-radius:50%;
  background: radial-gradient(circle at 35% 30%, #ff6b52, #d9231a 65%, #b6140c);
  color:#fff6e0; font-weight:900; font-size:18px; line-height:1.2;
  display:flex; align-items:center; justify-content:center; text-align:center;
  border:4px solid #ffe6a8;
  box-shadow: 0 6px 14px rgba(0,0,0,.4);
  z-index:8; cursor:pointer; user-select:none;
}
.center-btn:active{ transform:translate(-50%,-50%) scale(.96); }
.center-btn.disabled{ filter:grayscale(.5); opacity:.7; cursor:not-allowed; }

.chance-bar{
  margin: 18px auto 0; width:fit-content;
  background: linear-gradient(180deg,#ffcf6b,#ff9d2e);
  color:#7a2b0a; font-weight:700; font-size:14px;
  padding:8px 22px; border-radius:22px;
  box-shadow: 0 4px 10px rgba(0,0,0,.25);
  position:relative; z-index:5;
}

.prize-panel{
  margin: 26px 14px 0;
  background:#fff; border-radius:16px; overflow:hidden;
  box-shadow:0 8px 20px rgba(0,0,0,.3);
  position:relative; z-index:5;
}
.prize-panel-head{
  background: linear-gradient(135deg,#ff6a3d,#e0231a);
  color:#fff8e6; text-align:center; padding:22px 10px;
  font-size:24px; font-weight:900; letter-spacing:6px;
}
.prize-list{ padding: 14px; display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.prize-item{ text-align:center; color:#5a2a1a; }
.prize-item .thumb{
  width:64px;height:64px;margin:0 auto 6px; border-radius:12px;
  background:#fff1de; display:flex;align-items:center;justify-content:center;
  overflow:hidden; border:1px solid #ffe0b0;
}
.prize-item .thumb img{ width:100%;height:100%;object-fit:cover; }
.prize-item .thumb .seg-emoji{ font-size:30px; }
.prize-item .pname{ font-size:12px; font-weight:600; }
.prize-item .pstock{ font-size:11px; color:#c17a4a; margin-top:2px; }

.action-row{
  display:flex; gap:12px; margin:16px 14px 0; position:relative; z-index:5;
}
.action-btn{
  flex:1; background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.3);
  color:#ffe9c2; text-align:center; padding:12px 0; border-radius:10px;
  font-size:14px; font-weight:600; cursor:pointer;
}

.modal-mask{
  position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:100;
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.modal-box{
  background:#fff8ea; border-radius:18px; max-width:340px; width:100%;
  padding:26px 22px; text-align:center; color:#5a2a1a; position:relative;
  box-shadow:0 12px 30px rgba(0,0,0,.4);
  max-height: 80vh; overflow-y:auto;
}
.modal-box h3{ font-size:20px; margin-bottom:12px; color:#c81d1d; }
.modal-box .win-img{ width:90px;height:90px;margin:0 auto 12px; }
.modal-box .win-img img{ width:100%;height:100%;object-fit:contain; }
.modal-box p{ font-size:14px; line-height:1.7; margin-bottom:8px; text-align:left; white-space:pre-line; }
.modal-box .code{ font-size:22px; font-weight:900; letter-spacing:3px; color:#c81d1d; margin:10px 0; }
.modal-close{
  margin-top:14px; display:inline-block; background:#e0231a; color:#fff;
  padding:10px 34px; border-radius:24px; font-weight:700; cursor:pointer; border:none; font-size:15px;
}
.cs-btn{
  margin-top:12px; display:inline-block; background:#2e8b57; color:#fff;
  padding:10px 28px; border-radius:24px; font-weight:700; cursor:pointer; border:none; font-size:14px;
}
.record-item{
  border-bottom:1px dashed #e8c9a0; padding:12px 0; text-align:left; font-size:13px;
}
.record-item .rname{ font-weight:700; color:#c81d1d; }
.record-item .rmeta{ color:#8a6a4a; margin-top:4px; }