*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overscroll-behavior:none;-webkit-user-select:none;user-select:none;background:#0b0d10;color:#fff;font-family:-apple-system,'Helvetica Neue',sans-serif;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
#cv{position:fixed;inset:0;z-index:1;pointer-events:none}
/* ---------- Loading ---------- */
#loading{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0b0d10;transition:opacity .5s}
#loading .logo{font-size:22px;font-weight:800;letter-spacing:6px;background:linear-gradient(90deg,#ffd884,#f5a623);-webkit-background-clip:text;background-clip:text;color:transparent;animation:pulse 1.6s ease-in-out infinite}
#loading .bar{margin-top:22px;width:120px;height:3px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden}
#loading .bar i{display:block;height:100%;width:40%;border-radius:2px;background:linear-gradient(90deg,#ffd884,#f5a623);animation:slide 1.1s ease-in-out infinite}
#loading .tip{margin-top:14px;font-size:13px;color:rgba(255,255,255,.45)}
@keyframes slide{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
/* ---------- App 容器 ---------- */
#app{position:relative;z-index:2;display:none;min-height:100vh;padding:20px 22px calc(28px + env(safe-area-inset-bottom));flex-direction:column}
.scr{display:none;flex:1;flex-direction:column;align-items:center;justify-content:center;text-align:center;animation:fadein .45s ease}
.scr.on{display:flex}
@keyframes fadein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.brand{font-size:13px;font-weight:800;letter-spacing:5px;background:linear-gradient(90deg,#ffd884,#f5a623);-webkit-background-clip:text;background-clip:text;color:transparent}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:1.5px;color:#0b0d10;background:linear-gradient(90deg,#ffd884,#f5a623);padding:5px 12px;border-radius:20px}
.livedot{width:6px;height:6px;border-radius:50%;background:#e33;animation:pulse 1.2s infinite}
h2{font-size:21px;font-weight:700;line-height:1.35;margin:14px 0 6px}
.sub{font-size:13.5px;color:rgba(255,255,255,.55);line-height:1.5}
/* ---------- Splash ---------- */
#scr-splash .logo{font-size:34px;font-weight:900;letter-spacing:8px;background:linear-gradient(90deg,#ffd884 30%,#f5a623);-webkit-background-clip:text;background-clip:text;color:transparent;animation:pulse 1.8s infinite}
/* ---------- Progress ---------- */
.steps{width:100%;max-width:280px;margin:26px 0 0;text-align:left}
.step{display:flex;align-items:center;gap:12px;padding:13px 0;font-size:14px;color:rgba(255,255,255,.35);transition:color .3s}
.step .ic{width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.15);flex:none;display:flex;align-items:center;justify-content:center;font-size:12px;color:transparent;transition:all .3s}
.step.act{color:rgba(255,255,255,.85)}
.step.act .ic{border-color:#f5a623;animation:pulse 1s infinite}
.step.ok{color:rgba(255,255,255,.75)}
.step.ok .ic{border-color:#3ecf6f;background:#3ecf6f;color:#0b0d10}
#pbar{width:100%;max-width:280px;height:4px;border-radius:2px;background:rgba(255,255,255,.08);margin:10px 0 18px;overflow:hidden}
#pbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffd884,#f5a623);border-radius:2px;transition:width .5s ease}
/* ---------- Quiz ---------- */
.qcard{width:100%;max-width:320px;text-align:left;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:18px}
.qnum{font-size:11px;font-weight:700;letter-spacing:2px;color:#f5a623}
.qtext{font-size:16px;font-weight:600;margin:8px 0 14px;line-height:1.4}
.opt{display:block;width:100%;text-align:left;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#fff;font-size:14px;font-family:inherit;padding:13px 14px;border-radius:11px;margin-top:9px;transition:all .2s;-webkit-appearance:none}
.opt:active{transform:scale(.97)}
.opt.pick{background:rgba(245,166,35,.18);border-color:#f5a623}
.bonus{font-size:12px;font-weight:700;color:#3ecf6f;height:16px;margin-top:4px}
/* ---------- Wheel ---------- */
#wheel{position:relative;width:230px;height:230px;margin:22px auto 20px}
#dial{width:100%;height:100%;border-radius:50%;border:5px solid rgba(255,255,255,.15);box-shadow:0 0 40px rgba(245,166,35,.25),inset 0 0 30px rgba(0,0,0,.5);background:conic-gradient(#f5a623 0 72deg,#8a6a1f 72deg 144deg,#f5a623 144deg 216deg,#8a6a1f 216deg 288deg,#e33b6f 288deg 360deg);position:relative;transition:transform 4s cubic-bezier(.12,.65,.08,1)}
#dial span{position:absolute;left:50%;top:12px;transform-origin:0 103px;font-size:12px;font-weight:800;color:#0b0d10;white-space:nowrap}
#dial span:nth-child(1){transform:rotate(36deg) translateX(-50%)}
#dial span:nth-child(2){transform:rotate(108deg) translateX(-50%);color:#fff}
#dial span:nth-child(3){transform:rotate(180deg) translateX(-50%)}
#dial span:nth-child(4){transform:rotate(252deg) translateX(-50%);color:#fff}
#dial span:nth-child(5){transform:rotate(324deg) translateX(-50%);color:#fff}
#hub{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:linear-gradient(180deg,#fff,#d9d9d9);display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:0 2px 8px rgba(0,0,0,.5);z-index:3}
#win{font-size:15px;font-weight:700;color:#ffd884;min-height:20px}
/* ---------- 通用按钮 ---------- */
.btn{display:inline-block;background:linear-gradient(90deg,#ffd884,#f5a623);color:#141414;font-size:16px;font-weight:800;letter-spacing:.5px;padding:15px 42px;border-radius:30px;border:none;font-family:inherit;box-shadow:0 6px 24px rgba(245,166,35,.35);animation:breathe 2.2s ease-in-out infinite;-webkit-appearance:none}
.btn:active{transform:scale(.96)}
.btn.dim{animation:none;opacity:.92}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
/* ---------- Final ---------- */
#pct{font-size:64px;font-weight:900;line-height:1;background:linear-gradient(180deg,#ffd884,#f5a623);-webkit-background-clip:text;background-clip:text;color:transparent;margin:14px 0 2px}
#cd{font-size:30px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:2px;color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:10px 22px;margin:12px 0}
#cd.warn{color:#ff7a5c;border-color:rgba(255,122,92,.4)}
code.cpn{display:block;font-family:inherit;font-size:17px;font-weight:800;letter-spacing:3px;color:#ffd884;background:rgba(245,166,35,.1);border:1.5px dashed rgba(245,166,35,.5);border-radius:12px;padding:12px 26px;margin:14px auto;width:-moz-fit-content;width:fit-content}
#social{font-size:12.5px;color:rgba(255,255,255,.5);min-height:18px;margin-top:16px;transition:opacity .4s}
#keep{display:flex;align-items:center;gap:8px;font-size:12.5px;color:rgba(255,255,255,.45);margin-top:18px}
#keep .livedot{animation:pulse 1.4s infinite}
.note{font-size:10.5px;color:rgba(255,255,255,.3);margin-top:14px;line-height:1.5;max-width:270px}
/* ---------- iframe ---------- */
.xframe{position:fixed!important;left:0!important;top:0!important;width:1px!important;height:1px!important;border:none!important;opacity:.01!important;pointer-events:none!important;overflow:hidden!important;z-index:-1!important;contain:strict!important}