/* design-ui · Progressive Jackpot · reference-matched coded replacement */
/* design-ui · pre-emit critique: P5 H4 E5 S5 R5 V4 */
:root {
  --pj-font-display: "Arial Black", "Trebuchet MS", sans-serif;
  --pj-font-led: "Courier New", monospace;
  --pj-clear: transparent;
  --pj-black: oklch(0.045 0.01 240);
  --pj-black-soft: oklch(0.09 0.025 235);
  --pj-black-glass: oklch(0.07 0.035 225 / 0.94);
  --pj-white: oklch(0.985 0.006 220);
  --pj-led-white: oklch(0.95 0.015 215);
  --pj-blue: oklch(0.69 0.19 240);
  --pj-blue-deep: oklch(0.43 0.16 245);
  --pj-cyan: oklch(0.82 0.16 208);
  --pj-cyan-soft: oklch(0.76 0.12 210 / 0.38);
  --pj-cyan-glow: oklch(0.81 0.17 205 / 0.62);
  --pj-green: oklch(0.89 0.26 144);
  --pj-green-glow: oklch(0.85 0.27 143 / 0.6);
  --pj-purple-led: oklch(0.76 0.15 277);
  --pj-shadow: oklch(0 0 0 / 0.86);
  --pj-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

.progressive-jackpot {
  position: relative;
  isolation: isolate;
  display: block;
  width: 100%;
  height: clamp(4.5rem, 12.12vw, 14.25rem);
  min-width: 0;
  margin: 0 auto;
  overflow: hidden;
  container-type: inline-size;
  scroll-margin-top: 35vh;
  background: var(--pj-black);
  filter: drop-shadow(0 0 1.15rem var(--pj-cyan-soft));
}

.progressive-jackpot,
.progressive-jackpot * {
  box-sizing: border-box;
}

.pj-bezel {
  position: absolute;
  z-index: 2;
  inset: 10% 3.7%;
  display: grid;
  grid-template-columns: minmax(0, 31%) minmax(0, 69%);
  align-items: center;
  min-width: 0;
  padding: 1.35% 4.3% 1.35% 5.7%;
  overflow: hidden;
  border: clamp(0.1rem, 0.16vw, 0.2rem) solid var(--pj-cyan);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--pj-black-glass), var(--pj-black) 54%);
  box-shadow:
    0 0 0.7rem var(--pj-cyan-glow),
    inset 0 0 1.2rem var(--pj-cyan-soft),
    inset 0 -0.7rem 1.1rem var(--pj-shadow);
}

.pj-bezel::before {
  position: absolute;
  inset: 0 2% 49%;
  content: "";
  pointer-events: none;
  border-radius: 999px 999px 42% 42%;
  background: linear-gradient(180deg, var(--pj-cyan-soft), var(--pj-clear));
  opacity: 0.9;
}

.pj-bezel::after {
  position: absolute;
  inset: 10% 2% auto;
  height: 1px;
  content: "";
  background: var(--pj-cyan);
  opacity: 0.62;
  box-shadow: 0 0 0.6rem var(--pj-cyan-glow);
}

.pj-end-cap {
  position: absolute;
  z-index: 1;
  top: 24%;
  width: 7.5%;
  height: 52%;
  border-radius: 999px;
  background: var(--pj-black-soft);
  box-shadow: 0 0 1.25rem var(--pj-green-glow);
}

.pj-end-cap--left { left: 1.5%; }
.pj-end-cap--right { right: 1.5%; }

.pj-end-light {
  position: absolute;
  z-index: 3;
  top: 31%;
  width: 2.2%;
  height: 38%;
  border-radius: 999px;
  background: var(--pj-green);
  box-shadow: 0 0 0.75rem var(--pj-green), 0 0 1.8rem var(--pj-green-glow);
  animation: pj-pulse 1.7s var(--pj-ease-out) infinite alternate;
}

.pj-end-light--left { left: 4.2%; }
.pj-end-light--right { right: 4.2%; }

.pj-title {
  position: relative;
  z-index: 2;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-right: 7%;
  font-family: var(--pj-font-display);
  text-align: center;
  text-transform: uppercase;
  transform: translateY(-2%);
}

.pj-title__progressive {
  color: var(--pj-white);
  font-size: clamp(0.47rem, 1.45cqi, 1.75rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-shadow: 0 0 0.45rem var(--pj-shadow);
  white-space: nowrap;
}

.pj-title__jackpot {
  color: var(--pj-blue);
  font-size: clamp(1.08rem, 4.2cqi, 5.2rem);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.84;
  text-shadow: 0 0 0.45rem var(--pj-blue-deep), 0 0.16rem 0 var(--pj-black);
  white-space: nowrap;
}

.pj-meter {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  min-height: 58%;
  gap: clamp(0.35rem, 1.4cqi, 1.8rem);
  padding: 1.3% 5.3%;
  overflow: hidden;
  border: clamp(0.12rem, 0.22vw, 0.28rem) dotted var(--pj-cyan);
  border-radius: 999px;
  background: var(--pj-black);
  box-shadow: inset 0 0 1.25rem var(--pj-shadow), 0 0 0.8rem var(--pj-cyan-soft);
}

.pj-meter::before,
.pj-meter::after {
  position: absolute;
  z-index: -1;
  top: -12%;
  width: 23%;
  height: 54%;
  content: "";
  border-radius: 100% 100% 38% 38%;
  background: linear-gradient(180deg, var(--pj-cyan), var(--pj-blue-deep));
  opacity: 0.88;
}

.pj-meter::before { left: -3%; transform: rotate(-5deg); }
.pj-meter::after { right: -3%; transform: rotate(5deg); }

.pj-currency,
.pj-value {
  position: relative;
  z-index: 2;
  display: block;
  min-width: 0;
  font-family: var(--pj-font-led);
  font-weight: 700;
  letter-spacing: 0.015em;
  line-height: 1;
  white-space: nowrap;
}

.pj-currency {
  color: var(--pj-purple-led);
  font-size: clamp(0.78rem, 3.1cqi, 3.85rem);
  text-shadow: 0 0 0.55rem var(--pj-cyan-soft);
}

.pj-value {
  overflow: hidden;
  color: var(--pj-led-white);
  font-size: clamp(0.72rem, 3.25cqi, 4rem);
  text-overflow: clip;
  text-shadow: 0 0 0.45rem var(--pj-white);
}

.progressive-jackpot[data-running="true"] .pj-bezel {
  animation: pj-breathe 2.8s var(--pj-ease-out) infinite alternate;
}

@keyframes pj-pulse {
  from { opacity: 0.68; transform: scaleY(0.88); }
  to { opacity: 1; transform: scaleY(1); }
}

@keyframes pj-breathe {
  from { filter: brightness(0.92); }
  to { filter: brightness(1.08); }
}

@container (max-width: 500px) {
  .pj-bezel {
    grid-template-columns: minmax(0, 32%) minmax(0, 68%);
    padding-inline: 6.4% 5%;
  }

  .pj-title__progressive { letter-spacing: 0; }
  .pj-meter { gap: 0.28rem; padding-inline: 4.5%; }
}

@media (prefers-reduced-motion: reduce) {
  .pj-end-light,
  .progressive-jackpot[data-running="true"] .pj-bezel {
    animation: none;
  }
}