@import url("https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Ultra&display=swap');

body {
  background: #181818; /* Slightly lighter than pure black for better contrast */
  display: flex;
  flex-direction: column; /* Ensures content stacks properly */
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* Works across different screen sizes */
  font-family: "DM Mono", monospace;
  color: #ffffff; /* Ensures readability */
}

.popup {
    display: none;
    position: fixed;
    top: 5%;
    left: 50%;
    transform: translate(-50%, -5%);
    background: rgba(255, 204, 0, 0.95);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
    text-align: center;
    z-index: 999;
    opacity: 0; /* Default hidden */
    transition: opacity 0.5s ease-in-out;
}




/*
.popup {
    display: none;
    position: fixed;
    top: 5%; /* Ensures it's above the header */
    left: 50%;
  /*  transform: translate(-50%, -5%);
    background: rgba(255, 204, 0, 0.95);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
    text-align: center;
    z-index: 999;
    animation: fadeIn 0.5s ease-in-out;
}

*/

/* Win Pop-Up Styling - Positioned Above Header */
/*
.popup {
  display: none;
  position: fixed;
  top: 5%; /* Moves pop-up to the top */
  left: 50%;
  transform: translate(-50%, -5%);
  background: rgba(255, 204, 0, 0.95);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
  text-align: center;
  animation: fadeIn 0.5s ease-in-out;
}
*/
.popup p {
  font-size: 2em;
  font-weight: bold;
  color: #222;
}

.popup button {
  padding: 10px 20px;
  margin-top: 10px;
  font-size: 1.2em;
  background: #222;
  color: #ffcc00;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

.popup button:hover {
  background: #333;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* Slot Machine Container */
.slot-machine {
  text-align: center;
}

/* Header Styling */
.header {
  margin-bottom: 20px;
  padding: 10px;
}

.header h1 {
  font-family: "Ultra", serif;
  font-size: 5em;
  line-height: .9;
  margin: 0 auto;
  color: #ffcc00; /* More vibrant golden color */
  max-width: 12ch;
  text-shadow: 3px 3px 10px rgba(255, 204, 0, 0.8);
}

.header p {
  font-size: 1.2em;
  margin-top: 10px;
  color: #eeeeee;
}

/* Reels Container */
.reels-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

/* Reel Design */
.reel {
  width: 130px;
  height: 210px;
  background-color: #3a3a3a;
  border-radius: 15px;
  overflow: hidden;
  position: relative;
  margin: 10px;
  box-shadow: 0px 10px 15px rgba(0,0,0,0.5), inset 0px 5px 10px rgba(255,255,255,0.1);
  border: 3px solid rgba(255,255,255,0.3);
}

.reel::before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  width: 100%;
  height: 2px;
  background: rgba(255,255,255,0.3);
}

/* Symbols */
.symbol {
  font-size: 3.5em;
  height: 1.5em;
  opacity: 0.8;
}

/* Controls */
.controls .btn {
  font-size: 1.2em;
  padding: 10px 20px;
  background: #ffcc00;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0px 4px 6px rgba(255, 204, 0, 0.3);
}

.controls .btn:hover {
  background: #ff9900;
}

.controls .message {
  font-size: 1.5em;
  color: #ffcc00;
}

/* Responsive Design */
@media (max-width: 600px) {
  .popup {
    top: 3%; /* Adjust pop-up for small screens */
    transform: translate(-50%, -3%);
  }
  .header h1 {
    font-size: 4em;
  }
  .reel {
    width: 100px;
    height: 160px;
  }
  .symbol {
    font-size: 3em;
  }
  .controls .btn {
    font-size: 1em;
    padding: 8px 15px;
  }
}

.reel-symbol {
  width: 60px;
  height: 60px;
}
.reels {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.balance {
  font-size: 1rem;
  margin: 0.5rem 0;
}
.spin-btn {
  font-size: 1rem;
  padding: 10px 24px;
  margin-top: 1rem;
}
@media (max-width: 480px) {
  .reel-symbol {
    width: 50px;
    height: 50px;
  }
  .spin-btn {
    font-size: 0.9rem;
    padding: 8px 20px;
  }
  .balance {
    font-size: 0.9rem;
  }
}

footer {
  text-align: center;
  font-size: 0.9em;
  padding: 1rem 0;
}
@media (max-width: 480px) {
  footer {
    font-size: 0.75em;
  }
}
.spin-btn:hover {
  box-shadow: 0px 0px 12px rgba(255, 204, 0, 0.6);
}