html {
  font-size: 62.5%;  
}

body {
  display: flex; 
  justify-content: center;
  align-items: center;
  min-height: 100vh;  
  margin: 0;
  background-color: black;
  color: white;
  font-size: 1.6rem;
}

 
.container {
  text-align: center;
  width: 60rem;
  border-radius: 1rem 1rem 0 0;
  border: 0.4rem solid rgb(0, 255, 234);
  padding: 0.5rem;
  background: radial-gradient(circle at center, #000000 0%, #1a1a1a 100%);
  box-shadow: 
      0 0 4rem rgb(255, 0, 212),
      0 0 15rem rgba(0, 255, 234, 0.15),
      inset 0 0 1.5rem rgba(255, 0, 255, 0.5); 
  margin: 2rem; 
}

 
h1 {
  font-size: 3rem;
  margin: 2rem 0;
  font-family: "Press Start 2P", system-ui;
  font-weight: 200;
  font-style: normal;
  animation: color-change 5s infinite alternate;
  text-shadow: 0 0 1rem currentColor, 0 0 2rem currentColor; 
  padding: 2rem 0;
}

@keyframes color-change {
  0% { color: #ff00c8; }
  25% { color: #ff8c00; }
  50% { color: #ffff00; }
  75% { color: #00ffea; }
  100% { color: #00c8ff; }
}

h1 .span1 {
  color: rgb(238, 255, 0);
}

h1 .span2 {
  color: #00ffff;
}

 
.container-reels {
  display: flex;
  justify-content: center; 
  align-items: center;
  gap: 1.5rem;  
  margin: 0 auto 5rem auto; 
  width: 80%;  
  height: 25rem;
  padding: 1.5rem;
  border-radius: 1rem; 
  border: 0.4rem solid rgb(0, 247, 255);
  background: radial-gradient(circle at center, #000000 0%, #1a1a1a 100%);
  box-shadow: 0 0 4rem rgb(255, 0, 212);
}

.reel {
  width: 10rem;  
  height: 22rem; 
  border-radius: 1rem; 
  border: 0.3rem solid rgb(255, 0, 234);
  background: radial-gradient(circle at center, #1a1a1a 0%, #000000 100%);
  box-shadow: 
      0 0 2rem rgb(255, 0, 212),
      inset 0 0 1rem rgba(255, 255, 255, 0.2); 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 5rem;  
  font-family: "Press Start 2P", system-ui;
  color: white;
  text-shadow: 0 0 1rem currentColor, 0 0 2rem currentColor;
}

.reel span {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  width: 8rem;
  height: 7rem;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffe57f, #ffb300);
  box-shadow: 0 0.4rem 1rem rgba(0,0,0,0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.reel span:hover {
  transform: scale(0.5);
  box-shadow: 0 0.6rem 1.4rem rgba(255, 215, 0, 0.5);
}

 
.win {
  animation: glowWin 1s ease-in-out infinite alternate;
  background: radial-gradient(circle at 30% 30%, #fff176, #fdd835);
  box-shadow: 0 0 2rem 0.6rem rgba(255, 223, 0, 0.9);
  transform: scale(1.3);
}

@keyframes glowWin {
  0% {
    box-shadow: 0 0 1rem rgba(255, 223, 0, 0.7), 0 0 2rem rgba(255, 223, 0, 0.5);
  }
  100% {
    box-shadow: 0 0 2.5rem rgba(255, 215, 0, 1), 0 0 4rem rgba(255, 255, 100, 0.9);
  }
}

 
.controls-grid {
  display: flex;
  justify-content: space-between;  
  align-items: flex-end;  
  padding: 0 2rem; 
  margin-bottom: 3rem;
}

.control-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

#balance-display {
  font-size: 1.5rem;
  font-family: "Press Start 2P", system-ui;
  color: rgb(166, 255, 0);
  text-shadow: 0 0.1rem 1.5rem currentColor;
  margin-bottom: 0.5rem;
}

.deposit-title {
  font-size: 1.5rem;
  font-family: "Press Start 2P", system-ui;
  color: greenyellow;
  text-shadow: 0.1rem 0.1rem 1.5rem currentColor;
}

#cash, #lines, #bet {
  width: 7rem;
  height: 3.5rem;
  border-radius: 0.5rem;
  border: 0.1rem solid #00ffff;
  background-color: #4100bb;
  color: yellow;
  font-size: 1.2rem;
  text-align: center;
  font-family: "Press Start 2P", system-ui;
  transition: all 0.3s ease;
}

#cash::placeholder, #lines::placeholder, #bet::placeholder {
  color: yellow;
  font-size: 1rem;
  text-align: center;
}
 
#spin-btn {
  font-size: 1.8rem;  
  font-family: "Press Start 2P", system-ui;
  width: 14.5rem;
  height: 7rem;
  color: white;
  border-radius: 1.5rem;
  border: 0.4rem solid rgb(225, 0, 255);
  background: radial-gradient(circle at center, #d800ff 0%, #f700e2 100%);
  box-shadow: 0 0 4rem rgb(255, 0, 212),
              inset 0 0 1.5rem rgba(255, 255, 255, 0.5);
  transition: all 0.2s ease;
}

#spin-btn:hover {
  background: radial-gradient(circle at center, #ff80ff 0%, #ff00e2 100%);
  cursor: pointer;
  box-shadow: 0 0 3rem rgb(255, 0, 212), 
              0 0 6rem rgba(255, 0, 212, 0.5);
}

#spin-btn:active {
  transform: scale(0.95);
  box-shadow: 0 0 1rem rgb(255, 0, 212);
}

 
#music {
  font-size: 2rem;  
  font-family: "Press Start 2P", system-ui;
  width: 13rem;
  height: 5rem;
  color: white;
  border-radius: 1.5rem;
  border: 0.4rem solid rgb(0, 255, 234);
  background: radial-gradient(circle at center, #00fff7 0%, #00c8ff 100%);
  box-shadow: 0 0 4rem rgb(0, 255, 234),
              inset 0 0 1.5rem rgba(255, 255, 255, 0.5);
  transition: all 0.2s ease;
}

#music:hover {
  background: radial-gradient(circle at center, #80ffff 0%, #00e2ff 100%);
  cursor: pointer;
  box-shadow: 0 0 3rem rgb(0, 255, 234), 
              0 0 6rem rgba(0, 255, 234, 0.5);
}

 
.status-message {
  font-size: 1rem;
  text-align: center;
  margin-top: 3rem;
  font-family: "Press Start 2P", system-ui;
  color: yellow;
  text-shadow: 0.1rem 0.1rem 2rem currentColor;
  border: 0.2rem solid white;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

 
@media (max-width: 768px) {
  .container {
    width: 90%;
  }

  h1 {
    font-size: 2rem;
  }

  .reel span {
    font-size: 3rem;
    width: 6rem;
    height: 6rem;
  }

  #music, #spin-btn {
    width: 6rem;
    height: 4rem;
    font-size: 1rem;
  }
  #instructions-btn {
    display: none
  }
}

#instructions-btn {
    font-size: 0.7rem;  
  font-family: "Press Start 2P", system-ui;
  width: 13rem;
  height: 5rem;
  color: rgb(234, 0, 255);
  border-radius: 1.5rem;
  border: 0.4rem solid rgb(0, 217, 255);
  background: radial-gradient(circle at center, #00fff7 0%, #00c8ff 100%);
  box-shadow: 0 0 4rem rgb(0, 255, 234),
              inset 0 0 1.5rem rgba(255, 255, 255, 0.5);
  transition: all 0.2s ease;
}

#instructions-btn:hover {
 background: radial-gradient(circle at center, #80ffff 0%, #00e2ff 100%);
  cursor: pointer;
  box-shadow: 0 0 3rem rgb(0, 255, 234), 
              0 0 6rem rgba(0, 255, 234, 0.5);
}

 
#instructions-box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: black;
  color: rgb(224, 224, 33);
  border: 4px solid #00fff7;
  border-radius: 15px;
  padding: 30px;
  width: 400px;
  text-align: center;
  box-shadow: 0 0 40px #00fff7;
  display: none;  
  z-index: 999;
}

#instructions-box h2 {
  color: #00ffff;
  margin-bottom: 15px;
}

#instructions-box button {
  margin-top: 20px;
  padding: 10px 20px;
  background: #00fff7;
  color: black;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

#instructions-box button:hover {
  background: #00c8ff;
}

.hidden {
  display: none;
}