:root{--rose:#c2546f;--deep:#3b1f2b;--blush:#f8dfe4;--cream:#fff8f5;--gold:#d4a373}
*{box-sizing:border-box}html,body{margin:0;min-height:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans Myanmar",sans-serif;color:var(--deep);background:var(--cream);-webkit-tap-highlight-color:transparent}
.bg{position:fixed;inset:0;z-index:-1;background:radial-gradient(circle at 20% 0%,#fde2e7 0,transparent 55%),radial-gradient(circle at 100% 40%,#f3e1d3 0,transparent 50%),linear-gradient(#fff8f5,#fdeef0)}
main{max-width:460px;margin:0 auto;padding:22px 18px 30px;text-align:center}
.brand{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--rose);font-weight:700}
h1{font-family:Georgia,"Times New Roman",serif;font-size:40px;margin:6px 0 4px;font-weight:600;background:linear-gradient(90deg,#a63d5a,#d4a373);-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{margin:0 0 14px;color:#7a5763;font-size:15px}
.chances{display:flex;align-items:center;justify-content:space-around;background:#fff;border-radius:18px;padding:12px;box-shadow:0 8px 24px rgba(194,84,111,.12);margin-bottom:18px}
.chances div{display:flex;flex-direction:column}.chances b{font-size:26px;color:var(--rose)}.chances span{font-size:12px;color:#8d6b76;text-transform:uppercase;letter-spacing:.08em}.chances .sep{width:1px;height:36px;background:#f0d5db}
.wheel-wrap{position:relative;width:min(88vw,380px);aspect-ratio:1;margin:8px auto 18px}
#wheel{width:100%;height:100%;filter:drop-shadow(0 12px 24px rgba(166,61,90,.25));transition:transform 5.2s cubic-bezier(.12,.72,.08,1)}
.pointer{position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;border-top:30px solid var(--rose);z-index:3;filter:drop-shadow(0 3px 3px rgba(0,0,0,.2))}
.hub{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:27%;aspect-ratio:1;border-radius:50%;border:5px solid #fff;background:linear-gradient(145deg,#d9667f,#a63d5a);color:#fff;font-weight:800;font-size:18px;letter-spacing:.1em;box-shadow:0 6px 18px rgba(166,61,90,.45);cursor:pointer;z-index:2}
.hub:disabled{background:linear-gradient(145deg,#d8c1c7,#b9a0a7);cursor:default}
.hub:not(:disabled){animation:pulse 1.6s infinite}@keyframes pulse{50%{box-shadow:0 0 0 10px rgba(217,102,127,.18),0 6px 18px rgba(166,61,90,.45)}}
.notice{background:#fff;border-radius:16px;padding:16px;margin:12px 0;box-shadow:0 6px 20px rgba(194,84,111,.1);line-height:1.5}
.notice.warn{border-left:5px solid var(--gold)}
.history{background:#fff;border-radius:18px;padding:14px 16px;text-align:left;box-shadow:0 6px 20px rgba(194,84,111,.1)}
.history h2{font-family:Georgia,serif;font-size:20px;margin:0 0 8px}.history ul{list-style:none;padding:0;margin:0}
.history li{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px dashed #f0d5db}.history li:last-child{border:0}
.tag{font-size:11px;padding:3px 8px;border-radius:99px;background:#fde2e7;color:var(--rose);font-weight:700}.tag.ok{background:#e3f4e8;color:#2f7a4a}
.small{font-size:12.5px;color:#8d6b76}footer{margin-top:22px;font-size:12px;color:#a58893}footer a{color:var(--rose)}
.modal{position:fixed;inset:0;background:rgba(59,31,43,.55);display:flex;align-items:center;justify-content:center;padding:24px;z-index:10;animation:fade .25s}
.modal[hidden]{display:none}
.modal .card{background:#fff;border-radius:24px;padding:26px 22px;width:100%;max-width:340px;text-align:center;animation:pop .35s cubic-bezier(.2,1.4,.4,1)}
.modal h2{font-family:Georgia,serif;font-size:30px;margin:4px 0 6px;color:var(--rose)}.confetti{font-size:46px}
.modal button{margin-top:12px;width:100%;padding:14px;border:0;border-radius:14px;background:linear-gradient(90deg,#c2546f,#d4a373);color:#fff;font-size:16px;font-weight:700}
@keyframes pop{from{transform:scale(.7);opacity:0}}@keyframes fade{from{opacity:0}}