* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     font-family: 'Comic Sans MS', cursive, sans-serif;
     background-image: url(../images/body-bg.jpg);
     min-height: 100vh;
     overflow-x: hidden;
     position: relative;
     background-size: cover;
     background-repeat: repeat;
     background-position: center center;
 }

 .footer {
     background-image: url(../images/bottom-bg.jpg);
     background-size: cover;
     background-repeat: repeat;
     background-position: center center;
     position: relative;
     z-index: 10;
     height: 86px;
     margin: -86px 0 0 0;
 }

 .main-wrapper .logo {
     max-width: 127px;
     max-height: 91px;
     width: auto;
     height: auto;
     margin: 0 auto 20px;
 }

 @keyframes float {
     from {
         transform: translateX(0);
         -webkit-transform: translateX(0);
         -moz-transform: translateX(0);
         -ms-transform: translateX(0);
         -o-transform: translateX(0);
     }

     to {
         transform: translateX(calc(100vw + 200px));
         -webkit-transform: translateX(calc(100vw + 200px));
         -moz-transform: translateX(calc(100vw + 200px));
         -ms-transform: translateX(calc(100vw + 200px));
         -o-transform: translateX(calc(100vw + 200px));
     }
 }

 .main-title {
     text-align: center;
     font-size: 3.5rem;
     font-weight: 900;
     color: #fff;
     text-shadow:
         4px 4px 0 #FF1493,
         -2px -2px 0 #FF6347,
         2px -2px 0 #FF6347,
         -2px 2px 0 #FF6347;
     margin: 20px 0;
     letter-spacing: 3px;
 }

 .text-wrapper.text-01 {
     width: 75%;
     margin: 0 auto 20px;
     overflow: hidden;
 }

 .text-wrapper.text-01 img {
     animation: zoom-in-zoom-out 1s ease infinite;
 }

 .text-wrapper.text-02 {
     z-index: 10;
     position: relative;
     margin: 10px 280px -50px;
     animation: rotate 2s ease-in-out infinite;
     -webkit-animation: rotate 2s ease-in-out infinite;
 }

 @keyframes rotate {
     0% {
         transform: rotate(1.5deg);
         -webkit-transform: rotate(1.5deg);
         -moz-transform: rotate(1.5deg);
         -ms-transform: rotate(1.5deg);
         -o-transform: rotate(1.5deg);
     }

     50% {
         transform: rotate(0);
         -webkit-transform: rotate(0);
         -moz-transform: rotate(0);
         -ms-transform: rotate(0);
         -o-transform: rotate(0);
     }

     100% {
         transform: rotate(1.5deg);
         -webkit-transform: rotate(1.5deg);
         -moz-transform: rotate(1.5deg);
         -ms-transform: rotate(1.5deg);
         -o-transform: rotate(1.5deg);
     }
 }

 @keyframes zoom-in-zoom-out {
     0% {
         scale: 100%;
     }

     50% {
         scale: 90%;
     }

     100% {
         scale: 100%;
     }
 }

 .bonus-badge {
     background: linear-gradient(135deg, #FF1493 0%, #FF69B4 100%);
     border: 5px solid #fff;
     border-radius: 50px;
     padding: 15px 40px;
     margin: 0 auto 30px;
     max-width: 600px;
     box-shadow: 0 8px 20px rgba(255, 20, 147, 0.5);
     animation: pulse 2s infinite;
 }

 @keyframes pulse {

     0%,
     100% {
         transform: scale(1);
         -webkit-transform: scale(1);
         -moz-transform: scale(1);
         -ms-transform: scale(1);
         -o-transform: scale(1);
     }

     50% {
         transform: scale(1.05);
     }
 }

 .bonus-text {
     font-size: 2rem;
     font-weight: 900;
     color: #00FF00;
     text-shadow: 3px 3px 0 #006400;
     letter-spacing: 2px;
 }

 .slot-container {
     background-image: url(../images/box.png);
     width: 100%;
     height: 670px;
     margin: 0 auto;
     position: relative;
     background-repeat: no-repeat;
     background-position: center;
     background-size: contain;
 }

 .slots-grid {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     gap: 10px;
     padding: 20px;
     margin-bottom: 20px;
     width: 750px;
     margin: 0 auto;
 }

 .slot-column {
     position: relative;
     height: 372px;
     overflow: hidden;
     top: 150px;
 }

 .slot-reel {
     position: absolute;
     width: 100%;
     top: 0;
     transition: transform 0.1s linear;
 }

 .slot-reel.spinning {
     transition: none;
 }

 .slot-cell {
     width: 100%;
     height: 80px;
     border-radius: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 2.5rem;
     margin-bottom: 15px;
     padding: 3px;
 }

 .center-highlight {
     position: absolute;
     top: 50%;
     left: -5px;
     right: -5px;
     height: 90px;
     transform: translateY(-50%);
     border: 4px solid #F9F73A;
     border-radius: 15px;
     pointer-events: none;
     z-index: 10;
     box-shadow: 0 0 20px #F9F73A;
     -webkit-border-radius: 15px;
     -moz-border-radius: 15px;
     -ms-border-radius: 15px;
     -o-border-radius: 15px;
     display: none;
 }

 .controls {
     text-align: center;
     margin: 90px 0 0 0;
 }

 .spin-btn {
     border-radius: 50%;
     width: 130px;
     height: 130px;
     cursor: pointer;
     transition: all 0.3s;
     margin: 0 auto;
     border: none;
     background-color: transparent;
     position: relative;
     z-index: 15;
     animation: rotateBtn 1s ease-in-out infinite;
     animation-delay: 3s;
     -webkit-animation: rotateBtn 1s ease-in-out infinite;
 }

 @keyframes rotateBtn {
     0% {
         scale: 100%;
     }

     50% {
         scale: 90%;
     }

     100% {
         scale: 100%;
     }
 }

 .spin-btn:active:not(:disabled) {
     transform: scale(0.95);
 }

 .spin-btn:disabled {
     opacity: 0.6;
     cursor: not-allowed;
 }

 .footer-title {
     text-align: center;
     margin-top: 40px;
     font-size: 3rem;
     font-weight: 900;
     background: linear-gradient(135deg, #FF69B4 0%, #FFD700 50%, #FF69B4 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
 }

 /* Jackpot Popup Styles */
 .popup-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.84);
     display: none;
     justify-content: center;
     align-items: center;
     z-index: 1000;
     animation: fadeIn 0.3s ease;
 }

 .popup-overlay .popup-content {
     background-image: url(../images/popup-bg.png);
     background-size: contain;
     background-repeat: no-repeat;
     width: 855px;
     height: auto;
     padding: 60px 40px 40px 50px;
 }

 .jackpot-img {
     text-align: center;
     margin: -150px 0 10px 0;
     animation: zoom-in-zoom-out 1s ease infinite;
 }

 .jackpot-btn {
     position: relative;
     bottom: -20px;
     animation: zoom-in-zoom-out 1s ease infinite;
 }

 .jackpot-list ul {
     padding: 0;
     margin: 0 auto;
     width: 70%;
 }

 .jackpot-list ul li {
     display: flex;
     align-items: start;
     gap: 16px;
     margin: 0px 0 16px 0;
 }

 .jackpot-list ul li:last-child {
     margin: 0;
 }

 .jackpot-list ul li p {
     font-size: 26px;
     line-height: 32px;
     font-family: "Calistoga";
     font-weight: 400;
     letter-spacing: 1px;
     margin: 0;
 }

 .jackpot-list h4 {
     font-size: 40px;
     line-height: 42px;
     font-family: "Calistoga";
     font-weight: 400;
     margin: 0;
     letter-spacing: 1px;
     color: #fff;
     margin: 0 0px 20px 0;
     text-align: center;
 }

 .jackpot-list ul li p {
     color: #fff;
 }

 .jackpot-list ul li p span {
     color: #f6ff00;
 }

 .spin-modal.open {
     top: 50%;
     transform: translate(-50%, -50%);
 }

 .jackpot-btn {
     text-align: center;
     margin: 0;
 }

 /* 
 .jackpot-btn a {
     font-size: 35px;
     line-height: 45px;
     font-family: "Calistoga";
     font-weight: 600;
     text-transform: uppercase;
     border-radius: 10px;
     display: inline-block;
     text-decoration: none;
     color: #3cecaa;
     background: linear-gradient(to bottom, #ff1650 0%, #fec646 100%);
     padding: 10px 40px 15px;
     border: 4px solid #eebc46;
     animation: zoom-in-zoom-out 1s ease infinite;
     text-shadow: 2px 0 #2f0969, -2px 0 #2f0969, 0 2px #2f0969, 0 -2px #2f0969, 1px 1px #2f0969, -1px -1px #2f0969, 1px -1px #2f0969, -1px 1px #2f0969;
 } */

 .popup-overlay.active {
     display: flex;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

 @keyframes popIn {
     0% {
         transform: scale(0.5);
         opacity: 0;
     }

     100% {
         transform: scale(1);
         opacity: 1;
     }
 }

 @media (max-width:1299px) {
     .text-wrapper.text-01 {
         width: 45%;
     }

     .text-wrapper.text-02 {
         margin: 10px auto -40px;
         height: 76px;
         width: 460px;
     }
 }

 @media (max-width:1199px) {
     .main-wrapper .logo {
         max-width: 107px;
         max-height: 77px;
         margin: 0 auto 10px;
     }

     .slots-grid {
         width: 700px;
     }

     .slot-column {
         top: 120px;
     }

     .slot-container {
         height: 634px;
     }
 }

 @media (max-width:991px) {

     /* .slot-container {
         width: 700px;
         height: 449px;
     } */
     .slot-container {
         height: auto;
     }

     .main-wrapper .logo {
         margin: 50px auto 20px;
     }

     .slots-grid {
         width: 535px;
         top: 95px;
         position: relative;
     }

     .slot-cell {
         height: 68px;
         width: 80%;
         margin: 0 auto;
     }

     .footer {
         height: 86px;
         margin: -15px 0 0 0;
     }

     .slot-column {
         height: 268px;
         top: 0;
     }

     .controls {
         margin: 80px 0 0 0;
     }

     .spin-btn {
         width: 100px;
         height: 100px;
     }

     .text-wrapper.text-01 {
         width: 480px;
     }

     .jackpot-list ul {
         width: 80%;
     }

     .jackpot-btn {
         bottom: -5px;
     }

     .jackpot-img img {
         width: 260px;
     }

     .jackpot-img {
         margin: -110px 0 10px 0;
     }

     .daftar-img img {
         width: 303px;
     }

     .jackpot-list ul li p {
         font-size: 24px;
         line-height: 30px;
     }
 }


 @media (max-width:767px) {
     .popup-overlay .popup-content {
         background-image: url(../images/mobile-popup-bg.png);
         width: 545px;
         background-size: contain;
         height: 522px;
     }

     .mobile-footer {
         background-image: url(../images/bottom-bg.jpg);
         height: 50px;
         background-size: cover;
         top: -50px;
         position: relative;
     }

     .jackpot-list ul li p {
         font-size: 22px;
         line-height: 26px;
     }

     .jackpot-img {
         margin: -15px auto 10px;
     }

     .jackpot-list ul {
         width: 90%;
     }

     .jackpot-list h4 {
         font-size: 28px;
         line-height: 34px;
     }

     .jackpot-list ul li {
         margin: 0px 0 15px 0;
     }

     .jackpot-btn {
         bottom: -20px;
         left: 0px;
     }

     .jackpot-img img {
         width: 200px;
     }

     .jackpot-btn .daftar-img img {
         width: 50%;
         margin: 0 auto;
     }

     .slot-container {
         /* background-image: url(../images/mobile-box.png); */
         /* width: 510px;
         height: 328px; */
     }

     .slots-grid {
         width: 395px;
         top: 60px;
     }


     .slot-cell {
         height: 43px;
         padding: 1px;
         margin: 0 auto 7px;
     }

     .slot-column {
         height: 192px;
         top: 0px;
     }

     .spin-btn {
         width: 70px;
         height: 70px;
         margin: 10px 0 0 0;
     }

     .footer {
         background-image: url(../images/mibile-footer.png);
         height: 330px;
     }

     .text-wrapper.text-01 {
         width: 420px;
     }

     .controls {
         margin: 30px 0 0 0;
     }

     .main-wrapper .logo {
         max-width: 97px;
         max-height: 67px;
         margin: 0 auto 10px;
     }

     .text-wrapper.text-02 {
         margin: 10px auto -50px;
         height: 76px;
         width: 350px;
     }


 }

 @media (max-width:575px) {
     .popup-overlay .popup-content {
         padding: 60px 30px 0px 30px;
         width: 100%;
     }

     /* .slot-container {
         width: 460px;
         height: 295px;
     } */
     .jackpot-img img {
         width: 40%;
         height: auto;
     }

     .jackpot-list h4 {
         font-size: 24px;
         line-height: 20px;
         margin: 0 0px 10px 0;
     }

     .jackpot-img {
         margin: -5px auto 10px;
     }


     .jackpot-list ul li p {
         font-size: 18px;
         line-height: 22px;
     }

     .jackpot-list ul li {
         align-items: center;
     }

     .jackpot-list ul li {
         margin: 0 0 10px 0;
     }

     .jackpot-btn {
         bottom: -10px;
         left: 0;
     }

     .jackpot-btn .daftar-img img {
         width: 55%;
         margin: 0 auto;
     }

     .slots-grid {
         width: 355px;
         top: 44px;
     }

     .text-wrapper.text-02 {
         margin: 10px auto -40px;
         height: 66px;
         width: 290px;
     }

     .slot-column {
         height: 182px;
         top: 0;
     }

     .main-wrapper .logo {
         max-width: 100px;
         max-height: 60px;
         margin: 10px auto 30px;
     }

     .text-wrapper.text-01 {
         width: 360px;
         margin: 20px auto 20px;
     }

     .footer {
         height: 330px;
     }

     .spin-btn {
         width: 60px;
         height: 60px;
         margin: -20px 0 0 0;
     }

     .slot-cell {
         margin: 0 auto 2px;
     }

     .mobile-footer {
         height: 40px;
         top: -40px;
     }

     .mobile-footer::before {
         content: "";
         background-image: url(../images/flower.png);
         position: absolute;
         top: -60px;
         bottom: auto;
         left: 0;
         right: auto;
         width: 118px;
         height: 86px;
         background-size: cover;
         z-index: -1;
     }

     .mobile-footer::after {
         content: "";
         background-image: url(../images/flower.png);
         position: absolute;
         top: -60px;
         bottom: auto;
         right: 0;
         left: auto;
         width: 118px;
         height: 86px;
         background-size: cover;
         z-index: -1;
         transform: rotatey(180deg);
     }
 }


 @media (max-width:480px) {
     body {
         background-image: url(../images/mibile-body-bg.jpg);
     }

     .footer {
         display: none;
     }

     .mobile-footer::after,
     .mobile-footer::before {
         width: 58px;
         height: 66px;
     }

     /* .slot-container {
         width: 330px;
         height: 210px;
     } */

     .slot-container {
         padding: 30px 0;
     }

     .slots-grid {
         width: 365px;
     }

     .slot-cell {
         height: 40px;
         padding: 4px;
         margin: 0 auto 2px;
     }

     .text-wrapper.text-02 {
         margin: 20px auto -40px;
         height: 50px;
         width: 370px;
     }

     .footer {
         height: 312px;
     }

     .spin-btn {
         width: 70px;
         height: 60px;
         margin: -20px 0 0 0;
     }

     .slot-column {
         height: 165px;
         top: 0;
     }

     .text-wrapper.text-01 {
         width: 340px;
         margin: 0 auto;
     }

     .main-wrapper .logo {
         max-width: 77px;
         max-height: 47px;
         margin: 20px auto 20px;
     }

     .popup-overlay .popup-content {
         padding: 40px 10px 50px 30px;
     }

     .jackpot-list ul li p {
         font-size: 16px;
         line-height: 18px;
     }

     .jackpot-list ul li {
         margin: 0 0 10px 0;
     }

     .jackpot-btn {
         bottom: -2px;
         left: 0px;
     }

     .jackpot-list ul li {
         align-items: center;
         gap: 12px;
     }

     .popup-overlay .popup-content {
         padding: 40px 30px 0px 30px;
     }

     .jackpot-btn .daftar-img img {
         width: 55%;
     }

     .jackpot-img {
         margin: -8px 0 10px 0;
     }

     .jackpot-list h4 {
         font-size: 18px;
         line-height: 22px;
         margin: 0 0px 10px 0;
     }

     .jackpot-list ul li img {
         width: 20px;
     }
 }


 @media (max-width:450px) {
     .slot-container {
         padding: 0;
     }

     .text-wrapper.text-01 {
         width: 310px;
         margin: 0px auto 0px;
     }

     /* .slot-container {
         width: 288px;
         height: 190px;
     } */

     .slots-grid {
         width: 280px;
         top: 40px;
     }

     .slot-cell {
         height: 32px;
         padding: 2px;
     }

     .slot-column {
         height: 136px;
         top: 0;
     }

     .text-wrapper.text-02 {
         margin: 30px auto -40px;
         height: 61px;
         width: 260px;
     }

     .spin-btn {
         width: 50px;
         height: 50px;
     }
 }