:root{font-family:"Noto Sans SC",system-ui,sans-serif;color:#5e0810;background:#fff6dc}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at 50% 36%,#fff0b7 0,#f5270f 42%,#7a12c8 100%);min-height:100vh}
main{max-width:430px;margin:auto;min-height:100vh;padding:18px 16px 28px;background:linear-gradient(#fff6dcaa,#f5270f22)}
header{display:flex;align-items:center;gap:8px;color:#7a12c8}
header b{font-size:10px;letter-spacing:2px}
header strong{font-size:13px}
nav{margin-left:auto;display:flex;gap:6px}
button{border:0;border-radius:20px;padding:8px 14px;background:#ffc24b;color:#5e0810;font-weight:700;cursor:pointer}
button:disabled{opacity:.55;cursor:not-allowed}
.hero{text-align:center;position:relative;padding:28px 0 14px}
.hero small{color:#f5270f;font-weight:700}
.hero h1{margin:4px;font-size:42px;color:#7a12c8;text-shadow:2px 2px #ffc24b}
.hero p{margin:0;font-weight:700}
.hero i{position:absolute;right:15px;top:36px;background:#e8433a;color:#fff6dc;border:3px solid #ffc24b;border-radius:50%;width:60px;height:60px;padding-top:8px;font-style:normal;font-weight:900}
.hero em{display:block;font-size:11px}

.wheel-wrap{text-align:center}
.wheel-stage{position:relative;width:min(82vw,320px);aspect-ratio:1;margin:12px auto}
.wheel{position:absolute;inset:0;border-radius:50%;border:13px solid #ffc24b;background:conic-gradient(#9b2ff0 0 45deg,#e8433a 45deg 90deg,#ffc24b 90deg 135deg,#053d88 135deg 180deg,#9b2ff0 180deg 225deg,#e8433a 225deg 270deg,#ffc24b 270deg 315deg,#053d88 315deg 360deg);box-shadow:0 0 0 8px #7a12c8,0 0 30px #ffc24b}
.wheel::before{content:"";position:absolute;inset:12%;border-radius:50%;border:2px dashed #fff6dc;opacity:.55}
.wheel span{position:absolute;top:50%;left:50%;width:84px;height:22px;margin:-11px 0 0 -42px;transform-origin:50% 50%;color:#fff;font-size:12px;font-weight:900;line-height:22px;text-align:center;text-shadow:0 1px 2px #0008;pointer-events:none;white-space:nowrap}
.pointer{position:absolute;left:50%;top:-8px;transform:translateX(-50%);z-index:3;width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;border-top:26px solid #e8433a;filter:drop-shadow(0 2px 2px #0006)}
.draw-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;width:30%;height:30%;border-radius:50%;background:#ffc24b;border:7px solid #7a12c8;font-size:22px;font-weight:900;color:#5e0810;box-shadow:0 4px 10px #0004}

.card{margin:22px 0;padding:18px;border-radius:20px;background:#fff6dcdd;text-align:center}
.card h2{font-size:16px}
.date{color:#e8433a;font-weight:700}
#prizeList{display:flex;flex-direction:column;gap:10px}
#prizeList p{display:flex;align-items:center;justify-content:space-between;margin:0;padding:8px 12px;border-radius:14px;background:#fff6dc;font-weight:700}
#prizeList .claim-item{padding:6px 12px;font-size:13px}
footer{text-align:center;color:#fff6dc;font-size:12px;margin-top:8px}
dialog{border:0;border-radius:18px;padding:24px;text-align:center;color:#5e0810}
dialog::backdrop{background:#0008}
dialog button{margin-top:12px}