/* v5.1 shared unlock card: locked reward, steps left bar, shackle, light sweep, confetti canvas, live dot.
   Used by the guest page (locker.html) and the landing demo (index.html). */
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex:none;box-shadow:0 0 0 0 #38d3a466;animation:guest-ping 2.2s ease-out infinite}
@keyframes guest-ping{70%{box-shadow:0 0 0 9px #38d3a400}100%{box-shadow:0 0 0 0 #38d3a400}}
.locked-reward{position:relative;margin-top:20px;padding:16px 18px;border-radius:16px;border:1px solid #3a3466;background:linear-gradient(150deg,#1a1736,#111a2b 70%);overflow:hidden}
.lr-head{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px;font-weight:700;color:var(--gold)}
.lr-lock{width:24px;height:24px;flex:none;fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round}
.lr-lock rect{fill:#f8c56c22}
.lr-shackle{transform-origin:16px 9px;transform-box:view-box;transition:transform .45s cubic-bezier(.3,1.7,.5,1)}
.lr-secret{margin:10px 0 2px;font-size:17px;font-weight:750;letter-spacing:-.01em;color:#efe9ff;filter:blur(6px);user-select:none;overflow-wrap:anywhere;transition:filter .6s ease}
.lr-bar{height:6px;border-radius:99px;background:#241f45;overflow:hidden;margin-top:12px}
.lr-bar i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--violet),var(--cyan));transition:width .5s cubic-bezier(.2,.8,.2,1)}
.lr-ring{position:absolute;inset:0;border-radius:inherit;padding:2px;pointer-events:none;opacity:0;background:conic-gradient(from var(--lr-a,0deg),transparent 0 68%,var(--cyan) 84%,var(--violet) 94%,transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
@property --lr-a{syntax:"<angle>";initial-value:0deg;inherits:false}
.locked-reward.is-ready{border-color:#4d6f8a}
.locked-reward.is-ready .lr-head{color:#9ff0e8}
.locked-reward.is-ready .lr-lock{animation:guest-nudge 2.4s ease-in-out infinite}
@keyframes guest-nudge{0%,80%,100%{transform:rotate(0)}85%{transform:rotate(-9deg)}90%{transform:rotate(7deg)}95%{transform:rotate(-4deg)}}
.locked-reward.is-opening .lr-shackle{transform:translate(0,-2px) rotate(-36deg)}
.locked-reward.is-opening .lr-secret{filter:blur(0)}
.locked-reward.is-opening .lr-ring{animation:guest-sweep .95s ease-out forwards}
.locked-reward.is-opening .lr-lock{animation:none}
@keyframes guest-sweep{0%{opacity:1;--lr-a:0deg}85%{opacity:1}100%{opacity:0;--lr-a:360deg}}
#confetti{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:60;display:none}
#confetti.on{display:block}
@media(prefers-reduced-motion:reduce){.live-dot,.locked-reward.is-ready .lr-lock{animation:none!important}.lr-shackle,.lr-secret,.lr-bar i{transition:none}.locked-reward.is-opening .lr-ring{animation:none}}