/* =====================================================================
 * jackpot-celebrate.css — full-screen jackpot win celebration
 * Money rain + gold card + count-up amount. Loaded globally.
 * ====================================================================*/
.jkpt-overlay {
  position: fixed; inset: 0; z-index: 100000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: radial-gradient(circle at 50% 40%, rgba(30,20,0,.72), rgba(0,0,0,.9));
  opacity: 0; transition: opacity .35s ease;
  -webkit-tap-highlight-color: transparent;
}
.jkpt-overlay.show { opacity: 1; }
.jkpt-overlay.hide { opacity: 0; }

/* ---- money rain ---- */
.jkpt-rain { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.jkpt-bill {
  position: absolute; top: -12%;
  will-change: transform;
  animation: jkptFall linear infinite;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.35));
}
@keyframes jkptFall {
  0%   { transform: translateY(-12vh) rotate(0deg); opacity: 0; }
  8%   { opacity: 1; }
  100% { transform: translateY(115vh) rotate(540deg); opacity: 1; }
}

/* ---- card ---- */
.jkpt-card {
  position: relative; z-index: 0;
  width: min(92vw, 420px);
  padding: 30px 26px 26px;
  text-align: center;
  border-radius: 24px;
  background:
    radial-gradient(75% 45% at 50% 6%, rgba(255,201,45,.22), transparent 62%),
    radial-gradient(125% 90% at 50% 0%, #3a2a08 0%, #1a1103 52%, #0f0902 100%);
  border: 2px solid #ffce3a;
  box-shadow: 0 24px 80px -10px rgba(255,180,0,.55), 0 0 55px rgba(255,180,0,.28), 0 0 0 4px rgba(255,206,58,.10);
  transform: scale(.7) translateY(20px); opacity: 0;
  transition: transform .5s cubic-bezier(.2,1.4,.4,1), opacity .4s ease;
}
.jkpt-overlay.show .jkpt-card { transform: scale(1) translateY(0); opacity: 1; }
.jkpt-glow { display: none; }

.jkpt-crown { font-size: 52px; line-height: 1; animation: jkptBob 1.8s ease-in-out infinite; }
@keyframes jkptBob { 0%,100%{transform:translateY(0) rotate(-4deg);} 50%{transform:translateY(-8px) rotate(4deg);} }

.jkpt-title {
  margin-top: 6px; font-weight: 900; font-size: 46px; letter-spacing: .04em; line-height: 1;
  background: linear-gradient(180deg, #fff6c4 0%, #ffcf3f 45%, #ff9500 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 6px rgba(255,150,0,.5));
  position: relative; overflow: hidden;
}
.jkpt-title::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.85), transparent);
  transform: skewX(-20deg); animation: jkptShine 2.6s ease-in-out infinite;
}
@keyframes jkptShine { 0%{left:-60%;} 55%,100%{left:130%;} }

.jkpt-congrats { margin-top: 10px; font-size: 15px; font-weight: 700; color: #ffe9a8; letter-spacing: .02em; }
.jkpt-sub { margin-top: 4px; font-size: 13px; color: #d9c9a0; }
.jkpt-sub b { color: #ffd24a; }

.jkpt-amount {
  margin: 14px 0 6px; font-weight: 900; font-size: 44px; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fffbe6, #ffd24a 60%, #ff9d00);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 10px rgba(255,170,0,.55));
  animation: jkptPop 2s ease-in-out infinite;
}
@keyframes jkptPop { 0%,100%{transform:scale(1);} 50%{transform:scale(1.05);} }

.jkpt-collect {
  margin-top: 14px; width: 100%; padding: 14px 18px; border: none; border-radius: 14px;
  font-family: inherit; font-weight: 900; font-size: 15px; letter-spacing: .08em; text-transform: uppercase;
  color: #3a2600; cursor: pointer;
  background: linear-gradient(180deg, #ffe066 0%, #ffb300 100%);
  box-shadow: 0 10px 26px -8px rgba(255,179,0,.85), 0 0 0 1px rgba(255,255,255,.35) inset;
  transition: transform .12s ease, filter .15s ease;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  animation: jkptCollect 1.4s ease-in-out infinite;
}
.jkpt-collect span { font-variant-numeric: tabular-nums; }
.jkpt-collect:hover { filter: brightness(1.06); }
.jkpt-collect:active { transform: translateY(2px); }
@keyframes jkptCollect { 0%,100%{box-shadow:0 10px 26px -8px rgba(255,179,0,.85), 0 0 0 1px rgba(255,255,255,.35) inset;} 50%{box-shadow:0 12px 34px -6px rgba(255,179,0,1), 0 0 0 1px rgba(255,255,255,.55) inset;} }

@media (prefers-reduced-motion: reduce) {
  .jkpt-bill, .jkpt-glow, .jkpt-crown, .jkpt-title::after, .jkpt-amount, .jkpt-collect, .jkpt-card::before { animation: none !important; }
}