/* JACKPOT FIX STABIL MOBILE */
.jackpot{
  position:relative;
  overflow:hidden;
  width:100%;
  max-width:100%;
  background:#050505;
  border:1px solid rgba(212,161,42,.45);
  border-radius:22px;
  padding:24px 18px;
  box-shadow:0 0 20px rgba(255,215,0,.12);
}

.jackpot-title,
.jackpot-number{
  position:relative;
  z-index:2;
}

.jackpot-title{
  color:#ffd76a;
  font-weight:800;
  margin-bottom:10px;
  text-align:center;
  font-size:26px;
}

.jackpot-number{
  display:block;
  width:100%;
  max-width:100%;
  min-height:64px;

  font-size:42px;
  font-weight:900;
  color:#fff;
  text-align:center;

  white-space:nowrap;
  overflow:hidden;

  font-family:"Poppins", monospace;
  font-variant-numeric:tabular-nums;
  letter-spacing:0;

  text-shadow:
    0 0 10px rgba(255,215,106,.4),
    0 0 20px rgba(255,215,106,.2);

  transition:color .25s ease;
}

/* NEON LINE STABIL */
.neon-line{
  position:absolute;
  display:block;
  z-index:1;
  pointer-events:none;

  background:linear-gradient(
    90deg,
    transparent,
    #ffd700,
    #fff2a6,
    transparent
  );

  box-shadow:
    0 0 8px #ffd700,
    0 0 16px rgba(255,215,0,.5);
}

/* ATAS */
.neon-line.top{
  top:0;
  left:0;
  width:100%;
  height:2px;
  animation:neonFade 2s linear infinite;
}

/* KANAN */
.neon-line.right{
  top:0;
  right:0;
  width:2px;
  height:100%;
  background:linear-gradient(
    180deg,
    transparent,
    #ffd700,
    #fff2a6,
    transparent
  );
  animation:neonFade 2s linear infinite;
  animation-delay:.4s;
}

/* BAWAH */
.neon-line.bottom{
  bottom:0;
  left:0;
  width:100%;
  height:2px;
  animation:neonFade 2s linear infinite;
  animation-delay:.8s;
}

/* KIRI */
.neon-line.left{
  top:0;
  left:0;
  width:2px;
  height:100%;
  background:linear-gradient(
    180deg,
    transparent,
    #ffd700,
    #fff2a6,
    transparent
  );
  animation:neonFade 2s linear infinite;
  animation-delay:1.2s;
}

@keyframes neonFade{
  0%,100%{
    opacity:.35;
  }
  50%{
    opacity:1;
  }
}

/* ROLL TANPA GESER LAYOUT */
.roll{
  animation:rollJackpotSafe .35s ease;
}

@keyframes rollJackpotSafe{
  0%{
    opacity:.45;
    color:#fff;
  }

  50%{
    opacity:1;
    color:#ffd76a;
  }

  100%{
    opacity:1;
    color:#fff;
  }
}

/* MOBILE */
@media(max-width:768px){

  .jackpot{
    padding:20px 12px;
    border-radius:18px;
  }

  .jackpot-title{
    font-size:22px;
  }

  .jackpot-number{
    font-size:26px;
    min-height:38px;
    letter-spacing:0;
  }
}

/* HP KECIL */
@media(max-width:420px){

  .jackpot-number{
    font-size:22px;
    min-height:34px;
  }
}