:root{
  --bg: #071019;
  --card: rgba(10,20,40,0.85);
  --accent: #ffb86b;
  --muted: #9fb0c8;
  --led: #ffb86b;
  --highlight: #ffd700;
}

body{
  margin:0;
  font-family:'Segoe UI',Roboto,sans-serif;
  background: var(--bg);
  color:#fff;
}

.casino-wrapper{
  max-width:1100px;
  margin:0 auto;
  padding:20px;
  text-align:center;
}

header h1{
  color:var(--accent);
  text-shadow: 2px 2px 5px #000;
}
.subtitle{
  color:var(--muted);
  margin-bottom:10px;
}
.credits-panel{
  display:flex;
  justify-content:space-around;
  margin-bottom:20px;
  font-weight:700;
  font-size:1.2em;
}

.slot-stage{
  background: #0b1a33;
  padding:20px;
  border-radius:15px;
  box-shadow: 0 0 30px rgba(255,215,0,0.3) inset;
}

.controls-top{
  margin-bottom:20px;
}
.controls-top input{
  width:60px;
  font-weight:700;
  text-align:center;
  border-radius:5px;
  border:none;
}
.btn{
  background:linear-gradient(145deg,#ffb86b,#ffa500);
  color:#071018;
  border:none;
  padding:10px 14px;
  border-radius:10px;
  cursor:pointer;
  font-weight:700;
  margin-left:5px;
  transition:0.2s all;
}
.btn:hover{
  transform:scale(1.05);
  box-shadow:0 0 10px var(--highlight);
}
.btn.secondary{
  background:transparent;
  border:1px solid rgba(255,255,255,0.2);
  color:var(--muted);
}

.reels-container{
  display:grid;
  grid-template-columns:repeat(5,100px);
  gap:10px;
  justify-content:center;
  position:relative;
}

.reel{
  width:100px;
  height:300px;
  background: var(--card);
  border-radius:15px;
  overflow:hidden;
  box-shadow:0 5px 15px rgba(0,0,0,0.5),0 0 15px var(--highlight) inset;
  position:relative;
}

.strip{
  position:absolute; left:0; right:0; top:0;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cell{
  height:100px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.badge{
  width:60px;
  height:60px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2.2em;
  transition:0.2s;
  border-radius:10px;
}

.cell.win .badge{
  animation:glow 0.8s infinite alternate;
}

@keyframes glow{
  0%{transform:scale(1.05); text-shadow: 0 0 5px gold;}
  100%{transform:scale(1.2); text-shadow: 0 0 20px gold;}
}

.particle{
  pointer-events:none;
  will-change:transform, opacity;
  z-index:1000;
  border-radius:50%;
  background:gold;
}

/* Jackpot Overlay */
#jackpot-overlay{
  position:fixed;
  top:0; left:0; right:0; bottom:0;
  pointer-events:none;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:80px;
  font-weight:900;
  color: gold;
  text-shadow: 2px 2px 20px #fff, 0 0 40px #ffd700;
  opacity:0;
  transform:scale(0.5);
  transition:opacity 0.3s, transform 0.3s;
  z-index:2000;
}
#jackpot-overlay.active{
  opacity:1;
  transform:scale(1);
  animation:jackpot-pulse 1s ease-in-out;
}
@keyframes jackpot-pulse{
  0%{transform:scale(0.5); opacity:0;}
  50%{transform:scale(1.2); opacity:1;}
  100%{transform:scale(1); opacity:1;}
}