/* Jackpot Experience Styles — refined, balanced depth + motion */

/* ========== Card container ========== */
.jackpot-card {
  position: relative;
  border-radius: 1.5rem;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(16,185,129,0.08), transparent 55%),
    radial-gradient(120% 120% at 100% 0%, rgba(99,102,241,0.10), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(255,255,255,0.03);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  animation: cardGlow 4s ease-in-out infinite;
}

/* Neon rim + ambient sweep */
.jackpot-card::after{
  content:""; position:absolute; inset:0; border-radius: inherit; pointer-events:none;
  box-shadow: 0 0 0 1px rgba(20,184,166,0.18) inset, 0 0 60px rgba(16,185,129,0.12) inset;
}
.jackpot-card::before{
  content:""; position:absolute; inset:-1px; border-radius: inherit; pointer-events:none;
  background: linear-gradient(100deg, transparent 25%, rgba(42,243,152,.12) 40%, rgba(255,255,255,.18) 50%, rgba(99,102,241,.12) 60%, transparent 75%);
  transform: translateX(-45%);
  filter: blur(6px);
  animation: cardSweep 6s ease-in-out infinite;
  mask: radial-gradient(120% 85% at 50% 50%, transparent 45%, #000 70%);
}

@keyframes cardGlow{
  0%, 100% {
    box-shadow: 0 10px 30px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(255,255,255,0.03), 0 0 20px rgba(16,185,129,0.08);
  }
  50% {
    box-shadow: 0 15px 40px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.06), 0 0 35px rgba(16,185,129,0.15), 0 0 60px rgba(99,102,241,0.08);
  }
}
@keyframes cardSweep{ 0%{ transform: translateX(-45%); opacity:.25 } 50%{ transform: translateX(45%); opacity:.4 } 100%{ transform: translateX(-45%); opacity:.25 } }

/* ========== LIVE badge ========== */
.live-badge{
  display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px;
  background: linear-gradient(180deg,#FFA43C,#FF7A1A); color:#1e293b; font-weight:800; font-size:.7rem; letter-spacing:.4px;
  box-shadow: 0 0 0 2px rgba(255,184,76,.15), 0 6px 16px rgba(255,138,43,.35);
  position: relative;
}
.live-badge::before{ content:""; width:8px; height:8px; border-radius:50%; background:#10b981; box-shadow:0 0 0 0 rgba(16,185,129,.6); animation: livePulse 1.6s ease-out infinite; }
.live-badge::after{ content:""; position:absolute; inset:2px; border-radius:inherit; background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent); transform: translateX(-80%); filter: blur(1.2px); animation: badgeSweep 2.2s linear infinite; }
.live-badge:hover::after{ background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent); }
@keyframes livePulse{ 0%{ box-shadow:0 0 0 0 rgba(16,185,129,.55);} 70%{ box-shadow:0 0 0 10px rgba(16,185,129,0);} 100%{ box-shadow:0 0 0 0 rgba(16,185,129,0);} }
@keyframes badgeSweep{ to{ transform: translateX(80%);} }

/* ========== Jackpot value panel ========== */
.jackpot-value-wrapper{ position:relative; display:inline-block; padding:.6rem .9rem; border-radius:16px; background: linear-gradient(180deg, rgba(2,6,23,.65), rgba(15,23,42,.55)); border:1px solid rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 24px rgba(2,6,23,.35); }
.jackpot-value-wrapper::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.25) 50%, transparent 65%); opacity: calc(var(--sweep, 0) * 1); transform: translateX(-80%); animation: sweep 0.9s ease-out forwards; }
@keyframes sweep{ to { transform: translateX(80%); opacity: 0; } }

.jackpot-value{ display:flex; align-items:center; gap:.6rem; font-weight:900; letter-spacing:-.5px; color:#fff; text-shadow:0 2px 12px rgba(250,204,21,.15), 0 0 40px rgba(16,185,129,.12); background: linear-gradient(180deg, rgba(10,15,26,.92), rgba(6,9,18,.96)); border-radius:1.25rem; padding:.75rem 1.2rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 -6px 16px rgba(0,0,0,.55), 0 12px 24px rgba(0,0,0,.35); position:relative; }
/* Golden neon rim on the main value panel (same recipe as USDT badge glow) */
.jackpot-value::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  /* Brighter, wider neon stack */
  box-shadow:
    0 0 0 2px rgba(250,204,21,.34) inset,   /* stronger inner ring */
    0 0 0 1px rgba(250,204,21,.18),         /* subtle outer rim */
    0 8px 26px rgba(250,204,21,.34),        /* main ambient glow */
    0 0 42px rgba(250,204,21,.40),          /* halo */
    0 0 80px rgba(245,158,11,.25);          /* warm far falloff */
}
.jackpot-value::after{ content:""; position:absolute; inset:2px 6px auto 6px; height:46%; border-radius:1rem; background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0)); opacity:.45; pointer-events:none; }

.jackpot-value.flashy .jackpot-num{
  font-size: clamp(2.2rem, 4vw, 3.25rem);
  background: linear-gradient(120deg, #fbbf24 0%, #f59e0b 20%, #fbbf24 40%, #fde68a 60%, #fbbf24 80%, #f59e0b 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 20px rgba(250,204,21,0.25)) drop-shadow(0 0 35px rgba(245,158,11,0.15));
  animation: goldSweep 2.5s ease-in-out infinite;
  position: relative;
}

/* Reserve more horizontal room for the number, prevent jitter with tabular numerals */
#jackpotNum{ 
  display: inline-block; 
  min-width: 14ch; 
  text-align: right; 
  letter-spacing: 0.012em; 
  font-variant-numeric: tabular-nums; 
  font-feature-settings: 'tnum' 1, 'lnum' 1; 
}

@media (max-width: 1024px){
  #jackpotNum{ min-width: 12ch; letter-spacing: 0.010em; }
}
@media (max-width: 640px){
  #jackpotNum{ min-width: 9.5ch; letter-spacing: 0.008em; }
}
.jackpot-value.flashy .jackpot-num::after{ content:""; position:absolute; inset:-10% -4%; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.75) 50%, transparent 60%); mix-blend-mode: screen; filter: blur(1px); transform: translateX(-120%); animation: glint 3s ease-in-out infinite; pointer-events:none; }
@keyframes goldSweep{ 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes glint{ 0%,20%{ transform: translateX(-120%); opacity:0 } 40%{ opacity:.85 } 60%{ transform: translateX(120%); opacity:0 } 100%{ transform: translateX(120%); opacity:0 } }

.jackpot-currency{ padding:.25rem .5rem; border-radius:.6rem; background: rgba(255,255,255,.08); color: rgba(255,255,255,.9); border: 1px solid rgba(255,255,255,.12); font-size: .75rem; font-weight:700; position: relative; }
/* Disable golden neon on badge by default; opt-in with .is-neon if needed */
.jackpot-currency.is-neon::after{
  content:""; position:absolute; inset:-3px; border-radius:inherit; pointer-events:none;
  box-shadow:
    0 0 0 2px rgba(250,204,21,.18) inset,
    0 4px 16px rgba(250,204,21,.20),
    0 0 24px rgba(250,204,21,.25);
}
.jackpot-currency.is-neon:hover::after, .jackpot-currency.is-neon:focus-visible::after{
  box-shadow:
    0 0 0 2px rgba(250,204,21,.24) inset,
    0 6px 18px rgba(250,204,21,.25),
    0 0 30px rgba(250,204,21,.32);
}

/* Flash on increase */
.flash-pop{ animation: flashPop .7s cubic-bezier(.2,.9,.2,1); }
@keyframes flashPop{ 0%{ transform: scale(.98); box-shadow: 0 0 0 0 rgba(250,204,21,.0);} 50%{ transform: scale(1.02); box-shadow: 0 0 0 8px rgba(250,204,21,.10);} 100%{ transform: scale(1); box-shadow: 0 0 0 0 rgba(250,204,21,0);} }

/* Sparkles burst (for occasional effects) */
.jackpot-sparkles{ position:absolute; inset:0; pointer-events:none; overflow:visible; }
.jackpot-sparkles .spark{ position:absolute; top:50%; left:0; right:0; margin:auto; width:10px; height:10px; border-radius:50%; background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,255,255,.6) 45%, rgba(16,185,129,0.0) 70%); transform: translate(0,0) scale(.9); animation: sparkFly 1.1s ease-out forwards; filter: drop-shadow(0 0 6px rgba(254,240,138,.7)); }
@keyframes sparkFly{ 0%{ opacity: 0; transform: translate(0,0) scale(.6); } 8%{ opacity: 1; } 100%{ opacity: 0; transform: translate(var(--tx,40px), var(--ty,-20px)) scale(.9); } }

/* Top subtitle line */
.jackpot-sub{ color: rgba(255,255,255,.85); font-weight:700; letter-spacing:.6px; text-transform: uppercase; font-size: .8rem; }
.jackpot-sub .label-accent{ display:inline-block; width:8px; height:8px; border-radius:50%; background: radial-gradient(circle at 50% 50%, #10b981, #059669); box-shadow: 0 0 0 6px rgba(16,185,129,.14); margin-right:8px; vertical-align: middle; }
.jackpot-sub .dot{ opacity:.5; margin: 0 .35rem; }
.currency-label{ color:#a5b4fc; font-weight:800; }

/* ========== Golden light wave text effect ========== */
.golden-wave{
  position: relative;
  background: linear-gradient(100deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.85) 35%, #fbbf24 45%, #fde68a 50%, #f59e0b 55%, rgba(255,255,255,.85) 65%, rgba(255,255,255,.85) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent; /* Safari */
  text-shadow: 0 1px 10px rgba(250,204,21,.10);
  animation: waveGold 3.2s ease-in-out infinite;
  will-change: background-position;
}

/* ========== Brand logo motion & glow ========== */
.brand-logo{
  border-radius: 50%;
  will-change: transform, filter;
  transform-origin: 50% 50%;
  animation: brandWheel 24s linear infinite;
  box-shadow:
    0 0 0 1px rgba(250,204,21,.30) inset,
    0 0 10px rgba(250,204,21,.22),
    0 0 18px rgba(245,158,11,.18);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}
.brand-logo:hover,
.brand-logo:focus-visible{
  animation-duration: 8s;
  box-shadow:
    0 0 0 1.5px rgba(250,204,21,.40) inset,
    0 0 12px rgba(250,204,21,.28),
    0 0 24px rgba(245,158,11,.22);
}
@keyframes brandWheel{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .brand-logo{ animation: none; }
  [data-motion="force"] .brand-logo{ animation: brandWheel 24s linear infinite; }
}
/* Ensure nested spans (e.g., Tailwind .text-white) also display the wave */
.golden-wave *{
  color: inherit !important;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
/* Slight glow pass as the wave center crosses */
.golden-wave::after{
  content: "";
  position: absolute;
  inset: -10% -5%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 44%, rgba(255,255,255,.9) 50%, transparent 56%);
  mix-blend-mode: screen;
  filter: blur(1.2px);
  transform: translateX(-120%);
  animation: waveGlint 3.2s ease-in-out infinite;
}
@keyframes waveGold{
  0%,100%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
}
@keyframes waveGlint{
  0%,15%{ transform: translateX(-120%); opacity: 0; }
  40%{ opacity: .8; }
  70%{ transform: translateX(120%); opacity: 0; }
  100%{ transform: translateX(120%); opacity: 0; }
}

/* Countdown units (glass pills) */
.countdown{ gap:10px; }
.countdown .unit{ background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.12); border-radius: .9rem; padding: .35rem .6rem; min-width: 48px; text-align:center; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 -1px 0 rgba(0,0,0,.35); }
.countdown .num{ font-weight:800; letter-spacing:.6px; }
.countdown .label{ font-size:.7rem; color: rgba(255,255,255,.7); font-weight:700; }
.cd-blink{ animation: blink 1s infinite; }
@keyframes blink{ 0%,50%{ opacity:1 } 51%,100%{ opacity:.55 } }

/* ========== Dynamic Prize Trigger progress ========== */
/* Track */
#dynamicTriggerBlock .h-2.w-full{ position:relative; box-shadow: inset 0 2px 4px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.08); }
/* Bar */
#salesProgressBar{ position: relative; border-radius: 999px; background: linear-gradient(90deg,#10B981 0%,#34D399 60%,#22D3EE 100%) !important; box-shadow: 0 0 0 1px rgba(16,185,129,.35) inset, 0 6px 14px rgba(16,185,129,.35); will-change: transform; }
#salesProgressBar::after{ content:""; position:absolute; top:-40%; bottom:-40%; width:140px; left:-140px; border-radius:inherit; background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.75) 50%, transparent 80%); mix-blend-mode: screen; filter: blur(6px); animation: barShimmer 2.6s ease-in-out infinite; }
@keyframes barShimmer{ 0%{ left:-140px; opacity:0 } 35%{ opacity:.75 } 100%{ left: calc(100% + 40px); opacity:0 } }

/* Range/Badges */
#carryStatus{ background: linear-gradient(135deg, rgba(250,204,21,.2), rgba(249,115,22,.18)); color: #fde68a; border: 1px solid rgba(250,204,21,.35); }
#failSafeBadge{ background: linear-gradient(135deg, rgba(244,63,94,.18), rgba(251,113,133,.15)); color: #fecdd3; border: 1px solid rgba(251,113,133,.3); }

/* Responsive tuning */
@media (max-width: 640px){ .jackpot-value.flashy .jackpot-num{ font-size: clamp(2rem, 8vw, 2.4rem); } .jackpot-value-wrapper{ padding: .5rem .7rem; } }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .live-badge::after,
  .jackpot-value.flashy .jackpot-num::after,
  .jackpot-card::before,
  #salesProgressBar::after,
  .golden-wave,
  .golden-wave::after{ animation: none !important; }
}

/* ========== Sweep/glint effect toggles ========== */
/* Add these classes to <body> to disable specific white sweep/glint passes */
.no-card-sweep #jackpotModule.jackpot-card::before { opacity: 0 !important; animation: none !important; }
.no-bar-shimmer #dynamicTriggerBlock #salesProgressBar::after { opacity: 0 !important; animation: none !important; }
.no-text-glint #jackpotModule .jackpot-num::after,
.no-text-glint .golden-wave::after { opacity: 0 !important; animation: none !important; }
.no-badge-sweep #jackpotModule .live-badge::after { opacity: 0 !important; animation: none !important; }

/* Disable all in one go */
.no-sweeps #jackpotModule.jackpot-card::before,
.no-sweeps #dynamicTriggerBlock #salesProgressBar::after,
.no-sweeps #jackpotModule .jackpot-num::after,
.no-sweeps .golden-wave::after,
.no-sweeps #jackpotModule .live-badge::after { opacity: 0 !important; animation: none !important; }