body {
   background: black;
   overflow: hidden;
 }

 /* Apply both animations to the logo */
 #faFa178Image {
   animation: floatLogo 3s ease-in-out infinite, glowLogo 2.5s ease-in-out infinite;
   transition: transform 0.3s ease;
 }

 /* ✨ Floating + glow animation for FAFA178 logo */
 @keyframes floatLogo {

   0%,
   100% {
     transform: translate(-50%, 0);
   }

   50% {
     transform: translate(-50%, -10px);
   }
 }

 @keyframes glowLogo {

   0%,
   100% {
     filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.7));
   }

   50% {
     filter: drop-shadow(0 0 25px rgba(255, 255, 100, 0.9));
   }
 }
/* Overlay image in the center reel */
.center-overlay-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.hidden {
  display: none;
}

 .reel {
   display: flex;
   flex-direction: column;
   gap: 10px;
 }

 .reel-item {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 120px;
   flex-shrink: 0;
   transition: opacity 0.3s ease;
 }

 .reel-item img {
   width: 100%;
   border-radius: 6px;
 }

 .center-overlay-image {
   position: absolute;
   top: 140px;
   left: 50%;
   transform: translateX(-50%);
   width: 100%;
   max-width: 850px;
   height: auto;
   border-radius: 6px;
   z-index: 20;
   pointer-events: none;
   opacity: 0;
   transition: opacity 0.8s ease;
   filter: drop-shadow(0 0 25px rgba(255, 215, 0, 0.8));
 }

 .center-overlay-image.show {
   opacity: 1;
 }

 .center-overlay-image {
   position: absolute;
   top: 140px;
   left: 50%;
   transform: translateX(-50%) scale(0.9);
   transition: opacity 0.6s ease, transform 0.6s ease;
   opacity: 0;
 }

 .center-overlay-image.show {
   opacity: 1;
   transform: translateX(-50%) scale(1);
 }

 .alert {
   position: fixed;
   top: 44%;
   left: 50%;
   transform: translate(-50%, -50%) scale(0.8);
   border-radius: 16px;
   padding: 20px;
   text-align: center;
   z-index: 9999;
   opacity: 0;
   transition: all 0.6s ease;
 }

 .alert.show {
   opacity: 1;
   transform: translate(-50%, -50%) scale(1);
 }

 .alert img {
   width: 250px;
   border-radius: 10px;
 }

 /* 🏆 Winner popup */
 .alert_winner {
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) scale(0.8);
   /* background: rgba(0, 0, 0, 0.055); */
   /* border: 3px solid gold; */
   border-radius: 16px;
   padding: 20px;
   text-align: center;
   z-index: 99999;
   opacity: 0;
   transition: all 0.6s ease;
   animation: winnerFloatUpDown 3s ease-in-out infinite, winnerglowPulse 2.5s ease-in-out infinite;
   transition: transform 0.3s ease;
 }

 .alert_winner.show {
   opacity: 1;
   transform: translate(-50%, -50%) scale(1);
 }

 .alert_winner #winner1 {
   width: 350px;
   display: block;
   margin: auto;
   margin-bottom: 30px;
 }

 .alert_winner #winner2 {
   width: 250px;
   display: block;
   margin: auto;
 }

 /* ✨ Floating animation for both characters */
 @keyframes winnerFloatUpDown {

   0%,
   100% {
     transform: translate(-50%, -50%) translateY(0);
   }

   50% {
     transform: translate(-50%, -50%) translateY(-15px);
   }
 }

 /* 🌟 Glow effect for extra life */
 @keyframes winnerglowPulse {

   0%,
   100% {
     filter: drop-shadow(0 0 6px rgba(148, 202, 253, 0.459));
   }

   50% {
     filter: drop-shadow(0 0 20px rgba(252, 146, 208, 0.9));
   }
 }

 #playButton {
   top: 80%;
   left: 50%;
   transform: translate(-50%, -50%);
   position: absolute;
   width: 200px;
   height: 100px;
 }

 #spinNowButton {
   cursor: pointer;
 }

 #chara {
   z-index: 9999;
   top: 75%;
   left: 21%;
   transform: translate(-50%, -50%);
   position: absolute;
   width: 100px;
   height: 100px;
   animation: floatUpDown 3s ease-in-out infinite, glowPulse 2.5s ease-in-out infinite;
   transition: transform 0.3s ease;
 }

 #chara_right {
   z-index: 9999;
   top: 75%;
   left: 82%;
   transform: translate(-50%, -50%);
   position: absolute;
   width: 100px;
   height: 100px;
   animation: floatUpDown 3s ease-in-out infinite, glowPulse 2.5s ease-in-out infinite;
   transition: transform 0.3s ease;
 }

 /* ✨ Floating animation for both characters */
 @keyframes floatUpDown {

   0%,
   100% {
     transform: translate(-50%, -50%) translateY(0);
   }

   50% {
     transform: translate(-50%, -50%) translateY(-15px);
   }
 }

 /* 🌟 Glow effect for extra life */
 @keyframes glowPulse {

   0%,
   100% {
     filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.6));
   }

   50% {
     filter: drop-shadow(0 0 20px rgba(255, 255, 100, 0.9));
   }
 }

 /* ===========================
   📱 RESPONSIVE MOBILE STYLES
   =========================== */
 @media (max-width: 430px) {
   #reelFrame {
     max-width: 400px;
   }

   #gameWrap {
     max-width: 430px;
   }

   #playButton {
     top: 70%;
     left: 50%;
     transform: translate(-50%, -50%);
     position: absolute;
     width: 200px;
     height: 100px;

   }

   #playButton #spinNowButton {
     width: 200px;
   }

   #chara,
   #chara_right {
     width: 80px;
     top: 70%;
   }

   .reel-window {
     height: 340px !important;
   }

   .reel-item {
     height: 100px !important;
   }

   .reel-item img {
     width: 90%;
   }

   /* 🏆 Winner popup */
   .alert_winner {
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%) scale(0.8);
     border-radius: 16px;
     padding: 20px;
     text-align: center;
     z-index: 99999;
     opacity: 0;
     width: 400px;
     transition: all 0.6s ease;
     animation: winnerFloatUpDown 3s ease-in-out infinite, winnerglowPulse 2.5s ease-in-out infinite;
     transition: transform 0.3s ease;
   }

   .alert_winner.show {
     opacity: 1;
     transform: translate(-50%, -50%) scale(1);
   }

   .alert_winner #winner1 {
     width: 350px;
     display: block;
     margin: auto;
     margin-bottom: 30px;
   }

   .alert_winner #winner2 {
     width: 250px;
     display: block;
     margin: auto;
   }
 }

 /* For devices ≤ 428px */
 @media (max-width: 428px) {
   #reelFrame {
     max-width: 400px;
   }

   #gameWrap {
     max-width: 428px;
   }

   #playButton {
     top: 85%;
     left: 50%;
     transform: translate(-50%, -50%);
     position: absolute;
     width: 200px;
     height: 100px;

   }

   #playButton #spinNowButton {
     width: 200px;
   }

   #chara,
   #chara_right {
     width: 80px;
     top: 85%;
   }

   .reel-window {
     height: 340px !important;
   }

   .reel-item {
     height: 100px !important;
   }

   .reel-item img {
     width: 90%;
   }

   /* 🏆 Winner popup */
   .alert_winner {
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%) scale(0.8);
     border-radius: 16px;
     padding: 20px;
     text-align: center;
     z-index: 99999;
     opacity: 0;
     width: 400px;
     transition: all 0.6s ease;
     animation: winnerFloatUpDown 3s ease-in-out infinite, winnerglowPulse 2.5s ease-in-out infinite;
     transition: transform 0.3s ease;
   }

   .alert_winner.show {
     opacity: 1;
     transform: translate(-50%, -50%) scale(1);
   }

   .alert_winner #winner1 {
     width: 330px;
     display: block;
     margin: auto;
     margin-bottom: 30px;
   }

   .alert_winner #winner2 {
     width: 200px;
     display: block;
     margin: auto;
   }

 }

 /* For devices ≤ 414px (iPhone 14, 13, etc.) */
 @media (max-width: 414px) {
   #reelFrame {
     max-width: 400px;
   }

   #gameWrap {
     max-width: 414px;
   }

   #playButton {
     top: 85%;
     left: 50%;
     transform: translate(-50%, -50%);
     position: absolute;
     width: 200px;
     height: 100px;

   }

   #playButton #spinNowButton {
     width: 200px;
   }

   #chara,
   #chara_right {
     width: 75px;
     top: 85%;
   }

   .reel-window {
     height: 330px !important;
   }

   .reel-item {
     height: 100px !important;
   }

   .reel-item img {
     width: 90%;
   }

   .alert_winner {
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%) scale(0.8);
     border-radius: 16px;
     padding: 20px;
     text-align: center;
     z-index: 99999;
     opacity: 0;
     width: 400px;
     transition: all 0.6s ease;
     animation: winnerFloatUpDown 3s ease-in-out infinite, winnerglowPulse 2.5s ease-in-out infinite;
     transition: transform 0.3s ease;
   }

   .alert_winner.show {
     opacity: 1;
     transform: translate(-50%, -50%) scale(1);
   }

   .alert_winner #winner1 {
     width: 300px;
     display: block;
     margin: auto;
     margin-bottom: 30px;
   }

   .alert_winner #winner2 {
     width: 180px;
     display: block;
     margin: auto;
   }
 }

 /* For devices ≤ 390px (Pixel, iPhone 12 mini) */
 @media (max-width: 390px) {
   #reelFrame {
     max-width: 380px;
   }

   #gameWrap {
     max-width: 390px;
   }

   #playButton {
     top: 85%;
     left: 50%;
     transform: translate(-50%, -50%);
     position: absolute;
     width: 200px;
     height: 100px;

   }

   #playButton #spinNowButton {
     width: 200px;
   }

   #chara,
   #chara_right {
     width: 70px;
     top: 85%;
   }

   .reel-window {
     height: 320px !important;
   }

   .reel-item {
     height: 95px !important;
   }

   .reel-item img {
     width: 88%;
   }

   .alert img,
   .alert_winner img {

     width: 220px;
   }

   /* 🏆 Winner popup */
   .alert_winner {
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%) scale(0.8);
     border-radius: 16px;
     padding: 20px;
     text-align: center;
     z-index: 99999;
     opacity: 0;
     width: 400px;
     transition: all 0.6s ease;
     animation: winnerFloatUpDown 3s ease-in-out infinite, winnerglowPulse 2.5s ease-in-out infinite;
     transition: transform 0.3s ease;
   }

   .alert_winner.show {
     opacity: 1;
     transform: translate(-50%, -50%) scale(1);
   }

   .alert_winner #winner1 {
     width: 300px;
     display: block;
     margin: auto;
     margin-bottom: 30px;
   }

   .alert_winner #winner2 {
     width: 180px;
     display: block;
     margin: auto;
   }
 }

 /* For devices ≤ 360px (small Android) */
 @media (max-width: 360px) {
   #reelFrame {
     top: 20%;
     max-width: 350px;
   }

   #gameWrap {
     max-width: 360px;
   }

   #reelsContainer {
     top: 21%;
   }

   #playButton {
     top: 85%;
     left: 57%;
     transform: translate(-50%, -50%);
     position: absolute;
     width: 200px;
     height: 100px;

   }

   #playButton #spinNowButton {
     width: 150px;
   }

   #chara,
   #chara_right {
     width: 60px;
     top: 85%;
   }

   .reel-window {
     height: 300px !important;
   }

   .reel-item {
     height: 100px !important;
   }

   .reel-item img {
     width: 70%;
   }

   .alert img,
   .alert_winner img {
     width: 200px;
   }

   /* 🏆 Winner popup */
   .alert_winner {
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%) scale(0.8);
     border-radius: 16px;
     padding: 20px;
     text-align: center;
     z-index: 99999;
     opacity: 0;
     width: 300px;
     transition: all 0.6s ease;
     animation: winnerFloatUpDown 3s ease-in-out infinite, winnerglowPulse 2.5s ease-in-out infinite;
     transition: transform 0.3s ease;
   }

   .alert_winner.show {
     opacity: 1;
     transform: translate(-50%, -50%) scale(1);
   }

   .alert_winner #winner1 {
     width: 300px;
     display: block;
     margin: auto;
     margin-bottom: 30px;
   }

   .alert_winner #winner2 {
     width: 180px;
     display: block;
     margin: auto;
   }
 }