:root{--bg:#05030a;--panel:#160c20e0;--panel-2:#221230e6;--border:#be5cff47;--border-strong:#d57eff85;--purple:#a855f7;--violet:#d946ef;--cyan:#38f5ff;--text:#fff;--muted:#bfa7d8;--lavender:#e9d5ff;--shadow:0 18px 70px #a855f738}*{box-sizing:border-box}html,body{background:var(--bg);min-height:100%;color:var(--text);margin:0;overflow:hidden}body{letter-spacing:0;font-family:Fredoka,Nunito Sans,ui-rounded,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button{font:inherit}.wheel-shell{width:100%;min-height:100dvh;padding:max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));background:radial-gradient(circle at 50% -18%,#a855f780,#0000 34%),radial-gradient(circle at 18% 88%,#38f5ff24,#0000 28%),linear-gradient(#090513,#05030a 62%,#030206);place-items:center;display:grid}.wheel-shell:before{content:"";pointer-events:none;opacity:.44;background-image:radial-gradient(circle,#fffc 0 1px,#0000 1.4px),radial-gradient(circle,#d946efcc 0 1px,#0000 1.2px);background-size:60px 60px,94px 94px;animation:42s linear infinite stars-drift;position:fixed;inset:0}.wheel-app{z-index:1;grid-template-rows:58px minmax(252px,1fr) 42px auto;gap:7px;width:min(100%,430px);height:min(100svh - 12px,920px);min-height:0;display:grid;position:relative;overflow:hidden}.identity-bar,.wheel-hero,.control-card{border:1px solid var(--border);box-shadow:inset 0 1px 0 #ffffff14, var(--shadow);background:linear-gradient(#221230e6,#0c0514e6)}.identity-bar{border-radius:28px;align-items:center;gap:12px;height:58px;padding:8px 10px;display:flex}.identity-orb{color:#fff;background:radial-gradient(circle at 32% 25%,#ffffffe6,#0000 14%),linear-gradient(135deg,#38bdf8,#8b5cf6 48%,#d946ef);border-radius:18px;flex:none;place-items:center;width:46px;height:46px;font-size:22px;font-weight:950;display:grid;box-shadow:0 0 28px #d946ef75}.identity-copy{flex-direction:column;flex:1;min-width:0;line-height:1.05;display:flex}.identity-copy strong{white-space:nowrap;font-size:20px}.identity-copy span{color:var(--muted);margin-top:3px;font-size:12px;font-weight:800}.tiny-pill{border:1px solid var(--border-strong);color:var(--lavender);background:#a855f72e;border-radius:999px;padding:12px 14px;font-weight:950;box-shadow:inset 0 1px #ffffff14}.wheel-hero{background:radial-gradient(circle at 50% 42%,#d946ef52,#0000 24%),radial-gradient(circle at 22% 20%,#38f5ff2e,#0000 28%),linear-gradient(155deg,#221230f0,#05030aeb);border-radius:32px;padding:14px;position:relative;overflow:hidden}.hero-stars{opacity:.44;background:radial-gradient(circle at 16% 22%,#ffffffd1 0 1px,#0000 2px),radial-gradient(circle at 70% 18%,#ffffffb8 0 1px,#0000 2px),radial-gradient(circle at 85% 58%,#38f5ffb3 0 1px,#0000 2px),radial-gradient(circle at 26% 74%,#d946efa6 0 1px,#0000 2px);position:absolute;inset:0}.wheel-stage{filter:blur(3px);background:radial-gradient(#38f5ff61,#0000 62%),radial-gradient(#d946ef6b,#0000 74%);border-radius:50%;height:42px;animation:2.8s ease-in-out infinite stage-glow;position:absolute;bottom:52px;left:13%;right:13%;transform:perspective(240px)rotateX(64deg)}.wheel-pointer{z-index:5;filter:drop-shadow(0 0 18px #ffffffe6);border-top:32px solid #fff;border-left:15px solid #0000;border-right:15px solid #0000;width:0;height:0;position:absolute;top:20px;left:50%;transform:translate(-50%)}.caster-wheel{aspect-ratio:1;max-height:270px;transform-style:preserve-3d;transform-origin:50%;background:conic-gradient(#38f5ff 0deg 45deg,#8b5cf6 45deg 90deg,#d946ef 90deg 135deg,#7c3aed 135deg 180deg,#facc15 180deg 225deg,#22d3ee 225deg 270deg,#2e1065 270deg 315deg,#f9a8d4 315deg 360deg);border:10px solid #ffffffc7;border-radius:50%;margin:auto;transition:transform 1.5s cubic-bezier(.14,.86,.18,1);position:absolute;inset:18px 36px 56px;box-shadow:0 0 68px #a855f7a6,inset 0 0 30px #05030ab8,inset 0 0 0 16px #05030a29}.wheel-prize{z-index:2;width:72px;transform:translate(-50%, -50%) rotate(var(--angle)) translateY(-90px) rotate(calc(-1 * var(--angle)));color:#fff;text-align:center;text-shadow:0 2px 8px #05030adb;font-size:11px;font-weight:950;line-height:.95;position:absolute;top:50%;left:50%}.wheel-prize:before{content:"";background:var(--segment-color);width:9px;height:9px;box-shadow:0 0 12px var(--segment-color);border:1px solid #ffffffb3;border-radius:50%;margin:0 auto 4px;display:block}.wheel-prize.alien{color:#fff7ad}.wheel-prize.stardust{color:#d8c7ef}.caster-wheel:before{content:"";border:2px dashed #ffffff57;border-radius:50%;position:absolute;inset:16px}.caster-wheel:after{content:"";z-index:-1;background:radial-gradient(circle,#d946ef61,#0000 64%);border-radius:50%;animation:3s ease-in-out infinite portal-pulse;position:absolute;inset:-18px}.caster-wheel.is-spinning{filter:saturate(1.3)brightness(1.1)}.wheel-ring{background:radial-gradient(circle,#0000 54%,#ffffff3d 55%,#0000 57%);border-radius:50%;position:absolute;inset:24px}.wheel-center{text-align:center;background:radial-gradient(circle at 35% 25%,#fff,#e9d5ff 20%,#8b5cf6 62%,#2e1065 100%);border:4px solid #ffffffc2;border-radius:50%;place-items:center;width:118px;height:118px;display:grid;position:absolute;inset:50%;transform:translate(-50%,-50%);box-shadow:0 0 26px #d946efa6}.wheel-center span{color:#fff;max-width:84px;font-size:14px;font-weight:950;line-height:1.05}.win-burst{pointer-events:none;z-index:8;position:absolute;inset:0;overflow:hidden}.win-burst i{--angle:calc(var(--i) * 20deg);width:8px;height:22px;transform:translate(-50%, -50%) rotate(var(--angle));background:linear-gradient(#38f5ff,#d946ef);border-radius:999px;animation:1.35s ease-out forwards shard-pop;position:absolute;top:44%;left:50%;box-shadow:0 0 16px #d946efcc}.result-toast{z-index:9;color:#fff;background:linear-gradient(135deg,#160c20eb,#391853db);border:1px solid #38f5ff5c;border-radius:18px;gap:1px;min-width:150px;padding:10px 12px;animation:.42s cubic-bezier(.2,.9,.2,1) toast-in;display:grid;position:absolute;top:14px;right:14px;box-shadow:0 0 28px #38f5ff29,inset 0 1px #ffffff14}.result-toast.alien{border-color:#d946ef85;box-shadow:0 0 34px #d946ef47,inset 0 1px #ffffff1a}.result-toast b{font-size:13px;line-height:1}.result-toast span{color:var(--muted);font-size:10px;font-weight:900}.hero-overlay{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:linear-gradient(#05030a2e,#0c0514e0);border:1px solid #d57eff57;border-radius:24px;justify-content:space-between;align-items:end;gap:10px;min-height:84px;padding:16px;display:flex;position:absolute;inset:auto 14px 14px}.hero-overlay p,.status-line p,.microcopy{margin:0}.hero-overlay p,.status-line p{color:var(--cyan);letter-spacing:.08em;text-transform:uppercase;font-size:10px;font-weight:950}.hero-overlay h1{max-width:230px;margin:4px 0 0;font-size:clamp(24px,8vw,34px);line-height:.92}.reward-stack{gap:6px;display:grid}.reward-stack span{min-width:116px;color:var(--lavender);text-align:center;background:#160c20c2;border:1px solid #d57eff4d;border-radius:999px;padding:7px 10px;font-size:12px;font-weight:950;display:block}.progress-rail{grid-template-columns:repeat(4,1fr);align-items:center;gap:7px;padding:1px 2px;display:grid}.rail-step{color:#e9d5ffad;background:#160c209e;border:1px solid #be5cff33;border-radius:999px;justify-content:center;align-items:center;gap:5px;height:38px;display:flex;position:relative}.rail-step span{background:#a855f72e;border-radius:50%;place-items:center;width:20px;height:20px;font-size:11px;font-weight:950;display:grid}.rail-step b{font-size:11px}.rail-step.done{color:#fff;background:linear-gradient(135deg,#38bdf838,#d946ef3d);border-color:#38f5ff61;box-shadow:0 0 18px #38f5ff1f}.control-card{border-radius:28px;padding:10px;overflow:hidden}.status-line{grid-template-columns:1.15fr .86fr 1fr;gap:8px;display:grid}.status-line>div{background:#ffffff0b;border:1px solid #d57eff3d;border-radius:16px;min-width:0;padding:8px 10px}.status-line strong{color:#fff;text-overflow:ellipsis;white-space:nowrap;margin-top:4px;font-size:13px;display:block;overflow:hidden}.action-grid{grid-template-columns:1fr 1fr;gap:8px;margin-top:8px;display:grid}.wide{grid-column:1/-1}.primary-button,.secondary-button{color:#fff;cursor:pointer;border:1px solid #ffffff24;border-radius:18px;min-height:46px;font-size:15px;font-weight:950;transition:transform .15s,filter .15s,box-shadow .15s}.primary-button{background:linear-gradient(135deg,#38bdf8 0%,#8b5cf6 45%,#d946ef 100%);box-shadow:0 12px 28px #d946ef52,inset 0 1px #ffffff3d}.secondary-button{background:linear-gradient(#ffffff12,#ffffff08);border-color:#d57eff47}.primary-button:active,.secondary-button:active,.tiny-pill:active{transform:scale(.985)}.primary-button:disabled,.secondary-button:disabled{cursor:not-allowed;filter:grayscale(.25)brightness(.7);opacity:.72}.microcopy{min-height:16px;color:var(--muted);margin-top:6px;font-size:11px;font-weight:800;line-height:1.2}.mini-chips{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:8px;display:grid;overflow:hidden}.mini-chips span{min-width:0;color:var(--lavender);text-align:center;white-space:nowrap;background:#05030a66;border:1px solid #d57eff33;border-radius:999px;padding:7px;font-size:10px;font-weight:950}@keyframes stars-drift{0%{transform:translate(0,0)}to{transform:translate(-94px,60px)}}@keyframes portal-pulse{0%,to{opacity:.5;transform:scale(.98)}50%{opacity:.94;transform:scale(1.05)}}@keyframes stage-glow{0%,to{opacity:.58;transform:perspective(240px)rotateX(64deg)scaleX(.94)}50%{opacity:1;transform:perspective(240px)rotateX(64deg)scaleX(1.06)}}@keyframes shard-pop{0%{opacity:0;transform:translate(-50%, -50%) rotate(var(--angle)) translateY(0) scale(.4)}12%{opacity:1}to{opacity:0;transform:translate(-50%, -50%) rotate(var(--angle)) translateY(-190px) scale(1)}}@keyframes toast-in{0%{opacity:0;transform:translateY(-8px)scale(.94)}to{opacity:1;transform:translateY(0)scale(1)}}@media (max-width:380px){.wheel-app{grid-template-rows:56px minmax(238px,1fr) 38px auto;gap:6px}.identity-bar{border-radius:24px;height:58px}.identity-copy strong{font-size:18px}.caster-wheel{max-height:238px;inset:18px 34px 62px}.wheel-center{width:100px;height:100px}.wheel-prize{width:62px;transform:translate(-50%, -50%) rotate(var(--angle)) translateY(-79px) rotate(calc(-1 * var(--angle)));font-size:10px}.hero-overlay{min-height:76px;padding:13px}.reward-stack span{min-width:102px;font-size:11px}.status-line{gap:6px}.status-line>div{padding:8px}.primary-button,.secondary-button{min-height:46px;font-size:14px}.mini-chips{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-height:760px){.wheel-shell{padding:max(4px, env(safe-area-inset-top)) max(4px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left))}.wheel-app{grid-template-rows:54px minmax(224px,1fr) 36px auto;gap:5px;height:min(100svh - 8px,760px)}.identity-bar{border-radius:22px;height:54px}.identity-orb{border-radius:15px;width:40px;height:40px}.wheel-hero{border-radius:26px;padding:10px}.caster-wheel{max-height:226px;inset:16px 38px 54px}.hero-overlay{border-radius:20px;min-height:68px;padding:12px;inset:auto 10px 10px}.hero-overlay h1{font-size:clamp(22px,7vw,30px)}.rail-step{height:34px}.status-line>div{padding:7px 8px}.primary-button,.secondary-button{min-height:44px}.microcopy{min-height:13px;font-size:10px}}@media (prefers-reduced-motion:reduce){.caster-wheel,.wheel-shell:before,.caster-wheel:after,.primary-button,.secondary-button,.tiny-pill{transition:none;animation:none}}