*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:#fff;background:#100518}
body{min-height:100vh;overflow-x:hidden}
.bg{position:fixed;width:340px;height:340px;border-radius:50%;filter:blur(100px);opacity:.35;pointer-events:none}
.b1{background:#ff2d83;top:-130px;left:-130px}.b2{background:#723cff;right:-130px;bottom:-130px}
#app{position:relative;z-index:2;width:min(760px,100%);margin:auto;padding:14px}
.page{display:none;min-height:calc(100vh - 28px)}
.page.active{display:flex;align-items:center;justify-content:center}
.panel,.gameWrap{width:100%;background:rgba(28,11,40,.92);border:1px solid rgba(255,255,255,.12);border-radius:28px;box-shadow:0 25px 80px #0009;backdrop-filter:blur(16px)}
.panel{padding:34px 22px;text-align:center}
.hero .heart{font-size:74px;animation:pulse 1.6s infinite}
.label{font-size:11px;letter-spacing:3px;color:#ff75b1;font-weight:900}
.hero h1{font-size:clamp(40px,10vw,66px);margin:12px 0 0;line-height:1}
.hero h1 span{color:#ff5da5}.hero h2{margin:8px 0 18px;font-size:28px}
.hero p{color:#d1c2d8;line-height:1.55;max-width:590px;margin:0 auto 25px}
button{border:0;border-radius:16px;padding:15px 20px;color:#fff;font-size:17px;font-weight:900;cursor:pointer;background:linear-gradient(135deg,#ff3d8e,#8146ff);box-shadow:0 12px 32px rgba(255,61,142,.2)}
.hero button{width:100%;max-width:520px}
.gameWrap{padding:18px 16px 28px}
header{display:flex;justify-content:space-between;align-items:center}
header h2{margin:4px 0 0;font-size:25px}.reset{width:45px;height:45px;padding:0;font-size:25px;background:#ffffff12;box-shadow:none}
.wheelArea{width:min(88vw,470px);height:min(88vw,470px);margin:18px auto 20px;position:relative}
.wheel{width:100%;height:100%;border-radius:50%;position:relative;border:9px solid rgba(255,255,255,.12);box-shadow:0 18px 60px #000a,0 0 0 4px rgba(255,70,150,.15);overflow:hidden;background:conic-gradient(#ff438f 0deg 45deg,#7c43e8 45deg 90deg,#ff719e 90deg 135deg,#5638b5 135deg 180deg,#ff438f 180deg 225deg,#7c43e8 225deg 270deg,#ff719e 270deg 315deg,#5638b5 315deg 360deg);transition:transform 4.8s cubic-bezier(.12,.73,.08,1)}
.wheel:before{content:"";position:absolute;inset:12px;border-radius:50%;border:2px solid rgba(255,255,255,.25)}
.wheelText{position:absolute;inset:0}.slice{position:absolute;left:50%;top:50%;width:44%;height:22px;margin-left:-22%;margin-top:-11px;text-align:center;font-size:10px;font-weight:900;text-shadow:0 2px 4px #000;transform-origin:50% 50%;white-space:nowrap}
.hub{position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);width:82px;height:82px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#1c0b2b;border:5px solid #fff;font-size:32px;box-shadow:0 8px 25px #0008}
.arrow{position:absolute;z-index:8;left:50%;top:-7px;transform:translateX(-50%);font-size:36px;text-shadow:0 3px 7px #000}
.spin{display:block;width:100%;max-width:470px;margin:auto}.spin:disabled{opacity:.45}.tip{text-align:center;color:#94869c;font-size:12px}
.result{display:none;margin:18px auto 0;max-width:600px;padding:20px;text-align:center;border-radius:22px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);animation:pop .4s ease}
.result.show{display:block}.resultIcon{font-size:50px}.who{font-size:12px;font-weight:900;color:#ff77b3;letter-spacing:1px}.result h3{font-size:27px;margin:7px 0}.result p{color:#d2c3d9;line-height:1.5;margin:0 0 15px}.done{width:100%;background:linear-gradient(135deg,#21b875,#119f91);box-shadow:none}
.history{margin-top:22px}.history h3{font-size:15px}.empty{font-size:12px;color:#94869c}.historyItem{padding:10px 12px;margin:6px 0;border-radius:12px;background:#ffffff08;font-size:12px}.historyItem b{color:#ff77b3}
@keyframes pulse{50%{transform:scale(1.08)}}@keyframes pop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
@media(max-width:440px){#app{padding:9px}.gameWrap{padding:15px 11px 25px}.wheelArea{width:90vw;height:90vw}.hero{padding:28px 17px}.hero h1{font-size:42px}}