/* General Styles */
html, body {
  background: url('images/bg_main.webp') no-repeat center center fixed; /* Set the background image */
  font-family: 'Roboto', sans-serif;
  color: white;
  text-align: center;
  
  margin: 0;
  padding: 0;
  overflow: hidden; /* Prevents scrolling */
  touch-action: none; /* Prevents touch gestures like zooming */

   -webkit-user-select: none; /* Disable text selection on WebKit browsers */
    -moz-user-select: none;    /* Disable text selection on Firefox */
    -ms-user-select: none;     /* Disable text selection on Internet Explorer */
    user-select: none; 
}

#winModalContent {
  /* background: radial-gradient(circle, #1d1d1d, #000);*/
  font-family: 'Arial', sans-serif;
  color: white;
  text-align: center;
  
  margin: 0;
  padding: 0;
  overflow: hidden; /* Prevents scrolling */
  touch-action: none; /* Prevents touch gestures like zooming */

   -webkit-user-select: none; /* Disable text selection on WebKit browsers */
    -moz-user-select: none;    /* Disable text selection on Firefox */
    -ms-user-select: none;     /* Disable text selection on Internet Explorer */
    user-select: none; 
}



h1 {
  font-size: 2rem;
  color: #ffcc00;
  margin: 20px;
}

/* Slot Machine Bottom */
.slot-machine {
  position: fixed; /* Keep fixed positioning */
  /* bottom: 00px;  Position the slot machine 20px from the bottom */
  font-family: 'Luckiest Guy', cursive;
  letter-spacing: 2px; /* Adjust spacing between letters */


  top: 50%; /* Position the element in the middle of the viewport vertically */
  left: 50%; /* Position the element in the middle of the viewport horizontally */
  transform: translate(-50%, -50%); /* Center the element perfectly by offsetting its size */
  max-width: 400px;
  margin: 0; /* Remove any margin */
  padding: 10px;
  border-radius: 30px; /* Rounded corners on all sides */
}

/* Reel and Result Containers */
.reel-container {
  display: flex;
  justify-content: center;
  align-items: center; /* Center vertically */
  margin: 20px 0;
  height: 205px;
  flex-wrap: wrap; /* Allow wrapping on smaller screens */
  background: url('images/bg_reel_con.png') no-repeat center center; /* Set the background image */

}

.bg-spin-container {
  display: flex;
  flex-direction: column; /* Stack the child elements vertically */
  /*justify-content: center; /* Center the children vertically */
  align-items: center; /* Center the children horizontally */
  height: 150px; /* Set the container height */
  background: url('images/bg_control_con.webp') no-repeat center center;
  margin-top: -42px;
}

.bg-spin-container > .controls {
  display: flex;
  justify-content: center; /* Center spin button horizontally */
  align-items: center; /* Center spin button vertically */
  margin-top: 10px; /* Space between bet controls and spin button */
}

.bg-spin-container > div {
  display: flex;
  justify-content: center; /* Center contents horizontally */
  align-items: center; /* Center contents vertically */
  width: 100%;
  margin-bottom: 0px;
  height: 40px;
}

#bet {
  color: yellow;
  font-weight: bold;
  -webkit-text-stroke: 1px black;
  font-size: 28px;
}

.bet-controls {
  display: flex;
  align-items: center; /* Vertically center items */
  justify-content: center; /* Horizontally center items */
  margin-top: 10px; /* Adjust the space above the bet controls */
  width: 100%; /* Ensure the container takes up full width */
  gap: 5px;
}

.bg-top-container {
  display: flex;
  flex-direction: column; /* Stack the child elements vertically */
  justify-content: center; /* Center the children vertically */
  align-items: center; /* Center the children horizontally */
  height: 205px; /* Set the container height */
  background: url('images/bg_top.png') no-repeat center center;
  margin-bottom: -70px;
}

.bg-bottom-container {
  display: flex;
  flex-direction: column; /* Stack the child elements vertically */
  justify-content: center; /* Center the children vertically */
  align-items: center; /* Center the children horizontally */
  width: 100%;
  height: 100px; /* Set the container height */
  background: url('images/bg_bottom.png') no-repeat center center;
  margin-bottom: 0px;
  margin-top: -5px;
}

.bg-logo-container {
  display: flex;
  flex-direction: column; /* Stack the child elements vertically */
  justify-content: center; /* Center the children vertically */
  align-items: center; /* Center the children horizontally */
  width: 100%;
  height: 100px; /* Set the container height */
  margin-bottom: 0px;
  margin-top: -35px;
}



/* Individual Reel */
.reel {
  width: 100px;
  height: 136px;
  background: url('images/ic_bg_reel.png') no-repeat center center; /* Set the background image */
  /*border-top: 2px solid #94450e;
  border-bottom: 2px solid #94450e;
  border-left: 4px solid #94450e;
  border-right: 4px solid #94450e; */
  border-radius: 5px;
  font-size: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2px;
}

/* Controls */
.controls {
  display: flex;
  align-items: center; /* Vertically center items */
  justify-content: center; /* Horizontally center items */
  margin-top: 20px; /* Adjust the space above the bet controls */
  width: 100%; /* Ensure the container takes up full width */
}

button {
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  background: none; /* No background */
  color: black; /* Text or icon color */
  cursor: pointer;
  margin: 5px;
  display: inline-flex; /* Ensures icons align properly */
  justify-content: center;
  align-items: center;
}


/* Message Display */
#message {
  font-size: 1.2rem;
  margin-top: 10px;
  color: #00ff00;
}

/* Image Styles */
img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  h1 {
    font-size: 2rem; /* Smaller heading font size */
  }

  .slot-machine {
    width: 90%; /* Take up most of the screen on mobile */
    margin: 20px auto;
    padding: 15px; /* More padding for smaller screens */
  }

  .reel {
    width: 80px; /* Smaller reels for mobile */
    height: 109px;
    font-size: 1.5rem; /* Smaller text size for reels */
  }

  .controls {
    margin-top: 15px; /* Slightly smaller margin for controls */
  }

  button {
    padding: 8px 16px; /* Adjust button size for mobile */
    font-size: 14px; /* Smaller font size */
    border: none;
    border-radius: 5px;
    background: none; /* No background */
    color: black; /* Text or icon color */
    cursor: pointer;
    margin: 5px;
    display: inline-flex; /* Ensures icons align properly */
    justify-content: center;
    align-items: center;
  }

  #message {
    font-size: 1rem; /* Smaller message font */
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 1.5rem; /* Further reduce heading font size on very small screens */
  }

  .slot-machine {
    width: 95%; /* Almost full width on very small screens */
    margin: 0px auto;
  }

  .reel {
    width: 70px; /* Even smaller reels */
    height: 95px;
    font-size: 1.2rem; /* Adjust font size for small screens */
  }

  button {
    padding: 6px 12px; /* Adjust button padding */
    font-size: 12px; /* Reduce font size even further */
  }

  #message {
    font-size: 0.9rem; /* Small font size for message */
  }
}



  /* Win Modal Styles */
  #winModal {
    position: absolute;
    /*bottom: 342px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 200px;
    
    */


    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 0px;
    margin-bottom: 45px;
  }

  
/*Leaderboard*/

h2 {
  text-align: center;
  margin-bottom: 20px;
  color: #333;
}


/* Table styling */
table {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  border-collapse: collapse;
  background-color: #ffffff;


}

th, td {
  padding: 5px;
  text-align: center;
  color: #333;
  border-bottom: 0.2px solid #f0f0f0; /* Add bottom border */


}

th {
  color: rgb(0, 0, 0);
}




.rank_content {
  position: fixed; /* Position fixed to keep it at the bottom */
  bottom: -100%; /* Start off-screen (slide from bottom) */
  left: 50%; /* Center horizontally */
  transform: translateX(-50%); /* Offset to perfectly center */
  width: 100%; /* Make it take the full width */
  height: 555px; /* Make it take the full height of the viewport */
  max-width: 400px; /* Optional: limit the width */
  padding: 10px;
  background-color: #ffffff;
  background-size: cover; /* Ensure background image covers the full div */
  border-radius: 30px 30px 0 0; /* Apply border-radius to top-left and top-right corners only */
  overflow: auto; /* Allow content scrolling if it overflows */
  transition: bottom 0.5s ease; /* Smooth transition */
}

.rank_content h2 {
  margin-top: 3px;
  text-align: center;
  font-size: 1.5rem;
  color: #ffae00;
}

.rank_content.show {
  bottom: 0; /* Slide up to the bottom of the screen */
}

.close-btn {
  position: absolute;
  top: 8px;
  right: 25px;
  background: transparent;
  border: none;
  font-size: 24px;
}

.rank-btn {
  position: absolute;
  top: 30px;
  right: -26px;
  background: transparent;
  border: none;
  font-size: 24px;
}

.info-btn {
  position: absolute;
  top: 45px;
  right: -20px;
  background: transparent;
  border: none;
  font-size: 24px;
}


#spinIcon {
  display: inline-block;
  height: 200px;
  width: 50px;
  transition: transform 0.2s ease; /* Smooth transition */
}

#spinButton[disabled] #spinIcon {
  transform: scale(0.95) translateY(5px); /* "Push in" effect */
}


#winMessageIcon {
  width: 160px;
  height: 30px;
  margin-top: 0;
}
.winNumberIcon{
  display: flex;
  align-items:center;
  gap:0px;
  margin-top: -35px;
}

.win-amount {
  color: yellow;
  font-size: 24px;
  font-weight: bold;
  text-shadow:
    -1px -1px 0 black,
    1px -1px 0 black,
    -1px  1px 0 black,
    1px  1px 0 black;
}

.coins-amount {
  color: yellow;
  font-size: 18px;
  font-weight: normal;
  background: url('images/ic_coins.png') no-repeat center center; /* Set the background image */
  padding: 5px;
  border-radius: 50px;
  width: 100%;
  height: 30px;
}



.loader-container {
  position: fixed;    /* Position fixed to keep it on the screen */
  top: 0;             /* Start at the top of the page */
  left: 0;            /* Start at the left of the page */
  width: 100vw;       /* Make the width 100% of the viewport */
  height: 100vh;      /* Make the height 100% of the viewport */
  background: url('images/bg_main.webp') no-repeat center center; /* Set the background image */
  display: flex;      /* Flexbox to center the progress bar */
  justify-content: center; /* Center horizontally */
  align-items: center;     /* Center vertically */
  z-index: 1000;      /* Make sure the loader is on top of other content */
}

.progress-bar {
  width: 90%;
  max-width: 500px;   /* Optional: Set a maximum width */
  background-color: #f3f3f3;
  height: 20px; /* Adjust height */
  border-radius: 30px; /* Rounded corners */
  overflow: hidden; /* Prevent overflow */
  display: flex;
  align-items: center; /* Vertically center content */
  justify-content: center; /* Horizontally center the text inside */
}
.progress {
  height: 100%;
  width: 0;
  background-color: #4caf50;
  transition: width 0.1s ease;
}

.progress-text {
  position: absolute;
  font-weight: bold;
  color: #fff;
}


#muteButton {
  padding: 10px 20px;
  background-color: #f44336;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 16px;
  visibility: hidden;
}

/* Define a class for the push effect */
.push-effect {
  transform: scale(0.95);  /* Shrink the button slightly */
  transition: transform 0.1s ease-in-out;  /* Smooth transition */
}

/* Optional: Return the button back to normal after the effect */
.push-effect:active {
  transform: scale(0.95);
}


 /* Keyframes for flip animation */
 @keyframes flipIn {
  0% {
    transform: rotateY(90deg) scale(0);
    opacity: 0;
  }
  50% {
    transform: rotateY(45deg) scale(1.2);
    opacity: 0.7;
  }
  100% {
    transform: rotateY(0deg) scale(1);
    opacity: 1;
  }
}

/* Keyframes for zoom animation */
@keyframes zoomIn {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Animation for the flip and zoom */
.animate-flip-zoom {
  animation: flipIn 0.5s ease-in-out, zoomIn 0.5s ease-in-out;
}




.playLogsContainer {
  width: 100%;
  height: 100px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column-reverse; /* Start from the bottom */
  margin-top: 10px;
  justify-content: center; /* Center the children vertically */
  align-items: center;

}


.container {
  background-color: #9b59b6;
  border-radius: 10px;
  width: 90%;
  max-width: 400px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  color: white;
  text-align: center;
}
.header {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.table-container {
  background-color: white;
  border-radius: 10px;
  padding: 10px;
  color: black;
}
table {
  width: 100%;
  border-collapse: collapse;
}

tr:nth-child(even) {
  background-color: #f9f9f9;
}
tr:nth-child(odd) {
  background-color: #ffffff;
}

.Infoth {
  background-color: #5da5ff;
  color: white;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
.infoImg{
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.rank_content.showInfo {
  bottom: -135px; /* Slide up to the bottom of the screen */
}






.history-table {
  background-color: white;
  border-radius: 10px;
  padding: 10px;
  color: black;
}
.history-table thead tr {
  background-color: #5da5ff;
  color: rgb(255, 255, 255);

}
.history-table th, .history-table td {
  padding: 5px;
  border: 1px solid #ddd;
  font-size: 12px;
}
.history-table tbody tr:nth-child(even) {
  background-color: #f2f2f2;
}

.result-cell {
  /* display: flex;
  justify-content: center;
  align-items: center;
  gap: 0px;
  height: auto; */

  width: 100px;

}
.result-cell img {
  width: 20px;              /* Let images scale while maintaining aspect ratio */
  height: 20px;             /* Maintain aspect ratio */
}