@import url('https://fonts.googleapis.com/css2?family=Inter:wght@600;700;800;900&display=swap');
:root{--sj-gold:#FFD700;--sj-gold-dark:#F4C542;--sj-gold-border:#E6BE3C;--sj-green:#22C55E;--sj-green-hover:#16A34A;--sj-dark-text:#1e293b;--sj-light-text:#64748b;--sj-bg-light:#f8fafc}
.sj-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#fff;z-index:999999;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;overflow:hidden;display:none}
.sj-modal-overlay.sj-active{display:block}
.sj-bg-pattern{position:fixed;width:100%;height:100%;background:radial-gradient(circle at 20% 30%,rgba(255,215,0,.03) 0,transparent 50%),radial-gradient(circle at 80% 70%,rgba(34,197,94,.03) 0,transparent 50%),#fff;z-index:0}
.sj-confetti-container,.sj-coins-container{position:fixed;width:100%;height:100%;z-index:2;pointer-events:none;overflow:hidden}
.sj-confetti-container{z-index:1}
.sj-confetti{position:absolute;width:10px;height:10px;opacity:0;animation:sjConfettiFall linear forwards}
.sj-confetti.gold{background:var(--sj-gold)}
.sj-confetti.green{background:var(--sj-green)}
.sj-confetti.orange{background:#ffa500}
@keyframes sjConfettiFall{0%{transform:translateY(-50px) rotateZ(0);opacity:0}10%,90%{opacity:1}100%{transform:translateY(calc(100vh + 50px)) rotateZ(720deg);opacity:0}}
.sj-coin{position:absolute;width:35px;height:35px;background:linear-gradient(135deg,var(--sj-gold) 0,#ffa500 100%);border-radius:50%;border:2px solid var(--sj-gold-border);box-shadow:0 4px 12px rgba(255,215,0,.4),inset 0 -2px 5px rgba(0,0,0,.2);opacity:0;animation:sjCoinFall linear forwards}
.sj-coin::before{content:'€';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:18px;font-weight:900;color:var(--sj-dark-text)}
@keyframes sjCoinFall{0%{transform:translateY(-50px) rotateY(0);opacity:0}10%{opacity:1}90%{opacity:.8}100%{transform:translateY(calc(100vh + 50px)) rotateY(1080deg);opacity:0}}
.sj-sparkles-container{position:fixed;width:100%;height:100%;z-index:3;pointer-events:none}
.sj-sparkle{position:absolute;width:6px;height:6px;background:var(--sj-gold);border-radius:50%;box-shadow:0 0 12px var(--sj-gold);opacity:0;animation:sjSparkleAnimation 2s ease-out forwards}
@keyframes sjSparkleAnimation{0%{transform:scale(0) rotate(0);opacity:0}50%{opacity:1}100%{transform:scale(2) rotate(180deg);opacity:0}}
.sj-content-wrapper{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90%;max-width:700px;z-index:100;text-align:center}
.sj-close-btn{position:fixed;top:24px;right:24px;width:44px;height:44px;background:#fff;border:2px solid #e2e8f0;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;z-index:1000;box-shadow:0 2px 8px rgba(0,0,0,.1);opacity:0;animation:sjFadeInBtn .5s ease-out .5s forwards}
@keyframes sjFadeInBtn{to{opacity:1}}
.sj-close-btn:hover{background:var(--sj-bg-light);transform:rotate(90deg) scale(1.1);border-color:var(--sj-gold);box-shadow:0 4px 12px rgba(255,215,0,.3)}
.sj-close-btn svg{width:20px;height:20px;stroke:var(--sj-dark-text);stroke-width:2.5}
.sj-jackpot-announcement{font-size:clamp(2.5rem,8vw,5.5rem);font-weight:900;background:linear-gradient(135deg,var(--sj-gold) 0,#ffa500 50%,var(--sj-gold) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;background-size:200% 200%;text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px;filter:drop-shadow(0 4px 8px rgba(255,215,0,.3));transform:scale(0);animation:sjJackpotEnter .8s cubic-bezier(.34,1.56,.64,1) forwards,sjGradientFlow 3s ease infinite}
@keyframes sjJackpotEnter{0%{transform:scale(0) rotate(-10deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes sjGradientFlow{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
.sj-casino-name{font-size:clamp(1.8rem,5vw,3rem);font-weight:800;color:var(--sj-dark-text);margin-bottom:8px;opacity:0;animation:sjFadeInUp .6s ease-out .2s forwards}
.sj-casino-rating{display:inline-block;padding:4px 12px;background:var(--sj-green);color:#fff;border-radius:8px;font-size:clamp(1rem,2.5vw,1.4rem);font-weight:700;margin-left:8px}
.sj-subtitle{font-size:clamp(1rem,2.5vw,1.3rem);font-weight:700;color:var(--sj-dark-text);margin-bottom:24px;opacity:0;animation:sjFadeInUp .6s ease-out .3s forwards}
@keyframes sjFadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.sj-bonus-container{background:linear-gradient(135deg,#fffbf0 0,#fff9e6 100%);border:4px solid var(--sj-gold-border);border-radius:20px;padding:36px 32px;margin-bottom:24px;position:relative;overflow:hidden;box-shadow:0 20px 60px rgba(255,215,0,.15),0 0 0 1px rgba(255,215,0,.1),inset 0 1px 0 rgba(255,255,255,.5);opacity:0;animation:sjFadeInScale .6s ease-out .5s forwards}
@keyframes sjFadeInScale{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
.sj-bonus-container::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);animation:sjShimmerRotate 4s linear infinite}
@keyframes sjShimmerRotate{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
.sj-bonus-container::after{content:'🏆';position:absolute;top:16px;right:16px;font-size:32px;opacity:.3;animation:sjFloat 3s ease-in-out infinite}
@keyframes sjFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.sj-bonus-text{font-size:clamp(1.8rem,5vw,3.2rem);font-weight:900;background:linear-gradient(135deg,#d97706 0,#f59e0b 50%,#d97706 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;background-size:200% 200%;line-height:1.3;position:relative;z-index:1;animation:sjGradientFlow 3s ease infinite;filter:drop-shadow(0 2px 4px rgba(217,119,6,.2))}
.sj-cta-container{opacity:0;animation:sjFadeInScale .6s ease-out .7s forwards}
.sj-cta-button{width:100%;padding:22px 44px;font-size:clamp(1.2rem,3.5vw,1.8rem);font-weight:900;color:#fff;background:linear-gradient(135deg,var(--sj-green) 0,#16a34a 100%);border:none;border-radius:14px;cursor:pointer;text-transform:uppercase;letter-spacing:1px;position:relative;overflow:hidden;box-shadow:0 0 0 4px var(--sj-gold),0 8px 24px rgba(34,197,94,.4),0 0 40px rgba(255,215,0,.3);transition:all .3s ease;animation:sjCtaPulse 2s ease-in-out infinite}
@keyframes sjCtaPulse{0%,100%{box-shadow:0 0 0 4px var(--sj-gold),0 8px 24px rgba(34,197,94,.4),0 0 40px rgba(255,215,0,.3);transform:scale(1)}50%{box-shadow:0 0 0 6px var(--sj-gold),0 12px 32px rgba(34,197,94,.5),0 0 60px rgba(255,215,0,.5);transform:scale(1.02)}}
.sj-cta-button::before{content:'';position:absolute;top:50%;left:50%;width:0;height:0;background:rgba(255,255,255,.3);border-radius:50%;transform:translate(-50%,-50%);transition:width .6s,height .6s}
.sj-cta-button:hover::before{width:500px;height:500px}
.sj-cta-button:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 0 0 6px var(--sj-gold),0 16px 40px rgba(34,197,94,.5),0 0 80px rgba(255,215,0,.6)}
.sj-cta-button:active{transform:translateY(-2px) scale(1.01)}
.sj-cta-text{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:12px}
.sj-cta-arrow{font-size:1.3em;animation:sjArrowBounce 1s ease-in-out infinite}
@keyframes sjArrowBounce{0%,100%{transform:translateX(0)}50%{transform:translateX(10px)}}
.sj-usps{margin-top:24px;display:grid;gap:12px;opacity:0;animation:sjFadeInUp .6s ease-out .9s forwards}
.sj-usp-item{display:flex;align-items:center;justify-content:center;gap:12px;padding:14px 24px;background:#fff;border:2px solid #e2e8f0;border-radius:12px;font-size:clamp(.9rem,2vw,1.05rem);font-weight:600;color:var(--sj-dark-text);box-shadow:0 2px 8px rgba(0,0,0,.04);transition:all .3s ease}
.sj-usp-item:hover{border-color:var(--sj-gold-border);transform:translateX(4px);box-shadow:0 4px 12px rgba(255,215,0,.15)}
.sj-usp-icon{font-size:1.3em}
@media (max-width:640px){.sj-bonus-container{padding:28px 20px}.sj-cta-button{padding:20px 36px}.sj-usps{margin-top:20px}.sj-usp-item{padding:12px 18px}}