:root {
  --primary-gold: #ffd700;
  --secondary-gold: #b8860b;
  --dark-bg: #1a1a1a;
  --panel-bg: #2b2b2b;
  --neon-glow: 0 0 10px rgba(255, 215, 0, 0.5);
  --font-main: "Outfit", sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--dark-bg);
  color: white;
  font-family: var(--font-main);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  overflow: hidden;
}

.slot-machine-container {
  background: linear-gradient(145deg, #222, #111);
  padding: 3rem;
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5),
    inset 0 0 2px rgba(255, 255, 255, 0.1);
  border: 1px solid #333;
  text-align: center;
  width: 400px;
  max-width: 90%;
}

.select-ctg {
    display: inline-flex;
    align-items: center;
    position: relative;
    margin : 10px;
    padding :10px;
}

.select-ctg::after {
    position: absolute;
    right: 15px;
    width: 10px;
    height: 7px;
    background-color: #535353;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
    pointer-events: none;
}

.select-ctg select {
    appearance: none;
    min-width: 130px;
    height: 2.8em;
    padding: .4em calc(.8em + 30px) .4em .8em;
    border: 1px solid #d0d0d0;
    border-radius: 3px;
    background-color: #fff;
    color: #333333;
    font-size: 1em;
    cursor: pointer;
}

.title {
  color: var(--primary-gold);
  margin-bottom: 10px;
  font-size: 2rem;
  letter-spacing: 4px;
  text-shadow: var(--neon-glow);
  text-transform: uppercase;
}

.slot-frame {
  background: #000;
  padding: 15px;
  border-radius: 10px;
  border: 2px solid var(--secondary-gold);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8);
  margin-bottom: 2rem;
  position: relative;
  height: 200px; /* Fixed height for viewing window */
  overflow: hidden;
}

.reel-container {
  width: 100%;
  height: 100%;
  position: relative;
  background: white; /* Reel background */
  border-radius: 4px;
  overflow: hidden;
}

.reel {
  display: flex;
  flex-direction: column;
  /* We will animate 'transform: translateY()' via JS */
}

/* Symbol Styling */
.symbol {
  height: 170px; /* Adjust based on container height to show mostly one symbol */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  font-weight: bold;
  color: #333;
  /* 3D Plate Styling */
  background: linear-gradient(to bottom, #f9f9f9, #e0e0e0);
  border: 1px solid #ccc;
  border-bottom: 4px solid #bbb; /* Thicker bottom for depth */
  box-shadow: inset 0 1px 0 white, 0 2px 5px rgba(0,0,0,0.1);
  margin: 0 5px; /* Slight gap if needed, or keep flush */
  border-radius: 4px; /* Slight roundness */
}

/* Special styling for specific symbols can be added here via JS classes later */

/* Visual overlays for 3D effect */
.overlay-gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0) 20%,
    rgba(0, 0, 0, 0) 80%,
    rgba(0, 0, 0, 0.6) 100%
  );
  pointer-events: none;
  z-index: 2;
}


.controls {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
  gap: 10px; /* Space between buttons */
}

/* ... existing control buttons ... */



.spin-button {
  background: linear-gradient(
    to bottom,
    var(--primary-gold),
    var(--secondary-gold)
  );
  border: none;
  padding: 1rem 3rem;
  border-radius: 50px;
  font-size: 1.5rem;
  font-weight: bold;
  color: #2b1d00;
  cursor: pointer;
  box-shadow: 0 5px 15px rgba(255, 215, 0, 0.3),
    inset 0 2px 2px rgba(255, 255, 255, 0.4);
  transition: all 0.2s ease;
  text-transform: uppercase;
}

.stop-button {
  background: linear-gradient(
    to bottom,
    #ff4d4d,
    #b30000
  );
  border: none;
  padding: 1rem 3rem;
  border-radius: 50px;
  font-size: 1.5rem;
  font-weight: bold;
  color: white;
  cursor: pointer;
  box-shadow: 0 5px 15px rgba(255, 0, 0, 0.3),
    inset 0 2px 2px rgba(255, 255, 255, 0.4);
  transition: all 0.2s ease;
  text-transform: uppercase;
}

.stop-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255, 0, 0, 0.4),
    inset 0 2px 2px rgba(255, 255, 255, 0.4);
}

.stop-button:active {
  transform: translateY(1px);
  box-shadow: 0 2px 10px rgba(255, 0, 0, 0.2);
}

.stop-button:disabled {
  background: #555;
  color: #888;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.spin-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255, 215, 0, 0.4),
    inset 0 2px 2px rgba(255, 255, 255, 0.4);
}

.spin-button:active {
  transform: translateY(1px);
  box-shadow: 0 2px 10px rgba(255, 215, 0, 0.2);
}

.spin-button:disabled {
  background: #555;
  color: #888;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.status-message {
  margin-top: 1.5rem;
  min-height: 1.5rem;
  font-size: 1.2rem;
  color: #aaa;
  font-weight: bold;
}

.status-message.win {
  color: var(--primary-gold);
  animation: pulse 0.5s infinite alternate;
}

@keyframes pulse {
  from {
    text-shadow: 0 0 5px var(--primary-gold);
  }
  to {
    text-shadow: 0 0 20px var(--primary-gold), 0 0 10px white;
  }
}



/* Bounce effect for landing */
@keyframes bounceLand {
  0% { transform: translateY(0); }
  30% { transform: translateY(20%); } /* Overshoot down */
  60% { transform: translateY(-10%); } /* Rebound up */
  100% { transform: translateY(0); } /* Settle */
}

.bounce {
  animation: bounceLand 0.4s ease-out;
}

/* Winner effects */
@keyframes pulseGold {
  0% { text-shadow:none; }
  50% { text-shadow: 0 0 20px #ffd700, 0 0 40px #ffd700; color: #b8860b; }
  100% { text-shadow:none; }
}

.symbol.winner-anim {
  animation: pulseGold 1s;
  z-index: 10;
  position: relative;
}

.win-line.active {
  background: rgba(255, 0, 0, 0.8);
  box-shadow: 0 0 15px red, 0 0 30px red;
  opacity: 1;
  animation: flashLine 0.5s  alternate;
}

@keyframes flashLine {
  from { width: 100%; left: 0; }
  to { width: 105%; left: -2.5%; }
}

/* POSITIVE confetti */
.confetti {
  position: absolute;
  top: 0;
  width: 10px;
  height: 10px;
  background-color: #ffd700;
  animation: fall linear forwards;
  z-index: 50; 
  pointer-events: none;
}

@keyframes fall {
  to { transform: translateY(100vh) rotate(720deg); }
}