/*
 * ============================================================
 *  SLOT MACHINE — VISUAL & ANIMATION UPGRADE
 *  Drop these rules into your existing <style> block in
 *  slot-machine.html, AFTER all existing rules so they
 *  override cleanly. No existing IDs or classes are removed.
 * ============================================================
 */

/* ── FONTS ─────────────────────────────────────────────────── */
/* Add to your existing Google Fonts link:
   &family=Rajdhani:wght@500;600;700
   (Orbitron is already loaded)
*/

/* ── ROOT TOKENS ────────────────────────────────────────────── */
:root {
  --cab-bg:        linear-gradient(160deg,#141d2e 0%,#0b1120 60%,#0d1420 100%);
  --reel-bg:       #02040a;
  --chrome-border: rgba(20,217,199,0.25);
  --glow-primary:  rgba(255,62,108,0.55);
  --glow-secondary:rgba(20,217,199,0.55);
}

/* ── NEON HEADER SIGN ───────────────────────────────────────── */
/* Wrap your existing headline block in:
   <div class="neon-sign-wrap"> ... </div>
*/
.neon-sign-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 4px;
}
.neon-badge {
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.35em;
  color: var(--color-secondary);
  text-transform: uppercase;
  text-shadow:
    0 0 6px  var(--color-secondary),
    0 0 18px var(--color-secondary),
    0 0 40px rgba(20,217,199,0.4);
  margin-bottom: 6px;
  animation: neonFlicker 7s infinite;
}
@keyframes neonFlicker {
  0%,88%,90%,92%,100% { opacity: 0.9; }
  89%,91%              { opacity: 0.25; }
}

/* ── PAGE TITLE GLOW ────────────────────────────────────────── */
#gameHeadline {
  text-shadow:
    0 0 10px var(--glow-primary),
    0 0 30px var(--glow-primary),
    0 2px 0 #000 !important;
}

/* ── CABINET SHELL ──────────────────────────────────────────── */
/* Add class="cabinet-shell" to the outer wrapper div
   that contains your slot-display + spinBtn, or apply
   directly to #game-slot-view if preferred. */
.cabinet-shell {
  background: var(--cab-bg);
  border-radius: 20px 20px 10px 10px;
  border: 2px solid rgba(30,42,58,0.9);
  box-shadow:
    0 0 0 1px rgba(20,217,199,0.12),
    0 0 40px rgba(20,217,199,0.07),
    0 30px 60px rgba(0,0,0,0.8),
    inset 0 1px 0 rgba(255,255,255,0.07),
    inset 0 -1px 0 rgba(0,0,0,0.5);
  padding: 14px 14px 18px;
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 380px;
}
/* top neon trim bar */
.cabinet-shell::before {
  content: '';
  position: absolute;
  top: -1px; left: 10%; right: 10%;
  height: 4px;
  background: linear-gradient(90deg,
    transparent, var(--color-secondary), var(--color-primary),
    var(--color-secondary), transparent);
  border-radius: 0 0 4px 4px;
  opacity: 0.7;
  filter: blur(1px);
}

/* ── RIVETS ─────────────────────────────────────────────────── */
/* Add this markup just inside .cabinet-shell, before slot-display:
   <div class="rivets">
     <div class="rivet"></div> × 6
   </div>
*/
.rivets {
  display: flex;
  justify-content: space-between;
  padding: 0 4px;
  margin-bottom: 10px;
}
.rivet {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #3a4f66, #0d1825);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.6),
    0 0 3px rgba(20,217,199,0.15);
}

/* ── REEL WINDOW (replaces .slot-display) ───────────────────── */
.slot-display {
  background: var(--reel-bg) !important;
  border: 2px solid var(--chrome-border) !important;
  border-radius: 12px !important;
  box-shadow:
    inset 0 0 30px rgba(0,0,0,0.9),
    inset 0 0 8px rgba(20,217,199,0.05),
    0 0 20px rgba(20,217,199,0.1) !important;
  padding: 0 5px !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: 0;
}
/* CRT scanlines */
.slot-display::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none; z-index: 20;
  border-radius: 9px;
  background: repeating-linear-gradient(
    0deg,
    transparent, transparent 3px,
    rgba(0,0,0,0.1) 3px, rgba(0,0,0,0.1) 4px
  );
}
/* glass glare */
.slot-display::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 40%; pointer-events: none; z-index: 21;
  border-radius: 9px 9px 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, transparent 100%);
}

/* ── PAYLINE ────────────────────────────────────────────────── */
.payline {
  background: linear-gradient(90deg,
    transparent, var(--color-secondary), var(--color-secondary), transparent) !important;
  box-shadow: 0 0 10px var(--color-secondary), 0 0 22px rgba(20,217,199,0.4) !important;
  animation: paylinePulse 2s ease-in-out infinite !important;
}
@keyframes paylinePulse {
  0%,100% { opacity: 0.6; }
  50%      { opacity: 1.0; }
}

/* ── INDIVIDUAL REELS ───────────────────────────────────────── */
.slot-reel {
  border-radius: 7px !important;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.6) 0%,
    rgba(8,12,22,0.3) 50%,
    rgba(0,0,0,0.6) 100%) !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: 0 !important;
  flex: 1 1 0 !important;
}
.reel-strip {
  display: flex;
  flex-direction: column;
  width: 100%;
  will-change: transform;
}
/* 3-D drum side shadows */
.slot-reel::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none; z-index: 5; border-radius: 7px;
  background: linear-gradient(90deg,
    rgba(0,0,0,0.5) 0%, transparent 28%,
    transparent 72%, rgba(0,0,0,0.5) 100%);
}

/* ── ICON TILES ─────────────────────────────────────────────── */
.icon-tile {
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.2));
}
/* idle breathing — only when a single idle symbol is showing */
.slot-reel:not(.reel-spinning) .reel-strip .icon-tile:only-child { animation: symbolIdle 3.0s ease-in-out infinite; }
#reel1:not(.reel-spinning) .reel-strip .icon-tile:only-child { animation-delay: 0s; }
#reel2:not(.reel-spinning) .reel-strip .icon-tile:only-child { animation-delay: 0.4s; }
#reel3:not(.reel-spinning) .reel-strip .icon-tile:only-child { animation-delay: 0.8s; }
@keyframes symbolIdle {
  0%,100% { transform: scale(1);    }
  50%      { transform: scale(1.05); }
}
/* blur during active spin */
.reel-spinning .icon-tile {
  animation: reelBlur 0.09s linear infinite !important;
  filter: blur(2px) drop-shadow(0 0 4px rgba(255,255,255,0.1));
}
@keyframes reelBlur {
  0%,100% { opacity: 0.8; }
  50%      { opacity: 0.5; }
}

/* ── SPIN BUTTON ────────────────────────────────────────────── */
#spinBtn {
  background: linear-gradient(135deg, #c4294e 0%, #ff3e6c 45%, #ff6085 100%) !important;
  box-shadow:
    0 0 0 2px rgba(255,62,108,0.3),
    0 0 20px rgba(255,62,108,0.4),
    0 6px 20px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.2) !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease !important;
  font-family: 'Orbitron', sans-serif !important;
  letter-spacing: 0.2em !important;
}
/* travelling shine sweep */
#spinBtn::before {
  content: '';
  position: absolute; top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  animation: btnShine 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes btnShine {
  0%      { left: -60%; }
  60%,100%{ left: 120%; }
}
#spinBtn:hover:not(:disabled) {
  transform: translateY(-2px) !important;
  box-shadow:
    0 0 0 2px rgba(255,62,108,0.5),
    0 0 30px rgba(255,62,108,0.6),
    0 10px 28px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.2) !important;
}
#spinBtn:active:not(:disabled) {
  transform: translateY(1px) scale(0.98) !important;
  box-shadow:
    0 0 0 2px rgba(255,62,108,0.3),
    0 0 10px rgba(255,62,108,0.3),
    0 2px 8px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.1) !important;
}

/* ── CREDITS / STATS BAR ────────────────────────────────────── */
/* Add this markup after #spinBtn, inside .cabinet-shell:
   <div class="stats-bar">
     <div><div class="stat-label">Spins</div><div class="stat-value" id="spinCount">0</div></div>
     <div class="jackpot-pill">Jackpot: 3× Match</div>
     <div><div class="stat-label">Wins</div><div class="stat-value" id="winCount">0</div></div>
   </div>
*/
.stats-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 11px;
  padding: 7px 12px;
  background: rgba(0,0,0,0.4);
  border-radius: 8px;
  border: 1px solid rgba(20,217,199,0.1);
}
.stat-label {
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(20,217,199,0.5);
  font-weight: 600;
}
.stat-value {
  font-family: 'Orbitron', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-secondary);
  text-shadow: 0 0 8px var(--color-secondary);
}
.jackpot-pill {
  background: rgba(255,62,108,0.12);
  border: 1px solid rgba(255,62,108,0.3);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--color-primary);
  text-transform: uppercase;
  font-weight: 700;
  animation: pillPulse 2.5s ease-in-out infinite;
}
@keyframes pillPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,62,108,0); }
  50%      { box-shadow: 0 0 8px 2px rgba(255,62,108,0.3); }
}

/* ── FLOOR LIGHTS ───────────────────────────────────────────── */
/* Add after .cabinet-shell closes:
   <div class="floor-lights">
     <div class="floor-light fl-pink"></div>
     <div class="floor-light fl-cyan"></div>
     <div class="floor-light fl-gold"></div>
     <div class="floor-light fl-cyan"></div>
     <div class="floor-light fl-pink"></div>
   </div>
*/
.floor-lights {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}
.floor-light {
  width: 6px; height: 6px;
  border-radius: 50%;
  animation: flSeq 1.8s ease-in-out infinite;
}
.fl-pink { background: var(--color-primary);  box-shadow: 0 0 6px var(--color-primary);  }
.fl-cyan { background: var(--color-secondary); box-shadow: 0 0 6px var(--color-secondary); animation-delay: 0.3s; }
.fl-gold { background: #f5c518;                box-shadow: 0 0 6px #f5c518;                animation-delay: 0.6s; }
.floor-light:nth-child(4) { animation-delay: 0.9s;  }
.floor-light:nth-child(5) { animation-delay: 1.2s; }
@keyframes flSeq {
  0%,40%,100% { opacity: 0.3; transform: scale(1);   }
  20%          { opacity: 1;   transform: scale(1.3); }
}

/* ── WIN FLASH (cabinet) ────────────────────────────────────── */
@keyframes winFlash {
  0%,100% { background: var(--cab-bg); }
  50%      { background: linear-gradient(160deg,#1a2e1a 0%,#0d1420 100%); box-shadow: 0 0 60px rgba(245,197,24,0.25); }
}
.cabinet-shell.win-flash {
  animation: winFlash 0.3s ease 3;
}

/* ── PRIZE RESULT TEXT ──────────────────────────────────────── */
#prizeResult {
  font-family: 'Orbitron', sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 0.1em !important;
  transition: color 0.3s, text-shadow 0.3s;
}
#prizeResult.state-win {
  color: #f5c518 !important;
  text-shadow: 0 0 12px #f5c518;
}
#prizeResult.state-lose {
  color: rgba(255,255,255,0.35) !important;
  text-shadow: none;
}