body {
  font-family: 'Poppins', sans-serif;
  background-color: #000000;
  color: #333;
  margin: 0;
  padding: 0;
}


#main-container {
  display: flex;
  flex-direction: column; /* Change to column for better responsiveness */
  justify-content: center;
  align-items: center;
  padding: 20px;
  gap: 20px; /* Adds spacing between elements */
}

#wheel-container {
  position: relative;
  width: 90vw; /* Make responsive based on viewport width */
  height: 90vw; /* Maintain square dimensions */
  max-width: 500px; /* Cap maximum size */
  max-height: 500px;
}

#wheel {
  border: 10px solid #ffce00;
  border-radius: 50%;
  box-shadow: 0 0 20px #ffce00, inset 0 0 10px #f1c40f;
  width: 100%; /* Ensure it scales with the container */
  height: 100%; /* Maintain circular shape */
}

canvas {
  border-radius: 50%;
  background: radial-gradient(circle, #333, #000);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
  width: 100%; /* Make canvas fit the wheel */
  height: 100%;
}

#spin-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffdf00, #ffc107);
  box-shadow: 0 4px 15px rgba(255, 223, 0, 0.6);
  text-align: center;
  line-height: 80px;
  font-size: 16px;
  font-weight: bold;
  color: #000;
  cursor: pointer;
  animation: pulse 1.5s infinite;
  transition: transform 0.2s ease-in-out;
}

#spin-btn:hover {
  transform: translate(-50%, -50%) scale(1.1);
}

#wheel-pointer {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 30px solid #ffce00; /* Pointer triangle color */
  filter: drop-shadow(0 0 10px #ffd700);
  animation: glow-pointer 1.5s infinite;
}

/* Decorative Circle at the Base of the Pointer */
#wheel-pointer::after {
  content: '';
  position: absolute;
  top: 100%; /* Position below the pointer */
  left: 50%;
  transform: translateX(-50%);
  width: 15px;
  height: 15px;
  background-color: #ffce00;
  border-radius: 50%;
  box-shadow: 0 0 10px #ffd700;
}

/* Glow Animation for Pointer */
@keyframes glow-pointer {
  0%, 100% {
    filter: drop-shadow(0 0 10px #ffd700);
  }
  50% {
    filter: drop-shadow(0 0 20px #ffce00);
  }
}


/* Animation for Spin Button */
@keyframes pulse {
  0%, 100% {
    box-shadow: 0 4px 15px rgba(255, 223, 0, 0.6);
  }
  50% {
    box-shadow: 0 8px 30px rgba(255, 223, 0, 0.8);
  }
}

/* Animation for Pointer Glow */
@keyframes glow-pointer {
  0%, 100% {
    filter: drop-shadow(0 0 10px #ffd700);
  }
  50% {
    filter: drop-shadow(0 0 20px #ffce00);
  }
}


/* Pointer Glow Animation */
@keyframes glow-pointer {
  0%, 100% {
    filter: drop-shadow(0 0 10px #ffd700);
  }
  50% {
    filter: drop-shadow(0 0 20px #ffd700);
  }
}

/* Spin button pulse effect */
@keyframes pulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
  }
}


@keyframes pulse {

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

  50% {
    transform: translate(-50%, -50%) scale(1.1);
  }
}

#settings-container {
  width: 300px;
  background: #D3D3D3;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

#settings-container h3 {
  margin-bottom: 10px;
  color: #006400;
}

label {
  font-size: 14px;
  margin: 10px 0;
  display: block;
}

input,
select,
textarea {
  width: 100%;
  padding: 8px;
  margin-bottom: 15px;
  border-radius: 5px;
  border: none;
  font-size: 14px;
}

button {
  background-color: #118ab2;
  color: #fff;
  padding: 10px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  width: 100%;
}

button:hover {
  background-color: #073b4c;
}



#result-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1000;
  opacity: 0;
  /* Hidden by default */
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
}

#result-modal.active {
  opacity: 1;
  /* Show the modal */
  pointer-events: auto;
}

/* Modal content */
.modal-content {
  background: #fff;
  border-radius: 10px;
  padding: 20px 30px;
  text-align: center;
  animation: bounceIn 0.6s ease;
  /* Add the bounce animation */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
}

/* Button styling */
button {
  margin-top: 15px;
  padding: 10px 20px;
  background-color: #ef476f;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

button:hover {
  background-color: #d43560;
}

/* Fade-in animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-content {
  animation: fadeIn 0.5s ease-in-out;
}


/* Bounce animation */
@keyframes bounceIn {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }

  60% {
    transform: scale(1.2);
    opacity: 1;
  }

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


@keyframes zoomIn {
  from {
    transform: scale(0.8);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* About section added by Abi */
.about-section {
  padding: 60px 20px;
  background-color: #f9f9f9;
  color: #333;
  font-family: 'Arial', sans-serif;
  text-align: center;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.section-title {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #007BFF;
  /* Adjust to match your brand's color */
}

.section-description {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 40px;
}

.features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.feature-item {
  flex: 1 1 calc(33.333% - 40px);
  max-width: 300px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

.feature-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.feature-icon {
  font-size: 40px;
  color: #007BFF;
  /* Adjust to match your brand's color */
  margin-bottom: 15px;
}

.feature-item h3 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.feature-item p {
  font-size: 16px;
  line-height: 1.4;
  color: #666;
}

/* Responsive Design */
@media (max-width: 768px) {
  .features {
    flex-direction: column;
    align-items: center;
  }

  .feature-item {
    flex: 1 1 100%;
  }
}

.spacer {
  height: 50px;
}


/* Premium Ad Space Styling */
.ad-banner {
  background-color: #f4f4f4;
  border: 1px solid #ccc;
  text-align: center;
  padding: 10px;
  font-size: 16px;
  color: #333;
}

.ad-top {
  position: relative;
  width: 100%;
  height: 100px;
  margin-bottom: 20px;
}

.ad-bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 100px;
}

.ad-right {
  position: fixed;
  top: 0;
  right: 0;
  width: 300px;
  height: 100%;
  overflow-y: auto;
  background-color: #fff;
  box-shadow: -3px 0 5px rgba(0, 0, 0, 0.1);
  padding-top: 10px;
}

.ad-right-inner {
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid #ccc;
  text-align: center;
}

.content {
  margin-right: 320px;
  /* Adjust to leave space for the right ad */
}

.main-content {
  padding: 20px;
}

.ad-top {
  position: relative;
  width: 100%;
  /* Ensures full width */
  height: auto;
  /* Adjusts height to content */
  margin: 0;
  /* Removes margin */
  padding: 10px;
  /* Add padding as needed */
  background-color: #f4f4f4;
  /* Banner background color */
  border: 1px solid #ccc;
  /* Optional: border for clarity */
  text-align: center;
  box-sizing: border-box;
  /* Includes padding in width calculations */
}

/* Starting tabs*/
.tabs {
  display: flex;
  justify-content: center;
  background-color: #06D6A0;
  padding: 10px;
  border-bottom: 3px solid #333;
  gap: 20px;
}

.tab-button {
  padding: 10px 20px;
  /* Reduced padding */
  background-color: #118AB2;
  /* Primary background color */
  color: #fff;
  /* Text color */
  border: none;
  /* No border */
  outline: none;
  /* Remove outline */
  cursor: pointer;
  /* Pointer cursor */
  font-size: 14px;
  /* Reduced font size */
  font-weight: bold;
  /* Bold font */
  transition: background-color 0.3s ease, color 0.3s ease;
  /* Smooth hover transition */
  border-radius: 5px;
  /* Rounded corners */
}

/* Hover effect */
.tab-button:hover {
  background-color: #FFD700;
  /* Hover background color */
  color: #000;
  /* Hover text color */
}

/* Active state */
.tab-button.active {
  background-color: #FFD700;
  /* Active background color */
  color: #000;
  /* Active text color */
  border-bottom: 2px solid #118AB2;
  /* Underline for active tab */
}

.tab-content {
  display: none;
  padding: 20px;
  animation: fadeIn 0.5s ease-in-out;
}

.tab-content.active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

button {
  padding: 15px 30px;
  font-size: 18px;
  background-color: #06D6A0;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

button:hover {
  background-color: #073B4C;
  color: #fff;
}


/*Ending tabs*/

/*Game Container*/

.features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
}

.feature-item {
  max-width: 300px;
  background: #ffffff;
  border: 2px solid #333;
  border-radius: 10px;
  padding: 20px;
  color: #333;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.feature-icon {
  font-size: 40px;
  margin-bottom: 10px;
  color: #333;
}

.feature-item h3 {
  margin-bottom: 10px;
  color: #333;
}

.game-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px auto;
  background: #ffffff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  max-width: 600px;
  border: 2px solid #333;
}

.game-container h2 {
  color: #333;
  margin-bottom: 20px;
}

.animated-result {
  font-size: 28px;
  font-weight: bold;
  margin-top: 20px;
  color: #333;
  animation: popIn 0.6s ease-in-out;
}

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

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.dice-animation,
.coin-animation {
  margin-top: 20px;
  width: 120px;
  height: 120px;
  position: relative;
  perspective: 600px;
}

.dice-face {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  font-weight: bold;
  color: #070000;
  /* White text */
  background: linear-gradient(145deg, #d3d3d3, #f5f5f5);
  /* Light grey gradient for dice */
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3),
    /* Outer shadow for 3D look */
    inset -5px -5px 10px rgba(255, 255, 255, 0.6),
    /* Inner light for top highlight */
    inset 5px 5px 10px rgba(0, 0, 0, 0.2);
  /* Inner shadow for depth */
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

/* Dice dots */
.dice-face::before {
  content: '';
  display: block;
  width: 30%;
  /* Adjust size of dots */
  height: 30%;
  background: #080000;
  /* White dots */
  border-radius: 50%;
  /* Circular dots */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  /* Depth for dots */
}

/* Dice edges for 3D effect */
.dice-face::after {
  content: '';
  position: absolute;
  width: 110%;
  /* Slightly larger for edge thickness */
  height: 110%;
  background: linear-gradient(90deg, #b0b0b0, #d3d3d3, #f5f5f5);
  /* Edge gradient */
  border-radius: 15px;
  z-index: -1;
  /* Ensure edges stay behind the face */
  transform: translateZ(-10px);
}

/* Dice container for 3D rotation */
.dice-container {
  position: relative;
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  animation: diceSpin 5s infinite ease-in-out;
  /* Optional spinning animation */
}

/* Rotation animation */
@keyframes diceSpin {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }

  50% {
    transform: rotateX(180deg) rotateY(180deg);
  }

  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}


.coin-face {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  color: #0a0000f3;
  background: radial-gradient(circle, #ffecb3, #b2a511);
  /* Gold gradient for a realistic look */
  border-radius: 50%;
  box-shadow: 0 0 20px 5px rgba(255, 223, 0, 0.8),
    /* Glowing effect */
    inset 0 0 10px rgba(255, 255, 255, 0.3),
    /* Inner light effect */
    0 5px 15px rgba(0, 0, 0, 0.4);
  /* Shadow for 3D depth */
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transform: translateZ(2px);
  /* Slight 3D effect */
  animation: coinGlow 2s infinite alternate;
  /* Optional glowing animation */
}

/* Add 3D edge for a coin */
.coin-face:before {
  content: '';
  position: absolute;
  width: 110%;
  /* Slightly larger to simulate edge thickness */
  height: 110%;
  border-radius: 50%;
  background: linear-gradient(90deg, #b2a511, #e0c74b, #b2a511);
  /* Gold edge effect */
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
  transform: translateZ(-10px);
  z-index: -1;
  /* Ensure it’s behind the face */
}

/* Glowing animation */
@keyframes coinGlow {
  0% {
    box-shadow: 0 0 20px 5px rgba(255, 223, 0, 0.8),
      inset 0 0 10px rgba(255, 255, 255, 0.3),
      0 5px 15px rgba(0, 0, 0, 0.4);
  }

  100% {
    box-shadow: 0 0 30px 10px rgba(255, 223, 0, 1),
      inset 0 0 15px rgba(255, 255, 255, 0.5),
      0 10px 20px rgba(0, 0, 0, 0.5);
  }
}


@keyframes rollDice {
  from {
    transform: rotateX(0deg) rotateY(0deg);
  }

  to {
    transform: rotateX(720deg) rotateY(720deg);
  }
}

@keyframes flipCoin {
  from {
    transform: rotateY(0deg);
  }

  to {
    transform: rotateY(1080deg);
  }
}

.rolling .dice-face {
  animation: rollDice 1s ease-in-out;
}

.flipping .coin-face {
  animation: flipCoin 1s ease-in-out;
}

#randomGenerator input[type="number"] {
  margin: 10px;
  padding: 10px;
  width: 45%;
  background: #ffffff;
  color: #333;
  border: 2px solid #333;
  border-radius: 5px;
}

#randomGenerator input[type="number"]::placeholder {
  color: #333;
  opacity: 0.7;
}

/*Game Container End*/

body,
html {
  margin: 0;
  padding: 0;
}
/* Responsive Design Improvements */
@media (max-width: 1200px) {
#main-container {
flex-direction: column;
align-items: center;
gap: 20px;
}

#wheel-container,
.game-board,
#settings-container {
width: 90%;
max-width: 500px;
margin: 0 auto;
}
}

@media (max-width: 768px) {
#main-container {
padding: 10px;
}

#spin-btn {
width: 80px;
height: 80px;
font-size: 14px;
}

.tabs {
flex-wrap: wrap;
gap: 10px;
}

.tab-button {
flex: 1 1 auto;
text-align: center;
}

button {
font-size: 14px;
padding: 10px 16px;
}
}

@media (max-width: 480px) {
#main-container {
flex-direction: column;
gap: 20px;
}

#wheel-container {
max-width: 300px;
height: auto;
}

.game-board {
grid-template-columns: repeat(3, 80px);
}

.cell {
width: 80px;
height: 80px;
font-size: 24px;
}

button {
font-size: 12px;
padding: 8px 12px;
}

.tabs {
flex-direction: column;
gap: 5px;
}
}