/*───────────────────────────────────────────────────────────────────────────
  Global Reset & Variables
───────────────────────────────────────────────────────────────────────────*/
:root {
  --font-family: "Poppins", sans-serif;

  /* Cute colorful palette */
  --bg-cute: linear-gradient(135deg, #ffeaa7 0%, #fab1a0 25%, #fd79a8 50%, #a29bfe 75%, #74b9ff 100%);
  --accent-pink: #ff7675;        /* Cute coral pink */
  --accent-purple: #a29bfe;      /* Soft purple */
  --accent-blue: #74b9ff;        /* Sky blue */
  --accent-yellow: #fdcb6e;      /* Warm yellow */
  --accent-mint: #00b894;        /* Mint green */
  --subtle-white: #ffeaa7;       /* Cream white */
  --light-text: #2d3436;         /* Dark text for readability */
  --cute-gradient: linear-gradient(
    135deg,
    #ff7675 0%,
    #fdcb6e 25%,
    #a29bfe 50%,
    #74b9ff 75%,
    #00b894 100%
  );
  --button-gradient: linear-gradient(
    135deg,
    #ff7675 0%,
    #fd79a8 50%,
    #a29bfe 100%
  );
  --fade-duration: 0.3s;
  --transition-all: all var(--fade-duration) ease-out;
  --slot-width: 120px;
  --slot-dim: calc(var(--slot-width) / 5);
  --slot-height: calc(var(--slot-dim) * 5);
  --shadow-cute: 0 0 20px rgba(255, 118, 117, 0.4), 0 0 40px rgba(162, 155, 254, 0.3);
}

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

body {
  background: var(--bg-cute);
  background-attachment: fixed;
  font-family: var(--font-family);
  color: var(--light-text);
  overflow: hidden;
  position: relative;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  animation: cuteBackgroundShift 10s ease-in-out infinite;
  font-size: 7px;
}

/* Cute background animation */
@keyframes cuteBackgroundShift {
  0%, 100% { 
    background: linear-gradient(135deg, #ffeaa7 0%, #fab1a0 25%, #fd79a8 50%, #a29bfe 75%, #74b9ff 100%);
  }
  25% { 
    background: linear-gradient(135deg, #74b9ff 0%, #ffeaa7 25%, #fd79a8 50%, #fab1a0 75%, #a29bfe 100%);
  }
  50% { 
    background: linear-gradient(135deg, #fd79a8 0%, #a29bfe 25%, #74b9ff 50%, #ffeaa7 75%, #fab1a0 100%);
  }
  75% { 
    background: linear-gradient(135deg, #a29bfe 0%, #fd79a8 25%, #ffeaa7 50%, #74b9ff 75%, #fab1a0 100%);
  }
}

/* Video Background */
#background-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -10;
  opacity: 0.8;
}

/* Cute sparkly overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: 
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.8) 1px, transparent 1px),
    radial-gradient(circle at 60% 70%, rgba(255, 255, 255, 0.6) 1px, transparent 1px),
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.7) 1px, transparent 1px),
    radial-gradient(circle at 30% 80%, rgba(255, 255, 255, 0.5) 1px, transparent 1px),
    radial-gradient(circle at 90% 60%, rgba(255, 255, 255, 0.8) 1px, transparent 1px);
  background-size: 100px 100px, 150px 150px, 80px 80px, 120px 120px, 200px 200px;
  animation: sparkleFloat 8s ease-in-out infinite;
  z-index: -5;
  pointer-events: none;
}

@keyframes sparkleFloat {
  0%, 100% { 
    transform: translateY(0px); 
    opacity: 0.7;
  }
  50% { 
    transform: translateY(-10px); 
    opacity: 1;
  }
}

/* Remove floating emojis */
body::after {
  display: none;
}

body,
.perspective{  
  width: 100vw; height: 100vh;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column-reverse;
}

.perspective{
  width: 100%;
  max-width: 160px;
  margin-top: 3px;
  transform: scale(0.08);
  animation: gentleFloat 4s ease-in-out infinite;
  position: relative; 
  display: flex;              /* lay out slot-container and side-payout-info side by side */
  flex-direction: row;        /* default, but make sure it's not overridden elsewhere */
  align-items: center;        /* vertically center both panels */
  gap: 3px;                   /* reduced gap between reels and payouts */
}

/* OLD CSS REMOVED - CONFLICTED WITH NEW STRUCTURE */

.figure{
  height: var(--slot-dim);
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background-size: 60%;
  background-repeat: no-repeat;
  background-position: center;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, opacity, filter, box-shadow;
  border-radius: 15px;
  margin: 3px 2px;
  min-height: calc(var(--slot-dim) - 6px);
  /* Fallback styling for figures without symbol classes */
  background-color: rgba(255, 255, 255, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.5);
  transform-origin: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.figure:not(.figure-1):not(.figure-2):not(.figure-3):not(.figure-4):not(.figure-5):not(.figure-6):not(.figure-7):not(.figure-8) {
  /* Special fallback for figures that don't have symbol classes */
  background-color: rgba(255, 215, 0, 0.4) !important;
  border: 2px solid rgba(255, 215, 0, 0.6) !important;
}

.figure:not(.figure-1):not(.figure-2):not(.figure-3):not(.figure-4):not(.figure-5):not(.figure-6):not(.figure-7):not(.figure-8)::after {
  content: "?";
  font-size: calc(var(--slot-dim) * 0.4);
  font-weight: bold;
  color: rgba(255, 215, 0, 0.8);
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.figure:hover {
  transform: scale(1.1);
  filter: brightness(1.2);
}

/* Remove old pseudo-element styles */
.figure:after,
.figure:before{
  display: none;
}

/* Common/Base Symbols - Bright and cheerful */
.figure-1 {
  background-image: url('slot symbols/S_BASE.png');
  background-color: rgba(255, 215, 0, 0.4);
  box-shadow: inset 0 0 20px rgba(255, 215, 0, 0.3);
  border: 2px solid rgba(255, 215, 0, 0.5);
}

.figure-2 {
  background-image: url('slot symbols/O_BASE.png');
  background-color: rgba(255, 105, 180, 0.4);
  box-shadow: inset 0 0 20px rgba(255, 105, 180, 0.3);
  border: 2px solid rgba(255, 105, 180, 0.5);
}

.figure-3 {
  background-image: url('slot symbols/L_BASE.png');
  background-color: rgba(135, 206, 235, 0.4);
  box-shadow: inset 0 0 20px rgba(135, 206, 235, 0.3);
  border: 2px solid rgba(135, 206, 235, 0.5);
}

/* Rare Symbols - More vibrant */
.figure-4 {
  background-image: url('slot symbols/trump.png');
  background-color: rgba(255, 107, 107, 0.4);
  box-shadow: inset 0 0 20px rgba(255, 107, 107, 0.4);
  border: 2px solid rgba(255, 107, 107, 0.6);
  animation: rarePulse 2s ease-in-out infinite;
}

.figure-5 {
  background-image: url('slot symbols/elon.png');
  background-color: rgba(0, 212, 255, 0.4);
  box-shadow: inset 0 0 20px rgba(0, 212, 255, 0.4);
  border: 2px solid rgba(0, 212, 255, 0.6);
  animation: rarePulse 2s ease-in-out infinite 0.5s;
}

/* Premium Symbols - Sparkling effects */
.figure-6 {
  background-image: url('slot symbols/dogwifhat.png');
  background-color: rgba(255, 215, 0, 0.5);
  box-shadow: 
    inset 0 0 30px rgba(255, 215, 0, 0.5),
    0 0 20px rgba(255, 215, 0, 0.3);
  border: 2px solid rgba(255, 215, 0, 0.8);
  animation: premiumSparkle 1.5s ease-in-out infinite;
}

.figure-7 {
  background-image: url('slot symbols/popcat.png');
  background-color: rgba(255, 0, 110, 0.5);
  box-shadow: 
    inset 0 0 30px rgba(255, 0, 110, 0.5),
    0 0 20px rgba(255, 0, 110, 0.3);
  border: 2px solid rgba(255, 0, 110, 0.8);
  animation: premiumSparkle 1.5s ease-in-out infinite 0.3s;
}

/* Top Premium Symbol - PEPE with rainbow effects */
.figure-8 {
  background-image: url('slot symbols/pepe.png');
  background-size: 60%;
  background-repeat: no-repeat;
  background-position: center;
  background-color: rgba(76, 124, 89, 0.8);
  box-shadow: 
    inset 0 0 30px rgba(255, 255, 255, 0.5),
    0 0 25px rgba(255, 255, 255, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.8);
  position: relative;
  overflow: hidden;
}

/* Rainbow animation overlay */
.figure-8::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, 
    rgba(255,0,0,0.2), 
    rgba(255,165,0,0.2), 
    rgba(255,255,0,0.2), 
    rgba(0,255,0,0.2), 
    rgba(0,0,255,0.2), 
    rgba(75,0,130,0.2), 
    rgba(238,130,238,0.2)
  );
  background-size: 400% 400%;
  background-position: 0% 50%;
  animation: rainbowShimmer 2s linear infinite;
  z-index: 1;
  pointer-events: none;
}

/* Fallback text if image doesn't load */
.figure-8::after {
  content: "PEPE";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Comic Sans MS', cursive, sans-serif;
  font-size: calc(var(--slot-dim) * 0.15);
  font-weight: bold;
  color: white;
  text-shadow: 
    2px 2px 4px rgba(0,0,0,0.8),
    0 0 10px rgba(76, 124, 89, 0.8);
  z-index: 2;
}

.toggle{
  position: absolute;
  opacity: 0;
  top: -55px;
  left: -55px;
}

.btn{
  width: 120px;
  height: 50px;
  position: relative;
  color: white;
  cursor: pointer;
  border-radius: 40px;
  background: var(--button-gradient);
  margin-top: 35px;
  backface-visibility: hidden;
  outline: none;
  border: 4px solid #fff;
  font-family: 'Comic Sans MS', cursive, sans-serif;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  line-height: 42px;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
  box-shadow: 
    0 8px 20px rgba(255, 107, 107, 0.4),
    0 4px 10px rgba(0,0,0,0.2),
    inset 0 -4px 8px rgba(0,0,0,0.2),
    inset 0 4px 8px rgba(255,255,255,0.3);
  transition: all 0.3s ease;
  will-change: transform;
  overflow: hidden;
}

/* Candy shine effect */
.btn::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255,255,255,0.6) 50%,
    transparent 70%
  );
  transform: rotate(45deg) translateX(-100%);
  transition: transform 0.6s;
}

.btn:hover::before {
  transform: rotate(45deg) translateX(100%);
}

.btn:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 
    0 12px 30px rgba(255, 107, 107, 0.6),
    0 8px 15px rgba(0,0,0,0.3),
    inset 0 -4px 8px rgba(0,0,0,0.2),
    inset 0 4px 8px rgba(255,255,255,0.4);
}

.btn:active {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 
    0 6px 15px rgba(255, 107, 107, 0.4),
    0 2px 8px rgba(0,0,0,0.2),
    inset 0 -2px 6px rgba(0,0,0,0.2),
    inset 0 2px 6px rgba(255,255,255,0.3);
}

.btn:before,
.btn:after{
  display: none;
}

/* OLD CHECKED CSS REMOVED - CONFLICTED WITH NEW STRUCTURE */

/* Intense button feedback during spin */
#btn-spin:checked ~ .btn {
  animation: megaButtonExcitement 10s ease-out 1 forwards;
  pointer-events: none;
}

/* Dramatic background effects during spin */
#btn-spin:checked ~ body::before {
  background: radial-gradient(circle at center, 
    rgba(180, 160, 140, 0.08) 0%,
    rgba(160, 140, 160, 0.08) 25%,
    rgba(140, 160, 180, 0.08) 50%,
    rgba(0, 0, 0, 0.5) 100%
  );
  transition: background 1s ease;
}

/* Game Info Display - Softer, easier on the eyes */
.game-info {
  margin-top: 25px;
  text-align: center;
  font-family: 'Comic Sans MS', cursive, sans-serif;
  background: rgba(240, 240, 245, 0.85); /* Much softer background */
  padding: 15px 30px;
  border-radius: 15px;
  border: 2px solid rgba(200, 180, 140, 0.6); /* Muted golden border */
  box-shadow: 0 6px 15px rgba(0,0,0,0.08); /* Softer shadow */
}

.pool-display {
  font-size: 1.1rem;
  font-weight: 500;
  background: linear-gradient(
    45deg,
    rgba(255, 215, 0, 0.8),
    rgba(255, 169, 0, 0.8),
    rgba(255, 215, 0, 0.8)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
  animation: prizePulse 8s ease-out forwards;
}

.result-display {
  font-size: 16px; /* Smaller text */
  font-weight: bold;
  min-height: 25px;
  color: #555; /* Softer text color */
  transition: all 0.5s ease;
}

.result-display.win {
  color: #8B6F47; /* Muted brown instead of bright red */
  font-size: 20px; /* Less dramatic size increase */
  animation: softCandyWin 1s ease-out;
}

.result-display.no-win {
  color: #888; /* Softer gray */
  animation: gentleCandyShake 0.5s ease-out;
}

/* Much More Subdued Mega Win Result Display */
.result-display.mega-win {
  background: linear-gradient(135deg, 
    rgba(220, 210, 180, 0.7) 0%, 
    rgba(200, 180, 160, 0.7) 25%,
    rgba(180, 160, 180, 0.7) 50%,
    rgba(160, 180, 200, 0.7) 75%,
    rgba(180, 200, 180, 0.7) 100%
  ) !important; /* Much more muted colors */
  border: 2px solid rgba(180, 160, 140, 0.8) !important; /* Softer border */
  animation: softMegaWinGlow 3s ease-in-out infinite !important; /* Gentler animation */
  font-size: 16px !important; /* Smaller text */
  font-weight: bold !important;
  border-radius: 12px !important; /* Softer corners */
  padding: 12px 20px !important; /* Less padding */
  box-shadow: 
    0 0 20px rgba(180, 160, 140, 0.3),
    0 0 35px rgba(160, 140, 160, 0.2),
    inset 0 0 15px rgba(255, 255, 255, 0.3) !important; /* Much softer glow */
}

/* Enhanced Mega Win Glow with Rainbow Effect */
@keyframes megaWinGlow {
  0%, 100% { 
    text-shadow: 
      0 0 8px rgba(255, 215, 0, 0.9),
      0 0 16px rgba(255, 215, 0, 0.7),
      0 0 24px rgba(255, 215, 0, 0.5),
      0 0 35px rgba(255, 69, 180, 0.4);
    filter: brightness(1) hue-rotate(0deg);
  }
  16.66% { 
    text-shadow: 
      0 0 12px rgba(255, 69, 180, 1),
      0 0 24px rgba(255, 69, 180, 0.8),
      0 0 36px rgba(255, 69, 180, 0.6),
      0 0 48px rgba(87, 206, 235, 0.4);
    filter: brightness(1.2) hue-rotate(60deg);
  }
  33.33% { 
    text-shadow: 
      0 0 12px rgba(87, 206, 235, 1),
      0 0 24px rgba(87, 206, 235, 0.8),
      0 0 36px rgba(87, 206, 235, 0.6),
      0 0 48px rgba(152, 251, 152, 0.4);
    filter: brightness(1.4) hue-rotate(120deg);
  }
  50% { 
    text-shadow: 
      0 0 12px rgba(152, 251, 152, 1),
      0 0 24px rgba(152, 251, 152, 0.8),
      0 0 36px rgba(152, 251, 152, 0.6),
      0 0 48px rgba(218, 112, 214, 0.4);
    filter: brightness(1.6) hue-rotate(180deg);
  }
  66.66% { 
    text-shadow: 
      0 0 12px rgba(218, 112, 214, 1),
      0 0 24px rgba(218, 112, 214, 0.8),
      0 0 36px rgba(218, 112, 214, 0.6),
      0 0 48px rgba(255, 140, 0, 0.4);
    filter: brightness(1.4) hue-rotate(240deg);
  }
  83.33% { 
    text-shadow: 
      0 0 12px rgba(255, 140, 0, 1),
      0 0 24px rgba(255, 140, 0, 0.8),
      0 0 36px rgba(255, 140, 0, 0.6),
      0 0 48px rgba(255, 215, 0, 0.4);
    filter: brightness(1.2) hue-rotate(300deg);
  }
}

/* Performance optimizations */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media screen and (max-height: 440px){
  .perspective{
    transform: scale(.7);
  }
}

/* Enhanced Winning Symbol Highlighting - Softer Version */
.figure.winning {
  animation: softWinPulse 0.8s ease-in-out infinite;
  z-index: 100;
  position: relative;
  border: 2px solid rgba(180, 160, 140, 0.8) !important;
  border-radius: 15px !important;
  box-shadow: 
    inset 0 0 15px rgba(180, 160, 140, 0.6),
    0 0 20px rgba(180, 160, 140, 0.7),
    0 0 30px rgba(255, 255, 255, 0.4),
    0 0 40px rgba(160, 140, 160, 0.3) !important;
  transform-origin: center;
  overflow: visible !important;
}

/* Add soft particle effects for winning symbols */
.figure.winning::before {
  content: '';
  position: absolute;
  top: -8px;
  left: -8px;
  right: -8px;
  bottom: -8px;
  background: radial-gradient(circle at 50% 50%, 
    rgba(180, 160, 140, 0.2) 0%,
    rgba(160, 140, 160, 0.15) 25%,
    rgba(140, 160, 180, 0.15) 50%,
    rgba(160, 180, 160, 0.15) 75%,
    transparent 100%
  );
  border-radius: 18px;
  animation: softFloatingParticles 2s ease-out infinite;
  z-index: -1;
  pointer-events: none;
}

/* Enhanced Smooth Transitions */
.figure {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, opacity, filter, box-shadow;
  transform-origin: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  position: relative;
}

/* Performance Optimization During Cascades */
.figure[style*="animation"] {
  will-change: transform, opacity, filter, box-shadow, border;
  transform-style: flat;
  -webkit-transform-style: flat;
  animation-fill-mode: both;
  contain: layout style paint;
}

/* Machine Floating Animation Enhancement - MORE INTENSE */
.perspective {
  animation: dramaticFloat 10s ease-in-out infinite;
}

@keyframes dramaticFloat {
  0%, 100% {
    transform: translateY(0px) scale(0.85) rotate(0deg);
    filter: brightness(1) saturate(1);
  }
  15% {
    transform: translateY(-12px) scale(0.855) rotate(0.5deg);
    filter: brightness(1.1) saturate(1.1);
  }
  30% {
    transform: translateY(-25px) scale(0.86) rotate(-0.3deg);
    filter: brightness(1.2) saturate(1.2);
  }
  50% {
    transform: translateY(-35px) scale(0.865) rotate(0.8deg);
    filter: brightness(1.3) saturate(1.3);
  }
  70% {
    transform: translateY(-20px) scale(0.858) rotate(-0.5deg);
    filter: brightness(1.2) saturate(1.2);
  }
  85% {
    transform: translateY(-8px) scale(0.852) rotate(0.2deg);
    filter: brightness(1.1) saturate(1.1);
  }
}

/* COMFORTABLE 10-SECOND BUILDUP SPIN - MUCH LOWER BRIGHTNESS */
@keyframes megaDramaticSpin {
  0% {
    transform: scale(1) rotate(0deg);
    filter: brightness(1) saturate(1) contrast(1);
    box-shadow: 
      0 0 0 2px rgba(200, 180, 140, 0.15),
      0 0 0 4px rgba(180, 160, 140, 0.08),
      0 10px 20px rgba(0,0,0,0.06),
      inset 0 0 15px rgba(255, 215, 0, 0.03);
  }
  5% {
    transform: scale(1.002) rotate(0.2deg);
    filter: brightness(1.002) saturate(1.005) contrast(1.001);
    box-shadow: 
      0 0 0 3px rgba(200, 180, 140, 0.18),
      0 0 0 6px rgba(180, 160, 140, 0.12),
      0 0 4px rgba(255, 215, 0, 0.05),
      0 12px 25px rgba(0,0,0,0.08),
      inset 0 0 18px rgba(255, 215, 0, 0.04);
  }
  10% {
    transform: scale(1.005) rotate(-0.3deg);
    filter: brightness(1.005) saturate(1.01) contrast(1.002);
    box-shadow: 
      0 0 0 4px rgba(200, 180, 140, 0.22),
      0 0 0 8px rgba(180, 160, 140, 0.15),
      0 0 6px rgba(255, 215, 0, 0.08),
      0 15px 30px rgba(0,0,0,0.1),
      inset 0 0 22px rgba(255, 215, 0, 0.06);
  }
  20% {
    transform: scale(1.01) rotate(0.5deg);
    filter: brightness(1.01) saturate(1.02) contrast(1.005);
    box-shadow: 
      0 0 0 6px rgba(200, 180, 140, 0.3),
      0 0 0 12px rgba(180, 160, 140, 0.22),
      0 0 0 18px rgba(160, 140, 160, 0.15),
      0 0 10px rgba(255, 215, 0, 0.12),
      0 20px 40px rgba(0,0,0,0.12),
      inset 0 0 28px rgba(255, 215, 0, 0.08);
  }
  30% {
    transform: scale(1.015) rotate(-0.8deg);
    filter: brightness(1.015) saturate(1.03) contrast(1.008);
    box-shadow: 
      0 0 0 8px rgba(200, 180, 140, 0.35),
      0 0 0 16px rgba(180, 160, 140, 0.28),
      0 0 0 24px rgba(160, 140, 160, 0.22),
      0 0 0 32px rgba(140, 160, 180, 0.15),
      0 0 15px rgba(255, 215, 0, 0.18),
      0 25px 50px rgba(0,0,0,0.15),
      inset 0 0 35px rgba(255, 215, 0, 0.12);
  }
  40% {
    transform: scale(1.02) rotate(1.2deg);
    filter: brightness(1.02) saturate(1.04) contrast(1.01);
    box-shadow: 
      0 0 0 10px rgba(200, 180, 140, 0.4),
      0 0 0 20px rgba(180, 160, 140, 0.35),
      0 0 0 30px rgba(160, 140, 160, 0.28),
      0 0 0 40px rgba(140, 160, 180, 0.22),
      0 0 0 50px rgba(160, 180, 160, 0.15),
      0 0 20px rgba(255, 215, 0, 0.22),
      0 30px 60px rgba(0,0,0,0.18),
      inset 0 0 42px rgba(255, 215, 0, 0.15);
  }
  50% {
    transform: scale(1.025) rotate(-1.5deg);
    filter: brightness(1.025) saturate(1.05) contrast(1.012);
    box-shadow: 
      0 0 0 12px rgba(200, 180, 140, 0.45),
      0 0 0 24px rgba(180, 160, 140, 0.4),
      0 0 0 36px rgba(160, 140, 160, 0.35),
      0 0 0 48px rgba(140, 160, 180, 0.28),
      0 0 0 60px rgba(160, 180, 160, 0.22),
      0 0 0 72px rgba(180, 160, 200, 0.15),
      0 0 25px rgba(255, 215, 0, 0.25),
      0 35px 70px rgba(0,0,0,0.2),
      inset 0 0 50px rgba(255, 215, 0, 0.18);
  }
  60% {
    transform: scale(1.03) rotate(1.8deg);
    filter: brightness(1.03) saturate(1.06) contrast(1.015);
    box-shadow: 
      0 0 0 14px rgba(200, 180, 140, 0.5),
      0 0 0 28px rgba(180, 160, 140, 0.45),
      0 0 0 42px rgba(160, 140, 160, 0.4),
      0 0 0 56px rgba(140, 160, 180, 0.35),
      0 0 0 70px rgba(160, 180, 160, 0.28),
      0 0 0 84px rgba(180, 160, 200, 0.22),
      0 0 0 98px rgba(200, 180, 160, 0.15),
      0 0 30px rgba(255, 215, 0, 0.28),
      0 40px 80px rgba(0,0,0,0.22),
      inset 0 0 60px rgba(255, 215, 0, 0.2);
  }
  70% {
    transform: scale(1.035) rotate(-2.2deg);
    transform: scale(1.05) rotate(-1.8deg); 
    filter: brightness(1.07) saturate(1.15);
    box-shadow: 
      0 25px 55px rgba(255, 107, 107, 0.65),
      0 0 28px rgba(200, 180, 140, 0.32),
      0 0 22px rgba(180, 160, 140, 0.28),
      0 0 18px rgba(255, 215, 0, 0.28),
      0 0 14px rgba(160, 140, 160, 0.22),
      0 0 10px rgba(140, 160, 180, 0.18),
      0 0 6px rgba(160, 180, 160, 0.15),
      0 0 3px rgba(180, 160, 200, 0.12),
      inset 0 -4px 8px rgba(0,0,0,0.1),
      inset 0 4px 8px rgba(255,255,255,0.42);
  }
  80% { 
    transform: scale(1.055) rotate(2deg); 
    filter: brightness(1.08) saturate(1.18);
    box-shadow: 
      0 28px 60px rgba(255, 107, 107, 0.7),
      0 0 30px rgba(200, 180, 140, 0.35),
      0 0 25px rgba(180, 160, 140, 0.32),
      0 0 20px rgba(255, 215, 0, 0.32),
      0 0 16px rgba(160, 140, 160, 0.25),
      0 0 12px rgba(140, 160, 180, 0.22),
      0 0 8px rgba(160, 180, 160, 0.18),
      0 0 4px rgba(180, 160, 200, 0.15),
      inset 0 -4px 8px rgba(0,0,0,0.1),
      inset 0 4px 8px rgba(255,255,255,0.45);
  }
  90% { 
    transform: scale(1.04) rotate(-1.2deg); 
    filter: brightness(1.05) saturate(1.1);
    box-shadow: 
      0 20px 45px rgba(255, 107, 107, 0.55),
      0 0 22px rgba(200, 180, 140, 0.25),
      0 0 18px rgba(180, 160, 140, 0.22),
      0 0 14px rgba(255, 215, 0, 0.22),
      inset 0 -4px 8px rgba(0,0,0,0.1),
      inset 0 4px 8px rgba(255,255,255,0.38);
  }
  95% { 
    transform: scale(1.018) rotate(0.5deg); 
    filter: brightness(1.02) saturate(1.04);
    box-shadow: 
      0 12px 28px rgba(255, 107, 107, 0.4),
      0 0 12px rgba(200, 180, 140, 0.15),
      inset 0 -4px 8px rgba(0,0,0,0.1),
      inset 0 4px 8px rgba(255,255,255,0.28);
  }
}

/* GENTLE PRIZE POOL BUILDUP - VERY SUBTLE */
@keyframes prizePoolBuildup {
  0% {
    transform: scale(1);
    text-shadow: none;
  }
  25% {
    transform: scale(1.005);
    text-shadow: 0 0 4px rgba(255, 215, 0, 0.2);
  }
  50% {
    transform: scale(1.01);
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.3),
      0 0 10px rgba(0, 229, 255, 0.2);
  }
  75% {
    transform: scale(1.008);
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.25);
  }
  100% {
    transform: scale(1);
    text-shadow: none;
  }
}

/* Info Button Styling */
.info-button {
  margin-top: 15px;
  padding: 8px 16px;
  background: linear-gradient(135deg, rgba(180, 160, 140, 0.8), rgba(160, 140, 140, 0.8));
  border: 2px solid rgba(140, 120, 100, 0.6);
  border-radius: 8px;
  color: #555;
  font-family: 'Comic Sans MS', cursive, sans-serif;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.info-button:hover {
  background: linear-gradient(135deg, rgba(200, 180, 160, 0.9), rgba(180, 160, 160, 0.9));
  border-color: rgba(160, 140, 120, 0.8);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* Info Modal Styling */
.info-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
}

.info-content {
  background: linear-gradient(135deg, rgba(250, 248, 245, 0.95), rgba(245, 240, 235, 0.95));
  margin: 5% auto;
  padding: 0;
  border: 3px solid rgba(180, 160, 140, 0.8);
  border-radius: 15px;
  width: 90%;
  max-width: 600px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  font-family: 'Comic Sans MS', cursive, sans-serif;
}

.info-header {
  background: linear-gradient(135deg, rgba(200, 180, 160, 0.9), rgba(180, 160, 140, 0.9));
  padding: 15px 20px;
  border-radius: 12px 12px 0 0;
  border-bottom: 2px solid rgba(160, 140, 120, 0.6);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.info-header h2 {
  margin: 0;
  color: #444;
  font-size: 22px;
  text-shadow: 1px 1px 2px rgba(255,255,255,0.8);
}

.close-button {
  color: #666;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.3s ease;
  user-select: none;
}

.close-button:hover {
  color: #8B6F47;
}

.info-body {
  padding: 20px;
  color: #555;
  line-height: 1.4;
}

.payout-section, .multiplier-section, .odds-section {
  margin-bottom: 20px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 10px;
  border: 1px solid rgba(180, 160, 140, 0.3);
}

.payout-section h3, .multiplier-section h3, .odds-section h3 {
  margin: 0 0 15px 0;
  color: #8B6F47;
  font-size: 16px;
  text-decoration: underline;
  text-decoration-color: rgba(180, 160, 140, 0.6);
}

.symbol-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.symbol-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  border: 1px solid rgba(180, 160, 140, 0.2);
}

.symbol-icon {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background-size: 60%;
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid rgba(180, 160, 140, 0.4);
}

.s-symbol { background-image: url('slot symbols/S_BASE.png'); }
.o-symbol { background-image: url('slot symbols/O_BASE.png'); }
.l-symbol { background-image: url('slot symbols/L_BASE.png'); }
.trump-symbol { background-image: url('slot symbols/trump.png'); }
.elon-symbol { background-image: url('slot symbols/elon.png'); }
.dog-symbol { background-image: url('slot symbols/dogwifhat.png'); }
.pepe-symbol { background-image: url('slot symbols/pepe.png'); }

.symbol-name {
  flex: 1;
  font-weight: bold;
  font-size: 14px;
}

.symbol-payout {
  font-weight: bold;
  font-size: 14px;
  color: #8B6F47;
  min-width: 60px;
  text-align: right;
}

.explanation p, .stats p {
  margin: 8px 0;
  font-size: 13px;
  padding: 5px 0;
  border-bottom: 1px dotted rgba(180, 160, 140, 0.3);
}

.explanation p:last-child, .stats p:last-child {
  border-bottom: none;
}

.explanation strong, .stats strong {
  color: #8B6F47;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .info-content {
    width: 95%;
    margin: 2% auto;
    max-height: 95vh;
  }
  
  .info-header h2 {
    font-size: 18px;
  }
  
  .symbol-info {
    flex-direction: column;
    text-align: center;
    gap: 6px;
  }
  
  .symbol-name, .symbol-payout {
    text-align: center;
  }
}

/* NEW SOFTER ANIMATIONS */
@keyframes softTextShimmer {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.1);
  }
}

@keyframes softCandyWin {
  0% {
    transform: scale(0.9) rotate(-5deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.05) rotate(3deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

@keyframes gentleCandyShake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-1px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(1px);
  }
}

@keyframes softMegaWinGlow {
  0%, 100% { 
    text-shadow: 
      0 0 5px rgba(180, 160, 140, 0.6),
      0 0 10px rgba(180, 160, 140, 0.5),
      0 0 15px rgba(180, 160, 140, 0.4);
    filter: brightness(1) hue-rotate(0deg);
  }
  33% { 
    text-shadow: 
      0 0 8px rgba(160, 140, 160, 0.7),
      0 0 15px rgba(160, 140, 160, 0.6),
      0 0 20px rgba(160, 140, 160, 0.5);
    filter: brightness(1.1) hue-rotate(60deg);
  }
  66% { 
    text-shadow: 
      0 0 8px rgba(140, 160, 180, 0.7),
      0 0 15px rgba(140, 160, 180, 0.6),
      0 0 20px rgba(140, 160, 180, 0.5);
    filter: brightness(1.1) hue-rotate(120deg);
  }
}

@keyframes softFloatingParticles {
  0% {
    transform: translateY(0) translateX(0) scale(1) rotate(0deg);
    opacity: 0.7;
  }
  25% {
    transform: translateY(-25px) translateX(10px) scale(1.1) rotate(45deg);
    opacity: 0.5;
  }
  50% {
    transform: translateY(-50px) translateX(-5px) scale(0.9) rotate(90deg);
    opacity: 0.3;
  }
  75% {
    transform: translateY(-75px) translateX(15px) scale(1.05) rotate(135deg);
    opacity: 0.2;
  }
  100% {
    transform: translateY(-100px) translateX(-10px) scale(0.7) rotate(180deg);
    opacity: 0;
  }
}

/* Enhanced Cascade Animations - CINEMATIC QUALITY */
@keyframes winDisappear {
  0% { 
    opacity: 1;
    transform: scale(1) rotate(0deg);
    filter: brightness(1.6) saturate(1.8) blur(0px) hue-rotate(0deg);
    box-shadow: 
      inset 0 0 25px rgba(255, 215, 0, 0.9),
      0 0 30px rgba(255, 215, 0, 0.8),
      0 0 50px rgba(255, 255, 255, 0.6);
  }
  20% { 
    opacity: 0.9;
    transform: scale(1.1) rotate(8deg);
    filter: brightness(1.8) saturate(2) blur(1px) hue-rotate(90deg);
    box-shadow: 
      inset 0 0 30px rgba(255, 69, 180, 0.8),
      0 0 40px rgba(255, 69, 180, 0.7),
      0 0 60px rgba(255, 255, 255, 0.5);
  }
  40% { 
    opacity: 0.7;
    transform: scale(1.25) rotate(18deg);
    filter: brightness(2.2) saturate(2.5) blur(2px) hue-rotate(180deg);
    box-shadow: 
      inset 0 0 35px rgba(87, 206, 235, 0.7),
      0 0 50px rgba(87, 206, 235, 0.6),
      0 0 70px rgba(255, 255, 255, 0.4);
  }
  60% { 
    opacity: 0.4;
    transform: scale(1.4) rotate(30deg);
    filter: brightness(2.8) saturate(3) blur(4px) hue-rotate(270deg);
    box-shadow: 
      inset 0 0 40px rgba(152, 251, 152, 0.6),
      0 0 60px rgba(152, 251, 152, 0.5),
      0 0 80px rgba(255, 255, 255, 0.3);
  }
  80% { 
    opacity: 0.2;
    transform: scale(0.8) rotate(45deg);
    filter: brightness(3.5) saturate(4) blur(6px) hue-rotate(360deg);
    box-shadow: 
      inset 0 0 20px rgba(218, 112, 214, 0.4),
      0 0 30px rgba(218, 112, 214, 0.3),
      0 0 50px rgba(255, 255, 255, 0.2);
  }
  100% { 
    opacity: 0;
    transform: scale(0.2) rotate(60deg);
    filter: brightness(0) saturate(0) blur(10px) hue-rotate(420deg);
    box-shadow: none;
  }
}

@keyframes fastDrop {
  0% { 
    transform: translateY(-300px) scale(0.6) rotate(-20deg);
    opacity: 0;
    filter: brightness(0.5) saturate(0.8) hue-rotate(0deg);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
  }
  15% { 
    transform: translateY(-180px) scale(0.8) rotate(-10deg);
    opacity: 0.4;
    filter: brightness(0.8) saturate(1.1) hue-rotate(60deg);
    box-shadow: 0 0 25px rgba(255, 69, 180, 0.4);
  }
  30% { 
    transform: translateY(-80px) scale(1.15) rotate(5deg);
    opacity: 0.7;
    filter: brightness(1.2) saturate(1.4) hue-rotate(120deg);
    box-shadow: 0 0 30px rgba(87, 206, 235, 0.5);
  }
  50% { 
    transform: translateY(-20px) scale(1.25) rotate(8deg);
    opacity: 0.9;
    filter: brightness(1.4) saturate(1.6) hue-rotate(180deg);
    box-shadow: 0 0 35px rgba(152, 251, 152, 0.6);
  }
  65% { 
    transform: translateY(15px) scale(0.95) rotate(-3deg);
    opacity: 1;
    filter: brightness(1.1) saturate(1.3) hue-rotate(240deg);
    box-shadow: 0 0 25px rgba(218, 112, 214, 0.4);
  }
  80% { 
    transform: translateY(-8px) scale(1.05) rotate(2deg);
    opacity: 1;
    filter: brightness(1.05) saturate(1.1) hue-rotate(300deg);
    box-shadow: 0 0 20px rgba(255, 140, 0, 0.3);
  }
  90% { 
    transform: translateY(3px) scale(0.98) rotate(-1deg);
    opacity: 1;
    filter: brightness(1.02) saturate(1.05) hue-rotate(330deg);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
  }
  100% { 
    transform: translateY(0) scale(1) rotate(0deg);
    opacity: 1;
    filter: brightness(1) saturate(1) hue-rotate(360deg);
    box-shadow: none;
  }
}

/* Enhanced Background Effects During Spin */
#btn-spin:checked ~ body::before {
  background: radial-gradient(circle at center, 
    rgba(180, 160, 140, 0.08) 0%,
    rgba(160, 140, 160, 0.08) 25%,
    rgba(140, 160, 180, 0.08) 50%,
    rgba(0, 0, 0, 0.5) 100%
  );
  transition: background 1s ease;
}

/* Sweet candy animations */
@keyframes animSpin{
  0%{
    transform: translateY(0%) scale(1);
    top: calc(-1 * var(--slot-dim) * 3);
  }
  15%{
    transform: translateY(200%) scale(0.95);
    top: calc(-1 * var(--slot-dim) * 3);
  }
  35%{
    transform: translateY(800%) scale(0.9);
    top: calc(-1 * var(--slot-dim) * 3);
  }
  55%{
    transform: translateY(1400%) scale(0.92);
    top: calc(-1 * var(--slot-dim) * 3);
  }
  75%{
    transform: translateY(1800%) scale(0.95);
    top: calc(-1 * var(--slot-dim) * 3);
  }
  85%{
    transform: translateY(1950%) scale(0.98);
    top: calc(-1 * var(--slot-dim) * 3);
  }
  95%{
    transform: translateY(2050%) scale(0.99);
    top: calc(-1 * var(--slot-dim) * 3);
  }
  100%{
    transform: translateY(0%) scale(1);
    top: calc(-1 * var(--slot-dim) * 3);
  }
}

@keyframes frameGlow {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.02);
  }
}

@keyframes rarePulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: inset 0 0 20px rgba(255, 107, 107, 0.4);
  }
  50% {
    transform: scale(1.05);
    box-shadow: inset 0 0 30px rgba(255, 107, 107, 0.6);
  }
}

@keyframes premiumSparkle {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    box-shadow: 
      inset 0 0 30px rgba(255, 215, 0, 0.5),
      0 0 20px rgba(255, 215, 0, 0.3);
  }
  50% {
    transform: scale(1.1) rotate(2deg);
    box-shadow: 
      inset 0 0 40px rgba(255, 215, 0, 0.8),
      0 0 30px rgba(255, 215, 0, 0.5);
  }
}

@keyframes rainbowShimmer {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* ───────────────────────────────────────────────────────────────── */
/*  CURTAIN INTRO SCREEN STYLES  */
/* ───────────────────────────────────────────────────────────────── */

.landing-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--bg-cute);
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  overflow: hidden;
  animation: cuteBackgroundShift 10s ease-in-out infinite;
}

/* Background content behind curtains */
.content {
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.casino-logo {
  text-align: center;
  padding: 40px;
}

.main-title {
  font-family: var(--font-pixel);
  font-size: 4rem;
  color: var(--accent-electric);
  text-shadow: 
    0 0 15px var(--accent-electric),
    0 0 30px var(--accent-neon),
    0 0 45px var(--accent-electric);
  margin-bottom: 20px;
  letter-spacing: 6px;
  animation: titleGlow 3s ease-in-out infinite;
}

.main-subtitle {
  font-family: 'Poppins', sans-serif;
  font-size: 1.5rem;
  color: #e0e0e0;
  font-weight: 300;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

/* Curtain containers */
.curtainContainer {
  position: absolute;
  display: flex;
  top: -10%;
  width: 100%;
  height: 110%;
  margin: auto;
  transform-style: preserve-3d;
  overflow: hidden;
  transition: transform 6s ease;
}

.curtainContainer:nth-child(1) {
  transform-origin: -120% top;
  justify-content: flex-start;
  transform: translatex(-5vw);
}

.curtainContainer:nth-child(2) {
  transform-origin: 120% top;
  justify-content: flex-end;
  transform: translatex(15vw);
}

/* Curtain opened state */
.curtainOpened .curtainContainer:nth-child(1) {
  transform: translatex(-150vw) scaleX(0);
}

.curtainOpened .curtainContainer:nth-child(2) {
  transform: translatex(150vw) scaleX(0);
}

/* Individual curtain panels - cute pastel style */
.unCurtain {
  display: inline-block;
  width: 15vw;
  margin: 0;
  padding: 0;
  height: 120vh;
  background-size: 100% 100%;
  background: repeating-linear-gradient(
    to left,
    var(--accent-pink) 2vw,
    var(--accent-purple) 6vw,
    var(--accent-blue) 10vw,
    var(--accent-yellow) 14vw,
    var(--accent-mint) 15vw
  );
  transform-origin: 0 0%;
  transform: rotate(3deg);
  transition: transform 4s ease;
  animation: cuteSwing 3s ease infinite;
  box-shadow: 
    0 0 20px rgba(255, 118, 117, 0.3),
    0 0 40px rgba(162, 155, 254, 0.2);
}

@keyframes cuteSwing {
  0%, 100% {
    transform: rotate(3deg) scale(1);
  }
  33% {
    transform: rotate(-2deg) scale(1.01);
  }
  66% {
    transform: rotate(1deg) scale(0.99);
  }
}

.unCurtain:nth-child(2) {
  margin-left: -10vw;
  animation-delay: -0.1s;
}

.unCurtain:nth-child(3) {
  margin-left: -10vw;
  animation-delay: -0.2s;
}

.unCurtain:nth-child(4) {
  margin-left: -10vw;
  animation-delay: -0.3s;
}

.unCurtain:nth-child(5) {
  margin-left: -10vw;
  animation-delay: -0.4s;
}

.unCurtain:nth-child(6) {
  margin-left: -10vw;
  animation-delay: -0.5s;
}

.unCurtain:nth-child(7) {
  margin-left: -10vw;
  animation-delay: -0.6s;
}

.unCurtain:nth-child(8) {
  margin-left: -10vw;
  animation-delay: -0.7s;
}

.unCurtain:nth-child(9) {
  margin-left: -10vw;
  animation-delay: -0.8s;
}

.unCurtain:nth-child(10) {
  margin-left: -10vw;
  animation-delay: -0.9s;
}

.unCurtain:nth-child(11) {
  margin-left: -10vw;
  animation-delay: -1s;
}

.unCurtain:nth-child(12) {
  width: 10vw;
  background: repeating-linear-gradient(
    to left,
    var(--accent-pink) 2vw,
    var(--accent-purple) 4vw,
    var(--accent-blue) 6vw,
    var(--accent-yellow) 8vw,
    var(--accent-mint) 10vw
  );
  margin-left: -10vw;
  animation-delay: -1.1s;
}

/* Curtain body container with cute sparkles */
.curtainBody {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.curtainBody::before {
  display: none;
}

/* Cute overlay with button */
.overlay {
  display: flex;
  position: absolute;
  color: white;
  top: 0%;
  left: 0%;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(to top, 
    rgba(255, 234, 167, 0.2) 0vh, 
    rgba(253, 121, 168, 0.3) 50vh,
    rgba(162, 155, 254, 0.4) 100vh);
  transition: opacity 3s ease;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  z-index: 3;
}

.casino-intro {
  text-align: center;
  max-width: 600px;
  padding: 0 20px;
  animation: fadeIn 2s ease-in-out;
}

.intro-title {
  font-size: 3rem;
  font-weight: bold;
  background: linear-gradient(135deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 20px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.3);
  animation: titleGlow 3s ease-in-out infinite;
  font-family: var(--font-pixel);
}

.intro-description {
  font-size: 1.2rem;
  line-height: 1.6;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.7);
  margin-bottom: 0;
}

.intro-description p {
  margin-bottom: 15px;
  background: rgba(0,0,0,0.4);
  padding: 15px;
  border-radius: 10px;
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255,255,255,0.2);
}

.intro-description p:last-child {
  margin-bottom: 0;
}

/* Cute Animated Button */
.neon-button {
  position: relative;
  display: inline-block;
  padding: 25px 30px;
  color: #ffffff;
  background: var(--button-gradient);
  border: 3px solid var(--accent-pink);
  border-radius: 25px;
  text-decoration: none;
  text-transform: uppercase;
  transition: 0.5s;
  letter-spacing: 4px;
  overflow: hidden;
  font-family: var(--font-pixel);
  font-size: 1.4rem;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 
    0 0 25px rgba(255, 118, 117, 0.5),
    0 0 40px rgba(162, 155, 254, 0.3),
    inset 0 0 15px rgba(255, 255, 255, 0.2);
  animation: cuteButtonBounce 2s ease-in-out infinite;
}

@keyframes cuteButtonBounce {
  0%, 100% { 
    transform: scale(1) rotate(0deg);
    box-shadow: 
      0 0 25px rgba(255, 118, 117, 0.5),
      0 0 40px rgba(162, 155, 254, 0.3),
      inset 0 0 15px rgba(255, 255, 255, 0.2);
  }
  50% { 
    transform: scale(1.05) rotate(1deg);
    box-shadow: 
      0 0 35px rgba(255, 118, 117, 0.7),
      0 0 50px rgba(162, 155, 254, 0.5),
      inset 0 0 20px rgba(255, 255, 255, 0.3);
  }
}

.neon-button:hover {
  background: linear-gradient(135deg, var(--accent-mint) 0%, var(--accent-blue) 100%);
  color: #ffffff;
  transform: scale(1.1);
  box-shadow: 
    0 0 40px rgba(255, 118, 117, 0.8),
    0 0 60px rgba(162, 155, 254, 0.6),
    0 0 80px rgba(116, 185, 255, 0.4);
}

.neon-button span {
  position: absolute;
  display: block;
}

.neon-button span:nth-child(1) {
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent-pink));
  animation: neonAnimate1 1.5s linear infinite;
  border-radius: 2px;
}

@keyframes neonAnimate1 {
  0% {
    left: -100%;
  }
  50%, 100% {
    left: 100%;
  }
}

.neon-button span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, transparent, var(--accent-purple));
  animation: neonAnimate2 1.5s linear infinite;
  animation-delay: 0.375s;
  border-radius: 2px;
}

@keyframes neonAnimate2 {
  0% {
    top: -100%;
  }
  50%, 100% {
    top: 100%;
  }
}

.neon-button span:nth-child(3) {
  bottom: 0;
  right: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(270deg, transparent, var(--accent-blue));
  animation: neonAnimate3 1.5s linear infinite;
  animation-delay: 0.75s;
  border-radius: 2px;
}

@keyframes neonAnimate3 {
  0% {
    right: -100%;
  }
  50%, 100% {
    right: 100%;
  }
}

.neon-button span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(360deg, transparent, var(--accent-mint));
  animation: neonAnimate4 1.5s linear infinite;
  animation-delay: 1.125s;
  border-radius: 2px;
}

@keyframes neonAnimate4 {
  0% {
    bottom: -100%;
  }
  50%, 100% {
    bottom: 100%;
  }
}

/* Landing Screen Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes landingBounce {
  0% { transform: scale(0.9) translateY(50px); opacity: 0; }
  60% { transform: scale(1.05) translateY(-10px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes titleGlow {
  0%, 100% { 
    text-shadow: 
      3px 3px 6px rgba(0,0,0,0.3),
      0 0 20px rgba(255, 215, 0, 0.4);
  }
  50% { 
    text-shadow: 
      3px 3px 6px rgba(0,0,0,0.3),
      0 0 30px rgba(255, 215, 0, 0.6),
      0 0 40px rgba(255, 215, 0, 0.4);
  }
}

/* Casino Content Fade In */
.casino-content {
  animation: casinoFadeIn 1s ease-out;
}

@keyframes casinoFadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/* Mobile Responsiveness for Landing */
@media (max-width: 768px) {
  .casino-welcome {
    margin: 20px;
    padding: 40px 30px;
    max-width: 90%;
  }
  
  .casino-title {
    font-size: 36px;
  }
  
  .casino-features {
    grid-template-columns: 1fr;
  }
  
  .intro-title {
    font-size: 2rem;
  }
  
  .intro-description {
    font-size: 1rem;
  }
  
  .casino-intro {
    max-width: 90%;
  }
}

/* COMFORTABLE BUTTON EXCITEMENT - 10 SECOND VERSION - LOW BRIGHTNESS */
@keyframes megaButtonExcitement {
  0%, 100% { 
    transform: scale(1) rotate(0deg); 
    filter: brightness(1) saturate(1);
    box-shadow: 
      0 8px 20px rgba(255, 107, 107, 0.25),
      0 4px 10px rgba(0,0,0,0.12),
      inset 0 -4px 8px rgba(0,0,0,0.08),
      inset 0 4px 8px rgba(255,255,255,0.15);
  }
  5% { 
    transform: scale(1.003) rotate(0.1deg); 
    filter: brightness(1.002) saturate(1.005);
    box-shadow: 
      0 9px 22px rgba(255, 107, 107, 0.28),
      0 0 6px rgba(255, 215, 0, 0.05),
      inset 0 -4px 8px rgba(0,0,0,0.08),
      inset 0 4px 8px rgba(255,255,255,0.18);
  }
  10% { 
    transform: scale(1.008) rotate(-0.2deg); 
    filter: brightness(1.005) saturate(1.01);
    box-shadow: 
      0 10px 25px rgba(255, 107, 107, 0.3),
      0 0 8px rgba(255, 215, 0, 0.08),
      inset 0 -4px 8px rgba(0,0,0,0.08),
      inset 0 4px 8px rgba(255,255,255,0.2);
  }
  20% { 
    transform: scale(1.015) rotate(0.3deg); 
    filter: brightness(1.01) saturate(1.02);
    box-shadow: 
      0 12px 28px rgba(255, 107, 107, 0.35),
      0 0 12px rgba(200, 180, 140, 0.12),
      0 0 8px rgba(180, 160, 140, 0.08),
      inset 0 -4px 8px rgba(0,0,0,0.08),
      inset 0 4px 8px rgba(255,255,255,0.22);
  }
  30% { 
    transform: scale(1.022) rotate(-0.5deg); 
    filter: brightness(1.015) saturate(1.03);
    box-shadow: 
      0 15px 35px rgba(255, 107, 107, 0.4),
      0 0 15px rgba(200, 180, 140, 0.15),
      0 0 12px rgba(180, 160, 140, 0.12),
      0 0 6px rgba(255, 215, 0, 0.12),
      inset 0 -4px 8px rgba(0,0,0,0.08),
      inset 0 4px 8px rgba(255,255,255,0.25);
  }
  40% { 
    transform: scale(1.028) rotate(0.8deg); 
    filter: brightness(1.02) saturate(1.04);
    box-shadow: 
      0 18px 40px rgba(255, 107, 107, 0.45),
      0 0 18px rgba(200, 180, 140, 0.18),
      0 0 15px rgba(180, 160, 140, 0.15),
      0 0 10px rgba(255, 215, 0, 0.15),
      0 0 5px rgba(160, 140, 160, 0.1),
      inset 0 -4px 8px rgba(0,0,0,0.08),
      inset 0 4px 8px rgba(255,255,255,0.28);
  }
  50% { 
    transform: scale(1.035) rotate(-1deg); 
    filter: brightness(1.025) saturate(1.05);
    box-shadow: 
      0 20px 45px rgba(255, 107, 107, 0.5),
      0 0 22px rgba(200, 180, 140, 0.2),
      0 0 18px rgba(180, 160, 140, 0.18),
      0 0 14px rgba(255, 215, 0, 0.18),
      0 0 10px rgba(160, 140, 160, 0.12),
      0 0 6px rgba(140, 160, 180, 0.1),
      inset 0 -4px 8px rgba(0,0,0,0.08),
      inset 0 4px 8px rgba(255,255,255,0.3);
  }
  60% { 
    transform: scale(1.04) rotate(1.2deg); 
    filter: brightness(1.03) saturate(1.06);
    box-shadow: 
      0 22px 50px rgba(255, 107, 107, 0.55),
      0 0 25px rgba(200, 180, 140, 0.22),
      0 0 20px rgba(180, 160, 140, 0.2),
      0 0 16px rgba(255, 215, 0, 0.2),
      0 0 12px rgba(160, 140, 160, 0.15),
      0 0 8px rgba(140, 160, 180, 0.12),
      0 0 4px rgba(160, 180, 160, 0.1),
      inset 0 -4px 8px rgba(0,0,0,0.08),
      inset 0 4px 8px rgba(255,255,255,0.32);
  }
  70% { 
    transform: scale(1.045) rotate(-1.5deg); 
    filter: brightness(1.035) saturate(1.08);
    box-shadow: 
      0 25px 55px rgba(255, 107, 107, 0.6),
      0 0 28px rgba(200, 180, 140, 0.25),
      0 0 22px rgba(180, 160, 140, 0.22),
      0 0 18px rgba(255, 215, 0, 0.22),
      0 0 14px rgba(160, 140, 160, 0.18),
      0 0 10px rgba(140, 160, 180, 0.15),
      0 0 6px rgba(160, 180, 160, 0.12),
      0 0 3px rgba(180, 160, 200, 0.1),
      inset 0 -4px 8px rgba(0,0,0,0.08),
      inset 0 4px 8px rgba(255,255,255,0.35);
  }
  80% { 
    transform: scale(1.05) rotate(1.8deg); 
    filter: brightness(1.04) saturate(1.1);
    box-shadow: 
      0 28px 60px rgba(255, 107, 107, 0.65),
      0 0 30px rgba(200, 180, 140, 0.28),
      0 0 25px rgba(180, 160, 140, 0.25),
      0 0 20px rgba(255, 215, 0, 0.25),
      0 0 16px rgba(160, 140, 160, 0.2),
      0 0 12px rgba(140, 160, 180, 0.18),
      0 0 8px rgba(160, 180, 160, 0.15),
      0 0 4px rgba(180, 160, 200, 0.12),
      inset 0 -4px 8px rgba(0,0,0,0.08),
      inset 0 4px 8px rgba(255,255,255,0.38);
  }
  90% { 
    transform: scale(1.035) rotate(-1deg); 
    filter: brightness(1.025) saturate(1.05);
    box-shadow: 
      0 20px 45px rgba(255, 107, 107, 0.5),
      0 0 22px rgba(200, 180, 140, 0.2),
      0 0 18px rgba(180, 160, 140, 0.18),
      0 0 14px rgba(255, 215, 0, 0.18),
      inset 0 -4px 8px rgba(0,0,0,0.08),
      inset 0 4px 8px rgba(255,255,255,0.3);
  }
  95% { 
    transform: scale(1.015) rotate(0.3deg); 
    filter: brightness(1.01) saturate(1.02);
    box-shadow: 
      0 12px 28px rgba(255, 107, 107, 0.35),
      0 0 12px rgba(200, 180, 140, 0.12),
      inset 0 -4px 8px rgba(0,0,0,0.08),
      inset 0 4px 8px rgba(255,255,255,0.22);
  }
}

/* Performance Optimizations */
.figure, .particle, .btn {
  transform3d: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  perspective: 1000px;
}

/* Reduce animation complexity on mobile */
@media (max-width: 768px) {
  .figure {
    will-change: transform;
  }
  
  /* Disable complex particle effects on mobile */
  #particles-container {
    display: none;
  }
  
  /* Simplify buildup on mobile */
  @keyframes megaDramaticSpin {
    0%, 100% {
      transform: scale(1);
      filter: brightness(1);
    }
    50% {
      transform: scale(1.02);
      filter: brightness(1.02);
    }
  }
}

/* Reduced intensity shake animation */
@keyframes intenseBuildupShake {
  /* Removed - replaced by slotBuildupGlow */
}

@keyframes finalBuildupExplosion {
  /* Removed - replaced by slotBuildupGlow */
}

/* Gentle build effects */
@keyframes dramaticBuild {
  0% {
    filter: brightness(1) contrast(1) saturate(1);
  }
  25% {
    filter: brightness(1.01) contrast(1.005) saturate(1.02);
  }
  50% {
    filter: brightness(1.02) contrast(1.01) saturate(1.03);
  }
  75% {
    filter: brightness(1.015) contrast(1.008) saturate(1.025);
  }
  100% {
    filter: brightness(1) contrast(1) saturate(1);
  }
}

/*───────────────────────────────────────────────────────────────────────────
  Particles Container
───────────────────────────────────────────────────────────────────────────*/
#particles-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

.particle {
  position: fixed;
  pointer-events: none;
  will-change: transform, opacity;
  border-radius: 3px;
  background: var(--accent-electric);
  box-shadow: 0 0 6px rgba(0, 229, 255, 0.8),
    0 0 12px rgba(255, 62, 191, 0.6);
}

.particle.circular {
  border-radius: 50%;
}

/*───────────────────────────────────────────────────────────────────────────
  Casino Content (After Landing)
───────────────────────────────────────────────────────────────────────────*/
.casino-content {
  animation: casinoFadeIn 0.6s ease-out forwards;
}

.perspective {
  width: 100%;
  max-width: 800px;  /* Increased to accommodate side panel */
  margin-top: 48px;
  transform: scale(0.85);
  animation: gentleFloat 4s ease-in-out infinite;
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
}

/* Toggle (Checkbox) Hidden */
.toggle {
  position: absolute;
  left: -9999px;
}

/* Spin Button */
.btn {
  position: relative;       /* normal flow inside .game-info */
  top: 0; left: 0;          /* override any old top/left */
  transform: none;          /* reset any translateX or rotate */
  margin: 10px auto 0;      /* small gap above, centered horizontally */
  display: block;
  width: 120px;              /* adjust as you like */
  height: 48px;              /* adjust as you like */
  background: linear-gradient(135deg, #ff3ebf, #00e5ff);
  border: 3px solid #ff3ebf;
  border-radius: 24px;
  font-family: "Press Start 2P", cursive;
  font-size: 1rem;
  color: white;
  text-align: center;
  line-height: 44px;         /* vertically centering the "SPIN" text */
  cursor: pointer;
  box-shadow:
    0 6px 16px rgba(255, 62, 191, 0.4),
    inset 0 -3px 6px rgba(0, 0, 0, 0.2),
    inset 0 3px 6px rgba(255, 255, 255, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  z-index: 1;               /* ensure it's above game-info background */
}

.btn:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow:
    0 8px 20px rgba(255, 62, 191, 0.6),
    inset 0 -3px 6px rgba(0, 0, 0, 0.25),
    inset 0 3px 6px rgba(255, 255, 255, 0.25);
}

.btn:active {
  transform: translateY(0px) scale(1.01);
}

/* ANOTHER OLD WRAPPER/SLOT/GROUP SECTION REMOVED - CONFLICTED WITH NEW STRUCTURE */

/* Individual cell ("symbol") */
.figure {
  height: var(--slot-dim);
  width: 100%;
  position: relative;
  background-size: 60%;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 12px;
  margin: 3px 2px;
  border: 2px solid var(--subtle-gray);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3),
    0 0 6px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out,
    filter 0.2s ease-out;
  overflow: hidden;
}

.figure:hover {
  transform: scale(1.08);
  filter: brightness(1.15);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.4),
    0 0 10px var(--accent-electric);
}

/* Base symbols */
.figure-1 {
  background-image: url('slot symbols/S_BASE.png');
  background-color: rgba(255, 215, 0, 0.2);
}
.figure-2 {
  background-image: url('slot symbols/O_BASE.png');
  background-color: rgba(255, 105, 180, 0.2);
}
.figure-3 {
  background-image: url('slot symbols/L_BASE.png');
  background-color: rgba(135, 206, 235, 0.2);
}

/* Rare symbols */
.figure-4 {
  background-image: url('slot symbols/trump.png');
  background-color: rgba(255, 62, 191, 0.25);
  box-shadow: inset 0 0 15px rgba(255, 62, 191, 0.6),
    0 0 10px rgba(0, 229, 255, 0.3);
}
.figure-5 {
  background-image: url('slot symbols/elon.png');
  background-color: rgba(0, 229, 255, 0.25);
  box-shadow: inset 0 0 15px rgba(0, 229, 255, 0.6),
    0 0 10px rgba(255, 62, 191, 0.3);
}

/* Premium symbols */
.figure-6 {
  background-image: url('slot symbols/dogwifhat.png');
  background-color: rgba(255, 215, 0, 0.3);
  box-shadow: inset 0 0 18px rgba(255, 215, 0, 0.6),
    0 0 12px rgba(0, 229, 255, 0.3);
}
.figure-7 {
  background-image: url('slot symbols/popcat.png');
  background-color: rgba(255, 62, 191, 0.3);
  box-shadow: inset 0 0 18px rgba(255, 62, 191, 0.6),
    0 0 12px rgba(255, 215, 0, 0.3);
}

/* Top premium (Pepe) */
.figure-8 {
  background-image: url('slot symbols/pepe.png');
  background-size: 60%;
  background-repeat: no-repeat;
  background-position: center;
  background-color: rgba(76, 124, 89, 0.3);
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.6),
    0 0 14px rgba(255, 215, 0, 0.4);
  position: relative;
}

/* Rainbow shimmer overlay for Pepe */
.figure-8::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    45deg,
    rgba(255, 62, 191, 0.2),
    rgba(0, 229, 255, 0.2),
    rgba(76, 124, 89, 0.2),
    rgba(255, 215, 0, 0.2)
  );
  background-size: 400% 400%;
  animation: rainbowShimmer 2s linear infinite;
  border-radius: 8px;
  pointer-events: none;
}

.figure-8::after {
  content: "PEPE";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 0.8rem;
  color: #fff;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.6), 0 0 12px rgba(76, 124, 89, 0.6);
  z-index: 2;
}

/* OLD WRAPPER CHECKED CSS REMOVED - CONFLICTED WITH NEW STRUCTURE */

/* Spin button dramatic effect */
#btn-spin:checked ~ .btn {
  pointer-events: none;
}

#btn-spin:checked ~ body::before {
  background: radial-gradient(
    circle at center,
    rgba(15, 15, 16, 0.3) 0%,
    rgba(15, 15, 16, 0.7) 70%,
    rgba(0, 0, 0, 0.8) 100%
  );
  transition: background 0.5s ease-out;
}

/*───────────────────────────────────────────────────────────────────────────
  Game Info Section (Prize Pool + Result + Info Button)
───────────────────────────────────────────────────────────────────────────*/
.game-info {
  margin-top: 32px;
  text-align: center;
  background: rgba(28, 28, 30, 0.85);
  padding: 16px;          /* ensure there is breathing room for both result + button */
  border-radius: 12px;
  border: 2px solid var(--accent-electric);
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.2);
  display: inline-block;
  min-width: 280px;
  box-sizing: border-box;
}

.pool-display {
  font-size: 1.1rem;
  font-weight: 500;
  background: linear-gradient(
    45deg,
    rgba(0, 229, 255, 0.8),
    rgba(255, 62, 191, 0.8),
    rgba(0, 229, 255, 0.8)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
}

.result-display {
  font-size: 1rem;
  font-weight: 500;
  min-height: 28px;
  color: var(--light-gray);
  transition: color 0.3s ease-out;
  margin-bottom: 12px;
}

.result-display.win {
  color: var(--accent-electric);
  font-size: 1.15rem;
  animation: resultGlow 0.8s ease-out forwards;
}

.result-display.no-win {
  color: #888;
  animation: shake 0.5s ease-out;
}

/* Info Button */
.info-button {
  margin-top: 8px;
  padding: 6px 14px;
  background: linear-gradient(
    135deg,
    rgba(0, 229, 255, 0.8),
    rgba(76, 124, 89, 0.8)
  );
  border: none;
  border-radius: 8px;
  color: var(--bg-dark);
  font-family: var(--font-family);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 229, 255, 0.2);
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.info-button:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 16px rgba(0, 229, 255, 0.4);
}

.info-button:active {
  transform: translateY(0) scale(1.01);
}

/*───────────────────────────────────────────────────────────────────────────
  Info Modal
───────────────────────────────────────────────────────────────────────────*/
.info-modal {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  z-index: 1000;
}

.info-content {
  background: #2c2c2e;
  margin: 5% auto;
  padding: 0;
  border: 2px solid var(--accent-electric);
  border-radius: 12px;
  width: 90%;
  max-width: 600px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0, 229, 255, 0.3);
}

.info-header {
  background: #1c1c1e;
  padding: 12px 20px;
  border-radius: 12px 12px 0 0;
  border-bottom: 1px solid var(--accent-electric);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.info-header h2 {
  margin: 0;
  color: var(--accent-electric);
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.close-button {
  color: #aaa;
  font-size: 1.4rem;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.2s ease-out;
  user-select: none;
}

.close-button:hover {
  color: var(--accent-electric);
}

.info-body {
  padding: 16px 20px;
  color: var(--light-gray);
}

.payout-section,
.multiplier-section,
.odds-section {
  margin-bottom: 16px;
  padding: 12px;
  background: rgba(28, 28, 30, 0.5);
  border-radius: 8px;
  border: 1px solid var(--accent-electric);
}

.payout-section h3,
.multiplier-section h3,
.odds-section h3 {
  margin: 0 0 12px 0;
  color: var(--accent-electric);
  font-size: 1rem;
  text-decoration: underline;
  text-decoration-color: rgba(0, 229, 255, 0.5);
}

.symbol-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.symbol-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px;
  background: rgba(40, 40, 42, 0.6);
  border-radius: 8px;
  border: 1px solid var(--accent-electric);
}

.symbol-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background-size: 60%;
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid var(--accent-electric);
}

.s-symbol { background-image: url('slot symbols/S_BASE.png'); }
.o-symbol { background-image: url('slot symbols/O_BASE.png'); }
.l-symbol { background-image: url('slot symbols/L_BASE.png'); }
.trump-symbol { background-image: url('slot symbols/trump.png'); }
.elon-symbol { background-image: url('slot symbols/elon.png'); }
.dog-symbol { background-image: url('slot symbols/dogwifhat.png'); }
.pepe-symbol { background-image: url('slot symbols/pepe.png'); }

.symbol-name {
  flex: 1;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--light-gray);
}

.symbol-payout {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--accent-electric);
  min-width: 60px;
  text-align: right;
}

.explanation p,
.stats p {
  margin: 6px 0;
  font-size: 0.85rem;
  color: var(--light-gray);
  border-bottom: 1px dotted rgba(0, 229, 255, 0.3);
  padding-bottom: 4px;
}

.explanation p:last-child,
.stats p:last-child {
  border-bottom: none;
}

.explanation strong,
.stats strong {
  color: var(--accent-electric);
}

/*───────────────────────────────────────────────────────────────────────────
  Keyframe Animations
───────────────────────────────────────────────────────────────────────────*/
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes landingBounce {
  0% {
    transform: scale(0.95) translateY(40px);
    opacity: 0;
  }
  60% {
    transform: scale(1.02) translateY(-8px);
    opacity: 1;
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

@keyframes gentleFloat {
  0%,
  100% {
    transform: translateY(0px) scale(0.85);
  }
  50% {
    transform: translateY(-12px) scale(0.86);
  }
}

@keyframes animSpin {
  0% {
    transform: translateY(0%) scale(1);
    top: calc(-1 * var(--slot-dim) * 3); /* start exactly aligned */
  }
  20% {
    transform: translateY(200%) scale(0.94);
    top: calc(-1 * var(--slot-dim) * 3);
  }
  40% {
    transform: translateY(800%) scale(0.9);
    top: calc(-1 * var(--slot-dim) * 3);
  }
  60% {
    transform: translateY(1400%) scale(0.93);
    top: calc(-1 * var(--slot-dim) * 3);
  }
  80% {
    transform: translateY(1800%) scale(0.95);
    top: calc(-1 * var(--slot-dim) * 3);
  }
  100% {
    transform: translateY(0%) scale(1);
    top: calc(-1 * var(--slot-dim) * 3); /* end aligned */
  }
}

@keyframes rainbowShimmer {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes prizePulse {
  0% {
    transform: scale(1);
    text-shadow: none;
  }
  25% {
    transform: scale(1.005);
    text-shadow: 0 0 4px rgba(255, 215, 0, 0.2);
  }
  50% {
    transform: scale(1.01);
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.3),
      0 0 10px rgba(0, 229, 255, 0.2);
  }
  75% {
    transform: scale(1.008);
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.25);
  }
  100% {
    transform: scale(1);
    text-shadow: none;
  }
}

@keyframes resultGlow {
  0% {
    color: var(--accent-electric);
    text-shadow: 0 0 4px var(--accent-electric);
  }
  50% {
    text-shadow: 0 0 10px var(--accent-electric),
      0 0 20px var(--accent-electric);
  }
  100% {
    text-shadow: none;
  }
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20%,
  60% {
    transform: translateX(-4px);
  }
  40%,
  80% {
    transform: translateX(4px);
  }
}

@keyframes intenseBuild {
  0% {
    filter: brightness(1) contrast(1) saturate(1);
  }
  50% {
    filter: brightness(1.02) contrast(1.01) saturate(1.02);
  }
  100% {
    filter: brightness(1) contrast(1) saturate(1);
  }
}

@keyframes megaDramaticSpin {
  0% {
    transform: scale(1) rotate(0deg);
    filter: brightness(1);
    box-shadow: 0 0 0 2px rgba(255, 62, 191, 0.1),
      0 0 0 4px rgba(0, 229, 255, 0.05),
      0 10px 20px rgba(0, 0, 0, 0.05),
      inset 0 0 10px rgba(255, 215, 0, 0.02);
  }
  25% {
    transform: scale(1.01) rotate(0.5deg);
    filter: brightness(1.02);
    box-shadow: 0 0 0 4px rgba(255, 62, 191, 0.15),
      0 0 0 8px rgba(0, 229, 255, 0.1),
      0 15px 30px rgba(0, 0, 0, 0.08),
      inset 0 0 15px rgba(255, 215, 0, 0.05);
  }
  50% {
    transform: scale(1.015) rotate(-1deg);
    filter: brightness(1.05);
    box-shadow: 0 0 0 8px rgba(255, 62, 191, 0.2),
      0 0 0 16px rgba(0, 229, 255, 0.15),
      0 20px 40px rgba(0, 0, 0, 0.1),
      inset 0 0 20px rgba(255, 215, 0, 0.08);
  }
  75% {
    transform: scale(1.01) rotate(0.7deg);
    filter: brightness(1.03);
    box-shadow: 0 0 0 6px rgba(255, 62, 191, 0.18),
      0 0 0 12px rgba(0, 229, 255, 0.12),
      0 15px 30px rgba(0, 0, 0, 0.08),
      inset 0 0 15px rgba(255, 215, 0, 0.06);
  }
  100% {
    transform: scale(1) rotate(0deg);
    filter: brightness(1);
    box-shadow: 0 0 0 2px rgba(255, 62, 191, 0.1),
      0 0 0 4px rgba(0, 229, 255, 0.05),
      0 10px 20px rgba(0, 0, 0, 0.05),
      inset 0 0 10px rgba(255, 215, 0, 0.02);
  }
}

@keyframes megaButtonExcite {
  0% {
    transform: scale(1) rotate(0deg);
    filter: brightness(1);
    box-shadow: 0 8px 20px rgba(255, 62, 191, 0.3),
      inset 0 -4px 8px rgba(0, 0, 0, 0.15),
      inset 0 4px 8px rgba(255, 255, 255, 0.1);
  }
  50% {
    transform: scale(1.025) rotate(1deg);
    filter: brightness(1.05);
    box-shadow: 0 12px 28px rgba(255, 62, 191, 0.5),
      inset 0 -4px 8px rgba(0, 0, 0, 0.2),
      inset 0 4px 8px rgba(255, 255, 255, 0.15);
  }
  100% {
    transform: scale(1) rotate(0deg);
    filter: brightness(1);
    box-shadow: 0 8px 20px rgba(255, 62, 191, 0.3),
      inset 0 -4px 8px rgba(0, 0, 0, 0.15),
      inset 0 4px 8px rgba(255, 255, 255, 0.1);
  }
}

/*───────────────────────────────────────────────────────────────────────────
  Mobile Responsiveness
───────────────────────────────────────────────────────────────────────────*/
@media (max-width: 768px) {
  .casino-welcome {
    padding: 24px 16px;
    max-width: 90%;
  }

  .casino-title {
    font-size: 2rem;
  }

  .btn {
    top: -60px;
    width: 140px;
    height: 48px;
    font-size: 1rem;
  }

  .perspective {
    flex-direction: column;
    max-width: 90%;
    gap: 16px;
    transform: scale(0.9);
  }

  /* OLD WRAPPER MOBILE CSS REMOVED */

  .game-info {
    width: 90%;
    margin-top: 16px;
  }

  .side-payout-info {
    width: 100%;
    max-width: 360px;
  }

  #particles-container {
    display: none;
  }
}

/* Hide the info button and modal */
.info-button {
  display: none;
}

.info-modal {
  display: none;
}

/* Create permanent payout info display */
.permanent-info {
  position: fixed !important;
  left: calc(100vw - 260px) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 250px;
  background: rgba(28, 28, 30, 0.85);
  border: 2px solid var(--accent-electric);
  border-radius: 12px;
  padding: 12px;
  color: var(--light-gray);
  font-size: 0.75rem;
  backdrop-filter: blur(4px);
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.2);
  z-index: 100;
  max-height: 300px;
  overflow-y: auto;
}

.permanent-info h3 {
  color: var(--accent-electric);
  font-size: 0.9rem;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.permanent-info .symbol-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.permanent-info .symbol-info {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px;
  background: rgba(40, 40, 42, 0.6);
  border-radius: 4px;
  border: 1px solid rgba(0, 229, 255, 0.3);
}

.permanent-info .symbol-icon {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  background-size: 60%;
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid var(--accent-electric);
}

.permanent-info .symbol-name {
  flex: 1;
  font-weight: 500;
  font-size: 0.7rem;
}

.permanent-info .symbol-payout {
  font-weight: 700;
  color: var(--accent-electric);
  font-size: 0.7rem;
  min-width: 40px;
  text-align: right;
}

.permanent-info .rules-section {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(0, 229, 255, 0.3);
}

.permanent-info .rules-section p {
  margin: 2px 0;
  font-size: 0.65rem;
  line-height: 1.2;
}

.permanent-info .rules-section strong {
  color: var(--accent-electric);
}

/* Mobile responsiveness for permanent info */
@media (max-width: 768px) {
  .permanent-info {
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: 20px;
    top: auto;
    transform: none;
    width: auto;
    max-height: 150px;
    overflow-y: auto;
  }
}

/* Hide the old permanent info panel */
.permanent-info {
  display: none !important;
}

/* New side payout info panel */
.side-payout-info {
  position: relative;
  flex-shrink: 0;
  width: 200px;
  margin-left: 20px;          /* extra margin so it isn't glued right up against the reels */
  background: rgba(28, 28, 30, 0.9);
  border: 2px solid var(--accent-electric);
  border-radius: 12px;
  padding: 12px;
  color: var(--light-gray);
  font-size: 0.75rem;
  backdrop-filter: blur(4px);
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.2);
  z-index: 100;
}

.side-payout-info h3 {
  color: var(--accent-electric);
  font-size: 0.9rem;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
}

.side-symbol-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.side-symbol-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px;
  background: rgba(40, 40, 42, 0.6);
  border-radius: 4px;
  border: 1px solid rgba(0, 229, 255, 0.3);
}

.side-symbol-icon {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  background-size: 60%;
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid var(--accent-electric);
}

.side-symbol-name {
  flex: 1;
  font-weight: 500;
  font-size: 0.7rem;
}

.side-symbol-payout {
  font-weight: 700;
  color: var(--accent-electric);
  font-size: 0.7rem;
  min-width: 35px;
  text-align: right;
}

.side-rules {
  border-top: 1px solid rgba(0, 229, 255, 0.3);
  padding-top: 8px;
}

.side-rules p {
  margin: 2px 0;
  font-size: 0.65rem;
  line-height: 1.2;
}

.side-rules strong {
  color: var(--accent-electric);
}

/* Slot container for grouping slot machine and game info */
.slot-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ARCADE-STYLE SLOT MACHINE OVERHAUL (CLEAN VERSION - NO BLUR)
   ═══════════════════════════════════════════════════════════════════════════ */

/*───────────────────────────────────────────────────────────────────────────
  GLOBAL VARIABLES (updated)
───────────────────────────────────────────────────────────────────────────*/
:root {
  --font-family-sans: "Poppins", sans-serif;
  --font-pixel: "Press Start 2P", cursive;
  --bg-dark: #0f0f10;
  --border-cyan: #00e5ff;
  --highlight-neon: #ff3ebf;
  --slot-width: 480px;
  --slot-dim: calc(var(--slot-width) / 5);
}

/* Import pixel font for game header */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/*───────────────────────────────────────────────────────────────────────────
  RESET + BODY (override existing)
───────────────────────────────────────────────────────────────────────────*/
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg-dark);
  font-family: var(--font-family-sans);
  color: #e3e3e5;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

/*───────────────────────────────────────────────────────────────────────────
  "ARCADE MONITOR" FRAME
───────────────────────────────────────────────────────────────────────────*/
.arcade-monitor {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(145deg, 
    rgba(255, 255, 255, 0.95) 0%, 
    rgba(255, 234, 167, 0.9) 25%,
    rgba(253, 121, 168, 0.9) 50%,
    rgba(162, 155, 254, 0.9) 75%,
    rgba(116, 185, 255, 0.9) 100%);
  border: 4px solid var(--accent-pink);
  border-radius: 25px;
  box-shadow: 
    0 0 30px rgba(255, 118, 117, 0.5),
    0 0 50px rgba(162, 155, 254, 0.4),
    inset 0 0 20px rgba(255, 255, 255, 0.4);
  overflow: hidden;
  position: relative;
  transform: scale(0.5);
  transform-origin: center center;
}

.arcade-monitor::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, 
    rgba(255, 255, 255, 0.1) 0%, 
    transparent 70%);
  animation: cuteGlow 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes cuteGlow {
  0%, 100% { 
    transform: rotate(0deg) scale(1);
    opacity: 0.5;
  }
  50% { 
    transform: rotate(180deg) scale(1.1);
    opacity: 0.8;
  }
}

/* Top cute header */
.monitor-header {
  width: var(--slot-width);
  background: linear-gradient(135deg, var(--accent-pink) 0%, var(--accent-purple) 100%);
  padding: 8px 0;
  border-bottom: 3px solid var(--accent-mint);
  text-align: center;
  border-radius: 20px 20px 0 0;
  position: relative;
  z-index: 2;
}

.monitor-header h1 {
  font-family: var(--font-pixel);
  font-size: 1rem;
  color: #ffffff;
  text-shadow:
    0 0 4px rgba(255, 255, 255, 0.8),
    0 0 8px var(--accent-yellow);
  animation: cuteHeaderBounce 3s ease-in-out infinite;
}

@keyframes cuteHeaderBounce {
  0%, 100% { 
    transform: scale(1) rotate(0deg);
  }
  50% { 
    transform: scale(1.05) rotate(1deg);
  }
}

/*───────────────────────────────────────────────────────────────────────────
  FLEX CONTAINER FOR REELS + PAYOUTS
───────────────────────────────────────────────────────────────────────────*/
.monitor-content {
  display: flex;
  flex-direction: row;
  gap: 10px;
  padding: 8px;
  align-items: flex-start;
  justify-content: center;
}

/*───────────────────────────────────────────────────────────────────────────
  LEFT HALF: SLOT MACHINE AREA
───────────────────────────────────────────────────────────────────────────*/
.slot-area {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Hide the checkbox itself */
.hidden-toggle {
  position: absolute;
  left: -9999px;
}

/* The cute SPIN button */
.spin-btn {
  position: relative;       /* normal flow inside .game-info */
  top: 0; left: 0;          /* override any old top/left */
  transform: none;          /* reset any translateX or rotate */
  margin: 10px auto 0;      /* small gap above, centered horizontally */
  display: block;
  width: 100px;              /* button for 50% scale */
  height: 40px;              /* button for 50% scale */
  background: var(--button-gradient);
  border: 3px solid var(--accent-pink);
  border-radius: 25px;
  font-family: "Press Start 2P", cursive;
  font-size: 0.8rem;
  color: white;
  text-align: center;
  line-height: 36px;         /* vertically centering the "SPIN" text */
  cursor: pointer;
  box-shadow:
    0 8px 20px rgba(255, 118, 117, 0.5),
    0 0 25px rgba(162, 155, 254, 0.3),
    inset 0 -3px 6px rgba(0, 0, 0, 0.1),
    inset 0 3px 6px rgba(255, 255, 255, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  z-index: 3;               /* ensure it's above game-info background */
  animation: spinBounce 2s ease-in-out infinite;
}

@keyframes spinBounce {
  0%, 100% { 
    transform: scale(1);
  }
  50% { 
    transform: scale(1.02);
  }
}

.spin-btn:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow:
    0 8px 20px rgba(255, 62, 191, 0.6),
    inset 0 -3px 6px rgba(0, 0, 0, 0.25),
    inset 0 3px 6px rgba(255, 255, 255, 0.25);
}

.spin-btn:active {
  transform: translateY(0px) scale(1.01);
}

/* The cute "monitor glass" behind the reels */
.reel-wrapper {
  position: relative;
  width: var(--slot-width);
  height: calc(var(--slot-dim) * 5);
  background: linear-gradient(145deg, 
    rgba(255, 234, 167, 0.7) 0%, 
    rgba(253, 121, 168, 0.6) 50%,
    rgba(162, 155, 254, 0.7) 100%);
  border: 3px solid var(--accent-mint);
  border-radius: 20px;
  box-shadow:
    0 0 25px rgba(255, 118, 117, 0.4),
    0 0 40px rgba(162, 155, 254, 0.3),
    inset 0 0 15px rgba(255, 255, 255, 0.4);
  overflow: hidden;
  display: flex;
  z-index: 2;
}

/* Countdown text, centered over the reels */
.countdown {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-pixel);
  font-size: 2.5rem;                     /* smaller countdown text */
  color: #FFFFFF;                        /* pure white */
  text-shadow:
    0 0 8px #FFFFFF,                     /* white glow */
    0 0 16px #00E5FF,                    /* cyan neon accent */
    0 0 24px #FF3EBF;                    /* magenta neon accent */
  background: rgba(0, 0, 0, 0.6);        /* semi-transparent black pill */
  padding: 0.2em 0.4em;                  /* reduced breathing room */
  border-radius: 0.3em;                  /* round corners */
  pointer-events: none;
  opacity: 0;                            /* still controlled by JS for fade in/out */
  z-index: 2000;                         /* ensure it floats on top of everything */
}

/* Each "reel column" */
.reel {
  position: relative;
  width: var(--slot-dim);
  height: calc(var(--slot-dim) * 5);
  border-left: 1px solid rgba(0, 229, 255, 0.15);
  border-right: 1px solid rgba(0, 229, 255, 0.15);
  transition: opacity 0.3s ease;
  overflow: hidden;
}

.reel:first-child {
  border-left: none;
}
.reel:last-child {
  border-right: none;
}

/* The two stacks of 8 icons that scroll */
.icons-group {
  position: relative;
  height: calc(var(--slot-dim) * 8);
  top: calc(-1 * var(--slot-dim) * 3);
  animation: spinAnim 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1 forwards;
  animation-play-state: paused;
  transform-style: preserve-3d;
}

/* After countdown finishes, these groups start spinning */
.start-spin .icons-group {
  animation-play-state: running;
}

/* Delay each column's spin */
.start-spin .reel:nth-of-type(2) .icons-group {
  animation-delay: 0.3s;
}
.start-spin .reel:nth-of-type(3) .icons-group {
  animation-delay: 0.6s;
}
.start-spin .reel:nth-of-type(4) .icons-group {
  animation-delay: 0.9s;
}
.start-spin .reel:nth-of-type(5) .icons-group {
  animation-delay: 1.2s;
}

/* Each "tile"—cute pastel styling */
.icon {
  width: 100%;
  height: var(--slot-dim);
  margin: 2px 1px;
  background-color: rgba(255, 255, 255, 0.9);
  border: 3px solid var(--accent-pink);
  border-radius: 15px;
  box-shadow:
    0 0 15px rgba(255, 118, 117, 0.3),
    0 0 25px rgba(162, 155, 254, 0.2),
    inset 0 0 10px rgba(255, 255, 255, 0.5);
  background-size: 60%;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  overflow: hidden;
  position: relative;
}

.icon::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, 
    rgba(255, 255, 255, 0.3) 0%, 
    transparent 70%);
  animation: iconSparkle 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes iconSparkle {
  0%, 100% { 
    transform: rotate(0deg);
    opacity: 0.3;
  }
  50% { 
    transform: rotate(180deg);
    opacity: 0.6;
  }
}

/* Hover effects removed for cleaner experience */

/* Icon images remain the same—just apply to .figure-1 etc. */
.figure-1 { background-image: url('slot symbols/S_BASE.png'); }
.figure-2 { background-image: url('slot symbols/O_BASE.png'); }
.figure-3 { background-image: url('slot symbols/L_BASE.png'); }
.figure-4 { background-image: url('slot symbols/trump.png'); }
.figure-5 { background-image: url('slot symbols/elon.png'); }
.figure-6 { background-image: url('slot symbols/dogwifhat.png'); }
.figure-7 { background-image: url('slot symbols/popcat.png'); }

.figure-8 {
  background-image: url('slot symbols/pepe.png');
  background-color: rgba(76, 124, 89, 0.4);
  box-shadow:
    inset 0 0 12px rgba(255, 255, 255, 0.5),
    0 0 10px rgba(255, 255, 255, 0.3);
  position: relative;
}

.figure-8::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    45deg,
    rgba(255,0,0,0.2),
    rgba(255,165,0,0.2),
    rgba(255,255,0,0.2),
    rgba(0,255,0,0.2),
    rgba(0,0,255,0.2),
    rgba(75,0,130,0.2),
    rgba(238,130,238,0.2)
  );
  background-size: 400% 400%;
  animation: shimmerRainbow 2s linear infinite;
  border-radius: 8px;
  pointer-events: none;
}

/* "Spin" keyframe for each column */
@keyframes spinAnim {
  0% {
    transform: translateY(0%) scale(1);
    top: calc(-1 * var(--slot-dim) * 3);
  }
  20% {
    transform: translateY(200%) scale(0.95);
    top: calc(-1 * var(--slot-dim) * 3);
  }
  40% {
    transform: translateY(800%) scale(0.9);
    top: calc(-1 * var(--slot-dim) * 3);
  }
  60% {
    transform: translateY(1400%) scale(0.92);
    top: calc(-1 * var(--slot-dim) * 3);
  }
  80% {
    transform: translateY(1800%) scale(0.95);
    top: calc(-1 * var(--slot-dim) * 3);
  }
  100% {
    transform: translateY(0%) scale(1);
    top: calc(-1 * var(--slot-dim) * 3);
  }
}

/*───────────────────────────────────────────────────────────────────────────
  RIGHT HALF: Payouts Box
───────────────────────────────────────────────────────────────────────────*/
.payouts-box {
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(10px);
  border: 2px solid var(--accent-pink);
  border-radius: 12px;
  padding: 6px 8px;
  width: 120px;
  box-shadow: 0 0 15px rgba(255, 118, 117, 0.3);
  font-family: 'Poppins', sans-serif;
  font-size: 0.55rem;
  color: #ffffff;
  position: relative;
  margin-top: 20px;
  z-index: 2;
}

.payouts-box h3 {
  margin-bottom: 12px;
  color: var(--accent-pink);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}

.symbols-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.symbols-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  border: 1px solid rgba(255, 118, 117, 0.2);
}

.symbol-icon {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background-size: 60%;
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid var(--border-cyan);
}

.symbol-name {
  flex: 1;
  font-weight: 500;
  font-size: 0.85rem;
}

.symbol-payout {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--accent-yellow);
  text-align: right;
  min-width: 50px;
}

.payouts-rules {
  border-top: 1px solid rgba(255, 118, 117, 0.3);
  padding-top: 10px;
}

.payouts-rules p {
  margin: 4px 0;
  font-size: 0.75rem;
  line-height: 1.2;
}

.payouts-rules strong {
  color: var(--accent-mint);
}

/*───────────────────────────────────────────────────────────────────────────
  RESULT + POOL DISPLAY (updated for new theme)
───────────────────────────────────────────────────────────────────────────*/
.game-info {
  margin-top: 12px;
  text-align: center;
  font-family: var(--font-family-sans);
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.9) 0%, 
    rgba(255, 234, 167, 0.8) 50%,
    rgba(253, 121, 168, 0.8) 100%);
  padding: 8px 16px;
  border-radius: 20px;
  border: 3px solid var(--accent-purple);
  box-shadow: 
    0 0 20px rgba(162, 155, 254, 0.4),
    0 0 35px rgba(255, 118, 117, 0.3);
  width: var(--slot-width);
  position: relative;
  z-index: 2;
}

.pool-display {
  font-size: 1rem;
  font-weight: 500;
  background: linear-gradient(
    45deg,
    rgba(0, 229, 255, 0.8),
    rgba(255, 62, 191, 0.8),
    rgba(0, 229, 255, 0.8)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
}

#pool-amount {
  color: var(--border-cyan);
  font-weight: 700;
  text-shadow: 0 0 4px var(--border-cyan);
  animation: prizePulse 3s ease-in-out infinite;
}

.result-display {
  font-size: 0.9rem;
  font-weight: 500;
  min-height: 24px;
  color: #e3e3e5;
  transition: color 0.3s ease-out;
}

.result-display.win {
  color: var(--border-cyan);
  font-size: 1rem;
  animation: resultGlow 0.8s ease-out forwards;
}

.result-display.no-win {
  color: #888;
  animation: shake 0.5s ease-out;
}

.result-display.winner {
  color: #FFD700;
  text-shadow: 0 0 8px #FFD700;
  background: rgba(255, 215, 0, 0.1);
  border-color: #FFD700;
}

/*───────────────────────────────────────────────────────────────────────────
  KEYFRAME ANIMATIONS
───────────────────────────────────────────────────────────────────────────*/
@keyframes resultGlow {
  0% {
    color: var(--border-cyan);
    text-shadow: 0 0 4px var(--border-cyan);
  }
  50% {
    text-shadow:
      0 0 10px var(--border-cyan),
      0 0 20px var(--border-cyan);
  }
  100% {
    text-shadow: none;
  }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

@keyframes shimmerRainbow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes prizePulse {
  0%, 100% {
    transform: scale(1);
    text-shadow: 0 0 4px var(--border-cyan);
  }
  50% {
    transform: scale(1.05);
    text-shadow: 0 0 8px var(--border-cyan), 0 0 16px var(--highlight-neon);
  }
}

/* Disable button during countdown/spin */
.spin-btn:disabled {
  pointer-events: none;
  opacity: 0.6;
}

/*───────────────────────────────────────────────────────────────────────────
  MOBILE RESPONSIVENESS TWEAKS
───────────────────────────────────────────────────────────────────────────*/
@media (max-width: 768px) {
  .casino-welcome {
    padding: 24px 16px;
    max-width: 90%;
  }

  .casino-title {
    font-size: 2rem;
  }

  .monitor-content {
    flex-direction: column;
    align-items: center;
  }
  
  .payouts-box {
    width: 90%;
    margin-top: 16px;
  }
  
  .monitor-content {
    flex-direction: column;
    align-items: center;
  }
  
  .reel {
    width: calc(100% / 5);
  }
  
  .monitor-header, .game-info {
    width: 90%;
  }

  .arcade-monitor {
    transform: scale(0.9);
  }

  .spin-btn {
    top: -36px;
    width: 120px;
    height: 40px;
    font-size: 0.9rem;
  }

  .monitor-header h1 {
    font-size: 0.9rem;
    letter-spacing: 1px;
  }

  #particles-container {
    display: none;
  }

  /* Hide the permanent info on mobile since we have the payouts box */
  .permanent-info {
    display: none !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   ENHANCED BUILDUP EFFECTS: Sharper Shake + Bigger Glow + Flash
   ────────────────────────────────────────────────────────────────────────── */

/* 1A) COUNTDOWN Digit Animation (unchanged) */
@keyframes countdownPulse {
  0% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 1;
    color: #00e5ff;
    text-shadow: 0 0 8px #00e5ff, 0 0 16px #ff3ebf;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.4);
    opacity: 0.7;
    color: #ff3ebf;
    text-shadow: 0 0 12px #ff3ebf, 0 0 20px #00e5ff;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
    color: #00e5ff;
    text-shadow: none;
  }
}

.countdown.pulse {
  animation: countdownPulse 0.6s ease-out forwards;
}

/* 1B-a) STRONGER "power-surge" shake over 2s instead of 3s */
@keyframes buildupShake {
  0%   { transform: translate(0, 0) rotate(0deg); }
  10%  { transform: translate(-6px, 3px) rotate(-1deg); }
  20%  { transform: translate(5px, -5px) rotate(1.5deg); }
  30%  { transform: translate(-4px, 6px) rotate(-1.2deg); }
  40%  { transform: translate(6px, -3px) rotate(1deg); }
  50%  { transform: translate(-5px, 5px) rotate(-1.5deg); }
  60%  { transform: translate(4px, -6px) rotate(1.2deg); }
  70%  { transform: translate(-6px, 3px) rotate(-1deg); }
  80%  { transform: translate(5px, -5px) rotate(1.5deg); }
  90%  { transform: translate(0px, 0px) rotate(0deg); }
  100% { transform: translate(0px, 0px) rotate(0deg); }
}

/* 1B-b) BIGGER glow around the reel frame */
@keyframes buildupGlow {
  0% {
    box-shadow:
      0 0 16px rgba(0, 229, 255, 0.6),
      inset 0 0 14px rgba(255, 62, 191, 0.5);
    border-color: rgba(0, 229, 255, 0.8);
  }
  50% {
    box-shadow:
      0 0 32px rgba(255, 62, 191, 0.8),
      inset 0 0 24px rgba(0, 229, 255, 0.6);
    border-color: rgba(255, 62, 191, 1);
  }
  100% {
    box-shadow:
      0 0 16px rgba(0, 229, 255, 0.6),
      inset 0 0 14px rgba(255, 62, 191, 0.5);
    border-color: rgba(0, 229, 255, 0.8);
  }
}

/* 1B-c) QUICK white flash behind the reels */
@keyframes buildFlash {
  0% {
    background-color: rgba(255, 255, 255, 0.5);
  }
  50% {
    background-color: rgba(255, 255, 255, 0.2);
  }
  100% {
    background-color: transparent;
  }
}

/* 1B-d) Combine all three onto .reel-wrapper.buildup */
.reel-wrapper.buildup {
  animation:
    buildupShake 2s ease-in-out 1,
    buildupGlow  2s ease-in-out infinite,
    buildFlash   2s linear 1 forwards;
}

/* Ensure buildFlash overlay sits behind the reels' icons */
.reel-wrapper.buildup::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2; /* below the icons (z-index: 3+) */
  background-color: transparent;
  border-radius: 8px;
  pointer-events: none;
  animation: buildFlash 2s linear 1 forwards;
}

/* While ".buildup" is active, each .reel blurs out fully */
.reel-wrapper.buildup .reel {
  filter: brightness(1.3) blur(4px);
  transition: filter 0.2s ease-out;
}

/* Each .icon pulses with a stronger neon glow (but stays blurred) */
.reel-wrapper.buildup .icon {
  box-shadow:
    inset 0 0 16px rgba(0, 229, 255, 0.3),
    0 0 12px rgba(255, 62, 191, 0.3);
  transition: box-shadow 0.2s ease-out;
  filter: blur(6px) brightness(0.4) !important;
}

.reel-wrapper.buildup .icon:hover {
  /* do nothing on hover during buildup (so user can't break the effect) */
  transform: none;
}

/* ──────────────────────────────────────────────────────────────────────────
   BLUR + DIM ALL TILES WHEN .buildup IS ACTIVE
   ────────────────────────────────────────────────────────────────────────── */

/* While the buildup class is present, each icon is blurred so you can't see its symbol */
.reel-wrapper.buildup .icon {
  filter: blur(6px) brightness(0.5) !important;
  transition: filter 0.2s ease-out;
}

/* Once we remove .buildup, the blur goes away instantly */
.reel-wrapper .icon {
  filter: none;
  transition: filter 0.1s ease-out;
}

/* ──────────────────────────────────────────────────────────────────────────
   MAIN NAVIGATION
   ────────────────────────────────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────────────────────
   FIXED NAVIGATION BAR
   ────────────────────────────────────────────────────────────────────────── */
.new-navigation {
  position: fixed !important;
  top: 758px;
  left: 446px;
  width: auto;
  max-width: 600px;
  z-index: 10000;
}

/* ──────────────────────────────────────────────────────────────────────────
   DRAGGABLE PANELS (PAYOUT REQUEST & TOTAL EARNED)
   ────────────────────────────────────────────────────────────────────────── */
/* ──────────────────────────────────────────────────────────────────────────
   NEW DRAGGABLE PAYOUT REQUEST PANEL
   ────────────────────────────────────────────────────────────────────────── */
#new-payout-panel {
  position: fixed !important;
  top: 362px;
  left: 150px;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.85);
  border: 2px solid #ff3ebf;
  border-radius: 10px;
  padding: 16px;
  color: #e3e3e5;
  width: 250px;
  font-family: "Poppins", sans-serif;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
  display: none; /* Hidden until casino content is shown */
}

#user-balance-panel {
  position: fixed !important;
  top: 365px;
  left: 1350px;
  z-index: 9999;
  display: none; /* Hidden until casino content is shown */
}

/* Removed hover and dragging effects - panel is now fixed */

#new-payout-panel h3 {
  margin: 0 0 12px 0;
  font-size: 1.1em;
  color: #ff3ebf;
  font-family: 'Press Start 2P', monospace;
  text-align: center;
}

#new-payout-panel form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#new-payout-panel input {
  padding: 8px;
  border: 1px solid #ff3ebf;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 14px;
}

#new-payout-panel button {
  padding: 10px;
  border: none;
  border-radius: 5px;
  background: linear-gradient(135deg, #ff3ebf 0%, #74b9ff 100%);
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

#new-payout-panel button:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(255, 62, 191, 0.3);
}

#new-payout-panel p {
  margin: 8px 0 0 0;
  font-size: 12px;
  text-align: center;
}

.nav-container {
  display: flex;
  justify-content: center;
  gap: 15px;
  background: linear-gradient(135deg, 
    rgba(15, 15, 16, 0.95) 0%, 
    rgba(28, 28, 30, 0.85) 100%);
  border: 2px solid var(--accent-electric);
  border-radius: 15px;
  padding: 12px;
  box-shadow: 
    0 0 30px rgba(0, 229, 255, 0.3),
    inset 0 0 20px rgba(255, 62, 191, 0.1);
}

.nav-link {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: #e0e0e0;
  text-decoration: none;
  padding: 10px 15px;
  border: 1px solid rgba(0, 229, 255, 0.3);
  border-radius: 12px;
  background: linear-gradient(145deg, 
    rgba(0, 229, 255, 0.05) 0%, 
    rgba(255, 62, 191, 0.02) 100%);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  text-align: center;
  min-width: 80px;
}

.nav-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(0, 229, 255, 0.1), 
    transparent);
  transition: left 0.5s ease;
}

.nav-link:hover::before {
  left: 100%;
}

.nav-link:hover {
  color: var(--accent-electric);
  border-color: var(--accent-electric);
  box-shadow: 0 5px 15px rgba(0, 229, 255, 0.2);
  transform: translateY(-2px);
}

.nav-link.active {
  color: var(--accent-neon);
  border-color: var(--accent-neon);
  background: linear-gradient(145deg, 
    rgba(255, 62, 191, 0.15) 0%, 
    rgba(0, 229, 255, 0.1) 100%);
  text-shadow: 0 0 8px var(--accent-neon);
  box-shadow: 0 0 20px rgba(255, 62, 191, 0.3);
}

.nav-link.active:hover {
  color: var(--accent-neon);
  border-color: var(--accent-neon);
}

/* Mobile navigation */
@media (max-width: 768px) {
  .nav-container {
    flex-direction: column;
    gap: 15px;
    padding: 15px;
  }
  
  .nav-link {
    font-size: 10px;
    padding: 12px 20px;
    min-width: auto;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   INFO SECTIONS: HOW IT WORKS, FAQ, RESULTS
   ────────────────────────────────────────────────────────────────────────── */

.info-section {
  width: 100%;
  max-width: 1200px;
  margin: 60px auto;
  padding: 40px 20px;
  background: linear-gradient(135deg, 
    rgba(15, 15, 16, 0.95) 0%, 
    rgba(28, 28, 30, 0.85) 100%);
  border: 2px solid var(--accent-electric);
  border-radius: 20px;
  box-shadow: 
    0 0 30px rgba(0, 229, 255, 0.3),
    inset 0 0 20px rgba(255, 62, 191, 0.1);
  position: relative;
  overflow: hidden;
}

.info-section::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, 
    rgba(0, 229, 255, 0.05) 0%, 
    transparent 70%);
  animation: gentleRotate 20s linear infinite;
  pointer-events: none;
}

@keyframes gentleRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.info-section h2 {
  font-family: 'Press Start 2P', monospace;
  font-size: 28px;
  color: var(--accent-electric);
  text-align: center;
  margin-bottom: 40px;
  text-shadow: 
    0 0 10px var(--accent-electric),
    0 0 20px var(--accent-neon);
  position: relative;
  z-index: 2;
}

/* ─── HOW IT WORKS GRID ─── */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  position: relative;
  z-index: 2;
}

.info-card {
  background: linear-gradient(145deg, 
    rgba(0, 229, 255, 0.1) 0%, 
    rgba(255, 62, 191, 0.05) 100%);
  border: 1px solid rgba(0, 229, 255, 0.3);
  border-radius: 15px;
  padding: 25px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.info-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(0, 229, 255, 0.1), 
    transparent);
  transition: left 0.5s ease;
}

.info-card:hover::before {
  left: 100%;
}

.info-card:hover {
  transform: translateY(-5px);
  border-color: var(--accent-electric);
  box-shadow: 0 10px 25px rgba(0, 229, 255, 0.2);
}

.info-card h3 {
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  color: var(--accent-neon);
  margin-bottom: 15px;
  text-shadow: 0 0 8px var(--accent-neon);
}

.info-card p {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #e0e0e0;
  margin: 0;
}

.info-card strong {
  color: var(--accent-electric);
  text-shadow: 0 0 5px var(--accent-electric);
}

/* ─── FAQ SECTION ─── */
.faq-container {
  position: relative;
  z-index: 2;
}

.faq-item {
  background: rgba(28, 28, 30, 0.6);
  border: 1px solid rgba(0, 229, 255, 0.2);
  border-radius: 12px;
  margin-bottom: 15px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.faq-item:hover {
  border-color: var(--accent-electric);
  box-shadow: 0 5px 15px rgba(0, 229, 255, 0.2);
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #e0e0e0;
  transition: color 0.3s ease;
}

.faq-question:hover {
  color: var(--accent-electric);
}

.faq-toggle {
  font-family: 'Press Start 2P', monospace;
  font-size: 16px;
  color: var(--accent-neon);
  transition: all 0.3s ease;
  user-select: none;
}

.faq-item.active .faq-toggle {
  transform: rotate(45deg);
  color: var(--accent-electric);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease;
  background: rgba(15, 15, 16, 0.8);
}

.faq-item.active .faq-answer {
  max-height: 200px;
  border-top: 1px solid rgba(0, 229, 255, 0.2);
}

.faq-answer p {
  padding: 20px 25px;
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #c0c0c0;
}

.faq-answer strong {
  color: var(--accent-electric);
  text-shadow: 0 0 5px var(--accent-electric);
}

/* ─── RESULTS SECTION ─── */
.results-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  position: relative;
  z-index: 2;
}

.results-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.stat-card {
  background: linear-gradient(145deg, 
    rgba(255, 62, 191, 0.1) 0%, 
    rgba(0, 229, 255, 0.05) 100%);
  border: 1px solid rgba(255, 62, 191, 0.3);
  border-radius: 15px;
  padding: 20px;
  text-align: center;
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: scale(1.05);
  border-color: var(--accent-neon);
  box-shadow: 0 8px 20px rgba(255, 62, 191, 0.2);
}

.stat-card h3 {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: var(--accent-neon);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.stat-card span {
  font-family: 'Press Start 2P', monospace;
  font-size: 24px;
  color: var(--accent-electric);
  text-shadow: 0 0 10px var(--accent-electric);
  display: block;
}

.results-history {
  background: rgba(15, 15, 16, 0.8);
  border: 1px solid rgba(0, 229, 255, 0.2);
  border-radius: 15px;
  padding: 25px;
}

.results-history h3 {
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  color: var(--accent-electric);
  margin-bottom: 20px;
  text-align: center;
}

.history-list {
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: 20px;
}

.history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  margin-bottom: 8px;
  background: rgba(28, 28, 30, 0.5);
  border: 1px solid rgba(0, 229, 255, 0.1);
  border-radius: 8px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  color: #c0c0c0;
  transition: all 0.2s ease;
}

.history-item:hover {
  border-color: var(--accent-electric);
  background: rgba(0, 229, 255, 0.05);
}

.history-item.win {
  border-color: #4ade80;
  background: rgba(74, 222, 128, 0.1);
}

.history-item.big-win {
  border-color: var(--accent-neon);
  background: rgba(255, 62, 191, 0.1);
  animation: prizePulse 2s ease-in-out infinite;
}

.history-item.placeholder {
  justify-content: center;
  font-style: italic;
  opacity: 0.6;
}

.history-symbols {
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  color: var(--accent-electric);
}

.history-payout {
  font-weight: bold;
  color: #4ade80;
}

.history-payout.big {
  color: var(--accent-neon);
  text-shadow: 0 0 8px var(--accent-neon);
}

.clear-history-btn {
  width: 100%;
  padding: 12px;
  background: linear-gradient(145deg, 
    rgba(255, 62, 191, 0.2) 0%, 
    rgba(0, 229, 255, 0.2) 100%);
  border: 1px solid var(--accent-neon);
  border-radius: 8px;
  color: var(--accent-neon);
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
}

.clear-history-btn:hover {
  background: linear-gradient(145deg, 
    var(--accent-neon) 0%, 
    var(--accent-electric) 100%);
  color: var(--bg-dark);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(255, 62, 191, 0.3);
}

/* ─── WIN DISTRIBUTION CHART ─── */
.win-distribution {
  position: relative;
  z-index: 2;
  margin-top: 30px;
}

.distribution-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  gap: 15px;
}

.distribution-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: var(--accent-electric);
  min-width: 150px;
  text-align: left;
}

.distribution-bar {
  flex: 1;
  height: 20px;
  background: rgba(28, 28, 30, 0.8);
  border: 1px solid rgba(0, 229, 255, 0.2);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.distribution-fill {
  height: 100%;
  background: linear-gradient(90deg, 
    rgba(0, 229, 255, 0.6) 0%, 
    rgba(0, 229, 255, 0.8) 100%);
  border-radius: 10px;
  transition: width 0.5s ease;
  position: relative;
}

.distribution-fill.small-win {
  background: linear-gradient(90deg, 
    rgba(74, 222, 128, 0.6) 0%, 
    rgba(74, 222, 128, 0.8) 100%);
}

.distribution-fill.big-win {
  background: linear-gradient(90deg, 
    rgba(255, 62, 191, 0.6) 0%, 
    rgba(255, 62, 191, 0.8) 100%);
}

.distribution-fill.mega-win {
  background: linear-gradient(90deg, 
    rgba(255, 255, 0, 0.6) 0%, 
    rgba(255, 215, 0, 0.8) 100%);
}

.distribution-value {
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  color: var(--accent-neon);
  min-width: 40px;
  text-align: right;
}

/* ─── BACK TO GAME BUTTON ─── */
.back-to-game {
  text-align: center;
  margin-top: 40px;
  position: relative;
  z-index: 2;
}

/* ─── MOBILE RESPONSIVENESS ─── */
@media (max-width: 768px) {
  .info-section {
    margin: 40px 10px;
    padding: 25px 15px;
  }
  
  .info-section h2 {
    font-size: 20px;
    margin-bottom: 25px;
  }
  
  .info-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .info-card {
    padding: 20px;
  }
  
  .info-card h3 {
    font-size: 12px;
  }
  
  .info-card p {
    font-size: 14px;
  }
  
  .faq-question {
    font-size: 16px;
    padding: 15px 20px;
  }
  
  .results-container {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .results-stats {
    grid-template-columns: 1fr 1fr;
    gap: 15px;
  }
  
  .stat-card {
    padding: 15px;
  }
  
  .stat-card h3 {
    font-size: 8px;
  }
  
  .stat-card span {
    font-size: 18px;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   SLOT FOCUS EFFECT: Pop-forward slot with centered positioning and backdrop
   ─────────────────────────────────────────────────────────────────────────── */

/* 1) The "slot-focus" wrapper dims the rest of the page & centers the slot */
.slot-focus-container {
  position: relative;       /* establishes a stacking context for its ::before */
  z-index: 1;               /* normal page content will be below .arcade-monitor when focused */
}

/* 1A) A fixed ::before on the wrapper will become a dark overlay behind the slot */
.slot-focus-container::before {
  content: "";
  position: fixed;          /* cover entire viewport */
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0, 0, 0, 0.1);  /* much lighter, 10% opacity instead of 60% */
  opacity: 0;               /* hidden by default */
  transition: opacity 0.3s ease;
  pointer-events: none;     /* clicks "through" when overlay is invisible */
  z-index: 50;              /* sits above normal content but below focused slot */
}

/* 1B) Base state: slot is normal size, wrapper's ::before is transparent */
.slot-focus-container .arcade-monitor {
  --slot-width: 480px;      /* your original slot width */
  transition: transform 0.3s ease, --slot-width 0.3s ease;
  position: relative;       /* allow z-index on the slot itself */
  z-index: 100;             /* keeps it above other page elements by default */
}

/* 2) When .focused is on the wrapper: */
/* • Fade in the dark overlay (::before) */
/* • Scale up the slot by 1.6× (480px → ~768px), centering it */
/* • Raise its z-index so it sits above that overlay */
.slot-focus-container.focused::before {
  opacity: 0;               /* keep overlay hidden even when focused */
  pointer-events: none;     /* never block clicks */
}

.slot-focus-container.focused .arcade-monitor {
  /* Keep the original --slot-width (480px), just scale it up uniformly */
  position: fixed;          /* pin it to center of viewport */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.6);  /* 1.6× scale: 480px → ~768px */
  z-index: 1000;            /* ensure it floats above the dark overlay */
}

/* ───────────────────────────────────────────────────────────────────────────
   NAVIGATION HIDING: Hide nav completely during focus mode for clean experience
   ─────────────────────────────────────────────────────────────────────────── */

/* Hide the nav when the slot-focus container is focused */
.slot-focus-container.focused ~ .main-navigation {
  display: none;
}

/* ───────────────────────────────────────────────────────────────────────────
   TOP PRIZE POOL: Prominent display at top of screen
   ─────────────────────────────────────────────────────────────────────────── */

.top-prize-pool {
  position: relative;
  width: 100%;
  z-index: 100;
  background: linear-gradient(45deg, 
    rgba(255, 215, 0, 0.9) 0%, 
    rgba(255, 165, 0, 0.8) 25%, 
    rgba(255, 69, 0, 0.8) 50%, 
    rgba(255, 20, 147, 0.8) 75%, 
    rgba(138, 43, 226, 0.9) 100%);
  border-bottom: 3px solid #FFD700;
  box-shadow: 
    0 0 30px rgba(255, 215, 0, 0.7),
    0 4px 20px rgba(0, 0, 0, 0.5),
    inset 0 0 20px rgba(255, 255, 255, 0.2);
  padding: 2px 0;
  text-align: center;
  animation: prizePoolPulse 3s ease-in-out infinite;
  margin-bottom: 3px;
}

.top-prize-pool .pool-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.pool-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 6px;
  color: #FFD700;
  text-shadow: 
    0 0 10px #FFD700,
    0 0 20px #FF8C00,
    2px 2px 4px rgba(0, 0, 0, 0.8);
  animation: titleFlicker 2s ease-in-out infinite alternate;
  letter-spacing: 1px;
}

.pool-amounts {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: center;
}

.pool-sol {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: #00FFE5;
  text-shadow: 
    0 0 15px #00FFE5,
    0 0 30px #00CED1,
    2px 2px 6px rgba(0, 0, 0, 0.9);
  animation: solGlow 2.5s ease-in-out infinite;
}

.pool-divider {
  font-family: 'Press Start 2P', monospace;
  font-size: 20px;
  color: #FFFFFF;
  text-shadow: 
    0 0 10px #FFFFFF,
    2px 2px 4px rgba(0, 0, 0, 0.8);
  animation: dividerPulse 1.5s ease-in-out infinite;
}

.pool-usd {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: #32CD32;
  text-shadow: 
    0 0 15px #32CD32,
    0 0 30px #228B22,
    2px 2px 6px rgba(0, 0, 0, 0.9);
  animation: usdGlow 2s ease-in-out infinite;
}

@keyframes prizePoolPulse {
  0%, 100% { 
    transform: scale(1);
    box-shadow: 
      0 0 30px rgba(255, 215, 0, 0.7),
      0 4px 20px rgba(0, 0, 0, 0.5),
      inset 0 0 20px rgba(255, 255, 255, 0.2);
  }
  50% { 
    transform: scale(1.02);
    box-shadow: 
      0 0 40px rgba(255, 215, 0, 0.9),
      0 6px 30px rgba(0, 0, 0, 0.6),
      inset 0 0 30px rgba(255, 255, 255, 0.3);
  }
}

@keyframes titleFlicker {
  0%, 100% { 
    text-shadow: 
      0 0 10px #FFD700,
      0 0 20px #FF8C00,
      2px 2px 4px rgba(0, 0, 0, 0.8);
  }
  50% { 
    text-shadow: 
      0 0 20px #FFD700,
      0 0 40px #FF8C00,
      0 0 60px #FF4500,
      2px 2px 6px rgba(0, 0, 0, 0.9);
  }
}

@keyframes solGlow {
  0%, 100% { 
    transform: scale(1);
    text-shadow: 
      0 0 15px #00FFE5,
      0 0 30px #00CED1,
      2px 2px 6px rgba(0, 0, 0, 0.9);
  }
  50% { 
    transform: scale(1.05);
    text-shadow: 
      0 0 25px #00FFE5,
      0 0 50px #00CED1,
      0 0 75px #008B8B,
      2px 2px 8px rgba(0, 0, 0, 0.9);
  }
}

@keyframes usdGlow {
  0%, 100% { 
    transform: scale(1);
    text-shadow: 
      0 0 15px #32CD32,
      0 0 30px #228B22,
      2px 2px 6px rgba(0, 0, 0, 0.9);
  }
  50% { 
    transform: scale(1.05);
    text-shadow: 
      0 0 25px #32CD32,
      0 0 50px #228B22,
      0 0 75px #006400,
      2px 2px 8px rgba(0, 0, 0, 0.9);
  }
}

@keyframes dividerPulse {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}

/* Mobile responsiveness for prize pool */
@media (max-width: 768px) {
  .top-prize-pool {
    padding: 12px 10px;
    margin-bottom: 15px;
  }
  
  .pool-title {
    font-size: 14px;
    letter-spacing: 1px;
  }
  
  .pool-amounts {
    gap: 10px;
    flex-direction: column;
  }
  
  .pool-sol, .pool-usd {
    font-size: 18px;
  }
  
  .pool-divider {
    font-size: 16px;
    transform: rotate(90deg);
  }
}

@media (max-width: 480px) {
  .top-prize-pool {
    margin-bottom: 10px;
  }
  
  .pool-title {
    font-size: 12px;
  }
  
  .pool-sol, .pool-usd {
    font-size: 16px;
  }
  
  .pool-divider {
    font-size: 14px;
  }
}

/* No need for top padding - prize pool is now in normal flow */

/* ──────────────────────────────────────────────────────────────────────────
   COORDINATE SYSTEM OVERLAY - For Easy Element Positioning
   ────────────────────────────────────────────────────────────────────────── */

/* Debug coordinate system removed - was causing text overlay during slot focus */

/* ───────────────────────────────────────────────────────────────────────────
   SPIN BUTTON AT BOTTOM: New container and positioning
   ─────────────────────────────────────────────────────────────────────────── */

.spin-container {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  padding: 20px 0;
}

.spin-container .spin-btn {
  /* Enhanced styling for bottom placement */
  font-size: 28px;
  padding: 20px 40px;
  background: linear-gradient(45deg, var(--accent-neon), var(--accent-pink));
  border: 3px solid var(--accent-neon);
  color: var(--bg-dark);
  font-weight: bold;
  text-shadow: none;
  box-shadow: 
    0 0 20px var(--accent-neon),
    0 0 40px var(--accent-neon),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
  transform: scale(1);
  transition: all 0.3s ease;
}

.spin-container .spin-btn:hover {
  transform: scale(1.1);
  box-shadow: 
    0 0 30px var(--accent-neon),
    0 0 60px var(--accent-neon),
    inset 0 0 30px rgba(255, 255, 255, 0.2);
}

/* Auto-spin button styling */
.autospin-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 16px;
  padding: 15px 25px;
  margin-left: 20px;
  background: linear-gradient(45deg, var(--accent-pink), var(--accent-neon));
  border: 2px solid var(--accent-pink);
  color: var(--bg-dark);
  border-radius: 12px;
  cursor: pointer;
  font-weight: bold;
  text-shadow: none;
  box-shadow: 
    0 0 15px var(--accent-pink),
    0 0 30px var(--accent-pink),
    inset 0 0 15px rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.autospin-btn:hover {
  transform: scale(1.05);
  box-shadow: 
    0 0 25px var(--accent-pink),
    0 0 50px var(--accent-pink),
    inset 0 0 25px rgba(255, 255, 255, 0.2);
}

.autospin-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.autospin-btn input {
  background: rgba(15, 15, 16, 0.8);
  border: 1px solid var(--accent-neon);
  color: var(--accent-neon);
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  padding: 4px 6px;
  border-radius: 4px;
  text-align: center;
}

/* ───────────────────────────────────────────────────────────────────────────
   WIN POPUP: Dramatic full-screen win notification overlay
   ─────────────────────────────────────────────────────────────────────────── */

.win-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2000;
  display: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.win-popup.show {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
}

.win-popup-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(5px);
  animation: winOverlayIn 0.4s ease-out forwards;
}

.win-popup-content {
  position: relative;
  background: linear-gradient(145deg, 
    rgba(15, 15, 16, 0.95) 0%, 
    rgba(28, 28, 30, 0.9) 100%);
  border: 3px solid var(--accent-electric);
  border-radius: 20px;
  max-width: 600px;
  max-height: 80vh;
  width: 90%;
  overflow: hidden;
  box-shadow: 
    0 0 40px rgba(0, 229, 255, 0.5),
    inset 0 0 30px rgba(255, 62, 191, 0.1);
  transform: scale(0.3) rotateY(90deg);
  animation: winPopupIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.win-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px 30px;
  background: linear-gradient(90deg, 
    rgba(0, 229, 255, 0.2) 0%, 
    rgba(255, 62, 191, 0.2) 100%);
  border-bottom: 2px solid var(--accent-neon);
}

.win-popup-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 24px;
  color: var(--accent-electric);
  text-shadow: 
    0 0 10px var(--accent-electric),
    0 0 20px var(--accent-neon);
  animation: winTitlePulse 2s ease-in-out infinite;
}

.win-popup-close {
  font-size: 28px;
  color: var(--light-gray);
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
  background: rgba(255, 62, 191, 0.1);
  border: 1px solid rgba(255, 62, 191, 0.3);
}

.win-popup-close:hover {
  color: var(--accent-neon);
  background: rgba(255, 62, 191, 0.2);
  border-color: var(--accent-neon);
  transform: scale(1.1);
}

.win-popup-body {
  padding: 30px;
  max-height: 60vh;
  overflow-y: auto;
}

.win-details {
  text-align: center;
  margin-bottom: 30px;
}

.win-symbols {
  font-family: 'Press Start 2P', monospace;
  font-size: 20px;
  color: var(--accent-neon);
  margin-bottom: 20px;
  text-shadow: 0 0 8px var(--accent-neon);
  animation: winSymbolsGlow 3s ease-in-out infinite;
}

.win-explanation {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  color: #e0e0e0;
  margin-bottom: 20px;
  line-height: 1.6;
}

.win-payout {
  font-family: 'Press Start 2P', monospace;
  font-size: 18px;
  color: var(--accent-electric);
  padding: 15px 25px;
  background: linear-gradient(145deg, 
    rgba(0, 229, 255, 0.15) 0%, 
    rgba(255, 62, 191, 0.1) 100%);
  border: 2px solid var(--accent-electric);
  border-radius: 12px;
  margin: 20px 0;
  text-shadow: 0 0 10px var(--accent-electric);
  animation: winPayoutPulse 2s ease-in-out infinite;
}

.win-breakdown {
  background: rgba(28, 28, 30, 0.6);
  border: 1px solid rgba(0, 229, 255, 0.3);
  border-radius: 12px;
  padding: 20px;
  margin-top: 20px;
}

.win-breakdown h4 {
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  color: var(--accent-electric);
  margin-bottom: 15px;
  text-align: center;
}

.breakdown-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0, 229, 255, 0.1);
  font-family: 'Poppins', sans-serif;
  color: #c0c0c0;
}

.breakdown-item:last-child {
  border-bottom: none;
  font-weight: bold;
  color: var(--accent-electric);
  margin-top: 10px;
  padding-top: 15px;
  border-top: 2px solid var(--accent-electric);
}

.breakdown-label {
  font-size: 14px;
}

.breakdown-value {
  font-size: 14px;
  color: var(--accent-neon);
}

/* Animations */
@keyframes winOverlayIn {
  from { opacity: 0; backdrop-filter: blur(0px); }
  to { opacity: 1; backdrop-filter: blur(5px); }
}

@keyframes winPopupIn {
  0% { 
    transform: scale(0.3) rotateY(90deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.1) rotateY(0deg);
    opacity: 0.8;
  }
  100% { 
    transform: scale(1) rotateY(0deg);
    opacity: 1;
  }
}

@keyframes winTitlePulse {
  0%, 100% { 
    transform: scale(1);
    text-shadow: 
      0 0 10px var(--accent-electric),
      0 0 20px var(--accent-neon);
  }
  50% { 
    transform: scale(1.05);
    text-shadow: 
      0 0 15px var(--accent-electric),
      0 0 30px var(--accent-neon);
  }
}

@keyframes winSymbolsGlow {
  0%, 100% { 
    transform: scale(1);
    text-shadow: 0 0 8px var(--accent-neon);
  }
  50% { 
    transform: scale(1.03);
    text-shadow: 0 0 15px var(--accent-neon);
  }
}

@keyframes winPayoutPulse {
  0%, 100% { 
    transform: scale(1);
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.3);
  }
  50% { 
    transform: scale(1.02);
    box-shadow: 0 0 25px rgba(0, 229, 255, 0.5);
  }
}

/* Special styling for mega wins */
.win-popup.mega-win .win-popup-content {
  border-color: #FFD700;
  box-shadow: 
    0 0 50px rgba(255, 215, 0, 0.7),
    inset 0 0 40px rgba(255, 215, 0, 0.2);
  animation: winPopupIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
             megaWinShake 0.5s ease-in-out infinite 0.6s;
}

.win-popup.mega-win .win-popup-title {
  color: #FFD700;
  text-shadow: 
    0 0 15px #FFD700,
    0 0 30px #FFA500;
  animation: megaWinTitlePulse 1s ease-in-out infinite;
}

.win-popup.mega-win .win-payout {
  border-color: #FFD700;
  color: #FFD700;
  text-shadow: 0 0 15px #FFD700;
  animation: megaWinPayoutPulse 1s ease-in-out infinite;
}

@keyframes megaWinShake {
  0%, 100% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.01) rotate(0.5deg); }
  75% { transform: scale(1.01) rotate(-0.5deg); }
}

@keyframes megaWinTitlePulse {
  0%, 100% { 
    transform: scale(1);
    text-shadow: 
      0 0 15px #FFD700,
      0 0 30px #FFA500;
  }
  50% { 
    transform: scale(1.1);
    text-shadow: 
      0 0 25px #FFD700,
      0 0 50px #FFA500;
  }
}

@keyframes megaWinPayoutPulse {
  0%, 100% { 
    transform: scale(1);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
  }
  50% { 
    transform: scale(1.05);
    box-shadow: 0 0 35px rgba(255, 215, 0, 0.8);
  }
}

/* Social Actions Section */
.win-social-actions {
  text-align: center;
  margin-top: 25px;
  padding-top: 20px;
  border-top: 1px solid rgba(0, 229, 255, 0.2);
}

.tweet-win-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  color: #ffffff;
  background: linear-gradient(135deg, 
    #1da1f2 0%, 
    #0d8bd9 25%,
    #1da1f2 50%,
    #0d8bd9 75%,
    #1da1f2 100%);
  background-size: 400% 400%;
  border: 3px solid #1da1f2;
  border-radius: 15px;
  padding: 15px 30px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: all 0.4s ease;
  box-shadow: 
    0 0 20px rgba(29, 161, 242, 0.6),
    0 0 40px rgba(29, 161, 242, 0.3),
    inset 0 2px 10px rgba(255, 255, 255, 0.3),
    inset 0 -2px 8px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
  animation: tweetButtonPulse 3s ease-in-out infinite;
}

.tweet-win-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.3) 50%, 
    transparent 100%);
  transition: left 0.5s ease;
}

@keyframes tweetButtonPulse {
  0%, 100% {
    background-position: 0% 50%;
    box-shadow: 
      0 0 20px rgba(29, 161, 242, 0.6),
      0 0 40px rgba(29, 161, 242, 0.3),
      inset 0 2px 10px rgba(255, 255, 255, 0.3),
      inset 0 -2px 8px rgba(0, 0, 0, 0.2);
  }
  50% {
    background-position: 100% 50%;
    box-shadow: 
      0 0 30px rgba(29, 161, 242, 0.8),
      0 0 60px rgba(29, 161, 242, 0.4),
      inset 0 2px 12px rgba(255, 255, 255, 0.4),
      inset 0 -2px 10px rgba(0, 0, 0, 0.3);
  }
}

.tweet-win-btn:hover {
  background: linear-gradient(135deg, 
    #1da1f2 0%, 
    #ffffff 50%, 
    #1da1f2 100%);
  background-size: 200% 200%;
  animation: tweetButtonPulse 1s ease-in-out infinite;
  box-shadow: 
    0 0 35px rgba(29, 161, 242, 1.0),
    0 0 70px rgba(29, 161, 242, 0.6),
    inset 0 2px 15px rgba(255, 255, 255, 0.5),
    inset 0 -2px 12px rgba(0, 0, 0, 0.3);
  transform: translateY(-3px) scale(1.08);
  text-shadow: 
    0 0 10px rgba(255, 255, 255, 1.0),
    0 0 20px rgba(29, 161, 242, 0.8);
}

.tweet-win-btn:hover::before {
  left: 100%;
}

.tweet-win-btn:active {
  transform: translateY(0px) scale(1.02);
  box-shadow: 
    0 0 15px rgba(29, 161, 242, 0.6),
    inset 0 2px 8px rgba(255, 255, 255, 0.2);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .win-popup-content {
    width: 95%;
    max-width: none;
  }
  
  .win-popup-title {
    font-size: 18px;
  }
  
  .win-symbols {
    font-size: 16px;
  }
  
  .win-payout {
    font-size: 14px;
    padding: 12px 20px;
  }
  
  .win-popup-body {
    padding: 20px;
  }
  
  .tweet-win-btn {
    font-size: 12px;
    padding: 12px 24px;
    letter-spacing: 1px;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   AUTO-SPIN CONTROLS (DROPDOWN + BUTTON)
   ────────────────────────────────────────────────────────────────────────── */

.autospin-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  /* If you want to center horizontally within the slot area:
     justify-content: center; */
}

/* ─── Dropdown (Preset Values) ─── */
.autospin-select {
  appearance: none;            /* remove default arrow */
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: rgba(28, 28, 30, 0.9);
  color: #e3e3e5;
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  font-weight: 500;
  padding: 6px 10px;
  border: 2px solid #00e5ff;   /* neon‐cyan border */
  border-radius: 6px;
  text-align: center;
  cursor: pointer;
  position: relative;
  width: 90px;                 /* enough to show "100 Spins" */
  box-shadow:
    0 0 4px rgba(0, 229, 255, 0.4),
    inset 0 0 6px rgba(0, 229, 255, 0.2);
  transition: all 0.2s ease-in-out;
}

/* Add a custom dropdown arrow using a pseudo‐element */
.autospin-select::-ms-expand { display: none; } /* hide IE arrow */

.autospin-select::after {
  content: "▼";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #00e5ff;
  font-size: 0.8rem;
  text-shadow: 
    0 0 4px rgba(0, 229, 255, 0.5);
}

.autospin-select:hover,
.autospin-select:focus {
  outline: none;
  border-color: #ff3ebf;  /* neon‐pink on hover/focus */
  box-shadow:
    0 0 8px rgba(255, 62, 191, 0.6),
    inset 0 0 8px rgba(255, 62, 191, 0.3);
}

/* Remove default focus ring in Firefox */
.autospin-select:focus {
  box-shadow:
    0 0 8px rgba(255, 62, 191, 0.6),
    inset 0 0 8px rgba(255, 62, 191, 0.3);
}

/* ─── AUTO-SPIN BUTTON ─── */
.autospin-btn {
  padding: 8px 18px;
  font-family: "Press Start 2P", cursive;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #0f0f10;                      /* dark text so neon background pops */
  background: linear-gradient(
    135deg,
    rgba(255, 62, 191, 0.8),            /* neon‐pink */
    rgba(0, 229, 255, 0.8)              /* neon‐cyan */
  );
  border: 2px solid #ff3ebf;           /* neon‐pink outline */
  border-radius: 8px;
  cursor: pointer;
  box-shadow:
    0 4px 12px rgba(255, 62, 191, 0.4),
    inset 0 -2px 6px rgba(0, 0, 0, 0.15),
    inset 0 4px 8px rgba(255, 255, 255, 0.2);
  transition: all 0.2s ease-in-out;
  position: relative;
  overflow: hidden;
}

.autospin-btn:hover {
  color: #e3e3e5;                      /* lighten text on hover */
  background: linear-gradient(
    135deg,
    rgba(255, 62, 191, 1.0),
    rgba(0, 229, 255, 1.0)
  );
  box-shadow:
    0 6px 18px rgba(255, 62, 191, 0.6),
    inset 0 -2px 6px rgba(0, 0, 0, 0.2),
    inset 0 4px 8px rgba(255, 255, 255, 0.3);
  transform: translateY(-2px) scale(1.02);
}

.autospin-btn:active {
  transform: translateY(0px) scale(1.00);
  box-shadow:
    0 2px 8px rgba(255, 62, 191, 0.4),
    inset 0 -2px 6px rgba(0, 0, 0, 0.2),
    inset 0 4px 8px rgba(255, 255, 255, 0.15);
}

.autospin-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  box-shadow: none;
  background: rgba(100, 100, 100, 0.4);
  border-color: rgba(100, 100, 100, 0.6);
  color: #444;
}

/* ──────────────────────────────────────────────────────────────────────────
   END OF AUTO-SPIN STYLES
   ────────────────────────────────────────────────────────────────────────── */

/* Win Counters Styling */
.win-counters {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
  gap: 20px;
}

.count-up {
  text-align: center;
  padding: 10px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  border: 2px solid var(--accent-electric);
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.2);
  flex: 1;
}

.counter-count {
  font-family: var(--font-family);
  font-size: 2rem;
  font-weight: bold;
  color: var(--highlight-neon);
  text-shadow: 
    0 0 5px var(--highlight-neon),
    0 0 10px var(--highlight-neon),
    0 0 15px var(--highlight-neon);
  margin: 0;
  padding: 0;
  transition: all 0.3s ease;
}

.count-up h3 {
  font-family: var(--font-family-sans);
  font-size: 0.9rem;
  color: var(--light-gray);
  margin: 5px 0 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Adjust game-info padding to accommodate counters */
.game-info {
  padding: 20px;
}

.nav-link {
    color: #ffffff;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 5px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.nav-link:hover {
    color: #ffffff;
    background: rgba(0, 229, 255, 0.1);
}

.nav-link.active {
    color: #ffffff;
    background: rgba(255, 62, 191, 0.1);
}

.nav-link.active:hover {
    color: #ffffff;
    background: rgba(255, 62, 191, 0.15);
}

/* Update result display colors */
.result-display.win {
    color: #ffffff;
    font-size: 1.15rem;
    animation: none;
}

.result-display.mega-win {
    background: linear-gradient(135deg, 
        rgba(220, 210, 180, 0.7) 0%, 
        rgba(200, 180, 160, 0.7) 25%,
        rgba(180, 160, 180, 0.7) 50%,
        rgba(160, 180, 200, 0.7) 75%,
        rgba(180, 200, 180, 0.7) 100%
    ) !important;
    border: 2px solid rgba(180, 160, 140, 0.8) !important;
    font-size: 16px !important;
    font-weight: bold !important;
    border-radius: 12px !important;
    padding: 12px 20px !important;
    box-shadow: 
        0 0 20px rgba(180, 160, 140, 0.3),
        0 0 35px rgba(160, 140, 160, 0.2),
        inset 0 0 15px rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
}

/* ───── Override for SOL/USD counters ───── */
#counter-sol,
#counter-usd {
    color: #e3e3e5 !important;      /* plain light-gray/white text */
    text-shadow: none !important;    /* remove any neon/pink glow */
    filter: none !important;         /* remove any accidental blur */
}

/* Target the top-screen prize pool text and force it to white */
.top-prize-pool .pool-display {
    /* Remove any gradient/text-clip behavior: */
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;

    /* Force the text itself to solid white: */
    color: #ffffff !important;
    text-shadow: none !important;
}

/* Enhanced Audio Buttons for Top Right Controls */
.audio-btn {
    width: 45px;
    height: 45px;
    border: 2px solid rgba(0, 229, 255, 0.6);
    border-radius: 50%;
    background: linear-gradient(135deg, 
        rgba(255, 62, 191, 0.8) 0%, 
        rgba(0, 229, 255, 0.6) 100%);
    color: #ffffff;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 0 15px rgba(0, 229, 255, 0.5),
        inset 0 0 10px rgba(255, 255, 255, 0.2);
    animation: audioButtonBounce 4s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

@keyframes audioButtonBounce {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 
            0 0 15px rgba(0, 229, 255, 0.5),
            inset 0 0 10px rgba(255, 255, 255, 0.2);
    }
    50% { 
        transform: scale(1.08);
        box-shadow: 
            0 0 25px rgba(0, 229, 255, 0.8),
            0 0 35px rgba(255, 62, 191, 0.6),
            inset 0 0 15px rgba(255, 255, 255, 0.3);
    }
}

.audio-btn:hover {
    transform: scale(1.15);
    background: linear-gradient(135deg, 
        rgba(0, 229, 255, 0.9) 0%, 
        rgba(255, 62, 191, 0.7) 100%);
    border-color: rgba(255, 62, 191, 0.8);
    box-shadow: 
        0 0 30px rgba(0, 229, 255, 0.8),
        0 0 45px rgba(255, 62, 191, 0.6),
        inset 0 0 20px rgba(255, 255, 255, 0.4);
}

.audio-btn:active {
    transform: scale(0.95);
    box-shadow: 
        0 0 10px rgba(0, 229, 255, 0.6),
        inset 0 0 15px rgba(0, 0, 0, 0.2);
}

/* Muted state styling */
.audio-btn.muted {
    background: linear-gradient(135deg, #555 0%, #777 100%);
    border-color: #666;
    box-shadow: 
        0 0 8px rgba(102, 102, 102, 0.4),
        inset 0 0 8px rgba(0, 0, 0, 0.3);
    animation: none;
}

.audio-btn.muted .audio-icon {
    opacity: 0.6;
    position: relative;
}

.audio-btn.muted .audio-icon::after {
    content: "🚫";
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 10px;
    opacity: 0.9;
}

.audio-btn.muted:hover {
    background: linear-gradient(135deg, #666 0%, #888 100%);
    transform: scale(1.1);
}

/* Different delay for music vs sound button bounce */
.sound-btn {
    animation-delay: 2s;
}

.audio-icon {
    display: block;
    animation: iconTwinkle 3s ease-in-out infinite;
}

@keyframes iconTwinkle {
    0%, 100% { 
        opacity: 1;
        text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
    }
    50% { 
        opacity: 0.85;
        text-shadow: 0 0 15px rgba(255, 255, 255, 1);
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   TOP RIGHT AUDIO CONTROLS - Enhanced with Volume Sliders
   ────────────────────────────────────────────────────────────────────────── */

.bottom-audio-controls {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 15px;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 2px solid rgba(0, 229, 255, 0.3);
    border-radius: 15px;
    padding: 20px 15px;
    margin-top: 15px;
    box-shadow: 
        0 0 25px rgba(0, 229, 255, 0.4),
        inset 0 0 15px rgba(255, 255, 255, 0.1);
}

.audio-control-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 120px;
}

.volume-label {
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    color: #ffffff;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    letter-spacing: 1px;
    text-align: center;
}

.volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100px;
    height: 6px;
    background: linear-gradient(90deg, 
        rgba(255, 62, 191, 0.3) 0%, 
        rgba(0, 229, 255, 0.5) 100%);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: linear-gradient(135deg, #ff3ebf 0%, #00e5ff 100%);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 
        0 0 10px rgba(255, 62, 191, 0.7),
        0 0 20px rgba(0, 229, 255, 0.5);
    transition: all 0.3s ease;
}

.volume-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 
        0 0 15px rgba(255, 62, 191, 0.9),
        0 0 30px rgba(0, 229, 255, 0.7);
}

.volume-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: linear-gradient(135deg, #ff3ebf 0%, #00e5ff 100%);
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 
        0 0 10px rgba(255, 62, 191, 0.7),
        0 0 20px rgba(0, 229, 255, 0.5);
}

.volume-slider:hover {
    background: linear-gradient(90deg, 
        rgba(255, 62, 191, 0.5) 0%, 
        rgba(0, 229, 255, 0.7) 100%);
    transform: scale(1.05);
}

/* Mobile responsiveness for bottom audio controls */
@media (max-width: 768px) {
    .bottom-audio-controls {
        padding: 15px 10px;
        gap: 12px;
        margin-top: 10px;
    }
    
    .audio-control-item {
        min-width: 100px;
        gap: 6px;
    }
    
    .audio-btn {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }
    
    .volume-slider {
        width: 80px;
        height: 5px;
    }
    
    .volume-slider::-webkit-slider-thumb {
        width: 12px;
        height: 12px;
    }
    
    .volume-label {
        font-size: 8px;
    }
}

@media (max-width: 480px) {
    .bottom-audio-controls {
        padding: 12px 8px;
        gap: 10px;
        margin-top: 8px;
    }
    
    .audio-control-item {
        min-width: 80px;
        gap: 5px;
    }
    
    .audio-btn {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }
    
    .volume-slider {
        width: 60px;
        height: 4px;
    }
    
    .volume-slider::-webkit-slider-thumb {
        width: 10px;
        height: 10px;
    }
    
    .volume-label {
        font-size: 7px;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   CRYPTO CASINO INTEGRATION STYLES
   ────────────────────────────────────────────────────────────────────────── */

/* Wallet Section in Top Bar */
.wallet-section {
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
}

.wallet-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: linear-gradient(135deg, var(--accent-mint) 0%, var(--accent-blue) 100%);
    border: 2px solid var(--accent-cyan);
    border-radius: 8px;
    color: #ffffff;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 
        0 0 15px rgba(0, 229, 255, 0.4),
        inset 0 0 10px rgba(255, 255, 255, 0.1);
}

.wallet-btn:hover:not(:disabled) {
    transform: scale(1.05);
    box-shadow: 
        0 0 25px rgba(0, 229, 255, 0.6),
        0 0 40px rgba(162, 155, 254, 0.4),
        inset 0 0 15px rgba(255, 255, 255, 0.2);
}

.wallet-btn:disabled {
    opacity: 0.8;
    cursor: not-allowed;
    background: linear-gradient(135deg, #4a9 0%, #48c 100%);
}

.wallet-icon {
    font-size: 16px;
}

.wallet-info .disconnect-wallet-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    border: 2px solid #e74c3c;
    border-radius: 8px;
    color: #ffffff;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 8px;
    width: 100%;
    box-shadow: 
        0 0 10px rgba(231, 76, 60, 0.4),
        inset 0 0 8px rgba(255, 255, 255, 0.1);
}

.disconnect-wallet-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    border: 2px solid #e74c3c;
    border-radius: 6px;
    color: #ffffff;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 8px;
    box-shadow: 
        0 0 10px rgba(231, 76, 60, 0.4),
        inset 0 0 8px rgba(255, 255, 255, 0.1);
}

.wallet-info .disconnect-wallet-btn:hover {
    transform: scale(1.02);
    background: linear-gradient(135deg, #c0392b 0%, #a93226 100%);
    box-shadow: 
        0 0 15px rgba(231, 76, 60, 0.6),
        0 0 25px rgba(231, 76, 60, 0.4),
        inset 0 0 12px rgba(255, 255, 255, 0.2);
}

.disconnect-wallet-btn:hover {
    transform: scale(1.05);
    background: linear-gradient(135deg, #c0392b 0%, #a93226 100%);
    box-shadow: 
        0 0 20px rgba(231, 76, 60, 0.6),
        0 0 30px rgba(231, 76, 60, 0.4),
        inset 0 0 12px rgba(255, 255, 255, 0.2);
}

.disconnect-wallet-btn .wallet-icon {
    font-size: 14px;
}

.disconnect-wallet-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
    background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
    border-color: #95a5a6;
    box-shadow: none;
}

.wallet-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    color: #ffffff;
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.wallet-address {
    font-weight: 600;
    color: var(--accent-cyan);
    text-shadow: 0 0 5px rgba(0, 229, 255, 0.5);
}

.token-balance {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: 11px;
}

.token-balance .label {
    color: var(--accent-mint);
    opacity: 0.9;
}

.token-balance span:not(.label) {
    font-weight: 600;
    color: #ffffff;
}

.spin-count {
    font-weight: 500;
    color: var(--accent-mint);
    text-shadow: 0 0 5px rgba(116, 185, 255, 0.5);
}

/* Crypto Wins Box */
.crypto-wins-box {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    border: 2px solid var(--accent-cyan);
    border-radius: 15px;
    padding: 15px 20px;
    width: 220px;
    margin-top: 20px;
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.3);
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    color: #ffffff;
    position: relative;
    z-index: 2;
}

.crypto-wins-box h3 {
    margin-bottom: 12px;
    color: var(--accent-cyan);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.6);
}

.crypto-wins-feed {
    max-height: 150px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-cyan) transparent;
}

.crypto-wins-feed::-webkit-scrollbar {
    width: 6px;
}

.crypto-wins-feed::-webkit-scrollbar-track {
    background: transparent;
}

.crypto-wins-feed::-webkit-scrollbar-thumb {
    background: var(--accent-cyan);
    border-radius: 3px;
}

.crypto-win-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 12px;
    margin-bottom: 8px;
    background: rgba(0, 229, 255, 0.1);
    border: 1px solid rgba(0, 229, 255, 0.2);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.crypto-win-item:hover {
    background: rgba(0, 229, 255, 0.2);
    border-color: rgba(0, 229, 255, 0.4);
    transform: translateX(3px);
}

.crypto-win-item.placeholder {
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
    border-style: dashed;
}

.crypto-win-item.new-crypto-win {
    animation: cryptoWinAppear 0.5s ease-out;
    border-color: var(--accent-mint);
    box-shadow: 0 0 15px rgba(116, 185, 255, 0.5);
}

@keyframes cryptoWinAppear {
    0% {
        opacity: 0;
        transform: translateY(-20px) scale(0.9);
        background: rgba(116, 185, 255, 0.3);
    }
    50% {
        transform: translateY(-5px) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        background: rgba(0, 229, 255, 0.1);
    }
}

.win-wallet {
    font-weight: 600;
    color: var(--accent-cyan);
    font-size: 0.9em;
    letter-spacing: 0.5px;
}

.win-details {
    font-weight: 500;
    color: var(--accent-mint);
    font-size: 0.8em;
    opacity: 0.9;
}

/* Responsive Crypto Styles */
@media (max-width: 768px) {
    .wallet-section {
        gap: 10px;
    }
    
    .wallet-btn {
        padding: 6px 12px;
        font-size: 12px;
    }
    
    .wallet-info {
        font-size: 11px;
    }
    
    .crypto-wins-box {
        width: 200px;
        padding: 12px 16px;
    }
    
    .crypto-wins-box h3 {
        font-size: 0.9em;
    }
}



/* Stat value update animation */
@keyframes statUpdate {
  0% {
    transform: scale(1);
    color: var(--accent-yellow);
  }
  50% {
    transform: scale(1.1);
    color: var(--accent-mint);
  }
  100% {
    transform: scale(1);
    color: var(--accent-yellow);
  }
}

.stat-value.updated {
  animation: statUpdate 0.6s ease-out;
}

/* ──────────────────────────────────────────────────────────────────────── */
/* NOTIFICATION OVERLAY STYLES */
/* ──────────────────────────────────────────────────────────────────────── */
.notification-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    display: none !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 999999 !important;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.notification-overlay.show {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.notification-box {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border-radius: 25px !important;
    padding: 50px 40px !important;
    max-width: 550px !important;
    width: 90% !important;
    text-align: center !important;
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    border: 3px solid rgba(255, 255, 255, 0.3) !important;
    position: relative !important;
    transform: scale(0.8);
    animation: notificationPopIn 0.4s ease forwards;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

.notification-icon {
    font-size: 80px !important;
    margin-bottom: 25px !important;
    display: block !important;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5) !important;
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.3)) !important;
}

.notification-title {
    font-size: 32px !important;
    font-weight: bold !important;
    color: white !important;
    margin-bottom: 20px !important;
    text-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(255, 255, 255, 0.3) !important;
    font-family: 'Press Start 2P', monospace !important;
    letter-spacing: 2px !important;
}

.notification-message {
    font-size: 20px !important;
    color: rgba(255, 255, 255, 0.95) !important;
    margin-bottom: 35px !important;
    line-height: 1.6 !important;
    font-family: 'Poppins', sans-serif !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.notification-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.notification-btn {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1)) !important;
    border: 3px solid rgba(255, 255, 255, 0.4) !important;
    color: white !important;
    padding: 15px 40px !important;
    border-radius: 30px !important;
    font-size: 18px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    font-family: 'Poppins', sans-serif !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}

.notification-btn:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.2)) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    transform: translateY(-3px) scale(1.05) !important;
    box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(255, 255, 255, 0.2) !important;
}

.notification-btn:active {
    transform: translateY(-1px) scale(1.02) !important;
}

@keyframes notificationPopIn {
    0% { 
        opacity: 0; 
        transform: scale(0.5) translateY(-100px); 
        filter: blur(10px);
    }
    50% { 
        opacity: 0.8; 
        transform: scale(1.1) translateY(20px); 
        filter: blur(2px);
    }
    100% { 
        opacity: 1; 
        transform: scale(1) translateY(0); 
        filter: blur(0);
    }
}

@keyframes notificationGlow {
    0%, 100% { 
        box-shadow: 
            0 25px 50px rgba(0, 0, 0, 0.5),
            0 0 0 1px rgba(255, 255, 255, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
    50% { 
        box-shadow: 
            0 25px 50px rgba(0, 0, 0, 0.5),
            0 0 30px rgba(255, 255, 255, 0.3),
            0 0 0 1px rgba(255, 255, 255, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }
}

/* Special warning notification style */
.notification-box.warning {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 40%, #d63031 100%) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    animation: notificationPopIn 0.4s ease forwards, notificationGlow 2s ease-in-out infinite !important;
}

.notification-box.warning .notification-icon {
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.6)) !important;
    color: #ffffff !important;
}

.notification-box.warning .notification-title {
    color: #ffffff !important;
    text-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.6),
        0 0 25px rgba(255, 255, 255, 0.4) !important;
}

/* Success notification style */
.notification-box.success {
    background: linear-gradient(135deg, #00b894 0%, #00a085 40%, #008f7a 100%) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    animation: notificationPopIn 0.4s ease forwards, notificationGlow 2s ease-in-out infinite !important;
}

.notification-box.success .notification-icon {
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.6)) !important;
    color: #ffffff !important;
}

.notification-box.success .notification-title {
    color: #ffffff !important;
    text-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.6),
        0 0 25px rgba(255, 255, 255, 0.4) !important;
}

/* Mobile responsiveness for notifications */
@media (max-width: 768px) {
    .notification-box {
        padding: 30px 20px;
        margin: 20px;
    }
    
    .notification-icon {
        font-size: 50px;
        margin-bottom: 15px;
    }
    
    .notification-title {
        font-size: 22px;
        margin-bottom: 12px;
    }
    
    .notification-message {
        font-size: 16px;
        margin-bottom: 25px;
    }
    
    .notification-btn {
        padding: 10px 25px;
        font-size: 14px;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   1. EXPAND THE RIGHT COLUMN (PAYOUTS) SO PERCENTAGES NO LONGER TRUNCATE
───────────────────────────────────────────────────────────────────────────── */
.right-column {
  flex: 0 0 360px !important; /* was 340px; bump up to 360px */
}

.payouts-box {
  width: 100%;            /* fills the 360px parent */
  max-width: 360px !important;
}

/* Let the percentage text go out to 100px instead of 80px */
.payouts-box .symbol-payout {
  max-width: 100px;       /* allows "0.005%" or "100%" to fit */
}

/* Optional: reduce row padding slightly to give even more room for text */
.payouts-box .symbols-row {
  padding: 8px 6px 8px 10px; /* top/right/bottom/left */
}

/* ─────────────────────────────────────────────────────────────────────────────
   2. FIX THE TOP BAR (PRIZE POOL + CONNECT WALLET)  
───────────────────────────────────────────────────────────────────────────── */
.top-prize-wallet-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #ffd700, #ff3ebf);
  padding: 6px 12px;
  color: #fff;
  font-family: "Poppins", sans-serif;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  margin-top: 150px !important;      /* FORCE move down - override all other rules */
  z-index: 50;
}

/* ─────────────────────────────────────────────────────────────────────────────
   NEW TOP BAR (Above Meme Bonanza Title)
───────────────────────────────────────────────────────────────────────────── */
.new-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #ffd700, #ff3ebf);
  padding: 8px 16px;
  color: #fff;
  font-family: "Poppins", sans-serif;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  border-radius: 10px;
  position: fixed;
  top: 150px;
  right: 400px;
  width: 600px;
  z-index: 9999 !important;  /* FORCE overlap over slot machine */
}

/* Funding Wallet Display */
.funding-wallet-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.funding-title {
  font-size: 0.7rem;
  font-weight: 600;
  color: #00e5ff;
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.funding-address {
  font-family: 'Courier New', monospace;
  font-size: 0.65rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  padding: 3px 6px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  word-break: break-all;
  text-align: center;
  border: 1px solid rgba(0, 229, 255, 0.3);
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
}

.funding-address:hover {
  background: rgba(0, 229, 255, 0.2);
  border-color: rgba(0, 229, 255, 0.6);
  color: #00e5ff;
  transform: scale(1.02);
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.4);
}

/* Simple How it Works Popup */
.how-it-works-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  backdrop-filter: blur(5px);
}

.how-it-works-popup.show {
  display: flex;
}

.popup-content {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 20px;
  padding: 30px;
  max-width: 600px;
  width: 90%;
  text-align: center;
  color: #fff;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.2);
  position: relative;
  animation: popupAppear 0.3s ease-out;
}

@keyframes popupAppear {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(-50px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.popup-content h2 {
  font-size: 2rem;
  margin-bottom: 20px;
  color: #ffd700;
  text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}

.popup-content p {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 15px;
  color: #fff;
}

.popup-content p:last-child {
  margin-bottom: 0;
}

.popup-close {
  position: absolute;
  top: 15px;
  right: 20px;
  background: none;
  border: none;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.popup-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

/* ─────────────────────────────────────────────────────────────────────────────
   NEW NAVIGATION BAR (Below Meme Bonanza Title)
───────────────────────────────────────────────────────────────────────────── */
.new-navigation {
  margin: 30px auto;
  max-width: 800px;
  position: relative;
  z-index: 150;
}

.top-prize-wallet-bar .pool-display {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.top-prize-wallet-bar .pool-title {
  font-size: 1rem;
  font-weight: bold;
}

.top-prize-wallet-bar .pool-amounts {
  display: flex;
  align-items: baseline;
  font-size: 1.2rem;
  margin-top: 4px;
}

.top-prize-wallet-bar .pool-sol {
  font-weight: bold;
}

.top-prize-wallet-bar .pool-divider {
  margin: 0 8px;
  font-size: 1.2rem;
}

.top-prize-wallet-bar .pool-usd {
  font-weight: bold;
}

/* Connect wallet */
.top-prize-wallet-bar .wallet-section {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  position: relative;
}

.wallet-btn {
  background: #00e5ff;
  color: #000;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-family: "Poppins", sans-serif;
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.wallet-btn:hover {
  opacity: 0.9;
}

.wallet-info {
  position: fixed;
  top: 140px;
  right: 20px;
  background: rgba(0, 0, 0, 0.95);
  border: 2px solid rgba(0, 229, 255, 0.8);
  border-radius: 12px;
  padding: 12px;
  width: 280px;
  color: #fff;
  font-size: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 1000;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
}

.wallet-info .wallet-address {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.7rem;
  color: #00e5ff;
  text-align: center;
  padding: 8px;
  background: rgba(0, 229, 255, 0.1);
  border-radius: 8px;
  border: 1px solid rgba(0, 229, 255, 0.3);
  word-break: break-all;
  line-height: 1.3;
  margin-bottom: 6px;
}

.wallet-info .token-balance,
.wallet-info .spin-count,
.wallet-info .total-earnings,
.wallet-info .refresh-timer {
  display: flex;
  justify-content: space-between;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.65rem;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  border-left: 3px solid #00e5ff;
}

.wallet-info .token-balance .label,
.wallet-info .spin-count .label {
  color: #00e5ff;
  font-weight: bold;
}

.wallet-info .token-balance span:not(.label),
.wallet-info .spin-count span:not(.label) {
  color: #fff;
  font-weight: bold;
}

.wallet-info .total-earnings {
  border-left-color: #ffd700;
}

.wallet-info .total-earnings .label {
  color: #ffd700;
  font-weight: bold;
}

.wallet-info .total-earnings span:not(.label) {
  color: #fff;
  font-weight: bold;
  text-shadow: 0 0 5px rgba(255, 215, 0, 0.8);
}

.wallet-info .refresh-timer {
  border-left-color: #ff6b6b;
}

.wallet-info .refresh-timer .label {
  color: #ff6b6b;
  font-weight: bold;
}

.wallet-info .refresh-timer span:not(.label) {
  color: #fff;
  font-weight: bold;
  text-shadow: 0 0 5px rgba(255, 107, 107, 0.8);
}

/* ─────────────────────────────────────────────────────────────────────────────
   3. ENLARGE & RESTYLE LIVE CRYPTO WINS  
───────────────────────────────────────────────────────────────────────────── */
.crypto-wins-box {
  background: rgba(20, 20, 20, 0.9);
  border-radius: 10px;
  padding: 12px;
  color: #fff;
  font-family: "Poppins", sans-serif;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
  margin-right: 16px;
  /* Make it taller so many wins can show up */
  height: 360px;       /* was around 260px, now bigger */
  display: flex;
  flex-direction: column;
}

.crypto-wins-box h3 {
  font-size: 1rem;
  margin-bottom: 8px;
  text-align: center;
  color: #00e5ff;
}

/* Scrollable feed area */
.crypto-wins-feed {
  flex: 1;               /* fill the remaining height */
  overflow-y: auto;
  padding-right: 4px;    /* allow space for scrollbar */
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Each win item */
.crypto-win-item {
  background: rgba(40, 40, 40, 0.8);
  border: 1px solid rgba(0, 229, 255, 0.3);
  border-radius: 6px;
  padding: 6px 10px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  overflow: hidden;
}

/* Three columns: wallet / SOL / USD */
.crypto-win-item .win-wallet {
  color: #ffd700;
  font-family: 'Press Start 2P', monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crypto-win-item .win-sol,
.crypto-win-item .win-usd {
  text-align: right;
  font-weight: bold;
  white-space: nowrap;
  color: #00ff00;
}

/* Placeholder item styling */
.crypto-win-item.placeholder {
  justify-content: center;
  font-size: 0.85rem;
  color: #aaa;
  grid-template-columns: 1fr; /* single‐column placeholder */
}

/* If too many items, fade at bottom (optional) */
.crypto-wins-feed::after {
  content: "";
  pointer-events: none;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: linear-gradient(transparent, rgba(20,20,20,0.9));
}

/* ─────────────────────────────────────────────────────────────────────────────
   4. ADJUST RESPONSIVE BREAKPOINTS IF NEEDED
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .right-column {
    flex: 0 0 320px !important;
  }
  .payouts-box {
    max-width: 320px !important;
  }
  .crypto-wins-box {
    height: 300px;
    margin-right: 8px;
  }
  .wallet-info {
    width: 180px;
  }
}
@media (max-width: 768px) {
  .top-prize-wallet-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .right-column {
    flex: 0 0 240px !important;
  }
  .payouts-box {
    max-width: 240px !important;
  }
  .crypto-wins-box {
    height: 240px;
    margin-right: 0;
  }
  .wallet-info {
    width: 260px;
    right: 10px;
    top: 40px;
  }
  .top-prize-wallet-bar .wallet-section {
    align-items: flex-start;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   1. WIDEN THE PAYOUTS COLUMN & BOX TO 400px
───────────────────────────────────────────────────────────────────────────── */
.right-column {
  flex: 0 0 400px !important;   /* was 360px; bump to 400px for extra room */
}

.payouts-box {
  width: 100%;
  max-width: 400px !important;  /* match the parent column */
}

/* ─────────────────────────────────────────────────────────────────────────────
   2. ALLOW FULL DECIMALS FOR EACH PERCENTAGE (NO MORE "0.00…") 
───────────────────────────────────────────────────────────────────────────── */
/* Option A: Remove overflow and ellipsis entirely, allowing the text to be as long as it needs */
.payouts-box .symbol-payout {
  flex: 0 0 auto;       /* don't stretch or shrink */
  max-width: none !important; /* remove any width cap */
  white-space: nowrap;  /* keep it on one line */
  overflow: visible !important; /* allow it to flow */
  text-overflow: clip !important; /* do not show "…" */
  color: #74b9ff;
  font-size: 0.95rem;
  font-weight: bold;
  margin-left: 8px;
  text-align: right;
}

/* 
Option B (alternative): if you still want a max-width but very large (e.g. 120px),
uncomment the block below and comment out the "Option A" above.

.payouts-box .symbol-payout {
  flex: 0 0 auto;
  max-width: 120px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  color: #74b9ff;
  font-size: 0.95rem;
  font-weight: bold;
  margin-left: 8px;
  text-align: right;
}
*/

/* ─────────────────────────────────────────────────────────────────────────────
   3. ADJUST SYMBOLS-ROW PADDING (GIVE IT A BIT MORE BREATHING ROOM)
───────────────────────────────────────────────────────────────────────────── */
.payouts-box .symbols-row {
  padding: 8px 12px 8px 12px; /* top/right/bottom/left: 8px/12px/8px/12px */
  /* "overflow: hidden" can remain to clip anything truly out-of-bounds,
     but the symbol-payout itself will now never exceed the cell width. */
  overflow: hidden;
}

/* === override any blur/text-shadow on the Prize Pool numbers === */
.top-prize-wallet-bar .pool-amounts,
.top-prize-wallet-bar .pool-amounts * {
  /* remove any filter or blur */
  filter: none !important;
  /* remove any unwanted text shadow */
  text-shadow: none !important;
}

/* === make the Live Crypto Wins panel taller and scrollable === */
.crypto-wins-box {
  /* if you want a fixed max-height: */
  max-height: 250px;         /* adjust as needed */
  overflow-y: auto;          /* show scrollbar when content overflows */
}

/* If there's an inner container (e.g. .crypto-wins-feed), you can also target it */
/* (uncomment if needed - remove this comment block and uncomment the rule below) */

/* ─────────────────────────────────────────────────────────────────────────────
   1. MAKE PRIZE POOL TEXT READABLE AGAIN - AGGRESSIVE OVERRIDES
───────────────────────────────────────────────────────────────────────────── */
/* Override the Prize Pool label & amount to a dark color - try multiple selectors */
.top-prize-wallet-bar,
.top-prize-wallet-bar *,
.top-prize-pool,
.top-prize-pool *,
.pool-display,
.pool-display *,
.pool-title,
.pool-amounts,
.pool-amounts *,
.pool-sol,
.pool-usd,
.pool-divider {
  color: #000 !important;
  text-shadow: none !important;
  filter: none !important;
  -webkit-text-fill-color: #000 !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
}

/* Nuclear option - override ANY element containing prize pool text */
[class*="prize"],
[class*="pool"],
[id*="prize"],
[id*="pool"] {
  color: #000 !important;
  text-shadow: none !important;
  filter: none !important;
  -webkit-text-fill-color: #000 !important;
}

/* Direct text content targeting */
.pool-title,
.pool-amounts span,
#top-pool-amount,
#top-pool-usd {
  color: #000 !important;
  text-shadow: none !important;
  filter: none !important;
  -webkit-text-fill-color: #000 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   2. FIX LIVE CRYPTO WINS PANEL APPEARANCE AND SIZING
───────────────────────────────────────────────────────────────────────────── */
/* OPTIMIZED: Make the Live Crypto Wins panel fit properly on screen */
.crypto-wins-box {
  width: 320px !important;        /* optimal width for screen fit */
  min-width: 320px !important;    /* force minimum width */
  max-width: 320px !important;    /* ensure consistent width */
  height: 400px !important;       /* taller height to show more wins */
  max-height: 400px !important;   /* cap the height */
  overflow-y: auto !important;    /* force a scrollbar if it overflows */
  margin: 15px !important;        /* reduced margins for better fit */
  border: 3px solid #00e5ff !important; /* stronger border */
  border-radius: 15px !important; /* rounder corners */
  background: rgba(10, 10, 15, 0.98) !important; /* even darker background */
  box-shadow: 0 0 30px rgba(0, 229, 255, 0.6) !important; /* stronger glow */
  position: relative !important;  /* ensure it's positioned correctly */
  z-index: 100 !important;        /* bring it to front */
  flex-shrink: 0 !important;      /* prevent it from shrinking */
  flex-grow: 0 !important;        /* prevent it from growing */
}

/* Override any parent container constraints */
.crypto-wins-box {
  display: block !important;      /* force block display */
  float: none !important;         /* remove any float */
  clear: both !important;         /* clear any floats */
}

/* NUCLEAR OPTION: Override ANY container that might be constraining the crypto wins */
div[class*="crypto"],
section[class*="crypto"],
.monitor-content .crypto-wins-box,
.monitor-content > .crypto-wins-box {
  width: 320px !important;
  min-width: 320px !important;
  max-width: 320px !important;
  flex-basis: 320px !important;
}

/* EXPAND THE ARCADE MONITOR TO FIT EVERYTHING */
.arcade-monitor {
  width: 100% !important;
  max-width: 1400px !important;  /* increased from default */
  min-width: 1200px !important;  /* ensure minimum width */
  margin: 0 auto !important;     /* center it */
  padding: 20px !important;      /* more internal space */
}

/* EXPAND THE MONITOR CONTENT AREA */
.monitor-content {
  width: 100% !important;
  max-width: none !important;    /* remove width restrictions */
  display: flex !important;      /* ensure flex layout */
  justify-content: space-between !important; /* spread out elements */
  align-items: flex-start !important; /* align to top */
  gap: 20px !important;          /* space between sections */
  padding: 15px !important;      /* internal padding */
}

/* MAKE THE SLOT AREA MORE COMPACT TO FIT WITH EXPANDED SIDES */
.slot-area {
  flex: 1 !important;            /* take remaining space */
  max-width: 600px !important;   /* limit slot area width */
  min-width: 500px !important;   /* minimum slot area width */
}

/* ENSURE PAYOUTS BOX FITS PROPERLY */
.payouts-box {
  width: 400px !important;       /* maintain the expanded width we set earlier */
  max-width: 400px !important;
  flex-shrink: 0 !important;     /* don't let it shrink */
}

/* SCALE THE MONITOR HEADER TO MATCH EXPANDED LAYOUT */
.monitor-header {
  width: 100% !important;
  max-width: none !important;
  padding: 15px 20px !important; /* more padding for wider layout */
  margin-bottom: 20px !important;
}

.monitor-header h1 {
  font-size: 1.8rem !important;  /* slightly larger for expanded layout */
  letter-spacing: 2px !important; /* more spacing for dramatic effect */
}

/* Clean header styling for crypto wins (remove test content) */
.crypto-wins-box::before {
  display: none !important; /* Remove the test header */
}

/* AGGRESSIVE FIX: Fix the feed container inside */
.crypto-wins-feed {
  height: calc(100% - 60px) !important; /* fill remaining space after header */
  width: 100% !important;               /* full width */
  overflow-y: auto !important;          /* scrollable */
  overflow-x: hidden !important;        /* hide horizontal scroll */
  padding: 12px !important;             /* more padding */
  display: flex !important;             /* flex layout */
  flex-direction: column !important;    /* vertical stacking */
  gap: 8px !important;                  /* space between items */
  box-sizing: border-box !important;    /* include padding in size */
}

/* Ensure scrollbar is visible and styled */
.crypto-wins-feed::-webkit-scrollbar {
  width: 8px !important;
}

.crypto-wins-feed::-webkit-scrollbar-track {
  background: rgba(0, 229, 255, 0.1) !important;
  border-radius: 4px !important;
}

.crypto-wins-feed::-webkit-scrollbar-thumb {
  background: rgba(0, 229, 255, 0.5) !important;
  border-radius: 4px !important;
}

.crypto-wins-feed::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 229, 255, 0.8) !important;
}

/* AGGRESSIVE FIX: Better styling for individual win items */
.crypto-win-item {
  width: 100% !important;                /* full width */
  margin: 0 0 10px 0 !important;         /* consistent margins */
  padding: 10px 12px !important;         /* more padding */
  background: rgba(0, 229, 255, 0.12) !important; /* more visible background */
  border: 2px solid rgba(0, 229, 255, 0.3) !important; /* stronger border */
  border-radius: 10px !important;        /* rounder corners */
  font-size: 0.85rem !important;         /* larger font */
  box-sizing: border-box !important;     /* include padding/border in width */
  display: grid !important;              /* always use grid */
  min-height: 40px !important;           /* minimum height for visibility */
}

/* Make sure the grid layout works properly for all items */
.crypto-win-item:not(.placeholder) {
  grid-template-columns: 1.2fr 1fr 1fr !important; /* better proportions */
  gap: 10px !important;                  /* larger gaps */
  align-items: center !important;        /* center content */
}

/* Style placeholder differently */
.crypto-win-item.placeholder {
  grid-template-columns: 1fr !important; /* single column for placeholder */
  justify-items: center !important;       /* center the text */
  font-style: italic !important;          /* italic text */
  color: rgba(255, 255, 255, 0.6) !important; /* muted color */
}

/* Better header styling for crypto wins */
.crypto-wins-box h3 {
  font-size: 1rem !important;
  margin: 0 0 12px 0 !important;
  padding: 8px !important;
  text-align: center !important;
  color: #00e5ff !important;
  text-shadow: 0 0 10px rgba(0, 229, 255, 0.6) !important;
  border-bottom: 2px solid rgba(0, 229, 255, 0.3) !important;
  background: rgba(0, 229, 255, 0.05) !important;
}

/* Ensure consistent styling for win amounts */
.crypto-win-item .win-sol,
.crypto-win-item .win-usd {
  text-align: right !important;
  font-weight: bold !important;
  color: #00ff00 !important;
  font-size: 0.75rem !important;
}

.crypto-win-item .win-wallet {
  color: #ffd700 !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 0.7rem !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* COMPREHENSIVE RESPONSIVE ADJUSTMENTS */
@media (max-width: 1400px) {
  .arcade-monitor {
    max-width: 1200px !important;
    min-width: 1000px !important;
  }
  
  .crypto-wins-box {
    width: 280px !important;
    max-width: 280px !important;
    height: 350px !important;
  }
  
  .payouts-box {
    width: 360px !important;
    max-width: 360px !important;
  }
}

@media (max-width: 1200px) {
  .arcade-monitor {
    max-width: 1000px !important;
    min-width: 900px !important;
  }
  
  .monitor-content {
    flex-direction: column !important;
    align-items: center !important;
  }
  
  .crypto-wins-box {
    width: 260px !important;
    max-width: 260px !important;
    height: 300px !important;
  }
  
  .payouts-box {
    width: 320px !important;
    max-width: 320px !important;
  }
  
  .slot-area {
    max-width: none !important;
    width: 100% !important;
  }
}

@media (max-width: 768px) {
  .arcade-monitor {
    max-width: 100% !important;
    min-width: auto !important;
    padding: 10px !important;
  }
  
  .crypto-wins-box {
    width: 100% !important;
    max-width: 300px !important;
    height: 250px !important;
    margin: 10px auto !important;
  }
  
  .payouts-box {
    width: 100% !important;
    max-width: 300px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   3. STOP PRIZE POOL BAR FROM COVERING SCREEN DURING SPIN BUILDUP
───────────────────────────────────────────────────────────────────────────── */
/* Option A: Lower the Prize Pool z-index so spin overlay sits on top */
.top-prize-wallet-bar {
  position: relative; 
  z-index: 1; /* keep it behind the spin overlay */
}

/* Ensure spin overlay and related elements have higher z-index */
.spin-overlay,
.spin-overlay *,
.slot-focus-container.focused,
.slot-focus-container.focused * {
  z-index: 10 !important; /* ensure the spin animation sits above */
}

/* Option B: Hide Prize Pool while spinning (uncomment if preferred) */
/*
.spinning .top-prize-wallet-bar,
.slot-focus-container.focused ~ .top-prize-wallet-bar {
  display: none !important;
}
*/

/* ═══════════════════════════════════════════════════════════════════════════
   💎 LIVE WINS PANEL - Complete Modern Redesign
══════════════════════════════════════════════════════════════════════════ */

@keyframes panelPulse {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}

@keyframes liveDot {
    0%, 100% { 
        background: radial-gradient(circle, #ff3ebf 0%, #ff0080 100%); 
        box-shadow: 0 0 10px #ff3ebf, 0 0 20px rgba(255, 62, 191, 0.3); 
    }
    50% { 
        background: radial-gradient(circle, #00ff88 0%, #00cc66 100%); 
        box-shadow: 0 0 15px #00ff88, 0 0 30px rgba(0, 255, 136, 0.5); 
    }
}

@keyframes newWinSlide {
    0% { 
        transform: translateY(-150%) scale(0.6) rotateX(-90deg); 
        opacity: 0; 
        filter: blur(8px);
    }
    30% { 
        transform: translateY(-30px) scale(1.1) rotateX(-20deg); 
        opacity: 0.7; 
        filter: blur(3px);
    }
    70% { 
        transform: translateY(5px) scale(1.02) rotateX(5deg); 
        opacity: 0.9; 
        filter: blur(1px);
    }
    100% { 
        transform: translateY(0) scale(1) rotateX(0deg); 
        opacity: 1; 
        filter: blur(0);
    }
}

@keyframes winGlow {
    0%, 100% { 
        opacity: 0.2; 
        transform: scale(0.8) rotate(0deg); 
    }
    50% { 
        opacity: 0.6; 
        transform: scale(1.2) rotate(180deg); 
    }
}

@keyframes avatarSpin {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.1); }
    100% { transform: rotate(360deg) scale(1); }
}

@keyframes megaWinPulse {
    0%, 100% { 
        box-shadow: 
            0 0 30px rgba(255, 215, 0, 0.4),
            0 0 60px rgba(255, 215, 0, 0.2),
            inset 0 0 20px rgba(255, 215, 0, 0.1);
    }
    50% { 
        box-shadow: 
            0 0 50px rgba(255, 215, 0, 0.8),
            0 0 100px rgba(255, 215, 0, 0.4),
            inset 0 0 30px rgba(255, 215, 0, 0.2);
    }
}

@keyframes headerIconFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    33% { transform: translateY(-8px) rotate(120deg); }
    66% { transform: translateY(-4px) rotate(240deg); }
}

@keyframes counterUpdate {
    0% { transform: scale(1); color: #74b9ff; }
    50% { transform: scale(1.15); color: #00ff88; text-shadow: 0 0 15px #00ff88; }
    100% { transform: scale(1); color: #74b9ff; }
}

@keyframes shimmer {
    0% { left: -100%; }
    50% { left: 100%; }
    100% { left: -100%; }
}

.live-wins-panel {
    background: linear-gradient(145deg, 
        rgba(8, 8, 20, 0.98) 0%,
        rgba(18, 12, 32, 0.96) 25%,
        rgba(25, 15, 40, 0.95) 50%,
        rgba(20, 10, 35, 0.96) 75%,
        rgba(8, 8, 20, 0.98) 100%
    );
    border: 3px solid transparent;
    border-radius: 24px;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.7),
        0 8px 30px rgba(255, 62, 191, 0.15),
        0 4px 15px rgba(0, 229, 255, 0.1),
        inset 0 2px 0 rgba(255, 255, 255, 0.05),
        inset 0 -2px 0 rgba(0, 229, 255, 0.1);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    width: 360px;
    height: 500px;
    font-family: 'Poppins', sans-serif;
    overflow: hidden;
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 5;
}

.live-wins-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        transparent 0%,
        rgba(255, 62, 191, 0.03) 25%,
        rgba(0, 229, 255, 0.03) 75%,
        transparent 100%
    );
    border-radius: 21px;
    pointer-events: none;
}

.live-wins-panel:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 25px 70px rgba(0, 0, 0, 0.8),
        0 10px 40px rgba(255, 62, 191, 0.2),
        0 5px 20px rgba(0, 229, 255, 0.15),
        inset 0 2px 0 rgba(255, 255, 255, 0.08),
        inset 0 -2px 0 rgba(0, 229, 255, 0.15);
}

/* ═══ PANEL HEADER ═══ */
.panel-header {
    background: linear-gradient(135deg, 
        rgba(255, 62, 191, 0.15) 0%,
        rgba(116, 185, 255, 0.1) 50%,
        rgba(0, 229, 255, 0.15) 100%
    );
    border-bottom: 2px solid rgba(255, 62, 191, 0.2);
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    overflow: hidden;
}

.panel-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.1), 
        transparent
    );
    animation: shimmer 3s ease-in-out infinite;
}

.header-icon {
    font-size: 2rem;
    animation: headerIconFloat 4s ease-in-out infinite;
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.5));
}

.header-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.panel-title {
    font-size: 1.4rem;
    font-weight: 700;
    background: linear-gradient(135deg, #ffffff 0%, #74b9ff 50%, #00e5ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 20px rgba(116, 185, 255, 0.3);
}

.win-counter {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
}

.counter-label {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

.counter-value {
    color: #74b9ff;
    font-weight: 700;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.8rem;
    text-shadow: 0 0 10px rgba(116, 185, 255, 0.5);
    transition: all 0.3s ease;
}

.counter-value.updated {
    animation: counterUpdate 0.6s ease;
}

.panel-pulse {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ff3ebf;
    animation: panelPulse 2s ease-in-out infinite;
    box-shadow: 0 0 10px rgba(255, 62, 191, 0.6);
}

/* ═══ WINS STREAM ═══ */
.wins-stream {
    height: 360px;
    overflow-y: auto;
    overflow-x: visible; /* Allow horizontal overflow for expansions */
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    scroll-behavior: smooth;
    position: relative; /* For z-index stacking context */
}

.wins-stream::-webkit-scrollbar {
    width: 6px;
}

.wins-stream::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.wins-stream::-webkit-scrollbar-thumb {
    background: linear-gradient(45deg, #ff3ebf, #00e5ff);
    border-radius: 3px;
    transition: all 0.3s ease;
}

.wins-stream::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(45deg, #ff6b9d, #33f0ff);
    box-shadow: 0 0 10px rgba(255, 62, 191, 0.5);
}

/* ═══ WIN ENTRY ═══ */
.win-entry {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.02) 0%,
        rgba(116, 185, 255, 0.05) 25%,
        rgba(255, 62, 191, 0.03) 75%,
        rgba(255, 255, 255, 0.02) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    overflow: visible; /* Changed from hidden to visible for expansion */
    cursor: pointer;
    z-index: 1; /* Base z-index */
}

.win-entry::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        transparent 0%,
        rgba(255, 62, 191, 0.1) 50%,
        transparent 100%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
}

.win-entry:hover::before {
    opacity: 1;
}

.win-entry:hover {
    transform: translateX(8px) scale(1.02);
    border-color: rgba(255, 62, 191, 0.3);
    box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(255, 62, 191, 0.2);
}

.win-entry.mega {
    border-color: rgba(255, 215, 0, 0.4);
    background: linear-gradient(135deg, 
        rgba(255, 215, 0, 0.1) 0%,
        rgba(255, 62, 191, 0.05) 50%,
        rgba(255, 215, 0, 0.1) 100%
    );
    animation: megaWinPulse 2s ease-in-out infinite;
}

.win-entry.new-win {
    animation: newWinSlide 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ═══ WIN ENTRY MAIN ROW ═══ */
.win-main-row {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
}

/* ═══ WIN AVATAR ═══ */
.win-avatar {
    position: relative;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px solid transparent;
    border-radius: 50%;
    background: linear-gradient(45deg, #ff3ebf, #00e5ff, #74b9ff) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: subtract;
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask-composite: subtract;
    animation: avatarSpin 6s linear infinite;
}

.avatar-icon {
    font-size: 1.5rem;
    z-index: 2;
    filter: drop-shadow(0 0 8px rgba(255, 62, 191, 0.5));
}

/* ═══ WIN DETAILS ═══ */
.win-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.win-player {
    font-size: 0.95rem;
    font-weight: 600;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.win-amount {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 2px 0;
}

.sol-amount {
    font-size: 1.05rem;
    font-weight: 700;
    color: #00ff88;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.4);
    font-family: 'Press Start 2P', monospace;
}

.usd-amount {
    font-size: 0.9rem;
    font-weight: 500;
    color: #74b9ff;
    opacity: 0.8;
}

.win-type {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.win-entry.mega .win-type {
    color: #ffd700;
    font-weight: 700;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}

/* ═══ WIN EXPANDED DETAILS ═══ */
.win-expanded-details {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-top: 0;
    padding-top: 0;
    border-top: 0px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(0, 0, 0, 0.3); /* Subtle background for contrast */
    border-radius: 0 0 12px 12px; /* Round bottom corners */
    position: relative;
    z-index: 5; /* Ensure it appears above other content */
}

.win-entry.expanded .win-expanded-details {
    max-height: 250px; /* Increased max-height for better visibility */
    opacity: 1;
    margin-top: 16px;
    padding: 16px;
    border-top: 1px solid rgba(255, 62, 191, 0.2);
    border: 1px solid rgba(255, 62, 191, 0.1);
}

.expanded-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 0.85rem;
}

.expanded-label {
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
}

.expanded-value {
    color: #ffffff;
    font-weight: 600;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.75rem;
}

.expanded-wallet {
    color: #74b9ff;
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
}

.expanded-timestamp {
    color: #00ff88;
}

.win-entry.expanded {
    border-color: rgba(255, 62, 191, 0.4);
    box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(255, 62, 191, 0.3);
    transform: scale(1.02);
    z-index: 10; /* Bring expanded entries to front */
    overflow: visible; /* Ensure expanded content is visible */
}

/* Expand/Collapse Indicator */
.expand-indicator {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 24px; /* Slightly larger for better clickability */
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 62, 191, 0.3);
    border: 1px solid rgba(255, 62, 191, 0.5);
    border-radius: 50%;
    color: #ff3ebf;
    font-size: 0.9rem;
    font-weight: bold;
    transition: all 0.3s ease;
    cursor: pointer;
    z-index: 15; /* High z-index to ensure it's clickable */
    box-shadow: 0 2px 8px rgba(255, 62, 191, 0.2);
}

.expand-indicator:hover {
    background: rgba(255, 62, 191, 0.5);
    border-color: rgba(255, 62, 191, 0.8);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(255, 62, 191, 0.4);
}

.win-entry.expanded .expand-indicator {
    transform: rotate(180deg);
    background: rgba(0, 255, 136, 0.3);
    border-color: rgba(0, 255, 136, 0.5);
    color: #00ff88;
    box-shadow: 0 2px 8px rgba(0, 255, 136, 0.2);
}

.win-entry.expanded .expand-indicator:hover {
    background: rgba(0, 255, 136, 0.5);
    border-color: rgba(0, 255, 136, 0.8);
    transform: rotate(180deg) scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 255, 136, 0.4);
}

/* ═══ WIN GLOW EFFECT ═══ */
.win-glow {
    position: absolute;
    top: 50%;
    right: -20px;
    width: 40px;
    height: 40px;
    background: radial-gradient(circle, rgba(255, 62, 191, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    animation: winGlow 3s ease-in-out infinite;
    pointer-events: none;
}

.win-entry.mega .win-glow {
    background: radial-gradient(circle, rgba(255, 215, 0, 0.4) 0%, transparent 70%);
    animation-duration: 2s;
}

/* ═══ PANEL FOOTER ═══ */
.panel-footer {
    background: linear-gradient(135deg, 
        rgba(0, 0, 0, 0.3) 0%,
        rgba(116, 185, 255, 0.1) 50%,
        rgba(0, 0, 0, 0.3) 100%
    );
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    backdrop-filter: blur(15px);
}

.live-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
}

.live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: liveDot 2s ease-in-out infinite;
}

.panel-stats {
    display: flex;
    align-items: center;
    gap: 12px;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.stat-value {
    font-size: 1.2rem;
    filter: drop-shadow(0 0 6px rgba(255, 62, 191, 0.5));
}

.stat-label {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ═══ HIDE DURING SLOT FOCUS/BUILDUP ═══ */
.slot-focus-container.focused .live-wins-panel {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-20px) scale(0.95) !important;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Also hide during buildup animation */
.reel-wrapper.buildup ~ * .live-wins-panel,
.buildup .live-wins-panel {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-20px) scale(0.95) !important;
    transition: all 0.3s ease !important;
}

/* Additional selectors for spin states */
.start-spin .live-wins-panel,
.spinning .live-wins-panel,
.casino-content.spinning .live-wins-panel {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-20px) scale(0.95) !important;
    transition: all 0.3s ease !important;
}

/* Smooth fade back in when focus ends */
.live-wins-panel {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ═══ RESPONSIVE DESIGN ═══ */
@media (max-width: 1400px) {
    .live-wins-panel {
        width: 320px;
        height: 450px;
    }
    
    .panel-header {
        padding: 16px 20px;
    }
    
    .wins-stream {
        height: 320px;
        padding: 12px;
    }
    
    .win-entry {
        padding: 12px;
    }
}

@media (max-width: 1200px) {
    .live-wins-panel {
        width: 300px;
        height: 400px;
    }
    
    .wins-stream {
        height: 280px;
    }
    
    .panel-title {
        font-size: 1.2rem;
    }
    
    .win-avatar {
        width: 40px;
        height: 40px;
    }
    
    .avatar-icon {
        font-size: 1.3rem;
    }
}

@media (max-width: 768px) {
    .live-wins-panel {
        width: 280px;
        height: 350px;
    }
    
    .panel-header {
        padding: 12px 16px;
    }
    
    .wins-stream {
        height: 240px;
        padding: 8px;
        gap: 8px;
    }
    
    .win-entry {
        padding: 10px;
    }
    
    .panel-title {
        font-size: 1rem;
    }
    
    .header-icon {
        font-size: 1.5rem;
    }
    
    .win-counter {
        font-size: 0.8rem;
    }
    
    .counter-value {
        font-size: 0.7rem;
    }
    
    .win-player {
        font-size: 0.85rem;
    }
    
    .sol-amount {
        font-size: 0.9rem;
    }
    
    .usd-amount {
        font-size: 0.8rem;
    }
    
    .win-type {
        font-size: 0.7rem;
    }
    
    .panel-footer {
        padding: 12px 16px;
    }
    
    .live-indicator {
        font-size: 0.75rem;
    }
    
    /* Mobile adjustments for expanded details */
    .expanded-label {
        font-size: 0.65rem;
    }
    
    .expanded-value {
        font-size: 0.65rem;
    }
    
    .expanded-wallet {
        font-size: 0.7rem;
    }
    
    .expand-indicator {
        width: 18px;
        height: 18px;
        font-size: 0.7rem;
    }
    
    .win-entry.expanded .win-expanded-details {
        max-height: 150px;
    }
}