.spin-intro{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;overflow:auto;overflow-x:hidden;padding:20px;background:linear-gradient(145deg,color-mix(in srgb,var(--page-bg,#f6f7fb) 88%,white) 0%,color-mix(in srgb,var(--primary,#16a34a) 9%,white) 52%,color-mix(in srgb,var(--accent,#f59e0b) 10%,white) 100%);font-family:Inter,system-ui,sans-serif}
.spin-intro-open{overflow:hidden}
.spin-panel{position:relative;width:min(520px,100%);padding:28px 30px 24px;text-align:center;border:1px solid #ffffffcc;border-radius:30px;background:#ffffffea;box-shadow:0 30px 90px color-mix(in srgb,var(--primary,#16a34a) 22%,transparent),0 1px 0 #fff inset;backdrop-filter:blur(18px);animation:spinPanelIn .55s cubic-bezier(.2,.8,.2,1)}
.spin-logo{display:block;max-width:170px;max-height:58px;object-fit:contain;margin:0 auto 14px}
.spin-kicker{margin:0 0 8px;color:var(--primary,#16a34a);font-weight:900;font-size:11px;letter-spacing:1.6px}
.spin-panel h2{margin:0;color:#172554;font-size:clamp(27px,5vw,40px);line-height:1.08;letter-spacing:-1.4px}
.spin-copy{max-width:390px;margin:12px auto 20px;color:#536078;line-height:1.5}
.spin-machine{position:relative;width:min(310px,85%);margin:auto;perspective:900px}
.spin-reel-window{height:92px;overflow:hidden;border:4px solid var(--primary,#16a34a);border-radius:24px;background:#fff;box-shadow:0 16px 35px color-mix(in srgb,var(--primary,#16a34a) 25%,transparent),inset 0 0 25px color-mix(in srgb,var(--primary,#16a34a) 10%,white);transform:rotateX(-2deg)}
.spin-reel{transform:translateY(0)}
.spin-item{height:92px;display:flex;align-items:center;justify-content:center;gap:11px;color:color-mix(in srgb,var(--primary,#16a34a) 72%,#172554);background:linear-gradient(135deg,#fff,color-mix(in srgb,var(--primary,#16a34a) 8%,white));font-size:21px}
.spin-item span{display:grid;place-items:center;width:38px;height:38px;border-radius:13px;color:#fff;background:linear-gradient(135deg,var(--accent,#f59e0b),color-mix(in srgb,var(--accent,#f59e0b) 75%,#ef4444));box-shadow:0 8px 16px color-mix(in srgb,var(--accent,#f59e0b) 32%,transparent)}
.spin-item .spin-product-icon{width:58px;height:58px;flex:0 0 58px;border:1px solid color-mix(in srgb,var(--primary,#16a34a) 14%,#fff);border-radius:18px;color:inherit;background:linear-gradient(145deg,#fff,color-mix(in srgb,var(--accent,#f59e0b) 10%,#fff));box-shadow:0 12px 24px rgba(15,23,42,.13),inset 0 1px 0 #fff;font-size:34px;line-height:1;filter:saturate(1.05);transform:rotate(-3deg)}
.spin-item .spin-product-icon img{display:block;width:100%;height:100%;object-fit:cover;border-radius:16px}
.spin-item b{min-width:0;text-align:left;line-height:1.15}
.spin-complete .spin-product-icon{animation:spinProductPop .7s cubic-bezier(.2,.8,.2,1)}
.spin-pointer{position:absolute;z-index:2;right:-12px;top:34px;color:var(--accent,#f59e0b);font-size:22px;filter:drop-shadow(0 3px 5px #0003)}
.spin-result{min-height:26px;margin:17px 0 5px;color:var(--primary,#16a34a);font-size:20px;font-weight:900}
.spin-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:13px auto 14px;max-width:390px}
.spin-actions button{border:0;border-radius:14px;padding:14px;font-size:17px;font-weight:850;cursor:pointer}
.spin-start,.spin-continue{color:#fff;background:linear-gradient(135deg,var(--primary,#16a34a),color-mix(in srgb,var(--primary,#16a34a) 72%,#0f172a));box-shadow:0 10px 22px color-mix(in srgb,var(--primary,#16a34a) 30%,transparent)}
.spin-skip{color:color-mix(in srgb,var(--primary,#16a34a) 72%,#172554);background:#fff;border:1px solid color-mix(in srgb,var(--primary,#16a34a) 24%,#d8d5e8)!important}
.spin-continue{grid-column:1/-1}
.spin-panel small{display:block;color:#7c8495;line-height:1.35}
.spin-glow{position:absolute;width:320px;height:320px;border-radius:50%;filter:blur(25px);opacity:.3;animation:spinFloat 5s ease-in-out infinite}
.spin-glow-a{left:-120px;top:-90px;background:var(--primary,#16a34a)}
.spin-glow-b{right:-130px;bottom:-100px;background:var(--accent,#f59e0b);animation-delay:-2s}
.spin-complete .spin-reel-window{box-shadow:0 18px 45px color-mix(in srgb,var(--primary,#16a34a) 34%,transparent),0 0 0 7px color-mix(in srgb,var(--primary,#16a34a) 12%,white)}
.spin-closing{opacity:0;transition:.35s}
.spin-closing .spin-panel{transform:scale(.95);transition:.35s}
@keyframes spinPanelIn{from{opacity:0;transform:translateY(22px) scale(.96)}to{opacity:1;transform:none}}
@keyframes spinFloat{50%{transform:translateY(25px) scale(1.08)}}
@keyframes spinProductPop{0%{transform:scale(.72) rotate(-10deg)}55%{transform:scale(1.12) rotate(4deg)}100%{transform:scale(1) rotate(-3deg)}}
@media(max-width:600px){.spin-intro{padding:12px}.spin-panel{padding:22px 16px 18px;border-radius:24px}.spin-panel h2{font-size:29px}.spin-copy{margin-bottom:16px}.spin-machine{width:88%}.spin-actions{grid-template-columns:1fr 1fr}.spin-item{font-size:18px}.spin-item .spin-product-icon{width:52px;height:52px;flex-basis:52px;border-radius:15px;font-size:30px}}

/* Form 2 uses a quiet, full-screen reel instead of a large landing-page card. */
.form-variant-clean .spin-intro{padding:0;background:linear-gradient(180deg,color-mix(in srgb,var(--primary) 12%,white),#fff 48%,color-mix(in srgb,var(--accent) 10%,white))}
.form-variant-clean .spin-panel{width:min(100%,430px);min-height:100vh;padding:28px 24px;display:flex;flex-direction:column;justify-content:center;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none}
.form-variant-clean .spin-logo{max-width:145px;max-height:44px;margin-bottom:22px}.form-variant-clean .spin-kicker{font-size:9px}.form-variant-clean .spin-panel h2{font-size:25px;letter-spacing:-.6px}.form-variant-clean .spin-copy{margin:8px auto 22px;font-size:12px}
.form-variant-clean .spin-machine{width:min(280px,82%)}.form-variant-clean .spin-reel-window{height:82px;border-width:2px;border-radius:15px;box-shadow:0 12px 28px color-mix(in srgb,var(--primary) 18%,transparent)}.form-variant-clean .spin-item{height:82px;font-size:18px}.form-variant-clean .spin-pointer{top:29px}
.form-variant-clean .spin-actions{max-width:300px;margin-top:10px}.form-variant-clean .spin-actions button{min-height:44px;padding:10px;border-radius:7px;font-size:14px}.form-variant-clean .spin-result{font-size:16px;margin-top:13px}.form-variant-clean .spin-panel small{max-width:315px;margin:2px auto 0;font-size:9px}.form-variant-clean .spin-glow{opacity:.14}
@media(min-width:700px){.form-variant-clean .spin-panel{min-height:680px;margin:20px auto;border-radius:18px;background:#ffffffb8;box-shadow:0 20px 55px rgba(15,23,42,.10)}}

/* V5.10.3: original, restrained 3D-style celebration around the reel */
.form-variant-clean .spin-intro:before,.form-variant-clean .spin-intro:after{position:absolute;z-index:0;display:grid;place-items:center;border-radius:30px;filter:drop-shadow(0 20px 24px rgba(15,23,42,.18));pointer-events:none;will-change:transform}
.form-variant-clean .spin-intro:before{content:"✦";left:max(5vw,28px);top:24%;width:125px;height:125px;color:#fff;font-size:50px;background:linear-gradient(145deg,var(--primary),var(--accent));box-shadow:inset 0 2px 0 #ffffffaa;transform:rotate(-12deg);animation:spinGiftFloat 7s ease-in-out infinite}
.form-variant-clean .spin-intro:after{content:"🛒";right:max(4vw,22px);bottom:20%;width:150px;height:118px;font-size:70px;background:linear-gradient(145deg,#fff,color-mix(in srgb,var(--accent) 18%,white));border:1px solid #fff;transform:rotate(8deg);animation:spinCartFloat 8s ease-in-out infinite}
.form-variant-clean .spin-panel{z-index:1;overflow:visible}
.form-variant-clean .spin-panel:before,.form-variant-clean .spin-panel:after{content:"";position:absolute;z-index:-1;width:18px;height:18px;border-radius:5px;background:var(--accent);box-shadow:70px 35px 0 var(--primary),-55px 75px 0 #fb7185,95px 130px 0 #60a5fa,-80px 165px 0 #a78bfa;opacity:.55;animation:spinConfettiDrift 9s linear infinite}
.form-variant-clean .spin-panel:before{left:-42px;top:15%}.form-variant-clean .spin-panel:after{right:-28px;top:5%;animation-delay:-4.5s;scale:.75}
.form-variant-clean .spin-machine:before{content:"BONUS";position:absolute;left:-66px;top:-20px;padding:8px 11px;border-radius:11px;background:linear-gradient(135deg,#fb7185,var(--accent));color:#fff;font-size:9px;font-weight:950;letter-spacing:.08em;box-shadow:0 10px 22px rgba(15,23,42,.18);transform:rotate(-9deg);animation:spinBadgePulse 4.5s ease-in-out infinite}
@keyframes spinGiftFloat{0%,100%{transform:translate3d(0,0,0) rotate(-12deg)}50%{transform:translate3d(12px,-15px,0) rotate(-4deg)}}
@keyframes spinCartFloat{0%,100%{transform:translate3d(0,0,0) rotate(8deg)}50%{transform:translate3d(-18px,-10px,0) rotate(2deg)}}
@keyframes spinConfettiDrift{0%,100%{translate:0 0;rotate:0}50%{translate:12px 22px;rotate:120deg}}
@keyframes spinBadgePulse{0%,100%{scale:1}50%{scale:1.07}}
@media(max-width:760px){.form-variant-clean .spin-intro:before{left:-28px;top:14%;width:72px;height:72px;font-size:28px;border-radius:20px}.form-variant-clean .spin-intro:after{right:-24px;bottom:13%;width:86px;height:70px;font-size:40px;border-radius:20px}.form-variant-clean .spin-panel:before,.form-variant-clean .spin-panel:after{opacity:.28}.form-variant-clean .spin-machine:before{left:-22px;top:-27px}}
@media(prefers-reduced-motion:reduce){.form-variant-clean .spin-intro:before,.form-variant-clean .spin-intro:after,.form-variant-clean .spin-panel:before,.form-variant-clean .spin-panel:after,.form-variant-clean .spin-machine:before{animation:none!important}}

/* V5.10.5 responsive/light-mode guard */
.form-variant-clean .spin-intro{color-scheme:light only;color:#172033!important}
.form-variant-clean .spin-panel{color:#172033!important}
@media(max-width:699px){
 .form-variant-clean .spin-intro{width:100%;min-width:0;min-height:100dvh;padding:0;background:linear-gradient(180deg,color-mix(in srgb,var(--primary) 9%,#fff),#fff 50%,color-mix(in srgb,var(--accent) 8%,#fff))!important}
 .form-variant-clean .spin-panel{width:100%;min-height:100dvh;margin:0;padding:20px 18px max(20px,env(safe-area-inset-bottom));border-radius:0;background:transparent!important}
 .form-variant-clean .spin-logo{max-width:145px;max-height:44px;margin-bottom:18px}
 .form-variant-clean .spin-panel h2{font-size:clamp(25px,7.5vw,31px);line-height:1.08}
 .form-variant-clean .spin-copy{max-width:330px;font-size:12px}
 .form-variant-clean .spin-machine{width:min(86%,310px)}
 .form-variant-clean .spin-intro:before,.form-variant-clean .spin-intro:after{display:none}
 .form-variant-clean .spin-panel:before,.form-variant-clean .spin-panel:after{opacity:.2}
 .form-variant-clean .spin-actions{width:min(100%,310px)}
 .form-variant-clean .spin-actions button{font-size:15px}
}