@font-face {
  font-family: dinpro-regular;
  font-weight: 400;
  src: url("../../fonts/DinPro/DINPro500Regular.otf");
}

@font-face {
  font-family: dinpro-medium;
  font-weight: 500;
  src: url("../../fonts/DinPro/DINProMedium.otf");
}

@font-face {
  font-family: dinpro-bold;
  font-weight: 700;
  src: url("../../fonts/DinPro/DINProBold.otf");
}

@font-face {
  font-family: dinpro-black;
  font-weight: 900;
  src: url("../../fonts/DinPro/DIN-Pro-Black.otf");
}

body {
  background-color: unset !important;
  color: #fff !important;
  margin: 0;
  padding: 0;
  font-family: Helvetica Neue, Helvetica, Arial, "sans-serif";
  font-size: 14px;
  line-height: 18px;
  color: #777;
}

.home-btn {
  background-image: url(../../images/poker/we-cnypoker-2026/home-btn.png);
  position: absolute;
  width: 80px;
  height: 80px;
  top: 30px;
  left: 30px;
  cursor: pointer;
}

.gamepg-table {
  width: 100%;
  height: 300px;
}

.game-row-1 {
  height: 10px;
}

.game-row-1 > span {
  width: 150px;
  float: right;
  padding: 8px 10px;
  background-color: rgba(0, 0, 0, 0.6);
  text-align: right;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.game-row-1 h4 {
  width: 100%;
  font-size: 12px;
  float: right;
  color: yellow;
  margin: 0;
  padding: 0;
}

.game-row-1 h3 {
  width: 100%;
  font-size: 12px;
  float: right;
  color: #fff;
  margin: 0;
  padding: 0;
}

.game-row-2 {
  width: 64%;
  height: 120px;
  margin-bottom: 0;
}

.game-row-3 {
  width: 100%;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1px;
  float: left;
  text-align: center;
  margin-bottom: 15px;
  color: #fff;
  background: rgb(0,0,0);
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 37%, rgba(0,0,0,1) 63%, rgba(0,0,0,0) 100%);
}

.game-row-3 span {
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  color: #eecd19;
  padding: 5px 0px;
  margin-bottom: 30px;
  display: none;
}

#card-container {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.card {
  width: 70px;
  height: 106px;
  perspective: 100vw;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
  position: relative;
  cursor: pointer;
}

.card .face {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  transition: transform 0.35s cubic-bezier(0.13, 1.03, 0.39, 0.98),
    box-shadow 0.35s cubic-bezier(0.13, 1.03, 0.39, 0.98),
    border-width 0.35s cubic-bezier(0.13, 1.03, 0.39, 0.98);
  /* box-shadow: 0px 1.2vw 4vw -1vw rgba(0, 0, 0, 0.6); */
  background-position: 0 0;
  background-size: 21vw;
  background-repeat: no-repeat;
  border-radius: 10px;
}

.card .front {
  background-image: url(/assets/images/poker/we-cnypoker-2026/cards/card-front.png);
  transform: rotateY(0deg);
  background-size: 100% 100% !important;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
  transition: transform 0.35s cubic-bezier(0.13, 1.03, 0.39, 0.98), box-shadow 0.35s cubic-bezier(0.13, 1.03, 0.39, 0.98), border-width 0.35s cubic-bezier(0.13, 1.03, 0.39, 0.98);
}
.card:hover .front {
  transform: rotateY(20deg);
  box-shadow: 0px 10vw 9vw -6vw rgba(0, 0, 0, 0.5);
}

.card .back {
  transform: rotateY(180deg);
  background-size: 101% !important;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}

.card.flipped .front {
  transform: rotateY(180deg);
}

.card.flipped .back {
  transform: rotateY(360deg);
}

.spin-started .card:not(.flipped) {
  cursor: pointer;
}

.card .back.c1 {
  background-image: url(/assets/images/poker/we-cnypoker-2026/cards/clubs-ace.png);
  margin: 0px;
}

.card .back.c2 {
  background-image: url(/assets/images/poker/we-cnypoker-2026/cards/clubs-2.png);
  margin: 0px;
}

.card .back.c3 {
  background-image: url(/assets/images/poker/we-cnypoker-2026/cards/clubs-3.png);
  margin: 0px;
}

.card .back.c4 {
  background-image: url(/assets/images/poker/we-cnypoker-2026/cards/clubs-4.png);
  margin: 0px;
}

.card .back.c5 {
  background-image: url(/assets/images/poker/we-cnypoker-2026/cards/clubs-5.png);
  margin: 0px;
}

.card .back.c6 {
  background-image: url(/assets/images/poker/we-cnypoker-2026/cards/clubs-6.png);
  margin: 0px;
}

.card .back.c7 {
  background-image: url(/assets/images/poker/we-cnypoker-2026/cards/clubs-7.png);
  margin: 0px;
}

.card .back.c8 {
  background-image: url(/assets/images/poker/we-cnypoker-2026/cards/clubs-8.png);
  margin: 0px;
}

.card .back.c9 {
  background-image: url(/assets/images/poker/we-cnypoker-2026/cards/clubs-9.png);
  margin: 0px;
}

.card .back.c10 {
  background-image: url(/assets/images/poker/we-cnypoker-2026/cards/clubs-10.png);
  margin: 0px;
}

.card .back.cj {
  background-image: url(/assets/images/poker/we-cnypoker-2026/cards/clubs-j.png);
  margin: 0px;
}

.card .back.cq {
  background-image: url(/assets/images/poker/we-cnypoker-2026/cards/clubs-q.png);
  margin: 0px;
}

.card .back.ck {
  background-image: url(/assets/images/poker/we-cnypoker-2026/cards/clubs-k.png);
  margin: 0px;
}

.card .back.h1 {
  background-image: url(/assets/images/poker/we-cnypoker-2026/cards/heart-ace.png);
  margin: 0px;
}

.card .back.h2 {
  background-image: url(/assets/images/poker/we-cnypoker-2026/cards/heart-2.png);
  margin: 0px;
}

.card .back.h3 {
  background-image: url(/assets/images/poker/we-cnypoker-2026/cards/heart-3.png);
  margin: 0px;
}

.card .back.h4 {
  background-image: url(/assets/images/poker/we-cnypoker-2026/cards/heart-4.png);
  margin: 0px;
}

.card .back.h5 {
  background-image: url(/assets/images/poker/we-cnypoker-2026/cards/heart-5.png);
  margin: 0px;
}

.card .back.h6 {
  background-image: url(/assets/images/poker/we-cnypoker-2026/cards/heart-6.png);
  margin: 0px;
}

.card .back.h7 {
  background-image: url(/assets/images/poker/we-cnypoker-2026/cards/heart-7.png);
  margin: 0px;
}

.card .back.h8 {
  background-image: url(/assets/images/poker/we-cnypoker-2026/cards/heart-8.png);
  margin: 0px;
}

.card .back.h9 {
  background-image: url(/assets/images/poker/we-cnypoker-2026/cards/heart-9.png);
  margin: 0px;
}

.card .back.h10 {
  background-image: url(/assets/images/poker/we-cnypoker-2026/cards/heart-10.png);
  margin: 0px;
}

.card .back.hj {
  background-image: url(/assets/images/poker/we-cnypoker-2026/cards/heart-j.png);
  margin: 0px;
}

.card .back.hq {
  background-image: url(/assets/images/poker/we-cnypoker-2026/cards/heart-q.png);
  margin: 0px;
}

.card .back.hk {
  background-image: url(/assets/images/poker/we-cnypoker-2026/cards/heart-k.png);
  margin: 0px;
}

.card .back.s1 {
  background-image: url(/assets/images/poker/we-cnypoker-2026/cards/spades-ace.png);
  margin: 0px;
}

.card .back.s2 {
  background-image: url(/assets/images/poker/we-cnypoker-2026/cards/spades-2.png);
  margin: 0px;
}

.card .back.s3 {
  background-image: url(/assets/images/poker/we-cnypoker-2026/cards/spades-3.png);
  margin: 0px;
}

.card .back.s4 {
  background-image: url(/assets/images/poker/we-cnypoker-2026/cards/spades-4.png);
  margin: 0px;
}

.card .back.s5 {
  background-image: url(/assets/images/poker/we-cnypoker-2026/cards/spades-5.png);
  margin: 0px;
}

.card .back.s6 {
  background-image: url(/assets/images/poker/we-cnypoker-2026/cards/spades-6.png);
  margin: 0px;
}

.card .back.s7 {
  background-image: url(/assets/images/poker/we-cnypoker-2026/cards/spades-7.png);
  margin: 0px;
}

.card .back.s8 {
  background-image: url(/assets/images/poker/we-cnypoker-2026/cards/spades-8.png);
  margin: 0px;
}

.card .back.s9 {
  background-image: url(/assets/images/poker/we-cnypoker-2026/cards/spades-9.png);
  margin: 0px;
}

.card .back.s10 {
  background-image: url(/assets/images/poker/we-cnypoker-2026/cards/spades-10.png);
  margin: 0px;
}

.card .back.sj {
  background-image: url(/assets/images/poker/we-cnypoker-2026/cards/spades-j.png);
  margin: 0px;
}

.card .back.sq {
  background-image: url(/assets/images/poker/we-cnypoker-2026/cards/spades-q.png);
  margin: 0px;
}

.card .back.sk {
  background-image: url(/assets/images/poker/we-cnypoker-2026/cards/spades-k.png);
  margin: 0px;
}

.card .back.d1 {
  background-image: url(/assets/images/poker/we-cnypoker-2026/cards/diamonds-ace.png);
  margin: 0px;
}

.card .back.d2 {
  background-image: url(/assets/images/poker/we-cnypoker-2026/cards/diamonds-2.png);
  margin: 0px;
}

.card .back.d3 {
  background-image: url(/assets/images/poker/we-cnypoker-2026/cards/diamonds-3.png);
  margin: 0px;
}

.card .back.d4 {
  background-image: url(/assets/images/poker/we-cnypoker-2026/cards/diamonds-4.png);
  margin: 0px;
}

.card .back.d5 {
  background-image: url(/assets/images/poker/we-cnypoker-2026/cards/diamonds-5.png);
  margin: 0px;
}

.card .back.d6 {
  background-image: url(/assets/images/poker/we-cnypoker-2026/cards/diamonds-6.png);
  margin: 0px;
}

.card .back.d7 {
  background-image: url(/assets/images/poker/we-cnypoker-2026/cards/diamonds-7.png);
  margin: 0px;
}

.card .back.d8 {
  background-image: url(/assets/images/poker/we-cnypoker-2026/cards/diamonds-8.png);
  margin: 0px;
}

.card .back.d9 {
  background-image: url(/assets/images/poker/we-cnypoker-2026/cards/diamonds-9.png);
  margin: 0px;
}

.card .back.d10 {
  background-image: url(/assets/images/poker/we-cnypoker-2026/cards/diamonds-10.png);
  margin: 0px;
}

.card .back.dj {
  background-image: url(/assets/images/poker/we-cnypoker-2026/cards/diamonds-j.png?1);
  margin: 0px;
}

.card .back.dq {
  background-image: url(/assets/images/poker/we-cnypoker-2026/cards/diamonds-q.png);
  margin: 0px;
}

.card .back.dk {
  background-image: url(/assets/images/poker/we-cnypoker-2026/cards/diamonds-k.png);
  margin: 0px;
}

.card .back.rj {
  background-image: url(/assets/images/poker/we-cnypoker-2026/cards/joker.png);
  margin: 0px;
}
.card .back.bj {
  background-image: url(/assets/images/poker/we-cnypoker-2026/cards/joker.png);
  margin: 0px;
}

.tickets-frame {
  width: 100%;
  font-size: 12px;
  font-weight: 600;
  float: left;
  text-align: center;
  margin: 5px 0 15px 0;
  color: #194a37;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 1) 37%, rgba(255, 255, 255, 1) 63%, rgba(0, 0, 0, 0) 100%);

  & span {
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    color: #c8140f;
    padding: 5px 0px;
    margin-bottom: 30px;
  }
}

.draw-btn-frame {
  width: 100%;
}
.draw-btn {
  position: relative;
  width: 40%;
  left: 50%;
  margin: 0 8px 20px;
  /* font-family: Poppins; */
  font-size: 16px;
  font-weight: 600;
  padding:10px 0px;
  color: #fff;
  background: linear-gradient(90deg, #3a0801 0%, #b2140f 100%);
  border-radius: 50px;
  border: none;
  animation: pulseGlow 1.5s infinite;
  transform: translate(-50%, 0);
}

/*=== Trigger  ===*/
.animate {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

/*=== Optional Delays, change values here  ===*/
.one {
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
animation-delay: 0.4s;
}

.two {
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
animation-delay: 0.5s;
}

.three {
-webkit-animation-delay: 0.6s;
-moz-animation-delay: 0.6s;
animation-delay: 0.6s;
}

.four {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
}
.five {
-webkit-animation-delay: 0.8s;
-moz-animation-delay: 0.8s;
animation-delay: 0.8s;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@-webkit-keyframes shine {
  0% { opacity: 0.05; }
  80% { opacity: 1; }
  100% { opacity: 1; }
}

@-moz-keyframes shine {
  0% { opacity: 0.05; }
  80% { opacity: 1; }
  100% { opacity: 1; }
}

@keyframes shine {
  0% { opacity: 0.05; }
  80% { opacity: 1; }
  100% { opacity: 1; }
}

@keyframes pulseGlow {0% {box-shadow: 0 0 4px 2px rgba(160, 240, 160, 0.6);} 50% {box-shadow: 0 0 10px 4px rgba(160, 240, 160, 1);} 100% {box-shadow: 0 0 4px 2px rgba(160, 240, 160, 0.6);}}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

img {
  vertical-align: middle;
  border-style: none;
}

.live-details {
  width: 100%;
  position: relative;
  margin-bottom: 0px;
}

#slot-content {
  width: 100%;
  position: relative;
  top: 0;
  z-index: 1000;
}

.live-wrap {
  margin: 0 auto;
}

.game-content {
  display: flex;
  flex-direction: column;
  margin: 0 auto 0;
  align-items: center;
}

.modal {
  background-color: rgba(0, 0, 0, 0.5);
}

.alert-text a {
  display: block;
  width: 46%; 
  font-size: 16px; 
  color: #000; 
  background-color:#ffa200; 
  margin: 0 auto; 
  margin-top: 110px;
  padding: 10px 50px; 
  -webkit-border-radius: 100px;
  border-radius: 100px; 
  text-decoration: none;   
  cursor: pointer; 
  -webkit-animation: glowing 1500ms infinite;
  animation: glowing 1500ms infinite;
}
.alert-text a:hover {
  text-decoration: none;
}
@keyframes glowing {
  0% { background-color: #ffa200; box-shadow: 0 0 3px #ffa200; }
  50% { background-color: #FF0000; box-shadow: 0 0 40px #FF0000; }
  100% { background-color: #ffa200; box-shadow: 0 0 3px #ffa200; }
}

.overlay {
  z-index: 1001 !important;
}


@media (max-width: 540px) {
  .game-row-2 {
    width: 90%;
  }
}