.pb-banner {
  --pb-gold: #f9bb22;
  --pb-ink: hsl(0, 0%, 10%);
  --pb-cycle: 7s;                     
  --pb-h: 46px;                       
  --pb-u: calc(var(--pb-h) / 40);     
  
  width: 100%;
  height: var(--pb-h);
  display: -webkit-box;
  display: -webkit-flex;
  display: grid;
  place-items: center;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  overflow: hidden;
  background: var(--pb-ink);
  position: absolute;
  bottom: 0;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.pb-banner, .pb-banner * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.gamelists-wrapper ul .pb-new-promo-anim.selected:after{
 bottom:0px;
}
.pb-stage {
  width: 118px;
  max-width: 100%;
  height: calc(40 * var(--pb-u));
  overflow: hidden;
  position: relative;
  right:14px;
}
.pb-stage > * { position: absolute; }
.pb-layer {
  -webkit-animation-duration: var(--pb-cycle);
  animation-duration: var(--pb-cycle);
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.pb-stage p {
  padding: 0;
  margin: 0;
}
.pb-new-promo-anim {
  padding: 0 !important;
  margin: 0 !important;
  width: 116px;
  top: 16px;
}
.pb-text {
  margin: 0;
  line-height: 1;
  white-space: nowrap;
}
.pb-new-promo-anim.slots_promo_anim{
  width: 100px;
}
.slots_promo_anim .promo_count {
  left: 65%;
}
.slots_promo_anim .pb-stage{
 right: 10px;
 top: 4px;
}
.new_promo_tlp.slots_promo_anim  .promo_count{
    top:20% !important;
}
.new_promo_tlp .promo_count{
 border:1px solid #f9bb22 !important;
 top:25% !important;
}

/* "Promo" — finishes at 4s (57.143% of 7s cycle), then holds */
.pb-promo {
  left: calc(25.985 * var(--pb-u));
  top: calc(11.763 * var(--pb-u));
  -webkit-animation-name: pb-promo-fade, pb-promo-move;
  animation-name: pb-promo-fade, pb-promo-move;
}
 .promo_count{
  width: 24px !important;
  height: 24px !important;
  border: 1px solid #f9bb22;
  font-size: 10px;
  top: 5px !important;
  position: relative;
  left: 78%;
}
@-webkit-keyframes pb-promo-fade {
  0%, 31.429% { opacity: 0; }
  34.286%, 57.143%, 100% { opacity: 1; }
}
@keyframes pb-promo-fade {
  0%, 31.429% { opacity: 0; }
  34.286%, 57.143%, 100% { opacity: 1; }
}
@-webkit-keyframes pb-promo-move {
  0% { -webkit-transform: translate(calc(-3 * var(--pb-u)), calc(-4.944 * var(--pb-u))); }
  31.429% { -webkit-transform: translate(0, calc(-4.944 * var(--pb-u))); }
  38.571% { -webkit-transform: translate(0, calc(0.056 * var(--pb-u))); }
  51.429%, 57.143%, 100% { -webkit-transform: translate(0, 0); }
}
@keyframes pb-promo-move {
  0% { transform: translate(calc(-3 * var(--pb-u)), calc(-4.944 * var(--pb-u))); }
  31.429% { transform: translate(0, calc(-4.944 * var(--pb-u))); }
  38.571% { transform: translate(0, calc(0.056 * var(--pb-u))); }
  51.429%, 57.143%, 100% { transform: translate(0, 0); }
}

/* tilted "NEW" tag */
.pb-tag {
  left: calc(10.658 * var(--pb-u));
  top: calc(6.602 * var(--pb-u));
  font: 500 calc(9.625 * var(--pb-u))/1 "PB Roboto", "Segoe UI", system-ui, sans-serif;
  color: var(--pb-gold);
  -webkit-animation-name: pb-tag-fade, pb-tag-move;
  animation-name: pb-tag-fade, pb-tag-move;
}
.pb-banner-casino .pb-tag {left: calc(11.658 * var(--pb-u));}
@-webkit-keyframes pb-tag-fade {
  0%, 38.571% { opacity: 0; }
  40%, 57.143%, 100% { opacity: 1; }
}
@keyframes pb-tag-fade {
  0%, 38.571% { opacity: 0; }
  40%, 57.143%, 100% { opacity: 1; }
}
@-webkit-keyframes pb-tag-move {
  0%, 38.571% { -webkit-transform: translate(calc(-33.299 * var(--pb-u)), calc(21.853 * var(--pb-u))) rotate(-30deg); }
  42.857%, 57.143%, 100% { -webkit-transform: translate(0, 0) rotate(-30deg); }
}
@keyframes pb-tag-move {
  0%, 38.571% { transform: translate(calc(-33.299 * var(--pb-u)), calc(21.853 * var(--pb-u))) rotate(-30deg); }
  42.857%, 57.143%, 100% { transform: translate(0, 0) rotate(-30deg); }
}

/* gold circle that collapses at the start */
.pb-wipe {
  left: calc(13.327 * var(--pb-u));
  top: calc(-18.971 * var(--pb-u));
  width: calc(73.914 * var(--pb-u));
  height: calc(73.914 * var(--pb-u));
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background: var(--pb-gold);
  -webkit-animation-name: pb-wipe;
  animation-name: pb-wipe;
}
@-webkit-keyframes pb-wipe {
  0% { -webkit-transform: scale(1.678); }
  7.143%, 57.143%, 100% { -webkit-transform: scale(0); }
}
@keyframes pb-wipe {
  0% { transform: scale(1.678); }
  7.143%, 57.143%, 100% { transform: scale(0); }
}

/* scrolling "NEW" ticker */
.pb-ticker {
  left: calc(-65.517 * var(--pb-u));
  top: calc(16.564 * var(--pb-u));
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  font: 500 calc(7.007 * var(--pb-u))/1 "PB Roboto", "Segoe UI", system-ui, sans-serif;
  color: var(--pb-gold);
  -webkit-animation-name: pb-ticker-fade, pb-ticker-move;
  animation-name: pb-ticker-fade, pb-ticker-move;
}
.pb-ticker span {
  -webkit-box-flex: 0;
  -webkit-flex: none;
  flex: none;
  width: calc(22 * var(--pb-u));
}
@-webkit-keyframes pb-ticker-fade {
  0%, 7.143% { opacity: 0; }
  10%, 57.143%, 100% { opacity: 1; }
}
@keyframes pb-ticker-fade {
  0%, 7.143% { opacity: 0; }
  10%, 57.143%, 100% { opacity: 1; }
}
@-webkit-keyframes pb-ticker-move {
  0%, 10% { -webkit-transform: translateX(0); }
  31.429%, 57.143%, 100% { -webkit-transform: translateX(calc(-135 * var(--pb-u))); }
}
@keyframes pb-ticker-move {
  0%, 10% { transform: translateX(0); }
  31.429%, 57.143%, 100% { transform: translateX(calc(-135 * var(--pb-u))); }
}

/* gradient ring */
.pb-ring {
  left: calc(19 * var(--pb-u));
  top: calc(-11 * var(--pb-u));
  width: calc(62 * var(--pb-u));
  height: calc(62 * var(--pb-u));
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background: linear-gradient(191.81deg, rgba(241,229,229,0) 56.67%, rgba(242,224,205,.125) 60.74%, rgba(243,218,180,.25) 64.81%, rgba(244,213,156,.375) 68.89%, rgba(245,208,132,.5) 72.96%, rgba(246,203,107,.625) 77.03%, rgba(247,198,83,.75) 81.11%, rgba(248,192,58,.875) 85.18%, rgb(249,187,34) 89.25%);
  -webkit-mask: radial-gradient(closest-side, transparent 93.55%, #000 93.55%);
          mask: radial-gradient(closest-side, transparent 93.55%, #000 93.55%);
  opacity: 0;
  -webkit-animation-name: pb-ring-fade, pb-ring-motion;
  animation-name: pb-ring-fade, pb-ring-motion;
}
@-webkit-keyframes pb-ring-fade {
  0%, 34.286% { opacity: 0; }
  35.714%, 42.857% { opacity: 1; }
  44.286%, 57.143%, 100% { opacity: 0; }
}
@keyframes pb-ring-fade {
  0%, 34.286% { opacity: 0; }
  35.714%, 42.857% { opacity: 1; }
  44.286%, 57.143%, 100% { opacity: 0; }
}
@-webkit-keyframes pb-ring-motion {
  0%, 35.714% { -webkit-transform: rotate(0deg) scale(1); }
  42.857% { -webkit-transform: rotate(360deg) scale(1.66667); }
  44.286%, 57.143%, 100% { -webkit-transform: rotate(360deg) scale(1.8); }
}
@keyframes pb-ring-motion {
  0%, 35.714% { transform: rotate(0deg) scale(1); }
  42.857% { transform: rotate(360deg) scale(1.66667); }
  44.286%, 57.143%, 100% { transform: rotate(360deg) scale(1.8); }
}

/* "12" badge */
.pb-badge {
  -webkit-transform-origin: calc(-1.042 * var(--pb-u)) calc(10.798 * var(--pb-u));
  transform-origin: calc(-1.042 * var(--pb-u)) calc(10.798 * var(--pb-u));
  opacity: 0;
  -webkit-animation-name: pb-badge-fade, pb-badge-pulse;
  animation-name: pb-badge-fade, pb-badge-pulse;
}

@-webkit-keyframes pb-badge-fade {
  0%, 47.143% { opacity: 0; }
  50%, 57.143%, 100% { opacity: 1; }
}
@keyframes pb-badge-fade {
  0%, 47.143% { opacity: 0; }
  50%, 57.143%, 100% { opacity: 1; }
}
@-webkit-keyframes pb-badge-pulse {
  0%, 50% { -webkit-transform: scale(1); }
  52.857% { -webkit-transform: scale(1.1); }
  55.714%, 57.143%, 100% { -webkit-transform: scale(1); }
}
@keyframes pb-badge-pulse {
  0%, 50% { transform: scale(1); }
  52.857% { transform: scale(1.1); }
  55.714%, 57.143%, 100% { transform: scale(1); }
}

/* no motion: freeze on the finished/held frame */
@media (prefers-reduced-motion: reduce) {
  .pb-layer {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
    -webkit-animation-delay: -4s;   /* lands right at the 4s finish point, inside the hold */
    animation-delay: -4s;
  }
} 
@media only screen and (min-width:768px){
   .new_promo_tlp .promo_count{
      right:7px;
      top:9px;
   }
   .pb-new-promo-anim{
      width:120px
   }
 }  
 @media only screen and (max-width: 499px){
   .new_promo_tlp .promo_count{
      left: 65%;
      top: 14% !important;
   }
   .pb-new-promo-anim{
      width:100px
   }
   .pb-stage {
      right: 7px;
      top: 5px;
   }
   .gamelists-wrapper ul .pb-new-promo-anim.selected:after{
    bottom: 5px;
   }
 }
  @media only screen and (max-width: 375px){
      .new_promo_tlp .promo_count {
         left: 62%;
      }
      .new_promo_tlp.slots_promo_anim .promo_count {
         left: 65%;
      }
 }
   @media only screen and (min-width: 768px) and (max-width: 1024px) {
            .pb-banner-casino .pb-ring {
                width: calc(82 * var(--pb-u));
                height: calc(82 * var(--pb-u));
            }
            .pb-stage {
               width: 140px;
            }
            .pb-banner-casino .pb-stage {
              width: 150px;
            } 
            .gamelists-wrapper ul .pb-new-promo-anim.selected:after{
               bottom: 0;
            }
            .pb-banner {
               bottom: 2px;
               width: 140px;
            }
            .new_promo_tlp .promo_count {
               left: 82%;
               top: 14px !important;
            }
            .pb-new-promo-anim{
               width: 140px;
            }
        }
        
        @media only screen and (min-width: 768px){
            .slots_promo_anim .promo_count {
               left: 55%;

         }
      }

.pb-banner:not(.pb-animation-start) .pb-layer.pb-promo,
.pb-banner:not(.pb-animation-start) .pb-layer.pb-tag,
.pb-banner:not(.pb-animation-start) .pb-layer.pb-badge {
    visibility: visible;
    opacity: 1;
    -webkit-animation: none !important;
    animation: none !important;
}

/* Static Promo - same position as animation end */
.pb-banner:not(.pb-animation-start) .pb-promo {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}

/* Static NEW - same position + rotation as animation end */
.pb-banner:not(.pb-animation-start) .pb-tag {
    -webkit-transform: translate(0, 0) rotate(-30deg);
    transform: translate(0, 0) rotate(-30deg);
}

/* Static badge - same final scale as animation */
.pb-banner:not(.pb-animation-start) .pb-badge {
    -webkit-transform: scale(1);
    transform: scale(1);
}

/* Hide other animation layers before animation */
.pb-banner:not(.pb-animation-start) .pb-layer:not(.pb-promo):not(.pb-tag):not(.pb-badge) {
    visibility: hidden;
    -webkit-animation: none !important;
    animation: none !important;
}

/* Animation active */
.pb-banner.pb-animation-start .pb-layer {
    visibility: visible;

    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;

    -webkit-animation-play-state: running !important;
    animation-play-state: running !important;
}


/* =========================================================
   EXISTING RESPONSIVE POSITIONING
   ========================================================= */

/* Mobile */
@media only screen and (max-width: 499px) {

    .pb-banner:not(.pb-animation-start) .pb-promo {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    .pb-banner:not(.pb-animation-start) .pb-tag {
        -webkit-transform: translate(0, 0) rotate(-30deg);
        transform: translate(0, 0) rotate(-30deg);
    }

    .pb-banner:not(.pb-animation-start) .pb-badge {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}


/* Small mobile */
@media only screen and (max-width: 375px) {

    .pb-banner:not(.pb-animation-start) .pb-promo {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    .pb-banner:not(.pb-animation-start) .pb-tag {
        -webkit-transform: translate(0, 0) rotate(-30deg);
        transform: translate(0, 0) rotate(-30deg);
    }

    .pb-banner:not(.pb-animation-start) .pb-badge {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}


/* Tablet: 768px - 1024px */
@media only screen and (min-width: 768px) and (max-width: 1024px) {

    .pb-banner:not(.pb-animation-start) .pb-promo {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    .pb-banner:not(.pb-animation-start) .pb-tag {
        -webkit-transform: translate(0, 0) rotate(-30deg);
        transform: translate(0, 0) rotate(-30deg);
    }

    .pb-banner:not(.pb-animation-start) .pb-badge {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}


/* Desktop */
@media only screen and (min-width: 1025px) {

    .pb-banner:not(.pb-animation-start) .pb-promo {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    .pb-banner:not(.pb-animation-start) .pb-tag {
        -webkit-transform: translate(0, 0) rotate(-30deg);
        transform: translate(0, 0) rotate(-30deg);
    }

    .pb-banner:not(.pb-animation-start) .pb-badge {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}