/* rewards.css - Jackpot popup, jpwin notification, reward feed */
/* Rewards popup */
.jackpot-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:60;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.85)}
.jackpot-overlay.visible{display:flex}
.jackpot-popup{width:480px;background:radial-gradient(ellipse at top center,#1a1520 0%,#0d0e12 60%);border:1.5px solid rgba(252,213,53,0.25);border-radius:18px;overflow:hidden;animation:jackpotIn 0.5s cubic-bezier(0.34,1.56,0.64,1);position:relative;box-shadow:0 0 80px rgba(252,213,53,0.12),0 0 200px rgba(252,213,53,0.04),0 20px 60px rgba(0,0,0,0.7)}
@keyframes jackpotIn{0%{opacity:0;transform:scale(0.85) translateY(-30px)}100%{opacity:1;transform:scale(1) translateY(0)}}
.jp-topband{height:3px;background:linear-gradient(90deg,transparent,#FCD535,#f0a500,#FCD535,transparent);animation:jpBandShimmer 3s linear infinite}
@keyframes jpBandShimmer{0%{background-position:-200px 0}100%{background-position:200px 0}}
.jp-close{position:absolute;top:14px;right:16px;font-size:16px;color:#5E6673;cursor:pointer;z-index:2;transition:all 0.15s;line-height:1;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%}
.jp-close:hover{color:#EAECEF;background:rgba(234,236,239,0.08)}
.jp-header{text-align:center;padding:28px 24px 8px}
.jp-title{font-size:24px;font-weight:800;color:#EAECEF;letter-spacing:2px;text-transform:uppercase;margin-bottom:6px;font-family:'Plus Jakarta Sans',sans-serif}
.jp-title-gold{color:#FCD535;text-shadow:0 0 20px rgba(252,213,53,0.4)}
.jp-subtitle{font-size:12px;color:#5E6673;line-height:1.5}
.jp-divider{height:1px;margin:16px 24px;background:linear-gradient(90deg,transparent,rgba(252,213,53,0.2),transparent)}
/* Pyramid tiers — inverted: biggest at top */
.jp-tiers{padding:0 16px 20px;display:flex;flex-direction:column;align-items:center;gap:0}
.jp-tier{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:10px;transition:all 0.2s;position:relative;overflow:hidden}
.jp-tier::before{content:'';position:absolute;inset:0;border-radius:10px;opacity:0;transition:opacity 0.2s}
.jp-tier:hover::before{opacity:1}
/* Tier 1: Monthly Apex — widest, most dramatic */
.jp-tier.tier-grand{width:100%;background:linear-gradient(135deg,rgba(252,213,53,0.12) 0%,rgba(240,165,0,0.06) 100%);border:1.5px solid rgba(252,213,53,0.35);margin-bottom:6px;animation:tierGlow 2.5s ease infinite}
.jp-tier.tier-grand::before{background:linear-gradient(135deg,rgba(252,213,53,0.06),transparent)}
@keyframes tierGlow{0%,100%{box-shadow:0 0 15px rgba(252,213,53,0.08),inset 0 0 20px rgba(252,213,53,0.03)}50%{box-shadow:0 0 25px rgba(252,213,53,0.15),inset 0 0 30px rgba(252,213,53,0.06)}}
/* Tier 2: Weekly */
.jp-tier.tier-weekly{width:88%;background:linear-gradient(135deg,rgba(41,168,234,0.08) 0%,rgba(41,168,234,0.02) 100%);border:1px solid rgba(41,168,234,0.25);margin-bottom:6px}
.jp-tier.tier-weekly::before{background:linear-gradient(135deg,rgba(41,168,234,0.04),transparent)}
/* Tier 3: Daily */
.jp-tier.tier-daily{width:76%;background:linear-gradient(135deg,rgba(14,203,129,0.08) 0%,rgba(14,203,129,0.02) 100%);border:1px solid rgba(14,203,129,0.2);margin-bottom:6px}
.jp-tier.tier-daily::before{background:linear-gradient(135deg,rgba(14,203,129,0.04),transparent)}
/* Tier 4: Quick Pulse — smallest */
.jp-tier.tier-quick{width:64%;background:rgba(132,142,156,0.06);border:1px solid rgba(132,142,156,0.15)}
.jp-tier.tier-quick::before{background:linear-gradient(135deg,rgba(132,142,156,0.03),transparent)}
/* Tier icon */
.jp-tier-icon{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0}
.jp-tier.tier-grand .jp-tier-icon{background:rgba(252,213,53,0.15);color:#FCD535;width:52px;height:52px;font-size:28px;border-radius:14px;box-shadow:0 0 12px rgba(252,213,53,0.15)}
.jp-tier.tier-weekly .jp-tier-icon{background:rgba(41,168,234,0.12);color:#29A8EA;width:48px;height:48px;font-size:26px}
.jp-tier.tier-daily .jp-tier-icon{background:rgba(14,203,129,0.12);color:#0ecb81}
.jp-tier.tier-quick .jp-tier-icon{background:rgba(132,142,156,0.1);color:#848E9C;width:42px;height:42px;font-size:20px}
.jp-tier-info{flex:1;display:flex;flex-direction:column;gap:2px}
.jp-tier-name{font-size:13px;font-weight:700;color:#EAECEF}
.jp-tier.tier-grand .jp-tier-name{font-size:15px;font-weight:800;color:#FCD535}
.jp-tier-freq{font-size:10px;color:#5E6673;text-transform:uppercase;letter-spacing:0.5px}
.jp-tier-right{text-align:right;display:flex;flex-direction:column;gap:2px;align-items:flex-end}
.jp-tier-amount{font-size:15px;font-weight:800;color:#FCD535}
.jp-tier.tier-grand .jp-tier-amount{font-size:22px;font-weight:900;background:linear-gradient(135deg,#FCD535,#f0a500);-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 0 8px rgba(252,213,53,0.3))}
.jp-tier.tier-weekly .jp-tier-amount{color:#29A8EA;font-size:17px}
.jp-tier.tier-daily .jp-tier-amount{color:#0ecb81;font-size:15px}
.jp-tier.tier-quick .jp-tier-amount{color:#848E9C;font-size:14px}
.jp-tier-usd{font-size:10px;color:#5E6673;font-weight:500}
.jp-tier-timer{font-size:10px;color:#848E9C;font-family:'Fira Code',monospace;min-height:14px;line-height:14px}
.jp-tier.tier-grand .jp-tier-timer{color:#FCD535;font-size:11px}
/* Connecting lines between tiers */
.jp-connector{width:2px;height:10px;background:linear-gradient(180deg,rgba(252,213,53,0.2),rgba(252,213,53,0.05));margin:0 auto;flex-shrink:0}
/* Shimmer sweep on grand tier */
.jp-tier.tier-grand::after{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent 40%,rgba(252,213,53,0.06) 50%,transparent 60%);animation:tierSweep 4s ease-in-out infinite}
@keyframes tierSweep{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* Reward feed — top center of chart */
.reward-feed{position:absolute;top:15%;left:50%;transform:translate(-50%,0);z-index:8;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:8px}
.reward-toast{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;padding:10px 18px;border-radius:12px;background:rgba(13,14,18,0.96);border:1px solid rgba(252,213,53,0.25);color:#EAECEF;white-space:nowrap;animation:rewardSlide 10s ease forwards;box-shadow:0 4px 20px rgba(0,0,0,0.4)}
.reward-toast .rw-avatar{width:28px;height:28px;border-radius:50%;flex-shrink:0;object-fit:cover;background:#1a1d24}
.reward-toast .rw-info{display:flex;flex-direction:column;gap:1px}
.reward-toast .rw-name{color:#EAECEF;font-weight:700;font-size:13px}
.reward-toast .rw-detail{font-size:11px;color:#848E9C;font-weight:500}
.reward-toast .rw-detail .rw-tier{color:#FCD535}
.reward-toast .rw-amt{color:#0ecb81;font-weight:800;font-size:15px;margin-left:auto;padding-left:12px}
@keyframes rewardSlide{0%{opacity:0;transform:translateY(-10px)}8%{opacity:1;transform:translateY(0)}80%{opacity:1}100%{opacity:0;transform:translateY(-4px)}}

/* Jackpot trigger button */
.topbar-jackpot{font-size:11px;font-weight:800;color:#0a0b0e;background:linear-gradient(135deg,#FCD535,#f0a500);padding:3px 10px;border-radius:3px;letter-spacing:0.5px;cursor:pointer;transition:all 0.15s;animation:jpPulse 2s ease infinite;border:none}
.topbar-jackpot:hover{box-shadow:0 0 16px rgba(252,213,53,0.5);transform:scale(1.05)}
@keyframes jpPulse{0%,100%{box-shadow:0 0 0 0 rgba(252,213,53,0.4)}50%{box-shadow:0 0 0 6px rgba(252,213,53,0)}}

/* Bottom bar prize button */
.bb-prize-btn{font-size:11px;font-weight:700;color:#FCD535;background:rgba(252,213,53,0.08);padding:2px 10px;border-radius:3px;border:1px solid rgba(252,213,53,0.25);cursor:pointer;transition:all 0.15s}
.bb-prize-btn:hover{background:rgba(252,213,53,0.15);border-color:#FCD535}

/* Trading Reward WIN notification */
.jpwin-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:60;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.88)}
.jpwin-overlay.visible{display:flex}

/* Subtle light rays */
.jpwin-rays{position:absolute;width:600px;height:600px;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;animation:raysRotate 20s linear infinite;opacity:0.15}
@keyframes raysRotate{0%{transform:translate(-50%,-50%) rotate(0deg)}100%{transform:translate(-50%,-50%) rotate(360deg)}}
.jpwin-ray{position:absolute;top:0;left:50%;width:2px;height:50%;transform-origin:bottom center;background:linear-gradient(to top,rgba(252,213,53,0.6),transparent)}

/* Confetti */
.jpwin-confetti{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;pointer-events:none;z-index:3}
.jpwin-particle{position:absolute;animation:confettiExplode var(--dur,3s) cubic-bezier(0.25,0.46,0.45,0.94) var(--delay,0s) infinite;opacity:0}
@keyframes confettiExplode{0%{transform:translate(0,0) rotate(0deg) scale(1);opacity:1}15%{opacity:1}100%{transform:translate(var(--tx,0px),var(--ty,300px)) rotate(var(--rot,720deg)) scale(0.3);opacity:0}}

/* Main popup — dark with gold accents */
.jpwin-popup{width:420px;background:#0d0e12;border:1.5px solid rgba(252,213,53,0.4);border-radius:16px;overflow:hidden;animation:jpwinSlam 0.6s cubic-bezier(0.17,0.89,0.32,1.28);position:relative;z-index:2;box-shadow:0 0 80px rgba(252,213,53,0.15),0 30px 60px rgba(0,0,0,0.7)}
@keyframes jpwinSlam{0%{opacity:0;transform:scale(1.5) translateY(-30px)}50%{opacity:1;transform:scale(0.97)}70%{transform:scale(1.02)}100%{transform:scale(1)}}

/* Top gold gradient band */
.jpwin-topband{height:3px;background:linear-gradient(90deg,transparent,#FCD535,#f0a500,#FCD535,transparent)}

/* Close button */
.jpwin-close{position:absolute;top:16px;right:16px;font-size:16px;color:#5E6673;cursor:pointer;z-index:4;transition:all 0.15s;line-height:1;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%}
.jpwin-close:hover{color:#EAECEF;background:rgba(234,236,239,0.08)}

/* Header */
.jpwin-header{text-align:center;padding:28px 24px 0;position:relative}
.jpwin-badge{display:inline-block;font-size:11px;font-weight:800;color:#FCD535;letter-spacing:4px;text-transform:uppercase;margin-bottom:10px;padding:4px 16px;border:1px solid rgba(252,213,53,0.25);border-radius:20px;background:rgba(252,213,53,0.06)}
.jpwin-title{font-size:36px;font-weight:800;color:#EAECEF;letter-spacing:1px;line-height:1.15;font-family:'Plus Jakarta Sans',sans-serif}
.jpwin-title-gold{color:#FCD535}
.jpwin-subtitle{font-size:13px;color:#5E6673;margin-top:8px;line-height:1.5}

/* Divider */
.jpwin-divider{height:1px;margin:20px 24px 0;background:linear-gradient(90deg,transparent,rgba(252,213,53,0.2),transparent)}

/* Prize amount */
.jpwin-amount-box{text-align:center;padding:24px 24px 20px}
.jpwin-amount-label{font-size:11px;color:#5E6673;letter-spacing:2px;text-transform:uppercase;margin-bottom:10px}
.jpwin-amount{font-size:56px;font-weight:800;font-family:'Plus Jakarta Sans',sans-serif;color:#FCD535;letter-spacing:2px;text-shadow:0 0 40px rgba(252,213,53,0.25);line-height:1}

/* Winner wallet */
.jpwin-winner{text-align:center;padding:0 24px 20px;font-size:12px;color:#5E6673;display:flex;align-items:center;justify-content:center;gap:8px}
.jpwin-winner .wallet{color:#EAECEF;font-weight:600;font-size:13px;font-family:'Fira Code',monospace}

/* Actions area */
.jpwin-actions{padding:0 24px 24px;display:flex;flex-direction:column;gap:10px}

/* Claim button */
.jpwin-claim-btn{width:100%;padding:15px;border-radius:8px;font-size:15px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;background:#FCD535;color:#0a0b0e;transition:all 0.2s;border:none;cursor:pointer;position:relative;overflow:hidden}
.jpwin-claim-btn::after{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);animation:jpwinShine 3s ease infinite}
@keyframes jpwinShine{0%{left:-100%}100%{left:200%}}
.jpwin-claim-btn:hover{background:#ffe066;box-shadow:0 4px 24px rgba(252,213,53,0.4);transform:translateY(-1px)}

/* Share buttons row */
.jpwin-share-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.jpwin-share-btn{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 0;border-radius:8px;font-size:11px;font-weight:600;font-family:'Plus Jakarta Sans',sans-serif;color:#848E9C;background:#111318;border:1px solid #2B2F36;cursor:pointer;transition:all 0.15s;text-decoration:none}
.jpwin-share-btn:hover{color:#EAECEF;border-color:#5E6673;background:#1E2026}
.jpwin-share-btn svg{width:15px;height:15px;flex-shrink:0}