:root { --purple:#6c3483; --purple2:#9b59b6; }
body { background-image:radial-gradient(ellipse at 50% 0%, #4a0a6e20 0%, transparent 60%), repeating-linear-gradient(45deg,#ffffff03 0,#ffffff03 1px,transparent 1px,transparent 8px); }
.game-title-bar h1 { background:linear-gradient(180deg,#c39bd3,var(--purple2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.result-banner.jackpot-win { background:#d4af3720; border:1px solid #d4af3780; color:var(--gold2); box-shadow:0 0 40px #d4af3750; animation:pulseGold 0.5s ease-in-out 4; }
.history-item.jackpot { border-left-color:var(--gold); }
.history-item.win .h-amt, .history-item.jackpot .h-amt { color:var(--gold); }
.particle { font-size:1.2rem; animation-duration:1s; }
@keyframes pulseGold { 0%,100%{box-shadow:0 0 40px #d4af3750} 50%{box-shadow:0 0 80px #d4af37a0} }

/* ── SLOT MACHINE ── */
.machine {
  background:linear-gradient(180deg,#1a0a2e,#0e0618);
  border:2px solid #6c348360; border-radius:24px;
  padding:20px; margin-bottom:20px;
  box-shadow:0 0 40px #6c348330, inset 0 0 40px #00000060;
  position:relative; overflow:hidden;
}
.machine::before {
  content:''; position:absolute; inset:0; border-radius:22px;
  background:linear-gradient(180deg,#ffffff08 0%,transparent 40%);
  pointer-events:none;
}
/* subtle ambient glow */
.machine::after{
  content:'';
  position:absolute; inset:-60px;
  background:radial-gradient(circle at 50% 20%, rgba(245,197,24,0.18), transparent 55%),
             radial-gradient(circle at 20% 60%, rgba(156,89,182,0.16), transparent 50%),
             radial-gradient(circle at 80% 70%, rgba(108,52,131,0.20), transparent 45%);
  pointer-events:none;
  opacity:0.65;
  filter:blur(10px);
  transition:opacity .2s ease;
}

/* reel focus ring */
.reel-window{
  transition:box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}

/* neon top bar */
.machine-top {
  text-align:center; margin-bottom:16px;
  font-family:'Cinzel',serif; font-size:0.75rem; letter-spacing:4px; text-transform:uppercase;
  color:var(--purple2); text-shadow:0 0 10px var(--purple2);
}

/* reels container */
.reels-container {
  display:flex; gap:10px; justify-content:center; margin-bottom:16px;
  background:#060010; border-radius:16px; padding:12px;
  border:1px solid #6c348340;
  box-shadow:inset 0 4px 20px #00000080;
}

.reel-col { display:flex; flex-direction:column; align-items:center; gap:4px; }
.reel-label { font-size:0.65rem; color:var(--muted); letter-spacing:2px; text-transform:uppercase; margin-bottom:4px; }

.reel-window {
  width:88px; height:88px; overflow:hidden; border-radius:12px;
  background:linear-gradient(180deg,#0a0018,#060010);
  border:2px solid #6c348350;
  position:relative;
  box-shadow:inset 0 0 20px #00000080;
}
/* inner neon glass */
.reel-window::after{
  content:'';
  position:absolute; inset:-1px;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,0.08), transparent 55%);
  pointer-events:none;
  mix-blend-mode:screen;
  opacity:.9;
}
/* top/bottom fade masks */
.reel-window::before, .reel-window::after {
  content:''; position:absolute; left:0; right:0; height:20px; z-index:2; pointer-events:none;
}
.reel-window::before { top:0; background:linear-gradient(180deg,#060010,transparent); }
.reel-window::after  { bottom:0; background:linear-gradient(0deg,#060010,transparent); }

.reel-strip {
  display:flex; flex-direction:column; align-items:center;
  transition:transform 0.1s;
}
.reel-strip.spinning { animation:reelSpin var(--dur,0.8s) linear; }
.reel-strip.spinning .reel-symbol{ filter:drop-shadow(0 0 14px rgba(245,197,24,0.12)); }

@keyframes reelSpin {
  0%   { transform:translateY(0); }
  100% { transform:translateY(calc(-88px * var(--steps,10))); }
}

.reel-symbol {
  width:88px; height:88px; display:flex; align-items:center; justify-content:center;
  font-size:3rem; flex-shrink:0;
  filter:drop-shadow(0 0 8px #ffffff30);
  transform:translateZ(0);
}

/* anticipation shimmer */
.reel-window.spinning::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(245,197,24,0.10), transparent);
  transform:translateX(-120%);
  animation:slotsShimmer 0.55s linear infinite;
  z-index:4;
  pointer-events:none;
}
@keyframes slotsShimmer{
  0%{transform:translateX(-120%)}
  100%{transform:translateX(120%)}
}

/* payline */
.payline {
  position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
  height:2px; background:linear-gradient(90deg,transparent,var(--gold),transparent);
  opacity:0.6; z-index:3; pointer-events:none;
  box-shadow:0 0 16px rgba(245,197,24,0.15);
}
.payline.payline-win{
  opacity:1;
  animation:paylineGlow .35s ease-in-out 1;
}
@keyframes paylineGlow{
  0%{filter:brightness(1); transform:translateY(-50%) scaleX(0.96)}
  50%{filter:brightness(1.35); transform:translateY(-50%) scaleX(1.02)}
  100%{filter:brightness(1); transform:translateY(-50%) scaleX(1)}
}

/* win flash */
.reel-window.jackpot { animation:jackpotFlash 0.4s ease-in-out 4; }
@keyframes jackpotFlash {
  0%,100% { border-color:#6c348350; box-shadow:inset 0 0 20px #00000080; }
  50%      { border-color:var(--gold); box-shadow:inset 0 0 20px #d4af3740, 0 0 20px #d4af3760; }
}

/* non-jackpot win highlight */
.reel-window.win { border-color:rgba(0,200,83,0.55) !important; box-shadow:inset 0 0 24px rgba(0,200,83,0.18), 0 0 26px rgba(0,200,83,0.10); }

/* ── PAYTABLE ── */
.paytable { background:var(--card-bg); border:1px solid var(--border); border-radius:12px; padding:14px; margin-bottom:20px; }
.paytable-title { font-family:'Cinzel',serif; font-size:0.75rem; color:var(--muted); letter-spacing:2px; text-transform:uppercase; margin-bottom:10px; }
.pay-row { display:flex; justify-content:space-between; align-items:center; padding:5px 0;
  border-bottom:1px solid #ffffff08; font-size:0.85rem; }
.pay-row:last-child { border-bottom:none; }
.pay-symbols { font-size:1rem; letter-spacing:2px; }
.pay-mult { font-family:'Cinzel',serif; color:var(--gold); }

/* ── SPIN BUTTON ── */
.btn-spin {
  display:block; width:100%;
  padding:16px 24px; margin-top:8px;
  background:linear-gradient(135deg,#6c3483 0%,#9b59b6 100%);
  color:#fff; font-family:'Oswald',sans-serif;
  font-size:1.1rem; font-weight:700; letter-spacing:3px;
  border:none; border-radius:10px; cursor:pointer;
  transition:all 0.2s;
  box-shadow:0 4px 22px rgba(108,52,131,0.45);
}
.btn-spin:hover { filter:brightness(1.1); transform:translateY(-1px); box-shadow:0 8px 28px rgba(108,52,131,0.65); }
.btn-spin:active { transform:scale(0.97); }
.btn-spin:disabled { opacity:0.4; cursor:not-allowed; transform:none; box-shadow:none; }

/* ── GAME SELECTOR ── */
.game-selector {
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px;
  margin-bottom:20px;
}
.game-selector-title {
  font-family:'Cinzel',serif;
  font-size:0.75rem;
  color:var(--muted);
  letter-spacing:2px;
  text-transform:uppercase;
  margin-bottom:12px;
  text-align:center;
}
.game-options {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
  gap:10px;
}
.game-option {
  background:linear-gradient(135deg, #1a0a2e, #0e0618);
  border:2px solid #6c348350;
  border-radius:12px;
  padding:14px 10px;
  text-align:center;
  cursor:pointer;
  transition:all 0.2s;
  position:relative;
  overflow:hidden;
}
.game-option::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,0.05), transparent);
  pointer-events:none;
}
.game-option:hover {
  border-color:#9b59b6;
  transform:translateY(-2px);
  box-shadow:0 4px 16px rgba(108,52,131,0.4);
}
.game-option.active {
  border-color:var(--gold);
  box-shadow:0 0 20px rgba(245,197,24,0.3), inset 0 0 20px rgba(245,197,24,0.1);
}
.game-option-icon {
  font-size:2rem;
  margin-bottom:6px;
  filter:drop-shadow(0 0 8px rgba(245,197,24,0.3));
}
.game-option-name {
  font-family:'Oswald',sans-serif;
  font-size:0.85rem;
  font-weight:600;
  color:var(--gold2);
  letter-spacing:0.5px;
}
.game-option.active .game-option-name {
  color:var(--gold);
  text-shadow:0 0 10px var(--gold);
}

/* ── MACHINE THEMES ── */
.machine.theme-purple {
  background:linear-gradient(180deg,#1a0a2e,#0e0618);
  border-color:#6c348360;
}
.machine.theme-purple::after {
  background:radial-gradient(circle at 50% 20%, rgba(245,197,24,0.18), transparent 55%),
             radial-gradient(circle at 20% 60%, rgba(156,89,182,0.16), transparent 50%),
             radial-gradient(circle at 80% 70%, rgba(108,52,131,0.20), transparent 45%);
}

.machine.theme-tropical {
  background:linear-gradient(180deg,#0a2e1a,#06180e);
  border-color:#27ae6060;
}
.machine.theme-tropical::after {
  background:radial-gradient(circle at 50% 20%, rgba(39,174,96,0.20), transparent 55%),
             radial-gradient(circle at 20% 60%, rgba(241,196,15,0.18), transparent 50%),
             radial-gradient(circle at 80% 70%, rgba(230,126,34,0.20), transparent 45%);
}
.machine.theme-tropical .machine-top {
  color:#27ae60;
  text-shadow:0 0 10px #27ae60;
}

.machine.theme-gold {
  background:linear-gradient(180deg,#2e2a0a,#181806);
  border-color:#d4af3760;
}
.machine.theme-gold::after {
  background:radial-gradient(circle at 50% 20%, rgba(212,175,55,0.25), transparent 55%),
             radial-gradient(circle at 20% 60%, rgba(255,215,0,0.20), transparent 50%),
             radial-gradient(circle at 80% 70%, rgba(245,197,24,0.22), transparent 45%);
}
.machine.theme-gold .machine-top {
  color:#d4af37;
  text-shadow:0 0 10px #d4af37;
}

.machine.theme-western {
  background:linear-gradient(180deg,#2e1a0a,#180e06);
  border-color:#a0522d60;
}
.machine.theme-western::after {
  background:radial-gradient(circle at 50% 20%, rgba(205,133,63,0.22), transparent 55%),
             radial-gradient(circle at 20% 60%, rgba(139,69,19,0.20), transparent 50%),
             radial-gradient(circle at 80% 70%, rgba(160,82,45,0.22), transparent 45%);
}
.machine.theme-western .machine-top {
  color:#cd853f;
  text-shadow:0 0 10px #cd853f;
}

/* Theme-specific reel window glows */
.machine.theme-tropical .reel-window {
  border-color:#27ae6050;
}
.machine.theme-gold .reel-window {
  border-color:#d4af3750;
}
.machine.theme-western .reel-window {
  border-color:#a0522d50;
}

/* Theme-specific payline colors */
.machine.theme-tropical .payline {
  background:linear-gradient(90deg,transparent,#27ae60,transparent);
  box-shadow:0 0 16px rgba(39,174,96,0.15);
}
.machine.theme-gold .payline {
  background:linear-gradient(90deg,transparent,#d4af37,transparent);
  box-shadow:0 0 16px rgba(212,175,55,0.15);
}
.machine.theme-western .payline {
  background:linear-gradient(90deg,transparent,#cd853f,transparent);
  box-shadow:0 0 16px rgba(205,133,63,0.15);
}