/* Live daily-jackpot handoff. Loaded after app.css so this determinate layer
   augments the compact replay control without duplicating its base styling. */

/* Registering the progress as a number lets the hard gradient stop interpolate.
   It inherits because the animated icon is the button's ::before child. */
@property --jp-progress { syntax: '<number>'; inherits: true; initial-value: 0; }

body.layout-basic .jackpot-hero replay-panel .replay-reveal-btn.is-processing {
  min-height: 40px;
  gap: 0.36rem;
  padding: 0.42rem 0.6rem;
  border-color: rgba(231, 188, 89, 0.72);
  background:
    linear-gradient(90deg,
      rgba(245, 179, 36, 0.18) 0 calc(var(--jp-progress, 0) * 100%),
      rgba(0,0,0,0) calc(var(--jp-progress, 0) * 100%)),
    radial-gradient(circle at 18% -60%, rgba(255, 217, 128, 0.14), transparent 54%),
    linear-gradient(112deg, rgba(52, 12, 15, 0.98), rgba(32, 10, 13, 0.98) 54%, rgba(14, 7, 9, 0.99));
  color: #fff0bd;
  font-size: clamp(0.64rem, 2.6vw, 0.76rem);
  letter-spacing: 0.075em;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(15, 2, 4, 0.82),
    0 5px 16px rgba(20, 4, 7, 0.4);
  text-shadow: 0 1px 2px rgba(5, 7, 14, 0.88);
  transition: --jp-progress 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Chainlink blue reads against a graphite instrument rather than sitting on a
   second blue block. A faint warm edge ties it to the jackpot without making
   the waiting state look like a win. */
body.layout-basic .jackpot-hero replay-panel
  .replay-reveal-btn.is-processing:is([data-jp-stage="rng"], [data-jp-stage="rng-arrived"]) {
  border-color: rgba(148, 163, 184, 0.68);
  background:
    linear-gradient(90deg,
      rgba(74, 222, 128, 0.1) 0 calc(var(--jp-progress, 0) * 100%),
      rgba(0, 0, 0, 0) calc(var(--jp-progress, 0) * 100%)),
    radial-gradient(circle at 13% 50%, rgba(255,255,255,0.1), transparent 22%),
    linear-gradient(112deg,
      rgba(20, 22, 26, 0.98),
      rgba(34, 34, 40, 0.97) 58%,
      rgba(48, 37, 43, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    inset 0 -1px 0 rgba(0,0,0,0.5),
    0 5px 16px rgba(8, 10, 14, 0.35);
}

/* The key carries no second instrument of its own. The VRF wait is reported by the
   single Chainlink module bolted at the board's lower-right edge, which is where a player
   already looks for randomness; duplicating that as a bar inside the display
   put two progress readings on one control and buried the word itself. The
   key is now only the word, on the LED face. */
body.layout-basic .jackpot-hero replay-panel .replay-reveal-btn.is-processing::after {
  content: none;
}

/* No stage icon during the two RNG beats either: the lit module is the mark.
   The other stages keep their own icon, which is theirs alone. */
body.layout-basic .jackpot-hero replay-panel
  .replay-reveal-btn.is-processing:is([data-jp-stage="rng"], [data-jp-stage="rng-arrived"])::before {
  content: none;
}
body.layout-basic .jackpot-hero replay-panel
  .replay-reveal-btn.is-processing[data-jp-stage="coinflip"]::before {
  content: none;
}
body.layout-basic .jackpot-hero replay-panel
  .replay-reveal-btn.is-processing[data-jp-stage="packs"]::before {
  background: url("/app/assets/jackpot-stage-packs.svg") center/contain no-repeat;
  -webkit-mask: none;
  mask: none;
}
body.layout-basic .jackpot-hero replay-panel
  .replay-reveal-btn.is-processing[data-jp-stage="coinflip"] {
  border-color: rgba(110, 231, 183, 0.68);
  background:
    linear-gradient(90deg,
      rgba(52, 211, 153, 0.18) 0 calc(var(--jp-progress, 0) * 100%),
      transparent calc(var(--jp-progress, 0) * 100%)),
    radial-gradient(circle at 18% -60%, rgba(167, 243, 208, 0.15), transparent 52%),
    linear-gradient(112deg, rgba(17, 39, 39, 0.98), rgba(30, 50, 56, 0.97) 56%, rgba(37, 39, 54, 0.97));
}
body.layout-basic .jackpot-hero replay-panel
  .replay-reveal-btn.is-processing[data-jp-stage="packs"] {
  border-color: rgba(251, 191, 36, 0.72);
  background:
    linear-gradient(90deg,
      rgba(251, 191, 36, 0.18) 0 calc(var(--jp-progress, 0) * 100%),
      transparent calc(var(--jp-progress, 0) * 100%)),
    radial-gradient(circle at 18% -60%, rgba(253, 230, 138, 0.17), transparent 52%),
    linear-gradient(112deg, rgba(53, 36, 20, 0.98), rgba(65, 42, 29, 0.97) 56%, rgba(54, 34, 49, 0.97));
}
body.layout-basic .jackpot-hero replay-panel
  .replay-reveal-btn.is-processing[data-jp-stage="rng-arrived"] {
  border-color: rgba(134, 239, 172, 0.9);
  color: #dcfce7;
  background:
    linear-gradient(90deg, rgba(34, 197, 94, 0.17), rgba(34, 197, 94, 0.07)),
    radial-gradient(circle at 13% 50%, rgba(134, 239, 172, 0.14), transparent 23%),
    linear-gradient(112deg, rgba(16, 31, 25, 0.98), rgba(29, 43, 38, 0.97) 58%, rgba(42, 38, 42, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.2),
    inset 0 -1px 0 rgba(0,0,0,0.45),
    0 0 18px rgba(34,197,94,0.28);
}

/* The work pulse quickens as confirmed milestones advance. */
body.layout-basic .jackpot-hero replay-panel .replay-reveal-btn.is-processing::before,
body.layout-basic .jackpot-hero replay-panel .replay-reveal-btn.is-spinning::before {
  animation: jackpot-spin-flame 1.15s ease-in-out infinite;
}
body.layout-basic .jackpot-hero replay-panel .replay-reveal-btn.is-processing::before {
  animation-duration: calc(1.15s - var(--jp-progress, 0) * 0.55s);
}

@keyframes jackpot-spin-flame {
  50% { opacity: 0.55; transform: scale(0.82); filter: drop-shadow(0 0 9px rgba(147,197,253,0.9)); }
}

@media (prefers-reduced-motion: reduce) {
  body.layout-basic .jackpot-hero replay-panel .replay-reveal-btn::before { animation: none !important; }
  /* The fill remains because it conveys state; only its slide is removed. */
  body.layout-basic .jackpot-hero replay-panel .replay-reveal-btn.is-processing { transition: none !important; }
}

/* The live pipeline keeps its exact milestone fill and stage icons, but uses
   the same three-colour LED bank as the resting jackpot action. This final
   layer intentionally follows the stage-specific rules above. */
body.layout-basic .jackpot-hero replay-panel .replay-reveal-btn.is-processing {
  --jp-led-a: 52, 211, 153;
  --jp-led-b: 250, 204, 21;
  --jp-led-c: 56, 189, 248;
}
body.layout-basic .jackpot-hero replay-panel
  .replay-reveal-btn.is-processing:is([data-jp-stage="rng"], [data-jp-stage="rng-arrived"]) {
  --jp-led-a: 59, 130, 246;
  --jp-led-b: 167, 139, 250;
  --jp-led-c: 34, 211, 238;
}
body.layout-basic .jackpot-hero replay-panel
  .replay-reveal-btn.is-processing[data-jp-stage="coinflip"] {
  --jp-led-a: 16, 185, 129;
  --jp-led-b: 250, 204, 21;
  --jp-led-c: 34, 211, 238;
}
body.layout-basic .jackpot-hero replay-panel
  .replay-reveal-btn.is-processing[data-jp-stage="packs"] {
  --jp-led-a: 245, 158, 11;
  --jp-led-b: 244, 63, 94;
  --jp-led-c: 168, 85, 247;
}
body.layout-basic .jackpot-hero replay-panel
  .replay-reveal-btn.is-processing[data-jp-stage="rng-arrived"] {
  --jp-led-a: 34, 197, 94;
  --jp-led-b: 250, 204, 21;
  --jp-led-c: 45, 212, 191;
}

body.layout-basic .jackpot-hero replay-panel .replay-reveal-btn.is-processing,
body.layout-basic .jackpot-hero replay-panel
  .replay-reveal-btn.is-processing:is([data-jp-stage="rng"], [data-jp-stage="rng-arrived"]),
body.layout-basic .jackpot-hero replay-panel
  .replay-reveal-btn.is-processing[data-jp-stage="coinflip"],
body.layout-basic .jackpot-hero replay-panel
  .replay-reveal-btn.is-processing[data-jp-stage="packs"],
body.layout-basic .jackpot-hero replay-panel
  .replay-reveal-btn.is-processing[data-jp-stage="rng-arrived"] {
  border-color: transparent;
  background:
    linear-gradient(90deg,
      rgba(var(--jp-led-b), 0.24) 0 calc(var(--jp-progress, 0) * 100%),
      transparent calc(var(--jp-progress, 0) * 100%)) padding-box,
    radial-gradient(circle at 8% 40%, rgba(var(--jp-led-a), 0.4), transparent 34%) padding-box,
    radial-gradient(circle at 91% 55%, rgba(var(--jp-led-c), 0.34), transparent 37%) padding-box,
    linear-gradient(105deg, rgba(29, 7, 31, 0.98), rgba(34, 22, 8, 0.97) 49%, rgba(3, 25, 35, 0.99)) padding-box,
    linear-gradient(102deg, rgb(var(--jp-led-a)), rgb(var(--jp-led-b)) 48%, rgb(var(--jp-led-c))) border-box;
  background-color: transparent;
  color: #fffaf0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -2px 0 rgba(0, 0, 0, 0.52),
    0 0 9px rgba(var(--jp-led-a), 0.24),
    0 0 16px rgba(var(--jp-led-c), 0.14);
  text-shadow:
    0 0 5px rgba(var(--jp-led-b), 0.65),
    -2px 0 9px rgba(var(--jp-led-a), 0.28),
    2px 0 9px rgba(var(--jp-led-c), 0.26);
}